/*
 * Frostwhistle, «two scoops» — 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,
 * tickets/SC-28.md).
 *
 * 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 at the foot of it — and between the acts
 * lie the blocks of the page: the line of the house, its first line, its five flavours.
 *
 * 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 acts 2, 3 and 4 it is a round window in the page (clip-path, set by
 *                 the script) — a long capsule over the tubs, a tall one round the cone,
 *                 a low one for the serving window — that opens to the whole screen
 *     .leaders    the lines from a name to its thing
 *   .cue        the words of an act lie on the page, not on the scene: a name on its
 *               capsule comes from below and leaves upwards with the scroll while the
 *               picture stands pinned. (A flag carried by its tub — .is-carried — belongs
 *               to the picture and moves with it.)
 *   .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 the stations of the cone, fixed over all of it
 * After the film, in the flow of the page: .foot — the lid of a tub on the counter.
 *
 * The words of the house are set on capsules of its three colours, round as a scoop:
 * berry ink on blush, pink or sky, so a word reads on any frame of the film.
 *
 * The house's colours (tickets/SC-28.md): blush #FFE8F0, pink #FF6FA3, sky #7AD7F0.
 * The ink is the dark of the same berry; nothing on the page is black or white.
 */

:root {
  --fw-blush: #ffe8f0;
  --fw-pink: #ff6fa3;
  --fw-sky: #7ad7f0;
  --fw-ink: #4a1230;
  --fw-ink-soft: #7a3f5c;
  --fw-pink-deep: #a8174f;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(16px, 2.6vw, 40px);

  /* The house's own pair: Baloo 2 for every large word and every name, Quicksand for
     everything small. The studio's Onest is only in the lime corner. */
  --face-display: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --face-text: Quicksand, ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --face-studio: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;

  --shade: 0 2px 0 rgb(74 18 48 / 0.16), 0 12px 26px rgb(74 18 48 / 0.24);
}

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

html {
  background: var(--fw-blush);
  color: var(--fw-ink);
  -webkit-text-size-adjust: 100%;
}

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

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

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

ol,
ul {
  list-style: none;
}

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

body {
  position: relative;

  /* What lies under a picture until it is there. */
  --ground: #ffe8f0;
}

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

.bar {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  right: var(--gutter);
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  pointer-events: none;
}

/* The name: a blush capsule in the corner, a cone of the house's two colours beside it. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px 0 12px;
  border-radius: 999px;
  background-color: var(--fw-blush);
  box-shadow: var(--shade);
  color: var(--fw-ink);
  font-family: var(--face-display);
  font-size: 23px;
  font-weight: 700;
  line-height: 1;
}

.brand > span {
  padding-top: 0.12em; /* Baloo sits high in its line */
}

.brand-mark {
  flex: none;
  width: 28px;
  height: 28px;
}

.brand-mark .cone {
  fill: #d9a05a;
}

.brand-mark .scoop-low {
  fill: var(--fw-pink);
}

.brand-mark .scoop-top {
  fill: var(--fw-sky);
}

/* 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;
  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;
}

.words {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}

.five {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
}

.cue-title,
.cue-final,
.phrase {
  flex: 1 0 100%;
}

/*
 * A large line of the house: each of its lines on a block of its own, round at the
 * corners, a little askew — pink, then sky.
 */
