/* ==========================================================================
   SECTION LABELS & MAGAZINE WRAPPERS
   ========================================================================== */

.magazine-layout { max-width: 1300px; margin: 0 auto 30px; padding: 0 20px; }

.search-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 24px;
}

.search-form input {
  flex: 1 1 260px;
  /* A flex item defaults to min-width:auto, so the input's size="32" intrinsic
     width kept it from shrinking and pushed the page into horizontal scroll at
     360px. Same defence as .band-feature > div above. */
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 2px;
}

.homepage-featured-label { max-width: 1300px; margin: 30px auto 16px; padding: 0 20px; }

/* ==========================================================================
   HERO — text-first broadsheet lead. `.has-figure` adds the image column.
   ========================================================================== */

.hero-section { margin-bottom: 26px; }

.hero-card {
  border-top: 3px solid var(--cat, var(--ink));
  border-bottom: 1px solid var(--hairline);
  padding: 26px 0 24px;
}

.hero-card.has-figure {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 28px;
  align-items: start;
}

.hero-figure { margin: 0; }

.hero-figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 3px;
}

.hero-content .tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6875rem; /* 11px — decorative uppercase, AA-large via weight */
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin: 0 0 6px 10px;
}

.hero-content h2 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); /* 24–36px */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.13;
  margin: 4px 0 10px;
  text-align: left;
}

.hero-link { color: inherit; text-decoration: none; }
.hero-link:hover { text-decoration: underline; }

.hero-excerpt {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 10px 0 16px;
}

.meta, .date {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
}

/* ==========================================================================
   NEWSPAPER COLUMNS — compact broadsheet feed rows
   ========================================================================== */

.newspaper-columns {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 0 34px;
}

.col-primary { border-right: 1px solid var(--hairline); padding-right: 34px; }

/* Category hubs add a third grid child: the curated rail, pinned to the top of
   the right column. Explicit placement rather than source order, because the
   rail comes first in the DOM (see category.html.erb) but must render beside the
   feed, not above it. The left column spans both rows so its divider runs the
   full height regardless of which side is taller. */
.newspaper-columns.has-rail .category-rail { grid-column: 2; grid-row: 1; }
.newspaper-columns.has-rail .col-primary   { grid-column: 1; grid-row: 1 / span 2; }
.newspaper-columns.has-rail .col-secondary { grid-column: 2; grid-row: 2; }

.category-rail { margin-bottom: 26px; }
.category-rail .text-link { display: inline-block; margin-top: 12px; }

/* The rail is ~490px wide, so the page-foot pagination's 18px button padding and
   15px label margins overflow it. Same controls, sized for the column. */
.rail-pagination { margin-top: 14px; }
.rail-pagination .pagination-container { flex-wrap: wrap; gap: 8px; }
.rail-pagination .pagination-btn { padding: 10px 14px; font-size: 0.75rem; }
.rail-pagination .page-info { margin: 0 4px; font-size: 0.75rem; }

/* Separates the feed headlines from the rail above them in the same column. */
.secondary-label { margin-top: 6px; }

.primary-story, .secondary-story {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--hairline-soft);
}

.primary-story h3 {
  font-family: var(--display);
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); /* 17–20px */
  font-weight: 700;
  line-height: 1.3;
  margin: 2px 0 4px;
}

.secondary-story h4 {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 2px 0 4px;
}

.story-excerpt {
  font-size: 0.9375rem; /* 15px */
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 6px 0 8px;
  max-width: 68ch;
}

/* ==========================================================================
   CATEGORY HEADER
   ========================================================================== */

.category-header {
  max-width: 1300px;
  margin: 10px auto 26px;
  padding: 0 20px 18px;
  border-bottom: 4px solid var(--cat, var(--ink));
}

.category-header-title {
  font-family: var(--display);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem); /* 32–56px */
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}

.category-tagline {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cat, var(--brass));
  margin: 0 0 10px;
}

.category-description {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 66ch;
  margin: 0;
}

/* ==========================================================================
   FEED SECTION & SUBCATEGORY CHIPS
   ========================================================================== */

.feed-section { max-width: 1300px; margin: 0 auto 30px; padding: 0 20px; }

.feed-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.feed-count {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.subcat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.subcat-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  box-sizing: border-box;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  text-decoration: none;
}

.subcat-chip:hover { border-color: var(--brass); color: var(--brass); }

.subcat-chip.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

/* ==========================================================================
   FEATURED GRID (category pages)
   ========================================================================== */

.featured-section { max-width: 1300px; margin: 0 auto 30px; padding: 0 20px; }

.featured-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.featured-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-top: 3px solid var(--cat, var(--brass));
  border-radius: 3px;
  padding: 16px 18px;
}

.featured-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 4px 0 8px;
}

/* ==========================================================================
   AMAZON BAND
   ========================================================================== */

.amazon-section {
  max-width: 1300px;
  margin: 0 auto 30px;
  padding: 18px 20px 14px;
  border-top: 3px solid var(--brass);
  border-bottom: 1px solid var(--hairline);
}

.amazon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.amazon-card { padding: 4px 0; }

