/* Base */
:root {
  --paper: #f5f0e8;
  --ink: #382b23;
  --cocoa: #614331;
  --gold: #ac8659;
  --line: #d9cdbd;
  --muted: #76695c;
  --white: #fffcf6;
  /* height of the sticky header; each page's hero reaches up behind it */
  --header-h: 88px;
}
* {
  box-sizing: border-box;
}
/* scrollbar-gutter keeps the scrollbar's space while scrolling is switched off (sealed envelope, open gallery),
   so the page doesn't shift sideways when it comes back */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Montserrat, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
}
body.modal-open {
  overflow: hidden;
}
a {
  color: inherit;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
a,
button {
  touch-action: manipulation;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}
[hidden] {
  display: none !important;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3,
.monogram,
.footer-names {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
}
h2 {
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}
h2 em,
h3 em {
  color: var(--cocoa);
}
p + p {
  margin-top: 16px;
}
.eyebrow,
.detail-number {
  font-weight: 600;
  letter-spacing: 0.2em;
  line-height: 1.9;
}
.eyebrow {
  font-size: 11px;
  margin-bottom: 20px;
}
.muted {
  color: var(--muted);
}
.icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  display: inline-block;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  text-underline-offset: 6px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 17px 26px;
  background: var(--cocoa);
  color: var(--white);
  border: 1px solid var(--cocoa);
  border-radius: 4px;
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-weight: 500;
  transition:
    background 0.25s,
    transform 0.25s,
    box-shadow 0.25s;
}
.btn:hover {
  background: #422c20;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px #382b231a;
}
.skip-link {
  position: fixed;
  left: 16px;
  top: -100px;
  z-index: 100;
  background: var(--white);
  padding: 12px;
}
.skip-link:focus {
  top: 12px;
}

/* Header */
.site-header {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 6%;
  border-bottom: 1px solid var(--line);
  background: #f5f0e8f2;
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(16px);
}
.monogram {
  font-size: 32px;
  text-decoration: none;
  letter-spacing: -3px;
}
.monogram span {
  font-size: 20px;
  font-style: italic;
  color: var(--gold);
  margin: 0 5px;
}
/* Header switch between the Umembeso and White Wedding invitations */
.event-tabs {
  display: flex;
  width: 100%;
  max-width: 380px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
}
.event-tabs a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s;
}
.event-tabs a span {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted);
}
.event-tabs a[aria-current="page"] {
  background: var(--cocoa);
  color: var(--white);
}
.event-tabs a[aria-current="page"] span {
  color: rgba(255, 255, 255, 0.75);
}
.event-tabs a:not([aria-current]):hover {
  color: var(--gold);
}

/* Envelope opening (both pages). The scene (.envelope-scene) is .is-sealed in the HTML on every load; script.js adds
   .is-open when the envelope is tapped: the wax seal pops, the flap folds back to show its lining, the letter rises,
   then the envelope falls away and the content (.envelope-reveal) appears. script.js removes both classes once every
   animation in the scene has finished. The pocket and flap are inline SVG shapes, not CSS clip-path cut-outs: phones
   drop a clip-path while the flap turns, which hid the letter behind a solid pocket. Each page sets the envelope
   colours through the --env-* variables, which the SVG gradients read.
   Until the envelope has opened the page can't be scrolled, so guests see it before anything else, and the header
   and WhatsApp button are hidden so the envelope has the screen to itself (each hero reaches up behind the header's
   space, so nothing moves). They come back as the invitation is revealed. */
