@font-face {
  font-family: "Trevenir Sans";
  src: url("assets/fonts/sans.woff") format("woff");
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
}

@font-face {
  font-family: "Trevenir Script";
  src: url("assets/fonts/script.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Trevenir Cover";
  src: url("assets/fonts/cover-script.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --body-font: "Trevenir Sans", "Segoe UI", Arial, sans-serif;
  --script-font: "Trevenir Script", "Brush Script MT", cursive;
  --cover-font: "Trevenir Cover", "Brush Script MT", cursive;
  --heading-font: "Trevenir Script", "Brush Script MT", cursive;
  --button-font: "Trevenir Sans", Arial, sans-serif;

  /* Trevor & Marijomich theme */
  --brown: #3e4e2c;   /* deep olive - headings */
  --copper: #c9b98a;  /* soft gold  - borders, rules */
  --amber: #959864;   /* sage olive  - accents */
  --silver: #eef0e6;  /* pale panel  */
  --ink: #2f3a26;
  --white: #fff;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background: #2f3a26;
}

body {
  min-width: 320px;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: #2f3a26;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.modal-open,
body.lightbox-open,
body.welcome-open {
  overflow: hidden;
}

img,
iframe {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

button {
  cursor: pointer;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared controls */
.button {
  display: inline-flex;
  min-height: 45px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 22px;
  border: 0;
  border-radius: 999px;
  color: #222;
  background: #fff;
  box-shadow: 0 1px 2px 1px rgb(0 0 0 / 12%);
  font-family: var(--button-font);
  font-size: 14px;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgb(0 0 0 / 25%), inset 0 2px 1px rgb(255 255 255 / 90%);
}

.button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #b9c48a;
  outline-offset: 3px;
}

/* Welcome / personal invitation — a light, airy cover like the reference */
.welcome {
  position: fixed;
  z-index: 3000;
  inset: 0;
  overflow: hidden;
  color: #2f3a26;
  background: #fbfaf6;
  opacity: 1;
  visibility: visible;
  /* the opening sequence below overrides this timing via .is-opening */
  transition: opacity 650ms ease, visibility 0s linear 650ms;
}

.welcome__background,
.welcome__shade {
  position: absolute;
  inset: 0;
}

.welcome__background {
  background: #fdfcf8 url("assets/images/cover-watercolor-alt.png") center center / cover no-repeat;
  transform: scale(1.015);
}

/* washes the wash back towards the pale, airy look of the reference */
.welcome__shade {
  background:
    radial-gradient(ellipse at 50% 50%, rgb(255 255 255 / 55%), rgb(255 255 255 / 88%) 78%);
}

.welcome__content {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(94vw, 760px);
  flex-direction: column;
  align-items: center;
  color: #2f3a26;
  text-align: center;
  transform: translate(-50%, -50%);
}

/* The envelope is a button, so it needs the button reset before anything else */
.welcome__envelope {
  position: relative;
  display: block;
  width: min(84vw, 700px);
  aspect-ratio: 1.44;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.welcome__envelope:focus-visible,
.welcome__tap:focus-visible {
  outline: 2px solid #6b7a3f;
  outline-offset: 6px;
  border-radius: 14px;
}

/* ---- the outlined olive script line, now below the envelope ---- */
.welcome__script {
  position: relative;
  z-index: 5;
  margin: clamp(4px, 1.2vh, 16px) 0 0;
  color: #6f7f3c;
  font-family: var(--cover-font);
  font-size: clamp(26px, 4.2vw, 56px);
  line-height: 1.2;
  text-shadow:
    2px 2px 0 rgb(255 255 255 / 88%),
    -2px -2px 0 rgb(255 255 255 / 88%),
    2px -2px 0 rgb(255 255 255 / 88%),
    -2px 2px 0 rgb(255 255 255 / 88%),
    0 6px 16px rgb(120 140 90 / 22%);
}

/* ---- the florals arranged as a wreath around the envelope ---- */
.welcome__floral,
.welcome__env {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.welcome__floral {
  z-index: 1;
  transition: transform 900ms cubic-bezier(.3, .7, .3, 1), opacity 700ms ease;
}

/* Each piece overlaps an edge of the envelope so the group reads as one
   wreath, which is how the original cover arranges them. */
.welcome__floral--trailing { top: 4%; left: -4%; width: 30%; transform: rotate(-5deg); }
.welcome__floral--bouquet { top: -1%; left: 34%; width: 22%; transform: rotate(2deg); }
.welcome__floral--flower { bottom: 5%; left: 5%; width: 24%; transform: rotate(-3deg); }
.welcome__floral--horizontal { right: 3%; bottom: 13%; width: 38%; transform: rotate(6deg); }
.welcome__floral--bow { top: 3%; right: 6%; z-index: 3; width: 22%; transform: rotate(8deg); }

.welcome__env {
  --flap: 62%;
  z-index: 2;
  top: 15%;
  left: 22%;
  width: 56%;
  perspective: 1100px;
  transition: transform 900ms cubic-bezier(.5, .05, .3, 1), opacity 600ms ease;
}

/* ---- the cream card that rises out of the envelope ---- */
.welcome__env-letter {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 10%;
  display: flex;
  width: 80%;
  aspect-ratio: 1 / 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 3px 3px 0 0;
  color: #3e4e2c;
  background: linear-gradient(168deg, #fdfcf7 0%, #f4f1e4 100%);
  box-shadow: 0 -3px 12px rgb(0 0 0 / 18%);
  font-family: var(--script-font);
  font-size: clamp(10px, 2vw, 15px);
  line-height: 1.2;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  transition: transform 660ms cubic-bezier(.2, .8, .3, 1), opacity 320ms ease;
}

.welcome__env-letter i {
  font-size: 1.45em;
  line-height: .9;
  opacity: .7;
}

.welcome__env-letter em {
  margin-top: 4px;
  font-family: var(--body-font);
  font-size: .58em;
  font-style: normal;
  letter-spacing: .16em;
  opacity: .65;
}

/* ---- the body: the same artwork with the flap triangle removed ----
   The notch is the V formed by the flap's two lower edges, so when the flap
   lifts there is a real opening instead of a ghost of the closed flap. */
.welcome__env-face {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  clip-path: polygon(0% 0%, 50% var(--flap), 100% 0%, 100% 100%, 0% 100%);
  filter: drop-shadow(0 10px 9px rgb(24 40 18 / 30%));
}

/* ---- the flap, hinged along the top edge ----
   background-size is scaled so the artwork lines up exactly with the body:
   the box is --flap tall, so the image must be drawn at 1/0.62 of that. */
.welcome__env-flap {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: var(--flap);
  background: url("assets/images/cover-envelope.png") top center / 100% calc(100% / 0.62) no-repeat;
  clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
  border-radius: 4px 4px 0 0;
  transform: rotateX(0deg);
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  backface-visibility: visible;
  filter: drop-shadow(0 3px 3px rgb(24 40 18 / 22%));
  transition: transform 640ms cubic-bezier(.55, .06, .3, 1);
  will-change: transform;
}

.welcome__seal {
  position: absolute;
  z-index: 3;
  top: 44%;
  left: 50%;
  display: block;
  width: 21%;
  height: auto;
  filter: drop-shadow(1px 3px 2px rgb(16 39 27 / 30%));
  transform: translate(-50%, -50%);
  transition: transform 420ms cubic-bezier(.3, .8, .3, 1), opacity 380ms ease;
  animation: seal-breathe 3.6s ease-in-out 1.6s infinite;
}

/* --------------------------------------------------------------------------
   The opening
   Sequence on click:
     1. the wax seal lifts off and fades
     2. the flap hinges upward and folds back
     3. the cream card rises out of the envelope
     4. the envelope and card float away together
     5. the florals scatter in different directions
     6. the whole screen fades out
   Each piece uses its own transition-delay so the order is guaranteed
   even when the two open controls are clicked at different moments.
   -------------------------------------------------------------------------- */
.welcome.is-opening .welcome__seal {
  /* the idle breathing must stop, otherwise its keyframes would keep
     overwriting the transform the opening animation is trying to apply */
  animation: none;
  opacity: 0;
  transform: translate(-50%, -140%) scale(1.45) rotate(12deg);
  transition-delay: 0ms;
}

.welcome.is-opening .welcome__env-flap {
  transform: rotateX(-172deg);
  transition-delay: 170ms;
}

.welcome.is-opening .welcome__env-letter {
  opacity: 1;
  transform: translateY(-64%) scale(1.02);
  transition-delay: 420ms;
}

.welcome.is-opening .welcome__env {
  opacity: 0;
  transform: translateY(-190px) rotate(-7deg) scale(.84);
  transition-delay: 760ms;
}

.welcome.is-opening .welcome__floral--trailing { opacity: 0; transform: translate(-130px, 40px) rotate(46deg); transition-delay: 420ms; }
.welcome.is-opening .welcome__floral--bouquet  { opacity: 0; transform: translate(10px, -130px) rotate(38deg); transition-delay: 480ms; }
.welcome.is-opening .welcome__floral--bow      { opacity: 0; transform: translate(120px, -90px) rotate(52deg); transition-delay: 520ms; }
.welcome.is-opening .welcome__floral--flower    { opacity: 0; transform: translate(-90px, 110px) rotate(-28deg); transition-delay: 560ms; }
.welcome.is-opening .welcome__floral--horizontal { opacity: 0; transform: translate(110px, 120px) rotate(112deg); transition-delay: 600ms; }

.welcome.is-opening .welcome__tap { opacity: 0; transition: opacity 200ms ease; }

/* the screen itself fades a moment later so the opening is fully visible */
.welcome.is-opening {
  opacity: 0;
  visibility: hidden;
  transition: opacity 620ms ease 900ms, visibility 0s linear 1520ms;
}

.welcome.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.welcome__note[hidden] { display: none; }

/* "Click to Open..." — the reference's call to action, and a real button.
   Sits just under the script line, so it stays close to the envelope. */
.welcome__tap {
  display: block;
  margin: clamp(2px, .8vh, 12px) 0 0;
  padding: 2px 10px;
  border: 0;
  color: #4f5f2a;
  background: transparent;
  font-family: var(--cover-font);
  font-size: clamp(20px, 2.7vw, 36px);
  line-height: 1.1;
  text-shadow:
    1.5px 1.5px 0 rgb(255 255 255 / 85%),
    -1.5px -1.5px 0 rgb(255 255 255 / 85%),
    0 4px 12px rgb(120 140 90 / 22%);
  cursor: pointer;
  transition: transform 220ms ease;
  animation: tap-pulse 2.6s ease-in-out 1.6s infinite;
}

.welcome__tap:hover {
  transform: scale(1.04);
}

@keyframes tap-pulse {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}


/* Off-screen 1x1 frame used only when music comes from YouTube. */
.music-frame {
  position: fixed;
  top: -10px;
  left: -10px;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.welcome__dear {
  margin: 0;
  color: #4a5a33;
  font-size: clamp(16px, 2.6vw, 24px);
  line-height: 1;
}

.welcome h1 {
  max-width: 100%;
  margin: 4px 0 3px;
  color: #2f3a26;
  font-family: var(--body-font);
  font-size: clamp(26px, 4.4vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  text-wrap: balance;
}

.welcome__seats {
  margin: 0 0 clamp(6px, 1.6vh, 20px);
  color: #4a5a33;
  font-size: clamp(13px, 1.8vw, 18px);
  line-height: 1.2;
}

.welcome__seats b {
  color: #2f3a26;
}

.welcome__note {
  margin: 0 0 10px;
  padding: 5px 14px;
  border: 1px solid rgb(111 127 60 / 40%);
  border-radius: 999px;
  color: #4a5a33;
  background: rgb(255 255 255 / 70%);
  font-size: clamp(12px, 3vw, 15px);
  line-height: 1.2;
}

/* Hero */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background: #333;
}

.hero__background,
.hero__shade {
  position: absolute;
  inset: 0;
}

.hero__background {
  z-index: -3;
  background: url("assets/images/hero.jpg") center center / cover no-repeat;
}

.hero__shade {
  z-index: -2;
  background: linear-gradient(180deg, rgb(0 0 0 / 25%), transparent 30%, transparent 70%, rgb(0 0 0 / 20%));
}

.hero__content {
  position: absolute;
  top: clamp(50px, 6vh, 74px);
  right: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  text-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.hero__eyebrow,
.hero__date {
  margin: 0;
  font-size: clamp(20px, 6vw, 64px);
  line-height: 1.08;
}

.hero__names {
  margin: 4px 0 2px;
  font-family: var(--cover-font);
  font-size: clamp(43px, 9vw, 122px);
  font-weight: 400;
  line-height: 1.05;
  white-space: nowrap;
}

.hero__names span {
  display: inline-block;
  margin: 0 2px;
  font-family: var(--cover-font);
  font-size: .72em;
  line-height: 1;
}

.hero__date {
  font-size: clamp(21px, 5.5vw, 58px);
}

.hero__scroll {
  position: absolute;
  bottom: 24px;
  left: 50%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 60%);
  font-family: var(--button-font);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transform: translateX(-50%);
  animation: float-cue 1.8s ease-in-out infinite;
}

.hero__scroll i {
  font-family: Arial, sans-serif;
  font-size: 29px;
  font-style: normal;
  line-height: .8;
}

@keyframes float-cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 9px); }
}

/* Shared ornamental framed sections */
.framed-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--silver);
  background-image: url("assets/images/green-texture.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.section-ornament,
.section-flower {
  position: absolute;
  z-index: 1;
  display: block;
  pointer-events: none;
  user-select: none;
}

.section-ornament {
  right: 0;
  left: 0;
  width: 100%;
  height: clamp(58px, 9vw, 124px);
  overflow: hidden;
}

.section-ornament img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Feather the band so it reads as a soft floral border instead of a
     rectangle pasted onto the section. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 42%, #000 58%, transparent 100%);
}

.section-ornament--top { top: 0; }
.section-ornament--bottom { bottom: 0; }
.section-ornament--bottom img { transform: rotate(180deg); }

.section-flower img {
  width: 100%;
  height: auto;
}

.section-flower--top-left {
  top: 0;
  left: 0;
  width: 53%;
}

.section-flower--bottom-right {
  right: 0;
  bottom: 0;
  width: 53%;
}

.section-flower--top-left-small {
  top: 0;
  left: 0;
  z-index: 2;
  width: 33%;
}

.section-flower--bottom-right-small {
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 33%;
}

/* The story section carries the couple photograph as its background */
.story {
  min-height: clamp(1080px, 205vw, 1320px);
  background-image: url("assets/images/story-couple.jpg");
  background-position: center 42%;
}

/* A pale veil rather than a solid card, so the couple stays visible behind
   the names. The text carries a soft light shadow to stay legible. */
.story__frame {
  position: absolute;
  z-index: 2;
  top: 60px;
  right: 20px;
  bottom: 60px;
  left: 20px;
  border: 4px solid var(--copper);
  border-radius: 220px;
  background: linear-gradient(180deg, rgb(253 252 246 / 82%), rgb(249 248 240 / 86%));
  box-shadow: 0 0 0 7px rgb(47 58 38 / 18%);
  pointer-events: none;
}

.story__content {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  padding: clamp(140px, 26vw, 190px) 20px;
  color: #2f3a26;
  text-align: center;
  text-shadow: 0 1px 10px rgb(255 255 255 / 92%), 0 0 26px rgb(255 255 255 / 78%);
}

.story__intro {
  margin: 0 0 clamp(20px, 4vw, 38px);
  font-size: clamp(17px, 4vw, 50px);
  line-height: 1.25;
}

.story sup {
  font-size: .58em;
  vertical-align: super;
}

.person-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}


/* No portraits on these cards any more — the couple photo is the backdrop,
   so the names and parents carry the section on their own. */
.person-card h3 {
  max-width: 100%;
  margin: 0 0 4px;
  color: #3e4e2c;
  font-family: var(--script-font);
  font-size: clamp(34px, 6.4vw, 88px);
  font-weight: 400;
  line-height: 1.15;
}

.person-card p {
  margin: 0;
  color: #4a5a33;
  font-size: clamp(15px, 2.4vw, 32px);
  line-height: 1.28;
}

.story__amp {
  margin: clamp(10px, 2vw, 22px) 0;
  color: #6f7f3c;
  font-family: var(--heading-font);
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1;
}

/* Event */
.event {
  position: relative;
  isolation: isolate;
  min-height: 915px;
  overflow: hidden;
  background: url("assets/images/location-forest.jpg") center center / cover no-repeat;
}

.event__background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: inherit;
}

.event__frame {
  position: absolute;
  z-index: -1;
  border-radius: 300px;
  background: rgb(240 243 230 / 46%);
  box-shadow: 0 0 8px rgb(60 74 44);
  pointer-events: none;
}

.event__frame--outer {
  top: 50px;
  right: 10px;
  bottom: 50px;
  left: 10px;
}

.event__frame--inner {
  top: 60px;
  right: 20px;
  bottom: 60px;
  left: 20px;
}

.event__content {
  display: flex;
  min-height: 915px;
  flex-direction: column;
  align-items: center;
  padding: 200px 20px;
  color: #333;
  text-align: center;
}

.event h2,
.details h2,
.entourage h2,
.rsvp h2 {
  margin: 0;
  color: var(--brown);
  font-family: var(--heading-font);
  font-size: clamp(31px, 8vw, 110px);
  font-weight: 400;
  line-height: 1.05;
}

.event__datetime {
  margin: 12px 0 5px;
  color: #333;
  font-size: clamp(19px, 5vw, 65px);
  line-height: 1.2;
}

.event__divider {
  width: 210px;
  max-width: 58%;
  margin: 4px auto 10px;
}


.button--outline {
  min-width: 190px;
  margin-top: 10px;
  background: #fff;
}

.countdown {
  display: grid;
  width: min(100%, 780px);
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 3vw, 30px);
  margin: 0 auto;
}

.countdown > div {
  display: flex;
  min-height: 78px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px 7px;
  border-radius: 7px;
  color: var(--ink);
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 0 2px outset rgb(47 58 38);
  line-height: 1.25;
}

.countdown strong {
  font-size: clamp(25px, 4vw, 38px);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  transition: transform 320ms cubic-bezier(.2, .8, .25, 1), opacity 320ms ease;
}

/* Added by script.js for one beat whenever the value changes, so the
   numbers tick over instead of silently swapping. */
.countdown strong.is-ticking {
  transform: translateY(-7px) scale(1.06);
  opacity: .35;
}

.countdown span,
.countdown__label {
  font-size: clamp(10px, 4vw, 20px);
}

.countdown__label {
  margin: 20px 0 7px;
  font-family: var(--heading-font);
  font-size: clamp(14px, 3.2vw, 24px);
  text-align: center;
}

.countdown__label strong {
  font-weight: 400;
}

/* Location — venue photograph and map */
.location {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: clamp(980px, 105vw, 1500px);
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: var(--seam, #2f3a26);
}

.location__background,
.location__shade {
  position: absolute;
  inset: 0;
}

.location__background {
  z-index: -3;
  background: url("assets/images/green-texture.jpg") center / cover no-repeat;
}

.location__shade {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 42%, rgb(28 42 22 / 18%), rgb(22 34 18 / 62%)),
    linear-gradient(180deg, rgb(32 48 24 / 40%), rgb(22 34 18 / 58%));
}

.location__content {
  display: flex;
  width: min(100%, 980px);
  flex-direction: column;
  align-items: center;
  padding: clamp(80px, 11vw, 150px) 20px;
  text-align: center;
}

.location__content h2 {
  margin: 0 0 4%;
  color: #fff;
  font-family: var(--heading-font);
  font-size: clamp(34px, 6.5vw, 88px);
  font-weight: 400;
  line-height: 1.05;
  text-shadow: 0 2px 14px rgb(0 0 0 / 40%);
}

.location__venue {
  margin: 0 0 5%;
  font-size: clamp(17px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .04em;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.location__venue span {
  font-family: var(--script-font);
  font-size: 1.35em;
  letter-spacing: 0;
}

.location__card {
  position: relative;
  width: min(100%, 820px);
  margin: 0 0 7%;
  padding: 8px;
  border: 1px solid rgb(201 185 138 / 70%);
  border-radius: 26px;
  background: rgb(255 255 255 / 8%);
  box-shadow: 0 20px 46px rgb(0 0 0 / 35%);
}

.location__card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 19px;
  object-fit: cover;
}

.location__card figcaption {
  margin-top: 12px;
  font-family: var(--script-font);
  font-size: clamp(20px, 3vw, 38px);
  line-height: 1.1;
  text-shadow: 0 2px 8px rgb(0 0 0 / 45%);
}

.location__maps-label {
  margin: 0 0 3%;
  font-family: var(--script-font);
  font-size: clamp(24px, 4vw, 52px);
  line-height: 1;
  text-shadow: 0 2px 10px rgb(0 0 0 / 45%);
}

.location__map {
  display: block;
  width: min(100%, 720px);
  padding: 7px;
  border-radius: 18px;
  background: rgb(255 255 255 / 12%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 32%);
  transition: transform 250ms ease, box-shadow 250ms ease;
}

.location__map:hover,
.location__map:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 24px 50px rgb(0 0 0 / 40%);
}

.location__map img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
  filter: saturate(.85) contrast(1.02);
}

