/* =========================================================================
   Homepage.

   Three columns on desktop: trends and orientation on the left, the carousel
   and the editorial flow in the middle, the live feed on the right. Below that
   rhythm changes from section to section on purpose, so the eye keeps finding
   a new shape instead of scrolling past one repeated card.

   Everything here is built from tokens.css. No new colours, no new typefaces,
   no new radii: this is a change of composition, not of identity.

   Mobile first. Unprefixed rules are the phone; the media queries widen.
   ========================================================================= */

/* =========================================================================
   1. Card, shared across every variant
   ========================================================================= */

.card {
    position: relative;
    min-width: 0;
}

.card-link {
    display: block;
    height: 100%;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card-title {
    font-size: var(--fs-base);
    line-height: var(--lh-snug);
    transition: color var(--transition);
}

.card-link:hover .card-title {
    color: var(--accent);
}

.card-desc {
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
    color: var(--text-muted);
}

/* Not a link. The whole card already is one, and a second anchor inside it
   would be a second tab stop to the same place. This is the cue that tells
   the reader the card is clickable. */
.read-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-block-start: var(--space-1);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
}

.read-more svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--transition);
}

.card-link:hover .read-more svg,
.slide a:hover .read-more svg {
    transform: translateX(3px);
}

/* The reference pattern: category, day and clock time, view count. One quiet
   line above the headline, so the headline itself stays clean. */
.meta--top {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    letter-spacing: 0.01em;
}

/* The dot separator from base.css is wrong here: these are distinct facts,
   not a sentence. A slash and a gap read faster. */
.meta--top > * + *::before {
    content: none;
}

.meta--top > * + * {
    padding-inline-start: var(--space-2);
    border-inline-start: 1px solid var(--border);
}

.views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}

.views svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

/* Deliberately blank rather than a placeholder icon, which reads as a broken
   image rather than as an absent one. */
.thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
}

/* ---------- Badges on images --------------------------------------------- */

.flag {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    z-index: 2;
}

.flag svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.flag--breaking {
    inset-inline: var(--space-2) auto;
    background: var(--accent);
    color: var(--accent-ink);
}

.flag--media {
    background: rgba(0, 0, 0, 0.62);
    color: #fff;
    backdrop-filter: blur(2px);
}

.flag--inline {
    position: static;
    margin-inline-end: var(--space-2);
    background: var(--accent);
    color: var(--accent-ink);
    vertical-align: middle;
}

/* ---------- Variants ------------------------------------------------------ */

.card--major .card-thumb,
.card--wide .card-thumb,
.card--lead .card-thumb {
    margin-block-end: var(--space-3);
}

.card--major .card-title {
    font-size: var(--fs-md);
}

.card--wide .card-title {
    font-size: var(--fs-md);
}

@media (min-width: 900px) {
    .card--wide .card-title {
        font-size: var(--fs-lg);
    }
}

/* Thumb beside the text. 110px is wide enough to be recognisable and narrow
   enough that the headline still gets a readable line. */
.card--minor .card-link {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
}

.card--minor .card-title {
    font-size: var(--fs-sm);
    font-family: var(--font-body);
    font-weight: 600;
}

.card--minor .card-desc {
    display: none;
}

@media (min-width: 768px) {
    .card--minor .card-link {
        grid-template-columns: 110px minmax(0, 1fr);
    }
}

/* No photo: the row becomes a single column and the headline takes the width
   the thumbnail would have wasted. */
.card--minor.is-noimage .card-link {
    display: block;
}

.card--photo .card-thumb {
    margin-block-end: var(--space-2);
}

.card--photo .card-title {
    font-size: var(--fs-sm);
    font-family: var(--font-body);
    font-weight: 600;
}

/* Headline laid over the picture. Only used where the block is explicitly an
   image-led gallery, and always with a gradient heavy enough to hold text on
   a photograph nobody in this newsroom chose. */
.card--overlay .card-link {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
}

.card--overlay .card-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 0;
    margin: 0;
}

.card--overlay .card-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.45) 38%, rgba(0, 0, 0, 0) 68%);
}

.overlay-text {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 2;
    padding: var(--space-3);
    display: grid;
    gap: var(--space-2);
    justify-items: start;
}

