/* =====================================================================
 *  How TikTok drives Irish economic growth — site styles
 *  Builds on tokens from assets/colors_and_type.css
 * ================================================================= */

html, body { height: 100%; }
/* NOTE: html must keep overflow: visible — body's overflow-x:hidden then
   propagates to the viewport and the document keeps iOS's accelerated
   native scrolling. Setting overflow-x on html turns body into an inner
   scroll container, which WebKit handles far worse. */
body {
  background: #000;
  color: #fff;
  margin: 0;
  font-family: var(--font-body);
  overflow-x: hidden;
}

/* ----- Topbar --------------------------------------------------- */
.rs-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 70%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.rs-topbar__logo { height: 14px; width: auto; pointer-events: auto; }
.rs-topbar__progress {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.rs-topbar__progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--tt-magenta), var(--tt-cyan));
  transition: width 80ms linear;
}
.rs-topbar__meta {
  font: 600 11px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  pointer-events: auto;
}
@media (max-width: 720px) { .rs-topbar__meta { display: none; } }

/* ----- Download-the-report button (placeholder link) ----------- */
.rs-topbar__download {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 100rem;
  background: var(--tt-cyan);
  border: 1px solid var(--tt-cyan);
  color: #00171a;
  font: 700 11px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.rs-topbar__download svg { flex-shrink: 0; }
.rs-topbar__download:hover {
  background: var(--tt-magenta);
  border-color: var(--tt-magenta);
  color: #fff;
}
@media (max-width: 720px) {
  .rs-topbar__download { padding: 8px 12px; font-size: 10px; letter-spacing: .06em; }
  .rs-topbar__download svg { width: 13px; height: 13px; }
}

/* ----- Burger menu --------------------------------------------- */
.rs-burger {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 100rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.rs-burger:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--tt-cyan);
}
.rs-burger svg { width: 18px; height: 18px; }

.rs-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 200;
  box-sizing: border-box;
  width: min(440px, 92vw);
  background: #000;
  color: #fff;
  border-left: 1px solid rgba(255,255,255,.1);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  padding: 28px 32px;
  overflow-y: auto;
}
.rs-menu--open { transform: translateX(0); }
/* On mobile, don't park the closed drawer beyond the right edge: iOS Safari
   treats the off-viewport fixed element as pannable page area, which shoves
   the fixed topbar away from the top of the screen. Keep the closed drawer
   inside the viewport and hide it with visibility/opacity instead. */
@media (max-width: 900px) {
  .rs-menu {
    transform: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 240ms ease, visibility 0s linear 240ms;
  }
  .rs-menu--open {
    transform: none;
    visibility: visible;
    opacity: 1;
    transition: opacity 240ms ease;
  }
}
.rs-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.rs-menu__label {
  font: 600 11px var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.rs-menu__close {
  width: 36px; height: 36px;
  border-radius: 100rem;
  background: transparent;
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rs-menu__close:hover { border-color: var(--tt-cyan); }
.rs-menu__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.rs-menu__list a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  text-decoration: none;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
  transition: opacity 160ms ease;
}
.rs-menu__list a:hover { opacity: .7; }
.rs-menu__list .num {
  font: 700 12px var(--font-mono);
  letter-spacing: .12em;
  color: var(--tt-cyan);
  min-width: 36px;
}
.rs-menu__list .ttl {
  font: 600 clamp(18px, 1.4vw, 22px)/1.25 var(--font-display);
  letter-spacing: -.01em;
}
.rs-menu__scrim {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0,0,0,.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.rs-menu__scrim--open { opacity: 1; pointer-events: auto; }
.rs-menu__footer {
  margin-top: auto;
  padding-top: 32px;
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 13px var(--font-display);
  color: rgba(255,255,255,.6);
}
.rs-menu__footer img { height: 18px; }

/* ----- Period mark — used on every headline -------------------- */
.rs-period { color: var(--tt-cyan); }

/* ----- Eyebrow ------------------------------------------------- */
.rs-eyebrow {
  font: 600 12px var(--font-display);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin: 0 0 20px;
}
.rs-eyebrow--on-dark { color: rgba(255,255,255,.72); }

/* ----- Hero ---------------------------------------------------- */
.rs-hero {
  min-height: 66vh;
  background: #000 url("assets/imagery/hero-title.jpg") center / cover no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 96px 6vw 64px;
  overflow: hidden;
}
.rs-hero::before, .rs-hero::after {
  content: "";
  position: absolute;
  width: 80vw;
  height: 80vw;
  border-radius: 50%;
  filter: blur(220px);
  pointer-events: none;
  mix-blend-mode: screen;
}
.rs-hero::before { background: var(--tt-magenta); top: -30vw; left: -25vw; opacity: .65; }
.rs-hero::after  { background: var(--tt-cyan);    bottom: -35vw; right: -25vw; opacity: .55; }
.rs-hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.4) 40%, rgba(0,0,0,.6) 100%);
  pointer-events: none;
}

.rs-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.rs-hero__mark { width: 88px; height: 88px; }
.rs-hero__title {
  font: 800 clamp(44px, 7.4vw, 116px)/.98 var(--font-display);
  letter-spacing: -.028em;
  margin: 0;
  text-wrap: balance;
}
.rs-hero__eyebrow {
  font: 600 14px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  margin-top: 4px;
}
.rs-hero__subtitle {
  font: 500 clamp(16px, 1.6vw, 23px)/1.45 var(--font-display);
  color: rgba(255,255,255,.88);
  max-width: 44ch;
  margin: 6px 0 0;
  text-wrap: balance;
}
.rs-hero__byline {
  font: 700 16px var(--font-display);
  color: #fff;
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.rs-hero__dot { color: var(--tt-cyan); }
.rs-hero__scrollhint {
  position: absolute;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  font: 600 11px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  animation: rs-bounce 2.4s ease-in-out infinite;
}
@keyframes rs-bounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 8px); }
}

/* ----- Chapter opener (full-bleed, blurred halo) --------------- */
.rs-chapter {
  position: relative;
  padding: 16vh 6vw 12vh;
  background: #000;
  color: #fff;
  overflow: hidden;
}
.rs-chapter::before, .rs-chapter::after {
  content: "";
  position: absolute;
  width: 70%; height: 80%;
  filter: blur(220px);
  pointer-events: none;
  opacity: .55;
}
.rs-chapter::before { background: var(--tt-magenta); top: -20%; left: -25%; }
.rs-chapter::after  { background: var(--tt-cyan);    bottom: -20%; right: -25%; }
.rs-chapter__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rs-chapter__num {
  font: 700 14px var(--font-mono);
  letter-spacing: .18em;
  color: var(--tt-cyan);
  text-transform: uppercase;
}
.rs-chapter__title {
  font: 800 clamp(40px, 7vw, 112px)/.98 var(--font-display);
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
  max-width: 18ch;
}
.rs-chapter__lede {
  font: 400 clamp(18px, 1.5vw, 26px)/1.4 var(--font-display);
  color: rgba(255,255,255,.85);
  max-width: 64ch;
  margin: 0;
  text-wrap: pretty;
}

