/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

/* design tokens measured from foxnews.com (R3/R11); single base theme site-wide */
:root {
  /* brand colors */
  --brand-primary: #036; /* Fox navy — header, headings, links */
  --brand-primary-light: #1b4e81;
  --brand-primary-lighter: #4b78a7;
  --brand-primary-tint: #5787b8; /* newsletter email placeholder (source) */
  --brand-primary-dark: #0d2e5a; /* newsletter cadence badge (source) */
  --brand-secondary: #c20017; /* Fox red — logo, category labels, live badge, bullets */
  --brand-blue: #0052bd; /* alternating Hot Topics accent (paired with Fox red) */
  --brand-red: #d20f26; /* market-negative red */
  --brand-on-primary: #edf6ff; /* near-white text on navy (footer/dark chrome) */
  --footer-muted-color: #a7c6e5; /* muted light-blue copy on navy (footer legal) */
  --footer-divider-color: #174676; /* footer section rule on navy */
  --footer-social-bg: #001d3a; /* footer social icon badge */
  --overlay-scrim: rgb(0 51 102 / 80%); /* navy 80% behind image-overlay labels */

  /* base colors */
  --background-color: #fff;
  --light-color: #f6f8fa;
  --dark-color: #222;
  --text-color: #666; /* body copy / teasers */
  --text-heading-color: #222; /* headlines, titles */
  --text-muted-color: #ccc; /* timestamps, dividers */
  --muted-color: #8f8f8f; /* inactive controls (carousel dots) */
  --muted-color-alt: #949494; /* inactive tab / control surface */
  --link-color: #036;
  --link-hover-color: #1b4e81;
  --border-color: #ddd;
  --border-color-accent: #cedfef; /* light-blue section-bucket top rule (source) */
  --category-page-background: #f6f8fa; /* source category page background rgb(246,248,250) */
  --ad-placeholder-background: #e8e8e8; /* reserved ad slot fill; distinct from page bg until live ads load */
  --card-box-border: #cedfef; /* source category list container border rgb(206,223,239) */
  --divider-color: #ccc; /* source category-rail dividers (columns + articles) */
  --faq-box-border: #cedfef; /* source FAQ container border rgb(206,223,239), matches card list */
  --faq-divider-color: #444; /* source FAQ row divider rgb(68,68,68) */
  --faq-chevron-color: #999; /* source FAQ expand/collapse chevron rgb(153,153,153) */
  --carded-box-border: #cedfef; /* source carded-section container border rgb(206,223,239) */
  --carded-box-gap: 12px; /* source spacing between carded content containers */

  /* state colors */
  --state-positive: #307608; /* markets up */
  --state-negative: #d20f26; /* markets down */
  --state-success-bg: #f1fbe7;
  --game-tag-color: var(--state-positive); /* games "NEW" flag (same green) */

  /* dark section theme (see section metadata `theme: dark`) */
  --dark-section-background: var(--brand-primary);
  --dark-section-color: #fff;

  /* fonts — match source stack casing (Roboto); roboto-fallback kept for metric-matched CLS */
  /* stylelint-disable value-keyword-case */
  --body-font-family: Roboto, roboto-fallback, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --heading-font-family: Roboto, roboto-fallback, "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* stylelint-enable value-keyword-case */

  /* font weights */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* body sizes (mobile-first base) */
  --body-font-size-m: 16px;
  --body-font-size-s: 14px;
  --body-font-size-xs: 12px;
  --body-line-height: 1.5;

  /* compact UI control label (e.g. header CTA pills) — 11px mobile, 13px from 768 (source) */
  --detail-font-size-mobile: 11px;
  --detail-font-size: 13px;

  /* heading sizes (mobile-first base) */
  --heading-font-size-section-front: 30px; /* section-front page title (e.g. "Entertainment"); scales 30→36→48 (source) */
  --heading-font-size-xxl: 30px; /* h1 */
  --heading-font-size-xl: 24px;
  --heading-font-size-l: 20px; /* h2 section titles */
  --heading-font-size-m: 18px; /* h3 rail titles */
  --heading-font-size-s: 16px; /* h4 card titles */
  --heading-font-size-xs: 14px;
  --heading-line-height: 1.2;
  --heading-letter-spacing: -0.5px;
  --heading-letter-spacing-s: -0.25px; /* tighter tracking for smaller headings (rail titles) */

  /* category-news title scale: base mobile values, redeclared per breakpoint (source scale is non-monotonic) */
  --category-lead-title-size: 24px;
  --category-lead-title-lh: 28px;
  --category-lead-title-weight: var(--weight-bold);
  --category-lead-title-ls: normal;
  --category-title-size: var(--body-font-size-s); /* 14px */
  --category-title-lh: 20px;
  --category-title-size-sm: 11px; /* source non-lead size in the squeezed 1024–1279 band */

  /* editorial type tokens */
  --dek-font-size: 16px; /* article sub-headline / lead */
  --eyebrow-font-size: 12px; /* category label / kicker */
  --byline-font-size: 14px;
  --caption-font-size: 12px;

  /* spacing scale (measured recurring values) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-s: 12px;
  --spacing-m: 16px;
  --spacing-l: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 64px;

  /* layout tokens */
  --content-width: 896px; /* article content column */
  --section-max-width: 1392px; /* source content caps ~1392px, centered */
  --section-padding-inline: 16px;
  --rail-width: 300px; /* source sidebar-primary width */
  --two-column-gap: 12px; /* source main-content → sidebar gutter */
  --two-column-width: 1232px; /* 920 main + 12 gap + 300 rail (source .row) */
  --nav-brandbar-max-width: 1440px; /* source brand strip runs near full-width */
  --nav-height: 108px; /* mobile: main bar + hot-topics row; reserved to avoid CLS (R12) */
  --category-thumb-width: 120px; /* category-news non-lead thumbnail (source rail) */
  --video-overlay-scale: 18.6%; /* play badge size as a share of thumbnail width (source) */
  --video-overlay-inset: 3%; /* badge gap from image corner — intentional deviation (source is flush) */
  --video-item-thumb-width: 200px; /* video-library playlist item thumbnail width */
  --video-item-card-width: 174px; /* video-library playlist card width below the rail breakpoint */

  /* radius / shadow / motion */
  --border-radius-s: 2px;
  --border-radius-m: 4px; /* eyebrow / category label */
  --border-radius-l: 8px;
  --border-radius-pill: 20px; /* source Subscribe control */
  --shadow-card: 0 1px 3px rgb(0 0 0 / 8%);
  --shadow-elevated: 0 2px 8px rgb(0 0 0 / 16%);
  --shadow-focused-container: 0 0 8px rgb(0 0 0 / 16%); /* source .playlist-container */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s ease-in-out;
}

/* fallback font (metric-matched to Roboto) */
@font-face {
  font-family: roboto-fallback;
  size-adjust: 99.529%;
  src: local('Arial');
}

/* source-confirmed breakpoints (foxnews.com): mobile base, then 769/1024/1440 min-width (R7/R13) */

/* desktop: full 2-row nav; brand strip stays hidden until wide desktop */
@media (width >= 769px) {
  :root {
    --heading-font-size-section-front: 36px; /* source tablet */
    --heading-font-size-xxl: 36px;
    --heading-font-size-xl: 28px;
    --heading-font-size-l: 22px;
    --heading-font-size-m: 18px;
    --dek-font-size: 18px;
    --section-padding-inline: 24px;
    --nav-height: 102px;
  }
}

/* large desktop */
@media (width >= 1024px) {
  :root {
    --heading-font-size-section-front: 48px; /* source desktop */
    --heading-font-size-xxl: 48px;
    --heading-font-size-xl: 34px;
    --heading-font-size-l: 24px;
    --heading-font-size-m: 20px;
    --dek-font-size: 24px;
    --section-padding-inline: 24px; /* source uses a 24px side gutter */
  }
}

/* desktop: sibling brand strip appears (source 1280px), adding a 3rd row —
   grow the reserved chrome height to match (avoids CLS) */
@media (width >= 1280px) {
  :root {
    --nav-height: 136px;
  }
}

body {
  display: none;
  margin: 0;
  background-color: var(--background-color); /* source body is white; grey lives on category sections */
  color: var(--text-color);
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-m);
  font-weight: var(--weight-regular);
  line-height: var(--body-line-height);
}

body.appear {
  display: block;
}

header {
  min-height: var(--nav-height); /* reserve chrome height to avoid CLS; header is in normal flow (R12) */
}

header .header,
footer .footer {
  visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
  visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
  color: var(--text-heading-color);
  font-family: var(--heading-font-family);
  font-weight: var(--weight-black);
  line-height: var(--heading-line-height);
  letter-spacing: var(--heading-letter-spacing);
  scroll-margin: 40px;
}

h1 { font-size: var(--heading-font-size-xxl); }
h2 { font-size: var(--heading-font-size-xl); }
h3 { font-size: var(--heading-font-size-l); }
h4 { font-size: var(--heading-font-size-m); }
h5 { font-size: var(--heading-font-size-s); }
h6 { font-size: var(--heading-font-size-xs); }

p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 0.8em;
  margin-bottom: 0.25em;
}

code,
pre {
  font-size: var(--body-font-size-s);
}

pre {
  padding: var(--spacing-m);
  border-radius: var(--border-radius-l);
  background-color: var(--light-color);
  overflow-x: auto;
  white-space: pre;
}

main > div {
  margin: 40px 16px;
}

input,
textarea,
select,
button {
  font: inherit;
}