.overlay-text .card-title {
    color: #fff;
    font-size: var(--fs-base);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.card--overlay .card-body {
    display: none;
}

.chip--ondark {
    color: #fff;
    background: var(--accent);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
}

.chip--ondark::before {
    content: none;
}

/* =========================================================================
   2. Topic strip
   ========================================================================= */

.topic-strip {
    background: var(--surface);
    border-block-end: 1px solid var(--border);
}

.topic-strip-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-2);
    min-width: 0;
}

.live-pill,
.live-dot {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-pill {
    padding: 5px var(--space-3);
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-ink);
}

.live-pill i,
.live-dot i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: live-pulse 2.2s ease-in-out infinite;
}

.live-dot {
    color: var(--accent);
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .live-pill i,
    .live-dot i {
        animation: none;
    }
}

.topic-rail {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    min-width: 0;
}

.topic-rail::-webkit-scrollbar {
    display: none;
}

.topic-rail a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    padding: 5px var(--space-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    white-space: nowrap;
    transition: border-color var(--transition), color var(--transition);
}

.topic-rail a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.topic-rail a.is-breaking {
    border-color: var(--accent);
}

.topic-time {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

/* =========================================================================
   3. Three column shell
   ========================================================================= */

.home-shell {
    display: grid;
    gap: var(--space-5);
    padding-block: var(--space-4);
    align-items: start;
}

.home-shell > * {
    min-width: 0;
}

/* Phone and small tablet: one column, and the left rail goes last. Sources
   and trends are orientation, not news, so they belong after the reader has
   seen what happened. */
.rail--left {
    order: 3;
}

.rail--right {
    order: 2;
}

.home-center {
    order: 1;
}

@media (min-width: 1024px) {
    .home-shell {
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: var(--space-5);
    }

    .home-center { order: 1; }
    .rail--right { order: 2; }

    /* Two columns at this width, so the left rail runs full width under
       them rather than squeezing the carousel. */
    .rail--left {
        order: 3;
        grid-column: 1 / -1;
    }

    .rail--left .rail-box {
        break-inside: avoid;
    }

    .rail--left {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: var(--space-4);
    }
}

/* The real three column layout. */
@media (min-width: 1280px) {
    .home-shell {
        grid-template-columns: 232px minmax(0, 1fr) 300px;
    }

    .rail--left {
        order: 0;
        grid-column: auto;
        display: block;
    }

    .home-center { order: 1; }
    .rail--right { order: 2; }
}

@media (min-width: 1560px) {
    .home-shell {
        grid-template-columns: 260px minmax(0, 1fr) 330px;
    }
}

/* ---------- Rail shell ---------------------------------------------------- */

.rail-box + .rail-box {
    margin-block-start: var(--space-4);
}

@media (min-width: 1024px) {
    .rail--left .rail-box + .rail-box {
        margin-block-start: 0;
    }
}

@media (min-width: 1280px) {
    .rail--left .rail-box + .rail-box {
        margin-block-start: var(--space-4);
    }
}

/* The left rail is visibly a panel, not more article column: a tinted ground
   and a border, so the eye files it as furniture at a glance. */
.rail--left .rail-box {
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.rail-title {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-block-end: var(--space-2);
    margin-block-end: var(--space-2);
    border-block-end: 2px solid var(--accent);
}

/* ---------- Archive, trends and picks ------------------------------------- */

.archive-list,
.trend-list,
.pick-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.archive-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 36px;
    padding-block: var(--space-1);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    transition: color var(--transition);
}

.archive-list li + li a {
    border-block-start: 1px solid var(--border);
}

.archive-list a:hover {
    color: var(--accent);
}

.archive-count,
.trend-count {
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

/* ---------- Trends -------------------------------------------------------- */

.trend-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.trend-list a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-2);
    margin-inline: calc(var(--space-2) * -1);
    border-radius: var(--radius-sm);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}

.trend-list a:hover {
    background: var(--accent-soft);
    color: var(--accent);
}

.trend-hash {
    color: var(--accent);
    font-weight: 700;
}

.trend-count {
    margin-inline-start: auto;
}

/* ---------- Editor picks --------------------------------------------------- */

.pick-list {
    display: grid;
    gap: var(--space-3);
}

.pick-list > li {
    padding-inline-start: var(--space-3);
    border-inline-start: 2px solid var(--accent);
}

.pick-list a {
    display: block;
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
}

.pick-list a:hover {
    color: var(--accent);
}

.pick-cat {
    display: block;
    margin-block-start: 2px;
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* =========================================================================
   4. Carousel
   ========================================================================= */

.carousel {
    position: relative;
}

/* Scroll snap rather than a transform slider: swipe, keyboard, momentum and
   the scrollbar all come from the browser, and the whole thing still works
   with JavaScript switched off. */
.carousel-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: var(--space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.slide {
    scroll-snap-align: start;
    min-width: 0;
}

.slide-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--surface-2);
    border-radius: var(--radius) var(--radius) 0 0;
}

.slide-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.slide a:hover .slide-media img {
    transform: scale(1.03);
}

/* The panel sits under the image rather than over it. A headline laid on a
   photograph is only legible when the photograph cooperates, and ours arrive
   from ten different newsrooms. */
.slide-body {
    padding: var(--space-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-block-start: none;
    border-radius: 0 0 var(--radius) var(--radius);
    display: grid;
    gap: var(--space-2);
}

/* A slide with no picture is all panel, so it needs its own top border and a
   floor under it, or it collapses into a short strip beside the ones that
   have images. */
.slide--text .slide-body {
    border-block-start: 1px solid var(--border);
    border-radius: var(--radius);
    min-height: 260px;
    align-content: center;
}

.slide-title {
    font-size: var(--fs-lg);
    line-height: var(--lh-tight);
    letter-spacing: -0.02em;
    transition: color var(--transition);
}

.slide a:hover .slide-title {
    color: var(--accent);
}

.slide-desc {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}

@media (min-width: 768px) {
    .slide-body {
        padding: var(--space-4);
    }

    .slide-title {
        font-size: var(--fs-xl);
    }
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding-block-start: var(--space-3);
}

.carousel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    background: var(--bg);
    transition: border-color var(--transition), color var(--transition);
}

.carousel-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.carousel-btn:hover:not(:disabled) {
    border-color: var(--accent);
    color: var(--accent);
}

.carousel-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.carousel-dots {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.carousel-dots button {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--border);
    transition: width var(--transition), background var(--transition);
}

.carousel-dots button[aria-selected='true'] {
    width: 24px;
    background: var(--accent);
}

/* ---------- Supporting stories -------------------------------------------- */

.support-grid {
    display: grid;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--border);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .support-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================================
   5. Live feed column
   ========================================================================= */

.feed-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.feed-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border-block-end: 1px solid var(--border);
}

.feed-head .rail-title {
    margin: 0;
    padding: 0;
    border: none;
}

.feed {
    list-style: none;
    margin: 0;
    padding: 0 var(--space-3);
    display: grid;
}

.feed > li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-2);
    align-items: start;
}

.feed > li + li {
    border-block-start: 1px solid var(--border);
}

.feed time {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    padding-block-start: 2px;
}

.feed a {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    transition: color var(--transition);
}

.feed a:hover {
    color: var(--accent);
}

.feed .is-breaking time {
    color: var(--accent);
}

.feed .is-breaking a {
    font-weight: 600;
}

.feed-all {
    display: block;
    padding: var(--space-3);
    border-block-start: 1px solid var(--border);
    background: var(--surface);
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    text-align: center;
    color: var(--accent);
}

.feed-all:hover {
    text-decoration: underline;
}

/* On a phone a terminal of twenty two headlines is a wall. Cap it and let it
   scroll inside itself, so the reader can reach the rest of the page. */
@media (max-width: 1023px) {
    .feed {
        max-height: 340px;
        overflow-y: auto;
    }
}

/* =========================================================================
   6. Bands
   ========================================================================= */

.band {
    padding-block: var(--space-5);
    border-block: 1px solid var(--border);
    background: var(--surface);
}

.band--closing {
    border-block-end: none;
    padding-block-end: var(--space-7);
}

.band + .home-flow {
    padding-block-start: var(--space-5);
}

/* ---------- Ranked row ------------------------------------------------------ */

.rank-row {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.rank-row > li + li {
    border-block-start: 1px solid var(--border);
}

.rank-row a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding-block: var(--space-3);
}

.rank-number {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    opacity: 0.45;
    transition: opacity var(--transition);
}

.rank-row a:hover .rank-number {
    opacity: 1;
}

