/* ============ Theme (overridden from the admin via CSS variables) ============ */
:root {
  --bg: #F6F0E4;
  --paper: #FCF9F3;
  --gold: #A8844A;
  --gold-light: #E0C790;
  --text: #4A3B2E;
  --muted: #8E7C67;
  --accent: #6B1D2A;
  --gold-dark: color-mix(in srgb, var(--gold) 70%, #24170a);
  --line: color-mix(in srgb, var(--gold) 38%, transparent);
  --font-display: 'Bellefair', serif;
  --font-body: 'Frank Ruhl Libre', serif;
  --font-script: 'Great Vibes', cursive;
  --font-num: 'Cormorant Garamond', serif;
  --scale: 1;
  --hero-shade: .5;
  --hero-pos: 50% 35%;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .34 0 0 0 0 .22 0 0 0 .07 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 { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--noise), var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: calc(17px * var(--scale));
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.is-sealed { overflow: hidden; height: 100vh; height: 100svh; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.is-empty { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
bdi { unicode-bidi: isolate; }

.gold-text {
  background: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 22%, var(--gold-light) 38%, var(--gold) 52%, var(--gold-dark) 70%, var(--gold) 86%, var(--gold-light) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s linear infinite;
}
@keyframes shimmer { to { background-position: -220% center; } }

/* ============ Envelope intro ============ */
.envelope {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  cursor: pointer; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition: opacity 1.3s var(--ease), visibility 0s linear 1.3s;
}
.envelope.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.envelope.is-instant { transition: none; }
.env-stage { position: absolute; inset: 0; perspective: 1800px; }
.env-poster, .env-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Same crop as the hero photo, so a video that ends on that photo hands over seamlessly */
  object-position: var(--hero-pos);
}
.env-poster { animation: envBreath 7s ease-in-out infinite alternate; transform-origin: 50% 48%; }
@keyframes envBreath { from { transform: scale(1); } to { transform: scale(1.025); } }
.env-video { opacity: 0; }
.envelope.is-playing .env-video { opacity: 1; }
.envelope.is-opening .env-poster { animation: none; }

/* Fallback door animation (used when there is no opening video) */
.env-door {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; backface-visibility: hidden;
  transition: transform 1.7s var(--ease), opacity .5s ease 1.2s;
}
.env-door--a { clip-path: inset(0 50% 0 0); transform-origin: left center; }
.env-door--b { clip-path: inset(0 0 0 50%); transform-origin: right center; }
.envelope.is-css-open .env-poster { opacity: 0; }
.envelope.is-css-open .env-door { opacity: 1; transition: transform 1.7s var(--ease), opacity 0s; }
.envelope.is-css-open .env-door--a { transform: rotateY(-105deg); }
.envelope.is-css-open .env-door--b { transform: rotateY(105deg); }

.env-seal-glow {
  position: absolute; left: 50%; top: 48%;
  width: 34vmin; height: 34vmin; margin: -17vmin 0 0 -17vmin;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gold-light) 70%, transparent) 0%, transparent 65%);
  mix-blend-mode: soft-light;
  opacity: 0;
  animation: sealPulse 2.8s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes sealPulse { 0%, 100% { opacity: 0; transform: scale(.85); } 50% { opacity: .9; transform: scale(1.05); } }
.envelope.is-opening .env-seal-glow { animation: none; opacity: 0; }

.env-flash {
  position: absolute; inset: -20%;
  background: radial-gradient(circle at 50% 48%, #fffaf0 0%, color-mix(in srgb, var(--gold-light) 55%, #fff) 30%, transparent 62%);
  opacity: 0; transform: scale(.2);
  pointer-events: none;
}
.envelope.is-css-open .env-flash { animation: flash 1.8s var(--ease) .25s forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale(.2); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale(2.2); } }

.env-hint {
  position: absolute; left: 0; right: 0;
  bottom: calc(8vh + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  pointer-events: none;
  animation: hintIn 1.2s var(--ease) .5s both;
  transition: opacity .5s ease;
}
.envelope.is-opening .env-hint { opacity: 0; }
@keyframes hintIn { from { opacity: 0; transform: translateY(12px); } }
.env-hint-ring {
  position: relative; width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent);
  background: color-mix(in srgb, var(--paper) 55%, transparent);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.env-hint-ring::before {
  content: ""; position: absolute; inset: 16px; border-radius: 50%;
  background: var(--gold);
}
.env-hint-ring::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--gold);
  animation: ping 2.4s var(--ease) infinite;
}
@keyframes ping { from { transform: scale(1); opacity: .9; } to { transform: scale(2.1); opacity: 0; } }
.env-hint-text {
  font-family: var(--font-display);
  font-size: calc(1.05rem * var(--scale));
  letter-spacing: .06em;
  color: var(--text);
  padding: 8px 20px; border-radius: 999px;
  background: color-mix(in srgb, var(--paper) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px -14px rgba(60, 40, 15, .5);
}

/* ============ White butterflies (two wing halves of one sprite, flapping around the body) ============ */
.bfly-layer { position: fixed; inset: 0; z-index: 62; pointer-events: none; overflow: hidden; }
.bfly { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity; }
.bfly-body {
  position: absolute; inset: 0;
  perspective: 260px; transform-style: preserve-3d;
  filter: drop-shadow(0 8px 10px rgba(60, 40, 15, .22));
}
.bfly .w {
  position: absolute; top: 0; width: 50%; height: 100%;
  background-size: 200% 100%; background-repeat: no-repeat;
  animation: flapL var(--flap, .18s) ease-in-out infinite alternate;
}
.bfly .w.l { left: 0; background-position: left center; transform-origin: right center; }
.bfly .w.r { right: 0; background-position: right center; transform-origin: left center; animation-name: flapR; }
@keyframes flapL { from { transform: rotateY(8deg); } to { transform: rotateY(74deg); } }
@keyframes flapR { from { transform: rotateY(-8deg); } to { transform: rotateY(-74deg); } }

/* ============ Floating bits ============ */
#sparkles {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 61; pointer-events: none; /* above the envelope, so the glitter shows over the opening video */
}
body.no-sparkles #sparkles { display: none; }

