/* =========================================================
   Celebrities Arena — Core Stylesheet
   Palette: blue (primary/interactive) + yellow (highlight)
   over neutral base (#262626 ink, #f2f2f2 surface, black, white).
   Helvetica throughout.
   ========================================================= */

:root {
  --black: #000000;
  --white: #ffffff;

  /* Single accent: red (from the logo). No blue/yellow. */
  --red: #e0000f;
  --red-dark: #b3000c;        /* hover / pressed */
  --red-tint: #fdeaec;        /* light wash */
  /* legacy aliases kept pointing at red so nothing references blue/yellow */
  --blue: #e0000f;
  --blue-dark: #b3000c;
  --blue-tint: #fdeaec;
  --yellow: #e0000f;
  --yellow-dark: #b3000c;
  --yellow-tint: #fdeaec;

  /* Neutral ramp (from #262626 → #f2f2f2) */
  --ink: #262626;
  --gray-900: #262626;
  --gray-700: #4a4a4a;
  --gray-500: #767676;
  --gray-300: #c9c9c9;
  --gray-200: #e6e6e6;
  --gray-150: #ededed;
  --gray-100: #f2f2f2;

  /* Semantic */
  --line: #e6e6e6;           /* thin hairline dividers */
  --surface: #f2f2f2;        /* light chip/panel fill */

  --maxw: 1240px;
  --gutter: 12px;            /* halved from 24px */
  --header-h: 108px;

  /* 3px only on buttons, form fields and chips. Ads, category tags,
     section markers and image placeholders stay pointed (radius removed). */
  --radius: 3px;
  --radius-sm: 3px;

  /* Motion: smooth, slightly elastic. Used site-wide. */
  --ease: cubic-bezier(.22, 1, .36, 1);            /* smooth settle */
  --ease-elastic: cubic-bezier(.34, 1.42, .64, 1); /* gentle overshoot */
  --dur: .34s;
  --dur-slow: .55s;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* =========================================================
   HEADER
   ========================================================= */
/* Announcement bar + header stick together at the top */
.site-top {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
}
.site-header {
  background: var(--white);
}

.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  max-width: var(--maxw);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.brand__logo {
  height: 30px;
  width: auto;
  display: block;
}

.brand__mark {
  width: 34px;
  height: 34px;
  border: 2px solid var(--black);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.brand__mark::after {
  content: "";
  position: absolute;
  inset: 7px;
  background: var(--black);
  border-radius: 50%;
}

.brand__name {
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.header-utility {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-700);
}

/* Excludes the Subscribe/Submit button, which keeps white text on its red fill */
.header-utility button:not(.utility-link):hover { color: var(--black); }

/* ---------- Primary nav ---------- */
.nav {
  border-top: 1px solid var(--gray-200);
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 0;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.nav__list {
  list-style: none;
  margin: 0;
  /* pull the first pill's edge flush with the logo above it */
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.nav__item { position: relative; }

/* Pill buttons */
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--black);
  background: var(--gray-100);
  border-radius: 3px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__link:hover,
.nav__item:hover > .nav__link {
  background: var(--gray-200);
}
.nav__link.is-active {
  background: var(--blue);
  color: var(--white);
}

.nav__caret {
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur) var(--ease-elastic);
}
.nav__item.is-open .nav__caret { transform: rotate(-135deg) translateY(-2px); }

/* Dropdown — a rounded panel matching the nav pill background */
.nav__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 190px;
  background: var(--gray-100);
  border: none;
  border-radius: 3px;
  list-style: none;
  margin: 0;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-elastic), visibility var(--dur);
  z-index: 20;
}
/* transparent bridge so the pointer can cross the gap without closing */
.nav__dropdown::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}
.nav__item.is-open .nav__dropdown,
.nav__item:hover .nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav__dropdown a {
  display: block;
  padding: 9px 14px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--black);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__dropdown a:hover { background: var(--black); color: var(--white); }

/* Mobile toggle */
/* Hamburger — lives in the top bar, shown only on small screens */
.nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-right: -8px; /* optically flush with the page gutter */
  padding: 0;
  border: none;
  background: none;
  color: var(--black);
  cursor: pointer;
  flex: 0 0 auto;
}
.nav__toggle-bars {
  position: relative;
  display: block;
  width: 22px; height: 2px;
  background: var(--black);
  transition: background var(--dur) var(--ease);
}
.nav__toggle-bars::before,
.nav__toggle-bars::after {
  content: "";
  position: absolute; left: 0;
  width: 22px; height: 2px;
  background: var(--black);
  transition: transform var(--dur-slow) var(--ease-elastic);
}
.nav__toggle-bars::before { top: -7px; }
.nav__toggle-bars::after { top: 7px; }
/* bars fold into an X while the menu is open */
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   PLACEHOLDER IMAGE SHAPES
   ========================================================= */
.ph {
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--gray-100),
      var(--gray-100) 14px,
      var(--gray-200) 14px,
      var(--gray-200) 28px
    );
  border: none;
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 46px; height: 46px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gray-500);
  border-radius: 50%;
}
.ph::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  transform: translate(-45%, -50%);
  border-left: 14px solid var(--gray-500);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  z-index: 1;
}
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--4x3  { aspect-ratio: 4 / 3; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--21x9 { aspect-ratio: 21 / 9; }

/* =========================================================
   HERO / MAIN STORY
   ========================================================= */
.hero {
  padding: 40px 0 48px;
  border-bottom: 1px solid var(--gray-200);
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 40px;
  align-items: start;
}
.hero__media { width: 100%; }
.hero__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  padding: 6px 12px;
  margin-bottom: 18px;
}
.hero__title {
  font-size: clamp(30px, 4.4vw, 54px);
  line-height: 1.02;
  margin-bottom: 18px;
}
.hero__title em {
  font-style: italic;
  font-weight: 700;
}
.hero__dek {
  font-size: 17px;
  color: var(--gray-700);
  max-width: 46ch;
  margin-bottom: 22px;
}
.hero__meta {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* =========================================================
   SECTION HEADINGS
   ========================================================= */
.section {
  padding: 44px 0;
  border-bottom: 1px solid var(--gray-200);
}
.section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}
.section__title {
  font-size: clamp(24px, 3vw, 34px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.section__title::before {
  content: "";
  width: 12px; height: 26px;
  background: var(--red);
  display: inline-block;
}

/* =========================================================
   TOP STORIES CAROUSEL
   ========================================================= */
.carousel__controls {
  display: flex;
  gap: 10px;
}
.carousel__btn {
  width: 46px; height: 46px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.carousel__btn:hover { background: var(--blue); color: var(--white); }
.carousel__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.carousel__btn:disabled:hover { background: var(--surface); color: var(--ink); }
.carousel__btn svg { width: 18px; height: 18px; }

.carousel__viewport {
  overflow: hidden;
}
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 24px) / 4);
  gap: 24px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.story-card { display: block; }
.story-card__media { margin-bottom: 14px; }
.story-card__rank {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  font-size: 14px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
}
.story-card__kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
  display: block;
}
.story-card__title {
  font-size: 18px;
  line-height: 1.16;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* extra room at the bottom so the 2nd-line hover underline isn't clipped */
  padding-bottom: 4px;
  /* Cap at two lines. Deliberately no min-height: reserving two lines pushed the
     timestamp away from any headline that only ran to one line. */
  max-height: calc(2 * 1.16em + 4px);
}
/* Animated left-to-right underline on story titles (see .u-anim block) */
.story-card__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* =========================================================
   FULL-WIDTH AD BANNER
   ========================================================= */
.ad-banner {
  width: 100%;
  background: var(--gray-100);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 28px var(--gutter);
}
.ad-banner__inner {
  max-width: var(--maxw);
  margin: 0 auto;
}
.ad-banner__label {
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gray-500);
  text-align: center;
  margin-bottom: 10px;
}
.ad-banner__slot {
  position: relative;
  height: 160px;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--gray-100),
      var(--gray-100) 14px,
      var(--gray-200) 14px,
      var(--gray-200) 28px
    );
  border: 1px solid var(--gray-300);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-banner__slot span {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gray-500);
  background: var(--white);
  padding: 8px 16px;
  border: 1px solid var(--gray-300);
}

/* =========================================================
   PAGE HEADER (interior/stub pages)
   ========================================================= */