.rank-body {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.rank-title {
    font-size: var(--fs-base);
    font-weight: 600;
    line-height: var(--lh-snug);
    transition: color var(--transition);
}

.rank-row a:hover .rank-title {
    color: var(--accent);
}

@media (min-width: 900px) {
    /* auto-fit rather than a fixed five, so a day with four qualifying
       stories fills the row instead of leaving a gap where the fifth would
       have been. */
    .rank-row {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        column-gap: var(--space-4);
    }

    .rank-row > li + li {
        border-block-start: none;
        border-inline-start: 1px solid var(--border);
        padding-inline-start: var(--space-4);
    }

    .rank-row a {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-2);
    }

    .rank-title {
        font-size: var(--fs-sm);
    }
}

/* ---------- Closing headline grid -------------------------------------------- */

.headline-grid {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0;
}

.headline-grid > li {
    border-block-start: 1px solid var(--border);
}

.headline-grid a {
    display: block;
    padding-block: var(--space-3);
}

.headline-title {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: var(--lh-snug);
    transition: color var(--transition);
}

.headline-grid a:hover .headline-title {
    color: var(--accent);
}

@media (min-width: 720px) {
    .headline-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }
}

@media (min-width: 1100px) {
    .headline-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: var(--space-4);
    }
}

@media (min-width: 1400px) {
    .headline-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* =========================================================================
   7. Editorial flow
   ========================================================================= */

.home-flow {
    display: grid;
    gap: var(--space-6);
    padding-block: var(--space-5) var(--space-6);
}

.home-flow > * {
    min-width: 0;
}

.card-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 560px) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1100px) {
    .card-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* A block with only one or two stories. Fixed columns would leave most of the
   row blank, so the cards size themselves and stop. */
.card-grid--thin {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}

.card-grid--thin > .card:only-child {
    max-width: 560px;
}

.compact-list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-4);
    display: grid;
    gap: var(--space-3);
}

.compact-list > li {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
}

@media (min-width: 768px) {
    .compact-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }

    /* With two columns the rule must not sit above the first item of the
       second column. */
    .compact-list > li:nth-child(-n + 2) {
        padding-block-start: 0;
        border-block-start: none;
    }
}

@media (min-width: 1200px) {
    .compact-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: var(--space-4);
    }

    .compact-list > li:nth-child(-n + 4) {
        padding-block-start: 0;
        border-block-start: none;
    }
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

@media (min-width: 768px) {
    .photo-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

/* =========================================================================
   8. Category block compositions
   ========================================================================= */

.section-head h2 a:hover {
    color: var(--accent);
}

/* ---------- lead-list: one large story with a compact column --------------- */

.layout-lead {
    display: grid;
    gap: var(--space-4);
}

.lead-rest {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.lead-rest > li + li {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
}

@media (min-width: 768px) {
    .layout-lead {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        gap: var(--space-5);
    }
}

/* ---------- feature-row: image story with the rest running beside it ------- */

.layout-feature {
    display: grid;
    gap: var(--space-4);
}

.feature-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-3);
    align-content: start;
}

.feature-list > li + li {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border);
}

@media (min-width: 900px) {
    .layout-feature {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: var(--space-5);
    }

    /* A vertical rule, which is what makes the two halves read as one block
       rather than as two stacked ones. */
    .feature-list {
        padding-inline-start: var(--space-5);
        border-inline-start: 1px solid var(--border);
    }
}

/* ---------- duo: two equal editorial cards, then a text list --------------- */

.layout-duo {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 720px) {
    .layout-duo {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

.text-list {
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-4);
    display: grid;
    gap: 0;
}

.text-list > li {
    border-block-start: 1px solid var(--border);
}

.text-list a {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: var(--space-2);
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
    transition: color var(--transition);
}

.text-list a:hover {
    color: var(--accent);
}

.text-list time {
    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
}

@media (min-width: 900px) {
    .text-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--space-5);
    }
}

/* ---------- solo: a single story laid across the row ----------------------- */

@media (min-width: 720px) {
    .layout-solo .card-link {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--space-5);
        align-items: center;
    }

    .layout-solo .card-thumb {
        margin-block-end: 0;
    }

    .layout-solo .card-title {
        font-size: var(--fs-lg);
    }
}

/* ---------- gallery: image first, headline over the picture ---------------- */

.layout-gallery {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 900px) {
    .layout-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
    }

    /* The lead takes two cells and stands taller, so the block has a subject
       rather than four equal squares. */
    .layout-gallery > .card:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }

    .layout-gallery > .card:first-child .card-thumb {
        aspect-ratio: auto;
        height: 100%;
    }

    .layout-gallery > .card:first-child .overlay-text .card-title {
        font-size: var(--fs-lg);
    }
}