/* kintsugi-hall — the shell.
   Values come from tokens.css (generated from the signed handoff). This file
   spends them on composition and nothing else: where a number appears here that
   is not a var(), it is a per-room geometry figure from DIRECTION.md's grid
   table, which is composition arithmetic rather than a token.

   Museum plinths are square: radius is 0 everywhere and there is no shadow
   language. Two substrate levels, wall and plinth, told by tone. */

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

html {
  scroll-padding-top: 80px;                 /* clears the sticky banner */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--substrate);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 15px;                          /* caption role */
  line-height: 1.6;
}

/* ---- type roles ------------------------------------------------------- */

h1, h2, h3 { font-weight: var(--weight-regular); margin: 0; text-wrap: balance; }

.display {                                  /* the engraved title plate */
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 1.05;
  letter-spacing: 0;
}

.title-2 {                                  /* room titles */
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.15;
}

.caption { font-size: 15px; line-height: 1.6; max-width: 66ch; }

.register { font-size: 13px; line-height: 1.5; font-variant-numeric: tabular-nums; }

.note { font-size: 12px; line-height: 1.5; }

.note-caps {
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.96px;
  text-transform: uppercase;
}

.overline {                                 /* nav, eyebrows — never a heading */
  font-size: 11px;
  line-height: 1;
  letter-spacing: 1.76px;
  text-transform: uppercase;
}

.num { font-variant-numeric: tabular-nums; }
.quiet { color: var(--secondary-text); }
.amber { color: var(--amber-text); }

/* ---- links ------------------------------------------------------------ */

a { color: inherit; text-underline-offset: 4px; }
a:hover { text-decoration-thickness: 1px; }

a.amber-link {
  color: var(--amber-text);
  text-decoration-color: var(--seam);
}
a.amber-link:hover { text-decoration-thickness: 2px; }

a.seam-link {                               /* the S4 intro variant */
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--seam);
  text-decoration-thickness: 1px;
}

/* One focus treatment sitewide: 2px substrate halo, then 2px seam. The ring is
   measured against every background it lands on — see system/keyboard-walk.md. */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--stroke-focus-ring) var(--substrate),
              0 0 0 calc(var(--stroke-focus-ring) * 2) var(--seam);
}

/* ---- the frame -------------------------------------------------------- */

.hall {
  max-width: 1440px;                        /* margins never grow past this */
  margin-inline: auto;
  padding-inline: var(--space-8);
}

.banner {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--substrate);             /* opaque: it separates by fill + rule */
  border-bottom: var(--stroke-hairline) solid var(--hairline);
}

.banner-in {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-8);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.masthead {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: 1.32px;                   /* 0.06em at 22px */
  text-decoration: none;
  color: var(--ink);
}

.nav { display: flex; align-items: center; gap: var(--space-1-5); }

.nav a {
  color: var(--secondary-text);
  text-decoration: none;
  padding: 15px 10px;                       /* 15+11+15 = 41px >= 40px target */
  transition: color var(--dur-micro-enter) var(--ease-settle);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The skip chip is present in the DOM and clipped, never display:none — it has
   to be the first thing a keyboard reaches. */
.skip {
  position: absolute;
  left: var(--space-8);
  top: var(--space-1);
  z-index: 20;
  background: var(--module);
  color: var(--ink);
  border: var(--stroke-hairline) solid var(--hairline);
  padding: 10px 16px;
  font-size: 13px;
  text-decoration: none;
  clip-path: inset(50%);
}
.skip:focus-visible { clip-path: none; }

main { display: block; }

.room { padding-block: var(--space-12) var(--space-16); }

.footer {
  border-top: var(--stroke-hairline) solid var(--hairline);
  /* 128 sitewide; the 404's index->footer gap is a stated 96 (Gate C
     close, comp 112), so that room overrides it rather than the shell
     bending for one page. */
  margin-top: var(--space-16);
  padding-block: var(--space-6) var(--space-12);
  font-size: 12px;
  line-height: 1.5;
  color: var(--secondary-text);
}
.footer a { color: var(--secondary-text); }
.footer p { max-width: 66ch; margin: 0 0 var(--space-1-5); }

/* ---- the wall (S1) ---------------------------------------------------- */

.wall-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);                      /* the hairline IS the wall showing */
  background: var(--hairline);
  border: var(--stroke-hairline) solid var(--hairline);
}

