/* ---------------------------------------------------------------------------
   KELVORO LIMITED — order desk and pick floor, 102 South Terrace, Middlesbrough.

   There is no reset in this file and there is no universal selector in it.
   Nothing here says * { margin: 0 } and nothing normalises an element globally,
   because this site is not one page with one flow: it is ten spreads, and every
   spread declares its own grid on its own container. A leaf sizes itself — its
   type scale, its gutters, its box model — so a global rule would only be
   something each leaf then had to argue with. Where the browser default is
   wrong for a leaf, the leaf says so in its own block, below.

   The one exception is the sheet the book sits on: html and body set the paper
   colour, the measure and the scroll behaviour. That is the desk, not a reset.
   --------------------------------------------------------------------------- */

:root {
  --paper: #f6efe3;          /* oat — the sheet */
  --ink: #2d2a21;            /* the pen */
  --rust: #8a5a1d;           /* the order-desk stamp */
  --bay: #4a5b4e;            /* the floor, bay labels, racking */
  --leaf: #fffcf6;           /* a fresh leaf, lighter than the sheet */
  --ink-rgb: 45 42 33;
  --rust-rgb: 138 90 29;
  --bay-rgb: 74 91 78;
  --serif: "Caudex", "Iowan Old Style", Georgia, serif;
  --sans: "Spline Sans", "Segoe UI", system-ui, sans-serif;
  --gut: 2.75rem;            /* the binding, at desk width */
  --dot: 3px;                /* halftone screen pitch */
  --lift: 0 1px 0 rgb(var(--ink-rgb) / .06), 0 10px 24px -18px rgb(var(--ink-rgb) / .55);
}

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

body {
  margin: 0;
  padding: 0 0 3rem;
  min-height: 100%;
  background-image:
    radial-gradient(rgb(var(--ink-rgb) / .05) 0.5px, transparent 0.5px);
  background-size: 7px 7px;
  background-position: 0 0;
  overflow-x: hidden;
}

/* --- the way in, before the dial ------------------------------------------ */

.skip {
  position: absolute;
  left: .6rem;
  top: -4rem;
  z-index: 60;
  display: inline-block;
  padding: .55rem .9rem;
  box-sizing: border-box;
  background: var(--ink);
  color: var(--leaf);
  font: 600 .82rem/1.2 var(--sans);
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 2px;
  transition: top 180ms ease-out;
}

.skip:focus { top: .6rem; outline: 2px solid var(--rust); outline-offset: 2px; }

/* --- corner dial ----------------------------------------------------------
   One mechanism at every width: a disclosure in the top corner whose links fan
   out on an arc. Native <details>, so it opens, closes and takes focus with no
   script at all. The face carries ten ticks and the tick for the spread you are
   reading is filled. ------------------------------------------------------- */

.dial {
  position: fixed;
  top: .55rem;
  right: .55rem;
  z-index: 50;
  font-family: var(--sans);
}

.dial-shell { position: relative; }

