/* ============================================================
   PH2T — Post-Hype Hot Takes  |  css/styles.css
   posthypehottakes.com
   Version 3 — June 2026
   ============================================================
   TABLE OF CONTENTS
   1.  CSS Variables (Design Tokens)
   2.  CSS Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Navigation  ← FIX: consistent alignment across all items
   6.  Hero Section  ← FIX: video-based flame animation
   7.  Section Styles
   8.  Show Cards
   9.  Episode Cards
   10. Blog / Creative Cards
   11. Team Member Cards
   12. Listening Platform Buttons
   13. Transcript Section
   14. Partners Page
   15. Contact Form
   16. Search Page
   17. Footer
   18. Scroll Reveal Animations
   19. Utility Classes
   20. Responsive Breakpoints  ← FIX: mobile viewport + Android rendering
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   Edit these to change the entire site's look and feel.
   FIX v4: the logo/flame assets are true transparent PNG/masked
   video now, so they don't need to match --bg exactly — that was
   the root cause of the old background-mismatch bug (the header/
   footer actually render on --bg-dark, a different shade, so a
   "matching" flat colour was never fully correct anyway). --bg is
   still the page's primary background colour, just no longer load-
   bearing for logo transparency.
   ============================================================ */
:root {
  /* ── Colours ─────────────────────────────────────────── */
  --bg:           #404040;           /* Page background                      */
  --bg-dark:      #303030;           /* Darker: nav, footer, dark sections  */
  --bg-card:      #383838;           /* Card surfaces                        */
  --bg-card-hover:#3e3e3e;           /* Card hover state                     */
  --primary:      #F5A623;           /* Brand amber/orange                   */
  --primary-dark: #D4891A;           /* Darker amber — hover states          */
  --primary-glow: rgba(245,166,35,0.30); /* Glow / focus ring               */
  --text:         #ffffff;           /* Primary text                         */
  --text-muted:   rgba(255,255,255,0.65); /* Secondary text                 */
  --text-faint:   rgba(255,255,255,0.38); /* Placeholder, disabled           */
  --border:       rgba(255,255,255,0.10); /* Subtle dividers                 */
  --border-amber: rgba(245,166,35,0.35);  /* Amber-tinted dividers           */

  /* ── Typography ──────────────────────────────────────── */
  --font-display: 'Montserrat', sans-serif; /* Headings, nav — bold, impactful */
  --font-body:    'Nunito', sans-serif;     /* Body text — friendly, readable   */

  /* ── Spacing scale ───────────────────────────────────── */
  --space-xs:  0.4rem;
  --space-sm:  0.75rem;
  --space-md:  1.25rem;
  --space-lg:  2rem;
  --space-xl:  3.5rem;
  --space-2xl: 6rem;

  /* ── Border radius ───────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  10px;
  --radius-lg:  20px;
  --radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px  rgba(0,0,0,0.28);
  --shadow-card:  0 4px 24px rgba(0,0,0,0.40);
  --shadow-hover: 0 8px 40px rgba(0,0,0,0.55);

  /* ── Layout ──────────────────────────────────────────── */
  --max-width:      1200px;
  --max-width-text: 780px;
  --nav-height:     64px;

  /* ── Transitions ─────────────────────────────────────── */
  --transition: 0.22s ease;
}


/* ============================================================
   2. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  min-height: 100vh;        /* Fallback for browsers without dvh support */
  min-height: 100dvh;
  overflow-x: hidden;       /* Prevent horizontal scroll */
}

/* Accessibility: skip link lets keyboard users jump to main content.
   FIX v5: this used to hide with `top: -40px`, a hand-picked number
   that assumed the link's rendered height. In practice the link
   (padding + bold text) renders ~43px tall — 3px taller than the
   offset hiding it — so a permanent sliver stayed visible at the top
   of every page, mobile and desktop (this was the "orange bar" bug).
   `transform: translateY(-100%)` moves the element by 100% of its
   OWN rendered height, so it's always fully off-screen no matter how
   its content, padding, or font size changes later — the standard
   bulletproof technique for this pattern (see WebAIM's skip-nav
   guidance). It also can't be under-sized by a future CSS edit the
   way a fixed pixel value can. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  /* FIX v5.1: was `translateY(-100%)` alone. That's the right technique
     (see the FIX v5 note in the original build — it scales with the
     element's real height, not a hand-picked pixel guess) and it
     measured as fully off-screen in every test here: exact edge-to-edge
     coverage, 0px gap. But "exact to the sub-pixel in one test
     environment" isn't the same guarantee on a real phone, where
     device-pixel-ratio rounding could in theory leave a sliver — which
     is exactly the class of bug this line replaced in the first place.
     Adding a fixed 12px on top of the percentage costs nothing (still
     auto-scales with content via the -100%) and removes that remaining
     sliver of doubt entirely instead of trusting an exact 0px margin. */
  transform: translateY(calc(-100% - 12px));
  background: var(--primary);
  color: var(--bg-dark);
  padding: 0.5rem 1rem;
  font-weight: 700;
  z-index: 9999;
  transition: transform var(--transition);
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { transform: translateY(0); }

