/*
  Type: Oswald (condensed poster face, replaces Impact) for the big numbers and title,
  Manrope for reading, Cormorant Garamond italic for the "second voice" in headings.
  All three cover Cyrillic and ship in assets/fonts, so the site works offline.
  Colour: cold teal-black of the series key art, one accent red (string, progress, play).
*/
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(assets/fonts/oswald-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Oswald'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(assets/fonts/oswald-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-cyrillic-wght-normal.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(assets/fonts/manrope-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/cormorant-garamond-cyrillic-500-italic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(assets/fonts/cormorant-garamond-latin-500-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --bg: #0d1416;
  --bg-2: #131c1f;
  --fg: #edf0ec;
  --muted: #9aaaae;
  --line: #ffffff22;
  --red: #d2473c;
  --cold: #a9c7cb;
  --paper: #ece6d6;
  --display: 'Oswald', 'Arial Narrow', Impact, sans-serif;
  --text: 'Manrope', Arial, Helvetica, sans-serif;
  --serif: 'Cormorant Garamond', Georgia, serif;
  --pad: 7%;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--text); font-size: 16px; line-height: 1.6; overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid #e5cc9b; outline-offset: 4px; }
::selection { background: var(--red); color: #fff; }
h1, h2, h3, p, figure { margin: 0; }
img { display: block; max-width: 100%; }

.skip { position: fixed; top: 10px; left: 10px; z-index: 40; padding: 12px 16px; background: var(--fg); color: var(--bg); transform: translateY(-200%); }
.skip:focus { transform: none; }

.grain { position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.reading-progress { height: 3px; position: fixed; top: 0; left: 0; right: 0; z-index: 30; }
.reading-progress i { display: block; height: 100%; width: 0; background: var(--red); }

/* ---------- labels and headings ---------- */

.kicker { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.red-line { width: 32px; height: 2px; background: var(--red); }
.section { padding: 110px var(--pad); }
.section-label { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
h2 { font-weight: 500; font-size: clamp(40px, 4.6vw, 72px); line-height: 1.08; letter-spacing: -0.035em; }
h2 em { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.08em; letter-spacing: -0.01em; color: var(--cold); }
.section-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 56px 0 44px; }
.section-heading > p { font-size: 15px; line-height: 1.7; color: var(--muted); }

/* ---------- buttons ---------- */

.button { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 54px; padding: 0 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; transition: transform 0.3s, background 0.3s, color 0.3s; }
.button:hover { transform: translateY(-3px); }
.button.light { background: #e9eee8; color: #10191c; }
.button.light:hover { background: #fff; }
.button.outline { border: 1px solid #d1e0e080; background: #07171b30; }
.button.outline:hover { background: #ffffff18; }
.small-button { min-height: 44px; padding: 0 18px; border: 1px solid #cedfe760; background: #09111580; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- header ---------- */

header { position: absolute; top: 0; left: 5%; right: 5%; z-index: 5; height: 96px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #ffffff35; }
.brand { display: flex; align-items: center; gap: 15px; font-family: var(--display); font-size: 26px; font-weight: 600; letter-spacing: 0.14em; }
.brand span { padding-left: 15px; border-left: 1px solid #ffffff50; font-family: var(--text); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; }
nav { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
nav a { padding: 10px 0; }
nav a:hover { color: #f0b9b0; }
.nav-watch { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.3s; }
.nav-watch:hover { background: #e3594d; }

/* ---------- hero ---------- */

.hero { position: relative; height: 100svh; min-height: 770px; max-height: 1200px; overflow: hidden; }
.hero-scene { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }
.hero-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; transform: scale(1.03); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #0c181bea, #0e1a1b88 40%, #07131510 72%), linear-gradient(0deg, #0d1416, transparent 25%, #0d141620 85%, #0d141680); }
.rain { position: absolute; inset: -100%; opacity: 0.14; pointer-events: none; background: repeating-linear-gradient(105deg, transparent 0 93px, #d3e6ed 94px, transparent 95px 170px); animation: rain 1.4s linear infinite; }
.hero-content { position: absolute; top: 25%; left: 7%; max-width: 680px; }
h1 { position: relative; margin: 18px 0 10px; font-family: var(--display); font-weight: 600; font-size: clamp(130px, 15.5vw, 240px); line-height: 1; letter-spacing: 0.02em; }
h1::before { content: attr(data-text); position: absolute; inset: 0; clip-path: polygon(0 34%, 100% 34%, 100% 37%, 0 37%); transform: translateX(5px); color: #a6c6cb; animation: fracture 9s infinite; }
h1::after { content: attr(data-text); position: absolute; inset: 0; clip-path: polygon(0 72%, 100% 72%, 100% 74%, 0 74%); transform: translateX(-4px); color: #d9e1d7; }
.hero-meta { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #d6deda; }
.hero-meta .age { padding: 3px 7px; border: 1px solid #ccd3cd70; }
.hero-content > p { margin: 24px 0 32px; font-size: 18px; line-height: 1.7; color: #d4dedc; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-side { position: absolute; right: 3%; top: 43%; display: flex; align-items: center; gap: 20px; writing-mode: vertical-rl; font-size: 11px; letter-spacing: 0.3em; color: #c4d2d1; }
.hero-side i { width: 1px; height: 60px; background: #d5dfdf66; }
.hero-foot { position: absolute; bottom: 28px; left: 5%; right: 5%; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #b4c1c3; }
.hero-foot a { display: flex; align-items: center; gap: 14px; }
.hero-foot a i { width: 1px; height: 30px; display: inline-block; background: linear-gradient(#fff, transparent); animation: scrollLine 2s infinite; }

/* ---------- 01 intro ---------- */

.intro { padding-bottom: 120px; }
.intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12%; padding-top: 64px; }
.coordinates { display: block; margin-top: 34px; font-size: 12px; letter-spacing: 0.3em; color: #7d9196; }
.intro-copy p { max-width: 540px; font-size: 18px; line-height: 1.75; color: #b9c5c6; }
.intro-copy p + p { margin-top: 16px; }
.intro-facts { display: flex; gap: 40px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.intro-facts span { font-size: 14px; color: #9aaaad; }
.intro-facts b { margin-right: 8px; font-family: var(--display); font-size: 34px; font-weight: 500; color: #e9eeea; }

/* ---------- 02 cinema ---------- */

.cinema { background: #091012; }
.cinema-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin: 56px 0 36px; }
.cinema-head > p { max-width: 380px; font-size: 16px; line-height: 1.7; color: var(--muted); }
.cinema-player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid #ffffff1c; }
.cinema-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cinema-start { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 24px; background: linear-gradient(0deg, #000000b0, #00000030 60%); text-align: left; font-size: clamp(20px, 2.1vw, 30px); font-weight: 700; }
.cinema-start small { display: block; margin-top: 6px; font-size: 14px; font-weight: 500; color: #c9d4d4; }
.cinema-start__icon { width: clamp(76px, 8vw, 110px); aspect-ratio: 1; display: grid; place-items: center; padding-left: 6px; border-radius: 50%; background: var(--red); color: #fff; font-size: 0.9em; box-shadow: 0 0 0 10px #d2473c33; transition: transform 0.3s, box-shadow 0.3s; }
.cinema-start:hover .cinema-start__icon { transform: scale(1.06); box-shadow: 0 0 0 16px #d2473c2a; }
.cinema-chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin-top: 2px; }
.cinema-chapters button { min-height: 72px; padding: 14px 18px; background: #121b1e; color: #b9c6c8; text-align: left; font-size: 14px; line-height: 1.35; transition: background 0.2s, color 0.2s; }
.cinema-chapters button b { display: block; margin-bottom: 4px; font-family: var(--display); font-size: 20px; font-weight: 500; color: #fff; }
.cinema-chapters button:hover { background: #1a2629; color: #fff; }
.cinema-chapters button[aria-current='true'] { background: #2a1714; color: #fff; box-shadow: inset 0 -3px 0 var(--red); }
.cinema-note { display: flex; justify-content: space-between; align-items: center; gap: 40px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); }
.cinema-note p { max-width: 660px; font-size: 15px; line-height: 1.7; color: #a9b8ba; }
.cinema-note b { color: var(--fg); font-weight: 700; }
.cinema-links { display: flex; flex-wrap: wrap; gap: 26px; }
.cinema-links a { padding: 8px 0; border-bottom: 1px solid #52656b; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c9d8dc; }
.media-error { position: absolute; bottom: 24px; right: 24px; max-width: 300px; padding: 16px; background: #0d1416ee; font-size: 14px; line-height: 1.6; }
.media-error a { text-decoration: underline; }

/* ---------- 03 four eras (scroll film) ---------- */

.film-scroll { position: relative; height: 400vh; }
.film-sticky { position: sticky; top: 0; height: 100svh; min-height: 550px; overflow: hidden; background: #050a0c; }
.film-sticky video { position: absolute; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.7); transform: scale(1.03); }
.film-shade { position: absolute; inset: 0; background: linear-gradient(90deg, #071115b0, transparent 75%), linear-gradient(#07111570, transparent 35%, #071115c0); }
.film-top { position: absolute; top: 36px; left: 5%; right: 5%; display: flex; justify-content: space-between; align-items: center; gap: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.film-title { position: absolute; left: 7%; top: 24%; transition: opacity 0.4s; }
.film-title > div { font-family: var(--display); font-size: clamp(120px, 17vw, 250px); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; color: #f0f1e7; }
.film-title h2 { margin-top: 6px; font-size: 36px; letter-spacing: -0.02em; }
.film-title p { margin-top: 12px; font-size: 16px; line-height: 1.7; color: #c8d2d2; }
.film-bottom { position: absolute; left: 7%; right: 7%; bottom: 40px; }
.film-years { display: flex; justify-content: space-between; }
.film-years button { min-width: 64px; min-height: 44px; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: 0.06em; color: #97a6a9; }
.film-years button[aria-current='true'] { color: #fff; }
.film-track { height: 1px; margin: 8px 0 20px; background: #ffffff35; }
.film-track i { display: block; height: 2px; width: 0; background: #c5d9da; }
.film-bottom > span { display: block; text-align: center; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #bac5c6; }

/* ---------- 04 characters ---------- */

.characters { background: var(--bg-2); }
.character-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; perspective: 1400px; }
.character-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; padding: 0; text-align: left; background: #0b1215; transition: transform 0.5s; transform-style: preserve-3d; }
.character-card:hover { transform: translateY(-8px) rotateY(-3deg); }
.character-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.5); transition: transform 0.8s, filter 0.5s; }
.character-card:hover img, .character-card[aria-pressed='true'] img { transform: scale(1.05); filter: saturate(0.9); }
.character-card::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 1px solid #ffffff16; background: linear-gradient(transparent 35%, #071115f2); }
.character-card[aria-pressed='true']::after { border-bottom: 3px solid var(--red); }
.character-year { position: absolute; z-index: 1; left: 20px; top: 18px; font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: 0.1em; }
.character-bottom { position: absolute; z-index: 2; left: 20px; right: 20px; bottom: 22px; }
.character-bottom small { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #aabdc0; }
.character-bottom strong { display: block; font-size: 26px; font-weight: 500; line-height: 1.15; }
.character-bottom i { position: absolute; right: 0; bottom: 0; font-style: normal; font-size: 20px; color: #c4d9db; }
.character-dossier { display: grid; grid-template-columns: 1fr 1.2fr 1.8fr; align-items: center; gap: 16px 35px; margin-top: 30px; padding: 26px 0; border-top: 1px solid var(--line); }
.character-dossier > span { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #9fb3b7; }
.character-dossier h3 { font-size: 26px; font-weight: 500; }
.character-dossier p { grid-row: span 2; font-size: 15px; line-height: 1.7; color: #b9c5c7; }
.character-dossier > span:last-child { grid-column: 2; }

/* ---------- 05 evidence board ---------- */

.board { background: #120e0b; }
.board .section-label { color: #a39385; border-color: #ffffff1c; }
.board h2 em { color: #e2a397; }
.board .section-heading > p { color: #b3a598; }
/* A dark cork wall lit from above by a desk lamp. */
.board-wall { position: relative; height: clamp(540px, 44vw, 640px); overflow: hidden; border: 1px solid #ffffff12; background: radial-gradient(ellipse 70% 60% at 50% 0%, #4a3829 0%, #2a2018 45%, #1a140f 100%); }
.board-wall::before { content: ''; position: absolute; inset: 0; opacity: 0.18; background-image: radial-gradient(#00000055 1px, transparent 1.4px); background-size: 7px 7px; }
.board-strings { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.string { fill: none; stroke: #c9b8a6; stroke-width: 1.2; stroke-opacity: 0.22; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke 0.4s, stroke-opacity 0.4s, stroke-width 0.4s; }
.string.on { stroke: var(--red); stroke-width: 2.4; stroke-opacity: 1; filter: drop-shadow(0 2px 2px #0008); }
/* The red string re-draws when its clue is picked or the board first comes into view. */
.pinned .string.on { animation: draw 1s ease both; }

.pin-photo, .pin-sign, .pin-note { position: absolute; z-index: 1; transform: rotate(var(--r, 0deg)); transition: transform 0.5s, box-shadow 0.5s; }
.pin-photo::before, .pin-sign::before, .pin-note::before { content: ''; position: absolute; z-index: 3; top: 4px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff8a7c, #b3271d 60%, #6d140e); box-shadow: 0 3px 4px #0009; }
.pin-photo { width: clamp(130px, 12.5vw, 184px); padding: 10px 10px 0; background: var(--paper); box-shadow: 0 14px 26px #0009; }
.pin-photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(0.55) sepia(0.15) contrast(1.05); }
.pin-photo figcaption { padding: 10px 2px 12px; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.1; color: #2a2421; }
[data-node='p0'] { left: 4%; top: 7%; }
[data-node='p1'] { left: 19%; top: 47%; }
[data-node='p2'] { left: 63%; top: 6%; }
[data-node='p3'] { left: 81%; top: 45%; }
[data-node='p0'] img { object-position: 14% center; }
[data-node='p1'] img { object-position: 29% center; }
[data-node='p2'] img { object-position: 32% center; }
[data-node='p3'] img { object-position: 85% center; }
.pin-code { display: block; margin-bottom: 10px; font-family: var(--text); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #7c6a5d; }
/* London street sign: white enamel, black lettering, red district line. */
.pin-sign { left: 37%; top: 12%; width: clamp(220px, 23vw, 320px); padding: 26px 18px 16px; text-align: center; background: #f4f2ec; border: 4px solid #1d1d1d; box-shadow: 0 16px 30px #000a, inset 0 0 0 3px #f4f2ec, inset 0 0 0 5px #1d1d1d; font-family: var(--display); font-size: clamp(22px, 2.3vw, 32px); font-weight: 600; letter-spacing: 0.04em; color: #111; }
.pin-sign small { display: block; margin-top: 6px; font-family: var(--text); font-size: 13px; font-weight: 800; letter-spacing: 0.3em; color: #c1271c; }
.pin-sign .pin-code { color: #6f6f6f; }
.pin-note { left: 41%; top: 58%; width: clamp(180px, 17vw, 230px); padding: 26px 18px 18px; text-align: left; background: #e8dcb5; box-shadow: 0 12px 22px #0009; font-family: var(--serif); font-style: italic; font-size: 24px; line-height: 1.1; color: #2b241d; --r: 3deg; }
.pin-note--dates { left: 61%; top: 66%; --r: -4deg; background: #dfe3d6; }
.pin-note--dates b { display: block; margin-top: 6px; font-family: var(--display); font-style: normal; font-size: 40px; font-weight: 600; color: #b3271d; }
.pin-glass { position: relative; display: block; width: 38px; height: 38px; margin-bottom: 12px; border: 4px solid #2b241d; border-radius: 50%; }
.pin-glass::after { content: ''; position: absolute; right: -14px; bottom: -11px; width: 16px; height: 5px; border-radius: 3px; background: #2b241d; transform: rotate(45deg); }
:is(.pin-sign, .pin-note):hover { transform: translateY(-4px) rotate(0deg); }
:is(.pin-sign, .pin-note)[aria-pressed='true'] { transform: translateY(-6px) rotate(0deg); box-shadow: 0 0 0 3px var(--red), 0 20px 34px #000b; }
.board .clue-detail { display: flex; gap: 8%; align-items: start; margin-top: 34px; padding-top: 24px; border-top: 1px solid #ffffff1c; }
.clue-detail span { white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 2; color: #e2a397; }
.clue-detail p { max-width: 680px; font-size: 18px; line-height: 1.7; color: #d7cdc2; }

/* ---------- Mannix ---------- */

.mannix { position: relative; height: 720px; overflow: hidden; }
.mannix > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% center; }
.mannix::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #07171df0, #07171d7a 45%, transparent 75%), linear-gradient(0deg, #0d1416, transparent 30%); }
.mannix-copy { position: absolute; z-index: 1; left: 7%; top: 24%; }
.mannix-copy h2 { margin: 30px 0 22px; font-family: var(--serif); font-style: italic; font-size: clamp(48px, 5.4vw, 84px); line-height: 1; }
.mannix-copy p { margin-bottom: 30px; font-size: 17px; line-height: 1.7; color: #b8cad1; }

/* ---------- 06 episodes ---------- */

.episode-options { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.episode-options > span { display: block; margin-bottom: 16px; }
.episode-options label { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 15px; letter-spacing: 0; text-transform: none; color: var(--fg); }
.episode-options input { width: 18px; height: 18px; accent-color: var(--red); }
.episode-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 20px; }
.episode-card { min-width: 0; }
.episode-cover { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; background: #1a2427; }
.episode-cover img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.65); transition: transform 0.5s, filter 0.5s; }
.episode-cover:hover img, .episode-cover:focus-visible img { transform: scale(1.06); filter: saturate(1); }
.episode-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, #0008); }
.episode-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 52px; height: 52px; display: grid; place-items: center; padding-left: 3px; border-radius: 50%; background: var(--red); font-size: 15px; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s, transform 0.3s; }
.episode-cover:hover .episode-play, .episode-cover:focus-visible .episode-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.episode-duration { position: absolute; z-index: 1; right: 12px; bottom: 10px; font-size: 12px; font-weight: 600; }
.episode-index { display: flex; justify-content: space-between; margin: 16px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #93a8ad; }
.episode-card h3 { min-height: 50px; font-size: 19px; font-weight: 600; line-height: 1.3; }
.episode-original { margin: 4px 0 12px; font-size: 13px; line-height: 1.5; color: #8aa0a5; }
.episode-description { margin-bottom: 14px; font-size: 15px; line-height: 1.6; color: #aebdc0; }
.episode-more { padding: 6px 0; border-bottom: 1px solid #52656b; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c8d7db; }
.episode-more:hover { color: #fff; border-color: var(--red); }
.watch-note { display: flex; align-items: center; gap: 35px; margin-top: 64px; padding: 30px 0; border-top: 1px solid var(--line); }
.netflix-word { font-family: var(--display); font-size: 24px; font-weight: 700; letter-spacing: 0.06em; color: #e05a4f; }
.watch-note p { font-size: 15px; line-height: 1.7; color: #9aafb3; }
.watch-note > a { margin-left: auto; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

/* ---------- 07 behind the scenes ---------- */

.behind { background: #121d21; }
.behind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; align-items: center; margin-top: 56px; }
.behind-grid img { width: 100%; height: 460px; object-fit: cover; object-position: 40% center; filter: saturate(0.6); }
.behind-grid h2 { font-size: clamp(34px, 3vw, 46px); }
.behind dl { margin-top: 30px; }
.behind dl > div { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.behind dt { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.behind dd { margin: 0; text-align: right; font-size: 16px; line-height: 1.5; }
.text-link { display: inline-block; margin-top: 22px; padding: 6px 0; border-bottom: 1px solid #52656b; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #b8cad0; }

/* ---------- footer ---------- */

footer { padding: 70px var(--pad) 30px; background: #0a1012; }
.footer-top > span { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #8da0a4; }
.footer-top > a { display: flex; justify-content: space-between; align-items: center; padding: 24px 0 44px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: clamp(48px, 8.5vw, 140px); font-weight: 600; letter-spacing: 0.01em; }
.footer-top > a span { font-family: var(--text); font-size: 0.55em; font-weight: 300; color: #9cb7bd; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-top: 30px; }
.footer-bottom p { font-size: 13px; line-height: 1.8; color: #889ea3; }
.footer-bottom p a { text-decoration: underline; }
.footer-bottom button { min-height: 44px; padding: 0 16px; border: 1px solid #ffffff30; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }

/* ---------- episode dialog ---------- */

dialog { width: min(1080px, 94vw); max-height: 94svh; padding: 0; overflow: auto; border: 1px solid #ffffff26; background: #0f1719; color: var(--fg); }
dialog::backdrop { background: #020506e6; backdrop-filter: blur(10px); }
.episode-sheet { display: grid; grid-template-columns: 1.3fr 1fr; }
.episode-media { position: relative; min-height: 380px; background: #000; }
.episode-media img { width: 100%; height: 100%; object-fit: cover; }
.episode-badge { position: absolute; left: 18px; bottom: 16px; padding: 6px 10px; background: #0d1416d0; font-size: 13px; font-weight: 600; }
.episode-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px 26px; }
.dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.dialog-top span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #8ba0a6; }
.close { width: 44px; height: 44px; font-size: 32px; line-height: 1; }
.episode-body h2 { font-size: clamp(30px, 3vw, 40px); }
.episode-body .episode-original { margin: 0; font-size: 15px; }
.episode-text { font-size: 16px; line-height: 1.7; color: #bccacc; }
.inline-link { padding: 0; border-bottom: 1px solid currentColor; color: var(--fg); font-weight: 600; }
.episode-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 12px; }
.episode-nav { display: flex; justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--line); }
.episode-nav button { min-height: 44px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: #b9c8cb; }
.episode-nav button:hover { color: #fff; }

/* ---------- motion ---------- */

/* Content is readable before it animates: the reveal only slides it into place. */
.reveal { transition: transform 0.9s; }
.js .reveal:not(.visible) { transform: translateY(24px); }
body.paused *, body.paused *::before { animation-play-state: paused !important; }
body.modal-open { overflow: hidden; }
@keyframes rain { to { transform: translate(-15px, 100px); } }
@keyframes fracture { 0%, 96%, 100% { transform: translateX(5px); } 97% { transform: translateX(-8px); } 98% { transform: translateX(10px); } }
@keyframes scrollLine { 50% { transform: translateY(9px); opacity: 0.4; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- tablets ---------- */

@media (max-width: 1100px) {
  nav { gap: 18px; font-size: 13px; }
  nav a:nth-child(3), nav a:nth-child(6) { display: none; }
  .hero-side { display: none; }
  .section { padding: 80px 6%; }
  .intro-grid { gap: 8%; }
  .character-grid { gap: 12px; }
  .character-bottom { left: 15px; right: 15px; }
  .character-bottom strong { font-size: 20px; }
  .character-dossier { grid-template-columns: 1fr 1.3fr; }
  .character-dossier p { grid-column: 2; grid-row: 2 / 4; }
  .character-dossier > span:last-child { grid-column: 1; }
  .cinema-chapters { grid-template-columns: repeat(3, 1fr); }
  .episode-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .behind-grid { gap: 35px; }
  .mannix { height: 640px; }
  .mannix-copy { left: 6%; }
  .footer-bottom .brand span { display: none; }
}

/* ---------- phones ---------- */

@media (max-width: 700px) {
  body { font-size: 15px; }
  header { height: 76px; left: 6%; right: 6%; }
  .brand { font-size: 22px; letter-spacing: 0.1em; }
  .brand span { display: none; }
  nav { display: none; }
  .nav-watch { min-height: 42px; padding: 0 14px; font-size: 12px; }
  .hero { height: 92svh; min-height: 680px; max-height: 920px; }
  .hero-scene img { object-position: 67% center; }
  .hero-shade { background: linear-gradient(90deg, #071418b8, transparent), linear-gradient(0deg, #0d1416 1%, #0d1416d0 34%, #0d141620 80%); }
  .hero-content { top: auto; bottom: 110px; left: 6%; right: 6%; }
  .kicker { font-size: 11px; letter-spacing: 0.12em; }
  h1 { font-size: 120px; margin: 12px 0 8px; }
  .hero-meta { flex-wrap: wrap; gap: 8px 14px; font-size: 11px; }
  .hero-content > p { margin: 18px 0 22px; font-size: 16px; }
  .hero-actions .button { flex: 1 1 auto; }
  .button { min-height: 50px; padding: 0 18px; font-size: 12px; }
  .hero-foot { bottom: 22px; left: 6%; right: 6%; font-size: 10px; }
  .hero-foot > span { display: none; }
  .hero-foot > a { width: 100%; justify-content: center; }
  .section { padding: 64px 6%; }
  .section-label { font-size: 11px; letter-spacing: 0.1em; padding-bottom: 18px; }
  .section-label span:last-child { text-align: right; }
  h2 { font-size: 40px; letter-spacing: -0.03em; }
  .section-heading, .cinema-head { display: block; margin: 34px 0 28px; }
  .section-heading > p, .cinema-head > p { margin-top: 16px; font-size: 15px; }
  .intro-grid { grid-template-columns: 1fr; gap: 28px; padding-top: 40px; }
  .intro-copy p { font-size: 16px; }
  .intro-facts { justify-content: space-between; gap: 10px; }
  .intro-facts b { font-size: 28px; }
  .cinema-start { flex-direction: column; text-align: center; gap: 10px; font-size: 17px; }
  .cinema-start__icon { width: 58px; box-shadow: 0 0 0 6px #d2473c33; }
  .cinema-start small { font-size: 13px; }
  .cinema-chapters { grid-template-columns: repeat(2, 1fr); }
  .cinema-chapters button:last-child { grid-column: span 2; }
  .cinema-chapters button { min-height: 64px; padding: 12px 14px; font-size: 13px; }
  .cinema-chapters button b { font-size: 18px; }
  .cinema-note { display: block; }
  .cinema-note p { font-size: 15px; }
  .cinema-links { margin-top: 18px; gap: 18px; }
  .film-scroll { height: 330vh; }
  .film-sticky { min-height: 560px; }
  .film-top { top: 92px; left: 6%; right: 6%; font-size: 10px; letter-spacing: 0.08em; }
  .small-button { min-height: 40px; padding: 0 12px; font-size: 11px; }
  .film-title { left: 6%; right: 6%; top: 30%; }
  .film-title > div { font-size: 120px; }
  .film-title h2 { font-size: 28px; }
  .film-title p { font-size: 15px; }
  .film-bottom { left: 6%; right: 6%; bottom: 28px; }
  .film-years button { font-size: 16px; }
  .film-bottom > span { font-size: 11px; letter-spacing: 0.08em; }
  .character-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .character-year { left: 14px; top: 14px; font-size: 15px; }
  .character-bottom { left: 14px; right: 12px; bottom: 16px; }
  .character-bottom small { margin-bottom: 6px; font-size: 10px; letter-spacing: 0.04em; }
  .character-bottom strong { font-size: 18px; }
  .character-dossier { display: flex; flex-direction: column; align-items: start; gap: 12px; }
  .character-dossier h3 { font-size: 24px; }
  /* The wall becomes a pinned stack; strings still follow the real positions. */
  .board-wall { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 26px 14px; padding: 32px 14px 28px; }
  .pin-photo, .pin-sign, .pin-note { position: relative; left: auto; top: auto; width: auto; }
  .pin-sign { grid-column: 1 / -1; order: -1; margin: 0 6%; }
  .board-strings { z-index: 0; }
  .pin-note { font-size: 20px; }
  .pin-note--dates b { font-size: 27px; }
  .pin-photo figcaption { font-size: 17px; }
  .board .clue-detail { display: block; }
  .clue-detail p { margin-top: 10px; font-size: 16px; }
  .mannix { height: 620px; }
  .mannix > img { object-position: 65% center; }
  .mannix::after { background: linear-gradient(0deg, #0d1416, #07171d7a 70%); }
  .mannix-copy { top: auto; bottom: 50px; left: 6%; right: 6%; }
  .mannix-copy h2 { font-size: 48px; margin: 20px 0 16px; }
  .mannix-copy p { font-size: 15px; }
  .episode-options { margin-top: 22px; font-size: 12px; }
  .episode-grid { gap: 32px 14px; }
  .episode-card h3 { min-height: 44px; font-size: 16px; }
  .episode-original { font-size: 12px; }
  .episode-index { font-size: 10px; letter-spacing: 0.04em; }
  .episode-play { width: 40px; height: 40px; opacity: 1; transform: translate(-50%, -50%); font-size: 13px; }
  .episode-more { font-size: 11px; letter-spacing: 0.04em; }
  .watch-note { flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .watch-note > a { margin: 0; }
  .behind-grid { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  .behind-grid img { height: 300px; }
  .behind dd { font-size: 14px; }
  footer { padding: 50px 6% 26px; }
  .footer-top > a { font-size: 11vw; padding: 22px 0 34px; }
  .footer-bottom { flex-wrap: wrap; gap: 18px; }
  .footer-bottom p { order: 3; width: 100%; font-size: 12px; }
  .footer-bottom button { margin-left: auto; }
  .episode-sheet { grid-template-columns: 1fr; }
  .episode-media { min-height: 0; aspect-ratio: 16 / 10; }
  .episode-body { padding: 18px 18px 20px; }
  .episode-actions .button { flex: 1 1 auto; }
  .media-error { left: 12px; right: 12px; bottom: 12px; max-width: none; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before { animation: none !important; transition: none !important; }
  .js .reveal:not(.visible) { transform: none; }
}