/* ═══════════════════════════════════════════════
   chronicle.css
   frontendneeded.com/case-chronicle/

   The whole Case Chronicle wears this one stylesheet: the hub and
   every case page under it. Nothing in here names a case. A case is
   an HTML file and nothing else, which is the point — the next one
   should cost research, not CSS.

   Standalone. The shared /assets/css/styles.css pins the body to
   100vh with overflow:hidden for the golden-ratio shell; this is a
   long-form scrolling document, so the nav, skip link and design
   tokens are ported here instead. Same precedent as Preside by Side.

   A printed record rather than a screen. The ground is warm stock, the
   parties are two spot inks, and every tint multiplies into the paper
   the way ink does instead of glowing on top of it.

   Colour carries the argument: one ink is the moving side, one is the
   answering side, sepia is the court. Nothing else may use those three.
   The two side inks default to red and blue here and a case may restate
   them in its own stylesheet — Depp v. Heard does — but never their jobs:
   left is always the side that filed.
   ═══════════════════════════════════════════════ */

/* ── Fonts ── */

/* Fraunces is self-hosted rather than pulled from the font CDN: the CDN
   build ships without the SOFT and WONK axes, which are the two doing the
   work at display size. This is the full variable cut. Display sizes only,
   and swapped in, so it never blocks the body text.

   It ships with unusual defaults - wght 900, opsz 9, WONK 1 - so every
   axis is named explicitly wherever it is used, rather than left to
   inherit or to arrive through font-weight.

   IBM Plex Sans takes the body, from the font CDN; it was drawn for
   technical and institutional documents, which is the register here.
   JetBrains Mono carries the docket citations, dates and labels. */

/* WOFF2, and cut down to the scripts a party name can actually be set
   in: Latin-1, Latin Extended-A and B, and Latin Extended Additional
   for Vietnamese, plus the punctuation ranges. 765 KB of TrueType
   became 377 KB, which is the largest single thing on any page here.
   All four axes survive the cut — opsz, wght, SOFT and WONK — so the
   font-variation-settings below still have everything they ask for.

   A caption naming a party in Greek, Cyrillic or Han would fall back to
   Georgia for those glyphs. Re-cut the files rather than widen a stack
   if that day comes; the command is in the commit that added them. */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-Italic-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ── Reset ── */

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

/* Both JS-only controls ship with the hidden attribute and are given a
   display by their own rule, which would otherwise win over the user
   agent's [hidden]. Without this they appear for readers with no
   JavaScript, as dead buttons. */
[hidden] { display: none !important; }

/* ── Tokens ── */

:root {
  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── The stock ── */
  --paper: #efe9dc;
  --bg: var(--paper);
  --bg-band: #e7dfcf;
  --bg-deep: #ddd3bf;

  /* ── The ink ──
     Warm near-black rather than pure black: pure black on warm stock
     reads as a screen artefact, not as print.

     The secondary steps are set by contrast against the paper. Alphas
     that read correctly as white over near-black read far weaker as ink
     over stock, and the hierarchy is held by the gaps between these
     four rather than by how faint the faintest one is. */
  --ink: #17140f;
  --ink-2: rgba(23, 20, 15, 0.9);
  --muted: rgba(23, 20, 15, 0.8);
  --faint: rgba(23, 20, 15, 0.66);
  --rule: rgba(23, 20, 15, 0.15);
  --rule-soft: rgba(23, 20, 15, 0.075);

  /* The court's voice, used nowhere else here */
  --court: #6f4a2e;

  /* The two sides */
  --p: #b0302a;
  --p-dim: #8d3830;
  --p-wash: rgba(176, 48, 42, 0.085);
  --p-edge: rgba(176, 48, 42, 0.4);

  --d: #1f4076;
  --d-dim: #35507e;
  --d-wash: rgba(31, 64, 118, 0.085);
  --d-edge: rgba(31, 64, 118, 0.4);

  /* ── The bindings ──
     A fourth family, and the only one here with no argument to carry.
     The two side inks and the court's sepia are spoken for, so the
     volumes on the hub are bound in cloth instead: the stock itself,
     driven down towards the ink. They tell one case from another on a
     shelf and they mean nothing else, which is why they are numbered
     rather than named, and the next case written takes the next one.

     Plain boards for a volume nobody has written yet. */
  --bind-1: #574531;
  --bind-2: #332b21;
  --bind-3: #6d5a42;
  --bind-4: #4a3c2c;
  --bind-5: #5f4a33;
  --bind-6: #3f3427;
  --bind-7: #6c513d;
  --bind-8: #524c3c;
  --bind-plain: #b9ab91;

  /* Lettering pressed into cloth, in the stock's own colour. */
  --stamp: rgba(239, 233, 220, 0.82);
  --stamp-dim: rgba(239, 233, 220, 0.5);

  --wrap: 1180px;
  --gut: 56px;

  /* How far Skip ahead steps aside for Back to top. CSS cannot ask one
     element how wide another is, so the script measures Back to top and
     writes its real width here. This is only the value used for the first
     frame, before that runs. */
  --totop-w: 134px;
  --ctl-gap: 10px;
}

/* ── Base ── */

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

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.66;
  /* 16.5px at the browser's default size, and in rem like nearly every
     other size here, so a reader who has set a larger default gets
     larger body text along with everything else. */
  font-size: 1.03125rem;
  text-rendering: optimizeLegibility;
}

/* ── The tooth of the stock ──
   Fractal noise, multiplied in at almost nothing. It does no work you
   could point at and all of the work that makes the ground read as
   paper rather than as a beige rectangle. Above the exhibit wash so the
   whole plate shares one grain, below the nav so the nav stays crisp. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media print {
  body::after { display: none; }
}

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.mono {
  font-family: var(--mono);
  font-size: 0.86em;
  letter-spacing: -0.01em;
}

::selection {
  background: rgba(111, 74, 46, 0.24);
  color: var(--ink);
}

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

/* ── Nav (ported from the shared shell) ── */

.site-nav {
  background: var(--bg-deep);
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--p-edge),
      rgba(111, 74, 46, 0.4), var(--d-edge), transparent) 1;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  gap: 28px;
  height: 44px;
  position: sticky;
  top: 0;
  z-index: 200;
}

.site-nav a {
  color: rgba(23, 20, 15, 0.62);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav a:hover,
.site-nav a.active { color: var(--ink); }

/* Hire Me sits apart from the site links rather than beside them. Targeted by
   href so it works wherever it falls in the bar. */
.site-nav a[href="/hire-me"] { margin-left: auto; }

.site-nav .nav-home { color: var(--court); margin-right: 8px; }
.site-nav .nav-home:hover { color: var(--ink); }

/* The Chronicle's mark, and the way back to the hub from every page
   here. The shared shell has nothing in the middle of the bar, so it
   is set in the dead middle of it, whatever stands either side. The
   drawing is mark.svg; the Restricted Section's pages point at
   mark-night.svg instead, since their bar is dark. In the markup it
   comes just before Hire Me, which is where a keyboard reaches it. */
.site-nav .nav-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: 27px;
  transition: opacity 0.2s;
}

.site-nav .nav-mark img { display: block; height: 100%; width: auto; }

.site-nav .nav-mark:hover { opacity: 0.74; }

/* On a phone the links run into the middle of the bar, so the mark
   goes back into the row and takes the middle of what is left between
   NFL and Hire Me. At 320 wide that is still 21px clear either side.
   It is a little shorter from 900 down, with the bar; see the foot of
   this file. */
@media (width <= 620px) {
  .site-nav .nav-mark { position: static; translate: none; margin-inline: auto; }
  .site-nav .nav-mark + a[href="/hire-me"] { margin-left: 0; }
}

.nav-dropdown { position: relative; display: flex; align-items: center; height: 100%; }

.nav-dropdown-toggle {
  color: rgba(23, 20, 15, 0.62);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: default;
  transition: color 0.2s;
}

.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--ink); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-deep);
  border-top: 1px solid var(--rule);
  box-shadow: 0 6px 18px rgba(23, 20, 15, 0.11);
  min-width: 160px;
  padding: 6px 0;
  z-index: 100;
}

.nav-dropdown-menu a {
  display: block;
  padding: 9px 18px;
  white-space: nowrap;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { display: block; }

.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.15s;
}

.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════
   Masthead
   ═══════════════════════════════════════════════ */

.masthead {
  position: relative;
  padding: 128px 0 88px;
  overflow: hidden;
  border-bottom: 1px solid var(--rule);
}

/* ── a book in each top corner ──
   Every masthead used to open on two pools of the side colours. None
   does now. A case page has a card for each side in those corners (see
   "The two sides"), the chronology's has nothing there, and the hub and
   the other three views' pages have this: the same drawing in each corner, a
   book lying open, turned so its head is in the corner and its pages
   open towards the middle of the page, with the corner itself cutting
   off the far half. Line only, in the court's ink at about a fifth of
   it, the strength of a watermark. The two are one drawing turned
   opposite ways, so the pair is symmetrical about whatever stands
   between them.

   masthead-books asks for the pair. The drawing is a file of its own
   beside this one, for the reason the doors are: most pages never show
   it. Each is placed by its own middle, slid up and out so the middle
   of the book lies a little inside the corner, and then turned. */
.masthead-books::before,
.masthead-books::after {
  content: '';
  position: absolute;
  top: 0;
  width: clamp(150px, 17vw, 250px);
  aspect-ratio: 4 / 3;
  background: url('/case-chronicle/book-open.svg') center / contain no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

.masthead-books::before { left: 0; translate: -17% -22%; rotate: -38deg; }
.masthead-books::after { right: 0; translate: 17% -22%; rotate: 38deg; }

/* On a phone a title runs nearly the width of the window, so the two
   books are partly behind it. Smaller and fainter there. */
@media (width <= 620px) {
  .masthead-books::before,
  .masthead-books::after { width: 128px; opacity: 0.14; }
}

@media print {
  .masthead-books::before,
  .masthead-books::after { content: none; }
}

.masthead .wrap { position: relative; }

/* The way back up to the Chronicle. Set in the eyebrow's own mono at the
   same size, a step lighter, so it reads as a label on the masthead rather
   than a second line of it. */
.crumb {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.crumb a {
  color: var(--faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color 0.15s, border-color 0.15s;
}

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

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 30px;
}

/* Fraunces is cut for its size rather than scaled to it, so opsz is set
   per use. WONK swaps in the angled alternates, and is only earned at
   display size; at heading size and below the axis is off. */
.masthead-title {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  font-size: clamp(3.2rem, 10vw, 7.2rem);
  line-height: 0.94;
  letter-spacing: -0.018em;
  margin-bottom: 30px;
}

.masthead-title em {
  font-variation-settings: 'opsz' 144, 'SOFT' 14, 'WONK' 1;
  font-style: italic;
  color: var(--court);
  font-size: 0.62em;
  padding: 0 0.1em;
  vertical-align: 0.06em;
}

.masthead-lede strong { color: var(--ink); font-weight: 500; white-space: nowrap; }

.masthead-lede {
  font-size: clamp(1.06rem, 1.9vw, 1.34rem);
  line-height: 1.56;
  color: var(--ink-2);
  max-width: 40em;
}

.docket-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 60px;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
}

.docket-meta > div {
  padding-right: 46px;
  margin-right: 46px;
  border-right: 1px solid var(--rule-soft);
}

.docket-meta > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }

.docket-meta dt {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
}

.docket-meta dd {
  font-size: 0.94rem;
  color: var(--ink-2);
  white-space: nowrap;
}

.pip {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: 1px;
}

.pip-open {
  background: var(--court);
  box-shadow: 0 0 0 3px rgba(111, 74, 46, 0.2);
}

/* A case the court has finished with. Hollow rather than filled: the
   same mark, spent. */
.pip-closed { box-shadow: inset 0 0 0 1.5px var(--faint); }

/* Nothing written here yet. No ring — it is not a state of the case, it
   is a state of this page. */
.pip-soon { background: var(--rule); }

/* ═══════════════════════════════════════════════
   Opening and shutting

   A side's card, a card in the flow, a card in the chronology and a
   drawer in the ledger all open for more, and two buttons open a whole
   section at once. All six wear one mark, a + that becomes a −, and
   two of them share a button. Both are set here, ahead of every
   section that uses them, and a section restates only what it changes.
   ═══════════════════════════════════════════════ */

/* ── the mark ──
   Two bars in a square. The upright one turns away when the thing it
   stands on is open. --mark is its ink: the court's, unless a section
   says otherwise. */
.party-more-i,
.tl-more-i,
.cf-more-i,
.da-i,
.dw-i {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
}

:is(.party-more-i, .tl-more-i, .cf-more-i, .da-i, .dw-i)::before,
:is(.party-more-i, .tl-more-i, .cf-more-i, .da-i, .dw-i)::after {
  content: '';
  position: absolute;
  background: var(--mark, var(--court));
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

:is(.party-more-i, .tl-more-i, .cf-more-i, .da-i, .dw-i)::before { inset: 3.5px 0; }
:is(.party-more-i, .tl-more-i, .cf-more-i, .da-i, .dw-i)::after { inset: 0 3.5px; }

.party.is-open .party-more-i::after,
.tl-c.is-open .tl-more-i::after,
.cf-card.is-open > .cf-more .cf-more-i::after,
.cf-card.is-open > .cf-own > .cf-more .cf-more-i::after,
.cf-part.is-open > .cf-more .cf-more-i::after,
.depth-all.is-open .da-i::after,
.drawer[open] > summary .dw-i::after { transform: scaleY(0); opacity: 0; }

/* ── the button ──
   "More", with the mark ahead of it. One button for a side's card and
   for a card in the chronology, so a reader who has met one knows the
   other. */
.party-more,
.tl-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  padding: 6px 12px 6px 10px;
  border: 1px solid var(--tl-edge);
  border-radius: 2px;
  background: none;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}

.party-more:hover,
.tl-more:hover {
  border-color: rgba(23, 20, 15, 0.34);
  background: rgba(23, 20, 15, 0.045);
  color: var(--ink);
}

/* ═══════════════════════════════════════════════
   The two sides

   A case page opens on who is in the case. In the top corners of its
   masthead there is a card for each side: who they are, and what they were
   known for before any of this. Left is the side that filed, as it is
   everywhere else on the page, and the title stands between the two
   the way its own "v." does.

   masthead-case goes on the masthead of a case page and nowhere else.
   The chronology's page carries the same two cards beside the first
   entry on its rail, and the rules that stand them there are with the
   chronology's own.

     mh           the frame: the title block and a column for each side
     mh-main      crumb, court, title, and on a case page the lede and
                  the docket line
     mh-side      one side's column; mh-side-p filed, mh-side-d answers
     party        the card; party-p and party-d ink it
     party-role   which side this is, and under it what that word means
     party-name   who it is, as the filings name them
     party-what   what they are, in a line
     party-more   the control that opens the rest
     party-x      the rest: party-b, the paragraph, and party-src,
                  where the paragraph comes from

   A card is shut to its name and its one line, and opens for the rest,
   the way a card in the flow or the chronology does and by the same
   means: the rest ships open and the control ships hidden, and the
   script shuts one and shows the other.

   The card is the index card the flow and the chronology use, and it
   takes a z-index for the reason theirs do: the exhibit wash lies over
   the whole page at 3, and these stand in the margins it runs down.

   The title block comes first in the markup and the cards after it, so
   a screen reader and a narrow window both get the case before the
   parties. Only the wide layout sets the left card ahead of the title.
   ═══════════════════════════════════════════════ */


.mh {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "main main"
    "p d";
  gap: 52px 28px;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.mh-main { grid-area: main; min-width: 0; }
.mh-side-p { grid-area: p; }
.mh-side-d { grid-area: d; }

.party {
  position: relative;
  z-index: 3;
  padding: 17px 20px 15px;
  border: 1px solid var(--tl-edge);
  border-top: 3px solid var(--party);
  border-radius: 3px;
  background: var(--tl-card);
  box-shadow: var(--tl-lift);
}

/* Side by side under the title the two cards are one height while both
   are shut, whichever has the longer name. Once one is opened each is
   as tall as its own text, and in the corners they always are. */
@media (720px < width < 1200px) {
  .mh:not(:has(.party.is-open)) .party { height: 100%; }
}

.party-p { --party: var(--p); --party-ink: var(--tl-p-ink); }
.party-d { --party: var(--d); --party-ink: var(--tl-d-ink); }

.party-role {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--party-ink);
}

/* The word is a court's word, so the card says what it means in the
   next breath rather than sending the reader to the glossary for it. */
.party-role span {
  display: block;
  margin-top: 1px;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}

.party-name {
  margin-top: 13px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 40, 'SOFT' 0, 'WONK' 0;
  font-size: 1.62rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.016em;
  text-wrap: balance;
  color: var(--ink);
}

.party-what {
  margin-top: 4px;
  font-size: 0.84rem;
  line-height: 1.4;
  color: var(--muted);
}

/* The control is the chronology's own "More" (see "Opening and
   shutting"). Its mark takes the side's ink. */
.party-more-i { --mark: var(--party); }

/* Shut, the rest is hidden as well as collapsed, which takes it and
   its links out of the way of a keyboard and a screen reader. */
.party.js-collapse .party-x { display: grid; grid-template-rows: 0fr; }
.party.js-collapse .party-x-in { overflow: hidden; min-height: 0; opacity: 0; visibility: hidden; }
.party.js-collapse.is-open .party-x { grid-template-rows: 1fr; }
.party.js-collapse.is-open .party-x-in { opacity: 1; visibility: visible; }

/* Armed after the collapse, so the first close does not animate. */
.party.js-anim .party-x { transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.party.js-anim .party-x-in { transition: opacity 0.16s ease, visibility 0s linear 0.34s; }
.party.js-anim.is-open .party-x-in { transition: opacity 0.28s ease 0.1s, visibility 0s; }

/* The whole of a card is a place to press, as it is in the flow. */
.party.js-collapse { cursor: pointer; }

.party-b {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-2);
}

.party-src {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--faint);
}

.party :focus-visible { outline-color: var(--court); }

/* Wide enough for a column down each side of the title. The cards go
   to the top corners, which is where the pools were, and the title
   block is set to the middle between them. The title is sized off its
   own column from here on, since the window no longer says how much
   room it has. The lede stays ranged left under it: it runs to a
   hundred words on some cases, and that many lines centred is a
   shape, not a paragraph. */
@media (width >= 1200px) {
  .masthead-case { padding: 76px 0 84px; }

  .mh {
    --mh-side: clamp(252px, 21vw, 322px);

    grid-template-columns: var(--mh-side) minmax(0, 1fr) var(--mh-side);
    grid-template-areas: "p main d";
    gap: 0 clamp(32px, 3.4vw, 62px);
    align-items: start;
    max-width: 1700px;
    padding: 0 clamp(28px, 3vw, 52px);
  }

  .mh-main {
    container-type: inline-size;
    text-align: center;
  }

  .masthead-case .masthead-title {
    font-size: clamp(3.2rem, 13.4cqi, 7.2rem);
    text-wrap: balance;
  }

  .masthead-case .masthead-lede {
    max-width: 33em;
    margin-inline: auto;
    text-align: left;
  }

  .masthead-case .eyebrow { text-wrap: balance; }

  /* Four entries have to share a column now rather than the page, so
     the space between them comes off the column as well. */
  .masthead-case .docket-meta { justify-content: center; }

  .masthead-case .docket-meta > div {
    padding-right: clamp(18px, 3.6cqi, 46px);
    margin-right: clamp(18px, 3.6cqi, 46px);
  }

  .masthead-case .docket-meta > div:last-child { margin-right: 0; padding-right: 0; }
}

@media (width <= 720px) {
  .mh {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "p"
      "d";
    gap: 18px;
  }

  .mh-main { margin-bottom: 22px; }
}

/* masthead-plain is the chronology's masthead, which has nothing in its
   corners: its two sides stand at the head of its rail instead. Its
   title is ranged left, as every other view's is. */

@media (prefers-reduced-motion: reduce) {
  .party-x,
  .party-x-in,
  .party-more-i::before,
  .party-more-i::after { transition: none !important; }
}

/* On paper a card is open, and nothing on it is a control. */
@media print {
  .party { box-shadow: none; break-inside: avoid; }
  .party-more { display: none; }
  .party.js-collapse .party-x { grid-template-rows: 1fr; }
  .party.js-collapse .party-x-in { opacity: 1; visibility: visible; }
}

/* ── A section that has not been written yet ──
   Every case page ships its whole skeleton from the first commit, so the
   shape of the argument is reviewable before a word of research lands.
   A pending section states what will fill it. That is more useful than
   an empty band and more honest than a spinner, and it costs the reader
   one line to find out where they stand. */
.pending {
  margin-top: 44px;
  padding: 44px 48px;
  border: 1px dashed var(--rule);
  background: rgba(23, 20, 15, 0.014);
}

.pending-l {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 14px;
}

.pending-t {
  max-width: 62ch;
  color: var(--muted);
}

.pending-t + .pending-t { margin-top: 12px; }

@media (width <= 720px) {
  .pending { padding: 32px 26px; }
}

/* ═══════════════════════════════════════════════
   The hub — its masthead

   Short on purpose. The shelf is what this page is for, and it should
   be on the screen when the page opens, so the masthead is the title
   and one line under it, both set to the middle, and nothing else.

     masthead-hub  on the hub's masthead and nowhere else
     hub-head      the title, and the motto under it
     hub-motto     the one line: what all of this is for
     clock-o       the "o" in Chronicle, which is a clock

   The two top corners hold the open book every unclaimed corner in the
   Chronicle does; masthead-books, further up, draws the pair.
   ═══════════════════════════════════════════════ */

/* Two classes, so the narrow-window padding every masthead is given at
   the foot of this file does not win over this one. */
.masthead.masthead-hub { padding: 52px 0 44px; }

/* The first band gives a little back as well, for the same reason. */
.masthead-hub + .band { padding-top: 76px; }

.hub-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.masthead-hub .masthead-title { margin-bottom: 0; }

/* The letter stays where it is and gives the clock its room; only its
   ink is taken away. The clock is a little taller than the lowercase,
   since a dial that small would not read as one, and it is set about
   the middle of the lowercase so it runs over by the same amount above
   and below. The offset is this face's: its baseline lies 0.115em above
   the foot of the box at the title's line height. */
.clock-o {
  position: relative;
  display: inline-block;
  margin: 0 0.05em 0 0.035em;
  color: transparent;
}

