/* ──────────────────────────────────────────────────────────────────────────
   welcome.css — page styles for / (welcome.html)

   Extracted from welcome.html's inline <style> block so it can be cached
   across visits and so the template stays editable. Tokens (--bg, --accent,
   --display, etc.) are resolved against tokens.css, which is loaded later
   by _theme.html — that's fine because CSS custom properties cascade lazily
   (var() resolves at paint time, not parse time).

   Load order on this page:
     1. /static/welcome.css (this file) — page-local styles, link in <head>
     2. /static/tokens.css        — canonical tokens, loaded by _theme.html
     3. /static/components.css    — shared components, loaded by _theme.html
   ────────────────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* Tokens loaded from /static/tokens.css via _theme.html */
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#3a3a3a}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff;padding:8px 14px;z-index:100;font-size:13px;font-weight:600;border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ── Top bar ────────────────────────────────────────────────────────────── */
#topbar{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;background:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 100%);transition:background .3s,backdrop-filter .3s}
#topbar.scrolled{background:rgba(10,10,10,.92);backdrop-filter:blur(8px);border-bottom:1px solid #181818}
/* Light mode: the dark hero-fade gradient becomes a stray dark band over
   the lilac body. Drop it. Topbar reads on its own backdrop blur once
   scrolled. */
[data-theme="light"] #topbar{background:transparent}
[data-theme="light"] #topbar.scrolled{background:rgba(245,241,248,.92);border-bottom-color:var(--rule)}
#logo{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.22em;color:#f0ede8;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 8px rgba(0,0,0,.6),0 0 14px rgba(0,0,0,.35)}
/* Once the topbar gains its solid background on scroll, the dual shadow
   stops earning its keep — drop it to keep the wordmark crisp. */
#topbar.scrolled #logo{text-shadow:none}
/* In light mode the topbar sits on the lilac page bg (mobile always, desktop
   once scrolled), so the dual dark text-shadow renders as a visible halo
   around the wordmark. Drop it for light mode entirely. */
[data-theme="light"] #logo{text-shadow:none}
.topbar-right{display:flex;gap:18px;align-items:center}
#topbar-nav{display:flex;gap:28px;align-items:center}
/* .nav-link / .btn-primary / .btn-secondary canonical rules live in
   components.css. Earlier duplicates here were dead (components.css loads
   later via _theme.html and wins on equal specificity). Welcome-specific
   nav/btn overrides — if any are ever needed — belong in welcome.html's
   post-_theme.html <style> block where they can win source-order. */

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding-top:max(80px,calc(64px + env(safe-area-inset-top,0)));padding-bottom:clamp(140px,18vh,220px)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media{cursor:pointer}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease;z-index:1}
.hero-media video.visible{opacity:.88;z-index:2}
/* Advancing without dipping through the dark page background: the incoming
   film is dropped in *underneath* at full opacity with no fade (.hero-under),
   then the outgoing film fades out on top of it (.hero-fade-out). Because a
   fully-opaque film is always beneath, the dissolve reveals live video the
   whole way through instead of crossing two semi-transparent layers (which
   read as a fade to black). */
