:root{
  --bg:#FAF8FB;
  --surface:#FFFFFF;
  --surface-alt:#F1ECF6;
  --ink:#241A2E;
  --ink-soft:#5B4E68;
  --ink-faint:#8B7D98;
  --primary:#4B1D6B;
  --primary-soft:#7B3F9E;
  --primary-wash:#EFE4F5;
  --gold:#A9782E;
  --gold-soft:#E8D8B0;
  --success:#2E7D53;
  --success-wash:#E1F0E7;
  --warning:#B4791F;
  --warning-wash:#F6E9D6;
  --critical:#B94A3D;
  --critical-wash:#F7E3DF;
  --neutral-pill:#EDEAF2;
  --neutral-chart:#6B6478;
  --border:#E3DCEC;
  --shadow: 0 1px 2px rgba(36,26,46,0.06), 0 8px 24px rgba(36,26,46,0.06);
  --font-display:'Fraunces', 'Iowan Old Style', 'Georgia', serif;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#180F1F; --surface:#221729; --surface-alt:#2A1D33;
    --ink:#F2E9F7; --ink-soft:#C3B2D0; --ink-faint:#8F7E9C;
    --primary:#B489D6; --primary-soft:#C9A8DE; --primary-wash:#33223E;
    --gold:#D6B364; --gold-soft:#4A3B24;
    --success:#6FC79B; --success-wash:#1F3329;
    --warning:#E0AC5C; --warning-wash:#3A2E1B;
    --critical:#E08479; --critical-wash:#3D211D;
    --neutral-pill:#332740; --neutral-chart:#9C8FAE;
    --border:#3A2B46;
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"]{
  --bg:#180F1F; --surface:#221729; --surface-alt:#2A1D33;
  --ink:#F2E9F7; --ink-soft:#C3B2D0; --ink-faint:#8F7E9C;
  --primary:#B489D6; --primary-soft:#C9A8DE; --primary-wash:#33223E;
  --gold:#D6B364; --gold-soft:#4A3B24;
  --success:#6FC79B; --success-wash:#1F3329;
  --warning:#E0AC5C; --warning-wash:#3A2E1B;
  --critical:#E08479; --critical-wash:#3D211D;
  --neutral-pill:#332740; --neutral-chart:#9C8FAE;
  --border:#3A2B46;
  --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  padding-inline:24px;
}
h1,h2,h3{font-family:var(--font-display); color:var(--ink); text-wrap:balance; margin:0; font-weight:700;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}
a{color:inherit;}
button,input,select,textarea,label{font-family:inherit;}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;
}
.wrap{max-width:1120px;margin-inline:auto;}
.wrap-wide{max-width:1200px;margin-inline:auto;}
.eyebrow{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--primary-soft);font-weight:500;
}
main section{padding-block:64px;}
@media (max-width:640px){ main section{padding-block:44px;} }

/* ---------- header ---------- */
header{padding-block:18px;border-bottom:1px solid var(--border);background:var(--bg);}
header .wrap-wide{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--ink);}
.brand-sub{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:0.06em;color:var(--ink-faint);margin-top:1px;}
nav{display:flex;gap:20px;align-items:center;flex-wrap:wrap;}
nav a{
  font-size:13.5px;font-weight:500;color:var(--ink-soft);text-decoration:none;
  padding-block:4px;border-bottom:2px solid transparent;
}
nav a:hover{color:var(--primary);border-color:var(--primary-soft);}
nav a.active{color:var(--primary);border-color:var(--primary);}
.pill{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:0.03em;
  background:var(--primary-wash);color:var(--primary-soft);
  border:1px solid var(--border);
  padding:6px 12px;border-radius:100px;white-space:nowrap;
}
@media (max-width:920px){ nav{display:none;} }

/* ---------- shared components ---------- */
.note-box{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:14px 16px;
  background:var(--primary-wash);border:1px solid var(--border);border-radius:12px;
  font-size:13.5px;color:var(--ink-soft);max-width:82ch;
}
.note-box svg{width:18px;height:18px;flex-shrink:0;margin-top:1px;color:var(--primary-soft);}
.note-box.warn{background:var(--warning-wash);}
.note-box.warn svg{color:var(--warning);}

.status-pill{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:100px;flex-shrink:0;white-space:nowrap;
}
.status-pill .dot{width:7px;height:7px;border-radius:50%;}
.status-ok{background:var(--success-wash);color:var(--success);}
.status-ok .dot{background:var(--success);}
.status-warn{background:var(--warning-wash);color:var(--warning);}
.status-warn .dot{background:var(--warning);}
.status-critical{background:var(--critical-wash);color:var(--critical);}
.status-critical .dot{background:var(--critical);}
.status-pending{background:var(--neutral-pill);color:var(--ink-soft);}
.status-pending .dot{background:var(--ink-faint);}

.cta-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;
  font-size:14.5px;font-weight:600;color:var(--primary);text-decoration:none;
  padding:11px 18px;border:1px solid var(--primary-soft);border-radius:10px;
  transition:background .15s,color .15s;
}
.cta-link:hover{background:var(--primary);color:#fff;}

.empty-note{
  padding:20px;text-align:center;color:var(--ink-faint);font-size:14px;
  background:var(--surface);border:1px dashed var(--border);border-radius:12px;
}

/* ---------- footer ---------- */
footer{background:var(--primary);color:#E4D3EE;border-radius:28px 28px 0 0;margin-top:24px;}
footer .wrap-wide{padding-block:40px;display:flex;flex-direction:column;gap:20px;}
footer .brand-name{color:#fff;}
footer p{max-width:64ch;font-size:14px;color:#D3BEDE;}
footer .meta-row{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:13px;color:#C7ABD4;border-top:1px solid rgba(255,255,255,0.15);padding-top:18px;}
footer .meta-row b{color:#EFE0F5;font-weight:600;}

@media (prefers-reduced-motion: reduce){ *{transition:none !important;} }