/*
 * Dunelight, «All day in the sun» — 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-40).
 *
 * 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 — and between the acts lie the blocks of
 * the page: the word of the sun on its orange, the number of the tube, four prints of the day.
 *
 * 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 round window in the orange (clip-path, set by the
 *                 script) — the sun — that grows until it is the whole screen; in act 3 a
 *                 tall window on the sand, beside the number, that opens
 *     .leaders    the strings from a tag to its thing
 *   .cue        the words of an act lie on the page, not on the scene: the tags 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 on the tube and the rail of the day, fixed over all of it
 * After the film, in the flow of the page: .foot — the corner of the towel and the print
 * of the tube in the sand.
 *
 * The colours are the tube's and the towel's (tickets/SC-40.md): the cream #fff2d9, the
 * orange #ff9f1c, the turquoise #2ec4b6. Every word is set in one ink, the deep of the
 * sea, #0b2f36: it reads on all three and on the sky. Nothing written lies on the busy
 * parts of a picture bare: a word is either on a colour of the page or on a label of one
 * of the three colours — there are no soft glows under letters.
 */

: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: #fff2d9;
  --sun: #ff9f1c;
  --sea: #2ec4b6;
  --ink: #0b2f36;

  /* The ink of every word. */
  --ui: #0b2f36;
  --ui-dim: rgb(11 47 54 / 0.84);

  /* The tube's own pair. Righteous — the rounded letters of its print — for every large
     word; Urbanist for everything small. The studio's faces (Unbounded, Onest) are in the
     studio's lime corner and nowhere else. */
  --face-display: "Righteous", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --face-text: "Urbanist", 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: #fff2d9;
  color: #0b2f36;
  -webkit-text-size-adjust: 100%;
}

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

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

ol,
ul {
  list-style: none;
}

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

.stage,
.rail,
.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: 16px;
  color: #0b2f36;
  line-height: 1;
}

/*
 * The name as it is printed on the tube: rounded capitals. It passes over sea, sand and
 * skin alike, so it stands on a label of its own — the cream of the towel's woven tag.
 */
.brand {
  padding: 10px 14px 9px;
  border-radius: 12px;
  background-color: #fff2d9;
  color: var(--ui);
  font-family: var(--face-display);
  font-size: 23px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: background-color 260ms linear;
}

/* 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: 10px 28px;
  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 out into the cream of the sand, so the ink reads on any of the eight. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to top, rgb(255 242 217 / 0.94), rgb(255 242 217 / 0.6) 24%, rgb(255 242 217 / 0) 50%);
  pointer-events: none;
}

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

.line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0.08em 0.16em 0;
  margin: -0.08em 0 -0.16em;
}

.line > span {
  display: block;
  width: -webkit-fit-content;
  width: fit-content;
}

/* The word of an act. */
.cue-act {
  font-family: var(--face-display);
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 400;
  line-height: 0.95;
  white-space: nowrap;
}

/* A tag: a label of the tube's or the sea's colour, with its word. */
.tag {
  display: inline-block;
  padding: 12px 22px 14px;
  border-radius: 14px;
  color: #0b2f36;
  font-family: var(--face-display);
  font-size: clamp(27px, 3vw, 46px);
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}

.tag-sea {
  background-color: #2ec4b6;
}

.tag-sun {
  background-color: #ff9f1c;
}

.tag-cream {
  background-color: #fff2d9;
}

/* The phrase of the page is a tag too, a large one. */
.cue-phrase .tag {
  padding: 18px 30px 22px;
  border-radius: 24px;
  font-size: clamp(38px, 4.5vw, 70px);
  line-height: 1.02;
}

/* The line of the page — on the first screen and on the last — is the third tag, in the third colour of the tube. */
.title,
.final-title {
  padding: 15px 26px 20px;
  border-radius: 24px;
  font-size: clamp(34px, 4vw, 62px);
  line-height: 1;
}

/* A still with no words is left as it was shot. */
.shot[data-words="none"]::after {
  content: none;
}

.cue-final {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

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

.pill:focus-visible {
  outline: 3px solid #0b2f36;
  outline-offset: 3px;
}

.pill-round {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #0b2f36;
  color: #fff2d9;
}

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

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

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

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

.block[data-field="sun"] {
  --field: #ff9f1c;
}

.block[data-field="cream"] {
  --field: #fff2d9;
}

.block[data-field="sea"] {
  --field: #2ec4b6;
}

/* The word of the sun and the number of the tube: the large words of the page. */
.phrase {
  font-family: var(--face-display);
  font-size: clamp(60px, 9vw, 140px);
  font-weight: 400;
  line-height: 0.95;
  white-space: nowrap;
}

.block-word,
.block-number {
  padding: clamp(40px, 9vh, 96px) var(--gutter);
}

/* Without the film the number is set in one line. */
.phrase-spf .line {
  display: inline-block;
  vertical-align: top;
}

/* The day so far: four prints of the footage in a row, a step of the day under each. */
.block-day {
  padding: clamp(36px, 7vh, 72px) var(--gutter);
}

.strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.6vw, 24px);
}