.page-head {
  padding: 44px 0 28px;
  border-bottom: 1px solid var(--line);
}
.page-head__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 14px;
  display: block;
}
.page-head__title {
  font-size: clamp(26px, 3.4vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.page-head__dek {
  margin-top: 16px;
  font-size: 18px;
  color: var(--gray-700);
  max-width: 60ch;
}

/* Cleaner interior headers: no descriptor lines, no divider (except Spotlight) */
.page-head:not(.page-head--spotlight) {
  border-bottom: none;
}
.page-head:not(.page-head--spotlight) .page-head__dek,
.page-head:not(.page-head--spotlight) .page-head__tagline {
  display: none;
}
.page-head--spotlight .page-head__title {
  font-size: clamp(34px, 6vw, 68px);
}

.stub {
  padding: 64px 0 80px;
}
.stub__note {
  border: 2px dashed var(--gray-300);
  padding: 40px;
  text-align: center;
  color: var(--gray-500);
  font-size: 15px;
  letter-spacing: 0.02em;
}
.stub__note strong { color: var(--black); }

/* Simple article grid for interior pages */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 24px;
  margin-top: 40px;
}

/* =========================================================
   ABOUT / CONTACT CONTENT
   ========================================================= */
.prose {
  max-width: 72ch;
  padding: 48px 0 72px;
  font-size: 17px;
}
.prose p { margin: 0 0 20px; color: var(--gray-900); }
.prose h2 {
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 44px 0 14px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.prose-sub {
  font-size: 18px;
  margin: 26px 0 8px;
  letter-spacing: 0;
}

.prose-list {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
}
.prose-list li {
  position: relative;
  padding: 0 0 16px 26px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--gray-200);
  color: var(--gray-900);
}
.prose-list li:last-child { border-bottom: none; }
.prose-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 10px;
  height: 10px;
  background: var(--black);
}
.prose-list strong { font-weight: 700; }

.prose-callout {
  background: var(--black);
  color: var(--white);
  padding: 32px 36px;
  margin: 40px 0;
}
.prose-callout__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-300);
  margin-bottom: 12px;
}
.prose-callout p {
  margin: 0;
  color: var(--white);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.prose .btn { margin-top: 6px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  padding: 48px 0 72px;
}
.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  padding: 13px 15px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
}
.field input:focus,
.field textarea:focus { outline: none; }
.field textarea { min-height: 140px; resize: vertical; }
.btn {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 13px;
  padding: 14px 30px;
  border: none;
  border-radius: var(--radius);
  transition: background var(--dur) var(--ease);
}
.btn:hover { background: var(--blue-dark); }

.contact-info dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 20px;
}
.contact-info dd { margin: 4px 0 0; font-size: 16px; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--gray-700);
}
.footer-brand__name {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-brand p {
  color: var(--gray-300);
  font-size: 14px;
  max-width: 34ch;
}
.footer-col h4 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 14px;
  color: var(--white);
}
.footer-col a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding-top: 24px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--gray-500);
  text-transform: uppercase;
}
.footer-sep {
  color: var(--gray-300);
  user-select: none;
}
.footer-credit {
  text-transform: none;
  letter-spacing: 0;
}
.footer-credit a {
  color: var(--gray-300);
  text-decoration: underline;
}
.footer-credit a:hover { color: var(--white); }

@media (max-width: 640px) {
  .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .carousel__track { grid-auto-columns: calc((100% - 2 * 24px) / 3); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 24px; }
  .carousel__track { grid-auto-columns: calc((100% - 24px) / 2); }
  .article-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }

  .nav__toggle { display: inline-flex; align-items: center; }
  .nav__list {
    display: none;
    width: 100%;
    padding-bottom: 14px;
  }
  .nav__list.is-open { display: flex; flex-wrap: wrap; gap: 8px; }
  .nav__inner { flex-wrap: wrap; }
  .nav__item { width: auto; }
  .nav__dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    border: none;
    border-left: 3px solid var(--black);
    margin: 0 0 6px 18px;
    display: none;
  }
  .nav__item.is-open .nav__dropdown { display: block; }
}

@media (max-width: 560px) {
  .carousel__track { grid-auto-columns: calc((100% - 24px) / 1.15); }
  .article-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .utility-link { display: none; }
}

/* =========================================================
   SEARCH (header)
   ========================================================= */
.header-top { position: relative; }

/* Square tile, same surface fill as the header social icons */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--red); color: var(--white); }
.icon-btn svg { width: 16px; height: 16px; }

/* Subscribe / Submit: solid red button */
.utility-link {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 3px;
  background: var(--red);
  color: var(--white);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-elastic);
}
.utility-link:hover { background: var(--red-dark); color: var(--white); }
.utility-link:active { transform: scale(.97); }

/* Compact search box that slides in from the left; the brand tucks away
   behind it while open. The toggle icon (right) closes it again. */
.header-search {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%) translateX(-8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-elastic), visibility var(--dur);
  z-index: 5;
}
.header-top.is-searching .header-search {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%);
}
.header-top.is-searching .brand {
  opacity: 0;
  visibility: hidden;
}
.header-search__close {
  flex: none;
  display: inline-flex;
  color: var(--gray-500);
  padding: 4px;
  transition: color var(--dur) var(--ease);
}
.header-search__close:hover { color: var(--black); }
.header-search__close svg { width: 18px; height: 18px; }
.header-search__field {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.header-search__input {
  flex: none;
  width: 260px;
  max-width: 52vw;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 9px 36px 9px 12px;
  border: 1.5px solid var(--black);
  background: var(--white);
  color: var(--ink);
}
.header-search__input:focus { outline: none; }
.header-search__input::placeholder { color: var(--gray-500); }
.header-search__submit {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  color: var(--gray-500);
  padding: 3px;
  transition: color var(--dur) var(--ease);
}
.header-search__submit:hover { color: var(--black); }
.header-search__submit svg { width: 20px; height: 20px; }

/* =========================================================
   AD SLOTS (bare — no label, no background container)
   ========================================================= */
.ad-slot {
  /* A booked slot renders as an <a>, which is inline by default — height and
     aspect-ratio simply do not apply to inline boxes, so the slot collapsed
     and ignored its predefined size. */
  display: block;
  position: relative;
  background:
    repeating-linear-gradient(
      -45deg,
      var(--gray-100),
      var(--gray-100) 14px,
      var(--gray-200) 14px,
      var(--gray-200) 28px
    );
  border: none;
}
.ad-slot--4x3 { aspect-ratio: 4 / 3; }
.ad-slot--bleed {
  height: 300px;
}

/* The creative fills the booked space exactly — never taller, never smaller.
   The slot's size is fixed by its placement (that is why the size is quoted to
   the advertiser), so a mis-sized upload must not be allowed to stretch the
   slot and shove the page around, nor sit small leaving the placeholder
   stripes showing around it.

   The image is taken out of flow rather than sized with height:100%: the slot
   gets its height from `aspect-ratio` in one case and a fixed height in the
   other, and an in-flow child can feed its own size back into that. Absolute
   inset:0 cannot. */
/* A booked slot is exactly its sold size — never taller, never shorter.
   flex-shrink matters because .article__aside is a height-constrained flex
   column: the creative is positioned absolutely (below), so the slot has no
   in-flow content, its automatic minimum size is 0, and the sidebar squashed
   a 320x240 slot to 93px to fit the block beneath it. */
.ad-slot { overflow: hidden; flex-shrink: 0; }
.ad-slot > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;          /* beat the global img rule */
  object-fit: cover;        /* fill the slot, crop the excess, never distort */
  object-position: center;
  display: block;
}
/* A BOOKED CREATIVE IS SHOWN WHOLE.
   ---------------------------------
   The rules above size a slot to its sold dimensions and crop the artwork to
   fit (object-fit: cover). That is what clipped banners: any creative whose
   proportions differ from the slot lost its edges.

   So when a real creative is present, the width still comes from the placement
   — the slot keeps its position and never grows wider than the column it sits
   in — but the height follows the artwork's own ratio. Scaled down to fit if it
   is large, never cropped, never stretched.

   Both selectors are doubled up (.ad-slot.ad-slot--creative) so they outrank
   .ad-slot--bleed and .ad-slot--4x3 wherever those appear, including the
   smaller fixed heights inside the mobile media queries further down. That
   makes the behaviour identical on mobile without repeating it per breakpoint. */
