@layer card, shelf, field;

/* UA defaults are kept deliberately. There is no reset here and no universal selector.
   A record card is a document: its paragraphs, lists and definition pairs should inherit
   the browser's own idea of a document and be corrected only where the shelf needs it.
   Anything reset here would have to be re-stated on every card that wanted it back. */

:root {
  --bg: #1e2119;
  --ink: #e4ebd6;
  --accent: #b8dc2e;
  --accent2: #6e7a5f;
  --surface: #262a1f;

  --ink-soft: color-mix(in oklab, var(--ink) 62%, var(--bg));
  /* The dim tiers are separated by HUE, not by lightness alone: dropping them far enough apart
     tonally put four of them under 3:1, and every one carries real text (the guide-only note,
     the registered facts, the unit labels). Measured, not eyeballed. */
  --ink-faint: color-mix(in oklab, var(--accent2) 44%, var(--ink));
  --label: color-mix(in oklab, var(--accent2) 64%, var(--ink));
  --rule: color-mix(in oklab, var(--accent2) 72%, var(--bg));
  --rule-faint: color-mix(in oklab, var(--accent2) 38%, var(--bg));
  --lift: color-mix(in oklab, var(--surface) 82%, var(--ink));
  --accent-dim: color-mix(in oklab, var(--accent) 46%, var(--bg));
  --accent-wash: color-mix(in oklab, var(--accent) 13%, var(--bg));

  --head: "Rufina", "Hoefler Text", Georgia, serif;
  --body: "Sen", "Segoe UI", system-ui, sans-serif;

  --step: 0.75rem;
  --gutter: clamp(1rem, 4vw, 2.6rem);
  --measure: 38rem;
  --bar: 3.4rem;

  /* diagonal-stripe: the hatch a form uses to strike out a field left blank */
  --hatch: repeating-linear-gradient(135deg,
      transparent 0 5px,
      color-mix(in oklab, var(--accent2) 30%, transparent) 5px 6px);
  --hatch-hot: repeating-linear-gradient(135deg,
      transparent 0 9px,
      color-mix(in oklab, var(--accent) 10%, transparent) 9px 10px);
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 100%;
  line-height: 1.62;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 var(--gutter) calc(var(--bar) + 3.2rem);
  background-image:
    radial-gradient(140% 70% at 8% -10%, color-mix(in oklab, var(--surface) 70%, transparent), transparent 60%);
  background-repeat: no-repeat;
  overflow-x: hidden;
}

input, select, button {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

/* ---------------------------------------------------------------- skip + masthead */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--accent);
  color: var(--bg);
  padding: 0.6rem 1rem;
  font-weight: 700;
  text-decoration: none;
  transition: left 0.14s ease-out;
}
.skip:focus {
  left: 0.4rem;
  top: 0.4rem;
  outline: 3px solid var(--ink);
}

.masthead {
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.5rem 0 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  align-items: baseline;
  border-bottom: 1px solid var(--rule-faint);
}
.masthead b {
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.03em;
}
.masthead span {
  font-size: 0.74rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.masthead span::before {
  content: "";
  display: inline-block;
  width: 1.5rem;
  height: 0;
  margin-right: 0.5rem;
  vertical-align: 0.22em;
  border-top: 2px solid var(--accent);
}

/* ---------------------------------------------------------------- footer-bar nav */

.footbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 30;
  background: color-mix(in oklab, var(--bg) 88%, #000000);
  border-top: 2px solid var(--accent);
  box-shadow: 0 -0.7rem 1.6rem rgb(0 0 0 / 0.46);
  backdrop-filter: blur(5px);
}
.footbar > ul {
  display: flex;
  gap: 0;
  margin: 0 auto;
  padding: 0;
  max-width: 72rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent2) transparent;
}
.footbar > ul > li {
  flex: 0 0 auto;
}
.footbar > ul > li > a {
  display: block;
  padding: 0.82rem 0.95rem;
  min-height: var(--bar);
  color: var(--ink-soft);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-top: 3px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-top-color 0.2s ease;
}
.footbar > ul > li > a:hover,
.footbar > ul > li > a:focus-visible {
  color: var(--ink);
  background: var(--surface);
  border-top-color: var(--accent2);
}
.footbar > ul > li > a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -4px;
}
.footbar > ul > li > a[aria-current="page"] {
  color: var(--accent);
  background: var(--accent-wash);
  border-top-color: var(--accent);
  font-weight: 700;
}

/* ---------------------------------------------------------------- opener: wide-rule-pair */

main {
  max-width: 72rem;
  margin: 0 auto;
}

.opener {
  margin: 0 0 3.4rem;
  padding: 0;
}
/* Two pairs of rules, each a heavy over a hair, one closing the registered-facts header and one
   opening the bench. Addressed by position rather than by :last-of-type, which paired them by
   accident: the third rule has no hr before it, so the sibling selector skipped it. */
.opener > hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 7px solid var(--accent);
  transform-origin: 0 50%;
  animation: ruleDraw 0.9s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}
.opener > hr:nth-of-type(2),
.opener > hr:nth-of-type(4) {
  border-top: 1px solid var(--rule);
  margin-top: 0.34rem;
  transform-origin: 100% 50%;
  animation-delay: 0.18s;
}
.opener > hr:nth-of-type(3) {
  margin-top: 2.4rem;
  animation-delay: 0.3s;
}
.opener > hr:nth-of-type(4) {
  animation-delay: 0.42s;
}

/* SHAPE 1 - wide-figure. The drawing takes the whole content width and the prose below is the
   figure's caption, set smaller and in columns, rather than a paragraph the drawing sits beside.
   The opener is the only section on this page built that way. */
.sheetfigure {
  margin: 1.7rem 0 0;
  padding: 0;
}
.sheetfigure > figcaption {
  margin: 1.4rem 0 0;
  padding: 1.05rem 0 0;
  border-top: 1px solid var(--rule);
}
.sheetfigure > figcaption > p {
  margin: 0 0 0.9rem;
  color: var(--ink-soft);
  font-size: 0.96rem;
  break-inside: avoid;
}
.sheetfigure > figcaption > p:last-child { margin-bottom: 0; }
.sheetfigure > figcaption > p.lede {
  color: var(--ink);
  font-size: 1.1rem;
}
@media (min-width: 58rem) {
  .sheetfigure > figcaption {
    columns: 3;
    column-gap: 2.8rem;
    column-rule: 1px solid var(--rule-faint);
  }
  .sheetfigure > figcaption > p.lede { font-size: 1.02rem; }
}

