@font-face{font-family:"Be Vietnam Pro";font-weight:400;font-display:swap;src:url(/assets/fonts/be-vietnam-pro-400.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-800.woff2) format("woff2")}
:root{--bg:#F5F2F6;--ink:#241826;--muted:#6A5B6E;--do:#D02842;--line:#E4DCE6;--card:#FFFFFF;--slip:#FFF3EC;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#141018;--ink:#F4ECF2;--muted:#B7A8BB;--do:#FF5C72;--line:#352B3A;--card:#1D1722;--slip:#241820;color-scheme:dark}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.7 "Be Vietnam Pro",system-ui,sans-serif}
a{color:var(--do)}a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:820px;margin:0 auto;padding:16px}
.brand{font:800 1.2rem/1 "Bricolage Grotesque",system-ui,sans-serif;color:var(--ink);text-decoration:none}.brand span{color:var(--do)}
.top nav{display:flex;gap:16px}.top nav a{color:var(--ink);text-decoration:none}.top nav a:hover{color:var(--do)}
main{max-width:820px;margin:0 auto;padding:0 16px 40px}
h1,h2,h3{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;line-height:1.2;text-wrap:balance}
h1{font-size:clamp(1.7rem,5vw,2.4rem);margin:12px 0 8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:clamp(18px,4vw,32px)}
.muted,.meta{color:var(--muted);font-size:.92rem}
.posts{display:grid;gap:16px;padding:0;list-style:none;margin:16px 0}
.posts li a{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.posts img{width:100%;aspect-ratio:1200/630;object-fit:cover;display:block}.posts .tx{padding:14px 18px}.posts h2{margin:0 0 4px;font-size:1.25rem}.posts a:hover h2{color:var(--do)}
@media (min-width:640px){.posts li a{grid-template-columns:220px minmax(0,1fr)}.posts img{height:100%;aspect-ratio:auto}}
.cover{width:100%;border-radius:10px;margin:8px 0 16px;aspect-ratio:1200/630;object-fit:cover}
.body p,.body ul,.body ol{margin:0 0 14px}.body img{max-width:100%;border-radius:8px}.body h2{margin:28px 0 8px;font-size:1.35rem}.body h3{margin:22px 0 6px;font-size:1.1rem}
.body blockquote{margin:0 0 14px;padding:8px 16px;border-left:3px solid var(--do);background:var(--slip);border-radius:4px}
form.stack{display:grid;gap:10px;max-width:420px}label{font-size:.92rem}input{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font:inherit;background:var(--card);color:var(--ink)}
button,.btn{display:inline-block;padding:11px 20px;border:0;border-radius:999px;background:var(--do);color:#fff;font:inherit;cursor:pointer;text-decoration:none}
.msg{padding:10px 14px;border-left:3px solid var(--do);background:var(--slip);border-radius:6px}
.pager{display:flex;justify-content:space-between;margin-top:20px}
.foot{max-width:820px;margin:0 auto;padding:16px 16px 32px;color:var(--muted);font-size:.9rem}.foot a{color:var(--muted)}