/* ============================================================
   BIOHACK YOURSELF — The Wellness Revolution (v2, editorial light)
   Paper white + ink + brand red "+". Boska display, General Sans body.
   ============================================================ */

:root{
  --paper:#FBFAF7;
  --paper-2:#F4F2EC;
  --ink:#111110;
  --ink-soft:rgba(17,17,16,.66);
  --ink-faint:rgba(17,17,16,.42);
  --hair:rgba(17,17,16,.14);
  --hair-strong:rgba(17,17,16,.32);
  --red:#E23D2E;
  --white:#FBFAF7;
  --white-soft:rgba(251,250,247,.72);
  --white-hair:rgba(251,250,247,.22);

  --display:"Anton",Impact,sans-serif;
  --sans:"General Sans",system-ui,sans-serif;

  --ease-productive:cubic-bezier(.2,0,.38,.9);
  --ease-expressive:cubic-bezier(.4,.14,.3,1);
  --ease-enter:cubic-bezier(0,0,.38,.9);
  --ease-exit:cubic-bezier(.2,0,1,.9);

  --pad:clamp(20px,4vw,72px);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{background:var(--ink);color:var(--paper)}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:none;border:0;color:inherit;cursor:pointer}

/* ---------- scroll progress ---------- */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:140;
  background:var(--red);transform:scaleX(0);transform-origin:left;
}

/* ---------- editorial helpers ---------- */
.folio{
  display:flex;align-items:center;gap:14px;
  margin:0 var(--pad);padding:18px 0 0;
  border-top:1px solid var(--hair-strong);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
}
.folio span:first-child{color:var(--red)}
.folio span:last-child{color:var(--ink-faint)}
.folio-light{border-top-color:var(--white-hair)}
.folio-light span:last-child{color:var(--white-soft)}

.sec-head{padding:clamp(28px,4vh,48px) var(--pad) clamp(40px,6vh,72px)}
.sec-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.5rem,6.2vw,5.6rem);line-height:.94;letter-spacing:.004em;
}
.sec-title em{font-style:normal;color:var(--red)}
.sec-sub{
  color:var(--ink-soft);max-width:58ch;margin-top:18px;
  font-size:clamp(1rem,1.2vw,1.12rem);font-weight:400;
}

.chip{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--white);
}
.chip i{color:var(--red);font-style:normal;font-weight:700;font-size:15px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;
  font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:18px 30px;border-radius:3px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-expressive),color .35s var(--ease-productive),border-color .3s var(--ease-productive);
  will-change:transform;
}
.btn > *{position:relative;z-index:1}
.btn::before{
  content:"";position:absolute;inset:0;z-index:0;background:var(--red);
  transform:translateX(-102%);transition:transform .55s var(--ease-expressive);
}
.btn:hover::before{transform:translateX(0)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .45s var(--ease-expressive)}
.btn:hover svg{transform:translateX(5px)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{color:var(--paper)}
.btn-paper{background:var(--paper);color:var(--ink)}
.btn-paper:hover{color:var(--paper)}
.btn-line{border:1px solid var(--white-hair);color:var(--white)}
.btn-line:hover{border-color:var(--red);color:var(--white)}
.btn-line-ink{border:1px solid var(--hair-strong);color:var(--ink)}
.btn-line-ink:hover{border-color:var(--red);color:var(--red)}
.btn-sm{padding:12px 22px;font-size:11px}

/* ---------- preloader ---------- */
.preloader{
  position:fixed;inset:0;z-index:150;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
}
.pre-inner{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(420px,72vw)}
.pre-logo{width:100%;opacity:0}
.pre-line{width:100%;height:1px;background:var(--white-hair);position:relative;overflow:hidden}
.pre-line i{position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left}
.pre-tag{
  font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  color:var(--white-soft);opacity:0;
}

/* ---------- header ---------- */
.header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px var(--pad);
  background:transparent;
  transition:background-color .45s var(--ease-productive),border-color .45s,padding .45s var(--ease-productive);
  border-bottom:1px solid transparent;
  opacity:0;
}
.brand-logo{
  height:clamp(42px,3.8vw,56px);width:auto;
  transition:filter .45s;
}
.header.is-scrolled{
  background:rgba(251,250,247,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--hair);padding:12px var(--pad);
}
.header.is-scrolled .brand-logo{filter:invert(1) brightness(.2)}
.header.is-scrolled .nav a{color:var(--ink-soft)}
.header.is-scrolled .nav a:hover{color:var(--ink)}
.nav{display:flex;gap:30px}
.nav a{
  font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--white-soft);
  transition:color .3s var(--ease-productive);position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:-6px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease-expressive);
}
.nav a:hover{color:var(--white)}
.nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header.is-scrolled .header-cta .btn-ink{background:var(--ink);color:var(--paper)}
.header-cta{display:flex;align-items:center;gap:14px}
.header-cta .btn-ink{background:var(--paper);color:var(--ink)}
.header-cta .btn-ink:hover{background:var(--red);color:var(--paper)}
.menu-btn{display:none;flex-direction:column;gap:6px;padding:8px}
.menu-btn span{width:25px;height:1.5px;background:currentColor;transition:transform .4s var(--ease-expressive)}
.header .menu-btn{color:var(--white)}
.header.is-scrolled .menu-btn{color:var(--ink)}
.menu-btn.is-open span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn.is-open span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

