:root{
  --paper:#F6F8FA; --surface:#FFFFFF; --ink:#14213D; --ink-2:#4A5568; --rule:#D6DCE4;
  --red:#C8102E; --blue:#1F4FA3; --blue-tint:#E8EEF8; --stamp:#1F4FA3;
  --measure:72ch; --radius:6px;
  --font:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1626; --surface:#162036; --ink:#E8EDF5; --ink-2:#A9B4C6; --rule:#2B3A57;
    --red:#FF5A6E; --blue:#8DB0FF; --blue-tint:#1C2C4D; --stamp:#8DB0FF;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:1.0625rem;line-height:1.55;
  font-variation-settings:"wdth" 100}
.airmail{height:8px;background:repeating-linear-gradient(-45deg,var(--red) 0 12px,var(--paper) 12px 18px,
  var(--blue) 18px 30px,var(--paper) 30px 36px)}
a{color:var(--blue);text-underline-offset:.18em}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.site-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:18px 0 14px;border-bottom:1px solid var(--rule)}
.brand{font-weight:800;font-variation-settings:"wdth" 75;font-size:1.35rem;letter-spacing:.01em;color:var(--ink);text-decoration:none}
.site-head nav a{color:var(--ink-2);font-size:.95rem}
h1,h2,h3{font-variation-settings:"wdth" 72;line-height:1.08;margin:0}
.hero{padding:44px 0 28px;max-width:var(--measure)}
.hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem);font-weight:800;letter-spacing:-.005em}
.hero p{color:var(--ink-2);margin:14px 0 0;max-width:60ch}
.search{margin:26px 0 0;display:flex;flex-direction:column;gap:6px;max-width:640px}
.search label{font-weight:600;font-size:.95rem}
.search input{font:inherit;font-size:1.15rem;padding:14px 16px;border:2px solid var(--ink);border-radius:var(--radius);
  background:var(--surface);color:var(--ink);width:100%}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 6px;padding:0;list-style:none}
.filters button{font:inherit;font-size:.95rem;padding:7px 12px;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);color:var(--ink);cursor:pointer}
.filters button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.filters .count{opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.status{color:var(--ink-2);font-size:.95rem;margin:14px 0 8px;min-height:1.5em}
/* manifest: one line per tool */
.manifest{list-style:none;margin:0 0 56px;padding:0;border-top:2px solid var(--ink)}
.manifest li{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:18px;align-items:baseline;
  padding:16px 4px;border-bottom:1px solid var(--rule)}
.manifest li[hidden]{display:none}
.manifest .name{font-weight:700;font-size:1.12rem;text-decoration:none;color:var(--ink)}
.manifest .name:hover{color:var(--blue);text-decoration:underline}
.manifest .bf{display:block;color:var(--ink-2);font-size:.97rem;margin-top:2px}
.manifest .cat,.manifest .price{font-size:.92rem;color:var(--ink-2)}
.manifest .price{text-align:right}
.manifest .price.unsure{color:var(--ink)}
.manifest-head{display:grid;grid-template-columns:minmax(0,1fr) 190px 170px;gap:18px;padding:0 4px 6px;
  font-size:.85rem;color:var(--ink-2)}
.manifest-head span:last-child{text-align:right}
.empty{padding:28px 4px;border-bottom:1px solid var(--rule)}
.empty button{font:inherit;padding:6px 12px;border:1px solid var(--ink);border-radius:var(--radius);background:none;color:var(--ink);cursor:pointer}
/* tool page */
.crumbs{font-size:.95rem;color:var(--ink-2);padding:22px 0 0}
.tool{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;padding:22px 0 56px;align-items:start}
.tool h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:800}
.tool .catline{margin:10px 0 0;color:var(--ink-2)}
.tool .lede{font-size:1.15rem;max-width:var(--measure);margin:22px 0 0}
.facts{margin:28px 0 0;border-top:2px solid var(--ink);max-width:var(--measure)}
.facts div{display:grid;grid-template-columns:150px minmax(0,1fr);gap:16px;padding:14px 0;border-bottom:1px solid var(--rule)}
.facts dt{font-weight:600}
.facts dd{margin:0}
.facts .quote{display:block;margin-top:6px;color:var(--ink-2);font-size:.95rem}
.facts .note{display:block;margin-top:6px;font-size:.95rem}
.cta{display:inline-block;margin:28px 0 0;padding:13px 20px;background:var(--ink);color:var(--paper);text-decoration:none;
  font-weight:700;border-radius:var(--radius)}
.cta:hover{background:var(--blue)}
.cta-note{display:block;margin-top:8px;font-size:.9rem;color:var(--ink-2)}
/* postmark: the one bold element */
.postmark{width:200px;height:200px;border:3px solid var(--stamp);border-radius:50%;display:grid;place-items:center;
  text-align:center;color:var(--stamp);transform:rotate(-8deg);margin-top:8px;position:relative}
.postmark::before{content:"";position:absolute;inset:9px;border:1.5px dashed var(--stamp);border-radius:50%}
.postmark strong{display:block;font-variation-settings:"wdth" 70;font-size:1.65rem;line-height:1.05}
.postmark span{display:block;font-size:.85rem;max-width:130px;margin:6px auto 0;line-height:1.3}
.related{max-width:var(--measure);margin:0 0 56px}
.related h2{font-size:1.5rem;margin-bottom:10px}
.related ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--rule)}
.related li{padding:10px 0;border-bottom:1px solid var(--rule)}
.prose{max-width:var(--measure);padding:34px 0 56px}
.prose h1{font-size:clamp(2rem,4.6vw,3rem);font-weight:800;margin-bottom:18px}
.prose h2{font-size:1.45rem;margin:30px 0 8px}
.site-foot{border-top:1px solid var(--rule);padding:22px 0 40px;color:var(--ink-2);font-size:.92rem}
.site-foot p{margin:4px 0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .manifest-head{display:none}
  .manifest li{grid-template-columns:1fr;gap:4px}
  .manifest .price{text-align:left}
  .tool{grid-template-columns:1fr;gap:10px}
  .postmark{width:150px;height:150px;order:-1;margin:0 0 6px auto}
  .postmark strong{font-size:1.25rem}
  .facts div{grid-template-columns:1fr;gap:4px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}