/* ── Accessibility utilities ─────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  padding: 0.6rem 1.2rem;
  background: var(--ink);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: 0.85rem;
  z-index: 9999;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--gold-line);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(100%);
  white-space: nowrap;
  border: 0;
}
/* Focus-visible styles */
:focus-visible {
  outline: 3px solid var(--gold-line);
  outline-offset: 3px;
}

/* Selection */
.layer ::selection,
.layer *::selection { background: transparent; }
::selection {
  background: var(--gold-line);
  color: var(--parchment);
}
::-moz-selection {
  background: var(--gold-line);
  color: var(--parchment);
}

/* ── prefers-reduced-motion ──────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
  }
  .hero { opacity: 1 !important; }
}

/* Kasteel Beverweerd — main stylesheet */
@font-face {
  font-family: "GaramondPremier";
  src: url('../fonts/garamond-premier/GaramondPremrPro-LtDisp.woff2') format('woff2'),
       url('../fonts/garamond-premier/GaramondPremrPro-LtDisp.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ProximaNova";
  src: url('../fonts/proxima-nova/proximanova-light-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ProximaNova";
  src: url('../fonts/proxima-nova/proximanova-bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --text-body: clamp(0.85rem, 1.05vw, 0.95rem);
  --ink:          #1a1814;
  --ink-soft:     #2c2820;
  --parchment:    #f4f0e8;
  --pale:         #faf8f4;
  --stone:        #8a8175;
  --stone-light:  #c4bdb3;
  --moss:         #3d4a35;
  --moss-dark:    #2a3325;
  --gold-line:    #b8965a;
  --gold-pale:    #d4b078;
  --white:        #fff;
  --font-display: "GaramondPremier", "Garamond", "Times New Roman", serif;
  --font-body:    "ProximaNova", "Helvetica Neue", helvetica, arial, sans-serif;
}
@media (max-width: 768px) {
  :root {
    --text-body: 1rem;
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #18180f;
  overflow-x: hidden;
}

/* ── Hero container ─────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  opacity: 0; /* JS fades in after images loaded */
  filter: grayscale(0.5);
}

/* Vignette overlay — darkens edges, protects center */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at 50% 60%,
    transparent 30%,
    rgba(15, 14, 8, 0.45) 100%
  );
  z-index: 5;
  pointer-events: none;
}


/* ── Intro ───────────────────────────────────────── */
.intro {
  position: relative;
  width: 100%;
  background: var(--pale);
  color: var(--ink);
  overflow: hidden;
}
/* Stone texture — subtle background decoration */
.intro__texture {
  position: absolute;
  top: -5%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.intro__inner {
  position: relative;
  z-index: 1;
  padding: clamp(6rem, 14vw, 12rem) var(--gutter) clamp(5rem, 10vw, 9rem);
  display: flex;
  flex-direction: column;
  gap: clamp(4rem, 8vw, 7rem);
}
.intro__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 1.8rem;
}
/* Spacious display tagline */
.intro__tagline {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6.5vw, 7.5rem);
  font-weight: 300;
  line-height: 1.04;
  color: var(--ink);
  letter-spacing: -0.02em;
  /* max-width: 14ch; */
}
/* Content grid: heading left, body right */
.intro__content {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 0 clamp(3rem, 6vw, 7rem);
  align-items: start;
  /* border-top: 1px solid var(--stone-light);c */
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
}
.intro__heading {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--ink);
  position: sticky;
  top: 3rem;
}
.intro__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem 3rem;
}
.intro__body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
}
.intro__body p:last-child {
  grid-column: 1 / -1;
  padding-top: 1.2rem;
  border-top: 1px solid var(--stone-light);
  color: var(--ink);
  font-size: clamp(0.88rem, 1.1vw, 1rem);
}
@media (max-width: 768px) {
  .intro__content { grid-template-columns: 1fr; }
  .intro__heading { position: static; margin-bottom: 1.5rem; }
}

@media (max-width: 640px) {
  .intro__body {
    grid-template-columns: 1fr;
  }
}

