@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Vazirmatn:wght@300;400;500;600;700&display=swap');

:root {
  --green: #304638;
  --green-dark: #24382D;
  --green-soft: #3D5747;
  --cream: #F5F0E7;
  --ivory: #FBF9F4;
  --gold: #B9955A;
  --gold-light: #D6C29B;
  --text: #26332C;
  --muted: #6E756F;
  --white: #fffdf8;
  --shadow-soft: 0 24px 70px rgba(36, 56, 45, .13);
  --shadow-card: 0 18px 42px rgba(36, 56, 45, .10);
  --ease-luxury: cubic-bezier(.22, .78, .24, 1);
  --ease-soft: cubic-bezier(.2, .65, .3, 1);
  --content: min(1120px, calc(100vw - 40px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ivory); }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  background:
    radial-gradient(circle at 16% 8%, rgba(214,194,155,.16), transparent 24rem),
    radial-gradient(circle at 87% 32%, rgba(48,70,56,.055), transparent 30rem),
    var(--ivory);
  font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
button, a { -webkit-tap-highlight-color: transparent; }
button, input, textarea, select { font: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: rgba(185,149,90,.24); color: var(--green-dark); }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  right: 12px;
  transform: translateY(-150%);
  padding: .65rem 1rem;
  border-radius: 999px;
  background: var(--green-dark);
  color: var(--ivory);
  text-decoration: none;
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

.ambient { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.ambient__orb { position: absolute; border-radius: 50%; filter: blur(8px); opacity: .35; }
.ambient__orb--one { width: 30rem; height: 30rem; right: -16rem; top: 28vh; background: radial-gradient(circle, rgba(61,87,71,.11), transparent 68%); }
.ambient__orb--two { width: 26rem; height: 26rem; left: -14rem; top: 68vh; background: radial-gradient(circle, rgba(185,149,90,.12), transparent 70%); }
.ambient__dust { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--gold); box-shadow: 4vw 7vh 0 rgba(185,149,90,.18), 11vw 15vh 0 rgba(185,149,90,.11), 20vw 4vh 0 rgba(185,149,90,.14), 31vw 18vh 0 rgba(185,149,90,.12), 45vw 9vh 0 rgba(185,149,90,.09), 58vw 21vh 0 rgba(185,149,90,.14), 72vw 5vh 0 rgba(185,149,90,.11), 84vw 16vh 0 rgba(185,149,90,.16), 93vw 8vh 0 rgba(185,149,90,.09); }
.ambient__dust--one { top: 12vh; right: 4vw; }
.ambient__dust--two { top: 58vh; right: 8vw; transform: rotate(180deg); opacity: .65; }

/* Entrance */
.entrance {
  position: fixed;
  inset: 0;
  z-index: 100;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 45%, rgba(214,194,155,.20), transparent 22rem),
    linear-gradient(140deg, rgba(255,255,255,.65), transparent 42%),
    var(--ivory);
  transition: opacity .9s var(--ease-soft), visibility .9s;
}
.entrance::before,
.entrance::after {
  content: "";
  position: absolute;
  width: min(34vw, 350px);
  height: min(48vw, 480px);
  opacity: .055;
  border: 1px solid var(--green);
  border-radius: 55% 45% 65% 35%;
  transform: rotate(24deg);
  pointer-events: none;
}
.entrance::before { right: -10vw; bottom: -12vh; }
.entrance::after { left: -11vw; top: -14vh; transform: rotate(-31deg); }
.entrance.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.entrance__eyebrow,
.entrance__signature {
  margin: 0;
  color: rgba(48,70,56,.62);
  letter-spacing: .08em;
  font-size: .77rem;
}
.entrance__ornament {
  position: absolute;
  top: 7px;
  left: 50%;
  width: min(260px, 58vw);
  transform: translateX(-50%);
  opacity: .22;
  pointer-events: none;
}
.entrance__ornament svg { width: 100%; fill: none; stroke: var(--gold); stroke-width: 1; }

