/* ═══ Eras · site.css ═══════════════════════════════════════════════
   The index page: layout, the case and its poster, the log, the cabinet,
   the screens rail, the house thread, the line-up and the store bar.
   Tokens, type, grain, focus, .cta/.rule/.eyebrow/.sec-label, [data-era]
   tokens, reveals and the global motion-off rules live in base.css.
   Mobile first; breakpoints 320 / 360 / 600 / 720 / 760 / 960 / 1200 / 1280,
   plus 1420 for the store bar's corner panel. */

/* Registered colours are only ever transitioned on the element that uses
   them (inherits: false), never on :root, so a re-roll repaints one layer. */
@property --pool { syntax: "<color>"; inherits: false; initial-value: #C57A3C; }
@property --wash { syntax: "<color>"; inherits: false; initial-value: #2A1A10; }

/* ─── Page frame ─────────────────────────────────────────────────── */
/* Measures are in em, never ch: ch is the width of the "0" in whichever face
   is showing, so a ch measure changed width when the web fonts swapped in
   (Karla's is 4.6% wider than its fallback's, Cormorant's 11% narrower) and
   moved every line below it. The em values are the old ch measures as the
   web fonts set them (Karla 0.5935em per ch, Cormorant 0.477, italic 0.436). */
/* viewport-fit=cover: on a notched phone held sideways the side insets win. */
.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
.nowrap { white-space: nowrap; }

.sec {
  position: relative;
  isolation: isolate;
  padding-block: clamp(44px, 10vw, 136px);
}
/* A hairline that fades at both ends, rather than a hard rule edge to edge. */
.sec + .sec {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--hairline) 18%, var(--hairline) 82%, transparent) 1;
}
.sec h2 { letter-spacing: -0.005em; }
.lead { margin-top: 16px; max-width: 27.3em; color: var(--muted); font-size: 15px; line-height: 1.68; }
.blurb { color: var(--muted); font-size: 15px; line-height: 1.7; max-width: 27.3em; }

/* ═══ S1 · Hero ═════════════════════════════════════════════════════ */
.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  padding: max(18px, env(safe-area-inset-top)) var(--gutter) 30px;
  padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
}
/* The gallery wall: the rolled age's atmosphere falls from above, with a
   faint gold bloom behind the wordmark. --wash crosses over on a re-roll. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 -120px;
  z-index: -1;
  pointer-events: none;
  --wash: var(--atmo0);
  transition: --wash .8s ease;
  background:
    radial-gradient(52% 26% at 50% 9%, rgba(201, 162, 75, 0.09), transparent 72%),
    radial-gradient(120% 62% at 50% 0%, var(--wash), transparent 78%);
}
.hero-inner {
  max-width: 1320px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-head { display: flex; flex-direction: column; align-items: center; width: 100%; }
.hero .eyebrow { margin-bottom: 6px; padding-left: 0.42em; }

.wordmark {
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(56px, 19vw, 96px);
  font-size: clamp(56px, min(19vw, 10.6svh), 120px);
  line-height: 0.9;
  letter-spacing: 0.16em;
  padding-left: 0.16em;       /* balances the trailing tracking so it centres */
  text-transform: uppercase;
  color: var(--text);
  text-shadow: 0 0 70px rgba(201, 162, 75, 0.22);
  white-space: nowrap;
}
.hero .rule { margin-top: 12px; }
.tagline {
  margin-top: 12px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 4.8vw, 22px);
  line-height: 1.32;
  color: var(--text);
  text-wrap: balance;
}
.blurb--hero { display: none; }

.hero-ctas { margin-top: 18px; }
/* The store row and facts are in the hero twice (index.html): before the case
   for the two-column layout, after it for the stacked one, so the Tab and
   reading order follow what the eye sees at every width. Only one pair shows. */
@media not all and (min-width: 960px) { .hero-inner > .hero-wide { display: none; } }
@media (min-width: 960px) { .hero-inner > .hero-narrow { display: none; } }
.facts {
  margin-top: 12px;
  max-width: 23.75em;
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-wrap: balance;
}
/* Two fixed lines, so no line ever starts or ends on a separator. */
.facts .grp { display: block; white-space: nowrap; }
.facts .sep-brk { display: none; }

/* ─── The case───────────────────────────────────────────────────────
   Geometry must match the WebGL vitrine (spec E1): one cell is --s CSS px,
   the stage is 76×120 cells plus an 8px margin all round. */
.case {
  --s: 2;
  --W: calc(76px * var(--s) + 16px);
  --H: calc(120px * var(--s) + 16px);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 12px;
  align-items: end;
  width: 100%;
  max-width: 460px;
  margin-top: 14px;
  text-align: left;
}
/* Tablets: the case and its label stand as one object, centred over the
   centred store row (the grid shrink-wraps; .hero-inner centres it). The
   larger scale waits for the height to hold it: a phone turned sideways
   keeps the 256px stage, so the case is never taller than the screen. */
@media (min-width: 600px) {
  .case { width: auto; max-width: none; grid-template-columns: var(--W) 220px; column-gap: 24px; }
}
@media (min-width: 600px) and (min-height: 640px) { .case { --s: 3; } }

/* The spotlight: a soft beam from above and a pool of the age's light on
   the floor under the plinth. Sits behind the transparent canvas. */
.case::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(var(--W) / 2);
  width: calc(var(--W) * 1.5);
  height: calc(var(--H) + 12px);
  translate: -50% 0;
  pointer-events: none;
  --pool: var(--era);
  transition: --pool .8s ease;
  background:
    radial-gradient(calc(var(--W) * .52) calc(9px * var(--s)) at 50% calc(100% - 20px - 14px * var(--s)), rgba(201, 162, 75, 0.3), transparent),
    radial-gradient(30% 78% at 50% 0%, rgba(201, 162, 75, 0.1), transparent);
  background:
    radial-gradient(calc(var(--W) * .52) calc(9px * var(--s)) at 50% calc(100% - 20px - 14px * var(--s)), color-mix(in srgb, var(--pool) 44%, transparent), transparent),
    radial-gradient(30% 78% at 50% 0%, color-mix(in srgb, var(--pool) 19%, transparent), transparent 100%),
    radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--pool) 6%, transparent), transparent);
}

.case-stage {
  position: relative;
  width: var(--W);
  height: var(--H);
  touch-action: pan-y;
}
/* The vitrine: a hairline glass box with a lamp at its head, brass corner
   joints and one faint reflection across the glass. Decorative only. */
.case-stage::before,
.case-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.case-stage::before {
  z-index: 0;
  border: 1px solid rgba(241, 235, 221, 0.07);
  background:
    linear-gradient(90deg, transparent, rgba(224, 190, 92, 0.55), transparent) 50% 0 / 70% 1px no-repeat,
    linear-gradient(180deg, rgba(224, 190, 92, 0.07), transparent 22%),
    linear-gradient(180deg, rgba(241, 235, 221, 0.025), transparent 60%);
}
.case-stage::after {
  z-index: 3;
  --c: rgba(201, 162, 75, 0.55);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / 9px 1px,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px 9px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 9px 1px,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px 9px,
    linear-gradient(var(--c), var(--c)) 0 100% / 9px 1px,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px 9px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 9px 1px,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px 9px,
    linear-gradient(116deg, transparent 14%, rgba(255, 255, 255, 0.035) 21%, transparent 27%, transparent 31%, rgba(255, 255, 255, 0.02) 33%, transparent 36%);
  background-repeat: no-repeat;
}

