/* ============================================================
   Vavea & Linas — Save the Date
   Palette: olive / sage green, cream paper, bordeaux accents
   ============================================================ */

:root{
  /* greens */
  --olive-900:#2f3823;
  --olive-800:#3d4a2c;
  --olive-700:#4d5c38;
  --olive-600:#61713f;
  --olive-500:#7c8a5a;
  --sage-400:#9aa77f;
  --sage-300:#b7c2a2;
  --sage-200:#cfd7c0;
  --sage-100:#e3e8d8;

  /* paper */
  --cream-50:#fbf8f1;
  --cream-100:#f7f2e8;
  --cream-200:#f1e9da;
  --cream-300:#e6dcc8;

  /* bordeaux / brown accents */
  --wine-700:#5c2230;
  --wine-600:#73303c;
  --wine-500:#8c4250;
  --brown-600:#6b4a34;
  --gold-500:#a98b52;

  /* semantic */
  --ink:#38341f;
  --ink-soft:#5f5a44;
  --ink-faint:#8b8570;

  --bg:var(--cream-100);
  --measure:70ch;
  --gutter:clamp(1.25rem, 5vw, 5rem);
  --radius:2px;

  /* iOS notch / status bar / home indicator — 0 everywhere else */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
  --safe-right:env(safe-area-inset-right,0px);

  --f-serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-script:"Pinyon Script", "Cormorant Garamond", cursive;
  --f-sans:"Jost", "Helvetica Neue", Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(1rem,.95rem + .25vw,1.0625rem);
  line-height:1.75;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
h1,h2,h3,p,figure,ol,ul,fieldset{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit}
a{color:inherit}

/* paper grain over the whole page */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--olive-800);color:var(--cream-50);
  padding:.6rem 1.1rem;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;transition:top .2s var(--ease);
}
.skip-link:focus-visible{top:calc(1rem + var(--safe-top))}

:focus-visible{outline:2px solid var(--wine-600);outline-offset:3px}

/* ============================================================
   shared type
   ============================================================ */
.section-label{
  font-family:var(--f-serif);
  font-weight:400;
  font-size:clamp(1.6rem,1.1rem + 1.9vw,2.5rem);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--olive-800);
  line-height:1.15;
}
.section-label--light{color:var(--cream-100)}

.section-script{
  font-family:var(--f-script);
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem);
  line-height:1.25;
  color:var(--wine-600);
  font-weight:400;
}
.section-script--light{color:var(--sage-200)}

/* ---------- buttons ---------- */
.btn{
  --btn-fg:var(--olive-800);
  --btn-bd:var(--olive-500);
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--f-sans);font-size:.78rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  padding:1.05em 2.3em;
  color:var(--btn-fg);
  border:1px solid var(--btn-bd);
  background:transparent;
  cursor:pointer;position:relative;overflow:hidden;
  transition:color .45s var(--ease),border-color .45s var(--ease);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--olive-800);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.btn > *{position:relative;z-index:1}
.btn:hover{color:var(--cream-50);border-color:var(--olive-800)}
.btn:hover::after{transform:translateY(0)}
.btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

.btn--solid{
  --btn-fg:var(--olive-900);
  --btn-bd:var(--sage-200);
  background:var(--sage-200);
}
.btn--solid::after{background:var(--cream-50)}
.btn--solid:hover{color:var(--olive-900);border-color:var(--cream-50)}

/* outline button that reads on a dark band */
.btn--light{
  --btn-fg:var(--cream-50);
  --btn-bd:color-mix(in srgb,var(--sage-200) 70%,transparent);
}
.btn--light::after{background:var(--sage-200)}
.btn--light:hover{color:var(--olive-900);border-color:var(--sage-200)}

/* ---------- submit button + loader ---------- */
.btn--submit{position:relative}
.btn-spinner{
  width:1.05em;height:1.05em;flex:0 0 auto;
  border-radius:50%;
  border:2px solid color-mix(in srgb,currentColor 28%,transparent);
  border-top-color:currentColor;
  display:none;
  animation:btn-spin .7s linear infinite;
}
.btn-label--sending{display:none}
.btn--submit.is-sending{cursor:progress;pointer-events:none}
.btn--submit.is-sending .btn-spinner{display:inline-block}
.btn--submit.is-sending .btn-label{display:none}
.btn--submit.is-sending .btn-label--sending{display:inline}
.btn--submit.is-sending .btn-arrow{display:none}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .btn-spinner{animation-duration:1.6s}
}

