/* ============================================================
   BIOHACK YOURSELF · v2 additions (loads after funnel.css)
   The consolidated 11-page site: top nav, film chapters, the rooms,
   the article reader, the subscribe drawer, the Home hero and the
   responsive media rules. Tokens come from funnel.css.
   ============================================================ */

/* ---------- responsive media ---------- */
html.static{scroll-behavior:auto!important}
html.static .in{opacity:1!important;transform:none!important}
/* full-page verification renders: viewport-height sections take a fixed height */
html.static .vhero,html.static .mhero3d,html.static .hero2{height:800px;min-height:0}
html.static .counterband{min-height:0}
@media(max-width:700px){html.static .vhero,html.static .mhero3d,html.static .hero2{height:740px}}
/* The responsive-image default. :where() gives it zero specificity so it can never
   beat a rule that sets a deliberate height. As a plain img[srcset] selector it tied
   with things like `.cgal img{height:...}` and won on source order, which killed the
   height and let flex stretch squash landscape photos into portrait boxes. */
:where(img[srcset]){max-width:100%;height:auto}
.v2vid{display:block;width:100%;height:100%;object-fit:cover;background:#000}
.vh-media .v2vid,.vh-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vh-media img[srcset]{height:100%}
/* the events reel on phones: cover like every hero, framed on the upper half so faces stay */
@media(max-width:700px){.vh-media .contain-mobile{object-position:50% 35%}}
.finbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ken{animation:ken 18s ease-in-out infinite alternate;will-change:transform}
@keyframes ken{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,1%)}}
@media(prefers-reduced-motion:reduce){.ken{animation:none}}

/* ---------- top nav ---------- */
.nav2{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px var(--pad);
  background:linear-gradient(180deg,rgba(6,6,7,.78),rgba(6,6,7,.35) 70%,transparent);
  transition:background .4s,backdrop-filter .4s,padding .3s;
}
.nav2.solid{background:rgba(8,8,9,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:10px var(--pad);border-bottom:1px solid var(--hair)}
.nav2-logo img{height:clamp(44px,4.4vw,58px);width:auto;display:block}
.nav2-links{display:flex;gap:clamp(14px,2vw,30px)}
.nav2-links a{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white-soft);
  padding:8px 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s;white-space:nowrap;
}
.nav2-links a:hover,.nav2-links a.on{color:var(--white);border-bottom-color:var(--gold)}
.nav2-cta{display:flex;align-items:center;gap:18px;padding-right:52px}
.nav2-brands{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white-soft);white-space:nowrap}
.nav2-brands:hover{color:var(--white)}
.nav2-start{
  display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#0A0A0B;background:var(--gold);border-radius:999px;padding:11px 18px;white-space:nowrap;
  transition:transform .35s var(--ease-exp),box-shadow .35s;
}
.nav2-start:hover{transform:translateY(-2px);box-shadow:0 14px 30px -10px rgba(201,169,106,.6)}
.nav2-start i{font-style:normal}
@media(max-width:980px){.nav2-links{display:none}}
@media(max-width:700px){.nav2-brands{display:none}.nav2-cta{padding-right:50px;gap:10px}.nav2-start{padding:10px 14px;font-size:10px}}
/* pages that open with copy (no hero) start below the bar */
body.people,body.articles,body.products,body.legal,body.brands,body.contact{padding-top:clamp(68px,9vh,92px)}
body.frag{padding-top:0}
/* the hamburger (chrome.js) rides the bar on small screens only */
@media(min-width:981px){.menu-btn{display:none!important}}

/* ---------- shared bits ---------- */
.kicker.gold{color:var(--gold)}
.chap-links,.vh-btns{display:flex;gap:12px 16px;flex-wrap:wrap}
.chap-links{justify-content:center;padding:30px var(--pad) 0}
.btn-line.hnn{color:var(--gold);border-color:rgba(201,169,106,.5)}
.sub-xl{font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.6;color:var(--white-soft);max-width:62ch}

