/* ==========================================================================
   TKD Ringside redesign stylesheet (branch `redesign`)
   Source of truth: design/design-system.md (Part A wins over Part B).
   Piece 2: tokens, floating nav, hero launch panel, coverage rail.
   Piece 3: the middle of the page (section 7). Piece 4: footer (section 8),
   whole-page motion and phone passes.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  --color-cloud-canvas: #e1f2ff;
  --color-ice-surface: #eff8ff;
  --color-white-surface: #ffffff;
  --color-mist-divider: #d3e2f1;
  --color-graphite: #666666;
  --color-rail-slate: #4f555c;   /* bunny.net logo-rail grey (measured 2026-09-28) */
  --color-edge-navy: #183d6d;
  --color-launch-bay: #051e38;
  --color-network-deep: #022e57;
  --color-signal-blue: #8bb3da;
  --color-signal-orange: #fd8d32;
  --gradient-coral-launch: linear-gradient(180deg, #ff7a53, #ffa84a);
  --gradient-comet-spectrum: linear-gradient(85.19deg, #ff2a64 -133.27%, #ffaf48 105.93%);

  /* Motion: one easing and three speeds for every hover and state change */
  --ease: cubic-bezier(.33, 0, .2, 1);
  --t-fast: .2s;
  --t-mid: .3s;
  --t-slow: .45s;

  --font-rubik: 'Rubik', 'Arial Rounded MT Bold', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --text-caption: 14px;  --leading-caption: 2.07;
  --text-body: 18px;     --leading-body: 1.2;
  --text-card-title: 20px; --leading-card-title: 1.3;
  --text-rating: 28px;   --leading-rating: 1;
  --text-section-heading: 45px; --leading-section-heading: 1.2;
  --text-promo-heading: 45px;   --leading-promo-heading: 1.3;
  --text-hero-display: 54px;    --leading-hero-display: 1.2;

  --page-max-width: 1140px;
  --section-gap: 32px;
  --card-padding: 30px;
  --element-gap: 15px;

  --radius-hero: 20px;
  /* One treatment for the dark banners below the rail (promo, Rep Forge, closing) */
  --panel-dark-bg:
    radial-gradient(55% 70% at 85% 30%, rgba(24, 61, 109, .85) 0%, rgba(5, 30, 56, 0) 70%),
    linear-gradient(160deg, var(--color-network-deep) 0%, var(--color-launch-bay) 60%, var(--color-launch-bay) 100%);
  --radius-cards: 10px;
  --radius-pills: 9999px;
  --radius-images: 20px;
  --radius-buttons: 6px;
  --radius-navigation: 20px;

  --shadow-xl: rgba(0, 0, 0, 0.04) 0px 6px 40px 0px;
  --shadow-md: rgb(212, 211, 221) 0px 4px 11px 0px;
  --shadow-phone: rgba(5, 30, 56, 0.22) 0px 24px 48px -16px;
  --radius-phone: 32px;
  --phone-bezel: 6px;      /* the dark rim around an app screenshot */

  /* Layout helpers */
  --gutter: 16px;          /* page side gutter (phone) */
  --island-gap: 8px;       /* pale blue visible either side of a dark island */
  --nav-h: 56px;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; --island-gap: 12px; }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; --island-gap: 16px; --nav-h: 60px; }
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;               /* art may cross island edges; never page-scroll sideways */
}

body {
  margin: 0;
  background: var(--color-cloud-canvas);
  color: var(--color-edge-navy);
  font-family: var(--font-rubik);
  font-size: var(--text-body);
  line-height: 1.5;
  font-feature-settings: "kern";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.rs-wrap {
  width: 100%;
  max-width: calc(var(--page-max-width) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

:focus-visible {
  outline: 3px solid var(--color-edge-navy);
  outline-offset: 3px;
  border-radius: 4px;
}
.rs-hero :focus-visible,
.rs-header :focus-visible {
  outline-color: var(--color-white-surface);
}

.rs-skip {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-buttons);
  background: var(--color-white-surface);
  color: var(--color-edge-navy);
  font-weight: 500;
  text-decoration: none;
  transition: top .2s ease;
}
.rs-skip:focus { top: 16px; }

/* ---------- 3. Buttons ---------- */
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: var(--radius-buttons);
  font-family: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}

/* Outlined secondary control */
.rs-btn--outline {
  padding: 9px 16px;
  border: 1px solid var(--color-white-surface);
  background: transparent;
  color: var(--color-white-surface);
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
}
.rs-btn--outline:hover { background: rgba(255, 255, 255, .1); }

/* Coral Launch primary control (nav scale) */
.rs-btn--launch {
  padding: 10px 17px;
  border: 0;
  background: var(--gradient-coral-launch);
  color: var(--color-white-surface);
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
}
/* A gradient cannot fade, so the hover layers Signal Orange over it in a way that can. */
.rs-btn--launch:hover { box-shadow: inset 0 0 0 100px rgba(253, 141, 50, .35); }
/* Shine sweep on hover, as on bunny.net: a faint white diagonal bar waits just
   off the left edge and slides across the button (0.55 s, fast-out ease). */
.rs-btn--launch { position: relative; overflow: hidden; isolation: isolate; }
.rs-btn--launch::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -75px;
  z-index: -1;
  width: 50px;
  height: 200%;
  background: #fff;
  opacity: .2;
  transform: rotate(35deg);
  transition: left .55s cubic-bezier(.19, 1, .22, 1);
  pointer-events: none;
}
.rs-btn--launch:hover::before,
.rs-btn--launch:focus-visible::before { left: calc(100% + 25px); }
@media (prefers-reduced-motion: reduce) { .rs-btn--launch::before { display: none; } }

/* Navy outlined control for light surfaces (not a conversion) */
.rs-btn--navy {
  padding: 12px 18px;
  border: 1px solid var(--color-edge-navy);
  background: transparent;
  color: var(--color-edge-navy);
  font-size: 16px;
  line-height: 19px;
  font-weight: 500;
}
.rs-btn--navy:hover { background-color: rgba(24, 61, 109, .07); }
.rs-btn--navy .rs-chevron { width: 18px; height: 18px; }

/* Conversion button (hero scale, with chevron) */
.rs-btn--convert {
  padding: 18px 26px 18px 28px;
  font-size: 20px;
  line-height: 24px;
  gap: 18px;
}
.rs-chevron {
  width: 22px; height: 22px;
  flex: none;
  transition: transform var(--t-mid) var(--ease);
}
.rs-btn:hover .rs-chevron { transform: translateX(4px); }
/* Narrow phones: the conversion label and chevron still fit inside a card. */
@media (max-width: 359px) {
  .rs-btn--convert { padding: 16px 14px 16px 16px; gap: 8px; white-space: normal; text-align: left; }
}

/* ---------- 3b. Dated announcement bar ----------
   A full-width Coral Launch strip above the hero island, for a short-lived
   announcement that links to a conversion page. One line, fixed height, so the
   floating nav (absolute, top of page) can be pushed down by exactly that much. */
:root { --annbar-h: 48px; }
.rs-annbar {
  display: block;
  height: var(--annbar-h);
  background: var(--gradient-coral-launch);
  color: var(--color-white-surface);
  text-decoration: none;
  overflow: hidden;
}
.rs-annbar-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 100%;
  padding: 0 var(--gutter);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}
