/* =========================================================================
   Isabella · Konfirmation — #invitation-site
   Selve websitet. Findes i dokumentet fra start, men er skjult og inert,
   indtil introen har lagt invitationskortet tilbage som hero.

   Opbygning:
     1. Site-tokens
     2. Synlighed under introen + hero
     3. Layout, typografi og fælles komponenter
     4. Navigation
     5. Sektioner (02–09) i sidens rækkefølge
     6. Akvarel-blomster
     7. Footer
     8. Reveal-animationer
   Farver, fonte og timing kommer fra base.css.
   ========================================================================= */

/* ---------- 1. Site-tokens ---------- */

:root {
  --c-paper:          var(--c-card);   /* sidens papir — samme som invitationen */
  --c-paper-deep:     #F2EBE2;         /* rolig kontrasttone */
  --c-paper-blush:    #F6ECE6;         /* varm tone til "Dagen" */
  --c-line:           rgba(138, 90, 76, .2);
  --c-line-soft:      rgba(138, 90, 76, .12);

  --fs-display:  clamp(40px, 5.8vw, 86px);
  --fs-h2:       clamp(34px, 4.4vw, 60px);
  --fs-h3:       clamp(22px, 2vw, 27px);
  --fs-body:     clamp(16px, 1.1vw, 18px);
  --fs-label:    11px;

  --nav-h:       64px;
  --container-wide: 1380px;
  --radius:      2px;
}

/* ---------- 2. Synlighed under introen ---------- */

.site [hidden] { display: none !important; }


html.js:not([data-settled]) .site { visibility: hidden; }

.site { transition: opacity var(--t-reduced-fade) var(--ease-soft); }
.site.is-fading-in { opacity: 0; }

/* Hero = invitationskortet */
.site-hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 420px;
}

.site-hero > .card {
  position: absolute;
  inset: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- 3. Layout, typografi og fælles komponenter ---------- */

.site-main {
  position: relative;
  background: var(--c-paper);
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.container--wide { width: min(100% - 2 * var(--gutter), var(--container-wide)); }

.section {
  position: relative;
  padding-block: var(--section-space);
}
section[id] { scroll-margin-top: calc(var(--nav-h) - 1px); }

.tone-blush    { background: var(--c-paper-blush); }
.tone-deep     { background: var(--c-paper-deep); }

/* Sektionsnummer: "02 —— VELKOMMEN" */
.section-index {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(20px, 2.6vw, 32px);
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.section-index__num {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-accent);
}
.section-index__num::after {
  content: "";
  width: 36px;
  height: 1px;
  background: var(--c-accent);
  opacity: .4;
}

.section-head { margin-bottom: clamp(48px, 7vw, 96px); }
.section-head--center { text-align: center; }
.section-head--center .section-index { justify-content: center; }

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--c-line);
}
.section-head--split .section-index { margin: 0; order: 2; }

.section-head__title,
.display {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  color: var(--c-ink);
  text-wrap: balance;
}
.section-head__title { font-size: var(--fs-h2); line-height: 1.06; }
.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.005em; }
.display--small { font-size: clamp(44px, 5vw, 72px); }
.display em,
.section-head__title em { font-style: italic; }

.section-head__meta {
  margin: 18px 0 0;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.section-head__lead,
.prose-lead {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 30em;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}

.prose p {
  margin: 0 0 1.1em;
  max-width: 32em;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--c-ink-soft);
  text-wrap: pretty;
}
.prose p:last-child { margin-bottom: 0; }

.caption {
  margin-top: 14px;
  font: 500 10px/1.4 var(--f-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}

/* Billeder */
.photo-frame { position: relative; margin: 0; overflow: hidden; }
.photo-frame img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--c-paper-deep);
}

/* Tekstlink: små versaler med hårlinje */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 0 5px;
  border: 0;
  border-bottom: 1px solid rgba(138, 90, 76, .45);
  background: none;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-ink);
  text-decoration: none;
  cursor: pointer;
  transition: color 300ms var(--ease-soft), border-color 300ms var(--ease-soft);
}
.text-link::after { content: "→"; letter-spacing: 0; transition: transform 400ms var(--ease-paper); }
.text-link:hover { color: var(--c-accent); border-color: var(--c-accent); }
.text-link:hover::after { transform: translateX(4px); }
.text-link--inline { font: inherit; letter-spacing: 0; text-transform: none; padding: 0; }
.text-link--inline::after { content: none; }