.mmenu{
  position:fixed;inset:0;z-index:99;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease-enter),visibility .5s;
}
.mmenu.is-open{opacity:1;visibility:visible}
.mmenu nav{display:flex;flex-direction:column;gap:4px;text-align:center}
.mmenu a{
  font-family:var(--display);font-size:clamp(2.2rem,9vw,3.4rem);font-weight:400;color:var(--ink);
  text-transform:uppercase;padding:8px 0;transition:color .3s;
}
.mmenu a:hover{color:var(--red)}

/* ---------- hero ---------- */
.hero{background:var(--ink)}
.hero-frame{position:relative;height:100svh;min-height:620px;overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.4s var(--ease-productive);
}
.hero-vid.is-on{opacity:1}
.hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,16,.34) 0%,rgba(17,17,16,0) 30%,rgba(17,17,16,0) 55%,rgba(17,17,16,.62) 100%);
}
.hero-in{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) clamp(36px,6vh,64px);color:var(--white);
}
.hero-title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(3.2rem,9.6vw,9.4rem);line-height:.92;letter-spacing:.004em;
  margin-top:18px;
  text-shadow:0 2px 40px rgba(17,17,16,.35);
}
.hero-title em{font-style:normal;color:var(--red);-webkit-text-stroke:0}
.hero-foot-row{
  display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  margin-top:30px;flex-wrap:wrap;
}
.hero-sub{max-width:44ch;color:var(--white-soft);font-size:clamp(.98rem,1.2vw,1.12rem)}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.hero-live{
  position:absolute;top:calc(16px + 54px);right:var(--pad);z-index:3;
  display:flex;align-items:center;gap:9px;
  font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--white-soft);
}
.hero-live i{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ticker: black text band on paper */
.ticker{
  background:var(--paper);border-bottom:1px solid var(--hair-strong);
  overflow:hidden;white-space:nowrap;
}
.ticker-track{
  display:inline-flex;align-items:center;gap:36px;padding:16px 0;
  animation:marq 34s linear infinite;animation-direction:reverse;will-change:transform;
}
.ticker-track span{
  font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);
}
.ticker-track i{color:var(--red);font-style:normal;font-weight:700}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- doors (text on image) ---------- */
.doors-sec{background:var(--paper);padding-bottom:clamp(90px,12vh,150px)}
.doors{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:0 var(--pad);
}
.door{
  position:relative;overflow:hidden;border-radius:6px;
  min-height:clamp(440px,60vh,600px);
  display:flex;align-items:flex-end;color:var(--white);
}
.door-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform 1.2s var(--ease-expressive);
}
.door:hover .door-img{transform:scale(1.05)}
.door-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,16,.3) 0%,rgba(17,17,16,.02) 38%,rgba(17,17,16,.42) 68%,rgba(17,17,16,.9) 100%);
  transition:opacity .5s;
}
.door-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 26px;
}
.door-num{font-family:var(--display);font-size:15px;color:var(--white);opacity:.9}
.door-tag{
  font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  background:var(--red);color:var(--white);border-radius:3px;padding:8px 13px;
}
.door-body{position:relative;z-index:2;padding:28px 26px 30px;width:100%}
.door h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.5rem,2.1vw,2.1rem);line-height:.96;letter-spacing:.006em;
  text-shadow:0 2px 24px rgba(17,17,16,.4);
}
.door h3 em{font-style:normal;color:var(--red)}
.door p{color:rgba(251,250,247,.82);font-size:14.5px;max-width:36ch;margin-top:12px}
.door-go{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--white);
}
.door-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;transition:transform .45s var(--ease-expressive)}
.door:hover .door-go{color:var(--red)}
.door:hover .door-go svg{transform:translateX(6px)}