.rs-annbar strong { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.rs-annbar-icon { flex: none; width: 22px; height: 22px; }
.rs-annbar-cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 12px;
  border-radius: var(--radius-pills);
  background: var(--color-launch-bay);
  font-weight: 500;
  font-size: 14px;
}
.rs-annbar-cta svg { width: 16px; height: 16px; transition: transform var(--t-mid) var(--ease); }
.rs-annbar:hover .rs-annbar-cta svg { transform: translateX(3px); }
.rs-annbar:focus-visible { outline: 3px solid var(--color-launch-bay); outline-offset: -3px; }
.rs-annbar-short { display: none; }
@media (max-width: 479px) {
  .rs-annbar-long { display: none; }
  .rs-annbar-short { display: inline; }
  .rs-annbar-icon { display: none; }
  .rs-annbar-in { gap: 8px; font-size: 14px; justify-content: space-between; }
}
@media (max-width: 359px) {
  .rs-annbar-in { font-size: 13px; }
  .rs-annbar-cta { padding: 6px 9px; font-size: 13px; }
}
@media (min-width: 900px) { .rs-annbar-in { font-size: 17px; } }
@media (prefers-reduced-motion: reduce) { .rs-annbar-cta svg { transition: none; } }

/* ---------- 4. Floating dark nav ---------- */
.rs-header {
  position: absolute;
  top: calc(var(--island-gap) + 12px);
  left: 0; right: 0;
  z-index: 20;
}
@media (min-width: 1024px) {
  .rs-header { top: calc(var(--island-gap) + 16px); }
}
/* An announcement bar sits above the island: push the nav down by its height
   (only while the nav is in the hero, not once it floats). */
.has-annbar .rs-header:not(.is-floating) { top: calc(var(--island-gap) + 12px + var(--annbar-h)); }
@media (min-width: 1024px) {
  .has-annbar .rs-header:not(.is-floating) { top: calc(var(--island-gap) + 16px + var(--annbar-h)); }
}
/* Scrolled past the hero: the bar floats fixed at the top. It hides while the
   reader scrolls down and slides back in the moment they scroll up. */
.rs-header.is-floating {
  position: fixed;
  top: 12px;
  transform: translateY(calc(-100% - 24px));
  transition: transform .35s var(--ease);
}
.rs-header.is-floating.is-shown { transform: none; }
.rs-header.is-floating .rs-nav { background: rgba(5, 30, 56, .94); }   /* Launch Bay; reads as navy over the pale sections */
.rs-header.is-floating.no-anim { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rs-header.is-floating { transition: none; }
}

.rs-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  min-height: var(--nav-h);
  padding: 8px 10px 8px 18px;
  border-radius: var(--radius-navigation);
  background: rgba(5, 30, 56, .72);        /* Launch Bay, translucent */
  color: var(--color-white-surface);
  font-size: 16px;
  line-height: 19px;
  border: 1px solid rgba(139, 179, 218, .16);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.rs-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  min-height: 44px;
  margin-right: auto;
  border-radius: 6px;
}
.rs-logo img { height: 28px; width: auto; }

.rs-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: var(--radius-buttons);
  background: transparent;
  cursor: pointer;
}
.rs-toggle span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--color-white-surface);
  transition: transform .25s ease, opacity .2s ease;
}
.rs-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rs-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rs-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Phone / tablet: the menu drops below the bar */
.rs-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  padding: 10px;
  border-radius: var(--radius-navigation);
  background: var(--color-launch-bay);
  border: 1px solid rgba(139, 179, 218, .2);
  box-shadow: var(--shadow-xl);
}
.rs-menu.is-open {
  display: block;
  animation: rs-reveal-down .25s ease-out both;
}
.rs-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 5px 10px;
  border-radius: var(--radius-buttons);
  color: var(--color-white-surface);
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.rs-links a:hover { background: rgba(139, 179, 218, .12); }
.rs-links a { transition: background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.rs-links a[aria-current="page"] { color: var(--color-white-surface); box-shadow: inset 3px 0 0 var(--color-signal-blue); }

.rs-actions {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 179, 218, .16);
}
.rs-actions .rs-btn { min-height: 44px; padding: 10px; }

@media (min-width: 1024px) {
  .rs-toggle { display: none; }
  .rs-menu,
  .rs-menu.is-open {
    display: flex;
    align-items: center;
    gap: 15px;
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
  }
  .rs-links { display: flex; align-items: center; gap: 15px; }
  .rs-links a { min-height: 0; padding: 8px 0; border-radius: 0; box-shadow: inset 0 -2px 0 rgba(139, 179, 218, 0); }
  .rs-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--color-signal-blue); }
  .rs-links a:hover { background: none; box-shadow: inset 0 -2px 0 rgba(139, 179, 218, .5); }
  .rs-links a[aria-current="page"]:hover { box-shadow: inset 0 -2px 0 var(--color-signal-blue); }
  .rs-actions {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .rs-actions .rs-btn { min-height: 0; }
  .rs-actions .rs-btn--outline { padding: 10px; }
  .rs-actions .rs-btn--launch { padding: 10px; }
}

/* ---------- 5. Hero launch panel ---------- */
.rs-hero {
  position: relative;
  margin: var(--island-gap) var(--island-gap) 0;
  max-width: 1408px;
  border-radius: var(--radius-hero);
  background:
    radial-gradient(60% 70% at 78% 42%, rgba(24, 61, 109, .9) 0%, rgba(2, 46, 87, .45) 45%, rgba(5, 30, 56, 0) 72%),
    radial-gradient(45% 55% at 8% 100%, rgba(2, 46, 87, .9) 0%, rgba(5, 30, 56, 0) 70%),
    linear-gradient(160deg, var(--color-network-deep) 0%, var(--color-launch-bay) 55%, var(--color-launch-bay) 100%);
  color: var(--color-white-surface);
  isolation: isolate;
}
@media (min-width: 1440px) {
  .rs-hero { margin-inline: auto; }
}

/* Backdrop layer: clipped to the island, sits behind everything */
.rs-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.rs-hero-bg::after {             /* soft static glow */
  content: "";
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  right: -8%;
  top: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139, 179, 218, .16) 0%, rgba(139, 179, 218, 0) 65%);
}

.rs-orbits {
  position: absolute;
  right: -12%;
  top: 4%;
  width: 82%;
  height: auto;
  opacity: .9;
}
/* The dash pattern repeats every 16 units; the loop moves exactly 40 of them, so it never skips. */
.rs-orbits .rs-orbit-dash { animation: rs-orbit 64s linear infinite; }

@media (max-width: 899px) {
  .rs-orbits { width: 170%; right: -60%; top: auto; bottom: -6%; }
}

/* Stars (static) and breathing signal dots. Motion budget per dark panel:
   the character's float, the breathing dots and one slow orbit line. */
.rs-star {
  position: absolute;
  width: var(--s, 14px);
  height: var(--s, 14px);
  color: var(--c, var(--color-signal-blue));
  opacity: .85;
}
.rs-dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-signal-blue);
}
.rs-dot::after {
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: var(--color-signal-blue);
  opacity: 0;
  transform: scale(0);
  animation: rs-breathe 2.8s ease-out var(--delay, 0s) infinite;
}
.rs-dot--white { background: var(--color-white-surface); }
.rs-dot--white::after { background: var(--color-white-surface); }

/* Decoration that would sit on the copy at phone width */
@media (max-width: 899px) { .rs-deco-wide { display: none; } }
@media (min-width: 900px) { .rs-deco-narrow { display: none; } }

/* Hero layout */
.rs-hero-inner {
  position: relative;
  display: grid;
  gap: 28px;
  padding-top: calc(var(--nav-h) + 12px + 44px);
  padding-bottom: 0;
}

.rs-hero-copy { position: relative; z-index: 2; max-width: 560px; }


.rs-hero h1 {
  font-size: clamp(38px, 10.4vw, var(--text-hero-display));
  line-height: var(--leading-hero-display);
  font-weight: 700;
  letter-spacing: normal;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.rs-hero h1 span { display: block; }
/* "Tournament day," stays on one line where the copy column is narrow (Adam, 2026-09-28) */
#hero-title { font-size: clamp(30px, 9.8vw, var(--text-hero-display)); }
@media (min-width: 900px) and (max-width: 1199px) {
  #hero-title { font-size: 46px; }
}
.rs-hero .rs-kicker {               /* caption role */
  margin-bottom: 6px;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 400;
}

.rs-lede {
  margin-top: 20px;
  max-width: 470px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-white-surface);
}

