:root {
  --bg: #141414;
  --card: #2a2a2a;
  --panel: #181818;
  --red: #e50914;
  --ink: #fff;
  --muted: #b3b3b3;
  --display: "Bebas Neue", Impact, sans-serif;
  --script: "Dancing Script", cursive;
  --sans: "Inter", system-ui, sans-serif;
  --pad: 4%;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }
/* dark scrollbars, red text selection and clear keyboard focus, like the real thing */
* { scrollbar-width: thin; scrollbar-color: #4a4a4a #141414; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #141414; }
::-webkit-scrollbar-thumb { background: #3b3b3b; border-radius: 6px; border: 2px solid #141414; }
::-webkit-scrollbar-thumb:hover { background: #5a5a5a; }
::selection { background: rgba(229, 9, 20, .5); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }
body { background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
img { display: block; }
a { color: inherit; text-decoration: none; }

.brand { font-family: var(--display); color: var(--red); font-size: 32px; letter-spacing: 3px; line-height: 1; }
.brand.big { font-size: 44px; position: absolute; top: 28px; left: var(--pad); }

/* Gate: who's watching */
.gate {
  position: fixed; inset: 0; z-index: 100; background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 24px;
  transition: opacity .6s ease, visibility .6s;
}
.gate.gone { opacity: 0; visibility: hidden; }
.gate h1 { font-weight: 500; font-size: clamp(30px, 5vw, 56px); }
.profiles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(14px, 3vw, 32px); }
.profile { width: clamp(88px, 18vw, 150px); text-align: center; color: var(--muted); transition: color .2s; }
.profile:hover, .profile:focus-visible { color: #fff; }
.profile .avatar { width: 100%; aspect-ratio: 1; border: 3px solid transparent; transition: border-color .2s, transform .2s; }
.profile:hover .avatar, .profile:focus-visible .avatar { border-color: #fff; transform: scale(1.04); }
.profile span { display: block; margin-top: 10px; font-size: clamp(13px, 2.4vw, 18px); }
.profile.shake .avatar { animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.avatar {
  border-radius: 6px; display: grid; place-items: center; font-family: var(--display);
  font-size: clamp(36px, 8vw, 64px); color: #fff; user-select: none;
}
.avatar { position: relative; overflow: hidden; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar.sm { width: 32px; height: 32px; font-size: 20px; border-radius: 4px; }
.a0 { background: linear-gradient(135deg, #e50914, #f4511e); }
.a1 { background: linear-gradient(135deg, #2563eb, #06b6d4); }
.a2 { background: linear-gradient(135deg, #f59e0b, #facc15); }
#gatePass { padding: 12px 16px; border-radius: 4px; border: 1px solid #555; background: #333; color: #fff; text-align: center; font: inherit; }
.gate-msg { min-height: 24px; color: var(--muted); text-align: center; max-width: 420px; }

/* Nav */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 64px; padding: 0 var(--pad);
  display: flex; align-items: center; gap: 28px;
  background: linear-gradient(rgba(0,0,0,.85), transparent); transition: background .3s;
}
.nav.scrolled { background: var(--bg); }
.nav-links { display: flex; gap: 18px; font-size: 14px; color: #e5e5e5; }
.nav-links a:hover { color: var(--muted); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.music { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.12); }
.music:hover { background: rgba(255,255,255,.22); }
#musicLabel { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.eq i { width: 3px; height: 4px; background: var(--red); border-radius: 2px; }
.music.playing .eq i { animation: eq .9s ease-in-out infinite; }
.music.playing .eq i:nth-child(2) { animation-delay: .2s; }
.music.playing .eq i:nth-child(3) { animation-delay: .4s; }
@keyframes eq { 0%,100% { height: 4px; } 50% { height: 14px; } }

/* Billboard */
.billboard {
  position: relative; min-height: 88vh; display: flex; align-items: flex-end; padding: 0 var(--pad) 18vh;
  background: linear-gradient(135deg, #5b0f23, #2b0a24 60%, #141414); background-size: cover; background-position: center top;
}
.billboard::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20,20,20,.9) 0%, rgba(20,20,20,.35) 55%, transparent 100%),
              linear-gradient(0deg, var(--bg) 0%, transparent 40%);
}
.intro { position: fixed; inset: 0; z-index: 95; background: #000; display: grid; place-items: center; text-align: center; transition: opacity .8s ease; }
.intro[hidden] { display: none; }
.intro.done { opacity: 0; }
.intro { overflow: hidden; }
.intro-video { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.intro.use-video .intro-video { display: block; }
.intro.use-video .intro-inner, .intro.use-video .intro-glow { display: none; }
.intro-skip { position: absolute; z-index: 3; right: 20px; bottom: 20px; padding: 6px 16px; font-size: 13px; letter-spacing: .1em; color: #bbb; background: rgba(0,0,0,.45); border: 1px solid #555; border-radius: 4px; }
.intro-skip:hover { color: #fff; border-color: #aaa; }
.intro-inner { position: relative; display: flex; flex-direction: column; align-items: center; z-index: 1; }
.intro-inner svg { height: min(52vh, 360px); width: auto; display: block; overflow: visible; shape-rendering: geometricPrecision; }
.intro-inner p { color: #cfcfcf; letter-spacing: .4em; font-size: 13px; margin-top: 30px; text-align: center; }
.intro-glow { position: absolute; left: 50%; top: 46%; width: min(90vw, 620px); aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(229,9,20,.38) 0%, rgba(229,9,20,.12) 35%, transparent 65%); opacity: 0; pointer-events: none; }
.billboard::before { z-index: 1; }
.bb-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 50%; opacity: 0; transition: opacity 1.2s ease; }
.poster-art[hidden] { display: none; }
.billboard.has-video .bb-video { opacity: 1; }
.bb-sound {
  position: absolute; z-index: 3; right: var(--pad); bottom: 15vh; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6); background: rgba(0,0,0,.35); font-size: 18px; transition: background .2s;
}
.bb-sound:hover { background: rgba(255,255,255,.2); }
.bb-content { position: relative; z-index: 2; max-width: 560px; }

/* Movie-poster collage (right side of the banner) */
.poster-art {
  position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; width: 62%;
  display: grid; gap: 5px; padding: 64px 0 0 0;
  grid-template-columns: 1fr 1.35fr 1fr; grid-template-rows: 1fr 1fr;
}
.poster-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(20,20,20,.55) 22%, transparent 55%),
              linear-gradient(0deg, var(--bg) 0%, rgba(20,20,20,.4) 22%, transparent 48%);
}
.pt { position: relative; overflow: hidden; background: linear-gradient(135deg, #7a1230, #2b0a24); }
.pt::before { content: "\2665"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 34px; color: rgba(255,255,255,.2); }
.pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(.9); }
.pt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(225,29,72,.38), rgba(20,20,20,.28)); mix-blend-mode: multiply; }
.pt:nth-child(1) { grid-column: 1; grid-row: 1; }
.pt:nth-child(2) { grid-column: 2; grid-row: 1 / 3; margin-top: -24px; }
.pt:nth-child(3) { grid-column: 3; grid-row: 1; }
.pt:nth-child(4) { grid-column: 1; grid-row: 2; }
.pt:nth-child(5) { grid-column: 3; grid-row: 2; }
.billing { position: absolute; z-index: 2; right: var(--pad); bottom: 26vh; text-align: right; font-family: var(--display); letter-spacing: .18em; color: rgba(255,255,255,.85); line-height: 1.25; text-shadow: 0 2px 10px rgba(0,0,0,.8); }
.billing span { display: block; font-size: 12px; opacity: .8; }
.billing span.names { font-size: clamp(18px, 2.2vw, 28px); opacity: 1; color: #fff; margin: 2px 0 8px; }
.m-hero.vid::after { display: none; }
.modal-card:has(.m-hero.vid) { max-width: 980px; }
.modal-card:has(.collage) { max-width: 920px; }
.m-kicker:empty { display: none; }
.collage { display: block; width: 100%; height: auto; border-radius: 8px; margin-top: 16px; cursor: zoom-in; }
.m-hero video { width: 100%; height: 100%; background: #000; }
.bb-label { display: flex; align-items: center; gap: 8px; color: #e5e5e5; font-weight: 600; letter-spacing: .3em; font-size: 13px; margin-bottom: 8px; }
.n-mark { font-family: var(--display); color: var(--red); font-size: 40px; letter-spacing: 0; line-height: 1; font-weight: 400; }
.brand-img { height: 28px; width: auto; }
.brand.big .brand-img { height: 40px; }
.intro .brand-img { height: min(40vw, 230px); filter: drop-shadow(0 0 36px rgba(229,9,20,.55)); }
.n-img { display: block; height: 38px; width: auto; }
.card.album .badge .n-img { height: 22px; }
.billboard h1 { font-family: var(--display); font-weight: 400; font-size: clamp(60px, 11vw, 130px); line-height: .95; letter-spacing: 1px; text-shadow: 0 4px 24px rgba(0,0,0,.5); }
.bb-meta { margin: 14px 0 10px; font-size: 15px; color: #d2d2d2; }
.bb-meta b { color: #46d369; font-weight: 600; }
.bb-meta em { font-style: normal; border: 1px solid #888; padding: 0 6px; font-size: 12px; margin: 0 4px; }
.bb-desc { font-size: clamp(15px, 1.6vw, 19px); text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.bb-btns { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.btn { padding: 10px 26px; border-radius: 4px; font-size: 17px; font-weight: 600; transition: background .2s; }
.btn.play { background: #fff; color: #000; }
.btn.play:hover { background: rgba(255,255,255,.75); }
.btn.info { background: rgba(109,109,110,.7); }
.btn.info:hover { background: rgba(109,109,110,.45); }

/* Rows */
.rows { margin-top: -14vh; position: relative; z-index: 2; padding-bottom: 20px; }
.row { margin-bottom: 18px; }
.row h2 { font-size: clamp(17px, 2vw, 22px); font-weight: 600; padding: 0 var(--pad); margin-bottom: 8px; }
.row-wrap { position: relative; }
.track {
  display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 12px var(--pad) 30px;
  scrollbar-width: none; scroll-padding: 0 var(--pad);
}
.track::-webkit-scrollbar { display: none; }
.arrow {
  position: absolute; top: 12px; bottom: 30px; width: var(--pad); min-width: 40px; z-index: 5;
  background: rgba(20,20,20,.55); font-size: 30px; opacity: 0; transition: opacity .2s;
}
.row-wrap:hover .arrow { opacity: 1; }
.arrow.l { left: 0; } .arrow.r { right: 0; }

.card { flex: none; position: relative; border-radius: 4px; overflow: hidden; background: linear-gradient(135deg, #3a1020, #1d1d1d); scroll-snap-align: start; transition: transform .25s, box-shadow .25s; cursor: pointer; }
.card::before { content: "\2665"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 36px; color: rgba(255,255,255,.18); }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.06); }  /* one gentle grade so mixed phone photos sit together */
.card:hover, .card:focus-visible { transform: scale(1.07); z-index: 4; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 12px 10px; background: linear-gradient(transparent, rgba(0,0,0,.9)); font-weight: 600; font-size: 14px; }
.card .cap small { display: block; color: var(--red); font-size: 11px; letter-spacing: .15em; font-weight: 600; }
.card.ep { width: clamp(250px, 24vw, 350px); aspect-ratio: 16/9; }
.card.poster { width: clamp(150px, 15vw, 210px); aspect-ratio: 2/3; }
.card.cont { width: clamp(250px, 24vw, 350px); aspect-ratio: 16/9; }
.card.wide { width: clamp(280px, 40vw, 520px); aspect-ratio: 16/9; }
.play-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; background: rgba(0,0,0,.5); font-size: 20px; padding-left: 4px; }
.progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,.3); }
.progress i { display: block; height: 100%; width: 92%; background: var(--red); }

.card.poster:not(.album) .cap { padding-top: 110px; }  /* taller dark fade so the title reads over bright photos */
.card.album { box-shadow: 0 6px 18px rgba(0,0,0,.5); }
.card.album::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, rgba(0,0,0,.85) 100%); }
.card.album .badge { position: absolute; z-index: 2; top: 8px; left: 8px; font-family: var(--display); color: var(--red); font-size: 26px; line-height: 1; }
.card.album .cap { z-index: 2; background: none; padding: 0 10px 12px; }
.card.album .cap b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: 1px; line-height: 1; }
.card.album .cap small { color: #d2d2d2; font-size: 11px; letter-spacing: .02em; font-weight: 500; margin-top: 4px; }
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; margin-top: 18px; }
.at { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 3px; cursor: pointer; background: linear-gradient(135deg, #3a1020, #1d1d1d); }
.at::before { content: "\2665"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 26px; color: rgba(255,255,255,.18); }
.at img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.at:hover img { transform: scale(1.08); }

.top { flex: none; display: flex; align-items: flex-end; scroll-snap-align: start; }
.top .num { font-family: var(--display); font-size: 150px; line-height: .8; color: #141414; -webkit-text-stroke: 3px #666; margin-right: -14px; position: relative; z-index: 1; min-width: 70px; text-align: right; }
.top .txt { width: clamp(170px, 16vw, 220px); min-height: 170px; background: var(--card); border-radius: 4px; padding: 16px; font-size: 14px; display: flex; align-items: center; transition: transform .25s; }
.top:hover .txt { transform: scale(1.05); }
/* reason cards with a photo: vertical poster, text over a dark fade at the bottom */
.top .txt.pic { position: relative; overflow: hidden; width: clamp(150px, 14vw, 190px); height: clamp(225px, 21vw, 285px); padding: 0; align-items: flex-end; background: linear-gradient(135deg, #3a1020, #1d1d1d); }
.top .txt.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.04) saturate(1.06); }
.top .txt.pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(0,0,0,.9)); }
.top .txt.pic span { position: relative; z-index: 2; padding: 14px; font-size: 13.5px; font-weight: 600; line-height: 1.35; text-shadow: 0 1px 6px rgba(0,0,0,.7); }

footer { text-align: center; padding: 40px 16px 60px; color: var(--muted); font-family: var(--script); font-size: 26px; }

/* Modal and lightbox */
.overlay { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 16px; overflow-y: auto; }
.overlay[hidden] { display: none; }
.modal-card { position: relative; width: 100%; max-width: 760px; max-height: 92vh; overflow-y: auto; background: var(--panel); border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.8); animation: pop .3s ease; }
@keyframes pop { from { transform: scale(.94); opacity: 0; } }
.m-close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; background: var(--bg); font-size: 26px; line-height: 1; }
#lbClose { position: fixed; }
.m-hero { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #5b0f23, #2b0a24); }
.m-hero img { width: 100%; height: 100%; object-fit: cover; }
.m-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, var(--panel)); }
.m-hero.none { display: none; }
.m-body { padding: 24px 28px 32px; }
.m-kicker { color: var(--red); font-weight: 600; letter-spacing: .15em; font-size: 12px; text-transform: uppercase; }
.m-body h3 { font-size: 28px; margin: 4px 0 14px; }
.m-body p { color: #d2d2d2; margin-bottom: 14px; font-size: 16px; }
.m-body .sign { font-family: var(--script); font-size: 30px; color: #fff; margin: 22px 0 0; }
.overlay figure { text-align: center; }
.overlay figure img { max-width: 100%; max-height: 82vh; border-radius: 4px; margin: 0 auto; }
.overlay figcaption { margin-top: 10px; font-family: var(--script); font-size: 24px; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s, transform .7s; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 760px) {
  .nav { gap: 12px; }
  .nav-links { display: none; }
  #musicLabel { display: none; }
  .arrow { display: none; }
  .billboard { min-height: 80vh; padding-bottom: 16vh; }
  .poster-art { width: 100%; height: 62%; bottom: auto; opacity: .55; padding-top: 56px; }
  .poster-art::after { background: linear-gradient(0deg, var(--bg) 0%, transparent 70%); }
  .billing { display: none; }
  .card.poster { width: 38vw; }
  .card.ep, .card.cont { width: 74vw; }
  .card.wide { width: 86vw; }
  .m-body { padding: 18px 20px 26px; }
  .top .num { font-size: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}