/* ── Location / Map ─────────────────────────────── */
.location {
  background: var(--moss-dark);
  background: linear-gradient(to bottom, var(--ink), var(--moss-dark));
  overflow: hidden;
  position: relative;
  padding-bottom: 5rem;
}
/* Bird's-eye aerial — positioned element, maskable and adjustable */
.location__aerial {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 80%;
  object-fit: cover;
  object-position: center 40%;
  opacity: 0.22;
  z-index: 0;
  /* Fade edges — softer toward top and left */
  mask-image: radial-gradient(ellipse 100% 90% at 80% 85%, black 30%, transparent 80%);
  pointer-events: none;
}
/* Two-column asymmetric layout: map left, content right */
.location__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 62% 38%;
  align-items: start;
  min-height: 80vh;
}
/* Left: text content column */
.location__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(4rem, 10vw, 8rem) var(--gutter)
           clamp(4rem, 8vw, 7rem) var(--gutter);
}
.location__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 1.8rem;
}
/* Heading: 3 intentional line breaks at editorial scale */
.location__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3.4rem);
  font-weight: 300;
  color: var(--parchment);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.location__title em {
  font-style: italic;
  color: var(--stone-light);
  font-size: 0.78em;
  display: block;
  margin-top: 0.2em;
  letter-spacing: 0.04em;
}
.location__body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.location__body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.85;
  color: var(--stone-light);
}
/* Address: stamp-like bottom anchor */
.location__address {
  border-top: 1px solid rgba(184,150,90,0.3);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background-color: var(--moss-dark);
  padding: 2rem;
}
.location__address span {
  font-family: var(--font-body);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.location__address span:first-child {
  color: var(--gold-line);
}
/* Right: map fills its column, bleeds to edge */
.location__map {
  padding: 2rem;
  padding-top: clamp(3rem, 6vw, 6rem);
}
.location-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

@media (max-width: 768px) {
  .location__layout  { grid-template-columns: 1fr; }
  .location__map     { width: 100%; padding-top: 0; }
}
/* Paths: dash pattern applied by JS after draw completes */
.location-svg .map-path {
  fill: none;
  stroke: var(--stone-light);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Location marker */
.location-svg .map-marker-ring {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.location-svg .map-marker-dot {
  fill: var(--gold-line);
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* City origin labels */
.location-svg .map-city-dot {
  fill: var(--stone);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.location-svg .map-city {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--stone);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.location__quote {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
  font-weight: 300;
  color: var(--stone-light);
  line-height: 1.55;
  letter-spacing: 0.02em;
  padding: clamp(2rem, 5vw, 4rem) 0 1.5rem var(--gutter);
  opacity: 0.75;
  position: relative;
  z-index: 2;
      margin-bottom: -3rem;
    margin-top: 2rem;
}
.location__quote em {
  color: var(--gold-pale);
  font-style: italic;
}

/* ── News ───────────────────────────────────────── */
.news {
  background-color: var(--pale);
}
.news__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80svh;
}
/* Left col: label + article, aligned to top */
.news__left {
  background: var(--pale);
  padding: clamp(5rem, 10vw, 9rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 3rem;
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.news__left::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: url('../photos/tiles-texture.webp') left bottom / cover no-repeat;
  opacity: 0.25;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
  mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
/* Right col: updates + watercolor bg, content pushed to bottom */
.news__right {
  position: relative;
  overflow: hidden;
  background: var(--ink-soft);
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2rem;
}
/* Right col text colors — light on dark */
.news__right .news__overview-heading {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3.2rem);
  font-weight: 300;
  color: var(--parchment);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 0;
}
.news__right .news__overview-intro {
  color: var(--stone-light);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.8;
  max-width: 460px;
}
.news__right .news__item       { border-top-color: rgba(196,189,179,0.12); }
.news__right .news__item:last-child { border-bottom-color: transparent; }
.news__right .news__item-date  { color: var(--stone); }
.news__right .news__item-title { color: var(--parchment); }
.news__right .news__item-body  { color: var(--stone-light); }
/* Watercolor — ghost on dark background */
.news__bg-drawing {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: auto;
  opacity: 0.12;
  filter: sepia(0.2) brightness(1.15) contrast(0.9);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}
.news__right > *:not(.news__bg-drawing) { position: relative; z-index: 1; }
/* Left col article styles */
.news__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 0;
}
.news__feature {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem 3rem;
}
.news__date-label {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-bottom: 0.5rem;
  padding-top: .45rem;
}
.news__date {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  display: block;
  margin-bottom: 0.4rem;
}
.news__category {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-line);
  display: block;
  margin-top: 1.2rem;
}
.news__feature-title {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 300;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 1.2rem;
}
.news__feature-body p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}
.news__parties {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 1.5rem;
  margin-top: 1.8rem;
}
.news__party {
  border-left: 2px solid var(--gold-line);
  padding-left: 1rem;
}
.news__party-name, .news__parties dt {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--ink);
  display: block;
}
.news__party-role, .news__parties dd {
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  display: block;
  margin-top: 0.3rem;
}
.news__overview-heading {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.news__overview-intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 540px;
  margin-bottom: 3rem;
}
.news__list { list-style: none; padding: 0; margin: 0; }
.news__item {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: 1rem 3rem;
  padding: 1.8rem 0;
  border-top: 1px solid var(--stone-light);
}
.news__item:last-child { border-bottom: 1px solid var(--stone-light); }
.news__item-date {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--stone);
  padding-top: 0.2rem;
}
.news__item-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.news__item-body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
}
@media (max-width: 700px) {
  .news__inner   { grid-template-columns: 1fr; min-height: auto; }
  .news__feature { grid-template-columns: 1fr; gap: 1.5rem; }
  .news__item    { grid-template-columns: 1fr; }
}