/* The skip-link (and any same-page #anchor link) jumps here. Without
   scroll-margin-top, the sticky header (--nav-height tall) would sit
   on top of the first ~64px of content after the jump, making the
   jump look like it did nothing even though it worked. */
#main-content { scroll-margin-top: var(--nav-height); }

/* Remove mobile tap highlight on all interactive elements */
a, button, input, select, textarea, label {
  -webkit-tap-highlight-color: transparent;
}

/* Remove 300ms tap delay on mobile — improves responsiveness */
a, button, [role="button"] {
  touch-action: manipulation;
}

img, video {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--transition), opacity var(--transition);
}
a:hover { color: var(--primary-dark); }

/* Focus styles — visible for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  font-family: var(--font-body);
  border: none;
  background: none;
  color: inherit;
  /* Defensive cross-browser normalization — belt-and-suspenders,
     doesn't change how this already renders in Chromium, but removes
     two known sources of <button> vs <a> mismatch on other engines. */
  appearance: none;
  -webkit-appearance: none;
}
/* Old Firefox (<53) added invisible internal padding inside buttons
   that <a> tags never had, throwing off height/alignment even when
   every other property matches. Harmless no-op on modern engines. */
button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input, textarea, select {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
}

/* Respect reduced motion preferences — disable animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   3. TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.2;
  color: var(--text);
}

/* Fluid font sizes using clamp() — scales between screen sizes */
h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.55rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 1rem; }

p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }

/* Eyebrow label — the small uppercase text above a heading */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

/* Pull quote — large decorative quote for content pages */
.pull-quote {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  font-weight: 700;
  font-style: italic;
  color: var(--primary);
  border-left: 3px solid var(--primary);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
}


/* ============================================================
   4. LAYOUT UTILITIES
   ============================================================ */

/* Centres content and applies max width */
.max-width {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Narrower container for prose/text pages */
.max-width-text {
  max-width: var(--max-width-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* Centred section heading block */
.section-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.section-header p {
  color: var(--text-muted);
  max-width: 600px;
  margin: var(--space-sm) auto 0;
}

/* Responsive grid — used for show cards, blog cards etc. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
}
.card-grid--2col { grid-template-columns: repeat(2, 1fr); }
.card-grid--3col { grid-template-columns: repeat(3, 1fr); }

/* Badge labels */
.badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25em 0.65em;
  border-radius: var(--radius-pill);
}
.badge--coming-soon {
  background: rgba(245,166,35,0.12);
  color: var(--primary);
  border: 1px solid var(--border-amber);
}
.badge--live {
  background: rgba(80,200,120,0.12);
  color: #60c878;
  border: 1px solid rgba(80,200,120,0.3);
}


/* ============================================================
   5. NAVIGATION
   FIX v3: All nav items — both <a> links and <button> dropdown
   triggers — are given identical display, height and alignment
   rules to eliminate the vertical inconsistency seen in V2.
   ============================================================ */
/* v5: <site-header> and <site-footer> are custom elements (see
   js/components.js) — the browser treats unknown elements as
   `display: inline` by default, which would break this layout, so
   that has to be set explicitly here. */
site-header, site-footer { display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.main-nav .nav-inner {
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* ── Logo ── */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nav-logo img {
  height: 42px;
  width: auto;
  transition: opacity var(--transition);
  /* FIX v4: the old logo PNG assumed the page had one single
     background colour, but the header actually sits on --bg-dark
     (#303030) while the page body is --bg (#404040) — two different
     shades. A truly transparent PNG (confirmed alpha-transparent at
     every edge, not just visually similar) is what actually fixes
     this, because it has no background of its own to clash with
     whatever surface it's placed on. */
}
.nav-logo:hover img { opacity: 0.8; }

/* ── Desktop links list ── */
.nav-links {
  display: flex;
  align-items: center;       /* Vertically centres all children */
  gap: 0.1rem;
  flex: 1;
  justify-content: center;
}

/* FIX: li items are flex containers so children always centre */
.nav-links > li {
  display: flex;
  align-items: center;
}

/* ── Individual link or dropdown button ──
   Both <a class="nav-link"> and <button class="nav-link nav-dropdown-btn">
   receive the SAME height, display, and alignment so they sit level.  */
.nav-link {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  /* FIX: inline-flex + explicit height replaces the padding-based approach
     that caused height differences between <a> and <button> */
  display: inline-flex;
  align-items: center;
  height: 36px;              /* Fixed height — same for all nav items */
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  background: none;
  transition: color var(--transition), background var(--transition);
  line-height: 1;            /* Prevent font metrics from adding height */
}
.nav-link:hover,
.nav-link.active {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

/* ── Dropdown trigger ── */
.nav-dropdown-btn {
  gap: 0.3em;
  /* Inherits all .nav-link rules above */
}
.nav-arrow {
  font-size: 0.6em;
  display: inline-block;
  transition: transform var(--transition);
  line-height: 1;
}
.nav-has-dropdown.is-open .nav-arrow {
  transform: rotate(180deg);
}

/* ── Dropdown menu panel ── */
.nav-has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 200px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 0.4rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
  z-index: 200;
}
.nav-has-dropdown.is-open .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown li a {
  display: block;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition);
}
.nav-dropdown li a:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

/* ── Right-side actions (search icon + hamburger) ── */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-shrink: 0;
}

.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 36px;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: color var(--transition), background var(--transition);
}
.nav-search-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.08);
}

