/* ============================================================================
   HD Press Studio

   Colours, fonts and widths come in as CSS custom properties from the
   Customizer, so a buyer changes the whole look without touching this file.
   Fallbacks are given everywhere, so the theme still renders if a setting is
   missing.
   ========================================================================== */

:root {
  --hd-navy:   #111c2e;
  --hd-accent: #c8102e;
  --hd-amber:  #f59e0b;
  --hd-link:   #1e3a5f;
  --hd-page:   #f4f5f7;

  --hd-ink:       #131c2e;
  --hd-body:      #1a2332;  /* near-black: premium reading, replaces the pale #3a4557 */
  --hd-muted:     #5b6473;
  --hd-faint:     #94a3b8;
  --hd-line:      #e2e8f0;
  --hd-line-soft: #eef2f7;
  --hd-surface:   #ffffff;
  --hd-alt:       #f8fafc;

  --hd-serif:   Georgia, 'Times New Roman', serif;                 /* body face */
  --hd-display: 'Newsreader', Georgia, 'Times New Roman', serif;    /* every headline */
  --hd-sans:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --hd-col:  680px;   /* article measure: ~72 chars/line, down from a loose ~95 */
  --hd-wide: 1170px;
}

.hd-page * { box-sizing: border-box; }

.hd-page {
  margin: 0;
  background: var(--hd-page);
  color: var(--hd-body);
  font-family: var(--hd-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.hd-wrap { max-width: var(--hd-wide); margin: 0 auto; padding: 0 24px; }
.hd-col  { max-width: var(--hd-col); }
.hd-main { padding: 3rem 0 4rem; }

/* ---------- masthead ---------- */

/* Crimson hairline at the very top of the masthead, and a crimson rule along its
   foot - the brand's red is the accent everywhere a reader looks. (Amber is held
   back for editorial notes and disclosures only.) */
.hd-masthead {
  background: var(--hd-navy);
  color: #fff;
  padding: 1.15rem 0 1rem;
  border-top: 1px solid var(--hd-accent);
  border-bottom: 1px solid var(--hd-accent);
}

.hd-masthead__inner {
  max-width: var(--hd-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hd-logo {
  display: block;
  font-family: var(--hd-serif);
  font-size: 1.85rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.hd-logo__divider { color: var(--hd-accent); }

.hd-tagline {
  display: block;
  margin-top: 2px;
  font-family: var(--hd-sans);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 500;
}

/* The Decode CTA sits at the right of the masthead, closed by a short crimson
   bar - the same red as the rules above and below. */
.hd-cta {
  text-align: right;
  line-height: 1.45;
  padding-right: 1rem;
  border-right: 3px solid var(--hd-accent);
}
.hd-cta__kicker { display: block; font-size: 0.74rem; color: rgba(255, 255, 255, 0.6); }
.hd-cta a { font-family: var(--hd-serif); font-size: 1rem; font-weight: 700; color: #fff; text-decoration: none; }
.hd-cta a:hover { color: var(--hd-accent); }

/* The right side of the masthead: the standards link and the Decode CTA, grouped
   so they read as one utility cluster with room to breathe. */
.hd-masthead__aside {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* The standards link: a shield-check, small caps - the trust signal a reader can
   reach from any page. Lives in the masthead where there is room for it. */
.hd-masthead__standards {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--hd-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.hd-masthead__standards svg { color: var(--hd-accent); flex: 0 0 auto; }
.hd-masthead__standards:hover { color: #fff; }

/* ---------- nav ---------- */

/* Sticky on scroll: the masthead scrolls away, the section nav + search stay
   with the reader. A premium affordance, no JS. */
.hd-nav {
  background: #fff;
  border-bottom: 1px solid var(--hd-line);
  position: sticky;
  top: 0;
  z-index: 50;
}

/* Logged-in editors get the fixed admin bar; drop the sticky nav below it so it
   is never clipped. Readers have no admin bar, so they never see this rule. On
   phones WordPress lets the admin bar scroll away, so the nav returns to top:0. */
.admin-bar .hd-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .hd-nav { top: 0; }
}

.hd-nav__inner {
  max-width: var(--hd-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.hd-nav__menu { flex: 1 1 auto; min-width: 0; }

.hd-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem clamp(0.3rem, 0.55vw, 1.4rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The hamburger and the mobile toggle-label are desktop-hidden; the menu shows
   inline. No horizontal scroll strip - the review called that out. */
.hd-nav__toggle { display: none; }

.hd-nav__search-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--hd-ink);
  cursor: pointer;
  border-radius: 6px;
}
.hd-nav__search-toggle:hover { color: var(--hd-accent); background: var(--hd-alt); }

/* The search field: hidden until the magnifier is tapped, on every screen. */
.hd-nav__search {
  display: none;
  gap: 0.5rem;
  max-width: var(--hd-wide);
  margin: 0 auto;
  padding: 0 24px 0.85rem;
}
.hd-nav__search.is-open { display: flex; }
.hd-nav__search input {
  flex: 1 1 auto;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  font-size: 0.95rem;
}
.hd-nav__search input:focus { outline: none; border-color: var(--hd-link); box-shadow: 0 0 0 3px rgba(30,58,95,0.1); }

.hd-nav__list a {
  display: block;
  padding: 0.95rem 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--hd-ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}

/* The active section is underlined in the brand crimson. */
.hd-nav__list a:hover { color: var(--hd-accent); }

.hd-nav__list a[aria-current],
.hd-nav__list .current-menu-item > a,
.hd-nav__list .current_page_item > a {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-accent);
}

/* ---------- section sub-navigation (archive child categories) ---------- */

.hd-subnav {
  background: #fff;
  border-bottom: 1px solid var(--hd-line);
}

.hd-subnav__inner {
  max-width: var(--hd-wide);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.hd-subnav__inner::-webkit-scrollbar { display: none; }

.hd-subnav__tab {
  display: block;
  padding: 0.75rem 0;
  font-family: var(--hd-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--hd-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}

.hd-subnav__tab:hover { color: var(--hd-ink); }

/* The active sub-section is marked in crimson - distinct from the gold that
   marks the active top-level section in the masthead nav above. */
.hd-subnav__tab.is-current {
  color: var(--hd-ink);
  border-bottom-color: var(--hd-accent);
}

/* ---------- type ---------- */

.hd-h1 {
  font-family: var(--hd-serif);
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--hd-ink);
  margin: 0 0 1rem;
}

.hd-lede {
  font-family: var(--hd-serif);
  font-size: 1.22rem;
  line-height: 1.6;
  font-style: italic;
  color: #475569;
  margin: 0 0 1.75rem;
}

.hd-eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-faint);
}

/* ---------- provenance byline ---------- */

.hd-prov {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding-top: 0.85rem;
  border-top: 1px solid var(--hd-line);
  margin-bottom: 1.5rem;
}

.hd-prov__photo { flex: 0 0 auto; }

.hd-prov__photo img,
.hd-prov__initials {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

.hd-prov__initials {
  background: var(--hd-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
}

.hd-prov__who { display: flex; flex-direction: column; line-height: 1.3; margin-right: auto; }

/* Writer-card portrait fallback: initials on the navy-to-crimson ring when a
   writer has no headshot, so the card is never a blank grey disc. */
.hd-writer__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--hd-navy);
  color: #fff;
  font-family: var(--hd-sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.hd-prov__name { font-size: 0.95rem; font-weight: 700; color: var(--hd-ink); text-decoration: none; }
.hd-prov__name:hover { text-decoration: underline; }

.hd-prov__cred { font-size: 0.78rem; color: var(--hd-muted); }

.hd-prov__meta {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  font-size: 0.78rem;
  color: var(--hd-muted);
}

.hd-dot { color: #cbd5e1; }

/* No resting underlines on card, related or section-card headlines. A headline
   is not a link a reader needs underlined to find; the underline reads dated and
   busy. Underline appears on hover only, where it signals interactivity. */
.hd-card__headline,
.hd-more__headline,
.hd-cat-main h3 a,
.hd-cat-secondary-item a,
.hd-feature__title { text-decoration: none; }

.hd-card__link:hover .hd-card__headline,
.hd-cat-main h3 a:hover,
.hd-cat-secondary-item a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* The verification chips are the trust layer, so they get one calm, deliberate
   treatment: a navy outline in small caps. Red is reserved for the brand and
   active states; green and blue were a third and fourth accent competing with it. */
.hd-chip {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--hd-navy);
  border-radius: 999px;
  font-family: var(--hd-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--hd-navy);
  background: transparent;
}

.hd-chip--sources,
.hd-chip--standard { color: var(--hd-navy); }
.hd-chip:hover     { background: var(--hd-navy); color: #fff; }

/* ---------- buttons ---------- */

.hd-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  background: var(--hd-navy);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--hd-navy);
  cursor: pointer;
  transition: background 0.15s ease;
}

.hd-btn:hover { background: var(--hd-link); }

/* ---------- search bar ---------- */

.hd-searchbar { display: flex; gap: 0.5rem; max-width: 26rem; margin-top: 1.25rem; }
.hd-searchbar--center { margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; }

.hd-searchbar input[type="search"] {
  flex: 1 1 auto;
  padding: 0.7rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.95rem;
  background: #fff;
  color: var(--hd-body);
}

.hd-searchbar input[type="search"]:focus {
  outline: none;
  border-color: var(--hd-link);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* ---------- cards ----------
   auto-fill, not auto-fit: two stories in a section should be two normal cards
   and an empty track, not two enormous ones stretched across the row. */

.hd-cards__title {
  font-family: var(--hd-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hd-ink);
  margin: 0 0 1.15rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--hd-navy);
  text-align: left;
}

.hd-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.6rem 1.4rem;
  text-align: left;
}

@media (min-width: 900px) {
  .hd-cards { grid-template-columns: repeat(3, 1fr); }
}

.hd-card { margin: 0; }

.hd-card__link { display: flex; flex-direction: column; text-decoration: none; }

.hd-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 8px;
  overflow: hidden;
  background: var(--hd-line);
  margin-bottom: 0.65rem;
}

.hd-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}

.hd-card__link:hover .hd-card__thumb img { transform: scale(1.04); }

.hd-card__badge {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.4rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  background: var(--hd-accent);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hd-card__headline {
  font-family: var(--hd-serif);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--hd-ink);
}

.hd-card__link:hover .hd-card__headline { color: var(--hd-link); text-decoration: underline; }

.hd-card__deck { margin-top: 0.4rem; font-size: 0.86rem; line-height: 1.5; color: var(--hd-muted); }
.hd-card__date { margin-top: 0.35rem; font-size: 0.74rem; color: var(--hd-faint); }

/* ---------- 404 ---------- */

.hd-404 { text-align: center; padding: 4rem 0 5rem; }

.hd-404__code {
  font-family: var(--hd-serif);
  font-size: 6rem;
  line-height: 1;
  font-weight: 700;
  color: var(--hd-navy);
  margin: 0;
  letter-spacing: -0.03em;
}

.hd-404__rule {
  display: block;
  width: 72px;
  height: 4px;
  background: var(--hd-accent);
  margin: 1.4rem auto 1.6rem;
  border-radius: 2px;
}

.hd-404__title {
  font-family: var(--hd-serif);
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--hd-ink);
  margin: 0 0 0.75rem;
}

.hd-404__body {
  max-width: 34rem;
  margin: 0 auto 2rem;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--hd-muted);
}

.hd-404__latest { max-width: var(--hd-col); margin: 0 auto; }

/* ---------- archive / search heads ---------- */

.hd-archive__head {
  max-width: 46rem;
  margin: 0 0 2.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid var(--hd-navy);
}

.hd-archive__count { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--hd-muted); }

.hd-empty { padding: 2rem 0 4rem; }

.hd-empty__body {
  max-width: 34rem;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--hd-muted);
  margin: 0 0 2.5rem;
}

/* ---------- writer page ---------- */

.hd-writerpage {
  display: flex;
  gap: 1.8rem;
  align-items: flex-start;
  margin: 0 0 3rem;
  padding: 2rem 2.25rem;
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(17, 28, 46, 0.04), 0 12px 28px -12px rgba(17, 28, 46, 0.14);
  position: relative;
  overflow: hidden;
}

.hd-writerpage::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hd-navy) 0%, var(--hd-link) 55%, var(--hd-accent) 100%);
}

