/* Palette and spacing live here. No fonts or assets are fetched online. */
:root { color-scheme: light; --bg:#dcebf3; --ink:#192d39; --muted:#4b6270; --line:#91a9b7; --accent:#27556d; --hover:#cddfe9; --focus:#075d88; --footnote-blue:#376f8d; }
:root[data-theme="dark"] { color-scheme:dark; --bg:#232526; --ink:#e9eae6; --muted:#b0b6b7; --line:#62696c; --accent:#bad2de; --hover:#2c3032; --focus:#b5e4ff; --footnote-blue:#a9d5ee; }
@media (prefers-color-scheme:dark) { :root:not([data-theme]) { color-scheme:dark; --bg:#232526; --ink:#e9eae6; --muted:#b0b6b7; --line:#62696c; --accent:#bad2de; --hover:#2c3032; --focus:#b5e4ff; --footnote-blue:#a9d5ee; } }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:2rem; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; font-size:16px; line-height:1.65; transition:background-color .25s, color .25s; }
a { color:inherit; text-underline-offset:.3em; }
a:hover { color:var(--accent); }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--focus); outline-offset:6px; }
::selection { background:var(--ink); color:var(--bg); }
[hidden] { display:none !important; }
.page { max-width:1280px; margin:auto; padding:0 64px; }
.masthead { min-height:110px; display:flex; justify-content:space-between; align-items:center; gap:20px; border-bottom:1px solid var(--line); }
.wordmark { text-decoration:none; font-weight:700; font-size:18px; letter-spacing:-.7px; }
.wordmark span { margin:0 4px; color:var(--accent); }
.theme-toggle { display:flex; align-items:center; justify-content:center; padding:10px 0 10px 12px; min-height:44px; min-width:56px; background:none; border:0; cursor:pointer; }
.switch-track { display:block; position:relative; width:48px; height:26px; border:1px solid var(--muted); border-radius:20px; background:var(--hover); transition:background-color .25s, border-color .25s; }
.switch-thumb { position:absolute; top:4px; left:4px; width:16px; height:16px; border-radius:50%; background:var(--ink); transition:transform .28s cubic-bezier(.22,1,.36,1), background-color .25s; }
[data-theme="dark"] .switch-thumb { transform:translateX(22px); }
.theme-toggle:hover .switch-track { border-color:var(--ink); }
.intro { padding:64px 0 58px; animation-delay:60ms; }
.eyebrow, h2 { margin:0; font-size:12px; font-weight:400; letter-spacing:1.6px; text-transform:uppercase; color:var(--muted); }
h1 { font-size:clamp(3.1rem,7.7vw,6.4rem); font-weight:500; line-height:1.05; letter-spacing:-.065em; margin:30px 0 34px; }
.last-line { white-space:nowrap; }
.cursor { color:var(--accent); }
.intro-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.principle { width:max-content; max-width:calc(100% - 120px); }
.principle-heading { margin:0 0 4px; color:var(--ink); font-size:1.27rem; font-weight:500; line-height:1.45; letter-spacing:0; text-transform:none; }
.principle-detail { margin:0; color:var(--muted); font-size:1rem; line-height:1.55; }
.text-link { font-size:14px; text-decoration:none; padding:10px 0; }
.text-link span { margin-left:16px; }
.text-link:hover { text-decoration:underline; }
.writing { animation-delay:130ms; }
.section-heading { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:19px; }
.section-heading--solo { justify-content:flex-end; }
.small-note { font-size:12px; color:var(--muted); line-height:1.8; }
.entry { border-top:1px solid var(--line); }
.entry:last-child { border-bottom:1px solid var(--line); }
.entry summary { display:grid; grid-template-columns:150px 1fr 28px; align-items:center; gap:20px; min-height:110px; padding:22px 12px 22px 0; cursor:pointer; list-style:none; transition:background-color .2s; }
.entry summary::-webkit-details-marker { display:none; }
.entry summary:hover { background:var(--hover); }
.entry-date { font-size:12px; color:var(--muted); align-self:start; padding-top:7px; }
.entry-title { font-size:clamp(18px,2.3vw,27px); line-height:1.4; letter-spacing:-.8px; }
.entry-tag { display:block; margin-top:6px; font-size:12px; letter-spacing:0; color:var(--muted); }
.entry-action { width:16px; height:16px; position:relative; justify-self:end; }
.entry-action::before,.entry-action::after { content:""; position:absolute; background:currentColor; }
.entry-action::before { width:16px; height:1px; top:7px; }
.entry-action::after { height:16px; width:1px; left:7px; transition:transform .2s; }
.entry[open] .entry-action::after { transform:rotate(90deg); }
.entry-body { max-width:900px; padding:4px 36px 26px 170px; }
.entry-body p { margin:0 0 18px; }
.entry-body .entry-byline { margin:0; padding-bottom:25px; font-size:12px; line-height:1.5; letter-spacing:0; color:var(--muted); }
.entry-body ul { margin:0 0 18px; padding-left:22px; }
.entry-body li + li { margin-top:6px; }
.entry-body .eyebrow { font-size:11px; }
.entry[open] .entry-body { animation:arrive .35s both; }
.colophon { text-align:center; margin-top:100px; padding:0 0 100px; animation-delay:190ms; }
.colophon p { margin:0 0 20px; }
.colophon p:last-child { margin-bottom:0; }
footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding:24px 0 32px; font-size:12px; color:var(--muted); animation-delay:230ms; }
footer a { text-decoration:none; }
footer a:hover { text-decoration:underline; }
.skip-link { position:fixed; top:12px; left:12px; z-index:10; padding:10px 16px; background:var(--ink); color:var(--bg); transform:translateY(-180%); }
.skip-link:focus { transform:translateY(0); }
.entrance { animation:arrive .65s both; }
@keyframes arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:640px) {
 .page { padding:0 24px; } .masthead { min-height:86px; } .wordmark { font-size:15px; } .theme-toggle { font-size:12px; gap:6px; }
 .intro { padding:42px 0; } .eyebrow { font-size:11px; letter-spacing:1px; } h1 { font-size:clamp(2.4rem,9.6vw,3.85rem); margin:26px 0; }
 .intro-bottom { display:block; } .principle { width:auto; max-width:none; } .principle-heading { font-size:1.1rem; } .principle-detail { font-size:14px; } .text-link { display:inline-block; margin-top:18px; }
 .section-heading { display:block; } .section-heading .small-note { display:block; margin-top:8px; }
 .entry summary { grid-template-columns:92px 1fr 18px; gap:12px; min-height:110px; } .entry-date { font-size:11px; line-height:1.45; } .entry-title { font-size:19px; } .entry-body { padding:5px 8px 22px 104px; font-size:15px; }
 .colophon { padding:0 0 100px; } footer { flex-wrap:wrap; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }

/* Individual posts and their comment threads. */
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.post-comments-link { padding-top:8px; }
.post-page { max-width:800px; margin:0 auto; padding:48px 0 72px; }
.post-page nav { font-size:14px; margin-bottom:40px; }
.post-page h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; letter-spacing:-.045em; overflow-wrap:break-word; }
.post-byline { margin:0; padding-bottom:25px; font-size:13px; color:var(--muted); }
.post-body p { margin:0 0 24px; }
.post-body ul { padding-left:24px; }
.post-body li + li { margin-top:8px; }
.footnote-marker { font-size:.7em; line-height:0; }
.footnote-ref,.footnote-number { color:var(--footnote-blue); text-decoration:none; }
.footnote-ref:hover,.footnote-number:hover { text-decoration:underline; }
.footnotes { margin:0 0 14px; font-size:12px; line-height:1.6; color:var(--muted); }
.footnotes p { margin:0; }
.comments-section { margin-top:48px; padding-top:32px; border-top:1px solid var(--line); }
.comments-section h2 { font-size:18px; letter-spacing:0; text-transform:none; color:var(--ink); margin-bottom:24px; }
.comments-status { color:var(--muted); }
hyvor-talk-comments { display:block; min-width:0; }
@media (max-width:640px) { .post-page { padding-top:32px; } }