/* Home page (front-page.php): lead story, Latest News feed, bucket grid, archive link. Extracted from pages/home.html. */
.feature{display:grid;grid-template-columns:2fr 1fr;gap:36px;align-items:center;margin-top:30px}
.feature-art{aspect-ratio:7/5;border-radius:var(--r-md);display:block}
.feature-art.is-wide{aspect-ratio:16/9}
.feature-art.is-tall{aspect-ratio:4/5}
.feature-body{display:flex;flex-direction:column;justify-content:center;min-width:0}
.feature h2{font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:2rem;line-height:1.14;margin:0 0 8px;color:var(--ink)}
.feature h2 a{color:inherit}
.feature h2 a:hover{color:var(--red-ink)}
.feature time{display:block;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:12px}
.feature p{color:var(--ink-soft);line-height:1.62;font-size:0.98rem;margin:0}
@media (max-width:760px){.feature{grid-template-columns:1fr}}
.feed-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:24px}
.feed-item{display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;padding-bottom:24px;border-bottom:1px solid var(--border);align-items:start}
.feed-item .art{aspect-ratio:4/3;border-radius:var(--r-sm)}
.feed-item .art.is-wide{aspect-ratio:16/9}
.feed-item .art.is-tall{aspect-ratio:4/5}
.feed-item h3{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:1.3rem;line-height:1.24;margin:0 0 8px;color:var(--ink)}
.feed-item h3 a{color:inherit}
.feed-item h3 a:hover{color:var(--red-ink)}
.feed-item time{display:block;font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:8px}
.feed-item p{color:var(--ink-soft);line-height:1.6;font-size:0.92rem;margin:0}
@media (max-width:640px){.feed-item{grid-template-columns:1fr}}
.archive-link{display:inline-flex;align-items:center;gap:7px;margin-top:26px;padding:10px 18px;border-radius:var(--r-sm);font-weight:700;font-size:0.8rem;color:var(--navy-ink);background:var(--surface);border:1px solid var(--border-2)}
.archive-link:hover{background:var(--active-bg);color:var(--active-fg);border-color:var(--active-bg)}
.front-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px;margin-top:48px}   /* full page width under the sidebar: up to 5 across; fewer buckets stretch to fill */
.col-section{display:flex;flex-direction:column;min-width:0}
.col-section.rail-set{margin-bottom:0}   /* a tracker bucket (front-page.php) borrows the rail set's reveal-when-ready hook, not its spacing */
.col-section--tracker .trk-lite-stats{flex-wrap:wrap;gap:6px 14px}   /* a narrow column: speed drops under altitude rather than running out of the card */
.col-section--tracker .trk-lite-body{padding:12px 14px 14px}
.col-title{font-weight:700;font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--navy-ink);border-bottom:2px solid var(--red);padding-bottom:9px;margin:0 0 16px}
.col-card .art{aspect-ratio:4/3;border-radius:var(--r-sm);margin-bottom:10px}
/* every bucket card uses the same landscape crop, whatever the photo's own shape (tall ones are cropped in) */
.col-card .art.is-wide,.col-card .art.is-tall{aspect-ratio:4/3}
.col-card h4{font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:1.02rem;line-height:1.28;margin:0 0 6px;color:var(--ink)}
.col-card h4 a{color:inherit}
.col-card h4 a:hover{color:var(--red-ink)}
.col-card time{font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-faint)}
.col-card+.col-card{margin-top:20px}
/* server-rendered images: real <img> filling the same cropped boxes the design uses */
.feature-art,.feed-item .art,.col-card .art{overflow:hidden}
.feature-art>img,.feed-item .art>img,.col-card .art>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
.feature-art{position:relative}

time a.by{color:var(--ink-soft);text-transform:none;letter-spacing:0.01em;text-decoration:none}
time a.by:hover{color:var(--navy-ink);text-decoration:underline}
/* Home: one grid. Latest News and the sidebar share the first row; the topic columns (Feature Buckets) and the archive link then run the full page width underneath, taking over the sidebar's column. */
.front-layout{row-gap:0}
.front-layout>.main{grid-column:1;grid-row:1;min-width:0}
.front-layout>.front-buckets,.front-layout>.front-more{grid-column:1 / -1;min-width:0}
.front-layout>.rail{grid-column:2;grid-row:1;position:static}   /* not sticky here: a sticky sidebar is held only by the whole grid, so it slid down over the full-width columns */
@media (max-width:920px){.front-layout>.main,.front-layout>.front-buckets,.front-layout>.front-more,.front-layout>.rail{grid-column:1;grid-row:auto}.front-layout>.rail{order:4;margin-top:40px}}   /* stacked: the same 40px above the sidebar as every other page (row-gap is 0 here, so the Browse button touched it) */   /* same specificity as the desktop placement above, so this wins on phones */
/* The tracker's heading matches the topic columns' headings (same type, red rule underneath) so the two line up when the sidebar comes to rest. */
.front-layout .rail-set--tracker .rail-title{display:block;margin:0 0 16px;font-size:0.72rem;letter-spacing:0.1em;border-bottom:2px solid var(--red);padding-bottom:9px}
.front-layout .rail-set--tracker .rail-title::after{display:none}