:root{--paper:#f7f2ec;--ink:#4e2d25;--muted:#8d746a;--line:#c7a997;--white:#fffdf9;--serif:"Cormorant Garamond",serif;--sans:"Manrope",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:#ded7d0}
body{margin:0;color:var(--ink);font-family:var(--sans);font-weight:300;background:#ded7d0}
.invitation{width:100%;max-width:520px;margin:auto;overflow:hidden;background:var(--paper);box-shadow:0 0 50px #5b43382b}
.section,.hero{position:relative;padding:76px 28px;text-align:center}
.hero{min-height:100svh;padding-top:24px;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 15% 20%,#fff9 0 18%,transparent 19%),linear-gradient(145deg,#fbf8f4,#f0e7df)}
.hero:after,.section:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.24;background-image:linear-gradient(35deg,transparent 45%,#decfc2 46% 47%,transparent 48%),linear-gradient(145deg,transparent 45%,#fff 46% 48%,transparent 49%);background-size:90px 90px}
.language{position:relative;z-index:4;align-self:flex-end;display:flex;align-items:center;gap:8px}
.language span{height:14px;width:1px;background:var(--line)}
.lang{border:0;background:none;color:var(--muted);font:500 10px var(--sans);letter-spacing:.14em;padding:5px}
.lang.active{color:var(--ink)}
.ornament{position:absolute;width:210px;height:210px;border:1px solid #b79b8980;border-radius:50%;top:-110px;left:-80px}
.ornament:after{content:"";position:absolute;width:140px;height:140px;border:1px solid #b79b8960;border-radius:50%;right:-55px;bottom:-35px}
.photo{position:relative;z-index:2;overflow:hidden;background:#e7ddd4}
.photo-placeholder{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;color:#8e7469;background:linear-gradient(135deg,#e7ddd4,#f9f5f0)}
.photo-placeholder span{font:italic 28px var(--serif)}
.photo-placeholder small{font-size:10px;letter-spacing:.08em}
.organic-hero{width:90%;height:48svh;min-height:390px;max-height:560px;margin:34px auto 30px;border-radius:48% 52% 38% 62%/34% 38% 62% 66%}
.organic-detail{width:83%;height:360px;margin:48px auto 0;border-radius:61% 39% 54% 46%/43% 62% 38% 57%}
.organic-hall{height:340px;margin:-20px 0 50px;border-radius:42% 58% 31% 69%/58% 36% 64% 42%}
.photo.has-image .photo-placeholder{display:none}
.organic-hero{background:center/cover url("/assets/hero-v2.webp")}
.organic-detail{background:center/cover url("/assets/detail-v2.webp")}
.organic-hall{background:center/cover url("/assets/hall.webp")}
.eyebrow{position:relative;z-index:2;margin:0 0 15px;font-size:10px;font-weight:500;letter-spacing:.28em}
.names{position:relative;z-index:2;margin:0;width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font:italic clamp(35px,10.5vw,48px)/1 var(--serif);font-weight:500;white-space:nowrap}
.names i{font-size:24px;color:var(--line)}
.scroll-hint{position:relative;z-index:2;margin:auto 0 0;font-size:8px;letter-spacing:.22em}
.scroll-hint:after{content:"";display:block;width:1px;height:35px;margin:10px auto 0;background:var(--line)}
.script{position:relative;z-index:2;margin:0;font:italic 46px/1.05 var(--serif);font-weight:500}
.body-copy{position:relative;z-index:2;font:400 22px/1.55 var(--serif);margin:30px auto 0;max-width:390px}
.small-ornament{position:relative;z-index:2;margin-bottom:24px;color:var(--line)}
.date{background:#ede2d8}
.date-lockup{position:relative;z-index:2;display:flex;justify-content:center;align-items:center;gap:18px;margin:20px 0 25px}
.date-lockup>span{font:500 100px/.8 var(--serif)}
.date-lockup div{display:flex;flex-direction:column;align-items:flex-start;border-left:1px solid var(--line);padding-left:18px}
.date-lockup b{font:500 22px var(--serif);letter-spacing:.18em}
.date-lockup small{font:400 30px var(--serif)}
.time-line{position:relative;z-index:2;display:flex;align-items:center;gap:12px;justify-content:center}
.time-line span{width:40px;height:1px;background:var(--line)}
.time-line strong{font:400 13px var(--sans)}
.countdown{position:relative;z-index:2;display:flex;justify-content:center;gap:30px;margin-top:45px}
.countdown div{display:flex;flex-direction:column}
.countdown b{font:500 34px var(--serif)}
.countdown span{font-size:8px;letter-spacing:.15em}
.location h2{position:relative;z-index:2;margin:0;font:500 48px var(--serif)}
.location p:not(.eyebrow){position:relative;z-index:2;margin:12px auto 30px;max-width:300px;font-size:13px;line-height:1.7}
.button{position:relative;z-index:2;display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 28px;border:1px solid var(--ink);border-radius:100px;background:var(--ink);color:var(--white);font:500 10px var(--sans);letter-spacing:.16em;text-decoration:none;cursor:pointer}
.hosts{background:#efe4dc}
.rsvp{padding-left:24px;padding-right:24px}
.form-intro{position:relative;z-index:2;font-size:13px;line-height:1.6;margin:16px auto 35px;max-width:300px}
form{position:relative;z-index:2;text-align:left}
form>label,fieldset{display:block;margin:0 0 25px}
form>label>span,legend{display:block;margin-bottom:10px;font:500 14px var(--serif);letter-spacing:.03em}
fieldset{padding:0;border:0}
input,textarea{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);font:400 16px var(--serif);padding:12px 2px;outline:none}
input:focus,textarea:focus{border-color:var(--ink)}
.choice{display:flex;align-items:center;gap:11px;padding:9px 0;font-size:12px}
.choice input{appearance:none;width:18px;height:18px;flex:0 0 18px;border:1px solid var(--line);border-radius:50%;padding:0}
.choice input:checked{border:5px solid var(--ink)}
#companion-name{display:none;margin-top:8px}
#companion-name.visible{display:block}
.submit{width:100%;border:0;margin-top:8px}
#form-status{text-align:center;min-height:22px;font-size:12px;line-height:1.5}
.music-control{position:fixed;z-index:20;right:max(18px,calc((100vw - 520px)/2 + 18px));bottom:18px;display:flex;align-items:center;gap:8px;border:1px solid #fff6;border-radius:100px;padding:10px 14px;background:#4e2d25e8;color:#fff;font:500 8px var(--sans);letter-spacing:.16em;box-shadow:0 8px 25px #2d15152b;backdrop-filter:blur(10px)}
.music-bars{display:flex;align-items:end;gap:2px;height:13px}
.music-bars i{display:block;width:2px;height:6px;background:#fff;border-radius:2px}
.music-control.playing .music-bars i{animation:musicBar .7s ease-in-out infinite alternate}
.music-control.playing .music-bars i:nth-child(2){animation-delay:-.35s}.music-control.playing .music-bars i:nth-child(3){animation-delay:-.55s}
@keyframes musicBar{to{height:13px}}
footer{padding:60px 20px 70px;text-align:center;background:var(--ink);color:var(--paper)}
footer .script{font-size:38px}
footer small{display:block;margin-top:16px;letter-spacing:.25em}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}
@media(min-width:521px){.invitation{margin:30px auto;border-radius:22px}.hero{min-height:850px}.organic-hero{height:500px}.section{padding-top:95px;padding-bottom:95px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}

/* 2026 ceremonial interaction system */
:root{--ruby:#851c2d;--ruby-deep:#671321;--gold:#b78b3f;--gold-soft:#d9bd83;--silver:#9c9994}
.scroll-progress{position:fixed;z-index:100;top:0;left:0;width:100%;height:2px;background:transparent}
.scroll-progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--ruby),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .08s linear}
.section{isolation:isolate}
.section-mark{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:20px;color:var(--gold)}
.section-mark span{width:52px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.section-mark span:last-child{transform:scaleX(-1)}
.section-mark i{font-style:normal;font-size:11px}
.date{overflow:hidden;background:radial-gradient(circle at 70% 15%,#fff9,transparent 28%),#f2e9df}
.date:before{content:"";position:absolute;z-index:0;width:230px;height:520px;left:-175px;top:-40px;border-radius:50%;background:var(--ruby);box-shadow:inset -12px 0 0 #b78b3f26;transform:rotate(8deg)}
.date-number{position:relative;color:var(--ruby);text-shadow:0 7px 18px #851c2d1c}
.date-flourish{position:absolute;bottom:-8px;left:42%;font:400 45px var(--serif);color:var(--gold);transform:rotate(-18deg)}
.date-lockup div{border-left-color:var(--gold-soft)}
.date-lockup b{color:var(--ink)}
.date-lockup small{color:var(--gold)}
.line-icon,.countdown-icon,.route-button svg,.location-pin svg,.input-shell>svg,.submit svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.line-icon{width:18px;height:18px;color:var(--gold)}
.time-line span{background:linear-gradient(90deg,transparent,var(--gold))}
.time-line span:last-child{transform:scaleX(-1)}
.countdown{gap:0;margin:48px auto 0;max-width:360px}
.countdown-unit{position:relative;flex:1;padding:0 14px}
.countdown-unit+ .countdown-unit:before{content:"";position:absolute;left:0;top:4px;height:82%;width:1px;background:linear-gradient(transparent,var(--gold-soft),transparent)}
.countdown-icon{width:27px;height:27px;margin:0 auto 9px;color:var(--gold)}
.countdown b{color:var(--ink);font-size:42px;line-height:1;transition:opacity .22s ease,transform .22s ease}
.countdown b.tick{opacity:.3;transform:translateY(-5px)}
.countdown span{margin-top:8px;color:var(--muted)}
.sound-wave-inline{position:relative;z-index:2;height:24px;margin:40px auto -18px;display:flex;align-items:center;justify-content:center;gap:5px;color:var(--gold)}
.sound-wave-inline:before,.sound-wave-inline:after{content:"";width:74px;height:1px;background:linear-gradient(90deg,transparent,var(--gold-soft))}
.sound-wave-inline:after{transform:scaleX(-1)}
.sound-wave-inline i{display:block;width:2px;height:7px;border-radius:2px;background:currentColor}
.sound-wave-inline i:nth-child(2),.sound-wave-inline i:nth-child(6){height:12px}.sound-wave-inline i:nth-child(3),.sound-wave-inline i:nth-child(5){height:18px}.sound-wave-inline i:nth-child(4){height:24px}
.location{background:#faf6f1}
.location-pin{position:relative;z-index:2;width:54px;height:54px;margin:-77px auto 18px;border:1px solid var(--gold-soft);border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--gold);box-shadow:0 9px 25px #74562916}
.location-pin svg{width:27px;height:27px}
.location-pin.visible{animation:pinDrop .75s cubic-bezier(.2,.8,.2,1) both}
@keyframes pinDrop{0%{opacity:0;transform:translateY(-24px) scale(.75)}70%{transform:translateY(4px) scale(1.05)}100%{opacity:1;transform:none}}
.route-button{gap:10px;background:transparent;color:var(--ruby);border-color:var(--gold);box-shadow:inset 0 0 0 1px #fff,0 8px 24px #76511d10;transition:background .25s,color .25s,transform .25s}
.route-button svg,.submit svg{width:20px;height:20px}
.route-button:active{transform:scale(.97);background:var(--ruby);color:#fff}
.hosts{background:linear-gradient(155deg,#f0e5dc,#faf5ef)}
.rsvp{background:#fffaf5}
.rsvp form>label,.rsvp fieldset{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.rsvp.form-visible form>label,.rsvp.form-visible fieldset{opacity:1;transform:none}
.rsvp.form-visible form>*:nth-child(1){transition-delay:.06s}.rsvp.form-visible form>*:nth-child(2){transition-delay:.13s}.rsvp.form-visible form>*:nth-child(3){transition-delay:.2s}.rsvp.form-visible form>*:nth-child(4){transition-delay:.27s}
.input-shell{display:flex;align-items:center;gap:10px;border:1px solid #d9c4b3;border-radius:14px;padding:0 14px;background:#fffdf9;transition:border-color .2s,box-shadow .2s,transform .2s}
.input-shell:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px #b78b3f17;transform:translateY(-1px)}
.input-shell>svg{width:20px;height:20px;flex:0 0 auto;color:var(--gold)}
.input-shell input,.input-shell textarea{border:0;padding:14px 0;background:transparent}
.textarea-shell{align-items:flex-start}.textarea-shell>svg{margin-top:14px}
.choice{margin:6px 0;padding:13px 14px;border:1px solid #decabc;border-radius:14px;background:#fffdf9;transition:border-color .2s,background .2s,transform .2s}
.choice:has(input:checked){border-color:var(--gold);background:#fff9ed;transform:translateX(3px)}
.choice input{border-color:var(--gold-soft)}
.choice input:checked{border:5px solid var(--ruby);box-shadow:0 0 0 3px #b78b3f38}
#companion-name-shell{display:none;margin-top:10px}
#companion-name-shell.visible{display:flex}
#companion-name{display:block;margin:0}
.submit{gap:10px;background:linear-gradient(135deg,var(--ruby),var(--ruby-deep));box-shadow:0 12px 30px #851c2d28;border:1px solid #a56b55;transition:transform .25s,box-shadow .25s}
.submit:active{transform:scale(.98);box-shadow:0 5px 15px #851c2d20}
.submit.success{background:#45634b}
.music-control{width:64px;height:64px;right:max(16px,calc((100vw - 520px)/2 + 16px));bottom:16px;display:grid;place-items:center;padding:0;border:1px solid #e1c58b;border-radius:50%;background:radial-gradient(circle at 35% 25%,#a32a3e,var(--ruby-deep));box-shadow:0 10px 28px #4b152a36,0 0 0 4px #fff8;overflow:visible}
.music-ring{position:absolute;inset:-7px;border:1px solid #b78b3f80;border-radius:50%;opacity:.7}
.music-control.playing .music-ring{animation:musicPulse 1.8s ease-out infinite}
@keyframes musicPulse{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.music-bars{height:20px;gap:3px;align-items:center}
.music-bars i{width:2px;height:8px;background:#fff2d1}
.music-bars i:nth-child(2),.music-bars i:nth-child(4){height:14px}.music-bars i:nth-child(3){height:20px}
.music-label{position:absolute;top:-20px;color:var(--ruby);font:600 7px var(--sans);letter-spacing:.18em;text-shadow:none}
.music-control.playing .music-bars i{animation:musicBar .58s ease-in-out infinite alternate}
.reveal{transition-duration:.9s;transition-timing-function:cubic-bezier(.2,.75,.2,1)}
.reveal:nth-child(2n){transition-delay:.08s}
@media(max-width:370px){.date:before{left:-195px}.countdown-unit{padding:0 9px}.countdown b{font-size:36px}.music-control{width:58px;height:58px}}
@media(max-width:420px){.names{font-size:clamp(32px,9.2vw,39px);letter-spacing:-.02em}.names i{font-size:18px}}
@media(prefers-reduced-motion:reduce){.location-pin.visible,.music-control.playing .music-ring,.music-control.playing .music-bars i{animation:none}.rsvp form>label,.rsvp fieldset{opacity:1;transform:none}}

/* Reference-led ceremonial redesign v4 */
:root{
  --paper:#fffaf1;
  --paper-deep:#f6eddf;
  --ink:#321b16;
  --ruby:#8f1027;
  --ruby-deep:#620818;
  --gold:#bd8731;
  --gold-soft:#e2c58d;
  --line:#d7b873;
}
html,body{background:#ddd6ce}
.invitation{
  background:
    radial-gradient(circle at 15% 7%,#fff 0 4%,transparent 18%),
    linear-gradient(90deg,transparent 0 49.7%,#c89e4b0a 50%,transparent 50.3%),
    var(--paper);
}
.hero,.section{background-color:var(--paper)}
.hero:after,.section:after{
  opacity:.42;
  background-image:
    radial-gradient(ellipse 120px 55px at 0 0,transparent 60%,#c89b4b12 61% 62%,transparent 63%),
    radial-gradient(ellipse 130px 62px at 100% 100%,transparent 61%,#8f10270a 62% 63%,transparent 64%),
    radial-gradient(circle at 50% 50%,#fff7 0 1px,transparent 1.5px);
  background-size:260px 170px,280px 190px,19px 19px;
}
.hero:before,.welcome:before,.location:before,.rsvp:before{
  content:"";
  position:absolute;
  z-index:1;
  pointer-events:none;
  width:150px;
  height:150px;
  right:-85px;
  top:25px;
  border:1px solid #c6923c34;
  border-radius:54% 46% 58% 42%;
  box-shadow:0 0 0 12px #c6923c0b,0 0 0 24px #c6923c08;
  transform:rotate(32deg);
}
.date{
  isolation:isolate;
  overflow:visible;
  padding-top:104px;
  padding-bottom:106px;
  background:
    radial-gradient(circle at 52% 24%,#fff 0,transparent 35%),
    linear-gradient(180deg,#fffaf2,#f8eee1);
  border-top:1px solid #d4aa5c66;
  border-bottom:1px solid #d4aa5c66;
  box-shadow:inset 0 14px 35px #6d321009,inset 0 -18px 40px #7d30140d;
}
.date:before{
  width:190px;
  height:115%;
  left:-116px;
  top:-6%;
  border-radius:0 70% 58% 0/0 38% 62% 0;
  background:
    linear-gradient(90deg,transparent 72%,#e1b55d 73% 75%,#fff4c2 76%,transparent 78%),
    radial-gradient(ellipse at 70% 45%,#b52b41,#750d21 62%,#500614);
  box-shadow:inset -22px 0 32px #35020f66,8px 0 22px #5d091621;
  transform:none;
}
.date:after{
  opacity:.55;
  background:
    radial-gradient(ellipse at 50% 36%,transparent 0 24%,#bd87310b 25% 26%,transparent 27%),
    radial-gradient(ellipse at 50% 36%,transparent 0 34%,#8f102708 35% 36%,transparent 37%),
    radial-gradient(circle at 50% 36%,#fff8 0 2px,transparent 3px);
  background-size:100% 100%;
}
.date>*{position:relative;z-index:2}
.date .section-mark{margin-bottom:26px}
.date .eyebrow{font-size:11px;letter-spacing:.34em;color:#4a2a21}
.date-lockup{
  display:block;
  margin:23px 0 30px;
}
.date-lockup>span{
  display:block;
  font-size:clamp(132px,39vw,188px);
  line-height:.72;
  color:var(--ruby);
  text-shadow:0 8px 20px #6f10211e;
}
.date-lockup div{
  display:flex;
  flex-direction:column;
  align-items:center;
  margin:37px auto 0;
  padding:24px 0 0;
  max-width:300px;
  border-left:0;
  border-top:1px solid var(--gold);
}
.date-lockup div:before{
  content:"◆";
  position:absolute;
  margin-top:-34px;
  padding:0 12px;
  background:var(--paper);
  color:var(--gold);
  font-size:9px;
}
.date-lockup b{font-size:31px;letter-spacing:.34em;padding-left:.34em}
.date-lockup small{font-size:37px;letter-spacing:.12em;color:var(--gold)}
.date-flourish{bottom:-14px;font-size:55px}
.time-line{margin-top:29px}
.time-line strong{font:500 16px var(--serif)}
.countdown{
  max-width:440px;
  margin-top:52px;
  gap:0;
}
.countdown-unit{min-width:0;padding:0 8px}
.countdown-unit+.countdown-unit:before{height:88%;top:1px}
.countdown-icon{width:25px;height:25px}
.countdown b{font-size:clamp(31px,9vw,43px);font-variant-numeric:tabular-nums}
.countdown b.tick{animation:numberFlip .36s cubic-bezier(.2,.8,.2,1)}
.seconds-unit{color:var(--ruby)}
.seconds-unit b{color:var(--ruby)}
.seconds-icon{filter:drop-shadow(0 0 5px #bd873140)}
@keyframes numberFlip{
  0%{opacity:1;transform:translateY(0) scale(1)}
  45%{opacity:0;transform:translateY(-9px) scale(.88)}
  46%{transform:translateY(9px) scale(.88)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.sound-wave-inline{margin-top:55px}
.sound-wave-inline i{animation:quietWave 1.15s ease-in-out infinite alternate}
.sound-wave-inline i:nth-child(2n){animation-delay:-.45s}
@keyframes quietWave{to{transform:scaleY(.52);opacity:.55}}
.organic-hall{
  height:340px;
  margin:-10px 5px 54px;
  border:2px solid #c9953f;
  outline:1px solid #efd69e;
  outline-offset:5px;
  border-radius:44% 56% 42% 58%/18% 18% 20% 20%;
  box-shadow:0 15px 35px #542b1719;
}
.location{padding-top:96px;background:linear-gradient(#fffaf2,#fffdf8)}
.location h2{color:var(--ink);font-size:56px}
.location-pin{border-radius:44% 56% 48% 52%;transform:rotate(4deg)}
.hosts{background:linear-gradient(160deg,#fff9ef,#f7eadb)}
.hosts:before,.rsvp:before{
  content:"";
  position:absolute;
  z-index:1;
  inset:18px 14px;
  pointer-events:none;
  border:1px solid #c89a4a55;
  border-radius:48% 52% 47% 53%/8% 8% 7% 7%;
}
.rsvp{
  padding-top:98px;
  background:
    radial-gradient(ellipse at top,#fff 0,transparent 38%),
    linear-gradient(#fffaf3,#f9eddf);
}
.rsvp .script{color:var(--ruby)}
.input-shell,.choice{
  border-color:#d3ad68;
  border-radius:18px 10px 18px 10px;
  box-shadow:inset 0 0 0 1px #fff,0 4px 12px #8c55250a;
}
.choice:has(input:checked){border-color:var(--ruby);background:#fff8e9}
.submit{
  min-height:59px;
  border-radius:9px 18px 9px 18px;
  border:1px solid #d9aa54;
  outline:1px solid #6e0c1b;
  outline-offset:-5px;
  font-family:var(--serif);
  font-size:14px;
}
.music-control{
  width:72px;height:72px;
  border:2px solid #e8c781;
  box-shadow:0 12px 30px #4b152a36,0 0 0 5px #fff9,0 0 0 7px #c8953a77;
}
@media(max-width:390px){
  .date{padding-left:20px;padding-right:20px}
  .date:before{left:-132px}
  .countdown-unit{padding:0 5px}
  .countdown span{font-size:7px;letter-spacing:.08em}
  .countdown b{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
  .countdown b.tick,.sound-wave-inline i{animation:none}
}