/* ROYAL COURT — THE OPENING SCROLL
   17 fluid beats. Cream is the paper; warm colour scenes move the story.
   Geometry is expressed in container units against the lit strip. Selected
   archive scenes deliberately overlap like family prints. */

/* ── the stage ─────────────────────────────────────────────── */
.beat { position: relative; min-height: 100vh; background: var(--paper); }
.beat.is-night { background: var(--night); }

/* Every beat and stage is one viewport high, so the story keeps moving. The stage
   also provides the container every cqw/cqh value resolves against. */
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; container-type: size; }

/* Full-scene colour returns from the original edit. The alternation between
   cream, earth and oxblood gives the reel warmth and forward movement. */
.beat[data-beat="02"] .stage { background: var(--putty); }
.beat[data-beat="04"] .stage { background: var(--oxblood); }
.beat[data-beat="06"] .stage { background: #c9baa2; }
.beat[data-beat="08"] .stage { background: var(--wood); }
.beat[data-beat="10"] .stage { background: #40382f; }
.beat[data-beat="13"] .stage { background: var(--oxblood); }
.beat[data-beat="16"] .stage { background: #b7a58a; }

/* The strip never opens. All seventeen beats stay inside it, the closing aperture
   included; the release is the section below, where the site runs full width. */

.ph { position: absolute; overflow: hidden; }
.ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(.84) contrast(1.03); }
.ph.bleed { inset: 0; }
.field { position: absolute; }

/* ── type ──────────────────────────────────────────────────── */
.line { position: absolute; z-index: 6; margin: 0; max-width: 34ch;
  font: 400 clamp(13px, 1.02cqw, 16px)/1.5 Georgia, "Times New Roman", serif;
  letter-spacing: .002em; color: var(--ink); }
.line.fragment { font-size: clamp(17px, 1.5cqw, 25px); line-height: 1.24;
  letter-spacing: -.015em; }
.statement { position: absolute; z-index: 6; margin: 0;
  font: 400 clamp(28px, 3.2cqw, 50px)/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.038em; color: var(--ink); }
.statement span { display: block; margin-top: 1.15em;
  font: 400 clamp(13px, 1.02cqw, 16px)/1.5 Georgia, serif;
  letter-spacing: 0; color: var(--ink-2); }
.line strong, .line span, .line em { display: block; font: inherit; }
.line strong { font-weight: 400; }
.line em { font-style: italic; }

/* ── 01 · ARRIVAL — aperture ────────────────────────────────
   The one beat with no page showing. Two windows either side of the wordmark. */
.b01-facade img { object-position: 34% center; filter: saturate(.84) contrast(1.04) brightness(.94); }
.brand-veil { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.36), rgba(0,0,0,.05) 28%, rgba(0,0,0,.08) 68%, rgba(0,0,0,.34)); }
.brand-lockup { position: absolute; z-index: 4; left: 50%; top: 50%;
  transform: translate(-50%,-50%); width: min(42cqw, 660px); }
.brand-lockup img { width: 100%; height: auto; object-fit: contain;
  filter: invert(1) brightness(1.8); opacity: .95; }
.enter-cue { position: absolute; z-index: 4; left: 50%; bottom: 5.5cqh;
  transform: translateX(-50%); margin: 0; white-space: nowrap; color: #fff;
  font: 8px/1 Arial, sans-serif; letter-spacing: .23em; opacity: .74; }
.enter-cue span { margin-left: 10px; font-size: 15px; vertical-align: -2px; }
.brand-lockup, .enter-cue { transition: opacity .15s linear; }

/* ── 02 · THROUGH THE DOOR — open field, hard left edge ─────
   First white page. Touches one edge and nothing else. */
.b02-stair { left: 0; top: 0; width: 46cqw; height: 100cqh; }
.b02-stair img { object-position: 56% center; }
.b02-line { left: 52cqw; top: 18cqh; width: 42cqw; max-width: none; }
.b02-line strong { font-size: clamp(48px, 5.4cqw, 88px); line-height: .88; letter-spacing: -.055em; }
.b02-line span { width: 15ch; margin: 1em 0 0 8cqw; font-size: clamp(24px, 2.6cqw, 44px); line-height: 1; font-style: italic; }

/* ── 03 · FIRST ROOM — inset, footnote variant ──────────────
   The small image is not on the big one. It annotates from across the page. */