/* ── Hamburger button (mobile only) ── */
.nav-hamburger {
  display: none;              /* Hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 36px;
  width: 36px;
  border-radius: var(--radius-sm);
  transition: background var(--transition);
  padding: 4px;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.08); }

.hamburger-line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-muted);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition),
              width var(--transition);
}
/* Animate hamburger → X when menu is open */
.nav-hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile overlay (dark backdrop behind open menu) ── */
/* FIX v4: this previously had `pointer-events` left at its default
   (auto) with no `.is-open` gate on the mobile `display:block` rule
   below, so the full-viewport overlay silently sat on top of the
   page — invisible (opacity:0) but still catching taps — on every
   single mobile page load, closed menu or not. Confirmed via
   automated click-testing: a real hit-test on the hamburger button
   was blocked by this element. pointer-events is now off by default
   and only switched on once the menu is actually open. */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 490;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}


/* ============================================================
   6. HERO SECTION
   FIX v3: Video-based flame animation replaces the canvas and
   SVG approaches from V1/V2. The MP4 file IS the animation —
   no JS canvas drawing, no SVG filters.

   FIX v4: The v3 video had a warm-brown baked-in background that
   visibly clashed with --bg (#404040), producing a rectangular
   halo around the hero animation. The replacement video
   (images/flame-hero.mp4) has a neutral dark-grey background that
   is very close to --bg, and a soft edge mask (below) blends any
   remaining difference so no hard edge is visible either way.
   ============================================================ */
.hero {
  padding: var(--space-2xl) 0;
  overflow: hidden;
}

