:root{--ink:#153d88;--gold:#5ab8c7;--gold-ink:#245cc0;--paper:#d7eef8;--muted:#315b86}
body{background:#d7eef8;color:#153d88}.paper{background:linear-gradient(145deg,#e0f3f8,#c5e8f3 55%,#d9f0f8)}.sage{background:linear-gradient(120deg,#8ed9e7,#61b9d1 55%,#9bdde8)}.dark{background:linear-gradient(125deg,#153d88,#245cc0 55%,#123570);color:#eefbff;--gold-ink:#b5e5df}
.surface:before{content:'';position:absolute;inset:0;background:url(assets/water.webp) center/cover no-repeat;mix-blend-mode:soft-light;opacity:.3;pointer-events:none;z-index:0;mask-image:linear-gradient(transparent,#000 150px,#000 calc(100% - 150px),transparent)}.surface:after{content:'';position:absolute;inset:0;background:url(assets/marine-line.webp) center/840px auto repeat-y;opacity:.085;pointer-events:none;z-index:0}.paper:before{opacity:.2}.sage:before{opacity:.32}.dark:before{mix-blend-mode:screen;opacity:.22}.dark:after{opacity:.12}.surface>*{position:relative;z-index:1}.surface>.divider,.surface>.divider-foliage{position:absolute;z-index:3}.eyebrow{font-size:12px;letter-spacing:.22em}.signature,.script-label{color:#245cc0}.dark .signature,.dark .script-label{color:#b5e5df}
h1,h2,h3{font-family:Display,Georgia,serif;font-weight:400}h2{line-height:1.13;letter-spacing:-.035em}.button{background:#245cc0;color:#eefbff;border-color:#245cc0;font-size:14px;border-radius:3px}.button:hover{background:#153d88;color:#fff}.button-outline{background:transparent;border-color:#153d8880;color:#153d88}.button-light{background:#e1f5fa;color:#153d88;border-color:#e1f5fa}.button-light:hover{background:#b5e5df;color:#153d88}.text-button{font-size:14px;border-color:#245cc077}.fine-rule{background:#5ab8c7}.music-button{background:#153d88;color:#e1f5fa;border-color:#b5e5df99}.music-button[aria-pressed=true]{background:#e1f5fa;color:#153d88}
.entry{background:radial-gradient(ellipse at 50% 15%,#477fd0,#153d88 75%);overflow-y:auto;overflow-x:hidden}.entry:after{background:url(assets/marine-line.webp) center/700px auto repeat-y;opacity:.09;mask-image:none}.entry-orbit{width:min(550px,88vw);height:82%;border-radius:46% 46% 28% 28%;border-color:#b5e5df88;transform:none}.entry-orbit:after{border-color:#b5e5df33;border-radius:46% 46% 28% 28%;inset:12px;transform:none}.entry-wave{position:absolute;bottom:3%;left:0;right:0;height:170px;background:url(assets/wave-lines.png) center bottom/100% auto no-repeat;opacity:.32;pointer-events:none}.entry h1{font-family:Hand,cursive;color:#f0fdff;font-size:clamp(80px,9vw,115px)}.entry h1 em{color:#b5e5df;font-size:33px}.entry-date,.entry-message{color:#d7eef8}.entry-message{font-size:16px}.entry .button{background:#e1f5fa;color:#153d88;border-color:#e1f5fa}.entry .text-button{color:#eefbff;border-color:#b5e5df88}.entry-actions button{min-width:245px;min-height:52px}
.hero{background:#153d88;color:#f2fdff;min-height:840px}.hero-photo{filter:none;object-position:center 54%}.hero-shade{background:linear-gradient(180deg,#12357099 0%,#1235702e 52%,#12357099 100%)}.hero-copy{top:13%;padding:0 20px;z-index:4}.hero h1{font-size:clamp(80px,8.5vw,118px);line-height:1.05}.hero h1>span{display:block}.hero h1 em{font-family:Hand,cursive;color:#b5e5df;font-size:.75em}.hero-date{font-size:16px}.hero-date span{background:#b5e5dfaa}.hero-message{display:none}.hero .scroll-cue{bottom:150px;font-size:11px;z-index:5}.scroll-cue i{color:#e1f5fa}
.wave-field{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}.wave-layer{position:absolute;inset:0;background:url(assets/wave-lines.png) center 0/100% auto no-repeat;opacity:0}.wave-back{filter:drop-shadow(0 0 5px #a4e1f4aa);opacity:.38;transform:translateY(-130px) scaleX(-1)}.wave-front{opacity:.88;transform:translateY(-140px)}.entered .wave-back{animation:waveDescendBack 3.3s cubic-bezier(.24,.12,.38,1) .08s both}.entered .wave-front{animation:waveDescend 2.7s cubic-bezier(.25,.11,.34,1) both}@keyframes waveDescend{from{opacity:.38;transform:translateY(-140px)}to{opacity:.88;transform:translateY(0)}}@keyframes waveDescendBack{from{opacity:.15;transform:translateY(-170px) scaleX(-1)}to{opacity:.38;transform:translateY(0) scaleX(-1)}}
.divider{height:210px}.section-top{top:-209px}.hero-divider{height:210px}.divider-foliage{background:url(assets/marine-line.webp) center/contain no-repeat;mask:none;opacity:.3;width:240px;height:200px;transform:none}.story-leaf,.album-leaf{right:0;left:auto;bottom:90px;rotate:0}.event-leaf,.details-leaf{left:0;right:auto;bottom:90px;rotate:180deg}.rsvp-leaf{right:0;left:auto;bottom:80px;rotate:0}.story,.event,.album,.agenda,.details,.rsvp{padding-bottom:290px}.story{padding-top:50px}.countdown{padding-bottom:100px}.count-grid strong{font-size:64px;color:#245cc0}.count-grid i,.tiny-heart{color:#5ab8c7}.count-grid span{font-size:12px;color:#315b86}.story h2{color:#153d88}.story-copy>p{font-size:16px;color:#315b86}.story .signature{margin-top:40px}.event-intro{gap:85px}.event-intro h2,.agenda h2{color:#153d88}.date-seal{width:310px;height:340px;border:1px solid #153d8880;border-radius:47% 47% 47% 47%;box-shadow:inset 0 0 0 9px #e0f3f855}.date-seal strong{font-size:148px;color:#245cc0}.date-seal>span{font-size:13px}.event-details{gap:85px}.event-details article+article{border-color:#153d8850}.event-time{color:#245cc0}.event-details p:not(.eyebrow):not(.event-time){font-size:16px;color:#315b86}
.album-layout{display:block;max-width:910px;margin:auto}.album-copy{text-align:center;margin-bottom:65px}.album-copy .fine-rule{margin-left:auto}.album-copy h2{color:#f2fdff}.album-copy>p{color:#d7eef8;font-size:16px}.album-stage{width:100%;aspect-ratio:3/2;border-radius:48% 48% 4px 4px;outline:1px solid #b5e5df99;outline-offset:11px}.slide{object-fit:contain;transform:none}.album-controls button{color:#e1f5fa}.timeline time{color:#245cc0;font-size:15px}.timeline li>div{border-color:#245cc088}.timeline li>div:before{background:#245cc0}.timeline p,.detail-grid p{font-size:16px;color:#315b86}.detail-index{color:#245cc0;font-size:12px}.detail-grid article+article:before{background:linear-gradient(transparent,#245cc077,transparent)}.notes-row{font-size:16px;border-color:#245cc077}.rsvp h2{color:#e1f5fa}.rsvp-content>p:not(.eyebrow){color:#d7eef8;font-size:16px}.closing{height:780px}.closing>img{filter:none;object-position:center 58%}.closing-shade{background:#153d8888}.closing-copy .signature{color:#b5e5df}.closing-copy h2{font-family:Display,serif;font-size:clamp(58px,7vw,90px)}footer p{font-size:13px;color:#315b86}footer em{color:#245cc0}dialog{background:#d7eef8;color:#153d88;border-color:#5ab8c7}dialog h2{color:#245cc0}dialog p{font-size:16px}label{font-size:14px}input,select{color:#153d88;border-color:#245cc077}.form-note{color:#315b86}.form-result{background:#b5e5df;border-color:#245cc0}.modal-close{color:#153d88}
@media(min-width:701px){.hero-photo{object-position:center 40%}.hero-copy{top:10%}.hero .scroll-cue{top:55%;bottom:auto}}
@media(max-width:700px){.entry h1{font-size:83px}.entry .eyebrow{font-size:11px}.entry-orbit{width:88vw;height:88%}.entry-wave{height:120px;bottom:3%}.hero{min-height:820px}.hero-photo{object-position:center 43%}.hero-copy{top:14%}.hero h1{font-size:61px;max-width:320px;margin:18px auto;line-height:1.03}.hero h1 em{font-size:41px;display:inline;margin:0 3px 0 0}.hero-date{font-size:14px;margin-top:16px}.hero .scroll-cue{bottom:140px;font-size:10px}.wave-layer{background-size:125% auto;background-position:center 0}.divider{height:160px}.section-top{top:-159px}.story,.event,.album,.agenda,.details,.rsvp{padding-bottom:245px}.story{padding-top:50px}.story h2,.album-copy h2{font-size:48px}.story-copy>p{font-size:16px}.count-grid strong{font-size:50px}.date-seal{width:270px;height:315px}.date-seal strong{font-size:130px}.event-intro h2{font-size:52px}.event-details article+article{margin-top:80px;padding-top:65px;border-color:#153d8855}.album-copy{margin-bottom:50px}.album-stage{aspect-ratio:3/2;border-radius:42% 42% 4px 4px;outline-offset:8px}.divider-foliage{width:170px;height:145px}.story-leaf,.album-leaf,.rsvp-leaf{bottom:70px;right:-15px}.event-leaf,.details-leaf{bottom:70px;left:-15px}.timeline h3,.detail-grid h3{font-size:35px}.rsvp h2{font-size:52px}.closing{height:700px}.closing-copy h2{font-size:58px}}
@media(prefers-reduced-motion:reduce){.entered .wave-layer{animation:none}.wave-layer{opacity:.4;transform:none}.hero-photo{animation:none!important}}

/* La portada se revela pronto para que el descenso sea visible completo. */
.entry{transition:opacity .45s ease,visibility .45s ease}
/* Las líneas nacen desde arriba y enmarcan la foto sin atravesar los nombres. */
@media(min-width:701px){.wave-layer{background-position:center -140px}}
@media(max-width:700px){.wave-layer{background-position:center 0}}
@media(min-width:701px){.hero .scroll-cue{top:auto;bottom:168px}}
/* Olas ilustradas con cresta y espuma; un solo movimiento legible. */
.entry-orbit{display:none}
.entry-wave{bottom:0;height:138px;background:url(assets/wave-foam.webp) center bottom/100% auto no-repeat;opacity:.42}
.wave-field{height:210px;bottom:auto}
.wave-layer{background-image:url(assets/wave-foam.webp);background-size:100% auto;background-position:center -45px}
.wave-back{display:none}
.wave-front{opacity:0;transform:translateY(-128px)}
.entered .wave-front{animation:waveFoamArrive 3.15s cubic-bezier(.22,.11,.35,1) both}
@keyframes waveFoamArrive{from{opacity:.12;transform:translateY(-128px)}to{opacity:.78;transform:translateY(0)}}
/* Un marco cuadrado constante y una imagen que cubre toda su superficie. */
.album-layout{max-width:720px}
.album-stage{width:min(100%,590px);aspect-ratio:1;border-radius:3px;background:#153d88;outline:none;margin:auto}
.slide{object-fit:cover;object-position:center center}
@media(min-width:701px){.wave-field{height:150px}.wave-layer{background-size:100% 230px;background-position:center top}.entry-wave{height:180px}}
@media(max-width:700px){.wave-field{height:145px}.wave-layer{background-size:100% auto;background-position:center -16px}.album-stage{aspect-ratio:1;border-radius:3px}}
@media(prefers-reduced-motion:reduce){.wave-front{opacity:.78;transform:none}}
/* La espuma se disuelve en el cielo, sin borde recto ni texto cubierto. */
.entry-wave{bottom:-70px;opacity:.32}
.wave-field{height:142px;mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
.wave-layer{background-size:100% auto;background-position:center -18px}
@media(min-width:701px){.hero .scroll-cue{left:7%;width:auto;bottom:172px}.wave-field{height:145px}.wave-layer{background-size:100% auto;background-position:center -28px}}
@media(max-width:700px){.entry-wave{bottom:-52px}.wave-field{height:135px}.wave-layer{background-size:100% auto;background-position:center -12px}}
/* Dos crestas completas brotan desde los extremos; el título queda libre. */
.entry-content{transform:translateY(-65px)}
.wave-field{height:230px;mask-image:none}
.wave-layer{inset:auto;top:0;width:43%;height:230px;background-size:100% auto;background-position:center top}
.wave-front{left:-3%;right:auto}
.wave-back{display:block;left:auto;right:-3%;filter:none;opacity:0;transform:translateY(-150px) scaleX(-1)}
.entered .wave-back{animation:waveFoamBack 3.35s cubic-bezier(.22,.11,.35,1) .12s both}
@keyframes waveFoamBack{from{opacity:.08;transform:translateY(-150px) scaleX(-1)}to{opacity:.66;transform:translateY(0) scaleX(-1)}}
@media(min-width:701px){.wave-field{height:230px}.wave-layer{width:43%;height:230px;background-size:100% auto;background-position:center top}}
@media(max-width:700px){.entry-content{transform:translateY(-70px)}.wave-field{height:130px}.wave-layer{width:63%;height:130px;background-size:100% auto;background-position:center top}.wave-front{left:-9%}.wave-back{right:-9%}}
@media(prefers-reduced-motion:reduce){.wave-back{opacity:.66;transform:scaleX(-1)}}
.wave-front{mask-image:linear-gradient(to right,#000 0%,#000 63%,transparent 100%)}
.wave-back{width:39%;top:12px;background-size:118% auto;background-position:65% top;mask-image:linear-gradient(to left,#000 0%,#000 59%,transparent 100%)}
@media(max-width:700px){.wave-front{width:66%}.wave-back{width:56%;top:8px}}
.wave-back{mask-image:linear-gradient(to right,#000 0%,#000 56%,transparent 100%)}

/* Trazos marinos delicados, con interiores transparentes. */
.surface>.divider-foliage{width:190px;height:190px;bottom:80px;opacity:.38;rotate:0;background:#153d88;mask:var(--marine-art) center/contain no-repeat;z-index:4}
.surface.dark>.divider-foliage{background:#c4eaf5;opacity:.3}
.surface>.story-leaf,.surface>.album-leaf,.surface>.rsvp-leaf{--marine-art:url(assets/starfish-line.webp);left:22px;right:auto;rotate:-12deg}
.surface>.event-leaf,.surface>.details-leaf{--marine-art:url(assets/oyster-line.webp);right:22px;left:auto;rotate:12deg}
.story,.event,.album,.details,.rsvp{padding-bottom:335px}
@media(max-width:700px){
  .surface>.divider-foliage{width:150px;height:150px;bottom:70px}
  .surface>.story-leaf,.surface>.album-leaf,.surface>.rsvp-leaf{left:12px;right:auto}
  .surface>.event-leaf,.surface>.details-leaf{right:12px;left:auto}
  .story,.event,.album,.details,.rsvp{padding-bottom:270px}
}

/* Header Marea: ondas de gouache que nacen de ambos laterales. */
#inicio .wave-field{inset:0;height:auto;mask-image:none;overflow:hidden}
#inicio .wave-layer{top:-55px;width:clamp(260px,31vw,420px);height:auto;aspect-ratio:1;background:url(assets/wave-swirl.webp) center/contain no-repeat;mask-image:none;filter:none;opacity:0}
#inicio .wave-front{left:-115px;right:auto;transform:translateX(-100%)}
#inicio .wave-back{left:auto;right:-115px;transform:translateX(100%) scaleX(-1)}
.entered #inicio .wave-front{animation:swirlFromLeft 3s cubic-bezier(.22,.15,.3,1) both}
.entered #inicio .wave-back{animation:swirlFromRight 3s cubic-bezier(.22,.15,.3,1) both}
@keyframes swirlFromLeft{from{opacity:0;transform:translateX(-100%)}to{opacity:.9;transform:translateX(0)}}
@keyframes swirlFromRight{from{opacity:0;transform:translateX(100%) scaleX(-1)}to{opacity:.9;transform:translateX(0) scaleX(-1)}}
@media(max-width:700px){
  #inicio .wave-layer{top:-20px;width:205px;height:auto;aspect-ratio:1;background-size:contain;background-position:center}
  #inicio .wave-front{left:-110px}
  #inicio .wave-back{right:-110px}
}
@media(prefers-reduced-motion:reduce){
  .entered #inicio .wave-layer{animation:none;opacity:.9}
  #inicio .wave-front{transform:none}
  #inicio .wave-back{transform:scaleX(-1)}
}