:root {
  --paper: #f3e9d2;
  --paper-2: #ead9b6;
  --ink: #2b2018;
  --ink-soft: #5b4a3a;
  --verm: #c0412b;
  --teal: #1e4c58;
  --ochre: #b98a2f;
  --line: rgba(43, 32, 24, .28);
  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --display: "Ruslan Display", "Cormorant Garamond", Georgia, serif;
  --hebrew: "Frank Ruhl Libre", "Times New Roman", serif;
  --hand: "Caveat", "Bradley Hand", cursive;
  --ease: cubic-bezier(.22, .8, .2, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(900px 700px at 90% 90%, rgba(185,138,47,.12), transparent 60%),
    var(--paper);
  color: var(--ink);
  font: 400 clamp(19px, 1.25vw, 22px)/1.5 var(--serif);
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: var(--verm); }
.ru { font-family: var(--serif); }
[lang="he"] { font-family: var(--hebrew); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
i { font-style: italic; }

/* ---------- loading gate ---------- */
body.is-loading .titlebox > *:not(.tb-line) { opacity: 0; }
body.is-loading .tb-line { transform: scale(0); }

/* =========================================================
   STAGE: fixed plates that crossfade by chapter
   ========================================================= */
.stage {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity .9s var(--ease);
}
body[data-active]:not([data-active="0"]):not([data-active="10"]) .stage { opacity: 1; }

.plate {
  --pw: min(64vw, calc(88vh * (var(--ar))));
  position: absolute; margin: 0;
  width: var(--pw); aspect-ratio: var(--ar);
  right: 4vw; top: 50%;
  transform: translate3d(var(--px, 0), calc(-50% + var(--py, 0px)), 0) scale(.985);
  opacity: 0; transition: opacity 1s var(--ease), transform 1.2s var(--ease);
  container-type: inline-size;
  box-shadow: 0 30px 60px -30px rgba(43,32,24,.45), 0 2px 0 rgba(43,32,24,.1);
}
.plate--tall { --pw: min(34vw, calc(88vh * (var(--ar)))); right: 18vw; }
.plate.is-on { opacity: 1; transform: translate3d(var(--px, 0), calc(-50% + var(--py, 0px)), 0) scale(1); }
.plate > img, .plate > video {
  width: 100%; height: 100%; object-fit: cover;
  transform-origin: 55% 45%;
}
.plate.is-on > img, .plate.is-on > video { animation: kenburns 18s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.035) translate(-.6%, -.4%); } }
/* overlays are positioned on the plate, so they stay locked to the art */
.plate { overflow: hidden; }

/* ---------- overlays measured on each image ---------- */
.ov { position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h, auto); }
.cart {
  display: grid; place-items: center; text-align: center;
  font: 600 2.1cqw/1.1 var(--serif); color: var(--ink);
  letter-spacing: .01em; padding: 0 1.2cqw; white-space: nowrap;
}
.cart.small { font-size: 3.4cqw; font-style: italic; font-weight: 400; }
.plate--tall .cart { font-size: 5.6cqw; }
.plate--tall .cart.small { font-size: 4.2cqw; }
.cart.solid { background: #f7efdc; border-radius: 40% / 50%; box-shadow: 0 0 0 .4cqw #f7efdc; font-size: 2.5cqw; }
.typo { text-decoration: none; position: relative; color: var(--verm); }
.typo::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .12em;
  background: var(--verm); border-radius: 2px; transform: scaleX(0); transform-origin: left;
  transition: transform .8s .6s var(--ease);
}
.plate.is-on .typo::after { transform: scaleX(1); }

/* envelope address block, tilted with the envelope */
.addr { transform: rotate(7.4deg); transform-origin: 0 0; font-size: 2.15cqw; line-height: 1; }
.addr .line {
  margin: 0; height: 3.25cqw; display: flex; align-items: flex-end; white-space: nowrap;
  font-family: var(--hand); font-size: 2.45cqw; color: #2a3b55;
}
.addr .typo { color: var(--verm); }