/* ---------- films: chapters ---------- */
.chapters{position:sticky;top:0;z-index:50;background:rgba(8,8,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.chapters-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px var(--pad);max-width:var(--grid);margin:0 auto}
.chapters-in::-webkit-scrollbar{display:none}
.chapters-in a{flex:none;display:flex;flex-direction:column;gap:2px;padding:10px 16px;border:1px solid var(--hair);border-radius:12px;transition:border-color .3s,background .3s}
.chapters-in a b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:.95rem;line-height:1.1}
.chapters-in a span{font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--white-faint)}
.chapters-in a:hover,.chapters-in a.on{border-color:var(--gold);background:rgba(201,169,106,.08)}
.chapters-in a.on span{color:var(--gold)}
.chapter{padding:clamp(56px,9vh,110px) 0 0;scroll-margin-top:84px;border-top:1px solid var(--hair)}
.chapter:first-of-type{border-top:0}
.chap-head{position:relative;max-width:var(--grid);margin:0 auto;padding:0 var(--pad) clamp(22px,4vh,40px)}
.chap-num{display:block;font-family:var(--display);font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;color:var(--hair-strong);margin-bottom:10px}
.chap-head .display{font-size:clamp(2.2rem,6vw,4.8rem);margin:10px 0 12px}
.chap-head .sub{max-width:60ch}
.chap-media{position:relative;margin:0 auto;max-width:var(--grid);padding:0 var(--pad)}
.chap-media>video,.chap-media>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);background:#000}
.chap-cap{display:block;margin-top:10px;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--white-faint)}
@media(max-width:700px){.chap-media>video,.chap-media>img{aspect-ratio:4/5;border-radius:10px}}
.chap-lock{display:flex;justify-content:center;padding:clamp(30px,6vh,60px) var(--pad)}
.chap-lock .lockbox{border:1px solid var(--hair);border-radius:18px;padding:clamp(26px,5vh,44px) clamp(20px,4vw,40px);background:rgba(20,20,22,.6)}
.chap-lock .lockbox h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.4rem);margin:10px 0 8px}
.chap-lock.shake .lockbox{animation:shakebox .4s}
@keyframes shakebox{0%,100%{transform:none}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.chap-gated[hidden]{display:none}
.headwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;padding:0 var(--pad);max-width:var(--grid);margin:0 auto}
.headc{margin:0;text-align:center}
.headc img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px;display:block;background:var(--card);filter:saturate(.92)}
.headc figcaption{font-size:10.5px;font-weight:600;letter-spacing:.04em;color:var(--white-soft);margin-top:7px;line-height:1.3}
.liblist{max-width:var(--grid);margin:0 auto;padding:0 var(--pad)}

/* ---------- events: the rooms ---------- */
.roomnav{position:sticky;top:0;z-index:50;background:rgba(8,8,9,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.roomnav-in{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px var(--pad)}
.roomnav-in::-webkit-scrollbar{display:none}
.roomnav-in a{flex:none;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--white-soft);border:1px solid var(--hair);border-radius:999px;padding:9px 14px;transition:color .3s,border-color .3s}
.roomnav-in a:hover,.roomnav-in a.on{color:var(--white);border-color:var(--gold)}
.rooms{padding-top:clamp(20px,4vh,40px)}
.room{padding:clamp(44px,7vh,80px) 0 0;border-top:1px solid var(--hair);scroll-margin-top:70px}
.room:first-child{border-top:0}
.room-head{max-width:var(--grid);margin:0 auto;padding:0 var(--pad) clamp(18px,3vh,30px)}
.room-when{display:block;font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.room-head h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,4.6vw,3.4rem);line-height:1.02;letter-spacing:.01em}
.room-head h3 em{font-style:normal;color:var(--white-soft)}
.room-head p{color:var(--white-soft);max-width:60ch;margin-top:10px}
.room-media{display:grid;gap:14px}
.room-vid{margin-inline:auto;width:calc(100% - var(--pad) * 2);max-width:calc(var(--grid) - var(--pad) * 2)}
.room-vid video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;background:#000}
@media(max-width:700px){.room-vid video{aspect-ratio:4/5}}
.cgal.room-strip img{border-radius:12px}
/* never let the flex line stretch an image to the tallest sibling */
.cgal,.strip2,.postrow,.evrow,.mrail{align-items:flex-start}
/* these rows scroll sideways, so an image is allowed to be wider than the
   viewport: max-width:100% was clamping the width while the row height stayed
   fixed, which squashed every landscape photo */
