/*
Theme Name: Exhibition News
Theme URI: https://exhibitionnews.co.uk
Author: Mash Media
Author URI: https://mashmedia.net
Description: Custom theme for Exhibition News, the trade title for the UK exhibitions and events industry.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: exhibition-news
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #1B2B43;
  --navy2:  #253659;
  --yellow: #F5C800;
  --teal:   #0E7C7B;
  --ink:    #111827;
  --grey:   #6B7280;
  --lgrey:  #F3F4F6;
  --rule:   #E5E7EB;
  --white:  #FFFFFF;
  --display: 'Oswald', sans-serif;
  --body:   'Figtree', sans-serif;
  --serif:  'IBM Plex Serif', Georgia, serif;
  --radius:    8px;
  --radius-sm: 4px;
  --radius-lg: 16px;
}

body { font-family: var(--body); color: var(--ink); background: white; font-size: 16px; line-height: 1.6; overflow-x: clip; }
a { text-decoration: none; color: inherit; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ── Top utility bar ── */
.utility-bar {
  background: var(--navy);
  padding: 7px 0;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  font-family: var(--body);
  letter-spacing: 0.02em;
}
.utility-bar .inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.utility-bar a { color: rgba(255,255,255,0.55); }
.utility-bar a:hover { color: var(--yellow); }
.utility-links { display: flex; gap: 20px; }
.subscribe-link {
  background: var(--yellow); color: var(--navy) !important;
  padding: 3px 12px; font-weight: 700; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  border-radius: var(--radius-sm);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ── Main header ── */
header {
  border-bottom: 1px solid var(--rule);
  padding: 0;
  background: white;
  position: sticky; top: 0; z-index: 200;
}
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 12px 48px;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 50px;
}
.logo {
  display: flex; align-items: center; gap: 12px;
}
.logo-mark {
  font-family: var(--display);
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
}
.logo-mark-img {
  height: clamp(48px, 5.6vw, 64px);
  width: auto;
  display: block;
}
.logo-tagline {
  font-size: 10px;
  font-family: var(--body);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  border-left: 1px solid var(--rule);
  padding-left: 12px;
  line-height: 1.3;
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.btn-subscribe {
  background: #ffffff;
  color: var(--navy);
  padding: 8px 19px;
  font-weight: 700;
  font-size: 12px;
  font-family: var(--body);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
  transition: none;
  border: 1.5px solid var(--navy); cursor: pointer;
  border-radius: var(--radius-sm);
  box-shadow: none;
}
.btn-subscribe:hover { background: var(--navy); color: white; }
.btn-ghost {
  color: var(--navy);
  background: transparent;
  padding: 9px 4px;
  font-weight: 600;
  font-size: 12px;
  font-family: var(--body);
  line-height: 1;
  border: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: none;
  position: relative;
}
.btn-ghost::after {
  content: '';
  position: absolute;
  left: 4px; right: 4px; bottom: 4px;
  height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease-out;
}
.btn-ghost:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Category nav ── */
.cat-nav {
  border-bottom: 1px solid var(--rule);
  background: white;
}
.cat-nav-inner {
  max-width: 1440px; margin: 0 auto; padding: 0 48px;
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; scrollbar-width: none;
  cursor: grab;
}
.cat-nav-inner.dragging { cursor: grabbing; user-select: none; }
.cat-nav-inner::-webkit-scrollbar { display: none; }
.cat-link {
  display: block;
  padding: 9px 13px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--body);
  color: #4B5563;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  white-space: nowrap;
  position: relative;
  transition: none;
}
/*
 * The yellow active-state underline is inset by the link's horizontal padding
 * on both sides so it centres on the label itself rather than spanning the
 * whole padded box. Padding is symmetric (13px) so left/right of 13px lines
 * the underline up precisely with the text edges.
 */
.cat-link::after {
  content: '';
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 0;
  height: 2.5px;
  background: transparent;
}
.cat-link:hover { color: var(--navy); }
.cat-link:hover::after { background: var(--yellow); }
.cat-link.active { color: var(--navy); }
.cat-link.active::after { background: var(--yellow); }

/* ── Main content area ── */
.main { max-width: 1440px; margin: 0 auto; padding: 0 48px; }

/* ── The EN100 banner ── */
.en100-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--navy);
  border-radius: var(--radius);
  padding: 14px 24px 14px 28px;
  margin: 16px 0 20px;
  position: relative;
  overflow: hidden;
}
.en100-banner::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yellow) 0%, var(--teal) 100%);
}
.en100-banner-text {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}
.en100-badge {
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 11px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.en100-wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  color: var(--yellow);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}
.en100-divider {
  width: 1px;
  height: 28px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.en100-banner-copy {
  font-family: var(--body);
  font-size: 12px;
  color: rgba(255,255,255,0.8);
  line-height: 1.4;
  max-width: 380px;
}
.en100-banner-btn {
  flex-shrink: 0;
  background: transparent;
  color: var(--yellow);
  border: 1.5px solid rgba(245,200,0,0.5);
  padding: 9px 18px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  white-space: nowrap;
}
.en100-banner-btn:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

/* ── Header LinkedIn follow link ── */
.header-linkedin-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 4px;
  line-height: 1;
  color: var(--navy);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  margin-right: 8px;
  transition: none;
}
.header-linkedin-link svg { width: 12px; height: 12px; flex-shrink: 0; position: relative; top: -2px; }
.header-linkedin-link:hover { color: #0A66C2; }

/* ── Search ── */
.header-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  background: transparent;
  border: none;
  color: var(--navy);
  cursor: pointer;
  transition: none;
}
.header-search-btn svg { width: 18px; height: 18px; }
.header-search-btn:hover { color: var(--teal); }

/* Sign-out control, shown in place of Subscribe once someone is logged in.
   Deliberately matched to .header-search-btn rather than given its own look -
   they sit next to each other in the same row and read as one set of icons. */
.header-logout-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: var(--navy);
}
.header-logout-link svg { width: 18px; height: 18px; }
.header-logout-link:hover { color: var(--teal); }
.search-overlay {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: white;
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  z-index: 199;
}
.search-overlay.open { max-height: 90px; }
.search-overlay-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-overlay-icon { width: 20px; height: 20px; color: var(--grey); flex-shrink: 0; }
.search-overlay-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--body);
  font-size: 18px;
  color: var(--ink);
}
.search-overlay-input::placeholder { color: var(--grey); }
.search-overlay-close {
  background: transparent;
  border: none;
  color: var(--grey);
  cursor: pointer;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.search-overlay-close svg { width: 16px; height: 16px; }
.search-overlay-close:hover { color: var(--navy); }




/* ── Section labels ── */
.section-label {
  display: flex; align-items: center; gap: 12px;
  padding: 32px 0 18px;
}
.section-label span {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grey);
}
.section-label::before {
  content: '';
  width: 30px; height: 3px;
  background: linear-gradient(90deg, var(--yellow) 0 62%, var(--teal) 62% 100%);
}

/* ── Category tag ── */
.cat-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  margin-right: 8px;
  border-radius: 3px;
}
.cat-tag.news    { background: rgba(27,42,74,0.08); color: var(--navy); border-radius: 3px; padding: 3px 9px; }
.cat-tag.analysis{ background: var(--teal); color: white; }
.cat-tag.opinion { background: var(--navy); color: white; }
.cat-tag.exclusive { background: var(--navy); color: var(--yellow); }
/*
 * Plain-text category label - the output shape of ennews_the_content_type_tag()
 * across category/archive/single/search/author pages. Matches the homepage's
 * .hp-cat-eyebrow treatment (teal caps, no background) so the whole site
 * reads with one consistent category-label style rather than a coloured pill
 * on some pages and plain text on others.
 */
.content-cat {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-right: 8px;
}
.date-label {
  font-size: 11px;
  color: var(--grey);
  font-family: var(--body);
}

/* ── Hero grid ── */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr clamp(285px, 30.5%, 368px);
  gap: 0;
  align-items: start;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 40px;
  margin-bottom: 8px;
}

.hero-feature { padding-right: 32px; }
.hero-img { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 16px; border-radius: 5px; }
.hero-img img { transition: transform 0.4s ease; }
.hero-img:hover img { transform: scale(1.02); }
.hero-headline {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.hero-headline:hover { color: var(--teal); }
.hero-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 12px;
  font-weight: 400;
}

/* ── Hero sidebar ── */
.hero-sidebar { padding-left: 28px; border-left: 1px solid var(--rule); }
.hero-secondary {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 24px;
}
.hero-sec-img { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 12px; border-radius: 3px; }
.hero-sec-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.15;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.hero-sec-headline:hover { color: var(--teal); }
.hero-sec-standfirst { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--grey); line-height: 1.5; margin-bottom: 8px; }

/* ── Most Popular ── */
.most-popular-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--navy);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.most-popular-label::after { content: ''; flex: 1; height: 1px; background: var(--rule); }
.popular-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.popular-item:last-child { border-bottom: none; }
.popular-num {
  font-family: var(--display);
  font-weight: 700;
  color: var(--rule);
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  margin-top: 4px;
}
.popular-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.5;
}
.popular-title:hover { color: var(--teal); }
.popular-meta { font-size: 10px; color: var(--grey); margin-top: 6px; letter-spacing: 0.03em; }

/* ── Second feature row ── */
.second-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
}
.feature-card {}
.feature-img { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 14px; border-radius: 5px; }
.feature-img img { transition: transform 0.4s ease; }
.feature-img:hover img { transform: scale(1.03); }
.feature-headline {
  font-family: var(--serif);
  font-weight: 700;
  line-height: 1.12;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.015em;
}
.feature-headline:hover { color: var(--teal); }
.feature-standfirst { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--grey); line-height: 1.55; margin-bottom: 8px; font-weight: 400; }

/* ── Four column grid ── */
.four-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 8px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.mini-card {}
.mini-img { aspect-ratio: 3/2; overflow: hidden; margin-bottom: 10px; border-radius: 3px; }
.mini-img img { transition: transform 0.4s ease; }
.mini-img:hover img { transform: scale(1.04); }
.mini-headline {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.mini-headline:hover { color: var(--teal); }
.mini-excerpt { font-size: 12px; color: var(--grey); line-height: 1.5; margin-bottom: 8px; }

/* ── Navy band: newsletter / latest issue ── */
.navy-band {
  background: var(--navy);
  margin: 32px -24px 0;
  padding: 48px 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.navy-band h2 {
  font-family: var(--display);
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-bottom: 12px;
}
.navy-band h2 span { color: var(--yellow); }
.navy-band p { font-size: 14px; color: rgba(255,255,255,0.6); line-height: 1.6; margin-bottom: 24px; }
.email-row { display: flex; gap: 0; }
.email-input {
  flex: 1;
  padding: 12px 16px;
  font-size: 14px;
  font-family: var(--body);
  border: none;
  outline: none;
  background: rgba(255,255,255,0.1);
  color: white;
  border: 1px solid rgba(255,255,255,0.2);
}
.email-input::placeholder { color: rgba(255,255,255,0.35); }
.email-btn {
  background: var(--yellow);
  color: var(--navy);
  padding: 12px 24px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}
.navy-divider { width: 1px; background: rgba(255,255,255,0.12); }
.latest-issue-block {}
.issue-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--yellow);
  margin-bottom: 8px;
}
.issue-title {
  font-family: var(--display);
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  line-height: 1.2;
}
.issue-desc { font-size: 13px; color: rgba(255,255,255,0.55); line-height: 1.55; margin-bottom: 20px; }
.issue-btn {
  display: inline-block;
  padding: 10px 24px;
  border: 1.5px solid var(--yellow);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.15s;
}
.issue-btn:hover { background: var(--yellow); color: var(--navy); }

/* ── Footer ── */
footer {
  background: #111827;
  padding: 48px 24px 24px;
  margin-top: 0;
}
.footer-inner { max-width: 1200px; margin: 0 auto; }
.footer-top {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 24px;
}
.footer-brand-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.footer-logo-img {
  height: 34px;
  width: auto;
  display: block;
  margin-bottom: 12px;
}
.footer-brand-tag { font-size: 12px; color: rgba(255,255,255,0.35); margin-bottom: 16px; }
.footer-social { display: flex; gap: 10px; }
.social-btn {
  width: 32px; height: 32px;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.4);
  transition: none; cursor: pointer;
}
.social-btn svg { width: 15px; height: 15px; }
.social-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  margin-bottom: 14px;
}
.footer-link {
  display: block;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 8px;
  transition: none;
}
.footer-link:hover { color: var(--yellow); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
}
.footer-bottom a { color: rgba(255,255,255,0.25); }
.footer-bottom a:hover { color: rgba(255,255,255,0.5); }
.mash-link { color: var(--yellow) !important; opacity: 0.7; }

