/* velvetbetbrasil.com, design v5: the evidence dossier.
   Claim in the lane, its source in the margin, the point where the reading stops. */

@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-latin-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(assets/fonts/atkinson-hyperlegible-next-latin-ext-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens (palette exact; layout and type for this site only) */
:root {
  --vb-bg: #11110F;
  --vb-surface: #131313;
  --vb-surface-2: #181916;
  --vb-surface-3: #1E1D1D;
  --vb-text: #EAEAEA;
  --vb-text-body: rgba(255, 255, 255, .6);
  --vb-text-muted: #BCBCC0;
  --vb-brand: #95F400;
  --vb-on-brand: #11110F;
  --vb-border: #3C3C3D;
  --vb-accent: #FFDD2A;
  --vb-error: #FE0000;
  color-scheme: dark;

  --face: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lane: 58ch;          /* measured at the 18px body size: about 77 characters a line */
  --gut: 3rem;
  --marg: 19rem;
  --body-w: calc(var(--lane) + var(--gut) + var(--marg));  /* resolve where font-size is the 18px body */
  --sec: 3.5rem;         /* 56px between sections */
  --tick: 1.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--vb-bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--vb-bg);
  color: var(--vb-text-body);
  font-family: var(--face);
  font-size: 1.125rem;
  line-height: 1.875rem;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { color: var(--vb-text); text-wrap: balance; }
p, li, dd, td, th, figcaption { text-wrap: pretty; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

a {
  color: var(--vb-text);
  text-decoration-line: underline;
  text-decoration-color: var(--vb-brand);
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
}
a:hover { text-decoration-thickness: 2px; }

:where(a, button, summary) { touch-action: manipulation; }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vb-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--vb-on-brand);
  border-radius: 2px;
}

.ic { width: 1.125rem; height: 1.125rem; flex: none; }

/* ---------- masthead: centred wordmark, dateline, one row of page links */
.masthead { background: var(--vb-bg); }
.mast-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.75rem 1rem 1.125rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  column-gap: .25em;
  min-height: 2.75rem;
  font-size: 2.25rem;
  line-height: 1;
  color: var(--vb-text);
  text-decoration: none;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.wm-lead { font-weight: 800; }
.wm-accent { font-weight: 400; }
.idx-open { display: none; font: inherit; }

.dateline {
  width: min(100% - 2rem, var(--body-w));
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: .5rem 2rem;
  border-block: 1px solid var(--vb-border);
  padding: .5rem 0;
}
.dateline p { margin: 0; font-size: .875rem; line-height: 1.25rem; }
.tag { font-weight: 600; color: var(--vb-text); }

.pages ul { list-style: none; margin: 0; padding: 0; }
.pages a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.75rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--vb-text-muted);
  text-decoration: none;
}
.pages a:hover { color: var(--vb-text); }
.pages a[aria-current="page"] {
  color: var(--vb-text);
  text-decoration: underline;
  text-decoration-color: var(--vb-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: .45em;
}
.idx-close {
  display: none;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0 .75rem;
  border: 1px solid var(--vb-border);
  border-radius: 7px;
  background: transparent;
  color: var(--vb-text);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- main: lane, gutter, margin */
main { padding: 0 1rem; }

.opening { padding-top: var(--sec); }
.opening h1 {
  margin: 0;
  font-size: 5.375rem;
  line-height: .95;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--vb-brand);
}
.plate {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .875rem 1.125rem;
  background: var(--vb-surface-2);
  border: 1px solid var(--vb-border);
  line-height: 0;
}
.plate::before, .plate::after {
  content: "";
  position: absolute;
  width: .75rem;
  height: .75rem;
  border: 0 solid var(--vb-brand);
}
.plate::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.plate::after { right: -1px; bottom: -1px; border-right-width: 2px; border-bottom-width: 2px; }
.plate img { display: block; width: 9.5rem; height: auto; }
.lede {
  margin: 1.75rem 0 0;
  font-size: 1.75rem;
  line-height: 2.25rem;
  font-weight: 600;
  color: var(--vb-text);
  letter-spacing: -.01em;
}
.intro { margin: 1.25rem 0 0; }

/* the sponsor note: an inset rule, no fill */
.deal {
  margin: 2.5rem 0 0;
  padding: .25rem 0 .25rem 1.5rem;
  border-left: 3px solid var(--vb-brand);
}
.deal-plate {
  display: inline-block;
  padding: .625rem .875rem;
  background: var(--vb-surface-3);
  border-radius: 6px;
  line-height: 0;
}
.deal-plate img { display: block; width: 7.5rem; height: auto; }
.deal-kicker {
  margin: 1rem 0 0;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.deal-offer {
  margin: .25rem 0 0;
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 800;
  color: var(--vb-text);
  letter-spacing: -.015em;
}
.deal-terms { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 60ch; }
.deal-terms li {
  position: relative;
  margin-top: .375rem;
  padding-left: 1.25rem;
  font-size: .9375rem;
  line-height: 1.4rem;
  color: var(--vb-text-body);
}
.deal-terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .7rem;
  width: .625rem;
  height: 1px;
  background: var(--vb-text-muted);
}
.deal-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.875rem;
  margin-top: 1.25rem;
  padding: 0 1.375rem;
  border-radius: 7px;
  background: var(--vb-brand);
  color: var(--vb-on-brand);
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: filter 120ms ease-out;
}
.deal-btn:hover { filter: brightness(1.08); }
.deal-fine { margin-top: 1rem; }
.deal-ad {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin: 0;
  font-size: .8125rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.deal-aff {
  margin: .5rem 0 0;
  max-width: 60ch;
  font-size: .8125rem;
  line-height: 1.25rem;
  color: var(--vb-text-muted);
}
.age-ring {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border: 2px solid var(--vb-error);
  border-radius: 50%;
  color: var(--vb-text);
  font-size: .6875rem;
  line-height: 1;
  font-weight: 800;
  font-style: normal;
}

/* ---------- sections */
.argument, main > section { padding-top: var(--sec); }
main section > h2 {
  margin: 0 0 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--vb-border);
  font-size: 2.1875rem;
  line-height: 2.625rem;
  font-weight: 750;
  letter-spacing: -.015em;
}
.argument > h3 { margin: 2.25rem 0 .75rem; font-size: 1.375rem; line-height: 1.875rem; font-weight: 750; }
main p { margin: 0 0 1.25rem; }
main section > p:last-child, .claim > p:last-of-type { margin-bottom: 0; }
/* a claim followed by more prose keeps the paragraph gap that its last paragraph gives up */
.argument > .claim:not(:last-child) { margin-bottom: 1.25rem; }
.rg-close > p { color: var(--vb-text); }

