/* ==========================================================================
   SHAIDIRECT LTD — shaidirect.shop
   One stylesheet, five pages.

   Order of this file:
     1   scale and colour              (:root only)
     2   typographic reset             type only — no box-model rules live here
     3   skip link
     4   page frame: spread, rail, main
     5   ledger header
     6   contents block (the whole navigation of the site)
     7   headings, hanging indent
     8   ruled-paper cards
     9   the measurement tape          three @keyframes, drawn in millimetres
    10   drawn diagrams
    11   sheets: the comparator and the run sheet
    12   recorded-width table
    13   footer
    14   width behaviour               the only presentation change this site makes
    15   reduced motion                every animation landed finished, every
                                       transition switched off
    16   print

   Boxes are drawn from section 3 onward. Section 2 sets type and nothing else:
   no box-sizing, no margin reset, no padding. Every box below sizes itself from
   its content, so a padded block never has a width set on it as well.
   ========================================================================== */

/* -- 1 ------------------------------------------------- scale and colour -- */

:root {
  /* modular scale, ratio 1.2, from a 1rem body */
  --ratio: 1.2;
  --t-2: 0.694rem;
  --t-1: 0.833rem;
  --t0: 1rem;
  --t1: calc(var(--t0) * var(--ratio));
  --t2: calc(var(--t1) * var(--ratio));
  --t3: calc(var(--t2) * var(--ratio));
  --t4: calc(var(--t3) * var(--ratio));
  --t5: calc(var(--t4) * var(--ratio));

  /* the rule step of the ruled cards. card body line-height matches it, so the
     printed rules sit under the text instead of across it. */
  --rule-step: 1.7rem;
  --lead: 1.65;

  /* mint chalk */
  --bg: #e9f2ea;
  --ink: #263029;
  --accent: #2d6a4a;
  --accent2: #8a5a2b;
  --surface: #ffffff;

  /* channels, so a tint is mixed rather than another colour invented */
  --ink-rgb: 38 48 41;
  --accent-rgb: 45 106 74;
  --accent2-rgb: 138 90 43;

  --hair: 1px solid rgb(var(--ink-rgb) / 18%);
  --hair-strong: 1px solid rgb(var(--ink-rgb) / 34%);
  --dot: rgb(var(--accent-rgb) / 16%);
  --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* -- 2 ----------------------------------------------- typographic reset -- */
/* Type, rhythm and wrapping. Nothing in this block touches the box model. */

html {
  font-family: Mukta, "Segoe UI", system-ui, sans-serif;
  font-size: 100%;
  line-height: var(--lead);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-underline-offset: 0.18em;
}

body {
  font-size: var(--t0);
  font-weight: 400;
  text-wrap: pretty;
}

h1, h2, h3, h4 {
  font-family: Quattrocento, Georgia, "Times New Roman", serif;
  font-weight: 700;
  line-height: 1.18;
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--t4); }
h2 { font-size: var(--t3); }
h3 { font-size: var(--t1); }
h4 { font-size: var(--t0); }

p, li, dd, dt, td, th, label, output, figcaption {
  text-wrap: pretty;
}

strong { font-weight: 600; }
em { font-style: italic; }

small, .shai-small {
  font-size: var(--t-1);
  line-height: 1.5;
}

/* every figure on this site is a measurement: the digits have to line up */
.shai-fig, dd, td, output, input {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease);
}

a:hover { color: var(--accent2); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 3px;
}

abbr[title] { text-decoration: 1px dotted underline; }

/* -- 3 ----------------------------------------------------- selection -- */
/* No skip link: the contents block is the second thing on the page and is
   itself the destination, so there is no navigation bar to skip past. There is
   also, deliberately, exactly one id in these documents — the rail — and a
   skip link would have had to invent a second. */

::selection {
  background-color: rgb(var(--accent-rgb) / 18%);
  color: var(--ink);
}

/* -- 4 ------------------------------------------------------ page frame -- */
/* dotted field: a 15px pitch of dots behind everything, with the hair rules of
   the cards and the ledger sitting on top of it. */

