@layer tokens, surfaces, panes;

/* ============================================================ tokens ===== */

@layer tokens {
  :root {
    --bg: #f4f6fb;
    --ink: #1f2838;
    --accent: #2f55c8;
    --accent2: #6b7689;
    --surface: #fdfdff;

    --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--bg));
    --ink-quiet: color-mix(in srgb, var(--ink) 52%, var(--bg));
    --rule-hair: color-mix(in srgb, var(--ink) 13%, transparent);
    --rule-firm: color-mix(in srgb, var(--ink) 26%, transparent);
    --rule-cobalt: color-mix(in srgb, var(--accent) 34%, transparent);
    --tint-cobalt: color-mix(in srgb, var(--accent) 7%, transparent);
    --tint-deep: color-mix(in srgb, var(--accent) 13%, transparent);
    --tint-grey: color-mix(in srgb, var(--accent2) 12%, transparent);
    --hatch: color-mix(in srgb, var(--ink) 4.5%, transparent);
    --hatch-faint: color-mix(in srgb, var(--accent2) 5%, transparent);
    --wash-one: color-mix(in srgb, var(--accent) 6%, transparent);
    --wash-two: color-mix(in srgb, var(--accent2) 9%, transparent);
    --wash-three: color-mix(in srgb, var(--ink) 4%, transparent);
    --shade: color-mix(in srgb, var(--ink) 9%, transparent);
    --shade-lift: color-mix(in srgb, var(--ink) 16%, transparent);

    --display: "Gabarito", "Trebuchet MS", system-ui, sans-serif;
    --body: "Kumbh Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

    --step: 0.8rem;
    --tab-w: 1.6rem;
    --pad-x: 0.95rem;
    --pane-pad: 1rem;
    --measure: 68ch;
    --rhythm: 2.35rem;
    --radius: 0.22rem;

    --t-tap: 120ms;
    --t-move: 250ms;
    --t-sheet: 420ms;
    --ease: cubic-bezier(0.2, 0.75, 0.25, 1);
    --ease-over: cubic-bezier(0.34, 1.52, 0.64, 1);

    --mosaic-last: 320ms;
  }

  @media (min-width: 34em) {
    :root { --pad-x: 1.5rem; --pane-pad: 1.3rem; --mosaic-last: 256ms; }
  }

  @media (min-width: 46em) {
    :root {
      --step: 1.75rem;
      --tab-w: 1.9rem;
      --pad-x: 2rem;
      --pane-pad: 1.7rem;
      --rhythm: 3rem;
      --mosaic-last: 256ms;
    }
  }

  @media (min-width: 64em) {
    :root {
      --step: 2.6rem;
      --tab-w: 2.15rem;
      --pad-x: 2.6rem;
      --pane-pad: 2.1rem;
      --rhythm: 3.6rem;
      --mosaic-last: 288ms;
    }
  }
}

/* ========================================================== surfaces ===== */

@layer surfaces {
  html {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--body);
    font-size: 100%;
    line-height: 1.6;
    text-size-adjust: 100%;
    scroll-padding-top: 1.5rem;
  }

  body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
    position: relative;
  }

  /* concrete wash: a chalked floor under a drawing board. Two fine hatches at
     different pitches, three broad irregular blooms, one trowel sweep. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(90deg, var(--hatch) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg, var(--hatch-faint) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg, var(--hatch) 0 1px, transparent 1px 48px),
      radial-gradient(44% 26% at 9% 4%, var(--wash-one) 0, transparent 72%),
      radial-gradient(58% 34% at 94% 19%, var(--wash-two) 0, transparent 74%),
      radial-gradient(74% 40% at 28% 72%, var(--wash-three) 0, transparent 78%),
      radial-gradient(48% 30% at 72% 96%, var(--wash-one) 0, transparent 70%);
  }

  body::after {
    content: "";
    position: fixed;
    left: -14%;
    right: -14%;
    top: 36%;
    height: 42vh;
    z-index: 0;
    pointer-events: none;
    transform: rotate(-3.2deg);
    background-image: linear-gradient(
      96deg,
      transparent 0 8%,
      var(--wash-three) 24%,
      transparent 41% 58%,
      var(--wash-two) 74%,
      transparent 92% 100%
    );
    opacity: 0.6;
  }

  h1, h2, h3, h4 {
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.13;
    letter-spacing: -0.012em;
    margin: 0;
    text-wrap: balance;
  }

  h1 { font-size: clamp(1.68rem, 6.4vw, 3.05rem); }
  h2 { font-size: clamp(1.26rem, 4.1vw, 1.92rem); }
  h3 { font-size: clamp(1.04rem, 2.9vw, 1.26rem); }
  h4 { font-size: 0.95rem; letter-spacing: 0.02em; }

  p {
    margin: 0 0 0.95em;
    max-width: var(--measure);
    overflow-wrap: break-word;
  }

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

  strong { font-family: var(--display); font-weight: 700; }

  a {
    color: var(--accent);
    text-decoration-color: var(--rule-cobalt);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--t-tap) var(--ease),
                text-decoration-color var(--t-tap) var(--ease);
  }

  a:hover { color: var(--ink); text-decoration-color: var(--ink); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 1px;
  }

  ul, ol { max-width: var(--measure); }

  code, samp, kbd {
    font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
    font-size: 0.88em;
    background: var(--tint-cobalt);
    padding: 0.08em 0.3em;
    border-radius: 2px;
  }

  table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
  caption { text-align: left; }

  th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.75rem 0.5rem 0;
    border-bottom: 1px solid var(--rule-hair);
  }

  th {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.085em;
    text-transform: uppercase;
    color: var(--accent2);
    border-bottom: 1px solid var(--rule-firm);
    white-space: nowrap;
  }

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

  input[type="number"], textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);
    padding: 0.5rem 0.6rem;
    transition: border-color var(--t-tap) var(--ease),
                box-shadow var(--t-tap) var(--ease),
                background-color var(--t-tap) var(--ease);
  }

  input[type="number"]:hover, textarea:hover { border-color: var(--rule-cobalt); }

  input[type="number"]:focus-visible, textarea:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--tint-cobalt);
    outline-offset: 1px;
  }

  textarea { resize: vertical; min-height: 7.5rem; line-height: 1.45; }

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

  hr {
    border: 0;
    border-top: 1px solid var(--rule-hair);
    margin: var(--rhythm) 0;
  }
}

/* ============================================================= panes ===== */

