/* =====================================================================
   Narumol "Kop" Thammapruksa
   Immersive performance/documentation site with THREE full style modes:
     [data-mode="pools-of-light"]     — content emerges from warm dark
     [data-mode="performance-space"]  — raw stage / cue-sheet
     [data-mode="material-memory"]    — paper, ink, film-grain, trace
   Header, navigation, media, archive and CV presentation.
   ===================================================================== */

/* ---------- Design tokens (defaults; each mode fully overrides) -------- */
:root {
  --max: 1180px;
  --pad: clamp(20px, 5vw, 64px);
  --header-h: 118px;

  /* palette */
  --bg: #120f0d;
  --bg-2: #17130f;
  --panel: #1c1712;
  --ink: #efe7db;
  --ink-2: #b3a690;
  --muted: #8f8371;
  --line: rgba(231, 182, 98, .16);
  --hair: rgba(239, 231, 219, .12);
  --accent: #e7b662;
  --accent-2: #c8613a;
  --cool: #3f7a76;

  /* type */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-ui: "Inter", system-ui, sans-serif;
  --font-caption: "Inter", system-ui, sans-serif;
  --font-credit: "Space Mono", ui-monospace, monospace;
  --tracking: .02em;

  /* image framing */
  --img-radius: 3px;
  --img-filter: saturate(1.02) contrast(1.02);
  --img-shadow: 0 30px 80px -30px rgba(0,0,0,.9);

  /* cards / bands */
  --band-pad: clamp(72px, 11vw, 168px);
  --card-gap: clamp(40px, 7vw, 120px);

  /* buttons */
  --btn-radius: 2px;

  /* motion */
  --reveal-y: 26px;
  --reveal-x: 0px;
  --reveal-blur: 10px;
  --reveal-dur: 1.05s;
  --reveal-ease: cubic-bezier(.2, .65, .25, 1);
  --grain-opacity: .06;

  color-scheme: dark;
}

/* ---------------------------- base ----------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .5s ease, color .5s ease;
  overflow-x: hidden;
}
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3, h4 { font-weight: 500; }
p { overflow-wrap: anywhere; }

.wrap { width: min(100% - (var(--pad) * 2), var(--max)); margin-inline: auto; }
.muted { color: var(--muted); }

.skip-link {
  position: absolute; top: -100px; left: 16px; z-index: 400;
  background: var(--accent); color: #17120a; padding: 10px 16px;
  font: 600 13px/1 var(--font-ui); letter-spacing: .04em; border-radius: 2px;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Anchored sections clear the sticky header */
