:root {
  --primary: linear-gradient(135deg, #f68e23 0%, #ff9f43 100%);
  --secondary: linear-gradient(135deg, #f68e23 0%, #ff9f43 100%);
  --accent: linear-gradient(135deg, #f68e23 0%, #ff9f43 100%);
  --success: linear-gradient(135deg, #f68e23 0%, #ff9f43 100%);
  --bg-light: #fafbff;
  --bg-dark: #0f0f23;
  --card-light: rgba(255, 255, 255, 0.9);
  --card-dark: rgba(255, 255, 255, 0.1);
  --text-light: #2d3748;
  --text-dark: #ffffff;
  --glass: rgba(255, 255, 255, 0.15);
  --shadow: 0 8px 32px rgba(246, 142, 35, 0.37);
  --glow: 0 0 20px rgba(246, 142, 35, 0.5);

  /* Navbar surface — kept separate from --glass, which the
     floating blobs and theme toggle also use */
  --nav-bg: rgba(255, 255, 255, 0.52);
  --nav-border: rgba(20, 16, 40, 0.08);
  --nav-shadow: 0 1px 2px rgba(20, 16, 40, 0.03), 0 6px 20px rgba(20, 16, 40, 0.05);

  /* Bento card surface — warm cream with a hairline warm border and a
     neutral diffuse shadow. Neutral, not orange: coloured shadows read
     as glow rather than elevation. */
  --card-surface: #fefcf9;
  --card-edge: rgba(74, 59, 43, 0.10);
  --card-lift: 0 1px 2px rgba(60, 45, 30, 0.05), 0 14px 36px rgba(60, 45, 30, 0.10);
  --card-lift-hover: 0 2px 4px rgba(60, 45, 30, 0.07), 0 24px 54px rgba(60, 45, 30, 0.16);
  --card-ink: #1c1917;
  --card-ink-muted: #6b6259;

  /* Brand secondary. Until now --primary/--secondary/--accent were all
     the same orange, so nothing could stand out against anything else.
     Blue is the counterweight: active states, accents, decorative art. */
  --blue: #10b0e0;
  --blue-soft: rgba(16, 176, 224, 0.42);
  --blue-faint: rgba(16, 176, 224, 0.16);
  --orange: #f68e23;
  --orange-deep: #d9741a;

  /* Hero canvas */
  --hero-bg-1: #fdf9f4;
  --hero-bg-2: #f6e8d8;
  /* soft light pools laid over the base wash — no hard edges */
  --glow-warm: rgba(246, 142, 35, 0.11);
  --glow-cool: rgba(32, 188, 227, 0.07);
}

[data-theme="dark"] {
  --blue-soft: rgba(16, 176, 224, 0.5);
  --blue-faint: rgba(16, 176, 224, 0.2);
  --hero-bg-1: #0f0f23;
  --hero-bg-2: #171a33;
  --glow-warm: rgba(246, 142, 35, 0.13);
  --glow-cool: rgba(32, 188, 227, 0.10);
}

[data-theme="dark"] {
  --bg-color: var(--bg-dark);
  --text-color: var(--text-dark);
  --card-bg: var(--card-dark);

  --nav-bg: rgba(15, 15, 35, 0.50);
  --nav-border: rgba(255, 255, 255, 0.08);
  --nav-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 20px rgba(0, 0, 0, 0.22);

  --card-surface: rgba(255, 255, 255, 0.055);
  --card-edge: rgba(255, 255, 255, 0.10);
  --card-lift: 0 1px 2px rgba(0, 0, 0, 0.20), 0 12px 32px rgba(0, 0, 0, 0.28);
  --card-lift-hover: 0 2px 4px rgba(0, 0, 0, 0.24), 0 22px 48px rgba(0, 0, 0, 0.38);
  --card-ink: #ffffff;
  --card-ink-muted: rgba(255, 255, 255, 0.62);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', 'Cairo', sans-serif;
  background: var(--bg-light);
  color: var(--text-light);
  /* clip, not hidden — see the note by the ticker */
  overflow-x: clip;
  /* `all` transitioned every property including transform and background
     position, so a theme switch animated the whole page at once */
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] body {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* Absolute, not fixed: as a fixed layer the art translated further
   and further from the viewport as you scrolled and vanished after the
   first screen. Spanning the document instead keeps every element in
   play, drifting as it passes through view. */
body { position: relative; }

.floating-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.float-element {
  position: absolute;
  border-radius: 50%;
  background: var(--glass);
  backdrop-filter: blur(10px);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-20px) rotate(120deg); }
  66% { transform: translateY(10px) rotate(240deg); }
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--nav-bg);
  backdrop-filter: blur(28px) saturate(185%);
  -webkit-backdrop-filter: blur(28px) saturate(185%);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  z-index: 1000;
  padding: 0.6rem 0;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.5rem;
  font-weight: 700;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-text {
  height: 40px;
  width: auto;
  filter: drop-shadow(0 0 12px rgba(246, 142, 35, 0.7));
  transition: filter 0.3s ease;
}

.logo-text:hover {
  filter: drop-shadow(0 0 18px rgba(246, 142, 35, 0.9));
}

.nav-links {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.45rem 0.85rem;
  border-radius: 25px;
  transition: all 0.3s ease;
  position: relative;
  overflow: visible;
}

[data-theme="dark"] .nav-link {
  color: var(--text-dark);
}

.nav-link:hover {
  color: #f68e23;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

.nav-link:hover .equalizer {
  opacity: 1;
}

.equalizer {
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.eq-bar {
  width: 2px;
  background: #f68e23;
  border-radius: 1px;
  animation: equalizer 1.5s ease-in-out infinite;
}

.eq-bar:nth-child(1) { height: 8px; animation-delay: 0s; }
.eq-bar:nth-child(2) { height: 12px; animation-delay: 0.2s; }
.eq-bar:nth-child(3) { height: 6px; animation-delay: 0.4s; }
.eq-bar:nth-child(4) { height: 10px; animation-delay: 0.6s; }
.eq-bar:nth-child(5) { height: 8px; animation-delay: 0.8s; }

@keyframes equalizer {
  0%, 100% { transform: scaleY(0.5); }
  50% { transform: scaleY(1); }
}

.theme-toggle {
  background: var(--glass);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.theme-toggle:hover {
  transform: scale(1.1) rotate(180deg);
  box-shadow: var(--glow);
}

/* Radio Section */
.radio-section {
  min-height: auto ;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  position: relative;
  overflow: hidden;
  padding: 8rem 2rem 8rem;
}

[data-theme="dark"] .radio-section {
  background: linear-gradient(140deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
}

/* ---- Hero decorative art -------------------------------------------
   Purely ornamental, so the whole layer is aria-hidden in the markup
   and never takes pointer events. */
.hero-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* Broadcast rings — sound going out from the middle of the hero.
   Centred on the section rather than on the record, so it needs no
   direction handling, and masked to nothing at the edges so there is no
   ring outline anywhere, only the suggestion of one. */
.hero-art::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(1250px, 135%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 47px, rgba(29, 43, 54, 0.045) 47px 48px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 64%);
          mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 64%);
}

[data-theme="dark"] .hero-art::after {
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 47px, rgba(255, 255, 255, 0.05) 47px 48px);
}

/* Soft peach blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
              rgba(250, 205, 160, 0.55), rgba(250, 218, 185, 0.18) 70%);
}

.hero-blob--a { width: 300px; height: 300px; top: -80px; left: -70px; }
.hero-blob--b { width: 210px; height: 210px; bottom: 6%; left: 12%; opacity: 0.7; }
.hero-blob--c { width: 340px; height: 340px; top: 8%; right: -90px; }
.hero-blob--d { width: 160px; height: 160px; bottom: 22%; right: 20%; opacity: 0.6; }

[data-theme="dark"] .hero-blob { opacity: 0.18; }

/* Dot grids — one radial-gradient tile repeated, no extra markup */
.dot-grid {
  position: absolute;
  background-image: radial-gradient(currentColor 2px, transparent 2px);
  background-size: 18px 18px;
}

.dot-grid--left {
  color: var(--blue-soft);
  width: 108px;
  height: 90px;
  top: 30%;
  left: 7%;
}

.dot-grid--right {
  color: var(--blue-soft);
  width: 126px;
  height: 72px;
  bottom: 24%;
  right: 5%;
}

.dot-grid--orange {
  color: rgba(246, 142, 35, 0.4);
  width: 90px;
  height: 54px;
  top: 16%;
  right: 22%;
}

/* Small solid accent circles */
.hero-pip {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
}

.hero-pip--1 { width: 16px; height: 16px; top: 22%; right: 12%; }
.hero-pip--2 { width: 22px; height: 22px; top: 58%; right: 34%; }
.hero-pip--3 { width: 10px; height: 10px; top: 40%; left: 22%; opacity: 0.7; }

/* Flowing lines across the lower hero */
.hero-lines {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
}

/* Brush swoosh under the hero title */
.title-swoosh {
  display: block;
  width: 190px;
  max-width: 60%;
  height: auto;
  /* logical margins so it hugs the text side in both LTR and RTL */
  margin-block: -0.35rem 1.25rem;
  margin-inline: 0 auto;
  color: var(--blue);
}

/* Bottom wave that hands off to the next section */
.hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 90px;
  z-index: 1;
  color: var(--bg-light);
}

[data-theme="dark"] .hero-wave { color: var(--bg-dark); }

/* Motion ticks beside the play button */
.speed-ticks {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  inset-inline-start: -34px;
  width: 24px;
  height: 34px;
  color: var(--blue);
  pointer-events: none;
}

/* Keep hero content above the pattern layer */
.radio-container {
  position: relative;
  z-index: 1;
}
.radio-container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  text-align: start;
}

.hero-visual {
  display: flex;
  justify-content: center;
}

.hero-panel {
  max-width: 520px;
}

/* Live badge */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  background: rgba(233, 69, 69, 0.1);
  border: 1px solid rgba(233, 69, 69, 0.25);
  color: #e94545;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.live-dot {
  position: relative;
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e94545;
}

.live-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #e94545;
  animation: livePulse 1.8s ease-out infinite;
}

@keyframes livePulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* Hero text — solid color, no gradient fill */
.hero-title {
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 0.75rem;
  color: #1d1b2e;
}

[data-theme="dark"] .hero-title {
  color: #ffffff;
}

.hero-subtitle {
  font-size: 1.15rem;
  line-height: 1.6;
  opacity: 0.7;
  margin-bottom: 2rem;
  color: var(--text-light);
}

[data-theme="dark"] .hero-subtitle {
  color: var(--text-dark);
}

/* =====================================================================
   Hero record

   The orange disc is now a black vinyl: groove rings, an orange centre
   label with the station name set on its side, a white spindle hole, and a
   tonearm resting across it.

   The player is untouched. app.js still owns #radioCircle and toggles
   .playing on it — only .rec-disc spins, so the play glyph and the arm stay
   where they are.
   ===================================================================== */
.radio-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0 auto 2rem;
  position: relative;
  transition: none;
  /* the arm reaches past the disc, so this must not clip; the record's own
     rim is clipped by .rec-disc instead */
  overflow: visible;
}

.radio-circle:active {
  transform: none;
}

/* ---- the record ---- */
.rec-disc {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background:
    /* the light sweeping across the lacquer */
    conic-gradient(from 205deg at 50% 50%,
      rgba(255, 255, 255, 0.11) 0deg, transparent 52deg,
      transparent 158deg, rgba(255, 255, 255, 0.075) 202deg, transparent 256deg),
    /* grooves */
    repeating-radial-gradient(circle at 50% 50%,
      #191a1d 0 2px, #0c0d0f 2px 4px),
    radial-gradient(circle at 50% 50%, #1b1c1f, #090a0b 74%);
  box-shadow: 0 26px 52px -22px rgba(29, 43, 54, 0.55),
              inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}

/* the smooth run-out band at the rim, where a record has no grooves */
.rec-disc::after {
  content: '';
  position: absolute;
  inset: 2.5%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  pointer-events: none;
}

/* ---- centre label ---- */
.rec-label {
  position: relative;
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange, #f68e23);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* the station name runs up the label, the way a record's does.
   A transform, not writing-mode: rotation leaves Arabic shaping alone. */
.rec-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: rotate(-90deg);
  /* clear of the spindle hole at dead centre */
  margin-inline-end: 22%;
  color: #12202a;
  white-space: nowrap;
}

.rec-brand {
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;      /* Latin only */
}

.rec-brand b { color: #fff; font-weight: 800; }

.rec-sub {
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.8;
}

/* Arabic has no case and letter-spacing breaks its joins */
[dir="rtl"] .rec-sub { letter-spacing: 0; }

/* the spindle hole, dead centre */
.rec-label::after {
  content: '';
  position: absolute;
  width: 9%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fffdfa;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14);
}

/* ---- tonearm ----
   Physical left/top on purpose: the arm rests on the same side in both
   directions, matching the reference. A real deck's arm does not move when
   the page does. */
.rec-arm {
  position: absolute;
  z-index: 3;
  top: -7%;
  left: -11%;
  width: 46%;
  height: 58%;
  pointer-events: none;
}

/* the pivot */
.rec-arm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #8e8880;
  box-shadow: 0 6px 14px -6px rgba(29, 43, 54, 0.5);
}

/* the arm itself, pivoting from inside that circle */
.rec-arm > i {
  position: absolute;
  top: 11%;
  left: 12%;
  width: 7px;
  height: 92%;
  border-radius: 999px;
  background: #a8a29a;
  transform-origin: 50% 0;
  transform: rotate(-32deg);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the arm swings in over the record once it is playing */
.radio-circle.playing .rec-arm > i { transform: rotate(-24deg); }

.radio-circle.playing .rec-disc {
  animation: rotate 3.4s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.play-button {
  /* orange on black, not black on black: the disc underneath is now vinyl */
  color: #12202a;
  transition: all 0.3s ease;
  z-index: 2;
  position: relative;
  background: var(--orange, #f68e23);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.radio-circle:hover .play-button {
  opacity: 1;
}

.radio-circle:hover .play-button {
  transform: scale(1.1);
}

/* .radio-waves and .wave-* went with the orange disc: their markup is
   gone, and the rings only ever showed as clipped arcs inside it. */

.radio-info {
  margin-bottom: 2rem;
}

.now-playing {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 0.35rem;
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--text-light);
}

.track-info {
  font-size: 1rem;
  opacity: 0.8;
  color: var(--text-light);
}

[data-theme="dark"] .track-info {
  color: var(--text-dark);
}

.radio-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}

.control-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(246, 142, 35, 0.3);
}

.control-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(246, 142, 35, 0.4);
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.8rem 1.5rem;
  border-radius: 25px;
  backdrop-filter: blur(10px);
  color: var(--text-light);
}

[data-theme="dark"] .volume-control {
  color: var(--text-dark);
}

.search-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 1.5rem;
  background: linear-gradient(135deg, #f68e23, #ff9f43);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 10px 30px rgba(246, 142, 35, 0.3);
  animation: searchIconFloat 3s ease-in-out infinite;
}

@keyframes searchIconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.search-title {
  font-size: 2.5rem;
  font-weight: 700;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.search-subtitle {
  font-size: 1.1rem;
  color: var(--text-light);
  opacity: 0.7;
  margin-bottom: 2rem;
}

[data-theme="dark"] .search-subtitle {
  color: var(--text-dark);
}

.search-input, .category-filter {
  flex: 1;
  min-width: 180px;
  padding: 1.2rem 2rem;
  border: 2px solid rgba(246, 142, 35, 0.2);
  border-radius: 30px;
  font-size: 1.1rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--text-light);
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  width: 100%;
  max-width: 600px;
}

[data-theme="dark"] .search-input,
[data-theme="dark"] .category-filter {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .category-filter option {
  background: var(--bg-dark);
  color: #ffffff;
}

.search-input:focus, .category-filter:focus {
  outline: none;
  border-color: rgba(246, 142, 35, 0.6);
  box-shadow: 0 0 20px rgba(246, 142, 35, 0.2);
  transform: translateY(-2px);
}

/* Content Sections */
.content-section {
  padding: 6rem 4rem;
  max-width: 100%;
  margin: 0 auto;
  color: var(--text-light);
  border-bottom: none;
  margin-bottom: 0;
}

.radio-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4rem auto;
  width: 80%;
  gap: 2rem;
}

.radio-icon {
  color: #f68e23;
  background: rgba(246, 142, 35, 0.1);
  border-radius: 50%;
  padding: 1rem;
  box-shadow: 0 0 20px rgba(246, 142, 35, 0.3);
  animation: iconPulse 3s ease-in-out infinite;
  position: relative;
  overflow: visible;
}

.icon-sparkles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f68e23;
  border-radius: 50%;
  animation: sparkleFloat 2s ease-in-out infinite;
}

.sparkle:nth-child(1) {
  top: -10px;
  right: -5px;
  animation-delay: 0s;
}

.sparkle:nth-child(2) {
  bottom: -8px;
  left: -8px;
  animation-delay: 0.7s;
}

.sparkle:nth-child(3) {
  top: 50%;
  right: -12px;
  animation-delay: 1.4s;
}

.wave-line {
  flex: 1;
  height: 4px;
  background: linear-gradient(90deg, transparent, #f68e23 20%, #ff9f43 50%, #f68e23 80%, transparent);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  animation: lineWiggle 3s ease-in-out infinite;
}

.wave-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: waveFlow 2s ease-in-out infinite;
}

.wave-dots {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transform: translateY(-50%);
}

.dot {
  width: 8px;
  height: 8px;
  background: #ff9f43;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 159, 67, 0.5);
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
.dot:nth-child(4) { animation-delay: 0.6s; }
.dot:nth-child(5) { animation-delay: 0.8s; }

@keyframes iconPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 20px rgba(246, 142, 35, 0.3); }
  50% { transform: scale(1.1); box-shadow: 0 0 30px rgba(246, 142, 35, 0.5); }
}

@keyframes sparkleFloat {
  0%, 100% { transform: translateY(0) scale(0); opacity: 0; }
  50% { transform: translateY(-15px) scale(1); opacity: 1; }
}

@keyframes lineWiggle {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.2); }
}

@keyframes waveFlow {
  0% { left: -100%; }
  100% { left: 100%; }
}

[data-theme="dark"] .blog-section {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-top-color: #f68e23;
  box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .blog-subtitle {
  color: var(--text-dark);
}

[data-theme="dark"] .blog-title-container h2 {
  color: var(--text-dark);
}

[data-theme="dark"] .blog-filter {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-dark);
  border-color: rgba(246, 142, 35, 0.4);
}

[data-theme="dark"] .blog-filter:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #f68e23;
}

[data-theme="dark"] .content-section {
  color: var(--text-dark);
  background: var(--bg-dark);
}

[data-theme="dark"] #podcasts,
[data-theme="dark"] #interviews,
[data-theme="dark"] #posts {
  background: var(--bg-dark);
  color: var(--text-dark);
}

[data-theme="dark"] main {
  background: var(--bg-dark);
}

.content-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  text-align: center;
  background: var(--primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.blog-section {
  background: linear-gradient(135deg, #ffffff 0%, #fff5eb 100%);
  border-radius: 0;
  padding: 6rem 4rem;
  margin-top: 0;
  position: relative;
  overflow: hidden;
  border: none;
  border-top: 3px solid #f68e23;
  box-shadow: inset 0 10px 30px rgba(246, 142, 35, 0.05);
}

/* The 4px orange bar and the orange wash that used to sit on every section
   went with the banded design — the bar was the hard line under the cards,
   and the wash tinted one section differently from the next. */

.blog-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 4rem;
  padding-bottom: 2rem;
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.blog-title-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  width: 100%;
}

.blog-icon {
  background: linear-gradient(135deg, #f68e23, #ff9f43);
  border-radius: 50%;
  padding: 1.5rem;
  color: white;
  box-shadow: 0 15px 40px rgba(246, 142, 35, 0.3);
  animation: blogIconFloat 4s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  margin-bottom: 1rem;
}

.blog-icon svg {
  width: 40px;
  height: 40px;
}

.blog-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: iconShine 3s ease-in-out infinite;
}

.blog-title-container h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #2d3748;
  position: relative;
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.5px;
}

.blog-subtitle {
  font-size: 1.15rem;
  color: var(--text-light);
  opacity: 0.75;
  font-weight: 400;
  margin: 0 auto;
  line-height: 1.7;
  max-width: 700px;
}

.blog-filter {
  background: white;
  border: 2px solid rgba(246, 142, 35, 0.3);
  border-radius: 25px;
  padding: 0.9rem 2rem;
  box-shadow: 0 8px 20px rgba(246, 142, 35, 0.1);
  min-width: 200px;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1.5rem;
}

.blog-filter:hover {
  border-color: #f68e23;
  box-shadow: 0 10px 25px rgba(246, 142, 35, 0.2);
  transform: translateY(-2px);
}

@keyframes blogIconFloat {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
  33% { transform: translateY(-10px) rotate(3deg) scale(1.05); }
  66% { transform: translateY(5px) rotate(-2deg) scale(0.98); }
}

@keyframes iconShine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
  100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
}

#postsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 2rem;
  align-items: start;
}