.cgal img,.strip2 img,.headwall img,.covermarq img,.covers img,.pwall img,.spreads img{max-width:none}
.room-clips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 var(--pad);max-width:var(--grid);margin:0 auto}
.room-clips figure{margin:0}
.room-clips video{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:#000}
.room-clips figcaption{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--white-faint);margin-top:8px}
@media(max-width:700px){.room-clips{grid-template-columns:1fr 1fr}.room-clips figure:nth-child(3){grid-column:1/-1}}
.case{max-width:var(--grid);margin:clamp(18px,3vh,30px) auto 0;padding:0 var(--pad)}
.case summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.case summary::-webkit-details-marker{display:none}
.case summary span{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.1rem}
.case summary i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white-faint)}
.case summary::after{content:"+";margin-left:auto;font-family:var(--display);font-size:1.4rem;color:var(--gold)}
.case[open] summary::after{content:"–"}
.case .caps{margin-top:16px}
.voicewall{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:clamp(18px,3vh,30px) var(--pad) 0;max-width:var(--grid);margin:0 auto}
.vcell{position:relative;margin:0;border-radius:12px;overflow:hidden;background:#000;aspect-ratio:4/5}
.vcell video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcell figcaption{position:absolute;left:0;right:0;bottom:0;padding:12px 12px 12px;background:linear-gradient(0deg,rgba(0,0,0,.82),transparent);display:flex;flex-direction:column;gap:2px;pointer-events:none}
.vcell figcaption b{font-size:.86rem;line-height:1.2}
.vcell figcaption span{font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--white-faint)}
.vcell .snd{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(244,242,238,.4);background:rgba(6,6,7,.55);color:var(--white);font:700 14px/1 var(--sans);cursor:pointer;pointer-events:auto;transition:background .3s}
.vcell .snd:hover,.vcell.sound .snd{background:var(--gold);color:#0A0A0B;border-color:var(--gold)}
@media(max-width:900px){.voicewall{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.voicewall{grid-template-columns:repeat(2,1fr)}}

/* ---------- people ---------- */
.duo{margin:clamp(46px,8vh,88px) 0 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(20,20,22,.35)}
.duo-in{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center;max-width:var(--grid);margin:0 auto;padding:clamp(34px,6vh,64px) var(--pad)}
.duo-pics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duo-pics img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px}
.duo-txt .display{font-size:clamp(2rem,5vw,3.6rem);margin:10px 0 14px}
.duo-txt p{color:var(--white-soft);max-width:52ch}
.duo-txt .vh-btns{margin-top:20px}
@media(max-width:760px){.duo-in{grid-template-columns:1fr}}
.castrow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:0 var(--pad);max-width:var(--grid);margin:0 auto}
.castlink{display:block;border:1px solid var(--hair);border-radius:14px;padding:10px;transition:border-color .3s,transform .35s var(--ease-exp)}
.castlink:hover{border-color:var(--gold);transform:translateY(-3px)}
.castlink img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:10px;display:block}
.castlink b{display:block;margin-top:12px;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem}
.castlink span{display:block;font-size:.8rem;color:var(--white-soft)}
@media(max-width:760px){.castrow{grid-template-columns:1fr 1fr}}