.ad-slot.ad-slot--creative {
  height: auto;
  aspect-ratio: auto;
  background: none;        /* the artwork covers the slot; no stripes behind it */
}
.ad-slot.ad-slot--creative > img {
  position: static;        /* back in flow, so the slot takes the image's height */
  inset: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;     /* if a height is ever reintroduced, fit — never crop */
}

/* AdSense fills the slot; hide the placeholder stripes behind the loading unit.
   Google adds its own "Ads" marker to the unit it injects. */
.ad-slot--adsense { overflow: hidden; background: var(--gray-100); }
.ad-slot--adsense .adsbygoogle { display: block; width: 100%; height: 100%; min-height: 90px; }
.fullbleed-ad {
  width: 100%;
  max-width: var(--maxw);
  margin: 32px auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   LATEST / MORE NEWS
   ========================================================= */
.latest__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
}
.latest__side {
  position: sticky;
  /* sits flush below the sticky topbar so its top isn't cropped */
  top: var(--topbar-h, 160px);
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.news-list { display: block; }
.news-item {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  padding: 26px 0;
  border-top: 1px solid var(--gray-200);
  align-items: start;
}
.news-list > .news-item:first-child { border-top: none; padding-top: 0; }
.news-item.is-hidden,
.news-item.is-filtered { display: none; }
.news-item__media { width: 100%; }
.news-item__body { min-width: 0; }
.news-item__kicker {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}
.news-item__title {
  font-size: 22px;
  line-height: 1.16;
  margin-bottom: 10px;
}
/* animated underline handled in .u-anim block */
.news-item__dek {
  font-size: 15px;
  color: var(--gray-700);
  margin-bottom: 12px;
  max-width: 62ch;
}
.news-item__meta {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}

/* Sidebar blocks */
.side-block__title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.trending {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: trend;
}
.trending li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--gray-200);
}
.trending li:last-child { border-bottom: none; }
.trending li::before {
  counter-increment: trend;
  content: counter(trend);
  font-weight: 700;
  font-size: 22px;
  line-height: 1;
  color: var(--gray-300);
  flex: none;
  width: 22px;
}
.trending a {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.trending a { text-decoration: none; }

/* Search info + empty state */
.search-info {
  display: none;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--gray-700);
  padding: 2px 0 22px;
}
.search-info.is-active { display: block; }
.news-empty {
  display: none;
  padding: 36px 0;
  text-align: center;
  color: var(--gray-500);
  font-size: 15px;
  border: 2px dashed var(--gray-300);
}
.news-empty.is-active { display: block; }

/* Load more */
.loadmore { text-align: center; padding-top: 40px; }
.loadmore .btn[hidden] { display: none; }

/* Responsive: news */
@media (max-width: 900px) {
  .latest__layout { grid-template-columns: 1fr; gap: 40px; }
  .latest__side {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .latest__side > .side-block { flex: 1 1 260px; }
}
@media (max-width: 560px) {
  .news-item { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
  .news-item__title { font-size: 17px; }
  .news-item__dek { display: none; }
  .header-search__input { width: 190px; font-size: 13px; padding: 8px 32px 8px 10px; }
  .latest__side { flex-direction: column; }
  .ad-slot--bleed { height: 160px; }
}

/* =========================================================
   SECTION-PAGE PERSONALITY
   ========================================================= */
/* A short kicker line that gives each beat its own voice */
.page-head__tagline {
  display: block;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.page-head__tagline::before {
  content: "";
  display: inline-block;
  width: 26px;
  height: 2px;
  background: var(--black);
  vertical-align: middle;
  margin-right: 12px;
}

/* The Spotlight — an inverted, editorial marquee for emerging talent */
.page-head--spotlight {
  background: var(--black);
  color: var(--white);
  border-bottom: none;
  padding: 72px 0 64px;
}
.page-head--spotlight .page-head__title { color: var(--white); }
.page-head--spotlight .page-head__dek { color: var(--gray-300); max-width: 64ch; }
.spotlight-kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  border: 1px solid var(--gray-700);
  padding: 7px 14px;
  margin-bottom: 22px;
}
.spotlight-kicker .dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--white);
  margin-right: 9px;
  vertical-align: middle;
}

/* Featured emerging-talent profile card */
.profile-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--black);
  color: var(--white);
  padding: 6px 12px;
  margin-bottom: 16px;
}

/* =========================================================
   ARTICLE / STORY PAGE
   ========================================================= */
.article { padding: 44px 0 8px; }
.article__container {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.article__media {
  max-width: 980px;
  margin: 32px auto 8px;
  padding: 0 var(--gutter);
}
.article__kicker {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  padding: 6px 12px;
  margin-bottom: 20px;
}
.article__title {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin-bottom: 20px;
}
.article__standfirst {
  font-size: 20px;
  line-height: 1.5;
  color: var(--gray-700);
  margin-bottom: 28px;
}
.article__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  padding: 16px 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.article__author {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.article__stamp {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.article__share {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.article__share a,
.share-menu__toggle {
  width: 34px;
  height: 34px;
  border: none;
  background: var(--surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.article__share a:hover,
.share-menu__toggle:hover,
.share-menu.is-open .share-menu__toggle { background: var(--red); color: var(--white); }
.article__share svg { width: 16px; height: 16px; }

/* Share hover/click menu (fb / x / whatsapp / tiktok) */
.share-menu { position: relative; display: inline-flex; }
.share-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-elastic), visibility var(--dur);
  z-index: 30;
}
.share-menu__list::before {
  content: "";
  position: absolute;
  top: -8px; left: 0; right: 0; height: 8px;
}
.share-menu:hover .share-menu__list,
.share-menu.is-open .share-menu__list {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-menu__list a {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--white);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.share-menu__list a:hover { background: var(--red); color: var(--white); }
.share-menu__list svg { width: 16px; height: 16px; }

.article__figcaption {
  font-size: 12px;
  color: var(--gray-500);
  padding-top: 10px;
  letter-spacing: 0.02em;
}

/* Story body copy lives in css/story-body.css, shared with the editor. */

.pull-quote {
  margin: 40px 0;
  padding: 4px 0 4px 26px;
  border-left: 4px solid var(--black);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.pull-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: 500;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-500);
}

.article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 44px;
}
.article__tags a {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--surface);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.article__tags a:hover { background: var(--blue); color: var(--white); }

@media (max-width: 560px) {
  .article__standfirst { font-size: 17px; }
  .pull-quote { font-size: 21px; }
}

/* =========================================================
   SEARCH — hide the native clear (x); the ✕ close handles it
   ========================================================= */
.header-search__input::-webkit-search-cancel-button,
.header-search__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.header-search__input { -moz-appearance: textfield; }

/* =========================================================
   HOMEPAGE FEATURED BLOCK (lead + secondary + latest rail)
   ========================================================= */
.featured {
  padding: 34px 0 44px;
  border-bottom: 1px solid var(--gray-200);
}
.featured__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 44px;
  align-items: stretch;
}
.featured__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 32px;
}
/* Latest rail matches the lead card height; last item aligns to its base */
.featured__side { display: flex; }
.featured__side .side-block {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.featured__side .side-block__title { margin-bottom: 18px; }
.featured__side .mini-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.featured__side .mini-list > li { flex: 0 0 auto; }
.featured__side .mini-list > li:last-child .mini-item { padding-bottom: 0; }
.lead-card {
  position: relative;
  display: block;
  overflow: hidden;
}
.lead-card__media .ph { aspect-ratio: 16 / 9; }
.lead-card__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 30px;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.25) 62%, transparent);
}
.lead-card__kicker {
  display: inline-block;
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 11px;
  margin-bottom: 14px;
}
.lead-card__title {
  color: var(--white);
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.06;
  max-width: 22ch;
}
.lead-card__title em { font-style: italic; }

/* Compact article rail (Latest Articles / More From …) */
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-item {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--gray-200);
  align-items: stretch;
}
.mini-list > li:first-child .mini-item { border-top: none; padding-top: 0; }
/* Thumbnail fills the full height of the story text beside it */
.mini-item__thumb { position: relative; }
.mini-item__thumb .ph { position: absolute; inset: 0; }
.mini-item__title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.24;
}
/* animated underline handled in .u-anim block */
.mini-item__meta {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-top: 6px;
}