.content-card {
  background: var(--card-surface);
  border: 1px solid var(--card-edge);
  border-radius: 24px;
  padding: 2.5rem;
  box-shadow: var(--card-lift);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  color: var(--card-ink);
  display: flex;
  flex-direction: column;
}

[data-theme="dark"] .content-card {
  color: var(--card-ink);
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: all 0.6s ease;
}

.content-card:hover::before {
  left: 100%;
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover);
}

/* Solid, heavy, tight — the reference look. Gradient fill made these
   muddy at small sizes and killed the contrast. */
.content-card h3 {
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.9rem;
  color: var(--card-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.content-card p {
  margin-bottom: 1.5rem;
  line-height: 1.7;
  color: var(--card-ink-muted);
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.tag {
  background: rgba(246, 142, 35, 0.1);
  color: #f68e23;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.8rem;
  font-weight: 500;
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
}

.modal-content {
  background: var(--card-light);
  backdrop-filter: blur(20px);
  margin: 10% auto;
  padding: 3rem;
  border-radius: 20px;
  width: 90%;
  max-width: 500px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow);
  animation: modalSlideIn 0.3s ease-out;
  color: var(--text-light);
}

[data-theme="dark"] .modal-content {
  background: var(--card-dark);
  color: var(--text-dark);
  border-color: rgba(255, 255, 255, 0.1);
}

.podcast-player-visual {
  margin-bottom: 2rem;
}

.podcast-logo-container {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(246, 142, 35, 0.3);
  position: relative;
  overflow: hidden;
}

.podcast-logo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
}

.podcast-logo.playing {
  animation: rotate 3s linear infinite;
}

.podcast-modal #audioTitle {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  background: var(--secondary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@keyframes modalSlideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.close:hover {
  color: var(--primary);
  transform: scale(1.2);
}

#audioPlayer {
  width: 100%;
  margin-top: 2rem;
  border-radius: 10px;
}

/* Animations */

/* Articles are their own card, using the same surface tokens as
   .content-card so podcasts, interviews and articles read as one set. */
.blog-post {
  background: var(--card-surface);
  border: 1px solid var(--card-edge);
  border-radius: 24px;
  padding: 2.5rem;
  margin-bottom: 0;
  box-shadow: var(--card-lift);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  color: var(--card-ink);
  overflow: hidden;
}

.blog-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover);
}

/* Responsive Design */

@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .radio-circle {
    width: 200px;
    height: 200px;
  }

  .radio-controls {
    flex-direction: column;
    gap: 1rem;
  }
}

/* Footer */
.footer {
  background: #1a1a2e;
  padding: 3rem 2rem;
  text-align: center;
}

[data-theme="light"] .footer {
  background: #2d3748;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: #f68e23;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.footer-links a:hover {
  color: #ff9f43;
  transform: translateY(-2px);
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 10000;
  max-width: 300px;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.toast.error {
  background: rgba(220, 38, 38, 0.95);
}

/* ---- Hero visual: layered halo behind the disc ---------------------- */
.hero-visual {
  position: relative;
  z-index: 1;
}

/* The soft halo behind the record. The hard white disc that used to sit
   between this and the vinyl has been removed. */
.hero-visual::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 68%);
  pointer-events: none;
}


[data-theme="dark"] .hero-visual::before {
  background: radial-gradient(circle, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 68%);
}


.radio-circle {
  z-index: 2;
}

/* ---- 3D play button ------------------------------------------------- */
.control-btn {
  position: relative;
  padding: 1.05rem 2.4rem;
  border-radius: 999px;
  font-size: 1.05rem;
  /* extruded lower edge + ambient shadow */
  box-shadow: 0 6px 0 var(--orange-deep),
              0 14px 24px rgba(214, 120, 30, 0.34);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.control-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--orange-deep),
              0 18px 30px rgba(214, 120, 30, 0.4);
}

.control-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 var(--orange-deep),
              0 6px 12px rgba(214, 120, 30, 0.3);
}

/* ---- Active nav link ------------------------------------------------ */
.nav-link.is-active {
  color: var(--card-ink);
  font-weight: 600;
}

[data-theme="dark"] .nav-link.is-active { color: #fff; }

.nav-link.is-active::after {
  content: '';
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: -2px;
  height: 3px;
  border-radius: 3px;
  background: var(--blue);
}

/* ---- Volume slider: light track, orange fill ------------------------ */
.volume-control {
  background: transparent;
  padding: 0;
  backdrop-filter: none;
}

/* wrapper so the motion ticks can sit beside the play button */
.play-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* Blue accent on the logo's own spot in the nav + section eyebrow bits */
.now-playing { color: var(--card-ink-muted); }

/* Keep hero content above the art layer and the wave */
.radio-container { position: relative; z-index: 2; }

/* =====================================================================
   Floating pill navbar
   Detached from the top edge, centred, dark, fully rounded.
   Desktop only — below 1024px the existing hamburger + slide-in panel
   takes over, so the bar reverts to full width in the media query
   at the bottom of this block.
   ===================================================================== */
.navbar {
  top: 1.05rem;
  left: 50%;
  translate: -50% 0;
  width: auto;
  max-width: calc(100% - 3rem);
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(20, 16, 40, 0.07);
  border-bottom: 1px solid rgba(20, 16, 40, 0.07);
  border-radius: 999px;
  box-shadow: 0 10px 34px rgba(20, 16, 40, 0.10), 0 2px 6px rgba(20, 16, 40, 0.05);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  padding: 0;
}

.nav-container {
  max-width: none;
  padding: 0.4rem 0.55rem;
  gap: 0.2rem;
}

.logo { margin-inline-end: 0.5rem; }
.logo-text {
  height: 30px;
  filter: none;
}

.nav-links { gap: 0.15rem; }

/* Text-only links, like the reference */
.nav-link {
  color: #4a453f;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
}

.nav-link svg,
.nav-link .equalizer { display: none; }

.nav-link:hover {
  color: var(--card-ink);
  background: rgba(20, 16, 40, 0.05);
  transform: none;
}

.nav-link.is-active {
  color: var(--card-ink);
  background: rgba(20, 16, 40, 0.06);
}

.nav-link.is-active::after {
  left: 50%;
  right: auto;
  translate: -50% 0;
  width: 16px;
  bottom: 4px;
  height: 2px;
}

/* Hairline divider before the utility buttons */
#langToggle { position: relative; margin-inline-start: 0.55rem; }

#langToggle::before {
  content: '';
  position: absolute;
  inset-inline-start: -0.5rem;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 18px;
  background: rgba(20, 16, 40, 0.14);
}

.theme-toggle {
  background: transparent;
  border: none;
  color: #4a453f;
  width: 32px;
  height: 32px;
  backdrop-filter: none;
}

.theme-toggle:hover {
  background: rgba(20, 16, 40, 0.06);
  color: var(--card-ink);
  transform: none;
  box-shadow: none;
}

/* ---- Revert to a full-width bar where the mobile menu takes over ---- */
@media (max-width: 1024px) {
  .navbar {
    top: 0;
    left: 0;
    translate: none;
    width: 100%;
    max-width: none;
    border: none;
    border-bottom: 1px solid var(--nav-border);
    border-radius: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(28px) saturate(185%);
    -webkit-backdrop-filter: blur(28px) saturate(185%);
    box-shadow: var(--nav-shadow);
    padding: 0.6rem 0;
  }

  .nav-container { padding: 0 1.25rem; }
  .logo-text { height: 36px; }

  .nav-link { color: var(--text-light); }
  [data-theme="dark"] .nav-link { color: var(--text-dark); }
  .nav-link svg { display: inline-block; }

  #langToggle::before { display: none; }
  .theme-toggle { color: inherit; }
}

/* Dark theme keeps the pill shape but flips the surface, so the white
   bar doesn't glare against the dark page. */
@media (min-width: 1025px) {
  [data-theme="dark"] .navbar {
    background: rgba(22, 22, 34, 0.86);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2);
  }

  [data-theme="dark"] .nav-link { color: #d9d5cd; }
  [data-theme="dark"] .nav-link:hover,
  [data-theme="dark"] .nav-link.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }

  [data-theme="dark"] #langToggle::before { background: rgba(255, 255, 255, 0.16); }
  [data-theme="dark"] .theme-toggle { color: #d9d5cd; }
  [data-theme="dark"] .theme-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
  }
}

/* =====================================================================
   Shared page canvas
   Every section uses the hero's warm cream gradient so the background
   is continuous down the page. Background only — section content,
   icons, headings and animations are untouched.
   ===================================================================== */
.search-section,
.blog-section,
.content-section {
  background: linear-gradient(140deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  backdrop-filter: none;
}

[data-theme="dark"] .search-section,
[data-theme="dark"] .blog-section,
[data-theme="dark"] .content-section {
  background: linear-gradient(140deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
}

[data-theme="dark"] main {
  background: var(--hero-bg-1);
}

[data-theme="dark"] #podcasts,
[data-theme="dark"] #interviews,
[data-theme="dark"] #posts {
  background: transparent;
}

/* the hard orange rule split the canvas into slabs */
.blog-section,
[data-theme="dark"] .blog-section {
  border-top: none;
}

/* =====================================================================
   Page-wide background canvas
   The gradient moves to <body> and every section goes transparent, so
   one continuous surface runs the whole page. The decorative art lives
   in .floating-bg — a fixed, full-viewport, z-index:-1 layer — so the
   blobs, dots and lines sit behind all content everywhere.
   ===================================================================== */
body {
  /* one warm surface for the whole page, lit from two sides so the cream
     has some depth in it rather than reading as flat paper */
  background-color: var(--hero-bg-1);
  background-image:
    radial-gradient(900px 560px at 82% -6%, var(--glow-warm), transparent 68%),
    radial-gradient(780px 520px at 6% 14%, var(--glow-cool), transparent 70%),
    linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  background-attachment: fixed;
}

[data-theme="dark"] body {
  background-color: var(--hero-bg-1);
  background-image:
    radial-gradient(900px 560px at 82% -6%, var(--glow-warm), transparent 68%),
    radial-gradient(780px 520px at 6% 14%, var(--glow-cool), transparent 70%),
    linear-gradient(160deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 100%);
  background-attachment: fixed;
}

/* sections stop painting their own surface */
.radio-section,
.search-section,
.blog-section,
.content-section,
[data-theme="dark"] .radio-section,
[data-theme="dark"] .search-section,
[data-theme="dark"] .blog-section,
[data-theme="dark"] .content-section,
[data-theme="dark"] main,
[data-theme="dark"] #podcasts,
[data-theme="dark"] #interviews,
[data-theme="dark"] #posts {
  background: transparent;
  backdrop-filter: none;
}

/* the hero's own wave handed off to a solid colour that no longer exists */
.hero-wave { display: none; }

/* ---- Decorative art, page-wide ------------------------------------- */
.pg-blob {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
              rgba(250, 205, 160, 0.50), rgba(250, 218, 185, 0.14) 70%);
}

.pg-blob--1 { width: 340px; height: 340px; top: 2%;  left: -80px; }
.pg-blob--2 { width: 300px; height: 300px; top: 24%; right: -70px; }
.pg-blob--3 { width: 250px; height: 250px; top: 52%; left: 4%; }
.pg-blob--4 { width: 200px; height: 200px; top: 78%; right: 18%; }

[data-theme="dark"] .pg-blob { opacity: 0.16; }

.pg-dots {
  position: absolute;
  background-image: radial-gradient(currentColor 2px, transparent 2px);
  background-size: 18px 18px;
  color: var(--blue-soft);
}

.pg-dots--1 { width: 108px; height: 90px; top: 16%; left: 6%; }
.pg-dots--2 { width: 126px; height: 72px; top: 44%; right: 4%; }
.pg-dots--3 { width: 90px;  height: 54px; top: 80%; left: 14%;
              color: rgba(246, 142, 35, 0.34); }

.pg-pip {
  position: absolute;
  border-radius: 50%;
  background: var(--blue);
}

.pg-pip--1 { width: 18px; height: 18px; top: 34%; right: 10%; }
.pg-pip--2 { width: 14px; height: 14px; top: 66%; left: 22%; opacity: 0.75; }

.pg-lines {
  position: absolute;
  top: 12%;
  left: 0;
  width: 100%;
  height: 70%;
}

/* =====================================================================
   Footer
   Brand, quick links and social in three columns, then a legal bar.
   The band carries its own art in .ft-decor — a warm wash, a soft filled
   wave along the foot, a dot texture and a fine grain — plus concentric
   rings behind the logo that echo the rings in the logo itself. All of
   it stays low contrast: depth for the cream, never competition for text.
   Every colour is a token so the dark theme only redefines tokens.
   ===================================================================== */
.site-footer {
  --ft-bg-top: #fcf7ef;
  --ft-bg-bottom: #f6ebdb;
  --ft-ink: #203746;          /* the navy the section headings use */
  --ft-ink-soft: #5b6b7a;     /* 5.3:1 on the cream */
  --ft-line: rgba(74, 59, 43, 0.12);
  --ft-art: rgba(246, 142, 35, 0.14);
  --ft-wave: rgba(246, 142, 35, 0.07);
  --ft-dot: rgba(74, 59, 43, 0.07);
  --ft-card: rgba(255, 255, 255, 0.62);
  --ft-card-edge: rgba(74, 59, 43, 0.09);
  --ft-grain-opacity: 0.35;

  position: relative;
  /* the art layer sits at z-index -1 inside the band, not behind the page */
  isolation: isolate;
  overflow: hidden;
  background: linear-gradient(180deg, var(--ft-bg-top), var(--ft-bg-bottom));
  color: var(--ft-ink);
}

[data-theme="dark"] .site-footer {
  --ft-bg-top: #17192f;
  --ft-bg-bottom: #121427;
  --ft-ink: var(--dk-ink);
  --ft-ink-soft: var(--dk-ink-soft);
  --ft-line: var(--dk-line);
  --ft-art: rgba(246, 142, 35, 0.12);
  --ft-wave: rgba(246, 142, 35, 0.05);
  --ft-dot: rgba(233, 230, 242, 0.05);
  --ft-card: rgba(255, 255, 255, 0.04);
  --ft-card-edge: var(--dk-line);
  --ft-grain-opacity: 0.12;
}

/* the station's orange-to-cyan, as a hairline across the top edge */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
              rgba(246, 142, 35, 0) 0%, var(--orange) 22%,
              var(--blue) 78%, rgba(16, 176, 224, 0) 100%);
  opacity: 0.85;
}

/* ---- art ---- */
.ft-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.ft-glow {
  position: absolute;
  border-radius: 50%;
}

.ft-glow--warm {
  width: 620px;
  height: 620px;
  top: -300px;
  inset-inline-start: -160px;
  background: radial-gradient(circle, rgba(246, 142, 35, 0.13), transparent 66%);
}

.ft-glow--cool {
  width: 520px;
  height: 520px;
  bottom: -300px;
  inset-inline-end: -120px;
  background: radial-gradient(circle, rgba(16, 176, 224, 0.08), transparent 66%);
}

/* a faint dot field in the far corner, faded out at its edges */
.ft-dots {
  position: absolute;
  top: 10px;
  inset-inline-end: 4%;
  width: 260px;
  height: 180px;
  background-image: radial-gradient(var(--ft-dot) 1.4px, transparent 1.7px);
  background-size: 16px 16px;
  -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
          mask-image: radial-gradient(closest-side, #000, transparent);
}

/* the foot: one soft filled wave and a fine line riding above it */
.ft-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 130px;           /* keeps the wave under the legal bar's divider */
  color: var(--ft-art);
}

.ft-wave-fill { fill: var(--ft-wave); }

/* paper grain — an SVG noise tile, barely there */
.ft-grain {
  position: absolute;
  inset: 0;
  opacity: var(--ft-grain-opacity);
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

[data-theme="dark"] .ft-grain { mix-blend-mode: screen; }

/* ---- layout: one compact row, set in a soft panel ---- */
.footer-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 0;
}

/* one row straight on the band — no panel behind it */
.ft-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  margin-bottom: 1.75rem;
  padding: 0.75rem 0;
}

.ft-col { padding: 0.25rem 1.5rem; }
.ft-col:first-child { padding-inline-start: 0.25rem; }
.ft-col:last-child { padding-inline-end: 0.25rem; }

/* inline-start: the right edge in Arabic, the left in English */
.ft-col + .ft-col { border-inline-start: 1px solid var(--ft-line); }

/* ---- brand ---- */
.ft-brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* the horizontal wordmark from the navbar — it already carries the name */
.ft-logo {
  display: block;
  width: auto;
  height: 84px;           /* the PNG carries wide transparent margins */
  max-width: 100%;
}

/* ---- group labels: small orange eyebrows with a lead-in rule ---- */
.ft-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  color: var(--orange);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.ft-title::before {
  content: '';
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---- quick links: one line, centred in the panel ---- */
nav.ft-col .ft-title { justify-content: center; }

.ft-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}

.ft-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--ft-ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
}

.ft-links svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--orange);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the chevron points the way the text reads, and hover nudges that way */
.ft-links a:hover { color: var(--orange); transform: translateX(-3px); }
html:not([dir="rtl"]) .ft-links svg { transform: scaleX(-1); }
html:not([dir="rtl"]) .ft-links a:hover { transform: translateX(3px); }

/* ---- social: a row of brand-colour icons ---- */
.ft-social {
  list-style: none;
  display: flex;
  gap: 0.6rem;
}

.ft-soc {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  box-shadow: 0 5px 14px rgba(32, 55, 70, 0.14);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ft-soc:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(32, 55, 70, 0.2);
}

[data-theme="dark"] .ft-soc { box-shadow: 0 5px 14px rgba(0, 0, 0, 0.35); }

.ft-soc-icon { display: grid; }
.ft-soc-icon svg { width: 20px; height: 20px; }

.ft-soc--tiktok    { background: #111827; }
.ft-soc--youtube   { background: #ff0000; }
.ft-soc--facebook  { background: #1877f2; }
.ft-soc--instagram {
  background: radial-gradient(circle at 30% 107%,
              #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* the near-black TikTok disc needs an edge on the dark band */
[data-theme="dark"] .ft-soc--tiktok {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 5px 14px rgba(0, 0, 0, 0.35);
}

/* ---- bottom bar ---- */
.ft-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1.1rem 0 1.4rem;
  border-top: 1px solid var(--ft-line);
  color: var(--ft-ink-soft);
  font-size: 0.9rem;
}

.ft-legal {
  display: flex;
  align-items: center;
}

.ft-legal a {
  padding: 0.25rem 0.9rem;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ft-legal a:first-child { padding-inline-start: 0; }
.ft-legal a:hover { color: var(--orange); }

.ft-legal-sep {
  width: 1.5px;
  height: 15px;
  border-radius: 2px;
  background: var(--orange);
}

.ft-copy { margin: 0; }

/* ---- details ---- */
/* small brand-colour pips, the same motif as the page background */
.ft-pip {
  position: absolute;
  border-radius: 50%;
  background: var(--orange);
  opacity: 0.35;
}

.ft-pip--1 { width: 8px;  height: 8px;  top: 14%; inset-inline-start: 34%; }
.ft-pip--2 { width: 6px;  height: 6px;  top: 10%; inset-inline-end: 28%;
             background: var(--blue); opacity: 0.3; }
.ft-pip--3 { width: 10px; height: 10px; top: 46%; inset-inline-end: 1.5%; opacity: 0.22; }

.ft-eq {
  position: absolute;
  top: 14px;
  inset-inline-start: 3.5%;
  width: 84px;
  color: var(--ft-art);
}

/* a tuning-dial scale riding on the bar's divider: a tick every 10px,
   a tall one every 50px, faded out towards both ends */
.ft-bar { position: relative; }

.ft-dial {
  position: absolute;
  top: -11px;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--ft-art) 0 1px, transparent 1px 50px) bottom / 100% 10px no-repeat,
    repeating-linear-gradient(90deg, var(--ft-art) 0 1px, transparent 1px 10px) bottom / 100% 5px no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* back to top: a small round control between the two halves of the bar */
.ft-top {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ft-card-edge);
  border-radius: 50%;
  background: var(--ft-card);
  color: var(--orange);
  transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ft-top svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ft-top:hover {
  transform: translateY(-3px);
  background: var(--orange);
  color: #fff;
}

/* ---- focus ---- */
.site-footer a:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  border-radius: 6px;
}

.ft-soc:focus-visible { border-radius: 50%; }
.ft-top:focus-visible { border-radius: 50%; }

/* ---- tablet: brand and social on one line, links on the next ---- */
@media (max-width: 1100px) {
  .ft-grid {
    grid-template-columns: 1fr auto;
    row-gap: 1.25rem;
  }

  .ft-brand { grid-column: 1; grid-row: 1; }
  .ft-col:last-child { grid-column: 2; grid-row: 1; }

  .ft-grid > nav.ft-col {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 1.25rem 0 0.25rem;
    border-inline-start: 0;
    border-top: 1px solid var(--ft-line);
  }

  .ft-pip { display: none; }
}

/* ---- phone: one centred stack inside the panel ---- */
@media (max-width: 600px) {
  .footer-inner { padding: 2.25rem 1rem 0; }

  .ft-grid {
    grid-template-columns: 1fr;
    row-gap: 1.25rem;
    padding: 0.5rem 0;
    text-align: center;
  }

  .ft-grid > .ft-col {
    grid-column: 1;
    grid-row: auto;
    padding: 0;
  }

  .ft-grid > .ft-col + .ft-col {
    border-inline-start: 0;
    border-top: 1px solid var(--ft-line);
    padding-top: 1.25rem;
  }

  .ft-brand { justify-content: center; }
  .ft-logo { height: 70px; }

  .ft-title { justify-content: center; }
  .ft-links { gap: 0.5rem 1.2rem; }
  .ft-social { justify-content: center; }

  .ft-bar {
    flex-direction: column;
    justify-content: center;
    gap: 0.75rem;
    text-align: center;
  }

  .ft-dots, .ft-eq, .ft-pip { display: none; }
  .ft-top { order: -1; }   /* stacked, the control leads the bar */
}

@media (prefers-reduced-motion: reduce) {
  .site-footer *,
  .site-footer *::before,
  .site-footer *::after { transition: none !important; }
}

/* =====================================================================
   Section panels
   With the page on one continuous canvas the sections ran together.
   Each now sits in its own rounded, slightly-raised panel so the
   boundaries are obvious while the shared canvas still shows around
   and between them.
   ===================================================================== */
.search-section,
#podcasts,
#interviews,
#posts {
  position: relative;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(74, 59, 43, 0.07);
  border-radius: 36px;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.03),
              0 18px 44px rgba(60, 45, 30, 0.06);
  margin: 0 auto 3.5rem;
  max-width: 1360px;
  width: calc(100% - 3rem);
  padding: 4.5rem 3.5rem;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
#posts { margin-bottom: 4rem; }

[data-theme="dark"] .search-section,
[data-theme="dark"] #podcasts,
[data-theme="dark"] #interviews,
[data-theme="dark"] #posts {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18),
              0 18px 44px rgba(0, 0, 0, 0.26);
}

/* the panel edge is the divider now — the old ones read as clutter
   between two already-separated blocks */
/* .radio-divider is styled at the foot of this file now */

/* The peach wash that used to sit inside each content panel is gone. It was
   drawn per section, so with the panels themselves removed it showed as a
   light box repeating down the page. */

/* keep panel content above that wash */
.blog-header,
.blog-grid,
#postsGrid,
.search-container { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .search-section,
  #podcasts,
  #interviews,
  #posts {
    width: calc(100% - 1.5rem);
    padding: 3rem 1.5rem;
    border-radius: 26px;
    margin-bottom: 2rem;
  }
}

