/* Layout: a light instrument panel. A cool grey field ruled into hairline cells; huge light serif statements with
   one red phrase each; mono labels in caps; every image is a red diagram of real numbers from the fairness ledger.
   One visual world by choice: always light, so every colour is set explicitly. */
:root {
  --field: #ECEEEF;       /* the big off-white ground */
  --band: #E1E0E5;        /* a second ground for alternate bands */
  --cell: #F4F5F6;        /* the one raised surface: the ledger */
  --ink: #1E1D1D;
  --muted: #5B5A5C;
  --hair: #C8C8CE;
  --red: #C8101E;         /* vivid signal red */
  --red-deep: #A50D19;    /* red for small text on the light field */
  --brand: "Oxanium", "Eurostile", "Arial Narrow", system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: "Geist", "Helvetica Neue", Arial, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --s-hero: clamp(2.5rem, 6.4vw, 5.9rem);
  --s-stmt: clamp(2.3rem, 5vw, 4.2rem);
  /* the texture: faint paper grain over a ledger dot grid, one dot every 24px */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .11 0 0 0 0 .11 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --dotgrid: radial-gradient(circle at 1px 1px, rgba(30, 29, 29, .13) 1px, transparent 1.4px);
}
* { box-sizing: border-box; }
html { background: var(--field); }
body, .statement { background-image: var(--grain), var(--dotgrid); background-size: 240px 240px, 24px 24px; }
body { margin: 0; background-color: var(--field); color: var(--ink); font: 400 1rem/1.55 var(--sans);
  padding-inline: clamp(16px, 2.2vw, 32px); padding-block: 0 40px; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.mono { font-family: var(--mono); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; }
.red { color: var(--red); }

/* header */
.top { display: flex; align-items: center; gap: 28px; padding-block: 18px; border-bottom: 1px solid var(--hair); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--red); text-decoration: none; }
.brand svg { width: 40px; height: 40px; flex: none; }
.word { font: 800 1.6rem/1 var(--brand); letter-spacing: .035em; -webkit-text-stroke: .025em currentColor; }
.word small { display: inline-block; font-weight: 800; font-size: .72em; line-height: 1; letter-spacing: 0; margin-left: .18em; padding: .16em 1px .14em; color: var(--field); background: var(--red); border-radius: 0; vertical-align: .14em; -webkit-text-stroke: 0; }
.top nav { display: flex; gap: 26px; margin-left: auto; }
.top nav a { text-decoration: none; color: var(--ink); }
.top nav a:hover { color: var(--red); }
.cta { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink); }
.cta::after { content: ""; width: 9px; height: 9px; background: var(--red); }

/* hero: the statement on the left, the instrument card on the right, bottoms aligned */
.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(24px, 4vw, 56px);
  align-items: end; padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--hair); }
.hero .eyebrow { color: var(--red-deep); margin-bottom: 18px; }
.hero h1 { font: 300 clamp(2.7rem, 5.4vw, 5.3rem)/1.0 var(--serif); letter-spacing: -.022em; margin: 0; text-wrap: balance; }
.hero .lede { margin: 22px 0 0; max-width: 44ch; font-size: 1.04rem; font-weight: 500; }
.hero .go { display: flex; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.hero .go a { text-decoration: none; border-bottom: 1px solid var(--ink); padding-bottom: 3px; }
.hero .go a:hover { color: var(--red); border-color: var(--red); }
.spec { background: var(--cell); border: 1px solid var(--hair); }
.spec-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hair); color: var(--muted); }
.spec-head b { color: var(--red-deep); font-weight: 500; }
.spec svg { display: block; width: 100%; height: auto; padding: 16px 14px 8px; }
.spec-key { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 0 14px 14px; color: var(--muted); }
.spec-cite { margin: 0; padding: 0 14px 12px; color: var(--muted); font-size: .68rem; }
.spec-key i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.spec dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); border-top: 1px solid var(--hair); }
.spec dt, .spec dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--hair); }
.spec dt { color: var(--muted); }
.spec dd { text-align: right; font: 400 1.02rem/1.3 var(--serif); font-variant-numeric: tabular-nums; }
.spec dl > :nth-last-child(-n+2) { border-bottom: 0; }

/* ledger */
.ledger { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 56px);
  padding-block: clamp(40px, 6vw, 72px); }
