:root {
  --page: #ece7dc;
  --ink: #2b3a48;
  --soft: #6d7780;
  --print: min(86vw, 78svh, 680px);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 15px/1.4 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

main {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}

.print { margin: 0; width: var(--print); }

/* The film is a print laid on the page: square, a hairline edge, a low shadow. */
.print video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  background: #e2e5e7;
  box-shadow: 0 0 0 1px rgb(43 58 72 / .06), 0 1px 2px rgb(43 58 72 / .08), 0 12px 32px -18px rgb(43 58 72 / .45);
}

figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 14px;
}

.name {
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

#sound {
  font: inherit;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--soft);
  background: none;
  border: 0;
  padding: 6px 0 6px 12px;
  cursor: pointer;
}
#sound[aria-pressed="true"] { color: var(--ink); }
#sound:hover { color: var(--ink); }
#sound:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

.debug {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top)) 8px auto 8px;
  margin: 0;
  padding: 8px;
  font: 11px/1.35 ui-monospace, Menlo, monospace;
  white-space: pre-wrap;
  color: #fff;
  background: rgb(0 0 0 / .72);
  z-index: 1;
}