/*
 * Styles for the generated case-study pages (public/work/<slug>.html and the
 * /work/ hub). Same paper-and-ink system as the site and the legal pages, so a
 * visitor who lands here from search still knows whose site they are on.
 */
:root {
  --paper: #eef1f3;
  --paper-raised: #ffffff;
  --ink: #0c1a24;
  --ink-muted: #46596a;
  --ink-faint: #5c6e7d;
  --rule: #c9d4dc;
  --accent: #0e4f73;
  --accent-deep: #0a3c58;
  --blueprint-soft: #e3ecf2;
  --signal: #c2410c;
  --signal-deep: #9a3412;
  --signal-soft: #fbeae1;
  --grid: rgba(12, 26, 36, 0.075);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --display: 'Archivo', 'Instrument Sans', system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

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

body {
  margin: 0;
  background-color: var(--paper);
  /* The dotted vellum field, same 14px pitch as the React site. */
  background-image: radial-gradient(circle at 1px 1px, var(--grid) 1px, transparent 0);
  background-size: 14px 14px;
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration-color: var(--accent);
  text-underline-offset: 3px;
}

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

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

::selection {
  background: var(--accent);
  color: var(--paper);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Top bar ------------------------------------------------------------- */

.topbar {
  border-bottom: 1px solid var(--rule);
  background: transparent;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
}

.brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.crumbs {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.crumbs a {
  color: var(--ink-muted);
  text-decoration: none;
  white-space: nowrap;
}

.crumbs a:hover {
  color: var(--accent);
}

.crumbs [aria-current='page'] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crumbs__sep {
  color: var(--rule);
}

/* Masthead ------------------------------------------------------------ */

main {
  padding: 52px 0 64px;
}

.eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 16px;
}

/* The sheet number is stamped, not set: a boxed tag with the accent ink. */
.eyebrow .tag {
  padding: 3px 6px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  color: var(--accent);
}

/* The hub numbers its own sheet in the same accent, without the box. */
.eyebrow__index {
  color: var(--accent);
}

h1 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.8vw, 3rem);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  text-wrap: balance;
}

.lede {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ink-muted);
  max-width: 62ch;
  margin: 0;
  text-wrap: pretty;
}

/* The title block of a drawing sheet: four fixed fields under a heavy rule. */
.spec {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 24px;
  margin: 34px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--ink);
}

.spec__cell dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}

.spec__cell dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* The parts list under the lede: a drawing names its materials once. */
.stackline {
  display: flex;
  flex-wrap: wrap;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.stackline li {
  display: flex;
  align-items: center;
}

.stackline li:not(:last-child)::after {
  content: '·';
  margin: 0 9px;
  color: var(--ink-faint);
}

/* Figure: the path a request or a record takes -------------------------- */

.fig {
  /* A plate, not a paragraph: it starts where the sheet starts (the eyebrow, the
     title, the rule) and ends where the case text block ends, so it hangs in the
     number gutter instead of floating between the two grids. */
  margin: 30px 0 0;
  max-width: calc(100% - 18.25rem); /* 16rem rail + 2.25rem gutter */
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.fig__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
  padding: 9px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.fig__cap strong {
  font-weight: 500;
  color: var(--accent);
}

/* The drawing itself: an SVG whose viewBox is the width the content needs, so
   it scales to the sheet on a desktop and scrolls inside its own frame on a
   phone rather than shrinking its labels to nothing. */
.fig svg {
  display: block;
  width: 100%;
  height: auto;
}

.fig__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.fig__hint {
  display: none;
  margin-left: auto;
  color: var(--ink-faint);
}

.fig__note {
  margin: 0;
  padding: 8px 18px 9px;
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-faint);
}

/* Case sheet: numbered margin, prose, record rail ---------------------- */

.case {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 16rem;
  align-items: start;
  gap: 0 2.25rem;
  margin: 34px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--ink);
}

.rail {
  grid-column: 3;
  grid-row: 1;
  position: sticky;
  top: 24px;
  display: grid;
  gap: 12px;
  align-content: start;
}