.hero-media video.hero-under{opacity:.88;z-index:1;transition:none}
.hero-media video.hero-fade-out{opacity:0;z-index:2}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,rgba(0,0,0,.12) 0%,rgba(0,0,0,.45) 100%),linear-gradient(to bottom,rgba(0,0,0,.1) 0%,transparent 35%,rgba(0,0,0,.5) 82%,#0a0a0a 100%)}
.hero-content{position:relative;z-index:2;padding:0 clamp(24px,5vw,80px);max-width:1100px;width:100%;margin:0 auto}
.hero-eyebrow{font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--accent2);margin-bottom:28px;opacity:0;animation:fadeUp .8s .2s forwards;display:flex;align-items:center;gap:14px}
.hero-eyebrow::before{content:'';width:28px;height:1px;background:var(--accent2);opacity:.8;flex:0 0 28px}
.hero h1{font-family:var(--display);font-size:clamp(2.5rem,5vw,3.75rem);font-weight:400;font-style:normal;line-height:1.05;letter-spacing:-.02em;margin-bottom:28px;text-shadow:0 2px 16px rgba(0,0,0,.8),0 6px 40px rgba(0,0,0,.55);opacity:0;animation:fadeUp 1s .35s forwards}
.hero h1 em{font-style:normal;color:var(--accent2);font-weight:400}
.hero-lead{font-family:var(--sans);font-size:clamp(15px,1.5vw,17px);font-weight:400;font-style:normal;color:#f0ede8;line-height:1.6;margin-bottom:22px;max-width:640px;opacity:0;animation:fadeUp .9s .55s forwards;text-shadow:0 1px 12px rgba(0,0,0,.85),0 2px 20px rgba(0,0,0,.5)}
.hero-byline{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.06em;color:rgba(240,237,232,.95);margin-bottom:14px;opacity:0;animation:fadeUp .8s .7s forwards;text-shadow:0 1px 10px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.5)}
.hero-byline em{color:rgba(240,237,232,.78);font-style:normal;font-weight:400}
.hero-byline .byline-name{color:#b3d4be;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s;font-weight:500;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.hero-byline .byline-name:hover,.hero-byline .byline-name:focus-visible{color:#fff;border-bottom-color:#b3d4be}
[data-theme="light"] .hero-byline .byline-name{color:#b3d4be !important;text-shadow:0 1px 14px rgba(0,0,0,.85)}
[data-theme="light"] .hero-byline .byline-name:hover,[data-theme="light"] .hero-byline .byline-name:focus-visible{color:#fff !important;border-bottom-color:#b3d4be !important}
.hero-proof{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.04em;color:rgba(240,237,232,.85);margin-bottom:40px;opacity:0;animation:fadeUp .8s .8s forwards;text-shadow:0 1px 10px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.5)}
.hero-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;opacity:0;animation:fadeUp .8s .85s forwards}
.hero-actions .btn-secondary{margin-top:12px;color:#f0ede8;font-weight:500;border-bottom-color:rgba(240,237,232,.55);text-shadow:0 1px 10px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.5)}
.hero-actions .btn-secondary:hover{color:#fff;border-bottom-color:#fff}
[data-theme="light"] .hero-actions .btn-secondary{color:rgba(240,237,232,.85) !important;border-bottom-color:rgba(240,237,232,.45) !important;text-shadow:0 1px 10px rgba(0,0,0,.7)}
[data-theme="light"] .hero-actions .btn-secondary:hover{color:#fff !important;border-bottom-color:#fff !important}
/* .btn, .btn-primary, .btn-secondary canonical rules live in components.css.
   Earlier duplicates here were dead (components.css loads later, wins
   source-order on equal-specificity). Welcome-specific button overrides
   that need to win against components.css live in welcome.html's
   post-_theme.html <style> block. */
.scroll-indicator{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:2;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:.3em;color:rgba(240,237,232,.95);text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;opacity:0;animation:fadeUp 1s 1.2s forwards;text-shadow:0 1px 10px rgba(0,0,0,.85),0 2px 16px rgba(0,0,0,.5)}
.scroll-line{width:1px;height:32px;background:linear-gradient(to bottom,var(--sage),transparent);animation:scrollPulse 2s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{transform:scaleY(.5);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* Hero controls — sit inline at the right end of the top bar */
.hero-ctrl{background:rgba(0,0,0,.42);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.28);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;transition:color .2s,background .2s,border-color .2s;flex-shrink:0;padding:0;box-shadow:0 2px 12px rgba(0,0,0,.35)}
.hero-ctrl:hover,.hero-ctrl:focus-visible{color:#fff;background:rgba(0,0,0,.62);border-color:var(--accent2)}
.hero-ctrl[aria-pressed="false"]{color:var(--accent2);border-color:rgba(179,212,190,.6)}
/* Hero sits over a dark video — icons stay light-on-dark in both themes */
[data-theme="light"] .hero-ctrl{color:#fff !important;background:rgba(0,0,0,.42) !important;border-color:rgba(255,255,255,.28) !important}
[data-theme="light"] .hero-ctrl:hover,[data-theme="light"] .hero-ctrl:focus-visible{color:#fff !important;background:rgba(0,0,0,.62) !important;border-color:var(--accent2) !important}
[data-theme="light"] .hero-ctrl[aria-pressed="false"]{color:var(--accent2) !important;border-color:rgba(179,212,190,.6) !important}
.hero-ctrls{display:flex;gap:8px;align-items:center}

/* ── Sections ───────────────────────────────────────────────────────────── */
section{padding:clamp(80px,12vh,160px) clamp(24px,5vw,80px)}
.section-inner{max-width:1100px;margin:0 auto}
.section-header{margin-bottom:clamp(48px,8vh,80px);max-width:780px}
.section-eyebrow{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section-title{font-family:var(--serif);font-size:clamp(1.75rem,4vw,2.8rem);font-weight:400;line-height:1.15;letter-spacing:-.01em}

.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── Exploring Consciousness intro ─────────────────────────────────────────────────────── */
/* Tighter vertical padding here so the cinema plate fits roughly in one
   viewport without scrolling on a standard laptop. The plate is the dense
   center of this section; over-padding above/below pushed the CTA off-screen. */
.intro{position:relative;padding-top:clamp(48px,7vh,96px);padding-bottom:clamp(48px,7vh,96px)}
.intro-inner{max-width:1100px;margin:0 auto}
.intro p,.intro p.lead{max-width:780px}

/* Cinema plate — letterboxed featured zone unifying the video + reel + title + lead */
.cinema-plate{position:relative;background:#070707;border-radius:6px;overflow:hidden;margin:clamp(40px,6vw,72px) 0 clamp(28px,4vw,44px);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.05)}
.plate-bar{background:#000;display:flex;align-items:center;padding:12px 28px;min-height:42px}
.plate-bar-top{border-bottom:1px solid rgba(255,255,255,.05)}
.plate-bar-bottom{border-top:1px solid rgba(255,255,255,.05);min-height:28px;padding-block:0}
.plate-bar .section-eyebrow{margin:0}
.plate-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);gap:36px;padding:28px;align-items:center}
.plate-stage{min-width:0;display:flex;flex-direction:column;gap:14px}
.plate-stage .intro-feature{margin:0;box-shadow:none}
.plate-stage .intro-reel{margin:0}
.plate-caption{display:flex;flex-direction:column;gap:20px}
.plate-caption .section-title{font-size:clamp(1.4rem,2.2vw,2rem);line-height:1.16;margin:0;color:#f0ede8;max-width:none}
.plate-caption .lead{font-family:var(--display);font-size:clamp(.98rem,1.15vw,1.1rem);font-weight:300;line-height:1.55;color:rgba(240,237,232,.72);margin:0;max-width:none}
.plate-caption .intro-cta-row{margin:0}
[data-theme="light"] .cinema-plate{border-color:rgba(0,0,0,.1)}
@media (max-width:880px){
  .plate-body{grid-template-columns:1fr;gap:22px;padding:20px}
  .plate-bar{padding:10px 18px;min-height:36px}
  .plate-caption .section-title{font-size:clamp(1.25rem,4vw,1.7rem)}
}

/* Essay text continuing the section below the plate */
.intro-essay{max-width:780px;margin:0}

/* Featured film + reel — large playing film with a clickable thumbnail strip */
.intro-feature{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#070707;border:1px solid rgba(240,237,232,.06);margin:clamp(40px,6vw,72px) 0 clamp(32px,5vw,56px);box-shadow:0 30px 80px -20px rgba(0,0,0,.55)}
.intro-feature video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.intro-feature video.visible{opacity:1}
.intro-feature::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,.6) 100%);pointer-events:none;z-index:2}
.intro-feature .feat-meta{position:absolute;left:20px;bottom:20px;right:20px;z-index:3;display:flex;justify-content:space-between;align-items:flex-end;gap:14px}
.intro-feature .feat-title{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,1.8vw,1.5rem);color:#fff;line-height:1.2;max-width:62%;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.intro-feature .feat-status{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);padding:8px 12px;border-radius:99px;border:1px solid rgba(255,255,255,.18)}
.intro-feature .feat-status .dot{width:7px;height:7px;border-radius:50%;background:#ff5a4a;animation:liveBlink 1.6s ease-in-out infinite}
@keyframes liveBlink{0%,100%{opacity:1}50%{opacity:.4}}
[data-theme="light"] .intro-feature{border-color:var(--rule)}

.intro-reel{display:flex;flex-direction:column;gap:8px;margin-bottom:0}
.intro-reel-label{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--text3);padding-bottom:4px;border-bottom:1px solid rgba(240,237,232,.12)}
[data-theme="light"] .intro-reel-label{color:var(--text3);border-bottom-color:var(--rule)}
/* 2-row grid: enough variety without making the plate scroll off-viewport.
   Tile count is capped in JS to slice(0, 10). */
.intro-reel-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px;padding:2px 0}
.intro-reel-tile{aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#0a0a0a;border:1px solid rgba(240,237,232,.06);cursor:pointer;position:relative;transition:transform .2s,border-color .2s,box-shadow .2s}
.intro-reel-tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.intro-reel-tile.active{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2)}
.intro-reel-tile video,.intro-reel-tile img{width:100%;height:100%;object-fit:cover;display:block}
.intro-reel-tile::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 65%,rgba(0,0,0,.35) 100%);pointer-events:none}
[data-theme="light"] .intro-reel-tile{border-color:var(--rule);background:var(--bg3)}
[data-theme="light"] .intro-reel-tile.active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
@media (prefers-reduced-motion: reduce){.intro-feature video,.intro-reel-tile video{display:none}}
.intro p{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text2);margin-bottom:22px;line-height:1.85}
.intro p.lead{color:var(--text);font-size:clamp(1.15rem,1.8vw,1.4rem);font-family:var(--display);font-weight:300;font-style:normal;margin-bottom:32px;line-height:1.5}
.stats{display:flex;gap:clamp(28px,5vw,72px);margin-top:56px;flex-wrap:wrap;border-top:1px solid #1a1a1a;padding-top:36px}
.stat-num{font-family:var(--serif);font-size:clamp(1.9rem,3vw,2.6rem);font-weight:400;color:var(--accent2);line-height:1}
.stat-label{font-size:11px;color:var(--text2);letter-spacing:.1em;text-transform:uppercase;margin-top:8px}
.intro-cta-row{margin-top:40px;display:flex;justify-content:flex-start}

/* ── Threads ────────────────────────────────────────────────────────────── */
.threads{background:var(--bg2);border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
.thread-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(18px,2.5vw,28px)}
.thread{position:relative;border-radius:12px;overflow:hidden;background:#0a0a0a;border:1px solid #1a1a1a;transition:border-color .35s,transform .35s;display:block}
.thread:hover{border-color:rgba(136,179,158,.35);transform:translateY(-4px)}
.thread:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.thread-media{aspect-ratio:4/5;overflow:hidden;background:#0a0a0a;position:relative}
.thread-media img,.thread-media video{width:100%;height:100%;object-fit:cover;transition:transform .8s;display:block}
.thread:hover .thread-media img,.thread:hover .thread-media video{transform:scale(1.04)}
.thread-media::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.4) 50%,transparent 100%)}
.thread-body{position:absolute;bottom:0;left:0;right:0;padding:clamp(20px,3vw,32px);z-index:2}
.thread-num{font-size:11px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:10px;font-weight:600}
.thread-title{font-family:var(--serif);font-size:clamp(1.5rem,2.5vw,2.1rem);font-weight:400;margin-bottom:10px;line-height:1.1}
.thread-desc{font-size:13px;color:rgba(255,255,255,.75);line-height:1.6;max-width:340px}
.thread-arrow{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
/* Light-mode override for the hero: the top of the page sits over a dark video,
   so the topbar text and eyebrow need to stay light until the user scrolls past
   the hero. Once .scrolled is on, the global lilac-topbar / dark-text rules in
   _theme.html take over. Scoped to ≥721px because on phones the nav lives
   inside the mobile drawer (light lilac background), where forcing
   light-cream text makes the links nearly invisible. */
@media (min-width:721px){
  [data-theme="light"] #topbar:not(.scrolled) #logo,
  [data-theme="light"] header#topbar:not(.scrolled) #logo{color:#f0ede8 !important}
  [data-theme="light"] #topbar:not(.scrolled) .nav-link{color:rgba(240,237,232,.75) !important}
  [data-theme="light"] #topbar:not(.scrolled) .nav-link:hover,
  [data-theme="light"] #topbar:not(.scrolled) .nav-link.active{color:#fff !important}
}
/* Desktop hero is full-bleed dark video, so light-theme needs to force the
   topbar pieces and hero text to light cream until the user scrolls past it.
   Mobile uses the split layout (Option B) where the topbar sits on the lilac
   page bg and content sits below a rounded video card, so the global dark-text
   defaults apply correctly there — these overrides are desktop-only. */
@media (min-width:641px){
  [data-theme="light"] .hero-eyebrow{color:rgba(240,237,232,.85) !important}
  [data-theme="light"] .hero-eyebrow::before{background:rgba(240,237,232,.65) !important}
  [data-theme="light"] .hero h1{color:#f0ede8}
  [data-theme="light"] .hero h1 em{color:#c9d8cf}
}

[data-theme="light"] .threads{background:var(--bg2);border-color:var(--rule)}
[data-theme="light"] .thread{background:var(--bg3);border-color:var(--rule)}
[data-theme="light"] .thread:hover{border-color:var(--accent)}
[data-theme="light"] .thread-media{background:var(--bg3)}
[data-theme="light"] .thread-media::after{background:linear-gradient(to top,rgba(10,10,10,.88) 0%,rgba(10,10,10,.4) 50%,transparent 100%)}

/* ── Book feature (second edition) ─────────────────────────────────────── */
.book-feature{position:relative}
.book-feature::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(420px,40%);height:1px;background:linear-gradient(90deg,transparent 0%,rgba(240,237,232,.14) 50%,transparent 100%)}
.book-feature-inner{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(40px,6vw,80px);align-items:center;max-width:1100px;margin:0 auto}
.book-feature-media{display:flex;justify-content:center}
.book-feature-media img{width:100%;max-width:340px;height:auto;display:block;border-radius:4px;box-shadow:0 60px 120px -50px rgba(0,0,0,.9),0 30px 60px -25px rgba(136,179,158,.2)}
.book-feature-body .section-title{margin-bottom:18px}
.book-feature-body .section-title em{font-style:italic;color:var(--accent2)}
.book-feature-lead{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--text2);line-height:1.7;margin-bottom:32px;max-width:520px}
.book-feature-actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
@media(max-width:780px){
  .book-feature-inner{grid-template-columns:1fr;gap:32px}
  .book-feature-media{justify-content:flex-start}
  .book-feature-media img{max-width:240px}
}
[data-theme="light"] .book-feature::before{background:linear-gradient(90deg,transparent 0%,rgba(45,90,71,.18) 50%,transparent 100%)}

/* ── Voices teaser (three pull-quote cards) ─────────────────────────────── */
.voices-teaser{background:var(--bg2);border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
.voices-teaser-inner{max-width:1100px;margin:0 auto}
.voices-teaser-lead{font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--text2);line-height:1.6;margin-top:16px;max-width:600px}
.voices-triplet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,28px);margin-top:48px}
.qcard{background:rgba(255,255,255,.03);border:1px solid rgba(240,237,232,.08);border-radius:8px;padding:28px 28px 24px;display:flex;flex-direction:column;gap:18px;transition:border-color .2s,transform .2s,box-shadow .2s;text-decoration:none;color:inherit}
.qcard:hover{border-color:rgba(136,179,158,.35);transform:translateY(-2px);box-shadow:0 18px 36px -16px rgba(0,0,0,.45)}
.qcard:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.qcard .qmark{font-family:var(--display),'Cormorant Garamond',Georgia,serif;font-size:46px;line-height:.4;color:var(--accent);opacity:.55;height:24px}
.qcard blockquote{font-family:var(--display),'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:15.5px;line-height:1.55;color:rgba(240,237,232,.86);flex:1}
.qcard .person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid rgba(240,237,232,.07)}
.qcard .person img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid rgba(240,237,232,.1);flex-shrink:0;background:rgba(136,179,158,.08)}
.qcard .person .info{display:flex;flex-direction:column;min-width:0}
.qcard .person .nm{font-size:13px;color:#f0ede8;font-weight:400;line-height:1.3}
.qcard .person .role{font-size:11px;color:rgba(240,237,232,.5);font-weight:300;line-height:1.35}
.voices-footer{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:24px;border-top:1px dashed rgba(240,237,232,.1);gap:16px;flex-wrap:wrap}
.voices-more-count{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(240,237,232,.45)}
[data-theme="light"] .voices-teaser{background:var(--bg2);border-color:var(--rule)}
[data-theme="light"] .qcard{background:#fff;border-color:var(--rule)}
[data-theme="light"] .qcard:hover{border-color:var(--accent);box-shadow:0 18px 36px -16px rgba(45,90,71,.18)}
[data-theme="light"] .qcard blockquote{color:#2a2a2a}
[data-theme="light"] .qcard .person{border-top-color:var(--rule)}
[data-theme="light"] .qcard .person img{background:rgba(45,90,71,.06);border-color:rgba(45,90,71,.18)}
[data-theme="light"] .qcard .person .nm{color:#0a0a0a}
[data-theme="light"] .qcard .person .role{color:#5e5e5e}
[data-theme="light"] .voices-footer{border-top-color:var(--rule)}
[data-theme="light"] .voices-more-count{color:#5e5e5e}
@media(max-width:900px){.voices-triplet{grid-template-columns:1fr}}

/* ── Other projects (lab work, surfaced on home) ─────────────────────── */
.other-projects{background:var(--bg2);border-top:1px solid #1a1a1a;border-bottom:1px solid #1a1a1a}
.op-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.op-card{display:flex;flex-direction:column;border:1px solid #1a1a1a;border-radius:8px;background:rgba(255,255,255,.02);overflow:hidden;transition:border-color .25s,background .25s,transform .25s;text-decoration:none;color:inherit}
.op-card:hover{border-color:rgba(136,179,158,.3);background:rgba(136,179,158,.04);transform:translateY(-2px)}
.op-card:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.op-media{aspect-ratio:16/9;background:#0a0a0a;overflow:hidden}
.op-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.op-card:hover .op-media img{transform:scale(1.04)}
.op-meta{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px}
.op-meta .op-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sage);font-weight:300}
.op-meta .op-title{font-family:var(--serif);font-size:1.3rem;font-weight:300;line-height:1.2;letter-spacing:-.005em;color:var(--text);margin:0}
.op-meta .op-desc{font-family:var(--sans);font-weight:300;font-size:13.5px;color:var(--text2);line-height:1.65;margin:0}
.op-cta-row{margin-top:32px;text-align:center}
[data-theme="light"] .other-projects{background:var(--bg2);border-color:var(--rule)}
[data-theme="light"] .op-card{background:var(--bg3);border-color:var(--rule)}
[data-theme="light"] .op-card:hover{background:rgba(45,90,71,.04);border-color:var(--accent)}
[data-theme="light"] .op-media{background:var(--bg3)}

/* ── More ───────────────────────────────────────────────────────────────── */
.more-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.more-card{padding:32px;border:1px solid #1a1a1a;border-radius:8px;background:rgba(255,255,255,.02);transition:border-color .2s,background .2s,transform .2s;display:flex;flex-direction:column;gap:12px}
.more-card:hover{border-color:rgba(136,179,158,.3);background:rgba(136,179,158,.04);transform:translateY(-2px)}
.more-card:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.more-card-icon{color:var(--accent);margin-bottom:4px}
.more-card-eyebrow{font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;font-weight:600}
.more-card-title{font-family:var(--serif);font-size:1.4rem;font-weight:400;line-height:1.2}
.more-card-desc{font-size:14px;color:var(--text2);line-height:1.7;flex:1}
.more-card-cta{font-size:11px;color:var(--accent);letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-top:8px;display:inline-flex;align-items:center;gap:6px}

/* ── Footer ─────────────────────────────────────────────────────────────── */
footer{padding:56px clamp(24px,5vw,80px) 32px;border-top:1px solid #181818}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;align-items:start}
.footer-brand{display:flex;flex-direction:column;gap:6px}
.footer-brand .logo-text{font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--text)}
.footer-brand .logo-text span{color:var(--accent)}
.footer-brand p{font-size:12px;color:var(--text3);max-width:420px;line-height:1.6}
.footer-h{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text3);margin-bottom:14px;font-weight:600}
.footer-list{display:flex;flex-direction:column;gap:9px}
.footer-list a{font-size:12px;color:var(--text2);transition:color .2s;display:inline-flex;align-items:center;gap:7px}
.footer-list a:hover{color:var(--accent)}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media(max-width:1024px){
  #topbar{padding:14px 24px}
  #topbar-nav{gap:20px}
  section{padding:clamp(64px,10vh,120px) clamp(20px,5vw,40px)}
}
@media(max-width:900px){
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px 24px}
  .footer-brand{grid-column:1/-1}
  #topbar-nav{gap:16px}
  .thread-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .more-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
}
@media(max-width:640px){
  #topbar{padding:12px 16px}
  .topbar-right{gap:10px}
  #topbar-nav{gap:12px}
  .nav-link{font-size:10px;letter-spacing:.1em}
  .hero-ctrl{width:44px;height:44px}
  .hero-ctrls .theme-toggle{width:44px;height:44px}
  .hero-ctrls{gap:8px}
  /* The hero overlay isn't inside <main>, so the global main-padding
     rule in _theme.html doesn't reach it — apply 28px here so the hero
     copy has the same gutter as the rest of the page. */
  .hero-content{padding-left:28px;padding-right:28px}
  .intro p, .intro p.lead{max-width:none}
  /* Sections that are meant to be full-bleed (video hero, tinted
     backgrounds) need to escape the 28px gutter on <main> so their
     background extends to the screen edges. Their inner content
     wrappers then re-apply the 28px padding so text doesn't hug the
     edge. */
  main > section.hero,
  main > section.threads,
  main > section.voices-teaser{
    margin-left:-28px;
    margin-right:-28px;
  }
  main > section.threads > .section-inner,
  main > section.voices-teaser > .voices-teaser-inner{
    padding-left:28px;
    padding-right:28px;
  }
  /* On narrow phones the topbar holds: logo + 3 hero-ctrls (play / sound /
     theme) + the injected hamburger. That overflows the screen. Drop the
     hero-ctrls cluster; the hero video autoplays muted anyway and the user
     can still tap-mute via the iOS / Android system controls. Logo also
     shrinks so the hamburger always fits inside the right edge. */
  .hero-ctrls{display:none}
  /* ── Hero — split layout (Option B). Video lives in a rounded card at
       the top, content sits below on the page bg. No overlay needed since
       text is on a solid surface, not over moving imagery. */
  .hero{
    min-height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    padding:max(88px,calc(80px + env(safe-area-inset-top,0))) 0 32px;
    overflow:visible;
    background:var(--bg);
  }
  /* Video pulled out of full-bleed absolute positioning into the flex flow,
     constrained to a rounded card. Height kept under half the viewport so the
     copy block is comfortably above the fold on most phones. */
  .hero-media{
    position:relative;
    inset:auto;
    height:44vh;
    min-height:240px;
    max-height:380px;
    margin:0 14px 26px;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    flex-shrink:0;
  }
  .hero-overlay{display:none}
  .hero-content{padding:0 22px;max-width:none}
  .hero-eyebrow{
    font-size:10px;letter-spacing:.22em;gap:10px;margin-bottom:18px;
    color:var(--accent2);
  }
  .hero-eyebrow::before{
    width:20px;flex:0 0 20px;background:var(--accent2);opacity:.7;
  }
  .hero h1{
    font-size:clamp(2rem,9vw,2.75rem);
    line-height:1.08;
    margin-bottom:16px;
    color:var(--text);
    text-shadow:none;
  }
  .hero h1 em{color:var(--accent)}
  /* The actual mobile-light #hero-title override lives in the post-_theme.html
     <style> block at the bottom of welcome.html — _theme.html ships an identical
     selector with !important, so we need to win on source order, not just
     specificity. */
  .hero-lead{
    line-height:1.55;margin-bottom:22px;
    color:var(--text2);
    text-shadow:none;
  }
  .hero-byline{font-size:12px;margin-bottom:8px;color:var(--text3);text-shadow:none}
  .hero-proof{font-size:12px;margin-bottom:28px;color:var(--text3);text-shadow:none}
  .hero-actions{gap:14px;flex-direction:column;align-items:flex-start}
  /* Buttons re-skinned for the lilac-bg context — primary becomes a dark
     outline button instead of light-on-dark. */
  .hero-actions .btn-primary{
    color:var(--text);
    border-color:var(--text);
    background:transparent;
    text-shadow:none;
  }
  .hero-actions .btn-primary:hover,
  .hero-actions .btn-primary:focus-visible{
    background:var(--bg2);
    border-color:var(--accent2);
  }
  .hero-actions .btn-secondary{
    color:var(--text2);
    border-bottom-color:var(--text3);
    text-shadow:none;
  }
  .hero-actions .btn-secondary:hover,
  .hero-actions .btn-secondary:focus-visible{
    color:var(--text);
    border-bottom-color:var(--accent2);
  }
  .stats{gap:20px;padding-top:24px;margin-top:36px}
  .stat-num{font-size:1.6rem}
  .scroll-indicator{display:none}
  .footer-inner{grid-template-columns:1fr}
  .thread-grid{grid-template-columns:1fr}
  .more-grid{grid-template-columns:1fr}
  .more-card{padding:22px}
}
@media(max-width:420px){
  #topbar-nav{gap:10px}
  .nav-link{font-size:9.5px}
  .hero h1{font-size:1.85rem}
  .btn-primary{padding:11px 22px;font-size:9.5px}
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .hero-media video{display:none}
  .hero{background:linear-gradient(135deg,#0a0a0a 0%,#1a1024 50%,#0a0a0a 100%)}
  .scroll-indicator{display:none}
  .reveal{opacity:1;transform:none}
}

/* ── In-page film player ────────────────────────────────────────────────── */
#film-player{position:fixed;inset:0;z-index:1000;background:#000;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .22s ease}
#film-player[data-open="true"]{display:flex;opacity:1}
#fp-video{width:100%;height:100%;object-fit:contain;background:#000;outline:none}
#fp-title{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));right:max(88px,env(safe-area-inset-right));color:#fff;font-family:var(--serif);font-style:italic;font-size:clamp(1rem,1.6vw,1.4rem);line-height:1.2;text-shadow:0 2px 14px rgba(0,0,0,.75);pointer-events:none;opacity:0;transition:opacity .25s ease}
#film-player[data-open="true"] #fp-title{opacity:.92}
#fp-close{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.3);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:background .2s,border-color .2s,color .2s;padding:0}
#fp-close:hover,#fp-close:focus-visible{background:rgba(0,0,0,.78);border-color:#fff;color:#fff}
