/* ============================================================================
   side-quest — "Nes". ERNEST loses three letters and becomes NES, the name on
   his socials; the page is his off-duty life as a title sequence: nine facts,
   each a sentence that moves the way it means; the places he has been fall into
   their coordinates as words; the name ends as his handles. Night plate, bone,
   Signal. Loads after css/home.css and uses only its tokens and primitives.
   CSS default = the still edition's key pose; js/side-quest.js moves things away
   from it and the scroll brings them back.
   ========================================================================== */

.sq {
  --sq-serif: var(--serif-xl);
  --sq-edge: max(var(--gutter), 24px);
}
.sq .hdr {
  --hdr-bg: var(--night);
}

/* ---------- shared: hairlines, prints, the hidden layer ---------- */
.sq-hair {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: color-mix(in srgb, var(--bone) 50%, transparent);
  transform-origin: 0 50%;
  pointer-events: none;
}
.sq-pets__shelf { top: 55%; }
.sq-pets__floor { top: 76%; }
.sq-games__tier--1 { top: 40%; }
.sq-games__tier--2 { top: 60%; }
.sq-fear__water { top: var(--sq-water); }
/* every photo is a print: 3:4 or 4:5, edged in paper, no radius, no shadow */
.sq-print {
  position: absolute;
  z-index: 1;
  margin: 0;
  padding: 2px;
  background: var(--paper);
}
.sq-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* the "+" that opens a sentence's trivia card: a 48px corner control */
.sq-more {
  position: absolute;
  z-index: 6;
  right: var(--gutter);
  bottom: var(--sq-edge);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--line);
  font-size: 18px;
  line-height: 1;
  color: var(--fg-2);
  transition: border-color 0.25s, color 0.25s;
}
.sq-more:hover,
.sq-more[aria-expanded="true"] {
  border-color: var(--fg);
  color: var(--fg);
}
.sq-more--inline {
  position: static;
}
.sq-card {
  right: var(--gutter);
  bottom: calc(var(--sq-edge) + 60px);
}

/* ============================================================================
   Hero · ERNEST → NES, then the gates
   ========================================================================== */
.sq-hero .scene__stage {
  /* the fitting rules JS applies, approximated so the first paint is composed */
  --sq-avail: calc(100vw - 2 * var(--gutter));
  --sq-fs-a: min(calc(var(--sq-avail) / 5.45), 28svh);
  --sq-fs-b: min(calc(var(--sq-avail) / 2.74), 84svh);
}
.sq-hero__name {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-items: center;
  pointer-events: none;
}
.sq-hero__ernest,
.sq-hero__nes {
  grid-area: 1 / 1;
  position: relative;
  margin-left: var(--gutter);
  width: max-content;
  white-space: nowrap;
  line-height: 0.86;
}
.sq-hero__ernest {
  font-size: var(--sq-fs-a);
}
.sq-hero__nes {
  font-size: var(--sq-fs-b);
}
.sq-hero__nes--outline {
  opacity: 0.45;
  -webkit-text-stroke: 1.5px var(--bone);
}
.sq-hero__l,
.sq-hero__n {
  --w: 900;
  position: relative;
  display: inline-block;
  font-variation-settings: "wdth" 125, "wght" var(--w);
  transform-origin: 0 0;
  will-change: transform;
}
/* frozen by JS at mount: every letter at its measured place, so the weight drain never reflows the word */
.sq-hero__l--fixed {
  position: absolute;
  top: 0;
  left: 0;
}
/* a zero-size inline-block on the baseline: JS reads it to place the clip text */
.sq-hero__base {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}
/* motion edition, first paint: ERNEST stands; the NES layers wait for JS */
html.motion .sq-hero__nes {
  visibility: hidden;
}
/* still edition / no JS: NES, with the photos parked in the gates */
html:not(.motion) .sq-hero__ernest,
html:not(.js) .sq-hero__ernest {
  display: none;
}
html:not(.js) .sq-hero__nes--outline {
  display: none;
}

