/* ==========================================================================
   ARSENE GAME STUDIO — components: the static look of every section (brief §4)
   Motion lives in motion.css / the js modules; characters in characters.css.
   No literal colours here.
   ========================================================================== */

/* ---- mounts: the page sets the box, the svg fills it -------------------- */
/* characters.css (loaded later) also styles .char-mount { position: relative }; every positioned mount
   below is written as .char-mount.<ctx> (0,2,0) so the page's placement wins regardless of file order. */
.char-mount { display: block; position: relative; }
.char-mount > svg { display: block; width: 100%; height: 100%; }
.rose-mount { display: inline-block; }
.brand-logo__letter, .brand-mark__e { fill: var(--logo-white); }
.brand-mark { overflow: visible; }
.rose-mount > svg { display: block; width: 100%; height: 100%; }

/* ---- top-bar controls ---------------------------------------------------- */
.proof-toggle {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--muted);
  transition: color var(--t-micro) var(--ease-expo);
}
.proof-toggle:hover, .proof-toggle[aria-pressed="true"] { color: var(--paper); }
.proof-toggle__label { position: relative; }
.proof-toggle__label::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: var(--hairline);
  background: var(--hue);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-micro) var(--ease-expo);
}
.proof-toggle[aria-pressed="true"] .proof-toggle__label::after { transform: scaleX(1); }

.lang-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  color: var(--muted);
}
.lang-switch__opt { transition: color var(--t-micro) var(--ease-expo); }
.lang-switch__sep { color: var(--line-strong); }
html[lang="en"] .lang-switch__opt[data-lang="en"],
html[lang="tr"] .lang-switch__opt[data-lang="tr"] { color: var(--paper); }
.lang-switch__bar {
  position: absolute;
  left: 0;
  bottom: 9px;
  width: calc(2ch + 0.12em);
  height: var(--hairline);
  background: var(--paper);
  transition: transform var(--t-micro) var(--ease-expo);
}
html[lang="tr"] .lang-switch__bar { transform: translateX(calc(3ch + 0.36em + 16px)); }

/* ==========================================================================
   00 · COVER
   ========================================================================== */
.cover { position: relative; }
.cover__stage { position: absolute; inset: 0; }
html:not(.js) .cover { height: auto; }
html:not(.js) .cover__stage { position: relative; height: 100svh; }

.stencil-measure {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--fs-stencil);
  font-variation-settings: "wdth" 125;
  letter-spacing: var(--ls-display);
  line-height: 1;
}

/* the stencil box: its bottom edge is the rule (62% of the viewport) and the letters' baseline; hero.js sizes it
   to the logo's own proportions (js/brand.js) */
.stencil {
  position: absolute;
  left: var(--gutter);
  bottom: 38%;
  /* above the index plates (z 2): during the pin the stencil lifts off the page while the plates open beneath it */
  z-index: 3;
  pointer-events: none;
}
.stencil__defs { position: absolute; width: 0; height: 0; }
.stencil__noscript { display: block; width: min(100%, 1200px); height: auto; }
.drift {
  position: absolute;
  inset: 0;
  z-index: var(--z-drift);
  clip-path: url(#stencil-clip);
}
.drift__track {
  /* the cast is sized by the stencil itself (2 em tall), so the x-height band always frames the same crop:
     brim and monocle, visor, halo and lapels, crown band and slits, ears — never only spike tips */
  --drift-h: calc(2 * var(--stencil-fs, var(--fs-stencil)));
  --drift-w: calc(var(--drift-h) * 0.625);
  position: absolute;
  left: 0;
  top: calc(-0.29 * var(--stencil-fs, var(--fs-stencil)));
  display: flex;
  width: max-content;
  column-gap: calc(var(--drift-w) * 0.22);
}
.drift__set { display: flex; column-gap: calc(var(--drift-w) * 0.22); }
.drift__char { flex: none; height: var(--drift-h); width: var(--drift-w); }

.stencil__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 1;
}
.stencil__stroke { fill: none; stroke-width: 1; }
.stencil__stroke path { vector-effect: non-scaling-stroke; }
.stencil__stroke--paper { stroke: var(--paper); }
.stencil__stroke--rose  { stroke: var(--rose); }
html[data-proof] .stencil__stroke--rose { display: none; }   /* a proof has no misprint */

.cover__rule {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: 62%;
  width: auto;
  height: 1px;
  z-index: var(--z-rules);
}
.cover__rule line { stroke: var(--line-strong); stroke-width: 1; }

.cover__folio {
  position: absolute;
  left: var(--gutter);
  top: calc(62% + var(--space-4));
  display: flex;
  flex-direction: column;
  color: var(--muted);
}
.cover__folio-line:first-child { color: var(--paper); }

.cover__tagline {
  position: absolute;
  right: var(--gutter);
  top: calc(62% + var(--space-4));
  max-width: 24ch;
  text-align: right;
  color: var(--text);
}

.cover__seal {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--topbar-h) + var(--space-5));
  width: 40px;
  height: 40px;
  color: var(--rose);
}

.cover__cue {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--muted);
  white-space: nowrap;
}
.cover__cue-line { width: 1px; height: 24px; background: var(--paper); }

/* the index: six plates overlaid on the stage; closed to a slit on the rule until hero.js opens them */
.index {
  position: absolute;
  inset: 0;
  z-index: 2;
}
html:not(.js) .index { position: relative; inset: auto; height: 100svh; }
.index__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  height: 100%;
}
.index__col { position: relative; min-width: 0; }
/* closed = a slit on the rule. The insets overlap by 0.2% on purpose (same value as hero.js): the scrubbed
   timeline rests a hair above 0, and an exact 62/38 slit becomes a sub-pixel sliver that WebKit paints as a
   one-pixel line of the plate; an over-100% inset is an empty rectangle, so the plates stay shut at rest */
html.js .index:not(.is-open) .index__col { clip-path: inset(62.2% 0 38.2% 0); }
.index__plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 0;
  border-right: var(--hairline) solid var(--line);
  color: var(--paper);
}
/* the column is clip-path'ed (the opening slit; the scrub leaves inset(0) inline once open), so a ring drawn
   outside the plate would be clipped away: this one is drawn 4px inside, clear of the hairline (brief §10) */