.rs-cta-row { margin-top: 30px; }
.rs-hero .rs-btn--convert { width: 100%; max-width: 340px; justify-content: space-between; }
@media (min-width: 480px) {
  .rs-hero .rs-btn--convert { width: auto; justify-content: center; }
}

.rs-reassure {
  margin-top: 14px;
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 500;
  color: var(--color-white-surface);
}

.rs-stores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin-top: 26px;
}
/* Hero: App Store, Google Play and the web-app badge in one row. The store
   files are trimmed to the plate, so every badge is the same 44 px height. */
.rs-stores--hero { gap: 12px; }
.rs-stores--hero .rs-store img { height: 44px; width: auto; }
.rs-store--web {
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 14px 0 11px;
  border: 1px solid #a6a6a6;
  border-radius: 8px;
  background: #000;
  color: #fff;
  text-decoration: none;
}
.rs-store--web svg { width: 24px; height: 24px; flex: none; }
.rs-store-web-text { display: flex; flex-direction: column; line-height: 1; }
.rs-store-web-text small { font-size: 10px; font-weight: 400; letter-spacing: 0; }
.rs-store-web-text strong { font-size: 19px; font-weight: 400; margin-top: 2px; }
.rs-store--web:focus-visible { outline: 2px solid var(--color-white-surface); outline-offset: 3px; }
.rs-store {
  display: inline-flex;
  border-radius: var(--radius-buttons);
  transition: transform var(--t-mid) var(--ease);
}
.rs-store img { height: 52px; width: auto; }
@media (min-width: 900px) { .rs-store img { height: 56px; } }
.rs-store:hover { transform: scale(1.1); }
.rs-web-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 16px;
  line-height: 19px;
  font-weight: 400;
  color: var(--color-white-surface);
  text-decoration: underline;
  text-decoration-color: rgba(139, 179, 218, .6);
  text-underline-offset: 5px;
  transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease);
}
.rs-web-link:hover { text-decoration-color: var(--color-white-surface); }
/* Phones and tablets: an outlined control, as easy to find as the store badges */
@media (max-width: 899px) {
  .rs-web-link {
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--color-white-surface);
    border-radius: var(--radius-buttons);
    text-decoration: none;
    transition: background-color var(--t-fast) var(--ease);
  }
  .rs-web-link:hover { background-color: rgba(255, 255, 255, .1); }
}
.rs-web-link svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-mid) var(--ease); }
.rs-web-link:hover svg { transform: translateX(4px); }

/* Character art: phones and tablets stack it under the copy,
   crossing the island's bottom edge. The box keeps the aspect of a
   ~1060 x 900 transparent cut-out; object-fit keeps any replacement inside. */
.rs-hero-art {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  margin: 0 auto -56px;
  aspect-ratio: 1060 / 900;
  pointer-events: none;
}
.rs-hero-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  animation: rs-float 7s ease-in-out infinite;
}

@media (min-width: 900px) {
  .rs-hero-inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 660px;
    align-content: center;
    padding-top: calc(var(--nav-h) + 16px + 64px);
    padding-bottom: 88px;
  }
  .rs-hero-copy { max-width: min(560px, 48%); }
  .rs-hero-art {
    position: absolute;
    right: calc(-1 * var(--gutter) + 8px);
    bottom: -64px;
    width: min(56%, 690px);
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .rs-hero-inner { min-height: 700px; }
  .rs-hero-art { right: -28px; width: min(58%, 720px); }
}

/* ---------- 6. Coverage rail ---------- */
.rs-rail {
  position: relative;
  padding: 92px 0 40px;       /* room for the art that crosses the island edge */
  overflow: hidden;
}
@media (min-width: 900px) {
  .rs-rail { padding-top: 104px; }
}
.rs-rail-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rs-rail-track {
  display: flex;
  width: max-content;
  animation: rs-marquee 125s linear infinite reverse;  /* 13 events; keeps the old speed */
}
.rs-rail:hover .rs-rail-track,
.rs-rail:focus-within .rs-rail-track { animation-play-state: paused; }

.rs-rail-list {
  display: flex;
  align-items: center;
  flex: none;
}
.rs-rail-list li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-right: 44px;
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: 700;
  color: var(--color-rail-slate);
  white-space: nowrap;
}
.rs-rail-list svg {
  width: 22px; height: 22px;
  flex: none;
  color: var(--color-rail-slate);
}
@media (min-width: 1024px) {
  .rs-rail-list li { padding-right: 56px; }
}

/* ---------- 7. Middle of the page (piece 3) ---------- */
.rs-section { position: relative; padding: 64px 0; }
.rs-section--tight { padding-block: 24px; }
.rs-section--last { padding-top: 16px; padding-bottom: 24px; }
@media (min-width: 900px) {
  .rs-section { padding: 96px 0; }
  .rs-more { padding: 72px 0 104px; }
  .rs-section--tight { padding-block: 32px; }
  .rs-section--last { padding-top: 40px; padding-bottom: 40px; }
}

/* Centred section head: bold navy heading + one sentence */
.rs-head { max-width: 760px; margin: 0 auto; text-align: center; }
.rs-head h2 {
  font-size: clamp(30px, 7.6vw, var(--text-section-heading));
  line-height: var(--leading-section-heading);
  font-weight: 700;
  color: var(--color-edge-navy);
  text-wrap: balance;
}
.rs-head p {
  max-width: 620px;
  margin: 16px auto 0;
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--color-edge-navy);
  text-wrap: pretty;
}

/* Launch (Adam, 2026-09-29): placeholder slots and pending copy are hidden on the
   site until the real art, store badges or copy land. The markup stays in place so
   each one can be filled later; delete the slot when its real content arrives. */
.slot, .pending { display: none !important; }
.pd-feature-media:has(> .slot),
.pd-forms-media:has(> .slot) { display: none; }

/* Placeholder slots (see CLAUDE.md, "Placeholder system") */
.slot {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed var(--color-signal-blue);
  border-radius: var(--radius-cards);
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  text-align: center;
  overflow-wrap: anywhere;
}
.rs-slot-icon {
  padding: 4px;
  background: var(--color-ice-surface);
  color: var(--color-edge-navy);
  font-size: 8.5px;
  line-height: 1.2;
}
.rs-slot-art {
  width: 100%;
  height: 100%;
  padding: 16px;
  border-radius: var(--radius-images);
  background: rgba(139, 179, 218, .06);
  color: var(--color-signal-blue);
  font-size: 13px;
}

/* ---- 7a. Central character capability grid ---- */
.rs-orbit-grid {
  display: grid;
  gap: 15px;
  margin-top: 36px;
  grid-template-areas: "fig" "left" "right";
}
.rs-cards { display: grid; gap: 15px; }
.rs-cards--left { grid-area: left; }
.rs-cards--right { grid-area: right; }

.rs-orbit-figure {
  grid-area: fig;
  position: relative;
  height: 380px;
  margin-bottom: 12px;
  display: flex;
  justify-content: center;
}
.rs-orbit-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(360px, 100%);
  transform: translate(-50%, -50%);
  animation: rs-spin 140s linear infinite;
}
.rs-orbit-dot { position: absolute; }
.rs-orbit-figure img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
}

.rs-card {
  position: relative;
  z-index: 2;                       /* cards sit over the character's edges */
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 18px 20px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.rs-card:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 40px rgba(24, 61, 109, .09);
}
.rs-card-icon { width: 50px; height: 50px; flex: none; object-fit: contain; }
.rs-card h3 {
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: 700;
  color: var(--color-edge-navy);
  white-space: nowrap;
}
.rs-card p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-edge-navy);
}

@media (min-width: 640px) {
  .rs-orbit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "fig fig" "left right";
    column-gap: 18px;
  }
  .rs-orbit-figure { height: 500px; }
  .rs-orbit-ring { width: 460px; }
  .rs-cards { grid-auto-rows: 1fr; }
}

