/* ============================================================
   Knightcap Chess Club — site styles
   Palette (Quake brand system, March 2026):
   Scarlet #F93823 · Light Cream #FFF7EE · Dark Sienna #260102
   Ice Blue #C9FFFD · Charcoal #161616 · White #FFFFFF
   Type: Mukta Mahee (Quake brand kit) — one family everywhere
   ============================================================ */

@font-face {
  font-family: 'Mukta Mahee';
  src: url('../assets/fonts/muktamahee-regular.woff2') format('woff2'),
       url('../assets/fonts/MuktaMahee-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mukta Mahee';
  src: url('../assets/fonts/muktamahee-medium.woff2') format('woff2'),
       url('../assets/fonts/MuktaMahee-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mukta Mahee';
  src: url('../assets/fonts/muktamahee-semibold.woff2') format('woff2'),
       url('../assets/fonts/MuktaMahee-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mukta Mahee';
  src: url('../assets/fonts/muktamahee-bold.woff2') format('woff2'),
       url('../assets/fonts/MuktaMahee-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --scarlet: #F93823;
  --cream: #FFF7EE;
  --sienna: #260102;
  --ice: #C9FFFD;
  --charcoal: #161616;
  --white: #FFFFFF;

  --font-sans: 'Mukta Mahee', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-serif: 'Mukta Mahee', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --max-w: 1200px;
  --pad-x: clamp(20px, 5vw, 48px);
}

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



body {
  font-family: var(--font-sans);
  font-weight: 400;
  background: var(--cream);
  color: var(--charcoal);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

::selection { background: var(--scarlet); color: var(--cream); }

.wrap {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ============================================================
   Landing page — fullscreen video, one viewport, no scroll
   (construction after badruttspalace.com)
   ============================================================ */

.landing-page {
  overflow: hidden;
  background: var(--sienna);
}

.landing {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--cream);
}

/* --- video background --- */

.landing__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* fallback backdrop until video clips exist: slow-breathing sienna depth */
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(249, 56, 35, 0.16) 0%, rgba(249, 56, 35, 0) 55%),
    radial-gradient(140% 110% at 50% -20%, #3a0a06 0%, var(--sienna) 55%, #120000 100%);
}
.landing__bg::after {
  /* faint vignette drift so the fallback doesn't feel static */
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(60% 50% at 50% 50%, rgba(255, 247, 238, 0.05) 0%, rgba(255, 247, 238, 0) 70%);
  animation: drift 14s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(-4%, -3%) scale(1); }
  to { transform: translate(4%, 3%) scale(1.08); }
}

.landing__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.6s ease;
  transform: scale(1.02);
}
.landing__video.is-live { opacity: 1; }

.landing__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(22, 22, 22, 0.45) 0%,
      rgba(22, 22, 22, 0.18) 30%,
      rgba(22, 22, 22, 0.18) 60%,
      rgba(22, 22, 22, 0.55) 100%);
}

/* videos hidden entirely when no clips are available */
.landing.no-video .landing__video { display: none; }

/* --- entrance --- */

.rise {
  opacity: 0;
  transform: translateY(26px);
  animation: rise 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.rise-1 { animation-delay: 0.15s; }
.rise-2 { animation-delay: 0.35s; }
.rise-3 { animation-delay: 0.55s; }
.rise-4 { animation-delay: 0.65s; }
.rise-5 { animation-delay: 0.85s; }
@keyframes rise {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; animation: none; }
  .landing__bg::after { animation: none; }
  .landing__video { transition: none; }
}

/* --- chrome --- */

.landing__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.landing__links {
  display: flex;
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(20px, 3.2vh, 34px) 0 0 var(--pad-x);
}
.landing__links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(255, 247, 238, 0.85);
  transition: color 0.15s;
}
.landing__links a:hover { color: var(--white); }

/* shop — bare word, click to highlight */
.landing__shop {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  text-decoration: none;
  color: rgba(255, 247, 238, 0.9);
  margin: clamp(20px, 3.2vh, 34px) var(--pad-x) 0 0;
  transition: color 0.2s;
}
.landing__shop:hover {
  color: var(--scarlet);
}

/* touch: kill the double-tap delay so every explore/tile tap lands instantly */
.tile, .channel, .landing__discover, .landing__sound, .menu__close,
.archive__back, .players__ep, .radio__ep, .lightbox__close, .lightbox__nav {
  touch-action: manipulation;
}