/* links */
a:any-link {
  color: var(--link-color);
  text-decoration: none;
  overflow-wrap: break-word;
  transition: color var(--transition-base), background var(--transition-base);
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* buttons */
p.button-wrapper {
  margin: var(--spacing-s) 0;
}

a.button:any-link,
button.button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: 0;
  border: 2px solid transparent;
  border-radius: var(--border-radius-m);
  padding: 0.6em 1.4em;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size-s);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

a.button[aria-disabled="true"],
button.button:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

/* primary — Fox navy fill */
a.button.primary,
button.button.primary {
  border-color: var(--brand-primary);
  background-color: var(--brand-primary);
  color: var(--background-color);
}

a.button.primary:hover,
a.button.primary:focus-visible,
button.button.primary:hover,
button.button.primary:focus-visible {
  border-color: var(--brand-primary-light);
  background-color: var(--brand-primary-light);
  color: var(--background-color);
}

a.button.primary[aria-disabled="true"],
button.button.primary:disabled {
  border-color: var(--border-color);
  background-color: var(--border-color);
  color: var(--text-color);
}

/* secondary — navy outline */
a.button.secondary,
button.button.secondary {
  border-color: var(--brand-primary);
  background-color: transparent;
  color: var(--brand-primary);
}

a.button.secondary:hover,
a.button.secondary:focus-visible,
button.button.secondary:hover,
button.button.secondary:focus-visible {
  border-color: var(--brand-primary-light);
  background-color: var(--light-color);
  color: var(--brand-primary-light);
}

a.button.secondary[aria-disabled="true"],
button.button.secondary:disabled {
  border-color: var(--border-color);
  background-color: var(--light-color);
  color: var(--text-color);
}

/* accent — Fox red, high-impact CTA (subscribe / live) */
a.button.accent,
button.button.accent {
  border-color: var(--brand-secondary);
  background-color: var(--brand-secondary);
  color: var(--background-color);
}

a.button.accent:hover,
a.button.accent:focus-visible,
button.button.accent:hover,
button.button.accent:focus-visible {
  border-color: var(--brand-red);
  background-color: var(--brand-red);
  color: var(--background-color);
}

a.button.accent[aria-disabled="true"],
button.button.accent:disabled {
  border-color: var(--border-color);
  background-color: var(--border-color);
  color: var(--text-color);
}

/* compact size variant — small borderless UI-chrome pills (e.g. header CTAs), ~30px tall */
a.button.compact:any-link,
button.button.compact {
  padding: 6px 8px;
  border-width: 0;
  font-size: var(--detail-font-size);
  line-height: 18px;
}

/* eyebrow / category label (Fox red pill) — authored as a leading strong/em or .eyebrow */
.eyebrow,
.category-label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: var(--border-radius-m);
  background-color: var(--brand-secondary);
  color: #fff;
  font-size: var(--eyebrow-font-size);
  font-weight: var(--weight-black);
  line-height: 1.5;
  text-transform: uppercase;
}

/* form controls */
input,
textarea,
select {
  box-sizing: border-box;
  padding: 0.6em 0.8em;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-m);
  background-color: var(--background-color);
  color: var(--text-heading-color);
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}

main img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px;
}

.icon img {
  height: 100%;
  width: 100%;
}

/* sections */
main > .section {
  margin: 40px 0;
}

/* empty section (metadata consumed) must not render its margin/separator */
main > .section:empty {
  display: none;
  margin: 0;
}

main > .section > div {
  max-width: var(--section-max-width);
  margin: auto;
  padding: 0 var(--section-padding-inline);
}

/* 24px gap below the header before the first section (source) */
main > .section:first-of-type {
  margin-top: var(--spacing-l);
}

/* section-front leads with .page-heading, which carries its own top margin */
main > .section.two-column:first-of-type {
  margin-top: 0;
}

/* laptop band: source narrows the gutter to 16px, widening the main column to 680px */
@media (width >= 1024px) and (width < 1280px) {
  main > .section.two-column {
    --section-padding-inline: 16px;
  }
}

/* trailing gap before the footer; the :has() clause covers a two-column section
   trailed by an empty metadata section, which :last-of-type alone misses */
main > .section.two-column:last-of-type,
main > .section.two-column:has(+ .section:empty:last-of-type) {
  margin-bottom: 32px;
}

@media (width >= 1024px) {
  main > .section.two-column:last-of-type,
  main > .section.two-column:has(+ .section:empty:last-of-type) {
    margin-bottom: 36px;
  }
}

/* 1px #ccc hairline in the gap above each section (source .collection::before) */
main > .section:not(:first-of-type) {
  position: relative;
}

main > .section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 100%;
  max-width: var(--section-max-width);
  height: 1px;
  transform: translateX(-50%);
  background: var(--text-muted-color);
}

/* category masthead+content split: no separator under the page heading */
main > .section.category:not(:first-of-type)::before {
  content: none;
}

/* divide stacked collections within the two-column main column (same 1px bar) */
main .section-main-column > .cards-wrapper:has(.cards.news-cards),
main .section-main-column > .default-content-wrapper:has(h2),
main .section-main-column > .video-library-wrapper {
  position: relative;
}

main .section-main-column > .cards-wrapper:has(.cards.news-cards)::before,
main .section-main-column > .default-content-wrapper:has(h2)::before,
main .section-main-column > .video-library-wrapper::before {
  content: "";
  position: absolute;
  top: calc(var(--two-column-gap) / -2);
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--text-muted-color);
}

/* source closes a news feed with plain space, so whatever follows one doesn't
   repeat a rule there */
main .section-main-column > .cards-wrapper:has(.cards.news-cards) + *::before {
  display: none;
}

/* category pages don't draw the section-front stacked-collection divider between
   the card list and the editorial intro (source has no rule there) */
main .section.category .section-main-column > .default-content-wrapper:has(h2)::before {
  content: none;
}

/* games hub heading carries no top divider (source game-hub has no rule above it) */
main .section-main-column > .default-content-wrapper:has(h2):has(+ .cards-wrapper .cards.games)::before {
  content: none;
}

/* section-front heading row: title left, Subscribe right; tracks the centered content edge */
main .section.two-column .default-content-wrapper:has(> h1:first-child) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  max-width: var(--two-column-width);
  margin: var(--spacing-s) auto;
  padding: 0 var(--section-padding-inline);
}

@media (width >= 768px) {
  main .section.two-column .default-content-wrapper:has(> h1:first-child) {
    margin-block: var(--spacing-m);
  }
}

main .section h1.page-title,
main .section .default-content-wrapper > h1:first-child {
  margin: 0;
  color: var(--text-heading-color);
  font-size: var(--heading-font-size-section-front);
  font-weight: var(--weight-bold);
  line-height: normal;
  letter-spacing: -1px;
}

/* the two-column section-front tablet band starts at 768, not the token's 769 */
@media (width >= 768px) and (width < 769px) {
  main .section.two-column .default-content-wrapper > h1:first-child {
    font-size: 36px;
  }
}

/* Subscribe control: navy pill, measured 97x42; mobile-only (source hides it >=768) */
main .section.two-column .default-content-wrapper .subscribe-btn {
  flex: none;
  padding: var(--spacing-s) var(--spacing-m);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius-pill);
  background: var(--background-color);
  color: var(--link-color);
  font-family: inherit;
  font-size: var(--body-font-size-s);
  font-weight: var(--weight-semibold);
  line-height: normal;
  cursor: pointer;
}

@media (width >= 768px) {
  main .section.two-column .default-content-wrapper .subscribe-btn {
    display: none;
  }
}

/* nancy-guthrie: no Subscribe control in the heading row (all viewports) */
main:has(h1#nancy-guthrie) .section.two-column .default-content-wrapper .subscribe-btn {
  display: none;
}

/* section metadata */
main .section.light,
main .section.highlight {
  background-color: var(--light-color);
  margin: 0;
  padding: 40px 0;
}

/* section color themes via metadata (theme: dark/light); brand only re-declares --dark-section-* tokens (R6) */
main .section[data-theme='dark'] {
  background-color: var(--dark-section-background);
  color: var(--dark-section-color);
}

main .section[data-theme='dark'] :is(h1, h2, h3, h4, h5, h6),
main .section[data-theme='dark'] a:any-link,
main .section[data-theme='dark'] time {
  color: var(--dark-section-color);
}

main .section[data-theme='light'] {
  background-color: var(--light-color);
}

/* section heading with a trailing "see all" link: link right-aligned on the heading row */
main .default-content-wrapper h2:has(> a) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-m);
}