.opener h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(2.1rem, 8.4vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 1.5rem 0 0.9rem;
  max-width: 24ch;
}
.opener h1 em {
  font-style: normal;
  color: var(--accent);
}
.filed {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
  margin: 1.4rem 0 1.9rem;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.filed > li > b {
  display: block;
  font-family: var(--head);
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--ink);
}

/* ---------------------------------------------------------------- the set-piece */

.scene {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  overflow: visible;
}
/* The leaders that carry each figure from the bench across to the sheet, drawn in step with the
   ink. Same keyframe as the opening rules: one technique on this page, used twice. */
.scene .leader {
  fill: none;
  stroke: var(--rule-faint);
  stroke-width: 1;
  stroke-dasharray: 2 5;
  transform-box: fill-box;
  transform-origin: 0 50%;
  animation: ruleDraw 0.8s ease-out both;
  animation-delay: 1.02s;
}
.scene .leader-b { animation-delay: 2.8s; }
.scene .leader-c { animation-delay: 4.58s; }
.scene .grid-line { stroke: var(--rule-faint); stroke-width: 1; }
.scene .bench { stroke: var(--accent2); stroke-width: 2; }

.scene .carton {
  transform-box: fill-box;
  transform-origin: 50% 92%;
  animation: turnThrough 7.4s cubic-bezier(0.4, 0, 0.3, 1) both;
}
.scene .face-top { fill: color-mix(in oklab, var(--surface) 68%, var(--ink)); stroke: var(--ink-soft); stroke-width: 1.6; }
.scene .face-front { fill: color-mix(in oklab, var(--surface) 88%, var(--ink)); stroke: var(--ink-soft); stroke-width: 1.6; }
.scene .face-side { fill: color-mix(in oklab, var(--bg) 82%, #000000); stroke: var(--ink-soft); stroke-width: 1.6; }
.scene .seam { stroke: var(--accent2); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }

.scene .cal { opacity: 0; animation: calCue 7.4s linear both; }
.scene .cal-w { animation-delay: 0s; }
.scene .cal-d { animation-delay: 1.78s; }
.scene .cal-h { animation-delay: 3.56s; }
.scene .cal .beam { stroke: var(--accent); stroke-width: 2; }
.scene .cal .jaw { stroke: var(--accent); stroke-width: 3; stroke-linecap: square; fill: none; }
.scene .cal .jaw-a {
  transform-box: fill-box;
  animation: jawLeft 7.4s cubic-bezier(0.3, 0, 0.1, 1) both;
}
.scene .cal .jaw-b {
  transform-box: fill-box;
  animation: jawRight 7.4s cubic-bezier(0.3, 0, 0.1, 1) both;
}
.scene .cal-d .jaw-a, .scene .cal-d .jaw-b { animation-delay: 1.78s; }
.scene .cal-h .jaw-a, .scene .cal-h .jaw-b { animation-delay: 3.56s; }

.scene .sheet-rule { stroke: var(--rule-faint); stroke-width: 1; }
.scene .sheet-edge { fill: none; stroke: var(--accent2); stroke-width: 1.5; }
.scene .lab {
  fill: var(--ink-faint);
  font-family: "Sen", sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
}
.scene .fig {
  fill: var(--accent);
  font-family: "Rufina", serif;
  font-weight: 700;
  font-size: 19px;
  clip-path: inset(0 0 0 0);
  animation: inkIn 0.62s steps(14, end) both;
}
.scene .fig-w { animation-delay: 1.02s; }
.scene .fig-d { animation-delay: 2.8s; }
.scene .fig-h { animation-delay: 4.58s; }
.scene .unit { fill: var(--ink-faint); font-family: "Sen", sans-serif; font-size: 11px; }

/* The drawing scales with the column, so below this width its user-unit type would land under
   5 CSS px. The type is enlarged inside the viewBox rather than the whole figure being shrunk. */
@media (max-width: 52rem) {
  .scene .lab { font-size: 15px; letter-spacing: 0.05em; }
  .scene .unit { font-size: 15px; }
  .scene .fig { font-size: 28px; }
  .scene .stamp text { font-size: 15px; letter-spacing: 0.12em; }
}

.scene .stamp {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: stampDown 0.66s cubic-bezier(0.2, 1.5, 0.4, 1) both;
  animation-delay: 5.5s;
}
.scene .stamp rect { fill: none; stroke: var(--accent); stroke-width: 2; }
.scene .stamp text {
  fill: var(--accent);
  font-family: "Sen", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
}

@keyframes ruleDraw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes turnThrough {
  0%   { transform: rotate(-7deg) skewY(5deg); }
  22%  { transform: rotate(-7deg) skewY(5deg); }
  34%  { transform: rotate(3deg) skewY(-6.5deg) scaleX(0.9); }
  50%  { transform: rotate(3deg) skewY(-6.5deg) scaleX(0.9); }
  62%  { transform: rotate(-2.5deg) skewY(2deg) scaleY(1.07); }
  76%  { transform: rotate(-2.5deg) skewY(2deg) scaleY(1.07); }
  90%  { transform: rotate(0deg) skew(0deg) scale(1.01); }
  100% { transform: rotate(0deg) skew(0deg) scale(1); }
}
@keyframes jawLeft {
  0%  { transform: translateX(-26px); }
  11% { transform: translateX(-26px); }
  21% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes jawRight {
  0%  { transform: translateX(26px); }
  11% { transform: translateX(26px); }
  21% { transform: translateX(0); }
  100% { transform: translateX(0); }
}
@keyframes calCue {
  0%   { opacity: 0; }
  7%   { opacity: 1; }
  23%  { opacity: 1; }
  30%  { opacity: 0.42; }
  100% { opacity: 0.42; }
}
@keyframes inkIn {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes stampDown {
  0%   { opacity: 0; transform: rotate(-16deg) scale(1.55); }
  72%  { opacity: 1; transform: rotate(-16deg) scale(0.95); }
  100% { opacity: 1; transform: rotate(-16deg) scale(1); }
}
@keyframes ledgeSettle {
  from { transform: scaleX(0.12); }
  to   { transform: scaleX(1); }
}

/* the sub-page bench figure borrows the scene's vocabulary and adds its own three parts */
.scene .itm { fill: color-mix(in oklab, var(--surface) 86%, var(--ink)); stroke: var(--ink-soft); stroke-width: 1.6; }
.scene .platen { fill: var(--surface); stroke: var(--accent2); stroke-width: 1.5; }
.scene .kept { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.scene .kept-lab { fill: var(--accent); }
.scene .fig2 {
  fill: var(--ink);
  font-family: "Rufina", serif;
  font-weight: 700;
  font-size: 17px;
}
.scene .jaw { stroke: var(--accent); stroke-width: 3; stroke-linecap: square; fill: none; }
.scene .beam { stroke: var(--accent); stroke-width: 2; fill: none; }

/* ---------------------------------------------------------------- side-tab heads */

main > section {
  margin: 0 0 3.6rem;
  scroll-margin-top: 1.4rem;
}

main > section > h2,
main > section > .bandrail-in > h2 {
  position: relative;
  margin: 0 0 1.5rem;
  padding: 0.52rem 2.4rem 0.46rem 0.95rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.18rem, 4.4vw, 1.62rem);
  line-height: 1.22;
  color: var(--ink);
  background: var(--surface);
  border-left: 5px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 1.5rem) 0, 100% 100%, 0 100%);
  transition: background-color 0.25s ease, border-left-color 0.25s ease;
}
main > section > h2 > small,
main > section > .bandrail-in > h2 > small {
  display: block;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--label);
}
main > section:hover > h2,
main > section:hover > .bandrail-in > h2 {
  background: var(--lift);
}

@media (min-width: 60rem) {
  main > section > h2,
  main > section > .bandrail-in > h2 {
    /* Exactly the page gutter, so the tab reaches the frame edge and never past it. The old
       -3.1rem overshot at narrow desktop widths and was only hidden by the body's overflow. */
    margin-left: calc(var(--gutter) * -1);
    padding-left: calc(var(--gutter) + 0.95rem);
  }
  main > section > h2::after,
  main > section > .bandrail-in > h2::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    top: 50%;
    width: 1rem;
    height: 0;
    border-top: 1px dashed var(--accent2);
    transform: translateY(-50%);
  }
}

