/* Vindicate Partners
   ------------------------------------------------------------------
   Two self-hosted variable faces, served from this origin. No CDN, no
   third-party request of any kind — which is what keeps the contact
   page's "nothing external loads" line true and checkable from source.
   The system stack stays as the fallback, so a missing file degrades
   instead of breaking.

   Every contrast ratio below was computed, both modes, against all
   three grounds.
*/

/* ==================================================================
   1. Faces
   ================================================================== */

@font-face {
  font-family: "Source Serif 4 Var";
  src: url("/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4 Var";
  src: url("/fonts/source-serif-4-latin-wght-italic.woff2") format("woff2-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter Var";
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ==================================================================
   2. Tokens
   ================================================================== */

:root {
  color-scheme: light dark;

  /* grounds — the paper/surface step is deliberately wide enough to
     see. The previous pair sat ~3% apart and cards were invisible. */
  --paper:      #fcfaf6;
  --surface:    #f4efe4;
  --surface-2:  #ebe4d5;

  /* ink                        vs paper   surface   surface-2 */
  --ink:        #1c1a17;   /*    16.65     15.14      13.72    */
  --ink-2:      #403d38;   /*    10.37      9.43       8.54    */
  --muted:      #5f5c54;   /*     6.40      5.82       5.27    */

  /* brass, two steps. The ornament step is rules and marks only —
     it lands at 4.36 / 3.95 on the filled surfaces and must never
     carry running copy. */
  --accent:     #65491a;   /*     7.99      7.26       6.58    */
  --accent-orn: #8b6a2f;   /*     4.80      4.36       3.95    */

  --border:     #ded6c6;   /* card edge, meant to be seen */
  --hairline:   #e7e0d1;   /* row divider */

  --shadow:     0 1px 2px rgba(70, 52, 20, .05),
                0 6px 16px -6px rgba(70, 52, 20, .09);
  --shadow-lift:0 1px 2px rgba(70, 52, 20, .06),
                0 10px 24px -8px rgba(70, 52, 20, .13);

  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;
  --s-4: 1rem;     --s-5: 1.5rem;   --s-6: 2rem;
  --s-7: 3rem;     --s-8: 4.5rem;   --s-9: 6rem;

  /* The reading measure is fixed by legibility (~70 characters at the
     body size) and cannot move. The FRAME therefore has to stay close
     to it, or prose renders as a thin ribbon beside full-width cards —
     which is exactly how 66em read on a wide monitor. Two cards at a
     comfortable width plus the gap is what sets this number. */
  --measure:      36em;
  --measure-wide: 42em;
  --frame:        48em;
  --radius:       5px;

  --serif: "Source Serif 4 Var", Charter, "Bitstream Charter",
           "Sitka Text", Cambria, Georgia, serif;
  --sans:  "Inter Var", -apple-system, BlinkMacSystemFont, "Segoe UI",
           Roboto, "Noto Sans", "Liberation Sans", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #14141a;
    --surface:    #1e1e26;
    --surface-2:  #262630;
    --ink:        #e9e7e2;   /* 14.84  13.39  12.12 */
    --ink-2:      #c2beb6;   /*  9.90   8.93   8.08 */
    --muted:      #9b978e;   /*  6.30   5.68   5.14 */
    --accent:     #d3ae6e;   /*  8.78   7.92   7.17 */
    --accent-orn: #a8843c;   /*  5.27   4.75   4.30 */
    --border:     #35343f;
    --hairline:   #2c2b35;
    /* Shadows do not read on a dark ground. The border carries the
       edge instead, so these drop to almost nothing. */
    --shadow:      0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 10px -2px rgba(0, 0, 0, .45);
  }
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.62;
  font-size-adjust: ex-height 0.475;
  font-variant-numeric: lining-nums proportional-nums;
  font-synthesis-small-caps: none;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

@media (max-width: 46em) { body { font-size: 1.0625rem; } }

/* ==================================================================
   3. Layout
   ================================================================== */

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

main { min-height: 50vh; }

/* Running prose sits at the reading measure. Cards, grids and rows
   use the full frame — that width contrast is what gives the page
   structure rather than one undifferentiated column. */
main > .wrap > p,
main h2, main h3, main h4,
.sec > p,
main ul:not(.plain), main ol:not(.steps):not(.toc) {
  max-width: var(--measure);
}

.card p, .card h3, .card ul, .card ol,
.case-body p, .terms p, .facts dd {
  max-width: none;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.skip:focus { left: var(--s-4); top: var(--s-4); }

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

/* ==================================================================
   4. Type
   ================================================================== */

h1 {
  font-size: clamp(2.375rem, 1.6rem + 3.3vw, 3.375rem);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0 0 var(--s-4);
  max-width: 15em;
  text-wrap: balance;
}

h2 {
  font-size: 1.9375rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.011em;
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

h3 {
  font-size: 1.25rem;
  line-height: 1.32;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: var(--s-6) 0 var(--s-2);
}

@media (max-width: 46em) {
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.125rem; }
}

.lede {
  font-size: 1.4375rem;
  line-height: 1.44;
  color: var(--ink-2);
  max-width: 30em;
  margin: 0 0 var(--s-6);
  text-wrap: pretty;
}
@media (max-width: 46em) { .lede { font-size: 1.1875rem; } }

/* The opening block. Two columns on a wide screen so the intro fills the
   same width as the card grid below it — a narrow column of prose above
   full-width cards left the top of the page looking unfinished. */
.intro { margin: 0 0 var(--s-7); }
.intro .lede { margin-bottom: var(--s-5); }
.intro-note { color: var(--ink-2); max-width: 32em; }

@media (min-width: 62em) {
  .intro {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--s-4) var(--s-8);
    align-items: start;
  }
  .intro .lede { margin-bottom: 0; max-width: none; }
  .intro-note { max-width: none; padding-top: 0.35em; }
}

p { margin: 0 0 var(--s-4); }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }

strong { font-weight: 650; }

ul, ol { padding-left: 1.15rem; margin: 0 0 var(--s-4); }
li { margin-bottom: var(--s-2); }

.small { font-size: 0.9375rem; line-height: 1.58; }
.muted { color: var(--muted); }

.next { margin-top: var(--s-6); font-family: var(--sans); font-size: 0.9375rem; }
.next a { color: var(--accent); font-weight: 500; }

/* The single micro-label, defined once. It replaced eight
   near-identical uppercase rules (brand-line, figure unit, fact term,
   case axis, verdict, doc meta, contact term, h4) that had drifted
   apart in size, tracking and colour, which was a large part of why
   every register on the page looked the same. Components opt in by
   selector rather than by class so the definition stays in one place. */
.label,
.facts dt,
.axis,
.verdict,
.doc-meta,
.cite .source {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: lining-nums tabular-nums;
}
.label--accent,
.facts dt { color: var(--accent); }

/* ==================================================================
   5. Masthead
   ================================================================== */

.site-header {
  padding: var(--s-5) 0 0;
  margin-bottom: var(--s-7);
  border-top: 3px solid var(--accent-orn);
}

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2) var(--s-5);
}