.location .button--outline {
  margin-top: clamp(24px, 4vw, 44px);
}

/* Details */
.details {
  min-height: 1320px;
}

.details__texture,
.rsvp__texture,
.entourage__texture {
  position: absolute;
  z-index: 2;
  top: 60px;
  right: 20px;
  bottom: 60px;
  left: 20px;
  border-radius: 20px;
  /* A pale parchment panel with just a hint of the green texture behind it,
     so the deep-green headings stay readable. */
  background:
    linear-gradient(180deg, rgb(252 251 244 / 95%), rgb(245 244 234 / 96%)),
    url("assets/images/green-texture.jpg") center center / cover no-repeat;
  box-shadow: 0 1px 6px rgb(47 58 38);
  pointer-events: none;
}

.details__content {
  position: relative;
  z-index: 3;
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 150px 20px;
  color: #333;
  text-align: center;
}

.details h2 {
  margin-bottom: 20px;
}

.detail-block {
  margin: 0 auto 24px;
}

.detail-block h3 {
  margin: 0 0 6px;
  color: var(--brown);
  font-family: var(--heading-font);
  font-size: clamp(25px, 6vw, 70px);
  font-weight: 400;
  line-height: 1.1;
}

.detail-block p {
  margin: 4px 0;
  font-size: clamp(15px, 2.5vw, 34px);
  line-height: 1.25;
}