html:has(.envelope-scene.is-sealed) {
  overflow: hidden;
}
.site-header,
.floating-whatsapp {
  transition:
    transform 0.7s cubic-bezier(0.2, 0.75, 0.25, 1),
    opacity 0.5s ease,
    visibility 0.5s;
}
html:has(.envelope-scene.is-sealed) .site-header {
  transform: translateY(-100%);
}
html:has(.envelope-scene.is-sealed) .floating-whatsapp {
  transform: translateY(24px) scale(0.6);
}
html:has(.envelope-scene.is-sealed) :is(.site-header, .floating-whatsapp) {
  opacity: 0;
  visibility: hidden;
}
html:has(.envelope-scene.is-sealed.is-open) :is(.site-header, .floating-whatsapp) {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 2.2s;
}
html:has(.envelope-scene.is-sealed.is-open) .floating-whatsapp {
  transition-delay: 2.6s;
}
.envelope {
  --env-inside: #3e2b21;
  --env-front-a: #71503d;
  --env-front-b: #5a3d2e;
  --env-flap-a: #5f4232;
  --env-flap-b: #6e4d3a;
  --env-ink: rgba(245, 232, 216, 0.92);
  --env-paper: #f8f3ea;
  /* the envelope also shrinks to fit a short screen (a phone held sideways), since the page can't scroll yet;
     the writing on it is sized in cqw (% of the envelope's width) so it shrinks with it */
  --env-w: min(500px, 100vw - 48px, (100svh - 60px) * 0.88);
  /* how far below the centre of the screen the envelope sits, to balance the greeting above it */
  --env-drop: 44px;
  display: none;
  /* it is only shown while the page can't scroll, so it is placed on the screen: centred together with its greeting
     and hint, keeping room above it for the flap when it folds back (0.46 x the envelope width) */
  position: fixed;
  z-index: 2;
  top: max(calc(var(--env-w) * 0.46), calc(50svh - var(--env-w) / 3 + var(--env-drop)));
  left: 0;
  right: 0;
  width: var(--env-w);
  margin: 0 auto;
  aspect-ratio: 3 / 2;
  container-type: inline-size;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  perspective: 1400px;
  transition: transform 0.3s ease;
}
.envelope-scene.is-sealed .envelope {
  display: block;
}
.envelope-scene.is-sealed:not(.is-open) .envelope:hover {
  transform: translateY(-4px);
}
.env-back,
.env-letter,
.env-front,
.env-flap {
  position: absolute;
  display: block;
}
.env-back {
  inset: 0;
  z-index: 0;
  border-radius: 6px;
  background: var(--env-inside);
  box-shadow: 0 30px 60px rgba(50, 36, 26, 0.3);
}
.envelope svg {
  display: block;
  width: 100%;
  height: 100%;
}
.env-letter {
  left: 6%;
  right: 6%;
  top: 7%;
  bottom: 8%;
  z-index: 2;
  display: grid;
  place-items: start center;
  padding-top: 7%;
  overflow: hidden;
  background: var(--env-paper);
  outline: 1px solid rgba(0, 0, 0, 0.08);
  outline-offset: -7px;
  transition: transform 0.85s cubic-bezier(0.2, 0.75, 0.25, 1) 0.7s;
}
/* light sweeps across the letter as it comes out */
.env-letter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.7) 50%, transparent 65%);
  transform: translateX(-100%);
}
.env-letter-text {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(22px, 4.6vw, 32px);
  font-size: clamp(22px, 6.4cqw, 32px);
  font-style: italic;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}
.env-letter-text small {
  display: block;
  margin-bottom: 6px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}
.env-front {
  inset: 0;
  z-index: 3;
}
.env-to {
  position: absolute;
  right: 9%;
  bottom: 10%;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(14px, 2.6vw, 18px);
  font-size: clamp(11px, 3.6cqw, 18px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--env-ink);
}
/* Umembeso envelope: a strip of the traditional pattern under the seal, with the address centred below it.
   Sized in % so it always stays below the point of the flap. */
.env-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22%;
  height: 9%;
  background: #4a3227 url("../images/traditional-border.svg") repeat-x center / auto 100%;
}
.env-band + .env-to {
  left: 0;
  right: 0;
  bottom: 8%;
  font-size: clamp(11px, 2.3vw, 15px);
  font-size: clamp(11px, 3cqw, 15px);
  text-align: center;
}
/* The flap turns over at its top edge. Halfway, when it is edge-on, it drops behind the letter and its lining
   (.env-flap-in) takes over from its outside. */
.env-flap {
  inset: 0 0 auto;
  z-index: 4;
  height: 68%;
  transform-origin: top;
  transition:
    transform 0.7s ease-in-out 0.2s,
    z-index 0s linear 0.55s;
}
.env-flap svg {
  position: absolute;
  inset: 0;
}
.env-flap-in {
  opacity: 0;
  transition: opacity 0s linear 0.55s;
}
.envelope .wax-seal {
  position: absolute;
  left: 50%;
  top: 68%;
  z-index: 5;
  margin: -37px 0 0 -37px;
}
/* a gold ring that breathes around the seal while it waits, and ripples out when the seal pops */
.envelope::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 68%;
  z-index: 6;
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
  border: 1.5px solid #e6c397;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: env-glow 2.4s ease-out infinite;
}
/* on a small envelope (small phones, phones held sideways) the seal is smaller, so it stays clear of the address */
@container (max-width: 340px) {
  .envelope .wax-seal,
  .envelope::after {
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
  }
  .envelope .wax-seal {
    font-size: 17px;
  }
  .envelope .wax-seal::before {
    inset: 7px;
  }
}
.env-hint {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 22px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  animation: env-pulse 2.4s ease-in-out infinite;
}
/* the greeting above the envelope rises in line by line when the page opens, and fades away as soon as it's tapped */
.env-greeting {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 26px);
  display: grid;
  justify-items: center;
  line-height: 1.15;
  transition:
    opacity 0.25s ease,
    transform 0.4s ease;
}
.env-greeting > * {
  animation: env-greet 0.9s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}
