@layer layout {
/* ═══════════════════════════════════════════════════════════════════
   PAGE SHELLS + GRIDS
   ═══════════════════════════════════════════════════════════════════ */

.tdn-wrap {
  width: min(100% - (var(--gutter) * 2), var(--width-page));
  margin-inline: auto;
}
.tdn-wrap--text { width: min(100% - (var(--gutter) * 2), var(--width-text)); }

.tdn-main { display: block; }

/* Section rhythm: one rule, applied everywhere, instead of per-file
   margin patches. */
.tdn-stack > * + * { margin-block-start: var(--gap-section); }

/* Deferred rendering, used sparingly.
   4.0.3 put this on every homepage section. Measured on a phone, all
   five sat at exactly 600px — the placeholder — so the document was
   the wrong height until each one scrolled into range, and the page
   lurched as they resolved. A guessed intrinsic size on the main
   scroll path buys a little paint time and pays for it in layout
   instability, which is the worse trade on a news homepage.
   It is now applied only to the footer and the end-of-article block:
   genuinely far down, and never mid-scroll. */
.tdn-defer {
  content-visibility: auto;
  contain-intrinsic-size: auto 700px;
}

/* ── Article shell: content + sticky rail ──────────────────────────── */
.tdn-shell {
  display: grid;
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: start;
  padding-block: clamp(1.75rem, 1rem + 2.5vw, 3rem) var(--s-16);
}
@media (width >= 62rem) {
  .tdn-shell--rail { grid-template-columns: minmax(0, 1fr) 320px; }
}

.tdn-rail {
  display: grid;
  gap: var(--s-8);
  min-width: 0;
}
@media (width >= 62rem) {
  .tdn-rail {
    position: sticky;
    top: calc(var(--header-h) + var(--s-6));
    max-height: calc(100svh - var(--header-h) - var(--s-8));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

/* ── Generic auto-fitting card grid ───────────────────────────────── */
.tdn-grid {
  display: grid;
  gap: var(--gap-card);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--col, 17rem)), 1fr));
}
.tdn-grid--wide { --col: 21rem; }
.tdn-grid--tight { --col: 13rem; }

/* ── Container queries ────────────────────────────────────────────────
   Cards adapt to their container, not the viewport, so the same card
   partial works in the rail, the river and a 3-up grid. v3 needed
   three near-duplicate card components to achieve this.               */
.tdn-cq { container-type: inline-size; }
}