.ledger h2 { font: 300 var(--s-stmt)/1.05 var(--serif); letter-spacing: -.015em; margin: 14px 0 18px; text-wrap: balance; }
.ledger .lead { max-width: 40ch; margin: 0 0 22px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { font: 500 .74rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
  background: transparent; border: 1px solid var(--hair); padding: 10px 12px; cursor: pointer; }
.tabs button:hover { border-color: var(--red); color: var(--red-deep); }
.tabs button[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: #fff; }
.note { margin: 18px 0 0; max-width: 44ch; color: var(--muted); min-height: 4.6em; }
.panel { background: var(--cell); border: 1px solid var(--hair); padding: clamp(14px, 2vw, 22px); }
.panel #dots { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); margin-top: 12px; }
.readout div { padding: 12px 12px 0; border-left: 1px solid var(--hair); }
.readout div:first-child { border-left: 0; padding-left: 0; }
.readout .mono { color: var(--muted); }
.readout b { display: block; font: 300 1.7rem/1.1 var(--serif); margin-top: 6px; font-variant-numeric: tabular-nums; }
.legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; color: var(--muted); }
.legend .gl svg { width: 15px; height: 15px; color: var(--red); vertical-align: -3px; margin-right: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: -1px; }
.legend .f { background: var(--red); }
.legend .h { border: 1.5px solid var(--ink); opacity: .55; }

/* statement band */
.statement { background: var(--band); margin-inline: calc(-1 * clamp(16px, 2.2vw, 32px)); padding: clamp(36px, 6vw, 72px) clamp(16px, 2.2vw, 32px); }
.statement-in { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 20px; align-items: baseline; }
.statement p { font: 300 var(--s-stmt)/1.1 var(--serif); letter-spacing: -.015em; margin: 0; text-wrap: balance; }

/* standards grid */
.grid { display: grid; grid-template-columns: minmax(0, 12rem) repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); }
.grid > div { border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); padding: 14px 16px 20px; }
.grid > .side { border-left: 0; padding-left: 0; }
.std svg { display: block; width: 100%; max-width: 150px; height: auto; aspect-ratio: 4 / 3; margin: 12px 0 14px; }
.std h3 { font: 300 1.45rem/1.15 var(--serif); margin: 0 0 6px; }
.std p { margin: 0; font-size: .88rem; color: var(--muted); }

/* heat map */
.heat { padding-block: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.heat h2 { font: 300 var(--s-stmt)/1.05 var(--serif); letter-spacing: -.015em; margin: 14px 0 16px; text-wrap: balance; }
.hm-wrap { overflow-x: auto; }
.hm { display: grid; grid-template-columns: 8.5rem repeat(4, minmax(56px, 1fr)); gap: 4px; min-width: 420px; }
.hm .h { font: 500 .7rem/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); align-self: end; padding-bottom: 4px; }
.hm .r { font: 500 .78rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .05em; align-self: center; }
.hm .t { aspect-ratio: 5 / 3; display: grid; place-items: center; font: 500 .8rem/1 var(--mono); font-variant-numeric: tabular-nums; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.step { padding: 16px 18px 24px; border-left: 1px solid var(--hair); }
.step:first-child { border-left: 0; padding-left: 0; }
.step .mono { color: var(--muted); display: flex; gap: 18px; }
.step h3 { font: 300 1.7rem/1.15 var(--serif); margin: 26px 0 10px; }
.step p { margin: 0; font-size: .92rem; color: var(--muted); }

.grpo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding-block: clamp(36px, 5vw, 64px); align-items: center; }
.grpo p { max-width: 50ch; margin: 0 0 12px; }
.grpo svg { width: 100%; height: auto; display: block; }

.checks { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 20px; padding-block: clamp(36px, 5vw, 64px); border-top: 1px solid var(--hair); }
.checks ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; counter-reset: c; }
.checks li { counter-increment: c; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 1.05rem; }
.checks li::before { content: counter(c, decimal-leading-zero); font: 500 .76rem/1.9 var(--mono); color: var(--red-deep); }
.checks li:first-child { padding-top: 0; }

.safety { display: grid; grid-template-columns: minmax(0, 12rem) repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.safety .good li::before { background: var(--red); border-radius: 50%; }
.safety .good h3 { color: var(--red-deep); }
.safety > div { padding: 16px 18px 28px; border-left: 1px solid var(--hair); }
.safety > div:first-child { border-left: 0; padding-left: 0; }
.safety h3 { font: 300 1.7rem/1.15 var(--serif); margin: 0 0 14px; }
.safety ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.safety li { padding-left: 18px; position: relative; }
.safety li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; background: var(--red); }
.safety .fail li::before { background: transparent; border: 1.5px solid var(--red); }

/* quotes */
.quotes.obama { --blue: #1F4A8A; background: #E1E5EC; margin-inline: calc(-1 * clamp(16px, 2.2vw, 32px));
  padding-inline: clamp(16px, 2.2vw, 32px); border-top: 0; }