/* Desktop: cards 290-300 px wide on a curve; the top and bottom cards sit in
   toward the character, the middle ones push outward. */
@media (min-width: 1024px) {
  .rs-orbit-grid {
    grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
    grid-template-areas: "left fig right";
    align-items: center;
    column-gap: 10px;
    margin-top: 65px;                 /* cards sit half a card higher than Blake */
  }
  .rs-cards { gap: 20px; }
  /* The figure rises above the top cards so the kicking foot and head stay clear. */
  .rs-orbit-figure { align-self: start; height: 580px; margin: -110px -80px 0; }
  .rs-orbit-figure img { position: relative; top: 165px; }  /* Blake stays put while the cards sit higher */
  .rs-orbit-figure img { object-position: 50% 0; }
  .rs-orbit-ring { top: 50%; width: 470px; }
  .rs-card { width: 290px; }
  .rs-cards--left .rs-card { margin-left: auto; }
  .rs-cards--left .rs-card--out { margin-left: auto; margin-right: 30px; }
  .rs-cards--right .rs-card--out { margin-left: 30px; }
  /* Five cards a side: the middle one sits furthest out, completing the curve. */
  .rs-cards--left .rs-card--far { margin-left: auto; margin-right: 50px; }
  .rs-cards--right .rs-card--far { margin-left: 50px; }
}
@media (min-width: 1200px) {
  .rs-orbit-grid { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); margin-top: 95px; }
  .rs-orbit-figure { height: 690px; margin: -150px -100px 0; }
  .rs-orbit-figure img { top: 119px; }
  .rs-orbit-ring { width: 580px; }
  .rs-card { width: 300px; }
  .rs-cards--left .rs-card--out { margin-right: 64px; }
  .rs-cards--right .rs-card--out { margin-left: 64px; }
  .rs-cards--left .rs-card--far { margin-right: 96px; }
  .rs-cards--right .rs-card--far { margin-left: 96px; }
}

/* ---- 7b. Metric strip (coverage facts only) ---- */
.rs-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;              /* even cells */
  margin: 48px 0 0;
  text-align: center;
}
.rs-metrics > div {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 18px 8px;
}
.rs-metrics > div:nth-child(even) { border-left: 1px solid var(--color-mist-divider); }
.rs-metrics > div:nth-child(n+3) { border-top: 1px solid var(--color-mist-divider); }
.rs-metrics dd {
  margin: 0;
  font-size: clamp(24px, 7.4vw, 40px);  /* small phones scale down; always one line */
  line-height: 1;
  font-weight: 700;
  color: var(--color-edge-navy);
  white-space: nowrap;
}
.rs-metrics dt { font-size: 16px; line-height: 1.35; color: var(--color-edge-navy); }

@media (min-width: 900px) {
  .rs-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: 960px;
    margin: 72px auto 0;
  }
  .rs-metrics > div { padding: 6px 14px; }
  .rs-metrics > div:nth-child(n+3) { border-top: 0; }
  .rs-metrics > div + div { border-left: 1px solid var(--color-mist-divider); }
  .rs-metrics dt { font-size: var(--text-body); }
}

/* ---- 7c. Dark promo banner ---- */
.rs-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 100px;             /* room for the art that crosses the top edge */
  padding: 0 22px 36px;
  border-radius: var(--radius-cards);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.rs-promo-copy { position: relative; z-index: 1; max-width: 560px; }
.rs-promo h2 {
  font-size: clamp(30px, 7vw, var(--text-promo-heading));
  line-height: var(--leading-promo-heading);
  font-weight: 700;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.rs-promo .rs-btn--convert { margin-top: 28px; }
.rs-promo-note {
  margin-top: 14px;
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-signal-blue);
}
.rs-promo-art {
  order: -1;
  align-self: flex-end;
  width: min(78%, 300px);
  aspect-ratio: 816 / 1000;
  margin: -110px 0 16px 0;
}
.rs-promo-art img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }

@media (min-width: 900px) {
  .rs-promo { margin-top: 64px; padding: 64px 64px 60px; min-height: 320px; justify-content: center; }
  .rs-promo-copy { max-width: 52%; }
  /* Anchored bottom-right inside the panel; he points left at the headline
     and his head crosses the top edge. */
  .rs-promo-art {
    position: absolute;
    right: 40px;
    bottom: 0;
    width: 44%;
    height: calc(100% + 170px);   /* taller: her head and pointing arm rise well above the panel */
    aspect-ratio: auto;
    margin: 0;
  }
}
@media (min-width: 1200px) { .rs-promo-art { right: 64px; } }

/* Judge Park at a realistic adult size, cropped at the waist by the card
   (Adam, 2026-09-28). The art layer sits INSIDE the card and clips her; her
   full figure in banner-park-v2.webp spans about 5.5%-95% of the canvas
   height, and the waist is at about 52%, so we show 5.5%-52% (46.5%). */
.rs-promo { margin-top: 40px; overflow: clip; }
.rs-promo .rs-promo-art {
  order: -1;
  position: relative;
  align-self: stretch;
  width: auto;
  height: 230px;
  aspect-ratio: auto;
  margin: 0 -22px 12px;
  overflow: hidden;
}
.rs-promo .rs-promo-art img {
  position: absolute;
  right: 6%;
  top: -8px;
  width: auto;
  height: 470px;              /* (230 - 12) / 0.465 */
  object-fit: fill;
}
@media (min-width: 900px) {
  .rs-promo { margin-top: 64px; min-height: 380px; }
  .rs-promo .rs-promo-art {
    position: absolute;
    top: 0; bottom: 0; right: 40px;
    width: 46%;
    height: auto;
    margin: 0;
  }
  .rs-promo .rs-promo-art img {
    right: 0;
    height: calc((100% - 28px) * 2.15);
    top: calc(28px - (100% - 28px) * 0.118);   /* 2.15 x 5.5% = 11.8% */
  }
}
@media (min-width: 1200px) { .rs-promo .rs-promo-art { right: 64px; } }

/* ---- 7d. Tournament-day feature tabs ---- */
.rs-tabs { display: grid; gap: 32px; margin-top: 40px; }
.rs-tab-list { display: grid; gap: 6px; }
.rs-tab {
  display: block;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 0 var(--radius-cards) var(--radius-cards) 0;
  background: transparent;
  color: var(--color-edge-navy);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.rs-tab:hover { background-color: rgba(255, 255, 255, .45); }
.rs-tab.is-active {
  border-left-color: var(--color-signal-orange);
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
}
.rs-tab-title {
  display: block;
  font-size: var(--text-card-title);
  line-height: 26px;
  font-weight: 700;
}
.rs-tab-text {
  display: -webkit-box;
  margin-top: 8px;
  font-size: 16px;
  line-height: 1.4;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rs-tab.is-active .rs-tab-text { display: block; -webkit-line-clamp: unset; }
/* Phones stack the list above the panel: every paragraph shows in full. */
@media (max-width: 899px) {
  .rs-tab-text { display: block; -webkit-line-clamp: unset; overflow: visible; }
}

.rs-tab-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: 24px 0;
}
.rs-tab-stage::before {                 /* soft halo behind the panel */
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(460px, 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 68%);
}
/* All three panels share one cell, so the stage is always as tall as the
   tallest and a change crossfades in place instead of jumping. */
.rs-tab-panel {
  position: relative;
  grid-area: 1 / 1;
  width: 100%;
  max-width: 460px;
  transition: opacity var(--t-slow) var(--ease), visibility var(--t-slow);
}
.rs-tab-panel[hidden] { display: block; opacity: 0; visibility: hidden; }

@media (min-width: 900px) {
  .rs-tabs { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; margin-top: 56px; }
  .rs-tab-stage { min-height: 660px; }
  /* Mirrored tabs ("Who it's for"): screenshots on the left, cards on the right */
  .rs-tabs--flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .rs-tabs--flip .rs-tab-stage { order: -1; }
}

/* App screenshots: two phones per tab, one in front and one behind it.
   The pair is sized by width, so it scales with the stage and never overflows. */
.rs-shots {
  position: relative;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 460 / 620;
  margin-inline: auto;
}
.rs-shot {
  position: absolute;
  width: 57%;
  height: auto;
  border: var(--phone-bezel) solid var(--color-launch-bay);
  border-radius: var(--radius-phone);
  background: var(--color-launch-bay);
  box-shadow: var(--shadow-phone);
}
.rs-shot--back { top: 0; right: 0; transform: rotate(3deg); }
.rs-shot--front { bottom: 0; left: 0; }
.rs-tab-panel .rs-shot--back { transition: transform var(--t-slow) var(--ease); }
.rs-tab-panel[hidden] .rs-shot--back { transform: rotate(3deg) translateY(10px); }
/* Mirrored pair: the back phone's key content sits on its left, so it goes on
   the left and the front phone on the right. */
.rs-shots--flip .rs-shot--back { right: auto; left: 0; transform: rotate(-3deg); }
.rs-shots--flip .rs-shot--front { left: auto; right: 0; }
.rs-tab-panel[hidden] .rs-shots--flip .rs-shot--back { transform: rotate(-3deg) translateY(10px); }
@media (prefers-reduced-motion: reduce) {
  .rs-tab-panel .rs-shot--back { transition: none; }
}

/* "More for tournament day" band: at least 80 px (phone) / 120 px (desktop)
   of pale canvas between the Rep Forge panel and the closing banner */
.rs-more { padding: 56px 0 72px; }
.rs-more .rs-checks { max-width: 1040px; margin-inline: auto; }

/* "Also in TKD Companion" check list */
.rs-checks {
  display: grid;
  gap: 14px 24px;
  margin-top: 48px;
}
.rs-checks li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 400;
  color: var(--color-edge-navy);
}
.rs-checks li::before {
  content: "";
  position: absolute;
  left: 0; top: 1px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--color-signal-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
@media (min-width: 560px) { .rs-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rs-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; } }

