/*
 * Hushwater, «From water to skin» — 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-35.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 — and between the acts lie the blocks of
 * the page: the formula on the white, a word of the brand on its sage and on its dark green.
 *
 * 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 white page (clip-path, set by the
 *                 script) that opens to the whole screen
 *     .leaders    the lines from a word to its thing
 *   .cue        the words of an act lie on the page, not on the scene: they come from
 *               below and leave upwards with the scroll while the picture stands pinned.
 *               (.cue-card — the word on a flood inside an act — and .cue-step — a step
 *               under its product — stand on the scene.)
 *   .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 of the brand and the acts of the story, fixed over all of it
 * After the film, in the flow of the page: .foot — the label of the serum, large, on
 * the stone of the ledge.
 *
 * The words take their ink from what lies under them (data-tone): cream over the moss of
 * the forest ("dark") and on the dark green ("bare"); the brand's dark green over the pale
 * rooms ("light") and on the sage and the white ("plain").
 *
 * The colours of the brand (tickets/SC-35.md): sage #dde3d3, dark green #2c3327, white.
 */

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

  --sage: #dde3d3;
  --moss: #2c3327;
  --deep: #1b2117;
  --cream: #f4f6ee;
  --paper: #f7f2ec;

  /* The brand's own pair. Tenor Sans — the fine letters of its label, one weight — for
     every large word; Red Hat Text for everything small. The studio's faces (Unbounded,
     Onest) are in the studio's lime corner and nowhere else. */
  --face-display: "Tenor Sans", Optima, Candara, "Gill Sans", sans-serif;
  --face-text: "Red Hat Text", 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: #1b2117;
  color: #f4f6ee;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: #f4f6ee;
  font-family: var(--face-text);
  font-size: 16px;
  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 {
  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;

  /* Cream: the ink of every word until something says otherwise. */
  --ui: #f4f6ee;
  --ui-dim: rgb(244 246 238 / 0.84);
  --under: #1b2117;
  --plate: rgb(20 26 17 / 0.6);
  /* What lies round a picture smaller than the screen, until the script says which ground. */
  --ground: #1b2117;
}

.stage,
.acts,
.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: #f4f6ee;
  line-height: 1;
}

/* The name as it stands on the label: fine capitals, set wide. */
.brand {
  position: relative;
  isolation: isolate;
  padding-top: 8px;
  color: var(--ui);
  font-family: var(--face-display);
  font-size: 20px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  transition: color 300ms linear;
}