/* margin note: keyed by the source page's plain name, never numbered */
.margin-note {
  position: relative;
  padding-top: .625rem;
  border-top: 1px solid var(--vb-border);
  font-size: .9375rem;
  line-height: 1.4rem;
  font-style: italic;
  color: var(--vb-text-muted);
}
.margin-note::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: var(--tick);
  height: 2px;
  background: var(--vb-brand);
}
.margin-note p { margin: 0; }
.note-key {
  font-style: normal;
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.25rem;
  color: var(--vb-text);
}
.note-key + p { margin-top: .25rem; }
.margin-note.related { font-style: normal; font-size: .875rem; font-weight: 600; margin-bottom: 0; }
.margin-note.related::before { background: var(--vb-text-muted); height: 1px; }
.margin-note.related a { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* exhibit: a hairline document in the margin */
.exhibit {
  position: relative;
  padding-top: .75rem;
  border-top: 1px solid var(--vb-text);
  font-size: .875rem;
  line-height: 1.3rem;
}
.exhibit::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: var(--tick);
  height: 3px;
  background: var(--vb-brand);
}
.exhibit-key { margin: 0 0 .5rem; font-weight: 700; color: var(--vb-text); font-size: .875rem; }
.exhibit dl, .opbox dl, .about-dl { margin: 0; }
.exhibit dl > div, .opbox dl > div { padding: .5625rem 0; border-top: 1px solid var(--vb-border); }
.exhibit dt, .opbox dt, .about-dl dt {
  font-size: .75rem;
  line-height: 1.1rem;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.exhibit dd, .opbox dd { margin: .125rem 0 0; color: var(--vb-text); overflow-wrap: anywhere; }

/* the claim ledger (tool) */
.ledger-wrap {
  margin-top: .75rem;
  padding: 1.5rem 1.75rem .5rem;
  background: var(--vb-surface-2);
  border-top: 3px solid var(--vb-text);
}
.ledger tbody tr:last-child > * { border-bottom: 0; }
.ledger-wrap + * { margin-top: 1.5rem; }
.ledger {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.4rem;
}
.ledger caption {
  caption-side: top;
  padding: 0 0 .75rem;
  text-align: left;
  font-size: .875rem;
  line-height: 1.3rem;
  color: var(--vb-text-muted);
}
.ledger thead th {
  padding: 0 1rem .625rem 0;
  border-bottom: 1px solid var(--vb-text);
  text-align: left;
  vertical-align: bottom;
  font-size: .8125rem;
  line-height: 1.2rem;
  font-weight: 600;
  color: var(--vb-text-muted);
}
.ledger tbody th, .ledger td {
  padding: 1rem 1rem 1.125rem 0;
  border-bottom: 1px solid var(--vb-border);
  text-align: left;
  vertical-align: top;
}
.ledger tbody th {
  width: 26%;
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 700;
  color: var(--vb-text);
}
.ledger td { color: var(--vb-text-muted); }
.ledger td.where { width: 16%; font-style: italic; color: var(--vb-text-body); }
.ledger td.stop { color: var(--vb-text); }
.ledger td.state, .ledger thead th:last-child { width: 8rem; padding-right: 0; }
.ledger td.state:empty::after { content: ""; display: block; width: .75rem; height: 1px; margin-top: .75rem; background: var(--vb-text-muted); }
.state-tag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  line-height: 1.25rem;
  font-weight: 700;
  font-style: normal;
  color: var(--vb-text);
  white-space: nowrap;
}
.state-tag::before {
  content: "";
  flex: none;
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  border: 2px solid currentColor;
}
.state-tag.is-confirmed::before { background: var(--vb-brand); border-color: var(--vb-brand); }
.state-tag.is-open::before { border-color: var(--vb-text-muted); }
.state-tag.is-depends::before {
  border-color: var(--vb-accent);
  background: linear-gradient(90deg, var(--vb-accent) 50%, transparent 50%);
}

/* crossref: one question read across two or three sources, side by side */
.crossref {
  margin: .75rem 0 1.5rem;
  overflow-x: auto;
  /* when the table is wider than the screen, a soft light edge marks the side that still scrolls */
  background:
    linear-gradient(90deg, var(--vb-bg) 30%, transparent) left / 24px 100% no-repeat local,
    linear-gradient(270deg, var(--vb-bg) 30%, transparent) right / 24px 100% no-repeat local,
    linear-gradient(90deg, rgba(255, 255, 255, .14), transparent) left / 12px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(255, 255, 255, .14), transparent) right / 12px 100% no-repeat scroll;
}
.crossref:focus-visible { outline: 2px solid var(--vb-brand); outline-offset: 4px; }

.crossref table {
  width: 100%;
  min-width: 36rem;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.4rem;
}
.crossref caption {
  caption-side: top;
  padding: 0 0 .75rem;
  text-align: left;
  font-size: .875rem;
  line-height: 1.3rem;
  color: var(--vb-text-muted);
}
.crossref thead th {
  position: relative;
  padding: .625rem 1rem .625rem 0;
  border-top: 1px solid var(--vb-text);
  text-align: left;
  vertical-align: bottom;
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: var(--vb-text);
}
.crossref thead th:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: var(--tick);
  height: 3px;
  background: var(--vb-brand);
}
.crossref tbody th, .crossref td {
  padding: .875rem 1rem .875rem 0;
  border-top: 1px solid var(--vb-border);
  text-align: left;
  vertical-align: top;
}
.crossref tbody tr:last-child > * { border-bottom: 1px solid var(--vb-border); }
.crossref tbody th { width: 24%; font-size: .875rem; font-weight: 600; color: var(--vb-text-muted); }
.crossref td { color: var(--vb-text); }
/* phones: the comparison fits the screen instead of scrolling; three narrow columns read better than a hidden third */
@media (max-width: 639.98px) {
  .crossref table { min-width: 0; font-size: .875rem; line-height: 1.3rem; }
  .crossref tbody th, .crossref td, .crossref thead th { padding-right: .625rem; hyphens: auto; }
  .crossref tbody th { width: 26%; }
}
/* stacked questions */
.qa { padding-bottom: 1.75rem; }
.qa > h3 {
  margin: 0 0 .625rem;
  font-size: 1.375rem;
  line-height: 1.875rem;
  font-weight: 750;
}
.qa > p:not(.margin-note) {
  margin: 0;
  padding-top: .625rem;
  border-top: 1px solid var(--vb-border);
}

/* contents box (pages of 2,500+ words only; skeleton) */
.contents { margin-top: 2rem; padding-top: .625rem; border-top: 1px solid var(--vb-border); }
.contents-key { margin: 0 0 .25rem; font-size: .8125rem; line-height: 1.25rem; font-weight: 700; color: var(--vb-text); }
main nav.contents ul { list-style: none; margin: 0; padding: 0; }
.contents a {
  display: block;
  padding: .75rem 0;
  font-size: .9375rem;
  line-height: 1.3rem;
  color: var(--vb-text-muted);
  text-decoration: none;
}
.contents a:hover { color: var(--vb-text); }