.index__plate:focus-visible { outline-offset: -4px; }
.index__col:last-child .index__plate { border-right: 0; }
.index__no {
  position: absolute;
  top: calc(var(--topbar-h) + var(--space-2));
  left: var(--space-4);
  color: var(--muted);
}
.index__title {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--topbar-h) + var(--space-5));
  max-height: 50%;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 48px;
  line-height: 1;
  color: var(--paper);
  white-space: nowrap;
  /* a plate-coloured knockout edge so the title stays legible where it crosses the figure (no shadow) */
  paint-order: stroke fill;
  -webkit-text-stroke: 0.16em var(--plate);
}
.char-mount.index__char {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100%;
  height: 70vh;
  transform: translateX(-50%);
}
.index__rose {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
}
.index__row {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  color: var(--paper);
}
.index__mini { width: 23px; height: 36px; }
.index__plate:hover { background: var(--ink-2); }

/* ==========================================================================
   TICKER · NOW SHOWING
   ========================================================================== */
.ticker { position: relative; }
.ticker__head {
  padding: var(--space-2) var(--gutter);
  color: var(--muted);
  border-top: var(--hairline) solid var(--line);
}
.ticker__strip {
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--ink-2);
  border-top: var(--hairline) solid var(--line);
}
.ticker__strip--b { border-bottom: var(--hairline) solid var(--line); }
.ticker__track { display: flex; width: max-content; }
.ticker__set { display: flex; align-items: center; }
.ticker__item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-inline: var(--space-4);
  white-space: nowrap;
}
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 36px;
  padding-inline: 7px;
  border-radius: 18px;
  background: var(--paper);
  color: var(--ink);
}
.pill__char { width: 23px; height: 36px; }
.ticker__text { color: var(--paper); }
.ticker__sep { width: 10px; height: 10px; color: var(--rose); }

/* ==========================================================================
   01 · THE HEISTS (gallery)
   ========================================================================== */
.gallery { position: relative; }
.gallery__progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--hairline);
  background: var(--line);
  z-index: var(--z-rules);
}
.gallery__progress-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--hue);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.gallery__counter {
  position: absolute;
  top: calc(var(--topbar-h) + var(--space-2));   /* under the fixed top bar while the stage is pinned */
  right: var(--gutter);
  z-index: 2;
  color: var(--muted);
}
.gallery__stage { position: relative; z-index: var(--z-gallery); }
.gallery__track { display: flex; height: 100%; width: 500%; }
.spread {
  flex: 0 0 20%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: end;
  padding: calc(var(--topbar-h) + var(--space-3)) var(--gutter) var(--space-5);
}
.spread__page { min-width: 0; }
.spread__page--left {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: end;
  padding-bottom: var(--space-4);
}
.spread__page--right {
  grid-column: 7 / 13;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: end;
}
.spread__no { color: var(--muted); }
.spread__title {
  margin: var(--space-2) 0 var(--space-3);
  font-size: min(var(--fs-chapter), 7.4vw);
  color: var(--paper);
  --wdth: 100;
}
.spread__word { display: block; }
.spread__genre { margin-bottom: var(--space-4); }
.spread__pitch { max-width: 28ch; margin-bottom: var(--space-5); color: var(--text); }
.spread__take { margin-bottom: var(--space-4); color: var(--muted); }
.spread__take-label { color: var(--paper); }
.spread__open { color: var(--paper); }
.spread__wanted {
  align-self: flex-start;
  width: min(100%, calc(80svh * 0.75), 675px);
  margin-inline: auto;
  margin-bottom: var(--space-2);
  color: var(--muted);
}
.spread__name { color: var(--paper); }
.spread__plate {
  width: min(100%, calc(80svh * 0.75), 675px);
  aspect-ratio: 3 / 4;
  border: var(--hairline) solid var(--line-strong);
  background: var(--plate);
  overflow: hidden;
  color: var(--paper);
}
.plate__floor {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14%;
  background-image: radial-gradient(circle, var(--line-strong) 0.8px, transparent 1px);
  background-size: 8px 8px;
  -webkit-mask-image: linear-gradient(to top, var(--ink), transparent);
  mask-image: linear-gradient(to top, var(--ink), transparent);
}
.char-mount.spread__char {
  position: absolute;
  left: 50%;
  bottom: 6%;
  height: 75%;
  aspect-ratio: 5 / 8;
  transform: translateX(-50%);
}
.spread__caption {
  display: none;
  width: min(100%, calc(80svh * 0.75), 675px);
  margin: var(--space-2) auto 0;
  color: var(--muted);
}
@media (hover: none) { .spread__caption { display: block; } }

/* ==========================================================================
   01 · THE LINEUP (wall)
   ========================================================================== */
.lineup__heading { margin-bottom: var(--space-6); color: var(--paper); }
.wall {
  /* Sable = 52vh, but never wider than the wall: the five figures (k sum 4.7 × 5/8 aspect + air) must fit */
  --wall-avail: calc(100vw - var(--spine-w) - 2 * var(--gutter));
  --suspect-h: min(52vh, calc(var(--wall-avail) / 3.3));
  --wall-caption: 72px;
  position: relative;
  height: calc(72vh + var(--wall-caption));
  min-height: 460px;
  background: var(--ink-2);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
  z-index: var(--z-lineup);
}
.wall__markers { position: absolute; inset: 0; pointer-events: none; }
.wall__marker {
  position: absolute;
  left: 0; right: 0;
  bottom: calc(var(--wall-caption) + var(--i) * 10vh);
  height: var(--hairline);
  background: var(--line);
}
.wall__marker span {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-1);
  color: var(--muted);
}
.wall__marker--unit { background: none; }
.wall__suspects {
  position: absolute;
  left: var(--gutter); right: var(--gutter);
  bottom: var(--wall-caption);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.suspect { --k: 1; position: relative; }
.suspect--king    { --k: 1.10; }
.suspect--kestrel { --k: 1.05; }
.suspect--deniz   { --k: 0.95; }
.suspect--pip     { --k: 0.60; }
.suspect__link { display: block; color: var(--paper); }
.suspect__char { height: calc(var(--suspect-h) * var(--k)); aspect-ratio: 5 / 8; }
.suspect__caption {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
  text-align: center;
}
.suspect__name { color: var(--paper); }
.wall__floor {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--wall-caption);
  height: var(--hairline);
  background: var(--line-strong);
  transform-origin: 0 50%;
}

