/* ==========================================================================
   BLIXT — design tokens
   ========================================================================== */

:root {
  /* Type scale */
  --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.2vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl: clamp(2.5rem, 1rem + 4vw, 4.75rem);
  --text-hero: clamp(2.75rem, 0.4rem + 6.6vw, 7.5rem);

  /* Spacing */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;
  --space-8: 2rem;     --space-10: 2.5rem;  --space-12: 3rem;
  --space-16: 4rem;    --space-20: 5rem;    --space-24: 6rem;
  --space-32: 8rem;

  /* Fonts */
  --font-display: 'Zodiak', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Satoshi', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius-sm: 2px;
  --radius-md: 3px;
  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 46rem;
  --content-default: 66rem;
  --content-wide: 84rem;
  --gutter: clamp(var(--space-5), 4.5vw, var(--space-20));
}

/* ---- Light (paper) ---- */
:root, [data-theme='light'] {
  --color-bg: #f1efe9;
  --color-surface: #f7f5f0;
  --color-surface-2: #eae7df;
  --color-ink: #15161a;
  --color-text: #15161a;
  --color-text-muted: #62636a;
  --color-text-faint: #9b9a94;
  --color-text-inverse: #f4f2ec;
  --color-arc: #a8380f;
  --color-arc-hover: #8b2c09;
  --color-hairline: color-mix(in oklab, #15161a 14%, transparent);
  --color-hairline-soft: color-mix(in oklab, #15161a 8%, transparent);
  --color-scrim: color-mix(in oklab, #0b0c0e 42%, transparent);
  --grain-opacity: 0.035;
}

/* ---- Dark (graphite) ---- */
[data-theme='dark'] {
  --color-bg: #0d0e11;
  --color-surface: #14161a;
  --color-surface-2: #1b1e23;
  --color-ink: #0d0e11;
  --color-text: #dedcd6;
  --color-text-muted: #8d8e93;
  --color-text-faint: #5d5f65;
  --color-text-inverse: #14161a;
  --color-arc: #e3814f;
  --color-arc-hover: #f09a6c;
  --color-hairline: color-mix(in oklab, #dedcd6 20%, transparent);
  --color-hairline-soft: color-mix(in oklab, #dedcd6 11%, transparent);
  --color-scrim: color-mix(in oklab, #06070a 52%, transparent);
  --grain-opacity: 0.05;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg: #0d0e11; --color-surface: #14161a; --color-surface-2: #1b1e23;
    --color-text: #dedcd6; --color-text-muted: #8d8e93; --color-text-faint: #5d5f65;
    --color-text-inverse: #14161a; --color-arc: #e3814f; --color-arc-hover: #f09a6c;
    --color-hairline: color-mix(in oklab, #dedcd6 20%, transparent);
    --color-hairline-soft: color-mix(in oklab, #dedcd6 11%, transparent);
    --color-scrim: color-mix(in oklab, #06070a 52%, transparent);
  }
}

/* ==========================================================================
   Primitives
   ========================================================================== */

.wrap { width: 100%; max-width: var(--content-wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--default { max-width: var(--content-default); }
.wrap--narrow { max-width: var(--content-narrow); }

/* Monospace chrome label */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.label--arc { color: var(--color-arc); }

.rule { height: 1px; background: var(--color-hairline); border: 0; }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.02;
}

.lede { font-size: var(--text-lg); line-height: 1.5; max-width: 34ch; color: var(--color-text); }
.body { color: var(--color-text-muted); max-width: 62ch; }
.body + .body { margin-top: var(--space-4); }

/* Film grain — a single fixed overlay, ties the photography to the page */
.grain {
  position: fixed; inset: 0; z-index: 900; pointer-events: none;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
[data-theme='dark'] .grain { mix-blend-mode: screen; }

/* ==========================================================================
   Nav — boxed panel, fixed top-right
   ========================================================================== */

.skip {
  position: absolute; left: var(--space-4); top: var(--space-4); z-index: 1000;
  padding: var(--space-2) var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-hairline); transform: translateY(-200%);
}
.skip:focus { transform: none; }

.panel {
  position: fixed; top: var(--space-4); right: var(--gutter); z-index: 850;
  width: 13.5rem;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  box-shadow: 0 12px 40px color-mix(in oklab, #000 14%, transparent);
}
.panel__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
}
.panel__mark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--color-text); text-decoration: none; }
.panel__mark svg { width: 22px; height: 22px; flex: none; }
.panel__mark span {
  font-family: var(--font-display); font-size: 1.0625rem;
  letter-spacing: 0.18em; line-height: 1; padding-top: 0.12em;
}
.panel__mark svg.panel__emblem { width: auto; height: 28px; }
.panel__mark:hover { color: var(--color-arc); }
.panel__actions { display: flex; align-items: center; gap: var(--space-1); }
.iconbtn {
  display: grid; place-items: center; width: 30px; height: 30px;
  color: var(--color-text-muted); border-radius: var(--radius-sm);
}
.iconbtn:hover { color: var(--color-arc); }
.iconbtn svg { width: 17px; height: 17px; }
.panel__toggle { display: none; }

.panel__nav { display: block; padding: 0 var(--space-4) var(--space-3); }
.panel__nav a {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-hairline-soft);
}
.panel__nav a:last-child { border-bottom: 0; }
.panel__nav a:hover { color: var(--color-arc); }
.panel__nav a[aria-current='page'] { color: var(--color-arc); }

/* The panel is fixed and opaque, so it must get out of the way of the page it
   sits on: it condenses past the hero and retracts while you read downward. */
.panel {
  transition: transform 0.42s cubic-bezier(0.33, 1, 0.68, 1), width 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}
.panel[data-retracted='true'] {
  transform: translateY(calc(-100% - var(--space-8)));
}

@media (min-width: 44.0625rem) {
  .panel[data-condensed='true'] { width: auto; }
  .panel[data-condensed='true'] .panel__toggle { display: grid; }
  .panel[data-condensed='true'] .panel__nav { display: none; }
  .panel[data-condensed='true'][data-open='true'] { width: 13.5rem; }
  .panel[data-condensed='true'][data-open='true'] .panel__nav {
    display: block;
    border-top: 1px solid var(--color-hairline-soft);
    padding-top: var(--space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: none; }
}

@media (max-width: 44rem) {
  .panel { width: auto; left: var(--gutter); right: var(--gutter); top: var(--space-3); }
  .panel__toggle { display: grid; }
  .panel__nav { display: none; }
  .panel[data-open='true'] .panel__nav { display: block; border-top: 1px solid var(--color-hairline-soft); padding-top: var(--space-2); }
  .panel__nav a { padding: 0.8rem 0; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  isolation: isolate;
  color: #f2f0ea;
}
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, color-mix(in oklab, #06070a 62%, transparent) 0%, color-mix(in oklab, #06070a 22%, transparent) 40%, transparent 55%),
    linear-gradient(to top, color-mix(in oklab, #06070a 72%, transparent) 0%, transparent 55%);
}
.hero__head {
  display: grid; align-content: center; justify-items: center;
  text-align: center;
  padding: max(var(--space-24), 16vh) var(--gutter) var(--space-8);
}
.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  line-height: 0.92;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.hero__title em { font-style: italic; }
.hero__foot {
  display: grid; gap: var(--space-6);
  grid-template-columns: 1fr;
  padding: 0 var(--gutter) var(--space-10);
  border-top: 0;
}
.hero__foot p {
  font-size: var(--text-base);
  color: color-mix(in oklab, #f2f0ea 78%, transparent);
  max-width: 44ch;
}
.hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.hero__meta .label { color: color-mix(in oklab, #f2f0ea 60%, transparent); }

@media (min-width: 62rem) {
  /* clears the fixed nav panel, which sits in the upper right */
  .hero__head { align-content: start; padding-top: clamp(18.5rem, 26vh, 22rem); }
  .hero__foot { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }
.section--tight { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.section--edge { border-top: 1px solid var(--color-hairline); }

.eyebrow {
  display: flex; align-items: baseline; gap: var(--space-4);
  margin-bottom: var(--space-10);
}
.eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--color-hairline); }

/* Manifesto — indexed statements */
.thesis { display: grid; gap: 0; }
.thesis__item {
  display: grid; gap: var(--space-4);
  grid-template-columns: 1fr;
  padding-block: clamp(var(--space-8), 4vw, var(--space-16));
  border-top: 1px solid var(--color-hairline-soft);
}
.thesis__item:first-child { border-top: 0; padding-top: 0; }
.thesis__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-arc); }
.thesis__claim {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: 1.14;
  letter-spacing: -0.015em;
  max-width: 30ch;
}
@media (min-width: 56rem) {
  .thesis__item { grid-template-columns: 5rem minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
  .thesis__n { padding-top: 0.6em; }
}

/* Statement — one oversized line */
.statement {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.04;
  letter-spacing: -0.028em;
  max-width: 26ch;
}
.statement--wide { font-size: var(--text-3xl); max-width: 30ch; }
.statement em { font-style: italic; color: var(--color-arc); }

/* Body column offset to the right of a full-width statement */
.offsetcol { display: grid; margin-top: clamp(var(--space-10), 5vw, var(--space-16)); }
@media (min-width: 62rem) {
  .offsetcol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); }
  .offsetcol > * { grid-column: 2; }
}

/* Figure — full-bleed image with mono caption */
.plate { margin: 0; }
.plate img { width: 100%; aspect-ratio: 16 / 8; object-fit: cover; }
.plate--tall img { aspect-ratio: 4 / 3; }
.plate figcaption {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--gutter) 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint);
  max-width: none;
}

/* Practice / domain rows */
.domains { border-top: 1px solid var(--color-hairline); }
.domain {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.domain__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--color-text-faint); }
.domain__name { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.domain__desc { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 52ch; }
@media (min-width: 56rem) {
  .domain { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr); gap: var(--space-8); align-items: baseline; }
  .domain__n { padding-top: 0.35em; }
}

/* Figures / numbers */
.figures { display: grid; gap: var(--space-10); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.figures__val {
  font-family: var(--font-display); font-size: var(--text-2xl);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.figures__key { margin-top: var(--space-3); }

/* Portals */
.portals { display: grid; gap: 1px; background: var(--color-hairline); border-block: 1px solid var(--color-hairline); }
@media (min-width: 48rem) { .portals { grid-template-columns: 1fr 1fr; } }
.portal {
  position: relative; display: grid; align-content: end; gap: var(--space-3);
  min-height: 24rem; padding: var(--gutter);
  text-decoration: none; color: #f2f0ea; isolation: isolate; overflow: hidden;
  background: var(--color-ink);
}
.portal img {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.02); transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1), opacity 400ms;
  opacity: 0.78;
}
.portal::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in oklab, #06070a 80%, transparent), transparent 72%);
}
.portal:hover img { transform: scale(1.06); opacity: 0.92; }
.portal__name { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.05; }
.portal__go { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in oklab, #f2f0ea 72%, transparent); }
.portal:hover .portal__go { color: #f2f0ea; }

/* Index table (Work / Lab notes) */
.index { width: 100%; }
.index caption { text-align: left; }
.index thead th {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint);
  text-align: left; padding: 0 var(--space-4) var(--space-3) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.index tbody td { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-bottom: 1px solid var(--color-hairline-soft); vertical-align: top; }
.index tbody tr { transition: background var(--transition-interactive); }
.index tbody tr:hover { background: var(--color-surface); }
.index__t { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.2; }
.index__m { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-text-muted); white-space: nowrap; }
.index__d { color: var(--color-text-muted); font-size: var(--text-sm); }
.index__hide { display: none; }
@media (min-width: 56rem) { .index__hide { display: table-cell; } }

/* Definition-style fact list */
.facts { border-top: 1px solid var(--color-hairline); }
.facts > div {
  display: grid; grid-template-columns: 1fr; gap: var(--space-1);
  padding-block: var(--space-4); border-bottom: 1px solid var(--color-hairline-soft);
}
.facts dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-faint); }
.facts dd { font-size: var(--text-sm); }
@media (min-width: 40rem) { .facts > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-6); align-items: baseline; } }

/* Two-column editorial split */
.split { display: grid; gap: var(--space-10); }
@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(var(--space-10), 6vw, var(--space-24)); align-items: start; }
  .split--offset > :last-child { padding-top: var(--space-16); }
}

/* Pull quote */
.pull {
  font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.2;
  letter-spacing: -0.015em; max-width: 30ch;
  padding-left: var(--space-6); border-left: 1px solid var(--color-arc);
}

/* Link with arrow */
.arrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none; color: var(--color-text);
  border-bottom: 1px solid var(--color-hairline); padding-bottom: 0.35rem;
}
.arrow:hover { color: var(--color-arc); border-color: var(--color-arc); }
.arrow span { transition: transform var(--transition-interactive); }
.arrow:hover span { transform: translateX(3px); }