/* The poster: the game's own sprite on the flat brass dial. It is always
   in the DOM; the canvas cross-fades over it when WebGL is on. */
.case-poster {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: opacity .25s linear;
}
.case-fig {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(16px * var(--s) + 8px);
  width: calc(40px * var(--s));
  height: calc(100px * var(--s));
  background: url(../img/figures.png?v=6) calc(var(--fig-col) * -40px * var(--s)) calc(var(--fig-row) * -100px * var(--s)) / calc(360px * var(--s)) calc(600px * var(--s)) no-repeat;
  image-rendering: pixelated;
  z-index: 1;
}
.case-dial {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 8px;
  width: calc(76px * var(--s));
  height: calc(24px * var(--s));
  overflow: visible;
}
/* The poster dial is drawn as the vitrine's level camera sees the 3D one
   (eye 44 cells above the dial top, ~295 cells away): the same ellipses, the
   brass's front wall and pool of light, the plinth shaded as its matcap
   shades it, and the enamel at the glaze's 70%. So the cross-fade to the
   canvas changes the figure's depth, not the instrument under it. */
.dial-plinth { fill: #1C1920; fill: color-mix(in srgb, #1C1920 50%, var(--atmo0)); }
.dial-plinth-top { fill: #111013; fill: color-mix(in srgb, color-mix(in srgb, #1C1920 50%, var(--atmo0)) 62%, #000); }
.dial-groove { fill: none; stroke: #45320F; stroke-width: .6; }
.dial-glint { fill: none; stroke: #DDBE64; stroke-width: .3; }
.dial-bevel { fill: none; stroke: #D8B960; stroke-width: .32; }
.dial-ticks { fill: none; stroke: #5A4119; stroke-width: 1.2; }
.dial-sector { fill: none; stroke-width: 1.6; }
.dial-age {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(var(--dial-rot));
  transition: transform .9s cubic-bezier(.12, .72, .18, 1);
}

/* The heap of pixel sand the poster figure drains into, in the age's metal.
   A stepped mound, checked one cell at a time so it reads as pixels. */
.case-poster::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(16px * var(--s) + 8px);
  width: calc(26px * var(--s));
  height: calc(7px * var(--s));
  translate: -50% 0;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  background: var(--era-metal);
  background: repeating-conic-gradient(var(--era-metal) 0 25%, color-mix(in srgb, var(--era-metal) 72%, #000) 0 50%) 0 0 / calc(2px * var(--s)) calc(2px * var(--s));
  clip-path: polygon(0 100%, 0 85.71%, 3.85% 85.71%, 3.85% 71.43%, 11.54% 71.43%, 11.54% 57.14%, 19.23% 57.14%, 19.23% 42.86%, 26.92% 42.86%, 26.92% 28.57%, 34.62% 28.57%, 34.62% 14.29%, 42.31% 14.29%, 42.31% 0, 57.69% 0, 57.69% 14.29%, 65.38% 14.29%, 65.38% 28.57%, 73.08% 28.57%, 73.08% 42.86%, 80.77% 42.86%, 80.77% 57.14%, 88.46% 57.14%, 88.46% 71.43%, 96.15% 71.43%, 96.15% 85.71%, 100% 85.71%, 100% 100%);
  image-rendering: pixelated;
  pointer-events: none;
}

/* The roll, poster path (E2): drain top-down, swap, refill feet-first. */
#case:not([data-gl="on"])[data-phase="drain"] .case-fig { animation: fig-drain .95s steps(19) both; }
#case:not([data-gl="on"])[data-phase="fill"] .case-fig { animation: fig-fill 1s steps(20) both; }
#case:not([data-gl="on"])[data-phase="drain"] .case-poster::after { animation: heap-grow .95s steps(7) both; }
#case:not([data-gl="on"])[data-phase="fill"] .case-poster::after { animation: heap-sink 1s steps(7) both; }
@keyframes fig-drain { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
@keyframes fig-fill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes heap-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes heap-sink { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* The canvas (appended by the vitrine) sits exactly over the poster. */
.case-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .25s linear;
  touch-action: pan-y;
  cursor: grab;
}
.case-canvas:active { cursor: grabbing; }
.case-canvas.is-on { opacity: 1; }
/* The poster leaves only once the canvas is fully in (no mid-fade dip where
   both are half transparent); it comes back at once whenever the canvas goes. */
#case[data-gl="on"] .case-poster { opacity: 0; transition-delay: .25s; }
#case:not([data-gl="on"]) .case-poster { transition: none; }
#case:not([data-gl="on"]) .case-canvas { opacity: 0; visibility: hidden; }

/* ─── The museum label ─────────────────────────────────────────────── */
.case-side {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 6px;
}
.label { width: 100%; }
.label [data-step] { transition: opacity .3s ease; }
.label [data-pending] { opacity: .28; }
.label-no {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Two lines are reserved and the name sits on the lower one, so a long
   name never moves the rows beneath it (CLS). */
.label-name {
  display: flex;
  align-items: flex-end;
  min-height: 2.12em;
  margin-top: 4px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.06;
  color: var(--text);
  text-wrap: balance;
}
.label-era {
  margin-top: 3px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.25;
  color: var(--era-ink);
}
/* Born and paid share one reserved block (three lines), so a place that
   wraps pushes nothing below it. */
.label-where {
  position: relative;
  min-height: calc(3 * 1.4 * 12.5px);
  margin-top: 19px;
  font-size: 12.5px;
  line-height: 1.4;
}
.label-born { color: rgba(241, 235, 221, 0.92); }
.label-where::before {
  content: "";
  position: absolute;
  left: 0;
  top: -10px;
  width: 34px;
  height: 1px;
  background: var(--era);
  opacity: .8;
}
.label-paid { color: var(--muted); }
.label-house {
  min-height: 2.9em;
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.roll {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 14px 0 10px;
  border: 1px solid rgba(201, 162, 75, 0.34);
  border: 1px solid color-mix(in srgb, var(--era-ink) 46%, transparent);
  border-radius: 2px;
  background: rgba(201, 162, 75, 0.06);
  background: color-mix(in srgb, var(--era) 9%, transparent);
  color: var(--era-ink);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.roll .hourglass {
  flex: none;
  width: 16px;
  height: 16px;
  transform: rotate(var(--hourglass-turn, 0deg));
  transition: transform .6s cubic-bezier(.6, 0, .2, 1);
}
.roll[aria-disabled="true"] { cursor: progress; }
/* With JS the button's room is kept from the first paint (roll.js unhides it
   a moment later), so the label column never grows when it appears. */
html.js #roll-btn[hidden] { display: inline-flex !important; visibility: hidden; }
@media (hover: hover) {
  .roll:hover { border-color: var(--era-ink); background: color-mix(in srgb, var(--era) 16%, transparent); }
}
.roll:active { background: color-mix(in srgb, var(--era) 24%, transparent); }

.case-link { display: none; }

/* Small phones (320-359px, a 320x568 iPhone SE among them): the label stays
   beside the stage, as on every phone, with the cell at 1.5px (the stage is
   130x196, still whole device pixels at 2x). Stacked at --s 2 the case was
   530px tall and pushed the Roll button and the store row below the first
   screen; side by side, both are on it. The vitrine reads --s from here. */
@media (min-width: 320px) and (max-width: 359px) {
  .case { --s: 1.5; }
  /* The label column is now taller than the stage, which stands at the
     foot of the row: hang the spotlight from the stage, not the row's top. */
  .case::before { top: auto; bottom: -8px; }
  /* The tagline's second line and both store buttons keep to one row each,
     so the facts line fits too. */
  .tagline { font-size: min(18px, 5vw); } /* 16px at 320, the 18px of 360 by 359 */
  .hero-ctas { width: 100%; flex-wrap: nowrap; gap: 8px; }
  .hero-ctas .cta { flex: 1 1 0; min-width: 0; padding-inline: 6px; gap: 8px; letter-spacing: 0.08em; }
}
/* Narrower still (a foldable's cover screen): a label beside the stage would
   be too narrow to read, so the case stacks, stage above label. The label
   keeps the column's full width (its text centred inside), so a roll to a
   longer or shorter name re-centres the words without moving the box (CLS). */
@media (max-width: 319px) {
  .case { grid-template-columns: 1fr; justify-items: center; row-gap: 14px; }
  .case::before { left: 50%; }
  .case-side { justify-self: stretch; align-items: center; text-align: center; }
  .label-name { justify-content: center; }
  .label-name > [data-bind] { flex: 1 1 auto; min-width: 0; } /* the name's box spans the row; only its text re-centres */
  .label-where::before { left: 50%; translate: -50% 0; }
}

/* ─── Hero, desktop: two columns, the case to the right ──────────── */
@media (min-width: 960px) {
  .hero {
    display: grid;
    align-items: center;
    min-height: 100vh;
    min-height: min(100svh, 1100px);
    padding-block: 48px;
  }
  .hero::before {
    background:
      radial-gradient(34% 40% at 24% 26%, rgba(201, 162, 75, 0.08), transparent 72%),
      radial-gradient(70% 80% at 72% 0%, var(--wash), transparent 76%);
  }
  .hero-inner {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr auto auto auto 1fr;
    grid-template-areas: ". case" "head case" "ctas case" "facts case" ". case";
    column-gap: clamp(32px, 4.6vw, 88px);
    align-items: start;
    justify-items: start;
    text-align: left;
  }
  .hero-head { grid-area: head; align-items: flex-start; container-type: inline-size; }
  .hero .eyebrow { padding-left: 0; margin-bottom: 10px; }
  .wordmark {
    font-size: clamp(64px, 29cqi, 176px);
    padding-left: 0;
    margin-left: -0.05em;
  }
  .hero .rule { margin: 22px 0 0; background: linear-gradient(90deg, var(--gold), transparent); }
  .tagline { margin-top: 22px; font-size: clamp(22px, 2.1vw, 29px); max-width: 13.1em; }
  .blurb--hero { display: block; margin-top: 18px; max-width: 24.9em; }
  .hero-ctas { grid-area: ctas; justify-content: flex-start; margin-top: 30px; }
  .facts { grid-area: facts; margin-top: 16px; text-wrap: wrap; max-width: 28.5em; }

  /* The label always stands beside the stage, like a wall label. */
  .case {
    --s: 4;
    grid-area: case;
    width: auto;
    max-width: none;
    margin-top: 0;
    grid-template-columns: var(--W) minmax(180px, 220px);
    column-gap: 22px;
  }
  .case-side { padding-bottom: calc(10px + 4px * var(--s)); }
  .label-name { font-size: 27px; min-height: 2.12em; }
  .label-era { font-size: 18px; }
  .label-where { font-size: 13.5px; min-height: calc(3 * 1.4 * 13.5px); margin-top: 21px; }
  .label-house { font-size: 12px; min-height: 2.95em; margin-top: 8px; }
  .label-where::before { top: -11px; width: 44px; }
  .roll { margin-top: 14px; }
  .case-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 2px;
    color: var(--gold-lit);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: rgba(224, 190, 92, 0.35);
    text-underline-offset: 0.45em;
    transition: text-decoration-color .3s ease;
  }
  .case-link:hover { text-decoration-color: var(--gold-lit); }
}
@media (min-width: 1200px) {
  .case { grid-template-columns: var(--W) minmax(220px, 256px); column-gap: 30px; }
  .label-name { font-size: 30px; }
  .label-era { font-size: 19px; }
  .label-where { font-size: 14px; min-height: calc(3 * 1.4 * 14px); }
}
@media (min-width: 1280px) and (min-height: 820px) {
  .case { --s: 5; }
  .label-name { font-size: 34px; }
}

/* ═══ S2 · Statement ════════════════════════════════════════════════ */
.premise { text-align: center; padding-top: clamp(20px, 6vw, 96px); }
.premise::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 55%, rgba(201, 162, 75, 0.05), transparent 72%);
}
.premise-cap {
  max-width: 20.2em;
  margin: 0 auto 24px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
  text-wrap: balance;
}
.premise-cap::before {
  content: "";
  display: block;
  width: 1px;
  height: 20px;
  margin: 0 auto 10px;
  background: linear-gradient(180deg, var(--gold), transparent);
}
.premise h2 {
  max-width: 8.1em;
  margin-inline: auto;
  font-size: clamp(33px, 6.6vw, 76px);
  line-height: 1.08;
}
.blurb--statement {
  max-width: 14.8em;
  margin: 24px auto 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.42;
  color: rgba(241, 235, 221, 0.86);
  text-wrap: balance;
}
.premise-body {
  max-width: 32.05em;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.72;
}
@media (min-width: 960px) {
  .blurb--statement { display: none; }
  .premise-body { margin-top: 34px; font-size: 16px; }
}

/* ═══ S3 · The log ══════════════════════════════════════════════════ */
.log::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --wash: var(--atmo0);
  transition: --wash .8s ease;
  background: radial-gradient(70% 46% at 70% 44%, var(--wash), transparent 75%);
  opacity: .8;
}
.log-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
.log-head h2 { font-size: clamp(33px, 6vw, 60px); }
.log-col { width: 100%; max-width: 480px; justify-self: center; }
/* One column on tablets too: the heading shares the card's left edge. */
@media (min-width: 600px) and (max-width: 959px) {
  .log-head { width: 100%; max-width: 480px; justify-self: center; }
}

.log-card {
  position: relative;
  scroll-margin-top: 64px;   /* "Roll another life" brings the card back with room above it */
  border: 1px solid rgba(241, 235, 221, 0.09);
  border-radius: 6px;
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03) inset,
    0 44px 80px -44px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(0, 0, 0, 0.35);
}
.log-card-head {
  position: relative;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--hairline);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.06), transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--atmo0) 80%, var(--surface)), var(--surface));
}
.log-card-head::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  border-radius: 6px 6px 0 0;
  background: var(--era);
}
.log-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--text);
}
.log-meta {
  margin-top: 3px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* A ledger: the age in the margin, the line beside it. */
.log-list { list-style: none; padding: 10px 20px 6px; }
.log-li {
  position: relative;
  padding: 5px 0 5px 60px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);
}
.log-li.is-age {
  margin-top: 8px;
  padding-top: 13px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
}
.log-li:first-child { margin-top: 0; padding-top: 5px; border-top: 0; }
.log-age {
  position: absolute;
  left: 0;
  top: 7px;
  width: 52px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.9;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--era-ink);
  font-variant-numeric: tabular-nums;
}
.log-li.is-age .log-age { top: 14px; }
.log-li:first-child .log-age { top: 6px; }
.log-li.is-new { border-radius: 3px; animation: log-new .9s ease-out both; }
@keyframes log-new { from { background-color: rgba(201, 162, 75, 0.12); } to { background-color: rgba(201, 162, 75, 0); } }