.brand {
  font-size: 1.4375rem;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-family: var(--sans);
  font-size: 0.9375rem;
  padding-bottom: 2px;
}
.site-nav a { color: var(--muted); text-decoration: none;
              padding-bottom: 3px; border-bottom: 2px solid transparent; }
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--border); }
.site-nav [aria-current="page"] {
  color: var(--ink); font-weight: 500;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 3px; cursor: default;
}

.site-header .rule {
  border: 0; border-top: 1px solid var(--border);
  margin: var(--s-4) 0 0;
}

@media (max-width: 46em) {
  .masthead { display: block; }
  .site-nav { margin-top: var(--s-4); gap: var(--s-2) var(--s-4); }
}

/* ==================================================================
   6. Sections
   ================================================================== */

/* No section numbering. Numbering every heading on every page is the
   signposted-structure tell, and it made six unrelated pages read as
   one generated document. */
.sec {
  border-top: 1px solid var(--accent-orn);
  padding-top: var(--s-5);
  margin-top: var(--s-8);
}

.sec--plain { border-top-color: var(--border); }

/* ==================================================================
   7. Cards — the primary device
   ================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5);
  box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card > h3:first-child,
.card > .label:first-child { margin-top: 0; }
.card h3 { margin: var(--s-2) 0 var(--s-3); font-size: 1.1875rem; }
.card .label + h3 { margin-top: var(--s-2); }

.card--feature {
  background: var(--surface-2);
  border-color: var(--accent-orn);
  box-shadow: var(--shadow-lift);
}

.card--wide { grid-column: 1 / -1; }

/* A card standing alone in the flow, rather than inside a grid or a .sec,
   had nothing under it and prose butted straight against its bottom edge. */