.sq-hero__clips {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sq-hero__cliptext {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125, "wght" 900;
  letter-spacing: -0.01em;
}
.sq-gates {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sq-gate {
  position: absolute;
  overflow: hidden;
  opacity: 0;
}
.sq-gate--n {
  clip-path: url(#gate-n);
}
.sq-gate--e {
  clip-path: url(#gate-e);
}
.sq-gate--s {
  clip-path: url(#gate-s);
}
.sq-gate__strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 6px;
  width: 100%;
  will-change: transform;
}
.sq-gate__strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sq-hero__serif {
  max-width: 24ch;
}
.sq-hero__stamp {
  color: var(--fg-2);
}
.sq-clock {
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
/* the serif line and the stamp keep out of the name's way on short screens */
@media (max-height: 640px) and (min-width: 768px) {
  .sq-hero .scene__stage {
    --sq-fs-b: min(calc(var(--sq-avail) / 2.74), 72svh);
  }
}

/* ============================================================================
   The nine sentences · unpinned, one screen each; the move plays while the
   sentence crosses the viewport.
   ========================================================================== */
.sq-line {
  position: relative;
  min-height: 100svh;
}
.sq-line__stage {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 0 var(--gutter);
  overflow: clip visible;
}
.sq-line .serif-line {
  max-width: none;
  text-align: center;
  font-size: var(--sq-serif);
  line-height: 1.1;
  text-wrap: balance;
}
.sq-line .display {
  color: var(--bone);
}

/* 1 · Food · the echo: five copies, one line lower each, Anybody 700 → 100 */
.sq-food {
  display: grid;
  grid-area: 1 / 1;
  justify-items: center;
  /* the stack is centred in the still edition: six lines, the first at the top */
  translate: 0 calc(-2.5 * 1.16 * var(--sq-serif));
}
.sq-food > * {
  grid-area: 1 / 1;
  white-space: nowrap;
  text-align: center;
}
.sq-food__echo {
  font-family: var(--display);
  font-size: calc(var(--sq-serif) * 0.84);
  line-height: 1.1;
  font-stretch: 100%;
  letter-spacing: -0.01em;
  color: var(--bone);
  will-change: transform;
}
.sq-food__echo--1 { font-variation-settings: "wdth" 100, "wght" 700; translate: 0 calc(1 * 1.16 * var(--sq-serif)); }
.sq-food__echo--2 { font-variation-settings: "wdth" 100, "wght" 500; translate: 0 calc(2 * 1.16 * var(--sq-serif)); }
.sq-food__echo--3 { font-variation-settings: "wdth" 100, "wght" 300; translate: 0 calc(3 * 1.16 * var(--sq-serif)); }
.sq-food__echo--4 { font-variation-settings: "wdth" 100, "wght" 200; translate: 0 calc(4 * 1.16 * var(--sq-serif)); }
.sq-food__echo--5 { font-variation-settings: "wdth" 100, "wght" 100; translate: 0 calc(5 * 1.16 * var(--sq-serif)); }
html.motion .sq-food {
  translate: 0 0;
}
html.motion .sq-food__echo {
  translate: 0 0;
}
html:not(.motion) .sq-food,
html:not(.js) .sq-food {
  grid-auto-flow: row;
  gap: 0.06em;
  translate: 0 0;
}
html:not(.motion) .sq-food > *,
html:not(.js) .sq-food > * {
  grid-area: auto;
  translate: 0 0;
}

/* 2 · Pets · the shelf: MOCHI and SACHI drop onto a hairline, PANPAN slides in along the floor; the prints stand on them */
.sq-pets__w {
  position: absolute;
  left: var(--gutter);
  margin: 0;
  font-size: 9vw;
  font-variation-settings: "wdth" 110, "wght" 900;
  font-stretch: 110%;
  line-height: 0.86;
  white-space: nowrap;
  will-change: transform;
}
.sq-pets__w--mochi,
.sq-pets__w--sachi {
  bottom: calc(45% + 0.03em);
}
.sq-pets__w--sachi {
  left: calc(var(--gutter) + 4.1em);
}
.sq-pets__w--panpan {
  bottom: calc(24% + 0.03em);
}
.sq-pets__print {
  right: var(--gutter);
  height: 22vh;
  aspect-ratio: 3 / 4;
}
.sq-pets__print--cats {
  bottom: 45%;
}
.sq-pets__print--dog {
  bottom: 24%;
}

/* 3 · Games · the tiers: DIAMOND climbs to the upper hairline, PLATINUM to the lower */
.sq-games__w {
  position: absolute;
  left: var(--gutter);
  margin: 0;
  font-size: 9vw;
  line-height: 0.86;
  white-space: nowrap;
  will-change: transform;
}
.sq-games__w--diamond {
  bottom: calc(60% + 0.03em);
  font-variation-settings: "wdth" 125, "wght" 900;
}
.sq-games__w--platinum {
  bottom: calc(40% + 0.03em);
  font-variation-settings: "wdth" 100, "wght" 500;
  font-stretch: 100%;
}
.sq-games__mono {
  position: absolute;
  left: var(--gutter);
  top: calc(60% + 14px);
  margin: 0;
}

/* 4 · E-sports · the flap: WATER → MIZU, letter by letter */
.sq-mizu {
  margin: 0;
  font-size: 14vw;
  line-height: 0.86;
  white-space: nowrap;
  perspective: 900px;
  perspective-origin: 50% 50%;
}
.sq-mizu__c {
  display: inline-block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  text-align: left;
}
.sq-mizu__mono {
  position: absolute;
  left: 50%;
  top: calc(50% + 7vw * 0.86 + 16px);
  translate: -50% 0;
  margin: 0;
  white-space: nowrap;
}
.sq-mizu__print {
  right: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  height: 22vh;
  aspect-ratio: 4 / 5;
}

/* 5 · Scent · diffuse: the letters leave along the line, from the end */
.sq-scent__w {
  display: inline-block;
  white-space: nowrap;
}
.sq-scent__l {
  display: inline-block;
  will-change: transform, opacity;
}

/* 6 · Drone · from above: the line lies down on a ground plane and recedes */
.sq-drone__ground {
  perspective: 900px;
  perspective-origin: 50% 0%;
}
.sq-drone {
  transform-origin: 50% 100%;
  backface-visibility: hidden;
  will-change: transform;
}

/* 7 · Crypto · lock-in, then drain: NESFBPH, mono, fills then empties to an outline */
.sq-crypto__h {
  margin: 0;
  font-weight: 400;
}
.sq-crypto {
  --fill: 0;
  --stroke: 1;
  display: inline-block;
  font-size: 14vw;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: rgb(242 240 234 / var(--fill));
  -webkit-text-stroke: 1px rgb(242 240 234 / var(--stroke));
  white-space: nowrap;
}
.sq-crypto:focus-visible {
  outline-offset: 8px;
}
.sq-crypto__c {
  display: inline-block;
  width: 0.6em;
  text-align: center;
}

/* 8 · Up · the climb: the only line that travels the whole viewport; the rooftop rises at half speed behind it */
.sq-up {
  position: relative;
  z-index: 2;
  will-change: transform;
}
.sq-up__print {
  right: 12vw;
  top: 50%;
  translate: 0 -50%;
  height: 36vh;
  aspect-ratio: 3 / 4;
  will-change: transform;
}

/* 9 · Fear · sink, then surface: two clipped copies of each line, a waterline at 62% */
.sq-line--fear {
  --sq-water: 62%;
}
.sq-fear__sky,
.sq-fear__sea {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.sq-fear__sky {
  clip-path: inset(0 0 calc(100% - var(--sq-water)) 0);
}
.sq-fear__sea {
  clip-path: inset(var(--sq-water) 0 0 0);
  opacity: 0.35;
}
.sq-fear__l {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: var(--sq-water);
  margin: 0;
  will-change: transform;
}
/* the key pose: the first line sunk (its ascenders show), the second surfaced */
.sq-fear__l1 {
  translate: 0 -0.5em;
}
.sq-fear__l2 {
  translate: 0 -2.3em;
}
html.motion .sq-fear__l1,
html.motion .sq-fear__l2 {
  translate: 0 0;
}

/* ============================================================================
   The atlas, as words
   ========================================================================== */
.sq-atlas__win {
  position: absolute;
  left: 50%;
  top: calc(var(--header-h) + 24px);
  width: min(72vw, calc((100svh - var(--header-h) - 140px) * 32 / 22));
  height: calc(var(--sq-atlas-w, min(72vw, calc((100svh - var(--header-h) - 140px) * 32 / 22))) * 22 / 32);
  translate: -50% 0;
}
.sq-atlas__sep,
.sq-atlas__country {
  position: absolute;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--mono-m);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  line-height: 1.4;
  transform-origin: 0 0;
  will-change: transform;
}
.sq-atlas__country {
  translate: -50% -50%;
  padding: 0;
  cursor: default;
}
.sq-atlas__sep {
  translate: 0 -50%;
  opacity: 0;
}
.sq-atlas--line .sq-atlas__sep {
  opacity: 1;
}
.sq-atlas__city {
  position: absolute;
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-family: var(--display);
  font-size: max(13px, 1.3vw);
  font-weight: 500;
  font-variation-settings: "wdth" 100, "wght" 500;
  font-stretch: 100%;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
  transform-origin: 0 50%;
  will-change: transform, opacity;
}
.sq-atlas__city--ph {
  font-weight: 600;
  font-variation-settings: "wdth" 100, "wght" 600;
}
.sq-atlas__city:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.sq-atlas__dot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--bone);
  translate: -50% -50%;
  will-change: transform;
}
.sq-atlas__home {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal);
  translate: -50% -50%;
}
.sq-atlas__leaders {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.sq-atlas__leaders line {
  stroke: var(--bone);
  stroke-opacity: 0.5;
  stroke-width: 1px;
}
/* a country opened (phones: the fan; desktop: emphasis): the others dim */
.sq-atlas--open .sq-atlas__city,
.sq-atlas--open .sq-atlas__dot {
  opacity: 0.35;
}
.sq-atlas--open .sq-atlas__city.is-on,
.sq-atlas--open .sq-atlas__dot.is-on {
  opacity: 1;
}
.sq-atlas__serif {
  max-width: 20ch;
}

/* ============================================================================
   The desk: the video as a print, the page's one big clock over its right edge
   ========================================================================== */
.sq-desk__print {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  width: min(64vw, calc((100svh - 220px) * 16 / 9));
  margin: 0;
  translate: 0 -50%;
}
.sq-desk__frame {
  padding: 2px;
  background: var(--paper);
}
.sq-desk__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--veil);
}
.sq-desk__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.sq-desk__clock {
  position: absolute;
  z-index: 2;
  right: var(--gutter);
  top: 50%;
  margin: 0;
  translate: 0 -50%;
  text-align: right;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 18vw;
  line-height: 0.9;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  will-change: transform;
}
.sq-desk__time {
  display: block;
  perspective: 1200px;
  perspective-origin: 50% 50%;
}
.sq-desk__cell {
  display: inline-block;
  width: 0.6em;
  text-align: center;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
.sq-desk__colon {
  display: inline-block;
  width: 0.6em;
  text-align: center;
  animation: sq-breathe 1s ease-in-out infinite alternate;
}
@keyframes sq-breathe {
  from { opacity: 1; }
  to { opacity: 0.3; }
}
.sq-desk__city {
  display: block;
  margin-top: 10px;
  font-size: var(--mono-m);
}
.sq-card--desk {
  right: auto;
  left: var(--gutter);
  bottom: auto;
  top: calc(50% + min(64vw, calc((100svh - 220px) * 16 / 9)) * 9 / 32 + 70px);
}

/* ============================================================================
   The handles: NES, then a mono suffix flaps in after the S, beat by beat
   ========================================================================== */
.sq-handles {
  --sq-nes-fs: min(calc((100vw - 2 * var(--gutter)) / 3.3), 62svh);
}
.sq-handles__name {
  position: absolute;
  left: var(--gutter);
  top: calc(50% - 0.08em);
  margin: 0;
  font-size: var(--sq-nes-fs);
  line-height: 0.86;
  white-space: nowrap;
  translate: 0 -50%;
  will-change: transform;
}
.sq-handles__nes {
  display: inline-block;
}
.sq-handles__n {
  display: inline-block;
}
.sq-handles__pre,
.sq-handles__sufs {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  vertical-align: baseline;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.16em;
  letter-spacing: 0.02em;
  color: var(--bone);
  font-variation-settings: normal;
  font-stretch: 100%;
}
.sq-handles__suf {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  vertical-align: baseline;
}
/* the prefix hangs to the left of the N: a zero-width cell whose content is shifted back by its own width */
.sq-handles__pre-in {
  display: inline-block;
  white-space: nowrap;
  transform: translateX(-100%);
}
.sq-handles__sufs {
  margin-left: 0.04em;
}
.sq-handles__c {
  display: inline-block;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
  opacity: 0;
}
html:not(.motion) .sq-handles__pre,
html:not(.motion) .sq-handles__sufs,
html:not(.js) .sq-handles__pre,
html:not(.js) .sq-handles__sufs {
  display: none;
}
.sq-handles__row {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(50% + var(--sq-nes-fs) * 0.46 + 18px);
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(16px, 3vw, 48px);
  font-size: var(--mono-m);
  letter-spacing: 0.06em;
}
.sq-handles__row a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  color: var(--fg);
  transition: color 0.25s;
}
.sq-handles__row a span {
  color: var(--fg-2);
}
.sq-handles__row a:hover {
  color: var(--signal);
}

/* ---------- footer (flow) ---------- */
.sq-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
  padding: 40px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: var(--mono-s);
  letter-spacing: 0.04em;
}
.sq-foot p {
  margin: 0;
}
.sq-foot__pages a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.sq-foot__pages a:hover {
  text-decoration-color: currentColor;
}
.sq-foot__cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}
.sq-foot__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--fg);
}
.sq-foot__home:hover {
  color: var(--signal);
}