/* =========================================================
   ENTERTAINMENT — "WATCHMODULE (player + Up Next rail)
   ========================================================= */
.watch {
  background: var(--black);
  color: var(--white);
  padding: 40px 0 44px;
}
.watch__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 372px;
  gap: 28px;
  align-items: start;
}
.watch.is-solo .watch__grid { grid-template-columns: 1fr; }
.watch__next { transition: opacity var(--dur) var(--ease); }
.watch.is-solo .watch__next { display: none; opacity: 0; }
.watch__grid { transition: grid-template-columns var(--dur-slow) var(--ease); }

/* Main story container — player with overlaid text, square corners */
.watch__screen {
  position: relative;
  display: block;
}
.watch__screen .ph {
  aspect-ratio: 16 / 9;
  border: none;
}
.watch__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px;
  height: 74px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease-elastic), background var(--dur) var(--ease);
}
.watch__screen:hover .watch__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: rgba(0,0,0,.7);
}
.watch__play::after {
  content: "";
  width: 0; height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--white);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
.watch__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0,0,0,.72);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  z-index: 1;
}
.watch__overlay {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px;
  background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.2) 65%, transparent);
}
.watch__title {
  color: var(--white);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.1;
}
.watch__meta {
  color: var(--gray-300);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Up Next column — matches the player height, aligns top and bottom */
.watch__next {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.watch__next-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.watch__next-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.watch__close {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.watch__close:hover { background: var(--white); color: var(--black); }
.watch__close svg { width: 15px; height: 15px; }

.watch__list-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}
.watch__list {
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: var(--gray-700) transparent;
}
.watch__list::-webkit-scrollbar { width: 8px; }
.watch__list::-webkit-scrollbar-thumb { background: var(--gray-700); border-radius: 0; }
.watch__list::-webkit-scrollbar-track { background: transparent; }
/* Fade the scrolling list out at the bottom (100% → 0%) */
.watch__list-wrap::after {
  content: "";
  position: absolute;
  left: 0; right: 8px; bottom: 0;
  height: 64px;
  background: linear-gradient(to top, var(--black), transparent);
  pointer-events: none;
}
.watch-item {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  border: none;
  border-radius: 0;
  background: #1c1c1c;
  align-items: center;
  color: var(--white);
  transition: background var(--dur) var(--ease);
}
.watch-item:hover { background: #4a4a4a; }
.watch-item__thumb .ph { aspect-ratio: 16 / 9; border: none; border-radius: 3px; }
.watch-item__title {
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.25;
}

/* =========================================================
   ANIMATED LEFT-TO-RIGHT UNDERLINE ON STORY TITLES
   ========================================================= */
/* JS wraps each title in .u-line, then splits it into .u-word spans and sets a
   per-line transition-delay so the red underline sweeps line by line. */
.u-line { padding-bottom: 1px; }
/* .u-word is only a measurement unit; the underline lives on .u-lineseg,
   which wraps a whole visual line so it sweeps as ONE continuous underline. */
.u-lineseg {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-image: linear-gradient(var(--red), var(--red));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 2px;
  transition: background-size .38s cubic-bezier(.19, 1, .22, 1);
}
.story-card:hover .u-lineseg,
.news-item:hover .u-lineseg,
.mini-item:hover .u-lineseg,
.lead-card:hover .u-lineseg,
.watch-item:hover .u-lineseg,
.trending a:hover .u-lineseg {
  background-size: 100% 2px;
}

/* =========================================================
   SUBTLE IMAGE ZOOM ON HOVER (secondary stories)
   ========================================================= */
.story-card__media,
.news-item__media,
.mini-item__thumb,
.watch-item__thumb {
  overflow: hidden;
}
.story-card__media .ph,
.news-item__media .ph,
.mini-item__thumb .ph,
.watch-item__thumb .ph {
  transition: transform var(--dur) var(--ease-elastic);
}
.story-card:hover .story-card__media .ph,
.news-item:hover .news-item__media .ph,
.mini-item:hover .mini-item__thumb .ph,
.watch-item:hover .watch-item__thumb .ph {
  transform: scale(1.06);
}

/* =========================================================
   ARTICLE — full-width, two-column (aligns logo → subscribe)
   ========================================================= */
.article__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  margin-top: 26px;
}
/* Not sticky: the rail (ad + 4 stories) is taller than the viewport, and a
   stuck sidebar would cut the last story off. Scrolls with the article instead. */
.article__aside {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.article__figure { margin: 0 0 30px; }

/* =========================================================
   RESPONSIVE — new modules
   ========================================================= */
@media (max-width: 960px) {
  .featured__top { grid-template-columns: 1fr; gap: 32px; }
  .featured__row { grid-template-columns: repeat(2, 1fr); }
  .featured__side { display: block; }
  .featured__side .mini-list { display: block; }
  .featured__side .mini-list > li { flex: 0 0 auto; display: block; }
  .watch__grid { grid-template-columns: 1fr; }
  .watch__list { max-height: none; }
  .article__layout { grid-template-columns: 1fr; gap: 36px; }
  .article__aside { position: static; flex-direction: row; flex-wrap: wrap; }
  .article__aside > * { flex: 1 1 260px; }
}
@media (max-width: 620px) {
  .featured__row { grid-template-columns: 1fr; }
  .watch-item { grid-template-columns: 104px minmax(0, 1fr); }
  .article__aside { flex-direction: column; }
  /* `.article__aside > * { flex: 1 1 260px }` above is a WIDTH basis while the
     aside is a row. Here the column direction is back, so that same 260px
     becomes a HEIGHT basis and caps the slot — a tall creative was clipped at
     260px by the slot's overflow:hidden. A creative sizes to its artwork, so
     opt it out of the shared basis; stretch still gives it the full width. */
  .article__aside > .ad-slot.ad-slot--creative { flex: 0 0 auto; }
}

/* =========================================================
   SECTION-PAGE DENSE LAYOUT (lead + sidebar + story grid)
   ========================================================= */
.sec-feature { padding-top: 6px; }
.sec-lede {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 44px;
  /* `start` left the lead card at its own 16:9 height while the sidebar ran on,
     opening ~260px of white space beneath it. Both columns now end level. */
  align-items: stretch;
}
.sec-lede > .lead-card { height: 100%; }
.sec-side {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.sec-grid-head { margin-top: 44px; }
.story-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px 24px;
}
.story-card.is-hidden { display: none; }

@media (max-width: 1024px) {
  .story-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .sec-lede { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 680px) {
  .story-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 460px) {
  .story-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   ANNOUNCEMENT BAR (dismissible)
   ========================================================= */
.announce-bar {
  background: var(--black);
  color: var(--white);
  max-height: 120px;
  opacity: 1;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.announce-bar.is-dismissed { max-height: 0; opacity: 0; }
.announce-bar__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  /* right padding must clear the close button, or the text runs under it —
     it did at every width below 768px */
  padding: 11px 56px;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.announce-bar__text {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.announce-bar__text a { text-decoration: underline; font-weight: 700; }
.announce-bar__close {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  /* 30px was below a comfortable tap target */
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  border: none;
  background: #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.announce-bar__close:hover {
  background: var(--white);
  color: var(--black);
}
.announce-bar__close svg { width: 15px; height: 15px; display: block; }
.announce-bar__close:active { transform: translateY(-50%) scale(.94); }

@media (max-width: 640px) {
  .announce-bar__inner { padding: 10px 52px; min-height: 48px; }
  .announce-bar__text { font-size: 12px; line-height: 1.35; }
  /* full 40px target on touch, still clear of the text */
  .announce-bar__close { width: 40px; height: 40px; right: 8px; }
  .announce-bar__close svg { width: 16px; height: 16px; }
}

/* =========================================================
   FOOTER SOCIAL ICONS
   ========================================================= */
.social-links {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}
.social-links a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: #333333;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.social-links a:hover {
  background: var(--red);
  color: var(--white);
}
.social-links svg { width: 18px; height: 18px; }

/* =========================================================
   HEADER: subscribe flow, social icons, clock + country
   ========================================================= */
.header-utility { position: relative; gap: 14px; }

.subscribe {
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.subscribe__fields {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(10px);
  pointer-events: none;
  transition: max-width var(--dur-slow) var(--ease),
              opacity var(--dur) var(--ease),
              transform var(--dur-slow) var(--ease-elastic),
              margin-right var(--dur-slow) var(--ease);
}
.subscribe.is-open .subscribe__fields {
  max-width: 280px;
  opacity: 1;
  transform: none;
  margin-right: 10px;
  pointer-events: auto;
}
.subscribe.is-success .subscribe__fields { max-width: 0; opacity: 0; margin-right: 0; }
.subscribe__input {
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  width: 128px;
}
.subscribe__input:focus { outline: none; }
.subscribe__success {
  display: inline-block;
  flex: 0 0 auto;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateX(8px);
  transition: max-width var(--dur-slow) var(--ease),
              opacity var(--dur) var(--ease),
              transform var(--dur-slow) var(--ease-elastic);
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  /* render the copy exactly as written, not uppercased by the header */
  text-transform: none;
  letter-spacing: 0;
}
.subscribe.is-success .subscribe__success { max-width: 360px; opacity: 1; transform: none; }
.subscribe.is-success .utility-link { display: none; }

/* Header social icons (light chips on the white header) */
.social-links--header { display: inline-flex; gap: 8px; margin-top: 0; }
.header-utility .social-links a {
  width: 32px;
  height: 32px;
  background: var(--surface);
  color: var(--ink);
}
.header-utility .social-links a:hover { background: var(--red); color: var(--white); }
.header-utility .social-links svg { width: 16px; height: 16px; }

/* Nav clock + country selector (right side of the nav row) */
.nav__meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}
.country-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink);
  background-color: var(--surface);
  border: none;
  border-radius: 3px;
  /* custom caret, vertically centred and inset from the right edge */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 26px 8px 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23262626' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  line-height: 1;
  cursor: pointer;
}
.country-select:focus { outline: none; }
.nav__clock {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 78px;
  text-align: right;
}
.nav__clock::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--red);
  margin-right: 7px;
  vertical-align: middle;
}

@media (max-width: 1024px) {
  .header-utility .social-links { display: none; }
}
@media (max-width: 820px) {
  .nav__meta { display: none; }
}
@media (max-width: 640px) {
  .subscribe.is-open .subscribe__fields { display: none; }
}

@media (max-width: 560px) {
  .announce-bar__text { font-size: 12px; }
}

/* =========================================================
   LEGAL PAGES (Privacy Policy / Terms of Use)
   ========================================================= */
.legal {
  max-width: 820px;
  padding: 6px 0 76px;
}
.legal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.legal__updated {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.lang-select {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
  background-color: var(--surface);
  border: none;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 8px 26px 8px 10px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23262626' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 7px;
  line-height: 1;
  cursor: pointer;
}
.lang-select:focus { outline: none; }
.legal .prose { padding-top: 8px; }
.legal__note {
  margin-top: 34px;
  font-size: 12px;
  color: var(--gray-500);
  font-style: italic;
}

/* =========================================================
   WRITER PROFILE (end of every story)
   ========================================================= */
.author-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 46px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.author-card__avatar .ph { aspect-ratio: 1 / 1; }
/* The avatar is an empty div: the grid column gives it its 84px width, but
   nothing gave it a height, so it collapsed to zero and the photo — painted as
   a background-image — had no area to show in. No avatar rendered at all, for a
   photo or for initials. aspect-ratio ties the height to the width. */
.author-card__avatar {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}
.author-card__label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-500);
  margin-bottom: 7px;
}
.author-card__name {
  font-size: 20px;
  line-height: 1.15;
  margin-bottom: 9px;
}
.author-card__bio {
  font-size: 15px;
  line-height: 1.6;
  color: var(--gray-700);
  margin: 0 0 14px;
  max-width: 62ch;
}
.social-links--author { margin-top: 0; gap: 8px; }
.social-links--author a {
  width: 32px;
  height: 32px;
  background: var(--surface);
  color: var(--ink);
}
.social-links--author a:hover { background: var(--red); color: var(--white); }
.social-links--author svg { width: 16px; height: 16px; }

@media (max-width: 560px) {
  .author-card { grid-template-columns: 64px minmax(0, 1fr); gap: 16px; }
}

/* =========================================================
   MODAL SYSTEM (newsletter + application forms)
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 200;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); }
.modal__panel {
  position: relative;
  width: min(560px, calc(100% - 28px));
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  margin: 28px auto;
  background: var(--white);
  padding: 34px 32px 32px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition: transform var(--dur-slow) var(--ease-elastic), opacity var(--dur) var(--ease);
}
.modal.is-open .modal__panel { opacity: 1; transform: none; }
.modal__close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal__close:hover { background: var(--red); color: var(--white); }
.modal__close svg { width: 15px; height: 15px; }
.modal__eyebrow {
  display: block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.modal__title { font-size: 26px; line-height: 1.12; margin-bottom: 10px; }
.modal__intro { font-size: 15px; color: var(--gray-700); margin: 0 0 22px; }
.modal__actions { margin-top: 20px; }
.modal__success { display: none; text-align: center; padding: 26px 0 10px; }
.modal.is-success .modal__form { display: none; }
.modal.is-success .modal__success { display: block; }
.modal__success-title { font-size: 20px; margin-bottom: 8px; }
.modal__success p { color: var(--gray-700); font-size: 15px; margin: 0; }

/* compact fields inside modals */
.modal .field { margin-bottom: 14px; }
.modal .field label { font-size: 11px; letter-spacing: 0.12em; }
.modal .field input,
.modal .field textarea,
.modal .field select { font-size: 14px; padding: 11px 13px; }
.modal .field textarea { min-height: 96px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field select {
  width: 100%;
  font-family: inherit;
  border: none;
  border-radius: 3px;
  background-color: var(--surface);
  color: var(--ink);
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.75 6 6.25 11 1.75' fill='none' stroke='%23262626' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 10px 7px;
  cursor: pointer;
}
.field select:focus { outline: none; }

/* repeatable rows (links / social handles, max 2) */
.repeat__row { display: flex; gap: 10px; margin-bottom: 10px; }
.repeat__row select { flex: 0 0 132px; }
.repeat__row input { flex: 1 1 auto; }
.repeat__add {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--red);
  padding: 6px 0;
}
.repeat__add:disabled { color: var(--gray-500); cursor: not-allowed; }
.repeat__add span {
  width: 20px; height: 20px;
  background: var(--red); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; line-height: 1; border-radius: 3px;
}
.repeat__add:disabled span { background: var(--gray-300); }

/* =========================================================
   CTA BAND (Spotlight / Opinions submissions)
   ========================================================= */
.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap;
  background: var(--ink); color: var(--white);
  padding: 30px 32px;
  margin: 44px 0;
}
.cta-band__title { font-size: 22px; color: var(--white); margin-bottom: 6px; }
.cta-band__text { font-size: 14px; color: var(--gray-300); margin: 0; max-width: 60ch; }
.cta-band .btn { background: var(--red); flex: none; }
.cta-band .btn:hover { background: var(--white); color: var(--ink); }

