/* ============================================================
   Edward Einhorn — prototype design system (shared across pages)
   Dark cinematic reel → cream editorial → green finale.
   ============================================================ */
:root{
  --cream:#FFFFFF;--ink:#1a2223;--muted:#566b6d;--green:#417376;--mint:#bcab79;--sea:#216282;--blue:#216282;--blue-2:#bcab79;
  --pad:clamp(20px,5vw,64px);
  --serif:"Newsreader",Georgia,serif;--sans:ui-sans-serif,system-ui,"Helvetica Neue",Arial,sans-serif;
  /* pipeline aliases */
  --b-green:#417376;--b-ink:#1a2223;--b-mut:#6f807f;--b-faint:#a9b3b2;--b-line:rgba(26,34,35,.16);--b-bg:#FFFFFF;--b-sans:var(--sans);
}
/* ===== Section palettes — single source of truth (was duplicated inline in every page).
   Applied per section via body.pal-*: green (live default), teal, brick, cobalt, noir (HBO). ===== */
body.pal-green{--cream:#F8F7F3;--ink:#191612;--muted:#6B6258;--green:#094C24;--mint:#8fe0aa;--sea:#0C2340;--blue:#0C2340;--blue-2:#8fe0aa;--pop:#C25E3A;--b-green:#094C24;--b-ink:#191612;--b-mut:#6f675e;--b-faint:#b7b0a6;--b-line:rgba(25,22,18,.16);--b-bg:#F8F7F3}
body.pal-teal{--cream:#FFFFFF;--ink:#1a2223;--muted:#566b6d;--green:#417376;--mint:#bcab79;--sea:#216282;--blue:#216282;--blue-2:#bcab79;--pop:#D9793F;--b-green:#417376;--b-ink:#1a2223;--b-mut:#6f807f;--b-faint:#a9b3b2;--b-line:rgba(26,34,35,.16);--b-bg:#FFFFFF}
body.pal-brick{--cream:#F8F7F3;--ink:#1E1A16;--muted:#6B6258;--green:#A6392B;--mint:#C99A5B;--sea:#3F86CE;--blue:#3F86CE;--blue-2:#C99A5B;--pop:#2F8F86;--b-green:#A6392B;--b-ink:#1E1A16;--b-mut:#7c7268;--b-faint:#b9b1a6;--b-line:rgba(30,26,22,.16);--b-bg:#F8F7F3}
body.pal-cobalt{--cream:#F4F5F6;--ink:#111118;--muted:#41474E;--green:#004BA8;--mint:#3E78B2;--sea:#41474E;--blue:#004BA8;--blue-2:#3E78B2;--pop:#D9913F;--b-green:#004BA8;--b-ink:#111118;--b-mut:#565C63;--b-faint:#b6bbc0;--b-line:rgba(17,17,24,.16);--b-bg:#F4F5F6}
body.pal-noir{--cream:#0C0D10;--ink:#F1F0EB;--muted:#9CA0A4;--green:#8FBF9E;--mint:#8FBF9E;--sea:#F1F0EB;--blue:#8FBF9E;--blue-2:#8FBF9E;--pop:#E27D45;--b-green:#8FBF9E;--b-ink:#F1F0EB;--b-mut:#9CA0A4;--b-faint:#6a6e72;--b-line:rgba(255,255,255,.15);--b-bg:#0C0D10}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:antialiased;overflow-x:hidden;animation:pagein .7s ease both}
@keyframes pagein{from{opacity:0}to{opacity:1}}
.sans{font-family:var(--sans)}
/* nav link animated underline */
.nav__links a,.nav__links button{position:relative}
.nav__links a::after,.nav__links button::after{content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1.5px;background:currentColor;transition:right .3s cubic-bezier(.2,.8,.2,1)}
.nav__links a:hover::after,.nav__links button:hover::after{right:0}
/* cta lift */
.finale__cta,.menu__tile,.card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,filter .35s}
.finale__cta:hover{transform:translateY(-3px);box-shadow:0 16px 30px -12px rgba(65,115,118,.5)}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--pad)}

/* scroll progress */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--green);z-index:100}

