/* v4.css - design system of the PwP page, version 4 ("the screening").
 * A light room; the media are screens hung in it. Black inside a screen still means "never observed".
 * Contract and rules: DESIGN.md next to index.html. Shared primitives are v4-*; a scene's own classes are
 * v4-<scene>-* in css/v4-<scene>.css; states are is-*.
 */

/* =============================================================== tokens */
:root {
  /* room */
  --v4-paper: #f3f1ec;          /* page */
  --v4-paper-2: #e8e5de;        /* sunken: empty screens, tracks */
  --v4-raise: #fbfaf8;          /* raised: menus, the lens tag */
  --v4-ink: #141518;            /* text, rules, generated marks */
  --v4-ink-2: #3c3e44;          /* body */
  --v4-ink-3: #62656c;          /* secondary (AA on paper) */
  --v4-ink-4: #9a9ca1;          /* decorative only */
  --v4-line: rgba(20, 21, 24, 0.13);
  --v4-line-2: rgba(20, 21, 24, 0.3);
  --v4-scrim: rgba(12, 12, 14, 0.55);  /* control plates on imagery */

  /* the grammar (from the paper's figures) */
  --v4-void: #000;              /* never observed */
  --v4-obs: #ff5a36;            /* GIVEN outline: red-orange, dashed */
  --v4-obs-ink: #b8330f;        /* given-coloured text on paper (AA) */
  --v4-seam: #ff3fd5;           /* CAMERA SEAM: magenta, dashed */
  --v4-seam-ink: #b0168f;       /* seam-coloured text on paper (AA) */
  --v4-gen: var(--v4-ink);      /* marks that stand for generated content (the content itself is imagery) */
  --v4-sup: #fff;               /* supervised pixels in mask diagrams */
  --v4-dash: 7 5;               /* SVG dash arrays */
  --v4-seam-dash: 5 4;

  /* type: system stacks only */
  --v4-display: "Bahnschrift", "DIN Condensed", "Avenir Next Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --v4-serif: "Iowan Old Style", "Sitka Text", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --v4-sans: system-ui, "Segoe UI Variable Text", "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --v4-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;   /* BibTeX only */
  --v4-fs-title: clamp(58px, 8.1vw, 134px);
  --v4-fs-head: clamp(38px, 5.4vw, 84px);
  --v4-fs-say: clamp(17px, 1.35vw, 20.5px);
  --v4-fs-ui: 14px;
  --v4-fs-xs: 12.5px;
  --v4-track-head: -0.012em;

  /* space and frame */
  --v4-s1: 4px; --v4-s2: 8px; --v4-s3: 12px; --v4-s4: 16px; --v4-s5: 24px;
  --v4-s6: 32px; --v4-s7: 48px; --v4-s8: 72px; --v4-s9: 112px;
  --v4-gutter: clamp(16px, 3.9vw, 56px);
  --v4-max: 1360px;
  --v4-col-gap: clamp(12px, 1.7vw, 24px);
  --v4-scene-gap: clamp(104px, 15vh, 176px);
  --v4-reel-h: 30px;

  /* screens */
  --v4-mark: 14px;              /* crop-mark length */
  --v4-mark-off: 9px;           /* crop marks sit this far outside the gate */
  --v4-shadow: 0 1px 0 rgba(20, 21, 24, 0.06), 0 24px 48px -28px rgba(20, 21, 24, 0.45);

  /* motion */
  --v4-ease: cubic-bezier(0.22, 0.8, 0.12, 1);
  --v4-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --v4-t1: 0.16s;
  --v4-t2: 0.42s;
  --v4-t3: 0.9s;
  --v4-stagger: 55ms;
  --v4-pan: 64s;                /* one full turn of an ERP band (title fill) */

  --v4-z-over: 3;
  --v4-z-reel: 40;
  --v4-z-zoom: 60;
  color-scheme: light;
}
html.v4-reduced {
  --v4-t1: 0s; --v4-t2: 0s; --v4-t3: 0s; --v4-stagger: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root { --v4-t1: 0s; --v4-t2: 0s; --v4-t3: 0s; --v4-stagger: 0ms; }
}

