/*
 * Maizewood, «From corn to the board» — 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-31).
 *
 * 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 on a card at the foot of it — and between
 * the scenes lie the blocks of the page: the words of the two acts, the phrase.
 *
 * Then (html.live, set before the first paint when the film will play) the page becomes
 * five scenes 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: 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 scene (.poster) until the film is
 *                 there, then the footage (.screen, a canvas of its own in every scene).
 *                 In scene 2 it is a round window, in scene 3 a card a little askew
 *                 (clip-path, set by the script): both open to the whole screen
 *     .leaders    the line from a tag to its thing
 *   .cue        the words and the tags of a scene lie on the page, not on the scene: they
 *               come from below and leave upwards with the scroll while the picture
 *               stands pinned
 *   .block      what lies between two scenes and scrolls as any page does: a row that
 *               runs sideways, the phrase. A block that follows a flood lies over the end
 *               of the scene before it, so its words rise on the colour while that still
 *               stands pinned
 *   .bar, .acts the name and the rail of the acts, fixed over all of it
 * After the film, in the flow of the page: .foot — the menu board.
 *
 * Brand colours (tickets/SC-31.md): dough #fff3d6, chile #f26b38, leaf #2ba84a.
 */

: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);

  --masa: #fff3d6;
  --chile: #f26b38;
  --leaf: #2ba84a;
  /* The seasoned iron of the press and the griddle: the one dark of the page. */
  --ink: #24160a;

  /* The bar's own pair. Bungee — the fat block capitals of the sign on the wall — for
     everything large. Albert Sans for everything small. The studio's faces (Unbounded,
     Onest) are in the studio's lime corner and nowhere else. */
  --face-display: "Bungee", "Arial Black", Impact, sans-serif;
  --face-text: "Albert Sans", 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;
}

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

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