main > section > p,
main > section > .bandrail-in > p {
  max-width: var(--measure);
  margin: 0 0 1.05rem;
  color: var(--ink-soft);
}
main > section > p > strong {
  color: var(--ink);
  font-weight: 700;
}
main > section > p > a,
main > section > ul > li > a,
main > section > dl a,
main > section > .bandrail-in > p > a,
.offsheet-body a,
.plate-wrap a,
.marginal a,
.shelf-blank a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, background-color 0.18s ease;
}
main > section > p > a:hover,
main > section > ul > li > a:hover,
main > section > .bandrail-in > p > a:hover,
.offsheet-body a:hover,
.plate-wrap a:hover,
.marginal a:hover,
.shelf-blank a:hover {
  background: var(--accent-wash);
  color: var(--ink);
}

/* The line that reports which fields on the shelf above are still empty. Kept UNLAYERED on
   purpose: `main > section > p` is unlayered, and an unlayered rule beats a layered one whatever
   the specificity, so a margin declared inside @layer shelf lost to it and the shelf ledge drew
   straight over this line. */
.shelf-blank {
  margin: 0.7rem 0 0;
  padding: 0 0 0 0.1rem;
  max-width: 54rem;
  font-size: 0.84rem;
  color: var(--ink-faint);
}
.shelf-blank > b {
  display: inline-block;
  margin-right: 0.45rem;
  padding: 0.05rem 0.4rem;
  background-image: var(--hatch);
  border: 1px solid var(--rule-faint);
  color: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shelf-blank > span {
  color: var(--ink-soft);
}


/* ---------------------------------------------------------------- card-shelf */

@layer shelf {
  .shelf {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.9rem;
    margin: 0;
    padding: 0 0 1.1rem;
    list-style: none;
    position: relative;
  }
  .shelf::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 0;
    border-top: 3px solid var(--accent2);
    border-bottom: 1px solid var(--rule-faint);
    box-shadow: 0 0.5rem 0.9rem -0.4rem rgb(0 0 0 / 0.55);
    transform-origin: 0 50%;
    animation: ledgeSettle 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) both;
  }
  .shelf > li {
    position: relative;
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.75s ease, translate 0.75s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  @starting-style {
    .shelf > li {
      opacity: 0;
      translate: 0 1.5rem;
    }
  }
  .shelf > li:nth-child(2) { transition-delay: 0.08s; }
  .shelf > li:nth-child(3) { transition-delay: 0.16s; }
  .shelf > li:nth-child(4) { transition-delay: 0.24s; }

  @media (min-width: 44rem) {
    .shelf { grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); }
  }
}

@layer card {
  .shelf > li > article {
    /* height:100% on a content-box adds padding and border on top of the 100%, so the card
       overflowed its own shelf by 36 px and the ledge cut through the line below it. */
    box-sizing: border-box;
    height: 100%;
    padding: 0.95rem 1.05rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule-faint);
    border-bottom: 3px solid var(--accent2);
    transition: border-color 0.25s ease, background-color 0.25s ease,
                box-shadow 0.25s ease, translate 0.25s ease;
  }
  .shelf > li > article:hover {
    background: var(--lift);
    border-bottom-color: var(--accent);
    translate: 0 -2px;
    box-shadow: 0 0.6rem 1rem -0.5rem rgb(0 0 0 / 0.6);
  }
  .shelf > li > article > h3 {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.7rem;
    margin: 0 0 0.5rem;
    font-family: var(--head);
    font-weight: 700;
    font-size: 1.04rem;
    line-height: 1.2;
  }
  .shelf > li > article > h3 > code {
    flex: 0 0 auto;
    font-family: var(--body);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--label);
  }
  .shelf > li > article > p {
    margin: 0 0 0.7rem;
    font-size: 0.93rem;
    color: var(--ink-soft);
  }
}

