/* ============================================================
   9·9·27 — Brandon & Kayla
   Castell Tamarit · Tarragona, Spain · 09·09·27
   Self-contained stylesheet (tokens inlined so this folder
   deploys standalone to Netlify / Vercel / Cloudflare Pages).
   Mirrors the 9·9·27 design system tokens.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ---------- Tokens ---------- */
:root {
  /* Palette */
  --cream-50:#FBF6EC; --cream-100:#F5EDDE; --cream-200:#ECE0CB;
  --sand-300:#DEC9A8; --sand-400:#C9A87C; --sand-500:#B5895C;
  --terra-400:#C97651; --terra-500:#B85C3C; --terra-600:#9C4A2F;
  --teal-300:#5FB8B3; --teal-400:#2E9499; --teal-500:#1C7378; --teal-600:#155A60; --teal-700:#0E4247;
  --olive-400:#6E7B53; --olive-500:#54603F; --pine-600:#3C4A33;
  --bloom-400:#CB5E78;
  --ink-900:#2A2620; --ink-700:#4A4339; --ink-500:#6E6555; --ink-300:#9C9281;
  --white:#fff; --success:#2F7D5B; --error:#A53B2A;

  /* Semantic */
  --surface-page:var(--cream-100);
  --surface-card:var(--cream-50);
  --surface-sunk:var(--cream-200);
  --surface-ink:var(--teal-700);
  --text-strong:var(--ink-900);
  --text-body:var(--ink-700);
  --text-muted:var(--ink-500);
  --brand:var(--teal-500); --brand-hover:var(--teal-600);
  --accent:var(--terra-500); --accent-hover:var(--terra-600);
  --line:var(--sand-300); --line-strong:var(--sand-400);

  /* Type */
  --font-display:'Cormorant Garamond',Garamond,'Times New Roman',serif;
  --font-body:'EB Garamond',Georgia,serif;
  --ls-eyebrow:0.32em;

  /* Layout */
  --section-y:clamp(72px,12vw,150px);
  --content-max:1180px;
  --content-narrow:760px;
  --gutter:clamp(20px,5vw,64px);
  --measure:62ch;

  /* Radius / shadow */
  --radius-sm:3px; --radius-md:6px; --radius-lg:10px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(74,67,57,.06),0 2px 6px rgba(74,67,57,.05);
  --shadow-md:0 4px 14px rgba(74,67,57,.08),0 12px 32px rgba(74,67,57,.07);
  --shadow-lg:0 18px 50px rgba(42,38,32,.16);

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur:320ms;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--surface-page);
  color:var(--text-body);
  font-family:var(--font-body);
  font-size:1.125rem;
  line-height:1.62;
  font-feature-settings:"liga" 1,"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--teal-400);outline-offset:3px;border-radius:2px;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* ---------- Typography primitives ---------- */
h1,h2,h3{font-family:var(--font-display);font-weight:500;color:var(--text-strong);margin:0;line-height:1.04;letter-spacing:.005em;}
p{margin:0 0 1em;text-wrap:pretty;}
.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:var(--ls-eyebrow);
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 var(--gutter,1rem);
}
.eyebrow--light{color:var(--terra-400);}
.script{font-style:italic;}
.amp{font-style:italic;font-weight:400;}

/* ---------- Layout helpers ---------- */
.container{max-width:var(--content-max);margin-inline:auto;padding-inline:var(--gutter);width:100%;}
.narrow{max-width:var(--content-narrow);}
.section{padding-block:var(--section-y);}
.section--sunk{background:var(--surface-sunk);}
.center{text-align:center;}
.lead{font-size:clamp(1.18rem,2.2vw,1.5rem);line-height:1.5;color:var(--text-body);}

/* ---------- Reveal animation ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);}
.reveal.is-in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.12s;}
.reveal[data-delay="2"]{transition-delay:.24s;}
.reveal[data-delay="3"]{transition-delay:.36s;}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  transition:background var(--dur) ease,box-shadow var(--dur) ease,padding var(--dur) ease;
}
.nav__mark{
  font-family:var(--font-display);font-size:1.35rem;font-weight:600;letter-spacing:.18em;
  color:var(--white);text-decoration:none;
}
.nav__links{display:flex;gap:clamp(14px,2.4vw,34px);list-style:none;margin:0;padding:0;}
.nav__links a{
  font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;
  color:var(--white);opacity:.86;transition:opacity var(--dur);
}
.nav__links a:hover{opacity:1;}
.nav--solid{background:rgba(251,246,236,.94);backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);}
.nav--solid .nav__mark{color:var(--teal-700);}
.nav--solid .nav__links a{color:var(--ink-700);}
.nav__toggle{display:none;background:none;border:0;color:var(--white);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;}
.nav--solid .nav__toggle{color:var(--ink-700);}
@media (max-width:680px){
  .nav__links{display:none;}
  .nav__toggle{display:block;}
  .nav__links.is-open{
    display:flex;flex-direction:column;gap:18px;
    position:absolute;top:100%;right:var(--gutter);
    background:rgba(251,246,236,.97);backdrop-filter:blur(8px);
    padding:22px 28px;border-radius:var(--radius-md);box-shadow:var(--shadow-md);
  }
  .nav__links.is-open a{color:var(--ink-700);}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;}
.hero__bg{position:absolute;inset:0;z-index:-2;}
.hero__slide{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 2.4s ease-in-out;transform:scale(1.06);
  animation:heroDrift 22s ease-in-out infinite alternate;
}
.hero__slide.is-active{opacity:1;}
@keyframes heroDrift{from{transform:scale(1.04);}to{transform:scale(1.12);}}
.hero__scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to bottom,rgba(14,42,46,.42) 0%,rgba(14,42,46,.12) 30%,rgba(14,42,46,.18) 60%,rgba(14,42,46,.62) 100%);
}
.hero__inner{text-align:center;color:var(--white);padding:0 var(--gutter);max-width:980px;}
.hero__eyebrow{
  font-size:.82rem;letter-spacing:.42em;text-transform:uppercase;
  color:rgba(255,255,255,.9);margin:0 0 clamp(18px,3vw,30px);
}
.hero__names{
  display:flex;flex-direction:column;align-items:center;gap:.04em;
  font-family:var(--font-display);font-weight:500;color:var(--white);
  font-size:clamp(3.6rem,11vw,8.5rem);line-height:.92;letter-spacing:.01em;
  text-shadow:0 2px 40px rgba(14,42,46,.45);margin:0;
}
.hero__names .n{display:block;}
.hero__names .amp{font-size:.5em;font-style:italic;font-weight:400;color:var(--terra-300,#DD9A78);line-height:1;margin:.02em 0;}
.hero__sub{font-style:italic;font-size:clamp(1.15rem,2.6vw,1.7rem);margin:clamp(14px,2.4vw,22px) 0 clamp(26px,4vw,40px);color:rgba(255,255,255,.94);}
.hero__meta{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;
  font-size:.78rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.92);
}
.hero__meta .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.6);}
.hero__cue{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;color:rgba(255,255,255,.85);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;
}
.hero__cue .line{width:1px;height:42px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cue 2.6s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.4;transform:scaleY(.7);}50%{opacity:1;transform:scaleY(1);}}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-body);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  padding:15px 30px;border-radius:var(--radius-pill);border:1px solid transparent;
  text-decoration:none;transition:transform var(--dur) var(--ease-out),background var(--dur),color var(--dur),border-color var(--dur),box-shadow var(--dur);
}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--brand);color:var(--cream-50);box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--brand-hover);box-shadow:var(--shadow-md);}
.btn--accent{background:var(--accent);color:var(--cream-50);}
.btn--accent:hover{background:var(--accent-hover);}
.btn--ghost{background:transparent;border-color:var(--line-strong);color:var(--text-strong);}
.btn--ghost:hover{background:var(--surface-sunk);border-color:var(--text-strong);}
.btn--on-ink{background:transparent;border-color:rgba(245,237,222,.4);color:var(--cream-100);}
.btn--on-ink:hover{background:rgba(245,237,222,.1);border-color:var(--cream-100);}
.btn--block{width:100%;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.s-head{margin-bottom:clamp(36px,5vw,64px);}
.s-head h2{font-size:clamp(2.4rem,6vw,4.4rem);}
.s-head .lead{margin-top:18px;}
.rule{width:46px;height:1px;background:var(--line-strong);margin:0 auto;}

/* ---- Save the Date ---- */
.date-display{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(3.6rem,13vw,8rem);line-height:1;color:var(--teal-600);
  letter-spacing:.02em;margin:8px 0 6px;
}
.date-display .sep{color:var(--accent);font-style:italic;padding:0 .12em;}
.date-weekday{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;color:var(--text-muted);margin-bottom:clamp(28px,4vw,42px);}

/* ============================================================
   GALLERY (venue + engagement)
   ============================================================ */