.hd-writerpage__portrait {
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(140deg, var(--hd-link), var(--hd-accent));
}

.hd-writerpage__portrait img,
.hd-writerpage__initials {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  display: block;
}

.hd-writerpage__initials {
  background: var(--hd-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
}

.hd-writerpage__body { flex: 1 1 auto; min-width: 0; }

.hd-writerpage__name {
  font-family: var(--hd-serif);
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hd-ink);
  margin: 0;
}

.hd-writerpage__cred { margin: 0.45rem 0 0; font-size: 1rem; font-weight: 600; color: var(--hd-accent); }

.hd-writerpage__bio {
  margin: 1.1rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hd-line-soft);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--hd-body);
  max-width: 46rem;
}

/* ---------- writer card (article foot) ---------- */

.hd-writer {
  position: relative;
  display: block;
  margin: 3.5rem 0;
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(17, 28, 46, 0.04), 0 12px 28px -12px rgba(17, 28, 46, 0.14);
}

.hd-writer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--hd-navy) 0%, var(--hd-link) 55%, var(--hd-accent) 100%);
}

.hd-writer__inner { padding: 2.15rem 2.25rem 1.9rem; }
.hd-writer__head { display: flex; align-items: center; gap: 1.35rem; }

.hd-writer__portrait {
  flex: 0 0 auto;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(140deg, var(--hd-link), var(--hd-accent));
  display: block;
}

.hd-writer__portrait img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #fff;
  display: block;
}

.hd-writer__ident { display: block; flex: 1 1 auto; min-width: 0; }

.hd-writer__eyebrow {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-faint);
  margin-bottom: 0.25rem;
}

.hd-writer__name {
  display: block;
  font-family: var(--hd-serif);
  font-size: 1.65rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hd-ink);
  text-decoration: none;
}

.hd-writer__name:hover { color: var(--hd-link); text-decoration: underline; }

.hd-writer__cred { display: block; margin-top: 0.4rem; font-size: 0.92rem; font-weight: 600; color: var(--hd-accent); }

.hd-writer__bio {
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hd-line-soft);
  font-size: 1rem;
  line-height: 1.68;
  color: var(--hd-body);
}

.hd-writer__foot { margin: 1.6rem 0 0; }

.hd-writer__more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.62rem 1.6rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--hd-link);
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.hd-writer__more:hover { background: var(--hd-alt); border-color: var(--hd-link); }
.hd-arrow { transition: transform 0.15s ease; }
.hd-writer__more:hover .hd-arrow { transform: translateX(3px); }

/* ---------- pagination ---------- */

.hd-pagination { margin: 3rem 0 0; display: flex; justify-content: center; gap: 0.4rem; }

.hd-pagination .page-numbers {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--hd-line);
  border-radius: 6px;
  background: #fff;
  color: var(--hd-link);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
}

.hd-pagination .page-numbers:hover { background: var(--hd-alt); }
.hd-pagination .page-numbers.current { background: var(--hd-navy); border-color: var(--hd-navy); color: #fff; }

/* ---------- footer ---------- */

.hd-footer {
  background: #0a1628;
  color: rgba(255, 255, 255, 0.72);
  padding: 2.75rem 0 2.25rem;
  border-top: 3px solid var(--hd-accent);
}

.hd-footer__inner {
  max-width: var(--hd-wide);
  margin: 0 auto;
  padding: 0 24px;
}

/* Wordmark and tagline left, the accounts we actually hold right. */
.hd-footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.hd-footer__logo {
  display: block;
  font-family: var(--hd-serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.01em;
}

.hd-footer__logo .hd-logo__divider { color: var(--hd-accent); font-weight: 400; }

.hd-footer__tagline {
  margin: 0.45rem 0 0;
  font-family: var(--hd-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.hd-footer__social {
  display: flex;
  gap: 0.6rem;
  margin: 0.35rem 0 0;
  padding: 0;
  list-style: none;
}

.hd-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  font-family: var(--hd-sans);
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.hd-footer__social-link:hover {
  border-color: var(--hd-accent);
  background: var(--hd-accent);
  color: #fff;
}

/* The pages a reader goes to when they want to check whether to trust us. */
.hd-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  margin: 2rem 0 0;
  padding: 1.6rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  font-family: var(--hd-sans);
  font-size: 0.85rem;
}

.hd-footer a { color: #fff; text-decoration: none; }
.hd-footer a:hover { color: var(--hd-accent); }

.hd-footer__legal {
  margin: 1.75rem 0 0;
  font-family: var(--hd-sans);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.42);
}

.hd-footer__legal a {
  margin-left: 0.35rem;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 640px) {
  .hd-footer__top { flex-direction: column; gap: 1.35rem; }
  .hd-footer__nav { gap: 0.6rem 1.25rem; }
}

/* ---------- accessibility ---------- */

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.screen-reader-text:focus {
  position: static;
  width: auto; height: auto;
  clip: auto;
  padding: 0.7rem 1.2rem;
  background: #fff;
  color: var(--hd-navy);
}

/* ---------- responsive ---------- */

@media (max-width: 640px) {
  .hd-404__code { font-size: 4.2rem; }
  .hd-404__title { font-size: 1.5rem; }
  .hd-h1 { font-size: 1.8rem; }
  .hd-masthead__inner { justify-content: center; text-align: center; }
  .hd-masthead__aside { justify-content: center; flex-wrap: wrap; gap: 1rem; }
  .hd-cta { text-align: center; }

  .hd-writerpage,
  .hd-writer__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.15rem;
  }
  .hd-writerpage { padding: 1.5rem 1.35rem; }
  .hd-writer__inner { padding: 1.6rem 1.35rem 1.5rem; }
  .hd-writerpage__portrait { width: 92px; height: 92px; }
  .hd-writerpage__name { font-size: 1.6rem; }
  .hd-writer__name { font-size: 1.4rem; }
}


/* ----------------------------------------------------------------------------
   Kill the stray amber left-bar on headings.

   The old design layer paints a 5px amber bar down the left of every article
   h2 and section heading. The design's own later note retired that ("headings
   are now clean navy serif; amber is reserved for notes"), but only for the old
   theme's class. Our headings inherited the bar. Amber is the site's red now, and
   a heading is not a note - so the bar goes. High specificity + !important to
   beat the design layer, which loads after this file.
   ---------------------------------------------------------------------------- */
html body .hd-prose h2,
html body .hd-prose h3,
html body .hd-more__title,
html body .hd-talk__title {
  border-left: 0 !important;
  padding-left: 0 !important;
  background: none !important;
}

/* ============================================================================
   THE FRONT PAGE

   Almost none of the front page is styled here, and that is deliberate.

   The design for .hd-feed-lead, .hd-feed-card, .hd-tof-grid, .hd-catgrid and
   .hd-cat-box lives in Customizer > Additional CSS, where it was written and
   tuned over months. front-page.php emits exactly the class names that CSS
   expects, so it simply applies. Restyling it here would be re-deciding
   settled questions, badly, in an afternoon.

   What is left below is only the part the original never needed: the two-column
   wrapper that puts Editor's Pick beside Top Story. The old homepage was built
   by JavaScript and never rendered an Editor's Pick at all.
   ========================================================================== */

.hd-feed-top { padding-top: 0.5rem; }

.hd-feed-top.has-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 1.75rem;
  align-items: start;
}

/* ---------- feature cards: Top Story + Editor's Pick ----------
   One rounded card. The navy kicker is the card's own header, flush to the top
   edge and rounded with it - not a label stuck on afterwards. The image sits
   flush below the kicker; only the text has padding. */
.hd-feature {
  display: flex;
  flex-direction: column;
  background: var(--hd-surface);
  border: 1px solid var(--hd-line);
  border-radius: 8.5px;   /* ~15% tighter than 10px - keeps the card, calms the corner */
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(17, 28, 46, 0.06), 0 14px 30px -18px rgba(17, 28, 46, 0.28);
}

.hd-feature__kicker {
  display: block;
  padding: 0.7rem 1.1rem;
  background: #0a1628;
  color: #fff;
  font-family: var(--hd-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--hd-accent);
}

.hd-feature__link { display: block; color: inherit; text-decoration: none; }

.hd-feature__media { position: relative; display: block; overflow: hidden; background: var(--hd-line); }

.hd-feature__media img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.hd-feature--lead .hd-feature__media img { aspect-ratio: 16 / 9; }
.hd-feature--pick .hd-feature__media img { aspect-ratio: 16 / 10; }

.hd-feature__link:hover .hd-feature__media img { transform: scale(1.03); }

/* The section badge, crimson, overlaid on the image - the same treatment the
   article hero uses, so a story looks the same wherever it appears. */
.hd-feature__tag {
  position: absolute;
  top: 0.9rem;
  left: 0.9rem;
  background: var(--hd-accent);
  color: #fff;
  font-family: var(--hd-sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
}

.hd-feature__body { display: block; padding: 1.1rem 1.2rem 1.3rem; }

.hd-feature__title {
  display: block;
  font-family: var(--hd-serif);
  font-weight: 700;
  color: var(--hd-ink);
  letter-spacing: -0.01em;
}

.hd-feature--lead .hd-feature__title { font-size: 1.75rem; line-height: 1.16; margin-bottom: 0.55rem; }
.hd-feature--pick .hd-feature__title { font-size: 1.18rem; line-height: 1.3; margin-bottom: 0.45rem; }

.hd-feature__link:hover .hd-feature__title { color: var(--hd-link); }

/* The deck: a one- or two-line summary in the body serif, so a reader knows what
   the story is before they commit. The furniture the review asked for. */
.hd-feature__deck {
  display: block;
  margin-bottom: 0.7rem;
  font-family: var(--hd-serif);
  color: var(--hd-muted);
  line-height: 1.5;
}
.hd-feature--lead .hd-feature__deck { font-size: 1.02rem; }
.hd-feature--pick .hd-feature__deck { font-size: 0.9rem; margin-bottom: 0.55rem; }

.hd-feature__meta {
  display: block;
  font-family: var(--hd-sans);
  font-size: 0.76rem;
  color: var(--hd-faint);
}

/* The verification marker: the trust layer, made visible. Navy, small caps, a
   shield-check. It rides in the card meta line and reads as a credential, not
   decoration - and it only ever appears when the article really cites sources. */
.hd-verify {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin-left: 0.15rem;
  vertical-align: baseline;
  font-family: var(--hd-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--hd-navy);
}
.hd-verify svg { flex: 0 0 auto; }
html body.hd-page .hd-feed-card-meta .hd-verify { color: var(--hd-navy); }

@media (max-width: 900px) {
  .hd-feed-top.has-pick { grid-template-columns: minmax(0, 1fr); }
  .hd-feature--lead .hd-feature__title { font-size: 1.5rem; }
}

/* The front page beyond this point - .hd-feed-card, .hd-tof-grid, .hd-catgrid,
   .hd-cat-box - is styled in Customizer > Additional CSS, which is where that
   design was written and tuned. front-page.php emits the class names it expects.

   The ONE override below: the Additional CSS reserves a fixed 296px height per
   section box for three stories. On a young site most sections have one, which
   leaves a pane of dead white. A premier page has no dead space, so the box sizes
   to its content instead. Higher specificity (body.hd-page) so it beats the
   design layer's own !important, which loads after this file. */
html body.hd-page .hd-cat-box {
  height: auto !important;
  min-height: 0 !important;
  border-radius: 6.8px !important;   /* ~15% tighter than the design layer's 8px */
}

/* Top of Fold cards + their images: same gentle reduction, kept consistent with
   the feature cards above. */
html body.hd-page .hd-tof-grid .hd-feed-card,
html body.hd-page .hd-feed-card {
  border-radius: 6.8px !important;
  overflow: hidden;
}

/* The deck on a Top of Fold card: a short summary between headline and meta. */
html body.hd-page .hd-feed-card-deck {
  margin: 0.35rem 0 0.5rem;
  font-family: var(--hd-serif);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--hd-muted);
}

/* Section-card tabs. Every tab's panel is rendered on the server; only the
   active one shows. Switching is instant and needs no network. With JavaScript
   off, the tabs are plain links to the real section archives and every panel is
   visible in the source for a crawler. */
.hd-cat-panel[hidden] { display: none; }
.hd-cat-subtab { cursor: pointer; }


/* ============================================================================
   THE ARTICLE
   ========================================================================== */

.hd-wrap--reading { max-width: calc(var(--hd-col) + 48px); }
.hd-wrap--wide    { max-width: var(--hd-wide); }

.hd-article__head { padding-top: 2.5rem; }

.hd-article__section {
  display: inline-block;
  margin-bottom: 0.7rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-accent);
  text-decoration: none;
}

