/* KKA LETTINGS LTD - 49 Queens Park, Holyhead, LL65 1PS
   One stylesheet for every page. The page is split down its middle at every
   width: left column states the obligation, right column names the document. */

/* ---------- reset: two rules, nothing else ---------- */
* { box-sizing: border-box; }
h1, h2, h3, h4, p { margin: 0; }

/* ---------- tokens ---------- */
:root {
  --bg: #edeef1;
  --ink: #272b33;
  --accent: #b4561f;
  --accent2: #3f5d63;
  --surface: #fafbfd;
  --serif: "Lustria", Georgia, "Times New Roman", serif;
  --sans: "Rosario", "Segoe UI", Tahoma, sans-serif;
  --gut: 0.72rem;
  --rule: rgb(39 43 51 / 0.16);
  --rule-firm: rgb(39 43 51 / 0.3);
  --ink-soft: rgb(39 43 51 / 0.82);
  /* the secondary voice: captions, field labels, the notes hung in the margin.
     At 0.56 it measured 3.4:1 on the page field - the same defect as the label
     colour, one level over, so it is raised here rather than per element. Still
     plainly lighter than --ink-soft, which is what the level is for. */
  --ink-faint: rgb(39 43 51 / 0.72);
  --tint: rgb(63 93 99 / 0.09);
  --warm: rgb(180 86 31 / 0.12);
  --step: 0.9rem;
  --shell: 80rem;
  --bleed-l: 0.4rem;
  --bleed-r: 0.4rem;
  /* --accent is the mark the eye follows; --label is the same mark when it has
     to be READ. The accent at full strength measures 4.2:1 on the page field,
     which is under the threshold for text, so every accent-coloured WORD takes
     this darkened mix instead and the undiluted accent is kept for strokes,
     rules, borders and fills. One label colour, derived, no new hex. */
  --label: var(--accent);
}
@supports (color: color-mix(in srgb, currentColor 70%, currentColor)) {
  :root { --label: color-mix(in srgb, var(--accent) 70%, var(--ink)); }
}

/* ---------- page ---------- */
/* the reveal slides the halves in from a few pixels out, and a full-bleed band
   is a whole viewport wide: both are clipped at the root rather than allowed to
   open a sideways scroll on a narrow screen */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  overflow-x: clip;
  background-color: var(--bg);
  background-image: radial-gradient(circle at 50% 50%, rgb(39 43 51 / 0.075) 1px, rgb(39 43 51 / 0) 1.35px);
  background-size: 12px 12px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 100%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.skip {
  position: absolute;
  left: 0.4rem;
  top: -3rem;
  z-index: 20;
  padding: 0.4rem 0.7rem;
  background: var(--ink);
  color: var(--surface);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: top 0.2s ease;
}
.skip:focus {
  top: 0.4rem;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 0.4rem 0;
}

/* ---------- the margin index: one mechanism, two seats ---------- */
#site-index {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 -0.4rem 0.9rem;
  padding: 0.4rem 0.45rem 0.5rem;
  background-color: rgb(237 238 241 / 0.95);
  border-bottom: 1px solid var(--rule-firm);
  backdrop-filter: blur(5px);
}

.ix-cap {
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.3rem;
}

.ix-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.26rem 0.3rem;
}

.ix-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.28rem;
  padding: 0.2rem 0.42rem;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.7rem;
  line-height: 1.25;
  text-decoration: none;
  transition: color 0.26s ease, border-color 0.26s ease, background-color 0.26s ease;
}
.ix-link:hover { border-color: var(--accent); color: var(--label); }
.ix-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ix-n {
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.ix-link[aria-current="page"] {
  border-color: var(--accent);
  color: var(--label);
  background: var(--warm);
}
.ix-link[aria-current="page"] .ix-n { color: var(--label); }

.ix-foot { display: none; }

/* ---------- main: the spine and the dot screen ---------- */
#main {
  position: relative;
  isolation: isolate;
  padding-bottom: 0.4rem;
}

#main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(circle at 50% 50%, rgb(63 93 99 / 0.24) 1.05px, rgb(63 93 99 / 0) 1.5px);
  background-size: 7px 7px;
  -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 1) 50%, rgb(0 0 0 / 0) 67%);
  mask-image: linear-gradient(to right, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 1) 50%, rgb(0 0 0 / 0) 67%);
}

#main::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  z-index: -1;
  pointer-events: none;
  transform-origin: top center;
  background-image: repeating-linear-gradient(to bottom, rgb(39 43 51 / 0.34) 0 6px, rgb(39 43 51 / 0) 6px 11px);
}

/* ---------- the split ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gut);
  align-items: start;
}

.statute, .record { min-width: 0; }

.statute {
  padding-right: 0.18rem;
  hyphens: auto;
}

.record {
  padding-left: 0.18rem;
  hyphens: auto;
}

.statute p {
  font-size: clamp(0.745rem, 2.7vw, 0.95rem);
  line-height: 1.52;
  color: var(--ink);
}
.statute p + p { margin-top: 0.5rem; }

.record p {
  font-size: clamp(0.715rem, 2.55vw, 0.9rem);
  line-height: 1.55;
  color: var(--ink-soft);
}
.record p + p { margin-top: 0.46rem; }

.lede {
  font-family: var(--serif);
  font-size: clamp(0.84rem, 3vw, 1.08rem) !important;
  line-height: 1.42 !important;
}

.rc-doc {
  font-size: 0.6rem !important;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
  line-height: 1.35 !important;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--warm);
  margin-bottom: 0.4rem !important;
}
/* `.record p` sets the body colour for that column and out-ranks a bare class,
   which is why the size and leading above carry !important. The colour has to
   win the same argument, so the label is addressed through its parent here. */
.record .rc-doc { color: var(--label); }

/* ---------- bands and side tabs ---------- */
.band {
  padding: 1.5rem 0 1.7rem;
  border-top: 1px solid var(--rule);
}
.band-open { padding-top: 0.2rem; border-top: 0; }

.tab {
  position: relative;
  display: block;
  margin: 0 0 1.05rem -0.4rem;
  padding: 0.6rem 0.8rem 0.66rem 3rem;
  font-family: var(--serif);
  font-size: clamp(1rem, 4.1vw, 1.42rem);
  line-height: 1.2;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 0 100%);
  transition: border-left-color 0.32s ease, background-color 0.32s ease;
}
.tab:hover { border-left-color: var(--accent2); background-color: var(--bg); }