.detail-block__attire {
  width: 50%;
  max-width: 500px;
  max-height: 500px;
  margin: 4px auto 8px;
  object-fit: contain;
}

.dress-grid {
  display: grid;
  width: min(100%, 900px);
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 5vw, 64px);
  margin: 0 auto;
}

.dress-grid p {
  margin: 0;
  padding: 5px 0;
  text-align: right;
}

.dress-grid p + p {
  border-left: 1px solid rgb(62 78 44 / 25%);
  padding-left: clamp(12px, 3vw, 34px);
}

.dress-grid p:last-child {
  text-align: left;
}

.detail-block--attire {
  margin-top: 26px;
}

.detail-block__palette {
  width: min(80%, 750px);
  margin: 12px auto 0;
}


.details__note {
  margin: 24px 0 0;
  font-size: clamp(15px, 2.3vw, 30px);
  line-height: 1.3;
  text-align: left;
}

/* Gallery */
.gallery {
  padding: 5px;
  background: #fff;
}

.gallery__grid {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: 190px;
  gap: 3px;
  overflow: hidden;
  background: #fff;
}

.gallery__item {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: #eee;
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 650ms cubic-bezier(.2, .7, .2, 1), filter 400ms ease;
}

.gallery__item:hover img,
.gallery__item:focus-visible img {
  filter: saturate(1.08);
  transform: scale(1.045);
}