/* ============================================================
   botanicals
   ============================================================ */
.botanical{
  position:absolute;
  width:clamp(200px,34vw,430px);
  height:auto;aspect-ratio:420/380;
  pointer-events:none;
  filter:blur(.25px);
}
.bl-stem{fill:none;stroke:var(--olive-600);stroke-width:1.4;stroke-linecap:round;opacity:.55}
.bl-leaf ellipse{opacity:.42}
.bl-leaf--olive ellipse{fill:var(--olive-600)}
.bl-leaf--sage  ellipse{fill:var(--sage-400);opacity:.36}
.bl-leaf--wine  ellipse{fill:var(--wine-600);opacity:.4}
.bl-berry circle{fill:var(--wine-700);opacity:.38}

.botanical--tl{top:-6%;left:-7%;transform:rotate(4deg)}
.botanical--br{bottom:-8%;right:-7%;transform:rotate(184deg)}

/* ============================================================
   top bar — monogram + language switcher (no nav, the page just scrolls)
   ============================================================ */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  /* the top padding absorbs the iOS status bar / notch, so the bar's own
     background covers that strip instead of letting the page show through */
  padding:calc(1rem + var(--safe-top)) var(--gutter) 1rem;
  padding-left:max(var(--gutter),var(--safe-left));
  padding-right:max(var(--gutter),var(--safe-right));
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
}
.topbar.is-stuck{
  background:color-mix(in srgb,var(--cream-100) 94%,transparent);
  backdrop-filter:blur(12px) saturate(1.1);
  box-shadow:0 1px 0 color-mix(in srgb,var(--olive-700) 14%,transparent);
  /* keep the safe-area inset when the bar shrinks on scroll */
  padding-top:calc(.6rem + var(--safe-top));
  padding-bottom:.6rem;
}

.monogram{
  font-family:var(--f-serif);font-size:1.15rem;font-weight:500;
  letter-spacing:.24em;text-decoration:none;color:var(--wine-700);
  display:inline-flex;align-items:baseline;gap:.12em;
}
.monogram span{font-family:var(--f-script);font-size:1.35em;letter-spacing:0;color:var(--olive-600);transform:translateY(.06em)}

.lang{display:flex;align-items:center;gap:.35em;font-size:.7rem;letter-spacing:.14em;color:var(--ink-faint)}
.lang button{
  background:none;border:0;padding:.3em .1em;cursor:pointer;
  font-size:inherit;letter-spacing:inherit;color:var(--ink-faint);
  transition:color .3s var(--ease);
}
.lang button:hover{color:var(--wine-600)}
.lang button.is-active{color:var(--olive-800);font-weight:500;text-decoration:underline;text-underline-offset:4px}

@media (max-width:360px){
  .topbar{
    gap:.5rem;
    padding-left:max(.75rem,var(--safe-left));
    padding-right:max(.75rem,var(--safe-right));
  }
  .lang{font-size:.62rem;gap:.25em}
}

/* ============================================================
   hero
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:grid;place-items:center;
  padding:calc(7rem + var(--safe-top)) var(--gutter) 6.5rem;
  text-align:center;
  overflow:clip;          /* clips the botanicals without trapping content */
  text-wrap:balance;
  background:
    radial-gradient(120% 90% at 50% 0%,  color-mix(in srgb,var(--sage-100) 70%,transparent) 0%, transparent 62%),
    radial-gradient(100% 80% at 12% 100%,color-mix(in srgb,var(--sage-200) 55%,transparent) 0%, transparent 58%),
    linear-gradient(168deg,var(--cream-50) 0%,var(--cream-100) 46%,var(--cream-200) 100%);
}
.hero-inner{position:relative;z-index:2;max-width:min(100%,54rem)}

.hero-names{
  font-family:var(--f-script);
  font-weight:400;
  font-size:clamp(3.1rem,1rem + 12vw,8.4rem);
  line-height:.95;
  color:var(--wine-700);
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;
  gap:0 clamp(.5rem,2.2vw,1.4rem);
}
/* same Pinyon Script ampersand as the footer, just kept green */
.hero-names .amp{
  font-family:var(--f-script);font-style:normal;font-weight:400;
  font-size:.58em;color:var(--olive-600);
  transform:translateY(-.02em);
}

