/* Sami & Dalel — "The Secret Garden" */
:root {
  --ivory: #F6F0E4;
  --paper: #FBF8F1;
  --gold: #C9A961;
  --gold-deep: #8A6A2B;
  --gold-text: #7A5C24;   /* deep gold tuned for >=4.5:1 on ivory */
  --gold-light: #F3E3AE;
  --sage: #A8B5A0;
  --sage-deep: #5E6E58;
  --blush: #E8CFC8;
  --ink: #2B2A26;
  --dusk: #1C2620;
  --dusk-2: #243129;

  --f-text: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --f-caps: "Cinzel", "Trajan Pro", Georgia, serif;

  --ease-out: cubic-bezier(.22, .8, .24, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --paper-tex: url("../assets/img/paper.jpg");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--dusk); }
html.is-locked, html.is-locked body { overflow: hidden; height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(201,169,97,.10), transparent 60%),
    radial-gradient(140% 90% at 50% 110%, rgba(0,0,0,.45), transparent 60%),
    var(--dusk);
  color: var(--ink);
  font: 400 19px/1.6 var(--f-text);
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- Intro ---------- */
.intro {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 6vh, 56px);
  background:
    radial-gradient(75% 55% at 50% 45%, #2A382F 0%, var(--dusk) 62%, #121915 100%);
  overflow: hidden;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
.motes { position: absolute; inset: 0; pointer-events: none; }
.motes i {
  position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold-light); opacity: 0;
  box-shadow: 0 0 6px 1px rgba(243,227,174,.5);
  animation: mote 16s linear infinite;
}
.motes i:nth-child(1) { left: 12%; animation-delay: 0s; }
.motes i:nth-child(2) { left: 28%; animation-delay: -5s; animation-duration: 19s; }
.motes i:nth-child(3) { left: 46%; animation-delay: -11s; animation-duration: 22s; transform: scale(.7); }
.motes i:nth-child(4) { left: 63%; animation-delay: -3s; animation-duration: 18s; }
.motes i:nth-child(5) { left: 78%; animation-delay: -8s; animation-duration: 21s; }
.motes i:nth-child(6) { left: 90%; animation-delay: -14s; }
.motes i:nth-child(7) { left: 36%; animation-delay: -9s; animation-duration: 25s; }
@keyframes mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: .55; }
  85% { opacity: .35; }
  100% { transform: translate3d(24px, -100vh, 0); opacity: 0; }
}

