/* ═══════════════════════════════════════════════
   doe-v-bonnell.css
   frontendneeded.com/doe-v-bonnell/

   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. Where the two side
   colours overlap behind the masthead they overprint into a third
   colour neither side chose, which is a fair description of the case.

   Colour carries the argument: red is the plaintiff, blue is the
   defendant, sepia is the court. Nothing else may use those three.
   ═══════════════════════════════════════════════ */

/* ── 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. */

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-Italic-VariableFont_SOFT%2CWONK%2Copsz%2Cwght.ttf') format('truetype-variations');
  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);

  --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%;
}

body {
  font-family: var(--body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.66;
  font-size: 16.5px;
  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); }

.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);
}

/* Two pools of the side colours, meeting in the middle. The whole page's
   thesis, stated in the background before a word is read - and on stock
   they can do what two inks actually do when they meet: multiply. Red
   over blue makes a plum neither side picked, directly under the title.
   Nothing else on the page is allowed this trick. */
.masthead::before {
  content: '';
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 62% 72% at 14% 6%, rgba(176, 48, 42, 0.3), transparent 64%),
    radial-gradient(ellipse 62% 72% at 86% 10%, rgba(31, 64, 118, 0.28), transparent 64%);
  pointer-events: none;
}

.masthead .wrap { position: relative; }

.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;
  font-weight: 300;
}

.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);
}

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

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

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

.kicker {
  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 {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--muted);
  max-width: 44em;
  font-weight: 300;
  line-height: 1.66;
}

/* ═══════════════════════════════════════════════
   Common ground
   ═══════════════════════════════════════════════ */

.agreed {
  list-style: none;
  margin-top: 60px;
  border-top: 1px solid var(--rule);
}

.agreed-item {
  display: grid;
  grid-template-columns: 68px 1fr 1.3fr;
  gap: 34px;
  align-items: start;
  padding: 30px 0;
  border-bottom: 1px solid var(--rule-soft);
}

.agreed-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--court);
  letter-spacing: 0.1em;
  padding-top: 5px;
}

.agreed-item h3 {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
}

.agreed-item p {
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   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;
  margin-top: 56px;
  padding-bottom: 12px;
}

.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);
  font-weight: 300;
  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);
  font-weight: 300;
}

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

/* ── 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; margin-top: 0; padding-bottom: 0; }

.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);
}

.da-i { position: relative; width: 9px; height: 9px; flex: 0 0 9px; }

.da-i::before,
.da-i::after {
  content: '';
  position: absolute;
  background: var(--court);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.da-i::before { inset: 3.5px 0; height: 2px; }
.da-i::after { inset: 0 3.5px; width: 2px; }

.depth-all.is-open .da-i::after { transform: scaleY(0); opacity: 0; }

/* ── 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;
}

.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 + that becomes a − when the drawer opens */
.dw-i {
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

.dw-i::before,
.dw-i::after {
  content: '';
  position: absolute;
  background: var(--court);
  transition: transform 0.22s ease, opacity 0.22s ease;
}

.dw-i::before { inset: 4px 0; height: 2px; }
.dw-i::after { inset: 0 4px; width: 2px; }

.drawer[open] > summary .dw-i::after { transform: scaleY(0); opacity: 0; }

.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);
  font-weight: 300;
}

.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 and in the same faint mono as the chronology's citations, so
   the two read as one apparatus rather than two. */
.dp-cite {
  margin-top: 7px;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.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);
  font-weight: 300;
  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);
  font-weight: 300;
  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); font-weight: 400; }

/* 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);
  font-weight: 300;
  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);
}

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

/* ═══════════════════════════════════════════════
   The decision tree

   Inline SVG so the connectors are exact. Text is styled here rather
   than in the markup, so the diagram inherits the page's faces and
   there is one place to change a colour.
   ═══════════════════════════════════════════════ */

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

.tree-scroll {
  margin-top: 56px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}

.tree {
  display: block;
  width: 100%;
  min-width: 940px;   /* below this the labels collide; scroll instead */
  height: auto;
}