/* =========================================================
   FLOATING BUTTONS (back-to-top + support us)
   ========================================================= */
.floaties {
  position: fixed;
  right: 14px;
  bottom: 16px;
  left: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 150;
}
.floaties > * { pointer-events: auto; }
.to-top {
  width: 34px; height: 34px;
  border-radius: 3px;
  background: var(--ink);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease-elastic),
              visibility var(--dur), background var(--dur) var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--red); }
.to-top svg { width: 15px; height: 15px; }
.support {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red);
  padding: 7px 8px 7px 12px;
  border-radius: 3px;
}
.support {
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-elastic),
              max-width var(--dur-slow) var(--ease), padding var(--dur-slow) var(--ease),
              margin var(--dur-slow) var(--ease);
  max-width: 320px;
}
.support.is-dismissed {
  opacity: 0;
  transform: translateX(14px) scale(.9);
  max-width: 0;
  padding-left: 0; padding-right: 0;
  margin-left: -8px;
  overflow: hidden;
  pointer-events: none;
}
.support__link {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--white);
}
.support__link:hover { text-decoration: underline; }
.support__close {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.support__close:hover { background: var(--white); color: var(--red); }
.support__close svg { width: 10px; height: 10px; }

@media (max-width: 560px) {
  .support__link { font-size: 10px; }
  .modal__panel { padding: 30px 20px 24px; }
  .field-row { grid-template-columns: 1fr; }
}

/* =========================================================
   CROSS-SECTION DISCOVERY (keeps readers moving)
   ========================================================= */
.explore-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 34px; padding-top: 24px;
  border-top: 1px solid var(--line);
}
.explore-row__label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-500);
  margin-right: 4px;
}
.explore-chip {
  font-size: 13px; font-weight: 700;
  background: var(--surface); color: var(--ink);
  padding: 9px 14px; border-radius: 3px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.explore-chip:hover { background: var(--red); color: var(--white); }


/* Staggered reveal for items loaded by "See More*/
@keyframes revealUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.is-revealed { animation: revealUp var(--dur-slow) var(--ease) both; }

/* =========================================================
   NO FOCUS OUTLINE ON CLICK (all interactive boxes)
   ========================================================= */
input:focus,
textarea:focus,
select:focus,
button:focus,
a:focus,
[contenteditable]:focus {
  outline: none;
  box-shadow: none;
}

/* =========================================================
   MOBILE — consolidated. Lives at the end so it wins the cascade.
   Goal: compact, denser layout so more is visible per screen.
   ========================================================= */

/* ---------- Header: logo + hamburger only ---------- */
@media (max-width: 820px) {
  .header-top {
    padding: 12px var(--gutter);
    gap: 12px;
  }
  /* search, subscribe and socials all move off the top bar on small screens */
  .header-utility { display: none; }
  .header-search { display: none !important; }
  .brand__logo { height: 18px; }
  .nav__toggle { display: inline-flex; }

  /* Announcement bar: tighter so it costs two lines, not three */
  /* keeps clear of the close button — a bare gutter padding put the text
     straight underneath it */
  .announce-bar__inner { padding: 9px 52px 9px var(--gutter); }
  .announce-bar__text { font-size: 11px; line-height: 1.35; }

  /* Nav strip below keeps only the country/clock */
  .nav__inner { padding: 0 var(--gutter); min-height: 0; }
  .nav__meta { margin-left: 0; }

  /* Menu panel: a real stacked list, not wrapped pills */
  .nav__list.is-open {
    display: block;
    padding: 4px 0 10px;
    border-top: 1px solid var(--gray-200);
  }
  .nav__list.is-open .nav__item {
    display: block;
    width: 100%;
    border-bottom: 1px solid var(--gray-200);
  }
  .nav__list.is-open .nav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 2px;
    border-radius: 0;
    font-size: 14px;
  }
  .nav__dropdown { margin: 0 0 8px 14px; }
  .nav__dropdown a { padding: 8px 2px; font-size: 13px; }
}