/* ── History / Timeline ──────────────────────────── */
.history {
  background: linear-gradient(to bottom, var(--ink-soft), var(--ink));
  color: var(--parchment);
  position: relative;
  overflow: hidden;
}
/* Ghost historical litho — subtle right-side decoration */
.history__litho {
  position: absolute;
  left: 0;
  top: 0;
  width: 80%;
  height: auto;
  opacity: 0.09;
  filter: sepia(0.4) contrast(1.1);
  pointer-events: none;
  /* Fade all four edges */
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 30% 30%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 80% at 30% 30%, black 30%, transparent 80%);
}
.history__inner {
  max-width: 1000px;
  margin: 0 0 0 auto;
  padding: clamp(5rem, 12vw, 10rem) var(--gutter);
}
.history__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300;
  color: var(--parchment);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 1rem 0 4rem;
}
.history__label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 1rem;
}
/* Timeline track */
.history__timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.history__timeline::before {
  content: '';
  position: absolute;
  left: 12rem;
  top: 0.6rem;
  bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, var(--gold-line), transparent);
}
/* Entry row */
.history__entry {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 0 3rem;
  padding-bottom: clamp(3rem, 6vw, 5rem);
  position: relative;
}
/* Dot on the line */
.history__entry::before {
  content: '';
  position: absolute;
  left: calc(12rem - 3px);
  top: 0.55rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold-line);
}
/* Date / century column */
.history__date {
  padding-top: 0.2rem;
  padding-right: var(--gutter);
  text-align: right;
}
.history__century {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 300;
  color: var(--gold-pale);
  line-height: 1;
}
.history__period {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: 0.4rem;
}
/* Content column */
.history__content h3 {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--parchment);
  margin-bottom: 0.9rem;
}
.history__content p {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.85;
  color: var(--stone-light);
}

@media (max-width: 768px) {
  .location__map { width: 100%; }
  .location-svg  { width: 100%; }
}

@media (max-width: 640px) {
  .history__timeline::before { left: 0; }
  .history__entry {
    grid-template-columns: 1fr;
    padding-left: 1.5rem;
  }
  .history__entry::before { left: -3px; }
  .history__date { text-align: left; margin-bottom: 1rem; }
}

/* ── Contact ────────────────────────────────────── */
.contact {
  background: var(--ink);
  color: var(--parchment);
  min-height: 100svh;
  overflow: clip;
}
.contact__wrap {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.contact__inner {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 4rem 6rem;
  padding: clamp(5rem, 12vw, 10rem) 0;
  align-items: start;
}
.contact h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--parchment);
  margin: 1.2rem 0 1.6rem;
}
.contact__intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.85;
  color: var(--stone-light);
  max-width: 420px;
  margin-bottom: 2.5rem;
}
.contact__details {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  border-top: 1px solid rgba(196,189,179,0.15);
  padding-top: 2rem;
}
.contact__detail {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
}
.contact__detail-label, .contact__details dt {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 0.45rem;
}
.contact__detail-value, .contact__details dd {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--stone-light);
}
.contact__detail-value a {
  color: var(--gold-line);
  text-decoration: none;
}
.contact__detail-value a:hover { color: var(--gold-pale); }
/* Form */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1.4rem;
}
.form-group label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
}
.form-group label span { color: var(--gold-line); }
.contact-form input,
.contact-form textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(196,189,179,0.2);
  padding: 0.65rem 0;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--parchment);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--stone); }
