/* ---------- tokens ---------- */
:root{
  --bg:#f5f7f9; --bg-2:#ffffff; --ink:#0e1620; --ink-2:#4a5765; --ink-3:#7b8794;
  --line:#e2e7ec; --line-2:#d3dae1;
  --accent:#0f7b6c; --accent-2:#1f9e8b; --accent-soft:#e2f4f0;
  --violet:#5b5bd6; --gold:#b8860b;
  --card:#ffffff; --card-hover:#ffffff;
  --shadow:0 1px 2px rgba(14,22,32,.05), 0 8px 24px -12px rgba(14,22,32,.18);
  --shadow-lg:0 2px 4px rgba(14,22,32,.06), 0 18px 40px -18px rgba(14,22,32,.28);
  --radius:16px; --wrap:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1116; --bg-2:#0f171e; --ink:#eaf1f6; --ink-2:#a4b3c0; --ink-3:#75838f;
    --line:#1d2831; --line-2:#28353f;
    --accent:#4fd1b5; --accent-2:#7ce0c8; --accent-soft:#0f2b28;
    --violet:#9b8cff; --gold:#e0b64a;
    --card:#111a21; --card-hover:#14202a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
    --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 22px 48px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0b1116; --bg-2:#0f171e; --ink:#eaf1f6; --ink-2:#a4b3c0; --ink-3:#75838f;
  --line:#1d2831; --line-2:#28353f;
  --accent:#4fd1b5; --accent-2:#7ce0c8; --accent-soft:#0f2b28;
  --violet:#9b8cff; --gold:#e0b64a;
  --card:#111a21; --card-hover:#14202a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  --shadow-lg:0 2px 6px rgba(0,0,0,.45), 0 22px 48px -20px rgba(0,0,0,.9);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px; line-height:1.55; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.wrap{width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto}
a{color:inherit}
button{font:inherit; color:inherit}
h1,h2,h3{line-height:1.15; margin:0}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px; border-radius:6px}

