/* fonts */
/* Webfonts. Noe Display and Brown are the real licensed faces, self-hosted below.
   IBM Plex Mono (apparatus) is a Google Font. There is no condensed face in this system. */

/* Licensed originals, supplied by the client: Noe Display (Schick Toikka), Brown (Lineto). */
@font-face{font-family:'Noe Display';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/NoeDisplay-Regular.ttf') format('truetype')}
@font-face{font-family:'Noe Display';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/NoeDisplay-RegularItalic.ttf') format('truetype')}
@font-face{font-family:'Noe Display';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/NoeDisplay-Medium.ttf') format('truetype')}
@font-face{font-family:'Noe Display';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/NoeDisplay-Bold.ttf') format('truetype')}
@font-face{font-family:'Noe Display';font-style:normal;font-weight:900;font-display:swap;src:url('assets/fonts/NoeDisplay-Black.ttf') format('truetype')}
@font-face{font-family:'Brown';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/Brown-Regular.otf') format('opentype')}
@font-face{font-family:'Brown';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/Brown-Bold.otf') format('opentype')}

@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400-italic-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:italic;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/IBMPlexMono-400-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexMono-500-normal-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/IBMPlexMono-500-normal-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* colors */
/* COLOR — derived from the printed interior of "Bang for the Buck" (2017).
   Every value here was sampled out of the book PDF, not invented. */
:root{
  /* --- Paper & ink (base) --- */
  --paper:#FAF4EF;           /* warm press sheet, the default ground */
  --paper-2:#FCF9F5;         /* one step lighter, for panels on paper */
  --paper-white:#FFFFFF;      /* true white — screens, image mats */
  --ink:#2C2E35;             /* body text, near-black with a cool cast */
  --ink-2:#5A5C66;           /* secondary text, captions */
  --ink-3:#8E9099;           /* tertiary, metadata, disabled */
  --ink-rule:#DED6CE;        /* hairline on paper */
  --ink-black:#000000;       /* full-bleed black slides */

  /* --- Oxblood: the hero accent --- */
  --oxblood:#8F2931;
  --oxblood-deep:#51101A;
  --oxblood-mid:#922D35;
  --oxblood-tint:#F0A39B;
  --oxblood-wash:#FADBD5;

  /* --- Rust: second voice, statement grounds --- */
  --rust:#D07A28;
  --rust-deep:#CA7828;
  --rust-wash:#F2C391;

  /* --- Forest: data, diagrams, the "academic" register --- */
  --forest:#0E4739;
  --forest-deep:#0E2E25;
  --forest-mid:#2C6658;
  --forest-wash:#CFEDDB;

  /* --- Blush: quiet tinted grounds --- */
  --blush:#F4B8AF;
  --blush-wash:#F9D4CD;

  /* --- Signal: sparingly, for the one thing that must be read --- */
  --signal:#FF5856;
  --signal-hot:#E52C1A;

  /* --- Legacy (agency 2024 deck). Kept for continuity, not for new work. --- */
  --legacy-blue:#1B72B2;
  --legacy-navy:#002C45;
  --legacy-teal:#00B9AE;
  --legacy-teal-deep:#037171;

  /* ================= SEMANTIC ALIASES ================= */
  --surface-page:var(--paper);
  --surface-card:var(--paper-2);
  --surface-sunken:var(--oxblood-wash);
  --surface-inverse:var(--ink-black);
  --surface-statement:var(--rust);
  --surface-data:var(--forest-wash);

  --text-body:var(--ink);
  --text-muted:var(--ink-2);
  --text-meta:var(--ink-3);
  --text-display:var(--ink);
  --text-accent:var(--oxblood);
  --text-on-inverse:var(--paper);
  --text-on-accent:var(--paper);
  --text-link:var(--oxblood);
  --text-link-hover:var(--oxblood-deep);

  --border-hairline:var(--ink-rule);
  --border-strong:var(--ink);
  --border-accent:var(--oxblood);

  --accent:var(--oxblood);
  --accent-secondary:var(--rust);
  --accent-data:var(--forest);
}

/* Inverse scope: black slides, dark sections. Set data-theme="inverse". */
[data-theme="inverse"]{
  --surface-page:var(--ink-black);
  --surface-card:#101012;
  --text-body:var(--paper);
  --text-muted:#A8A49F;
  --text-meta:#6E6A65;
  --text-display:var(--paper);
  --text-accent:var(--oxblood-tint);
  --text-link:var(--oxblood-tint);
  --text-link-hover:var(--paper);
  --border-hairline:#2E2E31;
  --border-strong:var(--paper);
}

/* typography */
/* TYPE — three voices. Noe Display and Brown are the book's real licensed faces;
   IBM Plex Mono carries the apparatus. No condensed face: Knockout was dropped and
   Archivo Narrow removed 2026-09-15. Headings split between Noe (editorial) and
   Brown (structural) — see readme.md > VISUAL FOUNDATIONS > Typography. */
:root{
  /* --- Families --- */
  --font-display:'Noe Display',"Times New Roman",Georgia,serif;   /* licensed original */
  --font-sans:'Brown',system-ui,-apple-system,sans-serif;         /* licensed original */
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;             /* apparatus: figures, notes, citations */
  --font-label:var(--font-sans);   /* all-caps labels, eyebrows, running heads, buttons, statement pages */

  /* --- Display scale. Editorial: big jumps, tight leading. --- */
  --size-display-1:clamp(56px,9vw,148px);
  --size-display-2:clamp(44px,6.5vw,104px);
  --size-display-3:clamp(34px,4.4vw,72px);
  --size-display-4:clamp(28px,3vw,48px);
  --size-head-1:34px;
  --size-head-2:26px;
  --size-head-3:20px;

  /* --- Text scale --- */
  --size-lead:21px;      /* stand-first, intros */
  --size-body:17px;
  --size-body-sm:15px;
  --size-caption:13px;
  --size-micro:11px;     /* running heads, folio, figure numbers */

  /* --- Leading --- */
  --leading-display:0.92;
  --leading-display-loose:1.04;
  --leading-head:1.14;
  --leading-lead:1.42;
  --leading-body:1.58;
  --leading-tight:1.28;

  /* --- Tracking --- */
  --track-display:-0.022em;   /* Noe at size wants negative */
  --track-head:-0.012em;
  --track-body:0; /* @kind other */
  --track-caps:0.09em;        /* Brown all-caps labels — Brown is wider than a condensed face */
  --track-caps-wide:0.16em;   /* eyebrows, running heads */
  --track-caps-statement:0.02em; /* Brown 700 caps at statement size */
  --track-mono:0.02em;

  /* --- Weights (variable axes) --- */
  --weight-display:500;
  --weight-display-black:900;
  --weight-body:400;
  --weight-medium:500;
  --weight-bold:700;

  /* --- Measure --- */
  --measure-prose:62ch;
  --measure-column:34ch;   /* the book set two narrow columns */
  --measure-lead:46ch;

  /* ============ SEMANTIC ============ */
  --text-display-font:var(--font-display);
  --text-body-font:var(--font-sans);
  --text-head-editorial:var(--font-display);   /* book, report, slide, statement, pull quote */
  --text-head-structural:var(--font-sans);     /* card titles, UI, offers, newsletters, tables, forms */
  --text-label-font:var(--font-label);
  --text-apparatus-font:var(--font-mono);
}

/* spacing */
/* SPACE — an editorial scale, not a UI grid. Large steps exist because
   a magazine page is mostly margin. */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:56px;
  --space-12:72px;
  --space-13:96px;
  --space-14:128px;
  --space-15:180px;

  /* Page furniture */
  --margin-page:clamp(20px,6vw,96px);
  --margin-page-tight:clamp(16px,3vw,40px);
  --gutter-column:clamp(20px,2.6vw,44px); /* @kind spacing */
  --slide-margin:72px;      /* 1280x720 deck safe area */
  --slide-margin-wide:96px;

  /* Rhythm between blocks */
  --stack-tight:var(--space-5);
  --stack:var(--space-8);
  --stack-loose:var(--space-11);
  --section-gap:var(--space-13);
}

/* surfaces */
/* BORDERS, RADII, SHADOW, MOTION.
   The book has no rounded corners and no drop shadows: everything is a rule,
   a tint field, or a bleed. Screen work keeps that, with the minimum of
   affordance shadow the medium needs. */
:root{
  /* --- Radii: essentially square. --- */
  --radius-none:0;
  --radius-xs:2px;      /* input, chip */
  --radius-sm:3px;      /* button */
  --radius-md:4px;      /* card, panel */
  --radius-pill:999px;  /* tag, running-head pill only */

  /* --- Rules. The primary separator in this system. --- */
  --rule-hair:1px solid var(--border-hairline);
  --rule-ink:1px solid var(--border-strong);
  --rule-accent:1px solid var(--border-accent);
  --rule-heavy:3px solid var(--border-strong);
  --rule-accent-heavy:3px solid var(--border-accent);
  --rule-double:3px double var(--border-hairline);

  /* --- Shadow. Used only where an element floats above the page. --- */
  --shadow-none:none;
  --shadow-lift:0 1px 2px rgba(44,46,53,.08),0 2px 8px rgba(44,46,53,.06);
  --shadow-pop:0 4px 12px rgba(44,46,53,.10),0 16px 40px rgba(44,46,53,.10);
  --shadow-inset-rule:inset 0 -1px 0 var(--border-hairline);
  --focus-ring:0 0 0 2px var(--paper),0 0 0 4px var(--oxblood);

  /* --- Motion. Print-minded: things appear, they don't bounce. --- */
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,.6,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.6,0,1,.6); /* @kind other */
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */

  /* --- Transparency & blur. Rare: only where content must sit over an image. --- */
  --veil-ink:rgba(28,29,34,.62);
  --veil-paper:rgba(250,244,239,.86);
  --veil-protect:linear-gradient(to top,rgba(28,29,34,.78) 0%,rgba(28,29,34,0) 68%); /* @kind other */
  --blur-chrome:saturate(140%) blur(14px); /* @kind other */
}

/* print */
/* PRINT — Two Second Brand, tabloid on uncoated newsprint (Newspaper Club).
   Physical units only (mm / pt). Screen values are newsprint SIMULATIONS for preview;
   the CMYK in each comment is what goes to press. Status: PROPOSAL, awaiting Erik's approval. */
:root{
  /* --- Page (Newspaper Club tabloid: 289 × 380 mm, single pages, no bleed, no crop marks) --- */
  --np-page-w:289mm; /* @kind spacing */
  --np-page-h:380mm; /* @kind spacing */
  --np-safe:15mm; /* @kind spacing */            /* NC minimum to top, bottom and outside edge */
  --np-margin-top:24mm; /* @kind spacing */      /* running head sits in the band 15–21 mm */
  --np-margin-bottom:23mm; /* @kind spacing */   /* folio sits in the band 359–365 mm */
  --np-margin-outside:15mm; /* @kind spacing */
  --np-margin-inside:14mm; /* @kind spacing */   /* spine; nothing important across the fold */

  /* --- Grid: 5 columns on a 10-unit subgrid --- */
  --np-live-w:260mm; /* @kind spacing */
  --np-live-h:333mm; /* @kind spacing */         /* = 74 baselines */
  --np-cols:5; /* @kind other */
  --np-col:48mm; /* @kind spacing */
  --np-gutter:5mm; /* @kind spacing */
  --np-unit:21.5mm; /* @kind spacing */          /* half column; 10 units + 9 × 5 mm = 260 mm  */
  /* Text columns: body text runs in 3 columns across grid columns 2–5 (~45 char) */
  --np-text-cols:3; /* @kind other */
  --np-text-col:65.67mm; /* @kind spacing */

  /* --- Baseline: everything sits on 4.5 mm (12.76 pt) --- */
  --np-baseline:4.5mm; /* @kind spacing */
  --np-lines:74; /* @kind other */

  /* --- Type scale (pt). Editorial = Noe, structural = Brown, apparatus = Plex Mono --- */
  --np-size-masthead:120pt; /* @kind font */  --np-lead-masthead:0.9; /* @kind other */
  --np-size-h1:84pt; /* @kind font */         --np-lead-h1:76.5pt; /* @kind font */   /* 6 baselines */
  --np-size-h2:54pt; /* @kind font */         --np-lead-h2:51pt; /* @kind font */     /* 4 baselines */
  --np-size-h3:30pt; /* @kind font */         --np-lead-h3:31.9pt; /* @kind font */   /* 2.5 baselines */
  --np-size-quote:26pt; /* @kind font */      --np-lead-quote:28.7pt; /* @kind font */
  --np-size-lead:15pt; /* @kind font */       --np-lead-lead:19.14pt; /* @kind font *//* 1.5 baselines */
  --np-size-subhead:13pt; /* @kind font */    --np-lead-subhead:12.76pt; /* @kind font */
  --np-size-notice:12pt; /* @kind font */     --np-lead-notice:12.76pt; /* @kind font */ /* structural module heading, Brown 700 */
  --np-size-body:9.5pt; /* @kind font */      --np-lead-body:12.76pt; /* @kind font */   /* 1 baseline */
  --np-size-section:9pt; /* @kind font */     /* vinjett: Brown 700 caps, wide */
  --np-size-folio:9pt; /* @kind font */       /* Plex Mono 500 */
  --np-size-caption:8pt; /* @kind font */     --np-lead-caption:10.6pt; /* @kind font */
  --np-size-byline:8pt; /* @kind font */
  --np-size-runhead:8pt; /* @kind font */
  --np-size-source:8pt; /* @kind font */      --np-lead-source:10.6pt; /* @kind font */  /* NC minimum recommended size */

  /* --- Strokes: no hairlines on newsprint --- */
  --np-rule:0.5pt; /* @kind other */           /* minimum, 100K only */
  --np-rule-strong:1.5pt; /* @kind other */
  --np-rule-accent:1pt; /* @kind other */      /* minimum for any coloured line */

  /* --- Print colour roles (screen sim on newsprint · CMYK to press) --- */
  --np-paper:#EEE9DF; /* @kind color */        /* unprinted sheet — never print a page tint */
  --np-ink:#262423; /* @kind color */          /* 0/0/0/100 — all text, rules, data */
  --np-oxblood:#8A2B2D; /* @kind color */      /* 0/95/80/35 · TAC 210 — the one accent */
  --np-rust:#D27B30; /* @kind color */         /* 0/55/95/5 — second accent, large shapes only */
  --np-tint-grey:#D7D2C9; /* @kind color */    /* 0/0/0/15 — faktaruta, tables */
  --np-tint-blush:#EDCBBC; /* @kind color */   /* 0/25/20/0 — definitionsruta "X = …" */
  --np-tint-warm:#EDD6A9; /* @kind color */    /* 0/15/40/0 — checklista, myt vs fakta */
  --np-tac-max:240; /* @kind other */
}

/* base */
/* BASE — the smallest set of element defaults. Consumers get these for free
   by linking styles.css; nothing here is a component. */
*,*::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(--size-body);line-height:var(--leading-body);font-weight:var(--weight-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-display);color:var(--text-display);letter-spacing:var(--track-head);line-height:var(--leading-head);margin:0;text-wrap:pretty}
h1{font-size:var(--size-display-3);line-height:var(--leading-display);letter-spacing:var(--track-display)}
h2{font-size:var(--size-display-4)}
h3{font-size:var(--size-head-2)}
h4{font-size:var(--size-head-3)}
p{margin:0 0 var(--space-6);max-width:var(--measure-prose);text-wrap:pretty}
em,i{font-style:italic}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--text-link) 40%,transparent);transition:color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}
a:hover{color:var(--text-link-hover);border-bottom-color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none;box-shadow:var(--focus-ring)}
hr{border:none;border-top:var(--rule-hair);margin:var(--space-9) 0}
strong,b{font-weight:var(--weight-bold)}
small{font-size:var(--size-caption)}
code,kbd,pre{font-family:var(--font-mono);font-size:.92em}
blockquote{margin:0;font-family:var(--font-display);font-size:var(--size-display-4);line-height:var(--leading-display-loose);letter-spacing:var(--track-display)}
figure{margin:0}
figcaption{font-family:var(--font-mono);font-size:var(--size-micro);letter-spacing:var(--track-mono);color:var(--text-meta);text-transform:none}
table{border-collapse:collapse;width:100%}
th{font-family:var(--font-label);font-size:var(--size-caption);text-transform:uppercase;letter-spacing:var(--track-caps);font-weight:var(--weight-bold);text-align:left;padding:var(--space-4) var(--space-5);border-bottom:var(--rule-ink)}
td{padding:var(--space-5);border-bottom:var(--rule-hair);font-variant-numeric:tabular-nums}
img,svg,video{max-width:100%;height:auto;display:block}
::selection{background:var(--oxblood);color:var(--paper)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}