/* ─────────────────────────────────────────────────────────────
   Şevval & Anıl — Nişan Davetiyesi
   Mobile → tablet → desktop, fully responsive.
   ───────────────────────────────────────────────────────────── */

:root {
  --cream:        #fae8d4;   /* sampled from video last frame */
  --cream-soft:   #fdf2e1;
  --cream-deep:   #ecd9b9;
  --table:        #ead5b6;   /* the "table" the card sits on (desktop) */
  --rose:         #b48a6d;
  --rose-soft:    #c9a48c;
  --rose-deep:    #8a6650;   /* readable rose for small labels (AA contrast) */
  --gold:         #b08a4a;
  --gold-soft:    #c8a868;
  --ink:          #4a3520;
  --ink-soft:     #7a5e44;
  --ink-faint:    #a98a6c;

  --serif:  'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --script: 'Italianno', 'Brush Script MT', cursive;

  --pad-x: clamp(28px, 9vw, 56px);

  --intro-fade: 1.2s;
  --text-cascade-base: 0.2s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html {
  background: var(--cream);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100svh;
}

/* Lock scroll while the intro plays */
body.intro-active {
  overflow: hidden;
  height: 100svh;
}

img, video, svg { display: block; max-width: 100%; }

/* ─────────────────────────────────────────────────────────────
   PAGE WRAPPER (the "card" on a "table" on wider screens)
   ───────────────────────────────────────────────────────────── */
.page {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--cream);
  background-image: url('assets/card-strip.webp');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
}

/* ─────────────────────────────────────────────────────────────
   HERO  —  video overlays the same image we use as background,
   so when the video ends and fades out, the user sees no jump.
   ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  min-height: 100svh;
  background: url('assets/frames/frame_first.webp') no-repeat top center;
  background-size: cover;
  background-color: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Reserve space above for the wreath at top of the card, and below for the
     petals + scroll arrow. Content is centered within what remains. */
  padding-top: clamp(180px, 32vh, 360px);
  padding-bottom: clamp(120px, 18vw, 180px);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  overflow: hidden;
}

/* Canvas sits on top of the hero CSS background.
   Initial state: hero CSS shows frame_first.webp; canvas is transparent until
   JS loads priority frames and draws frame 0 (same image — no flicker).
   During playback: canvas paints each frame.
   After playback: hero CSS swaps to frame_last.webp (preloaded) and canvas
   fades out — robust to mobile browser canvas-memory clears on scroll. */
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.hero__canvas--ready { opacity: 1; }
body.intro-done .hero {
  background-image: url('assets/frames/frame_last.webp');
}
body.intro-done .hero__canvas {
  opacity: 0;
  transition: opacity 1.1s ease 0.4s;
  pointer-events: none;
}

/* "Zarfı Aç" CTA — visible while user hasn't started the video.
   Disappears the moment the video starts playing. */
.open-envelope {
  position: absolute;
  bottom: clamp(40px, 9vw, 80px);
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 28px 13px 24px;
  background: rgba(255, 250, 240, 0.82);
  border: 1px solid var(--gold);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(12px, 2.9vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, 8px);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(74, 53, 32, 0.25);
  animation: openEnvelopeIn 0.6s cubic-bezier(.22,.7,.18,1) 0.15s forwards,
             openEnvelopePulse 3.2s ease-in-out 1.0s infinite;
  transition: background 0.2s, transform 0.25s, box-shadow 0.25s;
}
.open-envelope:hover,
.open-envelope:focus-visible {
  background: rgba(255, 250, 240, 0.95);
  outline: none;
  box-shadow: 0 12px 28px -10px rgba(74, 53, 32, 0.32);
}
@keyframes openEnvelopeIn {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes openEnvelopePulse {
  0%, 100% { transform: translate(-50%, 0)   scale(1); }
  50%      { transform: translate(-50%, -2px) scale(1.025); }
}
body.video-started .open-envelope,
body.intro-done .open-envelope {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px) scale(0.98);
  animation: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Hero text sits ABOVE the video, hidden until the video ends.
   Each child fades up independently so it feels like the video paused
   and the words materialised on top of the still card. */
.hero__inner {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 460px;
  text-align: center;
  pointer-events: none; /* don't block the skip click while invisible */
}
body.intro-done .hero__inner { pointer-events: auto; }

.hero__inner > * { opacity: 0; }

body.intro-done .hero__inner > * {
  animation: heroIn 1.2s cubic-bezier(.22,.7,.18,1) both;
  animation-delay: var(--d, var(--text-cascade-base));
}
.hero__eyebrow { --d: calc(var(--text-cascade-base) + 0.00s); }
.hero__couple  { --d: calc(var(--text-cascade-base) + 0.20s); }
.hero__event   { --d: calc(var(--text-cascade-base) + 0.50s); }
.hero__date    { --d: calc(var(--text-cascade-base) + 0.70s); }

@keyframes heroIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero typography */
.hero__eyebrow {
  margin: 0 0 clamp(28px, 8vw, 44px);
  font-size: clamp(11.5px, 2.9vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}
.hero__couple {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.82;
}
.hero__name { font-size: clamp(64px, 17vw, 124px); }
.hero__amp {
  font-size: clamp(38px, 10vw, 68px);
  color: var(--rose);
  margin: -0.05em 0;
  font-style: normal;
}
.hero__event {
  margin: clamp(28px, 7vw, 40px) 0 clamp(20px, 5vw, 28px);
  font-size: clamp(11px, 2.7vw, 14px);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--rose);
}
.hero__date {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  flex-wrap: wrap;
  justify-content: center;
}
.hero__day   { font-size: clamp(36px, 9vw, 56px); font-weight: 500; color: var(--ink); }
.hero__month { font-size: clamp(15px, 3.8vw, 22px); letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink); }
.hero__year  { font-size: clamp(13px, 3.2vw, 18px); letter-spacing: 0.3em; color: var(--ink-soft); }