.hero-kicker{
  font-family:var(--f-serif);
  font-size:clamp(.95rem,.8rem + .7vw,1.5rem);
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--wine-600);
  margin-top:clamp(.8rem,2.5vw,1.5rem);
}

.hero-rule{
  display:flex;align-items:center;justify-content:center;gap:.9rem;
  margin:clamp(1.6rem,4.5vw,2.8rem) auto;
  max-width:22rem;color:var(--olive-500);
}
.hero-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--olive-500) 55%,transparent),transparent)}
.hero-rule svg{width:1.5rem;height:1.5rem;flex:none;opacity:.75}

.hero-date{display:grid;gap:.5rem}
.hero-date-main{
  font-family:var(--f-serif);
  font-size:clamp(1.3rem,1rem + 1.5vw,2.1rem);
  letter-spacing:.16em;color:var(--ink);
}
.hero-date-sub{
  font-size:.76rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-faint);
}
.hero-inner .btn{margin-top:clamp(2rem,5vw,3.2rem)}

.scroll-hint{
  position:absolute;left:50%;bottom:1.8rem;transform:translateX(-50%);
  z-index:2;display:grid;justify-items:center;gap:.6rem;
  font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-faint);text-decoration:none;
}
.scroll-hint i{display:block;width:1px;height:2.6rem;background:linear-gradient(var(--olive-500),transparent);animation:drip 2.4s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(.2);transform-origin:top;opacity:0}40%{opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none}}

/* short screens (landscape phones, small laptops): let the hero breathe
   instead of squeezing everything into one viewport */
@media (max-height:700px){
  .hero{min-height:0;padding-block:6rem 4.5rem}
  .scroll-hint{display:none}
  .hero-names{font-size:clamp(2.8rem,9vw,5rem)}
}

/* ============================================================
   countdown  — dark olive band
   ============================================================ */
.countdown{
  background:var(--olive-800);
  color:var(--cream-100);
  padding:clamp(3.5rem,9vw,6.5rem) var(--gutter);
  text-align:center;
  position:relative;
}
.countdown .section-script{color:var(--sage-200)}

.clock{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(.5rem,2.5vw,2rem);
  max-width:44rem;margin:clamp(1.8rem,5vw,2.8rem) auto 0;
}
.clock li{display:grid;gap:.4rem;position:relative}
.clock li + li::before{
  content:"";position:absolute;left:calc(-1 * clamp(.25rem,1.25vw,1rem));top:15%;bottom:25%;
  width:1px;background:color-mix(in srgb,var(--sage-300) 32%,transparent);
}
.clock strong{
  font-family:var(--f-serif);font-weight:300;
  font-size:clamp(2.2rem,1.2rem + 5vw,4.4rem);
  line-height:1;color:var(--cream-50);
  font-variant-numeric:tabular-nums;
}
.clock span{
  font-size:clamp(.58rem,.5rem + .3vw,.72rem);
  letter-spacing:.26em;text-transform:uppercase;
  color:var(--sage-300);
}
.clock-note{
  max-width:34rem;margin:clamp(2rem,5vw,3rem) auto 0;
  font-size:.95rem;line-height:1.9;
  color:color-mix(in srgb,var(--cream-100) 78%,transparent);
}

/* ============================================================
   our story
   ============================================================ */
.story{
  background:var(--cream-200);
  padding:clamp(4rem,11vw,8.5rem) var(--gutter);
}
.story-grid{
  max-width:75rem;margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(2rem,6vw,5.5rem);
  align-items:start;
}
@media (max-width:820px){
  .story-grid{grid-template-columns:1fr;gap:2.5rem}
}

.story-aside{position:sticky;top:6rem;display:grid;gap:2rem;justify-items:start}
@media (max-width:820px){.story-aside{position:static;justify-items:center;text-align:center}}