/* ===== NAV (colour-flips per section) ===== */
.nav{position:fixed;top:0;left:0;right:0;z-index:120;display:flex;align-items:center;justify-content:space-between;padding:20px var(--pad);color:#F4F5F5;transition:color .35s ease;pointer-events:none}
.nav *{pointer-events:auto}
.nav:not(.nav--dark){text-shadow:0 1px 2px rgba(0,0,0,.65),0 2px 24px rgba(0,0,0,.7)}
.nav.nav--dark{color:var(--ink);text-shadow:none}
.nav__links a{opacity:1}
.nav__brand{font-family:var(--sans);font-weight:700;letter-spacing:-.01em;font-size:clamp(26px,3vw,34px);line-height:1;text-decoration:none}
.nav__brand small{display:block;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;opacity:.82;margin-top:7px}
.nav__links{display:flex;gap:clamp(26px,2.6vw,42px);font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;align-items:center}
.nav__links a,.nav__links button{color:inherit;text-decoration:none;opacity:.82;background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.nav__links a:hover,.nav__links button:hover{opacity:1}
.nav__menubtn{display:none;border:1px solid currentColor;border-radius:100px;padding:8px 14px}
@media(max-width:680px){
  .nav{padding:15px var(--pad)}
  .nav__brand{font-size:20px}
  .nav__links a:not([data-menu-open]){display:none}
  .nav__links a[data-menu-open]{opacity:1;border:1.4px solid currentColor;border-radius:100px;padding:9px 17px;letter-spacing:.14em}
  .nav__links a[data-menu-open]::after{display:none}
}

/* ===== WORK dropdown menu ===== */
.menu{position:fixed;top:clamp(58px,6.6vh,76px);right:clamp(12px,3vw,44px);z-index:150;
  width:min(600px,94vw);max-height:min(82vh,660px);overflow:auto;
  background:#0d1616;color:#F1F0EB;border:1px solid rgba(255,255,255,.1);border-radius:16px;
  box-shadow:0 30px 70px -28px rgba(0,0,0,.72);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .26s cubic-bezier(.2,.7,.2,1),transform .26s cubic-bezier(.2,.7,.2,1),visibility .26s}
.menu.open{opacity:1;visibility:visible;transform:none}
.menu__x{position:absolute;top:14px;right:16px;z-index:3;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;color:rgba(245,247,247,.55);cursor:pointer}
.menu__x:hover{color:#F1F0EB}
.menu__in{padding:clamp(20px,2.2vw,28px);display:grid;grid-template-columns:0.82fr 1.18fr;gap:clamp(20px,2.4vw,30px)}
@media(max-width:560px){
  .menu{width:min(420px,94vw);max-height:88vh;top:56px;right:12px}
  .menu__in{grid-template-columns:1fr;gap:16px;padding:18px 20px 20px}
  .menu__cs{grid-template-columns:1fr 1fr;gap:9px}
  /* case studies side-by-side (not stacked) so the whole menu fits a phone without scrolling.
     .menu__in prefix raises specificity above the base single-column rule that follows this block. */
  .menu__in .menu__col--cases .menu__cs{grid-template-columns:1fr 1fr;gap:9px}
  .menu__in .menu__col--cases .menu__tile{aspect-ratio:16/11}
  .menu__grp{margin-bottom:10px}
  .menu__col:not(.menu__col--cases) .menu__cs{grid-template-rows:none}
  .menu__col:not(.menu__col--cases) .menu__cs::before{display:none}
  .menu__col:not(.menu__col--cases) .menu__tile{aspect-ratio:16/11;height:auto}
  .menu__in .menu__more{display:block}   /* mobile header hides About/Resume/Contact, so surface them here (.menu__in raises specificity above the base display:none that follows) */
  /* prominent, unmissable About / Resume / Contact on mobile */
  .menu__list{margin:0}
  .menu__list a{font-size:15px;letter-spacing:.14em;line-height:2.2;border-bottom:1px solid rgba(255,255,255,.08);padding:3px 0}
  .menu__list li:last-child a{border-bottom:0}
}
.menu__grp{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin:0 0 13px}
.menu__cs{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.menu__tile{position:relative;aspect-ratio:16/11;border-radius:9px;overflow:hidden;text-decoration:none;color:#F1F0EB}
/* Case Studies = priority: stacked, big tiles on the left; Selected Work grid beside them */
.menu__col{display:flex;flex-direction:column;min-height:0}
.menu__col--cases .menu__cs{grid-template-columns:1fr;gap:12px}
.menu__col--cases .menu__tile{aspect-ratio:16/9}
.menu__col--cases .menu__tile span{font-size:13px;left:12px;bottom:10px}
/* Selected Work grid fills the same height as the stacked case studies */
.menu__col:not(.menu__col--cases) .menu__cs{flex:1;grid-template-rows:1fr 1fr}
.menu__col:not(.menu__col--cases) .menu__tile{aspect-ratio:auto;height:100%}
.menu__col:not(.menu__col--cases) .menu__tile span{font-size:13px;left:12px;bottom:10px}
/* divider between Case Studies and Selected Work — spans the stacked-thumbs height, palette-tinted */
.menu__col:not(.menu__col--cases) .menu__cs{position:relative}
.menu__col:not(.menu__col--cases) .menu__cs::before{content:"";position:absolute;left:calc(-1 * clamp(10px,1.2vw,15px));top:0;bottom:0;width:2px;border-radius:2px;background:var(--mint);opacity:.4;pointer-events:none}
/* About/Resume/Contact are already in the top nav — drop "More" on desktop, keep only where the nav collapses (mobile) */
.menu__more{grid-column:1/-1;display:none}
.menu__tile img{width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(.95);transition:filter .4s,transform .5s cubic-bezier(.2,.8,.2,1)}
.menu__tile:hover img{filter:brightness(1) saturate(1.05);transform:scale(1.06)}
.menu__tile span{position:absolute;left:11px;bottom:9px;z-index:2;font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:13px}
.menu__tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,13,14,.82))}
.menu__list{list-style:none;margin:0 0 20px;padding:0}
.menu__list:last-child{margin-bottom:0}
.menu__list li{margin:0}
.menu__list a{display:block;text-decoration:none;font-family:var(--sans);font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;line-height:2.3;color:#F1F0EB;transition:color .18s,transform .18s}
.menu__list a:hover{color:var(--mint);transform:translateX(5px)}
.menu__sub a{font-size:15px;font-family:var(--sans);font-weight:600;letter-spacing:.02em;color:#c6cbca}
.menu__sub a:hover{color:var(--mint)}

/* ===== REEL HERO (pull-back) ===== */
.reelwrap{position:relative;height:230vh;background:var(--cream)}
.reelwrap--short{height:170vh}
.reel{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.reel__frame{position:relative;width:100vw;height:100svh;overflow:hidden;transform-origin:center center;will-change:transform,border-radius}
.reel__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05);animation:kb 18s ease-in-out infinite alternate;transition:opacity .38s ease}
/* Vimeo background video — covers the hero, fades in over the poster once playing */
.reel__vid{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100vw,177.78svh);height:max(56.25vw,100svh);border:0;pointer-events:none;opacity:0;transition:opacity .9s ease;z-index:0}
.reel__vid.on{opacity:1}
@keyframes kb{to{transform:scale(1.14) translateY(-2%)}}
.reel__frame::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,13,14,.82) 0%,rgba(8,13,14,.5) 7%,rgba(8,13,14,.12) 15%,transparent 26%),
    linear-gradient(90deg,rgba(8,13,14,.82) 0%,rgba(8,13,14,.55) 26%,rgba(8,13,14,.12) 48%,transparent 64%),
    linear-gradient(180deg,transparent 42%,rgba(8,13,14,.72) 84%,rgba(8,13,14,.92) 100%)}
.reel__meta{position:absolute;left:clamp(24px,5vw,60px);right:clamp(24px,5vw,60px);bottom:clamp(84px,13vh,140px);z-index:3;color:#F4F5F5;max-width:min(92vw,1000px)}
.reel__kick{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
/* Eyebrow cleanup — drop redundant section/hero/footer kicker labels; keep .keep ones (role/date hero kickers + count/context labels). work-intro__k (category counts) stays visible. */
.beat__k,.work__k,.finale__k,.reel__kick{display:none}
.work__k.keep{display:block}  /* hero role-date eyebrows (Associate CD / Senior Director) dropped — they duplicate the livrole line below the hero */
.reel__t{font-weight:500;letter-spacing:-.02em;line-height:1.02;font-size:clamp(30px,4.6vw,66px);margin:0;max-width:20ch;text-shadow:0 2px 30px rgba(0,0,0,.4)}
.reel__t em{font-style:italic;color:var(--pop)}
.reel__now{margin-top:clamp(18px,2.4vw,26px);font-family:var(--sans);font-size:clamp(13.5px,1.35vw,17px);letter-spacing:.02em;color:#D6DAD9;display:flex;align-items:center;gap:12px;transition:opacity .38s ease}
.reel__now span{font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:11.5px;color:var(--mint)}
body.pal-noir .reel__now span{font-size:clamp(11.5px,1vw,13px)}
.reel__now b{font-weight:500}
.rail{position:absolute;right:clamp(24px,5vw,60px);bottom:clamp(90px,14vh,150px);z-index:3;display:flex;gap:8px}
.rail b{display:block;width:64px;height:40px;border-radius:6px;overflow:hidden;outline:1.5px solid rgba(255,255,255,.25);cursor:pointer;transition:outline-color .25s,transform .25s}
.rail b.on{outline-color:#fff}
.rail b:hover{transform:translateY(-2px)}
.rail img{width:100%;height:100%;object-fit:cover}
/* sound toggle on the featured reel */
.reel__sound{position:absolute;right:clamp(20px,5vw,60px);bottom:clamp(28px,4.6vh,62px);z-index:4;display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#F4F5F5;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:100px;padding:8px 13px;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .2s,border-color .2s,color .2s}
.reel__sound:hover{background:rgba(255,255,255,.22)}
.reel__sound.is-live{background:var(--pop);border-color:var(--pop);color:#fff}
.reel__sound svg{display:block}
.reel__sound-wave{opacity:.45;transition:opacity .2s}
.reel__sound.is-live .reel__sound-wave{opacity:1}
@media(max-width:680px){
  /* rail becomes a vertical filmstrip pinned to the right edge */
  .rail{flex-direction:column;right:10px;left:auto;bottom:auto;top:50%;transform:translateY(-50%);gap:6px}
  .rail b{width:52px;height:33px}
  .reel__sound{bottom:clamp(18px,3.5vh,34px);right:12px}
}
@media(max-width:600px){
  /* shorter hero pull-back so pages aren't so long on phones
     (paired with a faster pull-back in JS so the frame still fully rounds) */
  .reelwrap{height:155vh}
  .reelwrap--short{height:140vh}
  .reel__kick{white-space:normal!important;letter-spacing:.16em;line-height:1.5;margin-bottom:11px}
  .reel__t{font-size:clamp(32px,8.4vw,46px);max-width:100%}
  .reel__meta{left:22px;right:22px;bottom:clamp(60px,10vh,104px)}
  .reel__logo--show{height:clamp(50px,15vw,80px)}
  .reel__logo--hbo{width:clamp(72px,20vw,104px)}
  /* tighter vertical rhythm on phones */
  .livpage .beat{padding-top:clamp(18px,4.5vh,40px);padding-bottom:clamp(18px,4.5vh,40px)}
  .hbosub .cat{padding-top:clamp(14px,2.6vh,24px);padding-bottom:clamp(14px,2.6vh,24px)}
  .hbosub .cat .gal__lede{margin-bottom:14px}
  .work{padding-bottom:clamp(24px,5vh,48px)}
}

/* ===== EDITORIAL BEATS ===== */
.beats{position:relative;padding:clamp(60px,12vh,120px) 0}
.dots::before,.beats::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1' fill='%231E1A16' fill-opacity='.14'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.beat{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:clamp(60px,14vh,150px) var(--pad)}
.beat__k{font-family:var(--sans);font-size:14px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-bottom:20px}
.beat__h{font-weight:500;letter-spacing:-.02em;line-height:1.0;font-size:clamp(40px,7.5vw,104px);margin:0}
.beat__h em{font-style:italic;color:var(--pop)}
.beat--big .beat__h{font-family:var(--sans);font-weight:800;letter-spacing:-.02em;line-height:.92;text-transform:uppercase;font-size:clamp(52px,12vw,168px)}
.beat--big .brk{display:inline-block;position:relative}
/* "scale." grows in, overshoots slightly, then settles to its resting size — driven by scroll
   position via a CSS scroll timeline (no JS; reliable, compositor-driven). */
.beat--still{view-timeline:--scaleT block}
.beat--still .brk{transform-origin:left top}
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .beat--still .brk{animation:scaleGrow linear both;animation-timeline:--scaleT;animation-range:entry 20% cover 62%}
  }
}
@keyframes scaleGrow{
  from{transform:scale(.5)}
  70%{transform:scale(1.1)}    /* overshoot past the resting size */
  to{transform:scale(1)}       /* resolve at final height */
}
.beat--big .brk::before,.beat--big .brk::after{content:"";position:absolute;width:18px;height:18px;border:3px solid var(--mint)}
.beat--big .brk::before{left:-16px;top:0.12em;border-right:0;border-bottom:0}
.beat--big .brk::after{right:-16px;bottom:-6px;border-left:0;border-top:0}
.beat--big .hl{color:var(--green)}
/* full-bleed still behind the CREATIVE LEADERSHIP beat */
.beat--still{max-width:none;width:100%;margin:0;position:relative;overflow:hidden;min-height:min(90vh,920px);display:grid;align-items:center;padding:clamp(70px,16vh,180px) 0}
.beat__still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transform:scale(1.06);animation:kb 22s ease-in-out infinite alternate}
.beat--still::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(8,13,14,.74),rgba(8,13,14,.5) 45%,rgba(8,13,14,.86))}
.beat--still .beat__h{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:0 var(--pad);color:var(--cream)}
.beat--still .hl{color:var(--mint)}
.beat--still .brk::before,.beat--still .brk::after{display:none}  /* no viewfinder frame on the scaling word */
.beat p{font-size:clamp(18px,1.7vw,22px);line-height:1.55;color:var(--muted);max-width:52ch;margin:22px 0 0}
.lead{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,50px);line-height:1.24;letter-spacing:-.012em;max-width:22ch;margin:0}
.lead em{font-style:italic;color:var(--pop)}
.beats .proc-cap{text-align:center;max-width:min(760px,90vw);margin:clamp(36px,5vw,66px) auto 0;font-family:var(--serif);font-weight:400;font-size:clamp(23px,2.9vw,38px);line-height:1.3;letter-spacing:-.008em;color:var(--ink)}
.proc-cap em{font-style:italic;color:inherit;font-family:var(--serif)}
/* real handwritten signature (Ed's actual ink, bold marker weight) — soft left-to-right ink
   reveal when the quote scrolls into view. Reduced-motion shows it complete. */