.clock-o svg {
  position: absolute;
  left: 50%;
  bottom: 0.068em;
  width: 0.54em;
  height: 0.54em;
  translate: -48% 0;
  overflow: visible;
  fill: none;
  stroke: var(--court);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clock-rim { stroke-width: 7.2; }
.clock-hands { stroke-width: 4.6; }

/* The motto, set the way a title page sets one: the display face's
   italic, small, under the title. The last word is the whole point of
   the sentence, so it is the one word in roman and in full ink. */
.hub-motto {
  max-width: 34em;
  font-family: var(--display);
  font-style: italic;
  font-variation-settings: 'opsz' 30, 'SOFT' 40, 'WONK' 0;
  font-size: clamp(1.1rem, 1.7vw, 1.46rem);
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.004em;
  text-wrap: balance;
  color: var(--muted);
}

.hub-motto strong {
  font-style: normal;
  font-weight: 600;
  font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0;
  color: var(--ink);
}

@media (width <= 900px) {
  .masthead.masthead-hub { padding: 42px 0 34px; }
  .masthead-hub + .band { padding-top: 56px; }
}

@media (width <= 620px) {
  .hub-head { gap: 12px; }
}

/* ═══════════════════════════════════════════════
   The hub — a shelf, and the plate that goes with it

   One binding per case, the name stamped up the spine, and one plate:
   a box off the shelf that fills with whichever volume the reader is
   pointing at, and holds a line about all of them when the reader is
   pointing at none. There is no catalogue under the shelf to say it
   again, so the plate is the only place a case is described and it
   has to be reachable every way a volume is: by the pointer, by the
   Tab key, and by a finger, which chronicle.js gives a first tap to
   (is-picked, below).

   The plate is off the board. Where there is room it stands on the
   wall beside the shelf, level with the heads of the volumes; where
   there is not, it goes under the shelf, the width of the shelf. It is
   never above it: the shelf is what this page is for and nothing is
   put in its way.

   Every plate is a child of its own volume rather than a sibling of
   the others, so lighting one is .bk:hover .bk-plate and no rule in
   here ever counts the cases. The price is that the plates cannot
   share a grid cell and size it between them, so each is placed over
   the one box by arithmetic, and under the shelf that box is a fixed
   height instead of the tallest plate's. That is a worse look than a
   cell that sizes itself and a better trade: the numbers are in one
   place and the stylesheet never has to learn there is a sixth case.

   A case nobody has written yet still gets its volume, bound in plain
   boards and lettered in ink rather than stamped, because an empty
   shelf mark is more honest than a shelf that pretends to be full.
   The board runs on past the last of them for the same reason, by
   about the width of one more, and stops there.

   All of that is a shelf of five with its plate off to one side, and
   the Restricted Section's is still that. The hub's own shelf holds
   ten, which leaves no wall beside it, so its plate goes over the
   shelf instead: "Ten volumes", below, says how, and what it does on a
   screen too narrow for ten.

   The Restricted Section stands its plate on the board the way this
   shelf used to, and restates those rules in its own sheet.
   ═══════════════════════════════════════════════ */

/* One column, as wide as the rail and no wider than the page, with
   the plate under the rail, until there is room for two. The air above
   is for the volume that is lifted off the board.

   A container, so that a plate, which hangs from the rail and knows
   only the rail's width, can be told how wide the whole shelf is. */
.shelf {
  --plate-gap: 34px;    /* board to plate, when the plate is underneath */
  --board: 15px;        /* how thick the board is */

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, max-content);
  margin-top: 44px;
  container-type: inline-size;
}

/* The box the plates are placed over, and where the resting line
   lives. Under the shelf it holds the room the longest entry needs, so
   the notes below do not move as entries of different lengths swap
   through it.

   No width of its own and then all of the column's: a paragraph asked
   how wide it would like to be says one long line, and the column is
   the rail's to size. */
.shelf-plate {
  grid-row: 2;
  width: 0;
  min-width: 100%;
  margin-top: calc(var(--board) + var(--plate-gap));
  min-height: 236px;
}

.plate-rest,
.bk-plate {
  transition: opacity 0.34s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Five of these lie on top of each other here and four are transparent
   at any moment, so none of them may take the pointer — without this
   the last one in the markup would answer for the whole box. Hung from
   the rail, whose foot is the top of the board. */
.bk-plate {
  position: absolute;
  top: calc(100% + var(--board) + var(--plate-gap));
  left: 0;
  right: 0;
  max-width: 46em;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.bk-plate-court {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

/* The binding quoted into the plate: the one mark that says which
   volume on the rail is doing the talking. */
.bk-plate-court::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 11px;
  vertical-align: -1px;
  background: var(--bind);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.35),
              inset 1px 0 0 rgba(255, 255, 255, 0.14);
}

/* The name, the right way up. A spine is read with the head tilted,
   and this is the one line that says for certain which volume the
   plate is talking about. */
.bk-plate-n {
  display: block;
  margin-top: 7px;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.7rem, 3.1vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.bk-plate-n em { font-style: italic; font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1; }

/* Not written yet, and set back the way its volume is. */
.bk-unbound .bk-plate-n { color: var(--muted); }

.bk-plate-t {
  display: block;
  margin-top: 11px;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.66;
  color: var(--ink-2);
}

.bk-plate-s {
  display: block;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--faint);
}

/* The way through, for a reader who picked the volume with a finger and
   so has not gone anywhere yet. A pointer never sees it: a click on the
   volume has already gone, and the plate cannot be reached to click. */
.bk-plate-go {
  display: none;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--court);
}

.bk:hover .bk-plate,
.bk:focus-visible .bk-plate,
.bk.is-picked .bk-plate {
  opacity: 1;
  transform: none;
  transition-delay: 0.06s;
}

/* Picked, the plate is part of its link and takes the second tap. */
.bk.is-picked .bk-plate { pointer-events: auto; }
.bk.is-picked .bk-plate-go { display: block; }

/* A screen that takes both a finger and a pointer can have one volume
   picked and another pointed at. The pointer is the newer of the two. */
.shelf-rail:has(.bk:hover) .bk.is-picked:not(:hover) .bk-plate,
.shelf-rail:has(.bk:focus-visible) .bk.is-picked:not(:focus-visible) .bk-plate {
  opacity: 0;
  pointer-events: none;
}

/* The section's own lede is the rail's resting voice. It steps aside
   for a volume and comes back when the pointer leaves. */
.shelf:has(.bk:hover) .plate-rest,
.shelf:has(.bk:focus-visible) .plate-rest,
.shelf:has(.bk.is-picked) .plate-rest {
  opacity: 0;
  transform: translateY(-6px);
}

/* ── the rail ── */

/* Positioned, and the plates hang from it: each one is pinned to the
   rail's own top edge, which is the line they all have to meet. */
.shelf-rail {
  position: relative;
  grid-row: 1;
  display: flex;
  align-items: flex-end;
  gap: 7px;
  /* The right-hand one is the board running on, and it is the first
     thing to give when the volumes need the whole width of a phone. */
  padding: 0 calc(62px * var(--bk-scale, 1)) 0 14px;
  max-width: 100%;
}

/* The board. Drawn under the volumes rather than behind them: the
   shadow they drop onto it is the part that says they are standing on
   something instead of pasted to the page. */
.shelf-rail::after,
.shelf-tiers > .shelf-rail::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--board) * -1);
  height: var(--board);
  background: linear-gradient(180deg, #c9bda4 0, #ab9c80 42%, #8e7f66 100%);
  box-shadow: 0 14px 26px rgba(23, 20, 15, 0.24),
              inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Every rail has the one under it. A second, over it, is only drawn
   where "Ten volumes" stands the tiers one over the other. */
.shelf-rail::after { content: ''; }

/* Width and height are a case's own business and arrive from its markup.
   --bk-scale is the rail's, so a narrow screen can shrink the whole set
   without the stylesheet knowing any volume's measurements. */
.bk {
  flex: 0 0 auto;
  width: calc(var(--bk-w) * var(--bk-scale, 1));
  height: calc(var(--bk-h) * var(--bk-scale, 1));
  text-decoration: none;
  color: inherit;
}

.sp {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 17px 0 14px;
  background-color: var(--bind);
  /* The round of the spine. A flat rectangle reads as a card; the same
     rectangle with the light falling away at both edges reads as a
     cylinder of bound paper, and this one gradient does more work than
     everything else in this block put together. */
  background-image: linear-gradient(90deg,
      rgba(0, 0, 0, 0.34) 0,
      rgba(0, 0, 0, 0.06) 9%,
      rgba(255, 255, 255, 0.085) 33%,
      rgba(255, 255, 255, 0.05) 58%,
      rgba(0, 0, 0, 0.09) 84%,
      rgba(0, 0, 0, 0.36) 100%);
  box-shadow: 0 10px 20px rgba(23, 20, 15, 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.1),
              inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}

/* The raised bands, where the cords run under the cloth. Head and tail
   only: a band every inch would be a fifteenth-century binding and this
   is meant to read as a law reporter. */
.sp::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  height: 70%;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0 1px,
      rgba(255, 255, 255, 0.13) 1px 5px,
      rgba(0, 0, 0, 0.26) 5px 6px, transparent 6px) top / 100% 100% no-repeat,
    linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px,
      rgba(255, 255, 255, 0.13) 1px 5px,
      rgba(0, 0, 0, 0.26) 5px 6px, transparent 6px) bottom / 100% 100% no-repeat;
}

/* The tooth of the cloth — the same idea as the stock's grain, overlaid
   rather than multiplied because it has to lighten as well as darken. */
.sp::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
}

.sp-head,
.sp-vol { position: relative; z-index: 2; }

.sp-name {
  position: relative;
  z-index: 2;
  writing-mode: sideways-lr;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  /* Stamped at the size the volume is actually printed at, so a rail
     shrunk to fit a phone keeps its proportions. */
  font-size: calc(1.1rem * var(--bk-scale, 1));
  letter-spacing: 0.01em;
  /* A name too long for one line takes two, which is what a binder
     does with it. In sideways-lr the inline axis is the height of the
     spine and lines stack across its width, so shrinking lets it wrap
     and min-height: 0 is what allows a flex item to be shrunk below
     its own content in the first place. Read with the head tilted
     left, the leftmost line is the upper one — the right way round.
     Lines are balanced rather than filled: two even lines read better
     on a spine than a full one above a single word. */
  white-space: normal;
  text-align: center;
  text-wrap: balance;
  flex: 0 1 auto;
  min-height: 0;
  /* The binder's rule, and the thing that actually decides it: no stamp
     runs more than this much of the spine it is on. Without a ceiling a
     long name only wraps once it has run out of spine, which is far too
     late — it reads as a thin stripe of lettering beside names half its
     length. With one, anything long enough to look wrong takes two
     lines and the rail stamps evenly. A proportion rather than a
     measurement, so it holds on any volume and names no case. */
  max-block-size: 100%;
  max-inline-size: 56%;
  color: var(--stamp);
  /* Blind-stamped rather than foiled: pressed into the cloth, so the
     light catches below the stroke and the shadow sits above it. Gold
     would be a fifth colour and a louder claim than this page makes. */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45),
               0 -1px 0 rgba(255, 255, 255, 0.1);
}

.sp-name em {
  font-style: italic;
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 1;
}

/* Safari only learned sideways-lr in 18.4. The fallback is the same
   letters turned the same way round, by the long road. */
@supports not (writing-mode: sideways-lr) {
  .sp-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

.sp-vol {
  font-family: var(--mono);
  font-size: calc(0.64rem * var(--bk-scale, 1));
  letter-spacing: 0.14em;
  color: var(--stamp-dim);
}

/* The pips are drawn for ink on stock. On cloth they have to invert. */
.sp .pip-open {
  background: rgba(239, 233, 220, 0.8);
  box-shadow: 0 0 0 3px rgba(239, 233, 220, 0.2);
}

.sp .pip-closed { box-shadow: inset 0 0 0 1.5px var(--stamp-dim); }

/* Off the shelf far enough to see it move, not far enough to leave the
   board. */
.bk:hover .sp,
.bk:focus-visible .sp,
.bk.is-picked .sp { transform: translateY(-15px); }

.bk:focus-visible { outline: none; }

.bk:focus-visible .sp {
  outline: 2px solid var(--court);
  outline-offset: 4px;
}

/* Not written yet. Plain boards, and lettered in ink rather than
   stamped into them, because there is nothing bound inside to stamp. */
.bk-unbound .sp {
  box-shadow: 0 6px 14px rgba(23, 20, 15, 0.1),
              inset 0 1px 0 rgba(255, 255, 255, 0.18),
              inset 0 -1px 0 rgba(0, 0, 0, 0.14);
}

.bk-unbound .sp-name {
  color: rgba(23, 20, 15, 0.46);
  text-shadow: none;
}

.bk-unbound .sp-vol { color: rgba(23, 20, 15, 0.32); }

.bk-unbound .sp .pip-closed {
  box-shadow: inset 0 0 0 1.5px rgba(23, 20, 15, 0.38);
}

/* A case still in court, on a volume nobody has written. The same mark
   in the same ink as the lettering, since the pale one is for cloth. */
.bk-unbound .sp .pip-open {
  background: rgba(23, 20, 15, 0.46);
  box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.1);
}

/* ── the plate, once there is room beside the shelf ──

   The plate takes the rest of the row: on the wall, its first line a
   little under the head of the tallest volume. Set from the top down,
   so the name is in the same place whichever volume is asked for.

   A plate hangs from the rail, so its left edge is the rail's width
   plus the gap, and its own width is what the shelf has left: the
   whole of it (100cqi), less the rail (100%), less the gap. */

@media (width >= 1024px) {

  .shelf {
    --plate-gap: 68px;    /* board end to plate, when the plate is beside */
    --plate-top: 26px;

    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--plate-gap);
  }

  .shelf-plate {
    grid-row: 1;
    grid-column: 2;
    width: auto;
    min-width: 0;
    margin-top: 0;
    min-height: 0;
    padding-top: var(--plate-top);
  }

  .bk-plate {
    top: var(--plate-top);
    left: calc(100% + var(--plate-gap));
    right: auto;
    width: calc(100cqi - 100% - var(--plate-gap));
    max-width: none;
  }
}

/* ── the rail, narrowed ──
   And the room held under it, which has to grow as the lines get
   shorter and an entry takes more of them. */

@media (width <= 1080px) {
  .shelf-rail { --bk-scale: 0.88; }
}

@media (width <= 860px) {
  .shelf-rail { --bk-scale: 0.78; }
}

@media (width <= 620px) {
  .shelf { --plate-gap: 30px; margin-top: 36px; }
  .shelf-plate { min-height: 264px; }
  .shelf-rail { --bk-scale: 0.62; gap: 5px; padding-left: 8px; }
}

@media (width < 390px) {
  .shelf-plate { min-height: 320px; }
}

/* The narrowest phones: one more step down, or the fifth volume is off
   the end of the board. */
@media (width <= 350px) {
  .shelf-rail { --bk-scale: 0.52; }
}

/* ── ten volumes ──

   The hub's shelf. shelf-tiers on it says its rail holds two tiers of
   five: ten volumes, which is as many as stand on one board at the
   size a volume is, with nothing beside them.

   From 1024px up a tier is not a box at all. Its volumes stand on the
   rail as if it were not there, ten to the one board, and since a
   shelf that long leaves no wall beside it, the plate goes over it. It
   is the same box doing the same thing: the line about all of them
   rests in it, and it fills with whichever volume is pointed at. It is
   as wide as the shelf, and an entry is set across that width so that
   it stays low: the court and the state of the case along the top, the
   name on the left, what the case is about on the right. The box is
   held at the height of the longest entry, so the shelf does not move
   as entries swap through it, and every entry is set from its top.

   Under 1024px ten will not fit, and the tiers are boxes, one over the
   other, with a board each. Two boards share one plate, and there it
   goes between them, not over both or under both. Either way a reader
   on a phone who taps a volume on the far board gets a plate that is
   off the screen. Between them it is next to whichever volume was
   asked for.

   The tiers are never positioned, so a plate always hangs from the one
   rail and the script always listens to it. With two boards the rail
   makes its rows the same height, which puts the middle of the gap
   between them at the middle of the rail, and the upper board, the
   resting line and the plate are all placed from that. The gap is the
   room held for the longest plate with the same air on either side.
   The lower board is the rail's own, as it always was. The upper one
   is drawn where the first tier ends, and it sits over the volumes'
   own shadows the way the lower one does, which it would not by its
   place in the markup. */

.shelf-tiers {
  --plate-h: 236px;     /* the room held for the longest plate */
  --tier-gap: calc(var(--plate-h) + 2 * (var(--board) + var(--plate-gap)));
}

/* Named a column, because the resting line is put in the same cell
   and the rail would otherwise be moved along to the next free one. */
.shelf-tiers > .shelf-rail {
  grid-column: 1;
  display: grid;
  grid-template-columns: minmax(0, max-content);
  grid-auto-rows: 1fr;
  gap: var(--tier-gap) 0;
  padding: 0;
}

.shelf-tier {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  padding: 0 calc(62px * var(--bk-scale, 1)) 0 14px;
}

.shelf-tiers > .shelf-rail::before {
  content: '';
  top: calc(50% - var(--tier-gap) / 2);
  bottom: auto;
  z-index: 1;
}

/* The resting line shares the rail's cell and is centred in it, which
   is the middle of the gap. A plate is hung from the rail at the same
   height. */
.shelf-tiers > .shelf-plate {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
  min-height: var(--plate-h);
  margin-top: 0;
}

.shelf-tiers .bk-plate { top: calc(50% - var(--plate-h) / 2); }

@media (width <= 620px) {
  .shelf-tiers { --plate-h: 264px; }
  .shelf-tier { gap: 5px; padding-left: 8px; }
}

@media (width < 390px) {
  .shelf-tiers { --plate-h: 320px; }
}

/* ── one board, and the plate over it ── */

@media (width >= 1024px) {

  /* One column, the whole width of the page: the board runs to the
     edge the plate is set to, so the two end together. */
  .shelf-tiers {
    --plate-h: 88px;
    --plate-gap: 22px;    /* plate to the heads of the volumes */

    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    margin-top: 14px;
  }

  /* The plate costs the shelf its place on the page, so the band gives
     back what it can. */
  .masthead-hub + .band:has(.shelf-tiers) { padding-top: 50px; }

  .shelf-tier { display: contents; }

  .shelf-tiers > .shelf-rail {
    grid-row: 2;
    display: flex;
    gap: 7px;
    padding: 0 calc(62px * var(--bk-scale, 1)) 0 14px;
  }

  .shelf-tiers > .shelf-rail::before { content: none; }

  .shelf-tiers > .shelf-plate {
    align-self: auto;
    width: auto;
    min-width: 0;
    margin: 0 0 var(--plate-gap);
    padding: 0;
  }

  .shelf-tiers .plate-rest { max-width: none; text-wrap: pretty; }

  .shelf-tiers .bk-plate {
    top: calc((var(--plate-h) + var(--plate-gap)) * -1);
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    display: grid;
    grid-template-columns: 20em minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    column-gap: 36px;
  }

  .shelf-tiers .bk-plate-court { grid-column: 1 / span 2; grid-row: 1; }

  .shelf-tiers .bk-plate-s {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    margin-top: 0;
  }

  .shelf-tiers .bk-plate-n {
    grid-column: 1;
    grid-row: 2;
    margin-top: 9px;
    font-size: 1.7rem;
    line-height: 1.16;
  }

  .shelf-tiers .bk-plate-t {
    grid-column: 2 / span 2;
    grid-row: 2 / span 2;
    margin-top: 10px;
    font-size: 0.96rem;
    line-height: 1.56;
  }

  .shelf-tiers .bk-plate-go { grid-column: 1; grid-row: 3; margin-top: 8px; }
}

/* Ten have to fit the page with a scroll bar taken out of it, and on a
   narrower page what a case is about takes a third line. */
@media (1024px <= width < 1180px) {
  .shelf-tiers { --plate-h: 102px; }
  .shelf-tiers > .shelf-rail { --bk-scale: 0.92; }
}

@media (1024px <= width < 1100px) {
  .shelf-tiers > .shelf-rail { --bk-scale: 0.84; }
}

@media (prefers-reduced-motion: reduce) {
  .plate-rest,
  .bk-plate,
  .sp { transition: none; }
  .bk-plate { transform: none; }
  .bk:hover .sp,
  .bk:focus-visible .sp,
  .bk.is-picked .sp { transform: none; }
}

/* On paper there is no pointer and no shelf worth the ink. The volumes
   go, and every plate is set out in turn under the resting line, which
   is the whole of what this page has to say. */
@media print {
  .shelf,
  .shelf-rail { display: block; }
  .shelf-rail { padding: 0; }
  .shelf-rail::after,
  .shelf-tiers > .shelf-rail::before,
  .sp,
  .bk-plate-go { display: none; }
  .shelf-tiers > .shelf-rail,
  .shelf-tier,
  .shelf-tiers .bk-plate { display: block; padding: 0; }
  .shelf-tiers > .shelf-plate { min-height: 0; margin: 0 0 1.6em; }
  .shelf-plate { min-height: 0; margin: 0 0 1.6em; padding: 0; }
  .bk { display: block; width: auto; height: auto; margin-bottom: 1.4em; }
  .bk-plate {
    position: static;
    width: auto;
    opacity: 1;
    transform: none;
  }
}

/* ═══════════════════════════════════════════════
   Four ways in

   A case can be read four ways, and the choice is made once, here, at
   the foot of the masthead: in the order things happened, as the room
   they happened in, as the questions that decide it, or as what each
   side argues set next to the other. Each way gets a doorway of its
   own, and it is the doorway a courthouse gives a courtroom: a pair of
   panelled leaves under a transom, in a wood casing with a pediment
   over it. Four of the same, in a row, because the choices are equal.
   The only thing that tells one from another is the sign in the glass.

   The wood is the hub's binding browns with oil in them, and the brass
   is as far towards gold as this page goes. None of the three working
   inks is used: no view belongs to a side.

   The casing and the leaf are drawings, and they are files of their
   own beside this one rather than more of it. This stylesheet is on
   every page of the Chronicle and only the case pages have doors, so
   eighteen kilobytes of joinery here would be carried by every page
   that never shows it. The server keeps both for a week; if either is
   redrawn, put a version on its URL the way the pages do for this file.

   They do open. A leaf starts to swing under the pointer, far enough
   to let a line of light out, and goes the rest of the way when the
   door is chosen. The script holds the page for the half second that
   takes and no longer.
   ═══════════════════════════════════════════════ */

.doors {
  /* One measure. --dw is the width of a casing and every other length
     in a doorway is a share of it, the way the volumes on the hub hang
     off --bk-scale, so the doorways go from a desk to a phone without
     a rule being restated. It follows whichever is tighter, the
     window's width or its height.

     These are the numbers for a narrow window, where the four stand
     two by two. A pair has to fit side by side on a phone, a doorway
     is held to under two thirds of the window's height so the words
     beneath it are on the screen with it, and it stops growing where
     two rows of them would be most of a page. The row of four, just
     below, restates all of it. --door-n is how many stand in a row. */
  --door-n: 2;
  --dw: clamp(124px, min(39vw, 33vh), 200px);
  /* The casing is drawn 300 by 572. */
  --dh: calc(var(--dw) * 1.9067);
  --door-gap: clamp(18px, 7vw, 96px);
  /* How far the floor runs on past the first and the last doorway of a
     row: a third of a doorway, or as much of that as the window has to
     spare. The eight pixels are a scrollbar's share, which 100vw
     counts as window. */
  --floor-out: max(0px, min(var(--dw) * 0.35, (100vw - var(--dw) * var(--door-n) - var(--door-gap) * (var(--door-n) - 1)) / 2 - 8px));

  padding: 72px 0 64px;
  border-bottom: 1px solid var(--rule);
  /* The wall, a shade deeper towards the floor. */
  background: linear-gradient(180deg, transparent 55%, rgba(23, 20, 15, 0.045));
}