.env-greeting-from {
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  animation-delay: 0.15s;
}
.env-greeting-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(38px, 10.5vw, 56px);
  font-size: clamp(38px, 11.2cqw, 56px);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
  animation-delay: 0.3s;
}
.env-greeting-to {
  margin-top: 4px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(17px, 4.6vw, 21px);
  font-size: clamp(17px, 4.2cqw, 21px);
  color: var(--muted);
  animation-delay: 0.45s;
}
.envelope-scene.is-open .env-greeting {
  opacity: 0;
  transform: translateY(-12px);
}
.envelope-scene.is-open .env-flap {
  z-index: 0;
  transform: rotateX(180deg);
}
.envelope-scene.is-open .env-flap-in {
  opacity: 1;
}
.envelope-scene.is-open .envelope .wax-seal {
  animation: env-seal-pop 0.6s cubic-bezier(0.3, 0, 0.3, 1) forwards;
}
.envelope-scene.is-open .envelope::after {
  animation: env-ripple 0.9s ease-out 0.1s both;
}
.envelope-scene.is-open .env-letter {
  transform: translateY(-50%);
}
.envelope-scene.is-open .env-letter::after {
  transform: translateX(100%);
  transition: transform 1s ease 1.2s;
}
.envelope-scene.is-open .env-hint {
  opacity: 0;
  animation: none;
  transition: opacity 0.2s;
}
.envelope-scene.is-open .envelope {
  opacity: 0;
  transform: translateY(48px) scale(0.94);
  pointer-events: none;
  transition:
    opacity 0.5s ease 1.55s,
    transform 0.6s cubic-bezier(0.5, 0, 0.75, 0) 1.55s;
}
.envelope-scene.is-sealed .envelope-reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.97);
}
.envelope-scene.is-sealed.is-open .envelope-reveal {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.8s ease 1.7s,
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 1.7s,
    visibility 0s 1.7s;
}
@keyframes env-greet {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes env-pulse {
  50% {
    opacity: 0.45;
  }
}
@keyframes env-glow {
  from {
    opacity: 0.7;
    transform: scale(0.95);
  }
  70%,
  to {
    opacity: 0;
    transform: scale(1.6);
  }
}
@keyframes env-seal-pop {
  25% {
    transform: scale(0.88);
  }
  55% {
    opacity: 1;
    transform: scale(1.18) rotate(-6deg);
  }
  to {
    opacity: 0;
    transform: translateY(-26px) scale(1.4) rotate(-14deg);
  }
}
@keyframes env-ripple {
  from {
    opacity: 0.9;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(4);
  }
}

/* Wax seal with the L&A monogram (envelopes, and the white wedding reply card and footer) */
.wax-seal {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #e6d4b4, #bb986d 55%, #94714b);
  box-shadow:
    inset 0 0 0 5px rgba(255, 255, 255, 0.12),
    inset 0 -3px 6px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(40, 28, 18, 0.35);
  color: #6b4d2f;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.wax-seal::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(107, 77, 47, 0.35);
  border-radius: 50%;
}
.wax-seal i {
  margin: 0 1px;
  font-size: 0.72em;
}

/* Umembeso: while sealed, the envelope sits between two paper doors with dried grass, covering the hero photo.
   Inside, the envelope is lined with a diamond pattern and the letter carries a strip of the traditional border.
   Once the letter is out, the doors part (each inner edge trimmed with the traditional pattern) to unveil the photo,
   which settles from a slight zoom while the names rise one line at a time. */
.hero-envelope {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
}
.hero.is-sealed .hero-envelope {
  display: grid;
}
.hero.is-open .hero-envelope {
  pointer-events: none;
}
/* the doors overlap by 2px so no hairline of the photo shows down the middle */
.hero-door {
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(50% + 1px);
  background: var(--paper);
  transition: transform 1.1s cubic-bezier(0.75, 0, 0.2, 1) 2.05s;
}
.hero-door-left {
  left: 0;
}
.hero-door-right {
  right: 0;
}
.hero-door::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 16px;
  background: var(--cocoa) url("../images/traditional-border-vertical.svg") repeat-y center / 100% auto;
  opacity: 0;
  transition: opacity 0.25s ease 2s;
}
.hero-door-left::before {
  right: 0;
  box-shadow: -8px 0 22px -8px rgba(40, 28, 18, 0.45);
}
.hero-door-right::before {
  left: 0;
  box-shadow: 8px 0 22px -8px rgba(40, 28, 18, 0.45);
}
.hero-door::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 160px;
  height: 320px;
  background: url("../images/dried-grass.svg") no-repeat bottom / contain;
  opacity: 0.45;
}
.hero-door-left::after {
  left: 0;
}
.hero-door-right::after {
  right: 0;
  transform: scaleX(-1);
}
.hero.is-open .hero-door::before {
  opacity: 1;
}
.hero.is-open .hero-door-left {
  transform: translateX(-101%);
}
.hero.is-open .hero-door-right {
  transform: translateX(101%);
}
.hero-envelope .env-letter {
  outline-color: rgba(172, 134, 89, 0.35);
  outline-offset: -13px;
}
.hero-envelope .env-letter::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 8px;
  background: #4a3227 url("../images/traditional-border.svg") repeat-x center / auto 100%;
}
.env-letter-date {
  display: block;
  margin-top: 8px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold);
}
/* Gold diamonds and beads that spill out behind the letter. script.js adds them, each with its own direction (--x, --y),
   spin (--r) and delay (--d). They sit above the open flap and below the letter. */