body {
  margin: 0;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: 15px 15px;
  background-position: 0 0;
}

.shai-wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.1rem 1.1rem 0;
}

.shai-spread {
  display: block;
}

main {
  display: block;
  min-width: 0;
}

/* the sticky rail: the measurement key. On a narrow screen it is simply the
   first box on the page, read before the list. */

#shai-rail {
  background-color: var(--surface);
  border: var(--hair-strong);
  border-top: 3px solid var(--accent);
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.6rem;
  font-size: var(--t-1);
  line-height: 1.5;
}

#shai-rail h2 {
  font-size: var(--t0);
  margin: 0 0 0.6rem;
  padding: 0 0 0.5rem;
  border-bottom: var(--hair);
  letter-spacing: 0.02em;
}

#shai-rail dl { margin: 0; }

#shai-rail dl > div {
  padding: 0.38rem 0;
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 26%);
  transition: background-color 180ms var(--ease);
}

#shai-rail dl > div:last-child { border-bottom: 0; }

#shai-rail dl > div:hover { background-color: rgb(var(--accent-rgb) / 6%); }

#shai-rail dt {
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: var(--t-2);
  color: rgb(var(--ink-rgb) / 72%);
}

#shai-rail dd { margin: 0.1rem 0 0; }

/* the rows the comparator writes into. They carry a figure with JS off, so they
   are never blank. */
#shai-rail dl > div:has(output) {
  background-color: rgb(var(--accent-rgb) / 7%);
}

#shai-rail output {
  font-weight: 600;
  color: var(--accent);
}

#shai-rail p {
  margin: 0.8rem 0 0;
  padding-top: 0.7rem;
  border-top: var(--hair);
  font-size: var(--t-2);
  color: rgb(var(--ink-rgb) / 78%);
}

/* -- 5 --------------------------------------------------- ledger header -- */
/* The opener is a ledger: label left, entry right, one rule to a row, the way
   the office book is ruled. The last row names the page you are on. */

.shai-ledger {
  background-color: var(--surface);
  border: var(--hair-strong);
  padding: 1rem 1.1rem 0.6rem;
  margin: 0 0 1.4rem;
}

.shai-ledger .shai-wordmark {
  font-family: Quattrocento, Georgia, serif;
  font-weight: 700;
  font-size: var(--t2);
  letter-spacing: 0.07em;
  margin: 0 0 0.1rem;
  line-height: 1.1;
}

.shai-ledger .shai-trading {
  margin: 0 0 0.85rem;
  font-size: var(--t-1);
  color: rgb(var(--ink-rgb) / 76%);
}

.shai-ledger dl {
  margin: 0;
  border-top: 2px solid rgb(var(--ink-rgb) / 42%);
  font-size: var(--t-1);
}

.shai-ledger dl > div {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  gap: 0 0.6rem;
  align-items: baseline;
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 28%);
  padding: 0.3rem 0;
  transition: background-color 150ms var(--ease);
}

.shai-ledger dl > div:hover {
  background-color: rgb(var(--accent2-rgb) / 7%);
}

.shai-ledger dt {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: var(--t-2);
  color: rgb(var(--ink-rgb) / 70%);
}

.shai-ledger dd { margin: 0; }

.shai-ledger dl > div:last-child {
  border-bottom: 0;
  border-top: 1px solid rgb(var(--ink-rgb) / 40%);
  margin-top: 0.2rem;
}

.shai-ledger dl > div:last-child dd {
  font-weight: 600;
  color: var(--accent);
}

/* -- 6 ------------------------------------------------- contents block -- */
/* The one navigation mechanism of this site, at every width: a numbered
   contents block set into the flow, repeated at the foot of the page. */

.shai-contents {
  background-color: var(--surface);
  border: var(--hair);
  border-left: 3px solid var(--accent2);
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.8rem;
}