.hd-article__section:hover { text-decoration: underline; }

.hd-article__headline {
  margin: 0 0 0.9rem;
  font-family: var(--hd-serif);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--hd-ink);
}

.hd-deck {
  margin: 0 0 1.35rem;
  font-family: var(--hd-serif);
  font-size: 1.22rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--hd-muted);
}

.hd-article__hero { margin: 1.75rem 0 2rem; }

.hd-article__hero img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* The caption is part of the journalism, not decoration. It is rendered here, in
   the source, where a syndication feed can actually read it. */
.hd-article__caption {
  margin: 0.8rem auto 0;
  font-size: 0.82rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--hd-muted);
}

/* ---------- the body ---------- */

.hd-prose {
  font-family: var(--hd-serif);
  font-size: 1.12rem;
  line-height: 1.6;   /* tighter than the airy 1.75 - reads premium, not loose */
  color: var(--hd-body);
}

.hd-prose p { margin: 0 0 1.35rem; }

.hd-prose h2 {
  margin: 2.4rem 0 0.9rem;
  font-family: var(--hd-serif);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--hd-ink);
}

.hd-prose h3 {
  margin: 1.9rem 0 0.7rem;
  font-family: var(--hd-sans);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--hd-ink);
}

.hd-prose a { color: var(--hd-link); text-decoration: underline; text-underline-offset: 2px; }
.hd-prose a:hover { color: var(--hd-accent); }

.hd-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.hd-prose figure { margin: 2rem 0; }
.hd-prose figcaption { margin-top: 0.6rem; font-family: var(--hd-sans); font-size: 0.8rem; font-style: italic; color: var(--hd-muted); }

.hd-prose ul,
.hd-prose ol { margin: 0 0 1.35rem; padding-left: 1.35rem; }
.hd-prose li { margin-bottom: 0.5rem; }

.hd-prose blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 26px 30px 22px 66px;
  background-color: #f8fafc;
  border-left: 6px solid var(--hdb-amber, #f59e0b);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.65;
  color: #374151;
}

/* ---------- share ---------- */

.hd-share {
  margin: 2.75rem 0 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--hd-line);
  border-bottom: 1px solid var(--hd-line);
}

.hd-share__label {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--hd-sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hd-faint);
}

.hd-share__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.hd-share__btn {
  display: inline-block;
  padding: 0.42rem 0.9rem;
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  background: var(--hd-surface);
  font-family: var(--hd-sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--hd-body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.hd-share__btn:hover { border-color: var(--hd-ink); color: var(--hd-ink); }
.hd-share__copy.is-copied { border-color: #166534; color: #166534; }

/* ---------- more from this section ---------- */

.hd-more { margin-top: 3rem; }

.hd-more__title {
  margin: 0 0 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--hd-ink);
  font-family: var(--hd-serif);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--hd-ink);
}

.hd-more .hd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- comments ---------- */

.hd-talk {
  margin: 3rem 0;
  padding: 1.75rem 1.9rem;
  background: var(--hd-alt);
  border: 1px solid var(--hd-line);
  border-radius: 14px;
}

.hd-talk__title {
  margin: 0 0 0.3rem;
  font-family: var(--hd-serif);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--hd-ink);
}

.hd-talk__sub { margin: 0 0 1.1rem; font-size: 0.9rem; line-height: 1.5; color: var(--hd-muted); }

.hd-talk__list { margin: 0 0 1.75rem; padding: 0; list-style: none; }
.hd-talk__list .comment { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--hd-line); }
.hd-talk__list .children { margin: 1rem 0 0 1.5rem; padding: 0; list-style: none; }

.hd-talk textarea#comment {
  width: 100%;
  min-height: 88px;
  padding: 0.8rem 0.95rem;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: var(--hd-surface);
  font-family: var(--hd-sans);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--hd-body);
  resize: vertical;
}

.hd-talk textarea#comment:focus {
  outline: none;
  border-color: var(--hd-link);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.1);
}

/* The cap is enforced on the server. This only tells the reader where they are. */
.hd-counter {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--hd-sans);
  font-size: 0.74rem;
  color: var(--hd-faint);
  text-align: right;
}