.title,
.final-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-family: var(--face-display);
  font-size: clamp(52px, 8vw, 124px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.final-title {
  font-size: clamp(44px, 5.6vw, 88px);
}

.chunk {
  display: block;
  /* Baloo sits high in its line: the line is drawn tight and the block is padded more above the word than under it. */
  padding: 0.3em 0.36em 0.2em;
  border-radius: 0.36em;
  background-color: var(--fw-pink);
  box-shadow: var(--shade);
  color: var(--fw-ink);
  white-space: nowrap;
  transform: rotate(-2deg);
  transform-origin: 0 100%;
}

.chunk > span {
  display: block;
  line-height: 0.72;
}

.chunk-sky {
  margin-top: -0.06em;
  margin-left: 0.42em;
  background-color: var(--fw-sky);
  transform: rotate(1.2deg);
}

/* A tag: the name of a thing on a blush capsule, a round of the flavour's own colour before it. */
.tag {
  width: -webkit-fit-content;
  width: fit-content;
}

.tag-body {
  display: flex;
  align-items: center;
  gap: 0.42em;
  /* More over the word than under it: the capital line of Baloo is above the middle of its box. */
  padding: 15px 22px 9px 14px;
  border-radius: 999px;
  background-color: var(--fw-blush);
  box-shadow: var(--shade);
  color: var(--fw-ink);
  font-family: var(--face-display);
  font-size: clamp(26px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* The five flags of the display: smaller, one to a tub. */
.tag-flag .tag-body {
  padding: 14px 18px 10px 12px;
  font-size: clamp(20px, 1.7vw, 26px);
}

/* A flavour's own colour, as a small scoop of it. */
.chip {
  flex: none;
  display: inline-block;
  width: 0.84em;
  height: 0.84em;
  margin-top: -0.14em; /* Baloo sits high in its line */
  border-radius: 50%;
  background-color: var(--c, var(--fw-pink));
  background-image: radial-gradient(circle at 34% 30%, rgb(255 255 255 / 0.6), rgb(255 255 255 / 0) 46%);
  box-shadow: inset 0 0 0 1.5px rgb(74 18 48 / 0.28);
}

/* The line of the house, where there is no film to write it on a flood. */
.phrase {
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  padding: 18px 28px 12px;
  border-radius: 28px;
  background-color: var(--fw-sky);
  box-shadow: var(--shade);
  font-family: var(--face-display);
  font-size: clamp(34px, 5.2vw, 76px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.02;
}

.phrase span {
  white-space: nowrap;
}

/* The button: a capsule of berry ink, its arrow in a round of pink. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  margin-top: clamp(18px, 3vh, 30px);
  margin-left: 0.5em;
  padding: 7px 7px 7px 26px;
  border-radius: 999px;
  background-color: var(--fw-ink);
  box-shadow: var(--shade);
  color: var(--fw-blush);
  font-family: var(--face-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms linear;
}

.pill:hover {
  background-color: #6a1d47;
}

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

.pill-round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--fw-pink);
  color: var(--fw-ink);
  transition: transform 220ms var(--ease-out);
}

.pill-round svg,
.studio svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pill:hover .pill-round,
.pill:focus-visible .pill-round {
  transform: translate3d(0, 3px, 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(--fw-ink);
}

.block[data-field="sky"] {
  --field: #7ad7f0;
}

.block[data-field="pink"] {
  --field: #ff6fa3;
}

.block-phrase,
.block-hand,
.block-ribbon {
  padding: clamp(36px, 8vh, 84px) var(--gutter);
}

/* The line of the house on the sky itself: the page is its capsule. */
.block .phrase {
  padding: 0;
  border-radius: 0;
  background-color: rgb(122 215 240 / 0);
  box-shadow: none;
}

/* The first line of the house again, on the pink: its first block is blush here. */
.block-hand .chunk {
  background-color: var(--fw-blush);
}

.block-hand .chunk-sky {
  background-color: var(--fw-sky);
}

/* The five flavours, each on its capsule. */
.ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Without the film the ribbon says its five names once. */
.ribbon li[aria-hidden] {
  display: none;
}

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

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

.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 scene of an act: the page brings it in from below, holds it and carries it away upwards. */
.live .stage {
  position: sticky;
  top: 0;
  z-index: 0;
  display: block;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background-color: var(--ground);
}

/* The picture. In a window act the script cuts it to the window (clip-path) and opens it. */
.live .frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--ground);
}

.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 {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  isolation: auto;
}

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

.live .still {
  display: none;
}

/* The lines from a word to its thing are drawn on the pinned scene. */
.live .leaders {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/*
 * 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. (A word the script has moved into the scene
 * stands on the picture instead.)
 */
.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 340ms;
}

/* Words on a flood inside an act stand in the middle of the pinned scene and drift up through the colour. */
.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(-50% + var(--ty, 0px)), 0);
}

.live .cue-card::before {
  content: none;
}

/*
 * The blocks between the acts scroll as any page does.
 * 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 {
  z-index: 1;
}

.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));
}

/* A round window rides in under the foot of the block before it: the block ends on the window's own colour. */
.live .act[data-act="five"],
.live .act[data-act="cone"],
.live .act[data-act="hand"] {
  margin-top: -8vh;
  margin-top: -8svh;
}

.live .words,
.live .five {
  display: contents;
}

/* The lines: a thread of blush from the name to its thing, a thread of berry under it, so the pair reads on steel and on sun alike. */

/* A line that is off is not there at all: Safari's engine draws the round cap of a fully
   undrawn line as a dot at its start. It is hidden once it has drawn itself back. */
.leader {
  visibility: hidden;
  transition: visibility 0s linear 220ms;
}

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