.shai-contents h2 {
  font-size: var(--t0);
  margin: 0 0 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.shai-contents ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: shai-page;
}

.shai-contents li {
  counter-increment: shai-page;
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 30%);
  padding: 0.45rem 0;
  line-height: 1.45;
}

.shai-contents li:last-child { border-bottom: 0; }

.shai-contents a,
.shai-contents span[aria-current] {
  display: block;
  text-decoration: none;
  padding-left: 2.1rem;
  text-indent: -2.1rem;
  transition: color 150ms var(--ease);
}

.shai-contents a::before,
.shai-contents span[aria-current]::before {
  content: counter(shai-page, decimal-leading-zero) "  ";
  font-weight: 600;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.shai-contents .shai-of {
  display: block;
  padding-left: 2.1rem;
  text-indent: 0;
  font-size: var(--t-1);
  color: rgb(var(--ink-rgb) / 74%);
  transition: color 150ms var(--ease);
}

.shai-contents a:hover { color: var(--accent2); }
.shai-contents a:hover .shai-of { color: var(--ink); }

/* the page you are on is named in the list but is not a link */
.shai-contents li:has([aria-current="page"]) {
  background-color: rgb(var(--accent-rgb) / 8%);
}

.shai-contents [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

.shai-contents [aria-current="page"] > .shai-here {
  font-weight: 400;
  font-size: var(--t-1);
  color: var(--accent);
}

.shai-contents-foot {
  border-left: 3px solid var(--accent);
  border-top: var(--hair-strong);
  margin: 2.6rem 0 1.2rem;
}

/* -- 7 ---------------------------------------- headings, hanging indent -- */
/* Section numbers hang in the margin; a wrapped heading line returns to the
   text edge, not under the number. */

section {
  margin: 0 0 2.2rem;
}

section > h2 {
  margin: 0 0 0.7rem;
  padding-left: 2.7rem;
  text-indent: -2.7rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--hair);
}

section > h2 .shai-no {
  display: inline-block;
  width: 2.1rem;
  text-indent: 0;
  font-family: Mukta, system-ui, sans-serif;
  font-size: var(--t0);
  font-weight: 600;
  color: var(--accent2);
  letter-spacing: 0.02em;
}

section h3 {
  margin: 1.4rem 0 0.4rem;
  padding-left: 1.2rem;
  text-indent: -1.2rem;
}

section > p,
section > ul,
section > ol,
section > figure > figcaption {
  max-width: 34rem;
}

section > p { margin: 0 0 0.85rem; }

section > ul,
section > ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

section > ul li,
section > ol li { margin: 0 0 0.35rem; }

main > h1 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid rgb(var(--ink-rgb) / 38%);
}

.shai-lede {
  font-size: var(--t1);
  line-height: 1.5;
  max-width: 34rem;
  margin: 0 0 1.8rem;
  color: rgb(var(--ink-rgb) / 90%);
}

.shai-note {
  border-left: 3px solid var(--accent2);
  background-color: rgb(var(--accent2-rgb) / 6%);
  padding: 0.7rem 0.9rem;
  margin: 0 0 1rem;
  max-width: 34rem;
  font-size: var(--t-1);
}

.shai-note p { margin: 0 0 0.5rem; }
.shai-note p:last-child { margin: 0; }

/* -- 8 --------------------------------------------- ruled-paper cards -- */
/* A card is a sheet of ruled paper: horizontal rules at the rule step, one
   brown margin rule down the left. Card body text is set to the same step so
   the words sit on the rules. */

.shai-lines {
  display: grid;
  gap: 1.2rem;
  margin: 0 0 1.4rem;
}

.shai-line {
  background-color: var(--surface);
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--rule-step) - 1px),
      rgb(var(--ink-rgb) / 11%) calc(var(--rule-step) - 1px),
      rgb(var(--ink-rgb) / 11%) var(--rule-step));
  background-position: 0 2.4rem;
  border: var(--hair-strong);
  padding: 0.85rem 1rem 1rem;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}