.cell {
  background: var(--module);
  display: flex;
  flex-direction: column;
  min-height: 292px;
  padding: var(--space-3);
  text-decoration: none;
  color: inherit;
  outline: var(--stroke-hairline) solid transparent;
  transition: outline-color var(--dur-micro-enter) var(--ease-settle);
}
.cell-static { cursor: default; }           /* No 08: drawn, never linked */

.cell .object { flex: 1; display: grid; place-items: center; padding-block: var(--space-3); }
.cell svg { width: 100%; height: auto; max-width: 200px; display: block; }

.plaque {
  border-top: var(--stroke-hairline) solid var(--hairline);
  padding-top: var(--space-1-5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

a.cell:hover { outline-color: var(--mid); }
a.cell:hover .plaque-name { text-decoration: underline; }
/* The seam thickens on hover: 2.5 -> 4px, the module station of the ramp.
   stroke-width is an SVG paint property, not a box-model one — it repaints the
   drawing and reflows nothing. Measured, not assumed: 85.5fps median under 4x
   CPU throttle with all eight objects live (P1, TESTED). */
/* The drawings are authored on a 200-unit viewBox and rendered at three very
   different sizes (24px glyph, 200px module, the exhibit bay). non-scaling-stroke
   makes stroke-width mean RENDERED pixels at every one of them, so each station
   below is the literal number DIRECTION.md states instead of that number divided
   by whatever scale the room happens to use. The spec names this as Loop 4's
   option; taking it. `ln` is the ink class the drawings ship with. */
.ln, .seam { vector-effect: non-scaling-stroke; fill: none; }
.ln { stroke: var(--object-ink); stroke-width: var(--stroke-ink); }
.seam { stroke: var(--seam); transition: stroke-width var(--dur-micro-enter) var(--ease-settle); }

.cell .seam { stroke-width: var(--stroke-seam-module); }        /* 2.5px */
a.cell:hover .seam { stroke-width: var(--stroke-seam-module-hover); }   /* 4px */
.reg-glyph .seam { stroke-width: var(--stroke-seam-glyph); }    /* 1.75px */

/* ---- the register (S2) ------------------------------------------------ */

.register-room { display: grid; grid-template-columns: 336px 840px; gap: var(--space-9); }

.reg { list-style: none; margin: 0; padding: 0; width: 100%; }

.reg-head {
  display: grid;
  grid-template-columns: 56px 264px 64px 284px 140px;   /* sums to 808 inside 16px padding */
  align-items: center;
  height: 40px;
  padding-inline: var(--space-2);
  border-bottom: var(--stroke-hairline) solid var(--ink);
  color: var(--secondary-text);
}

.reg li { border-bottom: var(--stroke-hairline) solid var(--hairline); }

.reg-row {
  display: grid;
  grid-template-columns: 56px 264px 64px 284px 140px;
  align-items: center;
  min-height: 44px;
  padding: var(--space-1) var(--space-2);
  text-decoration: none;
  color: inherit;
  border-left: var(--stroke-ink) solid transparent;
  transition: background-color var(--dur-micro-enter) var(--ease-settle),
              border-left-color var(--dur-micro-enter) var(--ease-settle);
}

/* The one hover grammar for index-style rows sitewide. The fill is `wall`, not
   `plinth`: on plinth the no-licence red measures 4.36:1, under this
   direction's own floor. Fixed at Gate C; wall/red is 4.76. */
a.reg-row:hover { background: var(--substrate); border-left-color: var(--seam); }
a.reg-row:hover .reg-name { text-decoration: underline; }

.reg-glyph { width: 24px; height: 24px; }
.reg-glyph .seam { stroke-width: var(--stroke-seam-glyph); }

.status-runs { color: var(--amber-text); }
.status-other { color: var(--secondary-text); }
.licence-none { color: var(--red); }

/* ---- plinth, plate, stamp --------------------------------------------- */

.plinth-card {
  background: var(--module);
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.5;
}

.plate {
  background: var(--module);
  padding: var(--space-3) var(--space-4);
  font-size: 13px;
  line-height: 1.5;
}
.plate dt { color: var(--secondary-text); }
.plate dd { margin: 0 0 var(--space-1-5); }
.plate .result { color: var(--amber-text); }

/* A rotated paper chit on the plinth is the entire error apparatus — no toast,
   no modal, no second red object. The word carries the state, never the colour. */
.stamp {
  display: inline-block;
  transform: rotate(-1.4deg);
  border: var(--stroke-stamp-border) solid var(--stamp-border-color);
  color: var(--stamp-border-color);
  padding: var(--space-1) var(--space-2-5);
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 2.08px;                   /* 0.16em at 13px */
  text-transform: uppercase;
}

/* ---- controls --------------------------------------------------------- */

.field {
  height: 48px;
  background: var(--substrate);
  color: var(--ink);
  border: var(--stroke-hairline) solid var(--mid);
  border-radius: var(--radius);
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.6px;
  transition: border-color var(--dur-micro-enter) var(--ease-settle);
}
.field:hover { border-color: var(--ink); }
/* 1px border + 1px inset shadow reads as 2px and shifts nothing — TESTED in P3 */
.field[aria-invalid="true"] {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.btn {
  position: relative;
  height: 48px;
  background: var(--ink);
  color: var(--substrate);
  border: 0;
  border-radius: var(--radius);
  padding: 0 var(--space-4);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: 0.6px;
  cursor: pointer;
}
/* the engraved ring: opacity only, never an animated box-shadow */
.btn::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: var(--stroke-hairline) solid var(--substrate);
  opacity: 0;
  transition: opacity var(--dur-micro-enter) var(--ease-settle);
}
.btn:hover::after { opacity: 1; }
.btn:active { transform: translateY(1px); }
.btn[disabled] {
  background: var(--module);
  color: var(--disabled);
  border: var(--stroke-hairline) solid var(--hairline);
  cursor: default;
}

/* ---- motion ----------------------------------------------------------- */

/* Everything below is an ADDITION to a visible default. Motion never gates
   information: with no JS, no observer, or reduced motion, every element here
   is already in its final state. */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-reveal) var(--ease-settle),
                transform var(--dur-reveal) var(--ease-settle);
  }
  .js .reveal.seen { opacity: 1; transform: none; }
}