/* From here up there is room for all four in one row. */
@media (width >= 700px) {
  .doors {
    --door-n: 4;
    --dw: clamp(132px, min(18.6vw, 33vh), 232px);
    --door-gap: clamp(14px, 3vw, 60px);
  }
}

.doors-l {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
  text-align: center;
  margin-bottom: 30px;
}

/* A column to a doorway, and four rows that the doorways of a row
   share: the casing, then the three lines of words under it. Each door
   is a subgrid of those rows, so a name or a description that wraps
   under one moves the line below it under all of them, and they stay
   level at any width. Where subgrid is not understood the rows are
   simply each door's own.

   Two by two, the second pair takes four more rows, which the grid
   makes as it needs them.

   Isolated, because the parts of a doorway are stacked by number and
   those numbers are among themselves: none of them is to be weighed
   against the page's own fixed layers. */
.doorway {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(var(--door-n), var(--dw));
  justify-content: center;
  column-gap: var(--door-gap);
}

/* A doorway and, on the Courtroom's, the lock hung over it. */
.door-slot {
  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  min-width: 0;
}

/* The floor. Each doorway draws the line under itself and half way to
   the next, so a row of them stands on one line however many it holds,
   and the shade it throws lies under the line. The first and the last
   of a row run the line on a little and out to nothing. Which those
   are depends on how many stand in a row, so that is said once for
   each arrangement below.

   The four numbers are how far the line runs past the doorway on each
   side, and over how much of its length at each end it fades. */
.doorway > .door-slot {
  --floor-l: calc(var(--door-gap) / 2);
  --floor-r: calc(var(--door-gap) / 2);
  --fade-l: 0px;
  --fade-r: 0px;
}

.doorway > .door-slot::before {
  content: '';
  position: absolute;
  top: var(--dh);
  left: calc(var(--floor-l) * -1);
  right: calc(var(--floor-r) * -1);
  height: calc(var(--dw) * 0.1);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 20, 15, 0), rgba(23, 20, 15, 0.5) var(--fade-l), rgba(23, 20, 15, 0.5) calc(100% - var(--fade-r)), rgba(23, 20, 15, 0))
      top / 100% 1px no-repeat,
    radial-gradient(ellipse calc(var(--dw) * 0.8) 100% at calc(var(--floor-l) + var(--dw) / 2) 0, rgba(23, 20, 15, 0.1), rgba(23, 20, 15, 0));
}

@media (width < 700px) {
  .doorway > .door-slot:nth-child(odd) {
    --floor-l: var(--floor-out);
    --fade-l: calc(var(--floor-out) + var(--dw) * 0.05);
  }

  .doorway > .door-slot:nth-child(even) {
    --floor-r: var(--floor-out);
    --fade-r: calc(var(--floor-out) + var(--dw) * 0.05);
  }

  /* The second pair, set down from the words under the first. */
  .doorway > .door-slot:nth-child(n + 3) { margin-top: clamp(40px, 11vw, 64px); }
}

@media (width >= 700px) {
  .doorway > .door-slot:first-child {
    --floor-l: var(--floor-out);
    --fade-l: calc(var(--floor-out) + var(--dw) * 0.05);
  }

  .doorway > .door-slot:last-child {
    --floor-r: var(--floor-out);
    --fade-r: calc(var(--floor-out) + var(--dw) * 0.05);
  }
}

/* The state of a door is four numbers, and everything that moves reads
   them: how far the leaves have swung, how much of the room's light is
   showing, how dark the leaves have turned, and how wide the light
   lies on the floor. Set here, on the link, so shut, ajar and open are
   one rule each and no part of the door has to be told twice. */
.door {
  --swing: 0deg;
  --glow: 0;
  --shade: 1;
  --spill: 0.1;

  position: relative;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  justify-items: center;
  min-width: 0;
  color: var(--ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Ajar. Only for a door that is a link: the locked one has no href and
   does not answer. */
.door[href]:hover,
.door[href]:focus-visible {
  --swing: 13deg;
  --glow: 0.75;
  --spill: 0.14;
}

/* Open. The script adds the class when the door is chosen, and takes
   it off if the page is brought back with the door still standing
   open. The same weight as the rule above and after it, so it wins
   while the pointer is still there. */
.door.is-open[href] {
  --swing: 79deg;
  --glow: 1;
  --shade: 0.6;
  --spill: 1;
}

/* The picture: everything from the pediment to the sill. */
.door-case {
  position: relative;
  width: var(--dw);
  height: var(--dh);
}

/* The casing, laid over the glass and the leaves rather than under
   them. Its two openings are clear, so what stands inside shows
   through, and the shadow it drops falls on them as well as on the
   wall, which is what sets the doors back into the frame. */
.door-case::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: url("/case-chronicle/door-casing.svg") center / 100% 100% no-repeat;
  filter: drop-shadow(calc(var(--dw) * 0.012) calc(var(--dw) * 0.028) calc(var(--dw) * 0.035) rgba(23, 20, 15, 0.34));
}

/* The light on the floor: a sheet lying flat in front of the sill,
   tipped back in perspective so it widens as it comes forward. A slit
   while the door is ajar, and wide once it is open. */
.door-case::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 17%;
  right: 17%;
  z-index: 4;
  height: calc(var(--dw) * 0.16);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 251, 238, 0.96), rgba(255, 251, 238, 0));
  filter: blur(calc(var(--dw) * 0.006));
  opacity: var(--glow);
  transform: perspective(calc(var(--dw) * 0.3)) rotateX(70deg) scaleX(var(--spill));
  transform-origin: 50% 0;
  transition: opacity 0.4s, transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1);
}

/* ── the transom ──
   Glass over the doors, with the view's sign painted on it the way a
   room number is. The pane itself is the glass dark; the layer over it
   is the same glass with a light on behind, and the sign is drawn in
   whichever ink shows against the one on top. Lit unless told
   otherwise, so a page with no script has two lit rooms.

   Placed by the drawing's own numbers: the opening is 240 of the
   casing's 300 across and begins 30 in, and the glass is cut a hair
   large all round so the casing overlaps its edge instead of meeting
   it. */
.door-pane {
  position: absolute;
  left: 9.667%;
  top: 15.909%;
  width: 80.667%;
  height: 22.378%;
  overflow: hidden;
  color: rgba(48, 38, 27, 0.88);
  background: radial-gradient(90% 120% at 50% 100%, #4d4234, #362d23 55%, #251f18);
}

.door-pane::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 130% at 50% 100%, #fffaf0 0, #f8eed4 46%, #e7d5aa 100%);
}

/* The sash, a little sheen across the glass, and the shade of the head
   along the top of it. */
.door-pane::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.09) 44%, rgba(255, 255, 255, 0) 58%);
  box-shadow:
    inset 0 0 0 calc(var(--dw) * 0.02) #3b2e21,
    inset 0 0 0 calc(var(--dw) * 0.023) rgba(23, 20, 15, 0.6),
    inset 0 calc(var(--dw) * 0.04) calc(var(--dw) * 0.04) rgba(23, 20, 15, 0.22);
}

.door-pane svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

/* The rule round the sign and the sign itself keep the weight of their
   line whatever size the doorway is drawn at. */
.door-rule {
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
  opacity: 0.6;
}

.door-sign { stroke-linecap: square; }

.door-sign * {
  stroke-width: 1.3px;
  vector-effect: non-scaling-stroke;
}

.door-sign .door-fill { fill: currentColor; }

/* ── the leaves ──
   The opening is dark until a leaf moves. The room behind is a layer
   of light that comes up with --glow, so the hairline between two shut
   leaves is a shadow and not a crack of daylight.

   That layer is also pushed a long way back, which changes nothing to
   look at: there is no perspective on the opening for it to recede
   into. It is a precaution against Safari, where layers turned in
   three dimensions have been reported to sort by depth rather than in
   paint order, in which case a leaf swung inwards would pass behind
   the room it is opening on. Untested: the door was built without a
   Safari to try it in. */
.door-way {
  position: absolute;
  left: 9.667%;
  top: 40.035%;
  width: 80.667%;
  height: 59.091%;
  overflow: hidden;
  background: #1d1812;
}

.door-way::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 72% 48% at 50% 62%, #fffdf7 0, rgba(255, 253, 247, 0) 100%),
    linear-gradient(180deg, #c9b78d 0, #eee0bf 20%, #fbf4e2 52%, #f3e7cb 80%, #e0cfa9 100%);
  opacity: var(--glow);
  transform: translateZ(-9999px);
  transition: opacity 0.25s;
}

/* The light that gets round the edges of the leaves, over the seam. */
.door-way::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: 30%;
  pointer-events: none;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 247, 224, 0.36), rgba(255, 247, 224, 0));
  opacity: var(--glow);
  transition: opacity 0.4s;
}

/* One drawing for every leaf. Each swings on its outside edge, away
   from the reader, and both are seen from the same place. The
   perspective is written into the leaf's own transform rather than
   given to the opening, so nothing else in the doorway is in three
   dimensions, and the translation either side of it moves the
   vanishing point from the hinge to the middle of the opening, which
   is where a reader is standing. */
.door-leaf {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 50%;
  background: url("/case-chronicle/door-leaf.svg") center / 100% 100% no-repeat;
  filter: brightness(var(--shade));
  transform: translateX(100%) perspective(calc(var(--dw) * 2)) translateX(-100%) rotateY(var(--swing));
  transform-origin: 0 58%;
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1), filter 0.5s;
}

.door-leaf + .door-leaf {
  left: auto;
  right: 0;
  transform: translateX(-100%) perspective(calc(var(--dw) * 2)) translateX(100%) rotateY(calc(var(--swing) * -1));
  transform-origin: 100% 58%;
}

/* The pull: a brass bar on the meeting stile, and the one part of a
   leaf that knows which side it is on. Small enough to be written out
   here. */
.door-leaf::after {
  content: '';
  position: absolute;
  top: 47.34%;
  right: 0;
  width: 11.57%;
  height: 28.4%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 96'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23eedfb4'/%3E%3Cstop offset='.42' stop-color='%23bda672'/%3E%3Cstop offset='1' stop-color='%2377633c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='6.2' y='2.5' width='5.4' height='93' rx='2.7' fill='%2317140f' fill-opacity='.34'/%3E%3Cg stroke='%2317140f' stroke-opacity='.55' stroke-width='.6'%3E%3Crect x='2.6' y='11' width='8.8' height='6.4' rx='1.6' fill='%2394804f'/%3E%3Crect x='2.6' y='78.6' width='8.8' height='6.4' rx='1.6' fill='%2394804f'/%3E%3Crect x='4.4' y='.4' width='5.2' height='95.2' rx='2.6' fill='url(%23b)'/%3E%3C/g%3E%3Cpath fill='none' stroke='%23fff' stroke-opacity='.55' stroke-width='.7' stroke-linecap='round' d='M5.8 3v90'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.door-leaf + .door-leaf::after {
  right: auto;
  left: 0;
}

/* Chosen, the leaves take a little over half a second and start slower
   than they do under the pointer: a door has weight when it is really
   being opened. */
.door.is-open .door-leaf {
  transition-duration: 0.56s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.15, 1);
}

/* ── the words ──
   Under the door rather than on it, in ink on the stock like every
   other heading here: lettering across a pair of leaves would be cut
   in two down the seam. */
.door-plate {
  position: relative;
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  justify-items: center;
  row-gap: 9px;
  width: 100%;
  margin-top: 36px;
  text-align: center;
}

.door-t {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1;
  font-weight: 600;
  /* Sized off the doorway, down to a floor at which the longest word on
     any door, Chronological, still fits the narrowest one. */
  font-size: clamp(1.06rem, calc(var(--dw) * 0.095), 1.72rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
  color: var(--ink);
  transition: color 0.2s;
}

/* The names are different lengths, and there is a run of widths where
   the shorter ones fit on a line and the longest does not. So they are
   made to break alike, before the word they all end in. It is given a
   least width, and the middle term of that is enormous one way or the
   other depending on which side of 170px the doorway is, which the
   clamp turns into one of two answers: nothing, and the word runs on
   after the name, or the whole measure, and it has to take a line of
   its own. */
.door-t-v {
  display: inline-block;
  min-width: clamp(0px, calc((170px - var(--dw)) * 9999), 100%);
}

.door-s {
  max-width: 26ch;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--muted);
}

.door-go {
  padding-top: 7px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--court);
}

.door-go-a {
  display: inline-block;
  transition: transform 0.2s;
}

.door[href]:hover .door-t,
.door[href]:focus-visible .door-t { color: var(--court); }

.door[href]:hover .door-go-a,
.door[href]:focus-visible .door-go-a { transform: translateX(3px); }

/* The whole doorway is the link, so the ring goes round all of it,
   words included. In the court's sepia, as on the hub: the page's red
   ring would hand a door to one side. */
.door:focus-visible {
  outline: 2px solid var(--court);
  outline-offset: 8px;
  border-radius: 3px;
}

/* ── the lock ──
   A courtroom is not open until the court has sat in it. For a case
   that has had no hearing yet, the script hangs a padlock through the
   pulls of its Courtroom door and puts the light out behind the
   transom. The reader can break the lock and go in to what little is
   there, and finds it back on the next time the page is shown. Nothing
   is being kept from anybody: the lock is there to say the room has
   not been used yet, in a way a reader can answer.

   While it is on, the door is not a link, so there is no dead control
   on the page: the padlock is the only thing on that doorway to
   press. */
.door-slot.is-locked .door {
  --shade: 0.84;
  cursor: default;
}

.door-slot.is-locked .door-pane { color: rgba(239, 233, 220, 0.38); }
.door-slot.is-locked .door-pane::before { opacity: 0; }
.door-slot.is-locked .door-go { color: var(--faint); }
.door-slot.is-locked .door-go-a { display: none; }

/* Unlocked, the light comes on the way a tube does: nearly, twice, and
   then properly. Only after the reader's own doing, so a page that
   arrives locked simply has a dark room. */
@keyframes door-lamp {
  0%   { opacity: 0; }
  14%  { opacity: 0.6; }
  22%  { opacity: 0.15; }
  36%  { opacity: 0.8; }
  44%  { opacity: 0.5; }
  100% { opacity: 1; }
}

.door-slot.is-unlocked .door-pane { transition: color 0.5s 0.25s; }
.door-slot.is-unlocked .door-pane::before { animation: door-lamp 0.9s 0.14s both; }

/* Hung where the two pulls are, three quarters of the way down the
   casing, and given more room to be pressed in than the padlock takes
   up. */
.door-unlock {
  --lock-drop: calc(var(--dh) * 0.176);

  position: absolute;
  top: calc(var(--dh) * 0.7507);
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 8px;
  border: 0;
  background: none;
  cursor: pointer;

  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper);
}

.door-lock {
  width: max(26px, calc(var(--dw) * 0.118));
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 2px 3px rgba(23, 20, 15, 0.55));
  transform-origin: 50% 16%;
  transition: transform 0.2s;
}

/* The shackle is drawn twice, a dark line under a pale one, so it
   keeps an edge against the brass it hangs across. */
.door-lock-s {
  fill: none;
  stroke-linecap: round;
  transform-origin: 29px 24px;
}

.door-lock-s path { stroke: #2a231b; stroke-width: 6.2; }
.door-lock-s path + path { stroke: #dbd0b6; stroke-width: 3.6; }

.door-lock-b { fill: #bfa770; stroke: #2a231b; stroke-width: 1.1; }
.door-lock-d { fill: rgba(23, 20, 15, 0.17); }
.door-lock-h { fill: none; stroke: rgba(255, 255, 255, 0.6); stroke-width: 1.3; stroke-linecap: round; }
.door-lock-k { fill: #2a231b; }

.door-unlock-l {
  padding: 4px 8px 3px;
  background: var(--bind-2);
  box-shadow: 0 0 0 1px rgba(239, 233, 220, 0.3), 0 2px 5px rgba(23, 20, 15, 0.4);
}

.door-unlock:hover .door-lock,
.door-unlock:focus-visible .door-lock { transform: rotate(-7deg); }

.door-unlock:hover .door-unlock-l,
.door-unlock:focus-visible .door-unlock-l { box-shadow: 0 0 0 1px var(--paper), 0 2px 5px rgba(23, 20, 15, 0.4); }

.door-unlock:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* Broken: the shackle springs, and the lock drops to the floor, comes
   up off it once, tips over and is gone. */
@keyframes lock-spring {
  to { transform: translateY(-4px) rotate(-24deg); }
}

@keyframes lock-fall {
  0%   { transform: translate(-50%, 0); opacity: 1; animation-timing-function: cubic-bezier(0.55, 0, 1, 0.6); }
  50%  { transform: translate(-50%, var(--lock-drop)) rotate(12deg); animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1); }
  64%  { transform: translate(-50%, calc(var(--lock-drop) * 0.84)) rotate(30deg); animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5); }
  78%  { transform: translate(-50%, var(--lock-drop)) rotate(58deg); opacity: 1; }
  100% { transform: translate(-50%, var(--lock-drop)) rotate(74deg); opacity: 0; }
}

.door-unlock.is-broken {
  pointer-events: none;
  animation: lock-fall 0.85s 0.1s forwards;
}

.door-unlock.is-broken .door-lock-s { animation: lock-spring 0.16s ease-out forwards; }
.door-unlock.is-broken .door-unlock-l { visibility: hidden; }

/* Rattled: the reader tried the door, and the lock says why it did not
   open. */
@keyframes lock-rattle {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(-16deg); }
  45% { transform: rotate(13deg); }
  70% { transform: rotate(-8deg); }
  88% { transform: rotate(4deg); }
}

.door-unlock.is-rattled .door-lock { animation: lock-rattle 0.42s ease-out; }

@media (width <= 620px) {
  .doors { padding: 54px 0 48px; }
  .doors-l { margin-bottom: 24px; }
  .door-plate { row-gap: 7px; margin-top: 24px; }
  .door-s { font-size: 0.8rem; line-height: 1.42; }
  .door-go { font-size: 0.6rem; letter-spacing: 0.1em; }
  .door-sign * { stroke-width: 1px; }
  /* No room for the word under the padlock at this width, and the
     padlock says it without one. The button keeps its name for a
     screen reader. */
  .door-unlock-l { display: none; }
}

/* With motion turned down the leaves stay shut. The light still shows
   over the seam and on the floor under the pointer, and the script
   goes straight through without waiting for a swing that is not
   coming. */
@media (prefers-reduced-motion: reduce) {
  .door-leaf,
  .door-leaf + .door-leaf { transform: none; }
}

@media print {
  .doors { display: none; }
}

/* ═══════════════════════════════════════════════
   The old door

   One more door, at the foot of the hub, in the wall beside the notes.
   Nothing on the page says what it is or where it goes, and nothing
   is meant to: it is there to be noticed and tried.

   It is the courthouse door's mechanism in other wood. The same link,
   the same four numbers, the same lock and the same script, so every
   rule below restates one of those. old-door goes on the box the slot
   stands in, and what follows is only where this door differs: one
   leaf instead of two, weathered oak and iron for oiled wood and
   brass, a lamp behind it instead of daylight, and a chain.

   It is always locked. The courtroom's lock says a room has not been
   used yet, and comes off when it has. This one says nothing about
   what is kept behind it, so data-door-lock stays on its slot whatever
   is written in there.

   The frame, the leaf and the room behind them are drawings beside
   this file, as the courthouse pair are: old-door-frame.svg,
   old-door-leaf.svg and old-door-room.svg.
   ═══════════════════════════════════════════════ */

/* The hub's four notes stand two by two with the door beside them, and
   the door stands on the band's own bottom edge, which is the floor.
   So the band gives up its padding there and the notes take it. Two
   classes, because the rule every band takes its padding from comes
   later in this file. */
.band.band-notes-door { padding-bottom: 0; }

.notes-door {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: clamp(40px, 7vw, 104px);
  align-items: end;
}

.notes-door .notes-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding-bottom: 104px;
}

.old-door {
  /* One measure, as on the case pages. The frame is drawn 200 by 384. */
  --dw: clamp(128px, min(42vw, 36vh), 188px);
  --dh: calc(var(--dw) * 1.92);
  /* How much of the lamp shows while the door is shut. */
  --lamp: 0.6;

  position: relative;
  isolation: isolate;
}

/* The shade the door throws on the floor, which is the footer. Half as
   wide again as the door and no wider: the door stands at the end of
   the column, and anything that reached further would be past the
   gutter and off the side of the page. */
.old-door::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  width: calc(var(--dw) * 1.5);
  height: calc(var(--dw) * 0.12);
  transform: translateX(-50%);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(23, 20, 15, 0), rgba(23, 20, 15, 0.5) 16%, rgba(23, 20, 15, 0.5) 84%, rgba(23, 20, 15, 0))
      top / 100% 1px no-repeat,
    radial-gradient(ellipse 50% 100% at 50% 0, rgba(23, 20, 15, 0.22), rgba(23, 20, 15, 0));
}

/* And the lamplight that gets out under it. */
.old-door::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14%;
  right: 14%;
  height: calc(var(--dw) * 0.05);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 0, rgba(255, 190, 96, 0.5), rgba(255, 190, 96, 0));
  animation: old-lamp 5.3s linear infinite;
}

/* Nothing under this door to keep level with a neighbour's, so none of
   the case pages' shared rows: three boxes, one inside the next. */
.old-door .door-slot,
.old-door .door,
.old-door .door-case { display: block; }

/* Once the chain is off, the door comes off its latch by its own
   weight and stands a finger open. Ahead of the two rules that follow
   and no heavier than them, so the pointer and the choosing still win. */
.old-door .is-unlocked .door {
  --swing: 3.4deg;
  --glow: 0.3;
}

/* The lamp never goes out, so shut is not dark: --glow only brings the
   rest of the light up over what is already showing. */
.old-door .door[href]:hover,
.old-door .door[href]:focus-visible {
  --swing: 12deg;
  --glow: 0.8;
  --spill: 0.16;
}

.old-door .door.is-open[href] {
  --swing: 76deg;
  --glow: 1;
  --shade: 0.55;
  --spill: 1;
}

.old-door .door-case::after { background-image: url("/case-chronicle/old-door-frame.svg"); }

.old-door .door-case::before {
  left: 16%;
  right: 16%;
  background: linear-gradient(180deg, rgba(255, 205, 128, 0.92), rgba(255, 205, 128, 0));
}

/* Placed by the drawing's own numbers, and cut a hair large all round
   like the courthouse glass: the opening is 144 of the frame's 200
   across and begins 28 in. */
.old-door .door-way {
  left: 13.7%;
  top: 8.958%;
  width: 72.6%;
  height: 89.375%;
  background: #0c0906;
}

/* The room, which is a third drawing, old-door-room.svg: a lantern, a
   shelf and a floor, seen from the threshold. The leaf has a hole
   between its bars and stops short of the sill, so a little of it
   shows in both places while the door is shut, and the line of light
   laid over its foot here is what gets out underneath. */
.old-door .door-way::before {
  background:
    linear-gradient(0deg, rgba(255, 196, 110, 0.95) 0, rgba(255, 196, 110, 0) 3.6%),
    url("/case-chronicle/old-door-room.svg") center / 100% 100% no-repeat;
  opacity: calc(var(--lamp) + var(--glow) * (1 - var(--lamp)));
  animation: old-lamp 5.3s linear infinite;
}