/* writer blocks used in long pages */
.sequence, .checks { margin: 0 0 1.25rem; padding: 0; list-style: none; }
.sequence { counter-reset: step; }
.sequence > li {
  position: relative;
  padding: .75rem 0 .875rem 2.75rem;
  border-top: 1px solid var(--vb-border);
  counter-increment: step;
}
.sequence > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: .75rem;
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--vb-brand);
  font-variant-numeric: tabular-nums;
}
.checks > li { position: relative; padding: .375rem 0 .375rem 1.75rem; }
.checks > li::before {
  content: "";
  position: absolute;
  left: .125rem;
  top: .95rem;
  width: .75rem;
  height: .375rem;
  border-left: 2px solid var(--vb-brand);
  border-bottom: 2px solid var(--vb-brand);
  transform: rotate(-45deg);
}
.chronology { margin: 0 0 1.25rem; }
.chronology > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--vb-border); }
.chronology dt { font-weight: 700; color: var(--vb-text); font-size: .9375rem; }
.chronology dd { margin: 0; }
.v5-pending {
  outline: 2px dashed var(--vb-accent);
  outline-offset: .375rem;
  font-style: italic;
  color: var(--vb-text-muted);
}

/* ---------- byline: a signature under the last section */
.byline {
  position: relative;
  margin: var(--sec) 0 4.5rem;
  padding-top: 1.125rem;
  font-size: .9375rem;
  line-height: 1.4rem;
}
.byline::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--vb-brand);
}
.byline p { margin: 0; }
.by-name { font-size: 1.125rem; line-height: 1.6rem; font-weight: 750; }
.by-note { margin-top: .375rem !important; max-width: 56ch; color: var(--vb-text-muted); }
.by-when { margin-top: .5rem !important; font-size: .8125rem; color: var(--vb-text-muted); }

/* ---------- colophon */
.colophon {
  border-top: 1px solid var(--vb-border);
  padding: var(--sec) 1rem calc(4rem + env(safe-area-inset-bottom, 0px));
}
.colophon-in {
  width: min(100%, var(--body-w));   /* 18px here, so the ch-based width matches the body grid */
  margin: 0 auto;
  color: var(--vb-text-muted);
}
:where(.colophon-in > *) { max-width: 40rem; font-size: .9375rem; line-height: 1.5rem; }
.colophon-in > p { margin: 0; }
.col-mark { font-size: 1.5rem; line-height: 1.75rem; color: var(--vb-text); letter-spacing: -.02em; }
.col-sig { margin-top: 1.25rem !important; color: var(--vb-text); }
.col-ind { margin-top: .5rem !important; color: var(--vb-text); }
.col-rg { margin-top: 1.5rem !important; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75rem; align-items: start; }
.col-rg .age-ring { margin-top: .125rem; }
.col-nav { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--vb-border); }
.col-group { display: flex; flex-wrap: wrap; align-items: center; column-gap: 1.25rem; }
.col-head { margin: 0; flex-basis: 100%; padding-top: .5rem; font-size: .8125rem; font-weight: 600; color: var(--vb-text-muted); }
.col-group ul { display: flex; flex-wrap: wrap; column-gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.col-group li { display: flex; align-items: center; min-height: 2.75rem; }
.col-group a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.col-group span { color: var(--vb-text-muted); }
.col-contact { margin-top: 1rem !important; }

/* ---------- inner pages (not redesigned this round, kept readable) */
.hero { padding-top: var(--sec); }
.hero h1 {
  margin: 1rem 0 0;
  font-size: 3.4375rem;
  line-height: 3.75rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--vb-brand);
}
.hero .plate { padding: .625rem .875rem; }
.hero .plate img { width: 7.5rem; }
.faq details { border-top: 1px solid var(--vb-border); }
.faq details:last-of-type { border-bottom: 1px solid var(--vb-border); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3rem;
  padding: .5rem 0;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-right: .25rem;
  border-right: 2px solid var(--vb-text-muted);
  border-bottom: 2px solid var(--vb-text-muted);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary h3 { margin: 0; font-size: 1.25rem; line-height: 1.75rem; font-weight: 750; }
.faq details > p { margin: .25rem 0 1rem; }
.opbox { margin: 1.5rem 0; padding-top: .75rem; border-top: 1px solid var(--vb-text); font-size: .9375rem; line-height: 1.4rem; }
.about-dl > div, .about-dl > dt { border-top: 1px solid var(--vb-border); }
.about-dl dt { padding-top: .625rem; }
.about-dl dd { margin: .125rem 0 .625rem; color: var(--vb-text); }
.tbl { overflow-x: auto; margin: .5rem 0 1.5rem; }
.tbl table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .9375rem; line-height: 1.4rem; }
.tbl caption { caption-side: top; text-align: left; padding-bottom: .625rem; font-size: .875rem; color: var(--vb-text-muted); }
.tbl th, .tbl td { padding: .75rem .875rem .75rem 0; border-bottom: 1px solid var(--vb-border); text-align: left; vertical-align: top; }
.tbl thead th { border-bottom-color: var(--vb-text); font-size: .8125rem; color: var(--vb-text-muted); font-weight: 600; }
.tbl tbody th { color: var(--vb-text); font-weight: 700; }
.shot { margin: 1.5rem 0; }
.shot img { display: block; border: 1px solid var(--vb-border); }
.shot figcaption { margin-top: .5rem; font-size: .875rem; line-height: 1.3rem; color: var(--vb-text-muted); }
main ul:not([class]), main ol:not([class]) { padding-left: 1.25rem; margin: 0 0 1.25rem; }

