:root {
  --bg: #f2efeb;
  --paper: #ebe7df;
  --ink: #2c2a27;
  --muted: #5a5650;
  --gold: #c4a160;
  --gold-2: #b08a47;
  --green: #4b5a3d;
  --green-2: #6e7d61;
  --sage: #8e9d80;
  --g: clamp(16px, 3vw, 60px);
  --r: 10px;
  --serif: "Gilda Display", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --script: "Pinyon Script", cursive;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: clamp(15px, 1.15vw, 19px); line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, p, figure { margin: 0; font-weight: 400; }

/* ---------- media + placeholders ---------- */
.media { position: relative; overflow: hidden; background: #d9d4cb; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media.is-ph { background: linear-gradient(135deg, #d8d2c7, #e6e1d8 55%, #d3ccc0); }
.media.is-ph img { opacity: 0; }
.media.is-ph::after { content: attr(data-ph); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 500 12px/1 var(--sans); letter-spacing: .06em; color: #8a8378; border: 1px dashed #b9b1a4; padding: 7px 12px; border-radius: 99px; white-space: nowrap; }
.wipe img { clip-path: inset(0 0 100% 0); transform: scale(1.15); transition: clip-path 1.3s var(--ease), transform 1.6s var(--ease); }
.wipe.in img { clip-path: inset(0); transform: none; }

/* ---------- type ---------- */
.eyebrow { color: var(--gold); font-size: clamp(13px, 1.05vw, 17px); letter-spacing: .02em; text-align: center; }
.h-serif { font-family: var(--serif); font-size: clamp(28px, 3.3vw, 62px); line-height: 1.12; text-align: center; letter-spacing: -.005em; }
.h-caps { font-family: var(--serif); text-transform: uppercase; font-size: clamp(28px, 2.9vw, 56px); line-height: 1.05; text-align: center; letter-spacing: -.01em; }
.h-caps.big { font-size: clamp(30px, 3.4vw, 66px); margin-top: clamp(16px, 2vw, 34px); }
.h-caps.light { color: #f6f2ea; }
.rv { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

.btn-green { display: inline-flex; align-items: center; justify-content: center; background: var(--green); color: #fff; border-radius: 8px; padding: 0 1.3em; height: 2.6em; font-size: clamp(15px, 1.1vw, 19px); transition: background .3s, transform .3s var(--ease); }
.btn-green:hover { background: #3c4931; transform: translateY(-1px); }
.btn-green.soft { background: var(--green-2); }
.btn-green.soft:hover { background: var(--green); }

/* wax seal + star */
[data-seal] { display: inline-block; }
[data-seal] svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 10px rgba(110, 70, 20, .25)); }
.seal-sm { width: clamp(64px, 5.4vw, 108px); }
.seal-md { width: clamp(76px, 5.4vw, 108px); }
.seal-lg { width: clamp(84px, 6vw, 118px); }
.seal-xl { width: clamp(110px, 9.5vw, 190px); }
.star { display: inline-block; width: 26px; height: 26px; flex: none; background: var(--gold); clip-path: path("M13 0 C14 9 17 12 26 13 C17 14 14 17 13 26 C12 17 9 14 0 13 C9 12 12 9 13 0Z"); }

/* torn paper */
.paper { position: relative; isolation: isolate; }
.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--paper) var(--noise); filter: url(#torn) drop-shadow(0 10px 18px rgba(60, 50, 35, .14)); }

/* ---------- nav ---------- */
.nav {
  position: fixed; z-index: 50; top: 2.6vh; left: 50%; transform: translate(-50%, -140%); opacity: 0;
  display: flex; align-items: center; gap: clamp(14px, 1.5vw, 28px); background: #fff; border-radius: var(--r);
  padding: 6px 6px 6px 16px; box-shadow: 0 6px 24px rgba(30, 30, 20, .1); transition: transform 1s var(--ease) .9s, opacity .8s ease .9s;
}
.loaded .nav { transform: translate(-50%, 0); opacity: 1; }
.mono { font-family: var(--serif); font-size: clamp(24px, 1.8vw, 32px); letter-spacing: -.02em; margin-right: clamp(6px, 1vw, 20px); }
.nav-links { display: flex; gap: clamp(14px, 1.4vw, 26px); font-size: clamp(14px, 1vw, 17px); }
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav .btn-green { margin-left: clamp(10px, 2vw, 40px); height: 2.5em; }

/* ---------- hero ---------- */
.hero { height: 100vh; height: 100svh; padding: 11px; }
.hero-frame { position: relative; height: 100%; border-radius: var(--r); overflow: hidden; clip-path: inset(0 0 26% 0 round var(--r)); transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1) .1s; background: #2b3a40; }
.loaded .hero-frame { clip-path: inset(0 0 0 0 round var(--r)); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { transform: scale(1.12); transition: transform 2.6s var(--ease); will-change: transform; }
.loaded .hero-media img { transform: scale(1); }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 15, 15, .25), rgba(10, 15, 15, 0) 30%, rgba(10, 15, 15, .1) 60%, rgba(10, 15, 15, .45)); }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(14px, 2vw, 40px) clamp(10px, 1.6vh, 24px); color: #fff; }
.hero-of, .hero-date { display: flex; align-items: center; gap: 14px; font-size: clamp(16px, 1.75vw, 32px); opacity: 0; transition: opacity 1s ease, transform 1.2s var(--ease); }
.hero-of { transform: translateX(-30px); transition-delay: 1.6s; margin-bottom: -.6vw; }
.hero-date { justify-content: flex-end; transform: translateX(30px); transition-delay: 1.75s; margin-top: -1.2vw; }
.loaded .hero-of, .loaded .hero-date { opacity: 1; transform: none; }
.dash { display: block; width: clamp(24px, 2.2vw, 42px); height: 1.5px; background: currentColor; }
.hero-names { font-family: var(--serif); line-height: .95; letter-spacing: -.03em; white-space: nowrap; font-size: 15vw; display: inline-block; }
.hero-names span { display: inline-block; transform: translateY(70%); opacity: 0; transition: transform 1.3s var(--ease), opacity 1s ease; }
.hero-names span:nth-child(1) { transition-delay: 1.15s; }
.hero-names span:nth-child(2) { transition-delay: 1.25s; }
.hero-names span:nth-child(3) { transition-delay: 1.35s; }
.loaded .hero-names span { transform: none; opacity: 1; }

/* ---------- save the date ---------- */
.std { padding: clamp(80px, 9vw, 170px) var(--g) clamp(80px, 9vw, 170px); display: flex; flex-direction: column; align-items: center; }
.std .h-serif { max-width: 18em; margin-top: clamp(16px, 2vw, 34px); }
.env-wrap { margin-top: clamp(50px, 6vw, 110px); display: flex; flex-direction: column; align-items: center; }
.env { position: relative; width: clamp(280px, 27vw, 540px); aspect-ratio: 545 / 372; perspective: 1400px; }
.env-back { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(180deg, #cfc7b9, #d8d0c3) ; background-image: var(--noise), linear-gradient(180deg, #cfc7b9, #d8d0c3); box-shadow: 0 18px 40px rgba(70, 55, 35, .16); }
.env-card { position: absolute; left: 6%; right: 6%; top: 5%; bottom: 6%; z-index: 2; background: #faf8f3 var(--noise); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35em; text-align: center; color: var(--ink); transition: transform 1.2s var(--ease) .45s; box-shadow: 0 4px 16px rgba(0, 0, 0, .08); }
.card-mono { font-family: var(--serif); font-size: clamp(22px, 2vw, 38px); color: var(--gold-2); }
.card-sm { font-size: clamp(10px, .75vw, 13px); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.card-names { font-family: var(--script); font-size: clamp(28px, 2.6vw, 50px); line-height: 1.1; }
.card-date { font-family: var(--serif); font-size: clamp(16px, 1.3vw, 24px); letter-spacing: .1em; }
.env-front { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; border-radius: 0 0 8px 8px; }
.env-flap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; transform-origin: 50% 0; transition: transform 1s var(--ease), z-index 0s .35s; }
.env-seal { position: absolute; z-index: 5; left: 50%; top: 62%; width: 15%; transform: translate(-50%, -50%); transition: transform .6s var(--ease), opacity .5s; }
.env:hover .env-seal { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); }
.env-love { position: absolute; z-index: 5; left: 0; right: 0; bottom: 7%; text-align: center; color: var(--gold-2); font-size: clamp(12px, .9vw, 16px); transition: opacity .4s; }
.env-hint { margin-top: 18px; font-size: 13px; color: var(--muted); letter-spacing: .04em; transition: opacity .4s; }
.env.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.env.open .env-love { opacity: 0; }
.env.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.env.open .env-card { transform: translateY(-62%); }
.env-wrap.opened .env-hint { opacity: 0; }
.env-wrap.opened { margin-top: clamp(140px, 17vw, 330px); transition: margin-top 1.2s var(--ease) .45s; }

/* ---------- story ---------- */
.story { position: relative; padding: clamp(60px, 6vw, 120px) 0 clamp(80px, 8vw, 160px); background-color: #eeebe4; background-image: url(images/botanical.jpg); background-size: min(1400px, 100vw) auto; background-repeat: repeat; overflow: hidden; }
.story.no-bg { background-image: repeating-radial-gradient(circle at 20% 30%, transparent 0 38px, rgba(142, 157, 128, .18) 39px 40px); }
.story-title { position: absolute; left: 36.5%; top: clamp(70px, 6.5vw, 130px); width: 27.5vw; padding: 2.2vw 1vw 2.4vw; text-align: center; z-index: 3; }
.story-title .h-caps { margin-top: 1.2vw; }
.story-rows { position: relative; padding-top: clamp(40px, 3vw, 60px); }
.srow { position: relative; height: 34vw; }
.srow:last-child { height: 40vw; }
.s-card { position: absolute; left: 14%; top: 0; width: 21.5vw; background: #f4f2ee; border-radius: 8px; padding: 1.1vw 1.1vw .9vw; z-index: 2; box-shadow: 0 10px 30px rgba(50, 45, 30, .12); will-change: transform; }
.alt .s-card { left: 51.5%; }
.s-card header { display: flex; justify-content: space-between; font-size: clamp(16px, 1.6vw, 32px); margin-bottom: 1vw; color: #3d3a35; }
.s-card .media { aspect-ratio: 386 / 458; border-radius: 10px; }
.s-card time { display: block; margin-top: 1vw; font-size: clamp(13px, 1.1vw, 21px); color: var(--muted); }
.s-note { position: absolute; left: calc(14% + 21.5vw - 3vw); top: 11vw; width: 22vw; min-height: 26vw; padding: 7.5vw 2vw 3vw 4.5vw; z-index: 1; will-change: transform; }
.alt .s-note { left: calc(51.5% + 21.5vw - 3vw); }
.s-note p { font-size: clamp(14px, 1.2vw, 21px); text-align: center; line-height: 1.32; color: #36332e; }
.s-note .seal-sm { position: absolute; left: -2vw; top: -2.5vw; }
.srow > .seal-sm { position: absolute; z-index: 3; left: calc(14% + 21.5vw - 5vw); top: calc(11vw - 2.5vw); will-change: transform; }
.alt > .seal-sm { left: calc(51.5% + 21.5vw - 5vw); }

/* ---------- schedule ---------- */
.sched { padding: clamp(90px, 8vw, 150px) var(--g) clamp(80px, 8vw, 150px); }
.tl { max-width: 1000px; width: 50vw; margin: clamp(50px, 6vw, 110px) auto 0; }
.tl-row { display: grid; grid-template-columns: 1fr 86px 1fr; min-height: 22vw; }
.tl-side { padding-top: 1vw; }
.tl-side.l { justify-self: end; }
.tl-side.r { justify-self: start; }
.tl-side.l.txt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.tl-side.r.txt { padding-top: 2vw; }
.tl-mid { display: flex; flex-direction: column; align-items: center; }
.tl-mid .star { margin-bottom: 8px; }
.line { position: relative; flex: 1; width: 2px; background: #fff; margin-bottom: 8px; border-radius: 2px; overflow: hidden; }
.line i { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: var(--sage); transform: scaleY(0); transform-origin: top; }
.wc { width: clamp(150px, 14.3vw, 280px); aspect-ratio: 285 / 370; background: transparent; }
.wc img { mix-blend-mode: multiply; -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 62%, transparent 100%); }
.wc.is-ph { background: linear-gradient(135deg, #e5e0d6, #ece8e0); }
.txt time { display: block; margin-top: clamp(18px, 2vw, 40px); color: var(--muted); font-size: clamp(14px, 1.1vw, 20px); }
.txt h3 { font-size: clamp(22px, 1.75vw, 34px); font-weight: 500; margin: .4em 0 .45em; letter-spacing: -.01em; }
.txt p { max-width: 16em; color: #3c3934; font-size: clamp(14px, 1.15vw, 20px); line-height: 1.32; }

/* ---------- venue ---------- */
.venue { position: relative; min-height: 112vh; display: grid; place-items: center; padding: 8vh var(--g); overflow: hidden; }
.venue-bg { position: absolute; inset: 0; }
.venue-bg img { transform: scale(1.12); will-change: transform; }
.frame { position: relative; width: clamp(290px, 30.5vw, 600px); min-height: min(100vh, 54vw); background: #f7f4ec var(--noise); border-radius: 48% 48% 14px 14px / 26% 26% 14px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10vw 3vw 9vw;
  box-shadow: inset 0 0 0 10px #f7f4ec, inset 0 0 0 12px var(--gold), inset 0 0 0 18px #f7f4ec, inset 0 0 0 19px var(--sage), 0 30px 60px rgba(0, 0, 0, .25); }
.flour { position: absolute; left: 50%; width: 62%; transform: translateX(-50%); fill: none; stroke: var(--sage); stroke-width: 2; }
.flour.top { top: 4.5%; }
.flour.bot { bottom: 3.5%; }
.frame .eyebrow { font-size: clamp(14px, 1.2vw, 22px); }
.frame-sm { font-size: clamp(16px, 1.55vw, 30px); font-weight: 500; margin-top: .6em; letter-spacing: -.01em; }
.frame-name { font-family: var(--serif); text-transform: uppercase; font-size: clamp(40px, 3.6vw, 72px); line-height: 1.05; margin: .45em 0 .35em; }
.frame-place { font-size: clamp(15px, 1.1vw, 20px); margin-bottom: 1.4em; }

/* ---------- info ---------- */
.info { padding: clamp(90px, 8vw, 150px) 15vw clamp(60px, 6vw, 110px); }
.irow { display: grid; grid-template-columns: 1fr 1.25fr; align-items: center; gap: 2vw; margin-top: clamp(50px, 6vw, 110px); }
.irow.flip { grid-template-columns: 1.25fr 1fr; }
.irow.flip .itxt { order: 2; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.label { color: var(--gold); letter-spacing: .16em; font-size: clamp(13px, 1.3vw, 24px); margin-top: clamp(30px, 3vw, 60px); }
.itxt h3 { font-size: clamp(22px, 1.8vw, 34px); font-weight: 500; margin: .4em 0 .55em; }
.itxt p:last-child { color: #3c3934; font-size: clamp(14px, 1.15vw, 20px); line-height: 1.32; max-width: 29em; }
.pols { position: relative; height: clamp(360px, 31vw, 620px); }
.pol { position: absolute; background: #f7f5f1; padding: 1vw 1vw 0; border-radius: 4px; box-shadow: 0 18px 40px rgba(50, 40, 30, .16); will-change: transform; }
.pol .media { border-radius: 2px; }
.pol figcaption { text-align: center; padding: 1vw 0 1.3vw; color: #6f7d60; }
.cap-serif { font-family: var(--serif); font-size: clamp(15px, 1.25vw, 24px); color: #8c8370 !important; }
.cap-script { font-family: var(--script); font-size: clamp(22px, 1.9vw, 36px); line-height: 1; }
.pol.a { width: 20vw; left: 2%; top: 12%; z-index: 2; --rot: -5deg; }
.pol.a .media { aspect-ratio: 400 / 280; }
.pol.b { width: 23vw; right: 0; top: 0; --rot: 8deg; }
.pol.b .media { aspect-ratio: 440 / 470; }
.irow.flip .pol.b { left: 0; right: auto; --rot: -7deg; }
.irow.flip .pol.a { left: auto; right: 6%; top: 10%; --rot: 4deg; }

/* ---------- rsvp ---------- */
.rsvp { position: relative; min-height: 116vh; display: grid; place-items: center; padding: 12vh var(--g); overflow: hidden; }
.rsvp-bg { position: absolute; inset: 0; }
.rsvp-bg img { transform: scale(1.1); will-change: transform; }
.rsvp-card { width: min(1200px, 60vw); padding: 7vw 6vw 9vw; display: flex; flex-direction: column; align-items: center; }
.rsvp-card .seal-xl { position: absolute; top: -4.5vw; left: 50%; transform: translateX(-50%); }
.rsvp-card .h-serif { font-size: clamp(24px, 2.5vw, 50px); margin-top: 1.6vw; }
.rsvp-bar { width: 80%; margin-top: 4vw; background: rgba(170, 174, 152, .45); border-radius: 8px; padding: 1.6vw; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.rsvp-bar strong { display: block; font-weight: 500; font-size: clamp(18px, 1.75vw, 34px); }
.rsvp-bar span { font-size: clamp(13px, 1.1vw, 20px); color: #3c3934; }

/* ---------- faq ---------- */
.faq { padding: clamp(90px, 8vw, 150px) var(--g) clamp(90px, 9vw, 170px); }
.faq-list { max-width: 1200px; width: 60vw; margin: clamp(50px, 6vw, 110px) auto 0; border-top: 1px solid #3a3733; }
details { border-bottom: 1px solid #3a3733; }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: clamp(18px, 2.3vw, 44px) 0; font-size: clamp(18px, 1.7vw, 32px); }
summary::-webkit-details-marker { display: none; }
summary .star { transition: transform .5s var(--ease); }
details[open] summary .star { transform: rotate(45deg); }
details p { color: var(--muted); max-width: 40em; padding-bottom: clamp(18px, 2vw, 36px); font-size: clamp(15px, 1.15vw, 20px); animation: faqIn .5s var(--ease); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- closing + footer ---------- */
.close { position: relative; height: 115vh; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.close-bg { position: absolute; inset: 0; }
.close-bg img { transform: scale(1.12); will-change: transform; }
.close-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 25, 15, 0) 50%, rgba(20, 25, 15, .45)); }
.close-txt { position: relative; padding-bottom: 12vh; }
.close-txt .h-caps { margin-top: 1.4vw; font-size: clamp(32px, 3.6vw, 70px); }
.foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(60px, 6vw, 110px) var(--g); text-align: center; color: var(--muted); font-size: 14px; }
.foot-names { font-family: var(--script); font-size: clamp(36px, 3vw, 56px); color: var(--ink); line-height: 1.2; }
.foot-top { margin-top: 14px; color: var(--gold-2); }

/* ---------- RSVP modal ---------- */
.modal { border: 0; padding: 0; background: transparent; max-width: 520px; width: calc(100% - 32px); }
.modal::backdrop { background: rgba(30, 28, 22, .55); backdrop-filter: blur(4px); }
.modal[open] { animation: modalIn .6s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(30px) scale(.97); } }
.modal-in { position: relative; background: #f7f4ec var(--noise); border-radius: 12px; padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 14px; }
.modal-in .seal-md { align-self: center; width: 76px; }
.modal-in .h-serif { font-size: 34px; margin-bottom: 4px; }
.modal-in label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--muted); }
.modal-in input:not([type=radio]), .modal-in select, .modal-in textarea { font: inherit; color: var(--ink); background: #fff; border: 1px solid #ddd6ca; border-radius: 8px; padding: 10px 12px; }
.modal-in fieldset { border: 0; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.modal-in legend { margin-bottom: 6px; }
.radio { flex-direction: row !important; align-items: center; color: var(--ink) !important; }
.modal-x { position: absolute; right: 16px; top: 10px; font-size: 28px; color: var(--muted); }
.modal-in .btn-green { margin-top: 6px; }
.modal-thanks { text-align: center; color: var(--green); font-family: var(--serif); font-size: 22px; }

/* ---------- "before" wireframe → reload → real site ---------- */
html.wiring, html.wiring body { overflow: hidden; }
.wire { position: fixed; inset: 0; z-index: 100; cursor: pointer; background: #ececec; color: #bdbdbd; overflow: hidden; transition: opacity .55s ease; }
.wire.out { opacity: 0; pointer-events: none; transition-delay: .35s; }
.wire-lines { position: absolute; inset: 0 var(--g); display: grid; grid-template-columns: repeat(4, 1fr); }
.wire-lines i { border-left: 1px dashed #d6d6d6; }
.wire-lines i:last-child { border-right: 1px dashed #d6d6d6; }
.wire-bar { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: #111; transform: scaleX(0); transform-origin: left; opacity: 0; }
.wire-bar.go { opacity: 1; transform: scaleX(1); transition: transform 1s cubic-bezier(.3, .7, .2, 1), opacity .2s; }
.wire-in { position: relative; height: 100%; }
.wb { display: block; position: absolute; background: #cfcfcf; border-radius: 10px; opacity: 0; transform: translate3d(var(--x, -55vw), 0, 0);
  transition: opacity .5s ease, transform 1.15s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 45ms); }
.w-l3, .w-btn, .w-n2, .w-date { --x: 55vw; }
.wire.show .wb { opacity: 1; transform: none; }
.wire.show.out .wb { opacity: 0; transform: translate3d(calc(var(--x, -55vw) * .5), 0, 0); transition-duration: .45s, .7s; transition-timing-function: ease, cubic-bezier(.7, 0, .84, 0); transition-delay: calc(var(--d, 0) * 18ms); }
.wb.wpill { border-radius: 999px; height: 12px; }
.wire.pulse .wb { animation: wirePulse 1.1s ease-in-out infinite; }
@keyframes wirePulse { 50% { background: #dcdcdc; } }
.w-frame { inset: 11px; background: #e1e1e1; }
.w-nav { top: calc(2.6vh); left: 50%; width: min(560px, 46vw); margin-left: max(-280px, -23vw); height: 58px; background: #f6f6f6; }
.w-mono { top: calc(2.6vh + 17px); left: calc(50% - min(280px, 23vw) + 16px); width: 56px; height: 24px; border-radius: 6px; background: #c6c6c6; }
.w-l1, .w-l2, .w-l3 { top: calc(2.6vh + 23px); background: #c6c6c6; }
.w-l1 { left: calc(50% - min(280px, 23vw) + 104px); width: 66px; }
.w-l2 { left: calc(50% - min(280px, 23vw) + 190px); width: 70px; }
.w-l3 { left: calc(50% - min(280px, 23vw) + 280px); width: 50px; }
.w-btn { top: calc(2.6vh + 6px); right: calc(50% - min(280px, 23vw) + 6px); width: 150px; height: 46px; border-radius: 8px; background: #c6c6c6; }
.w-of { left: calc(11px + 2vw); bottom: calc(11px + 15vw); width: clamp(150px, 15vw, 260px); height: 16px; background: #c6c6c6; }
.w-n1, .w-n2 { bottom: calc(11px + 2vh); height: 12vw; border-radius: 16px; background: #c6c6c6; }
.w-n1 { left: calc(11px + 2vw); width: 38%; }
.w-n2 { left: calc(11px + 2vw + 38% + 1.5vw); right: calc(11px + 2vw); }
.w-date { right: calc(11px + 2vw); bottom: calc(11px + 2vh - 22px); width: clamp(160px, 18vw, 300px); height: 14px; background: #bdbdbd; }
.w-img { left: 50%; top: 40%; width: clamp(70px, 7.5vw, 120px); aspect-ratio: 1; margin: calc(clamp(70px, 7.5vw, 120px) / -2) 0 0 calc(clamp(70px, 7.5vw, 120px) / -2); background: transparent !important; color: #b4b4b4; transform: scale(.4) rotate(-8deg); }
.wire.show .w-img { transform: none; }
.wire.show.out .w-img { transform: scale(.4) rotate(8deg); }
.w-img svg { width: 100%; height: 100%; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .nav { width: calc(100% - 32px); justify-content: space-between; padding-left: 14px; }
  .nav-links { display: none; }
  .nav .btn-green { margin-left: 0; }
  .hero-of { margin-bottom: 0; }
  .hero-date { margin-top: 4px; }
  .story-title { position: relative; left: auto; top: auto; width: auto; margin: 0 var(--g) 40px; padding: 30px 20px; }
  .srow, .srow:last-child { height: auto; display: flex; flex-direction: column; align-items: center; padding: 0 var(--g) 60px; }
  .s-card, .alt .s-card { position: relative; left: auto; width: min(78vw, 360px); padding: 14px; }
  .s-card header { margin-bottom: 12px; }
  .s-card time { margin-top: 12px; }
  .s-note, .alt .s-note { position: relative; left: auto; top: auto; width: min(86vw, 400px); min-height: 0; margin-top: -30px; padding: 70px 26px 40px; }
  .s-note, .alt .s-note { z-index: 3; margin-top: -14px; }
  .s-note .seal-sm { left: 50%; top: -30px; transform: translateX(-50%); }
  .tl { width: 100%; }
  .tl-row { grid-template-columns: 1fr 40px 1fr; min-height: 0; padding-bottom: 30px; }
  .wc { width: 100%; max-width: 160px; }
  .frame { width: min(92vw, 420px); min-height: 0; padding: 120px 28px 110px; }
  .info { padding-left: var(--g); padding-right: var(--g); }
  .irow, .irow.flip { grid-template-columns: 1fr; gap: 30px; }
  .irow.flip .itxt { order: 0; text-align: left; align-items: flex-start; }
  .pols { height: 92vw; }
  .pol { padding: 10px 10px 0; }
  .pol figcaption { padding: 10px 0 12px; }
  .pol.a { width: 58vw; }
  .pol.b { width: 62vw; }
  .rsvp-card { width: 100%; padding: 90px 22px 70px; }
  .rsvp-card .seal-xl { top: -50px; }
  .rsvp-bar { width: 100%; flex-direction: column; align-items: flex-start; padding: 18px; }
  .faq-list { width: 100%; }
  .wire-lines { grid-template-columns: repeat(2, 1fr); }
  .wire-lines i:nth-child(n+3) { display: none; }
  .wire-lines i:nth-child(2) { border-right: 1px dashed #d6d6d6; }
  .w-nav { left: 16px; right: 16px; width: auto; margin: 0; }
  .w-mono { left: 32px; }
  .w-l1, .w-l2, .w-l3 { display: none; }
  .w-btn { right: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .wire { display: none; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; }
}

/* rotated polaroids may poke a few px past the edge on phones */
html { overflow-x: clip; }