/* The one stylesheet of the public site. Brand Manifest v1.1, "Letterhead x Detail
   Typografie". Paper first: light is the default, dark is the reader's choice and draws
   only from the reserved dark set.
   Every colour is a token on :root; nothing below the token sheet types a hex value.
   The typeface is Latin Modern Roman, declared in assets/fonts/fonts.css and self-hosted;
   IBM Plex Mono only for keys, checksums and file names. Nothing is fetched from elsewhere.
   Amber is for a Brent price line only, coral for breach marks only. */

/* ── Token sheet ─────────────────────────────────────────────────── */
:root {
  --rc-paper: #FBF9F4;
  --rc-card: #FFFFFF;
  --rc-ink: #1B1A1D;
  --rc-slate: #57534E;
  --rc-teal: #3E8278;       /* large text >=24px (or >=18.66px bold), rules, marks */
  --rc-teal-deep: #2E6B63;  /* links and any small teal text: the 4.5:1 rule */
  --rc-line: #E5E1D8;
  --rc-grid: #CBC5B8;       /* hairline grid lines (0.75px): --rc-line is too faint at that weight */
  --rc-tint: #F1EDE4;       /* the landing page's alternate band, warm */
  --rc-amber: #A86A12;      /* Brent line only */
  --rc-coral: #B8432C;      /* breach only */

  /* The reserved dark set: the dark toggle draws from these and nothing else. */
  --rc-night: #1B1A1D;
  --rc-navy: #16202A;
  --rc-dark-teal: #5E9E94;
  --rc-mist: #BFE3DA;
  --rc-dark-paper: #F3F2EE;
  --rc-dark-slate: #A9B3B0;
  --rc-dark-amber: #E8A33D;
  --rc-dark-coral: #E0674F;
  --rc-dark-grid: #4A5560;  /* the dark twin of --rc-grid */
  --rc-dark-tint: #25242A;  /* the dark twin of --rc-tint: a shade lighter than the night ground */

  --rc-serif: "Latin Modern Roman", serif;
  --rc-mono: "IBM Plex Mono", monospace;
}
/* ── End of token sheet ──────────────────────────────────────────── */

/* Roles, light (the default). */
:root {
  --bg: var(--rc-paper);
  --card: var(--rc-card);
  --text: var(--rc-ink);
  --muted: var(--rc-slate);
  --line: var(--rc-line);
  --grid: var(--rc-grid);
  --tint: var(--rc-tint);
  --rule-ink: var(--rc-ink);
  --rule-teal: var(--rc-teal);
  --large-teal: var(--rc-teal);
  --link: var(--rc-teal-deep);
  --inside: var(--rc-teal-deep);
  --breach: var(--rc-coral);
  --brent: var(--rc-amber);
  --band: var(--rc-teal);
  --band-edge: var(--rc-teal-deep);
  --placeholder: var(--rc-slate);
  color-scheme: light;
}
/* Roles, dark: the reserved set only. */
:root[data-theme="dark"] {
  --bg: var(--rc-night);
  --card: var(--rc-navy);
  --text: var(--rc-dark-paper);
  --muted: var(--rc-dark-slate);
  --line: var(--rc-dark-slate);
  --grid: var(--rc-dark-grid);
  --tint: var(--rc-dark-tint);
  --rule-ink: var(--rc-dark-paper);
  --rule-teal: var(--rc-dark-teal);
  --large-teal: var(--rc-dark-teal);
  --link: var(--rc-mist);
  --inside: var(--rc-mist);
  --breach: var(--rc-dark-coral);
  --brent: var(--rc-dark-amber);
  --band: var(--rc-dark-teal);
  --band-edge: var(--rc-mist);
  --placeholder: var(--rc-dark-slate);
  color-scheme: dark;
}