/* A flame, so never quite steady. Brightness and not opacity, which
   belongs to --glow. */
@keyframes old-lamp {
  0%, 100% { filter: brightness(1); }
  7%   { filter: brightness(0.9); }
  12%  { filter: brightness(1.03); }
  31%  { filter: brightness(0.94); }
  38%  { filter: brightness(0.82); }
  43%  { filter: brightness(1); }
  64%  { filter: brightness(1.05); }
  71%  { filter: brightness(0.9); }
  88%  { filter: brightness(0.97); }
}

/* One leaf has no seam down the middle. The light gets round its free
   edge instead, the far side from the straps, and only while there is
   an edge for it to get round: it is gone again by the time the door
   stands open and the room itself is showing. */
.old-door .door-way::after {
  left: auto;
  right: 0;
  width: 26%;
  transform: none;
  background: linear-gradient(270deg, rgba(255, 214, 150, 0.42), rgba(255, 214, 150, 0));
  opacity: calc(var(--glow) * (1 - var(--spill)));
}

/* The whole opening in one piece, hung on the left where the straps
   are. Half its own width either side of the perspective this time,
   not all of it, which is what puts the vanishing point in the middle
   of an opening one leaf fills. Slower than the courthouse leaves: it
   is a heavier door. */
.old-door .door-leaf {
  width: 100%;
  background-image: url("/case-chronicle/old-door-leaf.svg");
  transform: translateX(50%) perspective(calc(var(--dw) * 2.2)) translateX(-50%) rotateY(var(--swing));
  transition-duration: 0.7s;
}

/* The ring is in the drawing. */
.old-door .door-leaf::after { content: none; }

/* Chosen, it does not swing so much as give: a little, a stop, and
   then the rest. The second line is that; the first is for a browser
   that does not know linear(). */
.old-door .door.is-open .door-leaf {
  transition-duration: 0.9s;
  transition-timing-function: cubic-bezier(0.5, 0, 0.15, 1);
  transition-timing-function: linear(0, 0.05 10%, 0.085 19%, 0.1 29%, 0.105 36%, 0.3 50%, 0.56 64%, 0.8 78%, 0.94 90%, 1);
}

/* Already as dark as it should be. */
.old-door .door-slot.is-locked .door { --shade: 1; }

/* Coming off its latch, further up, waits for the lock to land: for as
   long as the broken padlock is still on its way down, and not after,
   so the door does not hang back like this every time the pointer
   leaves it. The script takes the padlock away when it has landed. */
.old-door .door-slot:has(.door-unlock.is-broken:not([hidden])) .door:not(:hover):not(.is-open) .door-leaf { transition-delay: 0.75s; }

/* ── the chain ──
   From an eye on each post down to the ring, where the padlock holds
   the two ends together. A chain with a weight on it hangs straight,
   so each half is a straight run turned about its eye: drawn hanging
   plumb, and held out to the middle for as long as the lock is on.
   When the lock goes, each swings back down against its own post and
   settles there.

   A length of chain is one link seen flat and one seen edge on, over
   and over, so it is drawn as that pair and repeated down the box:
   eight and a bit of them, to end on a flat link. Hung by the script
   with the padlock, and gone without it. */
.old-door .door-chain {
  --hang: 38.7deg;
  --side: -1;

  position: absolute;
  top: calc(var(--dh) * 0.401);
  left: calc(var(--dw) * 0.09);
  z-index: 4;
  display: none;
  width: calc(var(--dw) * 0.05);
  height: calc(var(--dw) * 0.61);
  margin-left: calc(var(--dw) * -0.025);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cg fill='%23262320' stroke='%230e0b08' stroke-width='.5'%3E%3Crect x='3.8' y='-6' width='2.4' height='8.4' rx='1.2'/%3E%3Crect x='3.8' y='8' width='2.4' height='8.4' rx='1.2'/%3E%3C/g%3E%3Crect x='2.2' y='.7' width='5.6' height='9.4' rx='2.8' fill='none' stroke='%230e0b08' stroke-width='2.5'/%3E%3Crect x='2.2' y='.7' width='5.6' height='9.4' rx='2.8' fill='none' stroke='%2334312d' stroke-width='1.6'/%3E%3Cpath d='M2 6.6V3.4A2.9 2.9 0 0 1 4.4 .6' fill='none' stroke='%23a59e92' stroke-opacity='.6' stroke-width='.5' stroke-linecap='round'/%3E%3Cpath d='M4.3 10.6v3.2' fill='none' stroke='%23a59e92' stroke-opacity='.4' stroke-width='.4' stroke-linecap='round'/%3E%3C/svg%3E") top center / 100% auto repeat-y;
  filter: drop-shadow(calc(var(--dw) * 0.006) calc(var(--dw) * 0.014) calc(var(--dw) * 0.008) rgba(0, 0, 0, 0.6));
  transform-origin: 50% 0;
  transform: rotate(calc(var(--hang) * var(--side)));
}

.old-door .door-chain + .door-chain {
  --side: 1;
  left: calc(var(--dw) * 0.91);
}

.old-door .door-slot.is-locked .door-chain,
.old-door .door-slot.is-unlocked .door-chain { display: block; }

/* Let go: past plumb, back, and less each time. */
@keyframes chain-fall {
  0%   { transform: rotate(calc(var(--hang) * var(--side))); animation-timing-function: cubic-bezier(0.5, 0, 0.9, 0.6); }
  24%  { transform: rotate(calc(var(--hang) * var(--side) * -0.4)); animation-timing-function: ease-in-out; }
  44%  { transform: rotate(calc(var(--hang) * var(--side) * 0.2)); animation-timing-function: ease-in-out; }
  62%  { transform: rotate(calc(var(--hang) * var(--side) * -0.1)); animation-timing-function: ease-in-out; }
  79%  { transform: rotate(calc(var(--hang) * var(--side) * 0.04)); animation-timing-function: ease-in-out; }
  100% { transform: rotate(0deg); }
}

.old-door .door-slot.is-unlocked .door-chain {
  transform: none;
  animation: chain-fall 1.9s 0.05s both;
}

/* ── its lock ──
   The courthouse padlock again, in iron, and larger: it is the only
   thing on this door to press. It hangs where the two halves of the
   chain meet, with its shackle through the ring. */
.old-door .door-unlock {
  --lock-drop: calc(var(--dh) * 0.24);

  top: calc(var(--dh) * 0.624 - 2px);
  padding: 2px 8px 6px;
}

.old-door .door-lock {
  width: calc(var(--dw) * 0.2);
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 14%;
}

