/* ==========================================================================
   Responsive overrides: tablet, desktop split-stage, short screens,
   reduced motion. Mobile styles live in main.css.
   ========================================================================== */

/* ------------------------------------------------ small phones (≤ 359px) -- */
@media (max-width: 359px) {
  .dock__link { width: 3.3rem; }
  .dock__link span { font-size: 0.53rem; letter-spacing: 0.04em; }
  .choice { grid-template-columns: 1fr; }
  .choice__box { min-height: 0; }
  .timer__num { font-size: 2.3rem; }
}

/* ------------------------------------- short landscape phones (≤ 520px h) -- */
@media (max-height: 520px) and (orientation: landscape) {
  .cover__content { justify-content: flex-start; gap: 1.5rem; padding-top: calc(var(--safe-t) + 1.5rem); }
  .cover__names { font-size: 2.6rem; }
  .cover__names > span:first-child { display: inline; }
  .hero { min-height: 0; }
  .hero__media { height: 80vh; }
}

/* ---------------------------------------------------- tablet (≥ 768px) -- */
@media (min-width: 768px) {
  :root { --section-y: 8.5rem; --wrap: 46rem; }

  .cover__media img { object-position: 50% 58%; }
  .cover__names { font-size: 5rem; }

  .hero__media { height: 58vh; }
  .hero__names { font-size: 5.5rem; }
  .hero { padding-bottom: 7rem; }
  .scroll-cue { display: block; }

  .person {
    grid-template-columns: 1fr 1fr; align-items: center; gap: 5rem;
    max-width: 52rem;
  }
  .person--bride .person__body { text-align: left; }
  .person__figure { width: 100%; max-width: 20rem; }
  .person--bride .person__figure { order: 2; margin-left: 0; margin-right: 2.5rem; justify-self: end; }
  .person--groom .person__figure { justify-self: start; margin-left: 0.5rem; }
  .person--bride .person__body { margin-left: auto; }

  .chapters { max-width: 52rem; }
  .chapter { grid-template-columns: 16rem 1fr; gap: 3.5rem; align-items: center; }
  .chapter--alt { grid-template-columns: 1fr 16rem; }
  .chapter__figure, .chapter--alt .chapter__figure { width: 100%; margin: 0; }
  .chapter--alt .chapter__figure { order: 2; }

  .mosaic { gap: 0.875rem; }                                                /* 14px */
  .events__list { max-width: 44rem; grid-template-columns: 1fr 1fr; align-items: stretch; }
  .accounts { grid-template-columns: 1fr 1fr; }
  .account__number { font-size: 1.75rem; }
}