/* ---- 7e. Rep Forge and the form builder ---- */
.rs-rf {
  position: relative;
  margin-top: 100px;               /* room for the art that crosses the top edge */
  padding: 0 20px 32px;
  border-radius: var(--radius-hero);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.rs-rf-main { display: flex; flex-direction: column; }
.rs-rf-art {
  order: -1;
  align-self: flex-end;
  width: min(74%, 284px);          /* 900 x 1000 art: Mia stays the size she was at 728 wide */
  aspect-ratio: 900 / 1000;
  margin: -90px 0 12px 0;
}
.rs-rf-art img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }
.rs-rf-copy { position: relative; z-index: 1; }
.rs-kicker {
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-signal-blue);
}
.rs-rf h2 {
  margin-top: 12px;
  font-size: clamp(30px, 8.6vw, 34px);
  line-height: var(--leading-section-heading);
  font-weight: 700;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.rs-rf-copy > p:not(.rs-kicker):not(.rs-rf-feature) {
  margin-top: 18px;
  max-width: 520px;
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--color-white-surface);
}
.rs-rf-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 28px 0 30px;
}
.rs-rf-facts li { display: flex; flex-direction: column; gap: 4px; }
.rs-rf-facts strong { font-size: var(--text-rating); line-height: 1; font-weight: 700; color: var(--color-white-surface); }
.rs-rf-facts span {
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-signal-blue);
}
/* Phones: the three facts always share one row, each caption wrapping in its own column. */
@media (max-width: 539px) {
  .rs-rf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .rs-rf-facts strong { font-size: 20px; white-space: nowrap; }
}
@media (max-width: 359px) {
  .rs-rf-facts { gap: 8px; }
  .rs-rf-facts strong { font-size: 17px; }
}
.rs-rf-feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 520px;
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-white-surface);
}
.rs-rf-feature img { width: 44px; height: 44px; flex: none; }
.rs-btn--arrow,
.rs-btn--big { padding: 16px 22px; font-size: 18px; line-height: 22px; }

@media (min-width: 900px) {
  .rs-rf { margin-top: 30px; padding: 64px 64px 64px; }
  .rs-rf h2 { font-size: var(--text-section-heading); }
  .rs-rf-main { display: block; min-height: 380px; }
  .rs-rf-copy { max-width: 50%; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Mia beside the heading at the right, crossing the top edge. */
  .rs-rf-copy { max-width: 500px; }
  .rs-rf-art {
    position: absolute;
    top: -84px;
    right: 8px;
    width: auto;
    height: 480px;
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .rs-rf-copy { max-width: 48%; }
  /* Mia stands at the right; her head and raised kama cross the top edge. */
  .rs-rf-art {
    position: absolute;
    top: -84px;
    right: 40px;              /* 900-wide art with the full swirl: sits a little further right */
    width: auto;
    height: 600px;
    margin: 0;
  }
}

/* ---- 7f. Final conversion banner ---- */
.rs-final {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-top: 100px;               /* room for the art that crosses the top edge */
  padding: 0 22px 36px;
  border-radius: var(--radius-hero);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.rs-final-copy { position: relative; z-index: 1; max-width: 560px; }
.rs-final h2 {
  font-size: clamp(32px, 7.6vw, var(--text-promo-heading));
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.rs-final-copy > p:first-of-type { margin-top: 14px; font-size: var(--text-body); line-height: 1.3; color: var(--color-white-surface); }
.rs-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; }
.rs-final-stores { margin-top: 18px; gap: 10px; }
.rs-final-stores .rs-store img { height: 44px; }
@media (max-width: 479px) {
  .rs-final-actions .rs-btn { width: 100%; justify-content: space-between; }
  .rs-final-actions .rs-btn--outline { justify-content: center; }
  .rs-promo .rs-btn--convert { width: 100%; justify-content: space-between; }
}
/* closing-kai-lunge.webp is uncropped: like the Judge and Theo, Kai stands at
   the right with his raised fist and head crossing the panel's top edge. */
.rs-final-art {
  order: -1;
  align-self: flex-end;
  width: min(66%, 250px);
  aspect-ratio: 955 / 1100;
  margin: -96px 4px 12px 0;
}
.rs-final-art img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }

@media (min-width: 900px) {
  .rs-final { margin-top: 70px; padding: 64px; min-height: 380px; justify-content: center; }
  .rs-final-copy { max-width: calc(100% - 420px); }
  .rs-final-art {
    position: absolute;
    right: 48px;
    bottom: 0;
    width: auto;
    height: calc(100% + 96px);
    margin: 0;
  }
}
@media (min-width: 1200px) {
  .rs-final-copy { max-width: calc(100% - 470px); }
  .rs-final-art { right: 72px; }
}

/* Coral buttons say "Get the app" below 360 px so the label never wraps */
.rs-lbl-short { display: none; }
@media (max-width: 359px) {
  .rs-lbl-long { display: none; }
  .rs-lbl-short { display: inline; }
}

/* ---- 7g. Scroll-in reveal (JS adds .rs-js-reveal only when motion is allowed) ---- */
.rs-js-reveal .rs-reveal { opacity: 0; }
.rs-js-reveal .rs-reveal.is-in {
  opacity: 1;
  animation: rs-reveal-down .6s ease-out var(--rd, 0s) backwards;
}
.rs-cards .rs-card:nth-child(2) { --rd: .08s; }
.rs-cards .rs-card:nth-child(3) { --rd: .16s; }
.rs-cards .rs-card:nth-child(4) { --rd: .24s; }
.rs-cards--right .rs-card:nth-child(1) { --rd: .06s; }
.rs-cards--right .rs-card:nth-child(2) { --rd: .14s; }
.rs-cards--right .rs-card:nth-child(3) { --rd: .22s; }
.rs-cards--right .rs-card:nth-child(4) { --rd: .3s; }
.rs-cards .rs-card:nth-child(5) { --rd: .32s; }
.rs-cards--right .rs-card:nth-child(5) { --rd: .38s; }

/* ---------- 8. Footer (piece 4) ---------- */
/* The pale canvas runs on into the link columns and lightens toward the
   navy bottom bar. Mia stands at the right with her feet on that bar. */
.rs-footer {
  position: relative;
  margin-top: 24px;
  background: linear-gradient(180deg, var(--color-cloud-canvas) 0%, var(--color-ice-surface) 100%);
  font-size: 16px;
  line-height: 1.5;
}
@media (min-width: 900px) { .rs-footer { margin-top: 0; } }

.rs-foot-inner { position: relative; padding-top: 48px; }

.rs-foot-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 20px;
}
.rs-foot-brand { grid-column: 1 / -1; }
.rs-foot-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.rs-foot-logo span {               /* the white logo file, drawn in Edge Navy */
  display: block;
  width: 110px;
  height: 37px;
  background: var(--color-edge-navy);
  -webkit-mask: url("assets/tkdringside-logo-white.png") left center / contain no-repeat;
  mask: url("assets/tkdringside-logo-white.png") left center / contain no-repeat;
}
.rs-foot-brand p {
  margin-top: 8px;
  max-width: 280px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-edge-navy);
}

