/* Blog listing, home previews and shared editorial typography. */
/* Blog: static editorial slots, ready to become template loops later. */
.sws-blog { background:var(--color-background) }
.blog-heading {
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:32px;
    margin-bottom:40px
}
.blog-heading h1,.blog-heading h2 { letter-spacing:-.04em; text-wrap:balance }
.blog-heading p { max-width:600px; margin-top:16px }
.blog-heading .text-link { flex-shrink:0 }
.blog-page { padding:64px 0 96px }
.blog-page .blog-heading { margin-bottom:32px }
.blog-preview-note {
    display:flex;
    align-items:baseline;
    gap:12px;
    flex-wrap:wrap;
    padding:16px 0;
    margin-bottom:40px;
    border-top:1px solid var(--color-line);
    border-bottom:1px solid var(--color-line);
    font-size:14px
}
.blog-preview-note strong { color:var(--color-primary-dark); font-weight:600 }
.blog-preview-note p { max-width:72ch }
.blog-featured {
    display:flex;
    gap:48px;
    align-items:center;
    margin-bottom:48px
}
.blog-featured__media { flex:1.45; min-width:0 }
.blog-featured__copy { flex:1; min-width:0 }
.blog-featured h2 {
    font-size:clamp(28px,3.2vw,44px);
    letter-spacing:-.035em;
    line-height:1.16;
    text-wrap:balance;
    margin:16px 0
}
.blog-featured__copy>p { max-width:48ch }
.blog-placeholder {
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:16/10;
    background:#eaf2f3;
    border-radius:var(--radius-md);
    color:#47656b;
    font-size:14px
}
.blog-placeholder--featured { aspect-ratio:16/10; background:#dfedef }
.blog-category { display:block; color:var(--color-primary-dark); font-size:13px; font-weight:600 }
.blog-status { display:block; margin-top:20px; color:var(--color-muted); font-size:13px }
.blog-stories { display:flex; flex-wrap:wrap; gap:32px }
.blog-story { flex:0 0 calc((100% - 96px)/4); min-width:0 }
.blog-story__copy { padding-top:20px }
.blog-story h3 { font-size:22px; line-height:1.3; margin:12px 0; text-wrap:balance }
.blog-story p { font-size:14px; line-height:1.65 }
.blog-story .blog-status { margin-top:16px }
.blog-stories--home .blog-story { flex-basis:calc((100% - 64px)/3) }
.blog-stories--home .blog-placeholder { aspect-ratio:16/9 }
@media(max-width:991px) {
    .blog-page { padding:48px 0 64px }
    .blog-featured { gap:32px }
    .blog-featured h2 { font-size:32px }
    .blog-story { flex-basis:calc((100% - 32px)/2) }
    .blog-stories--home { gap:24px }
    .blog-stories--home .blog-story { flex-basis:calc((100% - 48px)/3) }
    .blog-stories--home h3 { font-size:20px }
}
@media(max-width:767px) {
    .blog-heading { flex-direction:column; align-items:center; text-align:center; gap:20px; margin-bottom:32px }
    .sws-blog .blog-heading { flex-direction:row; align-items:center; text-align:left; gap:16px }
    .sws-blog .blog-heading .text-link { white-space:nowrap }
    .blog-heading p { margin-top:12px }
    .blog-page { padding:40px 0 48px }
    .blog-featured { flex-direction:column; align-items:stretch; gap:24px; margin-bottom:32px }
    .blog-featured__copy { text-align:left }
    .blog-featured h2 { font-size:28px; margin:12px 0 }
    .blog-preview-note { margin-bottom:32px; gap:4px }
    .blog-stories,.blog-stories--home { flex-direction:column; gap:32px }
    .blog-story,.blog-stories--home .blog-story { flex-basis:auto }
    .blog-story__copy { padding-top:16px }
    .blog-story h3,.blog-stories--home h3 { font-size:24px }
}

/* Real articles share the editorial slots with clearly marked placeholders. */
.blog-featured__link { display:flex; align-items:center; gap:48px; width:100%; min-width:0 }
.blog-featured__link .text-link { display:inline-block; margin-top:24px }
.blog-featured__link:hover h2,.blog-story__link:hover h3 { color:var(--color-primary-dark); text-decoration:underline; text-underline-offset:4px }
.blog-featured__image { width:100%; height:auto; aspect-ratio:16/10; object-fit:contain; padding:16px; background:#000; border-radius:var(--radius-md) }
.blog-story__link { display:block }
.blog-story__image { width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; padding:12px; background:#000; border-radius:var(--radius-md) }
.blog-story__link .text-link { display:inline-block; margin-top:20px }
@media(max-width:991px) {
    .blog-featured__link { gap:32px }
}
@media(max-width:767px) {
    .blog-featured__link { flex-direction:column; align-items:stretch; gap:24px }
    .blog-featured__image { aspect-ratio:16/9; padding:12px }
}

/* Personal study photograph: photographic framing, separate from terminal captures. */
.blog-story__image--books { object-fit:cover; object-position:50% 85%; padding:0; background:transparent }

.blog-story__image--instagram { object-fit:cover; padding:0; background:#f5f5f3 }

/* Archive: centered stories, with room for four posts per desktop row. */
.blog-stories--three { justify-content:center; margin-top:48px }
.blog-stories--three .blog-story { flex-basis:calc((100% - 96px)/4) }
@media(min-width:768px) and (max-width:991px) {
    .blog-stories--three .blog-story { flex-basis:calc((100% - 64px)/3) }
}
@media(max-width:767px) {
    .blog-stories--three { margin-top:32px }
    .blog-stories--three .blog-story { flex-basis:auto }
}

/* Blog: a late font must not reflow an already visible article. */
@font-face {
    font-family:'Inter Editorial';
    font-style:normal;
    font-weight:400 700;
    font-display:optional;
    src:url('assets/fonts/inter-latin-variable.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD
}
@font-face {
    font-family:'Inter Editorial';
    font-style:normal;
    font-weight:400 700;
    font-display:optional;
    src:url('assets/fonts/inter-latin-ext-variable.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF
}

.blog-document { --font-family:'Inter Editorial',Arial,sans-serif; --font-heading:'Inter Editorial',Arial,sans-serif }
.blog-document .brand img { aspect-ratio:1484/429 }