/* ---------- magazine carousel ---------- */
.mag-sec{background:var(--paper);overflow:hidden;padding-bottom:clamp(48px,6.5vh,84px)}
.shelf-wrap{
  position:relative;overflow:hidden;cursor:grab;
  border-block:1px solid var(--hair-strong);
  background:var(--paper-2);
  user-select:none;-webkit-user-select:none;
}
.shelf-wrap.is-drag{cursor:grabbing}
.shelf-track{
  display:flex;gap:clamp(28px,3.6vw,60px);align-items:center;
  padding:clamp(40px,6vh,64px) 0;
  will-change:transform;width:max-content;
}
.mag{flex:0 0 auto;width:clamp(270px,27vw,395px);text-align:left}
.mag img{
  width:100%;border-radius:3px;pointer-events:none;
  box-shadow:0 30px 55px -18px rgba(17,17,16,.4),0 4px 12px rgba(17,17,16,.16);
  -webkit-box-reflect:below 3px linear-gradient(transparent 74%,rgba(17,17,16,.12));
  transition:transform .7s var(--ease-expressive),box-shadow .7s var(--ease-expressive);
}
.mag:hover img{transform:translateY(-12px) scale(1.02);box-shadow:0 46px 80px -20px rgba(17,17,16,.5)}
.mag figcaption{
  margin-top:16px;display:flex;align-items:baseline;gap:10px;
}
.mag figcaption b{font-family:var(--display);font-weight:500;font-size:15.5px}
.mag figcaption i{font-style:normal;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
/* slim colophon bar under the shelf */
.mag-cta{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin:clamp(22px,3.4vh,32px) var(--pad) 0;
  padding-top:clamp(16px,2.4vh,22px);
  border-top:1px solid var(--hair);
}
.mag figcaption b{font-family:var(--sans);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.04em}
.mag-line{display:flex;flex-direction:row;align-items:baseline;gap:14px;flex-wrap:wrap}
.mag-line b{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(1.15rem,1.7vw,1.6rem);letter-spacing:.01em;line-height:1}
.mag-line b i{font-style:normal;color:var(--red)}
.mag-dot{color:var(--red);font-weight:700;font-size:14px}
.mag-line span:not(.mag-dot){font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}

/* ---------- interviews wall ---------- */
.wall-sec{background:var(--ink);color:var(--white);padding-bottom:clamp(90px,12vh,150px)}
.wall-sec .sec-sub{color:var(--white-soft)}
.wall-sec .sec-title em{color:var(--red)}
.wall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  padding:0 var(--pad);
}
.cell{
  position:relative;border-radius:10px;overflow:hidden;background:#1B1A18;
  aspect-ratio:9/16;cursor:pointer;
  transition:transform .6s var(--ease-expressive),box-shadow .6s var(--ease-expressive);
}
.cell:hover{transform:translateY(-6px)}
.cell.is-live{box-shadow:0 0 0 2px var(--red),0 24px 50px -12px rgba(226,61,46,.35)}
.cell video{width:100%;height:100%;object-fit:cover}
.cell figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 14px 14px;
  background:linear-gradient(180deg,transparent,rgba(17,17,16,.88));
  display:flex;flex-direction:column;gap:9px;
}
.cell-k{font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--white-soft)}
.snd{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--white);border:1px solid var(--white-hair);border-radius:999px;padding:8px 13px;
  transition:border-color .3s,background-color .3s,color .3s;
}
.snd svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8}
.cell:hover .snd{border-color:var(--red)}
.cell.is-live .snd{background:var(--red);border-color:var(--red);color:var(--white)}
.cell.is-live .snd .w1,.cell.is-live .snd .w2{animation:eq 1s infinite alternate}
@keyframes eq{from{opacity:.3}to{opacity:1}}