@layer panes {

  /* ---- page frame ------------------------------------------------------ */

  .page {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 78rem;
    margin: 0 auto;
    padding: 0 var(--pad-x) 3.5rem;
  }

  .skip {
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
    z-index: 60;
    transform: translateY(-180%);
    background: var(--accent);
    color: var(--surface);
    font-family: var(--display);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius);
    transition: transform var(--t-move) var(--ease-over);
  }

  /* a skip link reached by ANY means must be on screen, not only by the
     focus-visible heuristic */
  .skip:focus,
  .skip:focus-visible { transform: translateY(0); }

  /* ---- ledger header (opener) ----------------------------------------- */

  .masthead {
    display: grid;
    gap: 1.1rem;
    padding: 1.6rem 0 1.2rem;
    border-bottom: 2px solid var(--ink);
  }

  .mastTop {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.9rem 1.2rem;
  }

  .mark {
    display: flex;
    align-items: center;
    gap: 0.62rem;
    text-decoration: none;
    color: inherit;
  }

  .markGlyph { width: 2.1rem; flex: 0 0 auto; }

  .markGlyph rect { transition: fill var(--t-move) var(--ease); }

  .mark:hover .markGlyph rect[data-held] { fill: var(--accent); }

  .markWord {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .markWord span {
    display: block;
    font-family: var(--body);
    font-weight: 400;
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    color: var(--accent2);
  }

  .eyebrow {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.145em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0;
  }

  .lede {
    font-size: 1.02rem;
    color: var(--ink-soft);
    max-width: 58ch;
  }

  /* ---- the ledger component (ruled rows, dotted leaders, no money) ---- */

  .ledger {
    margin: 0;
    border-top: 1px solid var(--rule-firm);
  }

  .ledger > div {
    display: grid;
    gap: 0 0.5rem;
    padding: 0.44rem 0;
    border-bottom: 1px solid var(--rule-hair);
    transition: background-color var(--t-tap) var(--ease);
  }

  .ledger > div:hover { background: var(--tint-cobalt); }

  .ledger dt {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent2);
    line-height: 1.5;
    padding-top: 0.1rem;
  }

  .ledger dd { margin: 0; font-size: 0.93rem; }

  .ledger dd b { font-family: var(--display); font-weight: 700; }

  .ledgerFacts { max-width: 46rem; }

  @media (min-width: 34em) {
    .ledger > div {
      grid-template-columns: 11.5rem 1fr;
      align-items: baseline;
    }

    .ledger dt {
      position: relative;
      overflow: hidden;
      white-space: nowrap;
    }

    .ledger dt::after {
      content: "";
      position: absolute;
      bottom: 0.3em;
      left: 0;
      width: 100%;
      border-bottom: 1px dotted var(--rule-firm);
      transform: translateX(0.4rem);
      z-index: -1;
    }

    .ledger dt > span {
      background: var(--bg);
      padding-right: 0.4rem;
      position: relative;
    }

    .ledger > div:hover dt > span { background: transparent; }
  }

  /* ---- sheet nav (full-viewport, replaces the page while open) -------- */

  .sheetKey {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ink);
    color: var(--surface);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.52rem 0.8rem;
    cursor: pointer;
    transition: background-color var(--t-tap) var(--ease),
                color var(--t-tap) var(--ease),
                transform var(--t-tap) var(--ease-over);
  }

  /* a class-level display beats the UA rule for [hidden]: without this the key
     is on screen and dead whenever the module has not run */
  .sheetKey[hidden] { display: none; }

  .sheetKey:hover { background: var(--accent); border-color: var(--accent); }
  .sheetKey:active { transform: translateY(1px); }

  .sheetKey i {
    display: grid;
    grid-template: repeat(3, 2px) / repeat(3, 2px);
    gap: 1px;
  }

  .sheetKey i::before,
  .sheetKey i::after {
    content: "";
    grid-area: 1 / 1 / 4 / 4;
    background-image:
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0),
      linear-gradient(currentColor 0 0);
    background-size: 2px 2px;
    background-repeat: no-repeat;
  }

  .sheetKey i::before { background-position: 0 0, 3px 0, 6px 0; }
  .sheetKey i::after { background-position: 0 3px, 3px 3px, 6px 3px; }

  .sheet {
    box-sizing: border-box;
    margin: 1.4rem 0 0;
    padding: 1.2rem 0 0;
    border-top: 1px solid var(--rule-firm);
  }

  .sheetInner {
    box-sizing: border-box;
    max-width: 78rem;
    margin: 0 auto;
  }

  .sheetHead {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }

  /* rules are drawn on the items, not as a gap over a tinted backing: a grid
     whose last row is short would otherwise show a tinted empty cell */
  .sheetList {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: none;
    display: grid;
    gap: 0;
    border-top: 1px solid var(--rule-hair);
  }

  @media (min-width: 46em) {
    .sheetList { grid-template-columns: 1fr 1fr; }
  }

  @media (min-width: 70em) {
    .sheetList { grid-template-columns: repeat(3, 1fr); }
  }

  .sheetList a {
    display: grid;
    gap: 0.15rem;
    height: 100%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--rule-hair);
    padding: 0.7rem 0.8rem 0.72rem;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
    transition: background-color var(--t-tap) var(--ease),
                border-left-color var(--t-tap) var(--ease),
                padding-left var(--t-move) var(--ease);
  }

  .sheetList a:hover,
  .sheetList a:focus-visible {
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--rule-hair);
    border-left-color: var(--accent);
    padding-left: 1.1rem;
  }

  .sheetList a[aria-current="page"] {
    background: var(--tint-deep);
    border-left-color: var(--ink);
  }

  .sheetList b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.97rem;
    letter-spacing: -0.005em;
  }

  .sheetList em {
    font-style: normal;
    font-size: 0.78rem;
    color: var(--ink-quiet);
    line-height: 1.4;
  }

  .sheetList i {
    font-style: normal;
    font-family: var(--display);
    font-size: 0.6rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .sheetFoot {
    margin: 1.2rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--rule-hair);
    font-size: 0.78rem;
    color: var(--ink-quiet);
    max-width: none;
  }

  .sheetFoot b {
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ink);
  }

  .sheetShut {
    background: transparent;
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    transition: border-color var(--t-tap) var(--ease),
                background-color var(--t-tap) var(--ease);
  }

  .sheetShut:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

  html[data-sheet] .sheet {
    position: fixed;
    inset: 0;
    z-index: 50;
    margin: 0;
    padding: 1.2rem var(--pad-x) 2.6rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg);
    background-image:
      repeating-linear-gradient(90deg, var(--hatch) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(0deg, var(--hatch-faint) 0 1px, transparent 1px 8px),
      radial-gradient(60% 36% at 88% 8%, var(--wash-one) 0, transparent 74%);
    border-top: 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-1.2rem);
    transition: opacity var(--t-sheet) var(--ease),
                transform var(--t-sheet) var(--ease),
                visibility 0s linear var(--t-sheet);
  }

  html[data-sheet="open"] .sheet {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s, 0s, 0s;
  }

  html[data-sheet="open"] { overflow: hidden; }

  html[data-sheet] .sheet .sheetInner { padding-top: 0.4rem; }

  /* ---- stepped indent: indent depth is portal depth ------------------- */

  [data-depth="0"] { --depth: 0; }
  [data-depth="1"] { --depth: 1; }
  [data-depth="2"] { --depth: 2; }

  .surface {
    position: relative;
    margin: var(--rhythm) 0 0 calc(var(--depth, 0) * var(--step));
    padding-left: calc(var(--tab-w) + 0.85rem);
    scroll-margin-top: 1rem;
  }

  .surface[data-depth="1"]::before,
  .surface[data-depth="2"]::before {
    content: "";
    position: absolute;
    left: calc(var(--step) * -1);
    top: calc(var(--rhythm) * -0.62);
    width: calc(var(--step) - 0.34rem);
    height: calc(var(--rhythm) * 0.62 + 1.55rem);
    border-left: 1px solid var(--rule-firm);
    border-bottom: 1px solid var(--rule-firm);
    border-bottom-left-radius: 0.55rem;
    pointer-events: none;
  }

  .surface[data-depth="2"]::after {
    content: "";
    position: absolute;
    left: calc(var(--step) * -1 - 0.18rem);
    top: calc(var(--rhythm) * -0.62);
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: var(--accent);
  }

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

  .head { position: relative; }

  .tab {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tab-w);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    background: var(--ink);
    color: var(--surface);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.64rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    padding: 0.55rem 0 0.75rem;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 0.8rem));
    transition: background-color var(--t-move) var(--ease),
                letter-spacing var(--t-move) var(--ease);
  }

  .surface[data-depth="1"] .tab { background: var(--accent); }
  .surface[data-depth="2"] .tab { background: var(--accent2); }
  .surface:hover .tab { background: var(--accent); letter-spacing: 0.21em; }

  .depthNote {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0.55rem 0 0;
  }

  .depthNote b { color: var(--ink); }

  .body { padding-top: 0.95rem; }

  /* where a surface sits, carried on every sub-page */
  .depthPath {
    list-style: none;
    margin: 0;
    padding: 0.55rem 0 0;
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.45rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.63rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .depthPath li { display: flex; align-items: center; gap: 0.45rem; }

  .depthPath li + li::before {
    content: "";
    width: 0.8rem;
    height: 1px;
    background: var(--rule-firm);
  }

  .depthPath a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--t-tap) var(--ease),
                border-bottom-color var(--t-tap) var(--ease);
  }

  .depthPath a:hover,
  .depthPath a:focus-visible { color: var(--ink); border-bottom-color: var(--ink); }

  .depthPath b { font-weight: 700; color: var(--ink); }

  .depthPath i {
    font-style: normal;
    color: var(--accent);
    letter-spacing: 0.06em;
  }

  .plain {
    position: relative;
    margin: var(--rhythm) 0 0;
    max-width: 62rem;
  }

  .plain > h2,
  .plain > h3 { margin-bottom: 0.7rem; }

  .plain > h3 { margin-top: 1.6rem; }

  /* ---- tile mosaic (set-piece) ---------------------------------------- */

  .mosaic {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
  }

  @media (min-width: 34em) { .mosaic { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; } }

  .tile {
    opacity: 0;
    animation: tileSettle 620ms var(--ease-over) both;
    animation-delay: var(--d2, 0ms);
  }

  @media (min-width: 34em) { .tile { animation-delay: var(--d3, 0ms); } }
  @media (min-width: 64em) { .tile { animation-delay: var(--d4, 0ms); } }

  .tile a {
    display: grid;
    align-content: space-between;
    gap: 0.9rem;
    height: 100%;
    box-sizing: border-box;
    min-height: 6.2rem;
    padding: 0.62rem 0.68rem 0.58rem;
    background: var(--surface);
    border: 1px solid var(--rule-hair);
    border-top: 2px solid var(--rule-firm);
    border-radius: var(--radius);
    text-decoration: none;
    color: inherit;
    transition: transform var(--t-move) var(--ease-over),
                border-top-color var(--t-move) var(--ease),
                box-shadow var(--t-move) var(--ease);
  }

  .tile a:hover,
  .tile a:focus-visible {
    transform: translateY(-3px);
    border-top-color: var(--accent);
    box-shadow: 0 6px 0 -3px var(--shade);
  }

  .tile[data-depth="1"] a { border-top-color: var(--rule-cobalt); }
  .tile[data-depth="2"] a { border-top-color: var(--accent2); }

  .tileName {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.92rem;
    line-height: 1.16;
  }

  .tileFoot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.4rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .mosaic::after {
    content: "";
    grid-column: 1 / -1;
    height: 2px;
    margin-top: 0.3rem;
    background: var(--ink);
    transform-origin: left center;
    animation: baselineSnap 520ms var(--ease) both;
    animation-delay: calc(var(--mosaic-last) + 400ms);
  }

  /* ---- figures --------------------------------------------------------- */

  .figure {
    margin: 1.5rem 0 0;
    padding: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule-hair);
    border-left: 3px solid var(--rule-cobalt);
    border-radius: var(--radius);
  }

  .figure figcaption {
    font-size: 0.78rem;
    color: var(--ink-quiet);
    margin-top: 0.7rem;
    max-width: 62ch;
  }

  .figure svg text { font-family: var(--display); font-weight: 700; }
  /* a group carrying .lbl has to beat the element-level svg text rule for its
     own <text> children, or every annotation renders as display-bold */
  .figure svg .lbl,
  .figure svg .lbl text,
  .figure svg text.lbl { font-family: var(--body); font-weight: 400; }

  /* ---- pane: a bordered block for grids, lists and notes -------------- */

  .pane {
    margin: 1.5rem 0 0;
    padding: var(--pane-pad);
    background: var(--surface);
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);
  }

  .pane > h3 { margin-bottom: 0.6rem; }

  .paneTitle {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0 0 0.75rem;
  }

  .scrollRig {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-left: 1px solid transparent;
    transition: border-left-color var(--t-tap) var(--ease);
  }

  .scrollRig:focus-visible { border-left-color: var(--accent); }
  .scrollRig table { min-width: 30rem; }

  .runList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.1rem;
  }

  .runList li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.1rem 0.55rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--rule-hair);
    font-size: 0.91rem;
  }

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

  .runList b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--accent);
    padding-top: 0.14rem;
  }

  .runList em {
    grid-column: 2;
    font-style: normal;
    font-size: 0.8rem;
    color: var(--ink-quiet);
  }

  .noteStrip {
    margin: 1.3rem 0 0;
    padding: 0.7rem 0.85rem;
    background: var(--tint-grey);
    border-radius: var(--radius);
    font-size: 0.85rem;
    color: var(--ink-soft);
  }

  .noteStrip b { font-family: var(--display); font-weight: 700; color: var(--ink); }

  .onward {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 1.3rem 0 0;
    padding: 0;
    list-style: none;
    max-width: none;
  }

  .onward a {
    display: inline-block;
    padding: 0.38rem 0.66rem;
    background: var(--bg);
    border: 1px solid var(--rule-firm);
    border-radius: 999px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--ink);
    transition: background-color var(--t-tap) var(--ease),
                border-color var(--t-tap) var(--ease),
                transform var(--t-tap) var(--ease-over);
  }

  .onward a:hover,
  .onward a:focus-visible {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
    transform: translateY(-2px);
  }

  /* ---- widget rigs ---------------------------------------------------- */

  .rig {
    margin: 1.5rem 0 0;
    padding: var(--pane-pad);
    background: var(--surface);
    border: 1px solid var(--rule-firm);
    border-top: 3px solid var(--accent);
    border-radius: var(--radius);
  }

  .rigGrid { display: grid; gap: 0.8rem; }

  @media (min-width: 46em) {
    .rigGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  .rigField { display: grid; gap: 0.25rem; }

  .rigField label {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .rigField small { font-size: 0.74rem; color: var(--ink-quiet); line-height: 1.35; }

  /* a field that takes a two-digit count should not look like an essay box */
  .rigField input[type="number"] { max-width: 8.5rem; }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.95rem;
    background: var(--accent);
    color: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.56rem 0.95rem;
    cursor: pointer;
    transition: background-color var(--t-tap) var(--ease),
                transform var(--t-tap) var(--ease-over),
                box-shadow var(--t-tap) var(--ease);
  }

  .btn:hover { background: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 0 var(--shade-lift); }
  .btn:active { transform: translateY(2px); box-shadow: none; }

  .rigOut { display: block; margin-top: 1.1rem; }

  .rigOut:empty { display: none; }

  .outHead {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0 0 0.5rem;
  }

  .outRow + .outHead { margin-top: 1.25rem; }

  .outRow em sup {
    font-size: 0.78em;
    line-height: 0;
    padding-left: 0.04em;
  }

  .outSum {
    margin: 0.8rem 0 0;
    padding: 0.6rem 0.75rem;
    background: var(--tint-cobalt);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.89rem;
  }

  .outSum b { font-family: var(--display); font-weight: 700; }

  .outRow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.2rem 0.6rem;
    padding: 0.4rem 0.45rem;
    border-bottom: 1px solid var(--rule-hair);
    border-radius: 2px;
    font-size: 0.88rem;
    animation: rowIn 320ms var(--ease) both;
    animation-delay: var(--rd, 0ms);
  }

  .outRow span:last-child {
    font-family: var(--display);
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
  }

  .outRow em {
    grid-column: 1 / -1;
    font-style: normal;
    font-size: 0.76rem;
    color: var(--ink-quiet);
  }

  .outRow[data-flag="clash"] { background: var(--tint-deep); }
  .outRow[data-flag="clash"] span:last-child { color: var(--accent); }

  .guide {
    display: block;
    margin-top: 0.85rem;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .errLine {
    margin: 0.6rem 0 0;
    font-size: 0.86rem;
    color: var(--accent);
  }

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

  .foot {
    margin-top: 3.2rem;
    padding-top: 1.3rem;
    border-top: 2px solid var(--ink);
    display: grid;
    gap: 1.2rem;
    font-size: 0.86rem;
  }

  @media (min-width: 46em) {
    .foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.6rem; }
  }

  .footName {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    margin: 0 0 0.45rem;
  }

  .footAddr {
    font-style: normal;
    line-height: 1.5;
    color: var(--ink-soft);
  }

  .footAddr span { display: block; }

  .footFacts { margin: 0.7rem 0 0; color: var(--ink-quiet); }
  .footFacts span { display: block; }

  .footMail a { word-break: break-word; }

  .footKey {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.28rem;
    font-size: 0.8rem;
  }

  .footKey li { display: grid; grid-template-columns: 1.15rem 1fr; gap: 0.5rem; }

  .footKey b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    color: var(--accent);
    padding-top: 0.16rem;
  }

  /* ==================================================================== */
  /* composition shapes                                                   */
  /* A body section is never the same figure twice on one page. Nine      */
  /* shapes, each a different way of putting a section on the sheet; the  */
  /* surface frame (indent, side tab, depth note) is the constant, the    */
  /* arrangement inside it is not.                                        */
  /* ==================================================================== */

  /* ---- 1. card-grid : small cards in a row, each one fact ------------- */

  .sCards .cardLead { display: grid; gap: 0.5rem; }

  @media (min-width: 64em) {
    .sCards .cardLead {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
      gap: 0 2.4rem;
      align-items: start;
    }

    .sCards .cardLead p { max-width: 50ch; margin-bottom: 0; }
  }

  .sCards .cardLead p + p { margin-top: 0.8rem; }

  /* the sub-pages' card grid. Deliberately NOT the mosaic: the settle is the
     index's set-piece and is not repeated anywhere else on the site. */
  .factGrid {
    list-style: none;
    margin: 1.4rem 0 0;
    padding: 0;
    max-width: none;
    display: grid;
    gap: 0.6rem;
  }

  @media (min-width: 34em) { .factGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64em) { .factGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .factGrid li {
    box-sizing: border-box;
    display: grid;
    align-content: start;
    gap: 0.28rem;
    background: var(--surface);
    border: 1px solid var(--rule-hair);
    border-top: 2px solid var(--rule-cobalt);
    border-radius: var(--radius);
    padding: 0.68rem 0.75rem 0.75rem;
    transition: border-top-color var(--t-move) var(--ease),
                box-shadow var(--t-move) var(--ease);
  }

  .factGrid li:hover { border-top-color: var(--accent); box-shadow: 0 4px 0 -2px var(--shade); }

  .factGrid b {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  .factGrid span { font-size: 0.88rem; line-height: 1.45; }

  .factGrid + p { margin-top: 1.25rem; }

  /* ---- 2. stacked-overlap : two panels, the upper one laid over ------- */

  .layerStack { margin-top: 1.4rem; max-width: none; }

  .layerPane {
    position: relative;
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--rule-firm);
    border-radius: var(--radius);
    padding: var(--pane-pad);
  }

  .layerPane > :last-child { margin-bottom: 0; }

  /* the back pane keeps its own text clear of the strip the front one covers */
  .layerBack {
    z-index: 1;
    border-top: 3px solid var(--ink);
    padding-bottom: calc(var(--pane-pad) + 1.9rem);
  }

  .layerBack p { max-width: 54ch; }

  .layerFront {
    z-index: 2;
    margin: -1.1rem 0 0 1.1rem;
    border-top: 3px solid var(--accent);
    box-shadow: -4px -4px 0 0 var(--shade);
    transition: transform var(--t-move) var(--ease),
                box-shadow var(--t-move) var(--ease);
  }

  .layerFront:hover { transform: translate(2px, -2px); box-shadow: -7px -7px 0 0 var(--shade); }

  @media (min-width: 46em) {
    .layerFront { margin: -2rem 0 0 8%; width: 92%; }
    .layerBack { padding-bottom: calc(var(--pane-pad) + 2.6rem); }
  }

  @media (min-width: 64em) {
    .layerFront { margin: -2.4rem 0 0 13%; width: 87%; }
    .layerBack { padding-bottom: calc(var(--pane-pad) + 3rem); }
  }

  .layerTag {
    position: absolute;
    top: -0.62rem;
    left: var(--pane-pad);
    background: var(--accent);
    color: var(--surface);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 2px;
  }

  .layerBack .layerTag { background: var(--ink); }

  .layerStack .figure { margin-top: 0; border-left-width: 0; border: 0; padding: 0; background: none; }

  /* ---- 3. pull-quote : one sentence set large, body beneath ----------- */

  .bigQuote {
    margin: 1.5rem 0 0;
    padding: 1.15rem 0 1.2rem;
    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--rule-firm);
    max-width: 30ch;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.35rem, 4.6vw, 2.42rem);
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-wrap: balance;
  }

  .bigQuote b { color: var(--accent); font-family: inherit; }

  @media (min-width: 46em) { .bigQuote { max-width: 22ch; } }

  @media (min-width: 64em) {
    .sQuote .quoteWrap {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 0 3rem;
      align-items: start;
    }

    .bigQuote { margin-top: 0.3rem; max-width: none; }

    .quoteBody { padding-top: 0.5rem; }
  }

  .quoteBody { margin-top: 1.25rem; }

  .quoteBody p { max-width: 56ch; }

  @media (min-width: 64em) { .quoteBody { margin-top: 0; } }

  /* ---- 4. ledger-rows : the section's content IS the ruled register --- */

  .rowRegister {
    margin: 1.4rem 0 0;
    max-width: none;
    border-top: 2px solid var(--ink);
  }

  .rowRegister > div {
    display: grid;
    gap: 0.12rem 1.1rem;
    padding: 0.62rem 0.5rem 0.66rem 0;
    border-bottom: 1px solid var(--rule-hair);
    transition: background-color var(--t-tap) var(--ease),
                padding-left var(--t-move) var(--ease);
  }

  .rowRegister > div:hover { background: var(--tint-cobalt); padding-left: 0.5rem; }

  .rowRegister dt {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.86rem;
    line-height: 1.3;
  }

  .rowRegister dt i {
    display: block;
    font-style: normal;
    font-family: var(--body);
    font-weight: 400;
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-top: 0.16rem;
  }

  .rowRegister dd { margin: 0; font-size: 0.89rem; color: var(--ink-soft); }

  .rowRegister dd + dd { font-size: 0.82rem; color: var(--ink-quiet); }

  @media (min-width: 46em) {
    .rowRegister > div { grid-template-columns: 13rem minmax(0, 1.25fr) minmax(0, 1fr); }
    .rowRegister dd + dd { text-align: right; }
  }

  @media (min-width: 64em) {
    .rowRegister > div { grid-template-columns: 15rem minmax(0, 1.4fr) minmax(0, 1fr); }
  }

  /* prose that resumes after a shape needs its own air */
  .rowRegister + p,
  .chain + p { margin-top: 1.25rem; }

  .rowHeadings {
    display: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent2);
    padding-bottom: 0.4rem;
  }

  @media (min-width: 46em) {
    .rowHeadings {
      display: grid;
      grid-template-columns: 13rem minmax(0, 1.25fr) minmax(0, 1fr);
      gap: 0 1.1rem;
      margin: 1.4rem 0 0;
    }

    .rowHeadings + .rowRegister { margin-top: 0; }
    .rowHeadings span:last-child { text-align: right; }
  }

  @media (min-width: 64em) {
    .rowHeadings { grid-template-columns: 15rem minmax(0, 1.4fr) minmax(0, 1fr); }
  }

  /* ---- 5. offset-split : narrow side overhangs the gutter ------------- */

  .splitRow { margin-top: 1.4rem; display: grid; gap: 1.4rem; max-width: none; }

  .splitWide > :last-child { margin-bottom: 0; }

  .splitNarrow { align-self: start; }

  @media (min-width: 60em) {
    .splitRow {
      grid-template-columns: minmax(0, 1.52fr) minmax(0, 1fr);
      gap: 0 var(--step);
      align-items: start;
    }

    .splitNarrow {
      margin-left: calc(var(--step) * -0.78);
      margin-top: 1.9rem;
    }

    .splitNarrow .figure,
    .splitNarrow .splitCard {
      box-shadow: -6px 6px 0 -1px var(--shade);
      transition: box-shadow var(--t-move) var(--ease),
                  transform var(--t-move) var(--ease);
    }

    .splitNarrow .figure:hover,
    .splitNarrow .splitCard:hover { transform: translate(-3px, -1px); box-shadow: -10px 9px 0 -1px var(--shade); }
  }

  .splitNarrow .figure { margin-top: 0; }

  .splitCard {
    box-sizing: border-box;
    background: var(--surface);
    border: 1px solid var(--rule-hair);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: var(--pane-pad);
    font-size: 0.88rem;
  }

  .splitCard p { max-width: none; }

  .splitCard > :last-child { margin-bottom: 0; }

  /* ---- 6. full-bleed-band : colour to both edges, content centred ----- */

  .bandWrap {
    position: relative;
    margin: 1.7rem 0 0;
    margin-left: calc((var(--tab-w) + 0.85rem + var(--depth, 0) * var(--step)) * -1);
    padding: 1.7rem var(--pad-x) 1.8rem;
    color: var(--surface);
  }

  /* the colour reaches the viewport edges and stops there: the band's own box is
     the page content box, so its centre is the viewport centre and half a viewport
     either way lands exactly on the edge - no overflow to clip, no sideways scroll */
  .bandWrap::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    background:
      repeating-linear-gradient(90deg,
        color-mix(in srgb, var(--surface) 7%, transparent) 0 1px, transparent 1px 9px),
      linear-gradient(103deg,
        var(--ink) 0 34%,
        color-mix(in srgb, var(--accent) 86%, var(--ink)) 72%,
        var(--accent) 100%);
  }

  .bandInner {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    max-width: 46rem;
    margin: 0 auto;
  }

  .bandInner p { max-width: 62ch; color: color-mix(in srgb, var(--surface) 88%, var(--accent2)); }

  .bandInner > :last-child { margin-bottom: 0; }

  .bandInner .paneTitle,
  .bandInner .eyebrow { color: color-mix(in srgb, var(--surface) 72%, var(--accent)); }

  .bandInner h3 { color: var(--surface); margin-bottom: 0.6rem; }

  .bandInner .rig {
    background: color-mix(in srgb, var(--surface) 96%, var(--ink));
    color: var(--ink);
    border-color: transparent;
    border-top-color: var(--accent);
  }

  .bandInner .rig p { color: var(--ink-soft); }

  /* anything that has to stay legible as a document sits on its own light card */
  .bandCard {
    margin: 1.15rem 0 0;
    padding: var(--pane-pad);
    background: color-mix(in srgb, var(--surface) 96%, var(--ink));
    color: var(--ink);
    border-radius: var(--radius);
  }

  /* a ruled list reads on the band itself, with the rules lifted off the dark */
  .bandInner .runList li { border-bottom-color: color-mix(in srgb, var(--surface) 26%, transparent); }
  .bandInner .runList b { color: color-mix(in srgb, var(--surface) 78%, var(--accent)); }
  .bandInner .runList span { color: color-mix(in srgb, var(--surface) 90%, var(--accent2)); }
  .bandInner .runList em { color: color-mix(in srgb, var(--surface) 62%, var(--accent2)); }

  .bandCard p { color: var(--ink-soft); }
  .bandCard .paneTitle { color: var(--accent2); }
  .bandCard > :last-child { margin-bottom: 0; }

  .bandNote {
    margin: 1.2rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--surface) 34%, transparent);
    font-size: 0.82rem;
  }

  .bandNote b { font-family: var(--display); font-weight: 700; color: var(--surface); }

  /* ---- 7. step-chain : numbered steps with the rule drawn between ----- */

  .chain {
    position: relative;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    max-width: none;
    display: grid;
    gap: 1.1rem;
  }

  /* the rule is drawn BETWEEN steps, never past the last one: one segment per
     gap, so a three-step chain does not trail a line off to the right */
  .chain li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 0.85rem;
    top: 1.95rem;
    bottom: -1.1rem;
    width: 2px;
    background: var(--rule-cobalt);
  }

  .chain li {
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    gap: 0 0.85rem;
    align-items: start;
  }

  .chainNum {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.78rem;
    transition: background-color var(--t-move) var(--ease),
                color var(--t-move) var(--ease);
  }

  .chain li:hover .chainNum { background: var(--accent); color: var(--surface); }

  .chainBody b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.93rem;
    line-height: 1.2;
    padding-top: 0.22rem;
  }

  .chainBody span {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
  }

  .chainBody em {
    display: block;
    margin-top: 0.3rem;
    font-style: normal;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent2);
  }

  @media (min-width: 64em) {
    .chain {
      grid-auto-flow: column;
      grid-auto-columns: minmax(0, 1fr);
      gap: 0 1.2rem;
    }

    .chain li:not(:last-child)::after {
      left: 1.95rem;
      right: -1.2rem;
      top: 0.86rem;
      bottom: auto;
      width: auto;
      height: 2px;
    }

    .chain li { grid-template-columns: minmax(0, 1fr); gap: 0.7rem 0; }

    .chainBody b { padding-top: 0; }
  }

  /* ---- 8. margin-annotated : notes hung in the outer margin ----------- */

  .annot { margin-top: 1.3rem; max-width: none; display: grid; gap: 1.15rem; }

  .annotPair { display: grid; gap: 0.5rem; }

  .annotPair p { max-width: 58ch; }

  .annotNote {
    border-left: 2px solid var(--accent);
    padding: 0.1rem 0 0.1rem 0.75rem;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--ink-quiet);
  }

  .annotNote b {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent2);
    margin-bottom: 0.18rem;
  }

  @media (min-width: 60em) {
    .annotPair {
      grid-template-columns: minmax(0, 46ch) minmax(0, 1fr);
      gap: 0 var(--step);
      align-items: start;
    }

    .annotNote {
      border-left: 0;
      border-top: 1px solid var(--rule-firm);
      padding: 0.45rem 0 0;
      margin-top: 0.32rem;
      max-width: 42ch;
    }
  }

  /* ---- 9. figure-pair : two drawings set up to be compared ------------ */

  .pairRow { margin-top: 1.45rem; display: grid; gap: 1rem; max-width: none; }

  @media (min-width: 46em) {
    .pairRow { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; align-items: stretch; }
  }

  .pairRow .figure {
    margin: 0;
    display: grid;
    align-content: start;
    gap: 0.2rem;
    border-left-color: var(--rule-firm);
    transition: border-left-color var(--t-move) var(--ease),
                background-color var(--t-move) var(--ease);
  }

  .pairRow .figure:hover { border-left-color: var(--accent); }

  .pairRow .figure:first-child { border-left-color: var(--accent2); }

  .pairMark {
    font-family: var(--display);
    font-weight: 700;
    font-size: 0.6rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--accent2);
    margin: 0 0 0.55rem;
  }

  .pairVerdict {
    margin: 1.1rem 0 0;
    padding: 0.7rem 0.85rem;
    background: var(--tint-cobalt);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: 0.86rem;
    max-width: none;
  }

  .pairVerdict b { font-family: var(--display); font-weight: 700; }

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

  @keyframes tileSettle {
    0%   { opacity: 0; transform: translate3d(0, -1.7rem, 0) scale(0.962); }
    58%  { opacity: 1; transform: translate3d(0, 0.42rem, 0) scale(1.014); }
    79%  { transform: translate3d(0, -0.14rem, 0) scale(0.997); }
    100% { opacity: 1; transform: none; }
  }

  @keyframes baselineSnap {
    0%   { opacity: 0; transform: scaleX(0.04) translateY(0.3rem); }
    68%  { opacity: 1; transform: scaleX(1.016) translateY(0); }
    100% { opacity: 1; transform: scaleX(1) translateY(0); }
  }

  @keyframes rowIn {
    from { opacity: 0; transform: translateX(-0.4rem); }
    to   { opacity: 1; transform: none; }
  }

  @keyframes tabDraw {
    from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
    to   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 0.8rem)); }
  }

  @media (prefers-reduced-motion: reduce) {
    /* the set-piece lands finished, it is not merely shortened */
    .tile {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .mosaic::after {
      animation: none;
      opacity: 1;
      transform: scaleX(1);
    }

    .outRow {
      animation: none;
      opacity: 1;
      transform: none;
    }

    .tab { animation: none; }

    html { scroll-behavior: auto; }

    a,
    .skip,
    .markGlyph rect,
    .ledger > div,
    .sheetKey,
    .sheetList a,
    .sheetShut,
    .depthPath a,
    .tab,
    .tile a,
    .onward a,
    .scrollRig,
    .btn,
    input[type="number"],
    textarea,
    .layerFront,
    .factGrid li,
    .rowRegister > div,
    .splitNarrow .figure,
    .splitNarrow .splitCard,
    .chainNum,
    .pairRow .figure,
    html[data-sheet] .sheet {
      transition: none;
    }

    html[data-sheet] .sheet { transition: visibility 0s linear var(--t-sheet); }
    html[data-sheet="open"] .sheet { transition: none; }

    .sheetKey:active,
    .btn:active,
    .tile a:hover,
    .tile a:focus-visible,
    .onward a:hover,
    .onward a:focus-visible { transform: none; }

    .skip:focus,
    .skip:focus-visible { transform: translateY(0); }
    .surface:hover .tab { letter-spacing: 0.17em; }

    /* the shapes keep their colour responses and give up their movement */
    .layerFront:hover,
    .splitNarrow .figure:hover,
    .splitNarrow .splitCard:hover { transform: none; }

    .rowRegister > div:hover { padding-left: 0; }
  }

  @media (prefers-contrast: more) {
    :root {
      --rule-hair: color-mix(in srgb, var(--ink) 34%, transparent);
      --rule-firm: color-mix(in srgb, var(--ink) 62%, transparent);
      --ink-quiet: color-mix(in srgb, var(--ink) 80%, var(--bg));
    }
  }

  @media print {
    body::before, body::after, .sheetKey, .skip { display: none; }
    .page { max-width: none; padding: 0; }
    .tile { opacity: 1; animation: none; }
  }
}