.proc-cap cite{display:block;width:fit-content;margin:clamp(22px,2.8vw,40px) auto 0;font-style:normal}
.proc-cap cite .sig-img{display:block;height:clamp(52px,6vw,74px);width:auto;clip-path:inset(0 100% 0 0)}
.proc-cap.in cite .sig-img{animation:sigWrite 1.9s cubic-bezier(.5,.04,.5,1) .35s forwards}
@keyframes sigWrite{to{clip-path:inset(0 -1% 0 0)}}
@media(prefers-reduced-motion:reduce){.proc-cap cite .sig-img{clip-path:none;animation:none}}

/* scope / stat strip */
.scope{max-width:1200px;margin:0 auto;padding:clamp(24px,4vw,44px) var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px);border-top:1px solid rgba(26,34,35,.14)}
@media(max-width:760px){.scope{grid-template-columns:1fr 1fr;gap:22px}}
.scope__col{padding-left:clamp(18px,2.4vw,32px);border-left:1px solid rgba(26,34,35,.12)}
.scope__col:first-child,.scope__col:nth-child(3){border-left:0;padding-left:0}
@media(min-width:761px){.scope__col:nth-child(3){border-left:1px solid rgba(26,34,35,.12);padding-left:clamp(18px,2.4vw,32px)}}
.scope__v{font-family:var(--sans);font-size:clamp(12px,1vw,14px);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--green);line-height:1.35}
.scope__l{margin-top:8px;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* work still / video block for case studies */
.still{position:relative;max-width:1200px;margin:clamp(30px,6vh,70px) auto;padding:0 var(--pad)}
.still__frame{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(8,13,14,.55)}
.still__frame img{width:100%;height:100%;object-fit:cover}
.still__cap{margin-top:14px;font-family:var(--sans);font-size:12px;letter-spacing:.04em;color:var(--muted)}
.still__cap b{color:var(--ink);font-weight:700}

/* card grid (selected work) */
.grid3{max-width:1200px;margin:0 auto;padding:0 var(--pad) clamp(40px,8vh,90px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
.card{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;text-decoration:none;color:#F4F5F5;background:#141b1c}
/* touch devices have no viewfinder cursor — show a play badge on playable video tiles.
   Use ::before only (::after is the caption gradient) with the triangle baked into an SVG. */
@media(hover:none){
  .card[data-vid]::before{content:"";position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:3;width:50px;height:50px;border-radius:50%;border:1.6px solid rgba(255,255,255,.85);background:rgba(10,13,14,.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/18px no-repeat;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
}
.card img{width:100%;height:100%;object-fit:cover;filter:brightness(.82);transition:filter .35s,transform .5s cubic-bezier(.2,.8,.2,1)}
.card:hover img{filter:brightness(1);transform:scale(1.05)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,13,14,.85))}
/* hover-to-play preview (desktop): muted looping clip fills the tile on hover */
.card__preview{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s ease;pointer-events:none;background:transparent;clip-path:inset(0 round 10px)}
.tikcard .card__preview{clip-path:inset(0 round 12px)}
.is-previewing .card__preview{opacity:1}
.is-previewing img{filter:brightness(1)!important}
.card__cap{position:absolute;left:16px;bottom:14px;z-index:2;transition:opacity .3s ease}
/* fade the caption + scrim away on hover so the preview clip reads clean (desktop) */
@media(hover:hover){
  .card[data-vid]:hover .card__cap,.card[data-preview]:hover .card__cap,
  .tikcard[data-vid]:hover .tikcard__cap,.tikcard[data-formats]:hover .tikcard__cap{opacity:0}
  .card[data-vid]:hover::after,.card[data-preview]:hover::after{opacity:.35}
}
.card::after{transition:opacity .3s ease}
.tikcard__cap{transition:opacity .3s ease}
.card__t{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:18px}
.card__n{font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mint);margin-top:4px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.pal-cobalt .card__n{color:#8FBEEC}
.card__t{text-shadow:0 1px 10px rgba(0,0,0,.5)}

/* ===== SELECTED WORK (home grid) — playful editorial tile wall ===== */
.work{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(10px,3vh,40px) var(--pad) clamp(54px,11vh,120px)}
.work__head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px 40px;flex-wrap:wrap;margin-bottom:clamp(26px,4.5vw,54px);padding-top:clamp(22px,3vw,40px);border-top:1px solid var(--b-line)}
.work__k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-bottom:13px}
.work__h{font-weight:500;letter-spacing:-.02em;line-height:.98;font-size:clamp(32px,5vw,72px);margin:0}
.work__h em{font-style:italic;color:var(--pop)}
.work__all{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:none;border:0;cursor:pointer;padding:6px 0;display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.work__all::after{content:"→";transition:transform .25s}
.work__all:hover::after{transform:translateX(6px)}
.work__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:900px){.work__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.work__grid{grid-template-columns:1fr}}
/* editorial rhythm: nudge the middle column down so rows don't lock into a rigid grid */
@media(min-width:901px){.work__grid>*:nth-child(3n+2){margin-top:clamp(22px,3.6vw,52px)}}

/* ticker */
.ticker{position:relative;z-index:1;background:var(--sea);padding:clamp(32px,5.5vh,60px) 0 clamp(30px,4.5vh,48px);overflow:hidden}
.ticker__lead{text-align:center;font-family:var(--sans);font-size:clamp(14px,1.5vw,20px);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:clamp(24px,3.4vh,40px)}
.ticker__track{display:flex;width:max-content;gap:clamp(46px,6vw,90px);align-items:center;animation:slide 42s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
.ticker__track img{height:clamp(28px,3.6vw,44px);width:auto;object-fit:contain;filter:brightness(0) invert(1);opacity:.85;transition:opacity .3s}
.ticker__track img:hover{opacity:1}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===== GREEN FINALE ===== */
.finale{position:relative;background:var(--green);color:var(--cream);padding:clamp(52px,9vh,96px) var(--pad) clamp(22px,3.5vh,38px);overflow:hidden}
.finale--next{background:var(--green)}
.finale__lead{max-width:1100px;margin:0 auto}
.finale__k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--mint)}
.finale__h{font-weight:500;letter-spacing:-.02em;line-height:1.0;font-size:clamp(38px,6vw,88px);margin:16px 0 0}
.finale__h em{font-style:italic;color:var(--pop)}
.finale__cta{display:inline-flex;margin-top:30px;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green);background:var(--cream);padding:16px 26px;border-radius:100px;text-decoration:none}
.finale__mark{display:flex;width:max-content;white-space:nowrap;font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.82;font-size:clamp(60px,17vw,260px);color:var(--cream);opacity:.2;margin-top:clamp(24px,4.5vh,52px);pointer-events:none;animation:markslide 60s linear infinite}
.finale__mark span{display:inline-block;padding-right:.5em}
/* second wordmark line — smaller, scrolls the opposite way */
.finale__mark--sub{font-size:clamp(13px,2.4vw,34px);letter-spacing:.04em;margin-top:clamp(2px,0.5vw,8px);color:var(--cream);opacity:.16;animation-duration:52s;animation-direction:reverse}
@keyframes markslide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.finale__mark{animation:none}}
.finale__foot{max-width:1100px;margin:clamp(20px,3vh,32px) auto 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,247,247,.74)}
.finale__foot a{text-decoration:none;color:inherit}
.finale__foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.finale__nav{display:flex;gap:clamp(16px,2vw,28px);flex-wrap:wrap}
/* footer links inherit the finale's own (contrast-checked) text colour — cream on green / ink on noir.
   (was var(--pop): 2.39:1 on --green, failed WCAG AA.) */
