:root{
  --paper:#FAF7F2; --ink:#1C2129; --ink-2:#4A5261; --ink-3:#8B94A3;
  --line:#E4DED3; --line-soft:#EEE9DF;
  --blue:#2456A6; --blue-ink:#1B4183; --bar:#2456A6; --bar-track:#EFEAE0;
  --tag-bg:#E7EFDD; --tag-ink:#3D5A28; --warn:#8A5A16; --warn-bg:#F5EAD4;
  --card:#FFFFFF;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141922; --ink:#E9ECF2; --ink-2:#A7AFBE; --ink-3:#6E7787;
    --line:#2A3242; --line-soft:#212836;
    --blue:#7FA8E0; --blue-ink:#9FBFEA; --bar:#4E86DC; --bar-track:#1E2534;
    --tag-bg:#25301C; --tag-ink:#A8C88A; --warn:#D9A85B; --warn-bg:#2E2717;
    --card:#1A202C;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:16px/1.55 "Instrument Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1480px;margin:0 auto;padding:0 24px}

/* ── Header ─────────────────────────────── */
header{padding:64px 0 40px;border-bottom:2px solid var(--ink)}
.kicker{
  display:flex;gap:12px;align-items:center;
  font:500 12px/1 "Spline Sans Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--blue);flex:none}
h1{
  font:600 clamp(38px,6vw,64px)/1.04 "Fraunces",serif;
  letter-spacing:-.015em;margin:20px 0 14px;max-width:15ch;
}
h1 em{font-style:italic;color:var(--blue-ink)}
.lede{max-width:56ch;color:var(--ink-2);margin:0 0 26px;font-size:17px}
.meta-row{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;font:400 13px "Spline Sans Mono",monospace;color:var(--ink-2)}
.meta-row b{color:var(--ink);font-weight:500}

/* ── Controls ───────────────────────────── */
.controls{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding:22px 0 14px}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden}
.seg button{
  appearance:none;border:0;background:transparent;color:var(--ink);cursor:pointer;
  font:500 13px "Instrument Sans",sans-serif;padding:8px 18px;
}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.hint{font:400 12.5px "Spline Sans Mono",monospace;color:var(--ink-3)}

/* ── Table ──────────────────────────────── */
.table-scroll{overflow-x:auto;border:1.5px solid var(--ink);border-radius:14px;background:var(--card)}
table{border-collapse:collapse;width:100%;min-width:820px}
caption{text-align:left;padding:0;height:0;overflow:hidden}
th,td{padding:13px 16px;text-align:left;vertical-align:middle}
thead th{
  font:500 11.5px/1.3 "Spline Sans Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);border-bottom:1.5px solid var(--ink);
  cursor:pointer;user-select:none;white-space:nowrap;
}
thead th .arr{opacity:.45;font-size:10px}
thead th.sorted{color:var(--blue);border-bottom-color:var(--blue);border-bottom-width:2.5px;background:color-mix(in srgb, var(--blue) 7%, transparent)}
thead th.sorted .arr{opacity:1;color:var(--blue);font-size:11px}
tbody tr{border-bottom:1px solid var(--line-soft)}
tbody tr:last-child{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb, var(--blue) 5%, transparent)}
td.name{font-weight:600;white-space:nowrap}
td.name a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
td.name a:hover{border-color:var(--blue);color:var(--blue-ink)}
td.num{font:500 15px "Spline Sans Mono",monospace;white-space:nowrap;text-align:right}
th.num{text-align:right}
td.note{color:var(--ink-2);font-size:13px;max-width:460px;min-width:200px}
.tag{
  display:inline-block;font:500 10.5px/1 "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;
  background:var(--tag-bg);color:var(--tag-ink);border-radius:5px;padding:4px 7px;margin-left:8px;vertical-align:2px;
}
.tag.warn{background:var(--warn-bg);color:var(--warn)}
tr.cheapest td.name{box-shadow:inset 3px 0 0 var(--blue)}

/* 5v bar meter */
.meter{display:flex;align-items:center;gap:12px;min-width:220px}
.meter .track{flex:1;height:10px;border-radius:4px;background:var(--bar-track);overflow:hidden}
.meter .fill{height:100%;border-radius:0 4px 4px 0;background:var(--bar);transform-origin:left;animation:grow .7s cubic-bezier(.2,.7,.2,1) both}
.meter .val{font:500 15px "Spline Sans Mono",monospace;min-width:86px;text-align:right;color:var(--ink)}
@keyframes grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.meter .fill{animation:none}}