.tab-n {
  position: absolute;
  left: 1.72rem;
  top: 0.78rem;
  font-family: var(--sans);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.tab::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  top: 0.88rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--rule-firm);
  background: var(--bg);
}

.tab-t { display: block; }

.masthead {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 7.4vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin: 0.9rem 0 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 2px solid var(--ink);
  text-wrap: balance;
}

/* ---------- the stencil plate ---------- */
.plate {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  margin: 0 auto;
}

.pl-body { fill: var(--surface); stroke: var(--rule-firm); stroke-width: 1.2; }
.pl-score { stroke: var(--accent2); stroke-width: 1; stroke-dasharray: 5 4; opacity: 0.55; }
.pl-hole { fill: var(--bg); stroke: var(--rule-firm); stroke-width: 1.4; }
.pl-word {
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 54px;
  letter-spacing: 7px;
}
.pl-bridge { fill: var(--surface); }
.pl-sub {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 3.4px;
}
.pl-punch circle { fill: var(--rule-firm); }

/* ---------- the ledger: list with aside ---------- */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger > li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gut);
  align-items: start;
  padding: 0.74rem 0;
  border-top: 1px solid rgb(39 43 51 / 0.13);
  transition: background-color 0.3s ease;
}
.ledger > li:first-child { border-top: 0; }
.ledger > li:last-child { border-bottom: 1px solid rgb(39 43 51 / 0.13); }
.ledger > li:hover { background-color: rgb(250 251 253 / 0.8); }

.ledger-tight > li { padding: 0.56rem 0; }

.lg-h {
  font-family: var(--serif);
  font-size: clamp(0.92rem, 3.5vw, 1.14rem);
  line-height: 1.25;
  color: var(--accent2);
  margin-bottom: 0.32rem;
}

.was {
  font-family: var(--serif);
  font-size: clamp(0.82rem, 3.1vw, 1.04rem);
  line-height: 1.3;
  color: var(--ink-faint);
  text-decoration: line-through;
  text-decoration-color: rgb(180 86 31 / 0.65);
  text-decoration-thickness: 1px;
}

.now {
  font-family: var(--serif);
  font-size: clamp(0.86rem, 3.25vw, 1.08rem);
  line-height: 1.26;
  color: var(--label);
  margin-bottom: 0.26rem;
}

.aside-note {
  margin-top: 1rem;
  font-size: clamp(0.715rem, 2.5vw, 0.88rem);
  line-height: 1.55;
  color: var(--ink-soft);
  padding-left: 0.7rem;
  border-left: 2px solid var(--tint);
}

.deep {
  color: var(--label);
  text-decoration: none;
  border-bottom: 1px solid rgb(180 86 31 / 0.4);
  transition: color 0.24s ease, border-bottom-color 0.24s ease;
}
.deep:hover { color: var(--accent2); border-bottom-color: var(--accent2); }
.deep:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- figures: the mill and the map ---------- */
.mill {
  margin: 0 0 1.2rem;
  padding: 0.8rem 0.4rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}

.fig {
  margin-top: 0.6rem;
  padding: 0 0.3rem;
  font-size: clamp(0.665rem, 2.35vw, 0.8rem);
  line-height: 1.5;
  color: var(--ink-faint);
  text-align: center;
}

.kc, .map {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.kc { max-width: 27rem; }
.map { max-width: 29rem; }

/* key-cut: base state is the FINISHED key */
.kc-rim, .kc-eye, .kc-shank, .kc-bitting, .kc-ring, .kc-string, .kc-tooth {
  fill: none;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}
.kc-rim { stroke: var(--ink); stroke-width: 2.4; }
.kc-eye { stroke: var(--ink); stroke-width: 1.8; }
.kc-shank { stroke: var(--ink); stroke-width: 2.2; }
.kc-bitting { stroke: var(--ink); stroke-width: 2.2; }
.kc-tooth { stroke: var(--accent); stroke-width: 2.8; }
.kc-ring { stroke: var(--accent2); stroke-width: 1.6; stroke-dasharray: 100; }
.kc-string { stroke: var(--accent2); stroke-width: 1.2; }
.kc-swarf circle { fill: var(--accent); opacity: 0; }
.kc-tagwrap {
  opacity: 1;
  transform: none;
  transform-box: view-box;
  transform-origin: 62px 159px;
}
.kc-tag { fill: var(--bg); stroke: var(--ink); stroke-width: 1.4; }
.kc-grommet { fill: var(--surface); stroke: var(--accent2); stroke-width: 1.6; }
.kc-tagcap {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 2.6px;
}
.kc-tagref {
  fill: var(--ink);
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 1.6px;
}

/* the Anglesey schematic */
.mp-sea { fill: rgb(63 93 99 / 0.07); }
.mp-land { fill: var(--surface); stroke: var(--ink); stroke-width: 1.3; }
.mp-main { fill: rgb(63 93 99 / 0.14); stroke: var(--rule-firm); stroke-width: 1; }
.mp-link { stroke: var(--ink); stroke-width: 3; fill: none; }
.mp-road { stroke: var(--accent); stroke-width: 1.8; fill: none; stroke-dasharray: 7 4; }
.mp-bridge { stroke: var(--accent2); stroke-width: 2.4; fill: none; }
.mp-dot {
  fill: var(--surface);
  stroke: var(--ink);
  stroke-width: 1.4;
  transition: fill 0.28s ease, stroke-width 0.28s ease;
}
.map:hover .mp-dot { fill: var(--warm); stroke-width: 2; }
.mp-here { fill: var(--accent); stroke: var(--accent); }
.mp-l {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  text-anchor: middle;
}
.mp-lhere {
  fill: var(--label);
  font-size: 13px;
  letter-spacing: 1.4px;
}
.mp-lw { text-anchor: start; }
.mp-lsea { fill: var(--accent2); font-style: italic; font-size: 11px; }

/* the year bar on the Anglesey page */
.yr {
  display: block;
  width: 100%;
  height: auto;
  max-width: 30rem;
  margin: 0 auto;
}
.yr-track { fill: rgb(39 43 51 / 0.07); stroke: var(--rule); stroke-width: 0.8; }
.yr-span { fill: rgb(63 93 99 / 0.55); transition: fill 0.3s ease; }
.yr-warm { fill: rgb(180 86 31 / 0.6); }
.yr:hover .yr-span { fill: var(--accent2); }
.yr:hover .yr-warm { fill: var(--accent); }
.yr-l {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 1.6px;
}
.yr-m {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 13px;
  text-anchor: middle;
}

/* ---------- widgets ---------- */
.calc {
  margin-top: 1.3rem;
  padding: 0.8rem 0.62rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  border-top: 3px solid var(--accent2);
}

.calc-h {
  font-family: var(--serif);
  font-size: clamp(0.92rem, 3.4vw, 1.14rem);
  line-height: 1.3;
  margin-bottom: 0.7rem;
}

.guide {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.36rem;
  font-family: var(--sans);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent2);
  border: 1px solid rgb(63 93 99 / 0.45);
  vertical-align: 0.14em;
}

