:root {
  --wine: #711827;
  --wine-dark: #4e0e19;
  --gold: #b5863c;
  --gold-light: #d8b46a;
  --ink: #34251f;
  --muted: #75655e;
  --paper: #fbf6ed;
  --floral: url("../images/baroque-damask.jpg");
  --serif: "Lora", Georgia, serif;
  --sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-italic-variable.ttf") format("truetype");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #eadfd0;
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, a { -webkit-tap-highlight-color: transparent; }

body.invite-locked { overflow:hidden; }
.invitation:focus { outline:none; }
.invitation-gate[hidden] { display:none; }
.invitation-gate {
  position:fixed;
  inset:0;
  z-index:100;
  display:grid;
  place-items:center;
  min-height:100vh;
  min-height:100svh;
  padding:max(28px, env(safe-area-inset-top)) 24px max(28px, env(safe-area-inset-bottom));
  overflow:hidden;
  color:var(--ink);
  background-color:var(--paper);
  background-image:linear-gradient(rgba(251,246,237,.72),rgba(251,246,237,.82)),var(--floral);
  background-position:center;
  background-size:auto, min(100vw,780px) auto;
  text-align:center;
  isolation:isolate;
  clip-path:circle(150% at 50% 53%);
}
.invitation-gate::before {
  content:"";
  position:absolute;
  inset:20px;
  z-index:-1;
  border:1px solid rgba(181,134,60,.62);
  box-shadow:inset 0 0 0 6px rgba(251,246,237,.45);
}
.gate-glow {
  position:absolute;
  inset:50% auto auto 50%;
  z-index:-1;
  width:min(86vw,560px);
  aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,253,247,.99) 20%,rgba(251,246,237,.92) 55%,transparent 74%);
  transform:translate(-50%,-50%);
}
.gate-content { width:min(100%,560px); animation:gate-content-in 1s cubic-bezier(.2,.72,.25,1) both; }
.gate-eyebrow { margin:0 0 22px; color:var(--gold); font:700 .7rem/1.4 var(--sans); letter-spacing:.32em; text-transform:uppercase; }
.gate-monogram {
  display:grid;
  place-items:center;
  width:86px;
  height:86px;
  margin:0 auto 24px;
  border:1px solid var(--gold-light);
  border-radius:50%;
  color:var(--wine);
  background:rgba(255,255,255,.52);
  font-size:1.9rem;
  font-style:italic;
  box-shadow:0 0 0 5px rgba(255,255,255,.46),0 12px 32px rgba(93,25,31,.1);
}
.invitation-gate h1 { margin:0; color:var(--wine); font-size:clamp(2.7rem,9vw,4.5rem); font-weight:400; line-height:.96; letter-spacing:-.025em; }
.gate-couple { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 6px; margin:25px auto 0; color:var(--wine-dark); font-size:clamp(.92rem,3.6vw,1.15rem); line-height:1.7; letter-spacing:.06em; }
.gate-couple span { white-space:nowrap; }
.gate-couple i { margin:0 6px; color:var(--gold); font-weight:400; }
.open-invitation {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:50px;
  margin-top:30px;
  padding:0 20px 0 25px;
  border:1px solid var(--wine);
  border-radius:999px;
  color:#fffaf1;
  background:var(--wine);
  cursor:pointer;
  font:700 .72rem/1 var(--sans);
  letter-spacing:.15em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(113,24,39,.22);
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
  animation:button-pulse 2.6s ease-in-out infinite;
}
.open-invitation:focus-visible { outline:3px solid rgba(181,134,60,.38); outline-offset:4px; }
.button-arrow { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; color:var(--wine); background:#fffaf1; font-size:.9rem; }
.gate-date { margin:21px 0 0; color:var(--muted); font:.72rem/1.5 var(--sans); letter-spacing:.22em; }
.gate-burst { position:absolute; left:50%; top:53%; z-index:3; width:1px; height:1px; pointer-events:none; }
.gate-burst::before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(181,134,60,.8);
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.1);
}
.gate-petal {
  position:absolute;
  left:-4px;
  top:-7px;
  width:8px;
  height:14px;
  border-radius:85% 15% 75% 25%;
  background:linear-gradient(145deg,#a44658,#701525);
  opacity:0;
  transform:rotate(var(--rotation));
}
.invitation-gate.is-opening { pointer-events:none; animation:gate-open 1.25s cubic-bezier(.72,0,.22,1) forwards; }
.invitation-gate.is-opening .gate-content { animation:gate-content-out .45s ease forwards; }
.invitation-gate.is-opening .gate-burst::before { animation:ring-burst .9s ease-out forwards; }
.invitation-gate.is-opening .gate-petal { animation:petal-burst .92s cubic-bezier(.16,.74,.3,1) var(--delay) forwards; }
.invite-locked .invitation { transform:scale(.985); filter:blur(2px); }
.invitation { transition:transform .9s cubic-bezier(.2,.72,.25,1),filter .7s ease; }

@keyframes gate-content-in { from { opacity:0; transform:translateY(20px) scale(.98); } to { opacity:1; transform:none; } }
@keyframes gate-content-out { to { opacity:0; transform:scale(.92); } }
@keyframes gate-open { 0%,24% { clip-path:circle(150% at 50% 53%); opacity:1; } 99% { clip-path:circle(0 at 50% 53%); opacity:1; } 100% { clip-path:circle(0 at 50% 53%); opacity:0; } }
@keyframes ring-burst { 0% { opacity:.9; transform:translate(-50%,-50%) scale(.1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(20); } }
@keyframes petal-burst { 0% { opacity:0; transform:translate(0,0) rotate(var(--rotation)) scale(.7); } 18% { opacity:1; } 100% { opacity:0; transform:translate(var(--x),var(--y)) rotate(calc(var(--rotation) + 190deg)) scale(1.15); } }
@keyframes button-pulse { 0%,100% { box-shadow:0 12px 28px rgba(113,24,39,.2),0 0 0 0 rgba(181,134,60,.28); } 55% { box-shadow:0 12px 28px rgba(113,24,39,.25),0 0 0 10px rgba(181,134,60,0); } }

.invitation {
  position: relative;
  width: min(100%, 780px);
  min-height: 100vh;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: visible;
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(251,246,237,.88), rgba(251,246,237,.88)),
    var(--floral);
  background-size: auto, 100% auto;
  background-attachment: scroll;
  box-shadow: 0 0 70px rgba(57, 25, 20, .18);
}

.hero {
  position: relative;
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 72px 32px 64px;
  text-align: center;
  isolation: isolate;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 21px;
  z-index: -1;
  border: 1px solid rgba(181, 134, 60, .52);
  box-shadow: inset 0 0 0 6px rgba(251, 246, 237, .62);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--floral) center / cover no-repeat;
  transform: scale(1.015);
  animation: floral-breathe 16s ease-in-out infinite alternate;
}
.hero-wash {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: -1;
  width: min(80%, 560px);
  height: 68%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(251,246,237,.99) 40%, rgba(251,246,237,.93) 66%, transparent 100%);
  filter: none;
}
.eyebrow {
  margin: 0 0 20px;
  color: var(--gold);
  font: 600 .72rem/1.4 var(--sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}
.monogram {
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  margin: 0 auto 25px;
  border: 1px solid var(--gold-light);
  border-radius: 50%;
  color: var(--wine);
  font-size: 2.1rem;
  font-style: italic;
  line-height: 1;
  box-shadow: 0 0 0 5px rgba(255,255,255,.52), 0 9px 25px rgba(93, 25, 31, .08);
}
.hero h1 {
  margin: 0;
  color: var(--wine);
  font-size: clamp(2.75rem, 10vw, 5.4rem);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}
.hero .groom {
  margin: 24px 0 6px;
  color: var(--wine-dark);
  font-size: clamp(1.65rem, 6vw, 2.75rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.15;
}
.couple-divider { margin: 10px 0; color: var(--gold); font-size: 1.3rem; font-style: italic; }
.youngest { color: var(--muted); font-size: .88rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-date {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
  margin: 29px auto 0;
  color: var(--ink);
  font-size: .91rem;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.hero-date::before, .hero-date::after { content: ""; width: 42px; height: 1px; background: var(--gold); }
.scroll-cue {
  position: absolute;
  bottom: 35px;
  left: 50%;
  width: 28px;
  height: 42px;
  transform: translateX(-50%);
  border: 1px solid rgba(113,24,39,.42);
  border-radius: 18px;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 4px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--wine);
  animation: drift 1.9s ease-in-out infinite;
}
@keyframes drift { 0%,100% { opacity:.2; transform:translate(-50%,0); } 50% { opacity:1; transform:translate(-50%,12px); } }
@keyframes floral-breathe {
  from { transform: scale(1.015) translate3d(0, 0, 0); }
  to { transform: scale(1.045) translate3d(-.35%, .3%, 0); }
}
@keyframes hero-enter {
  from { opacity:0; transform:translate3d(0, 24px, 0); filter:blur(4px); }
  to { opacity:1; transform:translate3d(0, 0, 0); filter:blur(0); }
}
@keyframes card-enter {
  from { opacity:0; transform:translate3d(0, 24px, 0) scale(.985); }
  to { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
}

.hero > .eyebrow,
.hero > .monogram,
.hero > h1,
.hero > .groom,
.hero > .youngest,
.hero > .couple-divider,
.hero > .hero-date {
  animation: hero-enter .85s cubic-bezier(.2,.72,.25,1) both;
}
.hero > .eyebrow { animation-delay:.08s; }
.hero > .monogram { animation-delay:.18s; }
.hero > h1 { animation-delay:.3s; }
.hero > .groom:nth-child(5) { animation-delay:.42s; }
.hero > .youngest:nth-child(6) { animation-delay:.5s; }
.hero > .couple-divider { animation-delay:.56s; }
.hero > .groom:nth-child(8) { animation-delay:.63s; }
.hero > .youngest:nth-child(9) { animation-delay:.71s; }
.hero > .hero-date { animation-delay:.8s; }

main { padding: 0 24px 72px; }
.section { padding: 78px 8px 30px; text-align: center; }
.ornament { color: var(--gold); font-size: 1.45rem; letter-spacing: .2em; }
.section-label {
  margin: 15px 0 12px;
  color: var(--gold);
  font: 700 .71rem/1.4 var(--sans);
  letter-spacing: .28em;
  text-transform: uppercase;
}
.section h2 {
  margin: 0 0 25px;
  color: var(--wine);
  font-size: clamp(2rem, 7vw, 3rem);
  font-style: italic;
  font-weight: 400;
}
.intro { margin: 0 auto 36px; max-width: 580px; color: var(--muted); font-size: 1.03rem; line-height: 1.9; }

.photo-feature { padding:90px 26px 15px; }
.feature-frame {
  position:relative;
  max-width:520px;
  margin:0 auto;
  background:#fff;
  box-shadow:0 25px 65px rgba(67,34,27,.16);
}
.feature-frame::before {
  content:"";
  position:absolute;
  inset:-11px 11px 11px -11px;
  z-index:-1;
  border:1px solid rgba(181,134,60,.6);
}
.feature-frame img { display:block; width:100%; aspect-ratio:2/3; object-fit:cover; }
.feature-frame figcaption {
  position:absolute;
  inset:auto 0 0;
  padding:72px 24px 25px;
  color:#fff;
  text-align:center;
  background:linear-gradient(transparent, rgba(40,12,16,.78));
}
.photo-kicker { display:block; margin-bottom:6px; font:600 .66rem/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.feature-frame strong { font-size:1.55rem; font-weight:400; letter-spacing:.08em; }
.feature-frame strong i { color:var(--gold-light); font-weight:400; }

.family-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; max-width:650px; margin:0 auto; }
.family-card {
  position: relative;
  margin: 0;
  padding: 39px 25px;
  border: 1px solid rgba(181,134,60,.45);
  background: rgba(255,255,255,.52);
  box-shadow: 0 18px 50px rgba(94, 48, 36, .08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.family-card::before, .family-card::after { content:"◆"; position:absolute; left:50%; color:var(--gold); background:var(--paper); padding:0 10px; transform:translateX(-50%); font-size:.7rem; }
.family-card::before { top:-8px; }
.family-card::after { bottom:-8px; }
.family-side { margin:0 0 24px; color:var(--gold); font:700 .7rem/1.4 var(--sans); letter-spacing:.24em; text-transform:uppercase; }
.parents { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 42px; margin-bottom:25px; }
.parent { min-width: 185px; }
.role { display:block; margin-bottom:4px; color:var(--muted); font-size:.78rem; letter-spacing:.15em; text-transform:uppercase; }
.parent strong { color:var(--wine-dark); font-size:1.22rem; font-weight:400; }
.address { margin:0; color:var(--muted); font-size:.94rem; line-height:1.7; }

.gallery-section h2 { font-size:clamp(1.65rem,5vw,2.35rem); line-height:1.25; }
.photo-gallery {
  display:grid;
  grid-template-columns:1.65fr 1fr;
  grid-template-rows:repeat(2, minmax(0, 1fr));
  gap:12px;
  max-width:650px;
  margin:0 auto;
}
.gallery-item { position:relative; min-height:0; margin:0; overflow:hidden; background:#e8ddd0; }
.gallery-main { grid-row:1 / 3; }
.gallery-item img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.72,.25,1); }
.gallery-main img { aspect-ratio:4/5; }
.gallery-item:not(.gallery-main) img { aspect-ratio:4/3; }

.event-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; max-width:650px; margin:0 auto; }
.event-card {
  position: relative;
  min-height: 330px;
  padding: 33px 20px 28px;
  overflow: hidden;
  border: 1px solid rgba(181,134,60,.5);
  background: rgba(255,255,255,.62);
  box-shadow: 0 18px 45px rgba(94, 48, 36, .08);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.event-card::after { content:""; position:absolute; right:-45px; bottom:-55px; width:130px; height:130px; border:1px solid rgba(181,134,60,.22); border-radius:50%; box-shadow:0 0 0 9px rgba(181,134,60,.05), 0 0 0 19px rgba(181,134,60,.035); }
.event-no { color:var(--gold); font:500 .72rem/1 var(--sans); letter-spacing:.2em; }
.event-card h3 { margin:15px 0 23px; color:var(--wine); font-size:1.5rem; font-style:italic; font-weight:400; }
.time { display:block; color:var(--wine-dark); font-size:2.65rem; line-height:1; }
.date-line { margin:13px 0 0; font-size:1rem; line-height:1.6; }
.lunar { margin:8px 0 21px; color:var(--muted); font-size:.84rem; font-style:italic; line-height:1.55; }
.place { display:inline-flex; align-items:center; gap:7px; padding-top:17px; border-top:1px solid rgba(181,134,60,.35); color:var(--wine-dark); font:600 .75rem/1.5 var(--sans); letter-spacing:.09em; text-transform:uppercase; }

.wide-photo-section { padding:76px 8px 30px; }
.wide-photo { position:relative; max-width:650px; margin:0 auto; overflow:hidden; box-shadow:0 22px 55px rgba(67,34,27,.14); }
.wide-photo img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; transition:transform 1s cubic-bezier(.2,.72,.25,1); }
.wide-photo figcaption { position:absolute; right:22px; bottom:18px; color:#fff; font-size:1.25rem; font-style:italic; text-shadow:0 2px 14px rgba(0,0,0,.55); }

.calendar-box { max-width:650px; margin:18px auto 0; padding:38px 20px; background:var(--wine); color:#fff8ed; }
.calendar-box h2 { color:#fff8ed; margin-bottom:8px; }
.calendar-box .section-label { color:var(--gold-light); }
.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:460px; margin:28px auto 0; }
.count-item { padding:13px 4px; border:1px solid rgba(255,248,237,.28); }
.count-item b { display:block; font-size:1.65rem; font-weight:400; line-height:1.15; }
.count-item span { color:#e8cfb2; font:500 .63rem/1.4 var(--sans); letter-spacing:.12em; text-transform:uppercase; }

.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:29px auto 0; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:12px 18px; border:1px solid var(--gold-light); border-radius:999px; color:#fff8ed; background:transparent; cursor:pointer; font:600 .73rem/1 var(--sans); letter-spacing:.08em; text-decoration:none; text-transform:uppercase; transition:.2s ease; }
.btn:hover { color:var(--wine-dark); background:var(--gold-light); transform:translateY(-2px); }

footer { padding:55px 24px 60px; text-align:center; }
footer .thanks { margin:0 0 10px; color:var(--wine); font-size:1.55rem; font-style:italic; }
footer small { color:var(--muted); font:500 .68rem/1.5 var(--sans); letter-spacing:.14em; text-transform:uppercase; }
.toast { position:fixed; z-index:20; right:18px; bottom:18px; left:18px; max-width:430px; margin:auto; padding:13px 17px; border-radius:10px; color:white; background:var(--wine-dark); box-shadow:0 12px 35px rgba(0,0,0,.2); font:500 .82rem/1.45 var(--sans); text-align:center; opacity:0; transform:translateY(16px); pointer-events:none; transition:.25s ease; }
.toast.show { opacity:1; transform:none; }
.reveal { opacity:1; transform:none; }
.reveal.reveal-ready {
  opacity:0;
  transform:translate3d(0, 42px, 0) scale(.99);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.72,.25,1);
  will-change:opacity, transform;
}
.reveal.reveal-ready.visible { opacity:1; transform:translate3d(0, 0, 0) scale(1); }
.reveal-ready .family-card,
.reveal-ready .event-card,
.reveal-ready .count-item,
.reveal-ready .feature-frame,
.reveal-ready .gallery-item,
.reveal-ready .wide-photo {
  opacity:0;
}
.reveal-ready.visible .family-card,
.reveal-ready.visible .event-card,
.reveal-ready.visible .count-item,
.reveal-ready.visible .feature-frame,
.reveal-ready.visible .gallery-item,
.reveal-ready.visible .wide-photo {
  animation:card-enter .7s cubic-bezier(.2,.72,.25,1) both;
}
.reveal-ready.visible .family-card:nth-child(2),
.reveal-ready.visible .event-card:nth-child(2) { animation-delay:.13s; }
.reveal-ready.visible .count-item:nth-child(2) { animation-delay:.08s; }
.reveal-ready.visible .count-item:nth-child(3) { animation-delay:.16s; }
.reveal-ready.visible .count-item:nth-child(4) { animation-delay:.24s; }
.reveal-ready.visible .gallery-item:nth-child(2) { animation-delay:.12s; }
.reveal-ready.visible .gallery-item:nth-child(3) { animation-delay:.24s; }

@media (hover:hover) and (pointer:fine) {
  .open-invitation:hover { transform:translateY(-3px); background:var(--wine-dark); box-shadow:0 17px 34px rgba(113,24,39,.3); }
  .family-card:hover,
  .event-card:hover {
    transform:translateY(-7px);
    border-color:rgba(181,134,60,.8);
    box-shadow:0 24px 55px rgba(94,48,36,.14);
  }
  .gallery-item:hover img,
  .feature-frame:hover img,
  .wide-photo:hover img { transform:scale(1.035); }
}

@media (max-width: 560px) {
  .invitation-gate { background-size:auto,auto 100%; }
  .invitation-gate::before { inset:14px; }
  .gate-monogram { width:76px; height:76px; margin-bottom:20px; font-size:1.7rem; }
  .invitation-gate h1 { font-size:2.85rem; }
  .gate-couple { flex-direction:column; gap:1px; max-width:310px; margin-top:20px; font-size:.88rem; }
  .open-invitation { margin-top:24px; }
  .hero { padding-inline:28px; }
  .hero h1 { font-size:3.2rem; }
  .event-grid, .family-grid { grid-template-columns:1fr; }
  .event-card { min-height:0; }
  .countdown { gap:5px; }
  .count-item b { font-size:1.35rem; }
  main { padding-inline:17px; }
  .photo-feature { padding:72px 4px 12px; }
  .feature-frame::before { inset:-8px 8px 8px -8px; }
  .photo-gallery { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:8px; }
  .gallery-main { grid-column:1 / 3; grid-row:auto; }
  .gallery-main img { aspect-ratio:4/5; }
  .gallery-item:not(.gallery-main) img { aspect-ratio:1; }
  .wide-photo-section { padding-inline:0; }
  .wide-photo img { aspect-ratio:4/3; }
  .hero::after { animation-duration:20s; }
  .reveal.reveal-ready { transform:translate3d(0, 24px, 0); transition-duration:.62s; }
  .reveal-ready.visible .family-card,
  .reveal-ready.visible .event-card,
  .reveal-ready.visible .count-item,
  .reveal-ready.visible .feature-frame,
  .reveal-ready.visible .gallery-item,
  .reveal-ready.visible .wide-photo { animation-duration:.58s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal, .reveal.reveal-ready,
  .reveal-ready .family-card,
  .reveal-ready .event-card,
  .reveal-ready .count-item,
  .reveal-ready .feature-frame,
  .reveal-ready .gallery-item,
  .reveal-ready .wide-photo { opacity:1; transform:none; }
}

/* Royal gold theme — inspired by European baroque invitations */
:root {
  --wine: #8d672d;
  --wine-dark: #4f482f;
  --gold: #ad7b2f;
  --gold-light: #d7b86f;
  --ink: #443b2d;
  --muted: #756b58;
  --paper: #faf5e8;
  --olive: #566047;
  --olive-dark: #3f4735;
  --damask: url("../images/baroque-damask.jpg");
  --royal-floral: url("../images/baroque-floral.png");
}

body {
  background: #d7c9ad;
  background-image: linear-gradient(135deg, #ddd1bb, #bca985);
}

.invitation-gate {
  color: var(--ink);
  background-color: #62512f;
  background-image:
    linear-gradient(135deg, rgba(50,55,37,.86), rgba(129,94,43,.8)),
    var(--damask);
  background-size: auto, 720px auto;
}
.invitation-gate::before {
  inset: 15px;
  z-index: 1;
  border: 1px solid rgba(239,211,145,.78);
  box-shadow:
    inset 0 0 0 5px rgba(78,65,39,.48),
    inset 0 0 0 6px rgba(239,211,145,.28);
}
.invitation-gate::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: -65px;
  bottom: -50px;
  width: min(58vw, 590px);
  aspect-ratio: 1;
  background: var(--royal-floral) center / contain no-repeat;
  filter: drop-shadow(0 16px 25px rgba(21,20,12,.22));
  pointer-events: none;
  animation: floral-float 8s ease-in-out infinite alternate;
}
.gate-glow {
  z-index: 0;
  width: min(94vw, 650px);
  border-radius: 3px;
  background: rgba(250,245,232,.97);
  box-shadow: 0 28px 90px rgba(22,20,13,.38);
  transform: translate(-50%,-50%) rotate(.6deg);
}
.gate-glow::before {
  content: "";
  position: absolute;
  top: -145px;
  right: -170px;
  width: 420px;
  aspect-ratio: 1;
  background: var(--royal-floral) center / contain no-repeat;
  transform: rotate(178deg);
  opacity: .92;
}
.gate-content {
  position: relative;
  z-index: 3;
  width: min(82vw, 540px);
  padding: 64px 44px 54px;
  background: rgba(250,245,232,.94);
  border: 1px solid rgba(173,123,47,.72);
  outline: 4px double rgba(173,123,47,.38);
  outline-offset: -10px;
  box-shadow: 0 22px 70px rgba(25,22,14,.28);
}
.gate-content::before {
  content: "♕";
  position: absolute;
  top: 24px;
  left: 50%;
  color: var(--gold);
  font-size: 1.2rem;
  transform: translateX(-50%);
}
.gate-eyebrow { margin-top: 0; color: #8d6a31; }
.gate-monogram {
  border-color: var(--gold);
  color: var(--olive-dark);
  background: rgba(255,253,247,.88);
  box-shadow: 0 0 0 4px rgba(173,123,47,.13), 0 12px 32px rgba(58,48,29,.13);
}
.invitation-gate h1 { color: var(--olive-dark); text-shadow: 0 1px #fff; }
.gate-couple { color: #5e4b2e; }
.open-invitation {
  border-color: #83602b;
  color: #fffaf0;
  background: linear-gradient(135deg, #98703a, #674b24);
  box-shadow: 0 12px 28px rgba(73,52,23,.28);
}
.button-arrow { color: #6b4e25; }
.gate-petal {
  background: linear-gradient(145deg, #e9d293, #a8782f);
  box-shadow: 0 0 5px rgba(255,239,184,.55);
}
.gate-ambient { position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none; }
.ambient-leaf {
  position:absolute;
  top:-34px;
  left:var(--left);
  width:9px;
  height:20px;
  border-radius:90% 10% 80% 20%;
  background:linear-gradient(150deg,rgba(239,213,146,.95),rgba(133,98,39,.8));
  opacity:.72;
  animation:ambient-fall var(--duration) linear var(--delay) infinite;
}
@keyframes ambient-fall {
  to { transform:translate3d(var(--drift),calc(100svh + 60px),0) rotate(540deg); }
}
@keyframes floral-float {
  from { transform:translate3d(0,0,0) rotate(-1deg); }
  to { transform:translate3d(8px,-8px,0) rotate(1deg); }
}
@keyframes button-pulse {
  0%,100% { box-shadow:0 12px 28px rgba(73,52,23,.26),0 0 0 0 rgba(220,188,111,.35); }
  55% { box-shadow:0 15px 32px rgba(73,52,23,.3),0 0 0 10px rgba(220,188,111,0); }
}

.invitation {
  background-color: var(--paper);
  background-image:
    linear-gradient(rgba(250,245,232,.86),rgba(250,245,232,.86)),
    var(--damask);
  background-size: auto, 680px auto;
  box-shadow: 0 0 80px rgba(50,39,20,.24);
}
.hero { overflow:hidden; }
.hero::before {
  inset: 18px;
  border: 1px solid rgba(173,123,47,.72);
  box-shadow:
    inset 0 0 0 5px rgba(250,245,232,.6),
    inset 0 0 0 6px rgba(173,123,47,.3);
}
.hero::after {
  background:
    linear-gradient(rgba(250,245,232,.63),rgba(250,245,232,.76)),
    var(--damask) center / 700px auto;
}
.hero-wash {
  width:min(88%,600px);
  height:72%;
  background:radial-gradient(ellipse,rgba(255,252,243,.99) 36%,rgba(250,245,232,.91) 65%,transparent 100%);
}
.hero-wash::before,
.hero-wash::after {
  content:"";
  position:absolute;
  z-index:-1;
  width:430px;
  aspect-ratio:1;
  background:var(--royal-floral) center / contain no-repeat;
  filter:drop-shadow(0 12px 18px rgba(74,57,25,.12));
  opacity:.95;
}
.hero-wash::before { left:-305px; bottom:-175px; transform:rotate(-8deg); }
.hero-wash::after { right:-305px; top:-190px; transform:rotate(172deg); }
.eyebrow::before { content:"♕"; display:block; margin-bottom:10px; font:400 1.15rem/1 var(--serif); letter-spacing:0; }
.monogram {
  color:var(--olive-dark);
  border-color:var(--gold);
  background:rgba(255,253,246,.72);
  box-shadow:0 0 0 5px rgba(173,123,47,.12),0 10px 28px rgba(82,61,27,.12);
}
.hero h1,
.section h2,
footer .thanks { color:var(--olive-dark); }
.hero .groom,
.parent strong,
.event-card h3,
.time,
.place { color:#5f4929; }
.scroll-cue { border-color:rgba(86,96,71,.5); }
.scroll-cue::after { background:var(--olive); }

.feature-frame,
.wide-photo { border:6px solid #f7efdd; outline:1px solid rgba(173,123,47,.7); }
.feature-frame::before { border-color:rgba(173,123,47,.74); }
.feature-frame figcaption { background:linear-gradient(transparent,rgba(34,39,27,.82)); }
.family-card,
.event-card {
  border-color:rgba(173,123,47,.58);
  background:rgba(255,253,247,.76);
  box-shadow:0 18px 48px rgba(82,63,31,.1);
}
.family-card::before,
.family-card::after { color:var(--gold); background:#faf5e8; }
.family-side { color:var(--olive); }
.gallery-item { outline:1px solid rgba(173,123,47,.4); outline-offset:-5px; }
.event-card::before {
  content:"❦";
  position:absolute;
  top:14px;
  right:17px;
  color:rgba(173,123,47,.32);
  font-size:1.5rem;
}
.calendar-box {
  position:relative;
  overflow:hidden;
  color:#fffaf0;
  background:
    linear-gradient(135deg,rgba(54,63,43,.96),rgba(91,74,39,.94)),
    var(--damask) center / 560px auto;
  border:1px solid var(--gold-light);
  outline:4px double rgba(215,184,111,.34);
  outline-offset:-10px;
}
.calendar-box h2 { color:#fffaf0; }
.calendar-box::after {
  content:"";
  position:absolute;
  right:-115px;
  bottom:-140px;
  width:300px;
  aspect-ratio:1;
  background:var(--royal-floral) center / contain no-repeat;
  opacity:.28;
  pointer-events:none;
}
.countdown,.actions { position:relative; z-index:1; }
.toast { background:var(--olive-dark); }

@media (hover:hover) and (pointer:fine) {
  .open-invitation:hover { background:linear-gradient(135deg,#7b5b30,#4f452c); }
  .family-card:hover,.event-card:hover { border-color:rgba(173,123,47,.9); box-shadow:0 24px 58px rgba(76,58,28,.16); }
}

@media (max-width:560px) {
  .invitation-gate { padding:18px; background-size:auto,540px auto; }
  .invitation-gate::before { inset:9px; }
  .invitation-gate::after { left:-112px; bottom:-54px; width:340px; opacity:.86; }
  .gate-glow { width:calc(100vw - 34px); height:min(78svh,650px); }
  .gate-glow::before { top:-100px; right:-155px; width:330px; opacity:.75; }
  .gate-content { width:calc(100vw - 50px); padding:55px 20px 43px; }
  .gate-content::before { top:19px; }
  .gate-eyebrow { margin-bottom:16px; }
  .hero-wash::before,.hero-wash::after { width:310px; }
  .hero-wash::before { left:-235px; bottom:-175px; }
  .hero-wash::after { right:-245px; top:-160px; }
  .hero::before { inset:10px; }
  .hero .groom { min-width:0; font-size:clamp(1.3rem,5.6vw,1.5rem); letter-spacing:-.025em; }
  .calendar-box { padding-inline:14px; }
}

/* Extended invitation layout */
.calendar-box {
  margin-top:78px;
  padding:48px 28px 42px;
}
.wedding-calendar {
  position:relative;
  z-index:1;
  width:min(100%,470px);
  margin:28px auto 0;
  padding:18px;
  border:1px solid rgba(255,250,240,.24);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(3px);
}
.calendar-weekdays,
.calendar-days {
  display:grid;
  grid-template-columns:repeat(7,1fr);
  align-items:center;
}
.calendar-weekdays {
  margin-bottom:8px;
  color:var(--gold-light);
  font:700 .65rem/1.4 var(--sans);
  letter-spacing:.08em;
}
.calendar-days span,
.calendar-days strong {
  position:relative;
  display:grid;
  place-items:center;
  min-height:38px;
  color:#fffaf0;
  font-size:.84rem;
  font-weight:400;
}
.calendar-days strong {
  width:36px;
  height:36px;
  min-height:36px;
  margin:auto;
  border-radius:50%;
  color:var(--olive-dark);
  background:var(--gold-light);
  box-shadow:0 0 0 4px rgba(215,184,111,.16);
}
.calendar-days strong i {
  position:absolute;
  top:-9px;
  right:-3px;
  color:#fff7e4;
  font-size:.56rem;
  font-style:normal;
}
.calendar-days .empty { opacity:0; }
.calendar-box .countdown { margin-top:30px; padding-top:28px; border-top:1px solid rgba(255,250,240,.2); }

.location-section { padding-top:92px; }
.map-frame {
  position:relative;
  max-width:650px;
  margin:0 auto 24px;
  padding:7px;
  border:1px solid rgba(173,123,47,.68);
  background:#f7efdd;
  box-shadow:0 22px 55px rgba(73,57,28,.14);
}
.map-frame::before,
.map-frame::after {
  content:"◆";
  position:absolute;
  z-index:2;
  top:50%;
  color:var(--gold);
  background:var(--paper);
  font-size:.58rem;
  transform:translateY(-50%) rotate(45deg);
}
.map-frame::before { left:-5px; }
.map-frame::after { right:-5px; }
.map-frame iframe {
  display:block;
  width:100%;
  height:340px;
  border:0;
  filter:sepia(.22) saturate(.72) contrast(.94);
}
.map-button,
.gift-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  padding:12px 22px;
  border:1px solid #8d672d;
  border-radius:999px;
  color:#fffaf0;
  background:linear-gradient(135deg,#98703a,#674b24);
  box-shadow:0 12px 26px rgba(79,59,27,.2);
  cursor:pointer;
  font:700 .71rem/1 var(--sans);
  letter-spacing:.11em;
  text-decoration:none;
  text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease;
}

.album-section { padding-top:94px; }
.album-section .intro { font-style:italic; }
.album-grid {
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  gap:10px;
}
.album-grid .gallery-item {
  grid-column:span 4;
  display:block;
  min-width:0;
  padding:0;
  border:0;
  cursor:zoom-in;
  font:inherit;
  appearance:none;
}
.album-grid .album-cover { grid-column:span 7; grid-row:span 2; }
.album-grid .gallery-item:nth-child(2),
.album-grid .gallery-item:nth-child(3) { grid-column:span 5; }
.album-grid .gallery-item:nth-child(4) { grid-column:span 5; }
.album-grid .album-wide { grid-column:span 7; }
.album-grid .gallery-item img { width:100%; height:100%; aspect-ratio:1; }
.album-grid .album-cover img { aspect-ratio:4/5; }
.album-grid .album-wide img { aspect-ratio:16/10; }
.album-grid .gallery-item > span {
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  padding:45px 14px 14px;
  color:#fff;
  background:linear-gradient(transparent,rgba(34,39,27,.72));
  font-size:1rem;
  font-style:italic;
  letter-spacing:.05em;
  text-shadow:0 2px 10px rgba(0,0,0,.38);
}
.album-grid .gallery-item:focus-visible { outline:3px solid rgba(173,123,47,.5); outline-offset:3px; }

.gift-section {
  position:relative;
  max-width:650px;
  margin:78px auto 5px;
  padding:58px 40px 62px;
  overflow:hidden;
  border:1px solid rgba(173,123,47,.58);
  outline:4px double rgba(173,123,47,.22);
  outline-offset:-10px;
  background:rgba(255,253,247,.76);
  box-shadow:0 18px 48px rgba(82,63,31,.1);
}
.gift-section::before,
.gift-section::after {
  content:"";
  position:absolute;
  width:250px;
  aspect-ratio:1;
  background:var(--royal-floral) center/contain no-repeat;
  opacity:.18;
  pointer-events:none;
}
.gift-section::before { left:-155px; bottom:-125px; }
.gift-section::after { right:-165px; top:-140px; transform:rotate(180deg); }
.gift-section > * { position:relative; z-index:1; }
.gift-ornament { color:var(--gold); font-size:1.3rem; }
.gift-button span { font-size:1.15rem; }

.gift-dialog,
.lightbox {
  max-width:none;
  max-height:none;
  margin:auto;
  padding:0;
  border:0;
  color:var(--ink);
  background:transparent;
}
.gift-dialog { width:min(92vw,720px); }
.gift-dialog::backdrop,
.lightbox::backdrop {
  background:rgba(28,28,20,.82);
  backdrop-filter:blur(6px);
}
.dialog-shell {
  position:relative;
  max-height:90svh;
  overflow:auto;
  padding:48px 38px 34px;
  border:1px solid var(--gold);
  outline:4px double rgba(173,123,47,.32);
  outline-offset:-10px;
  background:
    linear-gradient(rgba(250,245,232,.91),rgba(250,245,232,.91)),
    var(--damask) center/600px auto;
  box-shadow:0 28px 90px rgba(0,0,0,.35);
  text-align:center;
}
.dialog-shell h2 { margin:0 0 28px; color:var(--olive-dark); font-size:2.2rem; font-style:italic; font-weight:400; }
.dialog-close,
.lightbox-close {
  position:absolute;
  z-index:4;
  top:13px;
  right:14px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(173,123,47,.6);
  border-radius:50%;
  color:var(--olive-dark);
  background:#fffaf0;
  cursor:pointer;
  font:300 1.5rem/1 var(--sans);
}
.gift-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.gift-card {
  padding:24px 18px;
  border:1px solid rgba(173,123,47,.46);
  background:rgba(255,255,255,.62);
}
.gift-card p { margin:0 0 17px; color:var(--gold); font:700 .7rem/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.gift-card img { display:block; width:min(100%,200px); height:auto; margin:0 auto 18px; }
.gift-card strong { display:block; margin-bottom:8px; color:#5f4929; font-size:1rem; font-weight:500; }
.gift-card span { display:block; color:var(--muted); font:.75rem/1.65 var(--sans); }
.dialog-shell > small { display:block; margin-top:24px; color:var(--muted); font:.72rem/1.55 var(--sans); }
.gift-dialog[open] .dialog-shell { animation:dialog-in .38s cubic-bezier(.2,.72,.25,1) both; }
@keyframes dialog-in { from { opacity:0; transform:translateY(18px) scale(.97); } to { opacity:1; transform:none; } }

.lightbox {
  width:min(94vw,980px);
  height:min(92svh,900px);
  overflow:visible;
}
.lightbox img {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 22px 55px rgba(0,0,0,.45));
}
.lightbox-close { top:-12px; right:-4px; }

@media (hover:hover) and (pointer:fine) {
  .map-button:hover,.gift-button:hover { transform:translateY(-3px); box-shadow:0 17px 32px rgba(79,59,27,.28); }
}

@media (max-width:560px) {
  .calendar-box { margin-top:64px; padding:42px 12px 35px; }
  .wedding-calendar { padding:13px 8px; }
  .calendar-days span,.calendar-days strong { min-height:34px; font-size:.77rem; }
  .calendar-days strong { width:32px; height:32px; min-height:32px; }
  .map-frame iframe { height:300px; }
  .album-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
  .album-grid .gallery-item,
  .album-grid .gallery-item:nth-child(2),
  .album-grid .gallery-item:nth-child(3),
  .album-grid .gallery-item:nth-child(4) { grid-column:span 1; }
  .album-grid .album-cover { grid-column:span 2; grid-row:auto; }
  .album-grid .gallery-item:nth-child(4) { grid-column:span 2; }
  .album-grid .album-wide { grid-column:span 2; }
  .album-grid .album-cover img { aspect-ratio:4/5; }
  .album-grid .gallery-item:not(.album-cover):not(.album-wide) img { aspect-ratio:1; }
  .album-grid .gallery-item:nth-child(4) img { aspect-ratio:16/10; }
  .gift-section { margin-top:64px; padding:50px 20px 54px; }
  .dialog-shell { padding:45px 15px 25px; }
  .dialog-shell h2 { font-size:1.85rem; }
  .gift-grid { grid-template-columns:1fr; gap:12px; }
  .gift-card { padding:20px 14px; }
  .gift-card img { width:170px; }
  .lightbox { width:94vw; height:88svh; }
}