/* ==========================================================================
   02 · THE LETTER
   ========================================================================== */
.letter__split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  min-height: 300svh;
}
.letter__words { grid-column: 1 / 7; min-width: 0; }
.letter__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
}
.word-stage {
  position: relative;
  width: 100%;
  height: calc(var(--fs-word) * 0.76);
}
.word-drift {
  position: absolute;
  inset: 0;
  z-index: 0;
  clip-path: url(#word-clip-1);
}
.word-drift .drift__track { --drift-h: 100svh; top: calc(-0.2 * var(--fs-word)); }
.word {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(100% 0 0 0);
}
.word.is-current { clip-path: inset(0 0 0 0); }
.word__svg { width: 100%; height: 100%; overflow: visible; }
.word__text {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: var(--fs-word);
  font-variation-settings: "wdth" var(--word-wdth, 62);
  letter-spacing: var(--ls-display);
}
.word__stroke { fill: none; stroke: var(--paper); stroke-width: 1; vector-effect: non-scaling-stroke; }
html:not(.js) .word__stroke { fill: var(--paper); }
.letter__seal {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 96px;
  color: var(--rose);
  opacity: 0;
}
.letter__seal.is-stamped { opacity: 1; }

.letter__body {
  grid-column: 7 / 13;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--space-7);
  padding-block: 25svh;
}
.letter__salutation { color: var(--paper); }
.article { position: relative; padding-left: 3.5rem; max-width: 56ch; }
.article__num {
  position: absolute;
  left: 0; top: 0.2em;
  color: var(--paper);
}
.article__date { margin-bottom: var(--space-2); }
.article__body { color: var(--text); }
.letter__signoff { color: var(--paper); }
.signature { width: 150px; height: auto; margin-top: calc(-1 * var(--space-5)); color: var(--paper); }
.signature__path { stroke: currentColor; stroke-width: 2.2; }
.word-plate { display: none; }

/* ==========================================================================
   03 · THE HOUSE
   ========================================================================== */
.house__heading { margin-bottom: var(--space-6); color: var(--paper); }
.cast { border-top: var(--hairline) solid var(--line-strong); margin-bottom: var(--space-7); }
.cast th, .cast td {
  padding: 0 var(--space-3);
  height: 56px;
  vertical-align: middle;
  border-bottom: var(--hairline) solid var(--line);
}
.cast th:first-child, .cast td:first-child { padding-left: 0; }
.cast th { height: 48px; }
.cast th:nth-child(1) { width: 25%; }
.cast th:nth-child(2) { width: 33.34%; }
.cast th:nth-child(3) { width: 25%; }
.cast th:nth-child(4) { width: 16.66%; }
.cast__row { transition: background var(--t-micro) var(--ease-expo); }
.cast__row:hover, .cast__row:focus-visible { background: var(--plate); }
.cast__name { color: var(--paper); }
.cast__known { font-size: var(--fs-body); }
.cast .cast__years { position: relative; text-align: right; padding-right: 64px; overflow: hidden; } /* the portrait waits outside the cell edge; it must not widen the page */
.cast .cast__th-years { text-align: right; padding-right: 64px; }
.portrait {
  position: absolute;
  right: 0;
  top: 50%;
  width: 48px;
  height: 48px;
  transform: translate(48px, -50%);
  opacity: 0;
  transition: transform var(--t-micro) var(--ease-expo), opacity var(--t-micro) var(--ease-expo);
}
.cast__row:hover .portrait, .cast__row:focus-visible .portrait { transform: translate(0, -50%); opacity: 1; }
.portrait svg { width: 100%; height: 100%; overflow: visible; }
.portrait__base { fill: var(--hue); }
.portrait__base text {
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-weight: 900;
  font-size: 18px;
  letter-spacing: var(--ls-display);
  fill: var(--ink);
}
.portrait__print {
  fill: var(--hue);
  mix-blend-mode: screen;
  opacity: 0.9;
  transform: translate(3px, -2px);
  transition: transform var(--t-micro) var(--ease-expo) var(--t-micro);
}
.cast__row:hover .portrait__print, .cast__row:focus-visible .portrait__print { transform: translate(0, 0); }
html[data-proof="true"] .portrait__print { display: none; }   /* a proof has no misprint (§12), the portraits included */

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hairline);
  background: var(--line);
  border: var(--hairline) solid var(--line);
}
.value { border: 0; padding: var(--space-6); }
.value__title { color: var(--paper); margin-bottom: var(--space-4); --wdth: 100; }
.value__line { color: var(--text); }

/* ==========================================================================
   04 · JOIN THE CREW (ledger)
   ========================================================================== */
.crew__heading { color: var(--paper); margin-bottom: var(--space-3); }
.crew__lead { margin-bottom: var(--space-6); color: var(--text); }
.ledger { border-top: var(--hairline) solid var(--line-strong); }
.ledger__head, .ledger__toggle {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 5rem;
  column-gap: var(--space-3);
  align-items: center;
  width: 100%;
}
.ledger__head { height: 48px; border-bottom: var(--hairline) solid var(--line); }
.ledger__row { border-bottom: var(--hairline) solid var(--line); }
.ledger__h { font: inherit; }
.ledger__toggle {
  min-height: 64px;
  padding-block: var(--space-2);
  color: var(--text);
  transition: background var(--t-micro) var(--ease-expo);
}
.ledger__toggle:hover, .ledger__row.is-open .ledger__toggle { background: var(--plate); }
.ledger__role { color: var(--paper); }
.ledger__status { text-align: right; color: var(--hue-text); }   /* small mono: the AA-safe text tint */
.ledger__brief { position: relative; height: 0; }
.ledger__row.is-open .ledger__brief { height: auto; }
.ledger__brief-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: 60ch;
  padding: var(--space-4) 0 var(--space-6) 3.5rem;
}
.ledger__apply { color: var(--paper); }
.char-mount.ledger__peek {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 25%;
  transform: translateX(100%);
}
.ledger__row.is-open .ledger__peek { transform: none; }
.crew__footer { margin-top: var(--space-6); color: var(--paper); }

/* ==========================================================================
   05 · CORRESPONDENCE
   ========================================================================== */
.post__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--space-6);
  align-items: start;
}
.post__aside { grid-column: 1 / 6; min-width: 0; }
.post__heading { color: var(--paper); margin-bottom: var(--space-6); line-height: 1; }
.post__list { display: flex; flex-direction: column; gap: var(--space-3); color: var(--muted); }
.post__list a { color: var(--paper); text-transform: none; letter-spacing: 0.02em; }

