:root {
  --sage: #a9c58a;
  --sage-deep: #7f9d62;
  --forest: #2f4a2a;
  --cream: #f7f3ea;
  --paper: #fbf9f3;
  --bark: #a86c44;
  --ink: #2c3327;
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --body: "EB Garamond", "Cormorant Garamond", Georgia, serif;
  --script: "Mrs Saint Delafield", "Cormorant Garamond", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 4.5rem; }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix type=%22matrix%22 values=%220 0 0 0 0.18 0 0 0 0 0.15 0 0 0 0 0.09 0 0 0 0.05 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E");
  background-size: 180px 180px;
  background-repeat: repeat;
  line-height: 1.7;
}

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

h1, h2 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--forest);
  margin: 0;
  line-height: 1.1;
}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.25rem;
  background: rgba(250, 246, 236, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(47, 74, 42, 0.12);
}

.brand {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--forest);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.menu-toggle span {
  width: 22px;
  height: 1.5px;
  background: var(--forest);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  justify-content: flex-end;
}

.site-nav a {
  color: var(--forest);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible { border-bottom-color: var(--bark); outline: none; }

@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.25rem 1rem;
    background: var(--paper);
    border-bottom: 1px solid rgba(47, 74, 42, 0.12);
  }
  .site-nav a { padding: 0.7rem 0; }
  .site-nav.open { display: flex; }
}

/* Hero */
.hero {
  position: relative;
  min-height: min(92vh, 900px);
  display: grid;
  place-items: center;
  padding: 6rem 1.25rem;
  text-align: center;
  color: var(--forest);
  background: var(--cream);
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: min(48%, 480px);
  aspect-ratio: 650 / 596;
  background: url("img/ornaments2/moon-wash.svg") center / contain no-repeat;
  opacity: 0.6;
  filter: saturate(0.6) sepia(5%);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black 0%, black 55%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 48%, black 0%, black 55%, transparent 92%);
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 640px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1400 640%22 preserveAspectRatio=%22none%22%3E%3Cdefs%3E%3Cfilter id=%22dustySoft%22 x=%22-60%25%22 y=%22-60%25%22 width=%22220%25%22 height=%22220%25%22%3E%3CfeGaussianBlur stdDeviation=%2240%22/%3E%3C/filter%3E%3ClinearGradient id=%22fadeV%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23ffffff%22 stop-opacity=%221%22/%3E%3Cstop offset=%2245%25%22 stop-color=%22%23ffffff%22 stop-opacity=%220.6%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23ffffff%22 stop-opacity=%220%22/%3E%3C/linearGradient%3E%3Cmask id=%22fadeMask%22%3E%3Crect width=%221400%22 height=%22640%22 fill=%22url(%23fadeV)%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url(%23fadeMask)%22 opacity=%220.8%22%3E%3Cellipse cx=%22200%22 cy=%2250%22 rx=%22500%22 ry=%22190%22 fill=%22%23989ba7%22 filter=%22url(%23dustySoft)%22/%3E%3Cellipse cx=%22760%22 cy=%2280%22 rx=%22520%22 ry=%22180%22 fill=%22%23dcc7dd%22 filter=%22url(%23dustySoft)%22/%3E%3Cellipse cx=%221260%22 cy=%2260%22 rx=%22380%22 ry=%22160%22 fill=%22%23d7d9ec%22 filter=%22url(%23dustySoft)%22/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

.hero-inner { position: relative; z-index: 1; width: 100%; max-width: 1200px; }

.accent {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 130px;
  height: auto;
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0.85;
}

.accent-left { left: 0; }

.accent-right { right: 0; transform: translateY(-50%) scaleX(-1); }

.eyebrow {
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--forest);
}

.hero h1 {
  font-family: var(--serif);
  font-size: clamp(2.8rem, 10vw, 7rem);
  font-weight: 500;
  white-space: nowrap;
}

.hero .amp {
  font-family: var(--script);
  font-style: normal;
  font-size: 1.15em;
  color: var(--bark);
  padding: 0 0.1em;
}

