/* ============================================================
   kurtbenkert.com · design system
   palette sampled from the Chicago shoot · chalk + stone + leather
   built by Ryder Schilling
   ============================================================ */

:root{
  --ink-0:#171613;
  --ink-1:#1E1D19;
  --ink-2:#26241F;
  --board:#20211C;
  --stone:#C9BCAB;
  --stone-deep:#A99C89;
  --leather:#9C7454;
  --leather-hi:#B98F66;
  --chalk:#F0EDE4;
  --chalk-dim:#A3A099;
  --line:rgba(240,237,228,.14);
  --line-strong:rgba(240,237,228,.3);
  --chalkline:rgba(240,237,228,.55);
  --mono:'IBM Plex Mono',monospace;
  --body:'Inter Tight',sans-serif;
  --disp:'Anybody',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --nav-bar:74px;
  --nav-bar-sm:60px;
  --nav-gap:clamp(14px,1.9vw,26px);
  --nav-h:calc(var(--nav-bar) + (var(--nav-gap) * 2));
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;}
html.lenis{scroll-behavior:auto;}
body{background:var(--ink-0);color:var(--chalk);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--leather);color:var(--ink-0);}

.wrap{max-width:1280px;margin:0 auto;padding:0 clamp(20px,4vw,56px);}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;}
.display{font-family:var(--disp);font-variation-settings:'wdth' 125;font-weight:850;text-transform:uppercase;line-height:.95;}

/* ---------- reveals (IO adds .in) ---------- */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
[data-rv].in{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-rv]{opacity:1;transform:none;transition:none;}
  *{animation-duration:.001s !important;animation-delay:0s !important;}
}

/* ---------- chips: plain text, no box. borders live on buttons only. ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;border:0;padding:0;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--chalk-dim);background:none;}
.chip b{color:var(--chalk);font-weight:500;}
.chip .dot{width:6px;height:6px;background:var(--leather-hi);}
.chip.live .dot{animation:blink 1.4s steps(1) infinite;}
@keyframes blink{50%{opacity:.15;}}
/* separator so a run of chips still reads as separate facts. It hangs off the
   END of the preceding chip, never the start of the next one, so a wrap does
   not orphan a dot at the head of line 2. */
.chip-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0;}
.chip-row .chip:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--leather-hi);opacity:.6;margin:0 16px;flex:none;}
/* link rows (socials) get no auto separator: the ::after would sit inside the
   anchor and pick up its underline. */
.chip-row.links .chip::after{display:none;}
.chip-row.links{gap:10px 26px;}
a.chip{color:var(--chalk);border-bottom:1px solid var(--line-strong);padding-bottom:3px;transition:color .2s,border-color .2s;}
a.chip:hover{color:var(--leather-hi);border-color:var(--leather-hi);}
@media (max-width:640px){
  /* stacked reads cleaner than a wrapped run at phone width */
  .chip-row{flex-direction:column;align-items:flex-start;gap:9px;}
  .chip-row .chip:not(:last-child)::after{display:none;}
  .chip-row.links{flex-direction:row;flex-wrap:wrap;}
}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-block;border:1px solid var(--chalk);padding:17px 34px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);background:transparent;cursor:pointer;overflow:hidden;transition:color .25s var(--ease),border-color .25s var(--ease);}
.btn::before{content:"";position:absolute;inset:0;background:var(--chalk);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);z-index:-1;}
.btn:hover{color:var(--ink-0);}
.btn:hover::before{transform:scaleX(1);}
.btn{z-index:0;}
.btn.solid{background:var(--chalk);border-color:var(--chalk);color:var(--ink-0);font-weight:500;}
.btn.solid::before{background:var(--leather-hi);}
.btn.solid:hover{border-color:var(--leather-hi);color:var(--ink-0);}
.btn.ghost{border-color:var(--line-strong);color:var(--chalk-dim);}
.btn.ghost:hover{border-color:var(--chalk);color:var(--ink-0);}
.btn-pair{display:inline-flex;flex-wrap:wrap;}
.btn-pair .btn + .btn{margin-left:-1px;}
.textlink{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--leather-hi);border-bottom:1px solid var(--leather);padding-bottom:4px;transition:color .2s,border-color .2s;}
.textlink:hover{color:var(--chalk);border-color:var(--chalk);}

/* ---------- nav: floating bar ---------- */
.navbar{position:fixed;top:0;left:0;right:0;z-index:60;padding:0;pointer-events:none;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(23,22,19,.66),rgba(23,22,19,0));transition:transform .66s cubic-bezier(.16,1,.3,1),opacity .34s var(--ease),padding .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease);}
.navbar.hidden{transform:translateY(calc(-100% - 14px));opacity:0;transition:transform .52s cubic-bezier(.5,0,.75,.2),opacity .3s var(--ease) .06s,padding .55s var(--ease),background .45s var(--ease),border-color .45s var(--ease);}
.nav-shell{pointer-events:auto;position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;height:var(--nav-bar);max-width:1240px;margin:0 auto;padding-left:clamp(16px,2vw,26px);border:1px solid transparent;background:transparent;box-shadow:none;transition:background .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease),max-width .55s var(--ease),height .55s var(--ease);}
@supports (backdrop-filter:blur(2px)){ .navbar.scrolled .nav-shell{backdrop-filter:blur(20px) saturate(1.02) brightness(.82);} }
.navbar.scrolled{padding:var(--nav-gap) clamp(12px,3vw,34px);background:transparent;border-bottom-color:transparent;}
.navbar.scrolled .nav-shell{height:var(--nav-bar-sm);background:rgba(18,17,15,.93);border-color:var(--line-strong);box-shadow:0 18px 46px rgba(0,0,0,.5);max-width:1120px;}
body.menu-open .navbar{background:transparent;border-bottom-color:transparent;}
body.menu-open .navbar .nav-shell{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;}
body.menu-open .nav-burger{border-left-color:transparent;}
body.menu-open .navbar{transform:none;}

.navbar .brand{font-family:var(--disp);font-variation-settings:'wdth' 140;font-weight:850;font-size:15px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
.navbar .brand span{color:var(--leather-hi);display:inline-block;transition:transform .5s var(--ease);}
.navbar .brand:hover span{transform:rotate(180deg);}
/* the X + ring mark is the logo. Same glyph as the favicon and the app icons. */
.brandmark{display:block;width:1em;height:1em;overflow:visible;}
.navbar .brand .mk{margin-left:.3em;width:1.5em;height:1.5em;vertical-align:-.42em;}
.navbar .brand .mk .brandmark{width:100%;height:100%;}
.navbar .links{display:flex;align-items:center;gap:clamp(20px,2.4vw,34px);}
/* the wordmark is the home link on desktop, so Home comes out of the bar. It stays in the mobile menu. */
.navbar .links a[href="index.html"]{display:none;}
.navbar .links a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);position:relative;padding-bottom:5px;transition:color .2s;}
.navbar .links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--leather-hi);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);}
.navbar .links a:hover{color:var(--chalk);}
.navbar .links a:hover::after{transform:scaleX(1);transform-origin:left;}
.navbar .links a.on{color:var(--chalk);}
.navbar .links a.on::after{transform:scaleX(1);}
.navbar .cta{align-self:stretch;display:flex;align-items:center;position:relative;overflow:hidden;z-index:0;border-left:1px solid var(--line);padding:0 clamp(16px,1.8vw,26px);font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);white-space:nowrap;transition:color .28s var(--ease);}
.navbar .cta::before{content:"";position:absolute;inset:0;background:var(--chalk);transform:scaleY(0);transform-origin:bottom;transition:transform .34s var(--ease);z-index:-1;}
.navbar .cta:hover{color:var(--ink-0);}
.navbar .cta:hover::before{transform:scaleY(1);}

/* burger */
.nav-burger{display:none;align-items:center;gap:10px;align-self:stretch;background:none;border:0;border-left:1px solid var(--line);padding:0 18px;cursor:pointer;color:var(--chalk);-webkit-tap-highlight-color:transparent;}
.nav-burger .bl{display:block;width:22px;height:1.5px;background:var(--chalk);transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;}
.nav-burger .bars{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.nav-burger .bl:nth-child(2){width:14px;}
.nav-burger:hover .bl:nth-child(2){width:22px;}
.nav-burger .bt{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);}
body.menu-open .nav-burger .bl{width:22px;}
body.menu-open .nav-burger .bl:nth-child(1){transform:translateY(3.75px) rotate(45deg);}
body.menu-open .nav-burger .bl:nth-child(2){transform:translateY(-3.75px) rotate(-45deg);}

/* ---------- full-screen menu ---------- */
.mobile-menu{position:fixed;inset:0;z-index:55;background:var(--ink-0);display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;-webkit-clip-path:inset(0 0 100% 0);clip-path:inset(0 0 100% 0);visibility:hidden;pointer-events:none;transition:clip-path .8s var(--ease),-webkit-clip-path .8s var(--ease),visibility 0s .8s;}
body.menu-open .mobile-menu{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0);visibility:visible;pointer-events:auto;transition:clip-path .8s var(--ease),-webkit-clip-path .8s var(--ease),visibility 0s;}
.mobile-menu .mm-plays{position:absolute;right:-22%;top:2%;width:106%;height:auto;opacity:0;pointer-events:none;transition:opacity .9s var(--ease) .25s;}
body.menu-open .mobile-menu .mm-plays{opacity:.09;}
.mobile-menu .mm-glow{position:absolute;left:-30%;bottom:-30%;width:90vw;height:90vw;background:radial-gradient(circle,rgba(185,143,102,.16),transparent 66%);pointer-events:none;}
.mm-head{height:calc(var(--nav-bar) + var(--nav-gap));flex:none;}
.mm-nav{position:relative;z-index:2;padding:0 clamp(24px,7vw,40px);}
.mm-link{display:block;border-top:1px solid var(--line);overflow:hidden;}
.mm-link:last-of-type{border-bottom:1px solid var(--line);}
.mm-i{display:flex;align-items:center;gap:16px;padding:clamp(9px,1.9vw,14px) 0;transform:translateY(105%);opacity:0;transition:transform .8s var(--ease),opacity .6s var(--ease),color .25s;transition-delay:calc(.1s + (var(--i,0) * .055s));}
body.menu-open .mm-i{transform:none;opacity:1;}
.mm-i .no{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.18em;color:var(--leather-hi);width:22px;flex:none;}
.mm-i .tx{font-family:var(--disp);font-variation-settings:'wdth' 122;font-weight:850;text-transform:uppercase;font-size:clamp(26px,8.2vw,44px);line-height:.94;letter-spacing:.01em;transition:transform .45s var(--ease);}
.mm-i .ar{margin-left:auto;font-family:var(--mono);font-size:14px;color:var(--leather-hi);opacity:0;transform:translateX(-10px);transition:opacity .35s var(--ease),transform .35s var(--ease);}
.mm-link.on .tx{color:var(--leather-hi);}
.mm-link.on .ar,.mm-link:active .ar{opacity:1;transform:none;}
@media (hover:hover){ .mm-link:hover .tx{transform:translateX(10px);} .mm-link:hover .ar{opacity:1;transform:none;} }
.mm-foot{position:relative;z-index:2;margin-top:clamp(22px,5vw,34px);padding:0 clamp(24px,7vw,40px) clamp(28px,7vw,44px);opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease) .42s,transform .7s var(--ease) .42s;}
body.menu-open .mm-foot{opacity:1;transform:none;}
.mm-foot .mm-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;border:1px solid var(--chalk);padding:16px 20px;margin-bottom:22px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);}
.mm-foot .mm-social{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);}
.mm-foot .mm-social a{transition:color .2s;}
.mm-foot .mm-social a:hover{color:var(--leather-hi);}
.mm-foot .mm-loc{display:block;margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(240,237,228,.35);}