.letterform {
  grid-column: 6 / 13;
  min-width: 0;
  background: var(--ink-2);
  padding: var(--space-6);
}
.letterform__greeting { color: var(--paper); margin-bottom: var(--space-4); }
.letterform__line { color: var(--text); line-height: 1.9; }
.blank { position: relative; display: inline-block; vertical-align: baseline; max-width: 100%; }
.blank__input {
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 0 0.2em;
  border-bottom: var(--hairline) solid var(--line-strong);
  color: var(--paper);
  font-style: italic;
  line-height: 1.25;
  transition: border-color var(--t-micro) var(--ease-expo);
}
.blank__input:focus { border-color: var(--hue); }
.blank__input[aria-invalid="true"] { border-color: var(--rose); }
.blank__error {
  position: absolute;
  left: 0.2em;
  top: 100%;
  margin-top: 2px;
  color: var(--rose-text);   /* 11–13px mono: the small-text rose (5.3:1 on --ink-2); the border keeps --rose */
  white-space: nowrap;
  line-height: 1.2;
}
.blank__error[hidden] { display: none; }
.letterform__message { position: relative; margin-top: var(--space-5); }
.letterform__textarea {
  display: block;
  width: 100%;
  min-height: 7em;
  padding: var(--space-2) 0;
  border-bottom: var(--hairline) solid var(--line-strong);
  color: var(--paper);
  font-style: italic;
  transition: border-color var(--t-micro) var(--ease-expo);
}
.letterform__textarea:focus { border-color: var(--hue); }
.letterform__textarea[aria-invalid="true"] { border-color: var(--rose); }
.letterform__message .blank__error { position: static; display: block; margin-top: var(--space-2); }
.letterform__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
  min-height: 120px;
  margin-top: var(--space-5);
  padding-left: 140px;
  justify-content: flex-end;
}
.letterform__send {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-4);
  border: var(--hairline) solid var(--paper);
  color: var(--paper);
  transition: background var(--t-micro) var(--ease-expo), color var(--t-micro) var(--ease-expo);
}
.letterform__send:hover { background: var(--paper); color: var(--ink); }
.letterform__success { text-align: right; color: var(--text); }
.letterform__success[hidden] { display: none; }
.letterform__stamp {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 64px;
  height: 64px;
  color: var(--rose);
  opacity: 0;
}
.letterform.is-sealed .letterform__stamp { opacity: 1; }
.char-mount.letterform__pip {
  position: absolute;
  left: var(--space-6);
  bottom: var(--space-6);
  height: 120px;
  aspect-ratio: 5 / 8;
}

/* ==========================================================================
   COLOPHON
   ========================================================================== */
.colophon { border-top: var(--hairline) solid var(--line-strong); padding-top: var(--section-y); }
.colophon__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.colophon__logo { width: 140px; height: 29px; max-width: 160px; }
.colophon__controls { display: flex; align-items: center; gap: var(--space-4); }
.colophon__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--col-gap);
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--line);
  border-bottom: var(--hairline) solid var(--line);
}
.colophon__col + .colophon__col { border-left: var(--hairline) solid var(--line); padding-left: var(--space-4); }
.colophon__h { margin-bottom: var(--space-3); }
.colophon__list { display: flex; flex-direction: column; gap: var(--space-2); color: var(--text); }
.colophon__line { margin-top: var(--space-5); max-width: 60ch; color: var(--text); }
.colophon__last { margin-top: var(--space-3); }
.colophon__backline { margin-top: var(--space-5); margin-bottom: var(--space-7); }
.colophon__back { color: var(--paper); }

.colophon__mark { position: relative; }
/* The wordmark is full-bleed and it is the logo itself (assets/logo.svg: viewBox 318.5 × 60 logo units; the letters'
   x-height runs from 9.3 to 60 units). The clip shows the top 55% of the x-height; the image is lifted so the letter
   tops touch the clip top, the rose rising above them as in the logo. */
.colophon__clip {
  --cw: calc(100vw - var(--spine-w) - 2 * var(--gutter));
  position: relative;
  height: calc(var(--cw) * (9.3 + 50.7 * 0.55) / 318.5);
  overflow: hidden;
  padding-left: var(--gutter);
}
.colophon__word { position: relative; width: var(--cw); }
.colophon__word img { display: block; width: 100%; height: auto; }
.colophon__walk {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  height: 96px;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  color: var(--paper);
  mix-blend-mode: difference;   /* paper on the ink, ink where they cross the paper letters */
  pointer-events: none;
}
.colophon__walker { flex: none; width: 60px; height: 96px; }

/* ==========================================================================
   DOSSIER (dialog, z 40)
   ========================================================================== */
.dossier {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--plate);
  color: var(--text);
  z-index: var(--z-dossier);
}
.dossier::backdrop { background: transparent; }
.dossier__inner {
  height: 100%;
  overflow-y: auto;
  padding: var(--space-4) var(--gutter) var(--space-7);
}
.dossier__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
}
.dossier__title { color: var(--hue-text); }   /* small mono: the game hue when one is live, the AA-safe rose at rest */
.dossier__close {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: var(--hairline) solid var(--line-strong);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
}
.dossier__close:hover { background: var(--paper); color: var(--ink); }
.dossier__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  row-gap: var(--space-6);
}
.dossier__left { grid-column: 1 / 8; min-width: 0; }
.dossier__right { grid-column: 8 / 13; min-width: 0; }
.dossier__quote { max-width: 22ch; margin-bottom: var(--space-6); color: var(--paper); }
.dossier__synopsis { columns: 2; column-gap: 32px; margin-bottom: var(--space-6); }
.dossier__synopsis p + p { margin-top: 1em; }
.dossier__record { margin-bottom: var(--space-3); }
.dossier__features { display: flex; flex-direction: column; gap: var(--space-2); color: var(--paper); }
.dossier__features li::before { content: "— "; color: var(--hue); }
.dossier__plate {
  height: 90vh;
  border-color: var(--line-strong);
  margin-bottom: var(--space-5);
  overflow: hidden;
}
.char-mount.dossier__char {
  position: absolute;
  left: 50%;
  bottom: 4%;
  height: 88%;
  max-width: 100%;
  aspect-ratio: 5 / 8;
  transform: translateX(-50%);
}
.dossier__lens-hint { position: absolute; top: var(--space-3); left: var(--space-3); }
.dossier__plan {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: var(--hairline) solid var(--line-strong);
  color: var(--paper);
}
@media (hover: none), (prefers-reduced-motion: reduce) {
  .dossier__plan { display: inline-flex; }
  .dossier__lens-hint { display: none; }
}
.facts { border-top: var(--hairline) solid var(--line-strong); margin-bottom: var(--space-5); }
.facts__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  column-gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-3) 0;
  border-bottom: var(--hairline) solid var(--line);
}
.facts dd { color: var(--paper); }
.dossier__close-text { color: var(--paper); }