/* The reduced-motion state is art-directed, not switched off: the seams arrive
   complete — the repair already made. That is the same frame as no-JS. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: var(--dur-page-exit); }
::view-transition-new(root) { animation-duration: var(--dur-page-enter); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none; }
}

/* ---- collapse order --------------------------------------------------- */

@media (max-width: 1199px) {
  .nav { gap: var(--space-0-5); }
  .nav a { padding: 15px 6px; }
  .banner { position: static; }             /* sticky >= 1024 only */
  .register-room { grid-template-columns: 1fr; gap: var(--space-6); }
  .register-room > * { min-width: 0; }
}

@media (max-width: 1199px) and (min-width: 700px) {
  .wall-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Below 900 the register rows stack to two lines: number + object + glyph,
   then licence + status. Proven at 390 in P2. */
@media (max-width: 899px) {
  .reg-head { display: none; }
  .reg-row {
    grid-template-columns: 44px 1fr 24px;
    grid-template-areas: "num name glyph" ".   lic  lic";
    row-gap: var(--space-0-5);
    min-height: 64px;
    padding-block: var(--space-1-5);
  }
  .reg-row > .c-num   { grid-area: num; }
  .reg-row > .c-name  { grid-area: name; }
  .reg-row > .c-glyph { grid-area: glyph; }
  .reg-row > .c-lic   { grid-area: lic; }
  .reg-row > .c-state { grid-area: lic; justify-self: end; }
}

@media (max-width: 699px) {
  .hall, .banner-in { padding-inline: var(--space-3); }
  .skip { left: var(--space-3); }
  .display { font-size: 40px; }
  .title-2 { font-size: 32px; }
  .wall-grid { grid-template-columns: 1fr; }
  .banner-in { height: auto; flex-direction: column; align-items: flex-start; gap: 0; }
  .banner-in > .masthead { height: 44px; display: flex; align-items: center; }
  .banner-in > .nav { height: 44px; flex-wrap: nowrap; overflow-x: auto; }
  .room { padding-block: var(--space-8) var(--space-12); }
}

/* ---- desk and index rooms ---- */

/* S6/8 — the loan desk. The four bay rules ARE this room's declared
   "textured-surface": structure, not grain. Authored from center so the
   central bay stays glued to the 520px column at 1200-1439 (P3); exactly
   x=120/459/980/1319 on the 1440 frame. Shown >=1200 only. */
.desk-room { position: relative; }
.bays { position: absolute; inset: 0; display: none; pointer-events: none; }
@media (min-width: 1200px) { .bays { display: block; } }
.bay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--stroke-hairline);
  background: var(--hairline);
}
.bay-1 { left: calc(50% - 600px); }
.bay-2 { left: calc(50% - 261px); }
.bay-3 { left: calc(50% + 260px); }
.bay-4 { left: calc(50% + 599px); }