/* ---------------------------------------------------------------- definition-grid */

.fieldset-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.18rem 0.8rem;
  margin: 0 0 0.75rem;
  font-size: 0.86rem;
}
.fieldset-grid > dt {
  color: var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
  padding-top: 0.22rem;
}
.fieldset-grid > dd {
  margin: 0;
  color: var(--ink);
}
.fieldset-grid > dd > b {
  font-family: var(--head);
  font-weight: 700;
}

/* ---------------------------------------------------------------- :target reveal */

@layer field {
  .shelf > li > article > div {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows 0.42s cubic-bezier(0.3, 0.9, 0.2, 1),
                opacity 0.3s ease 0.08s, visibility 0.42s step-end;
  }
  .shelf > li > article > div > div {
    overflow: hidden;
    min-height: 0;
  }
  .shelf > li:target > article {
    background: var(--accent-wash);
    border-color: var(--accent);
    border-bottom-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
  }
  .shelf > li:target > article > div {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition: grid-template-rows 0.42s cubic-bezier(0.3, 0.9, 0.2, 1),
                opacity 0.3s ease 0.08s, visibility 0s;
  }
  .shelf > li:target > article > h3 {
    color: var(--accent);
  }

  .open-field {
    display: inline-block;
    margin-top: 0.3rem;
    padding: 0.28rem 0.62rem;
    background: transparent;
    border: 1px solid var(--accent2);
    color: var(--ink-soft);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
  }
  .open-field:hover,
  .open-field:focus-visible {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
  }
  /* Only one note is open at a time: :target is singular, so opening a second
     note closes the first. There is no close link and no fragment that leads nowhere. */
  .shelf > li:target > article .open-field {
    border-color: var(--accent);
    color: var(--accent);
    background-image: var(--hatch-hot);
  }

  /* The same disclosure, in the two shelves that are not cards: the fieldrows drops a row open
     beneath the line, the slip opens under its own foot. :target stays singular either way, so
     one note is ever open and there is no close link and no fragment leading nowhere. */
  .led-drop,
  .slip-drop {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    opacity: 0;
    transition: grid-template-rows 0.4s cubic-bezier(0.3, 0.9, 0.2, 1),
                opacity 0.28s ease 0.06s, visibility 0.4s step-end;
  }
  .led-drop > div,
  .slip-drop > div {
    overflow: hidden;
    min-height: 0;
  }
  .fieldrows > li:target {
    background: var(--accent-wash);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .slips > li:target {
    background: var(--accent-wash);
    border-bottom-color: var(--accent);
  }
  .fieldrows > li:target > .led-drop,
  .slips > li:target > .slip-drop {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    transition: grid-template-rows 0.4s cubic-bezier(0.3, 0.9, 0.2, 1),
                opacity 0.28s ease 0.06s, visibility 0s;
  }
  .fieldrows > li:target > .led-name,
  .slips > li:target > h3 { color: var(--accent); }
  .fieldrows > li:target .open-field,
  .slips > li:target .open-field {
    border-color: var(--accent);
    color: var(--accent);
    background-image: var(--hatch-hot);
  }

  .note-body {
    margin: 0.85rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 1px dashed var(--accent2);
    font-size: 0.89rem;
    color: var(--ink-soft);
  }
  .note-body > p { margin: 0 0 0.6rem; }
  .note-body > p:last-child { margin: 0; }
  .note-body strong { color: var(--ink); }
}

/* ---------------------------------------------------------------- the two tools */

.tool {
  margin: 1.5rem 0 0;
  padding: 1.1rem 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--accent);
}
.tool > p.tool-lede {
  max-width: var(--measure);
  margin: 0 0 1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.tool fieldset {
  margin: 0 0 1rem;
  padding: 0.8rem 0.9rem 0.95rem;
  border: 1px solid var(--rule-faint);
}
.tool legend {
  padding: 0 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}
.tool label {
  display: block;
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool input[type="date"],
.tool input[type="number"],
.tool select {
  display: block;
  inline-size: 100%;
  max-width: 17rem;
  margin: 0 0 0.9rem;
  padding: 0.52rem 0.6rem;
  background: var(--bg);
  border: 1px solid var(--accent2);
  color: var(--ink);
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.tool input[type="date"]:focus-visible,
.tool input[type="number"]:focus-visible,
.tool select:focus-visible {
  border-color: var(--accent);
  /* --accent-wash is 13% accent on the background: as a hover tint it is right, as the ONLY
     focus indicator it was all but invisible against the field's own dark fill. Measured, not
     assumed - the ring is now the accent itself, offset clear of the border. */
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tool button {
  padding: 0.6rem 1.15rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, letter-spacing 0.2s ease;
}
.tool button:hover {
  background: transparent;
  color: var(--accent);
  letter-spacing: 0.17em;
}
.tool button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

.ticks {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.1rem;
}
.ticks > li > label {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.55rem;
  align-items: start;
  margin: 0;
  padding: 0.42rem 0.5rem;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color 0.2s ease, color 0.2s ease, border-left-color 0.2s ease;
}
.ticks > li > label:hover {
  background: var(--lift);
  color: var(--ink);
  border-left-color: var(--accent2);
}
.ticks input[type="checkbox"] {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0.26rem 0 0;
  accent-color: var(--accent);
}
.ticks > li > label > span > b {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  color: var(--ink);
}
.ticks > li > label > span > i {
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-faint);
}
.ticks > li:has(input:checked) > label {
  border-left-color: var(--accent);
  color: var(--ink);
}

/* The two instruments are the only component that appears twice on the index, so they are not
   allowed the same silhouette: the checker is a tall column of ticks, the planner lays its two
   controls out side by side once there is room. */
@media (min-width: 48rem) {
  #clockForm fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.8rem;
  }
  #clockForm label[for="received"] { grid-column: 1; grid-row: 1; }
  #clockForm input[type="date"] { grid-column: 1; grid-row: 2; max-width: none; }
  #clockForm label[for="mode"] { grid-column: 2; grid-row: 1; margin-top: 0; }
  #clockForm select { grid-column: 2; grid-row: 2; max-width: none; }
}

.readout {
  display: block;
  margin: 0.4rem 0 0;
  padding: 0.9rem 0.95rem;
  background: var(--bg);
  border: 1px dashed var(--accent2);
  font-size: 0.92rem;
}
.readout p {
  margin: 0 0 0.6rem;
}
.readout p:last-child { margin: 0; }
.readout .sum {
  display: block;
  margin: 0.2rem 0 0.8rem;
  padding: 0.5rem 0.6rem;
  background-color: var(--surface);
  background-image: var(--hatch-hot);
  border-left: 3px solid var(--accent);
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ink);
}
.readout .sum > span {
  display: block;
  font-family: var(--body);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--label);
}
.readout b.hit { color: var(--accent); }
.readout ol, .readout ul {
  margin: 0 0 0.7rem;
  padding-left: 1.3rem;
}
.readout li { margin: 0 0 0.3rem; }
.readout li > b { color: var(--ink); }
.readout .absent {
  display: inline-block;
  padding: 0 0.35rem;
  background-image: var(--hatch);
  border: 1px solid var(--accent2);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.readout .guide {
  margin-top: 0.8rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule-faint);
  font-size: 0.8rem;
  color: var(--ink-faint);
}