.finale__nav a{font-size:15px;font-weight:700;color:inherit;text-underline-offset:4px}
/* hover: brighten to full white + underline — a genuinely contrasty state on every palette's dark
   footer (var(--mint) was near-invisible on the cobalt blue background). */
.finale__nav a:hover{color:#fff;text-decoration:underline}
.finale__social{display:flex;align-items:center;gap:18px}
.finale__social a{display:inline-flex;color:inherit;transition:opacity .2s,color .2s}
.finale__social a:hover{color:#fff}
.finale__social svg{width:22px;height:22px;fill:currentColor;display:block}
/* mobile: stack the footer and send the © line to the very bottom (links + social above it) */
@media(max-width:560px){
  .finale__foot{flex-direction:column;align-items:flex-start;gap:16px}
  .finale__nav{order:1}
  .finale__social{order:2}
  .finale__foot>span{order:3}
}

/* page hero for editorial pages (about/resume/contact) */
.phero{position:relative;padding:clamp(120px,20vh,220px) var(--pad) clamp(40px,7vh,80px);max-width:1200px;margin:0 auto}
.phero__k{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--green);margin-bottom:18px}
.phero__h{font-weight:500;letter-spacing:-.02em;line-height:1.0;font-size:clamp(46px,8vw,110px);margin:0}
.phero__h em{font-style:italic;color:var(--green)}

/* reveals + word build */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
[data-reveal].in{opacity:1;transform:none}
.w{display:inline-block;opacity:.1;transform:translateY(.22em);will-change:opacity,transform;transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.w.lit{opacity:1;transform:none}

/* ===== viewfinder cursor ===== */
@media(hover:hover){body{cursor:none}}
.retic{position:fixed;left:0;top:0;width:32px;height:32px;z-index:200;pointer-events:none;transform:translate(-999px,-999px);transition:width .28s cubic-bezier(.2,.8,.2,1),height .28s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(1px 0 0 rgba(0,0,0,.92)) drop-shadow(-1px 0 0 rgba(0,0,0,.92)) drop-shadow(0 1px 0 rgba(0,0,0,.92)) drop-shadow(0 -1px 0 rgba(0,0,0,.92))}
.retic__c{position:absolute;width:14px;height:14px;border:2px solid #fff}
.retic__c.tl{left:-2px;top:-2px;border-right:0;border-bottom:0}
.retic__c.tr{right:-2px;top:-2px;border-left:0;border-bottom:0}
.retic__c.bl{left:-2px;bottom:-2px;border-right:0;border-top:0}
.retic__c.br{right:-2px;bottom:-2px;border-left:0;border-top:0}
.retic__dot{position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:opacity .2s}
.retic.is-framing .retic__dot{opacity:0}
.retic.is-framing .retic__c{width:24px;height:24px}
/* "Play" label above the viewfinder when framing a playable video */
.retic__play{position:absolute;left:50%;top:-24px;transform:translateX(-50%);font-family:var(--sans);font-size:10.5px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;transition:opacity .16s ease}
.retic.can-play .retic__play{opacity:1}
@media(hover:none){.retic{display:none}body{cursor:auto}}
/* Keyboard focus ring — visible for keyboard users only (:focus-visible), on any background.
   Pairs with the cursor:none viewfinder so tabbing is never invisible. Light ring on dark
   contexts (hero/finale/menu/noir), accent ring on the cream editorial body. */
:focus-visible{outline:3px solid var(--pop);outline-offset:2px;border-radius:3px}
.reel :focus-visible,.finale :focus-visible,.menu :focus-visible,.lightbox :focus-visible,.pal-noir :focus-visible{outline-color:#F4F5F5}
/* skip-to-content link — off-screen until keyboard-focused */
.skip{position:fixed;top:10px;left:10px;z-index:9999;background:var(--ink);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;padding:11px 17px;border-radius:8px;text-decoration:none;transform:translateY(-160%);transition:transform .2s ease}
.skip:focus{transform:none;outline:3px solid #F4F5F5;outline-offset:2px}
/* touch: guarantee ≥44px hit areas on the footer controls (visual size unchanged) */
@media(hover:none){
  .finale__social a{min-width:44px;min-height:44px;align-items:center;justify-content:center}
  .finale__nav a{padding:7px 3px}
}

/* ===== production pipeline (animated timeline) ===== */
.proc{padding-top:clamp(20px,3vw,40px);margin-top:clamp(28px,4vw,52px)}
.proc__row{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;max-width:920px;margin:0 auto}
.proc__track{position:absolute;left:clamp(24px,3.4vw,34px);right:clamp(24px,3.4vw,34px);top:clamp(24px,3.4vw,34px);height:2px;background:var(--b-line);z-index:0}
.proc__fill{position:absolute;left:0;top:0;height:100%;width:0;background:var(--b-green);transition:width 3s linear}
.proc.go .proc__fill{width:100%}
.proc__head{position:absolute;right:0;top:50%;width:11px;height:11px;border-radius:50%;background:var(--b-green);transform:translate(50%,-50%);box-shadow:0 0 0 5px rgba(65,115,118,.16);opacity:0;transition:opacity .3s}
.proc.go .proc__head{opacity:1}
.proc__node{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;flex:1 1 0;min-width:0;text-align:center}
.proc__ring{width:clamp(48px,6.6vw,68px);height:clamp(48px,6.6vw,68px);border-radius:50%;background:var(--b-bg);border:1.5px solid var(--b-line);display:grid;place-items:center;color:var(--b-faint);transition:color .45s ease,border-color .45s ease,background .45s ease,transform .45s ease}
.proc__ring svg{width:46%;height:46%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.proc__lbl{font-size:clamp(10px,1.1vw,12px);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--b-mut);transition:color .45s ease;font-family:var(--b-sans)}
.proc.go .proc__node:nth-child(2) .proc__ring{transition-delay:0s}
.proc.go .proc__node:nth-child(3) .proc__ring{transition-delay:.75s}
.proc.go .proc__node:nth-child(4) .proc__ring{transition-delay:1.5s}
.proc.go .proc__node:nth-child(5) .proc__ring{transition-delay:2.25s}
.proc.go .proc__node:nth-child(6) .proc__ring{transition-delay:3s}
.proc.go .proc__node:nth-child(2) .proc__lbl{transition-delay:0s}
.proc.go .proc__node:nth-child(3) .proc__lbl{transition-delay:.75s}
.proc.go .proc__node:nth-child(4) .proc__lbl{transition-delay:1.5s}
.proc.go .proc__node:nth-child(5) .proc__lbl{transition-delay:2.25s}
.proc.go .proc__node:nth-child(6) .proc__lbl{transition-delay:3s}
.proc.go .proc__ring{color:var(--b-green);border-color:var(--b-green);background:#fff;transform:translateY(-2px)}
.proc.go .proc__lbl{color:var(--b-ink)}
.ic-glow{fill:currentColor;stroke:none;opacity:0;transform-box:view-box;transform-origin:12px 10.5px}
.ic-rays{opacity:0;transform-box:view-box;transform-origin:12px 7px}
.ic-clap-top{transform-box:view-box;transform-origin:2.6px 8px}
.ic-box path{stroke-dasharray:1;stroke-dashoffset:1}
.ic-sc-top,.ic-sc-bot{transform-box:view-box;transform-origin:9px 12px}
.proc.go .ic-glow{animation:bulbGlow .8s ease both;animation-delay:.05s}
.proc.go .ic-rays{animation:rayPop .6s ease both;animation-delay:.14s}
.proc.go .ic-clap-top{animation:clap .8s cubic-bezier(.3,1.3,.5,1) both;animation-delay:.75s}
.proc.go .ic-box path:nth-child(1){animation:boxDraw .5s ease forwards;animation-delay:1.5s}
.proc.go .ic-box path:nth-child(2){animation:boxDraw .5s ease forwards;animation-delay:1.64s}
.proc.go .ic-box path:nth-child(3){animation:boxDraw .45s ease forwards;animation-delay:1.78s}
.proc.go .ic-sc-top{animation:snipTop .9s ease both;animation-delay:2.25s}
.proc.go .ic-sc-bot{animation:snipBot .9s ease both;animation-delay:2.25s}
.proc.go .ic-plane{animation:fly 4.2s linear both;animation-delay:3s}
@keyframes bulbGlow{0%{opacity:0;transform:scale(.5)}45%{opacity:.95}100%{opacity:.62;transform:scale(1)}}
@keyframes rayPop{0%{opacity:0;transform:scale(.35)}40%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
@keyframes clap{0%{transform:rotate(-20deg)}45%{transform:rotate(-20deg)}70%{transform:rotate(0)}82%{transform:rotate(-4deg)}100%{transform:rotate(0)}}
@keyframes boxDraw{to{stroke-dashoffset:0}}
@keyframes snipTop{0%,12%{transform:rotate(0)}30%{transform:rotate(12deg)}48%{transform:rotate(0)}66%{transform:rotate(12deg)}84%,100%{transform:rotate(0)}}
@keyframes snipBot{0%,12%{transform:rotate(0)}30%{transform:rotate(-12deg)}48%{transform:rotate(0)}66%{transform:rotate(-12deg)}84%,100%{transform:rotate(0)}}
@keyframes fly{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}12%{transform:translate(96px,-82px) rotate(-18deg) scale(.92);opacity:1}26%{transform:translate(190px,-134px) rotate(-12deg) scale(.80);opacity:1}40%{transform:translate(268px,-154px) rotate(-4deg) scale(.70);opacity:1}54%{transform:translate(330px,-150px) rotate(4deg) scale(.60);opacity:.97}64%{transform:translate(378px,-134px) rotate(10deg) scale(.52);opacity:.6}70%{transform:translate(410px,-120px) rotate(14deg) scale(.46);opacity:0}71%,86%{transform:translate(0,0) rotate(0) scale(1);opacity:0}100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}
@media(max-width:640px){.proc__row{gap:2px}.proc__ring{width:42px;height:42px}.proc__track{left:21px;right:21px;top:21px}.proc__lbl{font-size:8.5px;letter-spacing:.04em}.proc.go .ic-plane{animation-name:flySm}}
@keyframes flySm{0%{transform:translate(0,0) rotate(0) scale(1);opacity:1}12%{transform:translate(50px,-44px) rotate(-17deg) scale(.90);opacity:1}26%{transform:translate(98px,-72px) rotate(-11deg) scale(.78);opacity:1}40%{transform:translate(138px,-82px) rotate(-4deg) scale(.68);opacity:1}54%{transform:translate(170px,-80px) rotate(4deg) scale(.58);opacity:.97}64%{transform:translate(194px,-70px) rotate(10deg) scale(.50);opacity:.6}70%{transform:translate(210px,-62px) rotate(14deg) scale(.44);opacity:0}71%,86%{transform:translate(0,0) rotate(0) scale(1);opacity:0}100%{transform:translate(0,0) rotate(0) scale(1);opacity:1}}

@media(prefers-reduced-motion:reduce){
  .reel__frame{transform:scale(.9)!important;border-radius:24px!important}
  .reel__bg,.beat__still,.ticker__track,.finale__mark{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  .w{opacity:1;transform:none}
  body{animation:none;cursor:auto!important}
  .retic{display:none}
  .proc__ring svg *{animation:none!important}
  .reel__frame::before,.beat--still::before{display:none}
}

/* ===== MOTION / PIZAZZ additions ===== */
/* live-nav "Work" link (index.html#lead) lands on the ticker without the fixed nav overlapping */
#lead{scroll-margin-top:88px}

/* Cinematic film-grain over the dark hero + the CREATIVE LEADERSHIP still — static, cheap
   (one paint; no per-frame animation). Subtle texture that reinforces the film feel. */
.reel__frame::before,.beat--still::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.05;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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:150px 150px}

/* Selected Work tiles: movement TIED TO SCROLL (scroll-driven), not a one-shot reveal —
   each tile rises/settles by its own scroll progress, and scrolling always moves them (both ways).
   Per-column range offsets create the left→middle→right cascade. Falls back to static (visible)
   where scroll-timelines aren't supported. */
@media(prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .work__grid .card,.tik .tikcard{animation:tileRise linear both;animation-timeline:view();animation-range:entry 0% entry 82%}
    .work__grid .card:nth-child(3n+2){animation-range:entry 10% entry 92%}
    .work__grid .card:nth-child(3n){animation-range:entry 20% entry 100%}
  }
}
@keyframes tileRise{
  from{opacity:0;transform:translateY(96px) scale(.9)}
  to{opacity:1;transform:none}
}

/* ===== Video lightbox (Selected Work tiles) ===== */
.lightbox{position:fixed;inset:0;z-index:9800;display:grid;place-items:center;padding:clamp(16px,4vw,64px);background:rgba(5,8,7,.92);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
.lightbox.open{opacity:1;visibility:visible}
.lightbox__frame{position:relative;width:min(1100px,92vw);aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000;box-shadow:0 50px 130px -40px rgba(0,0,0,.85);transform:scale(.955);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lightbox.open .lightbox__frame{transform:none}
.lightbox__vid,.lightbox__vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lightbox__x{position:absolute;top:clamp(14px,3vw,32px);right:clamp(14px,3vw,32px);z-index:2;width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);background:rgba(0,0,0,.35);color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .2s,transform .2s}
.lightbox__x:hover{background:rgba(255,255,255,.16);transform:scale(1.06)}

/* ===== LIV CASE STUDY ===== */
.reel__logo{display:block;width:clamp(120px,15vw,208px);height:auto;margin-bottom:clamp(14px,2vw,22px);filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
.reel__logo--hbo{width:clamp(84px,10vw,132px)}
.reel__logo--show{width:auto;height:auto;max-width:min(86vw,620px);max-height:clamp(64px,10vw,132px);object-fit:contain;object-position:left center;margin-bottom:clamp(14px,2vw,22px)}
.reel__logo--invert{filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(0,0,0,.6))}
.showback{display:inline-flex;align-items:center;gap:8px;width:max-content;margin-bottom:clamp(14px,2vw,22px);font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,245,245,.82);text-decoration:none;text-shadow:0 2px 18px rgba(0,0,0,.55);transition:color .2s,transform .2s}
.showback::before{content:"←";font-size:14px;line-height:1;color:var(--mint)}
.showback:hover{color:#fff;transform:translateX(-3px)}

/* HBO sub-pages — bigger, bolder, grouped by sub-category */
.hbosub .cat .work__grid{grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,36px)}
.hbosub .cat .work__grid>*:nth-child(3n+2){margin-top:0}
.hbosub .cat .work__grid--feature{grid-template-columns:1fr}
@media(max-width:720px){.hbosub .cat .work__grid{grid-template-columns:1fr}}
.hbosub .cat .work__h{font-size:clamp(30px,4.4vw,62px)}
.hbosub .cat .card__t{font-size:clamp(17px,1.5vw,21px)}
.hbosub .gal__lede{font-size:clamp(18px,1.9vw,26px);line-height:1.5;color:var(--muted)}
.hbosub .cat .gal__lede{max-width:64ch;margin-top:-4px;margin-bottom:clamp(22px,2.8vw,34px)}
.hbosub .cat{padding-top:clamp(20px,3vh,40px);padding-bottom:clamp(20px,3vh,40px)}
.beat__d{max-width:56ch;margin:22px 0 0;font-family:var(--sans);font-size:clamp(15px,1.4vw,18px);line-height:1.6;color:var(--muted)}
.livintro{max-width:1240px;margin:0 auto;padding:clamp(30px,6vh,68px) var(--pad) clamp(16px,3vh,34px)}
.livrole{font-family:var(--sans);font-size:clamp(13px,1.3vw,16px);color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.livrole b{color:var(--ink);font-weight:800}
.livrole a{color:var(--green);text-decoration:none;border-bottom:1px solid rgba(0,0,0,.18)}
.livrole__dot{opacity:.4}
.livstats{margin-top:clamp(26px,4vw,46px);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);border-top:1px solid var(--b-line);padding-top:clamp(24px,3vw,40px)}
@media(max-width:680px){.livstats{grid-template-columns:1fr 1fr;gap:28px}}
.livstat__v{font-family:var(--serif);font-weight:400;font-size:clamp(42px,6vw,84px);line-height:.95;letter-spacing:-.02em;color:var(--green);white-space:nowrap}
/* HBO stats: uniform size, content-width, clustered closer (fits the year range) */
.pal-noir .livstats{display:flex;flex-wrap:wrap;gap:clamp(26px,4.6vw,74px)}
.livstat__v small{font-size:.42em;vertical-align:super;color:var(--pop)}
.livstat__k{margin-top:12px;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);max-width:18ch}
.livstats__note{margin-top:clamp(14px,2vw,22px);font-family:var(--sans);font-size:clamp(14.5px,1.2vw,16.5px);line-height:1.55;color:var(--b-mut);max-width:none;letter-spacing:.01em}

.pillars{max-width:1240px;margin:0 auto;padding:0 var(--pad) clamp(30px,6vh,70px);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.6vw,44px)}
@media(max-width:820px){.pillars{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pillars{grid-template-columns:1fr}}
/* What I Do — capability grid with per-card collapsible copy */
.pillar{border-top:2px solid var(--green);padding-top:18px}
.pillar__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.pillar__ico{display:block;width:30px;height:30px;color:var(--b-green);flex:none}
.pillar__ico svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pillar__n{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--pop)}
.pillar__head{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;background:none;border:0;cursor:pointer;text-align:left;padding:0;font-family:inherit;color:inherit}
.pillar__t{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.9vw,27px);color:var(--sea);line-height:1.1;transition:color .2s}
.pillar__head:hover .pillar__t{color:var(--b-green)}
.pillar__tog{position:relative;width:24px;height:24px;flex:none;margin-top:3px}
.pillar__tog::before,.pillar__tog::after{content:"";position:absolute;background:var(--b-green);border-radius:2px;transition:transform .3s cubic-bezier(.2,.7,.2,1),opacity .25s}
.pillar__tog::before{left:3px;right:3px;top:11px;height:2px}
.pillar__tog::after{top:3px;bottom:3px;left:11px;width:2px}
.pillar.is-open .pillar__tog::after{opacity:0;transform:scaleY(0)}
.pillar__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.7,.2,1)}
.pillar.is-open .pillar__panel{grid-template-rows:1fr}
.pillar__panelin{overflow:hidden;min-height:0}
.pillar__d{margin:11px 0 0;font-family:var(--sans);font-size:clamp(17px,1.25vw,18.5px);line-height:1.6;color:var(--b-mut);max-width:44ch}
@media(prefers-reduced-motion:reduce){.pillar__panel,.pillar__tog::before,.pillar__tog::after{transition:none}}