/* The rail settles rather than appears: three cards landing a beat apart reads
   as one assembly, where a single fade on the group reads as a pop-in. */
@keyframes rail-settle {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.rail > * {
  animation: rail-settle 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.rail > :nth-child(2) {
  animation-delay: 70ms;
}

.rail > :nth-child(3) {
  animation-delay: 140ms;
}

@media (prefers-reduced-motion: reduce) {
  .rail > * {
    animation: none;
  }
}

.record {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.record__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 11px;
  border-bottom: 1px solid var(--rule);
  background: var(--blueprint-soft);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.record dl {
  margin: 0;
}

.record dl > div {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--rule);
}

.record dl > div:last-child {
  border-bottom: 0;
}

.record dt {
  padding-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.record dd {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.stacklist {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 9px;
  line-height: 1.9;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* Revision cloud: the part of the sheet that is deliberately blank. */
.limits {
  padding: 12px 12px 13px;
  border: 1px solid var(--rule);
  background-color: var(--paper-raised);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(194, 65, 12, 0.05) 0 5px,
    transparent 5px 10px
  );
  font-size: 0.78rem;
  line-height: 1.62;
  color: var(--ink-muted);
}

.limits p {
  margin: 0;
}

.limits__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal-deep);
}

/* Key to the drawing: three swatches, the same three on every sheet. */
.key {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.key__head {
  margin: 0;
  padding: 7px 12px;
  border-bottom: 1px solid var(--rule);
  background: var(--blueprint-soft);
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.key dl {
  margin: 0;
}

.key dl > div {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--rule);
}

.key dl > div:last-child {
  border-bottom: 0;
}

.key dt {
  display: flex;
  align-items: center;
}

.key dd {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

.sw {
  display: block;
  width: 100%;
  height: 9px;
}

.sw--solid {
  border-top: 1px solid var(--accent);
}

.sw--dashed {
  border-top: 1px dashed var(--accent);
}

.sw--hatch {
  height: 10px;
  border: 1px solid var(--rule);
  background-image: repeating-linear-gradient(
    45deg,
    rgba(194, 65, 12, 0.16) 0 3px,
    transparent 3px 6px
  );
}

.pill {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--rule);
  color: var(--ink-muted);
  padding: 5px 8px;
  white-space: nowrap;
}

.pill.is-in-progress {
  border-color: rgba(194, 65, 12, 0.4);
  color: var(--signal-deep);
}

.pill.is-completed {
  border-color: var(--ink-faint);
  color: var(--ink);
}

/* Article body -------------------------------------------------------- */

.prose {
  grid-column: 2;
  grid-row: 1;
  max-width: calc(58ch + 2rem);
  margin: 0;
  padding-left: 2rem;
  border-left: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.75;
  counter-reset: sec;
}

.prose h2 {
  position: relative;
  counter-increment: sec;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.35rem, 2.4vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -0.03em;
  margin: 40px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}

/* Section numbers live in the margin, as on a marked-up drawing. */
.prose h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute;
  right: calc(100% + 2.6rem);
  top: 22px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h2:first-child::before {
  top: 3px;
}

.prose h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  margin: 28px 0 8px;
}

.prose p {
  margin: 0 0 16px;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose a {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

.prose a:hover {
  color: var(--accent);
}

.prose ul,
.prose ol {
  margin: 0 0 18px;
  padding-left: 1.15rem;
  color: var(--ink-muted);
}

.prose li {
  margin-bottom: 7px;
}

.prose li::marker {
  color: var(--ink-faint);
}

.prose code {
  font-family: var(--mono);
  font-size: 0.84em;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  padding: 1px 4px;
  color: var(--ink);
}

.prose pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  overflow-x: auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent);
  font-size: 12.5px;
  line-height: 1.65;
}

.prose pre code {
  font-family: var(--mono);
  font-size: inherit;
  background: none;
  border: 0;
  padding: 0;
  white-space: pre;
}

.prose blockquote {
  margin: 0 0 20px;
  padding: 2px 0 2px 18px;
  border-left: 2px solid var(--rule);
  color: var(--ink-muted);
  font-style: italic;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 22px;
  font-size: 0.9rem;
}

.prose th,
.prose td {
  text-align: left;
  padding: 9px 10px;
  border-bottom: 1px solid var(--rule);
}

.prose th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 32px 0;
}

/* Honest footnotes ---------------------------------------------------- */

.source {
  margin: 0;
  padding: 10px 11px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.source__link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}

.source__note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.source__link::after {
  content: ' ↗';
}

/* Pager --------------------------------------------------------------- */

.pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 52px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ink);
}