.leader path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 200ms var(--ease-in-out);
}

.leader path.stroke {
  stroke: var(--fw-blush);
  stroke-width: 2.5;
}

.leader path.casing {
  stroke: rgb(74 18 48 / 0.6);
  stroke-width: 6;
}

.leader .dot {
  fill: var(--fw-pink);
  stroke: var(--fw-blush);
  stroke-width: 2.5;
  opacity: 0;
  transition: opacity 140ms linear;
}

/* The ring round the dot is the berry one; the script's second ring is not used here. */
.leader circle.casing {
  fill: none;
  stroke: rgb(74 18 48 / 0.55);
  stroke-width: 1.5;
  opacity: 0;
  transition: opacity 140ms linear;
}

.leader .ring {
  display: none;
}

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

.leader.is-on .dot,
.leader.is-on circle.casing {
  opacity: 1;
  transition: opacity 180ms linear 320ms;
}

/* A flag carried by its tub: the script moves it with the picture. */
.live .tag.is-carried {
  left: 0;
  top: 0;
  will-change: transform;
}

/*
 * A name that rides with the page. The script says where it lies on the page of its act
 * (--at, in screens from the top of the act): it comes up as its scoop is set, is carried
 * up past the pinned picture, tied to its scoop, and fades just under the header.
 */
.live .tag:not(.is-carried) {
  top: calc(var(--at, 0.5) * 100vh);
  top: calc(var(--at, 0.5) * 100svh);
  opacity: var(--fade, 1);
}

.live #cue-churn {
  left: 13%;
}

/* Beside the tall window, in the pink of the page. */
.live #cue-strawberry,
.live #cue-pistachio {
  left: 9%;
}

/* A capsule comes up out of its point like a scoop set down, and goes the way it came. It comes fast: its word must be read on a quick scroll. */
.live .tag-body,
.live .chunk,
.live .pill {
  opacity: 0;
  transition:
    opacity 160ms linear,
    transform 240ms var(--ease-in-out),
    background-color 180ms linear;
}

.live .tag-body {
  transform: translate3d(0, 10px, 0) scale(0.72);
}

.live .tag.is-on .tag-body {
  opacity: 1;
  transform: none;
  transition:
    opacity 140ms linear,
    transform 420ms var(--ease-out);
}

.live .chunk {
  transform: translate3d(0, 0.34em, 0) rotate(-6deg) scale(0.86);
}

.live .chunk-sky {
  transform: translate3d(0, 0.34em, 0) rotate(5deg) scale(0.86);
}

.live .cue.is-on .chunk {
  opacity: 1;
  transform: rotate(-2deg);
  transition:
    opacity 180ms linear calc(var(--i, 0) * 90ms + 40ms),
    transform 560ms var(--ease-out) calc(var(--i, 0) * 90ms + 40ms);
}

.live .cue.is-on .chunk-sky {
  transform: rotate(1.2deg);
}

.live .pill {
  transform: translate3d(0, 16px, 0);
}

.live .cue-final.is-on .pill {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 260ms linear 300ms,
    transform 560ms var(--ease-out) 300ms,
    background-color 180ms linear;
}

/* The first line stands in the corner of the street, on the cobbles, and goes up with the page from the first turn of the wheel. */
.live .cue-title {
  /* Set by the script: the words fade just before they would ride up under the header. */
  opacity: var(--fade, 1);
  left: var(--gutter);
  bottom: calc(var(--pin, 1) * 100vh + clamp(28px, 8vh, 76px));
  bottom: calc(var(--pin, 1) * 100svh + clamp(28px, 8svh, 76px));
}

/* The last line rides in from below as the cone is held out, and is in the shade of the window, left of the cone, when the scene is let go. */
.live .cue-final {
  left: clamp(24px, 6.5vw, 104px);
  top: calc((var(--pin, 1) + 0.27) * 100vh);
  top: calc((var(--pin, 1) + 0.27) * 100svh);
}

/*
 * The blocks between the acts.
 */

/* «Five flavours, churned here.»: two lines in the berry ink, as large as the sky lets them; they draw apart a little as the block rides up. */
.live .block-phrase {
  padding: 3vh var(--gutter) 18vh;
  padding: 3svh var(--gutter) 18svh;
  text-align: center;
}

.live .block .phrase {
  width: auto;
  max-width: none;
  margin: 0 auto;
  font-size: clamp(64px, 11.4vw, 196px);
  line-height: 0.98;
}