/* stylelint-disable-next-line no-descending-specificity */
main .default-content-wrapper h2 > a:any-link {
  font-size: var(--body-font-size-s);
  font-weight: var(--weight-regular);
  color: var(--link-color);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Features & Faces kicker: tilted banner, gradient text+outline via 3 stacked backgrounds */
main .section:has(.cards.features) .default-content-wrapper h3 {
  display: inline-block;
  margin: 0;
  padding: 5px 9px;
  border: 3px solid transparent;
  border-radius: 5px;
  background:
    linear-gradient(#ff9c00, #ff00b0) text,
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(154.51deg, #ff9c00 0%, #ff00b0 100%) border-box;
  color: transparent;
  font-size: 24px;
  line-height: 28px;
  text-transform: uppercase;
  transform: rotate(-5deg) scale(1.05);
  transform-origin: left center;
}

/* top padding so the tilted kicker clears the divider above it (source ~27px) */
main .section:has(.cards.features) {
  padding-top: 28px;
}

/* raise the kicker heading above the grid so it overlaps the first cards (source) */
main .section:has(.cards.features) .default-content-wrapper:has(> h3) {
  position: relative;
  z-index: 1;
  margin-bottom: -40px; /* source kicker overlaps the first cards by ~41px */
}

/* category masthead: doc authors two crops (wide strip first, tall crop second); gate below toggles them by breakpoint since EDS can't art-direct one picture */

/* mobile: masthead fills content width at source fixed height, trimmed vertically */
main .section.category .default-content-wrapper:has(h1) picture img {
  display: block;
  width: 100%;
  max-width: none;
  height: 152.95px; /* source mobile masthead art height */
  object-fit: cover;
}

/* out-dent the leading block 4px each side → source 12px inset (296/351/401) */
main .section.category .default-content-wrapper:has(h1) > p:nth-of-type(-n+2):has(picture),
main .section.category .default-content-wrapper:has(h1) > picture:first-child {
  display: block;
  width: calc(100% + 8px);
  margin: 0 -4px var(--spacing-m);
}

/* tablet+: wide strip at source fixed size per band, centered (720x103 / 992x142 / 1232x176) */
@media (width >= 768px) {
  main .section.category .default-content-wrapper:has(h1) > p:nth-of-type(-n+2):has(picture),
  main .section.category .default-content-wrapper:has(h1) > picture:first-child {
    width: 100%;
    margin: 0 0 var(--spacing-m);
    text-align: center; /* center the fixed strip in the content band */
  }

  main .section.category .default-content-wrapper:has(h1) picture img {
    display: inline-block;
    width: 720px; /* source tablet strip */
    max-width: 100%;
    height: 103px;
    object-fit: cover;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main .section.category .default-content-wrapper:has(h1) picture img {
    width: 992px; /* source laptop strip */
    max-width: none; /* break out of the 920px content wrapper */
    height: 142px;
    margin-left: calc((100vw - 992px) / 2 - var(--section-padding-inline)); /* center in viewport (source) */
  }
}

@media (width >= 1280px) {
  main .section.category .default-content-wrapper:has(h1) picture img {
    width: 1232px; /* source large-desktop strip (covers 1366) */
    max-width: none; /* break out of the content wrapper */
    height: 176px;
  }
}

/* masthead art direction: when a 2nd (tall) crop exists, show it below 768px and hide the wide strip */
main .section.category .default-content-wrapper:has(> p:nth-of-type(1) picture):has(> p:nth-of-type(2) picture) > p:nth-of-type(1) {
  display: none; /* mobile: hide the wide strip */
}

main .section.category .default-content-wrapper:has(> p:nth-of-type(1) picture):has(> p:nth-of-type(2) picture) > p:nth-of-type(2) {
  display: block; /* mobile: show the tall crop */
}

@media (width >= 768px) {
  main .section.category .default-content-wrapper:has(> p:nth-of-type(1) picture):has(> p:nth-of-type(2) picture) > p:nth-of-type(1) {
    display: block; /* restore wide strip; tablet/desktop unchanged */
  }

  main .section.category .default-content-wrapper:has(> p:nth-of-type(1) picture):has(> p:nth-of-type(2) picture) > p:nth-of-type(2) {
    display: none;
  }
}

/* category pages paint the whole page light-gray (source body is #f6f8fa); white
   boxes sit on top. Keyed off the category section so it re-skins via the token (R6) */
body:has(main > .section.category) {
  background-color: var(--category-page-background);
}

main .section.category {
  background: var(--category-page-background);
}

/* mobile: category section flush under the header (source); desktop restores rhythm */
main > .section.category,
main > .section.category:first-of-type {
  margin: 0;
}

@media (width >= 768px) {
  main > .section.category,
  main > .section.category:first-of-type {
    margin: var(--spacing-l) 0 40px; /* 24px top / 40px bottom, tablet+ (source breakpoint 768) */
  }
}

/* category headings: source uses 700 weight + 14px body (scoped, R6/R8) */
main .section.category .default-content-wrapper h1 {
  min-height: 36px; /* source page-heading box; grows if the title wraps */
  margin: var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m); /* 16px 12px 16px 16px, source */
  font-size: 30px; /* source mobile page-heading */
  font-weight: var(--weight-bold); /* 700, source category title */
  line-height: normal; /* source */
  letter-spacing: normal; /* source (not the site-wide -0.5px) */
}

@media (width >= 769px) {
  main .section.category .default-content-wrapper h1 {
    margin: var(--spacing-l) 0 var(--spacing-s); /* 24px top / 12px bottom, source desktop */
  }
}

/* NBA-style pages: cap the plain-.category heading wrapper to the sibling list's centered 1232px band so both share one left edge */
@media (width >= 1280px) {
  main .section.category:not(.two-column):has(~ .section.category.two-column) .default-content-wrapper:not(:has(picture)) {
    max-width: var(--two-column-width); /* 1232, matches two-column-inner */
    margin-inline: auto;
    padding-inline: 0; /* sit at the inner edge, same as the list box */
  }

  main .section.category:not(.two-column):has(~ .section.category.two-column) .default-content-wrapper:not(:has(picture)) h1 {
    margin-left: 0; /* align to the inner/list-box left edge */
  }
}

/* laptop band: list box is left-anchored at 16px but the heading wrapper keeps
   24px pad → pull the heading left 8px so it shares the 16px list edge */
@media (width >= 1024px) and (width <= 1279px) {
  main .section.category:not(.two-column):has(~ .section.category.two-column) .default-content-wrapper:not(:has(picture)) h1 {
    margin-left: calc(var(--spacing-m) - var(--spacing-l)); /* -8px → 16px edge */
  }
}

/* nancy-guthrie: unwrap the heading container (keep the h1, drop the div's own box) */
main .section.category .default-content-wrapper:has(> h1#nancy-guthrie) {
  display: contents;
}

/* nancy-guthrie mobile: H1 width = viewport - 28px */
@media (width <= 767px) {
  main .section.category .default-content-wrapper h1#nancy-guthrie {
    width: calc(100vw - 28px);
    margin: var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m); /* 16px 12px 16px 16px */
  }
}

/* nancy-guthrie desktop H1: source page-heading width via side margins */
@media (width >= 768px) and (width <= 1439px) {
  main .section.category .default-content-wrapper h1#nancy-guthrie {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px → 720@768, 976@1024 */
  }
}

@media (width >= 1440px) {
  main .section.category .default-content-wrapper h1#nancy-guthrie {
    max-width: 1280px;
    margin: var(--spacing-l) auto var(--spacing-s); /* 24px top, auto sides, 12px bottom */
    padding: 0 var(--spacing-l); /* 0 24px */
  }
}

/* 4K: heading wrapper at 1280 with 640 side margins (escape the 1392 cap) */
@media (width >= 2560px) {
  main .section.category .default-content-wrapper:has(> h1#nancy-guthrie) {
    display: block; /* restore the box so its margin/padding apply (overrides display:contents) */
    max-width: none;
    margin: var(--spacing-l) 640px var(--spacing-s); /* 24px 640px 12px → width 1280 */
    padding: 0 var(--spacing-l); /* 0 24px */
  }

  main .section.category .default-content-wrapper h1#nancy-guthrie {
    margin: 0;
    padding: 0;
  }
}

/* page-heading size ladder: 36px tablet, 48px laptop+ (source); height auto */
@media (width >= 768px) {
  main .section.category .default-content-wrapper h1 {
    height: auto;
    font-size: 36px;
  }
}

@media (width >= 1024px) {
  main .section.category .default-content-wrapper h1 {
    font-size: 48px;
  }
}

/* Charlie Kirk page heading is 24px (source), not the 30px category default */
main .section.category .default-content-wrapper h1#charlie-kirk {
  font-size: 24px;
}

/* large-desktop: charlie-kirk heading inset to align with the content band (source) */
@media (width >= 1280px) {
  main .section.category .default-content-wrapper h1#charlie-kirk {
    margin-left: 70px;
  }
}

main .section.category .default-content-wrapper h2 {
  font-size: 24px; /* source editorial heading — mobile */
  font-weight: var(--weight-bold); /* 700, not black */
}