.hd-counter.is-close { color: #b45309; }
.hd-counter.is-full  { color: var(--hd-accent); font-weight: 700; }

.hd-talk .form-submit { margin-top: 0.9rem; }
.hd-talk__closed { font-size: 0.9rem; color: var(--hd-muted); }


/* ============================================================================
   ONE HEADLINE VOICE: NEWSREADER

   Every headline on the site, in one display serif. Placed late and with an
   `html body` prefix on the section-card and Top-of-Fold selectors so it beats
   both the earlier theme rules and the Additional CSS design layer, which
   otherwise renders those headlines in a bold sans - the exact inconsistency the
   look-and-feel review flagged (serif hero, sans cards).

   Georgia stays the BODY face (.hd-prose) and the deck face (.hd-deck, .hd-lede):
   the identity lives in the display serif, the reading comfort in Georgia.
   ========================================================================== */
.hd-h1,
.hd-cards__title,
.hd-card__headline,
.hd-404__code,
.hd-404__title,
.hd-writerpage__name,
.hd-writer__name,
.hd-feature__title,
.hd-article__headline,
.hd-more__title,
.hd-talk__title,
.hd-prose h2,
.hd-prose h3,
html body .hd-feed-lead h1,
html body .hd-feed-card h2,
html body .hd-feed-pick h2,
html body .hd-cat-box-title,
html body .hd-cat-main h3,
html body .hd-cat-secondary-item {
  font-family: var(--hd-display);
}


/* ============================================================================
   PAGES
   ========================================================================== */

.hd-page-doc__head { padding-top: 2.5rem; margin-bottom: 1.75rem; }

.hd-page-doc__updated {
  margin: 0.6rem 0 0;
  font-family: var(--hd-sans);
  font-size: 0.78rem;
  color: var(--hd-faint);
}

.hd-page-doc__figure { margin: 0 0 2rem; }
.hd-page-doc__figure img { display: block; width: 100%; height: auto; border-radius: 10px; }



/* ============================================================================
   NARROW SCREENS
   ========================================================================== */

/* ---- mobile nav: hamburger + search, no scroll strip ---- */
@media (max-width: 860px) {
  .hd-nav__inner { flex-wrap: wrap; }

  .hd-nav__toggle {
    order: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 0;
    border: 0;
    background: transparent;
    color: var(--hd-ink);
    cursor: pointer;
    font-family: var(--hd-sans);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .hd-nav__search-toggle { order: 2; margin-left: auto; }

  .hd-nav__menu {
    order: 3;
    flex: 1 1 100%;
    display: none;
    border-top: 1px solid var(--hd-line);
  }
  .hd-nav__menu.is-open { display: block; }

  .hd-nav__list { flex-direction: column; gap: 0; }
  .hd-nav__list a { padding: 0.9rem 0.1rem; border-bottom: 1px solid var(--hd-line-soft); }
  .hd-nav__list li:last-child a { border-bottom: 0; }

  /* the burger glyph, morphs to an X when open */
  .hd-nav__burger { position: relative; display: block; width: 20px; height: 2px; background: currentColor; }
  .hd-nav__burger::before,
  .hd-nav__burger::after {
    content: '';
    position: absolute; left: 0;
    width: 20px; height: 2px; background: currentColor;
    transition: transform 0.2s ease, top 0.2s ease;
  }
  .hd-nav__burger::before { top: -6px; }
  .hd-nav__burger::after  { top: 6px; }
  .hd-nav__toggle[aria-expanded="true"] .hd-nav__burger { background: transparent; }
  .hd-nav__toggle[aria-expanded="true"] .hd-nav__burger::before { top: 0; transform: rotate(45deg); }
  .hd-nav__toggle[aria-expanded="true"] .hd-nav__burger::after  { top: 0; transform: rotate(-45deg); }
}

/* ---- fix the list-card collapse: stack thumbnail / kicker / headline cleanly.
   The design layer flips .hd-feed-card to a row on small screens, which is the
   "white hole, headline drops below" mess the review flagged. Force a clean
   vertical card. ---- */
@media (max-width: 767px) {
  html body.hd-page .hd-tof-grid .hd-feed-card {
    display: flex;
    flex-direction: column;
  }
  html body.hd-page .hd-tof-grid .hd-feed-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

@media (max-width: 980px) {
  .hd-feed { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .hd-feed-lead__headline { font-size: 1.95rem; }
  .hd-tof .hd-cards,
  .hd-more .hd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .hd-feed-lead__headline { font-size: 1.65rem; }
  .hd-article__headline { font-size: 1.85rem; }
  .hd-deck { font-size: 1.08rem; }
  .hd-prose { font-size: 1.06rem; }
  .hd-tof .hd-cards,
  .hd-more .hd-cards,
  .hd-catgrid { grid-template-columns: minmax(0, 1fr); }
  .hd-talk { padding: 1.35rem 1.15rem; }

  .hd-cat-box { padding: 1.15rem 1.15rem 1rem; }
  .hd-cat-box__more { grid-template-columns: minmax(0, 1fr); }
  .hd-cat-box__more li,
  .hd-cat-box__more li + li {
    padding: 0.85rem 0 0;
    border-left: 0;
  }
  .hd-cat-box__more li + li {
    margin-top: 0.85rem;
    border-top: 1px solid var(--hd-line);
  }
}

@media (max-width: 520px) {
  .hd-catgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ==== Migrated from Customizer Additional CSS on 2026-07-15; original in hd.css.bak-css ==== */
/* =============================================
   HEADLINES DECODED - POST & ARTICLE STYLES
   ============================================= */

/* Article Header */
body h1.entry-title,
body .tdb-title-text,
body .td-post-title .entry-title {
    font-size: 2.7rem !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 16px !important;
}

/* Subheadline / Intro */
.article-intro {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
    color: #374151 !important;
    margin-top: 8px !important;
    margin-bottom: 28px !important;
}

/* Body Text & Paragraphs */
.tdb_single_content,
.td-post-content,
.single-post .entry-content,
.td-post-content p,
.tdb_single_content p {
    color: #1f2937 !important;
    font-size: 1.08rem !important;
    line-height: 1.8 !important;
}

/* Headings inside articles */
.tdb_single_content h2,
.td-post-content h2,
.single-post h2 {
    color: #111827 !important;
    padding-left: 14px !important;
    border-left: 5px solid #f59e0b !important;
    font-weight: 700 !important;
    margin-top: 2.2rem !important;
    margin-bottom: 1rem !important;
}

/* Quotes — amber bar + oversized quote mark + attribution */
.wp-block-quote {
    position: relative;
    background-color: #f8fafc;
    border-left: 6px solid var(--hdb-amber, #f59e0b);
    border-radius: 0 8px 8px 0;
    padding: 26px 30px 22px 66px;
    margin: 2rem 0;
    color: #374151;
    font-size: 1.1rem;
    line-height: 1.65;
    font-style: italic;
}
.hd-prose blockquote::before,
.wp-block-quote::before {
    content: '\201C';
    position: absolute;
    left: 16px;
    top: 10px;
    font-family: Georgia, serif;
    font-size: 3.4rem;
    line-height: 1;
    color: var(--hdb-amber, #f59e0b);
}
.hd-prose blockquote p:last-of-type,
.wp-block-quote p:last-of-type { margin-bottom: 0; }
.hd-prose blockquote cite,
.wp-block-quote cite {
    display: block;
    margin-top: 12px;
    font-style: normal;
    font-size: 0.9rem;
    color: #6b7280;
}
.hd-prose blockquote cite::before,
.wp-block-quote cite::before { content: '\2014\00A0'; }

/* Callout / Sources / Disclosure Boxes */
.callout-box,
.article-sources,
.article-disclosure {
    background-color: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 5px solid var(--hdb-amber, #f59e0b);
    border-radius: 8px;
    padding: 20px 24px;
    margin: 2rem 0;
    color: #374151;
}

/* Homepage & Archive Modules */
.td-module-title a,
.entry-title a,
.td_module_wrap .entry-title a {
    color: #111827 !important;
    font-weight: 700;
}

.td-module-title a:hover,
.entry-title a:hover {
    color: #f59e0b !important;
}

/* Separator */
.wp-block-separator {
    border: none !important;
    height: 2px !important;
    max-width: 340px !important;
    margin: 28px auto !important;
    background: linear-gradient(to right, transparent 0%, #f59e0b 35%, #f59e0b 65%, transparent 100%) !important;
}

.wp-block-separator.is-style-wide {
    max-width: 480px !important;
}

/* General Fixes */
body {
    background-color: #ffffff;
    color: #1f2937;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Headlines Decoded - Vertical Timeline (Blue Theme, High Contrast) */
.hd-timeline {
    list-style: none;
    padding-left: 0;
    margin: 0;
    position: relative;
}

.hd-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-color: #475569;
}

.hd-timeline li {
    position: relative;
    padding-left: 2.75rem;
    margin-bottom: 1.6rem;
}

.hd-timeline li:last-child {
    margin-bottom: 0;
}

.hd-timeline li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 5px;
    width: 22px;
    height: 22px;
    background-color: #0a0f1a;
    border: 3px solid var(--hdb-timeline, #3b82f6);
    border-radius: 9999px;
    z-index: 1;
}

.hd-timeline .year {
    font-weight: 700;
    color: #60a5fa;
    font-size: 1.05rem;
    display: block;
    margin-bottom: 0.3rem;
}

.hd-timeline .description {
    color: #64748b;           /* Darker blue-gray that matches timeline blues */
    line-height: 1.8;
    font-size: 1.02rem;
}

/* =============================================
   TOP-TIER NEWS LOOK — Phase 1 (added by Claude)
   ============================================= */

/* Real type system for body copy instead of the Verdana fallback */
body {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Removed: the old blanket .td_module_flex_1 30px override from the
   retired native homepage hero. It was bleeding into unrelated
   widgets sitewide (e.g. the "Latest articles" sidebar list, which
   also happens to use td_module_flex_1 internally). The homepage
   lead story now uses its own dedicated .hd-feed-lead styling, so
   this is no longer needed at all. */

/* Sidebar credibility: hide zero-value follower counts until real numbers exist */
.td_social_info_counter {
  display: none !important;
}

/* Standardized, newsroom-style photo captions */
.wp-caption-text,
.td-post-featured-image figcaption,
figcaption {
  font-size: 12px !important;
  color: #6b6558 !important;
  font-style: italic;
  margin-top: 6px !important;
}


/* Homepage story blocks: when a section only has ONE qualifying post,
   let that post's card fill the full width instead of leaving the
   reserved space for additional posts blank. Self-corrects as more
   posts get published — once there are 2+ posts, :only-child no
   longer matches and the normal multi-column layout returns. */
.td-mc1-wrap > .td_module_flex:only-child,
.td-mc1-wrap > .td_module_wrap:only-child {
  width: 100% !important;
  flex: 1 1 100% !important;
  max-width: 100% !important;
}


/* The lead-story image was a forced 1:1 square, which made it blow up
   to a nearly full-screen block once it stretched to fill the width —
   no other stories visible below the fold. Restore a normal wide
   (roughly 2:1) ratio for hero/lead cards. */
.td_flex_block_4 .td_module_flex_1 .td-image-wrap,
.td-mc1-wrap > .td_module_flex:only-child .td-image-wrap {
  padding-bottom: 50% !important;
}


/* =============================================
   NEWSROOM HOMEPAGE FEED (added by Claude)
   Hides the old fragmented category-block sections
   on the homepage instantly (no flash), replaced by
   a single dynamic feed injected via JS in the header.
   ============================================= */
body.home .td_flex_block_4,
body.home .td_flex_block_1 {
  display: none !important;
}

#hd-home-feed {
  max-width: 1200px;
  margin: 0 auto;
  font-family: "Open Sans", -apple-system, sans-serif;
  padding: 0 20px;
}
#hd-home-feed a { text-decoration: none; color: inherit; }
#hd-home-feed img { display: block; }

.hd-feed-lead { padding: 20px 0 0; }
.hd-feed-lead img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.hd-feed-lead {
  position: relative;
}
.hd-feed-tag {
  position: absolute !important;
  top: 52px !important;
  left: 18px !important;
  display: inline-block !important;
  margin: 0 !important;
  background: #C41E3A !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  padding: 6px 10px !important;
  border-radius: 3px !important;
}
.hd-feed-lead h1 {
  font-size: 26px; font-weight: 700; line-height: 1.2;
  margin: 8px 0 6px; color: #111827;
}
.hd-feed-meta { font-size: 13px; color: #6b6558; margin: 0; }

.hd-feed-rule { height: 1px; background: #1a1207; margin: 18px 0 0; }
.hd-feed-rule-light { height: 1px; background: #e8e3d8; margin: 0; }

.hd-feed-secondary {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 0;
}
.hd-feed-card { display: flex; flex-direction: row; gap: 12px; }
.hd-feed-card img { width: 92px; height: 92px; object-fit: cover; flex-shrink: 0; }
.hd-feed-card-tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #854F0B; }
.hd-feed-card h2 { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 3px 0; color: #111827; }
.hd-feed-card-meta { font-size: 11px; color: #6b6558; margin: 0; }

.hd-feed-briefs { padding: 16px 0; }
.hd-feed-briefs-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: #837b69; margin: 0 0 8px; }
.hd-feed-brief-row {
  border-top: 1px solid #e8e3d8;
  padding: 10px 0; display: flex; justify-content: space-between; gap: 12px;
}
.hd-feed-brief-row:last-child { border-bottom: 1px solid #e8e3d8; }
.hd-feed-brief-row span:first-child { font-size: 14px; font-weight: 600; color: #111827; }
.hd-feed-brief-row span:last-child { font-size: 11px; color: #6b6558; white-space: nowrap; }

@media (min-width: 768px) {
  .hd-feed-secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .hd-feed-card { flex-direction: column; }
  .hd-feed-card img { width: 100%; height: auto; aspect-ratio: 4/3; }
  .hd-feed-lead h1 { font-size: 30px; }
}
@media (min-width: 1100px) {
  .hd-feed-secondary { grid-template-columns: repeat(3, 1fr); }
}


/* Orphaned section-title labels left over from the old fragmented
   category sections (their content widgets are already hidden, but
   these standalone headings were not). Archives, Latest articles,
   and Popular categories are real working widgets and are left alone. */
body.home .tdi_35,
body.home .tdi_47,
body.home .tdi_52,
body.home .tdi_71,
body.home .tdi_89,
body.home .tdi_99 {
  display: none !important;
}

/* Secondary card rebalance: category tag above the image instead of
   below, and a shorter/less dominant image so the text carries more
   visual weight (tablet and desktop only — mobile's compact list
   thumbnails are already appropriately sized). */
@media (min-width: 768px) {
  .hd-feed-card-tag {
    order: -1;
    margin-bottom: 6px;
  }
  .hd-feed-card img {
    aspect-ratio: 16/9 !important;
  }
}


/* Below-the-feed cleanup: hide a broken Instagram widget that was
   showing a visible error message to visitors, remove leftover empty
   spacer rows from the old fragmented sections, and let the remaining
   sidebar widgets (social, archives, latest articles) use the full
   row width instead of sitting beside a permanently empty column. */
body.home .tdi_124 {
  display: none !important;
}
body.home .tdi_56,
body.home .tdi_62,
body.home .tdi_66,
body.home .tdi_74,
body.home .tdi_104 {
  display: none !important;
}
body.home .tdi_40,
body.home .tdi_82 {
  display: none !important;
}
body.home .tdi_50,
body.home .tdi_92 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
}


/* Retire the old broken native footer (3400px+ tall, no visible
   content) and the bulky homepage social-follow widget — both
   are replaced by the new site-wide footer with compact social icons. */
.td-footer-wrap {
  display: none !important;
}
body.home .tdi_38 {
  display: none !important;
}


/* iPad Safari investigation: mask-image combined with position:sticky
   has a known history of WebKit bugs where the whole element fails
   to render, not just the masked edges. Replacing the CSS mask-based
   edge-fade with gradient overlay pseudo-elements instead — same
   visual effect, no mask-image property involved at all. */
.hd-nav-track {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  position: relative !important;
}
.hd-nav-track::before,
.hd-nav-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20px;
  pointer-events: none;
  z-index: 2;
}
.hd-nav-track::before {
  left: 0;
  background: linear-gradient(to right, #fff, rgba(255,255,255,0));
}
.hd-nav-track::after {
  right: 0;
  background: linear-gradient(to left, #fff, rgba(255,255,255,0));
}


/* Apple-News-inspired refinement: a soft gray page background so the
   white story cards read as distinct, boxed elements — image
   full-bleed to the card edge, text inset with padding. Sharp corners
   kept throughout (no border-radius) to stay with the editorial
   direction rather than the rounded "app" look. */
body {
  background-color: #f4f4f6 !important;
}

.hd-feed-lead,
.hd-feed-card {
  background: #fff;
  border: 1px solid #e6e3dd;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.hd-feed-lead > a:first-child,
.hd-feed-card > a:first-child {
  display: block;
}
.hd-feed-lead > *:not(a),
.hd-feed-card > *:not(a) {
  padding-left: 16px;
  padding-right: 16px;
}
.hd-feed-lead > a + *,
.hd-feed-card > a + * {
  padding-top: 12px;
}
.hd-feed-lead > *:last-child,
.hd-feed-card > *:last-child {
  padding-bottom: 16px;
}

.hd-feed-briefs {
  background: #fff;
  border: 1px solid #e6e3dd;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  padding: 16px !important;
}


/* Secondary card images were too tall relative to the card —
   shrinking further so the full card (headline + date) is visible
   without the image dominating. */
@media (min-width: 768px) {
  .hd-feed-card img {
    aspect-ratio: 2.2/1 !important;
  }
}


/* Retire the "Overlay" header's absolute positioning entirely, for
   both the mobile and desktop header zones, at all widths. This was
   previously only fixed for phone widths (≤767px) on the mobile
   zone; real-device testing (iPhone, Android, Windows phone) showed
   the desktop zone has the same absolute-positioning fragility,
   causing the header to overlap content unpredictably instead of
   reserving its own space. Normal document flow is more robust. */
.td-header-mobile-wrap,
.td-header-desktop-wrap {
  position: relative !important;
}

/* Long headlines were able to grow a card indefinitely (the
   Patagonia headline example). Clamp secondary-card headlines to
   2 lines with an ellipsis so every card stays a consistent height. */
.hd-feed-card h2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Revert desktop header to its overlay/cascade look (the previous
   blanket fix incorrectly removed this too, without actually fixing
   the real mobile bugs). Keep normal document flow only for the
   mobile header zone, where the overlap problems were real. */
.td-header-desktop-wrap {
  position: absolute !important;
}

/* Stray leftover icon from the old "Editorial Commentary" block —
   the text was hidden earlier but this icon sibling was not. */
.tdi_34 {
  display: none !important;
}

/* Secondary-card mobile layout was never actually tested at true
   phone width — the image, tag, headline, and date were separate
   flex items in a row with nothing grouping the text together,
   causing severe crowding on real phones. Switch to CSS Grid so the
   image cleanly occupies its own column and the text stacks in the
   other, at every width below the desktop breakpoint. */
.hd-feed-card {
  display: grid !important;
  grid-template-columns: 92px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 12px;
  row-gap: 2px;
  align-items: start;
}
.hd-feed-card > a:first-child {
  grid-column: 1;
  grid-row: 1 / span 3;
}
.hd-feed-card-tag {
  grid-column: 2;
  grid-row: 1;
}
.hd-feed-card h2 {
  grid-column: 2;
  grid-row: 2;
}
.hd-feed-card-meta {
  grid-column: 2;
  grid-row: 3;
}
@media (min-width: 768px) {
  .hd-feed-card {
    display: block !important;
  }
}


/* Retire tagDiv's own header zone system entirely. Its mobile/desktop
   zone-switching logic has repeatedly caused the header to vanish or
   overlap content unpredictably across real devices, in ways plain
   CSS width media queries can't reliably override. Replaced by a
   single independent header (#hd-site-header) injected via script,
   using our own predictable responsive rules — the same proven
   approach as the feed and footer components. */
.td-header-mobile-wrap,
.td-header-desktop-wrap {
  display: none !important;
}


/* Remove leftover top padding on the lead card from an earlier
   version of this component — now that the card has its own
   border/shadow box and a "Top Story" kicker bar as its first
   element, that padding just created an unwanted white gap above
   the kicker instead of the kicker sitting flush with the card edge. */
.hd-feed-lead {
  padding-top: 0 !important;
}


/* Ad placeholders sized to actual IAB standard units instead of
   arbitrary/stretchy boxes, based on what real ad networks (Google
   Ad Manager, AdSense, programmatic) actually serve: 300×250
   medium rectangle for sidebar/inline, 728×90 leaderboard for
   desktop banners, 320×50 for mobile banners. Reserving the
   correct sizes now means no layout shift when real ad code goes in. */
.hd-feed-ad-sidebar {
  flex: none !important;
  width: 300px;
  max-width: 100%;
  height: 250px;
  margin: 0 auto;
  line-height: 1.4;
}
.hd-feed-ad-banner {
  flex-direction: column;
  gap: 2px;
}
.hd-feed-ad-banner-mobile {
  display: block;
}
.hd-feed-ad-banner-desktop {
  display: none;
}
@media (min-width: 768px) {
  .hd-feed-ad-banner {
    width: 728px;
    height: 90px;
    margin: 20px auto;
  }
  .hd-feed-ad-banner-mobile {
    display: none;
  }
  .hd-feed-ad-banner-desktop {
    display: block;
  }
}
@media (max-width: 767px) {
  .hd-feed-ad-banner {
    width: 320px;
    height: 50px;
    margin: 20px auto;
  }
}


/* The shared .hd-feed-ad base class carries a min-height:120px from
   an earlier iteration; that floor was overriding the banner's
   correct 90px/50px heights (min-height always wins over a smaller
   explicit height). Banners don't need that floor — only the
   sidebar unit did. */
.hd-feed-ad-banner {
  min-height: 0 !important;
}


/* Card polish: distinct white outer margin + softened corners,
   applied to the lead, secondary, and Top of Fold cards alike. */
.hd-feed-lead,
.hd-feed-card {
  padding: 8px !important;
  border-radius: 8px !important;
}
.hd-feed-lead > a:first-child img,
.hd-feed-card > a:first-child img {
  border-radius: 4px;
}
.hd-feed-lead > *:not(a),
.hd-feed-card > *:not(a) {
  padding-left: 8px !important;
  padding-right: 8px !important;
}
.hd-feed-lead > *:last-child,
.hd-feed-card > *:last-child {
  padding-bottom: 8px !important;
}

/* Top of Fold: tag-driven 3x2 grid, matches the secondary row style */
.hd-tof-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #837b69;
  margin: 28px 0 14px;
}
.hd-tof-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 768px) {
  .hd-tof-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .hd-tof-grid .hd-feed-card img {
    aspect-ratio: 2.2/1 !important;
  }
}

/* Section fronts: 2x4 grid of category boxes, replacing the old
   plain-text "More Headlines" list */
.hd-catgrid-wrap {
  max-width: 1170px;
  margin: 0 auto;
}
.hd-catgrid-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #837b69;
  margin: 28px 0 14px;
}
.hd-catgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 768px) {
  .hd-catgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.hd-cat-box {
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e6e3dd;
  border-top: 3px solid #C41E3A;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-radius: 8px;
  padding: 12px;
  height: 240px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hd-cat-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.14);
}
.hd-cat-box-title {
  font-family: Georgia, serif;
  font-size: 17px;
  margin: 0 0 6px;
  color: #0A1628;
  flex-shrink: 0;
}
.hd-cat-box-title a {
  color: inherit;
  text-decoration: none;
}
.hd-cat-subtabs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  padding-left: 16px;
  padding-right: 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eee9de;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
}
.hd-cat-subtabs::-webkit-scrollbar {
  display: none;
}
.hd-cat-subtab {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #a39c8c;
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  flex-shrink: 0;
}
.hd-cat-subtab.active {
  color: #1a1207;
  border-bottom-color: #C41E3A;
}
.hd-cat-article-slot {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hd-cat-main {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
}
.hd-cat-main img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}
.hd-cat-main h3 {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.28;
  margin: 0;
  color: #111827;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hd-cat-main h3 a,
.hd-cat-secondary-item a {
  color: inherit;
  text-decoration: none;
}
.hd-cat-secondary-row {
  display: flex;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid #f2efe7;
  margin-top: auto;
}
.hd-cat-secondary-item {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: #292117;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hd-cat-secondary-item:first-child:not(:last-child) {
  padding-right: 10px;
  border-right: 1px solid #f2efe7;
}
.hd-cat-empty,
.hd-cat-loading {
  font-size: 12px;
  color: #9a9384;
  font-style: italic;
  margin: 0;
}


/* Old tagDiv template remnants (Editorial Commentary, Politics,
   Technology, Lifestyle, Archives, Latest articles, Popular
   categories orphan label blocks) — fully superseded by the new
   independent header/feed/footer system, but were still bleeding
   through at certain viewport widths since only some had been
   caught before. Hiding unconditionally, at every width, including
   their containing rows so no empty space is left behind. */
.tdi_35, .tdi_30,
.tdi_53, .tdi_48,
.tdi_71, .tdi_66,
.tdi_81, .tdi_76,
.tdi_83, .tdi_62,
.tdi_101, .tdi_96,
.tdi_107, .tdi_92 {
  display: none !important;
}


/* Subcategory tabs: fade-edge indicator when there's more to scroll,
   using a gradient overlay (not mask-image, learned the hard way
   that combo has real WebKit issues) */
.hd-cat-subtabs-wrap {
  position: relative;
}
.hd-cat-subtabs-wrap.can-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 6px;
  width: 26px;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.hd-cat-subtabs-wrap.can-scroll-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 6px;
  width: 26px;
  background: linear-gradient(to left, rgba(255,255,255,0), #fff);
  pointer-events: none;
  z-index: 1;
}
.hd-cat-scroll-arrow {
  position: absolute;
  top: 0;
  bottom: 6px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
  font-weight: 700;
  color: #837b69;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 2;
}
.hd-cat-scroll-left {
  left: 0;
}
.hd-cat-scroll-right {
  right: 0;
}
.hd-cat-subtabs-wrap.can-scroll-left .hd-cat-scroll-left,
.hd-cat-subtabs-wrap.can-scroll-right .hd-cat-scroll-right {
  opacity: 1;
  pointer-events: auto;
}
.hd-cat-scroll-arrow:hover {
  color: #1a1207;
}
.hd-cat-subtabs {
  cursor: grab;
}
.hd-cat-subtabs.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.hd-cat-subtab:hover {
  font-weight: 900;
  color: #1a1207;
}

/* Ad placeholders: a small round "AD" badge plus friendlier copy,
   in the site's own navy/amber palette, replacing the plain
   dashed-box-with-text treatment */
.hd-feed-ad {
  background: linear-gradient(135deg, #fdf6e9, #f3ede0);
  border: 1px solid #e8dcc0;
}
.hd-ad-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #0A1628;
  color: #C41E3A;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.hd-ad-title {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: #4a4030;
}
.hd-ad-size {
  margin: 0;
  font-size: 11px;
  color: #9a8f74;
  letter-spacing: .03em;
}
.hd-ad-badge-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #0A1628;
  color: #C41E3A;
  font-size: 8.5px;
  font-weight: 800;
  margin-right: 8px;
  vertical-align: middle;
}

.hd-feed-ad-sidebar {
  flex-direction: column;
}


/* Fine amber accent line on the Top Story / Editor's Pick navy
   kicker banners, tying them to the brand's orange accent used
   elsewhere (active nav tab, AD badges, scroll-tab active state).
   Using inset box-shadow rather than border so it doesn't affect
   box sizing/layout. */
.hd-feed-kicker {
  box-shadow: inset 0 0 0 1px #C41E3A;
}


/* Disabling scroll-snap on the main header nav track: it was causing
   the first tab to auto-shift ~20px on load (hiding the left edge
   padding entirely, cutting off the first letter on mobile), likely
   interacting with the active-tab scroll-into-view logic in an
   unintended way. Snap behavior wasn't a deliberate feature here, so
   removing it is the cleanest fix. */
.hd-hdr-nav-track {
  scroll-snap-type: none !important;
}


/* New wordmark for "Headlines Decoded" — replacing the generic
   serif treatment. "Headlines" in a clean condensed sans, "Decoded"
   bolder + italic with its own crimson underline, tying to the
   brand's new navy/crimson palette. Currently applied to the header
   (white version, for the navy background); footer still uses the
   old markup pending a follow-up pass. */
/* (removed) A CSS @import 2,500 lines into the file is ignored by every browser —
   the CSS spec requires @import before all other rules — so the font it fetched
   never loaded, while still being a remote request. Bundle fonts locally instead. (§8.8.6) */

.hd-logo-headlines {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  margin-right: 6px;
}
.hd-logo-decoded {
  font-family: 'Barlow', sans-serif;
  font-weight: 800;
  font-style: italic;
  padding-bottom: 3px;
  border-bottom: 3px solid #C41E3A;
}


/* ============================================================
   ARTICLE BODY CONTENT — brand uplift for standard Gutenberg
   blocks used inside posts (Heading, Quote, List), matching the
   navy/crimson identity from the homepage redesign. No custom
   blocks needed — just styling the core blocks well.
   ============================================================ */

/* Section headings (H2) */
.tdb_single_content h2 {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 700;
  color: #0A1628 !important;
  line-height: 1.25;
  margin: 42px 0 16px;
  padding-bottom: 10px;
  border-bottom: 3px solid #C41E3A;
}

/* Sources / citations list: add the "Additional CSS Class" hd-sources
   to the List block at the bottom of an article (Block editor >
   select the list > Advanced panel > Additional CSS Class(es) >
   "hd-sources") to get this compact, clearly-secondary treatment. */
.tdb_single_content ul.hd-sources,
.tdb_single_content ol.hd-sources {
  margin-top: 36px;
  padding: 20px 0 4px;
  border-top: 1px solid #e6e3dd;
  font-size: 13px;
  color: #5a5346;
  line-height: 1.6;
}


/* Main nav dropdown menus - subcategories shown on hover (desktop)
   or tap (touch), letting visitors jump straight to a subcategory
   from the main nav without landing on the parent category first. */
.hd-hdr-tab-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}
.hd-hdr-dropdown {
  position: fixed;
  min-width: 210px;
  background: #0A1628;
  border-top: 2px solid #C41E3A;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  display: none;
  flex-direction: column;
  z-index: 9999;
  padding: 6px 0;
}
.hd-hdr-dropdown.hd-hdr-dropdown-open {
  display: flex;
}
.hd-hdr-dropdown a {
  padding: 9px 18px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: #c3cbd6;
  text-decoration: none;
  white-space: normal;
}
.hd-hdr-dropdown a:hover {
  background: rgba(255,255,255,0.06);
  color: #fff;
}


/* Establishing an explicit stacking context on the header so the
   nav dropdown menus render above the page content below them,
   rather than behind it (the header previously had no explicit
   position, so z-index on its dropdown descendants had no proper
   context to stack against). */
#hd-site-header {
  position: relative;
  z-index: 500;
}


/* Main nav scroll indicators - clear but unobtrusive arrows plus a
   fade edge, shown only when there's actually more to scroll in
   that direction. Suitable for touch/mobile since the arrows are
   real tappable buttons, not just a hover-only affordance. */
.hd-hdr-nav-wrap {
  position: relative;
}
.hd-hdr-nav-track {
  cursor: grab;
}
.hd-hdr-nav-track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}
.hd-hdr-nav-wrap.can-scroll-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to right, rgba(10,22,40,0), #0A1628);
  pointer-events: none;
  z-index: 1;
}
.hd-hdr-nav-wrap.can-scroll-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 36px;
  background: linear-gradient(to left, rgba(10,22,40,0), #0A1628);
  pointer-events: none;
  z-index: 1;
}
.hd-hdr-nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  color: #9aa4b2;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.hd-hdr-nav-arrow-left { left: 4px; }
.hd-hdr-nav-arrow-right { right: 4px; }
.hd-hdr-nav-wrap.can-scroll-left .hd-hdr-nav-arrow-left,
.hd-hdr-nav-wrap.can-scroll-right .hd-hdr-nav-arrow-right {
  opacity: 1;
  pointer-events: auto;
}
.hd-hdr-nav-arrow:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}


/* =========================================================
   HD ELEVATION PASS — added 2026-07-11
   Typography, measure, share bar, accent colour.
   Safe to delete this whole block to revert.
   ========================================================= */

/* --- 1. MEASURE: article body was 768px (~96 chars/line).
       Readable max is 75; NYT runs ~65. Cap at 680px (~68). --- */
html body .tdb_single_content .tdb-block-inner > p,
html body .tdb_single_content .tdb-block-inner > h2,
html body .tdb_single_content .tdb-block-inner > h3,
html body .tdb_single_content .tdb-block-inner > h4,
html body .tdb_single_content .tdb-block-inner > ul,
html body .tdb_single_content .tdb-block-inner > ol,
html body .tdb_single_content .tdb-block-inner > blockquote {
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* --- 5. ACCENT: tagDiv default orange #FFA301 clashed with brand
       crimson. Content links now use the brand red. --- */
.tdb_single_content a,
.td-page-content a,
.wpb_text_column a {
    color: #c8102e !important;
    text-decoration: none;
    border-bottom: 1px solid rgba(200,16,46,.32);
}
.tdb_single_content a:hover,
.td-page-content a:hover,
.wpb_text_column a:hover {
    color: #a50d26 !important;
    border-bottom-color: #a50d26;
}

/* --- 6. Subcategory tab rows were clipping mid-word ("WO...", "PE...").
       Let them wrap instead of overflowing. --- */
.hd-cat-subtab { white-space: nowrap; }
*:has(> .hd-cat-subtab) {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
}
*:has(> .hd-cat-subtab)::-webkit-scrollbar { display: none; }
/* ===== END HD ELEVATION PASS ===== */


/* =========================================================
   HD BYLINE + SHARE  — added 2026-07-11
   Generated from real WP author/date. Replaces typed bylines.
   ========================================================= */

.hd-byline{max-width:680px;margin:0 auto 2rem;padding-bottom:1.1rem;border-bottom:1px solid #e5e7eb;}
.hd-byline .hd-byline__cat, .tdb_single_content .hd-byline__cat{display:inline-block;background:#c8102e;color:#fff !important;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.32rem .6rem;border-radius:2px;text-decoration:none !important;border:0 !important;margin-bottom:.75rem;}
.hd-byline .hd-byline__cat:hover, .tdb_single_content .hd-byline__cat:hover{background:#a50d26;color:#fff !important;}
.hd-byline__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.9rem;color:#6b7280;}
.hd-byline .hd-byline__by a, .tdb_single_content .hd-byline__by a{color:#111827 !important;font-weight:600;text-decoration:none !important;border:0 !important;}
.hd-byline .hd-byline__by a:hover, .tdb_single_content .hd-byline__by a:hover{color:#c8102e !important;}
.hd-byline__dot{color:#d1d5db;}
.hd-byline__read{color:#6b7280;}

.hd-share{max-width:680px;margin:2.5rem auto 0;padding-top:1.4rem;border-top:1px solid #e5e7eb;}
.hd-share__label{display:block;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;font-weight:700;color:#9ca3af;margin-bottom:.75rem;}
.hd-share__row{display:flex;flex-wrap:wrap;gap:.5rem;}
.hd-share .hd-share__btn, .tdb_single_content .hd-share__btn{display:inline-block;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.85rem;font-weight:500;line-height:1;padding:.6rem .9rem;border:1px solid #d1d5db;border-radius:3px;background:#fff;color:#374151 !important;text-decoration:none !important;cursor:pointer;transition:all .12s ease;}
.hd-share .hd-share__btn:hover, .tdb_single_content .hd-share__btn:hover{border-color:#111827;color:#111827 !important;background:#f9fafb;}
.hd-share__copy{border-color:#111827;color:#111827 !important;font-weight:600;}
.hd-share__copy:hover{background:#111827;color:#fff !important;}
.hd-share__copy.is-copied{background:#c8102e;border-color:#c8102e;color:#fff !important;}

@media (max-width:600px){
  .hd-share__row{gap:.4rem;}
  .hd-share__btn{font-size:.8rem;padding:.55rem .7rem;}
}
/* ===== END HD BYLINE + SHARE ===== */


/* =========================================================
   HD MASTHEAD CTA  — added 2026-07-11
   "Ask us to decode it" — sits right of the tagline.
   Delete this block + disable the WPCode snippet to revert.
   ========================================================= */

#hd-site-header .hd-hdr-masthead{display:flex !important;align-items:center;justify-content:space-between;gap:2rem;}
#hd-site-header .hd-hdr-logo{width:auto !important;flex:0 1 auto;}
#hd-site-header .hd-hdr-tag{width:auto !important;}

.hd-ask{flex:0 0 auto;display:block;text-align:right;text-decoration:none !important;border:0 !important;border-right:3px solid #c8102e !important;padding:2px 14px 2px 0;transition:border-color .18s ease;}
.hd-ask__q{display:block;font-family:-apple-system,"Segoe UI",Roboto,sans-serif;font-size:11px;line-height:1.3;color:#8b97a8;letter-spacing:.01em;transition:color .18s ease;}
.hd-ask__a{display:block;font-family:"Merriweather",Georgia,serif;font-size:17px;line-height:1.35;color:#fff;margin-top:3px;white-space:nowrap;}
.hd-ask__arrow{display:inline-block;transition:transform .18s ease;}

.hd-ask:hover{border-right-color:#fff !important;}
.hd-ask:hover .hd-ask__q{color:#c8102e;}
.hd-ask:hover .hd-ask__arrow{transform:translateX(5px);}
.hd-ask:focus-visible{outline:2px solid #c8102e;outline-offset:4px;}

@media (max-width:1040px){
  .hd-ask__a{font-size:15px;}
}

/* Narrow: never hide the CTA — wrap it under the logo, full width, left rule. */
@media (max-width:900px){
  #hd-site-header .hd-hdr-masthead{flex-wrap:wrap;gap:0;}
  #hd-site-header .hd-hdr-logo{flex:1 1 100%;}
  .hd-ask{flex:1 1 100%;width:100%;text-align:left;margin-top:12px;padding:7px 0 7px 12px;border-right:0 !important;border-left:3px solid #c8102e !important;}
  .hd-ask__q{display:block;}
  .hd-ask__a{font-size:16px;white-space:normal;}
}
@media (max-width:480px){
  .hd-ask__a{font-size:15px;}
  .hd-ask__q{font-size:10px;}
}
/* ===== END HD MASTHEAD CTA ===== */


/* =========================================================
   HD SECTION LABEL — "More from HeadLines Decoded"
   Was near-invisible pale gray. Give it weight + a crimson tick.
   ========================================================= */
.hd-catgrid-label{
    color:#111827 !important;
    font-weight:700 !important;
    font-size:.78rem !important;
    letter-spacing:.14em !important;
    display:flex !important;
    align-items:center;
    gap:10px;
    margin-bottom:1rem !important;
}
.hd-catgrid-label::before{
    content:"";
    display:inline-block;
    width:26px;
    height:3px;
    background:#c8102e;
    flex:0 0 auto;
}
.hd-catgrid-label::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:#e5e7eb;
}
/* ===== END HD SECTION LABEL ===== */


/* =========================================================
   HD SECTION CARDS
   Uniform height (clean grid) with more breathing room.
   An earlier rule hard-sets .hd-cat-box{height:240px} so we
   must override height itself, not just min-height.
   ========================================================= */
html body .hd-cat-box{
    height:auto !important;
    min-height:296px !important;
    display:flex !important;
    flex-direction:column !important;
    padding-bottom:18px !important;
}
html body .hd-cat-article-slot{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
}
html body .hd-cat-main{ margin-bottom:14px !important; }
html body .hd-cat-secondary-row{
    margin-top:auto !important;
    padding-top:14px !important;
    border-top:1px solid #e5e7eb !important;
    gap:22px !important;
}
html body .hd-cat-secondary-item{
    font-size:.86rem !important;
    line-height:1.45 !important;
    color:#374151 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
html body .hd-cat-secondary-item:hover{ color:#c8102e !important; }

html body .hd-tof-label{
    color:#111827 !important;
    font-weight:700 !important;
    font-size:.78rem !important;
    letter-spacing:.14em !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-bottom:1rem !important;
}
html body .hd-tof-label::before{ content:"" !important; display:inline-block !important; width:26px; height:3px; background:#c8102e; flex:0 0 auto; }
html body .hd-tof-label::after{ content:"" !important; flex:1 1 auto; height:1px; background:#e5e7eb; }

html body .hd-hero-badge{
    position:absolute !important;
    top:14px !important;
    left:14px !important;
    z-index:5 !important;
    display:inline-block !important;
    background:#c8102e !important;
    color:#fff !important;
    font-family:-apple-system,"Segoe UI",Roboto,sans-serif !important;
    font-size:.68rem !important;
    font-weight:700 !important;
    letter-spacing:.1em !important;
    text-transform:uppercase !important;
    padding:.36rem .62rem !important;
    border-radius:2px !important;
    text-decoration:none !important;
    border:1px solid #111c2e !important;
    box-shadow:0 1px 3px rgba(17,28,46,.35) !important;
    transition:background .15s ease !important;
}
html body .hd-hero-badge:hover{ background:#a50d26 !important; color:#fff !important; }

/* Card tags overlap the image edge, so an outline draws a line across the photo.
   The hairline lives on the hero badge only. */
html body .hd-feed-card-tag,
html body .hd-feed-tag{
    border:0 !important;
}

@media (max-width:600px){
    html body .hd-hero-badge{ top:10px !important; left:10px !important; font-size:.62rem !important; }
}
/* ===== END HD HERO BADGE ===== */

/* =========================================================
   HD HERO CAPTION — photo credit / disclosure under the hero,
   sitting between the image and the byline (newsroom order).
   ========================================================= */
html body .hd-hero-caption{
    max-width:680px !important;
    margin:.7rem auto .2rem !important;
    font-family:-apple-system,"Segoe UI",Roboto,sans-serif !important;
    font-size:.8rem !important;
    line-height:1.5 !important;
    font-style:italic !important;
    color:#6b7280 !important;
}
html body .hd-byline{ margin-top:.4rem !important; }

/* ---- HD HERO CREDIT: the image credit, distinct from the caption.
   Read from KA Provenance's rights record and rendered by inc/image-rights.php.
   Quieter than the caption; the AI disclosure below it uses the amber .hd-rights
   box further down. ---- */
html body .hd-hero-credit{
    max-width:680px !important;
    margin:.15rem auto .2rem !important;
    font-family:-apple-system,"Segoe UI",Roboto,sans-serif !important;
    font-size:.75rem !important;
    line-height:1.5 !important;
    color:#8a8f98 !important;
}
html body .hd-hero-credit__label{
    text-transform:uppercase !important;
    font-weight:600 !important;
    letter-spacing:.06em !important;
    color:#6b7280 !important;
    margin-right:.15rem !important;
}
html body .hd-rights--image{ margin:.6rem auto 1.4rem !important; font-size:.82rem !important; }
/* ===== END HD HERO CAPTION ===== */

/* =========================================================
   HD ARTICLE HEADINGS + NOTES
   Headings carried a 5px amber left bar AND a 3px crimson underline
   — two heavy accents, and amber is not a brand colour. Headings are
   now clean navy serif. The amber bar is reserved for notes,
   disclosures and rights statements, where it signals "editorial
   housekeeping" rather than shouting over the prose.
   Brand: navy #111c2e · crimson #c8102e · amber #d98a1f (notes only)
   ========================================================= */

html body .tdb_single_content h2,
html body .td-post-content h2,
html body .tdb_single_content h3,
html body .td-post-content h3{
    border:0 !important;
    padding-left:0 !important;
    background:transparent !important;
    color:#111c2e !important;
    font-family:Merriweather,Georgia,serif !important;
    font-weight:700 !important;
    letter-spacing:-.01em !important;
}

/* ---- NOTES / DISCLOSURES / RIGHTS: the amber bar lives HERE ---- */
html body .hd-note,
html body .hd-rights{
    background:#fdf8ef !important;
    border-left:4px solid #d98a1f !important;
    border-radius:0 6px 6px 0 !important;
    padding:1rem 1.15rem !important;
    margin:2rem auto !important;
    max-width:680px !important;
    font-family:-apple-system,"Segoe UI",Roboto,sans-serif !important;
    font-size:.88rem !important;
    line-height:1.62 !important;
    color:#4a3f2f !important;
}
html body .hd-note strong,
html body .hd-rights strong{ color:#111c2e !important; }
html body .hd-rights a{ color:#c8102e !important; text-decoration:underline !important; }
/* ===== END HD ARTICLE HEADINGS ===== */
/* HD standard article hero */
.hd-article__hero{overflow:hidden}.hd-article__hero img{display:block;width:100%;height:clamp(220px,42vh,460px);object-fit:cover}


/* ==================================================================
   HD CONNECTED SUBNAV (category archives)
   The active main-menu item becomes a navy tab (header navy) and the
   category sub-menu strip attaches directly beneath the main nav,
   replacing the detached white strip further down the page.
   ================================================================== */
.category .hd-nav__list .current-menu-item > a,
.category .hd-nav__list .current-menu-parent > a,
.category .hd-nav__list .current-menu-ancestor > a {
	background: var(--hd-navy, #111c2e);
	color: #fff;
	padding-left: 13px;
	padding-right: 13px;
	margin-left: -13px;
	margin-right: -13px;
}
.category .hd-nav__list .current-menu-item > a:hover,
.category .hd-nav__list .current-menu-parent > a:hover,
.category .hd-nav__list .current-menu-ancestor > a:hover {
	color: #fff;
}

/* Pull the strip flush against the main nav (it is .hd-main's first
   child; the gap was .hd-main's top padding). Restore that breathing
   room below the strip instead. */
.category .hd-main {
	padding-top: 0;
}
.category .hd-subnav {
	background: #fff;
	margin-bottom: 48px;
}

/* Footer social icons: SVG marks sit centered in their round buttons. */
.hd-footer__social-link svg {
	display: block;
	fill: currentColor;
}


/* Article pages: the section strip sits flush under the main nav
   (same treatment as category archives), the article header tucks
   up under it, and the hero sits on the article's 680px reading
   rail instead of spanning the whole container. */
.single .hd-main:has(> .hd-subnav) {
  padding-top: 0;
}
.single .hd-subnav {
  background: #fff;
  margin-bottom: 48px;
}
.single .hd-main:has(> .hd-subnav) .hd-article__head {
  padding-top: 0.75rem;
}
.hd-article__hero {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
/* Widescreen hero + tighter article opening: cinema-band hero (21:9,
   wider than a 16:9 TV so it buys back vertical space), slightly
   smaller desktop headline, and less air around the section strip so
   the first lines of the article clear the fold. */
.single .hd-subnav {
  margin-bottom: 24px;
}
@media (min-width: 782px) {
  .hd-article__headline {
    font-size: 2.125rem;
  }
}
.hd-article__hero img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.hd-article__hero figcaption {
  margin-top: 8px;
}

/* The hero breaks out to its own wider rail - still 21:9, still
   centered, caption rides with it. Text stays on the 680px rail;
   the hero gets a deliberate wider guide line. */
.hd-article__hero {
  max-width: 860px;
}

/* Sources pill: pale mint. Green quietly reads ''verified'', and the
   pastel sits calm next to the navy header and red accents. */
.hd-chip--sources {
  background: #e7f4ec;
  border-color: #b7dfc6;
  color: #14532d;
}
.hd-chip--sources:hover {
  background: #d7ecdf;
  border-color: #8fccaa;
  color: #0f3d22;
}

/* Fine-tune: hero rail in 5 percent (860 to 816), title up a smidge,
   and the caption anchors to the image edge instead of floating on
   the text rail - the caption is the photo's furniture, not body copy. */
.hd-article__hero {
  max-width: 816px;
}
.single .hd-subnav {
  margin-bottom: 16px;
}
.single .hd-main:has(> .hd-subnav) .hd-article__head {
  padding-top: 0.5rem;
}
.hd-article__hero figcaption {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* The hero's caption wrapper rides the wide rail with the image, so
   the caption's left edge anchors to the photo's left edge. */
.single .hd-article__hero .hd-wrap {
  max-width: 816px;
}
figure.hd-article__hero figcaption,
.single figure.hd-article__hero figcaption {
  max-width: none;
  margin-top: 10px;
}

/* Beat the legacy hero-caption clamp (html body .hd-hero-caption
   680px !important, from the old Additional-CSS layer) so the
   caption rides the wide rail with its image. */
html body .hd-article__hero .hd-hero-caption {
  max-width: none !important;
}


/* Mobile Big Stories card: a base rule elsewhere forces
   .hd-feed-card { display:grid !important; 92px 1fr } which shattered
   phones into a two-column mess. On small screens the card is a clean
   stacked card, same feel as the Editor's Pick. */
@media (max-width: 767px) {
  html body.hd-page .hd-tof-grid .hd-feed-card {
    display: flex !important;
    flex-direction: column !important;
  }
  html body.hd-page .hd-tof-grid .hd-feed-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover;
  }
  html body.hd-page .hd-tof-grid .hd-feed-card h2 {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 6px 0;
  }
}

/* Meta pills: date, read length and source count as separate chips on
   the feature cards (lead, Editor's Pick, Big Stories). More Headlines
   stays chip-free - too cramped. Future: these become filter links. */
.hd-meta-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hd-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #d7dce3;
  border-radius: 9999px;
  padding: 3px 11px;
  background: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #3f4a5a;
  line-height: 1.2;
  white-space: nowrap;
}
.hd-meta-pills .hd-verify {
  margin-left: 0;
}
/* The sources chip wears the same pill shape as its siblings - in the
   mint of the article page's sources pill. */
.hd-meta-pills .hd-verify {
  border: 1px solid #b7dfc6;
  background: #e7f4ec;
  border-radius: 9999px;
  padding: 3px 11px;
  color: #14532d;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Pill color families: pale blue = when (date), pale amber = how long
   (read time), mint = verified (sources). Same pastel register, three
   quiet hues - and a preview that these are three different filters
   once they become clickable. */
.hd-pill--date {
  background: #e8f1fc;
  border-color: #bcd7f5;
  color: #1e3a5f;
}
.hd-pill--read {
  background: #fdf1dd;
  border-color: #f0d9a7;
  color: #92400e;
}


/* The article byline meta joins the pill system - same three chips as
   the homepage feature cards. */
.hd-prov__meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
/* -------------------------------------------------------------------------
 * Accessibility — a global keyboard focus ring (§8.8.1)
 *
 * Several button/link resets set `outline: none` with no replacement, which
 * left keyboard users with no visible focus. This restores a clear, consistent
 * focus indicator for every interactive element on :focus-visible (so it shows
 * for keyboard/AT focus, not on mouse click), which no reset overrides.
 * ---------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
	outline: 2px solid #c8102e;
	outline-offset: 2px;
	border-radius: 2px;
}