/* nodes */
.tree .n {
  fill: var(--bg);
  stroke: var(--rule);
  stroke-width: 1;
}

.tree .n-test { stroke: rgba(111, 74, 46, 0.62); fill: rgba(111, 74, 46, 0.07); }
.tree .n-p { stroke: var(--p-edge); fill: rgba(176, 48, 42, 0.09); }
.tree .n-d { stroke: var(--d-edge); fill: rgba(31, 64, 118, 0.09); }

.tree .n-out-p { stroke: var(--p); fill: rgba(176, 48, 42, 0.17); }
.tree .n-out-d { stroke: var(--d); fill: rgba(31, 64, 118, 0.17); }

.tree .n-term-p { stroke: var(--p-edge); fill: rgba(176, 48, 42, 0.09); }
.tree .n-term-d { stroke: var(--d-edge); fill: rgba(31, 64, 118, 0.09); }

.tree .n-bypass {
  stroke: rgba(111, 74, 46, 0.55);
  stroke-dasharray: 5 4;
  fill: rgba(111, 74, 46, 0.05);
}

/* node text */
.tree text { font-family: var(--body); }

.tree .t-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  fill: var(--faint);
}

.tree .t-h {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.012em;
  fill: var(--ink);
}

.tree .t-b {
  font-size: 12.5px;
  font-weight: 300;
  fill: var(--muted);
}

/* Kicker colour follows the node it labels. */
.tree .k-c { fill: rgba(111, 74, 46, 0.9); }
.tree .k-p { fill: rgba(176, 48, 42, 0.9); }
.tree .k-d { fill: rgba(31, 64, 118, 0.9); }