.envelope-wrap { display: grid; place-items: center; perspective: 1400px; width: 100%; }
.envelope {
  --env-w: min(84vw, calc(72svh * .70), 420px);
  position: relative;
  width: var(--env-w);
  aspect-ratio: 7 / 10;
  display: block;
  padding: 0;
  border: 1px solid rgba(214,194,155,.52);
  border-radius: 10px;
  overflow: visible;
  background: transparent;
  cursor: pointer;
  color: var(--gold-light);
  box-shadow: 0 34px 90px rgba(36,56,45,.20), 0 7px 18px rgba(36,56,45,.13);
  transform-style: preserve-3d;
  transition: transform .45s var(--ease-luxury), box-shadow .45s var(--ease-luxury);
  isolation: isolate;
}
.envelope:focus-visible { outline: 3px solid rgba(185,149,90,.70); outline-offset: 7px; }
@media (hover:hover) {
  .envelope:hover { transform: translateY(-3px); box-shadow: 0 40px 95px rgba(36,56,45,.23), 0 9px 24px rgba(36,56,45,.15); }
}
.envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 9;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,246,219,.42) 45%, transparent 70%);
  transform: translateX(-140%);
}
.envelope__back {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.045), transparent 28%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, var(--green-soft), var(--green-dark));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 -28px 55px rgba(16,26,21,.16);
}
.envelope__paper {
  position: absolute;
  z-index: 2;
  top: 7%;
  right: 6%;
  width: 88%;
  height: 86%;
  border: 1px solid rgba(185,149,90,.44);
  border-radius: 8px;
  background:
    linear-gradient(rgba(185,149,90,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,149,90,.04) 1px, transparent 1px),
    var(--ivory);
  background-size: 22px 22px;
  color: var(--green-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 16%;
  box-shadow: 0 8px 32px rgba(23,35,29,.22), inset 0 0 38px rgba(185,149,90,.05);
  transform: translateY(18%) scale(.985);
  opacity: .82;
  transition: transform 1.05s var(--ease-luxury) 1.1s, opacity .6s ease 1s, box-shadow .7s ease 1s;
  overflow: hidden;
}
.envelope__paper::before,
.envelope__paper::after {
  content: "";
  position: absolute;
  width: 56%;
  height: 25%;
  border: 1px solid rgba(185,149,90,.17);
  border-radius: 50%;
}
.envelope__paper::before { top: -12%; right: -22%; transform: rotate(25deg); }
.envelope__paper::after { bottom: -12%; left: -22%; transform: rotate(25deg); }
.paper__ornament { color: var(--gold); font-size: 1.2rem; margin-bottom: .8rem; }
.paper__mini { font-size: clamp(.72rem, 2.4vw, .9rem); letter-spacing: .08em; color: rgba(48,70,56,.66); }
.paper__names { margin-top: .55rem; font-family: "Amiri", Georgia, serif; font-size: clamp(1.45rem, 5vw, 2.2rem); font-weight: 700; white-space: nowrap; }
.paper__names b { color: var(--gold); font-weight: 400; margin: 0 .3rem; }
.paper__line { width: 48px; height: 1px; margin-top: 1.2rem; background: var(--gold); }
.envelope__flap {
  position: absolute;
  z-index: 5;
  inset: -1px -1px auto;
  height: 54%;
  transform-origin: top center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  clip-path: polygon(0 0, 100% 0, 50% 88%);
  background: linear-gradient(165deg, #3b5545 0%, #2b4134 52%, #22362b 100%);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  filter: drop-shadow(0 6px 5px rgba(20,32,26,.12));
  transition: transform 1s var(--ease-luxury) .62s, filter .6s ease .4s;
}
.flap__line { position: absolute; inset: 9% 9% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(214,194,155,.5), transparent); }
.envelope__pocket {
  position: absolute;
  z-index: 4;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 56%;
  clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #344b3c, #263b2f);
  border-radius: 0 0 10px 10px;
  box-shadow: inset 0 1px 0 rgba(214,194,155,.08);
}
.envelope__pocket-side { position: absolute; z-index: 3; top: 25%; bottom: 0; width: 55%; background: #2e4437; opacity: .92; }
.envelope__pocket-side--right { right: 0; clip-path: polygon(100% 0, 0 53%, 100% 100%); }
.envelope__pocket-side--left { left: 0; clip-path: polygon(0 0, 100% 53%, 0 100%); }

.envelope__face {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: 11% 10% 7%;
  text-align: center;
  transition: opacity .45s ease .68s, transform .6s var(--ease-soft) .4s;
}
.envelope__bismillah { font-family: "Amiri", Georgia, serif; font-size: clamp(1rem, 3.3vw, 1.35rem); color: var(--gold-light); opacity: .93; }
.envelope__names { margin-top: 4.5%; font-family: "Amiri", Georgia, serif; font-weight: 700; font-size: clamp(2.25rem, 8vw, 3.3rem); line-height: 1.08; text-shadow: 0 2px 20px rgba(0,0,0,.11); }
.envelope__names em { display: inline-block; font-style: normal; font-size: .62em; font-weight: 400; margin: 0 .18em; opacity: .88; }
.ring-seal { position: absolute; top: 48.5%; left: 50%; width: 120px; height: 76px; transform: translate(-50%,-50%); }
.ring {
  position: absolute;
  top: 13px;
  width: 50px;
  height: 50px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255,245,211,.36), 0 0 13px rgba(214,194,155,.21), 0 4px 8px rgba(17,26,22,.16);
  transition: transform .85s var(--ease-luxury) .18s, opacity .5s ease .65s;
}
.ring::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border-top: 1px solid rgba(255,248,225,.72);
  transform: rotate(-25deg);
}
.ring--right { left: 24px; transform: rotate(13deg); }
.ring--left { right: 24px; transform: rotate(-13deg); }
.seal-line { position: absolute; left: 18px; right: 18px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); opacity: .58; transition: opacity .45s ease .48s, transform .65s var(--ease-soft) .35s; }
.envelope__subtitle { position: absolute; bottom: 16%; font-size: clamp(.78rem, 2.8vw, 1rem); color: rgba(245,240,231,.78); }
.envelope__hint { position: absolute; bottom: 6%; display: inline-flex; align-items: center; gap: .45rem; font-size: clamp(.67rem, 2.3vw, .79rem); color: rgba(214,194,155,.86); }
.envelope__hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; animation: hintDown 1.9s ease-in-out infinite; }

.entrance.is-opening .envelope { transform: scale(1.02); box-shadow: 0 42px 105px rgba(36,56,45,.27), 0 0 38px rgba(185,149,90,.13); }
.entrance.is-opening .envelope::after { opacity: 1; animation: sweep 1.05s var(--ease-soft) .1s both; }
.entrance.is-opening .ring--right { transform: translateX(-42px) rotate(-24deg); opacity: .72; }
.entrance.is-opening .ring--left { transform: translateX(42px) rotate(24deg); opacity: .72; }
.entrance.is-opening .seal-line { opacity: 0; transform: scaleX(1.45); }
.entrance.is-opening .envelope__face { opacity: 0; transform: translateY(8px); }
.entrance.is-opening .envelope__flap { transform: rotateX(178deg); filter: drop-shadow(0 -4px 4px rgba(20,32,26,.04)); animation: flapLayer 1.2s linear .62s forwards; }
.entrance.is-opening .envelope__paper { transform: translateY(-38%) scale(1.035); opacity: 1; box-shadow: 0 17px 45px rgba(23,35,29,.20), 0 0 52px rgba(255,245,220,.56); }
.entrance.is-opening .envelope-wrap { animation: envelopeExit 1.1s var(--ease-soft) 1.95s forwards; }
.entrance.is-opening .entrance__eyebrow,
.entrance.is-opening .entrance__signature,
.entrance.is-opening .entrance__ornament { animation: fadeAway .65s ease 1.7s forwards; }

@keyframes hintDown { 0%,100%{transform:translateY(-2px);opacity:.45} 50%{transform:translateY(3px);opacity:1} }
@keyframes sweep { from{transform:translateX(-140%)} to{transform:translateX(140%)} }
@keyframes flapLayer { 0%,70%{z-index:5} 71%,100%{z-index:1} }
@keyframes envelopeExit { to{transform:translateY(12vh) scale(1.08);filter:blur(8px);opacity:0} }
@keyframes fadeAway { to{opacity:0; transform:translateY(-8px)} }

/* Global section language */
.site-content { opacity: 0; visibility: hidden; transition: opacity .85s ease; }
body.invitation-open .site-content { opacity: 1; visibility: visible; }
.section { position: relative; width: var(--content); margin-inline: auto; padding: clamp(80px, 12vw, 150px) 0; }
.eyebrow { margin: 0 0 .55rem; font-size: .82rem; letter-spacing: .1em; color: var(--gold); font-weight: 600; }
.section-heading { text-align: center; margin-bottom: clamp(28px, 5vw, 56px); }
.section-heading h2,
.portrait-copy h2,
.venue-card h2 { margin: 0; font-family: "Amiri", Georgia, serif; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.35; color: var(--green-dark); }
.ornamental-divider { width: min(310px, 72vw); margin: 1.4rem auto; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--gold); }
.ornamental-divider span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(185,149,90,.7)); }
.ornamental-divider span:last-child { background: linear-gradient(90deg, rgba(185,149,90,.7), transparent); }
.ornamental-divider b { font-size: .72rem; font-weight: 400; }