.rs-foot-cols h2,
.rs-foot-help h2 {
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: 700;
  color: var(--color-edge-navy);
}
.rs-foot-cols h2 { margin-bottom: 6px; }
@media (max-width: 359px) {
  .rs-foot-cols { column-gap: 14px; }
  .rs-foot-cols nav h2 { font-size: 17px; }
}
.rs-foot-cols a,
.rs-foot-soon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;                 /* thumb-sized on phones */
  min-width: 44px;
  color: var(--color-edge-navy);
  text-decoration: none;
  text-underline-offset: 4px;
}
.rs-foot-cols a:hover { text-decoration: underline; }
.rs-foot-soon {                   /* plain text that wraps as one phrase */
  display: inline-block;
  min-height: 0;
  padding-block: 10px;
  line-height: 24px;
  color: var(--color-graphite);
}
.rs-foot-soon small { margin-left: 4px; font-size: 13px; }

/* Help block: a full-width row of the column grid */
.rs-foot-help {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 40px;
  padding-top: 28px;
  border-top: 1px solid var(--color-mist-divider);
}
.rs-foot-help-text { max-width: 380px; }
.rs-foot-help p {
  margin-top: 8px;
  line-height: 1.4;
  color: var(--color-edge-navy);
}
.rs-foot-help-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.rs-foot-mail {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--color-edge-navy);
  font-weight: 500;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rs-foot-mail:hover { text-decoration: underline; text-underline-offset: 4px; }
.rs-foot-mail svg { width: 20px; height: 20px; flex: none; }
.rs-foot-help .rs-btn { display: flex; width: max-content; }

/* Tagline: the last line of the brand column */
.rs-foot-brand .rs-foot-tag {
  margin-top: 14px;
  font-size: 18px;
  line-height: var(--leading-card-title);
  font-weight: 700;
  color: var(--color-edge-navy);
}

/* Mia: her own row on phones, standing at the right on the bar */
.rs-foot-row { display: flex; justify-content: flex-end; }
.rs-foot-art {
  position: relative;
  z-index: 2;
  width: clamp(150px, 44vw, 210px);
  margin: 20px 0 -10px;            /* feet overlap the bar */
  pointer-events: none;
}
.rs-foot-art img { width: 100%; height: auto; }   /* footer-mia-v2 shown as drawn, facing right (Adam, 2026-09-28) */


@media (min-width: 640px) {
  .rs-foot-cols { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
  .rs-foot-brand { grid-column: auto; }
  .rs-foot-art { width: 250px; }
}

@media (min-width: 900px) {
  .rs-foot-inner { padding-top: 72px; }
  /* Columns and the help row keep clear of Mia on the right. */
  .rs-foot-cols { margin-right: 300px; gap: 24px; }
  .rs-foot-cols a { min-height: 34px; }
  .rs-foot-soon { padding-block: 5px; }
  .rs-foot-help { margin-top: 12px; }
  .rs-foot-row { height: 64px; }
  .rs-foot-art {
    position: absolute;
    right: calc(-1 * var(--gutter) + 8px);
    bottom: -12px;
    width: 300px;
    margin: 0;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  /* Narrow beside Mia: the brand line takes its own row above the link columns. */
  .rs-foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rs-foot-brand { grid-column: 1 / -1; }
  .rs-foot-brand p { max-width: 420px; }
}
@media (min-width: 1200px) {
  .rs-foot-cols { margin-right: 340px; }
  .rs-foot-art { right: -48px; width: 370px; }
}

/* Thin navy bottom bar */
.rs-foot-bar {
  position: relative;
  z-index: 1;
  background: var(--color-network-deep);
  color: var(--color-white-surface);
  font-size: var(--text-caption);
}
.rs-foot-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 40px;
  padding-block: 8px;
}
.rs-foot-bar p { padding-block: 12px; font-weight: 500; }
.rs-foot-bar ul { display: flex; flex-wrap: wrap; column-gap: 24px; }
.rs-foot-bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-signal-blue);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease);
}
.rs-foot-bar a:hover { color: var(--color-white-surface); }
.rs-foot-bar :focus-visible { outline-color: var(--color-white-surface); }
/* Independence notice (Adam, 2026-09-28): its own full-width row under the copyright and legal links */
.rs-foot-bar .rs-foot-disclaimer {
  flex-basis: 100%;
  padding-block: 4px 12px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-signal-blue);
}
@media (max-width: 639px) {
  .rs-foot-bar-inner { column-gap: 20px; row-gap: 0; padding-block: 8px; }
  .rs-foot-bar p { padding-block: 4px; }
  .rs-foot-bar ul { column-gap: 18px; }
  .rs-foot-bar a { min-height: 30px; }
}

