/* ==========================================================================
   AntiWP — one stylesheet, no build step.

   Sections: 1 Tokens · 2 Base · 3 Layout · 4 Components · 5 Pages
             6 Responsive · 7 Print

   Section 1 is copied verbatim from the AntiWP design system
   ("design system/tokens/*.css"). Change a token there first, then here.
   Everything below section 1 is a plain-CSS translation of the design
   system's React components — same values, no framework.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

/* --- 1.1 Colour -----------------------------------------------------------
   Three families and one accent. Red is rationed: one red thing per view. */
:root{
  /* base: ink */
  --ink-900:#0D0D0D; --ink-800:#1A1A1A; --ink-700:#2E2C2A; --ink-500:#5C5853;
  --ink-400:#837E77; --ink-300:#A9A29A; --ink-200:#CFC8BE;
  /* base: paper (warm, printed-zine off-white) */
  --paper-000:#FFFFFF; --paper-100:#F7F3EC; --paper-200:#EFE9DE; --paper-300:#E3DBCC;
  /* base: signal red (from the logo prohibition ring) */
  --red-100:#FDE4E7; --red-300:#F58B99; --red-500:#EC2A41; --red-600:#C81C31; --red-800:#7C0F1D;
  /* base: static green (the "done, free, no maintenance" side) */
  --green-100:#DEF0E4; --green-500:#1F7A4D; --green-700:#125635;
  /* base: amber (caution / cost) */
  --amber-100:#FBEBCB; --amber-500:#E0940F; --amber-700:#96610A;

  /* semantic: text */
  --text-heading:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --text-faint:var(--ink-400);
  --text-inverse:var(--paper-100);
  --text-accent:var(--red-600);
  --text-link:var(--red-600);
  --text-link-hover:var(--ink-900);

  /* semantic: surfaces */
  --surface-page:var(--paper-100);
  --surface-card:var(--paper-000);
  --surface-sunken:var(--paper-200);
  --surface-inverse:var(--ink-900);
  --surface-accent:var(--red-500);
  --surface-code:var(--ink-900);

  /* semantic: lines */
  --line-hairline:var(--paper-300);
  --line-rule:var(--ink-200);
  --line-strong:var(--ink-900);
  --line-accent:var(--red-500);

  /* semantic: verdicts (used constantly in comparison content) */
  --verdict-bad-fg:var(--red-600);    --verdict-bad-bg:var(--red-100);
  --verdict-good-fg:var(--green-500); --verdict-good-bg:var(--green-100);
  --verdict-warn-fg:var(--amber-700); --verdict-warn-bg:var(--amber-100);

  --focus-ring:var(--red-500);
  --selection-bg:#FFE24A;
}

/* --- 1.2 Type -------------------------------------------------------------
   Archivo Black display, Archivo body, JetBrains Mono for every label.
   The mono/display contrast is the brand's signature: enormous headline,
   tiny mechanical caption. */
:root{
  --font-display:"Archivo Black","Archivo Black Fallback",Helvetica,sans-serif;
  --font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --text-hero:clamp(44px,7.2vw,104px);
  --text-d1:clamp(36px,4.6vw,64px);
  --text-d2:clamp(28px,3.2vw,44px);
  --text-h1:34px; --text-h2:26px; --text-h3:20px;
  --text-lead:21px; --text-body-size:18px; --text-sm:15px; --text-xs:13px;
  --text-label:12px;

  --lh-tight:0.94; --lh-snug:1.12; --lh-heading:1.18; --lh-body:1.62; --lh-loose:1.75;
  --tracking-hero:-0.035em; --tracking-display:-0.02em; --tracking-body:0em;
  --tracking-label:0.14em;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --measure:66ch; --measure-narrow:52ch;
}

/* --- 1.3 Spacing ----------------------------------------------------------
   4px scale; steps 5–7 (24/32/48) do nearly all the work. */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;
  --gutter:24px;
  --container:1180px;
  --container-prose:720px;
  --section-y:clamp(56px,8vw,112px);
}

/* --- 1.4 Surfaces ---------------------------------------------------------
   Near-square corners. Depth is a hard offset, never a blur. */
:root{
  --radius-0:0px; --radius-1:2px; --radius-2:4px; --radius-pill:999px;

  --border-hair:1px solid var(--line-hairline);
  --border-rule:1px solid var(--line-rule);
  --border-strong:2px solid var(--line-strong);
  --border-slab:3px solid var(--line-strong);

  --shadow-none:none;
  --shadow-block:4px 4px 0 var(--ink-900);
  --shadow-block-sm:2px 2px 0 var(--ink-900);
  --shadow-block-accent:4px 4px 0 var(--red-500);
  --shadow-lift:0 1px 0 var(--line-rule);

  --stripe-caution:repeating-linear-gradient(-45deg,var(--red-100) 0 10px,transparent 10px 20px);
  --grid-paper:linear-gradient(var(--line-hairline) 1px,transparent 1px) 0 0/100% 32px;
}