.gallery__item {
  grid-column: span 1;
}

/* 15 photos in four columns leaves one empty cell, so the last one
   stretches across the full row instead. */
@media (min-width: 768px) {
  .gallery__item--15 { grid-column: span 4; }
}


/* Entourage */
.entourage {
  min-height: 1180px;
}

.entourage__content {
  position: relative;
  z-index: 3;
  width: min(100%, 1000px);
  margin: 0 auto;
  padding: 130px 20px 140px;
  color: #2f3a26;
  text-align: center;
}

.entourage h2 {
  margin-bottom: 22px;
  font-size: clamp(30px, 6vw, 82px);
}

.entourage h3,
.rsvp h3 {
  margin: 0 0 4px;
  color: #3e4e2c;
  font-family: var(--button-font);
  font-size: clamp(12px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.entourage p {
  margin: 0;
  font-size: clamp(14px, 1.8vw, 26px);
  line-height: 1.28;
}

.role-block {
  margin: 0 auto 10px;
}

.entourage__subheading {
  margin-top: 26px !important;
  margin-bottom: 10px !important;
  font-family: var(--button-font) !important;
  font-size: clamp(13px, 1.5vw, 19px) !important;
  letter-spacing: .18em;
  color: #3e4e2c;
  text-transform: uppercase;
}

.sponsor-columns,
.role-columns {
  display: grid;
  width: min(100%, 850px);
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 auto 10px;
}

.sponsor-columns p {
  text-align: right;
}

.sponsor-columns p:last-child {
  text-align: left;
}

.role-columns {
  gap: 40px;
}

.role-columns .role-block:first-child {
  text-align: right;
}

.role-columns .role-block:last-child {
  text-align: left;
}

/* Wishes */
.wishes {
  position: relative;
  isolation: isolate;
  min-height: 650px;
  overflow: hidden;
  color: #fff;
  background: url("assets/images/location-forest.jpg") center center / cover no-repeat;
}

.wishes__background {
  position: absolute;
  z-index: -3;
  inset: 0;
  background: inherit;
}

.wishes__frame {
  position: absolute;
  z-index: -1;
  top: 60px;
  right: 20px;
  bottom: 60px;
  left: 20px;
  border-radius: 20px;
  background: rgb(0 0 0 / 40%);
  box-shadow: 0 1px 4px #777;
}

.wishes__content {
  display: grid;
  min-height: 650px;
  place-items: center;
  padding: 60px 20px;
}

.wishes__scroll {
  width: min(100%, 920px);
  height: 450px;
  padding: 15px 18px;
  overflow: auto;
  text-align: center;
  scrollbar-color: #b9c48a transparent;
  scrollbar-width: thin;
}

.wishes__scroll::-webkit-scrollbar {
  width: 6px;
}

.wishes__scroll::-webkit-scrollbar-thumb {
  border-radius: 8px;
  background: #b9c48a;
}

.wish {
  padding: 0 0 15px;
}

.wish p {
  margin: 0 0 7px;
  white-space: pre-line;
  font-size: clamp(16px, 4.5vw, 30px);
  line-height: 1.22;
}

.wish strong {
  font-family: var(--heading-font);
  font-size: clamp(14px, 3vw, 23px);
  font-weight: 400;
}

.wish + .wish {
  padding-top: 15px;
  border-top: 1px solid rgb(255 255 255 / 55%);
}

/* Colour motif swatches (replaces the original palette.png) */
.motif-colors {
  display: flex;
  width: min(100%, 720px);
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 34px);
  margin: 16px auto 0;
}

.motif-colors li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  list-style: none;
}

.motif-colors i {
  display: block;
  width: clamp(46px, 7vw, 86px);
  aspect-ratio: 1;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
}