/* ---------- 9. Motion ---------- */
@keyframes rs-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes rs-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -12px, 0) rotate(-.8deg); }
}
@keyframes rs-orbit {
  to { stroke-dashoffset: -640; }
}
@keyframes rs-breathe {
  0%   { transform: scale(0);   opacity: .05; }
  45%  { opacity: .3; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes rs-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes rs-reveal-down {
  from { opacity: 0; transform: translateY(-1rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  /* The rail becomes a still, wrapped list with no duplicate */
  .rs-rail-viewport { -webkit-mask-image: none; mask-image: none; }
  .rs-rail-track { width: auto; justify-content: center; }
  .rs-rail-list { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-inline: var(--gutter); }
  .rs-rail-list li { padding-inline: 18px; }
  .rs-rail-list[aria-hidden="true"] { display: none; }
  /* Hover states keep their colour change but nothing moves or grows. */
  .rs-card:hover,
  .rs-store:hover,
  .rs-btn:hover .rs-chevron,
  .rs-web-link:hover svg { transform: none; }
}

/* ---------- Blog ---------- */
/* blog/index.html and every blog/<slug>.html. The markup hooks (post-list,
   post-item, post-thumb, post-meta, post-head, post-body, post-foot, prose)
   come from the ringside-blog-post template; keep them. */

/* Page-head island: the blog pages' stand-in for the hero. The shared nav
   floats inside its top edge, exactly as it does on the homepage. */
.rs-island {
  position: relative;
  isolation: isolate;
  margin: var(--island-gap) var(--island-gap) 0;
  max-width: 1408px;
  padding-top: calc(var(--island-gap) + 12px + var(--nav-h) + 36px);
  padding-bottom: 48px;
  border-radius: var(--radius-hero);
  background:
    radial-gradient(60% 90% at 78% 30%, rgba(24, 61, 109, .9) 0%, rgba(2, 46, 87, .45) 45%, rgba(5, 30, 56, 0) 72%),
    radial-gradient(45% 70% at 8% 100%, rgba(2, 46, 87, .9) 0%, rgba(5, 30, 56, 0) 70%),
    linear-gradient(160deg, var(--color-network-deep) 0%, var(--color-launch-bay) 55%, var(--color-launch-bay) 100%);
  color: var(--color-white-surface);
}
@media (min-width: 1024px) {
  .rs-island { padding-top: calc(var(--island-gap) + 16px + var(--nav-h) + 56px); padding-bottom: 64px; }
}
@media (min-width: 1440px) { .rs-island { margin-inline: auto; } }
.rs-island :focus-visible { outline-color: var(--color-white-surface); }
.rs-island .rs-orbits { top: -18%; width: 60%; right: -6%; }
@media (max-width: 899px) { .rs-island .rs-orbits { width: 150%; right: -70%; top: -10%; bottom: auto; } }

.rs-island .eyebrow {                 /* caption role */
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
  color: var(--color-signal-blue);
}
.rs-island .eyebrow a { color: var(--color-white-surface); text-underline-offset: 3px; }
.rs-island h1 {
  margin-top: 6px;
  font-size: clamp(32px, 8.4vw, var(--text-section-heading));
  line-height: var(--leading-section-heading);
  font-weight: 700;
  color: var(--color-white-surface);
  text-wrap: balance;
}
.rs-island .lede {
  margin-top: 14px;
  font-size: var(--text-body);
  line-height: 1.3;
  color: var(--color-white-surface);
}

/* The Blog link stays marked in the nav on a post, too. */
.rs-links a[aria-current="true"] { color: var(--color-white-surface); box-shadow: inset 3px 0 0 var(--color-signal-blue); }
@media (min-width: 1024px) {
  .rs-links a[aria-current="true"],
  .rs-links a[aria-current="true"]:hover { box-shadow: inset 0 -2px 0 var(--color-signal-blue); }
}

/* ---- Blog index ---- */
.blog-head { text-align: center; }
.blog-head-inner { position: relative; z-index: 1; }
.blog-head .lede { max-width: 560px; margin-inline: auto; }
.blog-head-art { display: none; }
@media (min-width: 1200px) {
  /* Theo (style v2) kicks at the right, facing left toward the title; his foot crosses the island's bottom edge. */
  .blog-head-art {
    display: block;
    position: absolute;
    right: 40px;
    bottom: -36px;
    width: 250px;
    pointer-events: none;
  }
  .blog-head-art img { width: 100%; height: auto; }
}

.blog-list { padding-top: 56px; padding-bottom: 80px; }
@media (min-width: 900px) { .blog-list { padding-top: 88px; padding-bottom: 120px; } }

/* 1, 2 or 3 columns by width; a lone post (or a short last row) sits centred. */
.post-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.post-item { display: flex; flex: 0 1 100%; max-width: 440px; }
@media (min-width: 640px) { .post-item { flex-basis: calc((100% - 30px) / 2); max-width: none; } }
@media (min-width: 1024px) { .post-item { flex-basis: calc((100% - 60px) / 3); } }
.post-item > a {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 12px 26px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  color: var(--color-edge-navy);
  text-decoration: none;
  transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.post-item > a:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 40px rgba(24, 61, 109, .09);
}
.post-item > a:focus-visible { outline-offset: 4px; border-radius: var(--radius-cards); }
.post-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-images);
  background: var(--color-ice-surface);
}
.post-item .post-meta {
  display: block;
  margin: 16px 10px 0;
  font-size: var(--text-caption);
  line-height: 22px;
  font-weight: 400;
}
.post-item h2 {
  margin: 4px 10px 0;
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: 700;
}
.post-item p {
  margin: 8px 10px 0;
  font-size: 16px;
  line-height: 1.4;
}

.post-feed { margin-top: 40px; text-align: center; font-size: 16px; }
.post-feed a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 500;
  text-underline-offset: 4px;
  text-decoration-color: var(--color-signal-blue);
}
.post-feed a:hover { text-decoration-color: currentColor; }
.post-feed svg { width: 18px; height: 18px; flex: none; }

/* ---- Blog post ---- */
/* One measure for the head, the article and the post footer: about 70
   characters of 18 px Rubik per line. */
.rs-blog--post { --measure: 620px; --card-pad: 20px; }
@media (min-width: 640px) { .rs-blog--post { --card-pad: 40px; } }
@media (min-width: 900px) { .rs-blog--post { --card-pad: 56px; } }

.post-head-inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--measure) + 2 * var(--card-pad));
  margin-inline: auto;
  padding-inline: var(--card-pad);
}
@media (max-width: 639px) { .post-head-inner { padding-inline: 20px; } }
.post-head .post-meta {
  margin-top: 18px;
  font-size: var(--text-caption);
  line-height: 22px;
  color: var(--color-signal-blue);
}
/* The Judge points at the headline from the right on wide screens. */
@media (min-width: 1280px) {
  .post-head::after {
    content: "";
    position: absolute;
    right: 40px;
    bottom: 0;
    width: 280px;
    height: calc(100% - var(--nav-h) - 48px);
    max-height: 360px;
    background: url("assets/redesign/banner-park-v2.webp") right bottom / contain no-repeat;
    pointer-events: none;
  }
}

/* The article: a white card on the pale canvas */
.post-body {
  max-width: calc(var(--measure) + 2 * var(--card-pad));
  margin: 24px var(--island-gap) 0;
  padding: 28px var(--card-pad) 36px;
  border-radius: var(--radius-cards);
  background: var(--color-white-surface);
  box-shadow: var(--shadow-xl);
  color: var(--color-edge-navy);
  font-size: var(--text-body);
  line-height: 1.55;
}
@media (min-width: 640px) { .post-body { margin: 40px auto 0; width: calc(100% - 2 * var(--gutter)); padding-block: 48px 56px; } }

.prose > * + * { margin-top: 18px; }
.prose h2 {
  margin-top: 48px;
  font-size: clamp(24px, 6.4vw, var(--text-rating));
  line-height: 1.25;
  font-weight: 700;
  text-wrap: balance;
}
.prose h3 {
  margin-top: 32px;
  font-size: var(--text-card-title);
  line-height: var(--leading-card-title);
  font-weight: 700;
}
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose strong { font-weight: 700; }
.prose a {
  font-weight: 500;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-signal-blue);
  transition: text-decoration-color var(--t-fast) var(--ease);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 24px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--color-signal-blue); }
.prose ol li::marker { color: var(--color-edge-navy); font-weight: 700; }

.prose figure { margin: 36px 0; }
.prose figure img { width: 100%; border-radius: var(--radius-images); background: var(--color-ice-surface); }
.prose figcaption {
  margin-top: 10px;
  font-size: var(--text-caption);
  line-height: 22px;
  color: var(--color-edge-navy);
}
.prose figure + * { margin-top: 0; }

.prose table {
  width: 100%;
  margin-block: 28px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.prose th {
  padding: 10px;
  border-bottom: 2px solid var(--color-edge-navy);
  font-size: var(--text-caption);
  font-weight: 700;
  text-align: left;
  vertical-align: bottom;
}
.prose td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--color-mist-divider);
  vertical-align: top;
}
.prose th:first-child, .prose td:first-child { padding-left: 0; }
.prose th:last-child, .prose td:last-child { padding-right: 0; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose .num { text-align: right; white-space: nowrap; }
.prose td:first-child { font-weight: 500; }
@media (max-width: 479px) {
  .prose table { font-size: 14px; }
  .prose th, .prose td { padding-inline: 6px; }
}

/* Post footer: the one conversion moment, a dark banner with Kai */
.post-foot {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: calc(var(--measure) + 2 * var(--card-pad));
  margin: 110px var(--island-gap) 0;
  padding: 0 22px 32px;
  border-radius: var(--radius-cards);
  background: var(--panel-dark-bg);
  color: var(--color-white-surface);
}
.post-foot :focus-visible { outline-color: var(--color-white-surface); }
.post-foot-copy { position: relative; z-index: 1; }
.post-foot-copy > p:first-child { font-size: var(--text-body); line-height: 1.4; }
.post-cta { margin-top: 26px; }
.post-all { margin-top: 18px; font-size: 16px; }
.post-all a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-signal-blue);
  text-underline-offset: 4px;
  transition: color var(--t-fast) var(--ease);
}
.post-all a:hover { color: var(--color-white-surface); }
.post-foot-art {
  order: -1;
  align-self: flex-end;
  width: min(56%, 210px);
  margin: -96px 0 10px;
  pointer-events: none;
}
.post-foot-art img { width: 100%; height: auto; }
@media (max-width: 479px) {
  .post-cta .rs-btn { width: 100%; justify-content: space-between; gap: 10px; padding: 16px 18px; white-space: normal; text-align: left; }
}
@media (min-width: 640px) {
  .post-foot { margin: 120px auto 0; width: calc(100% - 2 * var(--gutter)); padding: 0 var(--card-pad) 40px; }
  .post-foot-art { margin-right: -16px; }
}
/* Wide screens: the banner is wider than the article, copy on the left and
   Kai at the right with his fist and trail crossing the top edge. */
