/* ==========================================================================
   Assay, single stylesheet.
   Colours, fonts and the reading measure are all in the block below and
   nowhere else. Contrast ratios are measured, not guessed, and every one of
   them clears WCAG AA for its size. Orange is the hardest accent to get past
   AA on a light ground: the obvious burnt orange #C2410C lands at 4.32:1 and
   fails, so the accent here is darker than it first looks on a swatch.
   ========================================================================== */

:root {
  --paper:      #EDEAE6;   /* warm grey. Grey based, so it never goes sepia.   */
  --paper-sunk: #E4E0DA;   /* code blocks, the only filled surface on the site */
  --ink:        #1A1512;   /* prose, a warm near black.     15.10:1 on paper   */
  --ink-muted:  #5E544C;   /* dates, labels, captions.       6.15:1 on paper   */
  --signal:     #AB3B08;   /* what the machine reported.     5.21:1 on paper,  */
                           /*                                4.75:1 on sunk    */
  --signal-lit: #D9541A;   /* brighter orange, NON-TEXT ONLY: the reading rule */
                           /* and nothing else. 3.28:1, which clears the 3:1   */
                           /* bar for a UI element but would fail for text.    */
  --rule:       #D5CFC7;   /* hairlines                                        */
  --rule-firm:  #B6AEA4;   /* the rule above the verdict block                 */

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --measure: 34rem;
  --gutter:  clamp(1.25rem, 5vw, 2.5rem);
  --band:    clamp(3rem, 7vw, 5.5rem);
}

/* ---- Fonts, served from this site, nothing fetched from anywhere --------- */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-roman.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

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

/* Nothing fakes a weight or a slant that is not actually shipped. */
* { font-synthesis: none; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
  line-height: 1.62;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
}

/* A reading rule that fills as the page scrolls. Pure CSS, so there is no
   script on this site at all. Browsers without scroll-driven animation simply
   never see it, which costs the reader nothing. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed; inset: 0 auto auto 0;
    height: 2px; width: 100%;
    background: var(--signal-lit);
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: progress linear both;
    animation-timeline: scroll();
    z-index: 10;
  }
  @keyframes progress { to { transform: scaleX(1); } }
}

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

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

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 0.6rem 1rem; font-family: var(--mono); font-size: 0.8rem;
}
.skip:focus { left: var(--gutter); top: 0.5rem; z-index: 20; }

/* ---- Masthead ----------------------------------------------------------- */
/* One column definition, shared by every band on the page, so the wordmark,
   the headline, the articles and the footer all sit on the same left edge. */
.masthead, .lede, .entries, .piece, .back, .foot {
  max-width: calc(44rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.masthead {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
}
.wordmark {
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--signal); text-decoration: none;
}
.wordmark:hover { color: var(--ink); }
.blurb {
  margin: 0; font-size: 0.9375rem; color: var(--ink-muted);
  max-width: 30rem; line-height: 1.45;
}

main { margin: 0; padding: 0; }


/* ---- Index -------------------------------------------------------------- */
.lede {
  /* Breaks are left to the browser. A forced one stranded a single word on its
     own line as soon as the column width changed. */
  margin-block: var(--band) calc(var(--band) * 0.85);
  text-wrap: balance;
  font-weight: 300;
  font-size: clamp(2.25rem, 1.2rem + 5vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.021em;
}

.entries { border-top: 0; }

.entry {
  padding: clamp(2rem, 4vw, 3rem) 0;
  border-top: 1px solid var(--rule);
}
.entry h2 {
  font-weight: 400;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
  line-height: 1.16; letter-spacing: -0.014em;
  margin: 0.4rem 0 0.65rem; text-wrap: balance;
}
.entry h2 a { color: var(--ink); text-decoration: none; }
.entry h2 a:hover { color: var(--signal); }

.meta {
  margin: 0; font-family: var(--mono);
  font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--ink-muted); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.dot { padding: 0 0.35rem; }

.standfirst {
  margin: 0 0 1.25rem; max-width: var(--measure);
  color: var(--ink-muted); line-height: 1.55;
}

/* ---- The verdict block, which is the whole idea of this publication -------
   What the machine said, then what was actually true. The reported line burns
   orange, the colour of a warning nobody acted on, and the truth sits under it
   in plain ink. */
.verdict {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.3rem 1.25rem;
  align-items: baseline;
  max-width: var(--measure);
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule-firm);
}
.verdict p { margin: 0; display: contents; }
.verdict-label {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-muted);
}
.verdict-reported .verdict-text {
  font-family: var(--mono); font-size: 0.875rem; line-height: 1.5;
  color: var(--signal);
}
.verdict-true .verdict-text {
  font-size: 1.0625rem; line-height: 1.45; color: var(--ink);
}