.catintro{padding-bottom:0}
.catintro .work__head{border-top:0}
.cat{padding-top:clamp(18px,2.6vh,30px);padding-bottom:clamp(18px,2.6vh,30px)}
.cat .work__head{margin-bottom:clamp(20px,3vw,32px)}
.cat .work__h{font-size:clamp(26px,3.6vw,52px)}

/* LIV — tighter vertical rhythm between sections (scoped to this page) */
.livpage .livintro{padding-top:clamp(20px,4vh,44px);padding-bottom:clamp(10px,2vh,22px)}
.livpage .livstats{margin-top:clamp(20px,3vw,36px);padding-top:clamp(18px,2.4vw,30px)}
.livpage .beats{padding:clamp(22px,4.5vh,52px) 0}
.livpage .beat{padding:clamp(22px,4.5vh,58px) var(--pad)}
.livpage .pillars{padding-bottom:clamp(14px,2.6vh,32px)}
.livpage .work{padding-bottom:clamp(26px,5.5vh,60px)}
.livpage .catintro{padding-top:clamp(6px,1.5vh,18px)}
.livpage .cat{padding-top:clamp(12px,1.8vh,22px);padding-bottom:clamp(12px,1.8vh,22px)}
.livpage .cat .work__head{margin-bottom:clamp(13px,2vw,22px)}
.livpage .plogos{padding-top:clamp(22px,4vh,46px);padding-bottom:clamp(26px,5vh,54px)}
.livpage .finale{padding-top:clamp(32px,5.5vh,60px)}