/* Form */
.form { display: grid; gap: var(--space-6); max-width: 34rem; }
.field { display: grid; gap: var(--space-2); }
.field label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: var(--space-3) 0;
  background: transparent; border: 0; border-bottom: 1px solid var(--color-hairline);
  font-size: var(--text-base); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 6.5rem; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-bottom-color: var(--color-arc); }
.btn {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: 44px; padding: var(--space-3) var(--space-6);
  background: var(--color-text); color: var(--color-bg);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.btn:hover { background: var(--color-arc); color: #f7f5f0; }
.formnote { font-size: var(--text-xs); color: var(--color-text-faint); font-family: var(--font-mono); letter-spacing: 0.06em; }

/* Page header (interior pages) */
.pagehead { padding-top: clamp(var(--space-24), 18vh, var(--space-32)); padding-bottom: clamp(var(--space-10), 6vw, var(--space-16)); }
.pagehead h1 { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.025em; line-height: 1.02; max-width: 22ch; }
.pagehead .lede { margin-top: var(--space-8); max-width: 52ch; }

/* Footer */
.foot { border-top: 1px solid var(--color-hairline); padding-block: var(--space-12) var(--space-8); }
.foot__grid { display: grid; gap: var(--space-10); }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: var(--space-16); } }
.foot__brand { display: flex; align-items: center; gap: 0.65rem; }
.foot__brand svg { width: 24px; height: 24px; }
.foot__brand span { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.16em; }
.foot ul { list-style: none; display: grid; gap: var(--space-3); }
.foot ul a { font-size: var(--text-sm); text-decoration: none; color: var(--color-text-muted); }
.foot ul a:hover { color: var(--color-arc); }
.foot__legal {
  margin-top: var(--space-12); padding-top: var(--space-5);
  border-top: 1px solid var(--color-hairline-soft);
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8); justify-content: space-between;
}