.hero-inner {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

/* ── Left side: text content ── */
.hero-content { flex: 1; min-width: 0; }

.hero-tagline {
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  margin-bottom: var(--space-md);
}
.hero-tagline em {
  font-style: italic;
  color: var(--primary);
}

.hero-description {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 480px;
  margin-bottom: var(--space-lg);
}

/* Call-to-action button row */
.hero-cta {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ── Right side: animated logo ── */
.hero-logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* VIDEO: the animated flame logo
   autoplay loop muted playsinline are set in HTML.
   Source file: images/flame-hero.mp4 — 520x650 (4:5 portrait, matching
   the original footage's natural proportions — v4's version force-
   cropped an earlier source to a tight square with zero margin around
   the flame, which is what was cutting the tip and base off; this
   version isn't cropped at all). Audio stripped. Background is
   colour-keyed to exactly --bg (#404040), not just "close to" it.

   ASPECT RATIO NOTE: width is set below, height is deliberately left
   as `auto` — the element renders at the VIDEO FILE's own natural
   aspect ratio rather than a fixed box. This means `object-fit` below
   never actually has anything to correct (there's no size mismatch
   for it to resolve).

   EDGE BLEND: kept as a second line of defence even though the
   background is now colour-matched exactly — a soft gradient mask
   fades the bottom edge of the frame to transparent, in case any
   future replacement clip isn't colour-corrected as precisely.        */
.hero-logo-video {
  width: clamp(200px, 28vw, 310px);
  height: auto;
  display: block;
  object-fit: cover; /* Safety net only — see aspect ratio note above */
  -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 99%);
  mask-image:         linear-gradient(to bottom, black 90%, transparent 99%);
}

/* STATIC FALLBACK IMAGE: shown any time the video isn't playing —
   prefers-reduced-motion, a load error, or a stalled/blocked autoplay
   (see js/main.js). This used to be the third of three fallback tiers,
   behind a procedurally-drawn Canvas flame; that tier was removed in
   v5.1 (the shape it drew didn't read as the logo and looked
   inappropriate) so this is now the only fallback, full stop. */
.hero-logo-img {
  width: clamp(200px, 28vw, 310px);
  height: auto;
  display: none;             /* Hidden by default; JS shows on error */
}

/* Reduced motion: skip all animation, show static logo only */
@media (prefers-reduced-motion: reduce) {
  .hero-logo-video  { display: none !important; }
  .hero-logo-img    { display: block !important; }
}


/* ============================================================
   7. SECTION STYLES
   ============================================================ */
.section {
  padding: var(--space-2xl) 0;
}

/* Alternating dark section — used for latest episodes, follow etc. */
.section--dark {
  background: var(--bg-dark);
}

/* Section divider line */
.section-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}


/* ============================================================
   8. SHOW CARDS
   Each card is an <a> element (the whole card is clickable).
   To add a new show, copy a .show-card block in index.html.
   ============================================================ */
.show-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
  color: var(--text);
  text-decoration: none;
}
.show-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-amber);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  color: var(--text);
}
.show-card h3 {
  margin: 0.4rem 0 0.75rem;
  font-size: 1.25rem;
}
.show-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
}
.show-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border);
}
.show-card-meta {
  font-size: 0.8rem;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.show-card-arrow {
  color: var(--primary);
  font-size: 1.1rem;
  transition: transform var(--transition);
}
.show-card:hover .show-card-arrow {
  transform: translateX(4px);
}

/* Dimmed style for coming-soon shows */
.show-card--coming-soon {
  opacity: 0.7;
}
.show-card--coming-soon:hover {
  opacity: 0.9;
}


/* ============================================================
   9. EPISODE CARDS
   Horizontal list items for episode listings.
   ============================================================ */
.episode-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition);
}
.episode-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-amber);
  transform: translateX(4px);
  color: var(--text);
}
.episode-card-number {
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.2rem;
}
.episode-card-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.episode-card-date {
  font-size: 0.8rem;
  color: var(--text-faint);
  margin-top: 0.2rem;
}
.episode-card-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background: rgba(245,166,35,0.12);
  border-radius: 50%;
  color: var(--primary);
  transition: background var(--transition), transform var(--transition);
  flex-shrink: 0;
}
.episode-card:hover .episode-card-play {
  background: rgba(245,166,35,0.22);
  transform: scale(1.1);
}

/* Episode list spacing */
.episode-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}


/* ============================================================
   10. BLOG / CREATIVE CARDS
   ============================================================ */
.blog-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.blog-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-amber);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
  color: var(--text);
}

/* Emoji / icon placeholder (shown until real images are added) */
.blog-card-image-placeholder {
  height: 120px;
  background: rgba(245,166,35,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  border-bottom: 1px solid var(--border);
}

.blog-card-body { padding: var(--space-md) var(--space-lg) var(--space-lg); flex: 1; }
.blog-card-category {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.blog-card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}
.blog-card-excerpt {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.blog-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border);
}


/* ============================================================
   11. TEAM MEMBER CARDS
   ============================================================ */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-lg);
}

.team-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.team-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
  overflow: hidden;
  background: rgba(245,166,35,0.10);
  border: 2px solid var(--border-amber);
}
.team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Initial letter placeholder — shown until real photos added */
.team-avatar-initials {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary);
}

