/* ILLUMINATI · site.css · owned by the chrome-markup agent.
 * The semantic copy layer over the stage. Blocks are positioned here; the chrome-ui agent writes
 * opacity / transform / --p on each [data-at] block and --peel on the redaction block.
 * Rule: never position a block with transform (the UI owns it). Children may read --p. */

/* ---------- base ---------- */
html, body { margin: 0; background: var(--color-stone); color: var(--color-bone); overflow-x: clip; }
body {
  font-family: var(--font-text);
  font-size: var(--text-sm);
  letter-spacing: var(--track-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, p, figure { margin: 0; }
button { font: inherit; color: inherit; }
::selection { background: var(--color-cinnabar); color: var(--color-bone); }
:focus-visible { outline: var(--rule-hair) solid var(--color-focus); outline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- engine contract (kept) ---------- */
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#fade { position: fixed; inset: 0; background: var(--color-void); opacity: 0; pointer-events: none; z-index: 50; }
#fade.is-on { animation: fadepulse 300ms var(--ease-in-out); }
@keyframes fadepulse { 0% { opacity: 0 } 45% { opacity: 1 } 100% { opacity: 0 } }
#spacer { pointer-events: none; }

/* ---------- loading veil ---------- */
#veil {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: var(--color-stone);
  transition: opacity 900ms var(--ease-in-out), visibility 0s linear 900ms;
}
.veil-hex { width: clamp(56px, 7vw, 88px); height: auto; overflow: visible; }
.veil-hex polygon {
  fill: none; stroke: var(--color-bone); stroke-width: 0.9; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1 1; stroke-dashoffset: 1;
  animation: veil-draw 2.4s var(--ease-in-out) infinite alternate;
}
@keyframes veil-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
html.is-ready #veil, html.no-webgl #veil { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- fixed chrome ---------- */
.chrome { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.chrome > * { pointer-events: auto; }
#wordmark {
  position: absolute; top: var(--gutter); left: var(--gutter);
  font-family: var(--font-display); font-size: 2.25rem; line-height: 0.8;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-bone); text-decoration: none;
  padding: 6px 0;
}
#seal { position: absolute; top: var(--gutter); right: var(--gutter); width: 76px; height: 76px; }
#bearing, #sound {
  position: absolute; bottom: var(--gutter);
  font-family: var(--font-text); font-size: var(--text-2xs); font-weight: 400;
  letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1;
}
#bearing {
  left: var(--gutter); color: var(--color-ash); pointer-events: none;
  display: flex; gap: 1.1em; align-items: center;
  padding-top: var(--space-2xs); border-top: var(--rule-hair) solid var(--color-rule);
}
#bearing .val { color: var(--color-bone); font-variant-numeric: tabular-nums; }
#sound {
  right: var(--gutter); min-height: 44px; padding: 0 var(--space-sm);
  background: transparent; color: var(--color-ash);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-none);
  cursor: pointer; transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#sound:hover, #sound[aria-pressed="true"] { color: var(--color-bone); border-color: var(--color-ash); }

/* ---------- copy layer ---------- */
#copy { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: clip; }
.blk { position: absolute; color: var(--color-bone); will-change: opacity, transform; }
html.has-webgl .blk { opacity: 0; }
html.has-webgl .blk[data-greet] { opacity: 1; }
.blk .txt { position: relative; }
.blk button, .blk a { pointer-events: auto; }
.plate { display: none; }

/* readability: scrims are siblings of the text, never pseudo-elements of it */
.scrim {
  position: absolute; inset: -14vh -12vw; pointer-events: none;
  background: radial-gradient(closest-side, var(--color-scrim), oklch(9% 0.01 262 / 0.45) 55%, oklch(9% 0.01 262 / 0) 100%);
}

.line { max-width: 44ch; font-size: var(--text-md); line-height: 1.6; font-weight: 400; text-wrap: pretty; }
.line + .line { margin-top: var(--space-xs); }
.line.ash { color: var(--color-ash); }
.line.small { font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.7; }
.line.big { font-size: var(--text-lg); letter-spacing: var(--track-label); text-transform: uppercase; line-height: 1.5; }

.door {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: var(--text-display); line-height: 0.9; letter-spacing: var(--track-display);
  text-transform: uppercase; color: var(--color-bone); text-wrap: balance;
}

