@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;800&family=Karla:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f3f1ec; --paper-2:#ffffff; --ink:#211e1a; --ink-dim:#6b6459; --line:#ddd8cd;
  --green:#1b7a4a; --green-bg:#e1efe6; --green-deep:#12432a;
  --amber:#c98a2c; --amber-bg:#f6e9d2; --danger:#a5402f; --danger-bg:#f4e0da; --focus:#1b7a4a;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17150f; --paper-2:#211e18; --ink:#f1ede3; --ink-dim:#a79f8f; --line:#3a352a;
    --green:#3fce8b; --green-bg:#17311f; --green-deep:#bdf3d6;
    --amber:#e8b458; --amber-bg:#3a2e14; --danger:#e08069; --danger-bg:#3a2018; --focus:#3fce8b;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--paper); color:var(--ink);
  font-family:'Karla', system-ui, sans-serif;
  line-height:1.5;
}
.wrap{ max-width:880px; margin:0 auto; padding-inline:16px; }
a{ color:var(--green-deep); }
@media (prefers-color-scheme: dark){ a{ color:var(--green); } }
img{ max-width:100%; }
.tnum{ font-variant-numeric:tabular-nums; }

/* header */
.site-header{ background:var(--paper-2); border-bottom:1px solid var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; padding-block:14px; flex-wrap:wrap; gap:10px; }
.brand{ font-family:'Archivo',sans-serif; font-weight:800; font-size:19px; color:var(--ink); text-decoration:none; }
.brand-dot{ color:var(--green); }
.site-nav{ display:flex; gap:18px; font-family:'IBM Plex Mono', monospace; font-size:13px; }
.site-nav a{ color:var(--ink-dim); text-decoration:none; }
.site-nav a:hover{ color:var(--ink); }

/* footer */
.site-footer{ border-top:1px solid var(--line); margin-top:40px; padding-block:22px; }
.disclaimer-snip{ font-size:12px; color:var(--ink-dim); line-height:1.6; max-width:70ch; }
.footer-links{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; margin-top:10px; }
.footer-links a{ color:var(--ink-dim); text-decoration:none; margin-right:2px; }
.footer-links a:hover{ color:var(--ink); }
.footer-links a.kofi-link{ color:var(--amber); font-weight:600; }
.footer-links a.kofi-link:hover{ color:var(--ink); }
.footer-copy{ font-size:11px; color:var(--ink-dim); margin-top:10px; }

/* generic */
.eyebrow{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 10px; }
h1{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(26px,5.5vw,36px); line-height:1.08; letter-spacing:-.01em; margin:0 0 10px; }
h2{ font-family:'Archivo',sans-serif; font-weight:700; font-size:20px; margin:28px 0 10px; }
.sub{ font-size:15px; color:var(--ink-dim); max-width:62ch; margin:0 0 6px; }
.prose p{ margin:0 0 14px; max-width:68ch; }
.prose h2{ margin-top:26px; }
main{ padding-block:30px 10px; }

/* hero / home */
.hero{ padding-block:10px 6px; }
.chain-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; margin-top:20px; }
.chain-card{ display:block; background:var(--paper-2); border:1px solid var(--line); padding:18px; text-decoration:none; color:var(--ink); }
.chain-card:hover{ border-color:var(--green); }
.chain-card h3{ font-family:'Archivo',sans-serif; font-size:17px; margin:0 0 6px; }
.chain-card p{ font-size:13px; color:var(--ink-dim); margin:0; }
.chain-card .soon{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--amber); text-transform:uppercase; letter-spacing:.06em; }

/* stat tiles (reused on hub + item pages) */
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0 24px; }
@media (max-width:560px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:var(--paper-2); border:1px solid var(--line); padding:14px 16px; }
.stat-label{ font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); margin:0 0 8px; }
.stat-item{ font-family:'Archivo',sans-serif; font-weight:700; font-size:16px; margin:0 0 3px; }
.stat-val{ font-family:'IBM Plex Mono', monospace; font-size:13px; color:var(--green-deep); }
@media (prefers-color-scheme: dark){ .stat-val{ color:var(--green); } }
.stat.low .stat-val{ color:var(--danger); }
.stat.spread{ background:var(--amber-bg); border-color:var(--amber); }
.stat.spread .stat-val{ color:var(--ink); font-size:20px; font-weight:600; }

/* controls */
.controls{ display:flex; gap:10px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.search{ flex:1; min-width:180px; font-family:'Karla',sans-serif; font-size:14px; padding:9px 12px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); }
.search:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.result-count{ font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--ink-dim); white-space:nowrap; }
.legend{ display:flex; gap:14px; flex-wrap:wrap; font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--ink-dim); margin-bottom:16px; }
.legend span{ display:inline-flex; align-items:center; gap:5px; }
.dot{ width:8px; height:8px; display:inline-block; flex:none; }

