/* ============================================================
   US — CHAPTER ONE
   responsive.css — mobile-first breakpoints & viewport safety
   Targets: 320 / 375 / 390 / 430 / 768 / 1024 / 1440+
   ============================================================ */

/* ---------- very small phones (320px) ---------- */

@media (max-width: 360px) {
  :root { --dur-in: 0.5s; }

  .stage {
    padding-left: calc(16px + var(--safe-left));
    padding-right: calc(16px + var(--safe-right));
  }

  .display { font-size: clamp(3.6rem, 22vw, 4.6rem); }
  .line { font-size: 1.15rem; max-width: 20ch; }
  .line--big { font-size: 1.45rem; }
  .date--big { font-size: 1.9rem; }
  .note { font-size: 0.86rem; }
  .eyebrow { letter-spacing: 0.26em; }
  .chapter-title { letter-spacing: 0.3em; }
  .frame--tall { width: min(66vw, 260px); }
  .frame--portrait,
  .frame--offset { width: min(80vw, 280px); }
  .music__label { display: none; }
}

/* ---------- standard phones (375 / 390 / 430) ---------- */

@media (min-width: 361px) and (max-width: 480px) {
  .display { font-size: clamp(4.2rem, 21vw, 5.4rem); }
  .frame--portrait { width: min(72vw, 320px); }
}

/* ---------- short screens (landscape phones) ---------- */

@media (max-height: 560px) and (orientation: landscape) {
  .stage {
    padding-top: calc(14px + var(--safe-top));
    padding-bottom: calc(56px + var(--safe-bottom));
  }

  .display { font-size: clamp(2.8rem, 11vh, 4rem); }
  .line { font-size: 1.05rem; line-height: 1.4; }
  .line--big { font-size: 1.3rem; }
  .scene--finale .scene__inner { gap: 0.8rem; }
  .letter {
    max-height: min(72vh, 320px);
    max-height: min(72dvh, 320px);
    padding: 1.2rem 1.4rem;
  }
  .letter p { margin-bottom: 0.7rem; line-height: 1.6; }
}

/* ---------- tablets (768) ---------- */

@media (min-width: 768px) {
  .stage {
    padding: calc(40px + var(--safe-top)) calc(48px + var(--safe-right)) calc(96px + var(--safe-bottom)) calc(48px + var(--safe-left));
  }

  .scene { max-width: 820px; }
  .scene__inner { gap: 0.85rem; }
  .scene__inner.photo { gap: 1.7rem; }

  .display { font-size: clamp(6rem, 13vw, 8.5rem); }
  .display--sm { font-size: 2.6rem; }
  .line { font-size: 1.7rem; max-width: 24ch; }
  .note { font-size: 1rem; }

  .frame--tall { width: 320px; }
  .frame--portrait { width: 360px; }
  .frame--polaroid { width: 340px; }
  .frame--offset { width: 360px; transform: translateX(-6%); }
  .frame--wide { width: 620px; }

  .letter { padding: 3rem 3.4rem; }
  .letter p { font-size: 1.05rem; line-height: 1.85; }

  .music { left: calc(28px + var(--safe-left)); bottom: calc(24px + var(--safe-bottom)); }

  .envelope { width: 300px; }
}

/* ---------- desktop image hover (pointer devices only) ---------- */

@media (hover: hover) and (pointer: fine) {
  .frame { transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); }
  .frame:hover { transform: translateY(-3px) scale(1.008); }
  .frame--offset:hover { transform: translateX(-6%) translateY(-3px); }
}

/* ---------- large desktop (1024 / 1440+) ---------- */

@media (min-width: 1024px) {
  .scene { max-width: 920px; }
  .line { font-size: 1.85rem; }
  .frame--tall { width: 340px; }
  .frame--portrait { width: 380px; }
  .frame--wide { width: 680px; }
}

@media (min-width: 1440px) {
  .scene__inner.photo { gap: 2rem; }
  .frame--portrait { width: 420px; }
  .frame--tall { width: 360px; }
  .frame--wide { width: 760px; }
  .line { font-size: 2rem; }
}

/* ---------- very wide but short (projector / split windows) ---------- */

@media (min-height: 400px) and (max-height: 620px) {
  .scene--opening .cta { margin-top: 1.1rem; }
  .scene__inner.photo { gap: 0.9rem; }
}

/* ---------- no-scroll safety net ---------- */

@media (max-width: 1024px) {
  html, body { width: 100%; overflow-x: hidden; }
}