:root {
  --paper:#f4f2ed; --panel:#ffffff; --ink:#101114; --ink-soft:#4a4b52; --ink-faint:#8b877d;
  --line:#e3ded2; --line-soft:#ece8de; --champ:#c2a878; --champ-ink:#8a6d34; --champ-bg:#efe6d3;
  --good:#5d7d54; --good-bg:#e6ecdf; --wait:#a8564a; --wait-bg:#f1e2dd;
  --shadow:0 1px 2px rgba(16,17,20,.04), 0 10px 34px rgba(16,17,20,.07);
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root {
  --paper:#101114; --panel:#1b1c20; --ink:#f4f2ed; --ink-soft:#b8b4a8; --ink-faint:#86837b;
  --line:#2a2b31; --line-soft:#212228; --champ:#c2a878; --champ-ink:#d8be86; --champ-bg:#24241d;
  --good:#93ac87; --good-bg:#22281f; --wait:#cf8a7e; --wait-bg:#2c211f;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 12px 38px rgba(0,0,0,.4);
} }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.5; -webkit-font-smoothing:antialiased; }
.wrap { max-width:920px; margin:0 auto; padding:clamp(28px,5vw,56px) clamp(16px,4vw,36px) 80px; }
.crumb { font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px; }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--champ-ink); margin:0 0 16px; display:flex; align-items:center; gap:12px; }
.eyebrow::before { content:""; width:28px; height:2px; background:var(--champ); }
h1 { font-family:var(--serif); font-size:clamp(30px,4.6vw,46px); line-height:1.04; font-weight:500; letter-spacing:-.02em; margin:0 0 14px; text-wrap:balance; }
h2 { font-family:var(--serif); font-size:21px; font-weight:500; letter-spacing:-.01em; margin:26px 0 12px; }
.lead { font-size:16.5px; color:var(--ink-soft); max-width:60ch; margin:0 0 22px; }
.cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (max-width:680px){ .cards { grid-template-columns:1fr; } }
.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:5px; text-decoration:none; color:inherit; position:relative; }
a.card:hover { border-color:var(--champ); }
.card .cat { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--champ-ink); }
.card h3 { font-family:var(--serif); font-size:19px; font-weight:500; margin:0; color:var(--ink); }
.card p { font-size:13.5px; color:var(--ink-soft); margin:0; }
.card .meta { font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); margin-top:5px; }
.card .ar { position:absolute; top:14px; right:15px; color:var(--champ-ink); opacity:.6; }
.btn { display:inline-flex; align-items:center; gap:9px; font:600 14px var(--sans); color:#101114; background:var(--champ);
  border:0; border-radius:10px; padding:12px 20px; cursor:pointer; text-decoration:none; }
.btn.ghost { background:var(--champ-bg); color:var(--champ-ink); border:1px solid var(--line); }
.btn.sm { font-size:12px; padding:6px 12px; border-radius:8px; }
.btn:disabled { opacity:.55; cursor:default; }
.btn:focus-visible, input:focus-visible { outline:2px solid var(--champ-ink); outline-offset:2px; }
label { display:block; font:600 12.5px var(--sans); color:var(--ink-soft); margin:16px 0 5px; }
input { width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line); border-radius:9px;
  padding:11px 13px; font:14.5px var(--sans); color:var(--ink); }
input:focus { outline:2px solid var(--champ); outline-offset:0; border-color:var(--champ); }
.note { border-left:3px solid var(--champ); background:var(--champ-bg); padding:13px 17px; border-radius:0 10px 10px 0;
  margin-top:24px; font-size:14px; max-width:64ch; }
.note strong { color:var(--champ-ink); }
.foot { margin-top:34px; font-family:var(--mono); font-size:11.5px; color:var(--ink-faint); letter-spacing:.04em; }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:6px 0 22px; }
@media (max-width:680px){ .tiles { grid-template-columns:1fr; } }
.tile { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.tile .k { font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }
.tile .v { font-family:var(--serif); font-size:32px; font-weight:500; margin-top:2px; font-variant-numeric:tabular-nums; }
.tile .s { font-size:12.5px; color:var(--ink-soft); }
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); background:var(--panel); }
table { border-collapse:collapse; width:100%; min-width:680px; }
th { text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
  padding:13px 14px; border-bottom:1px solid var(--line); font-weight:600; }
td { padding:12px 14px; border-bottom:1px solid var(--line-soft); font-size:13.5px; vertical-align:middle; }
tr:last-child td { border-bottom:0; }
td .who b { display:block; font-weight:600; }
td .who span { color:var(--ink-faint); font-size:12px; }
.chip { font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.05em; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.chip.sent { background:var(--good-bg); color:var(--good); }
.chip.pend { background:var(--wait-bg); color:var(--wait); }
.err { color:var(--wait); font-size:13.5px; margin-top:10px; min-height:1.2em; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; scroll-behavior:auto !important; } }