/* Blog index (blog.html) in The Campaign world. Shared world: css/campaign.css. DESIGN.md records the system. */
/* ---------- Title field ---------- */
.bi-hero .site-header { padding-block: 18px 0; }
.bi-copy { max-width: 1280px; margin: 0 auto; padding: clamp(28px, 7vw, 72px) var(--gutter) clamp(32px, 7vw, 64px); }
.bi-title { font-size: clamp(32px, 8vw, 64px); font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
[dir="rtl"] .bi-title { font-size: clamp(36px, 9vw, 72px); line-height: 1.1; letter-spacing: -0.005em; }
.bi-sub { margin-top: 14px; max-width: 40ch; font-size: clamp(15px, 3.7vw, 24px); line-height: 1.35; color: var(--green-ink); }
/* ---------- Filter tabs: tracked labels with a green underline on the active one ---------- */
.blog-filters {
max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter);
display: flex; gap: 0 clamp(18px, 4vw, 32px); overflow-x: auto; scrollbar-width: none;
border-bottom: 1px solid var(--rule-ivory);
}
.blog-filters::-webkit-scrollbar { display: none; }
.blog-filter-btn {
flex-shrink: 0; min-height: 48px; padding: 0; margin-bottom: -1px;
background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
font: 500 11px/1.4 var(--font); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-2);
transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
[dir="rtl"] .blog-filter-btn { font-size: 12.5px; letter-spacing: 0.06em; }
.blog-filter-btn:hover { color: var(--ink); }
.blog-filter-btn.active { color: var(--ink); border-bottom-color: var(--green); }
/* ---------- Leak-session pointer ---------- */
.leak-sessions-strip { margin: 4px 0 20px; }
.blog-grid > .leak-sessions-strip { grid-column: 1 / -1; }
.leak-strip-link {
display: grid; gap: 6px; padding: 18px 20px;
background: var(--ivory-2); border-top: 2px solid var(--ink); text-decoration: none;
}
.leak-strip-icon { display: none; }
.leak-strip-tag { font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; color: var(--green); }
[dir="rtl"] .leak-strip-tag { font-size: 12.5px; letter-spacing: 0.06em; }
.leak-strip-title { font-size: clamp(17px, 4vw, 22px); font-weight: 600; line-height: 1.3; color: var(--ink); }
.leak-strip-meta { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.leak-strip-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--green); }
.leak-strip-link:hover .leak-strip-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
/* ---------- Posts: a picture-led journal ----------
Every post carries an editorial still life (the homepage journal's photographic language).
Phone: the newest post leads with a full-width picture; the rest are thumbnail rows.
Tablet: two columns with the picture on top. Desktop: the lead splits picture and text; three columns below. */
.blog-container { max-width: 1280px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.blog-divider { display: none !important; }
.blog-card {
display: grid; grid-template-columns: clamp(104px, 30vw, 140px) minmax(0, 1fr); gap: 16px; align-items: start;
padding: 18px 0; border-top: 1px solid var(--rule-ivory); text-decoration: none; color: var(--ink);
}
.blog-card-image { overflow: hidden; aspect-ratio: 4 / 3; background: var(--ivory-2); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); }
.blog-card:hover .blog-card-image img { transform: scale(1.04); }
.blog-card-title { font-size: clamp(17px, 4vw, 22px); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; text-wrap: balance; }
.blog-card:hover .blog-card-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.blog-card-excerpt { display: none; margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.blog-card-meta { display: block; margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; line-height: 1.5; color: var(--ink-2); }
[dir="rtl"] .blog-card-meta { font-size: 12.5px; letter-spacing: 0.06em; }
.blog-card-meta > span { white-space: nowrap; }
@media (max-width: 420px) { .blog-card-meta { letter-spacing: 0.18em; } [dir="rtl"] .blog-card-meta { letter-spacing: 0.04em; } }
/* The newest post leads. */
.blog-grid > .blog-card:first-of-type { display: block; padding: 0 0 32px; border-top: 0; }
.blog-grid > .blog-card:first-of-type .blog-card-image { aspect-ratio: 3 / 2; margin-bottom: 20px; }
.blog-grid > .blog-card:first-of-type .blog-card-title { font-size: clamp(28px, 6.6vw, 44px); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; }
[dir="rtl"] .blog-grid > .blog-card:first-of-type .blog-card-title { line-height: 1.15; letter-spacing: -0.005em; }
.blog-grid > .blog-card:first-of-type .blog-card-excerpt { display: block; margin-top: 14px; max-width: 46ch; font-size: clamp(17px, 4.4vw, 24px); line-height: 1.38; color: var(--ink); }
@media (min-width: 640px) {
.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.blog-card { display: block; padding: 0; border-top: 0; }
.blog-card-image { aspect-ratio: 3 / 2; margin-bottom: 16px; }
.blog-card-excerpt {
display: block; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-grid > .blog-card:first-of-type { grid-column: 1 / -1; padding: 0 0 12px; }
}
@media (min-width: 1024px) {
/* Six tracks: the lead spans all, the two posts after it and the last two run two-up, the rest three-up, so every row fills. */
.blog-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 36px; }
.blog-grid > .blog-card { grid-column: span 2; }
.blog-grid > .blog-card:nth-of-type(2), .blog-grid > .blog-card:nth-of-type(3),
.blog-grid > .blog-card:nth-last-of-type(1), .blog-grid > .blog-card:nth-last-of-type(2) { grid-column: span 3; }
.blog-grid > .blog-card:nth-of-type(2) .blog-card-title, .blog-grid > .blog-card:nth-of-type(3) .blog-card-title { font-size: clamp(22px, 5vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.blog-grid > .blog-card:first-of-type {
grid-column: 1 / -1;
display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 48px; align-items: center;
padding: 0 0 24px; border-bottom: 1px solid var(--rule-ivory);
}
.blog-grid > .blog-card:first-of-type .blog-card-image { margin-bottom: 0; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
.bi-hero .site-nav .nav-wide { display: none; }
}