.music-btn {
  position: fixed; z-index: 50;
  left: calc(16px + env(safe-area-inset-left));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--gold) 65%, transparent);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--gold-dark);
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 10px 28px -14px rgba(60, 40, 15, .55);
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease) .6s, transform .8s var(--ease) .6s;
}
body.is-open .music-btn { opacity: 1; transform: none; }
.music-icon { width: 22px; height: 22px; }
.music-bars { display: none; gap: 3px; align-items: flex-end; height: 18px; }
.music-bars i { display: block; width: 3px; border-radius: 2px; background: currentColor; animation: bar 1s ease-in-out infinite; }
.music-bars i:nth-child(2) { animation-delay: -.3s; }
.music-bars i:nth-child(3) { animation-delay: -.6s; }
.music-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes bar { 0%, 100% { height: 5px; } 50% { height: 18px; } }
.music-btn.is-playing .music-bars { display: flex; }
.music-btn.is-playing .music-icon { display: none; }

.deco {
  position: fixed; z-index: 0;
  width: min(26vw, 360px); height: min(26vw, 360px);
  color: var(--gold); opacity: .13; pointer-events: none;
}
.deco--a { top: -14px; left: -14px; transform: rotate(180deg) scaleX(-1); }
.deco--b { bottom: -14px; right: -14px; transform: scaleX(-1); }