.desk {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100% - var(--space-6)));
  margin-inline: auto;
}
.desk .display { margin-bottom: var(--space-4); }
.desk-lede { margin: 0 0 var(--space-8); }

.desk-plinth {
  position: relative;
  background: var(--module);
  border: var(--stroke-hairline) solid var(--hairline);
  padding: var(--space-6);
}
/* the corner vein: stroke.seam-page, poking past the plinth edge (P3) */
.desk-vein { position: absolute; top: -6px; right: -8px; }
.desk-vein path { stroke: var(--seam); stroke-width: var(--stroke-seam-page); }
.desk-label { margin: 0 0 var(--space-3); }
/* One layout, two states: the stamp inserts here on the failed render and
   everything above the insertion point is coordinate-identical (P3, TESTED). */
.desk-plinth .stamp { display: block; margin: 0 0 var(--space-5); }
.desk-plinth label {
  display: block;
  font-weight: var(--weight-medium);
  margin: 0 0 var(--space-1);
}
.desk-plinth .field { display: block; width: 100%; margin: 0 0 var(--space-3); }
.desk-note { margin: var(--space-2) 0 0; }
.desk-caption {
  margin: var(--space-8) 0 0;
  border-top: var(--stroke-hairline) solid var(--hairline);
  padding-top: var(--space-2);
}

/* /pipelines — the register grammar minus the glyph column; the four tracks
   still sum to 808 inside the 16px row padding (56+264+348+140). */
.pipes .reg-head, .pipes .reg-row {
  grid-template-columns: 56px 264px 348px 140px;
}
.pipes-lede { margin: var(--space-3) 0 0; }