[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

/* ---------------------- placeholders (intentional) ------------------- */
.pending {
  font-family: var(--font-credit);
  font-size: .82em; letter-spacing: .01em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  padding: .12em .5em; border-radius: 3px;
  white-space: normal;
}
.pending.block {
  display: block; font-size: 1em; line-height: 1.5;
  padding: .7em .9em; border-radius: 5px; font-style: normal;
}
/* ============================ HEADER ================================= */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  border-bottom: 1px solid var(--hair);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 18px 44px -22px rgba(0,0,0,.85);
}
.topline { border-bottom: 1px solid var(--hair); font-family: var(--font-ui); }
.topline .wrap { min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.topline-name { color: var(--ink-2); }
.topline-sep { opacity: .5; }
.topline-th { color: var(--muted); }
.topline-actions a { color: var(--accent); text-decoration: none; }
.topline-actions a:hover { text-decoration: underline; }

.header-row { min-height: 82px; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; color: var(--ink); }
.brand-mark svg { display: block; }
.bm-ring { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .8; }
.bm-pool { fill: var(--accent); opacity: .92; }
.brand-title { display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.05; letter-spacing: .01em; }
.brand-nick { font-style: italic; color: var(--accent); }
.brand-sub { display: block; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: 2px; font-family: var(--font-ui); }
.nav-item { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 14px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; position: relative; transition: color .2s ease; }
.nav-item::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav-item:hover { color: var(--ink); }
.nav-item:hover::after, .nav-item[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { color: #17120a; background: var(--accent); border-radius: var(--btn-radius); margin-left: 10px; font-weight: 600; }
.nav-cta::after { display: none; }
.nav-cta:hover { color: #17120a; background: color-mix(in srgb, var(--accent) 82%, #fff); }

.menu-toggle { display: none; margin-left: auto; width: 46px; height: 46px; align-items: center; justify-content: center; border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: var(--btn-radius); cursor: pointer; }
.menu-toggle svg { width: 22px; height: 22px; }

.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 130; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; }
.scrim.open { opacity: 1; visibility: visible; }
.mobile-panel {
  position: fixed; inset: 0 0 0 auto; width: min(86vw, 380px);
  background: var(--panel); z-index: 140; padding: 22px;
  transform: translateX(100%); transition: transform .3s ease;
  box-shadow: -20px 0 60px rgba(0,0,0,.5); overflow-y: auto;
  border-left: 1px solid var(--line);
}
.mobile-panel.open { transform: translateX(0); }
.mobile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mobile-head strong { font-family: var(--font-ui); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mobile-panel nav a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--hair); color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 20px; }
.mobile-panel nav a:hover { color: var(--accent); }

/* ============================ BUTTONS =============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  background: var(--accent); color: #17120a;
  border: 1px solid var(--accent); border-radius: var(--btn-radius);
  cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.btn:hover { box-shadow: 0 0 30px -6px var(--accent); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.textlink { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding-bottom: 2px; font-family: var(--font-ui); font-size: 14px; letter-spacing: .03em; }
.textlink:hover { border-color: var(--accent); }

/* ====================== SHARED SECTION FURNITURE ==================== */
.band { padding-block: var(--band-pad); position: relative; }
.band-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); }
.band-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin: 0 0 18px; }
.band-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(29px, 4.6vw, 54px); line-height: 1.08; letter-spacing: 0; margin: 0 0 20px; }
.band-lead { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 60ch; margin: 0; }
.band-lead a { color: var(--accent); }

.caption, figcaption { font-family: var(--font-caption); font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.credit {
  display: block; margin-top: 8px;
  font-family: var(--font-credit); font-size: 11px; letter-spacing: .02em;
  color: var(--muted); text-transform: none;
}
.credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.credit a:hover { color: var(--accent); }

/* --------------------------- reveals -------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--reveal-y)) translateX(var(--reveal-x));
  filter: blur(var(--reveal-blur));
  transition: opacity var(--reveal-dur) var(--reveal-ease),
              transform var(--reveal-dur) var(--reveal-ease),
              filter var(--reveal-dur) var(--reveal-ease);
  will-change: opacity, transform, filter;
}
.reveal.in { opacity: 1; transform: none; filter: none; }

/* ---------------------- video embed facade -------------------------- */
.embed {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: #000; cursor: pointer; overflow: hidden;
  border-radius: var(--img-radius); aspect-ratio: 16 / 9;
}
.embed-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .72; filter: saturate(.9) contrast(1.02); transition: opacity .4s ease, transform .6s ease, filter .4s ease; }
.embed:hover .embed-poster { opacity: .92; transform: scale(1.03); }
.embed::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 45%, transparent 30%, rgba(0,0,0,.5) 100%); }
.embed-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 90%, transparent); color: #17120a; z-index: 2; transition: transform .25s ease, box-shadow .25s ease; box-shadow: 0 0 0 1px rgba(255,255,255,.25), 0 10px 40px -8px var(--accent); }
.embed-play svg { width: 30px; height: 30px; margin-left: 3px; }
.embed:hover .embed-play { transform: translate(-50%,-50%) scale(1.08); }
.embed-badge { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-credit); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: rgba(0,0,0,.5); padding: 5px 9px; border-radius: 3px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.embed-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--img-radius); overflow: hidden; background: #000; animation: fadein .8s ease both; }
.embed-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }

/* ============================== HERO ================================ */
.hero { position: relative; min-height: min(96vh, 900px); display: flex; align-items: center; padding-block: clamp(80px, 10vw, 120px); overflow: hidden; }
.hero-grain { position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-stage { position: relative; z-index: 2; width: min(100% - (var(--pad) * 2), var(--max)); margin-inline: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(30px, 5vw, 80px); }
.hero-figure { position: relative; margin: 0; justify-self: center; max-width: min(100%, 540px); }
.hero-figure img { width: 100%; border-radius: var(--img-radius); filter: var(--img-filter); object-fit: cover; object-position: center; }
.hero-figure .credit { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; }

.eyebrow { font-family: var(--font-ui); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin: 0 0 22px; }
.hero-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(48px, 9vw, 118px); line-height: .92; letter-spacing: 0; margin: 0 0 26px; }
.hero-nick { font-style: italic; color: var(--accent); }
.hero-role { font-size: clamp(17px, 1.8vw, 21px); color: var(--ink-2); max-width: 46ch; margin: 0 0 22px; line-height: 1.55; }
.hero-quote { margin: 0 0 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 3; display: inline-flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-family: var(--font-ui); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.scroll-cue svg { width: 15px; height: 22px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ---- Pools of Light hero atmosphere: warm pool behind the figure ---- */
[data-mode="pools-of-light"] .hero::before {
  content: ""; position: absolute; z-index: 0; top: 50%; right: 26%; transform: translate(50%,-50%);
  width: min(70vw, 720px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(231,182,98,.28), rgba(200,97,58,.10) 42%, transparent 66%);
  filter: blur(10px);
}
[data-mode="pools-of-light"] .hero-figure::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--img-radius);
  box-shadow: inset 0 0 60px 20px var(--bg); pointer-events: none;
}

/* =========================== STATEMENT ============================== */
.statement { padding-block: clamp(80px, 12vw, 180px); position: relative; }
.statement-inner { max-width: 900px; margin-inline: auto; text-align: center; }
.statement-kicker { font-family: var(--font-ui); font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin: 0 0 26px; }
.statement-quote { font-family: var(--font-display); font-size: clamp(24px, 3.6vw, 44px); line-height: 1.3; margin: 0 0 26px; font-weight: 400; }
.statement-note { color: var(--ink-2); max-width: 62ch; margin: 0 auto; font-size: 16px; }