.stampbox { transform: rotate(var(--r)); }
.stampbox img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 4%;
  mix-blend-mode: multiply; opacity: 0; transform: scale(1.8) rotate(-12deg);
  transition: opacity .35s, transform .45s cubic-bezier(.3,1.6,.5,1);
}
.stampbox.is-on img { opacity: .92; transform: scale(1) rotate(-6deg); }

.scrolltext {
  transform: rotate(var(--r)); text-align: center;
  font: italic 600 1.45cqw/1.4 var(--serif); color: #3b2a1c;
  opacity: 0; transition: opacity 1.2s .5s;
}
.plate.is-on .scrolltext { opacity: 1; }



/* =========================================================
   OPENING
   ========================================================= */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: grid; z-index: 3; }
.hero-art {
  position: absolute; inset: 0; display: grid; place-items: center end;
  padding: 0 4vw;
}
.hero-plate {
  position: relative; width: min(66vw, calc(86vh * 1.79)); aspect-ratio: 1284/716;
  container-type: inline-size; box-shadow: 0 40px 80px -40px rgba(43,32,24,.55);
}
.hero-video { width: 100%; height: 100%; object-fit: cover; }
.hero-plate .cart { font-size: 2.2cqw; font-style: italic; }
.hero-tall { display: none; }