/* =============================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 24px;
  background: var(--v4-paper);
}
body {
  margin: 0;
  background: var(--v4-paper);
  color: var(--v4-ink-2);
  font: 400 16px/1.55 var(--v4-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  padding-bottom: calc(var(--v4-reel-h) + 14px);
}
img, video, canvas, svg { display: block; max-width: 100%; }
video { background: var(--v4-paper-2); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
figure { margin: 0; }
::selection { background: var(--v4-ink); color: var(--v4-paper); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--v4-ink); outline-offset: 3px; box-shadow: 0 0 0 5px var(--v4-paper); }
.v4-onmedia :focus-visible, .v4-gate :focus-visible { outline-color: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.7); }

.v4-sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.v4-skip {
  position: fixed; left: var(--v4-gutter); top: 10px; z-index: 100;
  padding: 10px 14px; background: var(--v4-ink); color: var(--v4-paper); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--v4-t1) var(--v4-ease);
}
.v4-skip:focus-visible { transform: none; }

/* =============================================================== frame + grid */
.v4-frame {
  width: 100%;
  max-width: calc(var(--v4-max) + 2 * var(--v4-gutter));
  margin: 0 auto;
  padding: 0 var(--v4-gutter);
}
.v4-grid12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--v4-col-gap);
}
.v4-scene {
  position: relative;
  padding-top: var(--v4-scene-gap);
}
.v4-scene + .v4-scene::before {       /* a hairline between scenes, only in the frame, like a cut */
  content: "";
  position: absolute;
  top: calc(var(--v4-scene-gap) * 0.42);
  left: 50%;
  width: min(calc(100% - 2 * var(--v4-gutter)), var(--v4-max));
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--v4-line) 12%, var(--v4-line) 88%, transparent);
}

