/* VERSION A · Det godkendte, fotografiske oplæg.
   Ingen frameworks, JavaScript eller eksterne fontfiler.
   Farver og billedbehandling kan ændres samlet her. */
:root {
  color-scheme: light;
  --paper: #f7f5f0;
  --ink: #252722;
  --muted: #656359;
  --line: #c9c4b9;
  --button: #2f3b35;
  --family-paper: #e6e0d5;
  --serif: "Baskerville", "Baskerville Old Face", "GFS Baskerville", "Times New Roman", serif;
  --photo-treatment: saturate(.72) sepia(.10) contrast(.96) brightness(1.025);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.5; }
a { color: inherit; }
img, svg { display: block; }
img { max-width: 100%; }
figure, h1, h2, p { margin: 0; }
a:focus-visible { outline: 2px solid var(--button); outline-offset: 5px; }
.site { max-width: 1440px; margin-inline: auto; }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 10; padding: 12px 20px; background: var(--ink); color: var(--paper); }
.skip-link:focus { top: 12px; }
.opening { display: grid; grid-template-columns: .83fr 1.17fr; align-items: stretch; }
.introduction { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 56px 32px 48px; text-align: center; }
.eyebrow { font-size: 13px; line-height: 1.5; letter-spacing: .29em; text-transform: uppercase; color: var(--muted); }
.eyebrow::after { content: ""; display: block; width: 35px; height: 1px; background: #8a8a7d; margin: 23px auto 30px; }
h1 { font-size: clamp(66px, 7.4vw, 108px); font-weight: 400; line-height: .94; letter-spacing: -.055em; }
.wedding-date { margin-top: 26px; font-size: clamp(28px, 3.25vw, 44px); line-height: 1.25; white-space: nowrap; }
.calendar-button { display: inline-flex; min-height: 54px; min-width: 258px; margin-top: 34px; padding: 12px 32px; align-items: center; justify-content: center; gap: 13px; background: var(--button); color: #fffefb; text-decoration: none; font-size: 23px; line-height: 1.3; transition: background-color 150ms ease; }
.calendar-button:hover { background: #212d27; }
.family { background: var(--family-paper); display: flex; flex-direction: column; justify-content: center; overflow: hidden; min-width: 0; }
.family-portrait { width: 100%; height: auto; aspect-ratio: 10 / 7; object-fit: cover; object-position: 50% 45%; filter: var(--photo-treatment); }

.portrait-slot { position: relative; min-width: 0; }
.placeholder-label { display: none; position: absolute; inset: 72% 16px auto; text-align: center; color: #423d35; font-size: 24px; line-height: 1.4; pointer-events: none; }
.family-portrait[alt="Plads til familiebillede"] + .placeholder-label { display: block; }
.family-names { padding: 20px 20px 30px; text-align: center; color: #423d35; font-size: 19px; line-height: 1.5; letter-spacing: .035em; }
.surname { white-space: nowrap; }
.locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; padding: 34px 24px 32px; }
.location-heading { text-align: center; margin-bottom: 14px; }
.location-heading h2 { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 17px; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; line-height: 1.5; }
.location-heading h2::before, .location-heading h2::after { content: ""; width: 38px; height: 1px; background: #9b9b8e; flex-shrink: 0; }
.location-heading p { font-size: 15px; color: var(--muted); letter-spacing: .08em; margin-top: 3px; }
.location-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; }
.location-images figure { min-width: 0; }
.venue-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: var(--photo-treatment); }
.church-photo { object-position: 50% 48%; }
.organ-photo { object-position: 50% 36%; }
.aerial-photo { object-position: 50% 50%; }
.interior-photo { object-position: 50% 65%; }
.image-caption { margin-top: 8px; font-size: 13px; color: #656157; line-height: 1.4; text-align: right; }
.invitation { min-height: 268px; display: grid; place-content: center; padding: 44px 24px; text-align: center; background: linear-gradient(rgba(247,245,240,.48), rgba(247,245,240,.48)), #e5e0d9 url("assets/images/vilstrup-afslutning.png") center / cover no-repeat; }
.invitation h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 400; line-height: 1.25; }
.invitation h2::after { content: ""; display: block; width: 36px; height: 1px; background: #6b685e; margin: 22px auto 0; }
@media (min-width: 1441px) { .site { border-inline: 1px solid var(--line); } }
@media (max-width: 1040px) and (min-width: 701px) {
  .introduction { padding: 34px 20px; }
  h1 { font-size: 7.4vw; }
  .wedding-date { font-size: 3.25vw; }
  .family-portrait { flex: 1; min-height: 350px; }
  .family-names { font-size: 16px; padding: 18px 12px 24px; }
  .calendar-button { min-width: 220px; font-size: 21px; }
}
@media (max-width: 700px) {
  html { scroll-padding-top: 8px; }
  .opening { grid-template-columns: 1fr; }
  .introduction { padding: 36px 24px 30px; }
  .eyebrow { font-size: 11px; letter-spacing: .23em; }
  .eyebrow::after { margin: 14px auto 22px; width: 28px; }
  h1 { font-size: clamp(62px, 14vw, 82px); line-height: .96; }
  .wedding-date { font-size: 32px; margin-top: 18px; }
  .calendar-button { margin-top: 23px; min-height: 50px; font-size: 21px; }
  .family-portrait { aspect-ratio: 10 / 7; max-height: 420px; }
  .placeholder-label { font-size: 17px; }
  .family-names { font-size: 17px; padding: 18px 16px 24px; letter-spacing: 0; }
  .locations { grid-template-columns: 1fr; gap: 25px; padding: 28px 20px 24px; }
  .location-heading h2 { font-size: 15px; gap: 18px; letter-spacing: .14em; }
  .location-heading p { font-size: 14px; }
  .location-images { gap: 8px; }
  .venue-photo { aspect-ratio: 4 / 5; }
  .image-caption { font-size: 12px; }
  .invitation { min-height: 190px; background-position: center; }
  .invitation h2 { max-width: 290px; font-size: 31px; text-wrap: balance; }
}
@media (max-width: 360px) {
  .wedding-date { font-size: 29px; }
  .family-names { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
@media print {
  .calendar-button, .skip-link { display: none; }
  body { background: white; color: black; }
  .site { max-width: 100%; border: 0; }
  .opening { grid-template-columns: .9fr 1.1fr; }
  .introduction { padding: 24px; }
  h1 { font-size: 54px; }
  .wedding-date { font-size: 26px; }
  .family-names { font-size: 14px; }
  .locations { grid-template-columns: 1fr 1fr; padding: 24px 0; }
  .invitation { min-height: 100px; background: none; }
  .invitation h2 { font-size: 28px; }
}