@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Barlow+Condensed:wght@400;500;600;700&display=swap");
:root {
  --reel-gold:#c7ad7d;
  --reel-platinum:#eef1f9;
  --reel-blue:#88c2f0;
  --reel-fuchsia:#dc89c9;
  --reel-ultraviolet:#aaa0d3;
}
body.reel-locked { margin:0; min-height:100vh; color:var(--reel-platinum); background:#0b1019; }
.reel-locked-preview { min-height:100vh; filter:blur(7px) brightness(.77); pointer-events:none; user-select:none; }
.reel-preview-brand { padding:1.5rem 6%; color:var(--reel-gold); letter-spacing:.22em; font:500 .7rem system-ui; border-bottom:1px solid #c7ad7d45; }
.reel-preview-content { width:min(86%,66rem); margin:clamp(4rem,13vh,10rem) auto; text-align:center; }
.reel-preview-content h1 { color:var(--reel-gold); font:400 clamp(2rem,6vw,4.5rem) Georgia,serif; letter-spacing:.13em; }
.reel-preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.5rem,3vw,2rem); }
.reel-preview-card { min-height:clamp(7rem,24vw,15rem); display:grid; align-content:center; justify-items:center; gap:1rem; border:1px solid #c7ad7d75; background:linear-gradient(150deg,#20283a,#15151f 67%,#33252e); }
.reel-preview-card span { color:var(--reel-gold); font-size:2rem; }
.reel-preview-card strong { color:var(--reel-platinum); font:500 clamp(.55rem,1.5vw,.9rem) system-ui; letter-spacing:.12em; }
.reel-preview-card i { width:40%; height:1px; background:var(--reel-ultraviolet); }
.reel-lock { position:fixed; z-index:999; inset:0; display:grid; place-items:center; padding:1.2rem; background:#070a135c; }
.reel-password { box-sizing:border-box; display:grid; gap:.85rem; width:min(100%,19rem); margin:0; padding:1.65rem; border:1px solid #c7ad7d77; background:#111621f5; box-shadow:0 22px 70px #0008; }
.reel-monogram { display:flex; justify-content:center; gap:.46em; padding-left:.46em; margin:.12em 0 .34em; color:var(--reel-platinum); font:400 2.35rem/1 "Barlow Condensed","Arial Narrow",sans-serif; }
.reel-password input:not([type=hidden]),.reel-input-echo { box-sizing:border-box; width:100%; min-height:44px; border:1px solid #c7ad7d70; border-radius:0; background:#090d15; color:var(--reel-platinum); padding:.55rem .7rem; font:inherit; }
.reel-password button,.reel-enter-echo { display:grid; place-items:center; min-height:44px; border:1px solid #c7ad7d70; border-radius:0; background:#c7ad7d12; color:#e1c99d; font:600 .68rem system-ui; letter-spacing:.2em; }
.reel-password button { cursor:pointer; }
.reel-password button:hover { border-color:var(--reel-blue); color:var(--reel-platinum); }
.reel-password :focus-visible { outline:2px solid var(--reel-blue); outline-offset:3px; }
#reel-error { margin:0; color:#efb5d5; font:400 .75rem/1.45 system-ui; }
.reel-lock-out { pointer-events:none; animation:reel-panel-out .8s ease both; }
[data-reel-focus] > :is(header,main,footer) { animation:reel-focus-in .8s ease both; }
@keyframes reel-focus-in { from { filter:blur(7px) brightness(.77); } to { filter:none; } }
@keyframes reel-panel-out { from { opacity:1; filter:blur(0); } to { opacity:0; filter:blur(3px); visibility:hidden; } }
@media (prefers-reduced-motion:reduce) {
  [data-reel-focus] > :is(header,main,footer) { animation:none; }
  .reel-lock-out { display:none; }
}
[data-reel-screen] .collection-card:hover { border-color:var(--reel-blue); }
[data-reel-screen] :is(.brand,.wordmark):hover { color:var(--reel-platinum); }
[data-reel-screen] .film-divider { background:linear-gradient(90deg,transparent,#c7ad7d9c 27%,#aaa0d361 65%,transparent); }
[data-reel-screen] :is(.screening-back,.screening-imdb,.trailer-button,.reel-button):hover { border-color:var(--reel-blue); }
[data-reel-screen] :is(.screening-back,.trailer-button,.reel-button):focus-visible { outline:2px solid var(--reel-ultraviolet); outline-offset:3px; }

.reel-gate-links { display:flex; flex-wrap:wrap; justify-content:space-between; column-gap:1rem; }
.reel-gate-links :is(a,span) { display:inline-flex; align-items:center; min-height:32px; color:#cbd4e5; font:500 .74rem/1.4 "Barlow Condensed",sans-serif; letter-spacing:.09em; }
.reel-gate-links a { text-decoration:underline; text-underline-offset:.22em; }
.reel-gate-links a:hover { color:var(--reel-blue); }

.reel-gate-title { margin:0; color:var(--reel-platinum); text-align:center; font:500 1rem/1.25 "Barlow Condensed",sans-serif; letter-spacing:.04em; }
.reel-gate-field { display:grid; gap:.3rem; color:#cbd4e5; font:500 .8rem/1.2 "Barlow Condensed",sans-serif; letter-spacing:.05em; }
.reel-gate-links { column-gap:.55rem; }
.reel-gate-links :is(a,span) { letter-spacing:.045em; }

.reel-lock { overflow:auto; }
.reel-password { width:min(100%,22.25rem); padding:clamp(1.25rem,5vw,2rem); gap:.88rem; --reel-ivory:#f1e7d4; border-color:#aa89565c; background:linear-gradient(155deg,#1a202d,#10141e 67%); box-shadow:0 22px 70px #0008,inset 0 0 0 3px #bf9b5f0d; }
.reel-monogram { justify-self:center; gap:.115em; padding:.18em .36em .22em; margin:0 0 .12em; border:1px solid #b9955c88; border-radius:5px; background:linear-gradient(153deg,#352d24,#16191f 46%,#29231f); color:#d6ba88; box-shadow:inset 0 1px 0 #ffe1ad32,inset 0 -2px 0 #0008,0 4px 10px #0005; font:300 1.75rem/1 "Open Sans",system-ui,sans-serif; text-shadow:0 1px 1px #0008; }
.reel-gate-title { display:grid; gap:.36rem; font:600 .78rem/1.4 system-ui,sans-serif; color:var(--reel-ivory); }
.reel-gate-name { letter-spacing:.16em; }
.reel-gate-subtitle { color:var(--reel-ivory); font-size:.72rem; font-weight:500; letter-spacing:.045em; }
.reel-gate-field,.reel-gate-links :is(a,span),.reel-password input:not([type=hidden]),.reel-input-echo,.reel-password button,.reel-enter-echo { color:var(--reel-ivory); }

.reel-locked .reel-password { position:relative; }
.reel-close {
  position:absolute;
  inset:.2rem .2rem auto auto;
  display:grid;
  place-items:center;
  width:2.75rem;
  height:2.75rem;
  color:var(--reel-gold);
  font:400 1.15rem/1 system-ui,sans-serif;
  text-decoration:none;
}
.reel-close:hover { color:var(--reel-ivory); }