/* ---------- Everything below 640px: tighten the whole page ---------- */
@media (max-width: 640px) {
  /* Section rhythm */
  .section { padding: 26px 0; }
  .section__head { margin-bottom: 16px; }
  .section__title { font-size: 20px; gap: 10px; }
  .section__title::before { width: 8px; height: 18px; }

  /* Headlines: smaller, so more fits without scrolling */
  .page-head { padding: 22px 0; }
  .page-head__title { font-size: 24px; }
  .page-head__dek { font-size: 15px; margin-top: 10px; }
  .hero { padding: 22px 0; }
  .hero__title { font-size: 26px; margin-bottom: 12px; }
  .hero__dek { font-size: 15px; }
  .lead-card__title { font-size: 21px; }
  /* Card titles: box is exactly two line boxes tall.
     The old `padding-bottom` left ~4px of slack, which let a clipped sliver of
     a third line show through, so the underline room comes from line-height. */
  .story-card__title {
    font-size: 16px;
    line-height: 1.28;
    padding-bottom: 0;
    min-height: calc(2 * 1.28em);
    max-height: calc(2 * 1.28em);
  }
  .story-card__media { margin-bottom: 10px; }
  .mini-item { padding: 10px 0; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; }
  .news-item { padding: 12px 0; }
  .trending li { padding: 12px 0; }
  .side-block__title { font-size: 12px; padding-bottom: 8px; margin-bottom: 10px; }

  /* Article page */
  .article__title { font-size: 26px; margin-bottom: 12px; }
  .article__standfirst { font-size: 16px; margin-bottom: 18px; }
  .article__byline { padding: 12px 0; gap: 8px 16px; }
  /* icons drop to their own row, flush left with the text above them */
  .article__share { margin-left: 0; width: 100%; }
  .article__figcaption { font-size: 12px; }

  /* Ads + placeholders take less vertical space */
  .ad-slot--bleed { height: 120px; }
  .fullbleed-ad { margin: 22px 0; }

  /* Footer: copyright on one line, credit on the next, no pipe */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }
  .footer-sep { display: none; }

  /* Inputs at 16px stop iOS from auto-zooming the page on focus */
  input, textarea, select { font-size: 16px; }
}

/* ---------- Carousel: two stories at a time on phones ---------- */
@media (max-width: 560px) {
  .carousel__track {
    grid-auto-columns: calc((100% - 12px) / 2);
    gap: 12px;
  }
  /* height math is in em, so it follows this font-size automatically */
  .carousel .story-card__title { font-size: 14px; }
  .carousel .story-card__kicker { font-size: 10px; }
  .carousel .story-card__meta { font-size: 11px; }
}

/* ---------- Keep everything inside the viewport ---------- */
@media (max-width: 640px) {
  /* share dropdown would otherwise open off the right edge */
  .article__share .share-menu__list { left: auto; right: 0; }
  .floaties { right: 10px; bottom: 12px; max-width: calc(100vw - 20px); }
  .support { max-width: calc(100vw - 60px); }
  .modal__panel { max-width: calc(100vw - 24px); }
}

/* =========================================================
   NEWSLETTER OPT-IN BAND (sits directly above the footer)
   ========================================================= */
.optin {
  background: var(--ink);
  color: var(--white);
  padding: 34px 0;
}
.optin__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}
.optin__title {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.15;
  margin: 0;
  max-width: 26ch;
}
.optin__form {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.optin__input {
  width: 190px;
  padding: 11px 12px;
  border: none;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  transition: box-shadow var(--dur) var(--ease);
}
.optin__input::placeholder { color: var(--gray-500); }
.optin__btn {
  /* `align-self: stretch` keeps this the same height as the inputs. Matching
     the padding is not enough: the button's 12px type and `line-height: normal`
     made it 36.5px against the inputs' 43px. */
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: none;
  border-radius: 3px;
  background: var(--red);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-elastic);
}
.optin__btn:hover { background: var(--red-dark); }
.optin__btn:active { transform: scale(.97); }
/* Taken out of flow: as a third flex child it was splitting `space-between`
   three ways and parking the form in the middle instead of on the gutter. */
.optin__success {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  margin: 0;
  font-size: 14px;
  color: var(--white);
  text-align: right;
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 6px));
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-elastic);
}
.optin.is-success .optin__success { opacity: 1; transform: translateY(-50%); }
.optin.is-success .optin__form { display: none; }

@media (max-width: 820px) {
  .optin { padding: 20px 0; }
  .optin__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .optin__title { font-size: 17px; line-height: 1.2; }
  .optin__form { width: 100%; }
  .optin__input { flex: 1 1 140px; width: auto; min-width: 0; }
  /* stacked layout has room, so put the message back in flow on the left */
  .optin__success {
    position: static;
    text-align: left;
    transform: translateY(6px);
  }
  .optin.is-success .optin__success { transform: none; }
}

/* Media embeds live in css/story-body.css, shared with the editor. */

/* =========================================================
   MOBILE FIXES — round two
   ========================================================= */
@media (max-width: 820px) {
  /* Caret: a real chevron, vertically centred, flush with the row's right edge.
     The desktop rule used a rotated square + translateY nudge, which read as
     off-centre once the link became a full-width flex row. */
  .nav__list.is-open .nav__caret {
    width: 9px; height: 9px;
    margin: 0 2px 3px 0;
    transform: rotate(45deg);
    flex: 0 0 auto;
    transition: transform var(--dur) var(--ease-elastic);
  }
  .nav__list.is-open .nav__item.is-open .nav__caret {
    transform: rotate(-135deg);
    margin-bottom: -3px;
  }

  /* Dropdown: an indented sub-list, not a floating desktop panel */
  .nav__list.is-open .nav__dropdown {
    position: static;
    min-width: 0;
    width: auto;
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 2px 0 8px;
    margin: 0 0 0 14px;
    border-left: 2px solid var(--gray-300);
  }
  .nav__list.is-open .nav__dropdown::before { display: none; }
  .nav__list.is-open .nav__dropdown a {
    display: block;
    padding: 9px 0 9px 12px;
    font-size: 13px;
    border-radius: 0;
    background: none;
  }
}

