@layer base, rig, type;

@layer base {
  :root {
    --bg: #1b1d19;
    --ink: #e9efe2;
    --accent: #b4e033;
    --accent2: #6f7a62;
    --surface: #24271f;

    --dim: color-mix(in srgb, var(--ink) 58%, var(--bg));
    --faint: color-mix(in srgb, var(--ink) 56%, var(--bg));
    --label: color-mix(in srgb, var(--accent2) 62%, var(--ink));
    --rule: color-mix(in srgb, var(--accent2) 46%, var(--bg));
    --rule-soft: color-mix(in srgb, var(--accent2) 26%, var(--bg));
    --lit: color-mix(in srgb, var(--accent) 86%, var(--ink));
    --deep: color-mix(in srgb, var(--bg) 72%, #000000);

    --step: 0.5rem;
    --gut: 1.15rem;
    --rail-w: 13.5rem;
    --note-w: 14.5rem;
    --measure: 36rem;
    --page: 74rem;

    --cue-up: 620ms;
    --cue-gap: 150ms;
    --ease: cubic-bezier(0.22, 0.72, 0.3, 1);
  }

  html {
    box-sizing: border-box;
    background-color: var(--bg);
    color: var(--ink);
    font-family: "Sofia Sans", "Segoe UI", system-ui, sans-serif;
    font-weight: 400;
    font-size: 100%;
    line-height: 1.6;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
  }

  html *,
  html *::before,
  html *::after { box-sizing: border-box; }

  body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
    background-color: var(--bg);
    background-image:
      radial-gradient(122% 58% at 9% -10%, color-mix(in srgb, var(--accent2) 19%, transparent), transparent 64%),
      radial-gradient(88% 46% at 96% 4%, color-mix(in srgb, var(--surface) 96%, transparent), transparent 72%),
      radial-gradient(70% 44% at 26% 92%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 66%),
      repeating-linear-gradient(103deg, #ffffff07 0 2px, transparent 2px 9px),
      repeating-linear-gradient(17deg, #00000014 0 1px, transparent 1px 6px),
      repeating-linear-gradient(0deg, #ffffff04 0 1px, transparent 1px 4px);
    background-attachment: fixed, fixed, fixed, scroll, scroll, scroll;
  }

  main { display: block; }
  header, footer, nav, section, article, aside, figure, figcaption, address, details, summary, output { display: block; }

  h1, h2, h3, h4 {
    font-family: "Tektur", "Segoe UI", system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.005em;
    margin: 0;
    color: var(--ink);
    text-wrap: balance;
  }

  p {
    margin: 0 0 0.95em;
    max-width: var(--measure);
  }
  p:last-child { margin-bottom: 0; }

  ul, ol { margin: 0 0 1em; padding-left: 1.15rem; max-width: var(--measure); }
  ul { list-style: none; padding-left: 0; }
  ol { list-style: decimal; }
  li { margin: 0 0 0.45em; }
  li:last-child { margin-bottom: 0; }

  dl { margin: 0; }
  dt { margin: 0; font-family: "Tektur", system-ui, sans-serif; font-weight: 600; }
  dd { margin: 0; }

  a {
    color: var(--lit);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rule);
    transition: color 170ms var(--ease), text-decoration-color 170ms var(--ease), background-color 170ms var(--ease);
  }
  a:hover { color: var(--accent); text-decoration-color: var(--accent); }
  a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 1px;
    color: var(--accent);
  }

  strong { font-weight: 400; color: var(--accent); }
  em { font-style: normal; color: var(--lit); }
  small { font-size: 0.82em; color: var(--dim); }
  abbr { text-decoration: none; border-bottom: 1px dotted var(--rule); cursor: help; }
  hr {
    border: 0;
    height: 1px;
    margin: 2.2rem 0;
    background-image: repeating-linear-gradient(90deg, var(--rule) 0 7px, transparent 7px 14px);
  }
  time { font-variant-numeric: tabular-nums; }
  address { font-style: normal; }
  code {
    font-family: "Tektur", ui-monospace, monospace;
    font-size: 0.88em;
    color: var(--accent);
    letter-spacing: 0.01em;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1em;
    font-size: 0.94rem;
  }
  caption {
    caption-side: top;
    text-align: left;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--label);
    padding: 0 0 0.6rem;
  }
  thead { border-bottom: 1px solid var(--rule); }
  tbody tr { border-bottom: 1px solid var(--rule-soft); }
  tbody tr:last-child { border-bottom: 0; }
  th {
    text-align: left;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--label);
    padding: 0.5rem 0.7rem 0.5rem 0;
    vertical-align: bottom;
  }
  td {
    padding: 0.62rem 0.7rem 0.62rem 0;
    vertical-align: top;
    color: var(--dim);
  }
  td:first-child { color: var(--ink); white-space: nowrap; }

  figure { margin: 0; }
  figcaption {
    font-size: 0.86rem;
    color: var(--dim);
    margin-top: 0.7rem;
    max-width: var(--measure);
  }
  svg { display: block; max-width: 100%; height: auto; }

  form { margin: 0; }
  fieldset { margin: 0; padding: 0; border: 0; }
  legend {
    padding: 0;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--label);
  }
  label {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0 0 0.3rem;
  }
  input, select, button {
    font-family: inherit;
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--deep);
    border: 1px solid var(--rule);
    border-radius: 0;
    padding: 0.55rem 0.65rem;
    width: 100%;
    min-height: 2.75rem;
    transition: border-color 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease);
  }
  input { font-variant-numeric: tabular-nums; }
  select { appearance: none; cursor: pointer; padding-right: 2rem; }
  input:hover, select:hover { border-color: var(--accent2); }
  input:focus-visible, select:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-color: var(--accent);
  }
  input[type="checkbox"] {
    width: 1.2rem;
    min-height: 1.2rem;
    height: 1.2rem;
    accent-color: var(--accent);
    flex: 0 0 auto;
  }
  button {
    cursor: pointer;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg);
    background-color: var(--accent);
    border-color: var(--accent);
    width: auto;
  }
  button:hover { background-color: var(--lit); border-color: var(--lit); }
  button[disabled] {
    cursor: default;
    color: var(--faint);
    background-color: transparent;
    border-color: var(--rule);
  }
  output { display: block; }

  details { margin: 0; }
  summary { cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
}