.old-door .door-lock-s { transform-origin: 32px 28px; }
.old-door .door-lock-s path { stroke: #0e0b08; stroke-width: 7.4; }
.old-door .door-lock-s path + path { stroke: #57524b; stroke-width: 4.4; }

.old-door .door-lock-b { fill: #2f2c28; stroke: #0e0b08; stroke-width: 1.2; }
.old-door .door-lock-d { fill: rgba(0, 0, 0, 0.3); }
.old-door .door-lock-t { fill: #47433d; stroke: #0e0b08; stroke-width: 1; }
.old-door .door-lock-h { stroke: rgba(243, 230, 204, 0.42); stroke-width: 1; }
.old-door .door-lock-r { fill: #171513; }
/* The plate round the keyhole is the one piece of brass on the door. */
.old-door .door-lock-e { fill: #8d7847; stroke: #0e0b08; stroke-width: 0.9; }
.old-door .door-lock-k { fill: #0e0b08; }

/* Tried: the door gives as far as the chain lets it, which is not
   far, and the chain says so. */
@keyframes chain-rattle {
  0%, 100% { transform: rotate(calc(var(--hang) * var(--side))); }
  18% { transform: rotate(calc(var(--hang) * var(--side) * 1.05)); }
  42% { transform: rotate(calc(var(--hang) * var(--side) * 0.965)); }
  66% { transform: rotate(calc(var(--hang) * var(--side) * 1.025)); }
  86% { transform: rotate(calc(var(--hang) * var(--side) * 0.99)); }
}

@keyframes old-door-try {
  0%, 100% { transform: translateX(50%) perspective(calc(var(--dw) * 2.2)) translateX(-50%) rotateY(0deg); }
  22% { transform: translateX(50%) perspective(calc(var(--dw) * 2.2)) translateX(-50%) rotateY(1.7deg); }
  48% { transform: translateX(50%) perspective(calc(var(--dw) * 2.2)) translateX(-50%) rotateY(0.3deg); }
  70% { transform: translateX(50%) perspective(calc(var(--dw) * 2.2)) translateX(-50%) rotateY(1deg); }
}

.old-door .door-unlock.is-rattled ~ .door-chain { animation: chain-rattle 0.46s ease-out; }
.old-door .door-slot:has(.is-rattled) .door-leaf { animation: old-door-try 0.46s ease-out; }

/* Under the notes instead of beside them once there is no room for
   both, and still on the floor. */
@media (width <= 900px) {
  .notes-door { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .notes-door .notes-grid { grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); padding-bottom: 56px; }
  .old-door { justify-self: center; }
}

/* With motion turned down the leaf stays shut, as the courthouse
   leaves do, and the lamp holds still. The chain is simply off. */
@media (prefers-reduced-motion: reduce) {
  .old-door .door-leaf { transform: none; }
  .old-door::after,
  .old-door .door-way::before { animation: none; }
}

@media print {
  .old-door { display: none; }
  .band.band-notes-door { padding-bottom: 104px; }
  .notes-door .notes-grid { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════
   A view's own page

   Each view of a case has a page, and none of them is the case: the
   case page is. So the masthead here is cut down to the name and the
   way back, and under it the views sit as equal parts of one bar that
   runs the width of the column, in the order their doors stand in on
   the case page. The part the reader is standing in is open to the
   band below it.
   ═══════════════════════════════════════════════ */

/* Two classes, as on the hub's masthead: the narrow-window padding
   every masthead is given at the foot of this file would otherwise win,
   and stand the bar of views off the band it is meant to open on to. */
.masthead.masthead-view {
  padding: 84px 0 0;
  border-bottom: 0;
}

.masthead-view .eyebrow { margin-bottom: 20px; }

.masthead-view .masthead-title {
  font-size: clamp(2.3rem, 6.2vw, 4.1rem);
  margin-bottom: 44px;
}

.views {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  border-bottom: 0;
}

.view {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  padding: 15px 14px 14px;

  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--muted);
  background: rgba(23, 20, 15, 0.035);
  box-shadow: inset 0 -1px 0 var(--rule);
  transition: background-color 0.2s, color 0.2s;
}

.view + .view { border-left: 1px solid var(--rule); }

.view:hover,
.view:focus-visible { color: var(--ink); background: rgba(23, 20, 15, 0.012); }

.view:focus-visible { outline-offset: -4px; }

/* The same ground as the band underneath, and no rule between them. */
.view[aria-current] {
  color: var(--ink);
  background: var(--bg-band);
  box-shadow: inset 0 2px 0 var(--court);
}

/* The side by side is the one view set on the page's own stock and not
   on a band, so the part of the bar that opens on to it is that stock
   too. */
.masthead-view:has(+ .band-ledger) .view[aria-current] { background: none; }

.view-tag {
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  padding: 2px 6px 1px;
  border: 1px solid var(--rule);
  color: var(--faint);
}

/* Four across, a part runs out of room for a name and its tag on one
   line well before the window is narrow, so the tag goes under the
   name, and a little further down the type comes in. */
@media (width <= 1040px) {
  .view { flex-direction: column; align-items: center; gap: 5px; }
}

@media (width <= 900px) {
  .view { padding: 12px 8px; font-size: 0.62rem; letter-spacing: 0.06em; }
}

/* On a phone the bar is two rows of two. Only the lower row stands on
   the band, so the part the reader is in can no longer open on to it
   from wherever it happens to be: every part is a box here, and the
   one in the court's ink along its top is the one. */
@media (width <= 620px) {
  .masthead.masthead-view { padding-top: 56px; }
  .masthead-view .masthead-title { margin-bottom: 30px; }
  .views { grid-template-columns: 1fr 1fr; }
  .view:nth-child(odd) { border-left: 0; }
  .view:nth-child(n + 3) { border-top: 1px solid var(--rule); }
  .view:nth-child(-n + 2):not([aria-current]) { box-shadow: none; }
}

@media print {
  .views { display: none; }
}

/* ═══════════════════════════════════════════════
   The courtroom, from above

   A plan, not a picture: walls, a bench, a stand, a jury box, two
   tables, the bar, the gallery. Drawn in rules on the stock like
   everything else here, with no perspective and no furniture beyond
   what tells a reader where somebody would sit.

   People are the only thing in colour, and they wear the page's three
   inks for the page's three jobs: the side that filed, the side that
   answered, the court. Anyone else is ink at half strength. An empty
   seat is a dashed ring, which is what the room mostly is until the
   record says otherwise.
   ═══════════════════════════════════════════════ */

.band-room { background: var(--bg-band); }

.cr { margin-top: 44px; }

/* ── the bar of moments ──
   One wide box, a tick for every entry in the chronology, and a single
   thin line that says which one the room is showing. Previous sits at
   the left end and Next at the right, because that is the direction
   each of them goes.

   Ticks are evenly spaced, one per entry, and not placed by date. The
   record runs for years and does most of its work in a few weeks, so a
   bar drawn to scale would put the trial in a sliver nobody could hit.
   The years are written along the bottom where each one begins.

   It follows the reader down the page, under the site nav, so the room
   can be watched while the line is moved, which on a phone is the only
   way to see both. */
.ct {
  position: sticky;
  top: 44px;
  z-index: 4;
  display: flex;
  align-items: stretch;
  border: 1px solid rgba(111, 74, 46, 0.55);
  background: var(--bg-deep);
  box-shadow: 0 6px 20px rgba(23, 20, 15, 0.14);
}

.ct-step {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  background: none;
  cursor: pointer;

  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s;
}

.ct-prev { border-right: 1px solid var(--rule); }
.ct-next { border-left: 1px solid var(--rule); }

.ct-step:hover:not(:disabled),
.ct-step:focus-visible { background: var(--bg-band); color: var(--ink); }

.ct-step:focus-visible { outline-offset: -4px; }
.ct-step:disabled { color: rgba(23, 20, 15, 0.3); cursor: default; }

.ct-step-a { transition: transform 0.2s; }
.ct-prev:hover:not(:disabled) .ct-step-a { transform: translateX(-2px); }
.ct-next:hover:not(:disabled) .ct-step-a { transform: translateX(2px); }

.ct-track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 74px;
  cursor: ew-resize;
  /* A drag along the bar is the bar's, not the page's. Vertical
     scrolling still starts from it. */
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.ct-track:focus-visible { outline-offset: -4px; }

/* Ticks and the line share one inset box, so 0% and 100% are the first
   and last entry and neither sits on the border. */
.ct-ticks {
  position: absolute;
  inset: 0 22px;
}

.ct-tick {
  position: absolute;
  bottom: 24px;
  width: 2px;
  height: 14px;
  margin-left: -1px;
  background: rgba(23, 20, 15, 0.34);
}

.ct-tick.is-key { height: 26px; }
.ct-tick-p { background: var(--p); }
.ct-tick-d { background: var(--d); }
.ct-tick-court { background: var(--court); }

/* Before the case reached a court: shorter and paler still. */
.ct-tick.is-before { opacity: 0.45; }

/* A day something was heard in the room carries a dot over its tick, so
   the hearings can be picked out from the paper between them. */
.ct-tick.is-court::before {
  content: '';
  position: absolute;
  left: -2px;
  top: -9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: inherit;
}

.ct-year {
  position: absolute;
  bottom: 6px;
  padding-left: 4px;
  border-left: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  line-height: 1.5;
  color: var(--faint);
  white-space: nowrap;
}

/* A year that begins at the far end is hung to the left of its tick,
   so it stays inside the bar. */
.ct-year-end {
  transform: translateX(-100%);
  padding: 0 4px 0 0;
  border-left: 0;
  border-right: 1px solid var(--rule);
}

.ct-line {
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  pointer-events: none;
  transition: left 0.22s cubic-bezier(0.3, 0, 0.2, 1);
}

/* A grip at each end, so a two-pixel line reads as something to hold. */
.ct-line::before,
.ct-line::after {
  content: '';
  position: absolute;
  left: -4px;
  width: 10px;
  height: 4px;
  background: var(--ink);
}

.ct-line::before { top: 0; }
.ct-line::after { bottom: 0; }

.ct.is-dragging .ct-line { transition: none; }

/* When the page opens the line moves by itself, twice and then back,
   to say that it can be moved. Slower than a step the reader takes, so
   the eye has time to find it and follow it across. */
.ct.is-touring .ct-line { transition-duration: 0.62s; }

/* ── the plan and what sits beside it ── */
.cr-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  margin-top: 40px;
}

/* The plan and the key to its marks, as one column. */
.cr-fig { max-width: 600px; }

.cr-plan {
  position: relative;
  width: 100%;
  aspect-ratio: 760 / 880;
  background: var(--paper);
  box-shadow: 0 1px 0 rgba(23, 20, 15, 0.05), 0 10px 30px rgba(23, 20, 15, 0.08);
}

.cr-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(23, 20, 15, 0.5);
  stroke-width: 1.5;
}

.cr-wall { stroke: var(--ink); stroke-width: 3; }
.cr-door { stroke: var(--ink); stroke-width: 3; }
.cr-desk { fill: rgba(23, 20, 15, 0.09); }
.cr-box { fill: rgba(23, 20, 15, 0.035); }
.cr-pew { fill: rgba(23, 20, 15, 0.05); stroke: rgba(23, 20, 15, 0.3); }
.cr-bar { stroke: var(--ink); stroke-width: 2.5; }
.cr-gate { stroke: rgba(23, 20, 15, 0.45); stroke-dasharray: 3 4; }

/* The part of the room that acted in this moment: a table, or the
   bench. Invisible until the script names it. */
.cr-area {
  stroke: none;
  fill: transparent;
  transition: fill 0.3s;
}

.cr-area[data-area="court"] { fill: rgba(23, 20, 15, 0.03); stroke: rgba(23, 20, 15, 0.3); }
.cr-area.is-acting[data-area="p"] { fill: var(--p-wash); stroke: var(--p-edge); }
.cr-area.is-acting[data-area="d"] { fill: var(--d-wash); stroke: var(--d-edge); }
.cr-area.is-acting[data-area="court"] { fill: rgba(111, 74, 46, 0.12); stroke: rgba(111, 74, 46, 0.6); }

.cr-seat {
  stroke: rgba(23, 20, 15, 0.34);
  stroke-dasharray: 3 3.5;
  transition: fill 0.25s, stroke 0.25s;
}

/* A place on a bench is not a chair: nothing is drawn until someone
   is sitting in it. */
.cr-seat-bench { stroke: none; }

/* The parts of the room, for the script to measure. Never drawn. */
.cr-zone { stroke: none; fill: none; }

/* The public: unnamed, and only there when a source says the benches
   had people on them. Smaller and greyer than anyone with a name. */
.cr-pub { stroke: none; fill: none; transition: fill 0.25s; }
.cr-pub.is-on { fill: rgba(23, 20, 15, 0.36); }

.cr-seat-j.is-on { stroke-dasharray: none; stroke: none; fill: rgba(23, 20, 15, 0.6); }
.cr-seat-j.is-on.is-p { fill: var(--p); }
.cr-seat-j.is-on.is-d { fill: var(--d); }
.cr-seat-j.is-on.is-alt { fill: none; stroke: rgba(23, 20, 15, 0.6); stroke-width: 2; }

/* A jury that exists and is not in the room at this moment. */
.cr-seat-j.is-on.is-ghost { fill-opacity: 0.28; stroke-opacity: 0.4; }

/* Labels are set over the plan in the page's own type, not drawn in
   it, so they stay one size while the room scales under them. */
.cr-lab {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--faint);
  white-space: nowrap;
  pointer-events: none;
}

/* A person's side, in the ink every mark of theirs is drawn in: their
   circle on the plan and the dot by their row in the list. Anyone on
   no side has none, and each mark falls back to ink at about half
   strength. */
.cr [data-side="p"] { --side-ink: var(--p); }
.cr [data-side="d"] { --side-ink: var(--d); }
.cr [data-side="court"] { --side-ink: var(--court); }

/* ── a person ──
   A real button over the seat, so it takes focus and a finger as well
   as a pointer. The ring of stock around it is what separates two
   people at one table when the plan is a phone wide. */
.cr-node {
  position: absolute;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  background: var(--side-ink, rgba(23, 20, 15, 0.6));
  box-shadow: 0 1px 4px rgba(23, 20, 15, 0.35);
  cursor: help;
  /* Above the part of the room they are in, by rule and not by the
     order the script happened to add them in. */
  z-index: 1;
  transition: transform 0.18s, box-shadow 0.18s;
  animation: node-in 0.3s ease-out;
}

@keyframes node-in {
  from { opacity: 0; transform: scale(0.4); }
}

.cr-node:hover,
.cr-node:focus-visible,
.cr-node.is-open {
  transform: scale(1.22);
  box-shadow: 0 0 0 3px rgba(23, 20, 15, 0.16), 0 2px 8px rgba(23, 20, 15, 0.4);
  z-index: 2;
}

.cr-node:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── three ways of being there ──
   Filled: a source places this person in the room at this moment.
   Ringed with a dot: they appeared, on a screen.
   Hollow and dashed: they are part of the case at this point, and no
   more than that is recorded, which on most dates is because nothing
   was heard in court at all. The colour is still whose side they are
   on, so the room keeps its shape when it is nearly all hollow. */
.cr-node.is-case {
  background: var(--paper);
  border: 2px dashed var(--side-ink, rgba(23, 20, 15, 0.5));
  box-shadow: none;
}

.cr-node.is-remote {
  border: 2px solid var(--side-ink, rgba(23, 20, 15, 0.6));
  background: radial-gradient(circle, var(--side-ink, rgba(23, 20, 15, 0.6)) 0 34%, var(--paper) 38%);
}

/* The jury is many circles and one thing to point at: the node is a
   frame around its seats, and the circles are drawn underneath it. */
.cr-node-group {
  width: auto;
  height: auto;
  margin: 0;
  border: 1px dashed rgba(23, 20, 15, 0.42);
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
}

.cr-node-group[data-side="p"] { border-color: var(--p); }
.cr-node-group[data-side="d"] { border-color: var(--d); }

.cr-node-group:hover,
.cr-node-group:focus-visible,
.cr-node-group.is-open {
  transform: none;
  background: rgba(23, 20, 15, 0.07);
  box-shadow: none;
}

.cr-node-group[data-side="p"]:hover,
.cr-node-group[data-side="p"]:focus-visible,
.cr-node-group[data-side="p"].is-open { background: var(--p-wash); }

.cr-node-group[data-side="d"]:hover,
.cr-node-group[data-side="d"]:focus-visible,
.cr-node-group[data-side="d"].is-open { background: var(--d-wash); }

.cr-node-group.is-ghost { border-style: dotted; }

/* ── a part of the room ──
   The whole of it is the thing to point at, and the question mark in
   its corner is what says so: the same mark as the Terms button, for
   the same offer. Nothing else is drawn until it is pointed at, so an
   empty jury box still looks empty. */
.cr-node-zone {
  width: auto;
  height: auto;
  margin: 0;
  border: 1px dashed transparent;
  border-radius: 3px;
  background: transparent;
  box-shadow: none;
  animation: none;
  /* Under everyone in it, always. See the rule below. */
  z-index: 0;
}

/* A circle lifts above its neighbours when it is pointed at, which is
   right for a circle and wrong for the floor it stands on: a part of
   the room that rose with the pointer would come up over the people
   sitting in it, and nobody inside it could ever be reached. So the
   lift is taken back off here, in all three states that grant it. */
.cr-node-zone:hover,
.cr-node-zone:focus-visible,
.cr-node-zone.is-open {
  transform: none;
  border-color: rgba(111, 74, 46, 0.6);
  background: rgba(111, 74, 46, 0.07);
  box-shadow: none;
  z-index: 0;
}

.cr-q {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1px solid rgba(111, 74, 46, 0.7);
  background: var(--bg-deep);
  color: var(--court);
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 600;
  line-height: 15px;
  text-align: center;
  transition: background-color 0.18s, color 0.18s;
}

.cr-node-zone:hover .cr-q,
.cr-node-zone:focus-visible .cr-q,
.cr-node-zone.is-open .cr-q { background: var(--court); color: var(--paper); }

/* ── the key ── */
.cr-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.cr-key li { display: flex; align-items: center; gap: 8px; }

.cr-k {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

.cr-k-in { background: rgba(23, 20, 15, 0.6); }
.cr-k-remote { border: 2px solid rgba(23, 20, 15, 0.6); background: radial-gradient(circle, rgba(23, 20, 15, 0.6) 0 30%, transparent 36%); }
.cr-k-case { border: 2px dashed rgba(23, 20, 15, 0.5); }

.cr-k-q {
  width: 15px;
  height: 15px;
  border: 1px solid rgba(111, 74, 46, 0.7);
  color: var(--court);
  font-size: 0.56rem;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
}

/* ── the card a seat opens ──
   The glossary's own frame at a smaller size, because it is the same
   act: the reader has pointed at something and asked what it is. */
.cr-pop {
  position: absolute;
  z-index: 3;
  width: min(280px, calc(100% - 20px));
  padding: 15px 17px 16px;
  background: var(--bg-deep);
  border: 1px solid rgba(111, 74, 46, 0.55);
  box-shadow:
    0 0 0 2px var(--bg-deep),
    0 0 0 3px var(--court),
    0 12px 32px 3px rgba(23, 20, 15, 0.28);
  pointer-events: none;
  animation: gloss-in 0.16s ease-out;
}

/* Pinned by a press, it can be read, selected and scrolled past. */
.cr-pop.is-pinned { pointer-events: auto; }

/* The one thing a circle cannot say about itself: that pressing it
   keeps the card. As small as the page sets anything, in the corner a
   reader's eye leaves a card by. It changes when the card is stuck, to
   say how to let it go. */
.cr-hint {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
  color: var(--faint);
}

.cr-pop.is-pinned .cr-hint { color: var(--court); }

.cr-pop .cr-role,
.cr-cast .cr-role {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--court);
  margin-bottom: 5px;
}

.cr-pop .cr-name,
.cr-cast .cr-name {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 7px;
}

.cr-pop .cr-note,
.cr-cast .cr-note {
  font-size: 0.84rem;
  line-height: 1.52;
  color: var(--ink-2);
}

/* Which of the three this person is at this moment, said in words above
   their name, for a reader who cannot tell a filled circle from a
   hollow one or would rather not have to. */
.cr-status {
  display: inline-block;
  margin-bottom: 7px;
  padding: 2px 6px 1px;
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

[data-status="in"] > .cr-status,
[data-status="remote"] > .cr-status { color: var(--ink); border-color: rgba(23, 20, 15, 0.4); }

/* In the list the heading has already said it. By video still says so. */
.cr-cast > [data-status="in"] > .cr-status { display: none; }

/* Where it comes from. The same form as a citation in the chronology,
   and for the same reason: a seat is a claim, and the reader should be
   one click from checking it. */
.cr-cite {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  line-height: 1.7;
  color: var(--faint);
}

span.cr-cite { margin: 0; white-space: normal; }

/* ── the moment ── */
.cm {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}

.cm-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 12px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.cm-n { color: var(--faint); }
.cm-date { color: var(--ink); }

.cm-who {
  padding: 2px 7px 1px;
  border: 1px solid var(--rule);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.cm-who[data-side="p"] { color: var(--p); border-color: var(--p-edge); }
.cm-who[data-side="d"] { color: var(--d); border-color: var(--d-edge); }
.cm-who[data-side="court"] { color: var(--court); border-color: rgba(111, 74, 46, 0.5); }

.cm-h {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.16;
  letter-spacing: -0.008em;
  margin-bottom: 12px;
}

.cm-b {
  font-size: 0.96rem;
  line-height: 1.62;
  color: var(--ink-2);
}

/* Where this moment happened: in the room, in some other room, or on
   paper. It decides how the whole plan should be read, so it is set
   apart from the chronology's own words above it. */
.cm-room {
  margin-top: 16px;
  padding: 11px 14px 12px;
  border-left: 2px solid var(--rule);
  background: rgba(23, 20, 15, 0.03);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.cm-room[data-kind="court"] { border-left-color: var(--court); background: rgba(111, 74, 46, 0.07); }

.cm-room-k {
  display: block;
  margin-bottom: 4px;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}

.cm-room[data-kind="court"] .cm-room-k { color: var(--court); }
.cm-room .cr-cite { display: block; margin-top: 6px; }

.cm-room:empty { display: none; }

.cm-link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--court);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 74, 46, 0.35);
  padding-bottom: 2px;
}

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

/* ── who was in the room, as a list ──
   The people on the plan again, for a reader who cannot hover, cannot
   see it, or would simply rather read. It is also the page's data:
   every row is here, the script seats people from them, and it shows
   only the rows for whoever was in the room at the moment the line is
   on, in person or on a screen. Someone who was only in the case, and
   a note on an empty part of the room, stay on the plan. */
.cr-cast-h {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
  margin-bottom: 4px;
}

.cr-cast { list-style: none; }

.cr-who {
  position: relative;
  padding: 14px 0 14px 22px;
  border-bottom: 1px solid var(--rule-soft);
}

.cr-who:last-child { border-bottom: 0; }

.cr-who::before {
  content: '';
  position: absolute;
  left: 0;
  top: 19px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--side-ink, rgba(23, 20, 15, 0.6));
}

.cr-who[data-side="alt"]::before { background: none; box-shadow: inset 0 0 0 1.5px rgba(23, 20, 15, 0.6); }

/* The list wears the same three marks as the plan. */
.cr-who[data-status="case"]::before {
  background: none;
  border: 1.5px dashed var(--side-ink, rgba(23, 20, 15, 0.5));
  width: 10px;
  height: 10px;
}

.cr-who[data-status="remote"]::before { box-shadow: 0 0 0 2px var(--bg-band), 0 0 0 3.5px rgba(23, 20, 15, 0.5); width: 6px; height: 6px; left: 2px; top: 21px; }

/* A note on a part of the room, not a person. */
.cr-about::before {
  content: '?';
  top: 15px;
  width: 14px;
  height: 14px;
  left: -3px;
  border: 1px solid rgba(111, 74, 46, 0.7);
  background: none;
  color: var(--court);
  font-family: var(--mono);
  font-size: 0.52rem;
  font-weight: 600;
  line-height: 13px;
  text-align: center;
}

/* ── the days in court, as a list ──
   Only ever seen without the script, which otherwise shows each day
   under its own moment and puts this away. */
.cr-days { margin-top: 44px; max-width: 46em; }

.cr-sits { list-style: none; }

.cr-sits li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.cr-sit-d {
  display: inline-block;
  min-width: 9.5em;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}

.cr-sits li[data-kind="away"] .cr-sit-d { color: var(--faint); }

.cr-who.is-lit { background: rgba(111, 74, 46, 0.07); box-shadow: -10px 0 0 rgba(111, 74, 46, 0.07), 10px 0 0 rgba(111, 74, 46, 0.07); }

.cr-cast .cr-name { font-size: 1rem; margin-bottom: 4px; }

.cr-empty {
  padding: 14px 0;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (width <= 900px) {
  .cr-cols { grid-template-columns: 1fr; gap: 34px; }
  /* On one column the moment is read first and the room second, with
     the list last. The side column is taken apart so the plan can sit
     between its two halves. */
  .cr-side { display: contents; }
  .cm { order: -1; margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .cr-fig { margin: 0 auto; width: 100%; }
}

@media (width <= 620px) {
  .ct-step { padding: 0 13px; }
  .ct-step-l { display: none; }
  .ct-track { height: 64px; }
  .ct-ticks { inset: 0 12px; }
  .ct-tick { bottom: 22px; }
  .cr-node:not(.cr-node-group):not(.cr-node-zone) { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
  .cr-q { top: 3px; right: 3px; width: 15px; height: 15px; line-height: 13px; font-size: 0.54rem; }
  .cr-lab { font-size: 0.48rem; letter-spacing: 0.08em; }
}

@media print {
  .ct, .cr-pop { display: none; }
}

/* ═══════════════════════════════════════════════
   Bands and section headers
   ═══════════════════════════════════════════════ */

.band {
  padding: 104px 0;
  border-bottom: 1px solid var(--rule);
}

.band-ledger { padding-bottom: 116px; }
.band-notes { background: var(--bg-deep); }

/* ── Cards on a band ──
   Two sections lay cards of a lighter stock on a band: the case flow
   and the chronology. This is the stock, and the inks mixed for it.

   Set here rather than on the root so they are worked out below the
   body, where a case restates its two inks. Everything a side needs in
   either section is mixed from its one colour, so a case that sets --p
   and --d has nothing more to restate for them. */
.band-tree,
.band-time,
.mh {
  --tl-card: #fbf7ef;
  --tl-edge: rgba(23, 20, 15, 0.16);
  --tl-lift: 0 1px 1px rgba(23, 20, 15, 0.05), 0 14px 24px -16px rgba(23, 20, 15, 0.34);
  --tl-lift-up: 0 1px 1px rgba(23, 20, 15, 0.06), 0 24px 34px -18px rgba(23, 20, 15, 0.46);

  /* Ink for small type, a shade down from the spot colour. */
  --tl-p-ink: color-mix(in oklab, var(--p) 84%, var(--ink));
  --tl-d-ink: color-mix(in oklab, var(--d) 84%, var(--ink));
  --tl-c-ink: color-mix(in oklab, var(--court) 80%, var(--ink));
}

/* The card itself is wanted on a masthead too, for the two sides, so
   the stock and its inks are set above for the frame that holds those
   as well. What follows belongs to the two bands alone. */
.band-tree,
.band-time {
  background: var(--bg-band);

  /* Lines and rules. Mixed into the band's own colour rather than
     thinned with alpha, so they are solid: the rule under the
     chronology's bar has cards passing beneath it. */
  --tl-p-line: color-mix(in oklab, var(--p) 58%, var(--bg-band));
  --tl-d-line: color-mix(in oklab, var(--d) 58%, var(--bg-band));
  --tl-c-line: color-mix(in oklab, var(--court) 36%, var(--bg-band));
  --tl-n-line: color-mix(in oklab, var(--ink) 34%, var(--bg-band));
  --tl-hair: color-mix(in srgb, var(--ink) 15%, var(--bg-band));

  --tl-c-tint: color-mix(in oklab, var(--court) 12%, var(--tl-card));
}

/* A <p> over a section's title where the section has one. Where it has
   none, which is the hub's shelf, the case flow, the side by side and
   the chronology, it is the section's only heading and is the h2
   itself. Stated here so the two render identically rather than one
   arriving bold. */
.kicker {
  font-weight: 400;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
  margin-bottom: 20px;
}

.section-title {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 72, 'SOFT' 0, 'WONK' 1;
  font-size: clamp(1.9rem, 4.3vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin-bottom: 22px;
  max-width: 18em;
}

.section-lede,
.plate-rest {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--muted);
  max-width: 44em;
  line-height: 1.66;
}

/* ═══════════════════════════════════════════════
   The ledger — side by side, in three depths

   Depth 1 is always open: each side's position in its own words.
   Depth 2 and 3 are <details> drawers, so the page works with no
   JavaScript at all and every control is keyboard-reachable.
   ═══════════════════════════════════════════════ */

.ledger-key {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.lk {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 2px solid;
}

.lk-p { color: var(--p-dim); border-color: var(--p); }
.lk-d { color: var(--d-dim); border-color: var(--d); }

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

.row {
  padding: 46px 0 40px;
  border-bottom: 1px solid var(--rule-soft);
  scroll-margin-top: 60px;
}

.row-q {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  display: flex;
  gap: 20px;
  align-items: baseline;
  max-width: 26em;
}

.row-n {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--court);
  flex: 0 0 auto;
  letter-spacing: 0.08em;
  transform: translateY(-2px);
}

/* ── Depth 1 — the positions ── */

.row-sum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.side { padding-top: 16px; border-top: 2px solid; }
.side-p { border-color: var(--p-edge); }
.side-d { border-color: var(--d-edge); }

.side-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.side-p .side-tag { color: var(--p); }
.side-d .side-tag { color: var(--d); }

.side p:not(.side-tag) {
  font-size: 0.96rem;
  color: var(--ink-2);
  line-height: 1.62;
}

.side .mono { color: var(--ink); }

.row-court {
  margin-top: 26px;
  padding: 12px 0 12px 18px;
  border-left: 2px solid rgba(111, 74, 46, 0.5);
  font-size: 0.9rem;
  color: var(--muted);
}

.rc-mark {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
  margin-right: 14px;
}

/* A third voice under a question: someone who is in the case and is
   neither side, like the lawyers for the victims at the ICC. Set like
   the court's line and in nobody's ink, with the court's line closed
   up under it so the two read as one group. */
.row-third { border-left-color: rgba(23, 20, 15, 0.26); }
.row-third .rc-mark { color: var(--muted); }
.row-third + .row-court { margin-top: 10px; }

/* Where the lines above come from, for a page that cites a ruling by
   its paragraph. Set like the source line on a note. */
.row-src {
  margin-top: 10px;
  padding-left: 20px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--faint);
}

/* ── Ledger head: column key + the global depth control ── */

.ledger-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: 56px;
  padding-bottom: 12px;
}

.ledger-head .ledger-key { flex: 1; }

.depth-all {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 9px 15px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  margin-bottom: 10px;
}

.depth-all:hover {
  background: rgba(23, 20, 15, 0.05);
  border-color: rgba(23, 20, 15, 0.24);
  color: var(--ink);
}

/* The mark on this button and on each drawer is the shared one (see
   "Opening and shutting"), in the court's ink. These two turn a little
   quicker than the cards' do. */
.da-i::before,
.da-i::after,
.dw-i::before,
.dw-i::after { transition: transform 0.22s ease, opacity 0.22s ease; }

/* ── Drawers — depth 2 and 3 ── */

.drawer { margin-top: 14px; }
.drawer:first-of-type { margin-top: 26px; }

.drawer > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: rgba(255, 252, 245, 0.5);
  transition: background 0.18s, border-color 0.18s;
  user-select: none;
  -webkit-user-select: none;
}

.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::marker { content: ''; }

.drawer > summary:hover {
  background: rgba(255, 252, 245, 0.9);
  border-color: rgba(23, 20, 15, 0.2);
}

/* A drawer's mark is a pixel larger than the rest. */
.dw-i { width: 10px; height: 10px; }
.dw-i::before { inset: 4px 0; }
.dw-i::after { inset: 0 4px; }

.dw-l {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.dw-n {
  font-size: 0.83rem;
  color: var(--faint);
}

.dw-body { padding: 30px 0 6px; }

/* ── Depth 2 — the fuller argument ── */

.dp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.dp { padding: 26px 26px 28px; background: var(--bg); }
.dp-p { background: linear-gradient(180deg, var(--p-wash), transparent 42%), var(--bg); }
.dp-d { background: linear-gradient(180deg, var(--d-wash), transparent 42%), var(--bg); }

.dp-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 22px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}

.dp-p .dp-tag { color: var(--p); }
.dp-d .dp-tag { color: var(--d); }

.dp-block { margin-bottom: 20px; }
.dp-block:last-child { margin-bottom: 0; }

/* What a side's case rests on, in docket numbers. Set below the prose it
   belongs to, in the mono every citation here is set in. Its size and
   ink are the paragraph's: it is a <p> in a dp-block, and the rule for
   those, just below, outranks this one. */
.dp-cite {
  margin-top: 7px;
  font-family: var(--mono);
  letter-spacing: 0.1em;
}

.dp-block h4 {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
  font-weight: 400;
}

.dp-block p {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.66;
}

.dp-block em { font-style: italic; color: var(--ink); }

/* The weak point is the honest part of each column, so it is marked
   rather than buried — same treatment on both sides. */
.dp-weak {
  margin-top: 24px;
  padding: 14px 16px;
  border-radius: 2px;
  background: rgba(23, 20, 15, 0.035);
  border-left: 2px solid rgba(23, 20, 15, 0.24);
}

.dp-weak h4 { color: var(--muted); }
.dp-weak p { color: var(--muted); }

/* ── Depth 3 — the logic chain ── */

.chain {
  list-style: none;
  position: relative;
  padding-left: 30px;
}

/* the spine */
.chain::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule) 6%, var(--rule) 94%, transparent);
}

.cn { position: relative; padding: 0 0 26px; }
.cn:last-child { padding-bottom: 0; }

.cn::before {
  content: '';
  position: absolute;
  left: -30px;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule);
}

.cn-test::before { border-color: var(--court); }
.cn-p::before { border-color: var(--p); }
.cn-d::before { border-color: var(--d); }

.cn-k {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--faint);
}

.cn-test .cn-k { color: var(--court); }
.cn-p .cn-k { color: var(--p); }
.cn-d .cn-k { color: var(--d); }

.cn-t {
  font-size: 0.93rem;
  color: var(--ink-2);
  line-height: 1.6;
  max-width: 46em;
}

.cn-t b { font-weight: 500; color: var(--ink); }
.cn-t em { font-style: italic; color: var(--ink); }

.cn-test .cn-t { color: var(--ink); }

/* branch */
.cn-fork::before {
  border-radius: 1px;
  transform: rotate(45deg);
  border-color: var(--muted);
}

.fork {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 2px;
}

.arm {
  padding: 14px 16px 16px;
  border-radius: 2px;
  border-top: 2px solid;
}

.arm-p { background: var(--p-wash); border-color: var(--p-edge); }
.arm-d { background: var(--d-wash); border-color: var(--d-edge); }

.arm-k {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.arm-p .arm-k { color: var(--p); }
.arm-d .arm-k { color: var(--d); }

.arm-t {
  font-size: 0.88rem;
  color: var(--ink-2);
  line-height: 1.58;
}

.arm-t b { font-weight: 500; color: var(--ink); }

/* terminal */
.cn-out::before {
  background: var(--court);
  border-color: var(--court);
  box-shadow: 0 0 0 4px rgba(111, 74, 46, 0.16);
}

.cn-out {
  margin-top: 6px;
  padding: 16px 20px;
  border-radius: 2px;
  background: linear-gradient(100deg, rgba(111, 74, 46, 0.13), transparent 68%);
  border-left: 2px solid var(--court);
  background-blend-mode: multiply;
}

.cn-out .cn-k { color: var(--court); }
.cn-out .cn-t { color: var(--ink); font-size: 0.96rem; }
.cn-out .cn-t b { font-weight: 600; }

/* On paper every drawer is open and nothing is a control. A shut
   <details> hides its contents through the box the browser wraps them
   in; a browser that does not know that box prints it as it was left. */
@media print {
  .depth-all,
  .dw-i { display: none; }
  .drawer::details-content { content-visibility: visible; }
}

/* ═══════════════════════════════════════════════
   Case flow

   The logic of a case as a map: what has to be answered, in what
   order, and where each answer leads. It has a page of its own in
   every case, the TLDR View, and is meant to be taken in at a
   glance.

   Every card in the chain is a question, and every line out of one is
   an answer to it, said on the line at the place it leaves the card.
   The questions run down the middle in the court's ink. An answer
   that leads to another question goes straight down to it. An answer
   that ends things turns out to the side, into a lane, and the lane
   runs down to the ending: left for what is good for the side that
   filed, right for the side that answered, as everywhere else here.
   The ending stands in that lane beside the question that leads to
   it, so the ways out of a card are the lines that touch it and
   nothing else.

   Every case is laid out the one way. Nothing stands ahead of the
   first question: what a case starts from is the strip across the
   head of the question it bears on. Questions that between them
   settle one thing stand inside the question they settle. An ending
   says what the outcome is and, under a rule, what follows from it.

   A line is pale as the route is laid out and dark where the case has
   actually been, and the answer on it is an outline or filled in to
   match.

   Every connector is a border or a background on an element that is
   already there. Nothing is measured and nothing is drawn by script, so
   the map is whole with JavaScript off and reflows like text.

   What a page writes:

     ol.cf-flow      the chain, top to bottom; cf-sides when the two
                     lanes are the two sides', which is every case so
                     far
     li.cf-step      one question and its ways out: the card, then a
                     div.cf-way for each answer. The last step may be
                     an ending alone, where the chain runs down into one
     .cf-way-d       the answer that goes down to the next question
     .cf-way-l, -r   an answer that goes out to a lane, holding the
                     ending it leads to
     p.cf-ans        the answer, on its line
     p.cf-ban        a strip across the head of a card: what the
                     question is about, where its own words do not say
     div.cf-own      in a question that is answered by others, the
                     part of the card that is its own
     div.cf-parts    the others: a p.cf-rule saying how many are
                     needed, then a div.cf-part for each, with a
                     p.cf-op between them
     .is-done        on whatever the case has been through
     .is-here        on the step the case is waiting at, with a
                     p.cf-here in its card
     .cf-dash        on a way that is not an answer

   A card is cf-c when it is the court's (cf-q for a question), cf-p or
   cf-d when it is a side's, and cf-out for an ending.
   ═══════════════════════════════════════════════ */

.cf { container: cf / inline-size; }

/* ── where it stands ──
   One line ahead of the map, under the mark the ledger gives the
   court's line on a question. */

.cf-now {
  max-width: 46em;
  padding: 12px 0 12px 18px;
  border-left: 2px solid rgba(111, 74, 46, 0.5);
  font-size: 0.98rem;
  color: var(--ink-2);
}

.cf-now-l {
  margin-right: 14px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
}

/* ── the key, and the control beside it ── */

.cf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin: 22px 0 34px;
}

.cf-head .depth-all { margin: 0; }

.cf-key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 9px 26px;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.cf-key li { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.cf-key li::before { content: ''; flex: none; }

.cf-key-p { color: var(--tl-p-ink); font-weight: 600; }
.cf-key-d { color: var(--tl-d-ink); font-weight: 600; }

/* Each is the mark it names: the rule along the head of a side's card,
   the court's diamond filled or hollow, and the line in its two
   weights. */
.cf-key-p::before,
.cf-key-d::before {
  width: 18px;
  height: 4px;
  border-radius: 1px;
  background: var(--p);
}

.cf-key-d::before { background: var(--d); }

.cf-key-done::before,
.cf-key-open::before {
  width: 9px;
  height: 9px;
  border: 2px solid var(--court);
  border-radius: 1px;
  background: var(--court);
  transform: rotate(45deg);
}

.cf-key-open::before { background: var(--tl-card); }

.cf-key-line::before {
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--court) 62%, var(--tl-c-line) 0);
}