/* ---------- hero ---------- */
.hero{position:relative;height:100svh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink-1);padding:0 clamp(12px,3vw,34px);}
.hero .bg{position:absolute;inset:-6% 0;background-size:cover;background-position:center 18%;will-change:transform;}
.hero .scrim{position:absolute;inset:0;background:
  linear-gradient(99deg,rgba(23,22,19,.95) 12%,rgba(23,22,19,.55) 52%,rgba(23,22,19,.12) 100%),
  linear-gradient(0deg,rgba(23,22,19,.92) 6%,transparent 48%);}
.hero .plays{position:absolute;inset:0;z-index:1;opacity:.42;pointer-events:none;}
.hero .inner{position:relative;z-index:2;width:100%;max-width:1240px;margin:0 auto;padding:clamp(22px,3.6vw,52px) clamp(16px,2vw,26px);padding-top:calc(var(--nav-h) + 16px);}
.kicker-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:clamp(14px,1.9vw,24px);}

/* story hero: photo sits higher in the frame, lifted a touch */
.hero.story .bg{background-position:center 56%;filter:brightness(1.16) saturate(.96) contrast(1.02);}
.hero.story .scrim{background:
  linear-gradient(99deg,rgba(23,22,19,.9) 8%,rgba(23,22,19,.44) 46%,rgba(23,22,19,.08) 100%),
  linear-gradient(0deg,rgba(23,22,19,.88) 4%,rgba(23,22,19,.22) 40%,transparent 66%),
  linear-gradient(180deg,rgba(23,22,19,.5) 0%,transparent 22%);}
@media (max-width:900px){ .hero.story .bg{background-position:center 48%;} }

/* home hero: Lambeau scramble, copy left over the out-of-focus side */
.hero.home .bg{background-image:url('../img/hero-packers.jpg');background-position:58% 45%;filter:saturate(.92) contrast(1.03);}
.hero.home .scrim{background:
  linear-gradient(99deg,rgba(23,22,19,.94) 6%,rgba(23,22,19,.72) 33%,rgba(23,22,19,.28) 66%,rgba(23,22,19,.06) 100%),
  linear-gradient(0deg,rgba(23,22,19,.9) 3%,rgba(23,22,19,.3) 40%,transparent 64%),
  linear-gradient(180deg,rgba(23,22,19,.55) 0%,transparent 24%);}
.hero.home .grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");}

@media (max-height:760px){ h1.hero-h,.hero-h{font-size:clamp(32px,4.6vw,64px);} .hero .sub{font-size:15px;} }
h1.hero-h,.hero-h{text-shadow:0 2px 34px rgba(23,22,19,.55);font-family:var(--disp);font-variation-settings:'wdth' 126;font-weight:850;text-transform:uppercase;font-size:clamp(34px,5.6vw,88px);line-height:.98;letter-spacing:.01em;}
.hero-h .stroke{-webkit-text-stroke:1.5px var(--chalk);color:transparent;}
.hero-h .hl-desk{display:block;}
.hero-h .hl-mob{display:none;}
/* RULE: outline letterforms only over a flat background. On a photo they
   disappear into the image, so any headline sitting on a photo goes solid. */
.hero .stroke,.photo-sect .stroke,.moment .stroke{-webkit-text-stroke:0;color:var(--chalk);}
.hero .sub{color:var(--chalk-dim);max-width:540px;font-size:clamp(15px,1.3vw,18px);margin:clamp(16px,1.9vw,24px) 0 clamp(20px,2.4vw,30px);}

/* mask-rise, pure CSS so it never gates content */
.mask{display:block;overflow:hidden;}
.mask > span{display:block;transform:translateY(112%);animation:rise 1s var(--ease) forwards;}
.mask:nth-child(2) > span{animation-delay:.12s;}
.mask:nth-child(3) > span{animation-delay:.24s;}
@keyframes rise{to{transform:none;}}
.fade-in{opacity:0;animation:fadeIn .8s var(--ease) forwards;}
.fade-in.d1{animation-delay:.5s;}
.fade-in.d2{animation-delay:.7s;}
@keyframes fadeIn{to{opacity:1;}}

/* hero chalk play, self-drawing via CSS */
.draw-o{transform-origin:center;transform-box:fill-box;transform:scale(0);animation:popO .35s var(--ease) forwards;}
.draw-x path{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine .3s ease-out forwards;}
.draw-rt{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine .9s ease-out forwards;}
@keyframes popO{to{transform:scale(1);}}
@keyframes drawLine{to{stroke-dashoffset:0;}}

/* ---------- sections ---------- */
section{position:relative;}
.sect-pad{padding:clamp(72px,9vw,140px) 0;}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--leather-hi);display:block;margin-bottom:18px;}
.h2{font-family:var(--disp);font-variation-settings:'wdth' 124;font-weight:850;text-transform:uppercase;font-size:clamp(30px,4.4vw,62px);line-height:.98;}
.h2 .lh{color:var(--leather-hi);}
.h2 .stroke{-webkit-text-stroke:1.2px var(--chalk);color:transparent;}
.lede{color:var(--chalk-dim);max-width:560px;margin-top:20px;font-size:clamp(15px,1.2vw,17px);}

/* stat strip: whitespace instead of a bordered table */
.statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);padding:clamp(34px,4vw,52px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.statstrip .cell{padding:0;}
.statstrip .v{font-family:var(--disp);font-variation-settings:'wdth' 120;font-weight:850;font-size:clamp(24px,2.6vw,38px);text-transform:uppercase;}
.statstrip .v .suf{color:var(--leather-hi);}
.statstrip .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);margin-top:8px;}

/* photo story section */
.photo-sect{position:relative;min-height:86vh;display:flex;align-items:center;overflow:hidden;background:var(--ink-1);}
.photo-sect .bg{position:absolute;inset:-6% 0;background-size:cover;background-position:center;will-change:transform;}
.photo-sect .scrim{position:absolute;inset:0;}
/* directional scrim + a flat floor, so live copy always clears the photo */
.photo-sect.left .scrim{background:linear-gradient(99deg,rgba(23,22,19,.97) 18%,rgba(23,22,19,.78) 46%,rgba(23,22,19,.34) 78%,rgba(23,22,19,.16) 100%),linear-gradient(0deg,rgba(23,22,19,.8) 0%,transparent 40%),rgba(23,22,19,.22);}
.photo-sect.right .scrim{background:linear-gradient(-99deg,rgba(23,22,19,.97) 18%,rgba(23,22,19,.78) 46%,rgba(23,22,19,.34) 78%,rgba(23,22,19,.16) 100%),linear-gradient(0deg,rgba(23,22,19,.8) 0%,transparent 40%),rgba(23,22,19,.22);}
.photo-sect .inner{position:relative;z-index:2;width:100%;}
.photo-sect .copy{max-width:520px;padding:clamp(72px,10vw,140px) 0;}
.photo-sect.right .copy{margin-left:auto;}
.photo-sect .copy p{color:var(--chalk-dim);margin-top:20px;}
/* extra floor under the story preview: the play cards ride up into it */
#story-preview .copy{padding-bottom:clamp(180px,18vw,260px);}
/* THE BUILD: the Dime Lab studio portrait, full bleed edge to edge under the
   overlay. The camera original is a centred 4:3 frame, so cropping it into a wide
   band cuts the balls off. img/build-band.jpg is that same frame on a wider plate,
   its own backdrop gradient carried out to the edges and up over his head, Kurt
   set from 7.5% to 54.5% so he lands clear of the copy at every desktop width.
   Nothing invented, nothing knocked out. */
.photo-sect.build{--set-pos:50% 50%;--set-size:cover;}
.photo-sect.build .bg{background-image:url('../img/build-band.jpg');background-size:var(--set-size);background-position:var(--set-pos);}
@media (max-width:1200px){.photo-sect.build .bg{background-image:url('../img/build-band-1400.jpg');}}
/* the scrim stays clear across Kurt (his right edge lands at 58.8% of the section
   at the copy's height) so the photo keeps its own falloff */
.photo-sect.build .scrim{background:linear-gradient(-99deg,rgba(23,22,19,.8) 0%,rgba(23,22,19,.72) 20%,rgba(23,22,19,.46) 30%,rgba(23,22,19,.12) 38%,rgba(23,22,19,0) 46%),linear-gradient(0deg,rgba(23,22,19,.6) 0%,transparent 30%);}
.photo-sect.build .inner{max-width:none;width:100%;padding:0;}
/* start the copy just clear of his right edge, capped so it never runs into the
   right gutter on smaller screens */
.photo-sect.build .copy{max-width:460px;margin-left:min(calc(58.8% + 12px),calc(100% - 460px - clamp(20px,4vw,56px)));}
/* under ~1150 the right gutter wins that min() and the copy lands back over the
   plate, so the scrim deepens and the third ball reads as texture, not clutter */
@media (max-width:1150px){
  .photo-sect.build .scrim{background:linear-gradient(-99deg,rgba(23,22,19,.93) 0%,rgba(23,22,19,.88) 26%,rgba(23,22,19,.62) 40%,rgba(23,22,19,.22) 52%,rgba(23,22,19,0) 62%),linear-gradient(0deg,rgba(23,22,19,.6) 0%,transparent 30%);}
}