@media (width >= 769px) {
  main .section.category .default-content-wrapper h2 {
    font-size: 36px; /* source editorial heading — desktop */
  }
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.category .default-content-wrapper p {
  font-size: var(--body-font-size-s);
  line-height: 1.5;
  color: var(--text-color);
}

/* editorial intro rhythm (source): paragraphs carry the 14px, images have no own margin */
/* stylelint-disable no-descending-specificity */
main .section.category .default-content-wrapper > p {
  margin: 0 0 14px; /* source paragraph spacing */
}

/* image paragraph: no own margin — 14px above comes from the preceding paragraph (source) */
main .section.category .default-content-wrapper > p:has(picture) {
  margin: 0;
}

/* editorial inline images: fixed 711.11x400 box (source), centered and clipped to the column (no-H1 wrapper only) */
main .section.category .default-content-wrapper:not(:has(h1)) > p:has(picture) {
  text-align: center; /* center the fixed box within the column */
  overflow: hidden; /* clip the box to the column — no horizontal scroll */
}

main .section.category .default-content-wrapper:not(:has(h1)) > p:has(picture) picture,
main .section.category .default-content-wrapper:not(:has(h1)) > p:has(picture) img {
  display: inline-block;
  width: 711.11px; /* source fixed image box */
  height: 400px;
  max-width: none; /* override the global img max-width so it stays fixed */
  object-fit: cover;
}
/* stylelint-enable no-descending-specificity */

/* two-column: wide main column + ~300px rail; stacks mobile, side-by-side desktop */
main .section.two-column .two-column-inner {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  max-width: var(--two-column-width);
  margin-inline: auto;
}

/* homepage lead (railless two-column) spans the full content band, aligning its
   left edge with the features/ads/category-news bands below (source) */
main .section.two-column:not(.category) .two-column-inner {
  max-width: var(--section-max-width);
}

/* rail-bearing section-fronts keep the 1232px band, overriding the railless rule above */
main .section.two-column:has(.section-rail-column) .two-column-inner {
  max-width: var(--two-column-width);
}

/* homepage (non-category) rail-bearing lead widens to the full 1392 band at >=1440 */
@media (width >= 1440px) {
  main .section.two-column:not(.category):has(.section-rail-column) .two-column-inner {
    max-width: var(--section-max-width);
  }

  /* but a section-front that leads with a page-title H1 (e.g. Entertainment)
     keeps the 1232 band so its content stays aligned to that heading's edge.
     Same base specificity as the widen rule above + one extra :has(), so it wins */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.two-column:not(.category):has(.section-rail-column):has(> .default-content-wrapper > h1) .two-column-inner {
    max-width: var(--two-column-width);
  }
}

/* category two-column: content runs edge-to-edge, no side gutter (source) */
main .section.category.two-column > .two-column-inner {
  padding-inline: 0;
}

/* >=1280 the source article/category container is a fixed 1280px centered row
   (width:1280px; margin:0 auto), edge-to-edge with no side gutter. */
@media (width >= 1280px) {
  main .section.category.two-column > .two-column-inner {
    max-width: 1280px;
    padding-inline: 0;
  }
}

main .section.two-column .section-main-column,
main .section.two-column .section-rail-column {
  display: flex;
  flex-direction: column;
  gap: var(--two-column-gap);
  min-width: 0;
}

/* rail is desktop-only; source hides it on mobile */
main .section.two-column .section-rail-column {
  display: none;
}

/* mobile/tablet: reveal a "More on …" rail or timeline below the article (ads stay hidden) */
main .section.two-column .section-rail-column:has(.news-cards.more),
/* stylelint-disable-next-line no-descending-specificity */
main .section.two-column .section-rail-column:has(.timeline) {
  display: flex;
  margin-top: var(--spacing-m);
}

/* "More on" sidebar inset — source aside.sidebar-article (12px 11px 0) */
main .section.two-column .section-rail-column:has(.news-cards.more) {
  margin: 0;
  padding: var(--spacing-s) 11px 0; /* 11px: no token */
}

@media (width >= 768px) and (width <= 1023px) {
  main .section.two-column .section-rail-column:has(.news-cards.more) {
    padding: var(--spacing-s) var(--spacing-l);
  }
}

@media (width >= 1024px) {
  main .section.two-column .section-rail-column:has(.news-cards.more) {
    padding: 0; /* desktop rail: no inset */
  }
}

/* reveal the otherwise desktop-only rail on mobile/tablet so the newsletter shows */
/* stylelint-disable-next-line no-descending-specificity */
main .section.two-column .section-rail-column:has(.newsletter) {
  display: flex;
  margin-top: var(--spacing-m);
}

/* rail ads are desktop-only (source); hide them where the rail is revealed on mobile */
@media (width < 1024px) {
  main .section.two-column .section-rail-column > .static-ad-wrapper {
    display: none;
  }
}

/* "More on …" rail box; carded pages box it via .category-box, so only add it on non-carded pages */
main .section.two-column:not(.carded) .section-rail-column .news-cards.more.rail {
  box-sizing: border-box;
  padding: var(--spacing-m);
  border: 1px solid var(--card-box-border);
  background: var(--background-color);
}

/* bordered container enclosing the article list + its pagination (source box) */
main .section.category .category-article-list,
main .section.two-column .category-article-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-l);
  box-sizing: border-box;
  margin-top: var(--spacing-m); /* 16px below the page title, source */
  padding: var(--spacing-m); /* 16px, source mobile */
  border: 1px solid var(--card-box-border);
  background: var(--background-color);
}

/* mobile/tablet: two-column list box full-bleeds; source insets it into the main column only at >=1024 */
main .section.two-column .category-article-list {
  border-inline-width: 0;
  margin: 0 calc(-1 * var(--section-padding-inline));
  padding: var(--spacing-l);
}

@media (width >= 769px) {
  main .section.category .category-article-list {
    padding: var(--spacing-l);
  }
}

/* laptop+: inset within the main column, filling its fluid width */
@media (width >= 1024px) {
  main .section.two-column .category-article-list {
    border-inline-width: 1px;
    margin: 0;
    width: 100%;
    padding: var(--spacing-m);
  }
}

@media (width >= 1280px) {
  main .section.two-column .category-article-list {
    padding: var(--spacing-l);
  }
}

/* nancy-guthrie article-list: inset card — 0 0 12px margin at all viewports;
   16px padding at 320/375/425 + 1024, 24px at 768 + 1440/2560 (source) */
main:has(h1#nancy-guthrie) .section.two-column .category-article-list {
  margin: 0 0 var(--spacing-s); /* 0 0 12px */
  padding: var(--spacing-m); /* 16px */
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#nancy-guthrie) .section.two-column .category-article-list {
    padding: var(--spacing-l); /* 24px at 768 */
  }
}

@media (width >= 1280px) {
  main:has(h1#nancy-guthrie) .section.two-column .category-article-list {
    padding: var(--spacing-l); /* 24px at 1440/2560 */
  }
}

/* single-column (no rail): title, list, and FAQ share one 920px left-anchored
   column (source) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.category:not(.two-column) .default-content-wrapper {
  box-sizing: border-box;
  max-width: 920px;
  margin-inline: 0 auto;
}

/* large/4K: heading wrapper centers on the same 1280px band as the article list
   below it, so both share one left edge */
@media (width >= 1440px) {
  main .section.category:not(.two-column) .default-content-wrapper {
    max-width: 1280px;
    margin: var(--spacing-l) auto var(--spacing-s);
    padding: 0 var(--spacing-l);
  }
}

/* iran (two-column) heading wrapper mirrors the single-column reference box */
@media (width >= 1440px) {
  main .section.two-column .default-content-wrapper:has(> h1#iran) {
    padding: 0 var(--spacing-l); /* 0 24px */
  }
}

@media (width >= 2560px) {
  main .section.two-column .default-content-wrapper:has(> h1#iran) {
    margin: var(--spacing-l) 640px var(--spacing-s); /* 24px 640px 12px */
  }
}

/* mobile + tablet: barron-trump heading wrapper drops the side gutter (source) */
@media (width <= 768px) {
  main .section.category .default-content-wrapper:has(> h1#barron-trump) {
    padding-inline: 0;
  }
}

/* tablet: barron-trump heading margin 16px 24px (source) */
@media (width >= 768px) and (width <= 1023px) {
  main .section.category .default-content-wrapper h1#barron-trump {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px */
  }

  /* content band runs flush — no left inset (source) */
  main:has(h1#barron-trump) > .section.category.two-column > .two-column-inner {
    padding-left: 0;
  }

  /* tighten heading→image gap to 16px (source): the heading section's 40px
     bottom margin and the two-column section's 24px top margin collapse — drop
     the heading section's bottom so the h1's own 16px sets the gap */
  main > .section.category:has(h1#barron-trump) {
    margin-bottom: 0;
  }

  main:has(h1#barron-trump) > .section.category.two-column {
    margin-top: var(--spacing-m); /* 16px */
  }
}

