/* ==========================================================================
   The Steward's Progress — Three Sheaves Press
   Visual system: the City of Toil's own graphic language.
   Iron ground, enamel plates, stencil signage, oxide signal.
   Paper and wax appear only where the story's other kingdom intrudes.
   ========================================================================== */

@import url("../fonts/fonts.css");

/* --- Tokens ------------------------------------------------------------- */
:root {
  /* Ground: rolled iron, foundry smoke */
  --iron-900: #100E0B;
  --iron-850: #16130F;
  --iron-800: #1C1913;
  --iron-700: #262118;
  --iron-600: #332C21;

  /* Edges */
  --rule: #3B3327;
  --rule-lit: #564B39;

  /* A rivet head is a lit dome with a hard seated rim. Drawn as an explicit
     disc that cuts off inside its 10px cell — a farthest-corner gradient
     overflows the cell and reads as a smudge rather than a fastener. */
  --rivet-body: radial-gradient(circle 4.6px at 50% 50%,
    #857349 0%, #5C5039 50%, #2A2419 76%, #070604 91%, rgba(7, 6, 4, 0) 96%);
  --rivet-hi: radial-gradient(circle 2.4px at 34% 30%,
    rgba(238, 228, 203, .98) 0%, rgba(190, 172, 133, .45) 52%, rgba(190, 172, 133, 0) 100%);

  /* Enamel lettering on iron */
  --enamel: #EFE7D6;
  --enamel-2: #C4B9A3;
  --enamel-3: #8D8371;

  /* Signal — the hot end of the foundry, and the wax */
  --oxide: #C64A26;
  --oxide-hi: #E2652F;
  --wax: #8A211A;
  --wax-hi: #A62B21;

  /* Wheat brass — the crest metal */
  --brass: #C89A50;
  --brass-dim: #8E6E39;

  /* Paper — the letter, the deed, the book */
  --paper: #F3ECDC;
  --paper-2: #E7DDC7;
  --paper-ink: #221D16;
  --paper-ink-2: #554B3B;

  --display: "Big Shoulders Display", "Haettenschweiler", "Arial Narrow", sans-serif;
  --label: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --prose: "Literata", Georgia, "Times New Roman", serif;

  --shell: 76rem;
  --gut: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.2, .7, .3, 1);
}

/* Grain — foundry dust over everything, one shared layer */
:root {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--iron-900);
  color: var(--enamel-2);
  font-family: var(--prose);
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.7;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Global grain + a slow vertical smoke wash */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--grain);
  opacity: .16;
  mix-blend-mode: overlay;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--enamel); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: var(--oxide-hi); }

:focus-visible {
  outline: 2px solid var(--oxide-hi);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--oxide); color: #fff; padding: .75rem 1.25rem;
  font-family: var(--label); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

/* --- Shared primitives -------------------------------------------------- */
.shell { width: min(100% - (var(--gut) * 2), var(--shell)); margin-inline: auto; position: relative; z-index: 1; }
.shell--wide { width: min(100% - (var(--gut) * 2), 90rem); }

/* Stencil display lettering — the signage voice */
.stencil {
  font-family: var(--display);
  font-weight: 800;
  line-height: .88;
  letter-spacing: .005em;
  text-transform: uppercase;
  color: var(--enamel);
  margin: 0;
}

/* Small tracked plant-label: the tag riveted to every machine */
.tag {
  font-family: var(--label);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.tag--oxide { color: var(--oxide-hi); }
.tag--brass { color: var(--brass); }

/* A hairline rule with a tick, as on a gauge face */
.rule {
  border: 0; height: 1px; background: var(--rule); margin: 0;
}

/* The enamel plate — the system's load-bearing panel */
.plate {
  position: relative;
  background:
    linear-gradient(178deg, rgba(255,255,255,.035), rgba(0,0,0,.22)),
    var(--iron-800);
  border: 1px solid var(--rule);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, .05),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 1px 0 rgba(0,0,0,.4);
}
/* Rivets at the plate corners */
.plate--riveted::before,
.plate--riveted::after {
  content: "";
  position: absolute; top: .55rem; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6B5F4B, #241F17 70%);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.plate--riveted::before { left: .55rem; }
.plate--riveted::after { right: .55rem; }

/* Paper: the other kingdom. Used sparingly and always as an object. */
.sheet {
  background:
    linear-gradient(175deg, #F7F1E3, var(--paper) 40%, var(--paper-2));
  color: var(--paper-ink);
  font-family: var(--prose);
  box-shadow:
    0 1px 1px rgba(0,0,0,.5),
    0 18px 40px -12px rgba(0,0,0,.75),
    0 40px 90px -30px rgba(0,0,0,.6);
  position: relative;
}
.sheet::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grain);
  opacity: .30;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sheet > * { position: relative; z-index: 1; }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--label);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.6rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--signal {
  background: var(--oxide);
  color: #fff;
  border-color: #D9683F;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 20px -8px rgba(198,74,38,.8);
}
.btn--signal:hover { background: var(--oxide-hi); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--enamel);
  border-color: var(--rule-lit);
}
.btn--ghost:hover { border-color: var(--enamel-3); background: rgba(239,231,214,.05); color: var(--enamel); }

