/* RAGÉIRE — single-page cinematic site (Plesk-ready)
   - Hero background + grain + anti-banding gradients
   - Gentle scroll snap (proximity) + header offset (via JS)
   - Subtle section cross-fade (IntersectionObserver)
   - Mobile nav toggle
   - Media: one shared audio element + 7 cover cards (hover desktop, tap mobile)
*/

:root{
  --bg:#050607;
  --ink:#f2efe7;
  --muted:rgba(242,239,231,.78);
  --line:rgba(242,239,231,.35);
  --line-strong:rgba(242,239,231,.60);
  --shadow:rgba(0,0,0,.65);

  --panel: rgba(0,0,0,.34);
  --panel-2: rgba(0,0,0,.46);
  --stone: rgba(150,140,120,.92);
  --aurora1: rgba(80, 180, 140, .22);
  --aurora2: rgba(60, 140, 120, .18);
  --aurora3: rgba(120, 210, 190, .14);
  --aurora4: rgba(80, 110, 70, .14);
  --glow: rgba(120, 220, 190, .22);
  --glow2: rgba(90, 180, 140, .18);

  --auroraPulse: 0;
  --auroraShift: 0;
  --mx: 0%;
  --my: 0%;
}



*{box-sizing:border-box;}
html, body{height:100%;}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top:96px; /* updated by JS */
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  overflow-x:hidden;
}

/* Elegant serif */
.brand-title{
  font-family:"Cinzel","Cormorant Garamond","Times New Roman",serif;
  letter-spacing:.08em;
  font-weight:500;
  text-transform:uppercase;
}

/* Global micro-grain overlay to dither gradients (anti-banding) */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:5;

  /* Grain/dither overlay to prevent gradient banding */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 220px 220px;
  opacity: .20;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce){
  body::before{ opacity: .14; }
}

/* ===== Header ===== */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:50;
  padding:18px 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18), rgba(0,0,0,0));
  backdrop-filter: blur(2px);
}

.header-left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:120px;
}

.mini-mark{
  width:10px;height:10px;
  border:1px solid var(--line);
  transform:rotate(45deg);
  opacity:.9;
}

.header-name{
  font-family:"Cinzel",serif;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  color:var(--muted);
}

/* Nav (matches CTA style) */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav a{
  text-decoration:none;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;

  padding:12px 16px;
  border:1px solid var(--line-strong);
  border-radius:2px;
  background:rgba(0,0,0,.20);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);

  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}

.nav a:hover{
  transform: translateY(-1px);
  border-color: rgba(242,239,231,.82);
  background: rgba(0,0,0,.32);
  color: var(--ink);
  box-shadow:
    0 18px 60px rgba(0,0,0,.22),
    0 0 18px var(--glow),
    0 0 34px var(--glow2);
}
.nav a.is-active{
  color: var(--ink);
  border-color: rgba(242,239,231,.92);
  background: rgba(255,255,255,.04);
}

/* Mobile nav panel */
@media (max-width: 840px){
  .site-header{ padding: 14px 14px; }
  .nav{ display:flex; }

  .nav-toggle{ display:inline-flex; align-items:center; gap:10px; }
  body.nav-open .nav{
    display:flex;
    position:fixed;
    left:14px; right:14px;
    top:64px;
    padding:14px;
    background: rgba(0,0,0,.62);
    border: 1px solid rgba(242,239,231,.18);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    box-shadow: 0 22px 80px rgba(0,0,0,.55);
    justify-content:center;
    z-index:60;
  }
  .nav a{ padding: 11px 12px; font-size: 11px; }
}

/* ===== Sections ===== */
.section{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 110px 18px 70px;
  position:relative;
  isolation:isolate;

  scroll-snap-align:start;
  scroll-snap-stop: always;

  opacity:.92;
  transform: translateY(6px);
transition: opacity .7s ease, transform .7s ease;
}
.section.in-view{
  opacity:1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .section{ transition:none; transform:none; opacity:1; }
}

/* Home background */
/* Home background — aurora haze (HD + low banding) */
#home::before{
  content:"";
  position:absolute; inset:0;

  /* Multi-layer aurora with a tighter central burst + gentle motion */
  background:
    radial-gradient(560px 420px at calc(50% + var(--mx)) calc(34% + var(--my)),
      rgba(170, 255, 235, calc(.11 + (var(--auroraPulse) * .06))),
      rgba(0,0,0,0) 62%
    ),
    radial-gradient(920px 680px at 50% 42%,
      rgba(255,255,255,.06),
      rgba(0,0,0,0) 66%
    ),
    radial-gradient(760px 560px at calc(28% + (var(--auroraShift) * 1%)) 18%,
      rgba(90, 210, 170, calc(.050 + (var(--auroraPulse) * .020))),
      rgba(0,0,0,0) 64%
    ),
    radial-gradient(860px 620px at calc(74% - (var(--auroraShift) * 1%)) 28%,
      rgba(120, 235, 205, calc(.045 + (var(--auroraPulse) * .016))),
      rgba(0,0,0,0) 66%
    ),
    radial-gradient(940px 720px at 46% 78%,
      rgba(85, 135, 95, calc(.040 + (var(--auroraPulse) * .013))),
      rgba(0,0,0,0) 70%
    ),
    radial-gradient(720px 560px at 18% 70%,
      rgba(70, 140, 125, calc(.032 + (var(--auroraPulse) * .011))),
      rgba(0,0,0,0) 68%
    ),
    linear-gradient(to bottom,
      rgba(0,0,0,.30),
      rgba(0,0,0,.95)
    );

  filter: saturate(1.20) contrast(1.04);
  z-index:-2;
  transform: translateZ(0);
}

/* Soft vignette */


