.blog-main { width:min(var(--max-width),calc(100% - 32px)); margin:48px auto 76px; min-height:55vh; }
.blog-intro { padding:16px 0 40px; }
.album-teaser { display:block; position:relative; margin-bottom:30px; }
.album-teaser img { display:block; width:100%; height:180px; object-fit:cover; opacity:.35; }
.album-teaser span { position:absolute; inset:0; display:grid; place-items:center; padding:24px; font-size:1.4rem; font-weight:700; }
.blog-intro h1,.panel h1,.post-detail h1 { font-size:clamp(2rem,5vw,3.8rem); line-height:1.1; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.post-card,.panel { border:1px solid var(--line); background:var(--surface); }
.post-featured { grid-column:1/-1; }
.post-card img { width:100%; max-height:460px; object-fit:cover; display:block; }
.post-featured img { max-height:560px; }
.post-copy,.panel { padding:28px; }
.post-copy h2 { font-size:1.8rem; line-height:1.15; margin:14px 0; }
.post-featured h2 { font-size:clamp(2rem,4vw,3rem); }
.post-copy p,.panel p,.prose { line-height:1.75; overflow-wrap:anywhere; }
.post-copy time,.muted { color:var(--muted); }
.text-link { text-decoration:underline; text-underline-offset:4px; }
.post-detail { max-width:850px; margin:auto; }
.post-detail h1 { margin:24px 0; overflow-wrap:anywhere; }
.post-detail img { max-width:100%; height:auto; margin:24px 0; }
.post-detail figure { margin:24px 0; }
.prose { font-size:1.1rem; }
.panel { margin:24px 0; }
.narrow { max-width:650px; margin:32px auto; }
.panel label { display:block; margin:18px 0; line-height:1.6; }
.panel textarea { width:100%; padding:12px; color:var(--text); background:var(--surface-soft); border:1px solid var(--line); font:inherit; }
.panel input { margin-top:8px; }
.action { display:inline-block; margin:8px 8px 8px 0; padding:12px 18px; border:1px solid var(--accent); background:var(--surface-soft); color:var(--text); cursor:pointer; font:inherit; text-decoration:none; }
.action:hover { border-color:var(--text); }
.action:focus-visible,a:focus-visible,button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.action:disabled { opacity:.5; cursor:default; }
.login-options { display:flex; flex-direction:column; align-items:flex-start; }
.blog-main h1 { margin-bottom:24px; }
@media(max-width:760px) { .post-grid { grid-template-columns:1fr; } .post-copy,.panel { padding:20px; } .blog-main { margin-top:24px; } .site-header-inner { flex-wrap:wrap; } .main-nav { flex-wrap:wrap; } .post-detail h1 { font-size:2.4rem; } }