.btn__arrow { font-size: 1.1em; line-height: 1; transition: transform .18s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --- Gate rail (nav) ---------------------------------------------------- */
.rail {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 14, 11, .86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.rail__in {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding-block: .85rem;
}
.rail__mark { display: flex; align-items: center; gap: .75rem; text-decoration: none; flex-shrink: 0; }
.rail__mark img { width: 132px; height: auto; color: var(--enamel); }
.rail__mark .tag { display: none; }
@media (min-width: 60rem) { .rail__mark .tag { display: block; } }

.rail__nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.rail__nav a {
  font-family: var(--label); font-size: .75rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--enamel-2); text-decoration: none;
  white-space: nowrap;
  padding-block: .35rem;
  border-bottom: 1px solid transparent;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
/* Narrow phones: tighten the rail so three labels sit on one line */
@media (max-width: 26rem) {
  .rail__mark img { width: 104px; }
  .rail__nav { gap: .85rem; }
  .rail__nav a { font-size: .6875rem; letter-spacing: .1em; }
}
.rail__nav a:hover, .rail__nav a[aria-current="page"] { color: var(--enamel); border-bottom-color: var(--oxide); }
.rail__nav a.is-hideable { display: none; }
@media (min-width: 48rem) { .rail__nav a.is-hideable { display: inline-block; } }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7rem);
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
/* Foundry smoke: a slow radial haze rising from the lower left */
.hero::before {
  content: "";
  position: absolute; inset: -20% -10% auto -30%; height: 130%;
  background:
    radial-gradient(60% 50% at 20% 85%, rgba(198,74,38,.16), transparent 70%),
    radial-gradient(70% 60% at 75% 10%, rgba(200,154,80,.09), transparent 72%);
  pointer-events: none;
}
.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
}

.hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.hero__eyebrow .tag { line-height: 1.5; }
.hero__dot { width: 3px; height: 3px; background: var(--oxide); border-radius: 50%; flex-shrink: 0; }

/* The deed: four words, four ruled lines, as it appears on the page */
.deed {
  display: block;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: inherit;   /* h1 default weight must not reach .deed__w */
  font-size: 1rem;        /* h1 default size must not scale the rows */

  /* The row's fixed furniture, named so the size cap on .deed__w can subtract it. */
  --deed-num: 2.25rem;
  --deed-gap: clamp(.75rem, 2vw, 1.25rem);
  /* Width of "YOURS TO MANAGE." — the longest of the four lines — per 1px of
     font-size, measured in Big Shoulders Display 800 at this letter-spacing
     (6.682), rounded up for headroom. */
  --deed-widest: 6.8;
}
.deed__row {
  display: flex; align-items: baseline; gap: var(--deed-gap);
  padding-block: clamp(.35rem, 1vw, .6rem);
  border-bottom: 1px solid var(--rule);
  container-type: inline-size;   /* 100cqi below is this row's own width */
}
.deed__row:first-child { border-top: 1px solid var(--rule); }
.deed__n {
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0; width: var(--deed-num);
}
.deed__w {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  /* Cap the size at whatever still fits the longest line on one line. The deed
     sits in a two-column hero above 62rem, so its width does not track the
     viewport and a vw-only size overflows the column on desktop. */
  font-size: min(
    clamp(2rem, 6.4vw, 4.5rem),
    (100cqi - var(--deed-num) - var(--deed-gap)) / var(--deed-widest)
  );
  line-height: .88;
  text-wrap: balance;
  letter-spacing: .004em;
  color: var(--enamel);
}
.deed__row:last-child .deed__w { color: var(--oxide-hi); }
.deed__row:last-child .deed__n { color: var(--oxide); }

