:root {
  --cream: #f8f4ec;
  --cream-2: #fffdf8;
  --sage-pale: #edf0e8;
  --sage: #8c9a80;
  --sage-deep: #545f49;
  --gold: #b0894f;
  --gold-soft: #c8ab77;
  --ink: #37342c;
  --ink-body: #5d574b;
  --line: #e5ddcc;
  --error-bg: #f6e7e2;
  --error-text: #9a4234;

  --font-display: "Cormorant Garamond", Cormorant, Georgia, "Times New Roman", serif;
  --font-body: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max: 1080px;
  --narrow: 680px;
  --header-h: 76px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink-body);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 0.4em;
  letter-spacing: 0.01em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--sage-deep); }

.link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(176, 137, 79, 0.35);
  padding-bottom: 1px;
  transition: border-color 0.25s, color 0.25s;
}
.link:hover { color: var(--sage-deep); border-color: var(--sage-deep); }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: 0.72rem;
  color: var(--gold);
  margin: 0 0 0.9rem;
}

/* --- Decorative divider (line · leaf · line) ------------------------- */

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 1.4rem 0 0;
}
.section-head .divider { margin: 1.2rem auto 0; }
.divider__line {
  display: block;
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.divider__line:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}
.divider__leaf {
  width: 9px;
  height: 9px;
  background: var(--gold);
  border-radius: 50% 0;
  transform: rotate(45deg);
  flex: 0 0 auto;
}

/* --- Header ---------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.4rem 0;
  background: linear-gradient(to bottom, rgba(25, 23, 18, 0.5), rgba(25, 23, 18, 0));
  transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.4s ease;
}
.site-header.scrolled,
.site-header:has(.site-nav.is-open) {
  background: rgba(248, 244, 236, 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px rgba(55, 52, 44, 0.05);
  padding: 0.7rem 0;
}
/* Solid state: dark on cream (base rules below default to light over the hero). */
.site-header.scrolled .logo,
.site-header:has(.site-nav.is-open) .logo { color: var(--ink); text-shadow: none; }
.site-header.scrolled .site-nav a,
.site-header:has(.site-nav.is-open) .site-nav a { color: var(--ink); }
.site-header.scrolled .nav-toggle span,
.site-header:has(.site-nav.is-open) .nav-toggle span { background: var(--ink); }
.site-header__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--cream);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem 1.05rem;
}
.site-nav a {
  position: relative;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cream);
  text-decoration: none;
  white-space: nowrap;
  padding: 2px 0;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -2px;
  height: 1px;
  background: var(--gold);
  transition: right 0.3s ease;
}
.site-nav a:hover::after { right: 0; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 24px;
  background: var(--cream);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* --- Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--header-h) + 2rem) 1.5rem 5rem;
  text-align: center;
  overflow: hidden;
  color: var(--cream);
  background-color: #2b2a24;
  /* --hero-image is overridden inline by main.js when the admin portal has
     an uploaded replacement, so the gradient above it stays here in CSS. */
  --hero-image: url("/images/hero-couple.jpg");
  /* The family sits right of centre in hero-couple.jpg, so plain "center"
     crops them off on narrow screens. Only the horizontal value matters:
     on tall viewports cover scales by height, so the width is what spills. */
  --hero-focus-x: 62%;
  --hero-focus-y: 50%;
  --hero-zoom: cover;
  background-image:
    linear-gradient(rgba(33, 31, 25, 0.48), rgba(33, 31, 25, 0.62)),
    var(--hero-image);
  background-size: var(--hero-zoom);
  background-position: var(--hero-focus-x) var(--hero-focus-y);
  background-repeat: no-repeat;
}

/* Wider than the photo's own 3:2, cover scales by width and leaves no
   horizontal slack — so the focal point can't do anything. Zooming past
   cover creates that slack and brings the family closer in. The crop is
   taken from the bottom (pier) rather than the top, to protect the faces. */
