/* Economics Perspective — global stylesheet (redesign tokens from ref_html) */

:root {
  --maroon: #5a0a0a;
  --maroon-2: #7a1818;
  --red: #c0392b;
  --gold: #b8860b;
  --gold-bright: #d4af37;
  --charcoal: #1a1a1a;
  --cream: #e8ddc4;
  --bg: #f4f4f4;
  --footer-text: #e8c9c9;
  --action-bg: #faf8f3;
  --line: #eee;
  --line-2: #ddd;
  --muted: #666;
  --muted-2: #888;
  /* BBC Reith typography (self-hosted, see fonts.css) with graceful fallbacks. */
  --serif: 'Reith Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Reith Sans', Arial, Helvetica, sans-serif;
  --maxw: 1180px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--charcoal);
  font-family: var(--serif);
  line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; }
.topbar {
  background: var(--maroon); color: #fff;
  padding: 12px 0;
}
.topbar-inner {
  /* 20px shell-padding + 200px ad-rail + 16px gap = 236px — matches main content edge */
  padding: 0 236px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { height: 38px; border-radius: 2px; }
.brand .ep-mark { border: 2px solid #fff; padding: 2px 6px; font-weight: 700; font-size: 14px; font-family: var(--sans); }
/* Never split "Economics Perspective" across two lines. */
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.header-account { display: flex; align-items: center; gap: 10px; }
.auth-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px; border-radius: 7px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none;
  color: var(--maroon); background: #fff; border: 1px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.auth-btn i { font-size: 15px; line-height: 0; }
.auth-btn:hover {
  color: var(--maroon); background: #f5ede1;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, .28);
}
.auth-btn:active { transform: translateY(0); box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.auth-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 560px) { .auth-btn span { display: none; } .auth-btn { padding: 10px 12px; } }

/* --- Account menu (avatar dropdown) --- */
.usermenu { position: relative; }
.usermenu-trigger {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: transparent; border: 0; cursor: pointer; border-radius: 50%;
}
.usermenu-trigger:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block;
  border: 2px solid rgba(255,255,255,.85); background: #fff;
}
.avatar-initial {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #3a2a00; font-family: var(--sans); font-weight: 700; font-size: 15px;
}
.avatar-ring {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 2px solid var(--gold-bright); pointer-events: none;
}
.avatar-lg { width: 44px; height: 44px; font-size: 18px; border-color: var(--cream); }

.usermenu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; width: 268px;
  background: #fff; color: var(--charcoal); border: 1px solid var(--cream);
  border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.18);
  padding: 8px; z-index: 200;
  opacity: 0; transform: translateY(-6px); visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.usermenu.open .usermenu-panel { opacity: 1; transform: translateY(0); visibility: visible; }