:where(.site) a:focus-visible,
:where(.site) button:focus-visible,
:where(.site) input:focus-visible,
:where(.site) textarea:focus-visible {
  outline: 1px solid var(--c-accent);
  outline-offset: 4px;
}

/* Papirkort — samme sprog som invitationen (dobbelt hårlinjeramme) */
.paper-card {
  position: relative;
  padding: clamp(32px, 5vw, 64px) clamp(24px, 4.4vw, 60px);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 70% at 30% 20%, var(--c-card-light) 0%, transparent 70%),
    linear-gradient(172deg, var(--c-card) 0%, var(--c-card) 55%, var(--c-card-shade) 100%);
  box-shadow:
    0 0 0 1px rgba(90, 60, 40, .05),
    0 2px 4px rgba(60, 38, 28, .05),
    0 20px 40px -18px rgba(60, 38, 28, .18),
    0 50px 90px -40px rgba(60, 38, 28, .2);
}
.paper-card::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(138, 90, 76, .26);
  outline: 1px solid rgba(138, 90, 76, .1);
  outline-offset: -5px;
  pointer-events: none;
}
.paper-card__eyebrow {
  margin: 0 0 clamp(28px, 4vw, 44px);
  text-align: center;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .36em;
  padding-left: .36em;
  text-transform: uppercase;
  color: var(--c-accent);
}

.ornament { display: block; width: 120px; height: 16px; margin-top: 32px; overflow: visible; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 4. Navigation ---------- */

.site-nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 25;
  height: var(--nav-h);
  background: rgba(248, 244, 237, .86);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
          backdrop-filter: blur(12px) saturate(1.1);
  border-bottom: 1px solid var(--c-line-soft);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform 700ms var(--ease-paper),
    opacity 500ms var(--ease-soft),
    visibility 0s linear 700ms;
}
.site-nav.is-visible {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition:
    transform 700ms var(--ease-paper),
    opacity 500ms var(--ease-soft),
    visibility 0s;
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: min(100% - 2 * var(--gutter), var(--container-wide));
  margin-inline: auto;
}

.site-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--c-ink);
  text-decoration: none;
}
.site-nav__mono {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(138, 90, 76, .45);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1;
  color: var(--c-accent);
}
.site-nav__brand-text {
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .34em;
  text-transform: uppercase;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__links a {
  position: relative;
  display: inline-block;
  padding: 8px 0;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: color 300ms var(--ease-soft);
}
.site-nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: .3em; bottom: 0;
  height: 1px;
  background: var(--c-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-paper);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="true"] { color: var(--c-ink); }
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.site-nav__num { display: none; }

.site-nav__toggle {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border: 0;
  background: none;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-ink);
  cursor: pointer;
}
.site-nav__toggle-icon {
  position: relative;
  width: 22px;
  height: 7px;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transition: transform 400ms var(--ease-paper), height 400ms var(--ease-paper);
}

/* Mobil: kompakt bar + fuldskærmsmenu på papir */
@media (max-width: 860px) {
  :root { --nav-h: 58px; }

  .site-nav__toggle { display: inline-flex; }

  /* absolute (ikke fixed): navbaren har backdrop-filter og er derfor containing block */
  .site-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--nav-h));
    height: calc(100dvh - var(--nav-h));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px var(--gutter) max(48px, env(safe-area-inset-bottom));
    background: var(--c-paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity 400ms var(--ease-soft),
      transform 500ms var(--ease-paper),
      visibility 0s linear 500ms;
  }
  .site-nav[data-open] .site-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
      opacity 400ms var(--ease-soft),
      transform 500ms var(--ease-paper),
      visibility 0s;
  }
  .site-nav[data-open] { background: var(--c-paper); }
  .site-nav[data-open] .site-nav__toggle-icon { height: 0; border-bottom-width: 0; transform: translateY(0); }

  .site-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__links li + li { border-top: 1px solid var(--c-line-soft); }
  .site-nav__links a {
    display: flex;
    align-items: baseline;
    gap: 18px;
    padding: 20px 0;
    border: 0;
    font-family: var(--f-display);
    font-size: 34px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--c-ink);
  }
  .site-nav__links a::after { content: none; }
  .site-nav__links a[aria-current="true"] { color: var(--c-accent); }
  .site-nav__num {
    display: inline;
    font-family: var(--f-display);
    font-style: italic;
    font-size: 15px;
    color: var(--c-accent);
  }
}