/* --- 1.5 Motion -----------------------------------------------------------
   Mechanical and short. Nothing bounces. All four durations collapse to 0
   under prefers-reduced-motion. */
:root{
  --dur-instant:80ms; --dur-fast:120ms; --dur-base:180ms; --dur-slow:280ms;
  --ease-out:cubic-bezier(.2,.8,.3,1);
  --ease-standard:cubic-bezier(.4,0,.2,1);
  --press-shift:2px;
}
@media (prefers-reduced-motion:reduce){
  :root{--dur-instant:0ms;--dur-fast:0ms;--dur-base:0ms;--dur-slow:0ms}
  *,*::before,*::after{
    animation-duration:0ms!important;
    transition-duration:0ms!important;
    scroll-behavior:auto!important;
  }
}

/* --------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */

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

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

body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-sans);
  font-size:var(--text-body-size);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--text-heading);
  line-height:var(--lh-heading);
  letter-spacing:var(--tracking-display);
  font-weight:400;
  margin:0;
}
h1{font-size:var(--text-h1)}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3)}

p{margin:0 0 var(--space-4)}

a{
  color:var(--text-link);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--red-300);
  transition:color var(--dur-fast) var(--ease-out),
             text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover{color:var(--text-link-hover);text-decoration-color:var(--ink-900)}

/* Focus is never removed, on anything. */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

code,kbd,pre{font-family:var(--font-mono);font-size:0.9em}
::selection{background:var(--selection-bg);color:var(--ink-900)}
hr{border:0;border-top:var(--border-rule);margin:var(--space-6) 0}
img,svg{max-width:100%}
strong,b{font-weight:var(--weight-semibold)}

/* The mono label. Used wherever another brand would reach for an icon. */
.label{
  font-family:var(--font-mono);
  font-size:var(--text-label);
  letter-spacing:var(--tracking-label);
  text-transform:uppercase;
  color:var(--text-muted);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--ink-900);color:var(--paper-100);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:12px 16px;text-decoration:none;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