.hero__lede {
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.3125rem);
  line-height: 1.62;
  color: var(--enamel-2);
  max-width: 34em;
  margin: 0 0 clamp(1.75rem, 3.5vw, 2.25rem);
}
.hero__lede strong { color: var(--enamel); font-weight: 500; }

.hero__actions { display: flex; flex-wrap: wrap; gap: .875rem; }

/* The letter: paper and wax, tilted, landing in the iron world */
.letter-stack { position: relative; display: flex; justify-content: center; }
.letter {
  width: min(100%, 30rem);
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.75rem, 4vw, 2.75rem) clamp(5.5rem, 11vw, 7.5rem);
  transform: rotate(-1.6deg);
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.letter__head {
  font-family: var(--label); font-size: .625rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  color: #6E6250;
  padding-bottom: .9rem; margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(34,29,22,.22);
}
.letter__body {
  font-family: var(--prose); font-style: italic;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  line-height: 1.72;
  color: var(--paper-ink);
  margin: 0;
}
.letter__body em { font-style: normal; }
.letter__cite {
  font-family: var(--label); font-size: .625rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: #6E6250; margin: 1.75rem 0 0;
}
.letter__seal {
  position: absolute;
  right: clamp(-1.75rem, -2vw, -1rem);
  bottom: clamp(-2rem, -2.5vw, -1.25rem);
  width: clamp(6rem, 13vw, 8.5rem);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.6));
  transform: rotate(7deg);
  pointer-events: none;
}

/* --- Section furniture -------------------------------------------------- */
.band { padding-block: clamp(4rem, 9vw, 7rem); position: relative; }
.band--iron { background: var(--iron-850); border-block: 1px solid var(--rule); }
.band--deep { background: var(--iron-900); }

.head { margin-bottom: clamp(2.25rem, 5vw, 3.5rem); max-width: 48rem; }

.head__title {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.75rem);
  margin-bottom: 1.25rem;
}
.head__sub {
  font-size: clamp(1rem, .96rem + .3vw, 1.1875rem);
  color: var(--enamel-2); line-height: 1.65; margin: 0; max-width: 42em;
}
.head--center { margin-inline: auto; text-align: center; }
.head--center .head__sub { margin-inline: auto; }

/* --- Gauge row (the real numbers) --------------------------------------- */
.gauges {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
}
@media (min-width: 46rem) { .gauges { grid-template-columns: repeat(4, 1fr); } }
.gauge { background: var(--iron-800); padding: clamp(1.25rem, 3vw, 1.9rem); }
.gauge__n {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(2.5rem, 5.5vw, 3.75rem); line-height: .9;
  color: var(--brass); font-variant-numeric: tabular-nums;
  display: block; margin-bottom: .5rem;
}
.gauge__l { font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--enamel-3); }

/* --- The route board ---------------------------------------------------- */
.board { border: 1px solid var(--rule); background: var(--iron-800); }
.board__hdr {
  display: none;
  padding: .7rem clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
  background: var(--iron-700);
}
@media (min-width: 52rem) {
  .board__hdr { display: grid; grid-template-columns: 4.5rem minmax(0,1fr) 6.5rem 9.75rem; gap: 1.25rem; align-items: center; }
}

.leg {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: .35rem 1.25rem;
  padding: clamp(1rem, 2.4vw, 1.35rem) clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background-color .2s var(--ease);
}
.leg:last-child { border-bottom: 0; }
.leg:hover { background: rgba(239,231,214,.028); }
@media (min-width: 52rem) {
  .leg { grid-template-columns: 4.5rem minmax(0,1fr) 6.5rem 9.75rem; align-items: center; gap: 1.25rem; }
}

.leg__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1;
  color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  align-self: start;
}
@media (min-width: 52rem) { .leg__num { grid-row: auto; align-self: center; } }

.leg__body { min-width: 0; }
.leg__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.1875rem, 2.4vw, 1.5rem); line-height: 1.05;
  color: var(--enamel-2); margin: 0 0 .3rem;
  letter-spacing: .01em;
}
.leg__desc { font-size: .9375rem; line-height: 1.55; color: var(--enamel-3); margin: 0; }