@layer rig {
  .skip {
    position: absolute;
    left: -200vw;
    top: 0;
    z-index: 60;
    padding: 0.6rem 0.9rem;
    background-color: var(--accent);
    color: var(--bg);
    text-decoration: none;
  }
  .skip:focus { left: 0.5rem; top: 0.5rem; }

  .top {
    position: sticky;
    top: 0;
    z-index: 40;
    background-color: color-mix(in srgb, var(--bg) 92%, #000000);
    border-bottom: 1px solid var(--rule);
    backdrop-filter: blur(5px);
  }
  .top-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gut);
    padding: 0.6rem var(--gut);
    max-width: var(--page);
    margin: 0 auto;
  }
  .mark {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-right: auto;
    text-decoration: none;
    color: var(--ink);
  }
  .mark:hover, .mark:focus-visible { color: var(--ink); }
  .mark-n {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }
  .mark-n em { color: var(--accent); font-style: normal; }
  .mark-s {
    font-size: 0.66rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--label);
  }

  .mega { display: block; }
  .mega-open {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--rule);
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    background-color: var(--surface);
    transition: background-color 170ms var(--ease), border-color 170ms var(--ease), color 170ms var(--ease);
  }
  .mega-open:hover { border-color: var(--accent); color: var(--accent); }
  .mega-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .mega-bars {
    display: grid;
    gap: 3px;
    width: 1.05rem;
  }
  .mega-bars i {
    display: block;
    height: 2px;
    background-color: var(--accent);
    transition: transform 190ms var(--ease), opacity 190ms var(--ease);
  }
  .mega-bars i:nth-child(2) { width: 70%; }
  .mega[open] .mega-bars i:nth-child(1) { transform: translateY(5px) rotate(14deg); }
  .mega[open] .mega-bars i:nth-child(2) { opacity: 0; }
  .mega[open] .mega-bars i:nth-child(3) { transform: translateY(-5px) rotate(-14deg); }
  .mega-open-shut { display: none; }
  .mega[open] .mega-open-shut { display: inline; }
  .mega[open] .mega-open-say { display: none; }

  .mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 1.3rem var(--gut) 1.2rem;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    background-color: var(--surface);
    border-top: 1px solid var(--rule);
    border-bottom: 2px solid var(--accent);
    background-image: repeating-linear-gradient(97deg, #ffffff06 0 2px, transparent 2px 10px);
    box-shadow: 0 1.4rem 2.6rem #0000006b;
    animation: panel-drop 210ms var(--ease) both;
  }
  .mega-cols {
    display: grid;
    gap: 1.25rem var(--gut);
    grid-template-columns: 1fr;
    max-width: var(--page);
    margin: 0 auto;
  }
  .mega-col h2 {
    font-size: 0.68rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 0.6rem;
  }
  .mega-col ul { margin: 0; }
  .mega-col li { margin: 0; border-bottom: 1px solid var(--rule-soft); }
  .mega-col li:last-child { border-bottom: 0; }
  .mega-col a {
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--ink);
    transition: color 150ms var(--ease), padding-left 190ms var(--ease);
  }
  .mega-col a:hover, .mega-col a:focus-visible { color: var(--accent); padding-left: 0.4rem; }
  .mega-col a b { display: block; font-weight: 400; }
  .mega-col a span {
    display: block;
    font-size: 0.78rem;
    color: var(--dim);
    max-width: 22rem;
  }
  .mega-col a[aria-current="page"] { color: var(--accent); padding-left: 0.4rem; }
  .mega-col a[aria-current="page"] b::after {
    content: " \2190 here";
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--label);
    text-transform: uppercase;
  }
  .mega-foot {
    max-width: var(--page);
    margin: 1.1rem auto 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
    font-size: 0.78rem;
    color: var(--dim);
  }

  .sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem var(--gut);
    max-width: var(--page);
    margin: 0 auto;
    padding: 1.6rem var(--gut) 3rem;
  }

  .rail {
    min-width: 0;
    order: 2;
    border-top: 1px solid var(--rule);
    padding-top: 1.4rem;
    margin-top: 0.6rem;
  }
  .rail-block + .rail-block { margin-top: 1.7rem; }
  .rail h2 {
    font-size: 0.66rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--label);
    margin-bottom: 0.7rem;
  }
  .spine { margin: 0; counter-reset: none; }
  .spine li {
    position: relative;
    margin: 0;
    padding: 0 0 0 1.4rem;
    border-left: 1px solid var(--rule);
  }
  .spine li::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 0.95rem;
    width: 7px;
    height: 7px;
    background-color: var(--accent2);
    transition: background-color 180ms var(--ease), transform 180ms var(--ease);
  }
  .spine li:hover::before { background-color: var(--accent); transform: scale(1.5); }
  .spine a {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    text-decoration: none;
    color: var(--dim);
    transition: color 150ms var(--ease);
  }
  .spine a:hover, .spine a:focus-visible { color: var(--accent); }
  .spine a i {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--label);
    flex: 0 0 1.5rem;
  }
  .spine a b {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .spine a:hover b, .spine a:focus-visible b { color: var(--accent); }
  .spine li:last-child { border-left-color: transparent; }
  .spine li:last-child::before { background-color: var(--accent); }

  .rail-note {
    font-size: 0.8rem;
    color: var(--faint);
    border-top: 1px solid var(--rule-soft);
    padding-top: 0.7rem;
  }

  .body { min-width: 0; order: 1; }

  .masthead { padding: 0 0 1.5rem; }
  .masthead h1 {
    font-size: clamp(1.85rem, 1.2rem + 3.4vw, 3.4rem);
    letter-spacing: -0.02em;
    margin-bottom: 0.7rem;
  }
  .masthead h1 span { display: block; color: var(--accent); }
  .stand {
    font-size: clamp(1.02rem, 0.98rem + 0.4vw, 1.2rem);
    color: var(--dim);
    max-width: 38rem;
  }
  .flag {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.8rem;
    margin: 0 0 1rem;
    padding: 0;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--label);
  }
  .flag li { margin: 0; }
  .flag li + li { padding-left: 0.8rem; border-left: 1px solid var(--rule); }

  .contents {
    border-top: 2px solid var(--accent);
    border-bottom: 1px solid var(--rule);
    padding: 1rem 0 0.4rem;
    margin: 0 0 2rem;
  }
  .contents h2 {
    font-size: 0.68rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.9rem;
  }
  .toc { margin: 0; display: grid; gap: 0; max-width: none; }
  .toc li { margin: 0; border-top: 1px solid var(--rule-soft); }
  .toc li:first-child { border-top: 0; }
  .toc a {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0 0.6rem;
    padding: 0.62rem 0;
    text-decoration: none;
    color: var(--dim);
    transition: color 150ms var(--ease), background-color 150ms var(--ease);
  }
  .toc a:hover, .toc a:focus-visible { color: var(--ink); background-color: #ffffff07; }
  .toc a i {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 1.05rem;
    color: var(--accent);
  }
  .toc a b {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 150ms var(--ease);
  }
  .toc a:hover b, .toc a:focus-visible b { color: var(--accent); }
  .toc a span { grid-column: 2; font-size: 0.9rem; }

  .cue {
    padding: 1.6rem 0 0;
    margin: 0 0 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem var(--gut);
  }
  .cue > * { grid-column: 1; }
  .cue-head {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 0 1rem;
  }
  .cue-head .num {
    font-size: clamp(2.6rem, 1.6rem + 5vw, 4.6rem);
    line-height: 0.78;
    letter-spacing: -0.045em;
    color: var(--accent2);
    flex: 0 0 auto;
    transition: color 260ms var(--ease);
  }
  .cue-head .say { display: block; padding-top: 0.15rem; }
  .cue-head .say b {
    display: block;
    font-weight: 600;
    font-size: clamp(1.25rem, 1.05rem + 1.1vw, 1.75rem);
    letter-spacing: -0.012em;
  }
  .cue-head .say i {
    display: block;
    font-style: normal;
    font-family: "Sofia Sans", system-ui, sans-serif;
    font-size: 0.74rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--label);
    margin-top: 0.3rem;
  }
  .cue:target .num, .cue:hover .num { color: var(--accent); }
  .cue:target { scroll-margin-top: 6rem; }

  .note {
    border-left: 2px solid var(--accent);
    padding: 0.1rem 0 0.1rem 0.85rem;
    margin: 0 0 1rem;
    font-size: 0.86rem;
    color: var(--dim);
    max-width: var(--measure);
  }
  .note b {
    display: block;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.25rem;
  }
  .note p { max-width: none; }

  .callout {
    position: relative;
    margin: 0 0 1.15rem;
    padding: 0.95rem 1rem 0.95rem 1.05rem;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--accent2);
    background-image: repeating-linear-gradient(101deg, #ffffff05 0 2px, transparent 2px 11px);
    max-width: var(--measure);
    transition: border-left-color 200ms var(--ease), transform 200ms var(--ease);
  }
  .callout:hover { border-left-color: var(--accent); transform: translateX(2px); }
  .callout > .tag {
    display: inline-block;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bg);
    background-color: var(--label);
    padding: 0.18rem 0.45rem;
    margin-bottom: 0.55rem;
    transition: background-color 200ms var(--ease);
  }
  .callout:hover > .tag { background-color: var(--accent); }
  .callout h3 {
    font-size: 1rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.4rem;
  }
  .callout p { font-size: 0.94rem; color: var(--dim); max-width: none; }
  .callout.hard { border-left-color: var(--accent); }
  .callout.hard > .tag { background-color: var(--accent); }
  .callout.cold { border-left-color: var(--rule); background-color: transparent; }
  .callout.cold > .tag { background-color: var(--rule); color: var(--ink); }

  .book { margin: 0 0 1.2rem; max-width: var(--measure); }
  .book > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem 0.8rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--rule-soft);
  }
  .book > div:first-of-type { border-top: 1px solid var(--rule); }
  .book dt {
    font-size: 0.72rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--label);
  }
  .book dd { font-size: 0.94rem; color: var(--dim); }

  .ticks { margin: 0 0 1.1rem; max-width: var(--measure); }
  .ticks li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.96rem;
    color: var(--dim);
  }
  .ticks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 0.7rem;
    height: 1px;
    background-color: var(--accent);
  }
  .ticks li b { color: var(--ink); font-weight: 400; }

  .rig-figure {
    margin: 0 0 2.2rem;
    border: 1px solid var(--rule);
    background-color: var(--deep);
    background-image: repeating-linear-gradient(99deg, #ffffff05 0 2px, transparent 2px 12px);
  }
  .rig-stage { padding: 0.9rem 0.9rem 0.5rem; }
  .rig-under {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.9rem;
    padding: 0.7rem 0.9rem 0.85rem;
    border-top: 1px solid var(--rule);
  }
  .rig-read {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-right: auto;
    min-height: 1.4em;
  }
  .rig-read::before {
    content: "";
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.45rem;
    background-color: var(--accent);
    vertical-align: 0.05em;
    animation: desk-pulse 2.4s steps(1, end) infinite;
  }
  .rig-figure figcaption { padding: 0 0.9rem 0.9rem; margin-top: 0; }

  .panel {
    border: 1px solid var(--rule);
    background-color: var(--surface);
    background-image: repeating-linear-gradient(95deg, #ffffff04 0 2px, transparent 2px 13px);
    padding: 1.1rem var(--gut) 1.2rem;
    margin: 0 0 1.4rem;
  }
  .panel > h3 {
    font-size: 0.7rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--accent);
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1rem;
  }
  .fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem var(--gut);
    margin: 0 0 1rem;
  }
  .field { min-width: 0; }
  .field-hint { font-size: 0.76rem; color: var(--faint); margin-top: 0.3rem; }
  .check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .check label {
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.92rem;
    color: var(--dim);
  }
  .acts { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

  .work {
    margin: 1.1rem 0 0;
    border-top: 1px solid var(--rule);
    padding-top: 0.9rem;
  }
  .work:empty { display: none; }
  .work-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.2rem 0.8rem;
    padding: 0.45rem 0;
    border-bottom: 1px dotted var(--rule-soft);
    font-size: 0.92rem;
  }
  .work-line:last-of-type { border-bottom: 0; }
  .work-line em {
    font-style: normal;
    color: var(--dim);
    font-size: 0.86rem;
  }
  .work-line b {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    white-space: nowrap;
  }
  .work-line.sum {
    border-bottom: 0;
    border-top: 2px solid var(--accent);
    margin-top: 0.45rem;
    padding-top: 0.7rem;
  }
  .work-line.sum b { color: var(--accent); font-size: 1.3rem; }
  .work-line.sum em { color: var(--ink); }
  .work-line.bind b { color: var(--accent); }
  .work-warn {
    margin-top: 0.8rem;
    padding: 0.6rem 0.7rem;
    border: 1px dashed var(--accent);
    font-size: 0.86rem;
    color: var(--ink);
  }
  .work-guide {
    margin-top: 0.9rem;
    font-size: 0.78rem;
    color: var(--faint);
  }
  .noscript-say {
    border: 1px dashed var(--rule);
    padding: 0.7rem 0.8rem;
    font-size: 0.88rem;
    color: var(--dim);
    margin: 0 0 1rem;
  }

  .tablewrap {
    max-width: var(--measure);
    overflow-x: auto;
    margin: 0 0 1.2rem;
    border-left: 2px solid var(--accent);
    padding-left: 0.85rem;
    transition: border-left-color 200ms var(--ease);
  }
  .tablewrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .tablewrap table { min-width: 28rem; margin-bottom: 0; }

  .plan-figure, .trace-figure, .map-figure {
    margin: 0 0 1.4rem;
    border: 1px solid var(--rule);
    background-color: var(--deep);
    padding: 0.8rem;
  }
  .plan-figure figcaption, .trace-figure figcaption, .map-figure figcaption { padding: 0; }

  .foot {
    border-top: 1px solid var(--rule);
    background-color: color-mix(in srgb, var(--bg) 88%, #000000);
    background-image: repeating-linear-gradient(107deg, #ffffff05 0 2px, transparent 2px 10px);
  }
  .foot-in {
    max-width: var(--page);
    margin: 0 auto;
    padding: 1.8rem var(--gut) 2.4rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.3rem var(--gut);
  }
  .foot-name {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    color: var(--ink);
    margin-bottom: 0.6rem;
  }
  .foot-addr {
    font-size: 0.9rem;
    color: var(--dim);
    line-height: 1.75;
    margin-bottom: 0.7rem;
  }
  .foot-reg, .foot-sic {
    font-size: 0.8rem;
    color: var(--faint);
    margin-bottom: 0.25rem;
  }
  .foot-mail { font-size: 0.9rem; margin: 0.5rem 0 0; }
  .foot-links h2 {
    font-size: 0.64rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--label);
    margin-bottom: 0.6rem;
  }
  .foot-links ul { margin: 0; columns: 2; column-gap: var(--gut); }
  .foot-links li { margin-bottom: 0.4rem; break-inside: avoid; }
  .foot-links a { font-size: 0.88rem; text-decoration: none; }
  .foot-links a:hover { text-decoration: underline; }
}