/* ---------- wide screens: the dossier grid */
@media (min-width: 960px) {
  main {
    display: grid;
    grid-template-columns: [lane-start] minmax(0, var(--lane)) [lane-end] var(--gut) [margin-start] minmax(12rem, var(--marg)) [margin-end];
    justify-content: center;
    padding: 0 2rem;
  }
  main > * { grid-column: lane; min-width: 0; }
  .dateline { width: min(100% - 4rem, var(--body-w)); }
  main > .opening, main > .argument {
    grid-column: lane-start / margin-end;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
  }
  .opening > *, .argument > * { grid-column: lane; min-width: 0; }
  /* the plate sits right of the H1 in the lane; the margin of the opening carries the sponsor note */
  .opening > h1 { grid-row: 1; }
  .opening > .plate { grid-column: lane; grid-row: 1; align-self: center; justify-self: end; }
  .argument > .exhibit { grid-column: margin; grid-row: 1 / span 40; align-self: start; }
  .argument > .claim, .argument > .qa-stack, .qa-stack > .qa {
    grid-column: lane-start / margin-end;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
  }
  .claim > *, .qa > * { grid-column: lane; min-width: 0; }
  .claim > .margin-note, .qa > .margin-note, .argument > .margin-note {
    grid-column: margin;
    grid-row: 1 / span 40;
    align-self: start;
    margin-top: .375rem;
  }
  .argument > .ledger-wrap, .argument > .crossref { grid-column: lane-start / margin-end; }
  /* the sponsor note hangs in the margin from the top of the opening, beside the H1 and the first section;
     the first section follows the intro directly and the operator file comes after it, in the lane */
  main > .opening { grid-row: 1; }
  main > .deal { grid-column: margin; grid-row: 1 / span 2; align-self: start; margin-top: 3rem; }
  main > section:first-of-type { grid-row: 2; }
  main > section:first-of-type .margin-note, main > section:first-of-type > .exhibit { grid-column: lane; grid-row: auto; }
  main > section:first-of-type > .ledger-wrap, main > section:first-of-type > .crossref { grid-column: lane; }
  main > .exhibit { grid-column: lane; grid-row: 3; align-self: start; margin-top: var(--sec); }
  main > .exhibit dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); column-gap: 1.5rem; }
  main > .exhibit dd { margin-top: 0; }
  main:has(> .contents) > .contents { grid-row: 2; }
  main:has(> .contents) > section:first-of-type { grid-row: 3; }
  main:has(> .contents) > .exhibit { grid-row: 4; }
  .masthead { width: min(100% - 4rem, var(--body-w)); margin-inline: auto; }
  .masthead .dateline { width: auto; }

  .pages ul { display: flex; justify-content: center; flex-wrap: wrap; column-gap: 1.75rem; padding: .375rem 1rem 0; }
  .pages, .pages:popover-open {
    display: block;
    position: static;
    inset: auto;
    width: fit-content;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    overflow: visible;
  }
}

/* the contents rail, from the body start (pages that carry the contents box).
   1440 rhythm pass (22.10): rail | 47ch lane | evidence margin. The section box keeps its place (x 0.22, w 0.71);
   the lane narrows to 47ch (about 64 characters a line) and the margin takes the width. */
