/* ===============================================================
   NIGHTY KNIGHTS — site styles
   ---------------------------------------------------------------
   THIS FILE IS THE TEMPLATE for sibling property sites (ABCD Show,
   Order 38). To re-skin: swap the palette + type tokens in :root
   below; the layout underneath is palette-agnostic.

   Palette source: DESIGN.md — Nighty Knights (yellow theme).
   =============================================================== */

:root {
  /* ---- Core neutrals ---- */
  --ink:        #262626;   /* charcoal — page field, line work, dark accents */
  --ink-rgb:    38, 38, 38;/* --ink as rgb() channels for translucent shadows/rules */
  --cream:      #ebddd1;   /* warm paper field — calm panel surface */
  --offwhite:   #fdfafa;   /* bright paper — cards */

  /* ---- Atmospheric (brand) ---- */
  --yellow:     #fcee21;   /* NK signature — hero field, accents */
  --denim:      #4d7fb4;   /* secondary brand */
  --green:      #029761;   /* deep green accent */
  --rust:       #903e20;   /* earthy warmth */
  --sage:       #8bae90;   /* pastoral / calm */

  /* ---- Rare accents (event-only) ---- */
  --pink:       #e88fb1;   /* fairy / wish glitter — anchored use only */

  /* ---- Semantic ---- */
  /* Inverted: charcoal is the page field, yellow is the text on it. */
  --bg:         var(--ink);        /* charcoal page */
  --surface:    #232323;           /* recessed gray — cards */
  --text:       var(--yellow);     /* yellow text against charcoal */
  --muted:      rgba(252, 238, 33, 0.62); /* dimmed yellow — secondary text */
  --rule:       rgba(235, 221, 209, 0.15); /* faint warm hairlines on dark */

  /* ---- Type ---- */
  --display: "badtyp", "Archivo", system-ui, sans-serif; /* playful display face (headers + sub-headline) */
  --body:    runda, "Helvetica Neue", system-ui, -apple-system, sans-serif;

  /* ---- Editable type scale (clamp bounds; -m = mobile / -d = desktop) ----
     Exposed in the Parameters Tool. Rules below consume these as the min/max
     of a clamp(), so fluid scaling is preserved while the bounds stay tunable. */
  --t-body:       18px;                        /* body base (shared) */
  --t-heading-m:  40px;  --t-heading-d:  76px; /* section + about headings */
  --t-tagline-m:  18px;  --t-tagline-d:  30px; /* hero tagline */
  --t-paragraph-m: 18px; --t-paragraph-d: 19px; /* one size: section ledes + about copy */
  --t-eptitle-m:  22px;  --t-eptitle-d:  28px; /* episode title */
  --t-navlink:    24px;   /* nav links */
  --t-rowlabel:   14px;   /* "The Hosts" / "The Cast" labels */
  --t-eplog:      15.5px; /* episode logline / card body */
  --t-chname:     18px;   /* character name */
  --t-chrole:     14.5px; /* character role */
  --t-footlabel:  20px;   /* footer YouTube / Say hello labels */
  --t-footlink:   30px;   /* footer links */

  /* ---- Radius (DESIGN.md: lean rounded, no sharp corners) ---- */
  --r-sm: 4px;
  --r-md: 12px;
  --r-lg: 24px;
  --r-full: 9999px;

  /* ---- Editable spacing + named gaps ---- */
  --maxw: 1080px;
  --stage-max: 1366px; /* content width (matches the hero video) */
  --pad-section-m: 56px;  --pad-section-d: 75px; /* section vertical padding */
  --gap-section-head-m: 32px; --gap-section-head-d: 56px; /* heading → content */
  --gap-grid:         24px;   /* episode + character grid gap */
  --gap-footer-links: 180px;  /* between footer link columns */

  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

.display {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.98;
  text-transform: none;
  margin: 0;
}

/* badtyp ships a single weight — render the display face at 400 everywhere it's
   used so the browser doesn't faux-bold it. */
.display, .hero-tagline, .row-label,
.ep-num, .ep-title, .ch-chip, .ch-name,
.foot-tag, .foot-label { font-weight: 400; }

/* ===============================================================
   NAV
   =============================================================== */
/* Nav overlays the cast at the very top — no visual topbar. */
.nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px clamp(20px, 4vw, 40px);
}
.nav-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--yellow);
}
.nav-glyph { display: block; height: 29px; width: auto; } /* yellow NK letters */
.nav-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.01em;
}
.nav-links {
  display: flex;
  gap: clamp(14px, 3vw, 32px);
  font-weight: 500;
  font-size: var(--t-navlink);
}
.nav-links a {
  text-decoration: none;
  color: var(--yellow);
  padding: 4px 2px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s var(--ease);
}
.nav-links a:hover { border-bottom-color: var(--yellow); }