body {
  margin: 0;
  color: var(--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;
}

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

ol,
ul {
  list-style: none;
}

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

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

.bar {
  position: absolute;
  top: var(--gutter);
  left: var(--gutter);
  z-index: 10;
}

/* The name: a plaque of the dark ink, the tortilla and the letters in the cream of the dough. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 8px;
  background-color: var(--ink);
  color: var(--masa);
  font-family: var(--face-display);
  font-size: 20px;
  letter-spacing: 0.01em;
  line-height: 1;
}

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

.brand-round {
  fill: var(--masa);
}

.brand-spot {
  fill: var(--chile);
}

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

/* A half of a shot that has nothing of its own to show on a page that stands still. */
.shot[data-still="none"] {
  display: none;
}

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

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

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

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

.line > span {
  display: block;
}

/* On a page that stands still the lines of the bar lie on a card of the dough's cream. */
.cue-opening,
.cue-final {
  padding: 20px 24px 22px;
  border-radius: 12px;
  background-color: var(--masa);
}

/* The line of the first screen. */
.title {
  font-family: var(--face-display);
  font-size: clamp(40px, 5.1vw, 84px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 0.98;
}

.notes {
  margin-top: 12px;
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 600;
  line-height: 1.36;
}


/* A tag: a word tied to a thing of the picture. A plaque of the ink, like the name. */
.tag {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 10px 16px 8px;
  border-radius: 8px;
  background-color: var(--ink);
  color: var(--masa);
  font-family: var(--face-display);
  font-size: clamp(22px, 2.3vw, 36px);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.names {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.final-title {
  font-family: var(--face-display);
  font-size: clamp(2.5rem, 4.4vw, 4.6rem);
  font-weight: 400;
  line-height: 0.98;
}

/* The button: a capsule of the ink, its arrow in a round of chile. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  height: 60px;
  margin-top: clamp(18px, 3vh, 30px);
  padding: 6px 6px 6px 28px;
  border-radius: 999px;
  background-color: var(--ink);
  color: var(--masa);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms linear;
}

.pill:hover {
  background-color: #3a2613;
}

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

.pill-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--chile);
  color: var(--ink);
  transition: transform 180ms var(--ease-camera);
}

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

.pill:hover .pill-round,
.pill:focus-visible .pill-round {
  transform: scale(1.06);
}

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

/*
 * The blocks of the page, between the scenes. Each lies on one of the bar's three colours.
 */

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

[data-field="leaf"] {
  --field: #2ba84a;
}

[data-field="masa"] {
  --field: #fff3d6;
}

[data-field="chile"] {
  --field: #f26b38;
}

/* The word of an act, and the phrase of the page. */
.block-run,
.block-phrase {
  padding: clamp(36px, 8vh, 84px) var(--gutter);
}

.run,
.phrase {
  font-family: var(--face-display);
  font-size: clamp(34px, 4.4vw, 72px);
  font-weight: 400;
  line-height: 1;
}

/* Without the film a row says its word once, and the three words of the phrase run on as one line of text. */
.run span[aria-hidden] {
  display: none;
}

.phrase .line {
  display: inline-block;
  vertical-align: top;
}

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

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

/* Nothing of a scene makes the page wider than the screen: a soft plate under riding words may reach past its edge. */
.live .film {
  overflow-x: clip;
}

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

/* A scene's part of the page is as tall as the 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);
}

/* A scene that follows a flood lies over the last of the scene before it: it rides in over the colour while that still stands pinned. */
.live .act.is-over {
  margin-top: calc(var(--over, 0.2) * -100vh);
  margin-top: calc(var(--over, 0.2) * -100svh);
}

/* A window rides in under the foot of the row before it: the block ends on the window's own margin. */
.live .act[data-act="tortillas"] {
  margin-top: -12vh;
  margin-top: -12svh;
}

.live .act[data-act="tacos"] {
  margin-top: -10vh;
  margin-top: -10svh;
}

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

.live .frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: #24160a;
}

/* The card of scene 3 lies a little askew on the cream and straightens as it opens (--open, set by the script). */
.live .act[data-act="tacos"] .frame {
  transform: rotate(calc((1 - var(--open, 1)) * -2.4deg));
}

.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 scene 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 scene. */
.live .shot,
.live .shot[data-still="none"] {
  position: static;
  display: block;
  min-height: 0;
  padding: 0;
  overflow: visible;
  isolation: auto;
}

.live .still {
  display: none;
}

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

/* A line of the dough's cream on a wider one of the ink: it reads on the pale tiles and on the wall alike.
   A line that is off is taken away whole once it has drawn back: a dash of no length still leaves its round end. */
.leader {
  visibility: hidden;
  transition: visibility 0s linear 200ms;
}

.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 160ms var(--ease-camera);
}

.leader path.casing {
  stroke: var(--ink);
  stroke-width: 6.5;
}

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

.leader circle {
  opacity: 0;
  transition: opacity 180ms linear;
}

.leader circle.casing {
  fill: var(--ink);
}

.leader circle.dot {
  fill: var(--masa);
}

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

.leader.is-on circle {
  opacity: 1;
  transition: opacity 180ms linear 260ms;
}

/*
 * The words of a scene. They are set on the page — on the scene's part of it, 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: visibility 0s linear 0s;
}

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

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

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

/* Over the film the lines of the bar need no card: they are painted straight on the picture… */
.live .cue-opening,
.live .cue-final {
  padding: 0;
  border-radius: 0;
  background-color: transparent;
}

/* …with one soft patch of the wall's own pale colour under the block, no glow round every letter. */
.live .cue-opening::before,
.live .cue-final::before {
  content: "";
  position: absolute;
  inset: -34% -26%;
  z-index: -1;
  background-image: radial-gradient(closest-side, rgb(255 243 214 / 0.88), rgb(255 243 214 / 0.6) 55%, rgb(255 243 214 / 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms linear;
}

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

/* The first line is painted on the pale wall of the lane, beside the gateway, and goes up with the page from the first turn of the wheel. */
.live .cue-opening {
  left: var(--gutter);
  top: 27vh;
  top: 27svh;
  width: min(34vw, 540px);
}

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

/*
 * A tag: a word tied to a thing of the picture. It rides up its place of the page (`--at`,
 * set by the script: it crosses its line of the screen as its second of the film comes),
 * unrolls from its left edge, and while it passes a line ties it to its thing.
 */
.live .cue-tag {
  top: calc(var(--at, 0.6) * 100vh);
  top: calc(var(--at, 0.6) * 100svh);
  opacity: var(--fade, 1);
  transform: translate3d(0, -50%, 0);
}

.live .names {
  display: contents;
}

.live .tag {
  -webkit-clip-path: inset(0 100% 0 0 round 8px);
  clip-path: inset(0 100% 0 0 round 8px);
  transition: clip-path 260ms var(--ease-camera), -webkit-clip-path 260ms var(--ease-camera);
}

.live .cue-tag.is-on .tag {
  -webkit-clip-path: inset(0 0 0 0 round 8px);
  clip-path: inset(0 0 0 0 round 8px);
  transition: clip-path 420ms var(--ease-text), -webkit-clip-path 420ms var(--ease-text);
}

/* Each beside its thing: under the press, over the block, left of the board; the four names under their tacos. */
.live #cue-corn {
  left: 37%;
}

.live #cue-carnitas {
  left: 20%;
}

.live #cue-salsa {
  left: 14%;
}

.live #cue-name-carnitas {
  left: 19%;
  transform: translate3d(-50%, -50%, 0);
}