/* menu scroll owns the touch: lock the page behind it and never chain the scroll out */
body.menu-open { overflow: hidden; }
.menu {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

/* scroll-mode menu (below the fit gate): the bar needs a back so tiles don't scroll through it */
@media (max-width: 1149px), (max-height: 619px) {
  .menu .menu__bar { /* outranks the base transparent background declared later in the file */
    background: rgba(16, 5, 3, 0.82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .players .lightbox__nav { display: none; } /* swipe + the name switcher do the job on touch */
  .players__frame { height: min(68vh, 820px); }
}

/* play — landing top-center, same bare-word chrome as discover/shop */
.landing__top { position: relative; }
.landing__play {
  position: absolute; /* true center regardless of the side words' widths */
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.9);
  margin-top: clamp(20px, 3.2vh, 34px);
}

/* shop isn't live yet — hover reveals "coming soon" instead of linking anywhere.
   The reveal is absolutely positioned so the word swap never shifts the layout
   (the old font-size:0 swap collapsed the element and pushed the bar around). */
.shop--soon { cursor: default; }
/* the shop words need a positioning context for the reveal; play is already
   position:absolute (top-center) — don't override that here */
.landing__shop.shop--soon, .menu__shop.shop--soon { position: relative; }
.shop--soon:hover { color: transparent; text-decoration: none; }
.shop--soon:hover::after {
  content: 'coming soon';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--scarlet);
}
/* the landing "play" word is centered, so its reveal centers too */
.landing__play.shop--soon:hover::after {
  right: auto;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* --- center --- */

.landing__center {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--pad-x);
}
.landing__logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-block;
  transition: transform 0.35s ease;
}
.landing__logo-btn:hover { transform: scale(1.045); }
.landing__lockup {
  width: min(140px, 32vw);
  margin: 0 auto clamp(18px, 3vh, 30px);
  filter: drop-shadow(0 4px 30px rgba(0, 0, 0, 0.25));
}
/* (the sound label stays visible in every mode now — it flips between
   "turn it up" and "turn it down" so the volume button never sits alone) */
.landing__tagline {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(16px, 2.3vh, 22px);
  color: rgba(255, 247, 238, 0.9);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* --- bottom / cities --- */

.landing__bottom {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--pad-x) clamp(16px, 2.6vh, 28px);
}
.landing__find {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.55);
  margin-bottom: clamp(14px, 2.4vh, 22px);
}
.landing__cities {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: clamp(24px, 3.8vw, 52px);
  row-gap: 16px;
  margin-bottom: clamp(16px, 3vh, 30px);
}
.landing__cities a {
  display: flex;
  align-items: center;
  opacity: 0.9;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.landing__cities a:hover {
  opacity: 1;
  transform: translateY(-3px);
}
.landing__cities img {
  height: clamp(14px, 2.3vh, 20px);
  width: auto;
  /* brand marks are flat scarlet — render white over video, native scarlet on hover */
  filter: brightness(0) invert(1);
  transition: filter 0.15s ease;
}
.landing__cities a:hover img {
  filter: none;
}
.landing__city-tall img { height: clamp(25px, 4vh, 36px) !important; }
.landing__city-milano img { height: clamp(12px, 2vh, 17px) !important; }
.landing__city-miami img { height: clamp(13px, 2.15vh, 18.5px) !important; }
.landing__city-script img { height: clamp(23px, 3.7vh, 33px) !important; }

.landing__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: clamp(12px, 2vh, 18px);
  border-top: 1px solid rgba(255, 247, 238, 0.16);
}
.landing__socials {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.landing__socials a {
  color: rgba(255, 247, 238, 0.6);
  transition: color 0.15s;
  display: flex;
}
.landing__socials a:hover { color: var(--scarlet); }
.landing__socials svg { width: 17px; height: 17px; }
.landing__mail {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: rgba(255, 247, 238, 0.55);
  transition: color 0.15s;
}
.landing__mail:hover { color: var(--scarlet); }
.landing__foot-right {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* sound toggle */
.landing__sound {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 247, 238, 0.45);
  background: rgba(22, 22, 22, 0.25);
  color: rgba(255, 247, 238, 0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
  flex-shrink: 0;
}
.landing__sound:hover {
  border-color: var(--scarlet);
  color: var(--scarlet);
}
/* tip sits beside the button — light both when either is hovered */
.landing__foot-right:hover .sound-tip { color: var(--scarlet); }
.landing__foot-right:hover .eq i { background: var(--scarlet); }
.landing__foot-right:hover .landing__sound {
  border-color: var(--scarlet);
  color: var(--scarlet);
}
.landing__sound svg { width: 18px; height: 18px; }
.landing__sound .icon-on { display: none; }
.landing__sound.is-on .icon-on { display: block; }
.landing__sound.is-on .icon-off { display: none; }
.landing__sound[hidden] { display: none; }
.landing__move {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  color: rgba(255, 247, 238, 0.9);
}

/* small screens: permit scroll only if it truly doesn't fit */
@media (max-height: 540px), (max-width: 540px) {
  .landing-page { overflow: auto; }
  .landing { height: auto; min-height: 100dvh; gap: 40px; }
  .landing__links { padding-top: 22px; flex-direction: column; gap: 10px; }
  .landing__top { align-items: center; }
  /* .landing__top prefix keeps these ahead of the base rules regardless of
     where they sit in the file — the bare .landing__discover override lost
     to its later base rule and the word sank below play/shop */
  .landing__top .landing__shop { padding: 18px 24px; margin: 0; line-height: 1; }
  .landing__top .landing__discover { padding: 18px 24px; margin: 0; line-height: 1; }
  .landing__top .landing__play { margin-top: 0; top: 50%; transform: translate(-50%, -50%); line-height: 1; }
  .landing__cities { column-gap: 24px; }
  .landing__cities img { height: 15px; }
  .landing__city-tall img { height: 27px !important; }
  .landing__city-script img { height: 25px !important; }
  .landing__foot { flex-direction: column; gap: 8px; }
  /* glass over live video is too heavy for phone GPUs — the blur made the
     menu and archive scroll stutter. solid dark ground scrolls clean, and
     the background video is paused behind the open menu on phones anyway.
     (body-prefixed: these overrides sit BEFORE the base .menu/.archive rules
     in the file, so bare selectors would lose the cascade — same trap that
     sank the discover word.) */
  body .menu,
  body .menu .menu__bar,
  body .archive,
  body .archive .archive__bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body .menu { background: rgba(18, 6, 3, 0.96); }
  body .menu .menu__bar { background: rgba(18, 6, 3, 0.92); }
  body .archive { background: rgba(18, 6, 3, 0.97); }
  body .archive .archive__bar { background: rgba(18, 6, 3, 0.92); }
}

/* --- discover — menu trigger as a bare word, mirrors shop on the right --- */

.landing__discover {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.9);
  padding: clamp(20px, 3.2vh, 34px) 0 0 var(--pad-x);
  transition: color 0.2s;
}
.landing__discover:hover {
  color: var(--scarlet);
}

/* ============================================================
   Menu overlay — Badrutt's construction: big nav left, data tiles right
   ============================================================ */

.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(20, 8, 5, 0.55);
  backdrop-filter: blur(16px) saturate(0.9);
  -webkit-backdrop-filter: blur(16px) saturate(0.9);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
  overflow-y: auto;
}
.menu.is-open { opacity: 1; visibility: visible; }

.menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  border-bottom: 1px solid rgba(255, 247, 238, 0.18);
  position: sticky;
  top: 0;
  background: transparent;
  z-index: 2;
  align-items: flex-start;
  padding-top: clamp(20px, 3.2vh, 34px);
  padding-bottom: 12px;
}
.menu__close {
  position: relative;
  width: 30px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.menu__close span {
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 1.5px;
  background: var(--cream);
  transition: background 0.15s;
}
.menu__close span:nth-child(1) { transform: rotate(45deg); }
.menu__close span:nth-child(2) { transform: rotate(-45deg); }
.menu__close:hover span { background: var(--scarlet); }
.menu__logo { height: clamp(46px, 7vh, 58px); width: auto; padding: 0; margin-top: -8px; }
.menu__shop {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  text-decoration: none;
  color: rgba(255, 247, 238, 0.9);
  padding: 0;
  transition: opacity 0.2s;
}
.menu__shop:hover { opacity: 0.6; }

.menu__body {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 64px) var(--pad-x) clamp(48px, 8vh, 88px);
}

/* tiles — centered board */
.menu__tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  position: relative;
}
/* the outer frame is an overlay so it stays visible on all four sides —
   a plain border drowns where it runs beside the bright photo tiles */
.menu__tiles::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 247, 238, 0.22);
  pointer-events: none;
  z-index: 5;
}
.tile {
  padding: clamp(26px, 4vh, 42px) clamp(24px, 2.6vw, 42px);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* flyers tile — one full 4:5 flyer, the board's big left slot */
.tile--flyers {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  background: var(--sienna);
  padding: 0;
  font-family: inherit;
  text-align: left;
  grid-row: span 2;
  aspect-ratio: 4 / 5; /* the box IS the flyer's shape — no bands, no crop */
  min-height: 0 !important;
  width: 100%;
}
.tile--flyers-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.5s ease, opacity 0.8s ease;
}
.tile--flyers:hover .tile--flyers-bg { transform: scale(1.03); opacity: 1; }
.tile--flyers-bg.is-dim { opacity: 0 !important; }
.tile--flyers-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 1, 2, 0.72) 0%, rgba(38, 1, 2, 0.06) 45%, rgba(38, 1, 2, 0.12) 100%);
  pointer-events: none;
}
.tile--flyers-text {
  position: absolute;
  left: clamp(24px, 2.6vw, 42px);
  bottom: clamp(22px, 3vh, 34px);
  right: clamp(24px, 2.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.tile--flyers-text .tile__label { color: rgba(255, 247, 238, 0.8); margin: 0; }
.tile--flyers-text .tile__big { color: var(--cream); margin: 0; }
.tile--flyers-text .tile__small { color: rgba(255, 247, 238, 0.6); margin: 0; }

/* club conditions — crunched: no clocks, tight rows (2-col overflowed the narrow cell) */
.weather .weather__time { display: none; }
.weather .weather__temp { margin-left: auto; }

/* mini animated weather glyphs — city ......... [glyph] temp */
.weather__icon {
  margin-left: auto;
  margin-right: clamp(8px, 0.9vw, 14px);
  display: flex;
  align-items: center;
}
.weather__icon + .weather__temp { margin-left: 0; }
.weather__icon svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: rgba(255, 247, 238, 0.75);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.wx-rays { transform-origin: 8px 8px; animation: wxSpin 26s linear infinite; }
@keyframes wxSpin { to { transform: rotate(360deg); } }
.wx-cloudpath { animation: wxBob 4.5s ease-in-out infinite alternate; }
@keyframes wxBob { from { transform: translateX(-0.7px); } to { transform: translateX(0.7px); } }
.wx-moonpath { transform-origin: 8px 8px; animation: wxSway 6s ease-in-out infinite alternate; }
@keyframes wxSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.wx-fogmid { animation: wxBob 3.5s ease-in-out infinite alternate; }
.wx-drops line { animation: wxFall 1.3s linear infinite; }
.wx-drops line:nth-child(2) { animation-delay: 0.55s; }
@keyframes wxFall { 0% { transform: translateY(-1.5px); opacity: 0; } 25% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(2.5px); opacity: 0; } }
.wx-flakes circle { animation: wxFall 2.6s linear infinite; }
.wx-flakes circle:nth-child(2) { animation-delay: 1.1s; }
.wx-flash { fill: rgba(255, 247, 238, 0.75); stroke: none; animation: wxFlash 3.8s ease-out infinite; }
@keyframes wxFlash { 0%, 78%, 100% { opacity: 0.35; } 82%, 88% { opacity: 1; } 85% { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) {
  .wx-rays, .wx-cloudpath, .wx-moonpath, .wx-fogmid, .wx-drops line, .wx-flakes circle, .wx-flash { animation: none; }
}

.tile__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.55);
  margin-bottom: 16px;
}
.tile__big {
  text-transform: lowercase;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(20px, 2.6vh, 27px);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 6px;
}
.tile__venue, #venue-city, #partner-note, #press-src, #rule-num, #ambassadors-tile-name { transition: opacity 0.8s ease; }
.tile__venue.is-fading, #venue-city.is-fading, #partner-note.is-fading, #press-src.is-fading, #rule-num.is-fading, #ambassadors-tile-name.is-fading { opacity: 0; }
.tile__small {
  text-transform: lowercase;
  font-size: 13px;
  color: rgba(255, 247, 238, 0.68);
  line-height: 1.55;
}
.tile__link {
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: var(--cream);
  text-decoration: none;
}
.tile__link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* archive tile — photo-backed door into the archive */
.tile--archive {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  background: var(--sienna);
  padding: 0;
  font-family: inherit;
  text-align: left;
  min-height: clamp(210px, 27vh, 300px) !important;
  width: 100%;
}
.tile--archive-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s ease, opacity 0.8s ease;
}
.tile--archive:hover .tile--archive-bg { transform: scale(1.04); opacity: 1; }
.tile--archive-bg.is-dim { opacity: 0 !important; }
.tile--archive-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 1, 2, 0.75) 0%, rgba(38, 1, 2, 0.15) 55%, rgba(38, 1, 2, 0.3) 100%);
  pointer-events: none;
}
.tile--archive-text {
  position: absolute;
  left: clamp(24px, 2.6vw, 42px);
  bottom: clamp(22px, 3vh, 34px);
  right: clamp(24px, 2.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.tile--archive-text .tile__label { color: rgba(255, 247, 238, 0.75); margin: 0; }
.tile--archive-text .tile__big { color: var(--cream); margin: 0; }
.tile--archive-text .tile__small { color: rgba(255, 247, 238, 0.6); margin: 0; }

/* the players tile — portrait door into the series */
.tile--players {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  background: var(--sienna);
  padding: 0;
  font-family: inherit;
  text-align: left;
  grid-row: span 2;
  aspect-ratio: 9 / 16; /* box matches the cards/video exactly — no crop */
  min-height: 0 !important;
  width: 100%;
}
.tile--players-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.5s ease, opacity 0.8s ease;
}
.tile--players:hover .tile--players-bg { transform: scale(1.04); opacity: 1; }
.tile--players-bg.is-dim { opacity: 0 !important; }
.tile--players-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 1, 2, 0.78) 0%, rgba(38, 1, 2, 0.12) 55%, rgba(38, 1, 2, 0.25) 100%);
  pointer-events: none;
}
.tile--players-text {
  position: absolute;
  left: clamp(24px, 2.6vw, 42px);
  bottom: clamp(22px, 3vh, 34px);
  right: clamp(24px, 2.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.tile--players-text .tile__label { color: rgba(255, 247, 238, 0.75); margin: 0; }
.tile--players-text .tile__big { color: var(--cream); margin: 0; }
.tile--players-text .tile__small { color: rgba(255, 247, 238, 0.6); margin: 0; }

/* ambassadors tile — portrait door, mirrors players on the left */
.tile--ambassadors {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  background: var(--sienna);
  padding: 0;
  font-family: inherit;
  text-align: left;
  grid-row: span 2;
  aspect-ratio: 9 / 16;
  min-height: 0 !important;
  width: 100%;
}
.tile--ambassadors-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, 30% center);
  transform: scale(var(--photo-zoom, 1));
  transform-origin: var(--photo-pos, 30% center);
  opacity: 0.92;
  transition: transform 0.5s ease, opacity 0.8s ease;
}
.tile--ambassadors:hover .tile--ambassadors-bg { transform: scale(calc(var(--photo-zoom, 1) * 1.04)); opacity: 1; }
.tile--ambassadors-bg.is-dim { opacity: 0 !important; }
.tile--ambassadors-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(38, 1, 2, 0.78) 0%, rgba(38, 1, 2, 0.12) 55%, rgba(38, 1, 2, 0.25) 100%);
  pointer-events: none;
}
.tile--ambassadors-text {
  position: absolute;
  left: clamp(24px, 2.6vw, 42px);
  bottom: clamp(22px, 3vh, 34px);
  right: clamp(24px, 2.6vw, 42px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.tile--ambassadors-text .tile__label { color: rgba(255, 247, 238, 0.75); margin: 0; }
.tile--ambassadors-text .tile__big { color: var(--cream); margin: 0; }
.tile--ambassadors-text .tile__small { color: rgba(255, 247, 238, 0.6); margin: 0; }

/* cream/sienna host frames — stand in until Taylor drops photos */
.ambassadors-ph {
  display: block;
  background-color: var(--cream);
}
.ambassadors-ph[data-frame="0"] { background: linear-gradient(180deg, var(--cream) 0 58%, var(--sienna) 58%); }
.ambassadors-ph[data-frame="1"] { background: linear-gradient(90deg, var(--sienna) 0 22%, var(--cream) 22%); }
.ambassadors-ph[data-frame="2"] { background: linear-gradient(180deg, var(--sienna) 0 28%, var(--cream) 28% 72%, var(--sienna) 72%); }
.ambassadors-ph[data-frame="3"] { background: linear-gradient(135deg, var(--cream) 0 46%, var(--sienna) 46%); }
.ambassadors-ph[data-frame="4"] { background: linear-gradient(90deg, var(--cream) 0 70%, var(--sienna) 70%); }
.ambassadors-ph[data-frame="5"] { background: linear-gradient(180deg, var(--cream) 0 22%, var(--sienna) 22% 100%); }

/* ============================================================
   Archive overlay + lightbox
   ============================================================ */

.archive {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(20, 8, 5, 0.62);
  backdrop-filter: blur(18px) saturate(0.9);
  -webkit-backdrop-filter: blur(18px) saturate(0.9);
  color: var(--cream);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
  overflow-y: auto;
}
.archive.is-open { opacity: 1; visibility: visible; }
.archive__bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px var(--pad-x);
  background: rgba(20, 8, 5, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 247, 238, 0.18);
}
.archive__title {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.4vh, 24px);
  color: var(--cream);
}
.archive__note {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.5);
}
.archive__back {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: lowercase;
  color: var(--cream);
  padding: 8px 0;
  transition: opacity 0.15s;
}
.archive__back:hover { opacity: 0.6; }
.archive__grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(24px, 4vh, 40px) var(--pad-x) clamp(48px, 8vh, 80px);
  max-width: 1280px;
  margin: 0 auto;
}
.archive__col { flex: 1; min-width: 0; }
.archive__col img {
  width: 100%;
  margin-bottom: 16px;
  border-radius: 3px;
  cursor: zoom-in;
  display: block;
  transition: opacity 0.2s;
}
.archive__col img:hover { opacity: 0.85; }