@layer type {
  .lede {
    font-size: clamp(1.05rem, 1rem + 0.5vw, 1.24rem);
    line-height: 1.5;
    color: var(--ink);
    max-width: 34rem;
  }
  .kicker {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 0.7rem;
  }
  .sub-h2 {
    font-size: clamp(1.15rem, 1rem + 0.9vw, 1.5rem);
    margin: 0 0 0.85rem;
  }
  .sub-h3 {
    font-size: 1.02rem;
    letter-spacing: 0.02em;
    margin: 1.6rem 0 0.6rem;
    color: var(--lit);
  }
  .seam {
    display: block;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--label);
    margin: 2.2rem 0 0.8rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--rule-soft);
  }
  .tight { max-width: 32rem; }
  .num-run { font-variant-numeric: tabular-nums; }
}

@layer rig {
  @media (min-width: 40rem) {
    .mega-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .book > div { grid-template-columns: 11rem minmax(0, 1fr); }
    .foot-in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  }

  @media (min-width: 58rem) {
    .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sheet {
      grid-template-columns: var(--rail-w) minmax(0, 1fr);
      padding-top: 2.2rem;
      gap: 2.4rem;
    }
    .rail {
      order: 0;
      border-top: 0;
      padding-top: 0;
      margin-top: 0;
      position: sticky;
      top: 5rem;
      align-self: start;
      max-height: calc(100vh - 6.5rem);
      overflow-y: auto;
      padding-right: 0.4rem;
    }
    .masthead h1 { max-width: 30ch; }
    .body { order: 0; }
  }

  @media (min-width: 78rem) {
    .contents { max-width: calc(var(--measure) + var(--note-w) + var(--gut)); }
    .sheet { --measure: 34rem; }
  }
}

