@font-face {
  font-family: Inter;
  src: url('/assets/fonts/Inter-Variable.woff2') format('woff2');
  font-display: swap;
}
:root{
  --bg:#fbf9f3;          /* archival paper */
  --ink:#1c2a24;         /* deep green-black */
  --muted:#4a544e;       /* darker graphite for contrast */
  --accent:#4f6f52;      /* chalkboard green */
  --accent-2:#c6d3c0;    /* manila/tab greenish */
  --gold:#e7d996;        /* soft library gold */
  --gold-deep:#d6c474;   /* deeper gold for borders */
  --card:#ffffff;
  --ring:#d8e2db;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}
.site-header{
  position:sticky;top:0;z-index:10;background:linear-gradient(180deg, var(--gold), transparent);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid var(--ring);
}
.brand{display:flex;gap:14px;align-items:center;padding:14px 16px}
.brand .logo{width:56px;height:56px}
.brand h1{margin:0;font-size:1.6rem}
.brand .tagline{margin:2px 0 0;color:var(--muted);font-size:.95rem}
.top-nav{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px}
.top-nav a{padding:6px 10px;border:1px solid var(--ring);border-radius:999px;background:var(--card);text-decoration:none;color:var(--ink);font-weight:550}
.top-nav a[aria-current="page"]{background:#13370a;border-color:var(--gold-deep)}
#site-search{display:flex;gap:8px;align-items:center;padding:0 16px 16px}
#site-search input{flex:1;padding:.6rem .8rem;border-radius:10px;border:1px solid var(--ring);background:#fff}
#site-search button{padding:.55rem .9rem;border-radius:10px;border:1px solid var(--ring);background:var(--card)}
.content{max-width:1050px;margin:24px auto;padding:0 16px 60px}
.card{background:var(--card);border:1px solid var(--ring);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin:14px 0}
.card h2,.card h3{margin-top:6px}
.grid{display:grid;gap:16px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.badge{display:inline-block;padding:.15rem .45rem;border-radius:999px;border:1px solid var(--ring);background:#13370a;font-size:.8rem;color:var(--ink)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:8px}
.kv dt{color:var(--muted)}
.kv dd{margin:0}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px dashed var(--ring);padding:.55rem .4rem;text-align:left;color:var(--ink)}
.table th{color:#2f3a34;font-weight:700}
.details{border-left:3px solid var(--gold-deep);padding:.5rem .8rem;background:#fff7da;border-radius:10px;color:var(--ink)}
.details *{color:var(--ink)}
.details summary{font-weight:700} 
.disclaimer{font-size:.9rem;color:#2f3a34}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.section-title .tools{display:flex;gap:8px}
.button{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--gold-deep);background:#fffbe8;border-radius:10px;padding:.5rem .8rem;text-decoration:none;color:#2f3a34;font-weight:600}
.button:hover{border-color:var(--accent)}
code{background:#f1f4f1;border:1px solid var(--ring);border-radius:6px;padding:.1rem .25rem}

@media print{
  header, .site-footer{ text-align:center; padding:20px 0; color:var(--muted)}
.site-footer, #site-search, .top-nav{display:none}
  body{background:#fff}
  .card{box-shadow:none;border-color:#bbb}
}

/* small interaction sprinkles */
summary{cursor:pointer}
.tooltip{position:relative; border-bottom:1px dotted var(--muted)}
.tooltip:hover::after{content:attr(data-tip); position:absolute; left:0; top:1.4em; background:#111;color:#fff; padding:.35rem .5rem; border-radius:8px; white-space:nowrap; font-size:.8rem}

/* dark mode (auto) */
@media (prefers-color-scheme: dark){
  :root{--bg:#0f1413;--ink:#f1f7f3;--muted:#c9d3cc;--card:#121a18;--ring:#2a3a33;--accent:#8cc4a0;--accent-2:#1c2a24;--gold:#8a7830;--gold-deep:#a18e3c}
  .table th,.table td{border-bottom-color:var(--ring)}
  code{background:#0e120f}
  .details{background:#2a281a;border-left-color:var(--gold)}
}
  .table th,.table td{border-bottom-color:var(--ring)}
  code{background:#0e120f}
}