/* S7 — the empty plinth. Statement centered at 720; index 360, 44px rows. */
.plinth-room {
  width: min(720px, calc(100% - var(--space-6)));
  margin-inline: auto;
  text-align: center;
}
.empty-cell { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.cell-frame { fill: none; stroke: var(--hairline); }
.cell-plinth { fill: var(--module); stroke: var(--hairline); }
.plate-chip {
  display: inline-block;
  margin: var(--space-2) 0 0;
  background: var(--module);
  border: var(--stroke-hairline) solid var(--hairline);
  padding: var(--space-1-25) var(--space-2);
}
.plinth-room .display { margin: var(--space-8) 0 0; }
.p404-body { margin: var(--space-3) auto 0; }
.p404-leadin { margin: var(--space-8) 0 0; }
.p404-index {
  width: min(360px, 100%);
  margin: var(--space-2) auto 0;
  text-align: left;
  border-top: var(--stroke-hairline) solid var(--hairline);
}
.p404-index .reg-row {
  grid-template-columns: 44px 1fr;
  min-height: 44px;
}

/* ---- exhibit room ---- */
/* S3: 180px margins -> the 1080px object bay inside the 1440 hall (64px chrome
   padding + 116px here = 180); annotation 300 @x762; plinth and plate 540 =
   half the bay. 1080, 540, 762 are DIRECTION.md grid-table geometry — per-room
   composition arithmetic, not tokens. */

.exhibit { max-width: 1080px; margin-inline: auto; }

.exhibit-status { margin: 0 0 var(--space-2-5); text-align: center; }
.exhibit h1 { margin: 0 0 var(--space-12); text-align: center; }

/* The comp's bay is 1080x400 and carries a bespoke drawing at that ratio. The
   shared drawing is 200x140 (ratio 1.43), so filling the bay's width would make
   it 756px tall — nearly double the designed bay, pushing the annotation, plinth
   and plate below the fold. The bay HEIGHT is what the room's rhythm was
   composed against, so the object is fitted to 400 and centered instead.
   Recorded as a build decision, not a silent default: the real close is a
   drawing authored at the exhibit ratio, which is deferred illustration work. */
.exhibit-figure { margin: 0; }
.exhibit-figure svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 400px;
  margin-inline: auto;
}
/* The drawings are authored on a 200-unit viewBox; the bay renders them at
   1080 (scale 5.4), so stroke tokens are spent divided by that factor to land
   on their rendered stations: ink 2px, seam 4px at the exhibit scale. */
.exhibit-figure .seam { stroke-width: var(--stroke-seam-exhibit); }   /* 4px */

.exhibit-annotation {
  width: 300px;
  margin: var(--space-0-5) 0 0 70.555%;       /* x762 of the 1080 bay */
  border-left: var(--stroke-hairline) solid var(--hairline);
  padding: var(--space-0-5) 0 0 var(--space-2);
}

.exhibit-plinth { width: 540px; max-width: 100%; margin: var(--space-9) auto 0; }
.exhibit-plinth p { margin: 0 0 var(--space-1-5); }
.exhibit-plinth p:last-child { margin-bottom: 0; }

.exhibit-plate { width: 540px; max-width: 100%; margin: var(--space-8) auto 0; }
.exhibit-plate h2 { margin: 0 0 var(--space-2); }
.exhibit-plate code { display: block; font-family: var(--font-mono); }
.exhibit-plate p { margin: 0; }
.exhibit-plate .result {
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--stroke-hairline) solid var(--hairline);   /* decorative */
}
.exhibit-plate .result + .result { margin-top: 0; padding-top: 0; border-top: 0; }
.exhibit-plate .plate-source { margin-top: var(--space-1); }
.exhibit-plate .plate-repo { margin-top: var(--space-2); }

.exhibit-caption { margin: var(--space-5) 0 0; text-align: center; }

.exhibit-roomnav {
  margin-top: var(--space-9);
  padding-top: var(--space-3);
  border-top: var(--stroke-hairline) solid var(--hairline);
  text-align: center;
  color: var(--secondary-text);
}
.exhibit-roomnav a { display: inline-block; padding: var(--space-1) var(--space-1-25); }