.story-figure{width:min(100%,15rem);overflow:hidden;border-radius:var(--radius)}
.story-figure img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center}
.ca-frame{fill:none;stroke:var(--brown-600);stroke-width:1.6;opacity:.45}
.ca-line{fill:none;stroke:var(--olive-800);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ca-fill{fill:var(--wine-600);opacity:.75}

.story-body{max-width:var(--measure);display:grid;gap:1.55rem}
.story-body p{color:var(--ink-soft);line-height:1.95}

.story-lede{
  font-family:var(--f-serif)!important;
  font-size:clamp(1.35rem,1.05rem + 1.4vw,2rem)!important;
  line-height:1.45!important;
  color:var(--olive-800)!important;
  font-style:italic;
}
.story-accent{
  font-family:var(--f-serif)!important;
  font-size:clamp(1.15rem,1rem + .9vw,1.6rem)!important;
  line-height:1.55!important;
  color:var(--wine-700)!important;
  padding-left:1.4rem;
  border-left:2px solid color-mix(in srgb,var(--wine-600) 45%,transparent);
}

.story-poppy{margin-top:1rem;display:grid;justify-items:start;gap:.7rem}
.story-poppy img{width:8.5rem;aspect-ratio:1;object-fit:cover;border-radius:50%}
.pp-line{fill:none;stroke:var(--olive-800);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.pp-dots circle{fill:var(--olive-800)}
.pp-grass{fill:none;stroke:var(--sage-400);stroke-width:1.6;stroke-linecap:round}
.story-poppy figcaption{
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint);
}

/* ============================================================
   gallery
   ============================================================ */
.gallery{
  background:var(--cream-50);
  padding:clamp(4rem,11vw,8.5rem) var(--gutter);
}
.gallery-head{max-width:75rem;margin:0 auto clamp(2.5rem,6vw,4rem);text-align:center;display:grid;gap:.4rem}

.gallery-grid{
  max-width:75rem;margin-inline:auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
    /* Shorter rows make a two-column, two-row landscape tile closely match
      the photos' natural proportions while portraits retain their height. */
    grid-auto-rows:clamp(8.5rem,13vw,13rem);
  gap:clamp(.6rem,1.6vw,1.1rem);
}
.gallery-item{min-width:0;min-height:0}
.gallery-item--tall{grid-row:span 2}
.gallery-item--wide{grid-column:span 2}
.gallery-item--landscape{grid-column:span 2;grid-row:span 2}
.gallery-item--lithuania img{object-position:center}
.gallery-item--paris img{object-position:center 65%}
.gallery-item--home img{object-position:60% center}
.gallery-item--egypt img{object-position:center 72%}
.gallery-item--ring img{object-position:58% center}
.gallery-item--panorama img{object-position:center}

@media (max-width:900px){
  .gallery-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:clamp(8rem,22vw,12rem);
  }
}
@media (max-width:640px){
  /* Single column: retain the individual character of each photo. */
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .gallery-item--tall,.gallery-item--wide,.gallery-item--landscape{grid-row:auto;grid-column:auto}
  .shot{aspect-ratio:4/3}
  .gallery-item--tall .shot{aspect-ratio:3/4}
  .gallery-item--wide .shot{aspect-ratio:16/9}
  .gallery-item--landscape .shot{aspect-ratio:4/3}
  .gallery-item--panorama .shot{aspect-ratio:2/1}
}

.shot{
  display:block;width:100%;height:100%;padding:0;margin:0;
  border:0;background:var(--sage-100);cursor:pointer;
  position:relative;overflow:hidden;
  border-radius:var(--radius);
  -webkit-tap-highlight-color:transparent;
}
.shot img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(.86) contrast(1.02);
  transition:transform .8s var(--ease),filter .6s var(--ease);
}
/* scrim behind the caption — always on so the text stays readable over any
   photo, and deepens a little on hover */
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--olive-900) 82%,transparent) 0%,
    color-mix(in srgb,var(--olive-900) 34%,transparent) 26%,
    transparent 58%);
  opacity:.85;transition:opacity .5s var(--ease);
}
.shot:hover img{transform:scale(1.05);filter:saturate(1) contrast(1.04)}
.shot:hover::after,.shot:focus-visible::after{opacity:1}

/* captions are permanently visible */
.shot-caption{
  position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cream-50);text-align:left;line-height:1.5;
  text-shadow:0 1px 3px color-mix(in srgb,var(--olive-900) 55%,transparent);
  transition:transform .5s var(--ease);
}
.shot:hover .shot-caption,.shot:focus-visible .shot-caption{transform:translateY(-2px)}

/* ============================================================
   rsvp
   ============================================================ */