.leg__ch {
  font-family: var(--label); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
  grid-column: 2; margin-top: .5rem;
}
@media (min-width: 52rem) { .leg__ch { grid-column: auto; margin-top: 0; } }

.leg__status { grid-column: 2; margin-top: .4rem; }
@media (min-width: 52rem) { .leg__status { grid-column: auto; margin-top: 0; } }

/* The lamp: unlit by default, lit for what is actually published */
.lamp {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--enamel-3);
}
.lamp::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: #423A2C;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6);
  transition: background-color .5s var(--ease), box-shadow .5s var(--ease);
}
.leg--lit .lamp { color: var(--oxide-hi); }
.leg--lit .lamp::before { background: var(--oxide); box-shadow: 0 0 0 1px rgba(198,74,38,.35), 0 0 12px 1px rgba(226,101,47,.75); }
.leg--lit .leg__name { color: var(--enamel); }
.leg--lit .leg__num { color: var(--brass); }
.leg--lit { background: rgba(198,74,38,.045); }

/* Lamps warm up in sequence when the board scrolls into view */
@media (prefers-reduced-motion: no-preference) {
  .board.is-armed .leg--lit .lamp::before { animation: warmup .9s var(--ease) both; }
}
@keyframes warmup {
  from { background: #423A2C; box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); }
  60%  { background: #F0844E; box-shadow: 0 0 0 1px rgba(226,101,47,.5), 0 0 20px 3px rgba(240,132,78,.9); }
  to   { background: var(--oxide); box-shadow: 0 0 0 1px rgba(198,74,38,.35), 0 0 12px 1px rgba(226,101,47,.75); }
}

.board__foot {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  padding: 1.1rem clamp(1rem, 2.5vw, 1.5rem);
  background: var(--iron-700); border-top: 1px solid var(--rule);
}

/* --- Country plates (the full route, one plate per country) -------------- */
.countries { border: 1px solid var(--rule); background: var(--iron-800); }

.country {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: .5rem 1.25rem;
  padding: clamp(1.5rem, 3.2vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  transition: background-color .25s var(--ease);
}
.country:last-of-type { border-bottom: 1px solid var(--rule); }
.country:hover { background: rgba(239,231,214,.028); }
@media (min-width: 56rem) {
  .country {
    grid-template-columns: 4.5rem minmax(0, 1fr) 9.5rem;
    gap: 1.75rem;
    align-items: start;
  }
}

.country__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: .95;
  color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
  padding-top: .1em;
}

.country__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem); line-height: 1.02;
  letter-spacing: .012em;
  color: var(--enamel-2);
  margin: 0 0 .6rem;
}
.country__desc {
  font-size: 1rem; line-height: 1.7; color: var(--enamel-3);
  margin: 0 0 1rem; max-width: 46em;
}
.country__desc em { color: var(--enamel-2); }

/* Waymark chips — the signpost slats under each country */
.country__ways {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .4rem;
}
.way {
  font-family: var(--label); font-size: .625rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--enamel-3);
  padding: .34rem .6rem;
  border: 1px solid var(--rule);
  background: var(--iron-900);
}

.country__side {
  grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: .9rem;
}
@media (min-width: 56rem) {
  .country__side { grid-column: 3; flex-direction: column; align-items: flex-end; text-align: right; margin-top: .25rem; gap: .6rem; }
}
.country__ch {
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--enamel-3);
  font-variant-numeric: tabular-nums;
}

/* The one country actually in press */
.country--lit { background: rgba(198,74,38,.05); }
.country--lit .country__num { color: var(--brass); }
.country--lit .country__name { color: var(--enamel); }
.country--lit .way { border-color: rgba(198,74,38,.35); color: var(--enamel-2); }
.country--lit .lamp { color: var(--oxide-hi); }
.country--lit .lamp::before {
  background: var(--oxide);
  box-shadow: 0 0 0 1px rgba(198,74,38,.35), 0 0 12px 1px rgba(226,101,47,.75);
}
@media (prefers-reduced-motion: no-preference) {
  .countries.is-in .country--lit .lamp::before { animation: warmup .9s .35s var(--ease) both; }
}