.stage { perspective: 1400px; }
.envelope {
  --w: min(86vw, 420px, 70vh);
  position: relative;
  width: var(--w);
  height: calc(var(--w) * .7);
  perspective: 1200px;
  transition: transform 1s var(--ease-io), opacity .8s ease;
}
.env-back, .env-pocket, .env-flap__face {
  position: absolute; left: 0; right: 0;
}
.env-back {
  inset: 0; z-index: 1; border-radius: 4px;
  background: var(--sage-deep) url("../assets/img/liner.jpg") center/cover;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 10px 20px -10px rgba(0,0,0,.5);
}
.env-pocket {
  inset: 0; z-index: 3;
  background: var(--paper-tex) center/420px, linear-gradient(180deg, #FFFDF8, #FBF5EA);
  background-blend-mode: multiply;
  -webkit-clip-path: polygon(0 0, 46% 50%, 54% 50%, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 46% 50%, 54% 50%, 100% 0, 100% 100%, 0 100%);
  border-radius: 4px;
}
.env-pocket::after { /* soft inner light & edge shading */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 80% at 50% 70%, transparent 50%, rgba(120,95,50,.16));
}
.env-folds { position: absolute; inset: 0; width: 100%; height: 100%; }
.env-folds path { fill: none; stroke: rgba(110,85,40,.22); stroke-width: 1; vector-effect: non-scaling-stroke; }
.env-names {
  position: absolute; left: 0; right: 0; bottom: 7%; z-index: 1;
  text-align: center;
  font: 400 calc(var(--w) * .085)/1 var(--f-script);
  color: var(--gold-deep);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.env-names span { font-size: .8em; }

.env-flap {
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  z-index: 4; transform-origin: 50% 0;
  transform-style: preserve-3d;
  transition: transform .8s var(--ease-io);
}
.env-flap__face {
  inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  -webkit-clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
  clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
}
.env-flap__front {
  background: var(--paper-tex) center top/420px, linear-gradient(180deg, #FFFCF6 0%, #F9F2E4 70%, #F1E7D4 100%);
  background-blend-mode: multiply;
}
.env-flap__back {
  transform: rotateX(180deg);
  /* mirrored triangle: once the flap swings open its wide edge stays on the hinge and the tip points up */
  -webkit-clip-path: polygon(48% 2%, 52% 2%, 100% 100%, 0 100%);
  clip-path: polygon(48% 2%, 52% 2%, 100% 100%, 0 100%);
  background: var(--sage-deep) url("../assets/img/liner.jpg") center top/cover;
}
.env-flap::before { /* soft shadow the closed flap casts on the pocket */
  content: ""; position: absolute; inset: 0; transform: translate3d(0, 3px, -1px);
  background: rgba(70,55,25,.22);
  -webkit-clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%); clip-path: polygon(0 0, 100% 0, 52% 98%, 48% 98%);
  transition: opacity .2s ease;
}
.p3 .env-flap::before { opacity: 0; }
/* Face swap at 90deg without relying on backface-visibility (WebKit ignores it on clip-pathed faces).
   --ease-io is symmetric, so the flap crosses 90deg at exactly half its .8s duration. */
.env-flap__back { visibility: hidden; }
.p3 .env-flap__back { visibility: visible; transition: visibility 0s linear .4s; }
.p3 .env-flap__front { visibility: hidden; transition: visibility 0s linear .4s; }

.env-card {
  position: absolute; left: 6%; right: 6%; top: 5%; bottom: 6%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding-top: 9%; gap: 6px;
  background: var(--paper-tex) center/420px, #FFFEFA;
  background-blend-mode: multiply;
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201,169,97,.35), inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(201,169,97,.5), 0 -2px 10px rgba(0,0,0,.15);
  transition: transform 1s var(--ease-out), opacity .7s ease;
}
.star.is-svg { -webkit-clip-path: none; clip-path: none; background: none; color: var(--gold); }
.star svg { width: 100%; height: 100%; }
.env-card__star, .star {
  display: block; flex: none;
  width: 18px; height: 18px; background: var(--gold);
  -webkit-clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
  clip-path: polygon(50% 0, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0 50%, 26% 39%, 15% 15%, 39% 26%);
}
.env-card__names { font: 400 calc(var(--w) * .1)/1.1 var(--f-script); color: var(--gold-deep); }
.env-card__date { font: 400 10px/1 var(--f-caps); letter-spacing: .3em; color: var(--gold-text); }