/* ============================= WORKS =============================== */
.works { display: flex; flex-direction: column; gap: var(--card-gap); }
.work { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.work:nth-child(even) .work-media { order: 2; }
.work-media { position: relative; }
.work-media img { width: 100%; height: auto; border-radius: var(--img-radius); filter: var(--img-filter); box-shadow: var(--img-shadow); object-fit: contain; object-position: center; }
.work-media--portrait {
  width: min(100%, 370px);
  justify-self: center;
}
.work-media--narrow {
  width: min(100%, 300px);
  justify-self: center;
}
.work-media--slim {
  width: min(100%, 289px);
  justify-self: center;
}
.work-media--poster {
  width: min(100%, 421px);
  justify-self: center;
}
.work--textonly { grid-template-columns: 1fr; }
.work-body--wide { max-width: 760px; }
.work-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.work-meta .dot { color: var(--muted); }
.work-meta .year { color: var(--ink-2); }
.work-title { font-family: var(--font-display); font-size: clamp(28px, 3.6vw, 46px); line-height: 1.04; margin: 0 0 16px; font-weight: 500; }
.work-sub { color: var(--ink-2); font-style: italic; font-size: .74em; }
.work-note { color: var(--ink-2); font-size: clamp(16px, 1.4vw, 18px); margin: 0 0 22px; max-width: 52ch; }
.work-facts { display: grid; gap: 10px; margin: 0; }
.work-facts > div { display: grid; grid-template-columns: 118px 1fr; gap: 14px; padding-top: 10px; border-top: 1px solid var(--hair); }
.work-facts dt { font-family: var(--font-ui); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.work-facts dd { margin: 0; font-size: 15px; color: var(--ink); }

/* ============================ MEDIA WALL =========================== */
.media-band { background: var(--bg-2); border-block: 1px solid var(--hair); }
.media-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.media { margin: 0; }
.media-image { width: 100%; height: auto; border-radius: var(--img-radius); filter: var(--img-filter); box-shadow: var(--img-shadow); object-fit: cover; object-position: center; }
.media figcaption { margin-top: 14px; font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.media figcaption b { font-weight: 500; }
.media figcaption .credit { display: block; margin-top: 5px; }
.media-foot { margin: clamp(30px,4vw,52px) auto 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ============================= ARCHIVE ============================= */
.archive-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); gap: clamp(18px, 2.4vw, 34px); align-items: start; justify-content: center; }
.trace { margin: 0; }
.trace img { width: 100%; height: auto; border-radius: var(--img-radius); filter: var(--img-filter) grayscale(.15); box-shadow: var(--img-shadow); transition: filter .5s ease; object-fit: contain; object-position: center; }
.trace:hover img { filter: var(--img-filter); }
.trace figcaption { margin-top: 12px; font-size: 13px; color: var(--ink-2); }
.trace figcaption b { color: var(--ink); font-weight: 600; font-family: var(--font-ui); }
.archive-foot { margin-top: clamp(36px, 5vw, 64px); }

/* ============================== ABOUT ============================== */
.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: clamp(34px, 5vw, 80px); align-items: start; }
.portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 20px); }
.portrait img { width: 100%; height: auto; border-radius: var(--img-radius); filter: var(--img-filter); box-shadow: var(--img-shadow); object-fit: cover; object-position: center; }
.portrait .credit { margin-top: 10px; }
.bio .band-title { margin-bottom: 24px; }
.bio-lead { font-size: clamp(18px, 1.7vw, 22px); color: var(--ink); margin: 0 0 22px; font-family: var(--font-display); line-height: 1.45; }
.bio p { color: var(--ink-2); margin: 0 0 18px; }
.bio p a { color: var(--accent); }
.bio-facts { display: grid; gap: 12px; margin: 26px 0; }
.bio-facts > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding-top: 12px; border-top: 1px solid var(--hair); }
.bio-facts dt { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.bio-facts dd { margin: 0; font-size: 15px; color: var(--ink-2); }
.bio-note { font-size: 14px; margin: 0; }

/* =========================== RECOGNITION =========================== */
.recognition-band { background: var(--bg-2); border-block: 1px solid var(--hair); }
.rec-list { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.rec-list li { background: var(--bg-2); }
.rec-list a { display: flex; flex-direction: column; gap: 4px; padding: 22px 26px; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: 21px; transition: background .25s ease, color .25s ease; }
.rec-list a span { font-family: var(--font-ui); font-size: 12.5px; letter-spacing: .04em; color: var(--muted); text-transform: none; }
.rec-list a:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.rec-list a:hover span { color: var(--ink-2); }
.rec-quote { max-width: 780px; margin: clamp(40px,6vw,72px) auto 0; text-align: center; }
.rec-quote p { font-family: var(--font-display); font-size: clamp(20px,2.4vw,30px); margin: 0 0 14px; }
.rec-quote cite { font-style: normal; }

/* ============================= CONTACT ============================= */
.contact-inner { max-width: 820px; }
.contact-lead { font-size: clamp(17px,1.6vw,20px); color: var(--ink-2); margin: 0 0 30px; }
.contact-list { display: grid; gap: 2px; margin: 0 0 34px; }
.contact-list > div { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 16px 0; border-top: 1px solid var(--hair); }
.contact-list dt { font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0; }
.contact-list dd { margin: 0; font-size: 16px; color: var(--ink); }
.contact-list dd a { color: var(--accent); }
.contact-cv { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================== FOOTER ============================= */
.site-footer { border-top: 1px solid var(--line); background: #0a0807; padding-top: clamp(56px, 7vw, 96px); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: clamp(30px,4vw,64px); padding-bottom: 46px; }
.footer-brand .brand-mark { display: inline-block; margin-bottom: 14px; }
.footer-name { font-family: var(--font-display); font-size: 22px; margin: 0 0 8px; }
.footer-tag { color: var(--muted); font-size: 14px; margin: 0; max-width: 34ch; }
.footer-nav h4, .footer-note h4 { font-family: var(--font-ui); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin: 0 0 16px; }
.footer-nav { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; width: fit-content; }
.footer-nav a:hover { color: var(--accent); }
.footer-note p { color: var(--muted); font-size: 13.5px; margin: 0; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 0; border-top: 1px solid var(--hair); font-family: var(--font-ui); font-size: 12px; letter-spacing: .04em; color: var(--muted); }
.motion-toggle { background: transparent; border: 1px solid var(--line); color: var(--ink-2); padding: 8px 14px; border-radius: var(--btn-radius); cursor: pointer; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.motion-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

/* ==================================================================== */
/*  MODE 2 — PERFORMANCE SPACE  (raw stage / concrete / cue-sheet)      */
/* ==================================================================== */
[data-mode="performance-space"] {
  --bg: #26272a;
  --bg-2: #1e1f21;
  --panel: #202123;
  --ink: #f3f2ef;
  --ink-2: #c2c3c4;
  --muted: #8e9094;
  --line: rgba(229,72,46,.34);
  --hair: rgba(243,242,239,.14);
  --accent: #e5482e;
  --accent-2: #f0a92c;
  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-caption: "Space Mono", monospace;
  --font-credit: "Space Mono", monospace;
  --img-radius: 0px;
  --img-filter: saturate(.86) contrast(1.12) brightness(.98);
  --img-shadow: 0 24px 60px -30px rgba(0,0,0,.85);
  --btn-radius: 0px;
  --reveal-y: 0px;
  --reveal-x: -44px;
  --reveal-blur: 0px;
  --reveal-dur: .62s;
  --reveal-ease: cubic-bezier(.16, 1, .3, 1);
  --grain-opacity: .04;
  --band-pad: clamp(64px, 9vw, 132px);
}
[data-mode="performance-space"] body { font-size: 16px; line-height: 1.65; }
[data-mode="performance-space"] .band-title,
[data-mode="performance-space"] .hero-name,
[data-mode="performance-space"] .work-title,
[data-mode="performance-space"] .footer-name,
[data-mode="performance-space"] .rec-list a,
[data-mode="performance-space"] .statement-quote,
[data-mode="performance-space"] .media figcaption,
[data-mode="performance-space"] .mobile-panel nav a {
  text-transform: uppercase; letter-spacing: .01em; font-weight: 600;
}
[data-mode="performance-space"] .hero-name { font-weight: 700; letter-spacing: 0; line-height: .88; }
[data-mode="performance-space"] .brand-title { text-transform: uppercase; letter-spacing: .03em; }
[data-mode="performance-space"] .brand-nick,
[data-mode="performance-space"] .hero-nick,
[data-mode="performance-space"] .work-sub { font-style: normal; }
/* concrete ground */
[data-mode="performance-space"] body {
  background-image: linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
  background-attachment: fixed;
}
/* cue-sheet hero */
[data-mode="performance-space"] .hero::before { display: none; }
[data-mode="performance-space"] .hero-stage { grid-template-columns: 1fr; gap: 0; }
[data-mode="performance-space"] .hero-figure { position: absolute; right: 0; top: 50%; transform: translateY(-50%); max-width: min(42vw, 460px); opacity: .5; filter: grayscale(.3) contrast(1.1); justify-self: end; z-index: 1; }
[data-mode="performance-space"] .hero-figure .credit { position: static; text-align: left; }
[data-mode="performance-space"] .hero-copy { position: relative; z-index: 2; }
[data-mode="performance-space"] .hero-name { border-left: 6px solid var(--accent); padding-left: 22px; }
[data-mode="performance-space"] .eyebrow { font-family: var(--font-credit); color: var(--accent-2); }
/* cue-sheet work cards — full-bleed, numbered */
[data-mode="performance-space"] .works { counter-reset: cue; gap: clamp(48px, 6vw, 96px); }
[data-mode="performance-space"] .work { border-top: 2px solid var(--accent); padding-top: 26px; }
[data-mode="performance-space"] .work-body::before {
  counter-increment: cue; content: "CUE " counter(cue, decimal-leading-zero);
  display: block; font-family: var(--font-credit); font-size: 12px; letter-spacing: .2em; color: var(--accent); margin-bottom: 14px;
}
[data-mode="performance-space"] .work-media img,
[data-mode="performance-space"] .trace img,
[data-mode="performance-space"] .portrait img { border: 1px solid var(--hair); }
[data-mode="performance-space"] .work-meta { font-family: var(--font-credit); color: var(--ink-2); }
[data-mode="performance-space"] .work-meta .strand { color: var(--accent-2); }
[data-mode="performance-space"] .credit,
[data-mode="performance-space"] .work-facts dt { color: var(--muted); }
[data-mode="performance-space"] .btn { text-transform: uppercase; font-weight: 700; }
[data-mode="performance-space"] .nav-cta { color: #fff; }
[data-mode="performance-space"] .embed-play { background: var(--accent); color: #fff; border-radius: 0; }
/* marquee statement */
[data-mode="performance-space"] .statement { background: var(--accent); color: #fff; }
[data-mode="performance-space"] .statement-kicker { color: #fff; }
[data-mode="performance-space"] .statement-quote { color: #fff; }
[data-mode="performance-space"] .statement-note { color: rgba(255,255,255,.82); }
[data-mode="performance-space"] .statement .pending { color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
[data-mode="performance-space"] .archive-grid { gap: 2px; background: var(--hair); border: 1px solid var(--hair); }
[data-mode="performance-space"] .trace { background: var(--bg-2); padding: 12px; }
[data-mode="performance-space"] .trace figcaption { font-family: var(--font-credit); font-size: 11.5px; }

/* ==================================================================== */
/*  MODE 3 — MATERIAL MEMORY  (paper / ink / film-grain / trace)        */
/* ==================================================================== */
[data-mode="material-memory"] {
  --bg: #e8e0d0;
  --bg-2: #e1d7c3;
  --panel: #efe8da;
  --ink: #2a2018;
  --ink-2: #5f5140;
  --muted: #8a7c68;
  --line: rgba(122,46,34,.28);
  --hair: rgba(42,32,24,.16);
  --accent: #7a2e22;
  --accent-2: #b5642b;
  --cool: #45605c;
  --font-display: "Playfair Display", Georgia, serif;
  --font-body: "Spectral", Georgia, serif;
  --font-caption: "Caveat", "Segoe Script", cursive;
  --font-credit: "Space Mono", monospace;
  --img-radius: 2px;
  --img-filter: sepia(.22) saturate(.92) contrast(.98) brightness(1.02);
  --img-shadow: 0 14px 30px -14px rgba(42,32,24,.5);
  --btn-radius: 1px;
  --reveal-y: 20px;
  --reveal-x: 0px;
  --reveal-blur: 6px;
  --reveal-dur: 1.15s;
  --reveal-ease: cubic-bezier(.22, .61, .3, 1);
  --grain-opacity: .12;
  color-scheme: light;
}
/* paper texture */
[data-mode="material-memory"] body {
  background-image:
    radial-gradient(circle at 20% 15%, rgba(181,100,43,.06), transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(122,46,34,.05), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .12 0 0 0 0 .08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
[data-mode="material-memory"] .site-header { background: color-mix(in srgb, var(--bg) 88%, transparent); }
[data-mode="material-memory"] .site-footer { background: #ddd2bd; }
[data-mode="material-memory"] .media-band,
[data-mode="material-memory"] .recognition-band { background: var(--bg-2); }
/* handwritten captions + credits inked */
[data-mode="material-memory"] figcaption,
[data-mode="material-memory"] .caption { font-family: var(--font-caption); font-size: 18px; color: var(--ink-2); }
[data-mode="material-memory"] .media figcaption { font-family: var(--font-display); }
[data-mode="material-memory"] .band-kicker,
[data-mode="material-memory"] .eyebrow,
[data-mode="material-memory"] .work-meta { font-family: var(--font-credit); }
/* mounted / taped photographs, gently rotated */
[data-mode="material-memory"] .work-media img,
[data-mode="material-memory"] .trace img,
[data-mode="material-memory"] .portrait img,
[data-mode="material-memory"] .hero-figure img {
  background: #fbf7ee; padding: 12px 12px 40px; border: 1px solid rgba(42,32,24,.12);
}
[data-mode="material-memory"] .trace { transform: rotate(-1.2deg); }
[data-mode="material-memory"] .trace:nth-child(even) { transform: rotate(1.4deg); }
[data-mode="material-memory"] .trace:nth-child(3n) { transform: rotate(.6deg); }
[data-mode="material-memory"] .work:nth-child(even) .work-media { transform: rotate(1deg); }
[data-mode="material-memory"] .work:nth-child(odd) .work-media { transform: rotate(-1deg); }
[data-mode="material-memory"] .work-media::before {
  content: ""; position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 92px; height: 26px; background: rgba(181,100,43,.22); border: 1px solid rgba(122,46,34,.12); z-index: 3;
}
[data-mode="material-memory"] .hero-figure { transform: rotate(-1.5deg); }
[data-mode="material-memory"] .hero-figure::after { display: none; }
[data-mode="material-memory"] .trace img { filter: var(--img-filter) grayscale(.2); }
/* develop-from-fog trace reveal */
.js [data-mode="material-memory"] .reveal img { filter: var(--img-filter) sepia(.5) blur(2px); transition: filter 1.3s ease; }
[data-mode="material-memory"] .reveal.in img { filter: var(--img-filter); }
[data-mode="material-memory"] .trace.reveal.in img { filter: var(--img-filter) grayscale(.2); }
[data-mode="material-memory"] .btn { font-family: var(--font-credit); text-transform: uppercase; letter-spacing: .12em; box-shadow: 2px 2px 0 rgba(42,32,24,.35); }
[data-mode="material-memory"] .btn:hover { box-shadow: 3px 3px 0 rgba(42,32,24,.4); transform: translate(-1px,-1px); }
[data-mode="material-memory"] .nav-cta { color: #fbf7ee; }
[data-mode="material-memory"] .bm-pool { box-shadow: none; }
[data-mode="material-memory"] .rec-list { gap: 0; }
[data-mode="material-memory"] .rec-list li { border: 1px dashed var(--hair); margin: -.5px; }
[data-mode="material-memory"] .work-title,
[data-mode="material-memory"] .band-title,
[data-mode="material-memory"] .hero-name { color: var(--ink); }
[data-mode="material-memory"] .hero-nick,
[data-mode="material-memory"] .brand-nick { color: var(--accent); }
[data-mode="material-memory"] .embed-play { background: var(--accent); color: #fbf7ee; }
[data-mode="material-memory"] .embed-poster { filter: sepia(.3) saturate(.85); }

/* ============================== CV PAGE ============================= */
.cv-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(34px, 4vw, 56px); border-bottom: 1px solid var(--hair); }
.cv-name { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 5.5vw, 66px); line-height: 1; letter-spacing: 0; margin: 12px 0 18px; }
.cv-role { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-2); max-width: 60ch; margin: 0 0 26px; }
.cv-meta { display: flex; align-items: center; gap: 20px 26px; flex-wrap: wrap; margin-bottom: 24px; font-family: var(--font-ui); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cv-disclaimer { max-width: 78ch; font-size: 14px; color: var(--ink-2); background: color-mix(in srgb, var(--accent) 7%, transparent); border-left: 2px solid var(--accent); padding: 14px 18px; border-radius: 0 4px 4px 0; margin: 0; }
.cv-disclaimer strong { color: var(--ink); }

.cv-body { max-width: 900px; margin-inline: auto; padding-block: clamp(30px, 5vw, 60px); }
.cv-block { padding-block: clamp(26px, 3.5vw, 44px); border-top: 1px solid var(--hair); }
.cv-block:first-child { border-top: 0; }
.cv-h { font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin: 0 0 24px; }
[data-mode="performance-space"] .cv-h { font-family: var(--font-credit); }
[data-mode="material-memory"] .cv-h { font-family: var(--font-credit); }

.cv-timeline { display: grid; gap: 0; }
.cv-row { display: grid; grid-template-columns: 96px 1fr; gap: 24px; padding: 16px 0; border-top: 1px solid var(--hair); }
.cv-row:first-child { border-top: 0; padding-top: 0; }
.cv-year { font-family: var(--font-credit); font-size: 14px; color: var(--accent); margin: 2px 0 0; letter-spacing: .02em; }
.cv-entries { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cv-entries li { line-height: 1.5; color: var(--ink-2); }
.cv-entries li b { color: var(--ink); font-weight: 600; }
.cv-tag { display: inline-block; margin-left: 6px; font-family: var(--font-ui); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--line); padding: 2px 7px; border-radius: 20px; vertical-align: middle; }

.cv-flat { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.cv-flat li { line-height: 1.5; color: var(--ink-2); padding-left: 18px; position: relative; }
.cv-flat li::before { content: ""; position: absolute; left: 0; top: 11px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.cv-flat li b { color: var(--ink); font-weight: 600; }
.cv-flat li a { color: var(--accent); }

.cv-rec { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px; }
.cv-rec a { color: var(--ink); text-decoration: none; font-size: 15px; border-bottom: 1px solid var(--hair); padding: 8px 0; display: block; transition: color .2s ease, border-color .2s ease; }
.cv-rec a i { color: var(--muted); font-style: italic; }
.cv-rec a:hover { color: var(--accent); border-color: var(--accent); }
.cv-note { color: var(--ink-2); max-width: 68ch; }

/* ==================================================================== */
/*  RESPONSIVE                                                          */
/* ==================================================================== */
@media (max-width: 1080px) {
  .archive-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-note { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  :root { --header-h: 96px; }
  .primary-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .topline .wrap { justify-content: center; }
  .topline-actions { display: none; }
  .hero-stage { grid-template-columns: 1fr; gap: 40px; text-align: left; }
  .hero-stage > * { min-width: 0; }
  .hero-copy { min-width: 0; max-width: 100%; }
  .hero-name { max-width: 100%; overflow-wrap: break-word; }
  .hero-figure { order: -1; max-width: min(100%, 420px); justify-self: start; }
  [data-mode="performance-space"] .hero-figure { position: relative; right: auto; top: auto; transform: none; opacity: .8; order: 2; }
  .work, .work:nth-child(even) .work { grid-template-columns: 1fr; }
  .work:nth-child(even) .work-media { order: 0; }
  .about-grid { grid-template-columns: 1fr; }
  .portrait { position: relative; top: 0; max-width: 420px; }
  .media-wall { grid-template-columns: 1fr; }
  .rec-list { grid-template-columns: 1fr; }
  .cv-rec { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .contact-list > div, .work-facts > div, .bio-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .cv-row { grid-template-columns: 1fr; gap: 6px; }
  .cv-year { color: var(--accent); }
  .hero { min-height: auto; padding-block: clamp(36px, 9vw, 72px); }
  .hero-name { font-size: clamp(28px, 9.6vw, 52px); word-break: break-word; }
  .hero-role { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .scroll-cue { display: none; }
}

/* ==================================================================== */
/*  REDUCED MOTION                                                      */
/* ==================================================================== */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .reveal img { filter: var(--img-filter) !important; }
  [data-mode="material-memory"] .trace.reveal img { filter: var(--img-filter) grayscale(.2) !important; }
  .scroll-cue svg { animation: none; }
  * { scroll-behavior: auto !important; }
}
html.reduce-motion { scroll-behavior: auto; }
html.reduce-motion .reveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
html.reduce-motion .reveal img { filter: var(--img-filter) !important; }
html.reduce-motion .scroll-cue svg { animation: none; }
html.reduce-motion [data-mode="material-memory"] .trace.reveal img { filter: var(--img-filter) grayscale(.2) !important; }