/* Placeholder marker — content to be filled in later */
.tbd {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-arc);
  border: 1px dashed color-mix(in oklab, var(--color-arc) 45%, transparent);
  padding: 0.15rem 0.45rem;
}

/* Scroll reveal */
.has-js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Wave visuals — cymatics & caustics
   ========================================================================== */

:root, [data-theme='light'] { --wave-ink: 24,25,30; --wave-glow: 168,56,15; }
[data-theme='dark']        { --wave-ink: 224,222,216; --wave-glow: 227,129,79; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --wave-ink: 224,222,216; --wave-glow: 227,129,79; }
}

/* ---- Cymatic plate ---- */
.plate-disc {
  position: relative;
  width: 100%;
  max-width: 34rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%,
      color-mix(in oklab, var(--color-surface) 96%, var(--color-text)) 0%,
      var(--color-surface-2) 62%,
      color-mix(in oklab, var(--color-surface-2) 82%, var(--color-text)) 100%);
  box-shadow:
    inset 0 0 0 1px var(--color-hairline),
    inset 0 2px 18px color-mix(in oklab, var(--color-text) 10%, transparent),
    0 20px 60px color-mix(in oklab, #000 16%, transparent);
  overflow: hidden;
}
.plate-disc canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.plate-disc__rim {
  position: absolute; inset: 3.5%;
  border-radius: 50%;
  border: 1px solid var(--color-hairline-soft);
  pointer-events: none;
}
.plate-readout {
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-5);
}
.plate-readout b {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.12em; color: var(--color-arc); font-variant-numeric: tabular-nums;
}