/* =====================================================================
   Team section
   ===================================================================== */
#team {
  position: relative;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(74, 59, 43, 0.07);
  border-radius: 36px;
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.03),
              0 18px 44px rgba(60, 45, 30, 0.06);
  margin: 0 auto 4rem;
  max-width: 1360px;
  width: calc(100% - 3rem);
  padding: 4.5rem 3.5rem;
  overflow: hidden;
  backdrop-filter: blur(4px);
}

[data-theme="dark"] #team {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18), 0 18px 44px rgba(0, 0, 0, 0.26);
}

/* the team block had its own peach wash, the same per-section tint that
   was taken off .blog-section — it made this block warmer than the rest */

@media (max-width: 900px) {
  #team {
    width: calc(100% - 1.5rem);
    padding: 3rem 1.5rem;
    border-radius: 26px;
    margin-bottom: 2rem;
  }
}

/* ---- Scroll reveal -------------------------------------------------
   Only applied by reveal.js, so content stays visible if JS fails —
   a CSS-only opacity:0 default would hide the page on script error. */
/* A short, shallow settle. It used to lift 22px over 0.6s with a stagger,
   which in Arabic ran right-to-left across a grid and read as the row
   loading in from the right rather than as one block arriving.

   No will-change: it was promoting every un-revealed card to its own
   compositor layer at once, which is what made scrolling stutter on a
   phone. The transition creates the layer it needs for the 0.45s it runs. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- Anchor scrolling ---------------------------------------------- */
html { scroll-behavior: smooth; }

/* clear the floating pill nav when jumping to a section */
#home, #podcasts, #interviews, #posts, #team, .search-section {
  scroll-margin-top: 6rem;
}

/* nav underline grows from the centre instead of appearing */
.nav-link::after {
  transition: width 0.28s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.nav-link:not(.is-active)::after {
  content: '';
  position: absolute;
  left: 50%;
  translate: -50% 0;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  opacity: 0;
}

.nav-link:hover:not(.is-active)::after { width: 16px; opacity: 0.55; }

.content-card .video-thumbnail,
.content-card img,
.post-image {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the disc breathes gently while idle, and stops once it's spinning */
.radio-circle:not(.playing) {
  animation: discIdle 6s ease-in-out infinite;
}

@keyframes discIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* live badge label pulses with the dot */
.live-badge { transition: background 0.3s ease, border-color 0.3s ease; }

/* filter dropdowns and buttons ease rather than snap */
.blog-filter,
.search-input,
.play-btn,
.theme-toggle {
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reduced motion ------------------------------------------------
   Parallax, reveal and the idle float are all disabled for anyone who
   has asked the OS for less movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Glass system
   Frosted surfaces that let the parallax art show through. Every glass
   layer pairs a translucent fill with backdrop blur + saturation, a
   hairline border, and an inset top highlight — that highlight is what
   sells the edge as glass rather than as flat translucency.
   Saturation matters: heavy blur alone drains colour and looks milky.
   ===================================================================== */
:root {
  --glass-fill: rgba(255, 255, 255, 0.55);
  --glass-fill-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-edge: rgba(74, 59, 43, 0.08);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  --glass-blur: blur(18px) saturate(175%);
  --glass-blur-soft: blur(12px) saturate(160%);
}

[data-theme="dark"] {
  --glass-fill: rgba(255, 255, 255, 0.055);
  --glass-fill-strong: rgba(255, 255, 255, 0.085);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-edge: rgba(255, 255, 255, 0.08);
  --glass-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Section panels ------------------------------------------------ */
.search-section,
#podcasts,
#interviews,
#posts,
#team {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-sheen),
              0 1px 2px rgba(60, 45, 30, 0.03),
              0 18px 44px rgba(60, 45, 30, 0.07);
}

/* ---- Cards ---------------------------------------------------------
   Higher opacity than the panels: these hold body copy, and text over
   a busy blurred backdrop is where glassmorphism usually fails. */
.content-card,
.blog-post,
.team-card {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-sheen), var(--card-lift);
}

.content-card:hover,
.blog-post:hover,
.team-card:hover {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--glass-sheen), var(--card-lift-hover);
}

[data-theme="dark"] .content-card:hover,
[data-theme="dark"] .blog-post:hover,
[data-theme="dark"] .team-card:hover {
  background: rgba(255, 255, 255, 0.11);
}

/* ---- Inputs and controls ------------------------------------------- */
.search-input,
.blog-filter,
.category-filter {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-sheen), 0 6px 18px rgba(60, 45, 30, 0.05);
}

.volume-control {
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-sheen);
}

/* ---- Live badge ----------------------------------------------------- */
.live-badge {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(233, 69, 69, 0.22);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-sheen);
}

/* ---- Modal ---------------------------------------------------------- */
.modal-content {
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  box-shadow: var(--glass-sheen), 0 30px 70px rgba(20, 16, 40, 0.28);
}

/* ---- Fallback -------------------------------------------------------
   Firefox before 103 and older Safari ignore backdrop-filter, which
   would leave these surfaces genuinely see-through and unreadable. */
@supports not (backdrop-filter: blur(1px)) {
  .search-section, #podcasts, #interviews, #posts, #team,
  .content-card, .blog-post, .team-card,
  .search-input, .blog-filter, .category-filter, .modal-content {
    background: rgba(255, 255, 255, 0.94);
  }
  [data-theme="dark"] .search-section,
  [data-theme="dark"] #podcasts, [data-theme="dark"] #interviews,
  [data-theme="dark"] #posts, [data-theme="dark"] #team,
  [data-theme="dark"] .content-card, [data-theme="dark"] .blog-post,
  [data-theme="dark"] .team-card, [data-theme="dark"] .modal-content {
    background: #1b1b2c;
  }
}

/* ---- A little more life in the background art ----------------------
   Very slow and offset, so it never syncs into a visible rhythm. */
.pg-blob {
  animation: glassDrift 22s ease-in-out infinite;
}

.pg-blob--2 { animation-duration: 27s; animation-delay: -6s; }
.pg-blob--3 { animation-duration: 31s; animation-delay: -12s; }
.pg-blob--4 { animation-duration: 25s; animation-delay: -3s; }

@keyframes glassDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(18px, -22px) scale(1.06); }
}

/* =====================================================================
   Team cards — premium editorial redesign
   Supersedes every earlier .team-* block. Horizontal, photo-led, with a
   single accent colour used sparingly: role pill, rule, link, hover.
   ===================================================================== */

/* the team block carried the same wash — removed for the same reason */
#team::before {
  content: none;
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle at 50% 20%, rgba(16, 176, 224, 0.04), transparent 45%);
}

/* ---- Card ----------------------------------------------------------- */
.team-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-height: 460px;
  padding: 0;
  overflow: hidden;                 /* clips the photo to the outer corners */
  border-radius: 22px;
  border: 1px solid rgba(74, 59, 43, 0.07);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 1px 2px rgba(60, 45, 30, 0.03),
              0 10px 30px rgba(60, 45, 30, 0.06);
  transition: transform 0.45s ease-out, box-shadow 0.45s ease-out,
              border-color 0.45s ease-out, background 0.45s ease-out;
}

[data-theme="dark"] .team-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.26);
}

/* ---- Action --------------------------------------------------------- */
.team-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.3rem;
  padding-bottom: 5px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--blue);
  transition: color 0.45s ease-out;
}

.team-link::after {                 /* the rule that animates on hover */
  content: '';
  position: absolute;
  inset-inline-start: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.25;
  transition: opacity 0.45s ease-out;
}

.team-arrow {
  display: inline-block;
  font-size: 0.95em;
  line-height: 1;
  transition: transform 0.45s ease-out;
}

/* ---- Hover ---------------------------------------------------------- */
.team-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(246, 142, 35, 0.28);
  box-shadow: 0 2px 4px rgba(60, 45, 30, 0.05),
              0 20px 46px rgba(60, 45, 30, 0.11);
}

[data-theme="dark"] .team-card:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(246, 142, 35, 0.3);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.26), 0 20px 46px rgba(0, 0, 0, 0.36);
}
.team-card:hover .team-link        { color: #0b86ab; }
.team-card:hover .team-link::after { opacity: 0.85; }
.team-card:hover .team-arrow       { transform: translateX(4px); }

[data-theme="dark"] .team-card:hover .team-link { color: var(--blue); }
[dir="rtl"] .team-link { letter-spacing: normal; }
[dir="rtl"] .team-arrow { transform: scaleX(-1); }
[dir="rtl"] .team-card:hover .team-arrow { transform: scaleX(-1) translateX(4px); }

/* ---- Narrow screens -------------------------------------------------
   Side by side would squeeze both halves below this width. */
@media (max-width: 860px) {
  .team-card { flex-direction: column; min-height: 0; }
}

/* =====================================================================
   "View Profile" as a button
   Replaces the underlined text link on the team cards.
   ===================================================================== */
.team-link {
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(16, 176, 224, 0.3);
  background: rgba(16, 176, 224, 0.08);
  font-size: 0.8rem;
  transition: background 0.4s ease-out, border-color 0.4s ease-out,
              color 0.4s ease-out, transform 0.4s ease-out;
}

.team-link::after { display: none; }   /* the animated rule is redundant now */

.team-card:hover .team-link {
  color: #fff;
  background: var(--blue);
  border-color: var(--blue);
}

.team-link:hover {
  color: #fff;
  background: #0d9cc7;
  border-color: #0d9cc7;
}

[data-theme="dark"] .team-link { border-color: rgba(16, 176, 224, 0.35); }

/* =====================================================================
   Member profile page
   ===================================================================== */
.member-page {
  padding: 9rem 2rem 5rem;
  min-height: 70vh;
}

.member-shell {
  max-width: 980px;
  margin: 0 auto;
}

/* back link — arrow sits before the text and points backwards */
.member-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--card-ink-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}

.member-back:hover { color: var(--blue); }

.member-back-arrow {
  display: inline-block;
  transform: scaleX(-1);
  transition: transform 0.3s ease;
}

.member-back:hover .member-back-arrow { transform: scaleX(-1) translateX(3px); }

[dir="rtl"] .member-back-arrow { transform: none; }
[dir="rtl"] .member-back:hover .member-back-arrow { transform: translateX(-3px); }

.member-card {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(74, 59, 43, 0.07);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: var(--glass-sheen),
              0 1px 2px rgba(60, 45, 30, 0.03),
              0 18px 44px rgba(60, 45, 30, 0.08);
}

[data-theme="dark"] .member-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
}

.member-media {
  flex: 0 0 46%;
  max-width: 460px;
  overflow: hidden;
}

.member-photo {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
  object-position: center 22%;
  background: linear-gradient(180deg, #e9edf2, #dfe5ec);
}

.member-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(160deg, var(--orange), #ff9f43);
}

.member-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 2.75rem;
}

.member-name {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--card-ink);
  margin: 0;
}

[dir="rtl"] .member-name { letter-spacing: normal; }
[data-theme="dark"] .member-name { color: #fff; }

.member-bio {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--card-ink-muted);
  margin: 0;
}

.member-missing {
  text-align: center;
  padding: 4rem 1rem;
}

.member-missing h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--card-ink);
  margin-bottom: 1.5rem;
}

@media (max-width: 860px) {
  .member-page { padding: 7rem 1.25rem 3.5rem; }
  .member-card { flex-direction: column; }
  .member-media { flex: none; max-width: none; }
  .member-photo { min-height: 0; aspect-ratio: 4 / 3; }
  .member-body { padding: 2rem 1.75rem 2.25rem; }
  .member-name { font-size: 2rem; }
}
.team-link { margin-top: 1.4rem; }

/* =====================================================================
   HOSTS SECTION
   Editorial layout: ghost numerals, a soft stage shape, script-name
   overlay, and a detail column. Replaces the earlier team cards.
   ===================================================================== */
.hosts-section {
  position: relative;
  max-width: 1360px;
  width: calc(100% - 3rem);
  margin: 0 auto 4rem;
  padding: 3.5rem 3rem 3rem;
  background: transparent;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
}

.hosts-section::before,
.hosts-section::after { display: none; }

/* ---- Head / foot rails ---------------------------------------------- */
.hosts-head,
.hosts-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hosts-foot {
  margin-top: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(74, 59, 43, 0.08);
}

.rail {
  display: inline-block;
  width: 30px;
  height: 2px;
  border-radius: 99px;
  background: var(--blue);
  margin-inline-end: 0.85rem;
  vertical-align: middle;
}

.hosts-eyebrow,
.hosts-brand,
.hosts-tagline {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9a938a;
}

.hosts-foot-tags {
  margin: 0;
  font-size: 0.82rem;
  color: var(--card-ink-muted);
}

/* ---- Grid ------------------------------------------------------------ */
.hosts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(440px, 1fr));
  gap: 2rem;
}

/* ---- One host -------------------------------------------------------- */
.host {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: end;
  min-height: 470px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.host-onair {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.85rem;
  margin-bottom: 1.5rem;
  border-radius: 999px;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
}

.host-onair i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: onAirBlink 2.2s ease-in-out infinite;
}

@keyframes onAirBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

[dir="rtl"] .host-onair { letter-spacing: normal; }

.host-rule {
  display: block;
  width: 42px;
  height: 2px;
  margin: 1.15rem 0 1.4rem;
  border-radius: 99px;
  background: var(--blue);
  transition: width 0.5s ease-out;
}
.host:hover .host-rule   { width: 64px; }

/* ---- Narrow ---------------------------------------------------------- */
@media (max-width: 1080px) {
  .hosts-grid { grid-template-columns: 1fr; gap: 3rem; }
}

@media (max-width: 720px) {
  .hosts-section { width: calc(100% - 1.5rem); padding: 2.5rem 1.25rem; }
  .host { grid-template-columns: 1fr; min-height: 0; gap: 1.5rem; }
}

/* With the show time, tags and waveform gone, the rule sat against the
   button; reflow so the group reads as one block again. */
.host-rule { margin: 1.15rem 0 1.6rem; }

/* =====================================================================
   HOST PHOTO TREATMENT
   The photos are real studio shots on grey, not cut-outs, so they are
   framed as a card rather than floated as a silhouette. Everything here
   is presentation only — the source images are untouched.
   ===================================================================== */

/* the photo is now the dominant element */
.host {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  min-height: 520px;
}

@media (max-width: 1080px) {
  .host { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

@media (max-width: 720px) {
  .host { grid-template-columns: 1fr; min-height: 0; }
}

/* rule under the role */
.host-rule {
  background: var(--orange);
}

/* the rule grows into a two-tone mark on hover */
.host-rule::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% + 6px);
  width: 12px;
  height: 100%;
  border-radius: 99px;
  background: var(--blue);
  opacity: 0.8;
  transition: width 0.5s ease-out;
}

.host-rule { position: relative; }
.host:hover .host-rule::after { width: 18px; }

/* footer rail in orange so the two rails bracket the section */
.hosts-foot .rail {
  background: var(--orange);
}

/* a warm dot separates the tag line */
.hosts-foot-tags {
  color: var(--card-ink-muted);
}

/* =====================================================================
   MEMBER PROFILE — matches the hosts treatment
   ===================================================================== */
.member-media { position: relative; }

.member-photo {
  border-radius: 22px;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  box-shadow: 0 2px 4px rgba(60, 45, 30, 0.04),
              0 26px 44px -12px rgba(60, 45, 30, 0.26);
}

.member-body .host-onair { margin-bottom: 1.25rem; }
.member-body .host-rule  { margin: 1.1rem 0 1.4rem; }

.member-bio {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--card-ink-muted);
  margin: 0 0 1.6rem;
}

.member-social {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s ease;
}

.member-social:hover { color: #0b86ab; }
[dir="rtl"] .member-social .team-arrow { transform: scaleX(-1); display: inline-block; }

@media (max-width: 860px) {
  .member-photo { border-radius: 18px; }
}

/* =====================================================================
   HOSTS — full-bleed tiles
   Photo fills the tile, name set over it, details slide up on hover.
   The whole tile is the link. Supersedes the split detail-column layout.
   ===================================================================== */
.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 1.75rem;
  max-width: 1100px;
  margin: 0 auto;
}

.host {
  display: block;
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
}

.host-onair {
  position: absolute;
  z-index: 2;
  top: 1.25rem;
  inset-inline-start: 1.35rem;
  margin: 0;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(246, 142, 35, 0.92);
  backdrop-filter: blur(6px);
}

[dir="rtl"] .host-onair { letter-spacing: normal; font-size: 0.7rem; }

.host-rule {
  width: 34px;
  height: 3px;
  margin: 0.9rem 0 0.8rem;
  border-radius: 99px;
  background: var(--orange);
}

/* ---- Narrow ----------------------------------------------------------- */
@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 380px; gap: 1.5rem; }
}
.member-body .host-rule { margin: 1.1rem 0 1.7rem; }

/* nothing follows the bio now; drop its trailing space */
.member-body .member-bio:last-child { margin-bottom: 0; }
.member-body .host-rule:last-child { margin-bottom: 0; }

/* Tiles scaled down ~15% — the 4:5 ratio at 530px wide was making each
   one ~660px tall, which dominated the page. */
.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.5rem;
  max-width: 940px;
}

.host-onair {
  top: 1.1rem;
  inset-inline-start: 1.15rem;
  padding: 0.26rem 0.68rem;
}

@media (max-width: 720px) {
  .hosts-grid { max-width: 340px; }
}

/* =====================================================================
   HOSTS — fit the section to one viewport
   Header and tiles scaled so the whole block lands inside 100vh.
   Scoped to .hosts-section so the other sections keep their proportions.
   ===================================================================== */
.hosts-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem 2rem 2rem;
  margin-bottom: 0;
}

/* compact header */
.hosts-section .blog-header {
  margin-bottom: 2rem;
  padding-bottom: 0;
}

.hosts-section .blog-title-container { gap: 0.6rem; }

.hosts-section .blog-icon {
  padding: 0.85rem;
  margin-bottom: 0.35rem;
}

.hosts-section .blog-icon svg { width: 26px; height: 26px; }

.hosts-section .blog-title-container h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.2;
}

.hosts-section .blog-subtitle {
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 520px;
}

/* narrower grid brings tile height down with it (4:5 is ratio-locked) */
.hosts-grid {
  max-width: 720px;
  gap: 1.5rem;
}

.hosts-foot {
  margin-top: 1.5rem;
  padding-top: 1rem;
}

/* short viewports: let it scroll rather than crushing the tiles */
@media (max-height: 760px) {
  .hosts-section { min-height: auto; padding: 5rem 2rem 2rem; }
}

@media (max-width: 720px) {
  .hosts-section { min-height: auto; padding: 4rem 1.25rem 2rem; }
  .hosts-grid { max-width: 340px; }
}

/* Tiles back up in size while still landing inside one viewport.
   4:5 is ratio-locked, so width drives height: 880px grid gives roughly
   428 x 535px tiles, which fits under a ~900px viewport once the header
   (~170px) and footer rail (~55px) are accounted for. */
.hosts-grid {
  max-width: 880px;
  gap: 1.75rem;
}

