/* The public pages (tools/make_pages.mjs): readable without JavaScript, in
   the app's colours, light or dark with the visitor's device. */
@font-face{ font-family:'Savon'; src:url('/savon.woff2') format('woff2'); font-display:swap; }
:root{ --bg:#05070b; --card:#0e1424; --edge:#1f2a44; --text:#eef2ff; --dim:#a8b3d1; --blue:#3d6bf4; --blue2:#8fb0ff; }
@media (prefers-color-scheme: light){ :root{ --bg:#f6f8fd; --card:#ffffff; --edge:#dfe5f2; --text:#121a2e; --dim:#4f5b78; --blue:#2f58e0; --blue2:#2447c4; } }
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--text); font:16px/1.6 system-ui,-apple-system,'Segoe UI',Roboto,Inter,sans-serif;
  background-image:radial-gradient(70% 50% at 85% -10%, rgba(61,107,244,.22), transparent 70%), radial-gradient(50% 40% at 0% 10%, rgba(140,90,240,.12), transparent 70%); background-repeat:no-repeat; }
a{ color:var(--blue2); }
.top{ display:flex; align-items:center; justify-content:space-between; gap:12px; max-width:880px; margin:0 auto; padding:16px; }
.brand{ display:flex; align-items:center; gap:9px; color:var(--text); text-decoration:none; }
.brand span{ font:400 26px/1 'Savon',Georgia,serif; letter-spacing:.01em; }
.top nav{ display:flex; align-items:center; gap:14px; font-size:14.5px; font-weight:600; }
.top nav a{ color:var(--dim); text-decoration:none; }
.top nav a:hover{ color:var(--text); }
.go{ display:inline-block; padding:9px 16px; border-radius:999px; background:linear-gradient(135deg,#4f7dff,#2f58e0); color:#fff !important; text-decoration:none; font-weight:700; white-space:nowrap; }
.go.big{ padding:13px 22px; font-size:16px; box-shadow:0 10px 26px rgba(61,107,244,.35); }
main{ max-width:880px; margin:0 auto; padding:8px 16px 40px; }
.crumbs{ margin:6px 0 0; font-size:13px; color:var(--dim); }
.crumbs a{ color:var(--dim); }
.kicker{ margin:18px 0 4px; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue2); }
h1{ margin:0 0 10px; font:400 clamp(36px, 9vw, 56px)/1.05 'Savon',Georgia,serif; letter-spacing:-.01em; }
h2{ margin:34px 0 12px; font:400 28px/1.15 'Savon',Georgia,serif; }
h2 small{ font:700 13px/1 system-ui,sans-serif; color:var(--dim); margin-left:6px; letter-spacing:.04em; }
.lede{ font-size:18px; color:var(--dim); max-width:680px; }
.topics{ list-style:none; margin:0; padding:0; display:grid; gap:8px; counter-reset:none; }
.topics li{ position:relative; padding:12px 14px 12px 52px; border-radius:16px; background:var(--card); border:1px solid var(--edge); }
.topics li::before{ content:attr(value); position:absolute; left:14px; top:12px; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  font-size:12.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,#4f7dff,#2f58e0); }
.topics b{ display:block; font-size:16px; }
.topics span{ display:block; font-size:14px; line-height:1.5; color:var(--dim); margin-top:2px; }
.how{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:10px; }
.how > div{ padding:16px; border-radius:18px; background:var(--card); border:1px solid var(--edge); }
.how b{ display:block; font-size:16px; margin-bottom:4px; }
.how p{ margin:0; font-size:14.5px; color:var(--dim); }
.cta{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin:34px 0 10px; padding:22px; border-radius:24px; color:#fff;
  background:radial-gradient(110% 120% at 100% 0%, rgba(160,200,255,.35), transparent 55%), linear-gradient(145deg,#3d6bf4,#213fb2 70%,#1a2f8a); }
.cta b{ display:block; font:400 26px/1.15 'Savon',Georgia,serif; }
.cta span{ display:block; margin-top:4px; font-size:14px; color:#dfe8ff; }
.cta .go{ background:#fff; color:#1f3fb0 !important; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:10px; margin-top:18px; }
.subj{ display:flex; flex-direction:column; justify-content:flex-end; min-height:110px; padding:16px; border-radius:20px; color:#fff; text-decoration:none;
  background:linear-gradient(150deg, var(--a), var(--b)); box-shadow:0 10px 26px rgba(0,0,0,.18); transition:transform .15s; }
.subj:hover{ transform:translateY(-2px); }
.subj b{ font:400 24px/1.1 'Savon',Georgia,serif; }
.subj span{ font-size:13px; opacity:.85; margin-top:4px; }
.also{ margin-top:28px; font-size:14px; color:var(--dim); line-height:1.9; }
footer{ max-width:880px; margin:0 auto; padding:20px 16px 40px; border-top:1px solid var(--edge); font-size:14px; color:var(--dim); }
footer .fine{ font-size:12.5px; opacity:.85; }
@media (max-width:520px){
  .top nav a:not(.go){ display:none; }
  .lede{ font-size:16.5px; }
  .topics li{ padding-left:48px; }
}
@media (prefers-reduced-motion: reduce){ .subj{ transition:none; } }