/* ---------- articles: the reader ---------- */
.artreader{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column}
.artreader[hidden]{display:none}
.artreader-bar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px var(--pad);border-bottom:1px solid var(--hair);background:rgba(8,8,9,.9)}
.artreader-close{background:none;border:1px solid var(--hair);color:var(--white);border-radius:999px;padding:9px 16px;font:700 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.artreader-close:hover{border-color:var(--gold)}
.artreader-brand{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--white-soft);font-size:.95rem}
.artreader-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.artreader-body{padding-bottom:60px}
.artreader-body .frag-top{display:none}
.artreader-body .arthero{height:clamp(240px,42vh,480px)}
.artreader-body .artgrid{padding-bottom:0}
body.reading{overflow:hidden}
.artreader .loading-line{padding:60px var(--pad);text-align:center;color:var(--white-faint);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.frag-top{justify-content:center}

/* ---------- magazine: the newsstand + the drawer ---------- */
.newsstand{margin:clamp(46px,8vh,88px) 0 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);background:rgba(20,20,22,.35)}
.newsstand-in{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:clamp(24px,5vw,70px);align-items:center;max-width:var(--grid);margin:0 auto;padding:clamp(34px,6vh,64px) var(--pad)}
.newsstand-phone{justify-self:start;width:min(300px,70vw);aspect-ratio:4/5;border-radius:22px;overflow:hidden;border:1px solid var(--hair-strong);box-shadow:0 40px 80px -30px rgba(0,0,0,.85);background:#000}
.newsstand-phone video{width:100%;height:100%;object-fit:cover}
.newsstand-txt .display{font-size:clamp(2rem,5vw,3.6rem);margin:10px 0 14px}
.newsstand-txt p{color:var(--white-soft);max-width:48ch;margin-bottom:20px}
@media(max-width:760px){.newsstand-in{grid-template-columns:1fr}}
.spreads .spread2{flex:none;display:flex;gap:2px;width:clamp(300px,44vw,620px);scroll-snap-align:start;border-radius:10px;overflow:hidden;background:#0D0D0E}
.spreads .spread2 img{width:50%;height:auto;aspect-ratio:1156/1500;object-fit:cover;display:block}
.drawer{position:fixed;inset:0;z-index:85;background:rgba(6,6,7,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;justify-content:flex-end}
.drawer[hidden]{display:none}
.drawer-in{position:relative;width:min(560px,100%);height:100%;overflow-y:auto;overscroll-behavior:contain;background:var(--bg);border-left:1px solid var(--hair);padding:clamp(28px,5vh,52px) clamp(20px,4vw,40px) 60px;animation:drawerin .45s var(--ease-exp)}
@keyframes drawerin{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.drawer-close{position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:50%;border:1px solid var(--hair);background:none;color:var(--white);font-size:22px;line-height:1;cursor:pointer}
.drawer-close:hover{border-color:var(--gold)}
.drawer .plans{margin:22px 0 16px}
.drawer .display{font-size:clamp(1.8rem,4.4vw,2.6rem)}
body.drawer-open{overflow:hidden}

/* ---------- home ---------- */
body.home2{padding-top:0}
.hero2{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero2-media{position:absolute;inset:0}
.hero2-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,7,.25),rgba(6,6,7,.1) 35%,rgba(6,6,7,.55) 70%,var(--bg) 100%)}
.hero2-in{position:relative;z-index:2;max-width:var(--grid);width:100%;margin:0 auto;padding:clamp(110px,16vh,160px) var(--pad) clamp(18px,3vh,28px)}
.hero2-in .display{font-size:clamp(2.6rem,8vw,7rem);line-height:.96;max-width:14ch}
.hero2-in .sub{max-width:52ch;margin-top:14px;color:rgba(247,245,241,.8)}
.hero2-live{display:inline-flex;align-items:center;gap:8px;font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--white-soft);margin-bottom:16px}
.hero2-live i{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:bhwadot 1.6s ease-in-out infinite}
.doors2{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:var(--grid);width:100%;margin:0 auto;padding:0 var(--pad) clamp(22px,4vh,40px)}
.door2{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:1px solid rgba(244,242,238,.22);border-radius:14px;background:rgba(8,8,9,.5);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:border-color .3s,transform .35s var(--ease-exp),background .3s;min-height:118px}
.door2:hover{border-color:var(--gold);transform:translateY(-3px);background:rgba(8,8,9,.7)}
.door2 .dnum{font-size:9.5px;font-weight:700;letter-spacing:.28em;color:var(--gold)}
.door2 h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.05}
.door2 h2 em{font-style:normal;color:var(--white-soft)}
.door2 p{font-size:.86rem;color:var(--white-soft);line-height:1.45}
.door2 .dgo{position:absolute;right:16px;top:14px;font-family:var(--display);font-size:1.2rem;color:var(--gold)}
@media(max-width:760px){.doors2{grid-template-columns:1fr;gap:8px}.door2{min-height:0;padding:13px 16px}.door2 p{display:none}.hero2-in{padding-bottom:12px}.hero2-in .display{font-size:clamp(2.4rem,12vw,4rem)}}
/* the hero montage tiles: one at a time on phones, a triptych on wide screens */
.hero2-tiles{position:absolute;inset:0;display:grid;grid-template-columns:1.4fr 1fr;gap:0}
.hero2-tiles>*{position:relative;overflow:hidden}
.hero2-tiles video,.hero2-tiles img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(max-width:900px){.hero2-tiles{grid-template-columns:1fr}.hero2-tiles>*:nth-child(n+2){display:none}}
.hero2-tiles video{opacity:0;transition:opacity 1.2s ease}
.hero2-tiles video.is-on{opacity:1}
/* the centered landing: matte black room, one quiet clip behind, the logo big in the
   middle (the call's ruling: big logo, three doors, one world, simple) */