/* ── Image placeholders (solid colours for prototype) ── */
/* ── Fluid typography ── */
.logo-mark    { font-size: clamp(22px, 3vw, 34px); }
.hero-headline { font-size: clamp(25px, 3.6vw, 42px); }
.hero-sec-headline { font-size: clamp(17.5px, 2.15vw, 23.5px); }
.feature-headline  { font-size: 24.5px; }
.navy-band h2      { font-size: clamp(20px, 2.8vw, 32px); }
.issue-title       { font-size: clamp(16px, 1.8vw, 22px); }
.mini-headline     { font-size: 22px; }

/* ── Newsletter band (compact, inline) ── */
.newsletter-band {
  background: var(--teal);
  width: 100vw;
  margin: 40px calc(50% - 50vw);
  box-shadow: 0 14px 32px rgba(17,24,39,0.14);
}
.nl-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 52px 48px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.nl-text { flex: 1; }
.nl-text strong {
  display: block;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px);
  color: white;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin-bottom: 10px;
}
.nl-text span { font-size: 14px; color: rgba(255,255,255,0.75); }
.nl-form { display: flex; gap: 0; flex-shrink: 0; }
.nl-input {
  padding: 13px 18px;
  font-size: 14px;
  font-family: var(--body);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  color: white;
  outline: none;
  width: 250px;
}
.nl-input::placeholder { color: rgba(255,255,255,0.3); }
.nl-btn {
  background: var(--yellow);
  color: var(--navy);
  padding: 13px 24px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.nl-btn:hover { background: #e6ba00; }

/* ── Comment band ── */
.comment-band {
  background: #F9EAB8;
  border-radius: var(--radius-lg);
  margin: 48px 0;
  padding: 56px 56px 60px;
}
.comment-band-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 44px;
}
.comment-band-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(38px, 4.6vw, 54px);
  color: var(--navy);
  letter-spacing: -0.01em;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.comment-band-label::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease-out;
}
.comment-band-label:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.comment-viewall {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  white-space: nowrap;
  border-bottom: 1.5px solid rgba(27,42,74,0.5);
  padding-bottom: 3px;
  transition: opacity 0.15s;
}
.comment-viewall:hover { opacity: 0.55; }
.comment-cards {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  gap: 44px 40px;
}
.comment-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  min-width: 0;
}
.comment-card.featured {
  grid-column: 1;
  grid-row: 1 / span 2;
  flex-direction: column;
  gap: 22px;
  padding-right: 44px;
  border-right: 1px solid rgba(27,42,74,0.16);
}
.commenter-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: white;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
}
.comment-card.featured .commenter-avatar { width: 100px; height: 100px; font-size: 32px; }
.commenter-avatar.ps { background: #253659; }
.commenter-avatar.kc { background: #0E7C7B; }
.commenter-avatar.hm { background: #374151; }
.commenter-avatar.mw { background: #7C3AED; }
.commenter-avatar.so { background: #2C5F9E; }
.commenter-info { flex: 1; min-width: 0; }
.commenter-name {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--navy);
  opacity: 0.6;
  margin-bottom: 8px;
}
.comment-card.featured .commenter-name { font-size: 12px; margin-bottom: 0; }
.comment-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--navy);
  line-height: 1.28;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
  overflow-wrap: break-word;
}
.comment-card.featured .comment-title {
  font-size: clamp(27px, 2.7vw, 33px);
  line-height: 1.18;
  font-weight: 700;
  margin-bottom: 10px;
}
.comment-title:hover { opacity: 0.6; }
.comment-teaser {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: rgba(27,42,74,0.72);
  line-height: 1.5;
  margin-bottom: 16px;
}
.comment-meta { font-size: 11px; color: rgba(27,42,74,0.55); margin-top: 8px; }

/* ── Latest issue standalone ── */
.latest-issue-strip {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 40px 0;
  gap: 16px;
  box-shadow: 0 2px 10px rgba(17,24,39,0.04);
}
.issue-cover {
  width: clamp(190px, 26vw, 340px);
  flex-shrink: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16);
}
.issue-strip-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--teal);
  margin-bottom: 8px;
}
.issue-strip-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(23px, 2.6vw, 30px);
  color: var(--navy);
  margin-bottom: 8px;
  line-height: 1.2;
}
.issue-strip-desc { font-size: 15px; color: var(--grey); line-height: 1.55; }
.issue-strip-btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 11px 24px;
  background: var(--navy);
  color: white;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  transition: background 0.15s;
  cursor: pointer;
  border: none;
  border-radius: var(--radius-sm);
}
.issue-strip-btn:hover { background: var(--teal); }

/* ── EN Explores video section (full-bleed black, mosaic grid) ── */
.explores-section {
  background: #0D1117;
  width: 100vw;
  margin: 40px calc(50% - 50vw);
  padding: 48px 0;
}
.explores-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.explores-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
}
.explores-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 4.8vw, 56px);
  color: white;
  letter-spacing: -0.01em;
}
.explores-viewall {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--yellow);
  white-space: nowrap;
}
.explores-viewall:hover { color: white; }

/* Featured interview (appears only when a recent one exists) */
.explores-interview {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.explores-interview-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: 5px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.4);
}
.explores-interview-thumb img { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; }
.explores-interview:hover .explores-interview-thumb img { transform: scale(1.05); }
.explores-interview-body { min-width: 0; }
.explores-interview-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: var(--yellow);
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}
.explores-interview-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px);
  color: white;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.005em;
}
.explores-interview:hover .explores-interview-title { color: var(--yellow); }
.explores-interview-desc {
  font-family: var(--body);
  font-size: 16px;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
}


/* Mosaic grid */
.explores-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-auto-flow: dense;
  gap: 14px;
}
.explores-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  aspect-ratio: 9/16;
  box-shadow: 0 6px 16px rgba(0,0,0,0.3);
  display: block;
}
.explores-tile-featured {
  grid-column: span 2;
  grid-row: span 2;
}
.explores-tile .img-ph { width: 100%; height: 100%; position: absolute; inset: 0; }
.explores-tile img { transition: transform 0.4s ease; width: 100%; height: 100%; object-fit: cover; }
.explores-tile:hover img { transform: scale(1.05); }
.explores-featured-label {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--yellow);
  color: var(--navy);
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
}
.explores-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.explores-tile-featured .explores-play { width: 60px; height: 60px; }
.explores-play svg { width: 15px; height: 15px; margin-left: 2px; }
.explores-tile-featured .explores-play svg { width: 26px; height: 26px; }
.explores-play-lg { width: 68px; height: 68px; }
.explores-play-lg svg { width: 28px; height: 28px; }
.explores-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(0,0,0,0.75);
  color: white;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 2;
}
.explores-tile-title {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 40px 14px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  color: white;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  z-index: 1;
}
.explores-tile-featured .explores-tile-title { font-size: 24px; padding: 60px 20px 20px; }
.explores-tile:hover .explores-tile-title { color: var(--yellow); }
.explores-tablet-only { display: none; }
.explores-viewmore-tile {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.explores-viewmore-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.explores-viewmore-circle svg { width: 24px; height: 24px; }
.explores-viewmore-tile:hover .explores-viewmore-circle { background: var(--yellow); color: var(--navy); }
.explores-viewmore-tile span {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-align: center;
  padding: 0 12px;
}
.explores-viewmore-tile:hover span { color: var(--yellow); }

/* ── Sponsored Content ── */
.sponsored-section { margin: 8px 0 40px; }
.sponsored-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.sponsored-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 19px;
  color: var(--grey);
  letter-spacing: -0.005em;
}
.sponsored-viewall {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
  white-space: nowrap;
}
.sponsored-viewall:hover { color: var(--navy); }
.sponsored-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.sponsored-card { display: block; }
.sponsored-img {
  aspect-ratio: 3/2;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 10px;
}
.sponsored-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--grey);
  border: 1px solid var(--rule);
  padding: 2px 7px;
  border-radius: 3px;
  margin-bottom: 6px;
}
.sponsored-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  color: var(--navy);
}
.sponsored-card:hover .sponsored-title { color: var(--teal); }


/* ── Three column grid ── */
.three-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 8px 0 40px;
  border-bottom: 1px solid var(--rule);
}

/* ── Reports section ── */
.reports-section {
  background: var(--lgrey);
  border-radius: var(--radius-lg);
  margin: 40px 0;
  padding: 48px 48px 52px;
}
.reports-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}
.reports-heading-group {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.reports-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5vw, 58px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  padding-bottom: 8px;
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.reports-heading::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 3px;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s ease-out;
}
.reports-heading:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
.reports-viewall {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  white-space: nowrap;
  border-bottom: 1.5px solid rgba(27,42,74,0.35);
  padding-bottom: 3px;
  transition: opacity 0.15s;
}
.reports-viewall:hover { opacity: 0.55; }
.reports-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px;
}
.reports-featured { max-width: 380px; }
.reports-featured-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.reports-featured-img img { transition: transform 0.4s ease; }
.reports-featured-img:hover img { transform: scale(1.04); }
.reports-featured-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.22;
  color: var(--navy);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.reports-featured-title:hover { color: var(--teal); }