/* ---- Caustic band ---- */
.caustic {
  position: relative;
  min-height: min(78svh, 40rem);
  display: grid; align-content: end;
  padding: var(--gutter);
  padding-block-end: clamp(var(--space-10), 6vw, var(--space-20));
  isolation: isolate; overflow: hidden;
  background: #0b0b0d;
  color: #f2f0ec;
  border-block: 1px solid var(--color-hairline);
}
/* Still frame underneath, slow loop on top: the video fades in once it is
   playing, so a slow connection or a blocked autoplay still shows the
   photograph rather than an empty black band. */
.caustic__media { position: absolute; inset: 0; z-index: -2; }
.caustic__media img,
.caustic__media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 35%;
  display: block;
}
.caustic__media video { opacity: 0; transition: opacity 900ms ease; }
.caustic__media video[data-playing='true'] { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .caustic__media video { display: none; }
}
/* The light lives in the upper right, so the scrim only has to protect the
   lower left where the copy sits. */
.caustic::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(105% 120% at 78% 22%, transparent 42%, color-mix(in oklab, #08080a 66%, transparent) 100%),
    linear-gradient(to top, color-mix(in oklab, #08080a 88%, transparent) 0%, color-mix(in oklab, #08080a 62%, transparent) 24%, color-mix(in oklab, #08080a 26%, transparent) 48%, transparent 72%);
}
.caustic__inner {
  width: 100%; max-width: var(--content-wide); margin-inline: auto;
  text-shadow: 0 1px 2px rgba(8, 8, 10, 0.6), 0 2px 26px rgba(8, 8, 10, 0.85);
}
.caustic__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: 1.04; letter-spacing: -0.025em;
  max-width: 26ch;
}
.caustic__title em { font-style: italic; }
.caustic__body {
  margin-top: var(--space-6);
  color: color-mix(in oklab, #f2f0ec 82%, transparent);
  max-width: 52ch;
}
.caustic .label { color: color-mix(in oklab, #f2f0ec 74%, transparent); }
.caustic__meta { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-8); }
@media (max-width: 44rem) {
  /* A tall crop of a wide frame shows very little of it, so aim the crop at the
     part of the wall where the light gathers along the top and falls away below
     — which is also what keeps the copy on a dark ground. */
  .caustic__media img,
  .caustic__media video { object-position: 52% 30%; }
  .caustic::after {
    background:
      radial-gradient(150% 100% at 70% 16%, transparent 40%, color-mix(in oklab, #08080a 60%, transparent) 100%),
      linear-gradient(to top, color-mix(in oklab, #08080a 92%, transparent) 0%, color-mix(in oklab, #08080a 76%, transparent) 34%, color-mix(in oklab, #08080a 40%, transparent) 60%, transparent 86%);
  }
}

/* ------------------------------------------------------------------
   Research — embedded simulator (click to run; the 3D scene only
   loads when asked, so the page stays light on phones)
   ------------------------------------------------------------------ */
.sim { margin: 0; }
.sim__stage {
  position: relative; overflow: hidden;
  height: clamp(520px, 82vh, 900px);
  background: #05060a;
}
.sim__poster, .sim__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
.sim__poster { object-fit: cover; opacity: 0.72; transition: opacity 400ms ease; }
.sim__stage:hover .sim__poster { opacity: 0.85; }
.sim__run {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 0.75rem;
  min-height: 52px; padding: 0 var(--space-8);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.16em; text-transform: uppercase;
  color: #f7f5f0; background: color-mix(in oklab, #0b0c0e 70%, transparent);
  border: 1px solid color-mix(in oklab, #f7f5f0 30%, transparent); border-radius: 999px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  white-space: nowrap;
  cursor: pointer; transition: background var(--transition-interactive), border-color var(--transition-interactive);
}
.sim__run:hover { background: #a8380f; border-color: #a8380f; }
.sim__run:focus-visible { outline: 2px solid #e3814f; outline-offset: 3px; }
.sim__run-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #e3814f;
  box-shadow: 0 0 0 0 rgba(227, 129, 79, 0.6); animation: simPulse 1.8s infinite;
}
.sim__run:hover .sim__run-dot { background: #f7f5f0; }
@keyframes simPulse { 0% { box-shadow: 0 0 0 0 rgba(227,129,79,0.6); } 70% { box-shadow: 0 0 0 12px rgba(227,129,79,0); } 100% { box-shadow: 0 0 0 0 rgba(227,129,79,0); } }
@media (prefers-reduced-motion: reduce) { .sim__run-dot { animation: none; } }
.sim__hint {
  position: absolute; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase;
  color: color-mix(in oklab, #f2f0ea 62%, transparent); white-space: nowrap; max-width: none;
}
.sim.is-live .sim__poster, .sim.is-live .sim__run, .sim.is-live .sim__hint { display: none; }
.sim figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3) var(--space-6);
  padding: var(--space-3) var(--gutter) 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-faint); max-width: none;
}
.sim__full { margin-left: auto; color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-hairline); }
.sim__full:hover { color: var(--color-arc); border-color: var(--color-arc); }
.domain__name a { color: inherit; text-decoration: none; }
.domain__name a:hover { color: var(--color-arc); }
@media (max-width: 640px) {
  .sim__stage { height: 78vh; }
  .sim__hint { white-space: normal; text-align: center; width: 90%; }
}

.sim__status {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  color: rgba(240, 236, 228, 0.78); font-family: var(--font-mono, monospace); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
  text-align: center; padding: 24px; pointer-events: none;
}
.sim__status > span:not(.sim__spinner) { display: inline-flex; gap: 12px; align-items: center; }
.sim__status.is-failed { background: #07080b; pointer-events: auto; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.sim__spinner { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid rgba(240,236,228,0.18); border-top-color: #e3814f; animation: sim-spin 900ms linear infinite; }
@keyframes sim-spin { to { transform: rotate(360deg); } }
.sim__run.sim__run--inline { position: static; transform: none; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .sim__spinner { animation: none; } }

.sim__run { text-decoration: none; }
@media (max-width: 560px) {
  .sim__run { white-space: normal; max-width: calc(100% - 48px); width: max-content; text-align: left; line-height: 1.4; }
}