.chip {
  display: inline-block;
  margin-left: 2px;
  padding: 0 6px;
  border: 1px solid currentColor;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
  border-radius: 3px;
  background: color-mix(in srgb, currentColor 9%, transparent);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: 0.08em;
  white-space: nowrap;
  vertical-align: 1px;
  font-variant-numeric: tabular-nums;
}
.chip--up { color: #8CC58A; }
.chip--down { color: #E38C8C; }

/* The moment: dealt into #log-moment by life.js (which animates it), or
   shown answered in the static excerpt. */
.log-moment { padding: 0 20px; }
.log-moment:empty { display: none; }
.moment,
.moment-static {
  position: relative;
  margin: 10px 0 6px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(201, 162, 75, 0.3);
  border: 1px solid color-mix(in srgb, var(--era) 42%, transparent);
  border-radius: 5px;
  background: var(--card);
  background: linear-gradient(180deg, color-mix(in srgb, var(--atmo0) 60%, var(--card)), var(--card) 70%);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.log-li--moment { padding-left: 0; }
.moment-static > summary { list-style: none; cursor: pointer; }
.moment-static > summary::-webkit-details-marker { display: none; }
.moment-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--era-ink);
}
.moment-title {
  display: block;
  margin-top: 5px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.18;
  color: var(--text);
}
.moment-body { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.moment-choices { display: grid; gap: 8px; margin-top: 16px; }
.moment-choice {
  min-height: 46px;
  padding: 10px 14px;
  border: 1px solid rgba(201, 162, 75, 0.32);
  border-radius: 3px;
  background: rgba(201, 162, 75, 0.06);
  color: var(--text);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: left;
  transition: border-color .25s ease, background-color .25s ease;
}
@media (hover: hover) {
  .moment-choice:hover { border-color: rgba(201, 162, 75, 0.75); background: rgba(201, 162, 75, 0.12); }
}
.moment-choice:active { background: rgba(201, 162, 75, 0.2); }
.moment-outcomes { list-style: none; display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.moment-outcomes li { font-size: 13.5px; line-height: 1.6; color: var(--text); }
.moment-outcomes b { font-weight: 500; color: var(--gold-lit); }

.log-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 40px);
  min-height: 48px;
  margin: 12px 20px 20px;
  padding: 8px 16px;
  border: 0;
  border-radius: 2px;
  background: var(--era-ink);
  color: #121013;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: filter .2s ease, background-color .3s ease, color .3s ease, box-shadow .3s ease;
}
@media (hover: hover) { .log-btn:hover { filter: brightness(1.1); } }
.log-btn:active { filter: brightness(.9); }
.log-btn[aria-disabled="true"] {
  background: transparent;
  color: var(--muted);
  box-shadow: inset 0 0 0 1px rgba(241, 235, 221, 0.16);
  filter: none;
}

.log-end {
  padding: 28px 20px 26px;
  border-top: 1px solid var(--hairline);
  border-radius: 0 0 6px 6px;
  text-align: center;
  background: radial-gradient(90% 90% at 50% 0%, rgba(201, 162, 75, 0.08), transparent 72%);
  background: radial-gradient(90% 90% at 50% 0%, color-mix(in srgb, var(--era) 13%, transparent), transparent 72%);
}
.log-end h3 {
  font-style: italic;
  font-weight: 300;
  font-size: clamp(29px, 7.4vw, 38px);
  line-height: 1.1;
  color: var(--text);
}
.log-end p { max-width: 20.2em; margin: 10px auto 0; font-size: 14px; line-height: 1.65; color: var(--muted); }
.log-end .cta-row { margin-top: 20px; gap: 10px; }
/* Phones: the pair stays side by side, as in every other store row (from
   360px up, like them; narrower, the two stack at equal widths). */
@media (min-width: 360px) and (max-width: 599px) {
  .log-end .cta-row { flex-wrap: nowrap; gap: 8px; }
  .log-end .cta { flex: 1 1 0; min-width: 0; padding-inline: 10px; letter-spacing: 0.1em; }
}
.log-again {
  min-height: 44px;
  margin-top: 10px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: var(--gold-lit);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: rgba(224, 190, 92, 0.4);
  text-underline-offset: 0.35em;
}
.log-again:hover { text-decoration-color: var(--gold-lit); }

.log-note {
  margin-top: 14px;
  padding-inline: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--faint);
  text-align: center;
  text-wrap: balance;
}