@media (min-aspect-ratio: 3/2) {
  .hero {
    /* Width-driven, not "auto 124%": that stops covering the width past
       ~1.86:1 (short or ultrawide windows) and would leak the backdrop.
       124% of the width always covers here, and gives a constant 24% of
       horizontal slack for the focal point to work with. */
    --hero-zoom: 124% auto;
    --hero-focus-x: 76%;
    --hero-focus-y: 34%;
  }
}
.hero__frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(248, 244, 236, 0.45);
  pointer-events: none;
}
.hero .eyebrow { color: var(--gold-soft); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45); }
.hero .btn--primary:hover {
  background: var(--cream);
  color: var(--sage-deep);
  border-color: var(--cream);
}
/* Over the photo, fade to cream rather than to transparent gold. */
.hero .btn--gold:hover {
  background: var(--cream);
  color: #7d5d2f;
  border-color: var(--cream);
}
.hero__inner {
  position: relative;
  max-width: 760px;
}
.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  margin: 0 0 1.3rem;
  font-weight: 500;
}
.hero__name {
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 11vw, 6.2rem);
  line-height: 0.95;
  color: var(--cream);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.hero__amp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--gold-soft);
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1;
  margin: 0.1em 0;
}
.hero__meta {
  /* Date on one line, venue on the next. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--cream);
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}
.hero__dot { color: var(--gold); margin: 0 0.3em; }

.countdown {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 2rem 0 2.4rem;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.countdown__num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--cream);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.countdown__label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(248, 244, 236, 0.85);
  margin-top: 0.5rem;
}
.countdown__done {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--cream);
  margin: 0;
}

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 1px solid rgba(176, 137, 79, 0.5);
  border-radius: 14px;
  display: grid;
  place-items: start center;
  padding-top: 7px;
}
.scroll-cue span {
  width: 3px;
  height: 8px;
  border-radius: 2px;
  background: var(--gold);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue {
  0%, 100% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  80% { opacity: 0; transform: translateY(12px); }
}

/* --- Buttons --------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding: 0.95rem 2.6rem;
  border: 1px solid var(--sage-deep);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}
.btn--primary { background: var(--sage-deep); color: var(--cream); }
.btn--primary:hover { background: transparent; color: var(--sage-deep); }

/* The OSA call to action, in the gold accent. Dark warm text rather than
   cream: cream on gold is only 2.9:1, this is 6.1:1. */
.btn--gold {
  background: var(--gold-soft);
  color: #3b2d13;
  border-color: var(--gold-soft);
}
.btn--gold:hover {
  background: transparent;
  color: var(--gold-soft);
  border-color: var(--gold-soft);
}

.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* --- Sections -------------------------------------------------------- */

.section { padding: 6rem 1.5rem; scroll-margin-top: var(--header-h); }
.section--alt { background: var(--sage-pale); }
.section__inner { max-width: var(--max); margin: 0 auto; }
.section__inner--narrow { max-width: var(--narrow); }

.section-head { text-align: center; margin-bottom: 3rem; }
.section-title { font-size: clamp(2rem, 5vw, 3.1rem); margin: 0; }
.section-lead {
  max-width: 640px;
  margin: 0 auto 2.5rem;
  text-align: center;
  font-size: 1.12rem;
}

/* --- Timeline -------------------------------------------------------- */

.timeline {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 560px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft), transparent);
}
.timeline__item {
  position: relative;
  padding: 0 0 2.2rem 3rem;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: 0;
  top: 6px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid var(--gold);
}
.section--alt .timeline__dot { background: var(--sage-pale); }
.timeline__time {
  display: block;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold);
  margin-bottom: 0.2rem;
}
.timeline__body h3 { font-size: 1.6rem; margin: 0 0 0.15em; }
.timeline__body p { margin: 0; color: var(--ink-body); }

/* --- Cards ----------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}
.card {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(55, 52, 44, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 50px rgba(55, 52, 44, 0.08);
}
.card__media { overflow: hidden; }
.card__media img {
  display: block;
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: 2rem 2.2rem 2.2rem; }
.card h3 { font-size: 1.7rem; }
.card__meta { color: var(--ink-body); font-size: 0.98rem; }
.card__links { margin-top: 1rem; }

/* --- Decorative image band ------------------------------------------ */

.band {
  position: relative;
  /* min-height alone (vh-only) let the box get extremely wide-and-short on
     wide monitors — background-size:cover then crops almost the whole image
     away vertically. Tying height to viewport width too keeps the box's
     aspect ratio (and therefore how much of the image survives the crop)
     much closer between a phone and an ultrawide screen. */
  min-height: max(44vh, 40vw);
  max-height: 620px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1.5rem;
  background-color: #2b2a24;
  --band-image: url("/images/wedding-table.jpg");
  background-image:
    linear-gradient(rgba(33, 31, 25, 0.5), rgba(33, 31, 25, 0.5)),
    var(--band-image);
  background-size: cover;
  background-position: center 35%;
  background-repeat: no-repeat;
}
.band__text {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.6vw, 2.5rem);
  line-height: 1.3;
  color: var(--cream);
  max-width: 640px;
  margin: 0;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