@media (min-width: 900px) {
  .post-foot { max-width: 1040px; min-height: 300px; justify-content: center; padding-block: 56px; }
  .post-foot-copy { max-width: calc(100% - 400px); }
  .post-foot-art {
    position: absolute;
    right: 48px;
    bottom: 0;
    height: calc(100% + 84px);
    width: auto;
    aspect-ratio: 955 / 1100;
    margin: 0;
  }
  .post-foot-art img { width: 100%; height: 100%; object-fit: contain; object-position: 100% 100%; }
}
.rs-blog--post { display: block; padding-bottom: 96px; }
@media (min-width: 900px) { .rs-blog--post { padding-bottom: 88px; } }

/* ---- Ambient gutter decoration ----
   Wide screens only. A faint dashed orbit trail, twinkling 4-point stars and
   a few warm fireflies in the pale gutters beside the content. The layer spans the article card's row (post) or the post
   list (index); the card and post cards sit above it, so nothing ever
   covers the text. The layer clips at its own height and fades at both ends. */
.blog-ambient { display: none; }
@media (min-width: 1100px) {
  .blog-ambient {
    display: block;
    overflow: hidden;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 120px), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 80px, #000 calc(100% - 120px), transparent 100%);
    --clear: 840px;                       /* article card + air */
  }
  /* Post: the layer shares the article card's grid row. */
  .rs-blog--post .post { display: grid; grid-template-columns: minmax(0, 1fr); }
  .rs-blog--post .post > * { grid-column: 1; min-width: 0; }
  .rs-blog--post .post-head { grid-row: 1; width: calc(100% - 2 * var(--island-gap)); }   /* auto margins would shrink a grid item */
  .rs-blog--post .blog-ambient { grid-row: 2; position: relative; margin-top: 40px; }
  .rs-blog--post .post-body { grid-row: 2; position: relative; z-index: 1; }
  .rs-blog--post .post-foot { grid-row: 3; }
  /* Index: the layer spans the post list band, full viewport width. */
  .blog-list { position: relative; }
  .blog-index .blog-ambient {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    --clear: 1200px;
  }
  .blog-list > :not(.blog-ambient) { position: relative; z-index: 1; }

  .blog-amb-side {
    position: absolute;
    top: 0; bottom: 0;
    width: calc((100% - var(--clear)) / 2);
  }
  .blog-amb-side--l { left: 0; }
  .blog-amb-side--r { right: 0; }

  /* The orbit trail: x runs across the gutter (0-100), y is in pixels. */
  .blog-amb-path {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    overflow: visible;
  }
  .blog-amb-path path {
    fill: none;
    stroke: rgba(24, 61, 109, .3);         /* Edge Navy, faint */
    stroke-width: 1.5;
    stroke-dasharray: 2 10;
    stroke-linecap: round;
  }
  .blog-amb-star {
    position: absolute;
    left: calc(var(--x) * 100%);
    width: var(--s, 12px); height: var(--s, 12px);
    margin-left: calc(var(--s, 12px) / -2);
    color: var(--c, var(--color-signal-blue));
    opacity: .8;
    animation: rs-amb-twinkle 6s ease-in-out var(--delay, 0s) infinite;
  }

  /* Fireflies: a warm accent between the stars, a 4 px core with a double glow */
  .blog-ff {
    position: absolute;
    left: calc(var(--x) * 100%);
    width: 4px; height: 4px;
    margin-left: -2px;
    border-radius: 50%;
    background: var(--color-signal-orange);
    box-shadow: 0 0 10px 3px rgba(253, 141, 50, .8), 0 0 20px 6px rgba(253, 141, 50, .4);
    animation: rs-firefly 6s ease-in-out var(--delay, 0s) infinite;
  }
  .blog-ff--b {                           /* Edge Navy core so it reads on the pale canvas */
    background: rgba(24, 61, 109, .5);
    box-shadow: 0 0 10px 3px rgba(139, 179, 218, .9), 0 0 20px 6px rgba(139, 179, 218, .5);
  }
  .blog-ff--c {
    background: #ff7a53;                  /* Coral Launch, top stop */
    box-shadow: 0 0 10px 3px rgba(255, 122, 83, .8), 0 0 20px 6px rgba(255, 122, 83, .4);
  }
}
/* Homepage: the layer spans the light middle band (features to "more"),
   full viewport width, behind every section. */
.rs-home-band { position: relative; }
@media (min-width: 1100px) {
  .rs-home-band > .blog-ambient {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 100vw;
    transform: translateX(-50%);
    --clear: 1180px;
  }
  .rs-home-band > :not(.blog-ambient) { position: relative; z-index: 1; }
}
@media (min-width: 1100px) and (max-width: 1299px) {
  .rs-home-band > .blog-ambient { display: none; }
}
/* On the index, show it only where the gutter beside a full row is real. */
@media (min-width: 1100px) and (max-width: 1379px) {
  .blog-index .blog-ambient { display: none; }
}
@keyframes rs-firefly {
  0%, 100% { transform: translateY(0) scale(.8); opacity: .4; }
  50%      { transform: translateY(-30px) scale(1.2); opacity: 1; }
}
@keyframes rs-amb-twinkle {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: .85; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .post-item > a:hover { transform: none; }
}

/* ---------- Character placeholder slot ----------
   Marks where a new character illustration will go before it is generated.
   Size the slot like the final art (set width/aspect-ratio where it is used).
   Markup: <div class="rs-char-slot" style="aspect-ratio: 4 / 5"
            data-art="why-founder-desk.webp"><span>Character art: …</span></div>
   with a <!-- GRAPHIC NEEDED: … --> comment beside it. */
.rs-char-slot {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 160px;
  padding: 18px;
  border: 2px dashed rgba(139, 179, 218, .7);   /* Signal Blue */
  border-radius: var(--radius-images);
  background: rgba(139, 179, 218, .12);
  color: var(--color-signal-blue);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}
.rs-char-slot::before {
  content: "";
  position: absolute;
  top: 16px; left: 50%;
  width: 34px; height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  border: 2px dashed currentColor;               /* a round "head", hinting a character */
  opacity: .8;
}
.rs-char-slot span { display: block; max-width: 22ch; margin-top: 28px; }
/* on the pale canvas */
.rs-char-slot--light {
  border-color: rgba(24, 61, 109, .35);
  background: rgba(255, 255, 255, .55);
  color: var(--color-edge-navy);
}

/* ---------- Character art (fills a former .rs-char-slot) ---------- */
.rs-char-art { display: block; width: 100%; height: auto; object-fit: contain; object-position: 50% 100%; }

/* Related posts at the end of each post (reuses the blog index cards) */
.post-related {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 72px var(--gutter) 88px;
}
.post-related > h2 {
  text-align: center;
  font-size: clamp(28px, 6vw, 36px);
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-edge-navy);
}
.post-related .post-list { margin-top: 32px; }