.hosts-section .blog-header { margin-bottom: 1.6rem; }

@media (max-width: 720px) {
  .hosts-grid { max-width: 360px; }
}

/* =====================================================================
   HOSTS — arch portraits
   Latin name set large behind an arch-framed photo, tiles staggered
   vertically. Supersedes the full-bleed overlay tiles.
   ===================================================================== */
.hosts-section {
  min-height: auto;
  display: block;
  padding: 4rem 2rem 3rem;
}

.hosts-section .blog-header { margin-bottom: 3rem; }

.hosts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 3.5rem;
  max-width: 820px;
  margin: 0 auto;
  padding-top: 2.5rem;
}

/* the second portrait drops, so the pair reads as composed rather than
   lined up */
.host:nth-child(even) { margin-top: 3.5rem; }

.host {
  display: block;
  background: none;
  border: none;
  box-shadow: none;
  overflow: visible;
  min-height: 0;
}

.host-onair {
  position: absolute;
  z-index: 3;
  bottom: 1rem;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
  background: rgba(246, 142, 35, 0.94);
  backdrop-filter: blur(6px);
}

[dir="rtl"] .host-onair { letter-spacing: normal; font-size: 0.7rem; }

/* ---- Narrow ----------------------------------------------------------- */
@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 320px; gap: 2.5rem; padding-top: 2rem; }
  .host:nth-child(even) { margin-top: 0; }
}

/* The hosts header was tightened to fit one viewport, which left the icon
   with no clearance — its float animation and parallax drift pushed it
   into the heading. Restore spacing and hold the icon still. */
.hosts-section .blog-title-container {
  gap: 1.1rem;
}

.hosts-section .blog-icon {
  margin-bottom: 0;
  animation: none;          /* float was closing the remaining gap */
}

.hosts-section .blog-icon::before { display: none; }

.hosts-section .blog-title-container h2 {
  margin-top: 0;
  line-height: 1.35;        /* Arabic descenders need the extra room */
}

.hosts-section .blog-subtitle { margin-top: 0.5rem; }

/* =====================================================================
   MEMBER PAGE — reset styles borrowed from the tiles
   .host-onair, .host-role and .host-rule were re-styled for the arch
   tiles, where they are absolutely positioned over a dark photo. On the
   profile page they sit in normal flow on a light background, so the
   tile-specific positioning and colours have to be undone.
   ===================================================================== */
.member-body { position: relative; }

.member-body .host-onair {
  position: static;
  transform: none;
  inset: auto;
  display: inline-flex;
  width: auto;
  white-space: nowrap;
  margin: 0 0 1.25rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.member-body .host-rule {
  position: relative;
  display: block;
  width: 38px;
  height: 3px;
  margin: 1.1rem 0 1.7rem;
  border-radius: 99px;
  background: var(--orange);
}

/* the duotone name treatment is for white-on-photo, not dark-on-cream */
.member-name {
  text-shadow: none;
  color: var(--card-ink);
}

[data-theme="dark"] .member-name { color: #fff; }

/* the grid gap has to clear the badge, which sits outside the arch */
.hosts-grid { gap: 4.5rem; }

@media (max-width: 720px) {
  .hosts-grid { gap: 3rem; }
}

/* the badge overlaps less now, so the gap can come back in */
.hosts-grid { gap: 3.75rem; }

@media (max-width: 720px) {
  .hosts-grid { gap: 2.75rem; }
}

/* the gap has to hold the bar plus clearance on both sides */
.hosts-grid {
  gap: 5.5rem;
  max-width: 780px;
}

/* the outermost bar overhangs the grid, so give the section room */
.hosts-section { padding-inline: 4rem; }

@media (max-width: 860px) {
  .hosts-section { padding-inline: 2.5rem; }
}

@media (max-width: 720px) {
  .hosts-grid { gap: 4rem; max-width: 300px; }
  .hosts-section { padding-inline: 3.5rem; }
}

/* nothing overhangs now, so the extra room can come back out */
.hosts-grid {
  gap: 3.5rem;
  max-width: 820px;
}

.hosts-section { padding-inline: 2rem; }

@media (max-width: 720px) {
  .hosts-grid { gap: 2.5rem; max-width: 320px; }
  .hosts-section { padding-inline: 1.25rem; }
}

.host-curve {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* the band itself — a thick stroke on the arc */
.host-curve-band {
  fill: none;
  stroke: var(--orange);
  stroke-width: 38;
  stroke-linecap: round;
  transition: stroke 0.5s ease-out, stroke-width 0.5s ease-out;
}

/* the name riding the same path */
.host-curve-text {
  fill: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* nudges the baseline so the glyphs sit centred in the band */
  dominant-baseline: middle;
  transition: fill 0.5s ease-out;
}

@media (max-width: 720px) {
  .host-curve-text { font-size: 23px; letter-spacing: 0.1em; }
  .host-curve-band { stroke-width: 36; }
}

/* =====================================================================
   Curved name band — refined
   A 38px slab with 25px type read as a banner pasted on the photo. The
   band is narrower, sits tight to the frame rim, and the type is small
   and widely tracked — the proportions do the work, not the colour.
   ===================================================================== */
.host-curve-band {
  stroke-width: 26;
  stroke-linecap: butt;          /* a rounded cap on a rim band looks unfinished */
  opacity: 0.96;
}

.host-curve-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  fill: #fff;
}

@media (max-width: 720px) {
  .host-curve-band { stroke-width: 22; }
  .host-curve-text { font-size: 11px; letter-spacing: 0.3em; }
}

/* =====================================================================
   HOSTS — fit the whole section in one viewport
   The arch is ratio-locked at 3:4, so tile width drives height. A 740px
   grid gives ~342 x 456px tiles, which clears the header and footer rail
   inside a ~860px viewport.
   ===================================================================== */
.hosts-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5.5rem 2rem 2rem;
  margin-bottom: 0;
}

.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 3rem;
  max-width: 740px;
  padding-top: 0;
}

/* the stagger costs vertical room the viewport no longer has */
.host:nth-child(even) { margin-top: 0; }

/* header trimmed to match */
.hosts-section .blog-header { margin-bottom: 1.75rem; }
.hosts-section .blog-icon { padding: 0.75rem; }
.hosts-section .blog-icon svg { width: 24px; height: 24px; }
.hosts-section .blog-title-container h2 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.hosts-section .blog-subtitle { font-size: 0.88rem; }

.hosts-foot { margin-top: 1.25rem; padding-top: 0.9rem; }

/* band scales with the tile, so ease it back a touch */
.host-curve-band { stroke-width: 24; }
.host-curve-text { font-size: 12px; letter-spacing: 0.38em; }

/* short screens: scroll rather than crush the portraits */
@media (max-height: 780px) {
  .hosts-section { min-height: auto; padding: 5rem 2rem 2rem; }
}

@media (max-width: 720px) {
  .hosts-section { min-height: auto; padding: 4rem 1.25rem 2rem; }
  .hosts-grid { max-width: 300px; gap: 2rem; }
}

/* Midway between the 740px fit-to-screen and the original 820px:
   ~390 x 520px tiles. Still clears the header and rail on a full
   desktop viewport, with a bit more presence. */
.hosts-grid {
  max-width: 840px;
  gap: 3.25rem;
}

.host-curve-band { stroke-width: 25; }
.host-curve-text { font-size: 12.5px; letter-spacing: 0.4em; }

/* a taller block needs a slightly leaner header to stay on one screen */
.hosts-section { padding: 5rem 2rem 1.75rem; }
.hosts-section .blog-header { margin-bottom: 1.5rem; }

@media (max-width: 720px) {
  .hosts-grid { max-width: 320px; gap: 2rem; }
}

/* =====================================================================
   HOSTS — fill the page
   The tiles can only grow if the header gives up room: the arch is
   ratio-locked at 3:4, so every 40px of extra width costs ~53px of
   height. Header compacted hard, tiles pushed to ~450 x 600px.
   ===================================================================== */
.hosts-section {
  padding: 4.5rem 2rem 1.25rem;
}

/* header on one compact line-stack */
.hosts-section .blog-header { margin-bottom: 1.1rem; }
.hosts-section .blog-title-container { gap: 0.6rem; }

.hosts-section .blog-icon {
  padding: 0.6rem;
  margin-bottom: 0;
}

.hosts-section .blog-icon svg { width: 20px; height: 20px; }

.hosts-section .blog-title-container h2 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
}

.hosts-section .blog-subtitle {
  font-size: 0.82rem;
  line-height: 1.5;
  max-width: 460px;
}

.hosts-foot {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  font-size: 0.65rem;
}

/* the reclaimed room goes into the portraits */
.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3.5rem;
  max-width: 980px;
}

/* band and caption scale up with the tile */
.host-curve-band { stroke-width: 26; }
.host-curve-text { font-size: 13px; letter-spacing: 0.42em; }

/* under ~900px tall the tiles no longer clear the header — scroll instead */
@media (max-height: 900px) {
  .hosts-section { min-height: auto; }
}

@media (max-width: 860px) {
  .hosts-grid { max-width: 420px; gap: 2.5rem; }
}

@media (max-width: 720px) {
  .hosts-grid { max-width: 330px; gap: 2rem; }
}

/* Header type scaled back up — it had been shrunk to buy room for the
   portraits, which left it undersized against them. */
.hosts-section .blog-title-container h2 {
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.3;
  font-weight: 800;
}

.hosts-section .blog-subtitle {
  font-size: 1.02rem;
  line-height: 1.7;
  max-width: 620px;
}

.hosts-section .blog-icon { padding: 0.8rem; }
.hosts-section .blog-icon svg { width: 26px; height: 26px; }

.hosts-section .blog-header { margin-bottom: 1.6rem; }
.hosts-section .blog-title-container { gap: 0.85rem; }

@media (max-width: 720px) {
  .hosts-section .blog-title-container h2 { font-size: 1.5rem; }
  .hosts-section .blog-subtitle { font-size: 0.92rem; }
}

/* =====================================================================
   Hosts header — identical to the other sections
   Every .hosts-section override of the header is reset to the shared
   base values, so Podcasts, Interviews, Articles and Hosts all match.
   ===================================================================== */
.hosts-section .blog-header {
  margin-bottom: 4rem;
  padding-bottom: 2rem;
}

.hosts-section .blog-title-container { gap: 1.5rem; }

.hosts-section .blog-icon {
  padding: 1.5rem;
  margin-bottom: 1rem;
}

.hosts-section .blog-icon svg { width: 40px; height: 40px; }

.hosts-section .blog-title-container h2 {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.hosts-section .blog-subtitle {
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 700px;
}

/* the full-size header no longer leaves room for a one-screen lock */
.hosts-section {
  min-height: auto;
  display: block;
  padding: 5rem 2rem 2rem;
}

@media (max-width: 720px) {
  .hosts-section .blog-header { margin-bottom: 2.5rem; padding-bottom: 1rem; }
  .hosts-section .blog-title-container h2 { font-size: 1.9rem; }
  .hosts-section .blog-subtitle { font-size: 1rem; }
}

/* Curved name band switched from orange to the brand blue. */
.host-curve-band {
  stroke: var(--blue);
}

/* Bands alternate: Mohanad (first) blue, Rayan orange. Written as
   nth-child so a third host keeps the alternation automatically. */
.host-curve-band { stroke: var(--orange); }

.host:nth-child(odd) .host-curve-band { stroke: var(--blue); }

/* The band now carries the Arabic name. letter-spacing breaks Arabic
   letter-joining, so it is reset there, and the size lifts to suit the
   heavier script. */
[dir="rtl"] .host-curve-text {
  letter-spacing: normal;
  font-size: 19px;
  font-weight: 700;
  direction: rtl;
}

/* Revert the swap: the band is the Latin name again, the caption the
   Arabic one, with their original type treatment. */
[dir="rtl"] .host-curve-text {
  letter-spacing: 0.42em;
  font-size: 13px;
  font-weight: 600;
  direction: ltr;
}

/* =====================================================================
   MEMBER PROFILE — matched to the hosts tiles
   Arch frame and curved band, same as the homepage, so moving between
   the two views feels like one site rather than two templates.
   ===================================================================== */
.member-page { padding: 8rem 2rem 5rem; }

.member-shell { max-width: 1000px; }

/* back link as a quiet pill */
.member-back {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 2.25rem;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--card-edge);
  background: rgba(255, 255, 255, 0.6);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--card-ink-muted);
}

.member-back:hover {
  color: var(--card-ink);
  border-color: rgba(16, 176, 224, 0.4);
  background: rgba(16, 176, 224, 0.07);
}

/* card loses its own chrome — the arch carries the visual weight */
.member-card {
  align-items: center;
  gap: 3.5rem;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.member-media { flex: 0 0 46%; max-width: 400px; }

/* the arch, identical geometry to the tiles */
.member-arch {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 999px 999px 26px 26px;
  background: linear-gradient(170deg, #eef1f5, #e2e7ee);
  box-shadow: 0 2px 4px rgba(60, 45, 30, 0.04),
              0 24px 50px -16px rgba(60, 45, 30, 0.3);
}

.member-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  object-fit: cover;
  filter: contrast(1.04) saturate(1.02);
  box-shadow: none;
}

.member-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  filter: none;
}

/* ---- Copy ------------------------------------------------------------ */
.member-body {
  flex: 1;
  align-items: flex-start;
  padding: 0;
}

.member-body .host-onair { margin-bottom: 1.4rem; }

.member-name {
  font-size: clamp(2.4rem, 4.5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--card-ink);
  margin: 0;
}

[data-theme="dark"] .member-name { color: #fff; }

.member-body .host-rule {
  width: 46px;
  margin: 1.5rem 0 0;
}

.member-bio { margin: 1.5rem 0 0; max-width: 46ch; }

.member-social { margin-top: 1.75rem; }

@media (max-width: 860px) {
  .member-page { padding: 6.5rem 1.25rem 3.5rem; }
  .member-card { flex-direction: column; gap: 2rem; }
  .member-media { flex: none; max-width: 300px; width: 100%; }
  .member-body { align-items: flex-start; }
  .member-name { font-size: 2.1rem; }
}

/* =====================================================================
   HOSTS — clean
   Arch, photo, name. The curved band, ghost numerals, scrim and corner
   arrow all went: four decorative layers over a portrait is what made
   it busy. The photography carries the section now.
   ===================================================================== */
.host-curve,
.host-index,
.host-scrim,
.host-go,
.host-vbadge,
.host-bigname { display: none; }

.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 3rem;
  max-width: 760px;
}

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 280px; gap: 2.5rem; }
}

/* =====================================================================
   HOSTS — name breaks the frame
   Outlined type straddling the photo edge, offset pair. The name is the
   graphic element; nothing else is layered on the photograph.
   ===================================================================== */
.host-arch,
.host-curve,
.host-index,
.host-scrim,
.host-go,
.host-vbadge,
.host-bigname,
.host-name { display: none; }

.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 4.5rem;
  max-width: 780px;
  padding-bottom: 2.5rem;    /* the outlined name overhangs the frame */
}

/* the pair sits at two heights */
.host:nth-child(even) { margin-top: 4rem; }

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 290px; gap: 3.5rem; }
  .host:nth-child(even) { margin-top: 0; }
}

/* =====================================================================
   HOSTS — hover-reveal roster
   No cards. Two large name rows like an on-air listing; the portrait
   appears only on hover and follows the cursor. Supersedes every
   earlier tile layout.
   ===================================================================== */
.host-arch,
.host-frame,
.host-outline,
.host-tick,
.host-curve,
.host-index,
.host-scrim,
.host-vbadge,
.host-bigname,
.host-caption { display: none; }

.hosts-grid {
  position: relative;
  display: block;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  border-top: 1px solid rgba(74, 59, 43, 0.14);
}

.host {
  display: block;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid rgba(74, 59, 43, 0.14);
}

.host:nth-child(even) { margin-top: 0; }

/* The cursor preview is offset outside the grid box by design, so the
   section must not clip. #team sets overflow:hidden as an ID selector,
   which outranks .hosts-section — match it with ID + class to win. */
#team.hosts-section {
  overflow: visible;
}

/* the panel's own rounding/backdrop belonged to the card layouts */
#team.hosts-section {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 5rem 2rem 3rem;
}

#team.hosts-section::after { display: none; }

/* =====================================================================
   HOSTS — horizontal cards  (final)
   Photo beside the copy. Everything from the arch / band / roster
   experiments is switched off above; this is the only live layout.
   ===================================================================== */
.host-arch, .host-frame, .host-outline, .host-tick, .host-curve,
.host-index, .host-scrim, .host-go, .host-vbadge, .host-bigname,
.host-caption, .host-num, .host-row, .hosts-preview { display: none; }

.hosts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  max-width: 1040px;
  margin: 0 auto;
  padding: 0;
  border: none;
}

.host {
  display: block;
  margin: 0;
  border: none;
  background: none;
  box-shadow: none;
}

/* orange bar with a short blue dash — the house mark */
.host-rule {
  display: block;
  position: relative;
  width: 32px;
  height: 3px;
  margin: 0.85rem 0 1.15rem;
  border-radius: 99px;
  background: var(--orange);
  transition: width 0.45s ease-out;
}

.host-rule::after {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: calc(100% + 6px);
  width: 11px;
  height: 100%;
  border-radius: 99px;
  background: var(--blue);
  transition: width 0.45s ease-out;
}

/* ---- Narrow -------------------------------------------------------------- */
@media (max-width: 780px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 420px; gap: 1.5rem; }
}

/* =====================================================================
   HOSTS — arch portraits  (final)
   Same idea as before, but the band is a rim trim rather than a banner:
   18 units instead of 38, pushed out to radius 140 so it sits flush with
   the frame edge, with small widely-tracked type. Name and role sit on
   the cream below, so nothing covers a face.
   ===================================================================== */
.host-frame, .host-outline, .host-tick, .host-index, .host-scrim,
.host-go, .host-vbadge, .host-bigname, .host-caption, .host-num,
.host-row, .hosts-preview, .host-rule, .host-link { display: none; }

.hosts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2.75rem;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  border: none;
}

.host { display: block; margin: 0; border: none; background: none; box-shadow: none; }

/* ---- Rim band ----------------------------------------------------------- */
.host-curve {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.host-curve-band {
  fill: none;
  stroke: var(--orange);
  stroke-width: 18;
  stroke-linecap: butt;
  transition: stroke 0.5s ease-out;
}

.host:nth-child(odd) .host-curve-band { stroke: var(--blue); }

.host-curve-text {
  fill: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.46em;
  text-transform: uppercase;
  dominant-baseline: middle;
}

[dir="rtl"] .host-curve-text { direction: ltr; }

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 270px; gap: 2.25rem; }
  .host-curve-text { font-size: 8.5px; letter-spacing: 0.34em; }
}

/* Band and tiles back to the weight in the reference: a wide sweep at
   radius 131 rather than a thin rim, on ~460 x 615px portraits. */
.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3.5rem;
  max-width: 980px;
}

.host-curve-band { stroke-width: 26; }

.host-curve-text {
  font-size: 13px;
  letter-spacing: 0.42em;
  font-weight: 600;
}

@media (max-width: 860px) {
  .hosts-grid { max-width: 420px; gap: 2.5rem; }
}

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 330px; gap: 2.25rem; }
  .host-curve-text { font-size: 11px; letter-spacing: 0.3em; }
  .host-curve-band { stroke-width: 24; }
}

/* The band was hidden: a display:none group from the horizontal-card
   layout listed .host-curve, and the arch block restyled it without ever
   setting display back. Nothing else in the cascade restores it. */
.host-curve {
  display: block;
}

/* Tiles scaled down ~20%: ~370 x 495px. Band and type scale with them so
   the proportions hold rather than the band looking heavier. */
.hosts-grid {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 3rem;
  max-width: 800px;
}

.host-curve-band { stroke-width: 24; }
.host-curve-text { font-size: 12px; letter-spacing: 0.4em; }

@media (max-width: 860px) {
  .hosts-grid { max-width: 380px; gap: 2.25rem; }
}

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 300px; gap: 2rem; }
}

/* =====================================================================
   HOSTS — broadcast ticker
   Orange strip with the station line scrolling continuously. Two
   identical groups sit side by side and the track travels exactly one
   group width, so the second arrives where the first began — the loop
   has no visible seam.
   ===================================================================== */
.hosts-ticker {
  position: relative;
  margin: 3.5rem 0 0;
  padding: 0.85rem 0;
  overflow: hidden;
  background: var(--orange);
  /* full-bleed out of the section's padding */
  width: 100vw;
  margin-inline-start: 50%;
  transform: translateX(-50%);
  user-select: none;
}

[dir="rtl"] .hosts-ticker { transform: translateX(50%); }

.hosts-ticker-track {
  display: flex;
  width: max-content;
  animation: tickerScroll 28s linear infinite;
}

/* the track is two groups wide; -50% is exactly one group */
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.hosts-ticker-group {
  display: flex;
  align-items: center;
  flex: none;
}

.hosts-ticker-group span {
  padding: 0 1.6rem;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #fff;
}

/* tracking and uppercase break Arabic letter-joining */
.hosts-ticker-group span:lang(ar),
[dir="rtl"] .hosts-ticker-group span {
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.95rem;
  font-weight: 600;
}

