/* Portrait screens (phones held upright, tall windows).
   The desktop layout is untouched: everything here lives inside one query. */

@media (max-aspect-ratio: 4/5) {
  /* ---- key art: the 16:9 picture is re-laid from its own layers ----
     face in the middle band, ISAGI above it, EIL NOCTIS below, the hand rising from the bottom */
  .hero-bg {
    inset: auto;
    top: 20%;
    left: 50%;
    width: auto;
    height: 60%;
    max-width: none;
    object-fit: fill;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 78%, transparent 100%);
    transform:
      translateX(-63%)
      translate3d(calc(var(--bg-x, 0) * 1px), calc(var(--bg-y, 0) * 1px), -18px)
      scale(var(--bg-scale, 1));
  }

  /* the word layers are full 1672×941 canvases: size them so the word itself
     is the width we want, then shift the canvas so the word lands in place */
  .hero-type-layer .hero-text {
    inset: auto;
    height: auto;
    max-width: none;
    object-fit: fill;
  }

  .hero-type-layer .hero-text--left {
    /* ISAGI sits at x 21–673, y 101–606 of its canvas; on short screens it
       shrinks so it never reaches the eyes */
    --w: min(84vw, 38.7svh);
    width: calc(var(--w) * 1672 / 652);
    left: calc(6vw - var(--w) * 21 / 652);
    top: calc(3.5% - var(--w) * 101 / 652);
  }

  .hero-type-layer .hero-text--right {
    /* EIL NOCTIS sits at x 1152–1639, y 146–690 of its canvas */
    --w: min(52vw, 26svh);
    width: calc(var(--w) * 1672 / 487);
    left: calc(44vw - var(--w) * 1152 / 487);
    top: calc(52% - var(--w) * 146 / 487);
  }

  .hero-hand {
    right: auto;
    left: -26vw;
    bottom: -19%;
    width: min(100vw, 52svh);
  }

  .hero-copy {
    top: 50%;
    bottom: auto;
  }

  .hero-copy__mark {
    width: clamp(66px, 19vw, 96px);
    margin-bottom: 12px;
  }

  /* ---- the five fragments turn around the ball ----
     sideways drags turn the ring; vertical ones still scroll the page */
  .hero-stage {
    touch-action: pan-y pinch-zoom;
  }

  .fragment-field.is-carousel .fragment-button {
    width: min(40vw, 200px);
    transition: filter 220ms ease;
  }

  .fragment-field.is-carousel .fragment-button:not(.is-front) {
    filter: brightness(0.82) saturate(0.85);
  }
}

@media (max-aspect-ratio: 4/5) and (prefers-reduced-motion: reduce) {
  .hero-bg {
    transform: translateX(-63%) !important;
  }
}

/* ---- preview card on portrait screens ----
   The card keeps the desktop outline exactly: its top and bottom edges use the
   desktop points at the desktop proportion (1160 × 690, scaled to this width),
   and only the two straight sides grow taller. So the facets, the ice edge and
   the close tab that hugs the top edge look the same as on a computer. */
