/* ==========================================================================
   responsive.css — breakpoints for the invitation template
   ========================================================================== */

/* ---------- Tablet / small desktop ---------- */
@media (max-width: 900px) {
  /* Timeline collapses to a single left-rail column */
  .timeline__path-svg { display: none; }
  .timeline__rail,
  .timeline__rail-fill { opacity: 1; left: 24px; transform: none; }
  .timeline__row,
  .timeline__row--left,
  .timeline__row--right {
    justify-content: flex-start;
    padding-left: 62px;
    margin-bottom: 2.4rem;
  }
  .timeline__card { width: 100%; padding: 1.3rem 1.4rem; }
  .timeline__node { width: 46px; height: 46px; left: 24px; }
  .timeline__node-icon { width: 21px; height: 21px; }
  .timeline__event { font-size: 1.25rem; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  :root {
    --container: 90vw;
    --arch-lg: 140px 140px 8px 8px;
    --arch-md: 100px 100px 6px 6px;
    --arch-sm: 70px 70px 5px 5px;
  }

  body { line-height: 1.65; }

  .section { padding: 4rem 0; }
  .section::before { width: 300px; height: 420px; border-radius: 150px 150px 0 0; }

  .divider::before,
  .divider::after { width: 34px; }

  .eyebrow { font-size: 0.6rem; letter-spacing: 0.3em; }
  .section-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }

  /* Gate */
  .gate__card { width: 88vw; padding: 2.2rem 1.4rem 1.8rem; }
  .gate__seal { width: 96px; height: 96px; margin: 1.1rem auto 0.4rem; }
  .gate__edge-text { font-size: 0.5rem; letter-spacing: 0.32em; }
  .gate__veil--top .gate__edge-text { bottom: 1.4rem; }
  .gate__veil--bottom .gate__edge-text { top: 1.4rem; }

  /* Hero */
  .hero__meta { gap: 0.6rem 1rem; font-size: 0.62rem; letter-spacing: 0.22em; }
  .hero__meta-dot { display: none; }
  .hero__tagline { font-size: 0.94rem; }
  .hero__scroll-line { height: 40px; }

  /* Envelope */
  .envelope-wrapper { height: 160vh; }
  .envelope-stage { width: 90vw; }
  .envelope__letter { width: 82%; max-width: 268px; padding: 14px 15px; }
  .envelope__letter-inner { font-size: 11.5px; line-height: 1.62; }
  .envelope__letter-inner p { margin: 0 0 9px; }
  .envelope__greeting { font-size: 19px; margin-bottom: 7px !important; }
  .envelope__wax { width: 34px; height: 34px; margin-left: -17px; font-size: 0.66rem; }

  /* Scratch */
  .scratch__grid { gap: 0.9rem; margin-top: 2.2rem; }
  .scratch__card { width: 132px; height: 172px; }
  .scratch__value { font-size: 1.45rem; }

  /* Countdown */
  .countdown__grid { gap: 0.65rem; }
  .countdown__unit { min-width: 0; flex: 1 1 calc(50% - 0.65rem); padding: 1.3rem 0.7rem 1rem; }

  /* Gallery */
  .gallery__frame { width: 90vw; }
  .gallery__slide figcaption { font-size: 0.76rem; padding: 2.2rem 1rem 1rem; }
  .gallery__nav { gap: 1rem; }
  .gallery__arrow { width: 34px; height: 34px; }

  /* Venue */
  .venue__grid { grid-template-columns: 1fr; gap: 1.2rem; }

  /* RSVP */


  /* Floating UI */
  .music-toggle { width: 46px; height: 46px; right: 1rem; bottom: 1rem; }
  .to-top { width: 40px; height: 40px; left: 1rem; bottom: 1rem; }
  .petal { width: 9px; height: 9px; }
}

/* ---------- Very small phones ---------- */
@media (max-width: 380px) {
  .scratch__card { width: 118px; height: 156px; }
  .scratch__value { font-size: 1.25rem; }
  .gate__seal { width: 86px; height: 86px; }
  .countdown__unit { padding: 1.1rem 0.5rem 0.9rem; }
}

/* ---------- Landscape phones: shorten pinned sections ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .envelope-wrapper { height: 220vh; }
  .hero { min-height: 620px; }
  .hero__scroll-hint { display: none; }
}

/* ---------- Print: flat, ink-friendly ---------- */
@media print {
  .gate, .petals, .music-toggle, .to-top, .scroll-progress,
  .envelope-wrapper, .gallery__nav { display: none !important; }
  body { background: #fff; color: #222; }
  h1, h2, h3, h4 { color: #5c1010; }
  p { color: #444; }
  .section { padding: 1.5rem 0; background: #fff !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}