.pager__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 0;
  text-decoration: none;
  min-width: 0;
}

.pager__link--next {
  text-align: right;
  align-items: flex-end;
}

.pager__link:hover .pager__title {
  color: var(--accent);
}

.pager__label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.pager__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.back {
  margin: 32px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.back a {
  color: var(--ink-muted);
  text-decoration: none;
}

.back a:hover {
  color: var(--accent);
}

/* /work/ hub ---------------------------------------------------------- */

.hub .wrap {
  max-width: 1040px;
}

.hub main {
  padding-top: 44px;
}

.hub h1 {
  font-size: clamp(2.25rem, 5.4vw, 3.5rem);
}

/* Column rules for the head row and every entry, so the labels sit exactly
   over the values they describe. */
.hub {
  --hub-cols: 4rem minmax(0, 1fr) 12rem;
}

.index__head,
.index__link {
  display: grid;
  grid-template-columns: var(--hub-cols);
  gap: 8px 24px;
}

.index__head {
  margin: 44px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.index__head span:last-child {
  text-align: right;
}

.index {
  list-style: none;
  margin: 0;
  padding: 0;
}

.index__row {
  position: relative;
  border-bottom: 1px solid var(--rule);
  transition: background-color 0.16s linear;
}

/* Hover raises the row off the vellum without moving it: a wash of blueprint
   blue plus the drafting mark in the margin. Nothing shifts, so the list stays
   readable while the pointer travels down it. The wash is pointer-only, because
   a tap on a touch screen would otherwise leave the last row tinted. */
@media (hover: hover) {
  .index__row:hover {
    background-color: var(--blueprint-soft);
  }
}

.index__row:focus-within {
  background-color: var(--blueprint-soft);
}

/* A drafting mark in the margin of the row being pointed at. */
.index__row::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.index__row:hover::before,
.index__row:focus-within::before {
  opacity: 1;
}

.index__link {
  align-items: baseline;
  padding: 20px 0 21px;
  text-decoration: none;
}

.index__link:hover .index__title {
  color: var(--accent);
}

.index__num {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--accent);
}

.index__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.index__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  transition: color 0.2s ease;
}

.index__summary {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.index__link .pill {
  justify-self: end;
  align-self: start;
}

/* Footer -------------------------------------------------------------- */

.foot {
  border-top: 1px solid var(--rule);
  padding: 26px 0 40px;
}

.foot__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.foot__inner p {
  margin: 0;
}

.foot__links {
  display: flex;
  gap: 16px;
}

.foot a {
  text-decoration: none;
  color: var(--ink-muted);
}

.foot a:hover {
  color: var(--accent);
}

/* Small screens and paper --------------------------------------------- */

@media (max-width: 1040px) {
  /* The rail stops being a margin and becomes the first thing read, so the
     status of a sheet is never below the writing it qualifies. */
  .case {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: 20px;
  }

  .rail {
    grid-column: 1;
    grid-row: 1;
    position: static;
    max-width: 36rem;
    margin: 0 0 30px;
  }

  .fig {
    margin-left: 0;
    max-width: 40rem; /* matches the single-column prose measure below 1040 */
  }

  .prose {
    grid-column: 1;
    grid-row: 2;
    max-width: 40rem;
    padding-left: 0;
    border-left: 0;
  }

  .prose h2::before {
    position: static;
    display: block;
    margin-bottom: 5px;
  }

  .prose h2:first-child::before {
    top: auto;
  }
}

@media (max-width: 820px) {
  .hub {
    --hub-cols: 3rem minmax(0, 1fr) 9.5rem;
  }

  .index__head,
  .index__link {
    gap: 8px 16px;
  }

  .spec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 20px;
  }

  .index__title {
    font-size: 1.075rem;
  }
}