/* One 1180px container, 24px gutter. Prose caps at 720px. */
.wrap{
  max-width:var(--container);
  margin:0 auto;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.wrap--prose{max-width:calc(var(--container-prose) + (var(--gutter) * 2))}

.section{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section--sunken{background:var(--surface-sunken)}
.section--ink{background:var(--surface-inverse)}

/* Sections are separated by rules, not by whitespace alone. */
.slab-top{border-top:var(--border-slab)}
.slab-bottom{border-bottom:var(--border-slab)}

.grid{display:grid;gap:var(--space-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.row{display:flex;gap:var(--space-3);flex-wrap:wrap}

/* Section head: display heading left, mono link right, on a 3px slab rule. */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:var(--space-4);flex-wrap:wrap;
  border-bottom:var(--border-slab);
  padding-bottom:var(--space-3);
  margin-bottom:var(--space-6);
}
.section-head h2{font-size:var(--text-d2);letter-spacing:var(--tracking-display)}
.section-head .more{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   4. COMPONENTS
   -------------------------------------------------------------------------- */

/* --- 4.1 Button -----------------------------------------------------------
   Hard border, hard offset shadow, presses down into the page.
   Never two .btn--primary in the same block. */
.btn{
  font-family:var(--font-sans);
  font-weight:var(--weight-bold);
  letter-spacing:0.01em;
  display:inline-flex;align-items:center;gap:var(--space-2);
  border-radius:var(--radius-1);
  cursor:pointer;text-decoration:none;line-height:1;white-space:nowrap;
  font-size:16px;padding:13px 20px;
  border:2px solid var(--ink-900);
  background:transparent;color:var(--ink-900);
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.btn--sm{font-size:14px;padding:9px 14px}
.btn--lg{font-size:18px;padding:17px 28px}
.btn--block{width:100%;justify-content:center}

.btn--primary{background:var(--red-500);color:#fff;box-shadow:var(--shadow-block-sm)}
.btn--solid{background:var(--ink-900);color:var(--paper-100);box-shadow:var(--shadow-block-sm)}
.btn--secondary{background:transparent;color:var(--ink-900);box-shadow:none}
.btn--ghost{
  background:transparent;color:var(--ink-900);
  border-color:transparent;box-shadow:none;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;
}

/* Hover: the button rises. Nothing changes opacity — opacity means disabled. */
.btn--primary:hover{box-shadow:var(--shadow-block);transform:translate(-1px,-1px);color:#fff}
.btn--solid:hover{box-shadow:var(--shadow-block);transform:translate(-1px,-1px);color:var(--paper-100)}
.btn--secondary:hover{background:var(--ink-900);color:var(--paper-100)}
.btn--ghost:hover{color:var(--red-600)}

/* Press: the element lands on the page. No colour change, no scale. */
.btn--primary:active,.btn--solid:active,.btn--secondary:active{
  box-shadow:none;transform:translate(2px,2px);
}
.btn[disabled],.btn[aria-disabled="true"]{opacity:0.4;pointer-events:none}

/* --- 4.2 Tag --------------------------------------------------------------
   Uppercase mono chip. Words instead of icons. */
.tag{
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:4px 8px;border-radius:var(--radius-1);
  display:inline-block;line-height:1.3;text-decoration:none;
  color:var(--ink-700);background:transparent;border:1px solid var(--line-rule);
}
.tag--ink{color:var(--paper-100);background:var(--ink-900);border-color:var(--ink-900)}
.tag--bad{color:var(--verdict-bad-fg);background:var(--verdict-bad-bg);border-color:var(--red-300)}
.tag--good{color:var(--verdict-good-fg);background:var(--verdict-good-bg);border-color:var(--verdict-good-fg)}
.tag--warn{color:var(--verdict-warn-fg);background:var(--verdict-warn-bg);border-color:var(--amber-500)}

/* --- 4.3 Logo lockup ------------------------------------------------------
   The mark is never recoloured beyond the supplied black/white letterform
   swap, never cropped, never rotated, never redrawn. */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.logo img{display:block}
.logo .wordmark{
  font-family:var(--font-display);font-size:30px;
  letter-spacing:-0.03em;line-height:0.9;color:var(--ink-900);
}
.logo .wordmark em{font-style:normal;color:var(--red-500)}
.logo--inverse .wordmark{color:var(--paper-100)}

/* --- 4.4 SiteHeader -------------------------------------------------------
   The one fixed element: sticky, with a 3px ink underline. */
.site-header{
  background:var(--surface-page);
  border-bottom:var(--border-slab);
  position:sticky;top:0;z-index:20;
}
.site-header .wrap{
  display:flex;align-items:center;gap:var(--space-6);
  padding-top:14px;padding-bottom:14px;
}
.site-nav{display:flex;gap:var(--space-5);margin-left:auto;flex-wrap:wrap}
.site-nav a{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  text-decoration:none;color:var(--text-muted);
  border-bottom:2px solid transparent;padding-bottom:2px;
  transition:color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.site-nav a:hover{color:var(--ink-900)}
.site-nav a[aria-current="page"]{color:var(--ink-900);border-bottom-color:var(--red-500)}

/* --- 4.5 SiteFooter -------------------------------------------------------
   Ink footer carrying the standing webdens.com referral line. */
.site-footer{
  background:var(--surface-inverse);
  color:var(--ink-300);
  border-top:var(--border-slab);
}
.site-footer .footer-top{
  display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--space-6);
  padding-top:var(--space-8);padding-bottom:var(--space-6);
}
.site-footer .footer-note{
  font-size:var(--text-sm);line-height:1.6;color:var(--ink-300);
  max-width:34ch;margin:0;
}
.site-footer .footer-brand .logo{margin-bottom:var(--space-3)}
.site-footer h2{
  font-family:var(--font-mono);font-size:var(--text-label);font-weight:400;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  color:var(--ink-400);margin:0 0 var(--space-3);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.site-footer ul a{
  color:var(--paper-200);font-size:var(--text-sm);text-decoration:none;
  border-bottom:1px solid var(--ink-700);
  transition:border-color var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out);
}
.site-footer ul a:hover{color:var(--paper-000);border-bottom-color:var(--red-500)}
.site-footer .footer-bottom{
  padding-top:var(--space-4);padding-bottom:var(--space-7);
  border-top:1px solid var(--ink-700);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--ink-400);
  display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;
}
.site-footer .footer-bottom a{color:var(--red-300);text-decoration-color:var(--red-800)}
.site-footer .footer-bottom a:hover{color:var(--paper-100);text-decoration-color:var(--paper-100)}

/* --- 4.6 ArticleCard ------------------------------------------------------
   White on paper, 2px ink border, hard offset. Lifts on hover.
   A featured card differs only in type size and padding — never in colour. */
.card{
  /* Column flex so the meta rule sits on the baseline of the card rather than
     wherever the title happens to end — cards in a row line up. */
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--surface-card);
  border:2px solid var(--ink-900);
  border-radius:var(--radius-1);
  padding:var(--space-5);
  box-shadow:var(--shadow-block-sm);
  transition:transform var(--dur-base) var(--ease-out),
             box-shadow var(--dur-base) var(--ease-out);
}
.card:hover{box-shadow:var(--shadow-block);transform:translate(-2px,-2px)}
.card:active{box-shadow:none;transform:translate(2px,2px)}
.card .card-kicker{margin-bottom:var(--space-3)}
.card h3{
  font-family:var(--font-display);color:var(--ink-900);
  font-size:var(--text-h3);line-height:var(--lh-heading);
  letter-spacing:var(--tracking-display);margin:0;
}
.card p{
  color:var(--text-body);font-size:var(--text-sm);line-height:var(--lh-body);
  margin:var(--space-3) 0 0;max-width:var(--measure);
}
/* The last thing above the meta rule carries the gap, since margin-top on the
   meta itself is spent pushing it to the bottom. */
.card > :nth-last-child(2){margin-bottom:var(--space-4)}
.card .card-meta{
  margin-top:auto;padding-top:var(--space-3);
  border-top:1px solid var(--line-hairline);
  display:flex;gap:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--text-faint);text-transform:uppercase;letter-spacing:0.08em;
}
.card--featured{padding:var(--space-6)}
.card--featured h3{font-size:var(--text-d2);line-height:var(--lh-snug)}
.card--featured p{font-size:var(--text-lead)}

/* --- 4.7 Callout ----------------------------------------------------------
   The in-article verdict box. `warn` carries the mandatory caveat.
   The glyph badge is the one place --radius-pill is allowed. */
.callout{
  border:2px solid var(--ink-900);
  border-radius:var(--radius-1);
  padding:var(--space-5);
  display:flex;gap:var(--space-4);align-items:flex-start;
  background:var(--paper-200);
}
.callout .callout-mark{
  font-family:var(--font-display);font-size:20px;line-height:1;
  border:2px solid currentColor;border-radius:var(--radius-pill);
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;color:var(--ink-900);
}
.callout .callout-body{min-width:0}
.callout .callout-body > :last-child{margin-bottom:0}
.callout .callout-title{
  font-family:var(--font-display);font-size:var(--text-h3);
  color:var(--ink-900);letter-spacing:var(--tracking-display);
  line-height:var(--lh-heading);margin:0 0 var(--space-2);
}
.callout p{font-size:var(--text-sm);line-height:var(--lh-body);color:var(--ink-700)}
.callout--bad{background:var(--verdict-bad-bg);border-color:var(--red-500)}
.callout--bad .callout-mark{color:var(--verdict-bad-fg);border-color:var(--red-500)}
.callout--good{background:var(--verdict-good-bg);border-color:var(--verdict-good-fg)}
.callout--good .callout-mark{color:var(--verdict-good-fg);border-color:var(--verdict-good-fg)}
.callout--warn{background:var(--verdict-warn-bg);border-color:var(--amber-500)}
.callout--warn .callout-mark{color:var(--verdict-warn-fg);border-color:var(--amber-500)}

/* --- 4.8 PullQuote --------------------------------------------------------
   Display type between two slab rules. Under fifteen words. */
.pullquote{
  margin:var(--space-7) 0;
  border-top:var(--border-slab);border-bottom:var(--border-slab);
  padding:var(--space-5) 0;
}
.pullquote blockquote{
  margin:0;font-family:var(--font-display);font-size:var(--text-d2);
  line-height:var(--lh-snug);letter-spacing:var(--tracking-display);color:var(--ink-900);
}
.pullquote figcaption{
  margin-top:var(--space-3);
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);
}
.pullquote--narrow{max-width:var(--measure-narrow)}

/* --- 4.9 CodeBlock --------------------------------------------------------
   Ink panel, filename bar, copy button. Short enough to read without
   scrolling — brevity is the argument. */
.code{margin:var(--space-5) 0}
.code .code-frame{border:2px solid var(--ink-900);border-radius:var(--radius-1);overflow:hidden}
.code .code-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  background:var(--ink-900);padding:8px 12px;
}
.code .code-name{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.08em;color:var(--ink-300);
}
.code .code-copy{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.1em;text-transform:uppercase;
  background:transparent;color:var(--ink-300);
  border:1px solid currentColor;border-radius:var(--radius-1);
  padding:3px 8px;cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out);
}
.code .code-copy:hover{color:var(--paper-100)}
.code .code-copy[data-copied="true"]{color:var(--red-300)}
.code pre{
  margin:0;background:var(--surface-code);color:#EDE7DC;
  padding:var(--space-5);overflow-x:auto;
  font-family:var(--font-mono);font-size:14px;line-height:1.7;
}
.code pre code{font-size:inherit}
.code figcaption{
  margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
}

/* --- 4.10 VersusTable -----------------------------------------------------
   The site's core rhetorical module. Red column is the platform, ink column
   is plain HTML. Left cells state the cost plainly; right cells stay flat. */
.versus{margin:var(--space-6) 0}
.versus table{
  width:100%;border-collapse:collapse;
  border:2px solid var(--ink-900);
  background:var(--surface-card);
  table-layout:fixed;
}
.versus th{
  font-family:var(--font-display);font-size:var(--text-xs);font-weight:400;
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:10px 16px;text-align:left;
}
.versus .vs-corner{background:var(--paper-200);color:var(--ink-700);width:26%}
.versus .vs-left{background:var(--red-500);color:#fff}
.versus .vs-right{background:var(--ink-900);color:var(--paper-100)}
.versus td{
  padding:14px 16px;border-top:1px solid var(--line-hairline);
  font-size:var(--text-sm);vertical-align:top;line-height:1.5;
}
.versus td.vs-label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.06em;text-transform:uppercase;
  color:var(--text-muted);background:var(--paper-100);
}
.versus td.vs-bad{color:var(--verdict-bad-fg)}
.versus td.vs-good{color:var(--ink-900);font-weight:var(--weight-semibold)}
.versus figcaption{
  margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);
}

