/* Loota, draft F: the film continues, on light, neutral paper (a copy of draft E, which is a copy of D; see the
   colour variables below and the blocks headed "Draft E" and "Draft F" at the end).
   One file, written by hand. The system is described in README.md; the short version:

   GRID      The frame is 16 columns wide. One column (6.25 % of the width) is the film's
             title margin, and everything hangs from it: wordmark, titles, slates, scrubber.
             Running text starts at column 5 and is 7 columns wide; notes sit in columns 12-14.
   TYPE      Inter (display cut at large sizes) for what the film puts on screen,
             Source Serif 4 for the voice-over, JetBrains Mono for the script's own marks.
   COLOUR    Darks taken from the film: office night, desk black, hall green-black.
             Gold #d9b02a is Loota's own accent (the product's interface uses the same value): the full stop of
             the wordmark, shot numbers, the timeline, and the one link or button that matters on a screen.
   PICTURES  Three settings only: a shot (fills the screen), a strip (2.39:1), the real screen.
   TITLES    Three weights, as in a film: a line on a shot, a title card on the dark ground (few),
             and a take, set like a script: slate in the margin, a smaller line, then the text.
   MOTION    Cuts and slow moves. On wide screens a shot holds while its text rises over it.
             Nothing is unreadable without them. */

/* ---------- typefaces (private names: a system font can never stand in unnoticed) ---------- */
@font-face { font-family: "Loota Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Loota Serif"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("../fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Loota Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Loota Inter Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 96%; }
@font-face { font-family: "Loota Inter Fallback Small"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); size-adjust: 104%; }
@font-face { font-family: "Loota Serif Fallback Small"; src: local("Georgia"); size-adjust: 103%; }

:root {
  --col: 6.25vw;                 /* 1/16 of the frame */
  --strip: 48px;                 /* the scrubber */
  --head: 72px;                  /* the header row */

  --night: #fcf6ea;              /* the page: light cream paper */
  --wall:  #f7f0e2;
  --desk:  #f3ecdc;              /* bars and the footer: the same paper, a step deeper */
  --hall:  #fcf6ea;
  --paper: #15171b;              /* text: near black, a little cool */
  --light: #f6efe2;              /* text that lies on a picture or on the film */
  --stage: #0b0806;              /* behind the film */
  --accent: #8a6c0a;             /* gold darkened for thin lines and focus on the light paper */
  --dim:   #4b4e56;              /* secondary text */
  --faint: #6c7079;              /* captions */
  --line:  rgba(21, 23, 27, .22);
  --gold:  #d9b02a;              /* Loota's gold, as in the product's interface */
  --gold-ink: #071911;           /* text on gold */
  --cold:  #2f4a3c;              /* the hall's green, darkened for the paper */

  /* Until a typeface has arrived the browser sets the text in a stand-in. These are the system faces whose
     widths are closest to ours (measured with _review/fontmetrics.js), so the page hardly moves when ours arrive. */
  --sans:  "Loota Inter", "Loota Inter Fallback", sans-serif;
  --serif: "Loota Serif", Georgia, serif;
  --mono:  "Loota Mono", "Courier New", monospace;

  /* the film's two title sizes, as shares of the frame width (66 px and 104 px at 1920) */
  --t-film:  clamp(1.75rem, 3.4375vw, 4.5rem);     /* the film's own running titles */
  --t-title: clamp(1.875rem, 4.05vw, 5.5rem);      /* a line on a shot, a title card */
  --t-end:   clamp(2.25rem, 5.4167vw, 7.25rem);
  --t-body:  clamp(1.125rem, .95rem + .55vw, 1.625rem);
  --t-h3:    clamp(1.25rem, 1.02rem + .8vw, 1.875rem);
  --t-small: clamp(.9375rem, .86rem + .25vw, 1.125rem);
  --t-take:  clamp(1.375rem, 1.05rem + 1.25vw, 2.5rem);     /* the line of a take */
  --t-note:  clamp(.875rem, .8rem + .22vw, 1.0625rem);      /* notes and captions: the voice-over, lowered */
  --t-mono:  clamp(.75rem, .7rem + .16vw, .875rem);          /* the script's marks only */
  --t-scrub: clamp(.75rem, .375rem + .4167vw, .875rem);      /* the scrubber: 12 px up to a 1440 frame, 14 px at 1920 */

  /* spacing: 8 px times 1, 2, 3, 5, 8, 13, 21 */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 40px; --s5: 64px; --s6: 104px; --s7: 168px;

  --shade: 0 2px 24px rgba(0, 0, 0, .55);          /* the film's own title shadow */
  --shade-busy: 0 1px 2px rgba(0, 0, 0, .5), 0 2px 24px rgba(0, 0, 0, .7), 0 0 56px rgba(0, 0, 0, .75);
  --shade-mark: 0 0 2px rgba(0, 0, 0, .85), 0 1px 12px rgba(0, 0, 0, .8), 0 0 30px rgba(0, 0, 0, .7);   /* small marks lying on the film: wordmark, menu, buttons */
}

@media (max-width: 899px) {
  /* at the small sizes both faces run a little wider (optical sizing), so the stand-ins are scaled up to match */
  :root { --sans: "Loota Inter", "Loota Inter Fallback Small", sans-serif; --serif: "Loota Serif", "Loota Serif Fallback Small", Georgia, serif; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--desk); color-scheme: light; -webkit-text-size-adjust: 100%;
  scroll-padding-bottom: calc(var(--strip) + 4px); }
/* smooth only once the page has settled: a link to an anchor on another page must not fly through the whole page */
@media (prefers-reduced-motion: no-preference) { html.settled { scroll-behavior: smooth; } }
body { margin: 0; padding-bottom: var(--strip); background: var(--night); color: var(--paper);
  font: 400 var(--t-body)/1.55 var(--serif); font-optical-sizing: auto;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word; }
img, video { display: block; max-width: 100%; }
picture { display: contents; }
::selection { background: var(--gold); color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: rgba(21, 23, 27, .45); transition: text-decoration-color .2s; }
a:hover { text-decoration-color: currentColor; }
a.matters { color: var(--gold); text-decoration-color: rgba(217, 176, 42, .6); }   /* the one link that matters */

.skip { position: absolute; left: var(--col); top: -4rem; z-index: 50; padding: 10px 14px; background: var(--paper);
  color: var(--night); font: 600 .9375rem/1 var(--sans); text-decoration: none; }
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- what the film puts on screen ---------- */
.title { margin: 0; font: 600 var(--t-title)/1.06 var(--sans); letter-spacing: -.022em; text-wrap: balance;
  text-shadow: var(--shade); }
.title--end { font-size: var(--t-end); line-height: 1.02; letter-spacing: -.03em; }
.title .sent { display: inline-block; }   /* a title of two sentences breaks between them, not inside one */

/* the slate: shot number, a short rule, place and time */
.slate { margin: 0 0 1.5em; font: 500 var(--t-mono)/1.35 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--slate, var(--paper)); }
.shot__text .slate { text-shadow: var(--shade); }     /* a shade only where the slate lies on a picture */
.slate__n::after { content: ""; display: inline-block; width: 2.4em; height: 1px; margin: 0 .9em 0 1em;
  background: currentColor; opacity: .55; vertical-align: .32em; }

/* ---------- header ---------- */
.head { position: absolute; z-index: 10; top: 0; left: 0; right: 0; height: var(--head); padding: 0 var(--col);
  display: flex; align-items: center; justify-content: space-between;
  text-shadow: var(--shade-mark); }
.wordmark { font: 650 1.375rem/1 var(--sans); letter-spacing: -.02em; text-decoration: none; padding: 8px 0; }
.nav ul { display: flex; gap: clamp(18px, 2.2vw, 40px); margin: 0; padding: 0; list-style: none; }
.nav a { display: block; padding: 8px 0; font: 500 .9375rem/1 var(--sans); letter-spacing: -.005em; text-decoration: none; }
.nav a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
/* where the picture is bright under the header, the header gets its own dark bar above the picture */
.head--bar { position: relative; background: var(--desk); text-shadow: none; }
.head--bar ~ main .shot--top { --shot-h: max(100svh - var(--strip) - var(--head), 360px); padding-top: 0; }
.head--bar ~ main .shot--top.shot--short { --shot-h: max((100svh - var(--strip)) * .66 - var(--head), 280px); }
.menu-nav { display: none; }