/* It passes over moss and over white stone alike: it carries its own soft plate. */
.brand::before {
  content: "";
  position: absolute;
  inset: -22px -36px;
  z-index: -1;
  background-image: radial-gradient(closest-side, var(--plate), rgb(0 0 0 / 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: 10px 28px;
  min-height: 100vh;
  min-height: 100svh;
  padding: 96px var(--gutter) clamp(28px, 6vh, 64px);
  overflow: hidden;
  isolation: isolate;
  color: #f4f6ee;

  --ui: #f4f6ee;
  --veil: 27 33 23;
}

/* The pale rooms: the brand's dark green on a veil of its sage. */
.shot[data-ground="sage"] {
  color: #2c3327;

  --ui: #2c3327;
  --veil: 232 236 224;
}

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

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

/* The last still: the tube stands where the words of the others do, so its words stand
   on the wall to the right of the bottle, above the jar, and the veil comes down from the top. */
.shot[data-shot="C8"] {
  justify-content: flex-start;
  padding-top: clamp(96px, 12vh, 124px);
  padding-left: 56%;
}

:root:not(.live) .shot[data-shot="C8"] .cue-act {
  font-size: clamp(48px, 6vw, 96px);
}

.shot[data-shot="C8"]::after {
  background-image: linear-gradient(to bottom, rgb(var(--veil) / 0.86), rgb(var(--veil) / 0.5) 34%, rgb(var(--veil) / 0) 60%);
}

/* Under the words a still is veiled, so they read on any of the eight. */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(to top, rgb(var(--veil) / 0.92), rgb(var(--veil) / 0.62) 26%, rgb(var(--veil) / 0) 56%);
  pointer-events: none;
}

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

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

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

/* The line of the first screen. */
.title {
  font-family: var(--face-display);
  font-size: clamp(40px, 5.6vw, 92px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

/* The word of an act. */
.cue-act {
  font-family: var(--face-display);
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* A word tied to a thing of the picture. */
.cue-caption {
  font-family: var(--face-display);
  font-size: clamp(30px, 3.6vw, 58px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.06;
  white-space: nowrap;
}

/* A whole sentence, tied the same way: smaller. */
.cue-long {
  font-size: clamp(24px, 2.6vw, 42px);
  line-height: 1.12;
}

/* The three steps of the routine, each under its product. */
.steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 32px;
}

.cue-step {
  font-family: var(--face-display);
  font-size: clamp(26px, 2.5vw, 40px);
  line-height: 1.05;
  white-space: nowrap;
}

.cue-step b {
  display: inline-block;
  margin-right: 0.5em;
  font-family: var(--face-text);
  font-size: 0.5em;
  font-weight: 700;
  vertical-align: 0.42em;
}

.final-title {
  font-family: var(--face-display);
  font-size: clamp(36px, 4vw, 64px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  white-space: nowrap;
}

/* The button: a capsule of the dark green, its arrow in a round of sage. */
.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: #2c3327;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 180ms linear;
}

.pill:hover {
  background-color: #1b2117;
}

.pill:focus-visible {
  outline: 2px solid #2c3327;
  outline-offset: 3px;
}

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

.pill-round svg,
.studio svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  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 brand's colours.
 */

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

  --ui: #2c3327;
  --rule: rgb(44 51 39 / 0.3);
}

.block[data-field="white"] {
  --field: #ffffff;
}

.block[data-field="sage"] {
  --field: #dde3d3;
}

.block[data-field="moss"] {
  --field: #2c3327;
  --ui: #f4f6ee;
  --rule: rgb(244 246 238 / 0.3);
}

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

/* A word of the brand: the fine letters of its label. */
.word {
  color: var(--ui);
  font-family: var(--face-display);
  font-size: clamp(56px, 8vw, 128px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* The formula: its word, and beside it the seven ingredients in the order the label lists them. */
.block-formula {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 96px);
  align-items: start;
  padding: clamp(40px, 9vh, 96px) var(--gutter);
}

.formula {
  counter-reset: inci;
  border-top: 1px solid var(--rule);
}

.formula li {
  display: flex;
  align-items: baseline;
  gap: 1.1em;
  padding: 0.42em 0 0.46em;
  border-bottom: 1px solid var(--rule);
  color: var(--ui);
  font-family: var(--face-display);
  font-size: clamp(26px, 3.3vw, 54px);
  line-height: 1.12;
}

/* The place of each in the formula. */
.formula li::before {
  counter-increment: inci;
  content: counter(inci);
  flex: none;
  width: 2em;
  font-family: var(--face-text);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

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

/* The ink of the words over the footage. */
.live [data-tone="dark"] {
  --ui: #f4f6ee;
  --ui-dim: rgb(244 246 238 / 0.84);
  --under: #1b2117;
  --plate: rgb(20 26 17 / 0.6);
}

/* On the dark green: the cream without its plate. */
.live [data-tone="bare"] {
  --ui: #f4f6ee;
  --ui-dim: rgb(244 246 238 / 0.84);
  --under: #1b2117;
  --plate: rgb(20 26 17 / 0);
}

.live [data-tone="light"] {
  --ui: #2c3327;
  --ui-dim: rgb(44 51 39 / 0.84);
  --under: #f4f6ee;
  --plate: rgb(236 240 229 / 0.82);
}

/* On the sage and the white: the dark green without its plate. */
.live [data-tone="plain"] {
  --ui: #2c3327;
  --ui-dim: rgb(44 51 39 / 0.84);
  --under: #f4f6ee;
  --plate: rgb(236 240 229 / 0);
}

/* While a flood grows over the picture the soft plates under the name and the acts are put away. */
.brand::before,
.live .acts::before {
  transition: opacity 200ms linear;
}

.bar.is-bare .brand::before,
.bar.is-bare .acts::before {
  opacity: 0;
}

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

.live .steps {
  display: contents;
}

/* 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,
.live .block.is-on .word .line > span {
  transform: none;
  transition: transform 640ms var(--ease-text) calc(var(--i, 0) * 80ms + 80ms);
}

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

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

/* The line of the first screen stands in its corner 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) + 2px);
  bottom: calc(var(--pin, 1) * 100svh + var(--gutter) + 2px);
}

/* The word of an act stands alone in the middle of its flood, as large as the screen lets it. */
.live .cue-card {
  text-align: center;
}

.live .cue-act,
.live .block-word .word {
  font-size: clamp(120px, 21vw, 400px);
}

/*
 * A caption 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 is carried up past the pinned picture,
 * tied to its thing while its moment lasts, and fades just under the header. Each rides
 * up the side its thing is not on.
 */
.live .cue-caption {
  top: calc(var(--at, 0.5) * 100vh);
  top: calc(var(--at, 0.5) * 100svh);
  opacity: calc(var(--lit, 1) * var(--fade, 1));
  transition:
    color 300ms linear,
    opacity 260ms linear,
    visibility 0s linear 0s;
}

.live .cue-caption:not(.is-on) {
  transition:
    color 300ms linear,
    opacity 260ms linear,
    visibility 0s linear 340ms;
}

/* Before its moment and after it a caption rides dimmer. */
.live .cue-caption.is-on:not(.is-now) {
  --lit: 0.62;
}

.live #cue-aqua {
  left: 8%;
}

.live #cue-hyaluronate,
.live #cue-serum,
.live #cue-seven,
.live #cue-nothing {
  left: 6.5%;
}

.live #cue-damp,
.live #cue-holds {
  left: 5.5%;
}

/* The steps stand on the ledge under their products; the script puts them there. */
.cue-step {
  list-style: none;
}

.live .cue-step::before {
  inset: -50% -24%;
}

/*
 * The last line rides in from below once the serum stands in its place, and is over the
 * wall, above the bottle, when the scene is let go.
 */
.live .cue-final {
  left: 33.5%;
  top: calc((var(--pin, 1) + 0.105) * 100vh);
  top: calc((var(--pin, 1) + 0.105) * 100svh);
}

.live .cue-final::before {
  inset: -30% -22%;
}

.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.
 */

/* A word of the brand, alone on its colour, as large as the screen lets it; it drifts a little to one side as the block rides up. */
.live .block-word {
  padding: 2vh var(--gutter) 9vh;
  padding: 2svh var(--gutter) 9svh;
  text-align: center;
}

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

.live .block-word .word {
  transform: translate3d(calc((0.5 - var(--p, 0.5)) * var(--drift, 12vw)), 0, 0);
}

.live .block-word[data-field="moss"] .word {
  --drift: -12vw;
}

.live .block-word .line > span {
  margin: 0 auto;
}

/* The formula: the word at the left, the list at the right; the rows ride a little apart, the lower the slower. */
.live .block-formula {
  padding: 3vh var(--gutter) 10vh;
  padding: 3svh var(--gutter) 10svh;
}

.live .block-formula .word {
  font-size: clamp(72px, 12vw, 210px);
}

.live .formula {
  margin-top: 0.6vw;
}

.live .formula li {
  opacity: var(--fade, 1);
  transform: translate3d(0, calc((0.62 - var(--p, 0.5)) * var(--k, 0) * 22px), 0);
}

/* A line: a hair of the word's ink over a wider one of the other tone, a ring where it lands. */
.leader path {
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 240ms var(--ease-camera);
}

.leader path.casing {
  stroke: var(--under);
  stroke-width: 5;
  stroke-linecap: round;
  opacity: 0.5;
}

.leader path.stroke {
  stroke: var(--ui);
  stroke-width: 1.5;
}

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

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

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

.leader .ring {
  fill: none;
  stroke: var(--ui);
  stroke-width: 1.5;
}

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

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

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

.leader.is-on .ring {
  opacity: 0.85;
  transition: opacity 220ms linear 460ms;
}
/* The acts of the story: a name and, under it, a hairline that fills as the act goes by and stays full after it. */
.live .acts {
  position: relative;
  display: block;
  isolation: isolate;
  color: var(--ui);
  transition: color 300ms linear;
}

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

.acts ol {
  display: flex;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 32px);
}

.acts button {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  min-width: 56px;
  margin: 0;
  padding: 8px 0 10px;
  border: 0;
  background: none;
  color: var(--ui-dim);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: color 200ms linear;
}

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

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

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

.acts i {
  position: relative;
  display: block;
  height: 2px;
  overflow: hidden;
  background-color: color-mix(in srgb, currentColor 30%, transparent);
}

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

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

.hint i {
  display: block;
  width: 44px;
  height: 2px;
  background-color: #dde3d3;
}

.hint.is-off {
  opacity: 0;
}
/*
 * ——— The footer: the label, large ———
 *
 * Seen from over it: a sheet of the label's paper on the stone of the ledge, the bottle
 * lying beside it among a few drops of water (textures/label.webp, photographed). The
 * formula and the order of care are live text laid over the sheet: the block below sits
 * exactly on the paper of the picture (its place is measured in shares of the picture),
 * and its type is sized by the width of the picture, so the two keep together at any size.
 * 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: #e9ddd0;
  color: #2c3327;
}

.slab {
  /* The width of the picture: what the type on the paper is sized by. */
  --w: min(100vw, 1680px);

  position: relative;
  isolation: isolate;
  width: min(100%, 1680px);
  margin: 0 auto;
  background-color: #e9ddd0;
}