/* ---- Hamburger toggle (mobile only; hidden on desktop) ---- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  z-index: 60; /* stays above the overlay so it can close it */
}
.nav-toggle-bar {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background: var(--yellow);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
/* bars → X when open */
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ===============================================================
   HERO
   =============================================================== */
/* Full-bleed hero at the top of the page: cast video band, then the wordmark +
   stars + sub-headline on charcoal below it. */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;          /* center the stage; brown bg fills the sides */
  min-height: 100svh;
  background: var(--bg);
  overflow: hidden;
}
/* Cast video + wordmark cap at 1366px wide and center; the brown background
   shows on the sides on wider screens. */
.hero-stage {
  position: relative;
  width: 100%;
  max-width: var(--stage-max);
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* ---- Cast video band (top, behind the nav) ----
   Tall enough to show the cast down to their feet; object-position bottom keeps
   the feet anchored at the band's bottom edge regardless of viewport height. */
.hero-media {
  position: relative;
  flex: 0 0 auto;
  height: 62vh;
}
.hero-poster,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.hero-video--loop    { opacity: 1; z-index: 1; }
.hero-video--feature { opacity: 0; z-index: 2; }
.hero-video--feature.is-live { opacity: 1; }
/* top darken for nav legibility only — the cast meets the background at a hard
   split (no bottom gradient). */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(var(--ink-rgb),0.55) 0%, rgba(var(--ink-rgb),0) 22%);
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; } /* poster only — no autoplaying motion */
}
/* ---- Wordmark + stars + sub-headline (on charcoal, below the cast) ---- */
.hero-inner {
  position: relative;
  z-index: 4;
  flex: 0 0 auto;
  width: 100%;
  /* Pull the wordmark up so the cast→background split lands on the vertical
     middle of "NIGHTY" (the -5% + the lockup's -2.5% ≈ a quarter of the
     wordmark height, which is NIGHTY's centre). Desktop only. */
  margin-top: -5%;
  padding: 0 clamp(12px, 1.5vw, 20px) clamp(28px, 4vw, 56px);
  text-align: center;
}
/* Wordmark stretches the full stage width (≤1366) and is pulled up so its top
   sits above the cast/background split. */
