/* 34 Ajar III: the home page’s paper frame for its YouTube films, the work page’s player
   (css/pages.css). The film plays on this page; its title is the way to YouTube. The player for
   Lost Between Cuts (css/ajar.css) stays as it is. */
html.is-held { overflow: hidden; }   /* the page stays put under the player */

/* ───────────── The player: a paper frame over the page ───────────── */

.reel {
  --pf: clamp(10px, 1vw, 26px);
  width: min(92vw, calc((100svh - 340px) * 16 / 9 + 2 * var(--pf)));
  max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--paper);
  overflow: visible;
}
.reel::backdrop { background: rgba(10, 10, 10, .94); }
.reel__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.2em 2vw; margin-bottom: 1.1vw; }
/* The title is the way to the film on YouTube: a paper slip, with the words "Watch on YouTube" beside it. */
.reel__to, .reel__plain { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7em 1.4em; margin: 0; }
.reel__to { color: var(--paper); text-decoration: none; outline: none; }
.reel__slip {
  display: inline-flex; align-items: center; gap: .45em; max-width: 100%;
  background: var(--paper); color: var(--ink); padding: .3em .6em .22em;
  font: 900 clamp(24px, 1.8vw, 50px)/1 var(--cut); text-transform: uppercase;
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 2% 92%); transform: rotate(-1.5deg); transform-origin: 0 100%;
}
.reel__slip .arrow { width: max(15px, .5em); height: max(15px, .5em); }
.reel__yt, .reel__by {
  display: inline-flex; align-items: center; gap: .45em; padding: .35em .2em; white-space: nowrap;
  font: 800 clamp(16px, .92vw, 24px)/1 var(--plain);
}
.reel__yt { text-decoration: underline; text-decoration-thickness: .13em; text-underline-offset: .3em; }
.reel__to:hover .reel__slip, .reel__to:focus-visible .reel__slip { background: var(--gold); }
.reel__to:focus-visible .reel__yt { background: var(--paper); color: var(--ink); text-decoration: none; }
.reel__close { flex: none; --r: 2deg; font-size: clamp(18px, 1.1vw, 30px); }
.reel__frame { position: relative; padding: var(--pf); }
.reel__frame::before {
  content: ''; position: absolute; inset: 0; background: var(--paper);
  clip-path: polygon(0 .9%, 99.4% 0, 100% 99.2%, .4% 100%);
}
.reel__window { position: relative; aspect-ratio: 16 / 9; background: #000; }
.reel__window iframe, .reel__window video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; }
.reel__line { margin-top: .8em; font: 600 var(--text)/1.4 var(--plain); max-width: 46em; }

/* Every card plays here now: each key has the play mark that Lost Between Cuts has (css/ajar.css). */
.c1 .card__watch::before, .c3 .card__watch::before, .c4 .card__watch::before {
  content: ''; width: .62em; height: .72em; background: currentColor; clip-path: polygon(0 0, 100% 52%, 3% 100%);
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes films-drop { from { transform: translateY(-50px) rotate(-3deg); } }
  .reel[open] .reel__frame { animation: films-drop .14s linear backwards; }
}
@media (max-width: 1099px) {
  .reel__top { margin-bottom: 3vw; align-items: flex-start; }
  .reel__slip { font-size: clamp(20px, 5.4vw, 30px); }
}

/* A screen too low for the title above the film and the line under it (a phone on its side): the
   film takes the height, its title is one small line over it, and the line under it is left out. */
@media (max-height: 560px) {
  .reel { --pf: 6px; width: min(94vw, calc((100svh - 96px) * 16 / 9 + 2 * var(--pf))); }
  .reel__top { margin-bottom: 8px; align-items: center; gap: 12px; }
  .reel__to, .reel__plain { flex-wrap: nowrap; align-items: center; gap: 12px; }
  .reel__slip { font-size: 18px; white-space: nowrap; }
  .reel__yt, .reel__by { font-size: 13px; padding: 0; }
  .reel__close { font-size: 14px; }
  .reel__line { display: none; }
}