/* Seal */
.seal {
  --s: calc(var(--w) * .32);
  position: absolute; z-index: 6;
  left: 50%; top: 56%;
  width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
  -webkit-touch-callout: none;
}
.seal__img, .seal__css { transition: transform .6s var(--ease-out), opacity .5s ease; }
.seal__shadow { /* contact shadow on the paper: stays put when the seal lifts */
  position: absolute; left: 8%; right: 8%; top: 14%; bottom: -2%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(45,35,15,.42), rgba(45,35,15,.18) 62%, transparent);
  filter: blur(5px); transform: translateY(4%);
  transition: opacity .5s ease, transform .6s var(--ease-out);
  pointer-events: none;
}
.seal:focus-visible { outline-offset: 6px; border-radius: 50%; }
.seal__img { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 1px 1.5px rgba(40,30,12,.45)); pointer-events: none; -webkit-user-drag: none; user-select: none; }
.seal__glow { /* faint candle-light breathing around the seal: a tap affordance, not a halo */
  position: absolute; inset: -22%; border-radius: 50%;
  background: radial-gradient(circle, rgba(243,227,174,.32) 30%, rgba(201,169,97,.10) 52%, transparent 70%);
  mix-blend-mode: soft-light;
  animation: breathe 4.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes breathe { 0%, 100% { opacity: .2; transform: scale(.96); } 50% { opacity: .85; transform: scale(1.04); } }
.seal__css { display: none; }
.seal--fallback .seal__img { display: none; }
.seal--fallback .seal__css {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: 400 calc(var(--s) * .26)/1 var(--f-caps); letter-spacing: .04em; color: var(--gold-light);
  text-shadow: 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.15);
  background: radial-gradient(circle at 38% 32%, #9DAE93 0%, #6F8268 38%, #4E5E49 72%, #3E4B3A 100%);
  box-shadow:
    inset 0 0 0 calc(var(--s) * .09) rgba(78,94,73,.0),
    inset 0 0 0 calc(var(--s) * .1) rgba(201,169,97,.45),
    inset 0 0 0 calc(var(--s) * .11) rgba(0,0,0,.15),
    0 0 0 3px #55664F, 0 0 0 4px rgba(201,169,97,.55),
    0 8px 14px rgba(0,0,0,.4);
}
.seal--fallback .seal__css em { font: italic 400 .8em var(--f-text); margin: 0 .1em; }

.hint {
  font: 400 12px/1 var(--f-caps); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); text-align: center; padding-left: .3em;
  animation: hint 3.2s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes hint { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

/* Opening choreography (classes added by JS on #intro) */
.p1 .seal__img, .p1 .seal__css { transform: scale(.94); transition-duration: .2s; }
.p1 .seal__shadow { transform: translateY(2%) scale(.97); }
.p1 .seal__glow { animation: none; opacity: 0; transition: opacity .3s ease; }
.p1 .hint { opacity: 0; animation: none; }
.p2 .seal__img, .p2 .seal__css { transform: translateY(-16%) scale(1.08) rotate(-7deg); opacity: 0; transition: transform .6s var(--ease-out), opacity .45s ease .1s; }
.p2 .seal__shadow { transform: translateY(10%) scale(1.15); opacity: 0; }
.p3 .env-flap { transform: rotateX(180deg); }
.p4 .env-flap { z-index: 1; }
.p5 .env-card { transform: translateY(-58%); }
.p6 .envelope { transform: translateY(14vh) scale(.94); transition: transform 1.2s var(--ease-io); }
.p6 .env-card { transform: translateY(-70%) scale(1.22); transition: transform 1.1s var(--ease-io); }
/* the page is already opaque underneath, so the intro dissolves straight into it (no dip to dark) */
.p6.intro { opacity: 0; visibility: hidden; transition: opacity .8s ease .3s, visibility 0s linear 1.1s; }
.is-fading.intro { transition: opacity .4s ease, visibility 0s linear .4s; opacity: 0; visibility: hidden; }

/* ---------- Page ---------- */
.page {
  padding: max(20px, env(safe-area-inset-top)) 12px calc(96px + env(safe-area-inset-bottom));
  opacity: 0; transform: scale(.97) translateY(12px);
  transition: opacity .6s ease, transform 1.6s var(--ease-out);
}
.is-open .page { opacity: 1; transform: none; }
.no-motion .page { transform: none; transition: opacity .5s ease .3s; }

.card {
  position: relative;
  max-width: 560px; margin: 0 auto;
  padding: 28px var(--pad-x) 56px;
  --pad-x: clamp(33px, 9vw, 56px);
  background: var(--paper-tex) 0 0/512px, #FFFDF9;
  background-blend-mode: multiply;
  background-color: var(--ivory);
  border-radius: 3px;
  box-shadow:
    inset 0 0 40px rgba(170,140,80,.16),
    inset 0 0 3px rgba(150,120,60,.25),
    0 1px 0 rgba(255,255,255,.1),
    0 40px 80px -30px rgba(0,0,0,.75),
    0 12px 30px -12px rgba(0,0,0,.5);
  text-align: center;
}
.card::before { /* hairline gold inner border */
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 1;
  border: 1px solid rgba(201,169,97,.55);
  outline: 1px solid rgba(201,169,97,.22); outline-offset: 3px;
  border-radius: 1px;
}

/* Type */
.label {
  font: 400 12px/1.7 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-text); margin: 0;
}
.label--center { text-align: center; }
.h2 {
  margin: 0 0 22px; font: italic 400 clamp(26px, 7vw, 32px)/1.2 var(--f-text);
  color: var(--ink); letter-spacing: .01em;
}

/* Hero */
.hero { position: relative; padding: 46px 6px 26px; }
.arch { position: absolute; left: 0; right: 0; top: 0; bottom: -40px; color: var(--gold); pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.arch svg { width: 100%; height: 100%; }
.hero__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.monogram { width: 104px; height: 104px; color: var(--gold); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.monogram svg { width: 100%; height: 100%; }
.monogram__fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  border: 1px solid currentColor; border-radius: 50%;
  font: 400 20px/1 var(--f-caps); color: var(--gold-deep); letter-spacing: .05em;
}
.monogram__fallback em { font: italic 400 18px var(--f-text); margin: 0 .25em; }
.monogram--sm { width: 84px; height: 84px; margin: 28px auto 20px; }
.hero .label { font-size: 11.5px; line-height: 1.9; }
.hero__families span { display: block; white-space: nowrap; }

.names {
  margin: 6px 0 0; font-weight: 400;
  font: 400 clamp(58px, 17vw, 84px)/1.05 var(--f-script);
  display: flex; flex-direction: column; align-items: center;
  /* restrained foil: a soft champagne glint drifting across deep gold */
  background: linear-gradient(100deg, #7A5C24 0%, #9C7A34 25%, #B8903F 40%, #D9BC74 48%, #B8903F 56%, #9C7A34 72%, #7A5C24 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: foil 14s ease-in-out infinite alternate;
  padding: 0 .2em .1em;
}
.names span { display: block; }
.names__amp { font-size: .55em; line-height: .9; margin: -.05em 0; }
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.lede { font: italic 400 21px/1.45 var(--f-text); max-width: 13em; text-wrap: balance; color: var(--ink); }

.details { padding: 10px 0 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.details__date { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.details__day { font: 500 26px/1.3 var(--f-text); letter-spacing: .02em; }
.details__time { font: 300 22px/1.3 var(--f-text); letter-spacing: .08em; color: var(--ink); font-variant-numeric: lining-nums; }
.rule { width: 44px; height: 1px; background: var(--gold); margin: 14px 0 12px; }
.details__venue { font: 500 20px/1.5 var(--f-text); }
.details__venue span { font-weight: 400; font-style: italic; color: var(--sage-deep); }

.divider { width: 78%; max-width: 300px; margin: 34px auto 26px; color: var(--gold); min-height: 24px; }
.divider svg { width: 100%; height: auto; }
.divider--css { height: 1px; min-height: 0; background: linear-gradient(90deg, transparent, var(--gold), transparent); position: relative; }

.note p { font: italic 400 20px/1.6 var(--f-text); max-width: 22em; margin: 0 auto; }
.note .ar {
  font: 400 1.2em/1 "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
  color: var(--gold-text);
  white-space: nowrap;
  unicode-bidi: isolate;
  font-style: normal;
  vertical-align: -0.02em;
  padding-inline: .08em;
}

section + section { margin-top: 56px; }

/* Countdown */
.countdown { padding-top: 6px; }
.cd { display: flex; justify-content: center; align-items: stretch; }
.cd__unit { flex: 0 1 96px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px; position: relative; }
.cd__unit + .cd__unit::before {
  content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}
.cd__num {
  font: 300 clamp(46px, 13vw, 60px)/1 var(--f-text); color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  transition: opacity .35s ease;
}
.cd__num.is-tick { opacity: .25; }
.cd__lbl { font: 400 11px/1 var(--f-caps); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-text); padding-left: .2em; }
.cd__sec { margin-top: 14px; font: italic 400 18px/1 var(--f-text); color: var(--sage-deep); min-height: 18px; font-variant-numeric: tabular-nums; }
.cd__msg { font: italic 400 20px/1.5 var(--f-text); color: var(--sage-deep); }
.countdown.is-day .h2, .countdown.is-after .h2 { font-size: clamp(30px, 8vw, 38px); }

/* Map */
.map .star { width: 26px; height: 26px; margin: 0 auto 18px; }
.map__frame {
  display: block; position: relative; text-decoration: none;
  margin: 0; border-radius: 3px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(201,169,97,.45), 0 10px 24px -14px rgba(60,45,20,.45);
  background: var(--paper);
}
.map__art { aspect-ratio: 4 / 5; width: 100%; }
.map__art svg, .map__art img { width: 100%; height: 100%; }
.map__art--empty { display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; font: italic 400 20px var(--f-text); color: var(--sage-deep); background: radial-gradient(circle, rgba(168,181,160,.25), transparent 70%); }
.map__hint { margin-top: 10px; font: italic 400 17px/1.4 var(--f-text); color: var(--sage-deep); }
#venue-marker .venue-ring, #venue-marker .venue-glow { transform-box: fill-box; transform-origin: center; }
#venue-marker .venue-ring { animation: ring 3.2s cubic-bezier(.2,.6,.3,1) infinite; }
#venue-marker .venue-glow { animation: glow 3.2s ease-in-out infinite; }
@keyframes ring { 0% { transform: scale(.62); opacity: 0; } 18% { opacity: .85; } 100% { transform: scale(1.22); opacity: 0; } }
@keyframes glow { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }

.btns { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; min-width: 140px; padding: 12px 22px;
  font: 400 12px/1.2 var(--f-caps); letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-text); text-decoration: none;
  background: rgba(251,248,241,.6);
  border: 1px solid rgba(138,106,43,.55); border-radius: 999px;
  cursor: pointer; transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn:hover { background: var(--paper); border-color: var(--gold-deep); }
.btn--solid { background: var(--dusk); color: var(--gold-light); border-color: var(--dusk); min-width: 220px; }
/* the two primary actions (Google Maps, Add to calendar): identical size, gold line-art icon before the label */
.btn--icon { gap: 11px; min-width: 248px; min-height: 52px; padding: 13px 28px 13px 24px; white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(201,169,97,.38), 0 6px 16px -10px rgba(28,38,32,.55); }
.btn__icon { flex: none; width: 19px; height: 19px; margin-top: -1px; fill: none; stroke: var(--gold); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.btn__icon .btn__icon-dot { fill: var(--gold); stroke: none; }
.btn--solid:hover { background: #2A382F; border-color: #2A382F; }

/* Calendar */
.cal__opts { margin-top: 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; animation: drop .5s var(--ease-out); }
.cal__opts .btn { min-width: 250px; }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.small { font: italic 400 16px/1.4 var(--f-text); color: var(--sage-deep); margin-top: 4px; }

/* Good to know */
.know .label { margin-bottom: 24px; }
.know__list { list-style: none; margin: 0 auto; padding: 0; max-width: 24em; text-align: left; display: grid; gap: 20px; }
.know__list li { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; }
.know__art { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; color: var(--gold-deep); }
.know__art > svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-deep); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.know__art.is-svg > svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.4; overflow: visible; }
.know__art[data-gtk="wrap"].is-svg > svg { transform: scale(1.2) translateY(-2%); } /* flat & wide: give it the same visual weight */
.know__art[data-gtk="dress"].is-svg > svg { transform: scale(1.04); }
.know__list p { font-size: 19px; line-height: 1.5; }
.know__list li:nth-child(1) { --n: 0; } .know__list li:nth-child(2) { --n: 1; }
.know__list li:nth-child(3) { --n: 2; } .know__list li:nth-child(4) { --n: 3; }
/* one-time draw-on (classes set by JS; never applied under reduced motion) */
.gtk-draw .know__art svg * { transition: stroke-dashoffset 1.6s var(--ease-io) calc(var(--n) * .18s), opacity .9s ease calc(var(--n) * .18s + .9s), fill-opacity .9s ease calc(var(--n) * .18s + .9s); }
.gtk-draw .know__art [pathLength] { stroke-dasharray: 1 1; }
.gtk-draw:not(.gtk-go) .know__art [pathLength] { stroke-dashoffset: 1; fill-opacity: 0; }
.gtk-draw:not(.gtk-go) .know__art svg :not([pathLength]):not(g):not(mask):not(stop):not(defs) { opacity: 0; }

/* Closing */
.closing { margin-top: 88px; }
.know { margin-top: 72px !important; }
.closing__line { font: italic 400 26px/1.4 var(--f-text); }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s ease-out, transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }

/* Mute button */
.mute {
  position: fixed; z-index: 60;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: 48px; height: 48px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(201,169,97,.7);
  background: rgba(246,240,228,.78);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  color: var(--gold-deep); cursor: pointer;
  opacity: 0; transform: translateY(10px); transition: opacity .6s ease, transform .6s var(--ease-out);
}
.mute.is-shown { opacity: 1; transform: none; }
.mute svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.mute .mute__off { display: none; }
.mute[aria-pressed="true"] .mute__on { display: none; }
.mute[aria-pressed="true"] .mute__off { display: inline; }



/* ---------- Sky over Carthage ---------- */
.sky { margin: 40px 0 0; }
.sky__art { aspect-ratio: 800 / 360; width: 100%; opacity: 0; transition: opacity .8s ease; }
.sky.is-loaded .sky__art { opacity: 1; }
.sky__art svg { width: 100%; height: 100%; }
.sky__cap { margin-top: 12px; font: italic 400 17px/1.4 var(--f-text); color: var(--sage-deep); }
.no-fade #sky-night, .no-fade #stars, .no-fade .sky-label, .no-fade .sky-label tspan, .no-fade .sun-glitter, .no-fade .dusk-wash { transition: none !important; }

/* ---------- The Secret Garden at dusk ---------- */
.venue__art { position: relative; aspect-ratio: 800 / 500; width: 100%; color: var(--gold-deep); }
.venue__art svg { width: 100%; height: 100%; }
.venue__art .venue__layer { position: absolute; left: 0; top: 0; }
.venue__art #vg-caption { display: none; }
.venue__lights { position: absolute; left: 0; width: 100%; top: 5.6%; height: 52%; pointer-events: none; will-change: transform; overflow: hidden; }
.venue__cap {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 12px; font: 400 12px/1.4 var(--f-caps); letter-spacing: .1em; color: var(--gold-text);
  white-space: nowrap;
}
.venue__orn { flex: 0 0 5px; height: 9px; background-size: 0 0 !important;
  background: linear-gradient(var(--gold), var(--gold)) left center/calc(100% - 9px) 1px no-repeat; position: relative; }
.venue__orn::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; background: var(--gold); transform: rotate(45deg); right: 0; }
.venue__orn:last-child { background-position: right center; }
.venue__orn:last-child::after { right: auto; left: 0; }
.venue .light .glow {
  animation: twinkle 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s);
  animation-play-state: paused;
}
.venue .light:nth-child(3n) .glow { animation-duration: 2.8s; }
.venue .light:nth-child(3n+1) .glow { animation-duration: 4s; }
.venue .glow.lamp { animation: lamp 6.5s ease-in-out infinite; animation-play-state: paused; }
.venue .sw--lamp:nth-child(2) .glow.lamp { animation-delay: -2.2s; } .venue .sw--lamp:nth-child(3) .glow.lamp { animation-delay: -4.1s; }
.venue .fairy { animation: fairy 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.41s); animation-play-state: paused; }
.venue.is-live .glow, .venue.is-live .fairy { animation-play-state: running; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
@keyframes lamp { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes fairy { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* one-time pen draw of the outlines (JS adds .vg-draw before first paint, then .vg-go in view) */
.vg-draw [pathLength] { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.vg-go [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease-io); }

/* ---------- Jasmine vine ---------- */
.vine-layer {
  --vine-w: clamp(22px, 6.2vw, 26px); --vine-r: 11px; --vine-inset: 18px; --bloom: 40px;
  position: absolute; top: 0; bottom: 0; right: var(--vine-r); width: var(--vine-w);
  pointer-events: none; color: var(--gold); z-index: 2;
}
.vine-layer .vine__tile { position: absolute; left: 0; width: 100%; overflow: visible; }
.vine .stem { stroke-width: 2.4; }
.vine .vine__leaves { stroke-width: 1.6; }
.vine .leaf.tendril { stroke-width: 1.2; }
.vine .stem, .vine .stem-taper { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--p, 0)); }
.vine.is-empty .stem { opacity: 0; }
.vine-layer.is-intro .stem { transition: stroke-dashoffset 1.6s var(--ease-out); }
.vine .leaf { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; fill-opacity: 0;
  transition: stroke-dashoffset .9s ease-out, fill-opacity .8s .5s, opacity .2s; }
.vine .leaf.is-drawn { stroke-dashoffset: 0; opacity: 1; fill-opacity: .1; }
.vine__bloom { position: absolute; left: 0; top: 0; width: var(--bloom); height: var(--bloom); }
.vine__bloom svg { width: 100%; height: 100%; overflow: visible; transform: rotate(-38deg); }
.bloom .petal { transform-box: view-box; transform-origin: 0 0; transform: scale(.15) rotate(-40deg); opacity: 0;
  transition: transform 1.1s cubic-bezier(.2,.7,.2,1) calc(var(--i) * 90ms + .35s), opacity .6s calc(var(--i) * 90ms + .35s); }
.bloom .bloom__sprig path { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; fill-opacity: 0;
  transition: stroke-dashoffset .9s ease-out, fill-opacity .8s .6s, opacity .15s; }
.bloom .bloom__sprig .bud-blush { stroke-dasharray: none; }
.bloom .bloom__veins, .bloom .bloom__eye { opacity: 0; transition: opacity .6s 1.2s; }
.is-bloomed .petal { transform: none; opacity: 1; }
.is-bloomed .bloom__sprig path { stroke-dashoffset: 0; opacity: 1; }
.is-bloomed .bloom__sprig .leaf { fill-opacity: .14; }
.is-bloomed .bloom__sprig .bud { fill-opacity: .08; }
.is-bloomed .bloom__sprig .bud-blush { fill-opacity: .7; }
.is-bloomed .bloom__sprig .bud-twist { opacity: .6; }
.is-bloomed .bloom__veins { opacity: .65; }
.is-bloomed .bloom__eye { opacity: 1; }
.vine-layer.is-static .vine .stem, .vine-layer.is-static .vine .leaf { stroke-dashoffset: 0; opacity: 1; transition: none; }
.vine-layer.is-static .vine .leaf { fill-opacity: .1; }
.vine-layer.is-static .bloom .petal, .vine-layer.is-static .bloom * { transition: none !important; }


/* =====================================================================
   The venue scene — the climax of the card: more air, more size, a warm glow
   ===================================================================== */
.venue { margin-top: 96px !important; margin-bottom: 44px; position: relative; }
.venue::before { /* lamplight pooling on the paper behind the garden */
  content: ""; position: absolute; left: -12%; right: -12%; top: 4%; bottom: 8%; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 52%, rgba(243,227,174,.42), rgba(232,207,200,.18) 55%, rgba(232,207,200,0) 75%);
}
.venue > * { position: relative; }
.venue .venue__cap { margin-top: 18px; }

