body.film-open{overflow:hidden}

.film-modal[hidden]{display:none}
.film-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 12%,rgba(231,157,180,.18),transparent 34%),
    radial-gradient(circle at 82% 16%,rgba(184,204,230,.12),transparent 28%),
    rgba(20,8,16,.58);
  backdrop-filter:blur(18px) saturate(126%);
  -webkit-backdrop-filter:blur(18px) saturate(126%);
}

.film-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:transparent;
  cursor:default;
}

.film-shell{
  position:relative;
  z-index:1;
  width:min(1240px,94vw);
  max-height:92vh;
  border-radius:34px;
  padding:18px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:14px;
  background:
    linear-gradient(145deg,rgba(68,34,54,.76),rgba(38,20,34,.62) 48%,rgba(28,18,31,.70)) padding-box,
    linear-gradient(120deg,rgba(255,255,255,.94),rgba(238,184,205,.42) 30%,rgba(255,255,255,.62) 55%,rgba(189,213,239,.30) 78%,rgba(255,255,255,.76)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 46px 130px rgba(0,0,0,.38),
    0 14px 42px rgba(110,64,84,.24),
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(211,142,169,.10);
  backdrop-filter:blur(30px) saturate(145%);
  -webkit-backdrop-filter:blur(30px) saturate(145%);
}

.film-shell::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:31px;
  border:1px solid rgba(255,255,255,.14);
  pointer-events:none;
}

.film-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:4px 4px 0 8px;
}
.film-bar>div{display:grid;gap:2px}
.film-bar span{
  color:#e8afbf;
  font-family:var(--font-ui);
  font-size:9px;
  letter-spacing:.22em;
  font-weight:500;
}
.film-bar h2{
  margin:0;
  color:#fff9fb;
  font-family:var(--font-brand);
  font-size:clamp(25px,2.6vw,40px);
  line-height:1;
  font-weight:500;
  letter-spacing:-.03em;
}

.film-close{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.34);
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.48),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.22),rgba(213,143,169,.14));
  color:#fff;
  font-size:25px;
  font-weight:300;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 10px 28px rgba(0,0,0,.16);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .22s ease,background .22s ease,box-shadow .22s ease;
}
.film-close:hover{
  transform:scale(1.035);
  background:
    radial-gradient(circle at 31% 25%,rgba(255,255,255,.58),transparent 34%),
    linear-gradient(145deg,rgba(255,255,255,.27),rgba(225,151,178,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.58),0 13px 32px rgba(0,0,0,.19);
}
.film-close:focus-visible{outline:2px solid rgba(255,226,235,.92);outline-offset:3px}

.film-frame{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  aspect-ratio:16/9;
  background:
    linear-gradient(#10080f,#10080f) padding-box,
    linear-gradient(120deg,rgba(255,255,255,.82),rgba(238,177,200,.35) 30%,rgba(196,217,240,.28) 74%,rgba(255,255,255,.64)) border-box;
  border:1px solid transparent;
  box-shadow:
    0 28px 74px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(210,136,163,.08);
}
.film-frame::before{
  content:"";
  position:absolute;
  z-index:2;
  left:4%;right:4%;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.84),rgba(255,219,231,.62),transparent);
  pointer-events:none;
}
.film-frame video{
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#10080f;
}
.film-loader{
  position:absolute;
  z-index:5;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  gap:10px;
  background:
    radial-gradient(circle at 50% 42%,rgba(219,139,166,.18),transparent 32%),
    rgba(16,7,14,.68);
  color:#fff9fb;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease,visibility .22s ease;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.film-loader span{font-family:var(--font-brand);font-size:clamp(34px,5vw,64px);font-weight:500;letter-spacing:-.04em}
.film-loader small{font-family:var(--font-ui);font-size:9px;text-transform:uppercase;letter-spacing:.2em;color:#e8afbf}
.film-frame.is-loading .film-loader{opacity:1;visibility:visible}
.film-frame.is-loading video{opacity:.58}

/* The culture film is natively 9:16. Give it its own tall liquid-glass stage instead of shrinking it inside a landscape box. */
.film-modal[data-layout="portrait"] .film-shell{
  width:min(620px,94vw);
  max-height:96vh;
  padding:16px;
  gap:11px;
}
.film-modal[data-layout="portrait"] .film-frame{
  aspect-ratio:9/16;
  height:min(72vh,760px);
  width:auto;
  max-width:100%;
  justify-self:center;
}
.film-modal[data-layout="portrait"] .film-frame video{
  aspect-ratio:9/16;
}
.film-modal[data-layout="portrait"] .film-bar h2{
  font-size:clamp(23px,2.1vw,34px);
}
.film-modal[data-layout="portrait"] .film-soul{
  font-size:clamp(15px,1.25vw,19px);
}

.film-soul{
  margin:0;
  padding:0 8px 4px;
  text-align:center;
  color:rgba(255,244,248,.82);
  font-family:var(--font-soul);
  font-size:clamp(16px,1.5vw,22px);
  font-style:italic;
  line-height:1.2;
}
.film-soul em{color:#e8aebe;font-weight:400}

.film-trigger[hidden],.culture-film-trigger[hidden]{display:none!important}

@media(max-width:900px){
  .film-modal{padding:14px}
  .film-shell{width:min(96vw,1000px);padding:14px;border-radius:28px;gap:11px}
  .film-shell::after{border-radius:25px}
  .film-frame{border-radius:20px}
  .film-close{width:44px;height:44px;flex-basis:44px}
  .film-modal[data-layout="portrait"] .film-shell{width:min(560px,96vw)}
  .film-modal[data-layout="portrait"] .film-frame{height:min(70vh,720px)}
}

@media(max-width:620px){
  .film-modal{padding:8px}
  .film-shell{width:calc(100vw - 16px);max-height:94vh;padding:10px;border-radius:22px;gap:9px}
  .film-shell::after{border-radius:19px}
  .film-bar{padding-left:4px;gap:12px}
  .film-bar span{font-size:8px;letter-spacing:.16em}
  .film-bar h2{font-size:24px}
  .film-close{width:40px;height:40px;flex-basis:40px;font-size:22px}
  .film-frame{border-radius:16px}
  .film-soul{font-size:15px;padding-bottom:2px}
  .film-modal[data-layout="portrait"] .film-shell{width:calc(100vw - 16px);padding:9px;gap:8px}
  .film-modal[data-layout="portrait"] .film-frame{height:min(68vh,660px);max-width:82vw}
  .film-modal[data-layout="portrait"] .film-bar h2{font-size:22px}
}

@media(prefers-reduced-motion:reduce){
  .film-close,.film-loader{transition:none!important}
}