/* ==========================================================================
   MOBILE INDEX SHEET (dialog, z 30)
   ========================================================================== */
.sheet {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: calc(var(--topbar-h) + var(--space-4)) var(--gutter) var(--space-6);
  background: var(--ink);
  color: var(--paper);
  z-index: var(--z-sheet);
}
.sheet::backdrop { background: transparent; }
.sheet__close {
  position: absolute;
  top: var(--space-3);
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
  color: var(--paper);
}
.sheet__nav { height: 100%; }
.sheet__list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: var(--space-2);
}
.sheet__link {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: 18vw;
  line-height: 1;
  color: var(--paper);
}
.sheet__num { color: var(--muted); }
.sheet__item.is-active .sheet__link { color: var(--hue); }

/* ==========================================================================
   CURSOR (base look; positioning by cursor.js; pointer devices only)
   ========================================================================== */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-cursor);
  display: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms var(--ease-expo);
}
@media (hover: hover) and (pointer: fine) {
  html.js.has-cursor .cursor { display: block; }
  html.js.has-cursor body { cursor: none; }
  html.js.has-cursor :is(input, textarea, select, button, a, [role="button"]) { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor { display: none !important; }
}
.cursor.is-visible { opacity: 1; }
.cursor.hidden { opacity: 0; }
.cursor__card {
  position: absolute;
  left: 0; top: 0;
  width: 28px;
  height: 40px;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  transition: transform var(--t-micro) var(--ease-expo), opacity var(--t-micro) var(--ease-expo);
}
.cursor__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  backface-visibility: hidden;
}
.cursor__face--front {
  background: var(--paper);
  outline: var(--hairline) solid var(--ink);
  outline-offset: -4px;
  color: var(--rose);
}
.cursor__glyph { width: 10px; height: 10px; transition: width var(--t-micro), height var(--t-micro), color var(--t-micro); }
.cursor__face--back {
  left: 50%;
  width: max-content;
  min-width: 100%;
  padding: 0 8px;
  transform: translateX(-50%) rotateY(180deg);
  background: var(--plate);
  border: var(--hairline) solid var(--hue);
  color: var(--paper);
  font-size: 10px;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.cursor.card-large .cursor__card { transform: translate(-50%, -50%) scale(1.3); }
.cursor.card-large .cursor__glyph { width: 12px; height: 12px; color: var(--hue); }
.cursor.caret .cursor__card { transform: translate(-50%, -50%) scale(0.04, 0.6); }
.cursor.wanted .cursor__card { transform: translate(-50%, -50%) rotateY(180deg); }
.cursor.lens .cursor__card { opacity: 0; }
.cursor__caret { display: none; }
.cursor__ring {
  position: absolute;
  left: 0; top: 0;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: var(--hairline) solid var(--paper);
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
  transition: transform var(--t-micro) var(--ease-expo), opacity var(--t-micro) var(--ease-expo);
}
.cursor__ring::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 50%;
  border: var(--hairline) solid var(--hue);
  opacity: 0.5;
}
.cursor.lens .cursor__ring { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.cursor.lens-small .cursor__ring { transform: translate(-50%, -50%) scale(0.11); }

/* ==========================================================================
   GRAIN OVERLAY (tile drawn once by grain.js; z 60)
   ========================================================================== */
#grain-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-grain);
  pointer-events: none;
  background-repeat: repeat;
  opacity: var(--grain-opacity);
  mix-blend-mode: overlay;
}
html[data-proof="true"] #grain-overlay,
html[data-lite] #grain-overlay { display: none; }

/* ==========================================================================
   LOADER CURTAIN (z 80). hero.js owns its timeline; the .is-timed safety hides it after 3s
   so the page is never stuck if the hero module is absent.
   ========================================================================== */