/* ============ Hero ============ */
#page { position: relative; }
.hero {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  overflow: hidden; isolation: isolate;
  color: #FFF9EF;
  text-align: center;
}
.hero-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero-img {
  width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos);
  transform: scale(1);
  transition: transform 18s linear;
}
body.is-open .hero-img { transform: scale(1.08); }
.hero-backdrop { display: none; }
/* A portrait photo on a wide screen: show it whole, over a blurred copy of itself */
.hero--framed .hero-backdrop {
  display: block; position: absolute; inset: -60px;
  background-position: center; background-size: cover;
  filter: blur(34px) brightness(.72) saturate(1.1);
}
.hero--framed .hero-img { position: relative; object-fit: contain; }
body.no-kenburns .hero-img { transform: none; transition: none; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top,
      rgba(24, 16, 8, calc(var(--hero-shade) + .15)) 0%,
      rgba(24, 16, 8, calc(var(--hero-shade) * .55)) 38%,
      rgba(24, 16, 8, 0) 68%),
    linear-gradient(to bottom, rgba(24, 16, 8, calc(var(--hero-shade) * .45)) 0%, rgba(24, 16, 8, 0) 22%);
}
.hero-content {
  width: 100%; max-width: 980px;
  padding: 0 22px calc(15vh + env(safe-area-inset-bottom));
}
.hero-content > :first-child { margin-top: 0; }
.hero-content > :last-child { margin-bottom: 0; }
.hero-script {
  font-family: var(--font-script);
  font-size: calc(clamp(1.7rem, 7vw, 2.8rem) * var(--scale));
  color: var(--gold-light);
  margin: 0 0 .15em; line-height: 1.2;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.hero-kicker {
  font-family: var(--font-display);
  font-size: calc(1rem * var(--scale));
  letter-spacing: .32em;
  margin: 0 0 .9em; opacity: .92;
}
.hero-names {
  margin: 0;
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(3.2rem, 16vw, 7.8rem) * var(--scale));
  line-height: 1.02;
  display: flex; flex-direction: column; align-items: center; gap: .04em;
  text-shadow: 0 4px 36px rgba(0, 0, 0, .38);
}
.hero-and {
  font-family: var(--font-script);
  font-size: .56em; line-height: 1;
  color: var(--gold-light);
  margin: -.05em 0;
}
.hero-date {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: .9em 0;
  font-family: var(--font-num); font-weight: 500;
  font-size: calc(clamp(1.15rem, 4.6vw, 1.7rem) * var(--scale));
  letter-spacing: .22em;
  direction: ltr;
}
.hero-date .line { width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); }
.hero-scroll {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: inherit; text-decoration: none;
  font-size: calc(.8rem * var(--scale)); letter-spacing: .18em; opacity: .85;
}
.hero-scroll i {
  width: 1px; height: 34px;
  background: linear-gradient(to bottom, currentColor, transparent);
  animation: drip 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.hero-branch { display: none; }

/* Hero without a photo: paper look with gold names */
.hero.no-img { color: var(--text); }
.hero.no-img .hero-media, .hero.no-img .hero-shade { display: none; }
.hero.no-img { justify-content: center; }
.hero.no-img .hero-content { padding-bottom: 6vh; }
.hero.no-img .hero-names, .hero.no-img .hero-script { text-shadow: none; }
.hero.no-img .hero-names .hero-name {
  background: linear-gradient(100deg, var(--gold-dark), var(--gold) 30%, var(--gold-light) 48%, var(--gold) 66%, var(--gold-dark));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s linear infinite;
}
.hero.no-img .hero-and, .hero.no-img .hero-script { color: var(--gold); }
.hero.no-img .hero-date .line { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.hero.no-img .hero-branch {
  display: block; position: absolute; width: min(46vw, 300px); height: min(46vw, 300px);
  color: var(--gold); opacity: .5; pointer-events: none;
}
.hero.no-img .hero-branch--a { top: 4vh; left: -6vw; transform: rotate(180deg) scaleX(-1); }
.hero.no-img .hero-branch--b { bottom: 4vh; right: -6vw; transform: scaleX(-1); }

/* Staggered entrance after the envelope opens */
.hero-content > *, .hero-scroll { opacity: 0; }
body.is-open .hero-content > * { animation: rise 1.5s var(--ease) forwards; } /* delays are set per block in invite.js */
body.is-open .hero-scroll { animation: fadeIn 1.2s ease 1.8s forwards; }
body.is-instant .hero-content > *, body.is-instant .hero-scroll { animation: none; opacity: 1; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fadeIn { to { opacity: .85; } }

/* ============ Sections ============ */
.sections { position: relative; z-index: 1; display: flex; flex-direction: column; }
.sec {
  width: 100%; max-width: 760px; margin: 0 auto;
  padding: clamp(60px, 12vw, 116px) 24px;
  text-align: center;
}
.sec + .sec { padding-top: clamp(20px, 5vw, 50px); }
.sec-title {
  margin: 0 0 1.2em;
  font-family: var(--font-display); font-weight: 400;
  font-size: calc(clamp(1.8rem, 7vw, 2.7rem) * var(--scale));
  line-height: 1.25;
  color: var(--gold-dark);
}
.divider { display: block; width: 230px; height: 38px; margin: 0 auto 30px; color: var(--gold); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

body.is-preview .reveal { opacity: 1; transform: none; transition: none; }

/* ============ Text blocks (each language arranges its own in the admin) ============ */
.sec > :last-child { margin-bottom: 0; }
.b-lead {
  margin: 0 0 .9em;
  font-family: var(--font-display);
  font-size: calc(clamp(1.4rem, 5.6vw, 2.1rem) * var(--scale));
  line-height: 1.6;
}
.b-paragraph { margin: 0 0 1em; font-size: calc(clamp(1.18rem, 4.7vw, 1.5rem) * var(--scale)); line-height: 1.95; }
.b-small {
  margin: 0 0 1em;
  font-family: var(--font-display);
  font-size: calc(1.15rem * var(--scale));
  letter-spacing: .1em; color: var(--gold-dark);
}
.b-note { margin: 0 0 1em; font-size: calc(.9rem * var(--scale)); letter-spacing: .14em; color: var(--muted); }
.b-script {
  margin: 0 0 .5em;
  font-family: var(--font-script);
  font-size: calc(clamp(1.9rem, 7.5vw, 2.8rem) * var(--scale));
  line-height: 1.3; color: var(--gold);
}
.b-highlight {
  margin: .2em 0 .8em;
  font-family: var(--font-display);
  font-size: calc(clamp(2.4rem, 11vw, 4.2rem) * var(--scale));
  line-height: 1.25;
}
.b-names {
  margin: .2em 0 .8em;
  font-family: var(--font-display);
  font-size: calc(clamp(2.6rem, 12vw, 4.4rem) * var(--scale));
  line-height: 1.15;
  display: flex; flex-direction: column; align-items: center;
}
.b-names .hero-name {
  background: linear-gradient(100deg, var(--gold-dark), var(--gold) 30%, var(--gold-light) 48%, var(--gold) 66%, var(--gold-dark));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 8s linear infinite;
}
.b-names .hero-and { color: var(--gold); margin: 0; }
.b-date {
  margin: 0 0 1em;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-num); font-weight: 500;
  letter-spacing: .3em; color: var(--muted);
  direction: ltr;
}
.b-date .line { width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.sec .parents, .sec .details-card, .sec .cd-block { margin-bottom: 1.4em; }
.sec .gallery { margin-bottom: 1.4em; }

/* Extra blocks placed on the hero photo */
.hero-content .b-lead, .hero-content .b-paragraph, .hero-content .b-highlight, .hero-content .b-names { text-shadow: 0 2px 18px rgba(0, 0, 0, .4); }
.hero-content .b-small, .hero-content .b-note { color: rgba(255, 249, 239, .9); }
.hero-content .sec-title { color: var(--gold-light); }
.hero.no-img .hero-content .b-small, .hero.no-img .hero-content .b-note { color: var(--muted); }

.parents { display: flex; justify-content: center; align-items: stretch; gap: 26px; flex-wrap: wrap; }
.parent { display: flex; flex-direction: column; gap: 4px; min-width: 128px; }
.parent-label { font-size: calc(.82rem * var(--scale)); letter-spacing: .2em; color: var(--muted); }
.parent-names { font-family: var(--font-display); font-size: calc(1.45rem * var(--scale)); }
.parents-sep { width: 1px; background: linear-gradient(transparent, var(--gold), transparent); }

/* Countdown: days on the left, gold rings that empty as the day gets closer */
.countdown { display: flex; justify-content: center; gap: clamp(10px, 3.4vw, 28px); direction: ltr; }
.cd-item {
  position: relative;
  width: clamp(66px, 20.5vw, 124px); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%;
  box-shadow: 0 16px 34px -22px rgba(80, 55, 20, .6);
}
.cd-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cd-track {
  fill: color-mix(in srgb, var(--paper) 88%, transparent);
  stroke: color-mix(in srgb, var(--gold) 22%, transparent); stroke-width: 1.2;
}
.cd-prog {
  fill: none; stroke: url(#goldGrad); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 100 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset .9s var(--ease);
  filter: drop-shadow(0 0 2.5px color-mix(in srgb, var(--gold-light) 80%, transparent));
}
.cd-num {
  position: relative;
  font-family: var(--font-num); font-weight: 500;
  font-size: calc(clamp(1.65rem, 7.2vw, 2.9rem) * var(--scale));
  line-height: 1; color: var(--gold-dark);
  font-variant-numeric: tabular-nums;
}
.cd-label { position: relative; margin-top: .3em; font-size: calc(clamp(.66rem, 2.6vw, .86rem) * var(--scale)); color: var(--muted); letter-spacing: .04em; }
.cd-done { font-family: var(--font-display); font-size: calc(2rem * var(--scale)); margin: 0; }

/* Details */
.details-card {
  position: relative;
  padding: 10px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 24px 60px -36px rgba(80, 55, 20, .55);
  text-align: start;
}
.details-card::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent);
  border-radius: 16px; pointer-events: none;
}
.d-row { display: flex; align-items: center; gap: 16px; padding: 18px 6px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); }
.d-row:last-child { border-bottom: 0; }
.d-row > svg { width: 28px; height: 28px; flex: none; color: var(--gold); }
.d-row strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: calc(1.3rem * var(--scale)); line-height: 1.35; }
.d-row span, .d-row bdi { display: block; color: var(--muted); font-size: calc(1rem * var(--scale)); }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 24px;
  border-radius: 999px; border: 1px solid var(--gold);
  background: color-mix(in srgb, var(--paper) 60%, transparent);
  color: var(--gold-dark);
  font: inherit; font-size: calc(1rem * var(--scale));
  text-decoration: none; cursor: pointer;
  transition: background .3s, transform .3s, box-shadow .3s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:hover { background: color-mix(in srgb, var(--gold) 12%, var(--paper)); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn-gold {
  border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-dark) 100%);
  box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--gold) 90%, transparent);
}
.btn-gold:hover { background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 40%, var(--gold-dark) 100%); }
.cal-wrap { position: relative; display: inline-flex; }
.cal-menu {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  z-index: 5; min-width: 210px;
  display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 20px 40px -20px rgba(60, 40, 15, .5);
  overflow: hidden;
}
.cal-menu a { padding: 14px 18px; color: var(--text); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 14%, transparent); }
.cal-menu a:last-child { border-bottom: 0; }
.cal-menu a:hover { background: color-mix(in srgb, var(--gold) 10%, var(--paper)); }