.hosts-ticker-group i {
  font-style: normal;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}

/* pause on hover so the line can actually be read */
.hosts-ticker:hover .hosts-ticker-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hosts-ticker-track { animation: none; }
}

@media (max-width: 720px) {
  .hosts-ticker { margin-top: 2.5rem; padding: 0.7rem 0; }
  .hosts-ticker-group span { padding: 0 1.1rem; font-size: 0.75rem; }
  [dir="rtl"] .hosts-ticker-group span { font-size: 0.85rem; }
  .hosts-ticker-track { animation-duration: 20s; }
}

/* Ticker sits above the portraits now — margin flips to the bottom. */
.hosts-ticker {
  margin: 0 0 3.5rem;
  margin-inline-start: 50%;
}

@media (max-width: 720px) {
  .hosts-ticker { margin: 0 0 2.5rem; margin-inline-start: 50%; }
}

/* =====================================================================
   Band merged into the photograph
   The band was an opaque stroke sitting on top of the image. Multiply
   blending lets the photo's tone and the studio gradient read straight
   through the colour, so the two become one surface rather than a
   sticker on a picture. The text is a separate element and does not
   blend, so it stays solid white and legible.
   ===================================================================== */
.host-curve-band {
  mix-blend-mode: multiply;
  opacity: 0.92;
}

/* multiply against a dark backdrop crushes to black, so dark mode keeps
   a normal blend at slightly reduced opacity instead */
[data-theme="dark"] .host-curve-band {
  mix-blend-mode: normal;
  opacity: 0.85;
}

/* the text sits above the blended band, unaffected by it */
.host-curve-text {
  mix-blend-mode: normal;
  paint-order: stroke fill;
}

/* =====================================================================
   HOSTS — broadcast cards
   Dark navy card, brand lockup, sweeping accent arc, show details.
   Accent alternates per card (orange / blue) via nth-child.
   ===================================================================== */
.host-arch, .host-frame, .host-outline, .host-tick, .host-curve,
.host-index, .host-scrim, .host-go, .host-vbadge, .host-bigname,
.host-caption, .host-num, .host-row, .hosts-preview, .host-body,
.host-name, .host-role, .host-media, .host-rule, .host-link,
.host-photo { display: none; }

.hosts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 2.5rem;
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  border: none;
}

.host { display: block; margin: 0; border: none; background: none; box-shadow: none; }

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 320px; gap: 2rem; }
}

/* =====================================================================
   HOSTS — vinyl discs
   Circular portrait set into a record: groove rings, centre label,
   spindle hole. Spins on hover. Ties to the rotating disc in the hero.
   Accent alternates orange / blue per card.
   ===================================================================== */
.host-arch, .host-frame, .host-outline, .host-tick, .host-curve,
.host-index, .host-scrim, .host-go, .host-vbadge, .host-bigname,
.host-caption, .host-num, .host-row, .hosts-preview, .host-body,
.host-name, .host-role, .host-media, .host-rule, .host-link,
.host-photo, .dj-card, .dj-brand, .dj-arc, .dj-media, .dj-info,
.dj-bar, .dj-ghost, .dj-grain { display: none; }

.hosts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 3rem;
  max-width: 720px;
  margin: 0 auto;
  padding: 0;
  border: none;
}

.host { display: block; margin: 0; border: none; background: none; box-shadow: none; }

/* ---- The record --------------------------------------------------------- */
.vinyl-disc {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  /* the disc body: near-black with a slight sheen across it */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 38%,
                    rgba(255, 255, 255, 0) 62%, rgba(255, 255, 255, 0.07) 100%),
    radial-gradient(circle at 50% 50%, #23232b 0%, #141419 72%, #0d0d11 100%);
  box-shadow: 0 2px 4px rgba(20, 16, 10, 0.12),
              0 24px 50px -16px rgba(20, 16, 10, 0.45);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s ease-out;
}

/* ---- Hover: the record plays --------------------------------------------- */

/* spinning grooves are a strong motion cue — hold them still on request */

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 260px; gap: 2.5rem; }
}

/* =====================================================================
   HOSTS — arch portraits, restored to the reference
   Every vinyl and broadcast-card rule is switched off; this is the only
   live layout. Band at radius 131 / stroke 26 with the Latin name on the
   same path, name and role over a scrim at the foot of the arch.
   ===================================================================== */
.vinyl-card, .vinyl-disc, .vinyl-grooves, .vinyl-label, .vinyl-photo,
.vinyl-spindle, .vinyl-info, .vinyl-name, .vinyl-show, .vinyl-role,
.dj-card, .dj-brand, .dj-arc, .dj-media, .dj-info, .dj-bar,
.dj-ghost, .dj-grain, .dj-photo,
.host-frame, .host-outline, .host-tick, .host-row, .hosts-preview,
.host-rule, .host-link, .host-go, .host-vbadge, .host-bigname,
.host-num, .host-media { display: none; }

.hosts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 3.5rem;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  border: none;
}

.host { display: block; margin: 0; border: none; background: none; box-shadow: none; }

/* ---- Band ---------------------------------------------------------------- */
.host-curve {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.host-curve-band {
  fill: none;
  stroke: var(--orange);
  stroke-width: 26;
  stroke-linecap: butt;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  mix-blend-mode: normal;
  opacity: 1;
  transition: stroke 0.5s ease-out;
}

/* first card (rightmost in Arabic) takes the blue */
.host:nth-child(odd) .host-curve-band { stroke: var(--blue); }

.host-curve-text {
  fill: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  dominant-baseline: middle;
  mix-blend-mode: normal;
}

[dir="rtl"] .host-curve-text { direction: ltr; }

@media (max-width: 860px) {
  .hosts-grid { max-width: 420px; gap: 2.5rem; }
}

@media (max-width: 720px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 330px; gap: 2.25rem; }
  .host-curve-text { font-size: 11px; letter-spacing: 0.3em; }
  .host-curve-band { stroke-width: 24; }
}

/* Ticker: above the section header now, all-Arabic, and faster.
   28s → 11s. The content is Arabic throughout, so the Latin tracking
   and uppercase rules no longer apply at all. */
.hosts-ticker {
  margin: 0 0 2.75rem;
  margin-inline-start: 50%;
  padding: 0.8rem 0;
}

.hosts-ticker-track { animation-duration: 11s; }

.hosts-ticker-group span,
[dir="rtl"] .hosts-ticker-group span {
  letter-spacing: normal;
  text-transform: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 0 1.5rem;
}

.hosts-ticker-group i { font-size: 0.8rem; }

@media (max-width: 720px) {
  .hosts-ticker { margin: 0 0 2rem; margin-inline-start: 50%; }
  .hosts-ticker-track { animation-duration: 8s; }
  .hosts-ticker-group span,
  [dir="rtl"] .hosts-ticker-group span { font-size: 0.88rem; padding: 0 1.1rem; }
}

/* =====================================================================
   Ticker — refined
   Readex Pro (a contemporary Arabic-first face) instead of Cairo, a
   deeper orange gradient with a blue edge, and diamond separators in
   blue rather than white bullets.
   ===================================================================== */
.hosts-ticker {
  padding: 0;
  background: linear-gradient(100deg, #f68e23 0%, #f0821a 52%, #e87b14 100%);
  box-shadow: 0 8px 26px -10px rgba(214, 120, 30, 0.5);
}

/* thin blue rule along the lower edge — the only blue on the bar */
.hosts-ticker::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--blue);
  z-index: 2;
}

/* soft fade at both ends so items enter and leave rather than clipping */
.hosts-ticker::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to right,  #f68e23 0%, rgba(246, 142, 35, 0) 7%),
    linear-gradient(to left,   #e87b14 0%, rgba(232, 123, 20, 0) 7%);
}

.hosts-ticker-track { padding: 0.72rem 0; }

.hosts-ticker-group span,
[dir="rtl"] .hosts-ticker-group span {
  font-family: 'Readex Pro', 'Cairo', sans-serif;
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.97);
  padding: 0 1.35rem;
}

/* separator: a small rotated square, blue, instead of a white bullet */
.hosts-ticker-group i {
  display: inline-block;
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 1px;
  rotate: 45deg;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.14);
}

@media (max-width: 720px) {
  .hosts-ticker-track { padding: 0.6rem 0; }
  .hosts-ticker-group span,
  [dir="rtl"] .hosts-ticker-group span { font-size: 0.85rem; padding: 0 1rem; }
  .hosts-ticker-group i { width: 4px; height: 4px; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.14); }
}

/* Type sized up so it fills the bar rather than floating in it —
   the padding comes down to match, keeping the bar the same height. */
.hosts-ticker-track { padding: 0.55rem 0; }

.hosts-ticker-group span,
[dir="rtl"] .hosts-ticker-group span {
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.35;
  padding: 0 1.55rem;
}

.hosts-ticker-group i {
  width: 6px;
  height: 6px;
  box-shadow: 0 0 0 3.5px rgba(255, 255, 255, 0.15);
}

@media (max-width: 720px) {
  .hosts-ticker-track { padding: 0.5rem 0; }
  .hosts-ticker-group span,
  [dir="rtl"] .hosts-ticker-group span { font-size: 1rem; padding: 0 1.1rem; }
  .hosts-ticker-group i { width: 5px; height: 5px; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }
}

/* Faster scroll: 11s -> 6.5s per cycle. */
.hosts-ticker-track { animation-duration: 6.5s; }

@media (max-width: 720px) {
  .hosts-ticker-track { animation-duration: 5s; }
}

/* =====================================================================
   BABYLON FM — TEAM SECTION
   Built to the written spec: circular portraits on tinted discs, white
   name cards, abstract orange/cyan shapes, dotted grids, corner blobs.
   Accent is per person (data-accent), not per grid position, so RTL
   ordering cannot swap the colours.
   ===================================================================== */
:root {
  --bt-cream:  #faf7ef;
  --bt-navy:   #203746;
  --bt-orange: #ff7a00;
  --bt-cyan:   #20bce3;
  --bt-beige:  #f6ece0;
  --bt-blue:   #e3f3fa;
}

/* every earlier team layout, off */
.host-arch, .host-frame, .host-outline, .host-tick, .host-curve,
.host-index, .host-scrim, .host-go, .host-vbadge, .host-bigname,
.host-caption, .host-num, .host-row, .hosts-preview, .host-body,
.host-name, .host-role, .host-media, .host-rule, .host-link,
.host-photo, .host-card, .dj-card, .dj-brand, .dj-arc, .dj-media,
.dj-info, .dj-bar, .dj-ghost, .dj-grain, .dj-photo,
.vinyl-card, .vinyl-disc, .vinyl-grooves, .vinyl-label, .vinyl-photo,
.vinyl-spindle, .vinyl-info, .vinyl-name, .vinyl-show, .vinyl-role {
  display: none;
}

/* ---- Section ----------------------------------------------------------- */
#team.hosts-section {
  position: relative;
  overflow: hidden;
  background: var(--bt-cream);
  padding: 4.5rem 2rem 5rem;
}

/* large soft circles in the corners */
#team.hosts-section::before,
#team.hosts-section::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

#team.hosts-section::before {
  width: 360px; height: 360px;
  top: -150px; inset-inline-start: -130px;
  background: radial-gradient(circle at 40% 40%, rgba(32, 188, 227, 0.12), transparent 68%);
}

#team.hosts-section::after {
  width: 420px; height: 420px;
  bottom: -190px; inset-inline-end: -150px;
  background: radial-gradient(circle at 45% 45%, rgba(255, 122, 0, 0.11), transparent 68%);
}

/* ---- Header ------------------------------------------------------------- */
.bt-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.5rem;
}

.bt-bars { display: flex; gap: 0.45rem; margin-bottom: 1.1rem; }

.bt-bar { display: block; width: 34px; height: 4px; border-radius: 99px; }
.bt-bar--o { background: var(--bt-orange); }
.bt-bar--c { background: var(--bt-cyan); width: 18px; }

/* #team, not .bt-title alone: `.content-section h2` is (0,1,1) and this was
   (0,1,0), so its gradient and transparent text-fill won on specificity no
   matter the source order — and background-clip:text renders Arabic
   invisible with Cairo. The three blog sections qualify their headings with
   an id for exactly this reason. */
#team .bt-title {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--bt-navy);
  text-align: center;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
}

/* text-fill-color inherits, so the span needs its own reset or it stays
   transparent while `color` says orange */
#team .bt-title span { color: var(--bt-orange); -webkit-text-fill-color: currentColor; }

/* two thin lines with the paired dots between them */
.bt-rule {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.15rem;
}

.bt-rule-line {
  display: block;
  width: clamp(48px, 9vw, 96px);
  height: 1px;
  background: rgba(32, 55, 70, 0.18);
}

.bt-dot { display: block; width: 7px; height: 7px; border-radius: 50%; }
.bt-dot--o { background: var(--bt-orange); }
.bt-dot--c { background: var(--bt-cyan); }

/* ---- Grid --------------------------------------------------------------- */
.hosts-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 5rem);
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  border: none;
  align-items: start;
}

.host, .bt-member { display: block; margin: 0; border: none; background: none; box-shadow: none; }

.bt-member { --bt-accent: var(--bt-orange); }
.bt-member[data-accent="cyan"] { --bt-accent: var(--bt-cyan); }

.bt-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
}

/* ---- Portrait ----------------------------------------------------------- */
.bt-portrait {
  position: relative;
  display: block;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
  color: var(--bt-accent);        /* the curves inherit this */
}

/* abstract organic blobs behind the disc */
.bt-blob {
  position: absolute;
  z-index: 0;
  border-radius: 46% 54% 58% 42% / 52% 45% 55% 48%;
  pointer-events: none;
}

.bt-blob--a {
  width: 62%; height: 62%;
  top: -6%; inset-inline-end: -8%;
  background: rgba(255, 122, 0, 0.16);
}

.bt-blob--b {
  width: 54%; height: 54%;
  bottom: -5%; inset-inline-start: -7%;
  background: rgba(32, 188, 227, 0.18);
  border-radius: 58% 42% 45% 55% / 48% 56% 44% 52%;
}

/* thin decorative curves + dotted ring */
.bt-curves {
  position: absolute;
  inset: -5%;
  z-index: 1;
  width: 110%;
  height: 110%;
  pointer-events: none;
}

/* the disc itself */
.bt-disc {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc-bg, var(--bt-beige));
  border: 7px solid #fff;
  box-shadow: 0 10px 28px -12px rgba(32, 55, 70, 0.28);
}

.bt-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  background: var(--bt-accent);
}

/* ---- Name card ----------------------------------------------------------- */
.bt-card {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: -1.6rem;          /* tucks under the disc */
  padding: 0.85rem 1.5rem;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px -12px rgba(32, 55, 70, 0.22);
}

.bt-card-bar {
  display: block;
  width: 4px;
  height: 34px;
  flex: none;
  border-radius: 99px;
  background: var(--bt-accent);
}

.bt-card-text { display: flex; flex-direction: column; }

.bt-name {
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bt-navy);
}

.bt-role {
  margin-top: 0.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--bt-accent);
}

/* ---- Dotted grids -------------------------------------------------------- */
.bt-member::before,
.bt-member::after {
  content: '';
  position: absolute;
  z-index: 0;
  background-image: radial-gradient(currentColor 1.7px, transparent 1.7px);
  background-size: 13px 13px;
  pointer-events: none;
}

.bt-member { position: relative; }

.bt-member::before {
  width: 72px; height: 58px;
  top: 6%; inset-inline-start: -2%;
  color: rgba(255, 122, 0, 0.35);
}

.bt-member::after {
  width: 58px; height: 46px;
  bottom: 20%; inset-inline-end: -1%;
  color: rgba(32, 188, 227, 0.38);
}

/* ---- Hover --------------------------------------------------------------- */
.bt-link:hover .bt-photo { transform: scale(1.05); }
.bt-link:hover .bt-card { box-shadow: 0 14px 32px -12px rgba(32, 55, 70, 0.3); }
.bt-card { transition: box-shadow 0.4s ease-out; }

.bt-link:focus-visible { outline: 3px solid var(--bt-accent); outline-offset: 6px; border-radius: 12px; }

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 820px) {
  .hosts-grid { gap: 3rem; max-width: 560px; }
  .bt-portrait { max-width: 250px; }
}

@media (max-width: 620px) {
  #team.hosts-section { padding: 3.5rem 1.25rem 4rem; }
  .hosts-grid { grid-template-columns: 1fr; gap: 3.25rem; max-width: 320px; }
  .bt-portrait { max-width: 240px; margin: 0 auto; }
  .bt-member::before { width: 54px; height: 44px; inset-inline-start: 0; }
  .bt-member::after { width: 44px; height: 36px; inset-inline-end: 0; }
  .bt-name { font-size: 1.1rem; }
  .bt-head { margin-bottom: 2.5rem; }
}

/* Portraits scaled up ~33% — the discs, decoration and name cards move
   together so the composition keeps its proportions. */
.hosts-grid {
  max-width: 1120px;
  gap: clamp(2.5rem, 7vw, 6rem);
}

.bt-portrait { max-width: 400px; }

.bt-disc { border-width: 9px; }

.bt-card {
  margin-top: -2rem;
  padding: 1rem 1.9rem;
  border-radius: 18px;
  gap: 1rem;
}

.bt-card-bar { width: 5px; height: 42px; }
.bt-name { font-size: 1.5rem; }
.bt-role { font-size: 0.95rem; }

/* decoration keeps pace with the larger discs */
.bt-member::before { width: 88px; height: 70px; background-size: 15px 15px; }
.bt-member::after  { width: 72px; height: 58px; background-size: 15px 15px; }

@media (max-width: 1040px) {
  .hosts-grid { max-width: 780px; gap: 3rem; }
  .bt-portrait { max-width: 320px; }
  .bt-name { font-size: 1.3rem; }
}

@media (max-width: 820px) {
  .hosts-grid { max-width: 640px; gap: 2.5rem; }
  .bt-portrait { max-width: 280px; }
}

@media (max-width: 620px) {
  .hosts-grid { max-width: 340px; }
  .bt-portrait { max-width: 270px; }
  .bt-card { margin-top: -1.6rem; padding: 0.85rem 1.5rem; }
  .bt-card-bar { width: 4px; height: 34px; }
  .bt-name { font-size: 1.2rem; }
  .bt-role { font-size: 0.85rem; }
}

/* =====================================================================
   Portrait lift on hover
   The photo is now a sibling of the disc rather than a child, because a
   child of an overflow:hidden circle can never break out of it.

   Layering:  blobs (0) → curves (1) → disc (2) → figure (3)

   The figure is taller than the disc and carries its own mask: a circle
   matching the disc, unioned with a soft column above it so the head can
   rise past the rim. The column is feathered rather than hard-edged —
   with a photographic backdrop a straight cut would read as a rectangle
   stuck to the top of the circle.
   ===================================================================== */
.bt-portrait { overflow: visible; }

/* the disc is now just the tinted circle and its white ring */
.bt-disc {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc-bg, var(--bt-beige));
  border: 9px solid #fff;
  box-shadow: 0 10px 28px -12px rgba(32, 55, 70, 0.28);
}

.bt-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;      /* per-photo value is set inline */
  transition: none;              /* the wrapper moves, not the image */
}

.bt-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  background: var(--bt-accent);
}

/* the disc stays put — only the person moves */
.bt-disc { transition: box-shadow 0.4s ease; }

.bt-link:hover .bt-disc {
  box-shadow: 0 16px 34px -12px rgba(32, 55, 70, 0.34);
}

/* the earlier image-scale hover is replaced by the wrapper transform */
.bt-link:hover .bt-photo { transform: none; }

@media (max-width: 620px) {
  .bt-disc { border-width: 7px; }
}

.bt-disc {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc-bg, var(--bt-beige));
  border: 9px solid #fff;
  box-shadow: 0 10px 28px -12px rgba(32, 55, 70, 0.28);
  transition: box-shadow 0.4s ease;
}

.bt-photo {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-link:hover .bt-photo { transform: scale(1.05); }
.bt-link:hover .bt-disc { box-shadow: 0 10px 28px -12px rgba(32, 55, 70, 0.28); }

@media (max-width: 620px) {
  .bt-disc { border-width: 7px; }
}

/* =====================================================================
   Head extends above the circle
   ---------------------------------------------------------------------
   The clipper was .bt-disc — overflow:hidden + border-radius:50% with
   the <img> inside it. Anything inside that can never cross the rim, so
   the photo is now a sibling and the disc holds only the tint and ring.

   Layering: blobs 0 → curves 1 → disc 2 → figure 3 → card 4

   The figure has no overflow of its own. It is shaped by a two-part
   mask instead:
     1. a circle matching the disc — frames the body
     2. a soft ellipse over the head — lets it rise past the rim
   The two are unioned, so the silhouette is "circle plus head" rather
   than a rectangle sitting on a circle.
   ===================================================================== */
.bt-portrait { overflow: visible; }

/* ---- Disc: background only ------------------------------------------ */
.bt-disc {
  position: absolute;
  inset: 8%;
  z-index: 2;
  display: block;
  border-radius: 50%;
  overflow: hidden;
  background: var(--disc-bg, var(--bt-beige));
  border: 9px solid #fff;
  box-shadow: 0 10px 28px -12px rgba(32, 55, 70, 0.28);
  transition: box-shadow 0.4s ease;
}

/* the crop is raised so the head sits in the exposed upper area rather
   than the middle of the circle — per-photo value still set inline */
.bt-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: none;
}

