/* forestchristenson.com — single stylesheet. Tokens from DESIGN.md. */
@font-face { font-family: 'Clash Display'; src: url(../fonts/ClashDisplay-Semibold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Clash Display'; src: url(../fonts/ClashDisplay-Medium.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Clash Grotesk'; src: url(../fonts/ClashGrotesk-Semibold.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Clash Grotesk'; src: url(../fonts/ClashGrotesk-Regular.woff2) format('woff2'); font-weight: 400; font-display: swap; }

:root {
  --bg: oklch(0.965 0.005 260);
  --surface: oklch(0.93 0.008 260);
  --ink: oklch(0.21 0.03 265);
  --muted: oklch(0.45 0.02 265);
  --cobalt: oklch(0.48 0.19 262);
  --red: oklch(0.55 0.20 27);
  --gold: oklch(0.53 0.11 85); /* darkened vs DESIGN.md swatch for ~4.77:1 on --bg; on --room use --room-gold */
  --room: oklch(0.14 0.03 265);
  --room-surface: oklch(0.11 0.025 265); /* image-frame letterbox well on dark pages */
  --room-ink: oklch(0.93 0.008 260);
  --room-muted: oklch(0.68 0.02 262); /* lifted from 0.62 for AA on --room */
  --room-cobalt: oklch(0.62 0.16 262);
  --room-red: oklch(0.62 0.21 27); /* lifted from 0.58 for AA at small sizes */
  --room-gold: oklch(0.80 0.14 85);
  --hairline-light: oklch(0.21 0.03 265 / 0.15);
  --hairline-dark: oklch(0.93 0.008 260 / 0.14);
  --hairline: var(--hairline-light);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-trans: 500ms;
  --dur-scene: 1200ms;
  --font-display: 'Clash Display', system-ui, sans-serif;
  --font-body: 'Clash Grotesk', system-ui, sans-serif;
  --max-width: 1200px;
  --z-header: 10; --z-scrim: 20; --z-player: 30;
}
[data-room] {
  --bg: var(--room);
  --ink: var(--room-ink);
  --muted: var(--room-muted);
  --cobalt: var(--room-cobalt);
  --red: var(--room-red);
  --gold: var(--room-gold);
  --surface: var(--room-surface);
  --hairline: var(--hairline-dark);
}
* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.6rem); }
a { color: var(--cobalt); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
.caption {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
}
.caption .award { color: var(--gold); }
.frame { aspect-ratio: 2.39 / 1; overflow: hidden; position: relative; box-shadow: inset 0 0 0 1px var(--hairline); background: var(--surface); }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wordmark { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink); }
.container { max-width: var(--max-width); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }
/* ---------- chrome ---------- */
.masthead {
  position: sticky; top: 0; z-index: var(--z-header);
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(20px, 4vw, 48px);
  background: transparent;
  transition: background var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.masthead.is-stuck { background: var(--bg); box-shadow: 0 1px 0 var(--hairline); }
.masthead nav { display: flex; gap: clamp(16px, 3vw, 28px); }
.nav-link {
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.nav-link:hover { color: var(--ink); text-decoration: none; }
.nav-link[aria-current="page"] { color: var(--ink); border-bottom-color: var(--red); }
.site-footer {
  border-top: 1px solid var(--hairline);
  margin-top: clamp(48px, 8vw, 96px);
  padding: clamp(32px, 5vw, 56px) 0;
}
.site-footer .container { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.site-footer h3 { font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; }
.site-footer p, .site-footer a { font-size: 0.9375rem; }
/* ---------- home ---------- */
.hero { padding-top: clamp(24px, 4vw, 56px); }
.hero h1 { max-width: 14ch; margin-top: clamp(20px, 3vw, 36px); }
.hero .lede { font-size: 1.0625rem; color: var(--muted); margin-top: 1rem; max-width: 48ch; }
.chapter { display: grid; gap: 1rem; padding-block: clamp(40px, 7vw, 88px); border-bottom: 1px solid var(--hairline); }
.chapter .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.chapter p.desc { max-width: 58ch; }
.chapter .listen-link { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; }
.worklist { padding-block: clamp(40px, 7vw, 88px); border-bottom: 1px solid var(--hairline); }
.worklist ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 clamp(24px, 4vw, 56px); }
.worklist li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.worklist .t { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
.worklist .r { font-size: 0.8125rem; color: var(--muted); letter-spacing: 0.04em; text-transform: uppercase; text-align: right; }
.bio { padding-block: clamp(40px, 7vw, 88px); }
.bio p { max-width: 68ch; }
.bio .more { display: inline-block; margin-top: 1rem; font-family: var(--font-display); font-weight: 600; }
[data-reveal] { opacity: 0; transform: translateY(12px); }
.revealed[data-reveal], [data-reveal-scroll].revealed { opacity: 1; transform: none; transition: opacity var(--dur-trans) var(--ease-out), transform var(--dur-trans) var(--ease-out); }
[data-reveal-scroll] { opacity: 0; transform: translateY(16px); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-scroll] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ---------- about ---------- */
.longbio { padding-block: clamp(40px, 6vw, 72px); }
.longbio::after { content: ""; display: table; clear: both; }
.longbio p { max-width: 70ch; }
.longbio p + p { margin-top: 1.25rem; }
.longbio .title { font-weight: 500; }
.portrait { float: right; max-width: 420px; margin: 0 0 1.5rem 2rem; }
.portrait img { width: 100%; height: auto; display: block; box-shadow: inset 0 0 0 1px var(--hairline); }
@media (max-width: 720px) { .portrait { float: none; margin: 0 0 1.5rem; max-width: 100%; } }
.honors { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--hairline); }
.honors ul { list-style: none; padding: 0; display: grid; gap: 10px; max-width: 70ch; }
.honors li { padding-left: 0; }
.honors .award-name { color: var(--gold); font-family: var(--font-display); font-weight: 600; }
.pressquote { border-top: 1px solid var(--hairline); padding: clamp(32px, 5vw, 56px) 0; max-width: 62ch; }
.pressquote p { font-size: 1.25rem; font-family: var(--font-display); font-weight: 500; line-height: 1.35; }
.pressquote cite { font-style: normal; display: block; margin-top: 0.75rem; }
.credits { padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--hairline); }
.credits table { width: 100%; border-collapse: collapse; }
.credits th { text-align: left; font-family: var(--font-display); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 20px 0 8px; }
.credits td { border-top: 1px solid var(--hairline); padding: 9px 12px 9px 0; vertical-align: baseline; }
.credits td.t { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.credits td.y { color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.credits td.d { color: var(--muted); font-size: 0.875rem; }
@media (max-width: 640px) { .credits td.d { display: none; } }
/* ---------- listen ---------- */
.listen-app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.listen-main { flex: 1 1 auto; display: flex; min-height: 0; }
.cue-index { flex: 0 0 38%; overflow-y: auto; padding: 24px 0 24px clamp(20px, 3vw, 36px); }
.section-label { font-family: var(--font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 26px 0 4px; }
.section-label:first-child { margin-top: 0; }
.proj-label { margin: 18px 0 8px; }
.cue { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 24px 9px 0; border: 0; border-bottom: 1px solid var(--hairline); background: none; cursor: pointer; text-align: left; }
.cue-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.25rem, 1.8vw, 1.5625rem); color: var(--ink); letter-spacing: 0.01em; }
.cue-tag { font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--hairline); padding: 1px 6px; margin-left: 8px; vertical-align: 3px; }
.cue-dur { font-size: 0.8125rem; color: var(--muted); }
.cue[aria-current="true"] .cue-title, .cue[aria-current="true"] .cue-dur { color: var(--red); }
.cue[aria-current="true"] .cue-title::before { content: "▶  "; font-size: 0.75em; }
.cue:hover .cue-title { color: var(--cobalt); transition: color var(--dur-micro) var(--ease-out); }
.cue[aria-current="true"]:hover .cue-title { color: var(--red); }
.visual-field { flex: 1 1 62%; display: flex; flex-direction: column; border-left: 1px solid var(--hairline); min-width: 0; }
.field-frame { flex: 1 1 auto; position: relative; overflow: hidden; background: #000; }
.field-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.field-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: opacity var(--dur-scene) var(--ease-out); }
.field-frame.is-video .field-layer { visibility: hidden; }
.field-frame video[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .field-layer.is-drifting { animation: drift 15s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: scale(1.06) translate(0, 0); } to { transform: scale(1.18) translate(1.6%, 1.2%); } }
}
.field-caption { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 13px clamp(20px, 3vw, 36px); border-top: 1px solid var(--hairline); }
.player-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; padding: 16px clamp(20px, 3vw, 36px); border-top: 1px solid var(--hairline); }
.btn-play { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--red); cursor: pointer; display: grid; place-items: center; flex: 0 0 auto; }
.btn-play .icon { width: 0; height: 0; border-left: 14px solid var(--room); border-block: 9px solid transparent; margin-left: 3px; }
.btn-play.is-playing .icon { border: 0; width: 12px; height: 16px; border-inline: 4px solid var(--room); }
.now { min-width: 200px; max-width: 30%; }
.now-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now-proj { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scrub-wrap { flex: 1 1 auto; }
/* Sliders: the visible bar stays a 3px hairline, but the input itself is 20px tall so
   there is a real click/touch target — clicking anywhere along it seeks (or sets volume). */
input[type="range"].scrub, input[type="range"].vol {
  -webkit-appearance: none; appearance: none;
  height: 20px; background: transparent; border-radius: 0; cursor: pointer;
}
input[type="range"].scrub { width: 100%; display: block; }
input[type="range"].vol { width: 88px; flex: 0 0 auto; }
input[type="range"].scrub::-webkit-slider-runnable-track,
input[type="range"].vol::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(to right, var(--fill, var(--red)) 0%, var(--fill, var(--red)) var(--pct, 0%), oklch(0.93 0.008 260 / 0.18) var(--pct, 0%));
}
input[type="range"].scrub::-webkit-slider-thumb, input[type="range"].vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%;
  background: var(--fill, var(--red)); border: 0;
  margin-top: -4.5px; /* centre the 12px thumb on the 3px track */
}
input[type="range"].scrub::-moz-range-thumb, input[type="range"].vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--fill, var(--red)); border: 0; }
input[type="range"].scrub::-moz-range-progress, input[type="range"].vol::-moz-range-progress { height: 3px; background: var(--fill, var(--red)); }
input[type="range"].scrub::-moz-range-track, input[type="range"].vol::-moz-range-track { height: 3px; background: oklch(0.93 0.008 260 / 0.18); }

