/* ════════════════════════════════════════════════
   BeeP — mQuest Movies  |  style.css
   Palette: navy #001030 · crimson #c02020 · gold #D4A24C · bone #F2EFE6
   Fonts: Oswald (display) · Fraunces italic (editorial) · Inter (UI)
   ════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #050d1a; color: #F2EFE6; font-family: 'Inter', sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
html, body { max-width: 100%; overflow-x: hidden; }
/* Background gradient */
.site-bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, #001030 0%, #0b1a34 28%, #241418 52%, #3a0c0c 72%, #050d1a 100%);
  /*background: linear-gradient(180deg, #1f49ca 0%, #681bb5 28%, #ac0971 52%, #ba0874 72%, #fb0018 100%); */
   /*background: linear-gradient(180deg, #1f49ca 0%, #263dba 28%, #482cba 52%, #e30346 72%, #3437c2 100%);*/
  opacity: .7;
}
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── NAV ─────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 5vw;
  background: linear-gradient(180deg, rgba(5,13,26,.95), transparent);
  backdrop-filter: blur(4px);
}
/*.logo { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: .05em; }
.logo span { color: #c02020; }*/
.nav-logo {
  height: 48px;
  width: auto;
  display: block;
}

/* Nav logo — remove duplicate */
.logo { display: none; } /*looks like wrong solution by claude. remove later*/

.nav-links { display: flex; gap: 1.6rem; font-size: .74rem; }
.nav-links a { text-transform: uppercase; letter-spacing: .08em; opacity: .75; transition: opacity .2s, color .2s; white-space: nowrap; }
.nav-links a:hover { opacity: 1; color: #D4A24C; }
.nav-toggle { display: none; background: none; border: none; color: #F2EFE6; font-size: 1.4rem; cursor: pointer; }

@media (max-width: 820px) {
  .nav-links {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 300px);
    background: #050d1a; flex-direction: column; justify-content: center;
    gap: 1.6rem; padding: 2rem; transform: translateX(100%);
    transition: transform .35s; border-left: 1px solid rgba(242,239,230,.12); z-index: 99;
  }
  .nav-links.open { transform: translateX(0); }
  .nav-toggle { display: block; }
}

/* ── HERO ────────────────────────────────────── */
/*.hero {
  min-height: 100vh; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; text-align: center;
  padding: 0 5vw 64px; position: relative; overflow: hidden;
}*/
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /*anchored to bottom. earlier was center*/
  align-items: center;
  text-align: center;
  padding: 80px 5vw 48px;
  position: relative;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center bottom; background-repeat: no-repeat; /*background-position: center 30%; earlier spev*/
}
.hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(5,13,26,.12) 0%, rgba(5,13,26,.06) 30%, rgba(5,13,26,.72) 68%, rgba(5,13,26,.97) 100%);
}

.hero-title-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1.2rem; /*increse this to lift beep title higher along with presents and tagline*/
}
.hero-title-block .tagline {
  margin-top: 0;
}
/*.hero-content { position: relative; z-index: 2; }*/
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow { font-family: 'Oswald', sans-serif; letter-spacing: .22em; text-transform: uppercase; font-size: .68rem; color: #001030; margin-bottom: .55rem; }
/*.hero-title {
  font-family: 'Oswald', sans-serif; font-weight: 700;
  font-size: clamp(4.5rem, 16vw, 11rem); line-height: .84;
  background: linear-gradient(180deg, #F2EFE6 0%, #D4A24C 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}*/
.hero-title-img {
  max-width: min(180px, 40vw);
  height: auto;
  display: block;
  margin: 0 auto;
}
.tagline { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(.9rem, 1.9vw, 1.35rem); opacity: .9; margin-top: .75rem; }
.genre-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .38rem; margin-top: 1.2rem; max-width: 540px; margin-left: auto; margin-right: auto; }
.tag { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(242,239,230,.15); border-radius: 100px; opacity: .7; }
.hero-cta { display: flex; gap: .7rem; margin-top: 1.6rem; flex-wrap: wrap; justify-content: center; }
.release-pill { margin-top: 1.3rem; font-family: 'Oswald', sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: .66rem; color: #D4A24C; border: 1px dashed rgba(212,162,76,.4); padding: 5px 14px; border-radius: 100px; display: inline-block; }

/* ── BUTTONS ─────────────────────────────────── */
.btn {
  font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; padding: 11px 22px; border-radius: 2px; cursor: pointer;
  transition: transform .2s, background .2s; display: inline-flex; align-items: center; gap: .38rem;
}
.btn-red    { background: #c02020; color: #F2EFE6; border: none; }
.btn-red:hover { background: #d92020; transform: translateY(-2px); }
.btn-outline { border: 1px solid rgba(242,239,230,.18); color: #F2EFE6; background: none; }
.btn-outline:hover { border-color: #D4A24C; color: #D4A24C; transform: translateY(-2px); }
.btn-dashed { border: 1px dashed #D4A24C; color: #D4A24C; background: transparent; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; padding: 11px 22px; border-radius: 2px; cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: .38rem; }
.btn-dashed:hover { background: rgba(212,162,76,.1); transform: translateY(-2px); }
.btn-gold {
  background: #D4A24C;
  color: #050d1a;
  border: 1px solid #D4A24C;
  font-weight: 600;
}
.btn-gold:hover {
  background: #e0b464;
  border-color: #e0b464;
}

/* ── MODAL ───────────────────────────────────── */
.modal { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(5,13,26,.92); backdrop-filter: blur(7px); align-items: center; justify-content: center; padding: 1.5rem; }
.modal.open { display: flex; }
.modal-box { background: #0a1e38; border: 1px solid rgba(242,239,230,.13); padding: 2.2rem; max-width: 400px; width: 100%; position: relative; border-radius: 3px; }
.modal-box h3 { font-family: 'Oswald', sans-serif; font-size: 1.2rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .38rem; }
.modal-box p { font-family: 'Fraunces', serif; font-style: italic; font-size: .86rem; opacity: .72; margin-bottom: 1.2rem; }
.modal-input { width: 100%; background: rgba(242,239,230,.05); border: 1px solid rgba(242,239,230,.15); color: #F2EFE6; font-family: Inter, sans-serif; font-size: .86rem; padding: 10px 12px; margin-bottom: .6rem; border-radius: 2px; outline: none; transition: border-color .2s; }
.modal-input:focus { border-color: #D4A24C; }
select.modal-input {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23D4A24C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

select.modal-input option {
  background: #0b1526;
  color: #F2EFE6;
}
.modal-submit { width: 100%; background: #c02020; color: #F2EFE6; font-family: 'Oswald', sans-serif; text-transform: uppercase; letter-spacing: .08em; font-size: .74rem; padding: 11px; border: none; cursor: pointer; border-radius: 2px; transition: background .2s; }
.modal-submit:hover { background: #d92020; }
.modal-close { position: absolute; top: .85rem; right: .95rem; background: none; border: none; color: #F2EFE6; font-size: 1.2rem; cursor: pointer; opacity: .5; }
.modal-close:hover { opacity: 1; }
.modal-success { display: none; text-align: center; padding: .8rem 0; }
.modal-success p { font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; color: #D4A24C; line-height: 1.6; }
/* ── MODAL CHECKBOX ──────────────────────────── */
.modal-checkbox {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin-bottom: 1rem;
  cursor: pointer;
  font-size: .78rem;
  opacity: .78;
  line-height: 1.5;
}
.modal-checkbox input {
  margin-top: .2rem;
  accent-color: #c02020;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.modal-submit:disabled { opacity: .5; cursor: default; }

/* ── Release CountDown ────────────────────────────── */
.countdown {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin-top: 1.4rem;
  flex-wrap: nowrap;
}
.cd-unit {
  position: relative;
  min-width: 68px;
  padding: 12px 10px 10px;
  background: rgba(5, 13, 26, .55);
  border: 1px solid rgba(212, 162, 76, .28);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  text-align: center;
}
.cd-unit::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(242, 239, 230, .07);
  pointer-events: none;
}
.cd-num {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: clamp(1.6rem, 5.2vw, 2.3rem);
  line-height: 1;
  color: #D4A24C;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 18px rgba(212, 162, 76, .35);
}
.cd-lab {
  font-family: 'Oswald', sans-serif;
  font-size: .54rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .5;
  margin-top: .45rem;
}
.cd-sep {
  align-self: center;
  font-family: 'Oswald', sans-serif;
  font-size: 1.3rem;
  color: rgba(212, 162, 76, .35);
  margin-top: -14px;
}
.cd-secs .cd-num { color: #c02020; }

@media (max-width: 420px) {
  .countdown { gap: 6px; }
  .cd-unit { min-width: 56px; padding: 10px 6px 8px; }
  .cd-lab { font-size: .48rem; letter-spacing: .12em; }
}

/* ── SECTIONS ────────────────────────────────── */
.section { padding: 5.5rem 5vw; position: relative; }
.wrap { max-width: 1160px; margin: 0 auto; }
.section-head { display: flex; align-items: baseline; gap: .85rem; margin-bottom: 2.2rem; border-bottom: 1px solid rgba(242,239,230,.12); padding-bottom: .85rem; }
.section-num { font-family: 'Oswald', sans-serif; font-size: .76rem; color: #c02020; letter-spacing: .1em; }
.section-title { font-family: 'Oswald', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(1.35rem, 2.8vw, 2.1rem); }

/* ── SYNOPSIS ────────────────────────────────── */
.synopsis-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
@media (max-width: 860px) { .synopsis-grid { grid-template-columns: 1fr; } }
.synopsis-text p { font-family: 'Fraunces', serif; font-size: 1.06rem; line-height: 1.78; opacity: .92; margin-bottom: 1.2rem; }
.concept-box { background: rgba(242,239,230,.04); border: 1px solid rgba(242,239,230,.13); border-left: 3px solid #D4A24C; padding: 1.7rem; }
.concept-label { font-family: 'Oswald', sans-serif; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #D4A24C; margin-bottom: .72rem; display: block; }
.concept-box p { font-size: .9rem; line-height: 1.65; opacity: .85; margin-bottom: .78rem; }
.concept-tagline { font-family: 'Oswald', sans-serif; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: #D4A24C; opacity: .78; display: block; margin-top: .28rem; }

/* ── STATS ───────────────────────────────────── */
.stats-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(242,239,230,.12); border-bottom: 1px solid rgba(242,239,230,.12); }
@media (max-width: 580px) { .stats-strip { grid-template-columns: 1fr; } }
.stat { padding: 1.8rem 1rem; text-align: center; border-right: 1px solid rgba(242,239,230,.12); }
.stat:last-child { border-right: none; }
.stat-num { font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; line-height: 1; display: block; }
.stat-lbl { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #D4A24C; margin-top: .35rem; display: block; }

/* ── WATCH ───────────────────────────────────── */
.watch-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.5rem; }
@media (max-width: 860px) { .watch-grid { grid-template-columns: 1fr; } }
.video-frame { border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; background: #000; border: 1px solid rgba(242,239,230,.12); }
.video-frame iframe { width: 100%; height: 100%; border: none; display: block; }
.video-label { font-family: 'Oswald', sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: #D4A24C; margin-top: .6rem; display: block; }

/*.watch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}*/

/* ── BMS ─────────────────────────────────────── */
.bms-block { max-width:620px; margin:0 auto; text-align:center; }
.bms-line { font-family:'Fraunces',serif; font-style:italic; font-weight:300;
  font-size:clamp(1rem,2.9vw,1.16rem); line-height:1.75; opacity:.85; margin-bottom:1.8rem; }
.bms-line strong { font-style:normal; font-weight:400; color:#D4A24C; }
.bms-btn { display:inline-block; font-size:.86rem; padding:14px 32px; }
.bms-note { margin-top:1.2rem; font-family:'Oswald',sans-serif; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.14em; opacity:.45; }

/* ── HUB ─────────────────────────────────────── */
.hub-section { padding: 5rem 0; background: rgba(0,0,0,.14); }
.hub-header { padding: 0 5vw; margin-bottom: .3rem; }
.hub-title { font-family: 'Oswald', sans-serif; font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2.1rem); text-transform: uppercase; }
.hub-caption { font-family: 'Fraunces', serif; font-style: italic; font-size: .9rem; opacity: .6; margin-top: .28rem; }

/* ── COVERFLOW ───────────────────────────────── */
#cf-wrap { position: relative; padding: 1.8rem 0 0; }
#cf-stage {
  position: relative;
  height: clamp(200px, 52vw, 500px);
  perspective: 1600px;
  perspective-origin: 50% 50%;
  overflow: visible;
}
.cf-card {
  position: absolute;
  left: 50%; top: 0;
  width: min(960px, 86vw);
  margin-left: max(-480px, -43vw);
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.65);
  background: #0a1020;
  transition: transform .6s cubic-bezier(.22,.68,0,1.01), opacity .6s, filter .6s;
}
.cf-card img { width: 100%; height: auto; display: block; aspect-ratio: 16/9; object-fit: cover; }
.cf-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.4), transparent 10%); pointer-events: none; }
.cf-badge { position: absolute; top: 14px; left: 14px; font: 600 9px ui-monospace, Menlo, monospace; letter-spacing: .05em; color: rgba(255,255,255,.9); background: rgba(0,0,0,.55); padding: 3px 8px; border-radius: 4px; }
.cf-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px 20px 20px; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, transparent 100%); opacity: 0; transition: opacity .35s; }
.cf-card:hover .cf-info { opacity: 1; }
.cf-info-cat { font-family: 'Oswald', sans-serif; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: rgba(212,162,76,.9); margin-bottom: 5px; }
.cf-info-title { font-family: 'Fraunces', serif; font-size: 17px; font-weight: 500; line-height: 1.25; margin-bottom: 11px; }
.cf-btn { display: inline-flex; align-items: center; gap: 6px; background: #c02020; color: white; font-family: 'Oswald', sans-serif; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 16px; border-radius: 3px; text-decoration: none; }
.cf-btn:hover { background: #d92020; }
.cf-btn-muted { background: transparent; color: rgba(242,239,230,.45); cursor: default; }
#cf-prev, #cf-next {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 200;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: white; font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .2s;
}
#cf-prev { left: 20px; }
#cf-next { right: 20px; }
#cf-prev:hover, #cf-next:hover { background: rgba(192,32,32,.65); }
#cf-dots { display: flex; justify-content: center; gap: 6px; padding: .85rem 0 .2rem; }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; border: none; cursor: pointer; padding: 0; background: rgba(242,239,230,.28); transition: all .25s; }
.cf-dot.active { background: #c02020; width: 24px; border-radius: 4px; }

/* ── HORIZONTAL ROWS ─────────────────────────── */
.row-section { margin-top: 3rem; }
.row-header { display: flex; align-items: baseline; gap: .6rem; padding: 0 5vw; margin-bottom: .85rem; }
.row-label { font-family: 'Oswald', sans-serif; font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; }
.row-count { font-family: 'Oswald', sans-serif; font-size: .6rem; color: #D4A24C; opacity: .55; }
.row-track { display: flex; gap: .8rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 5vw .5rem; }
.row-track::-webkit-scrollbar { display: none; }

/* ── HORIZONTAL SCROLL HINT ──────────────────── */
/*
.row-wrap {
  position: relative;
}
.row-wrap::after {
  content: '›';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: rgba(242,239,230,.7);
  background: linear-gradient(to right, transparent, rgba(5,13,26,.85) 60%);
  pointer-events: none;
  transition: opacity .3s;
  z-index: 2;
}
.row-wrap.scrolled-end::after {
  opacity: 0;
}*/

/* ── HORIZONTAL SCROLL HINT ──────────────────── */
.row-wrap {
  position: relative;
}
/*.row-wrap::after {
  content: '›';
  position: absolute;
  right: 5vw;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  color: rgba(242,239,230,.55);
  pointer-events: none;
  transition: opacity .3s;
  z-index: 2;
  opacity: 0;
}*/
.row-wrap::after {
  content: '›';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(242,239,230,.8);
  background: linear-gradient(to right, transparent, rgba(5,13,26,.45));
  pointer-events: none;
  transition: opacity .3s;
  z-index: 2;
  opacity: 0;
}

.row-wrap.has-scroll::after {
  opacity: 1;
}
.row-wrap.scrolled-end::after {
  opacity: 0;
}

/* ── HCARD (film / talks / gallery) ─────────── */
.hcard { flex: 0 0 220px; scroll-snap-align: start; border: 1px solid rgba(242,239,230,.13); border-radius: 4px; overflow: hidden; background: rgba(242,239,230,.02); transition: border-color .22s, transform .22s; }
.hcard:hover { border-color: #D4A24C; transform: translateY(-3px); }
.hcard-thumb { position: relative; overflow: hidden; background: #0a1020; }
.hcard-thumb img { width: 100%; height: auto; display: block; transition: transform .4s; }
.hcard:hover .hcard-thumb img { transform: scale(1.04); }
.play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(5,13,26,.22); font-size: 1.3rem; opacity: 0; transition: opacity .2s; }
.hcard:hover .play-icon { opacity: 1; }
.hcard-info { padding: .7rem .85rem .75rem; }
.hcard-cat { font-family: 'Oswald', sans-serif; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #c02020; margin-bottom: .22rem; display: block; }
.hcard-title { font-family: 'Fraunces', serif; font-size: .84rem; line-height: 1.35; margin-bottom: .5rem; opacity: .9; }
.hcard-actions { display: flex; align-items: center; gap: .35rem; border-top: 1px solid rgba(242,239,230,.12); padding-top: .5rem; }
.action-btn { display: flex; align-items: center; gap: .25rem; font-size: .7rem; background: none; border: none; color: #F2EFE6; opacity: .6; cursor: pointer; padding: 3px 4px; border-radius: 3px; transition: opacity .18s, background .18s; font-family: Inter, sans-serif; }
.action-btn:hover { opacity: 1; background: rgba(242,239,230,.08); }
.action-btn.liked { color: #c02020; opacity: 1; }
.heart { transition: transform .18s; display: inline-block; }
.action-btn.liked .heart { transform: scale(1.2); }
.share-feedback { margin-left: auto; font-size: .64rem; color: #D4A24C; opacity: 0; transition: opacity .3s; }
.share-feedback.show { opacity: 1; }

/* Likes: personal favourite only, no public count */
.like-count { display: none; }
.like-btn .heart { font-size: .95rem; }

/* ── TEAM CARDS ──────────────────────────────── */
.team-card { flex: 0 0 185px; scroll-snap-align: start; border: 1px solid rgba(242,239,230,.13); border-radius: 4px; overflow: hidden; background: rgba(242,239,230,.02); transition: border-color .22s, transform .22s; }
.team-card:hover { border-color: #D4A24C; transform: translateY(-3px); }
.team-photo { overflow: hidden; background: linear-gradient(135deg, rgba(0,16,48,.85), rgba(40,8,8,.8)); }
.team-photo img { width: 100%; height: auto; display: block; }
.team-photo-icon { padding: 2.2rem 0; font-size: 2rem; opacity: .22; text-align: center; }
.team-info { padding: .78rem .88rem; }
.team-role { font-family: 'Oswald', sans-serif; font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: #c02020; margin-bottom: .18rem; display: block; }
.team-name { font-family: 'Fraunces', serif; font-size: .88rem; margin-bottom: .15rem; line-height: 1.3; }
.team-char { font-family: 'Oswald', sans-serif; font-size: .65rem; color: #D4A24C; letter-spacing: .04em; margin-bottom: .25rem; opacity: .85; }
.team-bio { font-size: .66rem; opacity: .6; line-height: 1.44; }
.team-claims { margin-top: .38rem; padding-top: .38rem; border-top: 1px solid rgba(242,239,230,.12); font-size: .6rem; opacity: .48; line-height: 1.6; }
.team-claims div { padding: .1rem 0; }

/* ── REMIND strip ────────────────────────────── */
/*.remind-strip { display: flex; justify-content: center; padding: 1.4rem 5vw 0; }*/
.remind-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 5vw 0;
  flex-wrap: wrap;
}

/* ── ABOUT ───────────────────────────────────── */
.about-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-quote { border: 1px solid rgba(242,239,230,.13); padding: 2rem; background: rgba(242,239,230,.03); }
.quote-text { font-family: 'Fraunces', serif; font-size: 1.25rem; font-style: italic; line-height: 1.5; margin-bottom: .85rem; }
.quote-attr { font-family: 'Oswald', sans-serif; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: #D4A24C; }
.about-text p { font-size: .9rem; line-height: 1.75; opacity: .88; margin-bottom: 1rem; }

/* ── NEWS ────────────────────────────────────── */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 860px) { .news-grid { grid-template-columns: 1fr; } }
.news-card { border: 1px solid rgba(242,239,230,.13); padding: 1.4rem; transition: border-color .2s, transform .2s; }
.news-card:hover { border-color: #D4A24C; transform: translateY(-3px); }
.news-date { font-family: 'Oswald', sans-serif; font-size: .6rem; letter-spacing: .1em; color: #c02020; text-transform: uppercase; display: block; margin-bottom: .5rem; }
.news-card h3 { font-family: 'Fraunces', serif; font-size: .96rem; margin-bottom: .48rem; line-height: 1.4; }
.news-card p { font-size: .76rem; opacity: .6; line-height: 1.5; }

.news-card-live { display:block; transition:transform .28s, border-color .28s; }
.news-card-live:hover { transform:translateY(-3px); border-color:rgba(212,162,76,.5); }
.news-date-live { color:#D4A24C; }
.news-date-live::before { content:'● '; color:#c02020; }
.news-cta { display:inline-block; margin-top:.9rem; font-family:'Oswald',sans-serif;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:#D4A24C; }
.news-inline { color:#D4A24C; border-bottom:1px solid rgba(212,162,76,.4); }

/* ── FOOTER ──────────────────────────────────── */
footer { padding: 3.8rem 5vw 2.2rem; border-top: 1px solid rgba(242,239,230,.12); }
.footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.2rem; margin-bottom: 2rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 1.6rem; } }
.footer-label { font-family: 'Oswald', sans-serif; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: #D4A24C; margin-bottom: .78rem; }
.footer-grid a, .footer-grid p { display: block; font-size: .82rem; opacity: .7; margin-bottom: .44rem; }
.footer-grid a:hover { color: #c02020; opacity: 1; }
.footer-social { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.footer-social svg { width: 14px; height: 14px; fill: currentColor; opacity: .6; flex-shrink: 0; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .7rem; padding-top: 1.4rem; border-top: 1px solid rgba(242,239,230,.12); font-size: .7rem; opacity: .42; }

/* ── COMMENTS SECTION ────────────────────────── */
.comments-inner { max-width: 560px; }
.comments-text { font-family: 'Fraunces', serif; font-size: 1.06rem; line-height: 1.78; opacity: .88; margin-bottom: 1.6rem; }
.comments-btn { font-size: .88rem; padding: 14px 28px; }
.comments-note { margin-top: .85rem; font-size: .76rem; opacity: .45; }

/* ── LIGHTBOX ────────────────────────────────── */
.lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(0,8,24,.94);backdrop-filter:blur(6px);padding:4vh 4vw;}
.lightbox.open{display:flex;}
.lb-inner{width:100%;max-width:1100px;}
.lb-stage{width:100%;background:#000;border:1px solid rgba(242,239,230,.12);border-radius:4px;overflow:hidden;}
.lb-stage.lb-video{aspect-ratio:16/9;}
.lb-stage.lb-video iframe{width:100%;height:100%;border:none;display:block;}
.lb-stage.lb-image{background:transparent;border:none;text-align:center;}
.lb-stage.lb-image img{max-width:100%;max-height:82vh;display:block;margin:0 auto;border-radius:4px;}
.lb-caption{font-family:'Oswald',sans-serif;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:#D4A24C;margin-top:.8rem;text-align:center;}
.lb-close{position:absolute;top:1.2rem;right:1.4rem;background:none;border:none;color:#F2EFE6;
  font-size:2.2rem;line-height:1;cursor:pointer;padding:.2rem .6rem;}
.lb-close:hover{color:#D4A24C;}

/* Row cards read as clickable */
.row-track .hcard{cursor:pointer;}
.row-track .hcard:focus-visible{outline:2px solid #D4A24C;outline-offset:3px;}

/* Play icon — stronger, and visible without hover on touch */
.play-icon{font-size:1.9rem;text-shadow:0 2px 12px rgba(0,0,0,.6);}
@media (hover:none){
  .play-icon{opacity:1;background:rgba(5,13,26,.30);}
}