@layer components {
html[data-route="/news"]{

  /* ============ HERO ============ */
  .content .hero-wordmark-text::before { content: none !important; }

  /* ============ FILTER STRIP ============ */
  .row-nw-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
    justify-content: space-between;
    padding: 4px 2px 0;
  }
  .nw-filters {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
  }
  /* C6: .nw-chip base/hover/active now live in the ONE unified chip component
     in news/polish.css (shared with .nw-reel-preset + .nw-reel-hide). Only the
     category chip's toolbar-layout tweaks remain in this route file. */
  .nw-meta {
    display: flex;
    gap: 14px;
    align-items: baseline;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }
  .nw-count { color: var(--white-bright, #F5F5F5); }
  .nw-source { color: var(--white-bright, #F5F5F5); }

  /* Team filter — a dropdown sibling to the category chips. Matches chip styling
     so it reads as part of the same toolbar ("a General, but then also a Team tab"). */
  .nw-team {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
  }
  .nw-team[hidden] { display: none; }
  .nw-team-label {
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }
  /* Team dropdown matches the unified chip toolbar (C6): same 13px mono type,
     34px height + 8px radius so it reads as one control set with the chips. */
  .nw-team-select {
    font-family: var(--f-mono);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1em;
    min-height: 34px;
    color: var(--white-bright, #F5F5F5);
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    padding: 7px 28px 7px 12px;
    border-radius: var(--sns-btn-radius, 8px);
    cursor: pointer;
    max-width: 200px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='%238A8A8A' stroke-width='1.6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .nw-team-select:hover { border-color: var(--accent, #FF2D2D); }
  .nw-team-select:focus-visible { outline: 2px solid var(--accent, #FF2D2D); outline-offset: 1px; }
  /* Native option list reads dark on most platforms; force readable contrast. */
  .nw-team-select option { color: #F5F5F5; background: #111; }

  /* ============ LEAD STORY + TRENDING ============ */
  .row-nw-lead {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 12px;
  }
  .sn--c_lead {
    padding: 0;
    overflow: hidden;
    position: relative;
    min-height: 360px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  }
  .sn--c_lead:hover {
    transform: translateY(-2px);
    border-color: var(--red-bright, #FF3B30);
    box-shadow: 0 6px 28px rgba(255,26,26,.30);
  }
  .lead-img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #0a0a0a linear-gradient(135deg, rgba(255,26,26,.06), rgba(255,45,45,.02));
    overflow: hidden;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .lead-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .lead-vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,5,0) 45%, rgba(5,5,5,.85) 100%);
    pointer-events: none;
  }
  .lead-cat {
    position: absolute;
    top: 14px;
    left: 14px;
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    background: var(--red-primary, #FF1A1A);
    padding: 5px 10px;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(0,0,0,.4);
  }
  .lead-body {
    padding: 18px 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .lead-eyebrow {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .14em;
    color: var(--white-bright, #F5F5F5);
    font-weight: 700;
  }
  .lead-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 30px;
    line-height: 1.05;
    letter-spacing: .01em;
    color: var(--white-bright, #F5F5F5);
    margin: 0;
  }
  .lead-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .lead-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    margin-top: 4px;
  }
  .lead-meta .lead-school-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a1a1a;
    object-fit: contain;
  }
  .lead-meta .lead-school { color: var(--white-bright, #F5F5F5); }

  /* Trending side card */
  .sn--c_trending { padding-bottom: 8px; }
  .trend-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .trend-row {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid rgba(42,42,42,.5);
    text-decoration: none;
    cursor: pointer;
    transition: background .18s ease;
  }
  .trend-row:first-child { border-top: none; }
  .trend-row:hover { background: rgba(255,26,26,.05); }
  .trend-rank {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 22px;
    line-height: 1;
    color: var(--white-bright, #F5F5F5);
    letter-spacing: .04em;
    text-align: center;
  }
  .trend-row:nth-child(1) .trend-rank { color: var(--red-primary, #FF1A1A); }
  .trend-title {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--white-bright, #F5F5F5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .trend-skel .trend-title.sk-bar {
    height: 12px;
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a);
    background-size: 200% 100%;
    animation: news-shimmer 1.4s infinite;
    border-radius: 3px;
  }

  /* ============ FEED GRID ============ */
  .row-nw-feed { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .sn--c_feed { padding-bottom: 18px; }
  .nw-feed-meta {
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .12em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    text-decoration: none;
  }
  .nw-feed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    padding: 4px 16px 8px;
  }
  .nw-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--black-soft, #111);
    border: 1px solid var(--gray-border, #2A2A2A);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    min-height: 200px;
  }
  .nw-card:hover {
    transform: translateY(-3px);
    border-color: var(--red-primary, #FF1A1A);
    box-shadow: 0 6px 22px rgba(255,26,26,.30);
  }
  .nw-card-head {
    position: relative;
    padding: 12px 14px 6px;
    display: flex;
    gap: 8px;
    align-items: center;
  }
  .nw-card-time {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: 16px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    letter-spacing: .1em;
  }
  .nw-card-body {
    padding: 0 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
  }
  .nw-card-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 19px;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--white-bright, #F5F5F5);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nw-card-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nw-card-foot {
    margin-top: auto;
    padding: 10px 14px 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-top: 1px solid rgba(42,42,42,.55);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .1em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }
  .nw-card-school-logo {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1a1a1a;
    object-fit: contain;
    flex-shrink: 0;
  }
  .nw-card-school {
    color: var(--white-bright, #F5F5F5);
    text-transform: uppercase;
  }
  .nw-card-source {
    margin-left: auto;
    color: var(--white-bright, #F5F5F5);
  }

  /* ============ CARD PHOTO + ATTRIBUTION (Unsplash, #762 media) ============ */
  .nw-card-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-bottom: 1px solid var(--gray-border, #2A2A2A);
  }
  .nw-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
  }
  .nw-card:hover .nw-card-img { transform: scale(1.04); }

  /* "Photo: NAME / Unsplash" overlay — shared by lead hero + feed thumbnails.
     Required attribution per the Unsplash API ToS. */
  .nw-credit {
    position: absolute;
    right: 8px;
    bottom: 7px;
    z-index: 3;
    max-width: calc(100% - 16px);
    font-family: var(--f-mono);
    font-size: 16px;
    letter-spacing: .02em;
    line-height: 1.3;
    color: rgba(255,255,255,.66);
    background: rgba(5,5,5,.52);
    padding: 2px 7px;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
  .nw-credit a { color: rgba(255,255,255,.85); text-decoration: none; }
  .nw-credit a:hover { color: var(--white-bright, #F5F5F5); text-decoration: underline; }
  .nw-credit--compact { font-size: 16px; right: 6px; bottom: 6px; padding: 1px 5px; }

  .nw-feed-empty {
    padding: 40px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: center;
    text-align: center;
  }
  .nw-feed-empty-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: 22px;
    letter-spacing: .05em;
    color: var(--white-bright, #F5F5F5);
  }
  .nw-feed-empty-sub {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: 16px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }

  /* ============ SKELETON SHIMMER ============ */
  .lead-skeleton {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
  }
  .sk-bar {
    height: 14px;
    background: linear-gradient(90deg, #1a1a1a, #2a2a2a, #1a1a1a);
    background-size: 200% 100%;
    animation: news-shimmer 1.4s infinite;
    border-radius: 3px;
  }
  .sk-cat { width: 50px; height: 14px; }
  .sk-h1 { height: 28px; }
  .sk-body { height: 12px; }
  .sk-short { width: 65%; }

  /* ============ RESPONSIVE — TABLET ============ */
  @media (max-width: 1080px) {
    .row-nw-lead { grid-template-columns: 1fr; }
    .nw-feed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ============ RESPONSIVE — MOBILE (edge-to-edge, no fixed pixel grids) ============ */
  @media (max-width: 720px) {
    .row-nw-filters {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .nw-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .nw-chip { flex-shrink: 0; }
    .nw-feed-grid { grid-template-columns: 1fr; padding: 4px 12px 8px; gap: 10px; }
    .lead-title { font-size: 24px; }
    .nw-card-title { font-size: 17px; }
    .sn--c_lead { min-height: 0; }
    .nw-card { min-height: 0; }
  }
  @media (max-width: 360px) {
    .row-nw-filters { padding: 4px 0 0; }
    .nw-meta { flex-wrap: wrap; gap: 6px; }
    .lead-body { padding: 14px 14px 16px; }
    .lead-title { font-size: 21px; }
    .nw-card-head { padding: 10px 12px 4px; }
    .nw-card-body { padding: 0 12px 10px; }
    .nw-card-foot { padding: 8px 12px 10px; }
  }

  /* ============================================================
     DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER  (Issue #762, FLUID agent)
     ------------------------------------------------------------
     Appended last. CONSUMES contract vars (--fs-fluid-*, --space-fluid-*)
     from tokens.css (Tokens agent) with inline clamp() fallbacks of the
     same intent, so correct regardless of PR merge order. tokens.css is
     not edited here.

     Patterns: Utopia.fyi fluid type/space (CC-BY); CSS-Tricks "Modern
     Fluid Typography Using CSS Clamp"; MDN container queries (CC-BY-SA).
     Range 344→2160px; rem base + vw slope preserves zoom (WCAG 1.4.4).
     ============================================================ */

  /* Lead headline: one clamp replaces the 30→24→21px step ladder. */
  .lead-title{ font-size: var(--fs-fluid-h1, clamp(1.3125rem, 0.95rem + 1.8vw, 1.875rem)); } /* 21 → 30px */

  /* Feed grid: fluid auto-fit minmax folds the 3-/2-/1-col breakpoint
     ladder into one track that reflows by available width. The card
     title then responds to the CARD width via container query. */
  .nw-feed-grid{ grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr)); } /* 248px floor */
  .nw-card{ container-type: inline-size; container-name: news-nwcard; }
  .nw-card-title{ font-size: var(--fs-fluid-h3, clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem)); } /* 17 → 19px */
  @container news-nwcard (max-width: 13rem){
    .nw-card-title{ font-size: 1rem; -webkit-line-clamp: 2; }
  }

  /* Lead/feed body copy + trending rank scale gently. */
  .lead-excerpt{ font-size: var(--fs-fluid-body, clamp(0.875rem, 0.84rem + 0.18vw, 1rem)); } /* 14 → 16px */
  .trend-rank{ font-size: var(--fs-fluid-h2, clamp(1.375rem, 1.3rem + 0.36vw, 1.625rem)); }  /* 22 → 26px */

  /* Lead card min-height: fluid instead of fixed 360px so it tracks the
     16:9 image at any column width and never over-reserves on mobile. */
  .sn--c_lead{ min-height: clamp(0px, -10rem + 40vw, 22.5rem); } /* 0 → 360px */

  /* ============================================================
     END DESIGN SYSTEM v2 — FLUID RESPONSIVE LAYER
     ============================================================ */
}
html[data-route="/news"]{

  /* ---- ROW ---------------------------------------------------------------
     Single full-width tile. No 2-column grid, no reserved side-rail column —
     that empty reserved column was the source of the "large black box" gap
     once the trending rail was removed. The row now hugs its one child. */
  .row-nw-hero { display: block; }

  /* ---- HERO TILE ---------------------------------------------------------
     BLACK-BOX FIX: height is driven by content, not a fixed min-height, and
     the media is capped by max-height so a very wide column (32" 4K) can't
     stretch the 16:9 image into a giant dark band. The tile is a horizontal
     split (media | body) on desktop that stacks on narrow widths. */
  .sn--c_hero {
    position: relative;
    padding: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    min-height: 0;                 /* never reserve empty space */
    cursor: default;
  }

  .hero-track { position: relative; display: contents; }

  /* Each slide spans the full tile (media + body). Crossfade between slides. */
  .hero-slide {
    grid-column: 1 / -1;
    grid-row: 1;
    display: grid;
    grid-template-columns: subgrid;
    cursor: pointer;
    opacity: 0;
    transition: opacity .5s ease;
  }
  /* Non-subgrid fallback: re-declare the split so older engines still lay out. */
  @supports not (grid-template-columns: subgrid) {
    .hero-slide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  }
  .hero-slide.is-active { opacity: 1; position: relative; z-index: 1; }
  .hero-slide[hidden] { display: none; }
  .sn--c_hero:hover .hero-slide.is-active { box-shadow: none; }

  .hero-media {
    position: relative;
    overflow: hidden;
    background: #0a0a0a linear-gradient(135deg, rgba(255,26,26,.06), rgba(255,45,45,.02));
    aspect-ratio: 16 / 9;
    /* CAP the media so wide columns don't grow a tall black band. */
    max-height: clamp(220px, 30vw, 420px);
    border-right: 1px solid var(--gray-border, #2A2A2A);
  }
  .hero-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
  .sn--c_hero:hover .hero-slide.is-active .hero-img { transform: scale(1.03); }
  .hero-media.no-photo .hero-img { object-fit: cover; }
  .hero-vignette {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.55) 100%),
                linear-gradient(180deg, rgba(5,5,5,0) 55%, rgba(5,5,5,.6) 100%);
  }
  .hero-body {
    display: flex; flex-direction: column; justify-content: center; gap: 12px;
    padding: clamp(18px, 2vw, 34px);
    min-width: 0;
  }
  .hero-eyebrow {
    font-family: var(--f-mono); font-size: 16px; letter-spacing: .14em; font-weight: 700;
    color: var(--white-bright, #F5F5F5);
  }
  .hero-title {
    font-family: var(--f-display, "Graduate", sans-serif);
    font-size: var(--fs-fluid-h1, clamp(1.5rem, 1.1rem + 2vw, 2.5rem)); /* 24 → 40px */
    line-height: 1.04; letter-spacing: .01em; margin: 0;
    color: var(--white-bright, #F5F5F5);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-excerpt {
    font-family: var(--f-body, "Inter", sans-serif);
    font-size: var(--fs-fluid-body, clamp(0.875rem, 0.84rem + 0.18vw, 1rem));
    line-height: 1.5; margin: 0; color: var(--text-muted, var(--gray-light,#C2C2C2));
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .hero-meta {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px;
    font-family: var(--f-mono); font-size: 16px; letter-spacing: .12em;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }
  .hero-school-logo { width: 18px; height: 18px; border-radius: 50%; background: #1a1a1a; object-fit: contain; }
  .hero-school { color: var(--white-bright, #F5F5F5); }
  .hero-dot-sep { opacity: .5; }

  /* ---- CONTROLS ---------------------------------------------------------- */
  .hero-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 38px; height: 38px; display: grid; place-items: center;
    border-radius: 50%;
    color: var(--white-bright, #F5F5F5);
    background: rgba(5,5,5,.55);
    border: 1px solid rgba(255,255,255,.18);
    cursor: pointer;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
  }
  .hero-nav:hover { background: var(--red-primary, #FF1A1A); border-color: var(--red-primary, #FF1A1A); }
  .hero-nav:focus-visible { outline: 2px solid var(--accent, #FF2D2D); outline-offset: 2px; }
  .hero-prev { left: 12px; }
  .hero-next { right: 12px; }

  .hero-dots {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4;
    display: flex; gap: 8px; justify-content: center;
  }
  .hero-dot {
    width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
    background: rgba(255,255,255,.32);
    border: 1px solid rgba(255,255,255,.25);
    transition: background .18s ease, transform .18s ease, width .18s ease;
  }
  .hero-dot:hover { background: rgba(255,255,255,.6); }
  .hero-dot:focus-visible { outline: 2px solid var(--accent, #FF2D2D); outline-offset: 2px; }
  .hero-dot.is-active { background: var(--red-primary, #FF1A1A); border-color: var(--red-primary, #FF1A1A); width: 22px; border-radius: 5px; }

  .hero-skeleton {
    grid-column: 1 / -1;
    padding: clamp(18px, 2vw, 34px);
    display: flex; flex-direction: column; gap: 12px; justify-content: center;
    min-height: clamp(200px, 26vw, 360px);
  }
  .hero-empty {
    grid-column: 1 / -1;
    padding: 48px 24px; text-align: center;
    font-family: var(--f-body, "Inter", sans-serif); font-size: 16px;
    color: var(--text-muted, var(--gray-light,#C2C2C2));
  }

  /* Credit node already styled above; ensure it sits above the hero vignette. */
  .hero-media .nw-credit { z-index: 3; }

  /* prefers-reduced-motion: no crossfade, no scale; JS already disables auto-advance. */
  @media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
    .hero-img { transition: none; }
    .sn--c_hero:hover .hero-slide.is-active .hero-img { transform: none; }
  }

  /* ---- RESPONSIVE: stack media over body, reflow to iPhone width --------- */
  @media (max-width: 760px) {
    .sn--c_hero { grid-template-columns: 1fr; }
    .hero-slide { grid-template-columns: 1fr; }
    @supports not (grid-template-columns: subgrid) { .hero-slide { grid-template-columns: 1fr; } }
    .hero-media {
      grid-column: 1; grid-row: auto;
      max-height: none;            /* let the 16:9 image set its own height when stacked */
      border-right: none; border-bottom: 1px solid var(--gray-border, #2A2A2A);
    }
    .hero-body { grid-column: 1; }
    .hero-nav { width: 34px; height: 34px; }
  }
  @media (max-width: 420px) {
    .hero-body { padding: 14px; gap: 9px; }
    .hero-prev { left: 8px; } .hero-next { right: 8px; }
    .hero-nav { width: 32px; height: 32px; }
    .hero-dots { bottom: 8px; }
    /* Filter chips: keep on one scrollable row instead of stacking tall. */
    .nw-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .nw-filters::-webkit-scrollbar { display: none; }
    .nw-chip { flex: 0 0 auto; }
    .nw-feed-grid { padding-inline: 10px; }
  }
  /* Smallest iPhone (344–360px): nothing should overflow horizontally. */
  @media (max-width: 360px) {
    .hero-title { -webkit-line-clamp: 2; }
    .hero-excerpt { -webkit-line-clamp: 2; }
  }
}
}