/* laptop: megan-fox page heading flush — no gutter/rail margin (1440+ unchanged) */
@media (width >= 1024px) and (width <= 1439px) {
  main .section.category .default-content-wrapper:has(> :is(h1#megan-fox, h1#barron-trump)) {
    padding: 0;
  }

  /* megan-fox heading: small left inset matching the content band (source) */
  main > .section.category:has(:is(h1#megan-fox, h1#barron-trump)) {
    margin: var(--spacing-m) var(--spacing-l); /* 16 24 */
  }

  main .section.category .default-content-wrapper :is(h1#megan-fox, h1#barron-trump) {
    margin: var(--spacing-m) var(--spacing-l) var(--spacing-m) 0; /* 16 24 16 0 */
  }

  /* content band keeps a 16px left inset (source), not flush to the edge */
  main:has(:is(h1#megan-fox, h1#barron-trump)) > .section.category.two-column > .two-column-inner {
    padding-left: var(--spacing-m); /* 16px left inset */
  }
}

/* 1280 band: barron-trump content band runs flush — no left inset, full 1280 width (source) */
@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#barron-trump) > .section.category.two-column > .two-column-inner {
    max-width: 1280px;
    padding-left: 0;
  }
}

/* >=1280: widen the megan-fox content band so the editorial box is 920px
   (inner 1260 − 16 main padL − 24 gap − 300 rail); the rail shifts right and
   keeps the 24px gutter. Centered via margin-inline:auto, so no overflow. */
@media (width >= 1280px) {
  main:has(h1#megan-fox) .section.two-column .two-column-inner {
    max-width: 1260px;
  }
}

/* desktop: megan-fox two-column content section runs flush — no section margin */
@media (width >= 1024px) {
  main:has(:is(h1#megan-fox, h1#barron-trump)) > .section.category.two-column {
    margin: 0;
  }

  /* barron-trump content section: 16px left inset (source) */
  main:has(h1#barron-trump) > .section.category.two-column {
    padding-left: var(--spacing-m);
  }

  /* megan-fox: widen the main→rail gutter so the article list and the
     "More on" rail stay clearly separated (forced 24px, wider than source) */
  main:has(h1#megan-fox) .section.two-column .two-column-inner {
    gap: var(--spacing-l); /* 24px */
  }

  /* heading sits flush above the image — no bottom gap (source) */
  main > .section.category:has(:is(h1#megan-fox, h1#barron-trump)) {
    margin-bottom: 0;
  }

  /* the section provides the horizontal offset; zero the wrapper's own so the
     heading aligns to the content band below (not double-indented) */
  main .section.category .default-content-wrapper:has(> :is(h1#megan-fox, h1#barron-trump)) {
    margin: 0;
    padding: 0;
  }

  main .section.category .default-content-wrapper :is(h1#megan-fox, h1#barron-trump) {
    margin-bottom: 0;
  }

  /* content box runs flush — drop the auto side margins (source) */
  main:has(h1#barron-trump) > .section.category.two-column > .two-column-inner {
    margin-inline: 0;
  }
}

/* laptop: barron-trump heading section margin 16px 24px (source) */
@media (width >= 1024px) and (width <= 1439px) {
  main > .section.category:has(h1#barron-trump) {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px */
  }

  main .section.category .default-content-wrapper:has(> h1#barron-trump) {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px */
  }
}

/* laptop: barron-trump heading runs flush — no margin/padding */
@media (width >= 1024px) and (width <= 1439px) {
  main .section.category .default-content-wrapper h1#barron-trump {
    margin: 0;
    padding: 0;
  }
}

/* large: megan-fox/barron-trump heading section centered 1280 band, padding 0 24px */
@media (width >= 1440px) {
  main > .section.category:has(:is(h1#megan-fox, h1#barron-trump)) {
    max-width: 1280px;
    margin: auto;
    padding: 0 var(--spacing-l); /* 0 24px */
  }

  /* content band keeps the heading-aligned left edge but extends right to 1260
     (936 main col + 24 gutter + 300 rail) so the fixed 920px list fits without
     overhanging into the rail; the rail shifts right, keeping a 24px gutter */
  main:has(h1#barron-trump) > .section.category.two-column {
    margin: 0 52px 0 80px;
    padding: 0 var(--spacing-l); /* 0 24px */
  }

  main:has(h1#barron-trump) > .section.category.two-column > .two-column-inner {
    max-width: 1280px;
    margin: auto;
    padding-left: 0;
  }

  /* 24px main→rail gutter (matches megan-fox), so the 920px list clears the rail */
  /* stylelint-disable-next-line no-descending-specificity */
  main:has(h1#barron-trump) .section.two-column .two-column-inner {
    gap: var(--spacing-l); /* 24px */
  }
}

/* large: barron-trump heading — 24px left inset, aligns with the content band */
@media (width >= 1440px) {
  main .section.category .default-content-wrapper h1#barron-trump {
    margin: 0 0 0 var(--spacing-l); /* 24px left inset */
    padding: 0;
  }
}

/* megan-fox heading: no margin at any viewport (source) */
main .section.category .default-content-wrapper h1#megan-fox {
  margin: 0;
}

/* mobile: megan-fox heading wrapper margin 16px 12px 16px 16px (source).
   Page-scoped prefix raises specificity so it wins over any generic
   default-content-wrapper margin on the built site. */
@media (width <= 767px) {
  main:has(h1#megan-fox) .section.category .default-content-wrapper:has(> h1#megan-fox) {
    margin: var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m); /* 16px 12px 16px 16px */
    padding-inline: 0;
  }
}

/* tablet/laptop: megan-fox heading wrapper — no left inset so the h1 text
   starts flush at the blue box's left edge (source); keeps 16px top/bottom
   and 24px right. The section's own 24px margin positions the box. */
@media (width >= 768px) and (width <= 1439px) {
  main .section.category .default-content-wrapper:has(> h1#megan-fox) {
    margin: var(--spacing-m) var(--spacing-l) var(--spacing-m) 0; /* 16px 24px 16px 0 */
    padding-inline: 0;
  }

  /* heading section margin 16px 24px (source) */
  main > .section.category:has(h1#megan-fox) {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px */
  }
}

/* 4K: heading section side margin widens to 640px (source) */
@media (width >= 2560px) {
  main > .section.category:has(:is(h1#megan-fox, h1#barron-trump)) {
    margin: var(--spacing-l) 640px var(--spacing-s); /* 24px 640px 12px */
    padding: 0 var(--spacing-l); /* 0 24px */
  }

  /* content band keeps the heading-aligned left edge (640) but extends right to
     a 1260 band so the 920px list clears the rail; rail shifts right, 24px gutter */
  main:has(h1#barron-trump) > .section.category.two-column {
    margin: 0 612px 0 640px;
  }

  /* 4K page heading: 53.33 box, 48px (source) */
  main .section.category .default-content-wrapper :is(h1#megan-fox, h1#barron-trump) {
    height: 53.33px;
    font-size: 48px;
  }
}

/* Donald Trump heading — left-align with the reference (Barron) h1 per
   breakpoint. Donald's h1 sits in the combined two-column section and shares
   its wrapper (which keeps the section gutter) with the masthead image, so the
   offset is applied on the h1 directly rather than via a separate section. */
@media (width <= 767px) {
  /* zero the wrapper's inline padding (banner is already full-bleed) so the h1's
     own 16px margin sets the gutter → margin reads 16px 12px 16px 16px like ref */
  main .section.category .default-content-wrapper:has(> h1#donald-trump) {
    padding-inline: 0;
  }

  main .section.category .default-content-wrapper h1#donald-trump {
    margin-left: var(--spacing-m); /* 16px, ref */
    width: 292px; /* ref @320 */
  }
}

@media (width >= 375px) and (width <= 424px) {
  main .section.category .default-content-wrapper h1#donald-trump {
    width: 347px; /* ref @375 */
  }
}

@media (width >= 425px) and (width <= 767px) {
  main .section.category .default-content-wrapper h1#donald-trump {
    width: 397px; /* ref @425 */
  }
}

@media (width >= 768px) and (width <= 1023px) {
  /* zero the wrapper's inline padding so the h1's own margin sets the gutter →
     margin reads 16px 24px like the ref (Barron tablet). */
  main .section.category .default-content-wrapper:has(> h1#donald-trump) {
    padding-inline: 0;
  }

  main .section.category .default-content-wrapper h1#donald-trump {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px, ref */
    width: 720px; /* ref @768 */
  }
}

@media (width >= 1024px) and (width <= 1439px) {
  /* zero the wrapper's inline padding so the h1's own margin sets the gutter →
     margin reads 16px 24px like the ref */
  main .section.category .default-content-wrapper:has(> h1#donald-trump) {
    padding-inline: 0;
  }

  main .section.category .default-content-wrapper h1#donald-trump {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px, ref */
    width: 920px;
  }
}

@media (width >= 1440px) {
  /* ref heading is a 1280px centered band: margin 24px auto 12px (auto → 80px at
     1440, 640px at 2560) with 0 24px padding. Zero the wrapper padding and let it
     span the full viewport so the band centers across the whole width. */
  main .section.category .default-content-wrapper:has(> h1#donald-trump) {
    max-width: none;
    padding-inline: 0;
  }

  main .section.category .default-content-wrapper h1#donald-trump {
    box-sizing: border-box;
    width: 1280px;
    max-width: 100%;
    margin: var(--spacing-l) auto var(--spacing-s); /* 24px auto 12px */
    padding: 0 var(--spacing-l); /* 0 24px */
  }
}

@media (width >= 2560px) {
  /* 4K page heading: match the reference h1 box height */
  main .section.category .default-content-wrapper h1#donald-trump {
    height: 53.33px;
    font-size: 48px;
  }
}

/* Donald Trump "TRUMP ADMINISTRATION" masthead banner — fixed image size + inset
   padding per breakpoint (source). The masthead is the first <p> in the heading
   wrapper; padding sits on the <p>, size on the img (max-width:none beats the
   global 100% cap). Scoped to the donald-trump page. */
main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type {
  margin: 0; /* drop the default paragraph margin (all viewports) */
  padding: 0;
}

main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
  width: 296px;
  height: 154px;
  max-width: none;
}

/* 320: inset the masthead banner with 12px padding (drop the full-bleed out-dent) */
@media (width <= 374px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper:has(h1) > p:nth-of-type(-n+2):has(picture) {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 var(--spacing-m); /* drop the -4px out-dent */
    padding: var(--spacing-s); /* 12px gap on all sides */
  }
}

/* mobile: inset the masthead banner with a gap on all sides (source) */
@media (width <= 767px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    margin: var(--spacing-s) auto; /* 12px top/bottom, auto centres → 12px sides */
  }
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 351.33px;
    height: 152.96px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 401.33px;
    height: 152.96px;
  }
}

/* 375-599: letterbox the visible tall masthead crop — contain it on a black
   surface so it sits with black bars left/right rather than cropping (source) */
@media (width >= 375px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper:has(h1) picture img {
    width: 100%;
    height: 152.96px;
    object-fit: contain;
    background: #000;
  }
}

/* 600-767: masthead is a fixed 578x153, centered (below 768 the tall crop shows,
   so target the visible masthead img, not just the hidden wide strip) — source */
@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper:has(h1) picture img {
    width: 578px;
    height: 153px;
    max-width: 100%;
    margin-inline: auto;
    object-fit: cover;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 720px;
    height: 103px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 992px;
    height: 142px;
    margin-left: 0; /* shift the strip left to align with the content band (source) */
  }
}

@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 1232px;
    height: 176px;
    margin-left: 0; /* align with the content band (source) */
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.category .default-content-wrapper > p:first-of-type img {
    width: 1232px;
    height: 176px;
    margin-inline: auto; /* centre the banner in the full-width band (source) */
  }
}

/* People in the News listing — clear gap below the heading before the article
   list; no left gap (heading flush to the wrapper edge) at all viewports. */