.ambassadors__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px 22px;
  padding: clamp(24px, 4vh, 40px) var(--pad-x) clamp(48px, 8vh, 80px);
  max-width: 1080px;
  margin: 0 auto;
}
.ambassadors__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.ambassadors__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  background: var(--cream);
}
.ambassadors__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--photo-pos, 50% center);
  transform: scale(var(--photo-zoom, 1));
  transform-origin: var(--photo-pos, 50% center);
  display: block;
}
.ambassadors__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ambassadors__name {
  font-family: var(--font-serif);
  font-size: clamp(18px, 2.2vh, 24px);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.2;
}
.ambassadors__name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}
.ambassadors__name a:hover { color: var(--scarlet); }
.ambassadors__line {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(255, 247, 238, 0.55);
}
@media (max-width: 720px) {
  .ambassadors__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .ambassadors__grid { grid-template-columns: 1fr; }
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(18, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: min(88vw, 1400px);
  max-height: 84vh;
  border-radius: 3px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 247, 238, 0.7);
  font-size: 54px;
  line-height: 1;
  cursor: pointer;
  padding: 20px;
  transition: color 0.15s;
  font-family: var(--font-serif);
}
.lightbox__nav:hover { color: var(--cream); }
.lightbox__prev { left: clamp(4px, 2vw, 30px); }
.lightbox__next { right: clamp(4px, 2vw, 30px); }
.lightbox__close {
  position: absolute;
  top: 24px;
  right: 28px;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  cursor: pointer;
}
.lightbox__close span {
  position: absolute;
  left: 2px;
  top: 50%;
  width: 30px;
  height: 1.5px;
  background: rgba(255, 247, 238, 0.8);
  transition: background 0.15s;
}
.lightbox__close span:nth-child(1) { transform: rotate(45deg); }
.lightbox__close span:nth-child(2) { transform: rotate(-45deg); }
.lightbox__close:hover span { background: var(--cream); }
.lightbox__counter {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.24em;
  color: rgba(255, 247, 238, 0.6);
  font-variant-numeric: tabular-nums;
}