.live .phrase .row {
  display: block;
  opacity: 0;
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * var(--drift, 0vw)), 0, 0);
  transition: opacity 240ms linear;
}

.live .phrase .row:first-child {
  --drift: -9vw;
}

.live .phrase .row + .row {
  --drift: 9vw;
}

.live .block.is-on .phrase .row {
  /* (--fade is set by the script: a line fades just before it would ride up under the header.) */
  opacity: var(--fade, 1);
  transition: opacity 320ms linear calc(var(--i, 0) * 140ms);
}

/* «Scooped by hand.» on the pink: its two blocks, large; they tilt apart as the block rides up. */
.live .block-hand {
  padding: 6vh var(--gutter) 16vh;
  padding: 6svh var(--gutter) 16svh;
}

.live .block-hand .title {
  width: -webkit-max-content;
  width: max-content;
  margin: 0 auto;
  font-size: clamp(64px, 12.6vw, 216px);
  opacity: var(--fade, 1);
}

.live .block-hand .chunk,
.live .block-hand .chunk-sky {
  transition: opacity 220ms linear;
}

.live .block.is-on .chunk {
  opacity: 1;
  transform: rotate(calc(-2deg - (var(--p, 0.5) - 0.5) * 9deg));
}

.live .block.is-on .chunk-sky {
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * 9vw), 0, 0) rotate(calc(1.2deg + (var(--p, 0.5) - 0.5) * 10deg));
}

/* The five flavours: one row of capsules, far wider than the screen, that runs to the left as the page goes down. */
.live .block-ribbon {
  padding: 8vh 0 19vh;
  padding: 8svh 0 19svh;
}

.live .ribbon {
  flex-wrap: nowrap;
  gap: 1.3vw;
  width: -webkit-max-content;
  width: max-content;
  opacity: var(--fade, 1);
  transform: translate3d(calc(5vw - var(--p, 0.5) * 170vw), 0, 0);
  visibility: hidden;
}

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

.live .ribbon li[aria-hidden] {
  display: block;
}

.live .ribbon .tag-body {
  padding: 0.5em 0.66em 0.3em 0.44em;
  font-size: clamp(30px, 4.7vw, 78px);
  opacity: 1;
  transform: none;
}

/*
 * From the street to the cone: the stations of the story on a blush capsule. The station
 * on screen is in full ink, and a thread under it fills as its part of the scroll goes by.
 */
.live .way {
  display: block;
  pointer-events: auto;
}

.way ol {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 48px;
  padding: 0 12px;
  border-radius: 999px;
  background-color: var(--fw-blush);
  box-shadow: var(--shade);
}

.way button {
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
  padding: 0 10px 4px;
  border: 0;
  background: none;
  color: var(--fw-ink-soft);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms linear;
}

.way button:hover,
.way .is-now button {
  color: var(--fw-ink);
}

.way .is-now button {
  font-weight: 700;
}

.way button:focus-visible {
  outline: 2px solid var(--fw-ink);
  outline-offset: -6px;
  border-radius: 999px;
}

.way i {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background-color: rgb(74 18 48 / 0.16);
}

.way i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background-color: var(--fw-pink-deep);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.live .hint {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 4px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background-color: var(--fw-blush);
  box-shadow: var(--shade);
  color: var(--fw-ink);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 280ms var(--ease-in-out);
}

.hint i {
  display: block;
  width: 2px;
  height: 16px;
  border-radius: 1px;
  background-color: var(--fw-pink-deep);
}

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

/*
 * ——— The footer: the lid of a tub ———
 *
 * The lid of a take-away tub lies on the counter among spilt sprinkles, a wooden spoon
 * beside it (textures/lid.webp — a photograph, seen from straight above, the lid in its
 * middle). What the house prints on its lids is set on it here, in the berry ink, a
 * little askew as a lid lies. The photograph keeps its height, so the print stays on the
 * lid at any width: the lid's flat top is a round 0.58 of the height across.
 */

.foot {
  --foot-h: max(56vw, 470px);
  position: relative;
  height: var(--foot-h);
  overflow: hidden;
  background: #f2c6cb url("textures/lid.webp") 50% 50% / auto 100% no-repeat;
  color: var(--fw-ink);
}

.lid {
  position: absolute;
  left: 50%;
  top: 49.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: calc(var(--foot-h) * 0.56);
  height: calc(var(--foot-h) * 0.56);
  border-radius: 50%;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-5deg);
  /* Printed, not laid on: the ink takes the grain of the paper under it. */
  mix-blend-mode: multiply;
}