@media (max-width: 899px) {
  :root { --head: 60px; }
  .nav { display: none; }
  .menu-nav { display: block; }
  .menu summary { list-style: none; cursor: pointer; padding: 16px 0 16px 16px; font: 500 .75rem/1 var(--mono);
    letter-spacing: .16em; text-transform: uppercase; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu[open] summary { color: var(--dim); }
  .menu ul { position: absolute; left: 0; right: 0; top: var(--head); margin: 0; padding: var(--s1) var(--col) var(--s3);
    list-style: none; background: var(--desk); border-bottom: 1px solid var(--line); text-shadow: none; }
  .menu li + li { border-top: 1px solid var(--line); }
  .menu a { display: block; padding: 15px 0; font: 600 1.25rem/1.1 var(--sans); letter-spacing: -.015em; text-decoration: none; }
  .menu a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
}

/* ---------- the hero: the film ---------- */
.hero { position: relative; height: 100svh; padding-bottom: var(--strip); display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr); align-items: center; background: var(--desk); overflow: hidden; }
.hero__stage, .hero__titles { grid-area: 1 / 1; position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 100%; }
.hero__stage { overflow: hidden; isolation: isolate; background: #000 center / cover no-repeat; }
.hero__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-aspect-ratio: 3/2) {
  /* Nearly as wide as the film, or wider: the film fills the window, down to its bottom edge. The scrubber lies
     on it (see .on-film) and the buttons stand above the scrubber. The crop is taken from the left, because the
     last frame keeps its one light near the right edge. */
  .hero { padding-bottom: 0; }
  .hero__stage, .hero__titles { aspect-ratio: auto; height: 100%; }
  .hero__film { object-position: 82% 50%; }
  .hero__stage::before, .hero__stage::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; pointer-events: none; }
  /* a falloff at the top edge for the menu, and at the foot only as much as the buttons and the scrubber's marks need */
  .hero__stage::before { top: 0; height: calc(var(--head) * 2.2); transition: opacity .6s;
    background: linear-gradient(rgba(0, 0, 0, .72), rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, 0)); }
  .hero__stage::after { bottom: 0; height: calc(var(--strip) + 96px); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .6) 70%); }
}
/* While the film runs it runs without the menu, and so without the falloff that is there for the menu: the film's
   top edge is left alone. Both are back on pause, at the end, under the pointer and on keyboard focus. The page
   opens in this state (the script after the video tag sets it), so the menu is never drawn and then taken away. */
/* (Draft F: the menu bar is always there, so this no longer applies. See "The menu bar" at the end of the file.) */
.hero__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .62) 55%, rgba(0, 0, 0, .7)); }
.hero__titles { pointer-events: none; }
.hero__t { position: absolute; left: var(--col); right: var(--col); bottom: 10.9%; opacity: 0; will-change: opacity, transform; font-size: var(--t-film); }
.hero__end { position: absolute; left: var(--col); right: var(--col); top: 47%; transform: translateY(-50%); opacity: 0; }
.hero__mark { margin: 1.5em 0 0; font: 400 calc(var(--t-end) * .3)/1 var(--mono); letter-spacing: .32em; color: var(--gold);
  text-shadow: var(--shade); }
.hero__cta { margin: 2.6em 0 0; max-width: none; font: 500 clamp(.9375rem, 1.1vw, 1.375rem)/1.4 var(--sans); letter-spacing: -.005em;
  text-shadow: var(--shade); opacity: 0; visibility: hidden; }
.hero__cta a { pointer-events: auto; display: inline-block; padding: 10px 0; }
.hero__controls { grid-area: 1 / 1; align-self: end; justify-self: end; z-index: 2; display: flex; align-items: center;
  gap: clamp(16px, 2vw, 32px); padding: 0 var(--col) 8px; }
.ctl { appearance: none; margin: 0; padding: 16px 0; border: 0; background: none; color: var(--paper); cursor: pointer; white-space: nowrap;
  text-align: left; font: 400 var(--t-mono)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-shadow: var(--shade-mark); }
.ctl:hover:not(:disabled) { text-decoration: underline; text-underline-offset: .35em; }
.ctl:disabled { opacity: .45; cursor: default; }
@media (min-aspect-ratio: 3/2) { .hero__controls { padding-bottom: calc(var(--strip) + 4px); } }   /* above the scrubber, which lies on the film */
/* each button keeps the width of its longest label, so nothing moves under the pointer when a label changes */
.ctl[data-ctl="sound"] { min-width: calc(9ch + 1.44em); }
.ctl[data-ctl="play"] { min-width: calc(6ch + .96em); }

@media (max-height: 480px) and (min-aspect-ratio: 3/2) { .hero__end { top: 55%; } .hero__cta { margin-top: 1.2em; } }
/* a low, wide window (a phone on its side): the titles keep clear of the row of buttons */
@media (max-height: 640px) and (min-aspect-ratio: 3/2) { .hero__t { bottom: calc(var(--strip) + 64px); } }
/* between square and 3:2 the whole frame is shown, window and all: the end card stands a little higher,
   so the wordmark is above the window sill and the link below it */
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) { .hero__end { top: 41%; } }

/* Without JavaScript there is no film (its file is named by the script) and no clock to time the titles by:
   the hero is the film's last frame with the end title and the link. The buttons would do nothing, so they go. */
html:not(.js) .hero__controls, html:not(.js) .hero__film, html:not(.js) .hero__t { display: none; }
html:not(.js) .hero__stage { background-image: url("../media/poster-last.webp"); }
html:not(.js) .hero__end, html:not(.js) .hero__cta { opacity: 1; visibility: visible; }

/* a viewport taller than it is wide: the whole frame at full width, the titles in the dark under it */
@media (max-aspect-ratio: 1/1) {
  /* The frame is letterboxed in the dark, and each title appears directly under it, the way a subtitle sits under
     a picture: frame and title are one unit with equal dark above and below. The end card hangs from the same line. */
  .head, .hero .title, .hero__mark, .hero__cta, .ctl { text-shadow: none; }
  .hero { display: flex; flex-direction: column; height: auto; min-height: 100svh; padding-top: var(--head); }
  .hero__stage { flex: none; max-height: none; margin-top: auto; }
  .hero__shade { display: none; }
  .hero__titles { flex: 0 0 auto; aspect-ratio: auto; max-height: none; min-height: 13.5rem; display: flex; flex-direction: column;
    justify-content: flex-start; padding: var(--s3) var(--col) var(--s3); margin-bottom: auto; }
  .hero__t { top: var(--s3); bottom: auto; font-size: clamp(1.75rem, 7.6vw, 3.5rem); }
  .hero__end { position: static; transform: none; }
  .hero__end .title--end { font-size: clamp(1.75rem, 9.5vw, 4.75rem); }
  .hero__mark { font-size: clamp(.75rem, 3.2vw, 1.5rem); margin-top: 1.6em; }
  .hero__cta { margin-top: 2em; max-width: none; font-size: clamp(.9375rem, 2.6vw, 1.25rem); }
  .hero__controls { align-self: stretch; justify-content: flex-start; padding-bottom: 6px; }
}
@media (max-aspect-ratio: 1/1) and (max-height: 620px) {
  /* a very short phone: the same order, closer together, so the hero is still one screen */
  .hero__titles { min-height: 0; padding-top: 12px; padding-bottom: 4px; }
  .hero__mark { margin-top: 1.1em; }
  .hero__cta { margin-top: .9em; }
  .hero__cta a { padding: 6px 0; }
}

/* Directly under the film the voice-over begins: what Loota is, in the text column, and beside it,
   in the notes column, the note about the film. Still on the film's own black. */
.filmnote { background: var(--desk); border-top: 1px solid var(--line); }
.filmnote .vo { padding: var(--s5) 0; }
.filmnote .vo > .lead { margin: 0; }
.note__label { display: block; margin-bottom: .55em; font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 899px) {
  .filmnote .vo { padding: var(--s4) 0 var(--s3); }
  .filmnote .vo > .lead { margin-bottom: var(--s3); }
  .filmnote .vo > .note { margin: 0; }
}

