:root{
  --bg:#ffffff; --sunken:#f5f4f9; --card:#ffffff; --border:#eeecf4;
  --brand:#7c3aed; --brand-deep:#6425d0; --wash:#f2ebfe;
  --gold:#f59e0b; --pink:#ec4899; --green:#22c55e; --red:#ef4444;
  --ink:#161222; --dim:#6b6779; --faint:#a5a1b4;
  --font:ui-rounded,'Nunito','Segoe UI Variable',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; min-height:100vh; padding:0 20px;
  background:
    radial-gradient(900px 480px at 12% -8%, rgba(124,58,237,.09), transparent 62%),
    radial-gradient(760px 520px at 100% 4%, rgba(236,72,153,.07), transparent 58%),
    var(--bg);
  color:var(--ink); font-family:var(--font); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:44px 0 72px}

/* masthead ------------------------------------------------------------- */
.mast{text-align:center; padding:14px 0 4px}
.eyebrow{font-weight:800; letter-spacing:.5em; font-size:11px; color:var(--brand); margin:0 0 12px; text-indent:.5em}
.wordmark{
  font-weight:900; font-size:clamp(26px,6.4vw,40px); letter-spacing:.5px;
  margin:0; line-height:1.08; text-decoration:none; display:inline-block;
  font-style:italic;
}
.wordmark .a{color:var(--ink)}
.wordmark .h{color:var(--brand)}

nav{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin:26px 0 4px}
nav a{
  font-weight:700; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); text-decoration:none; padding:8px 14px; border-radius:999px;
  border:1px solid var(--border); background:var(--sunken); transition:.18s;
}
nav a:hover,nav a:focus-visible{color:var(--ink); border-color:var(--brand); outline:none}
nav a[aria-current="page"]{color:#fff; border-color:var(--brand); background:var(--brand)}

/* page furniture ------------------------------------------------------- */
.pagehead{text-align:center; margin:32px 0 4px}
.pagehead h1{font-weight:900; font-size:clamp(22px,5vw,30px); margin:0}
.pagehead .updated{color:var(--faint); font-size:12.5px; margin:10px 0 0; font-variant-numeric:tabular-nums}

.card{
  margin-top:24px; padding:30px 28px; border-radius:20px;
  border:1px solid var(--border); background:var(--card);
  box-shadow:0 10px 30px rgba(46,37,69,.05);
}
.lead{font-size:16.5px; color:var(--ink); margin:0 0 4px; font-weight:600}
.card p{color:#43405a; margin:14px 0}
h2{font-weight:800; font-size:16px; margin:26px 0 6px; color:var(--ink)}
h2:first-of-type{margin-top:18px}

ul{margin:12px 0; padding-left:0; list-style:none}
li{position:relative; padding-left:22px; margin:9px 0; color:#43405a}
li::before{content:''; position:absolute; left:4px; top:.72em; width:6px; height:6px; border-radius:50%; background:var(--brand)}

a{color:var(--brand)}
a:hover{color:var(--brand-deep)}
strong{color:var(--ink)}

.badge{
  display:inline-block; margin-top:8px; padding:8px 16px; border-radius:999px;
  background:var(--wash); color:var(--brand-deep); font-weight:800; font-size:13px;
}
.note{
  margin-top:22px; padding:16px 18px; border-radius:14px;
  background:var(--sunken); border-left:4px solid var(--brand);
  color:#43405a; font-size:14.5px;
}

/* home hub ------------------------------------------------------------- */
.hub{display:grid; gap:12px; margin-top:22px}
.hub a{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px;
  padding:18px 20px; border-radius:18px; text-decoration:none;
  border:1px solid var(--border); background:var(--card);
  box-shadow:0 6px 18px rgba(46,37,69,.04); transition:.18s;
}
.hub a:hover,.hub a:focus-visible{transform:translateY(-2px); border-color:var(--brand); outline:none}
.hub .ic{
  width:46px; height:46px; border-radius:14px; display:grid; place-items:center;
  font-size:22px; background:var(--sunken);
}
.hub .t{font-weight:800; color:var(--ink); font-size:15.5px}
.hub .s{color:var(--dim); font-size:13px}
.hub .arr{color:var(--faint); font-size:22px; font-weight:700}

.stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:20px}
.stat{
  flex:1 1 120px; text-align:center; padding:16px 10px; border-radius:16px;
  background:var(--sunken);
}
.stat b{display:block; font-size:20px; font-weight:900; color:var(--brand)}
.stat span{font-size:12.5px; color:var(--dim)}

footer{
  margin-top:44px; text-align:center; color:var(--faint); font-size:13px; line-height:1.9;
}
footer .brand{font-weight:900; letter-spacing:.42em; color:var(--brand); font-size:11px; margin-bottom:6px; text-indent:.42em}
footer .mail{color:var(--brand); text-decoration:none; font-weight:700}
footer .mail:hover{text-decoration:underline}