.live #cue-name-pollo {
  left: 44%;
  transform: translate3d(-50%, -50%, 0);
}

.live #cue-name-pescado {
  left: 65%;
  transform: translate3d(-50%, -50%, 0);
}

.live #cue-name-hongos {
  left: 84.5%;
  transform: translate3d(-50%, -50%, 0);
}

/* The last line: on the wall, left of the board; it comes as the board is set down and goes up with the scene. */
.live .cue-final {
  left: var(--gutter);
  top: calc((var(--pin, 1) + 0.3) * 100vh);
  top: calc((var(--pin, 1) + 0.3) * 100svh);
}

.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 380ms,
    transform 640ms var(--ease-text) 380ms,
    background-color 180ms linear;
}

/*
 * The blocks between the scenes.
 */

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

/*
 * A block after a flood lies over the last of the scene before it (--over screens, set by
 * the script from the scene's hold). Up there it is clear — the flood itself is the colour —
 * and its words rise over the pinned flood; below the scene 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));
}

/* The word of an act: one row of it, far wider than the screen, that runs sideways as fast as the page goes down — the first to the left, the second to the right. */
.live .block-run {
  padding: 3vh 0 13vh;
  padding: 3svh 0 13svh;
}

.live .run {
  display: flex;
  gap: 0.34em;
  width: -webkit-max-content;
  width: max-content;
  font-size: min(15vw, 30vh);
  line-height: 1.02;
  white-space: nowrap;
  opacity: var(--fade, 1);
  transform: translate3d(calc(6vw - var(--p, 0.5) * 130vw), 0, 0);
  visibility: hidden;
}

.live .run[data-way="right"] {
  transform: translate3d(calc(-190vw + var(--p, 0.5) * 130vw), 0, 0);
}

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

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

/* The phrase: three words, one under another, each a step further in than the one before. */
.live .block-phrase {
  padding: 2vh var(--gutter) 4vh;
  padding: 2svh var(--gutter) 4svh;
}

.live .phrase {
  width: -webkit-max-content;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  font-size: min(15.5vw, 26.5vh);
  line-height: 0.92;
}

.live .phrase .line {
  display: block;
  /* Set by the script: a line fades just before it would ride up under the name. */
  opacity: var(--fade, 1);
  transform: translate3d(calc((var(--i, 0) - 1) * (0.5 - var(--p, 0.5)) * 16vw), 0, 0);
}

.live .block.is-on .phrase .line > span {
  transform: none;
  transition: transform 900ms cubic-bezier(0.22, 0.72, 0.2, 1) calc(var(--i, 0) * 200ms + 60ms);
}

/*
 * The acts of the story: a rail down the right edge, from its top. A measure each, filling as its act
 * goes by and staying full after it; the act on screen shows its name beside its measure.
 */
.live .acts {
  right: var(--gutter);
  top: var(--gutter);
  z-index: 10;
  display: block;
}

.acts ol {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.acts button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 48px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--masa);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.acts button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.acts span {
  padding: 8px 10px 7px;
  border-radius: 6px;
  background-color: var(--ink);
  opacity: 0;
  transform: translate3d(8px, 0, 0);
  transition:
    opacity 180ms linear,
    transform 240ms var(--ease-camera);
}

.acts .is-now span,
.acts button:hover span,
.acts button:focus-visible span {
  opacity: 1;
  transform: none;
}

/* The measure: iron, with a rim of cream so it shows on the dark griddle too; it fills with chile. */
.acts i {
  position: relative;
  display: block;
  flex: none;
  width: 8px;
  height: 48px;
  overflow: hidden;
  border: 2px solid var(--masa);
  border-radius: 4px;
  background-color: var(--ink);
}

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

.live .hint {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--gutter) + 8px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 7px;
  border-radius: 6px;
  background-color: var(--ink);
  color: var(--masa);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transition: opacity 360ms var(--ease-camera);
}

.hint i {
  display: block;
  width: 2px;
  height: 18px;
  background-color: var(--chile);
}

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

/*
 * ——— The footer: the menu board ———
 *
 * One photograph (textures/board.webp): a blank slate in a green frame on the orange
 * wall, a string of corn on one side of it, a cactus on the other, three chalks and a
 * felt on its ledge. What is written on the slate is the text of the page, in those
 * three chalks: the cream for the name and the four tacos, the orange and the green
 * for the lines of the bar.
 * Every length of the writing is a share of the photograph's width (--w), so it keeps
 * its place on the slate at any size. The studio's lime corner is the one thing that
 * is the same on every page.
 */

.foot {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* The orange of the wall: what shows until the photograph has come. */
  background-color: #ee9a34;
}