.calc-fields { display: grid; gap: 0.56rem; }

.field { display: grid; gap: 0.2rem; }

.field-l {
  font-size: 0.63rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.field-i {
  font-family: var(--sans);
  font-size: 0.86rem;
  width: 100%;
  min-width: 0;
  padding: 0.4rem 0.46rem;
  border: 1px solid var(--rule-firm);
  border-radius: 0;
  background: #ffffff;
  color: var(--ink);
  transition: border-color 0.24s ease, box-shadow 0.24s ease;
}
.field-i:hover { border-color: var(--accent2); }
.field-i:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--warm);
}

.go {
  margin-top: 0.75rem;
  padding: 0.44rem 0.9rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--surface);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  transition: background-color 0.26s ease, color 0.26s ease, letter-spacing 0.26s ease;
}
.go:hover { background-color: var(--accent); border-color: var(--accent); letter-spacing: 0.14em; }
.go:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }

.clock {
  margin-top: 0.8rem;
  height: 0.46rem;
  border: 1px solid var(--rule-firm);
  background: var(--bg);
  overflow: hidden;
}
.clock-run {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent2);
  transition: width 0.55s ease, background-color 0.3s ease;
}
.clock-run[data-over="yes"] { background-color: var(--accent); }

.out { display: block; margin-top: 0.8rem; }

.out-hint {
  font-size: 0.715rem;
  line-height: 1.5;
  color: var(--ink-faint);
  padding-left: 0.6rem;
  border-left: 2px solid var(--tint);
}

.sum {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.sum li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
  padding: 0.3rem 0.1rem;
  border-bottom: 1px solid rgb(39 43 51 / 0.1);
  font-size: 0.73rem;
  line-height: 1.4;
}
.sum-k { color: var(--ink-faint); }
.sum-v {
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sum li.sum-op { background: var(--tint); }
.sum li.sum-op .sum-k { font-family: var(--serif); color: var(--accent2); }
.sum li.sum-rule { background: var(--warm); }
.sum li.sum-rule .sum-k { color: var(--label); }

.verdict {
  margin-top: 0.7rem;
  padding: 0.5rem 0.6rem;
  font-family: var(--serif);
  font-size: clamp(0.82rem, 3vw, 1rem);
  line-height: 1.38;
  color: var(--ink);
  background: var(--bg);
  border-left: 3px solid var(--accent);
}
.verdict[data-tone="late"] { border-left-color: var(--accent2); background: var(--tint); }

.sub-note {
  margin-top: 0.55rem;
  font-size: 0.665rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* ---------- registered particulars ---------- */
.parts { margin: 0; padding: 0; }

.part {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gut);
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid rgb(39 43 51 / 0.13);
  transition: background-color 0.28s ease;
}
.part:last-child { border-bottom: 1px solid rgb(39 43 51 / 0.13); }
.part:hover { background-color: rgb(250 251 253 / 0.8); }

.part dt {
  font-size: 0.63rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.part dd {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(0.78rem, 2.9vw, 0.98rem);
  line-height: 1.35;
  color: var(--ink);
  overflow-wrap: break-word;
}
.part dd a {
  color: var(--label);
  text-decoration: none;
  border-bottom: 1px solid rgb(180 86 31 / 0.4);
  transition: color 0.24s ease;
}
.part dd a:hover { color: var(--accent2); }

/* ---------- sub-page furniture ---------- */
.page-head {
  padding: 0.6rem 0 1.1rem;
}
.eyebrow {
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent2);
  margin-bottom: 0.5rem;
}
.page-title {
  font-family: var(--serif);
  font-size: clamp(1.26rem, 6.2vw, 2.15rem);
  line-height: 1.14;
  letter-spacing: -0.01em;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule-firm);
}

.stage {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: stage;
}
.stage > li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--gut);
  align-items: start;
  padding: 0.76rem 0;
  border-top: 1px solid rgb(39 43 51 / 0.13);
  transition: background-color 0.3s ease;
}
.stage > li:last-child { border-bottom: 1px solid rgb(39 43 51 / 0.13); }
.stage > li:hover { background-color: rgb(250 251 253 / 0.8); }
.stage-h {
  font-family: var(--serif);
  font-size: clamp(0.88rem, 3.4vw, 1.1rem);
  line-height: 1.26;
  color: var(--accent2);
  margin-bottom: 0.3rem;
}
.stage-h::before {
  counter-increment: stage;
  content: counter(stage, decimal-leading-zero) " ";
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--label);
  vertical-align: 0.16em;
}

.onward {
  margin-top: 1.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-firm);
  font-size: clamp(0.715rem, 2.5vw, 0.88rem);
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */
#registry {
  position: relative;
  isolation: isolate;
  margin-top: 0.4rem;
  padding: 1.3rem 0 2rem;
  border-top: 2px solid var(--ink);
}
#registry::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 1.2rem;
  width: 1px;
  margin-left: -0.5px;
  z-index: -1;
  background-image: repeating-linear-gradient(to bottom, rgb(39 43 51 / 0.26) 0 6px, rgb(39 43 51 / 0) 6px 11px);
}

