:root {
  /* Palette "Save the Date SG" — dark hero */
  --nuit-alpine: #1A1A2E;
  --or-imperial: #B8973A;
  --or-clair: #D4AF55;
  --ivoire: #F5F0E8;
  --rouge-suisse: #D52B1E;
  --gris-perle: #C8C0A8;

  /* Palette "Victoria-Jungfrau" — light form/content */
  --blanc-creme: #FAFAF8;
  --or-profond: #8C6A1A;
  --brun-nuit: #2A2015;
  --marbre-clair: #E8E0D0;
  --bronze: #7A6A50;

  /* Semantic aliases */
  --bg-dark: var(--nuit-alpine);
  --bg-light: var(--blanc-creme);
  --text-on-light: var(--brun-nuit);
  --accent: var(--or-imperial);
  --accent-strong: var(--or-clair);
  --border-color: var(--marbre-clair);
  --muted-on-dark: var(--gris-perle);
  --muted-on-light: var(--bronze);
  --required: var(--rouge-suisse);

  --font-serif: Georgia, "Times New Roman", serif;

  /* Hero background image */
  --hero-bg-image: url('../img/panorama.webp');

  --shadow: 0 12px 40px -16px rgba(26, 26, 46, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--text-on-light);
  background: var(--bg-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 300;
  line-height: 1.15;
}

/* --- Language switcher --- */
.lang-switch {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding: .75rem 1.5rem;
  background: var(--bg-dark);
  border-bottom: 1px solid var(--accent);
}
.lang-switch a {
  color: var(--muted-on-dark);
  text-decoration: none;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lang-switch a[aria-current="true"] { color: var(--accent-strong); font-weight: 600; }
.lang-switch a:hover { color: var(--ivoire); }

/* --- Hero --- */
.hero {
  background-image: var(--hero-bg-image);
  background-size: cover; /* box ratio below matches the image ratio exactly, so cover never crops */
  background-repeat: no-repeat;
  background-position: center;
  aspect-ratio: 3840 / 1448; /* panorama.webp's own ratio: height always tracks width, no leftover band */
  color: var(--brun-nuit);
  padding: clamp(4rem, 11vw, 6.5rem) 1.5rem clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

@media (max-width: 1080px) {
  /* One continuous formula for phone through tablet portrait (iPad Pro
     12.9" included, up to 1024px CSS width): the fixed aspect-ratio makes
     the hero short at these widths, so padding-top must stay small to
     keep the text on the sky/mountains instead of sliding onto the car.
     A single clamp() avoids the visible jump a phone/tablet breakpoint
     split would create at the boundary. */
  .hero { padding-top: clamp(1rem, 5vw, 2.5rem); }
}

.hero__inner { max-width: 720px; margin: 0 auto; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .8rem;
  font-weight: 400;
  color: var(--accent-strong);
  margin: 0 0 1rem;
}

.glow-strong {
  text-shadow:
    0 0 8px rgba(255, 255, 255, 1),
    0 0 18px rgba(255, 255, 255, .85),
    0 0 30px rgba(255, 255, 255, .6);
}

.hero h1 {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  margin: 1rem 0 .5rem;
  letter-spacing: .01em;
}

.lead {
  font-style: italic;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--brun-nuit);
  max-width: 56ch;
  margin: 0 auto;
}

.lead--below { display: none; }

@media (max-width: 430px) {
  /* Phone widths (iPhone SE through Pro Max): shrink both hero lines
     enough to keep each on a single line — the longer EN/DE/ES lead
     phrasing otherwise wraps to two lines at the base clamp() size. */
  .hero h1 { font-size: clamp(1.5rem, 7.2vw, 1.9rem); }
  .lead { font-size: clamp(.7rem, 2.9vw, .85rem); }
}

@media (max-width: 430px) and (orientation: portrait) {
  /* Mobile portrait only: the second line is too small overlaid on the
     photo — move it below the hero image instead, styled like the
     hotel/venue line (gold, same size) rather than shrunk on the photo. */
  .lead--overlay { display: none; }
  .lead--below {
    display: block;
    font-style: italic;
    color: var(--or-profond);
    font-size: 1.15rem;
    margin: 0 0 1.25rem;
  }
}

.divider {
  border: none;
  border-top: 1px solid var(--accent);
  width: 80px;
  margin: 1.5rem auto;
}

.facts-bar {
  background: var(--bg-light);
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.facts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  margin: 0;
}

.facts div { margin: 0; }
.facts dd {
  margin: 0;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--or-profond);
  font-size: 1.05rem;
}
.facts dd.fact-date {
  font-size: 1.6rem;
  font-style: italic;
}

.submit-btn {
  background: var(--accent);
  color: var(--nuit-alpine);
  border: none;
  border-radius: 0;
  font: inherit;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .85rem;
}

/* --- Form --- */
.form-section { padding: 0 1.5rem clamp(2.5rem, 6vw, 4.5rem); }

.form-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0;
  box-shadow: var(--shadow);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}

