/* ===========================================================================
   responsive.css — mobile is a different composition, not a narrower desktop
   =========================================================================== */

/* ── Fine pointers only: hover-driven collection preview ─────────────── */
@media (hover: none) {
  .index__preview { display: none; }
  .index__row:hover { padding-left: 0; }

  /* Vertical panning stays with the browser, so the page can always scroll
     out of the stone wall. The wall takes horizontal drag, and stone-wall.js
     only claims the vertical axis once a gesture is clearly horizontal.
     `touch-action: none` here would strand a phone user inside the field. */
  .wall__viewport { touch-action: pan-y; }
}

/* ═══════════  TABLET  ═══════════ */
@media (max-width: 60rem) {
  .index {
    grid-template-columns: minmax(0, 1fr);
  }
  .about__grid { grid-template-columns: minmax(0, 1fr); }
  .about__title { max-width: 20ch; }

  .viewer[open] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .viewer__panel {
    border-left: 0;
    border-top: 1px solid var(--ink-line);
    max-height: 46svh;
  }
  .viewer__pan canvas { max-height: 46svh; }
}

/* ═══════════  MOBILE  ═══════════ */
@media (max-width: 44rem) {
  :root {
    --nav-h: 4.25rem;
    --band: clamp(4rem, 10vh, 6rem);
  }

  /* ── Navigation becomes a deliberate full-screen panel ── */
  .nav__links,
  .nav__cta { display: none; }

  .nav__toggle {
    display: grid;
    place-items: center;
    margin-left: auto;
    width: 2.75rem;
    height: 2.75rem;
  }
  .nav__toggle-bars {
    display: grid;
    gap: 0.4rem;
    width: 1.5rem;
  }
  .nav__toggle-bars i {
    display: block;
    height: 1px;
    background: var(--ivory);
    transition: transform var(--med) var(--ease), opacity var(--med) var(--ease);
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars i:first-child {
    transform: translateY(0.2rem) rotate(45deg);
  }
  .nav__toggle[aria-expanded="true"] .nav__toggle-bars i:last-child {
    transform: translateY(-0.2rem) rotate(-45deg);
  }

  .nav__brand img { width: 8rem; }

  /* ── The film: shorter scroll distance, tighter framing ──
     The 960x960 sources actually favour portrait viewports — the subject
     fills more of the frame here than it does on a wide desktop. */
  .chapter { height: calc(var(--scrub, 3) * 0.68 * 100svh); }

  .stage__type {
    padding-inline: var(--gutter);
    padding-bottom: clamp(4rem, 14vh, 8rem);
    align-content: end;
  }
  .stage__type--corner { padding-bottom: clamp(3rem, 10vh, 5rem); }

  .cue--display { font-size: clamp(2.75rem, 15vw, 5rem); }
  .cue--sm { font-size: clamp(2rem, 11vw, 3.5rem); }

  /* Heavier floor gradient so type stays legible over bright footage */
  .stage__grade {
    background:
      radial-gradient(140% 100% at 50% 42%, transparent 55%, rgb(6 6 7 / 0.48) 100%),
      linear-gradient(to bottom, rgb(6 6 7 / 0.44) 0%, transparent 18%, transparent 48%, rgb(6 6 7 / 0.82) 100%);
  }

  .resolve__tag { font-size: clamp(2.5rem, 14vw, 4.5rem); }

  /* ── Collection ── */
  .index__row { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .index__note { margin-left: 0; width: 100%; }

  /* ── Stone wall ── */
  .wall__viewport { height: clamp(24rem, 62vh, 34rem); }

  /* ── Visit ── */
  .visit__actions { display: grid; }
  .btn { justify-content: center; }

  /* ── Viewer ── */
  .viewer__panel { padding: 1.75rem 1.25rem 2.5rem; max-height: 44svh; }
  .viewer__pan canvas { max-height: 44svh; }
  .viewer__zoom { bottom: 0.85rem; }
}

/* ═══════════  SHORT VIEWPORTS  ═══════════ */
@media (max-height: 34rem) and (orientation: landscape) {
  .cue--display { font-size: clamp(2rem, 7vh, 3.5rem); }
  .stage__type { padding-bottom: 2rem; }
  .scroll-hint { display: none; }
}

/* ═══════════  REDUCED MOTION  ═══════════
   The story still reads: chapters become still frames with their typography
   already resolved, and nothing scrubs, drifts or parallaxes. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .chapter { height: 100svh; }
  .stage { position: relative; }

  .cue { opacity: 1 !important; transform: none !important; }
  .stage__type { gap: 0.9rem; }

  /* Two display cues in one chapter would overlap once both are visible,
     so the later one is dropped rather than stacked. */
  .stage__type .cue--display ~ .cue--display { display: none; }

  .scroll-hint,
  .seam { display: none; }

  .stage__grade::after { display: none; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }

  .index__preview-frame canvas { opacity: 1; transform: none; }

  .wall__hint { opacity: 1 !important; }
  .wall__tile-label { opacity: 1; }
}

/* ═══════════  PRINT  ═══════════ */
@media print {
  .nav, .menu, .boot, .wall__viewport, .viewer, .scroll-hint { display: none !important; }
  body { color: #000; background: #fff; }
  .section { border: 0; }
}