.reports-featured-desc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 14px;
}
.reports-featured-link {
  display: inline-block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--teal);
  border-bottom: 1.5px solid rgba(14,124,123,0.4);
  padding-bottom: 2px;
  transition: opacity 0.15s;
}
.reports-featured-link:hover { opacity: 0.6; }
.reports-list {
  display: flex;
  flex-direction: column;
  padding-top: 4px;
}
.reports-list-item {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.reports-list-item:last-child { border-bottom: none; }
.reports-tag-slot { flex-shrink: 0; width: 120px; }
.report-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
}
.report-tag.c-teal { background: rgba(14,124,123,0.12); color: #0E7C7B; }
.report-tag.c-yellow { background: rgba(245,200,0,0.22); color: #7A5C00; }
.report-tag.c-purple { background: rgba(124,58,237,0.12); color: #6D4FC4; }
.report-tag.c-pink { background: rgba(190,24,93,0.12); color: #B0356E; }
.report-tag.c-amber { background: rgba(180,83,9,0.12); color: #A5610F; }
.report-tag.c-navy { background: rgba(27,42,74,0.1); color: var(--navy); }
.reports-list-title {
  flex: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.4;
  color: var(--navy);
}
.reports-list-item:hover .reports-list-title { color: var(--teal); }
.reports-list-date {
  font-size: 11px;
  color: var(--grey);
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.03em;
}


.digest-list {
  padding: 24px 0 32px;
}
.digest-item {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.digest-item .cat-tag {
  flex-shrink: 0;
  width: 100px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.digest-item > a { flex: 1; min-width: 0; }
.digest-item:last-child { border-bottom: none; }
.digest-title {
  flex: 1;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  color: var(--navy);
  line-height: 1.3;
}
.digest-title:hover { color: var(--teal); }
.digest-byline { font-size: 12px; color: var(--grey); flex-shrink: 0; white-space: nowrap; width: 90px; text-align: right; }

/* ── Tablet landscape (≤1024px) ── */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr 280px; }
  .four-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .comment-cards { grid-template-columns: repeat(2, 1fr); }
  .comment-card.featured { grid-column: 1 / -1; grid-row: auto; flex-direction: row; border-right: none; padding-right: 0; border-bottom: 1px solid rgba(27,42,74,0.16); padding-bottom: 32px; margin-bottom: 8px; }
  .comment-card.featured .commenter-avatar { width: 84px; height: 84px; font-size: 26px; }
  .comment-card.featured .comment-title { font-size: 26px; }
  .explores-grid { grid-template-columns: repeat(3, 1fr); }
  .explores-viewmore-tile { display: flex; }
  .explores-tablet-only { display: block; }
  .sponsored-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Responsive updates for new components ── */
@media (max-width: 900px) {
  .en100-banner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .en100-banner-text { flex-direction: column; align-items: flex-start; gap: 8px; }
  .en100-divider { display: none; }
  .en100-banner-btn { width: 100%; text-align: center; }
  .newsletter-band { margin: 28px calc(50% - 50vw); }
  .nl-inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .nl-form { width: 100%; }
  .nl-input { flex: 1; width: auto; }
  .comment-cards { grid-template-columns: 1fr; gap: 28px; }
  .comment-card.featured { grid-column: 1; grid-row: auto; border-right: none; padding-right: 0; flex-direction: row; }
  .comment-card.featured .commenter-avatar { width: 76px; height: 76px; font-size: 24px; }
  .comment-card.featured .comment-title { font-size: 24px; }
  .comment-band { margin: 28px 0; padding: 36px 28px; }
  .reports-section { margin: 28px 0; padding: 36px 28px; }
  .three-grid { grid-template-columns: repeat(2, 1fr); }
  .latest-issue-strip { flex-direction: column; gap: 16px; align-items: center; }
  .explores-section { margin: 28px calc(50% - 50vw); padding: 36px 0; }
  .explores-grid { grid-template-columns: repeat(2, 1fr); }
  .explores-interview { grid-template-columns: 1fr; gap: 20px; }
  .explores-tile-featured { grid-column: span 1; grid-row: span 1; }
  .explores-tile-featured .explores-tile-title { font-size: 15px; padding: 36px 12px 12px; }
  .explores-tile-featured .explores-play { width: 34px; height: 34px; }
  .explores-tile-featured .explores-play svg { width: 15px; height: 15px; }
  .explores-mobile-hide { display: none; }
  .explores-viewmore-tile { display: none; }
  .explores-tablet-only { display: none; }
  .digest-byline { display: none; }
}
@media (max-width: 640px) {
  .newsletter-band { margin: 24px calc(50% - 50vw); }
  .nl-inner { padding: 20px 16px; }
  .comment-band { margin: 24px 0; padding: 24px 16px; }
  .three-grid { grid-template-columns: 1fr; }
  .four-grid { grid-template-columns: 1fr; }
  .explores-inner { padding: 0 20px; }
  .sponsored-grid { grid-template-columns: 1fr; gap: 16px; }
}


/* ── Tablet portrait (≤900px) ── */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero-feature {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 24px;
    margin-bottom: 24px;
  }
  .hero-sidebar { padding-left: 0; border-left: none; }
  .hero-sec-headline { font-size: clamp(22px, 3.6vw, 30px); }
  .second-row { grid-template-columns: 1fr; gap: 24px; }
  .reports-grid { grid-template-columns: 1fr; gap: 28px; }
  .reports-featured { max-width: 320px; margin: 0 auto; }
  .reports-list { margin-top: 4px; padding-top: 24px; border-top: 1px solid var(--rule); }
  .navy-band {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 36px 28px;
    margin: 24px -24px 0;
  }
  .navy-divider { width: 100%; height: 1px; }
  .footer-top { grid-template-columns: 1fr; gap: 32px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobile (≤640px) ── */
@media (max-width: 420px) {
  .utility-bar .inner { flex-direction: column; gap: 6px; text-align: center; }
}

@media (max-width: 640px) {
  .cat-nav-inner { padding: 0 16px; }
  .main { padding: 0 16px; }
  .header-inner { padding: 12px 16px; }
  .utility-bar .inner { padding: 0 16px; }
  .footer-links { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
  .section-label { padding: 16px 0 12px; }
  .hero-sidebar .hero-secondary { display: none; }
  .nl-form { flex-direction: column; }
  .nl-btn { width: 100%; text-align: center; }
  .reports-heading { font-size: 36px; }
}

.img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.img-ph span { color: rgba(255,255,255,0.25); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }

/* ── Single article template CSS (from article-page.html mockup) ── */
.listing-crumb {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.listing-crumb a { color: var(--grey); }
.listing-crumb a:hover { color: var(--navy); }
.listing-crumb span:last-child { color: var(--navy); font-weight: 600; }

/* ── Article layout ── */
.article-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  padding: 32px 0 56px;
}
.article-main { min-width: 0; max-width: 700px; }

.article-meta-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.article-meta-row .cat-tag { margin-right: 0; }
.article-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(32px, 3.8vw, 46px);
  line-height: 1.14;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}
.article-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  color: var(--grey);
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Comment/Opinion articles: prominent author block replacing the featured
   image, used when single.php detects the post is in the Opinion category. */
.comment-author-block {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 0;
  margin-bottom: 4px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.comment-author-avatar { width: 92px; height: 92px; font-size: 28px; flex-shrink: 0; }
.comment-author-name { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--navy); }
.comment-author-role { font-family: var(--body); font-size: 14px; color: var(--grey); margin-top: 3px; }

.article-byline-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
/* Used when comment-author-block sits directly above - its own bottom border
   already provides the divider, so this avoids a doubled line. */
.article-byline-row.no-top-border { border-top: none; }
.article-byline-row .commenter-avatar { width: 46px; height: 46px; font-size: 15px; flex-shrink: 0; }
.article-byline-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.article-byline-name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy); }
.article-byline-name:hover { color: var(--teal); }
.article-byline-role { font-family: var(--body); font-size: 12px; color: var(--grey); }
.article-share { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.article-share-label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--grey);
  margin-right: 2px;
}
.share-linkedin-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  color: white;
  background: #0A66C2;
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  transition: none;
}
.share-linkedin-btn svg { width: 11px; height: 11px; flex-shrink: 0; position: relative; top: -1px; }
.share-linkedin-btn:hover { background: #08508f; }
.share-btn {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  border: 1px solid var(--rule);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
}
.share-btn:hover { border-color: var(--navy); }

.article-hero-wrap { margin: 0 0 40px; }
.article-hero-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.article-img-caption {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  line-height: 1.4;
  margin-top: 10px;
}

/* ── Article body typography ── */
.article-body {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.7;
  color: #1F2937;
}
.article-body p { margin: 0 0 26px; }
.article-body ul, .article-body ol {
  margin: 0 0 26px;
  padding-left: 28px;
}
.article-body li { margin-bottom: 10px; }
.article-body li:last-child { margin-bottom: 0; }
/* Old/pasted-in content sometimes has literal empty paragraphs (<p>&nbsp;</p>
   or <p></p>) left over between real paragraphs - each one still takes the
   24px margin above, which is what causes the "double spacing" some older
   articles show. Collapsing empty ones removes the extra gap without
   affecting normal paragraphs. */
.article-body p:empty { display: none; margin: 0; }

/* Links inside body copy: underline rather than colour, per house style */
.article-body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(31,41,55,0.4);
}
.article-body a:hover { text-decoration-color: currentColor; }

/* In-body images (not the featured image) - constrained to the text column,
   same width/margins as the surrounding copy, with WordPress's native image
   caption (figure/figcaption from the block editor's Image block) styled to
   match the featured-image caption treatment. */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.article-body figure {
  margin: 36px 0;
}
.article-body figure img { margin-bottom: 0; }
.article-body figcaption {
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
  margin-top: 8px;
}

/* Raw <blockquote> (WordPress block editor's native Quote block) styled to
   match our custom .article-pullquote look, so writers get the right design
   automatically without needing a special block/shortcode. */
.article-body blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 24px;
  margin: 36px 0;
}
.article-body blockquote cite,
.article-body blockquote p:last-child {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-weight: 600;
  font-size: 14px;
  color: var(--grey);
  margin-top: 12px;
}

.article-subhead,
.article-body h2,
.article-body h3 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--navy);
  line-height: 1.3;
  margin: 38px 0 32px;
  letter-spacing: -0.005em;
}
.article-pullquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.4;
  color: var(--navy);
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 24px;
  margin: 36px 0;
}
.article-pullquote span {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-weight: 600;
  font-size: 13px;
  color: var(--grey);
  margin-top: 12px;
  letter-spacing: 0.01em;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 32px;
  margin-top: 8px;
  border-top: 1px solid var(--rule);
}
.article-tag {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  background: var(--lgrey);
  padding: 7px 14px;
  border-radius: 999px;
}
.article-tag:hover { background: var(--rule); }

/* ── Author bio card ── */
.author-bio-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  background: var(--lgrey);
  border-radius: var(--radius);
  padding: 24px;
  margin: 32px 0;
}
.author-bio-card .commenter-avatar { width: 56px; height: 56px; font-size: 18px; flex-shrink: 0; }
.author-bio-body { flex: 1; min-width: 0; }
.author-bio-name { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--navy); }
.author-bio-name:hover { color: var(--teal); }
.author-bio-role { font-family: var(--body); font-size: 12px; color: var(--grey); margin: 2px 0 8px; }
.author-bio-text { font-family: var(--body); font-size: 14px; color: #4B5563; line-height: 1.55; }
.author-bio-link {
  flex-shrink: 0;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  align-self: flex-start;
  margin-top: 2px;
  white-space: nowrap;
}
.author-bio-link:hover { color: var(--teal); }

/* ── Related section ── */
.related-section { margin-top: 24px; }
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ── Sidebar ── */
.article-sidebar { padding-top: 4px; }
.most-read-card { margin-bottom: 32px; }

.en100-sidebar-banner {
  background: var(--navy);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 4px solid var(--yellow);
}
.en100-sidebar-banner .en100-wordmark { font-size: 22px; }
.en100-sidebar-copy { font-family: var(--body); font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.4; }
.en100-sidebar-btn {
  display: inline-block;
  margin-top: 6px;
  background: transparent;
  color: var(--yellow);
  border: 1.5px solid rgba(245,200,0,0.5);
  padding: 8px 16px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  width: fit-content;
  transition: all 0.15s;
}
.en100-sidebar-btn:hover { background: var(--yellow); color: var(--navy); border-color: var(--yellow); }

@media (max-width: 900px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .author-bio-card { flex-wrap: wrap; }
  .author-bio-link { margin-left: 74px; }
}
@media (max-width: 640px) {
  .related-grid { grid-template-columns: 1fr; }
  .article-byline-row { flex-wrap: wrap; }
  .article-share { width: 100%; flex-wrap: wrap; }
}

/* ── News listing (category.php) CSS ── */
/* ── News page header ── */
.news-listing-header { padding: 32px 0 28px; }
.news-page-heading {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 44px);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--navy);
  line-height: 1;
}

/* ── Sub-category tabs ── */
.news-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  padding: 24px 0 0;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.news-subnav-link {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 14px;
  border-bottom: 2px solid transparent;
}
.news-subnav-link:hover { color: var(--navy); }
.news-subnav-link.active { color: var(--navy); border-bottom-color: var(--yellow); }

/* ── Layout ── */
.news-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  padding-bottom: 56px;
}
.news-main { min-width: 0; }

/* ── Lead story ── */
.news-lead { padding-bottom: 36px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.news-lead-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.news-lead-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.news-lead-meta .cat-tag { margin-right: 0; }
.news-lead-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.18;
  color: var(--navy);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.news-lead-headline:hover { color: var(--teal); }
.news-lead-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 12px;
  max-width: 640px;
}

/* ── Wire list ── */
.news-wire { display: flex; flex-direction: column; }
.news-wire-item {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.news-wire-img {
  width: 160px;
  flex-shrink: 0;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.news-wire-body { flex: 1; min-width: 0; }
.news-wire-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.news-wire-meta .cat-tag { margin-right: 0; }
.news-wire-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.news-wire-headline:hover { color: var(--teal); }
.news-wire-standfirst {
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
}

/* ── Pagination ── */
.news-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding-top: 40px;
  flex-wrap: wrap;
}
.page-link {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
}
.page-link:hover { background: var(--lgrey); }
.page-link.active { background: var(--navy); color: white; }
.page-link.disabled { color: var(--rule); pointer-events: none; }
.page-ellipsis { color: var(--grey); padding: 0 4px; }

/* ── Sidebar ── */
.news-sidebar { padding-top: 4px; }
.most-read-card { margin-bottom: 32px; }

@media (max-width: 900px) {
  .news-layout { grid-template-columns: 1fr; gap: 40px; }
  .news-wire-img { width: 120px; }
}
@media (max-width: 640px) {
  .news-wire-item { gap: 14px; }
  .news-wire-img { width: 96px; }
  .news-wire-headline { font-size: 16px; }
  .news-subnav { gap: 18px; }
}

/* ── Comment listing page (page-comment.php) CSS ── */
.listing-header { padding: 32px 0 8px; max-width: 700px; }
.listing-crumb {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 18px;
  display: flex; align-items: center; gap: 10px;
}
.listing-crumb a { color: var(--grey); }
.listing-crumb a:hover { color: var(--navy); }
.listing-crumb span:last-child { color: var(--navy); font-weight: 600; }
.listing-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.listing-intro {
  font-family: var(--body);
  font-size: 16px;
  color: var(--grey);
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 8px;
}

.listing-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  padding: 36px 0 56px;
}
.listing-main { min-width: 0; }