@media (min-width: 1200px) {
  main:has(> .contents) {
    grid-template-columns: [rail-start] 11rem [rail-end] var(--gut) [lane-start] minmax(0, 47ch) [lane-end] var(--gut) [margin-start] minmax(12rem, 27rem) [margin-end];
  }
  main > .contents {
    grid-column: rail;
    grid-row: 2 / span 40;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    margin-top: var(--sec);
  }
  body:has(main > .contents) .masthead { width: min(100% - 4rem, calc(11rem + var(--gut) + var(--body-w))); }
  main > .contents a { padding: .3125rem 0; }

  /* the opening: the H1 hangs from the rail like a file title, the plate closes the lane; the sponsor note keeps the margin */
  main:has(> .contents) > .opening { grid-column: rail-start / margin-end; }
  main:has(> .contents) > .opening > h1 { grid-column: rail-start / lane-end; }
  main:has(> .contents) > .opening > .plate { grid-column: rail-start / lane-end; grid-row: 1; justify-self: end; align-self: center; }
  main:has(> .contents) > .deal { width: 21rem; justify-self: end; }
  /* source order: the operator file, then the first section */
  main:has(> .contents) > .exhibit { grid-row: 2; }
  main:has(> .contents) > section:first-of-type { grid-row: 3; }
  main:has(> .contents) > section:first-of-type .margin-note { grid-column: margin; grid-row: 1 / span 40; }

  /* the tool: a lime header band, the reading key in the margin, the ledger as one record per claim
     (status, claim and the two readings in the lane; where the claim is published in the margin) */
  main:has(> .contents) > [data-tool] { padding-top: 2.5rem; border-top: 3px solid var(--vb-brand); }
  main:has(> .contents) > [data-tool] > h2 { grid-row: 1; padding-top: 0; border-top: 0; margin: 0; }
  main:has(> .contents) > [data-tool] > h2 + p { grid-column: margin; grid-row: 1; align-self: start; margin: .375rem 0 0; font-size: .9375rem; line-height: 1.5rem; }
  main:has(> .contents) > [data-tool] > .ledger-wrap { grid-row: 2; margin-top: 2rem; }
  main:has(> .contents) .ledger-wrap { display: grid; grid-template-columns: subgrid; padding: 0; background: none; border-top: 0; }
  main:has(> .contents) .ledger { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  main:has(> .contents) .ledger caption { display: block; grid-column: lane; padding-bottom: 1rem; text-wrap: balance; }
  main:has(> .contents) .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main:has(> .contents) .ledger tbody { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  main:has(> .contents) .ledger tbody tr { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: .625rem; padding: 1rem 0 1.5rem; border-top: 1px solid var(--vb-border); }
  main:has(> .contents) .ledger tbody tr:first-child { border-top: 1px solid var(--vb-text); }
  main:has(> .contents) .ledger tbody th, main:has(> .contents) .ledger td { width: auto; padding: 0; border: 0; }
  main:has(> .contents) .ledger td.state { grid-column: lane; grid-row: 1; }
  main:has(> .contents) .ledger tbody th { grid-column: lane; grid-row: 2; font-size: 1.1875rem; line-height: 1.625rem; }
  main:has(> .contents) .ledger td:not([class]) { grid-column: lane; grid-row: 3; }
  main:has(> .contents) .ledger td.stop { grid-column: lane; grid-row: 4; }
  main:has(> .contents) .ledger td.where { grid-column: margin; grid-row: 2 / span 3; }
  main:has(> .contents) .ledger td[data-label]:not(.state)::before { content: attr(data-label); display: block; margin-bottom: .25rem; font-style: normal; font-size: .75rem; line-height: 1.1rem; font-weight: 600; color: var(--vb-text-muted); }
}

/* ---------- narrow screens */
@media (max-width: 959.98px) {
  html { scroll-padding-top: 3.25rem; }
  body { font-size: 1rem; line-height: 1.625rem; }

  /* one row: the wordmark centred, the Índice as an icon button at right, one hairline under the row */
  .mast-row {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
    align-items: center;
    padding: .1875rem .375rem;
    border-bottom: 1px solid var(--vb-border);
  }
  .wordmark { grid-column: 2; justify-self: center; font-size: 1.5rem; }
  .idx-open {
    grid-column: 3;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--vb-text);
    font: inherit;
    cursor: pointer;
  }
  .idx-open .ic { width: 1.5rem; height: 1.5rem; }
  .idx-open > span {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .dateline { justify-content: center; border: 0; padding: .25rem 0 0; }
  .dateline p { font-size: .8125rem; line-height: 1.125rem; text-align: center; }

  .pages:popover-open {
    position: fixed;
    inset: 0 0 auto 0;
    width: auto;
    height: auto;
    max-height: 100dvh;
    margin: 0;
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) 1rem 1.25rem;
    overflow: auto;
    overscroll-behavior: contain;
    border: 0;
    border-bottom: 1px solid var(--vb-border);
    background: var(--vb-surface);
    color: var(--vb-text);
  }
  .pages::backdrop { background: rgb(0 0 0 / .6); }
  .pages .idx-close { display: flex; }
  .pages ul { margin-top: .5rem; }
  .pages li a {
    display: flex;
    min-height: 3rem;
    border-top: 1px solid var(--vb-border);
    font-size: 1.0625rem;
    color: var(--vb-text);
  }

  /* the title band: the H1 and its plate centred as one group between two hairlines that run edge to edge */
  .opening {
    --tw: 12.375rem; /* the rendered width of "Velvet Bet" at 2.625rem / 800 */
    --pw: 5.375rem;  /* the plate: 4.25rem logo + its padding */
    --pg: .75rem;
    --side: max(0px, calc((100% - var(--tw) - var(--pg) - var(--pw)) / 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: .375rem;
  }
  .opening h1 {
    grid-row: 1;
    grid-column: 1;
    margin-inline: -1rem;
    padding: .375rem calc(var(--side) + var(--pw) + var(--pg) + 1rem) .375rem calc(var(--side) + 1rem);
    border-block: 1px solid var(--vb-border);
    text-align: center;
    font-size: 2.625rem;
    line-height: 2.75rem;
    letter-spacing: -.03em;
  }
  .opening .plate { grid-row: 1; grid-column: 1; justify-self: end; align-self: center; margin-right: var(--side); padding: .375rem .5rem; }
  .opening .plate img { width: 4.25rem; }
  .lede {
    max-width: 19.5rem;
    margin: .5rem auto 0;
    text-align: center;
    font-size: .9375rem;
    line-height: 1.375rem;
  }
  /* the intro in a ruled exhibit margin: empty gutter, a 2px lime rule, then the text */
  .intro {
    margin: .625rem 0 0;
    padding-left: 2.75rem;
    font-size: .9375rem;
    line-height: 1.3125rem;
  }
  .intro, [data-tool] > h2 + p { position: relative; }
  .intro::before, [data-tool] > h2 + p::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.75rem;
    width: 2px;
    background: var(--vb-brand);
  }

  /* the sponsor note, inset to the intro's text edge and short of the right edge: no box and no side rule, hairlines above and below */
  .deal {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    align-items: center;
    margin: .875rem 2rem 0 2.75rem;
    padding: .5rem 0 .75rem;
    border-left: 0;
    border-block: 1px solid var(--vb-border);
  }
  .deal > * { grid-column: 1 / -1; }
  .deal > .deal-plate { grid-column: 1; grid-row: 1 / span 2; align-self: start; padding: .3125rem .4375rem; }
  .deal-plate img { width: 4.25rem; }
  .deal > .deal-kicker, .deal > .deal-offer { grid-column: 2; }
  .deal-kicker { margin-top: 0; font-size: .8125rem; line-height: 1.125rem; }
  .deal-offer { margin-top: .125rem; font-size: 1.25rem; line-height: 1.5rem; }

  .argument, main > section { padding-top: 2.75rem; }
  main section > h2 { font-size: 1.5625rem; line-height: 1.875rem; padding-top: 1rem; margin-bottom: 1rem; }
  .argument > h3 { margin-top: 1.75rem; font-size: 1.25rem; line-height: 1.625rem; }
  main p { margin-bottom: 1rem; }
  .argument > .claim:not(:last-child) { margin-bottom: 1rem; }
  .qa > h3 { font-size: 1.25rem; line-height: 1.625rem; }
  .hero h1 { font-size: 1.875rem; line-height: 2.25rem; }

  /* margin notes and the exhibit become inline blocks after their paragraph */
  .margin-note { margin: 1.25rem 0 0; }
  .qa > .margin-note { margin-top: .75rem; }
  main > .exhibit { margin-top: 2rem; }
  .argument > .exhibit { margin-top: 1.5rem; }
  .ledger-wrap { margin-inline: -1rem; padding: 1rem 1rem .25rem; }
  /* the instrument's preamble sits in the same ruled exhibit margin as the intro */
  [data-tool] > h2 + p { padding-left: 2.75rem; }

  /* the colophon hangs the wordmark and the 18+ ring in the exhibit margin; its text starts at the intro's edge */
  .colophon-in > :not(.col-mark):not(.col-rg) { margin-left: 2.75rem; }
  .col-sig { margin-top: 1rem !important; }
  .col-rg { margin-top: 2rem !important; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 0; }
  /* the reading map as an index: each group's name at left, its entries at right, one hairline between groups */
  .col-group { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); column-gap: .75rem; align-items: start; padding-block: .5rem; }
  .col-group + .col-group { border-top: 1px solid var(--vb-border); }
  .col-head { grid-column: 1; padding-top: .875rem; line-height: 1.125rem; }
  .col-group ul { grid-column: 2; flex-direction: column; }

  /* the ledger: one labelled record per claim */
  .ledger, .ledger caption, .ledger tbody, .ledger tr, .ledger th, .ledger td { display: block; }
  .ledger thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ledger tbody tr { padding: .875rem 0 1rem; border-top: 1px solid var(--vb-text); }
  .ledger tbody tr:last-child { padding-bottom: .75rem; }
  .ledger tbody th, .ledger td, .ledger td.where, .ledger td.state { width: auto; padding: 0; border: 0; }
  .ledger tbody th { margin-bottom: .5rem; }
  .ledger td { margin-top: .5rem; }
  .ledger td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-style: normal;
    font-size: .75rem;
    line-height: 1.1rem;
    font-weight: 600;
    color: var(--vb-text-muted);
  }
  .ledger tbody tr { display: flex; flex-direction: column; }
  .ledger tbody th { order: -2; }
  .ledger td.state { order: -1; margin-top: 0; margin-bottom: .25rem; }
  .ledger td.state:empty { display: none; }
  .ledger td.state { display: flex; align-items: center; gap: .75rem; }
  .ledger td.state::before { display: inline; }
}

/* the running head: chapter name plus a lime progress hairline, after the opening, narrow screens only */
@supports (animation-timeline: view()) {
  @media (max-width: 959.98px) {
    .argument[data-head] { timeline-scope: --chapter; }
    .argument[data-head] > h2 { view-timeline: --chapter block; }
    .argument[data-head]::before {
      content: attr(data-head) / "";
      position: sticky;
      top: env(safe-area-inset-top, 0px);
      z-index: 4;
      display: block;
      height: 2.75rem;
      margin: 0 -1rem -2.75rem;
      padding: 0 1rem;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: .875rem;
      line-height: 2.75rem;
      font-weight: 700;
      font-style: normal;
      color: var(--vb-text);
      background: linear-gradient(var(--vb-brand), var(--vb-brand)) no-repeat 0 100% / 0% 2px, rgb(17 17 15 / .97);
      border-bottom: 1px solid var(--vb-border);
      pointer-events: none;
      opacity: 0;
      animation: chapter-show linear both, chapter-progress linear both;
      animation-timeline: --chapter, scroll(root);
      animation-range: exit 0% exit 100%, normal;
    }
  }
}
@keyframes chapter-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes chapter-progress {
  from { background-size: 0% 2px, auto; }
  to { background-size: 100% 2px, auto; }
}