/* --- Engraved plate band ------------------------------------------------ */
.engraving {
  position: relative;
  border-block: 1px solid var(--rule);
  background: var(--iron-900);
  overflow: hidden;
}
.engraving img {
  width: 100%; height: clamp(15rem, 34vw, 26rem); object-fit: cover;
  opacity: .82;
}
.engraving::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 55%, rgba(16,14,11,.75) 82%, var(--iron-900));
}
.engraving__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.25rem, 3vw, 2rem) 0;
}

/* --- Excerpt sheet ------------------------------------------------------ */
.excerpt {
  max-width: 42rem; margin-inline: auto;
  padding: clamp(2.25rem, 5.5vw, 4rem) clamp(1.75rem, 5vw, 3.75rem);
}
.excerpt__head {
  text-align: center; padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid rgba(34,29,22,.18);
}
.excerpt__arc {
  font-family: var(--label); font-size: .625rem; font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase; color: #6E6250;
  margin: 0 0 .75rem;
}
.excerpt__title {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.5rem, 4vw, 2.25rem); line-height: 1; color: var(--paper-ink);
  margin: 0; letter-spacing: .01em;
}
.excerpt__body p {
  margin: 0 0 1.35em;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.78;
  color: var(--paper-ink);
}
.excerpt__body p:first-of-type::first-letter {
  float: left; font-size: 3.6em; line-height: .82; padding: .06em .1em 0 0;
  font-weight: 500; color: var(--wax);
}
.excerpt__body .speech { color: var(--paper-ink-2); }
.excerpt__body .speech em { color: var(--paper-ink); font-style: normal; font-weight: 500; }
.excerpt__more {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(34,29,22,.18);
}
.excerpt__more .tag { color: #6E6250; }
.link-ink {
  font-family: var(--label); font-size: .75rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wax); text-decoration: none;
  border-bottom: 1px solid rgba(138,33,26,.35); padding-bottom: 2px;
}
.link-ink:hover { color: var(--wax-hi); border-bottom-color: var(--wax-hi); }

/* --- The book object ---------------------------------------------------- */
.volume { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
@media (min-width: 60rem) { .volume { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

.book {
  position: relative;
  width: min(100%, 23rem);
  aspect-ratio: 6 / 9;
  margin-inline: auto;
  background: #0C0A08;
  box-shadow:
    0 2px 3px rgba(0,0,0,.6),
    0 26px 50px -14px rgba(0,0,0,.85),
    0 60px 110px -40px rgba(0,0,0,.7);
  overflow: hidden;
  transform: perspective(1400px) rotateY(-8deg) rotateX(1.5deg);
  transition: transform .6s var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .book:hover { transform: perspective(1400px) rotateY(-3deg) rotateX(.5deg) translateY(-4px); }
}
.book__art { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The spine edge, so it reads as an object and not a picture */
.book__spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 13px;
  background: linear-gradient(to right, rgba(0,0,0,.85), rgba(255,255,255,.09) 55%, rgba(0,0,0,.4));
}

/* --- Feature list (what the volume carries) ----------------------------- */
.spec { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.spec li {
  display: grid; gap: .3rem 1.25rem; padding: clamp(1rem, 2.4vw, 1.35rem) 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 40rem) { .spec li { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } }
.spec__k {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 1.125rem; line-height: 1.15; color: var(--enamel); letter-spacing: .012em;
}
.spec__v { font-size: 1rem; line-height: 1.62; color: var(--enamel-3); margin: 0; }

/* --- Card grid ---------------------------------------------------------- */
.cards { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 44rem) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56rem) { .cards--3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--iron-800);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  display: flex; flex-direction: column; gap: .75rem;
}
.card__n {
  font-family: var(--display); font-weight: 700; font-size: 1.375rem;
  color: var(--brass-dim); font-variant-numeric: tabular-nums; line-height: 1;
}
.card__t {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.05; color: var(--enamel);
  margin: 0; letter-spacing: .012em;
}
.card__d { font-size: 1rem; line-height: 1.62; color: var(--enamel-3); margin: 0; }

/* --- The weekly rhythm bar ---------------------------------------------- */
.rhythm { display: flex; flex-wrap: wrap; border: 1px solid var(--rule); background: var(--iron-800); }
.rhythm__seg {
  flex: 1 1 auto; min-width: 8rem;
  padding: clamp(1rem, 2.4vw, 1.35rem);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rhythm__seg:last-child { border-right: 0; }
.rhythm__m {
  font-family: var(--display); font-weight: 700; font-size: 1.75rem; line-height: 1;
  color: var(--brass); font-variant-numeric: tabular-nums; display: block; margin-bottom: .4rem;
}
.rhythm__m sup { font-size: .5em; font-weight: 600; color: var(--enamel-3); margin-left: .15em; }
.rhythm__n { font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--enamel-2); }

/* --- Notice (honest placeholders) --------------------------------------- */
.notice {
  display: flex; gap: .9rem; align-items: flex-start;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--rule-lit);
  background: rgba(200,154,80,.05);
}
.notice__i { color: var(--brass); font-family: var(--label); font-size: .75rem; font-weight: 700; letter-spacing: .1em; flex-shrink: 0; padding-top: .1rem; }
.notice p { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--enamel-3); }