/* Work grid — category filter chips */
.chips{max-width:1240px;margin:0 auto clamp(18px,2.6vw,30px);padding:0 var(--pad);display:flex;flex-wrap:wrap;gap:9px}
.chip{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:9px 15px;border-radius:100px;border:1px solid var(--b-line);background:transparent;color:var(--b-mut);cursor:pointer;transition:background .18s,color .18s,border-color .18s}
.chip:hover{border-color:var(--b-green);color:var(--b-green)}
.chip.is-on{background:var(--b-green);border-color:var(--b-green);color:#fff}
.selwork .card.is-hidden{display:none}
.gal__lede{max-width:1240px;margin:0 auto;padding:0 var(--pad) clamp(20px,3vw,34px);color:var(--muted);font-family:var(--serif);font-size:clamp(16px,1.5vw,21px);line-height:1.5}
.gal__lede{max-width:min(1240px,100%)}
.gal__lede span,.gal__lede{display:block}

/* ===== About / Contact — content pages on the proto system ===== */
.abwrap{max-width:1180px;margin:0 auto;padding:clamp(96px,15vh,164px) var(--pad) 0}
.abhero{padding-bottom:clamp(24px,4vw,44px)}
.abh1{font-family:var(--serif);font-weight:500;font-size:clamp(38px,6vw,84px);line-height:1.03;letter-spacing:-.01em;color:var(--sea);max-width:24ch;margin:14px 0 0}
.abh1 em{font-style:italic;color:var(--pop)}
.absplit{display:grid;grid-template-columns:1.35fr .9fr;gap:clamp(32px,5vw,80px);align-items:start;padding-top:clamp(30px,4vw,56px);border-top:1px solid var(--b-line)}
@media(max-width:860px){.absplit{grid-template-columns:1fr;gap:clamp(34px,7vw,52px)}}
.abprose p{margin:0 0 1.15em;font-family:var(--serif);font-size:clamp(17px,1.4vw,19.5px);line-height:1.68;color:var(--ink)}
.abprose p:first-child{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.4vw,31px);line-height:1.34;color:var(--sea);margin-bottom:.7em}
.abprose strong{font-weight:700;color:var(--ink)}
.abprose p:first-child strong{font-weight:400;color:var(--green);font-style:italic}
.abbtns{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(26px,3vw,38px)}
.abbtn{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;text-decoration:none;border-radius:100px;transition:transform .2s,background .2s,color .2s,border-color .2s;display:inline-flex}
.abbtn--fill{background:var(--green);color:var(--cream)}.abbtn--fill:hover{transform:translateY(-2px)}
.abbtn--out{border:1.5px solid var(--b-line);color:var(--ink)}.abbtn--out:hover{border-color:var(--green);color:var(--green)}
.abside{position:sticky;top:92px}
@media(max-width:860px){.abside{position:static}}
.abportrait{position:relative}
.abportrait img{display:block;width:100%;height:auto;border-radius:6px;background:var(--b-bg)}
.ab-br{position:absolute;width:clamp(18px,2vw,26px);height:clamp(18px,2vw,26px);border:2px solid rgba(255,255,255,.92);z-index:2;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.ab-br--tl{top:12px;left:12px;border-right:0;border-bottom:0}
.ab-br--tr{top:12px;right:12px;border-left:0;border-bottom:0}
.ab-br--bl{bottom:12px;left:12px;border-right:0;border-top:0}
.ab-br--br{bottom:12px;right:12px;border-left:0;border-top:0}
.abfacts{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0}
.abfacts li{padding:0 0 clamp(16px,1.9vw,24px);border-top:0}
.abfacts li:last-child{padding-bottom:0}
.abfacts .k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--sea);margin-bottom:7px}
.abfacts .v{font-family:var(--serif);font-size:clamp(16.5px,1.25vw,19px);line-height:1.55;color:var(--ink)}
.abfacts .v a{color:var(--sea);text-decoration:none;border-bottom:1px solid var(--b-line)}
.abfacts .v a:hover{color:var(--green);border-color:var(--green)}
.abpage .finale{margin-top:clamp(50px,8vh,90px)}
/* contact-specific */
.ct-links{display:grid;gap:2px;margin-top:clamp(20px,3vw,34px)}
.ct-link{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:clamp(16px,2vw,22px) 0;border-top:1px solid var(--b-line);text-decoration:none;transition:padding-left .2s}
.ct-link:hover{padding-left:10px}
.ct-link .k{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--green)}
.ct-link .v{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);color:var(--sea)}
.ct-link:hover .v{color:var(--green)}

