/* =====================================================================
   NOOR: lantern-lit night and girih geometry
   Deep emerald night · warm gold · ivory · turquoise and saffron glow.
   Marcellus (display) · Figtree (text) · Reem Kufi (labels) · Aref Ruqaa (Arabic)
   Shapes: eight-point stars, chamfered octagons, star-and-cross tiles.
   Motion: transform / opacity only (plus SVG stroke drawing).
   ===================================================================== */

:root {
  --night: #03201A;
  --night-2: #062B23;
  --em: #0A3D31;
  --em-2: #0F4E3F;
  --gold: #DDB15A;
  --gold-hi: #F6DC97;
  --gold-lo: #9E7329;
  --ivory: #FBF6EA;
  --ink: #12302A;
  --ink-2: #4D6159;
  --turq: #5ED0BD;
  --turq-ink: #23806F;
  --saffron: #F4A43E;
  --txt: #EFE7D2;
  --txt-2: #A9BFB2;
  --gold-grad: linear-gradient(135deg, #FBE5A6 0%, #E2B75E 48%, #B9882F 100%);
  --f-dis: "Marcellus", "Gilda Display", Georgia, "Times New Roman", serif;
  --f-txt: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-kufi: "Reem Kufi", "Figtree", system-ui, sans-serif;
  --f-ar: "Aref Ruqaa", "Amiri", "Noto Naskh Arabic", serif;
  /* kit lightbox / toast */
  --wv-accent: #DDB15A;
  --wv-ink: #062B23;
  --wv-paper: #FBF6EA;
  --wv-font: "Figtree", system-ui, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--night); scroll-behavior: smooth; }
html.is-locked, html.is-locked body { overflow: hidden; }
body {
  margin: 0;
  font: 400 16px/1.65 var(--f-txt);
  color: var(--txt);
  background: var(--night);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
:focus-visible { outline: 2px dashed var(--gold); outline-offset: 4px; }
.intro__star:focus-visible, .hero:focus { outline: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.anchor { display: block; height: 0; }
.noscript { padding: 40px 20px; text-align: center; }
body.is-loading .main { visibility: hidden; }

/* ---------- Geometry utilities ----------
   Chamfered octagon: set --c (corner size) on the element.
   .ring: a 1px octagonal hairline inside a chamfered parent (--ri inset). */
.panel, .btn, .fab, .when, .cue, .dress, .dress__ico, .ev, .ev__chip, .venue__map, .venue__note, .gal__i, .tag, .msg__frame, .ticket__note {
  clip-path: polygon(var(--c) 0, calc(100% - var(--c)) 0, 100% var(--c), 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, var(--c) 100%, 0 calc(100% - var(--c)), 0 var(--c));
}
.btn--line::before, .fab::before {
  --k: calc(var(--c) - .59px);
  clip-path: polygon(var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k));
}
.ring, .msg__photo::before {
  clip-path: polygon(evenodd,
    var(--k) 0, calc(100% - var(--k)) 0, 100% var(--k), 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, var(--k) 100%, 0 calc(100% - var(--k)), 0 var(--k), var(--k) 0,
    calc(var(--k) + .41px) 1px, 1px calc(var(--k) + .41px), 1px calc(100% - var(--k) - .41px), calc(var(--k) + .41px) calc(100% - 1px), calc(100% - var(--k) - .41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--k) - .41px), calc(100% - 1px) calc(var(--k) + .41px), calc(100% - var(--k) - .41px) 1px, calc(var(--k) + .41px) 1px);
}
.ring {
  position: absolute;
  inset: var(--ri, 9px);
  --k: calc(var(--c) - var(--ri, 9px) * .586);
  background: var(--ring, rgba(227, 188, 102, .55));
  pointer-events: none;
}