.env-burst {
  position: absolute;
  left: 50%;
  top: 12%;
  z-index: 1;
  pointer-events: none;
}
.env-burst i {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  background: #e6c397;
  opacity: 0;
  animation: env-burst 1.5s cubic-bezier(0.15, 0.7, 0.3, 1) calc(0.85s + var(--d)) forwards;
}
.env-burst i:nth-child(3n) {
  border-radius: 50%;
  background: #f4e4cf;
}
.env-burst i:nth-child(3n + 1) {
  width: 7px;
  height: 7px;
  background: #c9a07c;
}
.hero.is-sealed.is-open .envelope-reveal {
  transition: none;
}
.hero.is-open .hero-photo > img {
  animation: hero-settle 2.2s cubic-bezier(0.2, 0.6, 0.2, 1) 1.95s both;
}
.hero.is-open .hero-copy > *,
.hero.is-open .date-seal {
  animation: hero-rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 2.4s both;
}
.hero.is-open .hero-copy > :nth-child(2) {
  animation-delay: 2.48s;
}
.hero.is-open .hero-copy > :nth-child(3) {
  animation-delay: 2.56s;
}
.hero.is-open .hero-copy > :nth-child(4) {
  animation-name: hero-rule;
  animation-delay: 2.7s;
}
.hero.is-open .hero-copy > :nth-child(5) {
  animation-delay: 2.74s;
}
.hero.is-open .hero-copy > :nth-child(6) {
  animation-delay: 2.82s;
}
.hero.is-open .hero-copy > :nth-child(7),
.hero.is-open .date-seal {
  animation-delay: 2.9s;
}
.hero.is-open .hero-copy > :nth-child(8) {
  animation-delay: 2.98s;
}
@keyframes env-burst {
  from {
    opacity: 0;
    transform: translate(0, 0) rotate(45deg) scale(0.3);
  }
  12% {
    opacity: 1;
  }
  65% {
    opacity: 1;
    transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)) scale(0.7);
  }
}
@keyframes hero-settle {
  from {
    transform: scale(1.14);
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
}
@keyframes hero-rule {
  from {
    transform: scaleX(0);
  }
}

/* Hero: full-bleed photo with the names over it. It reaches up behind the header, where it is paper-coloured and
   the photo starts below. */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
  min-height: calc(780px + var(--header-h));
  min-height: max(calc(780px + var(--header-h)), 100svh);
  overflow: hidden;
  background: linear-gradient(var(--paper) var(--header-h), #483c31 0);
}
.hero-photo {
  position: absolute;
  inset: var(--header-h) 0 0;
  z-index: -2;
  overflow: hidden;
}
.hero-photo > img {
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
}
.hero-photo:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(24, 18, 13, 0.8) 0%,
      rgba(24, 18, 13, 0.45) 34%,
      rgba(24, 18, 13, 0.02) 72%
    ),
    linear-gradient(0deg, rgba(24, 18, 13, 0.65), transparent 50%);
  pointer-events: none;
}
.date-seal {
  position: absolute;
  right: 6%;
  bottom: 50px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 115px;
  border: 1px solid #fff9;
  border-radius: 60px;
  color: white;
  font-size: 11px;
  letter-spacing: 0.15em;
  background: #382b2333;
  backdrop-filter: blur(8px);
}
.date-seal span {
  font-family: Georgia, serif;
  font-size: 34px;
  line-height: 1.3;
}
.hero-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  padding: 80px 7% 65px;
  color: #fffaf2;
  text-align: left;
}
.hero-copy .eyebrow {
  margin-bottom: 12px;
  color: #f6e7d4;
}
.hero-intro {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-style: italic;
  max-width: 300px;
  color: #f1e4d3;
}
h1 {
  font-size: clamp(80px, 8.5vw, 132px);
  line-height: 0.93;
  letter-spacing: -0.045em;
  margin: 26px 0;
  text-shadow: 0 2px 30px #0002;
}
.ampersand {
  font-size: 0.63em;
  color: #e6c397;
  vertical-align: middle;
}
.hero-rule {
  height: 1px;
  width: 70px;
  background: #ddbc90;
  margin: 10px 0 26px;
  transform-origin: left;
}
.hero-date {
  font-size: 13px;
  margin: 0 0 28px;
}
.hero-date span {
  padding: 0 12px;
  color: #e6c397;
}
.hero-copy .btn {
  background: #f5eee3;
  color: #493324;
  border-color: #f5eee3;
  padding: 18px 28px;
}
.hero-copy .btn:hover {
  background: #e8d4b8;
  border-color: #e8d4b8;
}
.discover {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 28px;
  color: #f5e8d8;
  font-size: 12px;
  text-decoration: none;
}
.discover span {
  margin-left: 22px;
}