/* depth layers (parallax is written by JS as a translate3d on each layer) */
.venue__layer, .venue__lights { will-change: transform; }

/* bulbs switch on one by one (JS adds .is-switch, then .is-on per bulb) */
.venue .glow-wrap { transition: opacity 1s var(--ease-out); }
.venue .light .bulb { transition: fill .8s ease, stroke .8s ease; }
.venue.is-switch .light:not(.is-on) .glow-wrap { opacity: 0; }
.venue.is-switch .light:not(.is-on) .bulb { fill: #EFE7D6; stroke: #B49A63; }
.venue .sw { transition: opacity 1.1s var(--ease-out); }
.venue.is-switch .sw:not(.is-on) { opacity: .12; }
.venue.is-switch .sw.sw--lamp:not(.is-on) { opacity: 0; }
/* the couple are part of the picture from the first frame: never drawn on, faded or delayed */
.vg-draw .couple [pathLength] { stroke-dasharray: none; stroke-dashoffset: 0; }

/* ---------- Map: roads drawn by scroll, the seal stamps in ---------- */
.map-scrub #venue-marker .stamp, .map-scrub #venue-label {
  transform-box: fill-box; transform-origin: center;
  transition: opacity .7s ease, transform 1s cubic-bezier(.2,.75,.25,1);
}
.map-scrub:not(.is-stamped) #venue-marker .stamp, .map-scrub:not(.is-stamped) #venue-label { opacity: 0; transform: scale(1.15); }
.map-scrub #approaches, .map-scrub #road-tags { transition: opacity 1.1s ease .45s; }
.map-scrub #road-tags { transition-delay: .1s; }
.map-scrub:not(.is-stamped) #approaches, .map-scrub:not(.is-stamped) #road-tags { opacity: 0; transition-delay: 0s; }