main > .wrap > .card { margin-bottom: var(--s-6); }

/* Two columns, stated rather than derived. auto-fit resolved to three
   at wide viewports, which left a phantom empty column beside the
   top row and read as a layout that had lost a card. */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: var(--s-6) 0;
  max-width: none;
}
@media (min-width: 46em) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 46em) {
  .card { padding: var(--s-6); }
}

/* 7.1 headline figure */
.figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: var(--s-2) 0 var(--s-3);
}
.figure .amount {
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
}
@media (max-width: 46em) { .figure .amount { font-size: 2.375rem; } }

/* ==================================================================
   8. Components
   ================================================================== */

/* 8.1 fact rows */
.facts { margin: var(--s-5) 0 var(--s-6); max-width: var(--measure-wide); }
.facts > div {
  display: grid;
  gap: var(--s-1) var(--s-5);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-4) 0;
}
.facts > div:first-child { border-top: 1px solid var(--hairline); }
.facts dt { color: var(--accent); }
.facts dd {
  margin: 0;
  color: var(--ink);
  /* Load-bearing. Measured: Sitka — what a Windows visitor gets if the
     webfont fails — defaults to proportional digits with a 17.8%
     spread, Georgia 18.4%; tnum fixes it. Figure columns must also
     stay at a SINGLE WEIGHT: digit widths drift with weight in every
     face here (Cambria +7.0%, Sitka +5.1% regular to bold) and no CSS
     corrects that. */
  font-variant-numeric: lining-nums tabular-nums;
}
@media (min-width: 46em) {
  .facts > div { grid-template-columns: 13rem 1fr; }
  .facts dt { padding-top: 0.3em; }
}

/* 8.2 take / decline pairs — the decline page. The minimal-pair
   structure does the arguing with no explanation attached; restyled
   but not restructured. */
.cases { max-width: var(--measure-wide); margin: var(--s-5) 0 var(--s-6); }

.pair {
  margin-bottom: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.axis {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  margin: 0;
  padding: var(--s-3) var(--s-5);
  max-width: none;
}

.case { display: grid; gap: var(--s-1) var(--s-5); padding: var(--s-4) var(--s-5);
        background: var(--surface); }
.case + .case { border-top: 1px solid var(--border); }
.case--decline { box-shadow: inset 3px 0 0 var(--accent-orn); }

.verdict { margin: 0; max-width: none; }
.case--decline .verdict { color: var(--accent); }

.case-body > :last-child { margin-bottom: 0; }
.quote  { font-style: italic; margin: 0 0 var(--s-2); }
.record { color: var(--muted); margin: 0 0 var(--s-2); font-size: 1.0625rem; }
.why    { color: var(--ink-2); font-size: 1rem; margin: 0; }

@media (min-width: 46em) {
  .case { grid-template-columns: 8rem 1fr; align-items: start; }
  .verdict { padding-top: 0.25em; }
}

/* 8.3 process steps */
.steps { list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-6);
         counter-reset: step; max-width: var(--measure-wide); }
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 var(--s-4);
  border-top: 1px solid var(--hairline);
  padding: var(--s-5) 0;
  margin: 0;
}
.steps > li:last-child { border-bottom: 1px solid var(--hairline); }
/* Numerals, no circles. The circle is the category tell rather than the
   number itself, and these steps are genuinely sequential.

   Placement is explicit and load-bearing. With three grid items (the
   counter, the h3 and the p) against two columns, auto-placement put the
   counter and heading on row 1 and then dropped the PARAGRAPH into row 2
   column 1 — the 2.5rem numeral column — so the body text rendered about
   four characters per line down a thin strip. Pin the counter, push every
   real child to column 2. */
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 0.55em;
  font-variant-numeric: lining-nums tabular-nums;
}
.steps > li > * { grid-column: 2; }
.steps h3 { margin: 0 0 var(--s-2); }
.steps p  { margin: 0; max-width: none; }