/* Featured comment */
.listing-featured {
  display: flex;
  gap: 24px;
  padding-bottom: 36px;
}
.listing-featured .commenter-avatar { width: 92px; height: 92px; font-size: 30px; }
.listing-featured-body { flex: 1; min-width: 0; }
.listing-featured-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  color: var(--navy);
  margin: 8px 0 10px;
  letter-spacing: -0.01em;
}
.listing-featured-title:hover { color: var(--teal); }
.listing-divider { height: 1px; background: var(--rule); margin-bottom: 8px; }
.comment-byline { font-size: 12px; color: var(--grey); margin-top: 12px; }
.comment-byline strong { color: var(--navy); }

/* Comment list */
.comment-list { display: flex; flex-direction: column; }
.comment-list-item {
  display: flex;
  gap: 20px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
}
.comment-list-item .commenter-avatar { width: 60px; height: 60px; font-size: 18px; }
.comment-list-body { flex: 1; min-width: 0; }
.comment-list-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.28;
  color: var(--navy);
  margin: 6px 0 8px;
  letter-spacing: -0.005em;
}
.comment-list-title:hover { color: var(--teal); }
.comment-list-teaser {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(27,42,74,0.7);
  line-height: 1.5;
  margin-bottom: 16px;
}

.load-more-btn {
  display: block;
  margin: 40px auto 0;
  padding: 13px 32px;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.load-more-btn:hover { background: var(--navy); color: white; }

/* Sidebar */
.listing-sidebar { padding-top: 4px; }
.contributors-card { margin-bottom: 40px; }
.contributor-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.contributor-row:last-child { border-bottom: none; }
.contributor-row .commenter-avatar { width: 42px; height: 42px; font-size: 14px; }
.contributor-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.contributor-name { font-family: var(--serif); font-weight: 700; font-size: 14px; color: var(--navy); }
.contributor-row:hover .contributor-name { color: var(--teal); }
.contributor-role { font-family: var(--body); font-size: 11px; color: var(--grey); line-height: 1.3; }

.sidebar-cta {
  background: var(--lgrey);
  border-radius: var(--radius);
  padding: 24px;
}
.sidebar-cta-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 8px;
}
.sidebar-cta-text {
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
  margin-bottom: 16px;
}
.sidebar-cta-btn {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}
.sidebar-cta-btn:hover { background: #14213a; }

@media (max-width: 900px) {
  .listing-layout { grid-template-columns: 1fr; gap: 40px; }
  .listing-featured { flex-direction: column; }
  .listing-featured .commenter-avatar { width: 64px; height: 64px; font-size: 22px; }
  .comment-list-item { gap: 14px; }
}
@media (max-width: 640px) {
  .comment-list-item { flex-direction: column; }
  .comment-list-item .commenter-avatar { width: 48px; height: 48px; font-size: 16px; }
}

/* ── Reports listing page (page-reports.php) CSS ── */
.reports-page-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}

/* ── Filter chips ── */
.reports-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 28px 0 40px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.filter-chip {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  color: var(--navy);
  background: white;
  transition: all 0.15s;
}
.filter-chip:hover { border-color: var(--navy); }
.filter-chip.active { background: var(--navy); border-color: var(--navy); color: white; }
.filter-chip.c-teal:hover { border-color: #0E7C7B; color: #0E7C7B; }
.filter-chip.c-yellow:hover { border-color: #7A5C00; color: #7A5C00; }
.filter-chip.c-purple:hover { border-color: #6D4FC4; color: #6D4FC4; }
.filter-chip.c-pink:hover { border-color: #B0356E; color: #B0356E; }
.filter-chip.c-amber:hover { border-color: #A5610F; color: #A5610F; }
.filter-chip.c-navy:hover { border-color: var(--navy); color: var(--navy); }

/* ── Featured hero report ── */
.reports-hero {
  display: grid;
  grid-template-columns: minmax(0, 280px) 1fr;
  gap: 48px;
  padding-bottom: 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.reports-hero-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 28px rgba(0,0,0,0.16);
}
.reports-hero-body { display: flex; flex-direction: column; justify-content: center; }
/*
 * The tag chip is inside a flex-column container, which stretches children to
 * fill horizontally by default. align-self: flex-start snaps the tag back to
 * hugging just its text width like the chip design intends.
 */
.reports-hero-body .report-tag { align-self: flex-start; }
.reports-hero-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  line-height: 1.15;
  color: var(--navy);
  margin: 12px 0 14px;
  letter-spacing: -0.01em;
}
.reports-hero-title:hover { color: var(--teal); }
.reports-hero-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--grey);
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 520px;
}
.reports-hero-meta {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 22px;
}
.reports-hero-meta-dot { margin: 0 8px; }
.reports-hero-btn {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  width: fit-content;
  transition: background 0.15s;
}
.reports-hero-btn:hover { background: #14213a; }

/* ── Report card grid ── */
.report-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 28px;
}
.report-card-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}
.report-card-img img { transition: transform 0.4s ease; }
.report-card:hover .report-card-img img { transform: scale(1.04); }
.report-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy);
  margin: 8px 0 6px;
}
.report-card-title:hover { color: var(--teal); }
.report-card-meta { font-family: var(--body); font-size: 11px; color: var(--grey); }

.load-more-btn {
  display: block;
  margin: 48px auto 0;
  padding: 13px 32px;
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.load-more-btn:hover { background: var(--navy); color: white; }

/* ── Bottom subscribe CTA ── */
.reports-subscribe-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  background: var(--lgrey);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  margin: 56px 0 40px;
}
.reports-subscribe-text strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 6px;
}
.reports-subscribe-text span { font-family: var(--body); font-size: 13px; color: var(--grey); max-width: 420px; display: block; }
.reports-subscribe-form { display: flex; gap: 0; flex-shrink: 0; }
.reports-subscribe-form .nl-input { color: var(--navy); border-color: var(--rule); background: white; width: 220px; }
.reports-subscribe-form .nl-input::placeholder { color: rgba(27,42,74,0.35); }

@media (max-width: 1024px) {
  .report-card-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .reports-hero { grid-template-columns: 1fr; }
  .reports-hero-img { max-width: 240px; }
  .report-card-grid { grid-template-columns: repeat(2, 1fr); }
  .reports-subscribe-cta { flex-direction: column; align-items: flex-start; }
  .reports-subscribe-form { width: 100%; }
  .reports-subscribe-form .nl-input { flex: 1; width: auto; }
}
@media (max-width: 640px) {
  .report-card-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }
  .reports-filter-row { gap: 8px; }
}

/* ── Report single page (single-mmg_whitepaper.php) CSS ── */
.report-page-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 56px;
  padding: 36px 0 56px;
}
.report-page-side { position: sticky; top: 24px; align-self: start; }
.report-page-cover {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 32px rgba(0,0,0,0.18);
  margin-bottom: 24px;
}
.report-facts {
  border-top: 1px solid var(--rule);
  margin-bottom: 24px;
}
.report-fact {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 13px;
}
.report-fact span { color: var(--grey); }
.report-fact strong { color: var(--navy); }
.report-page-btn {
  display: block;
  text-align: center;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.report-page-btn:hover { background: #14213a; }
.report-page-free {
  text-align: center;
  font-family: var(--body);
  font-size: 11px;
  color: var(--grey);
  margin-top: 10px;
}

.report-page-main { min-width: 0; max-width: 680px; }
.report-page-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.16;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 14px 0 16px;
}
.report-page-desc {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 8px;
}

.report-page-section { padding-top: 36px; }
.report-page-h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  margin-bottom: 18px;
  letter-spacing: -0.005em;
}
.report-chapter-list { list-style: none; }
.report-chapter-list li {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 15px;
  color: #1F2937;
  line-height: 1.4;
}
.report-chapter-list li:last-child { border-bottom: none; }
.chapter-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  color: var(--rule);
  flex-shrink: 0;
  width: 20px;
}
.report-page-body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.7;
  color: #1F2937;
}
.report-page-body p { margin: 0 0 20px; }

.report-download-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: var(--lgrey);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 44px;
}
.report-download-text strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 21px;
  color: var(--navy);
  margin-bottom: 6px;
}
.report-download-text span { font-family: var(--body); font-size: 13px; color: var(--grey); max-width: 320px; display: block; line-height: 1.5; }
.report-download-form { display: flex; gap: 0; flex-shrink: 0; }
.report-download-form .nl-input { color: var(--navy); border-color: var(--rule); background: white; width: 220px; }
.report-download-form .nl-input::placeholder { color: rgba(27,42,74,0.35); }

/* ── Related reports (reused card look) ── */
.related-section { margin-top: 48px; }
.related-report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px) {
  .report-page-layout { grid-template-columns: 1fr; gap: 32px; }
  .report-page-side { position: static; max-width: 220px; }
  .related-report-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .related-report-grid { grid-template-columns: 1fr; }
  .report-download-card { flex-direction: column; align-items: flex-start; }
  .report-download-form { width: 100%; }
  .report-download-form .nl-input { flex: 1; width: auto; }
}

/* ── EN100 page (page-en100.php) CSS ── */
.en100-page-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}

/* ── Search row ── */
.en100-search-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 32px 0 20px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 8px;
}
.en100-search-input {
  flex: 1;
  min-width: 240px;
  max-width: 380px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
}
.en100-search-input:focus { border-color: var(--teal); }
/* ── What is the EN100 ── */
.en100-about {
  max-width: 760px;
  margin: 24px 0 8px;
}
.en100-about p {
  font-family: var(--body);
  font-size: 15px;
  color: var(--grey);
  line-height: 1.6;
}

/* ── Stats strip ── */
.en100-stats-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.en100-stat { display: flex; flex-direction: column; gap: 4px; }
.en100-stat-num {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px);
  color: var(--navy);
  letter-spacing: -0.01em;
}
.en100-stat-label {
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.4;
}

/* ── Event gallery ── */
.en100-gallery-section { margin: 40px 0; }
.en100-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.en100-gallery-item {
  aspect-ratio: 3/2;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ── Booklet download ── */
.en100-booklet-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: var(--lgrey);
  border-radius: var(--radius);
  padding: 28px 32px;
  margin: 40px 0;
}
.en100-booklet-text { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }
.en100-booklet-text strong { font-family: var(--serif); font-size: 18px; color: var(--navy); }
.en100-booklet-text span { font-family: var(--body); font-size: 13px; color: var(--grey); line-height: 1.4; }
.en100-booklet-form { display: flex; gap: 0; flex-shrink: 0; }

/* ── Sign-up gate over rows 6-100 ── */
.en100-gate-wrap { position: relative; }
.en100-gated-rows {
  max-height: 420px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%);
  mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 95%);
}
.en100-gate-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 24px;
}
.en100-gate-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  max-width: 420px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 28px 32px;
  box-shadow: 0 12px 32px rgba(17,24,39,0.1);
}
.en100-gate-box strong { font-family: var(--serif); font-size: 19px; color: var(--navy); }
.en100-gate-box span { font-family: var(--body); font-size: 13px; color: var(--grey); line-height: 1.5; margin-bottom: 6px; }
.en100-gate-btn {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 11px 22px;
  border-radius: var(--radius-sm);
}
.en100-gate-btn:hover { background: #14213a; }

@media (max-width: 900px) {
  .en100-stats-strip { grid-template-columns: 1fr; gap: 16px; }
  .en100-gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .en100-booklet-cta { flex-direction: column; align-items: flex-start; }
  .en100-booklet-form { width: 100%; }
  .en100-booklet-form .nl-input { flex: 1; width: auto; }
}
.en100-live-note {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  display: flex;
  align-items: center;
  gap: 6px;
}
.en100-live-note::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16A34A;
  flex-shrink: 0;
}

/* ── Ranked list ── */
.en100-list { padding-top: 8px; padding-bottom: 56px; }
.en100-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 12px;
  border-bottom: 1px solid var(--rule);
}
.en100-row-top { background: rgba(245,200,0,0.06); border-radius: var(--radius-sm); }
.en100-rank {
  width: 34px;
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--grey);
  text-align: center;
}
.en100-row-top .en100-rank { color: var(--navy); font-size: 18px; }
.en100-row-avatar { width: 44px; height: 44px; font-size: 14px; flex-shrink: 0; cursor: default; }
.en100-row-info { flex: 1; min-width: 0; }
.en100-row-name { font-family: var(--serif); font-weight: 700; font-size: 15px; color: var(--navy); }
.en100-row-title { font-family: var(--body); font-size: 12px; color: var(--grey); margin-top: 2px; }
.en100-row-score {
  flex-shrink: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal);
  min-width: 44px;
  text-align: right;
}