/* ---------- a scene: one shot, then its voice-over ---------- */
.scene { position: relative; background: var(--ground, var(--night)); }
.scene--hall { --ground: var(--hall); --slate: var(--cold); --dim: #4b4e56; --faint: #6c7079; }
.scene--desk { --ground: var(--desk); }

/* a shot: the picture fills the screen, the line sits in its quiet part */
.shot { --shot-h: max(100svh - var(--strip), 400px); position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  height: var(--shot-h); isolation: isolate; z-index: 1; background: #000; }   /* above the next scene, so the credit that hangs under the picture is never covered */
.shot__pic { grid-area: 1 / 1; position: relative; margin: 0; overflow: hidden; }
.shot__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.shot__text { grid-area: 1 / 1; z-index: 1; align-self: end; padding: 0 var(--col) calc(var(--shot-h) * .109);
  margin-left: calc(var(--col) * var(--at, 0)); max-width: calc(var(--col) * (var(--w, 9) + 2) + var(--col) * var(--at, 0)); }
.shot--busy .title, .shot--busy .slate { text-shadow: var(--shade-busy); }
/* the hall has one quiet part: the dark band at the horizon, 27-33 % down the picture. The line goes there. */
.shot--horizon .shot__text { --pic-h: max(var(--shot-h), 56.25vw); align-self: start; max-width: none; padding-bottom: 0;
  margin-top: calc(var(--pic-h) * .302 - (var(--pic-h) - var(--shot-h)) / 2); transform: translateY(-50%); }
@media (min-width: 760px) { .shot--horizon .title { white-space: nowrap; } }
.shot__credit { position: absolute; z-index: 1; top: 100%; right: 0; margin: 0; padding: 12px var(--col) 0;
  font: 400 var(--t-note)/1.5 var(--serif); color: var(--faint); }
/* the line on the wall, above the furniture: for a still whose lower left is not quiet */
.shot--wallline .shot__text { align-self: start; padding-bottom: 0; margin-top: calc(var(--shot-h) * .16); }
.shot--short { --shot-h: max((100svh - var(--strip)) * .66, 320px); }

@media (max-aspect-ratio: 1/1) {
  /* on a tall screen the line goes under the picture, on the dark ground */
  .shot { display: flex; flex-direction: column; height: auto; min-height: 0; background: var(--ground, var(--night)); overflow: visible; }
  .shot__pic { aspect-ratio: 4 / 5; max-height: calc(100svh - var(--strip)); width: 100%; }
  /* a page's opening picture leaves room for the page's title on the first screen (tablets, a half-width window) */
  .shot--top .shot__pic { max-height: calc((100svh - var(--strip)) * .66); }
  .shot--top { padding-top: var(--head); }
  .shot__text, .shot--horizon .shot__text, .shot--endcard .shot__text, .shot--wallline .shot__text { align-self: stretch; margin: 0; max-width: none; padding: var(--s3) var(--col) 0; transform: none; }
  .shot--horizon .title { white-space: normal; }
  .shot__text .title, .shot__text .slate { text-shadow: none; }
  .shot__credit { position: static; order: 1; align-self: flex-end; padding: 10px var(--col) 0; }
  .shot--short, .head--bar ~ main .shot--top, .head--bar ~ main .shot--top.shot--short { height: auto; min-height: 0; }
  .shot__text { order: 2; }
  .shot__text:has(+ .shot__credit) { padding-top: var(--s2); }
  .title { font-size: clamp(1.875rem, 7vw, 3.5rem); }
  .title--end { font-size: clamp(2.125rem, 8.4vw, 4.5rem); }
}

/* the last shot is set like the film's end card: the line on the wall, the one link under it */
.shot--endcard .shot__text { align-self: center; padding-bottom: 4svh; }
.shot__cta { margin: 1.5em 0 0; font: 500 clamp(1.0625rem, 1.5vw, 1.75rem)/1.3 var(--sans); letter-spacing: -.01em; text-shadow: var(--shade-busy); }
@media (max-aspect-ratio: 1/1) { .shot--endcard .shot__text { padding-bottom: 0; } .shot__cta { text-shadow: none; } }

.only-tall { display: none !important; }
@media (max-aspect-ratio: 1/1) { .only-tall { display: block !important; } .only-wide { display: none !important; } }

/* the voice-over: one calm column, starting at column 5 */
.vo { display: grid; grid-template-columns: var(--col) 3fr 7fr 1fr 3fr var(--col); align-items: start;
  padding: var(--s5) 0 var(--s6); }
.vo > * { grid-column: 3; min-width: 0; }
.vo > p, .vo > ul, .vo > ol, .vo > h3 { max-width: 33em; }
.vo > p { margin: 0 0 .95em; text-wrap: pretty; }
.vo > p:last-child { margin-bottom: 0; }
.vo > h3 { margin: 1.5em 0 .5em; font: 600 1em/1.3 var(--sans); letter-spacing: -.012em; text-wrap: balance; }
.vo > h3:first-child, .vo > .vo__label + h3 { margin-top: 0; }
.vo > .vo__label { grid-column: 2; margin: .5em var(--s3) 0 0; font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--slate, var(--dim)); }
.vo > .vo__label.slate, .qa > .slate { color: var(--slate, var(--paper)); letter-spacing: .13em;
  display: grid; grid-template-columns: auto minmax(0, 1fr); }      /* a long slate wraps beside its number, not under it */
.vo > .vo__label.slate .slate__n::after, .qa > .slate .slate__n::after { width: 1.7em; margin: 0 .75em 0 .8em; }
@media (min-width: 900px) and (max-width: 1099px) {
  /* the margin column is narrow here: the slate gives up its rule so that no word has to be cut */
  .vo > .vo__label.slate .slate__n::after, .qa > .slate .slate__n::after { width: 0; margin: 0 .5em; }
  .vo > .vo__label { margin-right: var(--s2); letter-spacing: .1em; }
  .vo > .vo__label.slate { letter-spacing: .1em; }
}
/* a note: the same voice, lowered, in the margin */
.vo > .note { grid-column: 5; grid-row-end: span 2; margin: .5em 0 0; font: 400 var(--t-note)/1.5 var(--serif);
  color: var(--dim); text-wrap: pretty; }
.vo > .wide { grid-column: 2 / 6; }
.vo > .more { margin-top: .6em; font: 500 var(--t-small)/1.4 var(--sans); letter-spacing: -.005em; }
.more a, .shot__cta a, .qa .end a { display: inline-block; padding: 12px 0; margin: -12px 0; }
.vo strong { font-weight: 600; }
.nb { white-space: nowrap; }
.vo--tight { padding-bottom: var(--s5); }
.vo--end { padding-bottom: calc(var(--s6) + var(--s3)); }
.gap { margin-top: var(--s4) !important; }
.gap-l { margin-top: var(--s5) !important; }

/* a title card: no picture, the line on the dark ground, hung from the film's margin.
   Its slate stands in the margin column beside the first paragraph. */
.vo--card { padding-top: var(--s6); }
.shot + .vo--card, .cut + .vo--card, .strip-cap + .vo--card { padding-top: var(--s5); }
.vo > .title { grid-column: 2 / 6; grid-row: 1; max-width: 21em; margin: 0 0 var(--s5); text-shadow: none; }
.vo--card > .slate, .vo--take > .slate { grid-row: 2; margin-bottom: var(--s3); }
/* a title card that follows text, not a picture, is set off by a hairline */
.vo--rule { position: relative; }
.vo--rule::after { content: ""; position: absolute; top: 0; left: var(--col); right: var(--col); height: 1px; background: var(--line); }

/* a take: set like a page of the script. A hairline, the slate in the margin, the line, then the text. */
.vo--take { padding-top: 0; }
.vo--take::before { content: ""; grid-column: 2 / 6; height: 1px; margin-bottom: var(--s4); background: var(--line); }
.vo--take > .title { grid-column: 3 / 6; grid-row: 2; max-width: 23em; margin: 0 0 .8em; font-size: var(--t-take); line-height: 1.12;
  letter-spacing: -.02em; }
.vo--take > .slate { margin-top: calc(var(--t-take) * .92 - var(--t-mono) * 1.03); }

.lines { margin: 0 0 .95em; padding: 0; list-style: none; }
.lines li { padding: .5em 0; border-top: 1px solid var(--line); }
.lines li:last-child { border-bottom: 1px solid var(--line); }

@media (max-width: 899px) {
  .vo { grid-template-columns: var(--col) minmax(0, 1fr) var(--col); padding: var(--s4) 0 var(--s5); }
  .vo > *, .vo > .vo__label, .vo > .note, .vo > .wide, .vo > .title, .vo--take > .title, .vo--take::before, .vo > .screen--col { grid-column: 2; grid-row: auto; }
  .vo > .vo__label { margin: 0 0 var(--s2); }
  .vo > .vo__label.slate { margin: 0 0 1.4em; }
  .vo > .title { margin-bottom: var(--s3); }
  .vo--take > .title { margin-bottom: .8em; }
  .vo > .note { margin: -.2em 0 1.4em; padding-left: var(--s2); border-left: 1px solid var(--line); }
  .vo--end { padding-bottom: var(--s6); }
  .vo--card { padding-top: var(--s5); }
  .vo--take { padding-top: 0; }
  .vo--take::before { margin-bottom: var(--s3); }
  .shot + .vo--card, .cut + .vo--card, .strip-cap + .vo--card { padding-top: var(--s3); }
  .vo > .vo__label + .gap { margin-top: 0 !important; }
}

/* credits: role on the left, name on the right, a hairline between rows */
.credits { grid-column: 2 / 4 !important; margin: var(--s2) 0 var(--s4); }
.credits > div { display: grid; grid-template-columns: 3fr 7fr; padding: .62em 0; border-top: 1px solid var(--line); }
.credits > div:last-child { border-bottom: 1px solid var(--line); }
.credits dt { padding: .42em var(--s3) 0 0; font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.credits dd { margin: 0; max-width: 33em; }
.credits dd small { display: block; font: 400 var(--t-note)/1.5 var(--serif); color: var(--dim); margin-top: .3em; }
.credits dd small + small { margin-top: .7em; }
@media (max-width: 899px) {
  .credits { grid-column: 2 !important; }
  .credits > div { grid-template-columns: minmax(0, 1fr); }
  .credits dt { padding: 0 0 .3em; }
}

/* a real table, for what is stored and who sees it */
.tbl { grid-column: 2 / 6 !important; margin: var(--s2) 0 var(--s4); overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: 1.45; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .85em var(--s3) .85em 0; border-top: 1px solid var(--line); }
.tbl thead th { border-top: 0; padding-top: 0; font: 500 var(--t-mono)/1.4 var(--mono); letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); }
.tbl tbody th { font: 600 var(--t-small)/1.45 var(--sans); letter-spacing: -.005em; width: 21.43%; }
.tbl tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
@media (max-width: 899px) {
  .tbl { grid-column: 2 !important; }
  .tbl table, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; width: auto; }
  .tbl thead { display: none; }
  .tbl tbody th { width: auto; padding: .9em 0 .2em; }
  .tbl td { border-top: 0; padding: 0 0 .5em; }
  .tbl td::before { content: attr(data-h); display: block; font: 500 var(--t-mono)/1.6 var(--mono); letter-spacing: .14em;
    text-transform: uppercase; color: var(--faint); }
  .tbl td:last-child { padding-bottom: 1em; }
}

