/* H&L blog styles v2 (Nov 2026). Loaded only on /blog/ pages, after the main
   stylesheet and site-fixes-v1.css. Builds on the permit-guide layout. */

/* Post hero */
.blog-hero h1 { font-size: clamp(44px, 6vw, 88px); }
.blog-meta { margin-top: 28px !important; font-size: 13px !important; letter-spacing: .04em; color: #9fbfae !important; }

/* Post body: smaller section headings than the guide pages, tighter rhythm */
.blog-content article { margin-bottom: 60px; padding-bottom: 60px; }
.blog-content h2 { font-size: clamp(30px, 3.6vw, 46px); padding-right: 70px; }
.blog-content p { font-size: 17px; line-height: 1.7; }
.blog-content a:not(.button) { color: var(--moss); text-decoration: underline; text-underline-offset: 3px; }
.blog-content a:not(.button):hover { color: var(--forest); }
.blog-content strong { color: var(--ink); }
.blog-content ul, .blog-content ol { margin: 26px 0 0; padding: 0; list-style: none; }
.blog-content ul + p, .blog-content ol + p { margin-top: 22px; }
.blog-content li { color: var(--muted); font-size: 16px; line-height: 1.6; }
.blog-content ul li { counter-increment: none; padding: 14px 0 14px 32px; }
.blog-content ul li:before { content: ""; width: 9px; height: 9px; top: 23px; }
.blog-content figure { margin: 34px 0 6px; }
.blog-content figure img { display: block; width: 100%; height: auto; max-height: 560px; object-fit: cover; border-radius: 6px; }
.blog-content figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.blog-content figcaption a { color: var(--muted); }
.blog-content figure + p { margin-top: 26px; }
.blog-content blockquote { border-left: 3px solid var(--leaf); margin: 28px 0; padding: 4px 0 4px 22px; }

/* Sources list */
.blog-sources ol { counter-reset: src; }
.blog-sources li { counter-increment: src; font-size: 14px; padding: 14px 0 14px 46px; }
.blog-sources li:before { content: counter(src); width: 26px; height: 26px; top: 14px; }
.blog-sources li span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }
/* Citation notes: small superscript numbers after the punctuation, no brackets */
.blog-content sup.cite { font-size: .7em; line-height: 0; vertical-align: .5em; margin-left: .06em; letter-spacing: .02em; font-weight: 800; }
.blog-content sup.cite a { color: var(--moss); text-decoration: none; padding: 0 .1em; }
.blog-content sup.cite a:hover { color: var(--moss); text-decoration: underline; }
.blog-sources li:target { background: #eef5e4; }

.blog-content .city-card { margin-bottom: 40px; padding-bottom: 55px; }
.blog-back { margin-top: 30px; font-size: 14px; font-weight: 800; }

/* Blog index */
.blog-list { padding: 90px 8vw 120px; display: grid; gap: 0; max-width: 1200px; margin: 0 auto; }
.blog-card { display: grid; grid-template-columns: 170px 1fr; gap: 4vw; padding: 44px 0; border-top: 1px solid var(--line); }
.blog-card:last-child { border-bottom: 1px solid var(--line); }
.blog-card time { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--moss); padding-top: 10px; }
.blog-card h2 { font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 14px; }
.blog-card h2 a:hover { color: var(--moss); }
.blog-card p { color: var(--muted); font-size: 16px; max-width: 720px; }
.blog-card .text-link { margin-top: 20px; }
.blog-empty { color: var(--muted); }

@media (max-width: 900px) {
  .blog-content h2 { font-size: min(32px, 9vw); padding-right: 50px; }
  .blog-content p { font-size: 16px; }
  .blog-list { padding: 60px 6vw 90px; }
  .blog-card { grid-template-columns: 1fr; gap: 6px; padding: 34px 0; }
  .blog-card time { padding-top: 0; }
}