@layer rig {
  .rig-lamp .glass {
    opacity: 0.07;
    animation-name: lamp-up;
    animation-duration: var(--cue-up);
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .rig-lamp .cone {
    transform-box: fill-box;
    transform-origin: 50% 0%;
    opacity: 0;
    animation-name: cone-grow;
    animation-duration: var(--cue-up);
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .rig-lamp .pool {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    opacity: 0;
    animation-name: pool-open;
    animation-duration: var(--cue-up);
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
    animation-play-state: paused;
  }
  .rig-lamp .flag-rect { transition: fill 220ms var(--ease); }

  html.rig-live .rig-lamp .glass,
  html.rig-live .rig-lamp .cone,
  html.rig-live .rig-lamp .pool { animation-play-state: running; }

  .rig-lamp[data-cue="1"] .glass,
  .rig-lamp[data-cue="1"] .cone,
  .rig-lamp[data-cue="1"] .pool { animation-delay: 240ms; }
  .rig-lamp[data-cue="2"] .glass,
  .rig-lamp[data-cue="2"] .cone,
  .rig-lamp[data-cue="2"] .pool { animation-delay: 1100ms; }
  .rig-lamp[data-cue="3"] .glass,
  .rig-lamp[data-cue="3"] .cone,
  .rig-lamp[data-cue="3"] .pool { animation-delay: 1960ms; }
  .rig-lamp[data-cue="4"] .glass,
  .rig-lamp[data-cue="4"] .cone,
  .rig-lamp[data-cue="4"] .pool { animation-delay: 2620ms; }

  html.rig-live .cue,
  html.rig-live .contents,
  html.rig-live .rig-figure {
    animation-name: cue-in;
    animation-duration: 560ms;
    animation-timing-function: var(--ease);
    animation-fill-mode: both;
  }
  html.rig-live .contents { animation-delay: 80ms; }
  html.rig-live .rig-figure { animation-delay: 220ms; }
  html.rig-live .cue { animation-delay: 360ms; }
  html.rig-live .cue[data-cue="1"] { animation-delay: 360ms; }
  html.rig-live .cue[data-cue="2"] { animation-delay: 510ms; }
  html.rig-live .cue[data-cue="3"] { animation-delay: 660ms; }
  html.rig-live .cue[data-cue="4"] { animation-delay: 810ms; }
  html.rig-live .cue[data-cue="5"] { animation-delay: 960ms; }
  html.rig-live .cue[data-cue="6"] { animation-delay: 1110ms; }
  html.rig-live .cue[data-cue="7"] { animation-delay: 1260ms; }
  html.rig-live .cue[data-cue="8"] { animation-delay: 1410ms; }
  html.rig-live .cue[data-cue="9"] { animation-delay: 1560ms; }
}

@keyframes lamp-up {
  from { opacity: 0.07; }
  60% { opacity: 0.92; }
  to { opacity: 1; }
}

@keyframes cone-grow {
  from { opacity: 0; transform: scaleX(0.14) scaleY(0.42); }
  55% { opacity: 0.5; }
  to { opacity: 0.46; transform: scaleX(1) scaleY(1); }
}

@keyframes pool-open {
  from { opacity: 0; transform: scale(0.3); }
  to { opacity: 0.4; transform: scale(1); }
}

@keyframes cue-in {
  from { opacity: 0; transform: translateY(0.75rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes panel-drop {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes desk-pulse {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0.18; }
}

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

  a,
  input,
  select,
  button,
  .mega-open,
  .mega-bars i,
  .mega-col a,
  .spine li::before,
  .spine a,
  .toc a,
  .toc a b,
  .cue-head .num,
  .callout,
  .callout > .tag,
  .rig-lamp .flag-rect {
    transition: none;
  }

  .mega-panel { animation: none; opacity: 1; transform: none; }

  html.rig-live .cue,
  html.rig-live .contents,
  html.rig-live .rig-figure {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .rig-lamp .glass,
  html.rig-live .rig-lamp .glass {
    animation: none;
    opacity: 1;
  }
  .rig-lamp .cone,
  html.rig-live .rig-lamp .cone {
    animation: none;
    opacity: 0.46;
    transform: none;
  }
  .rig-lamp .pool,
  html.rig-live .rig-lamp .pool {
    animation: none;
    opacity: 0.4;
    transform: none;
  }
  .rig-read::before { animation: none; opacity: 1; }
  .callout:hover { transform: none; }
  .spine li:hover::before { transform: none; }
  .mega-col a:hover, .mega-col a:focus-visible { padding-left: 0; }
}

@media print {
  .top, .rail, .mega, .acts, .skip { display: none; }
  html, body { background: #ffffff; color: #000000; }
  .sheet { display: block; max-width: none; padding: 0; }
}

/* ------------------------------------------------------------------------------------------
   COMPOSITION
   One figure per cue, and no figure twice. 01 inverts to a printed sheet, 02 is a wide drawing
   captioned, 03 hangs its notes in the margin, 04 opens on a pull quote, 05 lays two panels over
   one another, 06 breaks into cards, 07 rules itself into a ledger, 08 splits off-centre with the
   clock overhanging the gutter, 09 walks down a drawn chain. The three photographs are editorial:
   they are labelled as pictures, never as this room.
   ------------------------------------------------------------------------------------------ */

@layer base {
  :root {
    --sheet: color-mix(in srgb, var(--ink) 90%, #ffffff);
    --sheet-ink: color-mix(in srgb, var(--bg) 88%, #000000);
    --sheet-dim: color-mix(in srgb, var(--bg) 58%, var(--sheet));
    --sheet-rule: color-mix(in srgb, var(--bg) 24%, var(--sheet));
    --chain-step: 0.8rem;
  }
}

@layer rig {

  /* --- editorial photographs -------------------------------------------------------------- */
  .shot { position: relative; width: 100%; }
  .shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .shot-say {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 0;
    max-width: none;
  }

  .shot-band {
    height: clamp(10rem, 30vw, 19rem);
    overflow: hidden;
    border-bottom: 1px solid var(--rule);
  }
  .shot-band img { object-position: 50% 36%; }
  .shot-band::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 58%, transparent) 0%,
      color-mix(in srgb, var(--bg) 14%, transparent) 32%,
      color-mix(in srgb, var(--bg) 72%, transparent) 72%,
      var(--bg) 100%);
  }
  .shot-band .shot-say {
    position: absolute;
    right: var(--gut);
    top: 0.55rem;
    z-index: 2;
    padding: 0.22rem 0.45rem;
    color: color-mix(in srgb, var(--ink) 76%, var(--bg));
    background-color: color-mix(in srgb, var(--bg) 66%, transparent);
  }

  /* the sheet rides up onto the band, so the spine starts over the rig */
  .sheet {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * clamp(3rem, 9vw, 6.5rem));
  }

  .shot-foot {
    display: flex;
    align-items: flex-end;
    min-height: clamp(9rem, 26vw, 15.5rem);
    padding: clamp(3rem, 20vw, 5rem)
             max(var(--gut), calc((100% - var(--page)) / 2 + var(--gut)))
             1.5rem;
    border-top: 1px solid var(--rule);
    overflow: hidden;
  }
  .shot-foot img {
    position: absolute;
    inset: 0;
    object-position: 50% 58%;
  }
  .shot-foot::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(
      96deg,
      color-mix(in srgb, var(--bg) 82%, transparent) 0%,
      color-mix(in srgb, var(--bg) 46%, transparent) 46%,
      color-mix(in srgb, var(--bg) 20%, transparent) 100%);
  }
  .shot-plate {
    position: relative;
    z-index: 2;
    max-width: min(24rem, 84%);
    padding: 0.85rem 1rem 0.8rem;
    background-color: var(--sheet);
    color: var(--sheet-ink);
    border-left: 4px solid var(--accent);
    box-shadow: 0 0.9rem 2rem color-mix(in srgb, #000000 62%, transparent);
  }
  .shot-plate-h {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.62rem;
    letter-spacing: 0.19em;
    text-transform: uppercase;
    color: var(--sheet-dim);
    margin: 0 0 0.5rem;
  }
  .shot-plate ul { margin: 0 0 0.6rem; max-width: none; }
  .shot-plate li { margin: 0 0 0.3rem; font-size: 0.9rem; }
  .shot-plate a {
    color: var(--sheet-ink);
    text-decoration-color: color-mix(in srgb, var(--bg) 42%, var(--sheet));
    transition: color 170ms var(--ease), text-decoration-color 170ms var(--ease);
  }
  .shot-plate a:hover { color: color-mix(in srgb, var(--bg) 62%, var(--accent)); }
  .shot-plate a:focus-visible {
    outline: 2px solid var(--sheet-ink);
    outline-offset: 2px;
    color: var(--sheet-ink);
  }
  .shot-plate .shot-say {
    color: var(--sheet-dim);
    border-top: 1px solid var(--sheet-rule);
    padding-top: 0.45rem;
  }

  /* --- 01 dark inversion: the door brief, printed ----------------------------------------- */
  .sh-brief {
    padding: 1.25rem 1.1rem 1rem;
    margin-bottom: 2.8rem;
    background-color: var(--sheet);
    color: var(--sheet-ink);
    background-image: repeating-linear-gradient(
      0deg, transparent 0 1.55rem,
      color-mix(in srgb, var(--bg) 11%, transparent) 1.55rem 1.6rem);
    box-shadow: 0 1rem 2.4rem color-mix(in srgb, #000000 55%, transparent);
  }
  .sh-brief .cue-head { margin-bottom: 0.8rem; }
  .sh-brief .cue-head .num { color: color-mix(in srgb, var(--bg) 38%, var(--sheet)); }
  .sh-brief .cue-head .say b { color: var(--sheet-ink); }
  .sh-brief .cue-head .say i { color: var(--sheet-dim); }
  .sh-brief:hover .cue-head .num { color: color-mix(in srgb, var(--bg) 52%, var(--accent)); }
  .sh-brief p { color: var(--sheet-ink); }
  .sh-brief .brief-slug {
    display: block;
    width: max-content;
    max-width: 100%;
    justify-self: start;
    color: var(--sheet);
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background-color: var(--sheet-ink);
    padding: 0.22rem 0.5rem;
    margin: 0 0 0.9rem;
  }
  .brief-cols p { max-width: none; font-size: 0.97rem; }
  .brief-sign {
    margin: 0.9rem 0 0;
    padding-top: 0.55rem;
    border-top: 1px dashed var(--sheet-rule);
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sheet-dim);
    max-width: none;
  }

  /* --- 02 wide figure: the plan, with the prose under it as its caption -------------------- */
  .sh-wide { border-top: 2px solid var(--accent); padding-top: 1.3rem; }
  .wide-plan { margin: 0.4rem 0 0; }
  .wide-plan svg { width: 100%; }
  .wide-plan figcaption {
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule);
    max-width: none;
    font-size: 0.94rem;
    color: var(--dim);
  }
  .wide-plan figcaption p { max-width: 42rem; margin-bottom: 0.7rem; }
  .wide-plan figcaption p:last-child { margin-bottom: 0; color: var(--faint); }
  .wide-plan figcaption p:first-child::first-line { color: var(--ink); }

  /* --- 03 margin annotated ---------------------------------------------------------------- */
  .sh-margin { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .sh-margin > p { max-width: 31rem; }

  /* --- 04 pull quote ---------------------------------------------------------------------- */
  .sh-quote { padding-top: 0.4rem; }
  .pull {
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: clamp(1.55rem, 0.95rem + 3.4vw, 3rem);
    line-height: 1.03;
    letter-spacing: -0.03em;
    color: var(--ink);
    max-width: 19ch;
    margin: 0 0 1.3rem;
    padding-top: 1.1rem;
    border-top: 3px solid var(--accent);
    text-wrap: balance;
  }
  .sh-quote > p + p { color: var(--dim); }

  /* --- 05 stacked overlap ------------------------------------------------------------------ */
  .sh-stack { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .stack { display: grid; grid-template-columns: minmax(0, 1fr); }
  .stack-shot {
    position: relative;
    margin: 0;
    border: 1px solid var(--rule);
    background-color: var(--deep);
  }
  .stack-shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1120 / 637;
    object-fit: cover;
  }
  .stack-shot figcaption {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    margin: 0;
    padding: 0.22rem 0.45rem;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.56rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 76%, var(--bg));
    background-color: color-mix(in srgb, var(--bg) 66%, transparent);
    max-width: none;
  }
  .stack-say {
    position: relative;
    z-index: 2;
    margin: -1.9rem 0 0 1.4rem;
    padding: 0.95rem 1rem 1rem;
    background-color: var(--surface);
    border: 1px solid var(--rule);
    border-top: 3px solid var(--accent);
    box-shadow: -0.75rem 0.75rem 0 -0.35rem color-mix(in srgb, #000000 58%, transparent);
  }
  .stack-say h3 { font-size: 1.05rem; margin-bottom: 0.55rem; }
  .stack-say p { font-size: 0.93rem; color: var(--dim); max-width: none; }

  /* --- 06 card grid ------------------------------------------------------------------------ */
  .sh-cards { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 1.1rem 0 0;
    max-width: none;
  }
  .cards li {
    margin: 0;
    padding: 0.7rem 0.75rem 0.8rem;
    border-top: 2px solid var(--accent2);
    background-color: color-mix(in srgb, var(--surface) 62%, transparent);
    transition: border-top-color 190ms var(--ease), background-color 190ms var(--ease);
  }
  .cards li:hover { border-top-color: var(--accent); background-color: var(--surface); }
  .cards li b {
    display: block;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 0.4rem;
  }
  .cards li p { font-size: 0.88rem; color: var(--dim); max-width: none; }

  /* --- 07 ledger rows ---------------------------------------------------------------------- */
  .sh-ledger { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .ledger { max-width: none; margin: 1.1rem 0 0; font-size: 0.9rem; }
  .ledger td:first-child { white-space: normal; }
  .ledger th:nth-child(2), .ledger td:nth-child(2) {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    padding-right: 0.9rem;
  }
  .ledger tbody tr { transition: background-color 180ms var(--ease); }
  .ledger tbody tr:hover { background-color: #ffffff08; }
  .sh-ledger .panel {
    border: 0;
    border-top: 2px solid var(--accent);
    background-color: transparent;
    background-image: none;
    padding: 1rem 0 0;
    margin: 1.5rem 0 0;
  }
  .sh-ledger .panel > h3 { border-bottom: 0; padding-bottom: 0.1rem; margin-bottom: 0.9rem; }

  /* --- 08 offset split, clock overhanging the gutter ---------------------------------------- */
  .sh-split { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.3rem; }
  .split-narrow { order: 2; }
  .split-wide { order: 1; min-width: 0; }
  .clock { margin: 0; }
  .clock svg { width: 100%; max-width: 10.5rem; }
  .clock figcaption {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    max-width: 14rem;
  }
  .sh-split .panel { border-left: 3px solid var(--accent); margin-top: 1.2rem; }

  /* --- 09 step chain ------------------------------------------------------------------------ */
  .sh-chain { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
  .chain {
    list-style: none;
    margin: 1.2rem 0 1.6rem;
    padding: 0;
    max-width: none;
  }
  .chain li {
    position: relative;
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0 0.85rem;
    align-items: start;
    margin: 0;
    padding: 0 0 1.35rem;
  }
  .chain li + li { margin-left: var(--chain-step); }
  .chain li + li + li { margin-left: calc(var(--chain-step) * 2); }
  .chain li + li + li + li { margin-left: calc(var(--chain-step) * 3); }
  .chain li::before {
    content: "";
    position: absolute;
    left: calc(1.6rem - 1px);
    top: 2.5rem;
    bottom: 0.15rem;
    width: var(--chain-step);
    border-left: 2px solid var(--rule);
    border-bottom: 2px solid var(--rule);
  }
  .chain li:last-child::before { display: none; }
  .chain-n {
    justify-self: center;
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    color: var(--accent);
    border: 1px solid var(--rule);
    background-color: var(--bg);
    transition: border-color 190ms var(--ease), color 190ms var(--ease);
  }
  .chain li:hover .chain-n { border-color: var(--accent); color: var(--lit); }
  .chain-say b {
    display: block;
    font-family: "Tektur", system-ui, sans-serif;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0.45rem 0 0.35rem;
  }
  .chain-say p { font-size: 0.92rem; color: var(--dim); max-width: 34rem; }
  .sh-chain .callout { margin-top: 0.3rem; }

  @media (min-width: 34rem) {
    .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (min-width: 44rem) {
    .brief-cols { columns: 2; column-gap: 1.6rem; }
    .brief-cols p { break-inside: avoid; }
    .sh-brief { padding: 1.5rem 1.5rem 1.2rem; }
  }

  @media (min-width: 52rem) {
    .split {
      grid-template-columns: minmax(0, 1fr) 11.5rem;
      gap: 1.9rem;
      align-items: start;
    }
    .split-wide { grid-column: 1; grid-row: 1; }
    .split-narrow {
      grid-column: 2;
      grid-row: 1;
      margin-right: -2.3rem;
      border-left: 1px solid var(--rule);
      padding-left: 1rem;
    }
    .clock svg { max-width: none; }
    .clock figcaption { max-width: none; }
  }

  @media (min-width: 58rem) {
    :root { --chain-step: 1.3rem; }
    .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .sh-margin {
      grid-template-columns: minmax(0, 1fr) 12rem;
      column-gap: 1.7rem;
      align-items: start;
    }
    .sh-margin > .cue-head { grid-row: 1; grid-column: 1 / -1; }
    .sh-margin > p:nth-of-type(1) { grid-row: 2; grid-column: 1; }
    .sh-margin > .note:nth-of-type(1) { grid-row: 2; grid-column: 2; }
    .sh-margin > p:nth-of-type(2) { grid-row: 3; grid-column: 1; }
    .sh-margin > .note:nth-of-type(2) { grid-row: 3; grid-column: 2; }
    .sh-margin > .note {
      position: relative;
      margin: 0.4rem 0 1rem;
      padding: 0.6rem 0 0;
      border-left: 0;
      border-top: 2px solid var(--accent);
      font-size: 0.8rem;
    }
    .sh-margin > .note::before {
      content: "";
      position: absolute;
      left: -1.7rem;
      top: -2px;
      width: 1.7rem;
      height: 2px;
      background-color: color-mix(in srgb, var(--accent) 45%, transparent);
    }

    .stack { grid-template-columns: 55% minmax(0, 1fr); }
    .stack-shot { grid-area: 1 / 1 / 2 / 2; }
    .stack-say {
      grid-area: 1 / 2 / 2 / 3;
      margin: 2.6rem 0 0 -7%;
      align-self: start;
    }
  }

  @media (min-width: 78rem) {
    .sh-margin { grid-template-columns: minmax(0, var(--measure)) var(--note-w); }
  }
}

@layer rig {
  /* The eight sub-pages share .cue and .note with the index. The index now gives every section its
     own figure, so the uniform rule and the blanket margin-note grid were removed from .cue - which
     would have silently restyled all eight. They keep exactly what they had; only the index's
     shaped sections opt out. */
  .cue:not([class*="sh-"]) { border-top: 1px solid var(--rule); }

  @media (min-width: 78rem) {
    .cue:not([class*="sh-"]) {
      grid-template-columns: minmax(0, var(--measure)) var(--note-w);
      align-items: start;
    }
    .cue:not([class*="sh-"]) > .cue-head { grid-column: 1 / -1; }
    .cue:not([class*="sh-"]) > .note {
      grid-column: 2;
      border-left: 1px solid var(--rule);
      border-top: 2px solid var(--accent);
      padding: 0.6rem 0 0 0.75rem;
      font-size: 0.8rem;
      margin: 0.2rem 0 1.2rem;
    }
    .cue:not([class*="sh-"]) > .note + .note { margin-top: 0; }
    .cue:not([class*="sh-"]) > figure,
    .cue:not([class*="sh-"]) > .panel { grid-column: 1 / -1; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cards li,
  .ledger tbody tr,
  .chain-n,
  .shot-plate a {
    transition: none;
  }
}

@media print {
  .shot { display: none; }
  .sheet { margin-top: 0; }
  .sh-brief { box-shadow: none; }
  .stack-say { box-shadow: none; margin: 1rem 0 0; }
}