.stone {
  display: block;
}

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

/* The stone goes out into the colour of the page at its foot, where the lime corner stands. */
.slab::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 12%;
  background-image: linear-gradient(to bottom, rgb(233 221 208 / 0), rgb(233 221 208 / 1));
  pointer-events: none;
}

/* The sheet of paper in the picture: left 22.5%, top 14.6%, 25.9% wide, 71% tall. If the
   picture does not come, the block is paper of its own. */
.label {
  position: absolute;
  left: 22.51%;
  top: 14.58%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 25.89%;
  height: 70.96%;
  padding: calc(var(--w) * 0.021) calc(var(--w) * 0.02) calc(var(--w) * 0.018);
  background-color: #f7f2ec;
  color: #2c3327;
  font-size: clamp(14px, calc(var(--w) * 0.0104), 17.5px);
  line-height: 1.4;
}

/* Over the picture the paper is the picture's own. */
.stone + .label {
  background-color: rgb(247 242 236 / 0);
}

/* The maker's name stands at the foot of the sheet, as it does on the bottle beside it. */
.label-name {
  margin-top: auto;
  padding-top: calc(var(--w) * 0.012);
  font-family: var(--face-display);
  font-size: calc(var(--w) * 0.0125);
  letter-spacing: 0.3em;
  line-height: 1;
  text-transform: uppercase;
}