.reg-addr {
  font-style: normal;
  font-size: clamp(0.715rem, 2.5vw, 0.88rem);
  line-height: 1.6;
  color: var(--ink);
}
.reg-name {
  font-family: var(--serif);
  font-size: clamp(0.84rem, 3vw, 1.04rem);
  letter-spacing: 0.02em;
}
.reg-line {
  margin-top: 0.5rem;
  font-size: clamp(0.665rem, 2.35vw, 0.8rem);
  line-height: 1.5;
  color: var(--ink-faint);
}
.reg-line a {
  color: var(--label);
  text-decoration: none;
  border-bottom: 1px solid rgb(180 86 31 / 0.4);
  transition: color 0.24s ease, border-bottom-color 0.24s ease;
}
.reg-line a:hover { color: var(--accent2); border-bottom-color: var(--accent2); }
.reg-line a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.reg-note {
  font-size: clamp(0.665rem, 2.35vw, 0.8rem);
  line-height: 1.55;
  color: var(--ink-faint);
}
.reg-note + .reg-note { margin-top: 0.5rem; }

/* ================================================================
   COMPOSITION SHAPES
   One shape per body section of the index, in the order below, and
   never twice. The page stays split down its middle throughout: a
   shape either claims one half or deliberately runs across both.
   ================================================================ */

/* --- shape 01: offset-split -------------------------------------
   Unequal columns. The figure sits in the narrow side's first row
   and hangs back across the gutter over the empty cell beside it,
   so the overhang can never land on a line of type.              */
.oset { display: grid; row-gap: 0.4rem; }

.oset-stamp {
  align-self: end;
  padding-bottom: 0.5rem;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.oset-stamp b {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--accent2);
}

.oset-fig { position: relative; z-index: 2; }
.oset-wide { padding-top: 0.5rem; }
.oset-narrow { padding-top: 0.5rem; }

/* --- shape 02: ledger-rows --------------------------------------
   A ruled register. Column heads, then one ruled row per entry.  */
.ledger-head {
  border: 1px solid var(--rule-firm);
  background: var(--surface);
}
.ledger-head > li {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}
.ledger-head > li:last-child { border-bottom: 0; }
.lg-cap {
  padding-top: 0.42rem !important;
  padding-bottom: 0.42rem !important;
  border-top: 0 !important;
  background: var(--tint);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent2);
}
.lg-cap:hover { background-color: var(--tint) !important; }
.ledger-head > li:nth-child(2) { border-top: 1px solid var(--ink); }
.ledger-head > li:nth-child(even) { background-color: rgb(39 43 51 / 0.03); }
.ledger-head > li:hover { background-color: var(--bg); }

/* --- shape 03: pull-quote ---------------------------------------
   One sentence at display size, straddling the spine, with the
   body resuming underneath it.                                   */