.dial-knob {
  display: flex;
  align-items: center;
  gap: .4rem;
  box-sizing: border-box;
  padding: .3rem .62rem .3rem .36rem;
  background: var(--leaf);
  border: 1px solid rgb(var(--ink-rgb) / .34);
  border-radius: 2rem;
  box-shadow: var(--lift);
  cursor: pointer;
  list-style: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.dial-knob::-webkit-details-marker { display: none; }
.dial-knob:hover { background: var(--paper); border-color: rgb(var(--rust-rgb) / .8); }
.dial-knob:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.dial-face { width: 22px; height: 22px; display: block; }
.dial-face .face-ring { fill: none; stroke: rgb(var(--ink-rgb) / .3); stroke-width: 1.4; }
.dial-face .tick { fill: rgb(var(--ink-rgb) / .42); transition: fill 220ms ease; }
.dial-face .tick.is-here { fill: var(--rust); }
.dial-face .needle { stroke: var(--rust); stroke-width: 1.8; stroke-linecap: round; }

.dial-word {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}

.dial-shell[open] .dial-knob {
  background: var(--ink);
  border-color: var(--ink);
}
.dial-shell[open] .dial-word { color: var(--leaf); }
.dial-shell[open] .dial-face .face-ring { stroke: rgb(255 252 246 / .5); }
.dial-shell[open] .dial-face .tick { fill: rgb(255 252 246 / .6); }
.dial-shell[open] .dial-face .tick.is-here { fill: var(--leaf); }

.dial-arc {
  position: absolute;
  top: calc(100% + .45rem);
  right: 0;
  width: min(19.5rem, calc(100vw - 1.1rem));
  box-sizing: border-box;
  margin: 0;
  padding: .7rem .55rem .8rem;
  list-style: none;
  background: var(--leaf);
  border: 1px solid rgb(var(--ink-rgb) / .3);
  border-radius: 3px;
  box-shadow: 0 18px 40px -26px rgb(var(--ink-rgb) / .9);
}

.dial-arc li { display: block; margin: 0 0 .18rem var(--dx, 0); }
.dial-arc li:last-child { margin-bottom: 0; }

.dial-arc a {
  display: block;
  box-sizing: border-box;
  padding: .36rem .55rem;
  color: var(--ink);
  font-size: .845rem;
  line-height: 1.3;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  transform: rotate(var(--rot, 0deg));
  transform-origin: right center;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dial-arc a:hover { background: var(--paper); border-color: rgb(var(--rust-rgb) / .45); }
.dial-arc a:focus-visible { outline: 2px solid var(--rust); outline-offset: 1px; }
.dial-arc a[aria-current="page"] {
  background: rgb(var(--rust-rgb) / .1);
  border-color: rgb(var(--rust-rgb) / .55);
  font-weight: 600;
}

.dial-arc .n {
  display: inline-block;
  min-width: 1.35rem;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* the arc itself: each link indented onto the curve and turned a little on it */
.dial-arc li:nth-child(1)  { --dx: 3.4rem; --rot: -2.2deg; --i: 0; }
.dial-arc li:nth-child(2)  { --dx: 2.7rem; --rot: -1.9deg; --i: 1; }
.dial-arc li:nth-child(3)  { --dx: 2.0rem; --rot: -1.6deg; --i: 2; }
.dial-arc li:nth-child(4)  { --dx: 1.4rem; --rot: -1.3deg; --i: 3; }
.dial-arc li:nth-child(5)  { --dx: 0.9rem; --rot: -0.9deg; --i: 4; }
.dial-arc li:nth-child(6)  { --dx: 0.5rem; --rot: -0.6deg; --i: 5; }
.dial-arc li:nth-child(7)  { --dx: 0.25rem; --rot: -0.3deg; --i: 6; }
.dial-arc li:nth-child(8)  { --dx: 0.1rem; --rot: 0deg;    --i: 7; }
.dial-arc li:nth-child(9)  { --dx: 0.05rem; --rot: .25deg; --i: 8; }
.dial-arc li:nth-child(10) { --dx: 0.3rem; --rot: .55deg;  --i: 9; }

.dial-shell[open] .dial-arc a {
  animation: fanOut 380ms cubic-bezier(.2, .82, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 24ms);
}

@keyframes fanOut {
  from { opacity: 0; transform: translate(1.6rem, -1.1rem) rotate(-9deg) scale(.9); }
  to   { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

/* --- the book -------------------------------------------------------------- */

.book {
  max-width: 68rem;
  margin: 0 auto;
  padding: 4.4rem .9rem 0;
  box-sizing: border-box;
}

/* --- a spread: left leaf, binding, right leaf -----------------------------
   The grid is declared here, on the spread, and nowhere else. At reading width
   the two leaves stack and the binding runs across between them; at desk width
   it runs down the middle. The binding is never hidden — a spread you cannot
   see the gutter of is a page, and this site has no pages. ----------------- */

.spread {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "left" "gut" "right";
  gap: 0;
  margin: 0 0 2.6rem;
  background: var(--leaf);
  border: 1px solid rgb(var(--ink-rgb) / .22);
  box-shadow: var(--lift);
}

.leaf-order { grid-area: left; }
.leaf-floor { grid-area: right; }
.gutter { grid-area: gut; }

.leaf {
  box-sizing: border-box;
  padding: 1.5rem 1.15rem 1.9rem;
  min-width: 0;
  --leafpad: 1.15rem;
}

.leaf-order {
  background:
    linear-gradient(to bottom, rgb(var(--ink-rgb) / .035), rgb(var(--ink-rgb) / 0) 9rem),
    var(--leaf);
}

.leaf-floor { background: var(--leaf); }

.leaf h1 {
  margin: .2rem 0 .5rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.95rem;
  line-height: 1.12;
  letter-spacing: -.005em;
  color: var(--ink);
}

.leaf h2 {
  margin: 0 0 .55rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.2;
  color: var(--ink);
}

.leaf h3 {
  margin: 1.25rem 0 .4rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.25;
  color: var(--ink);
}

.leaf p {
  margin: 0 0 .95em;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: rgb(var(--ink-rgb) / .92);
}

.leaf p.lede {
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink);
}

.leaf a { color: var(--rust); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.leaf a:hover { color: var(--ink); }
.leaf a:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.leaf section { margin: 0 0 1.9rem; }
.leaf section:last-child { margin-bottom: 0; }

/* --- small-caps eyebrow --------------------------------------------------- */

.eyebrow {
  margin: 0 0 .3rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .185em;
  text-transform: uppercase;
  color: var(--bay);
}

.eyebrow .sep { color: rgb(var(--ink-rgb) / .35); padding: 0 .25rem; }

.eyebrow-rule {
  display: block;
  height: var(--dot);
  margin: 0 0 .85rem;
  background-image: radial-gradient(rgb(var(--bay-rgb) / .55) 1px, transparent 1.1px);
  background-size: 5px var(--dot);
}

/* --- the binding ---------------------------------------------------------- */

.gutter {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .6rem;
  min-height: 2.4rem;
  padding: .5rem .8rem;
  border-top: 1px solid rgb(var(--ink-rgb) / .18);
  border-bottom: 1px solid rgb(var(--ink-rgb) / .18);
  background-color: var(--paper);
  background-image:
    radial-gradient(rgb(var(--ink-rgb) / .22) 1px, transparent 1.2px),
    repeating-linear-gradient(90deg, rgb(var(--ink-rgb) / .3) 0 7px, transparent 7px 16px);
  background-size: 6px 6px, 100% 1px;
  background-position: 0 0, 0 50%;
  background-repeat: repeat, no-repeat;
}

.folio {
  position: sticky;
  top: .6rem;
  padding: .1rem .5rem;
  background: var(--paper);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .62);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.folio b { color: var(--rust); font-weight: 600; }

/* --- the folded corner ---------------------------------------------------
   The opener is a docket laid on the leaf with its lower corner turned up, the
   way a picker turns a corner to read the line underneath. ----------------- */

.opener {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 1.3rem;
  padding: 1rem 1.05rem 1.5rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .28);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.3rem), calc(100% - 2.3rem) 100%, 0 100%);
  transition: background-color 240ms ease;
}

.opener:hover { background: var(--leaf); }

.opener-fold {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 2.3rem;
  height: 2.3rem;
  background: linear-gradient(225deg, rgb(var(--ink-rgb) / .16) 0%, var(--leaf) 46%, var(--paper) 100%);
  border-left: 1px solid rgb(var(--ink-rgb) / .3);
  border-top: 1px solid rgb(var(--ink-rgb) / .3);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transform-origin: 100% 100%;
  animation: foldSettle 760ms cubic-bezier(.22, .9, .3, 1) both;
  transition: transform 260ms ease, filter 260ms ease;
}

.opener:hover .opener-fold { transform: rotate(-4deg) scale(1.06); filter: brightness(1.03); }

@keyframes foldSettle {
  from { transform: rotate(-16deg) translate(.5rem, .35rem); opacity: .2; }
  60%  { transform: rotate(3deg); opacity: 1; }
  to   { transform: none; opacity: 1; }
}

.opener .crease {
  position: absolute;
  right: 0;
  bottom: 2.3rem;
  width: 2.3rem;
  height: 1px;
  background: rgb(var(--ink-rgb) / .22);
  transform: rotate(-45deg);
  transform-origin: 100% 0;
}

/* --- the order as it was written ------------------------------------------ */

.docket {
  box-sizing: border-box;
  margin: 0 0 1.1rem;
  padding: .85rem 1rem .9rem 1.15rem;
  background: var(--paper);
  border-left: 3px solid var(--rust);
  border-top: 1px solid rgb(var(--ink-rgb) / .14);
  border-right: 1px solid rgb(var(--ink-rgb) / .14);
  border-bottom: 1px solid rgb(var(--ink-rgb) / .14);
}

.docket p {
  margin: 0 0 .5em;
  font-family: var(--serif);
  font-size: 1.04rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
}

.docket p:last-child { margin-bottom: 0; }

.docket .typed {
  font-family: var(--sans);
  font-style: normal;
  font-size: .97rem;
  font-variant-numeric: tabular-nums;
  color: rgb(var(--ink-rgb) / .88);
}

.docket .pencil {
  display: block;
  margin-top: .35rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--rust);
}

.docket-head {
  display: block;
  margin: 0 0 .45rem;
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bay);
}

