html { scroll-behavior: smooth; color-scheme: only light; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

* { box-sizing: border-box; }

/* Curtain accent duo: reused across the intro curtain, the countdown, nav underline
   and the outline-button hover so the "theatre" motif reads as one system, not a
   one-off effect on the homepage. */
:root {
  --accent-curtain: #2F4A34;
  --accent-gold: #D4A54A;
}

body {
  margin: 0;
  color-scheme: only light;
  background:
    radial-gradient(circle at 10% 0%, rgba(143,174,134,0.10), transparent 45%),
    radial-gradient(circle at 90% 8%, rgba(199,183,222,0.14), transparent 40%),
    #FBF8F2;
  font-family: 'Karla', sans-serif;
  color: #3A3630;
}

a { color: #6E8A66; }
a:hover { color: #4F6E48; }
::selection { background: #C7B7DE; color: #3A3630; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

@keyframes revealUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes fadeContent { from { opacity: 0; } to { opacity: 1; } }

.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  .reveal {
    animation: revealUp 0.9s cubic-bezier(.22,.9,.34,1) both;
    animation-timeline: view();
    animation-range: entry 0% cover 32%;
  }
}
.lang-fade { animation: fadeContent 0.45s ease both; }

a, button { transition: color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn-anim:hover { transform: translateY(-2px) scale(1.03); }
.btn-anim:active { transform: scale(0.96); }
.nav-link:hover { color: #6E8A66; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .lang-fade { animation: none !important; opacity: 1 !important; }
  a, button, .btn-anim:hover, .btn-anim:active { transition: none !important; transform: none !important; }
}

/* Intro curtain: two panels covering the viewport on load, sliding apart then
   dissolving over the last part of the slide so the reveal ends soft, not abrupt.
   pointer-events: none on the container is inherited by the panels too, so it never
   blocks a click even mid-animation. */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}
.curtain-panel {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--accent-curtain);
  opacity: 1;
  /* Quick to start, then a long, heavy deceleration into the finish (like a real
     stage curtain losing momentum) -- cubic-bezier(0.16,1,0.3,1) is "ease-out-expo". */
  transition: transform 1.9s cubic-bezier(0.16,1,0.3,1), opacity 0.9s ease 1.1s;
}
.curtain-left { left: 0; border-right: 3px solid var(--accent-gold); }
.curtain-right { right: 0; border-left: 3px solid var(--accent-gold); }
.curtain-left.curtain-open { transform: translateX(-100%); opacity: 0; }
.curtain-right.curtain-open { transform: translateX(100%); opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .curtain { display: none !important; }
}

/* Nav */
.nav { background: rgba(251,248,242,0.9); backdrop-filter: blur(6px); border-bottom: 1px solid #EEE9DE; position: sticky; top: 0; z-index: 10; }
.nav-inner {
  max-width: 1120px; margin: 0 auto; padding: clamp(12px,3vw,20px) clamp(20px,5vw,64px);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.nav-title {
  font-family: 'Cormorant Garamond', serif; font-size: clamp(18px,5vw,24px); font-weight: 600;
  letter-spacing: 0.02em; flex: 1 0 100%; text-align: center; position: relative; padding-bottom: 10px;
}
.nav-title::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 46px; height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-curtain), var(--accent-gold), #C7B7DE);
}
.lang-switch { display: flex; gap: 4px; background: #F0EEE6; border-radius: 999px; padding: 4px; margin: 0 auto; order: 1; }
.lang-btn {
  border: none; cursor: pointer; font-size: 12px; letter-spacing: 0.05em; padding: 6px 12px;
  border-radius: 999px; background: transparent; color: #6E6759; font-weight: 600;
}
.lang-btn.active { background: #8FAE86; color: #FBF8F2; }
.nav-links { display: flex; align-items: center; gap: clamp(14px,3.5vw,28px); flex-wrap: wrap; order: 2; margin: 0 auto; }
.nav-link { text-decoration: none; font-size: 13px; letter-spacing: 0.03em; color: #3A3630; }

/* Hero */
.hero {
  padding: clamp(36px,9vw,72px) 0 clamp(48px,9vw,96px); text-align: center;
  display: flex; flex-direction: column; align-items: center; animation: revealUp 0.7s ease-out both;
  position: relative;
}
.hero::before {
  content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%);
  width: min(600px, 90vw); height: 340px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(232,170,110,0.16), rgba(199,183,222,0.14) 55%, transparent 75%);
  filter: blur(10px);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-curtain); margin: 0 0 20px; background: rgba(47,74,52,0.08);
  padding: 6px 16px; border-radius: 999px;
}
.hero h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic;
  font-size: clamp(44px,7vw,88px); line-height: 1.08; letter-spacing: 0.01em; margin: 0; max-width: 14ch;
}
.hero-line2 { font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6759; margin: 22px 0 0; }
.hero-sub { font-size: 18px; line-height: 1.7; max-width: 52ch; margin: 28px 0 0; color: #4C4740; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 36px; justify-content: center; }

.btn { text-decoration: none; padding: 14px 32px; border-radius: 999px; font-size: 15px; letter-spacing: 0.02em; display: inline-block; cursor: pointer; border: none; font-family: 'Karla', sans-serif; }
.btn-primary { background: linear-gradient(135deg, #96B98C, #7A9C71); color: #FBF8F2; box-shadow: 0 8px 24px rgba(111,145,102,0.4); }
.btn-outline { background: #FFFDF9; color: #B8703A; border: 1.5px solid #E8AA6E; }
.btn-outline:hover { background: var(--accent-curtain); color: #FBF8F2; border-color: var(--accent-curtain); }

/* Countdown timer */
.countdown { margin-top: clamp(28px,6vw,44px); text-align: center; }
.countdown-kicker {
  display: inline-block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #6E6759; margin: 0 0 14px;
}
.countdown-grid { display: flex; gap: clamp(8px,2.5vw,16px); justify-content: center; }
.countdown-cell {
  background: var(--accent-curtain); color: #FBF8F2; border-radius: 14px; padding: clamp(10px,3vw,18px) clamp(12px,3.5vw,22px);
  min-width: clamp(56px,14vw,84px); display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 10px 26px rgba(47,74,52,0.28);
}
.countdown-num { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(24px,7vw,38px); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown-unit { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-gold); margin-top: 6px; }
.countdown-past { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: clamp(18px,4vw,24px); color: #5F7A57; margin: 6px 0 0; }

/* Theatre ticket */
.ticket {
  position: relative; max-width: 640px; margin: 0 auto clamp(48px,9vw,96px);
  background: #FFFFFF; border: 1.5px dashed #C6B6DD; border-radius: 26px;
  padding: clamp(18px,4.5vw,28px) clamp(18px,4.5vw,28px) clamp(22px,4.5vw,30px);
  box-shadow: 0 16px 44px rgba(58,54,48,0.09); overflow: hidden;
}
.ticket-stub {
  text-align: center; padding-bottom: clamp(16px,4vw,24px); margin-bottom: clamp(16px,4vw,24px);
  border-bottom: 1.5px dashed #C6B6DD;
}
.ticket-kicker {
  display: inline-block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #7A6296; font-weight: 600; background: #F1ECF5; padding: 4px 14px; border-radius: 999px;
  margin-bottom: 10px;
}
.ticket-show { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(19px,4.6vw,25px); letter-spacing: 0.03em; }
.ticket-tagline {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px;
  font-size: 11.5px; letter-spacing: 0.05em; color: #6E6759; font-style: italic;
}
.ticket-tagline span[aria-hidden] { color: #E8AA6E; font-style: normal; font-size: 10px; }
.ticket-notch {
  position: absolute; left: 50%; transform: translateX(-50%); width: 26px; height: 13px;
  background: #FBF8F2; border-radius: 0 0 999px 999px;
}
.ticket-notch-top { top: -1px; }
.ticket-notch-bottom { bottom: -1px; border-radius: 999px 999px 0 0; }
.ticket .stat-grid { padding: 0; }
.ticket-perforation {
  margin-top: clamp(18px,4vw,26px); height: 0; border-top: 1.5px dashed #E4DCCE;
}
.ticket-seat-row {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; font-size: 10.5px; letter-spacing: 0.08em; color: #A69B8C; font-weight: 600;
}

/* Gift */
.gift { padding: 0 0 clamp(52px,9vw,100px); text-align: center; }
.gift-title { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(22px,5.5vw,30px); margin: 0 0 12px; }
.gift-body { font-size: clamp(13.5px,3.6vw,15.5px); line-height: 1.7; color: #4C4740; max-width: 56ch; margin: 0 auto clamp(24px,5vw,36px); }
.gift-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: 1.5px solid #EEE9DE;
  background: #FFFFFF; color: #3A3630; padding: 12px 24px; border-radius: 999px; font-size: 14px;
  font-weight: 600; font-family: 'Karla', sans-serif; box-shadow: 0 6px 18px rgba(58,54,48,0.05);
}
.gift-toggle-icon { font-size: 16px; line-height: 1; color: var(--accent-gold); transition: transform 0.25s ease; }
.gift-toggle[aria-expanded="true"] .gift-toggle-icon { transform: rotate(45deg); }
.gift-panel {
  max-width: 680px; margin: clamp(20px,4.5vw,32px) auto 0; overflow: hidden;
  max-height: 0; transition: max-height 0.4s ease;
}
.gift-panel.gift-panel-open { max-height: 600px; }
@media (prefers-reduced-motion: reduce) {
  .gift-toggle-icon, .gift-panel { transition: none !important; }
}
.gift-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: clamp(14px,3.5vw,24px); max-width: 680px; margin: 0 auto; text-align: left; }
.gift-card {
  background: #FFFFFF; border: 1px solid #EEE9DE; border-radius: 20px;
  padding: clamp(20px,4.5vw,30px) clamp(18px,4vw,26px); box-shadow: 0 8px 28px rgba(58,54,48,0.06);
  display: flex; flex-direction: column; gap: 6px;
}
.gift-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(17px,4.2vw,20px); margin: 0 0 6px; }
.gift-card p { font-size: 14px; line-height: 1.6; color: #4C4740; margin: 0; }
.gift-holder-label { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #8A8377; margin-top: 8px !important; }
.gift-holder-value { font-weight: 600; }
.gift-iban {
  font-family: 'Karla', monospace; font-size: 14.5px; letter-spacing: 0.03em;
  background: #F6F3EC; border-radius: 10px; padding: 10px 12px; margin: 8px 0 10px !important; word-break: break-all;
}
.gift-copy-btn { align-self: flex-start; padding: 10px 22px; font-size: 13.5px; }
.gift-card .btn-primary { align-self: flex-start; margin-top: 8px; text-decoration: none; }

/* Photo */
.photo-box {
  margin: 36px 0 0; width: 100%; max-width: 340px; border-radius: 22px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(58,54,48,0.12); aspect-ratio: 4/5; position: relative;
  background: #F0EEE6; display: flex; align-items: center; justify-content: center;
}
.photo-box img { width: 100%; height: 100%; object-fit: cover; display: none; }
.photo-box.has-photo img { display: block; }
.photo-box.has-photo .photo-placeholder { display: none; }
.photo-placeholder { text-align: center; padding: 20px; font-size: 13px; color: #8A8377; cursor: pointer; }
.photo-placeholder input { display: block; margin: 10px auto 0; font-size: 12px; }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(10px,3vw,20px); padding: 0 0 clamp(48px,9vw,96px); }
.stat-card {
  border-radius: 18px; padding: clamp(16px,4vw,28px) clamp(12px,3vw,24px); text-align: center;
  border-top: 3px solid transparent; box-shadow: 0 10px 28px rgba(58,54,48,0.05);
  transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(58,54,48,0.09); }
.stat-card p:first-child { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(22px,6vw,32px); margin: 0; }
.stat-card p:last-child { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6E6759; margin: 8px 0 0; }
.stat-green { background: #EDF1E6; border-top-color: #8FAE86; }
.stat-green p:first-child { color: #5F7A57; }
.stat-orange { background: #FBEEE0; border-top-color: #E8AA6E; }
.stat-orange p:first-child { color: #B8703A; }
.stat-purple { background: #F1ECF5; border-top-color: #C7B7DE; }
.stat-purple p:first-child { color: #7A6296; }

@media (max-width: 600px) {
  .stat-grid, .detail-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Story */
.story { padding: 0 0 clamp(52px,9vw,100px); display: flex; gap: clamp(14px,3vw,20px) clamp(28px,5vw,80px); align-items: center; flex-direction: row; }
.story-figure { margin: 0; flex: 0 0 41%; min-width: 220px; border-radius: 22px; overflow: hidden; box-shadow: 0 12px 40px rgba(58,54,48,0.12); border: 4px solid #FFFFFF; outline: 1px solid #EEE9DE; }
.story-text { flex: 1 1 320px; min-width: 0; }
.story-kicker { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8B9F5F; margin: 0 0 10px; }
.story-text h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(24px,6vw,36px); line-height: 1.2; margin: 0; }
.story-text p { font-size: clamp(13.5px,3.8vw,16px); line-height: 1.75; color: #4C4740; max-width: 50ch; margin: clamp(14px,4vw,24px) 0 0; }

@media (max-width: 700px) {
  .story { flex-direction: column; }
  .story-figure { flex: none; width: 100%; }
}

/* Schedule */
.schedule { padding: 0 0 clamp(52px,9vw,100px); }
.section-kicker {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8B9F5F;
  margin: 0 0 clamp(20px,5vw,36px); text-align: center;
}
.section-kicker::before, .section-kicker::after { content: ''; height: 1px; width: 28px; background: currentColor; opacity: 0.4; }
.timeline {
  max-width: 520px; margin: 0 auto; position: relative; padding: clamp(22px,5vw,34px) clamp(22px,5vw,34px) clamp(22px,5vw,34px) clamp(38px,7vw,50px);
  border-left: none; background: linear-gradient(160deg, #F1ECF5, #EDF1E6); border-radius: 22px;
  box-shadow: 0 10px 30px rgba(58,54,48,0.06);
}
.timeline::before { content: ''; position: absolute; left: clamp(22px,5vw,30px); top: clamp(30px,6vw,42px); bottom: clamp(30px,6vw,42px); width: 2px; background: repeating-linear-gradient(180deg, #B6A6CE 0, #B6A6CE 4px, transparent 4px, transparent 9px); }
.timeline-item { position: relative; padding-bottom: clamp(20px,5vw,36px); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position: absolute; left: -26px; top: 2px; width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(255,255,255,0.6); }
.timeline-item time { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(17px,4.5vw,22px); margin: 0; display: block; }
.timeline-item p { font-size: clamp(13.5px,3.8vw,16px); margin: 3px 0 0; }
.schedule-more { font-size: 13px; text-align: center; margin: clamp(18px,4vw,32px) 0 0; color: #6E6759; font-style: italic; }

/* Details */
.details { padding: 0 0 clamp(52px,9vw,100px); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: clamp(14px,3.5vw,24px); }
.detail-card {
  background: #FFFFFF; border: 1px solid #EEE9DE; border-top: 3px solid #EEE9DE; border-radius: 20px;
  padding: clamp(18px,4.5vw,32px) clamp(14px,4vw,28px); box-shadow: 0 8px 28px rgba(58,54,48,0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.detail-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(58,54,48,0.1); }
.detail-card:nth-child(1) { border-top-color: #8FAE86; }
.detail-card:nth-child(2) { border-top-color: #E8AA6E; }
.detail-card:nth-child(3) { border-top-color: #C7B7DE; }
.detail-card h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(18px,4.5vw,22px); margin: 0 0 8px; }
.detail-card p { font-size: clamp(13.5px,3.6vw,15px); line-height: 1.7; margin: 0; color: #4C4740; }

/* FAQ */
.faq { padding: 0 0 clamp(52px,9vw,100px); }
.faq-list { max-width: 680px; margin: 0 auto; display: grid; gap: clamp(10px,3vw,16px); }
.faq-item {
  background: #F6F3EC; border-radius: 16px; padding: clamp(16px,4vw,24px) clamp(14px,4vw,28px);
  border-left: 3px solid #C6B6DD; box-shadow: 0 6px 18px rgba(58,54,48,0.04);
}
.faq-item:nth-child(3n+1) { border-left-color: #8FAE86; }
.faq-item:nth-child(3n+2) { border-left-color: #E8AA6E; }
.faq-item:nth-child(3n+3) { border-left-color: #C7B7DE; }
.faq-item h3 { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(16px,4vw,19px); margin: 0 0 6px; color: #3A3630; }
.faq-item p { font-size: clamp(13.5px,3.6vw,15px); line-height: 1.65; margin: 0; color: #4C4740; }

/* RSVP */
.rsvp { padding: 0 0 clamp(52px,9vw,100px); }
.rsvp-card { max-width: 560px; margin: 0 auto; background: #FFFFFF; border-radius: 24px; padding: clamp(20px,5vw,52px); box-shadow: 0 16px 48px rgba(58,54,48,0.1); }
.rsvp-kicker { display: block; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #8B9F5F; margin: 0 0 10px; text-align: center; }
.rsvp-card h2 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(21px,5vw,28px); line-height: 1.3; margin: 0 0 clamp(18px,4.5vw,32px); text-align: center; }
.rsvp-form { display: grid; gap: clamp(14px,3.5vw,22px); }
.field label { display: block; font-size: 13px; letter-spacing: 0.03em; color: #6E6759; margin: 0 0 8px; }
.field input[type="text"], .field input[type="number"], .field select {
  width: 100%; border: 1.5px solid #EEE9DE; border-radius: 14px; padding: 12px 16px; font-size: 15px;
  font-family: 'Karla', sans-serif; background: #FBF8F2;
}
.child-note { font-size: 12.5px; line-height: 1.55; color: #6E6759; background: #F6F3EC; border-radius: 12px; padding: 10px 14px; margin: -6px 0 0; }
.field-help { font-size: 11.5px; color: #8A8377; margin: 6px 0 0; }
.attend-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
.attend-btn { flex: 1; min-width: 140px; cursor: pointer; border-radius: 999px; padding: 12px 18px; font-size: 14px; background: transparent; }
.attend-yes { color: #5F7A57; border: 1.5px solid #8FAE86; }
.attend-yes.active { background: #8FAE86; color: #FBF8F2; }
.attend-no { color: #B8703A; border: 1.5px solid #E8AA6E; }
.attend-no.active { background: #E8AA6E; color: #FBF8F2; }
.rsvp-submit { cursor: pointer; border: none; background: linear-gradient(135deg, #96B98C, #7A9C71); color: #FBF8F2; padding: 14px; border-radius: 999px; font-size: 15px; letter-spacing: 0.02em; box-shadow: 0 8px 24px rgba(111,145,102,0.4); width: 100%; }
.rsvp-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.rsvp-thanks { background: #EDF1E6; border-radius: 20px; padding: 28px; text-align: center; }
.rsvp-thanks p:first-child { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 22px; margin: 0 0 8px; color: #5F7A57; }
.rsvp-thanks p:last-child { font-size: 15px; margin: 0; color: #4C4740; }
.rsvp-error { color: #B8703A; font-size: 13px; margin: -8px 0 0; text-align: center; }

/* Close section */
.closing { position: relative; background: linear-gradient(135deg,#EDF1E6,#F1ECF5); overflow: hidden; }
.closing-inner { max-width: 1120px; margin: 0 auto; padding: clamp(56px,10vw,96px) clamp(20px,5vw,64px); text-align: center; position: relative; z-index: 1; }
.closing h3 { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-style: italic; font-size: clamp(32px,4.5vw,52px); line-height: 1.25; margin: 0; color: #3A3630; }

footer { padding: 32px 0; font-size: 13px; text-align: center; color: #8A8377; }

.deco-svg { position: absolute; pointer-events: none; z-index: 0; opacity: 0.9; }