.js .reveal { opacity: 0; transform: translateY(28px) scale(.985); filter: blur(7px); transition: opacity .95s var(--ease-soft), transform .95s var(--ease-soft), filter .95s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

/* Story */
.story { position: relative; padding-top: clamp(90px, 13vw, 150px); overflow: clip; }
.story::before { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(245,240,231,.18), transparent 12%, rgba(245,240,231,.42) 76%, transparent); }
.story__intro { width: min(760px, calc(100vw - 40px)); margin: 0 auto clamp(40px, 7vw, 86px); text-align: center; }
.story__intro h1 { margin: 0; font-family: "Amiri", Georgia, serif; font-size: clamp(2.2rem, 6vw, 4rem); color: var(--green-dark); line-height: 1.35; }
.story__intro > p:last-child { margin: 0 auto; max-width: 650px; color: #657067; font-size: clamp(.96rem, 2vw, 1.08rem); }
.story-progress { position: absolute; top: 170px; bottom: 160px; right: max(20px, calc((100vw - 1180px)/2)); width: 1px; background: rgba(185,149,90,.16); z-index: 3; }
.story-progress span { display:block; width:100%; height:0; background:linear-gradient(var(--gold-light), var(--gold)); box-shadow:0 0 9px rgba(185,149,90,.25); }
.story-scene { width: var(--content); min-height: 86vh; min-height: 86svh; margin: 0 auto; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: clamp(30px, 7vw, 90px); padding: clamp(55px, 9vw, 100px) 5%; position: relative; }
.story-scene::after { content:""; position:absolute; inset:12% 2%; border:1px solid rgba(185,149,90,.07); border-radius:42% 58% 46% 54% / 54% 40% 60% 46%; pointer-events:none; transform:rotate(-2deg); }
.story-scene--reverse .story-scene__visual { order: 2; }
.story-scene--reverse .story-scene__content { order: 1; }
.story-scene__content { position: relative; z-index: 2; max-width: 520px; }
.story-scene__content h2 { margin: .1rem 0 1.3rem; font-family: "Amiri", Georgia, serif; color: var(--green-dark); font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1.55; }
.story-scene__content > p:last-child,
.story-scene__content > .story-final-copy { margin: 0; color: #5b665f; font-size: clamp(.98rem, 2vw, 1.12rem); line-height: 2.15; }
.story-index { position:absolute; top:-2.7rem; right:-.15rem; font-family:"Amiri",serif; font-size:clamp(3rem,8vw,5.5rem); color:rgba(185,149,90,.105); line-height:1; }
.story-scene__visual { position: relative; min-height: 340px; display:grid; place-items:center; }
.story-dot { position:absolute; top:50%; width:14px; height:14px; border:1px solid var(--gold); border-radius:50%; box-shadow:0 0 0 7px rgba(185,149,90,.06), 0 0 20px rgba(185,149,90,.16); background:var(--ivory); transition: transform 1.3s var(--ease-luxury); }
.story-dot--a { right:17%; }
.story-dot--b { left:17%; }
.story-path { width:62%; height:1px; background:linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent); transform:scaleX(.15); opacity:.25; transition:transform 1.4s var(--ease-luxury), opacity 1s ease; }
.story-scene.is-active .story-path { transform:scaleX(1); opacity:.7; }
.story-scene.is-active .story-dot--a { transform:translateX(-26px); }
.story-scene.is-active .story-dot--b { transform:translateX(26px); }
.story-scene__visual--curves svg { width:min(100%,430px); fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; opacity:.45; }
.story-scene__visual--curves path { stroke-dasharray:560; stroke-dashoffset:560; transition:stroke-dashoffset 1.8s var(--ease-soft); }
.story-scene.is-active .story-scene__visual--curves path { stroke-dashoffset:0; }
.story-scene__visual--curves path:last-child { transition-delay:.25s; opacity:.48; }
.story-leaf { position:absolute; width:22px; height:43px; border:1px solid rgba(185,149,90,.58); border-radius:100% 0 100% 0; transform:rotate(42deg) scale(.7); opacity:0; transition:opacity .7s ease .8s, transform .9s var(--ease-soft) .8s; }
.story-leaf--one { top:25%; right:27%; }
.story-leaf--two { bottom:22%; left:24%; transform:rotate(220deg) scale(.7); }
.story-scene.is-active .story-leaf { opacity:.7; transform:rotate(42deg) scale(1); }
.story-scene.is-active .story-leaf--two { transform:rotate(220deg) scale(1); }
.story-scene__visual--meeting { min-height:360px; }
.meeting-line { position:absolute; width:46%; height:1px; top:50%; background:linear-gradient(90deg, transparent, var(--gold)); transition:transform 1.4s var(--ease-luxury); }
.meeting-line--one { right:4%; transform:translateX(28px) rotate(10deg); transform-origin:right; }
.meeting-line--two { left:4%; transform:translateX(-28px) rotate(-10deg); transform-origin:left; background:linear-gradient(90deg,var(--gold),transparent); }
.meeting-mark { position:relative; z-index:2; display:grid; place-items:center; width:68px; height:68px; border:1px solid rgba(185,149,90,.34); border-radius:50%; color:var(--gold); opacity:.2; transform:scale(.72) rotate(20deg); transition:all 1s var(--ease-luxury) .45s; }
.story-scene.is-active .meeting-line { transform:translateX(0) rotate(0); }
.story-scene.is-active .meeting-mark { opacity:.85; transform:scale(1) rotate(0); box-shadow:0 0 40px rgba(185,149,90,.10); }
.story-scene--choice::before { content:""; position:absolute; width:45vw; height:45vw; max-width:650px; max-height:650px; right:50%; top:50%; transform:translate(50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(214,194,155,.12), transparent 68%); pointer-events:none; }
.choice-halo { width:190px; height:190px; border:1px solid rgba(185,149,90,.24); border-radius:50%; box-shadow:0 0 0 28px rgba(185,149,90,.03),0 0 0 54px rgba(185,149,90,.018); transform:scale(.78); transition:transform 1.1s var(--ease-luxury); }
.choice-word { position:absolute; font-family:"Amiri",serif; font-size:4.2rem; color:var(--green); opacity:.78; }
.choice-branch { position:absolute; width:90px; height:170px; border:1px solid rgba(185,149,90,.36); border-color:rgba(185,149,90,.36) transparent transparent rgba(185,149,90,.36); border-radius:100% 0 0 0; opacity:.55; transition:transform 1s var(--ease-soft); }
.choice-branch--r { right:17%; transform:rotate(-25deg) translateY(20px); }
.choice-branch--l { left:17%; transform:scaleX(-1) rotate(-25deg) translateY(20px); }
.story-scene.is-active .choice-halo { transform:scale(1); }
.story-scene.is-active .choice-branch--r { transform:rotate(-14deg) translateY(0); }
.story-scene.is-active .choice-branch--l { transform:scaleX(-1) rotate(-14deg) translateY(0); }
.story-scene--final { display:block; min-height:100vh; min-height:100svh; width:min(850px, calc(100vw - 40px)); padding:15vh 20px; text-align:center; }
.story-scene--final::after { inset:7% 0; }
.story-scene--final .story-scene__content { max-width:720px; margin:auto; }
.final-rings { position:relative; width:120px; height:72px; margin:2.1rem auto 1.3rem; }
.final-ring { position:absolute; top:9px; width:54px; height:54px; border:3px solid var(--gold); border-radius:50%; box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),0 0 18px rgba(185,149,90,.18); opacity:0; transition:transform 1.15s var(--ease-luxury), opacity .65s ease; }
.final-ring--r { left:11px; transform:translateX(-42px) rotate(-20deg); }
.final-ring--l { right:11px; transform:translateX(42px) rotate(20deg); }
.story-scene.is-active .final-ring { opacity:1; }
.story-scene.is-active .final-ring--r { transform:translateX(8px) rotate(10deg); }
.story-scene.is-active .final-ring--l { transform:translateX(-8px) rotate(-10deg); }
.story-couple-names { margin:1.2rem 0 .85rem !important; display:flex; justify-content:center; align-items:center; gap:.45em; font-family:"Amiri",serif; font-size:clamp(2.7rem,8vw,5.1rem) !important; color:var(--green-dark) !important; line-height:1.2 !important; }
.story-couple-names b { color:var(--gold); font-size:.65em; font-weight:400; }
.story-final-copy { margin-top:1rem !important; }
.story-to-invitation { display:flex; align-items:center; gap:12px; width:min(460px,76vw); margin:0 auto 20px; color:var(--gold); }
.story-to-invitation span { height:1px; flex:1; transform:scaleX(0); background:linear-gradient(90deg,transparent,var(--gold)); transition:transform 1.1s var(--ease-soft) .2s; }
.story-to-invitation span:last-child { background:linear-gradient(90deg,var(--gold),transparent); }
.story-to-invitation.is-visible span { transform:scaleX(1); }
.story-to-invitation b { font-weight:400; }