#home::after{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(closest-side, rgba(0,0,0,0) 55%, rgba(0,0,0,.65) 100%),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.03), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.02), rgba(0,0,0,0) 55%);
  opacity:.50;  animation: auroraDrift 10s ease-in-out infinite;

  z-index:-1;
  pointer-events:none;
}

.section-inner{
  text-align:center;
  max-width: 980px;
  width: 100%;
  padding: 24px 18px;
}

.hero-sub{
  margin: 0 0 26px;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.hero-title{
  letter-spacing: .08em;
  font-weight: 600;
  text-shadow:
    0 3px 10px rgba(0,0,0,.65),
    0 0 14px rgba(120,220,190,.08);
}

/* CTA */
.cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 22px;
  border:1px solid var(--line-strong);
  color: var(--stone);
  background: rgba(0,0,0,.25);
  text-decoration:none;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size:12px;
  border-radius:2px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}
.cta:hover{
  transform: translateY(-1px);
  border-color: rgba(242,239,231,.8);
  background: rgba(0,0,0,.38);
}
.cta:focus-visible,
.nav a:focus-visible,
.nav-toggle:focus-visible{
  outline: 2px solid rgba(242,239,231,.55);
  outline-offset: 3px;
}

/* Non-home backgrounds */
#media, #news, #contact{
  background:
    radial-gradient(1200px 800px at 50% 15%, rgba(255,255,255,.055), rgba(0,0,0,0) 62%),
    radial-gradient(900px 700px at 20% 60%, rgba(255,255,255,.028), rgba(0,0,0,0) 60%),
    radial-gradient(900px 700px at 80% 70%, rgba(255,255,255,.020), rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(0,0,0,.94), rgba(0,0,0,.985));
}

/* Panels */
.panel{
  width: min(980px, 100%);
  border: 1px solid rgba(242,239,231,.14);
  background: var(--panel);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
}
.panel h2{
  margin:0 0 12px;
  font-family:"Cinzel",serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-weight:500;
  font-size:22px;
}
.panel p, .panel li{
  color:var(--muted);
  line-height:1.7;
}

/* ===== Media: audio strip ===== */
.audio-strip{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  overflow-x:auto;
  padding: 10px 2px 14px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.audio-strip::-webkit-scrollbar{ height: 8px; }
.audio-strip::-webkit-scrollbar-thumb{
  background: rgba(242,239,231,.14);
  border-radius: 999px;
}

.track-card{
  flex: 0 0 auto;
  width: 200px;
  scroll-snap-align: start;

  border: 1px solid rgba(242,239,231,.14);
  background: var(--panel-2);
  border-radius: 14px;
  overflow:hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
  user-select:none;
}
.track-card:hover{
  transform: translateY(-2px);
  border-color: rgba(242,239,231,.36);
  background: rgba(0,0,0,.55);
}

.track-art{
  height: 132px;
  background: rgba(255,255,255,.03);
  background-size: cover;
  background-position: center;
  position:relative;
}
.track-art::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 65%);
}

.track-meta{ padding: 12px 12px 14px; }
.track-title{
  margin:0 0 6px;
  font-family:"Cinzel",serif;
  font-weight:500;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size: 12px;
}
.track-sub{
  margin:0;
  font-size: 11px;
  letter-spacing: .10em;
  color: rgba(242,239,231,.68);
  text-transform: uppercase;
}
.track-state{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  color: rgba(242,239,231,.72);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pill{
  padding: 6px 8px;
  border: 1px solid rgba(242,239,231,.18);
  border-radius: 999px;
  background: rgba(0,0,0,.22);
}
.track-card.is-playing{ border-color: rgba(242,239,231,.62); }
.track-card.is-playing .pill{
  border-color: rgba(242,239,231,.55);
  background: rgba(255,255,255,.06);
}
@media (max-width: 520px){
  .track-card{ width: 168px; }
  .track-art{ height: 118px; }
}

/* News image */
.news-cover{
  max-width:420px;
  width:100%;
  border-radius:12px;
  margin:16px auto;
  display:block;
  box-shadow:0 22px 80px rgba(0,0,0,.55);
}

/* Footer */
.site-footer{
  text-align:center;
  padding:40px 18px;
  color:rgba(242,239,231,.55);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
}

/* ===== Fix: prevent audio player from overflowing (mobile/Android) ===== */
audio{ width:100%; max-width:100%; display:block; }
.panel{ overflow:hidden; }
#shared-audio{ width:100% !important; max-width:100% !important; }

/* Header actions wrapper */
.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* Menu button styled like nav buttons */
.menu-btn{
  appearance:none;
  border:1px solid var(--line-strong);
  background:rgba(0,0,0,.20);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:12px 16px;
  border-radius:2px;
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  cursor:pointer;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease;
}
.menu-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,239,231,.82);
  background: rgba(0,0,0,.34);
  color: var(--ink);
}
.menu-btn:focus-visible{
  outline: 2px solid rgba(242,239,231,.55);
  outline-offset: 3px;
}

@keyframes auroraDrift{
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: .52; }
  50%  { transform: translateY(-10px) translateX(8px) scale(1.02); opacity: .66; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: .52; }
}

/* Clean header nav (4 buttons only) */
.header-nav{
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
}

/* Mobile tightening overrides */
@media (max-width: 520px){
  .header-nav{ gap: 8px; }
  .nav a{
    padding: 10px 10px;
    font-size: 10px;
    letter-spacing: .18em;
  }
}


/* ===== Cross-fade (reinstated + consistent) =====
   Start slightly muted, then lift to full when in view.
   Works with JS IntersectionObserver + scroll fallback.
*/
.section{
  opacity: .82;
  transform: translateY(8px);
  transition: opacity .65s ease, transform .65s ease;
  will-change: opacity, transform;
}
.section.in-view{
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce){
  .section{ transition:none; transform:none; opacity:1; }
}

