*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Palette ── */
  --ink:        #0A0B0D;
  --ink-soft:   #15171A;
  --paper:      #F2ECE2;
  --paper-warm: #E8DFD1;
  --bone:       #D8CFC2;
  --ash:        #595450;  /* metadata mono on cream — AA (6.36:1 on --paper) */
  --fg:         #EFE9DC;
  --dim:        rgba(239, 233, 220, 0.55);
  --muted:      rgba(239, 233, 220, 0.28);

  /* Color grades — swapped per page via [data-grade] */
  --grade-accent: #E6B65A;         /* tungsten — home */
  --grade-accent-soft: rgba(230, 182, 90, 0.14);
  --grade-tint: 230, 182, 90;

  /* ── Type ── */
  --display: 'Fraunces', 'Cormorant Garamond', serif;
  --italic:  'Instrument Serif', 'Cormorant Garamond', serif;
  --sans:    'Inter Tight', 'Inter', sans-serif;
  --mono:    'JetBrains Mono', 'Space Mono', ui-monospace, monospace;

  /* ── Cinema ── */
  --letterbox: 0vh;                 /* animated via JS on load */
  --grain-opacity: 0.06;
  --vignette: 0 0 180px 40px rgba(0,0,0,0.55) inset;

  /* ── Easing ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cut: cubic-bezier(0.86, 0, 0.07, 1);
}

/* ── Color grades per page ── */
[data-grade="tungsten"]  { --grade-accent: #E6B65A; --grade-accent-soft: rgba(230,182,90,0.14);  --grade-tint: 230,182,90; }
[data-grade="moonlight"] { --grade-accent: #8FB4C4; --grade-accent-soft: rgba(143,180,196,0.14); --grade-tint: 143,180,196; }
[data-grade="sodium"]    { --grade-accent: #D0602A; --grade-accent-soft: rgba(208,96,42,0.16);   --grade-tint: 208,96,42;   }
[data-grade="daylight"]  { --grade-accent: #2B2A28; --grade-accent-soft: rgba(43,42,40,0.1);     --grade-tint: 43,42,40;    }

html { scroll-behavior: auto; }

body {
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.has-viewfinder {
  cursor: none;
}

html, body { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

.section--light { background: var(--paper); color: var(--ink); }
.section--light .text-secondary { color: var(--ash); }
.body--light    { background: var(--paper); color: var(--ink); }

/* a11y: on cream, the gold accent fails contrast (1.60:1). These labels are
   meant to be read, so on light sections use ink instead. The gold accent is
   kept everywhere else (dark backgrounds) where it passes. */
.section--light .presentation-label,
.section--light .timeline-num { color: var(--ink); }

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; text-decoration: none; }
button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
.has-viewfinder button { cursor: none; }

/* ══════════════════════════════════════════
   GRAIN — film emulsion overlay
   ══════════════════════════════════════════ */
.grain {
  position: fixed; inset: -5%;
  pointer-events: none; z-index: 800;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.96  0 0 0 0 0.92  0 0 0 0 0.85  0 0 0 1.8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 6s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0,0); }
}

/* ══════════════════════════════════════════
   VIEWFINDER CURSOR
   ══════════════════════════════════════════ */
.viewfinder {
  position: fixed;
  width: 28px; height: 28px;
  top: 0; left: 0;
  pointer-events: none; z-index: 999;
  transform: translate3d(-100px, -100px, 0);
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), opacity 0.3s;
  mix-blend-mode: difference;
}
.viewfinder::before,
.viewfinder::after,
.viewfinder > span::before,
.viewfinder > span::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid #fff;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out);
}
.viewfinder::before { top: 0; left: 0;    border-right: none;  border-bottom: none; }
.viewfinder::after  { top: 0; right: 0;   border-left: none;   border-bottom: none; }
.viewfinder > span  { position: absolute; inset: 0; display: block; }
.viewfinder > span::before { bottom: 0; left: 0;  border-right: none; border-top: none; }
.viewfinder > span::after  { bottom: 0; right: 0; border-left: none;  border-top: none; }
.viewfinder.is-focus { width: 76px; height: 46px; }
.viewfinder.is-focus::before,
.viewfinder.is-focus::after,
.viewfinder.is-focus > span::before,
.viewfinder.is-focus > span::after { width: 14px; height: 14px; }
.viewfinder.is-rec { width: 80px; height: 80px; }
.viewfinder.is-rec::before,
.viewfinder.is-rec::after,
.viewfinder.is-rec > span::before,
.viewfinder.is-rec > span::after { width: 16px; height: 16px; border-color: #FF3B30; }

/* pointer: coarse handled in responsive.css */

/* ══════════════════════════════════════════
   LETTERBOX — cinema scope bars
   ══════════════════════════════════════════ */
.letterbox {
  position: fixed; left: 0; right: 0;
  height: var(--letterbox);
  background: #000;
  z-index: 900;
  pointer-events: none;
  transition: height 1s var(--ease-cut);
}
.letterbox--top    { top: 0; }
.letterbox--bottom { bottom: 0; }

/* ══════════════════════════════════════════
   HUD — on-camera overlay
   ══════════════════════════════════════════ */
.hud {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 90;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.8s var(--ease-out);
}
.hud.is-ready { opacity: 0.85; }

.hud-corner {
  position: absolute;
  padding: 1.5rem 2rem;
  display: flex; gap: 0.35rem; align-items: center;
}
.hud-corner--tl { top: 4.8rem; left: 0;  flex-direction: column; align-items: flex-start; }
.hud-corner--tr { top: 4.8rem; right: 0; flex-direction: column; align-items: flex-end; }
.hud-corner--bl { bottom: 0; left: 0;  flex-direction: column; align-items: flex-start; }
.hud-corner--br { bottom: 0; right: 0; flex-direction: column; align-items: flex-end; }

.hud-dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #FF3B30;
  margin-right: 0.6rem;
  animation: recBlink 1.4s steps(2) infinite;
}
@keyframes recBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }

.hud-label { opacity: 0.6; display: block; font-size: 9px; }
.hud-value { font-weight: 500; }
.hud-tc    { font-variant-numeric: tabular-nums; letter-spacing: 0.16em; }
.hud-divider { opacity: 0.3; margin: 0 0.5rem; }

/* ══════════════════════════════════════════
   ACADEMY LEADER PRELOADER
   ══════════════════════════════════════════ */
.preloader {
  position: fixed; inset: 0; z-index: 9998;
  background: #050505;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.5s var(--ease-cut);
}
.preloader.is-hidden { opacity: 0; pointer-events: none; }

.leader-numeral { transition: opacity 0.3s ease; }

/* Crosshair reticle */
.leader-crosshair {
  position: absolute; inset: 0;
  pointer-events: none;
}
.leader-crosshair::before,
.leader-crosshair::after {
  content: '';
  position: absolute;
  background: rgba(240,237,230,0.18);
}
.leader-crosshair::before { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); }
.leader-crosshair::after  { left: 0; right: 0; top: 50%;  height: 1px; transform: translateY(-50%); }

/* Rotating scan line */
.leader-scan {
  position: absolute;
  top: 50%; left: 50%;
  width: 62vmin; height: 62vmin;
  margin: -31vmin 0 0 -31vmin;
  border: 1px solid rgba(240,237,230,0.28);
  border-radius: 50%;
  overflow: hidden;
  animation: leaderRotate 2s linear infinite;
}
.leader-scan::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 50%; height: 1px;
  background: linear-gradient(to right, transparent, rgba(240,237,230,0.9));
  transform-origin: left center;
}
@keyframes leaderRotate {
  to { transform: rotate(360deg); }
}

/* Academy numeral (counts 3..2..1) */
.leader-numeral {
  position: relative;
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-size: clamp(10rem, 32vmin, 28rem);
  line-height: 1;
  color: var(--fg);
  letter-spacing: -0.04em;
}

.leader-meta {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240,237,230,0.55);
}
.leader-meta--top    { top: 2.5rem; }
.leader-meta--bottom { bottom: 2.5rem; white-space: nowrap; }