/* =============================================================== type */
.v4-head {                            /* one per scene: <= 8 words */
  font-family: var(--v4-display);
  font-stretch: 75%;
  font-weight: 650;
  font-size: var(--v4-fs-head);
  line-height: 0.94;
  letter-spacing: var(--v4-track-head);
  color: var(--v4-ink);
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}
.v4-head em, .v4-say em {             /* the one soft word: serif italic */
  font-family: var(--v4-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: 0;
}
.v4-head em { font-size: 0.82em; }
.v4-say {                             /* the one sentence of a scene */
  font-family: var(--v4-serif);
  font-size: var(--v4-fs-say);
  line-height: 1.45;
  color: var(--v4-ink-2);
  max-width: 44ch;
  font-variant-numeric: lining-nums;
  text-wrap: pretty;
}
.v4-small { font-size: var(--v4-fs-xs); line-height: 1.45; color: var(--v4-ink-3); }
.v4-num { font-variant-numeric: lining-nums tabular-nums; }
.v4-given-ink { color: var(--v4-obs-ink); }
.v4-seam-ink { color: var(--v4-seam-ink); }

/* word-by-word statement reveal: <h2 class="v4-head" data-v4-words> (v4.js wraps the words) */
.v4-w { display: inline-block; }
html.v4-js [data-v4-words] .v4-w {
  opacity: 0;
  transform: translateY(0.42em);
  transition: opacity var(--v4-t3) var(--v4-ease), transform var(--v4-t3) var(--v4-ease);
  transition-delay: calc(var(--i, 0) * var(--v4-stagger));
}
html.v4-js [data-v4-words].is-shown .v4-w, html.v4-reduced [data-v4-words] .v4-w { opacity: 1; transform: none; }

/* scroll reveal for blocks */
html.v4-js .v4-rise { opacity: 0; transform: translateY(18px); transition: opacity var(--v4-t3) var(--v4-ease), transform var(--v4-t3) var(--v4-ease); }
html.v4-js .v4-rise.is-shown, html.v4-reduced .v4-rise { opacity: 1; transform: none; }

/* =============================================================== screens (media staged like cinema screens) */
.v4-screen { position: relative; }
.v4-screen__box { position: relative; }       /* gate + crop marks */
.v4-gate {                            /* the picture itself: sharp corners, no border, shadowed like a hung screen */
  position: relative;
  overflow: hidden;
  background: var(--v4-paper-2);
  box-shadow: var(--v4-shadow);
  aspect-ratio: var(--v4-ar, 2 / 1);
  isolation: isolate;
}
.v4-gate > img, .v4-gate > video, .v4-gate > canvas, .v4-gate__fill {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.v4-marks { position: absolute; inset: calc(-1 * var(--v4-mark-off)); pointer-events: none; z-index: 1; }
.v4-marks::before, .v4-marks::after {  /* four crop marks: two corners per pseudo-element */
  content: "";
  position: absolute;
  inset: 0;
  --m: var(--v4-mark);
  background:
    linear-gradient(var(--v4-ink), var(--v4-ink)) 0 0 / var(--m) 1px no-repeat,
    linear-gradient(var(--v4-ink), var(--v4-ink)) 0 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--v4-ink), var(--v4-ink)) 100% 100% / var(--m) 1px no-repeat,
    linear-gradient(var(--v4-ink), var(--v4-ink)) 100% 100% / 1px var(--m) no-repeat;
  opacity: 0.55;
}
.v4-marks::after { transform: scaleX(-1); }
.v4-slate {                           /* the line under a screen: what it is (left), where it is (right) */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--v4-s2) var(--v4-s5);
  margin-top: calc(var(--v4-mark-off) + 10px);
  font-size: var(--v4-fs-xs);
  line-height: 1.45;
  color: var(--v4-ink-3);
}
.v4-slate b { color: var(--v4-ink); font-weight: 600; }
.v4-slate__r { margin-left: auto; text-align: right; }