@media (prefers-reduced-motion: reduce) {
  .deal-btn { transition: none; }
  .argument[data-head]::before {
    background: rgb(17 17 15 / .97);
    animation: chapter-show steps(1, end) both;
    animation-timeline: --chapter;
    animation-range: exit 0% exit 100%;
  }
}

/* =====================================================================================================
   v6 round (22.10, owner orders 07:49Z and 07:52Z): no dead bands at 1440/1920/2560, every text readable.
   One layer on top of v5: the dossier grid becomes real at every width, the container and type grow above
   1440, labels reach 14px, running text reaches 16px on phones and 17px from 1024px.
   ===================================================================================================== */

/* the whole scale grows above 1440: 16px root at 1440, about 19.4px at 1920, about 23.8px at 2560 */
html { font-size: clamp(1rem, calc(1rem + (100vw - 90rem) * .007), 1.5rem); }

:root {
  --lane: 32rem;        /* about 66 characters a line at the 18px body */
  --gut: 4.5rem;
  --marg: 24rem;
  --rail: 13rem;
  --rgut: 3rem;
  --wrap: calc(var(--lane) + var(--gut) + var(--marg));
  --wrap-home: calc(var(--rail) + var(--rgut) + var(--lane) + var(--rgut) + var(--marg));
  --body-w: var(--wrap);
}

/* labels and small print: 14px at least, everywhere */
.deal-ad, .note-key, .ledger thead th, .state-tag, .contents-key, .col-head, .by-when,
.tbl thead th, .exhibit dt, .opbox dt, .about-dl dt { font-size: .875rem; line-height: 1.25rem; }
.ledger td[data-label]::before { font-size: .875rem !important; line-height: 1.25rem !important; }
.age-ring { width: 2.25rem; height: 2.25rem; font-size: .875rem; }
.deal-aff { font-size: 1rem; line-height: 1.5rem; }
.margin-note { font-size: 1rem; line-height: 1.5rem; }
.margin-note.related { font-size: .9375rem; }
.exhibit dd, .opbox dd { font-size: 1rem; line-height: 1.5rem; }
.by-note { font-size: 1rem; line-height: 1.5rem; }
.exhibit dd a { color: var(--vb-text); }

/* the FAQ on inner pages: a question row of marker and question on one line, no stray heading margins */
.faq details { margin: 0; }
.faq summary { align-items: center; min-height: 3.25rem; padding: .75rem 0; }
.faq summary > h3 {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.1875rem;
  line-height: 1.625rem;
  font-weight: 750;
  color: var(--vb-text);
}
.faq summary:hover > h3 { text-decoration: underline; text-decoration-color: var(--vb-brand); text-underline-offset: .22em; }
.faq summary::after { align-self: center; margin-top: 0; }
.faq details > p { margin: 0 0 1.25rem; padding-top: .75rem; border-top: 1px solid var(--vb-border); }

/* the status tag may run to three words: it wraps as one tag, the dot stays on the first line */
.state-tag { white-space: normal; align-items: flex-start; text-wrap: balance; }
.state-tag::before { margin-top: .3125rem; }

/* ---------- phones and tablets: running text at 16px, line height 1.5 or more */
@media (max-width: 959.98px) {
  .intro { font-size: 1rem; line-height: 1.5rem; }
  .dateline p, .deal-kicker { font-size: .875rem; line-height: 1.25rem; }
  .margin-note p, .by-note, .deal-aff { font-size: 1rem; line-height: 1.5rem; }
  .ledger td[data-label]::before { margin-bottom: .125rem; }
  /* the larger intro costs height: the first screen gives it back from spacing, so the deal logo stays on the 360x640 screen */
  .mast-row { padding-block: .0625rem; }
  .opening { padding-top: .25rem; }
  .opening h1 { padding-block: .25rem; }
  .lede { margin-top: .375rem; line-height: 1.3125rem; }
  .intro { margin-top: .5rem; padding-left: 2.25rem; }
  .intro::before { left: 1.25rem; }
  main > .deal { margin-top: .5rem; padding-top: .375rem; }
  /* inner pages set the H1 flush left, so their lede follows the same edge instead of centring under it */
  .hero .lede { max-width: none; margin-inline: 0; text-align: left; }
}

/* ---------- 960 and up: the dossier, at every width */
@media (min-width: 960px) {
  main {
    grid-template-columns: [lane-start] minmax(0, var(--lane)) [lane-end] var(--gut) [margin-start] minmax(13rem, var(--marg)) [margin-end];
  }
  /* the masthead runs the width of the page grid, closed by one hairline under the page links */
  .masthead { width: min(100% - 4rem, var(--wrap)); border-bottom: 1px solid var(--vb-border); }
  .pages ul { column-gap: clamp(1.75rem, 2.4vw, 3rem); padding-bottom: .25rem; }

  /* 17px for running text in the margin and the files */
  .margin-note, .margin-note p, .deal-aff, .by-note, .exhibit dd, .opbox dd { font-size: 1.0625rem; line-height: 1.625rem; }

  /* inner and utility pages: the lane, and the sponsor note held in the margin for the whole read */
  main:not(:has(> .contents)) > .deal {
    grid-column: margin;
    grid-row: 1 / span 60;
    align-self: start;
    margin-top: var(--sec);
  }
  /* the title block is closed by a hairline that runs the lane; the first section opens without a second rule */
  main > .hero { grid-row: 1; padding-bottom: 2rem; border-bottom: 1px solid var(--vb-border); }
  main > .hero ~ section:first-of-type { padding-top: 2.5rem; }
  main > .hero ~ section:first-of-type > h2 { border-top: 0; padding-top: 0; }
  main > .hero ~ .exhibit { margin-top: 2.5rem; }
  main > .hero ~ .exhibit ~ section:first-of-type { padding-top: var(--sec); }
  main > .hero ~ .exhibit ~ section:first-of-type > h2 { border-top: 1px solid var(--vb-border); padding-top: 1.25rem; }
  /* tables stay in the lane beside the sponsor note and read as one labelled record per row */
  main:not(:has(> .contents)) .argument > .ledger-wrap { grid-column: lane; }
  main:not(:has(> .contents)) .ledger-wrap { padding: 1.25rem 1.5rem .5rem; }
  main:not(:has(> .contents)) .ledger,
  main:not(:has(> .contents)) .ledger caption,
  main:not(:has(> .contents)) .ledger tbody,
  main:not(:has(> .contents)) .ledger th,
  main:not(:has(> .contents)) .ledger td { display: block; }
  main:not(:has(> .contents)) .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  main:not(:has(> .contents)) .ledger tbody tr { display: flex; flex-direction: column; gap: .625rem; padding: 1rem 0 1.25rem; border-top: 1px solid var(--vb-text); }
  main:not(:has(> .contents)) .ledger tbody tr + tr { border-top-color: var(--vb-border); }
  main:not(:has(> .contents)) .ledger tbody th,
  main:not(:has(> .contents)) .ledger td { width: auto; padding: 0; border: 0; }
  main:not(:has(> .contents)) .ledger tbody th { font-size: 1.1875rem; line-height: 1.625rem; }
  main:not(:has(> .contents)) .ledger td { font-size: 1rem; line-height: 1.5rem; }
  main:not(:has(> .contents)) .ledger td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .125rem;
    font-style: normal;
    font-weight: 600;
    color: var(--vb-text-muted);
  }
  main:not(:has(> .contents)) .ledger td.where { font-style: normal; }
  main:not(:has(> .contents)) > .byline { grid-column: lane; }

  /* the colophon: the signature and the 18+ line at left, the reading map at right */
  .colophon-in {
    width: min(100%, var(--wrap));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--gut);
    align-items: start;
  }
  .colophon-in > * { grid-column: 1; }
  .colophon-in > .col-nav { grid-column: 2; grid-row: 1 / span 6; margin-top: 0; padding-top: 0; border-top: 0; }
  :where(.colophon-in > *) { max-width: none; }
}

