/* Self-hosted, latin + latin-ext only. SIL Open Font Licence 1.1.
     Sourced from Google Fonts; see src/fonts/README.md. */
  @font-face {
    font-family: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/instrument-sans-400-700-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: 'Instrument Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/instrument-sans-400-700-normal-latinext.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: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-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: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-400-italic-latinext.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: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-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: 'Instrument Serif';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/instrument-serif-400-normal-latinext.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('/fonts/ibm-plex-mono-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;
  }
  @font-face {
    font-family: 'IBM Plex Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-500-normal-latinext.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: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-600-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: 600;
    font-display: swap;
    src: url('/fonts/ibm-plex-mono-600-normal-latinext.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;
  }

:root {
    --font-sans:'Instrument Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-serif:'Instrument Serif', ui-serif, Georgia, 'Times New Roman', serif;
    --font-mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --navy-900:#061626; --navy-800:#0A2038; --navy-700:#0E2E4F; --navy-600:#143E68; --navy-500:#1B5182;
    --blue-700:#0F4C8A; --blue-600:#1466B0; --blue-500:#1B7FD4; --blue-400:#4C9EE3; --blue-300:#86BEEE; --blue-200:#BEDCF7; --blue-100:#E3EFFB; --blue-50:#F2F8FE;
    --white:#FFFFFF; --slate-25:#F8FAFC; --slate-50:#F1F5F9; --slate-100:#E6ECF2; --slate-200:#D5DEE7; --slate-300:#B4C1CE; --slate-400:#8697A8; --slate-500:#5F7285; --slate-600:#45566A; --slate-700:#2E3D4E; --slate-900:#131C26;
    --green-500:#17915F; --red-500:#C4402C; --amber-500:#E08A0B;
    --shadow-sm: 0 1px 2px rgba(6,22,38,.06), 0 1px 1px rgba(6,22,38,.04);
    --shadow-md: 0 4px 10px rgba(6,22,38,.08), 0 2px 4px rgba(6,22,38,.05);
    --shadow-key: 0 6px 16px rgba(20,102,176,.28);

    /* Semantic layer. Components reference these, never the raw palette,
       so the dark theme is a matter of redefining this block. */
    --bg:var(--white);
    --surface:var(--white);
    --surface-sunken:var(--slate-25);
    --line-faint:var(--line-faint);
    --line:var(--line);
    --line-strong:var(--line-strong);
    --ink:var(--navy-900);
    --ink-body:var(--slate-700);
    --ink-soft:var(--slate-500);
    /* slate-400 measured 3.0:1 on white, which fails AA for the small mono
       labels this is used on. slate-500 is 4.96:1. */
    --ink-mute:var(--slate-500);
    --accent:var(--blue-600);
    --accent-hover:var(--blue-700);
    --accent-ink:var(--blue-700);
    --accent-soft:var(--accent-soft);
    --accent-line:var(--accent-line);
    --accent-solid:var(--blue-600);
    --accent-solid-hover:var(--blue-700);
    --on-accent:#FFFFFF;
    --header-bg:rgba(255,255,255,.82);
    --header-bg-solid:rgba(255,255,255,.97);
    --band:var(--navy-900);
    --band-grid:rgba(134,190,238,.10);
    --band-rule:var(--blue-400);
    --focus-ring:var(--blue-600);
    --focus-ring-band:var(--blue-300);
    --logo-bg:var(--white);
    --mark-bg:var(--navy-900);
    --mark-border:transparent;
  }
  * { box-sizing: border-box; }
  body { margin:0; background:var(--surface); font-family:var(--font-sans); color:var(--ink-body); -webkit-font-smoothing:antialiased; }
  a { text-decoration:none; }
  .wrap { max-width:1200px; margin:0 auto; padding:0 32px; }
  .grid-bg {
    background-color:var(--band);
    background-image:linear-gradient(var(--band-grid) 1px, transparent 1px), linear-gradient(90deg, var(--band-grid) 1px, transparent 1px);
    background-size:32px 32px, 32px 32px;
  }
  .eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
  .eyebrow .rule { width:28px; height:3px; border-radius:2px; }
  .eyebrow span.label { font-family:var(--font-mono); font-weight:500; font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
  h2.section-h { font-family:var(--font-serif); font-weight:400; font-size:28px; line-height:1.18; letter-spacing:-.012em; color:var(--ink); margin:0; }

  header { position:sticky; top:0; z-index:20; background:var(--header-bg); backdrop-filter:saturate(1.1) blur(12px); border-bottom:1px solid var(--line); }
  header .inner { height:76px; display:flex; align-items:center; justify-content:space-between; gap:32px; }
  .brand { display:flex; align-items:center; gap:12px; }
  .brand .mark { width:34px; height:34px; border-radius:6px; background:var(--mark-bg); border:1px solid var(--mark-border); display:flex; align-items:center; justify-content:center; }
  .brand .mark svg { display:block; }
  .brand .name { font-family:var(--font-sans); font-weight:700; font-size:18px; letter-spacing:-.015em; color:var(--ink); display:block; }
  .brand .desc { font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-soft); display:block; }
  nav { display:flex; align-items:center; gap:24px; }
  nav a.navlink { font-weight:500; font-size:14px; color:var(--ink-body); }
  nav a.navlink:hover { color:var(--ink); }

  .btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-sans); font-weight:600; letter-spacing:.005em; border-radius:5px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:all .14s cubic-bezier(.32,.72,0,1); }
  .btn-sm { font-size:13px; padding:7px 12px; min-height:32px; }
  .btn-lg { font-size:16px; padding:14px 26px; min-height:48px; }
  .btn-primary { background:var(--accent-solid); color:var(--on-accent); border-color:var(--accent-solid); box-shadow:var(--shadow-sm); }
  .btn-primary:hover { background:var(--accent-solid-hover); border-color:var(--accent-solid-hover); box-shadow:var(--shadow-key); }
  .btn-inverse { background:#fff; color:var(--navy-900); border-color:#fff; }
  .btn-inverse:hover { background:var(--blue-100); border-color:var(--blue-100); }

  .hero { padding:120px 0 112px; }
  .hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,364px); gap:64px; align-items:start; }
  .hero-main { max-width:760px; }
  .hero h1 { font-family:var(--font-serif); font-weight:400; font-size:60px; line-height:1.05; letter-spacing:-.012em; color:#fff; margin:0; text-wrap:balance; }
  .hero p.lead { font-size:22px; line-height:1.6; color:var(--blue-200); margin:24px 0 0; max-width:560px; }
  .capture { margin-top:36px; max-width:560px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:24px; }
  .capture-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
  .capture-top .label { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--blue-300); }
  .capture-row { display:grid; grid-template-columns:1fr auto; gap:12px; }
  .capture input { box-sizing:border-box; width:100%; padding:14px 16px; min-height:48px; border:0; background:#fff; border-radius:5px; font-family:var(--font-sans); font-size:16px; color:var(--navy-900); }
  .capture .fine { font-size:13px; color:rgba(190,220,247,.78); margin:12px 0 0; }
  .stats-line { display:flex; align-items:center; gap:16px; margin-top:32px; flex-wrap:wrap; }
  .stats-line span.stat { font-family:var(--font-mono); font-size:13px; color:var(--blue-300); }
  .stats-line .sep { width:1px; height:16px; background:rgba(255,255,255,.16); }

  .panel { background:rgba(10,32,56,.72); backdrop-filter:saturate(1.1) blur(12px); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:32px; }
  .panel-label { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--blue-300); margin-bottom:20px; }
  .funnel-row { display:grid; gap:8px; margin-bottom:14px; }
  .funnel-top { display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
  .funnel-top .lbl { font-size:14px; color:#fff; }
  .funnel-top .val-wrap { display:inline-flex; align-items:baseline; gap:10px; }
  .funnel-top .val { font-family:var(--font-mono); font-weight:600; font-size:15px; color:#fff; font-variant-numeric:tabular-nums; }
  .funnel-top .conv { font-family:var(--font-mono); font-size:11px; color:var(--blue-300); font-variant-numeric:tabular-nums; }
  .funnel-bar { height:26px; border-radius:4px; }

  .section { padding:96px 0 0; }
  .section:last-of-type { padding-bottom:96px; }
  .cards-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .cards-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }

  .feature-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:var(--shadow-sm); }
  .feature-card .idx { width:40px; height:40px; border-radius:5px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); font-family:var(--font-mono); font-weight:600; font-size:14px; margin-bottom:20px; }
  .feature-card h3 { font-family:var(--font-sans); font-weight:600; font-size:18px; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
  .feature-card p { font-size:14px; line-height:1.6; color:var(--ink-body); margin:0; }

  .stat-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; gap:8px; }
  .stat-card .lbl { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--ink-soft); }
  .stat-card .val-row { display:flex; align-items:baseline; gap:10px; }
  .stat-card .val { font-family:var(--font-mono); font-weight:600; font-size:32px; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums; }
  .stat-card .delta { font-family:var(--font-mono); font-size:13px; font-variant-numeric:tabular-nums; }
  .delta-success { color:var(--green-500); } .delta-danger { color:var(--red-500); } .delta-muted { color:var(--ink-soft); }
  .stat-card .cap { font-size:13px; color:var(--ink-soft); }

  .about { display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; margin-top:40px; }
  .about .photo { width:120px; height:120px; border-radius:50%; border:1.5px dashed var(--line-strong); background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; text-align:center; color:var(--ink-mute); line-height:1.4; padding:8px; flex:none; }
  .about h3 { font-family:var(--font-sans); font-weight:600; font-size:22px; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
  .about p { font-size:15px; line-height:1.6; color:var(--ink-body); margin:0; max-width:520px; }


  .subscribe-form { background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:12px; padding:40px; margin-top:96px; }
  .subscribe-form h2 { font-family:var(--font-serif); font-weight:400; font-size:20px; letter-spacing:-.008em; color:var(--ink); margin:0 0 8px; }
  .subscribe-form p.blurb { font-size:14px; line-height:1.6; color:var(--ink-body); margin:0; max-width:520px; }
  .subscribe-inline { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:end; margin-top:20px; max-width:560px; }
  .subscribe-inline input { box-sizing:border-box; width:100%; padding:14px 16px; min-height:48px; border:1px solid var(--line-strong); background:var(--surface); border-radius:5px; font-family:var(--font-sans); font-size:15px; color:var(--ink); }
  .subscribe-form .fine { font-size:13px; color:var(--ink-soft); margin-top:12px; }

  footer { padding:64px 32px 40px; margin-top:96px; }
  .footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; flex-wrap:wrap; }
  .footer-brand { display:flex; align-items:center; gap:15px; }
  .footer-brand .mark { width:44px; height:44px; border-radius:8px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); display:flex; align-items:center; justify-content:center; }
  .footer-brand .name { font-family:var(--font-sans); font-weight:700; font-size:24px; letter-spacing:-.015em; color:#fff; display:block; }
  .footer-brand .desc { font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:var(--blue-300); display:block; }
  .footer-copy p { font-size:14px; line-height:1.6; color:var(--blue-200); margin:20px 0 0; max-width:360px; }
  .footer-legal { font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:rgba(190,220,247,.7); }

  @media (max-width: 860px) {
    .cards-3, .cards-4 { grid-template-columns:1fr; }
    .hero h1 { font-size:38px; }
    nav .navlink { display:none; }
  }

  /* --- Page hero (non-home pages) --- */
  .page-hero { padding:72px 0 64px; }
  .page-hero h1 { font-family:var(--font-serif); font-weight:400; font-size:44px; line-height:1.1; letter-spacing:-.012em; color:#fff; margin:0; max-width:760px; }
  .page-hero p.lead { font-size:18px; line-height:1.6; color:var(--blue-200); margin:16px 0 0; max-width:640px; }

  /* --- Story / About --- */
  .story-grid { display:grid; grid-template-columns:280px 1fr; gap:48px; align-items:start; margin-top:40px; }
  .story-photo { width:100%; aspect-ratio:1; border-radius:12px; border:1.5px dashed var(--line-strong); background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; text-align:center; color:var(--ink-mute); }
  .story-photo img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
  .story-copy p { font-size:16px; line-height:1.7; color:var(--ink-body); margin:0 0 16px; }

  .topics-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .topic-card { background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:var(--shadow-sm); }
  .topic-card .num { font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--accent); background:var(--accent-soft); width:32px; height:32px; border-radius:5px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
  .topic-card h3 { font-family:var(--font-sans); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--ink); margin:0 0 8px; }
  .topic-card p { font-size:13.5px; line-height:1.6; color:var(--ink-body); margin:0; }

  /* --- Workshop --- */
  .form-panel { background:rgba(10,32,56,.72); border:1px solid rgba(255,255,255,.16); border-radius:8px; padding:32px; max-width:440px; margin-top:32px; }
  .form-panel label { display:block; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--blue-300); margin-bottom:8px; }
  .form-panel select { width:100%; padding:12px 14px; border-radius:5px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); color:#fff; font-family:var(--font-sans); font-size:14px; margin-bottom:16px; }
  .form-panel .fine { font-size:12.5px; color:rgba(190,220,247,.7); margin-top:12px; }

  .pillars-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }
  .faq { margin-top:40px; display:flex; flex-direction:column; gap:1px; border-top:1px solid var(--line); }
  .faq-item { padding:24px 0; border-bottom:1px solid var(--line); }
  .faq-item h3 { font-family:var(--font-sans); font-weight:600; font-size:16px; color:var(--ink); margin:0 0 8px; }
  .faq-item p { font-size:14.5px; line-height:1.65; color:var(--ink-body); margin:0; }

  .cta-panel { background:var(--band); border-radius:12px; padding:48px; margin-top:96px; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
  .cta-panel h2 { font-family:var(--font-serif); font-weight:400; font-size:24px; color:#fff; margin:0 0 8px; letter-spacing:-.008em; }
  .cta-panel p { font-size:14.5px; color:var(--blue-200); margin:0; max-width:440px; }

  /* --- Media --- */
  .podcast-list { display:flex; flex-direction:column; gap:24px; margin-top:40px; }
  .podcast-row { display:grid; grid-template-columns:280px 1fr; gap:32px; align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:20px; box-shadow:var(--shadow-sm); }
  .podcast-thumb { aspect-ratio:16/9; border-radius:6px; background:var(--navy-800); display:flex; align-items:center; justify-content:center; position:relative; }
  .podcast-thumb .play { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; }
  .podcast-copy h3 { font-family:var(--font-sans); font-weight:600; font-size:17px; color:var(--ink); margin:0 0 8px; }
  .podcast-copy p { font-size:14px; line-height:1.6; color:var(--ink-body); margin:0; }
  .podcast-copy a { color:var(--accent); font-weight:500; }

  .articles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .article-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:8px; overflow:hidden; box-shadow:var(--shadow-sm); }
  .article-thumb { aspect-ratio:16/9; background:var(--accent-soft); border:1px dashed var(--line-strong); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); }
  .article-card .body { padding:20px; }
  .article-card h3 { font-family:var(--font-sans); font-weight:600; font-size:15.5px; color:var(--ink); margin:0 0 8px; letter-spacing:-.01em; }
  .article-card p { font-size:13px; line-height:1.6; color:var(--ink-body); margin:0; }

  /* --- Stat sheet --- */
  .stat-promo { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; margin-top:64px; }
  .stat-promo ul { margin:20px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
  .stat-promo li { font-size:15px; color:var(--ink-body); padding-left:24px; position:relative; }
  .stat-promo li::before { content:'—'; position:absolute; left:0; color:var(--accent); font-family:var(--font-mono); }
  .stat-shot { border:1px dashed var(--line-strong); border-radius:8px; aspect-ratio:4/3; background:var(--surface-sunken); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:var(--ink-mute); }

  @media (max-width: 860px) {
    .story-grid, .stat-promo, .podcast-row, .pillars-4, .articles-grid, .topics-grid { grid-template-columns:1fr; }
    .page-hero h1 { font-size:32px; }
  }

  /* --- Header: brand link + mobile nav --- */
  a.brand { color:inherit; }
  .navtoggle { display:none; align-items:center; justify-content:center; width:42px; height:42px; padding:0; border:1px solid var(--line-strong); border-radius:6px; background:var(--surface); cursor:pointer; }
  .navtoggle .bars { display:flex; flex-direction:column; gap:4px; width:18px; }
  .navtoggle .bars span { display:block; height:2px; border-radius:1px; background:var(--ink); }
  .mobilenav { display:none; flex-direction:column; gap:4px; padding:12px 32px 20px; border-top:1px solid var(--line); background:var(--header-bg-solid); }
  .mobilenav .navlink { display:block; padding:12px 0; font-size:16px; font-weight:500; color:var(--ink); border-bottom:1px solid var(--line-faint); }
  .mobilenav .btn { margin-top:12px; }
  nav a.navlink[aria-current="page"] { color:var(--ink); }


  @media (max-width: 860px) {
    .wrap { padding:0 20px; }
    header .inner { height:64px; gap:16px; }
    nav { display:none; }
    .navtoggle { display:flex; }
    header.open .mobilenav { display:flex; }
    .hero { padding:56px 0; }
    .hero p.lead { font-size:18px; }
    .capture, .subscribe-form { padding:20px; }
    .capture-row, .subscribe-inline { grid-template-columns:1fr; }
    .section { padding:56px 0 0; }
    .section:last-of-type { padding-bottom:56px; }
    .subscribe-form { margin-top:56px; }
    .cta-panel { padding:28px; margin-top:56px; }
    .about { grid-template-columns:1fr; gap:20px; }
    .cards-4 { grid-template-columns:repeat(2,1fr) !important; }
    .story-grid { gap:28px; }
    .story-photo { max-width:220px; }
    footer { padding:48px 20px 32px; margin-top:56px; }
    .footer-inner { gap:28px; }
  }
  @media (max-width: 480px) {
    .hero h1 { font-size:32px; }
    .page-hero h1 { font-size:28px; }
    .cards-4 { grid-template-columns:1fr !important; }
  }

  .footer-nav { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 20px; max-width:520px; }
  .footer-nav a { font-size:14px; color:var(--blue-200); }
  .footer-nav a:hover { color:#fff; }
  .footer-nav .footer-legal { width:100%; text-align:right; margin-top:6px; }
  @media (max-width: 860px) {
    .footer-nav { justify-content:flex-start; max-width:none; }
    .footer-nav .footer-legal { text-align:left; }
  }

  a.topic-card { color:inherit; transition:border-color .14s, box-shadow .14s, transform .14s; }
  a.topic-card:hover { border-color:var(--blue-300); box-shadow:var(--shadow-md); transform:translateY(-1px); }

  /* --- Inline subscribe states --- */
  .sub-msg { font-size:13.5px; line-height:1.5; margin:12px 0 0; }
  .capture .sub-msg { color:#FFD9D2; }
  .subscribe-form .sub-msg { color:var(--red-500); }
  .sub-success h4 { font-family:var(--font-serif); font-weight:400; font-size:18px; letter-spacing:-.008em; margin:0 0 8px; }
  .sub-success p { font-size:14.5px; line-height:1.6; margin:0; }
  .sub-success a { font-weight:500; text-decoration:underline; text-underline-offset:3px; }
  .capture .sub-success h4 { color:#fff; }
  .capture .sub-success p { color:var(--blue-200); }
  .capture .sub-success a { color:#fff; }
  .subscribe-form .sub-success h4 { color:var(--ink); }
  .subscribe-form .sub-success p { color:var(--ink-body); }
  .subscribe-form .sub-success a { color:var(--accent); }
  .sub-tick { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; margin-bottom:14px; }
  .capture .sub-tick { background:rgba(255,255,255,.16); }
  .subscribe-form .sub-tick { background:var(--accent-line); }

  /* --- Sprint 1: promoted from inline styles --- */
  .eyebrow .rule { background:var(--accent); }
  .eyebrow .label { color:var(--accent); }
  a.inline-link { color:var(--accent); font-weight:500; }
  /* third-party logos are baked at a light background, so the slot stays light in both themes */
  .logo-slot { border:1px solid var(--line); border-radius:8px; padding:20px; display:flex; align-items:center; justify-content:center; background:var(--logo-bg); box-shadow:var(--shadow-sm); }
  .logo-slot img { max-width:100%; max-height:32px; object-fit:contain; filter:grayscale(1); opacity:.75; }
  .logos-4 { grid-template-columns:repeat(4,1fr); }
  .media-fill { width:100%; height:100%; object-fit:cover; display:block; }
  .embed-frame { border:0; display:block; aspect-ratio:16/9; }
  .flush { padding:0; }
  .flush-clip { padding:0; overflow:hidden; }
  .section-tight { padding-bottom:96px; }
  .full-width { width:100%; }
  .panel-note { font-size:13px; color:rgba(190,220,247,.85); margin:-4px 0 20px; }
  .story-photo.has-image { border-style:solid; padding:0; }
  .story-photo.has-image img { width:100%; height:100%; object-fit:cover; }
  .wrap.pad-bottom { padding-bottom:96px; }
  .fine.mt-16 { margin-top:16px; }
  p.mt-12 { margin-top:12px; }

  /* --- Sprint 2: the archive --- */
  .issue-year { margin-bottom:56px; }
  .issue-year:last-child { margin-bottom:0; }
  .issue-year .eyebrow { margin-bottom:8px; }
  .issue-count { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-mute); margin-left:auto; }

  .issue-list { display:flex; flex-direction:column; border-top:1px solid var(--line); }
  .issue-row {
    display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:24px;
    padding:22px 8px; border-bottom:1px solid var(--line); color:inherit;
    transition:background .14s, padding-left .14s;
  }
  .issue-row:hover { background:var(--surface-sunken); padding-left:16px; }
  .issue-no { font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--blue-500); font-variant-numeric:tabular-nums; }
  .issue-main { display:block; min-width:0; }
  .issue-title { display:block; font-family:var(--font-serif); font-weight:400; font-size:18.5px; line-height:1.35; letter-spacing:-.006em; color:var(--ink); }
  .issue-row:hover .issue-title { color:var(--accent-ink); }
  .issue-sub { display:block; font-size:14px; line-height:1.55; color:var(--ink-soft); margin-top:5px; max-width:64ch; }
  .issue-meta { display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right; white-space:nowrap; }
  .issue-meta time { font-family:var(--font-mono); font-size:12.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .issue-read { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-mute); }

  /* --- Sprint 2: a single issue --- */
  .issue-hero { padding:64px 0 56px; }
  .issue-kicker { font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--blue-300); margin:0 0 18px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .issue-kicker .dot { width:3px; height:3px; border-radius:50%; background:rgba(190,220,247,.55); }
  .issue-hero h1 { font-size:40px; max-width:20ch; }
  .issue-hero p.lead { font-size:17px; max-width:60ch; }

  .issue-body { max-width:720px; padding-top:56px; }
  .issue-body > * { margin:0 0 22px; }
  .issue-body > *:last-child { margin-bottom:0; }
  .issue-body p { font-size:17.5px; line-height:1.72; color:var(--ink-body); }
  .issue-body h2 { font-family:var(--font-serif); font-weight:400; font-size:26px; line-height:1.2; letter-spacing:-.012em; color:var(--ink); margin:44px 0 18px; }
  .issue-body h3 { font-family:var(--font-serif); font-weight:400; font-size:20px; line-height:1.25; letter-spacing:-.01em; color:var(--ink); margin:36px 0 14px; }
  .issue-body h4 { font-family:var(--font-serif); font-weight:400; letter-spacing:-.008em; font-size:17px; color:var(--ink); margin:30px 0 12px; }
  .issue-body strong { color:var(--ink); font-weight:600; }
  .issue-body em { font-style:italic; }
  .issue-body a { color:var(--accent); font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; text-decoration-color:var(--blue-200); }
  .issue-body a:hover { text-decoration-color:var(--accent); }
  .issue-body ul, .issue-body ol { padding-left:22px; }
  .issue-body li { font-size:17.5px; line-height:1.72; color:var(--ink-body); margin-bottom:10px; }
  .issue-body blockquote { margin:32px 0; padding:4px 0 4px 22px; border-left:3px solid var(--blue-200); font-size:18px; line-height:1.65; color:var(--ink); font-style:italic; }
  .issue-body img { display:block; max-width:100%; height:auto; margin:32px auto; border-radius:8px; border:1px solid var(--line); }
  .issue-body hr { border:0; border-top:1px solid var(--line); margin:40px 0; }

  .issue-nav-wrap { padding-bottom:96px; }
  .issue-nav { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px; }
  .issue-nav-link { display:flex; flex-direction:column; gap:8px; padding:22px 24px; border:1px solid var(--line); border-radius:8px; background:var(--surface); box-shadow:var(--shadow-sm); color:inherit; transition:border-color .14s, box-shadow .14s, transform .14s; }
  .issue-nav-link:hover { border-color:var(--blue-300); box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .issue-nav-link.next { grid-column:2; text-align:right; align-items:flex-end; }
  .issue-nav-link .dir { font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
  .issue-nav-link .ttl { font-family:var(--font-serif); font-weight:400; font-size:16px; line-height:1.35; letter-spacing:-.006em; color:var(--ink); }
  .issue-all { display:inline-block; margin-top:32px; font-size:15px; font-weight:500; color:var(--accent); }
  .issue-all:hover { color:var(--accent-ink); }

  /* --- Sprint 2: latest issues on the home page --- */
  .issue-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .issue-card { display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:24px; box-shadow:var(--shadow-sm); color:inherit; transition:border-color .14s, box-shadow .14s, transform .14s; }
  .issue-card:hover { border-color:var(--blue-300); box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .issue-card-no { font-family:var(--font-mono); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--accent); }
  .issue-card h3 { font-family:var(--font-serif); font-weight:400; font-size:18.5px; line-height:1.35; letter-spacing:-.006em; color:var(--ink); margin:0; }
  .issue-card p { font-size:14px; line-height:1.6; color:var(--ink-soft); margin:0; }
  .issue-card-meta { display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:16px; border-top:1px solid var(--line-faint); font-family:var(--font-mono); font-size:11.5px; color:var(--ink-mute); font-variant-numeric:tabular-nums; }
  .issue-card-meta span::before { content:'· '; }

  @media (max-width: 860px) {
    .issue-cards { grid-template-columns:1fr; }
    .issue-row { grid-template-columns:auto 1fr; gap:6px 16px; padding:18px 4px; }
    .issue-row:hover { padding-left:8px; }
    .issue-meta { grid-column:2; flex-direction:row; align-items:baseline; justify-content:flex-start; gap:10px; text-align:left; margin-top:8px; }
    .issue-hero h1 { font-size:30px; }
    .issue-body { padding-top:40px; }
    .issue-body p, .issue-body li { font-size:16.5px; }
    .issue-nav { grid-template-columns:1fr; }
    .issue-nav-link.next { grid-column:1; text-align:left; align-items:flex-start; }
    .issue-nav-wrap { padding-bottom:56px; }
  }

  /* --- Sprint 3: the hero has one job, everything else sits below it --- */
  .section-lead { font-size:16px; line-height:1.65; color:var(--ink-soft); margin:12px 0 0; max-width:60ch; }
  .section-h + .section-lead { margin-top:10px; }
  .section-lead + .issue-list { margin-top:32px; }

  .hero-author { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22); border-radius:12px; padding:30px; }
  .hero-author-photo { display:block; width:104px; height:104px; border-radius:50%; object-fit:cover; object-position:center 20%; border:3px solid rgba(255,255,255,.20); margin:0 0 20px; }
  .hero-author-eyebrow { font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--blue-300); margin:0 0 8px; }
  .hero-author-name { font-family:var(--font-serif); font-weight:400; font-size:28px; line-height:1.15; letter-spacing:-.014em; color:#fff; margin:0 0 14px; }
  .hero-author-bio { font-size:16px; line-height:1.7; color:var(--blue-200); margin:0 0 20px; }
  .hero-author-link { display:inline-block; font-family:var(--font-sans); font-weight:600; font-size:15px; color:#fff; border-bottom:1px solid rgba(255,255,255,.35); padding-bottom:2px; transition:border-color .14s; }
  .hero-author-link:hover { border-bottom-color:#fff; }

  .quotes { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
  .quote-card { margin:0; display:flex; flex-direction:column; gap:24px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px; box-shadow:var(--shadow-sm); transition:box-shadow .18s cubic-bezier(.32,.72,0,1), transform .18s cubic-bezier(.32,.72,0,1), border-color .18s; }
  .quote-card:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); border-color:var(--line-strong); }
  .quote-card blockquote { margin:0; font-family:var(--font-serif); font-weight:400; font-size:19px; line-height:1.45; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty; }
  .quote-card blockquote::before { content:'\201C'; }
  .quote-card blockquote::after { content:'\201D'; }
  .quote-card figcaption { display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:20px; border-top:1px solid var(--line); }
  .quote-initials { flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink); font-family:var(--font-mono); font-weight:600; font-size:12.5px; display:flex; align-items:center; justify-content:center; letter-spacing:.02em; }
  .quote-who { display:block; }
  .quote-who .cap-name { display:block; font-size:14.5px; font-weight:600; color:var(--ink); letter-spacing:-.005em; }
  .quote-who .cap-role { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }

  @media (max-width: 1000px) {
    .hero-grid { grid-template-columns:1fr; gap:48px; }
    .hero-author { max-width:560px; }
  }

  @media (max-width: 860px) {
    .quotes { grid-template-columns:1fr; }
    .hero-author { padding:24px; }
    .hero-author-photo { width:88px; height:88px; margin-bottom:16px; }
  }

  /* --- Sprint 4: dark theme. Only the semantic layer is redefined. --- */
  :root[data-theme="dark"] {
    --bg:#060F18;
    --surface:#0C1A28;
    --surface-sunken:#0A1622;
    --line-faint:rgba(255,255,255,.05);
    --line:rgba(255,255,255,.10);
    --line-strong:rgba(255,255,255,.17);
    --ink:#F1F6FB;
    --ink-body:#C2D2E1;
    --ink-soft:#93A7BA;
    --ink-mute:#778CA2;
    --accent:#7CBBF2;
    --accent-hover:#A6D2F8;
    --accent-ink:#A6D2F8;
    --accent-soft:rgba(76,158,227,.13);
    --accent-line:rgba(76,158,227,.26);
    --accent-solid:var(--blue-500);
    --accent-solid-hover:var(--blue-400);
    --on-accent:#04121E;
    --header-bg:rgba(6,15,24,.78);
    --header-bg-solid:rgba(6,15,24,.97);
    --band:#0B1B2B;
    --band-grid:rgba(134,190,238,.13);
    --focus-ring:#8CC5F5;
    --focus-ring-band:#8CC5F5;
    --logo-bg:rgba(255,255,255,.90);
    --mark-bg:rgba(255,255,255,.06);
    --mark-border:rgba(255,255,255,.14);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.4);
    --shadow-key: 0 6px 18px rgba(27,127,212,.42);
  }

  /* Follow the operating system until the reader says otherwise. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg:#060F18;
      --surface:#0C1A28;
      --surface-sunken:#0A1622;
      --line-faint:rgba(255,255,255,.05);
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,255,255,.17);
      --ink:#F1F6FB;
      --ink-body:#C2D2E1;
      --ink-soft:#93A7BA;
      --ink-mute:#778CA2;
      --accent:#7CBBF2;
      --accent-hover:#A6D2F8;
      --accent-ink:#A6D2F8;
      --accent-soft:rgba(76,158,227,.13);
      --accent-line:rgba(76,158,227,.26);
      --accent-solid:var(--blue-500);
      --accent-solid-hover:var(--blue-400);
      --on-accent:#04121E;
      --header-bg:rgba(6,15,24,.78);
      --header-bg-solid:rgba(6,15,24,.97);
      --band:#0B1B2B;
      --band-grid:rgba(134,190,238,.13);
      --focus-ring:#8CC5F5;
    --focus-ring-band:#8CC5F5;
    --logo-bg:rgba(255,255,255,.90);
    --mark-bg:rgba(255,255,255,.06);
      --mark-border:rgba(255,255,255,.14);
      --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 1px 1px rgba(0,0,0,.4);
      --shadow-md: 0 4px 12px rgba(0,0,0,.55), 0 2px 5px rgba(0,0,0,.4);
      --shadow-key: 0 6px 18px rgba(27,127,212,.42);
    }
  }

  /* --- theme toggle --- */
  .themetoggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border:1px solid transparent; border-radius:6px; background:transparent; color:var(--ink-soft); cursor:pointer; transition:color .14s, border-color .14s, background .14s; }
  .themetoggle:hover { color:var(--ink); border-color:var(--line-strong); background:var(--surface-sunken); }
  .themetoggle svg { display:block; width:16px; height:16px; }
  .themetoggle .icon-moon { display:none; }
  :root[data-theme="dark"] .themetoggle .icon-sun { display:none; }
  :root[data-theme="dark"] .themetoggle .icon-moon { display:block; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .themetoggle .icon-sun { display:none; }
    :root:not([data-theme="light"]) .themetoggle .icon-moon { display:block; }
  }
  .mobilenav .themetoggle { width:100%; height:44px; margin-top:12px; gap:10px; border-color:var(--line); }
  .mobilenav .themetoggle .themelabel { font-family:var(--font-sans); font-size:15px; font-weight:500; }
  nav .themetoggle .themelabel { display:none; }

  /* --- Sprint 5: focus, motion, and the skip link --- */
  .visually-hidden {
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
  }

  .skip-link {
    position:absolute; left:16px; top:-64px; z-index:60;
    display:inline-flex; align-items:center; min-height:44px; padding:0 18px;
    border-radius:6px; background:var(--accent-solid); color:var(--on-accent);
    font-family:var(--font-sans); font-weight:600; font-size:15px;
    box-shadow:var(--shadow-md); transition:top .16s cubic-bezier(.32,.72,0,1);
  }
  .skip-link:focus { top:16px; }
  main:focus { outline:none; }

  /* One ring, on everything that takes focus, and only for keyboard users. */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible {
    outline:2px solid var(--focus-ring);
    outline-offset:3px;
    border-radius:4px;
  }
  /* On the navy band the page ring disappears, so it gets a light one. */
  .grid-bg a:focus-visible,
  .grid-bg button:focus-visible,
  .grid-bg input:focus-visible,
  .grid-bg select:focus-visible {
    outline-color:var(--focus-ring-band);
  }
  .capture input:focus-visible, .subscribe-inline input:focus-visible { outline-offset:2px; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after {
      animation-duration:.001ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.001ms !important;
      scroll-behavior:auto !important;
    }
    .issue-row:hover, .quote-card:hover, .issue-card:hover,
    .issue-nav-link:hover, a.topic-card:hover { transform:none; }
  }