/* Inline stars (viewBox -60..60) */
.st-l { fill: none; stroke: var(--st, #E6C273); stroke-width: var(--sw, .9); stroke-linejoin: round; }
.st-f { fill: var(--sf, rgba(3, 30, 24, .7)); }
.st-d { fill: var(--st, #E6C273); }
.mini { width: 14px; height: 14px; }
.mini path, .hd__s path { fill: var(--gold); }
.mini circle, .hd__s circle { fill: var(--night); }

/* Night sky: layered star dots (static), one layer twinkles */
.sky { position: absolute; inset: 0; background-repeat: repeat; pointer-events: none; }
.sky--a {
  background-image:
    radial-gradient(1.4px 1.4px at 23px 41px, rgba(255, 246, 218, .9) 50%, transparent 55%),
    radial-gradient(1px 1px at 131px 87px, rgba(255, 246, 218, .7) 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 77px 163px, rgba(200, 240, 228, .75) 50%, transparent 55%),
    radial-gradient(1px 1px at 181px 21px, rgba(255, 246, 218, .6) 50%, transparent 55%);
  background-size: 211px 197px, 173px 229px, 239px 181px, 157px 263px;
}
.sky--b {
  background-image:
    radial-gradient(1.8px 1.8px at 61px 113px, rgba(255, 236, 190, .95) 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 147px 37px, rgba(220, 250, 240, .85) 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 19px 211px, rgba(255, 246, 218, .8) 50%, transparent 55%);
  background-size: 283px 271px, 331px 227px, 251px 307px;
  animation: twinkle 4.6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

/* =====================================================================
   INTRO: the star that becomes a pattern
   ===================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--txt);
  cursor: pointer;
}
.intro[hidden] { display: none; }
.intro__bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 50% 48%, #0F4C3C 0%, #062A20 48%, #021410 100%);
  transition: opacity 1s ease;
}
.intro__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130vmin;
  height: 130vmin;
  margin: -65vmin 0 0 -65vmin;
  background: radial-gradient(closest-side, rgba(242, 190, 96, .26), rgba(242, 190, 96, .07) 55%, transparent);
  opacity: 0;
  transition: opacity 1.6s ease .4s;
}
.is-ready .intro__glow { opacity: 1; }

.intro__tiles { position: absolute; inset: 0; pointer-events: none; }
.intro__tiles i {
  position: absolute;
  left: var(--ox);
  top: var(--oy);
  width: var(--s);
  height: var(--s);
  background: var(--p-tile) center / 100% 100% no-repeat;
  opacity: 0;
}
.is-opening .intro__tiles i { animation: tileIn .72s cubic-bezier(.2, .75, .25, 1) calc(.5s + var(--d) * 70ms) both; }
.is-revealing .intro__tiles i { animation: tileOut .58s cubic-bezier(.55, 0, .7, .4) calc(var(--d) * 50ms) both; }
@keyframes tileIn {
  from { opacity: 0; transform: translate(calc(var(--x) * .3), calc(var(--y) * .3)) scale(.25) rotate(-90deg); }
  to { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(0deg); }
}
@keyframes tileOut {
  from { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(0deg); }
  to { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3) rotate(45deg); }
}
.intro__sweep {
  position: absolute;
  inset: -10% -60%;
  background: linear-gradient(110deg, transparent 42%, rgba(255, 228, 160, .24) 50%, transparent 58%);
  opacity: 0;
  pointer-events: none;
}
.is-opening .intro__sweep { animation: sweep 1.3s ease-in-out 1.05s both; }
@keyframes sweep {
  0% { opacity: 0; transform: translateX(-38%); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translateX(38%); }
}

.intro__txt {
  position: absolute;
  left: 0;
  right: 0;
  padding: 0 24px;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .9s ease, transform 1s ease;
}
.intro__txt--top { top: max(11vh, 56px); transition-delay: .9s; }
.intro__txt--bot { bottom: max(9vh, 56px); transition-delay: 1.3s; }
.is-ready .intro__txt { opacity: 1; transform: none; }
.is-opening .intro__txt { opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .4s ease; transition-delay: 0s; }
.intro__guest { font: 400 22px/1.3 var(--f-dis); color: var(--gold-hi); margin-bottom: 10px; }
.intro__kick, .eyebrow, .hd__t, .close__lead, .hero__kick { text-wrap: balance; }
.intro__kick, .intro__date, .intro__tap {
  font: 500 11.5px/1.7 var(--f-kufi);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--txt-2);
}
.intro__names { font: 400 clamp(34px, 10vw, 56px)/1.1 var(--f-dis); color: var(--gold-hi); letter-spacing: .01em; }
.intro__names span { color: var(--turq); font-size: .62em; }
.intro__date { margin-top: 10px; color: var(--gold); }
.intro__tap { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: var(--gold-hi); }
.intro__mini { width: 13px; height: 13px; animation: spin 8s linear infinite; }

.intro__star {
  position: relative;
  width: min(54vmin, 290px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}
.intro__halo {
  position: absolute;
  inset: -34%;
  background: radial-gradient(closest-side, rgba(255, 212, 128, .34), rgba(255, 190, 100, .08) 60%, transparent);
  opacity: 0;
}
.is-ready .intro__halo { animation: breathe 3.4s ease-in-out 1.6s infinite alternate both; }
@keyframes breathe { from { opacity: .35; transform: scale(.9); } to { opacity: 1; transform: scale(1.06); } }
.intro__spin { position: absolute; inset: 0; display: block; transition: transform .9s cubic-bezier(.65, 0, .3, 1), opacity .5s ease; }
.intro__svg { width: 100%; height: 100%; overflow: visible; --sw: .85; --st: #EAC878; }
.intro__svg .st-f { --sf: rgba(227, 188, 102, .11); opacity: 0; }
.intro__svg .st-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro__svg .st-d { opacity: 0; }
.is-ready .intro__svg .st-1 { animation: draw 1.1s cubic-bezier(.6, .1, .3, 1) .15s forwards; }
.is-ready .intro__svg .st-2 { animation: draw 1.1s cubic-bezier(.6, .1, .3, 1) .5s forwards; }
.is-ready .intro__svg .st-3 { animation: draw 1s cubic-bezier(.6, .1, .3, 1) .85s forwards; }
.is-ready .intro__svg .st-4 { animation: draw 1s cubic-bezier(.6, .1, .3, 1) 1.05s forwards; }
.is-ready .intro__svg .st-o { animation: draw 1.6s cubic-bezier(.5, 0, .3, 1) 0s forwards; }
.is-ready .intro__svg .st-5 { animation: draw 1s ease 1.2s forwards; }
.is-ready .intro__svg .st-c { animation: draw .9s ease 1.4s forwards; }
.intro__svg .st-o { stroke-opacity: .4; stroke-width: .5; transition: opacity .3s; }
.is-opening .intro__svg .st-o { opacity: 0; }
.is-ready .intro__svg .st-f, .is-ready .intro__svg .st-d { animation: fade 1s ease 1.5s forwards; }
.is-opening .intro__halo { animation: none; opacity: 0; transition: opacity .3s; }
.is-opening .intro__spin { transform: rotate(90deg) scale(var(--shrink, .3)); }
.is-revealing .intro__spin { opacity: 0; }
.is-revealing .intro__bg { opacity: 0; }
.intro.is-revealing { pointer-events: none; }
.intro.is-fading { opacity: 0; transition: opacity .5s ease; pointer-events: none; }

/* =====================================================================
   PAGE
   ===================================================================== */
.main {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(1.2px 1.2px at 37px 59px, rgba(255, 246, 218, .5) 50%, transparent 55%) 0 0 / 241px 263px,
    radial-gradient(1px 1px at 151px 141px, rgba(210, 245, 235, .45) 50%, transparent 55%) 0 0 / 293px 211px,
    linear-gradient(180deg, #03201A 0%, #052A21 28%, #04261E 55%, #052A21 80%, #03201A 100%);
}
.sec { position: relative; padding: 72px 16px; }
/* A whisper of girih behind the whole page (static, painted once) */
.main::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--p-faint) 50% 0 / 132px 132px;
  pointer-events: none;
}
.wrap { max-width: 1080px; margin: 0 auto; }

/* Headings framed by eight-point stars */
.hd { text-align: center; margin: 0 auto 32px; max-width: 680px; }
.eyebrow {
  font: 500 11.5px/1.6 var(--f-kufi);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #8BD6C7;
  margin-bottom: 10px;
}
.hd__t {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font: 400 clamp(30px, 8.3vw, 52px)/1.12 var(--f-dis);
  letter-spacing: .01em;
  color: var(--gold-hi);
}
.hd__s { flex: none; width: 17px; height: 17px; transition: transform 1.1s cubic-bezier(.3, 1.3, .5, 1) .25s; }
.hd[data-reveal] .hd__s { transform: rotate(-135deg) scale(.3); }
.hd.is-in .hd__s { transform: none; }
.hd--ink .eyebrow { color: var(--turq-ink); }
.hd--ink .hd__t { color: var(--ink); }
.hd--ink .hd__s path { fill: var(--gold-lo); }
.hd--ink .hd__s circle { fill: var(--ivory); }

/* Scroll reveal */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Panels */
.panel { position: relative; --c: 26px; }
.panel--ivory {
  background: linear-gradient(180deg, #FDF9EF 0%, #F5ECD7 100%);
  color: var(--ink);
  --ring: rgba(158, 115, 41, .5);
  --surf: #F9F2E2;
  --btn-ink: var(--ink);
}
.panel--glass {
  background: linear-gradient(180deg, rgba(18, 84, 67, .62), rgba(5, 40, 32, .7));
  --ring: rgba(227, 188, 102, .5);
  --surf: #08362B;
}

/* Buttons: chamfered, never pills */
.btn {
  --c: 10px;
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border: 0;
  background: none;
  font: 600 11.5px/1.1 var(--f-kufi);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform .2s ease;
}
.btn:active { transform: scale(.97); }
.btn .ico { width: 17px; height: 17px; flex: none; }
.btn--gold { background: var(--gold-grad); color: #1E1505; }
.btn--line { background: var(--ring, rgba(227, 188, 102, .7)); color: var(--btn-ink, var(--gold-hi)); }
.btn--line::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--surf, #062B23); }
.btn--sm { --c: 8px; min-height: 40px; padding: 0 12px; font-size: 10.5px; letter-spacing: .12em; gap: 6px; }
.btn--sm .ico { width: 15px; height: 15px; }
@media (hover: hover) {
  .btn--gold:hover { filter: brightness(1.06); }
  .btn--line:hover::before { opacity: .82; }
}

.row { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.row .ico { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--gold-lo); }
.row b { color: var(--ink); font-weight: 600; }

/* =====================================================================
   HERO: lanterns hanging from a girih frieze, names inside a star
   ===================================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 192px 16px 110px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(130% 70% at 50% 34%, #0E4838 0%, #062C23 52%, #03201A 100%);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__pat {
  position: absolute;
  inset: -14% -6%;
  background: var(--p-star) center / 88px 88px;
  opacity: .32;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 42%, transparent 18%, #000 60%, transparent 92%);
  mask-image: radial-gradient(70% 55% at 50% 42%, transparent 18%, #000 60%, transparent 92%);
  will-change: transform;
}
.hero__light {
  position: absolute;
  left: 50%;
  top: -180px;
  width: 1000px;
  height: 640px;
  margin-left: -500px;
  background: radial-gradient(closest-side, rgba(244, 178, 84, .2), transparent);
}
.hero__frieze {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 46px;
  background: var(--p-star) 50% 100% / 34px 34px, linear-gradient(180deg, #011410, #04271F);
  box-shadow: 0 1px 0 rgba(227, 188, 102, .7), 0 5px 0 -4px rgba(227, 188, 102, .45);
}
.hero__frieze::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 9px;
  margin-top: 6px;
  background: conic-gradient(from 135deg at 50% 0, rgba(227, 188, 102, .55) 90deg, transparent 0) 50% 0 / 17px 9px repeat-x;
}

.hero__lans { position: absolute; z-index: 1; top: 52px; left: 0; right: 0; height: 0; }
.lan {
  position: absolute;
  top: 0;
  left: var(--x);
  width: calc(44px * var(--s));
  margin-left: calc(-22px * var(--s));
  transform: translateY(-115%);
  transition: transform 1.4s cubic-bezier(.3, 1.45, .45, 1) var(--dl);
}
.is-open .lan { transform: none; }
.lan__sw { display: block; transform-origin: 50% 0; animation: sway var(--sd) ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-2.4deg); } to { transform: rotate(2.4deg); } }
.lan__chain { display: block; width: 1.4px; height: var(--len); margin: -60px auto 0; padding-top: 60px; box-sizing: content-box; background: linear-gradient(rgba(230, 194, 115, .35), #E6C273); }
.lan__body { position: relative; display: block; }
.lan__body svg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 64 / 150; }
.lan__glow {
  position: absolute;
  left: -110%;
  top: -14%;
  width: 320%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 200, 104, .62) 0%, rgba(255, 168, 72, .2) 42%, transparent);
  opacity: 0;
  transition: opacity 1.4s ease calc(var(--dl) + .9s);
}
.is-open .lan__glow { opacity: 1; animation: glow var(--sd) ease-in-out infinite alternate; }
@keyframes glow { from { transform: scale(.9); } to { transform: scale(1.08); } }
.lan:nth-child(1) { --x: 8%; --len: 18px; --s: .66; --dl: .25s; --sd: 4.4s; }
.lan:nth-child(2) { --x: 25%; --len: 44px; --s: .86; --dl: .05s; --sd: 5.6s; }
.lan:nth-child(3) { --x: 50%; --len: 2px; --s: .6; --dl: .4s; --sd: 4.9s; }
.lan:nth-child(4) { --x: 75%; --len: 30px; --s: .78; --dl: .15s; --sd: 5.2s; }
.lan:nth-child(5) { --x: 92%; --len: 8px; --s: .88; --dl: .3s; --sd: 6s; }
.hero.is-away .lan__sw, .hero.is-away .lan__glow, .hero.is-away .medal__rose, .hero.is-away .sky--b, .hero.is-away .cue .ico { animation-play-state: paused; }

.hero__in { position: relative; max-width: 1180px; margin: 0 auto; }
.hero__bless {
  font: 400 clamp(26px, 7.6vw, 46px)/1.7 var(--f-dis);
  color: var(--gold-hi);
  letter-spacing: .02em;
  text-shadow: 0 0 26px rgba(244, 196, 100, .35);
}
.hero__bless.is-ar { font-family: var(--f-ar); font-size: clamp(32px, 9.4vw, 54px); line-height: 1.55; letter-spacing: 0; }
.hero__bless:not(.is-ar) { font-size: clamp(17px, 4.6vw, 22px); line-height: 1.5; padding: 0 12px; }
.hero__guest { font: 400 clamp(22px, 6vw, 28px)/1.3 var(--f-dis); color: var(--gold-hi); margin-top: 10px; }
.hero__kick {
  margin-top: 8px;
  font: 500 12px/1.6 var(--f-kufi);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #8BD6C7;
}
.hero__guest + .hero__kick { margin-top: 2px; }
.hero__kick { margin-bottom: 14px; }

.core { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "m m" "a b"; gap: 0 18px; margin-top: 4px; }
.core--one { grid-template-areas: "m m" "a a"; }
.core--one .core__p { grid-column: 1 / -1; max-width: 300px; margin: 0 auto; }
.medal {
  grid-area: m;
  position: relative;
  display: grid;
  place-items: center;
  width: min(90vw, 380px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.medal__rose {
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(227, 188, 102, .7) 0 1.1deg, transparent 1.1deg 11.25deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 92.5%, #000 93.5%, #000 97%, transparent 98%);
  mask-image: radial-gradient(closest-side, transparent 92.5%, #000 93.5%, #000 97%, transparent 98%);
  animation: spin 120s linear infinite;
}
.medal__rose::after {
  content: "";
  position: absolute;
  inset: 0;
}
.medal__star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --sw: .7; --sf: rgba(2, 26, 20, .7); }
.medal__star .st-3, .medal__star .st-4 { --st: rgba(230, 194, 115, .55); }
.medal__names { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 400; }
.nm {
  font: 400 calc(var(--fit) * clamp(44px, 13.6vw, 84px))/1.02 var(--f-dis);
  letter-spacing: .01em;
  padding: 0 .05em;
  color: transparent;
  background: linear-gradient(180deg, #FFF2C8 12%, #EBC36D 58%, #BE8E38 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.amp { font: 400 clamp(22px, 6vw, 32px)/1 var(--f-dis); color: var(--turq); margin: .14em 0 .2em; }

.core__p { grid-area: a; padding-top: 20px; }
.core__p--b { grid-area: b; }
.core__role { font: 500 10.5px/1.5 var(--f-kufi); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.core__full { font: 400 17px/1.3 var(--f-dis); color: var(--txt); margin-bottom: 6px; }
.core__par { font-size: 13.5px; line-height: 1.5; color: var(--txt-2); }

.when {
  --c: 14px;
  --ri: 4px;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 30px;
  padding: 16px 28px 15px;
  background: rgba(2, 24, 19, .62);
}
.when b { font: 400 clamp(21px, 5.8vw, 27px)/1.2 var(--f-dis); color: var(--gold-hi); letter-spacing: .02em; }
.when__sub { display: flex; align-items: center; gap: 10px; font: 500 11px/1.5 var(--f-kufi); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-2); }
.when__s { width: 9px; height: 9px; }
.hero__place { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 18px; font: 500 11.5px/1.5 var(--f-kufi); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-2); padding: 0 8px; }
.hero__place .ico { width: 16px; height: 16px; color: var(--gold); flex: none; }
.cue {
  --c: 13px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 26px auto 0;
  background: rgba(227, 188, 102, .14);
  color: var(--gold-hi);
}
.cue .ico { width: 22px; height: 22px; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.hero__base {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 84px;
  background: var(--p-star) 50% 100% / 34px 34px;
  -webkit-mask-image: linear-gradient(transparent, #000);
  mask-image: linear-gradient(transparent, #000);
  opacity: .55;
}

/* Hero entrance (after the intro or straight away with ?nointro) */
.hero [data-h], .hero__bless, .medal__names {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1s ease var(--hd, .3s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--hd, .3s);
}
.is-open .hero [data-h], .is-open .hero__bless, .is-open .medal__names { opacity: 1; transform: none; }
.hero__bless { --hd: .2s; }
.hero__guest { --hd: .4s; }
.hero__kick { --hd: .5s; }
.medal__names { --hd: 1s; }
.core__p { --hd: 1.3s; }
.when { --hd: 1.45s; }
.hero__place { --hd: 1.6s; }
.cue { --hd: 1.8s; }
.medal__star .st-l { stroke-dasharray: 1; stroke-dashoffset: 1; }
.medal__star .st-f, .medal__rose { opacity: 0; transition: opacity 1.4s ease .6s; }
.is-open .medal__star .st-f, .is-open .medal__rose { opacity: 1; }
.is-open .medal__star .st-1 { animation: draw 1.5s cubic-bezier(.6, .1, .3, 1) .3s forwards; }
.is-open .medal__star .st-2 { animation: draw 1.5s cubic-bezier(.6, .1, .3, 1) .55s forwards; }
.is-open .medal__star .st-3 { animation: draw 1.3s cubic-bezier(.6, .1, .3, 1) .8s forwards; }
.is-open .medal__star .st-4 { animation: draw 1.3s cubic-bezier(.6, .1, .3, 1) 1s forwards; }

/* =====================================================================
   GIRIH BANDS (parallax) with a turning keystone star
   ===================================================================== */
.band { position: relative; height: 118px; overflow: hidden; background: #021A15; }
.band::before, .band::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(rgba(227, 188, 102, .65), rgba(227, 188, 102, .65)) 0 0 / 100% 1px no-repeat, linear-gradient(rgba(227, 188, 102, .35), rgba(227, 188, 102, .35)) 0 5px / 100% 1px no-repeat;
}
.band::before { top: 0; }
.band::after { bottom: 0; transform: scaleY(-1); }
.band__pat { position: absolute; inset: -60px 0; background: var(--p-oct) center / 66px 66px; opacity: .85; will-change: transform; }
.band--rose .band__pat { background-image: var(--p-rose); background-size: 70px 70px; }
.band--star .band__pat { background-image: var(--p-star-b); background-size: 58px 58px; }
.band__key { position: absolute; z-index: 2; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; }
.band__key::before { content: ""; position: absolute; inset: -60%; background: radial-gradient(closest-side, rgba(244, 184, 90, .3), transparent); }
.band__star { position: relative; width: 100%; height: 100%; overflow: visible; --sf: #03201A; --sw: 1.1; }

/* =====================================================================
   INVITATION MESSAGE
   ===================================================================== */
.sec--msg { padding-top: 56px; }
.msg { max-width: 780px; margin: 0 auto; padding: 46px 22px 42px; text-align: center; }
.msg .hd { margin-bottom: 22px; }
.msg__photo { position: relative; max-width: 340px; margin: 0 auto 34px; padding: 9px; }
.msg__photo::before { content: ""; position: absolute; inset: 0; --k: 36px; background: rgba(158, 115, 41, .6); }
.msg__frame { --c: 32px; display: block; aspect-ratio: 4 / 5; background: var(--em) var(--p-star) center / 48px; }
.msg__frame img { width: 100%; height: 100%; object-fit: cover; }
.msg__text { font: 400 clamp(19px, 5vw, 23px)/1.62 var(--f-dis); color: var(--ink); max-width: 30em; margin: 0 auto; }
.msg__sign {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
  font: 400 19px/1.3 var(--f-dis);
  color: var(--gold-lo);
}
.msg__s { width: 11px; height: 11px; flex: none; }
.msg__s path { fill: var(--gold-lo); }
.msg__s circle { fill: var(--ivory); }

/* =====================================================================
   COUPLE: portraits clipped to eight-point stars
   ===================================================================== */
.pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; max-width: 760px; }
.pair__amp { font: 400 clamp(28px, 8vw, 44px)/1 var(--f-dis); color: var(--turq); padding-bottom: 54px; }
.pic { margin: 0; text-align: center; min-width: 0; }
.pic__frame { position: relative; display: block; aspect-ratio: 1; }
.pic__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --sw: .8; }
.pic__clip {
  position: absolute;
  inset: 10%;
  clip-path: polygon(50% 0, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%, 100% 50%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%, 50% 100%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%, 0 50%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%);
  background: radial-gradient(circle, #16624F, #062B23 70%);
}
.pic__clip img { width: 100%; height: 100%; object-fit: cover; }
.pic__mono { display: grid; place-items: center; height: 100%; font: 400 clamp(42px, 12vw, 72px)/1 var(--f-dis); color: var(--gold-hi); }
.pic figcaption { margin-top: 10px; }
.pic figcaption b { display: block; font: 400 clamp(22px, 6vw, 30px)/1.2 var(--f-dis); color: var(--gold-hi); }
.pic figcaption small { display: block; margin-top: 4px; font: 500 10.5px/1.5 var(--f-kufi); letter-spacing: .28em; text-transform: uppercase; color: var(--txt-2); }

/* =====================================================================
   STORY: a chain of stars
   ===================================================================== */
.story { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 640px; }
.story::before { content: ""; position: absolute; left: 15px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(transparent, rgba(227, 188, 102, .6) 10%, rgba(227, 188, 102, .6) 90%, transparent); }
.story__i { position: relative; padding-left: 46px; }
.story__i + .story__i { margin-top: 16px; }
.story__node { position: absolute; left: 4px; top: 24px; width: 23px; height: 23px; }
.story__s { width: 100%; height: 100%; }
.story__card { --c: 16px; --ri: 6px; padding: 22px 22px 20px; }
.story__when { font: 500 11px/1.5 var(--f-kufi); letter-spacing: .28em; text-transform: uppercase; color: var(--turq); }
.story__card h3 { font: 400 24px/1.25 var(--f-dis); color: var(--gold-hi); margin: 6px 0 6px; }
.story__card p:last-child { color: var(--txt-2); font-size: 15px; }

/* =====================================================================
   THE DAY: ticket + countdown medallions
   ===================================================================== */
.day { display: grid; gap: 40px; max-width: 1020px; }
.ticket { --c: 30px; --ri: 8px; padding-bottom: 30px; text-align: center; }
.ticket__top { position: relative; padding: 36px 20px 30px; background: linear-gradient(180deg, #0C4334, #08372B); color: var(--txt); overflow: hidden; }
.ticket__top::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 9px;
  background: conic-gradient(from -45deg at 50% 100%, #FDF9EF 90deg, transparent 0) 50% 100% / 18px 9px repeat-x;
}
.ticket__pat { position: absolute; inset: 0; background: var(--p-star) center / 44px 44px; opacity: .45; }
.ticket__top .eyebrow { position: relative; }
.ticket__title { position: relative; margin: 2px 0 0; font: 400 clamp(42px, 12vw, 62px)/1.05 var(--f-dis); color: var(--gold-hi); }
.ticket__date { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 30px 20px 4px; }
.ticket__wd {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font: 500 10.5px/1 var(--f-kufi);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--turq-ink);
}
.ticket__dd { font: 400 92px/.86 var(--f-dis); color: var(--ink); letter-spacing: -.01em; }
.ticket__my { text-align: left; font: 500 12.5px/1.6 var(--f-kufi); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-lo); }
.ticket__rows { display: grid; gap: 10px; width: fit-content; max-width: calc(100% - 44px); margin: 22px auto 0; padding-top: 20px; border-top: 1px dashed rgba(158, 115, 41, .45); text-align: left; }
.ticket__btns { display: flex; justify-content: center; margin: 26px 18px 0; }
.ticket__btns .btn { min-width: 200px; }
.ticket__save { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 24px 0 10px; font: 500 10.5px/1.5 var(--f-kufi); letter-spacing: .3em; text-transform: uppercase; color: var(--turq-ink); }
.ticket__s { width: 9px; height: 9px; }
.ticket__s path { fill: var(--gold-lo); }
.ticket__s circle { fill: var(--ivory); }
.ticket__cal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 18px; }

.cd { position: relative; text-align: center; }
.cd__glow { position: absolute; inset: -30% -10%; background: radial-gradient(closest-side, rgba(94, 208, 189, .14), transparent); pointer-events: none; }
.cd .eyebrow { position: relative; }
.cd__row { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 470px; margin: 18px auto 0; }
.cd__m { position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.cd__rot { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.cd__star { width: 100%; height: 100%; overflow: visible; --sw: 1.3; --sf: rgba(6, 43, 35, .95); }
.cd__star .st-3, .cd__star .st-4 { --st: rgba(230, 194, 115, .5); }
.cd__n { position: relative; font: 400 clamp(22px, 6.4vw, 32px)/1 var(--f-dis); color: var(--gold-hi); font-variant-numeric: tabular-nums; }
.cd__n.is-long { font-size: clamp(19px, 5.4vw, 28px); }
.cd__u small { display: block; margin-top: 8px; font: 500 10px/1.4 var(--f-kufi); letter-spacing: .24em; text-transform: uppercase; color: var(--txt-2); }
.cd__done { position: relative; margin-top: 16px; font: 400 24px/1.4 var(--f-dis); color: var(--gold-hi); }

/* =====================================================================
   EVENTS: tall geometric tiles, swipeable on phones
   ===================================================================== */
.sec.sec--ev { padding-left: 0; padding-right: 0; }
.sec--ev .hd { padding: 0 16px; }
.ev-row {
  position: relative;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px calc((100% - min(80vw, 310px)) / 2) 16px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ev-row::-webkit-scrollbar { display: none; }
.ev {
  --c: 24px;
  --ri: 7px;
  position: relative;
  flex: 0 0 min(80vw, 310px);
  display: flex;
  flex-direction: column;
  min-height: 480px;
  scroll-snap-align: center;
  background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 100%);
  --ring: var(--rg);
  --surf: var(--t2);
  --btn-ink: var(--acc);
}
.ev--gold { --t1: #105241; --t2: #062C23; --acc: #F1CF81; --glow: rgba(244, 200, 110, .5); --rg: rgba(241, 207, 129, .6); }
.ev--saffron { --t1: #3C4A17; --t2: #1B2509; --acc: #F7B651; --glow: rgba(247, 160, 62, .55); --rg: rgba(247, 182, 81, .6); }
.ev--turq { --t1: #0C4B55; --t2: #052A30; --acc: #86E3D3; --glow: rgba(94, 208, 189, .5); --rg: rgba(134, 227, 211, .55); }
.ev__top { position: relative; height: 196px; overflow: hidden; }
.ev__pat {
  position: absolute;
  inset: 0;
  background: var(--p-oct) center / 50px 50px;
  opacity: .9;
  -webkit-mask-image: linear-gradient(#000 35%, transparent 95%);
  mask-image: linear-gradient(#000 35%, transparent 95%);
}
.ev__pat--star { background-image: var(--p-star); background-size: 44px 44px; }
.ev__pat--rose { background-image: var(--p-rose); background-size: 54px 54px; }
.ev__pat--knot { background-image: var(--p-knot); background-size: 52px 52px; }
.ev__glow { position: absolute; left: 50%; top: 62%; width: 320px; height: 320px; margin: -160px 0 0 -160px; background: radial-gradient(closest-side, var(--glow), transparent); }
.ev__chip { --c: 6px; position: absolute; z-index: 1; top: 20px; left: 50%; transform: translateX(-50%); padding: 6px 12px; background: var(--acc); color: #1A1406; font: 600 9.5px/1.2 var(--f-kufi); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.ev__badge { position: absolute; left: 50%; bottom: 6px; display: grid; place-items: center; width: 116px; height: 116px; margin-left: -58px; }
.ev__star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --st: var(--acc); --sf: rgba(2, 18, 14, .62); --sw: 1.2; }
.ev__star .st-3, .ev__star .st-4 { opacity: .55; }
.ev__day { position: relative; display: flex; flex-direction: column; align-items: center; font: 500 10.5px/1.3 var(--f-kufi); letter-spacing: .24em; text-transform: uppercase; color: var(--acc); padding-left: .24em; }
.ev__day b { font: 400 36px/1 var(--f-dis); letter-spacing: 0; color: #FFF6DC; margin-bottom: 2px; }
.ev__mini { width: 22px; height: 22px; }
.ev__mini path { fill: var(--acc); }
.ev__body { display: flex; flex: 1; flex-direction: column; align-items: center; padding: 10px 22px 26px; text-align: center; }
.ev__wd { font: 500 11px/1.5 var(--f-kufi); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.ev__name { margin: 4px 0 14px; font: 400 clamp(32px, 9vw, 38px)/1.1 var(--f-dis); color: #FFF3D6; }
.ev .row { justify-content: center; color: rgba(239, 231, 210, .86); font-size: 15px; }
.ev .row + .row { margin-top: 6px; }
.ev .row .ico { color: var(--acc); }
.ev__note { margin-top: 12px; font: 400 17px/1.4 var(--f-dis); color: var(--acc); }
.ev__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: auto; padding-top: 22px; }
.ev-dots { display: flex; justify-content: center; gap: 10px; margin-top: 2px; }
.ev-dots i { width: 9px; height: 9px; background: var(--gold); opacity: .35; transform: rotate(45deg) scale(.7); transition: transform .3s ease, opacity .3s ease; cursor: pointer; }
.ev-dots i.is-on { opacity: 1; transform: rotate(45deg); }
.ev-hint { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 14px; font: 500 10px/1.5 var(--f-kufi); letter-spacing: .26em; text-transform: uppercase; color: var(--txt-2); }
.ev-hint__s { width: 10px; height: 10px; }

/* =====================================================================
   DRESS CODE · VENUE
   ===================================================================== */
.sec--dress { padding-top: 8px; padding-bottom: 8px; }
.dress {
  --c: 18px;
  --ri: 5px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 26px;
  background: linear-gradient(100deg, rgba(227, 188, 102, .17), rgba(227, 188, 102, .05));
}
.dress__ico { --c: 15px; flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--gold-grad); color: #1E1505; }
.dress__ico .ico { width: 24px; height: 24px; }
.dress .eyebrow { margin-bottom: 2px; }
.dress__v { font: 400 22px/1.3 var(--f-dis); color: var(--gold-hi); }

.venue { display: grid; gap: 16px; max-width: 1020px; }
.venue__info { --c: 26px; padding: 36px 24px 34px; text-align: center; }
.venue__s { width: 22px; height: 22px; }
.venue__s path { fill: var(--gold-lo); }
.venue__s circle { fill: var(--ivory); }
.venue__name { margin: 10px 0 8px; font: 400 clamp(28px, 8vw, 36px)/1.15 var(--f-dis); color: var(--ink); }
.venue__addr { color: var(--ink-2); margin-bottom: 16px; }
.venue__note { --c: 10px; margin: 0 auto 22px; max-width: 420px; padding: 12px 18px; background: rgba(158, 115, 41, .1); font-size: 14.5px; color: var(--ink-2); }
.venue__map { --c: 26px; --ri: 0px; --ring: rgba(227, 188, 102, .7); position: relative; height: 300px; background: #08362B; }
.venue__map .ring { z-index: 2; }
.venue__ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--p-star) center / 50px 50px; opacity: .6; }
.venue__phs { width: 34px; height: 34px; }
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   GALLERY: octagon-and-square mosaic
   ===================================================================== */
.sec--gal { padding-left: 12px; padding-right: 12px; }
.gal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 1000px; margin: 0 auto; container-type: inline-size; }
.gal__i {
  position: relative;
  flex: none;
  width: calc(50% - 4px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  overflow: hidden;
  cursor: zoom-in;
  background: #08362B var(--p-star) center / 46px 46px;
}
.gal__i--w { width: 100%; aspect-ratio: 2 / 1; }
@supports (width: 1cqi) {
  .gal__i { --sq: calc((100cqi - 8px) / 2); --c: calc(var(--sq) * .293); width: var(--sq); height: var(--sq); aspect-ratio: auto; }
  .gal__i--w { width: calc(var(--sq) * 2 + 8px); }
}
.gal__i img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .gal__i:hover img { transform: scale(1.06); } }

/* =====================================================================
   FAMILIES · CONTACTS
   ===================================================================== */
.fam { --c: 30px; max-width: 660px; margin: 0 auto; padding: 46px 24px 44px; text-align: center; }
.fam .hd { margin-bottom: 24px; }
.fam .hd__t { font-size: clamp(27px, 7.4vw, 44px); }
.fam .hd[data-reveal] { opacity: 1; transform: none; }
.fam__list { list-style: none; margin: 0; padding: 0; }
.fam__list li { font: 400 clamp(20px, 5.4vw, 26px)/1.35 var(--f-dis); color: var(--txt); }
.fam__list .fam__sep { margin: 10px 0; line-height: 0; }
.fam__s { width: 12px; height: 12px; }

.ct { display: grid; gap: 14px; max-width: 920px; }
.ct--one { max-width: 460px; }
.ct__c { --c: 22px; --ri: 6px; display: grid; grid-template-columns: auto 1fr; gap: 0 16px; align-items: center; padding: 24px 20px 20px; }
.ct__mono { position: relative; display: grid; place-items: center; width: 60px; height: 60px; }
.ct__star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --sf: #0A3D31; --st: var(--gold); --sw: 1.4; }
.ct__mono b { position: relative; font: 400 22px/1 var(--f-dis); color: var(--gold-hi); }
.ct__who h3 { margin: 0; font: 400 23px/1.2 var(--f-dis); color: var(--ink); }
.ct__who p { margin-top: 3px; font: 500 10.5px/1.5 var(--f-kufi); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-lo); }
.ct__btns { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 18px; }
.ct__btns .btn { flex: 1; }
.ct__num { grid-column: 1 / -1; margin-top: 10px; text-align: center; font-size: 13px; letter-spacing: .05em; color: var(--ink-2); }

/* =====================================================================
   CLOSING
   ===================================================================== */
.close { position: relative; padding: 96px 16px 128px; text-align: center; overflow: hidden; isolation: isolate; background: radial-gradient(110% 60% at 50% 32%, #0E4A3A 0%, #052A21 48%, #021813 100%); }
.close__bg { position: absolute; inset: 0; z-index: -1; }
.close__pat {
  position: absolute;
  inset: -12% 0;
  background: var(--p-star) center / 76px 76px;
  opacity: .4;
  -webkit-mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 85%);
  mask-image: radial-gradient(60% 50% at 50% 40%, #000, transparent 85%);
  will-change: transform;
}
.close__glow { position: absolute; left: 50%; top: 40px; width: 800px; height: 800px; margin-left: -400px; background: radial-gradient(closest-side, rgba(246, 186, 92, .3), rgba(246, 186, 92, .06) 60%, transparent); }
.close__in { position: relative; max-width: 720px; margin: 0 auto; }
.close__medal { position: relative; display: grid; place-items: center; width: 176px; height: 176px; margin: 0 auto 28px; }
.close__star { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; --sw: 1; --sf: rgba(2, 24, 19, .85); }
.close__star .st-c { --st: rgba(94, 208, 189, .55); }
.close__medal[data-reveal] { transform: scale(.7) rotate(-45deg); transition-duration: 1.2s; }
.close__medal.is-in { transform: none; }
.close__mono { position: relative; display: flex; align-items: center; gap: 10px; font: 400 40px/1 var(--f-dis); color: var(--gold-hi); }
.close__mono i { width: 6px; height: 6px; background: var(--turq); transform: rotate(45deg); }
.close__mini { width: 30px; height: 30px; }
.close__lead { max-width: 24em; margin: 0 auto 14px; font: 500 11.5px/1.8 var(--f-kufi); letter-spacing: .3em; text-transform: uppercase; color: var(--txt-2); }
.close__names {
  font: 400 clamp(42px, 12.4vw, 80px)/1.1 var(--f-dis);
  color: transparent;
  background: linear-gradient(180deg, #FFF2C8 15%, #EBC36D 60%, #BE8E38 100%);
  -webkit-background-clip: text;
  background-clip: text;
  padding: 0 .05em;
}
.close__names span { color: var(--turq); -webkit-text-fill-color: var(--turq); font-size: .55em; vertical-align: .18em; }
.close__date { margin-top: 14px; font: 500 11.5px/1.6 var(--f-kufi); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.tag {
  --c: 10px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 11px 18px;
  border: 0;
  background: rgba(227, 188, 102, .15);
  color: var(--gold-hi);
  font: 400 19px/1.2 var(--f-dis);
  cursor: pointer;
}
.tag .ico { width: 16px; height: 16px; opacity: .8; }
.close__share { margin-top: 44px; --surf: #052A21; }
.close__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; }

body .wv-credit { background: #021411; color: #8FA79A; border-top: 1px solid rgba(227, 188, 102, .22); }
body .wv-credit a { color: var(--gold-hi); }

/* =====================================================================
   GUIDE LANTERN (fixed) + ambient warmth, both driven by scroll
   ===================================================================== */
.beacon {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 7px;
  width: 30px;
  pointer-events: none;
  transform: translateY(-105%);
  transition: transform 1.1s cubic-bezier(.3, 1.35, .5, 1);
}
.beacon.is-on { transform: none; }
.beacon__sw { transform-origin: 50% 0; will-change: transform; }
.beacon__chain { display: block; width: 1.4px; height: 16px; margin: 0 auto; background: #E6C273; }
.beacon__lamp { position: relative; }
.beacon__lamp svg { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 64 / 150; }
.beacon__halo {
  position: absolute;
  left: -175%;
  top: -42%;
  width: 450%;
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(255, 196, 98, .6), rgba(255, 164, 70, .18) 45%, transparent);
  opacity: .2;
  transform: scale(.5);
  will-change: transform, opacity;
}
.beacon__core {
  position: absolute;
  left: 8%;
  top: 34%;
  width: 84%;
  height: 34%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #FFFCEB 0%, rgba(255, 232, 150, .85) 35%, rgba(255, 190, 90, 0) 100%);
  opacity: .15;
  will-change: transform, opacity;
}
.ambient {
  position: fixed;
  z-index: 39;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(90vmax 90vmax at 100% 0%, rgba(255, 178, 82, .13), transparent 62%);
  will-change: opacity;
}

/* Floating buttons */
.fabs {
  position: fixed;
  z-index: 50;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity .4s ease, transform .4s ease;
}
.fabs.is-on { opacity: 1; transform: none; pointer-events: auto; }
.fab { --c: 14px; position: relative; z-index: 0; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; background: rgba(227, 188, 102, .8); color: var(--gold-hi); cursor: pointer; }
.fab::before { content: ""; position: absolute; inset: 1px; z-index: -1; background: #052A21; }
.fab[hidden] { display: none; }
.fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fab .eq { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.fab .eq i { width: 3px; height: 100%; background: var(--gold-hi); transform-origin: 50% 100%; animation: eq 1s ease-in-out infinite alternate; }
.fab .eq i:nth-child(2) { animation-delay: -.4s; }
.fab .eq i:nth-child(3) { animation-delay: -.7s; }
@keyframes eq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.fab.is-playing .i-play { display: none; }
.fab.is-playing .eq { display: flex; }

/* =====================================================================
   WIDER SCREENS
   ===================================================================== */
@media (min-width: 600px) {
  .sec { padding: 92px 24px; }
  .msg { padding: 56px 48px 50px; }
  .ct { grid-template-columns: repeat(2, 1fr); }
  .ct--one { grid-template-columns: 1fr; }
  .gal__i { --sq: calc((100cqi - 16px) / 3); }
  @supports not (width: 1cqi) { .gal__i { width: calc(33.33% - 6px); } .gal__i--w { width: calc(66.66% - 4px); } }
  .venue__map { height: 360px; }
}

@media (min-width: 900px) {
  .sec { padding: 84px 32px; }
  .hero { padding: 168px 32px 120px; }
  .hero__frieze { height: 58px; background-size: 42px 42px, auto; }
  .hero__lans { top: 64px; }
  .lan:nth-child(1) { --x: 5%; --len: 60px; --s: 1.05; }
  .lan:nth-child(2) { --x: 13.5%; --len: 200px; --s: 1.45; }
  .lan:nth-child(3) { --x: 22%; --len: 26px; --s: 1.1; }
  .lan:nth-child(4) { --x: 83%; --len: 140px; --s: 1.3; }
  .lan:nth-child(5) { --x: 94%; --len: 36px; --s: 1.5; }
  .core { grid-template-columns: 1fr auto 1fr; grid-template-areas: "a m b"; align-items: center; gap: 0 44px; margin-top: 10px; }
  .core--one { grid-template-areas: "m" "a"; grid-template-columns: 1fr; }
  .core__p { padding-top: 0; }
  .core__p--a { text-align: right; }
  .core__p--b { text-align: left; }
  .core--one .core__p { text-align: center; padding-top: 22px; }
  .medal { width: 440px; }
  .nm { font-size: calc(var(--fit) * 88px); }
  .core__full { font-size: 22px; }
  .core__par { font-size: 15px; }

  .msg--photo { display: grid; grid-template-columns: 330px 1fr; gap: 52px; align-items: center; max-width: 1000px; padding: 56px; text-align: left; }
  .msg--photo .msg__photo { margin: 0; }
  .msg--photo .hd { text-align: left; margin-left: 0; }
  .msg--photo .hd__t { justify-content: flex-start; }
  .msg--photo .msg__text { margin: 0; }
  .msg--photo .msg__sign { justify-content: flex-start; }

  .day { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px; }
  .day--solo { grid-template-columns: 1fr; max-width: 620px; }
  .cd__row { gap: 14px; }

  .ev-row { flex-wrap: wrap; justify-content: center; gap: 22px; overflow: visible; padding: 4px 24px 0; }
  .ev { flex: 0 1 310px; }
  .ev-dots, .ev-hint { display: none; }

  .venue { grid-template-columns: 1fr 1.25fr; align-items: stretch; }
  .venue__info { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 36px; }
  .venue__map { height: auto; min-height: 400px; }

  .gal__i { --sq: calc((100cqi - 24px) / 4); order: var(--od); }
  @supports not (width: 1cqi) { .gal__i { width: calc(25% - 6px); } .gal__i--w { width: calc(50% - 4px); } }

  .beacon { right: 4vw; width: 46px; }
  .beacon__chain { height: 54px; }
}

@media (min-width: 1200px) {
  .medal { width: 480px; }
  .nm { font-size: calc(var(--fit) * 96px); }
}

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  [data-reveal], .hero [data-h], .hero__bless, .medal__names { opacity: 1; transform: none; }
  .lan__sw, .sky--b, .medal__rose { animation: none !important; }
}