/* --- 4.11 StatBlock -------------------------------------------------------
   One large sourced number under a heavy rule.
   A StatBlock without a footnote is a bug. */
.stat{border-top:var(--border-slab);padding-top:var(--space-3)}
.stat .stat-value{
  font-family:var(--font-display);font-size:var(--text-d1);
  line-height:var(--lh-tight);letter-spacing:var(--tracking-hero);color:var(--ink-900);
}
.stat .stat-label{
  margin-top:var(--space-2);font-size:var(--text-sm);
  color:var(--ink-700);line-height:1.4;max-width:30ch;
}
.stat .stat-footnote{
  margin-top:var(--space-2);
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint);
}
.stat--bad .stat-value{color:var(--red-500)}
.stat--good .stat-value{color:var(--verdict-good-fg)}

/* --- 4.12 SignupBar -------------------------------------------------------
   Also the site's proof that a static page can take an email address.
   The mono footnote is the argument, not fine print. */
.signup{
  background:var(--paper-200);
  border:var(--border-slab);
  border-radius:var(--radius-1);
  padding:var(--space-6);
}
.signup h2{
  font-family:var(--font-display);font-size:var(--text-d2);
  line-height:var(--lh-snug);letter-spacing:var(--tracking-display);
  color:var(--ink-900);margin:0;
}
.signup .signup-blurb{
  margin:var(--space-3) 0 var(--space-5);
  font-size:var(--text-sm);color:var(--ink-700);max-width:52ch;
}
.signup form{display:flex;gap:var(--space-3);flex-wrap:wrap;margin:0}
.signup input[type="email"]{
  flex:1 1 260px;min-width:0;
  font-family:var(--font-mono);font-size:15px;
  padding:13px 14px;border-radius:var(--radius-1);
  border:2px solid var(--ink-900);
  background:var(--paper-000);color:var(--ink-900);
}
.signup input[type="email"]::placeholder{color:var(--ink-400)}
.signup .signup-note{
  margin:var(--space-3) 0 0;
  font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-faint);
}
.signup--inverse{background:var(--surface-inverse)}
.signup--inverse h2{color:var(--paper-100)}
.signup--inverse .signup-blurb{color:var(--ink-300)}
.signup--inverse .signup-note{color:var(--ink-400)}
.signup--inverse input[type="email"]{background:var(--ink-800);color:var(--paper-100)}
.signup--inverse input[type="email"]::placeholder{color:var(--ink-500)}