.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--space-4);
  background: var(--ink);
}
.loader__logo { width: min(300px, 72vw); }
.loader__logo svg { display: block; width: 100%; height: auto; overflow: visible; }
.loader__logo .is-drawing .brand-logo__letter { stroke: var(--logo-white); stroke-width: 0.6; }
.loader__label { opacity: 1; }
html:not(.js) .loader, html[data-seen] .loader.is-timed, .loader.is-done { display: none; }
.loader.is-timed { animation: loader-safety 0s linear 3s forwards; }
@keyframes loader-safety { to { visibility: hidden; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .loader { display: none; } }

/* ==========================================================================
   BREAKPOINTS (brief §9)
   ========================================================================== */

/* ---- wide ≥1800: character plates cap at 900px tall ---------------------- */
@media (min-width: 1800px) {
  .char-mount.index__char { height: min(70vh, 900px); }
  .suspect__char { height: min(calc(var(--suspect-h) * var(--k)), calc(900px * var(--k))); }
}

/* ---- below desktop (<900): no pins except the cover, vertical gallery ---- */
@media (max-width: 899px) {
  .cover__seal { top: calc(var(--topbar-h) + var(--space-3)); width: 32px; height: 32px; }

  /* index 3×2 at 50vh (tablet); the plates sit between the fixed top bar and the fixed bottom strip */
  .index { top: var(--topbar-h); bottom: var(--strip-h); }
  .index__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .index__col:nth-child(3n) .index__plate { border-right: 0; }
  .index__col:nth-child(-n+3) .index__plate { border-bottom: var(--hairline) solid var(--line); }
  .index__no { top: var(--space-3); left: var(--space-3); }
  .index__title {
    top: auto; bottom: var(--space-3); left: var(--space-3); right: var(--space-3);
    max-height: none; writing-mode: horizontal-tb; transform: none;
    font-size: 28px; white-space: normal; -webkit-text-stroke: 0;
  }
  .char-mount.index__char { bottom: 64px; height: min(42vh, calc(100% - 120px)); }
  .index__rose { width: 120px; height: 120px; top: 36%; }
  .index__row { bottom: 64px; }

  /* gallery: vertical spreads, 40/60 split */
  .gallery__stage { height: auto; overflow: visible; }
  .gallery__track { display: block; width: 100%; height: auto; }
  .gallery__progress, .gallery__counter { display: none; }
  .spread {
    min-height: 100svh;
    height: auto;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: end;
    padding: var(--space-6) var(--gutter);
    border-top: var(--hairline) solid var(--line);
  }
  .spread__page--left { grid-column: 1; }
  .spread__page--right { grid-column: 2; }
  .spread__title { font-size: min(var(--fs-chapter), 5.6vw); } /* "SALTWATER" must fit the 40% column */
  .spread__plate, .spread__wanted, .spread__caption { width: min(100%, calc(70svh * 0.75)); }

  /* lineup: five across, smaller */
  .wall { --wall-avail: calc(100vw - 2 * var(--gutter)); --suspect-h: min(36vh, calc(var(--wall-avail) / 3.3)); height: calc(52vh + var(--wall-caption)); min-height: 380px; }
  .wall__marker { bottom: calc(var(--wall-caption) + var(--i) * 7vh); }
  .suspect__caption { white-space: normal; width: 18vw; }

  /* letter: sticky word for 120vh only */
  .letter__split { min-height: 120svh; }
  .letter__words { grid-column: 1 / 6; }
  .letter__body { grid-column: 6 / 13; justify-content: flex-start; padding-block: 0; gap: var(--space-6); }
  .letter__pin { top: var(--topbar-h); height: 60svh; }
  .word-stage { height: calc(var(--fs-word) * 0.6); }
  .word__text { font-size: calc(var(--fs-word) * 0.75); }

  /* ledger: discipline and location drop to a second mono line */
  .ledger__head, .ledger__toggle { grid-template-columns: 3rem minmax(0, 1fr) auto 5rem; row-gap: var(--space-1); }
  .ledger__head .ledger__disc, .ledger__head .ledger__loc { display: none; }
  .ledger__toggle .ledger__disc { grid-column: 2; grid-row: 2; }
  .ledger__toggle .ledger__loc { grid-column: 3 / 5; grid-row: 2; text-align: right; }
  .ledger__status { grid-column: 4; grid-row: 1; }
  .ledger__role { grid-column: 2 / 4; grid-row: 1; }
  .ledger__no { grid-row: 1; }
  .char-mount.ledger__peek { width: 35%; }

  /* correspondence: single column, the letter first, Pip top-right */
  .post__aside, .letterform { grid-column: 1 / -1; }
  .letterform { order: -1; padding: var(--space-5); padding-top: calc(var(--space-5) + 90px); }
  .letterform__foot { padding-left: 0; min-height: 0; }
  .char-mount.letterform__pip { left: auto; right: var(--space-5); top: var(--space-5); bottom: auto; height: 90px; }
  .letterform__stamp { top: var(--space-5); right: calc(var(--space-5) + 80px); width: 48px; height: 48px; }

  /* dossier: single column, the character first at 60svh */
  .dossier__left, .dossier__right { grid-column: 1 / -1; }
  .dossier__right { order: -1; }
  .dossier__plate { height: 60svh; }
  .dossier__synopsis { columns: 1; }
}

/* ---- tablet only (640–899) ---------------------------------------------- */
@media (min-width: 640px) and (max-width: 899px) {
  .cover__tagline { max-width: 22ch; }
}

/* ---- phone (<640) --------------------------------------------------------- */
@media (max-width: 639px) {
  .cover__folio { top: calc(62% + var(--space-3)); }
  .cover__tagline {
    top: calc(62% + var(--space-3) + 4.2em);
    right: auto;
    left: var(--gutter);
    max-width: 26ch;
    text-align: left;
  }
  .cover__cue { bottom: calc(var(--strip-h) + var(--space-3)); }
  .cover__cue-line { height: 16px; }

  /* index 2×3; titles horizontal */
  .index__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
  .index__col .index__plate { border-right: var(--hairline) solid var(--line); border-bottom: var(--hairline) solid var(--line); }
  .index__col:nth-child(2n) .index__plate { border-right: 0; }
  .index__col:nth-child(3n) .index__plate { border-bottom: var(--hairline) solid var(--line); }
  .index__col:nth-child(n+5) .index__plate { border-bottom: 0; }
  .index__title { font-size: 22px; }
  .char-mount.index__char { bottom: 48px; height: min(60%, calc(100% - 90px)); }
  .index__rose { width: 80px; height: 80px; top: 30%; }
  .index__row { bottom: calc(var(--space-3) + 3.2em); gap: var(--space-1); }
  .index__mini { width: 16px; height: 26px; }

  .ticker__strip { height: 56px; }
  .ticker__item { gap: var(--space-3); padding-inline: var(--space-3); }

  /* gallery: title above a full-width plate at 60svh */
  .spread { grid-template-columns: minmax(0, 1fr); align-items: start; padding-block: var(--space-6); }
  .spread__page--left, .spread__page--right { grid-column: 1; }
  .spread__page--right { align-items: stretch; }
  .spread__title { font-size: min(var(--fs-chapter), 12.5vw); }
  .spread__plate { width: 100%; height: 60svh; aspect-ratio: auto; }
  .spread__wanted, .spread__caption { width: 100%; }
  .spread__pitch { max-width: none; }

  /* lineup: a horizontal scroll-snap strip, 70vw per suspect */
  .wall { --suspect-h: 40vh; height: calc(52vh + var(--wall-caption)); }
  .wall__suspects {
    left: 0; right: 0;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-inline: 15vw;
    padding-bottom: var(--wall-caption);
    bottom: 0;
    scrollbar-width: none;
  }
  .wall__suspects::-webkit-scrollbar { display: none; }
  .suspect { flex: 0 0 70vw; scroll-snap-align: center; display: flex; justify-content: center; }
  .suspect__caption { width: 60vw; white-space: normal; }

  /* letter: no pin; the words become plates between the articles */
  .letter__split { min-height: 0; display: block; }
  .letter__words { display: none; }
  .letter__body { gap: var(--space-6); }
  .word-plate {
    display: block;
    padding: var(--space-5) 0;
    border-top: var(--hairline) solid var(--line);
    border-bottom: var(--hairline) solid var(--line);
    color: var(--paper);
    line-height: 1;
    overflow: hidden;
  }
  .article { padding-left: 2.6rem; }

  /* house: rows wrap to two lines; values single column */
  .cast thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cast, .cast tbody { display: block; }
  .cast__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: var(--hairline) solid var(--line);
  }
  .cast td { display: block; height: auto; padding: 0; border: 0; }
  .cast__role { grid-column: 1; grid-row: 1; }
  .cast__name { grid-column: 2; grid-row: 1; text-align: right; }
  .cast__known { grid-column: 1; grid-row: 2; color: var(--muted); }
  .cast__years { grid-column: 2; grid-row: 2; padding-right: 0; }
  .portrait { display: none; }
  .values { grid-template-columns: minmax(0, 1fr); }
  .value { padding: var(--space-5); }

  /* ledger */
  .ledger__head, .ledger__toggle { grid-template-columns: 2.2rem minmax(0, 1fr) auto 4rem; }
  .ledger__brief-inner { padding-left: 2.2rem; }

  /* correspondence */
  .letterform { padding: var(--space-4); padding-top: calc(var(--space-4) + 80px); }
  .char-mount.letterform__pip { right: var(--space-4); top: var(--space-4); }
  .letterform__stamp { right: calc(var(--space-4) + 70px); }
  .letterform__foot { align-items: stretch; }
  .letterform__send { justify-content: center; }
  .letterform__success { text-align: left; }

  /* colophon: columns stack; the wordmark wraps to "ars / ene" */
  .colophon__cols { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .colophon__col + .colophon__col { border-left: 0; padding-left: 0; border-top: var(--hairline) solid var(--line); padding-top: var(--space-4); }
  /* two lines "ars" / "ene": line one fully visible, line two clipped at 55% of its x-height */
  .colophon__clip { --mark-fs: var(--fs-colophon); height: calc(var(--mark-fs) * (1 + var(--mark-xh) * 0.55)); }
  .colophon__half { display: block; }
  .colophon__half--last { display: inline-block; }
  .colophon__walk { height: 64px; }
  .colophon__walker { width: 40px; height: 64px; }

  /* dossier */
  .dossier__inner { padding-inline: var(--gutter); }
  .facts__row { grid-template-columns: 6rem minmax(0, 1fr); }
}

/* ==========================================================================
   THE STUDIO'S GAMES — the key art the studio supplied (no drawn characters)
   ========================================================================== */
/* hero: the two games' key art pans slowly inside the letters; hero.js sizes it to the letters */
.drift__track { position: absolute; left: 0; top: 0; }
.drift__art { display: block; max-width: none; height: auto; filter: brightness(1.15); }
/* the letter's words: the same strip, as tall as the word stage */
.word-drift .drift__track { top: 0; height: 100%; }
.word-drift .drift__art { width: auto; height: 100%; }

/* index: plates 1–2 carry their game's cover, 3 is redacted, 4–6 are typographic */
.index__art { position: absolute; inset: 0; overflow: hidden; }
.index__art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
  transition: transform 900ms var(--ease-out);
}
.index__art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--ink) 0%, transparent 34%, transparent 72%, var(--ink) 100%);
  opacity: 0.8;
}
.index__plate--art:hover .index__art img { transform: scale(1.04); }
.index__plate--art .index__title, .index__plate--art .index__no { z-index: 1; }
.index__plate--art .index__title { -webkit-text-stroke: 0.14em var(--ink); }
.index__plate--text, .index__plate--classified { background: var(--plate); }
.index__plate--classified .index__title { color: var(--muted); }