.b03-room { right: 0; top: 20cqh; width: 72cqw; height: 62cqh; }
.b03-room img { object-position: 44% center; }
.b03-note { left: 9cqw; top: 8cqh; width: 15cqw; height: 30cqh; }
.b03-note img { object-position: 54% center; }

/* ── 04 · FOUR STARS — colour event 01 ──────────────────────
   Pink field sampled from the light in the plaque photograph, not from the object.
   The toast crosses the field's left boundary by 6cqw. */
.b04-field { right: 0; top: 0; width: 36cqw; height: 100cqh; background: #c98f80; }
.b04-toast { z-index: 3; left: 30cqw; top: 40cqh; width: 32cqw; height: 46cqh; }
.b04-toast img { object-position: center 46%; }
.b04-sign { z-index: 2; left: 68cqw; top: 18cqh; width: 24cqw; height: 32cqh; }
.b04-sign img { object-position: 42% center; }
.b04-line { left: 6cqw; top: 12cqh; width: 46cqw; max-width: none; color: var(--paper); }
.b04-line strong, .b04-line span { font-size: clamp(52px, 6.4cqw, 104px); line-height: .84; letter-spacing: -.06em; }
.b04-line span { padding-left: 9cqw; }
.b04-line em { margin-top: 1.2em; font-size: clamp(17px, 1.5cqw, 25px); color: var(--warm); }

/* ── 05 · ROME — immersive, full bleed ──────────────────────
   Once, at full size. The red petunias do the colour work; no field is added. */
.b05-rome img { object-position: center 58%; filter: saturate(.88) contrast(1.04); }

/* ── 06 · THE RELIEF — one large, warm object ─────────────── */
.b06-relief { left: 11cqw; top: 15cqh; width: 78cqw; height: 70cqh; box-shadow: 0 30px 76px rgba(60,44,30,.2); }
.b06-relief img { object-position: center 46%; filter: saturate(.7) contrast(1.05) brightness(1.02); }
.b06-line { left: 5cqw; top: 6cqh; width: 58cqw; max-width: none; }
.b06-line strong { font-size: clamp(38px, 4.4cqw, 72px); line-height: .9; letter-spacing: -.05em; }
.b06-line span { margin: .45em 0 0 12cqw; font-size: clamp(16px, 1.5cqw, 24px); font-style: italic; }

/* ── 07 · SOMEONE LEFT THIS — inset, crosser variant ────────
   Half on the photograph, half on white. Nothing softens the join. */
.b07-book { left: 0; top: 17cqh; width: 58cqw; height: 66cqh; }
.b07-book img { object-position: center 54%; }
.b07-stone { z-index: 3; left: 50cqw; top: 56cqh; width: 16cqw; height: 24cqh; }
.b07-stone img { object-position: center 40%; }

/* ── 08 · LONG BEFORE — family prints across a wood field ─── */
.b08-moto { z-index: 3; right: 7cqw; left: auto; top: 9cqh; width: 38cqw; height: 34cqh; border: 10px solid var(--paper); box-shadow: 0 28px 68px rgba(0,0,0,.3); }
.b08-moto img { object-position: center 44%; filter: sepia(.14) saturate(.9) contrast(1.05); }
.b08-group { z-index: 4; left: 7cqw; top: auto; bottom: 8cqh; width: 38cqw; height: 34cqh; border: 10px solid var(--paper); box-shadow: 0 24px 58px rgba(0,0,0,.28); }
.b08-group img { object-position: center 46%; filter: saturate(.9) contrast(1.03); }
.b08-pair { z-index: 5; right: 6cqw; left: auto; top: auto; bottom: 8cqh; width: 20cqw; height: 24cqh; border: 8px solid var(--paper); box-shadow: 0 20px 48px rgba(0,0,0,.25); }
.b08-pair img { object-position: center 34%; }
.b08-line { left: 7cqw; top: 10cqh; width: 48cqw; max-width: none; color: var(--paper); }
.b08-line strong { font-size: clamp(34px, 4.2cqw, 70px); line-height: .9; letter-spacing: -.05em; }
.b08-line span { width: 13ch; margin: .55em 0 0 7cqw; font-size: clamp(22px, 2.7cqw, 44px); line-height: .95; font-style: italic; color: var(--warm); }

/* ── 09 · LORENZO — one centred family portrait ─────────────
   The only centred image in seventeen beats. Centred because nothing else is.
   The caption aligns to the photograph's left edge, not to a page column. */
.b09-lorenzo { left: 38cqw; top: 18cqh; width: 24cqw; height: 30cqh; }
.b09-lorenzo img { object-position: center 42%; filter: saturate(.86) contrast(1.04); }
.b09-line { left: 38cqw; top: 52cqh; width: 40cqw; max-width: none; }
.b09-line strong { font-size: clamp(27px, 3.2cqw, 52px); line-height: .95; letter-spacing: -.045em; }
.b09-line span { width: 20ch; margin-top: .75em; color: var(--ink-2); }

/* ── 10 · THE RHYME — offset then/now diptych ─────────────── */
.b10-band { display: none; }
.b10-horse { z-index: 3; left: 6cqw; top: 18cqh; width: 43cqw; height: 38cqh; padding: 10px; background: var(--paper); box-shadow: 0 28px 70px rgba(0,0,0,.32); }
.b10-horse img { object-fit: contain; object-position: center; }
.b10-book { z-index: 4; right: 6cqw; top: 43cqh; width: 43cqw; height: 38cqh; box-shadow: 0 34px 80px rgba(0,0,0,.36); }
.b10-book img { object-position: center 42%; }

/* ── 11 · THE HOUSE, BUSY — collage, densest beat ───────────
   One dominant vertical bleeding off the left, one horizontal crossing it,
   one small note dropped low right as punctuation. */
.b11-stair { left: 0; top: 9cqh; width: 46cqw; height: 82cqh; }
.b11-stair img { object-position: 54% 62%; }
.b11-room { z-index: 3; left: 42cqw; top: 14cqh; width: 38cqw; height: 34cqh; }
.b11-room img { object-position: center 52%; }
.b11-lamp { z-index: 4; left: 66cqw; top: 52cqh; width: 28cqw; height: 36cqh; }
.b11-lamp img { object-fit: contain; object-position: center; }

/* ── 12 · MATERIAL — the card carries the house's own line ──
   Olive arrives already contained inside a photograph. The page stays white.
   The source card carries an Instagram white margin; a cropped derivative is used
   so the hotel's own line stays legible at this size. */
.b12-bath { right: 0; top: 10cqh; width: 50cqw; height: 54cqh; }
.b12-bath img { object-position: center 48%; }
.b12-pigna { left: 11cqw; top: 40cqh; width: 22cqw; height: 48cqh; }
.b12-pigna img { filter: saturate(.92) contrast(1.02); }

/* ── 13 · OCCUPIED — evidence placed above the people ───────
   The shoes sit 16cqh higher than the couple, so the discarded object is read first.
   The line lives in the white channel between two moments. */
.b13-couple { left: 8cqw; top: 7cqh; width: 37cqw; height: 68cqh; }
.b13-couple img { object-position: center 44%; }
.b13-shoes { right: 8cqw; top: 8cqh; width: 30cqw; height: 50cqh; }
.b13-shoes img { object-fit: contain; object-position: center; }
.b13-line { left: auto; right: 6cqw; top: auto; bottom: 5cqh; width: 70cqw; text-align: right; color: var(--paper); }
.b13-line strong, .b13-line span { display: block; margin: 0; font: 400 clamp(50px, 7.4cqw, 120px)/.84 Georgia, serif; letter-spacing: -.06em; color: var(--paper); }
.b13-line span { padding-right: 4cqw; }

/* ── 14 · SLEEP — precious, low left ────────────────────────
   Eighty per cent of the page is empty above it. The emptiness is the night. */
.b14-sleep { left: 6cqw; bottom: 12cqh; width: 21cqw; height: 26cqh; }
.b14-sleep img { object-position: center 46%; }

/* ── 15 · NIGHT — the only dark frame in the site ───────────
   Not held. It passes at a single viewport, so the blackout is a blink rather
   than a stop, and the surround briefly swallows the strip whole. */
.b15-lamp img { object-position: center 46%; filter: saturate(.9) contrast(1.05); }

/* ── 16 · TOMORROW — the return to white ────────────────────
   The scroll's only "you", and the only large type anywhere in it. */
.b16-tray { left: 0; top: 14cqh; width: 62cqw; height: 74cqh; }
.b16-tray img { object-position: 54% center; }
.b16-line { right: 8cqw; top: 24cqh; width: 26cqw; text-align: right; }
.b16-line span { color: var(--ink); }

/* ── 17 · THE DOOR AGAIN — aperture reversed ────────────────
   Shutters from the street at beat 01; a window from inside a room here.
   It arrives inside the photo strip, then opens across the dark surround before
   releasing into the three addresses. --reveal-gutter is driven by scroll.js. */
.beat[data-beat="17"] .stage { width: calc(100% + var(--reveal-gutter, 0px) + var(--reveal-gutter, 0px));
  margin-left: calc(-1 * var(--reveal-gutter, 0px)); }
.b17-window img { object-position: center 56%; filter: saturate(.82) contrast(1.03) brightness(1.02); }
.beat[data-beat="17"] .stage::after { content: ""; position: absolute; z-index: 2; inset: auto 0 0 0;
  height: 46cqh; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,17,14,0), rgba(20,17,14,.52)); }