/* ── the chain ──
   Three columns: a lane, the questions, a lane. Every step is a row of
   its own across all three, so whatever stands in a lane stands beside
   the question it belongs to. */

.cf-flow {
  --cf-gap: 34px;        /* between a lane and the middle */
  --cf-tap: 31px;        /* how far down a card's side an answer leaves it */
  --cf-fall: 78px;       /* from the head of a step to an ending in its lane */
  --cf-stem: 62px;       /* from a question down to the next, at least */
  --cf-r: 12px;          /* a turn */

  /* The line, the same line once the case has been along it, and the
     ink for a word set on it. */
  --cf-pale: var(--tl-c-line);
  --cf-dark: var(--court);
  --cf-word: var(--tl-c-ink);

  /* The same three for each lane. The court's, until the page says the
     lanes are the two sides'. */
  --cf-lp: var(--tl-c-line);
  --cf-ld: var(--court);
  --cf-lw: var(--tl-c-ink);
  --cf-rp: var(--tl-c-line);
  --cf-rd: var(--court);
  --cf-rw: var(--tl-c-ink);

  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: var(--cf-gap);
  max-width: 1100px;
  margin-inline: auto;
}

.cf-flow.cf-sides {
  --cf-lp: var(--tl-p-line);
  --cf-ld: var(--p);
  --cf-lw: var(--tl-p-ink);
  --cf-rp: var(--tl-d-line);
  --cf-rd: var(--d);
  --cf-rw: var(--tl-d-ink);
}

/* A question and its ways out. Two rows: the card, and under it the
   way down, which takes up whatever a lane needs beyond the card. */
.cf-step {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto 1fr;
}

.cf-step > .cf-card {
  grid-column: 2;
  grid-row: 1;
}

/* ── an answer ──
   A capsule, which nothing else on the page is, so it cannot be taken
   for a stamp or a flag. Outlined on a way the case has not taken, and
   filled on one it has. */

.cf-way {
  --cf-ink: var(--cf-pale);
  position: relative;
}

.cf-way.is-done { --cf-ink: var(--cf-dark); }

.cf-ans {
  position: relative;
  z-index: 4;
  padding: 4px 11px 3px;
  border: 1.5px solid var(--cf-dark);
  border-radius: 999px;
  background: var(--tl-card);
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.3;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cf-word);
}

.cf-way.is-done > .cf-ans {
  background: var(--cf-dark);
  color: var(--tl-card);
}

.cf-way.cf-dash > .cf-ans { border-style: dashed; }

/* ── the way down ──
   The line is the way's own background, in two layers: the pale line,
   and the dark one laid over as much of it as the case has travelled.
   The answer sits on the bottom edge of the card it answers. */

.cf-way-d {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: var(--cf-stem);
  background:
    linear-gradient(var(--cf-dark), var(--cf-dark)) no-repeat 50% 0 / 2px var(--cf-run, 0%),
    linear-gradient(var(--cf-pale), var(--cf-pale)) no-repeat 50% 0 / 2px 100%;
}

.cf-way-d.is-done { --cf-run: 100%; }

.cf-way-d.cf-dash {
  background: repeating-linear-gradient(to bottom, var(--cf-ink) 0 5px, transparent 5px 9px) no-repeat 50% 0 / 2px 100%;
}

.cf-way-d > .cf-ans { margin-top: -12px; }

/* ── the ways out ──
   Out of the card's side, along to the middle of the lane, round the
   turn and down. Left is the side that filed and right the side that
   answered, as it is everywhere else on the page. */

.cf-way-l,
.cf-way-r {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  padding-top: var(--cf-fall);
}

.cf-way-l {
  grid-column: 1;
  --cf-pale: var(--cf-lp);
  --cf-dark: var(--cf-ld);
  --cf-word: var(--cf-lw);
}

.cf-way-r {
  grid-column: 3;
  --cf-pale: var(--cf-rp);
  --cf-dark: var(--cf-rd);
  --cf-word: var(--cf-rw);
}

.cf-way-l::before,
.cf-way-r::before {
  content: '';
  position: absolute;
  top: var(--cf-tap);
  /* Down to the head of the ending, short by the length of the arrow. */
  height: calc(var(--cf-fall) - var(--cf-tap) - 9px);
  border: 0 solid var(--cf-ink);
  border-top-width: 2px;
  pointer-events: none;
}

.cf-way-l::before {
  left: calc(50% - 1px);
  right: calc(var(--cf-gap) * -1);
  border-left-width: 2px;
  border-top-left-radius: var(--cf-r);
}

.cf-way-r::before {
  left: calc(var(--cf-gap) * -1);
  right: calc(50% - 1px);
  border-right-width: 2px;
  border-top-right-radius: var(--cf-r);
}

/* The answer, just clear of the card it leaves. */
.cf-way-l > .cf-ans,
.cf-way-r > .cf-ans {
  position: absolute;
  top: calc(var(--cf-tap) + 1px);
  translate: 0 -50%;
}

.cf-way-l > .cf-ans { right: calc(var(--cf-gap) * -1 + 9px); }
.cf-way-r > .cf-ans { left: calc(var(--cf-gap) * -1 + 9px); }

/* The arrow a lane ends in, on the head of the ending. */
.cf-way-l > .cf-card::before,
.cf-way-r > .cf-card::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  translate: -50% 0;
  border: solid transparent;
  border-width: 9px 6.5px 0;
  border-top-color: var(--cf-ink);
}

/* ── how far the case has got ──
   Whatever the case has been through is drawn dark. Where the browser
   can tie an animation to the scroll, the dark runs down the route as
   the reader does and stops where the case stopped: the chronology's
   rail, under the same two guards. Anywhere else it is simply drawn. */

@keyframes cf-run {
  from { background-size: 2px 0%, 2px 100%; }
  to { background-size: 2px 100%, 2px 100%; }
}

@keyframes cf-turn {
  from { border-color: var(--cf-pale); }
  to { border-color: var(--cf-dark); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .cf-way-d.is-done:not(.cf-dash) {
      animation: cf-run linear both;
      animation-timeline: view(block 46% 54%);
    }

    .cf-way-l.is-done::before,
    .cf-way-r.is-done::before {
      animation: cf-turn linear both;
      animation-timeline: view(block 46% 54%);
    }
  }
}

/* ── a card ──
   The chronology's index card: the lighter stock, solid, lifted a
   little. It takes a z-index for the reason those do, which is the
   exhibit wash lying over every band.

   Everything on it is set to the middle, under the mark the line
   arrives at. */

.cf-card {
  --cf-px: 19px;
  --cf-pt: 16px;

  position: relative;
  z-index: 3;
  padding: var(--cf-pt) var(--cf-px) 16px;
  border: 1px solid var(--tl-edge);
  border-radius: 3px;
  background: var(--tl-card);
  box-shadow: var(--tl-lift);
  text-align: center;
  transition: box-shadow 0.25s ease;
}

@media (hover: hover) {
  .cf-card:hover { box-shadow: var(--tl-lift-up); }
}

.cf-card :focus-visible { outline-color: var(--court); }

.cf-c {
  border-color: color-mix(in oklab, var(--court) 42%, var(--tl-card));
  border-top: 3px solid var(--court);
}

.cf-p { border-top: 3px solid var(--p); }
.cf-d { border-top: 3px solid var(--d); }

/* What sort of thing the card is, in a line over its text. It is folded
   away with the rest, so a shut card is its text and nothing more. */
.cf-k {
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

.cf-p .cf-k { color: var(--tl-p-ink); }
.cf-d .cf-k { color: var(--tl-d-ink); }

/* What the question is about, where its own words do not say: a strip
   across the head of the card, in the ink of whoever the matter
   belongs to. Unlike the line above it is never folded away, because
   without it the question under it has no subject. */
.cf-ban {
  --cf-ban: var(--court);

  margin: calc(var(--cf-pt) * -1) calc(var(--cf-px) * -1) 13px;
  padding: 7px 14px 6px;
  border-bottom: 1px solid color-mix(in oklab, var(--cf-ban) 24%, var(--tl-card));
  background: color-mix(in oklab, var(--cf-ban) 9%, var(--tl-card));
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.45;
  text-transform: uppercase;
  text-wrap: balance;
  color: color-mix(in oklab, var(--cf-ban) 84%, var(--ink));
}

.cf-ban-p { --cf-ban: var(--p); }
.cf-ban-d { --cf-ban: var(--d); }

/* Under a mark, the strip is deeper by what the mark takes of it. */
.cf-card:has(> .cf-pin) > .cf-ban { padding-top: 12px; }

/* The card's text. Held in a little at either side, which keeps its
   last line clear of the control in the corner and keeps it centred. */
.cf-h {
  padding-inline: 12px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0;
  font-size: 1.14rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--ink);
}

.cf-q .cf-h { font-size: 1.28rem; }

/* The explanation, which runs to a paragraph or two. That much text
   centred has no edge for the eye to come back to, so it is set as
   prose: ranged left under the centred text, with air between its
   paragraphs. */
.cf-b {
  margin-top: 10px;
  font-size: 0.93rem;
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
  color: rgba(23, 20, 15, 0.84);
}

.cf-b + .cf-b { margin-top: 0.75em; }

/* ── a question answered by others ──
   Some questions are not answered outright: the answer is yes if one
   of two smaller questions is, or only if both are. Those stand inside
   the card of the question they answer, under a line that says which
   it is, so the ways out of the card are still the answers to the
   question at its head. */

.cf-own { position: relative; }

.cf-parts {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}

.cf-rule,
.cf-op {
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

.cf-rule { margin-bottom: 11px; }
.cf-op { margin: 7px 0; }

.cf-part {
  --cf-px: 15px;
  --cf-pt: 13px;

  position: relative;
  padding: var(--cf-pt) var(--cf-px) 14px;
  border: 1px solid var(--tl-edge);
  border-radius: 3px;
  background: color-mix(in oklab, var(--tl-card) 52%, var(--bg-band));
  overflow: clip;
}

.cf-q .cf-part .cf-h { font-size: 1.08rem; }

/* ── the fold ──
   A card is shut to its text. It opens for the rest: the line that
   says what it is, above the text, and below it how the question
   stands and the explanation. The rest ships open, as the chronology's
   extra layer does, so a reader with no JavaScript has the whole map
   written out and no dead button. The script shuts the cards and shows
   the control, which sits in the bottom corner.

   Shut, the rest is hidden as well as collapsed, which takes it out of
   a screen reader's way.

   A question's parts open and shut each on its own, so a card opens
   only what is its own and leaves alone what is inside a part. */

.cf-more {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--tl-edge);
  border-radius: 2px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.18s, border-color 0.18s;
}

.cf-more:hover { border-color: rgba(23, 20, 15, 0.34); background: rgba(23, 20, 15, 0.045); }

/* In the same place on a card whose own part is the upper half of it:
   the corner of that part, out at the card's edge. */
.cf-own > .cf-more {
  right: calc(6px - var(--cf-px));
  bottom: 0;
}

/* The shared mark (see "Opening and shutting"), in the button's own ink. */
.cf-more-i { --mark: currentColor; }

.cf.js-collapse .cf-x { display: grid; grid-template-rows: 0fr; }
.cf.js-collapse .cf-x-in { overflow: hidden; min-height: 0; opacity: 0; visibility: hidden; }
.cf.js-collapse .cf-card.is-open .cf-x:not(.cf-part *),
.cf.js-collapse .cf-part.is-open .cf-x { grid-template-rows: 1fr; }
.cf.js-collapse .cf-card.is-open .cf-x-in:not(.cf-part *),
.cf.js-collapse .cf-part.is-open .cf-x-in { opacity: 1; visibility: visible; }

/* Armed after the collapse, so the first close does not animate. */
.cf.js-anim .cf-x { transition: grid-template-rows 0.34s cubic-bezier(0.4, 0, 0.2, 1); }
.cf.js-anim .cf-x-in { transition: opacity 0.16s ease, visibility 0s linear 0.34s; }
.cf.js-anim .cf-card.is-open .cf-x-in:not(.cf-part *),
.cf.js-anim .cf-part.is-open .cf-x-in { transition: opacity 0.28s ease 0.1s, visibility 0s; }

/* The whole of a card that has a control is a place to press. */
.cf.js-collapse :is(.cf-card, .cf-part):has(.cf-more) { cursor: pointer; }

/* Open, such a card keeps a band at its foot for the control, so the
   last line of its text cannot run under it. */
.cf.js-collapse .cf-card.is-open:has(> .cf-more),
.cf.js-collapse .cf-part.is-open { padding-bottom: 34px; }

.cf.js-collapse .cf-card.is-open > .cf-own { padding-bottom: 30px; }

.cf.js-anim :is(.cf-card, .cf-part, .cf-own) {
  transition: box-shadow 0.25s ease, padding-bottom 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── where the line arrives ──
   A diamond, the court's: the chronology's own mark, with its
   collar. Hollow until the case has been through it. An ending in a
   lane takes an arrow instead, which is drawn with the lane. */

.cf-pin {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 1;
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  translate: 0 calc(-50% - 1.5px);
  rotate: 45deg;
  border: 2px solid var(--court);
  border-radius: 1px;
  background: var(--tl-card);
  box-shadow: 0 0 0 4px var(--bg-band);
}

.is-done > .cf-card > .cf-pin,
.is-here > .cf-card > .cf-pin { background: var(--court); }

/* ── the case is here ──
   A flag beside the mark, and the mark gives off a ring. */

.cf-here {
  position: absolute;
  top: 0;
  left: calc(50% + 30px);
  z-index: 1;
  translate: 0 calc(-50% - 1.5px);
  padding: 4px 10px 4px 9px;
  border-radius: 2px;
  background: var(--ink);
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  /* One line wherever it fits beside the mark, and two before it would
     reach past the corner of a narrow card. */
  max-width: calc(50% - 34px);
  text-align: left;
  color: var(--tl-card);
}

.cf-here::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -5px;
  width: 10px;
  height: 10px;
  translate: 0 -50%;
  rotate: 45deg;
  background: var(--ink);
}

@keyframes cf-here {
  from { box-shadow: 0 0 0 4px var(--bg-band), 0 0 0 4px color-mix(in oklab, var(--court) 60%, transparent); }
  to { box-shadow: 0 0 0 4px var(--bg-band), 0 0 0 13px transparent; }
}

@media (prefers-reduced-motion: no-preference) {
  .is-here > .cf-card > .cf-pin { animation: cf-here 2.4s ease-out infinite; }
}

/* ── how a question stands ──
   The chronology's stamp, and its rule that how much ink says how
   settled: decided is solid, not in dispute is half-toned, open is an
   outline, and here a dashed one. It heads the explanation, inside the
   fold, so a shut card asks its question without giving the answer
   away. */

.cf-stamp { display: flex; justify-content: center; margin-top: 9px; }

.cf-st {
  padding: 2px 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tl-c-ink);
}

.cf-st-done { border-color: var(--court); background: var(--court); color: var(--tl-card); }
.cf-st-set { background: color-mix(in oklab, var(--court) 24%, transparent); }
.cf-st-open { border-style: dashed; }

/* ── under the text: who has to prove it ── */

.cf-who {
  margin-top: 0.75em;
  font-size: 0.9rem;
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
  color: var(--ink-2);
}

.cf-l {
  margin-right: 0.9em;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

/* ── an ending ── */

.cf-out { border-top-width: 4px; }
.cf-out.cf-p { background: color-mix(in oklab, var(--p) 6%, var(--tl-card)); }
.cf-out.cf-d { background: color-mix(in oklab, var(--d) 6%, var(--tl-card)); }
.cf-out.cf-c { background: color-mix(in oklab, var(--court) 8%, var(--tl-card)); }
.cf-out > .cf-h { font-size: 1.3rem; }

/* What follows from it, under a rule. */
.cf-then {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.cf-then .cf-h { font-size: 1.08rem; }

/* How many went this way: a box to each, inked where it did. */
.cf-toks { display: flex; justify-content: center; gap: 7px; margin-top: 11px; }

.cf-tok {
  width: 17px;
  height: 17px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.cf-tok.is-on { background: currentColor; }

.cf-p .cf-toks { color: var(--p); }
.cf-d .cf-toks { color: var(--d); }

/* ── one column ──
   With less room than three columns need there are no lanes. The line
   runs down the left of the cards instead, and each way out of a
   question is a rung off it, in the order the page gives them: the
   answer, and then the ending it leads to, set in from the
   line. The way on to the next question is the line itself. Asked of
   the map's own
   width and not the window's, so it is right wherever the map is put. */

@container cf (width < 940px) {

  .cf-flow {
    --cf-trunk: 22px;      /* where the line runs, in from the left */

    display: block;
    max-width: 640px;
  }

  .cf-step { display: block; }

  /* Every way is hung from the line, and draws the stretch of it that
     passes: all of its own height where something follows, and down
     to its rung where nothing does. */
  .cf-way { margin-left: var(--cf-trunk); }

  .cf-way::after {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 29px;
    background: var(--tl-c-line);
  }

  .cf-way:has(~ .cf-way)::after,
  .cf-way-d::after { height: 100%; }

  .cf-step:has(> .cf-way-d.is-done) > .cf-way::after { background: var(--court); }

  .cf-way-d.cf-dash::after {
    background: repeating-linear-gradient(to bottom, var(--tl-c-line) 0 5px, transparent 5px 9px);
  }

  .cf-way-l,
  .cf-way-r {
    display: block;
    padding: 16px 0 6px 26px;
  }

  /* The rung. */
  .cf-way-l::before,
  .cf-way-r::before {
    top: 28px;
    right: auto;
    bottom: auto;
    left: 0;
    width: 20px;
    height: 0;
    border-width: 2px 0 0;
    border-radius: 0;
  }

  .cf-way-l > .cf-ans,
  .cf-way-r > .cf-ans {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    translate: none;
    display: inline-block;
    vertical-align: middle;
  }

  .cf-way > .cf-card { margin-top: 13px; }
  .cf-way > .cf-card::before { content: none; }

  .cf-way-d {
    display: block;
    min-height: 0;
    padding: 16px 0 20px;
    background: none;
    animation: none;
  }

  .cf-way-d > .cf-ans {
    display: inline-block;
    margin: 0 0 0 -13px;
  }

  .cf-way-d:not(:has(> .cf-ans)) { padding: 0; height: 30px; }

  /* The mark moves over to where the line now comes in. */
  .cf-step > .cf-card > .cf-pin { left: var(--cf-trunk); }

  .cf-card { --cf-px: 16px; }

  /* Beside the mark there is no room for the flag, so it leads the card
     instead. */
  .cf-here {
    position: static;
    translate: none;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 11px;
    text-align: center;
  }

  .cf-here::before { display: none; }
}

/* On paper every card is open and nothing is a control. */
@media print {
  .cf-card { box-shadow: none; }
  .cf-more, .cf-all { display: none; }
  .cf.js-collapse .cf-x { grid-template-rows: 1fr; }
  .cf.js-collapse .cf-x-in { opacity: 1; visibility: visible; }
}

.tree-caption {
  margin-top: 26px;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 48em;
}

/* ── a second chain ──
   Where one page holds two prosecutions that decide nothing in each
   other (State v. Chauvin's state and federal cases), each runs down a
   map of its own, an ol.cf-flow under a div.cf-chain that names it. The
   head stands over the middle column, where the questions run, and a
   later chain's head is ruled off from the end of the one before. */
.cf-chain {
  max-width: 34em;
  margin: 0 auto 26px;
  text-align: center;
}

.cf-flow + .cf-chain {
  margin-top: 64px;
  padding-top: 34px;
  border-top: 1px solid var(--tl-c-line);
}

.cf-chain-h {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--court);
}

.cf-chain-n {
  margin-top: 8px;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* ═══════════════════════════════════════════════
   Chronology

   A centre rail carrying the page's spatial rule through to the end:
   what the plaintiff did on the left, the defendant on the right, the
   court down the middle.

   Every entry is a card of lighter stock lying on the band, and the
   card has to be solid. The exhibit wash is a fixed layer at z-index 3
   over every band on the page, so anything in a band without a z-index
   of its own has the evidence printed across it. A card takes the same
   z-index and comes later in the document, which is enough to put it
   on top: the exhibits drift underneath and go out of sight behind its
   edge, and that is where the page gets its depth. The paper grain is
   one above, at 4, so a card keeps the same tooth as the page.
   ═══════════════════════════════════════════════ */

/* The stock and the inks are set with the bands, further up, because the
   case flow lays the same cards. These are the chronology's own
   measures. */
.band-time {
  --tl-gutter: 104px;
  --tl-node: 15px;
  --tl-bar: 42px;
}

/* ── the key, and the bar it becomes ──
   Four marks and what they mean. On a screen wide enough for three
   columns the same element stays on screen for the length of the
   chronology, naming each side over the column it owns, so ten screens
   in nobody has to remember which colour was whose. That part is set
   with the columns, further down. */

.tl-key {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 44px;
}

.tk {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-2);
}

/* Each is the mark that side leaves on the rail. */
.tk::before {
  content: '';
  flex: none;
  width: 11px;
  height: 11px;
  border: 3px solid var(--rule);
  border-radius: 50%;
  background: var(--tl-card);
}

.tk-p { color: var(--tl-p-ink); font-weight: 600; }
.tk-d { color: var(--tl-d-ink); font-weight: 600; }
.tk-c { color: var(--tl-c-ink); font-weight: 600; }
.tk-n { color: var(--faint); }

.tk-p::before { border-color: var(--p); }
.tk-d::before { border-color: var(--d); }

.tk-c::before {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 0;
  background: var(--court);
  transform: rotate(45deg);
}

/* A blank the width of the diamond on the other side of the word, so
   it is the word that sits over the rail and not the pair. */
.tk-c::after { content: ''; flex: none; width: 9px; }

.tk-n::before {
  width: 9px;
  height: 9px;
  border-width: 2px;
  border-color: var(--tl-n-line);
  background: none;
}

/* The two halves of the bar, and the label the script writes into.
   Until there is a bar there is nothing for them to do: the halves
   dissolve into the row and the label is put away. */
.tk-l,
.tk-r { display: contents; }

.tk-here { display: none; }

/* ── the rail ──
   The court keeps to the middle, so the line down the middle is drawn
   in the court's ink. */

.tl {
  list-style: none;
  position: relative;
  padding: 22px 0 0;
}

.tl::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(180deg, transparent, var(--tl-c-line) 48px, var(--tl-c-line) calc(100% - 40px), transparent);
}

/* ── an event ── */

/* The margin is for an entry arrived at by its own address, from the
   courtroom view or from a link somebody sent: it lands clear of the
   nav and the bar. */
.tl-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tl-gutter) minmax(0, 1fr);
  position: relative;
  padding: 12px 0;
  scroll-margin-top: 112px;
}

/* The mark an event leaves on the rail: a ring in its side's ink. It
   sits above the cards, because the court's rides the top edge of its
   own card, and it wears a collar of the band's colour so the rail
   stops short of it instead of running into it. */
