/* ══════════════════════════════════════════════════════════════════
   THE WORLD — a museum in the ink.

   Mobile-first (390×844): a film strip of full-bleed portrait plates
   with display type at viewport scale over them, a tiny mono utility
   layer in the corners, and reading blocks on clean ink at a 60ch
   measure. Desktop widens the same system into the cinematic cut —
   nothing is added, only given room.

   Contract: transform-only motion (JS sets --dy / --sx and nothing
   else); giant type never crosses a reading block; EMBER is light,
   never a surface; no horizontal scroll at any width.
   ══════════════════════════════════════════════════════════════════ */

body.world-page { overflow-x: clip; background: #131110; }
body.world-page main { overflow-x: clip; }

/* the page commits to ink end to end — every band carries the tokens */
.world-page .w-title,
.world-page .w-quote,
.world-page .w-read,
.world-page .w-strata,
.world-page .w-ledger,
.world-page .w-figures,
.world-page .w-makers,
.world-page .w-closer { background: #131110; }

/* ═══ Plates — printed to silver, dissolved into the ground ═══════ */
.w-plate__dissolve {
  position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(to bottom, #131110 0%, rgba(19, 17, 16, 0) 26%, rgba(19, 17, 16, 0) 62%, #131110 100%),
    linear-gradient(to right, #131110 0%, rgba(19, 17, 16, 0) 16%, rgba(19, 17, 16, 0) 84%, #131110 100%);
}
.w-plate__dissolve--full {
  background:
    radial-gradient(120% 78% at 50% 44%, rgba(19, 17, 16, 0) 0%, rgba(19, 17, 16, 0.55) 58%, #131110 100%),
    linear-gradient(to bottom, #131110 0%, rgba(19, 17, 16, 0.2) 22%, rgba(19, 17, 16, 0.55) 72%, #131110 100%);
}
[data-plate] { position: relative; overflow: clip; margin: 0; }
[data-plate] img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
  transform: scale(1.14) translate3d(0, var(--dy, 0px), 0);
}

/* ═══ Ghost type — texture, never content ════════════════════════ */
.w-ghost,
.w-quote__ghost,
.w-makers__ghost,
.w-stratum__dev {
  position: absolute; pointer-events: none; user-select: none;
  font-family: var(--font-display); font-weight: 400; line-height: 0.78;
  white-space: nowrap; color: #e9e4da;
  transform: translate3d(0, var(--dy, 0px), 0);
  will-change: transform;
}

/* ═══ 1 · TITLE PLATE ════════════════════════════════════════════ */
.w-title {
  position: relative; overflow: clip; isolation: isolate;
  min-height: 92svh; display: grid; align-content: end;
  padding: 0 var(--gutter) calc(88px + env(safe-area-inset-bottom, 0px));
}
.w-title__plate { position: absolute; inset: 0; z-index: 0; }
.w-title__ember {
  position: absolute; left: 50%; bottom: -14%; width: 150%; height: 46%;
  transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%, rgba(217, 97, 31, 0.20), rgba(217, 97, 31, 0.05) 42%, transparent 68%);
}
.w-title__ghosts { position: absolute; inset: 0; z-index: 1; overflow: clip; }
.w-title__ghosts .w-ghost { font-size: clamp(150px, 54vw, 460px); }
.w-ghost--1 { left: -8%; top: 6%; opacity: 0.085; }
.w-ghost--2 { right: -22%; top: 34%; opacity: 0.055; }
.w-ghost--3 { left: -30%; bottom: 8%; opacity: 0.04; }

.w-title__type { position: relative; z-index: 2; }
.w-title .eyebrow { color: #8b8478; margin-bottom: 10px; }
.w-h1 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(62px, 23vw, 230px); line-height: 0.82;
  letter-spacing: -0.012em; color: #e9e4da;
  display: grid; text-wrap: nowrap;
}
.w-h1 span:last-child { margin-left: 0.07em; }

.w-title__coord, .w-title__where, .w-title__stratum {
  position: absolute; z-index: 2; color: #7a746a; margin: 0;
}
.w-title__coord { top: calc(var(--gutter) * 0.7); right: var(--gutter); }
.w-title__where {
  left: var(--gutter); right: var(--gutter);
  bottom: calc(46px + env(safe-area-inset-bottom, 0px)); color: #8b8478;
}
.w-title__stratum {
  left: var(--gutter); bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  color: #6f695e;
}
.w-title__stratum i { font-style: normal; opacity: 0.5; padding: 0 0.4em; }

/* ═══ 2 · THE QUOTE ══════════════════════════════════════════════ */
.w-quote {
  position: relative; overflow: clip;
  padding: clamp(72px, 16vh, 170px) var(--gutter) clamp(56px, 12vh, 130px);
}
.w-quote__ghost {
  font-size: clamp(230px, 72vw, 620px); opacity: 0.05;
  right: -14%; top: 50%; margin-top: -0.4em;
}
.w-quote blockquote { position: relative; z-index: 1; }
.w-quote blockquote p {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(28px, 7.6vw, 84px); line-height: 1.04;
  letter-spacing: -0.005em; color: #e9e4da; text-wrap: balance;
  max-width: 11.5em;
}
.w-quote blockquote em { font-style: normal; color: #8b8478; }
.w-quote__src { position: relative; z-index: 1; color: #6f695e; margin-top: 22px; }

/* ═══ 3 · THE READING BLOCK — clean ink, nothing crosses it ══════ */
.w-read { display: grid; gap: clamp(22px, 4vh, 40px); }
.w-read__rail { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.w-read__rail p { color: #6f695e; margin: 0; }
.w-read__body { max-width: 60ch; display: grid; gap: 1.05em; }
.w-read__body p { color: #b5aea1; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; }
.w-read__lede { color: #e9e4da !important; font-size: clamp(17px, 1.5vw, 22px) !important; line-height: 1.48 !important; }
.w-read__sig { color: #6f695e; margin-top: 6px; }

/* ═══ 4 · THE STRATA — the film strip ════════════════════════════ */
.w-strata { padding-block: clamp(40px, 8vh, 90px) 0; }
.w-strata__head { padding-bottom: clamp(24px, 5vh, 54px); }
.w-h2 {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(38px, 12vw, 108px); line-height: 0.92;
  color: #e9e4da; display: grid; letter-spacing: -0.008em;
}
.w-h2 span { color: #8b8478; }
.w-strata__list { list-style: none; display: grid; gap: clamp(46px, 9vh, 110px); }

.w-stratum { position: relative; }
.w-stratum__field { position: relative; overflow: clip; }
.w-stratum__plate { height: min(78svh, 620px); }
/* the Devanagari rubbing — laid over the plate as a shadow on the
   dust-light, and dissolving wherever the plate is already ink */
.w-stratum__dev {
  left: 50%; top: 50%; z-index: 2;
  transform: translate3d(-50%, calc(-50% + var(--dy, 0px)), 0);
  font-size: clamp(120px, 40vw, 330px);
  color: #0b0a09; opacity: 0.36;
}
.w-stratum__type {
  position: relative; z-index: 3; margin-top: -8svh;
  padding-inline: var(--gutter); display: grid; gap: 10px;
}
.w-stratum__no { color: #7a746a; margin: 0; }
.w-stratum__no i { font-style: normal; color: #8b8478; padding-right: 0.7em; }
.w-stratum__name {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(46px, 15vw, 132px); line-height: 0.88;
  letter-spacing: -0.012em; color: #e9e4da; margin: 0; text-wrap: nowrap;
}
.w-stratum__dev-rom { color: #6f695e; margin: -2px 0 6px; }
.w-stratum__line { max-width: 42ch; color: #b5aea1; font-size: clamp(15px, 1.15vw, 17.5px); margin: 0; }
.w-stratum__note { max-width: 46ch; color: #7a746a; margin: 2px 0 0; line-height: 1.7; }
.w-stratum__foot { margin: 10px 0 0; }
.w-stratum__foot a {
  color: #8b8478; display: inline-flex; align-items: center; min-height: 44px;
  border-bottom: 1px solid transparent; transition: color 0.25s, border-color 0.25s;
}
.w-stratum__foot a:hover { color: #e9e4da; border-color: rgba(217, 97, 31, 0.8); }
.w-stratum__foot i { font-style: normal; padding-left: 0.5em; }

/* ═══ 5 · THE LEDGER ═════════════════════════════════════════════ */
.w-ledger__head { display: grid; gap: 14px; margin-bottom: clamp(18px, 4vh, 40px); }
.w-ledger__rule { display: block; height: 1px; background: #2e2a25; position: relative; overflow: clip; }
.w-ledger__rule i {
  position: absolute; inset: 0; display: block; transform-origin: 0 50%;
  transform: scaleX(var(--sx, 0));
  background: linear-gradient(to right, rgba(217, 97, 31, 0.95), rgba(217, 97, 31, 0.25));
  box-shadow: 0 0 12px rgba(217, 97, 31, 0.55);
}
.w-ledger ol { list-style: none; display: grid; }
.w-ledger li {
  display: grid; grid-template-columns: 1fr auto; align-items: start;
  gap: 4px 16px; padding-block: clamp(18px, 3.4vh, 34px);
  border-top: 1px solid #2e2a25;
}
.w-ledger__n {
  grid-column: 1; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(42px, 13.5vw, 120px); line-height: 0.9; color: #e9e4da;
  letter-spacing: -0.015em;
}
.w-ledger__n i { font-style: normal; font-size: 0.26em; color: #8b8478; padding-left: 0.35em; vertical-align: 0.9em; }
.w-ledger__t { grid-column: 1; max-width: 46ch; color: #b5aea1; font-size: clamp(14px, 1.05vw, 16.5px); }
.w-ledger__i { grid-column: 2; grid-row: 1; color: #7a746a; }

/* ═══ 6 · THE FIGURES — extreme scale contrast ═══════════════════ */
.w-figures { padding-block: clamp(56px, 10vh, 120px); }
.w-figures ol { list-style: none; display: grid; gap: clamp(30px, 6vh, 64px); margin-top: clamp(14px, 3vh, 30px); }
.w-figures li { display: grid; gap: 8px; }
.w-fig__n {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(76px, 26vw, 220px); line-height: 0.8; color: #e9e4da;
  letter-spacing: -0.02em;
}
.w-fig__n i {
  font-style: normal; font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(11px, 0.78vw, 13px); letter-spacing: 0.14em; text-transform: uppercase;
  color: #8b8478; vertical-align: 1.9em; padding-left: 0.6em;
}
.w-fig__t { max-width: 44ch; color: #b5aea1; font-size: clamp(14px, 1.05vw, 16.5px); }
.w-fig__i { color: #7a746a; }

/* ═══ 7 · THE MAKERS ═════════════════════════════════════════════ */
.w-makers { position: relative; overflow: clip; padding-block: clamp(56px, 10vh, 120px); }
.w-makers__ghost {
  left: -12%; top: 4%; font-size: clamp(88px, 27vw, 260px); opacity: 0.06;
}
.w-makers__inner { position: relative; z-index: 1; display: grid; gap: clamp(26px, 5vh, 48px); }
.w-makers__plate { width: min(62vw, 300px); margin: 0; }
.w-makers__frame { display: block; width: 100%; aspect-ratio: 3 / 4; }
.w-makers__plate figcaption { color: #7a746a; padding-top: 10px; }
.w-makers__bio { max-width: 60ch; display: grid; gap: 16px; }
.w-makers__bio p { color: #b5aea1; font-size: clamp(15px, 1.15vw, 17.5px); line-height: 1.62; }
.w-makers__meta { display: grid; gap: 0; margin-top: 6px; }
.w-makers__meta div { display: grid; grid-template-columns: 7em 1fr; gap: 10px; padding-block: 11px; border-top: 1px solid #2e2a25; }
.w-makers__meta dt { color: #6f695e; }
.w-makers__meta dd { color: #b5aea1; }

/* ═══ 8 · CLOSER ═════════════════════════════════════════════════ */
.w-closer {
  position: relative; overflow: clip; isolation: isolate;
  min-height: 62svh; display: grid; align-content: center; gap: 18px;
  padding: clamp(56px, 12vh, 130px) var(--gutter);
}
.w-closer__ghosts { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.w-closer__ghosts .w-ghost { font-size: clamp(190px, 62vw, 520px); }
.w-closer__ghosts .w-ghost--1 { left: -14%; top: 2%; opacity: 0.06; }
.w-closer__ghosts .w-ghost--2 { right: -26%; bottom: 0%; opacity: 0.04; }
.w-closer__pre { position: relative; z-index: 1; color: #6f695e; margin: 0; }
.w-closer__mark {
  position: relative; z-index: 1; display: grid;
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(50px, 17vw, 168px); line-height: 0.9;
  letter-spacing: -0.012em; color: #e9e4da;
}
.w-closer__loud { position: relative; color: #e9e4da; width: max-content; }
.w-closer__loud i {
  position: absolute; left: 0; right: 0; bottom: 0.1em; height: 2px;
  background: linear-gradient(to right, rgba(217, 97, 31, 0.9), rgba(217, 97, 31, 0.1));
  box-shadow: 0 0 22px rgba(217, 97, 31, 0.55);
}
.w-closer__sub { position: relative; z-index: 1; color: #b5aea1; font-size: clamp(15px, 1.3vw, 19px); max-width: 34ch; }
.w-closer__cta { position: relative; z-index: 1; margin-top: 14px; }
.w-closer .btn { background: #e9e4da; color: #131110; border-color: #e9e4da; }
.w-closer .btn:hover { background: transparent; color: #e9e4da; }

/* ═══ Desktop — the same system, given room ══════════════════════ */
@media (min-width: 860px) {
  .w-title { min-height: 96svh; padding-bottom: clamp(70px, 12vh, 130px); }
  .w-title__type { max-width: 74vw; }
  .w-h1 { font-size: clamp(120px, 15vw, 230px); grid-auto-flow: column; justify-content: start; gap: 0.16em; }
  .w-h1 span:last-child { margin-left: 0; }
  .w-title__where { left: auto; right: var(--gutter); text-align: right; bottom: calc(var(--gutter) * 0.9 + 22px); }
  .w-title__stratum { bottom: calc(var(--gutter) * 0.9); }

  .w-quote blockquote { margin-left: 6vw; }
  .w-quote blockquote p { max-width: 13em; }
  .w-quote__ghost { right: 2%; font-size: clamp(320px, 34vw, 600px); }

  .w-read { grid-template-columns: 15em minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .w-read__rail { flex-direction: column; gap: 14px; position: sticky; top: 92px; }

  .w-strata__list { gap: clamp(90px, 14vh, 190px); }
  .w-stratum { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(28px, 4vw, 72px); }
  .w-stratum:nth-child(even) .w-stratum__field { order: 2; }
  .w-stratum__plate { height: min(84svh, 760px); }
  .w-stratum__type { margin-top: 0; padding-inline: 0; padding-right: var(--gutter); gap: 12px; }
  .w-stratum:nth-child(even) .w-stratum__type { padding-right: 0; padding-left: var(--gutter); }
  .w-stratum__name { font-size: clamp(64px, 6.4vw, 120px); }
  .w-stratum__dev { font-size: clamp(190px, 22vw, 340px); }

  .w-ledger li { grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto; align-items: baseline; gap: 0 clamp(24px, 4vw, 64px); }
  .w-ledger__n { grid-column: 1; font-size: clamp(56px, 5.4vw, 104px); }
  .w-ledger__t { grid-column: 2; }
  .w-ledger__i { grid-column: 3; grid-row: 1; }

  .w-figures ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vh, 86px) clamp(40px, 5vw, 90px); }
  .w-fig__n { font-size: clamp(110px, 11vw, 200px); }

  .w-makers__meta div { grid-template-columns: 9.5em 1fr; }
  .w-makers__inner { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(40px, 6vw, 96px); align-items: end; }
  .w-makers__plate { width: 100%; }
  .w-makers__ghost { left: auto; right: -4%; top: 12%; }

  .w-closer { min-height: 78svh; }
  .w-closer__mark { font-size: clamp(110px, 12vw, 190px); }
}

@media (min-width: 1280px) {
  .w-title__type { max-width: 62vw; }
  .w-stratum__type { max-width: 38ch; }
}

/* ═══ Honest degradation ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-plate] img,
  .w-ghost, .w-quote__ghost, .w-makers__ghost, .w-stratum__dev { transform: none; will-change: auto; }
  [data-plate] img { transform: scale(1.02); }
  .w-stratum__dev { transform: translate(-50%, -50%); }
  .w-ledger__rule i { transform: scaleX(1); }
}
/* JS absent: the ledger rule is simply drawn, plates sit still */
html:not(.world-live) .w-ledger__rule i { transform: scaleX(1); }