.shai-line:hover {
  border-color: rgb(var(--accent-rgb) / 70%);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 9%);
}

.shai-line > h3 {
  margin: 0 0 0.2rem;
  padding: 0;
  text-indent: 0;
  font-size: var(--t1);
  line-height: 1.7rem;
}

.shai-line .shai-cloth {
  margin: 0 0 0.4rem;
  font-size: var(--t-1);
  line-height: var(--rule-step);
  color: rgb(var(--ink-rgb) / 78%);
}

.shai-line dl {
  margin: 0.5rem 0 0.6rem;
  font-size: var(--t-1);
}

.shai-line dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.7rem;
  align-items: baseline;
  line-height: var(--rule-step);
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 22%);
  transition: background-color 150ms var(--ease);
}

.shai-line dl > div:hover {
  background-color: rgb(var(--accent-rgb) / 6%);
}

.shai-line dt {
  color: rgb(var(--ink-rgb) / 76%);
}

.shai-line dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

/* the recorded width — the figure the tape pin is set to */
.shai-line dl > div:first-child dd {
  color: var(--accent);
}

.shai-line > p {
  margin: 0.6rem 0 0;
  line-height: var(--rule-step);
  font-size: var(--t0);
}

/* a card carrying a tape gets room for it above the heading */
.shai-line:has(.shai-tape) {
  padding-top: 0.5rem;
}

/* -- 9 ------------------------------------------- the measurement tape -- */
/* The tape is drawn in millimetres: one user unit of the drawing is one
   millimetre of cloth, the tape spans 0–2400 mm, and the pin stands at the
   width recorded for that line.

   On load: the rule draws left to right, then the ticks appear left to right
   (one path, dashed, so each tick inks in turn), then the figure lands on the
   tape. Three keyframes, nothing else on this site animates. */

.shai-tape {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  margin: 0 0 0.3rem;
}

.shai-tape .shai-rule,
.shai-tape .shai-tick-minor,
.shai-tape .shai-tick-major {
  fill: none;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.shai-tape .shai-rule {
  stroke: rgb(var(--ink-rgb) / 80%);
  stroke-width: 7;
  animation: shai-draw 760ms var(--ease) 60ms forwards;
}

.shai-tape .shai-tick-minor {
  stroke: rgb(var(--ink-rgb) / 48%);
  stroke-width: 4;
  animation: shai-draw 900ms linear 300ms forwards;
}

.shai-tape .shai-tick-major {
  stroke: rgb(var(--ink-rgb) / 72%);
  stroke-width: 6;
  animation: shai-draw 900ms linear 300ms forwards;
}

.shai-tape .shai-figures text {
  fill: rgb(var(--ink-rgb) / 62%);
  font-family: Mukta, system-ui, sans-serif;
  font-size: 84px;
  font-variant-numeric: tabular-nums;
}

/* the tape numerals are hidden until the tape is wide enough to carry them;
   the recorded figure itself is in the card list either way */
.shai-tape .shai-figures {
  display: none;
  opacity: 0;
  animation: shai-figure-in 420ms var(--ease) 1120ms forwards;
}

.shai-tape .shai-mark {
  opacity: 0;
  transform: translateY(-74px);
  animation: shai-mark-land 460ms var(--ease) 1020ms forwards;
}

.shai-tape .shai-pin {
  fill: var(--accent);
}

.shai-tape .shai-pin-stem {
  stroke: var(--accent);
  stroke-width: 5;
}

.shai-tape .shai-mark text {
  fill: var(--accent);
  font-family: Mukta, system-ui, sans-serif;
  font-weight: 600;
  font-size: 122px;
  font-variant-numeric: tabular-nums;
}

@keyframes shai-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}