.hero-tagline {
  margin: 0.6rem 0 0;
  font-family: var(--script);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  color: var(--forest);
}

.hero-date {
  margin: 1.3rem 0 0;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
}

.hero-place {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
}

.photo-frame {
  position: relative;
  width: min(1000px, 90vw);
  margin: 2.5rem auto 0;
  padding: 2.4rem;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(47, 74, 42, 0.25);
}

/* Only the right side carries the painted corners (the hero's vine
   already occupies the left), straddling the frame edge like the cards. */
.photo-frame::before,
.photo-frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: -20px;
  width: 110px;
  height: 119px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.photo-frame::before {
  top: -20px;
  background-image: url("img/ornaments2/border2-tr.svg");
}

.photo-frame::after {
  bottom: -20px;
  background-image: url("img/ornaments2/border2-br.svg");
}

.hero-photo {
  display: block;
  width: 100%;
  height: auto;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: 1.8rem;
  margin-top: 2.2rem;
}

.countdown[hidden] { display: none; }

.countdown div { display: flex; flex-direction: column; min-width: 4.5rem; }

.countdown span {
  font-family: var(--serif);
  font-size: 2.6rem;
  font-style: italic;
  color: var(--bark);
  line-height: 1;
}

.countdown small {
  margin-top: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.7rem;
  color: var(--ink);
}

/* Framed sections */
.frame {
  position: relative;
  padding: 3.5rem 1.25rem;
  background: var(--paper);
}

.frame::before,
.frame::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 130px;
  height: auto;
  aspect-ratio: 98.25 / 461.25;
  transform: translateY(-50%);
  background: url("img/ornaments2/vines2.svg") center / contain no-repeat;
  opacity: 0.8;
  pointer-events: none;
}

.frame::before { left: 0; }
.frame::after { right: 0; transform: translateY(-50%) scaleX(-1); }

/* Each section shows a vine on only one side, alternating left/right;
   the first sections use the starry vine, the later ones vines2. */
#historia-intro::before,
#historia::after,
#viaje::before,
#alojarse::after,
#programa::before,
#preguntas::after,
#regalos::before {
  content: none;
}

#historia-intro::after,
#historia::before {
  background-image: url("img/ornaments2/starryvines.svg");
}

#viaje::after,
#alojarse::before {
  background-image: url("img/ornaments2/vinemid.svg");
}

.card {
  position: relative;
  z-index: 1;
  max-width: 720px;
  margin: 0 auto;
  padding: 2.6rem 2.2rem;
  text-align: center;
  background-color: var(--cream);
}

/* Each card shows the painted corners only on the side opposite its
   section's vine, so a section reads as vine on one side, border on the other.
   The corners straddle the card edge (negative offset) so the artwork
   covers the seam between the card and the section background. */
.card::before,
.card::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 110px;
  height: 119px;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.card::before { top: -20px; }
.card::after { bottom: -20px; }

#historia-intro .card::before,
#viaje .card::before,
#programa .card::before,
#regalos .card::before {
  left: -20px;
  background-image: url("img/ornaments2/border2-tl.svg");
}

#historia-intro .card::after,
#viaje .card::after,
#programa .card::after,
#regalos .card::after {
  left: -20px;
  background-image: url("img/ornaments2/border2-bl.svg");
}

#historia .card::before,
#alojarse .card::before,
#preguntas .card::before {
  right: -20px;
  background-image: url("img/ornaments2/border2-tr.svg");
}

#historia .card::after,
#alojarse .card::after,
#preguntas .card::after {
  right: -20px;
  background-image: url("img/ornaments2/border2-br.svg");
}

@media (min-width: 561px) {
  .card { max-width: none; width: min(1000px, 90vw); }
}

.card h2 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  margin-bottom: 1.2rem;
}

.card h2::before,
.card h2::after {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  vertical-align: middle;
  background: url("img/ornaments2/fairy-a.png") center / contain no-repeat;
}

.card h2::before { margin-right: 0.15em; }
.card h2::after { margin-left: 0.15em; }