/* ============================================================================
   Phone edition (< 768): recomposed, never scaled
   ========================================================================== */
@media (max-width: 767px) {
  .sq {
    --sq-serif: 7.6vw;
  }
  .sq-hero .scene__stage {
    --sq-fs-a: min(calc(var(--sq-avail) / 5.45), 20svh);
    --sq-fs-b: min(calc(var(--sq-avail) / 2.74), 60svh);
  }
  .sq-hero__serif {
    max-width: 18ch;
  }
  .sq-hero__stamp {
    bottom: calc(var(--sq-edge) + 4px);
  }
  .sq-food > * {
    white-space: normal;
    text-wrap: balance;
    max-width: calc(100vw - 2 * var(--gutter));
  }
  .sq-fear__l2 {
    translate: 0 -3.4em;
  }
  .sq-handles__pre,
  .sq-handles__sufs {
    font-size: 0.22em;
  }
  .sq-pets__w {
    font-size: 9.4vw;
  }
  .sq-pets__print {
    height: 24svh;
    bottom: auto;
    top: calc(var(--header-h) + 22px);
  }
  .sq-pets__print--cats {
    right: calc(var(--gutter) + 24svh * 0.75 + 10px);
  }
  .sq-games__w {
    font-size: 11vw;
  }
  .sq-mizu {
    font-size: 16vw;
  }
  .sq-mizu__mono {
    top: calc(50% + 8vw * 0.86 + 16px);
  }
  .sq-mizu__print {
    top: calc(var(--header-h) + 22px);
    translate: 0 0;
    height: 24svh;
  }
  .sq-crypto {
    font-size: 13vw;
  }
  .sq-up__print {
    right: auto;
    left: 50%;
    top: 14%;
    translate: -50% 0;
    height: 30svh;
  }
  .sq-line--fear {
    --sq-water: 58%;
  }
  .sq-card {
    bottom: calc(var(--sq-edge) + 56px);
    width: calc(100vw - 2 * var(--gutter));
  }
  /* the atlas window is taller than wide; the country names come first (JS fans a country on tap) */
  .sq-atlas__win {
    width: calc(100vw - 2 * var(--gutter));
    height: calc(100svh - var(--header-h) - 150px);
  }
  .sq-atlas__country {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .sq-atlas__city {
    min-height: 48px;
    font-size: 14px;
  }
  /* the desk stacks: the print, the pills, the clock under them */
  .sq-desk__print {
    top: calc(var(--header-h) + 20px);
    width: calc(100vw - 2 * var(--gutter));
    translate: 0 0;
  }
  .sq-desk__bar .pill {
    min-height: 48px;
  }
  .sq-desk__clock {
    right: var(--gutter);
    left: var(--gutter);
    top: auto;
    bottom: var(--sq-edge);
    translate: 0 0;
    font-size: 22vw;
    text-align: left;
  }
  .sq-card--desk {
    top: calc(var(--header-h) + 20px + (100vw - 2 * var(--gutter)) * 9 / 16 + 74px);
  }
  .sq-handles {
    --sq-nes-fs: min(calc((100vw - 2 * var(--gutter)) / 3.3), 36svh);
  }
  .sq-handles__name {
    top: calc(var(--header-h) + 18vh);
    translate: 0 0;
  }
  .sq-handles__row {
    top: auto;
    bottom: var(--sq-edge);
    flex-direction: column;
    gap: 0;
  }
  .sq-handles__row li {
    border-top: 1px solid var(--line);
  }
  .sq-handles__row a {
    width: 100%;
    justify-content: space-between;
  }
  .sq-foot__cta {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
  .sq-foot__cta .pill {
    min-height: 48px;
  }
}

/* ============================================================================
   Landscape phones (height ≤ 500): everything at viewport-height sizes
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  .sq {
    --sq-serif: 5.4vh;
  }
  .sq-hero .scene__stage {
    --sq-fs-a: min(calc(var(--sq-avail) / 5.45), 36svh);
    --sq-fs-b: min(calc(var(--sq-avail) / 2.74), 68svh);
  }
  .sq-pets__w,
  .sq-games__w {
    font-size: 11vh;
  }
  .sq-pets__print {
    height: 20vh;
  }
  .sq-mizu__print {
    height: 30vh;
  }
  .sq-mizu {
    font-size: 20vh;
  }
  .sq-mizu__mono {
    top: calc(50% + 10vh * 0.86 + 10px);
  }
  .sq-crypto {
    font-size: 18vh;
  }
  .sq-up__print {
    height: 40vh;
  }
  .sq-atlas__win {
    top: calc(var(--header-h) + 8px);
    width: 86vw;
    height: calc(100svh - var(--header-h) - 60px);
  }
  .sq-atlas__serif {
    font-size: 18px;
  }
  .sq-desk__print {
    width: min(50vw, calc((100svh - 150px) * 16 / 9));
  }
  .sq-desk__clock {
    font-size: 20vh;
  }
  .sq-handles {
    --sq-nes-fs: min(calc((100vw - 2 * var(--gutter)) / 3.3), 50svh);
  }
  .sq-handles__name {
    top: calc(50% - 10vh);
  }
  .sq-handles__row {
    top: auto;
    bottom: 12px;
  }
}

/* ============================================================================
   Still edition (html:not(.motion)) and no JS: one panel per section at its key pose
   ========================================================================== */
html:not(.motion) .sq-line__stage,
html:not(.js) .sq-line__stage {
  min-height: 100svh;
}
html:not(.motion) .sq-gate,
html:not(.js) .sq-gate {
  opacity: 1;
}
html:not(.motion) .sq-desk__video,
html:not(.js) .sq-desk__video {
  opacity: 1;
}
html:not(.js) .sq-atlas__win {
  display: grid;
  place-items: center;
}