@keyframes shai-mark-land {
  from { opacity: 0; transform: translateY(-74px); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shai-figure-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* the tape legend sits under the drawing, in the card */
.shai-tape-legend {
  margin: 0 0 0.5rem;
  font-size: var(--t-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgb(var(--ink-rgb) / 62%);
}

/* -- 10 ------------------------------------------------ drawn diagrams -- */

figure {
  margin: 0 0 1.4rem;
  background-color: var(--surface);
  border: var(--hair);
  padding: 0.9rem 1rem 0.7rem;
}

figure svg {
  display: block;
  width: 100%;
  height: auto;
}

figcaption {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px dotted rgb(var(--ink-rgb) / 30%);
  font-size: var(--t-1);
  color: rgb(var(--ink-rgb) / 82%);
}

.shai-draw-cloth { fill: rgb(var(--accent-rgb) / 7%); stroke: rgb(var(--ink-rgb) / 55%); stroke-width: 2; }
.shai-draw-hem   { fill: none; stroke: var(--accent2); stroke-width: 2; stroke-dasharray: 7 5; }
.shai-draw-arrow { fill: none; stroke: var(--accent); stroke-width: 2.4; }
.shai-draw-head  { fill: var(--accent); }
.shai-draw-wrong { fill: none; stroke: rgb(var(--accent2-rgb) / 85%); stroke-width: 2.4; stroke-dasharray: 4 6; }
.shai-draw-label {
  fill: rgb(var(--ink-rgb) / 88%);
  font-family: Mukta, system-ui, sans-serif;
  font-size: 15px;
}
.shai-draw-figure {
  fill: var(--accent);
  font-family: Mukta, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -- 11 --------------------------------------------------------- sheets -- */
/* The comparator and the run sheet. Both print their arithmetic. Both carry a
   worked example in the markup, so with JS off the sums are still on screen. */

.shai-sheet {
  background-color: var(--surface);
  border: var(--hair-strong);
  border-top: 3px solid var(--accent2);
  padding: 0.9rem 1rem 1rem;
  margin: 0 0 1.4rem;
}

.shai-sheet > h3 {
  margin: 0 0 0.6rem;
  padding: 0 0 0.45rem;
  text-indent: 0;
  padding-left: 0;
  border-bottom: var(--hair);
  font-size: var(--t1);
}

.shai-fields {
  display: grid;
  gap: 0.8rem;
  margin: 0 0 0.9rem;
}

/* the label wraps its input, so the two are associated without an id */
.shai-field { margin: 0; }

.shai-field label { display: block; }

.shai-field .shai-label {
  display: block;
  font-weight: 600;
  font-size: var(--t-1);
  letter-spacing: 0.02em;
  transition: color 160ms var(--ease);
}

.shai-field .shai-hint {
  display: block;
  font-weight: 400;
  font-size: var(--t-2);
  color: rgb(var(--ink-rgb) / 72%);
  margin: 0.1rem 0 0.3rem;
}

.shai-field input {
  box-sizing: border-box;
  width: 100%;
  font: inherit;
  font-size: var(--t1);
  color: var(--ink);
  background-color: var(--bg);
  border: var(--hair-strong);
  border-bottom: 2px solid rgb(var(--ink-rgb) / 55%);
  padding: 0.4rem 0.55rem;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}

.shai-field input:hover { border-color: rgb(var(--accent-rgb) / 60%); }

.shai-field input:focus {
  background-color: var(--surface);
  border-bottom-color: var(--accent);
}

/* the whole field tints while it has focus — :has() doing the work an extra
   state class would otherwise do */
.shai-field:has(input:focus-visible) .shai-label { color: var(--accent); }

.shai-nudge {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0;
}

.shai-nudge button {
  font: inherit;
  font-size: var(--t-1);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background-color: var(--bg);
  border: var(--hair-strong);
  padding: 0.25rem 0.6rem;
  cursor: pointer;
  transition: background-color 150ms var(--ease), color 150ms var(--ease), border-color 150ms var(--ease);
}

.shai-nudge button:hover {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--surface);
}

.shai-work {
  margin: 0;
  padding: 0.7rem 0.8rem;
  background-color: rgb(var(--accent-rgb) / 6%);
  border-top: var(--hair);
  border-bottom: var(--hair);
  font-size: var(--t-1);
  line-height: 1.75;
}

.shai-work dt {
  font-weight: 600;
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--ink-rgb) / 68%);
  margin: 0.45rem 0 0;
}

.shai-work dt:first-child { margin-top: 0; }

.shai-work dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.shai-work .shai-sum {
  font-weight: 600;
  color: var(--accent);
}

.shai-verdict {
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-1);
}