.closing-lockup { position: absolute; z-index: 4; left: 6cqw; bottom: 16cqh; width: min(16cqw, 250px); }
.closing-lockup img { width: 100%; height: auto; object-fit: contain;
  filter: invert(1) brightness(1.8); opacity: .95; }
.closing-offer { position: absolute; z-index: 4; left: 6cqw; bottom: 9cqh; margin: 0; }
.closing-offer a { display: inline-block; padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.5); color: #fff;
  font: 9px/1 Arial, sans-serif; letter-spacing: .2em; }
.closing-offer a:hover, .closing-offer a:focus-visible { border-color: #fff; outline: none; }

/* ══ TABLET ══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .line { font-size: 14px; }
  .b02-line { left: 56cqw; width: 34cqw; }
  .b03-room { width: 78cqw; }
  .b04-line { width: 22cqw; }
  .b06-relief { width: 24cqw; height: 22cqh; left: 64cqw; }
  .b06-line { width: 34cqw; }
  .b08-line { left: 66cqw; width: 30cqw; }
  .b09-lorenzo { left: 36cqw; width: 28cqw; }
  .b09-line { left: 36cqw; width: 30cqw; }
  .b13-line { width: 26cqw; }
  .b16-line { width: 32cqw; }
}

/* ══ MOBILE — THE VERTICAL EDIT ══════════════════════════════
   Not a stacked desktop. Every beat is re-composed for the phone with the
   same grammar: edge contact, precious images kept small, crossers still
   crossing, colour events still full-height, and the holds intact.
   All geometry stays in cqw/cqh, so 320–430px is one fluid edit.

   Two rules govern the whole vertical cut:
   · the floating chrome ends at ~64px, so no type starts above 11cqh;
   · every box is cut to the crop its photograph can survive — ratios are
     matched to the source where the subject cannot afford to be trimmed.  */
@media (max-width: 760px) {
  /* The mobile storyboard fills the screen; the desktop surround stays desktop-only. */
  :root { --bumper: clamp(9px, 3vw, 15px); }
  .opening-reel { padding-inline: 0; }

  .beat { min-height: 100svh; }
  .stage { height: 100svh; }
  .line { font-size: 15px; max-width: none; }
  .line.fragment { font-size: 21px; }
  .statement { font-size: 9.2cqw; }

  /* ── 01 · ARRIVAL — the aperture becomes one window ──────
     A portrait crop cannot hold both arched windows. It holds one, whole,
     with its shutters open either side: the aperture reading survives. */
  .b01-facade img { object-position: 55% center; }
  .brand-lockup { width: 76cqw; }
  .enter-cue { bottom: 6.5cqh; }

  /* ── 02 · THROUGH THE DOOR — the field turns a corner ────
     The slab keeps the left edge and takes the top as well, leaving an
     L of putty. The display type hangs into the L instead of beside it. */
  .b02-stair { left: 0; top: 0; width: 72cqw; height: 57cqh; }
  .b02-stair img { object-position: 58% center; }
  .b02-line { left: 8cqw; top: 63cqh; width: 84cqw; }
  .b02-line strong { font-size: 12cqw; line-height: .88; }
  .b02-line span { width: auto; margin: .7em 0 0 11cqw; font-size: 6.4cqw; }

  /* ── 03 · FIRST ROOM — the footnote still annotates from away ── */
  .b03-note { left: 7cqw; top: max(12cqh, 76px); width: 30cqw; height: 17cqh; }
  .b03-room { right: 0; left: auto; top: 41cqh; width: 86cqw; height: 40cqh; }

  /* ── 04 · FOUR STARS — the colour event stays vertical ───
     The pink keeps its full-height band, so the toast can still cross a
     boundary rather than sit on a stripe. */
  .b04-field { right: 0; top: 0; width: 40cqw; height: 100cqh; }
  /* the floating chrome ends at 64px; max() keeps every headline clear of it
     on short phones, where 12cqh is no longer far enough down the frame */
  .b04-line { left: 6cqw; top: max(12cqh, 78px); width: 60cqw; }
  .b04-line strong, .b04-line span { font-size: 10cqw; }
  .b04-line span { padding-left: 6cqw; }
  .b04-sign { left: auto; right: 3cqw; top: 30cqh; width: 34cqw; height: 20cqh; }
  .b04-toast { left: 14cqw; top: 56cqh; width: 58cqw; height: 34cqh; }

  /* ── 05 · ROME — full bleed, pushed in to find the corner ──
     A portrait slice of the full frame gives a top half of flat, distant
     roofline — no rhythm, no light. So the mobile frame moves in: the extra
     height (122cqh, hung from the bottom) cuts the vague sky away, and the
     horizontal window lands on the palazzo's corner, where the cornice, the
     shuttered windows and the cast shadow carry the light. The petunias keep
     the lower third and stay the colour event. */
  .b05-rome img { height: 122cqh; margin-top: -22cqh; object-position: 30% center; }

  /* ── 06 · THE RELIEF — wide and short, so it stays a relief ──
     A tall box would slice the carving in half. Kept horizontal and small,
     it is still the most precious object in the reel, and still held. */
  .b06-line { left: 7cqw; top: max(12cqh, 78px); width: 86cqw; }
  .b06-line strong { font-size: 9cqw; }
  .b06-line span { margin-left: 12cqw; }
  .b06-relief { left: 4cqw; top: 35cqh; width: 92cqw; height: 32cqh;
    box-shadow: 0 18px 44px rgba(60,44,30,.22); }
  .b06-relief img { object-position: center 46%; }

  /* ── 07 · SOMEONE LEFT THIS — the crosser still crosses ──
     The stone straddles the book's right edge and its bottom corner. */
  .b07-book { left: 0; top: 20cqh; width: 80cqw; height: 44cqh; }
  .b07-stone { left: 62cqw; top: 52cqh; width: 30cqw; height: 20cqh; }
  .b07-stone img { object-position: center 44%; }

  /* ── 08 · LONG BEFORE — prints overlap instead of stacking ──
     Scatter needs width the phone hasn't got. Overlap carries the same
     idea: loose family prints laid down one on top of the last. */
  .b08-line { left: 7cqw; top: max(12cqh, 78px); width: 86cqw; }
  .b08-line strong { font-size: 9cqw; }
  .b08-line span { width: 13ch; margin-left: 7cqw; font-size: 7cqw; }
  .b08-moto { left: 4cqw; right: auto; top: 32cqh; bottom: auto;
    width: 72cqw; height: 26cqh; border-width: 7px; box-shadow: 0 16px 34px rgba(0,0,0,.34); }
  .b08-group { left: 26cqw; right: auto; top: 51cqh; bottom: auto;
    width: 70cqw; height: 26cqh; border-width: 7px; box-shadow: 0 16px 34px rgba(0,0,0,.32); }
  .b08-pair { left: 8cqw; right: auto; top: 73cqh; bottom: auto;
    width: 40cqw; height: 16cqh; border-width: 6px; box-shadow: 0 14px 30px rgba(0,0,0,.3); }

  /* ── 09 · LORENZO — still the only centred image ───────── */
  .b09-lorenzo { left: 16cqw; top: 20cqh; width: 68cqw; height: 26cqh; }
  .b09-lorenzo img { object-position: 62% 42%; }
  .b09-line { left: 16cqw; top: 51cqh; width: 78cqw; }
  .b09-line strong { font-size: 8cqw; }

  /* ── 10 · THE RHYME — then above, now below, still overlapping ──
     Vertical order is reading order, so the archive print comes first and
     the breakfast lands on its corner. The diptych is not pulled apart. */
  .b10-horse { left: 4cqw; top: 19cqh; width: 60cqw; height: 34cqh;
    padding: 8px; box-shadow: 0 18px 42px rgba(0,0,0,.34); }
  .b10-book { right: 4cqw; top: 47cqh; width: 66cqw; height: 30cqh;
    box-shadow: 0 20px 46px rgba(0,0,0,.38); }
  .b10-book img { object-position: center 42%; }

  /* ── 11 · THE HOUSE, BUSY — the densest beat stays dense ──
     Vertical bleeds off the left, horizontal crosses it and bleeds off the
     right, the lamp drops low as punctuation. Three edges, one page. */
  .b11-stair { left: 0; top: 8cqh; width: 58cqw; height: 56cqh; }
  .b11-room { left: 34cqw; top: 48cqh; width: 68cqw; height: 24cqh; }
  .b11-lamp { left: 10cqw; top: 72cqh; width: 40cqw; height: 19cqh; }

  /* ── 12 · MATERIAL — the card at its own ratio ───────────
     The Pigna card carries the house's own line. Its box is locked to the
     card's proportion and contained, so nothing on it is ever trimmed. */
  .b12-bath { right: 0; top: 12cqh; width: 76cqw; height: 32cqh; }
  .b12-bath img { object-position: 56% 48%; }
  .b12-pigna { left: 6cqw; top: 50cqh; width: 62cqw; height: 36.6cqh; }
  .b12-pigna img { object-fit: contain; }

  /* ── 13 · OCCUPIED — the pair stays a pair ──────────────
     Side by side, not stacked; the shoes still sit higher than the people,
     so the discarded object is read first. */
  .b13-shoes { left: auto; right: 4cqw; top: 12cqh; width: 42cqw; height: 30cqh; }
  .b13-couple { left: 5cqw; top: 20cqh; width: 48cqw; height: 48cqh; }
  .b13-line { left: auto; right: 5cqw; top: auto; bottom: 7cqh; width: 90cqw; }
  .b13-line strong, .b13-line span { font-size: 10.4cqw; }
  .b13-line span { padding-right: 5cqw; }

  /* ── 14 · SLEEP — the emptiness is still the beat ───────── */
  .b14-sleep { left: 7cqw; bottom: 11cqh; width: 42cqw; height: 22.8cqh; }

  /* ── 15 · NIGHT — one dark frame, passed at speed ───────── */
  .b15-lamp img { object-position: 46% center; }

  /* ── 16 · TOMORROW — the tray keeps the left edge ───────── */
  .b16-tray { left: 0; top: 12cqh; width: 78cqw; height: 46cqh; }
  .b16-line { left: auto; right: 6cqw; top: 64cqh; width: 84cqw; }

  /* ── 17 · THE DOOR AGAIN — the room, not the view ────────
     A narrow slice of the window half reads as a pane with a door beam
     straight through it and no room around it. The crop moves into the room
     instead: sheer curtain, the patterned curtain, the striped wall with its
     lamp lit, and the bed coming in low right. Still a window from inside,
     but now there is somewhere to return to — and the lamplit wall gives the
     closing wordmark a ground to sit on. */
  .b17-window img { object-position: 68% center; }
  .beat[data-beat="17"] .stage::after { height: 52cqh;
    background: linear-gradient(180deg, rgba(20,17,14,0), rgba(20,17,14,.26) 54%, rgba(20,17,14,.62)); }
  .closing-lockup { left: 6cqw; width: 48cqw; bottom: 17cqh; }
  .closing-offer { left: 6cqw; bottom: 10cqh; }
}

/* Short phones: the type is in cqw, the layout in cqh, so only the tallest
   text blocks need to give a little height back. */
@media (max-width: 760px) and (max-height: 700px) {
  .b02-stair { height: 52cqh; }
  .b02-line { top: 59cqh; }
  .b06-relief { top: 40cqh; height: 28cqh; }
  .b08-moto { top: 34cqh; }
  .b09-lorenzo { top: 18cqh; height: 24cqh; }
  .b09-line { top: 48cqh; }
  .b12-pigna { top: 52cqh; width: 56cqw; height: 33cqh; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-lockup, .enter-cue { transition: none; }
}