/* =============================================================== grammar marks */
.v4-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--v4-fs-xs); color: var(--v4-ink-3); }
.v4-key li { display: inline-flex; align-items: center; gap: 7px; }
.v4-sw { display: inline-block; width: 13px; height: 13px; flex: none; position: relative; }
.v4-sw--given { border: 1.5px dashed var(--v4-obs); background: rgba(255, 90, 54, 0.14); }
.v4-sw--gen { background: linear-gradient(135deg, #6d8fb3, #c8c0a9 55%, #6c6a64); }
.v4-sw--void { background: var(--v4-void); }
.v4-sw--sup { background: var(--v4-sup); box-shadow: inset 0 0 0 1px var(--v4-line-2); }
.v4-sw--seam { width: 2px; height: 15px; background: repeating-linear-gradient(180deg, var(--v4-seam) 0 4px, transparent 4px 7px); }
.v4-seamline {                        /* magenta dashed camera boundary on imagery; set left / top / height in JS */
  position: absolute; width: 0; border-left: 1.5px dashed var(--v4-seam); pointer-events: none;
}

/* =============================================================== controls */
.v4-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 42px; padding: 0 18px;
  border: 1px solid var(--v4-ink); border-radius: 0;
  background: transparent; color: var(--v4-ink);
  font: 600 14px/1 var(--v4-sans); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background var(--v4-t1) var(--v4-ease), color var(--v4-t1) var(--v4-ease), transform var(--v4-t2) var(--v4-ease);
}
.v4-btn:hover { background: var(--v4-ink); color: var(--v4-paper); }
.v4-btn--solid { background: var(--v4-ink); color: var(--v4-paper); }
.v4-btn--solid:hover { background: #000; }
.v4-btn--quiet { border-color: var(--v4-line-2); }
.v4-btn--later { border-style: dashed; border-color: var(--v4-line-2); color: var(--v4-ink-3); cursor: default; }
.v4-btn--later:hover { background: transparent; color: var(--v4-ink-3); }
.v4-btn svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.v4-btn[disabled], .v4-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
[data-v4-magnetic] { will-change: transform; }

.v4-play {                            /* round play / pause */
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  border: 1px solid var(--v4-ink); border-radius: 50%;
  background: var(--v4-ink); color: var(--v4-paper);
  transition: transform var(--v4-t1) var(--v4-ease);
}
.v4-play svg { width: 14px; height: 14px; fill: currentColor; }
.v4-play:active { transform: scale(0.94); }
.v4-onmedia .v4-play { background: rgba(255, 255, 255, 0.94); color: var(--v4-ink); border-color: transparent; }

.v4-switch {                          /* segmented radiogroup (V4.radios) */
  display: inline-flex; flex-wrap: wrap;
  border: 1px solid var(--v4-line-2);
}
.v4-switch > button {
  min-height: 34px; padding: 0 13px;
  border: 0; border-right: 1px solid var(--v4-line); background: transparent;
  color: var(--v4-ink-3); font-size: 13.5px; font-weight: 550; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background var(--v4-t1) var(--v4-ease), color var(--v4-t1) var(--v4-ease);
}
.v4-switch > button:last-child { border-right: 0; }
.v4-switch > button:hover { color: var(--v4-ink); }
.v4-switch > button[aria-checked="true"] { background: var(--v4-ink); color: var(--v4-paper); }
.v4-switch > button[aria-checked="true"] * { color: inherit; }

.v4-scrub {                           /* range: a hairline with a square head; --p = progress (set by V4.transport) */
  -webkit-appearance: none; appearance: none;
  height: 22px; min-width: 80px; flex: 1 1 auto; margin: 0; background: transparent; cursor: pointer;
  --p: 0%;
}
.v4-scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--v4-ink) var(--p), var(--v4-line-2) var(--p)); }
.v4-scrub::-moz-range-track { height: 2px; background: var(--v4-line-2); }
.v4-scrub::-moz-range-progress { height: 2px; background: var(--v4-ink); }
.v4-scrub::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -5px; background: var(--v4-ink); border: 0; border-radius: 0; }
.v4-scrub::-moz-range-thumb { width: 12px; height: 12px; background: var(--v4-ink); border: 0; border-radius: 0; }
.v4-readout { font-size: var(--v4-fs-xs); color: var(--v4-ink-3); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.v4-transport { display: flex; align-items: center; gap: var(--v4-s3); flex-wrap: wrap; }

/* captions and tables */
.v4-cap { margin-top: var(--v4-s3); font-size: var(--v4-fs-xs); line-height: 1.5; color: var(--v4-ink-3); max-width: 96ch; }
.v4-cap b { color: var(--v4-ink); font-weight: 600; }
.v4-tablewrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.v4-table { width: 100%; border-collapse: collapse; font-size: 14.5px; color: var(--v4-ink-2); font-variant-numeric: lining-nums tabular-nums; }
.v4-table th, .v4-table td { padding: 9px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--v4-line); }
.v4-table th:first-child, .v4-table td:first-child { text-align: left; }
.v4-table thead th { font-weight: 600; color: var(--v4-ink); border-bottom: 1.5px solid var(--v4-ink); font-size: 13px; }
.v4-table tr.is-group th { padding-top: 18px; text-align: left; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--v4-ink-3); font-weight: 600; }
.v4-table tr.is-ours td { color: var(--v4-ink); }
.v4-table tr.is-ours td:first-child,
.v4-table tr.is-ours th[scope="row"] { box-shadow: inset 3px 0 0 var(--v4-ink); font-weight: 600; color: var(--v4-ink); }
.v4-table .is-best { font-weight: 700; color: var(--v4-ink); }
.v4-table .is-second { text-decoration: underline; text-underline-offset: 3px; }
.v4-code { margin: 0; padding: var(--v4-s5); background: var(--v4-raise); border: 1px solid var(--v4-line); font: 13px/1.6 var(--v4-mono); color: var(--v4-ink-2); overflow-x: auto; white-space: pre; }