.bt-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  background: var(--bt-accent);
}

.bt-link:hover .bt-disc {
  box-shadow: 0 16px 34px -12px rgba(32, 55, 70, 0.34);
}

.bt-link:hover .bt-photo { transform: none; }

/* ---- The card must not collide with the raised figure ---------------- */
.bt-card { position: relative; z-index: 4; }

/* ---- Row spacing: the figure now overhangs the top of its box -------- */
.hosts-grid { align-items: start; padding-top: 2.5rem; }

@media (max-width: 620px) {
  .bt-disc { border-width: 7px; }
  .hosts-grid { padding-top: 1.75rem; }
}

.bt-portrait { overflow: visible; }   /* blobs/curves still sit outside */

/* larger circle, thicker rim */
.bt-disc {
  position: absolute;
  inset: 4%;                 /* was 8% — a bigger disc within the same box */
  z-index: 2;
  display: block;
  border-radius: 50%;
  overflow: hidden;          /* this is what keeps everything inside */
  background: var(--disc-bg, var(--bt-beige));
  border: 12px solid #fff;   /* was 9px */
  box-shadow: 0 10px 30px -12px rgba(32, 55, 70, 0.28);
  transition: box-shadow 0.4s ease;
}

.bt-photo {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.bt-photo--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  background: var(--bt-accent);
}

/* subtle in-circle scale only — nothing can leave the frame */
.bt-link:hover .bt-photo,
.bt-link:focus-visible .bt-photo { transform: scale(1.04); }

.bt-link:hover .bt-disc {
  box-shadow: 0 14px 34px -12px rgba(32, 55, 70, 0.32);
}

/* the overhang headroom is no longer needed */
.hosts-grid { padding-top: 0; }

/* the dotted ring sat just outside the old rim — nudge it out to clear
   the larger disc */
.bt-curves { inset: -8%; width: 116%; height: 116%; }

@media (prefers-reduced-motion: reduce) {
  .bt-link:hover .bt-photo,
  .bt-link:focus-visible .bt-photo { transform: none; }
}

@media (max-width: 620px) {
  .bt-disc { border-width: 9px; inset: 5%; }
  .hosts-grid { padding-top: 0; }
}

/* Portraits up ~12% and the pair pulled closer together. */
.hosts-grid {
  max-width: 1040px;
  gap: clamp(1.5rem, 3vw, 2.75rem);
}

.bt-portrait { max-width: 450px; }

.bt-disc { border-width: 13px; }

.bt-card {
  margin-top: -2.2rem;
  padding: 1.05rem 2rem;
}

.bt-card-bar { height: 46px; }
.bt-name { font-size: 1.6rem; }
.bt-role { font-size: 1rem; }

@media (max-width: 1040px) {
  .hosts-grid { max-width: 820px; gap: 2rem; }
  .bt-portrait { max-width: 360px; }
  .bt-name { font-size: 1.4rem; }
}

@media (max-width: 820px) {
  .hosts-grid { max-width: 660px; gap: 1.75rem; }
  .bt-portrait { max-width: 300px; }
}

@media (max-width: 620px) {
  .hosts-grid { grid-template-columns: 1fr; max-width: 340px; gap: 3rem; }
  .bt-portrait { max-width: 280px; }
  .bt-disc { border-width: 9px; }
  .bt-card { margin-top: -1.7rem; padding: 0.9rem 1.6rem; }
  .bt-card-bar { height: 36px; }
  .bt-name { font-size: 1.2rem; }
  .bt-role { font-size: 0.88rem; }

  /* The earlier 620px block set these, but "decoration keeps pace with the
     larger discs" then re-declared them at every width, so on a phone the
     corner decoration stayed at its desktop 88x70 next to a 280px portrait.
     Restated here, after that rule. */
  .bt-member::before { width: 54px; height: 44px; }
  .bt-member::after  { width: 44px; height: 36px; }
}

/* =====================================================================
   Ticker at page level
   It now sits in <main> as a sibling of the sections, not inside #team.
   #team has overflow:hidden for its corner circles, which was clipping
   the full-bleed bar to the section's box. Out here it needs no 100vw
   hack — main is already full width.
   ===================================================================== */
.hosts-ticker {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0 0 3rem;
  margin-inline-start: 0;
  transform: none;
  overflow: hidden;
}

[dir="rtl"] .hosts-ticker { transform: none; margin-inline-start: 0; }

@media (max-width: 720px) {
  .hosts-ticker { margin: 0 0 2.25rem; margin-inline-start: 0; }
}

/* the section no longer needs to make room for a child ticker */
#team.hosts-section { padding-top: 1rem; }

/* =====================================================================
   Ticker: tilted and thicker
   Rotated bars leave triangular gaps at the ends, so the strip is made
   wider than the page and pulled back — the rotated corners then land
   outside the viewport instead of showing cream wedges.
   Uses the standalone `rotate` property so it cannot collide with any
   transform on the same element.
   ===================================================================== */
.hosts-ticker {
  width: 112%;
  margin-inline-start: -6%;
  rotate: -2.5deg;
  margin-block: 1.5rem 3.5rem;   /* the tilt needs vertical clearance */
}

[dir="rtl"] .hosts-ticker {
  rotate: -2.5deg;
  margin-inline-start: -6%;
}

/* thicker bar */
.hosts-ticker-track { padding: 1.05rem 0; }

.hosts-ticker-group span,
[dir="rtl"] .hosts-ticker-group span { font-size: 1.3rem; }

/* The tilted bar is deliberately wider than the page, so the overhang has
   to be clipped — but `overflow-x: hidden` was the wrong tool. Hidden makes
   the element a scroll container and forces overflow-y to `auto`, so on a
   phone the page stayed pannable sideways and vertical scrolling drifted
   with it. `clip` removes the overflow without creating a scroll container
   at all. It is set on the root as well, because the viewport takes its
   overflow from <html> first. */
html { overflow-x: clip; }
body { overflow-x: clip; }

/* Safari only took `overflow: clip` in 16. Older engines fall back to the
   old behaviour rather than to `visible`, which would put the sideways
   scroll straight back. */
@supports not (overflow: clip) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; }
}

/* `background-attachment: fixed` repaints the whole background on every
   scroll frame, and mobile engines handle it badly — it is the usual cause
   of a page that stutters while it scrolls. The glow pools are a desktop
   refinement, so below that the surface simply scrolls with the page. */
@media (max-width: 1024px) {
  body,
  [data-theme="dark"] body { background-attachment: scroll; }
}

@media (max-width: 720px) {
  .hosts-ticker {
    width: 116%;
    margin-inline-start: -8%;
    rotate: -2deg;
    margin-block: 1rem 2.5rem;
  }
  .hosts-ticker-track { padding: 0.8rem 0; }
  .hosts-ticker-group span,
  [dir="rtl"] .hosts-ticker-group span { font-size: 1.02rem; }
}

/* =====================================================================
   EXPLORE — content category cards
   Two cards on the first row, one wide card below. Each carries its own
   accent via --ex-accent, so the colour drives icon, CTA, decoration
   and tint from a single declaration per card.
   ===================================================================== */
:root {
  --ex-ivory:  #faf7ef;
  --ex-navy:   #203746;
  --ex-orange: #f7931e;
  --ex-cyan:   #22b5d6;
  --ex-gold:   #c79a5b;
  --ex-ink:    #1d3344;
  --ex-card:   #fffdf8;
  --ex-radius: 32px;
  --ex-gap:    1.75rem;
}

.ex-section {
  position: relative;
  overflow: hidden;
  padding: 5rem 2rem 5.5rem;
  background: var(--ex-ivory);
}

/* ---- Decoration ------------------------------------------------------- */
.ex-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.ex-blob { position: absolute; border-radius: 50%; }

.ex-blob--1 {
  width: 380px; height: 380px;
  top: -160px; inset-inline-start: -140px;
  background: radial-gradient(circle at 42% 42%, rgba(247, 147, 30, 0.10), transparent 68%);
}

.ex-blob--2 {
  width: 440px; height: 440px;
  bottom: -200px; inset-inline-end: -160px;
  background: radial-gradient(circle at 45% 45%, rgba(34, 181, 214, 0.10), transparent 68%);
}

.ex-dots {
  position: absolute;
  background-image: radial-gradient(currentColor 1.8px, transparent 1.8px);
  background-size: 15px 15px;
}

.ex-dots--1 { width: 86px; height: 66px; top: 16%; inset-inline-end: 3%; color: rgba(247, 147, 30, 0.32); }
.ex-dots--2 { width: 70px; height: 56px; bottom: 12%; inset-inline-start: 3%; color: rgba(34, 181, 214, 0.34); }

.ex-curve { position: absolute; width: 190px; height: 114px; opacity: 0.55; }
.ex-curve--1 { top: 8%;  inset-inline-start: 6%; }
.ex-curve--2 { bottom: 6%; inset-inline-end: 8%; }

/* ---- Header ------------------------------------------------------------ */
.ex-head {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 3.25rem;
}

.ex-bars { display: flex; gap: 0.45rem; margin-bottom: 1.1rem; }
.ex-bar { display: block; height: 4px; border-radius: 99px; }
.ex-bar--o { width: 34px; background: var(--ex-orange); }
.ex-bar--c { width: 18px; background: var(--ex-cyan); }

.ex-title {
  margin: 0;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ex-navy);
  background: none;
  -webkit-text-fill-color: currentColor;
}

.ex-sub {
  margin: 0.9rem 0 0;
  max-width: 660px;
  font-size: 1.02rem;
  line-height: 1.85;
  color: rgba(32, 55, 70, 0.66);
}

/* ---- Grid --------------------------------------------------------------- */
.ex-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ex-gap);
  max-width: 1100px;
  margin: 0 auto;
}

.ex-card--wide { grid-column: 1 / -1; }

/* ---- Card --------------------------------------------------------------- */
.ex-card {
  --ex-accent: var(--ex-orange);
  --ex-tint:   rgba(247, 147, 30, 0.10);

  position: relative;
  display: flex;
  align-items: stretch;
  gap: 1.25rem;
  min-height: 250px;
  padding: 2rem;
  overflow: hidden;
  border-radius: var(--ex-radius);
  border: 1px solid rgba(32, 55, 70, 0.07);
  background:
    linear-gradient(135deg, var(--ex-tint) 0%, rgba(255, 255, 255, 0) 58%),
    #fff;
  box-shadow: 0 1px 2px rgba(32, 55, 70, 0.03),
              0 16px 38px -16px rgba(32, 55, 70, 0.2);
  text-decoration: none;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease-out, border-color 0.45s ease-out;
}

.ex-card--interview { --ex-accent: var(--ex-cyan);  --ex-tint: rgba(34, 181, 214, 0.10); }
.ex-card--article   { --ex-accent: var(--ex-gold);  --ex-tint: rgba(199, 154, 91, 0.13); }

/* ---- Copy ---------------------------------------------------------------- */
.ex-body {
  position: relative;
  z-index: 2;
  flex: 1 1 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: start;
}

.ex-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  color: #fff;
  background: var(--ex-accent);
  box-shadow: 0 8px 20px -8px var(--ex-accent);
}

.ex-icon svg { width: 24px; height: 24px; }

.ex-name {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.3;
  color: var(--ex-navy);
}

.ex-desc {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(32, 55, 70, 0.62);
}

.ex-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.35rem;
  padding: 0.6rem 1.25rem;
  border-radius: 999px;
  font-size: 0.87rem;
  font-weight: 700;
  color: #fff;
  background: var(--ex-accent);
  transition: gap 0.4s ease-out, filter 0.4s ease-out;
}

.ex-cta i { font-style: normal; transition: transform 0.4s ease-out; }
[dir="rtl"] .ex-cta i { transform: scaleX(-1); }

/* ---- Media ---------------------------------------------------------------
   Organic asymmetric frame rather than a plain rectangle, with a tinted
   halo sitting behind it. */
.ex-media {
  position: relative;
  z-index: 1;
  flex: 1 1 48%;
  display: block;
  min-height: 190px;
  border-radius: 58% 42% 46% 54% / 46% 52% 48% 54%;
  overflow: hidden;
  background: var(--ex-tint);
}

.ex-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(200deg, rgba(255, 255, 255, 0.16), transparent 52%);
}

.ex-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the wide card gives the image more room and a calmer shape */
.ex-card--wide { min-height: 280px; }
.ex-card--wide .ex-body  { flex: 1 1 46%; }
.ex-card--wide .ex-media {
  flex: 1 1 54%;
  border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%;
}

/* ---- Hover ---------------------------------------------------------------- */
.ex-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--ex-accent) 34%, transparent);
  box-shadow: 0 2px 4px rgba(32, 55, 70, 0.04),
              0 26px 52px -18px rgba(32, 55, 70, 0.26);
}

.ex-card:hover .ex-media img { transform: scale(1.04); }
.ex-card:hover .ex-cta { gap: 0.7rem; filter: brightness(1.06); }

.ex-card:focus-visible { outline: 3px solid var(--ex-accent); outline-offset: 4px; }

/* The reduced-motion block for these cards now lives at the end of the
   illustrated-card section below. It sat here, ahead of that redesign's
   hover rules, so it lost the cascade and did nothing. */

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 960px) {
  .ex-card { min-height: 220px; padding: 1.6rem; gap: 1rem; }
  .ex-name { font-size: 1.28rem; }
  .ex-media { min-height: 160px; }
}

@media (max-width: 760px) {
  .ex-section { padding: 3.5rem 1.25rem 4rem; }
  .ex-grid { grid-template-columns: 1fr; max-width: 420px; gap: 1.5rem; }
  .ex-card--wide { grid-column: auto; }

  /* stack image over copy so neither is squeezed at phone width */
  .ex-card,
  .ex-card--wide { flex-direction: column-reverse; min-height: 0; }

  .ex-media,
  .ex-card--wide .ex-media {
    flex: none;
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 0;
    border-radius: 24px;
  }

  .ex-body { align-items: flex-start; padding-top: 1.25rem; }
  .ex-curve, .ex-dots { display: none; }
}

/* =====================================================================
   EXPLORE — matched to the reference
   Tinted card surfaces (not white), text-link CTAs (not filled pills),
   and decorative arcs sweeping around each image blob.
   ===================================================================== */
:root {
  --ex-orange:     #f7931e;
  --ex-cyan:       #3bb8e0;
  --ex-gold:       #c9a57a;
  --ex-navy:       #1d3344;

  --ex-fill-pod:   #fdf2e4;   /* warm cream   */
  --ex-fill-int:   #e9f5fb;   /* light blue   */
  --ex-fill-art:   #f5ede1;   /* soft beige   */
}

/* ---- Card: solid tint, no border, softer shadow ---------------------- */
.ex-card {
  --ex-accent: var(--ex-orange);
  --ex-fill:   var(--ex-fill-pod);

  align-items: center;
  gap: 1rem;
  min-height: 0;
  padding: 2.1rem 2.2rem;
  border: none;
  border-radius: 28px;
  background: var(--ex-fill);
  box-shadow: 0 1px 2px rgba(29, 51, 68, 0.02),
              0 14px 30px -18px rgba(29, 51, 68, 0.18);
}

.ex-card--interview { --ex-accent: var(--ex-cyan); --ex-fill: var(--ex-fill-int); }
.ex-card--article   { --ex-accent: var(--ex-gold); --ex-fill: var(--ex-fill-art); }

/* ---- Icon: filled circle -------------------------------------------- */
.ex-icon {
  width: 60px;
  height: 60px;
  margin-bottom: 1.15rem;
  border-radius: 50%;
  background: var(--ex-accent);
  box-shadow: none;
}

.ex-icon svg { width: 27px; height: 27px; }

/* ---- Copy ------------------------------------------------------------ */
.ex-body { flex: 1 1 46%; }

.ex-name {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--ex-navy);
}

.ex-desc {
  margin-top: 0.55rem;
  font-size: 0.97rem;
  line-height: 1.85;
  color: rgba(29, 51, 68, 0.6);
  max-width: 24ch;
}

/* ---- CTA: underlined text link, not a pill --------------------------- */
.ex-cta {
  margin-top: 1.5rem;
  padding: 0 0 0.55rem;
  border-radius: 0;
  background: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ex-accent);
  border-bottom: 2px solid color-mix(in srgb, var(--ex-accent) 45%, transparent);
  transition: gap 0.4s ease-out, border-color 0.4s ease-out;
}

.ex-cta i { font-size: 1.05em; }

/* ---- Media: blob with arcs sweeping around it ------------------------ */
.ex-media {
  position: relative;
  flex: 1 1 54%;
  min-height: 210px;
  border-radius: 0;
  overflow: visible;
  background: none;
  display: grid;
  place-items: center;
}

.ex-media::after { display: none; }

/* the arcs sit behind the photo and take the card's accent */
.ex-swoosh {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  z-index: 0;
  color: var(--ex-accent);
  pointer-events: none;
}

.ex-swoosh-c { color: color-mix(in srgb, var(--ex-accent) 55%, #fff); }

.ex-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 88%;
  height: 88%;
  min-height: 176px;
  /* the organic blob is the backdrop now, not a photo mask, so the
     illustration is free to overflow it slightly */
  border-radius: 56% 44% 48% 52% / 48% 54% 46% 52%;
  background: color-mix(in srgb, var(--ex-accent) 9%, var(--ex-card));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex-accent) 12%, transparent),
              0 14px 30px -18px rgba(29, 51, 68, 0.26);
}

.ex-ill {
  display: block;
  width: 96%;
  height: auto;
  overflow: visible;
}

/* palette, driven by each card's --ex-accent */
.ex-f-tint  { fill: color-mix(in srgb, var(--ex-accent) 13%, transparent); }
.ex-f-soft  { fill: color-mix(in srgb, var(--ex-accent) 28%, transparent); }
.ex-f-acc   { fill: var(--ex-accent); }
.ex-f-ink   { fill: var(--ex-ink); }
.ex-f-card  { fill: var(--ex-card); }
.ex-s-acc   { stroke: var(--ex-accent); }
.ex-s-ink   { stroke: var(--ex-ink); }
.ex-s-card  { stroke: var(--ex-card); }
.ex-s-muted { stroke: color-mix(in srgb, var(--ex-ink) 24%, transparent); }

/* the articles card leans warmer than its gold accent alone */
.ex-card--article .ex-f-ink,
.ex-card--article .ex-s-ink { fill: #6b5137; stroke: #6b5137; }
.ex-card--article .ex-s-muted { stroke: rgba(107, 81, 55, 0.3); }

/* each layer drifts by a different amount on hover */
.ex-ill-bg,
.ex-ill-main,
.ex-ill-wave,
.ex-ill-pen {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Wide card: icon beside the copy --------------------------------- */
.ex-card--wide { padding: 2rem 2.2rem; }
.ex-card--wide .ex-body {
  flex: 1 1 48%;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 1.35rem;
  row-gap: 0;
}

.ex-card--wide .ex-icon { grid-row: span 2; margin-bottom: 0; align-self: start; }
.ex-card--wide .ex-name { grid-column: 2; }
.ex-card--wide .ex-desc { grid-column: 2; max-width: 30ch; }
.ex-card--wide .ex-cta  { grid-column: 2; justify-self: start; }

.ex-card--wide .ex-media { flex: 1 1 52%; min-height: 230px; }
.ex-card--wide .ex-art {
  width: 92%;
  border-radius: 48% 52% 46% 54% / 52% 46% 54% 48%;
}

/* ---- Hover ----------------------------------------------------------- */
.ex-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 2px 4px rgba(29, 51, 68, 0.03),
              0 22px 44px -20px rgba(29, 51, 68, 0.26);
}

.ex-card:hover .ex-ill-main { transform: scale(1.045) translateY(-3px); }
.ex-card:hover .ex-ill-bg   { transform: scale(1.07); }
.ex-card:hover .ex-ill-wave { transform: translateY(-5px); }
.ex-card:hover .ex-ill-pen  { transform: rotate(-5deg) translateY(-3px); }
.ex-card:hover .ex-cta { border-color: var(--ex-accent); filter: none; }
.ex-card:hover .ex-cta i { transform: translateX(-5px); }

/* the arrow glyph points along the text, so it travels the other way in LTR */
html:not([dir="rtl"]) .ex-card:hover .ex-cta i { transform: translateX(5px); }

/* ---- Responsive ------------------------------------------------------- */
@media (max-width: 960px) {
  .ex-card { padding: 1.7rem 1.6rem; }
  .ex-name { font-size: 1.32rem; }
  .ex-media, .ex-card--wide .ex-media { min-height: 180px; }
  .ex-art { min-height: 150px; }
}

@media (max-width: 760px) {
  .ex-card,
  .ex-card--wide { flex-direction: column-reverse; padding: 1.5rem 1.4rem 1.8rem; }

  .ex-card--wide .ex-body {
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
  }

  .ex-media,
  .ex-card--wide .ex-media {
    flex: none;
    width: 100%;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }

  .ex-art,
  .ex-card--wide .ex-art { width: 90%; height: 90%; min-height: 0; }

  .ex-desc { max-width: none; }
}

/* ---- Reduced motion ---------------------------------------------------
   Placed after the hover rules above, not before them: an earlier copy of
   this block sat ahead of the illustrated redesign and lost the cascade, so
   visitors who ask for less motion still got every hover animation.
   The arrow rule is repeated with its html:not([dir="rtl"]) prefix because
   that selector is more specific than the plain one and would otherwise
   keep winning. */
@media (prefers-reduced-motion: reduce) {
  .ex-card,
  .ex-card .ex-ill-main,
  .ex-card .ex-ill-bg,
  .ex-card .ex-ill-wave,
  .ex-card .ex-ill-pen,
  .ex-card .ex-cta,
  .ex-card .ex-cta i { transition: none; }

  .ex-card:hover { transform: none; }

  .ex-card:hover .ex-ill-main,
  .ex-card:hover .ex-ill-bg,
  .ex-card:hover .ex-ill-wave,
  .ex-card:hover .ex-ill-pen,
  .ex-card:hover .ex-cta i,
  html:not([dir="rtl"]) .ex-card:hover .ex-cta i { transform: none; }

  .ex-card:hover .ex-media img { transform: none; }
}

/* =====================================================================
   Nav search
   Icon in the pill that expands into an input. Replaces the standalone
   search section; the input keeps id="searchInput" so app.js filtering
   is untouched.
   ===================================================================== */
.search-section, .search-container, .search-title, .search-subtitle { display: none; }

.nav-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-inline-start: 0.2rem;
}