/* --- price-free ledger ----------------------------------------------------
   Every table on this site is a ledger and no ledger on this site carries a
   money column. The last column is a check, an initial or a count. ---------- */

/* a scrolling ledger is keyboard-focusable in its own right, so that a ledger
   wider than the leaf can be scrolled without a mouse; it gets the same ring as
   everything else rather than the browser's default one */
.ledger-wrap { overflow-x: auto; margin: 0 0 1.1rem; }
.ledger-wrap:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }

.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  text-align: left;
}

.ledger caption {
  caption-side: top;
  padding: 0 0 .45rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--bay);
  text-align: left;
}

.ledger th,
.ledger td {
  box-sizing: border-box;
  padding: .42rem .55rem;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .16);
  vertical-align: top;
}

.ledger thead th {
  border-bottom: 1.5px solid rgb(var(--ink-rgb) / .5);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.ledger tbody tr { transition: background-color 150ms ease; }
.ledger tbody tr:hover { background: rgb(var(--rust-rgb) / .07); }
.ledger tbody tr:last-child td { border-bottom: none; }

.ledger .num { text-align: right; white-space: nowrap; }
.ledger .bay { color: var(--bay); font-weight: 600; letter-spacing: .03em; }
.ledger .tot td { border-top: 1.5px solid rgb(var(--ink-rgb) / .5); font-weight: 600; }
.ledger .work { color: rgb(var(--ink-rgb) / .72); font-size: .84rem; }
.ledger td a { color: var(--rust); }

/* --- stage list ------------------------------------------------------------ */

.stages { margin: 0 0 1.1rem; padding: 0; list-style: none; counter-reset: stage; }

.stages li {
  position: relative;
  box-sizing: border-box;
  margin: 0 0 .55rem;
  padding: .1rem 0 .1rem 2.3rem;
  font-size: .98rem;
  line-height: 1.5;
  counter-increment: stage;
  transition: color 160ms ease;
}

.stages li::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .15rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--leaf);
  background: var(--bay);
  padding: .1rem .3rem;
  border-radius: 2px;
}

.stages li:hover { color: var(--ink); }
.stages b { font-weight: 600; color: var(--ink); }

/* --- the aisle plan and the pick-path trace ------------------------------- */

.plan-frame {
  box-sizing: border-box;
  margin: 0 -1.15rem .8rem;
  border-left: none;
  border-right: none;
  padding: .7rem .6rem .5rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .24);
}

.plan { display: block; width: 100%; height: auto; }

.plan .rack {
  fill: rgb(var(--bay-rgb) / .1);
  stroke: rgb(var(--bay-rgb) / .55);
  stroke-width: .8;
}

.plan .screen { fill: rgb(var(--bay-rgb) / .42); }

.plan .bench {
  fill: rgb(var(--rust-rgb) / .14);
  stroke: var(--rust);
  stroke-width: 1.1;
}