/* --- Om oss / About -------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 940px;
  margin: 0 auto;
}
.about__media img {
  display: block;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 16px 44px rgba(55, 52, 44, 0.12);
}
.about__text p { font-size: 1.12rem; }
@media (max-width: 760px) {
  .about { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* Editable prose (admin-editable) may contain intentional line breaks. */
.section-lead,
.about__text p,
.faq-list details p,
.card__meta {
  white-space: pre-line;
}

/* --- Form ------------------------------------------------------------ */

.osa-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  margin-top: 1rem;
}
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-label {
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.form-input,
.form-textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--cream-2);
  resize: vertical;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.form-input:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--sage);
  box-shadow: 0 0 0 3px rgba(140, 154, 128, 0.22);
}
.radio-group { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.radio-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--cream-2);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.2s, background 0.2s;
}
.radio-pill:hover { border-color: var(--sage); }
.radio-pill:has(input:checked) {
  border-color: var(--sage-deep);
  background: rgba(140, 154, 128, 0.14);
}
.radio-pill input { accent-color: var(--sage-deep); }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

.error-box {
  background: var(--error-bg);
  color: var(--error-text);
  padding: 0.8rem 1rem;
  border-radius: 6px;
  font-size: 0.95rem;
  margin: 0;
}
.confirmation-box {
  margin-top: 1.5rem;
  padding: 2rem;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
}
.confirmation-box strong {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--ink);
}

/* --- Gallery + lightbox --------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.gallery-item {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
  aspect-ratio: 1 / 1;
  background: var(--cream-2);
}
.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.05); }
.gallery-empty { color: var(--ink-body); font-style: italic; text-align: center; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(30, 28, 23, 0.9);
  display: grid;
  place-items: center;
  padding: 2rem;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw;
  max-height: 88vh;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.6rem;
  width: 44px;
  height: 44px;
  font-size: 2rem;
  line-height: 1;
  color: var(--cream);
  background: none;
  border: none;
  cursor: pointer;
}

/* --- FAQ ------------------------------------------------------------- */

.faq-list { max-width: 640px; margin: 0 auto; }
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: 1.1rem 0;
}
.faq-list summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ink);
  padding-right: 2rem;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold);
  font-size: 1.5rem;
  font-family: var(--font-body);
  transition: transform 0.3s;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0.8rem 0 0; color: var(--ink-body); }

/* --- Contact --------------------------------------------------------- */

.contact-line { text-align: center; font-size: 1.15rem; margin: 0.3rem 0; }

/* --- Footer ---------------------------------------------------------- */

.site-footer {
  text-align: center;
  padding: 4rem 1.5rem;
  background: var(--ink);
  color: var(--cream);
}
.monogram {
  display: inline-grid;
  place-items: center;
  width: 66px;
  height: 66px;
  border: 1px solid var(--gold-soft);
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--gold-soft);
  margin-bottom: 1.2rem;
}
.site-footer__names {
  font-family: var(--font-display);
  font-size: 1.6rem;
  margin: 0 0 0.2rem;
  color: var(--cream);
}
.site-footer__date {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(248, 244, 236, 0.7);
  margin: 0;
}

/* --- Scroll reveal --------------------------------------------------- */

.has-js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* --- Mobile ---------------------------------------------------------- */

@media (max-width: 920px) {
  .nav-toggle { display: flex; }
  .site-header__inner { position: relative; }
  .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: rgba(248, 244, 236, 0.98);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(55, 52, 44, 0.08);
    padding: 0.5rem 1.6rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a {
    font-family: var(--font-display);
    font-size: 1.1rem;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-shadow: none;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a::after { display: none; }
}

@media (max-width: 620px) {
  .section { padding: 4.2rem 1.3rem; }
  .hero__frame { inset: 14px; }
  .countdown { gap: 1rem; }
  .countdown__unit { min-width: 56px; }
  .countdown__num { font-size: 2.1rem; }
  .card { padding: 1.8rem; }
}

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