html.nav-open { overflow: hidden; }

/* ---------- 5. Sektioner ---------- */

/* 02 · Velkommen — stort statement, forskudt billede og tekst */
.welcome__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(16px, 2.4vw, 32px);
  row-gap: clamp(40px, 5vw, 72px);
}
.welcome__statement { grid-column: 1 / 9; grid-row: 1; }
.welcome__figure    { grid-column: 9 / 13; grid-row: 1 / 3; align-self: start; margin-top: clamp(40px, 9vw, 140px); }
.welcome__figure img { aspect-ratio: 4 / 5; }
.welcome__text      { grid-column: 2 / 8; grid-row: 2; }

.signature {
  margin-top: 2em !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 500 var(--fs-label)/1 var(--f-sans) !important;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.signature__name {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 32px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--c-ink);
}

@media (max-width: 860px) {
  .welcome__statement, .welcome__text { grid-column: 1 / -1; grid-row: auto; }
  .welcome__figure { grid-column: 4 / -1; grid-row: auto; margin-top: 0; }
}

/* 03 · Dagen — tidslinje med rytme */
.timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line) 8%, var(--c-line) 92%, transparent);
}
.timeline__item {
  position: relative;
  padding-top: 44px;
  text-align: center;
}
.timeline__item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border: 1px solid var(--c-accent);
  border-radius: 50%;
  background: var(--c-paper-blush);
  box-shadow: 0 0 0 5px var(--c-paper-blush);
}
.timeline__item > * { margin: 0; }
.timeline__time {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(38px, 3.8vw, 56px);
  line-height: 1;
  color: var(--c-ink);
}
.timeline__title {
  margin-top: 18px;
  font: 500 12px/1.3 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.timeline__text {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--c-ink-soft);
}

@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr; gap: 0; padding-left: 40px; max-width: 420px; margin-inline: auto; }
  .timeline::before { left: 5px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; background: var(--c-line); }
  .timeline__item { padding: 0 0 40px; text-align: left; display: grid; grid-template-columns: 5.2rem 1fr; column-gap: 16px; align-items: baseline; }
  .timeline__item:last-child { padding-bottom: 0; }
  .timeline__item::before { top: 12px; left: -40px; margin-left: 0; }
  .timeline__time { grid-row: 1 / 3; font-size: 34px; }
  .timeline__title { margin-top: 0; }
  .timeline__text { margin-top: 6px; }
}

/* 04 · Program — et trykt programkort */
.program__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.program__aside { position: sticky; top: calc(var(--nav-h) + 48px); }
.program__aside .section-head { margin-bottom: clamp(32px, 4vw, 48px); }
.program__figure img { aspect-ratio: 5 / 4; }

.program-list { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.program-item {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 8px;
  padding: 22px 0;
}
.program-item + .program-item { border-top: 1px solid var(--c-line-soft); }
.program-item__num {
  grid-row: 1 / 3;
  padding-top: 5px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 17px;
  color: var(--c-accent);
}
.program-item__head { display: flex; align-items: baseline; gap: 14px; }
.program-item__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.2;
  color: var(--c-ink);
}
.program-item__leader {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(138, 90, 76, .45);
  transform: translateY(-5px);
}
.program-item__time {
  font: 500 13px/1 var(--f-sans);
  letter-spacing: .16em;
  color: var(--c-ink);
}
.program-item__text {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--c-ink-soft);
}

@media (max-width: 900px) {
  .program__grid { grid-template-columns: minmax(0, 1fr); }
  .program__aside { position: static; }
  .program__figure { display: none; }
}
@media (max-width: 520px) {
  .program-item { grid-template-columns: 2.2rem 1fr; }
}