.motif-colors span {
  font-family: var(--button-font);
  font-size: clamp(9px, 2.4vw, 13px);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.motif-colors li:nth-child(1) i { background: #2f3a26; }
.motif-colors li:nth-child(2) i { background: #3e4e2c; }
.motif-colors li:nth-child(3) i { background: #959864; }
.motif-colors li:nth-child(4) i { background: #4b5e05; }

/* Wishes: empty state + live/pending tags */
.wishes__empty {
  margin: 0;
  padding: 30px 10px;
  font-family: var(--script-font);
  font-size: clamp(20px, 5vw, 34px);
  line-height: 1.3;
  opacity: .92;
}

.wishes__status {
  display: block;
  margin: 0 auto 14px;
  font-family: var(--button-font);
  font-size: 12px;
  letter-spacing: .05em;
  opacity: .8;
}

.wish[data-pending="true"] {
  opacity: .62;
}

.wish time {
  display: block;
  margin-top: 6px;
  font-family: var(--button-font);
  font-size: 11px;
  letter-spacing: .06em;
  opacity: .75;
  text-transform: uppercase;
}

/* Personalised invitation bits */
.welcome__tag {
  margin: 0 0 10px;
  padding: 5px 14px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 999px;
  font-family: var(--button-font);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.welcome__seats b {
  font-weight: 700;
}

.rsvp__seats-note {
  margin: -6px 0 14px;
  padding: 9px 12px;
  border-left: 4px solid var(--amber);
  border-radius: 0 6px 6px 0;
  background: rgb(149 152 100 / 18%);
  font-family: var(--button-font);
  font-size: clamp(12px, 2.6vw, 15px);
  line-height: 1.4;
}

.rsvp__guest {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(100%, 560px);
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px dashed var(--amber);
  border-radius: 8px;
  background: rgb(149 152 100 / 14%);
  font-family: var(--button-font);
  font-size: clamp(12px, 1.6vw, 15px);
}

.rsvp__guest[hidden] {
  display: none;
}

.rsvp__guest strong {
  font-weight: 700;
}

/* Setup / configuration notice shown while Supabase is not connected yet */
.setup-note {
  width: min(100%, 560px);
  margin: 0 auto 18px;
  padding: 12px 14px;
  border: 1px solid var(--amber);
  border-radius: 8px;
  background: rgb(201 185 138 / 22%);
  font-family: var(--button-font);
  font-size: 12px;
  line-height: 1.5;
}

.setup-note[hidden] { display: none; }

.setup-note code {
  font-size: 11px;
}



/* RSVP */
.rsvp {
  min-height: 900px;
}

.rsvp__content {
  position: relative;
  z-index: 3;
  width: min(100%, 860px);
  margin: 0 auto;
  padding: 120px 20px 180px;
  color: #333;
}

.rsvp h2 {
  margin-bottom: 16px;
  font-size: clamp(30px, 6vw, 82px);
  text-align: center;
}

.rsvp__intro {
  margin: 0 0 22px;
  font-size: clamp(15px, 1.9vw, 25px);
  line-height: 1.45;
}

.rsvp form {
  width: min(100%, 560px);
}

.rsvp label {
  display: block;
  margin: 16px 0 6px;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2;
}

.rsvp input,
.rsvp select,
.rsvp textarea {
  display: block;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #bbb;
  border-radius: 5px;
  color: #333;
  background: rgb(255 255 255 / 88%);
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.rsvp textarea {
  min-height: 125px;
  resize: vertical;
}

.rsvp input:disabled,
.rsvp select:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.button--submit {
  width: 100%;
  min-height: 50px;
  margin-top: 10px;
  border-radius: 0;
  background: #cfd2c2;
}

.button--submit:not(:disabled) {
  background: var(--brown);
  color: #fff;
}

.form-message {
  display: none;
  margin: 10px 0 0;
  padding: 10px;
  color: #fff;
  background: #4c5c3a;
}

.form-message.is-visible {
  display: block;
}

.form-message.is-error {
  background: #8c3a2a;
}

/* Closing */
.closing {
  position: relative;
  isolation: isolate;
  display: grid;
  min-height: 735px;
  overflow: hidden;
  place-items: center;
  color: #fff;
  background: #3a2a1e;
}

.closing__background,
.closing__shade {
  position: absolute;
  inset: 0;
}

.closing__background {
  z-index: -3;
  background: url("assets/images/closing-photo.jpg") center center / cover no-repeat;
}

.closing__shade {
  z-index: -2;
  background:
    radial-gradient(ellipse at 50% 50%, rgb(20 32 16 / 62%) 0%, rgb(20 32 16 / 34%) 55%, transparent 78%),
    linear-gradient(180deg, rgb(32 48 24 / 50%), rgb(20 32 16 / 62%));
}

.closing__content {
  width: min(100%, 880px);
  padding: 80px 20px;
  text-align: center;
  text-shadow: 0 2px 14px rgb(0 0 0 / 70%), 0 1px 3px rgb(0 0 0 / 50%);
}

.closing__content p {
  margin: 0 0 26px;
  font-size: clamp(17px, 2.4vw, 32px);
  line-height: 1.45;
}

.closing__content span {
  display: block;
  margin-bottom: 4px;
  font-size: clamp(16px, 2vw, 26px);
}

.closing__content h2 {
  margin: 0;
  font-family: var(--cover-font);
  font-size: clamp(27px, 7vw, 110px);
  font-weight: 400;
  line-height: 1;
}

/* Footer and music */
.site-footer {
  display: flex;
  min-height: 130px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 24px 20px;
  color: #eef0e6;
  background: #2f3a26;
  font-family: var(--button-font);
  font-size: 12px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-footer img {
  width: auto;
  height: 18px;
}

.site-footer a:hover {
  text-decoration: underline;
}

.music-toggle {
  position: fixed;
  right: 27px;
  bottom: max(95px, calc(75px + env(safe-area-inset-bottom)));
  z-index: 1200;
  display: grid;
  width: 42px;
  height: 42px;
  padding: 3px;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  place-items: center;
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 2px 8px rgb(0 0 0 / 28%);
  transition: transform 180ms ease;
}

/* stays out of the way until a track is configured in js/config.js */
.music-toggle[hidden] {
  display: none;
}

.music-toggle:hover,
.music-toggle:focus-visible {
  transform: scale(1.08);
}

.music-toggle img {
  width: 35px;
  height: 35px;
}

.music-toggle__pause {
  position: absolute;
  display: none;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
}

.music-toggle.is-playing .music-toggle__pause {
  display: block;
}

/* ==========================================================================
   Drifting blossoms
   --------------------------------------------------------------------------
   A field of petals that falls, sways and spins continuously behind the
   content. Petals are created by script.js (see buildPetals) so the count
   can follow the screen size, and each one is given random --left, --size,
   --duration, --delay and --spin values. The keyframes below then run the
   whole drift from those custom properties.
   ========================================================================== */
.petal-field {
  position: fixed;
  z-index: 1100;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.petal-field i {
  position: absolute;
  top: -12vh;
  left: var(--left, 50%);
  width: var(--size, 7px);
  height: calc(var(--size, 7px) * 1.7);
  border-radius: 78% 22% 68% 32% / 62% 58% 42% 38%;
  background: var(--tint, #b9c48a);
  box-shadow: inset 0 0 3px rgb(255 255 255 / 35%);
  opacity: 0;
  will-change: transform, opacity;
  animation:
    petal-fall var(--duration, 14s) linear var(--delay, 0s) infinite,
    petal-wobble calc(var(--duration, 14s) / 3) ease-in-out var(--delay, 0s) infinite;
}

/* Three tints so the field does not read as one flat colour */
.petal-field i:nth-child(3n) { --tint: #cdd4a6; }
.petal-field i:nth-child(3n + 1) { --tint: #9aa86a; }
.petal-field i:nth-child(5n) { --tint: #e6e0c4; }

@keyframes petal-fall {
  0% {
    opacity: 0;
    transform: translate3d(0, -12vh, 0) rotate(0deg);
  }
  8% { opacity: var(--alpha, .55); }
  90% { opacity: var(--alpha, .55); }
  100% {
    opacity: 0;
    transform: translate3d(var(--drift, 40px), 112vh, 0) rotate(var(--spin, 360deg));
  }
}

/* A side-to-side sway layered on top of the fall */
@keyframes petal-wobble {
  0%, 100% { margin-left: 0; }
  50% { margin-left: var(--sway, 22px); }
}

@media (prefers-reduced-motion: reduce) {
  .petal-field { display: none; }
}

/* Gallery lightbox */
.lightbox {
  position: fixed;
  z-index: 4000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 92%);
  opacity: 0;
  transition: opacity 320ms ease;
}

/* `display: grid` above would otherwise beat the `hidden` attribute and
   leave an invisible full-screen overlay swallowing every click. */
.lightbox[hidden] {
  display: none;
}

.lightbox.is-open {
  opacity: 1;
}

/* The picture grows into place instead of snapping on */
.lightbox > img {
  max-width: min(92vw, 1100px);
  max-height: 84vh;
  object-fit: contain;
  opacity: 0;
  transform: scale(.88);
  transition: opacity 380ms ease, transform 480ms cubic-bezier(.2, .8, .25, 1);
}

.lightbox.is-open > img {
  opacity: 1;
  transform: scale(1);
}

.lightbox__close,
.lightbox__nav {
  opacity: 0;
  transition: opacity 300ms ease 120ms, background-color 200ms ease;
}

.lightbox.is-open .lightbox__close,
.lightbox.is-open .lightbox__nav {
  opacity: 1;
}

.lightbox p {
  opacity: 0;
  transition: opacity 300ms ease 200ms;
}

.lightbox.is-open p {
  opacity: 1;
}

.lightbox > img {
  max-width: min(92vw, 1100px);
  max-height: 84vh;
  object-fit: contain;
}

.lightbox__close {
  position: fixed;
  top: 15px;
  right: 22px;
  color: #fff;
  font-size: 42px;
}

.lightbox__nav {
  position: fixed;
  top: 50%;
  display: grid;
  width: 48px;
  height: 64px;
  place-items: center;
  border: 0;
  color: #fff;
  background: rgb(0 0 0 / 35%);
  font-family: Arial, sans-serif;
  font-size: 48px;
  line-height: 1;
  transform: translateY(-50%);
}

.lightbox__nav--prev { left: 12px; }
.lightbox__nav--next { right: 12px; }

.lightbox p {
  position: fixed;
  bottom: 15px;
  left: 0;
  width: 100%;
  margin: 0;
  color: #fff;
  font-family: var(--button-font);
  font-size: 13px;
  text-align: center;
}

/* ==========================================================================
   Seamless scrolling — matching the Joshua & Alpha invitation
   --------------------------------------------------------------------------
   That page achieves its feel with three things, and all three are here now:
     1. `scroll-behavior: smooth` on <html>            (set at the top)
     2. the big photo backgrounds are PINNED with
        `background-attachment: fixed`, so the photo stays still on screen
        while its content scrolls past — that is the parallax drift
     3. every photo fades at its top and bottom edge into one shared tone
        (--seam), so no two backgrounds ever butt together with a hard line
   The fade is what the Joshua page does not have, so the pinned photos
   arrive and leave softly instead of snapping.
   ========================================================================== */

:root {
  --seam: #2f3a26;          /* shared tone every background melts into   */
  --seam-fade: 11%;         /* how much of each edge is faded            */
}

/* ---- shared base tone ---- */
.hero,
.event,
.wishes,
.closing,
.gallery,
.location,
.framed-section {
  background-color: var(--seam);
}

/* ---- framed sections: story, details, entourage, rsvp ----
   The story is the exception: it uses the couple photograph, everything
   else shares the green texture. Both keep the same soft edges. */
.framed-section {
  background-image: none;
}

.framed-section::before {
  content: "";
  position: absolute;
  z-index: -3;
  inset: 0;
  background: url("assets/images/green-texture.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
}

.story::before {
  background: url("assets/images/story-couple.jpg") center 42% / cover no-repeat;
}

/* ---- hero ---- */
.hero {
  background-image: none;
}

.hero__background {
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 74%, transparent 100%);
}

/* ---- event and wishes (they share the forest photo) ---- */
.event,
.wishes {
  background-image: none;
}

.event__background,
.wishes__background {
  background: url("assets/images/location-forest.jpg") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
}

/* ---- location ---- */
.location {
  background-image: none;
}

.location__background {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 calc(100% - var(--seam-fade)), transparent 100%);
}

/* ---- gallery: the white photo wall melts into the green panels ----
   The whole section is masked rather than just its background, so the photo
   grid feathers into the green instead of butting against it. */
.gallery {
  position: relative;
  isolation: isolate;
  background: #fff;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* ---- closing ---- */
.closing {
  background-image: none;
}

.closing__background {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--seam-fade), #000 88%, transparent 100%);
}

/* ---- the parallax: pin the full-bleed photos on wide screens ----
   This is the part that gives the Joshua page its drifting feel. It is
   limited to desktop because mobile browsers ignore it (and iOS scrolls
   jankily with it), so phones simply get the soft fades above. */
@media (min-width: 768px) {
  .event__background,
  .wishes__background,
  .location__background,
  .closing__background {
    background-attachment: fixed;
  }
}

/* ==========================================================================
   Entrance animation for the welcome screen
   --------------------------------------------------------------------------
   The welcome screen is on screen before anyone can scroll, so it uses plain
   timed keyframes rather than the scroll engine. Each part carries a
   --in-delay so the screen builds up in the same order the reference does.
   ========================================================================== */
.anim-in {
  opacity: 0;
  animation: welcome-in 1100ms cubic-bezier(.2, .75, .25, 1) forwards;
  animation-delay: var(--in-delay, 0ms);
}

@keyframes welcome-in {
  0% { opacity: 0; transform: translate3d(0, 26px, 0) scale(.94); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* The envelope settles in with a touch more weight than the text */
.welcome__envelope.anim-in {
  animation-name: welcome-envelope;
  animation-duration: 1400ms;
}

@keyframes welcome-envelope {
  0% { opacity: 0; transform: scale(.8) rotate(-3deg); }
  55% { opacity: 1; transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes seal-breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

/* ==========================================================================
   Loading bar
   --------------------------------------------------------------------------
   A hairline that fills while the photos and fonts download, then slides
   away. script.js drives the width with --load and --loaded.
   ========================================================================== */
.page-loader {
  position: fixed;
  z-index: 5000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: rgb(255 255 255 / 12%);
  opacity: 1;
  transition: opacity 400ms ease, visibility 400ms ease;
}

.page-loader span {
  display: block;
  width: var(--load, 0%);
  height: 100%;
  background: linear-gradient(90deg, #959864, #d8c88f, #959864);
  box-shadow: 0 0 10px rgb(201 185 138 / 70%);
  transition: width 260ms ease;
}

.page-loader.is-done {
  opacity: 0;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .petal-field { display: none; }
}

/* The sections used to be pinned with `background-attachment: fixed` on wide
   screens. That made the photos stay still while the framed sections scrolled
   past them, so the background appeared to jump between sections. Pinning is
   gone — the soft edges defined further up now blend the backgrounds instead. */

/* Tablet */
@media (max-width: 900px) {
  .story__content { padding-top: 150px; }
  .event__content { min-height: 915px; }
  .details__content { padding-top: 140px; }
  .entourage__content { padding-top: 125px; }
  .rsvp__content { padding-top: 115px; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 15px; }

  .welcome__content {
    width: min(96vw, 520px);
  }

  .welcome__script { font-size: clamp(21px, 5.8vw, 32px); }
  .welcome__envelope { width: min(90vw, 380px); }
  .welcome__tap { font-size: clamp(18px, 5vw, 26px); margin-top: 4px; }
  .welcome__seats { margin-bottom: 10px; }
  .welcome h1 { width: 100%; min-width: 0; max-width: 100%; font-size: clamp(23px, 6.6vw, 32px); overflow-wrap: anywhere; word-break: break-word; }

  .hero__content { top: 58px; right: 6px; left: 6px; }
  .hero__eyebrow { font-size: clamp(18px, 5.8vw, 25px); white-space: nowrap; }
  .hero__names { margin-top: 7px; font-size: clamp(42px, 11vw, 58px); }
  .hero__date { margin-top: 4px; font-size: clamp(20px, 5.8vw, 27px); white-space: nowrap; }
  .hero__scroll { bottom: 22px; font-size: 13px; }

  .section-ornament--top { top: -1px; }
  .section-ornament--bottom { bottom: -1px; }
  .section-flower--top-left,
  .section-flower--bottom-right { width: 72%; }
  .section-flower--top-left-small,
  .section-flower--bottom-right-small { width: 46%; }

  .story { min-height: 0; }
  .story__frame { top: 42px; right: 12px; bottom: 42px; left: 12px; border-width: 3px; border-radius: 130px; }
  .story__content { padding: 132px 15px 120px; }
  .story__intro { margin-bottom: 19px; font-size: clamp(15px, 4.2vw, 19px); }
  .person-card h3 { font-size: clamp(26px, 8.2vw, 38px); }
  .person-card p { font-size: clamp(14px, 3.9vw, 17px); }
  .story__amp { margin: 10px 0; font-size: 30px; }

  .event { min-height: 915px; }
  .event__frame--outer { top: 28px; right: 8px; bottom: 28px; left: 8px; border-radius: 150px; }
  .event__frame--inner { top: 38px; right: 16px; bottom: 38px; left: 16px; border-radius: 150px; }
  .event__content { min-height: 0; padding: 200px 15px; }
  .event h2 { font-size: clamp(29px, 8.5vw, 42px); }
  .event__datetime { margin-top: 9px; font-size: clamp(18px, 5.2vw, 25px); }
  .event__divider { width: 170px; }
  .button--outline { min-width: 190px; min-height: 44px; font-size: 13px; }
  .countdown { gap: 7px; margin-top: 28px; }
  .countdown > div { min-height: 70px; padding-inline: 2px; }
  .countdown strong { font-size: 25px; }
  .countdown span { margin-top: -2px; font-size: 10px; }
  .countdown__label { font-size: 13px; }
  .location { min-height: 0; }
  .location__content { width: calc(100% - 30px); padding: 90px 0 80px; }
  .location__venue { font-size: 16px; }
  .location__card { padding: 6px; border-radius: 20px; }
  .location__card img { border-radius: 15px; }
  .location__maps-label { font-size: 34px; }
  .location__map { padding: 5px; }

  .details { min-height: 0; }
  .details__texture,
  .rsvp__texture,
  .entourage__texture { top: 42px; right: 12px; bottom: 42px; left: 12px; }
  .details__content { padding: 150px 15px; }
  .details h2 { margin-bottom: 16px; font-size: clamp(29px, 8.5vw, 42px); }
  .detail-block { margin-bottom: 17px; }
  .detail-block h3 { font-size: clamp(23px, 6.6vw, 32px); }
  .detail-block p { font-size: 16px; }
  .detail-block__attire { width: 50%; max-height: none; }
  .dress-grid { gap: 8px; }
  .dress-grid p { font-size: clamp(14px, 3.8vw, 18px); }
  .detail-block--attire { margin-top: 19px; }
  .detail-block__palette { width: 80%; }

  .details__note { margin-top: 15px; font-size: 15px; }

  .gallery { padding: 5px; }
  .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 146px; gap: 2px; }
  .gallery__item--1,
  .gallery__item--5,
  .gallery__item--12,
  .gallery__item--15 { grid-column: span 2; }


  .entourage__content { padding: 120px 15px; }
  .entourage h2 { margin-bottom: 16px; font-size: clamp(29px, 8.5vw, 42px); }
  .entourage p { font-size: 17px; }
  .entourage__subheading { font-size: 14px !important; }
  .sponsor-columns,
  .role-columns { gap: 10px; }
  .role-block { margin-bottom: 7px; }

  .wishes { min-height: 650px; }
  .wishes__frame { top: 40px; right: 12px; bottom: 40px; left: 12px; }
  .wishes__content { min-height: 650px; padding: 40px 12px; }
  .wishes__scroll { height: 530px; padding: 12px 10px; }
  .wish p { font-size: clamp(16px, 4.4vw, 20px); }
  .wish strong { font-size: 14px; }


  .rsvp__content { padding: 110px 15px 130px; }
  .rsvp h2 { font-size: clamp(29px, 8.5vw, 42px); }
  .rsvp__intro { font-size: 15px; }
  .rsvp label { font-size: 15px; }
  .rsvp input,
  .rsvp select,
  .rsvp textarea { font-size: 16px; }

  .closing { min-height: 734px; }
  .closing__content { padding: 60px 20px; }
  .closing__content p { font-size: clamp(16px, 4.2vw, 19px); }
  .closing__content span { font-size: 17px; }
  .closing__content h2 { font-size: 7vw; }

  .site-footer { min-height: 130px; font-size: 11px; }
  .music-toggle { right: 18px; bottom: max(80px, calc(65px + env(safe-area-inset-bottom))); width: 40px; height: 40px; }
  .music-toggle img { width: 34px; height: 34px; }
}

@media (max-width: 380px) {
  .hero__eyebrow { font-size: 17px; }
  .hero__names { font-size: 40px; }
  .hero__date { font-size: 20px; }
  .story__intro { font-size: 14px; }
  .person-card h3 { font-size: 27px; }
  .person-card p { font-size: 13px; }
  .event h2,
  .details h2,
  .entourage h2,
  .rsvp h2 { font-size: 28px; }
  .countdown { gap: 3px; }
  .countdown > div { min-height: 64px; }
  .countdown strong { font-size: 22px; }
  .countdown span { font-size: 9px; }
  .entourage p { font-size: 14px; }
  .wish p { font-size: 15px; }
}

/* The reference keeps the original 12-column justified mosaic on phones
   and switches to four equal columns when the desktop breakpoint is reached.
   The span map below is sized for the 15 Trevor & Marijomich photos. */
@media (max-width: 767px) {
  .gallery__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: 190px;
    gap: 4px;
  }

  .gallery__item { grid-column: span 3; }
  .gallery__item--1,
  .gallery__item--5,
  .gallery__item--12 { grid-column: span 8; }
  .gallery__item--2,
  .gallery__item--6 { grid-column: span 4; }
  .gallery__item--3,
  .gallery__item--4,
  .gallery__item--7,
  .gallery__item--8,
  .gallery__item--13,
  .gallery__item--14 { grid-column: span 6; }
  .gallery__item--9,
  .gallery__item--10,
  .gallery__item--11 { grid-column: span 4; }
  .gallery__item--15 { grid-column: span 12; }
}

/* Invitation admin */
.admin-page {
  min-height: 100vh;
  color: #333;
  background: #eef0e6;
}

.admin-shell {
  width: min(100% - 32px, 1180px);
  margin: 0 auto;
  padding: 38px 0 70px;
}

.admin-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.admin-kicker {
  margin: 0 0 4px;
  color: #8b9058;
  font-family: var(--body-font);
  font-size: 15px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.admin-header h1 {
  margin: 0;
  color: #3e4e2c;
  font-family: var(--heading-font);
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 400;
  line-height: 1;
}

.admin-preview-link,
.admin-text-button {
  padding: 0;
  border: 0;
  color: #3e4e2c;
  background: transparent;
  font-family: var(--button-font);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.admin-text-button:hover,
.admin-preview-link:hover {
  text-decoration-thickness: 2px;
}

.admin-card {
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid #dcdfc9;
  border-radius: 18px;
  background: rgb(252 253 247 / 94%);
  box-shadow: 0 12px 32px rgb(47 58 38 / 12%);
}

.admin-card__heading {
  margin-bottom: 24px;
}

.admin-card__heading--row,
.admin-list-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-card h2,
.admin-list-heading h3 {
  margin: 0 0 6px;
  color: #3e4e2c;
  font-family: var(--heading-font);
  font-size: clamp(24px, 3.4vw, 38px);
  font-weight: 400;
}

.admin-card p {
  margin: 0;
  color: #5c6a4e;
  line-height: 1.35;
}

.admin-form {
  width: min(100%, 430px);
}

.admin-form label,
.admin-create-form label {
  display: block;
  margin: 14px 0 6px;
  color: #4a5540;
  font-size: 15px;
}

.admin-form input,
.admin-create-form input {
  display: block;
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #c9cfb2;
  border-radius: 7px;
  color: #333;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

.admin-button {
  min-width: 150px;
  margin-top: 20px;
  color: #fff;
  background: #3e4e2c;
}

.admin-message {
  margin: 16px 0 0 !important;
  padding: 10px 12px;
  border-radius: 6px;
  color: #285d34 !important;
  background: #e6f4e7;
  font-family: Arial, sans-serif;
  font-size: 13px;
}

.admin-message--error {
  color: #8a1f1f !important;
  background: #fbe7e7;
}

.admin-create-form {
  max-width: 760px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e2e5d2;
}

.admin-create-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.admin-create-row input {
  flex: 1;
}

.admin-create-row .admin-button {
  flex: 0 0 auto;
  margin-top: 0;
  white-space: nowrap;
}

.admin-list-heading {
  align-items: center;
  margin: 30px 0 12px;
}

.admin-list-heading h3 {
  margin: 0;
  font-size: 24px;
}

.admin-table-wrap {
  overflow-x: auto;
  border: 1px solid #dcdfc9;
  border-radius: 10px;
  background: #fff;
}

.admin-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e6e8d8;
  text-align: left;
  vertical-align: middle;
}

.admin-table th {
  color: #3e4e2c;
  background: #f1f3e6;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table a {
  color: #3e4e2c;
  word-break: break-all;
}

.admin-row--inactive {
  opacity: .55;
}

.admin-status {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.admin-status--active {
  color: #285d34;
  background: #e6f4e7;
}

.admin-status--inactive {
  color: #777;
  background: #eee;
}

.admin-small-button {
  margin: 0 5px 0 0;
  padding: 6px 9px;
  border: 1px solid #c2c9ab;
  border-radius: 5px;
  color: #4a5540;
  background: #fff;
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.admin-small-button--danger {
  color: #8a1f1f;
  border-color: #dfb5b5;
}

.admin-empty {
  padding: 24px;
  color: #5c6a4e;
  text-align: center;
}

/* ---- Extended admin: seats, tabs, RSVPs, wishes ---- */
.admin-seats {
  width: 110px;
  flex: 0 0 110px;
}

.admin-hint {
  margin: 8px 0 0 !important;
  color: #5c6a4e !important;
  font-family: var(--button-font);
  font-size: 12px;
  line-height: 1.5;
}

.admin-hint code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #e7ead6;
  font-size: 11px;
}

.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border-bottom: 1px solid #dcdfc9;
  list-style: none;
}

.admin-tabs button {
  margin-bottom: -1px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 3px solid transparent;
  color: #5c6a4e;
  background: transparent;
  font-family: var(--button-font);
  font-size: 14px;
  cursor: pointer;
}

.admin-tabs button[aria-selected="true"] {
  border-bottom-color: #3e4e2c;
  color: #3e4e2c;
  font-weight: 700;
}

.admin-panel[hidden] {
  display: none;
}

.admin-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.admin-stats li {
  flex: 1 1 120px;
  padding: 12px 14px;
  border: 1px solid #dcdfc9;
  border-radius: 10px;
  background: #f7f8ef;
  text-align: center;
}

.admin-stats b {
  display: block;
  color: #3e4e2c;
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 400;
  line-height: 1.1;
}

.admin-stats span {
  color: #5c6a4e;
  font-family: var(--button-font);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
}

.admin-wish {
  padding: 14px 0;
  border-bottom: 1px solid #e6e8d8;
}

.admin-wish p {
  margin: 0 0 6px;
  color: #2f3a26;
  font-size: 15px;
  white-space: pre-line;
}

.admin-wish footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: #5c6a4e;
  font-family: var(--button-font);
  font-size: 12px;
}

.admin-wish footer strong {
  color: #3e4e2c;
}

.admin-loading {
  padding: 18px 0;
  color: #5c6a4e;
  font-family: var(--button-font);
  font-size: 13px;
}

.admin-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  color: #6b5320;
  background: #f2e6c4;
  font-family: var(--button-font);
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .admin-shell {
    width: min(100% - 24px, 1180px);
    padding-top: 24px;
  }

  .admin-header,
  .admin-card__heading--row,
  .admin-list-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-create-row {
    flex-direction: column;
  }

  .admin-create-row .admin-button {
    width: 100%;
  }

  .admin-seats {
    width: 100%;
    flex: 0 0 auto;
  }

  .admin-tabs {
    gap: 0;
  }

  .admin-tabs button {
    flex: 1;
    padding: 10px 6px;
    font-size: 13px;
  }
}