.usermenu-panel::before {
  content: ""; position: absolute; top: -6px; right: 16px; width: 12px; height: 12px;
  background: #fff; border-left: 1px solid var(--cream); border-top: 1px solid var(--cream);
  transform: rotate(45deg);
}
.usermenu-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; }
.usermenu-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.usermenu-id strong { font-family: var(--serif); font-size: 15px; color: var(--charcoal);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.usermenu-id span { font-size: 12px; color: #888;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.badge { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 999px; width: fit-content; }
.badge-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #3a2a00; }
.badge-muted { background: #f0ece2; color: #6b6256; }
.usermenu-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.usermenu-upsell {
  display: flex; gap: 10px; align-items: center; margin: 4px 2px 6px;
  padding: 10px 12px; border-radius: 8px; text-decoration: none;
  background: linear-gradient(160deg, var(--maroon), var(--maroon-2)); color: #fff;
}
.usermenu-upsell i { font-size: 18px; color: var(--gold-bright); }
.usermenu-upsell span { display: flex; flex-direction: column; line-height: 1.25; }
.usermenu-upsell strong { font-size: 13px; }
.usermenu-upsell small { font-size: 11px; color: var(--gold-bright); opacity: .9; }

.usermenu-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border-radius: 7px; text-decoration: none; cursor: pointer;
  font-family: var(--sans); font-size: 13.5px; color: var(--charcoal);
  background: transparent; border: 0; text-align: left;
}
.usermenu-item i { font-size: 16px; color: var(--maroon); width: 18px; text-align: center; }
.usermenu-item:hover { background: #f6f1e7; }
.usermenu-signout { color: #a32020; }
.usermenu-signout i { color: #a32020; }
.usermenu-sep { height: 1px; background: var(--cream); margin: 6px 4px; }

/* --- Account page --- */
.account-hero {
  display: flex; align-items: center; gap: 22px;
  background: linear-gradient(160deg, var(--maroon), var(--maroon-2));
  color: #fff; border-radius: 14px; padding: 26px 28px; margin: 8px 0 18px;
}
.account-avatar {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  border: 3px solid rgba(255,255,255,.5); background: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: 34px;
}
.account-hero-info { min-width: 0; }
.account-hero-info h1 { margin: 0; font-family: var(--serif); font-size: 28px; color: #fff; line-height: 1.1; }
.account-email { margin: 4px 0 0; color: var(--gold-bright); font-size: 14px; }
.account-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
/* Default role badge sits on white surfaces (dropdown, settings). */
.badge-role { background: #f0e6e6; color: var(--maroon); }
/* On the maroon hero, flip to a light translucent badge. */
.account-hero .badge-role { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.account-since { margin: 12px 0 0; font-size: 12px; color: rgba(255,255,255,.7); }

.account-upsell {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid var(--gold); border-left: 4px solid var(--gold-bright);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 18px; text-decoration: none;
}
.account-upsell strong { display: block; color: var(--maroon); font-size: 15px; }
.account-upsell span { color: #777; font-size: 13px; }
.account-upsell-cta { color: var(--maroon); font-family: var(--sans); font-weight: 700; font-size: 13px; white-space: nowrap; }
.account-upsell:hover { box-shadow: 0 6px 20px rgba(184,134,11,.18); }

.account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.account-tile {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: #fff; border: 1px solid var(--cream); border-radius: 10px; padding: 16px 18px;
  transition: box-shadow .15s, transform .15s;
}
.account-tile:hover { box-shadow: 0 8px 22px rgba(90,10,10,.10); transform: translateY(-1px); }
.account-tile-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 20px;
  background: #f6f1e7; color: var(--maroon);
}
.account-tile-text { display: flex; flex-direction: column; min-width: 0; }
.account-tile-text strong { color: var(--charcoal); font-size: 14.5px; }
.account-tile-text small { color: #999; font-size: 12px; }
.account-tile-arrow { margin-left: auto; color: #ccc; font-size: 14px; }
@media (max-width: 700px) { .account-grid { grid-template-columns: 1fr; } .account-hero { flex-direction: column; text-align: center; } .account-badges { justify-content: center; } }

/* --- Audio Edition listing (podcast-style card, player inline) --- */
.audio-card {
  background: #fff; border: 1px solid var(--cream); border-left: 3px solid var(--maroon);
  border-radius: 12px; padding: 20px; margin-bottom: 18px;
  transition: box-shadow .15s, transform .15s;
}
.audio-card:hover { box-shadow: 0 12px 28px rgba(90,10,10,.10); transform: translateY(-1px); }
.audio-card-head { display: flex; gap: 18px; align-items: flex-start; }
.audio-cover { position: relative; flex: 0 0 112px; display: block; border-radius: 10px; overflow: hidden; }
.audio-cover img { width: 112px; height: 112px; object-fit: cover; display: block; }
.audio-cover-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(20,10,10,.32); color: #fff; font-size: 30px; opacity: 0; transition: opacity .15s;
}
.audio-cover:hover .audio-cover-play { opacity: 1; }
.audio-meta { flex: 1; min-width: 0; }
.audio-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--gold); text-transform: uppercase; display: flex; align-items: center; gap: 6px;
}
.audio-eyebrow .dot { color: #ccc; }
.audio-card h3 { font-family: var(--serif); font-size: 20px; line-height: 1.28; margin: 7px 0 7px; }
.audio-card h3 a { color: var(--charcoal); text-decoration: none; }
.audio-card h3 a:hover { color: var(--maroon); }
.audio-desc { font-size: 14px; color: var(--muted); line-height: 1.55; margin: 0 0 10px; }
.audio-readlink { font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--maroon); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.audio-readlink:hover { color: var(--accent, #c0392b); gap: 8px; }
.audio-player { margin-top: 16px; }
.audio-player iframe { border-radius: 12px; display: block; }
@media (max-width: 560px) {
  .audio-card-head { gap: 14px; }
  .audio-cover, .audio-cover img { flex-basis: 84px; width: 84px; height: 84px; }
  .audio-card h3 { font-size: 18px; }
}

/* --- Spotify audio embed (Audio Edition) --- */
.spotify-embed { margin: 18px 0 6px; }
.spotify-label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .5px; color: #1DB954; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.spotify-embed iframe { border-radius: 12px; display: block; }

/* Article "Listen to this Edition" — same card look as the home audio section. */
.article-audio { margin: 20px 0 6px; }
.article-audio .section-title i { color: #1DB954; margin-right: 6px; }

/* --- Home sidebar: Monthly Edition promo --- */
.home-edition {
  background: #fff; border: 1px solid var(--cream); border-radius: 10px;
  padding: 14px; text-align: center; box-shadow: 0 4px 16px rgba(90,10,10,.06); margin-bottom: 20px;
}
.home-edition-cover { display: block; aspect-ratio: 1414 / 2000; border-radius: 6px; overflow: hidden; background: #efe9dc; }
.home-edition-cover img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s; }
.home-edition-cover:hover img { transform: scale(1.03); }
.home-edition h4 { font-family: var(--serif); color: var(--maroon); font-size: 15px; margin: 12px 0 6px; line-height: 1.25; }
.home-edition-stars { color: #e0a800; font-size: 13px; letter-spacing: 1px; margin-bottom: 12px; }
.home-edition-btn { width: 100%; padding: 8px; font-size: 13px; }

/* Home sidebar: clearer spacing between each block (Monthly Edition, Go
   Premium, News in Brief, ad). The first title keeps its inline margin-top:0. */
.home-aside .section-title { margin-top: 28px; }
.home-aside .home-edition { margin-bottom: 0; }
.home-aside .subscribe-box { margin: 14px 0 0; }
.home-aside .news-brief { margin-bottom: 0; }
.home-aside .sidebar-ad { margin-top: 28px; }

/* --- Monthly Edition: featured latest + previous carousel --- */
.me-heading { font-family: var(--serif); color: var(--maroon); margin: 6px 0 18px; }
.me-heading-center { text-align: center; font-size: 26px; }
.me-heading-center::after { content: ""; display: block; width: 64px; height: 2px; background: var(--maroon); margin: 10px auto 0; }
.me-heading-left { font-size: 19px; border-bottom: 2px solid var(--maroon); padding-bottom: 6px; display: inline-block; margin-top: 28px; }

.me-stars { color: #e0a800; font-size: 15px; letter-spacing: 1px; }
.me-stars-sm { font-size: 12px; }
.me-cover { aspect-ratio: 1414 / 2000; background: #efe9dc; border-radius: 6px; overflow: hidden; }
.me-cover img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Featured latest edition */
.me-featured { display: flex; justify-content: center; }
.me-feature-card {
  background: #fff; border: 1px solid var(--cream); border-radius: 12px; padding: 22px;
  width: min(320px, 92vw); text-align: center; box-shadow: 0 8px 26px rgba(90,10,10,.08);
}
.me-feature-card h3 { font-family: var(--serif); color: var(--maroon); font-size: 18px; margin: 16px 0 8px; line-height: 1.25; }
.me-feature-card .me-stars { margin-bottom: 14px; }
.me-buy { display: inline-flex; align-items: center; justify-content: center; padding: 9px 22px; }
.me-soon { font-family: var(--sans); font-size: 12px; color: #aaa; font-style: italic; }

/* Previous editions carousel */
.me-carousel { display: flex; align-items: center; gap: 10px; }
.me-track {
  flex: 1; min-width: 0; display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x proximity; padding: 4px 2px 10px;
}
.me-track::-webkit-scrollbar { height: 6px; }
.me-track::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.me-pcard { flex: 0 0 auto; width: 150px; scroll-snap-align: start; text-align: center; text-decoration: none; }
.me-pcard .me-cover { transition: box-shadow .15s, transform .15s; }
.me-pcard:hover .me-cover { box-shadow: 0 10px 24px rgba(90,10,10,.14); transform: translateY(-2px); }
.me-pcard h4 { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--charcoal); margin: 9px 0 4px; line-height: 1.3; }
.me-arrow {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--cream);
  background: #fff; color: var(--maroon); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; font-size: 16px; box-shadow: 0 2px 10px rgba(0,0,0,.08);
}
.me-arrow:hover { background: var(--maroon); color: #fff; }
@media (max-width: 700px) { .me-arrow { display: none; } }

/* --- Membership billing panel --- */
.billing-panel {
  background: #fff; border: 1px solid var(--cream); border-radius: 12px;
  padding: 22px 24px; margin: 0 auto 28px; max-width: 860px;
  box-shadow: 0 6px 22px rgba(90,10,10,.06);
}
.billing-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.billing-countdown {
  text-align: center; background: linear-gradient(160deg, var(--maroon), var(--maroon-2));
  color: #fff; border-radius: 10px; padding: 10px 18px; min-width: 92px;
}
.billing-countdown strong { display: block; font-size: 26px; font-family: var(--serif); color: var(--gold-bright); line-height: 1; }
.billing-countdown span { font-family: var(--sans); font-size: 11px; letter-spacing: .5px; }
.billing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px;
  margin: 18px 0 6px; padding: 16px 0; border-top: 1px solid var(--cream); border-bottom: 1px solid var(--cream);
}
.billing-grid > div { display: flex; flex-direction: column; gap: 4px; }
.billing-grid span { font-family: var(--sans); font-size: 11px; letter-spacing: .5px; color: #999; text-transform: uppercase; }
.billing-grid strong { font-size: 14px; color: var(--charcoal); }
.billing-subhead { font-family: var(--serif); font-size: 16px; color: var(--maroon); margin: 18px 0 10px; }
.billing-table-wrap { overflow-x: auto; }
.billing-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.billing-table th {
  text-align: left; font-family: var(--sans); font-size: 10px; letter-spacing: .5px; text-transform: uppercase;
  color: #999; padding: 8px 12px; border-bottom: 2px solid var(--cream); white-space: nowrap;
}
.billing-table td { padding: 10px 12px; border-bottom: 1px solid #f1ece1; color: #444; white-space: nowrap; }
.billing-table tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) { .billing-grid { grid-template-columns: repeat(2, 1fr); } }

.mainnav { background: #fff; border-bottom: 1px solid var(--line-2); }
.mainnav-inner {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; align-items: center;
  padding: 11px 24px;
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #333;
}
.mainnav-inner a { text-transform: uppercase; padding: 2px 0; }
.mainnav-inner a:hover { color: var(--maroon); }
.mainnav-inner a.active { border-bottom: 2px solid var(--maroon); }
.mainnav-inner a.gold { color: var(--gold); }
.mainnav-inner a.gold.active { border-bottom-color: var(--gold); }
.mainnav-inner a.nav-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #3a2a00; border: 1px solid rgba(58,42,0,.22); padding: 7px 14px; border-radius: 6px; font-size: 10.5px;
  font-weight: 700; letter-spacing: .4px;
  box-shadow: 0 2px 6px rgba(184,134,11,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.nav-pill i { font-size: 12px; }
.nav-pill:hover {
  color: #3a2a00; filter: brightness(1.05);
  transform: translateY(-1px); box-shadow: 0 4px 12px rgba(184,134,11,.45);
}
/* ---------- Share popup ---------- */
.share-modal { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.share-modal[hidden] { display: none; }
.share-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.share-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: #fff; border-radius: 14px; padding: 18px 20px 20px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, .5);
}
.share-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.share-head h3 { font-family: var(--serif); font-size: 19px; margin: 0; color: var(--maroon); }
.share-close { background: none; border: 0; font-size: 26px; line-height: 1; color: var(--muted-2); cursor: pointer; padding: 0 4px; }
.share-close:hover { color: var(--maroon); }
.share-title {
  font-size: 13px; color: #555; margin: 6px 0 16px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* App list */
.share-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.share-app {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 12px 4px; border-radius: 10px; text-decoration: none;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600; color: #444;
  border: 1px solid var(--line-2); transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.share-app:hover { background: #faf7f1; border-color: var(--gold); transform: translateY(-2px); color: #444; }
.share-ico {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 17px;
}
.share-ico.wa { background: #25d366; }
.share-ico.x  { background: #000; }
.share-ico.fb { background: #1877f2; }
.share-ico.li { background: #0a66c2; }
.share-ico.tg { background: #229ed9; }
.share-ico.ml { background: var(--maroon); }
/* Copy link */
.share-link { display: flex; gap: 8px; }
.share-link input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px;
  font-size: 12.5px; color: #555; background: #fbfaf8;
}
.share-copy {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border: 0; border-radius: 8px; cursor: pointer;
  background: var(--maroon); color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 700;
  transition: background .15s ease;
}
.share-copy:hover { background: #3f0707; }
.share-copy.copied { background: #1e8e4e; }
.share-native {
  width: 100%; margin-top: 10px; padding: 11px; border: 1px dashed var(--line-2); border-radius: 8px;
  background: #fff; color: var(--maroon); font-family: var(--sans); font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.share-native:hover { background: #faf7f1; }
@media (max-width: 420px) {
  .share-apps { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .share-card { padding: 16px; }
}

/* ---------- Three-column shell ---------- */
.shell {
  width: 100%; margin: 0;
  display: flex; gap: 16px; padding: 14px 20px;
}
.shell .main { flex: 1; min-width: 0; }
/* The rail column stays in normal flow to reserve its 200px so the main content
   never widens under the ad. */
.ad-rail { width: 200px; flex-shrink: 0; align-self: flex-start; }
/* The ad itself is fixed to the viewport, so it stays put and never scrolls with
   the page. Anchored to the shell's 20px edge padding (left/right). */
.ad-rail-inner { position: fixed; top: 96px; width: 200px; box-sizing: border-box; }
.ad-rail-left .ad-rail-inner  { left: 20px; }
.ad-rail-right .ad-rail-inner { right: 20px; }
.ad-box {
  background: #f7f3ea; border: 1px dashed #c9bfa6;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--muted-2); font-size: 10px; font-family: var(--sans);
  min-height: 600px;
}
/* Reserve ad space on the CONTAINER (not just the dev placeholder) so the live
   async <ins> doesn't push content down when it fills → prevents ad-driven CLS. */
.leaderboard { margin: 16px 0; min-height: 90px; }
.leaderboard .ad-box, .leaderboard ins.adsbygoogle { min-height: 90px; display: block; }
.sidebar-ad { margin-top: 20px; min-height: 250px; }
.sidebar-ad-box, .sidebar-ad ins.adsbygoogle { min-height: 250px; }

/* ---------- Ad framing: grey panel + "Advertisement" label on every slot ----------
   Ads are disclosed with a neutral label and set off from editorial content
   (AdSense best practice). Applied to every ad container via a shared rule; blank
   premium rails are excluded (nothing to label). The label sits in the top
   padding so it never overlaps the ad. */
.leaderboard,
.sidebar-ad,
.ad-rail-inner,
.adgate-ad {
  position: relative; box-sizing: border-box;
  background: #eeece7; border: 1px solid #e3e0d9; border-radius: 6px;
  padding: 22px 10px 10px;
}
/* keep 160px inner for the skyscraper; re-assert fixed (the shared frame rule
   above sets position:relative, which must not override the fixed rail). */
.ad-rail-inner { padding-left: 20px; padding-right: 20px; position: fixed; }
.leaderboard::before,
.sidebar-ad::before,
.ad-rail-inner::before,
.adgate-ad::before {
  content: "Advertisement";
  position: absolute; top: 6px; left: 0; right: 0; text-align: center;
  font-family: var(--sans); font-size: 9px; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase; color: #a29d92;
}

/* ---------- Section headers ---------- */
.section-title {
  font-size: 17px; font-weight: 700; color: #222;
  border-bottom: 2px solid var(--maroon); padding-bottom: 6px; margin: 40px 0 18px;
}
.eyebrow { font-family: var(--sans); font-size: 11px; color: var(--red); margin-bottom: 6px; text-transform: capitalize; }

/* "Read more" button at the foot of a home-page section — sends the reader to
   that section's own listing page. Right-aligned, maroon outline that fills on
   hover; the arrow nudges to the right. */
.section-more-wrap { display: flex; justify-content: center; margin: 16px 0 4px; }
.section-more-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 22px; border-radius: 999px;
  border: 1.5px solid var(--maroon); background: transparent; color: var(--maroon);
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; text-decoration: none;
  transition: background .2s, color .2s, box-shadow .2s;
}
.section-more-btn i { transition: transform .2s ease; }
.section-more-btn:hover {
  background: var(--maroon); color: #fff;
  box-shadow: 0 4px 14px rgba(90, 10, 10, .28);
}
.section-more-btn:hover i { transform: translateX(4px); }

/* ---------- Breaking news ---------- */
/* One heading over the whole set (matching the .stories-head convention), with a
   pulsing red dot marking the feed as live. Items are rows beneath it. */
.breaking-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.breaking-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.breaking-head h2 {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Georgia', serif; font-size: 20px; margin: 0; color: var(--maroon, #5a0a0a);
  border-bottom: 2px solid var(--gold, #b8860b); padding-bottom: 5px;
}
.breaking-live {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(192, 57, 43, .6); animation: breaking-pulse 1.8s ease-out infinite;
}
@keyframes breaking-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(192, 57, 43, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(192, 57, 43, 0); }
  100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
}
/* Readers who ask for less motion get a steady dot instead of a pulsing one. */
@media (prefers-reduced-motion: reduce) {
  .breaking-live { animation: none; }
}
/* No card background — the item sits flat on the page with just a red accent bar
   on the left, so it reads as a clean headline list. */
.breaking {
  background: transparent; box-shadow: none;
  border: 0; border-left: 3px solid var(--red);
  padding: 8px 0 8px 14px; margin: 0;
  display: flex; align-items: center; gap: 12px; overflow: hidden;
}
.breaking .ticker { font-size: 15px; color: #1a1a1a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
/* Parent-section label (optional) — a small maroon tag before the headline. */
.breaking-label {
  flex-shrink: 0; font-family: var(--sans); font-size: 10px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--red);
  background: rgba(192,57,43,.10); padding: 2px 8px; border-radius: 3px;
}
.breaking-arrow { color: var(--red); font-size: 14px; flex-shrink: 0; }
a.breaking-link { text-decoration: none; transition: color .15s ease; }
a.breaking-link:hover .ticker { color: var(--red); }

/* ---------- News in Brief (sidebar) ---------- */
.news-brief {
  background: #fff; border: 1px solid var(--cream); border-radius: 8px;
  padding: 6px 12px 12px; margin-bottom: 18px;
}
.news-brief-item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid #f0ece2;
  font-size: 12.5px; line-height: 1.35; color: #2a2a2a; text-decoration: none;
}
.news-brief-item:last-of-type { border-bottom: 0; }
.news-brief-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-top: 6px; flex-shrink: 0; }
a.news-brief-item:hover .news-brief-text { color: var(--maroon); text-decoration: underline; }
/* Prominent, attention-catching "All briefs" button (sits under the scroller) */
.news-brief-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 13px 18px; width: 100%; box-sizing: border-box;
  background: var(--maroon); color: #fff; border-radius: 8px;
  font-family: var(--sans); font-size: 14px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; text-decoration: none;
  box-shadow: 0 2px 8px rgba(90, 10, 10, .25);
  animation: briefPulse 2.6s ease-in-out infinite;
}
.news-brief-all i { transition: transform .2s ease; }
.news-brief-all:hover {
  background: #6e0d0d; animation-play-state: paused;
  box-shadow: 0 6px 20px rgba(184, 134, 11, .5);
}
.news-brief-all:hover i { transform: translateX(5px); }
/* Gentle lift + gold glow that repeats to draw the eye while scrolling. */
@keyframes briefPulse {
  0%, 55%, 100% { transform: translateY(0);    box-shadow: 0 2px 8px rgba(90, 10, 10, .25); }
  27%           { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(184, 134, 11, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .news-brief-all { animation: none; }
}

/* ---------- News in Brief (home horizontal strip) ---------- */
.brief-strip-scroll {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.brief-strip-scroll::-webkit-scrollbar { height: 6px; }
.brief-strip-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.brief-chip {
  flex: 0 0 auto; width: 280px; scroll-snap-align: start; text-decoration: none; overflow: hidden;
  background: #fff; border: 1px solid var(--cream); border-left: 4px solid var(--red);
  border-radius: 8px; transition: transform .15s ease, box-shadow .15s ease;
}
a.brief-chip:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.1); }
/* Mobile brief cards carry bookmark/share buttons over the image (like cat-cards);
   the overlay is absolute, so the card must be its positioning context. */
.brief-chip.has-actions { position: relative; }
.brief-chip-img { width: 100%; height: auto; display: block; }
.brief-chip-body { padding: 14px 16px; }
.brief-chip-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--red); text-transform: uppercase; }
.brief-chip h4 { font-family: var(--serif); font-size: 17px; color: #1a1a1a; line-height: 1.25; margin: 8px 0 6px; }
.brief-chip p {
  font-size: 13.5px; color: var(--muted); line-height: 1.5; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.brief-chip-all {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 150px; color: var(--maroon); font-family: var(--sans); font-weight: 700; font-size: 13px;
  border-left-color: var(--gold); background: #fffdf8;
}
.brief-chip-all i { margin-top: 6px; font-size: 16px; }

/* News in Brief — sidebar vertical scroller (reuses the .brief-chip cards).
   Grows to fill the leftover sidebar height (the aside stretches to match the
   taller article column) so the briefs occupy the space next to World News. */
.home-aside { display: flex; flex-direction: column; min-height: 0; }
/* flex-basis:0 + min-height:0 → the scroller fills the height the article
   column defines and scrolls when it has more briefs than fit. It never grows
   the aside taller than the article column (which would leave white space
   under the articles). */
.brief-vscroll {
  display: flex; flex-direction: column; gap: 14px;
  flex: 1 1 0; min-height: 260px;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 2px 6px 4px 2px;
}
.brief-vscroll::-webkit-scrollbar { width: 6px; }
.brief-vscroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.brief-vscroll .brief-chip { width: 100%; }
.brief-vscroll .brief-chip-img { height: auto; }

/* Home section wrappers (let mobile reorder them across the two columns). */
.hsec { min-width: 0; }
.hsec-briefs { display: flex; flex-direction: column; min-height: 0; }
/* Desktop: show exactly the 2 latest briefs, static (no vertical scrolling). */
@media (min-width: 761px) {
  .hsec-briefs { flex: 0 0 auto; }
  .hsec-briefs .brief-vscroll { flex: none; max-height: none; overflow: visible; }
}

/* ---------- News in Brief (listing page) ---------- */
/* Desktop keeps the original horizontal rows (image left, content right); mobile
   switches to image-on-top cards (reusing .brief-chip in a .cat-grid, whose
   image ratio is set by .cat-fit to match the Explained cards). */
.brief-view-mobile { display: none; }
/* Rows carry their own margin-bottom (from .row-item), so no flex gap here. */
.brief-rows { display: block; }
/* A brief row IS a World News row (.row-item) — same image column, type scale and
   spacing — with the red frame that marks it as a brief kept on top. The row is
   the link itself, so restate the bits .row-item normally gets from its inner <a>. */
.brief-row {
  border: 1px solid var(--cream); border-left: 4px solid var(--red);
  border-radius: 8px; text-decoration: none;
}
.brief-row .brief-thumb { flex: 0 0 40%; max-width: 360px; min-width: 0; align-self: stretch; display: block; }
.brief-row h3 { color: #1a1a1a; }
.brief-row h3 i { font-size: 13px; color: var(--red); }
.cat-grid .brief-chip { width: 100%; }
@media (max-width: 760px) {
  .brief-view-desktop { display: none; }
  .brief-view-mobile { display: block; }
}

/* ---------- Home top grid (articles + sidebar) ---------- */
/* The right sidebar was a hard-coded inline flex:0 0 410px. Combined with the
   two 200px ad-rails (which only hide at <=1200px), that starved the article
   column on laptop/tablet widths (~1100-1300px) down to ~240px. Keep it in CSS
   so it can shrink on smaller viewports; at <=760px the mobile block turns both
   columns into display:contents, so this basis no longer applies there. */
/* The sidebar (News in Brief / Monthly Edition / Go Premium) is the column that
   gives up width as the screen narrows — so the news column keeps its reading
   width instead of being squeezed. It stays fluid (≈30% of the row) but is
   floored at 300px so it never gets too cramped, and capped at 400px on wide
   screens. shrink:0 makes the news column (.article-col) absorb the gap, so the
   aside holds this width exactly. */
.home-aside { flex: 0 0 clamp(300px, 30%, 400px); min-width: 0; }
/* Desktop: pin the sidebar while the reader scrolls through Explained + World
   News, then release it when the grid (i.e. World News) ends. align-self stops
   the default stretch so sticky has room to travel. When the sidebar is taller
   than the viewport, the footer script swaps `top` for a negative value so it
   pins by its BOTTOM instead — every section (briefs, Monthly Edition, Go
   Premium) scrolls into view first, nothing gets cut off. Only >760px — below
   that the aside is display:contents (mobile stacking). */
@media (min-width: 761px) {
  .home-aside { position: sticky; top: 132px; align-self: flex-start; /* header is 120px */ }
}
/* Make the left column a query container so the featured lead can restyle
   itself based on its OWN width — i.e. stack the hero image on top exactly when
   the column gets too narrow for a side-by-side image, regardless of whether
   the narrowing came from the ad-rails or the viewport. */
.article-col { container-type: inline-size; }

/* ---------- Home section spacing ---------- */
.home-main > section,
.home-main > .article-grid,
.home-main > .webstories,
.home-main > .leaderboard { margin-top: 36px; }
.home-main > .breaking-stack { margin-top: 0; }

/* ---------- Web Stories strip ---------- */
/* Transparent section (no white box) + serif heading with a gold underline —
   matches the EP Prime "Prime Web Stories" block. */
.webstories { margin-bottom: 6px; }
.stories-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.stories-head h2 { font-family: 'Georgia', serif; font-size: 20px; margin: 0; color: var(--maroon, #5a0a0a);
  border-bottom: 2px solid var(--gold, #b8860b); padding-bottom: 5px; }
.ws-label { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--muted-2); letter-spacing: 1px; margin-bottom: 10px; }
.ws-scroll {
  display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.ws-scroll::-webkit-scrollbar { height: 6px; }
.ws-scroll::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
.ws-card {
  position: relative; flex: 0 0 auto; width: 205px; height: 340px;
  border: 0; padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer;
  scroll-snap-align: start; background: var(--maroon);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.ws-card img { width: 100%; height: 100%; object-fit: cover; }
.ws-card .ws-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.05) 55%); }
.ws-card .ws-cat {
  position: absolute; top: 10px; left: 10px; background: var(--red); color: #fff;
  font-family: var(--sans); font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 3px;
}
.ws-card .ws-title {
  position: absolute; left: 11px; right: 11px; bottom: 11px; color: #fff; text-align: left;
  font-family: var(--sans); font-size: 14px; font-weight: 700; line-height: 1.3;
}
.ws-card:hover { transform: translateY(-2px); transition: transform .2s; }
/* Locked (non-member) prime story: blurred teaser with a lock, links to paywall. */
.ws-card.ws-locked { text-decoration: none; display: block; }
.ws-card.ws-locked img { filter: blur(8px) brightness(.82); transform: scale(1.1); }
.ws-lock-badge {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.92); color: var(--maroon); font-size: 17px; box-shadow: 0 4px 14px rgba(0,0,0,.3);
}

/* Web-stories horizontal scroll arrows */
.ws-scroll-wrap { position: relative; }
.ws-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold);
  background: #fff; color: var(--maroon); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(0,0,0,.2); transition: background .2s ease, color .2s ease, opacity .2s ease;
}
.ws-arrow:hover { background: var(--maroon); color: var(--gold-bright); }
.ws-arrow:disabled { opacity: 0; pointer-events: none; }
.ws-arrow-prev { left: -8px; } .ws-arrow-next { right: -8px; }

/* Prev / next navigation inside the story popup */
.ws-modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(0,0,0,.45); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.ws-modal-nav:hover { background: rgba(0,0,0,.72); }
.ws-modal-prev { left: 10px; } .ws-modal-next { right: 10px; }

/* ---------- Web Story popup (vertical / portrait, full-bleed) ---------- */
.ws-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ws-modal[hidden] { display: none; }
.ws-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.78); backdrop-filter: blur(2px); }
/* 9:16 portrait card — the image fills it, text overlays the bottom. */
.ws-modal-card {
  position: relative; z-index: 1; background: #111; overflow: hidden;
  width: min(360px, 92vw); height: min(640px, 90vh);
  border-radius: 18px; box-shadow: 0 22px 60px rgba(0,0,0,.55);
  animation: wsPop .22s ease;
}
@keyframes wsPop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.ws-modal-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ws-modal-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 38%, rgba(0,0,0,.05) 68%, rgba(0,0,0,.18) 100%);
}
/* Top progress-bar flourish, like a real web story. */
.ws-modal-card::before {
  content: ""; position: absolute; top: 12px; left: 14px; right: 52px; height: 3px; z-index: 2;
  background: rgba(255,255,255,.35); border-radius: 2px;
}
.ws-modal-body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 22px 22px 26px; color: #fff; }
.ws-modal-source { font-family: var(--sans); font-size: 11px; font-weight: 700; color: var(--gold-bright); letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; }
.ws-modal-title { font-family: var(--serif); font-size: 23px; line-height: 1.22; margin: 0 0 10px; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.5); }
.ws-modal-brief { font-size: 14px; color: rgba(255,255,255,.88); line-height: 1.55; margin: 0 0 18px;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ws-modal-link { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--maroon); font-weight: 700; }
.ws-modal-link:hover { background: var(--gold-bright); color: #3a2a00; }
.ws-modal-close {
  position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
}
.ws-modal-close:hover { background: rgba(0,0,0,.8); }

/* ---------- Cards ---------- */
.card { background: #fff; margin-bottom: 14px; display: flex; flex-direction: column; }
/* Intrinsic-ratio image: the width/height attributes (set per section from
   image_constraint) drive the aspect ratio, and height:auto renders the FULL
   picture at that ratio on any screen — never cropped, no matter the viewport. */
.card .thumb { width: 100%; height: auto; display: block; }
.card .body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.card .kicker { font-family: var(--sans); font-size: 10px; color: var(--red); margin-bottom: 5px; }
.card h3 {
  font-size: 16px; font-weight: 700; color: var(--charcoal); line-height: 1.3; margin: 0 0 7px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card p {
  font-size: 13px; color: var(--muted); line-height: 1.55; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .meta { font-family: var(--sans); font-size: 10px; color: var(--muted-2); margin-top: 6px; }

.lead-card h3 { font-size: 25px; line-height: 1.25; -webkit-line-clamp: 4; }
.lead-card p { font-size: 15px; -webkit-line-clamp: 4; }

.grid { display: flex; gap: 14px; align-items: stretch; }
.grid > * { flex: 1; min-width: 0; }
.grid-3 > * { flex: 1 1 0; }

/* listing rows (category/world news/blog/search) — large, image-left/content-right */
.row-item {
  display: flex; gap: 24px; background: #fff; padding: 22px;
  margin-bottom: 28px; min-height: 240px; align-items: flex-start;
}
/* Image column is a proportion of the row (capped), never a fixed pixel width,
   so a narrow container (e.g. the home left column on smaller screens) can't
   squeeze the text down to one word per line. */
.row-item > a { flex: 0 0 40%; max-width: 360px; min-width: 0; align-self: flex-start; }
/* height:auto → the image keeps its own aspect ratio (from the width/height
   attributes) and is never cropped, whatever the column width. */
.row-item img { width: 100%; height: auto; object-fit: contain; border-radius: 6px; display: block; }
/* Featured lead row — taller than the standard listing rows. */
.row-item-feature { min-height: 360px; }
.row-item-feature > a { flex-basis: 44%; max-width: 440px; }
.row-item .row-body { flex: 1 1 0; min-width: 0; }
.row-item h3 { font-size: 22px; margin: 0 0 10px; line-height: 1.3; }
.row-item p, .row-item .rich-body {
  font-size: 17px; color: var(--muted); margin: 0; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}

/* .rich-body: wrapper for a field that may hold rich HTML (TinyMCE) or legacy
   plain text — see helpers/sanitize.php render_rich_or_plain(). A <p> gets a
   browser-default margin automatically; a <div> doesn't, so give it the same
   default here, and keep TinyMCE's own nested <p>s from stacking extra gaps.
   Contexts with their own paragraph styling (e.g. .row-item above) override
   this margin back to what their old bare <p> used. */
.rich-body { margin: 1em 0; }
.rich-body p { margin: 0 0 8px; }
.rich-body p:last-child { margin-bottom: 0; }
/* Featured lead: the headline must never tower over the image. Clamp it to 3
   lines and let its size shrink with the column width (cqi = 1% of the query
   container's inline size). */
.row-item-feature h3 {
  font-size: clamp(18px, 4.4cqi, 24px);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* When the column is too narrow for a decent landscape image side-by-side, the
   image shrinks and leaves a lot of empty white space beneath it (the text
   column is taller than the short image). Below ~820px of column width, stack
   the hero on top and let the content flow full-width beneath it — the same
   clean "tablet" hero card used on mobile. */
@container (max-width: 820px) {
  .row-item-feature { flex-direction: column; min-height: 0; }
  .row-item-feature > a { flex: 0 0 auto; max-width: none; align-self: stretch; }
  .row-item-feature img { width: 100%; height: auto; }
  .row-item-feature .row-body { width: 100%; }
  .row-item-feature p { -webkit-line-clamp: 4; }
}

/* ---------- Category listing (Blog / Editorial / Explained / etc.) ---------- */
.cat-hd { margin-bottom: 20px; }
.cat-hd-eyebrow { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.cat-hd-name { font-size: 28px; font-weight: 700; margin: 0 0 0; color: var(--charcoal); border-bottom: 3px solid var(--maroon); padding-bottom: 10px; }

/* Shared kicker line (Category · Date · Read time) */
.cat-kicker { font-family: var(--sans); font-size: 11px; color: var(--red); letter-spacing: .4px; margin-bottom: 8px; }
.ck-sep { color: var(--muted-2); margin: 0 5px; }
.prime-tag { display: inline-block; background: var(--gold); color: #fff; font-family: var(--sans); font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 2px; letter-spacing: .5px; vertical-align: middle; margin-left: 5px; }

/* Featured lead article — big image left, content right */
.cat-lead { display: flex; gap: 28px; margin-bottom: 30px; padding-bottom: 28px; border-bottom: 2px solid var(--maroon); align-items: flex-start; }
.cat-lead-img { flex: 0 0 52%; overflow: hidden; border-radius: 6px; display: block; }
.cat-lead-img img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.cat-lead-img:hover img { transform: scale(1.03); }
.cat-lead-body { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding-top: 4px; }
.cat-lead-title { font-size: 23px; line-height: 1.3; margin: 0 0 12px; }
.cat-lead-title a { color: var(--charcoal); }
.cat-lead-title a:hover { color: var(--maroon); }
.cat-lead-excerpt { font-size: 15px; line-height: 1.7; color: #444; margin: 0 0 18px; }
.cat-read-more { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--maroon); letter-spacing: .4px; display: inline-flex; align-items: center; gap: 5px; }
.cat-read-more:hover { text-decoration: underline; }

/* Compact 3-column card grid */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; }
.cat-card { background: #fff; border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; }
.cat-card-img { display: block; overflow: hidden; }
.cat-card-img img { width: 100%; height: auto; display: block; transition: transform .4s ease; }
.cat-card-img:hover img { transform: scale(1.03); }
.cat-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
/* Reserve a fixed line count for the title and description so every card in a
   row has the same body height — buttons align and the gaps stay even. */
.cat-card-title { font-size: 15px; line-height: 1.3; margin: 0 0 6px; min-height: 2.6em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cat-card-title a { color: var(--charcoal); }
.cat-card-title a:hover { color: var(--maroon); }
.cat-card-excerpt { font-size: 12px; line-height: 1.55; color: #555; margin: 0 0 12px; min-height: 6.2em;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Bookmark + share buttons on light rows/cards */
.item-actions { display: flex; gap: 8px; margin-top: 12px; }
.cat-card-body .item-actions { margin-top: auto; padding-top: 4px; }

/* ---------- Listing actions pinned to an item's top-right corner ----------
   Rows (World News / Theory / Brief), audio episodes and Prime Exclusives put the
   bookmark + share buttons in the corner of the box instead of under the text.
   Only items that actually render buttons reserve the corner, so rows without them
   (e.g. the home feature rows) keep their full text width. */
.row-item.has-actions,
.cat-lead.has-actions,
.audio-card,
.prime-card,
.brief-row-wrap { position: relative; }
.row-item.has-actions > .item-actions,
.cat-lead.has-actions > .item-actions,
.audio-card > .item-actions,
.prime-card > .item-actions,
.brief-row-wrap > .item-actions {
  position: absolute; top: 16px; right: 16px; margin: 0; z-index: 3;
}
/* Keep the headline/kicker clear of the buttons. */
.row-item.has-actions > .row-body > .kicker,
.row-item.has-actions > .row-body > h3,
.cat-lead.has-actions .cat-kicker,
.cat-lead.has-actions .cat-lead-title,
.prime-card .cat,
.prime-card h3 { padding-right: 88px; }
/* Audio card: the buttons only overlap the eyebrow/title lines near the top —
   padding the whole .audio-meta box (description included) squeezed the
   paragraph into a much narrower column than it needed on mobile, wrapping it
   across extra lines for no reason. Only the two lines actually beside the
   buttons need to give way; the description below them can use the full width. */
.audio-card .audio-eyebrow,
.audio-card h3 { padding-right: 88px; }
/* The Brief row is itself the link; its buttons sit above it, so make sure a click
   lands on the button and not the row underneath. */
.brief-row-wrap > .item-actions { pointer-events: auto; }
/* Cards with a hero on top (Explained / Editorial) use the overlay buttons over the
   image, exactly like the Blog cards — .blog-actions is already absolute top-right. */
.cat-card { position: relative; }
.item-actions button {
  width: 32px; height: 32px; padding: 0; border: 1px solid #ddd6c8; border-radius: 50%;
  background: #fff; color: var(--muted-2); cursor: pointer; font-size: 14px;
  display: flex; align-items: center; justify-content: center; transition: color .2s, border-color .2s;
}
.item-actions button:hover { color: var(--maroon); border-color: var(--maroon); }
.item-actions .bookmark-btn.saved { color: var(--gold); border-color: var(--gold); }

/* Categories that enforce an exact hero size (Explained / Blog / World News):
   size every image box to the uploaded picture's aspect ratio so the FULL
   image renders with no cropping, and clamp the text so the "news parts" stay
   hidden for uniform, responsive cards. --cat-img-ratio is set inline per page. */
.cat-fit .cat-lead-img img,
.cat-fit .cat-card-img img,
.cat-fit .brief-chip-img,
.cat-fit .row-item img { height: auto; aspect-ratio: var(--cat-img-ratio); }
.cat-fit .cat-lead-title,
.cat-fit .cat-card-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-fit .cat-lead-excerpt {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Show article titles & descriptions IN FULL (no "…") ----------
   Headlines (≤30 words) and short descriptions (≤70 words) are capped at the
   source, so listing cards no longer clip them with an ellipsis — the full text
   wraps. This overrides the -webkit-line-clamp set on each component above.
   (Blog image-overlay cards are intentionally left clamped: their text sits over
   the picture and would be clipped by the tile, which looks worse than a clamp.) */
.card h3, .card p,
.lead-card h3, .lead-card p,
.row-item h3, .row-item p, .row-item .rich-body,
.row-item-feature h3, .row-item-feature p,
.cat-card-title, .cat-card-excerpt,
.cat-fit .cat-lead-title, .cat-fit .cat-card-title, .cat-fit .cat-lead-excerpt {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* ---------- Blog listing — featured hero + image-overlay cards ---------- */
.blog-hero, .blog-ocard {
  position: relative; display: block; overflow: hidden; border-radius: 8px;
  background: var(--maroon); color: #fff;
}
/* Match the blog upload ratio (970×486) exactly, so the overlaid image fills the
   tile with object-fit:cover WITHOUT cropping — box shape == picture shape. */
.blog-hero { aspect-ratio: 970 / 486; margin-bottom: 24px; }
.blog-ocard { aspect-ratio: 970 / 486; }
.blog-hero > img, .blog-ocard > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
  transition: transform .5s ease;
}
.blog-hero:hover > img, .blog-ocard:hover > img { transform: scale(1.04); }
/* Two-way scrim: dark at the bottom (title/description) and a lighter wash at
   the top (badge/actions) so text stays legible even over a same-colour image. */
.blog-hero::after, .blog-ocard::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* Shade only the bottom (behind the title/excerpt); leave the top of the image
     clear so light/white images aren't greyed out. The date badge + action
     buttons carry their own backgrounds, so they stay readable up top. */
  background:
    linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.5) 18%, rgba(0,0,0,0) 42%);
}
/* Whole tile is clickable; sits above the scrim but below the action buttons. */
.blog-cover-link { position: absolute; inset: 0; z-index: 2; }
.blog-badge {
  position: absolute; top: 14px; left: 14px; z-index: 3; pointer-events: none;
  background: var(--maroon); color: #fff; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: .4px;
  padding: 4px 10px; border-radius: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.blog-actions { position: absolute; top: 12px; right: 12px; z-index: 4; display: flex; gap: 8px; }
.blog-actions button {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: background .2s;
}
.blog-actions button:hover { background: var(--maroon); }
.blog-actions .bookmark-btn.saved { background: var(--gold); }
/* Text layer sits above the cover-link; only the links inside catch clicks so
   the rest of the tile still follows the cover-link. */
.blog-overlay { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; pointer-events: none; }
.blog-overlay a { pointer-events: auto; color: #fff; }
.blog-hero .blog-overlay { padding: 22px 24px; }
.blog-hero .blog-overlay h2 {
  font-size: 26px; line-height: 1.25; margin: 0 0 8px; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.95);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-ocard .blog-overlay { padding: 16px 18px; }
.blog-ocard .blog-overlay h3 {
  font-size: 17px; line-height: 1.3; margin: 0 0 6px; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.95);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-overlay p {
  font-size: 14px; line-height: 1.55; margin: 0; color: #fff;
  text-shadow: 0 1px 5px rgba(0,0,0,.95);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-ocard .blog-overlay p { font-size: 12.5px; }
.blog-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-bottom: 22px; }
/* Blog listing: image-overlay design on desktop, standard cat-cards (like
   Explained/Editorial) on mobile. */
.blog-view-mobile { display: none; }
@media (max-width: 760px) {
  .blog-view-desktop { display: none; }
  .blog-view-mobile { display: block; }
}

/* ---------- Article page ---------- */
.article-shell { max-width: var(--maxw); margin: 0 auto; padding: 12px; }
/* Reading column stays legible while side ad rails fill the full-width gutters. */
.article-main { max-width: 1100px; margin: 0 auto; }
.article-grid { display: flex; gap: 24px; }
.article-col { flex: 1 1 70%; min-width: 0; }
.article-aside { flex: 0 0 280px; position: sticky; top: 96px; align-self: flex-start; }
.article h1 { font-family: var(--serif); font-size: 30px; line-height: 1.25; margin: 6px 0 14px; }
/* display:block kills the inline-image baseline gap, so the credit line sits tight
   under the picture instead of floating away from it. */
/* Category label on an article page — a solid badge, not the faint eyebrow text.
   Scoped to the article page so the .eyebrow used by Brief/Audio/category headers
   is untouched. */
.article-cat {
  display: inline-block; margin-bottom: 12px;
  /* On mobile .article-col is display:contents, so this becomes a flex item of
     .article-grid and would stretch to the full column width. Keep it hugging its
     text in both layouts. */
  align-self: flex-start; width: fit-content;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .9px; text-transform: uppercase; line-height: 1;
  color: #fff; background: var(--maroon);
  padding: 6px 12px; border-radius: 3px; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.article-cat:hover { background: var(--red); color: #fff; transform: translateY(-1px); }

.hero-figure { margin: 0; }
.article .hero { width: 100%; height: auto; border-radius: 6px; display: block; }
.article .caption { font-family: var(--sans); font-size: 12px; color: var(--muted-2); margin-top: 5px; }
/* One meta box: byline on the left, bookmark/share icons hard right. */
.article-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin: 14px 0;
}
.byline {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap; min-width: 0;
  font-family: var(--sans); font-size: 12px; color: var(--muted);
}
.article-body { font-size: 16px; line-height: 1.8; }
.article-body p { margin: 0 0 16px; text-align: justify; }
.article-body img { border-radius: 6px; margin: 16px 0; }
.article-body h2, .article-body h3 { font-family: var(--serif); margin: 24px 0 10px; }
.keywords-title {
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted-2); margin: 24px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid #eee3cc;
}
.keywords { margin: 10px 0 24px; display: flex; flex-wrap: wrap; gap: 8px; }
.keywords .pill {
  font-family: var(--sans); font-size: 11px; background: #f0ece2; color: #6b5b2a;
  padding: 5px 12px; border-radius: 14px;
}

/* Article actions — icon-only, pinned to the right of the .article-meta box.
   Share opens the site-wide share popup instead of a row of per-app icons. */
.action-bar { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.action-bar .bookmark-btn,
.action-bar .action-share {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.action-bar .bookmark-btn { color: var(--gold); }
.action-bar .bookmark-btn.saved { color: var(--red); }
.action-bar .action-share { color: var(--maroon); }
.action-bar .bookmark-btn:hover,
.action-bar .action-share:hover { background: #f0ece2; }
.bookmark-btn { background: none; border: 0; font: inherit; color: var(--gold); cursor: pointer; }
.bookmark-btn.saved { color: var(--red); }

/* trending sidebar */
.trending .t-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.trending .rank { font-family: var(--serif); font-size: 30px; font-weight: 700; color: #e0c9a0; line-height: 1; flex-shrink: 0; width: 34px; }
.trending h4 { font-size: 13px; font-weight: 700; margin: 0; line-height: 1.35; }

/* In-Brief sidebar (article pages) — text-only, no images */
/* Trending Now (article sidebar) — plain text list, no cards and no dividers.
   Each headline is bulleted with a live dot (same pulse as the Breaking bar). */
.tn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.tn-item { display: flex; align-items: flex-start; gap: 9px; }
.tn-dot {
  width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(192, 57, 43, .6);
  animation: breaking-pulse 1.8s ease-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .tn-dot { animation: none; }
}
.tn-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tn-label {
  align-self: flex-start;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--maroon);
  background: rgba(90, 10, 10, .07); border-radius: 3px; padding: 1px 6px;
}
.tn-text { font-size: 13.5px; line-height: 1.45; color: var(--ink, #1a1a1a); }
.tn-link { text-decoration: none; transition: color .15s; }
.tn-link:hover { color: var(--maroon); }
.tn-all {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--maroon); text-decoration: none;
}
.tn-all:hover { color: var(--red); }

/* "More News" card grids (bottom of article + listing pages) */
.more-news { margin-top: 22px; padding-top: 8px; border-top: 2px solid var(--line); }
.more-news .mn-block { margin-top: 20px; }
.more-news .mn-block .section-title a { color: inherit; text-decoration: none; }
.more-news .mn-block .section-title a:hover { color: var(--maroon); }
/* Fixed 3-up columns so 1 or 2 cards stay left-aligned at a third-width each
   (instead of a lone card stretching to fill the whole row). */
.more-news .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.more-news .grid > * { flex: none; min-width: 0; }
@media (max-width: 700px) { .more-news .grid { grid-template-columns: 1fr; } }
.subscribe-box {
  background: linear-gradient(160deg, var(--maroon), var(--maroon-2));
  color: #fff; padding: 18px; border-radius: 8px; margin: 16px 0; text-align: center;
}
.subscribe-box .label { color: var(--gold-bright); font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
.subscribe-box h4 { font-size: 18px; margin: 8px 0; }

/* ---------- Buttons ---------- */
.btn { display: inline-block; font-family: var(--sans); font-size: 13px; font-weight: 700;
  padding: 9px 18px; border-radius: 4px; cursor: pointer; border: 0; text-align: center; }
.btn-maroon { background: var(--maroon); color: #fff; }
.btn-gold { background: var(--gold-bright); color: var(--charcoal); }
.btn-light { background: #fff; color: var(--maroon); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid #fff; }

/* ---------- Premium / paywall ---------- */
.prime-hero { background: var(--charcoal); color: #fff; padding: 36px 28px; border-radius: 8px; margin-bottom: 16px; }
.prime-hero .label { color: var(--gold-bright); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 2px; }
.prime-hero h1 { font-size: 30px; margin: 10px 0 8px; }
.prime-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--charcoal); color: var(--gold-bright);
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  padding: 6px 14px; border-radius: 20px;
}
.prime-card { display: flex; gap: 20px; border: 1px solid var(--cream); border-radius: 8px; padding: 18px; margin-bottom: 16px; background: #fff; min-height: 240px; align-items: center; }
/* The image link is a fixed-basis flex item so the image renders at a proper size
   (a percentage width on the <img> would resolve against a collapsed <a> and shrink
   it to a thumbnail). The <img> then simply fills that link box. */
.prime-card > a { flex: 0 0 320px; max-width: 40%; display: block; }
.prime-card > a img { width: 100%; height: auto; border-radius: 6px; display: block; }
.prime-card .cat { font-family: var(--sans); font-size: 11px; color: var(--gold); font-weight: 700; }

/* ---------- Home: EP Prime highlight ---------- */
/* The only paid block on an otherwise free page, so it's set apart with the
   premium charcoal+gold language rather than a tinted box: a gold cap rule, a
   gem badge, a lifted panel, and gold-topped cards. */
.prime-home {
  position: relative; margin: 40px 0 18px; padding: 26px 24px 24px;
  border: 1px solid #e8dcc0; border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, #fdfaf3 0%, #fff 55%);
  box-shadow: 0 6px 22px -12px rgba(90, 10, 10, .22);
}
/* Gold cap across the top edge — the section's "premium" marker. */
.prime-home::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--maroon) 0%, var(--gold) 45%, var(--gold-bright) 70%, var(--gold) 100%);
}
.prime-home-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.prime-home-title {
  font-family: var(--serif); font-size: 24px; font-weight: 700; margin: 0;
  color: var(--maroon); letter-spacing: .2px;
}
.prime-home .prime-badge { font-size: 10px; padding: 5px 12px; }
.prime-home .prime-badge i { color: var(--gold-bright); font-size: 11px; }
/* CTA sits hard right on desktop, and simply wraps under the badge on mobile. */
.prime-home-all {
  margin-left: auto; font-family: var(--sans); font-size: 12px; font-weight: 700;
  color: var(--maroon); text-decoration: none; letter-spacing: .3px;
  display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 1px solid transparent; transition: color .2s, border-color .2s;
}
.prime-home-all:hover { color: var(--gold); border-bottom-color: var(--gold); }
/* Cards read as premium: gold top edge, deeper lift on hover.
   NB: no `overflow:hidden` here. .grid-3 children are `flex:1 1 0`, and when the
   grid stacks to a column on mobile that basis is a HEIGHT of 0 — only the
   automatic minimum size keeps the card open, and `overflow:hidden` switches that
   off, collapsing every card to its border. Round the thumb instead of clipping. */
.prime-home-grid .card {
  border: 1px solid #eee3cc; border-top: 3px solid var(--gold); border-radius: 8px;
  background: #fff; transition: transform .2s ease, box-shadow .2s ease;
}
.prime-home-grid .card .thumb { border-radius: 5px 5px 0 0; }
.prime-home-grid .card:hover { transform: translateY(-4px); box-shadow: 0 14px 28px -14px rgba(0, 0, 0, .35); }
@media (max-width: 760px) {
  .prime-home { padding: 20px 14px 18px; }
  .prime-home-title { font-size: 20px; }
  .prime-home-all { margin-left: 0; }
}
.paywall {
  background: var(--charcoal); color: #fff; border-radius: 10px; text-align: center;
  padding: 32px 24px; margin: 24px 0;
}
.paywall .lock { font-size: 26px; color: var(--gold-bright); }
.paywall .label { color: var(--gold-bright); font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: 1px; margin: 8px 0; }
.paywall h3 { font-size: 21px; margin: 6px 0 10px; }
.paywall .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.fade-teaser { max-height: 300px; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%); mask-image: linear-gradient(to bottom, black 30%, transparent 100%); }

/* ---------- Membership / pricing page ---------- */
.membership-page { background: #fdf6f1; padding: 8px 20px 40px; }
.mem-stepper {
  display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap;
  padding: 20px 0 10px; font-family: var(--sans); font-size: 12px; color: var(--muted-2);
}
.mem-stepper .step { display: inline-flex; align-items: center; gap: 8px; }
.mem-stepper .dot {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid #d3c4b4;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted-2);
}
.mem-stepper .step.active { color: var(--maroon); font-weight: 700; }
.mem-stepper .step.active .dot { background: var(--maroon); border-color: var(--maroon); color: #fff; }

.mem-hero { text-align: center; max-width: 640px; margin: 22px auto 34px; }
.mem-eyebrow { font-family: var(--sans); font-size: 11px; letter-spacing: 2px; color: var(--gold); font-weight: 700; margin-bottom: 12px; }
.mem-hero h1 { font-family: var(--serif); font-size: 38px; color: var(--charcoal); margin: 0 0 14px; }
.mem-hero p { font-size: 15px; color: var(--muted); line-height: 1.7; margin: 0; }

.plans-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1100px; margin: 0 auto 50px;
}
.plan-card {
  position: relative; background: #fff; border: 1px solid var(--cream);
  border-radius: 12px; padding: 26px 22px; display: flex; flex-direction: column;
}
.plan-card.featured { border-color: var(--maroon); box-shadow: 0 10px 30px rgba(90,10,10,.12); }
.plan-tag {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--maroon); color: #fff; font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: 1px; padding: 4px 12px; border-radius: 12px; white-space: nowrap;
}
.plan-name { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 14px; }
.plan-price { font-family: var(--serif); font-size: 34px; font-weight: 700; color: var(--charcoal); line-height: 1; }
.plan-gst { font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted-2); }
.plan-valid { font-family: var(--sans); font-size: 12px; color: var(--muted); margin: 8px 0 18px; }
.plan-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.plan-features li { font-size: 13px; color: #444; padding: 7px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.4; }
.plan-features li i { color: var(--maroon); font-size: 14px; flex-shrink: 0; }
.plan-features li.lead-feature { font-weight: 700; color: var(--charcoal); }
.plan-features li.lead-feature i { color: var(--gold); }
.plan-btn { width: 100%; padding: 11px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.plan-btn-outline { background: #fff; color: var(--maroon); border: 1px solid var(--maroon); }
.plan-btn-outline:hover { background: var(--maroon); color: #fff; }
.plan-btn-maroon { background: var(--maroon); color: #fff; border: 1px solid var(--maroon); }
.plan-btn-maroon:hover { filter: brightness(1.12); }
.plan-btn-gold { background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #3a2a00; border: 0; }
.plan-btn-gold:hover { filter: brightness(1.06); }

.mem-section { max-width: 980px; margin: 0 auto 44px; }
.mem-section-title { font-family: var(--serif); font-size: 26px; color: var(--maroon); text-align: center; margin: 0 0 28px; }
.advantage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.advantage { display: flex; gap: 16px; }
.advantage-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: #f3e7d6; color: var(--maroon); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.advantage h3 { font-size: 16px; color: var(--charcoal); margin: 2px 0 6px; }
.advantage p { font-size: 13px; color: var(--muted); line-height: 1.6; margin: 0; }

.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { background: #fff; border: 1px solid var(--cream); border-radius: 8px; margin-bottom: 10px; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 16px 18px; font-size: 14px; font-weight: 700; color: var(--charcoal);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary i { color: var(--gold); transition: transform .2s; flex-shrink: 0; }
.faq-item[open] summary i { transform: rotate(180deg); }
.faq-answer { padding: 0 18px 16px; font-size: 13px; color: var(--muted); line-height: 1.65; }

@media (max-width: 980px) {
  .plans-grid { grid-template-columns: 1fr 1fr; }
  .advantage-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .plans-grid { grid-template-columns: 1fr; }
  .mem-hero h1 { font-size: 30px; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--maroon); color: var(--footer-text); margin-top: 24px; }
/* Centered, content-width footer: the columns sit together in the middle of the
   page (like the main content) instead of spreading across the full viewport. */
.footer-inner { max-width: 1140px; margin: 0 auto; padding: 32px 24px; display: flex; flex-wrap: wrap; gap: 32px; justify-content: center; }
.footer-col { flex: 1; min-width: 180px; }
.footer-col h5 { color: #fff; font-family: var(--sans); font-size: 13px; letter-spacing: 1px; margin: 0 0 12px; text-transform: uppercase; }
.footer-col a { display: block; color: var(--footer-text); font-size: 13px; padding: 4px 0; }
.footer-col a:hover { color: #fff; }
.footer-tagline { font-size: 13px; line-height: 1.6; }
.footer-social { display: flex; flex-wrap: wrap; gap: 14px; font-size: 18px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); text-align: center; padding: 14px; font-family: var(--sans); font-size: 12px; color: var(--footer-text); }

/* Footer link groups (Legal / Sections) — collapsible dropdowns on mobile, but
   always fully expanded on desktop. Built on native <details>. */
.footer-acc-head {
  color: #fff; font-family: var(--sans); font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; margin: 0 0 12px; list-style: none; cursor: default;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.footer-acc-head::-webkit-details-marker { display: none; }
.footer-acc-chevron { display: none; }

/* ---------- Pagination ---------- */
.load-more { text-align: center; margin: 20px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1200px) {
  /* Drop the ad-rails before the main column gets too narrow to hold the
     article grid + sidebar side-by-side (was 1099px, which let the rails crush
     laptop layouts in the 1100-1200px band). */
  .ad-rail { display: none; }
  .article-aside { flex-basis: 240px; }
  /* ad rails gone — drop topbar to match shell 20px outer padding */
  .topbar-inner { padding: 0 20px; }
  .cat-lead-img img { height: 260px; }
  .cat-lead-title { font-size: 20px; }
}
@media (max-width: 760px) {
  .topbar { padding: 10px 0; }
  /* Brand and account stay on ONE row. The account is icon-only here, which frees
     enough width that "Economics Perspective" fits beside it without breaking. */
  .topbar-inner { padding: 0 14px; gap: 8px; flex-wrap: wrap; }
  .brand { min-width: 0; }
  .brand-name { font-size: 18px; }
  /* Icon-only login on mobile — the label is what used to squeeze the title. */
  .auth-btn span { display: none; }
  .auth-btn { padding: 8px 11px; }
  .auth-btn i { font-size: 18px; }

  /* Nav is one horizontally scrollable row (no burger, no collapsing). */
  .mainnav-inner {
    display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center;
    gap: 18px; padding: 12px 14px;
    overflow-x: auto; overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mainnav-inner::-webkit-scrollbar { display: none; }
  .mainnav-inner > * { flex: 0 0 auto; white-space: nowrap; }

  .grid, .article-grid { flex-direction: column; }
  .article-aside { position: static; flex-basis: auto; }
  .lead-card .thumb { height: auto; }
  .row-item { flex-direction: column; align-items: stretch; min-height: auto; }
  .row-item > a { flex: 0 0 auto; max-width: none; }
  .row-item img { width: 100%; height: auto; }
  /* Stacked card: the bookmark/share buttons overlay the image's top-right corner,
     not the headline beside it — so drop the 88px right padding and let the title
     use the full width (matching the no-actions cards, e.g. the bookmarks page).
     Same reasoning for the stacked cat-lead (Explained/Editorial) and prime-card
     (EP Prime) leads. NB: .audio-card is intentionally excluded — it has no image,
     so its buttons DO sit over the text and the 88px padding is still needed. */
  .row-item.has-actions > .row-body > .kicker,
  .row-item.has-actions > .row-body > h3,
  .cat-lead.has-actions .cat-kicker,
  .cat-lead.has-actions .cat-lead-title,
  .prime-card .cat,
  .prime-card h3 { padding-right: 0; }
  .prime-card { flex-direction: column; align-items: stretch; min-height: auto; }
  .prime-card > a { flex: none; max-width: none; width: 100%; align-self: stretch; }
  .prime-card > a img { width: 100%; max-width: none; height: auto; }
  .footer-inner { flex-direction: column; gap: 16px; }
  /* Legal / Sections collapse into tap-to-open dropdowns on mobile. */
  .footer-acc { border-top: 1px solid rgba(255,255,255,.12); }
  .footer-acc-head { cursor: pointer; margin: 0; padding: 12px 0; }
  .footer-acc-chevron { display: inline-block; font-size: 12px; transition: transform .2s ease; }
  .footer-acc[open] .footer-acc-head { margin-bottom: 4px; }
  .footer-acc[open] .footer-acc-chevron { transform: rotate(180deg); }
  .footer-acc-body { padding-bottom: 8px; }
  /* Clear gap between the Sections group and Follow Us (the last, plain column). */
  .footer-inner > .footer-col:last-child { margin-top: 36px; }
  .footer-inner > .footer-col:last-child h5 { margin-bottom: 14px; }
  .cat-lead { flex-direction: column; }
  .cat-lead-img { flex: none; }
  .cat-lead-img img { height: auto; }
  /* One story at a time on mobile: every listing that uses .cat-grid (Explained,
     Editorial, Blog, Brief) stacks its cards single-file rather than pairing them
     two to a row. Desktop keeps the 3-column grid. */
  .cat-grid { grid-template-columns: 1fr; gap: 18px; }

  /* Article meta on a phone: the byline and the action bar used to be two tall
     bands that ate the first screen. They are one compact row now — author/date
     left, icons right — so the story starts sooner. */
  .article-meta { padding: 6px 0; margin: 10px 0; }
  .byline { gap: 4px 10px; font-size: 11.5px; }
  .article .caption { font-size: 11px; margin-top: 4px; }
  .article h1 { font-size: 24px; margin: 4px 0 10px; }
  /* Breaking headlines wrap onto as many lines as they need rather than being cut
     off mid-sentence with an ellipsis — there's no room for one line on a phone.
     The copy is already capped at 30 words server-side, so it stays short. */
  .breaking { align-items: flex-start; }
  .breaking .ticker { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
  .breaking-arrow { margin-top: 3px; }
  .breaking-head h2 { font-size: 18px; }
  .blog-hero { aspect-ratio: 970 / 486; }
  .blog-hero .blog-overlay h2 { font-size: 20px; }
  .blog-cards { grid-template-columns: 1fr; gap: 16px; }
  .blog-ocard { aspect-ratio: 970 / 486; }
  /* Home: when article-grid stacks, the aside's inline flex:0 0 410px would
     become a fixed 410px HEIGHT in column flow and its content overflows onto
     the articles. Reset both columns to size by content, full width. */
  .article-grid { flex-direction: column; gap: 24px; }
  /* Unwrap the two columns so their sections become direct flex items of
     .article-grid and can be reordered with `order`. */
  .article-col,
  .home-aside { display: contents; }
  /* Mobile order: Latest Explained, World News, News in Brief, Monthly Edition,
     then Go Premium. (Monthly Edition is shown only after the briefs.) */
  .hsec-explained { order: 1; }
  .hsec-worldnews { order: 2; }
  .hsec-briefs    { order: 3; flex: 0 0 auto; min-height: 0; margin-top: 4px; }
  .hsec-monthly   { order: 4; }
  .hsec-premium   { order: 5; }
  .hsec { width: 100%; }
  /* News in Brief scrolls horizontally on mobile. */
  .hsec-briefs .brief-vscroll {
    flex-direction: row; flex: none; min-height: 0;
    overflow-x: auto; overflow-y: hidden;
    padding: 2px 2px 10px; scroll-snap-type: x proximity;
    /* Only claim HORIZONTAL swipes — a vertical swipe (even starting on a brief
       card) falls through to the page so you can scroll to the next section.
       overscroll-behavior-x keeps the horizontal scroll from chaining to the page. */
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .hsec-briefs .brief-vscroll::-webkit-scrollbar { height: 6px; width: auto; }
  /* Wide cards: one brief fills the row (with a small peek of the next) so it's
     read one at a time as you swipe. */
  .hsec-briefs .brief-vscroll .brief-chip { flex: 0 0 86vw; width: 86vw; max-width: 380px; scroll-snap-align: start; }
  /* Featured lead rows: drop the tall min-height so stacked cards don't overlap. */
  .row-item-feature { min-height: auto; }
  .row-item-feature img { width: 100%; height: auto; }
  /* World News: the 3 non-lead items become compact horizontal rows on mobile
     (small image left, heading right, no description). The lead item above is
     untouched. */
  .wn-mini { gap: 14px; }
  .wn-mini .card { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; }
  .wn-mini .card > a { flex: 0 0 118px; }
  .wn-mini .card .thumb { width: 118px; height: auto !important; border-radius: 8px; }
  .wn-mini .card .body { padding: 0; }
  .wn-mini .card .kicker { margin-bottom: 3px; }
  .wn-mini .card h3 { font-size: 15px; line-height: 1.3; margin: 0; }
  .wn-mini .card .body p { display: none; }
}

/* Very narrow phones (≤380px): the full-size brand + account no longer fit on one
   row, so scale the brand down rather than let anything wrap or the title break. */
@media (max-width: 380px) {
  .topbar-inner { padding: 0 10px; }
  .brand { gap: 8px; }
  .brand img { height: 32px; }
  .brand-name { font-size: 15px; letter-spacing: .2px; }
  .auth-btn { padding: 7px 9px; }
}

/* ---------- Mobile sticky anchor ads (top + bottom, static on scroll) ---------- */
.m-anchor { display: none; }
@media (max-width: 760px) {
  .m-anchor {
    position: fixed; left: 0; right: 0; z-index: 400;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 66px; background: #eeece7; padding-top: 13px;
  }
  /* "Advertisement" label pinned in the top strip, above the ad. */
  .m-anchor::before {
    content: "Advertisement";
    position: absolute; top: 3px; left: 0; right: 0; text-align: center;
    font-family: var(--sans); font-size: 8px; font-weight: 600;
    letter-spacing: 1px; text-transform: uppercase; color: #a29d92;
  }
  .m-anchor-top    { top: 0;    box-shadow: 0 2px 10px rgba(0,0,0,.12); }
  .m-anchor-bottom { bottom: 0; box-shadow: 0 -2px 10px rgba(0,0,0,.12); }
  .m-anchor .ad-box { min-height: 50px; }
  .m-anchor-closed { display: none; }
  /* Reserve space so the fixed bars never overlap the header/footer, and drop
     the sticky header below the top bar. (66px = 50px ad + label strip.)
     Only for readers who actually get the anchor ads — premium/staff (body.ad-free)
     see no bars, so their header stays flush at the very top. */
  body:not(.ad-free) { padding-top: 66px; padding-bottom: 66px; }
  body:not(.ad-free) .site-header { top: 66px; }
  body.m-anchor-top-off { padding-top: 0; }
  body.m-anchor-top-off .site-header { top: 0; }
  body.m-anchor-bottom-off { padding-bottom: 0; }
  /* Close button sits beside the 320px ad, centered on the ad row (below the label). */
  .m-anchor-close {
    position: absolute; right: 4px; top: 40px; transform: translateY(-50%);
    width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(0,0,0,.55); color: #fff;
    font-size: 15px; line-height: 22px; cursor: pointer; z-index: 1;
  }
}

/* ---------- Ad gate (every-5-min interstitial for non-premium readers) ---------- */
.adgate { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.adgate[hidden] { display: none; }
.adgate-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.adgate-card {
  position: relative; z-index: 1; width: 100%; max-width: 380px; text-align: center;
  max-height: 92vh; overflow-y: auto;
  background: #fff; border-radius: 12px; padding: 22px 24px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
  animation: adgatePop .22s ease;
}
@keyframes adgatePop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.adgate-x { position: absolute; top: 8px; right: 12px; background: none; border: 0; font-size: 26px; line-height: 1; color: #999; cursor: pointer; }
.adgate-x:hover { color: var(--maroon); }
.adgate-eyebrow { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 1.2px; color: var(--red); }
.adgate-title { font-family: var(--serif); color: var(--maroon); font-size: 21px; margin: 6px 0; }
.adgate-sub { font-size: 13px; color: #555; margin: 0 0 16px; line-height: 1.5; }
.adgate-ad { display: flex; justify-content: center; margin-bottom: 18px; }
.adgate-ad .ad-box { min-height: 0; }   /* dev placeholder respects its 300x250 box */
.adgate-actions { display: flex; flex-direction: column; gap: 10px; }
.adgate-btn { width: 100%; }
.adgate-continue { width: 100%; background: #eee; color: #333; border: 1px solid #ddd; }
.adgate-continue:disabled { opacity: .75; cursor: not-allowed; }
.adgate-continue:not(:disabled) { background: var(--charcoal); color: #fff; border-color: var(--charcoal); cursor: pointer; }

/* ===== Home: Latest Audio Edition (two Spotify cards side by side) ===== */
.audio-home-wrap { margin-top: 24px; }
.audio-home { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; }
.audio-home-card { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.10); position: relative; }
.audio-home-card iframe { display: block; width: 100%; border: 0; }
@media (max-width: 700px) { .audio-home { grid-template-columns: 1fr; } }

/* Reload button on a Spotify player — Spotify's own embed backend occasionally
   returns "upstream request timeout" for a given episode; this lets a reader
   retry that one player instantly instead of reloading the whole page. */
.audio-player { position: relative; }
.spotify-retry {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 26px; height: 26px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%;
  background: rgba(0,0,0,.4); color: #fff; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.spotify-retry:hover { background: rgba(0,0,0,.65); }
.spotify-retry .bi { transition: transform .4s ease; }
.spotify-retry.spinning .bi { transform: rotate(360deg); }

/* ===== Home: admin-managed promo banner (2:1) at the end of the page ===== */
.home-banner { display: block; margin-top: 24px; border-radius: 10px; overflow: hidden; }
.home-banner img { width: 100%; height: auto; display: block; }

/* ===== Home: Our Latest Blog =====
   Reuses the /blog listing's own components (.blog-hero + .blog-cards on desktop,
   .cat-lead + .cat-grid on mobile), so there is nothing home-specific to style —
   the .blog-view-desktop / .blog-view-mobile switch above drives it. */