/* Projection branding and fullscreen behavior */
.tile video {
  width:100%;
  height:100%;
  position:absolute;
  inset:0;
  object-fit:cover;
  animation:appear .6s ease both;
}

.opening-card { position:relative; isolation:isolate; overflow:hidden; }
.opening-card > p,
.opening-card > h1,
.opening-card > span { position:relative; z-index:3; }
.hero-media { position:absolute; inset:0; z-index:0; display:grid; opacity:0; transition:opacity .7s ease; }
.opening-card.has-hero .hero-media { opacity:1; }
.hero-media img { width:100%; height:100%; min-width:0; object-fit:cover; display:block; }
.hero-media::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(19,20,13,.78),rgba(27,24,17,.34) 55%,rgba(19,20,13,.62)); }
.opening-card.has-hero::before,
.opening-card.has-hero::after { opacity:.28; }

.story-caption { position:absolute; z-index:2; left:12px; right:12px; bottom:12px; padding:10px 12px; color:#fffefa; background:linear-gradient(90deg,rgba(22,22,15,.86),rgba(22,22,15,.42)); backdrop-filter:blur(4px); }
.story-caption b { display:block; font:600 11px/1.2 var(--mono); letter-spacing:1px; text-transform:uppercase; }
.story-caption p { margin:5px 0 0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font:500 16px/1.15 var(--serif); }

.projection-promo {
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  margin-right:clamp(8px,3vw,34px);
}

.projection-qr {
  flex:0 0 auto;
  padding:6px;
  background:#fffefa;
  border-radius:4px;
}

.projection-qr img,
.projection-qr canvas {
  display:block;
  width:82px!important;
  height:82px!important;
}

.projection-promo > div:last-child {
  display:flex;
  flex-direction:column;
}

.projection-promo b {
  font:500 25px/1 var(--serif);
  color:#fffefa;
}

.projection-promo span {
  margin-top:4px;
  font:600 11px var(--mono);
  letter-spacing:1px;
  color:var(--light);
}

.projection-promo small {
  margin-top:4px;
  font-size:9px;
  color:#aaa993;
}

#fullscreenBtn[hidden],
:fullscreen #fullscreenBtn,
:-webkit-full-screen #fullscreenBtn {
  display:none!important;
}

@media (min-width:701px) {
  .screen-shell {
    height:100vh;
    min-height:0;
    overflow:hidden;
  }
  main { overflow:hidden; }
  .opening-card { min-height:0; }
  footer { flex:0 0 auto; }
}

@media (max-width:700px) {
  footer { flex-wrap:wrap; }
  .projection-promo {
    order:3;
    width:100%;
    justify-content:center;
    margin:8px 0 0;
  }
  .projection-qr img,
  .projection-qr canvas {
    width:64px!important;
    height:64px!important;
  }
  .projection-promo small { display:none; }
}
body { background:var(--event-primary,#191911); color:var(--event-primary-text,#f6f5ee); }
header,footer { border-color:color-mix(in srgb,var(--event-secondary,#eeebc9) 35%,transparent); }
.opening-card { background:linear-gradient(145deg,color-mix(in srgb,var(--event-primary) 72%,var(--event-secondary)),var(--event-secondary)); color:var(--event-primary-text); }
.opening-card h1 em,.opening-card > span,.live-state,.projection-promo span { color:var(--event-secondary,#eeebc9); }
footer p,.event-title small { color:color-mix(in srgb,var(--event-primary-text,#fff) 75%,transparent); }
footer button { border-color:var(--event-secondary,#eeebc9); color:var(--event-secondary-text,#191911); background:var(--event-secondary,#eeebc9); }
footer button:hover { filter:brightness(.92); }