/* Blog-specific layout layered over the existing /assets/styles.css theme. */
.skip-link:not(:focus){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;z-index:1000;top:1rem;left:1rem;padding:.75rem 1rem;background:var(--accent);color:var(--ink);border-radius:.4rem}
.preview-banner{padding:.6rem 1rem;text-align:center;background:var(--panel);color:var(--accent);border-bottom:1px solid var(--line);font-size:.9rem;font-weight:700}
.blog-hero{display:block;padding-block:clamp(3rem,8vw,7rem);min-width:0}
.blog-hero h1{max-width:900px;margin:.6rem 0 1.2rem;font-size:clamp(2.35rem,5.4vw,4.5rem);line-height:1.08;letter-spacing:-.035em;white-space:normal;overflow-wrap:anywhere}
.blog-hero .lead{max-width:760px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.7}
.blog-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}
.blog-actions .button{display:inline-flex;align-items:center;gap:.5rem}
.blog-section{min-width:0}
.blog-section .section-head{display:flex;align-items:end;justify-content:space-between;gap:2rem;margin-bottom:1.5rem}
.blog-section .section-head h2{margin-bottom:0}
.search-label{display:grid;gap:.4rem;color:var(--muted);font-size:.85rem;font-weight:600}
.search-label input{width:min(340px,80vw);min-height:44px;padding:.65rem .8rem;border:1px solid var(--line);border-radius:.4rem;background:var(--panel);color:var(--text);font:inherit}
.search-label input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.blog-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;min-width:0}
.project.blog-card{display:flex;flex-direction:column;grid-column:auto;min-width:0;margin:0;overflow:hidden}
.blog-card-visual{display:block;min-height:0;aspect-ratio:1.9;overflow:hidden;background:var(--panel)}
.blog-card-visual img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s ease}
.blog-card:hover .blog-card-visual img{transform:scale(1.025)}
.blog-card .project-copy{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:1.2rem}
.blog-card .project-copy h3{margin:.45rem 0 .65rem;font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.25;overflow-wrap:anywhere}
.blog-card .project-copy h3 a{color:var(--text);text-decoration:none}
.blog-card .project-copy>p:not(.project-number):not(.draft-badge){color:var(--muted)}
.blog-card .project-number{margin:0;color:var(--accent);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.blog-card .tags{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:auto;padding-top:.65rem}
.draft-badge{display:inline-block;margin:.6rem 0 0;padding:.2rem .5rem;border:1px solid var(--accent);border-radius:99px;color:var(--accent);font-size:.72rem;font-weight:700}
.blog-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.blog-category-card{grid-column:auto;min-width:0;max-width:100%;margin:0;text-decoration:none}
.blog-category-card .project-copy{padding:1.2rem}
.blog-category-card .project-copy h3{margin:.4rem 0}
.blog-category-card .project-copy>p:last-child{margin-bottom:0;color:var(--muted)}
.empty-state{padding:clamp(1.25rem,4vw,2rem);border:1px dashed var(--line);border-radius:.5rem;background:var(--panel)}
.empty-state h2,.empty-state h3{margin:0 0 .6rem}
.empty-state p{color:var(--muted)}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.5rem;color:var(--muted);font-size:.88rem}
.breadcrumbs a{color:var(--muted)}
.category-page>h1{margin:.35rem 0 1.5rem;font-size:clamp(2rem,4vw,3.2rem);font-family:"Space Grotesk",sans-serif}
.blog-article{min-width:0}
.blog-article-hero{display:block;box-sizing:border-box;width:100%;max-width:980px;min-width:0;margin-inline:auto;padding-block:2rem 3rem}
.blog-article-hero h1{display:block;box-sizing:border-box;width:100%;max-width:100%;min-width:0;margin:.4rem 0 1rem;font-family:"Space Grotesk",sans-serif;font-size:clamp(2rem,4.4vw,3.75rem);line-height:1.12;letter-spacing:-.035em;white-space:normal !important;overflow-wrap:anywhere !important;word-break:normal}
.blog-article-hero .lead{max-width:760px;color:var(--muted);font-size:clamp(1.05rem,2vw,1.3rem)}
.blog-byline{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;color:var(--muted);font-size:.88rem}
.blog-cover{display:block;width:100%;max-width:100%;height:auto;margin-top:1.8rem;border:1px solid var(--line);border-radius:.5rem}
.blog-article-layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,280px);gap:clamp(2rem,5vw,5rem);justify-content:center}
.prose{min-width:0;overflow-wrap:anywhere}
.prose h2{margin:2.5rem 0 .7rem;font-size:clamp(1.5rem,3vw,2rem);line-height:1.2}
.prose h3{margin:1.8rem 0 .6rem;font-size:1.3rem}
.prose p,.prose li{color:var(--text)}
.prose pre,.prose table{max-width:100%;overflow-x:auto}
.prose pre{padding:1rem;background:var(--panel)}
.prose img{max-width:100%;height:auto}
.blog-article-aside{align-self:start;position:sticky;top:100px;margin:0;padding:1.2rem}
.blog-article-aside h2{font-size:1.1rem}
.blog-article-aside .button{display:block;margin-top:1rem;text-align:center}
.blog-related{margin-top:4rem;padding-top:2rem;border-top:1px solid var(--line)}
:focus-visible{outline-color:var(--accent);outline-offset:3px}
@media(max-width:900px){.blog-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.blog-section .section-head{align-items:stretch;flex-direction:column}.search-label input{width:100%}.blog-card-grid,.blog-category-grid,.blog-article-layout{grid-template-columns:1fr}.blog-article-aside{position:static}.blog-actions .button{min-width:0}}
@media(max-width:420px){.blog-hero{padding-block:3rem}.blog-actions{align-items:stretch;flex-direction:column}.blog-actions .button{justify-content:center}}
@media(prefers-reduced-motion:reduce){.blog-card-visual img{transition:none}}

/* Self-contained responsive fixes; the shared main-site CSS is left unchanged. */
.blog-article .detail-hero{min-width:0;max-width:100%}
.blog-article .detail-hero h1{max-width:100%;white-space:normal !important;overflow-wrap:anywhere !important}
.blog-article .blog-article-layout > *{min-width:0}
.blog-article .prose{min-width:0;max-width:100%}
.blog-article .prose :where(pre,table){max-width:100%}
.blog-article .prose :where(a,code){overflow-wrap:anywhere}
@media(max-width:680px){
  .blog-article-hero{padding-block:1.25rem 2rem}
  .blog-article-hero h1{font-size:clamp(1.85rem,7vw,2.6rem)}
}