.hero-lockup {
  position: relative;
  width: 100%;
  margin: -2.5% auto 0;
}
.hero-wordmark {
  display: block;
  width: 100%;
  aspect-ratio: 3436.97 / 1081.5; /* wordmark.svg viewBox */
  background-color: var(--yellow);
  -webkit-mask: url("brand/wordmark.svg") center / contain no-repeat;
  mask: url("brand/wordmark.svg") center / contain no-repeat;
}
/* ---- Twinkling stars: slow spin + grow/shrink, each slightly out of phase ---- */
.hero-star {
  position: absolute;
  height: auto;
  pointer-events: none;
  z-index: 2;
  transform-origin: center;
  animation: nk-star-spin 16s linear infinite, nk-star-pulse 5s ease-in-out infinite;
}
.hero-star--1 { top: -10%;   left: 0%;    width: clamp(16px, 2.4vw, 38px); animation-duration: 18s, 6s;   }
.hero-star--2 { top: 32%;    left: -2.5%; width: clamp(13px, 1.9vw, 30px); animation-duration: 14s, 4.5s; animation-delay: -2s, -1s;   }
.hero-star--3 { bottom: -6%; left: 4%;    width: clamp(11px, 1.6vw, 24px); animation-duration: 20s, 5.5s; animation-delay: -5s, -2s;   }
.hero-star--4 { top: -12%;   right: 0%;   width: clamp(15px, 2.2vw, 36px); animation-duration: 17s, 5s;   animation-delay: -3s, -0.5s; }
.hero-star--5 { top: 36%;    right: -2.5%; width: clamp(12px, 1.8vw, 28px); animation-duration: 15s, 6.5s; animation-delay: -1s, -3s;   }
.hero-star--6 { bottom: -4%; right: 3.5%; width: clamp(10px, 1.5vw, 22px);  animation-duration: 19s, 4.8s; animation-delay: -6s, -2.5s; }
@keyframes nk-star-spin  { to { transform: rotate(360deg); } }
@keyframes nk-star-pulse { 0%, 100% { scale: 0.7; } 50% { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) {
  .hero-star { animation: none; }
}

/* ---- Scattered star clusters over the dark background (below the split) ----
   The layer sits behind the wordmark/sub-headline, so the sparkles show in the
   dark gaps and never over the cast video. */
.hero-sparkles {
  position: absolute;
  inset: 13% 0 0 0;  /* start just below the cast→dark split */
  z-index: 0;
  pointer-events: none;
}
.hero-lockup, .hero-tagline { position: relative; z-index: 1; }
.spark {
  position: absolute;
  height: auto;
  transform-origin: center;
  animation: nk-star-spin 17s linear infinite, nk-star-pulse 5.5s ease-in-out infinite;
}
/* cluster A — lower left */
.spark--a1 { left: 3%;  bottom: 15%; width: clamp(11px,1.6vw,26px); animation-duration: 18s, 5s;   }
.spark--a2 { left: 9%;  bottom: 5%;  width: clamp(9px,1.3vw,20px);  animation-duration: 15s, 6.2s; animation-delay: -2s,-1s;  }
.spark--a3 { left: 1%;  bottom: 26%; width: clamp(8px,1.1vw,17px);  animation-duration: 21s, 4.6s; animation-delay: -5s,-2s;  }
.spark--a4 { left: 14%; bottom: 9%;  width: clamp(7px,1vw,15px);    animation-duration: 16s, 5.8s; animation-delay: -3s,-3s;  }
/* cluster B — lower right */
.spark--b1 { right: 3%;  bottom: 13%; width: clamp(11px,1.6vw,26px); animation-duration: 19s, 5.3s; animation-delay: -1s,-2s; }
.spark--b2 { right: 9%;  bottom: 24%; width: clamp(9px,1.3vw,20px);  animation-duration: 14s, 6s;   animation-delay: -4s,-1s; }
.spark--b3 { right: 1%;  bottom: 4%;  width: clamp(8px,1.1vw,17px);  animation-duration: 20s, 4.8s; animation-delay: -6s,-3s; }
.spark--b4 { right: 14%; bottom: 19%; width: clamp(7px,1vw,15px);    animation-duration: 17s, 5.6s; animation-delay: -2s,-2s; }
/* cluster C — centre, around the sub-headline */
.spark--c1 { left: 39%; bottom: 1%;  width: clamp(8px,1.2vw,18px);  animation-duration: 18s, 5.1s; animation-delay: -3s,-1s; }
.spark--c2 { left: 53%; bottom: 6%;  width: clamp(7px,1vw,15px);    animation-duration: 15s, 6.4s; animation-delay: -1s,-2s; }
.spark--c3 { left: 46%; bottom: 12%; width: clamp(6px,0.9vw,13px);  animation-duration: 22s, 4.4s; animation-delay: -5s,-3s; }
/* cluster D — scattered singles */
.spark--d1 { left: 0%;  top: 44%;    width: clamp(9px,1.3vw,20px);  animation-duration: 16s, 5.9s; animation-delay: -2s,-1s; }
.spark--d2 { right: 0%; top: 50%;    width: clamp(8px,1.2vw,18px);  animation-duration: 19s, 5.2s; animation-delay: -4s,-2s; }
.spark--d3 { left: 29%; bottom: 21%; width: clamp(7px,1vw,15px);    animation-duration: 14s, 6.1s; animation-delay: -3s,-3s; }
@media (prefers-reduced-motion: reduce) {
  .spark { animation: none; }
}

/* ---- Page-wide star clusters (page-stars.js) ----
   One field per section, above the page background but behind the content.
   Opaque cards hide the stars behind them; text blocks carry the page colour
   so no star lands inside paragraph text. */
#episodes, #characters, #about, .foot { position: relative; }
.sparkfield {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
#episodes > *:not(.sparkfield),
#characters > *:not(.sparkfield),
#about > *:not(.sparkfield),
.foot > *:not(.sparkfield) { position: relative; z-index: 1; }
.page-spark {
  position: absolute;
  height: auto;
  transform-origin: center;
  animation: nk-star-spin 16s linear infinite, nk-star-pulse 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-spark { animation: none; }
}
/* mask the star field behind the paragraph text only (not headings/labels) */
.section-lede, .about-wrap p { background: var(--bg); }
.hero-tagline {
  font-family: var(--display);
  color: var(--yellow);
  font-size: clamp(var(--t-tagline-m), 2.6vw, var(--t-tagline-d));
  line-height: 1.15;
  letter-spacing: 0;
  margin: clamp(18px, 2.6vw, 30px) auto 0;
  max-width: none;
  /* left-justified, flush with the wordmark's left edge (lockup is full-width) */
  text-align: left;
}
/* each line stays unbroken → exactly two lines (via the <br>) */
.hero-tagline .nowrap { white-space: nowrap; }
/* Mobile: three lines — line 1 / "with the Nighty Knights" / "& Fairy Tale
   Friends". Shrink the face so line 1 stays on one line. */
@media (max-width: 620px) {
  .hero-tagline { font-size: clamp(13px, 4.0vw, 18px); }
  .tag-rest { display: block; }
}
/* Mobile: shrink the video band ~20% (was ≈70svh) and let the wordmark/
   sub-headline below flow up with it (hero height becomes natural). */
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .hero-media { flex: 0 0 auto; height: 56svh; min-height: 0; }
  .hero-inner { margin-top: 0; } /* mobile band didn't grow — no pull-up */
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: clamp(20px, 3vw, 30px);
}

/* ---- Pills ---- */
.pill {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.01em;
  padding: 6px 14px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.pill--ink { background: var(--ink); color: var(--yellow); }
.pill--soft { background: rgba(var(--ink-rgb),0.06); color: var(--muted); border: 1px solid var(--rule); }

/* ===============================================================
   SECTIONS
   =============================================================== */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(var(--pad-section-m), 9vw, var(--pad-section-d)) clamp(24px, 5vw, 48px);
}
.section--alt { max-width: none; } /* no band background — same field as the rest */
.section--alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }

/* Episodes + Characters: three columns aligned to the VIDEO HERO's edges
   (capped at --stage-max, centred, no horizontal padding), so the left column's
   left edge meets the hero's left edge and the right column's right edge meets
   the hero's right edge. */
#episodes, #characters, #about {
  max-width: var(--stage-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}
#characters > * { max-width: none; margin-left: 0; margin-right: 0; }
/* keep the Characters intro the same width as the other paragraphs (the rule
   above unconstrains every direct child for the full-bleed grids) */
#characters .section-head { max-width: 64ch; }
@media (max-width: 700px) {
  /* one full-width column on phones — three would be unreadable */
  .ep-grid, .ch-grid { grid-template-columns: 1fr; }
}

.section-head { max-width: 64ch; margin-bottom: clamp(var(--gap-section-head-m), 5vw, var(--gap-section-head-d)); }
.display.display, h2.display { font-size: clamp(var(--t-heading-m), 7vw, var(--t-heading-d)); }
.section-lede {
  font-size: clamp(var(--t-paragraph-m), 1.7vw, var(--t-paragraph-d));
  color: var(--muted);
  margin: 18px 0 0;
  line-height: 1.5;
}
.row-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-rowlabel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: clamp(32px, 5vw, 48px) 0 18px;
}

/* ===============================================================
   EPISODES
   =============================================================== */