/* ---------- dime lab: founder hero ---------- */
/* the studio portrait is centred in its own frame and only 700px wide, so it
   runs as a contained column, not a full bleed. Its backdrop is near-black
   (7,14,18) so it melts into the page. */
.founder-hero{position:relative;padding:calc(var(--nav-h) + clamp(28px,4vw,56px)) 0 clamp(48px,6vw,88px);overflow:hidden;}
.founder-hero::before{content:"";position:absolute;left:50%;top:0;width:min(1100px,120%);height:78%;transform:translateX(-18%);background:radial-gradient(60% 60% at 60% 40%,rgba(185,143,102,.10),transparent 70%);pointer-events:none;}
.fh-grid{position:relative;display:grid;grid-template-columns:minmax(0,640px);gap:clamp(24px,3.4vw,56px);align-items:center;}
.fh-shot{margin:0;position:relative;}
/* the cutaway drawing runs as the hero backdrop. The PNG is chalk-on-transparent
   (alpha keyed off the original ink) so it tints against the page instead of
   carrying its own white paper. */
.hero-diagram{position:absolute;top:50%;right:clamp(-90px,-2vw,0px);transform:translateY(-46%);
  width:min(60vw,780px);aspect-ratio:1200/1235;pointer-events:none;z-index:0;opacity:.30;
  background:url('../img/ball-diagram.png') center/contain no-repeat;
  -webkit-mask-image:radial-gradient(78% 78% at 46% 50%,#000 55%,transparent 100%);
  mask-image:radial-gradient(78% 78% at 46% 50%,#000 55%,transparent 100%);}
.fh-grid,.founder-hero .wrap{position:relative;z-index:1;}
@media (max-width:900px){
  .hero-diagram{width:126vw;right:-34vw;top:28%;opacity:.15;
    background-image:url('../img/ball-diagram-760.png');}
}

@media (max-width:900px){
  .fh-grid{grid-template-columns:1fr;gap:8px;}
  .fh-grid .copy{order:2;}
  .fh-shot{order:1;margin:0 auto;max-width:520px;}
}

/* ---------- dime lab: the product rail ---------- */
/* generated by tools/refresh-products.py from the public Shopify products.json.
   Edit that script, not these cards. */
.line-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:14px;}
/* the rail lives OUTSIDE .wrap so it runs edge to edge. Its left inset is
   computed to land exactly where the heading starts, so the first card still
   lines up with the type on any screen width. */
.prail{--gutter:clamp(20px,4vw,56px);
  --inset:calc(max(0px,(100vw - 1280px) / 2) + var(--gutter));
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:clamp(12px,1.4vw,20px);
  margin-top:clamp(26px,3vw,40px);padding:0 var(--gutter) 14px var(--inset);
  overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:var(--inset);scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 97%,transparent 100%);mask-image:linear-gradient(90deg,#000 97%,transparent 100%);}
.prail::-webkit-scrollbar{display:none;}
.pcard{scroll-snap-align:start;display:flex;flex-direction:column;background:var(--ink-1);transition:background .3s var(--ease),transform .4s var(--ease);}
.pcard__ph{display:block;overflow:hidden;background:var(--ink-2);}
.pcard__ph img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s var(--ease);}
/* the title reserves two lines whether it needs them or not, so every price
   sits on the same baseline without a dead gap above it */
.pcard__t{font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:800;text-transform:uppercase;font-size:19px;line-height:1.16;letter-spacing:.02em;padding:20px 20px 0;min-height:calc(2.32em + 20px);}
.pcard__p{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--leather-hi);padding:4px 20px 20px;}
@media (hover:hover){
  .pcard:hover{background:var(--ink-2);transform:translateY(-4px);}
  .pcard:hover .pcard__ph img{transform:scale(1.06);}
}
@media (max-width:700px){
  .prail{grid-auto-columns:min(78vw,320px);scroll-snap-type:x mandatory;}
  .pcard__t{font-size:17px;padding:16px 16px 0;min-height:calc(2.32em + 16px);}
  .pcard__p{padding:4px 16px 17px;}
  .line-head{margin-bottom:6px;}
}

/* closing block. No panel: the type scale carries it, and a lone tinted
   rectangle on the soot read as a green box. Bottom padding stays light
   because the footer already brings 140px of its own. */
.closer{padding:clamp(72px,8vw,124px) 0 clamp(52px,6vw,88px);}
.closer__in{max-width:720px;margin:0 auto;text-align:center;}
.closer__in .h2{font-size:clamp(30px,4vw,54px);margin-top:2px;}
.closer__in .lede{max-width:520px;margin:22px auto 0;}
.closer__in .storelink{margin-top:clamp(28px,3.4vw,40px);}

/* the store link is the point of the page: give it button weight */
.storelink{display:inline-flex;align-items:center;gap:14px;padding:22px 40px;font-size:14px;letter-spacing:.18em;}
.storelink span{font-size:17px;transition:transform .3s var(--ease);}
.storelink:hover span{transform:translate(3px,-3px);}
@media (max-width:560px){ .storelink{width:100%;justify-content:center;padding:20px 24px;font-size:12px;} }

/* homepage story preview: the UVA throw replaced a flat grey stadium exterior */
.uva-bg{background-image:url('../img/uva-unc.jpg');background-position:44% 34%;}
@media (max-width:900px){ .uva-bg{background-image:url('../img/uva-unc-1000.jpg');background-position:62% 36%;} }

/* ---------- photography ---------- */
/* one figure treatment sitewide: no frame, mono caption, nothing boxed */
figure.shot,figure.band{margin:0;position:relative;}
figure.shot img,figure.band img{width:100%;height:auto;display:block;}
figure.shot figcaption,figure.band figcaption{margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);}
.stone-sect figure.shot figcaption{color:#6B5D48;}
figure.band{margin-top:clamp(28px,3.4vw,48px);}
figure.band img{aspect-ratio:16/7;object-fit:cover;}
@media (max-width:700px){ figure.band img{aspect-ratio:4/3;} }
figure.shot img{aspect-ratio:4/5;object-fit:cover;}
figure.shot.wide img{aspect-ratio:3/2;}
/* .full = show the whole frame, no crop. the file's own ratio wins. */
figure.shot.full img{aspect-ratio:auto;object-fit:contain;}

/* THE RECORD: the big stat and the photo share the row */
/* THE RECORD: photo lives as the right-side background of the section */
.recordsect{position:relative;overflow:hidden;}
.recordsect .wrap{position:relative;z-index:2;}
.recordcopy{max-width:min(700px,54vw);}
.recordphoto{position:absolute;top:0;right:0;bottom:0;width:48%;z-index:1;
  background:url('../img/uva-release.jpg') no-repeat center right;background-size:cover;}
.recordphoto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(23,22,19,1) 0%,rgba(23,22,19,.74) 9%,rgba(23,22,19,.34) 28%,rgba(23,22,19,.12) 56%,rgba(23,22,19,.06) 100%),
             linear-gradient(180deg,rgba(23,22,19,1) 0%,rgba(23,22,19,0) 18%,rgba(23,22,19,0) 82%,rgba(23,22,19,1) 100%);}
@media (max-width:900px){
  .recordcopy{max-width:none;}
  .recordphoto{width:100%;opacity:.28;background-position:center top;}
  .recordphoto::after{background:linear-gradient(180deg,rgba(23,22,19,.9) 0%,rgba(23,22,19,.75) 40%,rgba(23,22,19,.95) 100%);}
}

.statsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:end;}
@media (max-width:900px){ .statsplit{grid-template-columns:1fr;align-items:stretch;} .statsplit figure.shot img{aspect-ratio:3/2;} .statsplit figure.shot.full img{aspect-ratio:auto;} }

/* book page: INSIDE THE BOOK */
.insidegrid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:start;margin-top:26px;}
@media (max-width:900px){ .insidegrid{grid-template-columns:1fr;} }

/* dime lab: the quote panel carries the product shot instead of dead space */
.quoteboard--split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center;}
.quoteboard--split .qb-copy{position:relative;z-index:1;}
.quoteboard--split figure.shot{position:relative;z-index:1;}
@media (max-width:900px){ .quoteboard--split{grid-template-columns:1fr;} .quoteboard--split figure.shot img{aspect-ratio:3/2;} }

/* play cards: separated by whitespace, not shared 1px rules */
.playcards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px);background:none;border:0;}
.playcard{background:var(--ink-1);padding:32px;position:relative;transition:background .3s;display:block;}
.playcard:hover{background:var(--ink-2);}
.playcard svg{width:100%;height:120px;margin-bottom:22px;}
.playcard .rt-hi{stroke:var(--leather-hi) !important;}
.playcard .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--leather-hi);display:block;margin-bottom:10px;}
.playcard .t{font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:800;text-transform:uppercase;font-size:19px;letter-spacing:.02em;}
.playcard .d{color:var(--chalk-dim);font-size:14px;margin-top:8px;line-height:1.55;}
.playcard .go{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--leather-hi);margin-top:16px;display:inline-block;opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s;}
.playcard:hover .go{opacity:1;transform:none;}
.playcard.drawn svg .pc-rt{stroke-dasharray:1;stroke-dashoffset:1;animation:drawLine .8s ease-out forwards;}
.playcard.drawn svg .pc-o{transform-origin:center;transform-box:fill-box;transform:scale(0);animation:popO .3s var(--ease) forwards;}

/* play cards riding up onto the photo section above them */
.playcards-lift{position:relative;z-index:3;margin-top:clamp(-118px,-7.5vw,-72px);}
.playcards-lift .playcard{box-shadow:0 26px 64px -22px rgba(0,0,0,.8);transition:background .3s,transform .4s var(--ease),box-shadow .4s var(--ease);}
.playcards-lift .playcard:hover{transform:translateY(-8px);box-shadow:0 40px 84px -24px rgba(0,0,0,.9);}
@media (prefers-reduced-motion:reduce){ .playcards-lift .playcard:hover{transform:none;} }

/* board (chalkboard) */
.board{position:relative;background:var(--board);border:0;overflow:hidden;}
.board .bgplays{position:absolute;inset:0;opacity:.14;pointer-events:none;}
.board .inner{position:relative;padding:clamp(40px,6vw,88px);}