.contact-form input:focus,
.contact-form textarea:focus { border-bottom-color: var(--gold-line); }
.contact-form textarea { resize: vertical; min-height: 120px; }
.form-error {
  font-family: var(--font-body);
  font-size: 0.65rem;
  color: #c8724a;
  min-height: 1em;
}
/* Privacy checkbox */
.form-privacy {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.form-privacy input[type="checkbox"] {
  width: 14px; height: 14px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  accent-color: var(--gold-line);
  border-bottom: none;
  padding: 0;
}
.form-privacy label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--stone);
  line-height: 1.6;
  letter-spacing: 0;
  text-transform: none;
}
/* Submit button */
.form-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  padding: 0.85rem 2rem;
  background: transparent;
  border: 1px solid rgba(184,150,90,0.5);
  color: var(--gold-line);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.form-submit:hover {
  background: rgba(184,150,90,0.08);
  border-color: var(--gold-line);
}
/* Thank-you state */
.contact-thank-you {
  display: none;
  flex-direction: column;
  gap: 0.8rem;
  padding: 3rem 2rem;
  border: 1px solid rgba(184,150,90,0.2);
  text-align: center;
}
.contact-thank-you__icon {
  font-size: 1.6rem;
  color: var(--gold-line);
}
.contact-thank-you h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--parchment);
}
.contact-thank-you p {
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--stone-light);
}
@media (max-width: 768px) {
  .contact__inner { grid-template-columns: 1fr; gap: 3rem; }
  .contact__detail { grid-template-columns: 6rem 1fr; }
}

/* ── Gallery / Slider ───────────────────────────── */
.gallery {
  background: var(--pale);
  overflow: hidden;
}
.gallery__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: clamp(4rem, 10vw, 8rem) var(--gutter) 2.5rem;
}
.section-label {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 0.65rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
  display: block;
  margin-bottom: 1rem;
}
.gallery__title {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.gallery__controls {
  display: flex;
  gap: 0.6rem;
  padding-bottom: 0.3rem;
}
.gallery__btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(138,129,117,0.35);
  background: transparent;
  color: var(--stone);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.gallery__btn:hover {
  border-color: var(--gold-line);
  color: var(--gold-line);
}
/* Scrollable track — transform-based, no native scroll */
.gallery__track-wrap {
  overflow: hidden;
  cursor: grab;
  padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem);
  user-select: none;
}
.gallery__track-wrap.is-dragging { cursor: grabbing; }
.gallery__track {
  display: flex;
  gap: 1.2rem;
  width: max-content;
  will-change: transform;
  list-style: none;
  padding: 0;
  margin: 0;
}
.gallery__item {
  flex: 0 0 auto;
  width: clamp(260px, 32vw, 480px);
  scroll-snap-align: start;
}
.gallery__item-inner,
.gallery__item > figure {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  user-select: none;
}
.gallery__item-inner:hover .gallery__img {
  transform: scale(1.04);
}
.gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.5rem 1rem 0.9rem;
  background: linear-gradient(to top, rgba(26,24,20,0.75) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery__item-inner:hover .gallery__caption {
  opacity: 1;
}
.gallery__caption-text {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--parchment);
}