@media (max-width: 640px) {
  .en100-row-title { display: none; }
  .en100-search-row { flex-direction: column; align-items: flex-start; }
}

/* ── Videos page (page-videos.php) CSS ── */
.videos-page-dark {
  background: #0D1117;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 40px 0 64px;
  min-height: 60vh;
}
.videos-page-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 56px;
}
.listing-crumb-dark {
  font-family: var(--body);
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.listing-crumb-dark a { color: rgba(255,255,255,0.45); }
.listing-crumb-dark a:hover { color: white; }
.listing-crumb-dark span:last-child { color: white; font-weight: 600; }
.videos-page-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  color: white;
  letter-spacing: -0.01em;
  display: inline-block;
}
.videos-page-intro {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  max-width: 560px;
  margin-top: 16px;
  margin-bottom: 32px;
}

/* Filter chips */
.videos-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}
.videos-filter-chip {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  transition: none;
}
.videos-filter-chip:hover { border-color: var(--yellow); color: var(--yellow); }
.videos-filter-chip.active { background: var(--yellow); border-color: var(--yellow); color: var(--navy); }

.videos-section-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
  margin: 0 0 20px;
}

.videos-premium-teaser {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(245,200,0,0.1);
  border: 1px solid rgba(245,200,0,0.3);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 32px 0;
}
.videos-premium-teaser strong {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow);
  flex-shrink: 0;
}
.videos-premium-teaser span {
  font-family: var(--body);
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
}

/* ── Single video page (single-ennews_video.php) ── */
.single-video-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 24px 0 28px;
}
.single-video-player iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.single-video-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(255,255,255,0.5);
  font-family: var(--body);
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.single-video-meta { margin-bottom: 16px; }
.single-video-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 34px);
  color: white;
  line-height: 1.2;
  margin: 10px 0 8px;
}
.single-video-duration {
  font-family: var(--body);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
}
.single-video-desc {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(255,255,255,0.7);
  line-height: 1.6;
  max-width: 720px;
  margin-bottom: 40px;
}

/* Full archive grid */
.videos-full-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 44px;
}

.videos-loadmore-btn {
  display: block;
  margin: 0 auto;
  padding: 13px 32px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: none;
}
.videos-loadmore-btn:hover { background: white; color: var(--navy); border-color: white; }

@media (max-width: 1024px) {
  .videos-full-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .videos-page-inner { padding: 0 28px; }
  .explores-interview { grid-template-columns: 1fr; gap: 20px; }
  .videos-full-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .videos-page-inner { padding: 0 20px; }
}

/* ── Auth pages (page-sign-in.php, page-subscribe.php) CSS ── */
.auth-page {
  display: flex;
  justify-content: center;
  padding: 56px 0 80px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.auth-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 34px);
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.auth-subtext {
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 32px;
}
.auth-form { text-align: left; }
.auth-field { margin-bottom: 20px; }
.auth-field label {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.auth-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.auth-field-row label { margin-bottom: 0; }
.auth-forgot {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
}
.auth-forgot:hover { color: var(--navy); }
.auth-field input {
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
}
.auth-field input:focus { border-color: var(--teal); }
.auth-submit {
  width: 100%;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.15s;
}
.auth-submit:hover { background: #14213a; }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 24px;
  color: var(--grey);
  font-family: var(--body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.auth-switch {
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
}
.auth-switch a { color: var(--teal); font-weight: 600; }
.auth-switch a:hover { color: var(--navy); }

/* ── Account page (page-account.php) ──
 * Wider card than sign-in (540px vs 400px) to fit the two-column field pairs.
 * Everything else reuses .auth-page / .auth-heading / .auth-field / .auth-submit
 * from the shared auth system above.
 */
.account-card {
  width: 100%;
  max-width: 540px;
  text-align: center;
}
.account-saved {
  background: rgba(14,124,123,0.08);
  border: 1px solid rgba(14,124,123,0.2);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--teal);
  text-align: left;
}

/* Error counterpart to .account-saved, used by the auth pages (sign in,
   subscribe, password reset) so every one of them reports failures the same
   way instead of each carrying its own inline style attribute. */
.auth-error {
  background: rgba(185,28,28,0.06);
  border: 1px solid rgba(185,28,28,0.2);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 24px;
  font-family: var(--body);
  font-size: 13px;
  color: #B91C1C;
  text-align: left;
}

/* Explanatory note under a form field - used for the read-only email address
   on the account page, where the field being locked needs a reason next to it
   rather than a support ticket later. */
.auth-field-note {
  display: block;
  margin-top: 6px;
  font-family: var(--body);
  font-size: 12px;
  line-height: 1.5;
  color: #6B7280;
}
.auth-field input[readonly],
.auth-field input:disabled {
  background: #F3F4F6;
  color: #6B7280;
  cursor: not-allowed;
}

/* Honeypot wrapper. Off-screen rather than display:none or hidden - bots
   routinely skip fields hidden those two ways, which is the whole point of
   the field. Screen readers are kept out with aria-hidden on the element
   itself, and the input carries tabindex="-1" so keyboard users never land
   on it. */
.ennews-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.account-signout {
  margin-top: 28px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
}
.account-signout a { color: var(--teal); font-weight: 600; }
.account-signout a:hover { color: var(--navy); }

/* ── Promoted Content listing page (page-promoted-content.php) CSS ── */
.sponsored-page-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 3.8vw, 42px);
  color: var(--navy);
  letter-spacing: -0.005em;
  display: block;
  margin-top: 8px;
}
.sponsored-listing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 8px 0 48px;
}
@media (max-width: 900px) {
  .sponsored-listing-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .sponsored-listing-grid { grid-template-columns: 1fr; }
}

/* ── Subscribe page (page-subscribe.php) CSS ── */
.subscribe-page {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 72px;
  padding: 48px 0 80px;
}
.subscribe-heading {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 40px);
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.subscribe-subtext {
  font-family: var(--body);
  font-size: 16px;
  color: var(--grey);
  line-height: 1.55;
  margin-bottom: 36px;
  max-width: 420px;
}

.benefits-list { list-style: none; max-width: 440px; }
.benefits-list li {
  position: relative;
  padding: 16px 0 16px 26px;
  border-bottom: 1px solid var(--rule);
}
.benefits-list li:first-child { padding-top: 0; }
.benefits-list li:last-child { border-bottom: none; }
.benefits-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 22px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.benefits-list li:first-child::before { top: 6px; }
.benefits-list strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 3px;
}
.benefits-list span {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.4;
}

/* ── Form side (shares .auth-form styling with Sign In) ── */
.subscribe-form-side {
  background: var(--lgrey);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.auth-form { text-align: left; }
.auth-field { margin-bottom: 20px; }
.auth-field-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.auth-field label {
  display: block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.auth-field input {
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
  background: white;
}
.auth-field input:focus { border-color: var(--teal); }
.auth-field select {
  width: 100%;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
  background: white;
}
.auth-field select:focus { border-color: var(--teal); }

.auth-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}
.auth-checkbox input {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.auth-checkbox label {
  font-family: var(--body);
  font-size: 13px;
  color: #1F2937;
  line-height: 1.4;
}

.auth-captcha {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 10px 0 20px;
}
.auth-captcha input {
  width: 18px;
  height: 18px;
  accent-color: var(--navy);
  flex-shrink: 0;
}
.auth-captcha label {
  flex: 1;
  font-family: var(--body);
  font-size: 13px;
  color: #1F2937;
}
.auth-captcha-badge {
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  color: var(--grey);
  letter-spacing: 0.06em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 3px 6px;
  flex-shrink: 0;
}

@media (max-width: 900px) {
  .subscribe-page { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .auth-field-pair { grid-template-columns: 1fr; gap: 0; }
  .subscribe-form-side { padding: 24px; }
}

/* ── Contact page (page-contact.php) CSS ── */
.contact-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 56px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.listing-intro {
  font-family: var(--body);
  font-size: 16px;
  color: var(--grey);
  line-height: 1.6;
  margin-top: 20px;
  margin-bottom: 8px;
}

/* ── Info strip ── */
.contact-info-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding: 36px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 32px 0 56px;
}
.contact-info-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 10px;
}
.contact-info-value {
  font-family: var(--body);
  font-size: 15px;
  color: var(--navy);
  line-height: 1.5;
}
a.contact-info-value:hover { color: var(--teal); }

/* ── Team directory ── */
.contact-team-section { padding-bottom: 24px; }
.contact-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-top: 8px;
}
.contact-card { text-align: center; }
.contact-card .commenter-avatar {
  width: 76px; height: 76px; font-size: 22px;
  margin: 0 auto 14px;
  cursor: default;
}
.contact-card-name { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 3px; }
.contact-card-role { font-family: var(--body); font-size: 12px; color: var(--grey); line-height: 1.4; margin-bottom: 8px; }
.contact-card-email {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--teal);
  word-break: break-all;
}
.contact-card-email:hover { color: var(--navy); }
@media (max-width: 900px) {
  .contact-info-strip { grid-template-columns: 1fr; gap: 24px; }
  .contact-team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .contact-team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── About Us page (page-about-us.php) CSS ── */
.about-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.about-intro {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--grey);
  line-height: 1.6;
  max-width: 720px;
  margin: 24px 0 48px;
}

.about-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 40px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 56px;
}
.about-pillar-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 14px;
}
.about-pillar-text {
  font-family: var(--body);
  font-size: 15px;
  color: #1F2937;
  line-height: 1.65;
}

.about-team-section { padding-bottom: 24px; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
  margin-top: 8px;
}
.team-card { text-align: center; }
.team-card .commenter-avatar {
  width: 76px; height: 76px; font-size: 22px;
  margin: 0 auto 14px;
  cursor: default;
}
.team-name { font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--navy); margin-bottom: 3px; }
@media (max-width: 900px) {
  .about-pillars { grid-template-columns: 1fr; gap: 32px; padding: 32px 0; }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Advertise & Sponsor page (page-advertise-sponsor.php) CSS ── */
.advertise-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 5.2vw, 56px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}

/* ── Stats strip ── */
.stats-strip-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-top: 8px;
}
.stats-strip-label + .stats-strip { margin-top: 16px; }
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 36px 40px;
  margin: 36px 0 56px;
}
.stat-item { text-align: center; }
.stat-item strong {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3vw, 36px);
  color: var(--yellow);
  line-height: 1;
  margin-bottom: 8px;
}
.stat-item span {
  font-family: var(--body);
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

/* ── Two tracks ── */
.advertise-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 56px;
}
.advertise-track {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 36px;
}
.advertise-track-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 14px;
}
.advertise-track-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  color: var(--navy);
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin-bottom: 14px;
}
.advertise-track-desc {
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin-bottom: 22px;
}
.advertise-features {
  list-style: none;
  margin-bottom: 28px;
}
.advertise-features li {
  position: relative;
  padding: 10px 0 10px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 14px;
  color: #1F2937;
}
.advertise-features li:first-child { padding-top: 0; }
.advertise-features li:first-child::before { top: 8px; }
.advertise-features li:last-child { border-bottom: none; padding-bottom: 0; }
.advertise-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 18px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--yellow);
}
.advertise-track-btn {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.advertise-track-btn:hover { background: #14213a; }

/* ── Quote ── */
.advertise-quote {
  border-left: 3px solid var(--yellow);
  padding: 4px 0 4px 28px;
  margin: 0 0 56px;
  max-width: 780px;
}
.advertise-quote-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.45;
  color: var(--navy);
  margin-bottom: 12px;
}
.advertise-quote-attr {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--grey);
}

/* ── Enquiry form ── */
.enquiry-section {
  background: var(--lgrey);
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-bottom: 40px;
}
.enquiry-header { max-width: 640px; margin-bottom: 32px; }
.enquiry-intro {
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin-top: 12px;
}
.enquiry-form { max-width: 640px; }

/* Wrapper around every HubSpot form embed (see inc/hubspot-forms.php).
   Deliberately minimal - HubSpot ships its own field styling, and overriding
   it here would fight whatever the team configures in the HubSpot dashboard.
   Width only, so an embed sits in the same column its section expects. */
