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; }
    .search-form { display:flex; gap:10px; padding:20px 18px;
      border-bottom:2px solid var(--ink); }
    .search-field { display:flex; flex:1; min-width:0; }
    .search-input { flex:1; min-width:0; min-height:48px; padding:8px 14px;
      border:3px solid var(--ink);
      background:var(--paper); color:var(--ink); font-family:var(--font-sub);
      font-size:17px; font-weight:600; border-radius:0; -webkit-appearance:none; }
    .search-input:focus-visible { outline:3px solid var(--pumpkin); outline-offset:3px; }
    .search-clear { min-width:48px; min-height:48px; margin-left:-3px; display:inline-flex;
      align-items:center; justify-content:center; border:3px solid var(--ink);
      background:var(--paper); color:var(--ink); font-family:var(--font-mono);
      font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
    .search-clear:focus-visible { outline:3px solid var(--pumpkin); outline-offset:3px; }
    .search-submit { min-height:48px; padding:8px 18px; border:3px solid var(--ink);
      background:var(--ink); color:var(--paper); cursor:pointer;
      font-family:var(--font-mono); font-size:11px; font-weight:700;
      letter-spacing:.16em; text-transform:uppercase; }
    .search-results { padding:20px 18px 8px; }
    .search-fallback { padding:20px 18px 8px; }
    .search-fallback > .story-meta { padding-left:0; padding-right:0; }
    .search-count { justify-content:flex-start; padding:0 0 12px; }
    .site-footer { margin-top:20px; padding:28px 18px 24px; 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; }
    .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 (max-width:420px) {
      .search-form { flex-wrap:wrap; }
      .search-field--active { flex:0 0 100%; }
      .search-field--active + .search-submit { margin-left:auto; }
    }
    @media (min-width:820px) {
      html, body { background:var(--bone); }
      .site-shell { width:min(100%, 1120px); border:3px solid var(--ink); }
      .site-header { padding:12px 32px 16px; }
      .search-form { padding:24px 32px; }
      .search-results { padding:28px 32px 16px; }
      .search-fallback { padding:28px 32px 16px; }
      .story-feed { display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
      .site-footer { padding:34px 32px 30px; }
    }