@media (max-width: 640px) {
  /* --- One type scale for every page, matching the homepage --- */
  .page-head { padding: 20px 0 16px; }
  .page-head__title { font-size: 20px; }
  .page-head__dek { font-size: 14px; margin-top: 8px; }
  .page-head__eyebrow { font-size: 10px; margin-bottom: 8px; }
  .page-head__tagline { font-size: 12px; }
  .section__title { font-size: 20px; }
  .news-item__title { font-size: 16px; line-height: 1.28; }
  .news-item__kicker { font-size: 10px; margin-bottom: 6px; }
  .news-item__meta { font-size: 10px; }
  .mini-item__title { font-size: 14px; line-height: 1.28; }
  .article__title { font-size: 22px; }
  .hero__title { font-size: 22px; }
  .lead-card__title { font-size: 19px; }
  .cta-band__title { font-size: 18px; }

  /* Timestamps sit right under their headline, however many lines it runs to */
  .story-card__title, .news-item__title, .mini-item__title { min-height: 0; }
  .story-card__title { margin-bottom: 6px; }
  .news-item__title { margin-bottom: 6px; }

  /* Share dropdown: the toggle now sits at the LEFT of its row, so the menu
     must open rightward. (Anchoring it right sent it off-screen to x=-112.) */
  .article__share .share-menu__list { left: 0; right: auto; }

  /* No hover states on touch — the underline sweep only made taps feel laggy */
  .u-lineseg {
    background-image: none !important;
    transition: none !important;
  }
}

@media (max-width: 640px) {
  /* Spotlight's marquee header ran to 34px while every other page sat at 20px */
  .page-head--spotlight { padding: 26px 0 22px; }
  .page-head--spotlight .page-head__title { font-size: 22px; }
  .page-head--spotlight .page-head__dek { display: block; font-size: 14px; }
  .spotlight-kicker { font-size: 10px; }
}

/* =========================================================
   MOBILE — round three
   ========================================================= */

/* Arrow variant of the opt-in button: label on desktop, arrow on phones */
.optin__btn-arrow { display: none; }

@media (max-width: 820px) {
  /* --- Menu: labels line up with the logo ---
     Rows bleed to the screen edges and the text sits on the page gutter, so
     every menu label starts exactly where the logo starts (12px). Previously
     the links carried their own 2px padding and the labels sat at 14px. */
  .nav__list.is-open {
    /* Rows bleed past the nav's gutter padding to both screen edges. The width
       must be explicit: `.nav__inner` is a flex container, so `width: auto`
       would shrink this to its content instead of filling the row. */
    width: calc(100% + 2 * var(--gutter));
    flex: 0 0 auto;
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
  }
  .nav__list.is-open .nav__link {
    padding: 13px var(--gutter);
  }

  /* Company sub-menu: a modest, even indent instead of the old 40px step */
  .nav__list.is-open .nav__dropdown {
    margin: 0;
    padding: 0;
    border-left: none;
    background: var(--gray-50);
    box-shadow: none;
  }
  .nav__list.is-open .nav__dropdown li + li {
    border-top: 1px solid var(--gray-200);
  }
  .nav__list.is-open .nav__dropdown a {
    padding: 11px var(--gutter) 11px calc(var(--gutter) + 16px);
    font-size: 13px;
  }

  /* --- Opt-in: first name, email and the arrow all on one row --- */
  .optin__form {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }
  .optin__input {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  /* Square icon button on phones — thin line arrow, no label */
  .optin__btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius);
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .optin__btn-label { display: none; }
  .optin__btn-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .optin__btn-arrow svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform var(--dur) var(--ease-elastic);
  }
  .optin__btn:active .optin__btn-arrow svg { transform: translateX(2px); }
}

/* =========================================================
   MEDIA EMBEDS — live players in place of the placeholder shapes
   ========================================================= */
[data-embed-src] { position: relative; }
[data-embed-src].is-clickable { cursor: pointer; }
[data-embed-src].is-live .ph,
[data-embed-src].is-live .watch__play,
[data-embed-src].is-live .watch__badge { display: none; }

/* Muted autoplay is the only autoplay browsers permit, so the unmute control
   has to be obvious rather than a small icon in the corner. */
.embed__unmute {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px 9px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease-elastic);
}
.embed__unmute:hover { background: var(--red-dark); }
.embed__unmute:active { transform: scale(.97); }
.embed__unmute svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
  .embed__unmute { left: 10px; bottom: 10px; padding: 7px 12px 7px 10px; font-size: 10px; }
}

/* =========================================================
   COVER IMAGES — the wrapper owns the shape, the image fills it
   Previously the ratio lived on the <img>. When a container was stretched
   taller than that ratio (the homepage lead card is stretched to match the
   Latest Articles column) the image stopped short and the gradient sat over
   empty space. Wrappers now carry the ratio and images always cover.
   ========================================================= */
.lead-card__media,
.story-card__media,
.news-item__media,
.mini-item__thumb,
.watch-item__thumb,
.hero__media,
.watch__screen {
  position: relative;
  overflow: hidden;
  background: var(--gray-100);
}

.story-card__media,
.news-item__media,
.hero__media { aspect-ratio: 4 / 3; }
.watch-item__thumb,
.watch__screen { aspect-ratio: 16 / 9; }

/* The lead card must NEVER take its width from its height. `aspect-ratio` did
   exactly that: stretched to the sidebar's 622px, it computed a 1105px width
   and ran straight over the Latest Articles rail. A padding spacer sets a
   minimum shape without ever feeding height back into width. */
.lead-card { position: relative; overflow: hidden; }
.lead-card::before {
  content: "";
  display: block;
  padding-top: 56.25%;        /* 16:9 floor; the grid may make it taller */
}
.lead-card__media { position: absolute; inset: 0; aspect-ratio: auto; }

/* Fill the wrapper — but NOT inside the article's own <figure>, which is a
   normal-flow block sized by the image itself. Absolutely positioning it there
   detached it from the text column and collapsed it to zero height. */
.ph.is-photo:not(.article__figure > *) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  aspect-ratio: auto;      /* the wrapper decides the shape now */
  background: var(--gray-100);
}
/* mini-item thumbs stretch to the height of the text beside them, so they must
   NOT carry an aspect-ratio — stretched to 103px it computed a 137px width and
   ran over the headline in a 104px grid track. */
.mini-item__thumb {
  aspect-ratio: auto;
  width: 100%;
  min-height: 74px;
  align-self: stretch;
}

/* Writer initials stand in for avatars — the import brought names, not photos */
.author-card__avatar.is-initials {
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.04em;
}

/* Writer avatar: real photo when the import found one */
.author-card__avatar.is-photo-avatar {
  background-size: cover;
  background-position: center;
}

/* =========================================================
   ARTICLE MEDIA — round two
   ========================================================= */

/* Story body media lives in css/story-body.css, shared with the editor. */

/* Lead image: fill the width at its own aspect ratio — forcing 16:9 was
   cropping the top and bottom off portrait and square photos. */
.article__figure .ph.is-photo,
.article__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 640px;
  object-position: center;
}
.article__figure { margin: 0 0 30px; }

/* Company sub-menu on tablet/mobile: dark hover to match the rest of the menu.
   It was inheriting the desktop panel's white-on-hover, which vanished
   against the light sub-menu background. */
@media (max-width: 820px) {
  .nav__list.is-open .nav__dropdown { box-shadow: none; border-left: none; }
  .nav__list.is-open .nav__dropdown a {
    background: none;
    color: var(--ink);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__list.is-open .nav__dropdown a:hover,
  .nav__list.is-open .nav__dropdown a:active,
  .nav__list.is-open .nav__dropdown a:focus-visible {
    background: var(--ink);
    color: var(--white);
  }
}

/* =========================================================
   SHARE MENU — keep it on screen at every width
   The dropdown is absolutely positioned, so at narrow widths or when the
   toggle sits near an edge it could open past the viewport. Anchor it to
   whichever side has room and clamp its width.
   ========================================================= */
.share-menu__list {
  max-width: calc(100vw - 24px);
  flex-wrap: nowrap;
}
.share-menu__list a {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.share-menu__list svg { width: 16px; height: 16px; display: block; }

/* Anchor the menu to whichever side the toggle actually sits on:
   - wide screens: icons are pushed right by `margin-left:auto`, so the menu
     must open LEFTWARD or it runs off the right edge.
   - phones: icons drop to the left of their own row, so it opens rightward. */
@media (min-width: 641px) {
  .article__share .share-menu__list { right: 0; left: auto; }
}
@media (max-width: 640px) {
  .article__share .share-menu__list { left: 0; right: auto; }
  .share-menu__list { gap: 4px; padding: 5px; }
  .share-menu__list a { width: 32px; height: 32px; }
}

/* =========================================================
   STORY ACTIONS — copy link, bookmark, native share
   ========================================================= */
.share-native {
  width: 34px; height: 34px;
  border: none;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.share-native:hover { background: var(--red); color: var(--white); }
.share-native svg { width: 16px; height: 16px; }

/* copy: brief confirmation on the icon itself */
.article__share [data-copy-link].is-done { background: var(--red); color: var(--white); }


/* small confirmation toast */
.mini-toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 400;
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: var(--white);
  padding: 11px 18px;
  border-radius: var(--radius);
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease-elastic);
}
.mini-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 640px) {
  .mini-toast { bottom: 70px; font-size: 12px; padding: 10px 15px; }
}



/* Article lead image: stays in flow, fills the text column at its own height
   so nothing is cropped and nothing overflows. */
.article__figure { position: relative; }
.article__figure > img,
.article__figure > .ph.is-photo {
  position: static !important;
  inset: auto !important;
  display: block;
  width: 100%;
  height: auto !important;
  max-height: 640px;
  object-fit: contain;
  aspect-ratio: auto;
  background: var(--gray-100);
}

/* =========================================================
   BREAKING — a pinned story wears its own label in place of the section
   ========================================================= */
.is-breaking {
  background: var(--red) !important;
  color: var(--white) !important;
  padding: 3px 8px;
  border-radius: 0;
  font-weight: 700;
  letter-spacing: 0.12em;
  display: inline-block;
}
.story-card__kicker.is-breaking,
.lead-card__kicker.is-breaking { animation: breathe 2.4s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  .story-card__kicker.is-breaking,
  .lead-card__kicker.is-breaking { animation: none; }
}

/* =========================================================
   SECTION PICKER
   Sits at the end of the main content — the moment a reader runs out of
   stories and would otherwise have to go hunting in the nav or footer.
   ========================================================= */
.section-picker {
  border-top: 1px solid var(--gray-200);
  padding: 34px 0 38px;
}
/* Title on its own line with the dek beneath it — the same shape as
   .page-head__title / .page-head__dek elsewhere on the site. Side by side, a
   large uppercase title next to small grey text never sits comfortably even
   when the baselines technically match. */
.section-picker__head { margin-bottom: 20px; }
.section-picker__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.section-picker__title::before {
  content: "";
  width: 8px;
  height: 20px;
  background: var(--red);
  flex: 0 0 auto;
}
.section-picker__dek {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--gray-500);
}

.section-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Compact chips, sized like the old "Explore more" row rather than the
   full-width cards they were. */
.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.section-chip:hover { background: var(--red); color: var(--white); }
.section-chip__name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}
.section-chip__arrow {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform var(--dur) var(--ease-elastic);
}
.section-chip:hover .section-chip__arrow { transform: translateX(3px); }

/* the section you are already on */
.section-chip.is-current {
  background: none;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  pointer-events: none;
}
.section-chip.is-current .section-chip__name { font-weight: 400; }

@media (max-width: 640px) {
  .section-picker { padding: 24px 0 28px; }
  .section-picker__grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .section-chip { padding: 13px 12px; }
  .section-chip__name { font-size: 13px; }
  .section-chip__arrow { display: none; }
  .section-chip__count { font-size: 10px; }
}

/* =========================================================
   SECTION PICKER — round two
   ========================================================= */
/* Chips were growing tall because "You are here" forced the longest name to
   wrap, and the grid matched every chip to that height. A pin icon is short
   enough that nothing wraps. */
.section-chip {
  min-height: 52px;
}
.section-chip__name {
  min-width: 0;
  overflow-wrap: break-word;
}
.section-chip__here {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--red);
}
.section-chip.is-current {
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--ink);
}
.section-chip.is-current .section-chip__name { font-weight: 700; }

@media (max-width: 640px) {
  .section-chip { min-height: 46px; }
  .section-chip__here { display: block; width: 14px; height: 14px; }
}

/* =========================================================
   ARTICLE SIDEBAR — follows the reader down the story
   ========================================================= */
@media (min-width: 901px) {
  .article__aside {
    position: sticky;
    top: calc(var(--topbar-h, 120px) + 16px);
    align-self: start;
    /* never taller than the screen, or sticky silently stops working */
    max-height: calc(100vh - var(--topbar-h, 120px) - 32px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .article__aside::-webkit-scrollbar { width: 6px; }
  .article__aside::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
  }
}

/* Compact picker — supersedes the earlier card-sized chips */
.section-picker { padding: 26px 0 30px; }
.section-picker__head { margin-bottom: 14px; }
.section-chip__arrow { display: none; }
.section-chip__here { width: 14px; height: 14px; color: var(--red); flex: 0 0 auto; }
.section-chip:hover .section-chip__here { color: var(--white); }
.section-chip.is-current {
  background: none;
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  pointer-events: none;
}
.section-chip { min-height: 0; }
@media (max-width: 640px) {
  .section-picker__grid { display: flex; }
  .section-chip { padding: 8px 12px; }
  .section-chip__name { font-size: 12px; }
  .section-chip__here { display: block; }
}

/* Contact: phone / WhatsApp — one per line, each with a circular icon */
.contact-info dd a { color: var(--ink); text-decoration: none; }
.contact-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.contact-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color var(--dur) var(--ease);
}
.contact-line__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.contact-line__icon svg { width: 12px; height: 12px; display: block; }
.contact-line:hover .contact-line__icon { background: var(--red); color: var(--white); }
.contact-line:hover .contact-line__text { color: var(--red); }
.contact-line__text { line-height: 1.2; }

/* Contact form status line — inline success / error feedback */
.contact-form__status:empty { display: none; }
.contact-form__status {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.4;
}
.contact-form__status.is-ok    { color: #1a7f37; }
.contact-form__status.is-error { color: var(--red); }

/* =========================================================
   LATEST TICKER — sits under the nav
   The track holds the headline list twice; translating it by -50% lands
   exactly on the start of the duplicate, so the loop is seamless with no
   JavaScript. Hovering pauses it so a headline can actually be read.
   ========================================================= */
.ticker {
  background: #111;
  overflow: hidden;
  /* No border-top: it sits outside the content box, so the red LATEST label
     would start 1px below the bar's top edge and read as clipped. The black
     against the white nav is separation enough. */
}
.ticker__inner {
  display: flex;
  align-items: stretch;
  max-width: var(--maxw, 1216px);
  margin: 0 auto;
  padding: 0 var(--gutter, 16px);
}
.ticker__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0 14px;
  margin-right: 16px;
}
.ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;              /* lets the flex child shrink instead of overflowing */
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 40px), transparent 100%);
}
.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll 60s linear infinite;
}
.ticker__set { display: flex; }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  margin-right: 34px;
  color: #e8e8e8;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ticker__item:hover,
.ticker__item:focus-visible { color: #fff; }
.ticker__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--red);
  flex: 0 0 auto;
}
.ticker__flag {
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
}
.ticker__text { font-weight: 500; }
.ticker__item:hover .ticker__text { text-decoration: underline; text-underline-offset: 3px; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Motion sensitivity: stop the scroll and let the row scroll by hand instead. */
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
  .ticker__viewport { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .ticker__set:last-child { display: none; }   /* no duplicate needed when static */
}

@media (max-width: 768px) {
  .ticker__label { font-size: 10px; letter-spacing: 0.1em; padding: 0 10px; margin-right: 12px; }
  .ticker__item { font-size: 13px; margin-right: 26px; padding: 9px 0; }
}