.rsvp{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 85% 8%,color-mix(in srgb,var(--olive-600) 55%,transparent) 0%,transparent 60%),
    linear-gradient(160deg,var(--olive-700) 0%,var(--olive-800) 55%,var(--olive-900) 100%);
  color:var(--cream-100);
  padding:clamp(4rem,11vw,8.5rem) var(--gutter);
}
.botanical--rsvp{
  top:-4%;left:-8%;transform:rotate(-2deg);
  width:clamp(220px,32vw,400px);
  opacity:.5;
}
.rsvp .bl-stem{stroke:var(--sage-300);opacity:.4}
.rsvp .bl-leaf--olive ellipse{fill:var(--sage-300);opacity:.26}
.rsvp .bl-leaf--sage ellipse{fill:var(--sage-200);opacity:.2}
.rsvp .bl-leaf--wine ellipse{fill:var(--wine-500);opacity:.34}
.rsvp .bl-berry circle{fill:var(--wine-500);opacity:.4}

/* the header is allowed to run wider than the form so the long question and
   the intro don't wrap after three words */
.rsvp-inner{position:relative;z-index:2;max-width:58rem;margin-inline:auto}
.rsvp-head{
  text-align:center;display:grid;gap:.6rem;
  margin-bottom:clamp(2.5rem,6vw,3.8rem);
}
/* longer than a 2–3 word section label, so ease off the size and tracking a
   touch. Generous leading because the wide letter-spacing makes tight lines
   feel stacked. */
.rsvp-title{
  font-size:clamp(1.25rem,.95rem + 1.4vw,2rem);
  letter-spacing:.16em;
  line-height:1.45;
  margin-inline:auto;
  text-wrap:balance;
}
.rsvp-intro{
  max-width:44rem;margin:.8rem auto 0;
  color:color-mix(in srgb,var(--cream-100) 80%,transparent);
  line-height:1.9;
}

/* ---------- form ---------- */
.form{
  display:grid;gap:clamp(1.4rem,3.5vw,2rem);
  max-width:46rem;margin-inline:auto;width:100%;
}

.field{display:grid;gap:.55rem;margin:0;border:0;min-width:0}
.field label,.field legend{
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;
  color:var(--cream-50);
  /* the hint (<em>) sits on its own line under the label */
  display:flex;flex-direction:column;align-items:flex-start;gap:.5em;
}
.field label em{font-style:normal;letter-spacing:.1em;text-transform:none;font-size:.92em;font-weight:400;color:color-mix(in srgb,var(--cream-100) 78%,transparent)}

.field input[type=text],
.field input[type=email],
.field textarea{
  width:100%;
  font:inherit;font-size:1.02rem;
  color:var(--cream-50);
  background:color-mix(in srgb,var(--olive-900) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--sage-200) 45%,transparent);
  border-bottom-width:2px;border-bottom-color:color-mix(in srgb,var(--sage-200) 65%,transparent);
  border-radius:var(--radius);
  padding:.85em .9em;
  transition:border-color .35s var(--ease),background .35s var(--ease);
  resize:vertical;
}
.field textarea{line-height:1.7;min-height:5.5em}
.field input::placeholder,.field textarea::placeholder{color:color-mix(in srgb,var(--cream-100) 60%,transparent)}
.field input:hover,.field textarea:hover{background:color-mix(in srgb,var(--olive-900) 68%,transparent);border-color:color-mix(in srgb,var(--sage-200) 60%,transparent)}
.field input:focus,.field textarea:focus{
  outline:0;
  background:color-mix(in srgb,var(--olive-900) 72%,transparent);
  border-color:var(--sage-200);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sage-200) 25%,transparent);
}
.field.has-error input,.field.has-error textarea{border-color:#e2919b}
.field-error{
  font-size:.78rem;letter-spacing:.04em;font-weight:600;color:#f4c3c9;margin:0;
}

/* radios */
.field--choice legend{margin-bottom:.35rem}
.choices{display:flex;flex-wrap:wrap;gap:.6rem}
.choice{cursor:pointer;position:relative}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{
  display:inline-block;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  padding:.85em 1.4em;
  color:var(--cream-50);
  background:color-mix(in srgb,var(--olive-900) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--sage-200) 50%,transparent);
  transition:all .35s var(--ease);
}
.choice:hover span{border-color:var(--sage-200);color:var(--cream-50);background:color-mix(in srgb,var(--olive-900) 60%,transparent)}
.choice input:checked + span{
  background:var(--sage-200);border-color:var(--sage-200);color:var(--olive-900);
}
.choice input:focus-visible + span{outline:2px solid var(--sage-200);outline-offset:3px}