/* ================================================================ COMPOSITION SHAPES

   Nine body sections, nine shapes, no shape used twice. The three field shelves are still
   three shelves of one record - same heading pattern, same field code, same unit and
   filled-by pair, same note disclosure, same "still blank" line underneath - but only one of
   them is built as a grid of cards. The fieldrows and the slips carry the other two, because a
   shelf repeated three times as the same figure is one figure, not three.
   ================================================================================ */

/* ---------------------------------------------------------------- SHAPE 2: ledger-rows */

.fieldrows {
  margin: 1.3rem 0 0.8rem;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--accent2);
}
.fieldrows > li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  grid-template-areas:
    "no   name act"
    "no   what what"
    "no   unit unit"
    "no   who  who"
    "drop drop drop";
  column-gap: 0.9rem;
  padding: 0.7rem 0 0.75rem;
  border-bottom: 1px solid var(--rule-faint);
  opacity: 1;
  translate: 0 0;
  transition: background-color 0.24s ease, opacity 0.7s ease,
              translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@starting-style {
  .fieldrows > li { opacity: 0; translate: 0 1.1rem; }
}
.fieldrows > li:nth-child(3) { transition-delay: 0.08s; }
.fieldrows > li:nth-child(4) { transition-delay: 0.16s; }
.fieldrows > li:hover { background: var(--surface); }
.fieldrows > li > b {
  grid-area: no;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.2;
  text-align: right;
  color: var(--accent);
}
.led-name {
  grid-area: name;
  font-family: var(--head);
  font-size: 1.02rem;
  color: var(--ink);
}
.led-what { grid-area: what; margin: 0.15rem 0 0.3rem; font-size: 0.91rem; color: var(--ink-soft); }
.led-unit {
  grid-area: unit;
  font-family: var(--head);
  font-size: 0.9rem;
  color: var(--ink);
}
.led-who {
  grid-area: who;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--label);
}
.led-act { grid-area: act; justify-self: end; }
.led-drop { grid-area: drop; }
/* The column captions are a desktop device: on a phone the row is read top to bottom and a
   header strip above it would caption nothing. Qualified by .fieldrows > li, or the display:grid
   on the row wins on specificity and the caption strip shows up on the phone as a stray row. */
.fieldrows > li.fieldrows-head { display: none; }

@media (min-width: 60rem) {
  .fieldrows > li {
    grid-template-columns: 2.4rem 10.5rem minmax(0, 1fr) 10.5rem 12rem 4.6rem;
    grid-template-areas:
      "no   name what unit who  act"
      "drop drop drop drop drop drop";
    column-gap: 1.1rem;
    align-items: start;
  }
  .fieldrows > li > .led-what { margin: 0; }
  .fieldrows > li > .led-name,
  .fieldrows > li > .led-what,
  .fieldrows > li > .led-unit,
  .fieldrows > li > .led-who,
  .fieldrows > li > .led-act {
    padding-left: 1.1rem;
    border-left: 1px solid var(--rule-faint);
    min-height: 1.3rem;
  }
  .fieldrows > li.fieldrows-head {
    display: grid;
    padding: 0 0 0.4rem;
    border-bottom: 2px solid var(--rule);
  }
  .fieldrows > li.fieldrows-head > b,
  .fieldrows > li.fieldrows-head > span {
    font-family: var(--body);
    font-weight: 400;
    font-size: 0.64rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--label);
    border-left-color: transparent;
    min-height: 0;
  }
  .fieldrows > li.fieldrows-head > b { text-align: right; color: var(--label); }
}

/* ---------------------------------------------------------------- SHAPE 4: pull-quote */

.stamped {
  margin: 1.5rem 0 1.5rem;
  padding: 0.2rem 0 0.2rem 1.5rem;
  border-left: 6px solid var(--accent);
  max-width: 48rem;
}
.stamped > p {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.65rem, 5.8vw, 2.85rem);
  line-height: 1.07;
  letter-spacing: -0.013em;
  color: var(--ink);
}
.stamped em {
  font-style: normal;
  color: var(--accent);
}

/* the three declared fields, as paper slips rather than as cards or fieldrows rows */
.slips {
  display: grid;
  gap: 0.7rem;
  margin: 1.4rem 0 0;
  padding: 0 0 0.2rem;
  list-style: none;
}
.slips > li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  padding: 0.8rem 1.1rem 0.85rem 1.6rem;
  background: var(--surface);
  border-bottom: 1px dashed var(--accent2);
  opacity: 1;
  translate: 0 0;
  transition: background-color 0.24s ease, opacity 0.7s ease,
              translate 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slips > li::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.6rem;
  background-image: var(--hatch);
  border-right: 1px solid var(--rule-faint);
}
@starting-style {
  .slips > li { opacity: 0; translate: -1.2rem 0; }
}
.slips > li:nth-child(2) { transition-delay: 0.09s; }
.slips > li:nth-child(3) { transition-delay: 0.18s; }
.slips > li:hover { background: var(--lift); }
.slips > li > h3 {
  grid-column: 1;
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--ink);
}
.slip-code {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
}
.slips > li > p {
  grid-column: 1 / -1;
  margin: 0.3rem 0 0.55rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.fieldline {
  grid-column: 1 / -1;
  margin: 0 0 0.6rem;
}
.fieldline > dt {
  display: inline;
  white-space: nowrap;
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--label);
}
.fieldline > dt::after { content: "\00a0"; }
.fieldline > dd {
  display: inline;
  margin: 0 1.3rem 0 0.3rem;
  font-family: var(--head);
  font-size: 0.92rem;
  color: var(--ink);
}
.slips > li > .open-field { grid-column: 1 / -1; justify-self: start; }
.slip-drop { grid-column: 1 / -1; }

