/* The new style, shared by the top-level pages: dark by default, mono type, a centred nav, quiet koi in the margins. */
:root[data-theme="dark"]{--paper:#161512;--ink:#ECEAE3;--body:#D9D6CD;--muted:#A09D93;--faint:#6F6D65;--rule:#2A2924;--rule-hard:#3A3934;--dot:#35342E;--accent:#E28066;--blue:#7FA6E6}
:root[data-theme="light"]{--paper:#FBFAF7;--ink:#1B1A17;--body:#262520;--muted:#6B6A63;--faint:#9A988F;--rule:#E8E5DE;--rule-hard:#D5D2C9;--dot:#CFCCC2;--accent:#A0341F;--blue:#2A5FA8}
:root{--serif:var(--mono)}
body{font:400 14px/1.65 var(--mono);position:relative}
.wrap{position:relative;z-index:1;max-width:720px}
#koi{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;animation:koifade 1.6s ease-out .2s both}
@keyframes koifade{from{opacity:0}to{opacity:1}}
header.top{justify-content:center;gap:32px;padding:30px 0 22px;border-bottom:0;text-transform:lowercase}
header.top .crumb,header.top .name{margin-right:0;color:var(--ink)}
header.top .crumb span{margin:0 8px;color:var(--faint)}
header.top a:not(.crumb a):not(.name),header.top button{color:var(--ink);opacity:.5;transition:opacity .15s}
header.top a:not(.crumb a):not(.name):hover,header.top button:hover{opacity:1}
header.top button{background:none;border:0;padding:0;font:inherit;cursor:pointer}
.intro{margin:34px 0 0;font:400 14px/1.7 var(--mono);color:var(--muted);max-width:34em}
.count,.label,.kick,.sub,.tab,.key,.draft-status,footer.foot{font-family:var(--mono)}
.post h2,.list a{font:500 15px/1.45 var(--mono);letter-spacing:0}
.post p{font:400 13.5px/1.65 var(--mono)}
h1,h2,h3{font-family:var(--mono)}
.wrap{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
footer.foot{margin-top:auto;padding-top:84px}
footer.foot span:first-child{white-space:nowrap}
.lab,.draft-post,.post{border-radius:2px}
@media (max-width:620px){body{font-size:13.5px}header.top{gap:12px 22px;padding:24px 0 18px;flex-wrap:wrap;font-size:13px}header.top .crumb{flex:0 0 100%;text-align:center}.intro{font-size:13.5px}footer.foot{flex-wrap:wrap;gap:8px 20px;font-size:12px;padding-top:48px;margin-bottom:32px}footer.foot span:first-child{flex:0 0 100%}}
@media (prefers-reduced-motion:reduce){#koi{animation:none}}
#tt{display:inline-flex;align-self:center}
#tt .sun{display:none}
:root[data-theme="dark"] #tt .sun{display:inline}
:root[data-theme="dark"] #tt .moon{display:none}
/* the framed card used by the writing and notes lists */
.label{margin:34px 0 12px;font:400 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted)}
.post{display:block;padding:24px}
.draft-post{margin:0 0 16px;border:1px solid var(--rule-hard,var(--rule));border-radius:2px;transition:border-color .15s}
.draft-post:hover{border-color:var(--accent)}
.post .kick{display:flex;gap:10px 14px;flex-wrap:wrap;font:400 12px/1.4 var(--mono);color:var(--faint)}
.post .go{margin-left:auto;color:var(--muted);transition:color .15s}
.post h2{margin:14px 0 8px;transition:color .15s}
.post p{margin:0;color:var(--muted);max-width:38em}
.post:hover h2,.post:hover .go{color:var(--accent)}
@media (max-width:620px){.post{padding:20px 16px}}