/* ── Site header / Hamburger ────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem;
  pointer-events: none;
}
/* Fading blur backdrop — blurs the content behind the header,
   masked so the blur dissolves to transparent at the bottom
   rather than having a hard edge (OuterVale technique). */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  height: 200%;
  /* backdrop-filter: blur(12px) saturate(0.4); */
  /* -webkit-backdrop-filter: blur(12px) saturate(1.4); */
  -webkit-mask-image: linear-gradient(to bottom,
    black 0%,
    black 30%,
    transparent 100%
  );
  mask-image: linear-gradient(to bottom,
    black 0%,
    black 30%,
    transparent 100%
  );
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  top: -50%;
}
.site-header:hover::before {
  opacity: 1;
}
.site-logo {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  color: var(--gold-pale);
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.site-logo.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hamburger {
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: rgba(26,24,20,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(196,189,179,0.15);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.6s ease, transform 0.6s ease,
              background 0.2s ease, border-color 0.2s ease;
  pointer-events: none;
}
.hamburger.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hamburger:hover {
  background: rgba(26,24,20,0.8);
  border-color: rgba(184,150,90,0.4);
}
.hamburger span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--parchment);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity  0.3s ease;
}
/* X state when menu open */
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Full-screen nav overlay ────────────────────── */
.site-nav {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  /* visibility delay removes element from GPU compositor after fade-out,
     preventing Chrome ghosting/artifacts with will-change layers beneath */
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0.4s;
  overflow: hidden;
}
.site-nav::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
}
.site-nav.open::before {
  background: url('../photos/front-view.webp') center center / cover no-repeat;
}
.site-nav.open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              visibility 0s linear 0s;
}
.site-nav__list {
  list-style: none;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.site-nav__list li {
  overflow: hidden;
}
.site-nav__list a {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5.5vw, 5.5rem);
  font-weight: 300;
  color: var(--stone-light);
  text-decoration: none;
  letter-spacing: 0.04em;
  line-height: 1.2;
  display: block;
  transition: color 0.2s ease;
  transform: translateY(110%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease;
  transition-delay: calc(var(--ni, 0) * 60ms);
}
.site-nav.open .site-nav__list a {
  transform: translateY(0);
}
.site-nav__list a:hover { color: var(--gold-pale); }
/* Small label under each link */
.site-nav__list a::after {
  display: none;
}

/* ── Parallax layers ────────────────────────────── */
.layer {
  position: absolute;
  pointer-events: none;
  will-change: transform;
  user-select: none;
}

/* Background: full scene — slightly oversized to absorb parallax shift */
#layer-bg {
  top: -5%; left: -4%; right: -4%; bottom: -5%;
}
#layer-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}

/* Lower trees / meadow — anchored bottom with 15% buffer below viewport.
   Scroll factor is gentle so the image never travels beyond that buffer.
   Subtle bottom-fade so any remaining edge dissolves rather than hard-cuts. */
#layer-lower {
  bottom: -5%; left: -3%; right: -3%;
}
#layer-lower img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(1px);
}

/* Upper canopy — anchored top, fade bottom seam away */
#layer-upper {
  top: -6%; left: -3%; right: -3%;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 95%);
  mask-image: linear-gradient(to bottom, black 55%, transparent 95%);
}
#layer-upper img {
  width: 100%;
  height: auto;
  display: block;
  filter: blur(1px);
}

/* Left tree cluster — bottom-left */
#layer-fg1 {
  bottom: -8%; left: -4%;
  width: 42%;
  filter: blur(2px);
}
#layer-fg1 img {
  width: 100%;
  height: auto;
  display: block;
}

/* Side leaves: full-height panels (110% hero) so no top/bottom/side edge
   ever shows during parallax. object-fit:cover fills the tall container
   from the image's corner content. Parallax stays within the 5% buffer. */
#layer-leaves-left {
  top: -5%; bottom: -5%; left: -30%;
  width: 38%;
  /* fade inner edge — image boundary never shows as a hard line */
  -webkit-mask-image: linear-gradient(to right, black 55%, transparent 95%);
  mask-image: linear-gradient(to right, black 55%, transparent 95%);
}
#layer-leaves-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
}

#layer-leaves-right {
  top: -5%; bottom: -5%; right: -30%;
  width: 38%;
  -webkit-mask-image: linear-gradient(to left, black 55%, transparent 95%);
  mask-image: linear-gradient(to left, black 55%, transparent 95%);
}
#layer-leaves-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  display: block;
}

/* Bottom cover layers — scroll in from below, fill full bottom width.
   Each 55% wide so left+right together span 110% (overlapping at centre).
   z-index 6: above vignette, below wordmark. */
#layer-cover-bottom {
  bottom: 0vh;
  z-index: 6;
  right: 0;
  width: 100%;
}
#layer-cover-bottom img {
  width: 100%;
  height: auto;
  display: block;
  transform: rotate(90deg);
}

/* ── Wordmark ────────────────────────────────────── */
/* Wordmark hidden only when JS present (avoids LCP penalty for h1).
   Each child animates itself — no container stacking context. */