/* Hero */
.hero { min-height:90vh; min-height:90svh; display:grid; place-items:center; text-align:center; }
.hero::before { content:""; position:absolute; inset:10% 0; border-top:1px solid rgba(185,149,90,.11); border-bottom:1px solid rgba(185,149,90,.11); pointer-events:none; }
.hero__content { width:min(760px,100%); }
.hero__names { margin:.3rem 0 1rem; display:flex; align-items:center; justify-content:center; gap:.32em; flex-wrap:wrap; font-family:"Amiri",serif; font-size:clamp(3.2rem,9vw,6.9rem); line-height:1; color:var(--green-dark); }
.hero__names b { color:var(--gold); font-size:.52em; font-weight:400; }
.hero__subtitle { margin:0 auto; max-width:620px; font-size:clamp(1rem,2.5vw,1.22rem); color:#5d685f; }
.hero__promise { margin:0; color:var(--green); font-family:"Amiri",serif; font-size:1.35rem; }
.hero__ornament { position:absolute; width:170px; height:170px; opacity:.075; border:1px solid var(--green); border-radius:70% 30% 70% 30%; transform:rotate(45deg); }
.hero__ornament--right { right:-95px; top:21%; }
.hero__ornament--left { left:-100px; bottom:18%; transform:rotate(210deg); }

/* Countdown */
.countdown-section { text-align:center; }
.countdown { width:min(790px,100%); margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,2vw,18px); }
.countdown-card { position:relative; overflow:hidden; min-height:140px; padding:1.2rem .7rem; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(185,149,90,.30); border-radius:20px; background:rgba(251,249,244,.76); box-shadow:var(--shadow-card), inset 0 1px rgba(255,255,255,.8); backdrop-filter:blur(10px); }
.countdown-card::before { content:""; position:absolute; inset:0; background:linear-gradient(125deg,transparent 25%,rgba(255,255,255,.55) 46%,transparent 63%); transform:translateX(-130%); animation:softShimmer 7s ease-in-out infinite; }
.countdown-card strong { position:relative; font-family:"Amiri",serif; font-size:clamp(2.25rem,5vw,3.3rem); color:var(--green-dark); line-height:1; font-weight:700; font-variant-numeric:tabular-nums; }
.countdown-card strong.tick { animation:numberTick .35s var(--ease-soft); }
.countdown-card span { position:relative; margin-top:.8rem; font-size:.78rem; color:#72786f; }
.countdown-finished { color:var(--green); font-family:"Amiri",serif; font-size:1.4rem; }
@keyframes softShimmer { 0%,72%{transform:translateX(-130%)} 100%{transform:translateX(130%)} }
@keyframes numberTick { 0%{transform:translateY(4px);opacity:.45} 100%{transform:none;opacity:1} }

/* Portrait */
.portrait-section { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; gap:clamp(36px,7vw,85px); }
.portrait-shell { position:relative; padding:clamp(10px,1.8vw,18px); border:1px solid rgba(185,149,90,.38); border-radius:28px; background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(245,240,231,.62)); box-shadow:var(--shadow-soft); }
.portrait-shell::before { content:""; position:absolute; inset:7px; border:1px solid rgba(185,149,90,.13); border-radius:21px; pointer-events:none; }
.portrait-shell img { width:100%; max-height:600px; object-fit:contain; border-radius:19px; animation:portraitFloat 7s ease-in-out infinite; }
.portrait-shell__corner { position:absolute; width:58px; height:58px; z-index:2; border-color:var(--gold); opacity:.6; }
.portrait-shell__corner--tr { top:-7px; right:-7px; border-top:1px solid; border-right:1px solid; border-radius:0 14px 0 0; }
.portrait-shell__corner--bl { bottom:-7px; left:-7px; border-bottom:1px solid; border-left:1px solid; border-radius:0 0 0 14px; }
.portrait-copy { max-width:480px; }
.portrait-copy p:last-child { color:#657067; margin:1rem 0 0; }
@keyframes portraitFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* Details */
.details-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.detail-card { min-height:245px; padding:2rem 1rem; text-align:center; border:1px solid rgba(185,149,90,.23); border-radius:22px; background:rgba(251,249,244,.64); box-shadow:0 12px 28px rgba(36,56,45,.055); transition:transform .35s var(--ease-soft), box-shadow .35s ease, border-color .35s ease; }
@media (hover:hover) { .detail-card:hover { transform:translateY(-4px); box-shadow:0 18px 35px rgba(36,56,45,.09); border-color:rgba(185,149,90,.44); } }
.detail-icon { width:48px; height:48px; margin:0 auto 1.2rem; display:grid; place-items:center; border:1px solid rgba(185,149,90,.24); border-radius:50%; color:var(--gold); }
.detail-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.35; stroke-linecap:round; stroke-linejoin:round; }
.detail-card h3 { margin:0 0 .65rem; font-size:.82rem; color:var(--gold); font-weight:600; }
.detail-card p { margin:0; color:#626d65; font-size:.95rem; line-height:1.9; }
.detail-card strong { color:var(--green-dark); font-weight:600; }

/* Timeline */
.timeline { position:relative; display:grid; grid-template-columns:repeat(3,1fr); gap:0; padding-top:42px; }
.timeline::before { content:""; position:absolute; top:55px; right:16.5%; left:16.5%; height:1px; background:rgba(185,149,90,.18); }
.timeline::after { content:""; position:absolute; top:55px; right:16.5%; width:0; height:1px; background:var(--gold); transition:width 1.5s var(--ease-soft) .1s; }
.timeline.is-active::after { width:67%; }
.timeline-item { position:relative; text-align:center; padding:0 clamp(10px,2.4vw,28px); }
.timeline-node { position:relative; z-index:2; display:block; width:13px; height:13px; margin:7px auto 1.25rem; border:2px solid var(--gold); border-radius:50%; background:var(--ivory); box-shadow:0 0 0 8px var(--ivory); transform:scale(.55); opacity:.45; transition:transform .5s var(--ease-soft),opacity .5s ease,background .5s ease; }
.timeline.is-active .timeline-item:nth-child(1) .timeline-node { transition-delay:.2s; }
.timeline.is-active .timeline-item:nth-child(2) .timeline-node { transition-delay:.65s; }
.timeline.is-active .timeline-item:nth-child(3) .timeline-node { transition-delay:1.05s; }
.timeline.is-active .timeline-node { transform:scale(1); opacity:1; background:var(--gold-light); }
.timeline-item time { display:block; color:var(--gold); font-size:.8rem; margin-bottom:.3rem; }
.timeline-item h3 { margin:0; color:var(--green-dark); font-family:"Amiri",serif; font-size:1.45rem; }
.timeline-item p { margin:.55rem auto 0; max-width:245px; color:#6b746d; font-size:.86rem; }

/* Venue */
.venue-card { position:relative; overflow:hidden; width:min(850px,100%); margin:auto; padding:clamp(38px,7vw,76px) clamp(20px,7vw,70px); text-align:center; border:1px solid rgba(185,149,90,.30); border-radius:30px; background:linear-gradient(145deg,rgba(251,249,244,.94),rgba(245,240,231,.75)); box-shadow:var(--shadow-soft); }
.venue-card::before,.venue-card::after { content:""; position:absolute; width:210px; height:210px; border:1px solid rgba(185,149,90,.11); border-radius:48% 52% 43% 57%; pointer-events:none; }
.venue-card::before { right:-125px; top:-120px; transform:rotate(28deg); }
.venue-card::after { left:-130px; bottom:-125px; transform:rotate(180deg); }
.venue-card__halo { position:absolute; width:320px; height:320px; border-radius:50%; top:-200px; left:50%; transform:translateX(-50%); background:radial-gradient(circle,rgba(214,194,155,.20),transparent 68%); }
.venue-icon { position:relative; width:58px; height:58px; margin:0 auto 1rem; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(185,149,90,.32); color:var(--gold); }
.venue-icon svg { width:26px; fill:none; stroke:currentColor; stroke-width:1.3; }
.venue-address { margin:.65rem 0 1.8rem; color:#667068; }
.venue-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:.65rem; padding:.72rem 1.15rem; border:1px solid transparent; border-radius:999px; text-decoration:none; font-size:.88rem; font-weight:600; transition:transform .3s var(--ease-soft),box-shadow .3s ease,background .3s ease,border-color .3s ease; }
.button svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.button--primary { background:var(--green); color:var(--ivory); box-shadow:0 10px 24px rgba(48,70,56,.14); }
.button--ghost { color:var(--green); border-color:rgba(48,70,56,.22); background:rgba(255,255,255,.28); }
.button:focus-visible { outline:3px solid rgba(185,149,90,.5); outline-offset:3px; }
@media (hover:hover) { .button:hover { transform:translateY(-2px); } .button--primary:hover{background:var(--green-dark);box-shadow:0 13px 28px rgba(48,70,56,.20)} .button--ghost:hover{border-color:rgba(185,149,90,.5);background:rgba(245,240,231,.7)} }

/* Closing */
.closing { min-height:72vh; min-height:72svh; display:grid; place-items:center; text-align:center; }
.closing__content { width:min(620px,100%); }
.closing__content > p { margin:1.2rem 0; font-family:"Amiri",serif; color:var(--green-dark); font-size:clamp(1.5rem,4vw,2.35rem); line-height:1.8; }
.closing__content h2 { margin:.6rem 0 .35rem; color:var(--gold); font-family:"Amiri",serif; font-size:clamp(2.4rem,6vw,4rem); }
.closing__content small { color:#7a817c; }
.closing-rings { position:relative; width:90px; height:50px; margin:auto; }
.closing-rings span { position:absolute; width:39px; height:39px; border:2px solid var(--gold); border-radius:50%; top:4px; }
.closing-rings span:first-child { left:14px; transform:rotate(12deg); }
.closing-rings span:last-child { right:14px; transform:rotate(-12deg); }

/* Floating music */
.music-control {
  position: fixed;
  z-index: 80;
  left: max(18px, env(safe-area-inset-left));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 50px;
  height: 50px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(185,149,90,.42);
  border-radius: 50%;
  background: rgba(251,249,244,.88);
  color: var(--green-dark);
  box-shadow: 0 10px 28px rgba(36,56,45,.14);
  backdrop-filter: blur(12px);
  cursor:pointer;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .35s ease,transform .35s var(--ease-soft),background .3s ease;
}
.music-control[hidden] { display:none; }
.music-control.is-shown { opacity:1; transform:none; }
.music-control:focus-visible { outline:3px solid rgba(185,149,90,.48); outline-offset:3px; }
.music-control__icon { position:relative; width:22px; height:22px; display:grid; place-items:center; }
.music-control__play { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.45; }
.music-control__note { display:none; font-family:Georgia,serif; font-size:1.15rem; color:var(--gold); }
.wave { position:absolute; left:8px; bottom:7px; height:10px; display:none; align-items:flex-end; gap:2px; }
.wave i { width:2px; height:4px; border-radius:2px; background:var(--gold); animation:wave 1s ease-in-out infinite; }
.wave i:nth-child(2){animation-delay:.18s}.wave i:nth-child(3){animation-delay:.34s}
.music-control.is-playing .music-control__play { display:none; }
.music-control.is-playing .music-control__note,.music-control.is-playing .wave { display:flex; }
@keyframes wave { 0%,100%{height:3px}50%{height:9px} }

/* Responsive */
@media (max-width: 820px) {
  :root { --content: min(100% - 30px, 720px); }
  .story-progress { display:none; }
  .story-scene { grid-template-columns:1fr; min-height:auto; padding:90px 4% 110px; gap:16px; text-align:center; }
  .story-scene__visual { min-height:220px; order:1 !important; }
  .story-scene__content { order:2 !important; margin-inline:auto; }
  .story-index { right:50%; transform:translateX(50%); }
  .story-dot--a { right:22%; }.story-dot--b{left:22%;}
  .story-scene--choice::before { width:80vw; height:80vw; }
  .portrait-section { grid-template-columns:1fr; }
  .portrait-copy { text-align:center; margin-inline:auto; }
  .details-grid { grid-template-columns:repeat(2,1fr); }
  .detail-card { min-height:210px; padding:1.55rem .7rem; }
}

@media (max-width: 650px) {
  .entrance__eyebrow { margin-top:5px; }
  .envelope { --env-w: min(86vw, calc(70svh * .70), 390px); }
  .envelope__face { padding-top:10%; }
  .ring-seal { top:49%; transform:translate(-50%,-50%) scale(.9); }
  .entrance.is-opening .ring--right { transform:translateX(-34px) rotate(-24deg); }
  .entrance.is-opening .ring--left { transform:translateX(34px) rotate(24deg); }
  .countdown { grid-template-columns:repeat(2,1fr); max-width:420px; }
  .countdown-card { min-height:122px; }
  .timeline { grid-template-columns:1fr; gap:0; padding:0 12px 0 0; }
  .timeline::before { top:14px; bottom:14px; right:18px; left:auto; width:1px; height:auto; }
  .timeline::after { top:14px; right:18px; width:1px !important; height:0; transition:height 1.5s var(--ease-soft); }
  .timeline.is-active::after { height:calc(100% - 28px); }
  .timeline-item { text-align:right; padding:0 48px 38px 0; }
  .timeline-item:last-child { padding-bottom:0; }
  .timeline-node { position:absolute; right:0; top:7px; margin:0; }
  .timeline-item p { margin:.45rem 0 0; max-width:100%; }
  .venue-actions { flex-direction:column; align-items:stretch; }
  .button { width:100%; }
}

@media (max-width: 390px) {
  :root { --content: calc(100% - 24px); }
  .entrance { padding-inline:10px; }
  .envelope { --env-w: min(88vw, calc(68svh * .70), 340px); }
  .envelope__subtitle { bottom:15.5%; }
  .details-grid { gap:9px; }
  .detail-card { min-height:195px; }
  .detail-card p { font-size:.86rem; }
  .music-control { width:46px; height:46px; }
}


/* Compact responsive refinements */
.section {
  padding: clamp(52px, 7vw, 88px) 0;
}
.section-heading { margin-bottom: clamp(22px, 3.5vw, 38px); }
.story { padding-top: clamp(58px, 8vw, 92px); }
.story__intro { margin-bottom: clamp(20px, 3vw, 36px); }
.story-scene {
  min-height: 58vh;
  min-height: 58svh;
  gap: clamp(22px, 4vw, 54px);
  padding: clamp(34px, 5vw, 58px) 5%;
}
.story-scene__visual { min-height: 230px; }
.story-scene__visual--meeting { min-height: 245px; }
.story-scene__content h2 { margin-bottom: .75rem; }
.story-scene__content > p:last-child,
.story-scene__content > .story-final-copy { line-height: 1.95; }
.story-scene--final {
  min-height: 68vh;
  min-height: 68svh;
  padding: clamp(60px, 9vh, 92px) 20px;
}
.final-rings { margin: 1.3rem auto .8rem; transform: scale(.9); }
.story-couple-names { margin: .65rem 0 .5rem !important; }
.hero {
  min-height: 66vh;
  min-height: 66svh;
}
.countdown-card { min-height: 116px; }
.portrait-section { gap: clamp(28px, 5vw, 58px); }
.portrait-shell img { max-height: 500px; }
.details-grid { gap: 12px; }
.detail-card { min-height: 190px; padding: 1.45rem .85rem; }
.detail-icon { margin-bottom: .85rem; }
.timeline { grid-template-columns: repeat(4, 1fr); padding-top: 34px; }
.timeline::before { top: 47px; right: 12.5%; left: 12.5%; }
.timeline::after { top: 47px; right: 12.5%; }
.timeline.is-active::after { width: 75%; }
.timeline-item { padding-inline: clamp(8px, 1.7vw, 20px); }
.timeline-item h3 { font-size: 1.28rem; }
.timeline-item p { font-size: .82rem; line-height: 1.75; }
.timeline.is-active .timeline-item:nth-child(4) .timeline-node { transition-delay: 1.35s; }
.venue-card { padding-top: clamp(32px, 5vw, 54px); padding-bottom: clamp(32px, 5vw, 54px); }
.closing {
  min-height: 48vh;
  min-height: 48svh;
}

/* Tablets and compact laptops */
@media (min-width: 821px) and (max-width: 1100px) {
  :root { --content: min(100% - 44px, 920px); }
  .envelope { --env-w: min(64vw, calc(72svh * .70), 400px); }
  .story-scene { min-height: 54svh; padding-inline: 3%; }
  .story-scene__visual { min-height: 210px; }
  .hero { min-height: 60svh; }
  .details-grid { grid-template-columns: repeat(2, 1fr); }
  .detail-card { min-height: 165px; }
  .portrait-shell img { max-height: 440px; }
}

@media (max-width: 820px) {
  .section { padding: clamp(44px, 8vw, 64px) 0; }
  .story { padding-top: 50px; }
  .story__intro { width: min(680px, calc(100vw - 30px)); margin-bottom: 10px; }
  .story__intro > p:last-child { line-height: 1.85; }
  .story-scene {
    min-height: auto;
    padding: 46px 3% 52px;
    gap: 8px;
  }
  .story-scene__visual,
  .story-scene__visual--meeting { min-height: 142px; }
  .story-scene__content h2 { font-size: clamp(1.55rem, 5.5vw, 2.25rem); line-height: 1.45; }
  .story-scene__content > p:last-child,
  .story-scene__content > .story-final-copy { line-height: 1.9; }
  .story-index { top: -1.7rem; font-size: clamp(2.6rem, 10vw, 4rem); }
  .story-scene--final { min-height: auto; padding: 58px 16px; }
  .final-rings { margin-top: .9rem; }
  .hero { min-height: auto; padding-top: 74px; padding-bottom: 74px; }
  .portrait-section { gap: 24px; }
  .portrait-shell img { max-height: min(54svh, 430px); }
  .details-grid { gap: 10px; }
  .detail-card { min-height: 158px; padding: 1.15rem .7rem; }
  .detail-icon { width: 42px; height: 42px; margin-bottom: .7rem; }
  .venue-card { border-radius: 24px; }
  .closing { min-height: auto; padding-top: 70px; padding-bottom: 72px; }
}

/* Phones */
@media (max-width: 650px) {
  :root { --content: min(100% - 24px, 560px); }
  body { line-height: 1.75; }
  .entrance { padding-inline: 12px; }
  .entrance__ornament { width: min(220px, 56vw); }
  .envelope { --env-w: min(86vw, calc(74svh * .70), 372px); }
  .story__intro { width: calc(100vw - 28px); }
  .story__intro h1 { font-size: clamp(2rem, 10vw, 3rem); }
  .story-scene { padding: 38px 2% 44px; }
  .story-scene::after { inset: 7% 0; }
  .story-scene__visual,
  .story-scene__visual--meeting { min-height: 112px; }
  .story-dot { width: 11px; height: 11px; }
  .story-scene__visual--curves svg { max-height: 128px; }
  .choice-halo { width: 110px; height: 110px; }
  .choice-word { font-size: 2.5rem; }
  .choice-branch { height: 105px; width: 60px; }
  .story-couple-names { font-size: clamp(2.45rem, 13vw, 3.65rem) !important; }
  .hero__names { font-size: clamp(3rem, 15vw, 4.7rem); }
  .countdown { gap: 9px; }
  .countdown-card { min-height: 96px; border-radius: 16px; padding: .8rem .5rem; }
  .countdown-card strong { font-size: clamp(2rem, 10vw, 2.8rem); }
  .countdown-card span { margin-top: .5rem; }
  .portrait-shell { padding: 8px; border-radius: 20px; }
  .portrait-shell img { border-radius: 14px; max-height: 390px; }
  .portrait-copy p:last-child { margin-top: .7rem; line-height: 1.8; }
  .detail-card { min-height: 145px; border-radius: 18px; }
  .detail-card p { line-height: 1.65; }
  .timeline-item { padding-bottom: 26px; }
  .timeline-item h3 { font-size: 1.22rem; }
  .venue-address { margin-bottom: 1.2rem; }
  .closing__content > p { margin: .9rem 0; }
}

/* Very small phones */
@media (max-width: 370px) {
  :root { --content: calc(100% - 18px); }
  .envelope { --env-w: min(89vw, calc(72svh * .70), 330px); }
  .envelope__names { font-size: clamp(2rem, 10vw, 2.7rem); }
  .envelope__subtitle { font-size: .73rem; }
  .envelope__hint { font-size: .63rem; }
  .details-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .detail-card { min-height: 138px; padding-inline: .45rem; }
  .detail-icon { width: 38px; height: 38px; }
  .button { font-size: .83rem; }
}

/* Landscape phones / short screens */
@media (max-height: 560px) and (orientation: landscape) {
  .entrance { grid-template-rows: 1fr; }
  .entrance__eyebrow,
  .entrance__signature,
  .entrance__ornament { display: none; }
  .envelope { --env-w: min(47vw, calc(86svh * .70), 310px); }
  .envelope__face { padding-top: 8%; }
  .envelope__hint { bottom: 4%; }
  .section { padding-block: 44px; }
  .story-scene { grid-template-columns: .8fr 1.2fr; min-height: auto; padding-block: 34px; text-align: right; }
  .story-scene__visual { min-height: 120px; }
  .story-scene__content { margin-inline: 0; }
  .hero { min-height: auto; padding-block: 56px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0ms !important; }
  .entrance.is-opening .envelope__flap { transform:none; opacity:.2; }
  .entrance.is-opening .envelope__paper { transform:none; }
  .js .reveal { filter:none; transform:none; }
  .portrait-shell img { transform:none !important; }
}

/* ==================================================
   V3 responsive / empty-space / timeline fixes
   ================================================== */

/* Sections are full-bleed; their content remains comfortably constrained. */
.section {
  width: 100%;
  max-width: none;
  padding-inline: max(20px, calc((100vw - 1120px) / 2));
}

/* Keep the main invitation moments visually complete on short/medium screens. */
.hero {
  width: 100%;
}

.timeline {
  width: min(100%, 1040px);
  margin-inline: auto;
}

/* Four-step desktop timeline: one clean row, no collisions. */
@media (min-width: 901px) {
  .timeline {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding-top: 38px;
  }
  .timeline::before {
    display: block;
    top: 51px;
    right: 12.5%;
    left: 12.5%;
    width: auto;
    height: 1px;
  }
  .timeline::after {
    display: block;
    top: 51px;
    right: 12.5%;
    left: auto;
    width: 0;
    height: 1px;
  }
  .timeline.is-active::after { width: 75%; }
  .timeline-item {
    min-width: 0;
    padding-inline: clamp(10px, 1.8vw, 22px);
  }
  .timeline-item p {
    max-width: 220px;
    margin-inline: auto;
  }
}

/* Tablet + phone story: decorative art becomes a background accent instead of
   reserving an empty half-screen. This removes the two large blank areas. */
@media (max-width: 900px) {
  :root { --content: min(100% - 28px, 760px); }

  .section {
    padding-inline: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  .story {
    padding-top: 44px;
  }

  .story__intro {
    width: min(100% - 28px, 680px);
    margin-bottom: 18px;
    padding-inline: 4px;
  }

  .story-scene,
  .story-scene.story-scene--reverse {
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 7vw, 50px) max(18px, 5vw);
    margin: 0;
    overflow: hidden;
    text-align: center;
  }

  .story-scene + .story-scene {
    border-top: 1px solid rgba(185,149,90,.08);
  }

  .story-scene::after {
    inset: 12px 14px;
    border-radius: 28px;
    opacity: .72;
  }

  .story-scene__visual,
  .story-scene--reverse .story-scene__visual,
  .story-scene__visual--meeting {
    position: absolute;
    inset: 8% 5%;
    order: initial;
    min-height: 0;
    height: auto;
    z-index: 0;
    opacity: .24;
    pointer-events: none;
    overflow: hidden;
  }

  .story-scene__content,
  .story-scene--reverse .story-scene__content {
    order: initial;
    width: min(100%, 620px);
    max-width: 620px;
    margin-inline: auto;
    padding: clamp(24px, 5.5vw, 36px) clamp(18px, 5vw, 34px);
    border: 1px solid rgba(185,149,90,.13);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(251,249,244,.92), rgba(245,240,231,.72));
    box-shadow: 0 16px 45px rgba(36,56,45,.055);
    backdrop-filter: blur(2px);
  }

  .story-index {
    top: 12px;
    right: 18px;
    transform: none;
    font-size: clamp(2.5rem, 9vw, 4rem);
  }

  .story-scene__content h2 {
    margin: .2rem auto .7rem;
    max-width: 560px;
    font-size: clamp(1.55rem, 5.4vw, 2.25rem);
    line-height: 1.5;
  }

  .story-scene__content > p:last-child,
  .story-scene__content > .story-final-copy {
    max-width: 560px;
    margin-inline: auto;
    line-height: 1.9;
  }

  .story-scene__visual--curves svg {
    width: min(82%, 430px);
    max-height: 100%;
  }

  .story-dot--a { right: 8%; }
  .story-dot--b { left: 8%; }
  .story-path { width: 78%; }
  .meeting-line { width: 42%; }
  .meeting-mark { width: 58px; height: 58px; }
  .choice-halo { width: 132px; height: 132px; }
  .choice-word { font-size: 3rem; }
  .choice-branch { height: 116px; width: 68px; }

  .story-scene--choice::before {
    width: 68vw;
    height: 68vw;
    max-width: 430px;
    max-height: 430px;
  }

  .story-scene--final {
    width: 100%;
    min-height: 0;
    padding: 46px max(18px, 5vw);
  }

  .story-scene--final .story-scene__content {
    width: min(100%, 660px);
    max-width: 660px;
  }

  /* Clean single-column night schedule on tablets and phones. */
  .timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: min(100%, 640px);
    max-width: 640px;
    padding: 0;
  }

  .timeline::before,
  .timeline::after {
    display: none;
    content: none;
  }

  .timeline-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas:
      "node meta"
      "node title"
      "node copy";
    align-items: center;
    column-gap: 14px;
    min-width: 0;
    padding: 16px 16px 16px 18px;
    text-align: right;
    border: 1px solid rgba(185,149,90,.18);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(251,249,244,.92), rgba(245,240,231,.68));
    box-shadow: 0 12px 32px rgba(36,56,45,.055);
  }

  .timeline-node {
    grid-area: node;
    position: relative;
    right: auto;
    top: auto;
    align-self: center;
    justify-self: center;
    width: 14px;
    height: 14px;
    margin: 0;
    box-shadow: 0 0 0 7px rgba(185,149,90,.07);
  }

  .timeline-item time {
    grid-area: meta;
    width: max-content;
    max-width: 100%;
    margin: 0 0 .15rem;
    padding: .16rem .58rem;
    border-radius: 999px;
    background: rgba(185,149,90,.09);
    font-size: .75rem;
    line-height: 1.65;
  }

  .timeline-item h3 {
    grid-area: title;
    margin: 0;
    font-size: clamp(1.2rem, 4.6vw, 1.45rem);
    line-height: 1.45;
  }

  .timeline-item p {
    grid-area: copy;
    max-width: none;
    margin: .28rem 0 0;
    font-size: .84rem;
    line-height: 1.75;
  }

  .timeline.is-active .timeline-item:nth-child(4) .timeline-node {
    transition-delay: 1.25s;
  }
}