.plan .cross {
  fill: none;
  stroke: rgb(var(--ink-rgb) / .34);
  stroke-width: 1;
  stroke-dasharray: 6 4;
}

.plan .bench-word,
.plan .aisle-word {
  font-family: "Spline Sans", sans-serif;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  fill: rgb(var(--ink-rgb) / .62);
}

.plan .bay-dot {
  fill: rgb(var(--ink-rgb) / .22);
  transition: fill 380ms ease, r 380ms ease;
}

.plan .bay-word {
  font-family: "Spline Sans", sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  fill: rgb(var(--ink-rgb) / .3);
  transition: fill 380ms ease, opacity 380ms ease;
}

.plan .route {
  fill: none;
  stroke: var(--rust);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan .route-ghost {
  fill: none;
  stroke: rgb(var(--bay-rgb) / .5);
  stroke-width: 1.3;
  stroke-dasharray: 4 3.5;
}

.plan .turn {
  fill: var(--leaf);
  stroke: var(--rust);
  stroke-width: 1.2;
  transition: opacity 300ms ease;
}

/* primed by script: the route is undrawn and the bays are dark, with no
   transition on the way in so the priming itself is never seen */
.plan.is-tracing .bay-dot,
.plan.is-tracing .bay-word,
.plan.is-tracing .turn { transition: none; }
.plan.is-tracing .bay-dot { fill: rgb(var(--ink-rgb) / .16); }
.plan.is-tracing .bay-word { opacity: .42; }
.plan.is-tracing .turn { opacity: 0; }

/* the class the script adds on load: the transition is declared on the lit
   state, so adding the class is what makes the bays come up in route order */
.plan.is-tracing.is-drawn .bay-dot.visited {
  fill: var(--rust);
  transition: fill 300ms ease-out;
}
.plan.is-tracing.is-drawn .bay-word.visited {
  opacity: 1;
  fill: var(--ink);
  transition: opacity 300ms ease-out, fill 300ms ease-out;
}
.plan.is-tracing.is-drawn .turn {
  opacity: 1;
  transition: opacity 260ms ease-out;
}
.plan.is-tracing.is-drawn .route {
  transition: stroke-dashoffset 2600ms cubic-bezier(.33, .1, .25, 1);
}

.plan .bench-mark { fill: var(--rust); transform-box: fill-box; transform-origin: center; }
.plan.is-tracing.is-drawn .bench-mark { animation: benchClose 900ms ease-out 2500ms both; }

@keyframes benchClose {
  0%   { transform: scale(1); opacity: .35; }
  45%  { transform: scale(2.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.trace-read {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: .55rem 1.1rem;
  margin: 0 0 .9rem;
  padding: .6rem .75rem .7rem;
  box-sizing: border-box;
  background: var(--paper);
  border-left: 3px solid var(--bay);
  font-variant-numeric: tabular-nums;
}

.trace-read .pair { display: block; }
.trace-read .pair span {
  display: block;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--bay);
}
.trace-read .pair b {
  display: block;
  margin-top: .1rem;
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  color: var(--rust);
}

.trace-ctl { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }

.btn {
  box-sizing: border-box;
  padding: .42rem .8rem;
  background: var(--leaf);
  color: var(--ink);
  border: 1px solid rgb(var(--ink-rgb) / .4);
  border-radius: 2px;
  font: 600 .8rem/1.2 var(--sans);
  letter-spacing: .05em;
  cursor: pointer;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease, transform 120ms ease;
}

.btn:hover { background: var(--ink); color: var(--leaf); border-color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.btn[aria-pressed="true"] { background: rgb(var(--rust-rgb) / .14); border-color: var(--rust); color: var(--ink); }

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

.tool {
  box-sizing: border-box;
  margin: 1.1rem 0;
  padding: 1rem .9rem 1.1rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .3);
  border-top: 3px solid var(--bay);
}

.tool-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .7rem;
  margin: .3rem 0 1rem;
}

.tool-form label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bay);
}

.tool-form .hint {
  display: block;
  margin-top: .12rem;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(var(--ink-rgb) / .62);
}

.tool-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: .3rem;
  padding: .45rem .55rem;
  background: var(--leaf);
  color: var(--ink);
  border: 1px solid rgb(var(--ink-rgb) / .38);
  border-radius: 2px;
  font: 400 1rem/1.3 var(--sans);
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.tool-form input:hover { border-color: rgb(var(--ink-rgb) / .6); }
.tool-form input:focus {
  outline: none;
  background: var(--leaf);
  border-color: var(--rust);
  box-shadow: 0 0 0 3px rgb(var(--rust-rgb) / .22);
}

.tool-out { margin: 0; }

.tool-form .wide { grid-column: 1 / -1; }

.tool-note {
  margin: .7rem 0 0;
  font-size: .8rem;
  line-height: 1.45;
  color: rgb(var(--ink-rgb) / .68);
}

.tool-note b {
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .7rem;
  color: var(--rust);
}

.tool-bad {
  display: none;
  margin: 0 0 .7rem;
  padding: .45rem .6rem;
  box-sizing: border-box;
  background: rgb(var(--rust-rgb) / .1);
  border-left: 3px solid var(--rust);
  font-size: .86rem;
  color: var(--ink);
}

/* --- halftone as a measure, not a pattern -------------------------------
   On the stock leaf the dot screen is the reading: the denser the screen, the
   more cover is left on the bay. Four steps, each one a coarser pitch. ----- */