main .section.category .default-content-wrapper:has(> h1#people-in-the-news) {
  padding-inline: 0; /* drop the section gutter so the heading is flush */
}

main .section.category .default-content-wrapper h1#people-in-the-news {
  margin-bottom: var(--spacing-xl); /* 32px */
  margin-left: 0; /* remove the left gap (all viewports) */
}

/* mobile: heading margin 16px 12px 16px 16px */
@media (width <= 767px) {
  main .section.category .default-content-wrapper h1#people-in-the-news {
    margin: var(--spacing-m) var(--spacing-s) var(--spacing-m) var(--spacing-m); /* 16px 12px 16px 16px */
  }
}

/* tablet + laptop: heading margin 16px 24px */
@media (width >= 768px) and (width <= 1439px) {
  main .section.category .default-content-wrapper h1#people-in-the-news {
    margin: var(--spacing-m) var(--spacing-l); /* 16px 24px */
  }
}

/* large/4K: heading wrapper gets the source page-heading padding (0 24px);
   the h1 itself carries no margin */
@media (width >= 1440px) {
  main .section.category .default-content-wrapper:has(> h1#people-in-the-news) {
    padding: 0 var(--spacing-l); /* 0 24px */
  }

  main .section.category .default-content-wrapper h1#people-in-the-news {
    margin: 0;
  }
}

/* 4K: wider 640px side gutter (source) */
@media (width >= 2560px) {
  main .section.category .default-content-wrapper:has(> h1#people-in-the-news) {
    margin: var(--spacing-l) 640px var(--spacing-s); /* 24px 640px 12px */
  }
}

/* Donald Trump "Key facts" h2 — width + font-size per breakpoint, no margin
   (source). Scoped to the id so other h2s are unaffected. */
main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
  margin: 0;
  width: 286.67px;
  font-size: 24px;
}

@media (width >= 375px) and (width <= 424px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 342px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 392px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 568.67px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 734.67px;
    font-size: 30px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 646.67px;
    font-size: 36px;
  }
}

@media (width >= 1280px) {
  main .section.category .default-content-wrapper h2#key-facts-about-president-donald-trump-what-to-know {
    width: 886.67px;
    font-size: 36px;
  }
}

/* Donald Trump bio paragraphs — width per breakpoint + 5px top padding
   (source). Scoped to the page's editorial box; FAQ paragraphs (inside
   .accordion) are excluded by the direct-child selector. */
main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
  width: 286.67px;
  padding: 5px 0 0;
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 342px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 392px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 568.67px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 734.67px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 646.67px;
  }
}

@media (width >= 1280px) {
  main:has(h1#donald-trump) .section.carded .category-box > .default-content-wrapper > p {
    width: 886.67px;
  }
}

/* Donald Trump editorial + FAQ boxes — white card treatment: 16px padding,
   0 0 12px margin, white background (source div.embed-container). Applied at
   all viewports, scoped to the donald-trump page. */
main:has(h1#donald-trump) .section.carded .category-box:has(> .default-content-wrapper > p),
main:has(h1#donald-trump) .section.carded .category-faqs {
  margin: 0 0 var(--spacing-s); /* 0 0 12px */
  padding: var(--spacing-m); /* 16px */
  background: var(--background-color); /* #fff */
}

/* Donald Trump feature card decks (Top Stories / Admin Policies / Inside the
   Team) — width, margin & padding per breakpoint (source). Excludes the hero
   deck, which keeps its own tight padding. Scoped to the donald-trump page. */
main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
  width: 288px;
  margin: var(--spacing-s) var(--spacing-m); /* 12px 16px */
  padding: var(--spacing-m) var(--spacing-m) 0; /* 16px 16px 0 */
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 343.33px;
  }
}

@media (width >= 425px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 393.33px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 720px;
    margin: 0 var(--spacing-l) var(--spacing-s); /* 0 24px 12px */
    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xs); /* 16px 16px 8px */
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 664px; /* 680 − 16 left inset */
    margin: 0 0 var(--spacing-s) var(--spacing-m); /* 0 0 12px 16px — left gap (source) */
    padding: var(--spacing-m) var(--spacing-m) 6px; /* 16px 16px 6px */
  }
}

@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 920px; /* source deck width at 1280 */
    margin: 0 0 var(--spacing-s); /* 0 0 12px (source, no left inset) */
    padding: var(--spacing-m) var(--spacing-m) 6px; /* 16px 16px 6px */
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
    width: 939px;
    margin: auto;
  }
}

/* feature-two deck is unboxed at the container level (source boxes each CARD
   individually, not the whole deck) — strip the container card chrome incl. its
   border, at all viewports. Matches the shared rule's chain (incl.
   :not(:has(.hero))) plus the extra .feature.two :has() so it wins on
   specificity; feature-four box is untouched. */
main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.two):not(:has(.news-cards.feature.hero)) {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

/* mobile: feature-two sits in the 16px section gutter like the
   "Trump Administration Policies" deck (outer edge at 16px), with a small
   vertical gap — still unboxed (no card background/padding) */
@media (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.two):not(:has(.news-cards.feature.hero)) {
    margin: var(--spacing-s) var(--spacing-m); /* 12px 16px, matches heading box */
  }
}

/* a feature deck heading wraps its cards in an outer + inner category-box; only
   the outer box carries the card treatment — strip it from the nested inner box
   so it doesn't render a doubled box (all viewports). Selector matches the base
   rule's chain plus an extra .category-box ancestor so it wins on specificity. */
main:has(h1#donald-trump) .section.carded .category-box .category-box:has(.news-cards.feature):not(:has(.news-cards.feature.hero)) {
  width: auto;
  margin: 0;
  padding: 0;
  border: 0; /* only the outer box shows a border; drop the nested inner one */
  background: none;
}

/* 1280: the editorial box widens to a fixed 920 and drops the left inset (source) */
@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(> .default-content-wrapper > p) {
    width: 920px;
    margin: 0 0 var(--spacing-s); /* 0 0 12px */
  }

  main:has(h1#donald-trump) .section.carded .category-faqs {
    margin: 0 0 var(--spacing-s); /* 0 0 12px (drop left inset, source) */
  }
}

/* Donald Trump feature-four card body — 8px top gap below the image (source) */
main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-body {
  padding-top: var(--spacing-xs); /* 8px */
}

/* feature-four eyebrow sits inline in the body before the date (source), not
   overlaid on the image: light-blue uppercase text, no pill. The date follows
   on the same row. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-meta {
  display: inline;
}

main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-meta .news-cards-eyebrow {
  position: static; /* undo the feature overlay-badge positioning */
  display: inline;
  margin-right: var(--spacing-xs); /* 8px before the date */
  padding: 0;
  color: var(--brand-primary-lighter); /* #4b78a7 (source) */
  background: none;
  font-size: 11px;
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-date {
  display: inline; /* stay on the eyebrow's row (source) */
  margin: 0;
  font-size: var(--caption-font-size); /* 12px */
}

/* mobile: feature-four cards stack 1-up, so each card carries a 12px bottom
   gap (source). Bounded ≤767 so the 3-up grid gap owns spacing from 768 up. */
@media (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four li {
    margin: 0 0 var(--spacing-s); /* 0 0 12px */
  }
}

/* Donald Trump feature-four card title — 14px, 0 0 2px margin, all viewports
   (source). Scoped to the page's feature-four decks. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-title {
  margin: 2px 0 0; /* small gap below the eyebrow/date row (source) */
  font-size: var(--body-font-size-s); /* 14px */
  line-height: 21px; /* source feature-four title line-height */
}


/* Donald Trump feature-four card images — fixed width/height per breakpoint
   (source). Scoped to the page's feature-four decks; max-width:none so the
   exact width beats the global 100% image cap. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
  width: 254.67px;
  height: 143.43px;
  max-width: none;
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 310px;
    height: 174.59px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 360px;
    height: 202.75px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 536.67px;
    height: 302.26px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 220.59px;
    height: 124.24px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 207.4px;
    height: 116.8px;
  }
}

@media (width >= 1280px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four .news-cards-image img {
    width: 212.67px;
    height: 119.77px;
  }
}

/* 768–1023: feature-two is 2-up like the source. The base block only goes 2-up
   at >=769, so at 768 it would stack 1-up with a half-width image; force the
   2-up grid here to match where the images are already sized. Scoped to donald. */
@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two ul {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 28px; /* slightly wider than the source's 24px, per design */
  }
}

/* Donald Trump feature-two card images — fixed width/height per breakpoint
   (source); max-width:none beats the global 100% image cap. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
  width: 296.67px;
  height: 166.28px;
  max-width: none;
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 352px;
    height: 198.48px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 402px;
    height: 226.68px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 578.67px;
    height: 326.29px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 366.67px;
    height: 206.75px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 334.67px;
    height: 188.25px;
  }
}

@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 454.67px;
    height: 256.38px;
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-image img {
    width: 459.67px;
    height: 255.38px;
  }
}

/* Donald Trump feature-two card title — 24px; 16px from laptop up (1024+).
   Explicit 24px avoids the token's desktop scale-up. Scoped to the feature-two deck. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-title {
  padding: 0;
  font-size: 24px;
}

@media (width >= 1024px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-title {
    font-size: var(--body-font-size-m); /* 16px */
  }
}

/* Donald feature-four decks pack cards at fixed width, left-aligned, 12px gap
   (source): 3-up at tablet (768–1023) and laptop (1024–1439), 4-up at ≥1440.
   Replaces the stretched grid so cards sit at their card width and wrap. */