.hero2-c{justify-content:center;gap:clamp(18px,4vh,44px)}
.hero2-solo video,.hero2-solo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero2-c .hero2-scrim{background:radial-gradient(120% 90% at 50% 42%,rgba(6,6,7,.6) 0%,rgba(6,6,7,.82) 62%,var(--bg) 100%)}
.hero2-solo video{filter:brightness(.62) saturate(.8)}
.hero2-c .hero2-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(96px,14vh,150px) var(--pad) 0}
.hero2-c .hero2-in .display{max-width:none;font-size:clamp(2.1rem,5.6vw,4.6rem)}
.hero2-c .hero2-in .sub{margin-left:auto;margin-right:auto}
.hero2-logo{width:clamp(240px,36vw,540px);height:auto;margin:clamp(14px,3vh,26px) 0 clamp(16px,3vh,28px);filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))}
.hero2-c .doors2{padding-bottom:clamp(26px,5vh,48px)}
@media(max-width:760px){.hero2-logo{width:min(74vw,340px)}.hero2-c .hero2-in{padding-top:88px}.hero2-c{gap:16px}}
.voicewall.eight{grid-template-columns:repeat(4,1fr)}
@media(max-width:700px){.voicewall.eight{grid-template-columns:repeat(2,1fr)}}
/* what is biohacking */
.what{position:relative;padding:clamp(60px,10vh,120px) 0 0;border-top:1px solid var(--hair)}
.what-head{max-width:var(--grid);margin:0 auto;padding:0 var(--pad)}
.what-head .display{font-size:clamp(2.4rem,7vw,5.6rem);line-height:.98;max-width:18ch}
.what-def{font-size:clamp(1.2rem,2.2vw,1.7rem);line-height:1.5;color:var(--white);max-width:38ch;margin-top:22px}
.what-def b{color:var(--gold);font-weight:600}
.levers{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:var(--grid);margin:clamp(34px,6vh,60px) auto 0;padding:0 var(--pad)}
.lever{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:4/5;background:var(--card)}
.lever img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-exp)}
.lever:hover img{transform:scale(1.05)}
.lever::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.88),rgba(6,6,7,.1) 55%)}
.lever-txt{position:absolute;left:0;right:0;bottom:0;padding:20px;z-index:2}
.lever-txt i{display:block;font-style:normal;font-family:var(--display);font-size:1.6rem;color:var(--gold);line-height:1}
.lever-txt b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.2rem,2vw,1.6rem);margin-top:8px}
.lever-txt span{display:block;color:var(--white-soft);font-size:.9rem;margin-top:6px;max-width:30ch}
@media(max-width:760px){.levers{grid-template-columns:1fr}.lever{aspect-ratio:16/10}}
.counterband{position:relative;margin:clamp(46px,8vh,88px) 0 0;min-height:72svh;display:grid;grid-template-columns:1fr 1fr;align-items:center;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.counterband img{width:100%;height:100%;object-fit:cover;min-height:420px}
.counter-txt{padding:clamp(30px,6vh,70px) var(--pad)}
.counter-num{font-family:var(--display);font-size:clamp(5rem,16vw,12rem);line-height:.9;color:var(--white);font-variant-numeric:tabular-nums}
.counter-num small{display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-top:10px}
/* the number means nothing unless it is named: the starting age sits above it and
   the label under it, so the block reads even when the count-down is missed */
.counter-num .cn-from{margin:0 0 14px;color:var(--white-faint)}
.counter-txt p{color:var(--white-soft);max-width:42ch;margin-top:18px}
@media(max-width:760px){.counterband{grid-template-columns:1fr}.counterband img{min-height:0;aspect-ratio:4/5}}
/* The disciplines. CSS columns rather than flex-wrap: columns balance themselves,
   so 13 items fill evenly instead of leaving a ragged 2/3/2/3/3 pile, and every
   row lands on the same baseline grid at every width. */
.disciplines{
  list-style:none;max-width:var(--grid);margin:clamp(30px,5vh,50px) auto 0;
  padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:clamp(26px,3.4vw,60px);
}
.disciplines li{
  display:flex;align-items:baseline;gap:12px;
  padding:13px 0;border-bottom:1px solid var(--hair);
  font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.05rem,1.5vw,1.45rem);color:var(--white-soft);
  transition:color .3s,border-color .3s;
}
.disciplines li::before{
  content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:var(--gold);opacity:.5;transform:translateY(-.28em);
  transition:opacity .3s,transform .3s;
}
.disciplines li:hover{color:var(--white);border-color:var(--hair-strong)}
.disciplines li:hover::before{opacity:1;transform:translateY(-.28em) scale(1.5)}
@media(max-width:1180px){.disciplines{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.disciplines{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.disciplines{grid-template-columns:1fr}}
/* the closing line shares the left edge of the index above it */
.what-close{text-align:left;max-width:var(--grid);margin:clamp(26px,4vh,40px) auto 0;padding:0 var(--pad);font-size:clamp(1.15rem,2vw,1.5rem);color:var(--white)}
/* story strips on home */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 var(--pad);max-width:var(--grid);margin:0 auto}
.tile{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--card)}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-exp)}
.tile:hover img,.tile:hover video{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.85),transparent 50%)}
.tile-txt{position:absolute;left:0;right:0;bottom:0;padding:16px;z-index:2}
.tile-txt b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,1.8vw,1.4rem);line-height:1.05}
.tile-txt span{display:block;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.tile.wide{grid-column:span 2;aspect-ratio:16/9}
@media(max-width:900px){.tiles{grid-template-columns:1fr 1fr}.tile.wide{grid-column:span 2}}
.strip2{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--pad) 10px;scrollbar-width:none;scroll-padding-inline:var(--pad)}
.strip2::-webkit-scrollbar{display:none}
.strip2>*{flex:none;scroll-snap-align:start}