/* ── Sections ───────────────────────────── */
h2{font:600 26px/1.2 "Fraunces",serif;margin:54px 0 12px}
.notsold{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.notsold span{
  border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  font:400 13.5px "Instrument Sans",sans-serif;color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--ink-3);
}
.prose{max-width:64ch;color:var(--ink-2)}
.prose b{color:var(--ink)}

footer{margin-top:64px;border-top:2px solid var(--ink);padding:26px 0 56px;
  font:400 13px/1.7 "Spline Sans Mono",monospace;color:var(--ink-3)}
footer a{color:var(--ink-2)}
.err{padding:40px;text-align:center;color:var(--warn);font-family:"Spline Sans Mono",monospace}

/* ── TLD-navigaatio ─────────────────────── */
.tldnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.tldnav a{
  font:500 14px "Spline Sans Mono",monospace;color:var(--ink-2);text-decoration:none;
  border:1.5px solid var(--line);border-radius:999px;padding:7px 16px;
}
.tldnav a:hover{border-color:var(--ink);color:var(--ink)}
.tldnav a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* --- Ryhmitelty navigaatio (gnav) --- */
.gnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px;position:relative;z-index:60}
.gnav>a,.gd summary{
  font:500 12.5px "Spline Sans Mono",monospace;letter-spacing:.04em;color:var(--ink-2);
  text-decoration:none;padding:7px 13px;border:1.5px solid var(--line);border-radius:9px;
  background:var(--paper);cursor:pointer;white-space:nowrap;display:inline-block
}
.gnav>a:hover,.gd summary:hover{border-color:var(--ink);color:var(--ink)}
.gnav>a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gd{position:relative}
.gd summary{list-style:none}
.gd summary::-webkit-details-marker{display:none}
.gd summary::after{content:" ▾";opacity:.55;font-size:10px}
.gd[open] summary{border-color:var(--blue);color:var(--blue)}
.gd.cur summary{border-color:var(--blue);color:var(--blue);font-weight:600}
.gd-p{position:absolute;top:calc(100% + 8px);left:0;background:var(--paper);border:1.5px solid var(--ink);
  border-radius:14px;padding:14px 16px;min-width:230px;box-shadow:0 14px 40px rgba(20,20,30,.16);z-index:70}
.gd-p a{display:block;padding:4px 8px;font-size:13.5px;color:var(--ink-2);text-decoration:none;border-radius:7px;white-space:nowrap}
.gd-p a:hover{background:color-mix(in srgb,var(--blue) 8%,transparent);color:var(--blue)}
.gd-p a[aria-current="page"]{color:var(--blue);font-weight:600}
.gd-p .gd-h{display:block;font:500 10.5px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:8px 0 3px;padding:0 8px}
.gd-p .gd-sub:first-child .gd-h{margin-top:0}
.gd-p.cols{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:6px 20px;min-width:560px}
@media (max-width:760px){
  .gd-p{position:static;box-shadow:none;margin-top:6px;min-width:0}
  .gd-p.cols{grid-template-columns:1fr 1fr;min-width:0}
}

/* --- Etusivun kategoriakortit ja poiminnat --- */
.homegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin:26px 0}
.hcard{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:20px 22px}
.hcard h2{margin:0 0 4px;font:600 19px "Fraunces",serif;color:var(--ink)}
.hcard .hdesc{margin:0 0 12px;font-size:13.5px;color:var(--ink-3);line-height:1.5}
.hcard .hlinks{display:flex;flex-wrap:wrap;gap:6px}
.hcard .hlinks a{font:500 12.5px "Spline Sans Mono",monospace;color:var(--ink-2);text-decoration:none;
  padding:5px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--paper)}
.hcard .hlinks a:hover{border-color:var(--blue);color:var(--blue)}
.hcard .hsub{font:500 10.5px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);width:100%;margin:7px 0 1px}
.hcard .hsub:first-child{margin-top:0}
.picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:18px 0 6px}
.pick{background:var(--card);border:1.5px solid var(--ink);border-radius:14px;padding:16px 18px;text-decoration:none;display:block}
.pick:hover{border-color:var(--blue)}
.pick .p-cat{font:500 11px "Spline Sans Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 6px}
.pick .p-val{font:600 22px "Fraunces",serif;color:var(--ink);margin:0}
.pick .p-note{font-size:12.5px;color:var(--ink-2);margin:4px 0 0}