/* 8.4 citation */
.cite {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-orn);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
  max-width: var(--measure-wide);
}
.cite p { margin: 0 0 var(--s-2); max-width: none; }
.cite p:last-child { margin-bottom: 0; }
.cite .source { letter-spacing: 0.06em; }
/* A full academic citation is too long to set in caps and stops being
   readable at about a line and a half. Same family and size, sentence
   case, so it still reads as apparatus rather than as running prose. */
.cite .source--long {
  /* Serif, because these carry <em> journal titles and no italic Inter face is
     self-hosted — the sans stack rendered them as synthetic oblique. */
  font-family: var(--serif);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.5;
}

/* 8.5 FAQ index */
.toc {
  list-style: none; padding: 0; margin: var(--s-5) 0 var(--s-8);
  max-width: var(--measure-wide);
}
.toc li {
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-3) 0;
  margin: 0;
  font-size: 1.0625rem;
}
.toc li:first-child { border-top: 1px solid var(--hairline); }
/* These are the only in-page navigation on the site. Without an underline they
   are indistinguishable from body text for keyboard and touch users. */
.toc a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* 8.6 contact */
.contact-block {
  display: inline-flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0 var(--s-6);
  box-shadow: var(--shadow);
}
.contact-block .addr {
  font-size: 1.3125rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* 8.7 terms — bounded as a document panel. At 17px on a 34em measure
   this ran as a thin ribbon down the left of an otherwise empty page.
   The container makes the surrounding space deliberate and marks where
   the contract language starts and stops. */
.terms {
  font-size: 1rem;
  line-height: 1.68;
  max-width: 40em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-5) var(--s-6);
  box-shadow: var(--shadow);
}
.terms > :first-child { margin-top: 0; }
.terms > :last-child { margin-bottom: 0; }
.terms h3 { margin: var(--s-6) 0 var(--s-2); font-size: 1.125rem; }
.terms p { margin: 0 0 var(--s-4); }

.legal-conspicuous {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.65;
  background: var(--surface-2);
  border: 1px solid var(--accent-orn);
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-5);
  margin: var(--s-5) 0;
}

.doc-meta {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-3) 0;
  margin: 0 0 var(--s-5);
  letter-spacing: 0.07em;
  max-width: var(--measure-wide);
}

/* ==================================================================
   9. Footer
   ================================================================== */

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
  margin-top: var(--s-9);
  padding: var(--s-6) 0 var(--s-7);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--muted);
}
.site-footer p { margin: 0 0 var(--s-3); max-width: var(--measure-wide); }
.site-footer p:last-child { margin-bottom: 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }

/* ==================================================================
   10. Print
   ================================================================== */

@media print {
  :root {
    --paper:#fff; --surface:#fff; --surface-2:#fff; --ink:#000; --ink-2:#222;
    --muted:#444; --border:#999; --hairline:#ccc;
    --accent:#000; --accent-orn:#000;
    --shadow:none; --shadow-lift:none;
  }
  .site-nav, .skip { display: none; }
  .site-header { border-top-width: 1px; }
  .site-footer { background: none; }
  body { font-size: 11pt; }
  a { text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .pair, .card, .legal-conspicuous, .steps > li { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}