/* ============================================================
   THE ARCHIVE — layout tiers + the calm effect set
   ============================================================ */

/* ---------- no room beside the screen: a top bar, and no index ---------- */
@media (max-width: 1099px) {
  .archive-index { display: none; }
  .layout { padding-top: calc(50px + env(safe-area-inset-top)); }
  .screen-frame { max-width: calc(100vw - 24px); padding: 10px; }
  .finale-card {
    --top-gap: calc(50px + env(safe-area-inset-top));
    width: calc(100vw - 24px);
    padding: 10px;
  }
}

/* ---------- portrait phones: the screen takes whatever the column leaves ---------- */
@media (max-width: 719px) {
  .screen-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: calc(100vw - 24px);
    aspect-ratio: auto;
  }
  .proj-band { height: clamp(84px, 15vh, 136px); }
  .slide { width: 88px; }
  .slide-tray {
    gap: 12px;
    padding: 20px 16px calc(14px + env(safe-area-inset-bottom));
  }
  .desk { height: 28%; }
  .slide-name { font-size: 11.5px; }
}

/* ---------- landscape phones: the projector gives way to the picture ---------- */
@media (max-height: 500px) {
  .archive-index { display: none; }
  .proj-band { display: none; }
  .layout { padding-top: max(6px, env(safe-area-inset-top)); }
  .screen-frame {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    width: min(60vw, 720px);
    max-width: none;
    aspect-ratio: auto;
    padding: 6px;
  }
  .slide { width: 70px; }
  .slide-name { display: none; }
  .slide-window { height: 72%; }
  .slide-num { top: 80%; right: auto; left: 9%; }
  .slide-tray { padding: 18px 16px calc(6px + env(safe-area-inset-bottom)); gap: 10px; }
  .desk { height: 34%; }

  /* the invitation has the whole screen to itself */
  .stage[data-finale="on"] .slide-tray { display: none; }
  .finale-card {
    --top-gap: max(8px, env(safe-area-inset-top));
    bottom: 8px;
    width: min(calc(100vw - 150px), 720px);
    padding: 6px;
  }
  .fc-title, .fc-rule { display: none; }
  .fc-names { font-size: clamp(34px, 20cqh, 60px); margin-top: 2px; }
  .fc-date { font-size: clamp(18px, 8.5cqh, 28px); }
  .fc-loc { font-size: clamp(14px, 6cqh, 19px); margin-top: 0; }
  .fc-cal { margin-top: 6px; min-height: 36px; font-size: 10px; }
  .fc-hint span { display: none; }
  .fc-hint { margin-top: 2px; }
}

/* ---------- calm: phones (set before first paint in index.html), or ?calm ----------
   The same rule the Beosound learned on real iPhones: mix-blend-mode, backdrop
   blur, animated filters and layout animation over video are what flicker. So
   here: normal blending, static shadows, opacity and transform only. */
.calm .room-light,
.calm .desk::after,
.calm .vignette,
.calm .beam-layer,
.calm .slide-glass,
.calm .screen-vig { mix-blend-mode: normal; }

.calm .room-light { background: radial-gradient(60% 50% at 50% 60%, rgba(255,160,70,0.06), transparent 70%); }
.calm .desk::after { filter: none; opacity: 0 !important; }
.calm .vignette { background: radial-gradient(130% 100% at 50% 45%, transparent 55%, rgba(0,0,0,0.34) 100%); }
.calm .slide-glass { display: none; }
.calm .screen-vig { background: radial-gradient(120% 100% at 50% 45%, transparent 62%, rgba(0,0,0,0.3) 100%); }

.calm .grain,
.calm .screen-bloom,
.calm .dust-host,
.calm .screen-fill { display: none; }
.calm .screen-media { background: #0b0705; }

.calm .film-scene,
.calm .screen[data-phase="focus"] .screen-media { animation: none; }
.calm .screen-media,
.calm .screen[data-phase="focus"] .screen-media,
.calm .screen[data-phase="playing"] .screen-media { filter: none; transform: none; }
.calm .screen[data-phase="focus"] .screen-media { opacity: 0.75; }

.calm .projector-wrap { filter: none; }
.calm .lens-glass,
.calm .stage[data-lamp="on"] .lens-glass { filter: none; }
.calm .beam,
.calm .beam-core { filter: none; }
.calm .stage[data-lamp="on"] .beam { opacity: 0.3; }
.calm .stage[data-proj="on"] .beam { opacity: 0.55; }
.calm .stage[data-proj="on"] .beam-core { opacity: 0.32; }
.calm .beam.flick { animation: none; }

/* slide shadows live on the mount, so nothing re-filters as a slide moves */
.calm .slide,
.calm .slide.is-active,
.calm .flying-slide { filter: none; }
.calm .slide-mount { box-shadow: inset 0 1px 1px rgba(255,225,180,0.18), 0 8px 14px rgba(0,0,0,0.5); }
.calm .slide-window,
.calm .slide.is-active .slide-window { filter: none; }
.calm .slide.is-active .slide-mount { box-shadow: inset 0 1px 1px rgba(255,225,180,0.25), 0 0 0 1px rgba(216,192,138,0.6), 0 10px 16px rgba(0,0,0,0.55); }

.calm .screen-line,
.calm .screen-line.show,
.calm .finale-card .reveal { filter: none; }
.calm .finale-card { box-shadow: inset 0 2px 3px rgba(255,210,150,0.18), 0 0 60px rgba(255,180,100,0.22); }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .film-scene,
  .grain,
  .screen-bloom,
  .mote { animation: none !important; }
  .finale-card .reveal { filter: none; transform: none; }
}