:root {
  --paper: #fbf7f2;
  --paper-deep: #f6ece5;
  --blush: #efd0c5;
  --blush-soft: #f7e2db;
  --terracotta: #a35f4d;
  --terracotta-dark: #7c4437;
  --green: #405642;
  --green-soft: #72806e;
  --gold: #b48a49;
  --ink: #26342b;
  --ink-soft: #6b655f;
  --line: rgba(180, 138, 73, .46);
  --shadow: 0 24px 70px rgba(94, 72, 57, .14);
  --font-display: "Julius Sans One", sans-serif;
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-script: "Pinyon Script", cursive;
  --font-sans: "Karla", Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 4% 8%, rgba(239,208,197,.50) 0 10rem, transparent 10.2rem),
    radial-gradient(circle at 96% 24%, rgba(239,208,197,.35) 0 12rem, transparent 12.2rem),
    radial-gradient(circle at 8% 88%, rgba(239,208,197,.34) 0 13rem, transparent 13.2rem),
    var(--paper);
  font-family: var(--font-serif);
  font-size: 1.22rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  opacity: .12;
  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='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.15'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; }
section { padding: 6rem 1.5rem; position: relative; }
.section-kicker {
  margin: 0 0 .7rem;
  font: 500 .76rem/1.4 var(--font-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--terracotta);
  text-align: center;
}
.script-title {
  margin: 0 0 1.3rem;
  font-family: var(--font-script);
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  font-weight: 400;
  color: var(--green);
  text-align: center;
}

/* HERO */
.hero {
  min-height: 100svh;
  width: 100%;
  position: relative;
  background-image: url("../assets/img/header-background.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(251,247,242,.08) 0%, rgba(251,247,242,.02) 50%, rgba(251,247,242,.12) 100%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 76%, rgba(251,247,242,.10), transparent 34%);
  pointer-events: none;
}
.hero-copy,
.hero-floral,
.hero-photo,
.hero-button,
.hero-divider,
.hero-countdown,
.eyebrow,
.hero-date,
.hero-welcome {
  display: none !important;
}
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  width: 1px;
  height: 2.8rem;
  overflow: hidden;
  z-index: 4;
}
.scroll-hint span {
  display:block;
  width:1px;
  height:100%;
  background: rgba(180,138,73,.9);
  animation:flow 2.2s ease-in-out infinite;
}
@keyframes flow { 0%{transform:translateY(-100%)} 55%{transform:translateY(0)} 100%{transform:translateY(100%)} }

/* REVEAL */
.anima .reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* INTRO */
.intro { max-width: 52rem; margin: 0 auto; text-align: center; padding-bottom: 3.5rem; }
.bilingual-lead { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.bilingual-lead em { color: var(--green-soft); }

/* COUNTDOWN */
.countdown { text-align:center; padding-top: 3.5rem; }
.countdown-grid {
  max-width: 58rem;
  margin: 2.5rem auto 0;
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap: 1rem;
}
.cd-box {
  padding: 2rem 1rem 1.5rem;
  border: 1px solid rgba(180,138,73,.32);
  border-radius: 1.4rem;
  background: rgba(255,255,255,.52);
  box-shadow: 0 12px 35px rgba(102,75,58,.07);
}
.cd-num { display:block; font-size:clamp(2.5rem,6vw,4.6rem); line-height:1; color:var(--terracotta); font-variant-numeric:tabular-nums; }
.cd-label { display:block; margin-top:.65rem; font:500 .68rem/1.4 var(--font-sans); letter-spacing:.13em; text-transform:uppercase; color:var(--green); }
.cd-today { font-size: 1.8rem; font-style: italic; color: var(--terracotta); }

/* SCHEDULE */
.schedule { max-width: 78rem; margin: 0 auto; }
.timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 1.25rem;
  margin-top: 3rem;
}
.event {
  text-align:center;
  padding: 2.2rem 1.4rem 1.8rem;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(180,138,73,.33);
  border-radius: 2rem;
  box-shadow: 0 20px 55px rgba(95,70,54,.08);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.event-icon {
  width: 5.4rem;
  height: 5.4rem;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--terracotta-dark);
  background: rgba(239,208,197,.55);
  margin-bottom: .6rem;
}
.event-icon svg { width: 66%; height:66%; fill:none; stroke:currentColor; stroke-width:2.3; stroke-linecap:round; stroke-linejoin:round; }
.jw-icon { flex-direction:column; line-height:.75; font-family:Arial,sans-serif; }
.jw-icon strong { font-size:1.6rem; font-weight:500; }
.jw-icon span { font-size:1.13rem; margin-top:.35rem; }
.event-time { margin:.2rem 0 .7rem; font-size:3rem; line-height:1; color:var(--gold); }
.event-name { margin:0 0 .6rem; font-family:var(--font-serif); font-weight:600; font-size:1.45rem; line-height:1.12; color:var(--green); }
.event-name span, .event-venue span { color:var(--gold); }
.event-venue { margin:0 0 .35rem; font-family:var(--font-sans); font-size:.93rem; font-weight:500; line-height:1.35; }
.event-address { margin:0 0 1.25rem; color:var(--ink-soft); font-family:var(--font-sans); font-size:.92rem; line-height:1.5; }
.event-actions { margin-top:auto; }
.btn-location { min-height: 3.2rem; font-size:.61rem; letter-spacing:.08em; padding:.85rem 1rem; }
.qr-link { display:block; width:8.5rem; margin:1.2rem auto 0; padding:.35rem; background:white; border-radius:.65rem; border:1px solid rgba(180,138,73,.35); }
.qr-link img { width:100%; height:auto; image-rendering:pixelated; }