/* ---------- your issue ---------- */
.mirror{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.55;color:rgba(247,245,241,.85);max-width:60ch}
.mirror b{color:var(--gold);font-weight:600}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.stars{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:0 var(--pad);max-width:var(--grid);margin:0 auto}
.starc{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:var(--card)}
.starc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-exp)}
.starc:hover img{transform:scale(1.05)}
.starc::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,6,7,.85),transparent 48%)}
.starc figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px;z-index:2}
.starc b{display:block;font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1rem,1.6vw,1.3rem);line-height:1.05}
.starc span{display:block;font-size:.78rem;color:var(--white-soft);margin-top:4px}
@media(max-width:700px){.stars{grid-template-columns:1fr 1fr;gap:8px}}
.gatescreen{animation:rise .7s var(--ease-out) both}
body.issue #issue{display:none}
body.issue.revealed #survey{display:none}
body.issue.revealed #issue{display:block}

/* ---------- contact ---------- */
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:22px 0 8px}
.who .opt{padding:14px 12px}
@media(max-width:640px){.who{grid-template-columns:1fr 1fr}}
.lane{display:none}
.lane.on{display:block}

/* ---------- one axis per block ----------
   funnel.css centres .kicker and .display, which is right for the narrow centred
   screens it was written for and wrong for every wide editorial block. In those,
   the kicker, the headline and the body copy all sit on the same left edge. */