/* Section aurora sheen (subtle, avoids banding, reacts to scroll variables) */
#news::before, #media::before, #contact::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(717px 526px at calc(50% + (var(--auroraShift) * .6%)) 18%,
      rgba(80, 200, 160, calc(.07 + (var(--auroraPulse) * .05))),
      rgba(0,0,0,0) 66%),
    radial-gradient(804px 628px at calc(60% - (var(--auroraShift) * .6%)) 70%,
      rgba(120, 235, 205, calc(.05 + (var(--auroraPulse) * .04))),
      rgba(0,0,0,0) 72%);
  mix-blend-mode: screen;
  opacity: .55;
}

/* Hero title refinement */
.hero-title{
  letter-spacing: .08em;
  font-weight: 600;
  text-shadow:
    0 3px 10px rgba(0,0,0,.65),
    0 0 14px rgba(120,220,190,.08);
}

.hero-title{
  transform: translateZ(0) scale(1.015);
}

/* Media – Video strip (add unlimited videos) */
.video-strip{
  margin-top: 28px;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 1200px){
  .video-strip{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 720px){
  .video-strip{
    grid-template-columns: 1fr;
    gap: 20px;
  }
}
.video-item{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.video-item iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Hero width alignment */
.section-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.hero-title{
  width: 100%;
  text-align:center;
  font-size: clamp(54px, 8.2vw, 108px);
}
.hero-sub{
  width: 100%;
  text-align:center;
  max-width: 34ch;
}
@media (max-width: 520px){
  .hero-title{ font-size: clamp(46px, 11vw, 74px); }
}

/* ===== Media: mechanical video reel (step-through) ===== */
.video-mech{
  margin-top: 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(0,0,0,.34);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.video-mech-head,
.video-mech-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 14px;
  background: linear-gradient(to bottom, rgba(255,255,255,.04), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(242,239,231,.10);
}

.video-mech-foot{
  border-top: 1px solid rgba(242,239,231,.10);
  border-bottom: 0;
  background: linear-gradient(to top, rgba(255,255,255,.03), rgba(0,0,0,0));
}

.mech-label{
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
}

.mech-buttons{
  display:flex;
  gap: 10px;
}

.mech-btn{
  width: 40px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(242,239,231,.16);
  background: rgba(0,0,0,.25);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 12px 36px rgba(0,0,0,.25);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.mech-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(242,239,231,.40);
  background: rgba(0,0,0,.34);
}
.mech-btn:active{
  transform: translateY(0px) scale(.985);
}

.video-reel{
  height: min(72vh, 720px);
  background: rgba(0,0,0,.25);
}

.video-reel-track{
  height: 100%;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.video-reel-slot{
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  position: relative;
}

/* "detent" guides */
.video-reel-slot::before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 14px;
  border: 1px solid rgba(242,239,231,.09);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.40);
  pointer-events:none;
}

.video-reel-slot .video-item{
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  box-shadow: 0 24px 70px rgba(0,0,0,.42);
}

/* Ticks + hint */
.mech-ticks{
  display:flex;
  gap: 6px;
  align-items:center;
}
.mech-ticks .tick{
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: rgba(242,239,231,.14);
}
.mech-hint{
  font-size: 11px;
  color: rgba(242,239,231,.55);
}

/* Mobile tweaks */
@media (max-width: 720px){
  .video-reel{ height: min(66vh, 560px); }
  .video-reel-slot{ padding: 12px; }
  .mech-hint{ display:none; }
}

/* ===== Reel: spinning wheel illusion (transform-driven) ===== */
.video-reel{
  height: min(72vh, 720px);
  background: rgba(0,0,0,.25);
  overflow: hidden; /* hide slots during spin */
  position: relative;
}

/* Track becomes a transform-driven belt (no scrolling) */
.video-reel-track{
  height: 100%;
  overflow: hidden !important;
  scroll-snap-type: none !important;
  -webkit-overflow-scrolling: auto !important;
  overscroll-behavior: none !important;
  will-change: transform, filter;
  transition: transform .55s cubic-bezier(.2,.85,.18,1), filter .55s ease;
}

/* Each slot is exactly reel height */
.video-reel-slot{
  height: 100%;
  padding: 14px;
}

/* Optional: center "window" gloss line to feel mechanical */
.video-reel::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: rgba(242,239,231,.10);
  transform: translateY(-.5px);
  pointer-events:none;
}
/* While spinning, slightly blur for motion */
.video-reel-track.is-spinning{
  filter: blur(.6px);
}

/* ===== Landscape video reel window ===== */
.video-reel{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  height: auto; /* override previous vh-based height */
}

/* Ensure slots match landscape window */
.video-reel-slot{
  height: 100%;
}

/* Mobile: slightly taller but still landscape */
@media (max-width: 720px){
  .video-reel{
    max-width: 100%;
    aspect-ratio: 16 / 9;
  }
}

/* Ensure reel track stacks all slots vertically */
.video-reel-track{
  display: flex;
  flex-direction: column;
}

/* Reel index indicators */
.video-mech-foot{
  justify-content: center;
}

.reel-index{
  display:flex;
  gap:8px;
}

.reel-index span{
  width:6px;
  height:6px;
  border-radius:50%;
  background: rgba(242,239,231,.25);
  transition: transform .25s ease, background .25s ease;
}

.reel-index span.active{
  background: rgba(242,239,231,.85);
  transform: scale(1.4);
}

/* ===== Reel interaction grips (so iframe doesn't steal scroll) ===== */
.video-reel{ position: relative; }
.reel-grip{
  position:absolute;
  pointer-events:auto;
  background: rgba(0,0,0,0); /* invisible */
  z-index: 5;
}
.reel-grip-top{ left:0; right:0; top:0; height: 16%; }
.reel-grip-bottom{ left:0; right:0; bottom:0; height: 16%; }
.reel-grip-left{ top:16%; bottom:16%; left:0; width: 10%; }
.reel-grip-right{ top:16%; bottom:16%; right:0; width: 10%; }

/* Small visible cues on hover (desktop) */
@media (hover:hover){
  .reel-grip-left:hover, .reel-grip-right:hover{
    background: linear-gradient(to right, rgba(255,255,255,.04), rgba(0,0,0,0));
  }
  .reel-grip-right:hover{
    background: linear-gradient(to left, rgba(255,255,255,.04), rgba(0,0,0,0));
  }
}

/* Force landscape window reliably */
.video-reel{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  height: auto;
  overflow: hidden;
}

/* ===== Audio strip clarity ===== */
.media-audio-head{
  width:100%;
  max-width:1100px;
  margin:10px auto;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.media-audio-title{
  font-size:11px;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}
.media-audio-meta{
  font-size:12px;
  color:rgba(242,239,231,.6);
}
.audio-strip-wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
}
.audio-strip-wrap::before,
.audio-strip-wrap::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width:56px;
  z-index:3;
  pointer-events:none;
}
.audio-strip-wrap::before{
  left:0;
  background:linear-gradient(to right, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.audio-strip-wrap::after{
  right:0;
  background:linear-gradient(to left, rgba(0,0,0,.85), rgba(0,0,0,0));
}
.strip-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:34px;
  height:34px;
  border-radius:10px;
  border:1px solid rgba(242,239,231,.14);
  background:rgba(0,0,0,.28);
  color:var(--ink);
  cursor:pointer;
  z-index:4;
}
.strip-nav.left{ left:10px; }
.strip-nav.right{ right:10px; }

/* ===== Video Reel Carousel ===== */
.video-carousel{
  max-width: 1100px;
  margin: 34px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.reel-counter{
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(242,239,231,.65);
}

.video-window{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border: 1px solid rgba(242,239,231,.10);
}

.video-track{
  height: 300%;
  transform: translateY(0%);
  transition: transform 0.52s cubic-bezier(.2,.85,.18,1);
  will-change: transform;
}

.video-slot{
  height: 33.3333%;
}

.video-slot iframe{
  width: 100%;
  height: 100%;
  border: 0;
}

.reel-btn{
  width: 44px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(242,239,231,.25);
  background: rgba(0,0,0,.35);
  color: #E6E2D9;
  cursor: pointer;
  font-size: 14px;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.reel-btn:hover{
  background: rgba(0,0,0,.50);
  border-color: rgba(242,239,231,.40);
  transform: translateY(-1px);
}
.reel-btn:active{
  transform: translateY(0px) scale(.985);
}

@media (max-width: 720px){
  .video-carousel{ margin-top: 26px; }
  .video-window{ border-radius: 14px; }
}

/* ===== Video Reel Carousel override: reliable switching (no belt height quirks) ===== */
.video-window{
  position: relative;
}

.video-track{
  position: absolute;
  inset: 0;
  height: 100% !important;
}

.video-slot{
  position: absolute;
  inset: 0;
  height: 100% !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.video-slot.active{
  opacity: 1;
  pointer-events: auto;
}

/* ===== Audio strip arrows ===== */
.audio-strip-wrap{
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
}
.audio-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(242,239,231,.18);
  background: rgba(0,0,0,.35);
  color: #E6E2D9;
  font-size: 18px;
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.audio-arrow.left{ left: 8px; }
.audio-arrow.right{ right: 8px; }
.audio-strip{ padding: 6px 48px; }


/* ===== CRT utility (optional): wrap any image/video in .crt-frame to get a curved, noisy tube look ===== */
.crt-frame{
  position:relative;
  display:inline-block;
  border-radius: 22px;
  overflow:hidden;
  background: rgba(10,12,12,.75);
  box-shadow:
    0 22px 60px rgba(0,0,0,.55),
    0 0 0 1px rgba(242,239,231,.16),
    inset 0 0 0 1px rgba(0,0,0,.55);
  transform: translateZ(0);
}

.crt-frame > img,
.crt-frame > video,
.crt-frame > canvas{
  display:block;
  width:100%;
  height:auto;
  transform: perspective(900px) rotateX(1.2deg) scale(1.02);
  border-radius: 26px;
  filter: contrast(1.06) saturate(1.05);
}

/* Scanlines + vignette */
.crt-frame::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.00) 0px,
      rgba(0,0,0,.00) 2px,
      rgba(0,0,0,.12) 3px
    ),
    radial-gradient(closest-side, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  mix-blend-mode: multiply;
  opacity: .65;
}

/* Noise + subtle roll */
.crt-frame::after{
  content:"";
  position:absolute; inset:-10%;
  pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 320px 320px;
  opacity:.20;
  mix-blend-mode: overlay;
  animation: crtRoll 3.8s linear infinite;
}

@keyframes crtRoll{
  0%{ transform: translateY(-6%); }
  100%{ transform: translateY(6%); }
}

@media (prefers-reduced-motion: reduce){
  .crt-frame::after{ animation:none; opacity:.14; }
}


/* ===== CRT Feature Panel ===== */
.crt-feature{
  max-width: 980px;
  margin: 18px auto 0;
  text-align: center;
}
.crt-feature .panel-title{
  margin: 0 0 10px;
  font-family:"Cinzel",serif;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: 12px;
  opacity:.9;
}
.crt-feature .small{ font-size: 12px; letter-spacing:.06em; }


/* ===== Home hero spacing tweak ===== */
#home.section{
  padding-top: 86px; /* title higher */
}
#home .hero-title{
  margin: 0 0 6px; /* tighter to subtext */
}
#home .hero-sub{
  margin: 0 0 18px; /* bring closer under title */
}


/* ===== Archival Transmissions TV ===== */
.tv-set{
  width: min(980px, 100%);
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 18px;
  align-items: center;
  margin: 10px auto 0;
}
@media (max-width: 720px){
  .tv-set{ grid-template-columns: 1fr; }
}

.tv-screen{
  position: relative;
  border-radius: 26px;
  padding: 14px;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.28));
  border: 1px solid rgba(242,239,231,.20);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

.tv-screen::before{
  content:"";
  position:absolute; inset:-6px;
  border-radius: 30px;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(120,220,190,.18), rgba(0,0,0,0) 60%),
    radial-gradient(80% 70% at 30% 80%, rgba(80,180,140,.12), rgba(0,0,0,0) 65%);
  filter: blur(8px);
  z-index:-1;
}

.tv-screen .video-track{ position: relative; }
.tv-screen iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  border-radius: 18px;
  display:block;
}

/* Glass + scanline roll */
.scanline-roll{
  position:absolute; inset:14px;
  border-radius: 18px;
  pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.04) 0px,
      rgba(255,255,255,.04) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px);
  opacity:.14;
  mix-blend-mode: overlay;
  animation: scanRoll 3.2s linear infinite;
}
@keyframes scanRoll{
  0%{ background-position: 0 0; }
  100%{ background-position: 0 48px; }
}
.screen-glass{
  position:absolute; inset:14px;
  border-radius: 18px;
  pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.12), rgba(0,0,0,0) 55%),
    radial-gradient(80% 80% at 20% 80%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
  opacity:.65;
}

/* Knob */
.tv-knob{
  position: relative;
  height: 220px;
  display: grid;
  place-items: center;
  padding: 12px 8px;
  border-radius: 22px;
  background: rgba(0,0,0,.30);
  border: 1px solid rgba(242,239,231,.18);
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}
.knob-face{
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), rgba(0,0,0,0) 45%),
    radial-gradient(circle at 50% 65%, rgba(0,0,0,.65), rgba(0,0,0,.10) 60%),
    linear-gradient(180deg, rgba(242,239,231,.16), rgba(0,0,0,.20));
  border: 1px solid rgba(242,239,231,.22);
  box-shadow: inset 0 10px 18px rgba(0,0,0,.45), 0 14px 40px rgba(0,0,0,.45);
  transform: rotate(0deg);
}
.knob-face::after{
  content:"";
  position:absolute;
  width: 8px; height: 18px;
  border-radius: 4px;
  background: rgba(242,239,231,.62);
  top: 10px; left: 50%;
  transform: translateX(-50%);
  opacity:.85;
}
.knob-range{
  position:absolute;
  inset:0;
  opacity:0;
  cursor: pointer;
}
.knob-labels{
  display:flex;
  gap: 10px;
  margin-top: 10px;
  color: rgba(242,239,231,.75);
  font-size: 11px;
  letter-spacing:.22em;
}


/* ===== Aural Artefacts refinement ===== */
#audio h2{
  font-family:"Cinzel","Cormorant Garamond","Times New Roman",serif;
  letter-spacing:.32em;
  text-transform:uppercase;
  font-weight:600;
  font-size: clamp(18px, 2.2vw, 24px);
  margin-bottom: 14px;
  text-shadow:
    0 4px 16px rgba(0,0,0,.65),
    0 0 18px rgba(120,220,190,.08);
}

#audio .muted.small{
  letter-spacing:.14em;
  opacity:.85;
}


/* ===== Homepage ceremonial refinement ===== */
#home .hero-title{
  font-size: clamp(38px, 6vw, 64px);
  letter-spacing:.12em;
  text-shadow:
    0 6px 22px rgba(0,0,0,.75),
    0 0 28px rgba(120,220,190,.10);
}

#home .hero-sub{
  font-size: 13px;
  letter-spacing:.30em;
  opacity:.85;
  margin-top: 4px;
}

#home .cta{
  margin-top: 22px;
}


/* ===== Header nav single-line fit ===== */
.header-nav{
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
}
.header-nav::-webkit-scrollbar{ display:none; } /* WebKit */
.header-nav a{
  white-space: nowrap;
  flex: 0 0 auto;
}

/* tighten further on small screens so all links fit one line */
@media (max-width: 560px){
  .header-nav{ gap: 6px; }
  .nav a{
    padding: 9px 8px;
    font-size: 9px;
    letter-spacing: .14em;
  }
}


/* ===== Retro TV Cabinet ===== */
.retro-tv{
  width: min(1040px, 100%);
  margin: 8px auto 0;
}
.retro-tv__cabinet{
  display:grid;
  grid-template-columns: 1fr 170px;
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border-radius: 28px;
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.22));
  border: 1px solid rgba(242,239,231,.18);
  box-shadow: 0 34px 95px rgba(0,0,0,.60);
}
@media (max-width: 760px){
  .retro-tv__cabinet{
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.retro-tv__screen{
  position: relative;
  border-radius: 26px;
  overflow: hidden;
}

/* Ensure the CRT frame contains the video properly */
.retro-tv__screen iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display:block;
  border-radius: 18px;
}

/* Video slot transitions (reuse existing .video-slot rules, but ensure present) */
.retro-tv__video-track{
  position: relative;
}

/* Controls column */
.retro-tv__controls{
  border-radius: 22px;
  padding: 14px 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(242,239,231,.16);
  display:flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
}
.tv-knob-stack{
  display:flex;
  flex-direction: column;
  gap: 14px;
  align-items:center;
}
.tv-knob{
  width: 100%;
  display:grid;
  place-items:center;
  padding: 10px 8px 12px;
  border-radius: 18px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(242,239,231,.14);
}
.tv-knob .knob-caption{
  margin-top: 10px;
  font-family:"Cinzel",serif;
  letter-spacing:.22em;
  text-transform: uppercase;
  font-size: 10px;
  opacity:.82;
}
.tv-knob .knob-labels{
  margin-top: 8px;
  display:flex;
  gap: 10px;
  justify-content:center;
  color: rgba(242,239,231,.70);
  font-size: 11px;
  letter-spacing:.22em;
}
.tv-knob.deco .knob-range{ display:none; }
.deco-face{ opacity:.9; filter:saturate(.9); }

.tv-grille{
  height: 84px;
  border-radius: 16px;
  background:
    repeating-linear-gradient(to right,
      rgba(242,239,231,.08) 0 2px,
      rgba(0,0,0,0) 2px 7px);
  border: 1px solid rgba(242,239,231,.12);
  opacity:.65;
}

/* Make the knob input occupy the whole knob tile but stay invisible */
.tv-knob .knob-range{
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
}

/* If CRT frame styles exist, improve for embedded video */
.crt-frame{
  background: rgba(0,0,0,.18);
}


/* ===== CRT iframe support (retro TV) ===== */
.retro-tv__screen.crt-frame{
  display:block;        /* override inline-block shrink-to-fit */
  width:100%;
}
.crt-frame > iframe{
  display:block;
  width:100%;
  aspect-ratio: 16/9;
  border:0;
  transform: perspective(900px) rotateX(1.2deg) scale(1.02);
  border-radius: 26px;
  filter: contrast(1.06) saturate(1.05);
}

/* Retro TV sizing tune */
.retro-tv{ width: min(920px, 100%); }
.retro-tv__cabinet{
  grid-template-columns: 1fr 150px;
  padding: 14px;
}
@media (max-width: 760px){
  .retro-tv__cabinet{ padding: 12px; }
}

/* Smaller knobs */
.retro-tv__controls .knob-face{
  width: 72px;
  height: 72px;
}
.retro-tv__controls .tv-knob{
  padding: 8px 8px 10px;
}
.retro-tv__controls .knob-caption{
  margin-top: 8px;
  font-size: 9px;
  letter-spacing:.20em;
}


/* ===== Horizontal video carousel (Visuals page) ===== */
.video-window.is-horizontal{
  aspect-ratio: 16 / 9;
}
.video-track.is-horizontal{
  display:flex;
  width: 300%;
  height: 100%;
  transform: translateX(0%);
}
.video-track.is-horizontal .video-slot{
  flex: 0 0 33.3333%;
  height: 100%;
}
.video-track.is-horizontal .video-slot iframe{
  width:100%;
  height:100%;
}
/* Controls under video */
.video-controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
  margin-top: 12px;
}
.video-controls .reel-btn{
  width: 44px;
  height: 36px;
}


/* ===== Visuals page sizing ===== */
.visuals-title{
  font-size: clamp(30px, 4.8vw, 46px);
  letter-spacing: .10em;
  margin: 0 0 8px;
}
#archival.section{
  padding-top: 96px; /* consistent with other sections + header */
}


/* ===== Horizontal carousel display override ===== */
.video-track.is-horizontal .video-slot{
  display:block !important; /* allow sliding: show all slots */
}


/* ===== Audio section landing tweak ===== */
#audio.section{
  padding-top: 92px; /* was 110px via .section; tighter landing under header */
}


/* ===== Visuals horizontal carousel hard override ===== */
.video-window.is-horizontal{ aspect-ratio: 16 / 9; }
.video-track.is-horizontal{
  display:flex !important;
  flex-direction: row !important;
  width: 300% !important;
  height: 100% !important;
  transform: translateX(0%);
  transition: transform 0.52s cubic-bezier(.2,.85,.18,1);
  will-change: transform;
}
.video-track.is-horizontal .video-slot{
  flex: 0 0 33.3333% !important;
  height: 100% !important;
  display:block !important; /* important: show all slides for translateX */
}
.video-track.is-horizontal .video-slot iframe{
  width:100%;
  height:100%;
  border:0;
}


/* ===== Ensure Visuals videos visible ===== */
.video-window.is-horizontal{
  position: relative;
  overflow: hidden;
}

.video-track.is-horizontal{
  display: flex;
  flex-direction: row;
  width: 300%;
  height: 100%;
}

.video-track.is-horizontal .video-slot{
  flex: 0 0 33.3333%;
  height: 100%;
}

.video-track.is-horizontal iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ===== Section lift glow ===== */
.section .panel{
  box-shadow:
    0 25px 80px rgba(0,0,0,.55),
    0 0 60px rgba(120,220,190,.05);
}


/* ===== Nav active glow ===== */
.header-nav a.is-active,
.header-nav a:hover{
  box-shadow:
    0 0 14px rgba(120,220,190,.25),
    0 0 28px rgba(120,220,190,.15);
  border-color: rgba(120,220,190,.45);
  transition: box-shadow .25s ease, border-color .25s ease;
}


/* ===== Video window height fallback ===== */
.video-window.is-horizontal{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  height: min(62vh, 620px); /* hard height to guarantee iframe visibility */
  min-height: 240px;
  border-radius: 16px;
}
@media (max-width: 720px){
  .video-window.is-horizontal{
    height: min(46vh, 360px);
    min-height: 220px;
  }
}


/* ===== Visuals reel scroll-snap (iframe-safe) ===== */
/* iOS Safari can fail to paint iframes inside transformed containers.
   Use native horizontal scrolling + scroll-snap for reliability. */
.video-window.reel-scroll{
  width: 100%;
  max-width: 1100px;
  margin: 10px auto 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  border-radius: 16px;
  background: #000;
  border: 1px solid rgba(242,239,231,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
}
.video-track.reel-scroll-track{
  display:flex;
  width: 300%;
  scroll-snap-type: none; /* snap handled by window */
}
.video-track.reel-scroll-track .video-slot{
  flex: 0 0 100%;
  scroll-snap-align: start;
  height: min(62vh, 620px);
  min-height: 240px;
}
@media (max-width: 720px){
  .video-track.reel-scroll-track .video-slot{
    height: min(46vh, 360px);
    min-height: 220px;
  }
}
.video-track.reel-scroll-track .video-slot iframe{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* Hide scrollbar but keep scroll */
.video-window.reel-scroll{
  scrollbar-width: none;
}
.video-window.reel-scroll::-webkit-scrollbar{ display:none; }


/* ===== Section landing (mobile) ===== */
.section{
  scroll-margin-top: 84px; /* ensures anchor lands higher under fixed header */
  padding-top: 92px;       /* was 110px */
}
@media (max-width: 720px){
  .section{
    padding-top: 82px;
    scroll-margin-top: 78px;
  }
}


/* ===== V18 surgical fixes ===== */
/* Prevent iOS/YouTube blanking: no transforms on iframe ancestors */
.video-track.reel-scroll-track{
  transform: none !important;
  height: auto !important;
  transition: none !important;
}

/* Ensure the scroll reel always has a real height */
.video-window.reel-scroll{
  height: min(62vh, 620px);
  min-height: 240px;
}
@media (max-width: 720px){
  .video-window.reel-scroll{
    height: min(46vh, 360px);
    min-height: 220px;
  }
}

/* Section landing: make anchors land higher and avoid centering drift */
.section{
  scroll-margin-top: 78px;
}


/* ===== V18 landing padding override ===== */
.section{
  padding-top: 86px !important; /* override 110px in shorthand; minimal change */
}
@media (max-width: 720px){
  .section{
    padding-top: 78px !important;
  }
}


/* ===== V19 landing + section layout override ===== */
/* Remove vertical centering so sections start at the top and previous section isn't visible */
.section{
  display:block !important;
  place-items: unset !important;
  padding-top: 70px !important;
  scroll-margin-top: 64px !important;
}
@media (max-width: 720px){
  .section{
    padding-top: 62px !important;
    scroll-margin-top: 58px !important;
  }
}

/* Visuals fallback link (only appears if iframe blocked/blank) */
.video-fallback{
  display:inline-block;
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .78;
}
.video-fallback:hover{ opacity: .95; }


/* ===== V20 16:9 enforcement ===== */
/* Hard 16:9 container */
.video-window.reel-scroll{
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: unset !important;
}

/* Each slide fills the 16:9 frame */
.video-track.reel-scroll-track .video-slot{
  height: 100% !important;
}

.video-track.reel-scroll-track .video-slot iframe{
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  display: block;
}


/* ===== V22 surgical fixes ===== */

/* Keep Home hero centered (undo global landing tweaks) */
#home.section{
  display: grid !important;
  place-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* All other sections: start at top, consistent landing */
.section{
  display: block !important;
  padding-top: 64px !important;
  padding-bottom: 60px !important;
  scroll-margin-top: 56px !important;
}
@media (max-width: 720px){
  .section{
    padding-top: 56px !important;
    scroll-margin-top: 52px !important;
  }
}

/* Consistent frame centering */
.section-inner{
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Visuals reel: reliable 16:9 without transforms */
.visuals-panel{ text-align: center; }
.video-window.visuals-reel{
  width: 100%;
  max-width: 1100px;
  margin: 12px auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(242,239,231,.10);
}
/* Hard fallback height for browsers that mishandle aspect-ratio */
@supports not (aspect-ratio: 16 / 9){
  .video-window.visuals-reel{ height: 560px; }
}
@media (max-width: 720px){
  .video-window.visuals-reel{ border-radius: 14px; }
}
#visuals #videoTrack{
  height: 100%;
}
#visuals .video-slot{
  display: none;
  height: 100%;
}
#visuals .video-slot.active{
  display: block;
}
#visuals .video-slot iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
#visuals .video-fallback{
  display: none; /* only show if needed via JS */
}

/* Nav active glow (keep) + ensure active state styles apply */
.header-nav a.is-active{
  box-shadow:
    0 0 14px rgba(120,220,190,.25),
    0 0 28px rgba(120,220,190,.15);
  border-color: rgba(120,220,190,.45);
}


/* ===== Retro vintage reel frame ===== */
/* Keep iframe ancestors transform-free. All styling is via borders/shadows/overlays. */
#visuals .video-window.retro-frame{
  position: relative;
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(20,18,16,.85), rgba(0,0,0,.92));
  border: 1px solid rgba(242,239,231,.16);
  box-shadow:
    0 30px 90px rgba(0,0,0,.65),
    0 0 70px rgba(120,220,190,.06);
  overflow: hidden;
}

/* Outer bezel glow */
#visuals .video-window.retro-frame::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius: 22px;
  background:
    radial-gradient(60% 60% at 50% 25%, rgba(120,220,190,.10), rgba(0,0,0,0) 62%),
    radial-gradient(90% 70% at 20% 85%, rgba(120,220,190,.06), rgba(0,0,0,0) 65%);
  filter: blur(10px);
  opacity:.9;
  pointer-events:none;
  z-index: 0;
}

/* Glass + vignette + scanlines (overlay only) */
#visuals .video-window.retro-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  pointer-events:none;
  z-index: 3;
  background:
    /* subtle scanlines */
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px),
    /* vignette */
    radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%),
    /* glass highlights */
    radial-gradient(120% 90% at 50% 10%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    radial-gradient(80% 80% at 15% 80%, rgba(255,255,255,.06), rgba(0,0,0,0) 60%);
  opacity:.55;
  mix-blend-mode: overlay;
}