/* Phones: make the entrance feel fuller without pushing content off-screen,
   and keep the story compact. */
@media (max-width: 650px) {
  .entrance {
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding-inline: 10px;
  }

  .envelope {
    --env-w: min(91vw, calc(79svh * .70), 392px);
  }

  .envelope__face { padding-top: 9%; }
  .ring-seal { top: 48%; }
  .envelope__subtitle { bottom: 15%; }
  .envelope__hint { bottom: 5.5%; }

  .story__intro {
    margin-bottom: 10px;
  }

  .story-scene,
  .story-scene.story-scene--reverse {
    padding: 22px 12px;
  }

  .story-scene__content,
  .story-scene--reverse .story-scene__content {
    padding: 24px 16px;
    border-radius: 20px;
  }

  .story-scene__visual,
  .story-scene--reverse .story-scene__visual,
  .story-scene__visual--meeting {
    inset: 10% 3%;
    opacity: .19;
  }

  .story-index {
    top: 10px;
    right: 14px;
  }

  .story-scene--final {
    padding: 30px 12px 36px;
  }

  .timeline-item {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 11px;
    padding: 14px 13px 14px 14px;
    border-radius: 17px;
  }

  .timeline-item p { font-size: .8rem; }

  .hero {
    min-height: 68svh;
    padding-top: 58px;
    padding-bottom: 58px;
  }
}

@media (max-width: 370px) {
  .envelope {
    --env-w: min(92vw, calc(76svh * .70), 344px);
  }
  .story-scene__content,
  .story-scene--reverse .story-scene__content {
    padding-inline: 13px;
  }
  .timeline-item {
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: 9px;
    padding-inline: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .story-scene__visual { opacity: .16; }
}

/* Safe-area correction for RTL mobile layouts. */
@media (max-width: 900px) {
  .section {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}