@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Inter:wght@400;500&display=swap");
:root{--bg:#fcf8fa;--bg2:#f7eff3;--ink:#1a1a1a;--mut:#8a8290;--mut2:#b9b0bd;--line:#efe3e9;--pink:#d63c7c;--pink-soft:rgba(214,60,124,.12);--mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--serif:"EB Garamond",Georgia,"Times New Roman",serif;--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.label{font-size:10px;letter-spacing:.25em;text-transform:uppercase;color:var(--mut);font-family:var(--sans)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
/* header */
.hdr{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:rgba(252,248,250,.82);backdrop-filter:blur(6px);border-bottom:1px solid transparent}
.hdr.solid{border-bottom-color:var(--line)}
.hdr .wordmark{font-family:var(--serif);font-size:20px;letter-spacing:.02em}
.hdr .wordmark span{color:var(--pink)}
.hdr nav{display:flex;gap:26px}
.hdr nav a{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);transition:color .2s}
.hdr nav a:hover,.hdr nav a.on{color:var(--ink)}
.hdr .right{display:flex;align-items:center;gap:18px}
.pill{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mut);border:1px solid var(--line);border-radius:999px;padding:5px 11px;background:#fff}
.pill b{color:var(--ink);font-weight:500}
.ico{width:16px;height:16px;fill:var(--mut);transition:fill .2s}.ico:hover{fill:var(--ink)}
.burger{display:none}
@media(max-width:820px){.hdr{flex-wrap:wrap;padding:12px 16px;gap:8px}.hdr nav{order:3;width:100%;gap:16px;overflow-x:auto;white-space:nowrap;padding-bottom:2px}.pill{display:none}}
@media(max-width:820px){.page{padding-top:150px}}
/* page */
.page{max-width:720px;margin:0 auto;padding:140px 24px 120px}
.page h1{font-family:var(--serif);font-weight:400;font-size:44px;line-height:1.15;margin:0 0 10px}
.page h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:54px 0 12px}
.page h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:30px 0 6px}
.page p{margin:0 0 16px;color:#3a3540}
.page p.lead{font-family:var(--serif);font-size:20px;color:var(--ink)}
.page .kicker{margin-bottom:18px}
.page .byline{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--mut2);margin-bottom:44px}
.page hr{border:0;border-top:1px solid var(--line);margin:48px 0}
.page ul{padding-left:18px;color:#3a3540}.page li{margin-bottom:6px}
.box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px 22px;margin:22px 0}
.box.pink{background:var(--bg2);border-color:#f1d7e2}
code,.code{font-family:var(--mono);font-size:12px;background:#f4eef1;padding:2px 6px;border-radius:4px;color:#5a4a55}
table{width:100%;border-collapse:collapse;margin:20px 0;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:12px 10px;border-bottom:1px solid var(--line)}
th{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);font-weight:500}
td:first-child{color:var(--mut);width:24%}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 22px;border:1px solid rgba(26,26,26,.18);font-size:10px;letter-spacing:.22em;text-transform:uppercase;transition:all .25s;background:transparent}
.btn:hover{border-color:var(--ink)}
.btn.pink{border-color:var(--pink);color:var(--pink)}.btn.pink:hover{background:var(--pink);color:#fff}
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.fine{font-size:12px;color:var(--mut)}
.ftr{border-top:1px solid var(--line);padding:40px 28px 60px;text-align:center;color:var(--mut);font-size:11px;line-height:1.8}
.ftr a{border-bottom:1px solid var(--line)}
/* timeline */
.tl{position:relative;padding-left:26px}.tl:before{content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tl .it{position:relative;margin-bottom:34px}
.tl .it:before{content:"";position:absolute;left:-26px;top:5px;width:13px;height:13px;border-radius:50%;border:2px solid var(--pink);background:var(--bg)}
.tl .it.done:before{background:var(--pink)}
.tl .it.todo:before{border-color:var(--mut2)}
.tl .d{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--mut2);margin-bottom:4px}
.tl .t{font-family:var(--serif);font-size:19px;margin-bottom:4px}
/* dark (lore) */
body.dark{background:#0a0608;color:#f1e9ee}
body.dark .hdr{background:rgba(10,6,8,.8)}body.dark .hdr.solid{border-bottom-color:#241a20}
body.dark .hdr .wordmark{color:#f1e9ee}body.dark .hdr nav a{color:#7d6f78}body.dark .hdr nav a:hover,body.dark .hdr nav a.on{color:#f1e9ee}
body.dark .pill{background:#150d12;border-color:#2a1c24;color:#9c8a95}body.dark .pill b{color:#f1e9ee}
body.dark .ico{fill:#7d6f78}body.dark .ico:hover{fill:#f1e9ee}
body.dark .page p{color:#bcaeb6}body.dark .page p.lead{color:#f1e9ee}
body.dark .page h2{color:#f1e9ee}body.dark .page hr{border-color:#241a20}
body.dark .ftr{border-color:#241a20;color:#6b5f66}body.dark .ftr a{border-color:#2a1c24}
body.dark .label{color:#8d6f80}
.amb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(60px);background:radial-gradient(closest-side,rgba(214,60,124,.28),transparent)}
.glow{text-shadow:0 0 40px rgba(214,60,124,.25),0 0 80px rgba(214,60,124,.1)}