/* ===== Noir (dark) palette — structural fixes for dark pages (HBO) ===== */
.pal-noir .finale{background:#0E1113;color:var(--ink);border-top:1px solid rgba(255,255,255,.09)}
.pal-noir .finale__cta{background:var(--ink);color:#0C0D10}
.pal-noir .finale__cta--ghost{background:transparent;color:var(--ink);border-color:rgba(241,240,235,.4)}
.pal-noir .finale__cta--ghost:hover{border-color:var(--ink)}
.pal-noir .finale__mark,.pal-noir .finale__mark--sub{color:#F1F0EB}
.pal-noir .finale__foot{color:rgba(241,240,235,.64)}
.pal-noir .work__grid .card{box-shadow:0 0 0 1px rgba(255,255,255,.07)}
.pal-noir .chip{color:var(--muted)}

/* Archive — compact full-range table (CM-style) */
.archive{padding-top:clamp(18px,3.5vh,40px)}
.arch{max-width:1240px;margin:0 auto;border-top:1px solid var(--b-line)}
.arch__hd,.arch__row{display:grid;grid-template-columns:2.1fr 1.2fr 1.5fr;gap:clamp(14px,3vw,44px);align-items:center;padding:clamp(11px,1.5vw,16px) 6px;border-bottom:1px solid var(--b-line)}
.arch__hd{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--b-mut)}
.arch__row{text-decoration:none;color:inherit;position:relative;transition:background .18s,padding-left .18s}
a.arch__row{cursor:pointer}
a.arch__row::after{content:"▸";position:absolute;right:8px;top:50%;transform:translateY(-50%);color:var(--b-green);opacity:0;transition:opacity .18s,transform .18s}
a.arch__row:hover{background:rgba(9,76,36,.035);padding-left:14px}
a.arch__row:hover::after{opacity:1}
.arch__t{font-family:var(--serif);font-weight:400;font-size:clamp(17px,1.5vw,22px);color:var(--sea);line-height:1.15;transition:color .18s}
a.arch__row:hover .arch__t{color:var(--b-green)}
.arch__tag{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--b-green)}
.arch__note{font-family:var(--sans);font-size:13.5px;color:var(--b-mut)}
.arch__row--soon{opacity:.55}
.arch__row--soon .arch__note{font-style:italic}
@media(max-width:640px){.arch__hd{display:none}.arch__row{grid-template-columns:1fr auto;gap:4px 14px;padding:12px 6px}.arch__tag{grid-column:2;text-align:right}.arch__note{grid-column:1/-1;margin-top:2px}}

/* stub tiles (thumbnail to come) */
.card--stub{background:rgba(30,26,22,.045);border:1.5px dashed rgba(30,26,22,.22);display:grid;place-items:center;text-align:center}
.card--stub .card__stub{display:flex;flex-direction:column;align-items:center;gap:9px;padding:22px}
.card__tag{font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.card__soon{font-family:var(--sans);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);opacity:.7}
.card__t2{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:16px;color:var(--ink)}

/* partners */
.plogos{max-width:1240px;margin:0 auto;padding:clamp(34px,6vh,72px) var(--pad) clamp(40px,8vh,90px);border-top:1px solid var(--b-line)}
.plogos__sub{max-width:46ch;margin:8px 0 0;font-family:var(--sans);font-size:clamp(14px,1.2vw,16px);color:var(--muted)}
.plogos__row{margin-top:clamp(26px,4vw,48px);display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(22px,3vw,46px);align-items:center}
@media(max-width:760px){.plogos__row{grid-template-columns:repeat(4,1fr);gap:28px 22px}}
.plogos__row img{width:100%;height:auto;max-height:40px;object-fit:contain;filter:grayscale(1);opacity:.5;transition:filter .3s,opacity .3s}
.plogos__row img:hover{filter:none;opacity:1}

/* finale CTA pair */
.finale__ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.finale__cta--ghost{background:transparent;color:var(--cream);border:1.5px solid rgba(245,247,247,.42)}
.finale__cta--ghost:hover{border-color:var(--cream)}

/* lightbox — header + format tabs (dynamic frame sized by JS) */
.lightbox__inner{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.6vw,20px);max-width:94vw}
.lightbox__head{text-align:center;color:#fff}
.lightbox__title{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,32px);line-height:1.1}
.lightbox__stat{margin-top:6px;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mint)}
.lightbox__tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.lbtab{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:100px;padding:9px 15px;cursor:pointer;transition:color .2s,background .2s,border-color .2s}
.lbtab:hover{color:#fff;background:rgba(255,255,255,.16)}
.lbtab.on{color:#111;background:#fff;border-color:#fff}
/* lightbox "how & why" panel — project context under the video */
.lightbox{overflow-y:auto}
.lightbox__about{max-width:min(1080px,92vw);margin:0 auto;text-align:left;border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(13px,1.5vw,19px)}
.lightbox__desc{font-family:var(--sans);font-size:clamp(14px,1.15vw,16.5px);line-height:1.62;color:#D6DAD9;margin:0;max-width:74ch}

/* ===== Category shelves — horizontal, per-category browse ===== */
.shelves{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
.shelf{padding:clamp(28px,4.4vw,54px) 0;border-top:1px solid var(--b-line)}
.shelf:first-child{border-top:0;padding-top:clamp(6px,1.5vw,20px)}
.shelf__head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px 40px;flex-wrap:wrap;margin-bottom:clamp(18px,2.2vw,26px)}
.shelf__k{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin-bottom:10px}
.shelf__h{font-weight:500;letter-spacing:-.02em;line-height:1;font-size:clamp(26px,3.4vw,46px);margin:0}
.shelf__h em{font-style:italic;color:var(--pop)}
.shelf__d{font-family:var(--sans);font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:var(--b-mut);max-width:52ch;margin:11px 0 0}
.shelf__nav{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--b-mut);white-space:nowrap}
.shelf__track{display:flex;align-items:flex-start;gap:clamp(14px,1.6vw,24px);overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 0 16px;scrollbar-width:thin;scrollbar-color:var(--b-line) transparent}
.shelf__track::-webkit-scrollbar{height:6px}
.shelf__track::-webkit-scrollbar-thumb{background:var(--b-line);border-radius:100px}
.shelf__track::-webkit-scrollbar-track{background:transparent}
.shelf__track>*{scroll-snap-align:start;flex:0 0 clamp(280px,31vw,360px)}
.shelf--big .shelf__track>*{flex-basis:clamp(340px,44vw,540px)}
@media(max-width:560px){.shelf__track>*{flex-basis:82vw}.shelf--big .shelf__track>*{flex-basis:88vw}}

/* ===== Labeled category shelf (LIV work) — label column bound to its row ===== */
.work-intro{max-width:1320px;margin:0 auto;padding:clamp(28px,5vw,64px) var(--pad) clamp(6px,1.5vw,18px)}
.work-intro__k{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--sea);margin:0 0 12px}
.work-intro__h{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.9;font-size:clamp(46px,8vw,112px);color:var(--ink);margin:0}
.work-intro__h em{font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;color:var(--pop)}
.work-intro__ball{display:inline-block;width:.8em;height:.8em;vertical-align:-.08em;margin-left:.22em}
.work-intro__ball svg{width:100%;height:100%;display:block;animation:ee-spin 2.6s linear infinite;filter:drop-shadow(0 6px 14px rgba(25,22,18,.18))}
@keyframes ee-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.work-intro__ball svg{animation:none}}
.lshelves{max-width:1320px;margin:0 auto;padding:0 var(--pad) clamp(20px,4vw,54px)}
.lshelf{display:grid;grid-template-columns:clamp(230px,23vw,310px) 1fr;gap:clamp(24px,2.8vw,46px);align-items:stretch;padding:clamp(30px,4vw,58px) 0;border-top:1px solid var(--b-line)}
.lshelf:first-of-type{border-top:0;padding-top:clamp(8px,1.5vw,18px)}
.lshelf__label{display:flex;flex-direction:column}
.lshelf__k{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--sea);margin:0 0 13px}
.lshelf__title{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:-.012em;line-height:.9;font-size:clamp(30px,2.9vw,52px);color:var(--ink);margin:0}
.lshelf__tag{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;color:var(--pop);font-size:clamp(20px,1.9vw,28px);line-height:1.14;margin:13px 0 0}
.lshelf__desc{font-family:var(--sans);font-size:14px;line-height:1.52;color:var(--b-mut);margin:16px 0 0;max-width:34ch}
.lshelf__count{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--b-mut);margin-top:auto;padding-top:20px}
.lshelf__track{display:flex;align-items:flex-start;gap:clamp(14px,1.5vw,22px);overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:2px 0 6px;scrollbar-width:thin;scrollbar-color:var(--b-line) transparent}
.lshelf__track::-webkit-scrollbar{height:6px}
.lshelf__track::-webkit-scrollbar-thumb{background:var(--b-line);border-radius:100px}
.lshelf__track::-webkit-scrollbar-track{background:transparent}
.lshelf__track>*{scroll-snap-align:start;flex:0 0 clamp(260px,26vw,340px)}
@media(max-width:760px){
  .lshelf{grid-template-columns:1fr;gap:18px;align-items:start}
  .lshelf__count{margin-top:14px;padding-top:0}
  .lshelf__desc{max-width:52ch}
  .lshelf__title{font-size:clamp(34px,9vw,54px)}
  .lshelf__track>*{flex-basis:78vw}
}