@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four ul {
    grid-template-columns: repeat(3, 220.59px);
    justify-content: start;
    gap: var(--spacing-s); /* 12px */
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four ul {
    grid-template-columns: repeat(3, 207.4px);
    justify-content: start;
    gap: var(--spacing-s); /* 12px */
  }
}

/* 1280: the deck box widens to 920, so all 4 cards fit in one row (source) */
@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four ul {
    grid-template-columns: repeat(4, 212.67px);
    justify-content: start;
    gap: var(--spacing-s); /* 12px */
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.four ul {
    justify-content: start;
    gap: var(--spacing-s); /* 12px */
  }
}

/* #ccc hairline above the page heading; plain-heading pages only, not masthead-image pages */
/* stylelint-disable-next-line no-descending-specificity */
main .section.category:not(.two-column) .default-content-wrapper:first-child:not(:has(picture)) {
  border-top: 1px solid var(--text-muted-color);
}

/* tablet up drops the top hairline above the heading (source) */
@media (width >= 768px) {
  main .section.category:not(.two-column) .default-content-wrapper:first-child:not(:has(picture)) {
    border-top: 0;
  }
}

/* megan-fox: no hairline above the page heading at any viewport (source) */
main:has(h1#megan-fox) .section.category:not(.two-column) .default-content-wrapper:first-child:not(:has(picture)) {
  border-top: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.category:not(.two-column) .category-article-list {
  box-sizing: border-box;
  max-width: 920px;
  border-inline-width: 0; /* mobile: full-bleed, horizontal rules only */
  margin: 0 0 var(--spacing-s);
}

/* desktop: inset to 920px with side borders + 24px left gutter (source) */
@media (width >= 1024px) {
  main .section.category:not(.two-column) .category-article-list {
    border-inline-width: 1px;
    margin: 0 auto var(--spacing-s) var(--section-padding-inline);
  }
}

/* container padding ladder (source): tablet 24px, laptop 16px, large/4K 24px; bottom stays 12px */
@media (width >= 768px) and (width <= 1023px) {
  main .section.category:not(.two-column) .category-article-list {
    padding: var(--spacing-l); /* 24px */
    margin: 0 0 var(--spacing-s); /* 0 0 12px */
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main .section.category:not(.two-column) .category-article-list {
    max-width: 680px; /* laptop */
    padding: var(--spacing-m); /* 16px */
    margin: 0 auto var(--spacing-s) var(--section-padding-inline); /* 16px left gutter (source insets, not flush) */
  }
}

/* 1280–1439: source widens to 920px / 24px padding (matches two-column) */
@media (width >= 1280px) and (width <= 1439px) {
  main .section.category:not(.two-column) .category-article-list {
    max-width: 920px;
    padding: var(--spacing-l); /* 24px */
    margin: 0 auto var(--spacing-s) var(--section-padding-inline);
  }
}

@media (width >= 1440px) {
  main .section.category:not(.two-column) .category-article-list {
    max-width: 1280px; /* large/4K: centered 1280 band */
    padding: var(--spacing-l); /* 24px */
    margin: 0 auto var(--spacing-s); /* centered */
  }
}

/* 4K: box follows the heading's wider gutter to share one edge */
@media (width >= 2560px) {
  main .section.category:not(.two-column) .default-content-wrapper {
    margin: var(--spacing-l) 640px var(--spacing-s); /* 24px 640px 12px */
  }

  main .section.category:not(.two-column) .category-article-list {
    margin: 0 0 var(--spacing-s) 664px; /* left 664 → card edge under the heading text */
  }
}

/* FAQ box below the article list — same card treatment; source padding is 16px at all viewports */
/* stylelint-disable-next-line no-descending-specificity */
main .section.category .category-faqs,
/* stylelint-disable-next-line no-descending-specificity */
main .section.two-column .category-faqs {
  box-sizing: border-box;
  padding: var(--spacing-m); /* 16px, source */
  border: 1px solid var(--faq-box-border);
  background: var(--background-color);
}

/* single-column FAQ box mirrors the list box geometry (full-bleed mobile, inset desktop) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.category:not(.two-column) .category-faqs {
  box-sizing: border-box;
  max-width: 920px;
  border-inline-width: 0;
  margin: 0 0 var(--spacing-s);
}

@media (width >= 1024px) {
  main .section.category:not(.two-column) .category-faqs {
    border-inline-width: 1px;
    margin: 0 auto var(--spacing-s) var(--section-padding-inline);
  }
}

/* laptop band: match the list's 680px width + 16px left gutter (mirrors the list box) */
@media (width >= 1024px) and (width <= 1279px) {
  main .section.category:not(.two-column) .category-faqs {
    max-width: 680px;
    margin: 0 auto var(--spacing-s) var(--section-padding-inline);
  }
}

/* 1440+: follow the list's wider side gutter so both keep one left edge (source) */
@media (width >= 1440px) {
  main .section.category:not(.two-column) .category-faqs {
    margin: 0 80px var(--spacing-s) 104px;
  }
}

/* two-column FAQ box mirrors the list box geometry (full-bleed mobile, inset tablet+) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.two-column .category-faqs {
  border-inline-width: 0;
  margin: 0 calc(-1 * var(--section-padding-inline)) var(--spacing-s);
}

@media (width >= 769px) {
  main .section.two-column .category-faqs {
    border-inline-width: 1px;
    margin: var(--spacing-m) 0 0;
  }
}

/* match the list box width so both share one grid: 680 laptop, 920 from 1280 up */
@media (width >= 1024px) {
  main .section.two-column .category-faqs {
    width: 680px;
  }
}

@media (width >= 1280px) {
  main .section.two-column .category-faqs {
    width: inherit;
  }
}

/* nancy-guthrie FAQ box: inset card — 0 0 12px margin, 16px padding, side
   borders at all viewports (source div.embed-container) */
main:has(h1#nancy-guthrie) .section.two-column .category-faqs {
  margin: 0 0 var(--spacing-s); /* 0 0 12px */
  padding: var(--spacing-m); /* 16px */
  border-inline-width: 1px; /* left+right border at all viewports */
}

/* mobile/tablet: nancy-guthrie rail column inset — 12px 11px 0 (source aside) */
@media (width <= 768px) {
  main:has(h1#nancy-guthrie) .section.two-column .section-rail-column {
    padding: var(--spacing-s) 11px 0; /* 12px 11px 0 */
  }
}

main .section.category .category-faqs h2 {
  margin: 0; /* source: heading sits flush above the first row (0 gap) */
  font-size: 24px; /* source FAQ heading — mobile */
  font-weight: var(--weight-bold); /* 700, source */
}

@media (width >= 768px) {
  main .section.category .category-faqs h2 {
    font-size: 30px; /* source FAQ heading — tablet */
  }
}

@media (width >= 1024px) {
  main .section.category .category-faqs h2 {
    font-size: 36px; /* source FAQ heading — laptop */
  }
}

/* carded sections: each content group is a bordered .category-box; 12px gap from the flex column */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box {
  box-sizing: border-box;
  margin-bottom: 0;
  padding: var(--spacing-m);
  border: 1px solid var(--carded-box-border);
  border-radius: 0;
  background: var(--background-color);
}

/* editorial intro group is unboxed in source — un-box the carded box wrapping it */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(> .default-content-wrapper > p),
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(> .default-content-wrapper > p picture) {
  padding: 0;
  border: 0;
  background: none;
}

/* donald-trump: box the "Key facts" editorial group and the FAQ box on all four
   sides (source), all viewports. Restores the editorial box border and adds the
   FAQ box's mobile side borders. */
/* stylelint-disable-next-line no-descending-specificity */
main:has(h1#donald-trump) .section.carded .category-box:has(> .default-content-wrapper > p) {
  box-sizing: border-box;
  padding: var(--spacing-m); /* 16px */
  border: 1px solid var(--carded-box-border);
}

main:has(h1#donald-trump) .section.carded .category-faqs {
  box-sizing: border-box;
  border-inline-width: 1px; /* add left+right to the existing top+bottom */
}

/* donald-trump: "More on Donald Trump" rail heading is black, not navy (source) */
main:has(h1#donald-trump) .news-cards.more .news-cards-heading {
  color: var(--text-heading-color); /* #222 */
}

/* editorial paragraph rhythm: 0 top, 14px bottom (source) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(> .default-content-wrapper > p) > .default-content-wrapper > p {
  margin: 0 0 14px;
}

/* barron-trump editorial text paragraph width by breakpoint (source) */
@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p:not(:has(picture), :has(img)) {
    width: 768px;
  }
}

@media (width >= 1024px) and (width <= 1439px) {
  main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p:not(:has(picture), :has(img)) {
    width: 680px;
  }
}

@media (width >= 1440px) {
  main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p:not(:has(picture), :has(img)) {
    width: 920px;
  }
}

/* barron-trump/megan-fox: text sits immediately below each image — no gap
   (source). Drop the image paragraph's + picture's bottom margin and inline
   descender so the following copy butts directly against the image. */
main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p:has(picture),
main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p:has(img),
main:has(h1#megan-fox) .section.carded .category-box > .default-content-wrapper > p:has(picture),
main:has(h1#megan-fox) .section.carded .category-box > .default-content-wrapper > p:has(img) {
  margin-bottom: 0;
  line-height: 0;
}

main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p > picture,
main:has(h1#megan-fox) .section.carded .category-box > .default-content-wrapper > p > picture {
  margin-bottom: 0;
}

/* leading editorial portrait: fixed 716.29 x 400 at all viewports (source) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box > .default-content-wrapper > p:first-child picture,
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box > .default-content-wrapper > p:first-child img {
  width: 716.29px;
  height: 400px;
  max-width: none;
}

/* subsequent editorial images: fixed 720 x 400 at all viewports (source) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box > .default-content-wrapper > p:not(:first-child) picture,
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box > .default-content-wrapper > p:not(:first-child) img {
  width: 720px;
  height: 400px;
  max-width: none;
}

/* barron-trump: all editorial images 711.1 x 400 (source) */
main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p picture,
/* stylelint-disable-next-line no-descending-specificity */
main:has(h1#barron-trump) .section.carded .category-box > .default-content-wrapper > p img {
  width: 711.1px;
  height: 400px;
  max-width: none;
}

/* desktop: editorial images center within the column, leaving side space (source) */
@media (width >= 1024px) {
  main .section.carded .category-box > .default-content-wrapper > p:has(picture),
  main .section.carded .category-box > .default-content-wrapper > p:has(img) {
    text-align: center;
  }

  main .section.carded .category-box > .default-content-wrapper > p picture,
  main .section.carded .category-box > .default-content-wrapper > p img {
    margin-inline: auto;
  }
}

/* "More on" box: 12px bottom margin; padding-bottom tightens by breakpoint (source) */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(.news-cards.more) {
  margin: 0 0 var(--spacing-s); /* 0 0 12px */
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-s); /* 16 16 12 — mobile */
}

@media (width >= 768px) and (width <= 1023px) {
  main .section.carded .category-box:has(.news-cards.more) {
    padding: var(--spacing-m) var(--spacing-m) var(--spacing-xxs); /* 16 16 4 — tablet */
  }
}

@media (width >= 1024px) {
  main .section.carded .category-box:has(.news-cards.more) {
    padding: var(--spacing-m); /* 16 — laptop/desktop */
  }
}

/* carded containers sit 12px apart (source); override the wider two-column flex gap */
/* stylelint-disable no-descending-specificity */
main .section.carded .two-column-inner,
main .section.carded .section-main-column,
main .section.carded .section-rail-column {
  gap: var(--carded-box-gap);
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity */
main .section.carded .category-article-list,
main .section.carded .category-faqs {
  margin-top: 0; /* carded spacing is owned by the 12px flex gap, not margins */
  border-color: var(--carded-box-border);
  border-radius: 0;
}

/* tablet+: carded article-list insets within the gutter — undo the two-column negative margins, keep side borders (mobile stays full-bleed) */
@media (width >= 769px) {
  main .section.carded .category-article-list {
    margin-inline: 0;
    border-inline-width: 1px;
  }
}
/* stylelint-enable no-descending-specificity */

/* mobile/tablet (<=768): the article list box shows only top + bottom border
   rules (no side borders), matching the source. Desktop keeps all four. */
@media (width <= 768px) {
  main .section.carded .category-article-list {
    border-block-width: 1px; /* top + bottom rules */
    border-inline-width: 0; /* no side borders */
  }
}

/* the feature-hero box hugs its image/headline; keep source-tight padding */
/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(.news-cards.feature.hero) {
  padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
  padding: var(--spacing-s) var(--spacing-m) var(--spacing-m);
}

/* Donald Trump overlaid eyebrow badges — match the source label size (source is
   Roboto 900): 26px on the hero, 16px on the feature-two/four cards (base is
   20px / 12px). Scoped to the donald-trump page, all viewports. */
/* stylelint-disable-next-line no-descending-specificity */
main:has(h1#donald-trump) .section.carded .news-cards.feature .news-cards-eyebrow {
  font-size: 16px; /* card eyebrows (source) */
}

/* stylelint-disable-next-line no-descending-specificity */
main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-eyebrow {
  font-size: 26px; /* hero eyebrow (source) */
}

/* hero headline: navy #036 (source), 24px mobile / 30px tablet+ */
main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-title {
  color: var(--link-color); /* #036, source navy */
  font-size: 24px; /* mobile */
}

@media (width >= 768px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-title {
    font-size: 30px; /* source hero headline (base is 34px) */
    line-height: 36px; /* source */
  }
}

/* >=1440: the hero image is 920px, but the default 1232 band leaves only ~904px
   of main-column content, so the image overflows into the rail. Widen the band to
   1260 (920 img + 16 main padL + 24 gutter + 300 rail) and set a 24px main->rail
   gutter so the rail shifts right and clears the image. Centered via margin-inline
   auto, so no overflow. Scoped to donald-trump. */
@media (width >= 1280px) {
  main:has(h1#donald-trump) .section.category.two-column .two-column-inner {
    max-width: 1278px;
    gap: var(--spacing-l); /* 24px main->rail gutter */
  }
}

/* Donald Trump hero card body — fixed width/height + padding per breakpoint
   (source): 8px 12px 12px on mobile, 8px 24px 24px from tablet up. Overrides the
   shared hero-body padding above. Scoped to the donald-trump page. */
main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
  box-sizing: border-box; /* width/height are the rendered box, padding included */
  width: 318.67px;
  height: 168px;
  padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 374px;
    height: 140px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 424px;
    height: 112px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 602.67px;
    height: 112px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 766.7px;
    height: 112px;
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 678.67px;
    height: 148px;
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 918.67px;
    height: 112px;
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.carded .category-box:has(.news-cards.feature.hero) .news-cards-body {
    width: 918.67px;
    height: 112px;
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

/* Donald Trump hero image — fixed width/height per breakpoint (source);
   max-width:none beats the global 100% image cap. Scoped to the page. */
main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
  width: 320.67px;
  height: 180.38px;
  max-width: none;
}

@media (width >= 375px) and (width <= 424px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 376px;
    height: 211.5px;
  }
}

@media (width >= 425px) and (width <= 599px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 426px;
    height: 239.63px;
  }
}