.lid-name {
  color: var(--fw-pink-deep);
  font-family: var(--face-display);
  font-size: clamp(33px, calc(var(--foot-h) * 0.076), 78px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}

.lid-line {
  margin-top: calc(var(--foot-h) * 0.004);
  font-size: clamp(14px, calc(var(--foot-h) * 0.023), 21px);
  font-weight: 700;
  line-height: 1.2;
}

.lid-five {
  margin-top: calc(var(--foot-h) * 0.024);
  font-family: var(--face-display);
  font-size: clamp(16px, calc(var(--foot-h) * 0.031), 27px);
  font-weight: 600;
  line-height: 1.22;
}

.lid-five li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
}

.lid-five .chip {
  width: 0.62em;
  height: 0.62em;
  margin-top: -0.2em;
}

.lid-note {
  margin-top: calc(var(--foot-h) * 0.024);
  font-size: clamp(14px, calc(var(--foot-h) * 0.02), 17px);
  font-weight: 600;
  line-height: 1.2;
}

/* The studio signs in its own colours, not the house'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-family: var(--face-studio);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms linear;
}

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

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

.studio svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
  transition: transform 180ms var(--ease-in-out);
}

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

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

@media (max-aspect-ratio: 3 / 4) {
  .bar {
    gap: 8px;
  }

  .brand {
    gap: 6px;
    height: 44px;
    padding: 0 14px 0 8px;
    font-size: 20px;
  }

  .brand-mark {
    width: 24px;
    height: 24px;
  }

  .title {
    font-size: clamp(46px, 14.5vw, 64px);
  }

  .final-title {
    font-size: clamp(32px, 9.4vw, 40px);
  }

  .tag-body {
    padding: 14px 18px 8px 12px;
    font-size: clamp(24px, 6.8vw, 30px);
  }

  .tag-flag .tag-body {
    padding: 13px 14px 9px 10px;
    font-size: 20px;
  }

  .phrase {
    padding: 16px 20px 10px;
    border-radius: 22px;
    font-size: clamp(32px, 9.6vw, 42px);
  }

  .pill {
    height: 56px;
    margin-top: 16px;
  }

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

  /* The names ride up the left of the cone. */
  .live #cue-churn,
  .live #cue-strawberry,
  .live #cue-pistachio {
    left: var(--gutter);
  }

  /* A phone has the cone in the middle of it: the last line comes to rest over the cone, the button under the line. */
  .live .cue-final {
    left: var(--gutter);
    top: calc(var(--pin, 1) * 100vh + var(--gutter) + 62px);
    top: calc(var(--pin, 1) * 100svh + var(--gutter) + 62px);
  }

  .live .cue-final .chunk-sky {
    margin-left: 0.9em;
  }

  /* On a phone the blocks are given more of the page: the scroll between two acts is as long as on a desk. */
  .live .block-phrase {
    padding: 5vh var(--gutter) 24vh;
    padding: 5svh var(--gutter) 24svh;
  }

  .live .block-hand {
    padding: 7vh var(--gutter) 24vh;
    padding: 7svh var(--gutter) 24svh;
  }

  .live .block-ribbon {
    padding: 9vh 0 26vh;
    padding: 9svh 0 26svh;
  }

  .live .block .phrase {
    font-size: clamp(46px, 14.6vw, 76px);
  }

  .live .phrase .row:first-child {
    --drift: -6vw;
  }

  .live .phrase .row + .row {
    --drift: 6vw;
  }

  .live .block-hand .title {
    font-size: clamp(56px, 17.4vw, 88px);
  }

  .live .ribbon {
    gap: 10px;
    transform: translate3d(calc(5vw - var(--p, 0.5) * 420vw), 0, 0);
  }

  .live .ribbon .tag-body {
    font-size: 34px;
  }

  /* Only the station on screen keeps its name; the others are short threads. */
  .way ol {
    gap: 5px;
    height: 44px;
    padding: 0 12px;
  }

  .way button {
    display: flex;
    align-items: center;
    padding: 0 1px 4px;
    font-size: 14px;
  }

  .way li:not(.is-now) button {
    padding: 0;
  }

  .way li:not(.is-now) span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .way li:not(.is-now) i {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    display: block;
    width: 7px;
  }

  .way i {
    left: 1px;
    right: 1px;
    bottom: 8px;
  }

  .live .hint span {
    display: none;
  }

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

  .studio {
    padding: 16px var(--gutter) 16px 22px;
    border-top-left-radius: 24px;
  }
}

/* ——— Checks ——— */

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