/* edges */
.tree .ln,
.tree .ln-n,
.tree .ln-n0,
.tree .ln-b {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tree .ln { stroke: rgba(23, 20, 15, 0.3); stroke-width: 1.4; marker-end: url(#ah); }
.tree .ln-n { stroke: rgba(31, 64, 118, 0.5); stroke-width: 1.4; stroke-dasharray: 4 4; marker-end: url(#ahn); }
.tree .ln-n0 { stroke: rgba(31, 64, 118, 0.5); stroke-width: 1.4; stroke-dasharray: 4 4; }
.tree .ln-b { stroke: rgba(111, 74, 46, 0.6); stroke-width: 1.4; stroke-dasharray: 5 4; marker-end: url(#ahb); }

.tree .ah { fill: rgba(23, 20, 15, 0.42); }
.tree .ahn { fill: rgba(31, 64, 118, 0.72); }
.tree .ahb { fill: rgba(111, 74, 46, 0.8); }

/* edge labels */
.tree .e-y,
.tree .e-n {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.tree .e-y { fill: var(--p); }
.tree .e-n { fill: var(--d); }

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

/* ═══════════════════════════════════════════════
   Outcome chips
   ═══════════════════════════════════════════════ */

.chip {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 2px;
  border: 1px solid;
  white-space: nowrap;
}

.chip-g { color: var(--p-dim); border-color: var(--p-edge); background: var(--p-wash); }
.chip-d { color: var(--d-dim); border-color: var(--d-edge); background: var(--d-wash); }
.chip-p { color: #6b3f22; border-color: rgba(111, 74, 46, 0.38); background: rgba(111, 74, 46, 0.09); }

/* ═══════════════════════════════════════════════
   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. Court and off-docket cards straddle the rail
   and paint over it, which is why they carry a solid background.
   ═══════════════════════════════════════════════ */

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

.tl-key {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-top: 48px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--rule);
}

.tk {
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 8px;
}

.tk::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--rule);
  background: var(--bg-band);
}

.tk-p::before { border-color: var(--p); }
.tk-d::before { border-color: var(--d); }
.tk-c::before { border-color: var(--court); background: var(--court); }
.tk-n::before { border-color: var(--muted); }

/* ── the rail ── */

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

.tl::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--rule) 3%, var(--rule) 97%, transparent);
}

/* ── an event ── */

.tl-ev {
  display: grid;
  grid-template-columns: 1fr 92px 1fr;
  position: relative;
  padding: 11px 0;
}

.tl-ev::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 27px;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--bg-band);
  border: 2px solid var(--rule);
  z-index: 2;
}

.tl-p::before { border-color: var(--p); }
.tl-d::before { border-color: var(--d); }
.tl-n::before { border-color: rgba(23, 20, 15, 0.3); }

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

/* Every tinted panel lays a wash over var(--bg). Blending those layers
   with multiply is the difference between a tint that sits on the stock
   and one that soaks into it, and it is why the page reads as printed. */
.tl-p .tl-c,
.tl-d .tl-c,
.tl-court .tl-c,
.tl-mark-in,
.cn-out { background-blend-mode: multiply; }

.tl-c {
  position: relative;
  padding: 14px 18px 16px;
  border-radius: 2px;
  background: var(--bg);
}

/* the coloured edge always faces the rail */
.tl-p .tl-c {
  grid-column: 1;
  text-align: right;
  border-right: 2px solid var(--p-edge);
  background: linear-gradient(270deg, var(--p-wash), transparent 72%), var(--bg);
}

.tl-d .tl-c {
  grid-column: 3;
  border-left: 2px solid var(--d-edge);
  background: linear-gradient(90deg, var(--d-wash), transparent 72%), var(--bg);
}

/* Court and off-docket events straddle the rail. Their dot rides the
   card's top border like a pin, rather than sitting in the middle of
   the date line where it would collide with the text. */
.tl-court .tl-c,
.tl-n .tl-c {
  grid-column: 1 / -1;
  max-width: 580px;
  margin: 0 auto;
  padding-top: 22px;
  text-align: center;
}

.tl-court::before,
.tl-n::before { top: 6px; }

.tl-court .tl-c {
  border: 1px solid rgba(111, 74, 46, 0.34);
  background: linear-gradient(180deg, rgba(111, 74, 46, 0.1), transparent 70%), var(--bg);
}

.tl-n .tl-c {
  border: 1px dashed var(--rule);
  background: var(--bg-band);
  max-width: 520px;
}

/* short connectors from card to dot */
.tl-p .tl-c::after,
.tl-d .tl-c::after {
  content: '';
  position: absolute;
  top: 30px;
  width: 36px;
  height: 1px;
  background: var(--rule);
}

.tl-p .tl-c::after { right: -38px; }
.tl-d .tl-c::after { left: -38px; }

.tl-date {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.tl-p .tl-date { justify-content: flex-end; }
.tl-court .tl-date,
.tl-n .tl-date { justify-content: center; }

.tl-h {
  font-family: var(--display);
  font-variation-settings: 'opsz' 24, 'SOFT' 0, 'WONK' 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: -0.014em;
  color: var(--ink);
}

.tl-n .tl-h { font-weight: 400; color: var(--ink-2); font-size: 0.95rem; }

.tl-b {
  margin-top: 6px;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.56;
}

/* the beats the case actually turns on */
.tl-ev.is-key .tl-c { box-shadow: inset 0 0 0 1px rgba(23, 20, 15, 0.13); }
.tl-ev.is-flag .tl-c { border-style: dashed; }

/* ── 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. */

.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; }
.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; }

/* Armed a frame 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; }
.tl.js-anim .tl-c.is-open .tl-x-in { transition: opacity 0.3s ease 0.12s; }

.tl-x-t {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 0.87rem;
  color: var(--ink-2);
  font-weight: 300;
  line-height: 1.62;
}

.tl-cite {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--faint);
}

/* ── 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 - stay plain text, because there is nothing to open. */
.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);
}

/* ── the toggle ── */

.tl-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--faint);
  transition: color 0.18s;
}

.tl-more:hover { color: var(--ink-2); }

.tl-more-i { position: relative; width: 8px; height: 8px; flex: 0 0 8px; }

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

.tl-more-i::before { inset: 3px 0; height: 2px; }
.tl-more-i::after { inset: 0 3px; width: 2px; }

.tl-c.is-open .tl-more-i::after { transform: scaleY(0); opacity: 0; }

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