/* small mono coordinate: the door's real bearing in the room */
.coord {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: var(--text-2xs); letter-spacing: var(--track-label); text-transform: uppercase;
  color: var(--color-ash); margin-bottom: var(--space-sm); font-variant-numeric: tabular-nums;
}
.coord::before { content: ""; width: 28px; height: var(--rule-hair); background: var(--color-ash); }

/* hairline rule that draws with the block's progress (--p 0..1 written by the UI agent) */
.rule {
  display: block; height: var(--rule-hair); background: var(--color-bone); opacity: 0.55;
  transform-origin: left center;
  transform: scaleX(clamp(0, calc(var(--p, 1) * 3), 1));
}

/* crop marks: two L corners around the block */
.crop { position: absolute; inset: calc(var(--space-md) * -1); pointer-events: none; }
.crop::before, .crop::after { content: ""; position: absolute; width: 18px; height: 18px; border: 0 solid var(--color-ash); }
.crop::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.crop::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* ---------- I. approach ---------- */
.blk-hero { left: var(--gutter); bottom: calc(var(--gutter) + 3.25rem); }
.blk-hero .scrim {
  inset: -30vh -20vw -12vh -10vw;
  background: radial-gradient(closest-side at 40% 62%, oklch(9% 0.01 262 / 0.62), oklch(9% 0.01 262 / 0.3) 60%, oklch(9% 0.01 262 / 0) 100%);
}
.hero-word {
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: min(34vh, 25vw); line-height: 0.88; letter-spacing: 0.005em;
  text-transform: uppercase; color: var(--color-bone);
  margin-left: -0.02em;
}
.hero-line {
  display: flex; align-items: center; gap: var(--space-sm);
  max-width: none; margin-top: var(--space-sm);
  font-size: var(--text-sm); letter-spacing: var(--track-label); text-transform: uppercase;
}
.hero-line .rule { width: 72px; flex: none; transform: none; }
.blk-hero .crop { inset: calc(var(--space-sm) * -1) calc(var(--space-md) * -1); }

.blk-a1 { top: 22vh; right: calc(var(--gutter) + 4vw); width: min(30rem, 38vw); }
.blk-a2 { left: var(--gutter); top: 40vh; width: min(32rem, 40vw); }
.blk-a3 { left: var(--gutter); top: calc(var(--gutter) + 5.5rem); width: min(40rem, 60vw); }
.blk-a3 .scrim { inset: -10vh -10vw; }

/* ---------- II. the eye: trail edge ---------- */
.blk-eye { right: var(--gutter); bottom: calc(var(--gutter) + 4rem); width: min(27rem, 34vw); text-align: right; }
.blk-eye .coord { justify-content: flex-end; }
.blk-eye .door { font-size: clamp(7rem, 3rem + 14vw, 17rem); margin-bottom: var(--space-md); }
.blk-eye .rule { transform-origin: right center; margin-bottom: var(--space-md); }
.blk-eye .line { margin-left: auto; }

/* ---------- III. the archive: top band ---------- */
.blk-archive { top: calc(var(--gutter) + 4.75rem); left: var(--gutter); right: calc(var(--gutter) + 110px); }
.blk-archive .txt { display: flex; align-items: flex-end; gap: var(--space-xl); }
.blk-archive .door { font-size: clamp(6rem, 2rem + 11vw, 13.5rem); flex: none; }
.blk-archive .cols {
  max-width: 34rem; padding-left: var(--space-md); padding-bottom: 0.4rem;
  border-left: var(--rule-hair) solid var(--color-rule);
}
.blk-archive .scrim { inset: -16vh -8vw -18vh -8vw; }

/* the redaction file: a slip of bone paper pinned low-left */
.blk-redact { left: calc(var(--gutter) + 6vw); bottom: calc(var(--gutter) + 5rem); width: min(31rem, 42vw); }
.blk-redact .scrim { inset: -6vh -6vw; }
.blk-redact .txt {
  background: var(--color-bone); color: var(--color-void);
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-top: var(--rule-heavy) solid var(--color-cinnabar);
}
.blk-redact .coord { color: var(--color-surface); }
.blk-redact .coord::before { background: var(--color-surface); }
.blk-redact .line { color: var(--color-void); font-weight: 500; }
.blk-redact .line.ash { color: var(--color-surface); font-weight: 400; }
.bar {
  display: inline-block; width: 6.2ch; height: 1.05em; vertical-align: -0.16em;
  background: var(--color-void);
}
.red-2 .w { position: relative; display: inline-block; }
.cover {
  position: absolute; inset: 0.08em -0.12em; background: var(--color-void);
  transform-origin: right center;
  transform: scaleX(clamp(0, calc(1 - (var(--peel, 0) * 5 - 0.6 - var(--i, 0) * 0.5)), 1));
}