.screen {
  display: inline-block;
  width: 3.2rem;
  height: 1.05rem;
  vertical-align: -.2rem;
  border: 1px solid rgb(var(--ink-rgb) / .3);
  background-color: var(--leaf);
  background-image: radial-gradient(var(--ink) .9px, transparent 1px);
  transition: background-size 220ms ease;
}

.screen-1 { background-size: 3px 3px; }
.screen-2 { background-size: 5px 5px; }
.screen-3 { background-size: 8px 8px; }
.screen-4 { background-size: 13px 13px; }

/* --- the drawn map --------------------------------------------------------- */

.map-frame {
  box-sizing: border-box;
  margin: 0 -1.15rem 1rem;
  border-left: none;
  border-right: none;
  padding: .6rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .24);
}

.kvmap { display: block; width: 100%; height: auto; }
.kvmap .water { fill: rgb(var(--bay-rgb) / .16); }
.kvmap .road { fill: none; stroke: rgb(var(--ink-rgb) / .45); stroke-width: 1.6; }
.kvmap .road-minor { fill: none; stroke: rgb(var(--ink-rgb) / .25); stroke-width: 1; stroke-dasharray: 4 3; }
.kvmap .block { fill: rgb(var(--ink-rgb) / .07); stroke: rgb(var(--ink-rgb) / .2); stroke-width: .7; }
.kvmap .here { fill: var(--rust); }
.kvmap .ring { fill: none; stroke: var(--rust); stroke-width: 1.2; opacity: .6; }
.kvmap text {
  font-family: "Spline Sans", sans-serif;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .06em;
  fill: rgb(var(--ink-rgb) / .72);
}
.kvmap .label-here { fill: var(--rust); }
.kvmap .scale { stroke: rgb(var(--ink-rgb) / .5); stroke-width: 1.2; }

/* --- the quiet notes ------------------------------------------------------- */

.aside {
  box-sizing: border-box;
  margin: 1.1rem 0;
  padding: .7rem .85rem;
  background: rgb(var(--bay-rgb) / .08);
  border-left: 3px solid var(--bay);
  font-size: .91rem;
  line-height: 1.5;
}

.aside p { margin: 0 0 .5em; font-size: .91rem; }
.aside p:last-child { margin-bottom: 0; }
.aside strong { font-weight: 600; }

.terms { margin: 0 0 1.1rem; }
.terms dt {
  margin: .75rem 0 .1rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
}
.terms dt:first-child { margin-top: 0; }
.terms dd { margin: 0; font-size: .96rem; line-height: 1.55; color: rgb(var(--ink-rgb) / .9); }

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

.colophon {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.6rem .9rem 0;
  box-sizing: border-box;
  border-top: 1px solid rgb(var(--ink-rgb) / .2);
}

.colophon-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.2rem;
}

.colophon .reg {
  margin: 0;
  font-style: normal;
  font-size: .9rem;
  line-height: 1.6;
}

.colophon .reg .name {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .02em;
}

.colophon .reg span { display: block; }
.colophon .reg .line { color: rgb(var(--ink-rgb) / .8); }

.colophon .facts {
  margin: .6rem 0 0;
  font-size: .84rem;
  line-height: 1.65;
  color: rgb(var(--ink-rgb) / .78);
  font-variant-numeric: tabular-nums;
}

.colophon a {
  color: var(--rust);
  text-underline-offset: 2px;
  transition: color 160ms ease;
}
.colophon a:hover { color: var(--ink); }
.colophon a:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

.colophon .shelf { margin: 0; padding: 0; list-style: none; }
.colophon .shelf li { margin: 0 0 .22rem; font-size: .86rem; }
.colophon .shelf .n { color: var(--bay); font-variant-numeric: tabular-nums; padding-right: .35rem; }

.colophon .set {
  margin: 1.3rem 0 0;
  padding: .7rem 0 0;
  border-top: 1px solid rgb(var(--ink-rgb) / .14);
  font-size: .78rem;
  line-height: 1.55;
  color: rgb(var(--ink-rgb) / .6);
}

/* --- desk width: the spread opens ----------------------------------------- */

@media (min-width: 56rem) {
  .book { padding: 4.8rem 1.6rem 0; }

  .spread {
    grid-template-columns: minmax(0, 1fr) var(--gut) minmax(0, 1fr);
    grid-template-areas: "left gut right";
  }

  .leaf { padding: 2.1rem 1.7rem 2.4rem; --leafpad: 1.7rem; }

  .gutter {
    min-height: 100%;
    padding: 1.2rem .4rem;
    border-top: none;
    border-bottom: none;
    border-left: 1px solid rgb(var(--ink-rgb) / .18);
    border-right: 1px solid rgb(var(--ink-rgb) / .18);
    background-image:
      radial-gradient(rgb(var(--ink-rgb) / .22) 1px, transparent 1.2px),
      repeating-linear-gradient(0deg, rgb(var(--ink-rgb) / .3) 0 7px, transparent 7px 16px);
    background-size: 6px 6px, 1px 100%;
    background-position: 0 0, 50% 0;
  }

  .folio { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .26em; }

  .leaf h1 { font-size: 2.35rem; }
  .leaf h2 { font-size: 1.42rem; }
  .leaf p { font-size: 1.0625rem; }

  .tool-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool { padding: 1.2rem 1.2rem 1.3rem; }

  .plan-frame,
  .map-frame {
    margin-left: 0;
    margin-right: 0;
    border-left: 1px solid rgb(var(--ink-rgb) / .24);
    border-right: 1px solid rgb(var(--ink-rgb) / .24);
  }

  .colophon { padding: 1.8rem 1.6rem 0; }
  .colophon-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2rem; }
}