/* ---------- the real screen ---------- */
/* Always at its real size or smaller, never enlarged: --nat is the screenshot's width in CSS pixels. */
.screen { margin: var(--s4) 0 var(--s5); }
.vo > .screen:last-child, .screen--phone:has(+ .screen:last-child), .screen--mid:has(+ .screen--full:last-child) { margin-bottom: 0; }
.screen__pan { max-width: var(--nat, none); outline: 1px solid var(--line); outline-offset: -1px; background: #000; }
.screen img { width: 100%; height: auto; }
.screen figcaption, .cap { margin: 12px 0 0; max-width: 44em; font: 400 var(--t-note)/1.5 var(--serif); color: var(--dim); }
@media (min-width: 900px) { .vo > .screen--col { grid-column: 3 / 6; } }
/* the whole window of the product: no wider than it was, and never taller than the reader's own window */
.screen--full .screen__pan { max-width: min(100%, var(--nat, 1280px), (100svh - var(--strip) - 2rem) * 1.6); }
/* The screenshots were captured at twice their size. On a screen of ordinary density (up to 1.5 device pixels per
   CSS pixel) they therefore have pixels to spare and may run to the edge of their column: still never enlarged. */
@media (min-width: 900px) and (max-resolution: 1.5dppx) {
  .screen--col .screen__pan { max-width: min(100%, var(--nat) * 1.333, 1240px); }
  .screen--full .screen__pan { max-width: min(100%, var(--nat, 1280px) * 1.333, (100svh - var(--strip) - 2rem) * 1.6); }
}
.screen--phone { display: none; }
@media (max-width: 1099px) { .screen--full { display: none; } }
@media (min-width: 1100px) { .screen--mid { display: none; } }
@media (max-width: 747px) {
  /* the conversation on a narrow screen: kept legible, it pans, and it opens on the text itself
     (747 px is the width under which the 700 px picture and the margin no longer fit) */
  .screen--mid .screen__pan { max-width: none; margin: 0 calc(var(--col) * -1); padding-left: var(--col); overflow-x: auto; outline: 0;
    border-block: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: rgba(21, 23, 27, .4) transparent; }
  .screen--mid .screen__pan img { width: 700px; max-width: none; }
  .screen--mid .screen__pan:focus-visible { outline: 2px solid var(--paper); outline-offset: -2px; }
  .screen--mid figcaption::after { content: " The picture continues to the right: it can be scrolled sideways."; }
  :lang(fi) .screen--mid figcaption::after { content: " Vieritä kuvaa sivusuunnassa nähdäksesi loput."; }
}
@media (max-width: 699px) {
  .screen--phone { display: block; }
  .screen--phone + .screen { display: none; }
}

/* ---------- a strip: a 2.39:1 cut between two parts ---------- */
.strip { position: relative; margin: 0; aspect-ratio: 2.39 / 1; overflow: hidden; background: #000; }
.strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.strip-cap { padding: 12px var(--col) 0; margin: 0 0 calc(var(--s3) * -1); font: 400 var(--t-note)/1.5 var(--serif); color: var(--faint); text-align: right; }
@media (max-width: 699px) { .strip { aspect-ratio: 16 / 9; } }

/* ---------- the cut: two places side by side ---------- */
.cut { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--desk); }
.cut figure { margin: 0; }
.cut__pic { position: relative; height: min(70svh, 60vw); min-height: 240px; overflow: hidden; background: #000; }
.cut__pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.cut figcaption { padding: 12px var(--s3) 14px; font: 500 var(--t-mono)/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cut figure:first-child figcaption { padding-left: var(--col); color: var(--cold); background: var(--hall); }
.cut figure:last-child figcaption { background: var(--night); }
.cut figcaption span { display: block; margin-top: 3px; letter-spacing: 0; text-transform: none; font: 400 var(--t-note)/1.5 var(--serif); color: var(--faint); }
@media (max-width: 699px) { .cut figcaption { padding-right: var(--s1); } .cut figure:last-child figcaption { padding-left: var(--s2); } }

/* ---------- a drawn diagram ---------- */
.diagram { margin: var(--s3) 0 var(--s4); }
.diagram svg { display: block; width: 100%; height: auto; max-width: 470px; overflow: visible; }
.diagram text { font: 500 12.5px var(--mono); letter-spacing: .08em; fill: var(--paper); }
.diagram .d-dim { fill: var(--dim); font: 400 14.5px var(--serif); letter-spacing: 0; }
.diagram .d-line { fill: none; stroke: var(--paper); stroke-width: 1; }
.diagram .d-faint { fill: none; stroke: rgba(21, 23, 27, .38); stroke-width: 1; }
.diagram .d-dash { fill: none; stroke: var(--paper); stroke-width: 1; stroke-dasharray: 3 5; }
.diagram .d-amber { fill: var(--gold); }
.diagram .d-cold { fill: var(--cold); }

/* ---------- questions ---------- */
.qa { display: grid; grid-template-columns: var(--col) 3fr 7fr 1fr 3fr var(--col); padding: 0 0 var(--s5); }
.qa > * { grid-column: 3; }
.qa h3 { grid-column: 2 / 4; display: grid; grid-template-columns: 3fr 7fr; margin: 0; padding-top: var(--s4); border-top: 1px solid var(--line);
  font: 600 var(--t-h3)/1.16 var(--sans); letter-spacing: -.017em; }
.qa h3 > span { grid-column: 2; max-width: 22em; text-wrap: balance; }
.qa > .title { grid-column: 2 / 6; grid-row: 1; max-width: 21em; margin: 0 0 var(--s5); text-shadow: none; }
.qa > .slate { grid-column: 2 / 4; grid-row: 2; margin: 0 0 var(--s3); }
.qa > .screen { grid-column: 2 / 6; margin: var(--s2) 0 var(--s5); }
.qa > .screen--mid { grid-column: 3 / 6; }
.qa--group { padding-top: var(--s6); }
.strip-cap + .qa--group { padding-top: var(--s5); }
.qa h3::before { content: attr(data-n); grid-column: 1; padding-top: .55em; font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .16em; color: var(--dim); }
.qa p { margin: .7em 0 0; max-width: 33em; text-wrap: pretty; }
.qa p:last-of-type, .qa .end { margin-bottom: var(--s4); }
.qa h3 ~ p + h3 { margin-top: 0; }
.qa > .note { grid-column: 5; grid-row-end: span 2; align-self: start; margin: calc(var(--s4) + .5em) 0 0; font: 400 var(--t-note)/1.5 var(--serif); color: var(--dim); }
@media (max-width: 899px) {
  .qa { grid-template-columns: var(--col) minmax(0, 1fr) var(--col); }
  .qa > *, .qa h3, .qa > .note, .qa > .title, .qa > .slate, .qa > .screen { grid-column: 2; grid-row: auto; }
  .qa > .title { margin-bottom: var(--s4); }
  .qa > .slate { margin-bottom: 1.4em; }
  .qa--group { padding-top: var(--s5); }
  .strip-cap + .qa--group { padding-top: var(--s3); }
  .qa h3 { display: block; padding-top: var(--s3); }
  .qa h3 > span { display: block; }
  .qa h3::before { display: block; padding: 0 0 .9em; }
  .qa > .note { margin: -1em 0 var(--s4); }
}

/* ---------- the form that opens the visitor's own mail program ---------- */
.form { max-width: 33em; margin: var(--s3) 0 0; }
.form label { display: block; margin-top: var(--s3); font: 500 var(--t-small)/1.4 var(--sans); letter-spacing: -.005em; color: var(--dim); }
.form input, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(21, 23, 27, .45);
  border-radius: 0; background: transparent; color: var(--paper); font: 400 var(--t-body)/1.45 var(--serif); }
.form textarea { min-height: 7.5em; resize: vertical; }
.form input:focus-visible, .form textarea:focus-visible { outline: 0; border-bottom-color: var(--paper); box-shadow: 0 2px 0 var(--paper); }
.btn { appearance: none; display: inline-block; margin-top: var(--s4); padding: 15px 22px 16px; border: 1px solid var(--paper); border-radius: 0;
  background: transparent; color: var(--paper); font: 600 var(--t-small)/1 var(--sans); letter-spacing: -.005em; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--paper); color: var(--night); }
.btn--gold { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { border-color: #e8c450; background: #e8c450; color: var(--gold-ink); }
.mail { font: 600 var(--t-title)/1.06 var(--sans); letter-spacing: -.022em; }
.vo > .mail a { display: inline-block; padding: 6px 0; }

/* ---------- continues: the cut to the next page ---------- */
.next { display: grid; grid-template-columns: 6fr 10fr; align-items: stretch; text-decoration: none; background: var(--desk);
  border-top: 1px solid var(--line); }
.next .strip { order: 2; width: 100%; }
.next__text { order: 1; align-self: end; padding: var(--s4) var(--s3) calc(26vw * .109 + 6px) var(--col); }
.next__text .slate { margin-bottom: 1.1em; }
.next__text .title { text-shadow: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em;
  text-decoration-color: rgba(21, 23, 27, .35); }
.next:hover .next__text .title { text-decoration-color: currentColor; }
.next:focus-visible { outline-offset: -6px; }
@media (max-width: 699px) {
  .next { grid-template-columns: minmax(0, 1fr); }
  .next .strip { order: 1; }
  .next__text { order: 2; padding: var(--s3) var(--col) var(--s4); }
}

/* ---------- end credits ---------- */
.foot { background: var(--desk); border-top: 1px solid var(--line); padding: var(--s5) 0 var(--s5); font-size: var(--t-small); }
.foot .vo { padding: 0; }
.foot .credits { margin: 0; }
@media (min-width: 900px) {
  .foot .credits { grid-column: 2 / 6 !important; }
  .foot .credits > div { grid-template-columns: 3fr 11fr; }
}
.foot .credits dd { max-width: none; }
.foot .credits ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 1.6em; }
.foot .credits ul a { display: inline-block; padding: 10px 0; margin: -4px 0; text-decoration: none; }
.foot .credits ul a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.foot__mark { grid-column: 2 / 4 !important; margin: 0 0 .6em; font: 650 1.375rem/1 var(--sans); letter-spacing: -.02em; }
/* the line from the film under the wordmark, and the rights line at the end */
.foot__line { grid-column: 2 / 6 !important; margin: 0 0 var(--s4) !important; font: 400 var(--t-note)/1.4 var(--serif); }
.foot__rights { grid-column: 2 / 6 !important; margin: var(--s4) 0 0 !important; opacity: .7; }

/* ---------- the scrubber: the page's timeline ---------- */
.scrub { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: var(--strip); padding: 0 var(--col); display: flex;
  background: var(--desk); font: 500 var(--t-scrub)/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color .3s; }
.scrub::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line); }
.scrub__track { position: relative; flex: 1 1 auto; min-width: 0; }
.scrub__track::before { content: ""; position: absolute; left: 0; top: 0; height: 1px; width: calc(var(--p, 0) * 100%); background: var(--gold); }
.scrub ol { display: flex; height: 100%; margin: 0; padding: 0; list-style: none; }
.scrub li { flex: 1 1 0; min-width: 0; background: linear-gradient(rgba(21, 23, 27, .55), rgba(21, 23, 27, .55)) no-repeat 0 0 / 1px 9px; }
.scrub li a { display: block; height: 100%; padding: 20px 8px 0 0; color: var(--faint); text-decoration: none; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.scrub li a:hover { color: var(--paper); }
.scrub li a[aria-current] { color: var(--paper); }
.scrub li a:focus-visible { outline-offset: -3px; }
.scrub__n { margin-right: .6em; }
.scrub__head { position: absolute; top: 0; left: calc(var(--p, 0) * 100%); width: 2px; height: 15px; margin-left: -1px; background: var(--gold); }
.scrub__next { flex: none; align-self: stretch; width: 9.5em; padding: 20px 0 0; color: var(--paper); text-align: right; text-decoration: none; white-space: nowrap; }
.scrub__next:hover { text-decoration: underline; text-underline-offset: .35em; }
html:not(.js) .scrub__head, html:not(.js) .scrub__track::before { display: none; }
/* On the film: while the hero fills the window the scrubber is only its marks, the playhead and the name of the
   current part, laid on the picture. The other names come back under the pointer and on keyboard focus, and the
   dark bar comes back as soon as the reader scrolls (hero.js takes the class away). */
.scrub__text { transition: opacity .3s; }
.on-film .scrub { background-color: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .8); }
.on-film .scrub::before { background: rgba(21, 23, 27, .28); }
.on-film .scrub li a { color: var(--paper); }
.on-film .scrub li a:not([aria-current]) .scrub__text { opacity: 0; }
.on-film .scrub:hover li a:not([aria-current]) .scrub__text, .on-film .scrub:focus-within li a:not([aria-current]) .scrub__text { opacity: 1; }
@media (max-width: 1359px) {
  /* not enough room for every label: show the current one, keep the marks. The other labels are clipped,
     not removed, so every mark keeps its name for a screen reader and for the keyboard. */
  .scrub li a { overflow: visible; }
  .scrub__text { position: absolute; left: 0; top: 20px; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    white-space: nowrap; pointer-events: none; }
  .scrub li a[aria-current] .scrub__text, html:not(.js) .scrub li:first-child .scrub__text { width: auto; height: auto;
    overflow: visible; clip-path: none; color: var(--paper); }
}
@media (max-width: 759px) { .scrub__next { width: 8em; } }

/* ---------- slow moves (only where the browser can tie them to scrolling, never needed for reading) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .shot__pic img, .strip img, .cut__pic img { animation: push linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .shot--horizon .shot__pic img { animation: none; }   /* its line is set on a band of the picture: the picture holds still */
    @keyframes push { from { transform: scale(1); } to { transform: scale(1.06); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; scroll-behavior: auto !important; }
}

/* ---------- print: the text, plainly ---------- */
@media print {
  .scrub, .hero__controls, .menu, video { display: none !important; }
  body { background: #fff; color: #000; }
}

/* =====================================================================================================
   Draft D. What is new against draft B: gold, larger lines, shots that hold while their text rises.
   ===================================================================================================== */

/* ---------- gold ---------- */
.dot { color: var(--gold); }                                   /* the wordmark's full stop */
.slate__n { color: var(--gold); }                              /* a shot's number, and the short rule after it */
.scrub li a[aria-current] .scrub__n { color: var(--gold); }
.qa h3::before { color: var(--gold); }
.nav a[aria-current] { text-decoration-color: var(--gold); }
.menu a[aria-current] { text-decoration-color: var(--gold); }
/* the one button: Loota's gold, square, as in the product */
.gold { display: inline-block; padding: .8em 1.3em .86em; background: var(--gold); color: var(--gold-ink); text-decoration: none; text-shadow: none;
  font: 600 clamp(1.0625rem, 1.3vw, 1.5rem)/1 var(--sans); letter-spacing: -.01em; transition: background-color .2s; }
.shot__cta a.gold { padding: .8em 1.3em .86em; margin: .35em 0 0; }
.gold:hover { background: #e8c450; }
.gold:focus-visible { outline-color: var(--paper); }

/* ---------- lines ---------- */
.shot--horizon .title { font-size: var(--t-film); }            /* this one sits on a narrow band of its picture */
/* under the film: what Loota is, at the size of a title, and the note about the film, small */
.filmnote { border-top: 0; }
.filmnote .vo { padding: var(--s6) 0 var(--s6); row-gap: var(--s5); }
.vo > .statement { grid-column: 2 / 6; max-width: 21em; margin: 0; font: 600 clamp(1.75rem, 3.3vw, 4.375rem)/1.1 var(--sans);
  letter-spacing: -.026em; text-wrap: balance; }
.statement em { font-style: normal; color: var(--gold); }
.filmnote .vo > .note { grid-column: 3; grid-row: auto; margin: 0; max-width: 33em; }
@media (max-width: 899px) {
  .filmnote .vo { padding: var(--s5) 0 var(--s4); row-gap: var(--s4); }
  .vo > .statement, .filmnote .vo > .note { grid-column: 2; }
  .filmnote .vo > .note { padding-left: var(--s2); }
}
/* the real screen, close: across the whole text area */
@media (min-width: 900px) { .vo > .screen--wide { grid-column: 2 / 6; } }
.vo > .screen--wide { margin-bottom: var(--s5); }

/* ---------- a shot holds while its text rises over it ---------- */
@media (min-aspect-ratio: 1/1) {
  .scene > .shot { position: sticky; top: 0; }
  .scene > .shot ~ .vo { position: relative; z-index: 2; background: var(--ground, var(--night)); }
  .scene > .shot ~ .vo--take { padding-top: var(--s5); }
  /* the credit stands in the picture's lower right corner, since nothing hangs under a shot any more */
  .shot__credit { top: auto; bottom: 0; padding: 0 var(--col) 14px; color: rgba(21, 23, 27, .72); text-shadow: var(--shade-mark); }
}
@media (min-aspect-ratio: 3/2) {
  /* the film's last frame holds too, and the sheet with the first sentence rises over it */
  .opening > .hero { position: sticky; top: 0; z-index: 0; }
  .opening > .filmnote { position: relative; z-index: 3; }
}
@media (prefers-reduced-motion: no-preference) and (min-aspect-ratio: 1/1) {
  @supports (animation-timeline: view()) and (timeline-scope: --a) {
    /* the picture dims as its text comes over it */
    .scene { timeline-scope: --vo; }
    .scene > .shot + .vo { view-timeline: --vo block; }
    .scene > .shot > .shot__pic, .scene > .shot > .shot__text, .scene > .shot > .shot__credit { animation: under linear both; animation-timeline: --vo; animation-range: entry 0% entry 100%; }
    .opening { timeline-scope: --note; }
    .opening > .filmnote { view-timeline: --note block; }
    .opening > .hero > * { animation: under linear both; animation-timeline: --note; animation-range: entry 0% entry 100%; }
    @keyframes under { to { opacity: .28; } }
  }
}

/* the cut: on wide screens the two places fill the window side by side, and hold like a shot */
@media (min-aspect-ratio: 1/1) {
  .scene > .cut { position: sticky; top: 0; z-index: 1; }
  .scene > .cut ~ .vo { position: relative; z-index: 2; background: var(--ground, var(--night)); }
  .cut__pic { height: max(100svh - var(--strip), 400px); }
  /* the two names stand at the top of the pictures, where they stay until the card arrives */
  .cut figure { position: relative; }
  .cut figure::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 9rem; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, 0)); }
  .cut figcaption, .cut figure:first-child figcaption, .cut figure:last-child figcaption { position: absolute; z-index: 2; left: 0; right: 0; top: 0;
    padding: 22px var(--s3) 0; background: none; text-shadow: var(--shade-mark); }
  .cut figure:first-child figcaption { padding-left: var(--col); }
  .cut figcaption span { color: rgba(21, 23, 27, .72); }
}

/* A text panel is at least as tall as the picture it rises over, so the picture is always covered before the
   scene leaves, and each panel reads as an intertitle. */
@media (min-aspect-ratio: 3/2) { .opening > .filmnote { min-height: 100svh; display: grid; align-content: center; } }
@media (min-aspect-ratio: 1/1) {
  .scene > .shot + .vo:last-child, .scene > .cut + .vo:last-child { min-height: max(100svh - var(--strip), 400px); align-content: center; }
  .scene > .shot--short + .vo:last-child { min-height: max((100svh - var(--strip)) * .66, 320px); }
  .head--bar ~ main .shot--top + .vo:last-child { min-height: max(100svh - var(--strip) - var(--head), 360px); }
  .head--bar ~ main .shot--top.shot--short + .vo:last-child { min-height: max((100svh - var(--strip)) * .66 - var(--head), 280px); }
  .shot--endcard .shot__text { padding-bottom: 10svh; }
}
/* the first sentence breaks between its two sentences, so the gold phrase stays on one line where it fits */
.statement .sent { display: inline-block; }
@media (max-width: 899px) { .vo > .statement { text-wrap: pretty; } .statement .sent { display: inline; } }

/* questions and labels carry no numbers any more */
.qa h3:not([data-n])::before { display: none; }
@media (min-width: 900px) { .qa h3:not([data-n]) > span { grid-column: 2; } }

/* =====================================================================================================
   Draft E. The warm, light colour world: sand ground and espresso text. Pictures and the film stay dark,
   so whatever lies on them keeps the light colour; whatever stands on the ground takes the ink.
   ===================================================================================================== */
.hero { background: var(--stage); color: var(--light); }
.hero .ctl { color: var(--light); }
.filmnote { background: var(--night); }
::selection { background: var(--paper); color: var(--night); }

/* the shade under a line belongs to pictures only */
.title { text-shadow: none; }
.hero .title { text-shadow: var(--shade); }

