/* Home page only: hero, stat plates, case grid, caveat box, round-trip strip. */

.hero{padding-block:clamp(48px,7vw,86px) clamp(36px,4.5vw,56px);border-bottom:1px solid var(--rule)}
.hero h1{margin-top:16px;max-width:15ch}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero .lede{margin-top:22px;max-width:62ch}
.hero .go{margin-top:30px;display:flex;gap:10px;flex-wrap:wrap}

.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;margin-top:38px;background:var(--rule);border:1px solid var(--rule)}
.plate{background:var(--surface);padding:24px 22px 22px}
.plate .n{font-family:var(--f-display);font-weight:800;font-size:clamp(1.7rem,3.4vw,2.35rem);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.plate .n small{font-size:.44em;font-weight:600;letter-spacing:.01em;margin-left:.25em;color:var(--ink-2)}
.plate .l{margin-top:10px;font-size:.95rem;line-height:1.4;color:var(--ink-2)}
.plate .s{margin-top:9px;font-family:var(--f-display);font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}

/* the long view — compact historical arc */
/* Eight turns: two clean rows of four rather than a ragged auto-fit row. */
.arc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:6px}
@media (max-width:900px){ .arc{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .arc{grid-template-columns:1fr} }
.arc div{background:var(--surface);padding:22px 20px;display:flex;flex-direction:column;gap:7px}
.arc div.turn{background:var(--surface-2)}
.arc .y{font-family:var(--f-display);font-size:.78rem;font-weight:600;letter-spacing:.08em;color:var(--copper);font-variant-numeric:tabular-nums}
.arc .t{font-family:var(--f-display);font-weight:700;font-size:1.02rem;line-height:1.2;letter-spacing:-.01em}
.arc .d{font-size:.9rem;line-height:1.4;color:var(--ink-2)}

/* Six cards: two rows of three. */
.case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .case-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .case-grid{grid-template-columns:1fr} }
/* The six evidence cards. They sit inside a charcoal band, and they are light
   grey panels with dark type in both themes on purpose — the section is the
   dark ground, the cards are the paper laid on it.
   Rather than restyle each part, the card resets the colour tokens to a fixed
   light set and everything inside follows: the figure, the title, the body, the
   source links and their hover. The greys are chosen so the smallest text in
   the card, the .77rem source links on --ink-3, still clears 4.5:1. */
.stat{
  --surface:#E6EAF1;
  --rule:#C3CCDB;
  --rule-strong:#9EAABE;
  --ink:#121A2B;
  --ink-2:#3B4860;
  --ink-3:#5C6A81;
  --copper:#8E1223;
  --patina:#1B4FA0;
  color-scheme:light;
  color:var(--ink);
  background:var(--surface);border:1px solid var(--rule);padding:24px 22px;display:flex;flex-direction:column;gap:9px}
.stat .n{font-family:var(--f-display);font-weight:800;font-size:2.05rem;line-height:1;letter-spacing:-.03em;color:var(--copper);font-variant-numeric:tabular-nums}
.stat .t{font-family:var(--f-display);font-weight:600;font-size:1.02rem;line-height:1.3}
.stat .d{font-size:.96rem;color:var(--ink-2);line-height:1.45}
.stat .src{margin-top:auto;padding-top:4px}
.src a{font-family:var(--f-display);font-size:.77rem;font-weight:500;letter-spacing:.01em;color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--rule-strong)}
.src a:hover{color:var(--copper);border-color:var(--copper)}

.caveat{background:var(--surface-2);border-left:3px solid var(--steel);padding:26px 26px 24px}
.caveat h3{font-size:1.05rem;margin-top:8px}
.caveat ul{margin:14px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:13px}
.caveat li{font-size:.94rem;line-height:1.5;color:var(--ink-2)}
.caveat li b{color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:.97rem;display:block;margin-bottom:2px}