/* ---------------------------------------------------------------- SHAPE 5: offset-split */

.offsheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
  margin: 0.4rem 0 0;
}
.offsheet-fig { margin: 0; }
.offsheet-fig > svg {
  display: block;
  width: 11rem;
  max-width: 62%;
  height: auto;
}
.offsheet-fig > figcaption {
  margin: 0.55rem 0 0;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
}
.offsheet-body > p {
  max-width: var(--measure);
  margin: 0 0 0.95rem;
  color: var(--ink-soft);
}
.offsheet-body > p:last-child { margin-bottom: 0; }
.offsheet-body > p > b {
  font-family: var(--head);
  font-weight: 700;
  color: var(--accent);
}
/* the two-bar ribbon on the cancellation page */
.rb-a { fill: color-mix(in oklab, var(--accent) 24%, var(--bg)); stroke: var(--accent); stroke-width: 1.2; }
.rb-b { fill: color-mix(in oklab, var(--accent2) 32%, var(--bg)); stroke: var(--accent2); stroke-width: 1.2; }
.rb-void { fill: none; stroke: var(--rule-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.rb-axis { fill: none; stroke: var(--accent2); stroke-width: 1.2; }
.rb-cap {
  fill: var(--ink-soft);
  font-family: "Sen", sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
}
.rb-end { fill: var(--accent); font-family: "Rufina", serif; font-weight: 700; font-size: 14px; }
.rb-num { fill: var(--ink-faint); font-family: "Sen", sans-serif; font-size: 11px; letter-spacing: 0.1em; }
.rb-mid { text-anchor: middle; }
.rb-right { text-anchor: end; }
.sh-page { fill: var(--surface); stroke: var(--accent2); stroke-width: 1.6; }
.sh-rule { fill: none; stroke: var(--rule-faint); stroke-width: 1; }
.sh-tick { fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.sh-off { fill: none; stroke: var(--accent2); stroke-width: 1.4; stroke-dasharray: 5 4; }
.sh-strike { fill: none; stroke: var(--rule); stroke-width: 1; }
.sh-lead { fill: none; stroke: var(--accent2); stroke-width: 1.2; stroke-dasharray: 3 3; }
.sh-cross { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.72; }

@media (min-width: 58rem) {
  .offsheet {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 5.2rem;
    align-items: start;
  }
  /* The overhang. The drawing is wider than its column and crosses the body column's rule; the
     body's own padding keeps the words clear of it. */
  .offsheet-fig {
    position: relative;
    z-index: 2;
    margin-right: -6.4rem;
  }
  .offsheet-fig > svg { width: 100%; max-width: none; }
  /* the drawing overhangs; its caption should not - keep the words inside the column */
  .offsheet-fig > figcaption { padding-right: 6.4rem; }
  .offsheet-body {
    padding-left: 2.3rem;
    border-left: 1px solid var(--rule-faint);
  }
}

/* ---------------------------------------------------------------- SHAPE 6: full-bleed-band */

/* Edge to edge: the only section on the page that leaves the 72rem frame. Body already
   carries overflow-x: hidden, which absorbs the scrollbar's width at the two ends. */
.bandrail {
  margin-inline: calc(50% - 50vw);
  padding: 2.3rem 0 2.5rem;
  background-color: color-mix(in oklab, var(--surface) 80%, var(--bg));
  background-image: var(--hatch-hot);
  border-top: 3px solid var(--accent);
  border-bottom: 1px solid var(--rule);
}
.bandrail-in {
  /* border-box, or the padding is added to the max-width and the band's content lands a whole
     gutter left of the sections above and below it. */
  box-sizing: border-box;
  max-width: calc(72rem + var(--gutter) * 2);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- SHAPE 7: inset-plate */

.plate-wrap { max-width: 46rem; }
.plate-wrap::after { content: ""; display: block; clear: both; }
.plate-wrap > p {
  margin: 0 0 1rem;
  color: var(--ink-soft);
}
.inset-plate {
  margin: 0.2rem 0 1.1rem;
  padding: 0.85rem 0.95rem 0.8rem;
  background: var(--surface);
  border: 1px solid var(--rule-faint);
  border-left: 4px solid var(--accent);
  box-shadow: 0 0.6rem 1.3rem -0.8rem rgb(0 0 0 / 0.65);
}
.inset-plate > svg {
  display: block;
  width: 100%;
  max-width: 18rem;
  height: auto;
}
.inset-plate > figcaption {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--accent2);
  font-size: 0.74rem;
  color: var(--label);
}
.mg-cell { stroke: var(--rule-faint); stroke-width: 1; }
.mg-a { fill: color-mix(in oklab, var(--accent) 22%, var(--bg)); }
.mg-b { fill: color-mix(in oklab, var(--accent2) 30%, var(--bg)); }
.mg-last { stroke: var(--accent); stroke-width: 2; }
.mg-split { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-dasharray: 4 3; }
.mg-edge { fill: none; stroke: var(--accent2); stroke-width: 1.4; }
.mg-num { fill: var(--ink-faint); font-family: "Sen", sans-serif; font-size: 11px; }
.mg-cap {
  fill: var(--ink-soft);
  font-family: "Sen", sans-serif;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.mg-mid { fill: var(--accent); }
.mg-dim { fill: var(--ink-faint); }

@media (min-width: 50rem) {
  /* the plate is set INTO the text block and the paragraphs run past its right edge */
  .inset-plate {
    box-sizing: border-box;
    float: left;
    width: 19.5rem;
    margin: 0.4rem 1.8rem 1.1rem 0;
  }
  .inset-plate > svg { max-width: none; }
}

/* ---------------------------------------------------------------- SHAPE 8: step-chain */

.workdown {
  position: relative;
  margin: 1.4rem 0 0;
  padding: 0;
  list-style: none;
}
/* the line the steps hang on, running from the first rung to the last */
.workdown::before {
  content: "";
  position: absolute;
  left: 1.09rem;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 0;
  border-left: 2px solid var(--accent2);
}
.workdown > li {
  position: relative;
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr);
  column-gap: 1.7rem;
  padding: 0 0 1.6rem;
}
.workdown > li:last-child { padding-bottom: 0; }
/* the tick that joins a rung to the words beside it */
.workdown > li::after {
  content: "";
  position: absolute;
  left: 2.3rem;
  top: 1.05rem;
  width: 1.3rem;
  height: 0;
  border-top: 1px dashed var(--accent2);
}
.workdown .rung {
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  background: var(--bg);
  border: 2px solid var(--accent);
  rotate: 45deg;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.workdown .rung > b {
  rotate: -45deg;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--accent);
}
.workdown > li:hover .rung { background: var(--accent-wash); }
/* Qualified down to the step, because .prose h3 on a sub-page matches this heading at the same
   specificity and, being later in the file, was winning: it put a 2rem gap above every step and
   a second dash in front of the workdown's own tick. */
.workdown > li > div > h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.8rem;
  align-items: baseline;
  margin: 0 0 0.4rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--ink);
}
.workdown > li > div > h3::before { content: none; }
.workdown > li > div > h3 > em {
  font-style: normal;
  font-family: var(--body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bg);
  background: var(--accent);
  padding: 0.14rem 0.5rem 0.1rem;
}
.workdown > li > div > p {
  max-width: 40rem;
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------- SHAPE 9: margin-annotated */

.marginal { max-width: 62rem; }
.marginal-lede {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}
.marginal > article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.55rem;
  padding: 1rem 0 1.1rem;
  border-top: 1px solid var(--rule-faint);
}
.marginal > article:first-of-type { border-top: 2px solid var(--accent2); }
.marginal > article > h3 {
  margin: 0;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.06rem;
  color: var(--ink);
}
.marginal > article > p {
  max-width: 33rem;
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
}
/* the note hangs beside the paragraph it annotates, not under it */
.marginal > article > aside {
  padding-left: 0.95rem;
  border-left: 2px solid var(--accent);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--label);
}
.marginal > article > aside em { font-style: normal; color: var(--accent); }