/* ---------- IV. the brotherhood: split ---------- */
.blk-brother { inset: 0; }
.blk-brother .door {
  position: absolute; left: var(--gutter); bottom: calc(var(--gutter) + 3rem);
  font-size: clamp(6.5rem, 2rem + 12vw, 15rem); max-width: 4.2em;
}
.blk-brother .txt { position: absolute; right: var(--gutter); top: 30vh; width: min(25rem, 30vw); }
.blk-brother .rule { margin-bottom: var(--space-md); }
.blk-brother .scrim-l {
  inset: auto auto 0 0; width: 60vw; height: 70vh;
  background: radial-gradient(closest-side at 32% 70%, oklch(9% 0.01 262 / 0.84), oklch(9% 0.01 262 / 0.5) 55%, oklch(9% 0.01 262 / 0) 100%);
}
.blk-brother .scrim-r {
  inset: 12vh 0 auto auto; width: 50vw; height: 64vh;
  background: radial-gradient(closest-side at 66% 50%, var(--color-scrim), oklch(9% 0.01 262 / 0) 100%);
}

/* ---------- V. saturn: bottom band, the quiet page ---------- */
.blk-saturn { left: var(--gutter); right: var(--gutter); bottom: calc(var(--gutter) + 3.25rem); }
.blk-saturn .txt {
  display: flex; align-items: flex-end; gap: var(--space-xl);
  border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md);
}
.blk-saturn .door { font-size: var(--text-display-s); flex: none; }
.blk-saturn .cols { display: grid; grid-template-columns: auto minmax(0, 36ch) minmax(0, 40ch); gap: var(--space-xl); align-items: end; }
.blk-saturn .cols .coord { margin: 0; }
.blk-saturn .line + .line { margin-top: 0; }
.blk-saturn .scrim {
  inset: -18vh calc(var(--gutter) * -1) calc((var(--gutter) + 3.25rem) * -1);
  background: linear-gradient(to top, oklch(9% 0.01 262 / 0.86), oklch(9% 0.01 262 / 0.5) 55%, oklch(9% 0.01 262 / 0));
}

/* ---------- VI. the keeper ---------- */
.keeper {
  position: relative;
  font-family: var(--font-display); font-weight: 400; font-style: normal;
  font-size: min(23vh, 13vw); line-height: 0.9; letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--color-cinnabar-hi); text-wrap: balance;
}
.keeper-bone { color: var(--color-bone); }
.blk-k1 { top: calc(var(--gutter) + 4rem); left: var(--gutter); max-width: 33vw; }
.blk-k2 { right: var(--gutter); bottom: calc(var(--gutter) + 3.5rem); max-width: 64vw; text-align: right; }
.blk-k1 .keeper { font-size: min(20vh, 11.5vw); }
.blk-k2 .scrim {
  inset: auto calc(var(--gutter) * -1) calc((var(--gutter) + 3.5rem) * -1) auto; width: 70vw; height: 70vh;
  background: radial-gradient(closest-side at 70% 72%, oklch(9% 0.01 262 / 0.86), oklch(9% 0.01 262 / 0.55) 55%, oklch(9% 0.01 262 / 0));
}
.blk-k1 .scrim {
  inset: calc((var(--gutter) + 4rem) * -1) auto auto calc(var(--gutter) * -1); width: 52vw; height: 100vh;
  background: linear-gradient(to right, oklch(9% 0.01 262 / 0.88), oklch(9% 0.01 262 / 0.74) 52%, oklch(9% 0.01 262 / 0));
}
.blk-k2 .scrim {
  inset: -12vh -10vw;
  background: radial-gradient(closest-side, oklch(9% 0.01 262 / 0.84), oklch(9% 0.01 262 / 0.6) 60%, oklch(9% 0.01 262 / 0) 100%);
}

