:root{--ink:#0b2545;--paper:#f6f1e7;--accent:#c8791a;--rule:rgba(11,37,69,.15);--card:#fffdf8}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;line-height:1.15;margin:0 0 .5em}
h1{font-size:2.2rem}
h2{font-size:1.6rem}
h3{font-size:1.25rem}
p{margin:0 0 1em}
a{color:var(--accent)}
img{max-width:100%;display:block}

.wrap{max-width:1040px;margin:0 auto;padding:0 16px}

header.top{border-bottom:1px solid var(--rule)}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 16px}
.brand{font-family:"Fraunces",Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none}
header.top nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
header.top nav a{color:var(--ink);text-decoration:none;font-size:.95rem}
header.top nav a:hover{color:var(--accent)}

.btn{display:inline-block;background:var(--accent);color:#fff;border:none;border-radius:4px;padding:.55em 1.1em;font-weight:600;text-decoration:none;cursor:pointer;font-size:.95rem}
.btn:hover{opacity:.9}

main.wrap{padding:32px 16px;min-height:50vh}

.hero{font-family:Fraunces,Georgia,serif;font-size:1.25rem;font-weight:500;max-width:42em;margin:0 0 24px}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.chip{border:1px solid var(--rule);border-radius:999px;padding:.3em .9em;font-size:.85rem;color:var(--ink);text-decoration:none;background:var(--card)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.card-grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:720px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card{display:block;background:var(--card);border:1px solid var(--rule);border-radius:8px;padding:18px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--accent)}
.card .dek{opacity:.8;font-size:.95rem}
.card .meta{font-size:.8rem;opacity:.65;margin:0}
.card .topic{color:var(--accent);margin-right:.5em}

.post .meta{margin-bottom:.4em}
.post .dek{opacity:.8;font-size:1.1rem}
.prose{margin-top:1.2em}
.prose h2{margin-top:1.4em}
.prose img{border-radius:6px}

.sub-block{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:32px 0;margin-top:32px;background:var(--card)}
.subform{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.subform input{flex:1 1 160px;padding:.55em .7em;border:1px solid var(--rule);border-radius:4px;font-size:.95rem}
.subform .msg{font-size:.85rem;opacity:.8}
.hp{position:absolute;left:-9999px}

.foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:24px 16px;font-size:.85rem;opacity:.75}
.foot a{color:var(--ink);margin-left:14px;text-decoration:none}
.foot a:hover{color:var(--accent)}

.popup[hidden]{display:none}
.popup{position:fixed;inset:0;background:rgba(11,37,69,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:100}
.popup-card{background:var(--paper);border-radius:10px;max-width:420px;width:100%;padding:28px;position:relative;box-shadow:0 12px 40px rgba(11,37,69,.25)}
.popup-x{position:absolute;top:10px;right:12px;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink);line-height:1}
.popup .link{display:block;margin-top:10px;background:none;border:none;color:var(--ink);opacity:.7;text-decoration:underline;cursor:pointer;font-size:.85rem;padding:0}