/* =============================================================== pinned scroll runs (V4.pin) */
.v4-pin { position: relative; height: var(--v4-pin-h, 260svh); }
.v4-pin__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
html.v4-reduced .v4-pin { height: auto; }
html.v4-reduced .v4-pin__stage { position: relative; height: auto; overflow: visible; }

/* =============================================================== opening: title + the film */
.v4-open {
  position: relative;
  padding-top: clamp(16px, 2.6vh, 30px);
  /* the film is the one protagonist: centred under the wordmark, as wide as the screen allows with its transport
     and slate still in view (16:9), never below 480 px unless the screen is narrower */
  --v4-film-w: max(min(100%, 1240px, calc((100svh - 262px) * 16 / 9)), min(100%, 480px));
}
.v4-open__stack { display: flex; flex-direction: column; align-items: center; }
.v4-title {
  width: var(--v4-film-w);
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.16em;
  font-family: var(--v4-display);
  font-stretch: 75%;
  font-weight: 700;
  font-size: var(--v4-fs-title);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--v4-ink);
  margin: 0 0 clamp(28px, 4.2vh, 46px);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
html.v4-fit .v4-title { flex-wrap: nowrap; }
.v4-title__w { position: relative; display: inline-block; padding: 0.04em 0 0.06em; }
.v4-title__note {                      /* what each word is made of (decorative; the h1 reads "Panoramas without Panoramas") */
  position: absolute; left: 0.04em; top: calc(100% + 6px);
  display: inline-flex; align-items: center; gap: 7px;
  font: 500 12.5px/1.2 var(--v4-sans); letter-spacing: 0.01em; white-space: nowrap;
  color: var(--v4-ink-3); -webkit-text-stroke: 0; filter: none;
}
.v4-title__note .v4-sw { width: 11px; height: 11px; }
/* the two words are cut out of one panorama: the same clip, the same frame (t = 0), the same pan */
.v4-title__w--gen, .v4-title__w--given {
  --erp-h: 2.25em;                     /* ERP height inside the letters: 512 px -> 2.25em (always downscaled) */
  color: transparent;
  background-size: calc(var(--erp-h) * 2) var(--erp-h);
  background-repeat: repeat-x;
  background-position: 0 49%;
  -webkit-background-clip: text;
  background-clip: text;
}
.v4-title__w--gen {                    /* PwP's generated frame 0 */
  background-image: url("../img/anyview/waymo_perception_01/all_cameras.jpg");
  -webkit-text-stroke: 0.014em rgba(20, 21, 24, 0.62);
  filter: brightness(0.9) saturate(1.08);
}
.v4-title__w--given {                  /* the cameras' pixels at t = 0; black = never observed */
  background-image: url("../img/anyview/waymo_perception_01/input_all.jpg");
}
html.v4-js:not(.v4-reduced) .v4-title__w--gen,
html.v4-js:not(.v4-reduced) .v4-title__w--given { animation: v4-pan var(--v4-pan) linear infinite; }
@keyframes v4-pan {
  from { background-position-x: 0; }
  to { background-position-x: calc(-2 * var(--erp-h)); }
}
.v4-title__with {
  font-family: var(--v4-serif);
  font-style: italic;
  font-weight: 400;
  font-stretch: 100%;
  font-size: 0.42em;
  letter-spacing: 0;
  color: var(--v4-ink-2);
  transform: translateY(-0.28em);
}