/* ---------- Jasmine petals on opening ---------- */
.petals { position: fixed; inset: 0; z-index: 55; pointer-events: none; overflow: hidden; }
.petals > i { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; opacity: 0; }
.petals > i > svg { display: block; width: 100%; height: 100%; overflow: visible; will-change: transform; }

/* ---------- Handwritten names (assets/svg/names-handwritten.svg, see _work/names/README.md) ----------
   main.js inlines the SVG into the h1 and adds .has-ink; the text spans stay as the accessible name
   (and as the visible fallback when the SVG cannot load or JS is off). */
.visually-hidden, .names.has-ink > span {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.names .names-hw { display: block; width: 2.62em; height: 2.54em; overflow: visible; }
/* the SVG carries its own foil; the h1's text-clip gradient no longer applies */
.names.has-ink { background: none; animation: none; position: relative; }

/* ---------- Reveal variants: not every section arrives the same way ---------- */
.reveal.reveal--stagger { opacity: 1; transform: none; }
.reveal--stagger > *, .reveal--stagger .cd__unit {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s ease-out, transform 1.3s var(--ease-out);
}
.reveal--stagger.is-in > *, .reveal--stagger.is-in .cd__unit { opacity: 1; transform: none; }
.reveal--stagger .cd { opacity: 1; transform: none; }
.reveal--stagger .cd__unit:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 180ms); }
.reveal--stagger .cd__unit:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 320ms); }
.reveal--stagger .cd__unit:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 460ms); }
.reveal--stagger > .cd__sec { transition-delay: calc(var(--d, 0ms) + 640ms); }
.reveal--stagger > .sky { transition-delay: calc(var(--d, 0ms) + 380ms); transition-duration: 1.4s, 1.6s; }
.reveal--slow { transform: translateY(28px); transition-duration: 1.6s, 1.8s; }
.reveal--arrive { transform: translateY(20px); transition-duration: 1.2s, 1.5s; }
.reveal--arrive .map__star { transition: transform 2.2s var(--ease-out), opacity 1.4s ease; }
.reveal--arrive:not(.is-in) .map__star { transform: rotate(-90deg) scale(.6); opacity: 0; }