@media (max-width: 1199px) {
  /* below the full composition the x762 keying collapses with everything else */
  .exhibit-annotation { margin-left: 0; width: auto; max-width: 66ch; }
}

/* ---- wall room ---- */

/* S1 plate-head rhythm, the normalized steps: eyebrow -> 12 -> h1 -> 16 ->
   lede -> 32 -> grid (comp strays 14/30 normalized in Loop 2). */
.wall-eyebrow { margin: 0 0 var(--space-1-5); }
.wall-lede { margin: var(--space-2) 0 var(--space-4); }

/* S2 rail: title-2 over a short caption (comp's 28 above the title
   normalized to 24 — 28 is not a step). */
.rail-eyebrow { margin: 0 0 var(--space-3); }
.rail-title { margin: 0 0 var(--space-4); max-width: 8em; }
.rail-note { margin: 0; max-width: 30em; }

/* Status labels read as caps but the DOM keeps the data's own casing.
   0.52px = the comp's 0.04em at 13px. */
.c-state { text-transform: uppercase; letter-spacing: 0.52px; }

/* ---- prose rooms ---- */
/* S4 /claims, S5 /about, the two legal pages and /alternatives/*. Quiet by
   assignment: typography and information design only, no technique. Every
   value is a token; per-room geometry figures are from DIRECTION.md's grid
   table (S4: rail 380 + gap 80 + panel 780, stamp 68 / claim 264, rows 22px
   padding-block; S5: 120 seam gutter / 660 text / 1fr). */

.sr {                                       /* text for readers, not for the wall */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* the shared reading grammar */
.prose-eyebrow { color: var(--secondary-text); margin: 0 0 var(--space-5); }
.prose-col p, .prose-col li, .prose-col dd { max-width: 66ch; }
.prose-col p { margin: 0 0 var(--space-3); }
.prose-col h2 { margin: var(--space-8) 0 var(--space-2); }
.prose-col h3 { margin: var(--space-6) 0 var(--space-2); color: var(--secondary-text); }
.prose-col ul { margin: 0 0 var(--space-3); padding-left: 1.2em; }
.prose-col blockquote {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-2);
  border-left: var(--stroke-ink) solid var(--hairline);
}
.prose-col .cite { display: block; color: var(--secondary-text); }

.prose-dl { margin: 0 0 var(--space-3); border-top: var(--stroke-hairline) solid var(--hairline); }
.prose-dl > div { padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--hairline); }
.prose-dl dt { font-weight: var(--weight-bold); margin: 0 0 var(--space-0-5); }
.prose-dl dd { margin: 0; }

/* the numbered rows on /legal/privacy and the alternatives fact stacks:
   the receipt's 68px stamp column, spoken as a figure */