.v4-film { width: var(--v4-film-w); }
.v4-film .v4-gate { --v4-ar: var(--v4-film-ar, 16 / 9); background: #0d0d0f; }
.v4-film > .v4-slate { margin-top: 4px; min-height: 1.45em; }   /* only the chapter name (right): one line held even
                                                                   while it is empty (before the film's script, no JS) */
.v4-film__video { object-fit: contain; background: transparent; }
/* the transport sits under the picture, on paper: it never covers the film's captions or labels */
.v4-film__ui {
  display: flex; align-items: center; gap: 14px;
  margin-top: calc(var(--v4-mark-off) + 8px);
  color: var(--v4-ink);
}
.v4-film__time { font-size: 12px; color: var(--v4-ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-film__fs {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--v4-line-2); background: transparent; color: var(--v4-ink);
}
.v4-film__fs:hover { border-color: var(--v4-ink); }
.v4-film__fs svg { width: 14px; height: 14px; fill: currentColor; }
.v4-film.is-missing .v4-film__ui, .v4-film.is-missing .v4-film__big { display: none; }
.v4-chapters {                        /* the film's timeline with its chapter marks */
  position: relative; flex: 1 1 auto; height: 30px; cursor: pointer; touch-action: none;
}
.v4-chapters__track { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--v4-line-2); }
.v4-chapters__done { position: absolute; left: 0; top: 50%; height: 2px; margin-top: -1px; width: var(--v4-film-p, 0%); background: var(--v4-ink); }
.v4-chapters__mark {
  position: absolute; top: 50%; width: 2px; height: 12px; margin: -6px 0 0 -1px; padding: 0; border: 0;
  background: var(--v4-seam);          /* a chapter cut is a camera seam of the film */
}
.v4-chapters__mark::after {           /* hit area */
  content: ""; position: absolute; left: -10px; right: -10px; top: -8px; bottom: -8px;
}
.v4-chapters__mark span {
  position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
  padding: 3px 7px; background: var(--v4-ink); color: var(--v4-paper);
  font-size: 11.5px; line-height: 1.2; white-space: nowrap;
  opacity: 0; transition: opacity var(--v4-t1) var(--v4-ease); pointer-events: none;
}
/* one label at a time (the mark under the pointer or focus); the current chapter is named on the slate */
.v4-chapters__mark:hover span, .v4-chapters__mark:focus-visible span { opacity: 1; }
.v4-chapters__mark:first-of-type span { left: 0; transform: none; }
.v4-chapters__mark:last-of-type span { left: auto; right: 0; transform: none; }
.v4-film__big {                       /* play (no autoplay: reduced motion, autoplay refused, or paused by the viewer):
                                         a small plate in the corner, off the poster's title and footnote */
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 52px; height: 52px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: rgba(20, 21, 24, 0.82); color: #fff;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6);
}
.v4-film__big svg { width: 18px; height: 18px; fill: currentColor; margin-left: 3px; }
.v4-film__big[hidden] { display: none; }
.v4-film:fullscreen {
  background: #0d0d0f; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 24px 12px; color: #fff;
}
.v4-film:fullscreen .v4-screen__box,
.v4-film:fullscreen .v4-film__ui,
.v4-film:fullscreen .v4-slate { width: min(100%, calc((100vh - 110px) * var(--v4-film-arn, 1.7778))); }
.v4-film:fullscreen .v4-gate { box-shadow: none; }
.v4-film:fullscreen .v4-marks { display: none; }
.v4-film:fullscreen .v4-film__ui { color: #fff; }
.v4-film:fullscreen .v4-chapters__track { background: rgba(255, 255, 255, 0.3); }
.v4-film:fullscreen .v4-chapters__done { background: #fff; }
.v4-film:fullscreen .v4-film__time, .v4-film:fullscreen .v4-slate { color: rgba(255, 255, 255, 0.72); }
.v4-film:fullscreen .v4-film__fs { color: #fff; border-color: rgba(255, 255, 255, 0.4); }
.v4-film:fullscreen .v4-play { background: #fff; color: var(--v4-ink); border-color: #fff; }

/* credits: one line under the film */
.v4-credits {
  width: var(--v4-film-w);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px var(--v4-s6);
  margin-top: clamp(22px, 3.4vh, 36px); padding-top: 14px; border-top: 1px solid var(--v4-line);
}
.v4-credits__line {
  flex: 1 1 420px;
  font-family: var(--v4-serif);
  font-size: clamp(17px, 1.35vw, 20.5px);
  line-height: 1.38;
  color: var(--v4-ink);
  text-wrap: balance;
}
.v4-credits__anon { font-size: var(--v4-fs-xs); color: var(--v4-ink-3); letter-spacing: 0.01em; white-space: nowrap; }
.v4-credits__full {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; border: 0; background: none;
  font-size: var(--v4-fs-xs); font-weight: 600; color: var(--v4-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
.v4-credits__full svg { width: 13px; height: 13px; fill: currentColor; }
.v4-credits__full:hover { text-decoration-thickness: 2px; }
.v4-credits__full[disabled] { opacity: 0.45; cursor: default; text-decoration: none; }
.v4-open__cue {
  align-self: center;
  display: flex; align-items: center; gap: 12px;
  margin-top: clamp(22px, 4vh, 40px);
  font-size: var(--v4-fs-xs); color: var(--v4-ink-3); text-decoration: none; width: max-content;
}
.v4-open__cue i { display: block; width: 44px; height: 1px; background: var(--v4-ink-3); position: relative; overflow: hidden; }
.v4-open__cue i::after { content: ""; position: absolute; inset: 0; background: var(--v4-ink); transform: translateX(-100%); }
html.v4-js:not(.v4-reduced) .v4-open__cue i::after { animation: v4-cue 2.4s var(--v4-ease-io) infinite; }
@keyframes v4-cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* =============================================================== the reel: page navigation as a film timeline
 * At rest it is one hairline at the foot of the screen (the played part in ink, camera-seam gaps between scenes) on
 * a band of paper that fades upwards, so it never reads as a line struck through the content under it; hover /
 * keyboard focus lifts it and names every scene. The band takes no pointer events. */
.v4-reel {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--v4-z-reel);
  padding: 0 var(--v4-gutter) 5px;
  transition: transform var(--v4-t2) var(--v4-ease), opacity var(--v4-t2) var(--v4-ease), background var(--v4-t2) var(--v4-ease);
  pointer-events: none;
}
.v4-reel::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; pointer-events: none;
  background: linear-gradient(to top, var(--v4-paper) 42%, rgba(243, 241, 236, 0));
}
.v4-reel.is-away { transform: translateY(110%); opacity: 0; }
.v4-reel:hover, .v4-reel:focus-within, .v4-reel.is-scrubbing {
  background: linear-gradient(to top, rgba(243, 241, 236, 0.97) 45%, rgba(243, 241, 236, 0));
}
.v4-reel__list {
  position: relative;
  display: flex; gap: 5px; margin: 0 auto; padding: 0; list-style: none;
  max-width: var(--v4-max);
  height: var(--v4-reel-h);
  pointer-events: auto;
  touch-action: none;
}
.v4-reel__seg { flex: 1 1 0; min-width: 0; position: relative; }
.v4-reel__seg + .v4-reel__seg::before {   /* the gap between two scenes is a camera seam */
  content: ""; position: absolute; left: -3.5px; bottom: 1px; height: 7px; width: 0;
  border-left: 1px dashed var(--v4-seam); opacity: 0.75;
}
.v4-reel__a {
  position: absolute; inset: 0; display: block; text-decoration: none; color: var(--v4-ink-3);
}
.v4-reel__a::before {                 /* the segment line */
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px;
  background: linear-gradient(90deg, var(--v4-ink) var(--f, 0%), var(--v4-line-2) var(--f, 0%));
  transition: height var(--v4-t1) var(--v4-ease), bottom var(--v4-t1) var(--v4-ease);
}
.v4-reel__seg.is-past .v4-reel__a::before { --f: 100%; }
.v4-reel__list:hover .v4-reel__a::before, .v4-reel__list:focus-within .v4-reel__a::before { height: 4px; bottom: 5px; }
.v4-reel__a:focus-visible { outline-offset: -2px; box-shadow: none; }
.v4-reel__name {
  position: absolute; left: 0; bottom: 14px; max-width: 100%;
  font-size: 11.5px; line-height: 1.2; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--v4-t2) var(--v4-ease), transform var(--v4-t2) var(--v4-ease);
}
.v4-reel__list:hover .v4-reel__name, .v4-reel__list:focus-within .v4-reel__name { opacity: 1; transform: none; }
.v4-reel__seg.is-now .v4-reel__name { color: var(--v4-ink); }
.v4-reel.is-scrubbing .v4-reel__list { cursor: grabbing; }

/* =============================================================== film grain over still screens (.v4-grain on a gate) */
.v4-grain::after {
  content: ""; position: absolute; inset: -40px; z-index: 4; pointer-events: none;
  background: url("../img/ui/grain.png") 0 0 / 160px 160px repeat;
  opacity: 0.1; mix-blend-mode: overlay;
}
html.v4-js:not(.v4-reduced) .v4-grain::after { animation: v4-grain 0.8s steps(4) infinite; }
@keyframes v4-grain {
  0% { transform: translate(0, 0); } 25% { transform: translate(-17px, 9px); }
  50% { transform: translate(11px, -23px); } 75% { transform: translate(-29px, -7px); } 100% { transform: translate(0, 0); }
}

/* =============================================================== footer */
.v4-end {
  margin-top: var(--v4-scene-gap);
  padding: var(--v4-s7) 0 var(--v4-s8);
  border-top: 1px solid var(--v4-line);
  font-size: var(--v4-fs-xs); color: var(--v4-ink-3);
}
.v4-end__row { display: flex; flex-wrap: wrap; gap: var(--v4-s3) var(--v4-s6); align-items: baseline; justify-content: space-between; }
.v4-end__name { font-family: var(--v4-display); font-stretch: 75%; font-weight: 650; font-size: 22px; color: var(--v4-ink); letter-spacing: -0.01em; }

/* =============================================================== zoom dialog (V4.zoom) */
.v4-zoom { max-width: min(96vw, 1800px); max-height: 94vh; padding: 0; border: 0; background: var(--v4-paper); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); }
.v4-zoom::backdrop { background: rgba(243, 241, 236, 0.92); }
.v4-zoom img { max-width: 100%; max-height: calc(94vh - 56px); margin: 0 auto; }
.v4-zoom__close { margin: 8px; float: right; }

/* =============================================================== responsive */
@media (max-width: 719px) {
  :root { --v4-mark: 10px; --v4-mark-off: 6px; --v4-reel-h: 26px; }
  body { font-size: 15.5px; }
  .v4-open { --v4-film-w: 100%; }
  .v4-title { flex-direction: column; align-items: flex-start; font-size: clamp(64px, 21.5vw, 104px); line-height: 0.86; margin-bottom: 44px; }
  .v4-title__with { font-size: 0.36em; transform: none; margin: 1.05em 0 0.12em 0.06em; }
  .v4-title__note { font-size: 11.5px; top: calc(100% + 3px); }
  .v4-credits { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: var(--v4-s5); }
  .v4-credits__line { flex: none; }
  .v4-film__ui { gap: 10px; }
  .v4-film__time { display: none; }
  .v4-film__big { right: 10px; bottom: 10px; width: 46px; height: 46px; }
  .v4-reel__name { display: none; }
  .v4-reel__list:focus-within .v4-reel__seg.is-now .v4-reel__name { display: block; overflow: visible; }
  .v4-slate { flex-direction: column; align-items: flex-start; }
  .v4-slate__r { margin-left: 0; text-align: left; }
}
@media print {
  .v4-reel, .v4-skip, .v4-film__ui { display: none; }
}