@font-face { font-family: Serif; src: url(fonts/newsreader.woff2) format('woff2'); font-weight: 200 800; font-display: block; }
:root { --paper: #F4EFE6; --ink: #2B2B2E; --blue: #2F5DA8; }
html, body { margin: 0; background: var(--paper); color: var(--ink); -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }
/* the tall scroller: scroll position is film time; the stage sticks to the viewport */
#scroller { position: relative; height: calc(22 * 100svh); }
#stage { position: sticky; top: 0; height: 100svh; width: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--paper); }
/* a 9:16 frame, as large as fits; paper fills the margins */
#frame { position: relative; height: min(100svh, calc(100vw * 16 / 9)); aspect-ratio: 9 / 16; }
#film { display: block; width: 100%; height: 100%;
  /* feather the painted frame into the page paper so its vignette never reads as a box */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent), linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent), linear-gradient(to right, transparent, #000 1.5%, #000 98.5%, transparent); mask-composite: intersect; }
#born { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; font: 400 calc(var(--fh, 1920px) * 40 / 1920) / 1 Serif, 'Iowan Old Style', Georgia, serif; color: var(--ink); opacity: 0; pointer-events: none; }
#play { position: absolute; right: 4%; bottom: 13.5%; width: 14%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 2px 3px rgba(92,66,40,.25)); }
#play svg { width: 100%; height: 100%; }
#play circle { fill: rgba(244,239,230,.92); stroke: var(--blue); stroke-width: 3; }
#play path { fill: #D9622B; stroke: #2B2B2E; stroke-width: 2; stroke-linejoin: round; }
footer { padding: 24px 16px 40px; text-align: center; font: 13px Serif, Georgia, serif; opacity: .6; }