/* ----- Generic section (alternating dark / light) -------------- */
.rs-section {
  position: relative;
  padding: 14vh 6vw;
  overflow: hidden;
}
.rs-section--tight-top { padding-top: 7vh; }
.rs-section--dark  { background: #000; color: #fff; }
.rs-section--light { background: var(--tt-paper-100); color: #000; }

.rs-section--dark::before, .rs-section--dark::after {
  content: "";
  position: absolute;
  width: 60%; height: 70%;
  filter: blur(240px);
  pointer-events: none;
  opacity: .35;
}
.rs-section--dark::before { background: var(--tt-magenta); top: -10%; left: -25%; }
.rs-section--dark::after  { background: var(--tt-cyan);    bottom: -15%; right: -25%; }

.rs-section__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.rs-section__title {
  font: 800 clamp(32px, 4.4vw, 72px)/1.0 var(--font-display);
  letter-spacing: -.022em;
  margin: 0 0 36px;
  text-wrap: balance;
  max-width: 22ch;
}
.rs-section--light .rs-section__title { color: #000; }

/* ----- Body prose ---------------------------------------------- */
.rs-prose { max-width: 80%; }
.rs-prose p {
  font: 400 clamp(15px, 1vw, 18px)/1.6 var(--font-display);
  margin: 0 0 20px;
  text-wrap: pretty;
}
.rs-section--dark .rs-prose p { color: rgba(255,255,255,.82); }
.rs-section--dark .rs-prose strong { color: #fff; }
.rs-section--light .rs-prose p { color: #1a1a1a; }
.rs-prose ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rs-prose li {
  position: relative;
  padding-left: 22px;
  font: 400 clamp(15px, 1vw, 18px)/1.55 var(--font-display);
  text-wrap: pretty;
}
.rs-section--dark .rs-prose li { color: rgba(255,255,255,.85); }
.rs-prose li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 8px; height: 8px;
  background: var(--tt-cyan);
  border-radius: 100rem;
}

/* ----- Stat grid (cards) --------------------------------------- */
.rs-stats {
  display: grid;
  gap: 24px;
  margin: 40px 0;
}
.rs-stats--2 { grid-template-columns: 1fr 1fr; }
.rs-stats--3 { grid-template-columns: repeat(3,1fr); }
.rs-stats--4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 900px) {
  .rs-stats--2, .rs-stats--3, .rs-stats--4 { grid-template-columns: 1fr; gap: 18px; }
}

/* DOTTED stat card — signature pattern from the visual references */
.rs-stat-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 32px;
  border-radius: 28px;
  background: transparent;
  border: 3px dotted var(--tt-cyan);
  position: relative;
  align-items: flex-start;
  text-align: left;
}
/* Inline cards: centre the number+text group; keep the caption left-read. */
.rs-stat-card--magenta { border-color: var(--tt-magenta); }
.rs-stat-card--mono    { border-color: rgba(255,255,255,.4); }
.rs-section--light .rs-stat-card--mono { border-color: rgba(0,0,0,.4); }

.rs-stat-card__num {
  font: 800 clamp(36px, 3.6vw, 64px)/.95 var(--font-display);
  letter-spacing: -.03em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--tt-cyan);
  word-break: keep-all;
  white-space: nowrap;
  overflow-wrap: normal;
}
.rs-stat-card--magenta .rs-stat-card__num { color: var(--tt-magenta); }
.rs-stat-card--mono    .rs-stat-card__num { color: inherit; }
.rs-counter__prefix,
.rs-counter__suffix {
  font-size: 1em;
  opacity: 1;
  letter-spacing: -.02em;
}
.rs-counter__suffix { margin-left: 2px; }
.rs-stat-card__body {
  font: 400 15px/1.5 var(--font-display);
  color: rgba(255,255,255,.85);
}
.rs-section--light .rs-stat-card__body { color: #2a2a2a; }
.rs-stat-card__body strong { font-weight: 700; color: inherit; }

/* Inline highlight: bold turquoise (cyan on dark panes, teal on light). */
.rs-hl { font-weight: 700; color: var(--tt-cyan); }
.rs-section--light .rs-hl, .right-paper .rs-hl { color: #098f8b; }

/* "Inline" stat card — big number sits LEFT of caption */
.rs-stat-card--inline {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.rs-stat-card--inline .rs-stat-card__num { flex-shrink: 0; min-width: 0; }
.rs-stat-card--inline .rs-stat-card__body { min-width: 0; }
@media (max-width: 600px) {
  .rs-stat-card--inline { flex-direction: column; gap: 12px; }
}

/* ----- Filled magenta card — prose + inline jumbo stats --------- */
.rs-fill-card {
  position: relative;
  padding: 40px 44px;
  border-radius: 28px;
  background: var(--tt-magenta);
  color: #fff;
  margin: 32px 0;
}
.rs-fill-card--cyan { background: var(--tt-cyan); color: #000; }
.rs-fill-card p {
  font: 400 clamp(14px, 1vw, 17px)/1.55 var(--font-display);
  margin: 0 0 18px;
  color: inherit;
  text-wrap: pretty;
}
.rs-fill-card p:last-child { margin-bottom: 0; }
.rs-fill-card__lede {
  font: 400 clamp(15px, 1.1vw, 18px)/1.5 var(--font-display);
  margin: 0 0 28px;
  color: inherit;
  text-wrap: pretty;
}
.rs-fill-card__row {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 18px 0;
}
.rs-fill-card__num {
  flex-shrink: 0;
  font: 800 clamp(46px, 4.6vw, 82px)/.92 var(--font-display);
  letter-spacing: -.025em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: inherit;
  min-width: 2.2em;
  white-space: nowrap;
}
.rs-fill-card__cap {
  font: 500 clamp(15px, 1.1vw, 19px)/1.4 var(--font-display);
  color: inherit;
  text-wrap: pretty;
}
@media (max-width: 600px) {
  .rs-fill-card { padding: 28px 24px; }
  .rs-fill-card__row { flex-direction: column; gap: 8px; }
}

/* ----- Two-pane scene (image-left, content-right) -------------- */
.rs-scene {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #000;
  min-height: 100vh;
}
.rs-scene--light .rs-scene__pane { background: var(--tt-paper-100); color: #000; }
@media (max-width: 900px) {
  .rs-scene { grid-template-columns: 1fr; }
}
.rs-scene__media {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 6vh 4vw;
  color: #fff;
  background-size: cover;
  background-position: center;
}
.rs-scene__media-tag {
  position: absolute;
  top: 22px; left: 22px;
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100rem;
  padding: 6px 14px;
  font: 600 11px var(--font-display);
  letter-spacing: .08em;
  color: #fff;
  z-index: 2;
}
.rs-scene__media-title {
  position: relative;
  z-index: 2;
  font: 800 clamp(36px, 4.6vw, 80px)/.98 var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
  max-width: 16ch;
  text-wrap: balance;
  color: #fff;
}
.rs-scene__media::after {
  /* subtle scrim for legibility */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}
/* Image-backed scenes get the same magenta/cyan brand wash as the hero */
.rs-scene__media--image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 80% at 0% 100%, rgba(254,44,85,.62), transparent 65%),
    radial-gradient(70% 80% at 100% 0%, rgba(37,244,238,.5), transparent 65%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 1;
}
.rs-scene__media--image::after {
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.55) 100%);
}
.rs-scene__media--image .rs-scene__media-tag,
.rs-scene__media--image .rs-scene__media-title {
  z-index: 2;
}

/* ----- Banner SceneSplit (title-over-image, full width, no pane) ---- */
.rs-scene--banner {
  grid-template-columns: 1fr;
  min-height: 0;
}
.rs-scene--banner .rs-scene__media {
  min-height: 56vh;
}
@media (max-width: 900px) {
  .rs-scene--banner .rs-scene__media { min-height: 360px; }
}

/* ----- Showcase band — dedicated dark/gradient stage for inline
 *       standalone embeds. Mirrors the dark section's halo treatment
 *       but uses a wider inner so embeds can sit at their natural
 *       authored width (e.g. 1600px) instead of being squeezed into
 *       the 1200px chapter column.
 * ------------------------------------------------------------------ */
.rs-showcase {
  position: relative;
  background: #000;
  color: #fff;
  padding: 5vh 4vw;
  overflow: hidden;
}
.rs-showcase::before, .rs-showcase::after {
  content: "";
  position: absolute;
  width: 60%; height: 70%;
  filter: blur(240px);
  pointer-events: none;
  opacity: .4;
}
.rs-showcase::before { background: var(--tt-magenta); top: -10%; left: -25%; }
.rs-showcase::after  { background: var(--tt-cyan);    bottom: -15%; right: -25%; }
.rs-showcase__inner {
  position: relative;
  z-index: 1;
  max-width: 1600px;
  margin: 0 auto;
}
/* Inline-embed host (sits inside .rs-showcase__inner — same margins
 * and centring the iframe had previously).
 *
 * The standalone embed was designed at a fixed 1600x1000 stage and
 * fit its container via container queries + transform:scale, which
 * meant fonts shrank with the viewport and content was clipped on
 * narrow widths. Override that here so the embed flows responsively
 * like the rest of the site: pillar grid reflows, fonts stay constant,
 * and content wraps inside narrower boxes.
 * ----------------------------------------------------------------- */
.rs-embed-host { display: block; width: 100%; }

/* Drop the fixed-stage scaling — let everything flow normally */
.rs-embed-host .tt-ireland-infographic {
  container-type: normal;
  aspect-ratio: auto;
}
.rs-embed-host .tt-ig__stage {
  position: static;
  width: auto;
  height: auto;
  transform: none;
}
.rs-embed-host .tt-ig__frame {
  position: static;
  inset: auto;
  padding: 48px 24px;
}

/* Per-instance tweaks */
.rs-embed-host .tt-ig__rail { display: none; }
.rs-embed-host .tt-ig__pillar {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.18);
}
.rs-embed-host .tt-ig__pillar-num { white-space: normal; }
.rs-embed-host .tt-ig__outcome { margin-left: 0; }

/* Responsive grid: 4 cols → 2 cols → 1 col (matches other site grids) */
@media (max-width: 1080px) {
  .rs-embed-host .tt-ig__pillars { grid-template-columns: repeat(2, 1fr); }
  /* The connector SVG only makes sense alongside the 4-col layout */
  .rs-embed-host .tt-ig__connectors { display: none; }
}
@media (max-width: 600px) {
  .rs-embed-host .tt-ig__pillars { grid-template-columns: 1fr; }
  .rs-embed-host .tt-ig__frame { padding: 32px 16px; }
}

/* Hero band: stack vertically on narrow viewports and shrink the
 * giant $2.6 billion so it doesn't overflow its column. */
@media (max-width: 720px) {
  .rs-embed-host .tt-ig__hero {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 24px;
  }
  .rs-embed-host .tt-ig__hero-number { font-size: 88px; }
}
@media (max-width: 480px) {
  .rs-embed-host .tt-ig__hero-number { font-size: 64px; }
}

/* ----- Compact SceneSplit (used for sub-sections within a chapter) -- */
.rs-scene--compact { min-height: 0; }
.rs-scene--compact .rs-scene__media {
  min-height: 320px;
}
.rs-scene--compact .rs-scene__media-title {
  font: 800 clamp(26px, 3vw, 48px)/1.0 var(--font-display);
  letter-spacing: -.015em;
  max-width: 18ch;
}
.rs-scene--compact .rs-scene__media-tag {
  background: var(--tt-cyan);
  color: #000;
  border: none;
  letter-spacing: .14em;
  padding: 5px 12px;
}
.rs-scene--compact .rs-scene__pane {
  padding: 6vh 5vw;
}
.rs-scene--compact .rs-scene__pane::before,
.rs-scene--compact .rs-scene__pane::after { opacity: .25; }
@media (max-width: 900px) {
  .rs-scene--compact .rs-scene__media { min-height: 220px; }
}
.rs-scene__pane {
  position: relative;
  background: #000;
  color: #fff;
  padding: 8vh 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
}
.rs-scene__pane > * { position: relative; z-index: 1; }
.rs-scene__pane::before,
.rs-scene__pane::after {
  content: "";
  position: absolute;
  width: 80%; height: 70%;
  filter: blur(240px);
  pointer-events: none;
  opacity: .45;
}
.rs-scene__pane::before { background: var(--tt-magenta); top: -10%; left: -25%; }
.rs-scene__pane::after  { background: var(--tt-cyan);    bottom: -15%; right: -25%; }
.rs-scene--light .rs-scene__pane::before,
.rs-scene--light .rs-scene__pane::after { display: none; }

/* media gradients — stand in for real B-roll */
.rs-scene__media--warm   { background: linear-gradient(135deg,#3d2418 0%,#702b1c 45%,#1a0a08 100%); }
.rs-scene__media--cool   { background: linear-gradient(135deg,#0d2436 0%,#1a3a52 45%,#070b14 100%); }
.rs-scene__media--market { background: linear-gradient(135deg,#4a2c1a 0%,#2a1610 45%,#0a0606 100%); }
.rs-scene__media--glass  { background: linear-gradient(135deg,#1c2735 0%,#2a3d56 45%,#0a0f17 100%); }
.rs-scene__media--studio { background: linear-gradient(135deg,#2c1a2c 0%,#451d35 45%,#1a0a14 100%); }
.rs-scene__media--street { background: linear-gradient(135deg,#1f1f1f 0%,#2e2e2e 45%,#0a0a0a 100%); }
.rs-scene__media--car    { background: linear-gradient(135deg,#3a2820 0%,#1f1410 45%,#0a0606 100%); }
.rs-scene__media--field  { background: linear-gradient(135deg,#1f3a1f 0%,#0e2210 45%,#050a05 100%); }
.rs-scene__media--coast  { background: linear-gradient(135deg,#0a2a3a 0%,#1a4060 45%,#050f17 100%); }
.rs-scene__media--craft  { background: linear-gradient(135deg,#3a2a18 0%,#1a1208 45%,#0a0706 100%); }
.rs-scene__media--shop   { background: linear-gradient(135deg,#2a1a30 0%,#3a2a44 45%,#0c0810 100%); }
.rs-scene__media--book   { background: linear-gradient(135deg,#2a1a18 0%,#3a2a24 45%,#100806 100%); }
.rs-scene__media--lab    { background: linear-gradient(135deg,#0e1a2a 0%,#1a2c44 45%,#050810 100%); }

/* Soft cyan icon shown beside fill-cards */
.rs-icon-pulse {
  display: inline-flex;
  width: 56px;
  height: 56px;
  color: var(--tt-cyan);
  flex-shrink: 0;
}
.rs-icon-pulse svg { width: 100%; height: 100%; }

/* ----- Pulled stat (large featured stat — dotted border) ------ */
.rs-pull {
  position: relative;
  margin: 56px 0;
  padding: 48px 56px;
  border-radius: 28px;
  background: transparent;
  border: 3px dotted var(--tt-cyan);
  overflow: hidden;
}
.rs-pull--magenta { border-color: var(--tt-magenta); }
.rs-pull__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
}
.rs-section--light .rs-pull { color: #000; }
.rs-section--light .rs-pull__inner { color: #000; }
@media (max-width: 800px) {
  .rs-pull { padding: 36px 28px; }
  .rs-pull__inner { grid-template-columns: 1fr; gap: 16px; }
  .rs-pull__num { font-size: clamp(48px, 12vw, 84px); white-space: normal; }
}
.rs-pull__num {
  font: 800 clamp(56px, 6.8vw, 120px)/.9 var(--font-display);
  letter-spacing: -.035em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  color: var(--tt-cyan);
  white-space: nowrap;
}
.rs-pull--magenta .rs-pull__num { color: var(--tt-magenta); }
.rs-pull__body {
  font: 500 clamp(16px, 1.2vw, 20px)/1.45 var(--font-display);
  color: #fff;
  text-wrap: pretty;
}
.rs-section--light .rs-pull__body { color: #1a1a1a; }
.rs-pull__body strong { color: #fff; font-weight: 700; }
.rs-section--light .rs-pull__body strong { color: #000; }

/* ----- Headline stat (centered, single hero number) ------------ */
.rs-headline-stat {
  margin: 56px 0;
  text-align: center;
}
.rs-headline-stat__num {
  display: block;
  font: 800 clamp(72px, 10vw, 168px)/.85 var(--font-display);
  letter-spacing: -.045em;
  color: var(--tt-cyan);
  font-feature-settings: "tnum" 1, "lnum" 1;
  white-space: nowrap;
}
.rs-headline-stat--magenta .rs-headline-stat__num { color: var(--tt-magenta); }
.rs-headline-stat__cap {
  display: block;
  font: 500 clamp(16px, 1.4vw, 22px)/1.35 var(--font-display);
  color: rgba(255,255,255,.85);
  max-width: 56ch;
  margin: 18px auto 0;
}
.rs-section--light .rs-headline-stat__cap { color: #2a2a2a; }

/* ----- Callout (cyan pill border, glow) ------------------------ */
.rs-callout {
  position: relative;
  margin: 56px 0;
  padding: 36px 36px;
  border: 4px solid var(--tt-cyan);
  border-radius: 20px;
  box-shadow: 0 0 32px 1px rgba(37,244,238,.45);
  background: #000;
  color: #fff;
}
.rs-callout__eyebrow {
  font: 600 12px var(--font-display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tt-cyan);
  margin: 0 0 16px;
}
.rs-callout__title {
  font: 800 clamp(28px, 3.4vw, 52px)/1.0 var(--font-display);
  letter-spacing: -.02em;
  margin: 0 0 24px;
  text-wrap: balance;
}
.rs-callout p {
  font: 400 clamp(15px, 1.05vw, 18px)/1.6 var(--font-display);
  color: rgba(255,255,255,.85);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.rs-callout p strong { color: var(--tt-cyan); font-weight: 700; }
.rs-callout--magenta {
  border-color: var(--tt-magenta);
  box-shadow: 0 0 32px 1px rgba(254,44,85,.55);
}
.rs-callout--magenta .rs-callout__eyebrow { color: var(--tt-magenta); }
.rs-callout--magenta p strong { color: var(--tt-magenta); }

@media (max-width: 720px) {
  .rs-callout { padding: 24px; border-width: 3px; }
}

/* ----- Bar chart (horizontal categorical) ---------------------- */
.rs-bchart {
  margin: 48px 0;
  padding: 32px;
  border-radius: 0 25px 0 25px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.rs-section--light .rs-bchart {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  color: #000;
}
.rs-bchart__head {
  margin-bottom: 28px;
}
.rs-bchart__title {
  font: 700 clamp(18px, 1.6vw, 24px)/1.25 var(--font-display);
  letter-spacing: -.01em;
  margin: 0 0 8px;
  text-wrap: balance;
  max-width: 60ch;
}
.rs-bchart__subtitle {
  font: 400 14px/1.45 var(--font-display);
  margin: 0;
  color: rgba(255,255,255,.65);
  max-width: 70ch;
}
.rs-section--light .rs-bchart__subtitle { color: rgba(0,0,0,.6); }

.rs-bchart__rows { display: flex; flex-direction: column; gap: 14px; }
.rs-bchart__row {
  display: grid;
  grid-template-columns: minmax(180px, 22ch) 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .rs-bchart__row { grid-template-columns: 1fr; gap: 4px; }
}
.rs-bchart__label {
  font: 500 14px/1.35 var(--font-display);
  color: inherit;
  text-wrap: pretty;
}
.rs-bchart__track {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.rs-bchart__fill {
  height: 24px;
  border-radius: 4px;
  background: var(--tt-cyan);
  transition: width 1200ms cubic-bezier(.2,.7,.2,1);
  max-width: calc(100% - 60px);
}
.rs-bchart--magenta .rs-bchart__fill { background: var(--tt-magenta); }
.rs-bchart--gradient .rs-bchart__fill {
  background: linear-gradient(90deg, var(--tt-magenta), var(--tt-cyan));
}
.rs-bchart__pct {
  font: 700 16px var(--font-display);
  letter-spacing: -.01em;
  color: var(--tt-cyan);
  font-feature-settings: "tnum" 1, "lnum" 1;
  flex-shrink: 0;
}
.rs-bchart--magenta .rs-bchart__pct { color: var(--tt-magenta); }
.rs-section--light .rs-bchart__pct { color: inherit; }

.rs-bchart__source {
  margin-top: 24px;
  font: 500 12px var(--font-mono);
  letter-spacing: .06em;
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
}
.rs-section--light .rs-bchart__source { color: rgba(0,0,0,.5); }

/* ----- Stacked bar (likert) ------------------------------------ */
.rs-sbchart {
  margin: 48px 0;
  padding: 32px;
  border-radius: 0 25px 0 25px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff;
}
.rs-section--light .rs-sbchart {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  color: #000;
}
.rs-sbchart__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-bottom: 24px;
}
.rs-sbchart__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 500 12px var(--font-display);
  color: rgba(255,255,255,.78);
}
.rs-section--light .rs-sbchart__legend-item { color: rgba(0,0,0,.72); }
.rs-sbchart__swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}
.rs-sbchart__rows { display: flex; flex-direction: column; gap: 14px; }
.rs-sbchart__row {
  display: grid;
  grid-template-columns: minmax(220px, 28ch) 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .rs-sbchart__row { grid-template-columns: 1fr; gap: 6px; }
}
.rs-sbchart__catlabel {
  font: 500 14px/1.35 var(--font-display);
  text-wrap: pretty;
  color: inherit;
}
.rs-sbchart__bar {
  display: flex;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.05);
}
.rs-section--light .rs-sbchart__bar { background: rgba(0,0,0,.04); }
.rs-sbchart__seg {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 12px var(--font-display);
  color: #fff;
  transition: width 1200ms cubic-bezier(.2,.7,.2,1);
  min-width: 0;
  overflow: hidden;
}
.rs-sbchart__seglabel { white-space: nowrap; }
.rs-chart {
  margin: 40px 0;
  padding: 28px;
  border: 1px dashed rgba(255,255,255,.22);
  border-radius: 0 25px 0 25px;
  background: rgba(255,255,255,.02);
  color: #fff;
}
.rs-section--light .rs-chart {
  border-color: rgba(0,0,0,.18);
  background: #fff;
  color: #000;
}
.rs-chart__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}
.rs-chart__title {
  font: 700 clamp(18px, 1.6vw, 26px)/1.25 var(--font-display);
  letter-spacing: -.01em;
  margin: 0;
  max-width: 40ch;
}
.rs-chart__tag {
  flex-shrink: 0;
  font: 600 10px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tt-cyan);
  border: 1px solid var(--tt-cyan);
  border-radius: 100rem;
  padding: 6px 12px;
  white-space: nowrap;
}
.rs-section--light .rs-chart__tag {
  color: #000;
  border-color: rgba(0,0,0,.4);
}
.rs-chart__skeleton {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  height: 220px;
}
.rs-chart__bar {
  flex: 1;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, rgba(37,244,238,.5), rgba(37,244,238,.1));
  border: 1px solid rgba(37,244,238,.4);
  position: relative;
}
.rs-chart__bar::after {
  content: attr(data-label);
  position: absolute;
  bottom: -22px;
  left: 0; right: 0;
  text-align: center;
  font: 500 11px var(--font-display);
  color: rgba(255,255,255,.5);
}
.rs-section--light .rs-chart__bar {
  background: linear-gradient(180deg, rgba(254,44,85,.35), rgba(254,44,85,.05));
  border-color: rgba(254,44,85,.4);
}
.rs-section--light .rs-chart__bar::after { color: rgba(0,0,0,.5); }
.rs-chart__note {
  margin-top: 36px;
  font: 500 12px var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.rs-section--light .rs-chart__note { color: rgba(0,0,0,.55); }

/* ----- Case study --------------------------------------------- */
.rs-case {
  position: relative;
  margin: 80px 0;
  background: #0a0a0a;
  border-radius: 0 25px 0 25px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.rs-section--light .rs-case {
  background: #000;
  border-color: transparent;
  color: #fff;
}
.rs-case__grid {
  display: flex;
  flex-direction: column;
}
.rs-case__media {
  position: relative;
  background: linear-gradient(135deg, #2a1a1a 0%, #1a1010 50%, #050505 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 32px 40px;
  color: #fff;
}
.rs-case__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 100% at 20% 50%, rgba(254,44,85,.45), transparent 65%),
    radial-gradient(60% 100% at 85% 50%, rgba(37,244,238,.35), transparent 65%);
  filter: blur(60px);
}
.rs-case__media--image::before {
  background:
    radial-gradient(70% 100% at 20% 100%, rgba(254,44,85,.55), transparent 65%),
    radial-gradient(70% 100% at 85% 0%, rgba(37,244,238,.45), transparent 65%);
  filter: none;
  mix-blend-mode: screen;
}
.rs-case__media--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.65) 100%);
  pointer-events: none;
}
.rs-case__media-tag {
  position: absolute;
  top: 20px; left: 24px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 100rem;
  padding: 6px 12px;
  font: 600 11px var(--font-display);
  letter-spacing: .06em;
  z-index: 1;
}
.rs-case__media-name {
  position: relative;
  z-index: 1;
  font: 800 clamp(32px, 4vw, 56px)/.98 var(--font-display);
  letter-spacing: -.02em;
  margin: 0;
}
.rs-case__media-role {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font: 500 14px var(--font-display);
  color: rgba(255,255,255,.78);
}
.rs-case__content {
  padding: 48px 48px 52px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 78ch;
}
.rs-case__eyebrow {
  font: 600 11px var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tt-cyan);
  margin: 0;
}
.rs-case__content p {
  font: 400 clamp(15px, 1.05vw, 17px)/1.6 var(--font-display);
  margin: 0;
  color: rgba(255,255,255,.85);
  text-wrap: pretty;
}
.rs-case__quote {
  position: relative;
  font: 500 clamp(18px, 1.6vw, 24px)/1.3 var(--font-display);
  letter-spacing: -.01em;
  margin: 8px 0;
  padding-left: 22px;
  border-left: 4px solid var(--tt-cyan);
  color: #fff;
  text-wrap: pretty;
}
.rs-case__quote em { font-style: normal; }

/* ----- Standalone attributed pull-quote ------------------------ */
.rs-quote {
  position: relative;
  margin: 40px 0;
  padding-left: 26px;
  border-left: 4px solid var(--tt-magenta);
  max-width: 60ch;
}
.rs-quote--cyan { border-left-color: var(--tt-cyan); }
.rs-quote__body {
  font: 600 clamp(20px, 2vw, 30px)/1.28 var(--font-display);
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.rs-section--dark .rs-quote__body { color: #fff; }
.rs-section--light .rs-quote__body { color: #111; }
.rs-quote__attr {
  margin-top: 16px;
  font: 600 12px var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.rs-section--dark .rs-quote__attr { color: rgba(255,255,255,.55); }
.rs-section--light .rs-quote__attr { color: var(--tt-paper-600); }
@media (max-width: 720px) {
  .rs-case__content { padding: 32px 24px 36px; }
  .rs-case__media { padding: 24px; min-height: 300px; }
}

/* ===================================================================
 * Interactive constituency dot-map (provinces.jsx)
 * Mirrors the standalone Ireland province map. Uses the provided
 * assets/uk-dots.svg as its geometry; each dot is a selectable
 * constituency. Lives in Chapter 2 (TikTok's users in the UK).
 * ================================================================= */
.rs-provmap {
  margin: 56px 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 0 28px 0 28px;
  background: linear-gradient(160deg, #141414 0%, #0a0a0a 100%);
  padding: clamp(24px, 3vw, 44px);
}
.rs-section--light .rs-provmap {
  background: #fff;
  border-color: rgba(0,0,0,.1);
  box-shadow: 0 30px 80px -50px rgba(0,0,0,.4);
}
.rs-provmap__head { max-width: 60ch; margin: 0 0 22px; }
.rs-provmap__title {
  font: 800 clamp(22px, 2.2vw, 32px)/1.05 var(--font-display);
  letter-spacing: -.018em; margin: 0 0 10px;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .rs-provmap__title { white-space: normal; }
}
.rs-section--light .rs-provmap__title { color: #111; }
.rs-provmap__lede {
  font: 400 15px/1.55 var(--font-display);
  margin: 0; color: rgba(255,255,255,.7);
}
.rs-section--light .rs-provmap__lede { color: var(--tt-paper-600); }

.rs-provmap__search {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  margin: 0 0 24px;
}
.rs-provmap__input {
  flex: 1 1 280px; min-width: 0;
  padding: 12px 16px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: #fff;
  font: 500 14px var(--font-display);
}
.rs-section--light .rs-provmap__input {
  background: var(--tt-paper-100); color: #111; border-color: rgba(0,0,0,.16);
}
.rs-provmap__input::placeholder { color: rgba(255,255,255,.4); }
.rs-section--light .rs-provmap__input::placeholder { color: var(--tt-paper-500); }
.rs-provmap__btn {
  padding: 12px 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--tt-cyan); color: #000;
  font: 700 13px var(--font-display); letter-spacing: .02em;
  transition: transform 160ms ease, opacity 160ms ease;
}
.rs-provmap__btn:hover { transform: translateY(-1px); opacity: .92; }
.rs-provmap__select {
  flex: 0 1 220px; min-width: 0;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04); color: #fff;
  font: 500 14px var(--font-display); cursor: pointer;
}
.rs-section--light .rs-provmap__select {
  background: var(--tt-paper-100); color: #111; border-color: rgba(0,0,0,.16);
}
.rs-provmap__msg { flex: 1 1 100%; font: 500 13px var(--font-display); }
.rs-provmap__msg.is-ok { color: var(--tt-cyan); }
.rs-provmap__msg.is-err { color: var(--tt-magenta); }

.rs-provmap__body {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: start;
}
@media (max-width: 820px) {
  .rs-provmap__body { grid-template-columns: 1fr; gap: 24px; }
}
.rs-provmap__mapwrap {
  position: relative;
  border-radius: 18px; overflow: hidden;
  background: rgba(255,255,255,.02);
  padding: 12px;
}
.rs-section--light .rs-provmap__mapwrap { background: var(--tt-paper-100); }
.rs-provmap__svghost { width: 100%; }
.rs-provmap__svg { width: 100%; height: auto; display: block; overflow: visible; }
.rs-provmap__svg path, .rs-provmap__svg circle { transition: fill 220ms ease; }
.rs-provmap__loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 280px; color: rgba(255,255,255,.45);
  font: 600 12px var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  text-align: center; padding: 24px;
}
.rs-section--light .rs-provmap__loading { color: var(--tt-paper-500); }

.rs-provmap__panel {
  border-radius: 16px; padding: 26px;
  border: 1px solid rgba(37,244,238,.4);
  background: linear-gradient(165deg, rgba(37,244,238,.08), rgba(37,244,238,.02));
}
.rs-section--light .rs-provmap__panel { background: linear-gradient(165deg, rgba(37,244,238,.1), rgba(37,244,238,.02)); }
.rs-provmap__panel-head { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; }
.rs-provmap__dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.rs-provmap__panel-title {
  font: 800 clamp(18px, 1.8vw, 24px)/1.1 var(--font-display);
  letter-spacing: -.01em; margin: 0;
}
.rs-section--light .rs-provmap__panel-title { color: #111; }
.rs-provmap__panel-region {
  font: 600 12px var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tt-paper-500); margin-top: 4px;
}
/* Northern Ireland stats (NI isn't in the MRP question data) */
.rs-provmap__nistats { display: grid; gap: 16px; margin: 2px 0 4px; }
.rs-provmap__nistat { display: flex; align-items: baseline; gap: 14px; }
.rs-provmap__nistat-num {
  flex: 0 0 auto;
  min-width: 2.4em;
  font: 800 clamp(28px, 3vw, 40px)/1 var(--font-display);
  letter-spacing: -.02em;
  color: var(--tt-cyan);
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.rs-section--light .rs-provmap__nistat-num { color: #0c8f88; }
.rs-provmap__nistat-txt { font: 500 13.5px/1.4 var(--font-display); color: rgba(255,255,255,.85); text-wrap: pretty; }
.rs-section--light .rs-provmap__nistat-txt { color: #222; }

/* question results */
.rs-provmap__qs { display: grid; gap: 20px; }
.rs-provmap__q-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.rs-provmap__q-label { font: 500 13.5px/1.35 var(--font-display); color: rgba(255,255,255,.85); text-wrap: pretty; }
.rs-section--light .rs-provmap__q-label { color: #222; }
.rs-provmap__q-agree { flex: none; font: 800 16px var(--font-display); color: var(--tt-cyan); }
.rs-section--light .rs-provmap__q-agree { color: #0c8f88; }
.rs-provmap__q-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: rgba(0,0,0,.15); }
.rs-provmap__seg { height: 100%; }
.rs-provmap__seg--a { background: var(--tt-cyan); }
.rs-provmap__seg--n { background: rgba(255,255,255,.28); }
.rs-section--light .rs-provmap__seg--n { background: var(--tt-paper-300); }
.rs-provmap__seg--d { background: var(--tt-magenta); }
.rs-provmap__note {
  margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px 16px;
  font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45);
}
.rs-section--light .rs-provmap__note { color: var(--tt-paper-500); }
.rs-provmap__key { display: inline-flex; align-items: center; gap: 6px; }
.rs-provmap__kc { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.rs-provmap__kc--a { background: var(--tt-cyan); }
.rs-provmap__kc--n { background: var(--tt-paper-300); }
.rs-provmap__kc--d { background: var(--tt-magenta); }
.rs-provmap__panel-empty { display: flex; align-items: center; min-height: 120px; }

/* search combobox + results dropdown */
.rs-provmap__search--combobox { display: block; }
.rs-provmap__inputwrap { position: relative; max-width: 560px; }
.rs-provmap__results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px; max-height: 320px; overflow: auto;
  background: #15151a; border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.7);
}
.rs-section--light .rs-provmap__results { background: #fff; border-color: rgba(0,0,0,.12); }
.rs-provmap__result {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  text-align: left; font: 500 15px var(--font-display); color: #fff;
}
.rs-section--light .rs-provmap__result { color: #111; }
.rs-provmap__result:hover, .rs-provmap__result:focus-visible {
  background: rgba(254,44,85,.16); outline: none;
}
.rs-provmap__result-reg { flex: none; font: 600 11px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; opacity: .6; }
.rs-provmap__result-via { font-style: normal; font-weight: 500; opacity: .55; }
.rs-provmap__search--combobox .rs-provmap__msg { display: block; margin-top: 10px; }

/* ----- Image placeholder --------------------------------------- */
.rs-imgholder {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 56px 0;
  min-height: 320px;
  border-radius: 0 25px 0 25px;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.5);
  font: 600 12px var(--font-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* ----- Sub-section divider headline ---------------------------- */
.rs-subhead {
  font: 800 clamp(24px, 2.8vw, 40px)/1.05 var(--font-display);
  letter-spacing: -.018em;
  margin: 48px 0 24px;
  max-width: 28ch;
  text-wrap: balance;
}
.rs-subhead--tertiary {
  font: 700 clamp(20px, 1.8vw, 28px)/1.1 var(--font-display);
  margin: 32px 0 18px;
  letter-spacing: -.01em;
}
.rs-subhead--center {
  max-width: none;
  text-align: center;
  margin: 40px auto;
}

/* ----- About / methodology grid -------------------------------- */
.rs-about {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin-top: 40px;
}
@media (max-width: 800px) {
  .rs-about { grid-template-columns: 1fr; gap: 36px; }
}
.rs-about h3 {
  font: 800 22px var(--font-display);
  margin: 0 0 16px;
  letter-spacing: -.01em;
}
.rs-about ul.bare {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rs-about ul.bare li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-left: 0;
  font: 500 16px var(--font-display);
}
.rs-about ul.bare li::before { display: none; }
.rs-about ul.bare li .num {
  flex-shrink: 0;
  font: 800 32px var(--font-display);
  color: var(--tt-cyan);
  letter-spacing: -.02em;
  min-width: 80px;
}

/* ----- Closing section (methodology link) ---------------------- */
.rs-closing {
  position: relative;
  background: #000;
  color: #fff;
  padding: 14vh 6vw;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08);
}
.rs-closing::before, .rs-closing::after {
  content: "";
  position: absolute;
  width: 60%; height: 70%;
  filter: blur(220px);
  pointer-events: none;
  opacity: .45;
}
.rs-closing::before { background: var(--tt-magenta); top: -20%; left: -25%; }
.rs-closing::after  { background: var(--tt-cyan);    bottom: -20%; right: -25%; }
.rs-closing__inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.rs-closing__title {
  font: 800 clamp(32px, 4.4vw, 64px)/1.05 var(--font-display);
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}
.rs-closing__btn {
  margin-top: 8px;
  padding: 18px 32px;
  font-size: 16px;
}

/* ----- Closing CTA (legacy pill — no longer used in App) -------- */
.rs-cta {
  position: relative;
  min-height: 80vh;
  background: #000;
  color: #fff;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 8vh 6vw;
}
.rs-cta__bg-blur {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 70% at 18% 50%, rgba(254,44,85,.55), transparent 65%),
    radial-gradient(60% 70% at 82% 50%, rgba(37,244,238,.55), transparent 65%);
  filter: blur(60px);
}
.rs-cta__pill {
  position: absolute;
  top: 50%; left: -300px;
  transform: translateY(-50%);
  width: 1100px;
  height: 320px;
  border: 10px solid var(--tt-cyan);
  border-radius: 100rem 0 0 100rem;
  box-shadow: 0 0 32px 1px rgba(37,244,238,.85);
  pointer-events: none;
}
.rs-cta__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
  max-width: 540px;
  text-align: right;
}
.rs-cta__title {
  font: 800 clamp(48px, 6vw, 96px)/.98 var(--font-display);
  letter-spacing: -.025em;
  margin: 18px 0 22px;
}
.rs-cta__sub {
  font: 400 17px/1.5 var(--font-display);
  color: rgba(255,255,255,.78);
  margin: 0 0 32px;
}

.rs-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 700 15px var(--font-display);
  padding: 16px 28px;
  border-radius: 100rem;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 160ms ease, transform 160ms ease;
}
.rs-btn--cyan { background: var(--tt-cyan); color: #000; }
.rs-btn--cyan:hover { opacity: .85; }
.rs-btn--cyan:active { transform: translateY(1px); }

.rs-footer {
  background: #000;
  color: rgba(255,255,255,.72);
  border-top: 1px solid rgba(255,255,255,.1);
  padding: 36px 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rs-footer__logo { height: 22px; }
.rs-footer__meta {
  display: flex; gap: 10px; align-items: center;
  font: 500 13px var(--font-display);
  flex-wrap: wrap;
}
.rs-footer__dot { color: var(--tt-cyan); }
.rs-footer__meta a { color: inherit; text-underline-offset: 3px; }

/* ----- TOC nav -------------------------------------------------- */
.rs-toc {
  position: relative;
  background: #000;
  color: #fff;
  padding: 80px 6vw 80px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.rs-toc__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
}
@media (max-width: 900px) {
  .rs-toc__inner { grid-template-columns: 1fr; gap: 48px; }
}
.rs-toc__label {
  font: 600 12px var(--font-display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 0 0 32px;
}
.rs-toc__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.rs-toc__list a {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-decoration: none;
  color: #fff;
  transition: opacity 160ms ease;
}
.rs-toc__list a:hover { opacity: .7; }
.rs-toc__list .num {
  font: 700 12px var(--font-mono);
  color: var(--tt-cyan);
  letter-spacing: .12em;
  min-width: 36px;
}
.rs-toc__list .ttl {
  font: 600 clamp(18px, 1.6vw, 22px)/1.25 var(--font-display);
  letter-spacing: -.01em;
}

/* ----- About-the-research aside (in TOC block) ---------------- */
.rs-aboutaside {
  font-size: 14px;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
}
.rs-aboutaside h4 {
  font: 700 14px var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin: 0 0 16px;
}
.rs-aboutaside p {
  margin: 0 0 12px;
  color: inherit;
  text-wrap: pretty;
}
.rs-aboutaside ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-aboutaside li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-left: 0;
}
.rs-aboutaside li .num {
  flex-shrink: 0;
  font: 700 16px var(--font-display);
  color: var(--tt-cyan);
  min-width: 60px;
}
.rs-aboutaside li .lbl {
  color: rgba(255,255,255,.7);
}
.rs-aboutaside__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 24px 0;
}
.rs-aboutaside__eylink {
  font-weight: 700;
  color: var(--tt-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(37,244,238,.4);
  transition: color .2s ease, border-color .2s ease;
}
.rs-aboutaside__eylink:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* Solid, auto-width stat chips (used in the Casual Creators boxout) */
.rs-stats--chips { display: flex; }
.rs-stats--chips .rs-stat-card {
  width: auto;
  max-width: 400px;
  border: none;
  padding: 20px 26px;
  color: #fff;
}
.rs-stats--chips .rs-stat-card__num,
.rs-stats--chips .rs-stat-card__body,
.rs-stats--chips .rs-stat-card__body strong { color: #fff; }
.rs-stats--chips .rs-stat-card--cyan    { background: #098f8b; box-shadow: 0 0 26px rgba(9,143,139,.3); }
.rs-stats--chips .rs-stat-card--magenta { background: var(--tt-magenta); box-shadow: 0 0 26px rgba(254,44,85,.28); }
.rs-stats--chips-center { justify-content: center; }
.rs-stats--chips-right  { justify-content: flex-end; }

/* Split row: stat chip beside its paragraph (Casual Creators boxout) */
.rs-split { display: flex; align-items: center; gap: 28px; margin: 22px 0; }
.rs-split__text { flex: 1 1 0; min-width: 0; margin: 0; }
.rs-split .rs-stats--chips { flex: 0 0 auto; margin: 0; }
@media (max-width: 700px) {
  .rs-split { flex-direction: column; align-items: stretch; gap: 14px; }
}

/* ===================================================================
 * WebKit compositing relief (mobile)
 * iOS (Safari AND Chrome — both WebKit) gives every filtered, masked,
 * blended or transformed element its own composited layer with a
 * full-size GPU backing store. Dozens of section-sized glow layers
 * exhaust tile memory (blank panes) and crash the tab; Android/Blink
 * is unaffected. On mobile all decorations become plain painted
 * gradients. This block must stay at the END of the file so its
 * background-image declarations beat the background shorthands above.
 * =================================================================== */
@media (max-width: 900px) {
  .rs-hero::before, .rs-hero::after,
  .rs-chapter::before, .rs-chapter::after,
  .rs-section--dark::before, .rs-section--dark::after,
  .rs-showcase::before, .rs-showcase::after,
  .rs-scene__pane::before, .rs-scene__pane::after,
  .rs-closing::before, .rs-closing::after { content: none; }

  .rs-hero {
    background-image:
      radial-gradient(60% 55% at 8% 5%, rgba(254,44,85,.32), transparent 70%),
      radial-gradient(60% 55% at 92% 95%, rgba(37,244,238,.26), transparent 70%);
  }
  .rs-chapter, .rs-closing {
    background-image:
      radial-gradient(55% 50% at 8% 8%, rgba(254,44,85,.26), transparent 70%),
      radial-gradient(55% 50% at 92% 92%, rgba(37,244,238,.22), transparent 70%);
  }
  .rs-section--dark, .rs-showcase, .rs-scene__pane {
    background-image:
      radial-gradient(50% 45% at 6% 10%, rgba(254,44,85,.20), transparent 70%),
      radial-gradient(50% 45% at 94% 90%, rgba(37,244,238,.17), transparent 70%);
  }
  .rs-scene--light .rs-scene__pane { background-image: none; }

  /* blended image-overlay gradients: paint them plainly */
  .rs-case__media::before, .rs-cta__bg-blur { filter: none; }
  .rs-case__media--image::before,
  .rs-scene__media--image::before,
  .rs-scene__media::before { mix-blend-mode: normal; opacity: .55; }
}