/* ticketing feature cards — bigger, number-forward */
.tik{max-width:1240px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
@media(max-width:760px){.tik{grid-template-columns:1fr}}
.tikcard{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;text-decoration:none;color:#F4F5F5;background:#141b1c;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.tikcard:hover{transform:translateY(-6px)}
.tikcard img{width:100%;height:100%;object-fit:cover;filter:brightness(.96);transition:filter .35s,transform .6s cubic-bezier(.2,.8,.2,1)}
.tikcard:hover img{filter:brightness(1.06);transform:scale(1.045)}
.tikcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 46%,rgba(8,13,14,.48) 74%,rgba(8,13,14,.92))}
.tikcard__badge{position:absolute;top:16px;right:16px;z-index:3;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.32);padding:7px 13px;border-radius:100px}
.tikcard__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;width:clamp(52px,5vw,66px);height:clamp(52px,5vw,66px);border-radius:50%;border:1.5px solid rgba(255,255,255,.85);background:rgba(0,0,0,.25);opacity:0;transition:opacity .3s,transform .3s}
.tikcard:hover .tikcard__play{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
.tikcard__play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.tikcard__cap{position:absolute;left:clamp(18px,2.2vw,26px);right:clamp(18px,2.2vw,26px);bottom:clamp(9px,1.1vw,14px);z-index:3}
.tikcard__place{font-family:var(--sans);font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(13px,1.3vw,17px);color:var(--mint);text-shadow:0 2px 10px rgba(0,0,0,.5)}
.tikcard__stat{font-family:var(--serif);font-weight:400;font-size:clamp(18px,1.9vw,25px);line-height:1.1;margin-top:4px;letter-spacing:-.01em;color:rgba(241,240,235,.68);text-shadow:0 2px 12px rgba(0,0,0,.7)}
.tikcard__stat b{color:var(--pop);font-weight:600;font-size:1.06em}
.tikcard__stat--text{font-size:clamp(13px,1.2vw,15px);color:#D6DAD9}