/* ═══════════════════════════════════════════════════════════════
   THE VOW / weddings, engagements, proposals.
   Sibling to The Stage, but this one lives in the MOMENT world:
   cream and espresso, Cormorant serif, gold accent. Where The Stage
   is broadcast chrome and hard edges, this is paper and air.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --cream: #F2EAE0;
  --cream-2: #E9DFD1;
  --paper: #FBF7F2;
  --esp: #2B211B;
  --esp-dim: rgba(43, 33, 27, 0.62);
  --esp-faint: rgba(43, 33, 27, 0.34);
  --gold: #B98F5E;
  --hair: rgba(43, 33, 27, 0.16);
  --ink: #0B0B0C;

  --serif: "Cormorant Garamond", Georgia, serif;
  --grot: "Space Grotesk", sans-serif;
  --caps: "Jost", sans-serif;
  --pad: clamp(1.25rem, 4vw, 4.5rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body.vows-page {
  background: var(--cream); color: var(--esp);
  font-family: var(--grot); font-weight: 300; -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }
li { list-style: none; }
::selection { background: var(--gold); color: var(--paper); }

.kicker {
  font-family: var(--grot); font-size: 0.66rem; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
  display: inline-flex; align-items: center; gap: 0.9em;
}
.kicker i { display: block; width: 34px; height: 1px; background: var(--gold); }

/* ══════════════ NAV / light variant of the house nav ══════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.9rem var(--pad);
  background: rgba(242, 234, 224, 0.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair);
}
.nav__logo { font-family: "Anton", Impact, sans-serif; font-size: 0.95rem; letter-spacing: 0.05em; white-space: nowrap; }
.nav__logo span { color: var(--esp-faint); font-weight: 400; }
.nav__links { display: flex; gap: 1.7rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.nav__links a { position: relative; padding-bottom: 3px; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--gold); transform: scaleX(0); transition: transform 0.35s cubic-bezier(.77,0,.18,1);
}
.nav__links a:hover::after, .nav__links a.is-here::after { transform: scaleX(1); }
.nav__links a.is-here { color: var(--gold); }
.nav__cta {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--esp); color: var(--paper) !important; padding: 0.85em 1.6em; border-radius: 100px;
  white-space: nowrap; transition: background 0.35s;
}
.nav__cta:hover { background: var(--gold); }
.nav__toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; }
.nav__toggle span { display: block; width: 22px; height: 1px; background: var(--esp); margin: 5px 0; transition: transform .3s, opacity .3s; }
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__logo span { display: none; }
  .nav__links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--hair);
    max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(.16,1,.3,1);
  }
  .nav.is-open .nav__links { max-height: 60vh; }
  .nav__links a { padding: 1.05rem var(--pad); border-top: 1px solid var(--hair); }
}

/* ══════════════ HERO ══════════════ */
.vhero { position: relative; min-height: 92svh; display: flex; align-items: flex-end; overflow: hidden; }
.vhero__bed { position: absolute; inset: 0; }
.vhero__bed img { transform: scale(1.05); animation: drift 22s ease-in-out infinite alternate; filter: saturate(0.94); }
@keyframes drift { to { transform: scale(1.12) translate(-1.2%, -1%); } }
/* Enough wash to carry type, not so much that the photograph disappears.
   The pool sits bottom-left, under the title block, and the rest stays open. */