/* ---- Article ------------------------------------------------------------ */
.piece-head { padding: var(--band) 0 0; }
.piece-head h1 {
  font-weight: 350;
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.25rem);
  line-height: 1.07; letter-spacing: -0.019em;
  margin: 0.5rem 0 0.8rem; text-wrap: balance;
}

.prose { max-width: var(--measure); padding: clamp(2rem, 4vw, 3rem) 0 0; }
.prose > * { margin: 0 0 1.15em; }
.prose h2 {
  font-weight: 500; font-size: 1.375rem; line-height: 1.25;
  letter-spacing: -0.008em; margin: 2.4em 0 0.7em;
}
.prose h3 { font-weight: 500; font-size: 1.125rem; margin: 2em 0 0.6em; }
.prose ul { padding-left: 1.15rem; }
.prose li { margin-bottom: 0.4em; }
.prose hr {
  border: 0; border-top: 1px solid var(--rule);
  margin: 2.6em 0; max-width: 8rem;
}
.prose code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--paper-sunk); padding: 0.1em 0.32em; border-radius: 2px;
}

figure.code {
  margin: 1.6em 0;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
}
/* Keyboard users must be able to scroll a wide code block, so it is focusable
   and announces what it is. */
figure.code pre:focus-visible { outline-offset: -2px; }
figure.code pre {
  margin: 0; padding: 1rem 1.1rem; overflow-x: auto;
  font-family: var(--mono); font-size: 0.8125rem; line-height: 1.6;
}
figure.code code { background: none; padding: 0; font-size: inherit; }
.code-lang {
  display: block;
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-muted);
  padding: 0.45rem 1.1rem 0;
}

.prose table {
  width: 100%; border-collapse: collapse;
  font-size: 0.9375rem; margin: 1.8em 0;
}
.prose th, .prose td {
  text-align: left; padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.prose th {
  font-family: var(--mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-muted); border-bottom-color: var(--rule-firm);
}

.tags { max-width: var(--measure); margin: 2.5rem 0 0; }
.tag {
  font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
  padding-right: 0.9rem;
}

.back { padding-top: var(--band); }
.back a { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ---- Footer ------------------------------------------------------------- */
.foot {
  margin-top: var(--band);
  padding-block: 1.75rem 3rem;
  font-family: var(--mono); font-size: 0.75rem; line-height: 1.7;
  color: var(--ink-muted);
}
.foot::before {
  content: ""; display: block;
  border-top: 1px solid var(--rule);
  margin-bottom: 1.75rem;
}
.foot p { margin: 0 0 0.4rem; }
.colophon { max-width: 38rem; }

::selection { background: var(--signal); color: var(--paper); }

/* The reported and true lines differ by typeface, size and colour, so the pair
   still reads as a pair when colour is unavailable. WCAG 1.4.1. */
@media (prefers-contrast: more) {
  :root { --ink-muted: #3E362F; --rule: #B6AEA4; --signal: #7E2B06; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  body::before, .skip, .back { display: none; }
  body { background: #fff; color: #000; }
}