/* PHOTO */
.photo-section {
  max-width: 72rem;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(2rem,5vw,5rem);
  align-items:center;
}
.photo-frame {
  position:relative;
  border-radius: 2rem;
  overflow:hidden;
  box-shadow:var(--shadow);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
}
.photo-frame::before {
  content:"";
  position:absolute;
  inset:-4% -7% 5% -7%;
  background:
    radial-gradient(circle at 50% 82%, rgba(251,247,242,.98) 0 17%, transparent 56%),
    radial-gradient(circle at 20% 24%, rgba(239,208,197,.24), transparent 58%),
    radial-gradient(circle at 80% 18%, rgba(239,208,197,.18), transparent 56%);
  filter: blur(8px);
  z-index:0;
}
.photo-frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 -70px 60px -40px rgba(251,247,242,.82); pointer-events:none; }
.photo-frame img { position:relative; z-index:1; width:100%; aspect-ratio: 4/5; object-fit:cover; object-position:50% 42%; }
.photo-copy { text-align:center; }
.photo-copy .script-title { font-size: clamp(3.8rem,7vw,6rem); }
.photo-copy p { font-size:1.5rem; margin:.6rem 0; }
.photo-copy .de { color:var(--green-soft); font-style:italic; }

/* RSVP / DETAILS */
.rsvp { max-width:46rem; margin:0 auto; text-align:center; }
.rsvp-title { margin:0; font-family:var(--font-display); font-weight:400; font-size:clamp(1.3rem,3vw,2rem); letter-spacing:.12em; text-transform:uppercase; line-height:1.55; }
.rsvp-title span { color:var(--green-soft); }
.rsvp-subtitle { margin:1.4rem 0 2rem; }
.pending-card { display:inline-block; min-width:min(100%, 24rem); padding:1.25rem 1.5rem; border:1px dashed var(--gold); border-radius:1rem; background:rgba(255,255,255,.45); }
.pending-card span { font:500 .72rem/1.3 var(--font-sans); letter-spacing:.15em; text-transform:uppercase; color:var(--terracotta); }
.pending-card p { margin:.5rem 0 0; }
.details { max-width:72rem; margin:0 auto; padding-top:2rem; }
.detail-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.detail-item { text-align:center; padding:1.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.detail-item h3 { margin:0 0 .7rem; font:500 .78rem/1.4 var(--font-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--terracotta); }
.detail-item p { margin:0; }
.detail-item em { color:var(--green-soft); }

.quote { text-align:center; padding-top:3rem; padding-bottom:6rem; }
.quote p { margin:0; font-family:var(--font-script); font-size:clamp(3.2rem,7vw,5.5rem); color:var(--terracotta); line-height:.9; }
.quote em { font-family:var(--font-serif); font-size:.35em; color:var(--green); }
.footer {
  position: relative;
  text-align:center;
  padding:4rem 1.5rem 3.8rem;
  border-top:1px solid var(--line);
  overflow:hidden;
}
.footer p { margin:.2rem 0; position:relative; z-index:2; }
.footer-names { font-family:var(--font-script); font-size:2.7rem; color:var(--terracotta); }
.footer-date { font:400 .76rem/1.5 var(--font-sans); letter-spacing:.24em; color:var(--green); }
.footer a { display:inline-block; margin-top:.7rem; text-decoration:none; font:400 .76rem/1.5 var(--font-sans); letter-spacing:.08em; color:var(--ink-soft); }
.footer-credit { margin-top:1rem !important; font:400 .82rem/1.7 var(--font-sans); color:var(--ink-soft); }
.footer-credit a { margin-top:0; color:var(--terracotta-dark); font-weight:500; }

@media (max-width: 900px) {
  .hero { min-height: 100svh; background-position: center center; }
  .hero-signature { bottom: clamp(3.2rem, 9vh, 5rem); width: 94%; }
  .scroll-hint { display:none; }
  .timeline { grid-template-columns:1fr; max-width:34rem; margin-left:auto; margin-right:auto; }
  .photo-section { grid-template-columns:1fr; max-width:38rem; }
  .photo-copy { order:-1; }
  .detail-grid { grid-template-columns:1fr; max-width:34rem; margin:0 auto; }
}

@media (max-width: 640px) {
  body { font-size:1.12rem; }
  .hero { min-height: 100svh; background-position: center center; }
  .hero-signature { bottom: 7vh; padding-inline:.5rem; }
  .hero-signature h1 { font-size: clamp(3.6rem, 17vw, 5.4rem); }
  .hero-signature p { font-size: .95rem; letter-spacing:.22em; text-indent:.22em; margin-top:.7rem; }
  .form-grid, .attendance-options { grid-template-columns: 1fr; }
  .rsvp-form { padding:1.2rem; border-radius:1.3rem; }
  section { padding:4.5rem 1.15rem; }
  .hero { min-height: 58svh; background-position: center center; }
  .countdown-grid { grid-template-columns:repeat(2,1fr); gap:.7rem; }
  .cd-box { padding:1.4rem .6rem 1.1rem; }
  .event { padding:2rem 1rem 1.5rem; }
  .btn-location { width:100%; }
  .photo-frame { margin:0 .25rem; }
}



/* HERO SIGNATURE */
.hero-signature {
  position: absolute;
  left: 50%;
  bottom: clamp(4.2rem, 10vh, 7.2rem);
  transform: translateX(-50%);
  z-index: 3;
  width: min(92%, 56rem);
  text-align: center;
  padding: .5rem 1.2rem 1rem;
  color: var(--terracotta);
  text-shadow: 0 2px 18px rgba(255,255,255,.92), 0 1px 2px rgba(255,255,255,.9);
}
.hero-signature::before {
  content: "";
  position: absolute;
  inset: -1.4rem -2rem;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(251,247,242,.82) 0%, rgba(251,247,242,.55) 42%, rgba(251,247,242,0) 74%);
  filter: blur(8px);
}
.hero-signature h1 {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(4.4rem, 9vw, 7.8rem);
  line-height: .86;
  letter-spacing: .01em;
}
.hero-signature h1 span {
  color: var(--gold);
  font-size: .72em;
}
.hero-signature p {
  margin: 1rem 0 0;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: .28em;
  text-indent: .28em;
  color: #4b4945;
}