.strip img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  background-color: #ffe2b0;
}

.strip figcaption {
  margin-top: 12px;
  font-family: var(--face-display);
  font-size: clamp(22px, 2.3vw, 36px);
  line-height: 1.1;
}

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

/* On a colour of the page there is nothing to lift the header off: its labels let go, the ink stands alone. */
.live .brand[data-tone="flat"],
.live .rail[data-tone="flat"] {
  background-color: rgb(255 242 217 / 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 sun rides in under the foot of its word: the block ends on the window's own orange. */
.live .act[data-act="sun"] {
  margin-top: -10vh;
  margin-top: -10svh;
}

/*
 * The tall window rides in beside the number, not under it: its scene begins up where the
 * number does — a little lower, so that the cream flood before it has shut by the time
 * the scene's own cream comes over it.
 */
.live .act[data-act="water"] {
  margin-top: calc(-1.8 * var(--num) + 4vh);
  margin-top: calc(-1.8 * var(--num) + 4svh);
}

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

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

.live .stage[data-field="cream"] {
  background-color: #fff2d9;
}

.live .stage[data-field="sea"] {
  background-color: #2ec4b6;
}

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

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

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

/*
 * A string 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 string begins.
 */
.leader {
  visibility: hidden;
  transition: visibility 0s linear 300ms;
}

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

/* A string: a cord of the cream over a wider one of the ink, a knot where it is tied. */
.leader path {
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 240ms var(--ease-camera);
}

.leader path.casing {
  stroke: #0b2f36;
  stroke-width: 7;
  opacity: 0.5;
}

.leader path.stroke {
  stroke: #fff2d9;
  stroke-width: 3;
}

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

.leader circle.casing {
  fill: #0b2f36;
}

.leader .knot {
  fill: #fff2d9;
}

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

.leader.is-on circle.casing {
  opacity: 0.5;
  transition: opacity 200ms linear 420ms;
}

.leader.is-on .knot {
  opacity: 1;
  transition: opacity 200ms linear 420ms;
}

/*
 * 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: visibility 0s linear 0s;
}

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

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

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

/* The line of the page stands at the foot of the first screen 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 header. */
  opacity: var(--fade, 1);
  left: var(--gutter);
  bottom: calc(var(--pin, 1) * 100vh + var(--gutter) + 4px);
  bottom: calc(var(--pin, 1) * 100svh + var(--gutter) + 4px);
}

/*
 * The word of the sea stands on its flood inside the third 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;
  text-align: center;
  transform: translate3d(-50%, calc(-54% + var(--ty, 0px)), 0);
}

.live .cue-act {
  font-size: min(calc(var(--k, 20) * 1vw), 60vh);
}

/*
 * A tag lies on the page of its act, where the script puts it (--at, in screens from the
 * act's head): the scroll carries it up past the pinned picture, and its string follows
 * the thing it is tied to. It comes with a small swing, as a label on a string does.
 */
.live .cue-tag {
  top: calc(var(--at, 0.5) * 100vh);
  top: calc(var(--at, 0.5) * 100svh);
  opacity: var(--fade, 1);
}

/* Up the left of the tube, over the water. */
.live #cue-resistant {
  left: clamp(20px, 7vw, 120px);
}

/* Up the right of the tube, over the sand its shadow falls on. */
.live #cue-reapply {
  right: clamp(20px, 5.5vw, 96px);
}

.live .tag {
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.2);
  opacity: 0;
  transform: rotate(-5deg) scale(0.9);
  transform-origin: 12% 50%;
  transition:
    opacity 200ms linear,
    transform 280ms var(--ease-camera);
}

.live .cue.is-on .tag {
  opacity: 1;
  transform: none;
  transition:
    opacity 220ms linear,
    transform 620ms var(--ease-text);
}

/* The last line rides in from below as soon as the sunset is in sight, left of the tube, and is half-way up the screen when the scene is let go. */
.live .cue-final {
  left: calc(var(--gutter) + 0.6vw);
  top: calc((var(--pin, 1) + 0.42) * 100vh);
  top: calc((var(--pin, 1) + 0.42) * 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 360ms,
    transform 640ms var(--ease-text) 360ms,
    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));
}

/* A block on the sand has no paint of its own: the page is the sand, and a scene may ride in under its words. */
.live .block[data-clear] {
  overflow: visible;
  background-color: rgb(0 0 0 / 0);
  background-image: none;
  pointer-events: none;
}

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

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

