/* Vesta — plain, single-screen. Near-black, one mark, one line, two buttons.
   Wordmark in Redaction (the redaction.us nod); everything else system + mono. */

@font-face { font-family:"Redaction"; src:url("../fonts/Redaction.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 20"; src:url("../fonts/Redaction20.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 10"; src:url("../fonts/Redaction10.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 35"; src:url("../fonts/Redaction35.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 50"; src:url("../fonts/Redaction50.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 70"; src:url("../fonts/Redaction70.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Redaction 100"; src:url("../fonts/Redaction100.otf") format("opentype"); font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("../fonts/GeistMono-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Geist Mono"; src:url("../fonts/GeistMono-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; }

:root{
  --bg:#0c0c0e;
  --fg:#ededee;
  --muted:#86888c;
  --faint:#5a5c60;
  --line:rgba(255,255,255,.12);
  --line-2:rgba(255,255,255,.22);
  --accent:#ff3d7a;
  --mono:"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:16px; line-height:1.6;
}
a{ color:inherit; text-decoration:none; }
a:hover{ color:var(--accent); }

/* ───────────────── Home (single screen) ───────────────── */
.home{ display:flex; flex-direction:column; min-height:100vh; }
.hero{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:26px; padding:64px 24px;
}
.mark{
  width:128px; height:128px; border-radius:28px;
  /* drop-shadow traces the PNG alpha, so the glow hugs the mark (box-shadow left a gap) */
  filter:drop-shadow(0 0 34px rgba(255,255,255,.30));
}
.wordmark{
  font-family:"Redaction", Georgia, serif; font-weight:400;
  font-size:clamp(56px, 11vw, 132px); letter-spacing:-.01em;
  margin:0; color:#fafafa; cursor:default; text-align:center; white-space:nowrap;
  /* fixed-height block: heavier grades overflow visually, never reflow the icon above */
  line-height:1; height:1em;
}
/* the redaction.us gag: each character bleeds heavier as you hover it */
.wordmark span:hover{ font-family:"Redaction 100", Georgia, serif; }
.lede{
  max-width:50ch; margin:0; color:var(--muted);
  font-size:clamp(15px,2.4vw,18px); line-height:1.65;
}
.lede a{ color:var(--fg); border-bottom:1px solid var(--line-2); }
.lede a:hover{ color:var(--accent); border-color:var(--accent); }

.actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.btn{
  font-family:var(--mono); font-size:13.5px; letter-spacing:.01em;
  color:var(--fg); padding:11px 20px; border:1px solid var(--line-2); border-radius:9px;
  transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.btn:hover{ border-color:var(--accent); color:var(--accent); background:rgba(255,61,122,.05); }

.foot{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:20px 28px; font-family:var(--mono); font-size:12px; color:var(--faint);
  border-top:1px solid var(--line);
}
.foot a:hover{ color:var(--accent); }

/* ───────────────── Docs ───────────────── */
.wrap{ max-width:980px; margin:0 auto; padding:0 28px; }

.nav{ border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(12,12,14,.86); backdrop-filter:saturate(140%) blur(8px); z-index:5; }
.nav .wrap{ display:flex; align-items:center; gap:18px; height:58px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:"Redaction",serif; font-size:22px; color:#fafafa; }
.brand img{ width:24px; height:24px; border-radius:6px; }
.nav .spacer{ flex:1; }
.nav .lnk{ font-family:var(--mono); font-size:13px; color:var(--muted); }
.nav .lnk:hover{ color:var(--accent); }
.nav .ghbtn{ font-family:var(--mono); font-size:12.5px; color:var(--fg); border:1px solid var(--line-2); padding:7px 13px; border-radius:8px; }
.nav .ghbtn:hover{ border-color:var(--accent); color:var(--accent); }

.docs{ display:grid; grid-template-columns:200px 1fr; gap:48px; padding:56px 0 96px; align-items:start; }
.toc{ position:sticky; top:90px; font-family:var(--mono); font-size:12.5px; display:flex; flex-direction:column; gap:6px; }
.toc a{ color:var(--muted); padding:3px 0; }
.toc a:hover, .toc a.on{ color:var(--accent); }
.toc .grp-t{ color:var(--faint); text-transform:uppercase; letter-spacing:.08em; font-size:10.5px; margin-top:16px; }
.toc .grp-t:first-child{ margin-top:0; }

.doc{ min-width:0; }  /* grid child defaults to min-width:auto → a wide <pre> would stretch the track past the viewport; this lets pre's own overflow-x:auto scroll instead */
.doc h1{ font-family:"Redaction",serif; font-weight:400; font-size:clamp(40px,7vw,64px); margin:0 0 8px; }
.doc .sub{ color:var(--muted); max-width:62ch; margin:0 0 40px; }
.doc section{ margin-bottom:56px; scroll-margin-top:84px; }
.doc h2{ font-size:15px; font-family:var(--mono); font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:10px; margin:0 0 18px; }
.doc p{ color:#c9cacc; max-width:68ch; }
.doc p a{ color:var(--fg); border-bottom:1px solid var(--line-2); }
.doc p a:hover{ color:var(--accent); border-color:var(--accent); }

/* config / cli tables — plain, hairline rows, no card chrome */
.tbl{ width:100%; border-collapse:collapse; font-family:var(--mono); font-size:13px; }
.tbl th{ text-align:left; color:var(--faint); font-weight:400; text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; padding:0 16px 10px 0; border-bottom:1px solid var(--line); }
.tbl td{ padding:11px 16px 11px 0; border-bottom:1px solid var(--line); vertical-align:top; }
.tbl td.k{ color:var(--accent); overflow-wrap:break-word; }  /* wrap long multi-method keys instead of stretching the table; single-token keys have no break points so they stay on one line */
.tbl td.def{ color:var(--muted); white-space:nowrap; }
.tbl td.desc{ color:#c1c2c4; font-family:var(--sans); font-size:13.5px; }

code{ font-family:var(--mono); font-size:.88em; color:#dfe0e2; background:rgba(255,255,255,.05); padding:.12em .4em; border-radius:4px; }
pre{ font-family:var(--mono); font-size:13px; line-height:1.7; color:#d6d7d9; background:#111114; border:1px solid var(--line); border-radius:10px; padding:18px 20px; white-space:pre-wrap; overflow-wrap:break-word; }  /* wrap long Lua lines (no horizontal scroll) so the page never overflows on narrow screens */
pre .c{ color:var(--faint); }       /* comment */
pre .a{ color:var(--accent); }       /* verb / accent */
pre .s{ color:#c3a6e6; }             /* string literal */

kbd{ font-family:var(--mono); font-size:12px; color:var(--fg); background:#17181b; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:2px 7px; }
.keys{ display:flex; flex-direction:column; gap:0; }
.keys .row{ display:flex; gap:16px; align-items:baseline; padding:11px 0; border-bottom:1px solid var(--line); }
.keys .ks{ min-width:150px; display:flex; gap:5px; flex-wrap:wrap; }
.keys .kd{ color:#c1c2c4; font-size:14px; }

@media (max-width:760px){
  .docs{ grid-template-columns:1fr; gap:0; }
  .toc{ display:none; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }