/* =========================================
   Ten Count Cast — Global Styles (Centered Header + Orange Tint)
   ========================================= */

:root{
  --bg:#0B0B0B;
  --fg:#FFFFFF;
  --yellow:#ffde59;
  --orange:#eaaa0c;
  --border:#1E1E1E;

  --fg-dim:rgba(255,255,255,.85);
  --fg-mute:rgba(255,255,255,.65);
  --fg-faint:rgba(255,255,255,.6);

  --accent: var(--yellow);
  --accent-strong: #ffb52e;
}

/* Base Reset */
*{ box-sizing:border-box; }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible{
  outline:2px solid var(--yellow);
  outline-offset:2px;
}

/* Layout */
.container{ width:100%; max-width:1100px; margin:0 auto; padding:0 16px; }

/* ===== Center the main content ===== */
main{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* =========================
   Header (Centered Split Nav)
   ========================= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(234,170,12,0.08);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(234,170,12,0.25);
  box-shadow:0 1px 10px rgba(234,170,12,0.1);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  min-height:72px;
}

/* ===== Brand (centered absolutely) ===== */
.brand{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.25rem .35rem;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.2px;
  z-index:10;
}
.brand:focus-visible{ box-shadow:0 0 0 3px rgba(255,222,89,.35); }
.brand-mark{
  display:block; width:48px; height:auto; transition:transform .12s ease;
}
.brand:hover .brand-mark,
.brand:focus-visible .brand-mark{
  transform:translateY(-1px);
}

/* ===== Navigation groups (left/right) ===== */
.nav-group{
  display:flex;
  align-items:center;
  gap:1.25rem;
  z-index:5;
}
.nav-left{ margin-right:auto; }
.nav-right{ margin-left:auto; }

.nav-link{
  color:var(--fg-dim);
  padding:.35rem .5rem;
  border-radius:10px;
  background:rgba(234,170,12,0.05);
  transition:background .2s ease,color .2s ease;
  font-weight:600;
  letter-spacing:.03em;
}
.nav-link:hover,
.nav-link:focus-visible{
  color:#fff;
  background:rgba(234,170,12,0.2);
}
.nav-link[aria-disabled="true"]{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}
.nav-link[aria-current="page"]{
  color:var(--yellow);
  font-weight:700;
}

/* ===== Responsive handling ===== */
@media (max-width:780px){
  .header-inner{
    flex-direction:column;
    justify-content:center;
    padding-block:8px;
  }
  .brand{
    position:static;
    transform:none;
    margin:12px 0;
  }
  .nav-group{
    justify-content:center;
    flex-wrap:wrap;
    gap:.75rem 1.5rem;
  }
}


/* =========================
   Hero / Typography
   ========================= */
.hero{ padding:56px 0; }
.hero h1{ font-size:clamp(28px,5vw,44px); margin:0 0 12px; }

.lede,
.lede-points,
.promo-video,
.footnote{
  max-width:60ch;
  margin-left:auto;
  margin-right:auto;
}

.lede{ color:var(--fg-dim); line-height:1.55; }
.footnote{ margin-top:8px; color:var(--fg-faint); font-size:12px; }

.lede-points{
  list-style:none; margin:16px 0 0; padding:0;
  font-size:1.05rem; line-height:1.6;
}
.lede-points li{ margin:0 0 .6rem; }
.lede-points li:last-child{ margin-top:.8rem; font-weight:600; }

/* Promo video */
.promo-video{
  width:100%;
  margin:16px auto 12px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 0 10px rgba(234,170,12,0.15);
}
.promo-video__el{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
@media (prefers-reduced-motion: reduce){
  .promo-video__el{ transition:none; }
}

/* Buttons */
.btn-primary{
  display:inline-block;
  margin-top:16px;
  padding:10px 16px;
  border-radius:14px;
  font-weight:700;
  background:var(--yellow);
  color:#0B0B0B;
  transition:background .15s ease, transform .1s ease, box-shadow .15s ease;
  box-shadow:0 4px 12px rgba(234,170,12,0.2);
}
.btn-primary:hover{
  background:var(--orange);
  box-shadow:0 6px 18px rgba(234,170,12,0.3);
}
.btn-primary:active{ transform:translateY(1px); }

/* =========================
   Discord Banner
   ========================= */
.full-bleed{
  width:100%;
  margin:0;
  padding:0;
  background:rgba(234,170,12,0.06);
}
.discord-cta-wrap{ margin:28px 0 24px; }
.discord-cta{
  display:block;
  width:100%;
  text-decoration:none;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-strong) 100%);
  color:#0B0B0B;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em;
  text-align:center;
  padding: clamp(14px, 3.3vw, 22px) clamp(10px, 2vw, 16px);
  border-top:4px solid rgba(234,170,12,0.35);
  border-bottom:4px solid rgba(234,170,12,0.35);
  transition: transform 120ms ease, box-shadow 120ms ease, background 180ms ease;
  box-shadow: 0 6px 18px rgba(255, 159, 28, 0.22);
}
.discord-cta:hover,
.discord-cta:focus{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(255, 159, 28, .28);
}
.discord-cta__inner{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:clamp(16px, 2.2vw, 24px);
  line-height:1.2;
}
.discord-cta__label{ white-space:nowrap; }
.discord-cta__sub{
  font-weight:700;
  text-transform:none;
  opacity:.9;
  font-size:clamp(12px,1.6vw,16px);
}
.discord-cta svg{
  width:clamp(18px, 2.4vw, 26px);
  height:auto;
  fill:#0B0B0B;
}
@media (min-width:768px){
  .discord-cta-wrap{ margin:36px 0 32px; }
}

/* =========================
   Sections & Hints
   ========================= */
.section{ padding:28px 0 64px; }
.section h2{ font-size:22px; margin:0 0 10px; }
.hint{ color:var(--fg-faint); margin-bottom:12px; }

/* Admin notes */
.admin-note,.hint-admin{ display:none !important; }
body.admin .admin-note, body.admin .hint-admin{
  display:block !important;
  background:rgba(255,222,89,.08);
  border-left:3px solid var(--yellow);
  padding:.6rem 1rem; margin:1rem 0;
  font-style:italic; color:var(--yellow);
  font-size:.95rem; line-height:1.5;
}
body.admin .admin-note::before, body.admin .hint-admin::before{
  content:"ADMIN NOTE:"; display:block; font-weight:700; color:var(--orange); margin-bottom:.25rem;
}

/* =========================
   Playlists
   ========================= */
.playlist-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(320px,1fr));
  justify-items:center;
}
.playlist-card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px;
  background:rgba(255,255,255,.02);
  text-align:left;
  box-shadow:0 0 12px rgba(234,170,12,0.06);
}
.playlist-embed{
  width:100%;
  height:352px;
  border:0;
  border-radius:12px;
  overflow:hidden;
}

/* =========================
   Footer
   ========================= */
.site-footer{
  border-top:1px solid var(--border);
  padding:20px 0;
  color:var(--fg-mute);
  background:rgba(234,170,12,0.03);
}
.site-footer a{ text-decoration:underline; text-underline-offset:3px; }

/* =========================
   Header de-duplication kill switch
   ========================= */
.site-header{ display:none !important; }
#primary-header.site-header{ display:block !important; }

/* === FINAL OVERRIDE: promo video same width as text === */
.hero .promo-video {
  box-sizing:border-box;
  display:block;
  width:100% !important;
  max-width:60ch !important;
  margin:16px auto 12px !important;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#000;
}
.hero .promo-video__el {
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:16 / 9;
  object-fit:cover;
}
.hero .lede,
.hero .lede-points,
.hero .footnote {
  max-width:60ch !important;
  margin-left:auto;
  margin-right:auto;
}