/* --------------------------------------------------------------------------
   5. PAGES
   -------------------------------------------------------------------------- */

/* --- 5.1 Hero -------------------------------------------------------------
   1.55/1 split. The mark is the only graphic element. */
.hero{background:var(--surface-page);border-bottom:var(--border-slab)}
.hero .wrap{
  padding-top:var(--space-8);padding-bottom:var(--space-8);
  /* The design system calls for a 1.55/1 split, but the mark is a fixed 260px
     and sits at the end of its column, so the nominal 1fr left ~400px of dead
     air and squeezed the headline into a 649px measure. Sizing the mark column
     to the mark gives the type the room the ratio was trying to describe. */
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-8);
  align-items:end;
}
.hero h1{
  font-family:var(--font-display);
  /* --text-hero tops out at 104px, which assumes a wider measure than any
     column on this page gives it: at 104px the headline sets two words to a
     line and pushes the lead and both buttons below the fold on a 1080p
     screen. Capped so the claim, the explanation and the thing to click are
     visible together — the explanation is what stops the claim reading as a
     judgement. */
  font-size:clamp(40px,5.2vw,68px);
  line-height:var(--lh-tight);letter-spacing:var(--tracking-hero);
  margin:0;color:var(--ink-900);
  /* Balanced rather than hard-broken: across the viewport range no fixed set
     of line breaks survives, and an orphaned word in display type is the
     loudest possible mistake. */
  text-wrap:balance;
}
.hero h1 em{font-style:normal;color:var(--red-500)}
.hero .hero-kicker{margin-bottom:var(--space-5)}
.hero .hero-lead{
  font-size:var(--text-lead);line-height:1.55;color:var(--text-body);
  max-width:52ch;margin:var(--space-5) 0 var(--space-6);
}
.hero .hero-mark{justify-self:end;display:block}