/* 05 · Sted — skitsekort + adresser */
.location__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.location__map { margin: 0; }
.location__map img { object-fit: cover; }
.location__map img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  box-shadow:
    0 2px 4px rgba(60, 38, 28, .05),
    0 30px 60px -30px rgba(60, 38, 28, .25);
}
.location__body .section-head { margin-bottom: clamp(32px, 4vw, 56px); }
.venues { display: grid; gap: clamp(32px, 4vw, 48px); }
.venue > * { margin: 0; }
.venue__label {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.venue__pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--c-seal);
  border-radius: 50%;
  font-family: var(--f-display);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--c-seal-ink);
}
.venue__name {
  margin-top: 14px !important;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.15;
  color: var(--c-ink);
}
.venue__address {
  margin: 10px 0 18px !important;
  font-style: normal;
  font-size: 16px;
  line-height: 1.7;
  color: var(--c-ink-soft);
}

@media (max-width: 900px) {
  .location__grid { grid-template-columns: minmax(0, 1fr); }
  .location__body { order: -1; }
  .venues { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}

/* 06 · Praktisk — let at skimme, ingen kasser */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 4vw, 64px);
  row-gap: clamp(40px, 4vw, 56px);
  margin: 0;
}
.info-item__label {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.icon {
  flex: none;
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--c-accent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.info-item__text {
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--c-line-soft);
  font-family: var(--f-display);
  font-size: clamp(19px, 1.5vw, 22px);
  line-height: 1.45;
  color: var(--c-ink);
}

@media (max-width: 960px) { .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) {
  .info-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .section-head--split .section-index { order: 0; }
}

/* 07 · Ønsker — en del af invitationen, ikke en webshop */
.wishes__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: start;
}
.wishes__intro { position: sticky; top: calc(var(--nav-h) + 48px); }

.wishes__cta { margin: clamp(24px, 2.6vw, 34px) 0 0; }

.wish-list { margin: 0; padding: 0; list-style: none; }
.wish {
  display: grid;
  grid-template-columns: 4rem 1fr;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--c-line);
  transition: padding 500ms var(--ease-paper);
}
.wish:last-child { border-bottom: 1px solid var(--c-line); }
.wish__num {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 20px;
  color: var(--c-accent);
  transition: color 400ms var(--ease-soft);
}
.wish__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.2;
  color: var(--c-ink);
}
.wish__note { margin: 8px 0 0; font-size: 15px; line-height: 1.6; color: var(--c-ink-soft); }

@media (hover: hover) {
  .wish:hover { padding-left: 10px; }
  .wish:hover .wish__num { color: var(--c-blush-deep); }
}

@media (max-width: 900px) {
  .wishes__grid { grid-template-columns: minmax(0, 1fr); }
  .wishes__intro { position: static; }
  .wish { grid-template-columns: 3rem 1fr; }
}

/* 08 · Galleri — asymmetrisk, redaktionelt */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(44px, 5.2vw, 76px);
  gap: clamp(12px, 1.6vw, 22px);
}
.gallery__item { overflow: hidden; }
.gallery__item img { position: absolute; inset: 0; height: 100%; transition: transform 1600ms var(--ease-soft); }

.gallery__item--a { grid-column: 1 / 6;  grid-row: 1 / 7; }
.gallery__item--b { grid-column: 6 / 9;  grid-row: 1 / 9; }
.gallery__quote   { grid-column: 9 / 13; grid-row: 1 / 4; }
.gallery__item--c { grid-column: 9 / 13; grid-row: 4 / 9; }
.gallery__item--d { grid-column: 2 / 6;  grid-row: 7 / 12; }
.gallery__item--e { grid-column: 6 / 10; grid-row: 9 / 13; }
.gallery__item--f { grid-column: 10 / 13; grid-row: 9 / 14; }

.gallery__quote {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 clamp(8px, 2vw, 28px);
}
.gallery__quote p {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.25;
  color: var(--c-ink);
}
.gallery__quote em { font-style: italic; color: var(--c-accent); }

.gallery__caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 12px 8px 14px;
  background: rgba(248, 244, 237, .9);
  font: 500 10px/1 var(--f-sans);
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 500ms var(--ease-soft), transform 600ms var(--ease-paper);
}