/* video tiles */
.vidgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,18px);background:none;border:0;}
.vidtile{position:relative;overflow:hidden;cursor:pointer;background:var(--ink-1);display:block;}
.vidtile .thumb{aspect-ratio:16/9;background-size:cover;background-position:center;transition:transform .6s var(--ease);}
.vidtile:hover .thumb{transform:scale(1.05);}
.vidtile .bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(0deg,rgba(23,22,19,.96) 8%,rgba(23,22,19,.74) 46%,transparent 100%);}
.vidtile .bar .t{font-weight:600;font-size:15px;line-height:1.3;}
/* no chip box any more, so the meta line carries its own legibility */
.vidtile .tag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--chalk);border:0;padding:0;background:none;white-space:nowrap;text-shadow:0 1px 2px rgba(23,22,19,.95),0 2px 14px rgba(23,22,19,.85);}
.vidtile .bar .t{text-shadow:0 1px 2px rgba(23,22,19,.9),0 2px 16px rgba(23,22,19,.7);}
.vidtile .play{position:absolute;top:16px;left:16px;width:44px;height:44px;border:1px solid var(--line-strong);display:grid;place-items:center;background:rgba(23,22,19,.55);transition:background .25s,border-color .25s;}
.vidtile:hover .play{background:var(--chalk);border-color:var(--chalk);}
.vidtile .play svg{width:14px;height:14px;fill:var(--chalk);}
.vidtile:hover .play svg{fill:var(--ink-0);}
.vidtile.wide{grid-column:1 / -1;}
.vidtile.wide .thumb{aspect-ratio:21/8;}

/* vertical Shorts shelf. hq720 puts the true 9:16 frame dead centre at 34.2%-65.8%,
   so a 9/16 box at 100.8% height crops to the clean frame and drops the blurred pillars. */
.vidgrid.shorts{display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;background:none;border:0;}
.vidgrid.shorts .vidtile{flex:1 1 200px;max-width:270px;border:0;}
.vidgrid.shorts .vidtile:not(.short){flex:1 1 340px;max-width:520px;}
.vidtile.short .thumb{aspect-ratio:9/16;background-size:auto 100.8%;background-position:center;}
.vidtile.short .bar{flex-direction:column-reverse;align-items:flex-start;gap:8px;padding:14px;}
.vidtile.short .bar .t{font-size:14px;}
.vidtile.short .tag{white-space:normal;}
.vidtile.short .play{top:12px;left:12px;width:38px;height:38px;}

/* lambeau moment */
.moment{position:relative;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--ink-1);}
.moment .bg{position:absolute;inset:-6% 0;background-size:cover;background-position:center 20%;will-change:transform;}
/* centred copy over a busy photo needs a flat floor, not just a gradient */
.moment .scrim{position:absolute;inset:0;background:linear-gradient(0deg,rgba(23,22,19,.95) 4%,rgba(23,22,19,.62) 45%,rgba(23,22,19,.72) 100%),rgba(23,22,19,.34);}
.moment .inner{position:relative;z-index:2;padding:0 24px;max-width:820px;}
.scorebug{display:inline-flex;border:1px solid var(--line-strong);background:rgba(23,22,19,.78);margin-bottom:34px;flex-wrap:wrap;justify-content:center;}
.scorebug div{padding:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;border-right:1px solid var(--line);}
.scorebug div:last-child{border-right:none;}
.scorebug .win{color:var(--leather-hi);font-weight:500;}
.moment .line{font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:800;text-transform:uppercase;font-size:clamp(22px,3vw,40px);line-height:1.12;}
.moment .line .lh{color:var(--leather-hi);}
.moment .after{color:var(--chalk-dim);margin:22px 0 30px;font-size:15px;}

/* limestone */
.stone-sect{background:var(--stone);color:var(--ink-0);}
.stone-sect .kicker{color:#6B5D48;}
.stone-sect .h2{color:var(--ink-0);}
.stone-sect .lede,.stone-sect p{color:#4A443A;}
.stone-sect .grid2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:center;}
.stone-sect .ph{aspect-ratio:4/5;background-size:cover;background-position:center;border:0;}
.stone-sect .btn{border-color:var(--ink-0);color:var(--ink-0);}
.stone-sect .btn::before{background:var(--ink-0);}
.stone-sect .btn:hover{color:var(--stone);}
.stone-sect .btn.solid{background:var(--ink-0);color:var(--stone);}
.stone-sect .btn.solid::before{background:#3A362E;}
.stone-sect .btn.solid:hover{border-color:#3A362E;color:var(--stone);}
.stone-sect .chip{border:0;color:#4A443A;background:none;}
.stone-sect .chip-row .chip + .chip::before{background:#7A5A3A;}
.stone-sect .chip b{color:var(--ink-0);}
.stone-sect .textlink{color:#7A5A3A;border-color:#7A5A3A;}
.stone-sect .textlink:hover{color:var(--ink-0);border-color:var(--ink-0);}

/* yardline */
.yardline{position:relative;height:64px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;overflow:hidden;}
.yardline .marks{display:flex;width:100%;justify-content:space-between;padding:0 4%;}
.yardline .marks span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--chalk-dim);opacity:.55;position:relative;padding-top:2px;}
.yardline .marks span::before{content:"";position:absolute;left:50%;top:-24px;width:1px;height:18px;background:var(--line-strong);}
/* the ticker was deleted 08-13: it repeated the four facts already in .statstrip
   directly above it. Do not add it back. */

/* spine (desktop only) */
.spine{position:absolute;inset:0;pointer-events:none;z-index:3;display:none;}
@media (min-width:1024px){ .spine{display:block;} }
.spine path{vector-effect:non-scaling-stroke;}

/* ---------- story page ---------- */
.hud{position:fixed;right:clamp(16px,3vw,40px);bottom:24px;z-index:40;display:none;flex-direction:column;align-items:flex-end;gap:8px;}
@media (min-width:1024px){ .hud{display:flex;} }
.hud .pos{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);background:rgba(23,22,19,.8);border:1px solid var(--line);padding:8px 12px;}
.hud .pos b{color:var(--leather-hi);font-weight:500;}
.hud .bar{width:120px;height:2px;background:var(--line);position:relative;}
.hud .bar i{position:absolute;left:0;top:0;bottom:0;background:var(--leather-hi);width:0;}
.chapter{border-top:1px solid var(--line);}
.ch-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;padding-top:clamp(48px,6vw,80px);}
.ch-head .no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--leather-hi);}
.bigstat{font-family:var(--disp);font-variation-settings:'wdth' 126;font-weight:850;font-size:clamp(72px,13vw,200px);line-height:.9;text-transform:uppercase;font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
/* the suffix owns its own line from frame one, so the count-up from 0 to 3,207
   never re-wraps and never shifts the photo beside it */
.bigstat .suf{color:var(--leather-hi);display:block;}
.quoteboard{position:relative;background:var(--board);border:0;padding:clamp(48px,7vw,96px);overflow:hidden;}
/* the X/O svg had no absolute rule here, so it sat IN FLOW and pushed the quote
   down behind ~500px of empty panel. It is a background, not a grid item. */
.quoteboard .bgplays{position:absolute;inset:0;width:100%;height:100%;opacity:.12;pointer-events:none;}
.quoteboard .q{font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:800;text-transform:uppercase;font-size:clamp(24px,3.6vw,50px);line-height:1.1;max-width:820px;position:relative;}
.quoteboard .q .lh{color:var(--leather-hi);}
.quoteboard .who{margin-top:24px;position:relative;}
.teamrail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);background:none;border:0;}
.teamcard{position:relative;overflow:hidden;background:var(--ink-1);}
.teamcard .ph{aspect-ratio:4/5;background-size:cover;background-position:center;transition:transform .6s var(--ease);}
.teamcard:hover .ph{transform:scale(1.04);}
.teamcard .bar{position:absolute;left:0;right:0;bottom:0;padding:16px;background:linear-gradient(0deg,rgba(23,22,19,.96) 8%,rgba(23,22,19,.72) 42%,transparent 100%);}
.teamcard .bar .t{font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:800;text-transform:uppercase;font-size:17px;}
.teamcard .bar .y{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--chalk-dim);margin-top:4px;display:block;}

/* ---------- watch page ---------- */
.lightbox{position:fixed;inset:0;z-index:80;background:rgba(23,22,19,.96);display:none;align-items:center;justify-content:center;padding:5vmin;}
.lightbox.open{display:flex;}
.lightbox .frame{width:min(1100px,100%);aspect-ratio:16/9;background:var(--ink-1);border:1px solid var(--line-strong);}
.lightbox iframe{width:100%;height:100%;border:0;}
.lightbox .close{position:absolute;top:20px;right:20px;width:48px;height:48px;border:1px solid var(--line-strong);background:none;color:var(--chalk);font-family:var(--mono);font-size:16px;cursor:pointer;transition:background .2s,color .2s;}
.lightbox .close:hover{background:var(--chalk);color:var(--ink-0);}

/* ---------- book page ---------- */
/* the drawn cover mock was replaced 08-14 with the real product photo. The
   .bookcover .cover wrapper stays because main.js hangs the cursor-tilt on it. */
.bookcover{perspective:900px;}
.bookcover .cover{background:var(--ink-2);border:0;aspect-ratio:3/4;max-width:420px;margin:0 auto;padding:0;overflow:hidden;transition:transform .3s ease-out;transform-style:preserve-3d;box-shadow:0 30px 70px rgba(23,22,19,.32);}
.bookcover .cover img,.bookcover .cover video{width:100%;height:100%;object-fit:cover;display:block;}
/* the cameo page reuses the book-cover frame (and its cursor tilt) for a real
   Cameo still. Only the ratio changes: it was shot vertically on a phone. */
.bookcover .cover.camshot{aspect-ratio:9/16;max-width:330px;}
/* the cameo page's "what you get" band: the EA set shot runs full bleed with him
   on the left, copy on the right. Same system as the story chapters, so it picks
   up the scroll parallax for free. */
.photo-sect.cameoband .bg{background-image:url('../img/ea-set-wide.jpg');background-position:33% 40%;}
@media (max-width:900px){ .photo-sect.cameoband .bg{background-position:21% center;} }
.camcap{display:block;max-width:330px;margin:18px auto 0;text-align:center;font-size:10px;letter-spacing:.14em;line-height:1.9;color:#6B5D48;}

/* ---------- contact ---------- */
/* full screen. padding-top reserves the fixed nav so the copy still optically
   centres in the space below it, and border-box keeps the total at exactly 100svh. */
.contact-board{min-height:100svh;padding-top:var(--nav-h);display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;background:var(--board);}
.contact-board .bgplays{position:absolute;inset:0;opacity:.12;pointer-events:none;}
.contact-board .inner{position:relative;z-index:2;max-width:760px;padding:clamp(40px,6vw,84px) 24px;}

/* ---------- underdog: promo code, age note, fine print ---------- */
/* three small systems, all functional. The code IS the product, the age note
   has to sit with the CTA, and the terms block is a legal requirement, not
   decoration. Nothing else on that page invents a new shape. */
.promocode{display:inline-flex;align-items:stretch;border:1px solid var(--line-strong);margin-top:clamp(24px,3vw,34px);}
.promocode .lb{display:flex;align-items:center;padding:14px 18px;border-right:1px solid var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--chalk-dim);}
.promocode .cd{display:flex;align-items:center;padding:10px 24px;font-family:var(--disp);font-variation-settings:'wdth' 122;font-weight:850;font-size:26px;letter-spacing:.06em;color:var(--leather-hi);}
.agenote{margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);line-height:2;}