/* Narrower hero variant, used by /about — 1.4/1, vertically centred. */
.hero--about .wrap{grid-template-columns:1.4fr 1fr;align-items:center}
.hero--about h1{
  font-size:var(--text-d1);line-height:var(--lh-snug);
  letter-spacing:var(--tracking-display);
}
.hero--about .hero-lead{max-width:54ch;margin-bottom:0}

/* --- 5.2 Stat band --------------------------------------------------------
   Full-bleed ink block. Red marks the cost, paper marks the remedy. */
.statband{background:var(--surface-inverse);border-bottom:var(--border-slab)}
.statband .wrap{
  padding-top:var(--space-8);padding-bottom:var(--space-8);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);
}
.statband .stat{border-top-color:var(--paper-100)}
.statband .stat .stat-value{color:var(--paper-100)}
.statband .stat--bad .stat-value{color:var(--red-500)}
.statband .stat--good .stat-value{color:var(--paper-100)}
.statband .stat .stat-label{color:var(--paper-200)}
.statband .stat .stat-footnote{color:var(--ink-400)}

/* Standing note on where the figures come from. Spans the whole band. */
.statband .statband-note{
  grid-column:1 / -1;
  margin:var(--space-2) 0 0;
  font-family:var(--font-mono);font-size:var(--text-xs);
  line-height:1.5;color:var(--ink-400);
}
.statband .statband-note a{color:var(--red-300);text-decoration-color:var(--red-800)}
.statband .statband-note a:hover{color:var(--paper-100);text-decoration-color:var(--paper-100)}

/* --- 5.3 The argument (home) ---------------------------------------------- */
.argument .wrap{
  display:grid;grid-template-columns:1fr 1.15fr;gap:var(--space-8);align-items:start;
}
.argument h2{
  font-size:var(--text-d1);line-height:var(--lh-snug);
  letter-spacing:var(--tracking-display);margin:0 0 var(--space-4);
}
.argument p{max-width:46ch;font-size:var(--text-body-size);line-height:var(--lh-body)}
.argument .callout{margin-top:var(--space-5)}
.argument .versus{margin:0}

/* --- 5.4 Page head (archive) ---------------------------------------------- */
.page-head{border-bottom:var(--border-slab)}
.page-head .wrap{padding-top:var(--space-8);padding-bottom:var(--space-5)}
.page-head h1{font-size:var(--text-d1);letter-spacing:var(--tracking-display);margin:0}
.page-head .page-lead{
  font-size:var(--text-lead);line-height:1.55;color:var(--text-body);
  max-width:56ch;margin:var(--space-4) 0 var(--space-5);
}

/* --- 5.5 Topic filter (archive) -------------------------------------------
   Degrades honestly: with JavaScript off the buttons are hidden and every
   post stays visible. */