/* ---------- back to I. the seal ---------- */
.blk-seal { left: calc(var(--gutter) + 2vw); top: max(9rem, 17vh); width: min(30rem, 36vw); }
.blk-seal .door { font-size: clamp(5rem, 2rem + 6.5vw, 9.5rem); margin-bottom: var(--space-md); }
.blk-seal .scrim { inset: -14vh -12vw; }
#turn-again {
  display: inline-flex; align-items: center; gap: var(--space-sm);
  min-height: 48px; margin-top: var(--space-lg); padding: 0 var(--space-md);
  background: transparent; color: var(--color-bone);
  border: var(--rule-hair) solid var(--color-bone); border-radius: var(--radius-none);
  font-family: var(--font-text); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
#turn-again::before { content: ""; width: 9px; height: 9px; border: var(--rule-hair) solid currentColor; transform: rotate(45deg); }
#turn-again:hover { background: var(--color-cinnabar); border-color: var(--color-cinnabar); color: var(--color-cinnabar-ink); }
.colophon {
  margin-top: var(--space-lg); max-width: 40ch; padding-top: var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
  font-size: var(--text-2xs); letter-spacing: var(--track-label); text-transform: uppercase;
  line-height: 1.8; color: var(--color-ash);
}

/* ---------- tablet ---------- */
@media (max-width: 1080px) and (min-width: 601px) {
  .blk-a1, .blk-a2 { width: min(28rem, 52vw); }
  .blk-eye { width: min(25rem, 48vw); }
  .blk-brother .txt { width: min(24rem, 44vw); }
  .blk-seal { width: min(28rem, 56vw); }
  .blk-redact { width: min(30rem, 60vw); }
  .blk-saturn .cols { grid-template-columns: 1fr; gap: var(--space-xs); }
  .blk-archive .txt { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
}

/* ---------- phone: everything re-anchors to a bottom band ---------- */
@media (max-width: 600px) {
  #wordmark { font-size: 1.9rem; }
  #seal { width: 60px; height: 60px; }
  .blk,
  .blk-hero, .blk-a1, .blk-a2, .blk-a3, .blk-eye, .blk-archive, .blk-redact,
  .blk-saturn, .blk-k1, .blk-k2, .blk-seal {
    inset: auto var(--gutter) calc(var(--gutter) + 3.75rem) var(--gutter);
    width: auto; max-width: none; margin: 0; text-align: left;
  }
  .blk .scrim,
  .blk-hero .scrim, .blk-a3 .scrim, .blk-archive .scrim, .blk-redact .scrim, .blk-saturn .scrim,
  .blk-k1 .scrim, .blk-k2 .scrim, .blk-seal .scrim {
    inset: -24vh calc(var(--gutter) * -1) calc((var(--gutter) + 3.75rem) * -1);
    background: linear-gradient(to top, oklch(9% 0.01 262 / 0.86), oklch(9% 0.01 262 / 0.6) 55%, oklch(9% 0.01 262 / 0));
  }
  .line { font-size: var(--text-sm); max-width: none; }
  .line.big { font-size: var(--text-md); }
  .coord { margin-bottom: var(--space-xs); }

  .hero-word { font-size: min(32vh, 44vw); line-height: 0.88; }
  .hero-line { font-size: var(--text-2xs); }
  .hero-line .rule, .crop { display: none; }

  .door, .blk-eye .door, .blk-archive .door, .blk-saturn .door, .blk-seal .door { font-size: clamp(4.5rem, 24vw, 7rem); margin-bottom: var(--space-sm); }
  .blk-eye .coord { justify-content: flex-start; }
  .blk-eye .rule { transform-origin: left center; margin-bottom: var(--space-sm); }
  .blk-eye .line { margin-left: 0; }

  .blk-archive .txt { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .blk-archive .cols { padding-left: var(--space-sm); }

  .blk-redact .txt { padding: var(--space-md) var(--space-md) var(--space-sm); }

  .blk-brother { inset: 0; }
  .blk-brother .door { left: var(--gutter); right: var(--gutter); bottom: auto; top: calc(var(--gutter) + 4.5rem); font-size: clamp(4.5rem, 22vw, 7rem); max-width: none; }
  .blk-brother .txt { left: var(--gutter); right: var(--gutter); top: auto; bottom: calc(var(--gutter) + 3.75rem); width: auto; }
  .blk-brother .scrim-l { inset: 0 0 auto 0; width: auto; height: 46vh; background: linear-gradient(to bottom, oklch(9% 0.01 262 / 0.7), oklch(9% 0.01 262 / 0)); }
  .blk-brother .scrim-r { inset: auto 0 0 0; width: auto; height: 52vh; background: linear-gradient(to top, oklch(9% 0.01 262 / 0.86), oklch(9% 0.01 262 / 0.55) 55%, oklch(9% 0.01 262 / 0)); }

  .blk-saturn .txt { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .blk-saturn .cols { grid-template-columns: 1fr; gap: var(--space-xs); }

  .keeper { font-size: min(17vh, 19vw); }
  .blk-k1 { inset: calc(var(--gutter) + 4.5rem) var(--gutter) auto var(--gutter); }
  .blk-k1 .scrim { width: auto; height: auto; inset: calc((var(--gutter) + 4.5rem) * -1) calc(var(--gutter) * -1) -12vh; background: linear-gradient(to bottom, oklch(9% 0.01 262 / 0.9), oklch(9% 0.01 262 / 0.84) 70%, oklch(9% 0.01 262 / 0)); }
  .blk-k2 .scrim { background: linear-gradient(to top, oklch(9% 0.01 262 / 0.9), oklch(9% 0.01 262 / 0.84) 60%, oklch(9% 0.01 262 / 0)); }
  .blk-k2 { text-align: left; }

  #turn-again { margin-top: var(--space-md); }
  .colophon { margin-top: var(--space-md); }
}

/* ---------- reduced motion: no drawn rules, no scaled covers; fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .veil-hex polygon { animation: none; stroke-dashoffset: 0; }
  .rule { transform: none; }
  .cover { transform: none; opacity: clamp(0, calc(1 - (var(--peel, 0) * 5 - 0.6 - var(--i, 0) * 0.5)), 1); }
  #veil { transition: opacity 300ms linear, visibility 0s linear 300ms; }
}
html.is-reduced .rule { transform: none; }
html.is-reduced .cover { transform: none; opacity: clamp(0, calc(1 - (var(--peel, 0) * 5 - 0.6 - var(--i, 0) * 0.5)), 1); }

/* ---------- no WebGL: the whole copy in normal flow over the door plates ---------- */
html.no-webgl #stage, html.no-webgl #spacer, html.no-webgl #fade,
html.no-webgl #seal, html.no-webgl #bearing, html.no-webgl #sound { display: none; }
html.no-webgl .chrome { position: absolute; height: 0; }
html.no-webgl #copy { position: static; overflow: visible; padding: calc(var(--gutter) + 4rem) var(--gutter) var(--space-3xl); max-width: 60rem; margin: 0 auto; }
html.no-webgl .blk,
html.no-webgl .blk-brother .door, html.no-webgl .blk-brother .txt {
  position: relative; inset: auto; width: auto; max-width: none; margin: 0;
  opacity: 1 !important; transform: none !important; text-align: left;
}
html.no-webgl .blk { margin-bottom: var(--space-3xl); }
html.no-webgl .blk-redact { margin-top: calc(var(--space-2xl) * -1); }
html.no-webgl .blk-brother .txt { margin-top: var(--space-md); }
html.no-webgl .scrim { display: none; }
html.no-webgl .plate { display: block; margin-top: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); }
html.no-webgl .plate img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: cover; background: var(--color-surface); }
html.no-webgl .hero-word { font-size: min(40vh, 26vw); }
html.no-webgl .blk-eye .coord { justify-content: flex-start; }
html.no-webgl .blk-eye .line { margin-left: 0; }
html.no-webgl .blk-archive .txt, html.no-webgl .blk-saturn .txt { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
html.no-webgl .blk-saturn .cols { grid-template-columns: 1fr; gap: var(--space-xs); }
html.no-webgl .rule { transform: none; }
html.no-webgl .cover { display: none; }

/* sources (seal page) */
.sources { margin-top: var(--space-sm); font-family: var(--font-text); font-size: var(--text-2xs); letter-spacing: var(--track-label); color: var(--color-ash); max-width: 46ch; pointer-events: auto; }
.sources summary { cursor: pointer; text-transform: uppercase; list-style: none; }
.sources summary::before { content: "+ "; color: var(--color-cinnabar-hi); }
.sources[open] summary::before { content: "‘2  "; }
.sources ul { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; gap: 0.4em; text-transform: none; letter-spacing: 0.02em; line-height: 1.5; }
.sources a { color: var(--color-bone); text-underline-offset: 0.2em; }
.sources summary:focus-visible, .sources a:focus-visible { outline: 1px solid var(--color-cinnabar-hi); outline-offset: 3px; }