/* ======================================== desktop split stage (≥ 1024px) == */
@media (min-width: 1024px) {
  :root {
    --col: clamp(460px, 36vw, 560px);
    --wrap: 40rem;
    --section-y: 7.5rem;
    --gutter: 2.75rem;
  }

  body { background: var(--c-night); }

  /* Left: sticky photograph that fades from night to day after opening */
  .stage {
    display: block; position: fixed; top: 0; bottom: 0; left: 0; right: var(--col);
    overflow: hidden; background: var(--c-night);
  }
  .stage__slot, .stage__slot .pic { position: absolute; inset: 0; }
  .stage__slot .pic img { width: 100%; height: 100%; object-fit: cover; }
  .stage__pic--cover img { transform: scale(1.06); transition: transform 8s var(--ease-out); }
  html.is-ready .stage__pic--cover img { transform: scale(1); }
  .stage__slot--hero { opacity: 0; transition: opacity 1.8s var(--ease-soft) 0.35s; }
  .stage__slot--hero img { transform: scale(1.04); transition: transform 3.2s var(--ease-soft) 0.35s; }
  .is-open .stage__slot--hero { opacity: 1; }
  .is-open .stage__slot--hero img { transform: scale(1); }
  .stage__shade {
    position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(31, 27, 24, 0.45) 0%, rgba(31, 27, 24, 0) 50%),
      linear-gradient(0deg, rgba(31, 27, 24, 0.7) 0%, rgba(31, 27, 24, 0) 40%);
  }
  .stage__caption {
    position: absolute; left: clamp(2.5rem, 5vw, 5rem); bottom: clamp(2.5rem, 8vh, 5rem); max-width: 80%;
    color: var(--c-on-night); opacity: 0; transform: translateY(12px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }
  /* Shown once the hero (same names) has scrolled away, so the title never appears twice */
  .is-open.is-past-hero .stage__caption { opacity: 1; transform: none; }
  .stage__names {
    font-family: var(--f-display); font-weight: 300; font-variation-settings: "opsz" 144;
    font-size: clamp(3.5rem, 5.6vw, 6rem); line-height: 0.95; letter-spacing: -0.02em;
  }
  .stage__names .amp { font-size: 0.85em; }
  .stage__date { margin-top: 1.25rem; font: 500 0.75rem/1 var(--f-sans); letter-spacing: 0.34em; text-transform: uppercase; color: var(--c-on-night-soft); }

  /* Right: the invitation column */
  .invitation { width: var(--col); margin-left: auto; min-height: 100vh; box-shadow: -1px 0 0 rgba(0, 0, 0, 0.25); }

  /* The cover only covers the column; the stage shows the photograph */
  .cover { left: auto; width: var(--col); background: var(--c-ivory) var(--paper); color: var(--c-ink); }
  .cover__media, .cover__shade { display: none; }
  .cover::before {
    content: ""; position: absolute; inset: 1.25rem; pointer-events: none;
    border: 1px solid var(--c-hair-gold); outline: 1px solid var(--c-hair); outline-offset: -8px;
  }
  .cover .eyebrow--night { color: var(--c-clay); }
  .cover__names { color: var(--c-ink); }
  .cover .amp { color: var(--c-clay); }
  .cover__date, .cover__to, .cover__note { color: var(--c-ink-soft); }
  .cover__name { color: var(--c-ink); border-color: var(--c-hair-gold); }
  .cover .btn--lantern { color: var(--c-ivory); background: var(--c-ink); border-color: var(--c-ink); }
  .cover .btn--lantern:hover { background: var(--c-clay); border-color: var(--c-clay); }
  .cover :focus-visible { outline-color: var(--c-clay); }
  .cover__content { justify-content: center; gap: clamp(4rem, 12vh, 7rem); }
  .cover__names { font-size: clamp(3.6rem, 4.6vw, 4.6rem); }

  /* Typographic hero (the stage already carries the photograph) */
  .hero { justify-content: center; min-height: 100vh; padding-bottom: 6rem; }
  .hero__media { display: none; }
  .hero__content { margin-top: 0; }
  .hero__names { font-size: clamp(4.25rem, 5.4vw, 5.5rem); }
  .scroll-cue { display: block; }

  /* Column is narrow: keep the mobile compositions */
  .person { grid-template-columns: 1fr; gap: 2.25rem; max-width: var(--wrap); }
  .person__figure { width: 76%; max-width: 21rem; }
  .person--groom .person__figure { justify-self: start; margin-left: 0; }
  .person--bride .person__figure { order: 0; justify-self: end; margin-right: 0; }
  .person--bride .person__body { text-align: right; margin-left: auto; }

  .chapter, .chapter--alt { grid-template-columns: 1fr; gap: 2.25rem; }
  .chapter__figure { width: min(68%, 16.5rem); }
  .chapter--alt .chapter__figure { order: 0; margin-left: auto; }
  .events__list { grid-template-columns: 1fr; max-width: 26rem; }

  .accounts { grid-template-columns: 1fr; }

  .dock { left: auto; right: calc(var(--col) / 2); transform: translate(50%, 160%); }
  .is-open .dock { transform: translate(50%, 0); }
  .is-open.is-typing .dock, .is-open.is-lightbox .dock { transform: translate(50%, 160%); }
  .music { right: 1.25rem; bottom: calc(1.25rem + var(--safe-b)); }
  .toast { left: auto; right: calc(var(--col) / 2); transform: translate(50%, 16px); }
  .toast.is-visible { transform: translate(50%, 0); }

  .lightbox__stage { padding: 4.5rem 6rem 1rem; }
  .lightbox__nav { width: 52px; height: 52px; margin-top: -26px; }
  .lightbox__nav--prev { left: 1.75rem; }
  .lightbox__nav--next { right: 1.75rem; }
}

@media (min-width: 1024px) and (max-height: 760px) {
  .cover__content { gap: 3rem; }
}

/* --------------------------------------------- reduced motion preference -- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js [data-reveal="image"] .pic { clip-path: none; }
  .js [data-reveal="image"] .pic img, .hero__media img, .stage__slot--hero img { transform: none; }
  .js .sec-head[data-reveal] .sec-mark { stroke-dashoffset: 0; }
  .cover__media img, .stage__pic--cover img { transform: none; }
  .js .cover__top > *, .js .cover__guest > * { opacity: 1; transform: none; animation: none; }
  .music__bars i { animation: none; transform: scaleY(0.6); }
  .scroll-cue::after { animation: none; opacity: 1; }
  .hero__media { transform: none !important; }
}

/* ------------------------------------------------------------- print -- */
@media print {
  .cover, .stage, .dock, .music, .toast, .lightbox, .scroll-cue { display: none !important; }
  .invitation { width: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}