.gallery{display:grid;gap:clamp(12px,1.6vw,20px);grid-template-columns:repeat(6,1fr);}
.gallery figure{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-sunk);box-shadow:var(--shadow-sm);}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out);}
.gallery figure:hover img{transform:scale(1.05);}
.g-tall{grid-column:span 2;grid-row:span 2;aspect-ratio:3/4;}
.g-wide{grid-column:span 4;aspect-ratio:16/10;}
.g-half{grid-column:span 3;aspect-ratio:4/3;}
.g-third{grid-column:span 2;aspect-ratio:1/1;}
@media (max-width:760px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .g-tall,.g-wide,.g-half,.g-third{grid-column:span 1;grid-row:auto;aspect-ratio:4/5;}
  .g-wide{grid-column:span 2;aspect-ratio:16/10;}
}

/* Engagement gallery — uniform grid of portrait frames, evenly aligned */
.gallery--eng{grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;}
.gallery--eng .g-eng{margin:0;position:relative;overflow:hidden;border-radius:var(--radius-md);background:var(--surface-sunk);box-shadow:var(--shadow-sm);aspect-ratio:4/5;}
.gallery--eng .g-eng img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out);}
.gallery--eng .g-eng:hover img{transform:scale(1.05);}
@media (max-width:760px){
  .gallery--eng{grid-template-columns:repeat(2,1fr);}
}

/* Engagement placeholders (used before photos are added) */
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:clamp(12px,1.6vw,20px);}
.ph{
  aspect-ratio:4/5;border-radius:var(--radius-md);border:1px dashed var(--line-strong);
  background:
    repeating-linear-gradient(45deg,transparent 0 14px,rgba(201,168,124,.07) 14px 28px),
    var(--surface-sunk);
  display:grid;place-items:center;color:var(--text-muted);
}
.ph span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;}

/* Venue split layout */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;}
.split--reverse .split__media{order:-1;}
.split__media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);aspect-ratio:4/5;}
.split__media img{width:100%;height:100%;object-fit:cover;}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:32px;}.split--reverse .split__media{order:0;}}

/* Venue fact list */
.facts{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:14px;}
.facts li{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;}
.facts .k{flex:0 0 116px;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);}
.facts .v{color:var(--text-strong);font-size:1.05rem;}

/* ============================================================
   RSVP FORM
   ============================================================ */
.rsvp{background:var(--surface-ink);color:var(--cream-100);}
.rsvp h2{color:var(--cream-50);}
.rsvp .eyebrow{color:var(--terra-400);}
.rsvp .lead{color:rgba(245,237,222,.82);}
.rsvp .rule{background:rgba(245,237,222,.32);}
.form-card{
  background:rgba(251,246,236,.04);
  border:1px solid rgba(245,237,222,.16);
  border-radius:var(--radius-lg);
  padding:clamp(22px,4vw,48px);
  margin-top:clamp(34px,5vw,56px);
}
.field{margin-bottom:22px;}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.field--row{grid-template-columns:1fr;}}
.label{display:block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,237,222,.78);margin-bottom:9px;}
.label .req{color:var(--terra-400);margin-left:3px;}
.input,.textarea,.select{
  width:100%;font-family:var(--font-body);font-size:1.05rem;color:var(--cream-50);
  background:rgba(14,42,46,.4);border:1px solid rgba(245,237,222,.22);
  border-radius:var(--radius-md);padding:13px 15px;transition:border-color var(--dur),background var(--dur);
}
.input::placeholder,.textarea::placeholder{color:rgba(245,237,222,.4);}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--teal-300);background:rgba(14,42,46,.62);}
.textarea{resize:vertical;min-height:88px;line-height:1.5;}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23DEC9A8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:42px;}
.input.invalid,.textarea.invalid{border-color:var(--terra-400);background:rgba(184,92,60,.14);}
.err-msg{color:var(--terra-400);font-size:.86rem;margin-top:7px;display:none;}
.err-msg.show{display:block;}

/* Segmented choice (attend / yes-no) */
.choice{display:flex;gap:12px;flex-wrap:wrap;}
.choice input{position:absolute;opacity:0;width:0;height:0;}
.choice label{
  flex:1;min-width:130px;text-align:center;cursor:pointer;
  padding:13px 16px;border:1px solid rgba(245,237,222,.22);border-radius:var(--radius-md);
  font-size:.92rem;letter-spacing:.04em;transition:all var(--dur);color:rgba(245,237,222,.82);
}
.choice label:hover{border-color:rgba(245,237,222,.5);}
.choice input:checked+label{background:var(--terra-500);border-color:var(--terra-500);color:var(--cream-50);box-shadow:var(--shadow-sm);}
.choice input:focus-visible+label{outline:2px solid var(--teal-300);outline-offset:2px;}

/* Conditional reveal blocks */
.cond{display:none;margin-top:6px;padding-left:16px;border-left:2px solid rgba(245,237,222,.18);}
.cond.show{display:block;animation:condIn .4s var(--ease-out);}
@keyframes condIn{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}

