:root { --night:#05070d; --midnight:#080d18; --card:#152238; --card-deep:#0d1727; --gold:#d9a53b; --gold-light:#f6d47d; --cream:#fff4d8; --muted:#c8c1b0; }
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--night); scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--cream); font-family:Arial,Helvetica,sans-serif; background:var(--night); }
body.modal-open { overflow:hidden; }
button { min-height:48px; font:inherit; touch-action:manipulation; }
button:focus-visible,video:focus-visible { outline:3px solid var(--gold-light); outline-offset:4px; }
.site-shell { min-height:100vh; min-height:100svh; position:relative; }

.intro-stage { width:100%; min-height:100vh; min-height:100svh; margin:0; position:relative; isolation:isolate; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:10px; padding:0 12px max(22px,env(safe-area-inset-bottom)); overflow:hidden; background:#000; }
.intro-stage::after { content:""; position:absolute; inset:auto 0 0; z-index:2; height:38%; pointer-events:none; background:linear-gradient(180deg,transparent,rgba(0,0,0,.82)); }
.intro-stage-finished { display:none; }
.intro-copy { position:absolute; top:max(24px,env(safe-area-inset-top)); left:16px; right:16px; z-index:4; text-align:center; }
.eyebrow { margin:0 0 7px; color:var(--gold-light); font-size:.66rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:8px; }
.eyebrow span,.footer-line { width:28px; height:1px; background:linear-gradient(90deg,transparent,var(--gold)); }
.eyebrow span:last-child { transform:scaleX(-1); }
.eyebrow.left { justify-content:flex-start; }
.eyebrow.left span { width:24px; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:400; }
h1 { font-size:clamp(3rem,15vw,5.5rem); line-height:.88; margin:0; letter-spacing:-.045em; text-shadow:0 3px 8px #000,0 9px 35px #000; }
h1 strong { color:var(--gold-light); font-weight:400; }
h1 > span,h1 small { display:block; }
h1 small { margin-top:10px; color:var(--gold-light); font-family:Arial,Helvetica,sans-serif; font-size:.24em; font-weight:700; line-height:1.15; letter-spacing:.16em; text-transform:uppercase; }
.intro-tagline { color:var(--muted); max-width:30ch; margin:10px auto 0; font-family:Georgia,serif; font-size:.92rem; line-height:1.3; }

.cinema-frame { position:absolute; inset:0; z-index:1; width:100%; height:100%; max-width:none; padding:0; border:0; border-radius:0; background:#000; box-shadow:none; overflow:hidden; }
.intro-poster { position:absolute; inset:0; z-index:3; overflow:hidden; background:#000; transition:opacity .35s ease,visibility .35s ease; }
.intro-poster img { width:100%; height:100%; object-fit:contain; object-position:center; display:block; }
.cinema-frame.is-playing .intro-poster { opacity:0; visibility:hidden; pointer-events:none; }
.intro-video { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
.premiere-button { position:relative; z-index:4; width:max-content; max-width:calc(100% - 28px); display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 22px; border:1px solid var(--gold-light); border-radius:999px; background:rgba(5,7,13,.92); color:var(--cream); font-size:.9rem; font-weight:700; cursor:pointer; box-shadow:0 10px 40px rgba(0,0,0,.7),0 0 0 4px rgba(217,165,59,.18); }
.premiere-button:active { transform:scale(.97); }
.play-symbol { display:inline-block; width:0; height:0; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; margin-left:2px; }
.intro-note { position:relative; z-index:4; color:#eee7d6; max-width:32ch; margin:0; font-size:.78rem; line-height:1.35; text-align:center; text-shadow:0 2px 5px #000; }
.skip-button,.replay-button { position:relative; z-index:4; border:0; background:transparent; color:var(--gold-light); cursor:pointer; text-decoration:underline; text-underline-offset:4px; padding:10px 8px; }
.intro-stage.intro-playing .intro-copy,.intro-stage.intro-playing .intro-note,.intro-stage.intro-playing .skip-button { display:none; }
.spotify-link { min-height:48px; display:flex; align-items:center; gap:10px; border:1px solid rgba(30,215,96,.52); border-radius:999px; padding:8px 13px 8px 9px; color:#f5fff8; background:rgba(11,44,24,.82); text-decoration:none; box-shadow:0 9px 24px rgba(0,0,0,.28); }
.spotify-link span:not(.spotify-icon):not(.spotify-arrow) { display:flex; flex-direction:column; gap:1px; }
.spotify-link small { color:#a9dcb9; font-size:.64rem; line-height:1.1; }
.spotify-link strong { font-size:.82rem; line-height:1.15; }
.spotify-icon { width:32px; height:32px; flex:0 0 32px; display:grid; place-items:center; border-radius:50%; color:#08150c; background:#1ed760; font-size:1.15rem; font-weight:800; }
.spotify-link-home { max-width:100%; }
.spotify-link-collection { width:100%; margin:0 0 18px; border-radius:12px; padding:11px 13px; }
.spotify-link-collection .spotify-arrow { margin-left:auto; color:#1ed760; font-size:1.2rem; }

.collection { width:min(100% - 24px,1180px); margin:0 auto; position:relative; z-index:1; padding:32px 0 max(50px,env(safe-area-inset-bottom)); }
.collection-visible { animation:doors-open .6s ease both; }
@keyframes doors-open { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
.collection-heading { display:flex; flex-direction:column; align-items:stretch; gap:16px; margin-bottom:20px; }
.collection-heading h2,.modal-heading h2 { font-size:clamp(2rem,10vw,3.5rem); line-height:1; margin:0 0 10px; }
.collection-heading p:not(.eyebrow) { color:var(--muted); line-height:1.45; margin:0; }
.replay-button { align-self:flex-start; text-decoration:none; border:1px solid rgba(217,165,59,.45); border-radius:999px; padding:10px 15px; }

.film-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.film-card { min-width:0; min-height:0; text-align:left; padding:0; border:1px solid rgba(246,212,125,.18); border-radius:12px; overflow:hidden; background:linear-gradient(155deg,var(--card),var(--card-deep)); color:var(--cream); cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.3); transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.film-card:active { transform:scale(.98); }
.poster-wrap { display:block; aspect-ratio:4/5; position:relative; overflow:hidden; background:#000; }
.poster-wrap img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.poster-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 43%,rgba(0,0,0,.72)); }
.card-play { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:rgba(5,7,13,.78); color:var(--gold-light); border:1px solid var(--gold-light); }
.film-number { position:absolute; bottom:9px; left:10px; font-family:Georgia,serif; color:var(--gold-light); font-size:.95rem; }
.film-info { display:flex; flex-direction:column; gap:4px; min-height:76px; padding:11px 10px 13px; }
.film-info strong { font-family:Georgia,serif; font-size:.94rem; line-height:1.15; font-weight:400; }
.film-info small { color:var(--muted); font-size:.7rem; line-height:1.25; }
footer { display:flex; align-items:center; justify-content:center; gap:12px; color:var(--gold-light); margin-top:36px; font-family:Georgia,serif; font-size:.85rem; }
footer .footer-line:last-child { transform:scaleX(-1); }

.modal-backdrop { position:fixed; inset:0; z-index:20; background:rgba(0,0,0,.9); backdrop-filter:blur(10px); display:flex; align-items:flex-end; padding:8px; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
.film-modal { width:100%; max-height:calc(100svh - 16px); overflow:auto; background:linear-gradient(160deg,#121e31,#080d18); border:1px solid var(--gold); border-radius:18px 18px 10px 10px; padding:14px; box-shadow:0 30px 90px #000; }
.modal-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.modal-heading h2 { font-size:1.45rem; margin:0; }
.close-button { flex:0 0 48px; width:48px; height:48px; border-radius:50%; border:1px solid rgba(246,212,125,.45); background:transparent; color:var(--cream); font-size:1.8rem; cursor:pointer; }
.modal-video { display:block; width:100%; height:auto; max-height:calc(100svh - 130px); object-fit:contain; background:#000; border-radius:6px; }

@media (min-width:700px) {
  .collection { width:min(100% - 48px,1180px); }
  .intro-stage { gap:14px; padding-bottom:32px; }
  .intro-tagline { font-size:1.08rem; }
  .spotify-link-collection { width:max-content; min-width:330px; }
  .collection { padding-top:46px; }
  .collection-heading { flex-direction:row; justify-content:space-between; align-items:end; gap:28px; margin-bottom:28px; }
  .replay-button { align-self:auto; flex:0 0 auto; }
  .film-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
  .film-info { min-height:82px; padding:14px 15px 16px; }
  .film-info strong { font-size:1.04rem; }
  .film-info small { font-size:.77rem; }
  .modal-backdrop { display:grid; place-items:center; padding:24px; }
  .film-modal { width:min(1040px,100%); max-height:calc(100vh - 48px); border-radius:12px; padding:22px; }
  .modal-heading h2 { font-size:2.3rem; }
  .modal-video { max-height:calc(100vh - 180px); }
}

@media (min-width:1050px) {
  .film-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
  .film-card:hover { transform:translateY(-5px); border-color:var(--gold); box-shadow:0 18px 38px rgba(0,0,0,.42); }
  .film-card:hover img { transform:scale(1.035); }
}

@media (max-height:700px) and (max-width:699px) {
  .intro-stage { gap:6px; padding-bottom:max(12px,env(safe-area-inset-bottom)); }
  .intro-copy h1 { font-size:3rem; }
  .intro-note { display:none; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }