/*
 * Latherby, «Six bars from one loaf» — a page played from footage, and a page that travels
 * (tickets/SC-48.md; the footage, the words and the colours are those of ../prototype-film, SC-41).
 *
 * This sheet is written in two halves.
 *
 * First, the page as it is without the script, or where motion is not wanted: every shot
 * is a screen of its own — its still, its words under it — and between the acts lie the
 * blocks of the page: the words of the house on its sage and its rose, six stills cut like
 * six bars.
 *
 * Then (html.live, set before the first paint when the film will play) the page becomes
 * four acts with real scroll between them:
 *   .act        as tall as its scene is pinned for, plus one screen (--pin, set by the script)
 *   .stage      the scene of the act: a sticky screen. The page brings it in from below,
 *               holds it and carries it away upwards
 *     .frame      the picture: the first frame of the act (.poster) until the film is
 *                 there, then the footage (.screen, a canvas of its own in every act).
 *                 In act 2 it is a bar of soap on the sage — a wide window with round
 *                 corners (clip-path, set by the script); in act 4 a paper band across
 *                 the rose; each opens to the whole screen
 *     .leaders    the lines from a note to its thing
 *   .cue        the words of an act lie on the page, not on the scene: the notes come from
 *               below and leave upwards with the scroll while the picture stands pinned
 *   .block      what lies between two acts and scrolls as any page does. A block that
 *               follows a flood lies over the end of the act before it, so its words rise
 *               on the colour while that still stands pinned
 *   .bar        the name and, beside it, the six marks of the steps, fixed over all of it
 * After the film, in the flow of the page: .foot — the paper band, opened out flat.
 *
 * The film is a light one — whitewash, oak, cream soap — so the words are set in the ink
 * of the house on a soft plate of its cream ("day"); "night" is the other way round, for
 * a dark picture, and no shot of this film asks for it.
 *
 * Brand colours (tickets/SC-41.md): cream #f7f3ea, sage #b5c99a, rose #e5989b.
 */

:root {
  --ease-camera: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-text: cubic-bezier(0.16, 1, 0.3, 1);
  --gutter: clamp(16px, 2.6vw, 40px);

  --cream: #f7f3ea;
  --sage: #b5c99a;
  --rose: #e5989b;
  /* The ink of the house: the dark of dried lavender stems, warm and a little green. */
  --ink: #2b2a26;
  /* The print on the paper band, as the bands of the film have it: a dark plum. */
  --plum: #3a2530;

  /* The house's own pair. Gowun Batang — a soft old-style serif with the hand still in
     it — for everything large. Be Vietnam Pro for everything small. The studio's faces
     (Unbounded, Onest) are in the studio's lime corner and nowhere else. */
  --face-display: "Gowun Batang", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --face-text: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-studio-display: "Unbounded", "Arial Black", Arial, sans-serif;
  --face-studio-text: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* The ink on a plate of cream: the colour of every word until something says otherwise. */
  --ui: var(--ink);
  --ui-dim: rgb(43 42 38 / 0.8);
  --plate: rgb(247 243 234 / 0.86);
  --rest: rgb(43 42 38 / 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--cream);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #9fb486 #f7f3ea;
}

body {
  position: relative;
  margin: 0;
  color: var(--ink);
  font-family: var(--face-text);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;
}

::selection {
  background-color: var(--rose);
  color: var(--ink);
}

p,
h1,
h2,
h3,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

/*
 * ——— The page without the film: nine stills, their words, and the blocks between ———
 */

.stage,
.marks,
.hint {
  display: none;
}

.bar {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
  line-height: 1;
}

/* The name as the stamp presses it into a bar: capitals, set a little apart. */
.brand {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 6px 0;
  color: var(--ui);
  font-family: var(--face-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 300ms linear;
}

/* The name passes over whitewash and over oak alike: it carries its own soft plate. */
.brand::before {
  content: "";
  position: absolute;
  inset: -22px -40px;
  z-index: -1;
  background-image: radial-gradient(closest-side, var(--plate), rgb(247 243 234 / 0));
  pointer-events: none;
}

/* A shot: its still fills a screen, its words stand at the foot of it. */
.shot {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 14px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter) clamp(28px, 6vh, 64px);
  overflow: hidden;
  isolation: isolate;
}

.still {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Under the words a still goes to cream, so the ink reads on any of the nine. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to top, rgb(247 243 234 / 0.94), rgb(247 243 234 / 0.74) 15%, rgb(247 243 234 / 0) 34%);
  pointer-events: none;
}

/* The first still also carries the name, at its head. */
.shot[data-shot="C1"]::after {
  background-image:
    linear-gradient(to top, rgb(247 243 234 / 0.94), rgb(247 243 234 / 0.74) 15%, rgb(247 243 234 / 0) 34%),
    linear-gradient(to bottom, rgb(247 243 234 / 0.8), rgb(247 243 234 / 0) 18%);
}

/* A still with no words is left as it was shot, and takes less of the page. */
.shot[data-words="none"] {
  min-height: 72vh;
  min-height: 72svh;
}

.shot[data-words="none"]::after {
  content: none;
}

.cue {
  position: relative;
  color: var(--ui);
}

.line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.line > span {
  display: block;
}

/* The line of the house, on the first screen. */
.title {
  font-family: var(--face-display);
  font-size: clamp(38px, 4.8vw, 80px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  text-wrap: balance;
}

/* The large words of the page: those of the blocks, the row, and the name on its flood. */
.cue-word,
.phrase,
.run {
  font-family: var(--face-display);
  font-size: clamp(54px, 7.4vw, 116px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* The name stands on a flood of the film only: without the film the header and the footer say it. */
.cue-name {
  display: none;
}

.live .cue-name {
  display: block;
}

/* Without the film a large word is set in one line. */
.cue-word .line,
.phrase .line {
  display: inline-block;
  vertical-align: top;
}

/* What else goes in. Without the film: one line of words, as the house says it. */
.notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(14px, 1.4vw, 22px);
}

.cue-note {
  font-family: var(--face-display);
  font-size: clamp(40px, 4.4vw, 72px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.08;
  white-space: nowrap;
}

.final-title {
  font-family: var(--face-display);
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.06;
}

/* The button: a capsule of the rose of the paper band, its arrow in a round of the ink. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  height: 64px;
  margin-top: clamp(20px, 3.4vh, 34px);
  padding: 6px 6px 6px 30px;
  border-radius: 999px;
  background-color: var(--rose);
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms linear;
}

.pill:hover {
  background-color: #dc8689;
}

.pill:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.pill-round {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--ink);
  color: var(--cream);
}

.pill-round svg,
.studio svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--ease-text);
}

.pill:hover .pill-round svg,
.pill:focus-visible .pill-round svg {
  transform: translate3d(0, 4px, 0);
}

/*
 * The blocks of the page, between the acts. Each lies on one of the house's colours.
 */

.block {
  position: relative;
  overflow: hidden;
  background-color: var(--field);
  color: var(--ink);
}

.block[data-field="sage"] {
  --field: var(--sage);
}

.block[data-field="rose"] {
  --field: var(--rose);
}

.block[data-field="cream"] {
  --field: var(--cream);
}

.block-word {
  padding: clamp(44px, 10vh, 100px) var(--gutter);
}

/* Six stills of the footage, cut two to one as a bar lies: three to a row. */
.block-six {
  padding: clamp(40px, 8vh, 84px) var(--gutter) clamp(36px, 7vh, 72px);
}

.six {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vh, 30px) clamp(10px, 1.3vw, 20px);
}

.six img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  border-radius: 6px;
  background-color: #d9cdb8;
}

.six figcaption {
  margin-top: 10px;
  font-family: var(--face-display);
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.run {
  margin-top: clamp(26px, 5vh, 52px);
  white-space: nowrap;
}

/* Without the film the row says its line once. */
.run span[aria-hidden] {
  display: none;
}

/*
 * ——— The film: four acts, and the page between them ———
 */

/* The ink of the words over the footage: on whitewash, oak, stone and soap. */
.live [data-tone="day"] {
  --ui: var(--ink);
  --ui-dim: rgb(43 42 38 / 0.8);
  --plate: rgb(247 243 234 / 0.86);
  --rest: rgb(43 42 38 / 0.3);
}

/* For a dark picture: cream on a plate of the ink. */
.live [data-tone="night"] {
  --ui: var(--cream);
  --ui-dim: rgb(247 243 234 / 0.86);
  --plate: rgb(43 42 38 / 0.62);
  --rest: rgb(247 243 234 / 0.4);
}

/* On a colour of the page — one even colour — there is nothing to lift the ink off. */
.live .is-flat {
  --plate: rgb(247 243 234 / 0);
}

.live .bar {
  position: fixed;
  transition: opacity 320ms var(--ease-camera);
}

.live .bar.is-away {
  opacity: 0;
  pointer-events: none;
}

/* An act is as tall as its scene is pinned for, and the screen the scene itself takes. */
.live .act {
  position: relative;
  z-index: 0;
  height: calc((1 + var(--pin, 1)) * 100vh);
  height: calc((1 + var(--pin, 1)) * 100svh);
}

/* The bar of soap rides in under the foot of the words before it: the block ends on the window's own sage. */
.live .act[data-act="oil"] {
  margin-top: -11vh;
  margin-top: -11svh;
}

/* The paper band rides in close under the running row: the row ends on the band's own rose. */
.live .act[data-act="lather"] {
  margin-top: -21vh;
  margin-top: -21svh;
}

.live .stage {
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--cream);
}

/* The margins round a window are the page's colour of the moment. */
.live .stage[data-field="sage"] {
  background-color: var(--sage);
}

.live .stage[data-field="rose"] {
  background-color: var(--rose);
}

.live .stage[data-field="cream"] {
  background-color: var(--cream);
}

.live .frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--cream);
}

.live .poster {
  position: absolute;
  inset: 0;
  display: block;
}

/* Until the script has laid it exactly where the film will lie, the first frame covers its scene. */
.live .poster img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* A canvas is shown from its first drawing on: before that the first frame of the act stands there. */
.live .screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.live .screen.is-painted {
  visibility: visible;
}

/* A shot is no longer a box: its words lie on the page of its act. */
.live .shot,
.live .shot[data-words="none"] {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  isolation: auto;
}

.live .shot::after {
  content: none;
}

.live .still {
  display: none;
}

.live .notes {
  display: contents;
}

.live .leaders {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/*
 * A line that is off is not drawn at all. Its dashes are of no length then, yet WebKit
 * still draws their round caps — a dot was left where every hidden line begins.
 */
.leader {
  visibility: hidden;
  /* The ink with a thin halo of cream round it: the line reads on oak and on stoneware. */
  filter: drop-shadow(0 0 1.5px rgb(247 243 234 / 0.95)) drop-shadow(0 0 3px rgb(247 243 234 / 0.6));
  transition: visibility 0s linear 300ms;
}

.leader.is-on {
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.leader path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.75;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 220ms var(--ease-camera);
}

.leader .dot {
  fill: var(--rose);
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 160ms linear;
}

.leader .ring {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 160ms linear;
}

.leader.is-on path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 420ms var(--ease-text) 60ms;
}

.leader.is-on .dot {
  opacity: 1;
  transition: opacity 200ms linear 280ms;
}

.leader.is-on .ring {
  opacity: 0.8;
  transition: opacity 200ms linear 340ms;
}

/*
 * The words of an act. They are set on the page — on the act, which is taller than the
 * screen — so the scroll itself brings them up from below and carries them off at the
 * top, over a picture that stands pinned.
 */
.live .cue {
  position: absolute;
  z-index: 3;
  isolation: isolate;
  pointer-events: none;
  transition:
    color 300ms linear,
    visibility 0s linear 0s;
}

.live .cue:not(.is-on) {
  visibility: hidden;
  transition:
    color 300ms linear,
    visibility 0s linear 360ms;
}

/* A line comes up from under a mask and leaves the way it came. */
.live .line > span {
  transform: translate3d(0, 124%, 0);
  transition: transform 300ms var(--ease-camera);
}

.live .cue.is-on .line > span {
  transform: none;
  transition: transform 700ms var(--ease-text) calc(var(--i, 0) * 90ms + 90ms);
}

/* Under a block of words the picture goes to one soft plate of cream: no glow round every letter. */
.live .cue::before {
  content: "";
  position: absolute;
  inset: -56% -30%;
  z-index: -1;
  background-image: radial-gradient(closest-side, var(--plate), rgb(247 243 234 / 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms linear;
}

.live .cue.is-on::before {
  opacity: 1;
  transition: opacity 520ms linear 80ms;
}

/* On a flood there is nothing to lift the words off. */
.live .cue-card::before {
  content: none;
}

/* The line of the house stands in the lower left corner of the first screen, on the old floorboards, and goes up with the page from the first turn of the wheel. */
.live .cue-opening {
  /* Set by the script: the words fade just before they would ride up under the name. */
  opacity: var(--fade, 1);
  left: var(--gutter);
  bottom: calc(var(--pin, 1) * 100vh + var(--gutter) + 6px);
  bottom: calc(var(--pin, 1) * 100svh + var(--gutter) + 6px);
}

.live .cue-opening::before {
  inset: -70% -40% -90% -50%;
  background-image: radial-gradient(closest-side, rgb(247 243 234 / 0.92), rgb(247 243 234 / 0.7) 50%, rgb(247 243 234 / 0));
}

/*
 * The name stands on the cream inside the last act: in the middle of the pinned scene
 * (the script moves it into the scene), drifting up while the flood holds.
 */
.live .cue-card {
  left: 50%;
  top: 50%;
  width: -webkit-max-content;
  width: max-content;
  max-width: calc(100vw - 2 * var(--gutter));
  transform: translate3d(-50%, calc(-52% + var(--ty, 0px)), 0);
}

.live .cue-word {
  font-size: clamp(84px, 17.5vw, 310px);
  line-height: 0.94;
}

/* The name comes up slowly, set a little wide, and draws together. */
.live #cue-name {
  font-size: clamp(64px, 17vw, 300px);
}

.live #cue-name .line {
  overflow: visible;
}

.live #cue-name .line > span {
  transform: none;
  opacity: 0;
  letter-spacing: 0.1em;
  transition:
    opacity 240ms linear,
    letter-spacing 300ms var(--ease-camera);
}

.live #cue-name.is-on .line > span {
  opacity: 1;
  letter-spacing: -0.01em;
  transition:
    opacity 600ms linear 60ms,
    letter-spacing 1200ms var(--ease-text) 60ms;
}

/*
 * The notes of an act lie on its page where the script puts them (--at, in screens from
 * the act's head): the scroll carries each up past the pinned picture, clear of the hands
 * that come in from the upper right, and its line follows the thing it is tied to.
 */
.live .cue-note {
  top: calc(var(--at, 0.5) * 100vh);
  top: calc(var(--at, 0.5) * 100svh);
  opacity: var(--fade, 1);
  font-size: clamp(40px, 4.2vw, 68px);
}

.live .cue-note::before {
  inset: -60% -26%;
}

/* Left of the bowl; right of it, under the pitcher. */
.live #cue-oat {
  left: 6.5%;
}

.live #cue-lavender {
  right: 5.5%;
}

/* Left of the cutter; right of the cloth. */
.live #cue-six {
  left: 5.5%;
}

.live #cue-hand {
  right: 5%;
}

/* The last line rides in from below, left of the sink, and is at the head of the screen when the scene is let go. */
.live .cue-final {
  left: calc(var(--gutter) + 2.4vw);
  top: calc((var(--pin, 1) + 0.2) * 100vh);
  top: calc((var(--pin, 1) + 0.2) * 100svh);
}

.live .cue-final::before {
  inset: -30% -24% -20% -40%;
  background-image: radial-gradient(closest-side, rgb(247 243 234 / 0.9), rgb(247 243 234 / 0.62) 55%, rgb(247 243 234 / 0));
}

.live .pill {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 220ms linear,
    transform 300ms var(--ease-camera),
    background-color 180ms linear;
}

.live .cue-final.is-on .pill {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 400ms linear 420ms,
    transform 640ms var(--ease-text) 420ms,
    background-color 180ms linear;
}

/*
 * The blocks between the acts.
 */

.live .block {
  z-index: 1;
}

/*
 * A block after a flood lies over the last of the act before it (--over screens, set by
 * the script from the act's hold). Up there it is clear — the flood itself is the colour —
 * and its words rise over the pinned flood; below the act it paints the same colour on,
 * and flood and block ride away as one page.
 */
.live .block.is-over {
  margin-top: calc(var(--over, 0.2) * -100vh);
  margin-top: calc(var(--over, 0.2) * -100svh);
  background-color: rgb(0 0 0 / 0);
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0) calc(var(--over, 0.2) * 100vh - 2px), var(--field) calc(var(--over, 0.2) * 100vh - 2px));
  background-image: linear-gradient(to bottom, rgb(0 0 0 / 0) calc(var(--over, 0.2) * 100svh - 2px), var(--field) calc(var(--over, 0.2) * 100svh - 2px));
}

.live .block-word {
  padding: 3vh var(--gutter) 4vh;
  padding: 3svh var(--gutter) 4svh;
}

.live .phrase {
  font-size: clamp(84px, 15.5vw, 280px);
  line-height: 0.96;
}

.live .phrase .line {
  /* Set by the script: a line fades just before it would ride up under the name. */
  opacity: var(--fade, 1);
}

.live .phrase .line + .line {
  margin-left: 0.14em;
}

/* It takes its time: each word rises slowly, the second well after the first. */
.live .block.is-on .phrase .line > span {
  transform: none;
  transition: transform 1200ms cubic-bezier(0.22, 0.72, 0.2, 1) calc(var(--i, 0) * 300ms + 80ms);
}

/* «Olive oil,» stands to the left, where a sentence begins; «One loaf.» to the right of the rose. */
.live .phrase-oil {
  padding-left: 2.4vw;
}

.live .phrase-loaf {
  text-align: right;
  padding-right: 3vw;
}

/*
 * Six stills cut like six bars. They ride in as one loaf — three to a row, side by side —
 * and are cut apart as the block goes through the screen (--p, set by the script).
 */
.live .block-six {
  padding: 5vh 0 0;
  padding: 5svh 0 0;
}

.live .six {
  --cut: calc(clamp(0, (var(--p, 0.5) - 0.16) * 2.6, 1) * 1.5vw);
  gap: 3.4vh 0;
  gap: 3.4svh 0;
  padding: 0 calc(var(--gutter) + 1.5vw);
}

.live .six li {
  transform: translate3d(calc(var(--cx, 0) * var(--cut)), 0, 0);
}

/* «cured for six weeks.»: one row, far wider than the screen, that runs to the left as the page goes down. */
.live .run {
  display: flex;
  gap: 0.5em;
  width: -webkit-max-content;
  width: max-content;
  margin-top: 5vh;
  margin-top: 5svh;
  padding-bottom: 3vh;
  padding-bottom: 3svh;
  font-size: clamp(72px, 12.5vw, 216px);
  line-height: 1.1;
  opacity: var(--fade, 1);
  transform: translate3d(calc(34vw - var(--p, 0.5) * 150vw), 0, 0);
  visibility: hidden;
}

.live .run span[aria-hidden] {
  display: block;
}

.live .block.is-on .run {
  visibility: visible;
}

/*
 * The steps of the story: six of them, drawn as six bars in a row beside the name — the
 * top left corner, where no hand of the film comes in. The bar of the step on screen is
 * the long one and fills with the ink as the step goes by; the steps behind it stay full.
 * The step on screen says its name.
 */
.live .marks {
  position: relative;
  display: block;
  isolation: isolate;
  color: var(--ui);
  transition: color 300ms linear;
}

.live .marks::before {
  content: "";
  position: absolute;
  inset: -24px -44px;
  z-index: -1;
  background-image: radial-gradient(closest-side, var(--plate), rgb(247 243 234 / 0));
  pointer-events: none;
}

.marks ol {
  display: flex;
  align-items: center;
  gap: 6px;
}

.marks button {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 12px 0;
  border: 0;
  background: none;
  color: var(--ui);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.marks button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 4px;
}

/* Only the step on screen keeps its name; the others are their bars. */
.marks li:not(.is-now) span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.marks .is-now span {
  padding-right: 8px;
}

.marks i {
  position: relative;
  display: block;
  width: 20px;
  height: 12px;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--rest);
}

.marks .is-now i {
  width: 52px;
}

.marks i::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--ui);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.marks button:hover i {
  background-color: var(--ui-dim);
}

.live .hint {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 4px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  isolation: isolate;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: opacity 360ms var(--ease-camera);
}

.live .hint::before {
  content: "";
  position: absolute;
  inset: -26px -40px;
  z-index: -1;
  background-image: radial-gradient(closest-side, rgb(247 243 234 / 0.86), rgb(247 243 234 / 0));
}

.hint i {
  display: block;
  width: 2px;
  height: 34px;
  background-color: currentColor;
}

.hint.is-off {
  opacity: 0;
}

/*
 * ——— The footer: the paper band, opened out flat ———
 *
 * The wrapper of a bar, taken off and laid flat on the packing table, seen from over it
 * (textures/band.webp, a photograph): dusty-rose paper with the four creases of the bar
 * it was folded round. What the house says of its soap is printed on the paper, panel by
 * panel between the creases, in the plum of the bands in the film. The studio's lime
 * corner is the one thing that is the same on every page.
 */

.foot {
  position: relative;
  background-color: #b98f5f;
  color: var(--plum);
}

/* The photograph keeps its shape (two to one), so the print sits on the paper between its creases at any width. */
.band {
  position: relative;
  aspect-ratio: 2 / 1;
  max-height: 880px;
  width: 100%;
  overflow: hidden;
}

.band-photo {
  position: absolute;
  inset: 0;
  display: block;
}

.band-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The paper itself: from 31% to 68.9% of the photograph's height; its creases stand at 18, 39, 60.7 and 81.9% of its width. */
.band-print {
  position: absolute;
  left: 0;
  right: 0;
  top: 31%;
  height: 37.9%;
  display: grid;
  grid-template-columns: 39% 21.7% 21.2% 18.1%;
  align-items: center;
}

.band-print > * {
  padding: 0 clamp(14px, 1.9vw, 34px);
}

.band-name {
  padding-left: var(--gutter);
  font-family: var(--face-display);
  font-size: clamp(3.4rem, 8.4vw, 9.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 0.96;
}

.band-made {
  font-family: var(--face-display);
  font-size: clamp(22px, 2.3vw, 38px);
  font-weight: 700;
  line-height: 1.16;
  text-wrap: balance;
}

.band-how {
  display: grid;
  gap: 10px;
  font-size: clamp(15px, 1.2vw, 19px);
  font-weight: 500;
  line-height: 1.4;
  text-wrap: balance;
}

.band-small {
  align-self: end;
  padding-bottom: clamp(14px, 2vw, 30px);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 600;
  line-height: 1.4;
}

/* The studio signs in its own colours, not the brand's: volt and ink, in the corner. */
.studio {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px var(--gutter) 18px 26px;
  border-top-left-radius: 28px;
  background-color: #d6fa50;
  color: #0a0a0a;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition: background-color 180ms linear;
}

.studio-by {
  font-family: var(--face-studio-text);
  text-transform: uppercase;
}

.studio-name {
  font-family: var(--face-studio-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.studio:hover,
.studio:focus-visible {
  background-color: #b8dc2c;
}

.studio:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.studio svg {
  width: 16px;
  height: 16px;
}

.studio:hover svg,
.studio:focus-visible svg {
  transform: rotate(45deg);
}

/*
 * ——— A tall screen: the tall frames, the words at the foot ———
 * (The script switches to the tall series at the same ratio.)
 */

@media (max-aspect-ratio: 3 / 4) {
  .bar {
    justify-content: space-between;
  }

  .brand {
    font-size: 19px;
  }

  .title {
    font-size: clamp(34px, 9.6vw, 44px);
  }

  .cue-note {
    font-size: 44px;
  }

  .final-title {
    font-size: clamp(2.4rem, 11vw, 3.2rem);
  }

  .pill {
    gap: 16px;
    height: 58px;
    margin-top: 18px;
    padding-left: 26px;
    font-size: 17px;
  }

  .pill-round {
    width: 46px;
    height: 46px;
  }

  /* Two stills to a row. */
  .six {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
  }

  .six figcaption {
    margin-top: 6px;
    font-size: 22px;
  }

  .live .cue-opening {
    bottom: calc(var(--pin, 1) * 100vh + var(--gutter) + 58px + env(safe-area-inset-bottom, 0px));
    bottom: calc(var(--pin, 1) * 100svh + var(--gutter) + 58px + env(safe-area-inset-bottom, 0px));
  }

  .live .cue::before {
    inset: -46% -16% -34%;
  }

  .live .cue-opening::before {
    inset: -60% -30% -80% -40%;
    background-image: radial-gradient(closest-side, rgb(247 243 234 / 0.96), rgb(247 243 234 / 0.84) 56%, rgb(247 243 234 / 0));
  }

  /* A large word stands in two lines, the second a step to the right. */
  .live .phrase {
    font-size: clamp(72px, 27vw, 150px);
  }

  .live .phrase .line {
    display: block;
  }

  .live .phrase .line + .line {
    margin-left: 0.36em;
  }

  .live .phrase-oil,
  .live .phrase-loaf {
    padding: 0;
    text-align: left;
  }

  .live .phrase-loaf {
    width: -webkit-max-content;
    width: max-content;
    margin-left: auto;
    margin-right: 4vw;
  }

  .live #cue-name {
    font-size: clamp(54px, 20vw, 110px);
  }

  /* The notes ride up the foot of the picture, each on its own soft plate. */
  .live .cue-note {
    font-size: 40px;
  }

  .live .cue-note::before {
    inset: -50% -22%;
  }

  .live #cue-oat,
  .live #cue-six {
    left: var(--gutter);
  }

  .live #cue-lavender,
  .live #cue-hand {
    right: var(--gutter);
  }

  /* The last line comes to the head of the picture, on the tiles and the tap; the bar lies under it. */
  .live .cue-final {
    left: var(--gutter);
    right: var(--gutter);
    top: calc((var(--pin, 1) + 0.13) * 100vh);
    top: calc((var(--pin, 1) + 0.13) * 100svh);
  }

  .live .cue-final::before {
    inset: -24% -12% -14% -20%;
  }

  /* The paper band rides in under the running row. */
  .live .act[data-act="lather"] {
    margin-top: -24vh;
    margin-top: -24svh;
  }

  .live .six {
    --cut: calc(clamp(0, (var(--p, 0.5) - 0.16) * 2.6, 1) * 2.4vw);
    gap: 16px 0;
    padding: 0 calc(var(--gutter) + 2.4vw);
  }

  /* Two to a row: the left one goes left, the right one right. */
  .live .six li:nth-child(odd) {
    --cx: -1 !important;
  }

  .live .six li:nth-child(even) {
    --cx: 1 !important;
  }

  .live .run {
    font-size: clamp(60px, 19vw, 110px);
    transform: translate3d(calc(40vw - var(--p, 0.5) * 330vw), 0, 0);
  }

  .marks ol {
    gap: 5px;
  }

  .marks i {
    width: 14px;
    height: 10px;
  }

  .marks .is-now i {
    width: 34px;
  }

  .marks .is-now span {
    padding-right: 4px;
  }

  .live .hint span {
    display: none;
  }

  .live .hint {
    bottom: calc(var(--gutter) + 6px + env(safe-area-inset-bottom, 0px));
  }

  /* The band stands taller: one panel of it, a sprig of lavender over it; the print in one column. */
  .band {
    aspect-ratio: 900 / 1616;
    max-height: none;
  }

  /* On the tall photograph the paper lies from 36.5% to 82.4% of the height. */
  .band-print {
    top: 36.5%;
    height: 45.8%;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    align-content: start;
    align-items: start;
    row-gap: 12px;
    padding: 22px 0 16px;
  }

  .band-print > * {
    padding: 0 var(--gutter);
  }

  .band-name {
    font-size: clamp(3rem, 15vw, 4.2rem);
  }

  .band-made {
    font-size: 25px;
  }

  .band-how {
    gap: 6px;
    font-size: 16px;
  }

  .band-small {
    padding-bottom: 0;
    font-size: 15px;
  }
}

/* ——— Checks ——— */

.hud {
  position: fixed;
  left: 8px;
  top: 64px;
  z-index: 20;
  margin: 0;
  padding: 8px 10px;
  border-radius: 4px;
  background: rgb(0 0 0 / 0.82);
  color: #b6ff7a;
  font: 11px/1.45 ui-monospace, Menlo, monospace;
  white-space: pre;
  pointer-events: none;
}