.filters{display:flex;gap:var(--space-2);flex-wrap:wrap}
.filters button{
  cursor:pointer;
  border:2px solid var(--line-rule);background:transparent;color:var(--ink-700);
  font-family:var(--font-mono);font-size:var(--text-label);
  letter-spacing:var(--tracking-label);text-transform:uppercase;
  padding:6px 10px;border-radius:var(--radius-1);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out);
}
.filters button:hover{border-color:var(--ink-900);color:var(--ink-900)}
.filters button[aria-pressed="true"]{
  background:var(--ink-900);border-color:var(--ink-900);color:var(--paper-100);
}
.empty-state{
  margin-top:var(--space-5);
  font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);
  border:2px dashed var(--line-rule);padding:var(--space-7);text-align:center;
}
.post-grid{margin-top:var(--space-5)}

/* --- 5.6 Article ---------------------------------------------------------- */
.article-head{border-bottom:var(--border-slab)}
.article-head .wrap{padding-top:var(--space-8);padding-bottom:var(--space-6)}
.article-head .article-tags{
  display:flex;gap:var(--space-2);margin-bottom:var(--space-4);flex-wrap:wrap;
}
.article-head h1{
  font-size:var(--text-d1);line-height:var(--lh-snug);
  letter-spacing:var(--tracking-display);margin:0;
}
.article-head .article-lead{
  font-size:var(--text-lead);line-height:1.55;color:var(--text-body);
  margin:var(--space-4) 0 var(--space-5);
}
.article-meta{
  display:flex;gap:var(--space-3);flex-wrap:wrap;
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:0.08em;text-transform:uppercase;color:var(--text-faint);
  border-top:1px solid var(--line-hairline);padding-top:var(--space-3);
}

.article-body{padding-top:var(--space-7);padding-bottom:var(--space-9)}
.article-body > p{font-size:var(--text-body-size);line-height:var(--lh-body)}
.article-body h2{
  font-family:var(--font-display);font-size:var(--text-h1);
  letter-spacing:var(--tracking-display);margin:var(--space-7) 0 var(--space-3);
}
.article-body h3{margin:var(--space-6) 0 var(--space-3)}
.article-body ul,.article-body ol{
  font-size:var(--text-body-size);line-height:var(--lh-body);
  margin:0 0 var(--space-4);padding-left:var(--space-5);
}
.article-body li{margin-bottom:var(--space-2)}
.article-body li::marker{color:var(--red-500)}
.article-body .callout{margin:var(--space-6) 0}
.article-body .signup{margin-top:var(--space-8)}
.article-body > :first-child{margin-top:0}

/* Inline code inside prose. */
.article-body p code,.article-body li code,.article-body td code{
  background:var(--paper-200);border:1px solid var(--line-hairline);
  border-radius:var(--radius-1);padding:1px 5px;font-size:0.86em;
}

/* A 3-up row of sourced numbers set into prose or an about page. */
.stat-row{margin:var(--space-7) 0}

/* The row of buttons that closes a section. */
.actions{margin-top:var(--space-7)}

/* The "keep reading" rail under an article. */
.related .label{margin-bottom:var(--space-4)}

/* --- 5.7 The offer rail ---------------------------------------------------
   What is available, at the foot of every post. Three options with a
   destination each, stated rather than pitched — the brand is only credible
   because it also tells you when not to listen to it. Reuses .card so the
   three line up with each other and with the "keep reading" rail below. */