/* weather list */
.weather {
  list-style: none;
  width: 100%;
}
.weather li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 247, 238, 0.14);
}
.weather li:last-child { border-bottom: none; }
.weather__city {
  text-transform: lowercase;
  color: var(--cream);
  font-family: var(--font-serif);
  font-size: clamp(16px, 2vh, 20px);
  font-weight: 500;
}
.weather__time {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: rgba(255, 247, 238, 0.55);
  font-variant-numeric: tabular-nums;
}
.weather__temp {
  font-size: 13px;
  font-weight: 600;
  color: var(--cream);
  min-width: 52px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.weather__note {
  text-transform: lowercase;
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 247, 238, 0.55);
  font-style: italic;
}

/* record stats */
.record {
  display: flex;
  gap: clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
}
.record div { display: flex; flex-direction: column; }
.record strong {
  font-family: var(--font-serif);
  font-size: clamp(24px, 3.2vh, 34px);
  font-weight: 500;
  color: var(--cream);
  line-height: 1.1;
}
.record span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.55);
  margin-top: 4px;
}

@media (max-width: 950px) {
  .menu__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu__logo { height: 40px; }
}
@media (max-width: 620px) {
  .menu__tiles { grid-template-columns: 1fr; }
  .tile { min-height: 0; }
}

