:root{--muted:#5f6159;--accent:#38553e;--line:#deddd5}
html:has(.listing-page){background:#fcfaf6 url('/images/hero-noise.png') repeat;background-size:100px 100px}
.listing-page{max-width:1000px;padding-inline:40px}
.listing-page main{padding:72px 0 88px}
.listing-header{max-width:680px}
.listing-header h1{font-size:clamp(40px,6vw,60px);letter-spacing:-.04em}
.listing-header>p:last-child{max-width:620px;margin:22px 0 0;color:var(--muted);font-size:18px;line-height:1.7}
.topic-nav{display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 48px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.topic-nav a{display:inline-flex;align-items:center;min-height:40px;padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px}
.archive-list{border-top:1px solid var(--line)}
.archive-post{padding:30px 0;border-bottom:1px solid var(--line)}
.archive-post h2{margin:10px 0;font:400 28px/1.25 Georgia,'Times New Roman',serif;letter-spacing:-.02em}
.archive-post>p:last-child{max-width:650px;margin:0;color:var(--muted);font-size:15px;line-height:1.7}
.archive-meta{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;color:var(--muted);font-size:12px}
.archive-meta a:first-child{color:var(--accent)}
.listing-page footer{min-height:76px}
@media(max-width:700px){.listing-page{padding-inline:24px}.listing-page main{padding:52px 0 64px}.listing-header h1{font-size:42px}.topic-nav{margin-top:30px}.archive-post h2{font-size:25px}}
@media(max-width:420px){.listing-page{padding-inline:20px}}