@media (min-width: 76rem) {
  .book { padding-top: 5.2rem; }
  .leaf { padding: 2.4rem 2.1rem 2.7rem; --leafpad: 2.1rem; }
  .colophon-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); }
}

/* --- reduced motion -------------------------------------------------------
   Everything that moves on this site is listed again here and landed in its
   finished state: the fold flat, the arc open, the route fully drawn, the bays
   lit and the bench mark at rest. Not shortened — finished. The !important is
   deliberate: the lit states above are written with three classes of
   specificity and a polite override would lose to them. -------------------- */

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

  .skip,
  .dial-knob,
  .dial-arc a,
  .dial-face .tick,
  .opener,
  .opener-fold,
  .ledger tbody tr,
  .stages li,
  .btn,
  .tool-form input,
  .screen,
  .colophon a,
  .plan .bay-dot,
  .plan .bay-word,
  .plan .turn,
  .plan .route {
    transition: none !important;
    animation: none !important;
  }

  .opener-fold { transform: none !important; opacity: 1 !important; }
  .dial-shell[open] .dial-arc a { opacity: 1 !important; transform: rotate(var(--rot, 0deg)) !important; }
  .plan.is-tracing .bay-word,
  .plan.is-tracing.is-drawn .bay-word { opacity: 1 !important; }
  .plan.is-tracing .turn,
  .plan.is-tracing.is-drawn .turn { opacity: 1 !important; }
  .plan .route { stroke-dashoffset: 0 !important; }
  .plan.is-tracing.is-drawn .bench-mark { animation: none !important; opacity: 1 !important; }
}

/* --- print: the spread is already a page -------------------------------- */

@media print {
  .dial, .skip, .trace-ctl, .btn { display: none; }
  .spread { box-shadow: none; border-color: rgb(var(--ink-rgb) / .5); break-inside: avoid; }
  html { background: #ffffff; }
}

/* ===========================================================================
   THE SEVEN FIGURES

   A spread is two things set against each other, and ten spreads built the
   same way would be one spread shown ten times. So each section of the book is
   a different FIGURE, and no figure is used twice on this spread: a pair of
   drawings compared; one sentence lifted out at size; ruled rows; an asymmetric
   split whose narrow side hangs over its own gutter; small cards each holding
   a single fact; numbered steps strung on a drawn line; and a narrow measure
   with its notes hung out in the margin.

   Nothing below resets anything, and there is no universal selector here
   either. Each figure declares its own grid on its own container, the same way
   a leaf does.
   =========================================================================== */

/* --- 1. two figures, set against each other -------------------------------
   The left one is the docket as it arrived, keeping its turned corner. The
   right one is the same order filed: a form, ruled under each value, stamped.
   They are deliberately different objects, because a comparison of two copies
   of one drawing proves nothing. ------------------------------------------ */

.twin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.1rem;
  margin: 0 0 1rem;
  align-items: start;
}

.twin-item { margin: 0; min-width: 0; }
.twin .opener { margin: 0; }

.twin-cap {
  display: flex;
  align-items: center;
  gap: .42rem;
  margin: 0 0 .45rem;
  font-family: var(--sans);
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--bay);
}

.twin-cap b {
  display: inline-grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  flex: none;
  background: var(--bay);
  color: var(--leaf);
  border-radius: 50%;
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: 0;
}

.twin-item:last-child .twin-cap b { background: var(--rust); }

.twin-note {
  margin: 0 0 .95em;
  font-size: 1rem;
  line-height: 1.58;
  color: rgb(var(--ink-rgb) / .82);
}

/* the filed copy: a form, not a table. The rule sits under the value the way
   it does on a pad, and there is no header row anywhere in it. */
.slip {
  position: relative;
  box-sizing: border-box;
  padding: .8rem .85rem 1.9rem;
  background: var(--leaf);
  border: 1px solid rgb(var(--ink-rgb) / .3);
  border-top: 3px solid var(--bay);
  transition: border-color 240ms ease, background-color 240ms ease;
}

.slip:hover { border-color: rgb(var(--rust-rgb) / .5); background: var(--paper); }

.slip-head {
  display: block;
  margin: 0 0 .55rem;
  font-family: var(--sans);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bay);
}

.slip-row { margin: 0 0 .5rem; }
.slip-row:last-of-type { margin-bottom: 0; }

.slip-row .k {
  display: block;
  font-family: var(--sans);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / .52);
}

.slip-row .v {
  display: block;
  margin-top: .02rem;
  padding-bottom: .1rem;
  border-bottom: 1px solid rgb(var(--ink-rgb) / .22);
  font-family: var(--serif);
  font-size: .93rem;
  line-height: 1.35;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.slip-stamp {
  position: absolute;
  right: .6rem;
  bottom: .5rem;
  padding: .08rem .42rem;
  border: 1.5px solid rgb(var(--rust-rgb) / .55);
  border-radius: 2px;
  transform: rotate(-7deg);
  font-family: var(--sans);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--rust-rgb) / .85);
}

/* --- 2. one sentence, lifted out at size ---------------------------------- */

