/* Archive page on jas.black: the viewer as-is, plus the site's header. */
.site-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(16px, 4vw, 56px) 10px;
  font: 500 11px/1 "Martian Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.site-bar nav { display: flex; gap: clamp(14px, 2.6vw, 34px); }
.site-bar a { color: rgba(244, 244, 242, .7); text-decoration: none; transition: color .2s; }
.site-bar a:hover { color: #f4f4f2; }
.site-mark img { display: block; height: 34px; width: auto; }
@media (max-width: 560px) { .site-mark img { height: 24px; } .site-bar nav { gap: 12px; } }
.lb-cap b { font: 500 16px/1 "Syne", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em; text-shadow: 0 0 2px rgba(255,255,255,.36), 0 0 7px rgba(255,255,255,.15); }

/* The viewer as on the home page: the piece inset from the edges, with its title and year · medium
   always along the bottom (films included: their controls stay inside the player). */
.lb-stage { inset: 56px clamp(0px, 6vw, 80px) 64px; }
.lb-stage img, .lb-stage video { max-width: 100%; max-height: 100%; }
.lb-stage mux-player { width: min(100%, calc((100dvh - 120px) * var(--ar, 1.7778))); }
.lb-cap,
.lightbox:has(mux-player) .lb-cap {
  top: auto;
  left: clamp(16px, 4vw, 56px);
  right: clamp(16px, 4vw, 56px);
  bottom: 22px;
  gap: 14px;
  opacity: 1;
  font: 400 12.5px/1.4 "Martian Mono", ui-monospace, Menlo, monospace;
  letter-spacing: .06em;
  color: rgba(244, 244, 242, .55);
}
.lb-cap b { font-size: 24px; }

/* titles under the films in the Films collection */
.tile-cap { font: 400 11px/1.4 "Martian Mono", ui-monospace, Menlo, monospace; letter-spacing: .06em; color: rgba(244, 244, 242, .5); }   /* line 2: subtitle · kind · year */
.tile-cap b { font: 500 17px/1.2 "Syne", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.005em; color: #f4f4f2; }
.lb-cap .sub, .tile-cap .sub { font-weight: 400; font-size: .78em; letter-spacing: 0; color: rgba(244, 244, 242, .5); text-shadow: none; }
@media (max-width: 720px) {
  .lb-stage { inset: 52px 0 70px; }
  .lb-stage mux-player { width: min(100vw, calc((100dvh - 122px) * var(--ar, 1.7778))); }
}
@media (max-height: 520px) and (orientation: landscape) {
  .lb-stage { inset: 0; }
  .lb-stage img, .lb-stage video { max-width: 100vw; max-height: 100dvh; }
  /* a 40px strip at each side for a smaller × in the corner, clear of the picture */
  .lb-stage img, .lb-stage video { max-width: calc(100vw - 80px); }
  .lb-stage mux-player { width: min(calc(100vw - 80px), calc(100dvh * var(--ar, 1.7778))); }
  .lb-close { width: 36px; height: 36px; opacity: .7; }
  .lb-close::before, .lb-close::after { left: 10px; top: 17px; width: 16px; background: rgba(244, 244, 242, .6); }
  .lb-cap, .lightbox:has(mux-player) .lb-cap { display: none; }
}
@media (max-width: 720px) {
  .lb-cap, .lightbox:has(mux-player) .lb-cap { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 44px); z-index: 4; opacity: 1; display: flex; }
  .lb-cap[hidden] { display: none; }
  .lb-stage { inset: 52px 0 96px; }
  .lb-stage mux-player { width: min(100vw, calc((100dvh - 148px) * var(--ar, 1.7778))); }
  .lb-nav { display: none; }
  .vbar button { font-family: "Martian Mono", ui-monospace, Menlo, monospace; }
}

.cap-line { display: none; }
@media (max-width: 720px) {
  .lb-cap, .lightbox:has(mux-player) .lb-cap {
    left: 16px; right: 16px; bottom: auto;
    flex-direction: column; align-items: center; gap: 8px; text-align: center;
  }
  .lb-cap > b .sub, .lb-cap > span:not(.cap-line) { display: none; }
  .lb-cap > b { font-size: 22px; }
  .lb-cap .cap-line { display: block; font-size: 11px; letter-spacing: .06em; color: rgba(244, 244, 242, .55); }
  .vbar { bottom: auto; }
}

/* Phones held upright: the stage is a column. A spacer, the piece, Previous / Next, then the caption,
   centred in what's left below; the spacer and the caption's space share the room equally, so the piece
   and its buttons sit in the middle. The buttons follow the piece by layout, whatever size it turns out
   to be (placeUnder() moves them in). The piece leaves at least 150px for them. */
@media (max-width: 720px) and (orientation: portrait) {
  .lb-stage.docked {
    inset: 52px 0 env(safe-area-inset-bottom);
    flex-direction: column; justify-content: flex-start; align-items: center;
    container-type: size;
  }
  .lb-stage.docked::before { content: ''; flex: 0.35 1 0;   /* a third of the room below the piece: wide pieces sit between the middle and the top */ order: -1; min-height: 0; }
  .lb-stage.docked img, .lb-stage.docked video { flex: none; max-width: 100%; max-height: calc(100% - 150px); }
  .lb-stage.docked mux-player { flex: none; width: min(100%, calc((100cqh - 150px) * var(--ar, 1.7778))); }
  .lb-stage.docked > .vbar { position: static; order: 1; flex: none; align-self: stretch; }
  .lb-stage.docked > .lb-cap { position: static; order: 2; flex: 1 1 0; min-height: 0; display: flex; justify-content: center; }
  .lb-stage.docked > .lb-cap[hidden] { display: flex; visibility: hidden; }
  .lb-stage.docked { background-image: none !important; }   /* the blurred stand-in would sit off the piece */
}