:root { --ink:#292721; --paper:#edf4e7; --coral:#ef7355; --sun:#ffdc77; --mint:#c8ece2; --lilac:#e4d8f7; --panel:#fffdf6; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { min-height:100vh; margin:0; color:var(--ink); background-color:var(--paper); background-image:radial-gradient(rgba(92,74,46,.17) 1.1px,transparent 1.1px); background-size:23px 23px; font-family:"Avenir Next",Avenir,sans-serif; }
.page { width:min(1180px,calc(100% - 48px)); margin:auto; padding:48px 0 80px; }
.back,.article-back { display:inline-flex; align-items:center; color:var(--ink); font:700 1.15rem/1 "Bradley Hand","Comic Sans MS",cursive; text-decoration:none; border-bottom:2px solid var(--coral); padding-bottom:4px; }
.masthead { margin:48px 0 44px; max-width:900px; }
.kicker,.post-date { margin:0 0 10px; color:var(--coral); font:700 1rem/1 "Bradley Hand","Comic Sans MS",cursive; letter-spacing:.06em; text-transform:uppercase; }
h1,h2,h3 { font-family:"Bradley Hand","Comic Sans MS",cursive; letter-spacing:-.04em; }
h1 { margin:0; font-size:clamp(4rem,9vw,7.2rem); line-height:.82; }
h1 span { color:var(--coral); }
.masthead > p:last-child { max-width:760px; margin:24px 0 0; font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.4; }
.section-label { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.section-label span { font-size:1.6rem; color:var(--coral); }
.section-label h2 { margin:0; font-size:2.1rem; }
.post-list { display:grid; gap:16px; }
.post-card { display:block; padding:28px 32px; color:var(--ink); text-decoration:none; border:2.5px solid var(--ink); background:var(--panel); box-shadow:6px 7px 0 rgba(41,39,33,.14); }
.post-card:nth-child(3n+2) { background:var(--mint); }.post-card:nth-child(3n) { background:var(--lilac); }
.post-card h3 { margin:0 0 8px; font-size:clamp(2rem,4vw,3rem); line-height:.95; }.post-card p { max-width:100%; margin:0; font-size:1.08rem; line-height:1.45; }.post-card .post-date { margin-bottom:8px; }.read-more { display:inline-block; margin-top:15px; font:700 1.15rem/1 "Bradley Hand","Comic Sans MS",cursive; color:var(--coral); }
.post-card:hover .read-more { text-decoration:underline; }.post-card:focus-visible,.back:focus-visible,.article-back:focus-visible { outline:3px solid var(--coral); outline-offset:5px; }
.empty-note { padding:24px; margin:0; border:2.5px dashed var(--ink); background:var(--panel); font:1.2rem/1.4 "Bradley Hand","Comic Sans MS",cursive; }
.elsewhere { margin-top:54px; }.elsewhere-link { display:flex; align-items:baseline; justify-content:space-between; gap:18px; padding:20px 24px; border:2.5px solid var(--ink); background:var(--sun); color:var(--ink); text-decoration:none; box-shadow:6px 7px 0 rgba(41,39,33,.14); }.elsewhere-link span { font:700 2rem/1 "Bradley Hand","Comic Sans MS",cursive; }.elsewhere-link small { font-size:1rem; text-align:right; }.elsewhere-link:hover span { text-decoration:underline; }
.article { width:100%; max-width:100%; margin:42px 0 0; padding:40px clamp(24px,5vw,64px) 56px; border:2.5px solid var(--ink); background:var(--panel); box-shadow:8px 9px 0 rgba(41,39,33,.14); }.post-page .article { margin-top:32px; }
.article .post-date { margin:0 0 14px; }.article > h1 { margin:0; font-size:clamp(3rem,7vw,5.5rem); line-height:.87; }.article-description { max-width:100%; margin:23px 0 34px; font-size:1.3rem; line-height:1.4; }
.article-body { font-size:1.12rem; line-height:1.65; max-width:100%; }.article-body h1,.article-body h2,.article-body h3 { margin:1.6em 0 .5em; line-height:1; }.article-body h1 { font-size:3rem; }.article-body h2 { font-size:2.5rem; }.article-body h3 { font-size:1.9rem; }.article-body p,.article-body ul,.article-body ol { margin:0 0 1.1em; }.article-body li + li { margin-top:.35em; }.article-body a { color:inherit; text-decoration-color:var(--coral); text-decoration-thickness:2px; }.article-body img { display:block; max-width:100%; height:auto; margin:1.8em auto; border:2px solid var(--ink); }.article-body blockquote { margin:1.5em 0; padding:14px 20px; border-left:6px solid var(--coral); background:var(--sun); font:1.35rem/1.4 "Bradley Hand","Comic Sans MS",cursive; }.article-body pre { overflow:auto; padding:18px; border:2px solid var(--ink); background:#292721; color:#fffdf6; }.article-body code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.87em; }.article-body :not(pre) > code { padding:2px 5px; background:var(--mint); }.mermaid { overflow:auto; margin:1.8em 0; padding:18px; border:2px solid var(--ink); background:#fffdf6; text-align:center; }
@media (max-width:600px) { .page { width:min(100% - 32px,1180px); padding-top:34px; }.masthead { margin:42px 0 38px; }.elsewhere-link { align-items:flex-start; flex-direction:column; gap:8px; }.elsewhere-link small { text-align:left; }.article { margin-top:54px; padding:28px 20px 36px; }.post-page .article { margin-top:32px; }.article-body { font-size:1.04rem; } }