.team-card h3 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}
.team-card-role {
  font-size: 0.8rem;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.team-card p {
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Show tags on a team card */
.team-shows {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: var(--space-sm);
}
.team-show-tag {
  font-size: 0.68rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-pill);
  padding: 0.2em 0.6em;
  border: 1px solid var(--border);
}


/* ============================================================
   12. BUTTONS & PLATFORM LINKS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 0.65em 1.4em;
  text-decoration: none;
  transition: background var(--transition), color var(--transition),
              border-color var(--transition), transform var(--transition),
              box-shadow var(--transition);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1.2;
}

/* Filled amber button — primary action */
.btn--primary {
  background: var(--primary);
  color: var(--bg-dark);
  border-color: var(--primary);
}
.btn--primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(245,166,35,0.35);
}

/* Outlined button — secondary action */
.btn--outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--border-amber);
}
.btn--outline:hover {
  background: rgba(245,166,35,0.10);
  border-color: var(--primary);
  color: var(--primary);
}

/* Ghost (low-contrast) button */
.btn--ghost {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  border-color: var(--border);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  color: var(--text);
}

/* Small size modifier */
.btn--sm {
  font-size: 0.75rem;
  padding: 0.5em 1em;
}

/* Listening platform row */
.listen-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
}


/* ============================================================
   13. TRANSCRIPT SECTION
   Collapsible transcript on episode pages.
   TO ADD a transcript: find the <!-- REAL TRANSCRIPT FORMAT -->
   comment inside the transcript-body and paste content there.
   ============================================================ */
.transcript-section {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--border);
  padding-top: var(--space-lg);
}

/* Toggle button */
.transcript-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
  padding: 0.5em 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: opacity var(--transition);
}
.transcript-toggle:hover { opacity: 0.75; }
.transcript-arrow {
  font-size: 0.9em;
  display: inline-block;
  transition: transform var(--transition);
  line-height: 1;
}
.transcript-toggle[aria-expanded="true"] .transcript-arrow {
  transform: rotate(180deg);
}

/* Hidden transcript body (JS toggles the [hidden] attribute) */
.transcript-body {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: rgba(0,0,0,0.2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  max-height: 600px;
  overflow-y: auto;
}

/* Placeholder text shown before real transcript is added */
.transcript-placeholder {
  color: var(--text-faint);
  font-style: italic;
  text-align: center;
  padding: var(--space-xl) 0;
}

/* Speaker labels within a transcript */
.speaker {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-top: var(--space-md);
  margin-bottom: 0.25rem;
}
.speaker:first-child { margin-top: 0; }
.transcript-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
}


/* ============================================================
   14. SHOW PAGE HEADER
   Used on individual show and episode pages.
   ============================================================ */
.show-hero {
  background: var(--bg-dark);
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.coming-soon-banner {
  background: rgba(245,166,35,0.06);
  border: 1px solid var(--border-amber);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  margin: var(--space-xl) 0;
}
.coming-soon-banner h3 {
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.coming-soon-banner p { color: var(--text-muted); }


/* ============================================================
   15. EPISODE PAGE
   ============================================================ */
.episode-hero {
  background: var(--bg-dark);
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--border);
}

.episode-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 var(--space-lg);
}
.episode-meta-row .badge,
.episode-meta-row span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.episode-meta-row .separator { color: var(--border); }

/* Spotify embed player wrapper */
.spotify-embed {
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-lg) 0;
}
.spotify-embed iframe {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}


/* ============================================================
   16. PARTNERS PAGE
   ============================================================ */