.label-product {
  font-family: var(--face-display);
  font-size: calc(var(--w) * 0.025);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.label-volume {
  margin-top: 0.3em;
  font-weight: 600;
}

.label-head {
  margin-top: calc(var(--w) * 0.009);
  padding-top: calc(var(--w) * 0.011);
  border-top: 1px solid rgb(44 51 39 / 0.32);
  font-size: inherit;
  font-weight: 700;
  line-height: 1.3;
}

.label-inci {
  margin-top: 0.45em;
}

.label-inci li {
  display: flex;
  align-items: baseline;
  gap: 0.9em;
  padding: 0.14em 0;
}

/* The place of each in the formula: the label lists them in order. */
.label-inci {
  counter-reset: inci;
}

.label-inci li::before {
  counter-increment: inci;
  content: counter(inci);
  flex: none;
  width: 1em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.label-note {
  margin-top: 0.7em;
  font-weight: 600;
}

.label-order {
  margin-top: 0.45em;
}

.label-order li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.6em;
  padding: 0.14em 0;
}

.label-order b {
  font-family: var(--face-display);
  font-size: 1.3em;
  font-weight: 400;
  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;
  z-index: 2;
  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 #2c3327;
  outline-offset: 3px;
}

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

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

/*
 * A screen between a phone and a desk: the sheet of paper would be too narrow for its
 * type, so the type steps down to its smallest and the list of the formula runs on.
 */
@media (max-width: 1180px) and (min-width: 981px) and (min-aspect-ratio: 3 / 4) {
  .label {
    font-size: 14px;
    line-height: 1.32;
  }

  .label-inci {
    counter-reset: none;
  }

  .label-inci li {
    display: inline;
    padding: 0;
  }

  .label-inci li::before {
    content: none;
  }

  .label-inci li:not(:last-child)::after {
    content: ", ";
  }

  .label-inci li:last-child::after {
    content: ".";
  }
}

/*
 * ——— A tall screen: the tall frames, the words under the picture ———
 * (The script switches to the tall series at the same ratio. On a phone it lays every
 * shot across the screen's width, under the header, and the words ride up from the shot's
 * ground below the picture: `--foot` is where that picture ends.)
 */

@media (max-aspect-ratio: 3 / 4) {
  .brand {
    font-size: 17px;
    letter-spacing: 0.26em;
  }

  /* Without the film: the still, whole, and its words under it. */
  .shot {
    min-height: 0;
    padding: 0 var(--gutter) 34px;
    background-color: #1b2117;
  }

  .shot[data-ground="sage"] {
    background-color: #dde3d3;
  }

  .shot[data-shot="C1"] {
    padding-top: 68px;
  }

  .shot[data-shot="C8"] {
    padding-top: 0;
    padding-left: var(--gutter);
  }

  :root:not(.live) .shot[data-shot="C8"] .cue-act {
    font-size: clamp(56px, 8vw, 128px);
  }

  .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-shot="C8"] .still {
    aspect-ratio: 5 / 4;
  }

  .shot::after {
    content: none;
  }

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

  .cue-caption {
    font-size: 36px;
  }

  .cue-long {
    font-size: 25px;
  }

  .cue-step {
    font-size: 24px;
  }

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

  .live .final-title {
    margin-top: 0;
  }

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

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

  /* The formula: its word, and the list under it. */
  .block-formula {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .formula li {
    font-size: 26px;
  }

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

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

  .live .cue-act,
  .live .block-word .word,
  .live .block-formula .word {
    font-size: 22vw;
  }

  /* The captions come up from the ground under the picture, one at a time, and send their lines up into it. */
  .live #cue-aqua,
  .live #cue-hyaluronate,
  .live #cue-serum,
  .live #cue-seven,
  .live #cue-nothing,
  .live #cue-damp,
  .live #cue-holds {
    left: var(--gutter);
    right: auto;
  }

  .live .cue::before {
    inset: -46% -14% -36%;
  }

  /* The three steps under their products, across the screen. */
  .live .cue-step {
    top: calc(var(--foot, 50%) + 16px);
  }

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

  .live #cue-cleanse {
    left: 5%;
  }

  .live #cue-serum2 {
    left: 44%;
  }

  .live #cue-cream {
    left: 73%;
  }

  /* The last line and the button come to rest under them. */
  .live .cue-final {
    left: var(--gutter);
    right: var(--gutter);
    top: calc(var(--pin, 1) * 100vh + var(--foot, 50vh) + 96px);
    top: calc(var(--pin, 1) * 100svh + var(--foot, 50svh) + 96px);
  }

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

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

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

  /* Only the act on screen keeps its name; the others are their hairlines. */
  .acts ol {
    align-items: flex-end;
    gap: 8px;
  }

  .acts button {
    min-width: 20px;
  }

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

  .live .hint span {
    display: none;
  }

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