/* ---------- films (poster cards, text on image) ---------- */
.films-sec{background:#0F171E;color:var(--white);padding-bottom:clamp(60px,8vh,100px)}
.films-sec .sec-title{color:var(--white)}
.films-sec .sec-title em{color:var(--red)}
.films-sec .sec-sub{color:var(--white-soft)}
/* the screening room: hovered poster swells, siblings compress */
.films{
  display:flex;gap:10px;margin:0 var(--pad);
  height:clamp(480px,66vh,660px);
}
.film{
  position:relative;overflow:hidden;border-radius:10px;background:#141F29;
  color:var(--white);flex:1;min-width:0;cursor:pointer;
  transition:flex .85s var(--ease-expressive);
  will-change:flex;
}
.film:hover,.film.is-open{flex:2.3}
.film > img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.9) brightness(.8) contrast(1.02);transform:scale(1.01);
  transition:filter .8s var(--ease-productive),transform 1.5s var(--ease-expressive);
}
/* the room dims around the poster you're looking at */
.films:hover .film:not(:hover) > img{filter:grayscale(.9) brightness(.42)}
.films:hover .film:not(:hover) .film-body{opacity:.4}
.film:hover > img,.film.is-open > img{filter:grayscale(0) brightness(1);transform:scale(1.06)}
.film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,17,16,.3) 0%,rgba(17,17,16,0) 36%,rgba(17,17,16,.42) 62%,rgba(17,17,16,.94) 100%);
}
.film-num{
  position:absolute;top:16px;left:20px;z-index:2;
  font-family:var(--display);font-size:clamp(48px,5.4vw,86px);line-height:1;
  color:transparent;-webkit-text-stroke:1.5px rgba(251,250,247,.75);
  transition:color .6s var(--ease-productive),-webkit-text-stroke-color .6s var(--ease-productive);
}
.film:hover .film-num,.film.is-open .film-num{color:#00A8E1;-webkit-text-stroke-color:#00A8E1}
.film-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:24px 24px 26px;transition:opacity .5s var(--ease-productive)}
.film-body h3{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.3rem,1.8vw,1.8rem);letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent);
}
/* description collapses to zero height so every title shares one baseline */
.film-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-expressive)}
.film:hover .film-more,.film.is-open .film-more{grid-template-rows:1fr}
.film-more-in{overflow:hidden;min-height:0}
.film-tag,.film-meta{
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease-productive),transform .55s var(--ease-expressive);
}
.film:hover .film-tag,.film.is-open .film-tag{opacity:1;transform:none;transition-delay:.12s}
.film:hover .film-meta,.film.is-open .film-meta{opacity:1;transform:none;transition-delay:.2s}
.film-tag{color:rgba(251,250,247,.82);font-size:13.5px;margin-top:9px;line-height:1.55;max-width:34ch}
.film-meta{
  display:flex;gap:10px;align-items:center;margin-top:13px;
  font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#00A8E1;
}
.film-meta i{color:rgba(251,250,247,.5);font-style:normal}
.films-foot{display:flex;justify-content:center;padding:clamp(36px,5vh,56px) var(--pad) clamp(50px,7vh,80px)}
.films-foot .btn-line:hover{border-color:#00A8E1;color:#00A8E1}

/* ---------- experts ---------- */
.experts-sec{background:var(--paper);padding-bottom:clamp(80px,10vh,130px)}
/* the faculty wall: masthead directory cards, full-color headshots */
.expwall{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0 var(--pad);
}
.xp{
  position:relative;overflow:hidden;border-radius:10px;background:#FFFFFE;
  border:1px solid var(--hair);cursor:pointer;
  transition:transform .45s var(--ease-expressive),box-shadow .45s var(--ease-productive);
}
.xp:hover{transform:translateY(-6px);box-shadow:0 26px 46px -18px rgba(17,17,16,.22)}
.xp::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .55s var(--ease-expressive);
}
.xp:hover::before{transform:scaleX(1)}
.xp img{
  display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center top;
  transition:transform .8s var(--ease-expressive);
}
.xp:hover img{transform:scale(1.05)}
.xp figcaption{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px;
  border-top:1px solid var(--hair);
}
.xp figcaption i{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.22em;color:var(--red)}
.xp figcaption b{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1rem,1.35vw,1.35rem);letter-spacing:.01em;line-height:1.05;color:var(--ink);
}
.xp figcaption em{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* ---------- names + numbers band ---------- */
.band-sec{background:var(--ink);color:var(--white)}
.xmarq{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--white-hair)}
.xmarq-track{display:inline-flex;align-items:center;gap:30px;padding:22px 0;animation:marq 42s linear infinite;will-change:transform}
.xmarq-track b{font-family:var(--display);font-weight:400;font-style:italic;font-size:clamp(1.15rem,1.9vw,1.7rem);color:var(--white-soft)}
.xmarq-track i{color:var(--red);font-style:normal;font-weight:700}
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding:clamp(50px,7vh,80px) var(--pad);gap:20px;
}
.stat{text-align:center;position:relative}
.stat + .stat::before{
  content:"";position:absolute;left:-10px;top:12%;bottom:12%;width:1px;background:var(--white-hair);
}
.stat b{
  display:block;font-family:var(--display);font-weight:400;font-size:clamp(2.8rem,5.4vw,5rem);
  color:var(--white);font-variant-numeric:tabular-nums;line-height:1;
}
.stat b::after{content:"+";color:var(--red);font-weight:400}
.stat span{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--white-soft)}