.offer .label{margin-bottom:var(--space-3)}
.offer .offer-lead{
  font-size:var(--text-body-size);line-height:var(--lh-body);
  color:var(--text-body);max-width:60ch;margin:0 0 var(--space-6);
}
.offer .card p{font-size:var(--text-sm)}
.offer .card .card-meta{
  color:var(--text-link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-transform:none;letter-spacing:0.02em;
}
.offer .card:hover .card-meta{color:var(--ink-900)}

/* --------------------------------------------------------------------------
   6. RESPONSIVE
   The design system specifies desktop composition only. These breakpoints
   restack it without introducing a new colour, weight, radius or shadow.
   -------------------------------------------------------------------------- */

@media (max-width:900px){
  .hero .wrap,.hero--about .wrap{
    grid-template-columns:1fr;align-items:start;gap:var(--space-6);
  }
  .hero .hero-mark{justify-self:start;width:180px;height:180px;order:-1}
  .statband .wrap{grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
  .argument .wrap{grid-template-columns:1fr;gap:var(--space-6)}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  /* The three offers are parallel options, not a list: a 2 + 1 wrap reads as
     the third one being an afterthought, so they stack together instead. */
  .offer .grid--3{grid-template-columns:1fr}
  .site-footer .footer-top{grid-template-columns:1fr 1fr;gap:var(--space-5)}
  .site-footer .footer-brand{grid-column:1 / -1}
}

@media (max-width:780px){
  /* The masthead becomes two rows: lockup + CTA, then the nav strip.
     No JavaScript and no disclosure menu — the nav is only ever four words. */
  .site-header .wrap{flex-wrap:wrap;gap:var(--space-3);padding-top:12px;padding-bottom:0}
  .site-header .logo{margin-right:auto}
  .site-nav{
    order:3;width:100%;margin-left:0;
    border-top:1px solid var(--line-hairline);
    padding-top:10px;padding-bottom:10px;
    gap:var(--space-4);
  }
  .logo .wordmark{font-size:24px}
  .site-header .logo img{width:36px;height:36px}

  /* Two rows means the masthead costs about 100px, and on a phone that is a
     poor trade for a three-item nav the footer repeats in full. It stops
     being sticky here and gives the screen back to the reading column. */
  .site-header{position:static}

  /* Tap targets. The mono type stays 13px — it is the brand's signature — so
     the boxes around it grow instead. Primary navigation gets the full 44px;
     the footer and "more" links are secondary and get a comfortable 28px plus
     extra separation, which is what the spacing exemption is for. */
  .site-nav a{
    display:inline-flex;align-items:center;
    min-height:44px;padding-bottom:0;
  }
  .site-nav{padding-top:0;padding-bottom:0}
  .section-head .more{display:inline-block;padding:6px 0}
  .site-footer ul{gap:14px}
  .site-footer ul a{display:inline-block;padding-bottom:5px}
  .site-header .btn--sm{min-height:44px}
  .site-header .logo{min-height:44px}
  .filters button{min-height:44px}
  /* Copying a snippet by hand is hardest on a phone, so the button gets
     bigger there rather than smaller. */
  .code .code-copy{min-height:44px;padding-left:12px;padding-right:12px}
}

@media (max-width:640px){
  :root{--gutter:18px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .site-footer .footer-top{grid-template-columns:1fr}
  .signup{padding:var(--space-5)}
  .signup form{flex-direction:column;align-items:stretch}
  /* The input's flex-basis is 260px, which is a width in a row and would
     become a 260px-tall input once the form stacks. Reset it here. */
  .signup input[type="email"]{flex:0 0 auto;width:100%}
  .signup .btn{justify-content:center}
  .article-body h2{font-size:var(--text-h2)}

  /* The versus table restacks into one block per row rather than scrolling
     sideways — it is the argument, so it has to stay readable at 360px.
     Column headings come from each cell's data-col attribute. */
  .versus table,.versus tbody,.versus tr,.versus td{display:block;width:auto}
  .versus thead{display:none}
  .versus table{table-layout:auto}
  .versus tr{border-top:2px solid var(--ink-900)}
  .versus tr:first-child{border-top:0}
  .versus td{border-top:0;padding:10px 16px}
  .versus td.vs-label{
    background:var(--paper-200);
    border-bottom:1px solid var(--line-hairline);
    padding-top:12px;padding-bottom:12px;
  }
  .versus td[data-col]::before{
    content:attr(data-col);
    display:block;
    font-family:var(--font-mono);font-size:11px;
    letter-spacing:0.12em;text-transform:uppercase;
    color:var(--text-faint);margin-bottom:3px;
  }
  .versus td.vs-good{padding-bottom:14px}
}

@media (max-width:480px){
  /* Buttons are nowrap everywhere else, which is right for a row of them but
     forces a horizontal scrollbar once the label is longer than the screen.
     Below this width they go full width and are allowed to wrap. */
  .row > .btn{
    width:100%;justify-content:center;text-align:center;
    white-space:normal;line-height:1.25;
  }
  .btn--lg{font-size:17px;padding:15px 20px}
  /* The mark leads the stacked hero, so at phone widths it is the thing
     standing between the reader and the headline. Still the sole graphic
     element, just not most of the fold. */
  .hero .hero-mark{width:132px;height:132px}
}

@media (max-width:420px){
  .site-nav{gap:var(--space-3)}
  .site-nav a::after{inset:-12px -4px}
}

/* --------------------------------------------------------------------------
   7. PRINT
   The brand is printed matter. It should survive being printed.
   -------------------------------------------------------------------------- */

@media print{
  .site-header,.site-footer,.signup,.code-copy,.filters,.skip-link,.related{
    display:none!important;
  }
  body{background:#fff;color:#000;font-size:11pt}
  .card,.callout,.versus table{box-shadow:none!important;transform:none!important}
  a{text-decoration:underline;color:#000}
  .article-body a[href^="http"]::after{
    content:" (" attr(href) ")";font-size:9pt;word-break:break-all;
  }
  .hero,.page-head,.article-head{border-bottom:2px solid #000}
}