/* SMPTE bars strip at edges */
.leader-bars {
  position: absolute;
  left: 0; right: 0;
  height: 6px;
  display: flex;
}
.leader-bars--top    { top: 0; }
.leader-bars--bottom { bottom: 0; }
.leader-bars span {
  flex: 1;
  background: currentColor;
}
.leader-bars span:nth-child(1) { color: #c0c0c0; }
.leader-bars span:nth-child(2) { color: #c0c000; }
.leader-bars span:nth-child(3) { color: #00c0c0; }
.leader-bars span:nth-child(4) { color: #00c000; }
.leader-bars span:nth-child(5) { color: #c000c0; }
.leader-bars span:nth-child(6) { color: #c00000; }
.leader-bars span:nth-child(7) { color: #0000c0; }

/* ══════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 2rem 2.5rem;
  transition: transform 0.45s var(--ease-out), color 0.4s;
  color: var(--fg);
}
.header.is-hidden { transform: translateY(-110%); }
.header.header--light { color: var(--ink); }

.header-logo {
  font-family: var(--display);
  font-variation-settings: "opsz" 72, "wght" 400, "SOFT" 100;
  font-size: 1.05rem;
  letter-spacing: -0.015em;
  position: relative;
  padding-left: 1.1rem;
}
.header-logo::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--grade-accent);
  transform: translateY(-50%);
}
.header-nav { display: flex; gap: 2.5rem; }
.header-nav a {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
  transition: color 0.3s;
}
.header-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 1px; width: 0;
  background: currentColor;
  transition: width 0.4s var(--ease-out);
}
.header-nav a:hover::after { width: 100%; }
.header-nav a[aria-current="page"] { color: var(--grade-accent); }
.header-nav a[aria-current="page"]::after { width: 100%; background: var(--grade-accent); }

/* ══════════════════════════════════════════
   PAGE HEADER (sub-pages)
   ══════════════════════════════════════════ */
.page-header {
  padding: 11rem 8vw 4rem;
  position: relative;
}
.page-header-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grade-accent);
  margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.8rem;
}
.page-header-meta::before {
  content: '';
  display: inline-block;
  width: 28px; height: 1px;
  background: currentColor;
}
.page-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 100;
  font-weight: 300;
  font-size: clamp(3.5rem, 9vw, 9rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: inherit;
}
.page-title em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
}

/* ══════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════ */
.footer-wrap { position: relative; background: #000; }

.footer-video-reveal {
  position: sticky; top: 0;
  height: 100vh; width: 100%;
  z-index: 1; overflow: hidden;
  clip-path: inset(22% 21% round 2px);
}
.footer-video-reveal video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.85) contrast(1.05);
}
.footer-darken {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 2; opacity: 0;
}
.footer-expand-spacer { position: relative; height: 100vh; }

.footer {
  position: relative; z-index: 2;
  min-height: 100vh; color: var(--fg);
  display: flex; align-items: center;
}
.footer-inner {
  width: 100%;
  padding: 6rem 4rem 4rem;
  display: flex; flex-direction: column; gap: 4rem;
}
.footer-cta { text-align: center; position: relative; }
.footer-cta-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 2.5rem;
  display: inline-flex; align-items: center; gap: 0.8rem;
}
.footer-cta-label::before,
.footer-cta-label::after {
  content: ''; width: 28px; height: 1px;
  background: var(--muted);
}

.footer-cta-title {
  font-family: var(--display);
  font-variation-settings: "opsz" 144, "wght" 300, "SOFT" 100, "WONK" 1;
  font-weight: 300;
  font-size: clamp(3.5rem, 11vw, 11rem);
  line-height: 0.88;
  letter-spacing: -0.05em;
  margin-bottom: 3rem;
}
.footer-cta-title em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  color: var(--grade-accent);
}
.footer-cta-title .line-wrap { display: block; overflow: hidden; padding-bottom: 0.08em; }
.footer-cta-title .line { display: block; transform: translateY(105%); }

.footer-cta-links {
  display: flex; justify-content: center;
  gap: 0.6rem; flex-wrap: wrap;
}
.footer-cta-btn {
  display: inline-flex; align-items: center; gap: 0.8rem;
  padding: 1rem 1.8rem;
  border: 1px solid rgba(255,255,255,0.18);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  transition: border-color 0.35s, color 0.35s, background 0.35s;
  position: relative;
}
.footer-cta-btn::before {
  content: '→';
  font-size: 12px;
  transition: transform 0.35s var(--ease-out);
}
.footer-cta-btn:hover {
  border-color: var(--grade-accent);
  color: var(--grade-accent);
  background: var(--grade-accent-soft);
}
.footer-cta-btn:hover::before { transform: translateX(3px); }

.footer-bottom {
  display: flex; justify-content: space-between;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ══════════════════════════════════════════
   HAMBURGER
   ══════════════════════════════════════════ */
.header-burger {
  display: none;
  flex-direction: column; gap: 5px;
  padding: 0.5rem; z-index: 101;
}
.header-burger span {
  width: 22px; height: 1px;
  background: currentColor;
  transition: transform 0.3s, opacity 0.3s;
}
.header-burger.is-active span:first-child { transform: translateY(3px) rotate(45deg); }
.header-burger.is-active span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* ══════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════ */
.tech-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grade-accent);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.tech-label::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
}

/* Framing: used on images for 2.39:1 crop */
.scope-2391 { aspect-ratio: 2.39/1; object-fit: cover; }
.scope-169  { aspect-ratio: 16/9;   object-fit: cover; }
.scope-43   { aspect-ratio: 4/3;    object-fit: cover; }