/* A page without a scrollbar keeps the gutter, so the centred masthead never moves. */
html { background: var(--bg); color: var(--text); scrollbar-gutter: stable; }
body {
  font-family: var(--rc-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: var(--text);
  background: var(--bg);
  text-align: left;
  hyphens: manual;
  font-variant-numeric: lining-nums;
}
main { display: block; }
/* The text column of every page but the landing page (which sets its own stripes). */
.page { max-width: 640px; margin: 0 auto; padding: 32px 20px 48px; }
p, li { margin: 0 0 14px; }

/* ── Masthead ───────────────────────────────────────────────────────
   One markup on every page, in two full-width bars on the paper ground: the brand bar
   (mark, name, issuer line) and the nav bar (nav, double rule), each centred on 720px.
   Their heights are fixed on a desktop, so the nav bar can sit exactly under the brand
   bar while both stay on screen; --brand-h and --nav-h are those heights. */
:root { --brand-h: 198px; --nav-h: 43px; }
/* Their own type size, so no page's body size can change their height. */
.brand-bar, .nav-bar { background: var(--bg); padding: 0 20px; font-size: 18px; line-height: 1.6; }
.brand-bar > .masthead, .nav-inner { max-width: 720px; margin: 0 auto; }
.masthead { text-align: center; padding: 32px 0 0; }
.masthead .mark { display: block; margin: 0 auto 12px; width: 64px; height: auto; }
.masthead .mark-dark { display: none; }
:root[data-theme="dark"] .masthead .mark-light { display: none; }
:root[data-theme="dark"] .masthead .mark-dark { display: block; }
.wordmark {
  display: inline-block;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.26em;
  margin-right: -0.26em;   /* the tracking after the last letter would push it off centre */
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.wordmark .reference { color: var(--large-teal); }
.masthead .issued { font-style: italic; font-size: 17px; color: var(--muted); margin: 6px 0 16px; }
.nav-bar nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 26px; margin: 0 0 16px; }
.nav-bar nav a {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  padding-bottom: 2px;
}
.nav-bar nav a:hover { color: var(--link); }
/* The current page: teal, and nothing else changes, so no item moves between pages. */
.nav-bar nav a[aria-current="page"] { color: var(--link); }

/* The double rule: 1.5px ink, 1px gap, 0.75px teal. Closes the masthead; once more before the footer. */
.double-rule {
  height: 1px;
  border-top: 1.5px solid var(--rule-ink);
  border-bottom: 0.75px solid var(--rule-teal);
  margin: 0;
}

/* The masthead stays on screen. Desktop (900px wide, 700px high and up): both bars, as
   they are, and everything scrolls underneath. A phone: the nav bar alone, one line that
   swipes sideways inside the bar. A short window: nothing sticks. Print: nothing sticks.
   Anchors land below whatever stays. No script. */
@media (min-width: 900px) and (min-height: 700px) {
  .brand-bar { position: sticky; top: 0; z-index: 20; height: var(--brand-h); box-sizing: border-box; }
  .nav-bar { position: sticky; top: var(--brand-h); z-index: 20; height: var(--nav-h); box-sizing: border-box; }
  [id] { scroll-margin-top: calc(var(--brand-h) + var(--nav-h) + 16px); }
  /* Collapsed (the page's script sets .masthead-collapsed on <html> once the hero, or on
     other pages the letterhead, has scrolled under it): a 56px strip, the mark at 24px and
     the name on the left, the nav on the right, a 1px ink rule below. The brand bar stays
     stuck at top 0 and shrinks to 56px; its bottom margin keeps its 198px in the page, so
     nothing below moves. The nav bar rides up into the strip over a transparent ground.
     No negative sticky top, no display change on a sticky bar, and no transition on a
     sticky offset or a bar height: Chrome with GPU compositing (a 4K display, Windows)
     painted nothing at all for the strip that way. Only the mark, the name and the nav
     type animate. */
  .masthead .mark, .wordmark, .nav-bar nav a {
    transition: width 150ms ease-out, font-size 150ms ease-out, letter-spacing 150ms ease-out;
  }
  .masthead-collapsed .brand-bar { top: 0; height: 56px; margin-bottom: calc(var(--brand-h) - 56px); }
  .masthead-collapsed .brand-bar > .masthead {
    flex: 1; max-width: 1040px; height: 56px; padding: 0; display: flex; align-items: center;
    border-bottom: 1px solid var(--rule-ink); box-sizing: border-box;
  }
  .masthead-collapsed .masthead .home { display: flex; align-items: center; gap: 12px; }
  .masthead-collapsed .masthead .mark { width: 24px; margin: 0; }
  .masthead-collapsed .wordmark { font-size: 14px; letter-spacing: 0.28em; }
  .masthead-collapsed .masthead .issued { display: none; }
  .masthead-collapsed .nav-bar { top: calc((56px - var(--nav-h)) / 2); background: transparent; pointer-events: none; }
  .masthead-collapsed .nav-inner { max-width: 1040px; height: var(--nav-h); display: flex; align-items: center; }
  .masthead-collapsed .nav-bar nav { flex: 1; justify-content: flex-end; margin: 0; gap: 4px 22px; pointer-events: auto; }
  .masthead-collapsed .nav-bar nav a { font-size: 10.5px; letter-spacing: 2px; }
  .masthead-collapsed .nav-bar .double-rule { visibility: hidden; height: 0; border: none; }
}
@media (max-width: 899px) {
  .nav-bar { position: sticky; top: 0; z-index: 20; }
  .nav-bar nav { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .nav-bar nav::-webkit-scrollbar { display: none; }
  .nav-bar nav a { flex: none; white-space: nowrap; }
  [id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
}
@media print {
  .brand-bar, .nav-bar { position: static; }
}
/* Before the footer: one thin ink rule. */
.footer-rule { border-top: 0.75px solid var(--rule-ink); margin: 64px 0 0; }

/* ── Type ───────────────────────────────────────────────────────── */
h1, h2, h3 { font-weight: 600; line-height: 1.25; }
h1 { font-size: 33px; margin: 8px 0 14px; }
h2 { font-size: 24px; margin: 40px 0 12px; }
h3 { font-size: 21px; margin: 28px 0 10px; }
h2 .num { color: var(--large-teal); margin-right: 0.4em; }
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 0.5px; }
code, pre, .mono { font-family: var(--rc-mono); font-size: 14px; }
.audience { font-size: 18px; line-height: 1.55; color: var(--text); margin: 0 0 8px; }
.caption, .meta, .note, .series { font-style: italic; font-size: 15px; color: var(--muted); }
.tier-name { font-style: italic; color: var(--link); }
.signature { font-style: italic; margin-top: 22px; }
small, .small { font-size: 13px; }

/* Wording that awaits counsel: shown, never hidden (rule 1.5). */
.legal-tbd {
  font-size: 13px;
  font-style: normal;
  color: var(--placeholder);
  border: 0.75px dashed var(--placeholder);
  padding: 0 4px;
  white-space: normal;
}

.empty { font-style: italic; color: var(--muted); }
.section { white-space: pre-wrap; }
/* A quoted document (the rule files, a case's method.md): typeset in the site serif. */
.quoted-document h2 { margin-top: 48px; }
.quoted-document h4 { font-size: 18px; font-weight: 600; margin: 22px 0 8px; }
.quoted-document h5 { font-size: 17px; font-weight: 600; font-style: italic; margin: 18px 0 6px; }
.quoted-document blockquote { margin: 14px 0; padding: 0 0 0 16px; border-left: 0.75px solid var(--rule-teal); }
.quoted-document hr { border: none; border-top: 0.75px solid var(--line); margin: 28px 0; }
.quoted-document code { font-size: 15px; }
.quoted-document ol, .quoted-document ul { padding-left: 24px; }
.authoritative { font-style: italic; font-size: 15px; color: var(--muted); margin: 8px 0 0; }
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--card);
  border: 0.5px solid var(--line);
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Tables, book style: rules top and bottom, a hairline under the head, nothing else ── */
.table-wrap { overflow-x: auto; margin: 12px 0 8px; }
/* A table takes its own width. Narrower than the text column it sits flush left in it;
   wider, it is centred on the column (equal overhang both sides), capped at 960px and at
   the viewport, and scrolls inside itself beyond that. */
.table-wrap {
  width: max-content;
  min-width: 100%;
  max-width: min(960px, calc(100vw - 40px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
table {
  border-collapse: collapse;
  border-top: 1.5px solid var(--rule-ink);
  border-bottom: 1.5px solid var(--rule-ink);
  font-size: 16px;
  font-variant-numeric: lining-nums tabular-nums;
}
th, td { padding: 5px 12px 5px 0; text-align: right; vertical-align: top; border: none; }
th:last-child, td:last-child { padding-right: 0; }
th { font-weight: 600; border-bottom: 0.75px solid var(--rule-ink); white-space: nowrap; }
td:first-child, th:first-child { text-align: left; }
.wide td { white-space: nowrap; }
.wide th { white-space: normal; vertical-align: bottom; }
.wide td.text, .wide td.result.open { white-space: normal; min-width: 11em; }
td.result.inside { color: var(--inside); }
td.result.breach { color: var(--breach); }
td.result.open { color: var(--muted); }
.table-wrap + .caption { margin-top: 4px; }

/* ── Charts: a white ground on the paper page ───────────────────── */
svg { display: block; max-width: 100%; height: auto; background: var(--card); border: 0.5px solid var(--line); margin: 12px 0; fill: var(--text); }
.grid { stroke: var(--line); stroke-width: 1; }
.axis { stroke: var(--muted); stroke-width: 1; }
.tick { font-family: var(--rc-serif); font-size: 12px; fill: var(--muted); }
.band { fill: var(--band); fill-opacity: 0.27; stroke: var(--band-edge); stroke-width: 1; }
.p50 { fill: none; stroke: var(--text); stroke-width: 1.75; }
.fair { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 4 3; }
.brent { fill: none; stroke: var(--brent); stroke-width: 1.75; }
.breach-dot { fill: var(--breach); stroke: var(--card); stroke-width: 1.5; }
.bar { fill: var(--band); fill-opacity: 0.27; stroke: var(--band-edge); stroke-width: 1; }
.expected { stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 5 3; }

/* ── Footer ─────────────────────────────────────────────────────── */
footer { padding-top: 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
footer p { margin: 6px 0; }
/* The LinkedIn icon ends the footer's link row: monochrome, slate, ink on hover. The
   global svg rule (card ground, border, block) is for charts and is undone here. */
footer a.linkedin { color: var(--muted); text-decoration: none; display: inline-block; vertical-align: -2px; }
footer a.linkedin:hover, footer a.linkedin:focus-visible { color: var(--text); }
footer .icon-linkedin { display: block; width: 16px; height: 16px; margin: 0; border: none; background: none; fill: currentColor; }
.theme-toggle {
  font: inherit;
  color: var(--link);
  background: none;
  border: none;
  padding: 0;
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
  cursor: pointer;
}

@media (max-width: 480px) {
  body { font-size: 17px; }
  .page { padding: 28px 16px 40px; }
  .brand-bar, .nav-bar { padding: 0 16px; }
  h1 { font-size: 28px; }
  .wordmark { font-size: 21px; letter-spacing: 0.2em; margin-right: -0.2em; }
  .nav-bar nav { gap: 2px 20px; }
}
.masthead .home { display: inline-block; color: var(--text); text-decoration: none; }

/* ── Record analytics (record.html, drawn by assets/js/record.js) ── */
.analytics { margin: 8px 0 28px; }
.tile-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 32px; margin: 12px 0 22px; }
.tile-group h3 { margin: 0 0 8px; font-size: 19px; }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 18px; }
.tile { display: flex; flex-direction: column; border-top: 0.75px solid var(--rule-ink); padding-top: 6px; }
.tile .big { font-size: 30px; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.tile-label { font-style: italic; font-size: 14px; line-height: 1.35; color: var(--muted); }
.period { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; margin: 10px 0 12px; }
.presets, .pills { display: flex; flex-wrap: wrap; }
.seg, .pill {
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: 0.75px solid var(--text);
  border-radius: 0;
  padding: 3px 12px;
  cursor: pointer;
}
.presets .seg + .seg { margin-left: -0.75px; }
.pill { border-radius: 999px; margin: 0 6px 6px 0; min-width: 3.2em; }
.seg[aria-pressed="true"], .pill[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg:focus-visible, .pill:focus-visible, .range select:focus-visible { outline: 1.5px solid var(--rule-teal); outline-offset: 2px; }
.range label { font-style: italic; font-size: 15px; color: var(--muted); margin-right: 12px; white-space: nowrap; }
.range select {
  font: inherit;
  font-style: normal;
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
  border: 0.75px solid var(--text);
  border-radius: 0;
  padding: 2px 4px;
  margin-left: 4px;
}
.chart-wrap { overflow-x: auto; }
.chart-wrap svg { min-width: 560px; }
.case-line { font-size: 16px; margin: 12px 0 4px; font-variant-numeric: lining-nums tabular-nums; }
.brent.faded { stroke-opacity: 0.4; }
.brent.faint { stroke-opacity: 0.55; stroke-width: 1.25; }
.p50-tick { stroke: var(--text); stroke-width: 1.5; }
.p50-dashed { fill: none; stroke: var(--text); stroke-width: 1.25; stroke-dasharray: 5 3; }
.issue-line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 3; }
.dot-inside { fill: var(--text); stroke: var(--card); stroke-width: 1.5; }
.chart-label { font-family: var(--rc-serif); font-size: 12px; fill: var(--muted); }

/* ── The landing page: the dossier (direction A, 2026-09-24) ─────────
   docs/design/landing_direction_A/. One page ground; a 1040px column; every section opens
   with a band (ink numeral block, title, a rule that fills, one teal takeaway; class section-band, as .band is the fan) and every
   fact sits in an exhibit (a tab on a 1.5px ink box, one step lighter than the page).
   Band, 32px, exhibits, 72px, next band; exhibit grids 28px apart. No radii, no shadows,
   no gradients. Every colour is a role with its dark twin above. */
body.landing { max-width: none; padding: 0; font-size: 16px; line-height: 1.55; }
.dossier { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

/* The hero: headline, the call to action and the signature; beside it, Exhibit 0. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 44px; padding: 44px 0 72px; }
.hero-text { display: flex; flex-direction: column; }
.hero h1 { font-size: 44px; line-height: 1.12; font-weight: 700; margin: 0 0 26px; }
.hero-cta { margin: 0 0 26px; }
.cta {
  display: inline-block;
  padding: 12px 22px;
  background: var(--text);
  color: var(--bg);
  font-size: 13px;
  letter-spacing: 1.5px;
  text-decoration: none;
}
.cta:hover, .cta:focus-visible { background: var(--link); color: var(--bg); }
.hero-signed { margin-top: auto; border-top: 1px solid var(--grid); padding-top: 10px;
               display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hero-signed-label { font-size: 12px; letter-spacing: 2px; color: var(--link); margin: 0; }
.hero-signed .signature { font-style: normal; font-size: 14px; line-height: 1.5; margin: 0; text-align: right; }
.hero-signed .for { font-style: italic; }
.hero .exhibit-box { display: flex; flex-direction: column; justify-content: center; }
.question { font-size: 24px; font-style: italic; line-height: 1.3; margin: 0; }

/* The band. */
/* 72px of air between a section's last content and the next band; band to exhibits 32px. */
.dossier-section { padding: 0 0 72px; }
.section-band { display: flex; align-items: center; border-top: 2px solid var(--rule-ink); border-bottom: 1px solid var(--rule-ink);
        margin: 0 0 32px; }
.band-num { flex: none; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
            background: var(--text); color: var(--bg); font-size: 30px; line-height: 1; }
.landing .band-title, .inner .band-title { font-size: 26px; font-weight: 700; line-height: 1.2; padding: 0 22px; margin: 0; white-space: nowrap; }
.band-rule { flex: 1 1 24px; height: 1px; background: var(--rule-ink); }
.band-takeaway { padding-left: 22px; margin: 0; font-size: 15px; font-style: italic; color: var(--link); }

/* The exhibit. */
.exhibit { display: flex; flex-direction: column; min-width: 0; }
.exhibit-tab { align-self: flex-start; margin: 0; padding: 5px 12px; font-size: 10px; line-height: 1.3; letter-spacing: 2px;
               text-transform: uppercase; color: var(--bg); }
.exhibit-tab.teal { background: var(--link); }
.exhibit-tab.ink { background: var(--text); }
.exhibit-box { flex-grow: 1; border: 1.5px solid var(--rule-ink); background: var(--card); padding: 20px 22px;
               font-size: 14px; line-height: 1.5; }
.exhibit-box h3 { font-size: 20px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.exhibit-box p { margin: 0 0 8px; }
.exhibit-box p:last-child { margin-bottom: 0; }
.figure-big { font-size: 40px; line-height: 1; color: var(--large-teal); }
.grid-record .figure-big { font-size: 56px; font-weight: 700; }
/* Exhibit 0 and Exhibit 6.1 size to their content, at the top of their grid row: they do
   not stretch to the height of the column beside them. */
.hero > .exhibit, .grid-record > .exhibit:first-child { align-self: start; }
.exhibit .signature { font-style: normal; font-size: 16px; margin: 0; }
.exhibit .signature .for { font-style: italic; }

/* Grids of exhibits, and prose beside an exhibit. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.grid-2.aside { gap: 44px; align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.grid-record { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 28px; margin-bottom: 20px; }
.grid-terms { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.terms-aside { padding-top: 24px; }
.prose p { margin: 0 0 14px; }
.landing .answer { font-weight: 700; }
.landing .why { max-width: 760px; margin: 26px auto 0; text-align: center; font-size: 18px; font-style: italic;
                line-height: 1.45; color: var(--link); }
.landing .small-note { font-size: 13px; font-style: italic; color: var(--muted); margin: 14px 0 0; }
.terms-aside .small-note { margin-top: 0; }
.landing .box-label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--link); margin: 0 0 8px; }

/* Tables inside exhibits: 1px hairlines, small letter-spaced column labels. */
.exhibit .table-wrap { width: 100%; max-width: none; left: 0; transform: none; margin: 0; }
table.exhibit-table { width: 100%; border: none; font-size: 14px; line-height: 1.45; }
.exhibit-table th, .exhibit-table td { text-align: left; white-space: normal; padding: 8px 12px 8px 0; border: none; }
.exhibit-table th:last-child, .exhibit-table td:last-child { padding-right: 0; }
.exhibit-table th { font-size: 10px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; color: var(--muted);
                    border-bottom: 1px solid var(--rule-ink); }
.exhibit-table tr + tr td { border-top: 1px solid var(--grid); }
.exhibit-table td.label { width: 150px; font-style: italic; color: var(--link); }
.exhibit-table .tier { font-weight: 700; white-space: nowrap; }
.exhibit-table .price, .exhibit-table .figure { text-align: right; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.exhibit-table.gap td.one { font-style: italic; color: var(--link); }
.exhibit-table.current td:first-child { color: var(--muted); }

/* Exhibit 1.1: the chart and, beside it, the current case and the reference series. */
.current-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 24px; align-items: start; }
.current-grid .wide { width: auto; margin-left: 0; }
.current-grid .chart-card { border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); }
.current-case .reference { margin: 14px 0 0; font-size: 12px; font-style: italic; line-height: 1.45; color: var(--muted); }
.current-case p { margin: 10px 0 0; }

/* The footer: the same ground, under a 2px ink rule. */
.dossier-footer { margin: 0 20px; border-top: 2px solid var(--rule-ink); padding: 20px 0 30px; }
@media (min-width: 1080px) { .dossier-footer { max-width: 1040px; margin: 0 auto; } }

/* Section 1: the Brent chart. */
.chart-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 24px; margin: 0 0 14px; }
.latest { margin: 2px 0 0; }
.latest-value { font-size: 44px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.latest-when { font-size: 17px; color: var(--muted); margin-left: 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills[hidden] { display: none; }
.pills .pill { margin: 0; }
.pill.pill-brent, .pill.pill-brent[aria-pressed="true"] { background: var(--brent); border-color: var(--brent); color: var(--card); cursor: default; }
.pill:disabled:not(.pill-brent) { opacity: 0.5; cursor: not-allowed; }
.chart-card { background: var(--card); border-top: 1.5px solid var(--rule-ink); border-bottom: 1.5px solid var(--rule-ink); }
.chart-card svg { width: 100%; border: none; margin: 0; background: transparent; }
.bc-grid { stroke: var(--grid); stroke-width: 0.75; }
.bc-tick { font-family: var(--rc-serif); font-size: 15px; fill: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.bc-brent { stroke-width: 2.2; }
.bc-brent-dot { fill: var(--brent); }
.bc-fair { fill: none; stroke: var(--text); stroke-width: 1; stroke-dasharray: 5 4; }
.bc-fair-dot { fill: var(--text); }
.chart-empty { color: var(--muted); margin: 0; }
.bc-fan { fill: var(--band); fill-opacity: 0.14; stroke: none; }
.bc-fan-edge { fill: none; stroke: var(--band); stroke-width: 1; stroke-dasharray: 5 4; }
.bc-p50 { fill: none; stroke: var(--band-edge); stroke-width: 2; }
.bc-end { font-family: var(--rc-serif); font-size: 15px; fill: var(--band-edge); font-variant-numeric: lining-nums tabular-nums; }
.bc-issue { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.bc-issue-label { font-family: var(--rc-serif); font-size: 14px; font-style: italic; fill: var(--muted); }
.layer-off { display: none; }
.chart-legend { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.key { display: inline-block; position: relative; width: 24px; vertical-align: middle; margin: 0 8px 0 0; }
.key-brent { border-top: 2.2px solid var(--brent); }
.key-fair { border-top: 1px dashed var(--text); }
.key-fan { height: 10px; border: 1px dashed var(--band); box-sizing: border-box; }
.key-fan::before { content: ""; position: absolute; inset: 0; background: var(--band); opacity: 0.14; }

/* The signature block (rule 2.2, two lines) set apart like a letter closing, on the
   signatory page. As wide as its longer line, at least 380px; each line stays whole on a
   desktop and wraps on a phone. */
.closing {
  width: max-content;
  min-width: min(380px, 100%);
  max-width: 100%;
  margin: 40px 0 0 auto;
  padding-top: 14px;
  border-top: 0.75px solid var(--rule-teal);
  text-align: right;
}
.closing .signature { font-style: normal; font-size: 18px; margin: 0 0 8px; }
.closing .name, .closing .for { white-space: nowrap; }
.closing .for { font-style: italic; }
.closing p { margin: 0 0 8px; }

/* Below 900px the dossier goes to one column; a band keeps its numeral and title on one
   line and puts the takeaway under them. */
@media (max-width: 899px) {
  .hero, .grid-2, .grid-2.aside, .grid-3, .grid-record, .grid-terms, .current-grid { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 28px; padding: 28px 0 36px; }
  .terms-aside { padding-top: 0; }
  .section-band { flex-wrap: wrap; }
  .band-rule { display: none; }
  .landing .band-title, .inner .band-title { white-space: normal; flex: 1 1 0; min-width: 0; }
  .band-takeaway { flex-basis: 100%; padding: 8px 0 10px; }
}
@media (max-width: 720px) {
  .hero h1 { font-size: 32px; }
  .question { font-size: 21px; }
  .landing .band-title, .inner .band-title { font-size: 22px; padding: 0 14px; }
  .exhibit-table td.label { width: 34%; }
  .latest-value { font-size: 36px; }
  .latest-when { display: block; margin: 2px 0 0; font-size: 15px; }
  /* The chart scales with its viewBox to about a third on a phone; its text and strokes
     are set in user units, so they are enlarged here to stay readable. */
  .bc-tick { font-size: 32px; }
  .bc-end { font-size: 25px; }
  .bc-issue-label { font-size: 26px; }
  .bc-brent { stroke-width: 5; }
  .bc-brent-dot { r: 10px; }
  .bc-p50 { stroke-width: 4.5; }
  .bc-fan-edge { stroke-width: 2.5; }
  .bc-fair { stroke-width: 2.5; }
  .bc-fair-dot { r: 7px; }
  .bc-grid { stroke-width: 1.5; }
  /* Terms: tier and price on one line, what is included beneath, full width. */
  .exhibit-table.terms tr { display: grid; grid-template-columns: 1fr auto; }
  .exhibit-table.terms tr + tr { border-top: 1px solid var(--grid); }
  .exhibit-table.terms tr + tr td { border-top: none; }
  .exhibit-table.terms td:nth-child(3) { grid-column: 1 / -1; padding-top: 0; }
  .exhibit-table.terms th:nth-child(3) { display: none; }
  .exhibit-table.terms .price { padding-right: 0; }
  .masthead .issued { font-size: 15px; }
  .closing .name, .closing .for { white-space: normal; }
}

/* Hover values (sitebuild/hover.py). Every chart that carries data-hover: a hairline at
   the hovered month and one box with the date and each series, two decimals, US$ per
   barrel. The page's script only places the box (left, top); all of its look is here. */
.hover-host { position: relative; }
svg[data-hover] { cursor: crosshair; }
svg[data-hover]:focus { outline: none; }
svg[data-hover]:focus-visible { outline: 1.5px solid var(--rule-teal); outline-offset: 2px; }
.hover-line { stroke: var(--rule-ink); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.hover-line.is-off { display: none; }
.hover-box {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px; box-sizing: border-box;
  padding: 8px 12px 9px; background: var(--card); color: var(--text); border: 1px solid var(--rule-ink);
  font-family: var(--rc-serif); font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hover-box[hidden] { display: none; }
.hover-box p { margin: 0; }
.hover-box .hover-date { font-weight: 700; }
.hover-box .hover-unit { color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
                         margin-bottom: 4px; }
.hover-box .hover-row { display: flex; justify-content: space-between; gap: 16px; }
.hover-box .hover-name { color: var(--muted); }
.hover-box .hover-value { color: var(--text); text-align: right; }

/* ── The inner pages in the dossier frame (2026-09-25) ──────────────
   Current case, Record, Calibration, Method, Signatory: the landing's 1040px frame. A page
   band (the word PAGE in the ink block), 36px, exhibits that need the width, then a 640px
   prose column, never centred, with the exhibit column 60px beside it; 48px before the
   footer rule. docs/design/landing_direction_A/mockup_inner_signatory.html. */
body.inner { max-width: none; padding: 0; font-size: 16px; line-height: 1.55; }
.inner .dossier { padding-bottom: 48px; }
.page-band { margin: 40px 0 36px; }
.band-page { flex: none; height: 64px; padding: 0 18px; display: flex; align-items: center;
             background: var(--text); color: var(--bg); font-size: 11px; letter-spacing: 3px; line-height: 1; }
.inner .exhibit-full { margin: 0 0 36px; }
.exhibit[hidden] { display: none; }
.inner-cols { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: 60px; align-items: start; }
.inner-cols.single { grid-template-columns: minmax(0, 640px); }
.inner .prose { max-width: 640px; color: var(--text); }
.inner .prose > :first-child { margin-top: 0; }
.aside-col { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
/* A sub-heading: a small teal label and an ink rule growing to its right. The quoted
   documents' own section titles take the same form. */
.prose-label, .inner .prose h2 {
  display: flex; align-items: center; gap: 14px; margin: 36px 0 14px;
  font-size: 11px; font-weight: 400; line-height: 1.4; letter-spacing: 3px; text-transform: uppercase; color: var(--link);
}
.prose-label::after, .inner .prose h2::after { content: ""; flex: 1 1 24px; height: 1px; background: var(--rule-ink); }
.exhibit-box > .prose-label:first-child { margin-top: 0; }
.inner .prose h3 { font-size: 19px; margin: 24px 0 8px; }
.inner .exhibit-box h3 { font-size: 16px; margin: 0 0 8px; }
.inner .exhibit-box h3 + .empty { margin: 0; }
/* Tables stay inside their column and scroll there; none overhangs into the next. */
.inner .table-wrap { width: auto; min-width: 0; max-width: 100%; left: 0; transform: none; }
.inner .exhibit-box table:not(.exhibit-table) { font-size: 14px; }
.inner .exhibit-table td.label { width: 1%; min-width: 78px; white-space: nowrap; padding-right: 16px; }
.inner .exhibit-table.facts td { vertical-align: top; }
.exhibit .closing { width: auto; min-width: 0; margin: 14px 0 0; padding-top: 8px; border-top: 1px solid var(--rule-ink); }
.exhibit .closing .signature { font-size: 14px; line-height: 1.5; margin: 0; }
.exhibit .closing .name, .exhibit .closing .for { white-space: normal; }
.inner .exhibit-box svg { margin: 8px 0; }
.inner .current-grid .current-case .side-label { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase;
                                                 color: var(--link); margin: 0 0 8px; }
.inner .claim { font-size: 17px; font-style: italic; line-height: 1.45; }
.inner .grid-2 { margin-bottom: 8px; }
.inner .analytics { margin: 0 0 36px; }
@media (max-width: 899px) {
  .inner-cols, .inner-cols.single { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .page-band { margin-top: 28px; }
}
/* A reason column reads left to right; a quoted document's tables fill the prose column,
   left-aligned, and a long code path wraps rather than running out of it. */
.inner .wide td.text { text-align: left; }
.inner .quoted-document table { width: 100%; }
.inner .quoted-document th, .inner .quoted-document td { text-align: left; }
.inner .quoted-document code { overflow-wrap: break-word; }
/* Full-width exhibits between prose columns (method tables): 36px either side. */
.inner-cols + .exhibit-full { margin-top: 36px; }
/* A quoted document's table in an exhibit: left-aligned, the site's table rules; a code
   path never breaks inside a word, and a table too wide for its box scrolls in it. */
.exhibit table.quoted { width: 100%; font-size: 14px; line-height: 1.45; }
.exhibit table.quoted th, .exhibit table.quoted td { text-align: left; }
.exhibit table.quoted code { font-size: 13px; white-space: nowrap; }
/* The case table on a case page: labels as in every fact table. */
.exhibit-table.case-numbers td:first-child { width: 1%; white-space: nowrap; padding-right: 32px; font-style: italic; color: var(--link); }
.exhibit-table.case-numbers td + td { font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 720px) {
  /* On a phone a quoted table keeps a readable width and scrolls sideways in its box. */
  .exhibit table.quoted { min-width: 600px; }
}

/* The footer's link row, centred on every page (2026-09-25); the disclaimer stays left. */
footer .links { text-align: center; }

/* Method page: the document's tables fold (native details, closed); the tab is the summary.
   A plus or a minus after the tab says which way it goes. The prose never folds. */
details.fold > summary { list-style: none; cursor: pointer; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: " +"; }
details.fold[open] > summary::after { content: " \2212"; }
details.fold > summary:focus-visible { outline: 1.5px solid var(--rule-teal); outline-offset: 2px; }
.fold-all { margin: -12px 0 24px; font-size: 14px; }
.fold-all[hidden] { display: none; }

/* K.3 on a case page: a small exhibit under K.2, the width of the exhibit column. */
.inner .exhibit-small { max-width: 340px; margin: 0 0 36px; }

@media print {
  /* Everything open on paper: the script opens every fold before printing; where the
     browser supports it, this does the same without the script. */
  details.fold::details-content { content-visibility: visible; display: block; block-size: auto; }
  details.fold > summary::after, .fold-all { display: none; }
}

/* CONTACT in the masthead nav (2026-09-25): the last item, a mailto, boxed. 11px
   letter-spaced like the nav, a 1px ink border, no fill; the same in the collapsed strip,
   where this rule, later and as specific, wins over the strip's nav type. */
.nav-bar nav { align-items: center; }
.nav-bar nav a.nav-contact {
  font-size: 11px; letter-spacing: 2px; padding: 4px 10px; border: 1px solid var(--rule-ink); background: none;
}
.nav-bar nav a.nav-contact:hover, .nav-bar nav a.nav-contact:focus-visible { color: var(--link); border-color: var(--link); }