.pull {
  margin: 0 0 1.05rem;
  padding: .75rem 0 0;
  border: none;
  border-top: 3px solid rgb(var(--rust-rgb) / .55);
}

.pull p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.42rem;
  line-height: 1.2;
  letter-spacing: -.012em;
  color: var(--ink);
}

.pull p::before {
  content: "\201C";
  margin-left: -.38em;
  color: var(--rust);
}

.pull p::after { content: "\201D"; color: var(--rust); }

/* --- 4. the asymmetric split, and the figure that hangs over its gutter ----
   The narrow side is wider than its own column: the plate crosses the dotted
   rule that marks where the two columns divide. That crossing is the whole
   point of the figure, and is why the body side carries a left padding it
   would not otherwise need. ----------------------------------------------- */

.offset {
  position: relative;
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  column-gap: .9rem;
  align-items: start;
  margin: 0 0 .3rem;
}

.offset::before {
  content: "";
  position: absolute;
  top: .2rem;
  bottom: .2rem;
  left: 3.85rem;
  width: 1px;
  background-image: linear-gradient(to bottom, rgb(var(--ink-rgb) / .34) 0 4px, transparent 4px 9px);
  background-size: 1px 9px;
}

.offset-fig {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: calc(100% + 1.45rem);
  margin: 0;
  padding: .5rem .45rem .45rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .26);
  box-shadow: 2px 3px 0 rgb(var(--ink-rgb) / .07);
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.offset-fig:hover { transform: translate(-1px, -1px); box-shadow: 3px 5px 0 rgb(var(--ink-rgb) / .1); }



.offset-fig figcaption {
  margin-top: .4rem;
  font-family: var(--sans);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  line-height: 1.32;
  color: var(--bay);
}

.offset-body { padding-left: 1.1rem; }
.offset-body p:last-child { margin-bottom: 0; }


/* the three rooms, stitched together down one edge the way the leaves are */
.room { fill: var(--leaf); stroke: rgb(var(--ink-rgb) / .45); stroke-width: 1; }
.room-rule { stroke: rgb(var(--ink-rgb) / .3); stroke-width: 1; }
.room-rack { fill: rgb(var(--bay-rgb) / .22); stroke: rgb(var(--bay-rgb) / .6); stroke-width: .7; }
.room-parcel { fill: rgb(var(--rust-rgb) / .16); stroke: var(--rust); stroke-width: 1; }
.room-flow { fill: none; stroke: var(--rust); stroke-width: 1.4; transition: stroke 200ms ease; }
.room-head { fill: none; stroke: var(--rust); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.room-stitch { fill: none; stroke: rgb(var(--bay-rgb) / .7); stroke-width: 1.1; stroke-linejoin: round; }

.room-word {
  font-family: "Spline Sans", sans-serif;
  font-size: 7.4px;
  font-weight: 600;
  letter-spacing: .09em;
  fill: rgb(var(--ink-rgb) / .78);
}

.offset-fig:hover .room-flow { stroke: var(--bay); }

/* --- 5. small cards, a single fact in each --------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.3rem, 1fr));
  gap: .55rem;
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
}

.cards li {
  box-sizing: border-box;
  padding: .58rem .6rem .68rem;
  background: var(--paper);
  border-top: 3px solid var(--rust);
  box-shadow: 1px 2px 0 rgb(var(--ink-rgb) / .07);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.cards li:nth-child(2) { border-top-color: var(--bay); }
.cards li:nth-child(3) { border-top-color: rgb(var(--ink-rgb) / .5); }
.cards li:hover { transform: translateY(-2px); box-shadow: 1px 5px 0 rgb(var(--ink-rgb) / .1); background: var(--leaf); }

.card-key {
  display: block;
  margin: 0 0 .22rem;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 1.04rem;
  line-height: 1.15;
  color: var(--ink);
}

.cards p { margin: 0; font-size: .81rem; line-height: 1.42; color: rgb(var(--ink-rgb) / .84); }

/* --- 6. numbered steps strung on a drawn line ------------------------------ */

.chain {
  position: relative;
  margin: 0 0 .3rem;
  padding: 0 0 0 2.15rem;
  list-style: none;
  counter-reset: stage;
}

.chain::before {
  content: "";
  position: absolute;
  left: .66rem;
  top: .6rem;
  bottom: 1rem;
  width: 2px;
  background: rgb(var(--bay-rgb) / .34);
}

.chain li {
  position: relative;
  margin: 0 0 .62rem;
  counter-increment: stage;
  font-size: .97rem;
  line-height: 1.5;
  transition: color 160ms ease;
}

.chain li:last-child { margin-bottom: 0; }
.chain li:hover { color: var(--ink); }

.chain li::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  left: -2.15rem;
  top: .06rem;
  width: 1.45rem;
  box-sizing: border-box;
  padding: .12rem 0;
  background: var(--leaf);
  border: 1.5px solid rgb(var(--bay-rgb) / .5);
  border-radius: 50%;
  font-family: var(--sans);
  font-size: .61rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  color: var(--bay);
  transition: background-color 200ms ease, color 200ms ease;
}

.chain li::after {
  content: "";
  position: absolute;
  left: -.66rem;
  top: .58rem;
  width: .58rem;
  height: 2px;
  background: rgb(var(--bay-rgb) / .34);
}

