/* =====================================================================
 *  TikTok Spain EIR 2026 — site styles
 *  Builds on tokens from assets/colors_and_type.css
 * ================================================================= */

html, body { height: 100%; }
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; } }

/* ----- 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;
  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); }
.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-cover.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__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--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: 64ch; }
.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;
}
.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: .55em;
  opacity: .9;
  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" stat card — big number sits LEFT of caption */
.rs-stat-card--inline {
  flex-direction: row;
  align-items: baseline;
  gap: 28px;
}
.rs-stat-card--inline .rs-stat-card__num { flex-shrink: 0; min-width: 0; }
.rs-stat-card--inline .rs-stat-card__body { flex: 1; min-width: 0; max-width: 38ch; }
@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: baseline;
  gap: 24px;
  margin: 18px 0;
}
.rs-fill-card__num {
  flex-shrink: 0;
  font: 800 clamp(36px, 3.6vw, 60px)/.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; }
}

.rs-scene__pane .rs-prose { max-width: none; }
.rs-scene__pane .rs-prose p { color: rgba(255,255,255,.88); }
.rs-scene__pane .rs-prose p:first-child { font-size: clamp(17px, 1.25vw, 21px); line-height: 1.45; color: #fff; }
.rs-scene__pane .rs-prose + .rs-fill-card { margin-top: 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;
}

/* ----- 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: 280px;
  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; }
@media (max-width: 720px) {
  .rs-case__content { padding: 32px 24px 36px; }
  .rs-case__media { padding: 24px; min-height: 200px; }
}

/* ----- 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;
}

/* ----- 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;
}