/* redaction bars (classified plates) */
.redact { position: absolute; left: 14%; right: 14%; top: 42%; display: flex; flex-direction: column; gap: 10px; }
.redact span { display: block; height: 12px; width: 100%; background: var(--ink); border: var(--hairline) solid var(--line); }
.redact span:nth-child(3n + 2) { width: 72%; }
.redact span:nth-child(3n) { width: 88%; }

/* the gallery: covers are shown whole (2:3), classified slots are a redacted file */
.spread__plate--cover, .spread__plate--classified, .spread--classified .spread__wanted, .spread__plate--cover + .spread__caption { width: min(100%, calc(80svh * 0.6667), 600px); }
.spread__page--right:has(.spread__plate--cover) .spread__wanted,
.spread--classified .spread__wanted { width: min(100%, calc(80svh * 0.6667), 600px); }
.spread__plate--cover, .spread__plate--classified { aspect-ratio: 2 / 3; }
.spread__plate--cover { padding: 0; cursor: pointer; }
.spread__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.spread__plate--cover:hover .spread__cover, .spread__plate--cover:focus-visible .spread__cover { transform: scale(1.025); }
.spread__plate--classified .redact { top: 18%; left: 12%; right: 12%; gap: 16px; }
.spread__plate--classified .redact span { height: 18px; }
.stamp {
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  padding: 0.5em 1em;
  border: 2px solid var(--rose);
  color: var(--rose-text);
  font-size: clamp(16px, 1.8vw, 26px);
  letter-spacing: 0.3em;
  white-space: nowrap;
}
.spread__seal { position: absolute; right: 8%; bottom: 7%; width: 78px; height: 72px; }
.spread__word--sub { display: block; font-size: 0.42em; letter-spacing: 0.08em; color: var(--hue); margin-top: 0.2em; }

/* the case file shows the cover */
.dossier__plate { height: auto; aspect-ratio: 2 / 3; max-height: 82vh; margin-inline: auto; }
.dossier__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms var(--ease-out) 150ms, transform 1100ms var(--ease-out) 150ms; }
.dossier:not(.is-revealed) .dossier__cover { opacity: 0; transform: scale(1.04); transition: none; }

