/* Layout primitives: container, grid, header, hero/rail, tile row, card grid, article layout, footer. */
.container { width: min(100% - 2 * var(--gutter), var(--container-max)); margin-inline: auto; }
.grid { display: grid; gap: var(--gutter); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.section { padding-block: var(--space-6); }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: var(--rule); margin-bottom: var(--space-5); padding-bottom: var(--space-2); }
.section__title { font-size: var(--fs-5); text-transform: uppercase; line-height: 1; }
.section__title::after { content: ""; display: block; width: 4rem; height: 0.35rem; background: var(--accent); margin-top: var(--space-2); }
.section__more { white-space: nowrap; }

/* Header */
.topbar { background: var(--ink); color: var(--paper-2); font-size: var(--fs-0); }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 2.25rem; }
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--gold); }
.topbar__tag { display: none; }
.topbar__links { display: flex; gap: var(--space-4); }
.masthead { border-bottom: var(--rule); }
.masthead__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gutter); padding-block: var(--space-4); }
/* Front page only: header.php renders this as <h1> instead of <span> (docs/DESIGN-SYSTEM.md,
   "one <h1> per page") — reset the default heading box so it's visually identical either way. */
.wordmark__wrap { display: contents; margin: 0; font-size: inherit; font-weight: inherit; }
.wordmark { text-decoration: none; display: inline-flex; flex-direction: column; line-height: 0.95; }
.wordmark__logo { height: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); width: auto; display: block; }
.masthead__strap { display: none; }
.masthead__tools { display: flex; align-items: center; gap: var(--space-3); }

.primary-nav { background: var(--ink); color: var(--paper-2); position: sticky; top: 0; z-index: 50; }
/* Reading-progress bar (header.php, article pages only): nested inside the sticky nav, pinned to
   its bottom edge so it tracks the nav regardless of the nav's height at a given breakpoint. Width
   driven by scroll position - a magazine/long-read convention, not a gimmick. */
.reading-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
@supports (animation-timeline: scroll()) {
  .reading-progress { animation: gg-reading-progress linear; animation-timeline: scroll(root); }
  @keyframes gg-reading-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.primary-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav-toggle { display: inline-flex; align-items: center; gap: var(--space-2); background: none; border: 0; color: inherit; padding: var(--space-3) 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.nav-toggle__icon { width: 1.25rem; height: 0.875rem; position: relative; }
.nav-toggle__icon::before, .nav-toggle__icon::after, .nav-toggle__icon span { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; }
.nav-toggle__icon::before { top: 0; } .nav-toggle__icon span { top: 6px; } .nav-toggle__icon::after { bottom: 0; }
.menu { display: none; flex-direction: column; width: 100%; padding-bottom: var(--space-3); }
.menu.is-open { display: flex; }
.menu > li > a { display: flex; align-items: center; gap: 0.55em; padding: var(--space-3) 0; color: inherit; text-decoration: none; font-family: var(--font-display); text-transform: uppercase; font-size: var(--fs-2); letter-spacing: 0.04em; border-top: 1px solid rgba(255,255,255,0.12); }
.menu > li.current-menu-item > a, .menu > li.current-menu-ancestor > a { background: var(--red); padding-inline: var(--space-3); }
.menu__icon { width: 1.1em; height: 1.1em; flex: none; opacity: 0.85; }
.menu .sub-menu { display: none; padding-left: var(--space-4); }
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { display: block; }
.menu .sub-menu a { display: block; padding: var(--space-2) 0; color: var(--paper-2); text-decoration: none; font-size: var(--fs-1); }

/* Hero + rail (home) */
.home-lead { display: grid; gap: var(--gutter); grid-template-columns: 1fr; padding-block: var(--space-5); }
.rail { border-top: var(--rule); }
.rail__head { display: flex; align-items: baseline; justify-content: space-between; padding-block: var(--space-3); }
.rail__title { font-size: var(--fs-4); text-transform: uppercase; }
.rail__list { display: grid; gap: var(--space-4); }

/* Section tiles */
.tile-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 1fr); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); }
.tile-row > * { scroll-snap-align: start; }

/* Card grid */
.card-grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }

/* Card list: a single dense column of card--list items (category-news-culture.php) - unlike
   .card-grid, never goes multi-column at wider breakpoints, since a list variant is deliberately
   compact/chronological rather than a grid of large images. */
.card-list { display: grid; gap: var(--space-4); }

/* Article layout */
.article-layout { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); padding-block: var(--space-6); }
.article-layout__main { min-width: 0; }
.article-layout__aside { display: grid; gap: var(--space-5); align-content: start; }

/* Footer */
.site-footer { background: var(--ink); color: var(--paper-2); margin-top: var(--space-8); }
.site-footer__inner { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
.site-footer a { color: inherit; }
.site-footer__strap { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: var(--fs-1); color: var(--paper-3); }
.site-footer__strap b { color: var(--red); font-weight: inherit; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--fs-1); }
.site-footer__legal { font-size: var(--fs-0); color: var(--ink-3); }

@media (min-width: 48rem) {
  .topbar__tag { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.25em; }
  .masthead__inner { grid-template-columns: auto 1fr auto; }
  .masthead__strap { display: block; font-family: var(--font-display); text-transform: uppercase; line-height: 1; font-size: var(--fs-1); color: var(--ink-2); letter-spacing: 0.08em; }
  .nav-toggle { display: none; }
  /* flex-wrap: wrap - production-readiness audit finding, 2026-09-13: at exactly 768px (this
     breakpoint's own floor, and the tablet-portrait width the audit tests at) the full desktop menu
     needs ~910px and caused real horizontal page overflow. Wrapping onto a second line here (rather
     than raising this breakpoint, which also gates several unrelated layout changes below) grows
     the header's height instead of the page's width - the 64rem breakpoint below already forces
     `white-space: nowrap` on each link, which only makes sense if wrapping was the intended
     behavior in the 48rem-64rem range to begin with. */
  .menu { display: flex; flex-direction: row; flex-wrap: wrap; width: auto; padding: 0; }
  .menu > li { position: relative; }
  .menu > li > a { padding: var(--space-3) var(--space-3); border-top: 0; }
  .menu > li:first-child > a { padding-left: 0; }
  .menu > li.current-menu-item:first-child > a { padding-left: var(--space-4); }
  .menu .sub-menu { position: absolute; left: 0; top: 100%; min-width: 16rem; background: var(--ink); padding: var(--space-3) var(--space-4); border-top: 3px solid var(--red); box-shadow: 0 12px 24px rgba(0,0,0,0.35); z-index: 60; }
  .menu .sub-menu a { padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .menu .sub-menu li:last-child a { border-bottom: 0; }
  .menu > li.menu-item-has-children > a::after { content: ""; display: inline-block; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.2em) rotate(45deg); margin-left: 0.3em; }
  .home-lead { grid-template-columns: 2fr 1fr; }
  .rail { border-top: 0; border-left: var(--rule); padding-left: var(--gutter); }
  .tile-row { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .spotlight__row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .site-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
}
@media (min-width: 64rem) {
  .menu > li > a { white-space: nowrap; }
  .tile-row { grid-template-columns: repeat(6, 1fr); }
  .spotlight__row { grid-template-columns: repeat(4, 1fr); }
  .card-grid { grid-template-columns: repeat(3, 1fr); }
  .article-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
}