.amazon-tag {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.amazon-card h3 { font-size: 0.9375rem; line-height: 1.4; margin: 4px 0 0; }

.amazon-link { color: var(--ink); text-decoration: none; }
.amazon-link:hover { color: var(--brass); text-decoration: underline; }

.amazon-disclosure {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: italic;
  color: var(--muted);
  margin: 12px 0 0;
}

/* Hover motion, gated for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
  .featured-card, .subcat-chip, .read-more-btn, .theme-toggle {
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  }
}

/* ==========================================================================
   THE FOLD — brief rail / lead / curated rail
   ========================================================================== */

.fold {
  display: grid;
  grid-template-columns: 0.85fr 1.5fr 1fr;
  gap: 0 28px;
  max-width: 1300px;
  margin: 0 auto 30px;
  padding: 0 20px;
}

.fold-briefs { border-right: 1px solid var(--hairline); padding-right: 28px; }
.curated-rail { border-left: 1px solid var(--hairline); padding-left: 28px; }

/* DOM order is lead, briefs, rail (source/reading order — WCAG 1.3.2). Visual order
   above the 768px single-column collapse puts briefs left of the lead, so reorder with
   `order` here rather than in the markup; below 768px the fold collapses to one column
   and no `order` is set, so DOM order governs the stack unchanged. */
@media (min-width: 769px) {
  .fold-briefs { order: 1; }
  .fold-lead   { order: 2; }
  .curated-rail { order: 3; }
}

/* Heading plus its metadata on one line. The stamp is a sibling of the <h2>,
   never a child — inside it, the timestamp became part of the heading's
   accessible name and churned on every feed refresh. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 12px;
}

.section-stamp,
.section-label em {
  font-style: normal;
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--brass);
}

/* Retained for any remaining .section-label em; the fold uses .section-head. */
.section-label em { float: right; }

.brief-rail { list-style: none; margin: 0; padding: 0; counter-reset: brief; }

.brief-item {
  counter-increment: brief;
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.brief-item::before {
  content: counter(brief);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.6;
}

.brief-body { font-size: 0.875rem; line-height: 1.45; color: var(--ink-soft); }

.brief-link {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink);
}

.brief-link:hover { color: var(--brass); border-bottom-color: var(--brass); }
.brief-support { margin-left: 4px; }

.lead-headline {
  font-family: var(--display);
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 4px 0 8px;
  text-wrap: balance;
}

.lead-link { color: inherit; text-decoration: none; }
.lead-link:hover { text-decoration: underline; }

.lead-excerpt {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
  margin: 10px 0 16px;
  text-wrap: pretty;
}

.fold-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 20px;
  border-top: 1px solid var(--hairline);
  margin-top: 16px;
  padding-top: 12px;
}

.rail-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0 12px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline-soft);
}

.rail-thumb { margin: 0; }
.rail-text { min-width: 0; } /* grid items default to min-width:auto; a long unbroken
  headline token (RSS/Google News input) can otherwise blow out the card — see
  article.css:15,100 for the same idiom. */

.rail-thumb img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 3px;
  filter: var(--img-filter);
}

.rail-card h3 { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; line-height: 1.3; margin: 2px 0 0; }
.curated-rail .text-link { display: inline-block; margin-top: 12px; }

/* ==========================================================================
   CATEGORY BANDS
   ========================================================================== */

.band-stack { max-width: 1300px; margin: 0 auto; padding: 0 20px; }

.category-band { border-top: 3px solid var(--cat, var(--ink)); padding-top: 10px; margin-top: 22px; }

.band-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--cat, var(--ink));
  border-bottom-color: var(--cat, var(--ink));
}

.band-more {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--brass);
  text-decoration: none;
  white-space: nowrap;
}

.band-more:hover { text-decoration: underline; }

.band-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0 20px; }

.band-feature { display: grid; grid-template-columns: 160px 1fr; gap: 0 14px; align-items: start; }
.band-feature > div { min-width: 0; } /* text column; see .rail-text above for why */
.band-thumb { margin: 0; }

.band-thumb img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 3px;
  filter: var(--img-filter);
}

.band-feature h3 { font-family: var(--display); font-size: 1.0625rem; font-weight: 700; line-height: 1.3; margin: 4px 0 6px; }
.band-link h4 { font-family: var(--display); font-size: 0.9375rem; font-weight: 700; line-height: 1.35; margin: 2px 0 4px; }

/* ==========================================================================
   ARTICLE ARCHIVE (/features)
   The full curated tier on one page: a jump nav, then one section per
   category. Sections use CSS columns rather than a grid so a category with 17
   articles and one with 35 both stay balanced without a per-section rule.
   ========================================================================== */

.archive-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1300px;
  margin: 0 auto 32px;
  padding: 0 20px;
}

.archive-jump-count {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}

.archive-section {
  max-width: 1300px;
  margin: 0 auto 38px;
  padding: 0 20px;
  /* The jump links land here; keep the heading clear of the sticky masthead. */
  scroll-margin-top: 24px;
}

.archive-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  border-bottom: 2px solid var(--hairline);
  margin-bottom: 14px;
}

.archive-section-head .section-label { margin: 0 0 6px; }

.archive-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}

.archive-item {
  break-inside: avoid;
  padding: 8px 0;
  border-bottom: 1px solid var(--hairline);
}

.archive-link {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}

.archive-link:hover { color: var(--brass); text-decoration: underline; }

.archive-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.archive-meta time { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   404
   ========================================================================== */

.notfound-actions {
  max-width: 1300px;
  margin: 0 auto 34px;
  padding: 0 20px;
}

.notfound-actions .search-form { margin: 0 0 18px; }

.notfound-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}