@media (hover: hover) {
  .gallery__item:hover img { transform: scale(1.04); }
  .gallery__item:hover .gallery__caption { opacity: 1; transform: none; }
}
@media (hover: none) {
  .gallery__caption { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 15vw; gap: 10px; }
  .gallery__item--a { grid-column: 1 / 7; grid-row: 1 / 4; }
  .gallery__item--b { grid-column: 1 / 4; grid-row: 4 / 8; }
  .gallery__quote   { grid-column: 4 / 7; grid-row: 4 / 6; padding: 0 0 0 6px; }
  .gallery__item--c { grid-column: 4 / 7; grid-row: 6 / 9; }
  .gallery__item--d { grid-column: 1 / 4; grid-row: 8 / 11; }
  .gallery__item--e { grid-column: 4 / 7; grid-row: 9 / 11; }
  .gallery__item--f { grid-column: 2 / 6; grid-row: 11 / 15; }
  .gallery__quote p { font-size: 21px; }
  .gallery__caption { left: 8px; bottom: 8px; padding: 6px 8px 6px 10px; font-size: 9px; }
}

/* 09 · Afslutning — sidste side i invitationen */
.closing {
  position: relative;
  padding-bottom: var(--section-space);
  background: var(--c-paper);
  text-align: center;
}
.closing__image { overflow: hidden; }
.closing__image img {
  height: clamp(260px, 42vw, 560px);
  -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 40%, transparent 100%);
}
.closing__body {
  position: relative;
  width: min(100% - 2 * var(--gutter), 44rem);
  margin: clamp(-120px, -8vw, -60px) auto 0;
}
.closing__seal {
  display: block;
  width: clamp(64px, 7vw, 88px);
  height: clamp(64px, 7vw, 88px);
  margin: 0 auto clamp(28px, 3vw, 40px);
  filter: drop-shadow(0 1px 1px rgba(90, 60, 20, .3)) drop-shadow(0 6px 10px rgba(90, 60, 20, .2));
}
.closing__title {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.08;
  color: var(--c-ink);
  text-wrap: balance;
}
.closing__title em { font-style: italic; }
.closing__name {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-family: var(--f-display);
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--c-ink);
}
.closing__date {
  margin: 14px 0 0;
  font: 500 var(--fs-label)/1 var(--f-sans);
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  color: var(--c-accent);
}

/* ---------- 6. Akvarel-blomster ----------
   Få, strategisk placerede dekorationer. De ligger bag teksten, er rent dekorative
   (alt="" + aria-hidden) og løber delvist ud over sidens kant eller sektionsskift. */

.site-main { overflow-x: clip; }        /* blomster må gerne gå ud over kanten uden at give vandret scroll */