/* Alternate the fairy before/after the title, section to section. */
#historia .card h2::before,
#alojarse .card h2::before,
#preguntas .card h2::before {
  content: none;
}

#historia .card h2::after,
#alojarse .card h2::after,
#preguntas .card h2::after {
  content: "";
}

#historia-intro .card h2::after,
#viaje .card h2::after,
#programa .card h2::after,
#regalos .card h2::after {
  content: none;
}

.card p {
  margin: 0 auto;
  max-width: 56ch;
  font-size: 1.1rem;
}

.card p:first-of-type::first-letter {
  font-family: var(--script);
  font-size: 1.9em;
  color: var(--bark);
  line-height: 0;
}

.card .gallery { margin-top: 2.5rem; }

#historia-intro { padding-bottom: 1rem; }

/* Gallery */
.gallery {
  max-width: 1100px;
  margin: 0 auto;
  columns: 3 260px;
  column-gap: 0.9rem;
}

.gallery button {
  display: block;
  width: 100%;
  margin: 0 0 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  break-inside: avoid;
}

.gallery img {
  width: 100%;
  height: auto;
  border: 1px solid var(--bark);
  transition: opacity 0.2s;
}

.gallery button:hover img,
.gallery button:focus-visible img { opacity: 0.85; }

.gallery button:focus-visible { outline: 2px solid var(--bark); outline-offset: 3px; }

/* Schedule */
.schedule {
  list-style: none;
  margin: 2rem auto 0;
  padding: 0;
  max-width: 480px;
  text-align: left;
}

.schedule li {
  display: flex;
  gap: 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(127, 157, 98, 0.35);
}

.schedule time {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--bark);
  min-width: 4.5rem;
}

.schedule div { display: flex; flex-direction: column; }
.schedule strong { font-weight: 600; color: var(--forest); letter-spacing: 0.02em; }
.schedule span { font-size: 0.92rem; color: var(--ink); }

/* FAQ */
details {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
  border-bottom: 1px solid rgba(127, 157, 98, 0.35);
}

details:first-of-type { border-top: 1px solid rgba(127, 157, 98, 0.35); }

summary {
  padding: 1.1rem 2rem 1.1rem 0;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--forest);
  position: relative;
  list-style: none;
}

summary::-webkit-details-marker { display: none; }

summary::after {
  content: "+";
  position: absolute;
  right: 0.25rem;
  top: 1rem;
  font-size: 1.4rem;
  color: var(--bark);
}

details[open] summary::after { content: "\2013"; }

details p { margin: 0 0 1.2rem; color: var(--ink); }

/* Section divider */
.divider {
  width: 100%;
  aspect-ratio: 909.75 / 96.75;
  background-color: var(--cream);
  background-image: url("img/ornaments2/Dunes.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Footer */
.site-footer {
  padding: 3rem 1.25rem;
  text-align: center;
  background: var(--cream);
  color: var(--ink);
  border-top: 1px solid rgba(47, 74, 42, 0.12);
}

.site-footer p {
  margin: 0;
  font-family: var(--script);
  font-size: 2rem;
  color: var(--bark);
}

/* Lightbox */
.lightbox {
  border: 0;
  padding: 0;
  max-width: 96vw;
  max-height: 92vh;
  background: transparent;
}

.lightbox::backdrop { background: rgba(30, 26, 18, 0.88); }

.lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  object-fit: contain;
}

.lightbox-close {
  position: absolute;
  top: 0.4rem;
  right: 0.6rem;
  font-size: 2rem;
  line-height: 1;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

@media (max-width: 860px) {
  .frame::before, .frame::after { display: none; }
}

@media (max-width: 560px) {
  .accent { display: none; }
  .card { padding: 2.2rem 1.25rem; outline-offset: 5px; }
  .frame { padding: 2.5rem 1.25rem; }
  .hero { padding: 5rem 1.25rem; }
  .countdown { gap: 0.8rem; }
  .countdown span { font-size: 2rem; }
  .countdown div { min-width: 3.6rem; }
}