.hubspot-form-embed { width: 100%; }
.enquiry-section .hubspot-form-embed { max-width: 640px; }
.enquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.enquiry-field { display: flex; flex-direction: column; gap: 8px; }
.enquiry-field-full { margin-bottom: 24px; }
.enquiry-field label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.enquiry-field input,
.enquiry-field select,
.enquiry-field textarea {
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  background: white;
  outline: none;
  resize: none;
}
.enquiry-field input:focus,
.enquiry-field select:focus,
.enquiry-field textarea:focus { border-color: var(--teal); }
.enquiry-submit {
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 32px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s;
}
.enquiry-submit:hover { background: #14213a; }
@media (max-width: 900px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .advertise-tracks { grid-template-columns: 1fr; }
  .enquiry-section { padding: 32px 24px; }
}
@media (max-width: 640px) {
  .enquiry-row { grid-template-columns: 1fr; gap: 16px; }
}

/* ── Author page (single-guest_author.php) CSS ── */
.author-page-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  padding: 32px 0 56px;
}
.author-page-main { min-width: 0; }

/* ── Author header ── */
.author-header {
  display: flex;
  gap: 28px;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.author-header-avatar { width: 96px; height: 96px; font-size: 30px; flex-shrink: 0; cursor: default; }
.author-header-body { flex: 1; min-width: 0; }
.author-header-name {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.author-header-role {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 16px;
}
.author-header-bio {
  font-family: var(--body);
  font-size: 15px;
  color: #1F2937;
  line-height: 1.65;
  max-width: 560px;
  margin-bottom: 16px;
}
.author-header-meta {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
  margin-bottom: 20px;
}
.author-header-meta-dot { margin: 0 8px; }
.author-header-links { display: flex; align-items: center; gap: 12px; }
.author-social-btn {
  width: 34px; height: 34px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  transition: all 0.15s;
}
.author-social-btn svg { width: 15px; height: 15px; }
.author-social-btn:hover { border-color: var(--navy); background: var(--navy); color: white; }
.author-contact-btn {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  border: 1.5px solid var(--rule);
  padding: 9px 18px;
  border-radius: var(--radius-sm);
}
.author-contact-btn:hover { border-color: var(--navy); }

/* ── Article list ── */
.author-articles { margin-bottom: 8px; }
.author-article-item {
  padding: 24px 0;
  border-bottom: 1px solid var(--rule);
}
.author-article-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.author-article-meta .cat-tag { margin-right: 0; }
.author-article-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}
.author-article-title:hover { color: var(--teal); }
.author-article-teaser {
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
  line-height: 1.55;
}

@media (max-width: 900px) {
  .author-page-layout { grid-template-columns: 1fr; gap: 40px; }
  .author-header { flex-direction: column; }
}
@media (max-width: 640px) {
  .author-header-links { flex-wrap: wrap; }
}

/* ── Digital Edition page (page-digital-edition.php) CSS ── */
.edition-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(40px, 5.6vw, 62px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}

/* ── Current issue ── */
.current-issue {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 48px;
  padding: 40px 0 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.current-issue-cover {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 32px rgba(0,0,0,0.2);
}
.current-issue-body { display: flex; flex-direction: column; justify-content: center; }
.current-issue-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--teal);
  margin-bottom: 10px;
}
.current-issue-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--navy);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
  line-height: 1.15;
}
.current-issue-desc {
  font-family: var(--body);
  font-size: 15px;
  color: var(--grey);
  line-height: 1.65;
  margin-bottom: 26px;
  max-width: 520px;
}
.issue-features {
  list-style: none;
  margin-bottom: 28px;
  max-width: 520px;
}
.issue-features li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-bottom: 1px solid var(--rule);
}
.issue-features li:first-child { padding-top: 0; }
.issue-features li:last-child { border-bottom: none; }
.issue-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 19px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--yellow);
}
.issue-features strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  margin-bottom: 3px;
}
.issue-features span {
  display: block;
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  line-height: 1.5;
}
.current-issue-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.current-issue-btn {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.current-issue-btn:hover { background: #14213a; }
.current-issue-btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--rule);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.current-issue-btn-secondary:hover { border-color: var(--navy); }

/* ── Archive grid ── */
.edition-archive { margin-bottom: 8px; }
.edition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px 24px;
}
.edition-card-cover {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  transition: transform 0.2s ease;
}
.edition-card:hover .edition-card-cover { transform: translateY(-4px); }
.edition-card-title {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
}
.edition-card:hover .edition-card-title { color: var(--teal); }

/* Basic list styling for the dynamic "What's inside" content, matching the
   report-chapter-list look without needing a separate hardcoded field. */
.issue-features-wrap ul { list-style: none; margin: 20px 0; }
.issue-features-wrap li {
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--body);
  font-size: 14px;
  color: var(--grey);
}
.issue-features-wrap li strong { display: block; color: var(--navy); font-family: var(--serif); font-size: 16px; margin-bottom: 2px; }
.issue-features-wrap li:last-child { border-bottom: none; }
@media (max-width: 1024px) {
  .edition-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .current-issue { grid-template-columns: 1fr; }
  .current-issue-cover { max-width: 260px; }
  .edition-grid { grid-template-columns: repeat(2, 1fr); }
  .reports-subscribe-cta { flex-direction: column; align-items: flex-start; }
  .reports-subscribe-form { width: 100%; }
  .reports-subscribe-form .nl-input { flex: 1; width: auto; }
}

/* ── Jobs Board page (page-jobs.php) CSS - genuinely missing until now ── */
.jobs-header-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 32px 0 8px;
}
.jobs-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 5vw, 56px);
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1;
  display: inline-block;
}
.post-job-btn {
  flex-shrink: 0;
  background: var(--navy);
  color: white;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 13px 26px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  margin-bottom: 8px;
}
.post-job-btn:hover { background: #14213a; }

/* ── Filter bar ── */
.jobs-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 32px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 32px;
}
.jobs-search-input {
  flex: 1;
  min-width: 220px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--navy);
  padding: 11px 16px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
}
.jobs-search-input:focus { border-color: var(--teal); }
.jobs-filter-select {
  font-family: var(--body);
  font-size: 13px;
  color: var(--navy);
  padding: 11px 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  outline: none;
  background: white;
  min-width: 160px;
}
.jobs-filter-select:focus { border-color: var(--teal); }

/* ── Job listings ── */
.jobs-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 48px; }
.job-card {
  display: flex;
  align-items: center;
  gap: 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  transition: border-color 0.15s;
}
.job-card:hover { border-color: var(--navy); }
.job-card-logo {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: white;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
}
.job-card-body { flex: 1; min-width: 0; }
.job-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.job-card-company {
  font-family: var(--body);
  font-size: 13px;
  color: var(--grey);
  margin-bottom: 12px;
}
.job-card-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.job-tag {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: var(--lgrey);
  padding: 5px 12px;
  border-radius: 999px;
}
.job-card-side { flex-shrink: 0; text-align: right; }
.job-card-salary {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 4px;
  white-space: nowrap;
}
.job-card-posted {
  font-family: var(--body);
  font-size: 11px;
  color: var(--grey);
  margin-bottom: 14px;
}
.job-apply-btn {
  display: inline-block;
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--navy);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: all 0.15s;
}
.job-apply-btn:hover { background: var(--navy); color: white; }
@media (max-width: 900px) {
  .job-card { flex-direction: column; align-items: flex-start; }
  .job-card-side { text-align: left; width: 100%; }
  .job-apply-btn { width: 100%; text-align: center; }
}
@media (max-width: 640px) {
  .jobs-filter-select { flex: 1; min-width: 140px; }
}

/* ── Trade Show Finder page (page-global-exhibition-directory.php) CSS ── */
.trade-show-finder-embed {
  margin: 20px 0 56px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.trade-show-finder-embed iframe { display: block; }

/* ── 404 page (404.php) ── */
.page-404 {
  max-width: 560px;
  margin: 0 auto;
  padding: 80px 24px 100px;
  text-align: center;
}
.page-404-code {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 72px;
  color: rgba(27,42,74,0.12);
  line-height: 1;
  margin-bottom: 8px;
}
.page-404-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 32px;
  color: var(--navy);
  margin-bottom: 12px;
}
.page-404-text {
  font-family: var(--body);
  font-size: 15px;
  color: var(--grey);
  line-height: 1.6;
  margin-bottom: 32px;
}
.page-404-search {
  display: flex;
  gap: 0;
  margin-bottom: 32px;
}
.page-404-search input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid var(--rule);
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-family: var(--body);
  font-size: 14px;
  outline: none;
}
.page-404-search input:focus { border-color: var(--teal); }
.page-404-search button {
  background: var(--navy);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.page-404-search button:hover { background: #14213a; }
.page-404-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}
.page-404-links a {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--teal);
}
.page-404-links a:hover { color: var(--navy); }


/* ═════════════════════════════════════════════════════════════════════════════
 * ─── HOMEPAGE 2026 REDESIGN ──
 *
 * Everything below is scoped to the homepage (front-page.php) via the `.hp-*`
 * class prefix. Nothing here should apply to any other template. Uses the
 * theme's existing CSS variables (--navy, --yellow, --teal, --serif etc.) and
 * the theme's established breakpoints (1024 / 900 / 640) so responsive
 * behaviour stays consistent with every other page. Where the design mockup
 * used 1040/840/600, those are mapped to the theme's 1024/900/640 breakpoints.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Homepage frame ──
 * The homepage is the ONE page where the design goes full-width edge-to-edge
 * with its own internal padding, instead of using the standard .main 1200px
 * centred wrapper. .hp-shell escapes .main's max-width and re-establishes its
 * own container: white bg, subtle shadow, 84px internal padding on desktop,
 * matching the mockup.
 */
.hp-shell {
  background: #fff;
  color: var(--ink);
  margin: 0 auto 40px;
}
/* The default text/link colours for the shell.
 * :where() zeroes the specificity contribution of the `a` selector so that any
 * element-level rule (.hp-events-more, .hp-quote-cta, etc.) that sets its own
 * colour wins on source order rather than being clobbered by this generic reset. */
.hp-shell :where(a) { color: inherit; }
.hp-shell :where(a):hover { color: var(--teal); }
.hp-shell img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Uniform horizontal padding for every top-level homepage section */
.hp-pad {
  padding-left: 84px;
  padding-right: 84px;
}
@media (max-width: 900px) {
  .hp-pad { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 640px) {
  .hp-pad { padding-left: 22px; padding-right: 22px; }
}

/* ── Topstrip (date + EN100 line under nav) ── */
.hp-topstrip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #EDEBE6;
}
.hp-topstrip-date {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
.hp-topstrip-en100 {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.hp-topstrip-en100-word {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  /* Oswald baseline sits slightly below Figtree at the same font-size, so
     nudge up 1px to visually align with the copy/CTA text to its right. */
  position: relative;
  top: -1px;
}
.hp-topstrip-en100-copy {
  font-family: var(--body);
  font-size: 12px;
  color: var(--grey);
}
.hp-topstrip-en100-cta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal);
}
@media (max-width: 640px) {
  .hp-topstrip-en100-copy { display: none; }
}

/* ── Hero (2-col: main story + Most Read sidebar) ── */
.hp-hero {
  display: grid;
  /*
   * Sidebar scales with viewport instead of being locked at 340px, so on wide
   * screens (~1440+) the featured image doesn't dominate the fold. At
   * narrower desktop widths (<1200) the sidebar collapses back to 340px,
   * preserving the original layout there. Below the 1024 breakpoint the whole
   * hero stacks into a single column (see the responsive block further down).
   */
  grid-template-columns: minmax(0, 1fr) clamp(340px, 34%, 480px);
  gap: 56px;
  padding-top: 52px;
  padding-bottom: 56px;
}
.hp-hero-main-img {
  aspect-ratio: 3/2;
  background: #1B2A4A;
  margin-bottom: 22px;
  overflow: hidden;
}
.hp-hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hp-hero-exclusive {
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 10px;
}
.hp-hero-meta {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
}
.hp-hero-headline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.028em;
  color: var(--navy);
  margin-bottom: 18px;
}
.hp-hero-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  color: var(--grey);
  max-width: 58ch;
  margin-bottom: 18px;
}
.hp-hero-byline {
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
}

.hp-hero-side {
  padding-left: 56px;
  border-left: 1px solid #EDEBE6;
}
.hp-hero-side-card {
  display: block;
  padding-bottom: 32px;
  border-bottom: 1px solid #EDEBE6;
  margin-bottom: 32px;
}
.hp-hero-side-img {
  aspect-ratio: 3/2;
  background: var(--teal);
  margin-bottom: 16px;
  overflow: hidden;
}
.hp-cat-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.hp-hero-side-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy);
}