.js .wordmark:not(.visible) { opacity: 0; }
.wordmark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  gap: 0.8rem;
  padding-bottom: 10%;
  user-select: text;
}
.wordmark .eyebrow {
  font-family: 'ProximaNova', sans-serif;
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.58em;
  text-transform: uppercase;
  color: black;
  padding: .1em .1em .1em .5em;
  opacity: 0;
}
.wordmark.visible .eyebrow {
  animation: eyebrowIn 1.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.1s;
}
@keyframes eyebrowIn {
  from { opacity: 0; transform: translateY(6px);  }
  to   { opacity: 1; transform: translateY(0);  }
}
.wordmark .name {
  font-family: 'GaramondPremier', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 5.5vw, 4.8rem);
  letter-spacing: 0.14em;
  color: #f5eee0;
  line-height: 1;
  position: relative;
  z-index: 1;
}
/* Individual letter spans injected by JS */
.wordmark .name .letter {
  display: inline-block;
  opacity: 0;
  white-space: pre;
}
.wordmark.visible .name .letter {
  animation: letterPaint 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: calc(var(--i) * 25ms + 0.15s);
}
@keyframes letterPaint {
  from {
    opacity: 0;
    transform: translateY(14px) skewX(-6deg);
    filter: blur(5px);
  }
  60% { filter: blur(0); }
  to {
    opacity: 1;
    transform: translateY(0) skewX(0deg);
    filter: blur(0);
  }
}
/* Rule fades in after letters settle */
.wordmark .rule {
  opacity: 0;
}
.wordmark.visible .rule {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 1.3s;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero brush stroke ──────────────────────────── */
@keyframes brushReveal {
  from { clip-path: inset(0 101% 0 0); }
  to   { clip-path: inset(0 -8%  0 -8%); }
}

/* name-wrap: flex item that contains both brush and text — brush follows text */
.name-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Title brush — absolute inside name-wrap, always behind the name */
.hero-brush-title {
  position: absolute;
  width: 115%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -30%);
  filter: sepia(1) saturate(2.8) hue-rotate(-18deg) brightness(1.15);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(0 101% 0 0);
  z-index: 0;
}
.hero-brush-title.visible {
  opacity: 0.1;
  animation: brushReveal 1.6s cubic-bezier(0.16, 1, 0.12, 1) forwards;
}

/* ── Scroll indicator ───────────────────────────── */
.scroll-cue {
  position: absolute;
  bottom: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.scroll-cue.visible { opacity: 1; }
.scroll-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 50px;
  background: var(--gold-line);
  animation: drawLine 2s ease-in-out infinite;
}
@keyframes drawLine {
  0%   { transform: scaleY(0); transform-origin: top;    opacity: 0; }
  40%  { transform: scaleY(1); transform-origin: top;    opacity: 1; }
  60%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

/* ── Entry positions — edit per breakpoint with media queries ── */
/* Each layer starts at its offset; JS adds .go to animate to rest (transform:none). */
#layer-bg           { transform: translateY(-2vh); }
#layer-lower        { transform: translateY(7vh); }
#layer-upper        { transform: translateY(-7vh); }
#layer-fg1          { transform: translate(-4.5vw, 5vh); }
#layer-leaves-left  { transform: translateX(25vw); }
#layer-leaves-right { transform: translateX(-25vw); }

/* When .go is added, transition to resting position */
#layer-bg.go,
#layer-lower.go,
#layer-upper.go,
#layer-fg1.go,
#layer-leaves-left.go,
#layer-leaves-right.go {
  transform: none;
  transition: transform 2s 1s cubic-bezier(0.22, 1, 0.36, 1);
}

#layer-leaves-left.go,
#layer-leaves-right.go {
  transition-delay: .5s;
}

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
  /* Reframe background — portrait crop should show castle, not just sky */
  #layer-bg img {
    object-position: 42% 60%;
  }

  /* Upper canopy: nudge down so it frames the top better on portrait */
  #layer-upper {
    top: -3%;
  }

  #layer-lower {
    bottom: -3%;
    width: 200%;
    left: -95%;
  }

  /* Side leaves: bring them in from the extreme offset so they're visible */
  #layer-leaves-left {
    display: none;
    left: -90%;
    width: 100%;
  }
  #layer-leaves-right {
    display: none;
    right: -90%;
    width: 100%;
  }

  /* Left tree cluster: slightly smaller on mobile */
  #layer-fg1 {
    width: 55%;
    left: -5%;
  }

  /* Entry offsets — tighter on mobile */
  #layer-leaves-left  { transform: translateX(25vw); }
  #layer-leaves-right { transform: translateX(-25vw); }
  #layer-upper        { transform: translateY(-4vh); }
  #layer-lower        { transform: translateY(4vh); }
  #layer-fg1          { transform: translate(-8vw, 4vh); }

  /* When .go is added, transition to resting position */
  #layer-bg.go,
  #layer-lower.go,
  #layer-upper.go,
  #layer-fg1.go,
  #layer-leaves-left.go,
  #layer-leaves-right.go {
    transform: none;
    transition: transform 2s 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Wordmark: tighten letter-spacing on small screens */
  .wordmark .name {
    letter-spacing: 0.08em;
  }
  .wordmark .eyebrow {
    letter-spacing: 0.12em;
    font-size: 0.5rem;
  }
}