@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 602.67px;
    height: 339px;
  }
}

@media (width >= 768px) and (width <= 1023px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 768.67px;
    height: 432.38px;
  }
}

@media (width >= 1024px) and (width <= 1279px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 680.67px;
    height: 382.88px;
  }
}

@media (width >= 1280px) and (width <= 1439px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 920px;
    height: 517.88px;
  }
}

@media (width >= 1440px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.hero .news-cards-image img {
    width: 936.67px;
    height: 517.88px;
  }
}

/* 2-up "top stories": each card is its own bordered box (source) */
main .section.carded .news-cards.feature.two ul {
  gap: var(--spacing-m);
}

main .section.carded .news-cards.feature.two li {
  box-sizing: border-box;
  border: 1px solid var(--carded-box-border);
  border-radius: 0;
}

/* donald-trump: source boxes each feature-two card individually (border on the
   card, gap between) with no outer container border. The shared feature-two li
   border already provides the per-card box; keep it (no override needed here). */

/* stylelint-disable-next-line no-descending-specificity */
main .section.carded .news-cards.feature.two .news-cards-body {
  padding: var(--spacing-s) var(--spacing-m) var(--spacing-m);
}

/* donald-trump: 600-767 feature-two card body — fixed width + tight padding (source) */
@media (width >= 600px) and (width <= 767px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-body {
    box-sizing: border-box;
    width: 576.67px;
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

/* donald-trump: tighter feature-two card body padding from 1280 up (source) */
@media (width >= 1280px) {
  main:has(h1#donald-trump) .section.carded .news-cards.feature.two .news-cards-body {
    padding: var(--spacing-xs) var(--spacing-s) var(--spacing-s); /* 8px 12px 12px */
  }
}

/* labeled grid box: heading sits inside the panel above its 4-up grid */
main .section.carded .category-box > .default-content-wrapper h2 {
  margin: 0 0 var(--spacing-s);
  font-size: var(--heading-font-size-m);
  font-weight: var(--weight-bold);
}

@media (width >= 1024px) {
  main .section.two-column .two-column-inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--two-column-gap); /* 12px main→rail gutter (source); yields 920px main */
  }

  main .section.two-column .section-main-column {
    flex: 1;
    padding-left: var(--spacing-m); /* 16px inset on the left */
  }

  /* homepage lead (non-category) main column sits flush to the band edge (source
     main-content starts at the 24px gutter, no extra inset) and keeps a 16px
     right gutter before the divider/rail (source main-content padding: 0 16px) */
  main .section.two-column:not(.category) .section-main-column {
    padding-left: 0;
    padding-right: var(--spacing-m);
  }

  /* section-front pages (e.g. Entertainment) box every main-column module in
     its own bordered card, so the source shows no main/rail gutter there. */
  main .section.two-column.category-news-container .section-main-column,
  main .section.two-column.carded .section-main-column {
    padding-right: 0;
  }

  /* rail sticks within the content column, bounded by two-column-inner so it stops above the footer */
  main .section.two-column .section-rail-column {
    display: flex;
    flex: 0 0 300px;
    position: sticky;
    top: var(--spacing-l);
    align-self: flex-start;
  }

  /* first rail ad is the source half-page (300x600); later slots stay 300x250 */
  main .section.two-column .section-rail-column .static-ad-wrapper:first-child .static-ad-frame {
    min-height: 600px;
  }

  /* newsletter rail: ads flow at the top, newsletter is top-sticky and pins
     below the viewport top while scrolling, releasing when the full-height rail
     column bottom reaches the footer (matches source). flex-start keeps the ads
     stacked above it, so nothing overlaps or slides behind the newsletter */
  /* stylelint-disable-next-line no-descending-specificity */
  main .section.two-column .section-rail-column:has(.newsletter) {
    position: static;
    align-self: stretch;
    justify-content: flex-start;
  }

  main .section.two-column .section-rail-column:has(.newsletter) .newsletter-wrapper {
    position: sticky;
    top: var(--spacing-l);
  }
}