.hero__scroll {
  position: absolute;
  bottom: clamp(20px, 6vw, 36px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: var(--rose);
  opacity: 0;
}
body.intro-done .hero__scroll {
  animation: heroScrollIn 1s cubic-bezier(.22,.7,.18,1) 1.95s forwards,
             bobble 2.4s ease-in-out 2.95s infinite;
}
@keyframes heroScrollIn {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes bobble {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* ─────────────────────────────────────────────────────────────
   SKIP INTRO BUTTON  (fixed, top-right)
   ───────────────────────────────────────────────────────────── */
.skip-intro {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px 9px 16px;
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid rgba(176, 138, 74, 0.5);
  border-radius: 999px;
  color: var(--ink);
  font: 12px/1 var(--serif);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.skip-intro--visible,
body.video-started .skip-intro {
  opacity: 1;
  transform: translateY(0);
}
.skip-intro:hover, .skip-intro:focus-visible { background: rgba(255, 250, 240, 0.85); outline: none; }
body.intro-done .skip-intro { opacity: 0; pointer-events: none; transform: translateY(-4px); }

/* ─────────────────────────────────────────────────────────────
   BGM TOGGLE  (top-left, mirror of skip-intro) — visible from start
   ───────────────────────────────────────────────────────────── */
.bgm-toggle {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: rgba(255, 250, 240, 0.55);
  border: 1px solid rgba(176, 138, 74, 0.5);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background 0.2s, transform 0.2s;
  /* Subtle entry animation but no long hidden state */
  animation: bgmIn 0.5s ease-out 0.15s both;
}
@keyframes bgmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.bgm-toggle:hover, .bgm-toggle:focus-visible {
  background: rgba(255, 250, 240, 0.85);
  outline: none;
}
.bgm-toggle__icon { display: block; }
.bgm-toggle__icon--off { display: none; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__icon--on  { display: none; }
.bgm-toggle[aria-pressed="true"] .bgm-toggle__icon--off { display: block; color: var(--ink-soft); }
@media (min-width: 700px) {
  .bgm-toggle {
    top: calc(env(safe-area-inset-top, 0px) + 22px);
    left: 22px;
  }
}

/* ─────────────────────────────────────────────────────────────
   UPLOAD BANNER  (fixed top, very visible during memory uploads)
   ───────────────────────────────────────────────────────────── */
.upload-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 20px calc(14px + env(safe-area-inset-top, 0px));
  background: rgba(255, 244, 226, 0.96);
  border-bottom: 1px solid var(--gold);
  box-shadow: 0 6px 22px -8px rgba(74, 53, 32, 0.25);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: bannerSlideDown 0.45s cubic-bezier(.22,.7,.18,1);
}
.upload-banner[hidden] { display: none; }
@keyframes bannerSlideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
.upload-banner__inner {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3vw, 18px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--serif);
  color: var(--ink);
  text-align: center;
}
.upload-banner__spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(176, 138, 74, 0.25);
  border-top-color: var(--rose-deep);
  animation: bannerSpin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes bannerSpin {
  to { transform: rotate(360deg); }
}
.upload-banner__text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 500;
}
.upload-banner__text strong {
  font-weight: 500;
  letter-spacing: 0.04em;
}
.upload-banner__text #upload-banner-pct {
  font-variant-numeric: tabular-nums;
  color: var(--rose-deep);
  font-weight: 600;
  font-size: clamp(15px, 4vw, 18px);
}
.upload-banner__warn {
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-style: italic;
}

/* When uploading, also enlarge the inline status text dramatically */
body.memories-uploading .memories__status {
  font-size: clamp(18px, 5vw, 24px);
  font-weight: 500;
  color: var(--ink);
  font-style: normal;
  letter-spacing: 0.02em;
}
body.memories-uploading .memories__upload {
  background: rgba(176, 138, 74, 0.15);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   GENERIC SECTIONS
   ───────────────────────────────────────────────────────────── */
.story,
.countdown,
.details,
.memories,
.footer {
  padding: clamp(48px, 11vw, 80px) var(--pad-x);
  text-align: center;
}

/* Reveal sections gently as user scrolls past intro */
.story, .countdown, .details, .memories, .footer {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
body.intro-done .story,
body.intro-done .countdown,
body.intro-done .details,
body.intro-done .memories,
body.intro-done .footer {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 1.6s;
}

/* Subtle gold separator between sections */
.story + .countdown::before,
.countdown + .details::before,
.details + .memories::before,
.memories + .footer::before {
  content: '';
  display: block;
  width: 56px;
  height: 1px;
  margin: 0 auto clamp(36px, 9vw, 56px);
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
}

/* ─── Story (the romantic heart of the page) ─── */
.story {
  padding-top: clamp(64px, 14vw, 100px);
  padding-bottom: clamp(28px, 7vw, 48px);
}

/* Tighten the transition between Story and Countdown */
.story + .countdown {
  padding-top: clamp(28px, 7vw, 48px);
}
.story + .countdown::before {
  margin-bottom: clamp(22px, 5.5vw, 36px);
}
.story__title {
  margin: 0 0 clamp(28px, 7vw, 44px);
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(48px, 12vw, 76px);
  color: var(--ink);
  line-height: 0.95;
  letter-spacing: 0.005em;
}
.story__verses {
  max-width: 30ch;
  margin: 0 auto clamp(28px, 7vw, 44px);
}
.story__verses p {
  margin: 0 0 0.5em;
  font-size: clamp(17px, 4.6vw, 22px);
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
}
.story__verses p:last-child { margin-bottom: 0; }
.story__invite {
  max-width: 36ch;
  margin: 0 auto clamp(20px, 5vw, 32px);
  font-size: clamp(15px, 3.9vw, 18px);
  color: var(--ink-soft);
  line-height: 1.7;
  font-style: italic;
}
.story__sign {
  display: inline-block;
  margin: 0 auto clamp(22px, 5vw, 32px);
  color: var(--rose-soft);
}
.story__close {
  max-width: 32ch;
  margin: 0 auto;
  font-size: clamp(13px, 3.4vw, 15px);
  color: var(--rose);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

/* ─── Countdown ─── */
.countdown__label {
  margin: 0 0 clamp(20px, 5vw, 32px);
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-style: italic;
  font-weight: 500;
}
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(4px, 1.4vw, 8px);
  max-width: 460px;
  margin: 0 auto;
}
.countdown__cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: clamp(12px, 3.2vw, 20px) 2px;
  border: 1px solid rgba(176, 138, 74, 0.28);
  border-radius: 3px;
  background: rgba(255, 250, 240, 0.4);
}
.countdown__cell span {
  font-size: clamp(20px, 5.4vw, 30px);
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.countdown__cell small {
  font-size: clamp(10px, 2.4vw, 11.5px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
}

/* ─── Details ─── */
.details {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 7vw, 44px);
}
.detail { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.detail__label {
  font-size: clamp(12px, 2.9vw, 13.5px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-style: italic;
  font-weight: 500;
}
.detail__value {
  font-size: clamp(22px, 5.4vw, 28px);
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.detail__sub {
  font-size: clamp(13.5px, 3.4vw, 15px);
  color: var(--ink);
  letter-spacing: 0.05em;
  font-weight: 500;
}

/* ─── Venue detail with directions link ─── */
.detail--venue { gap: 8px; }
.detail__map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(10px, 2.6vw, 16px);
  padding: 11px 22px 11px 24px;
  border: 1px solid var(--gold);
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.18em;
  font-size: clamp(12px, 2.9vw, 13px);
  text-transform: uppercase;
  font-weight: 500;
  background: rgba(255, 250, 240, 0.5);
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.detail__map-link:hover,
.detail__map-link:focus-visible {
  background: rgba(176, 138, 74, 0.12);
  outline: none;
  transform: translateY(-1px);
}

/* ─── Memories (photo upload) ─── */
.memories {
  padding-top: clamp(56px, 12vw, 84px);
  padding-bottom: clamp(56px, 12vw, 84px);
}
.memories__label {
  margin: 0 0 clamp(14px, 3.5vw, 22px);
  font-size: clamp(12px, 3vw, 14px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--rose-deep);
  font-style: italic;
  font-weight: 500;
}
.memories__title {
  margin: 0 0 clamp(20px, 5vw, 32px);
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(38px, 9.5vw, 56px);
  color: var(--ink);
  line-height: 1.05;
}
.memories__desc {
  max-width: 36ch;
  margin: 0 auto clamp(28px, 7vw, 40px);
  font-size: clamp(15px, 3.8vw, 17.5px);
  line-height: 1.7;
  color: var(--ink-soft);
  font-style: italic;
}
.memories__upload {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 30px 14px 26px;
  border: 1px solid var(--gold);
  background: rgba(255, 250, 240, 0.6);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(12.5px, 3vw, 14px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 18px -10px rgba(74, 53, 32, 0.2);
}
.memories__upload:hover,
.memories__upload:focus-visible {
  background: rgba(176, 138, 74, 0.12);
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(74, 53, 32, 0.28);
}
.memories__upload[data-busy="true"] {
  pointer-events: none;
  opacity: 0.6;
}
.memories__hint {
  margin: clamp(14px, 3.5vw, 20px) 0 0;
  font-size: clamp(12px, 2.9vw, 13px);
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  font-style: italic;
}
.memories__status {
  margin: clamp(14px, 3.5vw, 20px) auto 0;
  max-width: 36ch;
  min-height: 1.4em;
  font-size: clamp(13px, 3.2vw, 14.5px);
  color: var(--rose-deep);
  font-style: italic;
  letter-spacing: 0.02em;
}
.memories__status:empty { display: none; }

/* ─── Footer ─── */
.footer {
  padding-top: clamp(48px, 11vw, 72px);
  padding-bottom: clamp(64px, 16vw, 110px);
}
.footer__couple {
  margin: 0;
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(40px, 10vw, 64px);
  color: var(--ink);
  line-height: 1;
}
.footer__date {
  margin: clamp(18px, 4vw, 24px) 0 6px;
  font-size: clamp(13.5px, 3.4vw, 16px);
  letter-spacing: 0.28em;
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.footer__city {
  margin: 0;
  font-size: clamp(12.5px, 3.2vw, 14px);
  letter-spacing: 0.32em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   The card sits on a "cream table" on wider screens.
   ───────────────────────────────────────────────────────────── */

/* Small tablet — 480px+ */
@media (min-width: 480px) {
  body { font-size: 18px; }
  .hero__inner { max-width: 500px; }
}

/* Tablet — 700px+ : show the table around the card */
@media (min-width: 700px) {
  body {
    background: var(--table);
    background-image:
      radial-gradient(ellipse at top, rgba(74,53,32,0.04), transparent 60%),
      radial-gradient(ellipse at bottom, rgba(74,53,32,0.06), transparent 60%);
  }
  .page {
    max-width: 600px;
    margin: clamp(20px, 3vw, 36px) auto;
    box-shadow:
      0 18px 50px -16px rgba(74, 53, 32, 0.30),
      0 6px 18px -8px rgba(74, 53, 32, 0.15);
    border-radius: 2px;
  }
  /* Skip button sits on the table, not on the card */
  .skip-intro {
    top: calc(env(safe-area-inset-top, 0px) + 22px);
    right: 22px;
  }
  /* Hero on tablet: cap at 9:16 ratio so the petals at the bottom stay visible */
  .hero {
    min-height: 0;
    aspect-ratio: 9 / 16;
    height: auto;
  }
  .hero__inner { max-width: 520px; }
}

/* Desktop — 1024px+ : larger card, bigger typography */
@media (min-width: 1024px) {
  .page {
    max-width: 640px;
    margin-top: clamp(28px, 4vw, 48px);
    margin-bottom: clamp(28px, 4vw, 48px);
  }
  .hero__inner { max-width: 540px; }
}

/* Large desktop — 1440px+ */
@media (min-width: 1440px) {
  .page {
    max-width: 700px;
    box-shadow:
      0 28px 70px -20px rgba(74, 53, 32, 0.34),
      0 10px 24px -10px rgba(74, 53, 32, 0.18);
  }
}

/* Landscape phone fallback (avoid hero overflow) */
@media (max-height: 520px) and (orientation: landscape) {
  .hero {
    min-height: 100svh;
    padding-top: clamp(60px, 18vh, 120px);
    padding-bottom: clamp(40px, 10vh, 80px);
  }
  .hero__inner { max-width: 90%; }
  .hero__name  { font-size: clamp(40px, 8vw, 64px); }
  .hero__amp   { font-size: clamp(28px, 6vw, 40px); }
  .hero__eyebrow { margin-bottom: clamp(14px, 3vw, 22px); }
  .hero__event   { margin: clamp(14px, 3vw, 22px) 0 clamp(10px, 2vw, 16px); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body.intro-done .hero__inner > * { opacity: 1; }
}