/* «Sun.»: one word in the middle of the orange, as large as the screen lets it. */
.live .block-word {
  padding: 3vh var(--gutter) 5vh;
  padding: 3svh var(--gutter) 5svh;
}

.live .phrase-sun {
  width: -webkit-max-content;
  width: max-content;
  margin: 0 auto;
  font-size: min(calc(var(--k, 30) * 1vw), 60vh);
}

/*
 * «SPF 50.»: two lines down the right half of the sand, as the number stands on the tube;
 * the left half is kept for the tall window that rides in beside it.
 */
.live .block-number {
  height: calc(4vh + 1.8 * var(--num));
  height: calc(4svh + 1.8 * var(--num));
  padding: 4vh var(--gutter) 0 0;
  padding: 4svh var(--gutter) 0 0;
}

/* The size of the number: the scene after it is pulled up by the same measure, so both read it from the film. */
.live .film {
  --num: min(20vw, 34vh);
  --num: min(20vw, 34svh);
}

.live .phrase-spf {
  margin-left: 52%;
  font-size: var(--num);
  line-height: 0.9;
}

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

/* The second line a step to the right: the two draw apart a little as the block rides through the screen. */
.live .phrase-spf .line + .line {
  margin-left: 0.5em;
  transform: translate3d(calc((var(--p, 0.5) - 0.5) * 9vw), 0, 0);
}

/* The four prints: one row, wider than the screen, that runs to the left as the page goes down. */
.live .block-day[data-clear] {
  overflow: hidden;
  padding: 7vh 0 8vh;
  padding: 7svh 0 8svh;
  pointer-events: auto;
}

.live .strip {
  display: flex;
  gap: 2.2vw;
  width: -webkit-max-content;
  width: max-content;
  transform: translate3d(calc(22vw - var(--p, 0.5) * 92vw), 0, 0);
  will-change: transform;
}

.live .strip li {
  flex: none;
  width: 36vw;
}

/* Every second print hangs a step lower, as prints on a line do. */
.live .strip li:nth-child(even) {
  margin-top: 5vh;
  margin-top: 5svh;
}

/* The rail of the day: six small rings on one line, the horizon. The ring of the step on
   screen fills with the orange of the sun as the step goes by, and stays full after it. */
.live .rail {
  display: block;
  padding: 6px 8px 2px;
  border-radius: 14px;
  background-color: #fff2d9;
  color: var(--ui);
  transition: background-color 260ms linear;
}

.rail ol {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(74px, 1fr);
  list-style: none;
}

.rail li {
  position: relative;
}

/* The horizon: from one ring to the next. */
.rail li + li::before {
  content: "";
  position: absolute;
  top: 14px;
  right: calc(50% + 11px);
  width: calc(100% - 22px);
  height: 2px;
  background-color: var(--ui);
  opacity: 0.38;
}

.rail button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 100%;
  margin: 0;
  padding: 6px 6px 8px;
  border: 0;
  background: none;
  color: var(--ui-dim);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 200ms linear;
}

.rail button:hover,
.rail .is-now button {
  color: var(--ui);
}

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

.rail button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 6px;
}

.rail i {
  position: relative;
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.rail i::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background-color: #ff9f1c;
  transform: scale(var(--p, 0));
}

.rail .is-done i::after {
  transform: none;
}

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

.hint i {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #ff9f1c;
}

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

/*
 * ——— The footer: what the day leaves on the beach ———
 *
 * Seen from above: the corner of the towel with its woven label, and beside it in the
 * sand the round print of the tube's cap (textures/towel.webp, photographed). The facts
 * of the tube stand on the sand. The studio's lime corner is the one thing that is the
 * same on every page.
 */

.foot {
  position: relative;
  padding-bottom: clamp(84px, 12vh, 112px);
  background-color: #fff2d9;
  color: #0b2f36;
}

.shore {
  position: relative;
  isolation: isolate;
  width: min(100%, 1760px);
  margin: 0 auto;
}

.towel {
  display: block;
}

.towel img {
  display: block;
  width: 100%;
  height: auto;
}

/* The sand of the photograph goes out into the cream of the page, above and below. */
.shore::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, rgb(255 242 217 / 1), rgb(255 242 217 / 0) 12%, rgb(255 242 217 / 0) 84%, rgb(255 242 217 / 1));
  pointer-events: none;
}

.facts {
  position: absolute;
  left: 58%;
  right: var(--gutter);
  top: 47%;
  z-index: 1;
  transform: translate3d(0, -50%, 0);
}

.facts-lead {
  font-family: var(--face-display);
  font-size: clamp(30px, 3.5vw, 58px);
  line-height: 1.04;
}