/* --- Signup ------------------------------------------------------------- */
.signup { position: relative; }
.signup__grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 58rem) { .signup__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.form { display: flex; flex-direction: column; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field label {
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--enamel-3);
}
.field input {
  font-family: var(--prose); font-size: 1rem;
  padding: .95rem 1.1rem;
  background: var(--iron-900);
  border: 1px solid var(--rule-lit);
  color: var(--enamel);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.field input::placeholder { color: #8D8371; }
.field input:focus { border-color: var(--oxide); background: #0B0907; outline: none; box-shadow: 0 0 0 3px rgba(198,74,38,.18); }
.form__note { font-size: .8125rem; line-height: 1.6; color: var(--enamel-3); margin: 0; }

.form__status {
  font-family: var(--label); font-size: .8125rem; line-height: 1.6; font-weight: 500;
  padding: .85rem 1.1rem; border-left: 1px solid var(--rule-lit);
  background: rgba(200,154,80,.07); color: var(--enamel-2); margin: 0;
}
.form__status[hidden] { display: none; }
.form__status--ok { border-left-color: var(--oxide); background: rgba(198,74,38,.09); }

/* Honeypot */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Footer ------------------------------------------------------------- */
.foot { border-top: 1px solid var(--rule); background: var(--iron-900); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.foot__grid { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .foot__grid { grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, .9fr)); } }
.foot__mark { display: flex; align-items: flex-start; gap: 1.1rem; }
.foot__mark img { width: 54px; height: auto; color: var(--enamel-3); flex-shrink: 0; }
.foot h3 { font-family: var(--label); font-size: .6875rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--enamel-3); margin: 0 0 1rem; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.foot a { font-size: .9375rem; color: var(--enamel-2); text-decoration: none; }
.foot a:hover { color: var(--oxide-hi); }
.foot__base {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule);
}
.foot__imprint { font-family: var(--display); font-weight: 700; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .06em; color: var(--enamel-2); margin: 0 0 .35rem; }

/* --- Reading pages (read.html) ------------------------------------------ */
.reader { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem); }
.reader__sheet { max-width: 44rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.75rem, 5.5vw, 4rem); }
.reader__sheet + .reader__sheet { margin-top: clamp(2.5rem, 6vw, 4rem); }
.reader__body p { margin: 0 0 1.35em; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 1.8; color: var(--paper-ink); }
.reader__body p.speech { color: var(--paper-ink-2); padding-left: 1.25rem; border-left: 1px solid rgba(34,29,22,.28); }
.reader__body p.speech em { font-style: normal; font-weight: 600; color: var(--paper-ink); }
.reader__body p.deedline {
  font-style: italic; font-size: 1.4em; text-align: center; margin: .3em 0; color: var(--wax);
}
/* Direct children only — a nested <p> (the letter blockquote) is :first-of-type
   within its own parent and would otherwise take a second drop cap. */
.reader__body > p:first-of-type::first-letter {
  float: left; font-size: 3.6em; line-height: .82; padding: .06em .1em 0 0; font-weight: 500; color: var(--wax);
}
/* The summoning letter, quoted inside the reading page */
.reader__body .missive {
  margin: 1.8em 0; padding: 1.1em 1.4em;
  border-top: 1px solid rgba(34,29,22,.22);
  border-bottom: 1px solid rgba(34,29,22,.22);
  font-style: italic; color: var(--paper-ink);
}
.reader__body .missive p { margin: 0; font-size: 1.05em; }