.hp-mostread-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 8px;
}
.hp-mostread-item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid #EDEBE6;
}
.hp-mostread-item:last-child { border-bottom: none; }
.hp-mostread-num {
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  color: var(--grey);
  flex-shrink: 0;
}
.hp-mostread-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.32;
  color: var(--navy);
}

/* ── Story row: 3-col (lead + media rows | 2 stacked cards | quote box) ── */
.hp-storyrow {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) 300px;
  gap: 48px;
  padding-top: 52px;
  padding-bottom: 56px;
  border-top: 1px solid #EDEBE6;
}
/* If no quote is published, the third column is dropped and the grid becomes 2-col. */
.hp-storyrow--noquote { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

.hp-lead-card { display: block; padding-bottom: 26px; border-bottom: 1px solid #EDEBE6; margin-bottom: 22px; }
.hp-lead-img {
  aspect-ratio: 3/2;
  background: var(--navy2);
  margin-bottom: 20px;
  overflow: hidden;
}
.hp-lead-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.9vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 14px;
}
.hp-lead-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey);
  max-width: 56ch;
}

.hp-media-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid #EDEBE6;
  margin-bottom: 20px;
}
.hp-media-row:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.hp-media-row-img {
  aspect-ratio: 3/2;
  background: #253659;
  overflow: hidden;
}
.hp-media-row-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--navy);
}

.hp-storyrow-mid { padding-left: 48px; border-left: 1px solid #EDEBE6; }
.hp-story-card { display: block; padding-bottom: 26px; border-bottom: 1px solid #EDEBE6; margin-bottom: 26px; }
.hp-story-card:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.hp-story-card-img {
  aspect-ratio: 3/2;
  background: #374151;
  margin-bottom: 16px;
  overflow: hidden;
}
.hp-story-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* ── In Their Words quote box ── */
.hp-quote {
  background: #F7F6F3;
  border-top: 4px solid var(--yellow);
  padding: 32px 28px 34px;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Fills the row height so the bottom group can anchor to the bottom edge */
  height: 100%;
}
/* Two logical groups inside the quote: the "top" group (label + mark + quote text)
   and the "bottom" group (attribution + description + CTA). space-between pushes
   them apart so the bottom group anchors to the bottom of the box. */
.hp-quote-top { display: flex; flex-direction: column; }
.hp-quote-bottom { display: flex; flex-direction: column; margin-top: auto; padding-top: 32px; }
.hp-quote-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 22px;
}
.hp-quote-mark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 46px;
  line-height: 0.7;
  color: var(--yellow);
  /* Space between the yellow quote mark and the quote text itself. */
  margin-bottom: 22px;
}
.hp-quote-body {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 25px;
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0;
}
.hp-quote-attrib {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid #E2E0DA;
}
.hp-quote-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--navy2);
  color: rgba(255,255,255,0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
  text-decoration: none;
}
a.hp-quote-avatar:hover { opacity: 0.85; }
.hp-quote-avatar img { border-radius: 50%; }
.hp-quote-name {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
a.hp-quote-name:hover { color: var(--teal); }
.hp-quote-role {
  font-family: var(--body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--grey);
  margin-top: 5px;
}
.hp-quote-context {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey);
  margin-top: 22px;
}
.hp-quote-cta {
  align-self: flex-start;
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1.5px solid rgba(14,124,123,0.35);
  padding-bottom: 4px;
  margin-top: 22px;
}

/* ── Comment band (yellow-tinted, full-width) ── */
.hp-comment {
  background: #F9EAB8;
  padding-top: 60px;
  padding-bottom: 64px;
}
.hp-comment-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 44px;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-section-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--navy);
}
.hp-section-more {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1.5px solid rgba(27,43,67,0.4);
  padding-bottom: 4px;
}
.hp-comment-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 56px;
}
.hp-comment-lead-byline {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.hp-comment-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--navy2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  overflow: hidden;
}
.hp-comment-avatar img { border-radius: 50%; }
.hp-comment-author {
  display: inline-block;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  text-decoration: none;
}
a.hp-comment-author:hover { color: var(--teal); }
.hp-comment-role {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(27,43,67,0.6);
  margin-top: 6px;
}
.hp-comment-lead-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(26px, 3.1vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 18px;
}
.hp-comment-lead-teaser {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(27,43,67,0.78);
  max-width: 56ch;
  margin-bottom: 20px;
}
.hp-comment-lead-cta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1.5px solid rgba(27,43,67,0.4);
  padding-bottom: 3px;
}
.hp-comment-list { padding-left: 56px; border-left: 1px solid rgba(27,43,67,0.16); }
.hp-comment-list-item {
  display: block;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(27,43,67,0.16);
  margin-bottom: 20px;
}
.hp-comment-list-item:last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
.hp-comment-list-title {
  display: block;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--navy);
  margin-bottom: 8px;
  text-decoration: none;
}
a.hp-comment-list-title:hover { color: var(--teal); }
.hp-comment-list-author {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(27,43,67,0.55);
  text-decoration: none;
}
a.hp-comment-list-author:hover { color: var(--navy); }

/* ── Across the industry ── */
.hp-industry {
  padding-top: 56px;
}
.hp-industry-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--navy);
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-industry-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
}
.hp-industry-more {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.hp-industry-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  padding-bottom: 56px;
}
.hp-industry-main .hp-media-row {
  padding-bottom: 26px;
  margin-bottom: 26px;
  align-items: start;
}
.hp-industry-main .hp-media-row-img { aspect-ratio: 3/2; }
.hp-industry-main .hp-media-row {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 24px;
}
.hp-industry-side { padding-left: 56px; border-left: 1px solid #EDEBE6; }
.hp-industry-morelabel {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 6px;
}
.hp-industry-heading-item {
  display: block;
  padding: 16px 0;
  border-bottom: 1px solid #EDEBE6;
}
.hp-industry-heading-item:last-of-type { margin-bottom: 32px; }
.hp-industry-heading-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.32;
  color: var(--navy);
}
.hp-industry-promoted {
  background: #F7F6F3;
  padding: 24px;
}
.hp-industry-promoted-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 14px;
}
.hp-industry-promoted-img {
  aspect-ratio: 3/2;
  background: #253659;
  margin-bottom: 14px;
  overflow: hidden;
}
.hp-industry-promoted-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.28;
  color: var(--navy);
}

/* ── Newsletter band (teal, full viewport width) ──
 * The outer `.hp-newsletter` bleeds edge-to-edge across the viewport via
 * negative margins that cancel out the .hp-shell/.main containers.
 * `.hp-newsletter-inner` caps the actual content back at the standard 1200px
 * so the title and form stay at the same layout width they were at before
 * the bleed - it's only the teal background that spans the viewport.
 * See `body { overflow-x: clip }` above for the safety net that prevents
 * a horizontal scrollbar appearing on browsers where 100vw includes the
 * vertical scrollbar width (Windows Chrome/Firefox).
 */
.hp-newsletter {
  background: var(--teal);
  box-shadow: 0 14px 32px rgba(17,24,39,0.14);
  padding-top: 52px;
  padding-bottom: 52px;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.hp-newsletter-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 84px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
@media (max-width: 900px) {
  .hp-newsletter-inner { padding: 0 40px; }
}
@media (max-width: 640px) {
  .hp-newsletter-inner { padding: 0 22px; }
}
.hp-newsletter-title {
  flex: 1;
  min-width: 260px;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(31px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
}
.hp-newsletter-form {
  display: flex;
  flex-shrink: 0;
}
.hp-newsletter-form input[type="email"] {
  width: 250px;
  padding: 13px 18px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: #fff;
  outline: none;
}
.hp-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.hp-newsletter-form button {
  background: var(--yellow);
  color: var(--navy);
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 13px 24px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.hp-newsletter-form button:hover { background: #E6BA00; }

/* ── Print issue (big cover) ── */
.hp-issue {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 64px;
  padding-top: 64px;
  padding-bottom: 64px;
}
.hp-issue-cover-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 8px;
}
.hp-issue-cover-underline {
  width: 52px;
  height: 3px;
  background: var(--yellow);
  display: inline-block;
  margin-bottom: 14px;
}
.hp-issue-cover-img {
  aspect-ratio: 3/4;
  background: transparent;
  box-shadow: 0 22px 50px rgba(17,24,39,0.28);
  margin-bottom: 20px;
  overflow: hidden;
}
/* Override the .hp-shell img { object-fit: cover } default so covers aren't
   cropped when the screenshot's aspect ratio doesn't exactly match 3:4. */
.hp-issue-cover-img img { object-fit: contain; }
.hp-issue-cover-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.4vw, 30px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 10px;
}
.hp-issue-cover-date {
  font-family: var(--body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}

.hp-issue-body { display: flex; flex-direction: column; justify-content: center; }
.hp-issue-eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.hp-issue-headline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 16px;
}
.hp-issue-desc {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--grey);
  margin-bottom: 24px;
}
.hp-shell .hp-issue-cta {
  align-self: flex-start;
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 14px 26px;
  font-family: var(--body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
}
.hp-shell .hp-issue-cta:hover { color: #fff; background: #0E1A2E; }

/* ── EN Explores (dark) ── */
.hp-explores {
  background: #0D1117;
  padding-top: 56px;
  padding-bottom: 60px;
}
.hp-explores-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-explores-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #fff;
}
.hp-explores-viewall {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.hp-explores-featured {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}
.hp-explores-featured-video {
  position: relative;
  aspect-ratio: 16/9;
  background: #7C3AED;
  overflow: hidden;
}
.hp-explores-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-explores-play svg { width: 26px; height: 26px; margin-left: 3px; }
.hp-explores-duration {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
}
.hp-explores-featured-body { padding-left: 48px; border-left: 1px solid rgba(255,255,255,0.14); }
.hp-explores-featured-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 12px;
}
.hp-explores-featured-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 16px;
}
.hp-explores-featured-desc {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
}

.hp-explores-shorts-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 36px;
  margin-top: 40px;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin-bottom: 24px;
}
.hp-explores-shorts-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.hp-explores-shorts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hp-short {
  display: block;
  color: #fff;
}
.hp-short-video {
  position: relative;
  aspect-ratio: 9/16;
  background: #253659;
  margin-bottom: 14px;
  overflow: hidden;
}
.hp-short-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-short-play svg { width: 16px; height: 16px; margin-left: 2px; }
.hp-short-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 10px;
  line-height: 1;
  padding: 4px 6px;
}
.hp-short-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.32;
  color: #fff;
}

/* ── Reports ── */
.hp-reports {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 64px;
  padding-top: 60px;
  padding-bottom: 64px;
}
.hp-report-featured-img {
  aspect-ratio: 3/4;
  max-width: 300px;
  background: transparent;
  box-shadow: 0 16px 36px rgba(17,24,39,0.2);
  margin-bottom: 20px;
  overflow: hidden;
}
/* Same as .hp-issue-cover-img — don't crop the cover to fit the 3:4 box */
.hp-report-featured-img img { object-fit: contain; }
.hp-report-featured-eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 10px;
}
.hp-report-featured-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 16px;
}
.hp-report-featured-cta {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  border-bottom: 1.5px solid rgba(14,124,123,0.35);
  padding-bottom: 3px;
}
.hp-reports-list-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--navy);
  margin-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-reports-list-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--navy);
}
.hp-reports-list-more {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.hp-reports-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px 90px;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid #EDEBE6;
}
.hp-reports-row:last-child { border-bottom: none; }
.hp-reports-row-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
}
.hp-reports-row-cat {
  font-family: var(--body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}
.hp-reports-row-date {
  font-family: var(--body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  color: var(--grey);
  text-align: right;
}

/* ── Our Events (navy band) ── */
.hp-events {
  background: var(--navy);
  padding-top: 44px;
  padding-bottom: 48px;
}
.hp-events-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.16);
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}
.hp-events-heading {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(26px, 2.8vw, 34px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
.hp-events-more {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--yellow);
}
.hp-events-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
}
.hp-event { display: block; }
.hp-event-date {
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  line-height: 0.9;
  color: var(--yellow);
  margin-bottom: 14px;
}
.hp-event-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.28;
  color: #fff;
  margin-bottom: 8px;
}
.hp-event-venue {
  font-family: var(--body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,0.5);
}