.ep-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid);
}
.ep-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: clamp(20px, 2.6vw, 28px);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.ep-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(var(--ink-rgb),0.4);
}
.ep-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ep-num {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: var(--yellow);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: var(--r-full);
}
.ep-title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(var(--t-eptitle-m), 2.4vw, var(--t-eptitle-d));
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 0 0 10px;
}
.ep-log { margin: 0; color: var(--muted); font-size: var(--t-eplog); line-height: 1.55; }

/* ===============================================================
   CHARACTERS
   =============================================================== */
.ch-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-grid); /* shared with .ep-grid so the columns line up */
}
.ch-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 18px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.section--alt .ch-card { background: var(--surface); }
.ch-card:hover { border-color: var(--yellow); }
.ch-chip {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r-full);
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
/* chip tints — atmospheric palette as accents on a calm field */
.chip--yellow { background: var(--yellow); }
.chip--denim  { background: var(--denim); color: var(--offwhite); }
.chip--green  { background: var(--green); color: var(--offwhite); }
.chip--rust   { background: var(--rust);  color: var(--offwhite); }
.chip--sage   { background: var(--sage); }
.chip--pink   { background: var(--pink); }

.ch-body { min-width: 0; }
.ch-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-chname);
  letter-spacing: -0.005em;
  margin: 2px 0 6px;
  line-height: 1.1;
}
.ch-role { margin: 0; font-size: var(--t-chrole); line-height: 1.5; color: var(--muted); }

.vo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px 28px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--muted);
}
.vo-list strong { color: var(--text); font-weight: 600; }

/* ===============================================================
   ABOUT
   =============================================================== */
.about-wrap { max-width: 64ch; }
.about-wrap .display { font-size: clamp(var(--t-heading-m), 7vw, var(--t-heading-d)); margin-bottom: 28px; }
.about-wrap p { font-size: clamp(var(--t-paragraph-m), 1.7vw, var(--t-paragraph-d)); margin: 0 0 20px; }
.about-wrap strong { font-weight: 600; }

/* ===============================================================
   FOOTER
   =============================================================== */
.foot {
  background: var(--ink);
  color: var(--yellow);
}
.foot a { color: var(--yellow); text-decoration: none; }
.foot a:hover { text-decoration: underline; }
.foot-inner {
  max-width: var(--stage-max); /* match the hero video width */
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) 0 clamp(28px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  align-items: flex-start;
}
.foot-brand { display: flex; align-items: center; gap: 14px; }
.foot-glyph { display: block; border-radius: var(--r-sm); }
.foot-tag {
  font-family: var(--display);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  max-width: 16ch;
  line-height: 1.1;
  color: var(--yellow);
}
.foot-contact { display: flex; flex-wrap: wrap; column-gap: var(--gap-footer-links); row-gap: 24px; }
.foot-col { display: flex; flex-direction: column; gap: 4px; }
.foot-label {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--t-footlabel);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(252,238,33,0.55);
  margin-bottom: 4px;
}
.foot-contact a { font-size: var(--t-footlink); font-weight: 600; }
.foot-label--spaced { margin-top: 16px; }
.foot-note { font-size: 14px; color: rgba(252,238,33,0.6); margin-top: 6px; }
.foot-base {
  max-width: var(--stage-max); /* match the hero video width */
  margin: 0 auto;
  padding: 18px 0 36px;
  border-top: 1px solid rgba(252,238,33,0.18);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(252,238,33,0.6);
}

/* ===============================================================
   RESPONSIVE
   =============================================================== */
@media (max-width: 560px) {
  .nav-name { display: none; }
  .ch-card { gap: 14px; }
}

/* ---- Mobile nav: hamburger + full-screen menu ---- */
@media (max-width: 700px) {
  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(18px, 6vh, 44px);
    background: var(--ink);
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(30px, 9vw, 46px);
    /* hidden until opened */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  }
  .nav-links a {
    padding: 6px 10px;
    border-bottom-width: 3px;
  }

  body.nav-open { overflow: hidden; }
  body.nav-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ep-card, .nav-links a { transition: none; }
}