.floral {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.welcome .container,
.program .container,
.closing__body { position: relative; z-index: 1; }

/* Rytme: blomster tydeligt ved kortet, Velkommen→Dagen, Program→Sted, Ønsker og Afslutning.
   Næsten ingen ved Sted, Praktisk og Galleri — så de botaniske øjeblikke får luft. */

/* Kantranker: løber langs sidens kant — tættest foroven, tynder ud nedad.
   Stilken ligger ude ved kanten, så blomsterne vokser ind i sidens margen. */
/* Rankerne starter og slutter naturligt (stilk ind fra kanten, ranker der fader ud),
   så de beskæres aldrig vandret — kun sidekanten må skære dem. */
.floral--edge {
  width: clamp(150px, 15vw, 232px);
}

/* Velkommen → Dagen: ranke langs højre kant, der fortsætter ned i næste sektion */
.floral--welcome {
  z-index: 2;
  top: clamp(-90px, -5.5vw, -44px);
  right: -1vw;
}

/* Afslutning: ranke langs venstre kant — rammer historien ind sammen med Velkommen */
.floral--closing {
  bottom: clamp(36px, 4vw, 64px);       /* forankret i bunden — slutter altid over footeren */
  left: -1vw;
  width: clamp(120px, 11vw, 170px);     /* kort ranke — slutter inde i sektionen */
}

/* Program: lille kvist der lægger sig over programkortets hjørne */
.program__card { position: relative; }
.floral--card-sprig {
  z-index: 2;
  top: clamp(-56px, -4vw, -34px);
  right: clamp(-48px, -3.4vw, -24px);
  width: clamp(150px, 14vw, 216px);
  transform: scaleY(-1);
}

/* Program → Sted: tydelig gren fra venstre kant hen over sektionsskiftet */
.floral--trail {
  z-index: 2;
  left: 0;
  bottom: clamp(-96px, -5.6vw, -44px);
  width: clamp(340px, 52vw, 780px);
}

/* Sted → Praktisk: samme gren spejlet, ind fra højre kant hen over sektionsskiftet */
.floral--trail-right {
  z-index: 2;
  right: 0;
  bottom: clamp(-96px, -5.6vw, -44px);
  width: clamp(340px, 52vw, 780px);
}

/* Ønsker: løs bue, der lægger sig om overskriften fra venstre */
.floral--arc {
  top: -22%;
  left: calc(-1 * clamp(150px, 15vw, 236px) + clamp(4px, 1.2vw, 20px));
  width: clamp(150px, 15vw, 236px);
}

/* Dagen: ét enkelt botanisk kors over overskriften */
.floral-cross {
  display: block;
  width: clamp(72px, 6vw, 94px);
  height: auto;
  margin: 0 auto clamp(18px, 2vw, 26px);
}

/* Invitationskortet: løs bue i øverste venstre hjørne (nederste højre hjørne får rankens begyndelse).
   Måles i kortets egne enheder, så de skalerer med kortet — i konvolutten, præsenteret og som hero. */
.card__floral {
  position: absolute;
  z-index: 0;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.card__floral--corner {
  top: -1.2%;
  left: -1.2%;
  width: min(30cqw, 46cqh);
}

/* Mobil: ranken bliver smallere, ligger længere ude over kanten og fader blødt ud,
   så den aldrig løber ned i brødteksten. Buen ved Ønsker udelades. */
@media (max-width: 860px) {
  .floral--edge {
    width: 25vw;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 58%);
            mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 58%);
  }
  .floral--welcome { top: -30px; right: -6vw; }
  .floral--closing { bottom: 24px; left: -6vw; width: 23vw; }
  .floral--trail,
  .floral--trail-right { width: 84vw; bottom: -34px; }
  .floral--card-sprig { width: 96px; top: -30px; right: -8px; }
  .floral--arc { display: none; }
}

/* ---------- 7. Footer ---------- */

.site-footer {
  padding: 32px 0 max(32px, calc(env(safe-area-inset-bottom) + 20px));
  background: var(--c-paper);
  border-top: 1px solid var(--c-line-soft);
}
.site-footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 500 10px/1 var(--f-sans);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--c-ink-soft);
}
.site-footer__inner p { margin: 0; }
.site-footer .text-link { white-space: nowrap; }

/* ---------- 8. Reveal-animationer (stille, kun hvor de støtter historien) ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 1100ms var(--ease-soft),
      transform 1100ms var(--ease-paper);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  html.js [data-reveal="floral"] {
    transform: none;
    transition: opacity 2000ms var(--ease-soft);
  }
  html.js [data-reveal="image"] {
    transform: none;
    clip-path: inset(6% 6% 6% 6%);
    transition:
      opacity 1200ms var(--ease-soft),
      clip-path 1400ms var(--ease-paper);
  }
  html.js [data-reveal="image"] img {
    transform: scale(1.06);
    transition: transform 1800ms var(--ease-paper);
  }
  html.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
  }
  html.js [data-reveal="image"].is-visible { clip-path: inset(0 0 0 0); }
  html.js [data-reveal="image"].is-visible img { transform: none; }
  html.js .gallery__item.is-visible:hover img { transform: scale(1.04); transition-duration: 1600ms; }
}
.no-js .site-nav { transform: none; opacity: 1; visibility: visible; }

/* ---------- WordPress / Pencil ----------
   Rich text-felter renderes som <div class="pencil-richtext"> med <p> indeni. */
.info-item__text .pencil-richtext p { margin: 0; }
.info-item__text .pencil-richtext a {
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 90, 76, .45);
  transition: color 300ms var(--ease-soft), border-color 300ms var(--ease-soft);
}
.info-item__text .pencil-richtext a:hover { color: var(--c-accent); border-color: var(--c-accent); }

/* WordPress-adminbjælken (kun for indloggede redaktører) */
.admin-bar .site-nav { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-nav { top: 46px; } }