.form-card h2 { font-size: 1.75rem; margin: 0 0 .35rem; color: var(--or-profond); }
.form-card__sub { color: var(--muted-on-light); margin: 0 0 2rem; font-style: italic; }

.field { margin-bottom: 1.25rem; }
.field-row { display: flex; gap: 1rem; }
.field-row .field { flex: 1; }
.field--small { max-width: 130px; }

.field--group {
  border: 1px solid var(--border-color);
  border-radius: 0;
  padding: .85rem 1rem;
  margin: 0 0 1.25rem;
}
.field--group legend {
  font-weight: 500;
  font-size: .92rem;
  letter-spacing: .04em;
  padding: 0 .35rem 0 0;
}
.field--inline {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
  font-size: .92rem;
  margin: .4rem 0;
}
.field--inline input { margin: 0; }

label { display: block; font-weight: 500; font-size: .92rem; letter-spacing: .02em; margin-bottom: .4rem; }
.req { color: var(--required); }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], textarea {
  width: 100%;
  padding: .7rem .85rem;
  font: inherit;
  color: var(--text-on-light);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 0;
  transition: border-color .15s, box-shadow .15s;
}

input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(184, 151, 58, .2);
}

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--rouge-suisse);
  box-shadow: 0 0 0 3px rgba(213, 43, 30, .12);
}

textarea { resize: vertical; }

.field--check {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.field--check input { margin-top: .25rem; flex-shrink: 0; }
.field--check label { font-weight: 400; font-size: .88rem; color: var(--muted-on-light); margin: 0; }

/* Hidden honeypot */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.submit-btn {
  width: 100%;
  margin-top: .5rem;
  padding: .9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  transition: background .2s;
}
.submit-btn:hover { background: var(--accent-strong); }
.submit-btn:disabled { opacity: .7; cursor: progress; }

.submit-btn__spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(26, 26, 46, .3);
  border-top-color: var(--nuit-alpine);
  border-radius: 50%; /* sole exception to the sharp-corners rule: a circular loading indicator */
  display: none;
  animation: spin .7s linear infinite;
}
.submit-btn.is-loading .submit-btn__spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-status {
  margin: 1.1rem 0 0;
  padding: .8rem 1rem;
  border-radius: 0;
  font-size: .92rem;
  display: none;
}
.form-status.is-success { display: block; background: #e7f4ea; color: #1d6b39; }
.form-status.is-error { display: block; background: #fdecea; color: #b3261e; }

.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--muted-on-light);
  font-size: .85rem;
  letter-spacing: .04em;
  border-top: 1px solid var(--border-color);
  background: var(--bg-light);
}
.site-footer a { color: var(--or-profond); }

@media (max-width: 430px), (max-height: 500px) and (orientation: landscape) {
  /* Phone class, either orientation (portrait width or landscape height
     stays phone-sized): drop the forced line break in the copyright. */
  .site-footer br { display: none; }
}

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--nuit-alpine);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 0;
  box-shadow: var(--shadow);
  z-index: 50;
}
.back-to-top:hover { background: var(--accent-strong); }

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
  .field--small { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}