/* ============================================================
   Interior pages (shop) — shared chrome
   ============================================================ */

.label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  color: var(--scarlet);
}

.headline {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(34px, 5.2vw, 64px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 18px 0 22px;
}

.btn {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 32px 13px;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn--solid {
  background: var(--scarlet);
  border-color: var(--scarlet);
  color: var(--cream);
}
.btn--solid:hover { background: var(--sienna); border-color: var(--sienna); }
.btn--ghost:hover { background: var(--charcoal); border-color: var(--charcoal); color: var(--cream); }

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 247, 238, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(22, 22, 22, 0.08);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
}
.nav__logo img { height: 30px; width: auto; }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 36px);
  list-style: none;
}
.nav__links a {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--charcoal);
  transition: color 0.15s;
}
.nav__links a:hover { color: var(--scarlet); }
.nav__links a.is-active { color: var(--scarlet); }

.nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--charcoal);
  margin: 5px 0;
  transition: transform 0.2s, opacity 0.2s;
}

@media (max-width: 760px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px var(--pad-x) 28px;
    background: var(--cream);
    border-bottom: 1px solid rgba(22, 22, 22, 0.08);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  body.nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---------- footer (interior pages) ---------- */

.footer {
  background: var(--sienna);
  color: var(--cream);
  padding: clamp(64px, 9vh, 100px) 0 40px;
}
.footer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 247, 238, 0.15);
}
.footer__lockup { width: 190px; }
.footer__cols { display: flex; gap: clamp(40px, 7vw, 90px); flex-wrap: wrap; }
.footer__col h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(255, 247, 238, 0.5);
  margin-bottom: 14px;
}
.footer__col ul { list-style: none; }
.footer__col li { margin-bottom: 8px; }
.footer__col a {
  text-decoration: none;
  font-size: 14px;
  color: rgba(255, 247, 238, 0.85);
  transition: color 0.15s;
}
.footer__col a:hover { color: var(--scarlet); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 28px;
}
.footer__legal {
  font-size: 12px;
  color: rgba(255, 247, 238, 0.45);
  letter-spacing: 0.06em;
}
.footer__move {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  color: var(--cream);
}

/* ============================================================
   Shop page
   ============================================================ */

.shop-hero {
  text-align: center;
  padding: clamp(72px, 11vh, 130px) 0 clamp(40px, 6vh, 64px);
}
.shop-hero p {
  color: rgba(22, 22, 22, 0.65);
  max-width: 440px;
  margin: 0 auto;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: clamp(72px, 11vh, 130px);
}
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .product-grid { grid-template-columns: 1fr; } }

.product {
  background: var(--white);
  border: 1px solid rgba(22, 22, 22, 0.1);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.product__media {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  border-bottom: 1px solid rgba(22, 22, 22, 0.07);
  position: relative;
}
.product__media img { height: 44%; width: auto; opacity: 0.9; }
.product__media--dark { background: var(--sienna); }
.product__media--red { background: var(--scarlet); }
.product__media--ice { background: var(--ice); }
.product__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: var(--charcoal);
  color: var(--cream);
  padding: 5px 10px 4px;
  border-radius: 999px;
}
.product__info { padding: 18px 20px 22px; }
.product__name { font-weight: 600; font-size: 15px; }
.product__price { font-size: 13px; color: rgba(22, 22, 22, 0.55); margin-top: 2px; }

.shop-note {
  text-align: center;
  padding-bottom: clamp(88px, 13vh, 150px);
}
.shop-note p {
  color: rgba(22, 22, 22, 0.65);
  max-width: 460px;
  margin: 0 auto 28px;
}


/* --- menu-open: landing content yields to the glass menu, footer stays --- */
.landing__top, .landing__center, .landing__find, .landing__cities {
  transition: opacity 0.35s ease;
}
body.menu-open .landing__top,
body.menu-open .landing__center,
body.menu-open .landing__find,
body.menu-open .channels-rail,
body.menu-open .landing__cities {
  /* !important so it outranks the rise animations' forwards fill */
  opacity: 0 !important;
  pointer-events: none;
}
/* keep only the foot above the glass menu — raising the whole
   .landing__bottom (find + cities + foot) used to sit over the lower
   menu tiles and swallow clicks on radio / players / archive text */
body.menu-open .landing__bottom { pointer-events: none; }
body.menu-open .landing__foot {
  position: relative;
  z-index: 130;
  pointer-events: auto;
  border-top-color: rgba(255, 247, 238, 0.25);
}
.menu__body { padding-bottom: clamp(90px, 14vh, 140px); }


/* --- the fit board: designed ONCE at ~1600×660 (5 cols: two 9:16
   portraits + flyer 4:5 + two data columns), then scaled as a single
   locked unit. Nothing inside ever reflows, so nothing can ever clip.
   Below the gate (1360w / 720h) the scrolling layout takes over. */
