:root{--paper:#faf6ed;--teal:#184b50;--deep:#18464b;--text:#344e4d;--muted:#526b62;--line:#b9c9bf;--gold:#dbc1a5;--serif:"Baskerville","Palatino Linotype",Georgia,serif;--script:"Snell Roundhand","Apple Chancery",Georgia,serif;--sans:system-ui,-apple-system,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--text);font:16px/1.65 var(--sans)}a{color:inherit}a:focus-visible{outline:2px solid currentColor;outline-offset:5px}p,figure,dl,dd,ul{margin:0}section{scroll-margin-top:1.5rem}.wrap{width:min(1100px,calc(100% - 48px));margin-inline:auto}.centered{text-align:center}.skip{position:absolute;top:1rem;left:1rem;z-index:5;background:white;color:#133;padding:.5rem;transform:translateY(-200%)}.skip:focus{transform:none}
.invitation-page{width:min(100%,680px);margin-inline:auto;background:var(--paper);box-shadow:0 0 65px #244f4826}
body{background:repeating-linear-gradient(100deg,#dfe9e1 0 1px,#e4ece5 1px 6px)}
.hero{position:relative;overflow:hidden;color:var(--teal);background:radial-gradient(ellipse at 50% 30%,#fffaf1,#f7efdf 80%);text-align:center}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;width:min(1240px,calc(100% - 64px));margin:auto;padding:20px 0;border-bottom:1px solid #749a8e70}.brand{text-decoration:none;font:30px/1 var(--serif);letter-spacing:-.08em;white-space:nowrap}.brand span{font-style:italic;font-size:.65em;margin-inline:4px;color:#9b7460}footer .brand span{color:var(--gold)}.navlinks{display:flex;gap:clamp(.8rem,3.4vw,2.6rem)}.navlinks a{text-decoration:none;font-size:.74rem;letter-spacing:.11em;text-transform:uppercase}.navlinks a:hover{text-decoration:underline;text-underline-offset:5px}
.hero-inner{width:min(460px,calc(100% - 52px));margin:auto;display:grid;justify-items:center;gap:22px;padding:37px 0 78px}
.invitation-paper{position:relative;width:100%;padding-top:75px}
.pearl-strand{position:absolute;width:55px;height:auto;top:0;left:50%;transform:translateX(-50%);filter:drop-shadow(0 3px 2px #886d5d47)}
.eyebrow{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;font-weight:650;color:#3d625a}
h1,h2{margin:0;font:400 clamp(2.75rem,6vw,5rem)/.99 var(--serif);color:var(--teal);letter-spacing:-.045em}h1{font:italic 400 clamp(3.55rem,11vw,5.25rem)/.9 var(--script);letter-spacing:-.065em;margin:10px auto 0;width:max-content;max-width:100%;text-align:left}h1 i{display:block;font:italic 400 .55em/1.07 var(--serif);letter-spacing:0;color:#986f59;text-align:center}.invitation-line{font:1.04rem var(--serif);letter-spacing:.02em}.shell{width:52px;height:46px;margin:12px 0 0}
.postcard{position:relative;width:min(100%,485px);background:#fff9ed;padding:9px 9px 31px;box-shadow:0 11px 26px #4e5f5140;transform:rotate(-1.2deg);margin:0 0 15px}.postcard::before{content:"";position:absolute;top:-12px;width:35%;height:25px;background:#d8bd8c95;left:30%;transform:rotate(-8deg);clip-path:polygon(0 0,99% 5%,96% 37%,100% 63%,98% 96%,1% 100%,4% 60%,0 35%)}.postcard > img:first-child{display:block;width:100%;height:auto;aspect-ratio:1.6;object-fit:cover;background:#c1d8d2}.postcard figcaption{position:absolute;right:16px;bottom:-19px;padding:11px 20px;background:#eee0c9;color:#305a5b;transform:rotate(3deg);box-shadow:0 3px 8px #4e5f5130;font:1.12rem var(--serif)}.postcard figcaption span{display:block;text-transform:uppercase;letter-spacing:.11em;font:650 .6rem/1.7 var(--sans)}.postcard-shell{position:absolute;width:89px;height:auto;bottom:-19px;left:-14px;transform:rotate(-17deg);filter:drop-shadow(0 4px 3px #65473755)}.postmark{position:absolute;width:85px;height:85px;right:14px;top:17px;color:#f9f3e6;transform:rotate(11deg);opacity:.9}.postmark circle,.postmark path{fill:none;stroke:currentColor;stroke-width:.85}.postmark text{fill:currentColor;text-anchor:middle;font:9px var(--sans);letter-spacing:1.15px}
.hero-inner>.button{background:#faf6ed}.hero-inner>.button:hover{background:var(--teal)}
.intro-star{width:58px;height:auto;position:absolute;right:7%;bottom:12px;transform:rotate(13deg);pointer-events:none}.venue-pearls{position:absolute;width:clamp(52px,20%,86px);height:auto;right:-9px;bottom:-12px;transform:rotate(-17deg);filter:drop-shadow(0 3px 2px #74544750);pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:1.1em;border:1px solid;padding:12px 19px;text-decoration:none;font-size:.75rem;font-weight:650;letter-spacing:.085em;transition:background .2s,color .2s}.outline{color:var(--teal);border-color:#637f73}.outline:hover{background:var(--teal);color:var(--paper)}
.intro{position:relative;text-align:center;background:#dcebe6;padding:65px 0 74px}.eyebrow+h2{margin-top:13px}.intro .wrap>p:last-of-type,.attire .wrap>p:nth-of-type(2){margin:19px auto 0;max-width:510px}.countdown{display:flex;align-items:center;justify-content:center;margin:35px auto 0;max-width:480px;border-block:1px solid var(--line);min-height:91px}.countdown div{width:25%;padding:7px 4px;display:grid;gap:2px}.countdown div+div{border-left:1px solid var(--line)}.countdown span{font:2.25rem/1 var(--serif);color:var(--teal);font-variant-numeric:tabular-nums}.countdown small{font-size:.63rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
.wedding-day{padding:64px 0 57px}
.day-timeline{padding:0;list-style:none;width:min(100%,390px);margin:28px auto 0;text-align:left}
.day-timeline li{display:grid;grid-template-columns:1fr 28px 1fr;align-items:center;gap:12px;min-height:72px}
.day-timeline time,.timeline-when{text-align:right;font:1.16rem var(--serif);color:var(--teal)}
.day-timeline p{font-size:.86rem}
.timeline-pearl{position:relative;align-self:stretch;display:grid;place-items:center}
.timeline-pearl::before{content:"";position:absolute;inset:0 auto;width:1px;background:#bfa699}
.timeline-pearl::after{content:"";position:relative;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fffefa 6%,#f3e8dd 48%,#c6a99b 78%,#a98678);box-shadow:0 2px 3px #5e443e33}
.venue{padding:65px 0;background:#dcebe6}
.venue h2{font-size:clamp(2.6rem,8vw,4.35rem)}
.venue-frame{position:relative;width:min(100%,480px);aspect-ratio:1.55;margin:24px auto;background:#faf5e9;padding:9px;box-shadow:0 10px 28px #143e4024;border-radius:36% 36% 9px 9px / 29% 29% 9px 9px}
.venue-watercolor{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:inherit}
.location{margin-top:10px}
h3{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:#395f56;font-weight:700}
.attire{background:#f7f2e9;padding:82px 0;border-block:1px solid #e2ddcf}.attire-figure{max-width:720px;margin:24px auto 18px}.attire-figure > img{display:block;width:100%;height:auto;max-height:490px;object-fit:contain;mix-blend-mode:multiply}.swatches{list-style:none;padding:0;display:flex;justify-content:center;gap:clamp(13px,5vw,46px);flex-wrap:wrap}.swatches li{display:grid;justify-items:center;gap:7px;font-size:.8rem}.swatches span{display:block;width:44px;height:44px;border-radius:50%;background:var(--swatch);border:1px solid #30291920}.dress-note{margin-top:23px;color:#365a51;font-weight:650;font-size:.87rem}
.entourage{padding:95px 0}.parents,.honor,.party{display:grid;gap:18px;padding:22px 8px;border-bottom:1px solid var(--line);max-width:810px;margin:auto}.parents{grid-template-columns:repeat(2,1fr);margin-top:28px;border-top:1px solid var(--line)}.honor{grid-template-columns:repeat(3,1fr)}.party{grid-template-columns:repeat(2,1fr)}h3{margin:0 0 7px}.party ul{list-style:none;padding:0}.party li+li{margin-top:4px}
.unplugged{background:#d9e8e2;padding:60px 20px;color:var(--teal);border-block:1px solid #bdcec5}.unplugged h2{font-size:clamp(2.45rem,5vw,3.7rem)}.unplugged p{margin-top:13px}footer{background:var(--deep);color:#f8edda;padding:33px 16px}footer p{margin-top:8px}footer small{color:#dfd7c4}.definitions{position:absolute;overflow:hidden}
@media(max-width:700px){nav{width:calc(100% - 34px)}.navlinks{gap:13px}.navlinks a{font-size:.65rem;letter-spacing:.025em}.intro,.entourage{padding:60px 0}.attire{padding:57px 0}.party{grid-template-columns:1fr;gap:25px}.swatches span{width:38px;height:38px}}
@media(max-width:390px){.honor{grid-template-columns:1fr}.wrap{width:calc(100% - 34px)}.navlinks{gap:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

@media(max-width:700px){.postcard-shell{width:64px;height:auto;left:-12px}.postmark{width:65px;height:65px}.postcard figcaption{font-size:.99rem}.intro-star{width:39px;height:auto;bottom:9px;right:5%}}

/* Small arrangements from the uploaded beach collage sheets. */
.beach-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 2vw, 16px);
  margin: 23px auto;
  max-width: 440px;
}
.beach-strip img {
  width: min(13%, 48px);
  height: clamp(32px, 9vw, 50px);
  object-fit: contain;
  filter: drop-shadow(0 2px 2px #3e524226);
  transform: rotate(-8deg);
}
.beach-strip img:nth-child(even) { transform: rotate(9deg); }
.beach-strip img:nth-child(3n) { transform: rotate(-3deg) translateY(-3px); }
.cover-treasures { width: 170px; margin: -3px 0 -11px; }
.cover-treasures img { width: 24%; height: 28px; }
.pearl-strand { width: 95px; }
.timeline-pearl::after { background: url(beach/loose-pearl.webp) center / contain no-repeat; box-shadow: none; }
.unplugged {
  display: grid;
  grid-template-columns: clamp(74px, 23%, 148px) minmax(0, 1fr);
  align-items: center;
  padding: 0;
}
.shoreline-edge {
  display: block;
  width: 100%;
  height: auto;
  mask-image: linear-gradient(transparent, #000 5px, #000 calc(100% - 5px), transparent);
}
.unplugged-copy {
  padding: clamp(24px, 5vw, 45px) clamp(12px, 4vw, 30px) clamp(24px, 5vw, 45px) 8px;
}
.unplugged-copy h2 { font-size: clamp(1.95rem, 6vw, 3.7rem); }
.unplugged-copy p { max-width: 30ch; margin-inline: auto; }
.final-treasures { margin: 0 auto 19px; padding-inline: 14px; }

/* Coastal stationery details and layered collage framing. */
.invitation-page { width: min(100%, 720px); overflow: clip; }
.hero {
  background:
    radial-gradient(ellipse at 50% 35%, #fffaf2 5%, #f5ecdb 90%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 79px 20px 29px;
  border: 1px solid #b6a68966;
  border-radius: 190px 190px 5px 5px / 80px 80px 5px 5px;
  pointer-events: none;
}
.hero-inner { position: relative; padding-top: 45px; }
.invitation-paper { padding-top: 80px; }
.pearl-strand { width: 106px; }
.hero h1 { text-align: center; }
.postcard {
  padding: 10px 10px 36px;
  box-shadow: 0 16px 35px #34463c26, 0 2px 5px #473f2a26;
}
.postcard figcaption { border: 1px solid #c2ab8490; }
.postcard-shell { bottom: -13px; }
.cover-treasures {
  width: auto;
  position: absolute;
  inset: auto auto 1.2rem 1.1rem;
  margin: 0;
  gap: 5px;
}
.cover-treasures img { width: 23px; height: 24px; }
.hero-inner > .button { border-radius: 100px; }
.intro { background: radial-gradient(ellipse at 50% 0%, #eaf2e9, #d2e4dd); }
.countdown {
  background: #fffaf0aa;
  border: 1px solid #8faea098;
  border-radius: 12px;
  box-shadow: 0 6px 24px #22443e0c;
}
.countdown div + div { border-color: #b9c9bf; }
.wedding-day { padding-bottom: 50px; }
.day-timeline {
  border-block: 1px solid var(--line);
  padding: 12px 0;
}
.sea-treasures { opacity: .87; margin-bottom: 0; }
.venue { background: radial-gradient(ellipse at top, #edf1e6, #cddfd8); }
.venue-frame { margin: 34px auto 43px; }
.venue .button { background: #fbf5e9; border-radius: 100px; }
.venue .button:hover { background: var(--teal); }
.attire-figure {
  position: relative;
  width: min(100% - 22px, 540px);
  margin: 29px auto 37px;
  padding: 12px;
  background: #fffaf1;
  border: 1px solid #cbbda7;
  box-shadow: 0 9px 21px #4e483d12;
}
.beach-corners { position: absolute; inset: 0; pointer-events: none; }
.beach-corners img, .attire-figure .beach-corners img {
  position: absolute;
  width: clamp(29px, 9%, 52px);
  height: auto;
  max-height: 76px;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 3px 2px #34463c2e);
}
.beach-corners img:nth-child(1) { left: -5%; bottom: 4%; transform: rotate(-10deg); }
.beach-corners img:nth-child(2) { left: 6%; bottom: -8%; transform: rotate(12deg); }
.beach-corners img:nth-child(3) { right: -5%; bottom: -5%; transform: rotate(9deg); }
.beach-corners img:nth-child(4) { right: 9%; top: -7%; transform: rotate(15deg); }
.beach-corners img:nth-child(5) { left: 12%; top: -6%; transform: rotate(-11deg); }
.beach-corners img:nth-child(6) { right: 8%; bottom: -10%; transform: rotate(11deg); }
.venue-pearls { right: 14%; bottom: -16px; z-index: 1; }
.swatches { gap: clamp(9px, 3vw, 24px); }
.swatches span { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px #ae9c847d; }
.dress-note {
  display: inline-block;
  padding: 6px 13px;
  background: #efe5d6;
  border-radius: 3px;
}
.entourage .party { text-align: center; }
.entourage { padding-block: 70px; }
.party-treasures { margin-top: 0; }
.unplugged { background: #dce9e4; }
.final-treasures { margin-top: 19px; }
@media(max-width: 480px) {
  .hero::before { inset-inline: 11px; }
  .hero-inner { padding-top: 34px; }
  .cover-treasures { inset: auto 0 49px; justify-content: center; }
  .hero-inner { padding-bottom: 92px; }
  .venue-pearls { right: 17%; }
}
@media(prefers-reduced-motion:no-preference) {
  .postcard { transition: transform .35s ease, box-shadow .35s ease; }
  .postcard:hover { transform: rotate(0); box-shadow: 0 18px 36px #34463c30; }
}

/* Offset repeating wave layers bridge the adjacent section colors. */
.wave-divider {
  position: relative;
  height: clamp(24px, 5.8vw, 43px);
  overflow: hidden;
  background: var(--wave-from);
  pointer-events: none;
  margin-block: -1px;
}
.wave-track {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  width: 200%;
  color: var(--wave-to);
  transform: translateX(-25%);
}
.wave-track svg { display: block; flex: 0 0 50%; width: 50%; height: 100%; }
.wave-track--back { top: -4px; opacity: .5; transform: translateX(-5%); }
@media (prefers-reduced-motion: no-preference) {
  .wave-track--front { animation: section-wave 11s linear infinite; }
  .wave-track--back { animation: section-wave 16s linear infinite reverse; }
}
@keyframes section-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The transparent pearl frame surrounds the full invitation and countdown. */
.intro .countdown-frame {
  width: min(440px, calc(100% - 28px));
  min-height: 390px;
  aspect-ratio: 509 / 665;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(35px, 8vw, 54px) clamp(27px, 6vw, 47px);
  background: url(beach/countdown-pearl-frame.webp) center / 100% 100% no-repeat;
}
.countdown-frame h2 { font-size: clamp(2.1rem, 7vw, 3.55rem); }
.intro .countdown-frame > p:last-of-type {
  margin-top: 14px;
  font-size: clamp(.82rem, 2.5vw, 1rem);
}
.countdown-frame .shell-treasures { width: 100%; margin: 15px auto 0; }
.countdown-frame .shell-treasures img { height: clamp(24px, 7vw, 39px); }
.countdown-frame .countdown { width: 100%; margin-top: 20px; min-height: 72px; }
.countdown-frame .countdown span { font-size: clamp(1.35rem, 5vw, 2.05rem); }
.countdown-frame .countdown small { font-size: clamp(.47rem, 1.65vw, .59rem); letter-spacing: .06em; }
@media (max-width: 370px) {
  .countdown-frame .countdown div { padding-inline: 1px; }
}

/* A quiet, full-bleed opening over the couple's sunset clip. */
.sunset-hero {
  position: relative;
  isolation: isolate;
  min-height: min(760px, 94svh);
  display: grid;
  justify-items: center;
  align-content: start;
  padding: clamp(52px, 9svh, 86px) 20px 32px;
  background: #f3e5c9 url(sunset-hero.jpg) center / cover no-repeat;
}
.sunset-hero::before { display: none; }
.sunset-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #fff7e8a8, #fff7e87a 32%, transparent 65%);
  pointer-events: none;
}
.sunset-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
.sunset-hero-copy { text-align: center; color: #173e40; }
.sunset-hero h1 {
  max-width: 100%;
  margin: 0;
  font-size: clamp(3.1rem, 11vw, 5.45rem);
  line-height: .98;
  color: inherit;
  text-shadow: 0 2px 16px #fff8edb3;
}
.sunset-hero h1:focus { outline: none; }
.sunset-hero h1 i { color: #765137; }
.sunset-hero time {
  display: block;
  margin-top: 22px;
  font-weight: 700;
  font-size: clamp(.64rem, 2.1vw, .78rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px #fff7eb;
}
.invitation-navigation { background: #f6edde; }
.invitation-navigation nav { border-bottom: 0; }

/* Photo backgrounds fade into the neighboring wave dividers. */
#entourage {
  width: 100%;
  padding-inline: clamp(17px, 5%, 38px);
  background:
    linear-gradient(180deg, #f7f2e9, transparent 13%, transparent 86%, #f7f2e9),
    linear-gradient(#faf6ed78, #faf6ed78),
    #f7f2e9 url(beach/aqua-shimmer.webp) center / cover no-repeat;
}
#attire {
  border-block: 0;
  background:
    linear-gradient(180deg, #faf6ed, transparent 12%, transparent 86%, #faf6ed),
    radial-gradient(ellipse at center, #faf6edb0, #faf6ed30 72%),
    #faf6ed url(beach/teal-lilies.webp) center / cover no-repeat;
}

/* Two flowers frame the attire image while the outfits stay clear. */
.attire-figure { width: min(480px, calc(100% - 68px)); }
.attire-figure .flower-treasures img {
  width: clamp(44px, 19%, 95px);
  max-height: none;
  top: 18%;
  bottom: auto;
  left: auto;
  right: calc(100% - 12px);
}
.attire-figure .flower-treasures img:nth-child(2) {
  top: 57%;
  right: auto;
  left: calc(100% - 12px);
}
@media (max-width: 480px) {
  .attire-figure .flower-treasures img { width: clamp(42px, 21%, 65px); }
}
.closing-treasures {
  display: grid;
  place-items: center;
  padding: 12px 20px 26px;
}
.closing-art { position: relative; width: clamp(84px, 23vw, 118px); }
.closing-beach-collage { display: block; width: 100%; height: auto; }
.closing-shell { position: absolute; right: -14%; bottom: 1%; width: 30%; height: auto; }

html:has(.envelope-intro[open]) { overflow: hidden; }
.envelope-intro {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: #243c49;
}
.envelope-intro::backdrop { background: #243c49; }
.envelope-stage {
  position: relative;
  width: min(100%, 60dvh);
  height: 100%;
  margin-inline: auto;
  background: #526e80 url(envelope-poster.jpg) center / cover no-repeat;
}
.envelope-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.envelope-stage:focus { outline: none; }
.envelope-open {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.envelope-open:focus-visible { outline: 2px solid #f8eddb; outline-offset: -4px; }

.envelope-tide {
  position: absolute;
  inset: 0;
  background: #dcebe6;
  color: #dcebe6;
  pointer-events: none;
  visibility: hidden;
  transform: translateY(calc(100% + 44px));
}
.envelope-tide svg {
  position: absolute;
  bottom: calc(100% - 1px);
  left: 0;
  width: 100%;
  height: 44px;
}
@media (prefers-reduced-motion: no-preference) {
  .envelope-revealing::backdrop { background: transparent; }
  .envelope-revealing { animation: envelope-dissolve 1s ease both; }
  .envelope-revealing .envelope-tide {
    visibility: visible;
    animation: envelope-tide-in .56s cubic-bezier(.22,.72,.32,1) both;
  }
}
@keyframes envelope-tide-in {
  to { transform: translateY(0); }
}
@keyframes envelope-dissolve {
  0%, 56% { opacity: 1; }
  100% { opacity: 0; }
}

/* Single accents sit in the outer margins of each section. */
.wedding-day, .venue, #entourage { position: relative; }
.section-accent {
  position: absolute;
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px #32554a29);
}
.accent-countdown {
  bottom: 12px;
  left: clamp(16px, 7%, 48px);
  width: clamp(50px, 12vw, 85px);
  transform: rotate(-8deg);
}
.accent-timeline {
  bottom: 10px;
  right: 7%;
  width: clamp(31px, 8vw, 51px);
  transform: rotate(17deg);
}
.accent-venue {
  bottom: 10px;
  left: 8%;
  width: clamp(38px, 9vw, 65px);
  transform: rotate(-13deg);
}
.accent-entourage {
  top: 12px;
  right: 8%;
  width: clamp(35px, 10vw, 63px);
  transform: rotate(14deg);
}

/* A few bubbles rise along the invitation margins. */
.coastal-bubbles { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .coastal-bubbles {
    display: block;
    position: fixed;
    z-index: 2;
    inset: 0;
    width: min(100%, 720px);
    margin-inline: auto;
    overflow: hidden;
    pointer-events: none;
  }
  .coastal-bubbles i {
    position: absolute;
    bottom: -28px;
    left: var(--bubble-edge, 2%);
    width: var(--bubble-size, 13px);
    aspect-ratio: 1;
    border: 1px solid #6b9a9e80;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #fffd, #e6f8f554 28%, transparent 65%);
    box-shadow: inset 0 0 3px #fff9;
    animation: coastal-bubble-rise var(--bubble-time, 15s) linear infinite var(--bubble-delay, -2s);
  }
  .coastal-bubbles i:nth-child(2) { --bubble-edge: 4%; --bubble-size: 8px; --bubble-time: 12s; --bubble-delay: -7s; }
  .coastal-bubbles i:nth-child(3) { --bubble-edge: 1%; --bubble-size: 18px; --bubble-time: 20s; --bubble-delay: -14s; }
  .coastal-bubbles i:nth-child(4) { --bubble-edge: 94%; --bubble-size: 17px; --bubble-time: 17s; --bubble-delay: -5s; }
  .coastal-bubbles i:nth-child(5) { --bubble-edge: 97%; --bubble-size: 9px; --bubble-time: 13s; --bubble-delay: -10s; }
  .coastal-bubbles i:nth-child(6) { --bubble-edge: 95%; --bubble-size: 11px; --bubble-time: 20s; --bubble-delay: -16s; }
}
@keyframes coastal-bubble-rise {
  0% { opacity: 0; transform: translate3d(0, 0, 0); }
  14% { opacity: .65; }
  85% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(3px, calc(-100vh - 45px), 0); }
}

#attire { position: relative; }
.accent-timeline-pearl {
  left: 7%;
  top: 27px;
  width: clamp(13px, 4vw, 23px);
}
.accent-attire {
  right: 8%;
  bottom: 10px;
  width: clamp(34px, 8vw, 55px);
  transform: rotate(18deg);
}
@media (prefers-reduced-motion: no-preference) {
  .coastal-entered { animation: coastal-soft-in .72s ease-out both; }
  .section-accent.coastal-entered { animation: coastal-accent-sway 3.4s ease-in-out 2; }
  .swatches.coastal-entered li { animation: coastal-soft-in .48s ease-out both; }
  .swatches.coastal-entered li:nth-child(2) { animation-delay: .07s; }
  .swatches.coastal-entered li:nth-child(3) { animation-delay: .14s; }
  .swatches.coastal-entered li:nth-child(4) { animation-delay: .21s; }
}
@keyframes coastal-soft-in {
  from { opacity: .68; translate: 0 9px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes coastal-accent-sway {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}