.shai-verdict li {
  display: block;
  padding: 0.35rem 0;
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 26%);
  line-height: 1.45;
}

.shai-verdict li:last-child { border-bottom: 0; }

.shai-verdict .shai-in,
.shai-verdict .shai-out {
  display: block;
  font-variant-numeric: tabular-nums;
}

.shai-verdict .shai-in { color: var(--accent); font-weight: 600; }
.shai-verdict .shai-out { color: rgb(var(--accent2-rgb) / 100%); }

.shai-verdict li:has(.shai-in) { background-color: rgb(var(--accent-rgb) / 8%); }

.shai-guide {
  margin: 0.9rem 0 0;
  padding-top: 0.6rem;
  border-top: 2px solid rgb(var(--ink-rgb) / 36%);
  font-size: var(--t-2);
  line-height: 1.6;
  color: rgb(var(--ink-rgb) / 84%);
}

/* -- 12 ------------------------------------------ recorded-width table -- */

.shai-table-scroll {
  overflow-x: auto;
  margin: 0 0 1.2rem;
  border: var(--hair);
  background-color: var(--surface);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--t-1);
}

caption {
  caption-side: top;
  text-align: left;
  padding: 0.6rem 0.7rem 0.5rem;
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(var(--ink-rgb) / 70%);
  border-bottom: var(--hair-strong);
}

th, td {
  padding: 0.35rem 0.7rem;
  text-align: left;
  border-bottom: 1px dotted rgb(var(--ink-rgb) / 26%);
  white-space: nowrap;
}

thead th {
  font-family: Mukta, system-ui, sans-serif;
  font-size: var(--t-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgb(var(--ink-rgb) / 74%);
  border-bottom: var(--hair-strong);
}

tbody tr { transition: background-color 150ms var(--ease); }
tbody tr:hover { background-color: rgb(var(--accent-rgb) / 7%); }

td:not(:first-child) { text-align: right; font-weight: 600; }
tbody th { font-weight: 400; white-space: normal; }

/* A table with no head row is not a table of figures — it is the register of
   facts on the legal page, whose values are addresses and names. Those wrap
   and sit left rather than forcing a sideways scroll on a narrow screen.

   Written with :not(:first-child) on the cell as well, which is not
   decoration: the figures rule above it is td:not(:first-child), and a
   :not(:has()) ancestor carries only its argument's specificity, so without
   this the two rules tie at the wrong end and the addresses stay flush right
   in bold. */
table:not(:has(thead)) td:not(:first-child) {
  white-space: normal;
  text-align: left;
  font-weight: 400;
}

table:not(:has(thead)) th { width: 8.5rem; }

/* -- 13 ------------------------------------------------------- footer -- */

.shai-foot {
  background-color: var(--surface);
  border-top: 3px solid var(--accent);
  border-bottom: 0;
  margin: 0;
  padding: 1.2rem 0 2rem;
}

.shai-foot .shai-wrap { padding-bottom: 0; }

.shai-foot address {
  font-style: normal;
  margin: 0 0 0.7rem;
  line-height: 1.5;
}

.shai-foot address .shai-regname {
  display: block;
  font-family: Quattrocento, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.shai-foot address span { display: block; }

.shai-foot .shai-reg {
  margin: 0;
  font-size: var(--t-1);
  line-height: 1.6;
}

.shai-foot .shai-reg span { display: block; }

.shai-foot a {
  font-weight: 600;
  transition: color 150ms var(--ease);
}

.shai-foot .shai-sic {
  margin: 0.8rem 0 0;
  padding-top: 0.6rem;
  border-top: 1px dotted rgb(var(--ink-rgb) / 30%);
  font-size: var(--t-2);
  color: rgb(var(--ink-rgb) / 74%);
}

/* -- 14 ---------------------------------------------- width behaviour -- */
/* This site has no scroll reveal and nothing fades in as you read. What it has
   instead is width. A line always gets a row to itself — that is what a short
   list looks like — so the change by width is in the parts, not the columns:
   below 48em a card stacks its figures and the tape carries no numerals; above
   it the figures pair off and the tape prints its own scale; at 64em the rail
   leaves the flow and stands beside the page. */

@media (min-width: 30em) {
  .shai-wrap { padding: 1.4rem 1.6rem 0; }
  .shai-nudge button { padding: 0.3rem 0.75rem; }
}

@media (min-width: 48em) {
  .shai-tape .shai-figures { display: block; }

  /* the recorded figures pair off: two label-and-value rows to a line */
  .shai-line dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.8rem;
  }

  /* a card with an odd count ends on a full-width row rather than a gap */
  .shai-line dl:has(> div:last-child:nth-child(odd)) > div:last-child {
    grid-column: 1 / -1;
  }

  .shai-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  /* the verdict pairs off too: the line on the left, the reading on the right */
  .shai-verdict li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 13rem;
    gap: 0 0.9rem;
    align-items: baseline;
  }

  .shai-verdict .shai-in,
  .shai-verdict .shai-out { text-align: right; }

  .shai-ledger dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .shai-ledger dl > div:last-child { grid-column: 1 / -1; }

  .shai-contents li { padding: 0.5rem 0; }
  .shai-contents .shai-of { display: inline; padding-left: 0.6rem; }

  th, td { padding: 0.4rem 0.9rem; }
}