.titlebox {
  position: relative; z-index: 2; align-self: center;
  margin-left: 6vw; width: min(420px, 34vw);
  padding: 28px 30px 30px;
  background: rgba(243,233,210,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.tb-line { position: absolute; background: var(--ink); transition: transform 1.2s var(--ease); }
.tb-t, .tb-b { left: 0; right: 0; height: 1px; transform-origin: left; }
.tb-t { top: 0; } .tb-b { bottom: 0; transform-origin: right; }
.tb-l, .tb-r { top: 0; bottom: 0; width: 1px; transform-origin: top; }
.tb-l { left: 0; transform-origin: bottom; } .tb-r { right: 0; }
.titlebox > *:not(.tb-line) { transition: opacity 1s .9s var(--ease); }

.wordmark {
  margin: 0; font: 400 clamp(38px, 3.5vw, 56px)/1 var(--display);
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}
.tb-sub { margin: 16px 0 18px; font-size: 1.05em; line-height: 1.3; font-style: italic; color: var(--ink-soft); }
.toc { list-style: none; margin: 0 0 22px; padding: 0; columns: 1; }
.toc li { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); }
.toc li:last-child { border-bottom: 1px solid var(--line); }
.toc a { color: var(--ink); text-decoration: none; font-weight: 600; padding: 3px 0; font-size: .98em; }
.toc a:hover { color: var(--verm); }
.toc i { font-style: normal; color: var(--ink-soft); font-size: .95em; }

.seal {
  display: inline-flex; align-items: center; gap: 12px; cursor: pointer;
  font: 600 1.05em var(--serif); color: var(--paper); background: var(--ink);
  border: 0; padding: 10px 20px 10px 12px; border-radius: 999px;
  transition: transform .3s var(--ease), background .3s;
}
.seal:hover { transform: translateY(-2px); background: #3d2d21; }
.seal-wax {
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #e0644b, var(--verm) 55%, #7d2416);
  box-shadow: inset 0 0 0 3px rgba(0,0,0,.12);
}
.seal.is-broken .seal-wax { animation: crack .5s forwards; }
@keyframes crack { 50% { transform: scale(1.25) rotate(18deg); } to { transform: scale(.0) rotate(60deg); opacity: 0; } }

/* =========================================================
   CHAPTERS: cards scroll over the fixed stage
   ========================================================= */
main { position: relative; z-index: 2; }
.ch { position: relative; min-height: 150vh; padding: 30vh 0 20vh; }
.ch--steps { min-height: auto; }
.ch--steps .card { margin-bottom: 55vh; }
.ch--steps .card:last-child { margin-bottom: 30vh; }

.card {
  position: relative; width: min(440px, 28vw); margin-left: 7.5vw;
  padding: 26px 28px;
  background: rgba(243,233,210,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  box-shadow: 0 20px 40px -28px rgba(43,32,24,.5);
}
.card p { margin: 0 0 .8em; }
.card p:last-child { margin-bottom: 0; }
.num { font-size: .82em; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.num i { font-style: normal; letter-spacing: 0; text-transform: none; color: var(--verm); font-size: 1.15em; }
.card h2 {
  margin: .1em 0 .45em; font: 400 clamp(34px, 2.85vw, 54px)/1 var(--display);
  color: var(--ink); letter-spacing: -.01em;
}
.note { font-size: .9em; color: var(--ink-soft); font-style: italic; border-left: 2px solid var(--verm); padding-left: 12px; }
.note .ru, .note [lang="he"] { font-style: normal; }
.big { font: 600 1.35em/1.25 var(--serif); }
.hl { color: var(--verm); }
.trio { white-space: nowrap; font-style: normal; color: var(--verm); }


/* =========================================================
   RAIL
   ========================================================= */
.rail {
  position: fixed; left: 1.4vw; top: 50%; z-index: 5; transform: translateY(-50%);
  opacity: 0; transition: opacity .6s;
}
body[data-active]:not([data-active="0"]) .rail { opacity: 1; }
.rail ol { list-style: none; margin: 0; padding: 0; }
.rail a {
  display: flex; align-items: center; gap: 10px; padding: 3px 0;
  color: var(--ink-soft); text-decoration: none; font-size: 17px;
}
.rail i { font-style: normal; width: 1.6em; text-align: center; }
.rail span {
  opacity: 0; transform: translateX(-6px); white-space: nowrap; font-size: 15px;
  transition: opacity .3s, transform .3s; background: var(--paper); padding: 0 6px;
}
.rail a:hover span, .rail a:focus-visible span { opacity: 1; transform: none; }
.rail a.is-on { color: var(--verm); }
.rail a.is-on i { font-weight: 600; transform: scale(1.25); }

/* =========================================================
   DISPATCH (rank + mini map)
   ========================================================= */
.dispatch {
  position: fixed; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 6;
  display: grid; justify-items: end; gap: 8px;
  opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s var(--ease);
}
body[data-active]:not([data-active="0"]):not([data-active="10"]) .dispatch { opacity: 1; transform: none; }
.rank {
  margin: 0; padding: 6px 12px; background: var(--ink); color: var(--paper);
  font-size: 15px; border-radius: 3px; display: flex; gap: 8px; align-items: baseline;
}
.rank-label { opacity: .65; font-style: italic; }
.rank-name { font-weight: 600; transition: opacity .3s; }
.rank-name.is-swapping { opacity: 0; }
.minimap {
  position: relative; width: 220px; aspect-ratio: 1200/679; padding: 0; border: 1px solid var(--ink);
  background: none; cursor: zoom-in; box-shadow: 0 10px 30px -14px rgba(0,0,0,.5);
}
.minimap img { width: 100%; height: 100%; object-fit: cover; }
.dot, .pin { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--verm);
  box-shadow: 0 0 0 3px rgba(243,233,210,.9), 0 0 12px 4px rgba(192,65,43,.6);
  transition: left 1.4s var(--ease), top 1.4s var(--ease);
}
.dot::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--verm);
  animation: ping 1.8s infinite;
}
@keyframes ping { from { transform: scale(.5); opacity: 1; } to { transform: scale(2); opacity: 0; } }

.mapdlg {
  border: 0; padding: 0; background: none; max-width: 96vw; max-height: 96vh;
}
.mapdlg::backdrop { background: rgba(30,22,16,.72); backdrop-filter: blur(3px); }
.mapwrap { position: relative; width: min(94vw, calc(90vh * 1200 / 679)); aspect-ratio: var(--ar); container-type: inline-size; }
.mapwrap img { width: 100%; height: 100%; }
.mapwrap .cart { font-size: 1.7cqw; }
.pin {
  font: 600 1.3cqw/1 var(--serif); color: var(--paper); background: var(--verm);
  padding: .35cqw .6cqw; border-radius: 99px; box-shadow: 0 0 0 .25cqw var(--paper);
}
.mapdlg .close {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--ink); font-size: 18px; cursor: pointer;
}