/*
 * ——— The footer on a tall or a narrow screen: the sheet alone ———
 * The picture is the tall one (index.html asks for it on the same condition): the sheet
 * as large as the screen lets it, not wider than 600 px. In that picture the paper lies
 * 10.7% from the left and 5.7% from the top, 78.4% wide and 88.8% tall.
 */
@media (max-aspect-ratio: 3 / 4), (max-width: 980px) {
  .foot {
    padding-bottom: 76px;
  }

  .slab {
    --w: min(100vw, 600px);

    width: min(100%, 600px);
  }

  .slab::after {
    height: 6%;
  }

  .label {
    left: 10.68%;
    top: 5.7%;
    width: 78.41%;
    height: 88.76%;
    padding: calc(var(--w) * 0.062) calc(var(--w) * 0.056) calc(var(--w) * 0.05);
    font-size: clamp(14px, calc(var(--w) * 0.036), 18px);
    line-height: 1.34;
  }

  .label-name {
    padding-top: calc(var(--w) * 0.03);
    font-size: clamp(14px, calc(var(--w) * 0.036), 18px);
  }

  .label-product {
    font-size: calc(var(--w) * 0.08);
  }

  .label-head {
    margin-top: calc(var(--w) * 0.05);
    padding-top: calc(var(--w) * 0.034);
  }

  /* The formula as a label prints it: in one run, in order. */
  .label-inci {
    counter-reset: none;
  }

  .label-inci li {
    display: inline;
    padding: 0;
  }

  .label-inci li::before {
    content: none;
  }

  .label-inci li:not(:last-child)::after {
    content: ", ";
  }

  .label-inci li:last-child::after {
    content: ".";
  }
}

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