/* volume */
.volume { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.volume.is-muted .vol { --fill: var(--muted); }
.btn-mute { display: grid; place-items: center; padding: 4px; border: 0; background: none; cursor: pointer; color: var(--muted); }
.btn-mute:hover { color: var(--ink); }
.btn-mute:active { outline: none; }
.ico-vol { width: 20px; height: 20px; display: block; }
.ico-vol .spk { fill: currentColor; }
.ico-vol .waves path, .ico-vol .xmark path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.ico-vol .xmark { display: none; }
.btn-mute.is-muted .ico-vol .waves { display: none; }
.btn-mute.is-muted .ico-vol .xmark { display: block; }
/* transport controls: keyboard focus keeps the cobalt ring; suppress the mouse-drag/click box */
input[type="range"].scrub:active, .btn-play:active { outline: none; }
/* dark-room scrollbar for the cue index (replaces the default white bar) */
.cue-index { scrollbar-width: thin; scrollbar-color: oklch(0.93 0.008 260 / 0.22) transparent; }
.cue-index::-webkit-scrollbar { width: 12px; }
.cue-index::-webkit-scrollbar-track { background: transparent; }
.cue-index::-webkit-scrollbar-thumb { background: oklch(0.93 0.008 260 / 0.18); border-radius: 6px; border: 4px solid transparent; background-clip: padding-box; }
.cue-index::-webkit-scrollbar-thumb:hover { background: oklch(0.93 0.008 260 / 0.34); background-clip: padding-box; }
.times { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted); margin-top: -1px; }
@media (max-width: 860px) {
  .listen-app { height: auto; overflow: visible; }
  .listen-main { flex-direction: column-reverse; }
  .cue-index { flex: none; padding-right: clamp(20px, 3vw, 36px); }
  .visual-field { border-left: 0; border-bottom: 1px solid var(--hairline); }
  .field-frame { aspect-ratio: 16 / 9; flex: none; }
  .field-frame.is-vertical-video { aspect-ratio: 9 / 16; max-height: 78vh; }
  .player-bar { position: sticky; bottom: 0; background: var(--bg); z-index: var(--z-player); }
  .now { display: none; }
  /* iOS treats HTMLMediaElement.volume as read-only, so the slider would be a dead
     control on touch. Keep the mute toggle (muted *is* honoured) and drop the slider. */
  .vol { display: none; }
}
@media (prefers-reduced-motion: reduce) { .field-layer { transition: none; } }

/* credits: gold highlight for award WINS (noms stay in plain detail text) */
.credits td .award { color: var(--gold); font-weight: 600; }

/* credits: type sub-division headers within each role section */
.credits tr.subtype td { font-family: var(--font-display); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 18px 0 5px; border-top: none; }