/* ── closing note ── */

.tl-close {
  max-width: 640px;
  margin: 46px auto 0;
  padding-left: 20px;
  border-left: 2px solid rgba(111, 74, 46, 0.45);
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 300;
}

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

/* ── phase divider ── */

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

.tl-phase-in {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background: var(--bg-band);
  padding: 8px 24px;
}

.tl-phase-l {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.tl-phase-n { font-size: 0.85rem; color: var(--faint); font-weight: 300; }

/* ── the statutory line ── */

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

.tl-mark-in {
  max-width: 700px;
  margin: 0 auto;
  padding: 22px 28px 24px;
  text-align: center;
  border-radius: 2px;
  border: 1px solid rgba(111, 74, 46, 0.45);
  background: linear-gradient(180deg, rgba(111, 74, 46, 0.16), rgba(111, 74, 46, 0.04)), var(--bg);
}

.tl-mark-d {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--court);
  margin-bottom: 10px;
}

.tl-mark-t {
  font-family: var(--body);
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.005em;
  margin-bottom: 10px;
}

.tl-mark-b {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 300;
  max-width: 46em;
  margin: 0 auto;
}

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

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

.tl-end-in {
  max-width: 640px;
  margin: 0 auto;
  padding: 26px 28px 28px;
  border-radius: 2px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

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

.tl-end-h {
  font-size: 1.12rem;
  font-weight: 500;
  letter-spacing: -0.014em;
  margin-bottom: 18px;
}

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

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

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

.o-t { font-size: 0.93rem; color: var(--ink-2); font-weight: 300; }
.tl-open li.is-major .o-t { color: var(--court); font-weight: 400; }

.tl-end-n {
  margin-top: 18px;
  font-size: 0.86rem;
  color: var(--muted);
  font-weight: 300;
}

/* ═══════════════════════════════════════════════
   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); font-weight: 300; }

.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. */
  -webkit-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%);
  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. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
  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;
  transform: translate3d(0, 0, 0);
  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 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;
}

/* ═══════════════════════════════════════════════
   Skip ahead

   The chronology runs to about ten screens, and the ledger to fourteen
   with every drawer open. A reader who does not want either should not
   have to scroll the whole of it to get out, so those two sections
   carry an exit. The other three are barely over a screen and do not.

   It is an ordinary anchor. No script, no handler: the smooth scroll
   and the reduced-motion opt-out are the ones already set on <html>,
   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 section
   and then settles at the end of it, so it is there for exactly as
   long as it is useful and never follows the reader into the next
   section to nag them.
   ═══════════════════════════════════════════════ */

.skip-next {
  position: sticky;
  bottom: 26px;
  z-index: 5;

  display: flex;
  align-items: baseline;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 72px 0 0 auto;

  padding: 11px 15px;
  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);

  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.2s, border-color 0.2s, transform 0.25s;
}

/* Set against the pill's own ground rather than inherited from the
   page's secondary steps, which are pitched for the stock behind them. */
.skip-next-l { color: var(--muted); }

.has-to-top .skip-next {
  transform: translateX(calc(-1 * (var(--totop-w) + var(--ctl-gap))));
}
.skip-next-t { color: var(--ink); }

.skip-next:hover,
.skip-next:focus-visible { border-color: var(--court); }

.skip-next:hover .skip-next-l,
.skip-next:focus-visible .skip-next-l { color: var(--ink); }

.skip-next-a { transition: transform 0.2s; }
.skip-next:hover .skip-next-a { transform: translateY(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 { 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); margin: 0; }

.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);
}

/* Where the reader lands. The entry lights and settles, which is enough
   to say "here" without holding on to the page afterwards. Both the row
   and the term itself move, because the definition is the thing wanted
   and the word is the thing recognised. */
@keyframes term-found {
  0%   { background-color: rgba(111, 74, 46, 0.26); }
  55%  { background-color: rgba(111, 74, 46, 0.18); }
  100% { background-color: rgba(111, 74, 46, 0); }
}

@keyframes term-found-dt {
  0%   { color: var(--court); }
  55%  { color: var(--court); }
  100% { color: var(--ink); }
}

