/* Blog and content pages (scripts/blog.py). Uses the tokens in site.css;
   site.css stays Alex's file. */

.crumbs{font-size:13.5px;color:var(--muted);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--deep);text-decoration:underline}
.crumbs .sep{opacity:.5}
.crumbs [aria-current]{color:var(--char);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:46ch}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags .tag{text-decoration:none}
.meta{font-size:14px;color:var(--muted);margin-top:10px}
.meta a{color:inherit}

/* Lists */
.blog-hero{padding:56px 0 48px}
.blog-hero h1{font-size:clamp(34px,4.4vw,52px)}
.post-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.post-card .thumb{display:block;aspect-ratio:16/9;background:var(--soft);overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover}
.post-card .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.post-card .body .tag{align-self:flex-start}
.post-card h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:20px;line-height:1.25;margin:4px 0 0}
.post-card h3 a{color:var(--navy);text-decoration:none}
.post-card h3 a:hover{color:var(--deep);text-decoration:underline}
.post-card .meta{margin-top:auto}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px}
.pager a{min-width:42px;padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius-sm);text-align:center;text-decoration:none;font-weight:700;color:var(--navy)}
.pager a[aria-current]{background:var(--navy);border-color:var(--navy);color:var(--white)}
.pager a:hover:not([aria-current]){background:var(--sky)}
.plain{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.plain a{color:var(--deep)}
h2.h3{font-family:'DM Sans',system-ui,sans-serif;font-size:18px;font-weight:700;margin-bottom:6px}
.newsletter-band{background:var(--paper);border-top:1px solid var(--line)}

/* Post */
.post-hero{background:var(--paper);padding:48px 0 56px;border-bottom:1px solid var(--line)}
.post-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.post-hero h1{font-size:clamp(32px,4.2vw,50px);margin:14px 0 14px}
.post-hero .cover{width:100%;height:auto;border-radius:18px;box-shadow:var(--shadow-lg);aspect-ratio:16/10;object-fit:cover}
.post-body{padding:56px 0 72px}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;align-items:start}
.post-side{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px}
.side-card{border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--white)}
.side-card h3{font-size:17px}
.side-card.dark{background:var(--navy);border-color:var(--navy);color:var(--white)}
.side-card.dark h3{color:var(--white)}
.search.stack{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.search.stack input{width:100%;padding:13px 14px;border-radius:var(--radius-sm);border:1px solid var(--line);font:inherit}
.toc{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;background:var(--white)}
.toc summary{font-weight:700;color:var(--navy);cursor:pointer}
.toc ol{margin:12px 0 0 18px;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.toc a{color:var(--char);text-decoration:none}
.toc a:hover{color:var(--deep);text-decoration:underline}

/* Article text */
.prose{font-size:17.5px;line-height:1.72;color:#2b3442;max-width:720px;min-width:0;overflow-wrap:break-word}
.prose>*+*{margin-top:1.05em}
.prose p,.prose li{font-size:inherit;line-height:inherit}
.prose h2{font-size:clamp(26px,3vw,34px);margin-top:1.8em;margin-bottom:.4em;scroll-margin-top:96px}
.prose h3{font-size:21px;margin-top:1.5em;margin-bottom:.3em;scroll-margin-top:96px}
.prose h4{font-size:18px;color:var(--navy);margin-top:1.3em}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.4em}
.prose a{color:var(--deep);text-underline-offset:2px}
.prose img{height:auto;border-radius:12px;margin:1.4em 0}
.prose iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px}
.prose blockquote{border-left:4px solid var(--bright);padding:4px 0 4px 18px;color:var(--navy);font-style:italic}
.prose table{width:100%;border-collapse:collapse;font-size:15px;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.prose tr:first-child td,.prose th{background:var(--soft);font-weight:700;color:var(--navy)}
.prose .btn{color:var(--white);text-decoration:none;margin:.4em 0}
.prose hr{border:0;border-top:1px solid var(--line)}

@media (max-width:960px){
  .post-hero-grid,.post-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .post-side{position:static}
  .post-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .post-cards{grid-template-columns:1fr}
  .prose{font-size:17px}
  .post-hero{padding:32px 0 40px}
  .crumbs [aria-current]{max-width:28ch}
}
.contact-form label{display:flex;flex-direction:column;gap:6px;margin-top:12px;font-size:14px;font-weight:700;color:var(--navy)}
.contact-form input,.contact-form textarea{font:inherit;font-weight:400;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);width:100%}
.contact-form .btn{margin-top:16px}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-status{margin-top:10px;font-size:14.5px;color:var(--navy)}
.prose .author-box{display:flex;gap:16px;align-items:flex-start;margin-top:2.4em;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.prose .author-box .author-pic{width:72px;height:72px;border-radius:50%;margin:0;flex:none;object-fit:cover}
.prose .author-box .author-name{font-weight:700;color:var(--navy)}
.prose .author-box p{font-size:15.5px;margin-top:4px}