/* Layout: one editorial page. Hero text beside a film slate showing a brief split into "shot by" and "planned by"; bands alternate paper and slate. */
:root {
  --bg: #F2F5F5;
  --surface: #FFFFFF;
  --ink: #0E1D22;
  --muted: #4A5E65;
  --line: #D3DCDD;
  --accent: #0A6B6B;
  --accent-ink: #FFFFFF;
  --slate: #0F1C21;
  --slate-ink: #E7EFEF;
  --slate-muted: #9DB2B7;
  --slate-line: #2B3F46;
  --rec: #D8392F;
  --font-display: 'Bricolage Grotesque', 'Avenir Next', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B1316; --surface: #111C20; --ink: #E5EEEE; --muted: #9BB0B5; --line: #22333A;
    --accent: #52C7C3; --accent-ink: #04181A;
    --slate: #16262C; --slate-ink: #E7EFEF; --slate-muted: #9DB2B7; --slate-line: #2E444C;
    --rec: #F0645B;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B1316; --surface: #111C20; --ink: #E5EEEE; --muted: #9BB0B5; --line: #22333A;
  --accent: #52C7C3; --accent-ink: #04181A;
  --slate: #16262C; --slate-ink: #E7EFEF; --slate-muted: #9DB2B7; --slate-line: #2E444C;
  --rec: #F0645B;
  color-scheme: dark;
}


* { box-sizing: border-box; }
:root { color-scheme: light; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font-body); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.in { max-width: 760px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.top .in { padding-block: 18px; }
.mark { display: inline-flex; align-items: center; gap: 10px; font: 700 1.05rem/1 var(--font-display); letter-spacing: -0.01em; text-decoration: none; }
.rec { width: 10px; height: 10px; border-radius: 50%; background: var(--rec); flex: none; }
.doc { padding-block: 32px 72px; }
h1, h2 { font-family: var(--font-display); letter-spacing: -0.02em; text-wrap: balance; margin: 0; line-height: 1.1; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; }
h2 { font-size: 1.35rem; font-weight: 700; margin-top: 44px; }
p { margin: 14px 0 0; max-width: 68ch; }
ul { margin: 14px 0 0; padding-left: 1.2em; max-width: 68ch; }
li { margin-top: 10px; }
.meta { color: var(--muted); font-size: 0.92rem; }
.btn { display: inline-block; font: 600 0.98rem/1 var(--font-body); padding: 14px 20px; border-radius: 4px; text-decoration: none; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); margin-top: 24px; }
.foot .in { padding-block: 24px 36px; color: var(--muted); font-size: 0.9rem; border-top: 1px solid var(--line); }
.foot a { text-underline-offset: 3px; }