.partner-card {
  display: flex;
  gap: var(--space-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
.partner-logo-placeholder {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  background: rgba(245,166,35,0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
.partner-info h3 { margin-bottom: 0.4rem; }
.partner-info p  { color: var(--text-muted); font-size: 0.9rem; }


/* ============================================================
   17. CONTACT FORM
   ============================================================ */
.contact-layout {
  display: grid;
  /* v5.1: form div now comes first in DOM order (see contact.html), so
     the wider fraction moves to the first column with it — otherwise
     the form would inherit the sidebar's old, narrower 1fr column. */
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.contact-info h3 { margin-bottom: var(--space-sm); }
.contact-info p  { color: var(--text-muted); font-size: 0.9rem; }

.form-group { margin-bottom: var(--space-md); }
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }

.form-group label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  color: var(--text);
  transition: border-color var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--primary);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-faint); }
.form-group textarea { resize: vertical; min-height: 140px; }

.form-success {
  background: rgba(80,200,120,0.1);
  border: 1px solid rgba(80,200,120,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  text-align: center;
  display: none;
}
.form-success.visible { display: block; }


/* ============================================================
   18. SEARCH PAGE
   ============================================================ */
.search-wrap {
  max-width: 680px;
  margin: 0 auto;
}

.search-input-row {
  position: relative;
  margin-bottom: var(--space-lg);
}
.search-input-row svg {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
#search-input {
  width: 100%;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 0.85rem 1.2rem 0.85rem 2.8rem;
  color: var(--text);
  font-size: 1rem;
  transition: border-color var(--transition);
}
#search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.search-results-count {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

.search-result-item {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.search-result-item:hover {
  border-color: var(--border-amber);
  background: var(--bg-card-hover);
  color: var(--text);
}
.search-result-type {
  font-family: var(--font-display);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.25rem;
}
.search-result-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
}
.search-result-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.search-highlight { color: var(--primary); }
.search-empty { text-align: center; padding: var(--space-xl) 0; color: var(--text-muted); }


/* ============================================================
   19. FOOTER
   ============================================================ */
.site-footer {
  background: var(--bg-dark);
  border-top: 1px solid var(--border);
  padding: var(--space-2xl) 0 0;
}

.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer-brand img {
  height: 52px;
  width: auto;
  margin-bottom: var(--space-sm);
  /* True alpha transparency (not a colour match) is what keeps this
     clean against --bg-dark — see the matching note under .nav-logo img */
}
.footer-tagline {
  font-size: 0.9rem;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}

/* Social icon row in footer */
.footer-social {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-muted);
  transition: background var(--transition), color var(--transition),
              border-color var(--transition);
}
.footer-social a:hover {
  background: rgba(245,166,35,0.15);
  border-color: var(--border-amber);
  color: var(--primary);
}

.footer-nav-col h4 {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-md);
}
.footer-nav-col ul { display: flex; flex-direction: column; gap: 0.55rem; }
.footer-nav-col a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: color var(--transition);
}
.footer-nav-col a:hover { color: var(--text); }

/* Copyright bar */
.footer-bottom {
  border-top: 1px solid var(--border);
  padding: var(--space-lg) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-faint);
}
.footer-bottom a { color: var(--text-faint); }
.footer-bottom a:hover { color: var(--primary); }


/* ============================================================
   20. SCROLL REVEAL ANIMATIONS
   Elements with class 'reveal' fade+slide up when they enter
   the viewport. 'reveal-stagger' staggers children one by one.
   The JS (main.js → initScrollReveal) adds the 'visible' class.
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grid children */
.reveal-stagger > *:nth-child(1) { transition-delay: 0.04s; }
.reveal-stagger > *:nth-child(2) { transition-delay: 0.10s; }
.reveal-stagger > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > *:nth-child(4) { transition-delay: 0.22s; }
.reveal-stagger > *:nth-child(5) { transition-delay: 0.28s; }
.reveal-stagger > *:nth-child(6) { transition-delay: 0.34s; }


/* ============================================================
   21. UTILITY CLASSES
   ============================================================ */
.text-center  { text-align: center; }
.text-muted   { color: var(--text-muted); }
.text-primary { color: var(--primary); }
.text-small   { font-size: 0.875rem; }
.text-large   { font-size: 1.1rem; }
.mt-lg        { margin-top: var(--space-lg); }
.mt-xl        { margin-top: var(--space-xl); }
.mb-lg        { margin-bottom: var(--space-lg); }
.mb-xl        { margin-bottom: var(--space-xl); }
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}


/* ============================================================
   22. RESPONSIVE BREAKPOINTS
   Mobile-friendly: 320px → 480px → 768px → 1024px → 1440px
   FIX v3: dvh unit + bottom:0 for proper mobile viewport.
   ============================================================ */