@media (min-width: 64rem) {
  .marginal > article {
    grid-template-columns: minmax(0, 1fr) 15rem;
    grid-template-areas:
      "head note"
      "body note";
    column-gap: 3rem;
    row-gap: 0.45rem;
  }
  .marginal > article > h3 { grid-area: head; }
  .marginal > article > p { grid-area: body; }
  .marginal > article > aside {
    grid-area: note;
    align-self: start;
    padding-left: 1.2rem;
    border-left: 1px solid var(--rule);
  }
}

/* ---------------------------------------------------------------- sub-page composition

   The sub-pages carry the same nine shapes, two apiece and no two pages the same pair, so that
   a reader moving from one to the next does not meet the same figure again. The prose measure
   is 38rem; a shape that needs more room is given its own width here rather than everywhere. */

.prose.prose-wide { max-width: 46rem; }
.prose.prose-full { max-width: none; }
.prose > .plate-wrap { max-width: none; }
.sheetfigure-page { margin: 0 0 2.6rem; }
.sheetfigure-page > figcaption {
  /* one column: this caption is a single paragraph, and three columns broke it mid-sentence */
  columns: 1;
  max-width: 54rem;
  margin: 1.2rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.sheetfigure-page > figcaption > b {
  display: block;
  margin: 0 0 0.3rem;
  font-family: var(--head);
  font-size: 1rem;
  color: var(--ink);
}
/* an inset plate can carry words instead of a drawing */
.inset-plate > .platetext > b {
  display: block;
  margin: 0 0 0.45rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.inset-plate > .platetext > p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.inset-plate > .platetext > p:last-child { margin: 0; }
/* the band and the card shelf sit outside the prose on a sub-page, so they need their own lede */
.bandrail-in > h3 {
  margin: 0 0 0.7rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}
.bandrail-in > p {
  max-width: var(--measure);
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
}
.bandrail-in > p > a,
.shelf-lede > a,
.offsheet-lede > a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  transition: color 0.18s ease, background-color 0.18s ease;
}
.bandrail-in > p > a:hover,
.shelf-lede > a:hover,
.offsheet-lede > a:hover { background: var(--accent-wash); color: var(--ink); }
.shelf-lede,
.offsheet-lede {
  max-width: var(--measure);
  margin: 0 0 1.1rem;
  color: var(--ink-soft);
}
.rulehead {
  margin: 0 0 0.7rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
}
.rulehead::before {
  content: "";
  display: inline-block;
  width: 0.9rem;
  height: 0;
  margin-right: 0.55rem;
  vertical-align: 0.3em;
  border-top: 2px solid var(--accent);
}

/* ---------------------------------------------------------------- sub-page body */

.page-head {
  max-width: 72rem;
  margin: 0 auto 2.6rem;
  padding: 1.9rem 0 0;
}
.page-head > hr {
  height: 0;
  margin: 0 0 1.4rem;
  border: 0;
  border-top: 7px solid var(--accent);
  transform-origin: 0 50%;
  animation: ruleDraw 0.8s cubic-bezier(0.16, 0.9, 0.24, 1) both;
}
.page-head > hr + hr {
  border-top: 1px solid var(--rule);
  margin: 0.3rem 0 1.5rem;
  transform-origin: 100% 50%;
  animation-delay: 0.16s;
}
.page-head h1 {
  font-family: var(--head);
  font-weight: 700;
  font-size: clamp(1.7rem, 6.6vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.8rem;
  max-width: 28ch;
}
.page-head > p {
  max-width: var(--measure);
  margin: 0;
  font-size: 1.04rem;
  color: var(--ink-soft);
}

.prose {
  max-width: var(--measure);
}
.prose h3 {
  margin: 2rem 0 0.6rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--ink);
}
.prose h3::before {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0;
  margin-right: 0.5rem;
  vertical-align: 0.3em;
  border-top: 2px solid var(--accent);
}
.prose p { margin: 0 0 1rem; color: var(--ink-soft); }
.prose strong { color: var(--ink); }
.prose > ol, .prose > ul {
  margin: 0 0 1.2rem;
  padding-left: 1.4rem;
  color: var(--ink-soft);
}
.prose li { margin: 0 0 0.5rem; }
.prose li > b { color: var(--ink); }
.prose a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.prose a:hover { background: var(--accent-wash); color: var(--ink); }

.steps {
  margin: 1.3rem 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps > li {
  position: relative;
  counter-increment: step;
  margin: 0;
  padding: 0.75rem 0 0.75rem 3.1rem;
  border-top: 1px solid var(--rule-faint);
  color: var(--ink-soft);
  font-size: 0.94rem;
  transition: border-top-color 0.2s ease;
}
.steps > li:hover { border-top-color: var(--accent); }
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.78rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--accent);
}
.steps > li > b { display: block; color: var(--ink); }