.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: none;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #4a453f;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease;
}

.nav-search-btn svg { width: 17px; height: 17px; }
.nav-search-btn:hover { color: var(--card-ink); background: rgba(20, 16, 40, 0.06); }

[data-theme="dark"] .nav-search-btn { color: #d9d5cd; }
[data-theme="dark"] .nav-search-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* width animates from 0 so the pill grows rather than jumping */
.nav-search-input {
  width: 0;
  padding: 0;
  border: none;
  outline: none;
  opacity: 0;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--card-ink);
  background: transparent;
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease, padding 0.4s ease;
}

.nav-search.is-open .nav-search-input {
  width: clamp(150px, 18vw, 230px);
  padding: 0.35rem 0.75rem;
  opacity: 1;
}

.nav-search.is-open .nav-search-btn { color: var(--blue); }

[data-theme="dark"] .nav-search-input { color: #fff; }
.nav-search-input::placeholder { color: rgba(74, 69, 63, 0.5); }
[data-theme="dark"] .nav-search-input::placeholder { color: rgba(255, 255, 255, 0.4); }

/* the native clear affordance clashes with the pill */
.nav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* below the pill breakpoint the input sits in the slide-out menu */
@media (max-width: 1024px) {
  .nav-search { width: 100%; justify-content: center; margin: 0.5rem 0 0; }
  .nav-search-input,
  .nav-search.is-open .nav-search-input {
    width: 100%;
    max-width: 320px;
    padding: 0.7rem 1rem;
    opacity: 1;
    border: 1px solid var(--card-edge);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.7);
  }
  .nav-search-btn { display: none; }
}

/* =====================================================================
   Podcasts header — kicker, heading, "all episodes" link, filter pills
   ===================================================================== */

/* the reference header is type only, no badge */
#podcasts .blog-icon { display: none; }

#podcasts .blog-header {
  display: flex;
  /* the base .blog-header is a centred column — this header is a row,
     and without resetting the direction space-between stretched it
     vertically instead of horizontally */
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  text-align: start;       /* right in Arabic, left in English */
  max-width: 1200px;       /* line up with the card grid, not 900px */
  margin: 0 auto 1.5rem;
  padding-bottom: 0;
}

#podcasts .blog-title-container {
  /* a flex column aligns on the horizontal axis, so stretch and let
     text-align place the copy — flex-start would resolve to the right
     edge under [dir="rtl"] */
  align-items: stretch;
  text-align: start;
  flex: 1 1 420px;
  min-width: 0;
}

.pod-kicker,
.art-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--orange, #f68e23);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* letter-spacing breaks Arabic letter joining, and Arabic has no case */
[dir="rtl"] .pod-kicker,
[dir="rtl"] .art-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}

#podcasts .blog-title-container h2 {
  /* .content-section h2 declares text-align:center, which beats the
     alignment inherited from the container */
  text-align: inherit;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  color: var(--pod-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#podcasts .blog-subtitle {
  max-width: 58ch;
  margin-inline: 0 auto;   /* hold it against the start edge */
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--pod-ink-soft);
}

/* ---- the outlined "all episodes" pill ---- */
.pod-all {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.35rem;
  border: 1px solid #203746;
  border-radius: 999px;
  background: #203746;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pod-all:hover {
  background: transparent;
  color: #203746;
}

/* the select still drives the filtering — the pills just stand in for it */
#podcastCategoryFilter {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the filter pills ---- */
.pod-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  max-width: 1200px;        /* line up with the card grid */
  margin: 0 auto 2rem;
}

.pod-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
}

.pod-pill {
  padding: 0.6rem 1.35rem;
  border: 1px solid rgba(32, 55, 70, 0.18);
  border-radius: 999px;
  background: #fff;
  color: #203746;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.pod-pill:hover {
  border-color: var(--orange, #f68e23);
  color: var(--orange, #f68e23);
}

.pod-pill.is-active {
  background: var(--orange, #f68e23);
  border-color: var(--orange, #f68e23);
  color: #fff;
  box-shadow: 0 6px 16px rgba(246, 142, 35, 0.28);
}

@media (max-width: 720px) {
  #podcasts .blog-header { gap: 1rem; }
}

/* =====================================================================
   Articles — centred header, search + pills, a featured lead and a
   three-up grid of cards with corner swooshes.
   Scoped to .art-* / #posts so podcasts and interviews are untouched.
   ===================================================================== */
:root {
  --art-ink: #203746;
  --art-ink-soft: rgba(32, 55, 70, 0.6);
  --art-line: rgba(74, 59, 43, 0.14);
  --art-surface: #fffdf8;
  --art-cyan: #20bce3;
  --art-orange: #f68e23;
  --art-sand: #f9d3a6;
}

/* ---- header ---- */
#posts .blog-icon { display: none; }

#posts .blog-header {
  flex-direction: column;
  /* a flex column aligns on the horizontal axis; stretch lets the
     children fill the width so text-align does the placing */
  align-items: stretch;
  text-align: start;
  max-width: 1200px;
  margin: 0 auto 1.6rem;
  padding-bottom: 0;
}

#posts .blog-title-container {
  align-items: stretch;
  text-align: start;
}

/* .content-section h2 declares text-align and a transparent text fill —
   the gradient renders Arabic invisible with Cairo */
#posts .blog-title-container h2 {
  /* .content-section h2 declares text-align:center, and a declared
     value beats the one inherited from the container */
  text-align: inherit;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.25;
  margin: 0 0 0.6rem;
  color: var(--art-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#posts .blog-subtitle {
  max-width: 58ch;
  margin-inline: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--art-ink-soft);
}

/* ---- toolbar: search + pills ---- */
.art-toolbar {
  display: flex;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto 1.8rem;
}

.art-search {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  flex: 0 1 260px;
  padding: 0.62rem 1.1rem;
  border: 1px solid var(--art-line);
  border-radius: 999px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.art-search:focus-within {
  border-color: var(--art-orange);
  box-shadow: 0 0 0 3px rgba(246, 142, 35, 0.14);
}

.art-search svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: var(--art-ink-soft);
}

.art-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--art-ink);
}

/* the select still drives the filtering — the pills stand in for it */
#postCategoryFilter {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- shared card bits ---- */
.art-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--art-ink-soft);
}

.art-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.art-meta-item svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.75;
}

.art-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  margin-top: 1.1rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--art-orange);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: gap 0.2s ease, color 0.2s ease;
}

.art-more i {
  font-style: normal;
  font-size: 1.05em;
  line-height: 1;
}

.art-more:hover {
  gap: 0.7rem;
  color: var(--art-ink);
}

/* the arrow points the way the text runs */
html:not([dir="rtl"]) .art-more i { transform: scaleX(-1); }

.art-body.is-open {
  -webkit-line-clamp: unset;
  display: block;
  max-height: 22rem;
  overflow-y: auto;
}

/* ---- featured lead ---- */
.art-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1.5rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto 2.5rem;
  padding: 2rem 2.2rem;
  border: 1px solid var(--art-line);
  border-radius: 20px;
  background: var(--art-surface);
  overflow: hidden;
}

.art-featured-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.art-badge {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--art-orange);
  color: #fff;
  font-size: 0.76rem;
  font-weight: 700;
}

.art-featured-title {
  font-size: clamp(1.35rem, 2.3vw, 1.8rem);
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 0.75rem;
  color: var(--art-ink);
}

.art-featured-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  margin: 0 0 1.35rem;
  color: var(--art-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- the illustration beside it ---- */
.art-featured-art {
  position: relative;
  min-height: 210px;
  color: var(--art-ink);
}

.art-blob {
  position: absolute;
  border-radius: 50%;
}

.art-blob--sand {
  inset-inline-end: 6%;
  top: 4%;
  width: 78%;
  height: 88%;
  background: rgba(249, 211, 166, 0.34);
}

.art-blob--orange {
  inset-inline-end: 42%;
  bottom: 6%;
  width: 92px;
  height: 58px;
  border-radius: 60px 60px 8px 60px;
  background: var(--art-orange);
  opacity: 0.85;
}

.art-blob--cyan {
  inset-inline-end: 12%;
  bottom: 2%;
  width: 74px;
  height: 46px;
  border-radius: 50px 8px 50px 50px;
  background: var(--art-cyan);
  opacity: 0.85;
}

.art-paper {
  position: absolute;
  inset-inline-end: 22%;
  top: 16%;
  width: 46%;
  max-width: 190px;
  height: auto;
}

.art-dots {
  position: absolute;
  background-image: radial-gradient(currentColor 1.6px, transparent 1.6px);
  background-size: 11px 11px;
  color: var(--art-cyan);
  opacity: 0.55;
}

.art-dots--a {
  inset-inline-start: 2%;
  top: 22%;
  width: 62px;
  height: 62px;
}

.art-dots--b {
  inset-inline-end: 1%;
  bottom: 12%;
  width: 52px;
  height: 52px;
  color: var(--art-orange);
}

/* ---- "latest articles" rule ---- */
.art-latest {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  max-width: 1200px;
  margin: 0 auto 1.3rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--art-ink);
}

.art-rule {
  display: block;
  width: 42px;
  height: 3px;
  border-radius: 999px;
  background: var(--art-orange);
}

/* ---- the grid ---- */
#postsGrid.art-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

.art-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.4rem;
  border: 1px solid var(--art-line);
  border-radius: 18px;
  background: var(--art-surface);
  overflow: hidden;
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.art-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(32, 55, 70, 0.11);
}

/* the swooshes in opposite corners */
.art-corner {
  position: absolute;
  width: 78px;
  height: 78px;
  background: var(--art-cyan);
  opacity: 0.85;
  pointer-events: none;
}

.art-corner--start {
  inset-inline-start: 0;
  top: 0;
  border-end-end-radius: 78px;
}

.art-corner--end {
  inset-inline-end: 0;
  bottom: 0;
  border-start-start-radius: 78px;
}

.art-card--sand .art-corner { background: var(--art-sand); }
.art-card--orange .art-corner { background: var(--art-orange); opacity: 0.7; }

.art-dots--card {
  inset-inline-start: 0.9rem;
  top: 48%;
  width: 34px;
  height: 34px;
  opacity: 0.4;
}

.art-chip {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  margin-bottom: 1rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  background: var(--art-cyan);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
}

.art-card--sand .art-chip,
.art-card--orange .art-chip { background: var(--art-orange); }

.art-card-title,
.art-card-desc,
.art-card .art-meta,
.art-card .art-more {
  position: relative;
  z-index: 1;
}

.art-card-title {
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 0.6rem;
  color: var(--art-ink);
}

.art-card-desc {
  font-size: 0.855rem;
  line-height: 1.7;
  margin: 0 0 1.2rem;
  color: var(--art-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.art-card .art-meta {
  gap: 1rem;
  font-size: 0.75rem;
}

/* ---- responsive ---- */
@media (max-width: 1000px) {
  #postsGrid.art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-featured { grid-template-columns: 1fr; }
  .art-featured-art { min-height: 170px; }
}

@media (max-width: 680px) {
  #postsGrid.art-grid { grid-template-columns: 1fr; }
  .art-featured { padding: 1.5rem 1.35rem; }
  .art-search { flex: 1 1 100%; }
  .art-meta { gap: 0.9rem; }
}

/* =====================================================================
   Podcasts — public card grid
   Driven entirely by the records the admin dashboard writes: the grid
   takes however many episodes the API returns (3, 6, 20+) and reflows
   at 3 / 2 / 1 columns. Nothing here is specific to a fixed count, and
   none of the admin dashboard's styling is shared.
   ===================================================================== */
:root {
  --pod-ink: #203746;
  --pod-ink-soft: rgba(32, 55, 70, 0.62);
  --pod-line: rgba(74, 59, 43, 0.12);
  --pod-surface: #fffdf8;
  --pod-orange: #f68e23;
  --pod-cyan: #20bce3;
}

#podcastsGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.75rem;
  align-items: stretch;
  max-width: 1200px;
  margin: 0 auto;
}

/* ---- card ---- */
.pod-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--pod-line);
  border-radius: 18px;
  background: var(--pod-surface);
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(32, 55, 70, 0.05);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the shared .content-card glass rules do not apply here — these cards
   are their own element, not a variant of the old ones */
.pod-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(32, 55, 70, 0.14);
}

/* ---- cover ---- */
.pod-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--pod-cyan), var(--pod-orange));
}

.pod-cover-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.pod-card:hover .pod-cover-img { transform: scale(1.05); }

/* sits behind the image, so a missing or broken cover reveals it
   instead of a broken-image icon */
.pod-cover-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.pod-cover-fallback svg {
  width: 38%;
  max-width: 76px;
  height: auto;
}

.pod-chip {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.85rem;
  top: 0.85rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  background: var(--pod-cyan);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(32, 188, 227, 0.35);
}

.pod-duration {
  position: absolute;
  z-index: 2;
  inset-inline-end: 0.85rem;
  bottom: 0.85rem;
  padding: 0.24rem 0.65rem;
  border-radius: 999px;
  background: rgba(32, 55, 70, 0.82);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pod-play {
  position: absolute;
  z-index: 2;
  inset-inline-start: 0.85rem;
  bottom: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pod-orange);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(246, 142, 35, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}

.pod-play svg { width: 18px; height: 18px; }

/* the triangle points the way the language runs */
[dir="rtl"] .pod-play svg { transform: scaleX(-1); }

.pod-play:hover {
  background: var(--pod-ink);
  transform: scale(1.08);
}

/* ---- body ---- */
.pod-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.15rem 1.25rem 1.1rem;
  text-align: start;
}

.pod-card .pod-title {
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.45;
  margin: 0 0 0.45rem;
  color: var(--pod-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pod-card .pod-desc {
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0 0 1rem;
  color: var(--pod-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pod-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--pod-line);
}

.pod-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--pod-ink-soft);
}

.pod-meta svg {
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.8;
}

.pod-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pod-orange);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: gap 0.2s ease, color 0.2s ease;
}

.pod-cta i {
  font-style: normal;
  line-height: 1;
}

html:not([dir="rtl"]) .pod-cta i { transform: scaleX(-1); }

.pod-cta:hover {
  gap: 0.6rem;
  color: var(--pod-ink);
}

/* ---- empty state ---- */
.pod-empty {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--pod-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  color: var(--pod-ink-soft);
}

.pod-empty strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pod-ink);
}

.pod-empty span { font-size: 0.9rem; }

/* ---- responsive: 3 / 2 / 1 ---- */
@media (max-width: 1024px) {
  #podcastsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 640px) {
  #podcastsGrid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* =====================================================================
   Interviews — alternating editorial rows
   Deliberately unlike the podcast grid and the article layout: a large
   still on one side, the copy on the other, mirroring row by row.
   Takes however many interviews the API returns.
   ===================================================================== */
:root {
  --itv-ink: #203746;
  --itv-ink-soft: rgba(32, 55, 70, 0.62);
  --itv-line: rgba(74, 59, 43, 0.12);
  --itv-orange: #f68e23;
  --itv-cyan: #20bce3;
}

/* ---- header: same rhythm as the podcasts and articles headers ---- */
#interviews .blog-icon { display: none; }

#interviews .blog-header {
  flex-direction: column;
  align-items: stretch;
  text-align: start;
  max-width: 1200px;
  margin: 0 auto 2.75rem;
  padding-bottom: 0;
}

#interviews .blog-title-container {
  align-items: stretch;
  text-align: start;
}

/* .content-section h2 declares text-align:center and a transparent text
   fill — the gradient renders Arabic invisible with Cairo */
#interviews .blog-title-container h2 {
  text-align: inherit;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.6rem;
  color: var(--itv-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}

#interviews .blog-subtitle {
  max-width: 58ch;
  margin-inline: 0 auto;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--itv-ink-soft);
}

.itv-kicker {
  display: block;
  margin-bottom: 0.55rem;
  color: var(--itv-cyan);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* letter-spacing breaks Arabic letter joining, and Arabic has no case */
[dir="rtl"] .itv-kicker {
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}

/* the select still drives the filtering; it is not part of this design */
#interviewCategoryFilter {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- the list ---- */
.itv-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.itv-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 3rem;
  align-items: center;
}

/* even rows put the still on the other side */
.itv-row--flip .itv-media { order: 2; }
.itv-row--flip .itv-text { order: 1; }

/* ---- the still ---- */
.itv-media {
  position: relative;
  padding: 1.25rem;
}

/* an offset colour block sitting behind the frame */
.itv-accent {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 72%;
  height: 78%;
  border-radius: 22px;
  background: var(--itv-cyan);
  opacity: 0.18;
}

.itv-row--flip .itv-accent {
  inset-inline-start: auto;
  inset-inline-end: 0;
  background: var(--itv-orange);
  opacity: 0.2;
}

.itv-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--itv-cyan), var(--itv-orange));
  box-shadow: 0 18px 40px rgba(32, 55, 70, 0.16);
}

.itv-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.itv-row:hover .itv-img { transform: scale(1.04); }

/* sits behind the image, so a broken still shows this instead of a
   broken-image icon */
.itv-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.85);
}

.itv-fallback svg {
  width: 30%;
  max-width: 88px;
  height: auto;
}

.itv-play {
  position: absolute;
  z-index: 2;
  inset-inline-start: 50%;
  top: 50%;
  transform: translate(50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--itv-orange);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(32, 55, 70, 0.28);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

/* translate() is physical, so the RTL offset differs */
html:not([dir="rtl"]) .itv-play { transform: translate(-50%, -50%); }

.itv-play svg { width: 24px; height: 24px; }

[dir="rtl"] .itv-play svg { transform: scaleX(-1); }

.itv-play:hover {
  background: var(--itv-orange);
  color: #fff;
  transform: translate(50%, -50%) scale(1.08);
}

html:not([dir="rtl"]) .itv-play:hover { transform: translate(-50%, -50%) scale(1.08); }

/* the oversized index sitting off the corner of the frame */
/* ---- the copy ---- */
.itv-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: start;
}

.itv-chip {
  margin-bottom: 0.9rem;
  padding: 0.34rem 0.9rem;
  border-radius: 999px;
  background: rgba(32, 188, 227, 0.14);
  color: #1699b8;
  font-size: 0.76rem;
  font-weight: 700;
}

.itv-row--flip .itv-chip {
  background: rgba(246, 142, 35, 0.16);
  color: #c96f14;
}