.hero2-in,.what-head,.duo-txt,.newsstand-txt,.chap-head{text-align:left}
.hero2-c .hero2-in{text-align:center}
.hero2-in .kicker,.hero2-in .display,.hero2-in .sub,
.what-head .kicker,.what-head .display,.what-head .what-def,
.duo-txt .kicker,.duo-txt .display,.duo-txt p,
.newsstand-txt .kicker,.newsstand-txt .display,.newsstand-txt p,
.chap-head .kicker,.chap-head .display,.chap-head .sub{text-align:left;margin-inline:0}

/* the origin: before and after, side by side, same frame */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.6vw,22px);max-width:min(920px,var(--grid));margin:clamp(26px,4vh,44px) auto 0;padding:0 var(--pad)}
.ba-cell{position:relative;margin:0;border-radius:14px;overflow:hidden;background:#101012}
.ba-cell img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.ba-cell figcaption{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;background:linear-gradient(180deg,transparent,rgba(6,6,7,.86));display:flex;align-items:baseline;gap:10px}
.ba-cell figcaption b{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,3.4vw,2.6rem);letter-spacing:.02em;color:var(--white)}
.ba-cell figcaption span{font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ba-notes{max-width:min(920px,var(--grid));margin:0 auto;padding:16px var(--pad) 0}
.ba-notes p{max-width:64ch;color:var(--white-soft);font-size:.95rem;line-height:1.6}
@media(max-width:560px){.ba{gap:8px}.ba-cell figcaption{padding:9px 10px;gap:6px}}

/* the events ledger rows reuse the film library list */
.evledger .evarch{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--white-faint)}

/* the peer review wall: one uniform typographic treatment, no mixed backgrounds */
.peerlead{max-width:var(--grid);margin:0 auto;padding:6px var(--pad) 18px}
.peerlead p{max-width:62ch;color:var(--white-soft);line-height:1.65}
.peerwall{max-width:var(--grid);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair)}
.peerwall span{background:var(--bg);padding:13px 14px;font-size:.86rem;color:var(--white-soft);letter-spacing:.02em}
@media(max-width:900px){.peerwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.peerwall{grid-template-columns:repeat(2,minmax(0,1fr))}.peerwall span{padding:11px 10px;font-size:.8rem}}