/* Gallery */
.sec-wide { max-width: 1180px; }
.gallery {
  display: grid; grid-auto-flow: column; grid-auto-columns: 76%;
  gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  margin: 0 -24px; padding: 6px 24px 22px;
}
.gallery::-webkit-scrollbar { display: none; }
.g-item {
  scroll-snap-align: center;
  aspect-ratio: 3 / 4;
  padding: 6px; border: 1px solid var(--line);
  border-radius: 999px 999px 20px 20px;
  background: var(--paper);
  box-shadow: 0 18px 40px -26px rgba(60, 40, 15, .6);
  cursor: zoom-in; overflow: hidden;
}
.g-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 15px 15px; transition: transform .8s var(--ease); }
.g-item:hover img { transform: scale(1.04); }

.foot { position: relative; z-index: 1; padding: 10px 0 90px; text-align: center; }
.monogram { font-family: var(--font-script); font-size: 2.2rem; color: var(--gold); }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: rgba(20, 14, 8, .92);
  animation: fadeIn2 .35s ease;
}
@keyframes fadeIn2 { from { opacity: 0; } }
.lb-img { max-width: 92vw; max-height: 86vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.lb-btn {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08);
  color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.lb-btn svg { width: 22px; height: 22px; }
.lb-close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lb-prev { right: 12px; top: 50%; margin-top: -24px; }
.lb-next { left: 12px; top: 50%; margin-top: -24px; transform: scaleX(-1); }

/* ============ Arabic: never letter-space (it breaks the joined script) ============ */
html[lang="ar"] .hero-kicker, html[lang="ar"] .b-small, html[lang="ar"] .b-note, html[lang="ar"] .cd-label,
html[lang="ar"] .parent-label, html[lang="ar"] .env-hint-text,
html[lang="ar"] .hero-scroll, html[lang="ar"] .sec-title { letter-spacing: 0; }
html[lang="ar"] .hero-names, html[lang="ar"] .b-names { line-height: 1.25; }
html[lang="ar"] .b-paragraph { line-height: 2.05; }

/* ============ Larger screens ============ */
@media (min-width: 900px) {
  .hero-names { flex-direction: row; align-items: baseline; justify-content: center; gap: .28em; }
  .hero-and { margin: 0; }
  .hero-content { padding-bottom: 13vh; }
  .gallery { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); overflow: visible; margin: 0; padding: 0; gap: 22px; }
  .sec { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 899px) { .deco { display: none; } }
@media (max-width: 520px) {
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn, .cal-wrap { width: 100%; }
  .cal-menu { left: 0; right: 0; transform: none; min-width: 0; }
  .parents { gap: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  #sparkles { display: none; }
}