.quote {
  margin: 0 0 1.1rem;
  padding: 0 0 0.9rem;
  font-family: var(--serif);
  font-size: clamp(1.32rem, 6.4vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
  border-bottom: 1px solid var(--rule-firm);
}
.quote em {
  font-style: normal;
  color: var(--label);
}

.renames {
  font-size: clamp(0.775rem, 2.8vw, 0.98rem);
  line-height: 1.72;
  color: var(--ink);
  max-width: 44rem;
}
.renames + .renames { margin-top: 0.6rem; }
.renames .was { font-size: inherit; }
.renames .now {
  font-size: inherit;
  margin: 0;
}
.turn {
  padding: 0 0.26em;
  color: var(--accent2);
}

/* --- shape 04: full-bleed-band ----------------------------------
   Edge of glass to edge of glass; the measure stops existing.    */
.bleed {
  margin-left: calc(-1 * (max(0px, (100vw - var(--shell)) / 2) + var(--bleed-l)));
  margin-right: calc(-1 * (max(0px, (100vw - var(--shell)) / 2) + var(--bleed-r)));
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.bleed-in {
  max-width: 50rem;
  margin: 0 auto;
}

.keyband {
  /* the band inverts the palette, so the label follows the band's own accent:
     the root's darkened mix is tuned for paper and would sink into this one */
  --label: var(--accent);
  --ink: #fafbfd;
  --bg: #272b33;
  --surface: rgb(250 251 253 / 0.07);
  --accent: #edeef1;
  --accent2: #edeef1;
  --rule: rgb(250 251 253 / 0.26);
  --rule-firm: rgb(250 251 253 / 0.46);
  --ink-soft: rgb(250 251 253 / 0.86);
  --ink-faint: rgb(250 251 253 / 0.64);
  --warm: rgb(250 251 253 / 0.2);
  --tint: rgb(250 251 253 / 0.12);
  padding-top: 2rem;
  padding-bottom: 2.2rem;
  background-color: #272b33;
  border-top: 0;
  color: #fafbfd;
}
@supports (color: color-mix(in srgb, #fff 50%, #000)) {
  .keyband {
    --accent: color-mix(in srgb, #b4561f 54%, #fafbfd);
    --accent2: color-mix(in srgb, #3f5d63 34%, #fafbfd);
  }
}
.keyband .tab {
  background: rgb(250 251 253 / 0.06);
  border-color: rgb(250 251 253 / 0.22);
}
.keyband .kc { max-width: 40rem; }
.keyband .fig { color: rgb(250 251 253 / 0.66); }

.band-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

/* --- shape 05: card-grid ----------------------------------------
   Four small plates in a row, one fact each, nothing else.       */
.cards {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
}
.card {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.75rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent2);
  transition: border-top-color 0.3s ease, transform 0.3s ease;
}
.card:hover { border-top-color: var(--accent); transform: translateY(-2px); }
.cd-n {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}
.cd-u {
  font-family: var(--sans);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  vertical-align: 0.42em;
  padding-left: 0.16em;
}
.cd-b {
  margin-top: 0.5rem !important;
  font-size: clamp(0.715rem, 2.5vw, 0.86rem);
  line-height: 1.5;
  color: var(--ink);
}
.cd-doc {
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px solid var(--warm);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--label);
}

/* --- shape 06: margin-annotated ---------------------------------
   Numbered prose in the measure, each note hung off in the outer
   margin on a dotted leader, no rules between entries.           */
.ann { display: grid; row-gap: 0.95rem; }

.ann-b {
  position: relative;
  padding-left: 1.5rem;
}
.ann-m {
  position: absolute;
  left: 0;
  top: 0.18em;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  font-variant-numeric: tabular-nums;
}

.ann-n {
  position: relative;
  padding-top: 0.42rem;
  font-size: clamp(0.675rem, 2.4vw, 0.79rem) !important;
  line-height: 1.5 !important;
  color: var(--ink-faint) !important;
}
.ann-n::before {
  content: "";
  position: absolute;
  left: -0.5rem;
  right: 55%;
  top: 0.16rem;
  border-top: 1px dotted var(--rule-firm);
}
.ann-doc {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 0.14rem;
}

/* --- shape 07: stacked-overlap ----------------------------------
   Two plates, the second laid over the first by a few per cent,
   with the overlap falling on the spine.                         */
.ov { display: block; }
.ov-a {
  /* stacked, the lower plate rides up over this one: the extra bottom padding
     is what keeps the overlap off the last line of type */
  padding: 0.85rem 0.8rem 1.7rem;
  background: var(--surface);
  border: 1px solid var(--rule-firm);
}
.ov-b {
  position: relative;
  z-index: 2;
  margin: -0.9rem 0 0 1.1rem;
  padding: 0.85rem 0.8rem 1rem;
  background: var(--bg);
  border: 1px solid var(--ink);
  box-shadow: -5px -5px 0 rgb(39 43 51 / 0.06);
}
.ov-b .calc {
  margin-top: 0.9rem;
  padding: 0.9rem 0 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--accent2);
}

/* --- shape 08: figure-pair --------------------------------------
   Two sheets drawn to the same grid, set side by side because the
   whole point is reading one against the other.                  */
.pair {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: var(--gut);
  row-gap: 1.3rem;
  align-items: start;
}
.pr-f { margin: 0; }
.sheet {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  transition: border-color 0.3s ease;
}
.pr-f:hover .sheet { border-color: var(--accent); }
.pr-cap {
  margin: 0.55rem 0 0.5rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--warm);
  font-family: var(--serif);
  font-size: clamp(0.8rem, 3vw, 0.98rem);
  line-height: 1.3;
  color: var(--accent2);
}
.sh-paper { fill: var(--surface); }
.sh-rule { stroke: var(--rule); stroke-width: 1; }
.sh-firm { stroke: var(--rule-firm); stroke-width: 1.3; }
.sh-box { fill: none; stroke: var(--rule-firm); stroke-width: 1.1; }
.sh-tick { stroke: var(--accent2); stroke-width: 1.6; fill: none; }
.sh-l {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 11px;
}
.sh-cap {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 1.6px;
}
.sh-flag { fill: var(--warm); }
.sh-mark { stroke: var(--accent); stroke-width: 1.8; fill: none; }
.sh-markl { fill: var(--label); font-family: var(--sans); font-size: 10px; }

/* --- shape 09: step-chain ---------------------------------------
   Numbered steps threaded on one drawn rule.                     */
.ch-lead {
  max-width: 42rem;
  margin-bottom: 1.1rem;
  font-size: clamp(0.775rem, 2.8vw, 0.95rem);
  line-height: 1.55;
}
.chain {
  position: relative;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  margin: 0;
  padding: 0 0 0 1.4rem;
}
.chain::before {
  content: "";
  position: absolute;
  left: 0.52rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background-image: repeating-linear-gradient(to bottom, var(--rule-firm) 0 4px, rgb(39 43 51 / 0) 4px 8px);
}
.ch-s { position: relative; }
.ch-n {
  position: absolute;
  left: -1.4rem;
  top: 0.08rem;
  width: 1.05rem;
  height: 1.05rem;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 1px solid var(--accent2);
  border-radius: 50%;
  font-size: 0.56rem;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.ch-s:hover .ch-n { background-color: var(--accent); border-color: var(--accent); color: var(--surface); }
.ch-h {
  font-family: var(--serif);
  font-size: clamp(0.88rem, 3.3vw, 1.06rem);
  line-height: 1.24;
  color: var(--ink);
}
.ch-b {
  margin-top: 0.22rem;
  font-size: clamp(0.7rem, 2.5vw, 0.84rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.ch-tail {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
  font-size: clamp(0.69rem, 2.45vw, 0.82rem);
  line-height: 1.55;
  color: var(--ink-faint);
}
.rc-tag {
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--label);
  padding-right: 0.5em;
}

/* --- shape 10: inset-plate --------------------------------------
   A plate set into the column, the type running past it on one
   side.                                                           */
.iplate::after { content: ""; display: block; clear: both; }
.ip-fig {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.5rem 0.55rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.iplate p {
  font-size: clamp(0.745rem, 2.7vw, 0.95rem);
  line-height: 1.6;
}
.iplate p + p { margin-top: 0.6rem; }
.ip-note {
  padding: 0.5rem 0 0;
  border-top: 1px solid var(--warm);
  color: var(--ink-soft);
}

/* --- footer: the registered record as one running line --------- */
.parts-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 0.9rem;
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}
.parts-line .part {
  display: block;
  padding: 0.1rem 0;
  border: 0;
}
.parts-line .part:last-child { border-bottom: 0; }
.parts-line .part:hover { background-color: transparent; }
.parts-line dt { font-size: 0.55rem; letter-spacing: 0.16em; }
.parts-line dd { font-size: clamp(0.72rem, 2.6vw, 0.85rem); }

/* ================================================================
   SUB-PAGE REALISATIONS
   The same shapes, drawn differently: the chain runs down a rail
   instead of across, the plate is set into the left of the column
   instead of the right, the band is a wash instead of a blackout.
   Two of the shapes below belong to the retention page alone and
   are in no other page's vocabulary.
   ================================================================ */

/* card titled with a word rather than a number (obligations) */
.cd-t {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 4vw, 1.26rem);
  line-height: 1.16;
  color: var(--label);
}

/* step-chain, vertical rail (condition) */
.chain.chain-rail {
  grid-template-columns: 1fr;
  column-gap: 0;
  row-gap: 1.25rem;
  padding: 0.2rem 0 0 2rem;
}
.chain.chain-rail::before {
  left: 0.74rem;
  right: auto;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1px;
  height: auto;
  background-image: repeating-linear-gradient(to bottom, var(--rule-firm) 0 4px, rgb(39 43 51 / 0) 4px 8px);
}
.chain.chain-rail .ch-n {
  left: -2rem;
  top: 0.1rem;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.64rem;
}
.ch-note {
  margin-top: 0.4rem;
  padding-top: 0.38rem;
  border-top: 1px solid var(--warm);
  font-size: clamp(0.675rem, 2.4vw, 0.8rem);
  line-height: 1.52;
  color: var(--ink-faint);
}

/* the repair docket, hung back over the gutter (repairs) */
.docket {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}
.dk-paper { fill: var(--surface); stroke: var(--rule-firm); stroke-width: 1.2; }
.dk-firm { stroke: var(--ink); stroke-width: 1.4; }
.dk-rule { stroke: var(--rule-firm); stroke-width: 1; stroke-dasharray: 3 3; }
.dk-box { fill: none; stroke: var(--rule-firm); stroke-width: 1.1; }
.dk-cap {
  fill: var(--label);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 2.4px;
}
.dk-l {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.4px;
}
.dk-s {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 1.2px;
}

/* the twenty-four hour strip, set into the type (repairs) */
.hours { display: block; width: 100%; height: auto; }
.hr-band { fill: var(--warm); }
.hr-axis { stroke: var(--ink); stroke-width: 1.3; }
.hr-tick { stroke: var(--rule-firm); stroke-width: 1; }
.hr-day { stroke: var(--ink); stroke-width: 1.4; }
.hr-span { stroke: var(--accent2); stroke-width: 1.4; }
.hr-mark { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 4 3; }
.hr-cap {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.2px;
}
.hr-h {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 10px;
  text-anchor: middle;
}
.hr-d {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.6px;
  text-anchor: middle;
}
.hr-n {
  fill: var(--label);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.4px;
}
.ip-left { float: none; }

/* the two street elevations, read against each other (anglesey) */
.plan {
  display: block;
  width: 100%;
  height: auto;
  background: var(--surface);
  border: 1px solid var(--rule-firm);
  transition: border-color 0.3s ease;
}
.pr-f:hover .plan { border-color: var(--accent); }
.pn-ground { stroke: var(--ink); stroke-width: 1.4; }
.pn-wall { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.pn-roof { fill: rgb(63 93 99 / 0.2); stroke: var(--ink); stroke-width: 1.2; }
.pn-op { fill: var(--surface); stroke: var(--rule-firm); stroke-width: 1; }
.pn-door { fill: rgb(39 43 51 / 0.14); stroke: var(--rule-firm); stroke-width: 1; }
.pn-shop { fill: rgb(63 93 99 / 0.1); stroke: var(--rule-firm); stroke-width: 1; }
.pn-stack { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.pn-tank { fill: rgb(63 93 99 / 0.16); stroke: var(--ink); stroke-width: 1.2; }
.pn-bund { fill: none; stroke: var(--accent2); stroke-width: 1.4; stroke-dasharray: 4 3; }
.pn-gutter { stroke: var(--accent); stroke-width: 2.2; fill: none; }
.pn-pipe { stroke: var(--accent); stroke-width: 1.2; fill: none; }
.pn-stair { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.pn-wind { stroke: var(--accent2); stroke-width: 1.4; fill: none; }
.pn-arrow { stroke-width: 1.6; }
.pn-l {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 11px;
}
.pr-note {
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--warm);
  font-size: clamp(0.675rem, 2.4vw, 0.8rem) !important;
  line-height: 1.52;
  color: var(--ink-faint);
}

/* the seasons band: a wash across the glass, not a blackout (anglesey) */
.yearband {
  /* this band's wash darkens the field under it, so the faint level is carried
     one step further here to hold the same ratio the rest of the site has */
  --ink-faint: rgb(39 43 51 / 0.8);
  padding-top: 1.7rem;
  padding-bottom: 1.9rem;
  background-color: rgb(63 93 99 / 0.13);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.yearband .yr { max-width: 36rem; }

/* ---- retention page only: the wallet and the retention axis ---- */
.wallet { display: grid; row-gap: 1rem; }
.wl {
  display: block;
  width: 100%;
  height: auto;
  max-width: 30rem;
}
.wl-back { fill: var(--surface); stroke: var(--ink); stroke-width: 1.4; }
.wl-flap { fill: none; stroke: var(--accent); stroke-width: 2; }
.wl-sheet { fill: var(--bg); stroke: var(--rule-firm); stroke-width: 0.9; }
.wl-sheets rect { transition: fill 0.3s ease; }
.wl:hover .wl-sheets rect { fill: var(--surface); }
.wl-l {
  fill: var(--ink-soft);
  font-family: var(--sans);
  font-size: 10.5px;
}
.wl-cap {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 2.4px;
}
.wl-body p {
  font-size: clamp(0.745rem, 2.7vw, 0.95rem);
  line-height: 1.6;
}
.wl-body p + p { margin-top: 0.6rem; }
.wl-not {
  padding-top: 0.5rem;
  border-top: 1px solid var(--warm);
  color: var(--ink-faint);
  font-size: clamp(0.69rem, 2.45vw, 0.84rem) !important;
}

.axis {
  display: block;
  width: 100%;
  height: auto;
  max-width: 34rem;
  margin: 0 0 1.3rem;
}
.ax-bar { fill: rgb(63 93 99 / 0.5); transition: fill 0.3s ease; }
.ax-open { fill: rgb(180 86 31 / 0.45); }
.ax-short { fill: rgb(39 43 51 / 0.3); }
.ax-arrow { fill: rgb(180 86 31 / 0.45); }
.axis:hover .ax-bar { fill: var(--accent2); }
.ax-rule { stroke: var(--ink); stroke-width: 1.2; }
.ax-tick { stroke: var(--rule-firm); stroke-width: 1; }
.ax-l {
  fill: var(--ink-faint);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 1.6px;
}
.ax-y {
  fill: var(--accent2);
  font-family: var(--sans);
  font-size: 10px;
}

.retain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: 0.85rem;
}
.retain > li {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  column-gap: 0.8rem;
  align-items: start;
}
.rt-k {
  padding: 0.16rem 0.3rem;
  border: 1px solid var(--rule-firm);
  background: var(--surface);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--label);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.retain > li:hover .rt-k { border-color: var(--accent); color: var(--accent2); }
.rt-b {
  max-width: 44rem;
  font-size: clamp(0.72rem, 2.6vw, 0.88rem);
  line-height: 1.58;
  color: var(--ink);
}

/* ---------- width steps ---------- */
@media (min-width: 30rem) {
  :root { --gut: 1.05rem; --bleed-l: 0.9rem; --bleed-r: 0.9rem; }
  .shell { padding: 0 0.9rem; }
  .cards { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .keyband { padding-left: 1.4rem; padding-right: 1.4rem; }
  #site-index { margin: 0 -0.9rem 1.1rem; padding: 0.5rem 0.95rem 0.6rem; }
  .tab { margin-left: -0.9rem; padding-left: 3.5rem; }
  .tab-n { left: 2.22rem; }
  .tab::after { left: 1.3rem; }
  .calc-fields { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .mill { padding: 1.1rem 0.9rem 0.9rem; }
  .calc { padding: 1rem 0.95rem 1.1rem; }
}

@media (min-width: 44rem) {
  :root { --gut: 1.6rem; --step: 1.1rem; }
  .band { padding: 2rem 0 2.2rem; }
  .masthead { margin: 1.4rem 0 1.5rem; }
  .calc-fields-3 { grid-template-columns: 2fr 1fr 1fr; }
  .sum li { font-size: 0.78rem; padding: 0.36rem 0.2rem; }
  .ledger > li { padding: 0.95rem 0; }
  .ledger-tight > li { padding: 0.66rem 0; }
  .stage > li { padding: 1rem 0; }
  .statute { padding-right: 0.5rem; }
  .record { padding-left: 0.5rem; }

  /* 01 offset-split: unequal columns, the figure hung back over an empty cell */
  .oset {
    grid-template-columns: 1fr minmax(0, 0.78fr);
    grid-template-rows: auto auto;
    column-gap: var(--gut);
    row-gap: 1.1rem;
  }
  .oset-stamp { grid-column: 1; grid-row: 1; }
  .oset-fig {
    grid-column: 2;
    grid-row: 1;
    width: calc(100% + var(--gut) + 7rem);
    margin-left: calc(-1 * (var(--gut) + 7rem));
  }
  .oset-fig .plate { max-width: none; }
  .oset-wide { grid-column: 1; grid-row: 2; padding-top: 0; }
  .oset-narrow { grid-column: 2; grid-row: 2; padding-top: 0; }

  /* 04 full-bleed-band: the pair beneath the key returns to two halves */
  .band-foot { grid-template-columns: 1fr 1fr; column-gap: var(--gut); }

  /* 05 card-grid: four across */
  .cards { grid-template-columns: repeat(4, 1fr); gap: 0.8rem; }

  /* 06 margin-annotated: notes hung in the outer half */
  .ann { grid-template-columns: 1fr 1fr; column-gap: var(--gut); row-gap: 1.15rem; }
  .ann-b { grid-column: 1; }
  .ann-n { grid-column: 2; padding-top: 0.5rem; }

  /* 07 stacked-overlap: the seam falls on the spine */
  .ov { display: grid; grid-template-columns: repeat(12, 1fr); align-items: start; }
  /* the upper plate covers one twelfth of the row, which is one seventh of the
     lower plate: that much padding keeps every line clear of the seam */
  .ov-a {
    grid-column: 1 / 8;
    grid-row: 1;
    padding: 1.1rem calc(14.3% + 1.1rem) 1.3rem 1.1rem;
  }
  .ov-b {
    grid-column: 7 / 13;
    grid-row: 1;
    margin: 2.4rem 0 -1.4rem 0;
    padding: 1.1rem 1.1rem 1.25rem;
  }

  /* 08 figure-pair: two sheets, read against each other */
  .pair { grid-template-columns: 1fr 1fr; }

  /* 09 step-chain: threaded left to right */
  .chain {
    grid-template-columns: repeat(4, 1fr);
    column-gap: var(--gut);
    padding: 1.9rem 0 0;
  }
  .chain::before {
    left: 6%;
    right: 6%;
    top: 0.52rem;
    bottom: auto;
    width: auto;
    height: 1px;
    background-image: repeating-linear-gradient(to right, var(--rule-firm) 0 4px, rgb(39 43 51 / 0) 4px 8px);
  }
  .ch-n { left: 0; top: -1.9rem; }

  /* 10 inset-plate: the plate set in, the type running past it */
  .ip-fig {
    float: right;
    width: 52%;
    max-width: 27rem;
    margin: 0.15rem 0 0.9rem 1.5rem;
  }
  /* on the repairs page the plate is set into the other side */
  .ip-fig.ip-left {
    float: left;
    margin: 0.15rem 1.5rem 0.9rem 0;
  }

  /* the wallet reads beside its own description */
  .wallet {
    grid-template-columns: minmax(0, 0.92fr) 1fr;
    column-gap: var(--gut);
    align-items: start;
  }
  .wl { max-width: none; }

  /* retention tags hang in a column of their own */
  .retain > li { grid-template-columns: 5rem 1fr; column-gap: 1.1rem; }
}

@media (min-width: 64rem) {
  :root { --gut: 2.4rem; --bleed-l: 15.4rem; --bleed-r: 1.4rem; }
  .shell {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    column-gap: 2rem;
    align-items: start;
    padding: 1.4rem 1.4rem 0;
  }
  #site-index {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 1.4rem;
    margin: 0;
    padding: 0.2rem 1rem 0.4rem 0;
    /* the index keeps the page field under it, so a full-bleed band passing
       behind the margin can never swallow the links */
    background-color: var(--bg);
    background-image: radial-gradient(circle at 50% 50%, rgb(39 43 51 / 0.075) 1px, rgb(39 43 51 / 0) 1.35px);
    background-size: 12px 12px;
    backdrop-filter: none;
    border-bottom: 0;
    border-right: 1px solid var(--rule-firm);
  }
  .ix-cap { margin-bottom: 0.55rem; }
  .ix-list { display: grid; row-gap: 0; }
  .ix-link {
    display: grid;
    grid-template-columns: 1.65rem 1fr;
    align-items: baseline;
    gap: 0;
    padding: 0.36rem 0.3rem;
    font-size: 0.79rem;
    border: 0;
    border-top: 1px solid rgb(39 43 51 / 0.12);
    background: none;
  }
  .ix-list li:last-child .ix-link { border-bottom: 1px solid rgb(39 43 51 / 0.12); }
  .ix-link[aria-current="page"] {
    background: var(--surface);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .ix-foot {
    display: block;
    margin-top: 0.9rem;
    font-size: 0.62rem;
    line-height: 1.55;
    letter-spacing: 0.04em;
    color: var(--ink-faint);
  }
  #main { grid-column: 2; grid-row: 1; }
  #registry { grid-column: 2; grid-row: 2; }
  .tab { margin-left: -2.6rem; padding-left: 4.1rem; }
  .tab-n { left: 2.62rem; }
  .tab::after { left: 1.68rem; }
  .masthead { font-size: clamp(2rem, 3.4vw, 2.9rem); }
  .keyband { padding-left: 2.4rem; padding-right: 2.4rem; }
  .keyband .tab { margin-left: 0; }
  .oset-fig {
    width: calc(100% + var(--gut) + 10rem);
    margin-left: calc(-1 * (var(--gut) + 10rem));
  }
  .ann-n::before { right: 62%; }
  .ip-fig { width: 50%; margin-left: 2.2rem; }
}

/* ---------- motion ---------- */
@keyframes millDraw {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: 0; }
}

@keyframes swarfFlick {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  28% { opacity: 1; transform: translate(3px, 5px) scale(1); }
  100% { opacity: 0; transform: translate(9px, 20px) scale(0.5); }
}

@keyframes settleTag {
  from { opacity: 0; transform: rotate(-8deg) translate(-7px, -9px); }
  62% { opacity: 1; transform: rotate(2.2deg) translate(0, 1px); }
  to { opacity: 1; transform: rotate(0deg) translate(0, 0); }
}

@keyframes seatPlate {
  from { opacity: 0; transform: translateY(-7px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes partLeft {
  from { opacity: 0.22; transform: translateX(9px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes partRight {
  from { opacity: 0.22; transform: translateX(-9px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scoreSpine {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes markLate {
  0%, 100% { border-left-color: var(--accent2); }
  50% { border-left-color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .plate { animation: seatPlate 760ms cubic-bezier(0.18, 0.85, 0.3, 1) 60ms both; }

  .kc-rim { animation: millDraw 620ms ease-out 140ms both; }
  .kc-eye { animation: millDraw 300ms ease-out 700ms both; }
  .kc-shank { animation: millDraw 380ms ease-out 900ms both; }
  .kc-bitting { animation: millDraw 760ms linear 1240ms both; }
  .kc-tooth { animation: millDraw 150ms linear calc(1300ms + var(--i) * 118ms) both; }
  .kc-swarf circle { animation: swarfFlick 480ms ease-out calc(1350ms + var(--i) * 170ms) both; }
  .kc-ring { animation: millDraw 300ms ease-out 1980ms both; }
  .kc-string { animation: millDraw 300ms ease-out 2180ms both; }
  .kc-tagwrap { animation: settleTag 620ms cubic-bezier(0.2, 0.86, 0.26, 1) 2320ms both; }

  .verdict[data-tone="late"] { animation: markLate 2.4s ease-in-out 3; }
}

/* the assigned reveal: scroll-driven, on the split halves only, no JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .split > .statute,
    .ledger > li > .statute,
    .stage > li > .statute,
    .ann > .ann-b,
    .pair > .statute,
    .oset-wide,
    .ov-a,
    .part > dt {
      animation-name: partLeft;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% entry 78%;
    }
    .split > .record,
    .ledger > li > .record,
    .stage > li > .record,
    .ann > .ann-n,
    .pair > .record,
    .oset-narrow,
    .ov-b,
    .part > dd {
      animation-name: partRight;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: entry 5% entry 78%;
    }
    #main::after {
      animation-name: scoreSpine;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: view();
      animation-range: cover 0% cover 26%;
    }
  }
}

/* finished state, no movement, nothing merely shortened */
@media (prefers-reduced-motion: reduce) {
  .skip, .ix-link, .tab, .ledger > li, .stage > li, .part, .field-i, .go,
  .deep, .clock-run, .mp-dot, .yr-span, .reg-line a, .part dd a,
  .card, .sheet, .ch-n {
    transition: none;
  }
  .plate, .kc-rim, .kc-eye, .kc-shank, .kc-bitting, .kc-tooth, .kc-ring,
  .kc-string, .kc-tagwrap, .kc-swarf circle, .verdict[data-tone="late"],
  .split > .statute, .split > .record, .ledger > li > .statute,
  .ledger > li > .record, .stage > li > .statute, .stage > li > .record,
  .ann > .ann-b, .ann > .ann-n, .pair > .statute, .pair > .record,
  .oset-wide, .oset-narrow, .ov-a, .ov-b,
  .part > dt, .part > dd, #main::after {
    animation: none;
  }
  .plate, .kc-tagwrap, .split > .statute, .split > .record,
  .ledger > li > .statute, .ledger > li > .record,
  .stage > li > .statute, .stage > li > .record,
  .ann > .ann-b, .ann > .ann-n, .pair > .statute, .pair > .record,
  .oset-wide, .oset-narrow, .ov-a, .ov-b, .part > dt, .part > dd {
    opacity: 1;
    transform: none;
  }
  .kc-rim, .kc-eye, .kc-shank, .kc-bitting, .kc-tooth, .kc-ring, .kc-string {
    stroke-dashoffset: 0;
  }
  .kc-swarf circle { opacity: 0; }
  #main::after { transform: scaleY(1); }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  body { background: #ffffff; }
  #site-index, .skip, .calc, .clock { display: none; }
  .shell { display: block; max-width: none; padding: 0; }
  #main::before, #main::after, #registry::before { display: none; }
  .band { break-inside: avoid; border-top: 1px solid var(--ink); }
  .tab { margin-left: 0; padding-left: 2.7rem; background: #ffffff; }
  .bleed { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
  .keyband {
    --ink: #272b33;
    --bg: #ffffff;
    --surface: #ffffff;
    --accent: #b4561f;
    --accent2: #3f5d63;
    --rule: rgb(39 43 51 / 0.16);
    --rule-firm: rgb(39 43 51 / 0.3);
    --ink-soft: rgb(39 43 51 / 0.82);
    --ink-faint: rgb(39 43 51 / 0.56);
    background: #ffffff;
    color: #272b33;
  }
  .ov-b { margin: 0.8rem 0 0; box-shadow: none; }
  .ip-fig { float: none; width: auto; max-width: 28rem; margin: 0 0 0.8rem; }
}