/* Jack Grady — Ass Magic.
   Layout language: cream textured hero -> diagonal wipe -> pinned "signature moments"
   trading cards -> dot-matrix quote with stacking polaroids -> cream tour section ->
   dark content -> leather finale with partner strip. */
:root{
  --ink:#0d0b0b;
  --ink-2:#171313;
  --ink-3:#2a2323;
  --oxblood:#1c0a09;
  --cream:#efe9df;
  --cream-2:#e2dacb;
  --bone:#f4efe6;
  --bone-2:#cfc8bc;
  --muted:#8e877d;
  --red:#d9261c;
  --red-2:#ff3b2f;
  --display:"Anton","Impact","Arial Narrow Bold",sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --gutter:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --pebble:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='p'><feTurbulence type='turbulence' baseFrequency='.09' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.2 1.2'/></filter><rect width='100%' height='100%' filter='url(%23p)'/></svg>");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--bone);font-family:var(--body);font-size:17px;line-height:1.55;overflow-x:hidden;overflow-x:clip;-webkit-font-smoothing:antialiased}
body.is-loading{overflow:hidden}
main{overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--red-2);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.red{color:var(--red)}

/* ---------- grain / progress / cursor ---------- */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;background-image:var(--noise);animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-3%,5%)}80%{transform:translate(6%,2%)}100%{transform:translate(0,0)}}
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--red);transform-origin:0 50%;transform:scaleX(0);z-index:120}
.cursor{position:fixed;top:0;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--red);z-index:130;pointer-events:none;display:none;place-items:center;transition:width .3s var(--ease-out),height .3s var(--ease-out),margin .3s var(--ease-out)}
.cursor span{font:700 11px/1 var(--body);letter-spacing:.12em;color:#fff;opacity:0;transition:opacity .2s}
.cursor.is-big{width:96px;height:96px;margin:-48px 0 0 -48px}
.cursor.is-big span{opacity:1}
@media (hover:hover) and (pointer:fine){.cursor{display:grid}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:200;background:var(--cream);color:var(--ink);display:grid;place-items:center;align-content:center;gap:28px;transition:clip-path 1.1s var(--ease-out);clip-path:inset(0 0 0 0)}
.loader.is-done{clip-path:inset(0 0 100% 0)}
.loader__cards{position:relative;width:60px;height:84px}
.lcard{position:absolute;inset:0;border-radius:6px;background:var(--ink);border:2px solid var(--cream);animation:shuffle 1.1s var(--ease) infinite}
.lcard:nth-child(2){background:var(--red);animation-delay:.12s}
.lcard:nth-child(3){animation-delay:.24s}
@keyframes shuffle{0%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-40px,-6px) rotate(-18deg)}60%{transform:translate(40px,-6px) rotate(18deg)}}
.loader__pct{font:400 clamp(56px,12vw,120px)/1 var(--display);font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;padding:.85em 1.4em;border-radius:999px;border:2px solid currentColor;background:transparent;font:700 14px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s;will-change:transform}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bone);transform:translateY(101%);transition:transform .45s var(--ease-out);border-radius:inherit}
.btn:hover::before{transform:none}
.btn:hover{color:var(--ink)}
.btn--red{background:var(--red);border-color:var(--red);color:#fff}
.btn--red::before{background:var(--ink)}
.btn--red:hover{color:#fff;border-color:var(--ink)}
.dark .btn--red::before,.finale .btn--red::before{background:var(--bone)}
.dark .btn--red:hover,.finale .btn--red:hover{color:var(--ink);border-color:var(--bone)}
.btn--ghost{color:var(--bone)}
.btn--light{background:var(--bone);border-color:var(--bone);color:var(--ink)}
.btn--light::before{background:var(--red)}
.btn--light:hover{color:#fff;border-color:var(--red)}
.btn--big{font-size:15px;min-height:58px;padding:1em 1.8em}
.btn--sm{min-height:42px;font-size:12px;padding:.7em 1.2em}
.btn.is-disabled{opacity:.5;cursor:default}
.btn.is-disabled::before{display:none}
.btn.is-disabled:hover{color:var(--bone)}
.arrow{display:inline-block;transition:transform .35s var(--ease-out)}
a:hover .arrow,button:hover .arrow{transform:translateX(5px)}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px var(--gutter);padding-top:max(14px,env(safe-area-inset-top));color:var(--ink);transition:transform .5s var(--ease-out),color .3s,background-color .3s,box-shadow .3s,padding .3s}
.nav.on-dark{color:var(--bone)}
.nav.is-hidden{transform:translateY(-110%)}
/* once scrolled: solid bar so the nav always reads, whatever is behind it */
.nav.is-scrolled{background:rgba(239,233,223,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(13,11,11,.12),0 8px 24px rgba(13,11,11,.08);padding-top:max(8px,env(safe-area-inset-top));padding-bottom:8px}
.nav.is-scrolled.on-dark{background:rgba(13,11,11,.92);box-shadow:0 1px 0 rgba(244,239,230,.12),0 8px 24px rgba(0,0,0,.35)}
body.menu-open .nav.is-scrolled{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav__logo{justify-self:start;display:block;padding:4px}
.hat{width:34px;height:26px;fill:currentColor;transition:transform .5s var(--ease-out);display:block}
.hat .band{fill:var(--red)}
.nav__logo:hover .hat{transform:translateY(-5px) rotate(-12deg)}
.nav__name{font:400 18px/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav__right{justify-self:end;display:flex;align-items:center;gap:10px}
.nav__cta{min-height:40px}
.burger{width:46px;height:46px;border:0;background:transparent;cursor:pointer;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:2px;background:currentColor;transition:transform .4s var(--ease-out)}
.burger span:first-child{top:18px;transform:skewY(-8deg)}.burger span:last-child{top:26px;transform:skewY(-8deg)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* side-panel menu */
.menu{position:fixed;inset:0;z-index:99;visibility:hidden;transition:visibility 0s .7s}
.menu.is-open{visibility:visible;transition:none}
.menu__scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .5s}
.menu.is-open .menu__scrim{opacity:1}
.menu__panel{position:absolute;top:10px;left:10px;bottom:10px;width:min(380px,calc(100% - 20px));background:#1c1717 var(--noise);border-radius:14px;padding:28px 28px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column;color:var(--bone);transform:translateX(-110%);transition:transform .7s var(--ease-out);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.menu.is-open .menu__panel{transform:none}
.hat--menu{width:30px;height:24px;fill:var(--bone)}
.menu__links{display:flex;flex-direction:column;gap:2px;margin:auto 0}
.menu__links a{font:400 clamp(36px,6vh,54px)/1.05 var(--display);text-transform:uppercase;text-decoration:none;transform:translateX(-30px);opacity:0;transition:transform .6s var(--ease-out),opacity .6s,color .2s}
.menu__links a:hover{color:var(--red-2)}
.menu.is-open .menu__links a{transform:none;opacity:1}
.menu.is-open .menu__links a:nth-child(2){transition-delay:.04s}.menu.is-open .menu__links a:nth-child(3){transition-delay:.08s}
.menu.is-open .menu__links a:nth-child(4){transition-delay:.12s}.menu.is-open .menu__links a:nth-child(5){transition-delay:.16s}
.menu.is-open .menu__links a:nth-child(6){transition-delay:.2s}.menu.is-open .menu__links a:nth-child(7){transition-delay:.24s}
.menu.is-open .menu__links a:nth-child(8){transition-delay:.28s}
.menu__social{display:flex;gap:14px;margin-bottom:16px}
.menu__social a{width:40px;height:40px;border-radius:50%;border:1px solid var(--ink-3);display:grid;place-items:center;transition:background .2s,border-color .2s}
.menu__social a:hover{background:var(--red);border-color:var(--red)}
.menu__social svg{width:18px;height:18px;fill:currentColor}
.menu__legal{font:500 11px/1.5 var(--mono);color:var(--muted);margin:0;border-top:1px solid var(--ink-3);padding-top:14px}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--cream);color:var(--ink);isolation:isolate}
.hero{background:radial-gradient(ellipse at 50% 30%,#f8f4ec 0%,var(--cream) 50%,#ddd4c4 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noise);opacity:.16;mix-blend-mode:multiply}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:3;background:linear-gradient(to top,var(--cream) 12%,transparent);pointer-events:none}
.hero__letters{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:0;pointer-events:none;user-select:none}
.hero__letters span{display:block;font:400 min(34vw,46vh)/.82 var(--display);letter-spacing:-.01em;color:var(--cream-2);text-shadow:2px 2px 0 rgba(255,255,255,.75),-1px -1px 0 rgba(0,0,0,.07);transform:translateY(30%);opacity:0;transition:transform 1.4s var(--ease-out),opacity 1.4s}
.hero__letters span:last-child{transition-delay:.12s}
.is-ready .hero__letters span{transform:none;opacity:1}
.hero__jack{position:absolute;left:50%;bottom:6vh;height:min(92vh,900px);width:auto;max-width:none;z-index:2;translate:-50% 0;transform:translateY(12%) scale(.96);opacity:0;transition:transform 1.4s var(--ease-out) .25s,opacity 1s .25s;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 18%);mask-image:linear-gradient(to top,transparent 0,#000 18%)}
.is-ready .hero__jack{transform:none;opacity:1}
.hero__left{position:absolute;left:var(--gutter);top:46%;width:220px;z-index:4;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(20px);transition:opacity 1s .7s,transform 1s var(--ease-out) .7s}
.is-ready .hero__left,.is-ready .hero__right,.is-ready .hero__bottom{opacity:1;transform:none}
.mini-card{display:block;width:96px;aspect-ratio:3/4;border-radius:6px;overflow:hidden;border:4px solid var(--ink);box-shadow:0 12px 24px rgba(0,0,0,.25);transform:rotate(-6deg);transition:transform .5s var(--ease-out)}
.mini-card:hover{transform:rotate(3deg) scale(1.06)}
.mini-card img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.hero__left p{margin:0;font-size:13px;line-height:1.45;color:#3b3530}
.hero__right{position:absolute;right:var(--gutter);top:46%;z-index:4;text-align:right;opacity:0;transform:translateY(20px);transition:opacity 1s .85s,transform 1s var(--ease-out) .85s}
.hero__bio{margin:0;font:500 12px/1.9 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:#3b3530}
.hero__bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:calc(14vh + 20px);z-index:5;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;opacity:0;transform:translateY(20px);transition:opacity 1s 1s,transform 1s var(--ease-out) 1s}
.hero p{color:#3b3530}
.hero__tag{color:var(--ink)!important;margin:0;font:400 clamp(30px,4vw,58px)/.95 var(--display);text-transform:uppercase}
.hero__credit{position:absolute;right:var(--gutter);top:calc(46% + 80px);z-index:4;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#8a8278}

/* ---------- MOMENTS (pinned horizontal) ---------- */
.moments{position:relative;background:var(--ink);height:400vh;margin-top:-14vh;z-index:6;clip-path:polygon(0 var(--cut,14vh),100% 0,100% 100%,0 100%)}
.moments__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:radial-gradient(ellipse at 50% 120%,#3a0f0b 0%,transparent 60%),var(--ink)}
.moments__pin::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.25;pointer-events:none}
.moments__word{position:absolute;top:8vh;left:0;white-space:nowrap;font:400 clamp(120px,22vw,340px)/.85 var(--display);color:#2a1210;transform:translateX(var(--wx,0));will-change:transform;pointer-events:none}
.moments__track{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:clamp(40px,7vw,120px);padding:0 30vw 0 34vw;transform:translate3d(var(--tx,0),0,0);will-change:transform}
.moment{position:relative;flex:0 0 auto;width:clamp(190px,19vw,280px);text-align:center;transform:translateY(var(--y,0))}
.moment h3{margin:16px 0 4px;font:500 12px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.moment p{margin:0;font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.yard{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(var(--yd,33vh) - var(--y,0vh)));font:400 clamp(56px,7vw,96px)/1 var(--display);color:#3a302e;pointer-events:none;z-index:-1}
.moments__ruler{position:absolute;left:0;right:-50%;bottom:4vh;height:14px;background:repeating-linear-gradient(90deg,#3a302e 0 2px,transparent 2px 24px);opacity:.6;transform:translateX(calc(var(--tx,0) * .25))}
.tcard{position:relative;display:block;aspect-ratio:5/7;border-radius:12px;padding:7px;background:conic-gradient(from 210deg,#f4efe6,#b8b0a4,#fff,#9c948a,#f4efe6);box-shadow:0 30px 60px rgba(0,0,0,.6);transition:transform .4s var(--ease-out)}
.tcard--red{background:conic-gradient(from 210deg,#ff5a4f,#8a120c,#ff8a80,#b3170f,#ff5a4f)}
.tcard img{width:100%;height:100%;object-fit:cover;border-radius:7px;filter:contrast(1.08) saturate(1.1)}
.tcard::after{content:"";position:absolute;inset:7px;border-radius:7px;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35);pointer-events:none}
.holo{position:absolute;inset:7px;border-radius:7px;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.45) 45%,rgba(255,80,60,.25) 52%,transparent 65%);background-size:250% 100%;background-position:var(--hx,100%) 0;mix-blend-mode:screen;pointer-events:none}
.tcard--cta{background:var(--red);display:grid;place-items:center;text-decoration:none;color:#fff;padding:20px}
.tcard--cta span{font:400 clamp(30px,3vw,44px)/.95 var(--display);text-transform:uppercase;text-align:left;width:100%}
.tcard--cta em{font-style:normal;color:var(--ink)}
.tcard--cta::after{inset:10px;border:2px dashed rgba(255,255,255,.5);box-shadow:none}

/* ---------- QUOTE (pinned: dot matrix -> solid, polaroids stack) ---------- */
.quote{position:relative;height:320vh;background:var(--oxblood)}
.quote__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 var(--gutter);background:radial-gradient(ellipse at 50% 50%,#2c0f0c,var(--oxblood) 70%)}
.quote__pin::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.3;pointer-events:none}
.quote__marks{font:400 clamp(50px,6vw,90px)/1 var(--display);color:var(--red);letter-spacing:-.05em;margin-bottom:6px}
.quote__text{position:relative;margin:0;text-align:center;font:400 clamp(48px,8.4vw,150px)/.92 var(--display);text-transform:uppercase;max-width:13ch}
.quote__dots,.quote__solid{display:block}
.quote__dots{color:transparent;background:radial-gradient(circle,rgba(244,239,230,.6) 34%,transparent 40%) 0 0/7px 7px;-webkit-background-clip:text;background-clip:text}
.quote__solid{position:absolute;inset:0;color:var(--bone);clip-path:inset(0 calc(100% - var(--qp,0) * 100%) 0 0)}
.quote__sub{position:relative;margin:26px auto 0;max-width:46ch;text-align:center;color:var(--bone-2);font-size:clamp(15px,1.3vw,18px);opacity:var(--qp,0)}
.polaroids{position:absolute;inset:0;pointer-events:none}
.pola{margin:0;background:#fbf8f2;padding:10px 10px 40px;box-shadow:0 20px 50px rgba(0,0,0,.45);border-radius:2px;position:relative}
.pola img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:contrast(1.05) saturate(.95)}
.pola figcaption{position:absolute;left:12px;right:12px;bottom:12px;font:500 13px/1 var(--mono);color:#3b3530;text-transform:lowercase}
.polaroids .pola{position:absolute;left:50%;top:50%;width:clamp(220px,26vw,380px);transform:translate(calc(-50% + var(--x,0%) * var(--spread,1)),calc(-50% + var(--py,120vh))) rotate(var(--r,0deg));will-change:transform}

/* ---------- TOUR (cream) ---------- */
.tour{position:relative;background:var(--cream);color:var(--ink);padding:clamp(70px,10vw,140px) 0 clamp(80px,10vw,140px);overflow:hidden;isolation:isolate}
.tour::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--noise);opacity:.16;mix-blend-mode:multiply}
.tour__lines{font:400 clamp(70px,12vw,200px)/.86 var(--display);text-transform:uppercase;white-space:nowrap;color:var(--red)}
.tour__line{transform:translateX(var(--lx,0));will-change:transform}
.tour__line:last-child{color:var(--ink);margin-left:-30vw}
.tour__polas{display:flex;justify-content:center;gap:clamp(12px,2vw,28px);padding:0 var(--gutter);margin-top:clamp(-60px,-4vw,-30px);position:relative;z-index:2}
.pola--row{width:clamp(150px,21vw,300px);flex:0 0 auto;transform:translateY(var(--ry,60px)) rotate(var(--r,0deg));transition:transform .9s var(--ease-out)}
.pola--row:hover{transform:translateY(-10px) rotate(0) scale(1.04);z-index:2}
.tour__grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,90px);align-items:center;padding:clamp(60px,8vw,110px) var(--gutter) 0}
.ticket{display:grid;grid-template-columns:auto 1fr;text-decoration:none;color:var(--bone);background:var(--ink);border-radius:18px;position:relative;min-height:300px;overflow:hidden;transition:transform .2s;box-shadow:0 40px 80px rgba(0,0,0,.25)}
.ticket::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 45%,transparent 60%);transform:translateX(-100%);transition:transform .9s var(--ease-out);pointer-events:none}
.ticket:hover::after{transform:translateX(100%)}
.ticket__stub{background:var(--red);color:#fff;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;justify-content:center;gap:16px;padding:20px 22px;font:400 30px/1 var(--display);letter-spacing:.08em;border-left:3px dashed var(--cream)}
.ticket__body{padding:clamp(24px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.ticket__label{font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--bone-2)}
.ticket__title{font:400 clamp(48px,6.4vw,96px)/.9 var(--display);text-transform:uppercase}
.ticket__go{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px;display:flex;align-items:center;gap:8px;border-top:2px solid var(--ink-3);padding-top:16px}
.tour__copy p{color:#3b3530}
.tour__copy .lead{color:var(--ink)}
.tour__cry{font:400 clamp(28px,3vw,42px)/1.02 var(--display);text-transform:uppercase;color:var(--red)!important;border-left:4px solid var(--red);padding-left:18px;margin:26px 0}
.adult{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.adult span{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--red);color:var(--red);font:400 15px/1 var(--display)}

/* ---------- generic dark sections ---------- */
.section{padding:clamp(80px,12vw,160px) var(--gutter);position:relative}
.dark{background:var(--ink)}
.section__head{margin-bottom:clamp(40px,6vw,72px)}
.section__head--row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.eyebrow{display:block;font:500 13px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.big{font:400 clamp(46px,8vw,120px)/.92 var(--display);text-transform:uppercase;margin:0}
.lead{font-size:clamp(19px,1.7vw,23px);line-height:1.45;font-weight:500;color:var(--bone)}
p{color:var(--bone-2)}
.muted{color:var(--muted)}
.small{font-size:13px}
.sub{font:400 clamp(30px,4vw,52px)/1 var(--display);text-transform:uppercase;margin:clamp(70px,9vw,120px) 0 28px}
.center{text-align:center;margin-top:32px}
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.reveal-up.is-in{opacity:1;transform:none}
.reveal-clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.3s var(--ease-out)}
.reveal-clip.is-in{clip-path:inset(0 0 0 0)}

/* ---------- about ---------- */
.about__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,96px);align-items:start}
.about__photo{margin:0;position:sticky;top:100px;aspect-ratio:4/5;background:var(--ink-2);border-radius:16px}
.about__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;border-radius:16px;filter:contrast(1.05)}
.about__photo figcaption{position:absolute;left:14px;bottom:12px;font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.8);background:rgba(0,0,0,.45);padding:5px 8px;border-radius:4px}
.sticker{position:absolute;right:-28px;top:-28px;width:140px;height:140px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 20px 40px rgba(0,0,0,.4)}
.sticker svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 14s linear infinite}
.sticker text{font:700 15.5px var(--body);letter-spacing:.12em;fill:#fff}
.sticker b{font-size:40px;color:#fff;line-height:1}
@keyframes spin{to{transform:rotate(360deg)}}
.readmore{display:grid;grid-template-rows:0fr;transition:grid-template-rows .7s var(--ease-out)}
.readmore.is-open{grid-template-rows:1fr}
.readmore-inner{overflow:hidden}
.readmore-inner p{margin:0 0 1em}
#readmoreBtn{margin-top:16px}
.stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:clamp(70px,9vw,120px);border-top:1px solid var(--ink-3)}
.stat{padding:28px 16px 0;border-right:1px solid var(--ink-3)}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0}
.stat b{display:block;font:400 clamp(44px,5.5vw,84px)/1 var(--display);color:var(--bone);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:8px;font:500 12px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat:nth-child(2){transition-delay:.06s}.stat:nth-child(3){transition-delay:.12s}.stat:nth-child(4){transition-delay:.18s}.stat:nth-child(5){transition-delay:.24s}

/* ---------- video ---------- */
.video-card{position:relative}
.video-card__btn{display:block;width:100%;padding:0;border:0;background:var(--ink-2);border-radius:14px;overflow:hidden;position:relative;aspect-ratio:16/9;cursor:pointer}
.video-card__btn img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease-out),filter .5s;filter:brightness(.82)}
.video-card__btn:hover img{transform:scale(1.06);filter:brightness(.6)}
.play{position:absolute;left:50%;top:50%;width:80px;height:80px;margin:-40px 0 0 -40px;border-radius:50%;background:var(--red);display:grid;place-items:center;transition:transform .4s var(--ease-out);animation:pulse2 2.2s infinite}
.play svg{width:32px;height:32px;fill:#fff;margin-left:4px}
.video-card__btn:hover .play{transform:scale(1.15)}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(217,38,28,.6)}70%{box-shadow:0 0 0 22px rgba(217,38,28,0)}100%{box-shadow:0 0 0 0 rgba(217,38,28,0)}}
.badge{position:absolute;top:14px;left:14px;background:var(--bone);color:var(--ink);font:700 11px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:7px 10px;border-radius:999px}
.video-card iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-card__title{margin:16px 0 4px;font:400 clamp(22px,2vw,30px)/1.05 var(--display);text-transform:uppercase;color:var(--bone)}
.video-card__meta{margin:0;font-size:14px;color:var(--muted)}
.watch__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,3vw,36px)}
.video-card--feature{grid-column:1/-1}
.video-card--feature .video-card__btn{aspect-ratio:21/9}
.video-card--feature .play{width:110px;height:110px;margin:-55px 0 0 -55px}
.ig-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.ig-item{min-width:0;background:var(--ink-2);border-radius:14px;min-height:420px;overflow:hidden}
.ig-item .instagram-media{margin:0!important;min-width:0!important;width:100%!important;max-width:100%!important;border-radius:14px!important}
.ig-item blockquote>a{display:grid;place-items:center;min-height:420px;padding:24px;text-align:center;font:400 26px/1.1 var(--display);text-transform:uppercase;text-decoration:none;color:var(--bone)}

/* ---------- fight ---------- */
.fight{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;padding:clamp(100px,12vw,160px) var(--gutter);background:#140403}
.fight__media{position:absolute;inset:-10% 0;z-index:0}
.fight__media img{width:100%;height:100%;object-fit:cover;object-position:75% 30%;filter:grayscale(1) contrast(1.3) brightness(.5)}
.fight::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(13,11,11,.96) 0%,rgba(13,11,11,.7) 50%,rgba(217,38,28,.35) 100%)}
.fight__inner{position:relative;z-index:2;max-width:720px}
.fight__record{font:400 clamp(150px,30vw,380px)/.8 var(--display);display:flex;align-items:baseline;color:var(--red);margin:6px 0 10px;letter-spacing:-.02em}
.fight__record .dash{color:var(--bone);margin:0 .05em}
.fight__title{font:400 clamp(42px,6vw,88px)/.92 var(--display);text-transform:uppercase;margin:0 0 20px}

/* ---------- book ---------- */
.book__grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.bookform{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:20px;padding:clamp(24px,4vw,48px)}
.bookform h3,.press h3{font:400 clamp(30px,3vw,44px)/1 var(--display);text-transform:uppercase;margin:0 0 10px}
.field{position:relative;margin-top:16px}
.field input,.field textarea{width:100%;background:transparent;border:0;border-bottom:2px solid var(--ink-3);color:var(--bone);font:500 17px/1.4 var(--body);padding:24px 0 10px;border-radius:0;transition:border-color .3s;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--red)}
.field label{position:absolute;left:0;top:22px;color:var(--muted);pointer-events:none;transition:transform .3s var(--ease-out),color .3s;transform-origin:0 0}
.field input:focus+label,.field input:not(:placeholder-shown)+label,.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-18px) scale(.75);color:var(--red-2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bookform .btn{margin-top:30px;width:100%}
.form-note{min-height:1.5em;margin:14px 0 0;font-size:14px}
.field.is-error input{border-color:var(--red-2)}
.book__side{display:grid;gap:clamp(24px,3vw,36px)}
.cameo{display:flex;flex-direction:column;gap:14px;text-decoration:none;background:var(--red);color:#fff;border-radius:20px;padding:clamp(26px,4vw,44px);position:relative;overflow:hidden;transition:transform .2s;min-height:280px;justify-content:space-between}
.cameo__label{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.cameo strong{font:400 clamp(36px,4vw,60px)/.95 var(--display);text-transform:uppercase;max-width:11ch;position:relative;z-index:1}
.cameo__go{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:15px;display:flex;gap:8px;position:relative;z-index:1}
.cameo__star{position:absolute;right:-30px;bottom:-60px;font-size:260px;line-height:1;color:rgba(0,0,0,.18);transition:transform 1s var(--ease-out)}
.cameo:hover .cameo__star{transform:rotate(72deg) scale(1.1)}
.press ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-3)}
.press a{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;border-bottom:1px solid var(--ink-3);text-decoration:none;transition:padding .35s var(--ease-out),color .3s}
.press a:hover{padding-left:12px;color:var(--red-2)}
.press span{font:400 22px/1.1 var(--display);text-transform:uppercase}
.press em{font-style:normal;font-size:13px;color:var(--muted);text-align:right}

/* ---------- merch ---------- */
.merch{padding-top:0}
.merch__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px)}
.merch__item{transition:transform .2s}
.merch__item p{margin:14px 0 0;font:400 26px/1 var(--display);text-transform:uppercase;color:var(--bone)}
.merch__art{aspect-ratio:4/5;border-radius:16px;display:grid;place-items:center;position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--ink-3)}
.merch__art span{font:400 clamp(44px,6vw,86px)/.85 var(--display);text-align:center;position:relative}
.merch__art--poster{background:repeating-linear-gradient(-45deg,var(--red) 0 22px,#bf1f16 22px 44px)}
.merch__art--poster span{color:var(--bone);text-shadow:6px 6px 0 var(--ink)}
.merch__art--shirt svg{position:absolute;width:80%;fill:var(--bone)}
.merch__art--shirt span{color:var(--ink);font-size:clamp(34px,4vw,56px);margin-top:10%}
.merch__art--sticker span{width:68%;aspect-ratio:1;border-radius:50%;background:var(--bone);color:var(--red);display:grid;place-items:center;font-size:clamp(34px,4.6vw,66px);transform:rotate(-12deg);box-shadow:0 0 0 8px var(--ink),0 0 0 11px var(--bone);transition:transform .6s var(--ease-out)}
.merch__item:hover .merch__art--sticker span{transform:rotate(8deg) scale(1.05)}
.merch .small{margin-top:22px}

/* ---------- finale (leather) ---------- */
.finale{position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;background:radial-gradient(ellipse at 50% 30%,#2e1513 0%,#120909 70%);overflow:hidden;isolation:isolate}
.finale::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--pebble);background-size:90px;opacity:.18}
.finale__inner{text-align:center;padding:120px var(--gutter) 160px;display:flex;flex-direction:column;align-items:center;gap:28px}
.hat--big{width:90px;height:68px;fill:var(--bone);animation:tip 3.2s var(--ease) infinite}
@keyframes tip{0%,70%,100%{transform:none}80%{transform:translateY(-14px) rotate(-14deg)}90%{transform:translateY(-4px) rotate(4deg)}}
.finale__title{margin:0;font:400 clamp(44px,7.4vw,120px)/.92 var(--display);text-transform:uppercase;color:var(--bone)}
.partners{position:absolute;left:0;right:0;bottom:0;padding:26px 0;border-top:1px solid rgba(244,239,230,.08);overflow:hidden}
.partners__track{display:inline-flex;gap:64px;white-space:nowrap;animation:marq 32s linear infinite}
.partners span{font:400 26px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;color:rgba(244,239,230,.4)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- footer ---------- */
.footer{padding:60px var(--gutter) calc(28px + env(safe-area-inset-bottom));background:var(--ink)}
.footer__cols{display:flex;flex-wrap:wrap;gap:clamp(32px,6vw,100px)}
.footer h4{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.footer__cols a{display:block;text-decoration:none;font-weight:600;padding:6px 0;transition:color .2s}
.footer__cols a:hover{color:var(--red-2)}
.footer__bottom{display:flex;flex-wrap:wrap;gap:16px 32px;justify-content:space-between;align-items:center;margin-top:50px;padding-top:24px;border-top:1px solid var(--ink-3);font-size:13px;color:var(--muted)}
.footer .adult{color:var(--bone-2)}

.sticky-cta{display:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .stats{grid-template-columns:repeat(3,1fr)}
  .stat{border-bottom:1px solid var(--ink-3);padding-bottom:24px}
  .stat:nth-child(3){border-right:0}
  .stat:nth-child(4){padding-left:0}
  .ig-rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(300px,78%);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin:0 calc(var(--gutter) * -1);padding-inline:var(--gutter);scrollbar-width:none}
  .ig-rail::-webkit-scrollbar{display:none}
  .ig-item{scroll-snap-align:center}
}
@media (max-width:820px){
  body{font-size:16px}
  .nav__name{display:none}
  .nav{grid-template-columns:1fr auto}
  .hero__jack{height:min(74svh,640px)}
  .hero__letters{justify-content:flex-start;padding-top:15svh}
  .hero__letters span{font-size:min(37vw,30svh)}
  .hero__left{top:84px;bottom:auto;width:auto}
  .hero__left p{display:none}
  .mini-card{width:66px;border-width:3px}
  .hero__right{top:84px}
  .hero__bio{font-size:10px;line-height:1.8}
  .hero__credit{display:none}
  .hero__bottom{flex-direction:column;align-items:stretch;gap:14px;bottom:calc(8vh + 18px)}
  .hero__jack{bottom:4vh}
  .hero__tag{font-size:clamp(28px,8.4vw,40px)}
  .hero__bottom .btn{width:100%}
  .moments{height:560vh;margin-top:-8vh;--cut:8vh}
  .moment{width:60vw}
  .moments__track{padding:0 20vw}
  .moments__word{top:10svh}
  .moments__ruler{bottom:3svh}
  .moment{--yd:35svh}
  .polaroids .pola{width:64vw;--spread:.4}
  .quote{height:300vh}
  .tour__polas{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:40px;scrollbar-width:none}
  .tour__polas::-webkit-scrollbar{display:none}
  .pola--row{width:56vw;scroll-snap-align:center}
  .tour__grid,.about__grid,.book__grid{grid-template-columns:1fr}
  .about__photo{position:relative;top:0;max-width:520px;width:88%}
  .sticker{width:110px;height:110px;right:-20px;top:-20px}
  .sticker text{font-size:16px}
  .watch__grid{grid-template-columns:1fr}
  .video-card--feature .video-card__btn{aspect-ratio:16/9}
  .merch__grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:72%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 10px;scrollbar-width:none}
  .merch__grid::-webkit-scrollbar{display:none}
  .merch__item{scroll-snap-align:center}
  .partners span{font-size:20px}
  .sticky-cta{display:flex;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:95;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 20px;min-height:60px;border-radius:999px;background:var(--red);color:#fff;text-decoration:none;box-shadow:0 18px 40px rgba(0,0,0,.55);transform:translateY(160%);transition:transform .6s var(--ease-out)}
  .sticky-cta.is-on{transform:none}
  .sticky-cta span{font:500 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase}
  .sticky-cta b{background:var(--ink);padding:14px 20px;border-radius:999px;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
  .footer{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
}
@media (max-width:560px){
  .nav__cta{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .stat{border-right:0!important;padding-left:0!important}
  .stat:nth-child(odd){border-right:1px solid var(--ink-3)!important}
  .stat:nth-child(even){padding-left:16px!important}
  .stat:last-child{grid-column:1/-1;border-right:0!important}
  .field-row{grid-template-columns:1fr;gap:0}
  .ticket{min-height:250px}
  .ticket__stub{font-size:22px;padding:16px 14px}
  .play{width:66px;height:66px;margin:-33px 0 0 -33px}
  .video-card--feature .play{width:80px;height:80px;margin:-40px 0 0 -40px}
  .footer__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion: no pinning, everything static and readable ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{display:none}
  .reveal-up,.reveal-clip{opacity:1;transform:none;clip-path:none}
  .moments,.quote{height:auto}
  .moments__pin,.quote__pin{position:relative;height:auto;padding:140px 0 80px}
  .moments__track{position:relative;transform:none;overflow-x:auto;padding:0 var(--gutter) 40px;scroll-snap-type:x mandatory}
  .moment{transform:none;scroll-snap-align:center}
  .yard,.moments__ruler{display:none}
  .moments__word{position:relative;top:0;transform:none;font-size:18vw}
  .quote__solid{clip-path:none}
  .quote__sub{opacity:1}
  .polaroids{position:relative;display:flex;gap:16px;overflow-x:auto;padding:40px var(--gutter) 0;width:100%}
  .polaroids .pola{position:relative;left:auto;top:auto;transform:rotate(var(--r));flex:0 0 240px}
  .pola--row{transform:rotate(var(--r))}
}