@media (min-aspect-ratio: 1/1) {
  /* wide screens: lines, labels, credits and the cut's names lie on the pictures */
  .shot__text, .shot__text .slate { color: var(--light); }
  .shot__text .title { text-shadow: var(--shade); }
  .shot--busy .title { text-shadow: var(--shade-busy); }
  .shot__credit { color: rgba(246, 239, 226, .72); }
  .cut figcaption, .cut figure:first-child figcaption, .cut figure:last-child figcaption { color: var(--light); }
  .cut figcaption span { color: rgba(246, 239, 226, .72); }
}

/* gold stays where the ground is dark; on the sand its place is taken by burnt amber or by the ink */
:focus-visible { outline-color: var(--accent); }
.hero :focus-visible, .shot :focus-visible { outline-color: var(--gold); }
.statement em { color: var(--accent); }
.head--bar .dot, .foot__mark .dot { color: var(--accent); }
.nav a[aria-current], .menu a[aria-current] { text-decoration-color: var(--accent); }
a.matters { color: var(--accent); text-decoration-color: rgba(138, 108, 10, .6); }
.btn--gold { border-color: var(--paper); background: var(--paper); color: var(--night); }
.btn--gold:hover { border-color: var(--accent); background: var(--accent); color: #fff6e6; }
@media (min-aspect-ratio: 1/1) { .shot__text a.matters { color: var(--gold); text-decoration-color: rgba(217, 176, 42, .6); } }
@media (max-aspect-ratio: 1/1) {
  /* tall screens: the end card's button stands under its picture, on the sand */
  .shot__text .gold { background: var(--paper); color: var(--night); }
  .shot__text .gold:hover { background: var(--accent); color: #fff6e6; }
}

/* the timeline: ink on the sand, light while it lies on the film */
.scrub__track::before, .scrub__head { background: var(--accent); }
.on-film .scrub, .on-film .scrub li a, .on-film .scrub__next { color: var(--light); }
.on-film .scrub::before { background: rgba(246, 239, 226, .28); }
.on-film .scrub li { background-image: linear-gradient(rgba(246, 239, 226, .55), rgba(246, 239, 226, .55)); }
.on-film .scrub__track::before, .on-film .scrub__head { background: var(--gold); }

/* a screenshot of the product is a dark screen on the sand: it gets a thin frame of its own */
.screen__pan { outline-color: rgba(21, 23, 27, .4); }
/* the current part's name while the timeline lies on the film (narrower windows show only that name) */
.on-film .scrub li a[aria-current] .scrub__text { color: var(--light); }

/* =====================================================================================================
   Draft F. Light and neutral: the paper of the film's contract, near-black text, and Loota's gold back as
   the accent (it shows on white paper where it did not on the sand). Screenshots are of the light theme.
   ===================================================================================================== */
/* the highlighted phrase: ink, with a stroke of gold under it like a marker */
.statement em { color: inherit; background: linear-gradient(transparent 64%, rgba(217, 176, 42, .6) 64%, rgba(217, 176, 42, .6) 94%, transparent 94%); }
/* gold buttons work on the paper */
.btn--gold { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }
.btn--gold:hover { border-color: #c29c1f; background: #c29c1f; color: var(--gold-ink); }
@media (max-aspect-ratio: 1/1) {
  .shot__text .gold { background: var(--gold); color: var(--gold-ink); }
  .shot__text .gold:hover { background: #c29c1f; color: var(--gold-ink); }
}
.head--bar .dot, .foot__mark .dot { color: var(--gold); }
a.matters { color: var(--paper); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
/* a screenshot of the light theme: white, with a hairline round it */
.screen__pan { background: #fff; outline-color: rgba(21, 23, 27, .22); }

/* ---------- the cream paper with its faint isometric grid, and the line drawings ---------- */
:root { --grid: repeating-linear-gradient(30deg, rgba(120, 104, 60, .07) 0 1px, transparent 1px 78px),
                repeating-linear-gradient(150deg, rgba(120, 104, 60, .07) 0 1px, transparent 1px 78px); }
body { background: var(--grid) fixed, var(--night); }
.scene, .scene--hall, .scene--desk { background: none; }
/* a panel that rises over a picture has to cover it: the same paper and the same grid, held to the window so that
   the lines of neighbouring panels meet */
.filmnote, .scene > .shot ~ .vo, .scene > .cut ~ .vo { background: var(--grid) fixed, var(--night); }
@media (max-aspect-ratio: 1/1) { .shot { background: none; } }

.vo { position: relative; }
.iso { margin: 0; pointer-events: none; }
.iso svg { display: block; width: 100%; height: auto; overflow: visible; }
.iso path, .iso circle { vector-effect: non-scaling-stroke; }
.i-line { fill: none; stroke: #a8a594; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.i-soft { fill: none; stroke: #cbc7b6; stroke-width: 1.4; stroke-linecap: round; }
.i-top { fill: #fffdf7; }
.i-front { fill: #fcf8ee; }
.i-side { fill: #f6f0e1; }
.i-bay { fill: #fffcf4; }
.i-dash { fill: rgba(255, 253, 247, .55); stroke: #bcb8a6; stroke-width: 1.2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.i-path { fill: none; stroke: #e2b53c; stroke-width: 1.6; stroke-dasharray: 3 6; stroke-linecap: round; stroke-linejoin: round; }
.i-path--grey { stroke: #b6b2a2; }
.i-gold { fill: #f6d67f; stroke: #d9a92a; stroke-width: 1.4; }
.i-fold { fill: #f8e4a8; stroke: #d9a92a; stroke-width: 1.4; stroke-linejoin: round; }
.i-dot { fill: #cdc9b8; }
.i-grey { fill: #dedac9; stroke: #a8a594; stroke-width: 1.2; }
.i-greydot { fill: #c2bead; }
.i-ring { fill: var(--night); stroke: #a8a594; stroke-width: 1.4; }

@media (min-width: 1100px) {
  /* the drawing stands to the right of the text, in the middle of the panel's height */
  .vo > .iso { position: absolute; right: var(--col); top: 50%; transform: translateY(-50%); width: min(23vw, 420px); }
  .filmnote .vo > .iso { right: calc(var(--col) * .75); width: min(25.5vw, 500px); }
  .vo > .statement { font-size: clamp(1.75rem, 3.1vw, 4.2rem); max-width: 20.2em; }
}
@media (max-width: 1099px) {
  .vo > .iso { width: min(64%, 300px); margin: 0 0 var(--s4); }
  .filmnote .vo > .iso { grid-column: 2; }
}
@media (min-width: 1100px) {
  /* a little more room for the drawings: the text beside them keeps a slightly shorter measure */
  .vo > .iso { width: min(26.5vw, 480px); }
  .filmnote .vo > .iso { right: var(--col); width: min(28vw, 540px); }
  .vo > .iso ~ p, .vo > .iso ~ h3 { max-width: 28em; }
  .filmnote .vo > .iso ~ .statement { max-width: 20.2em; }
}

/* drawings beside a title card or a take (the other pages): the title keeps clear of them */
@media (min-width: 1100px) {
  .vo--card > .iso ~ .title { max-width: 58vw; }
  .vo--take > .iso ~ .title { max-width: 40vw; }
  .vo > .iso ~ .credits dd, .vo > .iso ~ .lines { max-width: 28em; }
}
@media (min-width: 900px) and (max-width: 1099px) { .vo--card > .iso, .vo--take > .iso { display: none; } }

/* =====================================================================================================
   The menu bar. It stays at the top of the window on every page and follows the reader down the page:
   Home, the four pages, Contact, and the language switch (English at the site's root, Finnish under fi/).
   On the home page it is clear, with light type, for as long as the film is under it (html.over-film,
   set in the page before the first paint and kept by hero.js); everywhere else it is a bar of the paper.
   ===================================================================================================== */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html { scroll-padding-top: var(--head); }
.head, .head--bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; justify-content: flex-start; gap: clamp(16px, 2.2vw, 40px);
  background: var(--desk); color: var(--paper); text-shadow: none; box-shadow: 0 1px 0 var(--line);
  transition: background-color .35s, color .35s, box-shadow .35s; }
.head .dot { color: var(--gold); }
.wordmark { margin-right: auto; }
.over-film .head--film { background: transparent; color: var(--light); text-shadow: var(--shade-mark); box-shadow: none; }
.over-film .head--film .menu ul { color: var(--paper); text-shadow: none; }
.over-film .head--film :focus-visible { outline-color: var(--gold); }
/* the bar is a row of its own above the page, so a page without the film begins under it */
.head--bar ~ main { padding-top: var(--head); }

/* the language switch: two marks, the current one underlined like the current page */
.lang { display: flex; align-items: center; font: 500 var(--t-mono)/1 var(--mono); letter-spacing: .14em; }
.lang > * { display: block; padding: 10px 7px; text-decoration: none; }
.lang > :last-child { margin-right: -7px; }
.lang a { opacity: .66; }
.lang a:hover, .lang a:focus-visible { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; }
.lang [aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .5em; text-decoration-color: var(--gold); }
@media (max-width: 899px) { .lang > :last-child { margin-right: 0; } .menu summary { padding-left: 4px; } }

/* pictures that hold while their text rises hold under the bar, and are as tall as the window between the bar
   and the timeline */
.shot { --shot-h: max(100svh - var(--strip) - var(--head), 360px); }
.shot--short { --shot-h: max((100svh - var(--strip)) * .66 - var(--head), 280px); }
@media (min-aspect-ratio: 1/1) {
  .scene > .shot, .scene > .cut { top: var(--head); }
  .cut__pic { height: max(100svh - var(--strip) - var(--head), 360px); }
  .scene > .shot + .vo:last-child, .scene > .cut + .vo:last-child { min-height: max(100svh - var(--strip) - var(--head), 360px); }
  .scene > .shot--short + .vo:last-child { min-height: max((100svh - var(--strip)) * .66 - var(--head), 280px); }
}
@media (max-aspect-ratio: 1/1) {
  .shot__pic { max-height: calc(100svh - var(--strip) - var(--head)); }
  .shot--top .shot__pic { max-height: calc((100svh - var(--strip)) * .66 - var(--head)); }
}
.screen--full .screen__pan { max-width: min(100%, var(--nat, 1280px), (100svh - var(--strip) - var(--head) - 2rem) * 1.6); }
@media (min-width: 900px) and (max-resolution: 1.5dppx) {
  .screen--full .screen__pan { max-width: min(100%, var(--nat, 1280px) * 1.333, (100svh - var(--strip) - var(--head) - 2rem) * 1.6); }
}

/* Finnish: the sound button's longer label */
:lang(fi) .ctl[data-ctl="sound"] { min-width: calc(11ch + 1.76em); }

@media print { .head, .head--bar { position: static; box-shadow: none; } .lang { display: none; } .head--bar ~ main { padding-top: 0; } }

/* ---------- body text that lies on a picture, under its title (the home page's data centre) ---------- */
.shot__body { max-width: 31em; margin: 1.1em 0 0; font: 400 var(--t-body)/1.55 var(--serif); }
.shot__body + .shot__body { margin-top: .6em; }
@media (min-aspect-ratio: 1/1) {
  .shot__text .shot__body { color: var(--light); text-shadow: var(--shade); }
  /* the title and its text stand high on the dark cabinets, clear of the lights in the ceiling */
  .scene--hall .shot--wallline .shot__text { margin-top: calc(var(--shot-h) * .2); max-width: calc(var(--col) * 9); }
}

/* PAGE-home start */
/* the scenes of the home page carry their text on the picture; the panels that followed them are gone */
body.page-home #control .more { margin: 1em 0 0; font: 500 var(--t-small)/1.4 var(--sans); letter-spacing: -.005em; }
@media (min-aspect-ratio: 1/1) {
  /* the box: the title and its text stand in the dark above the box, clear of its light (the picture is held at
     its top edge so that the box sits as low as the window allows) */
  body.page-home #server .shot__pic::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; pointer-events: none;
    background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, 0)); }
  /* the office in the evening: the title higher on the wall, its text under it, clear of the picture on the wall
     and above the chair */
  body.page-home #control .more a { color: var(--light); text-shadow: var(--shade); }
}
/* the answer card holds a title, a sentence and a link now: it no longer has to fill the window */
@media (min-aspect-ratio: 1/1) { body.page-home #answer > .vo { min-height: 0; padding-block: var(--s6); } }
/* the office in the evening at narrower wide windows: the text keeps clear of the framed print on the wall */
/* PAGE-home end */

/* PAGE-product start */
@media (max-aspect-ratio: 1/1) {
  /* on a tall screen the text under the picture keeps a margin before the next picture */
  body.page-product #opening .shot__text { padding-bottom: var(--s3); }
}
/* PAGE-product end */

/* PAGE-data start */
@media (min-width: 900px) {
  /* the opening card is only the slate and the title now: the slate stands over the title, so it is not left alone under it */
  body.page-data #opening .vo--card > .slate { grid-column: 2 / 6; grid-row: 1; margin: 0 0 var(--s3); }
  body.page-data #opening .vo--card > .title { grid-row: 2; margin-bottom: 0; }
}
@media (max-aspect-ratio: 1/1) { body.page-data #regulation .shot__pic { max-height: 42svh; } }
/* PAGE-data end */

/* PAGE-demo start (was the pilot page until 12 Nov 2026) */
/* the one gold button of the page: it opens the live demo */
body.page-demo #opening .vo > .cta { margin: .6em 0 0; }
/* tall screens: a shorter opening picture, so the button is on the first screen */
@media (max-aspect-ratio: 1/1) { body.page-demo #opening .shot__pic { max-height: calc((100svh - var(--strip)) * .38); } }
@media (min-aspect-ratio: 1/1) {
  body.page-demo #contact .shot__text .mail { margin-top: .75em; font-size: clamp(1.5rem, 2.6vw, 3.25rem); }
}
/* the opening card: the slate over the title and the card from the top, so title and text are on the first screen */
@media (min-width: 900px) {
  body.page-demo #opening .vo--card { align-content: start; }
  body.page-demo #opening .vo--card > .slate { grid-column: 2 / 6; grid-row: 1; margin: 0 0 var(--s3); }
  body.page-demo #opening .vo--card > .title { grid-row: 2; }
}
/* tall screens: the contact link lands here, so the picture is short enough for the title and the address to show */
@media (max-aspect-ratio: 1/1) { body.page-demo #contact .shot__pic { max-height: 42svh; } }
/* wide screens: the opening picture is a little shorter, so the title and its sentence end above the timeline */
@media (min-aspect-ratio: 1/1) {
  body.page-demo #opening > .shot { --shot-h: max((100svh - var(--strip)) * .5 - var(--head), 260px); }
  body.page-demo #opening > .shot + .vo:last-child { min-height: max((100svh - var(--strip)) * .5 - var(--head), 260px); }
}
/* PAGE-demo end */

/* PAGE-questions start */
@media (min-aspect-ratio: 1/1) {
  body.page-404 #opening .shot__cta { margin-top: 1.1em; }
}
/* PAGE-questions end */

/* ---------- the video's two titles stand higher (11 Nov 2026): on the dark cabinets and on the box's face,
   not at the bottom edge of the picture ---------- */
.hero__t { bottom: 27%; }
@media (max-height: 640px) and (min-aspect-ratio: 3/2) { .hero__t { bottom: calc(var(--strip) + 30%); } }

/* ---------- one place for text on a picture (11 Nov 2026) ----------
   Every big picture that carries a title stands it in the same place as the home page's data centre: in the left
   column, a fifth of the way down the picture, with the same measure. Where a picture's subject would be under the
   text, the picture is moved (its --pos) or shaded, never the text. */
@media (min-aspect-ratio: 1/1) {
  .scene > .shot--wallline .shot__text { align-self: start; margin: calc(var(--shot-h) * .2) 0 0; padding-bottom: 0;
    max-width: calc(var(--col) * 10); transform: none; }
  .scene > .shot--wallline .shot__body { max-width: 31em; }
  /* a soft shade on the left, for pictures whose left side is not dark enough by itself */
  .shot--shade .shot__pic::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .28) 45%, rgba(0, 0, 0, 0) 70%); }
}
/* a picture whose dark side is on the right is shown mirrored, so the text column has a quiet ground */
.shot--mirror .shot__pic img { transform: scaleX(-1); }
/* the product page's opening: the same place, a shorter line, so the text ends before the laptop */
@media (min-aspect-ratio: 1/1) { body.page-product #opening .shot__body { max-width: 24em; } }