.quotes.obama .red { color: var(--blue); }
.quotes.obama > .mono:first-child { color: var(--blue); }
.quotes.obama figure { border-left-color: #C3CAD6; }
.quotes.obama .qnote a { color: var(--blue); }
.quotes .qnote { grid-column: 2 / -1; margin: 22px 0 0; color: var(--muted); }
.quotes .qnote a { color: var(--red-deep); }
.quotes { display: grid; grid-template-columns: minmax(0, 12rem) repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair);
  padding-block: clamp(28px, 4vw, 48px); gap: 0; }
.quotes figure { margin: 0; padding: 0 20px; border-left: 1px solid var(--hair); display: flex; flex-direction: column; gap: 14px; }
.quotes blockquote { margin: 0; font: 300 clamp(1.3rem, 1.9vw, 1.65rem)/1.25 var(--serif); letter-spacing: -.01em; }
.quotes .tr { margin: 0; color: var(--muted); font-size: .95rem; }
.quotes figcaption { color: var(--muted); margin-top: auto; padding-top: 6px; }
@media (max-width: 980px) { .quotes .qnote { grid-column: 1; } .quotes { grid-template-columns: minmax(0, 1fr); gap: 28px; } .quotes figure { border-left: 0; padding: 0; } }

/* pages */
[data-nav][aria-current="page"] { color: var(--red); }
.phead { padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--hair); }
.phead .eyebrow { color: var(--red-deep); margin-bottom: 18px; }
.phead h1 { font: 300 clamp(2.9rem, 5.9vw, 5.65rem)/1.0 var(--serif); letter-spacing: -.022em; margin: 0; max-width: 20ch; text-wrap: balance; }
.phead .lede { margin: 22px 0 0; max-width: 52ch; font-size: 1.04rem; font-weight: 500; }
.specgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--hair); }
.specgrid > div { padding: 16px 16px 20px; border-left: 1px solid var(--hair); border-top: 1px solid var(--hair); }
.specgrid > div:nth-child(4n+1) { border-left: 0; padding-left: 0; }
.specgrid > div:nth-child(-n+4) { border-top: 0; }
.specgrid .mono { color: var(--muted); }
.specgrid b { display: block; font: 300 1.9rem/1.1 var(--serif); margin: 10px 0 6px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.specgrid span { display: block; font-size: .85rem; color: var(--muted); line-height: 1.35; }
.figure { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center;
  padding-block: clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--hair); }
.figure h2 { font: 300 clamp(2.05rem, 3.6vw, 3.1rem)/1.08 var(--serif); letter-spacing: -.015em; margin: 12px 0 16px; text-wrap: balance; }
.figure p { max-width: 52ch; margin: 0 0 12px; }
.figure svg { width: 100%; height: auto; display: block; }
.mem { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mem th, .mem td { padding: 10px 0; border-bottom: 1px solid var(--hair); text-align: left; font-weight: 400; }
.mem th { font: 400 .78rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mem td { text-align: right; font: 300 1.3rem/1.2 var(--serif); }
.mem .tot th, .mem .tot td { color: var(--red-deep); border-bottom: 0; }
.answer { background: var(--cell); border: 1px solid var(--hair); padding: 18px 20px; }
.answer .mono { color: var(--muted); }
.answer ol { margin: 12px 0 0; padding-left: 1.2rem; display: grid; gap: 10px; }
.answer b { font-weight: 600; }
.page[data-page="training"] .steps { margin-top: 0; border-top: 0; }
.page[data-page="training"] .checks { border-top: 0; border-bottom: 1px solid var(--hair); }

footer { border-top: 1px solid var(--hair); margin-top: 24px; padding-top: 18px; display: flex; flex-wrap: wrap; gap: 10px 32px; justify-content: space-between; color: var(--muted); }

@media (max-width: 980px) {
  .figure { grid-template-columns: minmax(0, 1fr); }
  .specgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specgrid > div:nth-child(n) { border-left: 1px solid var(--hair); padding-left: 16px; border-top: 1px solid var(--hair); }
  .specgrid > div:nth-child(2n+1) { border-left: 0; padding-left: 0; }
  .specgrid > div:nth-child(-n+2) { border-top: 0; }
  .ledger, .heat, .grpo { grid-template-columns: minmax(0, 1fr); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid > .side { grid-column: 1 / -1; padding-bottom: 8px; }
  .grid > .side + div, .grid > .side ~ .side + div { border-left: 0; padding-left: 0; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 640px) {
  .top { grid-template-columns: 1fr auto; }
  .top nav { display: none; }
  .top .cta { margin-left: auto; }
  .steps, .grid { grid-template-columns: minmax(0, 1fr); }
  .step, .grid > div { border-left: 0; padding-left: 0; }
  .statement-in, .checks, .safety { grid-template-columns: minmax(0, 1fr); }
  .safety > div { border-left: 0; padding-left: 0; }
  .readout { grid-template-columns: minmax(0, 1fr); }
  .readout div { border-left: 0; padding-left: 0; }
}