/* ============================================================================
   S4 · Quiet — one move. SUCCESS IS / QUIET / PRODUCTION. on three lines,
   left-aligned, vertically centred; QUIET drains on the weight axis until
   only a 1.5px bone outline remains. The CSS default IS the key pose (QUIET
   already drained); js/scenes/quiet.js moves it back to 900 and scrubs it.
   The rails on the light canvas persist behind; nothing else moves.
   ========================================================================== */

.scene--quiet .scene__stage {
  display: flex;
  align-items: center;
  padding: var(--header-h) var(--gutter) max(var(--gutter), 24px);
}

/* The word block. --quiet-fs is set by JS after fonts load (fit to the gutters);
   the fallback ratios below are the measured em-widths of each line in Anybody 900 / wdth 125
   so the block fits without JS. */
.quiet__word {
  --quiet-fit: calc((100vw - 2 * var(--gutter)) / 8.95);
  --quiet-fs: min(15vw, var(--quiet-fit), calc(72svh / 2.58));
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: var(--quiet-fs);
  line-height: 0.86;
  white-space: nowrap;
  color: var(--bone);
}
.quiet__line {
  display: block;
  width: fit-content;
  white-space: nowrap;
}
.quiet__line + .quiet__line {
  margin-top: 0.02em;
}

/* Key pose: QUIET drained. Fill transparent, stroke stays, weight 100. */
.quiet__drain {
  font-variation-settings: "wdth" 125, "wght" 100;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--bone);
}

.quiet__stack {
  z-index: 2;
  max-width: calc(100% - 2 * var(--gutter));
  margin: 0;
  color: var(--fg-2);
}
.quiet__s1,
.quiet__s2 {
  white-space: nowrap;
}

/* ---------- Phone: each line fitted to the gutters on its own; QUIET is the biggest word ---------- */
@media (max-width: 767px) {
  .quiet__word {
    --quiet-fs-1: calc((100vw - 2 * var(--gutter)) / 7.9);
    --quiet-fs-2: calc((100vw - 2 * var(--gutter)) / 3.95);
    --quiet-fs-3: calc((100vw - 2 * var(--gutter)) / 8.95);
    font-size: 17vw;
  }
  .quiet__l1 {
    font-size: var(--quiet-fs-1);
  }
  .quiet__l2 {
    font-size: var(--quiet-fs-2);
  }
  .quiet__l3 {
    font-size: var(--quiet-fs-3);
  }
  .quiet__line + .quiet__line {
    margin-top: 0.06em;
  }
  .quiet__stack {
    text-align: right;
  }
}

/* ---------- Landscape phone: three lines at ~11vh, one size ---------- */
@media (max-height: 500px) and (orientation: landscape) {
  .quiet__word {
    --quiet-fs: min(11vh, var(--quiet-fit));
    --quiet-fs-1: var(--quiet-fs);
    --quiet-fs-2: var(--quiet-fs);
    --quiet-fs-3: var(--quiet-fs);
    font-size: var(--quiet-fs);
  }
  .quiet__l1,
  .quiet__l2,
  .quiet__l3 {
    font-size: inherit;
  }
  .quiet__line + .quiet__line {
    margin-top: 0.02em;
  }
}