/* BLEU CHIP LTD — bleuchip.online
   Four cascade layers are declared on the first line of the file, before anything is written into
   any of them, so the order of the cascade is fixed by this declaration and not by the order in
   which the rules below happen to have been typed. Everything after the last layer is unlayered
   and therefore outranks all four: that tail is reserved for the reduced-motion settlement and
   for print, the two places where a specificity accident must not be able to win. */

@layer reset, tokens, structure, parts;

@layer reset {
  /* Deliberately empty. Nothing on this site is zeroed. The user agent's own margins on
     paragraphs, lists and headings are the vertical rhythm this page is set against; every
     element that departs from them states its own margin in the structure layer below, and an
     element with no margin rule here is meant to keep the one the browser gives it. */
}

/* ------------------------------------------------------------------ tokens */

@layer tokens {
  :root {
    color-scheme: light dark;

    /* The five assigned colours. Every other colour on this site is mixed from these, so the
       palette cannot drift and there is no sixth value to keep in step. */
    --blc-bg: #f5e9e2;
    --blc-ink: #2f2320;
    --blc-clay: #b0471e;
    --blc-moss: #4e6355;
    --blc-paper: #fefaf7;

    --blc-ink-soft: color-mix(in oklab, var(--blc-ink) 74%, transparent);
    /* 60% measured 3.89:1 on the page ground and 4.09:1 on paper - below AA for the small
       type this token carries (hints, legends, column heads, captions). 68% clears 4.8:1
       on every ground used here and is still visibly the quiet tint. */
    --blc-ink-faint: color-mix(in oklab, var(--blc-ink) 68%, transparent);
    --blc-rule: color-mix(in oklab, var(--blc-ink) 30%, transparent);
    --blc-rule-soft: color-mix(in oklab, var(--blc-ink) 13%, transparent);
    --blc-clay-deep: color-mix(in oklab, var(--blc-clay) 82%, var(--blc-ink));
    --blc-clay-wash: color-mix(in oklab, var(--blc-clay) 10%, var(--blc-paper));
    --blc-moss-wash: color-mix(in oklab, var(--blc-moss) 13%, var(--blc-paper));
    --blc-swept: color-mix(in oklab, var(--blc-paper) 88%, white);
    --blc-flap-face: color-mix(in oklab, var(--blc-ink) 92%, var(--blc-clay));
    --blc-flap-text: color-mix(in oklab, var(--blc-bg) 94%, white);

    /* Halftone. One dot, three densities: the page carries the faintest, a band head carries the
       middle one, and the clay density marks the live row of the matrix. The dot is a gradient
       stop pair rather than an image so there is nothing to download. */
    --blc-dot: color-mix(in oklab, var(--blc-ink) 17%, transparent);
    --blc-dot-clay: color-mix(in oklab, var(--blc-clay) 38%, transparent);
    --blc-halftone-faint:
      radial-gradient(circle at 50% 50%, var(--blc-dot) 0 0.9px, transparent 1.1px);
    --blc-halftone-mid:
      radial-gradient(circle at 50% 50%, var(--blc-dot) 0 1.5px, transparent 1.8px);
    --blc-halftone-clay:
      radial-gradient(circle at 50% 50%, var(--blc-dot-clay) 0 1.7px, transparent 2px);
    --blc-dot-light: color-mix(in oklab, var(--blc-bg) 15%, transparent);
    --blc-halftone-light:
      radial-gradient(circle at 50% 50%, var(--blc-dot-light) 0 1.3px, transparent 1.6px);

    --blc-step: 0.75rem;
    --blc-gutter: 12.5rem;
    --blc-measure: 36rem;
    --blc-frame: 76rem;

    --blc-ease: cubic-bezier(0.26, 0.72, 0.2, 1);
    --blc-flap-step: 58ms;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --blc-bg: color-mix(in oklab, #2f2320 84%, black);
      --blc-paper: color-mix(in oklab, #2f2320 68%, black);
      --blc-ink: color-mix(in oklab, #f5e9e2 94%, white);
      --blc-clay: color-mix(in oklab, #b0471e 70%, white);
      --blc-moss: color-mix(in oklab, #4e6355 56%, white);
      --blc-swept: color-mix(in oklab, #2f2320 96%, white);
      --blc-flap-face: color-mix(in oklab, #2f2320 92%, black);
      --blc-flap-text: color-mix(in oklab, #f5e9e2 90%, white);
    }
  }
}

/* --------------------------------------------------------------- structure */

@layer structure {
  html {
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
  }
  *, *::before, *::after { box-sizing: inherit; }

  body {
    margin: 0;
    padding: 0 0 3rem;
    background-color: var(--blc-bg);
    background-image: var(--blc-halftone-faint);
    background-size: 9px 9px;
    color: var(--blc-ink);
    font-family: Ruda, "Trebuchet MS", "DejaVu Sans", sans-serif;
    font-size: 1rem;
    line-height: 1.62;
    text-underline-offset: 0.18em;
  }

  h1, h2, h3, h4 {
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-weight: 400;
    line-height: 1.22;
    letter-spacing: 0.002em;
  }
  h1 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.6rem); margin: 0.6rem 0 0.9rem; }
  h2 { font-size: clamp(1.25rem, 1.02rem + 1.1vw, 1.7rem); margin: 2.4rem 0 0.7rem; }
  h3 { font-size: clamp(1.1rem, 0.98rem + 0.6vw, 1.32rem); margin: 1.6rem 0 0.5rem; }
  h4 {
    font-size: 0.92rem;
    margin: 0 0 0.35rem;
    color: var(--blc-clay-deep);
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  a { color: var(--blc-clay-deep); text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  a:focus-visible,
  input:focus-visible,
  button:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--blc-clay);
    outline-offset: 2px;
    border-radius: 1px;
  }

  .blc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* The first element in the document and the first thing a tab reaches. It waits just above the
     top of the viewport and drops in when it takes focus, as a square clay plate with an ink
     keyline — the same plate as the sheet headers rather than a borrowed blue bar. Fixed rather
     than absolute so it arrives in view wherever the page has been scrolled to. */
  .blc-skip {
    position: fixed;
    top: -5rem;
    left: 1rem;
    z-index: 20;
    padding: 0.6rem 1rem;
    border: 1px solid var(--blc-ink);
    border-radius: 0;
    background: var(--blc-clay-deep);
    color: var(--blc-bg);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 170ms var(--blc-ease);
  }
  .blc-skip:focus { top: 1rem; }
  .blc-skip:focus-visible {
    outline: 2px solid var(--blc-ink);
    outline-offset: 3px;
    border-radius: 0;
  }
  /* The skip target is the entire page. Ringing it says nothing that arriving there has not
     already said, and a two-pixel line drawn round four thousand pixels of document reads as a
     fault rather than as focus. Every other focusable thing keeps its ring. */
  #blc-main:focus,
  #blc-main:focus-visible { outline: none; }

  /* The measure. Horizontal padding lives here rather than on the body, so that a
     full-bleed section can simply be a child of main and reach both window edges — no
     100vw, which overshoots by the width of the scrollbar and scrolls the page sideways. */
  .blc-shell {
    max-width: calc(var(--blc-frame) + 2rem);
    margin: 0 auto;
    padding-inline: 1rem;
  }
  .blc-page { display: block; }
  .blc-open { padding-bottom: 0.2rem; }

  /* The masthead. The company name sits on the rule, the board hangs under it. */
  .blc-mast {
    padding: 1.6rem 0 0;
    border-top: 3px solid var(--blc-ink);
  }
  .blc-name {
    display: block;
    margin: 0;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 1.04rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--blc-ink);
  }
  .blc-name a { color: inherit; text-decoration: none; }
  .blc-name a:hover { color: var(--blc-clay-deep); }
  .blc-mast-sub {
    margin: 0.2rem 0 1.2rem;
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    color: var(--blc-ink-faint);
  }

  /* The tab strip: one strip, every width, no second pattern for small screens. It wraps rather
     than scrolling, because a tab a thumb cannot see is a tab nobody presses. */
  .blc-tabstrip { margin: 0 0 1.5rem; }
  .blc-tabstrip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem 0.2rem;
    margin: 0;
    padding: 0 0 0.35rem;
    list-style: none;
    border-bottom: 2px solid var(--blc-ink);
  }
  .blc-tabstrip a {
    display: block;
    padding: 0.42rem 0.7rem 0.38rem;
    border: 1px solid var(--blc-rule);
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    background: color-mix(in oklab, var(--blc-paper) 72%, transparent);
    color: var(--blc-ink-soft);
    font-size: 0.83rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color 180ms var(--blc-ease), color 180ms var(--blc-ease),
                border-color 180ms var(--blc-ease), translate 180ms var(--blc-ease);
  }
  .blc-tabstrip a:hover {
    background: var(--blc-paper);
    color: var(--blc-ink);
    translate: 0 -1px;
  }
  .blc-tabstrip a[aria-current="page"] {
    background: var(--blc-paper);
    border-color: var(--blc-ink);
    border-bottom-color: var(--blc-paper);
    color: var(--blc-clay-deep);
    margin-bottom: -2px;
    padding-bottom: 0.5rem;
  }

  /* Margin notes. Every section is the two-column grid: a gutter for the notes and a column for
     the prose. Children land in the prose column by default, so a note placed immediately before
     the paragraph it annotates shares that paragraph's row without any row arithmetic. */
  main { display: block; }
  .blc-section { margin: 0 0 2.2rem; }
  .blc-section > * { min-width: 0; }
  .blc-note {
    margin: 0.4rem 0 0.9rem;
    padding: 0 0 0 0.8rem;
    border-left: 2px solid var(--blc-clay);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--blc-ink-soft);
  }
  .blc-note b {
    display: block;
    font-weight: 400;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    color: var(--blc-clay-deep);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.7rem;
  }
  .blc-lede { font-size: 1.06rem; }
  .blc-section p, .blc-section li { max-width: var(--blc-measure); }

  @media (min-width: 60rem) {
    .blc-section {
      display: grid;
      grid-template-columns: var(--blc-gutter) minmax(0, 1fr);
      column-gap: 2.4rem;
    }
    .blc-section > * { grid-column: 2; }
    .blc-section > .blc-note {
      grid-column: 1;
      justify-self: end;
      align-self: start;
      margin: 0.55rem 0 0;
      padding: 0 0.8rem 0 0;
      border-left: 0;
      border-right: 2px solid var(--blc-clay);
      text-align: right;
      max-width: var(--blc-gutter);
    }
    .blc-section > .blc-wide { grid-column: 1 / -1; }
  }

  /* Footer: the registered facts, nothing else. */
  .blc-foot {
    max-width: calc(var(--blc-frame) + 2rem);
    margin: 3rem auto 0;
    padding: 1.3rem 1rem 0;
    border-top: 3px solid var(--blc-ink);
    font-size: 0.86rem;
  }
  .blc-foot-grid { display: grid; gap: 1.1rem; }
  @media (min-width: 46rem) {
    .blc-foot-grid { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
  }
  .blc-foot address {
    font-style: normal;
    line-height: 1.5;
  }
  .blc-foot-co {
    font-family: "Crete Round", Rockwell, Georgia, serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .blc-foot dl { margin: 0; display: grid; gap: 0.3rem 0.9rem; }
  @media (min-width: 30rem) {
    .blc-foot dl { grid-template-columns: max-content minmax(0, 1fr); }
  }
  .blc-foot dt {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blc-ink-faint);
  }
  .blc-foot dd { margin: 0; overflow-wrap: anywhere; }
  .blc-foot a { overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------- parts */

@layer parts {

  /* --- the split-flap board that opens the page ------------------------- */

  .blc-board {
    margin: 0 0 1.8rem;
    border: 1px solid var(--blc-rule);
    background-color: color-mix(in oklab, var(--blc-ink) 94%, var(--blc-moss));
    background-image: var(--blc-halftone-mid);
    background-size: 7px 7px;
    padding: 0.55rem;
    perspective: 420px;
  }
  .blc-board-head {
    display: grid;
    gap: 0.3rem 0.8rem;
    margin: 0;
    max-width: none;
    padding: 0 0.15rem 0.5rem;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: color-mix(in oklab, var(--blc-bg) 66%, transparent);
  }
  /* Column captions are hidden where there are no columns to caption. */
  .blc-board-head { display: none; }
  .blc-board-rows { margin: 0; padding: 0; list-style: none; }
  .blc-board-row {
    display: grid;
    gap: 0.3rem 0.8rem;
    align-items: center;
    padding: 0.42rem 0.15rem;
    border-top: 1px solid color-mix(in oklab, var(--blc-bg) 18%, transparent);
  }
  @media (min-width: 44rem) {
    /* The code column is pinned rather than sized by content, so that the caption strip and the
       four rows below it share one set of columns: five flaps at 1.26em of 1.22rem is a shade
       under 8rem, and the strip has to agree with them to read as a board at all. */
    .blc-board-head,
    .blc-board-row {
      display: grid;
      grid-template-columns: 8.6rem minmax(0, 1fr) max-content;
    }
    .blc-board-head span:last-child { text-align: right; }
  }
  .blc-flaps { display: flex; gap: 2px; }
  .blc-flap {
    position: relative;
    display: grid;
    place-items: center;
    width: 1.26em;
    padding: 0.18em 0;
    background: linear-gradient(
      to bottom,
      color-mix(in oklab, var(--blc-flap-face) 86%, white) 0 49.4%,
      var(--blc-flap-face) 50.6% 100%);
    color: var(--blc-flap-text);
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 1.22rem;
    line-height: 1;
    border-radius: 2px;
    transform-origin: 50% 0;
    animation: blc-flap-drop 540ms var(--blc-ease) both;
    animation-delay: calc(var(--f, 0) * var(--blc-flap-step));
  }
  .blc-flap::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    height: 1px;
    background: color-mix(in oklab, black 60%, transparent);
  }
  .blc-board-act {
    color: color-mix(in oklab, var(--blc-bg) 92%, transparent);
    font-size: 0.94rem;
    letter-spacing: 0.01em;
  }
  .blc-board-go {
    justify-self: start;
    color: color-mix(in oklab, var(--blc-clay) 62%, var(--blc-bg));
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration-color: color-mix(in oklab, var(--blc-clay) 40%, transparent);
    transition: color 170ms var(--blc-ease), text-decoration-color 170ms var(--blc-ease);
  }
  .blc-board-go:hover {
    color: color-mix(in oklab, var(--blc-bg) 96%, white);
    text-decoration-color: currentColor;
  }

  /* --- the buffer arc sweep -------------------------------------------- */

  .blc-floor-wrap {
    margin: 1rem 0 0.5rem;
    border: 1px solid var(--blc-rule);
    background: var(--blc-paper);
    padding: 0.5rem;
  }
  .blc-floor { display: block; width: 100%; height: auto; }
  .blc-room { fill: var(--blc-paper); stroke: var(--blc-ink); stroke-width: 2.5; }
  .blc-soil-dot { fill: var(--blc-dot-clay); }
  .blc-sparse-dot { fill: var(--blc-dot); }
  .blc-soil { fill: url(#blc-soil); }
  .blc-doorway { stroke: var(--blc-paper); stroke-width: 5; }
  .blc-door-swing { fill: none; stroke: var(--blc-rule); stroke-width: 1.5; stroke-dasharray: 4 4; }

  /* The dash gap is twice the normalised path length and the hidden offset overshoots it, because
     a round cap sitting exactly on the path origin paints a dot there — a sixth pass appearing as
     a blot by the door before its turn had come. */
  .blc-band,
  .blc-band-dots {
    fill: none;
    stroke-width: 46;
    stroke-linecap: round;
    stroke-dasharray: 100 200;
    stroke-dashoffset: 0;
  }
  .blc-band { stroke: var(--blc-swept); }
  .blc-band-dots { stroke: url(#blc-sparse); }

  /* Armed is the floor as found: the bands are rolled back off the end of their own length and
     the head is at the start of the run. Running then plays them forward and leaves them there. */
  .blc-floor.is-armed .blc-band,
  .blc-floor.is-armed .blc-band-dots { stroke-dashoffset: 112; }
  .blc-floor.is-running .blc-band,
  .blc-floor.is-running .blc-band-dots {
    animation: blc-pass 1180ms var(--blc-ease) both;
    animation-delay: calc(var(--p, 0) * 760ms);
  }

  /* The head is drawn around its own origin and then placed on the route by the motion path. The
     reference box has to be the head's own bounding box, or the anchor resolves against the whole
     view box and the machine lands in the wrong county. */
  .blc-head {
    transform-box: fill-box;
    offset-anchor: 50% 50%;
    offset-path: path("M 86 276 C 206 258 394 258 514 276 L 514 242 C 394 224 206 224 86 242 L 86 208 C 206 190 394 190 514 208 L 514 174 C 394 156 206 156 86 174 L 86 140 C 206 122 394 122 514 140 L 514 106 C 394 88 206 88 86 106");
    offset-rotate: 0deg;
    offset-distance: 100%;
  }
  .blc-floor.is-armed .blc-head { offset-distance: 0%; }
  .blc-floor.is-running .blc-head { animation: blc-run 5320ms linear both; }

  .blc-head-lift { transform-box: fill-box; transform-origin: 50% 50%; scale: 1.07; }
  .blc-floor.is-armed .blc-head-lift { scale: 1; }
  .blc-floor.is-running .blc-head-lift { animation: blc-lift 820ms var(--blc-ease) 4900ms both; }

  .blc-pad { fill: color-mix(in oklab, var(--blc-moss) 80%, var(--blc-paper)); stroke: var(--blc-ink); stroke-width: 2; }
  .blc-lobes { transform-box: fill-box; transform-origin: 50% 50%; rotate: 0deg; }
  .blc-lobe { fill: none; stroke: var(--blc-paper); stroke-width: 2; }
  .blc-spoke { fill: none; stroke: var(--blc-paper); stroke-width: 3; stroke-linecap: round; }
  .blc-floor.is-running .blc-lobes { animation: blc-spin 5320ms cubic-bezier(0.1, 0.62, 0.06, 1) both; }
  .blc-handle { fill: var(--blc-ink); }
  .blc-head-shadow { fill: color-mix(in oklab, var(--blc-ink) 22%, transparent); }
  .blc-floor.is-armed .blc-head-shadow { opacity: 0.5; }
  .blc-floor.is-running .blc-head-shadow {
    animation: blc-shadow 820ms var(--blc-ease) 4900ms both;
  }

  .blc-dim { fill: none; stroke: var(--blc-clay); stroke-width: 1.4; }
  .blc-svg-label {
    fill: var(--blc-ink-soft);
    font-family: Ruda, "Trebuchet MS", sans-serif;
    font-size: 13px;
    letter-spacing: 0.08em;
  }
  .blc-svg-label.is-clay { fill: var(--blc-clay-deep); }
  .blc-caption {
    margin: 0.5rem 0 0;
    font-size: 0.78rem;
    color: var(--blc-ink-faint);
    max-width: 46rem;
  }

  /* --- the matrix ------------------------------------------------------- */

  .blc-matrix-frame {
    margin: 1.1rem 0 0;
    border-top: 2px solid var(--blc-ink);
    padding-top: 0.9rem;
  }
  .blc-matrix-top { display: grid; gap: 1rem; align-items: start; }
  @media (min-width: 52rem) {
    .blc-matrix-top { grid-template-columns: 11rem minmax(0, 1fr); }
  }
  .blc-locator {
    display: block;
    width: 100%;
    max-width: 11rem;
    height: auto;
    padding: 0.45rem;
    border: 1px solid var(--blc-rule);
    background: var(--blc-paper);
  }
  .blc-loc-cell {
    fill: var(--blc-bg);
    stroke: color-mix(in oklab, var(--blc-ink) 44%, transparent);
    stroke-width: 1.2;
    transition: fill 240ms var(--blc-ease), stroke 240ms var(--blc-ease);
  }
  .blc-loc-dots { fill: url(#blc-loc-dots); opacity: 0.55; transition: opacity 240ms var(--blc-ease); }
  /* Row two against VT: a communal area is never void, so the cell is drawn empty and dashed. */
  .blc-loc-void { stroke: var(--blc-moss); stroke-dasharray: 3 3; }
  .blc-loc-tick {
    fill: var(--blc-ink-faint);
    font-family: Ruda, "Trebuchet MS", sans-serif;
    font-size: 11px;
    letter-spacing: 0.06em;
    transition: fill 240ms var(--blc-ease);
  }
  .blc-loc-head {
    fill: var(--blc-ink);
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 11px;
    letter-spacing: 0.14em;
  }
  .blc-locator[data-active="1"] .blc-loc-r1 .blc-loc-cell,
  .blc-locator[data-active="2"] .blc-loc-r2 .blc-loc-cell,
  .blc-locator[data-active="3"] .blc-loc-r3 .blc-loc-cell,
  .blc-locator[data-active="4"] .blc-loc-r4 .blc-loc-cell {
    fill: var(--blc-clay-wash);
    stroke: var(--blc-clay);
    stroke-width: 2;
  }
  .blc-locator[data-active="1"] .blc-loc-r1 .blc-loc-dots,
  .blc-locator[data-active="2"] .blc-loc-r2 .blc-loc-dots,
  .blc-locator[data-active="3"] .blc-loc-r3 .blc-loc-dots,
  .blc-locator[data-active="4"] .blc-loc-r4 .blc-loc-dots { opacity: 1; }
  .blc-locator[data-active="1"] .blc-loc-r1 .blc-loc-tick,
  .blc-locator[data-active="2"] .blc-loc-r2 .blc-loc-tick,
  .blc-locator[data-active="3"] .blc-loc-r3 .blc-loc-tick,
  .blc-locator[data-active="4"] .blc-loc-r4 .blc-loc-tick { fill: var(--blc-clay-deep); }

  /* The chapter tabs. Written as links to the panes, so with no script running they are an
     index to four stacked chapters; the script turns the same markup into a tab list. */
  .blc-chaptabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
  }
  .blc-chaptabs a {
    display: flex;
    gap: 0.45rem;
    align-items: baseline;
    padding: 0.4rem 0.62rem;
    border: 1px solid var(--blc-rule);
    background: color-mix(in oklab, var(--blc-paper) 66%, transparent);
    color: var(--blc-ink-soft);
    font-size: 0.82rem;
    text-decoration: none;
    transition: background-color 190ms var(--blc-ease), color 190ms var(--blc-ease),
                border-color 190ms var(--blc-ease), box-shadow 190ms var(--blc-ease);
  }
  .blc-chaptabs a::before {
    content: attr(data-ch);
    display: grid;
    place-items: center;
    width: 1.35em;
    height: 1.35em;
    background: var(--blc-ink);
    color: var(--blc-bg);
    font-size: 0.74rem;
    transition: background-color 190ms var(--blc-ease);
  }
  .blc-chaptabs a:hover { background: var(--blc-paper); color: var(--blc-ink); }
  .blc-chaptabs a[aria-selected="true"] {
    background: var(--blc-paper);
    border-color: var(--blc-ink);
    color: var(--blc-ink);
    box-shadow: inset 0 -3px 0 0 var(--blc-clay);
  }
  .blc-chaptabs a[aria-selected="true"]::before { background: var(--blc-clay-deep); }

  .blc-cols { display: none; }
  @media (min-width: 56rem) {
    .blc-cols {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.9rem;
      margin: 0 0 0.45rem;
      padding: 0.25rem 0 0.3rem;
      border-top: 2px solid var(--blc-clay);
      border-bottom: 1px solid var(--blc-rule);
    }
    .blc-cols span {
      font-family: "Crete Round", Rockwell, Georgia, serif;
      font-size: 0.92rem;
      letter-spacing: 0.2em;
      color: var(--blc-ink);
    }
  }

  /* The pane transition is the only reveal on this site, and it is pure CSS: the entry values
     live in @starting-style, so a pane fades up the first time it is shown and never again. */
  .blc-pane {
    display: block;
    opacity: 1;
    translate: 0 0;
    transition: opacity 420ms var(--blc-ease), translate 420ms var(--blc-ease),
                display 420ms allow-discrete;
  }
  .blc-pane[hidden] { display: none; opacity: 0; translate: 0 0.8rem; }
  @starting-style {
    .blc-pane:not([hidden]) { opacity: 0; translate: 0 0.8rem; }
  }
  .blc-pane > h3 { margin-top: 1.1rem; }
  .blc-row { display: grid; gap: 0.9rem; }
  @media (min-width: 56rem) {
    .blc-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .blc-cell {
    padding: 0.7rem 0.8rem 0.8rem;
    border: 1px solid var(--blc-rule-soft);
    border-top: 2px solid var(--blc-rule);
    background: var(--blc-paper);
    transition: border-top-color 220ms var(--blc-ease), background-color 220ms var(--blc-ease);
  }
  .blc-cell:hover { border-top-color: var(--blc-clay); }
  .blc-cell p {
    margin: 0;
    font-size: 0.89rem;
    line-height: 1.56;
    max-width: none;
  }
  .blc-cell.is-aside { background: var(--blc-moss-wash); }
  .blc-cell.is-aside h4 { color: var(--blc-moss); }

  /* --- the two sheets --------------------------------------------------- */

  .blc-sheet {
    margin: 1rem 0 0;
    border: 1px solid var(--blc-ink);
    background: var(--blc-paper);
  }
  .blc-sheet-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem;
    margin: 0;
    max-width: none;
    padding: 0.5rem 0.85rem;
    background: var(--blc-ink);
    color: var(--blc-bg);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .blc-sheet-body { display: grid; gap: 1rem; padding: 0.9rem 0.85rem 1.1rem; }
  @media (min-width: 50rem) {
    .blc-sheet-body { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
  }
  .blc-sheet fieldset {
    margin: 0;
    padding: 0.2rem 0 0;
    border: 0;
    border-top: 1px solid var(--blc-rule-soft);
  }
  .blc-sheet legend {
    padding: 0 0.4rem 0 0;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blc-ink-faint);
  }
  .blc-field { display: grid; gap: 0.15rem; margin: 0.6rem 0 0; max-width: none; }
  .blc-field label { font-size: 0.82rem; }
  .blc-field .blc-hint { font-size: 0.72rem; color: var(--blc-ink-faint); }
  .blc-field input {
    width: 100%;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--blc-rule);
    border-radius: 2px;
    background: var(--blc-bg);
    color: var(--blc-ink);
    font: inherit;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    transition: border-color 170ms var(--blc-ease), background-color 170ms var(--blc-ease),
                box-shadow 170ms var(--blc-ease);
  }
  .blc-field input:hover { border-color: var(--blc-ink-faint); }
  .blc-field input:focus { background: var(--blc-paper); box-shadow: inset 0 -2px 0 0 var(--blc-clay); }
  .blc-out {
    display: block;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--blc-rule);
    background: var(--blc-clay-wash);
    background-image: var(--blc-halftone-faint);
    background-size: 8px 8px;
  }
  .blc-out p { margin: 0 0 0.5rem; max-width: none; font-size: 0.86rem; }
  .blc-out p:last-child { margin-bottom: 0; }
  .blc-sum {
    display: grid;
    align-items: baseline;
    gap: 0.1rem 0.8rem;
    margin: 0 0 0.7rem;
    font-variant-numeric: tabular-nums;
  }
  @media (min-width: 26rem) {
    .blc-sum { grid-template-columns: max-content minmax(0, 1fr); }
  }
  .blc-sum dt { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blc-ink-faint); }
  .blc-sum dd {
    margin: 0;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 1.14rem;
    color: var(--blc-clay-deep);
  }
  .blc-work {
    margin: 0;
    padding: 0.55rem 0 0;
    border-top: 1px solid var(--blc-rule-soft);
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .blc-work b { font-weight: 400; color: var(--blc-ink); }
  .blc-guide {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--blc-moss);
  }

  /* --- lists that carry a sequence -------------------------------------- */

  .blc-stages { margin: 0.6rem 0 1rem; padding: 0; list-style: none; counter-reset: blc-stage; }
  .blc-stages li {
    position: relative;
    margin: 0 0 0.75rem;
    padding: 0 0 0 2.4rem;
    counter-increment: blc-stage;
  }
  .blc-stages li::before {
    content: counter(blc-stage, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.1em;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 0.86rem;
    color: var(--blc-clay-deep);
    letter-spacing: 0.04em;
  }
  .blc-stages b { font-weight: 400; color: var(--blc-ink); border-bottom: 1px solid var(--blc-rule); }

  .blc-defs { margin: 0.6rem 0 1.2rem; }
  .blc-defs dt {
    margin: 0.9rem 0 0.1rem;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    color: var(--blc-clay-deep);
  }
  .blc-defs dd { margin: 0 0 0 0; max-width: var(--blc-measure); }

  .blc-plain { margin: 0.5rem 0 1rem; padding: 0 0 0 1.1rem; }
  .blc-plain li { margin: 0 0 0.4rem; }

  /* --- small panels ----------------------------------------------------- */

  .blc-panel {
    margin: 1rem 0;
    padding: 0.85rem 0.95rem;
    border-left: 3px solid var(--blc-moss);
    background: var(--blc-moss-wash);
  }
  .blc-panel h3 { margin-top: 0; }
  .blc-panel p:last-child { margin-bottom: 0; }

  .blc-jump { display: grid; gap: 0.5rem; margin: 1rem 0 0; padding: 0; list-style: none; }
  .blc-jump li { max-width: none; }
  @media (min-width: 44rem) { .blc-jump { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .blc-jump a {
    display: block;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--blc-rule);
    background: var(--blc-paper);
    text-decoration: none;
    transition: border-color 200ms var(--blc-ease), translate 200ms var(--blc-ease),
                box-shadow 200ms var(--blc-ease);
  }
  .blc-jump a:hover {
    border-color: var(--blc-clay);
    translate: 2px 0;
    box-shadow: -2px 0 0 0 var(--blc-clay);
  }
  .blc-jump b {
    display: block;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-weight: 400;
    font-size: 1.02rem;
    color: var(--blc-clay-deep);
  }
  .blc-jump span { display: block; font-size: 0.82rem; color: var(--blc-ink-soft); }

  .blc-map { display: block; width: 100%; height: auto; border: 1px solid var(--blc-rule); background: var(--blc-paper); }
  .blc-road { fill: color-mix(in oklab, var(--blc-ink) 12%, var(--blc-paper)); }
  .blc-road-edge { fill: none; stroke: var(--blc-rule); stroke-width: 1.2; }
  .blc-parade { fill: url(#blc-map-dots); stroke: var(--blc-rule-soft); stroke-width: 1; }
  .blc-pin { fill: var(--blc-clay); stroke: var(--blc-paper); stroke-width: 2; }
  .blc-map-dot { fill: var(--blc-dot); }
  .blc-north { fill: none; stroke: var(--blc-ink); stroke-width: 1.6; }

  .blc-figure { margin: 1.2rem 0 1.4rem; }
  .blc-steps { display: block; width: 100%; max-width: 44rem; height: auto; margin: 0 0 0.5rem; }
  .blc-step-num {
    fill: var(--blc-clay-deep);
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 21px;
  }
  .blc-label-tag { fill: var(--blc-paper); stroke: var(--blc-ink); stroke-width: 1.4; }
  .blc-mono {
    padding: 0 0.25em;
    background: var(--blc-clay-wash);
    border-bottom: 1px solid var(--blc-rule-soft);
    font-family: "DejaVu Sans Mono", "Consolas", monospace;
    font-size: 0.86em;
  }
  .blc-vessel { fill: var(--blc-paper); stroke: var(--blc-ink); stroke-width: 2; }
  .blc-liquid { fill: color-mix(in oklab, var(--blc-moss) 42%, var(--blc-paper)); }
  .blc-conc { fill: var(--blc-clay); }
  .blc-tick-line { fill: none; stroke: var(--blc-rule); stroke-width: 1.2; }
  .blc-arrow { fill: none; stroke: var(--blc-clay); stroke-width: 1.6; }
}

/* ------------------------------------------- the ten body shapes, in page order
   One shape per section and no shape twice. The list is written out here in the order the
   document uses them, because the whole point of the exercise is that a reader scrolling this
   page should never meet the same figure a second time. */

@layer parts {

  /* --- 1 · full-bleed band: the matrix, on the floor drawing ------------- */

  /* The only element on the site that leaves the measure. It is a child of main, which is
     unpadded, so `inset-inline: 0` already reaches both window edges; there is no 100vw here
     and therefore no scrollbar-width overflow. */
  .blc-bleed {
    position: relative;
    isolation: isolate;
    margin: 0 0 2.6rem;
    padding: 0 0 1.9rem;
    border-block: 2px solid var(--blc-ink);
    background-color: var(--blc-clay-wash);
    background-image: var(--blc-halftone-faint);
    background-size: 9px 9px;
  }
  /* Behind the matrix, not under its text: the mask has taken the drawing down to a trace by
     the time the heading starts, so nothing is set over the bright part of it. */
  .blc-bleed-art {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: -1;
    width: 100%;
    height: clamp(186px, 34vw, 430px);
    object-fit: cover;
    object-position: 64% 44%;
    -webkit-mask-image: linear-gradient(to bottom,
      rgb(0 0 0) 0 44%, rgb(0 0 0 / 0.38) 68%, rgb(0 0 0 / 0) 88%);
    mask-image: linear-gradient(to bottom,
      rgb(0 0 0) 0 44%, rgb(0 0 0 / 0.38) 68%, rgb(0 0 0 / 0) 88%);
  }
  .blc-bleed-in { padding-block-start: clamp(150px, 28vw, 342px); }
  .blc-bleed-in > h2 { margin-top: 0; }
  .blc-matrix-frame { border-top-color: var(--blc-clay); }
  @media (prefers-color-scheme: dark) {
    /* A bright drawing behind a dark page is a lamp. Turn it down rather than drop it. */
    .blc-bleed-art { opacity: 0.38; }
  }

  /* --- 2 · figure pair: two rooms meant to be compared ------------------ */

  .blc-pair { display: grid; gap: 1.4rem; margin: 1.1rem 0 1.1rem; }
  @media (min-width: 46rem) {
    /* The pair only means anything if both drawings are at the same scale, so the rule between
       them is paid for out of BOTH columns rather than only the right one. */
    .blc-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
    .blc-pair-one { padding-right: 2.2rem; }
    .blc-pair-two { padding-left: 2.2rem; border-left: 1px solid var(--blc-rule); }
  }
  .blc-pair figure { margin: 0; }
  .blc-pair figcaption {
    margin: 0.5rem 0 0;
    max-width: 24rem;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--blc-ink-soft);
  }
  .blc-sec {
    display: block;
    width: 100%;
    max-width: 25rem;
    height: auto;
    border: 1px solid var(--blc-rule);
    background: var(--blc-paper);
    transition: border-color 220ms var(--blc-ease);
  }
  .blc-pair figure:hover .blc-sec { border-color: var(--blc-clay); }
  .blc-sec-ground { fill: color-mix(in oklab, var(--blc-ink) 9%, var(--blc-paper)); }
  .blc-sec-slab { fill: color-mix(in oklab, var(--blc-ink) 22%, var(--blc-paper)); stroke: var(--blc-ink); stroke-width: 1.4; }
  .blc-sec-wall, .blc-sec-ceil { fill: none; stroke: var(--blc-ink); stroke-width: 2.4; }
  .blc-sec-kerb { fill: var(--blc-ink); }
  .blc-sec-box { fill: var(--blc-paper); stroke: var(--blc-ink); stroke-width: 1.6; }
  .blc-sec-duct { fill: none; stroke: var(--blc-rule); stroke-width: 1.4; stroke-dasharray: 5 4; }
  .blc-sec-flap { fill: none; stroke: var(--blc-ink); stroke-width: 1.4; }
  .blc-sec-gully { fill: var(--blc-paper); stroke: var(--blc-ink); stroke-width: 1.4; }
  .blc-sec-grate { fill: none; stroke: var(--blc-ink-faint); stroke-width: 1.1; }
  .blc-sec-trap { fill: none; stroke: var(--blc-moss); stroke-width: 2.6; }
  .blc-sec-flow { fill: none; stroke: var(--blc-clay); stroke-width: 1.6; stroke-dasharray: 6 4; }
  .blc-sec-arrow { fill: none; stroke: var(--blc-clay); stroke-width: 1.6; }
  .blc-sec-pit { fill: var(--blc-bg); stroke: var(--blc-ink); stroke-width: 1.6; }
  .blc-sec-ramp { fill: color-mix(in oklab, var(--blc-moss) 30%, var(--blc-paper)); stroke: var(--blc-ink); stroke-width: 1.4; }
  .blc-sec-edge { fill: none; stroke: var(--blc-clay); stroke-width: 2.8; }
  .blc-sec-level { fill: none; stroke: var(--blc-moss); stroke-width: 1.4; stroke-dasharray: 4 3; }
  .blc-sec-dip { fill: none; stroke: var(--blc-ink); stroke-width: 1.8; }
  .blc-sec .blc-svg-label { font-size: 11px; letter-spacing: 0.04em; }

  /* --- 3 · ledger rows -------------------------------------------------- */

  /* Four columns do not fit a 320 px screen and will not be made to. The register scrolls
     inside its own box, which is why the box is focusable: a pane a keyboard cannot reach is
     a pane a keyboard user cannot read. */
  .blc-ledger {
    margin: 1rem 0 0.4rem;
    overflow-x: auto;
    border-top: 2px solid var(--blc-ink);
    background: var(--blc-paper);
  }
  .blc-ledger table {
    width: 100%;
    min-width: 33rem;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .blc-ledger th, .blc-ledger td {
    padding: 0.52rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--blc-rule-soft);
  }
  .blc-ledger thead th {
    border-bottom: 1px solid var(--blc-ink);
    font-family: Ruda, "Trebuchet MS", sans-serif;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--blc-ink-faint);
  }
  .blc-ledger tbody th {
    width: 4.6rem;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-weight: 400;
    font-size: 1.06rem;
    letter-spacing: 0.1em;
    color: var(--blc-clay-deep);
  }
  .blc-ledger tbody tr:nth-child(even) th,
  .blc-ledger tbody tr:nth-child(even) td {
    background: color-mix(in oklab, var(--blc-bg) 46%, transparent);
  }
  .blc-ledger tbody th, .blc-ledger tbody td {
    transition: background-color 200ms var(--blc-ease);
  }
  .blc-ledger tbody tr:hover th,
  .blc-ledger tbody tr:hover td { background: var(--blc-clay-wash); }
  .blc-ledger td:last-child { color: var(--blc-ink-soft); }
  /* Four columns will not fit a phone, and a register nobody notices is scrollable is a
     register nobody reads. Below the breakpoint each row becomes a block and the column
     heading travels with the cell it belongs to. */
  @media (max-width: 47.99rem) {
    .blc-ledger { overflow-x: visible; }
    .blc-ledger table { min-width: 0; }
    .blc-ledger thead { display: none; }
    .blc-ledger tbody tr { display: block; padding: 0.5rem 0 0.7rem; border-bottom: 1px solid var(--blc-rule); }
    .blc-ledger tbody tr:last-child { border-bottom: 0; }
    .blc-ledger tbody th,
    .blc-ledger tbody td {
      display: block;
      width: auto;
      padding: 0.08rem 0.75rem;
      border: 0;
      background: none;
    }
    .blc-ledger tbody th { padding-bottom: 0.25rem; }
    .blc-ledger tbody td::before {
      content: attr(data-l);
      display: block;
      font-size: 0.64rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--blc-ink-faint);
    }
    .blc-ledger tbody td + td { margin-top: 0.45rem; }
  }

  /* --- 4 · wide figure, the prose set as its caption --------------------- */

  .blc-figwide { margin: 1.1rem 0 1.3rem; }
  .blc-figwide figcaption {
    margin: 0.75rem 0 0;
    padding-top: 0.6rem;
    border-top: 2px solid var(--blc-clay);
    max-width: 52rem;
    font-size: 0.86rem;
    line-height: 1.62;
    color: var(--blc-ink-soft);
  }
  @media (min-width: 58rem) {
    /* Caption, not body copy: two short columns under the drawing rather than one long line. */
    .blc-figwide figcaption { columns: 2; column-gap: 2.6rem; }
  }

  /* --- 5 · card grid: four single facts ---------------------------------- */

  .blc-cards {
    display: grid;
    gap: 0.7rem;
    margin: 0.9rem 0 0.5rem;
    padding: 0;
    list-style: none;
    counter-reset: blc-card;
  }
  @media (min-width: 34rem) { .blc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 60rem) { .blc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .blc-cards li {
    position: relative;
    max-width: none;
    padding: 0.85rem 0.9rem 0.95rem;
    border: 1px solid var(--blc-rule-soft);
    border-top: 3px solid var(--blc-ink);
    background: var(--blc-paper);
    counter-increment: blc-card;
    transition: border-top-color 210ms var(--blc-ease), translate 210ms var(--blc-ease);
  }
  .blc-cards li::after {
    content: counter(blc-card, decimal-leading-zero);
    position: absolute;
    top: 0.5rem;
    right: 0.6rem;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    color: var(--blc-rule);
  }
  .blc-cards li:hover { border-top-color: var(--blc-clay); translate: 0 -2px; }
  .blc-cards h3 { margin: 0 0 0.3rem; font-size: 0.98rem; color: var(--blc-clay-deep); }
  .blc-cards p { margin: 0; max-width: none; font-size: 0.84rem; line-height: 1.5; }

  /* --- 6 · pull quote ---------------------------------------------------- */

  .blc-pull {
    margin: 1.1rem 0 1.2rem;
    padding: 0.9rem 0 1rem;
    border-block: 1px solid var(--blc-clay);
  }
  .blc-pull p {
    margin: 0;
    max-width: 46rem;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: clamp(1.3rem, 0.95rem + 1.75vw, 2.15rem);
    line-height: 1.22;
    letter-spacing: 0.004em;
    color: var(--blc-clay-deep);
  }

  /* --- 7 · offset split, the plate crossing the gutter -------------------- */

  .blc-offset { display: grid; gap: 1rem; margin: 1rem 0 0; }
  .blc-offset-fig { margin: 0; }
  .blc-lap {
    display: block;
    width: 100%;
    max-width: 13rem;
    height: auto;
    padding: 0.35rem;
    border: 1px solid var(--blc-ink);
    background: var(--blc-moss-wash);
  }
  .blc-offset-fig figcaption {
    margin: 0.45rem 0 0;
    max-width: 13rem;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--blc-ink-faint);
  }
  .blc-lap-band { fill: none; stroke: var(--blc-moss); stroke-width: 2.2; }
  .blc-lap-over { fill: color-mix(in oklab, var(--blc-clay) 34%, transparent); }
  .blc-lap-floor { fill: none; stroke: var(--blc-ink); stroke-width: 2.2; }
  .blc-lap-dim { fill: none; stroke: var(--blc-clay); stroke-width: 1.4; }
  .blc-lap .blc-svg-label { font-size: 11px; letter-spacing: 0.05em; }
  @media (min-width: 58rem) {
    .blc-offset {
      grid-template-columns: 9rem minmax(0, 1fr);
      column-gap: 3rem;
      align-items: start;
    }
    .blc-offset-body { border-left: 2px solid var(--blc-clay); padding-left: 3.2rem; }
    /* The plate is wider than its column and sits over the body's rule — the overhang is the
       whole figure, so it is drawn opaque with a bg-coloured keyline to lift it off the rule. */
    .blc-offset-fig {
      position: relative;
      z-index: 1;
      margin-right: -4.5rem;
    }
    .blc-lap {
      max-width: none;
      box-shadow: 5px 5px 0 0 color-mix(in oklab, var(--blc-ink) 13%, transparent);
    }
    .blc-offset-fig figcaption { max-width: none; }
  }

  /* --- 8 · margin annotated: the notes change sides ----------------------- */

  .blc-annot-body { margin: 0.9rem 0 1.3rem; }
  .blc-mark {
    margin-left: 0.12em;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: 0.68em;
    vertical-align: super;
    color: var(--blc-clay);
  }
  .blc-aside {
    margin: 0.3rem 0 1rem;
    padding: 0 0 0 0.8rem;
    border-left: 2px solid var(--blc-moss);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--blc-ink-soft);
  }
  .blc-aside b {
    margin-right: 0.45rem;
    font-weight: 400;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    color: var(--blc-moss);
  }
  @media (min-width: 58rem) {
    /* Every other note on this site hangs in the left gutter. These hang on the right, tied
       back to their own paragraph by a rule across the gap. */
    .blc-annot-body {
      display: grid;
      grid-template-columns: minmax(0, 25rem) minmax(0, 14rem);
      column-gap: 2.4rem;
    }
    .blc-annot-body > p { grid-column: 1; max-width: none; margin: 0 0 1.1rem; }
    .blc-annot-body > .blc-aside {
      position: relative;
      grid-column: 2;
      margin: 0.3rem 0 1.1rem;
      padding: 0.45rem 0 0;
      border-left: 0;
      border-top: 1px solid var(--blc-moss);
    }
    .blc-annot-body > .blc-aside::before {
      content: "";
      position: absolute;
      inset-block-start: -1px;
      inset-inline-start: -2.6rem;
      width: 2.6rem;
      height: 1px;
      background: color-mix(in oklab, var(--blc-moss) 48%, transparent);
    }
  }

  /* --- 9 · dark inversion ------------------------------------------------ */

  .blc-dark {
    position: relative;
    margin: 2.6rem 0 2.4rem;
    padding: 1.5rem 1.25rem 1.7rem;
    border-top: 3px solid var(--blc-clay);
    background-color: var(--blc-ink);
    background-image: var(--blc-halftone-light);
    background-size: 9px 9px;
    color: var(--blc-bg);
  }
  .blc-dark > * { grid-column: 1 / -1; }
  .blc-dark::after {
    content: "12";
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    font-family: "Crete Round", Rockwell, Georgia, serif;
    font-size: clamp(2.6rem, 1.4rem + 4vw, 4.6rem);
    line-height: 1;
    letter-spacing: 0.04em;
    color: color-mix(in oklab, var(--blc-bg) 9%, transparent);
  }
  .blc-dark h2 { position: relative; margin-top: 0; color: var(--blc-bg); }
  .blc-dark p { color: color-mix(in oklab, var(--blc-bg) 88%, transparent); }
  .blc-dark .blc-jump a {
    border-color: color-mix(in oklab, var(--blc-bg) 24%, transparent);
    background: color-mix(in oklab, var(--blc-bg) 7%, transparent);
  }
  .blc-dark .blc-jump b { color: color-mix(in oklab, var(--blc-clay) 48%, var(--blc-bg)); }
  .blc-dark .blc-jump span { color: color-mix(in oklab, var(--blc-bg) 72%, transparent); }
  .blc-dark .blc-jump a:hover {
    border-color: var(--blc-clay);
    background: color-mix(in oklab, var(--blc-bg) 13%, transparent);
    box-shadow: -2px 0 0 0 var(--blc-clay);
  }
  .blc-dark a:focus-visible { outline-color: var(--blc-bg); }

  /* --- 10 · stacked overlap ---------------------------------------------- */

  .blc-stack { display: grid; margin: 1rem 0 0.4rem; }
  .blc-stack-a, .blc-stack-b { padding: 0.95rem 1.05rem; }
  .blc-stack-a { padding-bottom: 1.6rem; }
  .blc-stack-a p, .blc-stack-b p { margin: 0; max-width: none; }
  .blc-stack-a { border: 1px solid var(--blc-ink); background: var(--blc-paper); }
  .blc-stack-b {
    position: relative;
    z-index: 1;
    margin: -0.6rem 0 0 1.1rem;
    border: 1px solid var(--blc-clay);
    background: var(--blc-clay-wash);
    box-shadow: -4px -4px 0 0 var(--blc-bg);
  }
  @media (min-width: 58rem) {
    /* Two panels, each pushed four rem past the middle so their boxes lap by about a tenth of
       the measure. The left panel reserves that strip as padding, because a layer that covers
       the line underneath it is not layering, it is a bug. */
    .blc-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .blc-stack-a { grid-area: 1 / 1 / 2 / 2; padding-right: 8rem; margin-right: -4rem; }
    .blc-stack-b { grid-area: 1 / 2 / 2 / 3; margin: 2.6rem 0 0 -4rem; }
  }
}

/* ------------------------------------------------------- @keyframes bodies */

@keyframes blc-flap-drop {
  0%   { transform: rotateX(-86deg); opacity: 0; }
  56%  { transform: rotateX(11deg);  opacity: 1; }
  79%  { transform: rotateX(-4deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes blc-pass {
  from { stroke-dashoffset: 112; }
  to   { stroke-dashoffset: 0; }
}

@keyframes blc-run {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

@keyframes blc-spin {
  from { rotate: 0deg; }
  to   { rotate: 2880deg; }
}

@keyframes blc-lift {
  0%   { scale: 1; }
  62%  { scale: 1.11; }
  100% { scale: 1.07; }
}

@keyframes blc-shadow {
  0%   { opacity: 0.5; }
  100% { opacity: 0.22; }
}

/* ------------------------------------------- unlayered: the motion settlement
   This block is outside every layer, so it beats all four of them whatever the specificity of
   the rule it is overruling. Reduced motion does not shorten the sweep: it lands it. The bands
   are fully painted, the head is parked at the end of the run and already lifted, and the flaps
   are face up. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }
  .blc-flap { transform: rotateX(0deg) !important; opacity: 1 !important; }
  .blc-floor .blc-band,
  .blc-floor .blc-band-dots { stroke-dashoffset: 0 !important; }
  .blc-floor .blc-head { offset-distance: 100% !important; }
  .blc-floor .blc-head-lift { scale: 1.07 !important; }
  .blc-floor .blc-head-shadow { opacity: 0.22 !important; }
  .blc-floor .blc-lobes { rotate: 48deg !important; }
  .blc-pane { translate: 0 0 !important; }
  .blc-pane:not([hidden]) { opacity: 1 !important; }
}

/* ----------------------------------------- unlayered: the sheets on paper
   Both sheets are filled in on screen and then printed to go in the folder with the works
   order, so the printed page drops the navigation and keeps the arithmetic. */

@media print {
  body { background: white; color: black; padding: 0; }
  .blc-tabstrip, .blc-board, .blc-floor-wrap, .blc-locator, .blc-jump,
  .blc-bleed-art { display: none; }
  .blc-bleed { border: 0; background: white; padding-top: 0; }
  .blc-bleed-in { padding-block-start: 0; }
  .blc-dark { background: white; color: black; border-top: 1px solid black; }
  .blc-dark h2, .blc-dark p { color: black; }
  .blc-dark::after { display: none; }
  .blc-ledger { overflow: visible; }
  .blc-sheet { border-color: black; break-inside: avoid; }
  .blc-sheet-head { background: white; color: black; border-bottom: 1px solid black; }
  .blc-out { background: white; border-style: solid; }
  .blc-pane[hidden] { display: block !important; opacity: 1 !important; }
  .blc-foot { border-top: 1px solid black; }
  a { color: black; }
}