.itv-title {
  font-size: clamp(1.3rem, 2.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 0.75rem;
  color: var(--itv-ink);
}

.itv-desc {
  font-size: 0.95rem;
  line-height: 1.85;
  margin: 0 0 1.35rem;
  color: var(--itv-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.itv-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  color: var(--itv-ink-soft);
}

.itv-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.itv-meta-item svg {
  width: 15px;
  height: 15px;
  flex: none;
  opacity: 0.8;
}

.itv-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.65rem;
  border: 0;
  border-radius: 999px;
  background: var(--itv-orange);
  color: #fff;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(246, 142, 35, 0.3);
  transition: gap 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.itv-row--flip .itv-cta {
  background: var(--itv-cyan);
  box-shadow: 0 8px 20px rgba(32, 188, 227, 0.32);
}

.itv-cta i {
  font-style: normal;
  line-height: 1;
}

html:not([dir="rtl"]) .itv-cta i { transform: scaleX(-1); }

.itv-cta:hover {
  gap: 0.75rem;
  background: var(--itv-ink);
  box-shadow: 0 10px 24px rgba(32, 55, 70, 0.3);
}

/* ---- empty state ---- */
.itv-empty {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 3rem 1.5rem;
  border: 1px dashed var(--itv-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.5);
  text-align: center;
  color: var(--itv-ink-soft);
}

.itv-empty strong {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--itv-ink);
}

.itv-empty span { font-size: 0.9rem; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .itv-list { gap: 3rem; }

  .itv-row,
  .itv-row--flip {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .itv-row--flip .itv-media,
  .itv-row--flip .itv-text { order: 0; }
  .itv-media { padding: 1rem; }
  .itv-play { width: 52px; height: 52px; }
  .itv-play svg { width: 20px; height: 20px; }
}

@media (max-width: 600px) {
  .itv-meta { gap: 1rem; }
  .itv-cta { width: 100%; justify-content: center; }
}

/* =====================================================================
   Member profile — the role line under the name
   Its own class on purpose: .host-role is swept into a legacy
   `display: none` group and redefined 44 times across this file.
   ===================================================================== */
.member-role {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding: 0.65rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  /* two backgrounds: a flat fill clipped to the padding box, and the
     gradient clipped to the border box — a gradient outline */
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(120deg, var(--blue, #20bce3), var(--orange, #f68e23)) border-box;
  box-shadow: 0 10px 26px rgba(32, 55, 70, 0.09);
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.25;
  color: #203746;
}

/* the dot picks up the same gradient as the outline */
.member-role span {
  display: block;
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: linear-gradient(120deg, var(--blue, #20bce3), var(--orange, #f68e23));
}

@media (max-width: 720px) {
  .member-role {
    margin-top: 0.95rem;
    padding: 0.55rem 1.25rem;
    font-size: 1.08rem;
  }

  .member-role span {
    width: 8px;
    height: 8px;
  }
}

/* =============================================================================
   Dark mode for everything built after the original design

   The podcast, interview, article, team and explore sections were all written
   light-only: white cards, dark ink, pale hairlines. On the dark page they
   stayed white.

   Almost all of it is fixed by redefining the per-section tokens those
   components already use, rather than restating every rule. Only the few
   places that hardcoded #fff instead of a token need their own override.

   Surfaces are lifted off the page background rather than matched to it, so
   cards still read as cards; ink is never pure white, which glares.
   ============================================================================= */

[data-theme="dark"] {
  /* one shared set the section tokens below all point at */
  /* #1a1d33 only lifted 1.14:1 off the page and the cards read as flat
     with it; these separate at 1.26 and 1.42 while still carrying ink at
     12:1 and above */
  --dk-surface:      #22253f;   /* a card, lifted off the page */
  --dk-surface-2:    #2a2d4b;   /* hover / raised */
  --dk-ink:          #e9e6f2;   /* body text, not pure white */
  --dk-ink-soft:     rgba(233, 230, 242, 0.62);
  --dk-line:         rgba(233, 230, 242, 0.14);
  --dk-line-strong:  rgba(233, 230, 242, 0.26);

  /* ---- podcasts ---- */
  --pod-ink:        var(--dk-ink);
  --pod-ink-soft:   var(--dk-ink-soft);
  --pod-line:       var(--dk-line);
  --pod-surface:    var(--dk-surface);

  /* ---- interviews ---- */
  --itv-ink:        var(--dk-ink);
  --itv-ink-soft:   var(--dk-ink-soft);
  --itv-line:       var(--dk-line);

  /* ---- articles ---- */
  --art-ink:        var(--dk-ink);
  --art-ink-soft:   var(--dk-ink-soft);
  --art-line:       var(--dk-line);
  --art-surface:    var(--dk-surface);
  --art-sand:       #6b4a25;

  /* ---- team ---- */
  --bt-cream:       var(--dk-surface);
  --bt-navy:        var(--dk-ink);
  --bt-beige:       #262a45;
  --bt-blue:        #1d3346;

  /* ---- explore ---- */
  --ex-ivory:       var(--dk-surface);
  --ex-navy:        var(--dk-ink);
  --ex-ink:         var(--dk-ink);
  --ex-card:        var(--dk-surface);
  --ex-fill-pod:    #2a2438;
  --ex-fill-int:    #1d2f42;
  --ex-fill-art:    #2b2739;
}

/* ---------------------------------------------------------------------------
   The hero record
   Black vinyl on a near-black page loses its edge, so it gets a rim of light
   and a cool halo instead of the drop shadow that does nothing here.
   -------------------------------------------------------------------------- */
[data-theme="dark"] .rec-disc {
  box-shadow: 0 26px 52px -22px rgba(0, 0, 0, 0.8),
              inset 0 0 0 1px rgba(255, 255, 255, 0.14),
              0 0 0 1px rgba(233, 230, 242, 0.10);
}

[data-theme="dark"] .rec-disc::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

[data-theme="dark"] .rec-arm::before { background: #6f6a63; }
[data-theme="dark"] .rec-arm > i     { background: #837d74; }

/* ---------------------------------------------------------------------------
   The handful that hardcoded #fff instead of a token
   -------------------------------------------------------------------------- */
[data-theme="dark"] .pod-pill {
  background: var(--dk-surface);
  border-color: var(--dk-line);
  color: var(--dk-ink);
}

[data-theme="dark"] .pod-pill:hover {
  background: var(--dk-surface-2);
  border-color: var(--dk-line-strong);
}

[data-theme="dark"] .art-search {
  background: var(--dk-surface);
  border-color: var(--dk-line);
}

[data-theme="dark"] .art-search input { color: var(--dk-ink); }
[data-theme="dark"] .art-search input::placeholder { color: var(--dk-ink-soft); }

[data-theme="dark"] .bt-card {
  background: var(--dk-surface);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .itv-play {
  background: rgba(34, 37, 63, 0.92);
  color: var(--dk-ink);
}

[data-theme="dark"] .pod-empty,
[data-theme="dark"] .itv-empty {
  background: rgba(34, 37, 63, 0.55);
  border-color: var(--dk-line);
}

[data-theme="dark"] .live-badge {
  background: rgba(34, 37, 63, 0.65);
  border-color: var(--dk-line);
}

/* the gradient-outline pill on the member page: the fill is a hard white */
[data-theme="dark"] .member-role {
  background:
    linear-gradient(var(--dk-surface), var(--dk-surface)) padding-box,
    linear-gradient(120deg, var(--blue, #20bce3), var(--orange, #f68e23)) border-box;
  color: var(--dk-ink);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------------
   Ink that sat on a white card and is now on a dark one
   -------------------------------------------------------------------------- */
[data-theme="dark"] .pod-all {
  background: var(--dk-surface);
  border-color: var(--dk-line-strong);
  color: var(--dk-ink);
}

[data-theme="dark"] .pod-all:hover {
  background: transparent;
  color: var(--dk-ink);
}

[data-theme="dark"] .art-badge,
[data-theme="dark"] .pod-chip { color: #12202a; }   /* on their orange fills */

[data-theme="dark"] .bt-name,
[data-theme="dark"] .bt-title { color: var(--dk-ink); }

[data-theme="dark"] .bt-role,
[data-theme="dark"] .bt-sub { color: var(--dk-ink-soft); }

[data-theme="dark"] #team .bt-title { color: var(--dk-ink); }

[data-theme="dark"] .ex-card { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7); }
[data-theme="dark"] .ex-name { color: var(--dk-ink); }
[data-theme="dark"] .ex-desc { color: var(--dk-ink-soft); }
[data-theme="dark"] .ex-sub  { color: var(--dk-ink-soft); }

/* the hairline rules and tick marks read as almost black otherwise */
[data-theme="dark"] .art-rule,
[data-theme="dark"] .bt-bar { opacity: 0.9; }

/* =============================================================================
   Dark mode: one flat surface

   The page was coming out in two tones with a hard seam under the hero:

     - the content sections painted themselves rgba(255,255,255,0.045) while
       the hero stayed transparent, so the band below the hero was lighter
     - the body carried a diagonal gradient plus two radial glow pools, and
       the warm pool sits at the top, browning the hero
     - the decorative blobs are a peach radial gradient, which reads as warm
       haze over a dark page

   All of it is flattened here to a single colour. The light theme keeps the
   lit surface; only dark goes flat.
   ============================================================================= */

[data-theme="dark"] body {
  background-color: var(--hero-bg-1);
  background-image: none;
}

/* every section shows the body through, so there is nothing to seam */
[data-theme="dark"] .radio-section,
[data-theme="dark"] .search-section,
[data-theme="dark"] .blog-section,
[data-theme="dark"] .content-section,
[data-theme="dark"] main,
[data-theme="dark"] #home,
[data-theme="dark"] #podcasts,
[data-theme="dark"] #interviews,
[data-theme="dark"] #posts,
[data-theme="dark"] #team,
[data-theme="dark"] .ex-section {
  background: none;
  border-color: transparent;
  box-shadow: none;
}

/* the warm haze went with the gradient */
[data-theme="dark"] .hero-blob,
[data-theme="dark"] .pg-blob { display: none; }

/* the soft white pool behind the record was the last light source left */
[data-theme="dark"] .hero-visual::before { background: none; }

/* one fill for all three explore cards instead of three tints */
[data-theme="dark"] {
  --ex-fill-pod: var(--dk-surface);
  --ex-fill-int: var(--dk-surface);
  --ex-fill-art: var(--dk-surface);
  --ex-tint:     var(--dk-surface);
}

[data-theme="dark"] .ex-card {
  background: var(--dk-surface);
  border: 1px solid var(--dk-line);
}

/* =============================================================================
   Light mode: one surface, same as dark

   #podcasts, #interviews, #posts and #team were painting themselves
   rgba(255, 255, 255, 0.94) and .ex-section var(--ex-ivory), so they sat as
   near-white panels over the warm body and left a hard seam under the hero.

   They all go transparent, so the body's lit cream is the only surface on the
   page. The cards inside do not lose anything by it — they separate better on
   the warm ground (1.18:1 at the foot of the gradient) than they did on the
   white panel (1.01:1), and they keep their own border and shadow.

   No [data-theme] prefix here on purpose: dark wants the same thing, and its
   own rules are more specific, so they still win where they differ.
   ============================================================================= */
#podcasts,
#interviews,
#posts,
#team,
.ex-section {
  background: transparent;
  /* the sections were also a 1px bordered, 26px-rounded box — that outline
     is what the seam actually read as once the fill was gone */
  border: none;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* =============================================================================
   The same detail the hero carries, on the rest of the page

   The hero has broadcast rings radiating from its middle. Below it the page
   was bare once the section panels came off, so the explore block gets the
   same field — same spacing, opacity and mask, so it reads as one motif
   repeating rather than two different treatments.

   Not on #team: ::after there is already its warm wash, and the more
   specific #team.hosts-section::after is its corner circle, so a ring field
   on that pseudo-element would simply never render.
   ============================================================================= */
.ex-section {
  position: relative;
  isolation: isolate;
}

.ex-section::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: min(1250px, 135%);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 47px, rgba(29, 43, 54, 0.045) 47px 48px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 64%);
          mask-image: radial-gradient(circle at 50% 50%, #000 10%, transparent 64%);
}

[data-theme="dark"] .ex-section::before {
  background: repeating-radial-gradient(circle at 50% 50%,
    transparent 0 47px, rgba(255, 255, 255, 0.05) 47px 48px);
}

/* the content has to sit above the ring field */
.ex-decor { z-index: 1; }
.ex-head,
.ex-grid { position: relative; z-index: 2; }

/* =============================================================================
   Section divider

   The markup already sits between the sections — it was just hidden, and it
   was built for the old design: a 4px glowing orange bar with pulsing icons
   and sparkles either side. Restyled to a hairline with the same orange +
   cyan mark the section headings use, so it belongs to the flat surface.

   The line fades out at both ends and again in the middle, which leaves a gap
   for the mark instead of masking it with a solid patch — a patch would show
   against the lit background.
   ============================================================================= */
:root       { --divider-ink: rgba(29, 43, 54, 0.16); }
[data-theme="dark"] { --divider-ink: rgba(233, 230, 242, 0.16); }

.radio-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  inline-size: auto;
  max-inline-size: 1100px;
  margin: 0 auto;
  padding-block: clamp(1rem, 3vw, 2.25rem);
}

/* the pulsing icons and their sparkles belonged to the old divider */
.radio-divider .radio-icon { display: none; }

.wave-line {
  flex: 1;
  block-size: 1px;
  border-radius: 0;
  overflow: visible;
  animation: none;
  background: linear-gradient(to right,
    transparent 0%,
    var(--divider-ink) 16%,
    var(--divider-ink) 43%,
    transparent 44%,
    transparent 56%,
    var(--divider-ink) 57%,
    var(--divider-ink) 84%,
    transparent 100%);
}

/* the mark: the same pair the headings carry */
/* centred by the flex box itself rather than by an offset plus a
   translate: inset-inline-start flips to "right" under RTL while the
   translate stays physical, which would have pushed the mark off centre
   by its own width in Arabic */
.wave-dots {
  position: absolute;
  inset: 0;
  inline-size: auto;
  block-size: auto;
  transform: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* the mark is a small sound peak: five bars rising to a cyan centre.
   All five already exist in the markup, so nothing is hidden and each one
   just gets its own height. */
.wave-dots .dot {
  inline-size: 3px;
  border-radius: 999px;
  background: var(--orange, #f68e23);
  box-shadow: none;
  animation: none;
  transition: block-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.wave-dots .dot:nth-child(1) { block-size: 7px;  opacity: 0.45; }
.wave-dots .dot:nth-child(2) { block-size: 13px; opacity: 0.75; }
.wave-dots .dot:nth-child(3) { block-size: 19px; opacity: 1; background: var(--blue, #20bce3); }
.wave-dots .dot:nth-child(4) { block-size: 13px; opacity: 0.75; }
.wave-dots .dot:nth-child(5) { block-size: 7px;  opacity: 0.45; }

/* the peak rises on hover — one property, no keyframes */
.radio-divider:hover .dot:nth-child(1),
.radio-divider:hover .dot:nth-child(5) { block-size: 11px; }
.radio-divider:hover .dot:nth-child(2),
.radio-divider:hover .dot:nth-child(4) { block-size: 17px; }
.radio-divider:hover .dot:nth-child(3) { block-size: 24px; }

@media (prefers-reduced-motion: reduce) {
  .wave-dots .dot { transition: none; }
}

@media (max-width: 700px) {
  .radio-divider { max-inline-size: 90%; }
  /* the line is ~340px here, so the mark tightens to clear the gap in it */
  .wave-dots { gap: 3px; }
  .wave-dots .dot:nth-child(3) { block-size: 16px; }
}

/* =============================================================================
   Dark mode: the presenter page

   member.html never set data-theme at all, so none of this could ever apply —
   the page rendered light even with dark mode on. Now that the theme is
   restored there, these are the pieces that were still painting light fills
   and would have glared against the dark page.

   .host-onair i is deliberately left alone: that white dot sits on the orange
   ON AIR pill, not on the page, so it reads correctly in both themes.
   ============================================================================= */

/* the arch and the portrait's own backdrop are placeholders behind the photo —
   visible while it loads, and permanently for a presenter with no photo */
[data-theme="dark"] .member-arch {
  background: linear-gradient(170deg, #262a45, #1d2036);
}

[data-theme="dark"] .member-photo {
  background: linear-gradient(180deg, #262a45, #1d2036);
}

/* the back pill was rgba(255,255,255,0.6). Its label uses --card-ink-muted,
   which flips to near-white in dark — so the pill was light text on a light
   fill. Measured 6.6:1 on --dk-surface. */
[data-theme="dark"] .member-back {
  background: var(--dk-surface);
  border-color: var(--dk-line);
}

[data-theme="dark"] .member-back:hover {
  background: rgba(16, 176, 224, 0.14);
  border-color: rgba(16, 176, 224, 0.45);
}

/* #0b86ab is a darkened blue meant for a cream page: 1.5:1 here. The hover
   has to land brighter than the resting --blue (7.5:1), not darker. 11.7:1. */
[data-theme="dark"] .member-social:hover {
  color: #7fd8f5;
}

/* The views counter used to render unconditionally, so .itv-meta always had
   at least one child. With it gone, an interview that has no date leaves the
   row empty — and an empty flex row still applies its margin-bottom, showing
   as a 1.5rem gap above the watch button. */
.itv-meta:empty { display: none; }

/* =============================================================================
   Navigation: keyboard and screen-reader affordances

   Nothing here changes how the nav looks with a mouse. It covers the paths
   that were missing: tabbing to content, and being able to SEE where focus is.
   ============================================================================= */

/* Off screen until focused, then it drops into the top corner. Uses inset-inline
   so it lands on the correct side in both directions without a second rule. */
.skip-link {
  position: fixed;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 2000;
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  background: #f68e23;
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(20, 16, 40, 0.25);

  /* translate, not display:none — a hidden element cannot be focused, and
     clip-path keeps it out of the way without leaving a stray shadow */
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
  outline: 3px solid #fff;
  outline-offset: -6px;
}

/* main takes focus from the skip link, but it is not an interactive element,
   so it should not draw a ring of its own */
main:focus { outline: none; }

/* The nav was relying on the browser default ring, while .bt-link and .ex-card
   already use a 3px accent ring. This makes the nav match, and only shows for
   keyboard users — :focus-visible, not :focus, so a mouse click stays clean. */
.nav-link:focus-visible,
.nav-search-btn:focus-visible,
.theme-toggle:focus-visible,
.hamburger:focus-visible {
  outline: 3px solid #10b0e0;
  outline-offset: 3px;
  border-radius: 12px;
}

/* the search field already has its own focus treatment; keep the ring off it
   so the two do not stack into a double border */
.nav-search-input:focus-visible { outline: none; }

/* While the mobile panel is open the page behind it must not scroll — without
   this, flicking the menu scrolls the article list underneath it. */
body.nav-open { overflow: hidden; }

/* aria-current marks the section in view. It already gets .is-active from the
   scroll observer; this just keeps the two in step if one is ever set alone. */
.nav-link[aria-current="true"] { font-weight: 700; }

/* =============================================================================
   Arriving with a #hash

   scroll-behavior: smooth above is right for clicking a nav item — you see
   where you are being taken. It is wrong for ARRIVING at index.html#team from
   the presenter page: the browser animates the whole document height, so the
   entire site scrolls past before you land.

   is-hash-jump is set before first paint when the URL carries a hash, and
   removed once the page has settled, so the landing is instant and every
   later in-page click is still smooth.
   ============================================================================= */
html.is-hash-jump { scroll-behavior: auto; }

/* =============================================================================
   Ticker: make the scroll work under RTL

   The page is dir="rtl" and there is a single keyframe, translateX(0) -> -50%.
   That is written for LTR. Under RTL an overflowing max-content track is
   anchored to the RIGHT edge of its container and overflows LEFTWARD, so
   translating it further left walks it off the right edge with nothing behind
   it — bare bar on the right, growing across the whole cycle.

   Worse, the size of that gap is half the track, so adding copies to "fill"
   the bar made the gap bigger, not smaller.

   The fix goes on the CONTAINER, not the track. direction controls how an
   element lays out its CONTENTS; where the track box itself is placed is
   decided by its containing block. Setting it on the track only reordered the
   groups — the box stayed anchored right, so the bar still emptied from the
   right while the words read left-to-right. Setting it on the bar anchors the
   track left and puts the overflow on the right, where the translate pulls
   content from.

   Each item is then isolated back to RTL for its own text. This matters for
   "٢٤ ساعة": Arabic-Indic digits are resolved against the surrounding
   paragraph direction, so in an LTR context the number would swap to the
   wrong side of the word. `isolate` is required because `direction` alone has
   no effect on an inline box.
   ============================================================================= */
[dir="rtl"] .hosts-ticker {
  direction: ltr;
}

[dir="rtl"] .hosts-ticker-group span {
  direction: rtl;
  unicode-bidi: isolate;
}

/* =============================================================================
   Ticker — single source of truth for the scroll

   Structure:   .ticker > .ticker-track > .ticker-seq x2

   The two sequences are identical and adjacent, and the track travels exactly
   one sequence (-50% of a two-sequence track), so when the cycle restarts the
   second copy is sitting precisely where the first one was. No jump.

   Everything visual — orange, height, font, tilt, position — still comes from
   the .hosts-ticker* rules above, which remain on the same elements. This
   block only owns layout and motion, and it is last in the file so it wins
   over the older animation-duration layers (6.5s, 5s) without deleting them.
   ============================================================================= */
.ticker {
  overflow: hidden;

  /* Direction belongs HERE, on the containing block — not on the track.
     The direction property governs how an element lays out its CONTENTS;
     where the track box itself is placed is decided by its containing block.
     With .ticker left
     as rtl, the track stayed anchored to the right edge and overflowed
     leftward, so translating it left walked it off the right edge and left
     bare bar — while its contents happily read left-to-right, which is what
     made the symptom so confusing. LTR here anchors the track left and puts
     the overflow on the right, where the translate pulls from.

     This does not move the bar: it is width 112% with margin-inline-start
     -6%, which resolves to the same -6%..106% span in either direction. */
  direction: ltr;
}

.ticker-track {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;

  animation: tickerLoop 40s linear infinite;
}

/* No justify-content, no gap, no margin: the second sequence must begin on the
   exact pixel the first one ends, or the loop shows a seam. */
.ticker-seq {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  margin: 0;
}

/* Each item back to RTL for its own text. Needed for "٢٤ ساعة": Arabic-Indic
   digits resolve against the paragraph direction, so under the LTR track the
   number would land on the wrong side of the word. isolate is required —
   direction alone has no effect on an inline box. */
.ticker-seq > span {
  direction: rtl;
  unicode-bidi: isolate;
}

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

/* Re-asserted AFTER the animation above: the older reduced-motion rule sits
   further up the file and would otherwise be overridden by it, switching the
   scroll back on for people who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}