@media (max-width: 820px) {
  /* Below this width the drawing stops shrinking and starts scrolling: 7.5px
     mono labels are not worth saving a scrollbar for. */
  .fig__scroll svg {
    min-width: 680px;
  }

  .fig__hint {
    display: inline;
  }
}

@media (max-width: 560px) {
  main {
    padding: 36px 0 48px;
  }

  .fig {
    margin-top: 26px;
  }

  .fig__cap,
  .fig__note {
    padding-left: 12px;
    padding-right: 12px;
  }

  .topbar__inner {
    min-height: 64px;
  }

  .crumbs {
    max-width: 55%;
  }

  .index__head {
    display: none;
  }

  /* With the column labels gone, the list needs its own heavy rule so the
     specification block above does not run straight into row 01. */
  .index {
    margin-top: 26px;
    border-top: 1px solid var(--ink);
  }

  .index__link {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    padding: 18px 0 19px;
  }

  .index__link .pill {
    grid-column: 2;
    justify-self: start;
    margin-top: 6px;
  }

  .index__row::before {
    left: -10px;
    top: 12px;
    bottom: 12px;
  }

  .pager {
    grid-template-columns: 1fr;
  }

  .pager__link--next {
    text-align: left;
    align-items: flex-start;
    border-top: 1px solid var(--rule);
    padding-top: 18px;
  }
}

@media print {
  .topbar,
  .pager,
  .back,
  .foot,
  .skip {
    display: none;
  }

  body {
    background: #fff;
    background-image: none;
    color: #000;
    font-size: 11pt;
  }

  .index__row::before {
    display: none;
  }

  /* Paper has no margin rail: the record and its caveat sit above the prose,
     and the section numbers become ordinary labels. */
  .case {
    display: flex;
    flex-direction: column;
    border-top: 0;
    padding-top: 0;
    margin-top: 18px;
  }

  .rail {
    /* Flex order, not DOM order: the record is what a reader wants first on
       paper, and source order keeps the aside after the article on screen. */
    order: -1;
    position: static;
    /* Two columns on paper: the record beside its own caveat and the key, so
       the rail costs one block of height instead of three. */
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: start;
    gap: 10pt 12pt;
    margin: 0 0 22px;
  }

  .rail .record {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .rail .limits {
    grid-column: 2;
    grid-row: 1;
  }

  .rail .key {
    grid-column: 2;
    grid-row: 2;
  }

  .rail .source {
    grid-column: 1 / -1;
  }

  /* The settle animation must not be caught mid-flight by the print snapshot,
     which would render the last cards half-faded. */
  .rail > * {
    animation: none;
  }

  /* Keep a heading with the paragraph it introduces, and stop a single line of
     prose being orphaned at the foot of a sheet. */
  .prose h2,
  .prose h3 {
    break-after: avoid;
  }

  .prose p,
  .prose li {
    orphans: 3;
    widows: 3;
  }

  .index__row {
    break-inside: avoid;
  }

  .prose {
    max-width: none;
    padding-left: 0;
    border-left: 0;
  }

  .prose h2::before {
    position: static;
    display: block;
    color: #000;
  }

  .record,
  .limits,
  .key,
  .source {
    border-color: #999;
    break-inside: avoid;
  }

  /* A figure that splits across pages is worse than a page that ends early. */
  .fig {
    margin-left: 0;
    max-width: none;
    border-color: #999;
    break-inside: avoid;
  }

  .fig svg {
    max-width: 100%;
  }

  /* The scroll affordance is a screen instruction; on paper the drawing is
     already whole. */
  .fig__hint {
    display: none;
  }

  .key__head {
    background: #fff;
    color: #000;
  }

  .limits {
    background-image: none;
  }

  .record__head {
    background: #fff;
    color: #000;
  }

  .prose pre {
    border: 1px solid #999;
    white-space: pre-wrap;
  }

  a {
    text-decoration: none;
    color: #000;
  }
}