/* Shared across home, collections, and article readers. */
#site-header { --paper:#fff; --ink:#0409a6; --ink-soft:rgba(4,9,166,.55); --rule:1px solid #0409a6; --filter-row:24px; font:400 12.8px/1.6 "Helvetica Neue",Helvetica,Arial,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); }
#site-header *, #site-header *::before, #site-header *::after { box-sizing:border-box; }
#site-header [hidden] { display:none !important; }
#site-header .top { position:fixed; inset:0 0 auto; z-index:1001; display:flex; align-items:center; justify-content:space-between; height:40px; margin:0; padding:0 16px; background:#fff; color:#0409a6; font:inherit; letter-spacing:inherit; border:0; }
#site-header a, #site-header button, #site-header summary, #site-header span { font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; }
#site-header a { text-decoration:none; }
#site-header button { all:unset; font:inherit; color:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; }
#site-header .right { display:flex; align-items:center; gap:20px; margin:0 0 0 auto; }
#site-header .top a, #site-header .top button { display:inline-flex; align-items:center; min-height:40px; }
#site-header .shuffle-button { justify-content:center; width:20px; transition:transform 140ms cubic-bezier(.23,1,.32,1); }
#site-header .shuffle-button:active { transform:scale(.9); }
#site-header .shuffle-icon { display:block; width:16px; height:16px; overflow:visible; fill:none; stroke:currentColor; stroke-width:1.25; stroke-linecap:square; stroke-linejoin:miter; }
#site-header .top .mid { position:absolute; left:50%; transform:translateX(-50%); display:inline-flex; font:inherit; letter-spacing:.14em; }
#site-header .fpanel { position:fixed; top:40px; left:0; right:0; z-index:1000; max-height:0; overflow:hidden; background:#fff; font-size:11px; transition:none; }
#site-header .fpanel.open { max-height:calc(100svh - 40px); overflow-y:auto; }
#site-header .finner { border-top:var(--rule); border-bottom:var(--rule); }
#site-header .filter-primary { display:flex; flex-wrap:wrap; align-items:center; gap:16px; height:var(--filter-row); padding:0 16px; border-bottom:var(--rule); }
#site-header .filter-primary button { display:inline-flex; align-items:center; height:var(--filter-row); }
#site-header .fclose { margin-left:auto; }
#site-header .fcols,
#site-header [data-filter-context="read"] .fcols { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
#site-header .fcol { border-right:var(--rule); }
#site-header .fcol:last-child { border-right:0; }
#site-header .fhead { display:flex; align-items:center; height:var(--filter-row); padding:0 16px; border-bottom:var(--rule); }
#site-header .fopts { padding:0; }
#site-header .fcol .f,
#site-header .fopts > a,
#site-header .series-options summary,
#site-header .series-options a { display:flex; align-items:center; width:100%; height:var(--filter-row); padding:0 16px; line-height:1; }
#site-header .f { color:var(--ink-soft); }
#site-header .f.on { color:var(--ink); }
#site-header summary { list-style:none; cursor:pointer; }
#site-header summary::-webkit-details-marker { display:none; }
#site-header .series-options[open] summary { text-decoration:underline; text-underline-offset:3px; }
#site-header .series-options > div { padding-left:16px; }
#site-header a:focus-visible, #site-header button:focus-visible, #site-header summary:focus-visible { outline:2px solid #0409a6; outline-offset:2px; }
body:has(#site-header):not(:has(#grid)) { padding-top:40px; }
body:has(#site-header) .read-progress { top:40px; z-index:999; }
@media (hover:hover) and (pointer:fine) { #site-header a:hover, #site-header button:hover { text-decoration:underline; text-underline-offset:3px; } }
@media (max-width:720px) {
  #site-header .top { height:40px; padding:0 18px; font-size:12px; }
  #site-header .top .mid { position:static; left:auto; top:auto; transform:none; min-height:40px; white-space:nowrap; letter-spacing:.08em; }
  #site-header .right { gap:12px; }
  #site-header .fpanel { top:40px; }
  #site-header .fpanel.open { max-height:calc(100svh - 40px); }
  #site-header .fcols, #site-header [data-filter-context="read"] .fcols { grid-template-columns:1fr 1fr; }
  #site-header .fcol.is-spacer { display:none; }
  #site-header .fhead { padding-left:12px; padding-right:12px; }
  #site-header .fcol .f,
  #site-header .fopts > a,
  #site-header .series-options summary,
  #site-header .series-options a { padding-left:12px; padding-right:12px; }
  #site-header .filter-primary { gap:14px; padding:0 12px; }
  body:has(#site-header):not(:has(#grid)) { padding-top:40px; }
  body:has(#site-header) #grid { padding-top:40px; }
  body:has(#site-header) .read-progress { top:40px; }
}