/* Invitation */
.traditional-band {
  height: 24px;
  background: var(--cocoa) url("../images/traditional-border.svg") repeat-x
    center;
  background-size: auto 24px;
}
.section {
  max-width: 1200px;
  margin: auto;
  padding: 100px 48px;
}
.invitation {
  position: relative;
  text-align: center;
  padding-top: 110px;
  padding-bottom: 110px;
  isolation: isolate;
}
.invitation:before,
.invitation:after {
  content: "";
  position: absolute;
  bottom: 45px;
  width: 120px;
  height: 250px;
  background: url("../images/dried-grass.svg") no-repeat bottom/contain;
  opacity: 0.4;
  z-index: -1;
}
.invitation:before {
  left: 0;
}
.invitation:after {
  right: 0;
  transform: scaleX(-1);
}
.invitation > p:not(.eyebrow) {
  max-width: 640px;
  margin: 24px auto 0;
}
.couple-names {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 32px;
  line-height: 1.4;
}
.couple-names span {
  color: var(--gold);
  font-style: italic;
  margin: 0 8px;
}
.diamond-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  color: var(--gold);
  max-width: 200px;
  margin: 30px auto;
}
.diamond-divider:before,
.diamond-divider:after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}
.zulu {
  color: var(--muted);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-size: 22px;
}

/* Celebration details */
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 32px;
  margin-bottom: 45px;
}
.section-heading > p {
  font-size: 12px;
  color: var(--muted);
}
.celebration {
  border-top: 1px solid var(--line);
}
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.35fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.detail-grid article {
  padding: 35px 25px;
  border-right: 1px solid var(--line);
}
.detail-grid article:first-child {
  padding-left: 0;
}
.detail-grid article:last-child {
  border: 0;
}
.detail-number {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  font-size: 11px;
}
.detail-number .icon {
  width: 20px;
  height: 20px;
  color: var(--gold);
  margin-right: 3px;
}
.detail-grid h3 {
  font-size: 34px;
  margin: 20px 0 8px;
  line-height: 1.2;
}
.detail-grid p {
  font-size: 13px;
}
.detail-grid .text-link {
  margin-top: 18px;
}
.calendar-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}
.calendar-links .text-link {
  margin-top: 0;
}

/* Countdown */
.countdown {
  background: var(--cocoa);
  color: var(--paper);
  padding: 65px 24px;
  text-align: center;
  position: relative;
}
.countdown h2 {
  font-size: 46px;
}
.countdown h2 em {
  color: #e5c9a4;
}
.countdown .eyebrow {
  color: #e5c9a4;
}
.count-grid {
  display: flex;
  justify-content: center;
  margin: 30px auto 0;
  max-width: 600px;
}
.count-grid > div {
  flex: 1;
  border-right: 1px solid #ffffff30;
}
.count-grid > div:last-child {
  border: 0;
}
.count-grid strong {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 70px;
  font-weight: 400;
  line-height: 1.1;
  display: block;
  font-variant-numeric: tabular-nums;
}
.count-grid span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Dress code */
.dress {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}
.dress-art {
  min-height: 400px;
  border-radius: 180px 180px 0 0;
  background: #e8dccb url("../images/dried-grass.svg") no-repeat bottom left/40%;
  border: 1px solid #d5c2a9;
  outline: 1px solid #d5c2a9;
  outline-offset: -14px;
  display: grid;
  place-items: center;
}
.dress-art span {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 48px;
  line-height: 1.2;
  text-align: center;
}
.dress-art em {
  color: var(--cocoa);
}
.dress-copy > p:not(.eyebrow) {
  margin-top: 22px;
}
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 26px 0 18px;
}
.swatches i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--sw);
  border: 2px solid var(--paper);
  outline: 1px solid #ccbda9;
}
.dress-copy .palette-caption {
  font-size: 12px;
  line-height: 2;
  margin: 0;
  color: var(--muted);
}