@media (min-width: 1360px) and (min-height: 720px) {
  .menu__logo { height: clamp(42px, 6vh, 54px); }
  .menu__body {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    bottom: 92px;
    max-width: none; /* base 1180px cap clipped the wide board on tall monitors */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    overflow: hidden;
  }
  .menu__tiles {
    flex: none;
    /* the box can never outgrow the window: fits the width, fits the height
       (1600/660 = 2.4242 design aspect), capped a bit past design size */
    width: min(calc(100vw - 64px), calc((100vh - 200px) * 2.4242), 1800px);
    aspect-ratio: 1600 / 660;
    container-type: inline-size; /* 1cqw = board-width/100 — everything inside scales with the box */
    /* cols 1 + 2 + 5 size themselves to their aspect-locked tiles
       (ambassadors 9:16, flyer 4:5, players 9:16) */
    grid-template-columns: auto auto repeat(2, minmax(0, 1fr)) auto;
    /* bottom row runs taller: crunched weather + media tiles need it more than the flyer rows */
    grid-template-rows: 30% 30% 40%;
  }
  .menu__tiles .tile {
    min-height: 0;
    overflow: hidden;
    padding: 1.12cqw 1.5cqw;
  }
  .menu__tiles .tile--archive { min-height: 0 !important; }
  .menu__tiles .tile--radio { min-height: 0 !important; }
  /* ambassadors own the full left edge; flyer + radio sit in col 2;
     players own the full right edge; bottom row = radio / weather / photos */
  .menu__tiles .tile--ambassadors { grid-column: 1; grid-row: 1 / -1; height: 100%; width: auto; min-height: 0 !important; }
  .menu__tiles .tile--flyers { grid-column: 2; grid-row: 1 / 3; height: 100%; width: auto; min-height: 0 !important; }
  .menu__tiles .tile--radio { grid-column: 2; grid-row: 3; }
  .menu__tiles .tile--weather { grid-column: 3; grid-row: 3; }
  .menu__tiles .tile--archive { grid-column: 4; grid-row: 3; }
  .menu__tiles .tile--players { grid-column: 5; grid-row: 1 / -1; height: 100%; width: auto; min-height: 0 !important; }
  /* cqw is board-width/100. the 1600 design makes 1cqw ~30% larger than the
     old 1232 board, which blew up middle-tile type. these values are the
     old 1232 sizes × 1232/1600 (0.77) so track/press/venues/partners/weather
     read at the original size. portrait boxes stay 9:16 — not touched. */
  .menu__tiles .tile__label { font-size: 0.69cqw; margin-bottom: 0.75cqw; }
  .menu__tiles .tile .tile__big { font-size: 1.25cqw; }
  .menu__tiles .tile__small { font-size: 0.82cqw; }
  .menu__tiles .record { gap: 0.5cqw 1.62cqw; }
  .menu__tiles .record strong { font-size: 1.75cqw; }
  .menu__tiles .record span { font-size: 0.69cqw; margin-top: 0.25cqw; }
  .menu__tiles .weather li { font-size: 0.88cqw; padding: 0.32cqw 0; white-space: nowrap; line-height: 1.15; }
  .menu__tiles .weather__city { font-size: 1cqw; } /* base rule carries its own clamp — must scale with the board */
  .menu__tiles .weather__temp { font-size: 0.69cqw; min-width: 0; }
  .menu__tiles .weather__icon { margin-right: 0.62cqw; }
  .menu__tiles .weather__icon svg { width: 0.94cqw; height: 0.94cqw; }
  .menu__tiles .weather__note { font-size: 0.75cqw; margin-top: 0.56cqw; }
  .menu__tiles .tile--weather .tile__label { margin-bottom: 0.5cqw; }
  .menu__tiles .tile--weather { padding-top: 1cqw !important; padding-bottom: 0.88cqw !important; }
  .menu__tiles .tile--radio-text .tile__big { font-size: 1.19cqw; }
  .menu__tiles .tile--radio-text,
  .menu__tiles .tile--flyers-text,
  .menu__tiles .tile--archive-text,
  .menu__tiles .tile--players-text,
  .menu__tiles .tile--ambassadors-text {
    left: 1.5cqw;
    bottom: 1.12cqw;
    right: 1.5cqw;
    gap: 0.38cqw;
  }
  /* door labels must beat later `.tile--*-text .tile__label { margin: 0 }`
     so radio matches the players/ambassadors label→big gap */
  .menu__tiles .tile--radio-text .tile__label,
  .menu__tiles .tile--players-text .tile__label,
  .menu__tiles .tile--ambassadors-text .tile__label { margin-bottom: 0.75cqw; }
}


.tile--wide { grid-column: span 2; }
.tile--wide .tile__small { max-width: 540px; }


/* ============================================================
   Knightcap Radio — tile preview + popup player
   ============================================================ */