/* ---------- voices ---------- */
.voices-sec{background:var(--paper)}
.voices-in{
  min-height:52vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(70px,10vh,120px) var(--pad);text-align:center;
}
.voice-stage{position:relative;width:min(980px,92vw);min-height:230px}
.voice{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:24px;
  opacity:0;transform:translateY(22px);visibility:hidden;
}
.voice.is-on{opacity:1;transform:translateY(0);visibility:visible;transition:opacity .9s var(--ease-enter),transform .9s var(--ease-enter)}
.voice p{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,3.4vw,3.1rem);line-height:1.06;letter-spacing:.006em;
}
.voice cite{
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--red);
}
.voice-dots{display:flex;gap:10px;margin-top:42px}
.voice-dots button{
  width:7px;height:7px;border-radius:50%;background:var(--hair-strong);
  transition:background-color .3s,transform .3s var(--ease-expressive);
}
.voice-dots button.is-on{background:var(--red);transform:scale(1.4)}

/* ---------- partner ---------- */
.partner-sec{background:var(--ink);color:var(--white)}
.partner-in{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(60px,9vh,110px) var(--pad) clamp(90px,12vh,150px);
}
.partner-sec .sec-sub{color:var(--white-soft);margin-inline:auto}
.partner-row{
  display:flex;gap:0;flex-wrap:wrap;justify-content:center;
  margin:46px 0 42px;border:1px solid var(--white-hair);border-radius:14px;overflow:hidden;
}
.p-item{
  padding:24px 34px;min-width:230px;
  border-right:1px solid var(--white-hair);
  transition:background-color .4s;
}
.p-item:last-child{border-right:0}
.p-item:hover{background:rgba(251,250,247,.05)}
.p-item b{display:block;font-family:var(--display);font-weight:500;font-size:1.25rem;color:var(--white)}
.p-item span{display:block;margin-top:6px;font-size:12px;color:var(--white-soft)}

/* ---------- finale ---------- */
.finale{position:relative;height:88vh;min-height:540px;overflow:hidden;background:var(--ink)}
.finale-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finale-mask{position:absolute;inset:0;width:100%;height:100%}
.mask-text{
  font-family:var(--display);font-weight:400;font-size:clamp(100px,20vw,390px);
  letter-spacing:.002em;
}
.finale-sub{
  position:absolute;left:0;right:0;bottom:clamp(38px,8vh,80px);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;color:var(--white);
}
.finale-word{
  font-weight:700;font-size:clamp(13px,2.2vw,22px);
  letter-spacing:clamp(.55em,1.3vw,1em);text-indent:clamp(.55em,1.3vw,1em);
  text-transform:uppercase;
}
.finale-word i{font-style:normal;color:var(--red)}
.finale-sub p{font-family:var(--display);font-style:italic;font-weight:400;color:var(--white-soft);font-size:clamp(.95rem,1.2vw,1.1rem)}

/* ---------- footer ---------- */
.footer{background:var(--paper);border-top:1px solid var(--hair-strong);padding:clamp(50px,7vh,80px) var(--pad) 30px}
.f-logo{height:34px;width:auto;filter:invert(1) brightness(.2)}
.f-cols{display:flex;gap:clamp(44px,9vw,130px);flex-wrap:wrap;margin:42px 0 56px}
.f-col h5{font-size:10px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.f-col a{display:block;padding:5px 0;color:var(--ink-soft);font-size:14px;transition:color .3s}
.f-col a:hover{color:var(--ink)}
.f-bot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--hair);padding-top:22px;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);
}

