/*
Theme Name: US News Hour
Theme URI: https://usnewshour.com
Author: US News Hour
Description: Text-first newsroom theme for independent accountability journalism. Built to run alongside the Newspack plugin, which supplies the newsroom functionality while this theme supplies the design.
Version: 1.7.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: usnewshour
Tags: news, blog, two-columns, custom-menu, editor-style, accessibility-ready
*/

/* ============================================================
   US NEWS HOUR — front-end prototype
   Text-first newsroom template. Structure converts cleanly to a
   WordPress/Newspack child theme.
   ============================================================ */

:root {
  /* ---- palette: US News Hour ---- */
  --ink:        #0e1116;   /* headlines, body */
  --ink-soft:   #565c65;   /* bylines, standfirsts, meta */
  --paper:      #fcfcfa;   /* page ground */
  --paper-2:    #ffffff;   /* raised surfaces */
  --rule:       #d8d8d2;   /* structural divisions */
  --rule-soft:  #e9e9e4;   /* within-section divisions */
  --navy:       #1a1a1a;   /* brand colour: rail, links, sourcing */
  --navy-tint:  #eef2f6;
  --live:       #d0202a;   /* breaking + corrections ONLY */
  --opinion:    #6b5b2e;   /* opinion + analysis, never news */

  /* legacy aliases so existing rules keep resolving */
  --stamp:      #c8102e;
  --verify:     #17324d;

  /* ---- type ---- */
  --display: "Archivo", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --body:    "Source Serif 4", Georgia, serif;
  --util:    "Roboto Condensed", "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono:    "Roboto Condensed", "Archivo", Arial, sans-serif;

  /* ---- image ratio ----
     One token drives every picture box on the site. Change it here
     and the hero, cards, rail thumbs and article figure all follow. */
  --ratio: 3.3 / 2;

  /* ---- metrics ---- */
  --measure: 66ch;
  --gutter:  1.15rem;
  --max:     1440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 0.5rem; z-index: 200; background: var(--ink); color: #fff; padding: 0.5rem 0.75rem; font-family: var(--util); }

.specimen { background: var(--live); color: #fff; font-family: var(--util); font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.4rem 1rem; text-align: center; }

/* ============================================================
   TOP BAR — black, static, two rows
   ============================================================ */

.topbar { position: sticky; top: 0; z-index: 100; background: #000; }


.mark { flex: 0 0 auto; text-decoration: none; }
.mark-letters {
  display: inline-block; background: #fff; color: #000;
  font-family: var(--display); font-weight: 800; font-size: 0.86rem;
  letter-spacing: -0.01em; padding: 0.3rem 0.4rem 0.22rem; line-height: 1;
  border-bottom: 4px solid var(--live);
}

.drawer-toggle {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer;
  padding: 0.4rem 0.2rem; display: grid; gap: 4px;
}
.drawer-toggle span { display: block; width: 20px; height: 2px; background: #fff; }

.mainnav { flex: 1 1 auto; min-width: 0; }
.navlist {
  display: flex; align-items: center; gap: 0.15rem;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
.navlist::-webkit-scrollbar { display: none; }
.navlist > li { position: relative; }
.navlist > li > a {
  display: block; color: #fff; text-decoration: none;
  font-family: var(--util); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.62rem 0.5rem;
}
.navlist > li > a:hover { color: #cfd2d6; }
.has-sub > a::after {
  content: ""; display: inline-block; margin-left: 0.3rem;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
  border-top: 4px solid #9aa0a6; vertical-align: 0.12em;
}
.subnav {
  position: absolute; top: 100%; left: 0; z-index: 120;
  min-width: 12.5rem; margin: 0; padding: 0.3rem 0; list-style: none;
  background: #fff; border-top: 3px solid var(--live);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  opacity: 0; visibility: hidden; transition: opacity 110ms ease, visibility 110ms;
}
.has-sub:hover .subnav, .has-sub:focus-within .subnav { opacity: 1; visibility: visible; }
.subnav a {
  display: block; padding: 0.5rem 0.9rem; text-decoration: none;
  font-family: var(--util); font-size: 0.82rem; font-weight: 600; color: var(--ink);
}
.subnav a:hover { background: #f1f2f3; color: var(--live); }

.topbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.6rem; }
.topsearch { display: flex; }
.topsearch input { display: none; }
.topsearch button {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 1.05rem; padding: 0 0.25rem;
}
.cta {
  background: var(--live); color: #fff; text-decoration: none;
  font-family: var(--util); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.42rem 0.85rem;
}
.cta:hover { background: #a8161e; }
.cta.block { display: block; text-align: center; margin-top: 0.8rem; }

/* trending strip */
.topbar-trending { border-top: 1px solid #1e1e1e; }

.topbar-trending .wrap::-webkit-scrollbar { display: none; }
.live-badge {
  flex: 0 0 auto; background: var(--live); color: #fff;
  font-family: var(--util); font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.09em; text-transform: uppercase; padding: 0.16rem 0.4rem;
}
.topbar-trending ul { display: flex; gap: 1.15rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.topbar-trending a {
  color: #fff; text-decoration: none;
  font-family: var(--util); font-weight: 700; font-size: 0.78rem;
}
.topbar-trending a:hover { text-decoration: underline; }

/* ============================================================
   PAGE GRID
   ============================================================ */

.page { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 1.5rem; padding-bottom: 3rem; }
.content { min-width: 0; }

.strap { margin: 0 0 1rem; border-bottom: 3px solid var(--ink); padding-bottom: 0.35rem; }
.strap span { font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ---------- story unit ---------- */

.unit {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  padding-bottom: 1.6rem; margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule-soft);
}
.unit-text { min-width: 0; }
.unit .headline {
  font-family: var(--display); font-weight: 800;
  font-size: 1.55rem; line-height: 1.15; letter-spacing: -0.018em; margin: 0;
}
.unit .headline a { text-decoration: none; }
.unit .headline a:hover { text-decoration: underline; text-underline-offset: 2px; }
.unit.is-opinion { border-left: 3px solid var(--opinion); padding-left: 0.9rem; }
.unit.is-opinion .kicker { color: var(--opinion); }

.kicker {
  font-family: var(--util); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--live); margin: 0 0 0.4rem;
}
.meta { margin: 0.5rem 0 0; }
.readtime {
  font-family: var(--util); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
}

.more-coverage { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.more-coverage h3 {
  font-family: var(--util); font-weight: 700; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; margin: 0 0 0.7rem; color: var(--ink);
}
.more-coverage ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }
.more-coverage a {
  font-family: var(--display); font-weight: 700; font-size: 1rem;
  line-height: 1.25; text-decoration: none; display: block;
}
.more-coverage a:hover { text-decoration: underline; }
.more-coverage .readtime { display: block; margin-top: 0.22rem; }

/* image: caption overlaid, as on a wire front */
.unit-media { margin: 0; position: relative; }
.unit-media .ratio {
  display: block; position: relative; width: 100%;
  aspect-ratio: var(--ratio); overflow: hidden; background: var(--rule-soft);
}
.unit-media .ratio > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.unit-media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgba(0,0,0,0.82), rgba(0,0,0,0));
  color: #fff; font-family: var(--util); font-size: 0.74rem; line-height: 1.35;
}

/* ---------- section blocks ---------- */

.section-block { margin-bottom: 2rem; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 3px solid var(--ink); padding-bottom: 0.35rem; margin-bottom: 1.1rem;
}
.section-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; }
.section-head h2 a { text-decoration: none; }
.section-head .subs { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.section-head .subs a {
  font-family: var(--util); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none;
}
.section-head .subs a:hover { color: var(--live); }
.section-block .unit { border-bottom: 0; margin-bottom: 0.4rem; padding-bottom: 0.6rem; }
.section-more {
  display: inline-block; font-family: var(--util); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--live); text-decoration: none;
}
.section-more:hover { text-decoration: underline; }

/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar { min-width: 0; display: grid; gap: 1.8rem; align-content: start; }
.rail-head { border-bottom: 3px solid var(--ink); padding-bottom: 0.3rem; margin-bottom: 0.85rem; }
.rail-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.05em; }
.rail-head h2 a { text-decoration: none; }
.rail-opinion .rail-head { border-bottom-color: var(--opinion); }
.rail-opinion .rail-head h2 { color: var(--opinion); }

.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-item {
  display: grid; grid-template-columns: 1fr 5.5rem; gap: 0.75rem;
  padding: 0.8rem 0; border-bottom: 1px solid var(--rule-soft);
}
.rail-item:first-child { padding-top: 0; }
.rail-item:last-child { border-bottom: 0; }
.rail-text { min-width: 0; }
.rail-item .headline { margin: 0; font-family: var(--display); font-weight: 700; font-size: 0.92rem; line-height: 1.25; }
.rail-item .headline a { text-decoration: none; }
.rail-item .headline a:hover { text-decoration: underline; }
.rail-item .meta { margin-top: 0.3rem; }
.rail-item time {
  font-family: var(--util); font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--live);
}
.rail-thumb { display: block; }
.rail-thumb .ratio {
  display: block; position: relative; width: 100%;
  aspect-ratio: var(--ratio); overflow: hidden; background: var(--rule-soft);
}
.rail-thumb .ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.rail-more {
  display: inline-block; margin-top: 0.7rem;
  font-family: var(--util); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--live); text-decoration: none;
}
.rail-signup { border: 1px solid var(--rule); padding: 1.1rem; }
.rail-signup h2 { margin: 0 0 0.4rem; font-family: var(--display); font-weight: 800; font-size: 1rem; }
.rail-signup p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }

/* ============================================================
   LISTINGS
   ============================================================ */


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (min-width: 48rem) {
  .unit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 1.5rem; }
  .unit .headline { font-size: 1.7rem; }
  .topsearch input { display: block; border: 0; background: #1c1c1c; color: #fff; font-family: var(--util); font-size: 0.8rem; padding: 0.32rem 0.5rem; width: 8rem; }
}

@media (min-width: 64rem) {
  .page { grid-template-columns: minmax(0, 1fr) 20.5rem; gap: 2.6rem; }
  .unit .headline { font-size: 1.9rem; }
}

@media (max-width: 63.9rem) {
  .sidebar { border-top: 3px solid var(--ink); padding-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   ARTICLE PAGE
   The homepage rewrite dropped these. Rebuilt here, and tuned to
   the same measure and furniture the section fronts use.
   ============================================================ */

.article { padding-top: 0.5rem; }
.article-head { max-width: 40rem; }

.article-head .headline {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0.4rem 0 0;
}

.article-head .standfirst {
  font-family: var(--body);
  font-size: 1.14rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0.85rem 0 0;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-top: 1.05rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--util);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.article-meta b { color: var(--ink); font-weight: 700; }
.article-meta time {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Lead image: caption sits beneath on an article, not overlaid.
   Overlays work on a busy front page; they hurt readability when
   the caption carries the credit line and a date. */
.article-figure { margin: 1.25rem 0 0; max-width: 46rem; }
.article-figure .ratio {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio);
  overflow: hidden;
  background: var(--rule-soft);
}
.article-figure .ratio > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article-figure figcaption {
  font-family: var(--util);
  font-size: 0.76rem;
  line-height: 1.45;
  color: var(--ink-soft);
  padding: 0.5rem 0 0.7rem;
  border-bottom: 1px solid var(--rule-soft);
}

.article-body {
  max-width: 40rem;
  padding: 1.5rem 0 2rem;
  font-family: var(--body);
  font-size: 1.09rem;
  line-height: 1.68;
}
.article-body p { margin: 0 0 1.25rem; }
.article-body a { color: var(--live); text-underline-offset: 2px; }
.article-body h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.75rem;
}
.article-body h3 {
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 1.8rem 0 0.6rem;
}
.article-body ul, .article-body ol { margin: 0 0 1.25rem; padding-left: 1.2rem; }
.article-body li { margin-bottom: 0.45rem; }
.article-body blockquote {
  margin: 1.7rem 0;
  padding-left: 1.05rem;
  border-left: 3px solid var(--live);
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.22rem;
  line-height: 1.38;
}
.article-body blockquote cite {
  display: block;
  font-family: var(--util);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-top: 0.55rem;
}
.article-body img { margin: 1.5rem 0 0.4rem; }
.article-body figcaption {
  font-family: var(--util);
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}

/* ---------- sourcing block ---------- */

.methods {
  max-width: 40rem;
  border: 1px solid var(--ink);
  border-left-width: 4px;
  padding: 1.05rem 1.2rem;
  margin: 0 0 1.6rem;
  background: #fafafa;
}
.methods h2 {
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.methods p, .methods li { font-size: 0.94rem; line-height: 1.55; }
.methods p { margin: 0 0 0.7rem; }
.methods ul { margin: 0 0 0.7rem; padding-left: 1.1rem; }
.methods li { margin-bottom: 0.3rem; }
.methods p:last-child, .methods ul:last-child { margin-bottom: 0; }

/* ---------- correction ---------- */

.correction {
  max-width: 40rem;
  border-left: 4px solid var(--live);
  background: #fdf3f3;
  padding: 0.9rem 1.15rem;
  margin: 0 0 1.5rem;
}
.correction h2 {
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--live);
  margin: 0 0 0.4rem;
}
.correction p { font-size: 0.93rem; line-height: 1.55; margin: 0; }
.correction time { font-family: var(--util); font-weight: 700; }

/* ---------- author, republish ---------- */

.author-card {
  max-width: 40rem;
  border-top: 3px solid var(--ink);
  padding-top: 1rem;
  margin-bottom: 1.8rem;
  font-family: var(--util);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.author-card b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.author-card a { color: var(--live); }

.republish {
  max-width: 40rem;
  font-family: var(--util);
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  margin-bottom: 2.5rem;
}
.republish a { color: var(--live); }

/* ============================================================
   ARCHIVES, SEARCH, PAGINATION, 404
   ============================================================ */

.page-title, .archive-head {
  border-bottom: 3px solid var(--ink);
  padding-bottom: 0.4rem;
  margin: 0 0 1.4rem;
}
.page-title h1, .archive-head h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.archive-head .description {
  margin: 0.5rem 0 0;
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--ink-soft);
  max-width: 46rem;
}

.listing .card { display: grid; gap: 0.65rem; }
.listing .card-media .ratio,
.card-media .ratio {
  display: block; position: relative; width: 100%;
  aspect-ratio: var(--ratio); overflow: hidden; background: var(--rule-soft);
}
.card-media .ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.listing .headline { font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1.22; margin: 0; }
.listing .headline a { text-decoration: none; }
.listing .headline a:hover { text-decoration: underline; }
.listing .standfirst { font-size: 0.9rem; color: var(--ink-soft); margin: 0.35rem 0 0; }

.pagination {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
}
.pagination .page-numbers {
  font-family: var(--util);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule);
  text-decoration: none;
}
.pagination .page-numbers:hover { border-color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }

.large-text { font-family: var(--display); font-weight: 800; font-size: 2rem; }

/* ============================================================
   NEWSLETTER BAND + FOOTER
   ============================================================ */

.signup { background: var(--ink); color: #fff; padding: 2.2rem 0; margin-top: 2rem; }
.signup .wrap { display: grid; grid-template-columns: 1fr; gap: 1.2rem; align-items: center; }
.signup h2 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  letter-spacing: -0.01em;
}
.signup p { margin: 0; font-family: var(--util); font-size: 0.92rem; color: #b6babf; max-width: 42ch; }
.signup-form { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.signup-form input {
  flex: 1 1 14rem;
  background: #1b1e22;
  border: 1px solid #33383e;
  color: #fff;
  font-family: var(--util);
  font-size: 0.92rem;
  padding: 0.68rem 0.8rem;
}
.signup-form input::placeholder { color: #767c84; }
.signup-form button {
  background: var(--live);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.68rem 1.35rem;
}
.signup-form button:hover { background: #a8161e; }
.signup-form small { flex: 1 0 100%; font-family: var(--util); font-size: 0.7rem; color: #767c84; }

.foot { border-top: 4px solid var(--ink); padding: 2rem 0 3rem; }
.foot-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding-bottom: 1.3rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule-soft);
}
.foot .mark-letters { background: var(--ink); color: #fff; }
.foot-strap {
  margin: 0;
  font-family: var(--util);
  font-size: 0.76rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.foot h3 {
  margin: 0 0 0.65rem;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.38rem; }
.foot li a {
  font-family: var(--util);
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.foot li a:hover { color: var(--live); text-decoration: underline; }

.colophon {
  margin: 1.8rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--util);
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 78ch;
}

@media (min-width: 48rem) {
  .foot-grid { grid-template-columns: repeat(4, 1fr); }
  .signup .wrap { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (min-width: 64rem) {
}

/* ============================================================
   PRINT
   ============================================================ */

@media print {
  .topbar, .drawer, .sidebar, .signup, .foot, .specimen { display: none !important; }
  body { font-size: 11pt; }
  .article-body { max-width: none; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ============================================================
   AP-STYLE REFINEMENTS
   Detail work: the small typographic and spacing decisions that
   separate a wire front from a generic magazine grid.
   ============================================================ */

/* Tighter, denser headlines. Wire fronts pack more per screen than
   magazine layouts do, and the type is set to allow it. */
.unit .headline,
.more-coverage a,
.rail-item .headline,
.listing .headline {
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.unit .headline { line-height: 1.1; }
.more-coverage a { line-height: 1.28; }

/* Read-time and comment counts sit together as one muted meta row. */
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.5rem; }
.meta .dot { color: var(--rule); }
.meta time {
  font-family: var(--util);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--live);
}
.listing .meta time { color: var(--ink-soft); }

/* The first unit on the page carries more weight than the rest,
   the way a wire front leads with one story rather than a row of
   equals. */
.content > .unit:first-of-type .headline { font-size: clamp(1.9rem, 4.2vw, 2.6rem); }
.content > .unit:first-of-type .standfirst { font-size: 1.05rem; }

/* Section heads: the rule under the name is the structural device
   that keeps a long scrolling front readable. */
.section-head { align-items: flex-end; }
.section-head h2 a:hover { color: var(--live); }

/* Sidebar rails need visible separation from the main column on
   wide screens, or the eye reads the two as one grid. */
@media (min-width: 64rem) {
  .sidebar { border-left: 1px solid var(--rule-soft); padding-left: 2rem; }
  .page { gap: 0; }
  .content { padding-right: 2rem; }
}

/* Opinion stays flagged everywhere it appears. */
.card.is-opinion { border-left: 3px solid var(--opinion); padding-left: 0.85rem; }
.card.is-opinion .kicker, .kicker.opinion { color: var(--opinion); }

/* Empty states and search form. */
.empty { font-family: var(--util); color: var(--ink-soft); }
.notfound { max-width: 34rem; }
.notfound .search-form { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; }
.notfound .search-field {
  flex: 1 1 auto; border: 1px solid var(--rule);
  font-family: var(--util); font-size: 0.95rem; padding: 0.6rem 0.75rem;
}
.notfound .search-submit {
  border: 0; background: var(--ink); color: #fff; cursor: pointer;
  font-family: var(--util); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0 1.1rem;
}

/* Hairline above the sticky bar's shadow so it reads as a layer. */
.topbar { box-shadow: 0 1px 0 rgba(0,0,0,0.35); }

/* Reduce the sticky bar on small screens so it does not eat the
   viewport on a phone. */
@media (max-width: 47.9rem) {


  .unit { gap: 0.85rem; }
  .unit .headline { font-size: 1.32rem; }
  .content > .unit:first-of-type .headline { font-size: 1.55rem; }
}

/* ---------- remaining component classes ---------- */

.card-body { min-width: 0; }
.signup-text { min-width: 0; }
.drawer-col { min-width: 0; }

/* Legacy alias: some older markup uses .eyebrow where the current
   templates use .kicker. Kept so nothing renders unstyled. */
.eyebrow {
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--live);
  margin: 0 0 0.4rem;
}

/* Bundled placeholder art is desaturated slightly so it never reads
   as a real photograph at a glance. */
img.is-placeholder { filter: saturate(0.8) contrast(0.96); }


/* ---------- listing grid, declared once ---------- */

.listing {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.4rem;
}
@media (min-width: 48rem) {
  .listing { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 64rem) {
  .listing { grid-template-columns: repeat(3, 1fr); gap: 1.6rem 1.4rem; }
}

/* ---------- grid stretch fixes ----------
   Grid items stretch to the row height by default, so the image
   figure grew to match the taller text column and the overlaid
   caption floated away from the picture. Pin both columns to the
   top instead. */

.unit { align-items: start; }
.unit-media { align-self: start; }
.unit-text { align-self: start; }

/* The caption belongs to the image box, not the figure, so it
   stays welded to the picture whatever the column does. */
.unit-media { position: relative; }
.unit-media .ratio { display: block; }
.unit-media figcaption {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  padding: 2rem 0.85rem 0.7rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 30%, rgba(0,0,0,0));
  color: #fff;
  font-family: var(--util);
  font-size: 0.74rem;
  line-height: 1.35;
  pointer-events: none;
}

/* Search glyph: use a proper magnifier and give it room. */
.topsearch button { font-size: 0.95rem; line-height: 1; padding: 0 0.4rem; }

/* Rail thumbnails were reading as squares against 3:2 art. */
.rail-item { grid-template-columns: 1fr 6rem; align-items: start; }

/* ---------- article column ----------
   The measure is capped for readability, but the column itself
   fills its grid track so the sidebar sits where it should and the
   page does not develop a dead gutter. */
.content > .article { max-width: 46rem; }
.article-head, .article-figure, .article-body,
.methods, .correction, .author-card, .republish { max-width: none; }
.article-body { max-width: 40rem; }

/* ============================================================
   NAVIGATION SYSTEM
   Breakpoints:
     < 48rem  phone      — nav hidden, drawer from the right
     48–64rem tablet     — nav hidden, drawer from the right
     ≥ 64rem  desktop    — full nav bar, drawer available as "all sections"
     ≥ 80rem  wide       — nav spaced out, search field expanded
   ============================================================ */

.topbar { position: sticky; top: 0; z-index: 100; background: #000; box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.topbar-main > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 46px;
}

.mark { flex: 0 0 auto; text-decoration: none; line-height: 0; }
.mark-letters {
  display: inline-block;
  background: #fff;
  color: #000;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.88rem;
  letter-spacing: -0.01em;
  line-height: 1;
  padding: 0.32rem 0.42rem 0.24rem;
  border-bottom: 4px solid var(--live);
}

/* --- the bar itself: hidden below desktop --- */
.mainnav { display: none; }
.navlist { display: flex; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; }
.navlist > li { position: relative; }
.navlist > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.76rem;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  padding: 0.78rem 0.52rem;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.navlist > li > a:hover { color: #d5d8dc; }
.navlist > li > a[aria-current="page"] { border-bottom-color: var(--live); }

.has-sub > a::after {
  content: "";
  display: inline-block;
  margin-left: 0.32rem;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid #9aa0a6;
  vertical-align: 0.14em;
}

.subnav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 120;
  min-width: 12.5rem;
  margin: 0;
  padding: 0.3rem 0;
  list-style: none;
  background: #fff;
  border-top: 3px solid var(--live);
  box-shadow: 0 12px 28px rgba(0,0,0,0.24);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 120ms ease, transform 120ms ease, visibility 120ms;
}
.has-sub:hover > .subnav,
.has-sub:focus-within > .subnav,
.has-sub.is-open > .subnav { opacity: 1; visibility: visible; transform: translateY(0); }
.subnav a {
  display: block;
  padding: 0.52rem 0.95rem;
  text-decoration: none;
  font-family: var(--util);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink);
}
.subnav a:hover { background: #f1f2f3; color: var(--live); }

/* --- actions: search, CTA, hamburger (right side, always) --- */
.topbar-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.45rem; }

.topsearch { display: flex; align-items: center; }
.topsearch input {
  width: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: #1c1e22;
  color: #fff;
  font-family: var(--util);
  font-size: 0.82rem;
  transition: width 160ms ease, opacity 160ms ease, padding 160ms ease;
}
.topsearch button {
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  padding: 0.35rem;
  line-height: 0;
}
.topsearch svg { width: 18px; height: 18px; display: block; }

.cta {
  background: var(--live);
  color: #fff;
  text-decoration: none;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.44rem 0.8rem;
  white-space: nowrap;
}
.cta:hover { background: #a8161e; }
.cta.block { display: block; text-align: center; margin-top: 0.8rem; }

.drawer-toggle {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.45rem 0.15rem 0.45rem 0.4rem;
  display: inline-flex;
  align-items: center;
}
.drawer-toggle .bars { display: grid; gap: 4px; }
.drawer-toggle .bars span { display: block; width: 21px; height: 2px; background: #fff; }

/* --- trending strip --- */
.topbar-trending { border-top: 1px solid #1d1f23; }
.topbar-trending .wrap {
  display: flex; align-items: center; gap: 0.7rem;
  min-height: 32px; overflow-x: auto; scrollbar-width: none;
}
.topbar-trending .wrap::-webkit-scrollbar { display: none; }
.live-badge {
  flex: 0 0 auto; background: var(--live); color: #fff;
  font-family: var(--util); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.09em; text-transform: uppercase; padding: 0.15rem 0.38rem;
}
.topbar-trending ul { display: flex; gap: 1.05rem; list-style: none; margin: 0; padding: 0; white-space: nowrap; }
.topbar-trending a { color: #fff; text-decoration: none; font-family: var(--util); font-weight: 700; font-size: 0.76rem; }
.topbar-trending a:hover { text-decoration: underline; }

/* ============================================================
   OFF-CANVAS DRAWER
   ============================================================ */

html.drawer-open { overflow: hidden; }

.drawer-scrim {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0,0,0,0.55);
}

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 160;
  width: min(21rem, 88vw);
  background: #000;
  color: #fff;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -12px 0 30px rgba(0,0,0,0.4);
}
.drawer-inner { padding: 0 1.1rem 2.5rem; }

.drawer-bar {
  position: sticky; top: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 0 0.75rem;
  background: #000;
  border-bottom: 1px solid #1f2226;
  margin-bottom: 1rem;
}
.drawer-title {
  font-family: var(--util); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: #8d939a;
}
.drawer-close {
  background: none; border: 0; color: #fff; cursor: pointer;
  font-size: 1.7rem; line-height: 1; padding: 0 0.2rem;
}

.drawer-search { display: flex; margin-bottom: 1.3rem; }
.drawer-search input {
  flex: 1 1 auto; min-width: 0;
  background: #17191d; border: 1px solid #2a2e33; border-right: 0;
  color: #fff; font-family: var(--util); font-size: 0.88rem; padding: 0.55rem 0.7rem;
}
.drawer-search button {
  background: var(--live); border: 0; color: #fff; cursor: pointer;
  font-family: var(--util); font-weight: 700; font-size: 0.74rem;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0.9rem;
}

.drawer-nav { display: grid; gap: 1.05rem; }
.drawer-col { min-width: 0; }
.drawer-head {
  display: block; color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding-bottom: 0.35rem; border-bottom: 1px solid #1f2226;
}
.drawer-head:hover { color: var(--live); }
.drawer-col ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.42rem; }
.drawer-col li a { color: #a9aeb4; text-decoration: none; font-family: var(--util); font-size: 0.85rem; }
.drawer-col li a:hover { color: #fff; }

/* ============================================================
   SUBSECTIONS, RELATED, BACK TO TOP
   ============================================================ */



.related { margin-top: 2rem; padding-top: 0.5rem; }

.to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 90;
  width: 2.6rem; height: 2.6rem;
  background: var(--ink); color: #fff;
  border: 0; cursor: pointer; line-height: 0;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.to-top svg { width: 18px; height: 18px; }
.to-top:hover { background: var(--live); }

/* ============================================================
   FOOTER LEGAL BAR
   ============================================================ */

.foot-legal { margin-top: 1.7rem; padding-top: 1.1rem; border-top: 1px solid var(--rule-soft); }
.foot-legal ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.3rem; list-style: none; margin: 0; padding: 0; }
.foot-legal a {
  font-family: var(--util); font-size: 0.76rem; font-weight: 600;
  letter-spacing: 0.03em; color: var(--ink-soft); text-decoration: none;
}
.foot-legal a:hover { color: var(--live); text-decoration: underline; }
.colophon { margin-top: 1.1rem; padding-top: 1rem; }

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* tablet: two-column listings, wider gutters */
@media (min-width: 48rem) {
  .wrap { padding: 0 1.5rem; }
  .unit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; }
  .drawer-nav { grid-template-columns: repeat(2, 1fr); gap: 1.2rem 1.6rem; }
  .drawer { width: min(28rem, 92vw); }
}

/* desktop: the full navigation bar appears */

/* wide: room to breathe */
@media (min-width: 80rem) {
  .wrap { padding: 0 2rem; }
  .navlist > li > a { padding-left: 0.72rem; padding-right: 0.72rem; font-size: 0.79rem; }
  .topsearch input { width: 11rem; }
  .page { grid-template-columns: minmax(0, 1fr) 22rem; }
  .content { padding-right: 2.6rem; }
  .sidebar { padding-left: 2.6rem; }
}

/* phone: stack the unit, shrink the type, tighten the bar */
@media (max-width: 47.9rem) {
  .topbar-main > .wrap { min-height: 42px; gap: 0.4rem; }
  .cta { font-size: 0.68rem; padding: 0.4rem 0.6rem; }
  .unit { grid-template-columns: 1fr; gap: 0.85rem; }
  .unit-media { order: -1; }
  .unit .headline { font-size: 1.3rem; }
  .content > .unit:first-of-type .headline { font-size: 1.55rem; }
  .rail-item { grid-template-columns: 1fr 5.2rem; }
  .sidebar { border-top: 3px solid var(--ink); padding-top: 1.2rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   FIXES: hidden-attribute override, nav fitting
   ============================================================ */

/* A display value beats the hidden attribute, so anything toggled
   by [hidden] needs this or it never hides. */
[hidden] { display: none !important; }

/* --- fit all eleven sections on one row --- */
.mainnav { min-width: 0; }
.navlist { flex-wrap: nowrap; }




/* On desktop the hamburger is a secondary affordance for the full
   section index, so it sits quieter than on mobile. */
@media (min-width: 64rem) {
  .drawer-toggle .bars span { width: 18px; background: #b9bdc2; }
  .drawer-toggle:hover .bars span { background: #fff; }
}

/* ============================================================
   NAV BREAKPOINT SCALE
   The bar carries eleven sections. It appears only at the width
   where all eleven genuinely fit; below that the drawer does the
   job properly rather than clipping words mid-letter.
   ============================================================ */

/* under 80rem: drawer only */
.mainnav { display: none; }

@media (min-width: 80rem) {
  .mainnav { display: block; flex: 1 1 auto; min-width: 0; }
  .navlist::-webkit-scrollbar { display: none; }
  .navlist > li > a { padding: 0.78rem 0.38rem; font-size: 0.70rem; letter-spacing: 0.015em; }
  .topsearch input { width: 0; opacity: 0; padding: 0; border: 0; }
  .topsearch:focus-within input { width: 9rem; opacity: 1; padding: 0.34rem 0.55rem; border: 1px solid #2a2e33; }
  .drawer-toggle .bars span { width: 18px; background: #b9bdc2; }
  .drawer-toggle:hover .bars span { background: #fff; }
}

@media (min-width: 90rem) {
  .navlist > li > a { padding: 0.78rem 0.5rem; font-size: 0.735rem; letter-spacing: 0.025em; }
}

/* At very wide viewports the container is capped, so the type stays
   where it is and the extra room goes to the search field instead of
   pushing the last sections out of the bar. */
@media (min-width: 100rem) {
  /* The container widens so the permanent search field is paid for out
     of new space rather than out of the section bar. */
  :root { --max: 1760px; }
  .topsearch input { width: 9.5rem; opacity: 1; padding: 0.34rem 0.55rem; border: 1px solid #2a2e33; }
  .navlist > li > a { padding: 0.78rem 0.6rem; font-size: 0.765rem; letter-spacing: 0.03em; }
}

/* Sidebar appears once there is room for two real columns. */
@media (min-width: 64rem) {
  .page { grid-template-columns: minmax(0, 1fr) 20rem; gap: 0; }
  .content { padding-right: 1.9rem; }
  .sidebar { border-left: 1px solid var(--rule-soft); padding-left: 1.9rem; }
  .to-top { right: 1.5rem; bottom: 1.5rem; }
}
@media (min-width: 90rem) {
  .page { grid-template-columns: minmax(0, 1fr) 22rem; }
  .content { padding-right: 2.6rem; }
  .sidebar { padding-left: 2.6rem; }
}

/* ============================================================
   MASTHEAD ORDER
   Mobile: [☰] [US News Hour] .......... [search] [Subscribe]
   Desktop: [USNH] [sections bar] ...... [search] [Subscribe] [☰]

   The toggle is a flex sibling of the mark, so a single order
   swap moves it between the two positions without duplicating
   markup or shipping a second button.
   ============================================================ */

.topbar-main > .wrap { align-items: center; }

.drawer-toggle { order: 0; flex: 0 0 auto; }
.mark          { order: 1; flex: 0 1 auto; min-width: 0; }
.mainnav       { order: 2; }
.topbar-actions{ order: 3; margin-left: auto; }

/* --- the wordmark has two faces --- */
.mark { display: inline-flex; align-items: center; }

.mark-letters { display: none; }

.mark-full {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1rem, 4.6vw, 1.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--live);
}
.mark-full em { font-style: normal; font-weight: 400; }

/* --- mobile: bars sit left of the wordmark and read as the menu --- */
@media (max-width: 79.9rem) {
  .topbar-main > .wrap { gap: 0.6rem; }
  .drawer-toggle { padding: 0.45rem 0.15rem 0.45rem 0; }
  .drawer-toggle .bars span { width: 22px; height: 2.5px; background: #fff; }
  .drawer-toggle:active .bars span { background: var(--live); }
}

/* --- desktop: boxed mark returns, toggle moves to the far right --- */
@media (min-width: 80rem) {
  .mark-full { display: none; }
  .mark-letters {
    display: inline-block;
    background: #fff;
    color: #000;
    font-family: var(--display);
    font-weight: 800;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0.32rem 0.42rem 0.24rem;
    border-bottom: 4px solid var(--live);
  }
  .mark          { order: 0; }
  .mainnav       { order: 1; margin-left: 0.6rem; }
  .topbar-actions{ order: 2; margin-left: 0; }
  .drawer-toggle { order: 3; padding-left: 0.5rem; }
}

/* Very narrow phones: keep the wordmark whole and let Subscribe shrink. */
@media (max-width: 24rem) {
  .cta { font-size: 0.62rem; padding: 0.38rem 0.5rem; letter-spacing: 0.04em; }
  .mark-full { font-size: 0.95rem; }
  .topsearch button { padding: 0.3rem 0.15rem; }
}

/* ============================================================
   SECTION HERO  (category, search, author, date archives)

   A full-bleed dark band carrying the section name at size, with
   a short red rule above it. Replaces the numbered breadcrumb
   trail, which was never meant to be the page's identity.
   ============================================================ */

.pagehero {
  background: #1f2124;
  padding: 1.5rem 0 1.4rem;
  margin-bottom: 0;
}
.pagehero .wrap { position: relative; }

.pagehero-title {
  margin: 0;
  padding-top: 0.85rem;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.7rem, 4.6vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: #fff;
}
.pagehero-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  width: 3.5rem;
  height: 4px;
  background: var(--live);
}
.pagehero-desc {
  margin: 0.7rem 0 0;
  max-width: 46rem;
  font-family: var(--body);
  font-size: 0.98rem;
  line-height: 1.5;
  color: #b9bdc2;
}

/* the header block below the hero now only carries subsection chips */
.archive-head { border: 0; padding: 0; margin: 0 0 1.2rem; }
.archive-head:empty { display: none; }

/* ============================================================
   ARTICLE HERO

   Section label small above, story title large and bold below,
   both reversed out of near-black so the headline is the first
   thing the eye lands on.
   ============================================================ */

.article-hero {
  background: #000;
  color: #fff;
  padding: 1.8rem 0 2rem;
}
.article-hero .wrap { max-width: var(--max); }

.article-hero-kicker {
  margin: 0 0 0.7rem;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #d8dade;
}

.article-hero-title {
  margin: 0;
  max-width: 22ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.026em;
  color: #fff;
  text-wrap: balance;
}

.article-hero-stand {
  margin: 1rem 0 0;
  max-width: 44rem;
  font-family: var(--body);
  font-size: 1.08rem;
  line-height: 1.5;
  color: #c3c7cc;
}

/* the byline row now sits alone at the top of the body column */
.article { padding-top: 0; }
.article > .article-meta {
  margin-top: 0;
  border-top: 0;
  padding-top: 1.1rem;
}
.article-figure { margin-top: 1.1rem; }

@media (min-width: 64rem) {
  .article-hero { padding: 2.4rem 0 2.6rem; }
  .article-hero-title { max-width: 24ch; }
}

/* ============================================================
   NAVIGATION: no toggle on desktop, toggle only below it
   ============================================================ */

/* Desktop owns the bar outright — the hamburger is removed, not
   just hidden, so there is no second way to reach the sections. */
@media (min-width: 80rem) {
  .drawer-toggle { display: none !important; }
  .mark { order: 0; }
  .mainnav { order: 1; margin-left: 0.75rem; }
  .topbar-actions { order: 2; margin-left: auto; }
}

/* Hover opens the dropdown; focus does too, for keyboard users.
   A small bridge under the parent stops the menu closing when the
   pointer crosses the gap between the bar and the panel. */
@media (min-width: 80rem) and (hover: hover) {
  .navlist .has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 8px;
  }
  .navlist .has-sub:hover > .subnav,
  .navlist .has-sub:focus-within > .subnav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* ============================================================
   DROPDOWN ESCAPE

   overflow-x on the nav list turned it into a scroll container,
   and an absolutely positioned child cannot escape one — the
   panel was being clipped to the bar and scrolled inside it.
   Every ancestor between the panel and the page must allow
   overflow for the menu to hang below the bar.
   ============================================================ */

@media (min-width: 80rem) {
  .topbar,
  .topbar-main,
  .topbar-main > .wrap,
  .mainnav,
  .navlist,
  .navlist > li { overflow: visible; }

  /* The bar is sticky, so the panel needs to sit above whatever
     the page scrolls underneath it. */
  .navlist > li.has-sub { position: relative; }
  .subnav { z-index: 200; }
}

/* On phones the drawer holds the sections, so the bar itself may
   still scroll horizontally without clipping anything important. */
@media (max-width: 79.9rem) {
  .navlist { overflow-x: auto; scrollbar-width: none; }
  .navlist::-webkit-scrollbar { display: none; }
}

/* ============================================================
   SUBSECTION MENU

   Sits on the section band, directly beneath the section name,
   as a row of links rather than a bulleted list. World News shows
   Africa, Asia Pacific, Europe, Latin America, Middle East and
   Rest of the World here.
   ============================================================ */

.subsections { margin-top: 1rem; }

.subsections ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
  list-style: none;   /* no bullets, no numbers */
  margin: 0;
  padding: 0;
}

.subsections li { margin: 0; }

.subsections a {
  display: block;
  padding: 0.4rem 0;
  font-family: var(--util);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c9ccd1;
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.subsections a:hover,
.subsections a:focus-visible {
  color: #fff;
  border-bottom-color: var(--live);
}
.subsections a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--live);
}

/* Narrow screens: let the row scroll rather than stack into a
   column that pushes the stories off the first screen. */
@media (max-width: 47.9rem) {
  .subsections ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 0 1.2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .subsections ul::-webkit-scrollbar { display: none; }
  .subsections a { white-space: nowrap; font-size: 0.8rem; }
}

/* Any stray list markers anywhere in theme navigation. */
.subsections ol, .subsections ul,
.navlist, .subnav, .drawer-col ul, .rail-list, .more-coverage ul {
  list-style: none;
}

/* ============================================================
   HOMEPAGE RHYTHM

   Nine structurally identical blocks in a row read as a template.
   Three variants break the pattern: the standard split, a
   photo-led grid, and a flipped unit with the image on the left.
   ============================================================ */

/* image on the left, text on the right */
@media (min-width: 48rem) {
  .unit--flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .unit--flip .unit-media { order: -1; }
}

/* photo-led: lead across the top, related items as a card row */
.unit--grid { grid-template-columns: 1fr; }
.unit--grid .unit-media { order: -1; }
.unit--grid .more-coverage { border-top: 1px solid var(--rule-soft); }
.unit--grid .more-coverage ul { display: grid; gap: 1rem; }

@media (min-width: 48rem) {
  .unit--grid { grid-template-columns: 1fr; gap: 1.1rem; }
  .unit--grid .unit-media .ratio { aspect-ratio: 21 / 9; }
  .unit--grid .more-coverage ul { grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
  .unit--grid .more-coverage a { font-size: 0.95rem; }
}

/* the page's first unit carries extra weight */
.unit--lead .headline { font-size: clamp(1.9rem, 4.4vw, 2.7rem); }

/* ---------- byline + timestamp row on units ---------- */

.unit .meta .author {
  font-family: var(--util);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.unit .meta time { color: var(--live); }

/* ============================================================
   MOST READ
   ============================================================ */

.mostread-list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.mostread-list li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.mostread-list li:first-child { padding-top: 0; }
.mostread-list li:last-child { border-bottom: 0; }
.mostread-list .rank {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 0.9;
  color: var(--rule);
}
.mostread-list .headline {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.25;
}
.mostread-list .headline a { text-decoration: none; }
.mostread-list .headline a:hover { text-decoration: underline; }

/* ============================================================
   SHARE ROW
   ============================================================ */

.share {
  max-width: 40rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  padding: 0.9rem 0;
  margin-bottom: 1.6rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.share-label {
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.share ul { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; margin: 0; padding: 0; }
.share a {
  display: block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--rule);
  font-family: var(--util);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
}
.share a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ============================================================
   AUTHOR PAGE
   ============================================================ */

.pagehero--author { padding-bottom: 1.7rem; }
.author-hero { display: flex; gap: 1.2rem; align-items: flex-start; }
.author-avatar img { border-radius: 50%; display: block; }
.author-hero-text { min-width: 0; }
.author-role {
  margin: 0 0 0.3rem;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--live);
}
.pagehero--author .pagehero-title { padding-top: 0; text-transform: none; letter-spacing: -0.02em; }
.pagehero--author .pagehero-title::before { display: none; }
.author-bio {
  margin: 0.65rem 0 0;
  max-width: 46rem;
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.5;
  color: #c3c7cc;
}
.author-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  list-style: none;
  margin: 0.85rem 0 0;
  padding: 0;
}
.author-contact a {
  font-family: var(--util);
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid var(--live);
}
.author-contact a:hover { color: var(--live); }

/* ============================================================
   TAP TARGETS

   Anything a finger has to hit needs vertical room. Dense
   sidebar and footer links were rendering under 32px tall.
   ============================================================ */

@media (pointer: coarse) {
  .foot li a,
  .author-contact a,
  .foot-legal a,
  .subsections a,
  .share a,
  .more-coverage a,
  .rail-item .headline a,
  .mostread-list .headline a {
    display: inline-block;
    min-height: 44px;
    line-height: 1.5;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
  }
  .foot ul { gap: 0; }
  .rail-item, .mostread-list li { padding-top: 0.55rem; padding-bottom: 0.55rem; }
}

/* Search form (searchform.php) */
.search-form { display: flex; gap: 0.5rem; }
.search-field {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--rule);
  font-family: var(--util);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
}
.search-submit {
  border: 0;
  background: var(--ink);
  color: #fff;
  cursor: pointer;
  font-family: var(--util);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 1.1rem;
}
.search-submit:hover { background: var(--live); }