.tl-ev::before {
  --tl-node-bg: var(--tl-card);
  content: '';
  position: absolute;
  left: 50%;
  top: 30px;
  z-index: 4;
  width: var(--tl-node);
  height: var(--tl-node);
  margin-left: calc(var(--tl-node) / -2);
  border: 3px solid currentColor;
  border-radius: 50%;
  background: var(--tl-node-bg);
  box-shadow: 0 0 0 4px var(--bg-band);
  transition: scale 0.25s ease;
}

.tl-p::before { color: var(--p); }
.tl-d::before { color: var(--d); }

/* Neither side's: smaller, and in no ink at all. */
.tl-n::before {
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-width: 2px;
  color: var(--tl-n-line);
}

/* The court's is a diamond, and solid, so it is told from a side's
   ring at a glance and without colour. */
.tl-court::before {
  width: 13px;
  height: 13px;
  margin-left: -6.5px;
  border-radius: 1px;
  background: var(--court);
  color: var(--court);
  transform: rotate(45deg);
}

/* ── a card ── */

.tl-c {
  position: relative;
  z-index: 3;
  padding: 17px 22px 19px;
  border: 1px solid var(--tl-edge);
  border-radius: 3px;
  background: var(--tl-card);
  box-shadow: var(--tl-lift);
  transition: box-shadow 0.25s ease;
}

/* The court's card carries the court's ink along its top edge, under
   its mark. A side's card carries its ink down the edge that faces the
   rail, which is set with the columns. What neither side did has no
   ink on it at all and is otherwise the same card, because it is often
   the thing the whole case is about. */
.tl-court .tl-c {
  border-color: color-mix(in oklab, var(--court) 42%, var(--tl-card));
  border-top: 3px solid var(--court);
}

/* A card under the pointer, or holding the keyboard's focus, comes up
   off the page a little and its mark on the rail answers. */
@media (hover: hover) {
  .tl-c:hover { box-shadow: var(--tl-lift-up); }
  .tl-ev:has(.tl-c:hover)::before { scale: 1.22; }
}

.tl-ev:has(:focus-visible)::before { scale: 1.22; }

.tl-p :focus-visible { outline-color: var(--p); }
.tl-d :focus-visible { outline-color: var(--d); }
.tl-court :focus-visible,
.tl-n :focus-visible { outline-color: var(--court); }

/* The entry the address names is ringed. Held, not flashed: the reader
   may have come a long way down the page to find it. Two classes deep
   on purpose, so it beats the shadow a card takes under the pointer.
   The last shadow is the one every card casts. */
.tl .tl-ev:target .tl-c { box-shadow: 0 0 0 2px var(--court), 0 0 0 7px rgba(111, 74, 46, 0.16), var(--tl-lift); }

.tl-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 8px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.tl-p .tl-date { color: var(--tl-p-ink); }
.tl-d .tl-date { color: var(--tl-d-ink); }
.tl-court .tl-date { color: var(--tl-c-ink); }

.tl-h {
  font-family: var(--display);
  font-variation-settings: 'opsz' 30, 'SOFT' 0, 'WONK' 0;
  font-size: 1.17rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -0.014em;
  text-wrap: balance;
  color: var(--ink);
}

.tl-b {
  margin-top: 7px;
  font-size: 0.95rem;
  line-height: 1.55;
  text-wrap: pretty;
  color: rgba(23, 20, 15, 0.84);
}

/* the beats the case actually turns on */
.tl-ev.is-key .tl-h { font-size: 1.34rem; }
.tl-ev.is-key::before { box-shadow: 0 0 0 4px var(--bg-band), 0 0 0 6px currentColor, 0 0 0 9px var(--bg-band); }
.tl-court.is-key::before { width: 17px; height: 17px; margin-left: -8.5px; box-shadow: 0 0 0 4px var(--bg-band); }

/* said or done off the docket, and argued about on it */
.tl-ev.is-flag .tl-c { border-style: dashed; }
.tl-p.is-flag .tl-c { border-color: var(--tl-p-line); }
.tl-d.is-flag .tl-c { border-color: var(--tl-d-line); }

/* ── what the court did with it ──
   A ruling is the court speaking, so it is stamped in the court's ink
   and not in either side's. How much ink says how much was won: granted
   is solid, granted in part is half-toned, denied is left an outline. */

.chip {
  padding: 3px 9px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tl-c-ink);
}

.chip-g { border-color: var(--court); background: var(--court); color: var(--tl-card); }
.chip-p { background: color-mix(in oklab, var(--court) 24%, transparent); }

/* ── the extra layer ──
   Open by default. With no JavaScript the detail is simply present and
   the toggle never appears, so nothing sits behind a dead control.
   The height animates with grid-template-rows 0fr -> 1fr, which gets a
   real transition to auto height without measuring anything in script.

   Shut, the layer is hidden as well as collapsed, like a side's card
   and a card in the flow. Collapsed alone, every link in it is still a
   stop for the keyboard that nobody can see. */

.tl-x { display: grid; grid-template-rows: 1fr; }
.tl-x-in { overflow: hidden; min-height: 0; }

.tl.js-collapse .tl-x { grid-template-rows: 0fr; }
.tl.js-collapse .tl-x-in { opacity: 0; visibility: hidden; }
.tl.js-collapse .tl-c.is-open .tl-x { grid-template-rows: 1fr; }
.tl.js-collapse .tl-c.is-open .tl-x-in { opacity: 1; visibility: visible; }

/* Armed after the collapse, so the initial close does not animate. */
.tl.js-anim .tl-x { transition: grid-template-rows 0.36s cubic-bezier(0.4, 0, 0.2, 1); }
.tl.js-anim .tl-x-in { transition: opacity 0.16s ease, visibility 0s linear 0.36s; }
.tl.js-anim .tl-c.is-open .tl-x-in { transition: opacity 0.3s ease 0.12s, visibility 0s; }

.tl-x-t {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
  font-size: 0.93rem;
  line-height: 1.62;
  text-wrap: pretty;
  color: var(--ink-2);
}

.tl-cite {
  margin-top: 13px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  line-height: 2;
  color: var(--muted);
}

/* A drawer that holds a citation and nothing else still needs the rule
   that the paragraph above it would have drawn. */
.tl-x-in > .tl-cite:first-child {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid var(--rule);
}

.tl-cite::before {
  content: 'Source';
  margin-right: 0.9em;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

/* ── the citation as a door ──
   Every docket number in a citation links to the filing itself. The
   underline is offset and thin so a line of citations still reads as a
   citation rather than as a row of links, and the arrow marks that the
   filing opens away from the page. Entries with no PDF - the court's
   paperless orders - have nothing to open, so a page either leaves them
   as plain text or links the docket entry itself. */
.cite-doc {
  color: var(--muted);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s, text-decoration-color 0.15s;
}

.cite-doc::after {
  content: '\2197';
  margin-left: 0.15em;
  opacity: 0.5;
}

.cite-doc:hover,
.cite-doc:focus-visible {
  color: var(--court);
  text-decoration-color: var(--court);
}

/* On a chronology card the citation is the reason the drawer exists,
   so there the door looks like something to press: a tab the colour of
   the court's ink with the number on it. */
.tl-cite .cite-doc {
  padding: 2px 6px 2px 7px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--court) 11%, transparent);
  color: var(--tl-c-ink);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.15s, color 0.15s;
}

.tl-cite .cite-doc::after { opacity: 0.6; }

.tl-cite .cite-doc:hover,
.tl-cite .cite-doc:focus-visible {
  background: var(--court);
  color: var(--tl-card);
}

/* ── the toggle ──
   The button and its mark are the shared ones, set under "Opening and
   shutting". What is the chronology's own is the count beside the word
   and the ink of the mark. */

/* How many documents are behind the button. The script counts them
   and writes this, so a reader knows the sources are there before
   opening anything. */
.tl-more-n {
  margin-left: 3px;
  padding-left: 11px;
  border-left: 1px solid var(--tl-edge);
  font-weight: 400;
  color: var(--muted);
}

/* the mark takes the colour of whoever the card belongs to */
.tl-more-i { --mark: var(--muted); }
.tl-p .tl-more-i { --mark: var(--p); }
.tl-d .tl-more-i { --mark: var(--d); }
.tl-court .tl-more-i { --mark: var(--court); }

/* ── closing note ── */

.tl-close {
  max-width: 680px;
  margin: 40px auto 0;
  padding-left: 20px;
  border-left: 2px solid rgba(111, 74, 46, 0.45);
  font-size: 0.97rem;
  color: var(--ink-2);
}

.tl-close em { color: var(--court); font-style: italic; }

/* ── a new part of the case ──
   A heading across both columns with a rule out to either edge. It is
   painted in the band's colour and sits above the wash, so the rail
   stops for it and picks up again underneath. */

.tl-phase { position: relative; padding: 62px 0 26px; }

/* The first is where the rail starts, so none of the rail shows above
   it or beside it. */
.tl-phase:first-child { padding-top: 30px; background: var(--bg-band); }

.tl-phase-in {
  position: relative;
  z-index: 3;
  padding: 6px 0 10px;
  background: var(--bg-band);
  text-align: center;
}

.tl-phase-l {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 8px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--ink);
}

.tl-phase-l::before,
.tl-phase-l::after {
  content: '';
  flex: 1 1 40px;
  height: 1px;
  background: var(--tl-hair);
}

.tl-phase-n {
  max-width: 46em;
  margin: 0 auto;
  font-size: 0.95rem;
  text-wrap: balance;
  color: var(--muted);
}

/* ── the statutory line ──
   Both pages that have one say "below this line". So it is a line, the
   full width of both columns, with the plate sitting on it. */

.tl-mark { position: relative; padding: 34px 0; }

.tl-mark::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  z-index: 3;
  height: 5px;
  margin-top: -2.5px;
  border-top: 1px solid var(--court);
  border-bottom: 1px solid var(--court);
}

.tl-mark-in {
  position: relative;
  z-index: 3;
  max-width: 660px;
  margin: 0 auto;
  padding: 22px 30px 24px;
  border: 1px solid var(--court);
  border-radius: 3px;
  background: var(--tl-c-tint);
  /* The outer ring is the band's colour: it cuts the line short of the
     plate on either side. */
  box-shadow: var(--tl-lift), 0 0 0 6px var(--bg-band);
  text-align: center;
}

.tl-mark-d {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--tl-c-ink);
}

.tl-mark-t {
  margin-bottom: 10px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-size: clamp(1.3rem, 2.3vw, 1.62rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.tl-mark-b {
  max-width: 46em;
  margin: 0 auto;
  font-size: 0.95rem;
  text-wrap: pretty;
  color: rgba(23, 20, 15, 0.84);
}

/* ── terminal: what is still open ── */

.tl-end { position: relative; padding: 44px 0 0; }

.tl-end-in {
  position: relative;
  z-index: 3;
  max-width: 680px;
  margin: 0 auto;
  padding: 26px 30px 28px;
  border: 1px solid var(--tl-edge);
  border-top: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--tl-card);
  box-shadow: var(--tl-lift);
}

.tl-end-d {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-c-ink);
}

.tl-end-h {
  margin-bottom: 18px;
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 0;
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.tl-open { list-style: none; border-top: 1px solid var(--rule-soft); }

.tl-open li {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.o-d {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}

.o-t { font-size: 0.97rem; color: var(--ink-2); }
.tl-open li.is-major .o-t { color: var(--tl-c-ink); font-weight: 500; }

.tl-end-n {
  margin-top: 18px;
  font-size: 0.93rem;
  color: rgba(23, 20, 15, 0.84);
}

/* ── three columns ──
   Everything that only makes sense while there is a column for each
   side: which column a card takes, the edge its ink runs down, the run
   from the card to its mark, and the bar. The one-column version is
   with the rest of the narrow rules at the foot of the sheet. */

@media (width > 900px) {

  /* The key becomes the bar. It sticks under the nav for as long as
     the chronology is passing, the court's name over the rail and each
     side's name hard against it.

     Full width without a wrapper: the border image is painted out to
     the window's edges and takes up no room, so it cannot push the page
     sideways. Its last pixel is the rule under the bar. */
  .tl-key {
    position: sticky;
    top: 44px;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 30px;
    height: var(--tl-bar);
    border-image: linear-gradient(to bottom,
        var(--bg-band) calc(100% - 1px), var(--tl-hair) 0) fill 0 / 0 / 0 100vw;
  }

  /* Each side's half. Its name sits against the court's, and whatever
     else the half carries goes to the outer end and gives way first
     when there is not room for both. */
  .tk-l,
  .tk-r {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-width: 0;
  }

  .tk-p { flex: none; flex-direction: row-reverse; margin-left: auto; }
  .tk-d { flex: none; }
  .tk-c { justify-self: center; }
  .tk-n { flex: 0 1 auto; min-width: 0; overflow: hidden; }

  /* "Prosecution · state or federal" is a name and a gloss. The bar
     keeps the name; the gloss is for the key at rest on a phone. */
  .tk-g { display: none; }

  /* Which part of the case is passing under the bar. Empty until the
     script has something to say, and clipped before it can reach the
     side's name. */
  .tk-here {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--display);
    font-variation-settings: 'opsz' 14, 'SOFT' 0, 'WONK' 0;
    font-style: italic;
    font-size: 0.92rem;
    line-height: var(--tl-bar);
    color: var(--muted);
    opacity: 0;
    transition: opacity 0.25s;
  }

  .tk-here.is-on { opacity: 1; }

  /* the coloured edge always faces the rail */
  .tl-p .tl-c { grid-column: 1; border-right: 3px solid var(--p); }
  .tl-d .tl-c { grid-column: 3; border-left: 3px solid var(--d); }

  /* Court and off-docket events straddle the rail, and their mark
     rides the card's top edge like a pin. */
  .tl-court .tl-c,
  .tl-n .tl-c {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 auto;
    padding-top: 24px;
  }

  .tl-court .tl-c { max-width: 600px; }
  .tl-n .tl-c { max-width: 520px; }

  /* 12px is the row's own padding, so these centre each mark on the
     top edge of its card. The court's edge is 3px deep. */
  .tl-court::before { top: calc(12px + 1.5px - 6.5px); }
  .tl-court.is-key::before { top: calc(12px + 1.5px - 8.5px); }
  .tl-n::before { top: calc(12px - 5.5px); }

  /* The ruling is stamped in the far corner, away from the date. */
  .tl-court .tl-date { justify-content: space-between; }

  /* the run from a side's card to its mark, stopping at the collar */
  .tl-p .tl-c::after,
  .tl-d .tl-c::after {
    --tl-run: calc(var(--tl-gutter) / 2 - var(--tl-node) / 2 - 4px);
    content: '';
    position: absolute;
    top: 23.5px;
    width: var(--tl-run);
    height: 2px;
  }

  .tl-p .tl-c::after { right: calc(-3px - var(--tl-run)); background: var(--tl-p-line); }
  .tl-d .tl-c::after { left: calc(-3px - var(--tl-run)); background: var(--tl-d-line); }
}

/* ── the two sides, beside the first entry ──
   The chronology opens with who is in the case: the plaintiff's card
   to the left of the first entry and the defendant's to the right,
   which is the page's rule said once more before the rail gets going.
   They are the case page's cards (see "The two sides") and they are in
   the first entry's own row, tl-first, so opening one pushes the rest
   of the rail down instead of lying over it.

   The entry they stand beside straddles the rail. The markup says why
   it has to. */

/* Wide: each card keeps to its corner of the page, where it stands on
   the case page, and only comes down to be level with the first entry.
   The corners are outside the reading column, so each is pulled out of
   the row by the distance from the column's edge to the corner. */
@media (width >= 1200px) {
  .tl-first {
    --tl-out: calc((100vw - min(100vw, var(--wrap))) / 2 + var(--gut) - clamp(28px, 3vw, 52px));
  }

  .tl-first > .party {
    grid-row: 1;
    align-self: start;
    width: clamp(252px, 21vw, 322px);
  }

  .tl-first > .party-p { grid-column: 1; justify-self: start; margin-left: calc(-1 * var(--tl-out)); }
  .tl-first > .party-d { grid-column: 3; justify-self: end; margin-right: calc(-1 * var(--tl-out)); }

  /* Kept to its own height, or it would be drawn out to a card's when
     one is opened beside it. */
  .tl-first > .tl-c { grid-row: 1; align-self: start; }
}

/* Three columns and no corners to speak of: the row is the two cards
   and the entry between them, and the entry gives up width before the
   cards do. */
@media (900px < width < 1200px) {
  .tl-first {
    grid-template-columns: minmax(196px, 1fr) minmax(0, 520px) minmax(196px, 1fr);
    column-gap: 22px;
  }

  .tl-first > .party { grid-row: 1; align-self: start; padding: 15px 16px 14px; }
  .tl-first > .party-p { grid-column: 1; }
  .tl-first > .party-d { grid-column: 3; }
  .tl-first > .tl-c { grid-column: 2; grid-row: 1; align-self: start; max-width: none; }
  .tl-first .party-name { font-size: 1.36rem; }
}

/* Between these widths the bar has room for the three names and the
   part of the case, and not for the fourth mark as well. */
@media (900px < width <= 1100px) {
  .tk-n { display: none; }
}

/* ── the rail inks in ──
   The rail fills, and each mark on it fills, as the reader passes: what
   has been read is inked and what is still to come is outlined. It is
   tied to the scroll position and not to a clock, so scrolling back
   un-inks it.

   No script. The line the timelines measure against is squeezed to a
   hair just above the middle of the window, so the rail's fill ends
   there and a mark turns over as it crosses. A browser that cannot do
   this draws the rail and the marks and leaves it at that, and so does
   one whose reader has asked for less movement. */

@keyframes tl-ink {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes tl-pass {
  from { background-color: var(--tl-node-bg); }
  to { background-color: currentColor; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .tl::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 0;
      bottom: 0;
      width: 2px;
      margin-left: -1px;
      background: linear-gradient(180deg, transparent, var(--court) 48px);
      transform-origin: 50% 0;
      animation: tl-ink linear both;
      animation-timeline: view(block 46% 54%);
    }

    .tl-ev::before,
    .tl-first > .tl-c::before {
      animation: tl-pass linear both;
      animation-timeline: view(block 46% 54%);
    }
  }
}

/* On paper every card is open and nothing is a control, as in the flow. */
@media print {
  .tl-key { position: static; }
  .tl::after { display: none; }
  .tl-c, .tl-mark-in, .tl-end-in { box-shadow: none; }
  .tl-more { display: none; }
  .tl.js-collapse .tl-x { grid-template-rows: 1fr; }
  .tl.js-collapse .tl-x-in { opacity: 1; visibility: visible; }
}

/* ═══════════════════════════════════════════════
   Notes
   ═══════════════════════════════════════════════ */

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(252px, 1fr));
  gap: 40px 48px;
  margin-top: 54px;
}

.note h3 {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--court);
  margin-bottom: 12px;
}

.note p { font-size: 0.91rem; color: var(--muted); }

/* A note that gives a figure or quotes someone names its documents on a
   line of its own under the prose, set like the source line on a party
   card. Two classes, because .note p above would otherwise win on size
   and colour. */
.note .note-src {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.02em;
  line-height: 1.75;
  color: var(--faint);
}

.notes-updated {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-size: 0.84rem;
  color: var(--faint);
}

/* ═══════════════════════════════════════════════
   Footer
   ═══════════════════════════════════════════════ */

.page-foot {
  background: var(--bg-deep);
  padding: 40px 0;
}

.page-foot .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.page-foot a {
  color: var(--court);
  text-decoration: none;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
}

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

.foot-cite {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--faint);
}

/* ═══════════════════════════════════════════════
   Exhibit wash

   The screenshot exhibits, recreated in text and run down the outer
   edges of the page at low opacity, drifting slower than the argument
   they sit behind. Plaintiff's evidence left, defendant's right.

   It is an overlay rather than a true backdrop. Every band on this page
   paints an opaque background, so a layer underneath them would simply
   never be seen; instead this sits above at a low ceiling and is masked
   away before it reaches the reading column, which produces the same
   read without touching the bands' colour.

   The layer is inert: aria-hidden in the markup, unselectable, and
   transparent to the pointer. Find-in-page can still match the text,
   but the layer is fixed, so a match highlights faintly in the margin
   rather than dragging the reader somewhere they cannot see.
   ═══════════════════════════════════════════════ */

.exhibits {
  position: fixed;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  contain: layout paint style;

  /* The three numbers worth touching. --ex-peak is the ceiling for the
     whole layer, so the wash is never at full strength anywhere on the
     page; --ex-edge is where the reading column begins; --ex-fade is
     how far past that edge the wash takes to vanish completely, and it
     shortens with the margin, so a narrow window kills the wash off
     faster rather than letting it creep under the argument. */
  --ex-peak: 0.26;
  --ex-edge: max(0px, (100vw - var(--wrap)) / 2);
  --ex-fade: clamp(90px, var(--ex-edge), 190px);

  opacity: var(--ex-peak);

  /* Fullest against the outer edge, well under half by the time it
     meets the text column, gone entirely under the argument itself. */
  mask-image: linear-gradient(to right,
      #000 0,
      rgba(0, 0, 0, 0.42) var(--ex-edge),
      transparent calc(var(--ex-edge) + var(--ex-fade)),
      transparent calc(100% - var(--ex-edge) - var(--ex-fade)),
      rgba(0, 0, 0, 0.42) calc(100% - var(--ex-edge)),
      #000 100%);
}

.ex-col {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;

  /* Cards enter and leave rather than being guillotined by the viewport. */
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
}

.ex-col-p { left: 0; }
.ex-col-d { right: 0; }

/* The script drives the transform. With no script the strips simply sit
   where they are and the wash becomes a static margin texture. */
.ex-strip {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 0 26px;
  will-change: transform;
}

.ex-col-d .ex-strip { text-align: right; }

/* ── a recreated exhibit ── */

.ex-c {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.55;
  margin: 0 0 34px;
  padding: 12px 14px 11px;
  border: 1px solid rgba(23, 20, 15, 0.17);
  /* A card lighter than the stock reads as a white box sitting on top of
     the page. Ink is subtractive, so the card is instead the faintest
     possible darkening of the paper, and its edge does the rest. */
  background: rgba(23, 20, 15, 0.025);
}

.ex-col-p .ex-c { border-left: 2px solid var(--p); }
.ex-col-d .ex-c { border-right: 2px solid var(--d); }

.ex-col-p .ex-h b,
.ex-col-p .ex-cite { color: var(--p); }

.ex-col-d .ex-h b,
.ex-col-d .ex-cite { color: var(--d); }

.ex-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}

.ex-col-d .ex-h { justify-content: flex-end; }

.ex-h b { font-weight: 600; }

.ex-h time,
.ex-h span {
  font-size: 0.88em;
  color: var(--muted);
}

.ex-h-2 { margin-top: 10px; }

.ex-t { color: var(--ink-2); }
.ex-t-2 { margin-top: 4px; }

/* The highlighter the filing party drew on the exhibit itself. */
.ex-c mark {
  background: rgba(236, 206, 62, 0.55);
  color: var(--ink);
}

/* The leaked Drive links, with the European date stamps that became
   half the argument. */