.plate {
  margin: 1.6rem 0;
  padding: 1rem 1.05rem;
  background: var(--surface);
  border-left: 4px solid var(--accent2);
}
.plate > h3 {
  margin: 0 0 0.5rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1rem;
}
.plate > h3::before { content: none; }
.plate > p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--ink-soft); }
.plate > p:last-child { margin: 0; }

/* A reference table has a min-content width that no amount of column tuning gets below a
   320px screen. It scrolls inside its own region rather than taking the page sideways with
   it, and the region is focusable so the scroll is reachable from the keyboard. */
.scroll-x {
  overflow-x: auto;
  max-width: 100%;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--accent2) transparent;
  transition: box-shadow 0.2s ease;
}
.scroll-x:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.tabulated {
  width: 100%;
  margin: 1.4rem 0;
  border-collapse: collapse;
  font-size: 0.89rem;
  text-align: left;
}
.tabulated caption {
  padding: 0 0 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  text-align: left;
}
.tabulated th {
  padding: 0.5rem 0.6rem 0.5rem 0;
  border-bottom: 2px solid var(--accent2);
  font-family: var(--body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  vertical-align: bottom;
}
.tabulated td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  border-bottom: 1px solid var(--rule-faint);
  color: var(--ink-soft);
  vertical-align: top;
}
.tabulated td:first-child { color: var(--ink); }
.tabulated tbody tr {
  transition: background-color 0.2s ease;
}
.tabulated tbody tr:hover { background: var(--surface); }

/* ---------------------------------------------------------------- colophon */

.colophon {
  max-width: 72rem;
  margin: 3.6rem auto 0;
  padding: 1.7rem 0 0.6rem;
  border-top: 7px solid var(--accent);
  font-size: 0.86rem;
  color: var(--ink-faint);
}
.colophon > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.3rem;
}
.colophon address {
  font-style: normal;
  line-height: 1.75;
}
.colophon address > b {
  display: block;
  font-family: var(--head);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.colophon address > span { display: block; }
.colophon address > span:first-of-type {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--rule-faint);
}
.colophon dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.2rem 0.9rem;
  margin: 0;
}
.colophon dt {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  padding-top: 0.2rem;
}
.colophon dd { margin: 0; color: var(--ink-soft); }
.colophon a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.colophon a:hover { background: var(--accent-wash); color: var(--ink); }
.colophon > p {
  margin: 1.3rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-faint);
  font-size: 0.78rem;
}
@media (min-width: 46rem) {
  .colophon > div { grid-template-columns: 17rem 1fr; gap: 2.4rem; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* The set-piece lands finished: carton square, every figure fully inked,
     every caliper closed on its axis, reference stamped. */
  .opener > hr,
  .page-head > hr,
  .scene .carton,
  .scene .cal,
  .scene .cal .jaw-a,
  .scene .cal .jaw-b,
  .scene .fig,
  .scene .stamp,
  .scene .leader,
  .shelf::after {
    animation: none;
  }
  .opener > hr, .page-head > hr { transform: scaleX(1); }
  .scene .carton { transform: rotate(0deg) skew(0deg) scale(1); }
  .scene .cal { opacity: 1; }
  .scene .cal .jaw-a, .scene .cal .jaw-b { transform: translateX(0); }
  .scene .fig { clip-path: inset(0 0 0 0); }
  .scene .stamp { opacity: 1; transform: rotate(-16deg) scale(1); }
  .shelf::after { transform: scaleX(1); }

  .skip,
  .footbar > ul > li > a,
  main > section > h2,
  main > section > p > a,
  main > section > ul > li > a,
  .shelf > li,
  .shelf > li > article,
  main > section > .bandrail-in > h2,
  main > section > .bandrail-in > p > a,
  .bandrail-in > p > a,
  .offsheet-body a,
  .offsheet-lede > a,
  .plate-wrap a,
  .marginal a,
  .shelf-lede > a,
  .shelf-blank a,
  .shelf > li > article > div,
  .shelf > li:target > article > div,
  .fieldrows > li,
  .fieldrows > li > .led-drop,
  .fieldrows > li:target > .led-drop,
  .slips > li,
  .slips > li > .slip-drop,
  .slips > li:target > .slip-drop,
  .workdown .rung,
  .open-field,
  .tool input[type="date"],
  .tool input[type="number"],
  .tool select,
  .tool button,
  .ticks > li > label,
  .grades > li,
  .steps > li,
  .scroll-x,
  .tabulated tbody tr,
  .prose a,
  .colophon a {
    transition: none;
  }
  .shelf > li,
  .fieldrows > li,
  .slips > li { opacity: 1; translate: 0 0; }
  .tool button:hover { letter-spacing: 0.12em; }
  .shelf > li > article:hover { translate: 0 0; }
}

/* ---------------------------------------------------------------- print */

@media print {
  .footbar, .skip, .scene, .inset-plate, .offsheet-fig { display: none; }
  html { background: none; color: #1e2119; }
  .shelf > li > article > div,
  .led-drop, .slip-drop { grid-template-rows: 1fr; visibility: visible; opacity: 1; }
}