/* ---------- the watch wall ---------- */
.filmwall{max-width:var(--grid);margin:clamp(26px,4vh,44px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px)}
@media(max-width:1100px){.filmwall{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.filmwall{grid-template-columns:1fr;gap:14px}}
.wcard{border:1px solid var(--hair);border-radius:14px;overflow:hidden;background:#0D0D0F;display:flex;flex-direction:column;transition:border-color .3s,transform .35s var(--ease-exp)}
.wcard:hover{border-color:rgba(201,169,106,.55);transform:translateY(-3px)}
.wcard-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0A0A0B}
.wcard-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* portrait key art sits whole on a blurred fill of itself */
.wcard-media.port::before{content:"";position:absolute;inset:-24px;background:var(--art) center/cover;filter:blur(26px) brightness(.4) saturate(.85)}
.wcard-media.port img{position:relative;object-fit:contain}
/* films without shipped key art speak the same poster language, typographically */
.wcard-media.house{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:radial-gradient(90% 120% at 50% 0%,#141417 0%,#0A0A0B 70%);border-bottom:1px solid var(--hair)}
.house-title{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.3rem,1.9vw,1.8rem);line-height:1.05;color:var(--white);text-align:center;padding:0 18px;max-width:100%}
.house-sub{font-size:8.5px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:rgba(201,169,106,.75)}
.wcard-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.wcard-body h2{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.08}
.wcard-body p{font-size:.84rem;color:var(--white-soft);flex:1}
.wcard-watch{align-self:flex-start;margin-top:10px;font-size:10px;padding:11px 22px;background:var(--gold);border-color:var(--gold);color:#0A0A0B}
.wcard-watch:hover{background:#E2C68B;border-color:#E2C68B;color:#0A0A0B}
#wall,.wcard{scroll-margin-top:96px}
.wcard-badge{align-self:flex-start;margin-top:10px;font-size:9.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,169,106,.45);border-radius:999px;padding:9px 16px}

/* ---------- the cover wall: the magazines themselves, big ---------- */
.coverwall{max-width:var(--grid);margin:clamp(24px,4vh,40px) auto 0;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,30px)}
@media(max-width:1000px){.coverwall{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.coverwall{grid-template-columns:1fr 1fr;gap:12px}}
.coverc{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--hair);background:#0D0D0F;transition:transform .35s var(--ease-exp),border-color .3s;box-shadow:0 18px 44px -22px rgba(0,0,0,.8)}
.coverc:hover{transform:translateY(-4px);border-color:rgba(201,169,106,.55)}
.coverc img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:top;display:block}
.coverc-cap{position:absolute;left:0;right:0;bottom:0;padding:26px 14px 12px;background:linear-gradient(180deg,transparent,rgba(6,6,7,.88));display:flex;flex-direction:column;gap:2px}
.coverc-cap b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(.95rem,1.4vw,1.2rem);color:var(--white)}
.coverc-cap i{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ---------- the contributor application ---------- */
.applylead{max-width:720px;margin:0 auto;padding:4px var(--pad) 20px}
.applylead p{color:var(--white-soft);line-height:1.65}
.applyform{max-width:720px;margin:0 auto;padding:0 var(--pad)}
.applyform .field{margin-bottom:12px}
.applyform textarea{width:100%;background:var(--card);border:1px solid var(--hair);border-radius:9px;color:var(--white);font:inherit;font-size:1.02rem;padding:15px 16px;outline:none;transition:border-color .3s,box-shadow .3s;resize:vertical;min-height:120px;line-height:1.55}
.applyform textarea::placeholder{color:var(--white-faint)}
.applyform textarea:focus{border-color:var(--accent-soft);box-shadow:0 0 22px -8px var(--glow)}
.applyform .field.miss textarea{border-color:#E23D2E;box-shadow:0 0 18px -10px rgba(226,61,46,.8)}
.applyrow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.applyrow{grid-template-columns:1fr}}
.applynote{display:none;margin:2px 0 12px;font-size:.9rem;color:#E8B7AF}
.applyok{max-width:720px;margin:0 auto;padding:22px;border:1px solid rgba(201,169,106,.45);border-radius:12px;text-align:left}
.applyok b{color:var(--gold)}
.applyok p{margin-top:8px;color:var(--white-soft)}

/* ---------- the Amplification dropdown ---------- */
.nav2-drop{position:relative;display:inline-flex}
.nav2-dropbtn .caret{display:inline-block;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;margin-left:6px;vertical-align:middle;opacity:.7;font-size:0}
.nav2-panel{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(-6px);display:flex;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:12px;overflow:hidden;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease-exp);box-shadow:0 26px 60px -18px rgba(0,0,0,.85);z-index:60}
.nav2-drop:hover .nav2-panel,.nav2-drop:focus-within .nav2-panel{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.np-col{background:#0C0C0E;padding:16px 18px;min-width:196px;display:flex;flex-direction:column;gap:4px}
.np-col b{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.06em;font-size:.82rem;margin-bottom:6px;white-space:nowrap}
.np-by b{color:var(--gold)}
.np-bym b{color:#7FD8C8}
.np-bym{background:#0B100F}
.np-col a{font-size:.84rem;letter-spacing:.04em;color:var(--white-soft);padding:6px 0;text-transform:none;white-space:nowrap;transition:color .25s}
.np-by a:hover{color:var(--gold)}
.np-bym a:hover{color:#7FD8C8}
/* keep the hover bridge alive over the 14px gap */
.nav2-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}

/* the subscribe pill: the full line wherever it fits, one word where it cannot */
.nav2-start .nsub-full{display:none}
@media(min-width:1360px){
  .nav2-start .nsub-full{display:inline}
  .nav2-start .nsub-short{display:none}
  .nav2-start{font-size:9px;letter-spacing:.12em;padding:12px 18px;white-space:nowrap}
}