/* the sponsor note stays in view while the reader scrolls, on screens tall enough to show it whole */
@media (min-width: 960px) and (min-height: 46rem) {
  main:not(:has(> .contents)) > .deal { position: sticky; top: 1.5rem; }
}

/* ---------- 1200 and up, the home file: contents rail | lane | evidence margin */
@media (min-width: 1200px) {
  main:has(> .contents) {
    grid-template-columns: [rail-start] var(--rail) [rail-end] var(--rgut) [lane-start] minmax(0, var(--lane)) [lane-end] var(--rgut) [margin-start] minmax(13rem, var(--marg)) [margin-end];
  }
  body:has(main > .contents) .masthead { width: min(100% - 4rem, var(--wrap-home)); }
  body:has(main > .contents) .colophon-in { width: min(100%, var(--wrap-home)); }

  /* the opening is the title page of the file: H1 and lede across rail and lane, the sponsor note in the margin,
     one hairline closing the whole row */
  /* the title page hangs from the masthead hairline (its own top rule lies on it), so H1, lede and intro sit in one ruled field */
  main:has(> .contents) > .opening { grid-column: rail-start / margin-end; grid-row: 1; margin-top: -1px; padding-bottom: 2.5rem; border-top: 1px solid var(--vb-border); }
  main:has(> .contents) > .opening > .lede { grid-column: rail-start / lane-end; max-width: 46rem; }
  /* the sponsor note stands beside the title page and the operator file together, so neither leaves a void under it */
  /* (not sticky here: a sticky item escapes its grid area into the sections below; the ruled note simply runs to the file's end) */
  main:has(> .contents) > .deal { grid-row: 1 / span 2; align-self: stretch; width: auto; justify-self: stretch; margin-top: var(--sec); margin-bottom: 0; }

  /* the operator file closes the title page across rail and lane, its five entries in three columns */
  main:has(> .contents) > .exhibit { grid-column: rail-start / lane-end; grid-row: 2; margin-top: 0; }
  main:has(> .contents) > .exhibit dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  main:has(> .contents) > .exhibit dl > div { display: block; padding: .75rem 0 .875rem; }
  main:has(> .contents) > .exhibit dl > div:nth-child(4) { grid-column: span 2; }
  main:has(> .contents) > .exhibit dd { margin-top: .25rem; }
  main:has(> .contents) > .contents { grid-row: 3 / span 60; }
  main:has(> .contents) > section:first-of-type { grid-row: 3; }

  /* each section of the argument is one ruled row from lane to margin; the rule sits above the H2 */
  main:has(> .contents) > .argument { margin-top: var(--sec); padding-top: 1.25rem; border-top: 1px solid var(--vb-border); }
  main:has(> .contents) > .argument > h2 { border-top: 0; padding-top: 0; }
  main:has(> .contents) > .argument:not(:has(> h2)) { border-top-style: dashed; padding-top: 0; }
  main:has(> .contents) > .argument:not(:has(> h2)) > :first-child { margin-top: 1.5rem; }
  main:has(> .contents) > [data-tool] { margin-top: var(--sec); padding-top: 2.25rem; border-top: 3px solid var(--vb-brand); }
  main:has(> .contents) > [data-tool] > h2 + p { font-size: 1.0625rem; line-height: 1.625rem; }

  /* the author line on the home: name and note in the lane, the date in the margin, one rule over the row */
  main:has(> .contents) > .byline {
    grid-column: lane-start / margin-end;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    border-top: 1px solid var(--vb-border);
  }
  main:has(> .contents) > .byline > * { grid-column: lane; }
  main:has(> .contents) > .byline > .by-when { grid-column: margin; grid-row: 1; margin-top: .25rem !important; }
}

/* ---------- lead sameness guard (22.10 08:55Z): the sponsor note goes back into the reading flow.
   It closes the title page as its last item, in the lane; only its significant terms hang in the margin beside it,
   like every other piece of evidence in this file. It is never sticky and never a rail. */
