body { overflow-x:hidden; }
    .site-shell { width:min(100%, 760px); min-height:100vh; margin:0 auto; background:var(--paper); }
    .site-header { display:flex; align-items:center; justify-content:space-between;
      padding:8px 18px 14px; border-bottom:3px solid var(--ink); }
    .wordmark { font-family:var(--font-sub); font-size:33px; font-weight:650; letter-spacing:-0.01em; line-height:1; }
    .menu-button { width:44px; height:44px; padding:0; display:grid; place-items:center;
      border:2px solid var(--ink); background:var(--paper); color:var(--ink); cursor:pointer; }
    .menu-button svg { width:22px; height:22px; }
    .header-actions { display:flex; gap:10px; }
    .filter-bar { display:flex; gap:8px;
      padding:10px 18px; overflow-x:auto; background:var(--paper);
      border-bottom:2px solid var(--ink); -webkit-overflow-scrolling:touch;
      scrollbar-width:none; }
    .filter-bar::-webkit-scrollbar { display:none; }
    .filter-chip { flex:none; min-height:36px; display:inline-flex; align-items:center;
      padding:6px 13px; border:2px solid var(--ink); background:var(--paper);
      color:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; }
    .filter-chip:focus-visible { outline:3px solid var(--pumpkin); outline-offset:3px; }
    .filter-chip[aria-current="page"] { color:var(--paper); }
    .filter-chip--all[aria-current="page"],
    .filter-chip--blindspot[aria-current="page"] { background:var(--ink); }
    .filter-chip--left[aria-current="page"] { background:var(--spec-left); }
    .filter-chip--center[aria-current="page"] { background:var(--spec-center); }
    .filter-chip--right[aria-current="page"] { background:var(--spec-right); color:var(--ink); }
    .lead { display:block; padding:22px 18px 8px; cursor:pointer; }
    .lead--consensus { background:linear-gradient(180deg,
      color-mix(in oklab, var(--mustard) 28%, var(--paper)) 0, var(--paper) 48%); }
    .lead-kicker { display:flex; gap:16px; margin-bottom:18px; padding-bottom:10px;
      border-bottom:2px solid var(--ink); font-family:var(--font-mono); font-size:10px;
      font-weight:700; letter-spacing:.16em; line-height:1.3; text-transform:uppercase; }
    .lead-kicker strong { color:var(--pumpkin-dark); }
    .lead-kicker span { color:var(--smoke); }
    .lead-title { margin:0 0 18px; font-family:var(--font-display); font-size:clamp(34px,9.7vw,52px);
      font-weight:400; letter-spacing:-.02em; line-height:.96; text-transform:uppercase; }
    .lead-cta { display:inline-flex; align-items:center; gap:8px; min-height:36px;
      margin:0 0 20px; padding:6px 13px; border:2px solid var(--ink); background:var(--paper);
      color:var(--ink); font-family:var(--font-mono); font-size:10px; font-weight:700;
      letter-spacing:.14em; text-transform:uppercase; }
    .lead-consensus { margin:-4px 0 20px; padding:12px 14px; border:3px solid var(--ink);
      background:var(--mustard); font-family:var(--font-sub); font-size:17px; font-weight:700;
      line-height:1.2; box-shadow:4px 4px 0 var(--ink); }
    .headline-accent { color:var(--pumpkin); }
    .framing-stack { display:flex; flex-direction:column; gap:11px; }
    .framing-card { border:3px solid var(--ink); background:var(--paper); }
    .framing-bar { display:flex; align-items:center; justify-content:space-between; padding:7px 13px;
      border-bottom:3px solid var(--ink); color:var(--paper); font-family:var(--font-mono);
      font-size:9.5px; font-weight:700; line-height:1.3; }
    .framing-label { letter-spacing:.16em; text-transform:uppercase; }
    .framing-card--left .framing-bar { background:var(--spec-left); }
    .framing-card--center .framing-bar { background:var(--spec-center); }
    .framing-card--right .framing-bar { background:var(--spec-right); color:var(--ink); }
    .framing-photo { position:relative; aspect-ratio:16/9; overflow:hidden;
      border-bottom:3px solid var(--ink); background:var(--paper-2); }
    .framing-photo img { display:block; width:100%; height:100%; object-fit:cover;
      filter:grayscale(1) contrast(1.06) brightness(1.07); }
    .framing-photo:not(.framing-photo--paywall)::before { content:""; position:absolute; inset:0;
      mix-blend-mode:multiply; opacity:.82; pointer-events:none; }
    .framing-photo:not(.framing-photo--paywall)::after { content:""; position:absolute; inset:0;
      background:var(--grain); background-size:180px 180px; mix-blend-mode:soft-light;
      opacity:.5; pointer-events:none; }
    .framing-card--left .framing-photo::before { background:var(--spec-left); }
    .framing-card--center .framing-photo::before { background:var(--spec-center); }
    .framing-card--right .framing-photo::before { background:var(--spec-right); }
    .framing-body { padding:12px 14px 13px; }
    .framing-head { margin:0; font-family:var(--font-sub); font-size:16px; font-weight:700;
      line-height:1.18; overflow-wrap:break-word; word-break:break-word; }
    .framing-head--silent { color:var(--smoke); }
    .framing-card--unquoted .framing-head { color:var(--smoke); }
    .framing-card--silent { background-image:repeating-linear-gradient(-45deg, transparent,
      transparent 8px, color-mix(in oklab, var(--ink) 8%, transparent) 8px,
      color-mix(in oklab, var(--ink) 8%, transparent) 10px); }
    .framing-card--silent .framing-bar { opacity:.6; }
    .coverage-compare { display:flex; align-items:center; justify-content:space-between;
      margin-top:16px; padding-top:12px; border-top:2px solid var(--ink); }
    .compare-label { color:var(--pumpkin-dark); font-family:var(--font-mono); font-size:10px;
      font-weight:700; letter-spacing:.14em; line-height:1.3; text-transform:uppercase;
      white-space:nowrap; }
    .feed-section { padding:20px 18px 8px; }
    .section-title { margin:0 0 16px; padding-bottom:12px; border-bottom:2px solid var(--ink);
      font-family:var(--font-display); font-size:28px; font-weight:400; letter-spacing:-.02em;
      line-height:1; }
    .story-card--commentary .story-meta strong { color:var(--ink); }
    .framing-photo--paywall { display:grid; place-items:center; gap:3px; background:var(--ink); }
    .paywall-mark { font-family:var(--font-display); font-size:40px; line-height:1; color:var(--mustard); }
    .paywall-note { font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.14em;
      text-transform:uppercase; color:var(--paper); opacity:.7; }
    .site-footer { margin-top:20px; padding:28px 18px 24px;
      padding-bottom:calc(24px + env(safe-area-inset-bottom));
      background:var(--ink); color:var(--paper); }
    .footer-label { margin-bottom:10px; color:var(--mustard); font-family:var(--font-mono);
      font-size:10px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
    .footer-email { color:var(--paper); font-family:var(--font-sub); font-size:21px; font-weight:600; }
    .footer-links { display:flex; flex-wrap:wrap; gap:18px; margin-top:20px;
      font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.16em;
      text-transform:uppercase; }
    .footer-links a { min-height:44px; display:inline-flex; align-items:center; color:var(--paper); }
    .footer-copy { margin-top:4px; padding-top:14px; border-top:2px solid var(--paper);
      font-family:var(--font-mono); font-size:9px; font-weight:700; letter-spacing:.18em;
      text-transform:uppercase; opacity:.65; }
    .lead:focus-visible, .menu-button:focus-visible {
      outline:3px solid var(--pumpkin); outline-offset:3px;
    }
    @media (hover:hover) {
      .footer-links a:hover, .footer-email:hover { color:var(--pumpkin); }
    }
    @media (min-width:820px) {
      /* Bone on the root too, so an overscroll bounce reveals one uniform colour
         (no paper/bone seam), and the shell is fully bordered so it reads as an
         intact object that slid, not a cut-open panel. */
      html, body { background:var(--bone); }
      .site-shell { width:min(100%, 1120px); border:3px solid var(--ink); }
      .site-header { padding:12px 32px 16px; }
      .filter-bar { padding-right:32px; padding-left:32px; }
      /* Lead: headline over a three-column framing triptych, using the width. */
      .lead { padding:30px 32px 16px; }
      .lead-title { font-size:clamp(48px, 5vw, 66px); max-width:20ch; margin-bottom:22px; }
      .lead .framing-stack { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
        align-items:stretch; }
      .lead .framing-card { display:flex; flex-direction:column; box-shadow:5px 5px 0 var(--ink); }
      .lead .framing-body { flex:1; }
      /* Feed: a real multi-column card grid, not a single column. */
      .feed-section { padding:28px 32px 16px; }
      .section-title { font-size:34px; }
      .story-feed { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
      .site-footer { padding:34px 32px 30px;
        padding-bottom:calc(30px + env(safe-area-inset-bottom)); }
    }