.pillar {
  width: 100%;
  max-width: 480px;
  justify-self: center;
  padding-top: 22px;
  border-top: 1px solid var(--gold);
  border-image: linear-gradient(90deg, var(--gold), rgba(201, 162, 75, 0.2)) 1;
}
.pillar h3 { font-size: 24px; margin-bottom: 10px; }
.pillar p { color: var(--muted); font-size: 14.5px; line-height: 1.8; }

@media (min-width: 960px) {
  .log-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "head card" "pillar card";
    grid-template-rows: auto 1fr;
    column-gap: clamp(48px, 7vw, 110px);
    row-gap: 48px;
    align-items: start;
  }
  .log-head { grid-area: head; padding-top: 24px; }
  .log-head h2 { font-size: clamp(40px, 3.8vw, 54px); }
  .log-col { grid-area: card; justify-self: end; max-width: 500px; }
  /* Once the log has been played the card is far taller than the head: the
     pillar keeps its place beside it, as the cabinet's heading does. */
  .pillar { grid-area: pillar; justify-self: start; max-width: 400px; position: sticky; top: 22vh; }
  .log-note { text-align: left; }
}

/* ═══ S4 · Nine Ages: the cabinet ═══════════════════════════════════ */
/* Without JS the section still takes the colours of whichever drawer is
   open (native <details>, :has()); otherwise it wears the rolled age. */