/* Two lines, broken where the comma is. */
.facts-lead span {
  display: block;
  white-space: nowrap;
}

.facts-line {
  margin-top: 20px;
  font-size: clamp(18px, 1.5vw, 23px);
  font-weight: 600;
  line-height: 1.4;
}

.facts-size {
  margin-top: 6px;
  color: rgb(11 47 54 / 0.86);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.4;
}

/* The studio signs in its own colours, not the tube'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 #0b2f36;
  outline-offset: 3px;
}

.studio svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}

.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; on a phone the picture
 * fills the screen, and the cut follows the thing of the shot.)
 */

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

  /* Without the film: the still, whole, and its words under it on the sand. */
  .shot {
    min-height: 0;
    padding: 0 var(--gutter) 30px;
  }

  .shot[data-words="none"] {
    padding-bottom: 0;
  }

  .still {
    position: relative;
    inset: auto;
    z-index: 0;
    width: calc(100% + 2 * var(--gutter));
    margin: 0 calc(-1 * var(--gutter)) 18px;
    aspect-ratio: 3 / 4;
  }

  .shot[data-words="none"] .still {
    margin-bottom: 0;
  }

  .shot::after {
    content: none;
  }

  .cue-act,
  .phrase {
    font-size: clamp(56px, 19vw, 92px);
  }

  .tag {
    font-size: 27px;
  }

  /* The phrase in two lines: «Reapply every» and «two hours.» */
  .cue-phrase .tag {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    column-gap: 0.26em;
    padding: 12px 20px 15px;
    border-radius: 18px;
    font-size: clamp(29px, 8.2vw, 36px);
  }

  .cue-phrase .line:last-child {
    grid-column: 1 / -1;
  }

  .title,
  .final-title {
    padding: 13px 20px 16px;
    border-radius: 20px;
    font-size: clamp(32px, 9.4vw, 42px);
  }

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

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

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

  .strip figcaption {
    margin-top: 8px;
    font-size: 22px;
  }

  /* With the film: the picture is the scene's again. */
  .live .shot {
    padding: 0;
  }

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

  .live .cue-act {
    font-size: min(calc(var(--kt, 26) * 1vw), 40vh);
  }

  .live .phrase-sun {
    font-size: min(calc(var(--kt, 40) * 1vw), 40vh);
  }

  /* The number in the middle of the sand; the window comes up under it. */
  .live .film {
    --num: min(31vw, 22vh);
    --num: min(31vw, 22svh);
  }

  .live .block-number {
    padding-right: 0;
  }

  .live .phrase-spf {
    width: -webkit-max-content;
    width: max-content;
    margin: 0 auto;
  }

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

  /* The tags come up from the foot of the screen, in the middle of it. */
  .live #cue-resistant,
  .live #cue-reapply {
    left: var(--gutter);
    right: auto;
  }

  /* The last line rides in on the left, under the bag. */
  .live .cue-final {
    left: var(--gutter);
    top: calc((var(--pin, 1) + 0.58) * 100vh);
    top: calc((var(--pin, 1) + 0.58) * 100svh);
  }

  .live .strip {
    gap: 4vw;
    transform: translate3d(calc(30vw - var(--p, 0.5) * 215vw), 0, 0);
  }

  .live .strip li {
    width: 66vw;
  }

  .live .strip li:nth-child(even) {
    margin-top: 3vh;
    margin-top: 3svh;
  }

  /* Only the step on screen keeps its name, beside its ring; the others are their rings. */
  .rail ol {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  .rail li + li::before {
    content: none;
  }

  .live .rail {
    padding: 4px 8px;
  }

  .rail button {
    flex-direction: row;
    gap: 7px;
    width: auto;
    padding: 6px 2px;
  }

  .rail i {
    width: 14px;
    height: 14px;
  }

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

  .live .hint span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

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

  /* The corner of the towel alone, and the facts under it on the sand. */
  .foot {
    padding-bottom: 92px;
  }

  .shore::after {
    bottom: auto;
    aspect-ratio: 1 / 1;
    background-image: linear-gradient(to bottom, rgb(255 242 217 / 1), rgb(255 242 217 / 0) 10%, rgb(255 242 217 / 0) 86%, rgb(255 242 217 / 1));
  }

  .facts {
    position: static;
    padding: 14px var(--gutter) 8px;
    transform: none;
  }

  .facts-lead {
    font-size: clamp(32px, 9.6vw, 42px);
  }

  .facts-line {
    margin-top: 14px;
    font-size: 19px;
  }

  .facts-size {
    font-size: 16px;
  }
}

/* ——— Checks ——— */

.hud {
  position: fixed;
  left: 8px;
  top: 76px;
  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;
}