* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ivory); color:var(--plum); font-family:var(--font-body); -webkit-font-smoothing:antialiased; }
button,a { -webkit-tap-highlight-color: transparent; }
button:focus-visible,a:focus-visible { outline:3px solid #f1d286; outline-offset:4px; }
[hidden] { display:none !important; }
.screen { position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; width:100%; isolation:isolate; }
.full-photo { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; object-position:var(--photo-x) var(--photo-y); z-index:-3; }
.intro-shade,.cover-shade { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.intro-shade { background:linear-gradient(180deg,rgba(46,2,59,0) 60%,rgba(46,2,59,.05) 73%,rgba(46,2,59,.37) 100%); }
.intro-content { position:absolute; inset:0; display:flex; justify-content:center; align-items:flex-end; padding:24px 18px max(43px,calc(env(safe-area-inset-bottom) + 35px)); }
.pill { border:0; border-radius:var(--radius-button); padding:19px 28px; font-family:var(--font-body); font-size:12px; font-weight:700; letter-spacing:.25em; cursor:pointer; min-height:58px; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease; }
.pill:active { transform:scale(.975); }
.pill--primary { color:var(--ivory); background:var(--plum); width:min(76vw,340px); box-shadow:0 12px 30px rgba(36,2,46,.24); }
.cover { color:var(--ivory); }
.cover-shade { background:linear-gradient(180deg,rgba(32,2,40,calc(var(--overlay-opacity) + .21)) 0%,rgba(46,2,59,calc(var(--overlay-opacity) + .07)) 19%,rgba(46,2,59,calc(var(--overlay-opacity) * .56)) 46%,rgba(30,3,37,calc(var(--overlay-opacity) * .96)) 68%,rgba(22,2,29,calc(var(--overlay-opacity) + .31)) 100%); }
.cover-content { position:relative; min-height:100%; min-height:100svh; min-height:max(560px,100svh); display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; padding:clamp(78px,16vh,138px) 24px max(33px,calc(env(safe-area-inset-bottom) + 24px)); text-shadow:0 2px 12px rgba(0,0,0,.2); }
.cover-heading { width:100%; max-width:550px; }
.eyebrow { font-size:clamp(11px,1.9vw,14px); letter-spacing:.32em; font-weight:600; margin:0 0 14px; }
.couple-heading { margin:0; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; column-gap:.21em; row-gap:0; font:400 clamp(41px,9.9vw,66px)/1.32 var(--font-display); text-wrap:balance; }
.couple-heading em { font-style:normal; font-size:.78em; }
.date-line { margin:4px 0 0; font-size:clamp(10px,2.4vw,13px); font-weight:600; letter-spacing:.34em; }
.cover-welcome { width:100%; max-width:480px; display:flex; flex-direction:column; gap:14px; align-items:center; }
.recipient-label { font-weight:600; letter-spacing:.12em; font-size:clamp(11px,2.45vw,14px); line-height:1.6; margin:0; }
.recipient-name { width:min(100%,350px); border:1px solid rgba(247,241,232,.94); background:rgba(46,2,59,.19); border-radius:14px; font-size:clamp(15px,4vw,19px); font-weight:700; letter-spacing:.12em; padding:14px 18px; overflow-wrap:anywhere; }
.recipient-note { margin:0; font-size:clamp(10px,2.35vw,12px); letter-spacing:.09em; line-height:1.9; max-width:380px; opacity:.94; }
.scroll-down { color:var(--ivory); background:transparent; border:0; cursor:pointer; margin:0; padding:5px 12px 0; line-height:0; animation:bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% {transform:translateY(0)} 50% {transform:translateY(4px)} }
.phase-tag { position:fixed; top:max(12px,env(safe-area-inset-top)); right:12px; z-index:100; color:#fff; background:rgba(27,8,35,.7); border:1px solid rgba(255,255,255,.25); padding:8px 10px; font-size:9px; letter-spacing:.15em; border-radius:99px; backdrop-filter:blur(7px); pointer-events:none; }
.phase-tag span { opacity:.75; }
.phase-boundary { position:relative; background:var(--ivory); min-height:65vh; text-align:center; }
.wave { color:var(--ivory); position:absolute; width:100%; height:42px; top:-40px; left:0; }
.boundary-inner { max-width:540px; margin:auto; padding:80px 26px 115px; display:flex; align-items:center; flex-direction:column; gap:19px; }
.ornament { font-family:Georgia,serif; font-size:40px; color:var(--mauve); opacity:.45; line-height:1; }
.boundary-small { color:var(--mauve); font-size:11px; letter-spacing:.28em; margin:0; }
.boundary-inner .greeting-title {
  color:var(--plum);
  font-family:var(--font-greeting);
  font-size:clamp(30px, 8.2vw, 39px);
  font-weight:400;
  line-height:1.3;
  letter-spacing:-.025em;
  text-align:center;
  max-width:100%;
  overflow-wrap:normal;
  margin:0;
}
@media (min-width:768px) {
  .boundary-inner .greeting-title { font-size:44px; }
}
.boundary-inner p:not(.boundary-small) { color:var(--mauve); font-size:14px; line-height:1.9; margin:0; }
.text-link { font-size:13px; font-weight:700; color:var(--plum); text-underline-offset:5px; margin-top:7px; }
.music-toggle { position:fixed; right:17px; bottom:max(18px,env(safe-area-inset-bottom)); z-index:20; border:1px solid rgba(247,241,232,.4); color:var(--ivory); background:rgba(46,2,59,.78); font-size:20px; border-radius:16px; width:50px; height:50px; cursor:pointer; }
.booting { min-height:100svh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px; color:var(--plum); }
.booting p {font-size:13px; letter-spacing:.12em; }
.loader-mark {font-size:32px;}
.no-script {padding:25px;text-align:center;}
@media (min-width:860px) {
 .intro,.cover { max-width:520px; margin-inline:auto; box-shadow:0 0 0 999px #201b23; }
 .phase-boundary {max-width:520px; margin:auto;}
 .cover-content { padding-top:clamp(90px,16vh,145px); }
 .phase-tag {right:calc(50% - 244px);}
 .music-toggle {right:calc(50% - 237px);}
}
@media (max-height:650px) {
 .cover-content {padding-top:52px;padding-bottom:14px;}
 .cover-welcome {gap:8px;}
 .couple-heading {font-size:clamp(36px,8vw,48px);}
 .recipient-name {padding:9px 15px;}
 .recipient-note {line-height:1.5;}
}
@media (prefers-reduced-motion:reduce) {
 html {scroll-behavior:auto;}
 *,*::before,*::after {animation-duration:.01ms !important;transition-duration:.01ms !important;}
}