@media (min-width: 64em) {
  /* the rail leaves the flow and stands beside the page, so the units and the
     measuring convention stay in view while two cards are compared */
  .shai-spread {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    column-gap: 2.6rem;
    align-items: start;
  }

  .shai-spread > main { grid-column: 1; grid-row: 1; }

  #shai-rail {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1.2rem;
    margin: 0;
  }

  .shai-lines { gap: 1.5rem; }

  .shai-contents ol { columns: 2; column-gap: 2.4rem; }
  .shai-contents li { break-inside: avoid; }
}

@media (min-width: 76em) {
  .shai-spread { grid-template-columns: minmax(0, 1fr) 18rem; }
}

/* -- 15 ----------------------------------------------- reduced motion -- */
/* The set-piece is landed in its finished state: the rule drawn, every tick
   inked, the figures showing and the pin standing on the tape. Not a shorter
   animation — no animation, and the end state applied. */

@media (prefers-reduced-motion: reduce) {
  .shai-tape .shai-rule,
  .shai-tape .shai-tick-minor,
  .shai-tape .shai-tick-major {
    animation: none;
    stroke-dashoffset: 0;
  }

  .shai-tape .shai-figures {
    animation: none;
    opacity: 1;
  }

  .shai-tape .shai-mark {
    animation: none;
    opacity: 1;
    transform: none;
  }

  a,
  .shai-ledger dl > div,
  .shai-contents a,
  .shai-contents .shai-of,
  #shai-rail dl > div,
  .shai-line,
  .shai-line dl > div,
  .shai-field .shai-label,
  .shai-field input,
  .shai-nudge button,
  tbody tr,
  .shai-foot a {
    transition: none;
  }
}

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

@media print {
  body { background-image: none; }
  .shai-contents-foot { display: none; }
  .shai-line, .shai-sheet, .shai-ledger, #shai-rail, figure { border: 1px solid rgb(var(--ink-rgb) / 60%); }
  .shai-tape .shai-rule,
  .shai-tape .shai-tick-minor,
  .shai-tape .shai-tick-major { stroke-dashoffset: 0; animation: none; }
  .shai-tape .shai-mark, .shai-tape .shai-figures { opacity: 1; transform: none; animation: none; }
}