.tile--radio {
  min-height: clamp(210px, 27vh, 300px) !important;
  width: 100%;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: none;
  border-right: 1px solid rgba(255, 247, 238, 0.22);
  border-bottom: 1px solid rgba(255, 247, 238, 0.22);
  background: #120404;
  padding: 0 !important;
  font-family: inherit;
  text-align: left;
}
.tile--radio-preview {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tile--radio-preview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  opacity: 0.88;
}
.tile--radio-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 8, 5, 0.8) 0%, rgba(20, 8, 5, 0.15) 55%, rgba(20, 8, 5, 0.3) 100%);
  pointer-events: none;
}
.tile--radio-text {
  position: absolute;
  left: clamp(20px, 2.2vw, 36px);
  bottom: clamp(16px, 2.2vh, 26px);
  right: clamp(20px, 2.2vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1;
}
.tile--radio-text .tile__label { color: rgba(255, 247, 238, 0.75); margin: 0; }
.tile--radio-text .tile__big { color: var(--cream); margin: 0; font-size: clamp(17px, 2.3vh, 24px); }
.tile--radio-text .tile__small { color: rgba(255, 247, 238, 0.6); margin: 0; }
.tile--radio:hover .tile--radio-preview video { opacity: 1; }

.radio {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(12, 3, 2, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.radio.is-open { opacity: 1; visibility: visible; }
.radio__frame {
  width: min(88vw, 1080px);
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.9);
}
.radio__frame iframe { width: 100%; height: 100%; border: 0; }
.radio__eps, .players__eps { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; }
.radio__ep, .players__ep {
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.55);
  padding: 6px 0;
  transition: color 0.15s;
}
.radio__ep:hover, .players__ep:hover { color: var(--cream); }
.radio__ep.is-active, .players__ep.is-active {
  color: var(--cream);
  border-bottom: 1px solid var(--scarlet);
}

/* the players — vertical series popup */
.players {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(12, 3, 2, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}
.players.is-open { opacity: 1; visibility: visible; }
.players__frame {
  height: min(76vh, 820px);
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  border-radius: 4px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.9);
}
.players__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}





/* --- sound nudge: tiny live equalizer beside the volume button --- */
.landing__foot-right {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.sound-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(13px, 1.7vh, 15px);
  color: rgba(255, 247, 238, 0.85);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}
.sound-tip.is-on { opacity: 1; }
.eq {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 13px;
}
.eq i {
  width: 2.5px;
  height: 30%;
  background: var(--cream);
  border-radius: 1px;
  animation: eq-dance 1.15s ease-in-out infinite;
}
.eq i:nth-child(1) { animation-delay: 0s; }
.eq i:nth-child(2) { animation-delay: 0.22s; }
.eq i:nth-child(3) { animation-delay: 0.09s; }
.eq i:nth-child(4) { animation-delay: 0.32s; }
@keyframes eq-dance {
  0%, 100% { height: 30%; }
  50% { height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; height: 60%; }
}


/* --- channel rail: numbered, right edge --- */
.channels-rail {
  position: absolute;
  right: clamp(20px, 3vw, 46px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: clamp(16px, 2.8vh, 26px);
}
.channel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255, 247, 238, 0.38);
  text-align: right;
  transition: color 0.4s ease;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
}
.channel:hover { color: var(--scarlet); }
.channel.is-active { color: var(--cream); }
.channel.is-active:hover { color: var(--scarlet); }
.rail__num {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(17px, 2.3vh, 21px);
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 0px;
  transition: font-size 0.35s ease, gap 0.35s ease;
}
.rail__num::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 1.5px;
  background: var(--scarlet);
  transition: width 0.35s ease, margin-left 0.35s ease;
  margin-left: 0;
}
.channel.is-active .rail__num {
  font-size: clamp(27px, 3.6vh, 33px);
}
.channel.is-active .rail__num::after {
  width: clamp(20px, 2vw, 30px);
  margin-left: 12px;
}
.rail__name {
  font-family: var(--font-sans);
  font-size: clamp(11px, 1.3vh, 12.5px);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: rgba(255, 247, 238, 0.8);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  white-space: nowrap;
}
.channel.is-active .rail__name {
  max-height: 44px;
  opacity: 1;
}
.rail__sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: rgba(255, 247, 238, 0.6);
  margin-top: 3px;
}
@media (max-width: 720px) {
  .channels-rail {
    position: relative; /* anchors the centered reveal */
    right: auto;
    top: auto;
    transform: none;
    margin: 28px auto 0;
    padding-bottom: 26px;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 14px 40px;
  }
  .channel { position: static; align-items: center; text-align: center; }
  .rail__num::after, .channel.is-active .rail__num::after { display: none; }
  /* reveal centers under the whole row (anchoring to the active button read lopsided) */
  .rail__name {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    top: calc(100% - 20px);
    left: 50%;
    transform: translateX(-50%);
    max-height: none;
  }
  .channel.is-active .rail__name { max-height: none; }
}


/* --- shop page header: mirrors the landing chrome --- */
.shop-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: clamp(20px, 3.2vh, 34px) var(--pad-x) 14px;
  border-bottom: 1px solid rgba(22, 22, 22, 0.1);
}
.shop-top__back, .shop-top__spacer {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--charcoal);
  transition: opacity 0.2s;
}
.shop-top__back:hover { opacity: 0.55; }
.shop-top__spacer { visibility: hidden; }
.shop-top__logo { height: clamp(44px, 6.5vh, 56px); width: auto; margin-top: -6px; }
@media (max-width: 560px) {
  .shop-top__logo { height: 40px; }
}

/* --- weather skeleton shimmer --- */
.skel {
  color: transparent !important;
  min-width: 74px;
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(255,247,238,0.1) 25%, rgba(255,247,238,0.28) 50%, rgba(255,247,238,0.1) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}
.weather__temp { transition: opacity 0.5s ease; }


/* mobile: the menu scrolls, so the landing footer must yield (desktop keeps it) */
@media (max-width: 949px) {
  body.menu-open .landing__foot {
    opacity: 0 !important;
    pointer-events: none;
  }
}


/* shop page copy follows the lowercase voice */
.shop-hero .headline, .shop-hero p, .product__info, .shop-note p, .btn { text-transform: lowercase; }