/* =====================================================================
   BLOSSOM GARDEN: a pressed-flower garden journal
   Cream herbarium sheets, a vine that grows down the margin as you
   scroll, seed-packet events and photos in softly morphing blobs.
   Fonts: Instrument Serif (display), Instrument Sans (text),
          La Belle Aurore (handwritten notes).
   ===================================================================== */

:root {
  --paper: #F4EDDF;
  --sheet: #FFFBF3;
  --ink: #2E3A2C;
  --ink-2: #4F5B49;
  --muted: #6E7867;
  --rose: #D98A8E;
  --rose-ink: #A6525E;
  --blush: #F1C6C1;
  --sage: #9DB08C;
  --sage-d: #56714F;
  --terra: #C9714F;
  --mari: #E2A23E;
  --line: rgba(46, 58, 44, .16);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "La Belle Aurore", "Segoe Script", "Bradley Hand", cursive;
  --grain: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .38 0 0 0 0 .31 0 0 0 0 .2 0 0 0 .075 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease: cubic-bezier(.2, .8, .2, 1);
  --pop: cubic-bezier(.3, 1.45, .5, 1);
  --wv-accent: #56714F;
  --wv-ink: #2E3A2C;
  --wv-paper: #FFFBF3;
  --wv-font: "Instrument Sans", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper) var(--grain);
  color: var(--ink);
  font: 400 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body.is-loading .page, body.is-loading .fabs { visibility: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, p { overflow-wrap: break-word; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { padding: 40px 20px; text-align: center; font-size: 18px; }
:focus-visible { outline: 2px dashed var(--rose-ink); outline-offset: 3px; }
.page { position: relative; overflow-x: hidden; }
@supports (overflow: clip) { .page { overflow-x: clip; } }

/* ---------- Watercolour washes ---------- */
.wash { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.wash i { position: absolute; display: block; border-radius: 50%; animation: wash 22s ease-in-out infinite alternate; }
.wash i:nth-child(2) { animation-duration: 27s; animation-delay: -9s; }
.wash i:nth-child(3) { animation-duration: 31s; animation-delay: -4s; }
.wash i:nth-child(4) { animation-duration: 25s; animation-delay: -14s; }
@keyframes wash {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  100% { transform: translate3d(3%, 4%, 0) scale(1.08) rotate(8deg); }
}

/* ---------- Bloom (intro, hero, closing, main packet) ---------- */
.bloom { display: block; width: 100%; height: 100%; overflow: visible; }
.bp { transform: rotate(var(--o)); stroke: #C46F78; stroke-opacity: .3; stroke-width: .8; transition: transform 1.35s cubic-bezier(.2, .85, .25, 1) calc(var(--k) * 58ms + 60ms); }
.blv { fill: url(#bgLf); transform: rotate(var(--o)); transition: transform 1s var(--pop) calc(.8s + var(--k) * 120ms); }
.bloom__heart { transition: transform .9s var(--pop) 1.05s; }
.bsp { fill: #7C9A6E; transform: rotate(var(--o)) scale(.5); opacity: 0; transition: transform 1s cubic-bezier(.4, 0, .2, 1), opacity .5s ease .4s; }
.bloom__mono { opacity: 0; transform: scale(.6); transition: opacity .6s ease, transform .9s var(--pop); }
.is-mono .bloom__mono { opacity: 1; transform: none; }
.is-bud .bp, .close__bloom:not(.is-in) .bp { transform: rotate(var(--c)) scale(var(--sx), var(--sy)); }
.is-bud .blv, .close__bloom:not(.is-in) .blv { transform: rotate(var(--o)) scale(0); }
.is-bud .bloom__heart, .close__bloom:not(.is-in) .bloom__heart { transform: scale(0); }
.is-bud .bsp, .close__bloom:not(.is-in) .bsp { transform: rotate(var(--c)); opacity: 1; }
.close__bloom:not(.is-in) .bloom__mono { opacity: 0; transform: scale(.6); }
.close__bloom .bloom__mono { transition-delay: 1.5s; }
.bm-disc { fill: #FFFAF1; stroke: rgba(166, 82, 94, .25); stroke-width: .8; }
.bm-ring { fill: none; stroke: #C7707A; stroke-width: .9; stroke-dasharray: 2 2.6; }
.bm-t { font-family: var(--serif); font-style: italic; font-size: 31px; fill: #8E4651; }
.bm-amp { font-size: 21px; fill: #C7707A; }

/* ---------- Blob photos ---------- */
.blob { position: relative; display: block; isolation: isolate; }
.blob__wash {
  position: absolute; inset: -8% -9% -9% -7%; z-index: -1;
  border-radius: 44% 56% 58% 42% / 52% 44% 56% 48%;
  background:
    radial-gradient(56% 52% at 36% 38%, rgba(240, 186, 182, .7), rgba(240, 186, 182, .38) 64%, rgba(232, 166, 166, .5) 71%, rgba(240, 186, 182, 0) 75%),
    radial-gradient(48% 52% at 72% 72%, rgba(165, 186, 148, .62), rgba(165, 186, 148, 0) 72%);
  animation: spin 46s linear infinite; animation-play-state: paused;
}
.blob__img {
  position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5;
  border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%;
  background: #EEE3D2;
  animation: morph 15s ease-in-out infinite alternate; animation-play-state: paused;
}
.blob__img img { width: 100%; height: 100%; object-fit: cover; }
.blob__img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 250, 240, .35), inset 0 0 26px 8px rgba(250, 242, 228, .55); pointer-events: none; }
.blob.is-live .blob__img, .blob.is-live .blob__wash { animation-play-state: running; }
@keyframes morph {
  0% { border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%; }
  35% { border-radius: 44% 56% 41% 59% / 58% 43% 57% 42%; }
  70% { border-radius: 53% 47% 63% 37% / 40% 60% 42% 58%; }
  100% { border-radius: 39% 61% 46% 54% / 55% 40% 60% 45%; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Pressed specimens ---------- */
.pf { position: absolute; z-index: 0; display: block; pointer-events: none; transform: rotate(var(--pr, 0deg)); }
.pf__svg { display: block; width: 100%; height: auto; overflow: visible; }
.pf__note { position: absolute; font: 19px/1 var(--hand); color: var(--rose-ink); white-space: nowrap; }
.sheet .pf { opacity: 0; transform: rotate(var(--pr, 0deg)) scale(.8); transform-origin: 50% 100%; transition: opacity 1s ease .35s, transform 1.4s var(--ease) .35s; }
.sheet.is-in .pf { opacity: 1; transform: rotate(var(--pr, 0deg)); }

/* ---------- Herbarium sheets, tags, headings ---------- */
.sheet {
  position: relative; padding: 66px 22px 32px;
  background: var(--sheet) var(--grain);
  border-radius: 3px;
  box-shadow: 0 1px 2px rgba(70, 56, 30, .08), 0 28px 50px -30px rgba(70, 56, 30, .5);
}
.sheet::before { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(150, 125, 90, .16); pointer-events: none; }
.sheet > :not(.pf):not(.tag) { position: relative; z-index: 1; }
.tag {
  position: absolute; top: -14px; right: 14px; z-index: 3; max-width: calc(100% - 34px);
  padding: 7px 13px 8px; background: #FBF3E4 var(--grain); border: 1px solid #D6C7AA;
  box-shadow: 0 10px 18px -12px rgba(70, 56, 30, .5); color: var(--ink-2); transform: rotate(2deg);
}
.tag::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(160, 135, 95, .3); pointer-events: none; }
.tag__no { display: block; font: 600 9.5px/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.tag__la { display: block; margin-top: 2px; font: italic 17px/1.15 var(--serif); color: var(--rose-ink); }
.tag--free { position: relative; top: auto; right: auto; display: inline-block; margin: 0 0 20px; transform: rotate(-1.6deg); }
.sh { margin: 0 0 28px; }
.sh__t { margin: 0; max-width: 11ch; font: 400 clamp(42px, 11.5vw, 76px)/.94 var(--serif); letter-spacing: -.012em; color: var(--ink); }
.sh__n { margin: 10px 0 0 16%; font: 23px/1.2 var(--hand); color: var(--rose-ink); transform: rotate(-3deg); transform-origin: 0 50%; }

/* ---------- Buttons ---------- */
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 19px;
  border: 1px solid transparent; border-radius: 999px; font: 600 14px/1.1 var(--sans); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; transition: transform .2s ease;
}
.btn .ic { width: 18px; height: 18px; flex: none; }
.btn:active { transform: scale(.97); }
.btn--sage { background: var(--sage-d); color: #FFFBF3; box-shadow: 0 10px 20px -12px rgba(46, 70, 40, .7); }
.btn--sage:hover { background: #4A6444; }
.btn--line { background: rgba(255, 251, 243, .6); border-color: rgba(46, 58, 44, .3); color: var(--ink); }
.btn--line:hover { border-color: var(--ink); }
.btn--sm { min-height: 42px; padding: 9px 15px; font-size: 13.5px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  border: 1px dashed rgba(166, 82, 94, .55); background: rgba(241, 198, 193, .28); color: var(--rose-ink); font: italic 20px/1 var(--serif);
}
.chip .ic { width: 16px; height: 16px; }

/* =====================================================================
   HERO
   ===================================================================== */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(28px + env(safe-area-inset-top)) 20px 30px; display: flex; flex-direction: column; }
.wash--hero { bottom: -30%; }
.wash--hero i:nth-child(1) { width: 130vw; height: 120vw; right: -48vw; top: -26vw; }
.wash--hero i:nth-child(2) { width: 110vw; height: 90vw; left: -52vw; top: 64%; background: radial-gradient(closest-side, rgba(165, 186, 148, .42), rgba(165, 186, 148, .24) 70%, rgba(150, 175, 132, .32) 78%, rgba(165, 186, 148, 0)); }
.wash--hero i:nth-child(3) { width: 60vw; height: 54vw; right: -14vw; bottom: 6%; background: radial-gradient(closest-side, rgba(238, 196, 120, .32), rgba(238, 196, 120, 0)); }
.wash--hero i:nth-child(1), .wash--close i:nth-child(1), .wash--intro i:nth-child(1) { background: radial-gradient(46% 44% at 42% 46%, rgba(240, 186, 182, .5), rgba(240, 186, 182, .28) 58%, rgba(236, 170, 168, .36) 68%, rgba(240, 186, 182, 0) 82%), radial-gradient(36% 32% at 70% 64%, rgba(244, 200, 190, .5), rgba(244, 200, 190, 0) 76%), radial-gradient(30% 26% at 26% 70%, rgba(247, 214, 196, .45), rgba(247, 214, 196, 0) 80%); }
.hero__art { position: relative; z-index: 1; }
.hero__photo { width: min(72vw, 330px); margin-left: auto; }
.hero__bloom { position: absolute; z-index: 2; left: -8px; bottom: -34px; width: min(46vw, 200px); aspect-ratio: 1; }
.hero:not(.hero--photo) .hero__art { min-height: min(70vw, 320px); }
.hero:not(.hero--photo) .hero__bloom { position: relative; left: auto; bottom: auto; width: min(68vw, 300px); margin: 4px -4px 0 auto; }
.has-intro .hero__bloom { opacity: 0; }
.pf--hero { --pr: -18deg; left: 2px; top: 6px; width: 92px; }
.hero__text { position: relative; z-index: 3; margin-top: 30px; }
.hero--photo .hero__text { margin-top: 44px; }
.hero__dear { margin: 0 0 4px; font: 27px/1.2 var(--hand); color: var(--rose-ink); }
.hero__kick { margin: 0; font: 600 11px/1.5 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.hero__names { margin: 10px 0 0; font: italic 400 min(150px, calc((100vw - 44px) / var(--nw)), 22vw)/.9 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.hero__names--t { font-style: normal; }
.hn { display: block; white-space: nowrap; }
.hn--2 { padding-left: .5em; }
.amp { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--rose); }
.hero__names .amp { font-size: .62em; line-height: 1; vertical-align: .08em; }
.hl { position: relative; margin-top: 26px; max-width: 360px; padding: 12px 16px 12px; background: var(--sheet) var(--grain); border: 1px solid #D9CCB3; box-shadow: 0 20px 32px -24px rgba(70, 56, 30, .6); }
.hl::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(160, 135, 95, .26); pointer-events: none; }
.hl::after { content: ""; position: absolute; top: -9px; left: 26px; width: 64px; height: 18px; background: rgba(236, 226, 203, .88); box-shadow: 0 1px 2px rgba(70, 56, 30, .12); transform: rotate(-7deg); }
.pf--hl { display: none; }
.hl__top { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(70, 56, 30, .2); font: 600 9.5px/1.35 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.hl__t { margin: 10px 0 4px; font: italic 27px/1.1 var(--serif); color: var(--rose-ink); }
.hl__dl, .pk__dl { margin: 0; }
.hl__dl div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px dotted rgba(70, 56, 30, .28); }
.hl__dl div:first-child { border-top: 0; }
dt { font: 600 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink); }
.hero__cue { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font: 21px/1.2 var(--hand); color: var(--sage-d); text-decoration: none; }
.hero__cue svg { width: 22px; height: 30px; flex: none; transform-origin: 50% 100%; animation: sprout 3s ease-in-out infinite; }
@keyframes sprout { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) scale(1.06); } }

[data-h] { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: calc(var(--hd, 0) * 110ms + 120ms); }
.is-open [data-h] { opacity: 1; transform: none; }

/* =====================================================================
   THE GARDEN + VINE
   ===================================================================== */
.garden { position: relative; max-width: 1240px; margin: 0 auto; padding: 34px 14px 30px 44px; }
.vine { position: absolute; left: 0; top: 0; bottom: 0; width: 34px; pointer-events: none; z-index: 2; }
.vine__svg { position: absolute; left: 0; top: 0; overflow: visible; }
.vine__stem { fill: none; stroke: #66845D; stroke-width: 2.2; stroke-linecap: round; }
.vine__ghost { fill: none; stroke: #66845D; stroke-opacity: .3; stroke-width: 1.1; stroke-dasharray: 1.2 6; stroke-linecap: round; }
.vine__marks { position: absolute; inset: 0; }
.vl { position: absolute; width: 24px; height: 15px; margin-top: -7.5px; overflow: visible; transform-origin: 0 50%; transform: rotate(var(--r)) scale(0); transition: transform .8s var(--pop); }
.vl.on { transform: rotate(var(--r)) scale(var(--s)); }
.vb { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; transform: scale(0) rotate(-140deg); transition: transform 1.1s var(--pop); }
.vb.on { transform: none; }
.vb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.vb--rose { color: #EDAFAF; }
.vb--peach { color: #F2C3A8; }
.vb--cream { color: #FBF0E4; }
.vb--mari { color: #F0C466; }

.blk { position: relative; z-index: 1; margin-top: 74px; }
.vine + .blk { margin-top: 22px; }

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform 1.1s var(--ease); transition-delay: calc(var(--d, 0) * 110ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
.sheet[data-reveal] { transform: translateY(34px) rotate(-1.2deg); transform-origin: 0 0; }
.sheet[data-reveal].is-in { transform: none; }

/* ---------- 01 Invitation ---------- */
.pf--msg { --pr: 16deg; right: -14px; top: -34px; width: 92px; }
.msg__bl { margin: 0 0 14px; font: 600 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sage-d); max-width: 70%; }
.msg__q { margin: 0; max-width: 21ch; font: 400 clamp(26px, 7.4vw, 40px)/1.24 var(--serif); color: var(--ink); }
.msg__q::first-letter { float: left; margin: .06em .1em 0 0; font-style: italic; font-size: 2.6em; line-height: .78; color: var(--rose-ink); }
.msg__sig { margin: 24px 0 0; text-align: right; font: 25px/1.3 var(--hand); color: var(--rose-ink); }
.msg__sig .amp, .pk__note .amp, .note__when .amp, .ct__role .amp, .hero__dear .amp, .intro__dear .amp, .close__with .amp { font-size: .82em; color: inherit; }

/* ---------- 02 Couple ---------- */
.pf--pair { --pr: 8deg; left: -18px; bottom: -44px; width: 96px; }
.pair { display: grid; gap: 6px; }
.who { display: grid; justify-items: start; }
.who--b { justify-items: end; text-align: right; }
.who__ph { width: min(54vw, 240px); }
.who__ph.blob--mono { width: min(46vw, 210px); }
.who--b .blob__img { animation-delay: -6s; }
.who--b .blob__wash { animation-direction: reverse; }
.blob--mono .blob__img { display: grid; place-items: center; background: radial-gradient(70% 60% at 40% 35%, #F9E1DC, #F1CFC8 60%, #EDC2BD); }
.who--b.who .blob--mono .blob__img { background: radial-gradient(70% 60% at 60% 40%, #EEF2E4, #DCE5CF 60%, #CFDCC0); }
.who__sprig { position: absolute; z-index: 2; right: -6%; bottom: -10%; width: 30%; transform: rotate(-28deg); pointer-events: none; }
.who--b .who__sprig { right: auto; left: -8%; transform: rotate(24deg); }
.who__sprig svg { display: block; width: 100%; height: auto; }
.who__init { font: italic 400 clamp(96px, 30vw, 150px)/1 var(--serif); color: rgba(166, 82, 94, .8); }
.who--b .who__sprig { position: absolute; z-index: 2; right: -6%; bottom: -10%; width: 30%; transform: rotate(-28deg); pointer-events: none; }
.who--b .who__sprig { right: auto; left: -8%; transform: rotate(24deg); }
.who__sprig svg { display: block; width: 100%; height: auto; }
.who__init { color: rgba(86, 113, 79, .8); }
.who__role { margin: 16px 0 0; font: 22px/1.1 var(--hand); color: var(--rose-ink); }
.who__name { margin: 4px 0 0; font: 400 clamp(30px, 8.6vw, 44px)/1.04 var(--serif); color: var(--ink); }
.who__par { margin: 6px 0 0; max-width: 26ch; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.pair__amp { margin: -4px 0; font: italic 400 70px/1 var(--serif); color: var(--rose); text-align: center; }
.pair--one .who { justify-items: start; text-align: left; }

/* ---------- 03 Story ---------- */
.notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.note { position: relative; min-height: 118px; padding: 20px 0 0 76px; border-top: 1px dashed rgba(102, 132, 93, .4); }
.note__ic { position: absolute; left: -2px; top: 12px; width: 62px; height: 108px; display: grid; place-items: center; transform: rotate(-8deg); }
.note:nth-child(even) .note__ic { transform: rotate(9deg); }
.note__ic svg { max-width: 100%; max-height: 100%; width: auto; height: 100%; }
.note__when { margin: 0; font: 30px/1.1 var(--hand); color: var(--rose-ink); }
.note__t { margin: 4px 0 6px; font: 400 27px/1.1 var(--serif); color: var(--ink); }
.note__x { margin: 0; color: var(--ink-2); }

/* ---------- 04 Countdown ---------- */
.bed { position: relative; padding: 8px 0 6px; }
.cdf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 6px 0 40px; }
.cdf__u:nth-child(even) { transform: translateY(40px); }
.cdf__u[data-reveal]:nth-child(even) { transform: translateY(66px); }
.cdf__u[data-reveal].is-in:nth-child(even) { transform: translateY(40px); }
.cdf[hidden] { display: none; }
.cdf__u { display: grid; justify-items: center; text-align: center; }
.cdf__fl { position: relative; width: 100%; max-width: 156px; aspect-ratio: 1; }
.cdf__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cdf__fl--s .cdf__svg { transform: rotate(var(--turn, 0deg)); transition: transform .9s var(--pop); }
.cp { transform: rotate(var(--o)) scale(.12); transition: transform 1.1s var(--pop) calc(var(--i, 0) * 170ms + var(--k) * 40ms + 150ms); }
.cdf__u.is-in .cp { transform: rotate(var(--o)); }
.cdf__disc { fill: #FFFAF1; stroke: rgba(110, 90, 60, .2); stroke-width: .8; }
.cdf__n { position: absolute; inset: 0; display: grid; place-items: center; font: 400 clamp(30px, 9vw, 42px)/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .6s ease calc(var(--i, 0) * 170ms + .7s); }
.cdf__u.is-in .cdf__n { opacity: 1; }
.cdf__l { margin-top: -2px; font: 22px/1.2 var(--hand); color: var(--rose-ink); }
.cdf__done { margin: 10px 0; font: italic 26px/1.3 var(--serif); color: var(--rose-ink); }
.cdf__date { margin: 18px 0 0; font: 600 11px/1.6 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.bed .btns { gap: 8px; margin-top: 14px; }
.bed .btn { padding-left: 13px; padding-right: 13px; }

/* ---------- 05 Celebrations: seed packets ---------- */
.pks { display: grid; gap: 40px; padding-top: 10px; }
.pk {
  --pk-bg: #F6DDD7; --pk-ink: #8E4C57; --r: -1.2deg;
  position: relative; padding: 20px 20px 18px; background: var(--pk-bg) var(--grain); border-radius: 2px 2px 8px 8px;
  box-shadow: 0 2px 3px rgba(70, 56, 30, .08), 0 24px 40px -26px rgba(70, 56, 30, .55);
}
.pk::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 9px; background: radial-gradient(circle at 7px 9px, var(--pk-bg) 6.4px, transparent 7px) 0 0 / 14px 9px repeat-x; }
.pk::after { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; border-top: 1px dashed rgba(70, 56, 30, .18); }
.pk:nth-child(even) { --r: 1.1deg; }
.pk:nth-child(odd) { margin-right: 14px; }
.pk:nth-child(even) { margin-left: 14px; }
.pk[data-reveal] { transform: translateY(40px) rotate(calc(var(--r) * 4)); }
.pk[data-reveal].is-in { transform: rotate(var(--r)); }
.pk--rose { --pk-bg: #F6DDD7; --pk-ink: #8E4C57; }
.pk--mari { --pk-bg: #F6E3BC; --pk-ink: #7D5718; }
.pk--daisy { --pk-bg: #E1E8D2; --pk-ink: #4D6646; }
.pk--cosmos { --pk-bg: #F2DAE0; --pk-ink: #8A4B60; }
.pk--sprig { --pk-bg: #DCE5DD; --pk-ink: #4B6656; }
.pk__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid rgba(70, 56, 30, .16); font: 600 9.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--pk-ink); }
.pk__main { font: 21px/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--rose-ink); transform: rotate(-4deg); }
.pk__win {
  display: grid; place-items: center; width: min(58%, 190px); aspect-ratio: 1; margin: 16px auto 14px; border-radius: 50%;
  background: #FFFBF3; box-shadow: inset 0 0 0 1px rgba(70, 56, 30, .14), inset 0 0 0 7px #FFFBF3, inset 0 0 0 8px rgba(70, 56, 30, .12), 0 1px 0 rgba(255, 255, 255, .6);
}
.pk__art { display: block; width: 84%; height: 84%; overflow: visible; }
.pk__bloom { display: block; width: 74%; height: 74%; }
.pk__name { margin: 0; text-align: center; font: 400 clamp(29px, 8vw, 36px)/1.05 var(--serif); color: var(--ink); }
.pk__name .amp { color: var(--pk-ink); }
.pk__dl { display: grid; gap: 0; margin-top: 14px; }
.pk__dl div { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: baseline; padding: 6px 0; border-top: 1px dotted rgba(70, 56, 30, .25); }
.pk__dl dt { color: var(--pk-ink); }
.pk__note { margin: 12px 0 0; text-align: center; font: 23px/1.25 var(--hand); color: var(--rose-ink); }
.pk__note--long { font: italic 15px/1.55 var(--sans); color: var(--ink-2); }
.pk__cal { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(70, 56, 30, .22); }
.pk__cal a, .pk__cal button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(46, 58, 44, .26); background: rgba(255, 251, 243, .7); color: var(--ink); font: 600 13px/1 var(--sans); text-decoration: none;
}
.pk__cal .ic { width: 16px; height: 16px; }

/* ---------- Dress code: a garden tag ---------- */
.blk--dress { display: flex; justify-content: flex-end; margin-top: 64px; }
.ptag { position: relative; width: min(100%, 340px); padding: 22px 24px 24px 56px; transform-origin: 0 50%; filter: drop-shadow(0 14px 14px rgba(70, 56, 30, .2)); }
.ptag::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #FBF2DF var(--grain); clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 50%); }
.ptag[data-reveal] { transform: translateY(26px) rotate(-6deg); }
.ptag[data-reveal].is-in { transform: rotate(-2deg); }
.ptag__hole { position: absolute; left: 17px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25), 0 0 0 3px #E6D5B5; }
.ptag__twine { position: absolute; left: -54px; top: 50%; width: 80px; height: 60px; margin-top: -34px; }
.ptag__k { margin: 0; font: 600 10px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--sage-d); }
.ptag__v { margin: 6px 0 0; font: italic 400 25px/1.2 var(--serif); color: var(--ink); }
.pf--dress { --pr: 24deg; right: -12px; top: -46px; width: 74px; }
.ptag .pf { opacity: 1; }

/* ---------- 06 Venue ---------- */
.pf--venue { --pr: 10deg; right: -8px; top: -40px; width: 96px; }
.venue { display: grid; gap: 24px; }
.venue__name { margin: 0; font: 400 clamp(29px, 8vw, 40px)/1.06 var(--serif); color: var(--ink); }
.venue__addr { margin: 10px 0 0; color: var(--ink-2); }
.venue__note { margin: 18px 0 0; padding: 12px 14px 13px; border-left: 2px solid var(--blush); background: rgba(241, 198, 193, .22); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.venue__note span { display: block; margin-bottom: 2px; font: 21px/1.2 var(--hand); color: var(--rose-ink); }
.venue__map { position: relative; height: 270px; overflow: hidden; border-radius: 34px 70px 40px 80px / 50px 36px 70px 40px; background: #E4EADB; }
.venue__map::before { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; margin: -20px 0 0 -14px; border-radius: 50% 50% 50% 0; background: var(--rose); transform: rotate(-45deg); }
.venue__map iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; }
.venue__map::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(70, 56, 30, .12), inset 0 0 18px 6px rgba(255, 251, 243, .6); pointer-events: none; }

/* ---------- 07 Gallery: a garden of blobs ---------- */
.gal { position: relative; padding: 4px 0 20px; }
.gp { --w: 74%; --ml: 0%; --mt: 0%; --z: 1; position: relative; z-index: var(--z); display: block; width: var(--w); margin: var(--mt) 0 0 var(--ml); padding: 0; border: 0; background: none; cursor: zoom-in; }
.gp:nth-child(5n+2) { --w: 58%; --ml: 42%; --mt: -22%; --z: 2; }
.gp:nth-child(5n+3) { --w: 54%; --ml: 3%; --mt: -10%; }
.gp:nth-child(5n+4) { --w: 50%; --ml: 50%; --mt: -44%; --z: 2; }
.gp:nth-child(5n) { --w: 70%; --ml: 15%; --mt: -4%; }
.gp:nth-child(5n+6) { --mt: -6%; }
.gp:nth-child(5n+2) .blob__img, .gp:nth-child(5n+4) .blob__img { aspect-ratio: 1; }
.gp:nth-child(5n+3) .blob__img { aspect-ratio: 3 / 4; }
.gp:nth-child(5n) .blob__img { aspect-ratio: 5 / 4; }
.gp:nth-child(3n+2) .blob__img { animation-delay: -5s; }
.gp:nth-child(3n) .blob__img { animation-delay: -10s; animation-direction: alternate-reverse; }
.gp:nth-child(even) .blob__wash { animation-direction: reverse; background: radial-gradient(56% 52% at 40% 40%, rgba(165, 186, 148, .6), rgba(165, 186, 148, .3) 64%, rgba(150, 175, 132, .45) 71%, rgba(165, 186, 148, 0) 75%), radial-gradient(48% 52% at 70% 72%, rgba(240, 196, 150, .5), rgba(240, 196, 150, 0) 72%); }
.gp .blob__img img { transition: transform .8s var(--ease); }
.gp:hover .blob__img img { transform: scale(1.04); }
.gp__fig { position: absolute; bottom: -10px; left: 12%; z-index: 3; font: 19px/1 var(--hand); color: var(--rose-ink); }
.gp:nth-child(even) .gp__fig { left: auto; right: 14%; }
.gal--1 .gp { --w: 88%; --ml: 6%; }
.gal--2 .gp:nth-child(2) { --mt: -16%; }

/* ---------- 08 Families / 09 Contacts ---------- */
.pf--fam { --pr: -12deg; right: -6px; top: -42px; width: 70px; }
.fam { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fam li { position: relative; padding-left: 28px; font: 400 24px/1.25 var(--serif); color: var(--ink); }
.fam li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 15px; height: 9px; border-radius: 0 100% 0 100%; background: var(--sage); transform: rotate(-24deg); }
.cts { list-style: none; margin: 0; padding: 0; }
.ct { display: grid; gap: 12px; padding: 16px 0; border-top: 1px dashed rgba(70, 56, 30, .22); }
.ct:first-child { border-top: 0; padding-top: 0; }
.ct__name { margin: 0; font: 400 27px/1.1 var(--serif); color: var(--ink); }
.ct__role { margin: 2px 0 0; font: 21px/1.2 var(--hand); color: var(--rose-ink); }
.ct__btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* =====================================================================
   CLOSING
   ===================================================================== */
.close { position: relative; overflow: hidden; padding: 30px 22px 100px; text-align: center; }
.wash--close i:nth-child(1) { width: 130vw; height: 110vw; left: -15vw; top: -6%; }
.wash--close i:nth-child(2) { width: 90vw; height: 80vw; right: -40vw; bottom: -10%; background: radial-gradient(closest-side, rgba(165, 186, 148, .4), rgba(165, 186, 148, 0)); }
.close__bloom { position: relative; width: min(58vw, 250px); aspect-ratio: 1; margin: 0 auto; }
.close__bloom[data-reveal] { transform: none; }
.close__txt { position: relative; }
.close__with { margin: 16px 0 0; font: 27px/1.2 var(--hand); color: var(--rose-ink); }
.close__names { margin: 6px 0 0; font: italic 400 min(112px, calc((100vw - 44px) / var(--nw)), 17vw)/.95 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.close__names--t { font-style: normal; }
.close__names .amp { font-size: .62em; line-height: 1; vertical-align: .08em; }
.close__names .hn--2 { padding-left: 0; }
.close__date { margin: 14px 0 0; font: 600 11px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); }
.close .btns { justify-content: center; margin-top: 26px; }

/* =====================================================================
   INTRO
   ===================================================================== */
.intro {
  --hs: min(66vw, 40vh, 320px);
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(46px + env(safe-area-inset-top)) 24px calc(34px + env(safe-area-inset-bottom)); text-align: center; cursor: pointer; overflow: hidden;
}
.intro[hidden] { display: none; }
.intro__bg { position: absolute; inset: 0; background: var(--paper) var(--grain); transition: opacity 1s ease .1s; }
.wash--intro i:nth-child(1) { width: 150vmax; height: 130vmax; left: -60vmax; top: -50vmax; }
.wash--intro i:nth-child(2) { width: 110vmax; height: 100vmax; right: -55vmax; bottom: -50vmax; background: radial-gradient(closest-side, rgba(165, 186, 148, .45), rgba(165, 186, 148, .26) 68%, rgba(150, 175, 132, .34) 76%, rgba(165, 186, 148, 0)); }
.wash--intro i:nth-child(3) { width: 80vmin; height: 80vmin; left: 50%; top: 50%; margin: -46vmin 0 0 -40vmin; background: radial-gradient(closest-side, rgba(247, 214, 200, .65), rgba(247, 214, 200, 0)); }
.wash--intro i:nth-child(4) { width: 60vmax; height: 50vmax; right: -24vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(238, 196, 120, .3), rgba(238, 196, 120, 0)); }
.intro__top, .intro__hint, .ib { position: relative; z-index: 1; }
.intro__top { transition: opacity .6s ease, transform .8s var(--ease); }
.intro__dear { margin: 0 0 8px; font: 28px/1.2 var(--hand); color: var(--rose-ink); }
.intro__kick { margin: 0; font: 600 11px/1.5 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-2); }
.intro__names { margin: 8px 0 0; font: italic 400 clamp(38px, 11vw, 64px)/1.02 var(--serif); color: var(--ink); }
.intro__names .amp { font-size: .6em; }
.ib { width: var(--hs); height: calc(var(--hs) * 1.42); flex: none; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform-origin: 50% 100%; animation: sway 5.5s ease-in-out infinite; }
.ib:focus { outline: none; }
.ib:focus-visible .ib__head { outline: 2px dashed var(--rose-ink); outline-offset: 4px; border-radius: 50%; }
.ib__head { position: absolute; left: 0; top: 0; z-index: 2; width: var(--hs); height: var(--hs); transition: transform 1.1s cubic-bezier(.65, 0, .3, 1); }
.ib__stem { position: absolute; left: 50%; top: calc(var(--hs) * .5); width: calc(var(--hs) * .46); height: calc(var(--hs) * .92); margin-left: calc(var(--hs) * -.23); transition: opacity .5s ease; }
.drifts { position: absolute; left: 50%; top: calc(var(--hs) * .5); z-index: 3; }
.dp { position: absolute; left: -13px; top: -16px; width: 26px; height: 31px; opacity: 0; }
.dp svg { display: block; width: 100%; height: 100%; }
.is-drift .dp { animation: drift 2.3s cubic-bezier(.25, .1, .3, 1) var(--dl) forwards; }
@keyframes drift {
  0% { opacity: 0; transform: translate(calc(var(--hs) * var(--ux) * .36), calc(var(--hs) * var(--uy) * .36)) rotate(0deg) scale(.6); }
  10% { opacity: 1; }
  70% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--hs) * var(--ux) * .36 + var(--dx)), calc(var(--hs) * var(--uy) * .36 + var(--dy))) rotate(var(--dr)) scale(var(--ds)); }
}
.intro__hint { display: inline-flex; align-items: flex-end; gap: 6px; margin: 0; font: 24px/1.2 var(--hand); color: var(--rose-ink); transition: opacity .4s ease; animation: nudge 2.6s ease-in-out infinite; }
.intro__hint svg { width: 34px; height: 26px; transform: scaleX(-1) rotate(-20deg); }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.intro.is-ready .ib__head .bloom { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.is-opening .ib, .is-opening .ib__head .bloom { animation: none; }
.is-opening .intro__top { opacity: 0; transform: translateY(-16px); }
.is-opening .intro__hint { opacity: 0; animation: none; }
.is-leaving { pointer-events: none; }
.is-leaving .intro__bg { opacity: 0; }
.is-leaving .ib__stem { opacity: 0; }

/* =====================================================================
   FLOATING BUTTONS
   ===================================================================== */
.fabs { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: grid; gap: 10px; opacity: 0; transform: translateY(12px); transition: opacity .6s ease .6s, transform .6s var(--ease) .6s; }
.is-open .fabs { opacity: 1; transform: none; }
.fab { position: relative; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(46, 58, 44, .16); border-radius: 50%; background: rgba(255, 251, 243, .94); color: var(--sage-d); box-shadow: 0 10px 24px -12px rgba(46, 58, 44, .55); cursor: pointer; }
.fab[hidden] { display: none; }
.fab svg { position: relative; z-index: 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fab .fab__ring { position: absolute; inset: 4px; z-index: 0; width: auto; height: auto; fill: #F1C6C1; stroke: none; opacity: 0; transition: opacity .4s ease; }
.fab--music.is-playing .fab__ring { opacity: .85; animation: spin 9s linear infinite; }
.fab--music.is-playing { color: var(--rose-ink); }

/* =====================================================================
   DESKTOP
   ===================================================================== */
@media (min-width: 640px) {
  .pks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 30px; }
  .pk:nth-child(odd), .pk:nth-child(even) { margin: 0; }
  .pk:nth-child(even) { margin-top: 50px; }
  .pks--1 { grid-template-columns: minmax(0, 420px); }
  .pair { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 18px; }
  .pair--one { grid-template-columns: minmax(0, 1fr); }
  .who--b { margin-top: 90px; }
  .pair__amp { align-self: center; font-size: 84px; }
}
@media (min-width: 980px) {
  .hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; column-gap: 64px; padding: 60px max(64px, calc((100vw - 1240px) / 2 + 40px)) 60px; }
  .hero__art { order: 2; }
  .hero__text, .hero--photo .hero__text { margin: 0; }
  .hero__names { font-size: min(158px, calc(48vw / var(--nw))); }
  .hero__photo { width: min(100%, 450px); margin: 0 auto; }
  .hero__bloom { width: 220px; left: -10px; bottom: -50px; }
  .hero:not(.hero--photo) .hero__art { min-height: 0; }
  .hero:not(.hero--photo) .hero__bloom { width: min(100%, 470px); margin: 0 auto; }
  .pf--hero { width: 150px; left: -20px; top: -40px; }
  .hero__dear { font-size: 34px; }
  .hl { margin-top: 34px; max-width: 420px; padding: 14px 20px; }
  .pf--hl { --pr: 14deg; display: block; left: calc(100% + 26px); top: -36px; width: 104px; }
  .blk--ct:not(.blk--half) .cts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
  .blk--ct:not(.blk--half) .ct:nth-child(2) { border-top: 0; padding-top: 0; }
  .blk--ct:not(.blk--half) { width: min(100%, 900px); margin-left: auto; }
  .wash--hero i:nth-child(1) { width: 70vw; height: 64vw; right: -12vw; top: -14vw; }
  .wash--hero i:nth-child(2) { width: 50vw; height: 40vw; left: -18vw; top: 50%; }
  .wash--hero i:nth-child(3) { width: 34vw; height: 30vw; right: 24vw; bottom: -6vw; }

  .garden { padding: 70px 56px 60px 150px; }
  .vine { width: 120px; }
  .vl { width: 34px; height: 21px; margin-top: -10.5px; }
  .vb { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .vine__stem { stroke-width: 2.6; }
  .blk { margin-top: 140px; }
  .vine + .blk { margin-top: 10px; }
  .sheet { padding: 84px 64px 58px; }
  .tag { right: 34px; top: -16px; padding: 9px 16px 10px; }
  .tag__la { font-size: 20px; }
  .sh { margin-bottom: 40px; }
  .sh__n { font-size: 27px; }

  .blk--msg { width: min(100%, 760px); }
  .pf--msg { width: 150px; right: -110px; top: -10px; }
  .msg__sig { font-size: 30px; }
  .pf--pair { width: 130px; left: 45%; bottom: -64px; }
  .who__ph { width: min(100%, 300px); }
  .who__ph.blob--mono { width: min(100%, 250px); }
  .blk--story { width: min(100%, 860px); margin-left: auto; }
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
  .notes .note:nth-child(even) { margin-top: 70px; }
  .notes:has(> .note:only-child) { grid-template-columns: minmax(0, 1fr); }
  .blk--cd { width: min(100%, 880px); }
  .cdf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-bottom: 30px; }
  .cdf__l { font-size: 23px; }
  .pks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
  .pks--1 { grid-template-columns: minmax(0, 380px); }
  .pks--2 { grid-template-columns: repeat(2, minmax(0, 380px)); }
  .pks--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
  .pk:nth-child(even) { margin-top: 0; }
  .pk:nth-child(3n+2) { margin-top: 70px; }
  .pk:nth-child(3n) { margin-top: 24px; }
  .pks--4 .pk:nth-child(4) { margin-top: 90px; }
  .blk--dress { justify-content: flex-start; margin-left: 46%; margin-top: 90px; }
  .ptag { width: 400px; padding: 28px 30px 30px 64px; }
  .ptag__v { font-size: 30px; }
  .pf--dress { width: 96px; right: -56px; top: -40px; }
  .blk--venue .venue { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; }
  .venue__map { height: 380px; }
  .pf--venue { width: 140px; right: -60px; top: -70px; }
  .gal { display: flex; flex-wrap: wrap; align-items: flex-start; padding-bottom: 40px; }
  .gp { width: var(--dw); margin: var(--dmt) 0 0 var(--dml); }
  .gp:nth-child(7n+1) { --dw: 30%; --dml: 0%; --dmt: 0px; }
  .gp:nth-child(7n+2) { --dw: 22%; --dml: -3%; --dmt: 120px; }
  .gp:nth-child(7n+3) { --dw: 26%; --dml: 3%; --dmt: 20px; }
  .gp:nth-child(7n+4) { --dw: 23%; --dml: -3%; --dmt: 160px; }
  .gp:nth-child(7n+5) { --dw: 27%; --dml: 7%; --dmt: -40px; }
  .gp:nth-child(7n+6) { --dw: 22%; --dml: -2%; --dmt: 50px; }
  .gp:nth-child(7n) { --dw: 30%; --dml: 4%; --dmt: -20px; }
  .gal--1 .gp { --dw: 56%; --dml: 10%; }
  .gal--2 .gp:nth-child(2) { --dw: 36%; --dml: -4%; --dmt: 140px; }
  .gal--2 .gp:nth-child(1) { --dw: 44%; }
  .duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; align-items: start; margin-top: 140px; }
  .duo .blk { margin-top: 0; }
  .duo .blk:nth-child(2) { margin-top: 90px; }
  .pf--fam { width: 96px; }
  .fam li { font-size: 28px; }

  .close { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 56px; max-width: 1240px; margin: 0 auto; padding: 40px 56px 120px 150px; text-align: left; overflow: visible; }
  .close__bloom { width: 300px; margin: 0; }
  .close__names { font-size: min(124px, calc(46vw / var(--nw))); }
  .close__names .hn--2 { padding-left: .5em; }
  .close .btns { justify-content: flex-start; }
  .wash--close { left: calc(50% - 50vw); right: calc(50% - 50vw); top: -120px; }
  .wash--close i:nth-child(1) { width: 60vw; height: 50vw; left: 4vw; top: -10%; }
  .wash--close i:nth-child(2) { width: 40vw; height: 36vw; right: -10vw; }
  .intro { --hs: min(40vh, 340px); }
}

@media (max-height: 520px) and (min-width: 560px) {
  .intro { --hs: min(34vh, 220px); padding-top: 18px; padding-bottom: 14px; }
  .intro__names { font-size: 34px; }
  .intro__dear { font-size: 22px; margin-bottom: 2px; }
}

/* =====================================================================
   PREVIEW + REDUCED MOTION
   ===================================================================== */
.wv-instant *, .wv-instant *::before, .wv-instant *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
}