.honeypot{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}

.form .btn{justify-self:start;margin-top:.5rem}
.form .btn[disabled]{opacity:.55;cursor:progress}

.form-privacy{
  font-size:.78rem;line-height:1.7;
  color:color-mix(in srgb,var(--cream-100) 78%,transparent);
  max-width:30rem;
}
.form-status{margin:0;font-size:.92rem;line-height:1.7;min-height:1.2em}
.form-status.is-ok{
  color:var(--olive-900);background:var(--sage-200);
  padding:1rem 1.2rem;border-left:3px solid var(--wine-600);
}
.form-status.is-err{color:#eaa8b0}

/* ---------- thank-you panel (replaces the form once sent) ---------- */
.thankyou{
  position:relative;
  max-width:46rem;margin-inline:auto;
  text-align:center;
  display:grid;justify-items:center;gap:.75rem;
  padding:clamp(2.2rem,6vw,3.4rem) clamp(1.4rem,5vw,3rem);
  background:color-mix(in srgb,var(--olive-900) 45%,transparent);
  border:1px solid color-mix(in srgb,var(--sage-200) 35%,transparent);
  border-radius:var(--radius);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
}
.thankyou[hidden]{display:none}
.thankyou.is-in{animation:ty-in .8s var(--ease) both}
@keyframes ty-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.thankyou-mark{
  width:3.1rem;height:3.1rem;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--sage-200);
  color:var(--olive-900);
  margin-bottom:.4rem;
}
.thankyou-mark svg{
  width:1.5rem;height:1.5rem;
  fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:26;stroke-dashoffset:26;
  animation:ty-check .6s .25s var(--ease) forwards;
}
@keyframes ty-check{to{stroke-dashoffset:0}}

.thankyou-script{
  font-family:var(--f-script);
  font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem);
  line-height:1.05;
  color:var(--sage-200);
  margin:0;
}
.thankyou-title{
  font-family:var(--f-serif);
  font-weight:300;
  font-size:clamp(1.35rem,1.1rem + 1.2vw,1.9rem);
  line-height:1.3;
  color:var(--cream-50);
  margin:0;max-width:26ch;
}
.thankyou-text{
  margin:.2rem 0 0;max-width:38ch;
  line-height:1.9;
  color:color-mix(in srgb,var(--cream-100) 80%,transparent);
}
.thankyou-sprig{
  width:1.6rem;height:1.6rem;
  color:var(--sage-300);opacity:.75;
  margin:.9rem 0 .2rem;
}
.thankyou-cal-label{
  margin:0;
  font-family:var(--f-sans);
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;
  color:color-mix(in srgb,var(--cream-100) 72%,transparent);
}
.thankyou-actions{
  display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;
  margin-top:.55rem;
}
.thankyou-actions .btn{padding:.95em 1.7em;font-size:.72rem}

/* only visible inside Messenger/Instagram/… webviews */
.thankyou-inapp{
  margin:1.4rem 0 0;max-width:34ch;
  display:grid;gap:.5rem;justify-items:center;
  font-size:.8rem;line-height:1.65;
  color:color-mix(in srgb,var(--cream-100) 66%,transparent);
}
.thankyou-inapp[hidden]{display:none}
.thankyou-copy{
  font:inherit;font-weight:600;
  color:var(--sage-200);
  background:none;border:0;padding:.2em 0;
  border-bottom:1px solid color-mix(in srgb,var(--sage-200) 45%,transparent);
  cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.thankyou-copy:hover{color:var(--cream-50);border-color:var(--cream-50)}
.thankyou-copy.is-done{color:var(--cream-50);border-color:transparent}
@media (max-width:420px){
  .thankyou-actions{flex-direction:column;align-self:stretch}
  .thankyou-actions .btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .thankyou.is-in{animation:none}
  .thankyou-mark svg{animation:none;stroke-dashoffset:0}
}

/* ============================================================
   footer
   ============================================================ */
.footer{
  background:var(--cream-200);
  padding:clamp(3rem,7vw,5rem) var(--gutter);
  /* clear the iOS home indicator */
  padding-bottom:calc(clamp(3rem,7vw,5rem) + var(--safe-bottom));
  text-align:center;display:grid;gap:.9rem;justify-items:center;
}
.footer-script{
  font-family:var(--f-script);
  font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem);
  color:var(--wine-700);line-height:1.2;
}
.footer-script span{color:var(--olive-600)}
.footer-date{display:grid;gap:.35rem}
.footer-date span:first-child{font-family:var(--f-serif);font-size:1.05rem;letter-spacing:.28em;color:var(--olive-800)}
.footer-date span:last-child{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-faint)}
.footer-contact a{
  font-size:.8rem;letter-spacing:.1em;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--olive-600) 40%,transparent);
  padding-bottom:2px;transition:color .3s var(--ease),border-color .3s var(--ease);
}
.footer-contact a:hover{color:var(--wine-700);border-color:var(--wine-600)}
.footer-sprig{width:1.6rem;height:1.6rem;color:var(--olive-500);opacity:.6;margin-top:.5rem}