.fineprint{margin-top:clamp(30px,4vw,46px);border-top:1px solid var(--line);padding-top:clamp(30px,3.6vw,48px);}
.fineprint .fp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,52px);}
.fineprint h4{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;color:var(--leather-hi);margin-bottom:10px;}
.fineprint p{color:var(--chalk-dim);font-size:13px;line-height:1.7;max-width:46ch;}
.fineprint a[href^="tel:"]{white-space:nowrap;}
.fineprint a{color:var(--chalk);border-bottom:1px solid var(--line-strong);transition:color .2s,border-color .2s;}
.fineprint a:hover{color:var(--leather-hi);border-color:var(--leather-hi);}
.fineprint .states{font-family:var(--mono);font-size:11px;letter-spacing:.08em;line-height:1.95;max-width:none;}
.fineprint .states b{color:var(--chalk);font-weight:500;letter-spacing:.14em;}
/* the responsible-gaming line is the one thing on the page that must never be
   skimmed past, so it gets the full width and a rule of its own */
.fineprint .rgline{margin-top:clamp(30px,3.6vw,46px);border-top:1px solid var(--line);padding-top:clamp(24px,2.8vw,34px);display:flex;gap:clamp(18px,2.4vw,34px);align-items:flex-start;flex-wrap:wrap;}
.fineprint .rgline p{max-width:64ch;flex:1 1 380px;}
.agegate{display:inline-flex;align-items:center;gap:9px;flex:none;border:1px solid var(--line-strong);padding:10px 15px;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);white-space:nowrap;}
.agegate b{color:var(--leather-hi);font-weight:500;font-size:12px;}
@media (max-width:760px){
  .fineprint .fp-grid{grid-template-columns:1fr;}
  .promocode .cd{font-size:22px;}
}

/* ---------- underdog hero: the Falcons throw behind the type ---------- */
/* the shot is right-weighted (he is at 50-90% of frame) so the scrim runs heavy
   from the left and the copy never sits on top of him. Top and bottom fade so
   the nav stays legible and the section melts into the ink below it. */
.udhero{position:relative;overflow:hidden;background:var(--ink-1);}
.udhero .bg{position:absolute;inset:0;background:url('../img/kurt-falcons-throw.webp') no-repeat;background-size:114% auto;background-position:4% 28%;}
.udhero .scrim{position:absolute;inset:0;background:
  linear-gradient(99deg,rgba(23,22,19,.99) 24%,rgba(23,22,19,.93) 48%,rgba(23,22,19,.6) 72%,rgba(23,22,19,.28) 100%),
  linear-gradient(0deg,rgba(23,22,19,1) 2%,rgba(23,22,19,.34) 36%,transparent 62%),
  linear-gradient(180deg,rgba(23,22,19,.9) 0%,transparent 24%),
  rgba(23,22,19,.24);}
.udhero .wrap{position:relative;z-index:2;}
/* the offer banner is Underdog's own creative, so it stays untouched and gets a
   frame instead: its plate is a cooler grey than our ink and the rule keeps that
   edge from reading as a mistake. It is the one loud thing on the page. */
.udbanner{display:block;max-width:820px;margin:0 auto;border:1px solid var(--line);overflow:hidden;transition:border-color .35s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease);}
.udbanner:hover{border-color:var(--leather-hi);transform:translateY(-5px);box-shadow:0 30px 64px -26px rgba(0,0,0,.9);}
.udbanner img{width:100%;height:auto;display:block;}
.udbanner-cap{max-width:820px;margin:16px auto 0;text-align:center;font-size:10px;letter-spacing:.14em;line-height:1.9;color:var(--chalk-dim);}
@media (max-width:900px){
  /* on a phone the copy runs the full width, so the plate goes darker still and
     the throw reads as texture behind it rather than a photo fighting the type */
  .udhero .bg{background-size:cover;background-position:64% 24%;}
  .udhero .scrim{background:
    linear-gradient(0deg,rgba(23,22,19,1) 8%,rgba(23,22,19,.93) 46%,rgba(23,22,19,.84) 100%),
    linear-gradient(180deg,rgba(23,22,19,.92) 0%,transparent 20%),
    rgba(23,22,19,.24);}
}

/* ---------- footer ---------- */
/* two layers: .foot scrolls over the top of .foot-mark, which is pinned behind it,
   so the BENKERT wordmark is uncovered as you reach the bottom. */
/* ⚠️ NOT overflow:hidden. The link rail is the footer's first child and is
   pulled up past its top edge; hidden would slice it off at the seam. The clip
   only ever existed for the .bgplays doodle, which now clips itself. */
footer.foot{padding-top:clamp(80px,10vw,140px);border-top:1px solid var(--line);background:linear-gradient(180deg,var(--ink-0),#211E18 140%);position:relative;z-index:1;}
main,footer.foot{position:relative;}
main{z-index:1;background:var(--ink-0);}
.foot-mark{position:relative;z-index:0;background:var(--ink-0);overflow:hidden;}
.foot-mark-space{display:none;}
/* the pinned-reveal runs on every size now, mobile included */
.foot-mark{position:fixed;left:0;right:0;bottom:0;}
.foot-mark-space{display:block;height:var(--markH,340px);}
/* the X/O doodle sits in the right third at low opacity so it stops running
   through the link columns */
footer .bgplays{position:absolute;inset:0 0 0 auto;width:38%;opacity:.05;pointer-events:none;clip-path:inset(0);}
.foot-grid{position:relative;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding:64px 0 52px;}
/* the pitch block lives on the homepage only. Every other page runs the slim
   footer: link columns, legal bar, wordmark. */
.foot--slim{padding-top:clamp(56px,6vw,88px);}
.foot--slim .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:32px;padding:48px 0 40px;}
.foot-grid .pitch{font-family:var(--disp);font-variation-settings:'wdth' 118;font-weight:800;text-transform:uppercase;font-size:clamp(20px,2.1vw,30px);line-height:1.12;max-width:440px;}
.foot-grid .pitch span{color:var(--leather-hi);}
.foot-grid h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--chalk-dim);margin-bottom:18px;font-weight:500;}
.foot-grid ul{list-style:none;}
.foot-grid li{margin-bottom:12px;}
.foot-grid li a{color:var(--chalk);font-size:14px;transition:color .2s;}
.foot-grid li a:hover{color:var(--leather-hi);}
.wordmark{--rise:0%;transform:translateY(calc(16% + var(--rise)));font-family:var(--disp);font-variation-settings:'wdth' 128;font-weight:850;text-transform:uppercase;font-size:clamp(36px,12.2vw,196px);line-height:.82;letter-spacing:.005em;text-align:center;color:var(--chalk);user-select:none;position:relative;will-change:transform;
  /* the mark is part of the lockup: never let it wrap to its own line */
  white-space:nowrap;}
.wordmark span{color:var(--leather-hi);}
.wordmark .mk{display:inline-block;width:.74em;height:.74em;margin-left:.05em;vertical-align:-.015em;}
.wordmark .mk .brandmark{width:100%;height:100%;}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--line);position:relative;}
.foot-bottom .mono{color:var(--chalk-dim);}
.foot-bottom a{color:var(--leather-hi);}

/* ---------- channel card (watch page) ---------- */
.chan{position:relative;border:0;background:var(--board);overflow:hidden;}
.chan__banner{position:relative;height:clamp(120px,17vw,210px);background-image:url('../img/ea-stage.jpg');background-size:cover;background-position:center 46%;filter:saturate(.72) contrast(1.05) brightness(.92);}
.chan__banner::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--board) 3%,rgba(32,33,28,.66) 42%,rgba(32,33,28,.34) 100%);}
.chan__banner .chan__live{position:absolute;top:16px;right:clamp(20px,3vw,34px);z-index:2;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:0;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk);text-shadow:0 1px 3px rgba(23,22,19,1),0 2px 18px rgba(23,22,19,.95),0 0 30px rgba(23,22,19,.8);}
.chan__live i{width:6px;height:6px;background:var(--leather-hi);font-style:normal;}
.chan__body{position:relative;z-index:2;display:flex;gap:clamp(16px,2.4vw,26px);align-items:flex-start;padding:0 clamp(20px,3vw,34px) clamp(6px,1vw,12px);margin-top:clamp(-42px,-5vw,-56px);}
.chan__ava{flex:none;width:clamp(82px,9.6vw,128px);height:clamp(82px,9.6vw,128px);background-image:url('../img/kb-avatar.jpg');background-size:cover;background-position:center;border:1px solid var(--line-strong);outline:4px solid var(--board);transition:transform .5s var(--ease);}
.chan:hover .chan__ava{transform:translateY(-4px);}
.chan__id{padding-top:clamp(44px,5.4vw,58px);min-width:0;}
.chan__name{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-variation-settings:'wdth' 126;font-weight:850;text-transform:uppercase;font-size:clamp(22px,2.9vw,38px);line-height:1;}
.chan__name svg{width:clamp(15px,1.5vw,19px);height:auto;flex:none;color:var(--leather-hi);}
.chan__meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);}
.chan__meta b{color:var(--chalk);font-weight:500;}
.chan__meta s{text-decoration:none;color:rgba(240,237,228,.3);}
.chan__bio{color:var(--chalk-dim);font-size:15px;margin-top:14px;max-width:58ch;}
/* one baseline rule, not a boxed strip, and inset to match the card's body */
.chan__tabs{display:flex;flex-wrap:wrap;gap:0;margin:clamp(18px,2.4vw,28px) clamp(20px,3vw,34px) 0;border-bottom:1px solid var(--line);}
.chan__tab{position:relative;background:none;border:0;padding:14px clamp(14px,1.7vw,24px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--chalk-dim);cursor:pointer;transition:color .2s,background .25s;}
.chan__tab:first-child{padding-left:0;}
.chan__tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--leather-hi);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);}
.chan__tab:hover{color:var(--chalk);background:rgba(240,237,228,.03);}
.chan__tab[aria-selected="true"]{color:var(--chalk);}
.chan__tab[aria-selected="true"]::after{transform:scaleX(1);}
.chan__go{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:24px;}
.chan__go .hint{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,237,228,.34);}
@media (max-width:700px){
  .chan__banner .chan__live{top:10px;right:10px;padding:6px 9px;font-size:9px;letter-spacing:.12em;}
  .chan__tabs{position:relative;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%);}
  .chan__body{flex-direction:column;gap:14px;margin-top:-36px;}
  .chan__id{padding-top:0;}
  .chan__tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .chan__tabs::-webkit-scrollbar{display:none;}
  .chan__tab{white-space:nowrap;}
}