.wall {
  --w: 100vw;
  position: relative;
  display: grid;
  width: var(--w);
  aspect-ratio: 1920 / 1072;
  margin-left: calc(50% - var(--w) / 2);
  /* The chalk keeps well inside the slate of the photograph (19.3–80.7% across, 12.5–86% down). */
  padding: calc(var(--w) * 0.098) calc(var(--w) * 0.23) calc(var(--w) * 0.114);
  /* The grey of the slate, under the photograph: if the photograph never comes, the chalk still lies on a dark board. */
  background-color: #26282a;
}

.wall-photo {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* What is written on the slate. */
.slate {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: var(--masa);
}

.slate-name {
  font-family: var(--face-display);
  font-size: calc(var(--w) * 0.07);
  line-height: 1;
}

.slate-line {
  margin-top: calc(var(--w) * 0.006);
  color: #ff8a5c;
  font-size: max(15px, calc(var(--w) * 0.019));
  font-weight: 700;
  line-height: 1.2;
}

/* The four tacos: two to a row. */
.slate-menu {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: calc(var(--w) * 0.045);
  row-gap: calc(var(--w) * 0.008);
  margin-top: auto;
  font-family: var(--face-display);
  font-size: max(20px, calc(var(--w) * 0.042));
  line-height: 1;
}

.slate-menu li:nth-child(odd) {
  text-align: right;
}

.slate-menu li:nth-child(even) {
  text-align: left;
}

.slate-board {
  margin-top: calc(var(--w) * 0.014);
  color: #5fd17b;
  font-size: max(15px, calc(var(--w) * 0.019));
  font-weight: 700;
  line-height: 1.2;
}

.slate-pay {
  margin-top: auto;
  padding: calc(var(--w) * 0.004) calc(var(--w) * 0.012);
  border: 2px solid currentColor;
  border-radius: 999px;
  font-size: max(14px, calc(var(--w) * 0.0145));
  font-weight: 700;
  line-height: 1.2;
}

/* 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: 3px 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 script switches to the tall series at the same ratio.)
 */

@media (max-aspect-ratio: 3 / 4) {
  .brand {
    font-size: 20px;
  }

  .title {
    font-size: 44px;
  }

  .notes {
    margin-top: 8px;
    font-size: 17px;
  }

  .tag {
    font-size: 26px;
  }

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

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

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

  /* The first line stands at the foot of the screen, on the stones of the lane. */
  .live .cue-opening {
    top: auto;
    bottom: calc(var(--pin, 1) * 100vh + var(--gutter) + 20px + env(safe-area-inset-bottom, 0px));
    bottom: calc(var(--pin, 1) * 100svh + var(--gutter) + 20px + env(safe-area-inset-bottom, 0px));
    width: min(88vw, 360px);
  }

  .live .cue-opening::before,
  .live .cue-final::before {
    inset: -22% -14% -26%;
    background-image: radial-gradient(closest-side, rgb(255 243 214 / 0.92), rgb(255 243 214 / 0.78) 60%, rgb(255 243 214 / 0));
  }

  /* The tags ride up the left of the screen. */
  .live #cue-corn,
  .live #cue-carnitas,
  .live #cue-salsa,
  .live #cue-name-carnitas,
  .live #cue-name-pollo,
  .live #cue-name-pescado,
  .live #cue-name-hongos {
    left: var(--gutter);
    transform: translate3d(0, -50%, 0);
  }

  .live .run {
    font-size: 26vw;
    transform: translate3d(calc(10vw - var(--p, 0.5) * 300vw), 0, 0);
  }

  .live .run[data-way="right"] {
    transform: translate3d(calc(-330vw + var(--p, 0.5) * 300vw), 0, 0);
  }

  .live .block-run {
    padding: 3vh 0 13vh;
    padding: 3svh 0 13svh;
  }

  .live .phrase {
    font-size: 18vw;
  }

  /* The last line stands over the board, on the wall under the name. */
  .live .cue-final {
    top: calc(var(--pin, 1) * 100vh + 96px);
    top: calc(var(--pin, 1) * 100svh + 96px);
  }

  /* The rail lies along the top, right of the name: only the act on screen keeps its name. */
  .acts ol {
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }

  .acts button {
    min-width: 0;
    min-height: 44px;
    gap: 4px;
  }

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

  .acts span {
    transform: none;
  }

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

  .acts i::after {
    transform: scaleX(var(--p, 0));
    transform-origin: 0 50%;
  }

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

  /* The slate fills the width of the phone; the wall runs off both sides, and the
     studio's corner lies on a strip of the wall under the board. */
  .foot {
    padding-bottom: 60px;
  }

  .wall {
    --w: 158vw;
  }
}

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