.vhero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(242,234,224,.42) 0%, rgba(242,234,224,.06) 34%, rgba(242,234,224,.72) 94%),
    radial-gradient(68% 62% at 16% 76%, rgba(242,234,224,.88), rgba(242,234,224,.28) 58%, transparent 78%);
}
.vhero__inner { position: relative; z-index: 2; padding: 0 var(--pad) clamp(3rem, 9vh, 6rem); max-width: 1500px; }
/* gold on a bright wash is close to invisible - darken it here only */
.vhero .kicker { color: #8A6438; }
.vhero .kicker i { background: #8A6438; }
.vhero__title {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: clamp(3.4rem, 13vw, 10rem); line-height: 0.88; letter-spacing: -0.02em;
  margin: 1.2rem 0 1.4rem;
}
.vhero__title b { font-style: normal; font-weight: 300; display: block; }
.vhero__lede { font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.75; max-width: 46ch; color: var(--esp-dim); }
.vhero__lanes { display: flex; flex-wrap: wrap; gap: 1.6rem 2.6rem; margin-top: 2.4rem; }
.vhero__lanes li { font-family: var(--caps); font-size: 0.66rem; letter-spacing: 0.28em; text-transform: uppercase; }
.vhero__lanes b { display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem; letter-spacing: 0; color: var(--gold); margin-bottom: 0.3rem; }

/* ══════════════ INTRO ══════════════ */
.vintro { padding: clamp(4rem, 12vh, 8rem) var(--pad); max-width: 1100px; margin: 0 auto; text-align: center; }
.vintro h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  line-height: 1.18; margin: 1.3rem 0 1.6rem;
}
.vintro h2 em { font-style: italic; color: var(--gold); }
.vintro p { color: var(--esp-dim); font-size: 1.02rem; line-height: 1.9; max-width: 62ch; margin: 0 auto; }

/* ══════════════ GALLERY SETS ══════════════ */
.vset { padding: 0 var(--pad) clamp(3rem, 8vh, 5rem); max-width: 1600px; margin: 0 auto; }
.vset__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.4rem; margin-bottom: 1.4rem; padding-top: clamp(2rem, 5vh, 3.2rem); border-top: 1px solid var(--hair); }
.vset__name { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(1.6rem, 3.4vw, 2.6rem); }
.vset__lane { font-family: var(--caps); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.vset__blurb { margin-left: auto; font-size: 0.88rem; color: var(--esp-dim); }

/* justified rows: each figure flexes by its aspect ratio, so a row fills
   edge to edge at a shared height without cropping anything */
.vrow { display: flex; gap: clamp(0.4rem, 1vw, 0.8rem); margin-bottom: clamp(0.4rem, 1vw, 0.8rem); }
.vfig { position: relative; overflow: hidden; background: var(--cream-2); cursor: zoom-in; min-width: 0; }
.vfig img { transition: transform 1.1s cubic-bezier(.2,.8,.2,1), filter 0.6s; }
.vfig:hover img { transform: scale(1.04); }
.vfig::after {
  content: ""; position: absolute; inset: 0; background: rgba(43,33,27,0.06);
  opacity: 0; transition: opacity 0.4s;
}
.vfig:hover::after { opacity: 1; }
@media (max-width: 640px) { .vrow { flex-wrap: wrap; } }

/* ══════════════ PACKAGES ══════════════ */
.vpacks { background: var(--paper); padding: clamp(4rem, 11vh, 7rem) var(--pad); border-top: 1px solid var(--hair); }
.vpacks__head { max-width: 60ch; margin: 0 auto clamp(2.4rem, 6vh, 3.4rem); text-align: center; }
.vpacks__head h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem, 5vw, 3.4rem); margin: 1rem 0 0.9rem; }
.vpacks__head p { color: var(--esp-dim); font-size: 0.96rem; line-height: 1.8; }
.vpacks__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; max-width: 1200px; margin: 0 auto; }
.vpack { border: 1px solid var(--hair); background: var(--cream); padding: 2.2rem 1.9rem 1.9rem; display: flex; flex-direction: column; gap: 0.5rem; transition: border-color 0.4s, transform 0.4s; }
.vpack:hover { border-color: var(--gold); transform: translateY(-5px); }
.vpack--hi { border-color: rgba(185,143,94,0.55); }
.vpack__tag { position: absolute; }
.vpack__kick { font-family: var(--caps); font-size: 0.56rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--esp-faint); }
.vpack h3 { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 1.9rem; }
.vpack__price { font-family: var(--serif); font-size: 2.5rem; color: var(--gold); line-height: 1; margin: 0.3rem 0 0.8rem; }
.vpack ul { flex: 1; }
.vpack li { font-size: 0.86rem; color: var(--esp-dim); padding: 0.34rem 0 0.34rem 1.15rem; position: relative; line-height: 1.5; }
.vpack li::before { content: ", "; position: absolute; left: 0; color: var(--gold); }
.vpack__btn { margin-top: 1.2rem; text-align: center; background: var(--esp); color: var(--paper) !important; font-family: var(--caps); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; padding: 1.1em; transition: background 0.35s; }
.vpack__btn:hover { background: var(--gold); }

/* ══════════════ OUTRO + FOOT ══════════════ */
.voutro { padding: clamp(4.5rem, 12vh, 8rem) var(--pad); text-align: center; }
.voutro h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(2.2rem, 7vw, 5rem); line-height: 1.05; margin: 1.2rem 0 1.6rem; }
.voutro p { color: var(--esp-dim); max-width: 48ch; margin: 0 auto 2.4rem; line-height: 1.8; }
.voutro__cta { display: inline-block; background: var(--esp); color: var(--paper) !important; font-family: var(--caps); font-size: 0.68rem; letter-spacing: 0.26em; text-transform: uppercase; padding: 1.25em 2.8em; border-radius: 100px; transition: background 0.35s; }
.voutro__cta:hover { background: var(--gold); }

.vfoot { padding: 2rem var(--pad) 2.6rem; border-top: 1px solid var(--hair); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--esp-dim); }
.vfoot a:hover { color: var(--gold); }

/* ══════════════ LIGHTBOX ══════════════ */
.vlb { position: fixed; inset: 0; z-index: 400; background: rgba(28,22,18,0.94); backdrop-filter: blur(16px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: clamp(0.5rem,2vw,2rem); padding: clamp(1rem,4vw,3rem); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.vlb.open { opacity: 1; visibility: visible; }
.vlb__fig { display: flex; flex-direction: column; align-items: center; gap: 1rem; min-width: 0; }
.vlb__fig img { max-width: 100%; max-height: 84vh; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,.5); }
.vlb__cap { font-family: var(--caps); font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(242,234,224,.7); }
.vlb__nav, .vlb__x { border-radius: 50%; cursor: pointer; background: rgba(242,234,224,.08); border: 1px solid rgba(242,234,224,.28); color: var(--cream); display: grid; place-items: center; transition: background .3s, border-color .3s; }
.vlb__nav { width: clamp(44px,5vw,58px); height: clamp(44px,5vw,58px); font-size: 1.6rem; line-height: 1; flex: none; }
.vlb__x { position: absolute; top: 1.3rem; right: 1.5rem; width: 44px; height: 44px; font-size: 1rem; z-index: 2; }
.vlb__nav:hover, .vlb__x:hover { background: var(--gold); border-color: var(--gold); color: var(--paper); }
.vlb__count { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.62rem; letter-spacing: 0.24em; color: rgba(242,234,224,.6); }
@media (max-width: 700px) {
  .vlb { grid-template-columns: 1fr; }
  .vlb__nav { position: absolute; top: 50%; transform: translateY(-50%); }
  .vlb__prev { left: 0.5rem; } .vlb__next { right: 0.5rem; }
}

/* film grain, same as the house */
.grain { position: fixed; inset: -100%; z-index: 300; pointer-events: none; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,3%)} 50%{transform:translate(3%,-2%)} 75%{transform:translate(-1%,-3%)} 100%{transform:translate(2%,2%)} }

[data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); }
[data-rv].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .grain, .vhero__bed img { animation: none !important; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  [data-rv] { opacity: 1; transform: none; }
}