/* ---------- cursor ring (desktop) ---------- */
.cursor-ring{position:fixed;top:0;left:0;width:34px;height:34px;border:1px solid var(--chalkline);z-index:90;pointer-events:none;transform:translate(-50%,-50%);display:none;transition:width .25s var(--ease),height .25s var(--ease),background .25s;}
.cursor-ring .cl{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--ink-0);opacity:0;}
.cursor-ring.big{width:64px;height:64px;background:var(--chalk);border-color:var(--chalk);}
.cursor-ring.big .cl{opacity:1;}
@media (min-width:1024px) and (pointer:fine){ .cursor-ring{display:block;} }

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .navbar .links,.navbar .cta{display:none;}
  .nav-burger{display:flex;}
  :root{--nav-bar:62px;--nav-bar-sm:54px;}
  .nav-shell{padding-left:20px;}
}
@media (max-width:560px){
  .nav-burger{padding:0 16px;}
  .nav-burger .bt{display:none;}
}
@media (max-width:900px){
  .statstrip{grid-template-columns:repeat(2,1fr);gap:28px 20px;padding:32px 0;}
  /* mobile: play cards become a swipeable rail */
  .playcards{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(clamp(20px,4vw,56px) * -1);padding:0 clamp(20px,4vw,56px) 8px;}
  .playcards::-webkit-scrollbar{display:none;}
  .playcards-lift::after{content:"";position:absolute;top:0;right:0;bottom:8px;width:58px;background:linear-gradient(90deg,rgba(23,22,19,0),rgba(23,22,19,.92) 78%,var(--ink-0));pointer-events:none;z-index:4;opacity:1;transition:opacity .3s var(--ease);}
  .playcards-lift.rail-end::after{opacity:0;}
  .playcards .playcard{flex:0 0 82%;scroll-snap-align:center;padding:26px 22px;}
  .playcards .playcard svg{height:96px;margin-bottom:16px;}
  .playcards .playcard .go{opacity:1;transform:none;}
  .vidgrid{grid-template-columns:1fr;}
  .hide-mobile{display:none !important;}
  .vidtile.wide .thumb{aspect-ratio:16/9;}
  .vidgrid.shorts{gap:10px;}
  .vidgrid.shorts .vidtile{flex:0 0 calc(50% - 5px);max-width:none;}
  .stone-sect .grid2{grid-template-columns:1fr;}
  .teamrail{grid-template-columns:1fr;}
  .foot-grid,.foot--slim .foot-grid{grid-template-columns:1fr 1fr;padding:48px 0 40px;gap:28px;}
  /* the pitch block gets its own full-width row instead of an 8-line column */
  .foot-grid > div:first-child:has(.pitch){grid-column:1 / -1;margin-bottom:8px;}
  /* mobile, full footer (pitch + 3 columns): Site left, Follow + Work stacked right */
  .foot-grid:has(.pitch) > div:nth-child(2){grid-column:1;grid-row:2 / span 2;}
  .foot-grid:has(.pitch) > div:nth-child(3){grid-column:2;grid-row:2;}
  .foot-grid:has(.pitch) > div:nth-child(4){grid-column:2;grid-row:3;align-self:start;}
  /* mobile, slim footer (no pitch): same shape, one row higher */
  .foot--slim{padding-top:clamp(32px,7vw,56px);}
  .foot--slim .foot-grid{padding:34px 0 36px;}
  .foot--slim .foot-grid > div:nth-child(1){grid-column:1;grid-row:1 / span 2;}
  .foot--slim .foot-grid > div:nth-child(2){grid-column:2;grid-row:1;}
  .foot--slim .foot-grid > div:nth-child(3){grid-column:2;grid-row:2;align-self:start;}
  .foot-grid .pitch{max-width:none;font-size:19px;}
  .foot-grid .pitch + .btn-pair{width:auto;}
  footer .bgplays{width:70%;}
  .chip-row .chip + .chip::before{margin:0 12px;}
  .btn{padding:15px 22px;}
  .btn-pair{display:flex;flex-direction:column;width:100%;}
  .btn-pair .btn + .btn{margin-left:0;margin-top:-1px;}
  .btn-pair .btn{text-align:center;}
  .hero .scrim{background:linear-gradient(0deg,rgba(23,22,19,.96) 22%,rgba(23,22,19,.45) 60%,rgba(23,22,19,.25) 100%);}
  /* push the photo layer down so the headline clears Kurt's face, fade its top edge into the ink */
  .hero.home .bg{background-image:url('../img/hero-armynavy-900.jpg');background-position:50% 100%;filter:saturate(1.08) contrast(1.1) brightness(1.06);top:17%;bottom:-6%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%);mask-image:linear-gradient(180deg,transparent 0,#000 13%);}
  .hero.home .grain{opacity:.18;}
  .hero.home .scrim{background:linear-gradient(0deg,rgba(23,22,19,.88) 10%,rgba(23,22,19,.2) 40%,transparent 54%),linear-gradient(180deg,rgba(23,22,19,.86) 0%,rgba(23,22,19,.4) 26%,transparent 46%);}
  /* mobile: copy sits above Kurt, buttons stay pinned low */
  .hero.home{align-items:stretch;}
  .hero.home .inner{display:flex;flex-direction:column;height:100%;text-align:center;}
  .hero.home .kicker-row{justify-content:center;align-items:center;text-align:center;}
  .hero.home .kicker-row .chip-row,.hero.home .chip-row{align-items:center;justify-content:center;}
  .hero.home .hero-h .hl-desk{display:none;}
  .hero.home .hero-h .hl-mob{display:block;}
  .hero.home .sub{margin-top:auto;margin-left:auto;margin-right:auto;text-align:center;}
  .hero.home .btn-pair{margin-top:0;}
  .photo-sect.left .scrim,.photo-sect.right .scrim{background:linear-gradient(0deg,rgba(23,22,19,.9) 24%,rgba(23,22,19,.52) 58%,rgba(23,22,19,.22) 100%),rgba(23,22,19,.14);}
  .photo-sect .copy,.photo-sect.right .copy{margin:0;padding:56vh 0 64px;}
  #story-preview .copy{padding-bottom:110px;}
  .playcards-lift{margin-top:-56px;}
  .playcards-lift .playcard{box-shadow:0 18px 44px -18px rgba(0,0,0,.8);}
  /* the wide plate has nothing to give on a portrait band, so phones get the
     camera original sat at the top of the section, whole, all three balls in
     frame. No parallax runs at this width, so the bg can drop its overscan. */
  .photo-sect.build .bg{inset:0 0 auto 0;height:92vw;background-image:url('../img/kurt-founder.jpg');background-size:122% auto;background-position:50% 0;background-repeat:no-repeat;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#000 64%,transparent 100%);}
  .photo-sect.build .scrim{background:linear-gradient(0deg,rgba(23,22,19,.55) 0%,transparent 34%);}
  .photo-sect.build .copy{padding-top:calc(90vw + 10px);}
  .photo-sect.build .inner{padding:0 clamp(20px,4vw,56px);}
  .photo-sect.build .copy{margin-left:0;}
}


/* ============================================================
   MORE NUTRITION  ·  partner page
   Dark shell (nav + footer) stays. Between them the page runs
   More's own bright pink + sky. Everything is scoped to .mn-*
   or to body.mn so not one rule leaks onto the other 8 pages.
   ============================================================ */
:root{
  --mn-pink:#F5359A;        /* pack pink, accents on dark only    */
  --mn-pink-deep:#C4126F;   /* 5.6:1 on cream, safe for body copy */
  --mn-flood:#D4127F;       /* 5.1:1 under white, safe as a bed   */
  --mn-sky:#8FD4E8;         /* shoe / sky blue, accents on dark   */
  --mn-sky-deep:#12557E;    /* 7.4:1 on cream                     */
  --mn-cream:#FFF6FA;
  --mn-ink:#191714;
}

/* ---------- hero: a white stage. Centred photo, copy revealed on scroll ----------
   --p (0 -> 1) comes from js/more.js off the hero track's own progress, exactly
   like the grow section. Registered with @property so it is a real number in
   calc() instead of a raw token. ---------------------------------------------- */
@property --p{syntax:"<number>";inherits:true;initial-value:0;}

.mn-hero.mn-light{background:#FFFBFD;}
.mn-hero__track{height:280vh;position:relative;}
/* --z is act one (scroll INTO the picture), --p keeps running for act two
   (scroll THROUGH the words). Everything below reads off one or the other. */
.mn-hero__stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;
  --z:clamp(0,calc(var(--p) / .3),1);}
/* the frame opens from a small centred card to a near-full plate, keeping a
   white margin so the page still reads white. The picture inside counter-scales
   so you are moving in, not just watching a box get bigger. */
.mn-hero__frame{position:absolute;left:50%;top:50%;margin:0;overflow:hidden;
  /* opens 9:16 (a phone frame) and widens to a landscape plate.
     The start width is expressed in svh so the ratio holds at any viewport;
     calc() happily adds an svh term to a % term. */
  width:calc(34.9svh * (1 - var(--z)) + 86% * var(--z));
  height:calc(62svh * (1 - var(--z)) + 88svh * var(--z));
  transform:translate(-50%,-50%);will-change:width,height;}
.mn-hero__shot{width:100%;height:100%;object-fit:cover;object-position:52% 34%;
  transform:scale(calc(1.1 - .1 * var(--z)));transform-origin:center;}
/* NO white veil. Ryder: "dont make it white hazy." Ink on this sky measures
   7.6:1 unaided. The only help the copy gets is a low, warm floor gradient that
   also carries the brand colour, and the copy sits high enough to stay on sky. */
.mn-hero__veil{position:absolute;inset:0;pointer-events:none;opacity:var(--z);
  background:linear-gradient(0deg,
    rgba(255,251,253,.7) 0%,rgba(255,251,253,.46) 12%,rgba(255,251,253,.2) 26%,transparent 42%);}
/* a touch of More pink on the floor so the white is not sterile */
.mn-hero__stage::after{content:"";position:absolute;left:0;right:0;bottom:0;height:26%;
  pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(245,53,154,.16) 0%,rgba(245,53,154,.05) 46%,transparent 100%);}
/* the eyebrow is pinned to the top, out of the growing plate's way, so the
   stage is never a blank white screen at rest */
.mn-hero__kick{position:absolute;left:0;right:0;z-index:3;text-align:center;margin:0;
  top:calc(var(--nav-h) - clamp(14px,2vw,30px));}
.mn-hero .wrap{position:relative;z-index:2;text-align:center;}
.mn-hero__copy{max-width:900px;margin:0 auto;transform:translateY(calc(-7svh * var(--z)));}
.mn-hero .kicker{color:var(--mn-pink-deep);}
/* ink on a light stage: no glow, no outline */
.mn-hero .hero-h{color:var(--mn-ink);text-shadow:none;}
.mn-hero .hero-h .stroke{-webkit-text-stroke:0;color:var(--mn-ink);}
.mn-hero .lede{color:#463F3A;margin-left:auto;margin-right:auto;}
.mn-hero .chip-row{justify-content:center;}
.mn-hero .btn-pair{justify-content:center;}

/* scroll-linked reveal. --a = when it starts, --w = how long it takes. */
/* ⚠️ main.js auto-tags .kicker and .lede with [data-rv], and `[data-rv].in`
   is (0,2,0) which beats a bare `.mn-rv`. The stage owns its own reveal, so
   these are written at matching specificity AND more.js strips the attribute. */
.mn-hero .mn-rv,.mn-hero .mn-rv.in{--a:0;--w:.16;
  --t:clamp(0,calc((var(--p) - var(--a)) / var(--w)),1);
  opacity:var(--t);
  transform:translateY(calc((1 - var(--t)) * 34px));transition:none;}
/* ⚠️ only the headline lines want display:block. Forcing it on .chip-row kills
   its flex layout and the mobile stack collapses into one unreadable run. */
.mn-hero .hero-h .mn-rv{display:block;}
.mn-hero .mn-rv-out,.mn-hero .mn-rv-out.in{--a:.02;--w:.1;transition:none;
  opacity:calc(1 - clamp(0,calc((var(--p) - var(--a)) / var(--w)),1));}

.mn-scrollcue{position:absolute;left:50%;bottom:clamp(16px,2.2vw,26px);transform:translateX(-50%);
  z-index:3;font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;
  color:#7A7369;display:flex;flex-direction:column;align-items:center;gap:9px;}
.mn-scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(180deg,rgba(25,23,20,.5),transparent);
  animation:mnCue 2.2s var(--ease) infinite;transform-origin:top;}
@keyframes mnCue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* THE NAV. The page now opens straight onto the pink grow section, and
   chalk-dim links measure 1.97:1 on #D4127F. main.js adds .scrolled past 80px
   and the bar becomes its own dark pill, which is right everywhere else, so
   only the un-scrolled state is touched: near-white type (4.5:1 on the flood)
   over a slightly deepened pink. Excluded while the dark mobile menu is open. */
body.mn:not(.menu-open) .navbar:not(.scrolled){
  background:linear-gradient(180deg,rgba(120,10,74,.6),rgba(120,10,74,0));
  border-bottom-color:rgba(255,255,255,.16);}
body.mn:not(.menu-open) .navbar:not(.scrolled) .brand{color:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .brandmark path{stroke:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .brandmark circle{stroke:#FFD9EC;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .links a{color:rgba(255,255,255,.86);}
body.mn:not(.menu-open) .navbar:not(.scrolled) .links a:hover,
body.mn:not(.menu-open) .navbar:not(.scrolled) .links a.on{color:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .links a::after{background:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .cta{color:#fff;border-left-color:rgba(255,255,255,.24);}
body.mn:not(.menu-open) .navbar:not(.scrolled) .cta::before{background:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .cta:hover{color:var(--mn-flood);}
body.mn:not(.menu-open) .navbar:not(.scrolled) .nav-burger{color:#fff;border-left-color:rgba(255,255,255,.24);}
body.mn:not(.menu-open) .navbar:not(.scrolled) .nav-burger .bl{background:#fff;}
body.mn:not(.menu-open) .navbar:not(.scrolled) .nav-burger .bt{color:rgba(255,255,255,.8);}

@media (prefers-reduced-motion: reduce){
  .mn-hero__track{height:auto;}
  .mn-hero__stage{position:static;height:auto;padding:calc(var(--nav-h) + 40px) 0 clamp(56px,7vw,96px);}
  .mn-hero__shot{position:relative;left:auto;top:auto;transform:none;width:100%;height:auto;
    aspect-ratio:4/3;margin-bottom:clamp(24px,3vw,40px);}
  .mn-hero__veil{display:none;}
  .mn-hero .mn-rv,.mn-hero .mn-rv.in{opacity:1;transform:none;}
  .mn-scrollcue{display:none;}
}

/* ---------- the grow: a framed shot that scales to full screen ----------
   Driven by --p (0 → 1) which js/more.js writes from the track's own
   scroll progress. No ScrollTrigger pin, so nothing below it re-measures,
   and no GSAP timeline for Lenis to fight. Pure sticky + one CSS var. */
.mn-grow{background:var(--mn-flood);}
.mn-grow__track{height:230vh;position:relative;}
.mn-grow__stick{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden;}
/* it is the first thing on the page now, so hold the top dark enough for the nav */
.mn-grow__stick::before{content:"";position:absolute;left:0;right:0;top:0;height:clamp(120px,20vh,200px);
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(120,10,74,.55),rgba(120,10,74,0));}
.mn-grow__frame{--p:0;margin:0;position:relative;overflow:hidden;
  width:calc(42% + 58% * var(--p));
  height:calc(44svh + 56svh * var(--p));
  will-change:width,height;}
.mn-grow__frame img{width:100%;height:100%;object-fit:cover;object-position:center 56%;
  transform:scale(calc(1.14 - .14 * var(--p)));transform-origin:center;}
.mn-grow__cap{position:absolute;left:0;right:0;bottom:clamp(18px,2.6vw,34px);z-index:2;
  text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;opacity:var(--p);pointer-events:none;
  text-shadow:0 1px 18px rgba(0,0,0,.6);}
@media (prefers-reduced-motion: reduce){
  .mn-grow__track{height:auto;}
  .mn-grow__stick{position:static;height:auto;padding:clamp(40px,6vw,80px) 0;}
  .mn-grow__frame{width:100%;height:auto;aspect-ratio:16/9;}
  .mn-grow__cap{opacity:1;}
}

/* ---------- the flood: More's pink, white type ---------- */
.mn-flood{background:var(--mn-flood);color:#fff;}
.mn-flood .kicker{color:#FFD9EC;}
.mn-flood .h2{color:#fff;}
.mn-flood .lede,.mn-flood p{color:rgba(255,255,255,.9);}
.mn-flood .statstrip{border-color:rgba(255,255,255,.34);}
.mn-flood .statstrip .v{color:#fff;}
.mn-flood .statstrip .v .suf{color:#FFD9EC;}
.mn-flood .statstrip .k{color:rgba(255,255,255,.78);}

/* ---------- light section ---------- */
.mn-light{background:var(--mn-cream);color:var(--mn-ink);}
.mn-light .kicker{color:var(--mn-pink-deep);}
.mn-light .h2{color:var(--mn-ink);}
.mn-light .h2 .lh{color:var(--mn-pink-deep);}
.mn-light .lede,.mn-light p{color:#4A4640;}
.mn-light .grid2{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center;}
.mn-light figure.shot figcaption{color:#7A7369;}
.mn-light .btn{border-color:var(--mn-ink);color:var(--mn-ink);}
.mn-light .btn::before{background:var(--mn-ink);}
.mn-light .btn:hover{color:var(--mn-cream);}
.mn-light .btn.solid{background:var(--mn-flood);border-color:var(--mn-flood);color:#fff;}
.mn-light .btn.solid::before{background:var(--mn-ink);}
.mn-light .btn.solid:hover{border-color:var(--mn-ink);color:#fff;}
.mn-light .chip{color:#6C665D;}
.mn-light .chip b{color:var(--mn-ink);}
.mn-light .chip-row .chip:not(:last-child)::after{background:var(--mn-pink-deep);}
.mn-light .textlink{color:var(--mn-pink-deep);border-color:var(--mn-pink-deep);}
.mn-light .textlink:hover{color:var(--mn-ink);border-color:var(--mn-ink);}
.mn-light .pullquote{margin-top:clamp(24px,3vw,34px);padding-left:clamp(16px,1.6vw,22px);
  border-left:3px solid var(--mn-pink-deep);font-family:var(--disp);font-variation-settings:'wdth' 112;
  font-weight:700;text-transform:uppercase;font-size:clamp(17px,1.6vw,22px);line-height:1.22;color:var(--mn-ink);}

/* ---------- flavours: the swatch list ---------- */
.mn-flavours{margin-top:clamp(30px,4vw,48px);display:grid;gap:0;max-width:940px;}
.mn-fl{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,2vw,26px);
  padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid rgba(25,23,20,.14);}
.mn-fl:last-child{border-bottom:1px solid rgba(25,23,20,.14);}
.mn-fl .sw{width:clamp(34px,3.4vw,46px);height:clamp(34px,3.4vw,46px);flex:none;}
.mn-fl .nm{font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:800;text-transform:uppercase;
  font-size:clamp(16px,1.9vw,26px);line-height:1.05;letter-spacing:.01em;}
.mn-fl .no{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mn-pink-deep);}
/* ---------- flavour cards: one per live Satisbites pack ---------- */
.mn-cards{margin-top:clamp(30px,4vw,48px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.5vw,22px);}
.mn-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid rgba(25,23,20,.1);
  overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;}
.mn-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--fl,#F5359A);z-index:2;}
.mn-card__pic{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF4FB,#F7FBFD);}
.mn-card__pic img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transition:transform .8s var(--ease);}
.mn-card__no{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  color:var(--mn-ink);background:rgba(255,255,255,.82);padding:4px 7px;}
.mn-card__in{display:flex;flex-direction:column;flex:1;padding:clamp(16px,1.5vw,22px);}
.mn-card__nm{font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:800;text-transform:uppercase;
  font-size:clamp(16px,1.25vw,20px);line-height:1.06;letter-spacing:.01em;color:var(--mn-ink);}
.mn-card__meta{margin-top:10px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:#7A7369;line-height:1.7;}
.mn-card__foot{margin-top:auto;padding-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mn-card__price{font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--mn-ink);}
.mn-card__btn{padding:11px 15px;font-size:10px;letter-spacing:.14em;}
@media (hover:hover){
  .mn-card:hover{transform:translateY(-8px);box-shadow:0 34px 60px -34px rgba(25,23,20,.4);border-color:rgba(25,23,20,.16);}
  .mn-card:hover .mn-card__pic img{transform:scale(1.05);}
}
@media (prefers-reduced-motion:reduce){ .mn-card,.mn-card:hover{transform:none;transition:none;} }
@media (max-width:1023px){ .mn-cards{grid-template-columns:repeat(2,1fr);} }
.mn-flnote{margin-top:18px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:#7A7369;line-height:1.9;}

/* ---------- the loose three-up. No heading, no section, no captions:
   three frames dropped onto the page between two blocks of copy. ---------- */
.mn-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px);
  padding:clamp(10px,1.6vw,26px) 0 clamp(40px,5vw,84px);}
/* slide in staggered when the row enters, then lift under the cursor.
   more.js adds .in; --i is the card's index and drives the stagger. */
.mn-strip figure{margin:0;overflow:hidden;position:relative;
  opacity:0;transform:translateY(40px) scale(.985);
  /* a long ease-out-quint settle rather than the site's snappier expo curve */
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),
             transform 1.25s cubic-bezier(.22,1,.36,1),
             box-shadow .45s var(--ease);
  transition-delay:calc(var(--i,0) * .15s);}
.mn-strip figure.in{opacity:1;transform:none;}
.mn-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform .7s var(--ease);}
@media (hover:hover){
  /* the figures are not links, so a small lift cannot steal a tap target */
  .mn-strip figure:hover{transform:translateY(-10px);
    box-shadow:0 30px 60px -30px rgba(25,23,20,.42);}
  .mn-strip figure:hover img{transform:scale(1.06);}
}
@media (prefers-reduced-motion: reduce){
  .mn-strip figure{opacity:1;transform:none;transition:none;}
  .mn-strip figure:hover img{transform:none;}
}

/* ---------- closer ---------- */
.mn-closer{position:relative;overflow:hidden;
  background:linear-gradient(196deg,#D4127F 0%,#9E1064 38%,#103A5A 76%,#171613 100%);}
.mn-closer .closer__in .h2{color:#fff;}
.mn-closer .closer__in .lede{color:rgba(255,246,250,.85);}
.mn-closer .kicker{color:var(--mn-sky);}
.mn-closer .btn.solid{background:#fff;border-color:#fff;color:var(--mn-flood);}
.mn-closer .btn.solid::before{background:var(--mn-sky);}
.mn-closer .btn.solid:hover{border-color:var(--mn-sky);color:var(--mn-ink);}
.mn-disclose{margin:clamp(30px,3.6vw,44px) auto 0;max-width:640px;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;line-height:2;
  text-transform:uppercase;color:rgba(255,246,250,.74);}
.mn-disclose a{color:#fff;border-bottom:1px solid rgba(255,255,255,.4);}
.mn-disclose a:hover{border-color:#fff;}

@media (max-width:900px){
  .mn-hero__track{height:250vh;}
  .mn-hero__frame{width:calc(31.5svh * (1 - var(--z)) + 104% * var(--z));
    height:calc(56svh * (1 - var(--z)) + 88svh * var(--z));}
  .mn-hero__shot{object-position:48% 34%;}
  .mn-hero__veil{background:linear-gradient(180deg,
    rgba(255,251,253,.2) 0%,rgba(255,251,253,.76) 12%,rgba(255,251,253,.88) 30%,
    rgba(255,251,253,.88) 70%,rgba(255,251,253,.6) 88%,rgba(255,251,253,.1) 100%);}
  .mn-grow__track{height:190vh;}
  .mn-grow__frame{width:calc(78% + 22% * var(--p));height:calc(34svh + 66svh * var(--p));}
  .mn-light .grid2{grid-template-columns:1fr;}
  /* mobile: the three shoot frames become a swipeable rail */
  .mn-strip{position:relative;display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(clamp(20px,4vw,56px) * -1);padding:clamp(10px,1.6vw,26px) clamp(20px,4vw,56px) clamp(40px,5vw,84px);}
  .mn-strip::-webkit-scrollbar{display:none;}
  .mn-strip figure{flex:0 0 80%;scroll-snap-align:start;}
  .mn-strip{scroll-padding-left:clamp(20px,4vw,56px);}
  .mn-strip img{aspect-ratio:4/5;}
  .mn-strip-hold{position:relative;}
  .mn-strip-hold::after{content:"";position:absolute;top:0;right:0;bottom:clamp(40px,5vw,84px);width:54px;background:linear-gradient(90deg,rgba(255,246,250,0),rgba(255,246,250,.9) 76%,var(--mn-cream));pointer-events:none;z-index:3;transition:opacity .3s var(--ease);}
  .mn-strip-hold.rail-end::after{opacity:0;}
  /* mobile: flavour cards become a swipeable rail */
  .mn-cards{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;margin-inline:calc(clamp(20px,4vw,56px) * -1);padding:0 clamp(20px,4vw,56px) 8px;scroll-padding-left:clamp(20px,4vw,56px);}
  .mn-cards::-webkit-scrollbar{display:none;}
  .mn-cards .mn-card{flex:0 0 74%;scroll-snap-align:start;}
  .mn-cards-hold{position:relative;}
  .mn-cards-hold::after{content:"";position:absolute;right:0;width:48px;top:auto;height:0;}
  .mn-fl{grid-template-columns:auto 1fr;grid-template-areas:"sw nm" ". no";row-gap:6px;}
  .mn-fl .sw{grid-area:sw;}.mn-fl .nm{grid-area:nm;}.mn-fl .no{grid-area:no;}
}
@media (max-width:640px){
  /* the base rule left-aligns a stacked chip run; this hero is centred */
  .mn-hero .chip-row{align-items:center;}
}


/* ============================================================
   LINK RAIL  ·  homepage only
   Five destination cards OVERLAPPING the footer. Ryder: "i want the
   cards to overlap the footer, not sit on the line."
   The rail is the footer's FIRST CHILD, pulled up by a negative
   margin-top so its top slice sticks into the stone section above.
   Living inside the footer means it can never lose a z-index race
   with it, which is what a sibling in <main> was doing.
   ⚠️ footer.foot must not be overflow:hidden or this gets sliced.
   ============================================================ */
:root{
  --rail-lift:clamp(66px,8.4vw,124px);   /* how far the cards poke up  */
  --rail-under:clamp(62px,8vw,112px);    /* air under them in the foot */
}
/* ⚠️ the footer's own padding-top would eat the negative margin, so it is
   zeroed and the air under the cards comes from the rail's margin-bottom. */
footer.foot:not(.foot--slim){padding-top:0;}
.linkrail-hold{position:relative;z-index:3;
  margin-top:calc(-1 * var(--rail-lift));
  margin-bottom:var(--rail-under);}
/* the section above reserves the room the cards poke into */
.rail-above{padding-bottom:calc(clamp(72px,9vw,140px) + var(--rail-lift) + clamp(20px,2.6vw,40px));}
.linkrail{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,16px);}

.lcard{position:relative;display:block;overflow:hidden;aspect-ratio:4/5;background:var(--ink-1);
  box-shadow:0 26px 54px -26px rgba(0,0,0,.7);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);}
.lcard img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s var(--ease);}
.lcard::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(0deg,rgba(23,22,19,.9) 0%,rgba(23,22,19,.4) 38%,rgba(23,22,19,0) 74%);}
.lc-in{position:absolute;left:0;right:0;bottom:0;z-index:2;display:block;
  padding:clamp(12px,1.3vw,18px);}
.lc-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--leather-hi);margin-bottom:6px;}
.lc-t{display:block;font-family:var(--disp);font-variation-settings:'wdth' 116;font-weight:800;
  text-transform:uppercase;font-size:clamp(13px,1.1vw,17px);line-height:1.08;color:var(--chalk);}
@media (hover:hover){
  /* transform only, so the tap target never changes size or moves sideways */
  .lcard:hover{transform:translateY(-9px);box-shadow:0 38px 70px -26px rgba(0,0,0,.8);}
  .lcard:hover img{transform:scale(1.07);}
  .lcard:hover .lc-k{color:var(--chalk);}
}
@media (max-width:1023px){
  /* stay one row: a 3-col wrap puts the rail on two lines and the overlap
     stops reading as a single band crossing the seam */
  .linkrail{gap:8px;}
  .lc-t{font-size:14px;}
  .lc-k{font-size:8px;letter-spacing:.16em;}
}
@media (max-width:760px){
  :root{--rail-lift:clamp(56px,15vw,90px);--rail-under:clamp(52px,12vw,84px);}
  .linkrail{grid-template-columns:repeat(2,1fr);gap:9px;}
  .lcard{aspect-ratio:4/5;}
  /* mobile only: Cameo takes the small slot, Underdog runs full width */
  .linkrail .lcard:nth-child(5){order:1;grid-column:auto;aspect-ratio:4/5;}
  .linkrail .lcard:nth-child(4){order:2;grid-column:1 / -1;aspect-ratio:16/9;}
  .lc-t{font-size:16px;}
}
@media (prefers-reduced-motion: reduce){
  .lcard,.lcard img{transition:none;}
  .lcard:hover{transform:none;}
  .lcard:hover img{transform:none;}
}


/* ---------- platform reach row  ·  /watch ----------
   Numbers come off Kurt's Pillar media kit. Whitespace and one hairline,
   no boxes: the statstrip above it already carries the weight. */
.platrow{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,2vw,30px);
  margin-top:clamp(34px,4.2vw,54px);}
.plat .p{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--leather-hi);margin-bottom:9px;}
.plat .n{display:block;font-family:var(--disp);font-variation-settings:'wdth' 118;
  font-weight:850;text-transform:uppercase;font-size:clamp(18px,1.9vw,27px);line-height:1;}
.plat .u{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chalk-dim);margin-top:7px;}
.platnote{margin-top:clamp(20px,2.4vw,30px);font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--chalk-dim);}
@media (max-width:900px){
  .platrow{grid-template-columns:repeat(3,1fr);gap:26px 18px;}
}
@media (max-width:480px){
  .platrow{grid-template-columns:repeat(2,1fr);}
}