@font-face {
    font-family:'Bowlby One';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/assets/fonts/bowlby-one-400.woff2?v=12274488") format("woff2");
  }
  @font-face {
    font-family:'Syne';
    font-style:normal;
    font-weight:400 800;
    font-display:swap;
    src:url("/assets/fonts/syne-variable.woff2?v=cfff4120") format("woff2");
  }
  @font-face {
    font-family:'DM Sans';
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url("/assets/fonts/dm-sans-variable.woff2?v=aa530716") format("woff2");
  }
  @font-face {
    font-family:'Space Mono';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/assets/fonts/space-mono-400.woff2?v=e0c8e616") format("woff2");
  }
  @font-face {
    font-family:'Space Mono';
    font-style:normal;
    font-weight:700;
    font-display:swap;
    src:url("/assets/fonts/space-mono-700.woff2?v=af7cf6d2") format("woff2");
  }
  @font-face {
    font-family:'Newsreader';
    font-style:normal;
    font-weight:400;
    font-display:swap;
    src:url("/assets/fonts/newsreader-variable.woff2?v=e71a3bea") format("woff2");
  }
  :root {
    /* COLOR — primaries (flat poster blocks) */
    --pumpkin:#E2622C; --pumpkin-dark:#B5462A; --mustard:#E4A41A; --mustard-dark:#B5811A;
    --avocado:#6B7A3A; --avocado-dark:#4C5828; --brick:#B5462A; --salmon:#E9A285;
    --teal:#4A7A7A; --plum:#7A3D5C;
    /* COLOR — neutrals */
    --smoke:#6B5E4A;
    /* article reading surface — one notch above paper; "you just feel it" (George, 2026-07-30) */
    --ink:#2A201A; --ink-2:#3D2418;
    /* COLOR — semantic */
    --fg-1:var(--ink); --fg-2:var(--smoke); --fg-on-dark:var(--paper);
    --bg-1:var(--paper); --bg-2:var(--paper-2); --bg-card:var(--paper); --bg-inverse:var(--ink);
    --border:var(--ink); --border-soft:color-mix(in oklab, var(--ink) 30%, var(--paper)); --rule:var(--ink);
    --link:var(--pumpkin-dark); --link-hover:var(--ink);
    --accent:var(--pumpkin); --accent-2:var(--mustard); --accent-3:var(--avocado);
    --success:var(--avocado); --warning:var(--mustard); --danger:var(--brick);
    /* SPECTRUM — data role. Left=teal, Center=mustard-dark, Right=pumpkin. */
    --spec-left:var(--teal); --spec-center:var(--mustard-dark); --spec-right:var(--pumpkin);
    /* TYPE — families */
    --font-display:'Bowlby One','Cooper Black',Georgia,serif;
    --font-sub:'Syne','Futura','ITC Avant Garde Gothic',system-ui,sans-serif;
    --font-body:'DM Sans','Helvetica Neue',system-ui,sans-serif;
    --font-mono:'Space Mono','IBM Plex Mono',ui-monospace,monospace;
    --font-serif:'Newsreader',Georgia,serif;
    /* TYPE — sizes (poster scale) */
    --t-hero:clamp(56px,9vw,144px); --t-display:clamp(40px,6vw,88px); --t-h1:clamp(36px,4.4vw,64px);
    --t-h2:clamp(28px,3.2vw,44px); --t-h3:clamp(22px,2.2vw,30px); --t-h4:20px;
    --t-body-lg:19px; --t-body:17px; --t-body-sm:15px; --t-caption:13px; --t-micro:11px;
    --lh-display:0.95; --lh-heading:1.05; --lh-body:1.6; --lh-tight:1.2;
    --ls-display:-0.015em; --ls-heading:-0.01em; --ls-body:0; --ls-label:0.18em; --ls-mono:0.04em;
    /* SPACING — 8px base */
    --s-0:0; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
    --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
    /* RADII — three only */
    --r-0:0; --r-md:12px; --r-full:999px;
    /* BORDERS */
    --bw-1:1px; --bw-2:2px; --bw-3:3px; --bw-4:4px; --bw-rule:2px;
    /* ELEVATION — hard offset shadows only, no blur */
    --shadow-sm:3px 3px 0 var(--ink); --shadow-md:6px 6px 0 var(--ink); --shadow-lg:10px 10px 0 var(--ink);
    --shadow-pumpkin:6px 6px 0 var(--pumpkin); --shadow-mustard:6px 6px 0 var(--mustard);
    /* MOTION */
    --ease:cubic-bezier(0.22,1,0.36,1); --dur-hover:150ms; --dur-state:250ms; --dur-enter:400ms;
    /* GRAIN — subtle warm noise for cream surfaces */
    --grain:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyMDAnIGhlaWdodD0nMjAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzZWVkPSc0Jy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuMTYgIDAgMCAwIDAgMC4xMyAgMCAwIDAgMCAwLjEgIDAgMCAwIDAuNSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMC41NScvPjwvc3ZnPg==");
  }
  * , *::before, *::after { box-sizing:border-box; }
  html, body { margin:0; padding:0; background:var(--paper); color:var(--ink);
    font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  body::after {
    content:"";
    position:fixed;
    inset:0;
    z-index:9999;
    pointer-events:none;
    background:repeating-linear-gradient(
      to bottom,
      color-mix(in oklab, var(--ink) 100%, transparent) 0 1px,
      transparent 1px 3px
    );
    filter:blur(.4px);
    opacity:.045;
  }
  .grained { background-image:var(--grain); background-size:200px 200px; }
  h1,h2,h3,h4,h5,h6 { margin:0; color:var(--ink); text-wrap:balance; }
  .t-hero { font-family:var(--font-display); font-weight:400; font-size:var(--t-hero);
    line-height:var(--lh-display); letter-spacing:var(--ls-display); text-transform:uppercase; }
  .t-display { font-family:var(--font-display); font-weight:400; font-size:var(--t-display);
    line-height:var(--lh-display); letter-spacing:var(--ls-display); }
  h1,.t-h1 { font-family:var(--font-display); font-weight:400; font-size:var(--t-h1);
    line-height:var(--lh-heading); letter-spacing:var(--ls-heading); }
  h2,.t-h2 { font-family:var(--font-sub); font-weight:700; font-size:var(--t-h2);
    line-height:var(--lh-heading); letter-spacing:var(--ls-heading); }
  h3,.t-h3 { font-family:var(--font-sub); font-weight:600; font-size:var(--t-h3); line-height:var(--lh-heading); }
  h4,.t-h4 { font-family:var(--font-sub); font-weight:600; font-size:var(--t-h4); line-height:var(--lh-tight); }
  p,.t-body { font-family:var(--font-body); font-size:var(--t-body); line-height:var(--lh-body);
    margin:0 0 var(--s-4); color:var(--ink); text-wrap:pretty; }
  .t-body-lg { font-size:var(--t-body-lg); } .t-body-sm { font-size:var(--t-body-sm); }
  .t-caption { font-size:var(--t-caption); color:var(--smoke); }
  .label,.t-label { font-family:var(--font-mono); font-size:var(--t-caption); text-transform:uppercase;
    letter-spacing:var(--ls-label); font-weight:700; color:var(--ink); }
  .mono,.t-mono,code,kbd,samp { font-family:var(--font-mono); font-size:0.94em; letter-spacing:var(--ls-mono); }
  .wordmark { display:inline-block; }
  .wordmark-name { display:block; }
  .weekend-edition { display:block; margin-top:4px; color:var(--smoke);
    font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.2em;
    line-height:1; text-transform:uppercase; }
  a { color:inherit; text-decoration:none; }
  ::selection { background:var(--mustard); color:var(--ink); }
  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; animation:none !important; }
  }
  /* Image boxes reserve their space via aspect-ratio (no layout shift); fade the
     photo in on load instead of popping. The .js gate means no-JS still shows them. */
  .js .framing-photo img, .js .story-cover .cover-img, .js .hero img { opacity:0;
    transition:opacity .5s var(--ease); }
  .js .framing-photo img.img-in, .js .story-cover .cover-img.img-in,
  .js .hero img.img-in { opacity:1; }
  a.nav-pending { opacity:.55; transition:opacity .15s ease; }
  @media (prefers-reduced-motion:no-preference) {
    a.story-card.nav-pending { animation:nav-pulse 1s ease-in-out .25s infinite; }
    @keyframes nav-pulse { 50% { opacity:.35; } }
  }
  @media print { body::after { display:none; } }