/* ── Also on EN (3-col grid at bottom) ── */
.hp-alsoon {
  padding-top: 56px;
  padding-bottom: 64px;
  border-top: 1px solid #EDEBE6;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 2fr);
  gap: 48px;
}
.hp-alsoon-hero { display: block; }
.hp-alsoon-hero-img {
  aspect-ratio: 3/2;
  background: #1B2A4A;
  margin-bottom: 20px;
  overflow: hidden;
}
.hp-alsoon-hero-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.13;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 14px;
}
.hp-alsoon-hero-standfirst {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--grey);
  max-width: 46ch;
}
/*
 * .hp-alsoon-cols replaces what used to be two separate .hp-alsoon-col flex
 * containers. Two independent flex columns each size themselves only to
 * their own content, so if the top card in one column has a longer title
 * that wraps to more lines, that column's second card starts lower than the
 * other column's second card - a misalignment that only shows up when title
 * lengths differ, which is exactly what happened here.
 *
 * A single grid with grid-auto-flow: column solves this properly: both
 * columns share the same two grid rows, and a row's height is always driven
 * by its TALLEST cell across both columns - so row 2 always starts at the
 * same y position in both columns, regardless of how tall row 1 got in
 * either column individually.
 *
 * grid-auto-flow: column places items column-first (item 1 & 2 into column
 * 1, item 3 & 4 into column 2), preserving the exact same visual reading
 * order as the old two-div markup.
 */
.hp-alsoon-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  column-gap: 48px;
  row-gap: 32px;
  padding-left: 48px;
  border-left: 1px solid #EDEBE6;
}
.hp-alsoon-card { display: block; }
.hp-alsoon-card-img {
  aspect-ratio: 3/2;
  background: var(--teal);
  margin-bottom: 16px;
  overflow: hidden;
}
.hp-alsoon-card-title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--navy);
}

/* ── Promoted Content (row) ──
 * A dedicated homepage row for sponsored/promoted posts, entirely separate
 * from ordinary editorial content. Only appears at all when the newest
 * Sponsored Content post is within the freshness window (6 weeks / 42 days)
 * - an empty or stale slot simply doesn't render, same pattern as EN
 * Explores / Our Events.
 *
 * The label is deliberately a SMALL SERIF, not the bold italic serif used for
 * main section headings (Comment, EN Explores) and not the bold caps sans
 * used for sub-labels (Across the Industry, Shorts) - a third, quieter
 * register that reads as "this is different from editorial", without
 * shouting about it.
 */
.hp-promoted-row {
  padding-top: 48px;
  padding-bottom: 48px;
  border-top: 1px solid #EDEBE6;
}
.hp-promoted-label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 24px);
  letter-spacing: -0.005em;
  color: var(--grey);
  margin-bottom: 26px;
}
.hp-promoted-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.hp-promoted-item { display: block; }
.hp-promoted-img {
  aspect-ratio: 3/2;
  background: #253659;
  margin-bottom: 14px;
  overflow: hidden;
}
.hp-promoted-item-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
  color: var(--navy);
}

/* ── Partners (row of uniform logo tiles) ──
 * Every logo sits in an identical fixed-size tile with object-fit: contain,
 * so mismatched source dimensions (a wide horizontal logo next to a square
 * icon) never distort, crop, or force different tile sizes - the tile is
 * always the same box, the logo always fits fully inside it, whitespace
 * absorbs the difference. No fade/carousel - static full-width row, wraps
 * to additional rows if there are more partners than fit on one line.
 *
 * The label here is the most subtle of all three tiers on the homepage:
 * smaller and quieter than even the Promoted Content label above, since
 * partner logos are already visually self-explanatory and don't need a loud
 * introduction.
 */
.hp-partners-row {
  padding-top: 44px;
  padding-bottom: 24px;
  border-top: 1px solid #EDEBE6;
  text-align: center;
}
.hp-partners-label {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B8B4AB;
  margin-bottom: 22px;
  text-align: center;
}
.hp-partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.hp-partner-tile {
  display: block;
  width: 160px;
  height: 84px;
  flex-shrink: 0;
}
.hp-partner-tile-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F7F6F3;
  border: 1px solid #EDEBE6;
  border-radius: 4px;
  /* preview-only placeholder styling - the img tag inside gets object-fit:
     contain with generous padding in the real template, see front-page.php */
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hp-partner-tile-inner img {
  max-width: 75%;
  max-height: 60%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
.hp-partner-tile:hover .hp-partner-tile-inner img {
  filter: grayscale(0%);
  opacity: 1;
}

/*
 * At 1024 and below - the same breakpoint where every other multi-column
 * section on the homepage (hero, story row, industry, also-on-en) collapses
 * to a single column - the Promoted row drops to 2 columns AND hides items
 * 3 and 4. That leaves one clean row of 2 rather than 4 small cards. The
 * earlier setting (900px) meant that at tablet-landscape widths, other
 * sections had already gone big and full-width while Promoted stayed at
 * 4-across with tiny cards - matching the breakpoint aligns everything.
 */
@media (max-width: 1024px) {
  .hp-promoted-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-promoted-item:nth-child(3),
  .hp-promoted-item:nth-child(4) { display: none; }
}
@media (max-width: 640px) {
  /* Mobile: stack the remaining 2 cards to full width, matching everything
     else on the page at this size - big, uncramped, editorial-feeling. */
  .hp-promoted-grid { grid-template-columns: 1fr; }
  .hp-partner-tile { width: 130px; height: 68px; }
}

/* ── Ad banner slots ──
 * Centred, capped at a reasonable leaderboard width, subtle divider lines top and
 * bottom so the ad is visually offset from surrounding editorial content without
 * screaming "AD" through a heavy border. Slot doesn't render at all when empty.
 */
.hp-ad-slot {
  padding-top: 40px;
  padding-bottom: 40px;
}
.hp-ad-slot-inner {
  max-width: 970px;
  margin: 0 auto;
  text-align: center;
  padding: 16px 0;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
/* Ensure any inline block ads (Google Ad Manager iframes, etc) centre properly */
.hp-ad-slot-inner > * { margin-left: auto; margin-right: auto; }
.hp-ad-slot-inner iframe,
.hp-ad-slot-inner ins,
.hp-ad-slot-inner img { max-width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .hp-ad-slot { padding-top: 28px; padding-bottom: 28px; }
}

/* Top-of-page ad (Slot 1) sits between the utility bar and the header - it
   doesn't need the same 40px breathing room that mid-page ads use to separate
   large editorial sections. Compact vertical padding keeps the fold tighter. */
.hp-ad-slot--banner_1 { padding-top: 12px; padding-bottom: 12px; }
.hp-ad-slot--banner_1 .hp-ad-slot-inner { padding: 6px 0; }
@media (max-width: 640px) {
  .hp-ad-slot--banner_1 { padding-top: 10px; padding-bottom: 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════════
 * Homepage responsive rules (mapped to theme breakpoints: 1024 / 900 / 640)
 * The design mockup uses 1040/840/600; those map here to 1024/900/640 so
 * homepage stacking lines up with every other template in the theme.
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ── Tablet landscape (≤ 1024): multi-column editorial grids collapse to one ── */
@media (max-width: 1024px) {
  .hp-hero,
  .hp-storyrow,
  .hp-comment-grid,
  .hp-industry-grid,
  .hp-newsletter-inner,
  .hp-issue,
  .hp-explores-featured,
  .hp-reports,
  .hp-alsoon {
    grid-template-columns: 1fr;
    display: block;
  }
  /* Stacked children need spacing since grid gap is gone */
  .hp-hero > *,
  .hp-storyrow > *,
  .hp-comment-grid > *,
  .hp-industry-grid > *,
  .hp-issue > *,
  .hp-alsoon > * {
    margin-bottom: 36px;
  }
  .hp-hero > *:last-child,
  .hp-storyrow > *:last-child,
  .hp-comment-grid > *:last-child,
  .hp-industry-grid > *:last-child,
  .hp-issue > *:last-child,
  .hp-alsoon > *:last-child { margin-bottom: 0; }
  /* Ruled sidebars lose their vertical rule + inset once stacked */
  .hp-hero-side,
  .hp-storyrow-mid,
  .hp-comment-list,
  .hp-industry-side,
  .hp-alsoon-cols,
  .hp-explores-featured-body { padding-left: 0; border-left: none; }
  /*
   * .hp-alsoon-cols is a fixed 2-column-by-2-row grid so its rows align on
   * desktop (see the rule itself for why). Once the outer .hp-alsoon stacks
   * to a single column, that 2-column grid needs to collapse too, or the 4
   * cards would carry on showing as a 2x2 grid of narrower cards instead of
   * stacking full-width in a single reading order like everything else on
   * the page at this width.
   */
  .hp-alsoon-cols {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    row-gap: 32px;
  }
  .hp-alsoon-cols > *:not(:last-child) { margin-bottom: 0; }
  /* Landscape hero images normalise to a common 3:2 once stacked, so the top
   * of the page doesn't get overwhelmed by a huge 16:9 or 2:1 image on
   * narrow viewports. */
  .hp-hero-main-img,
  .hp-lead-img,
  .hp-alsoon-hero-img,
  .hp-explores-featured-video,
  .hp-alsoon-card-img,
  .hp-story-card-img,
  .hp-media-row-img,
  .hp-industry-promoted-img { aspect-ratio: 3/2; }
  /* Shorts row goes 4-up at this breakpoint (from its designed 5-up) */
  .hp-explores-shorts { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .hp-explores-shorts > .hp-short:nth-child(5) { display: none; }
  /* Quote box widens back out to the full column when stacked - undo its
   * fixed 300px sidebar width so it fills the row cleanly */
  .hp-quote { padding: 28px 26px 30px; }
  /* Standfirsts / body copy can use full width once stacked */
  .hp-hero-standfirst,
  .hp-lead-standfirst,
  .hp-comment-lead-teaser,
  .hp-alsoon-hero-standfirst { max-width: none; }
  /* Featured report cover recentres and downsizes when stacked */
  .hp-reports > * { margin-bottom: 36px; }
  .hp-reports > *:last-child { margin-bottom: 0; }
  .hp-report-featured {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .hp-report-featured-img {
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Print issue cover panel centres too */
  .hp-issue-cover {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
  .hp-issue-cover-label,
  .hp-issue-cover-title,
  .hp-issue-cover-date,
  .hp-issue-cover-underline { text-align: center; display: block; margin-left: auto; margin-right: auto; }
  .hp-issue-cover-underline { width: 52px; }
  /* Newsletter form and title stack cleanly */
  .hp-newsletter-inner { display: flex; }
}

/* ── Tablet portrait (≤ 900): 4-ups become 2-ups; padding tightens ── */
@media (max-width: 900px) {
  .hp-explores-shorts { grid-template-columns: repeat(2, 1fr); }
  .hp-explores-shorts > .hp-short:nth-child(5) { display: none; }
  .hp-events-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  /* Utility date hides earlier since it's low-priority chrome */
  .hp-topstrip-en100-copy { display: none; }
}

/* ── Mobile (≤ 640): 4-ups become 1-up; media rows stack image over text ── */
@media (max-width: 640px) {
  .hp-events-grid { grid-template-columns: 1fr; gap: 26px; }
  .hp-explores-shorts { grid-template-columns: repeat(2, 1fr); }
  /* Media rows: image over text, not side-by-side */
  .hp-media-row,
  .hp-industry-main .hp-media-row { grid-template-columns: 1fr; gap: 14px; }
  .hp-media-row-img,
  .hp-industry-main .hp-media-row-img { aspect-ratio: 3/2; }
  /* Reports rows: title only (drop cat/date columns) */
  .hp-reports-row { grid-template-columns: 1fr; gap: 8px; }
  .hp-reports-row-date { text-align: left; }
  /* Newsletter form wraps and both fields go full width */
  .hp-newsletter-form { flex-wrap: wrap; width: 100%; }
  .hp-newsletter-form input[type="email"] {
    border-right: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    width: 100%;
    margin-bottom: 10px;
  }
  .hp-newsletter-form button {
    border-radius: 4px;
    width: 100%;
  }
  /* Hero-side big story headline shrinks a touch on mobile */
  .hp-hero-side-title { font-size: 22px; }
  /* Print issue CTA becomes full-width for easier tapping */
  .hp-issue-cta { align-self: stretch; text-align: center; }
}

/* ── Home shell escapes the .main 1200px wrapper ──
 * .main constrains all internal content to 1200px with 48px side padding.
 * The homepage design goes right to the edges of that container with its
 * own 84px inner padding, so escape only the horizontal padding, not the
 * width (keeps the site max-width consistent).
 */
.main > .hp-shell {
  margin-left: -48px;
  margin-right: -48px;
}
@media (max-width: 640px) {
  /* .main drops to 16px padding at this breakpoint, so match it */
  .main > .hp-shell { margin-left: -16px; margin-right: -16px; }
}