/* ZWOF Debrief — homepage layout.
   Extracted verbatim from design-reference/ZWOF_Debrief.html, which inlined it.
   These rules (.khero, .sec, .games, .news, .wrap) exist in neither app.css nor
   _zwof-chrome.css, so the homepage cannot be built without them.
   The page's base64 @font-face blocks were dropped: the same two faces now live
   as real files at _assets/fonts/, which is what app.css already points at. */

/* Licensed ABC Normal (Dinamo), Regular 400 + Medium 600, embedded self-contained. */



  :root{
    --ink:#16181c; --muted:#8a7f6b; --faint:#a89e88; --taupe:#5c554a;
    --bg:#efe8da; --paper:#faf9f5; --panel:#e7ded0; --line:#e2dacb; --line-d:#d5cbb7;
    --accent:#ed2a28; --accent-d:#b31217;
    --font:"ABC Normal","Hanken Grotesk",system-ui,-apple-system,sans-serif;
    --wide:74rem;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
  img{display:block;width:100%;height:auto}
  h1,h2,h3,h4{font-weight:600;letter-spacing:-.01em}
  .wrap{max-width:var(--wide);margin:0 auto;padding:0 24px}
  .btn{display:inline-block;font-weight:600;font-size:14px;letter-spacing:.01em;color:#fff;background:var(--accent);border:1px solid var(--accent);border-radius:3px;padding:10px 18px;cursor:pointer;font-family:inherit}
  .btn:hover{background:var(--accent-d);border-color:var(--accent-d)}
  .btn.ghost{background:transparent;color:var(--accent)}
  .btn.ghost:hover{background:var(--accent);color:#fff}
  .eyebrow.tag{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

  /* ---------- masthead ---------- */
  header.site{position:sticky;top:0;z-index:60;background:rgba(239,232,218,0.9);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
  header .row{max-width:var(--wide);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px}
  .brand{display:flex;align-items:center;gap:11px}
  .brand .mark{width:26px;height:21px;color:var(--accent);flex:0 0 auto}
  .brand .bt{display:flex;flex-direction:column;line-height:1.05}
  .brand .be{font-size:9.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
  .brand .bn{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
  nav.nav{display:flex;align-items:center;gap:22px}
  nav.nav a{font-size:14px;font-weight:500;color:var(--ink)}
  nav.nav a:hover{color:var(--accent)}
  nav.nav .netgroup{display:flex;align-items:center;gap:16px;padding-left:20px;margin-left:2px;border-left:1px solid var(--line)}
  nav.nav .net{font-size:12.5px;color:var(--muted);font-weight:500}
  nav.nav .net:hover{color:var(--accent)}
  .nav-cta{color:#fff}
  .hdr-burger{display:none;background:none;border:0;cursor:pointer;padding:4px 6px;font-size:22px;line-height:1;color:inherit}
  
  
  
  
  
  
  

  /* ---------- tagline bar ---------- */
  .tagbar{border-bottom:1px solid var(--line);background:var(--bg)}
  .tagbar .in{max-width:var(--wide);margin:0 auto;padding:11px 24px;font-size:13px;font-weight:500;color:var(--muted);letter-spacing:.01em}
  .tagbar .in b{color:var(--ink);font-weight:600}

  /* ---------- lead ---------- */
  .lead{padding:44px 0 8px}
  .lead-card{display:grid;grid-template-columns:1.12fr 1fr;gap:36px;align-items:center}
  .lead-card>*{min-width:0}
  .lead-card .lc-img{border-radius:4px;overflow:hidden;aspect-ratio:16/11;background:var(--panel)}
  .lead-card .lc-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
  .lead-card:hover .lc-img img{transform:scale(1.03)}
  .lead-card h1{font-size:clamp(1.9rem,4.1vw,2.7rem);line-height:1.09;margin:14px 0 14px}
  .lead-card:hover h1{color:var(--accent)}
  .lead-card .dek{font-size:1.12rem;color:#33363b;margin:0 0 18px}
  .lead-card .m{font-size:13px;color:var(--muted);margin:0 0 18px}
  .lead-card .rl{font-weight:600;font-size:14px;color:var(--accent)}
  /* ---------- Ken Burns hero ---------- */
  .khero{position:relative;height:clamp(380px,52vh,520px);border-radius:6px;overflow:hidden;background:#111;margin:34px 0 6px}
  .khero .ks{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;pointer-events:none}
  .khero .ks.on{opacity:1;pointer-events:auto}
  .khero .ks a{display:block;height:100%;color:#fff}
  .khero .kbi{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.03)}
  .khero .ks.on .kbi{transform:scale(1.13);transition:transform 8s ease}
  .khero .kgrad{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,0.82) 0%,rgba(0,0,0,0.30) 46%,rgba(0,0,0,0) 74%)}
  .khero .kt{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,4vw,46px);max-width:770px}
  .khero .klabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#fff;opacity:.85;font-weight:600;margin:0 0 9px}
  .khero h1{font-size:clamp(1.7rem,3.4vw,2.75rem);line-height:1.08;margin:0 0 12px;color:#fff}
  .khero .kdek{font-size:clamp(1rem,1.25vw,1.16rem);color:rgba(255,255,255,0.92);margin:0 0 12px}
  .khero .kby{font-size:12.5px;color:rgba(255,255,255,0.72);margin:0 0 15px}
  .khero .kby .mname{color:#fff;font-weight:600;border-bottom:1px solid transparent}
  .khero .kby .mname:hover{border-bottom-color:rgba(255,255,255,0.6);color:#fff}
  .khero .krl{font-weight:600;font-size:14px;color:#fff}
  .khero .kdots{position:absolute;top:15px;right:18px;display:flex;gap:7px;z-index:2}
  .khero .kdots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,0.45);cursor:pointer;padding:0;transition:background .2s,width .2s}
  .khero .kdots button.on{background:#fff;width:22px;border-radius:4px}
  @media(max-width:620px){.khero{height:auto;min-height:430px}.khero h1{font-size:1.55rem}}

  /* ---------- sections + cards ---------- */
  .sec{padding:40px 0;scroll-margin-top:90px}
  .khero{scroll-margin-top:90px}
  .sec-head{display:flex;align-items:center;justify-content:space-between;gap:16px 20px;margin:0 0 24px;padding-bottom:12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .sec-head h2{font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:600;margin:0}
  .sec-head .all{font-size:13px;font-weight:600;color:var(--accent)}
  .secsearch{display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:7px 12px;width:min(280px,100%);transition:border-color .15s}
  .secsearch:focus-within{border-color:var(--accent)}
  .secsearch .si{width:15px;height:15px;fill:var(--muted);flex:none}
  .secsearch input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);outline:none}
  .secsearch input::placeholder{color:var(--muted)}
  .secsearch .clr{border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0 2px}
  .secsearch .clr:hover{color:var(--accent)}
  .cards{display:grid;gap:28px}
  .cards.two{grid-template-columns:1fr 1fr}
  .cards.three{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
  /* ---------- games strip ---------- */
  .games .sec-head h2 .ghint{font-size:.92rem;font-weight:400;font-style:italic;color:var(--muted);margin-left:10px;letter-spacing:0;text-transform:none}
  .gamegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:6px}
  .gcard{display:flex;align-items:center;gap:16px;padding:17px 20px;border:1px solid var(--line);border-radius:8px;background:var(--paper);transition:border-color .15s,transform .15s}
  .gcard:hover{border-color:var(--accent);transform:translateY(-2px)}
  .gicon{width:52px;height:52px;flex:none}
  .gicon svg{width:52px;height:52px;display:block}
  .gtx{display:flex;flex-direction:column;min-width:0}
  .gn{font-size:1.16rem;font-weight:600;line-height:1.2}
  .gcard:hover .gn{color:var(--accent)}
  .gd{font-size:13px;color:var(--muted);margin-top:2px}
  @media(max-width:760px){.gamegrid{grid-template-columns:1fr}}
  /* ---------- region sections ---------- */
  .regsec{margin-top:12px;padding-top:36px;border-top:1px solid var(--line)}
  .regsec:first-of-type{border-top:0;padding-top:4px}
  .regsec .card.hx{display:none}
  /* phone + tablet: each region becomes a left-to-right swipe row */
  @media(max-width:900px){
    .regsec .cards.three{
      display:flex;flex-wrap:nowrap;overflow-x:auto;
      scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      gap:14px;padding-bottom:8px;scrollbar-width:none;
    }
    .regsec .cards.three::-webkit-scrollbar{display:none}
    .regsec .cards.three>.card{flex:0 0 46%;min-width:0;scroll-snap-align:start}
    .regsec .cards.three>.card .th{aspect-ratio:16/10}
  }
  @media(max-width:620px){
    .regsec .cards.three>.card{flex:0 0 80%}
  }
  .regh{display:flex;align-items:center;gap:13px;font-size:1.78rem;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:0 0 22px}
  .regh::before{content:"";width:5px;align-self:stretch;min-height:1.1em;background:var(--accent);border-radius:3px;flex:none}
  /* swipe arrows (mobile/tablet only; hidden until the row is scrollable) */
  .reghead{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 22px}
  .reghead .regh{margin:0}
  .cnav{display:none;gap:8px;flex:none}
  .cnav.on{display:flex}
  .cbtn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s,color .15s,opacity .15s}
  .cbtn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .cbtn:hover{border-color:var(--accent);color:var(--accent)}
  .cbtn:disabled{opacity:.3;cursor:default;border-color:var(--line);color:var(--ink)}
  .morewrap{margin-top:24px;text-align:center}
  .viewall{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#fff;border:1px solid var(--ink);background:var(--ink);border-radius:6px;padding:10px 22px;transition:border-color .15s,color .15s,background .15s}
  .viewall:hover{background:var(--accent);border-color:var(--accent);color:#fff}
  .viewall span{transition:transform .15s}
  .viewall:hover span{transform:translateX(3px)}
  .card .th{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--panel)}
  .card .th img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
  .card:hover .th img{transform:scale(1.03)}
  .card .tag{display:inline-block;margin:14px 0 8px}
  .card h3{font-size:1.35rem;line-height:1.2;margin:0 0 8px}
  .card:hover h3{color:var(--accent)}
  .card .m{font-size:12.5px;color:var(--muted)}
  .card .m .mname,.lead-card .m .mname{color:var(--ink);font-weight:600;cursor:pointer;border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
  .card .m .mname:hover,.lead-card .m .mname:hover{color:var(--accent);border-bottom-color:var(--accent)}

  /* ---------- interview ---------- */
  .interview{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}
  .interview .th{position:relative;aspect-ratio:16/10}
  .interview .th img{width:100%;height:100%;object-fit:cover}
  .interview .play{position:absolute;inset:0;display:grid;place-items:center}
  .interview .play span{width:58px;height:58px;border-radius:3px;background:rgba(225,37,27,0.94);display:grid;place-items:center}
  .interview .play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
  .interview .tx{padding:26px 30px 26px 4px}
  .interview .tx h3{font-size:1.5rem;line-height:1.16;margin:10px 0 12px}
  .interview .tx p{color:#3b3e43;margin:0 0 18px}

  /* ---------- newsletter ---------- */
  .news{margin:8px 0;background:var(--ink);color:#fff;border-radius:12px;padding:44px 40px;text-align:center}
  .news .k{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c99;margin:0 0 12px}
  .news h2{color:#fff;font-size:clamp(1.5rem,3.4vw,2rem);margin:0 0 10px}
  .news p{color:#c7ccd2;max-width:34rem;margin:0 auto 22px}
  .news .form{display:flex;gap:10px;max-width:26rem;margin:0 auto;flex-wrap:wrap;justify-content:center}
  .news input{flex:1 1 15rem;border:1px solid #3a3f47;background:#22252b;color:#fff;border-radius:3px;padding:12px 14px;font-size:15px;font-family:inherit}
  .news input::placeholder{color:#8b8e93}
  .news button{border:0;background:#fff;color:var(--ink);font-weight:600;font-size:15px;border-radius:3px;padding:12px 20px;cursor:pointer;font-family:inherit}

  /* ---------- cross-cta ---------- */
  .cta{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .cta .c{border:1px solid var(--line);border-radius:10px;padding:28px}
  .cta .c .k{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
  .cta .c h3{font-size:1.3rem;margin:0 0 8px}
  .cta .c p{color:#3b3e43;margin:0 0 18px}

  /* ---------- footer ---------- */
  footer.site{border-top:1px solid var(--line);margin-top:46px;background:var(--paper)}
  .fwrap{max-width:var(--wide);margin:0 auto;padding:48px 24px 30px}
  .fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:30px}
  .fcol h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 14px}
  .fcol a{display:block;font-size:13.5px;color:#3b3e43;padding:5px 0}
  .fcol a:hover{color:var(--accent)}
  .fbrand .brand{margin-bottom:14px}
  .fbrand p{font-size:13px;color:var(--muted);max-width:22rem;margin:0}
  .fbot{max-width:var(--wide);margin:0 auto;padding:20px 24px 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:32px;font-size:12.5px;color:var(--muted)}
  .fbot-links a{margin-left:18px;color:var(--muted)}
  .fbot-links a:hover{color:var(--accent)}

  @media (max-width:900px){
    nav.nav{display:none}nav.nav.open{display:flex!important;flex-basis:100%;width:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:12px 0 4px}.row{flex-wrap:wrap}
    .hdr-burger{display:inline-flex!important;align-items:center}
    .lead-card.interview.cta{grid-template-columns:1fr}
    .cards.two{grid-template-columns:1fr}
    .interview{grid-template-columns:1fr}
    .interview .tx{padding:0 26px 26px}
    .footer__inner{padding-left:24px;padding-right:24px}
    .fg{grid-template-columns:1fr 1fr}
    .fbrand{grid-column:1 / -1}
  }
  @media (max-width:520px){
    .fg{grid-template-columns:1fr 1fr}
    .news{padding:34px 22px}
    .secsearch input{font-size:16px}
  }
  .searchwrap{max-width:var(--wide);margin:0 auto;padding:0 24px}
  .searchwrap .sb{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:12px 16px;max-width:560px;margin:2px 0 30px;transition:border-color .15s}
  .searchwrap .sb:focus-within{border-color:var(--accent)}
  .searchwrap .si{width:18px;height:18px;fill:var(--muted);flex:none}
  .searchwrap input{flex:1;border:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);outline:none}
  .searchwrap input::placeholder{color:var(--muted)}
  .searchwrap .clr{border:0;background:transparent;color:var(--muted);font-size:22px;line-height:1;cursor:pointer;padding:0 4px}
  .searchwrap .clr:hover{color:var(--accent)}
  .ctags{display:flex;flex-wrap:nowrap;gap:6px;margin:13px 0 9px;
    /* Scrolls rather than clips. The fade says "there is more"; before this the
       row did not move, so what the fade covered was simply unreachable. One
       line still, so titles in a grid row start at the same height.

       The scrollbar is hidden on purpose: shown, it adds height to every card
       on the page and puts a grey bar under six chips. overscroll-behavior
       keeps a flick at the end of the row from scrolling the page with it. */
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .ctags::-webkit-scrollbar{display:none}
  .ctags .tag{white-space:nowrap;flex:none}
  .ctags .tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:3px;padding:3px 10px;cursor:pointer;transition:border-color .15s,color .15s}
  .ctags .tag:hover{border-color:var(--accent);color:var(--accent)}
  .ctags .tag.ev{color:var(--accent-d);background:var(--panel)}
  .noresults{color:var(--muted);font-size:1rem;padding:22px 0}
  .noresults .lnk{border:0;background:transparent;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;padding:0}
  .lstory{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
  .lead-card .ctags{margin-top:14px}

@media(min-width:768px){body{padding-top:150px!important}} @media(max-width:767px){body{padding-top:0!important}}

/* === ZWOF menu -> side drawer (overrides full-screen overlay) === */
.header__menu--mobile.zwof-menu{inset:auto!important;top:0!important;right:0!important;bottom:0!important;left:auto!important;width:min(87vw,440px)!important;height:100%!important;transform:translateX(100%)!important;transition:transform .34s cubic-bezier(.4,0,.2,1)!important;box-shadow:-16px 0 46px rgba(0,0,0,.22);gap:clamp(20px,3.2vh,34px)!important;padding:clamp(20px,3vh,30px) clamp(22px,4vw,34px)!important;overflow-y:auto;z-index:100000!important}
#zwof-menu-cb:checked ~ .header__menu--mobile.zwof-menu{transform:translateX(0)!important}
.zwof-menu__link{font-size:clamp(1.45rem,4.6vw,1.95rem)!important}
.zwof-menu__link:hover{transform:translateX(8px)!important}
.zwof-menu-scrim{position:fixed;inset:0;z-index:99999;background:rgba(16,16,16,.5);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility .3s ease;margin:0;border:0;padding:0;cursor:pointer}
#zwof-menu-cb:checked ~ .zwof-menu-scrim{opacity:1;visibility:visible;pointer-events:auto}

/* Live search results. Anchored under the box in the section head; the form
   still submits to /search, so this is enhancement rather than the mechanism. */
.sec-head .secsearch{position:relative;overflow:visible}
.sec-head{position:relative}
.searchpanel{position:absolute;z-index:60;right:0;top:calc(100% + 8px);width:min(460px,92vw);
  background:var(--panel,#faf9f5);border:1px solid var(--line,#e2dacb);border-radius:12px;
  box-shadow:0 18px 44px rgba(24,24,24,.16);overflow:hidden;max-height:70vh;overflow-y:auto;text-align:left}
.sp-group{padding:10px 0;border-bottom:1px solid var(--line,#e2dacb)}
.sp-group:last-of-type{border-bottom:0}
.sp-group h4{margin:0 14px 6px;font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted,#8a7f6b)}
.sp-row{display:flex;gap:12px;align-items:baseline;justify-content:space-between;
  padding:7px 14px;text-decoration:none;color:inherit}
.sp-row:hover{background:rgba(0,0,0,.04)}
.sp-t{font-size:14px;font-weight:500;line-height:1.35}
.sp-s{font-size:12px;color:var(--muted,#8a7f6b);flex:none;max-width:42%;text-align:right}
.sp-none{margin:0;padding:4px 14px;font-size:13px;color:var(--muted,#8a7f6b)}
.sp-all{display:block;padding:10px 14px;font-size:12.5px;font-weight:600;text-decoration:none;
  color:var(--accent,#ed2a28);background:var(--sub,#f3eee3)}

/* ── The newsletter signup ────────────────────────────────────────────────
   The form styles above this were designed and never wired up; these are the
   parts that were missing. On the dark panel, so the colours are its own. */

/* Visually hidden, still read aloud. A placeholder is not a label: it vanishes
   the moment somebody types, and a screen reader gets nothing. */
.news .vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.news .says{font-size:14px;margin:14px auto 0;max-width:26rem;flex-basis:100%}
.news .says.on{color:#9fd8a8}
.news .says.bad{color:#ffa39c}
.news .fine{font-size:12.5px;color:#8b8e93;margin:14px auto 0;max-width:26rem}

/* While the request is in flight. Disabled rather than hidden, so the button
   does not move and nobody clicks twice. */
.news button[disabled]{opacity:.55;cursor:default}

/* ── The archive filters ───────────────────────────────────────────────────
   The same controls the region pages carry, so the two pages behave the same
   way; the rules are duplicated rather than shared because the two stylesheets
   are loaded independently and neither page pulls the other's.

   Edition is the extra one. This page spans every edition and the region pages
   rarely hold more than one, so it is the question only this page can answer. */
.filters{display:flex;align-items:center;gap:14px 22px;flex-wrap:wrap;margin:0 0 26px}
.fgroup{display:flex;align-items:center;gap:9px}
.flabel{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:600;flex:none}
.fsel{font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4.2l4 4 4-4' fill='none' stroke='%23999' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 13px center;
  border:1px solid var(--line);border-radius:7px;padding:9px 38px 9px 14px;cursor:pointer;
  -webkit-appearance:none;appearance:none;min-width:180px;transition:border-color .12s}
.fsel:hover{border-color:var(--accent)}
.fsel:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(0,0,0,.04)}

/* Only shown once something is actually filtered, so the default view carries
   no control that does nothing. */
.fclear{font:inherit;font-size:13px;font-weight:600;color:var(--accent);background:none;
  border:0;padding:9px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.fclear:hover{color:var(--ink)}

/* What the filters found. Without it a short result reads as a broken page
   rather than as a narrow one. */
.fcount{font-size:13px;color:var(--muted);margin:0 0 18px}

@media (max-width:760px){
  .filters{gap:10px 14px}
  .fgroup{width:100%}
  .fsel{flex:1;min-width:0}
}