/* Between two published chapters: what the sample skips, stated plainly */
.reader__gap {
  max-width: 44rem; margin: clamp(2.5rem, 6vw, 4rem) auto;
  display: flex; align-items: center; gap: 1.25rem;
  font-family: var(--label); font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--enamel-3);
}
.reader__gap::before, .reader__gap::after {
  content: ""; flex: 1; height: 1px; background: var(--rule);
}

.reader__end {
  text-align: center; margin-top: 2.5rem; padding-top: 2rem;
  border-top: 1px solid rgba(34,29,22,.18);
}
.reader__end p { font-family: var(--prose); font-style: italic; color: var(--paper-ink-2); margin: 0 0 1.25rem; font-size: 1rem; }

/* --- Page hero (interior pages) ----------------------------------------- */
.phero {
  padding-block: clamp(3rem, 7vw, 5rem) clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--rule);
  position: relative; overflow: hidden;
}
.phero::before {
  content: ""; position: absolute; inset: auto -20% -60% -20%; height: 120%;
  background: radial-gradient(50% 60% at 30% 100%, rgba(198,74,38,.12), transparent 70%);
  pointer-events: none;
}
.phero__title { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 5rem); margin-bottom: 1.25rem; text-wrap: balance; }
/* Forced line breaks in display titles can overflow a narrow shell; below 40rem
   let the stencil wrap naturally instead. */
@media (max-width: 40rem) {
  .phero__title br,
  .head__title br { display: none; }
}
.phero__sub { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); color: var(--enamel-2); max-width: 40em; margin: 0; line-height: 1.62; }

/* --- Prose blocks on iron ----------------------------------------------- */
.prose p { margin: 0 0 1.25em; color: var(--enamel-2); line-height: 1.72; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--enamel); font-weight: 500; }
.prose em { color: var(--enamel); }
.prose blockquote {
  margin: 2rem 0; padding-left: 1.5rem; border-left: 1px solid var(--rule-lit);
  font-style: italic; color: var(--enamel); font-size: 1.125rem;
}

/* --- Utilities ---------------------------------------------------------- */
.stack-sm > * + * { margin-top: 1rem; }
.stack > * + * { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.center { text-align: center; }
.mt-lg { margin-top: clamp(2.25rem, 5vw, 3.5rem); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Scroll reveal — one orchestrated entrance, never a per-element jiggle */
/* Progressive enhancement: the hidden start state is gated on `.js`, which the
   inline head script sets. If JS never runs, .rise content is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
  .js .rise.is-in { opacity: 1; transform: none; }
}

/* --- Expanded route board (the-road.html) -------------------------------- */
.countries { border: 1px solid var(--rule); background: var(--iron-800); }
.country {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: .5rem 1.25rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  transition: background-color .2s var(--ease);
}
.country:last-of-type { border-bottom: 0; }
.country:hover { background: rgba(239,231,214,.028); }
@media (min-width: 56rem) {
  .country { grid-template-columns: 6rem minmax(0, 1fr) 10.5rem; gap: 1.75rem; }
}
.country__num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.75rem); line-height: 1;
  color: var(--enamel-3); font-variant-numeric: tabular-nums;
  grid-row: span 2;
}
@media (min-width: 56rem) { .country__num { grid-row: auto; } }
.country__name {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: clamp(1.375rem, 3vw, 1.875rem); line-height: 1.05;
  letter-spacing: .01em; color: var(--enamel); margin: 0 0 .5rem;
}
.country__desc { font-size: .9375rem; line-height: 1.62; color: var(--enamel-2); margin: 0; max-width: 46em; }
.country__ways { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding: 0; list-style: none; }
.way {
  font-family: var(--label); font-size: .625rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--enamel-3);
  border: 1px solid var(--rule-lit);
  padding: .3rem .55rem;
  white-space: nowrap;
}
.country__side { grid-column: 2; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center; margin-top: .75rem; }
@media (min-width: 56rem) {
  .country__side { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: center; margin-top: 0; }
}
.country__ch {
  font-family: var(--label); font-size: .75rem; font-weight: 600;
  letter-spacing: .1em; color: var(--enamel-3); font-variant-numeric: tabular-nums;
}
.country--lit { background: rgba(198,74,38,.045); }
.country--lit .country__num { color: var(--brass); }
.country--lit:hover { background: rgba(198,74,38,.07); }