@media (min-width: 960px) {
  /* the title page is one field over four rows: H1, lede, intro and the sponsor note; the plate labels it from the margin */
  main > .opening, main > .hero {
    grid-column: lane-start / margin-end;
    grid-row: 1 / span 4;
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    align-content: start;
    margin-top: -1px;
    padding-bottom: 0;
    border-top: 1px solid var(--vb-border);
    border-bottom: 0;
  }
  main > .opening > *, main > .hero > * { grid-column: lane; min-width: 0; }
  main > .opening > h1, main > .hero > h1 { grid-row: 1; }
  main > .opening > .lede, main > .hero > .lede { grid-row: 2; }
  main > .opening > .intro, main > .hero > .intro { grid-row: 3; }
  main > .opening > .plate, main > .hero > .plate { grid-column: margin; grid-row: 1 / span 3; justify-self: start; align-self: start; margin-top: .5rem; }
  main > .hero > h1 { grid-column: lane-start / margin-end; max-width: 30ch; }
  main > .hero > .plate { grid-row: 2 / span 2; margin-top: .375rem; }

  /* the sponsor note: in the lane, its term list hanging in the margin */
  main > .deal, main:not(:has(> .contents)) > .deal, main:has(> .contents) > .deal {
    grid-column: lane-start / margin-end;
    grid-row: 4;
    position: static;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    align-self: start;
    justify-self: stretch;
    width: auto;
    margin: 2.5rem 0 2.5rem;
  }
  /* five content rows and one flexible row that takes whatever height the hanging terms need, so the note itself never spreads */
  main > .deal { grid-template-rows: repeat(5, auto) 1fr; }
  main > .deal > * { grid-column: lane; min-width: 0; align-self: start; }
  main > .deal > .deal-plate, main > .deal > .deal-btn { justify-self: start; }
  main > .deal > .deal-terms { grid-column: margin; grid-row: 1 / -1; align-self: start; margin-top: 0; max-width: none; }

  /* inner and utility pages: every section is one ruled row from lane to margin, the rule above its H2 */
  main:not(:has(> .contents)) > section {
    grid-column: lane-start / margin-end;
    display: grid;
    grid-template-columns: subgrid;
    align-content: start;
    margin-top: var(--sec);
    padding-top: 1.25rem;
    border-top: 1px solid var(--vb-border);
  }
  main:not(:has(> .contents)) > section > * { grid-column: lane; min-width: 0; }
  main:not(:has(> .contents)) > section > h2,
  main > .hero ~ section:first-of-type > h2 { border-top: 0; padding-top: 0; }
  main > .hero ~ section:first-of-type { padding-top: 1.25rem; }
  /* the argument follows the title page in source order (the v5 rule pinned it to the second row) */
  main:not(:has(> .contents)) > section:first-of-type { grid-row: auto; }
  /* an operator file on an inner page follows the sponsor note across the whole row, its entries in three columns */
  main:not(:has(> .contents)) > .exhibit { grid-column: lane-start / margin-end; grid-row: 5; margin-top: 0; }
  main:not(:has(> .contents)) > .exhibit dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  main:not(:has(> .contents)) > .exhibit dl > div { display: block; padding: .75rem 0 .875rem; }
  main:not(:has(> .contents)) > .exhibit dd { margin-top: .25rem; }
  main > .hero ~ .exhibit ~ section:first-of-type { padding-top: 1.25rem; }
  main > .hero ~ .exhibit ~ section:first-of-type > h2 { border-top: 0; padding-top: 0; }

  /* the ledgers use the whole row: the claim and its reading in the lane, where it is published (or the answer) in the margin */
  main:not(:has(> .contents)) .argument > .ledger-wrap { grid-column: lane-start / margin-end; display: grid; grid-template-columns: subgrid; }
  main:not(:has(> .contents)) .ledger { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  main:not(:has(> .contents)) .ledger caption { grid-column: lane; padding-bottom: 1rem; text-wrap: balance; }
  main:not(:has(> .contents)) .ledger tbody { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  main:not(:has(> .contents)) .ledger tbody tr { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 0; }
  main:not(:has(> .contents)) .ledger tbody tr > * { grid-column: lane; margin-top: .625rem; }
  main:not(:has(> .contents)) .ledger tbody tr > :first-child { margin-top: 0; }
  main:not(:has(> .contents)) .ledger tbody tr > td.where,
  main:not(:has(> .contents)) .ledger tbody tr:not(:has(> td.where)) > td:last-child:not(:first-child) { grid-column: margin; grid-row: 1 / span 4; margin-top: 0; }

  /* the signature closes the read as one ruled row: name and note in the lane, the date in the margin */
  main:not(:has(> .contents)) > .byline {
    grid-column: lane-start / margin-end;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
    border-top: 1px solid var(--vb-border);
  }
  main:not(:has(> .contents)) > .byline > * { grid-column: lane; }
  main:not(:has(> .contents)) > .byline > .by-when { grid-column: margin; grid-row: 1; margin-top: .25rem !important; }

  /* the home between 960 and 1199: title page, sponsor note, operator file, contents, then the argument */
  main:has(> .contents) > .exhibit { grid-column: lane-start / margin-end; grid-row: 5; margin-top: 0; }
  main:has(> .contents) > .contents { grid-row: 6; }
  main:has(> .contents) > section:first-of-type { grid-row: 7; }
}

/* the home from 1200: the title page runs from the rail to the margin, the note in the lane, then the operator file across the
   whole file, then the contents rail beside the argument */
@media (min-width: 1200px) {
  main:has(> .contents) > .opening { grid-column: rail-start / margin-end; grid-row: 1 / span 4; }
  main:has(> .contents) > .opening > h1, main:has(> .contents) > .opening > .lede { grid-column: rail-start / lane-end; }
  main:has(> .contents) > .opening > .plate { grid-column: margin; grid-row: 1 / span 3; justify-self: start; align-self: start; }
  /* the operator file is the margin exhibit of the title page: under the plate, beside the lede, the intro and the sponsor note */
  main:has(> .contents) > .exhibit { grid-column: margin; grid-row: 2 / span 3; align-self: start; margin-top: 1.5rem; }
  main:has(> .contents) > .exhibit dl { display: block; }
  main:has(> .contents) > .exhibit dl > div { display: block; padding: .625rem 0 .75rem; }
  main:has(> .contents) > .exhibit dl > div + div { border-top: 1px solid var(--vb-border); }
  /* with the margin taken by the file, the note keeps its terms in the lane */
  main:has(> .contents) > .deal { grid-column: lane; display: block; }
  main:has(> .contents) > .deal > .deal-terms { margin-top: 1rem; max-width: 60ch; }
  main:has(> .contents) > .contents { grid-row: 5 / span 60; }
  main:has(> .contents) > section:first-of-type { grid-row: 5; }
}

/* deal hierarchy (cross-site critique P1, 22.10): the significant terms are never smaller than the disclosure paragraph;
   16px on phones, 17px from 960, at the running-text line height */
.deal-terms li { font-size: 1rem; line-height: 1.5rem; }
.deal-terms li::before { top: .75rem; }
@media (min-width: 960px) {
  .deal-terms li { font-size: 1.0625rem; line-height: 1.625rem; }
  .deal-terms li::before { top: .8125rem; }
}
/* round 2 (lead, 22.10 09:34Z): on inner and utility pages the margin works from the top of the title page. The signature
   leaves the foot of the read and becomes the file label under the plate, beside the lede and the intro; the significant
   terms follow beside the sponsor note. Below 960 it stays a signature under the last section. */
@media (min-width: 960px) {
  main:not(:has(> .contents)) > .byline {
    grid-column: margin;
    grid-row: 2 / span 2;
    display: block;
    align-self: start;
    margin: 4.5rem 0 0;
    padding-top: 1rem;
    border-top: 0;
  }
  main:not(:has(> .contents)) > .byline > .by-when { margin-top: .5rem !important; }
}
/* round 2: on inner and utility pages a wider lane (about 73 characters at the body size) and a narrower margin, so a prose
   row leaves under a quarter of the screen open beside it at 1440, 1920 and 2560, and the page grid still spans enough
   of a 2560 screen. The home keeps its rail grid. */
:root:not(:has(main > .contents)) { --lane: 35.5rem; --gut: 2.75rem; --marg: 19.25rem; }
/* with the signature at the top, the last section keeps the space the signature used to give before the colophon */
@media (min-width: 960px) {
  main:not(:has(> .contents)) > section:last-of-type { margin-bottom: 4.5rem; }
}