:root{--black:#0b0a08;--cream:#f2ead9;--paper:#e8dcc4;--gold:#b89a64;--muted:#9b907d;--line:rgba(184,154,100,.24)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:var(--cream);font-family:'DM Sans',sans-serif;font-weight:300;overflow-x:hidden}.grain{position:fixed;inset:-60%;z-index:50;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:noise .18s steps(2) infinite}@keyframes noise{0%{transform:translate(0)}25%{transform:translate(2%,-1%)}50%{transform:translate(-1%,2%)}75%{transform:translate(1%,1%)}100%{transform:translate(-2%,-1%)}}.cursor-glow{position:fixed;z-index:2;width:320px;height:320px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,rgba(184,154,100,.09),transparent 68%);transform:translate(-50%,-50%)}.progress{position:fixed;z-index:60;left:0;top:0;width:100%;height:2px;background:rgba(255,255,255,.04)}.progress span{display:block;width:0;height:100%;background:var(--gold)}
.nav{height:86px;position:fixed;z-index:40;inset:0 0 auto;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(var(--black),transparent)}.monogram{color:var(--cream);text-decoration:none;font:500 29px 'Cormorant Garamond';letter-spacing:-2px}.monogram span{color:var(--gold);font:22px 'Great Vibes';padding:0 3px}.nav-center{font-size:8px;letter-spacing:4px;color:#817867}.menu{width:38px;height:38px;border:1px solid var(--line);background:rgba(11,10,8,.45);border-radius:50%;display:grid;place-content:center;gap:5px;cursor:pointer}.menu i{display:block;width:13px;height:1px;background:var(--cream)}.menu-panel{position:fixed;z-index:55;inset:0;background:#11100d;display:grid;place-items:center;transform:translateY(-100%)}.close-menu{position:absolute;right:5vw;top:30px;color:var(--cream);background:none;border:0;font-size:38px;font-weight:200;cursor:pointer}.menu-links{width:min(900px,80vw);display:flex;flex-direction:column}.menu-links a{font:500 clamp(50px,8vw,100px) 'Cormorant Garamond';color:var(--cream);text-decoration:none;border-bottom:1px solid var(--line);padding:12px 0;display:flex;justify-content:space-between}.menu-links a:hover{color:var(--gold)}.menu-links small{font:9px 'DM Sans';letter-spacing:3px;color:var(--gold);align-self:center}
.hero{height:100svh;min-height:720px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 45%,#2b2119,#100f0c 48%,#080807)}.hero:after{content:'';position:absolute;inset:7vh 5vw;border:1px solid var(--line);border-radius:50%;transform:scaleY(.62)}.hero-sun{position:absolute;width:45vw;height:45vw;border-radius:50%;background:radial-gradient(circle,rgba(184,154,100,.13),transparent 65%);filter:blur(12px)}.hero-ring{position:absolute;border:1px solid rgba(184,154,100,.12);border-radius:50%}.ring-1{width:70vw;height:70vw;animation:ringSpinOne 52s linear infinite}.ring-2{width:35vw;height:75vw;animation:ringSpinTwo 72s linear infinite}@keyframes ringSpinOne{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}@keyframes ringSpinTwo{from{transform:rotate(35deg)}to{transform:rotate(-325deg)}}.hero-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--gold);opacity:.5}.p1{top:27%;left:18%}.p2{top:61%;right:20%}.p3{bottom:22%;left:30%}.hero-content{position:relative;z-index:3;text-align:center;width:90vw}.eyebrow{font-size:9px;letter-spacing:4px;text-transform:uppercase;color:var(--gold);margin:0 0 28px}.names{margin:0;font:500 clamp(86px,14vw,190px)/.68 'Cormorant Garamond';letter-spacing:-7px}.names span{display:block}.names b{display:block;color:var(--gold);font:400 .3em/1.3 'Great Vibes';letter-spacing:0}.hero-bottom{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;margin-top:65px;text-align:left}.hero-bottom p{font:16px/1.25 'Cormorant Garamond';color:#a79a87;margin:0}.hero-bottom .side-note{text-align:right;font:9px/1.8 'DM Sans';letter-spacing:3px;text-transform:uppercase}.story-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:14px;min-width:190px;padding:16px 24px;border:1px solid rgba(184,154,100,.55);border-radius:999px;color:#e9decb;text-decoration:none;font-size:9px;letter-spacing:3px;text-transform:uppercase;overflow:hidden;background:rgba(20,16,12,.38);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset,0 12px 45px rgba(0,0,0,.2);transition:transform .35s ease,border-color .35s ease,background .35s ease}.story-button:before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(184,154,100,.28),transparent 60%);transform:translateY(45%);transition:transform .5s ease}.story-button span,.story-button i{position:relative;z-index:1}.story-button i{width:22px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transition:width .35s ease}.story-button:hover{transform:translateY(-3px);border-color:rgba(216,190,143,.95);background:rgba(184,154,100,.08)}.story-button:hover:before{transform:translateY(0)}.story-button:hover i{width:32px}.landing-hero .hero-bottom{margin-top:72px}.landing-hero .hero-content{padding-top:1vh}@media(max-width:700px){.story-button{min-width:170px;padding:15px 18px}.landing-hero .hero-bottom{margin-top:56px}}
.scroll-line{display:flex;flex-direction:column;align-items:center;gap:12px;color:#cfc2ae;text-decoration:none;font-size:8px;letter-spacing:3px;text-transform:uppercase}.scroll-line i{width:1px;height:55px;background:linear-gradient(var(--gold),transparent)}
.statement{min-height:125vh;position:relative;padding:23vh 10vw;display:flex;align-items:center;background:var(--black)}.section-tag{position:absolute;top:16vh;left:5vw;font-size:8px;letter-spacing:4px;color:#706756}.statement-inner{max-width:1050px;margin:auto}.headline{font:500 clamp(65px,9.6vw,140px)/.82 'Cormorant Garamond';letter-spacing:-5px;margin:0}.headline em,.gallery-title em,.interlude h2 em{font:400 .7em 'Great Vibes';letter-spacing:0;color:var(--gold)}.body{max-width:510px;font-size:13px;line-height:1.95;color:#9d9280;margin-top:48px}.floating-date{position:absolute;right:4vw;bottom:12vh;font:10px 'Cormorant Garamond';letter-spacing:8px;color:rgba(184,154,100,.25);writing-mode:vertical-rl}
.gallery{min-height:255vh;background:#11100d;position:relative;padding-top:18vh}.gallery-intro{padding:0 10vw;position:relative;z-index:5}.gallery-title{font:500 clamp(70px,10vw,145px)/.78 'Cormorant Garamond';letter-spacing:-5px;margin:0}.gallery-intro>.body{margin-left:auto;margin-right:8vw}.gallery-stage{height:105vh;position:relative;display:grid;place-items:center;perspective:1800px;overflow:hidden;margin-top:8vh}.memory{position:absolute;width:min(390px,42vw);aspect-ratio:4/5;transform-style:preserve-3d;box-shadow:0 35px 80px rgba(0,0,0,.48);border:1px solid rgba(184,154,100,.25);will-change:transform}.photo-slot{background:#181511;overflow:hidden}.photo-slot:before{content:'';position:absolute;inset:14px;border:1px solid rgba(184,154,100,.2);z-index:2;pointer-events:none}.slot-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gold)}.slot-inner span{font:500 10px 'DM Sans';letter-spacing:6px}.slot-inner small{font-size:7px;letter-spacing:2px;color:#776e60;margin-top:14px}.memory-a,.memory-b,.memory-c,.memory-d,.memory-e,.memory-f,.memory-g,.memory-h,.memory-i,.memory-j{left:50%;top:50%;transform:translate(-50%,-50%);transform-style:preserve-3d}.depth-word{position:absolute;z-index:-1;white-space:nowrap;font:500 27vw/1 'Cormorant Garamond';letter-spacing:-.08em;color:rgba(184,154,100,.035);transform:translateY(5%);pointer-events:none}.gallery-hint{position:absolute;bottom:12vh;display:flex;gap:14px;align-items:center;font-size:8px;letter-spacing:3px;color:#8b806e}.gallery-hint i{width:42px;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transform-origin:left center;animation:scrollLine 1.7s ease-in-out infinite}.gallery-hint b{font:400 16px/1 "DM Sans";color:var(--gold);animation:scrollArrow 1.35s ease-in-out infinite}.scroll-indicator{animation:scrollHint 2.4s ease-in-out infinite}@keyframes scrollArrow{0%,100%{transform:translateY(-3px);opacity:.55}50%{transform:translateY(5px);opacity:1}}@keyframes scrollLine{0%,100%{transform:scaleX(.55);opacity:.45}50%{transform:scaleX(1);opacity:1}}@keyframes scrollHint{0%,100%{opacity:.7}50%{opacity:1}}
.interlude{height:130vh;position:relative;display:flex;align-items:center;padding:0 10vw;overflow:hidden;background:radial-gradient(circle at 50% 50%,#292019,#0b0a08 65%)}.giant-script{position:absolute;left:-8vw;top:7%;font:400 45vw/.7 'Great Vibes';color:rgba(184,154,100,.035);white-space:nowrap}.interlude-copy{position:relative;z-index:2}.interlude h2{font:500 clamp(65px,10vw,150px)/.8 'Cormorant Garamond';letter-spacing:-5px;margin:0}.orbit-small{position:absolute;right:8vw;width:28vw;height:28vw;border:1px solid rgba(184,154,100,.18);border-radius:50%}
.day{min-height:110vh;background:var(--cream);color:#16120e;padding:20vh 10vw;position:relative}.day .section-tag{color:#8b7554}.day-grid{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end}.day-title{font:500 clamp(110px,15vw,210px)/.62 'Cormorant Garamond';letter-spacing:-9px;margin:0}.day-title span{color:var(--gold);font:400 .3em 'Great Vibes'}.place{font:400 clamp(28px,3vw,42px) 'Cormorant Garamond';margin:0 0 10vh}.details{border-top:1px solid rgba(22,18,14,.18)}.detail{padding:27px 0;border-bottom:1px solid rgba(22,18,14,.18);display:flex;justify-content:space-between;gap:20px}.detail small{font-size:7px;letter-spacing:3px;color:#8c795d}.detail strong{font:500 22px 'Cormorant Garamond'}.day-note{max-width:370px;font:18px/1.5 'Cormorant Garamond';color:#776750;margin-top:50px}
.film-roll{height:55vh;position:relative;background:#15120e;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.film-label{position:absolute;top:8vh;left:5vw;font-size:8px;letter-spacing:4px;color:var(--gold);z-index:2}.film-track{display:flex;gap:25px;align-items:center;white-space:nowrap;padding-left:20vw}.film-frame{flex:0 0 260px;height:330px;position:relative}.film-frame span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 10px 'DM Sans';letter-spacing:4px;color:var(--gold)}
.forever{min-height:110vh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#30231a,#090807 63%)}.forever-aura{position:absolute;width:55vw;height:55vw;border-radius:50%;border:1px solid rgba(184,154,100,.18);box-shadow:0 0 100px rgba(184,154,100,.05)}.forever-title{position:relative;margin:0;font:500 clamp(80px,13vw,185px)/.7 'Cormorant Garamond';letter-spacing:-7px}.forever-title span{display:block}.forever-title b{display:block;color:var(--gold);font:400 .3em/1.3 'Great Vibes'}.forever-script{position:relative;font:400 46px 'Great Vibes';color:var(--gold);margin:40px 0 0}.final-date{position:relative;margin-top:25px;font-size:9px;letter-spacing:5px;color:#887b69}.footer-line{position:absolute;bottom:70px;width:65px;height:1px;background:var(--gold)}.footer-note{position:absolute;bottom:33px;font-size:7px;letter-spacing:3px;text-transform:uppercase;color:#625b51}
@media(max-width:700px){.nav{height:70px;padding:0 6vw}.nav-center{display:none}.hero{min-height:680px}.hero:after{inset:12vh 5vw}.names{letter-spacing:-5px}.hero-bottom{grid-template-columns:1fr auto;margin-top:52px}.hero-bottom .side-note{display:none}.statement,.gallery,.day{padding-left:9vw;padding-right:9vw}.statement{min-height:105vh;padding-top:22vh}.section-tag{left:9vw;top:10vh}.headline{letter-spacing:-3px}.floating-date{display:none}.gallery{min-height:205vh}.gallery-intro>.body{margin-left:0;margin-right:0}.gallery-stage{height:92vh;margin-top:4vh}.memory{width:72vw;left:50%;top:50%;transform:translate(-50%,-50%)}.interlude{height:100vh;padding:0 9vw}.orbit-small{right:-15vw;width:55vw;height:55vw}.day{padding-top:20vh}.day-grid{grid-template-columns:1fr;gap:12vh}.day-title{letter-spacing:-7px}.place{margin-bottom:7vh}.detail{display:block}.detail strong{display:block;margin-top:9px}.film-roll{height:48vh}.film-frame{flex-basis:210px;height:270px}.film-track{padding-left:12vw}.forever{min-height:100vh}.forever-title{letter-spacing:-5px}.forever-script{font-size:38px}}

/* Real photographs */
.photo-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.9) contrast(1.03);transform:scale(1.015);transition:transform 1s cubic-bezier(.2,.7,.2,1),filter 1s ease}.photo-slot:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,5,0) 55%,rgba(8,7,5,.18));pointer-events:none}.photo-slot figcaption{position:absolute;z-index:3;left:24px;bottom:22px;font-size:7px;letter-spacing:3px;color:#f2ead9;text-shadow:0 2px 12px rgba(0,0,0,.45)}.memory:hover img{transform:scale(1.035);filter:saturate(1) contrast(1.04)}.film-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.88);transition:transform .8s ease,filter .8s ease}.film-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.32));pointer-events:none}.film-frame:hover img{transform:scale(1.06);filter:saturate(1)}.film-frame span{z-index:3;text-shadow:0 2px 12px rgba(0,0,0,.6)}


/* Playful floating photo miniatures */
.cute-memory{position:absolute;left:50%;top:50%;width:118px;aspect-ratio:4/5;padding:7px;background:#f1e7d5;border:1px solid rgba(184,154,100,.5);box-shadow:0 18px 45px rgba(0,0,0,.38);transform-style:preserve-3d;z-index:25;pointer-events:none;will-change:transform}
.cute-memory img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.94) contrast(1.02)}
.memory.illustrated{background:#f4ead8;border-color:rgba(184,154,100,.45)}
.memory.illustrated img{object-fit:contain;background:#f4ead8;filter:saturate(.96) contrast(1.02);padding:0}
.memory.illustrated.comic img{object-fit:contain}
.memory.illustrated:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.13) 50%,transparent 75%);transform:translateX(-110%);animation:illustrationShimmer 3.2s ease-in-out infinite;z-index:3}
@keyframes illustrationShimmer{0%,55%{transform:translateX(-110%)}75%,100%{transform:translateX(110%)}}
.cute-memory span{position:absolute;z-index:2;bottom:8px;left:0;right:0;text-align:center;font:700 7px 'DM Sans';letter-spacing:3px;color:#5f513f}
.cute-memory-one{margin-left:-430px;margin-top:-185px;transform:rotate(-10deg) translateZ(90px)}
.cute-memory-two{margin-left:315px;margin-top:155px;border-radius:55px;padding:6px;overflow:hidden;transform:rotate(9deg) translateZ(50px)}
.cute-memory-two img{border-radius:50px}
.cute-memory-two span{bottom:15px;color:#fff;text-shadow:0 1px 8px #000}
.cute-memory-three{margin-left:330px;margin-top:-245px;width:92px;aspect-ratio:1/1;transform:rotate(13deg) translateZ(110px);border-radius:50%;padding:5px}
.cute-memory-three img{border-radius:50%;clip-path:circle(50% at 50% 50%)}
.cute-memory-three span{bottom:18px;color:#fff;text-shadow:0 1px 8px #000;letter-spacing:2px}
@media(max-width:700px){.cute-memory{width:78px}.cute-memory-one{margin-left:-205px;margin-top:-155px}.cute-memory-two{margin-left:145px;margin-top:135px}.cute-memory-three{margin-left:155px;margin-top:-185px;width:68px}}


/* V9 — page-level scroll cue: intentionally outside the 3D photo stage. */
.gallery-intro { position: relative; min-height: 82vh; }
.page-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #cfc2ae;
  text-decoration: none;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 8;
}
.page-scroll-indicator i {
  width: 1px; height: 48px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: pageScrollLine 1.7s ease-in-out infinite;
}
.page-scroll-indicator b {
  font: 400 17px/1 'DM Sans';
  color: var(--gold);
  animation: pageScrollArrow 1.35s ease-in-out infinite;
}
@keyframes pageScrollArrow { 0%,100% { transform: translateY(-3px); opacity:.55; } 50% { transform: translateY(5px); opacity:1; } }
@keyframes pageScrollLine { 0%,100% { transform: scaleY(.55); opacity:.45; } 50% { transform: scaleY(1); opacity:1; } }
@media(max-width:700px){ .gallery-intro{min-height:78vh;} .page-scroll-indicator{bottom:3vh;} }

/* V10 — keep a second page-level scroll cue visible over the memory stage.
   It scrolls the document only; it does not interact with or control the 3D carousel. */
.stage-scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 4vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #cfc2ae;
  text-decoration: none;
  font-size: 8px;
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 35;
  pointer-events: auto;
}
.stage-scroll-indicator i {
  width: 1px;
  height: 48px;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: pageScrollLine 1.7s ease-in-out infinite;
}
.stage-scroll-indicator b {
  font: 400 17px/1 'DM Sans';
  color: var(--gold);
  animation: pageScrollArrow 1.35s ease-in-out infinite;
}
.stage-scroll-indicator:hover { color: #f2ead9; }
@media(max-width:700px){ .stage-scroll-indicator{bottom:3vh;} }

/* V11 — memory envelope: the animated illustration gently rises from a
   physical-looking envelope before settling back into the page. It lives in
   the intro area, above the gallery copy, and never controls the carousel. */
.memory-envelope{
  cursor:pointer;
  user-select:none;
  position:absolute;
  right:7vw;
  top:30%;
  width:min(430px,36vw);
  height:300px;
  margin:0;
  perspective:1000px;
  transform-style:preserve-3d;
  isolation:isolate;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.38));
}
.memory-envelope .envelope-shadow{
  position:absolute;
  left:10%; right:10%; bottom:0;
  height:30px;
  border-radius:50%;
  background:rgba(0,0,0,.45);
  filter:blur(16px);
  transform:translateY(12px);
}
.memory-envelope .envelope-letter{
  position:absolute;
  z-index:6;
  left:50%;
  bottom:43px;
  width:72%;
  height:190px;
  padding:7px;
  background:#f1e7d5;
  border:1px solid rgba(184,154,100,.48);
  box-shadow:0 18px 34px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.1) inset;
  transform:translateX(-50%) translateY(56px) rotate(-3deg);
  transform-origin:50% 100%;
  overflow:hidden;
  opacity:0;
}
.memory-envelope .envelope-letter img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 35%;
  filter:saturate(.92) contrast(1.03);
}
.memory-envelope .envelope-back,
.memory-envelope .envelope-front{
  position:absolute;
  left:0; right:0; bottom:0;
  height:186px;
  border:1px solid rgba(184,154,100,.34);
  background:linear-gradient(145deg,#d7c3a0,#a98d65 48%,#7d6549);
  box-shadow:0 20px 35px rgba(0,0,0,.28);
}
.memory-envelope .envelope-back{
  z-index:1;
  clip-path:polygon(0 0,50% 55%,100% 0,100% 100%,0 100%);
  background:linear-gradient(145deg,#d8c7aa,#b3976d 50%,#8b7252);
}
.memory-envelope .envelope-front{
  z-index:4;
  clip-path:polygon(0 0,50% 48%,100% 0,100% 100%,0 100%);
  background:linear-gradient(155deg,#c9b28b,#a98b62 55%,#866c4e);
}
.memory-envelope .envelope-flap{
  position:absolute;
  z-index:5;
  left:0; right:0; top:65px;
  height:120px;
  transform-origin:50% 0;
  transform:perspective(700px) rotateX(0deg);
  clip-path:polygon(0 0,50% 88%,100% 0);
  background:linear-gradient(160deg,#e0cfb1,#b89b6e 52%,#8e7454);
  border-top:1px solid rgba(255,255,255,.18);
  backface-visibility:hidden;
}
.memory-envelope .envelope-seal{
  position:absolute;
  z-index:7;
  left:50%; top:175px;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#d0b37a,#9a7845 70%);
  border:1px solid rgba(244,231,205,.42);
  box-shadow:0 5px 18px rgba(0,0,0,.3),0 0 0 4px rgba(184,154,100,.08);
  color:#2b2118;
  font:500 10px 'Cormorant Garamond';
  letter-spacing:-1px;
}
.memory-envelope .envelope-seal span{color:#f1e7d5;font-size:8px}
.memory-envelope:after{
  content:'';
  position:absolute;
  z-index:8;
  inset:0;
  pointer-events:none;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.035) inset;
}
.gallery-intro>.memory-envelope + .body{margin-top:0; position:absolute; right:7vw; top:76%; width:min(510px,36vw); z-index:10}

@keyframes envelopeBreath{
  0%,100%{transform:translateX(-50%) translateY(0) rotate(-3deg)}
  50%{transform:translateX(-50%) translateY(-5px) rotate(-2deg)}
}
@keyframes envelopeShadowBreath{
  0%,100%{transform:translateY(12px) scaleX(1);opacity:.42}
  50%{transform:translateY(12px) scaleX(.9);opacity:.32}
}
.memory-envelope.is-open .envelope-letter{
  animation:envelopeBreath 4.8s ease-in-out 1.35s infinite;
}
.memory-envelope.is-open .envelope-shadow{
  animation:envelopeShadowBreath 4.8s ease-in-out 1.35s infinite;
}
.memory-envelope.is-closed .envelope-letter{opacity:0;}
.memory-envelope.is-closed .envelope-seal{opacity:1;}
.memory-envelope.is-closed .envelope-flap{transform:perspective(700px) rotateX(0deg);}
.memory-envelope:focus-visible{outline:1px solid rgba(184,154,100,.7);outline-offset:8px;}

@media(max-width:700px){
  .memory-envelope{position:relative;right:auto;top:auto;width:min(300px,82vw);height:220px;margin:38px auto 10px}
  .memory-envelope .envelope-letter{width:72%;height:150px;bottom:34px}
  .memory-envelope .envelope-back,.memory-envelope .envelope-front{height:150px}
  .memory-envelope .envelope-flap{top:66px;height:120px}
  .memory-envelope .envelope-seal{top:142px;width:38px;height:38px}
  .gallery-intro>.memory-envelope + .body{position:relative;right:auto;top:auto;width:auto;margin-top:16px}
}

/* V15 — elevated wedding stationery treatment for the memory envelope. */
.memory-envelope .envelope-back,
.memory-envelope .envelope-front,
.memory-envelope .envelope-flap{
  overflow:hidden;
}
.memory-envelope .envelope-back:before,
.memory-envelope .envelope-front:before{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(245,225,188,.36);
  box-shadow:0 0 0 1px rgba(74,48,26,.16) inset;
  pointer-events:none;
}
.memory-envelope .envelope-back:after,
.memory-envelope .envelope-front:after{
  content:"";
  position:absolute;
  inset:20px;
  border:1px solid rgba(91,62,35,.2);
  pointer-events:none;
}
.memory-envelope .envelope-inner-border{display:none}
.memory-envelope .envelope-front{
  background:
    radial-gradient(circle at 50% 38%,rgba(255,244,218,.14),transparent 42%),
    linear-gradient(155deg,#d8c19a 0%,#b49364 52%,#806444 100%);
}
.memory-envelope .envelope-front:before{
  border-color:rgba(255,235,199,.52);
}
.memory-envelope .envelope-front:after{
  inset:19px;
  border-color:rgba(74,48,26,.27);
}
.memory-envelope .envelope-back{
  background:
    radial-gradient(circle at 50% 20%,rgba(255,248,226,.16),transparent 35%),
    linear-gradient(145deg,#e1cfad,#b99b6e 50%,#8c704f);
}
.memory-envelope .envelope-flap{
  background:
    linear-gradient(160deg,#e7d4b3 0%,#c0a171 50%,#967953 100%);
  box-shadow:0 5px 18px rgba(51,31,15,.18) inset;
}
.memory-envelope .envelope-flap:after{
  content:"";
  position:absolute;
  left:15%; right:15%; top:13px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,244,215,.58),transparent);
}
.flap-liner{
  position:absolute;
  left:50%; top:9px;
  width:66%; height:66%;
  transform:translateX(-50%);
  background:linear-gradient(145deg,#6d4b35,#8d6347 52%,#5e4030);
  clip-path:polygon(50% 100%,0 0,100% 0);
  opacity:.86;
}
.flap-liner:after{
  content:"";
  position:absolute;
  inset:10px 18px 18px;
  border:1px solid rgba(227,196,146,.35);
  clip-path:polygon(50% 100%,0 0,100% 0);
}
.flap-ornament{
  position:absolute;
  z-index:2;
  left:50%; top:34px;
  transform:translateX(-50%);
  color:rgba(247,225,184,.82);
  font:500 11px/1 'Cormorant Garamond',serif;
  letter-spacing:4px;
  text-shadow:0 1px 4px rgba(38,20,10,.25);
  white-space:nowrap;
}
.flap-ornament b{font-size:13px;color:#f0d092;font-weight:500}
.envelope-ribbon{position:absolute;z-index:1;display:block;pointer-events:none}
.ribbon-v{left:50%;top:0;bottom:0;width:24px;transform:translateX(-50%);background:linear-gradient(90deg,rgba(92,58,31,.04),rgba(246,219,167,.2),rgba(92,58,31,.04));border-left:1px solid rgba(255,239,204,.14);border-right:1px solid rgba(88,53,27,.14)}
.ribbon-h{left:0;right:0;top:50%;height:18px;transform:translateY(-50%);background:linear-gradient(180deg,rgba(245,220,177,.02),rgba(245,220,177,.14),rgba(86,51,27,.06));border-top:1px solid rgba(255,239,204,.12);border-bottom:1px solid rgba(88,53,27,.1)}
.envelope-flower{
  position:absolute;z-index:3;width:31px;height:31px;border-radius:50%;
  border:1px solid rgba(247,224,180,.48);
  opacity:.8;
}
.envelope-flower:before,.envelope-flower:after{
  content:"";position:absolute;inset:5px;border:1px solid rgba(247,224,180,.38);border-radius:50%;transform:rotate(45deg)
}
.envelope-flower:after{transform:rotate(-45deg)}
.flower-left{left:24px;bottom:22px}.flower-right{right:24px;bottom:22px}
.flower-left:before,.flower-left:after{box-shadow:0 0 0 7px rgba(247,224,180,.05)}
.flower-right:before,.flower-right:after{box-shadow:0 0 0 7px rgba(247,224,180,.05)}
.envelope-seal{
  background:radial-gradient(circle at 35% 28%,#ead39e 0%,#b98e4e 48%,#79542f 100%);
  border:1px solid rgba(255,238,205,.7);
  box-shadow:0 6px 20px rgba(0,0,0,.32),0 0 0 5px rgba(184,154,100,.1),inset 0 1px 2px rgba(255,255,255,.35);
}
.envelope-seal:before,.envelope-seal:after{
  content:"";position:absolute;inset:5px;border:1px solid rgba(75,44,22,.38);border-radius:50%;pointer-events:none
}
.envelope-seal:after{inset:8px;border-color:rgba(255,232,190,.38)}
.seal-ring{position:relative;z-index:2;color:#3c2818;font:500 9px/1 'Cormorant Garamond',serif;letter-spacing:1px}
.seal-ring b{color:#f5e6c5;font-size:10px}
@media(max-width:700px){
  .flap-ornament{top:29px;font-size:9px;letter-spacing:3px}
  .envelope-flower{width:25px;height:25px}.flower-left{left:18px;bottom:18px}.flower-right{right:18px;bottom:18px}
  .ribbon-v{width:18px}.ribbon-h{height:14px}
}


/* V21 — landing page is the access doorway; the story lives in a preloaded frame. */
.landing-shell{overflow:hidden;height:100vh}
.landing-shell .landing-page{height:100vh;overflow:hidden}
.landing-shell .landing-hero{height:100vh;min-height:720px}
.landing-shell .landing-progress{position:fixed;left:0;top:0;width:100%;height:2px;background:transparent;z-index:1000;pointer-events:none}
.landing-shell .landing-progress span{display:block;width:100%;height:100%;background:var(--gold);opacity:.8}
.story-frame-wrap{position:fixed;inset:0;z-index:900;background:#0c0b09;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .01s linear,visibility 0s linear .01s}
.story-frame-wrap.is-visible{visibility:visible;opacity:1;pointer-events:auto;transition:none}
.story-frame-wrap iframe{display:block;width:100%;height:100%;border:0;background:#0c0b09}
.landing-page{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.landing-page.landing-exit{opacity:0;transform:scale(1.012);pointer-events:none}
.menu-panel{z-index:1200}
/* V29 — menu must work even when GSAP/CDN is unavailable. */
.menu-panel{transform:translateY(-100%);visibility:hidden;pointer-events:none;transition:transform .9s cubic-bezier(.16,1,.3,1),visibility 0s linear .9s;}
.menu-panel.is-open{transform:translateY(0)!important;visibility:visible;pointer-events:auto;transition:transform .9s cubic-bezier(.16,1,.3,1),visibility 0s;}
.menu-panel.is-open .menu-links a{opacity:1;}
.menu-links button{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:12px 0;background:none;border:0;color:inherit;font:inherit;text-align:left;cursor:pointer}
.menu-links button small{margin-left:auto}
@media(max-width:700px){.landing-shell .landing-hero{min-height:680px}.story-frame-wrap{inset:0}}


/* V60 — story menu redesigned as a quiet editorial book / table of contents. */
.menu-panel{
  background:rgba(10,9,8,.96)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.menu-book{
  position:relative;
  width:min(780px,82vw);
  margin:0 auto;
  padding:clamp(54px,8vh,92px) clamp(42px,7vw,88px) clamp(42px,6vh,68px);
  background:
    linear-gradient(90deg,rgba(184,154,100,.035),transparent 5%,transparent 95%,rgba(184,154,100,.035)),
    linear-gradient(145deg,rgba(236,225,204,.055),rgba(184,154,100,.018));
  border:1px solid rgba(184,154,100,.26);
  box-shadow:0 40px 110px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.015);
  overflow:hidden;
}
.menu-book:before,.menu-book:after{
  content:'';position:absolute;inset:15px;border:1px solid rgba(184,154,100,.09);pointer-events:none;
}
.menu-book:after{inset:23px;border-color:rgba(184,154,100,.045);}
.menu-book__spine{
  position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,rgba(184,154,100,.12) 12%,rgba(184,154,100,.08) 88%,transparent);
  opacity:.45;pointer-events:none;
}
.menu-book__header,.menu-book__footer{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  gap:18px;font:7px/1 'DM Sans';letter-spacing:3.2px;text-transform:uppercase;color:#9b8e7a;
}
.menu-book__header i{height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(184,154,100,.34),transparent);}
.menu-links{
  position:relative;z-index:1;display:flex;flex-direction:column;margin:clamp(36px,6vh,62px) 0;
}
.menu-links a{
  display:grid;grid-template-columns:44px 1fr;align-items:center;gap:18px;
  min-height:86px;padding:13px 4px;border-top:1px solid rgba(184,154,100,.13);
  color:#e8dfd0;text-decoration:none;transition:color .35s ease,background .35s ease,padding .35s ease;
}
.menu-links a:last-child{border-bottom:1px solid rgba(184,154,100,.13);}
.menu-links a:hover{color:#fff4df;background:linear-gradient(90deg,rgba(184,154,100,.08),transparent);padding-left:12px;}
.menu-link-number{font:7px/1 'DM Sans';letter-spacing:2.5px;color:#806f58;align-self:start;padding-top:10px;}
.menu-link-title{font:500 clamp(27px,3.5vw,43px)/1.02 'Cormorant Garamond';letter-spacing:-.6px;}
.menu-link-title em{font:400 .82em 'Great Vibes';color:var(--gold);letter-spacing:0;}
.menu-link-title--caps{font:500 clamp(16px,2vw,24px)/1.2 'DM Sans';letter-spacing:3px;color:#d5c5ab;}
.menu-book__footer{color:#6e6355;margin-top:8px;letter-spacing:2.5px;}
@media(max-width:700px){
  .menu-book{width:calc(100vw - 34px);padding:42px 28px 34px;}
  .menu-book:before{inset:11px}.menu-book:after{inset:17px}.menu-book__spine{left:50%;opacity:.2}
  .menu-links{margin:34px 0 38px}.menu-links a{grid-template-columns:31px 1fr;gap:10px;min-height:72px;padding:10px 0;}
  .menu-link-title{font-size:28px}.menu-link-title--caps{font-size:13px;letter-spacing:2px}.menu-book__header,.menu-book__footer{font-size:6px;letter-spacing:2px;}
}

/* V22 — family letters section */
.letters{min-height:120vh;position:relative;padding:22vh 10vw;background:#0d0c0a;overflow:hidden}
.letters-inner{max-width:980px;margin:0 auto}
.letters-title{font:500 clamp(70px,10vw,145px)/.78 'Cormorant Garamond';letter-spacing:-5px;margin:0 0 7vh}
.letters-title em{font:400 .7em 'Great Vibes';color:var(--gold);letter-spacing:0}
.letter-card{max-width:760px;margin:0 auto;padding:44px 52px 48px;background:linear-gradient(145deg,rgba(232,220,196,.075),rgba(184,154,100,.025));border:1px solid rgba(184,154,100,.25);position:relative;box-shadow:0 30px 90px rgba(0,0,0,.28)}
.letter-card:before{content:'';position:absolute;inset:12px;border:1px solid rgba(184,154,100,.10);pointer-events:none}
.letter-card-top{display:flex;justify-content:space-between;gap:20px;font-size:8px;letter-spacing:3px;color:#a99b86;position:relative}
.letter-rule{height:1px;background:linear-gradient(90deg,var(--gold),transparent);margin:22px 0 30px;opacity:.55}
.letter-body{max-width:650px;margin:0 0 18px;font:300 16px/1.85 'Cormorant Garamond';color:#ddd2bf;position:relative}
.letter-signoff{margin-top:30px;font:400 31px 'Great Vibes';color:var(--gold);position:relative}
.letter-placeholder{margin:40px auto 0;text-align:center;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#625b51}
@media(max-width:700px){.letters{padding:20vh 9vw}.letter-card{padding:34px 28px 38px}.letter-card-top{flex-direction:column;gap:10px}.letter-body{font-size:15px}.letters-title{letter-spacing:-3px}}

/* V27 — cinematic story-entry sequence without numeric loading counter. */
.story-entry-loader{
  position:fixed;inset:0;z-index:1300;display:grid;place-items:center;
  background:#0c0b09;opacity:0;visibility:hidden;pointer-events:none;overflow:hidden;
}
.story-entry-loader.is-active{opacity:1;visibility:visible;pointer-events:auto}
.story-entry-loader.is-leaving{opacity:0;visibility:hidden;transition:opacity .22s ease}
.story-entry-loader__content{
  width:min(330px,72vw);display:flex;flex-direction:column;align-items:center;
  text-align:center;transform:translateY(-1vh);
}
.story-entry-loader__mark{
  margin-bottom:34px;font:500 clamp(34px,5vw,64px)/1 'Cormorant Garamond';
  letter-spacing:7px;color:#e9decb;
}
.story-entry-loader__mark span{
  font:400 .6em 'Great Vibes';color:var(--gold);letter-spacing:0;margin:0 4px;
}
.story-entry-loader__line{
  width:min(330px,72vw);height:1px;background:rgba(184,154,100,.18);
  overflow:hidden;position:relative;
}
.story-entry-loader__line:before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(184,154,100,.12),transparent);
}
.story-entry-loader__line i{
  display:block;width:100%;height:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;will-change:transform;
}
.story-entry-loader__text{
  margin-top:16px;font:8px/1 'DM Sans';letter-spacing:4px;
  text-transform:uppercase;color:#9e9382;
}
@media(max-width:700px){
  .story-entry-loader__content{width:74vw}
  .story-entry-loader__line{width:100%}
  .story-entry-loader__mark{margin-bottom:30px}
    .story-entry-loader__text{letter-spacing:3px}
}

/* V28 — shared music controls. The audio lives in the landing page so it never restarts while the story iframe changes. */
.nav-actions{display:flex;align-items:center;gap:12px}
.music-toggle{height:38px;min-width:74px;padding:0 12px;border:1px solid var(--line);background:rgba(11,10,8,.45);border-radius:999px;color:var(--cream);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;backdrop-filter:blur(8px);transition:border-color .3s ease,background .3s ease,transform .3s ease}
.music-toggle:hover{border-color:rgba(216,190,143,.75);background:rgba(184,154,100,.07);transform:translateY(-1px)}
.music-label{font-size:7px;letter-spacing:2px;color:#a99b86}
.music-bars{height:14px;display:flex;align-items:flex-end;gap:2px}
.music-bars i{display:block;width:2px;height:7px;background:var(--gold);transform-origin:bottom;animation:musicBar .9s ease-in-out infinite}
.music-bars i:nth-child(2){height:12px;animation-delay:.18s}.music-bars i:nth-child(3){height:9px;animation-delay:.36s}
.music-toggle:not(.is-playing) .music-bars i{animation-play-state:paused;height:5px;opacity:.55}
@keyframes musicBar{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.music-panel{position:fixed;z-index:1250;top:74px;right:5vw;width:min(370px,calc(100vw - 36px));padding:1px;background:linear-gradient(145deg,rgba(210,176,115,.42),rgba(184,154,100,.1));border-radius:3px;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px) scale(.98);transition:opacity .28s ease,transform .28s ease,visibility .28s ease}
.music-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.music-panel__inner{padding:24px;background:rgba(14,12,10,.97);box-shadow:0 24px 70px rgba(0,0,0,.5);position:relative}
.music-panel__top{display:flex;justify-content:space-between;align-items:center;color:var(--gold);font-size:7px;letter-spacing:3px}
.music-panel__top button{border:0;background:none;color:#a99b86;font-size:25px;font-weight:200;cursor:pointer;line-height:1}
.music-panel__title{font:500 29px/1 'Cormorant Garamond';color:var(--cream);margin:20px 0 9px}
.music-now{font-size:9px;letter-spacing:2px;color:#8f8473;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid rgba(184,154,100,.16);padding-bottom:18px}
.music-now-wrap{margin-top:18px;padding:18px 16px 15px;border:1px solid rgba(184,154,100,.18);background:linear-gradient(145deg,rgba(184,154,100,.075),rgba(255,255,255,.015));box-shadow:inset 0 1px rgba(255,255,255,.025)}
.music-now-kicker{font-size:7px;letter-spacing:3px;color:var(--gold);margin-bottom:8px}
.music-now-wrap .music-now{font:500 22px/1.08 'Cormorant Garamond';letter-spacing:.3px;color:var(--cream);border:0;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.music-seek-wrap{margin-top:17px}.music-seek{appearance:none;width:100%;height:3px;border-radius:999px;background:rgba(216,190,143,.18);outline:none;cursor:pointer;display:block}.music-seek::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #17130f;box-shadow:0 0 0 1px rgba(216,190,143,.35);cursor:pointer}.music-seek::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:var(--gold);border:2px solid #17130f;cursor:pointer}.music-time{display:flex;justify-content:space-between;margin-top:7px;font-size:7px;letter-spacing:1px;color:#817667}
.music-transport{display:grid;grid-template-columns:42px 1fr 42px;gap:8px;margin-top:14px}.music-transport-btn,.music-transport-main{border:1px solid rgba(184,154,100,.25);background:rgba(184,154,100,.04);color:#d8ccb8;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}.music-transport-btn{font:300 27px/1 'Cormorant Garamond';height:40px}.music-transport-main{height:40px;display:flex;align-items:center;justify-content:center;gap:8px;font:8px 'DM Sans';letter-spacing:1.5px;text-transform:uppercase}.music-transport-btn:hover,.music-transport-main:hover{background:rgba(184,154,100,.11);border-color:rgba(216,190,143,.62);transform:translateY(-1px)}
.music-list-label{margin-top:19px;font-size:7px;letter-spacing:3px;color:#756b5e}
.music-controls--single{grid-template-columns:1fr}

.music-playlist{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:220px;overflow:auto;padding-right:2px}
.music-song-row{display:flex;align-items:stretch;border:1px solid rgba(184,154,100,.16);background:rgba(184,154,100,.025);min-height:42px;transition:border-color .2s ease,background .2s ease}
.music-song-row.is-selected{border-color:rgba(184,154,100,.5);background:rgba(184,154,100,.08)}
.music-song-select{flex:1;min-width:0;border:0;background:none;color:#cfc4b2;display:flex;align-items:center;gap:10px;padding:8px 10px;text-align:left;cursor:pointer;font:8px 'DM Sans';letter-spacing:1.1px;text-transform:uppercase}
.music-song-index{color:var(--gold);font-size:7px;letter-spacing:1.5px;flex:0 0 18px}
.music-song-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.music-song-remove{width:38px;border:0;border-left:1px solid rgba(184,154,100,.12);background:none;color:#8f8473;font-size:18px;font-weight:200;cursor:pointer;transition:color .2s ease,background .2s ease}
.music-song-remove:hover{color:var(--cream);background:rgba(184,154,100,.08)}
.music-playlist::-webkit-scrollbar{width:3px}.music-playlist::-webkit-scrollbar-thumb{background:rgba(184,154,100,.28)}
.music-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.music-action{min-height:48px;border:1px solid rgba(184,154,100,.28);background:rgba(184,154,100,.045);color:#ddd2bf;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;font:8px 'DM Sans';letter-spacing:1.2px;text-transform:uppercase;cursor:pointer;transition:background .25s ease,border-color .25s ease,transform .25s ease}
.music-action:hover{background:rgba(184,154,100,.1);border-color:rgba(216,190,143,.7);transform:translateY(-1px)}
.music-action-icon{font-size:11px;color:var(--gold);min-width:13px;text-align:center}
.music-upload{position:relative}
.music-hint{margin-top:14px;font-size:8px;line-height:1.6;color:#706759;text-align:center}
@media(max-width:700px){.nav-actions{gap:7px}.music-toggle{min-width:62px;padding:0 9px}.music-label{font-size:6px;letter-spacing:1.5px}.music-panel{top:62px;right:18px;width:calc(100vw - 36px)}.music-controls{grid-template-columns:1fr}.music-panel__title{font-size:26px}.music-playlist{max-height:200px}}


/* V34 — the two lives that existed before they became one story. */
.before-chapter{
  position:relative;
  min-height:170vh;
  padding:18vh 7vw 16vh;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(184,154,100,.09), transparent 38%),
    #0d0c0a;
}
.before-chapter:before{
  content:'';
  position:absolute;
  inset:5vh 4vw;
  border:1px solid rgba(184,154,100,.10);
  pointer-events:none;
}
.before-todi{
  /* Keep Maja and Todi chapters on the exact same base tone. */
  background:
    radial-gradient(circle at 50% 35%, rgba(184,154,100,.09), transparent 38%),
    #0d0c0a;
}
.before-chapter__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:relative;
  margin-bottom:11vh;
  color:#766b5a;
  font-size:8px;
  letter-spacing:4px;
}
.before-index{color:var(--gold)}
.before-chapter__intro{
  position:relative;
  z-index:2;
  max-width:1180px;
  margin:0 auto 12vh;
  display:grid;
  grid-template-columns:1.1fr .65fr;
  align-items:end;
  gap:10vw;
}
.before-chapter__intro--reverse{
  grid-template-columns:.65fr 1.1fr;
}
.before-chapter__intro--reverse .before-copy{order:1}
.before-chapter__intro--reverse > div{order:2}
.before-eyebrow{
  margin:0 0 24px;
  color:#aa8b59;
  font:500 8px/1 'DM Sans';
  letter-spacing:5px;
}
.before-title{
  margin:0;
  font:500 clamp(78px,11vw,165px)/.75 'Cormorant Garamond';
  letter-spacing:-6px;
}
.before-title em{
  font:400 .72em 'Great Vibes';
  color:var(--gold);
  letter-spacing:0;
}
.before-copy{
  max-width:470px;
  margin:0 0 7px auto;
  color:#a69a87;
  font:300 17px/1.8 'Cormorant Garamond';
}
.before-maja-grid{
  position:relative;
  max-width:1240px;
  min-height:1050px;
  margin:0 auto;
}
.before-photo{
  position:absolute;
  margin:0;
  background:#171511;
  border:1px solid rgba(184,154,100,.24);
  box-shadow:0 35px 90px rgba(0,0,0,.46);
  overflow:hidden;
}
.before-photo:after{
  content:'';
  position:absolute;
  inset:12px;
  border:1px solid rgba(232,220,196,.17);
  pointer-events:none;
}
.before-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:saturate(.9) contrast(1.03);
  transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter 1.2s ease;
}
.before-photo:hover img{transform:scale(1.045);filter:saturate(1) contrast(1.04)}
.before-photo figcaption{
  position:absolute;
  z-index:3;
  left:22px;
  right:22px;
  bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:15px;
  color:#eee4d2;
  text-shadow:0 2px 18px #000;
}
.before-photo figcaption span{
  font:500 7px 'DM Sans';
  letter-spacing:3px;
  color:#c3a16c;
}
.before-photo figcaption b{
  font:400 15px 'Cormorant Garamond';
  letter-spacing:.4px;
}
.before-photo--tall{width:270px;height:420px;left:2%;top:2%}
.before-photo--wide{width:460px;height:310px;right:2%;top:9%}
.before-photo--small{width:300px;height:390px;left:27%;top:39%}
.before-photo--offset{right:17%;left:auto;top:57%}
.before-photo--wide:nth-of-type(5){left:4%;right:auto;top:72%;width:450px}
.before-photo--tall:nth-of-type(6){right:1%;left:auto;top:76%;width:280px;height:400px}

.before-todi-grid{
  position:relative;
  max-width:1180px;
  min-height:920px;
  margin:0 auto;
}
.before-todi .before-photo--portrait{
  width:285px;height:420px;left:4%;top:5%;
}
.before-todi .before-photo--landscape{
  width:470px;height:315px;right:3%;top:12%;
}
.before-todi .before-photo--low{
  left:25%;top:48%;width:300px;height:410px;
}
.before-todi .before-photo--video{
  right:3%;top:56%;left:auto;width:470px;height:265px;
}
.before-photo video{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.88) contrast(1.04);
}
.before-photo:hover video{filter:saturate(1) contrast(1.05)}
.before-transition{
  height:38vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:18px;
  background:#0d0c0a;
  color:#7b705e;
  font:500 8px 'DM Sans';
  letter-spacing:5px;
}
.before-transition i{
  width:1px;
  height:70px;
  background:linear-gradient(#b89a64,transparent);
}
.before-transition b{
  color:#b89a64;
  font:400 27px 'Cormorant Garamond';
  letter-spacing:2px;
}

@media(max-width:800px){
  .before-chapter{min-height:auto;padding:15vh 7vw 13vh}
  .before-chapter:before{inset:3vh 4vw}
  .before-chapter__top{margin-bottom:8vh}
  .before-chapter__intro,
  .before-chapter__intro--reverse{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:35px;
    margin-bottom:8vh;
  }
  .before-chapter__intro--reverse .before-copy,
  .before-chapter__intro--reverse > div{order:initial}
  .before-copy{margin:0;max-width:100%;font-size:16px}
  .before-title{letter-spacing:-4px}
  .before-maja-grid,
  .before-todi-grid{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .before-photo,
  .before-photo--tall,
  .before-photo--wide,
  .before-photo--small,
  .before-photo--offset,
  .before-photo--wide:nth-of-type(5),
  .before-photo--tall:nth-of-type(6),
  .before-todi .before-photo--portrait,
  .before-todi .before-photo--landscape,
  .before-todi .before-photo--low,
  .before-todi .before-photo--video{
    position:relative;left:auto;right:auto;top:auto;width:auto;height:auto;
    aspect-ratio:3/4;
  }
  .before-photo--wide,
  .before-photo--wide:nth-of-type(5),
  .before-todi .before-photo--landscape,
  .before-todi .before-photo--video{grid-column:1/-1;aspect-ratio:16/10}
  .before-photo figcaption{left:15px;right:15px;bottom:15px}
  .before-photo figcaption b{font-size:14px}
}


/* Letter family / friends group dividers */
.letter-group-heading{display:flex;align-items:center;gap:22px;max-width:760px;margin:8vh auto 3vh;color:#a99b86;font-size:8px;letter-spacing:4px}
.letter-group-heading i{height:1px;flex:1;background:linear-gradient(90deg,rgba(184,154,100,.32),transparent)}
.letter-group-heading:first-of-type{margin-top:1vh}
@media(max-width:700px){.letter-group-heading{gap:12px;font-size:7px;letter-spacing:2.5px;line-height:1.5}.letter-group-heading i{min-width:25px}}


/* V62 — keep the parent music controls above the cinematic story iframe.
   The iframe owns the story animation; the parent owns audio and its controls. */
.story-frame-wrap{z-index:900}
.landing-nav{z-index:1300;pointer-events:none}
.landing-nav > *{pointer-events:auto}
.landing-nav .music-toggle{z-index:1305}
.music-panel{z-index:1310}
.story-active .landing-nav .landing-menu{display:none}
/* Fix: the story is rendered inside its own full-screen iframe with its own header.
   Hide the landing header branding while the story is active so the T&M mark
   cannot appear duplicated/split across the two layers during scrolling. */
.story-active .landing-nav .monogram,
.story-active .landing-nav .nav-center{display:none!important}
/* V61 — music controls are owned by the parent page so they remain interactive
   even if the long cinematic story iframe becomes busy. */
.landing-nav .music-toggle{
  position:fixed;
  top:24px;
  right:calc(5vw + 50px);
  z-index:1305;
}
.landing-nav .music-toggle{
  display:flex;
}
@media(max-width:700px){
  .landing-nav .music-toggle{top:18px;right:62px}
}

/* Header overlap correction — keeps navigation and section labels in separate layers. */
.nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:86px;
  z-index:1000;
}
.nav-center{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:max-content;
  max-width:42vw;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.nav-actions{
  position:relative;
  z-index:2;
}
.monogram{
  position:relative;
  z-index:2;
}
.gallery{
  padding-top:max(18vh,120px);
}
.gallery .section-tag{
  top:clamp(105px,16vh,170px);
  left:5vw;
  z-index:6;
  white-space:nowrap;
}
@media (max-width:699px){
  .nav{height:70px;padding:0 18px}
  .nav-center{
    max-width:48vw;
    font-size:7px;
    letter-spacing:2.5px;
  }
  .gallery{
    padding-top:120px;
  }
  .gallery .section-tag{
    top:92px;
  }
}

/* v65 correction — menu naming + non-overlapping back control */
.menu-book__header{display:flex;justify-content:center;align-items:center;min-height:28px;}
.menu-book__header span{display:block;width:100%;text-align:center;}
.menu-book__header i{display:none!important;}
.story-back{position:fixed;left:5vw;top:96px;z-index:1301;display:inline-flex;align-items:center;gap:9px;color:var(--cream);text-decoration:none;font:500 8px/1 'DM Sans',sans-serif;letter-spacing:3px;opacity:.72;transition:opacity .25s ease,transform .25s ease;}
.story-back:hover{opacity:1;transform:translateX(-3px);}
.story-back:first-letter{font-size:15px;}
@media(max-width:700px){.story-back{left:24px;top:78px;font-size:7px;letter-spacing:2px;}}


/* v65.1 — clean header + visible story dropdown */
.nav,
.landing-nav{
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
}
.landing-nav::before,
.landing-nav::after,
.nav::before,
.nav::after{
  display:none !important;
  content:none !important;
}
.memories-book-menu{
  top:88px !important;
  z-index:200000 !important;
  box-shadow:0 18px 45px rgba(0,0,0,.18) !important;
}

/* v67 — replace the old envelope keepsake with a refined editorial wedding card. */
.memory-card{
  position:absolute;
  right:7vw;
  top:28%;
  width:min(430px,36vw);
  min-height:430px;
  margin:0;
  perspective:1200px;
  z-index:12;
}
.memory-card__glow{
  position:absolute;
  inset:10% 5% 0;
  border-radius:28px;
  background:radial-gradient(circle,rgba(184,154,100,.18),transparent 68%);
  filter:blur(24px);
  transform:translateY(20px);
  pointer-events:none;
}
.memory-card__paper{
  position:relative;
  min-height:430px;
  padding:18px;
  border:1px solid rgba(184,154,100,.42);
  border-radius:10px;
  background:linear-gradient(145deg,rgba(34,29,23,.98),rgba(17,15,12,.99));
  box-shadow:0 35px 80px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.025) inset;
  overflow:hidden;
  transform:rotate(-1.2deg);
  transition:transform .55s cubic-bezier(.2,.7,.2,1),border-color .45s ease,box-shadow .45s ease;
}
.memory-card__paper:before{
  content:'';position:absolute;inset:9px;border:1px solid rgba(184,154,100,.16);border-radius:6px;pointer-events:none;
}
.memory-card__paper:after{
  content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 28%,transparent 72%,rgba(184,154,100,.035));
}
.memory-card:hover .memory-card__paper{transform:rotate(0) translateY(-5px);border-color:rgba(216,190,143,.68);box-shadow:0 42px 90px rgba(0,0,0,.55),0 0 45px rgba(184,154,100,.08)}
.memory-card__topline{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:2px 5px 14px;color:#927d5b;font:500 7px 'DM Sans';letter-spacing:3px;text-transform:uppercase}
.memory-card__image-wrap{position:relative;z-index:1;height:245px;padding:7px;background:#e9dfcf;border:1px solid rgba(184,154,100,.46);box-shadow:0 18px 38px rgba(0,0,0,.35);overflow:hidden}
.memory-card__image-wrap:before{content:'';position:absolute;inset:12px;border:1px solid rgba(117,92,57,.28);z-index:2;pointer-events:none}
.memory-card__image-wrap img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.92) contrast(1.02)}
.memory-card__slideshow{isolation:isolate}
.memory-card__slide{position:absolute;inset:7px;opacity:0;visibility:hidden;transition:opacity 1.35s ease,visibility 0s linear 1.35s;z-index:1}
.memory-card__slide.is-active{opacity:1;visibility:visible;transition:opacity 1.35s ease;z-index:2}
.memory-card__slide img,.memory-card__slide video{display:block;width:100%;height:100%;object-fit:cover;object-position:center 38%;filter:saturate(.92) contrast(1.02)}
.memory-card__progress{position:absolute;z-index:4;left:50%;bottom:10px;transform:translateX(-50%);display:flex;gap:5px;pointer-events:none}
.memory-card__progress i{display:block;width:22px;height:1px;background:rgba(255,255,255,.38);transition:background .6s ease,width .6s ease}
.memory-card__progress i.is-active{width:30px;background:#f2ead9}

.memory-card__caption{position:relative;z-index:2;text-align:center;padding:19px 10px 7px}
.memory-card__eyebrow{display:block;color:#b89a64;font:500 7px 'DM Sans';letter-spacing:3.5px;margin-bottom:8px}
.memory-card__caption strong{display:block;color:#f2ead9;font:500 31px/1 'Cormorant Garamond';letter-spacing:-.5px}
.memory-card__rule{display:block;width:44px;height:1px;margin:12px auto;background:linear-gradient(90deg,transparent,#b89a64,transparent)}
.memory-card__caption small{display:block;color:#938775;font:300 10px/1.45 'Cormorant Garamond';letter-spacing:.2px}
.gallery-intro>.memory-card + .body{margin-top:0;position:absolute;right:7vw;top:76%;width:min(510px,36vw);z-index:10}
@media(max-width:700px){
  .memory-card{position:relative;right:auto;top:auto;width:min(340px,82vw);min-height:0;margin:38px auto 10px}
  .memory-card__paper{min-height:390px}
  .memory-card__image-wrap{height:205px}
  .memory-card__caption strong{font-size:28px}
  .gallery-intro>.memory-card + .body{position:relative;right:auto;top:auto;width:auto;margin-top:16px}
}

/* v70 — editorial intro layout: keep the keepsake card and intro copy in
   separate columns so they can never overlap at desktop widths. */
@media (min-width: 701px){
  .gallery-intro{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,36vw);
    grid-template-rows:auto auto;
    grid-template-areas:
      "title card"
      "copy card";
    column-gap:7vw;
    align-items:center;
    min-height:82vh;
    padding-left:10vw;
    padding-right:7vw;
  }
  .gallery-intro > .section-tag{grid-area:tag;}
  .gallery-intro > div:not(.section-tag){grid-area:title; min-width:0;}
  .gallery-intro > .memory-card{
    grid-area:card;
    position:relative;
    right:auto;
    top:auto;
    width:100%;
    max-width:430px;
    min-height:0;
    margin:0 auto;
    align-self:center;
  }
  .gallery-intro > .memory-card + .body{
    grid-area:copy;
    position:relative;
    right:auto;
    top:auto;
    width:min(510px,100%);
    margin:20px 0 0;
    z-index:10;
    align-self:start;
  }
  .gallery-title{max-width:560px;}
}

@media (max-width:1100px) and (min-width:701px){
  .gallery-intro{column-gap:4vw;grid-template-columns:minmax(0,1fr) minmax(300px,40vw);}
  .memory-card__caption strong{font-size:28px;}
  .memory-card__image-wrap{height:215px;}
}

/* v73.1 — keep the memories section label in its own layout space. */
@media (min-width:701px){
  .gallery-intro{
    grid-template-rows:auto auto auto;
    grid-template-areas:
      "tag card"
      "title card"
      "copy card";
    align-items:center;
  }
  .gallery-intro > .section-tag{
    position:relative;
    top:auto;
    left:auto;
    grid-area:tag;
    justify-self:start;
    align-self:end;
    margin-bottom:clamp(18px,2.2vh,30px);
    white-space:nowrap;
    z-index:6;
  }
}
@media (max-width:700px){
  .gallery .section-tag{
    position:relative;
    top:auto;
    left:auto;
    margin:0 0 24px;
    white-space:nowrap;
    z-index:6;
  }
}

/* V81 — understated author credit placed directly beneath the keepsake image. */
.memory-card__credit{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:13px 10px 10px;
  text-align:center;
}
.memory-card__credit span{
  font:500 7px/1.1 'DM Sans',sans-serif;
  letter-spacing:3px;
  color:var(--cream);
}
.memory-card__credit small{
  font:400 6px/1.2 'DM Sans',sans-serif;
  letter-spacing:1.4px;
  color:#918674;
}
@media(max-width:700px){
  .memory-card__credit{padding:11px 8px 9px;gap:5px;}
  .memory-card__credit span{font-size:6.2px;letter-spacing:2.4px;}
  .memory-card__credit small{font-size:5.5px;letter-spacing:1px;}
}

/* V84 — iPhone 14 Pro mobile polish (393 × 852 reference)
   Mobile is treated as its own composition rather than a scaled desktop layout. */
@media (max-width:700px){
  :root{--mobile-gutter:20px;--mobile-wide-gutter:24px}
  html,body{width:100%;max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%;}
  body{font-size:14px}
  .cursor-glow{display:none}
  .grain{opacity:.032}

  /* Shared mobile header */
  .nav{height:64px;padding:calc(env(safe-area-inset-top) + 7px) 18px 7px;min-height:64px}
  .monogram{font-size:25px;letter-spacing:-1.5px}
  .monogram span{font-size:19px}
  .nav-center{display:block;left:50%;max-width:42vw;font-size:6px;letter-spacing:2px;line-height:1.2}
  .nav-actions{gap:6px}
  .menu{width:34px;height:34px}
  .music-toggle{height:34px;min-width:64px;padding:0 8px;gap:6px}
  .music-label{font-size:6px;letter-spacing:1.6px}
  .music-bars{height:12px}
  .story-back{top:76px;left:20px}

  /* Landing / entry screen */
  .landing-shell .landing-page,
  .landing-shell .landing-hero,
  .hero{height:100svh;min-height:0}
  .hero:after{inset:11vh 20px 9vh;border-radius:50%;transform:scaleY(.72)}
  .hero-sun{width:90vw;height:90vw}
  .ring-1{width:118vw;height:118vw}
  .ring-2{width:70vw;height:125vw}
  .hero-content{width:calc(100% - 40px);padding:0}
  .eyebrow{font-size:7px;letter-spacing:2.5px;margin-bottom:20px;line-height:1.5}
  .names{font-size:clamp(68px,21vw,86px);line-height:.72;letter-spacing:-4px}
  .names b{font-size:.32em;line-height:1.2}
  .landing-hero .hero-bottom{display:flex;flex-direction:column;align-items:center;gap:28px;margin-top:48px;text-align:center}
  .hero-bottom p{font-size:15px;line-height:1.3;text-align:center}
  .hero-bottom .side-note{display:none}
  .story-button{min-width:0;width:auto;max-width:100%;padding:14px 20px;font-size:8px;letter-spacing:2.4px}

  /* Full-screen story frame */
  .story-frame-wrap,.story-frame-wrap iframe{width:100vw;height:100svh;max-width:100vw}

  /* Story menu */
  .menu-panel{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
  .close-menu{top:calc(env(safe-area-inset-top) + 17px);right:17px;font-size:32px}
  .menu-book{width:calc(100vw - 28px);max-height:calc(100svh - 28px);overflow:auto;padding:38px 22px 28px}
  .menu-book:before{inset:9px}.menu-book:after{inset:14px}
  .menu-links{margin:25px 0 28px}
  .menu-links a{grid-template-columns:28px minmax(0,1fr);gap:8px;min-height:64px;padding:9px 0}
  .menu-link-number{font-size:6px;letter-spacing:1.8px;padding-top:7px}
  .menu-link-title{font-size:25px;line-height:1.02;letter-spacing:-.3px}
  .menu-link-title--caps{font-size:11px;letter-spacing:1.8px;line-height:1.3}
  .menu-book__header,.menu-book__footer{font-size:6px;letter-spacing:2.2px}

  /* Section rhythm */
  .section-tag{font-size:6px;letter-spacing:2.7px}
  .body{font-size:14px;line-height:1.8;margin-top:30px}
  .page-scroll-indicator,.stage-scroll-indicator{font-size:6px;letter-spacing:2px}

  /* Memories intro — compact, centered, no collisions */
  .gallery{min-height:auto;padding-top:102px;padding-bottom:0}
  .gallery .section-tag{margin:0 0 26px}
  .gallery-intro{padding:0 var(--mobile-wide-gutter);min-height:auto;display:flex;flex-direction:column;align-items:stretch}
  .gallery-intro > div:not(.section-tag){width:100%}
  .gallery-intro .eyebrow{margin-bottom:16px}
  .gallery-title{font-size:clamp(61px,17vw,72px);line-height:.78;letter-spacing:-3px}
  .gallery-intro>.memory-card{width:min(330px,calc(100vw - 48px));margin:42px auto 0;position:relative;right:auto;top:auto}
  .memory-card__paper{min-height:0;padding:13px;border-radius:9px}
  .memory-card__topline{padding:1px 4px 10px;font-size:5.5px;letter-spacing:2px}
  .memory-card__image-wrap{height:auto;aspect-ratio:1.43/1;padding:5px}
  .memory-card__image-wrap:before{inset:9px}
  .memory-card__caption{padding:13px 8px 5px}
  .memory-card__eyebrow{font-size:5.5px;letter-spacing:2.4px;margin-bottom:6px}
  .memory-card__caption strong{font-size:25px}
  .memory-card__rule{width:36px;margin:9px auto}
  .memory-card__caption small{font-size:9px}
  .memory-card__credit{padding:10px 5px 7px;gap:4px}
  .memory-card__credit span{font-size:5.8px;letter-spacing:2px}
  .memory-card__credit small{font-size:5.2px;letter-spacing:.8px}
  .gallery-intro>.memory-card + .body{position:relative;right:auto;top:auto;width:100%;margin:24px 0 0}
  .gallery-intro .page-scroll-indicator{position:relative;left:auto;right:auto;bottom:auto;margin:38px auto 42px}

  /* Memory carousel */
  .gallery-stage{height:108svh;min-height:720px;margin-top:0;overflow:hidden}
  .memory{width:min(76vw,300px);aspect-ratio:4/5}
  .photo-slot:before{inset:9px}
  .depth-word{font-size:35vw}
  .cute-memory-one{margin-left:-145px;margin-top:-145px}
  .cute-memory-two{margin-left:125px;margin-top:125px}
  .cute-memory-three{margin-left:132px;margin-top:-155px;width:60px}
  .gallery-hint{bottom:7vh}

  /* Story statement */
  .statement{min-height:100svh;padding:145px var(--mobile-gutter) 90px;display:flex;align-items:center}
  .statement .section-tag{top:94px;left:var(--mobile-gutter)}
  .statement-inner{width:100%;max-width:none}
  .statement .eyebrow{margin-bottom:18px}
  .headline{font-size:clamp(53px,15vw,65px);line-height:.82;letter-spacing:-3px}
  .statement .body{max-width:none;margin-top:30px}
  .floating-date{right:12px;bottom:50px;font-size:7px;letter-spacing:5px}

  /* Interlude */
  .interlude{height:100svh;min-height:680px;padding:0 var(--mobile-gutter);align-items:center}
  .giant-script{left:-19vw;top:20%;font-size:74vw}
  .interlude-copy{width:100%}
  .interlude h2{font-size:clamp(52px,15vw,65px);line-height:.83;letter-spacing:-3px}
  .orbit-small{right:-18vw;width:54vw;height:54vw}

  /* The day */
  .day{min-height:auto;padding:130px var(--mobile-gutter) 90px}
  .day .section-tag{top:82px;left:var(--mobile-gutter)}
  .day-grid{display:flex;flex-direction:column;gap:58px;align-items:stretch}
  .day-title{font-size:clamp(96px,29vw,116px);line-height:.59;letter-spacing:-7px}
  .place{font-size:31px;line-height:1;margin:0 0 45px}
  .detail{padding:17px 0;display:flex;align-items:baseline;gap:14px}
  .detail small{font-size:6px;letter-spacing:2px;flex:0 0 auto}
  .detail strong{font-size:18px;line-height:1.1;text-align:right}
  .day-note{font-size:16px;line-height:1.5;margin-top:30px}

  /* Film strip */
  .film-roll{height:72svh;min-height:540px}
  .film-label{top:58px;left:var(--mobile-gutter);font-size:6px;letter-spacing:2.5px}
  .film-track{gap:14px;padding-left:24vw}
  .film-frame{flex-basis:220px;height:278px}
  .film-frame span{font-size:8px;letter-spacing:3px}

  /* Letters */
  .letters{min-height:auto;padding:125px var(--mobile-gutter) 90px}
  .letters .section-tag{top:78px;left:var(--mobile-gutter)}
  .letters-inner{width:100%;max-width:none}
  .letters .eyebrow{margin-bottom:18px}
  .letters-title{font-size:clamp(58px,17vw,70px);line-height:.8;letter-spacing:-3px;margin-bottom:48px}
  .letter-group-heading{margin:46px 0 20px;gap:10px;font-size:6px;letter-spacing:1.8px}
  .letter-group-heading i{min-width:18px}
  .letter-card{width:100%;max-width:none;margin:0;padding:30px 23px 32px}
  .letter-card:before{inset:8px}
  .letter-card-top{display:flex;flex-direction:column;gap:6px;font-size:6px;letter-spacing:1.8px;line-height:1.35}
  .letter-rule{margin:18px 0 24px}
  .letter-body{font-size:15px;line-height:1.75;margin-bottom:16px}
  .letter-signoff{font-size:27px;margin-top:25px}
  .letter-role{font-size:7px!important;letter-spacing:1.5px!important}

  /* Ending */
  .forever{min-height:100svh;padding:0 var(--mobile-gutter)}
  .forever-aura{width:105vw;height:105vw}
  .forever-title{font-size:clamp(65px,20vw,82px);line-height:.7;letter-spacing:-5px}
  .forever-script{font-size:35px;margin-top:28px}
  .final-date{margin-top:18px;font-size:7px;letter-spacing:3px}
  .footer-line{bottom:62px}
  .footer-note{bottom:29px;font-size:6px;letter-spacing:2px;text-align:center}

  /* Keep the old credit helper from ever creating a pill on mobile. */
  .tolani-credit{width:auto;min-height:0;margin:20px auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none}
}

@media (max-width:360px){
  .gallery-title{font-size:57px}
  .memory-card{max-width:300px}
  .day-title{font-size:91px}
  .letter-card{padding-left:19px;padding-right:19px}
  .letter-body{font-size:14px}
}

@media (min-width:701px){
  /* Ensure the author credit is text-only everywhere, including desktop. */
  .tolani-credit{border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;backdrop-filter:none!important}
}

/* V85 — single music control + iOS edge/overscroll cleanup.
   The story iframe already has its own header control; the parent music button
   was also remaining visible above it, which could look like the music control
   was splitting into two at the top edge. */
.story-active .landing-nav .music-toggle{display:none!important}
html,body{overscroll-behavior-y:none}
.story-frame-wrap,.story-frame-wrap iframe{overscroll-behavior:none}
@media(max-width:700px){
  html,body{-webkit-overflow-scrolling:auto}
  .story-frame-wrap iframe{touch-action:pan-y}
}

/* V86 — iPhone 14 Pro mobile memory carousel cleanup.
   Mobile uses a single centered card with horizontal swipe navigation instead of
   the desktop 3D spread. This keeps every image fully inside the 393px viewport. */
@media (max-width:700px){
  .gallery-intro{
    min-height:0 !important;
    padding-bottom:0;
  }
  .gallery-intro>.memory-card + .body{
    margin:24px 0 0 !important;
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
  }
  .gallery-intro .page-scroll-indicator{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:42px auto 48px !important;
    width:max-content;
  }
  .gallery-stage{
    height:calc(100svh - 150px);
    min-height:610px;
    max-height:760px;
    margin-top:0;
    padding:0 16px;
    overflow:hidden;
    perspective:none;
    touch-action:pan-y;
    overscroll-behavior-x:contain;
  }
  .gallery-stage .memory{
    width:min(100%, 340px);
    max-width:340px;
    height:auto;
    aspect-ratio:4/5;
    left:50%;
    top:46%;
    transform:translate(-50%,-50%);
    transform-style:flat;
    backface-visibility:hidden;
    box-shadow:0 24px 55px rgba(0,0,0,.46);
  }
  .gallery-stage .memory img{
    object-fit:cover;
  }
  .gallery-stage .memory:not(.is-mobile-active){
    pointer-events:none;
  }
  .gallery-stage .cute-memory,
  .gallery-stage .depth-word{
    display:none !important;
  }
  .gallery-stage .stage-scroll-indicator{
    bottom:18px !important;
    z-index:50;
  }
  .gallery-stage .stage-scroll-indicator span{
    white-space:nowrap;
  }
  .gallery-stage .memory figcaption{
    left:18px;
    right:18px;
    bottom:18px;
    font-size:7px;
    letter-spacing:2.4px;
  }
  .gallery-stage::after{
    content:'SWIPE';
    position:absolute;
    left:50%;
    top:auto;
    bottom:70px;
    transform:translateX(-50%);
    color:rgba(184,154,100,.65);
    font:500 6px 'DM Sans';
    letter-spacing:3px;
    pointer-events:none;
  }
}


/* V87 — mobile swipe affordance for the memory carousel. */
@media (max-width:700px){
  .mobile-swipe-indicator{
    position:absolute;
    left:50%;
    bottom:58px;
    transform:translateX(-50%);
    width:min(250px,calc(100% - 48px));
    display:grid;
    grid-template-columns:24px 1fr 24px;
    grid-template-rows:auto auto;
    align-items:center;
    justify-items:center;
    z-index:60;
    pointer-events:none;
  }
  .mobile-swipe-label{
    color:#11100d;
    background:rgba(216,190,143,.88);
    border:1px solid rgba(255,244,220,.42);
    border-radius:999px;
    padding:8px 13px 7px;
    font:600 6px/1 'DM Sans';
    letter-spacing:2.7px;
    white-space:nowrap;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
  }
  .mobile-swipe-arrow{
    appearance:none;
    -webkit-appearance:none;
    border:0;
    background:transparent;
    padding:8px 10px;
    margin:0;
    color:#171510;
    font:300 21px/1 'Cormorant Garamond';
    cursor:pointer;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-swipe-arrow:active{
    transform:scale(.88);
    opacity:.7;
  }
  .mobile-swipe-dots{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:9px;
  }
  .mobile-swipe-dots i{
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(216,190,143,.34);
    transition:transform .25s ease,opacity .25s ease;
  }
  .mobile-swipe-dots i.is-active{
    transform:scale(1.8);
    opacity:1;
    background:#171510;
  }
  .gallery-stage::after{display:none !important}
}

/* Updated family-letter layout */
.parents-letters{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}.parents-letters .letter-card{max-width:760px;margin:0 auto;width:100%}


/* 2026-09 landing + parent letter refinements */
.landing-hero{min-height:100svh;background:radial-gradient(circle at 50% 45%,#2b2119,#100f0c 48%,#080807)}
.hero-content--split{width:min(1160px,88vw);display:grid;grid-template-columns:minmax(340px,42%) minmax(420px,1fr);align-items:center;gap:7vw;text-align:left}
.hero-portrait-wrap{position:relative;justify-self:center;width:min(370px,31vw);display:flex;flex-direction:column;align-items:center}
.hero-portrait-frame{width:100%;aspect-ratio:3/4;border-radius:50% 50% 47% 47% / 36% 36% 64% 64%;padding:10px;background:#17130f;border:1px solid rgba(184,154,100,.42);box-shadow:0 35px 90px rgba(0,0,0,.52),0 0 0 10px rgba(184,154,100,.045);overflow:hidden;position:relative}
.hero-portrait-frame:after{content:"";position:absolute;inset:14px;border:1px solid rgba(184,154,100,.25);border-radius:inherit;pointer-events:none;z-index:2}
.hero-portrait-frame img{width:100%;height:100%;display:block;object-fit:cover;filter:saturate(.9) contrast(1.03);border-radius:inherit}
.hero-portrait-caption{text-align:center;margin-top:12px;color:#e0c28a;font:600 18px/1.05 'Cormorant Garamond';transform:none;letter-spacing:.2px;text-shadow:0 0 18px rgba(224,194,138,.08)}
.hero-portrait-caption span{display:block;margin-top:8px;color:#b8ad9b;font:7px/1.2 'DM Sans';letter-spacing:3px;text-transform:uppercase}
.hero-copy{padding-top:1vh;max-width:590px}.hero-copy .eyebrow{margin-bottom:28px}
.hero-content--split .names{font-size:clamp(100px,12vw,178px);line-height:.69;letter-spacing:-7px;text-align:left}
.hero-content--split .hero-tagline{font:18px/1.25 'Cormorant Garamond';color:#a79a87;margin:50px 0 30px}
.hero-content--split .story-button{border-radius:0;min-width:154px}
@media(max-width:900px){.hero-content--split{grid-template-columns:1fr;gap:30px;width:86vw;text-align:center}.hero-portrait-wrap{width:min(300px,55vw)}.hero-copy{padding:0;max-width:none;justify-self:center}.hero-copy .eyebrow{margin-bottom:20px}.hero-content--split .names{text-align:center;font-size:clamp(76px,16vw,130px)}.hero-content--split .hero-tagline{margin:28px 0 22px}.hero-content--split .story-button{display:inline-flex}.hero-portrait-caption{font-size:16px}}
@media(max-width:700px){.hero-content--split{width:calc(100% - 36px);gap:20px}.hero-portrait-wrap{width:min(235px,58vw)}.hero-portrait-frame{padding:7px}.hero-portrait-frame:after{inset:10px}.hero-portrait-caption{margin-top:7px;font-size:14px}.hero-portrait-caption span{font-size:5.5px;letter-spacing:2px;margin-top:5px}.hero-content--split .names{letter-spacing:-4px;font-size:clamp(67px,18vw,90px)}.hero-copy .eyebrow{font-size:7px;letter-spacing:2.5px}.hero-content--split .hero-tagline{font-size:14px;margin:22px 0 18px}}
.parents-letters{align-items:start}.parents-letters .letter-card{display:flex;flex-direction:column;min-width:0}
/* Every letter uses the same slim, cinematic collapsed frame. Long letters open in place. */
.letters .letter-card{max-width:760px;margin-left:auto;margin-right:auto;position:relative;min-width:0;box-sizing:border-box}
.letters .letter-card:not(.is-expanded){height:560px;overflow:hidden}
.letters .letter-card:not(.is-expanded):after{content:"";position:absolute;left:0;right:0;bottom:0;height:130px;background:linear-gradient(transparent,rgba(13,12,10,.98) 72%);pointer-events:none;z-index:1}
.parent-letter-content{display:flex;flex-direction:column;min-height:0;flex:1}.parent-letter-text{max-height:430px;overflow:hidden;position:relative;transition:max-height .55s ease}.parent-letter-text:after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,#11100d);pointer-events:none;transition:opacity .3s ease}
.read-more-btn{position:absolute;left:52px;bottom:28px;z-index:3;align-self:flex-start;margin-top:18px;border:1px solid rgba(184,154,100,.45);background:rgba(184,154,100,.05);color:#e8dcc4;padding:11px 16px;font:8px 'DM Sans';letter-spacing:2px;text-transform:uppercase;cursor:pointer;transition:background .3s ease,border-color .3s ease,transform .3s ease}.read-more-btn:hover{background:rgba(184,154,100,.12);border-color:rgba(216,190,143,.8);transform:translateY(-1px)}.read-more-btn span{display:inline-block;margin-left:7px;font-size:13px;line-height:0;vertical-align:-1px;color:var(--gold)}
.letters .letter-card.is-expanded{overflow:visible}.letters .letter-card.is-expanded:after{display:none}.letters .letter-card.is-expanded .parent-letter-text{max-height:5000px}.letters .letter-card.is-expanded .parent-letter-text:after{opacity:0}.letters .letter-card.is-expanded .read-more-btn{position:relative;left:auto;bottom:auto;margin-top:24px;z-index:3}.letters .letter-card.is-expanded .read-more-btn span{transform:rotate(45deg)}
@media(max-width:900px){.letters .letter-card{max-width:760px}.letters .letter-card:not(.is-expanded){height:500px}.parent-letter-text{max-height:390px}.read-more-btn{left:28px;bottom:24px}}

/* V11 — restrained single-slot chapter slideshows: the story stays still while the memories change. */
.before-media-stage{
  position:absolute;
  top:54vh;
  width:min(560px,42vw);
  height:620px;
  margin:0;
  isolation:isolate;
  z-index:3;
}
.before-media-stage--maja{right:8vw;}
.before-media-stage--todi{left:8vw;}
.before-media-stage .before-photo--slideshow{
  inset:0;
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(12px) scale(.985);
  transition:opacity 1.15s cubic-bezier(.22,1,.36,1), transform 1.35s cubic-bezier(.22,1,.36,1), visibility 0s linear 1.15s;
  z-index:1;
}
.before-media-stage .before-photo--slideshow.is-active{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(0) scale(1);
  z-index:2;
  transition-delay:0s;
}
.before-media-stage .before-photo--slideshow img,
.before-media-stage .before-photo--slideshow video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.before-media-stage .before-photo--slideshow:after{inset:14px;}
.before-media-progress{
  position:absolute;
  z-index:6;
  left:22px;
  right:22px;
  bottom:22px;
  display:flex;
  gap:6px;
  pointer-events:none;
}
.before-media-progress i{
  display:block;
  height:2px;
  flex:1;
  background:rgba(232,220,196,.2);
  position:relative;
  overflow:hidden;
}
.before-media-progress i:after{
  content:'';
  position:absolute;
  inset:0;
  transform:scaleX(0);
  transform-origin:left;
  background:rgba(216,190,143,.9);
}
.before-media-progress i.is-current:after{animation:beforeSlideProgress 6s linear forwards;}
@keyframes beforeSlideProgress{to{transform:scaleX(1)}}

@media(min-width:901px){
  .before-maja .before-media-stage{top:53vh;}
  .before-todi .before-media-stage{top:53vh;}
}
@media(max-width:900px){
  .before-media-stage,
  .before-media-stage--maja,
  .before-media-stage--todi{
    width:min(100%,560px);
    height:min(78vw,620px);
    min-height:420px;
    margin:0 auto;
  }
}
@media(max-width:520px){
  /* iPhone 14 / narrow phones: keep the chapter copy and its media in normal flow.
     The desktop absolute positioning caused the rotating media to cover the title/copy. */
  .before-chapter{
    min-height:auto;
    padding:15vh 7vw 14vh;
  }
  .before-chapter__top{margin-bottom:7vh;}
  .before-chapter__intro,
  .before-chapter__intro--reverse{
    margin-bottom:0;
    gap:28px;
  }
  .before-copy{
    max-width:100%;
    font-size:15px;
    line-height:1.75;
  }
  .before-title{
    font-size:clamp(64px,20vw,82px);
    line-height:.76;
    letter-spacing:-4px;
  }
  .before-media-stage,
  .before-media-stage--maja,
  .before-media-stage--todi{
    position:relative;
    inset:auto;
    top:auto;left:auto;right:auto;
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:4 / 5;
    margin:7vh auto 0;
    transform:none;
  }
  .before-media-stage .before-photo--slideshow{
    inset:0;
    width:100%;
    height:100%;
  }
  .before-media-progress{
    left:14px;
    right:14px;
    bottom:14px;
  }
}


/* Continuous slideshow progress state */
.before-media-progress i.is-active{background:var(--gold)!important;opacity:1!important;transform:scaleX(1.04);}


/* v21 — chapter copy sits directly beneath each title; media remains on the opposite side. */
@media (min-width: 901px){
  .before-chapter__intro,
  .before-chapter__intro--reverse{
    display:flex;
    flex-direction:column;
    gap:34px;
    width:min(48vw,650px);
    max-width:none;
    margin:0 auto 12vh 7vw;
    align-items:flex-start;
  }
  .before-chapter__intro--reverse{
    margin-left:auto;
    margin-right:7vw;
  }
  .before-chapter__intro--reverse .before-copy{order:2; margin:0; max-width:100%;}
  .before-chapter__intro--reverse > div{order:1;}
  .before-copy{margin:0; max-width:100%;}
  .before-maja .before-media-stage{right:7vw; top:52vh;}
  .before-todi .before-media-stage{left:7vw; top:52vh;}
}

.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88);transition:transform .8s ease,filter .8s ease;}
.film-frame:hover video{transform:scale(1.06);filter:saturate(1);}
@media(max-width:520px){
  .before-chapter__intro,.before-chapter__intro--reverse{display:flex;flex-direction:column;gap:28px;align-items:flex-start;margin-bottom:0;}
  .before-chapter__intro--reverse .before-copy,.before-chapter__intro--reverse > div{order:initial;}
  .before-chapter__intro--reverse > div{order:1;}
  .before-chapter__intro--reverse .before-copy{order:2;}
}

/* V22 — full aesthetic makeover: luxury editorial / modern wedding journal.
   All existing content, media, music, slideshow and interaction logic is preserved. */
:root{
  --black:#090908;
  --ink:#12110f;
  --cream:#f5efe4;
  --paper:#efe6d6;
  --gold:#c6a66b;
  --gold-bright:#e0c58e;
  --muted:#a69b8a;
  --line:rgba(198,166,107,.20);
  --line-strong:rgba(224,197,142,.38);
}
html{scroll-behavior:smooth;background:var(--black)}
body{background:var(--black);color:var(--cream);font-family:'DM Sans',sans-serif}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 50% 0,rgba(198,166,107,.06),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.012),transparent 25%)}
.grain{opacity:.025;z-index:60}

/* Header — quiet, floating gallery label */
.nav{height:78px;padding:0 4.5vw;background:linear-gradient(180deg,rgba(9,9,8,.82),rgba(9,9,8,0))!important;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);border-bottom:1px solid rgba(198,166,107,.08)}
.monogram{font-size:27px;letter-spacing:-1.8px}
.monogram span{color:var(--gold-bright)}
.nav-center{font-size:7px;letter-spacing:5px;color:#958a78}
.menu,.music-toggle{border-color:rgba(198,166,107,.32)!important;background:rgba(15,13,10,.56)!important;box-shadow:0 10px 35px rgba(0,0,0,.18)}
.menu:hover,.music-toggle:hover{border-color:var(--gold-bright)!important;background:rgba(198,166,107,.07)!important}

/* Opening cover */
.landing-hero{min-height:100svh;background:radial-gradient(circle at 28% 48%,rgba(198,166,107,.10),transparent 32%),radial-gradient(circle at 78% 72%,rgba(198,166,107,.06),transparent 28%),#090908}
.landing-hero:after{inset:6vh 3.5vw;border-radius:0;transform:none;border-color:rgba(198,166,107,.13)}
.landing-hero .hero-ring{border-color:rgba(198,166,107,.09)}
.hero-content--split{width:min(1180px,88vw);display:grid;grid-template-columns:minmax(300px,.92fr) minmax(360px,1.08fr);gap:clamp(50px,8vw,120px);align-items:center;text-align:left}
.hero-portrait-wrap{display:flex;flex-direction:column;align-items:flex-start}
.hero-portrait-frame{width:min(390px,34vw);aspect-ratio:4/5;padding:10px;border:1px solid rgba(198,166,107,.34);background:rgba(255,255,255,.025);box-shadow:0 35px 100px rgba(0,0,0,.45);position:relative}
.hero-portrait-frame:before{content:'';position:absolute;inset:10px;border:1px solid rgba(224,197,142,.18);z-index:2;pointer-events:none}
.hero-portrait-frame img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.88) contrast(1.04)}
.hero-portrait-caption{margin-top:18px;padding-left:2px;font:400 22px/1 'Great Vibes';color:var(--gold-bright)}
.hero-portrait-caption span{display:inline-block;margin-top:9px;font:500 7px/1 'DM Sans';letter-spacing:4px;text-transform:uppercase;color:#827868}
.hero-copy{padding-top:2vh}
.eyebrow{font-size:8px;letter-spacing:4.5px;color:var(--gold-bright);margin-bottom:30px}
.names{font-size:clamp(78px,10.5vw,160px);line-height:.72;letter-spacing:-5px}
.names b{font-size:.28em;color:var(--gold-bright)}
.hero-tagline{font:400 21px/1.35 'Cormorant Garamond';color:#bdb09d;max-width:360px;margin:34px 0 34px}
.story-button{border-radius:2px;min-width:190px;background:rgba(198,166,107,.035);border-color:rgba(224,197,142,.5)}
.story-button:hover{background:rgba(198,166,107,.09);box-shadow:0 15px 50px rgba(198,166,107,.08)}
.hero-sun{width:55vw;height:55vw;opacity:.7}

/* General section rhythm */
.statement{background:#0b0b09;min-height:105vh;padding:20vh 9vw}
.statement-inner{max-width:1120px}
.section-tag{color:#7f7566}
.headline{font-size:clamp(68px,9vw,132px);letter-spacing:-4px}
.body{font-size:14px;line-height:1.9;color:#aaa090}

/* Gallery intro becomes a magazine cover spread */
.gallery{background:#0d0d0b;padding-top:15vh;min-height:245vh}
.gallery:before{content:'';position:absolute;left:4vw;right:4vw;top:9vh;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
.gallery-intro{grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important;column-gap:8vw!important;min-height:88vh!important;padding-left:9vw!important;padding-right:8vw!important}
.gallery-title{font-size:clamp(76px,9.5vw,140px);line-height:.78;letter-spacing:-5px}
.gallery-title em{color:var(--gold-bright)}
.memory-card{width:min(460px,100%)!important}
.memory-card__paper{border-radius:2px;background:linear-gradient(145deg,#171512,#0d0c0a);box-shadow:0 45px 110px rgba(0,0,0,.48),0 0 0 1px rgba(255,255,255,.018) inset;transform:rotate(.8deg)}
.memory-card__paper:before{inset:11px;border-color:rgba(224,197,142,.12);border-radius:0}
.memory-card__image-wrap{height:275px;background:#eee5d6;border-color:rgba(224,197,142,.5)}
.memory-card__caption strong{font-size:34px}
.memory-card__eyebrow{color:var(--gold-bright)}
.gallery-stage{height:100vh;margin-top:4vh}
.memory{width:min(410px,38vw);box-shadow:0 42px 100px rgba(0,0,0,.52);border-color:rgba(198,166,107,.22)}
.photo-slot:before{inset:12px;border-color:rgba(224,197,142,.16)}
.gallery-hint{bottom:10vh;color:#918675}
.depth-word{color:rgba(198,166,107,.025)}

/* Before chapters — cleaner editorial spreads */
.before-chapter{background:#0a0a08;min-height:125vh;padding:17vh 8vw 15vh}
.before-chapter:before{inset:5vh 4vw;border-color:rgba(198,166,107,.10);border-radius:0}
.before-chapter__top{margin-bottom:8vh;color:#8f826f}
.before-kicker{color:var(--gold-bright);letter-spacing:5px}
.before-chapter__intro{grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);gap:9vw;align-items:end}
.before-chapter__intro--reverse{grid-template-columns:minmax(260px,.55fr) minmax(0,1fr)}
.before-title{font-size:clamp(76px,10vw,150px);line-height:.75;letter-spacing:-5px}
.before-title em{color:var(--gold-bright)}
.before-copy{font-size:14px;line-height:1.95;color:#aaa090;max-width:500px}
.before-media-stage{margin-top:9vh;height:min(68vh,720px);width:min(520px,48vw);border-color:rgba(198,166,107,.25);box-shadow:0 45px 110px rgba(0,0,0,.48)}
.before-maja .before-media-stage{margin-left:auto}
.before-todi .before-media-stage{margin-right:auto}
.before-photo figcaption{background:linear-gradient(180deg,transparent,rgba(5,5,4,.72));padding-top:50px}
.before-media-progress i{background:rgba(255,255,255,.25)}
.before-media-progress i.is-active{background:var(--gold-bright)}

/* Transition */
.before-transition{background:radial-gradient(circle at 50% 50%,rgba(198,166,107,.10),transparent 30%),#090908}

/* Memory gallery / film archive */
.interlude{background:radial-gradient(circle at 60% 40%,rgba(198,166,107,.08),transparent 25%),#090908}
.interlude h2{font-size:clamp(72px,10vw,145px)}
.giant-script{color:rgba(198,166,107,.025)}
.day{background:#eee5d5;color:#17130f;padding:18vh 8vw}
.day-grid{gap:8vw}
.day-title{font-size:clamp(110px,14vw,205px);letter-spacing:-8px}
.place{font-size:clamp(30px,3.2vw,46px)}
.detail{padding:25px 0}
.detail strong{font-size:24px}

/* Film strip — more like a contact sheet */
.film-roll{background:#0b0b09;padding:15vh 0 16vh;overflow:hidden}
.film-label{margin-left:7vw;color:var(--gold-bright);font-size:7px;letter-spacing:5px}
.film-track{gap:22px;padding-left:11vw}
.film-frame{border:1px solid rgba(198,166,107,.20);box-shadow:0 28px 70px rgba(0,0,0,.42);background:#14120f}
.film-frame:before{inset:9px;border-color:rgba(224,197,142,.13)}
.film-frame span{color:var(--gold-bright)}

/* Letters — warm paper on black */
.letters{background:#0b0b09;min-height:120vh;padding:20vh 9vw}
.letters-title{font-size:clamp(74px,9.5vw,138px);letter-spacing:-4px}
.letters-title em{color:var(--gold-bright)}
.letter-card{background:linear-gradient(145deg,rgba(239,230,214,.07),rgba(198,166,107,.018));border-color:rgba(198,166,107,.24);box-shadow:0 35px 100px rgba(0,0,0,.35);padding:48px 56px 52px}
.letter-card:before{inset:12px;border-color:rgba(224,197,142,.08)}
.letter-body{font-size:17px;line-height:1.9;color:#d8cdbb}
.letter-signoff{color:var(--gold-bright)}
.letter-group-heading{color:#9b8f7d}

/* Footer / closing */
.forever{background:radial-gradient(circle at 50% 42%,rgba(198,166,107,.10),transparent 32%),#090908}

/* Music panel */
.music-panel{background:rgba(10,9,8,.96);border-left:1px solid rgba(198,166,107,.18);box-shadow:-30px 0 90px rgba(0,0,0,.4);backdrop-filter:blur(18px)}
.music-panel__inner{border:1px solid rgba(198,166,107,.16);background:linear-gradient(145deg,rgba(198,166,107,.035),transparent 55%)}
.music-now-wrap .music-now{font-size:25px}
.music-action,.music-transport-btn,.music-transport-main{border-color:rgba(198,166,107,.25);background:rgba(198,166,107,.035)}

/* Menu */
.menu-panel{background:radial-gradient(circle at 50% 35%,rgba(198,166,107,.07),transparent 32%),#0a0a08}
.menu-links a{font-size:clamp(54px,7vw,96px);padding:16px 0;border-color:rgba(198,166,107,.16)}
.menu-links a:hover{color:var(--gold-bright)}

/* Mobile: preserve the exact iPhone-safe composition while applying the new look. */
@media(max-width:700px){
  .nav{height:68px;padding:calc(env(safe-area-inset-top) + 6px) 18px 6px;background:linear-gradient(180deg,rgba(9,9,8,.88),rgba(9,9,8,0))!important}
  .nav-center{font-size:6px;letter-spacing:2.6px}
  .landing-hero{min-height:100svh;padding:90px 20px 50px}
  .hero-content--split{width:100%;display:flex;flex-direction:column;gap:34px;align-items:center;text-align:center}
  .hero-portrait-frame{width:min(285px,78vw);aspect-ratio:4/5}
  .hero-portrait-wrap{align-items:center}
  .hero-portrait-caption{text-align:center;font-size:20px}
  .hero-copy{padding:0}
  .eyebrow{font-size:6.5px;letter-spacing:3px;margin-bottom:22px}
  .names{font-size:clamp(70px,22vw,94px);letter-spacing:-4px;line-height:.72}
  .hero-tagline{font-size:18px;margin:26px auto 28px;max-width:280px}
  .story-button{min-width:180px}
  .gallery{padding-top:110px}
  .gallery-intro{display:block!important;min-height:0!important;padding:0 20px!important}
  .gallery-title{font-size:clamp(66px,19vw,92px);margin-bottom:32px}
  .memory-card{margin:28px auto 0!important;width:min(340px,88vw)!important}
  .memory-card__image-wrap{height:220px}
  .gallery-intro>.memory-card + .body{margin:28px 0 0!important}
  .gallery-stage{height:82vh;margin-top:8vh}
  .memory{width:min(78vw,300px)}
  .gallery-hint{bottom:7vh}
  .before-chapter{padding:13vh 20px 12vh;min-height:0}
  .before-chapter:before{inset:3vh 10px}
  .before-chapter__top{margin-bottom:7vh}
  .before-chapter__intro,.before-chapter__intro--reverse{display:flex;flex-direction:column;gap:24px;align-items:stretch}
  .before-chapter__intro--reverse .before-copy,.before-chapter__intro--reverse>div{order:initial}
  .before-title{font-size:clamp(68px,20vw,92px);letter-spacing:-4px}
  .before-copy{font-size:15px;line-height:1.85;max-width:none}
  .before-media-stage,.before-maja .before-media-stage,.before-todi .before-media-stage{width:min(88vw,340px);height:auto;aspect-ratio:4/5;margin:28px auto 0}
  .interlude{height:95vh;padding:0 20px}
  .interlude h2{font-size:clamp(66px,20vw,92px)}
  .day{padding:14vh 20px}
  .day-grid{grid-template-columns:1fr;gap:7vh}
  .day-title{font-size:clamp(100px,32vw,150px)}
  .place{margin-bottom:7vh}
  .film-roll{padding:12vh 0}
  .film-track{padding-left:20px;gap:14px}
  .film-frame{width:220px;flex:0 0 220px}
  .letters{padding:14vh 20px}
  .letter-card{padding:36px 28px 40px}
  .letter-body{font-size:16px;line-height:1.85}
  .letters-title{font-size:clamp(68px,19vw,92px)}
}

/* V23 — story header must remain crisp; atmospheric effects stay behind it. */
.story-page .nav,
body:has(.story-back) .nav{
  z-index:1200 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
.story-page .nav *,
body:has(.story-back) .nav *{
  filter:none !important;
  -webkit-filter:none !important;
}
.story-page .grain,
body:has(.story-back) .grain{
  z-index:1 !important;
}


/* V24 — story header is always crystal clear. Do not blur the navigation or its controls. */
body.story-page .nav,
body.story-page .nav *{
  filter:none !important;
  -webkit-filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
}
body.story-page .nav{
  position:fixed !important;
  z-index:2147483000 !important;
  isolation:isolate;
  transform:none !important;
  will-change:auto !important;
}
body.story-page .nav::before,
body.story-page .nav::after{
  display:none !important;
  content:none !important;
}
body.story-page .monogram,
body.story-page .nav-center,
body.story-page .nav-actions,
body.story-page .music-toggle,
body.story-page .menu{
  filter:none !important;
  -webkit-filter:none !important;
  opacity:1 !important;
}

/* V26 — FINAL STORY HEADER OVERRIDE
   Keep the story header identical in clarity to the landing-page navigation.
   No blur/filter/opacity/compositing layer is allowed on the story header. */
body.story-page > .grain{display:none !important;}
body.story-page .nav{
  position:fixed !important;
  inset:0 0 auto 0 !important;
  height:78px !important;
  z-index:2147483647 !important;
  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  padding:0 4.5vw !important;
  margin:0 !important;
  background:linear-gradient(180deg,rgba(9,9,8,.96),rgba(9,9,8,.88)) !important;
  border-bottom:1px solid rgba(198,166,107,.08) !important;
  box-shadow:none !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  opacity:1 !important;
  transform:none !important;
  perspective:none !important;
  isolation:isolate !important;
  mix-blend-mode:normal !important;
}
body.story-page .nav .monogram{
  position:relative !important;
  inset:auto !important;
  grid-column:1 !important;
  justify-self:start !important;
  align-self:center !important;
  transform:none !important;
  z-index:3 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  color:#f5efe4 !important;
  text-shadow:none !important;
  font-family:'Cormorant Garamond',serif !important;
}
body.story-page .nav .nav-center{
  position:relative !important;
  inset:auto !important;
  grid-column:2 !important;
  justify-self:center !important;
  align-self:center !important;
  transform:none !important;
  z-index:3 !important;
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  color:#958a78 !important;
  text-shadow:none !important;
  font-family:'DM Sans',sans-serif !important;
  white-space:nowrap !important;
}
body.story-page .nav .nav-actions{
  position:relative !important;
  inset:auto !important;
  grid-column:3 !important;
  justify-self:end !important;
  align-self:center !important;
  transform:none !important;
  z-index:3 !important;
  display:flex !important;
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
}
body.story-page .nav .music-toggle,
body.story-page .nav .menu{
  visibility:visible !important;
  opacity:1 !important;
  filter:none !important;
  -webkit-filter:none !important;
  transform:none !important;
  mix-blend-mode:normal !important;
}
body.story-page .nav .music-toggle{backdrop-filter:none !important;-webkit-backdrop-filter:none !important;}
body.story-page .story-back{
  position:fixed !important;
  left:5vw !important;
  top:96px !important;
  z-index:2147483647 !important;
  visibility:visible !important;
  opacity:.9 !important;
  filter:none !important;
  -webkit-filter:none !important;
  transform:none !important;
  color:#f5efe4 !important;
  text-shadow:none !important;
  mix-blend-mode:normal !important;
}
@media(max-width:700px){
 body.story-page .nav{height:68px !important;padding:0 18px !important;}
 body.story-page .nav-center{font-size:6px !important;letter-spacing:2.6px !important;}
 body.story-page .story-back{left:20px !important;top:76px !important;}
}


/* V27 — definitive story header: match the landing-page header exactly. */
html body.story-page header.nav {
  all: initial !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 78px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4.5vw !important;
  margin: 0 !important;
  z-index: 2147483647 !important;
  background: linear-gradient(180deg, rgba(9,9,8,.96), rgba(9,9,8,.88)) !important;
  border-bottom: 1px solid rgba(198,166,107,.08) !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
  visibility: visible !important;
  overflow: visible !important;
  font-family: 'DM Sans', sans-serif !important;
}
html body.story-page header.nav .monogram {
  all: unset !important;
  display: block !important;
  position: static !important;
  flex: 0 0 auto !important;
  color: #f2ead9 !important;
  text-decoration: none !important;
  font: 500 29px 'Cormorant Garamond', serif !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  text-shadow: none !important;
}
html body.story-page header.nav .monogram span {
  all: unset !important;
  color: #b89a64 !important;
  font: 22px 'Great Vibes', cursive !important;
  padding: 0 3px !important;
}
html body.story-page header.nav .nav-center {
  all: unset !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%,-50%) !important;
  color: #817867 !important;
  font: 8px 'DM Sans', sans-serif !important;
  letter-spacing: 4px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-shadow: none !important;
}
html body.story-page header.nav .nav-actions {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-left: auto !important;
  filter: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}
html body.story-page header.nav .music-toggle {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  height: 38px !important;
  min-width: 74px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(184,154,100,.24) !important;
  border-radius: 999px !important;
  background: rgba(11,10,8,.45) !important;
  color: #f2ead9 !important;
  cursor: pointer !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  text-shadow: none !important;
}
html body.story-page header.nav .music-label {
  all: unset !important;
  color: #a99b86 !important;
  font: 7px 'DM Sans', sans-serif !important;
  letter-spacing: 2px !important;
}
html body.story-page header.nav .music-bars { display:flex !important; align-items:flex-end !important; gap:2px !important; height:14px !important; }
html body.story-page header.nav .music-bars i { display:block !important; width:2px !important; background:#b89a64 !important; filter:none !important; opacity:1 !important; }
html body.story-page header.nav .menu {
  all: unset !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(184,154,100,.24) !important;
  border-radius: 50% !important;
  background: rgba(11,10,8,.45) !important;
  display: grid !important;
  place-content: center !important;
  gap: 5px !important;
  cursor: pointer !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}
html body.story-page header.nav .menu i { display:block !important; width:13px !important; height:1px !important; background:#f2ead9 !important; filter:none !important; opacity:1 !important; }
html body.story-page header.nav .story-back {
  position: fixed !important;
  left: 5vw !important;
  top: 96px !important;
  z-index: 2147483647 !important;
  color:#f2ead9 !important;
  font:500 8px/1 'DM Sans',sans-serif !important;
  letter-spacing:3px !important;
  opacity:.9 !important;
  filter:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  transform:none !important;
  visibility:visible !important;
  text-shadow:none !important;
}
@media(max-width:700px){
  html body.story-page header.nav{height:68px !important;padding:0 18px !important;}
  html body.story-page header.nav .nav-center{font-size:6px !important;letter-spacing:2.6px !important;}
  html body.story-page header.nav .story-back{left:20px !important;top:76px !important;}
}

/* V28 — when the full-screen story iframe is active, the landing header must
   disappear completely. Its backdrop-filter was blurring the story header
   underneath it. The story iframe owns the header while in story mode. */
body.story-active > .landing-nav,
body.story-active > header.landing-nav,
body.story-active .landing-nav {
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}
body.story-active .story-frame-wrap,
body.story-active .story-frame-wrap iframe {
  z-index:900 !important;
}

/* V31 — the story iframe must stay below the parent-owned music panel.
   The story MUSIC button sends a message to the parent; the panel then has
   to be above the iframe to be visible and clickable. The landing header
   remains hidden while the story is active, so it cannot blur the story. */
body.story-active .music-panel {
  z-index:2147483646 !important;
}
body.story-active .music-panel.is-open {
  pointer-events:auto !important;
}


/* V30 — menu panel must sit above the ultra-high story header so its close
   control and links receive pointer events. The header remains above the page
   content, but the open menu becomes the intentional topmost interaction layer. */
body.story-page .menu-panel {
  z-index:2147483647 !important;
}
body.story-page .menu-panel.is-open {
  pointer-events:auto !important;
}

/* V32 — final iPhone 14 composition pass (390 × 844 CSS viewport).
   Keep the cover and story content inside their own vertical rhythm with no
   text/media collisions. */
@media (max-width:700px){
  .landing-shell .landing-hero{
    min-height:100svh;
    height:auto;
    padding:82px 18px 28px;
    overflow:hidden;
  }
  .landing-shell .hero-content--split{
    width:100%;
    gap:16px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
  }
  .landing-shell .hero-portrait-wrap{
    width:100%;
    align-items:center;
    flex:0 0 auto;
  }
  .landing-shell .hero-portrait-frame{
    width:min(214px,58vw);
    aspect-ratio:4/5;
    padding:7px;
  }
  .landing-shell .hero-portrait-frame:before{inset:8px}
  .landing-shell .hero-portrait-caption{
    margin-top:8px;
    font-size:18px;
    line-height:1;
  }
  .landing-shell .hero-portrait-caption span{
    margin-top:6px;
    font-size:5.5px;
    letter-spacing:2.2px;
  }
  .landing-shell .hero-copy{
    width:100%;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .landing-shell .hero-copy .eyebrow{
    margin:0 0 13px;
    font-size:6.5px;
    letter-spacing:2.7px;
    white-space:nowrap;
  }
  .landing-shell .hero-content--split .names{
    font-size:clamp(64px,18vw,76px);
    line-height:.72;
    letter-spacing:-3.5px;
    text-align:center;
  }
  .landing-shell .hero-content--split .names b{
    font-size:.29em;
    line-height:1.15;
  }
  .landing-shell .hero-content--split .hero-tagline{
    font-size:15px;
    line-height:1.2;
    margin:16px auto 15px;
    max-width:250px;
  }
  .landing-shell .story-button{
    min-width:168px;
    min-height:43px;
    padding:12px 16px;
    font-size:8px;
    letter-spacing:2.4px;
  }
  .landing-shell .story-button i{width:18px}

  /* Story page: stack each editorial block instead of allowing desktop
     positioning to compete with the narrow viewport. */
  body.story-page .nav{
    height:68px !important;
    padding:0 18px !important;
  }
  body.story-page .nav .monogram{left:18px !important}
  body.story-page .nav .nav-center{display:block !important;font-size:5.5px;letter-spacing:2.6px}
  body.story-page .nav .nav-actions{right:18px !important;gap:7px}
  body.story-page .nav .music-toggle{height:42px;min-width:118px;padding:0 13px}
  body.story-page .nav .music-label{font-size:6px;letter-spacing:1.8px}
  body.story-page .nav .menu{width:42px;height:42px}
  body.story-page .nav .story-back{left:18px !important;top:84px !important;font-size:8px;letter-spacing:2.4px}

  body.story-page .gallery{
    padding-top:108px !important;
    min-height:0 !important;
  }
  body.story-page .gallery-intro{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    min-height:0 !important;
    padding:0 20px 80px !important;
    gap:0 !important;
  }
  body.story-page .gallery-intro > .section-tag{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    margin:0 0 24px;
    order:0;
  }
  body.story-page .gallery-intro > div:not(.section-tag){
    width:100% !important;
    order:1;
  }
  body.story-page .gallery-intro .eyebrow{margin-bottom:13px}
  body.story-page .gallery-title{
    font-size:clamp(60px,18vw,78px) !important;
    line-height:.8;
    letter-spacing:-3px;
    margin:0;
  }
  body.story-page .gallery-intro > .memory-card{
    order:2;
    width:min(330px,calc(100vw - 48px)) !important;
    margin:36px auto 0 !important;
    position:relative !important;
    right:auto !important;
    top:auto !important;
  }
  body.story-page .memory-card__image-wrap{height:auto !important;aspect-ratio:4/3}
  body.story-page .gallery-intro > .memory-card + .body{
    order:3;
    position:relative !important;
    right:auto !important;
    top:auto !important;
    width:100% !important;
    margin:28px 0 0 !important;
    font-size:14px;
    line-height:1.8;
  }
  body.story-page .gallery-intro .page-scroll-indicator{
    order:4;
    position:relative !important;
    left:auto !important;
    bottom:auto !important;
    transform:none !important;
    margin:44px auto 0;
  }

  body.story-page .before-chapter{
    min-height:0 !important;
    padding:96px 20px 100px !important;
  }
  body.story-page .before-chapter:before{inset:28px 10px}
  body.story-page .before-chapter__top{margin-bottom:52px}
  body.story-page .before-chapter__intro,
  body.story-page .before-chapter__intro--reverse{
    display:flex !important;
    flex-direction:column !important;
    gap:24px !important;
    align-items:stretch !important;
  }
  body.story-page .before-chapter__intro--reverse .before-copy,
  body.story-page .before-chapter__intro--reverse > div{order:initial !important}
  body.story-page .before-title{
    font-size:clamp(64px,19vw,80px) !important;
    line-height:.78;
    letter-spacing:-3.5px;
  }
  body.story-page .before-copy{
    max-width:none !important;
    font-size:15px !important;
    line-height:1.8 !important;
    margin:0 !important;
  }
  body.story-page .before-media-stage,
  body.story-page .before-maja .before-media-stage,
  body.story-page .before-todi .before-media-stage{
    width:min(340px,calc(100vw - 40px)) !important;
    height:auto !important;
    aspect-ratio:4/5 !important;
    margin:34px auto 0 !important;
  }
  body.story-page .before-photo{inset:0 !important}
  body.story-page .before-photo img,
  body.story-page .before-photo video{width:100%;height:100%;object-fit:cover}

  body.story-page .before-transition{min-height:70vh;padding:100px 20px;text-align:center}
  body.story-page .gallery-stage{height:92vh;margin-top:0}
  body.story-page .memory{width:min(76vw,300px)}
  body.story-page .cute-memory{display:none}
}

/* V33 — final iPhone 14 chapter-media fit.
   Keep the chapter typography in normal flow and size each media frame to the
   native orientation of its content. Portrait photos stay fully visible;
   Todi's landscape astronaut video is contained rather than cropped. */
@media (max-width:520px){
  html,body{overflow-x:hidden !important;}
  body.story-page .before-chapter__intro,
  body.story-page .before-chapter__intro--reverse{
    gap:22px !important;
  }
  body.story-page .before-copy{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  body.story-page .before-maja .before-media-stage{
    width:min(100%,350px) !important;
    aspect-ratio:8 / 9 !important;
    height:auto !important;
    min-height:0 !important;
    margin:42px auto 0 !important;
  }
  body.story-page .before-todi .before-media-stage{
    width:min(100%,350px) !important;
    aspect-ratio:4 / 5 !important;
    height:auto !important;
    min-height:0 !important;
    margin:42px auto 0 !important;
  }
  body.story-page .before-media-stage .before-photo--slideshow{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    display:block !important;
  }
  body.story-page .before-media-stage .before-photo--slideshow img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
  }
  body.story-page .before-todi .before-media-stage .before-photo--slideshow video{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    background:#080806 !important;
  }
  body.story-page .before-photo figcaption{
    left:16px !important;
    right:16px !important;
    bottom:16px !important;
  }
  body.story-page .before-media-progress{
    left:14px !important;
    right:14px !important;
    bottom:12px !important;
  }
}

/* V33.1 — on narrow phones Todi follows the same reading order as Maja:
   heading → story copy → rotating media. */
@media (max-width:520px){
  body.story-page .before-chapter__intro--reverse > div{order:1 !important;}
  body.story-page .before-chapter__intro--reverse > .before-copy{order:2 !important;}
}

/* V33.2 — keep the Todi chapter clear of the mobile BACK control. */
@media (max-width:520px){
  body.story-page .before-todi{
    padding-top:132px !important;
  }
}

/* V33.3 — mobile BACK control sits inside its own header band. */
@media (max-width:520px){
  body.story-page .nav .story-back,
  body.story-page header.nav .story-back{
    top:76px !important;
  }
}

/* V34 — iPhone 14 chapter composition: compact, breathable, no media pushed
   below the fold. Typography and media remain in normal document flow. */
@media (max-width:520px){
  body.story-page .before-chapter{
    padding:82px 20px 82px !important;
    min-height:0 !important;
  }
  body.story-page .before-chapter:before{inset:22px 10px !important;}
  body.story-page .before-chapter__top{
    margin-bottom:28px !important;
  }
  body.story-page .before-chapter__intro,
  body.story-page .before-chapter__intro--reverse{
    gap:18px !important;
  }
  body.story-page .before-eyebrow{
    margin-bottom:8px !important;
    font-size:6px !important;
    letter-spacing:2.8px !important;
  }
  body.story-page .before-title{
    font-size:58px !important;
    line-height:.86 !important;
    letter-spacing:-2.2px !important;
    margin:0 !important;
  }
  body.story-page .before-copy{
    font-size:14px !important;
    line-height:1.62 !important;
    letter-spacing:0 !important;
    margin:0 !important;
  }
  body.story-page .before-maja .before-media-stage,
  body.story-page .before-todi .before-media-stage{
    width:min(100%,320px) !important;
    height:auto !important;
    margin:24px auto 0 !important;
  }
  body.story-page .before-maja .before-media-stage{
    aspect-ratio:8 / 9 !important;
  }
  body.story-page .before-todi .before-media-stage{
    aspect-ratio:4 / 5 !important;
  }
  /* V35 — override the older V33 cover rule with equal-or-higher specificity.
     Every chapter image must remain fully visible on iPhone 14; do not crop. */
  body.story-page .before-media-stage .before-photo--slideshow img{
    object-fit:contain !important;
    object-position:center !important;
    background:#090907 !important;
  }
  body.story-page .before-media-stage .before-photo--slideshow video{
    object-fit:contain !important;
    background:#090907 !important;
  }
}


/* V36 — iPhone 14 Pro gallery/carousel fit.
   GSAP positions the memory cards with x/y transforms, so centering must be
   supplied through xPercent/yPercent rather than a CSS translate that GSAP can overwrite. */
@media (max-width: 700px){
  html, body {
    width:100%;
    max-width:100%;
    overflow-x:hidden !important;
  }
  body.story-page .gallery-stage{
    width:calc(100% + 40px) !important;
    margin-left:-20px !important;
    margin-right:-20px !important;
    height:min(760px, calc(100svh - 110px)) !important;
    min-height:0 !important;
    overflow:hidden !important;
    perspective:1100px !important;
  }
  body.story-page .gallery-stage .memory{
    width:min(78vw, 320px) !important;
    max-width:calc(100vw - 40px) !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
  }
  body.story-page .gallery-stage .memory img,
  body.story-page .gallery-stage .memory video{
    max-width:100%;
  }
  body.story-page .gallery-stage .cute-memory{
    max-width:78px;
  }
}

@media (max-width: 430px){
  body.story-page .gallery-intro{
    padding-left:20px !important;
    padding-right:20px !important;
  }
  body.story-page .gallery-title{
    max-width:100%;
    overflow-wrap:normal;
  }
  body.story-page .before-chapter,
  body.story-page .statement,
  body.story-page .interlude,
  body.story-page .day,
  body.story-page .letters{
    scroll-margin-top:84px;
  }
}