/* table */
table{ width:100%; border-collapse:collapse; background:var(--paper-2); border:1px solid var(--line); }
thead th{ text-align:left; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-dim); padding:10px 12px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none; white-space:nowrap; }
thead th:hover{ color:var(--ink); }
thead th .arrow{ font-size:9px; margin-left:3px; opacity:.6; }
thead th[aria-sort="none"] .arrow{ visibility:hidden; }
th.num, td.num{ text-align:right; }
th.rankcol, td.rankcol{ text-align:center; width:34px; }
tbody tr{ border-bottom:1px solid var(--line); }
tbody tr:last-child{ border-bottom:none; }
tbody tr:hover{ background:var(--paper); }
td{ padding:10px 12px; font-size:13.5px; vertical-align:middle; }
td.rankcol{ font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--ink-dim); }
td.item-name a{ font-weight:600; color:var(--ink); text-decoration:none; }
td.item-name a:hover{ color:var(--green-deep); text-decoration:underline; }
.val-cell{ min-width:110px; }
.val-num{ font-family:'IBM Plex Mono', monospace; font-size:13px; font-weight:600; }
.val-bar-track{ height:4px; background:var(--line); margin-top:5px; width:100%; }
.val-bar-fill{ height:100%; }
.badge{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border:1px solid transparent; white-space:nowrap; }
.badge.best{ background:var(--green-bg); color:var(--green-deep); border-color:var(--green); }
@media (prefers-color-scheme: dark){ .badge.best{ color:var(--green); } }
.badge.good{ background:var(--amber-bg); color:#7a5416; border-color:var(--amber); }
@media (prefers-color-scheme: dark){ .badge.good{ color:var(--amber); } }
.badge.fair{ background:var(--paper); color:var(--ink-dim); border-color:var(--line); }
.badge.low{ background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.no-results{ padding:28px 16px; text-align:center; color:var(--ink-dim); font-size:13.5px; display:none; }

@media (max-width:640px){
  thead{ display:none; }
  table, tbody, tr, td{ display:block; width:100%; }
  tbody tr{ border:1px solid var(--line); margin-bottom:8px; padding:10px 12px 4px; }
  td{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; border:none; font-size:13px; }
  td.rankcol{ display:none; }
  td.item-name{ font-family:'Archivo',sans-serif; font-weight:700; font-size:14.5px; padding-bottom:8px; border-bottom:1px dashed var(--line); margin-bottom:4px; justify-content:flex-start; }
  td[data-label]:not(.item-name)::before{ content:attr(data-label); font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-dim); }
  .val-cell{ display:block !important; }
  .val-cell .valrow{ display:flex; justify-content:space-between; align-items:center; width:100%; }
}

/* item detail page */
.item-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.verdict{ background:var(--paper-2); border:1px solid var(--line); padding:20px; margin:20px 0; }
.verdict .badge{ font-size:11px; padding:4px 9px; }
.verdict p{ margin:10px 0 0; max-width:60ch; }
.item-meta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:18px 0; }
@media (max-width:560px){ .item-meta-grid{ grid-template-columns:1fr 1fr; } }
.item-meta-grid .stat{ padding:12px 14px; }
.crosslinks{ display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
.crosslinks a{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-decoration:none; border:1px solid var(--line); padding:8px 12px; color:var(--ink); }
.crosslinks a:hover{ border-color:var(--green); }
.back-link{ font-family:'IBM Plex Mono', monospace; font-size:12px; text-decoration:none; color:var(--ink-dim); display:inline-block; margin-bottom:14px; }
.back-link:hover{ color:var(--ink); }

/* submit form */
.form-grid{ display:grid; gap:14px; max-width:480px; margin-top:20px; }
.form-grid label{ display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; }
.form-grid input, .form-grid select{ font-family:'Karla',sans-serif; font-size:14px; padding:10px 12px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); }
.form-grid input:focus-visible, .form-grid select:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.form-hint{ font-size:12px; color:var(--ink-dim); font-weight:400; }
.submit-btn{ font-family:'IBM Plex Mono', monospace; font-size:13px; letter-spacing:.03em; text-transform:uppercase; background:var(--green); color:var(--paper-2); border:none; padding:12px 20px; cursor:pointer; width:fit-content; }
.submit-btn:hover{ background:var(--green-deep); }
.hidden{ position:absolute; left:-9999px; }