@media (min-width: 600px) {
  .page { padding-top: 48px; }
  .card { padding-top: 40px; }
  .map__frame { margin: 0 -6px; }
  .vine-layer { --vine-w: 32px; --vine-r: 16px; --vine-inset: 22px; --bloom: 50px; }
  .venue__cap { font-size: 14px; letter-spacing: .14em; }
  .venue__orn { flex-basis: 40px; background-size: calc(100% - 9px) 1px !important; }
  .know__list { max-width: none; grid-template-columns: 1fr 1fr; gap: 34px 36px; }
  .know__list li { grid-template-columns: none; justify-items: center; text-align: center; gap: 12px; align-items: start; align-content: start; }
  .know__art { width: 84px; height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
  .motes { display: none; }
  .reveal { transform: none; transition: opacity .4s ease; }
  .names { animation: none; background-position: 40% 50%; }
  .hint { opacity: .85; }
  .seal__glow { opacity: .6; }
  #venue-marker .venue-ring, #venue-marker .venue-glow { animation: none !important; }
  .venue .glow, .venue .fairy, .venue .glow.lamp { animation: none !important; }
  .venue .light .glow { opacity: .7; }
  .vine .stem, .vine .stem-taper, .vine .leaf, .bloom .bloom__sprig path { stroke-dashoffset: 0 !important; opacity: 1 !important; transition: none !important; }
  .vine .leaf { fill-opacity: .1 !important; }
  .bloom .petal { transform: none !important; opacity: 1 !important; transition: none !important; }
  .bloom .bloom__veins, .bloom .bloom__eye { opacity: 1 !important; transition: none !important; }
  .sky__art { transition: none; }
  .reveal--stagger > *, .reveal--stagger .cd__unit { transform: none !important; transition: opacity .4s ease !important; }
  .reveal--arrive .map__star { transform: none !important; }
  .petals { display: none; }
}