/* Gallery */
.gallery {
  border-top: 1px solid var(--line);
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: start;
}
.gallery-item {
  position: relative;
  padding: 0;
  border: 0;
  background: #dfd0bf;
  overflow: hidden;
  border-radius: 3px;
  width: 100%;
  aspect-ratio: 2/3;
}
.gallery-item:nth-child(even) {
  margin-top: 40px;
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s;
}
.gallery-item:hover img {
  transform: scale(1.045);
}
.gallery-item > span {
  position: absolute;
  inset: auto 0 0;
  padding: 30px 16px 12px;
  display: flex;
  justify-content: space-between;
  background: linear-gradient(transparent, #24191080);
  color: white;
  font-size: 12px;
}

/* RSVP */
.rsvp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  border-top: 1px solid var(--line);
  align-items: start;
}
.rsvp-copy {
  padding-top: 30px;
}
.rsvp-copy > p:not(.eyebrow) {
  margin-top: 22px;
}
.rsvp-copy .diamond-divider {
  margin-left: 0;
}
.direct-contact {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 15px;
  margin-top: 35px;
}
.direct-contact .eyebrow {
  margin: 0;
}
.rsvp-form {
  background: var(--white);
  padding: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 16px 50px #61433108;
}
.rsvp-form h3 {
  font-size: 36px;
  margin-bottom: 22px;
}
.rsvp-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin: 18px 0 7px;
}
.rsvp-form label span {
  color: var(--muted);
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fffefa;
  border-radius: 4px;
  padding: 13px 14px;
  color: var(--ink);
  /* 16px stops iPhones zooming in when a field is tapped. */
  font-size: 16px;
  line-height: 1.4;
  min-height: 48px;
}
textarea {
  resize: vertical;
}
input::placeholder,
textarea::placeholder {
  color: #877c70;
  font-size: 14px;
}
.rsvp-form .btn {
  width: 100%;
  margin-top: 25px;
}
.form-note,
#rsvpStatus {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 14px;
}
#rsvpStatus:empty {
  display: none;
}

/* Footer */
footer {
  text-align: center;
  background: #e9dece;
  padding-bottom: 130px;
}
footer .traditional-band {
  margin-bottom: 55px;
}
footer .eyebrow {
  margin-bottom: 12px;
}
.footer-names {
  font-size: clamp(40px, 6vw, 70px);
  line-height: 1.2;
  margin-bottom: 25px;
}
footer small {
  font-size: 12px;
  color: var(--muted);
}