.chain li.is-stop::before { background: var(--rust); border-color: var(--rust); color: var(--leaf); }
.chain li.is-stop::after { background: var(--rust); }
.chain b { font-weight: 600; color: var(--ink); }

/* --- 7. a narrow measure, its notes hung out in the margin -----------------
   The note column runs out past the leaf's own padding, and that is what makes
   it a margin rather than a sidebar: the width it borrows is the white edge of
   the page. ---------------------------------------------------------------- */

.annot {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: .7rem;
  margin: 0;
}

.annot > p:last-child { margin-bottom: .9em; }

.hang {
  align-self: start;
  margin: .25rem 0 .75rem;
  padding: .3rem 0 0;
  border-top: 1px solid rgb(var(--rust-rgb) / .45);
  font-size: .67rem;
  line-height: 1.38;
  color: rgb(var(--ink-rgb) / .74);
  transition: border-color 180ms ease, color 180ms ease;
}

.hang:hover { border-color: var(--rust); color: var(--ink); }

.hang b {
  display: block;
  margin-bottom: .12rem;
  font-family: var(--sans);
  font-size: .59rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--rust);
}

/* --- the figures at reading width and above -------------------------------- */

@media (min-width: 23rem) {
  .annot {
    grid-template-columns: minmax(0, 1fr) calc(4.4rem + var(--leafpad));
    margin-right: calc(-1 * var(--leafpad));
  }
  /* the passage spans every row the notes make, so the notes stack tightly at
     the top of the margin beside it rather than falling one row apart */
  .annot > p { grid-column: 1; grid-row: 1 / span 9; }
  .hang { grid-column: 2; padding-right: .45rem; }
}

@media (min-width: 30rem) {
  .twin { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: .75rem; }
}

@media (min-width: 56rem) {
  .offset { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .offset::before { left: 4.95rem; }
  .pull p { font-size: 1.56rem; }
  .cards { gap: .6rem; }
  .annot { grid-template-columns: minmax(0, 1fr) calc(5rem + var(--leafpad)); }
  .hang { font-size: .69rem; }
}

@media (min-width: 76rem) {
  .pull p { font-size: 1.62rem; }
  .annot { grid-template-columns: minmax(0, 1fr) calc(5.4rem + var(--leafpad)); }
}

/* --- the figures, with motion turned down ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .slip,
  .offset-fig,
  .room-flow,
  .cards li,
  .chain li,
  .chain li::before,
  .hang {
    transition: none !important;
    animation: none !important;
  }

  .offset-fig:hover { transform: none !important; }
  .cards li:hover { transform: none !important; }
}

/* --- the figures, printed -------------------------------------------------- */

@media print {
  .offset-fig, .cards li, .slip { box-shadow: none; }
  .twin, .offset, .annot, .cards { break-inside: avoid; }
}

/* --- the drawing marks the later spreads share ----------------------------
   Seven figures need drawings and a drawing needs a vocabulary, so these are
   the marks: a box, a filled block, a hot block, a rule, a route, a ghosted
   route and a word. Each spread combines them differently; none of them is
   worth its own class per page. ------------------------------------------- */

.fig { display: block; width: 100%; height: auto; }
.offset-fig .rooms,
.offset-fig .fig { display: block; width: 100%; height: auto; }

.fig-box { fill: var(--leaf); stroke: rgb(var(--ink-rgb) / .45); stroke-width: 1; }
.fig-fill { fill: rgb(var(--bay-rgb) / .22); stroke: rgb(var(--bay-rgb) / .6); stroke-width: .7; }
.fig-hot { fill: rgb(var(--rust-rgb) / .16); stroke: var(--rust); stroke-width: 1; }
.fig-rule { stroke: rgb(var(--ink-rgb) / .32); stroke-width: 1; }
.fig-flow { fill: none; stroke: var(--rust); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.fig-ghost { fill: none; stroke: rgb(var(--bay-rgb) / .55); stroke-width: 1.1; stroke-dasharray: 3 2.5; }

.fig-word {
  font-family: "Spline Sans", sans-serif;
  font-size: 7.2px;
  font-weight: 600;
  letter-spacing: .07em;
  fill: rgb(var(--ink-rgb) / .74);
}

.fig-word.is-hot { fill: var(--rust); }

/* set in the sheet, not as a presentation attribute: `font-size="19"` on the
   element loses to `.fig-word { font-size: 7.2px }` every time, and the figure
   renders at label size with no warning anywhere */
.fig-word.is-big { font-size: 17px; letter-spacing: 0; }
.fig-word.is-small { font-size: 5.8px; letter-spacing: .03em; }

/* a plate is what a drawing sits on when it is one half of a pair */
.plate {
  box-sizing: border-box;
  padding: .6rem .55rem .55rem;
  background: var(--paper);
  border: 1px solid rgb(var(--ink-rgb) / .28);
  transition: background-color 220ms ease, border-color 220ms ease;
}

.plate:hover { background: var(--leaf); border-color: rgb(var(--rust-rgb) / .45); }

/* the pair stacks below reading width, and a drawing let loose across a whole
   leaf renders its 7px labels at 28px: the cap keeps the figure the size it was
   drawn to be rather than the size of the column it lands in */
.plate .fig { max-width: 12rem; margin-left: auto; margin-right: auto; }

.plate-note {
  display: block;
  margin-top: .45rem;
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.4;
  color: rgb(var(--ink-rgb) / .74);
}

.plate-note b { font-weight: 600; color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .plate { transition: none !important; }
}