.zero-rows { margin: 0 0 var(--space-3); border-top: var(--stroke-hairline) solid var(--hairline); max-width: 66ch; }
.zero-rows .r {
  display: grid;
  grid-template-columns: 68px 1fr;
  padding: var(--space-2-75) 0;
  border-bottom: var(--stroke-hairline) solid var(--hairline);
}
.zero-rows--wide .r { grid-template-columns: 140px 1fr; }
.zero-rows dt { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.zero-rows dd { margin: 0; }

/* S4 — the receipt room */
.claims-room {
  display: grid;
  grid-template-columns: 380px 780px;
  column-gap: var(--space-10);
  align-items: start;
}
.claims-rail .route { color: var(--secondary-text); letter-spacing: 0.96px; margin: 0 0 var(--space-5); }
.claims-rail h1 { margin: 0 0 var(--space-3); }
.claims-rail p { margin: 0 0 var(--space-3); max-width: 300px; }
.claims-panel {
  position: relative;
  background: var(--module);
  border: var(--stroke-hairline) solid var(--hairline);
  padding: var(--space-6) var(--space-8) var(--space-6) var(--space-9);
}
.claims-panel h2 { margin: var(--space-8) 0 var(--space-2); }
.claims-panel h2:first-child { margin-top: 0; }
.claims-panel .prose-col p { max-width: 60ch; }        /* 66ch of 13px mono overflows the 644px panel interior */
.edge-seam {                                /* the repair where document joins wall */
  position: absolute;
  left: -5px;
  top: 0;
  width: 10px;
  height: 100%;
}
.edge-seam polyline { stroke: var(--seam); stroke-width: var(--stroke-seam-page); fill: none; }

.receipt { width: 100%; border-collapse: collapse; }
.receipt th {
  font-size: 12px;
  line-height: 1.5;
  font-weight: var(--weight-regular);
  letter-spacing: 0.96px;
  text-transform: uppercase;
  color: var(--secondary-text);              /* col-heads are mid — Gate C G7 */
  text-align: left;
  vertical-align: bottom;
  padding: 0 var(--space-2) var(--space-1-5) 0;
  border-bottom: var(--stroke-hairline) solid var(--hairline);
}
.receipt td {
  font-size: 13px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  vertical-align: top;
  padding: var(--space-2-75) var(--space-2) var(--space-2-75) 0;
  border-bottom: var(--stroke-hairline) solid var(--hairline);
}
.receipt tbody tr:last-child td { border-bottom: 0; }
.receipt .col-stamp { width: 68px; white-space: nowrap; }
.receipt .col-claim { width: 264px; font-weight: var(--weight-bold); }
.receipt s { color: var(--secondary-text); text-decoration-thickness: from-font; }
.stamp-glyph { vertical-align: -2px; }
.stamp-glyph polyline { stroke: var(--seam); stroke-width: var(--stroke-seam-mark); fill: none; }
.claims-dateline {
  grid-column: 2;
  color: var(--secondary-text);
  font-variant-numeric: tabular-nums;
  text-align: right;
  margin: var(--space-2-5) 0 0;
}

/* S5 — the label room */
.about-lot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--stroke-hairline) solid var(--hairline);
  color: var(--secondary-text);
  letter-spacing: 0.72px;                    /* the comp's 0.06em at 12px */
}
.about-field {
  display: grid;
  grid-template-columns: 120px 660px 1fr;
  margin-top: var(--space-12);
}
.about-seam { justify-self: end; padding-right: var(--space-6); }
.about-seam path { stroke: var(--seam); stroke-width: var(--stroke-seam-page); fill: none; }
.about-field h1 { margin: 0 0 var(--space-6); }
.about-prov {
  margin: var(--space-12) 0 0;
  padding-top: var(--space-2);
  border-top: var(--stroke-hairline) solid var(--hairline);
  color: var(--secondary-text);
}

/* the legal pages and the alternatives pages: a single reading column */
.prose-room { max-width: 660px; }
.alt-room { max-width: 780px; }
.crumb { list-style: none; display: flex; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0; color: var(--secondary-text); }
.crumb li + li::before { content: "·"; padding-right: var(--space-1); }
.table-wrap { overflow-x: auto; }            /* wide content scrolls itself, never the page */
.term {
  background: var(--module);
  border: var(--stroke-hairline) solid var(--hairline);
  padding: var(--space-2) var(--space-3);
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
  margin: 0 0 var(--space-3);
}
.hp { position: absolute; clip-path: inset(50%); }   /* honeypot pair: off-wall, still in the DOM */
.form-hint { color: var(--secondary-text); margin: var(--space-1-5) 0 var(--space-3); }
.act-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }

@media (max-width: 1199px) {
  .claims-room { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .claims-dateline { grid-column: auto; }
  .about-field { grid-template-columns: 1fr; }
  .about-seam { display: none; }             /* decorative; the single column has no gutter */
}

@media (max-width: 699px) {
  .claims-panel { padding: var(--space-3); }
}

/* ---- room overrides ---- */
.plinth-room-page .footer { margin-top: var(--space-12); }   /* 404: index -> footer 96 */