/* ---------- photo filmstrip ---------- */
.strip-sec{background:var(--paper);padding-bottom:clamp(80px,10vh,130px)}
.striprow{overflow:hidden;white-space:nowrap;margin-top:18px;padding-block:14px}
.striprow:first-of-type{margin-top:0}
.strip-track{display:inline-flex;align-items:center;gap:16px;will-change:transform;animation:marq 22s linear infinite}
.striprow.rev .strip-track{animation:marq-rev 26s linear infinite}
@keyframes marq-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.strip-track .ph{
  flex:0 0 auto;overflow:hidden;border-radius:8px;
  box-shadow:0 22px 44px -18px rgba(17,17,16,.35),0 3px 10px rgba(17,17,16,.12);
}
.strip-track .ph img{
  height:clamp(200px,28vh,310px);width:auto;display:block;
  filter:saturate(1.02);
  transition:transform .9s var(--ease-expressive);
}
.strip-track .ph:nth-child(3n+2) img{height:clamp(240px,33vh,360px)}
.strip-track .ph:nth-child(3n){height:auto}
.strip-track .ph:nth-child(2n){transform:translateY(10px)}
.strip-track .ph:nth-child(2n+1){transform:translateY(-8px)}
.strip-track .ph:hover img{transform:scale(1.07)}
html.static .strip-track{animation:none}

/* ---------- responsive ---------- */
@media(max-width:1100px){
  .films{display:grid;grid-template-columns:repeat(2,1fr);height:auto}
  .film{aspect-ratio:3/4.1}
  .film:hover,.film.is-open{flex:1}
  .film-body h3{white-space:normal;-webkit-mask-image:none;mask-image:none}
  .film-more{grid-template-rows:1fr}
  .film-tag,.film-meta{opacity:1;transform:none}
  .films:hover .film:not(:hover) > img{filter:grayscale(.9) brightness(.8)}
  .films:hover .film:not(:hover) .film-body{opacity:1}
  .doors{grid-template-columns:repeat(2,1fr)}
  .door{min-height:420px}
  .expwall{grid-template-columns:repeat(3,1fr)}
  .stats{grid-template-columns:repeat(2,1fr);row-gap:44px}
  .stat:nth-child(3)::before{display:none}
  .wall{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .nav{display:none}
  .menu-btn{display:flex}
  .door{min-height:380px}
  .hero-live{display:none}
}
@media(max-width:640px){
  .doors{grid-template-columns:1fr}
  .hero-frame{min-height:560px}
  .hero-foot-row{flex-direction:column;align-items:flex-start}
  .hero-scrim{background:linear-gradient(180deg,rgba(17,17,16,.38) 0%,rgba(17,17,16,.06) 30%,rgba(17,17,16,.3) 55%,rgba(17,17,16,.82) 100%)}
  .hero-btns{width:100%}
  .hero-btns .btn{flex:1;justify-content:center;padding:16px 18px}
  .wall{grid-template-columns:1fr 1fr;gap:10px;padding:0 16px}
  .cell figcaption{padding:10px}
  .snd span{display:none}
  .expwall{grid-template-columns:repeat(2,1fr);gap:8px}
  .mag{width:min(66vw,260px)}
  .mag figcaption{flex-direction:column;align-items:flex-start;gap:3px;margin-top:12px}
  .header-cta .btn{display:none}
  .f-cols{gap:34px}
  .films{grid-template-columns:1fr}
  .film{aspect-ratio:3/3.2}
}

@media(max-width:480px){
  .hero-btns{flex-direction:column}
}
/* touch has no hover ceremony: posters rest in full color */
@media(hover:none){
  .film > img{filter:grayscale(0) brightness(.94)}
}

/* ---------- reduced motion / static capture ---------- */
@media(prefers-reduced-motion:reduce){
  .ticker-track,.xmarq-track,.hero-live i{animation:none}
  .rv{opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
html.static .ticker-track,html.static .xmarq-track,html.static .hero-live i{animation:none}
html.static .rv{opacity:1!important;transform:none!important}
html.static .header{opacity:1!important}
.rv{opacity:0}