.ages:has(.drawer[open][data-era="stone_age"])   { --era: #C57A3C; --era-ink: #C57A3C; --era-accent: #C9603A; --era-metal: #C9883E; --atmo0: #2A1A10; --atmo1: #17120E; --atmo2: #0D0A07; }
.ages:has(.drawer[open][data-era="bronze_age"])  { --era: #C9A227; --era-ink: #C9A227; --era-accent: #2E78AC; --era-metal: #D4AF37; --atmo0: #10283F; --atmo1: #101A26; --atmo2: #080F16; }
.ages:has(.drawer[open][data-era="rome"])        { --era: #9C5C99; --era-ink: #B07AAE; --era-accent: #C9A24B; --era-metal: #E0BE5C; --atmo0: #27152E; --atmo1: #160F18; --atmo2: #0C080C; }
.ages:has(.drawer[open][data-era="medieval"])    { --era: #7C97AE; --era-ink: #7C97AE; --era-accent: #C8923C; --era-metal: #BBC2CB; --atmo0: #151E28; --atmo1: #10151A; --atmo2: #080B0E; }
.ages:has(.drawer[open][data-era="renaissance"]) { --era: #2C8073; --era-ink: #3E9A8B; --era-accent: #B0492E; --era-metal: #C9A24B; --atmo0: #24190F; --atmo1: #16110C; --atmo2: #0C0807; }
.ages:has(.drawer[open][data-era="industrial"])  { --era: #B5894B; --era-ink: #B5894B; --era-accent: #7E6552; --era-metal: #B5894B; --atmo0: #1D1813; --atmo1: #14120F; --atmo2: #0A0907; }
.ages:has(.drawer[open][data-era="atomic"])      { --era: #2EA0A0; --era-ink: #2EA0A0; --era-accent: #E0673E; --era-metal: #C8CDD2; --atmo0: #0F2622; --atmo1: #0E1517; --atmo2: #070D0E; }
.ages:has(.drawer[open][data-era="modern"])      { --era: #C07A33; --era-ink: #C07A33; --era-accent: #4E7CA6; --era-metal: #C9A24B; --atmo0: #181A20; --atmo1: #111216; --atmo2: #090A0D; }
.ages:has(.drawer[open][data-era="far_future"])  { --era: #34C3D6; --era-ink: #34C3D6; --era-accent: #7A6CF0; --era-metal: #9FE7F0; --atmo0: #0C1A2E; --atmo1: #0A0F1A; --atmo2: #04060B; }

.ages::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --wash: var(--atmo0);
  transition: --wash .8s ease;
  background:
    radial-gradient(60% 40% at 50% 62%, var(--wash), transparent 78%),
    linear-gradient(180deg, transparent, rgba(10, 8, 12, 0.5) 50%, transparent);
}
.ages-head h2 { font-size: clamp(33px, 6vw, 60px); }

.cabinet {
  margin-top: 28px;
  padding: 6px;
  border: 1px solid rgba(201, 162, 75, 0.16);
  border-radius: 4px;
  background: linear-gradient(180deg, #0D0B10, #09080B);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 50px 90px -50px #000;
  display: grid;
  gap: 5px;
}

/* Each drawer carries its own perspective, looking down from just above
   its front, so a drawer low in the cabinet tilts no further than the first. */
.drawer {
  position: relative;
  perspective: 900px;
  perspective-origin: 50% -30px;
  border-radius: 2px;
}
.drawer > summary {
  list-style: none;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto auto;
  grid-template-areas: "no name yours pull" "no years yours pull";
  align-items: center;
  align-content: center;
  column-gap: 10px;
  min-height: 56px;
  padding: 6px 14px 6px 12px;
  border-top: 2px solid var(--era);
  border-radius: 2px;
  background: linear-gradient(180deg, #25202A 0%, #1B181F 48%, #141116 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 2px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform .25s var(--ease-out), background-color .25s ease, box-shadow .25s ease;
  -webkit-user-select: none;
  user-select: none;
}
.drawer > summary::-webkit-details-marker { display: none; }
/* The front's thickness: two side faces folded back 12px into the carcass. */
.drawer > summary::before,
.drawer > summary::after {
  content: "";
  position: absolute;
  top: -2px;
  bottom: 0;
  width: 12px;
  background: linear-gradient(180deg, #120F14, #08070A);
  pointer-events: none;
}
.drawer > summary::before { left: 0; transform-origin: 0 50%; transform: rotateY(90deg); }
.drawer > summary::after { right: 0; transform-origin: 100% 50%; transform: rotateY(-90deg); }
@media (hover: hover) {
  .drawer > summary:hover { transform: translateZ(8px); }
}
.drawer > summary:focus-visible { transform: translateZ(8px); outline-offset: 2px; }
.drawer[open] > summary {
  transform: translateZ(28px) translateY(-2px);
  background: linear-gradient(180deg, #2C2631 0%, #211D25 50%, #18151B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 14px 22px -10px rgba(0, 0, 0, 0.85);
}
.drawer-no {
  grid-area: no;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  color: var(--era-ink);
  text-align: center;
}
.drawer-name {
  grid-area: name;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.15;
  color: var(--text);
  overflow-wrap: break-word;   /* wraps under user text spacing (WCAG 1.4.12) rather than clipping */
}
.drawer-years {
  grid-area: years;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* "Your sample life began here": a small lamp in the age's own colour,
   set into the drawer front beside the pull. */
.drawer-yours {
  grid-area: yours;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
}
.drawer-yours > [aria-hidden] { display: none; }
.drawer-yours::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--era);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, 0.2), 0 0 12px var(--era);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--era) 25%, transparent), 0 0 12px var(--era);
}
.drawer-pull {
  grid-area: pull;
  width: 24px;
  height: 7px;
  border-radius: 3.5px;
  background: linear-gradient(180deg, #E8DCC0, var(--era-metal) 45%, #3A2F22);
  background: linear-gradient(180deg, color-mix(in srgb, var(--era-metal) 55%, #fff), var(--era-metal) 45%, color-mix(in srgb, var(--era-metal) 45%, #000));
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.35);
  transition: transform .25s var(--ease-out);
}
.drawer[open] .drawer-pull { transform: translateY(1px) scaleX(1.06); }

/* The contents: a felt tray foreshortened in 3D with the artifact lying in
   it, then the label panel in plain text. */
.drawer-body {
  display: grid;
  grid-template-columns: minmax(0, 45fr) minmax(0, 55fr);
  grid-template-areas: "tray case" "text text";
  column-gap: 14px;
  align-items: start;
  padding: 14px 14px 20px;
  perspective: 900px;
  perspective-origin: 23% -60px;
}
.drawer-tray {
  grid-area: tray;
  position: relative;
  height: 120px;
  margin: 2px 0 -22px;
  transform-origin: 50% 0;
  transform: rotateX(48deg);   /* tilted enough to lie in the drawer, open enough to show what is in it */
  border-radius: 3px;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 0.05), transparent 70%),
    #16121A;
  background:
    radial-gradient(70% 60% at 50% 45%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--atmo0) 70%, #1a161d), color-mix(in srgb, var(--atmo2) 80%, #120f15));
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.7),
    inset 0 0 0 6px #1B171F,
    inset 0 0 0 7px rgba(201, 162, 75, 0.14),
    inset 0 18px 26px rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
}
.mark {
  width: 90%;
  height: auto;
  aspect-ratio: 120 / 48;
  overflow: visible;
  color: var(--era-ink);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6));
}
.drawer-case { grid-area: case; font-size: 12px; line-height: 1.55; color: var(--muted); }
.drawer-text { grid-area: text; }
.drawer-case-label,
.drawer-facts dt {
  display: block;
  margin-bottom: 3px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.drawer-case-label { color: var(--gold); }
.drawer-facts dt { color: var(--era-ink); }
.drawer-tag {
  margin-top: 14px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 21px;
  line-height: 1.22;
  color: var(--text);
  text-wrap: balance;
}
.drawer-facts { display: grid; gap: 10px; margin-top: 12px; }
.drawer-facts dd { font-size: 13.5px; line-height: 1.55; color: var(--text); }
/* Several coins read as a short list: an inline ' · ' run always left a
   separator hanging at the end or start of some line. */
.coins { list-style: none; margin: 0; padding: 0; }
.drawer-facts q {
  font-family: var(--display);
  font-style: italic;
  font-size: 16.5px;
  line-height: 1.35;
  quotes: "\201C" "\201D";
}

/* Motion off: drawer fronts stay flush (the tray's static tilt stays). */
html[data-motion="off"] .drawer > summary { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .drawer > summary { transform: none; }
}

@supports (interpolate-size: allow-keywords) {
  .cabinet { interpolate-size: allow-keywords; }
  .drawer::details-content {
    height: 0;
    overflow: clip;
    transition: height .45s var(--ease-out), content-visibility .45s allow-discrete;
  }
  .drawer[open]::details-content { height: auto; }
}

@media (min-width: 760px) {
  .drawer > summary {
    grid-template-columns: 40px minmax(0, 1fr) auto 18px 30px;
    grid-template-areas: "no name years yours pull";
    column-gap: 14px;
    padding-inline: 16px 18px;
  }
  .drawer-no { font-size: 20px; }
  .drawer-name { font-size: 21px; }
  .drawer-years { font-size: 12px; }
  .drawer-body {
    grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
    grid-template-areas: "tray text" "case text";
    grid-template-rows: auto 1fr;
    column-gap: 30px;
    padding: 18px 22px 26px;
    perspective-origin: 21% -60px;
  }
  .drawer-tray { margin: 6px 4px -18px; }
  .drawer-case { margin-top: 12px; font-size: 12.5px; }
  .drawer-tag { margin-top: 4px; }
}
@media (min-width: 960px) {
  .ages-grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    column-gap: clamp(40px, 6vw, 88px);
    align-items: start;
  }
  .ages-head { position: sticky; top: 12vh; padding-top: 20px; }
  .ages-head h2 { font-size: clamp(38px, 3.7vw, 54px); }
  .cabinet { margin-top: 0; }
}

/* ═══ S5 · Screens rail ═════════════════════════════════════════════ */
.screens { text-align: center; overflow-x: clip; }
.screens-head h2 { font-size: clamp(33px, 5.6vw, 56px); }
.rail {
  list-style: none;
  display: flex;
  gap: clamp(14px, 3vw, 30px);
  margin-top: 16px;
  padding: 16px calc(50% - min(36vw, 160px)) 8px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rail::-webkit-scrollbar { display: none; }
/* The strip itself is taller than a short phone and its edges are masked,
   so a ring round it could vanish entirely: the phones wear it instead,
   inside the unmasked band, where the one in view always shows it. */
.rail:focus-visible { outline: none; }
.rail:focus-visible .phone { outline: 2px solid var(--gold-lit); outline-offset: 4px; }
.rail-item {
  flex: 0 0 min(72vw, 320px);
  scroll-snap-align: center;
  perspective: 1100px;
}
.rail-item figure { margin: 0; }
.phone {
  position: relative;
  padding: 7px;
  border-radius: 30px;
  background: linear-gradient(150deg, #2B2631, #0E0C11 38%, #0B0A0D 70%, #1D1A21);
  box-shadow:
    0 0 0 1px rgba(241, 235, 221, 0.1),
    inset 0 0 0 1px rgba(0, 0, 0, 0.8),
    0 40px 70px -34px rgba(0, 0, 0, 0.95);
  transform-style: preserve-3d;
}
/* A back plate a few px behind the glass, so a turned phone shows its edge. */
.phone::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #060508;
  box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.12);
  transform: translateZ(-9px);
}
.phone img { position: relative; display: block; width: 100%; height: auto; border-radius: 23px; }
.rail-item figcaption {
  max-width: 21.35em;
  margin: 14px auto 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
  text-wrap: balance;
}
.rail-item figcaption b {
  display: block;
  margin-bottom: 3px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  color: var(--text);
}
.rail-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 18px;
}
.rail-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(201, 162, 75, 0.34);
  border-radius: 50%;
  background: rgba(201, 162, 75, 0.05);
  color: var(--gold-lit);
  transition: border-color .3s ease, background-color .3s ease, opacity .3s ease;
}
.rail-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .rail-btn:hover { border-color: rgba(201, 162, 75, 0.75); background: rgba(201, 162, 75, 0.12); } }
.rail-btn:active { background: rgba(201, 162, 75, 0.2); }
.rail-btn[aria-disabled="true"] { opacity: .35; }
.rail-count {
  min-width: 2.7em;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 960px) {
  .rail {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

/* ═══ S6 · The house ════════════════════════════════════════════════ */
.house-title h2 {
  font-size: clamp(44px, 9vw, 120px);
  line-height: 1;
  letter-spacing: -0.012em;
  max-width: 6.2em;
}
.house-body { margin-top: 20px; max-width: 26.1em; color: var(--muted); font-size: 15px; line-height: 1.72; }

.thread-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 28px;
}
.house-line {
  display: inline-block;
  padding: 7px 16px 8px;
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(201, 162, 75, 0.12), rgba(201, 162, 75, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--gold-lit);
}
.house-cap { font-size: 12px; line-height: 1.5; color: var(--faint); font-style: italic; }

/* The line of the house, drawn through the nine ages' colours in order,
   unbroken: each age begins the year after the last one ends. */
.thread {
  list-style: none;
  position: relative;
  display: grid;
  gap: 18px;
  margin-top: 22px;
  padding-left: 38px;
  view-timeline: --thread block;
}
.thread::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 1px;
  background: linear-gradient(180deg, #C57A3C 0%, #C9A227 12.5%, #9C5C99 25%, #7C97AE 37.5%, #2C8073 50%, #B5894B 62.5%, #2EA0A0 75%, #C07A33 87.5%, #34C3D6 100%);
  transform-origin: 50% 0;
}
@media (min-width: 600px) and (max-width: 959px) { .thread { max-width: 600px; } }
.thread > li { position: relative; }
.thread > li::before {
  content: "";
  position: absolute;
  left: -34px;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--node, var(--gold));
  background: var(--bg);
  box-shadow: 0 0 0 3px var(--bg), 0 0 12px -2px var(--node, var(--gold));
}
.thread > li:nth-child(1) { --node: #C57A3C; }
.thread > li:nth-child(2) { --node: #9C5C99; }
.thread > li:nth-child(3) { --node: #2C8073; }
.thread > li:nth-child(4) { --node: #B5894B; }
.thread > li:nth-child(5) { --node: #C07A33; }
.thread > li:nth-child(6) { --node: #34C3D6; }
.thread h3 { font-size: 21px; line-height: 1.25; }
.thread p { margin-top: 4px; color: var(--muted); font-size: 14px; line-height: 1.6; }

@media (min-width: 960px) {
  .house-head {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    column-gap: 56px;
    align-items: end;
  }
  .house-body { margin-top: 0; padding-bottom: 12px; }
  .thread-head { margin-top: 64px; }
  .thread {
    --tg: clamp(32px, 4vw, 64px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--tg);
    row-gap: 44px;
    margin-top: 34px;
    padding-left: 0;
  }
  /* The first row's nodes sit on their own ages: Stone at the first column's
     node (5px in), Rome at the second's (W/3 + gap/3 + 5px), the Renaissance
     at the third's (2W/3 + 2 gap/3 + 5px), with Bronze and the Middle Ages
     halfway between. The four later ages share the rest of the line in equal
     steps, with the Industrial Age straight after the Renaissance. */
  .thread::before {
    left: 0;
    right: 0;
    top: 4px;
    bottom: auto;
    width: auto;
    height: 2px;
    background:
      linear-gradient(90deg, #C57A3C 5px, #C9A227 calc(16.667% + var(--tg) / 6 + 5px), #9C5C99 calc(33.333% + var(--tg) / 3 + 5px),
        #7C97AE calc(50% + var(--tg) / 2 + 5px), #2C8073 calc(66.667% + var(--tg) * 2 / 3 + 5px),
        #B5894B calc(75% + var(--tg) / 2 + 3.75px), #2EA0A0 calc(83.333% + var(--tg) / 3 + 2.5px),
        #C07A33 calc(91.667% + var(--tg) / 6 + 1.25px), #34C3D6 100%);
    transform-origin: 0 50%;
  }
  .thread > li { padding-top: 34px; }
  .thread > li::before { left: 0; top: 0; }
  /* The second row hangs from a quieter hairline of its own. */
  .thread > li:nth-child(n+4)::after {
    content: "";
    position: absolute;
    left: 18px;
    right: -24px;
    top: 4.5px;
    height: 1px;
    background: linear-gradient(90deg, var(--hairline), transparent);
  }
}

/* ═══ S7 · Closing: the line-up ═════════════════════════════════════ */
.closing { text-align: center; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(50% 30% at 50% 22%, rgba(201, 162, 75, 0.07), transparent 70%),
    radial-gradient(70% 50% at 50% 70%, rgba(201, 162, 75, 0.06), transparent 72%);
}
.lineup-wrap {
  --s: 1;
  --fig-lap: 2px;          /* how much neighbouring figures overlap */
  position: relative;
  margin-inline: calc(-1 * var(--gutter));
}
.lineup {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  row-gap: 6px;
}
.fig {
  position: relative;
  flex: none;
  width: calc(40px * var(--s));
  height: calc(100px * var(--s));
  margin-inline: calc(var(--fig-lap) / -2);
}
.fig::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: calc(-4px * var(--s));
  width: calc(44px * var(--s));
  height: calc(11px * var(--s));
  translate: -50% 0;
  background: radial-gradient(closest-side, rgba(201, 162, 75, 0.35), transparent);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--era) 60%, transparent), transparent);
}
.fig::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url(../img/figures.png?v=6) calc(var(--fig-col) * -40px * var(--s)) calc(var(--fig-row) * -100px * var(--s)) / calc(360px * var(--s)) calc(600px * var(--s)) no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(0 0 1px rgba(241, 235, 221, 0.35));
}
/* No. 10: an empty plinth under a lamp. */
.fig--empty { flex-basis: 100%; height: calc(42px * var(--s)); margin-top: 2px; }
/* A bare plinth, drawn as the 3D line-up draws its nine (same 36-cell
   drum, the same ~7 degree view, a bevelled brass top, a dark drum and a
   band, here in the house gold), so it reads as the tenth object in the
   same case. 36 x 9 cells; the top face is centred 2.15 cells down. */
.fig--empty::before {
  inset: auto auto 0 50%;
  width: calc(36px * var(--s));
  height: calc(9px * var(--s));
  translate: -50% 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 9'%3E%3Cpath d='M0 2.15v4.7a18 2.15 0 0 0 36 0v-4.7z' fill='%230E0C12'/%3E%3Cpath d='M0 3.6v.8a18 2.15 0 0 0 36 0v-.8a18 2.15 0 0 1-36 0z' fill='%23C9A24B' fill-opacity='.55'/%3E%3Cpath d='M0 2.15v1.2a18 2.15 0 0 0 36 0v-1.2z' fill='%23A07A2E'/%3E%3Cellipse cx='18' cy='2.15' rx='17.7' ry='2.1' fill='%23C19D46'/%3E%3Cellipse cx='18' cy='2.15' rx='17.5' ry='2' fill='none' stroke='%23DDBB5A' stroke-width='.3'/%3E%3C/svg%3E") 50% 100% / 100% 100% no-repeat;
  filter: drop-shadow(0 0 calc(5px * var(--s)) rgba(224, 190, 92, 0.22));
}
/* The lamp: a soft pool of light rising off the empty top, no hard cone. */
.fig--empty::after {
  bottom: calc(6.85px * var(--s));
  width: calc(40px * var(--s));
  height: calc(100% - 6.85px * var(--s));
  background: radial-gradient(50% 100% at 50% 100%, rgba(224, 190, 92, 0.16), transparent 72%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
}
/* Stretch host for the 3D line-up: centred over the nine figures (not the
   tenth plinth), so the voxel row lands where the sprite row stands. Its
   frame, in cells of --s px, must match lineup.js (FRAME_TOP, FRAME_H):
   from 104 cells above the feet line to 10 below it (heads, plinth fronts),
   and 4 cells past the outer figures' frames at each side. */
.lineup-stage {
  position: absolute;
  top: calc(-4px * var(--s));
  left: 50%;
  width: calc(9 * (40px * var(--s) - var(--fig-lap)) + 8px * var(--s));
  height: calc(114px * var(--s));
  translate: -50% 0;
  pointer-events: none;
}
/* The vitrine sets data-gl="on" here while its canvas stands in for the
   sprites, and drops it the moment the context is lost or torn down. */
.lineup-wrap[data-gl="on"] .fig:not(.fig--empty) { visibility: hidden; }
.case-canvas.is-lineup { cursor: auto; pointer-events: none; }
.plinth-cap {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.08em;
  color: var(--faint);
}
.plinth-no { font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.plinth-draw { font-style: italic; }

.epigraph {
  margin-top: 30px;
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(19px, 2.4vw, 25px);
  line-height: 1.45;
  color: var(--muted);
  text-wrap: balance;
}
.closing h2 {
  max-width: 7.15em;
  margin: 14px auto 0;
  font-size: clamp(38px, 6.4vw, 80px);
  line-height: 1.04;
}
.closing .rule { margin-top: 26px; }
#get-ctas { margin-top: 30px; }
.visitor {
  max-width: 26.1em;
  margin: 18px auto 0;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-wrap: balance;
}
/* One line on desktop; below that each group takes its own line, so no
   line ever starts or ends on a separator. */
.visitor .grp { white-space: nowrap; }
@media (max-width: 959px) {
  .visitor .grp { display: block; }
  .visitor .sep-brk { display: none; }
}
/* Very narrow phones: the nine stand closer (the painted figures are far
   narrower than their 40-cell frames), so the row still fits on one line. */
@media (max-width: 359px) {
  .lineup-wrap { --fig-lap: 6px; }
}
/* Tablets: the row fits at the desktop scale; No. 10 still stands beneath. */
@media (min-width: 720px) {
  .lineup-wrap { --s: 2; }
}
@media (min-width: 960px) {
  .lineup-wrap { --s: 2; margin-inline: 0; }
  .lineup { flex-wrap: nowrap; }
  .fig--empty { flex-basis: auto; height: calc(100px * var(--s)); margin: 0 0 0 calc(10px * var(--s)); }
  /* Beside the nine 3D plinths, whose tops are at the feet line, No. 10
     sinks to the same baseline (sprites stand on the floor, so it does too). */
  .lineup-wrap[data-gl="on"] .fig--empty { translate: 0 calc(6.85px * var(--s)); }
  .lineup-stage { translate: calc(-50% - 25px * var(--s)) 0; }
  .plinth-cap {
    width: calc(9 * (40px * var(--s) - var(--fig-lap)) + 50px * var(--s));
    margin: 12px auto 0;
    text-align: right;
  }
  .plinth-no { display: block; }
  .plinth-sep { display: none; }
  .closing h2 { max-width: 9.55em; }
  .visitor { max-width: none; }
}

/* ═══ Scroll-driven flourishes (only where the browser has them; the
   motion-off rules in base.css switch every animation off) ═════════ */
@supports (animation-timeline: view()) {
  .rail .phone {
    animation: flow linear both;
    animation-timeline: view(inline);
  }
  /* A turned phone pivots on its inner edge, like a real coverflow, so on a
     phone the next one keeps a visible peek instead of swinging off-screen.
     (Only transform and opacity animate: the pivot lives in the transform.) */
  @keyframes flow {
    0%   { transform: translateX(-50%) rotateY(34deg) scale(.86) translateX(50%); opacity: .55; }
    50%  { transform: none; opacity: 1; }
    100% { transform: translateX(50%) rotateY(-34deg) scale(.86) translateX(-50%); opacity: .55; }
  }
  .thread::before {
    animation: thread-draw-y linear both;
    animation-timeline: --thread;
    animation-range: entry 10% cover 60%;
  }
  @keyframes thread-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @media (min-width: 960px) {
    .thread::before { animation-name: thread-draw-x; }
    @keyframes thread-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  }
  /* Measured on each figure's own entry (its height, 100 or 200px), not on
     the viewport: the last one is up 40% of a figure after the row is fully
     in view, so the row always finishes, however tall the screen and however
     little page is left below it. */
  .lineup .fig:not(.fig--empty) {
    animation: fig-rise linear both;
    animation-timeline: view();
    animation-range: entry calc(var(--fig-col) * 10%) entry calc(60% + var(--fig-col) * 10%);
  }
  @keyframes fig-rise { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
}

/* ═══ E8 · Store bar ════════════════════════════════════════════════
   site.js unhides it and toggles data-show (plus inert while hidden). */
.storebar {
  position: fixed;
  z-index: 50;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(60px + env(safe-area-inset-bottom));
  padding: 8px max(16px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  border-top: 1px solid rgba(201, 162, 75, 0.22);
  background: rgba(18, 16, 19, 0.96);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.storebar[data-show]:not([data-show="false"]) { transform: none; }
.storebar-text { display: grid; min-width: 0; line-height: 1.25; }
.storebar-mark {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text);
}
.storebar-sep { display: none; }
.storebar-sub { font-size: 10.5px; letter-spacing: 0.01em; color: var(--muted); white-space: nowrap; }
@media (max-width: 420px) {
  .storebar { gap: 10px; padding-inline: 12px; }
  .storebar .cta { padding-inline: 9px; letter-spacing: 0.06em; }
}
/* The bar runs full width until the centred column leaves room beside it
   for the corner panel. The column (--measure 1180, 64px gutters) ends at
   50% + 526px and the panel (151px wide, 16px in) starts 167px from the
   right, so the panel clears the column by 16px or more only from about
   1417px up. Below that (tablets, and laptops at 960-1419) it would stand
   over the log card, the cabinet's pulls and the lines being read, so
   those widths get the phones' bar along the bottom edge instead. */
@media (max-width: 1419px) {
  /* The bar grows by the home-indicator inset, so the room kept for it does too. */
  html { scroll-padding-bottom: 76px; scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 959px) {
  html.js body { padding-bottom: 76px; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* The bar is always down while the footer shows, so the page ends a line
     below the copyright: the footer takes back the room kept for the bar. */
  html.js .foot {
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    margin-bottom: calc(-76px - env(safe-area-inset-bottom));
  }
}
/* From 600px the bar's text and buttons line up with the column's edges,
   which on a laptop are centred inside --measure. */
@media (min-width: 600px) and (max-width: 1419px) {
  .storebar {
    padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right));
    padding-inline:
      calc(max(0px, (100% - var(--measure)) / 2) + max(var(--gutter), env(safe-area-inset-left)))
      calc(max(0px, (100% - var(--measure)) / 2) + max(var(--gutter), env(safe-area-inset-right)));
  }
}
@media (max-width: 359px) {
  .storebar-sub { display: none; }
}
/* Wide desktop: a narrow standing panel in the corner (about 151×167), the
   buttons stacked, in the margin the centred column leaves free. */
@media (min-width: 1420px) {
  /* Scripted reveals (the log's Live on button, its moment) stop above the panel. */
  html { scroll-padding-bottom: 196px; }
  .storebar {
    left: auto;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    border: 1px solid rgba(201, 162, 75, 0.24);
    border-radius: 4px;
    background: rgba(22, 19, 26, 0.96);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: translateY(calc(100% + 40px));
  }
  .storebar-text { display: grid; text-align: center; padding-top: 2px; }
  .storebar-mark { font-size: 15px; }
  .storebar-sub { font-size: 11.5px; }
  .storebar .cta-row--compact { flex-direction: column; }
}
/* Very short views (a phone on its side, a page zoomed to 200-400%): the
   fixed bar would cover a sixth to a third of the reading area, so it stays
   away there; the stores in the hero, the log's end and the closing remain.
   It is set by the viewport alone, so nothing shifts while scrolling. */
@media (max-height: 420px) {
  .storebar { display: none; }
  html { scroll-padding-bottom: 0; }
  html.js body { padding-bottom: 0; }
  html.js .foot { margin-bottom: 0; }
}

/* ═══ Forced colours (Windows High Contrast) ═════════════════════════
   Box shadows and background images are dropped there, so the parts that
   rely on them get a system-coloured edge instead. */
@media (forced-colors: active) {
  .log-btn { border: 1px solid ButtonText; }
  .log-btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  .drawer-yours::before { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}

/* The house row reserves two lines (min-height above): the house on one,
   the portrait age on the next, so no line starts on a separator. */
.label-house .grp { display: block; }
.label-house .sep-brk { display: none; }