.gloss-l > div.is-found {
  animation: term-found 1.9s ease-out;
  border-radius: 2px;
}

.gloss-l > div.is-found dt { animation: term-found-dt 1.9s ease-out; }

/* Without a script the anchor still lands, and :target still marks it. */
.gloss-l dt:target { color: var(--court); }

@media (prefers-reduced-motion: reduce) {
  .gloss-l > div.is-found,
  .gloss-l > div.is-found dt { animation: none; }
  .gloss-l > div.is-found { background-color: rgba(111, 74, 46, 0.16); }
}

/* ═══════════════════════════════════════════════
   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% + 10px);
  width: min(30rem, calc(100vw - 2 * var(--gut)));
  max-height: min(62vh, 620px);
  overflow-y: auto;
  overscroll-behavior: contain;

  padding: 26px 28px 28px;
  border: 1px solid var(--rule);
  background: var(--bg-deep);
  box-shadow: 0 14px 46px rgba(23, 20, 15, 0.2);
}

.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);
}

.gloss-l > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 4px 16px;
  padding: 8px 0;
}

.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 (max-width: 1280px) {
  .exhibits { display: none; }
}

@media (max-width: 900px) {
  :root { --gut: 24px; }

  /* Shorter nav at this width. */
  .band { scroll-margin-top: 40px; }

  :root { --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; left: var(--gut); }
  .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; }

  .skip-next {
    margin-top: 48px;
    padding: 10px 13px;
    gap: 8px;
    font-size: 0.66rem;
  }

  /* Skip ahead 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 Skip
     ahead sets it. The vertical padding and the type size are Skip
     ahead's too, so the two 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; }
  .nav-dropdown-menu { position: fixed; top: 40px; left: 0; width: 100%; min-width: unset; }

  .masthead { padding: 72px 0 56px; }
  .band { padding: 68px 0; }

  .docket-meta { gap: 24px 0; margin-top: 40px; }
  .docket-meta > div { padding-right: 24px; margin-right: 24px; }

  .agreed-item { grid-template-columns: 34px 1fr; gap: 8px 16px; }
  .agreed-item p { grid-column: 2; }

  /* The tree keeps its geometry and scrolls sideways; squeezing it
     collides the labels. */
  .tree-scroll {
    margin-inline: calc(var(--gut) * -1);
    padding-inline: var(--gut);
  }

  /* 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; padding: 8px 0; }

  /* The rail moves to the left edge and every card hangs off it, so
     colour is what says whose move it was rather than the side. */
  .tl::before { left: 7px; margin-left: 0; }
  .tl-ev { grid-template-columns: 1fr; padding: 9px 0 9px 30px; }
  .tl-ev::before { left: 7px; margin-left: -5.5px; top: 24px; }

  .tl-p .tl-c,
  .tl-d .tl-c,
  .tl-court .tl-c,
  .tl-n .tl-c {
    grid-column: 1;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .tl-p .tl-c {
    border-right: 0;
    border-left: 2px solid var(--p-edge);
    background: linear-gradient(90deg, var(--p-wash), transparent 72%), var(--bg);
  }

  .tl-p .tl-date,
  .tl-court .tl-date,
  .tl-n .tl-date { justify-content: flex-start; }

  .tl-p .tl-c::after, .tl-d .tl-c::after { display: none; }

  .tl-phase { padding: 34px 0 18px 30px; }
  .tl-phase-in { margin: 0; text-align: left; padding: 6px 0; }
  .tl-mark { padding: 22px 0 22px 30px; }
  .tl-mark-in { text-align: left; padding: 20px 22px; }
  .tl-end { padding: 30px 0 0 30px; }
  .tl-end-in { padding: 22px 20px 24px; }
  .tl-open li { grid-template-columns: 1fr; gap: 2px; }
  .tl-close { margin: 34px 0 0; padding-left: 30px; border-left: 0; }

}

@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. */
@media (prefers-reduced-motion: reduce) {
  .exhibits { --ex-peak: 0.2; }
}

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