/* ---------- aurora backdrop ---------- */
.aurora{position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  mask-image:linear-gradient(to bottom, #000 0, #000 55vh, transparent 88vh)}
.aurora span{position:absolute; display:block; border-radius:50%; filter:blur(70px); opacity:.35}
.aurora span:nth-child(1){width:52vw;height:34vw;left:-8vw;top:-14vw;background:radial-gradient(circle,#2fbfa4,transparent 68%)}
.aurora span:nth-child(2){width:44vw;height:30vw;right:-6vw;top:-10vw;background:radial-gradient(circle,#5b6bd6,transparent 68%)}
.aurora span:nth-child(3){width:38vw;height:26vw;left:36vw;top:6vw;background:radial-gradient(circle,#8ad46a,transparent 70%);opacity:.22}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .aurora span{opacity:.28}}
:root[data-theme="dark"] .aurora span{opacity:.28}
@media (prefers-reduced-motion: no-preference){
  .aurora span{animation:drift 26s ease-in-out infinite alternate}
  .aurora span:nth-child(2){animation-duration:34s}
  .aurora span:nth-child(3){animation-duration:42s}
}
@keyframes drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(4vw,3vw,0) scale(1.12)}}

/* ---------- hero ---------- */
.hero{padding:2rem 0 2.25rem}
.hero-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:2.5rem}
.kicker{margin:0; font-size:.75rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.icon-btn{background:var(--card); border:1px solid var(--line); border-radius:999px; width:38px;height:38px;
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow); transition:.2s}
.icon-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.icon-btn .moon{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .icon-btn .sun{display:none} :root:not([data-theme="light"]) .icon-btn .moon{display:block}}
:root[data-theme="dark"] .icon-btn .sun{display:none}
:root[data-theme="dark"] .icon-btn .moon{display:block}

h1{font-family:"Instrument Serif",Georgia,serif; font-weight:400; letter-spacing:-.02em;
  font-size:clamp(2.9rem, 8vw, 5.4rem)}
h1 em{font-style:italic; background:linear-gradient(100deg,var(--accent),var(--violet)); -webkit-background-clip:text; background-clip:text; color:transparent}
.lede{max-width:62ch; color:var(--ink-2); font-size:clamp(1rem,1.6vw,1.125rem); margin:1rem 0 2rem}

.search-wrap{position:relative; max-width:640px}
.search-wrap .search-icon{position:absolute; left:1.05rem; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
#search{
  width:100%; padding:1.05rem 5rem 1.05rem 3.1rem; font-size:1.02rem;
  background:var(--card); color:var(--ink);
  border:1px solid var(--line-2); border-radius:999px; box-shadow:var(--shadow); transition:.2s;
}
#search::placeholder{color:var(--ink-3)}
#search:focus{outline:none; border-color:var(--accent); box-shadow:var(--shadow-lg), 0 0 0 4px var(--accent-soft)}
#search::-webkit-search-cancel-button{display:none}
.slash{position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); color:var(--ink-3);
  border:1px solid var(--line-2); border-radius:6px; padding:.05rem .45rem; font-size:.78rem; font-family:inherit}
#search:focus ~ .slash{opacity:0}
.clear{position:absolute; right:.85rem; top:50%; transform:translateY(-50%); background:var(--line);
  border:0; border-radius:999px; width:28px;height:28px; font-size:1.1rem; line-height:1; cursor:pointer; color:var(--ink-2)}
.clear:hover{background:var(--accent); color:#fff}

.toggles{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem}
.pill{display:inline-flex; align-items:center; gap:.45rem; padding:.5rem .95rem; border-radius:999px;
  background:var(--card); border:1px solid var(--line); cursor:pointer; font-size:.875rem; font-weight:500;
  text-decoration:none; transition:.18s}
.pill:hover{border-color:var(--accent); color:var(--accent)}
.pill[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
.pill[aria-pressed="true"] .dot{background:#fff}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.pill .star{color:var(--gold)}
.pill[aria-pressed="true"] .star{color:#fff}
.pill .count{opacity:.65; font-variant-numeric:tabular-nums}
.pill.ghost{background:transparent}
.hint{margin:.85rem 0 0; font-size:.82rem; color:var(--ink-3)}
.hint .star{color:var(--gold)}
.hint strong{color:var(--ink-2); font-weight:600}

/* ---------- facts strip ---------- */
.facts{margin:2.5rem 0 1rem}
.facts ul{list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
  grid-template-columns:repeat(2,1fr)}
@media (min-width:600px){.facts ul{grid-template-columns:repeat(4,1fr)}}
.facts li{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:.7rem .9rem}
.facts .k{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink-3)}
.facts .v{display:block; font-weight:600; font-size:1.05rem; color:var(--accent)}
.facts .d{display:block; font-size:.78rem; color:var(--ink-2); margin-top:.1rem}

/* ---------- category chips ---------- */
.filters{padding:.8rem 0;
  background:color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line)}
/* the whole set of categories is visible at once, wrapping over as many lines as it needs */
.chips{display:flex; flex-wrap:wrap; gap:.45rem}
/* only stick to the top where the wrapped block stays short enough not to swallow the screen */
@media (min-width:1100px){
  .filters{position:sticky; top:0; z-index:20}
}
.chip{white-space:nowrap; display:inline-flex; align-items:center; gap:.4rem; padding:.42rem .8rem;
  border-radius:999px; border:1px solid var(--line); background:var(--card); cursor:pointer;
  font-size:.83rem; font-weight:500; transition:.16s}
.chip:hover{border-color:var(--accent); color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.chip .n{font-variant-numeric:tabular-nums; opacity:.55; font-size:.76rem}

/* ---------- results ---------- */
.status{color:var(--ink-3); font-size:.82rem; margin:1.5rem 0 .25rem; letter-spacing:.01em}
.cat{margin:2.4rem 0 0; scroll-margin-top:4.5rem}
.cat-head{display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; padding-bottom:.2rem}
.cat-head h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(1.6rem,3.4vw,2.1rem); letter-spacing:-.01em}
.cat-head .ico{font-size:1.3rem}
.cat-head .n{font-size:.75rem; color:var(--ink-3); font-variant-numeric:tabular-nums;
  border:1px solid var(--line); border-radius:999px; padding:.05rem .5rem}
.cat-blurb{color:var(--ink-2); max-width:70ch; margin:.35rem 0 1.1rem; font-size:.92rem}

.grid{display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.card{position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.05rem 1.1rem 1rem; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.card:hover{transform:translateY(-2px); border-color:var(--line-2); box-shadow:var(--shadow-lg); background:var(--card-hover)}
.card-head{display:flex; align-items:center; gap:.65rem; margin-bottom:.5rem; padding-right:2rem}
.mono{flex:0 0 auto; width:34px;height:34px;border-radius:10px; display:grid;place-items:center;
  font-weight:700; font-size:.95rem; color:#fff; letter-spacing:-.02em}
.card h3{font-size:1rem; font-weight:600; letter-spacing:-.01em}
.card h3 a{text-decoration:none}
.card h3 a::after{content:""; position:absolute; inset:0; border-radius:var(--radius)}
.card h3 a:hover{color:var(--accent)}
.host{display:block; font-size:.73rem; color:var(--ink-3); margin-top:.05rem}
.card p{margin:0 0 .7rem; font-size:.875rem; color:var(--ink-2); line-height:1.5}
.tags{display:flex; flex-wrap:wrap; gap:.3rem; list-style:none; margin:0; padding:0}
.tags li{font-size:.7rem; color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:.05rem .48rem}
.tags li.in-cat{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 35%, transparent); font-weight:500}
.badge{position:absolute; top:-.55rem; left:1rem; font-size:.63rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; background:var(--accent); color:#fff; padding:.16rem .5rem; border-radius:999px}
.fav{position:absolute; top:.7rem; right:.7rem; z-index:2; width:30px;height:30px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); cursor:pointer; color:var(--ink-3); font-size:1.05rem; line-height:1; transition:.15s}
.fav:hover{color:var(--gold); border-color:var(--gold); transform:scale(1.08)}
.fav[aria-pressed="true"]{color:var(--gold); border-color:color-mix(in srgb, var(--gold) 45%, transparent)}
mark{background:linear-gradient(transparent 55%, color-mix(in srgb, var(--accent) 35%, transparent) 0); color:inherit; padding:0 .05em; border-radius:2px}
.empty{text-align:center; color:var(--ink-2); padding:4rem 1rem; font-size:1rem}

/* ---------- checklist ---------- */
.checklist{margin:4.5rem 0 1rem; scroll-margin-top:4.5rem}
.checklist h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:clamp(1.9rem,4vw,2.6rem)}
.section-lede{color:var(--ink-2); max-width:62ch; margin:.5rem 0 1.5rem}
.checklist ol{list-style:none; counter-reset:step; margin:0; padding:0; display:grid; gap:.6rem}
.checklist li{counter-increment:step; position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:1rem 1.1rem 1rem 3.4rem}
.checklist li::before{content:counter(step,decimal-leading-zero); position:absolute; left:1.1rem; top:1rem;
  font-size:.78rem; font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums}
.checklist .when{display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--violet); margin-bottom:.2rem}
.checklist h3{font-size:.98rem; font-weight:600; margin-bottom:.2rem}
.checklist p{margin:0 0 .45rem; font-size:.87rem; color:var(--ink-2)}
.checklist a.go{font-size:.8rem; font-weight:500; color:var(--accent); text-decoration:none}
.checklist a.go:hover{text-decoration:underline}

/* ---------- suggest dialog ---------- */
dialog{border:none; padding:0; background:transparent; color:var(--ink)}
dialog::backdrop{background:rgba(6,10,14,.62); backdrop-filter:blur(3px)}
#suggestDialog form{
  width:min(94vw,520px); max-height:88vh; overflow:auto;
  background:var(--card); border:1px solid var(--line-2); border-radius:20px;
  padding:1.5rem 1.5rem 1.35rem; box-shadow:var(--shadow-lg);
  font-family:inherit; color:var(--ink);
}
.dlg-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.dlg-head h2{font-family:"Instrument Serif",Georgia,serif; font-weight:400; font-size:1.85rem; letter-spacing:-.01em}
.dlg-close{background:transparent; border:0; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--ink-3); padding:0 .15rem}
.dlg-close:hover{color:var(--ink)}
.dlg-lede{color:var(--ink-2); font-size:.88rem; margin:.4rem 0 1.15rem}
#suggestDialog label{display:block; font-size:.8rem; font-weight:600; margin:.9rem 0 .3rem}
#suggestDialog .req,#suggestDialog .opt{font-weight:400; font-size:.72rem; color:var(--ink-3); margin-left:.3rem}
#suggestDialog .req{color:var(--accent)}
#suggestDialog input,#suggestDialog select,#suggestDialog textarea{
  width:100%; padding:.62rem .8rem; font:inherit; font-size:.92rem; color:var(--ink);
  background:var(--bg); border:1px solid var(--line-2); border-radius:10px}
#suggestDialog textarea{resize:vertical; min-height:70px}
#suggestDialog input:focus,#suggestDialog select:focus,#suggestDialog textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.dlg-error{margin:.9rem 0 0; font-size:.82rem; color:#e05252; font-weight:500}
.dlg-actions{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.3rem}
.btn{flex:1 1 auto; padding:.6rem 1rem; border-radius:999px; border:1px solid var(--line-2);
  background:var(--bg); cursor:pointer; font-size:.87rem; font-weight:500; transition:.16s; white-space:nowrap}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.primary:hover{filter:brightness(1.08); color:#fff}
.btn.wide{flex:1 1 100%; padding:.72rem 1rem; font-size:.92rem; font-weight:600}
.dlg-foot{margin:.9rem 0 0; font-size:.76rem; color:var(--ink-3); line-height:1.5}
.linkbtn{background:none; border:0; padding:0; cursor:pointer; color:var(--accent); font:inherit; text-decoration:underline}

/* ---------- footer ---------- */
footer{margin-top:5rem; padding:2.5rem 0 3.5rem; border-top:1px solid var(--line); background:var(--bg-2)}
footer p{margin:0 0 .6rem}
footer .small{font-size:.82rem; color:var(--ink-3); max-width:75ch}
footer a{color:var(--accent)}

@media (max-width:640px){
  /* tighter chips so the full category list still fits without dominating the screen */
  .chips{gap:.35rem}
  .chip{padding:.34rem .6rem; font-size:.78rem}
  .chip .n{font-size:.7rem}
  .hero{padding-top:1.2rem}
  .hero-top{margin-bottom:1.6rem}
  .grid{grid-template-columns:1fr}
  #search{padding:.95rem 3rem .95rem 2.9rem}
  .slash{display:none}
}
@media print{
  .aurora,.filters,.toggles,.search-wrap,.fav,.icon-btn,.facts{display:none}
  .card{break-inside:avoid; box-shadow:none}
  body{background:#fff}
}