/* ============================================================
   lightbox
   ============================================================ */
.lightbox{
  position:fixed;inset:0;z-index:500;
  display:grid;place-items:center;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(.5rem,2vw,1.5rem);
  padding:clamp(1rem,5vw,3rem);
  /* keep the close button and photo clear of the notch / home indicator */
  padding-top:calc(clamp(1rem,5vw,3rem) + var(--safe-top));
  padding-bottom:calc(clamp(1rem,5vw,3rem) + var(--safe-bottom));
  background:color-mix(in srgb,var(--olive-900) 94%,transparent);
  backdrop-filter:blur(6px);
  animation:fade .3s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.lightbox-figure{grid-column:2;display:grid;gap:1rem;justify-items:center;max-height:100%;min-width:0}
.lightbox-figure img{
  max-width:100%;max-height:78svh;width:auto;object-fit:contain;
  background:var(--sage-100);
  animation:pop .4s var(--ease);
}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.lightbox-figure figcaption{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sage-200);text-align:center;
}

.lightbox-close,.lightbox-nav{
  border:1px solid color-mix(in srgb,var(--sage-300) 34%,transparent);
  background:color-mix(in srgb,var(--cream-50) 8%,transparent);
  color:var(--cream-50);cursor:pointer;
  display:grid;place-items:center;
  width:2.9rem;height:2.9rem;border-radius:50%;
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.lightbox-close svg,.lightbox-nav svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lightbox-close:hover,.lightbox-nav:hover{background:color-mix(in srgb,var(--cream-50) 18%,transparent);border-color:var(--sage-200)}
.lightbox-close{
  position:absolute;z-index:2;
  top:calc(clamp(1rem,3vw,2rem) + var(--safe-top));
  right:max(clamp(1rem,3vw,2rem),var(--safe-right));
}
.lightbox-nav--prev{grid-column:1}
.lightbox-nav--next{grid-column:3}
.lightbox-nav--prev:hover{transform:translateX(-3px)}
.lightbox-nav--next:hover{transform:translateX(3px)}

@media (max-width:560px){
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .lightbox-figure{grid-column:1}
  .lightbox-nav{position:static}
  .lightbox-nav--prev,.lightbox-nav--next{grid-row:2}
  .lightbox-nav--prev{justify-self:end;margin-right:.5rem}
  .lightbox-nav--next{justify-self:start;margin-left:.5rem}
}

body.lb-open{overflow:hidden}

/* ============================================================
   scroll reveal
   ============================================================ */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none}
  .shot img,.btn::after{transition:none}
}

/* stagger the hero + grids a touch */
/* names, kicker, rule, date, button */
.hero-inner .reveal:nth-child(1){transition-delay:.05s}
.hero-inner .reveal:nth-child(2){transition-delay:.2s}
.hero-inner .reveal:nth-child(3){transition-delay:.34s}
.hero-inner .reveal:nth-child(4){transition-delay:.46s}
.hero-inner .reveal:nth-child(5){transition-delay:.58s}
.gallery-item:nth-child(2n){transition-delay:.08s}
.gallery-item:nth-child(3n){transition-delay:.16s}

@media print{
  .topbar,.scroll-hint,.lightbox,.form,.botanical,body::before{display:none!important}
  body{background:#fff;color:#000}
}