/* Reel North: a continuous strip of warm, exposed film. */
@font-face {
  font-family: 'Fraunces Variable';
  src: url('fonts/fraunces-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces Variable';
  src: url('fonts/fraunces-latin-wght-italic.woff2') format('woff2');
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Variable';
  src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #0b0908;
  --surface: #17110f;
  --text: #f1e8dc;
  --accent: #f2a541;
  --accent2: #b3262e;
  --muted: #c1ad98;
  --rule: #49362a;
  --display: 'Fraunces Variable', Georgia, 'Times New Roman', serif;
  --body: 'Inter Variable', system-ui, -apple-system, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --gutter: clamp(16px, 3vw, 40px);
  --header: 90px;
  --space: clamp(72px, 10vw, 152px);
  --holes: repeating-linear-gradient(90deg, transparent 0 10px, #c1ad98 10px 22px, transparent 22px 34px);
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-padding-top: calc(var(--header) + 20px); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.page { min-width: 0; overflow-x: clip; }
.page-home { background: var(--bg); }
.page-sub { background: var(--bg); }
main { display: block; }
section, article, aside, header, footer, nav, figure { min-width: 0; }
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--display);
  font-weight: 450;
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
p, ul, ol, figure, blockquote { margin: 0; }
p + p { margin-top: 1.15em; }
ul, ol { padding-left: 1.4em; }
li + li { margin-top: .35em; }
img, canvas, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
a:hover { color: var(--accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 5px;
}
::selection { background: var(--accent); color: var(--bg); }
strong, b { font-weight: 650; }
em, i { font-style: italic; }
small { font-size: .82em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5em 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, textarea, select { max-width: 100%; background: var(--surface); border: 1px solid var(--muted); padding: .7em; }
code, pre, kbd { font-family: var(--mono); }
pre { overflow: auto; padding: 1.25em; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .8em; border-bottom: 1px solid var(--rule); text-align: left; }
summary { cursor: pointer; }
.wrap { width: min(1200px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 110;
  top: 12px;
  left: var(--gutter);
  padding: 12px 20px;
  color: var(--bg);
  background: var(--accent);
  font-weight: 650;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; color: var(--bg); }
/* The noise texture is embedded, never fetched from another host. */
.grain {
  position: fixed;
  z-index: 80;
  inset: -12%;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxODAnIGhlaWdodD0nMTgwJyB2aWV3Qm94PScwIDAgMTgwIDE4MCc+PGZpbHRlciBpZD0nZ3JhaW4nPjxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuODgnIG51bU9jdGF2ZXM9JzMnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz48L2ZpbHRlcj48cGF0aCBmaWxsPScjZmZmJyBmaWx0ZXI9J3VybCgjZ3JhaW4pJyBkPSdNMCAwaDE4MHYxODBIMHonLz48L3N2Zz4=");
  animation: grain-shift .9s steps(4, end) infinite;
}
@keyframes grain-shift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -3%); }
  75% { transform: translate(-1%, -2%); }
}
.cursor {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.has-cursor .cursor { visibility: visible; }
.cursor.is-hover { background: rgb(242 165 65 / .08); }
.site-header {
  position: fixed;
  z-index: 60;
  inset: 0 0 auto;
  border-bottom: 1px solid rgb(241 232 220 / .14);
  background: rgb(11 9 8 / .76);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  transition: transform .35s ease, background-color .35s ease, box-shadow .35s ease;
}
.site-header.is-scrolled { background: rgb(11 9 8 / .94); box-shadow: 0 5px 30px rgb(0 0 0 / .2); }
.site-header.is-hidden { transform: translateY(-105%); }
.site-header:focus-within { transform: none; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: var(--header); }
.brand { display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0; font-family: var(--display); font-size: 27px; font-weight: 550; letter-spacing: -.045em; text-decoration: none; }
.brand-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, var(--bg) 0 3px, transparent 3.5px),
    radial-gradient(circle at 75% 50%, var(--bg) 0 3px, transparent 3.5px),
    radial-gradient(circle at 50% 75%, var(--bg) 0 3px, transparent 3.5px),
    radial-gradient(circle at 25% 50%, var(--bg) 0 3px, transparent 3.5px),
    radial-gradient(circle, var(--bg) 0 2px, var(--accent) 2.5px);
  box-shadow: inset 0 0 0 2px var(--bg);
}
.site-nav ul, .footer-nav ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px clamp(14px, 2vw, 30px); padding: 0; list-style: none; }
.site-nav li, .footer-nav li { margin: 0; }
.site-nav a { display: block; padding-block: 10px; font-size: 12px; font-weight: 550; letter-spacing: .025em; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current='page'] { color: var(--accent); }
/* The media figure is nested in .hero-inner, so that wrapper stays static. */
.hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; background: var(--bg); overflow: clip; }
.hero-canvas { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 1.2s ease; }
.hero-canvas.is-live { opacity: 1; }
.hero-inner { position: static; display: flex; align-items: center; min-height: 100vh; min-height: 100svh; padding-block: calc(var(--header) + 60px) 110px; }
.hero-text { position: relative; z-index: 2; width: 100%; }
.hero-media { position: absolute; z-index: -2; inset: 0; pointer-events: none; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; opacity: 1; transition: opacity 1.4s ease; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(11 9 8 / .83), rgb(11 9 8 / .45)), linear-gradient(0deg, var(--bg), transparent 40%, rgb(11 9 8 / .12)); }
.hero-canvas.is-live ~ .hero-inner .hero-media img { opacity: 0; }
.hero.no-webgl .hero-media img { opacity: 1; }
.hero.no-webgl .hero-canvas { opacity: 0; }
.eyebrow, .frame-no, .frame-year, .credit-role, .breadcrumb, .scroll-cue {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; color: var(--accent); }
.eyebrow::before { content: ''; width: 30px; height: 1px; background: currentColor; flex-shrink: 0; }
.display { font-size: clamp(48px, 8.7vw, 138px); font-weight: 380; line-height: .98; letter-spacing: -.065em; }
.split-lines .line { display: block; padding-bottom: .09em; margin-bottom: -.025em; }
.split-lines .line:last-child { font-style: italic; font-weight: 330; color: var(--accent); }
.line-inner { max-width: 100%; }
.lead { max-width: 62ch; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.75; color: #e1d3c2; }
.hero .lead { max-width: 63ch; margin-top: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 13px 24px; border: 1px solid var(--accent); font-size: 13px; font-weight: 650; letter-spacing: .015em; text-decoration: none; }
.btn-primary { color: var(--bg); background: var(--accent); }
.btn-primary:hover { color: var(--bg); background: #ffd08d; border-color: #ffd08d; }
.btn-ghost { color: var(--text); background: rgb(11 9 8 / .4); border-color: #9d8060; }
.btn-ghost:hover { color: var(--accent); background: var(--surface); border-color: var(--accent); }
.magnetic { position: relative; }
.scroll-cue { position: absolute; bottom: 30px; left: max(var(--gutter), calc((100% - 1200px) / 2)); display: flex; align-items: center; gap: 18px; color: var(--muted); }
.scroll-cue::after { content: ''; width: 74px; height: 7px; background: var(--holes); opacity: .65; }
.section { position: relative; padding-block: var(--space); }
.section-title { max-width: 900px; font-size: clamp(36px, 5vw, 72px); letter-spacing: -.05em; font-weight: 400; }
.section-intro { max-width: 58ch; margin-top: 25px; color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); }
.section-note { border-top: 1px solid var(--rule); padding-block: clamp(48px, 7vw, 100px); }
.section-note::after, .section-chapters::before, .section-guides::before, .section-partners::before { content: ''; position: absolute; inset: auto var(--gutter) 0; height: 5px; background: var(--holes); opacity: .28; }
.note-line { max-width: 900px; padding-left: clamp(20px, 4vw, 56px); border-left: 2px solid var(--accent2); font-family: var(--display); font-size: clamp(25px, 3vw, 40px); font-weight: 350; line-height: 1.4; letter-spacing: -.025em; }
/* An unenhanced reel is always a usable native scroll strip. */
.section-reel { padding: 0; background: #070605; }
.reel-pin { padding-block: 58px 32px; }
.reel-head { margin-bottom: 30px; }
.reel-head .eyebrow { margin-bottom: 12px; }
.reel-head .section-title { font-size: clamp(32px, 4vw, 56px); }
.reel-track { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: thin; scrollbar-color: var(--accent) var(--surface); overscroll-behavior-x: contain; }
.reel-frames { position: relative; display: flex; gap: clamp(24px, 3vw, 48px); width: max-content; min-width: 100%; margin: 0; padding: 30px var(--gutter); list-style: none; border-block: 1px solid var(--rule); background: var(--holes) left 8px / 100% 8px repeat-x, var(--holes) left calc(100% - 8px) / 100% 8px repeat-x, #070605; }
.frame { position: relative; flex: 0 0 clamp(320px, 38vw, 610px); width: clamp(320px, 38vw, 610px); margin: 0; padding: 0 0 12px; scroll-snap-align: center; border-inline: 1px solid #30251d; transition: border-color .35s ease, background-color .35s ease; }
.frame-no { position: absolute; z-index: 2; top: 12px; left: 14px; padding: 3px 8px; color: var(--accent); background: var(--bg); }
.frame-media { height: clamp(160px, 25vh, 290px); margin: 0 8px; overflow: hidden; border: 1px solid var(--rule); }
.frame-media img { width: 112%; max-width: none; height: 112%; margin: -3% -6%; object-fit: cover; filter: saturate(.7) brightness(.78); transition: filter .5s ease; }
.frame-text { padding: 18px 20px 0; }
.frame-year { margin-bottom: 6px; color: var(--accent); }
.frame-title { font-size: clamp(23px, 2vw, 32px); letter-spacing: -.025em; }
.frame-text > p:last-child { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.frame.is-active { background: var(--surface); border-color: var(--accent); }
.frame.is-active img, .frame:hover img { filter: saturate(.95) brightness(1); }
.reel-progress { height: 2px; max-width: 1200px; margin: 24px var(--gutter) 0; background: var(--rule); }
.reel-bar { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left center; }
.section-curtain { padding: 0; background: var(--surface); overflow: clip; }
.curtain-pin { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100vh; padding-block: 80px; overflow: clip; }
.curtain { position: absolute; z-index: 2; top: 0; bottom: 0; width: 50%; pointer-events: none; background: #510c14; }
.curtain-left { left: 0; transform: translateX(-88%); }
.curtain-right { right: 0; transform: translateX(88%); }
.curtain img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(1.5) brightness(.55); }
.curtain-left img { object-position: left center; }
.curtain-right img { object-position: right center; }
.curtain::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(0 0 0 / .5) 0, transparent 8%, rgb(179 38 46 / .2) 13%, rgb(0 0 0 / .65) 22%), linear-gradient(0deg, #200609, transparent 50%); box-shadow: inset 0 0 60px #170407; }
.curtain-reveal { position: relative; z-index: 1; max-width: 1000px; padding-inline: clamp(24px, 6vw, 90px); text-align: center; }
.curtain-reveal .eyebrow { justify-content: center; }
.curtain-reveal .section-title { font-size: clamp(42px, 7vw, 100px); font-style: italic; }
.curtain-reveal .section-intro { margin-inline: auto; }
.section-winter { padding: 0; }
.winter-pin { position: relative; isolation: isolate; display: grid; align-items: center; min-height: 100vh; padding: 100px var(--gutter); overflow: clip; }
.winter-media { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.winter-media img { width: 100%; height: 100%; object-fit: cover; }
.winter-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(11 9 8 / .85), rgb(11 9 8 / .77) 50%, rgb(11 9 8 / .6)); }
.manifesto { width: min(1100px, 100%); margin-inline: auto; font-family: var(--display); font-size: clamp(32px, 4.8vw, 72px); font-weight: 350; line-height: 1.17; letter-spacing: -.04em; text-wrap: pretty; }
.manifesto .word-mask { padding-bottom: .09em; margin-bottom: -.09em; max-width: 100%; }
.manifesto .word-inner { max-width: 100%; }
.section-chapters::before, .section-guides::before, .section-partners::before { top: 0; bottom: auto; }
.section-chapters .section-title { margin-bottom: 60px; }
.chapter { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 2fr); gap: clamp(24px, 6vw, 90px); padding-block: clamp(36px, 5vw, 70px); border-top: 1px solid var(--rule); }
.chapter-no { align-self: start; font-family: var(--display); font-size: clamp(90px, 14vw, 190px); font-weight: 350; line-height: .9; letter-spacing: -.08em; color: transparent; -webkit-text-stroke: 1px #947047; user-select: none; }
.chapter-body { max-width: 70ch; }
.chapter-title { margin-bottom: 25px; font-size: clamp(27px, 3vw, 42px); letter-spacing: -.035em; }
.chapter-body p { color: var(--muted); font-size: clamp(16px, 1.3vw, 18px); line-height: 1.85; }
.section-guides { background: var(--surface); }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 56px); margin-top: 52px; }
.card { position: relative; min-width: 0; padding-bottom: 26px; border-bottom: 1px solid #65503d; transition: translate .35s ease, border-color .35s ease; }
.tilt { transform-origin: center; }
.card-media { position: relative; aspect-ratio: 1.56; padding: 18px 9px; overflow: hidden; background: var(--holes) left 5px / 100% 6px repeat-x, var(--holes) left calc(100% - 5px) / 100% 6px repeat-x, #070605; border: 1px solid #68503a; }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.85); transition: filter .45s ease; }
.card-title { margin-top: 25px; font-size: clamp(30px, 3.5vw, 48px); letter-spacing: -.035em; }
.card-text { max-width: 48ch; margin-top: 14px; color: var(--muted); line-height: 1.75; }
.card-link { display: inline-flex; align-items: center; gap: 26px; min-height: 44px; margin-top: 18px; color: var(--accent); font-size: 13px; font-weight: 600; text-decoration: none; border-bottom: 1px solid #896036; }
.card-link::after { content: ''; width: 22px; height: 8px; border-right: 1px solid; border-bottom: 1px solid; transform: skewX(38deg); }
.card:focus-within { border-color: var(--accent); }
.section-credits { padding: 0; background: #070605; border-block: 1px solid var(--rule); }
.credits-pin { position: relative; padding: 80px var(--gutter); text-align: center; }
.credits-pin > .eyebrow { justify-content: center; margin-bottom: 70px; }
.credits-roll { width: min(850px, 100%); margin-inline: auto; }
.credit-group + .credit-group { margin-top: 70px; }
.credit-role { margin-bottom: 24px; color: var(--accent); }
.credit-group ul { padding: 0; list-style: none; }
.credit-group li { font-family: var(--display); font-size: clamp(26px, 3.4vw, 47px); font-weight: 300; line-height: 1.35; letter-spacing: -.025em; overflow-wrap: anywhere; }
.credit-group li + li { margin-top: .4em; }
.credit-group a { text-decoration-color: #65503d; }
.section-partners { background: var(--surface); }
.partner-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 32px; padding: 0; margin-top: 40px; list-style: none; }
.partner-list li.partner { min-width: 0; margin: 0; padding: 24px 0; border-top: 1px solid var(--rule); overflow-wrap: anywhere; }
a.partner-link { font-family: var(--display); font-size: 26px; line-height: 1.25; color: var(--accent); }
p.partner-phrase { margin-top: 14px; font-size: 16px; font-weight: 550; }
p.partner-desc { margin-top: 10px; font-size: 14px; color: var(--muted); line-height: 1.75; }
/* Article pages retain the same stock, frame edges, and lamp colour. */
.article { padding-bottom: var(--space); }
.article > .wrap:first-child { padding-top: calc(var(--header) + 64px); }
.page-hero { position: relative; height: 45vh; min-height: 280px; max-height: 620px; overflow: hidden; background: var(--surface); }
.page-hero img { position: absolute; inset: -15% 0; width: 100%; height: 130%; object-fit: cover; object-position: center 45%; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, var(--bg), rgb(11 9 8 / .15) 75%), linear-gradient(180deg, rgb(11 9 8 / .5), transparent 65%); }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 34px; color: var(--muted); font-size: 10px; }
.breadcrumb a { color: var(--accent); text-decoration: none; }
.breadcrumb span[aria-hidden] { color: var(--accent); }
.page-header { max-width: 1100px; padding-bottom: clamp(44px, 6vw, 82px); border-bottom: 1px solid var(--rule); }
.page-header .display { font-size: clamp(42px, 6.2vw, 88px); line-height: 1.05; letter-spacing: -.05em; }
.page-header .lead { margin-top: 32px; max-width: 68ch; }
.prose { width: min(100%, 68ch); margin: 64px auto 0; font-size: clamp(18px, 1.5vw, 20px); line-height: 1.9; counter-reset: article-section; overflow-wrap: anywhere; }
.prose h2 { position: relative; margin-block: 2em .8em; padding-top: 28px; font-size: clamp(29px, 3vw, 43px); line-height: 1.2; letter-spacing: -.035em; counter-increment: article-section; }
.prose h2::before { content: counter(article-section, decimal-leading-zero); position: absolute; top: 0; left: 0; width: 74px; color: var(--accent); border-bottom: 1px solid #896036; font-family: var(--mono); font-size: 11px; font-weight: 400; line-height: 1.5; letter-spacing: .16em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-block: 1.8em .65em; font-size: 1.4em; }
.prose h4, .prose h5, .prose h6 { margin-block: 1.5em .65em; font-size: 1.2em; }
.prose p, .prose li { color: #decebb; }
.prose a { color: var(--accent); }
.prose ul, .prose ol { margin-block: 1.2em; }
.prose li::marker { color: var(--accent); }
.prose blockquote { margin-block: 2em; padding-left: 1.3em; border-left: 2px solid var(--accent2); font-family: var(--display); font-size: 1.4em; font-style: italic; line-height: 1.5; }
.prose figure { margin-block: 2em; }
.prose figcaption { color: var(--muted); font-size: .75em; }
.more-guides { width: min(100%, 68ch); margin: 90px auto 0; padding-top: 32px; border-top: 1px solid var(--accent); }
.more-guides h2 { font-size: clamp(30px, 3vw, 42px); }
.more-guides ul { list-style: none; padding: 0; margin-top: 24px; }
.more-guides li { margin: 0; border-bottom: 1px solid var(--rule); }
.more-guides a { display: block; padding: 22px 26px 22px 0; font-size: 17px; line-height: 1.6; text-decoration: none; }
.more-guides a:hover { padding-left: 10px; background: var(--surface); }
.read-progress { position: fixed; z-index: 90; inset: 0 0 auto; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left center; pointer-events: none; }
.site-footer { position: relative; padding-block: 50px; border-top: 1px solid var(--rule); background: var(--surface); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.footer-note { max-width: 63ch; font-size: 12px; line-height: 1.85; color: var(--muted); }
.footer-nav ul { justify-content: flex-end; column-gap: 22px; }
.footer-nav a { display: inline-block; padding-block: 5px; font-size: 12px; text-decoration: none; }
/* GSAP owns the initial reveal states. No CSS opacity trap if it fails. */
.reveal { opacity: 1; }
html:not(.has-motion) .reel-progress { display: none; }
html:not(.has-motion) .curtain-reveal { opacity: 1 !important; transform: none !important; }
html:not(.has-motion) .credits-roll { transform: none !important; }
html.js:not(.has-motion) .reveal, html.js:not(.has-motion) .line-inner,
html.js:not(.has-motion) .word-inner, html.js:not(.has-motion) .prose > *,
html.js:not(.has-motion) .more-guides, html.js:not(.has-motion) .page-header,
html.js:not(.has-motion) .hero-text, html.js:not(.has-motion) .hero .eyebrow,
html.js:not(.has-motion) .hero .lead, html.js:not(.has-motion) .hero-actions,
html.js:not(.has-motion) .scroll-cue, html.js:not(.has-motion) .frame {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
html:not(.is-ready) .reveal, html:not(.is-ready) .prose > *, html:not(.is-ready) .more-guides { opacity: 1 !important; transform: none !important; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
@media (min-width: 800px) {
  .js.has-motion:not(.is-reduced) .reel-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-block: 26px; }
  .js.has-motion:not(.is-reduced) .reel-track { overflow: clip; flex-shrink: 0; }
  .js.has-motion:not(.is-reduced) .curtain-pin { height: 100vh; }
  .js.has-motion:not(.is-reduced) .curtain { transform: none; }
  .js.has-motion:not(.is-reduced) .winter-pin { height: 100vh; }
  .js.has-motion:not(.is-reduced) .credits-pin { height: 100vh; overflow: clip; padding-top: 0; }
  .js.has-motion:not(.is-reduced) .credits-pin > .eyebrow { position: absolute; z-index: 2; inset: 0 0 auto; padding: 30px; background: linear-gradient(#070605 60%, transparent); }
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { translate: 0 -7px; border-color: var(--accent); }
  .card:hover .card-media img { filter: saturate(1.05) brightness(1.05); }
}
@media (min-width: 800px) and (max-height: 740px) {
  .js.has-motion:not(.is-reduced) .reel-pin { padding-block: 16px; }
  .reel-head { margin-bottom: 16px; }
  .reel-head .eyebrow { margin-bottom: 4px; }
  .reel-head .section-title { font-size: 32px; }
  .frame-media { height: 21vh; }
  .frame-text { padding-top: 10px; }
  .frame-title { font-size: 23px; }
  .frame-text > p:last-child { font-size: 13px; }
  .reel-progress { margin-top: 12px; }
}
@media (max-width: 799px) {
  :root { --header: 132px; }
  .header-inner { flex-direction: column; align-items: flex-start; justify-content: center; gap: 7px; padding-block: 12px; }
  .brand { font-size: 25px; }
  .brand-mark { width: 25px; height: 25px; }
  .site-nav { width: 100%; }
  .site-nav ul { gap: 0 18px; }
  .site-nav a { font-size: 11px; padding-block: 6px; }
  .hero-inner { padding-block: calc(var(--header) + 42px) 100px; }
  .display { font-size: clamp(43px, 8.8vw, 70px); letter-spacing: -.055em; }
  .hero .lead { max-width: 55ch; margin-top: 24px; }
  .hero-media::after { background: linear-gradient(90deg, rgb(11 9 8 / .85), rgb(11 9 8 / .64)), linear-gradient(0deg, var(--bg), transparent 60%); }
  .hero-actions { margin-top: 26px; }
  .section-title { font-size: clamp(34px, 6vw, 48px); }
  .reel-pin { height: auto; padding-block: 50px 24px; }
  .reel-frames { gap: 20px; }
  .frame { flex-basis: min(82vw, 470px); width: min(82vw, 470px); }
  .frame-media { height: auto; aspect-ratio: 1.5; }
  .frame-text { padding-inline: 14px; }
  .frame-title { font-size: 26px; }
  .frame-text > p:last-child { font-size: 14px; }
  .reel-progress { display: none; }
  .curtain-pin { min-height: 85svh; height: auto; padding-block: 85px; }
  .curtain-reveal { padding-inline: 20px; }
  .curtain-reveal .section-title { font-size: clamp(40px, 8vw, 64px); }
  .curtain-left { transform: translateX(-92%); }
  .curtain-right { transform: translateX(92%); }
  .winter-pin { min-height: 85svh; height: auto; padding-block: 85px; }
  .manifesto { font-size: clamp(31px, 5.7vw, 46px); }
  .chapter { grid-template-columns: 80px minmax(0, 1fr); gap: 24px; }
  .chapter-no { font-size: 90px; }
  .chapter-title { font-size: 29px; }
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 50px; }
  .card-title { font-size: 36px; }
  .credits-pin { padding-block: 65px; }
  .credits-pin > .eyebrow { margin-bottom: 50px; }
  .credit-group li { font-size: clamp(25px, 4.8vw, 36px); }
  .page-header .display { font-size: clamp(39px, 7vw, 59px); }
  .page-hero { height: 45svh; min-height: 300px; }
  .prose { margin-top: 44px; }
  .footer-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .footer-nav ul { justify-content: flex-start; }
  .cursor { display: none; }
}
@media (max-width: 420px) {
  .site-nav ul { column-gap: 16px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: .09em; }
  .hero .eyebrow::before { width: 18px; }
  .btn { padding-inline: 16px; font-size: 12px; }
  .hero-actions { gap: 10px; }
  .chapter { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .chapter-no { font-size: 86px; }
  .section-chapters .section-title { margin-bottom: 36px; }
  .breadcrumb { letter-spacing: .1em; }
  .page-header .display { font-size: 39px; }
}
/* Motion preference also wins over inline animation styles during teardown. */
html.is-reduced .grain, html.is-reduced .cursor { display: none; }
html.is-reduced .hero-canvas { opacity: 0 !important; }
html.is-reduced .hero-media img { opacity: 1 !important; }
html.is-reduced .reveal, html.is-reduced .line, html.is-reduced .line-inner,
html.is-reduced .word-inner, html.is-reduced .prose > *, html.is-reduced .more-guides,
html.is-reduced .hero-text, html.is-reduced .curtain-reveal, html.is-reduced .credits-roll {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .grain, .cursor { display: none !important; }
  .hero-canvas { opacity: 0 !important; }
  .hero-media img { opacity: 1 !important; }
  .reveal, .line, .line-inner, .word-inner, .hero-text, .hero .eyebrow, .hero .lead,
  .hero-actions, .scroll-cue, .prose > *, .more-guides, .page-header, .frame,
  .curtain-reveal, .credits-roll { opacity: 1 !important; visibility: visible !important; transform: none !important; }
  .word-inner { color: inherit !important; }
  .winter-media { clip-path: none !important; }
  .winter-media img, .page-hero img, .chapter-no { transform: none !important; }
  .site-header.is-hidden { transform: none; }
  .curtain-left { transform: translateX(-92%) !important; }
  .curtain-right { transform: translateX(92%) !important; }
  .reel-track { overflow-x: auto !important; }
  .reel-frames { transform: none !important; }
  .reel-pin, .credits-pin { height: auto !important; overflow: visible !important; }
  .credits-pin > .eyebrow { position: static !important; }
  .reel-progress { display: none; }
}