/* ── Tablet: 768px and below ── */
@media (max-width: 768px) {

  /* Show hamburger menu button, hide desktop nav links */
  .nav-hamburger { display: flex; }

  /* Mobile nav — full-screen overlay */
  .nav-links {
    /* FIX: use position:fixed with bottom:0 instead of height:100vh.
       This prevents the "taller than screen" bug on Android Chrome/Firefox
       where 100vh includes the browser address bar height.               */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Belt-and-suspenders mobile viewport fix:
       bottom:0 covers most cases; height:100dvh adds a fallback for older
       WebKit where position:fixed+bottom:0 can still miscalculate height.
       Together these handle Android Chrome, Firefox, and iOS Safari.  */
    bottom: 0;
    height: 100vh;           /* Legacy fallback */
    height: 100dvh;          /* Dynamic viewport — adjusts for browser chrome */
    background: var(--bg-dark);
    z-index: 600;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevent background scroll */
    padding: var(--nav-height) var(--space-lg) var(--space-xl);
    gap: 0.25rem;
    /* Hidden until hamburger is clicked (JS adds .is-open) */
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .nav-links.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
  }
  .nav-overlay { display: block; } /* Reveals the dark backdrop */

  /* Mobile nav items — full width, taller touch targets */
  .nav-links > li { display: block; }

  .nav-link,
  .nav-dropdown-btn {
    display: flex;
    align-items: center;
    height: auto;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-md);
  }

  /* Mobile dropdowns expand inline (not absolutely positioned) */
  .nav-has-dropdown { position: static; }
  /* FIX v4 — THIS was the reported "ribbon alignment inconsistent" bug,
     confirmed by measuring every mobile nav item's exact position:
     max-height:0 + overflow:hidden correctly collapses the dropdown's
     CONTENT, but padding and margin are NOT content — they render
     regardless of max-height. That left ~9.6px of invisible phantom
     space after every dropdown trigger (Shows/Episodes/Creative) that
     the plain links (Home/About/Team/...) didn't have, so the gaps
     between mobile nav items were uneven even though nothing was
     visibly wrong. Padding/margin now live on the .is-open state only. */
  .nav-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    background: rgba(0,0,0,0.2);
    border-radius: var(--radius-md);
    padding: 0;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
  }
  .nav-has-dropdown.is-open .nav-dropdown {
    max-height: 500px;
    padding: 0.2rem 0 0.2rem 1rem;
    margin-top: 0.2rem;
    pointer-events: auto;
    /* FIX v5: this rule and the unrelated desktop rule
       `.nav-has-dropdown.is-open .nav-dropdown { transform:
       translateX(-50%) translateY(0); }` (unconditional, not scoped to
       desktop) have identical specificity (3 classes). Because that
       desktop rule is never gated by a media query, it wins the cascade
       for the `transform` property on ANY screen size unless something
       here explicitly overrides it — the plain `.nav-dropdown { transform:
       none; }` reset above has lower specificity (1 class) and can't do
       it. Without this line, the open panel inherited the desktop
       translateX(-50%) centering, which — combined with this panel now
       being much wider than a centered desktop dropdown — shifted it
       ~150-180px left and off the edge of the screen, clipped by
       `body { overflow-x: hidden }`. This is what was cutting off the
       Shows/Episodes text in the mobile menu. */
    transform: none;
  }
  .nav-dropdown li a {
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
  }

  /* Hero: stack layout on mobile */
  .hero-inner {
    flex-direction: column;
    text-align: center;
    gap: var(--space-lg);
  }
  .hero-logo-wrap { order: -1; } /* Video/logo goes above text */
  .hero-logo-video,
  .hero-logo-img  { width: clamp(160px, 55vw, 260px); }
  .hero-cta       { justify-content: center; }
  .hero-description { max-width: none; margin-inline: auto; }

  /* Cards: single column */
  .card-grid,
  .card-grid--2col,
  .card-grid--3col { grid-template-columns: 1fr; }
  .team-grid       { grid-template-columns: 1fr 1fr; }

  /* Footer: two columns */
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }

  /* Contact: single column */
  .contact-layout { grid-template-columns: 1fr; }
  .form-row       { grid-template-columns: 1fr; }

  /* Episode cards: simpler on small screens */
  .episode-card { grid-template-columns: 1fr; }
  .episode-card-play { display: none; }

  /* Partner cards: stack */
  .partner-card { flex-direction: column; }
}


/* ── Mobile: 480px and below ── */
@media (max-width: 480px) {
  :root {
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
  }

  .max-width,
  .max-width-text { padding-inline: var(--space-md); }

  /* Footer: single column on very small screens */
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }

  /* Team grid: single column */
  .team-grid { grid-template-columns: 1fr; }

  /* Buttons: full-width on tiny screens */
  .hero-cta { flex-direction: column; align-items: center; }
  .hero-cta .btn { width: 100%; max-width: 320px; justify-content: center; }
}


/* ── Wide desktop: 1440px+ ── */
@media (min-width: 1440px) {
  .hero-logo-video,
  .hero-logo-img { width: 340px; }
}