/* RSVP FORM */
.rsvp {
  max-width: 58rem;
  margin: 0 auto;
  text-align: center;
}
.rsvp-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.3rem,3vw,2rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.55;
}
.rsvp-title span { color: var(--green-soft); }
.rsvp-subtitle { margin: 1.3rem 0 2.3rem; }
.rsvp-form {
  text-align: left;
  padding: clamp(1.2rem, 3vw, 2.25rem);
  border: 1px solid rgba(180,138,73,.34);
  border-radius: 1.8rem;
  background: rgba(255,255,255,.68);
  box-shadow: 0 20px 60px rgba(95,70,54,.09);
  backdrop-filter: blur(8px);
}
.form-grid {
  display: grid;
  grid-template-columns: .7fr 1.3fr;
  gap: 1rem 1.15rem;
}
.field { display: flex; flex-direction: column; gap: .45rem; }
.field-full { grid-column: 1 / -1; }
.field label,
.attendance-fieldset legend {
  font: 500 .76rem/1.4 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--terracotta-dark);
}
.field label span,
.attendance-fieldset legend span {
  color: var(--green-soft);
  text-transform: none;
  letter-spacing: .02em;
}
.field input,
.field textarea {
  width: 100%;
  border: 1px solid rgba(180,138,73,.42);
  border-radius: .9rem;
  background: rgba(251,247,242,.84);
  color: var(--ink);
  font: 400 1rem/1.45 var(--font-sans);
  padding: .9rem 1rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field input:focus,
.field textarea:focus {
  border-color: var(--terracotta);
  background: white;
  box-shadow: 0 0 0 4px rgba(163,95,77,.09);
}
.field textarea { resize: vertical; min-height: 9rem; }
.attendance-fieldset {
  margin: 1.35rem 0;
  padding: 0;
  border: 0;
}
.attendance-fieldset legend { margin-bottom: .75rem; }
.attendance-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.attendance-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-height: 5.1rem;
  padding: .95rem 1rem;
  border-radius: 1rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.attendance-option:hover { transform: translateY(-2px); }
.attendance-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.attendance-yes {
  background: rgba(77, 150, 91, .10);
  border-color: rgba(77, 150, 91, .34);
}
.attendance-no {
  background: rgba(183, 78, 78, .09);
  border-color: rgba(183, 78, 78, .30);
}
.attendance-square {
  width: 1.45rem;
  height: 1.45rem;
  flex: 0 0 1.45rem;
  border: 2px solid currentColor;
  border-radius: .28rem;
  position: relative;
}
.attendance-yes .attendance-square { color: #397a46; }
.attendance-no .attendance-square { color: #a64b4b; }
.attendance-option input:checked + .attendance-square::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font: 700 1rem/1 var(--font-sans);
}
.attendance-yes input:checked + .attendance-square { background: #397a46; }
.attendance-no input:checked + .attendance-square { background: #a64b4b; }
.attendance-option:has(input:checked) {
  box-shadow: 0 10px 26px rgba(57, 72, 60, .10);
}
.attendance-yes:has(input:checked) { border-color: #397a46; background: rgba(77,150,91,.16); }
.attendance-no:has(input:checked) { border-color: #a64b4b; background: rgba(183,78,78,.15); }
.attendance-text { display:flex; flex-direction:column; line-height:1.25; }
.attendance-text strong { font-family: var(--font-serif); font-size: 1.14rem; font-weight: 600; color: var(--ink); }
.attendance-text small { margin-top:.22rem; font:400 .78rem/1.3 var(--font-sans); color:var(--ink-soft); }
.submit-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 24rem);
  margin: 1.2rem auto 0;
  border: 1px solid var(--terracotta);
  border-radius: 999px;
  background: var(--terracotta);
  color: white;
  padding: 1rem 1.4rem;
  font: 500 .78rem/1.3 var(--font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.submit-button:hover { transform: translateY(-2px); background: var(--terracotta-dark); }
.submit-button:disabled { opacity: .55; cursor: wait; transform: none; }
.form-status {
  min-height: 1.35rem;
  margin: .9rem 0 0;
  text-align: center;
  font: 500 .88rem/1.4 var(--font-sans);
  color: var(--terracotta-dark);
}
.form-status.error { color: #9b3f3f; }
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* SUCCESS MODAL */
.success-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  place-items: center;
  padding: 1.2rem;
}
.success-modal.open { display: grid; }
.success-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(35,31,29,.42);
  backdrop-filter: blur(8px);
}
.success-modal-card {
  position: relative;
  z-index: 1;
  width: min(100%, 34rem);
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  border: 1px solid rgba(180,138,73,.42);
  border-radius: 1.7rem;
  background:
    radial-gradient(circle at 15% 12%, rgba(239,208,197,.46), transparent 30%),
    radial-gradient(circle at 85% 90%, rgba(239,208,197,.35), transparent 32%),
    var(--paper);
  box-shadow: 0 28px 90px rgba(52,42,35,.24);
}
.success-modal-close {
  position: absolute;
  top: .75rem;
  right: .85rem;
  border: 0;
  background: transparent;
  color: var(--terracotta-dark);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}
.success-heart {
  color: var(--terracotta);
  font-size: 2.8rem;
  line-height: 1;
}
.success-modal-card h2 {
  margin: .65rem 0 .45rem;
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 5vw, 2.7rem);
  font-weight: 500;
  color: var(--terracotta-dark);
}
.success-modal-card p { margin: 0 0 1.4rem; color: var(--green); }
.success-modal-button {
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: rgba(255,255,255,.6);
  color: var(--terracotta-dark);
  padding: .85rem 1.25rem;
  font: 500 .76rem/1.2 var(--font-sans);
  letter-spacing: .06em;
  cursor: pointer;
}
body.modal-open { overflow: hidden; }



@media (max-width: 900px) {
  .hero { min-height: 100svh; background-position: center center; }
  .hero-signature {
    bottom: clamp(3.4rem, 8vh, 5.2rem);
    width: 94%;
  }
  .hero-signature h1 { font-size: clamp(4rem, 13vw, 6.4rem); }
  .form-grid { grid-template-columns: 1fr; }
  .field-full { grid-column: auto; }
}

@media (max-width: 640px) {
  .hero { min-height: 100svh; background-position: center center; }
  .hero-signature {
    bottom: 7vh;
    width: 96%;
    padding-inline: .45rem;
  }
  .hero-signature::before { inset: -1rem -.5rem; }
  .hero-signature h1 { font-size: clamp(3.6rem, 17vw, 5.25rem); }
  .hero-signature p {
    margin-top: .65rem;
    font-size: .92rem;
    letter-spacing: .2em;
    text-indent: .2em;
  }
  .attendance-options { grid-template-columns: 1fr; }
  .rsvp-form { padding: 1.15rem; border-radius: 1.3rem; }
  .attendance-option { min-height: 4.7rem; }
  .success-modal-card { padding: 2.35rem 1.25rem 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .anima .reveal, .reveal { opacity:1; transform:none; transition:none; }
  .scroll-hint span { animation:none; }
}