/* --- Download panel (the free journey) ----------------------------------- */
.dl {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  padding: clamp(1.75rem, 4.5vw, 3rem);
  align-items: center;
}
@media (min-width: 56rem) { .dl { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }
.dl__title {
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem); line-height: 1; letter-spacing: .01em;
  color: var(--enamel); margin: 0 0 1rem;
}
.dl__meta { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin-bottom: 1.25rem; }
.dl__actions { display: flex; flex-direction: column; gap: .9rem; align-items: flex-start; }
@media (min-width: 56rem) { .dl__actions { align-items: center; text-align: center; } }

/* --- Trek steps grid (fourteen days) ------------------------------------- */
.treks { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.trek { background: var(--iron-800); padding: clamp(1rem, 2.5vw, 1.4rem); }
.trek__n {
  font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1;
  color: var(--brass-dim); font-variant-numeric: tabular-nums; display: block; margin-bottom: .45rem;
}
.trek__t { font-family: var(--label); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--enamel-2); line-height: 1.5; }

/* --- 404 ------------------------------------------------------------------ */
.lost { min-height: 60vh; display: grid; place-content: center; text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.lost__num { font-family: var(--display); font-weight: 800; font-size: clamp(5rem, 18vw, 10rem); line-height: .85; color: var(--iron-600); margin: 0 0 1rem; }
.lost .btn { margin-inline: auto; }

/* --- Late corrections (batched from the first inspection round) ---------- */

/* The eyebrow's separator dot only earns its place when both labels sit on one line */
@media (max-width: 40rem) { .hero__dot { display: none; } }

/* Gauges sitting in a half-width column get two across, not four —
   at four the labels break mid-phrase ("VOICES KEPT / APART"). */
@media (min-width: 46rem) {
  .volume .gauges { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Enamel plate material, applied to the panels that carry the page.
   The contract promises "enamel plates with hairline rules and rivets";
   before this, .plate shipped in exactly one place. Every structural panel
   is now bolted hardware rather than a bordered rectangle.
   ========================================================================== */

.board,
.countries,
.gauges,
.rhythm,
.cards,
.dl,
.treks {
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 214, .07),
    inset 0 -1px 0 rgba(0, 0, 0, .55),
    0 2px 0 rgba(0, 0, 0, .35),
    0 14px 34px -22px rgba(0, 0, 0, .9);
}

/* Four rivets to a panel, set in from the corners as a bolted plate would be.
   Drawn on an overlay layer because these panels are hairline grids whose
   opaque cells would otherwise paint straight over a container background. */
.board::after,
.countries::after,
.gauges::after,
.rhythm::after,
.cards::after,
.dl::after,
.treks::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  /* Two layers per rivet — the domed body, then the specular highlight over it.
     Highlight is listed first because earlier layers paint on top. Positions
     are therefore doubled, one pair per corner. */
  /* Four-value edge-offset syntax on EVERY entry. The three-value form
     ("9px bottom 9px") is invalid CSS: one bad entry invalidates the whole
     declaration, every layer silently falls back to 0% 0%, and all four
     rivets stack in the top-left corner. */
  background-position:
    left 9px top 9px, left 9px top 9px,
    right 9px top 9px, right 9px top 9px,
    left 9px bottom 9px, left 9px bottom 9px,
    right 9px bottom 9px, right 9px bottom 9px;
  background-image:
    var(--rivet-hi), var(--rivet-body),
    var(--rivet-hi), var(--rivet-body),
    var(--rivet-hi), var(--rivet-body),
    var(--rivet-hi), var(--rivet-body);
  filter: drop-shadow(0 1px 0 rgba(255, 240, 214, .07));
}

/* Cells must clear the rivet margin so the heads sit on plate, not on type */
.gauge, .card, .rhythm__seg, .trek { padding-top: clamp(1.85rem, 3.5vw, 2.5rem); }
.board__hdr, .board__foot { padding-inline: clamp(1.35rem, 2.5vw, 1.85rem); }
.leg, .country { padding-inline: clamp(1.35rem, 2.5vw, 1.85rem); }

/* The board's stamped header/footer strips */
.board__hdr, .board__foot {
  background-image: linear-gradient(180deg, rgba(255, 240, 214, .05), rgba(0, 0, 0, .3));
}