/* Music player: a "now playing" pill; the couple photo spins like a record while the song plays */
.music-player {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 20;
  transition:
    opacity 0.4s,
    transform 0.4s,
    visibility 0.4s;
}
/* Kept off the first screen so it doesn't cover the hero text (see script.js). */
.music-player.is-tucked {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
}
#musicToggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 20px 4px 4px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(43, 32, 25, 0.84);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  color: #fffaf2;
  text-align: left;
  box-shadow: 0 12px 32px rgba(36, 25, 16, 0.28);
  transition:
    transform 0.2s,
    background 0.2s;
}
#musicToggle:hover {
  background: rgba(43, 32, 25, 0.94);
  transform: translateY(-1px);
}
#musicToggle:active {
  transform: scale(0.97);
}
#musicToggle:disabled {
  cursor: progress;
}
.music-disc {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}
.music-cover,
.music-icon {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
}
.music-cover {
  background: var(--cocoa) url("../images/couple.jpeg") 50% 20% / 150% auto;
}
.music-icon {
  display: grid;
  place-items: center;
  background: rgba(24, 17, 12, 0.45);
  transition: background 0.3s;
}
.is-playing .music-icon {
  background: rgba(24, 17, 12, 0.2);
}
.music-icon .icon {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
}
.music-icon .icon-play {
  margin-left: 2px;
}
.music-icon .icon-pause,
.is-playing .music-icon .icon-play {
  display: none;
}
.is-playing .music-icon .icon-pause {
  display: block;
}
.music-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke-width: 2;
  transform: rotate(-90deg);
}
.music-ring circle:first-child {
  stroke: rgba(255, 255, 255, 0.16);
}
/* r=15.9155 makes the circumference 100, so the offset is "percent left to play". */
#musicProgress {
  stroke: #e6c397;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 0.25s linear;
}
.is-loading #musicProgress {
  stroke-dashoffset: 72;
}
.is-loading .music-ring {
  animation: music-spin 0.9s linear infinite;
}
.music-label {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.music-label strong {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.music-label span {
  font-size: 11px;
  color: rgba(255, 250, 242, 0.62);
}
.music-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 14px;
  margin-left: 2px;
}
.music-bars i {
  width: 3px;
  height: 100%;
  border-radius: 2px;
  background: #e6c397;
  opacity: 0.5;
  transform: scaleY(0.25);
  transform-origin: bottom;
  transition:
    transform 0.3s,
    opacity 0.3s;
}
.is-playing .music-bars i {
  opacity: 1;
  animation: music-bar 0.9s ease-in-out infinite alternate;
}
.is-playing .music-bars i:nth-child(2) {
  animation-duration: 0.7s;
  animation-delay: -0.3s;
}
.is-playing .music-bars i:nth-child(3) {
  animation-duration: 1.1s;
  animation-delay: -0.6s;
}
.is-playing .music-bars i:nth-child(4) {
  animation-duration: 0.8s;
  animation-delay: -0.2s;
}
#musicStatus {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  margin: 0;
  padding: 7px 12px;
  border-radius: 10px;
  background: rgba(43, 32, 25, 0.92);
  color: #fffaf2;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
}
#musicStatus:empty {
  display: none;
}
@keyframes music-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes music-bar {
  from {
    transform: scaleY(0.2);
  }
  to {
    transform: scaleY(1);
  }
}

/* WhatsApp button */
.floating-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #335543;
  color: white;
  text-decoration: none;
  border-radius: 30px;
  padding: 13px 20px;
  font-size: 12px;
  box-shadow: 0 4px 20px #382b231a;
}
.floating-whatsapp svg {
  width: 24px;
  height: 24px;
}