/* the ticker pills and the letter form carry the studio's rose */
.pill__rose { width: 24px; height: 22px; }
.letterform__rose { position: absolute; left: var(--space-6); bottom: var(--space-6); width: 96px; height: 90px; }
@media (max-width: 899px) {
  .letterform__rose { left: auto; right: var(--space-4); top: var(--space-4); bottom: auto; width: 56px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .index__art img, .spread__cover { transition: none; }
}

/* ==========================================================================
   THE DEMON IN THE LOGO (The Seventh Vein) — the hero's letters look onto the demon from the game's cover;
   its red eyes sit on the two stems of the "n" and look left and right (hero.js draws them, motion below)
   ========================================================================== */
.cover .drift { background: var(--demon-smoke); left: -15%; right: -15%; top: 0; bottom: -500%; }
.cover .drift__track { animation: none; }
.cover .drift__art { filter: none; }
.drift__eyes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* the window box is wider and far taller than the logo (hero.js DRIFT_EXT): the eyes keep the logo's own box */
.cover .drift__eyes { inset: auto; left: 11.5385%; top: 0; width: 76.9231%; height: 16.6667%; }
.eye__pupil { fill: var(--demon-pupil); }
.eye__lid, .eye__look, .eye__glow { transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .cover.is-live .eye__look { animation: eye-look 9s cubic-bezier(.7, 0, .2, 1) infinite; }
  .cover.is-live .eye__lid  { animation: eye-blink 9s linear infinite; }
  .cover.is-live .eye__glow { animation: eye-glow 4.5s ease-in-out infinite alternate; }
  .cover.is-off .eye__look, .cover.is-off .eye__lid, .cover.is-off .eye__glow { animation-play-state: paused; }
}
/* saccades: quick moves, long holds (no repaint while holding) */
@keyframes eye-look {
  0%, 10%   { transform: translateX(0); }
  13%, 33%  { transform: translateX(-3.4px); }
  36%, 50%  { transform: translateX(0); }
  53%, 74%  { transform: translateX(3.4px); }
  77%, 100% { transform: translateX(0); }
}
@keyframes eye-blink {
  0%, 42%, 45.5%, 88%, 91.5%, 100% { transform: scaleY(1); }
  43.5%, 89.5% { transform: scaleY(0.06); }
}
@keyframes eye-glow {
  from { opacity: 0.7; transform: scale(0.94); }
  to   { opacity: 1;   transform: scale(1.06); }
}
html[data-proof] .drift__eyes { display: none; }

/* ---- the demon's pull (cover scroll sequence; hero.js scrubs it) ------------------------------- */
.cover__vignette {
  position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 70% 62% at 50% 55%, transparent 0%, var(--vignette-mid) 62%, var(--ink) 100%);
}
/* the hand, in two layers that always move together: the back one under the letters (z 3, before the stencil in the
   DOM), the front one (the hooked fingers) over them; hero.js sets their size, place and transform */
.demon-hand { position: absolute; z-index: 3; pointer-events: none; visibility: hidden; transform: translateY(110vh); }
.demon-hand--front { z-index: 4; }
/* the red smoke lit behind the hand (static, under the letters: it backlights them too) */
.demon-hand--back::before {
  content: ""; position: absolute; left: -35%; right: -35%; top: -10%; height: 80%;
  background: radial-gradient(ellipse 50% 46% at 50% 44%, var(--hand-aura) 0%, var(--hand-aura-far) 50%, transparent 74%);
}
.hand-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* where the claws went in: a dark wound in the letter, its lips hot */
.hand-wounds { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.wound__glow { fill: url(#wound-glow); }
.wound__hole { fill: var(--gash-dark); }
.wound__crack { fill: none; stroke: var(--scratch-core); stroke-width: 0.7; stroke-linecap: round; opacity: 0.55; }
.cover.is-pinned .demon-hand, .cover.is-pinned .stencil { will-change: transform; }
/* the claw marks on the page, left behind as the logo is dragged down (under the hand and the letters) */
.scratches { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; --burn: 0.5; }
/* a gash: a soft red bloom, the dark torn slit, and its two hot lips */
.gash__glow { fill: none; stroke: var(--rose); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: calc(0.14 * var(--burn) + 0.03); }
.gash__slit { fill: none; stroke: var(--gash-dark); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.gash__lip  { fill: none; stroke: var(--scratch-core); stroke-width: 0.8; stroke-linecap: round; stroke-linejoin: round; opacity: calc(0.35 + 0.55 * var(--burn)); }
.cover__flash { position: absolute; inset: 0; z-index: 7; pointer-events: none; opacity: 0; background: radial-gradient(ellipse 60% 55% at 42% 60%, var(--rose-deep) 0%, transparent 75%); mix-blend-mode: screen; }
html[data-proof] .demon-hand, html[data-proof] .scratches, html[data-proof] .cover__flash, html[data-proof] .cover__vignette { display: none; }
@media (prefers-reduced-motion: reduce) { .demon-hand, .scratches, .cover__flash, .cover__vignette { display: none; } }
/* once the demon moves, its eyes stop wandering and stare */
.cover.is-pulling .eye__look, .cover.is-pulling .eye__lid { animation: none; transform: none; }
.drift__art--below { position: absolute; left: 0; }

/* ---- 03 · the studio record (replaces the placeholder cast table) and 04 · the standing invitation ---------------- */
.cast.record { width: 100%; border-collapse: collapse; border-top: 0; }
.record tr:first-child th, .record tr:first-child td { border-top: var(--hairline) solid var(--line-strong); }
.record th, .record td { height: 64px; padding: var(--space-2) var(--space-3); border-bottom: var(--hairline) solid var(--line); vertical-align: middle; text-align: left; }
.record th { padding-left: 0; font-weight: inherit; }
.cast.record th { width: 30%; }
.record__value { color: var(--paper); }
.record__row { transition: background var(--t-micro) var(--ease-expo); }
.record__row:hover { background: var(--plate); }
.crew__open {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  max-width: 62ch; padding: var(--space-6);
  border: var(--hairline) solid var(--line-strong);
}
.crew__open-title { color: var(--paper); line-height: 1.15; }
.crew__open-body { color: var(--text); }
.crew__apply { color: var(--paper); }
@media (max-width: 639px) {
  .record, .record tbody, .record tr, .record th, .record td { display: block; width: auto; height: auto; }
  .record tr { padding: var(--space-3) 0; border-bottom: var(--hairline) solid var(--line); }
  .record th, .record td, .record tr:first-child th, .record tr:first-child td { padding: 0; border: 0; }
  .record tr:first-child { border-top: var(--hairline) solid var(--line-strong); }
  .record th, .cast.record th { width: auto; margin-bottom: var(--space-1); }
  .crew__open { padding: var(--space-5); }
}