/* ── Scroll-reveal animations ────────────────────── */
/* Elements start invisible; JS adds .is-visible when in viewport */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal="left"] {
  transform: translateX(-32px);
}
[data-reveal="right"] {
  transform: translateX(32px);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger children via --reveal-delay custom property */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--ri, 0) * 120ms);
}
[data-reveal-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Hero CTA ────────────────────────────────────── */
.fixed-cta {
  position: fixed;
  bottom: 3rem;
  right: 3rem;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-pale);
  text-decoration: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s ease, color 0.2s ease;
}
.fixed-cta.visible {
  opacity: 1;
  transform: translateY(0);
}
.fixed-cta:hover { color: var(--gold-pale); }
.fixed-cta__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--gold-line);
  opacity: 0.85;
}


/* News CTA link */
.news__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.8rem;
  padding: 0.85rem 2rem;
  background: transparent;
  border: 1px solid rgba(184,150,90,0.5);
  color: var(--gold-line);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.news__cta:hover {
  background: rgba(184,150,90,0.08);
  border-color: var(--gold-line);
  color: var(--gold-pale);
}
.news__cta:hover {
  color: var(--gold-pale);
  border-color: var(--gold-pale);
}

/* ── Site footer ─────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 155;
  background: var(--ink);
  padding: 2.5rem var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid rgba(196,189,179,0.06);
}
.site-footer p {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.18em;
  color: rgba(138,129,117,0.45);
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.site-footer a:hover { color: var(--stone); }
.site-footer strong { font-weight: 400; }

@media (max-width: 640px) {
  :root {
    --gutter: 1.4rem;
  }
}

@media (max-width: 768px) {
  .fixed-cta {
    position: absolute;
    left: .5rem;
    /* transform: translateX(50%); */
    bottom: .5rem;
    width: 50%;
    padding: 1rem;
    box-sizing: border-box;
  }
}

@media (max-width: 768px) {
  .location-svg .map-city {
    font-size: clamp(2rem, 4vw, 3rem);
  }
  .location-svg .map-path {
    stroke-width: 2.5;
  }
}

/* ── Invite / event article ──────────────────────── */
.news__invite-sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.2rem;
}
.news__invite-intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.news__event-details {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-bottom: 1.4rem;
  border-top: 1px solid var(--stone-light);
}
.news__event-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--stone-light);
}
.news__event-row dt {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--stone);
  padding-top: 0.1rem;
}
.news__event-row dd {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.5;
}
.news__invite-target {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--stone);
  margin-bottom: 1.5rem;
  font-style: italic;
}

/* ── Invite card (Participatiebijeenkomst) ───────── */
.invite {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.invite__eyebrow {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold-line);
}
.invite__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 300;
  color: var(--ink);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.invite__title em {
  display: block;
  font-style: italic;
  color: var(--gold-line);
  font-size: 0.82em;
}
.invite__rule {
  border: none;
  border-top: 1px solid var(--stone-light);
  margin: 0;
}
.invite__sub {
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone);
}
.invite__intro {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 300;
  line-height: 1.8;
  color: var(--ink-soft);
}
/* 2-column event details */
.invite__details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.invite__detail {
  padding: 0.7rem 0;
}
.invite__detail:nth-child(odd) { padding-right: 1.5rem; }
.invite__detail dt {
  font-family: var(--font-body);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 0.2rem;
}
.invite__detail dd {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 300;
  color: var(--ink);
  line-height: 1.45;
}
/* Voor wie — left gold border accent */
.invite__voor-wie {
  border-left: 2px solid var(--gold-line);
  padding-left: 1rem;
}
.invite__voor-wie-heading {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-line);
  margin-bottom: 0.5rem;
}
.invite__voor-wie p {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-soft);
}