@media (max-aspect-ratio: 4/5) {
  .theme-preview {
    padding: max(18px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
  }

  .preview-card {
    --card-w: min(92vw, 620px);
    --ref-h: calc(var(--card-w) * 690 / 1160);
    --preview-shape: polygon(
      3% calc(var(--ref-h) * 0.18),
      17% calc(var(--ref-h) * 0.05),
      42% calc(var(--ref-h) * 0.07),
      52% calc(var(--ref-h) * 0.01),
      80% calc(var(--ref-h) * 0.08),
      97% calc(var(--ref-h) * 0.25),
      93% calc(100% - var(--ref-h) * 0.32),
      82% calc(100% - var(--ref-h) * 0.07),
      53% calc(100% - var(--ref-h) * 0.02),
      35% calc(100% - var(--ref-h) * 0.08),
      12% calc(100% - var(--ref-h) * 0.05),
      2% calc(100% - var(--ref-h) * 0.3)
    );
    width: var(--card-w);
    min-height: min(max(74svh, 480px), calc(var(--card-w) * 1.85));
    margin-top: calc(var(--ref-h) * 0.12);
  }

  .preview-card__body {
    width: 100%;
    min-height: inherit;
    justify-content: flex-end;
    padding: 0 calc(var(--card-w) * 0.1) calc(var(--ref-h) * 0.22);
  }

  .preview-card h2 {
    max-width: 90%;
    font-size: calc(var(--card-w) * 0.165);
  }

  .preview-card .preview-card__body > .preview-card__lead {
    max-width: 92%;
    margin-top: calc(var(--card-w) * 0.05);
    font-size: 15px;
  }

  .preview-card .preview-card__body > .preview-card__note {
    max-width: 92%;
    margin-top: 8px;
    font-size: 12px;
  }

  .preview-card .enter-theme {
    margin-top: calc(var(--card-w) * 0.07);
  }

  /* the fragment sits in the upper part of the card and breaks out over its
     right edge, the way it breaks out on a computer */
  .preview-card__fragment {
    top: calc(var(--ref-h) * 0.02);
    right: -3%;
    width: min(90%, 40svh);
    max-width: none;
  }

  .preview-close__glyph {
    top: clamp(10px, 22%, 16px);
    width: clamp(52px, 16vw, 72px);
    height: 24px;
  }
}

/* ---- contact page on portrait screens ----
   Same pieces as on a computer (title, close plate, ice shards, brand-coloured
   card) and the same arc: the chosen shard in the middle, its neighbours above
   and below. The arc fills the upper part; the card sits underneath. Swipe up
   or down to turn it, as with the mouse wheel on a computer. */
@media (max-aspect-ratio: 4/5) {
  .contact-space__stage {
    padding: max(16px, env(safe-area-inset-top)) 0 max(16px, env(safe-area-inset-bottom));
  }

  .contact-space__heading {
    --contact-title-size: clamp(36px, 11vw, 52px);
    top: max(18px, env(safe-area-inset-top));
    left: 20px;
    max-width: 60vw;
  }

  .contact-space__close {
    top: max(20px, env(safe-area-inset-top));
    right: 16px;
    width: clamp(120px, 34vw, 170px);
    height: clamp(46px, 12vw, 56px);
  }

  .contact-device {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }

  .contact-shard-selector {
    position: absolute;
    top: 13svh;
    left: 0;
    width: 100%;
    height: 48svh;
    aspect-ratio: auto;
    place-self: auto;
  }

  .contact-shard {
    width: min(58vw, 34svh);
  }

  /* the card keeps the desktop outline: corners measured on the desktop
     proportion (450 × 340) and scaled with the width, so it never stretches */
  .contact-information {
    --ci-w: min(88vw, 560px);
    --ci-h: calc(var(--ci-w) * 340 / 450);
    position: absolute;
    left: calc((100vw - var(--ci-w)) / 2);
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 16px));
    width: var(--ci-w);
    max-width: none;
    min-height: 0;
    padding: 26px 34px 26px 26px;
    clip-path: polygon(
      0 calc(var(--ci-h) * 0.12),
      9% 0,
      88% 0,
      100% calc(var(--ci-h) * 0.16),
      96% calc(100% - var(--ci-h) * 0.16),
      87% 100%,
      7% calc(100% - var(--ci-h) * 0.06),
      0 calc(100% - var(--ci-h) * 0.24)
    );
  }

  .contact-information__icon {
    width: 44px;
    padding: 10px;
  }

  .contact-information h3 {
    margin-top: 16px;
    font-size: clamp(30px, 9vw, 40px);
    white-space: normal;
  }

  .contact-information[data-channel="default"] h3 {
    font-size: clamp(28px, 8vw, 36px);
  }

  .contact-information p {
    max-width: none;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.65;
  }

  .contact-information__actions {
    gap: 8px;
    margin-top: 18px;
  }

  .contact-information__actions button,
  .contact-information__actions a {
    min-height: 46px;
    padding: 10px 14px;
    font-size: 13px;
  }
}

/* ---- 01 identity: no chapter squares on portrait screens; the space they
   kept free on the right goes back to the content ---- */
@media (max-aspect-ratio: 4/5) {
  .idn {
    --idn-nav-space: var(--idn-gutter, 18px);
  }

  .idn-nav {
    display: none;
  }
}