/* =========================================================
   STAMP SLAM
   ========================================================= */
.slam {
  position: fixed; z-index: 30; left: 50%; top: 50%; width: min(360px, 70vw);
  transform: translate(-50%, -50%) scale(2.2) rotate(-14deg); opacity: 0; pointer-events: none;
  text-align: center;
}
.slam img { width: 62%; margin: 0 auto; border-radius: 50%; mix-blend-mode: multiply; }
.slam-word {
  margin: -.3em 0 0; font: 400 clamp(54px, 7vw, 92px)/1 var(--display); color: var(--verm);
  text-shadow: 0 2px 0 var(--paper), 0 -2px 0 var(--paper), 2px 0 0 var(--paper), -2px 0 0 var(--paper);
}
.slam-gloss { margin: .2em 0 0; font: italic 600 20px var(--serif); color: var(--ink); background: var(--paper); display: inline-block; padding: 2px 10px; }
.slam.is-on { animation: slam 2.4s var(--ease) forwards; }
@keyframes slam {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.2) rotate(-14deg); }
  14% { opacity: 1; transform: translate(-50%, -50%) scale(.94) rotate(-6deg); }
  20% { transform: translate(-50%, -50%) scale(1.02) rotate(-6deg); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.96) rotate(-6deg); }
}

/* =========================================================
   FINAL
   ========================================================= */