/* Photo viewer */
dialog {
  border: 0;
  background: #211c17f5;
  color: white;
  max-width: none;
  max-height: none;
  width: 100%;
  height: 100%;
  padding: 60px 70px;
  position: fixed;
  inset: 0;
  margin: 0;
  /* Sideways swipes change photo; without this the browser treats them as "go back". */
  touch-action: pan-y pinch-zoom;
}
dialog::backdrop {
  background: #211c17;
}
dialog[open] {
  display: grid;
  place-items: center;
}
dialog figure {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
dialog img {
  max-width: 100%;
  max-height: calc(100% - 45px);
  object-fit: contain;
}
dialog figcaption {
  font-size: 13px;
  text-align: center;
}
.lightbox-close,
.lightbox-arrow {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid #ffffff50;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  background: #ffffff10;
  color: white;
  font-size: 25px;
}
.lightbox-close .icon,
.lightbox-arrow .icon {
  width: 22px;
  height: 22px;
}
.lightbox-close {
  right: 20px;
  top: 16px;
}
.lightbox-arrow {
  top: calc(50% - 22px);
}
.previous {
  left: 16px;
}
.next {
  right: 16px;
}

/* Sections fade in on scroll */
.reveal {
  transition:
    opacity 0.8s,
    transform 0.8s;
}
.reveal.is-pending {
  opacity: 0;
  transform: translateY(24px);
}

@media (min-width: 1400px) {
  .hero-photo > img {
    object-position: center 43%;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: max(calc(720px + var(--header-h)), 100svh);
  }
  .hero-photo > img {
    object-position: 58% 40%;
  }
  .date-seal {
    right: 30px;
    bottom: 45px;
  }
  .hero-copy {
    padding: 65px 6% 55px;
  }
  h1 {
    font-size: 85px;
  }
  .section {
    padding: 75px 30px;
  }
  .detail-grid h3 {
    font-size: 28px;
  }
  .dress,
  .rsvp {
    gap: 40px;
  }
  .gallery-grid {
    gap: 12px;
  }
  .rsvp-form {
    padding: 26px;
  }
}

@media (max-width: 600px) {
  html {
    scroll-padding-top: 85px;
  }
  :root {
    --header-h: 72px;
  }
  .site-header {
    padding: 0 20px;
  }
  .monogram {
    font-size: 28px;
  }
  .event-tabs {
    max-width: 270px;
  }
  .event-tabs a {
    padding: 5px 8px;
    font-size: 11px;
    letter-spacing: 0;
  }
  .hero {
    min-height: max(calc(820px + var(--header-h)), 100svh);
  }
  .envelope {
    --env-w: min(500px, 100vw - 32px, (100svh - 60px) * 0.88);
    --env-drop: 32px;
  }
  .hero-door::after {
    width: 80px;
    height: 180px;
    opacity: 0.3;
  }
  .envelope .wax-seal {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    font-size: 18px;
  }
  .envelope::after {
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
  }
  /* Lift the photo so the faces sit above the text: 16% taller than the hero, shifted up by the same amount. */
  .hero-photo > img {
    top: -16%;
    height: 116%;
    object-position: 50% 50%;
  }
  /* Dark behind the text (bottom ~60%), fading out just below the faces. */
  .hero-photo:after {
    background: linear-gradient(
      0deg,
      rgba(24, 18, 13, 0.94) 0%,
      rgba(24, 18, 13, 0.8) 30%,
      rgba(24, 18, 13, 0.6) 50%,
      rgba(24, 18, 13, 0.35) 60%,
      rgba(24, 18, 13, 0.06) 70%,
      rgba(24, 18, 13, 0.1) 100%
    );
  }
  .date-seal {
    display: none;
  }
  .hero-copy {
    padding: 330px 24px 40px;
  }
  .hero-copy .eyebrow {
    letter-spacing: 0.16em;
  }
  .hero-intro {
    font-size: 18px;
    max-width: 270px;
  }
  h1 {
    font-size: 72px;
    margin: 15px 0;
    line-height: 0.94;
  }
  .hero-rule {
    margin: 4px 0 16px;
  }
  .hero-date {
    margin-bottom: 20px;
  }
  .hero-copy .btn {
    padding: 15px 22px;
  }
  .discover {
    margin-top: 20px;
  }
  .section {
    padding: 65px 24px;
  }
  .invitation:before,
  .invitation:after {
    width: 55px;
    height: 160px;
    opacity: 0.25;
  }
  .invitation > p.couple-names {
    font-size: 29px;
    max-width: 260px;
  }
  .couple-names span {
    display: block;
  }
  .invitation > p.zulu {
    font-size: 20px;
  }
  .section-heading {
    display: block;
    margin-bottom: 30px;
  }
  .section-heading > p {
    margin-top: 20px;
  }
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-grid article,
  .detail-grid article:first-child {
    padding: 25px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .detail-grid h3 {
    margin-top: 10px;
    font-size: 33px;
  }
  .countdown {
    padding: 50px 20px;
  }
  .countdown h2 {
    font-size: 40px;
  }
  .count-grid strong {
    font-size: 50px;
  }
  .count-grid span {
    letter-spacing: 0.12em;
  }
  .dress {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .dress-art {
    min-height: 260px;
    max-width: 300px;
    width: 100%;
    margin: auto;
  }
  .dress-art span {
    font-size: 40px;
  }
  .swatches {
    gap: 9px;
  }
  .swatches i {
    width: 27px;
    height: 27px;
  }
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .gallery-item:nth-child(even) {
    margin-top: 25px;
  }
  .rsvp {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .rsvp-copy {
    padding: 0;
  }
  .rsvp-form {
    padding: 24px;
  }
  footer .footer-names {
    font-size: 42px;
  }
  .music-player {
    left: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
  }
  #musicToggle {
    gap: 10px;
    padding: 3px 16px 3px 3px;
  }
  .floating-whatsapp {
    right: 12px;
    bottom: max(16px, env(safe-area-inset-bottom));
    padding: 12px;
  }
  .floating-whatsapp span {
    display: none;
  }
  dialog {
    padding: 70px 50px;
  }
  .lightbox-arrow {
    width: 36px;
    height: 36px;
  }
  .previous {
    left: 7px;
  }
  .next {
    right: 7px;
  }
}

/* Very narrow phones: make room so "White Wedding" stays on one line in the header switch */
@media (max-width: 340px) {
  .site-header {
    gap: 10px;
    padding: 0 12px;
  }
  .monogram {
    font-size: 24px;
  }
  .event-tabs a {
    padding: 5px 4px;
    white-space: nowrap;
  }
}

/* With JavaScript switched off the envelope can't open, so skip it */
@media (scripting: none) {
  html:has(.envelope-scene.is-sealed) {
    overflow: visible;
  }
  html:has(.envelope-scene.is-sealed) :is(.site-header, .floating-whatsapp) {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
  .envelope,
  .hero-envelope {
    display: none !important;
  }
  .envelope-scene.is-sealed .envelope-reveal {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
  }
  .reveal.is-pending {
    opacity: 1;
    transform: none;
  }
}