:root{--ink:#2B2140;--soft:#4A3F66;--muted:#7B7090;--cream:#FFF8F1;--line:rgba(43,33,64,.12)}
@media (prefers-color-scheme:dark){:root{--ink:#FFF8F1;--soft:#E6DDF2;--muted:#B9AFCB;--cream:#150B28;--line:rgba(255,248,241,.16)}}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(60% 40% at 15% 0%,rgba(255,180,136,.35),transparent),radial-gradient(60% 40% at 90% 30%,rgba(152,164,255,.28),transparent),radial-gradient(70% 40% at 30% 100%,rgba(255,152,194,.25),transparent)}
header,main,footer{max-width:720px;margin:0 auto;padding:0 22px}
header{display:flex;justify-content:space-between;align-items:center;padding-top:26px;padding-bottom:10px}
.mark{font:italic 700 28px/1 Georgia,"Times New Roman",serif;letter-spacing:-.5px;color:var(--ink);text-decoration:none}
nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:15px}
nav a:hover{color:var(--ink)}
h1{font:500 40px/1.15 Georgia,"Times New Roman",serif;letter-spacing:-.6px;margin:38px 0 8px}
h2{font:500 22px/1.3 Georgia,"Times New Roman",serif;margin:34px 0 6px}
p,li{color:var(--soft)}
.meta{color:var(--muted);font-size:15px;margin-top:0}
a{color:var(--ink)}
.lede{font-size:21px;line-height:1.5;color:var(--soft)}
.hero{padding:70px 0 40px;text-align:center}
.hero h1{font-size:52px}
footer{padding-top:34px;padding-bottom:50px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);margin-top:48px}
footer a{color:var(--muted);margin-right:16px}
.note{border:1px solid var(--line);border-radius:16px;padding:14px 18px;background:rgba(255,255,255,.35)}