.ex-l {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 5px;
  color: var(--faint);
}

.ex-l time { color: var(--muted); }
.ex-u { color: var(--p-dim); word-break: break-all; }

.ex-meta {
  margin-top: 8px;
  font-size: 0.92em;
  color: var(--faint);
}

.ex-note {
  margin-top: 6px;
  font-style: italic;
  color: var(--muted);
}

/* The video attachment, as the export rendered it. */
.ex-att {
  margin-top: 6px;
  padding: 13px 15px;
  background: rgba(23, 20, 15, 0.06);
  color: var(--muted);
}

.ex-cite {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--rule-soft);
  font-size: 0.86em;
  letter-spacing: 0.02em;
}

/* ── the sealed version of the same conversation ──
   Exhibit B is the exchange above with everything but the timestamps
   blacked out. It is the most honest picture of this record there is. */

.ex-bar {
  display: block;
  height: 11px;
  margin-top: 5px;
  background: #14110c;
}

.ex-col-d .ex-bar { margin-left: auto; }

.ex-b1 { width: 34%; }
.ex-b2 { width: 53%; }
.ex-b3 { width: 71%; }
.ex-b4 { width: 88%; }

/* ── the deposition excerpts ──
   The other wash on this site recreates screenshots, which are pictures and
   read as pictures. A transcript is not a picture: its signature is the
   Q/A ladder and a page:line cite, and those are the two things reproduced
   here.

   Deliberately no line-number gutter. A transcript numbers 1-25 down every
   page, and faking that column would mean either breaking the text at the
   original line breaks — which a recreation cannot promise — or printing
   numbers that do not mean anything. The exact range lives in the cite
   instead, where it can be checked.

   Text stays left-aligned in both columns. The right column sets its cards
   ragged-left, which is fine for a chat bubble and wrong for a ladder: the
   Q and the A have to line up with each other or the form is gone. */

.ex-depo .ex-qa {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  margin: 2px 0 0;
  text-align: left;
}

.ex-depo .ex-qa dt {
  grid-column: 1;
  font-weight: 600;
  opacity: 0.75;
}

.ex-depo .ex-qa dd {
  grid-column: 2;
  margin: 0 0 6px;
  color: var(--ink-2);
}

.ex-depo .ex-qa dd:last-child { margin-bottom: 0; }

.ex-col-p .ex-depo .ex-qa dt { color: var(--p); }
.ex-col-d .ex-depo .ex-qa dt { color: var(--d); }

/* Where the witness is being read their own earlier words back, or an
   exhibit is quoted into the record. Indented the way the transcript
   indents it. */
.ex-depo .ex-qa dd.ex-read {
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid var(--rule-soft);
  font-style: italic;
}

/* ── the text-message exhibits ── */

.ex-sms .ex-bub {
  padding: 10px 13px;
  border-radius: 14px;
  background: rgba(23, 20, 15, 0.07);
  color: var(--ink-2);
  text-align: left;
}

/* ═══════════════════════════════════════════════
   Section navigation

   The chronology runs to about ten screens, and the ledger to fourteen
   with every drawer open. A reader who wants out of either should not
   have to scroll the whole of it, so every view carries the way back
   to its case along with it. It was a pair once, previous and next,
   when a case page was three sections long; each of those is a page
   now, and the one thing left to offer from inside it is the case.

   An ordinary anchor. No script, no handler, and with JavaScript off
   it still works, because it was never doing anything JavaScript was
   needed for.

   Sticky to the bottom of the viewport rather than fixed to it, which
   is the whole trick. It rides along for the length of its own band
   and then settles at the end of it, so it is there for exactly as
   long as it is useful.
   ═══════════════════════════════════════════════ */

.sect-nav {
  position: sticky;
  bottom: 26px;
  z-index: 5;

  display: flex;
  align-items: stretch;
  width: max-content;
  max-width: 100%;
  margin: 72px 0 0 auto;

  border: 1px solid var(--rule);
  /* Deeper than either ground it floats over, so it reads on the band
     sections and the plain ones alike, and stays legible over the text
     it covers. */
  background: var(--bg-deep);
  box-shadow: 0 5px 18px rgba(23, 20, 15, 0.14);

  transition: transform 0.25s;
}

.has-to-top .sect-nav {
  transform: translateX(calc(-1 * (var(--totop-w) + var(--ctl-gap))));
}

.sect-nav-b {
  display: flex;
  align-items: baseline;
  gap: 10px;

  padding: 11px 15px;
  /* The pill is sized by its content and the two halves share a row, so
     neither is allowed to wrap and push the other taller. */
  white-space: nowrap;

  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);
  transition: background-color 0.2s, color 0.2s;
}

/* Set against the pill's own ground rather than inherited from the
   page's secondary steps, which are pitched for the stock behind them. */
.sect-nav-l { color: var(--muted); }
.sect-nav-t { color: var(--ink); }

.sect-nav-b:hover,
.sect-nav-b:focus-visible { background: var(--bg-band); }

.sect-nav-b:hover .sect-nav-l,
.sect-nav-b:focus-visible .sect-nav-l { color: var(--ink); }

/* Inset, because the container's border would otherwise clip the ring. */
.sect-nav-b:focus-visible { outline-offset: -3px; }

/* The arrow leans the way the button goes. */
.sect-nav-a { transition: transform 0.2s; }
.sect-nav-prev:hover .sect-nav-a { transform: translateX(-2px); }

/* The nav is sticky and 44px tall, so a section arrived at by anchor
   would otherwise land with its top edge tucked underneath it. The
   masthead is in that list because #top is what Back to top returns to,
   and landing it under the nav puts the page back at scroll zero. */
.band,
.masthead { scroll-margin-top: 44px; }

/* ── Back to top ──
   Fixed rather than sticky, because unlike Skip ahead this one is not
   scoped to a section: once the masthead is off screen there is no way
   back to the top that does not involve scrolling nine screens, and
   that stays true until the reader returns.

   The two controls read as one cluster. This one is the constant of the
   pair - it outlives any single section - so it holds the right edge of
   the reading column, and Skip ahead steps left to sit beside it when
   both are out. The step is a transform rather than a margin so that
   arriving and leaving costs no layout.

   Visibility is driven by an IntersectionObserver on the masthead, not
   by a scroll handler: the button is needed exactly when the top of the
   page is not on screen, which is precisely what the observer reports,
   and it costs nothing per frame. */
.to-top {
  position: fixed;
  /* The right edge of .wrap's content box, so the cluster lines up with
     the column rather than with the window. */
  right: calc(max(0px, (100vw - var(--wrap)) / 2) + var(--gut));
  bottom: 26px;
  z-index: 5;

  display: flex;
  align-items: baseline;
  gap: 9px;

  /* Sized by its own content, never by a number written here. A fixed
     width had five pixels of slack, which held at a 16px default and
     nothing else: at a larger base size, under zoom, or during the
     moment before the mono face loads, the label needed more room, and
     a flex item is allowed to shrink to its longest word rather than
     overflow - so the text wrapped and the button grew a line taller
     than its neighbour. nowrap makes that impossible; max-content makes
     it unnecessary. */
  width: max-content;
  white-space: nowrap;

  padding: 11px 15px;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  box-shadow: 0 5px 18px rgba(23, 20, 15, 0.14);

  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);

  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.25s, transform 0.25s, border-color 0.2s;
}

.to-top.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.to-top:hover,
.to-top:focus-visible { border-color: var(--court); }

.to-top:hover .to-top-a { transform: translateY(-2px); }
.to-top-a { transition: transform 0.2s; }

@media print {
  .to-top,
  .sect-nav { display: none; }
}

/* ═══════════════════════════════════════════════
   Corrections

   The page argues that both sides deserve their best case. Inviting the
   reader to say where that failed is the same commitment, pointed at
   itself - so this sits inside the Notes, next to what the page admits
   it cannot see, rather than floating as a widget.
   ═══════════════════════════════════════════════ */

.fix {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--rule);
}

.fix-h {
  font-family: var(--display);
  font-variation-settings: 'opsz' 48, 'SOFT' 0, 'WONK' 1;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.012em;
}

.fix-n {
  margin: 12px 0 26px;
  max-width: 46em;
  color: var(--ink-2);
}

.fix-n strong { color: var(--court); font-weight: 600; }

.fix-form { max-width: 46em; }

/* The three words, as the choice itself. */
.fix-kind { border: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.fix-kind legend {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 10px;
}

.fix-kind label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid var(--rule);
  background: rgba(255, 252, 245, 0.5);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background-color 0.15s;
}

.fix-kind label:hover { border-color: var(--court); color: var(--ink); }

.fix-kind input { accent-color: var(--court); }

.fix-kind label:has(input:checked) {
  border-color: var(--court);
  background: rgba(111, 74, 46, 0.09);
  color: var(--ink);
}

.fix-kind label:has(input:focus-visible) { outline: 2px solid var(--p); outline-offset: 2px; }

.fix-in {
  display: block;
  width: 100%;
  margin-bottom: 12px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: rgba(255, 252, 245, 0.62);
  font-family: var(--body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
  transition: border-color 0.15s, background-color 0.15s;
}

.fix-in::placeholder { color: var(--faint); }

.fix-in:focus {
  outline: none;
  border-color: var(--court);
  background: rgba(255, 252, 245, 0.95);
}

.fix-detail { resize: vertical; min-height: 6.5em; }

.fix-in.is-invalid { border-color: var(--p); }

/* Hidden from people, not from bots: display:none and type=hidden are
   both things a scraper can notice. */
.fix-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.fix-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}

.fix-send {
  padding: 11px 20px;
  border: 1px solid var(--court);
  background: rgba(111, 74, 46, 0.1);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--court);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.fix-send:hover:not(:disabled) { background: var(--court); color: var(--paper); }
.fix-send:disabled { opacity: 0.55; cursor: default; }

.fix-status {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.fix-status.is-error { color: var(--p); }
.fix-status.is-success { color: var(--d); }

.fix-p {
  margin-top: 20px;
  max-width: 46em;
  font-size: 0.8rem;
  color: var(--faint);
}

/* ── a term, marked where you meet it ──
   A dotted rule under a word is the old convention for "this has a
   definition", and it is quiet enough to survive being used a hundred
   times. Marked once per card rather than at every occurrence, so the
   page reads as prose with a few doors in it rather than as a page of
   links. The definition also rides in the title attribute, which costs
   nothing and gives a hover a reason to exist. */
.term {
  color: inherit;
  text-decoration: underline dotted;
  text-decoration-color: rgba(111, 74, 46, 0.45);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: help;
  transition: color 0.15s, background-color 0.15s, text-decoration-color 0.15s;
}

.term:hover,
.term:focus-visible {
  color: var(--court);
  text-decoration-color: var(--court);
  background-color: rgba(111, 74, 46, 0.08);
}

/* A ruling's stamp is a term as well: what "denied" or "stricken" means
   on that card, in the help cursor, the title and the glossary. It is
   the whole stamp that answers, and it keeps its own inks. Left to
   .term it would take the line's colour, and a solid stamp would turn
   on a hover to the very ink it is filled with. No dotted rule: the box
   already marks the word as a thing apart. A hover takes each stamp one
   step deeper in the court's ink. */
.chip.term { color: var(--tl-c-ink); text-decoration: none; transition: color 0.15s, background-color 0.15s, border-color 0.15s; }
.chip-g.term { color: var(--tl-card); }

.chip.term:hover,
.chip.term:focus-visible {
  color: var(--court);
  background-color: color-mix(in oklab, var(--court) 12%, transparent);
}

.chip-p.term:hover,
.chip-p.term:focus-visible { background-color: color-mix(in oklab, var(--court) 40%, transparent); }

.chip-g.term:hover,
.chip-g.term:focus-visible {
  color: var(--tl-card);
  border-color: color-mix(in oklab, var(--court) 78%, var(--ink));
  background-color: color-mix(in oklab, var(--court) 78%, var(--ink));
}

/* Where the reader lands. The panel opens in a corner the eye has just
   left, so the entry has to call it back: the row flares as lit paper
   with a lamp-coloured halo, well past anything else on the page, and
   then lets go. As it does, the light passes to the word itself, which
   holds it for as long as the panel is open. The flare says "here"; the
   word goes on saying "this one" after the reader has looked away and
   come back.

   The resting state lives in the plain rule and the animation only
   describes the way in, so a reader who has asked for less movement
   gets the lit word at once and nothing has to be filled forwards. */
@keyframes term-found {
  0% {
    background-color: rgba(255, 244, 214, 0);
    box-shadow: 0 0 0 1px rgba(111, 74, 46, 0), 0 0 0 0 rgba(196, 132, 44, 0);
  }
  10% {
    background-color: rgba(255, 244, 214, 0.96);
    box-shadow: 0 0 0 1px rgba(111, 74, 46, 0.7), 0 0 18px 4px rgba(196, 132, 44, 0.7);
  }
  45% {
    background-color: rgba(255, 244, 214, 0.8);
    box-shadow: 0 0 0 1px rgba(111, 74, 46, 0.5), 0 0 14px 2px rgba(196, 132, 44, 0.45);
  }
  100% {
    background-color: rgba(255, 244, 214, 0);
    box-shadow: 0 0 0 1px rgba(111, 74, 46, 0), 0 0 0 0 rgba(196, 132, 44, 0);
  }
}

@keyframes term-found-dt {
  0%, 45% {
    color: var(--court);
    text-shadow: none;
  }
}

.gloss-l > div.is-found { animation: term-found 2.4s ease-out; }

.gloss-l > div.is-found dt {
  color: #8a4a12;
  font-weight: 600;
  text-shadow: 0 0 9px rgba(214, 146, 48, 0.85), 0 0 2px rgba(255, 236, 190, 0.9);
  animation: term-found-dt 2.4s ease-out;
}

/* Without a script the anchor still lands, and :target still marks it. */
.gloss-l dt:target { color: var(--court); }

@keyframes gloss-in {
  from { opacity: 0; transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
  .gloss-l > div.is-found,
  .gloss-l > div.is-found dt,
  .gloss[open] .gloss-p { animation: none; }
}

/* ═══════════════════════════════════════════════
   Terms

   A page that has to satisfy a lawyer and a stranger at the same time
   can do it one of two ways: write down to one, or let the other look
   things up. This is the second. The prose keeps the words a court
   actually uses, and every one of them is defined here.

   It is a <details>, which means the button is a real button, the
   keyboard works, Escape is unnecessary because nothing is trapped,
   and none of it depends on a script. The reader most likely to need
   a glossary is the least likely to be running one.

   Bottom left, opposite the navigation cluster on the right: looking
   something up and moving through the page are different intentions
   and should not share a corner.
   ═══════════════════════════════════════════════ */

.gloss {
  position: fixed;
  left: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut)));
  bottom: 26px;
  z-index: 6;
}

.gloss-b {
  display: flex;
  align-items: baseline;
  gap: 9px;
  width: max-content;
  padding: 11px 15px;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  box-shadow: 0 5px 18px rgba(23, 20, 15, 0.14);

  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
  transition: border-color 0.2s;
}

.gloss-b::-webkit-details-marker { display: none; }

.gloss-b:hover,
.gloss[open] .gloss-b { border-color: var(--court); }

.gloss-b-i {
  color: var(--court);
  font-weight: 600;
}

/* The panel opens upward, because the button lives at the foot of the
   window and there is nothing below it. */
.gloss-p {
  position: absolute;
  left: 0;
  bottom: calc(100% + 15px);
  width: min(30rem, calc(100vw - 2 * var(--gut)));
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 26px 28px 28px;
  background: var(--bg-deep);

  /* A ruled frame, the way a certificate or a title page is boxed: a
     hairline, a band of the stock, then the heavier rule. The outer two
     are shadows rather than a second border because the panel scrolls,
     and anything drawn inside the padding would have the entries run
     across it. Sepia, since this is the court's vocabulary. */
  border: 1px solid rgba(111, 74, 46, 0.55);
  box-shadow:
    0 0 0 3px var(--bg-deep),
    0 0 0 5px var(--court),
    0 18px 50px 5px rgba(23, 20, 15, 0.3);
}

.gloss[open] .gloss-p { animation: gloss-in 0.24s ease-out; }

.gloss-h {
  font-family: var(--display);
  font-variation-settings: 'opsz' 36, 'SOFT' 0, 'WONK' 1;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.012em;
}

.gloss-n {
  margin: 6px 0 22px;
  font-size: 0.86rem;
  color: var(--muted);
}

.gloss-s {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--court);
  margin: 22px 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--rule-soft);
}

/* Each row is let out past its text by the same amount it is padded
   back in, so the text sits where it always did and the flare above has
   a margin to be a rectangle in rather than hugging the letters. */
.gloss-l > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 4px 16px;
  margin: 0 -10px;
  padding: 8px 10px;
}

.gloss-l dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding-top: 0.15em;
}

.gloss-l dd {
  font-size: 0.86rem;
  line-height: 1.56;
  color: var(--ink-2);
}

.gloss-l em { color: var(--ink); font-style: italic; }

@media print {
  .gloss { display: none; }
}

/* ═══════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════ */

/* Below this the reading column fills the window and there is no outer
   page left to wash. */
@media (width <= 1280px) {
  .exhibits { display: none; }
}

@media (width <= 900px) {
  :root { --gut: 24px; --ctl-gap: 8px; }

  /* No room for three controls on one line at this width, so Terms takes
     the row above the navigation pair rather than shortening either. */
  .gloss { bottom: 74px; }
  .gloss-b { padding: 10px 12px; font-size: 0.66rem; }
  .gloss-b-l { display: none; }
  .gloss-p { width: calc(100vw - 2 * var(--gut)); max-height: 58vh; padding: 20px 20px 22px; }
  .gloss-l > div { grid-template-columns: 1fr; gap: 2px; }

  .sect-nav { margin-top: 48px; }

  .sect-nav-b {
    padding: 10px 13px;
    gap: 8px;
    font-size: 0.66rem;
  }

  /* "Back to" goes and where it goes to stays. Same bargain as Back to
     top below: the anchor carries an aria-label, so a screen reader
     loses nothing. */
  .sect-nav-l { display: none; }

  /* Section navigation runs most of the width at this size, so Back to
     top drops to its arrow rather than sitting on top of it. The anchor
     carries an aria-label, so losing the visible words costs nothing to
     a screen reader. */
  /* No bottom offset of its own: the pair shares one baseline, and the
     section pill sets it. The vertical padding and the type size are
     that pill's too, so the boxes come out exactly the same height
     rather than a pixel apart. */
  .to-top {
    padding: 10px 12px;
    font-size: 0.66rem;
  }

  .to-top-l { display: none; }

  .site-nav { padding: 0 16px; gap: 14px; height: 40px; }
  .site-nav a, .nav-dropdown-toggle { font-size: 0.7rem; white-space: nowrap; }

  .site-nav .nav-mark { height: 24px; }
  .nav-dropdown-menu { position: fixed; top: 40px; width: 100%; min-width: unset; }

  .masthead { padding: 72px 0 56px; }
  /* The nav is shorter at this width, so a band lands under less of it. */
  .band { padding: 68px 0; scroll-margin-top: 40px; }

  .docket-meta { gap: 24px 0; margin-top: 40px; }
  .docket-meta > div { padding-right: 24px; margin-right: 24px; }

  /* Ledger stacks: question, plaintiff, defendant, court. Reading order
     is preserved, and the two sides keep their coloured rules so the
     ownership of each block stays obvious without the grid. */
  .ledger-key { display: none; }
  .ledger-head { display: block; margin-top: 40px; }
  .row-sum, .dp-grid, .fork { grid-template-columns: 1fr; }
  .row-sum { gap: 26px; }
  .row { padding: 34px 0 30px; }
  .row-q { gap: 14px; margin-bottom: 22px; }
  .dw-n { display: none; }
  .dw-body { padding: 22px 0 4px; }
  .dp { padding: 22px 20px 24px; }
  .chain { padding-left: 24px; }
  .cn::before { left: -24px; }

  /* Both drawer controls grow to a 44px tap target on touch. */
  .depth-all {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
    padding: 14px 15px;
  }

  .drawer > summary { padding: 14px 16px; }
  .tl-more { min-height: 44px; }

  /* The rail moves to the left edge and every card hangs off the same
     side of it. Position can no longer say whose move it was, so each
     card says it in words: the side's name ahead of the date, in the
     side's ink. The names are the page's own, set on the list. */
  .band-time { --tl-node: 13px; }

  .tl-key { margin-top: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--rule); }
  .tk { font-size: 0.64rem; letter-spacing: 0.12em; white-space: normal; }

  .tl::before,
  .tl::after { left: 8px; }

  /* No bar to clear at this width, only the nav. */
  .tl-ev { grid-template-columns: minmax(0, 1fr); padding: 9px 0 9px 32px; scroll-margin-top: 84px; }
  .tl-ev::before { left: 8px; top: 27px; }
  .tl-court::before,
  .tl-n::before { top: 28px; }

  .tl-c { padding: 15px 17px 17px; }
  .tl-p .tl-c { border-left: 3px solid var(--p); }
  .tl-d .tl-c { border-left: 3px solid var(--d); }

  /* The two sides hang off the rail ahead of the first entry, one
     under the other. The row's mark belongs to the entry and not to
     them, so here it is drawn off the entry's own card, which is the
     one thing in the row whose place is known. */
  .tl-first { row-gap: 12px; }
  .tl-first::before { content: none; }

  .tl-first > .tl-c::before {
    content: '';
    position: absolute;
    left: -30.5px;
    top: 18px;
    width: 11px;
    height: 11px;
    --tl-node-bg: var(--tl-card);
    border: 2px solid currentColor;
    border-radius: 50%;
    background: var(--tl-node-bg);
    color: var(--tl-n-line);
    box-shadow: 0 0 0 4px var(--bg-band);
  }

  .tl-date::before {
    padding: 2px 7px;
    border-radius: 2px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--tl-card);
  }

  .tl-p .tl-date::before { content: var(--p-name, 'Plaintiff'); background: var(--p); }
  .tl-d .tl-date::before { content: var(--d-name, 'Defendant'); background: var(--d); }
  .tl-court .tl-date::before { content: var(--c-name, 'Court'); background: var(--court); }

  .tl-h { font-size: 1.1rem; }

  .tl-phase { padding: 46px 0 18px; }
  .tl-phase-in { text-align: left; }
  .tl-phase-l { gap: 14px; font-size: 1.4rem; }
  .tl-phase-l::before { display: none; }
  .tl-phase-n { margin: 0; text-wrap: pretty; }

  .tl-mark { padding: 24px 0; }
  .tl-mark::before { display: none; }
  .tl-mark-in { padding: 18px 20px 20px; box-shadow: var(--tl-lift); text-align: left; }

  .tl-end { padding: 30px 0 0; }
  .tl-end-in { padding: 20px 20px 22px; }
  .tl-open li { grid-template-columns: 1fr; gap: 2px; }
  .tl-close { margin: 30px 0 0; padding-left: 16px; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  /* The parallax is the whole point of the wash, so without it the layer
     is just clutter in the margin. The script leaves the strips alone at
     this setting; this drops them back to a lower, quieter presence. */
  .exhibits { --ex-peak: 0.2; }
}

@media print {
  .exhibits { display: none; }
}