/* Kids rows */
.kid-row{display:grid;grid-template-columns:1fr 110px auto;gap:12px;align-items:end;margin-bottom:14px;}
@media (max-width:560px){.kid-row{grid-template-columns:1fr 80px auto;}}
.kid-remove{
  background:rgba(245,237,222,.06);border:1px solid rgba(245,237,222,.2);color:rgba(245,237,222,.8);
  border-radius:var(--radius-md);width:46px;height:48px;font-size:1.2rem;line-height:1;transition:all var(--dur);
}
.kid-remove:hover{background:rgba(184,92,60,.3);border-color:var(--terra-400);color:var(--cream-50);}
.link-add{
  background:none;border:0;color:var(--teal-300);font-family:var(--font-body);
  font-size:.92rem;letter-spacing:.04em;padding:4px 0;display:inline-flex;align-items:center;gap:8px;
}
.link-add:hover{color:var(--cream-50);}
.link-add .plus{display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid currentColor;border-radius:50%;font-size:.95rem;}

.form-foot{margin-top:30px;display:flex;flex-direction:column;gap:16px;align-items:center;}
.form-note{font-size:.86rem;color:rgba(245,237,222,.55);}

/* Success state */
.rsvp-success{display:none;text-align:center;padding:clamp(30px,6vw,60px) 0;}
.rsvp-success.show{display:block;animation:condIn .6s var(--ease-out);}
.success-seal{
  width:84px;height:84px;border-radius:50%;margin:0 auto 26px;
  border:1px solid var(--terra-400);display:grid;place-items:center;color:var(--terra-400);
}
.success-seal svg{width:38px;height:38px;}
.rsvp-success h3{font-family:var(--font-display);font-size:clamp(2rem,5vw,3rem);color:var(--cream-50);margin-bottom:14px;}
.rsvp-success p{color:rgba(245,237,222,.82);max-width:46ch;margin-inline:auto;}
.form-error-banner{
  display:none;margin-top:18px;padding:12px 16px;border-radius:var(--radius-md);
  background:rgba(184,92,60,.18);border:1px solid var(--terra-400);color:var(--cream-50);font-size:.95rem;text-align:center;
}
.form-error-banner.show{display:block;}

/* ============================================================
   TRAVEL (stubbed)
   ============================================================ */
.travel-card{
  border:1px solid var(--line);background:var(--surface-card);border-radius:var(--radius-lg);
  padding:clamp(26px,4vw,44px);box-shadow:var(--shadow-sm);
}
.travel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:36px;}
@media (max-width:760px){.travel-grid{grid-template-columns:1fr;}}
.travel-stub h3{font-size:1.4rem;margin-bottom:8px;}
.travel-stub p{color:var(--text-muted);font-size:1rem;margin:0;}
.travel-card h3{font-size:1.4rem;margin-bottom:8px;}
.travel-rate{font-size:.95rem;font-style:italic;color:var(--text-strong);margin:14px 0 8px;}
.travel-link{
  display:inline-block;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand);text-decoration:none;border-bottom:1px solid var(--line-strong);
  padding-bottom:2px;transition:color var(--dur),border-color var(--dur);
}
.travel-link:hover{color:var(--accent);border-color:var(--accent);}

/* ============================================================
   EXPLORE CATALONIA
   ============================================================ */
.explore{background:var(--surface-sunk);}
.idea-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);margin-top:clamp(34px,5vw,56px);
}
@media (max-width:820px){.idea-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:540px){.idea-grid{grid-template-columns:1fr;}}
.idea-card{
  background:var(--surface-card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur);
}
.idea-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.idea-label{
  display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);margin-bottom:12px;
}
.idea-card h3{font-size:1.55rem;margin-bottom:10px;}
.idea-card p{color:var(--text-body);font-size:1.02rem;margin:0;line-height:1.55;}
.soon-tag{
  display:inline-block;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:4px 12px;margin-bottom:18px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--surface-ink);color:var(--cream-100);text-align:center;padding:clamp(56px,9vw,110px) var(--gutter);}
.footer__names{font-family:var(--font-display);font-size:clamp(2.4rem,7vw,4.2rem);font-weight:500;color:var(--cream-50);margin-bottom:18px;}
.footer__names .amp{font-style:italic;color:var(--terra-400);}
.footer__meta{font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,237,222,.72);line-height:2.1;}
.footer__mark{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.3em;color:var(--terra-400);margin-top:34px;}
.footer__rule{width:46px;height:1px;background:rgba(245,237,222,.3);margin:34px auto;}