.final {
  position: relative; z-index: 3; min-height: 100vh; padding: 20vh 6vw 18vh;
  display: grid; justify-items: center; text-align: center;
  background: linear-gradient(to bottom, transparent, var(--paper) 14vh);
}
.final-title { margin: .1em 0 0; font: 400 clamp(46px, 5.4vw, 96px)/1 var(--display); color: var(--ink); }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* the Imagine mosaic, Strawberry Fields */
.mosaic { position: relative; width: min(440px, 80vw); aspect-ratio: 1; margin: 6vh 0 5vh; }
.mosaic-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 2deg, #1f1e1c 0 4deg, #efebe2 4deg 9deg, #8f8a80 9deg 12deg, #efebe2 12deg 18deg);
  box-shadow: 0 0 0 10px #d9d2c2, 0 0 0 12px #a39d90, 0 40px 70px -36px rgba(30,22,16,.6);
}
.mosaic-ring::after { /* tesserae joints */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, transparent 0 7px, rgba(60,50,40,.28) 7px 8px),
    repeating-conic-gradient(from 0deg, transparent 0 1.6deg, rgba(60,50,40,.22) 1.6deg 1.9deg);
  mix-blend-mode: multiply;
}
.mosaic-core {
  position: absolute; inset: 31%; border-radius: 50%; background: #f3efe6;
  box-shadow: 0 0 0 5px #1f1e1c, 0 0 0 9px #efebe2, 0 0 0 11px #1f1e1c;
  display: grid; place-items: center;
}
.mosaic-core span { font: 500 clamp(13px, 2.3vw, 24px)/1 "Inter", system-ui, sans-serif; letter-spacing: .22em; margin-right: -.22em; color: #1f1e1c; }
.offerings { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; }
.flower circle { fill: var(--verm); }
.flower .c { fill: #e7b93f; }
.flower.f2 circle { fill: #e9e2f2; } .flower.f2 .c { fill: #e7b93f; }
.flower.f3 circle { fill: #e7b93f; } .flower.f3 .c { fill: var(--verm); }
.candle rect { fill: #f5ecd6; stroke: #b9a98a; stroke-width: .3; }
.flame { fill: #f2a227; transform-origin: 0 -5.4px; animation: flicker 1.4s ease-in-out infinite alternate; }
.candle:nth-of-type(2n) .flame { animation-duration: 1.1s; }
@keyframes flicker { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.88, 1.12) rotate(3deg); } }

.final-copy { max-width: 32em; font-size: 1.12em; }
.final-copy p { margin: 0 0 .7em; }
.order { font-style: italic; font-weight: 600; color: var(--verm); }
.imagine { margin-top: 2vh; width: min(720px, 100%); display: grid; justify-items: center; }
.imagine-btn {
  font: 600 20px var(--serif); background: none; color: var(--ink); cursor: pointer;
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 26px;
  transition: background .3s, color .3s;
}
.imagine-btn:hover { background: var(--ink); color: var(--paper); }
.imagine-frame { width: 100%; aspect-ratio: 16/9; margin-top: 18px; }
.imagine-frame iframe { width: 100%; height: 100%; border: 0; }

/* the title ladder: three guesses struck, the name left standing */
.ladder { margin-top: 12vh; display: grid; gap: 10px; justify-items: center; }
.ladder.is-in { opacity: 1; transform: none; }
.rung {
  margin: 0; display: flex; align-items: center; gap: 14px;
  font: 600 clamp(22px, 2.4vw, 34px)/1 var(--serif); color: var(--ink-soft);
  opacity: 0; transform: translateY(12px);
  transition: opacity .8s calc(var(--i) * .5s) var(--ease), transform .8s calc(var(--i) * .5s) var(--ease);
}
.rung .ru { font-family: var(--display); font-weight: 400; }
.rung img { width: 1.6em; height: 1.6em; border-radius: 50%; }
.rung s { text-decoration: none; position: relative; }
.rung s::after {
  content: ""; position: absolute; left: -3%; right: -3%; top: 52%; height: 3px; background: var(--verm);
  transform: scaleX(0); transform-origin: left;
  transition: transform .6s calc(var(--i) * .5s + 2.2s) var(--ease);
}
.ladder.is-in .rung { opacity: 1; transform: none; }
.ladder.is-in .rung s::after { transform: scaleX(1); }
.rung--khan { color: var(--ink); font-size: clamp(30px, 3.2vw, 46px); }
.rung--khan b { font-weight: 600; transition: text-shadow 1.6s 4.4s, color 1.6s 4.4s; }
.ladder.is-in .rung--khan b { color: #8a5a12; text-shadow: 0 0 22px rgba(214,165,58,.75), 0 0 2px rgba(214,165,58,.9); }

.sig { margin: 8vh 0 0; display: grid; justify-items: center; }
.sig-face { width: min(230px, 50vw); height: auto; }
.sig-path {
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: var(--len, 2000); stroke-dashoffset: var(--len, 2000);
  transition: stroke-dashoffset 4.5s .4s cubic-bezier(.45,.1,.3,1);
}
.sig.is-in .sig-path { stroke-dashoffset: 0; }
.sig-name {
  margin: -.2em 0 0; font: 500 clamp(40px, 4.4vw, 64px)/1 var(--hand); color: var(--ink);
  clip-path: inset(0 100% 0 0); transition: clip-path 2.6s 4.4s cubic-bezier(.45,.1,.3,1);
}
.sig.is-in .sig-name { clip-path: inset(0 0 0 0); }
.note-final { margin: 7vh 0 0; font: italic 600 clamp(26px, 2.6vw, 40px)/1.3 var(--serif); color: var(--ink); }

/* =========================================================
   II. THE NAME
   ========================================================= */
.plate--name {
  width: min(62vw, 980px); aspect-ratio: auto; height: auto; overflow: visible;
  box-shadow: none; container-type: normal;
}
.namepanel {
  position: relative; display: grid; gap: clamp(26px, 5vh, 56px); text-align: center;
  padding: clamp(28px, 6vh, 64px) clamp(16px, 3vw, 48px);
  background: rgba(234,217,182,.55); border: 1px solid var(--line);
  outline: 1px solid var(--line); outline-offset: 6px;
}
.namerow { position: relative; z-index: 1; opacity: .14; transition: opacity .9s var(--ease); }
.namerow.is-on { opacity: 1; }
.tiles {
  margin: 0; font: 600 clamp(26px, 3.3vw, 56px)/1 var(--serif); letter-spacing: .08em;
  color: var(--ink); white-space: nowrap;
}
.tiles.ru { font-family: var(--serif); }
.tiles .hk, .tiles .hs { position: relative; padding: 0 .04em; border-radius: 3px; transition: color .6s, background .6s; }
.namerow.is-on .hk { color: var(--verm); background: rgba(192,65,43,.1); }
.namerow.is-on .hs { color: var(--teal); background: rgba(30,76,88,.1); }
.rowlabel { margin: .55em 0 0; font-size: .82em; font-style: italic; color: var(--ink-soft); letter-spacing: .02em; }
.namelines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.nl {
  fill: none; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600);
  transition: stroke-dashoffset 1.2s .3s var(--ease);
}
.nl-k { stroke: var(--verm); } .nl-s { stroke: var(--teal); }
.namepanel[data-step="2"] .nl { stroke-dashoffset: calc(var(--len, 600) * .5); }
.namepanel[data-step="3"] .nl { stroke-dashoffset: 0; }
.card .k { color: var(--verm); }
.card .s { color: var(--teal); }
.card--line .big { font-size: 1.7em; line-height: 1.2; margin: 0; }

/* =========================================================
   PHONES
   ========================================================= */
@media (max-width: 899px) {
  body { font-size: 18px; }
  .plate, .plate--tall {
    --pw: min(100vw, calc(52svh * (var(--ar))));
    right: auto; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 1.5svh);
    transform: translate3d(-50%, 0, 0) scale(.985);
    box-shadow: 0 16px 30px -18px rgba(43,32,24,.5);
  }
  .plate.is-on { transform: translate3d(-50%, 0, 0) scale(1); }
  .stage { z-index: 4; }
  .stage::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--band, 52svh) + 22px);
    background: linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(100% - 22px), rgba(243,233,210,0) 100%); z-index: -1;
    transition: height .8s var(--ease);
  }
  .ch { min-height: 120svh; padding: 70svh 0 12svh; }
  .ch--steps .card { margin-bottom: 45svh; }
  .card { width: auto; margin: 0 16px; padding: 20px 20px; }
  .card h2 { font-size: clamp(36px, 10vw, 48px); }

  .hero-art { padding: 0; }
  .hero-plate { display: none; }
  .hero-tall { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
  .titlebox {
    align-self: end; margin: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); width: auto;
    background: rgba(243,233,210,.9);
  }
  .toc { display: none; }
  .wordmark { font-size: clamp(44px, 13vw, 60px); }

  .rail { left: auto; right: 12px; top: auto; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); transform: none; }
  .rail li { display: none; }
  .rail li:has(.is-on) { display: block; }
  .rail a { background: var(--ink); color: var(--paper) !important; border-radius: 99px; padding: 4px 10px; }
  .rail span { display: none; }

  .dispatch { right: auto; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); justify-items: start; }
  .minimap { display: none; }
  .rank { font-size: 14px; }
  .plate--name { width: calc(100vw - 24px); --ar: 1; }
  .namepanel { gap: 18px; padding: 22px 10px; }
  .tiles { font-size: clamp(19px, 5.7vw, 28px); letter-spacing: .03em; }
  .rowlabel { font-size: 13px; }
  .ladder { margin-top: 8vh; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  .plate.is-on > img, .plate.is-on > video { animation: none; }
}

.plate[data-plate="clerk"] .cart { font-size: 1.48cqw; padding: 0 2cqw; }