/* Make sure iframe sits above base, below overlays */
#visuals .video-window.retro-frame iframe{
  position: relative;
  z-index: 2;
}

/* Optional: tiny 'screw' dots for cabinet vibe */
#visuals .video-window.retro-frame .screw{
  position:absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(242,239,231,.22);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55);
  z-index: 4;
  opacity:.55;
}
#visuals .video-window.retro-frame .screw.tl{ top:10px; left:10px; }
#visuals .video-window.retro-frame .screw.tr{ top:10px; right:10px; }
#visuals .video-window.retro-frame .screw.bl{ bottom:10px; left:10px; }
#visuals .video-window.retro-frame .screw.br{ bottom:10px; right:10px; }



/* ===== Contact CRT Upload ===== */
.contact-crt{
  margin-top: 18px;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.upload-label{
  font-family: "Cinzel", serif;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: 11px;
  opacity: .85;
}

.upload-input{
  width: min(520px, 100%);
  max-width: 520px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(242,239,231,.16);
  background: rgba(0,0,0,.25);
  color: rgba(242,239,231,.88);
}

.crt-tv{
  width: min(380px, 92vw);
}

.crt-tv__bezel{
  padding: 14px;
  border-radius: 22px;
  background:
    radial-gradient(120% 120% at 25% 18%, rgba(255,255,255,.10), rgba(0,0,0,0) 55%),
    linear-gradient(180deg, rgba(28,26,24,.88), rgba(0,0,0,.92));
  border: 1px solid rgba(242,239,231,.18);
  box-shadow:
    0 26px 80px rgba(0,0,0,.60),
    0 0 60px rgba(120,220,190,.06);
}

.crt-tv__screen{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1; /* enforce 1:1 */
  background: #000;
}

/* Uploaded image fits square */
#contactCrtImage{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: contrast(1.08) saturate(1.05);
  transform: perspective(800px) rotateX(1.5deg) scale(1.02);
}

/* Noise + scanlines overlays */
.crt-tv__noise, .crt-tv__scanlines, .crt-tv__vignette{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 3;
}

.crt-tv__scanlines{
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0px,
    rgba(255,255,255,.04) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity: .30;
  mix-blend-mode: overlay;
}

.crt-tv__vignette{
  background: radial-gradient(120% 100% at 50% 45%, rgba(0,0,0,0) 55%, rgba(0,0,0,.62) 100%);
  opacity: .55;
}

.crt-tv__noise{
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.12), rgba(0,0,0,0) 55%),
    radial-gradient(circle at 70% 65%, rgba(255,255,255,.10), rgba(0,0,0,0) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.40'/%3E%3C/svg%3E");
  opacity: 0;
  mix-blend-mode: screen;
  animation: crtStaticBurst 7.8s infinite;
}

/* Intermittent tuning: image dims, noise bursts, then returns */
@keyframes crtStaticBurst{
  0%, 62%, 100% { opacity: 0; }
  66% { opacity: .65; }
  68% { opacity: .90; }
  70% { opacity: .35; }
  72% { opacity: 0; }
}

/* Slight flicker on the whole screen */
#contactCrtScreen{
  animation: crtFlicker 4.6s infinite;
}
@keyframes crtFlicker{
  0%, 100% { filter: brightness(1); }
  3% { filter: brightness(1.02); }
  4% { filter: brightness(.96); }
  6% { filter: brightness(1.01); }
  7% { filter: brightness(.98); }
  52% { filter: brightness(1); }
  53% { filter: brightness(.97); }
  54% { filter: brightness(1.02); }
  55% { filter: brightness(1); }
}


/* ===== V25 CRT size reduction ===== */
.crt-tv{
  width: min(280px, 82vw) !important; /* was 380px */
}

@media (min-width: 900px){
  .crt-tv{
    width: 300px !important;
  }
}


/* ===== V26 CRT further reduction ===== */
.crt-tv{
  width: min(210px, 70vw) !important;  /* ~25% smaller than previous */
}

@media (min-width: 900px){
  .crt-tv{
    width: 220px !important;
  }
}
/* ===== News Page Image Fit ===== */

#news .news-image-wrapper{

  width: 100%;

  max-width: 1100px;

  margin: 20px auto 0;

  text-align: center;

}

#news .news-image-wrapper img{

  width: 100%;

  height: auto;

  max-width: 100%;

  display: block;

  border-radius: 6px;

  box-shadow:

    0 25px 60px rgba(0,0,0,.55),

    0 0 40px rgba(120,220,190,.05);

}/* ===== Desktop centering fix (global) ===== */

/* Keep content centered on wide screens */

.section-inner,

.panel{

  width: 100%;

  max-width: 1100px;

  margin-left: auto !important;

  margin-right: auto !important;

}

/* Some panels may be inside other containers; ensure they don't “stick” left */

.section > .panel{

  margin-left: auto !important;

  margin-right: auto !important;

}

/* If your header nav looks off-centre on desktop */

.site-header .header-nav{

  max-width: 1100px;

  margin-left: auto;

  margin-right: auto;

  padding-left: 18px;

  padding-right: 18px;

}
/* Force every section to center its direct children */

.section > *{

  margin-left: auto;

  margin-right: auto;

}
/* ===== Desktop centering fix (News/Audio/Contact) ===== */

.section-inner{

  width: 100%;

  max-width: 1100px;

  margin-left: auto !important;

  margin-right: auto !important;

}

.section-inner > .panel,

.section > .panel{

  margin-left: auto !important;

  margin-right: auto !important;

}

/* In case any one panel has a stray left offset on desktop */

@media (min-width: 900px){

  #news .panel,

  #audio .panel,

  #contact .panel{

    margin-left: auto !important;

    margin-right: auto !important;

  }

}