/* =========================================================
   Riekje & Lukas — 06.–07. Mai 2027, Guadalest
   Design system
   ========================================================= */

/* ---------- Tokens ---------- */
:root{
  /* paper & ink */
  --paper:        #FBF9F5;
  --paper-warm:   #F4EFE6;
  --paper-deep:   #EBE4D7;
  --ink:          #1F211B;
  --ink-soft:     #55584C;
  --ink-mute:     #85887B;

  /* the bar / save-the-date palette */
  --olive:        #616A50;
  --olive-deep:   #3C4231;
  --olive-mist:   #9AA187;
  --sand:         #C4B18C;
  --sand-light:   #E2D6BC;

  --line:         rgba(31,33,27,.13);
  --line-soft:    rgba(31,33,27,.07);
  --line-light:   rgba(255,255,255,.26);

  /* type
     --display  Cormorant SC — titles and prominent lines. Small-caps serif,
                free on Google Fonts, ships real weights (no synthetic bold).
     --sans     Avenir — everything else. Licensed system face: real Avenir renders
                on macOS/iOS; Nunito Sans is the closest free stand-in elsewhere. */
  --display: "Cormorant SC", "Cormorant Garamond", "Didot", "Times New Roman", serif;
  --sans:    "Avenir Next", "Avenir", "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* motion */
  --ease:    cubic-bezier(.16,1,.3,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  /* metrics */
  --nav-h: 84px;
  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1400px;
  --measure: 62ch;
}

@media (max-width: 620px){ :root{ --nav-h: 66px; } }

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(15.5px,.52vw + 14.1px,17.5px);
  line-height:1.72;
  letter-spacing:.005em;
  font-synthesis:weight;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg{ display:block; max-width:100%; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
::selection{ background:var(--sand-light); color:var(--ink); }

/* ---------- Typography primitives ---------- */
.display{
  font-family:var(--display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:.02em;
}

/* the display role carries weight 600 wherever it appears */
.phead__title,.hero__names,.hero__date,.nav__link,
.tl__title,.tl__when,.agenda__time,.icard__t,.stay__name,.stay__price,
.tip__n,.tip__t,.field__label,.btn,.btn-line,.cluster__head h3,
.dress__label,.foot__w a,.loader__mono,.ph__id,.ph-tag b,.count__n,
.band__msg,.subnav a{ font-weight:600; }
.eyebrow{
  font-family:var(--sans);
  font-size:clamp(9.5px,.72vw,11.5px);
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.34em;
  color:var(--ink-mute);
  margin:0 0 1.4em;
  display:block;
}
.eyebrow--light{ color:rgba(255,255,255,.9); }

.h-xl{ font-size:clamp(50px,9vw,130px); }
.h-lg{ font-size:clamp(39px,5.9vw,84px); }
.h-md{ font-size:clamp(29px,3.5vw,50px); }
.h-sm{ font-size:clamp(23px,2.2vw,32px); }

.caps{
  font-family:var(--display);
  text-transform:uppercase;
  letter-spacing:.09em;
  font-weight:600;
}
.lede{
  font-size:clamp(16.5px,1.15vw,19.5px);
  line-height:1.8;
  letter-spacing:.004em;
  color:var(--ink-soft);
  font-weight:400;
  max-width:var(--measure);
}
/* emphasis inside body copy: a little more weight and full ink, no shouting */
.lede b, .lede strong{ font-weight:600; color:var(--ink); }

.small{ font-size:14px; line-height:1.7; letter-spacing:.01em; color:var(--ink-mute); }
.tnum{ font-variant-numeric:tabular-nums lining-nums; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:1080px; }
.wrap--text{ max-width:840px; }
.section{ padding-block:clamp(72px,10vw,160px); position:relative; }
/* anchored sections must clear the fixed nav + sticky sub-nav */
section[id]{ scroll-margin-top:calc(var(--nav-h) + 64px); }
.section--tight{ padding-block:clamp(52px,6vw,96px); }
.section--warm{ background:var(--paper-warm); }

.grid{ display:grid; gap:clamp(28px,4vw,72px); }
@media (min-width:900px){
  .grid--2{ grid-template-columns:repeat(2,1fr); align-items:center; }
  .grid--55-45{ grid-template-columns:1.15fr .95fr; align-items:center; }
  .grid--45-55{ grid-template-columns:.95fr 1.15fr; align-items:center; }
}

/* ---------- Ornaments / rules ---------- */
.rule{
  display:flex; align-items:center; gap:14px;
  color:var(--sand);
}
.rule::before,.rule::after{
  content:""; height:1px; flex:1; background:currentColor; opacity:.55;
}
.rule__mark{ font-size:9px; letter-spacing:.3em; }
.rule--short{ width:52px; }
.rule--short::after{ display:none; }

.hairline{ height:1px; background:var(--line); border:0; margin:0; }

.diamond{
  width:6px;height:6px;transform:rotate(45deg);
  border:1px solid var(--sand); display:inline-block;
}

/* fine-line divider with centred sprig */
.divider{ display:flex; align-items:center; justify-content:center; gap:18px; color:var(--sand); }
.divider::before,.divider::after{ content:""; height:1px; width:min(160px,22vw); background:currentColor; opacity:.5; }

/* ---------- Grain ---------- */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:900;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================
   Monogram
   ========================================================= */
/* The monogram is a vector trace of the supplied Logo.jpeg, so it matches the
   artwork exactly. It inherits colour via currentColor and is sized by
   font-size; .75em lines its cap height up with text at the same size. */
.mono{ display:inline-block; line-height:0; }
.mono svg{ display:block; height:.75em; width:auto; }

/* =========================================================
   Navigation
   ========================================================= */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  height:var(--nav-h);
  display:flex; align-items:center;
  transition:background .7s var(--ease), backdrop-filter .7s var(--ease), box-shadow .7s var(--ease);
  background:transparent;
}
.nav::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--line-light); opacity:0; transition:opacity .7s var(--ease);
}
.nav.is-solid,.nav.is-scrolled{
  background:rgba(97,106,80,.93);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
}
.nav.is-solid::after,.nav.is-scrolled::after{ opacity:1; }

.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:grid; grid-template-columns:1fr 1fr auto 1fr 1fr; align-items:center;
}
.nav__link{
  justify-self:center;
  min-width:0;
  white-space:nowrap;          /* a nav item must never wrap to a second line */
  font-family:var(--display);
  font-size:clamp(14px,1.05vw,17.5px);
  letter-spacing:.13em;
  text-transform:none;
  text-decoration:none;
  color:#fff;
  padding:10px 4px 9px;
  position:relative;
  opacity:.92;
  transition:opacity .45s var(--ease);
}
.nav__link::after{
  content:""; position:absolute; left:0; right:0; bottom:2px; height:1px;
  background:#fff; transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .6s var(--ease);
}
.nav__link:hover{ opacity:1; }
.nav__link:hover::after,.nav__link.is-active::after{ transform:scaleX(1); }
.nav__link.is-active{ opacity:1; }

.nav__logo{
  justify-self:center;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; color:#fff;
  padding:6px 10px;
  white-space:nowrap;
}
/* white, bold, larger than the nav links — no plate behind it */
.nav__logo .mono{
  font-size:clamp(38px,3.5vw,56px);
  color:#fff;
  transition:transform .7s var(--ease);
}
.nav__logo:hover .mono{ transform:translateY(-2px); }

/* burger — hidden on desktop, and out of the grid entirely */
.nav__spacer{ display:none; }
.burger{
  display:none; justify-self:end;
  width:44px;height:44px;border:0;background:none;cursor:pointer;
  align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.burger span{ display:block; width:24px; height:1px; background:#fff; transition:transform .5s var(--ease), opacity .3s; }
.burger.is-open span:nth-child(1){ transform:translateY(3.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-3.5px) rotate(-45deg); }

/* Between 620px and 900px all five items still fit — just tighten them
   so the row never has to break. The grid is fixed at five columns, so
   a second row is structurally impossible above the switch point. */
@media (max-width:900px){
  .nav__inner{ padding-inline:clamp(14px,3vw,32px); }
  .nav__link{ font-size:15px; letter-spacing:.08em; padding-inline:0; }
  .nav__logo{ padding-inline:6px; }
  .nav__logo .mono{ font-size:32px; }
}
@media (max-width:740px){
  .nav__link{ font-size:14px; letter-spacing:.05em; }
  .nav__logo .mono{ font-size:30px; }
}

/* Below 620px: hamburger */
@media (max-width:620px){
  .nav__inner{ grid-template-columns:44px 1fr 44px; padding-inline:clamp(14px,4vw,24px); }
  .nav__link{ display:none; }
  .nav__logo{ grid-column:2; grid-row:1; }
  .nav__logo .mono{ font-size:34px; }
  .burger{ display:flex; grid-column:3; grid-row:1; }
  .nav__spacer{ display:block; grid-column:1; grid-row:1; }
}

/* mobile overlay menu */
.menu{
  position:fixed; inset:0; z-index:790;
  background:var(--olive-deep);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .9s var(--ease);
  pointer-events:none;
}
.menu.is-open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.menu a{
  font-family:var(--display); font-size:clamp(30px,9vw,46px); color:#fff;
  text-decoration:none; padding:10px 20px; letter-spacing:.02em;
  opacity:0; transform:translateY(18px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.menu.is-open a{ opacity:.95; transform:none; }
.menu.is-open a:nth-child(1){ transition-delay:.16s; }
.menu.is-open a:nth-child(2){ transition-delay:.23s; }
.menu.is-open a:nth-child(3){ transition-delay:.30s; }
.menu.is-open a:nth-child(4){ transition-delay:.37s; }
.menu__meta{
  position:absolute; bottom:40px; color:rgba(255,255,255,.5);
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
}

/* =========================================================
   Preloader
   ========================================================= */
.loader{
  position:fixed; inset:0; z-index:1000;
  background:var(--paper);
  display:grid; place-items:center;
  transition:opacity 1s var(--ease), visibility 1s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{
  display:flex; flex-direction:column; align-items:center; gap:16px;
}
.loader__mono{
  font-family:var(--display); font-size:48px; color:var(--ink);
  opacity:0; animation:markIn 1.5s var(--ease) .12s forwards;
}
.loader__bar{
  width:0; height:1px; background:var(--sand);
  animation:barIn 1.5s var(--ease) .3s forwards;
}
@keyframes markIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes barIn{ from{width:0} to{width:120px} }

/* =========================================================
   Picture placeholders  (P1, P2, …)
   ========================================================= */
.ph{
  position:relative; overflow:hidden;
  background:
    linear-gradient(135deg, rgba(196,177,140,.10), rgba(110,114,99,.08)),
    var(--paper-deep);
  display:grid; place-items:center;
  isolation:isolate;
}
.ph::before{ /* fine cross-hair */
  content:"";
  position:absolute; inset:14px;
  border:1px solid rgba(31,33,27,.10);
}
.ph::after{ /* soft sheen */
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 46%);
  pointer-events:none;
}
.ph__body{ position:relative; z-index:2; text-align:center; padding:24px; max-width:80%; }
.ph__id{
  font-family:var(--display);
  font-size:clamp(22px,2.6vw,34px);
  letter-spacing:.14em;
  color:var(--olive);
  display:inline-block;
  padding-bottom:8px;
  border-bottom:1px solid var(--sand);
}
.ph__cap{
  display:block; margin-top:12px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-mute); line-height:1.9;
}
/* full-bleed backgrounds: park the label in the corner so it never fights the headline */
/* =========================================================
   Real photos  +  P-number watermark
   ========================================================= */
.shot{ position:relative; overflow:hidden; background:var(--paper-deep); }
.shot > img{
  width:100%; height:100%; object-fit:cover; display:block;
  object-position:var(--pos,center);
}
.shot--bleed{ position:absolute; inset:0; }

/* photo not supplied yet — a quiet labelled slot rather than a broken image */
.shot.is-missing::after{
  content:"Foto folgt";
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--sans); font-size:10.5px; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute);
}
.shot--bleed.is-missing{ background:linear-gradient(150deg,#5C6053,#3D4235); }
.shot--bleed.is-missing::after{ color:rgba(255,255,255,.62); }

/* watermark chip — remove these spans once the photos are final */
.pmark{
  position:absolute; z-index:5; top:14px; left:14px;
  pointer-events:none; user-select:none;
  font-family:var(--sans);
  font-size:10.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:#fff;
  padding:6px 11px 5px;
  background:rgba(31,33,27,.38);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(7px) saturate(120%);
  -webkit-backdrop-filter:blur(7px) saturate(120%);
}
/* On full-bleed sections the chip clears the fixed nav and sits right —
   page-head copy is bottom-left, so the left corner is not free. */
.pmark--bleed{ top:calc(var(--nav-h) + 18px); right:var(--gut); left:auto; }

/* the internal label is suppressed; a .ph-tag sits outside the parallax layer instead */
.ph--corner .ph__body{ display:none; }
.ph--corner::before{ display:none; }   /* no inset frame on full-bleed backgrounds */
/* top-right: the only corner that is free on every full-bleed section
   (hero copy is centred, page-head copy sits bottom-left) */
.ph-tag{
  position:absolute; z-index:3; pointer-events:none;
  right:var(--gut); top:calc(var(--nav-h) + 20px);
  text-align:right;
}
.ph-tag b{
  display:block; width:fit-content; margin-left:auto; font-weight:400;
  font-family:var(--display); font-size:19px; letter-spacing:.2em;
  color:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:5px;
}
.ph-tag span{
  display:block; margin-top:9px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; line-height:1.8;
  color:rgba(255,255,255,.5);
}
.ph-tag--band{ top:26px; }

/* on dark / image-over-image contexts */
.ph--dark{ background:linear-gradient(150deg,#5C6053,#3D4235); }
.ph--dark::before{ border-color:rgba(255,255,255,.16); }
.ph--dark::after{ background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%); }
.ph--dark .ph__id{ color:rgba(255,255,255,.9); border-color:rgba(255,255,255,.4); }
.ph--dark .ph__cap{ color:rgba(255,255,255,.6); }

/* ratios */
.r-hero{ position:absolute; inset:0; }
.r-3-4{ aspect-ratio:3/4; }
.r-4-5{ aspect-ratio:4/5; }
.r-1-1{ aspect-ratio:1/1; }
.r-4-3{ aspect-ratio:4/3; }
.r-3-2{ aspect-ratio:3/2; }
.r-16-9{ aspect-ratio:16/9; }
.r-21-9{ aspect-ratio:21/9; }
@media (max-width:700px){
  .r-21-9{ aspect-ratio:16/10; }
  .r-16-9{ aspect-ratio:4/3; }
}

/* framed figure w/ hairline offset — a quiet luxury detail */
.figure{ position:relative; }
.figure--offset::before{
  content:""; position:absolute; inset:0;
  border:1px solid var(--sand); opacity:.6;
  transform:translate(16px,16px);
  pointer-events:none;
  z-index:-1;
}
.figure__cap{
  margin-top:14px; font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* =========================================================
   Hero
   ========================================================= */
/* copy sits in the lower third so the couple and the castell stay clear */
.hero{
  position:relative; min-height:100svh; display:grid; align-items:end;
  overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media .ph{ position:absolute; inset:-4%; }
.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,
      rgba(31,33,27,.38) 0%,
      rgba(31,33,27,.07) 20%,
      rgba(31,33,27,.02) 48%,
      rgba(31,33,27,.20) 66%,
      rgba(31,33,27,.58) 80%,
      rgba(31,33,27,.80) 92%,
      rgba(31,33,27,.86) 100%);
}
.hero__inner{
  position:relative; z-index:2; text-align:center; color:#fff;
  text-shadow:0 1px 18px rgba(31,33,27,.5);
  padding-top:var(--nav-h);
  padding-bottom:clamp(74px,11vh,128px);
}
.hero__names{
  font-family:var(--display);
  font-size:clamp(46px,8.2vw,118px);
  line-height:1;
  letter-spacing:.005em;
  text-shadow:none;
}
.hero__names .amp{ font-style:italic; font-size:.72em; padding-inline:.06em; opacity:.9; }
.hero__meta{
  margin-top:clamp(16px,2.2vw,28px);
  display:flex; flex-direction:column; align-items:center; gap:13px;
}
.hero__date{
  font-family:var(--display);
  font-size:clamp(17px,2vw,28px);
  letter-spacing:.3em; text-transform:uppercase;
}
.hero__place{
  font-size:clamp(11px,.95vw,13px); letter-spacing:.4em; text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.hero__line{ width:1px; height:clamp(26px,3.4vw,44px); background:rgba(255,255,255,.8); }

.scrollcue{
  position:absolute; right:var(--gut); bottom:30px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  color:rgba(255,255,255,.66);
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
}
@media (max-width:620px){ .scrollcue{ display:none; } }
.scrollcue__bar{ width:1px; height:52px; background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0)); position:relative; overflow:hidden; }
.scrollcue__bar::after{
  content:""; position:absolute; left:0; width:1px; height:18px; background:#fff;
  animation:cue 2.6s var(--ease-io) infinite;
}
@keyframes cue{ 0%{top:-20px} 60%,100%{top:56px} }

/* =========================================================
   Countdown
   ========================================================= */
.count{ display:flex; justify-content:center; gap:clamp(20px,5vw,72px); flex-wrap:wrap; }
.count__u{ text-align:center; min-width:64px; }
.count__n{
  font-family:var(--display); font-size:clamp(34px,4.6vw,62px);
  display:block; line-height:1; letter-spacing:.01em;
  font-variant-numeric:tabular-nums lining-nums;
}
.count__l{
  display:block; margin-top:12px;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-mute);
}

/* =========================================================
   Weekend timeline (home)
   ========================================================= */
.tl{ position:relative; }
.tl__spine{
  position:absolute; left:50%; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--line) 8%,var(--line) 92%,transparent);
  transform:translateX(-.5px);
}
.tl__item{
  position:relative; display:grid; gap:clamp(24px,4vw,56px);
  padding-block:clamp(34px,5vw,66px);
}
@media (min-width:900px){
  .tl__item{ grid-template-columns:1fr 1fr; align-items:center; }
  /* odd rows: text left of the spine (right-aligned toward it) */
  .tl__item:nth-of-type(odd) .tl__text{ text-align:right; }
  .tl__item:nth-of-type(odd) .tl__text .btn-line{ margin-left:auto; }
  /* even rows: mirrored */
  .tl__item:nth-of-type(even) .tl__text{ grid-column:2; text-align:left; }
  .tl__item:nth-of-type(even) .tl__media{ grid-column:1; grid-row:1; }
}
.tl__node{
  position:absolute; left:50%; top:50%; width:9px; height:9px;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--paper); border:1px solid var(--sand);
  display:none;
}
@media (min-width:900px){ .tl__node{ display:block; } }
.tl__when{
  font-family:var(--display); font-size:13px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--olive); display:block; margin-bottom:14px;
}
.tl__title{ font-family:var(--display); font-size:clamp(24px,2.7vw,38px); line-height:1.15; }
.tl__where{
  margin-top:10px; font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-mute);
}
.tl__note{ margin-top:18px; color:var(--ink-soft); max-width:44ch; }
@media (min-width:900px){ .tl__item:nth-of-type(odd) .tl__note{ margin-left:auto; } }

/* =========================================================
   Programme / agenda
   ========================================================= */
.agenda{ position:relative; margin-top:clamp(28px,3vw,44px); }
.agenda__row{
  display:grid; grid-template-columns:88px 1fr; gap:22px;
  padding-block:15px; position:relative;
  border-top:1px solid var(--line-soft);
}
.agenda__row:last-child{ border-bottom:1px solid var(--line-soft); }
.agenda__time{
  font-family:var(--display); font-size:15.5px; letter-spacing:.08em;
  color:var(--olive); font-variant-numeric:tabular-nums;
  padding-top:1px;
}
.agenda__what{ font-size:15.5px; letter-spacing:.015em; color:var(--ink); }
.agenda__row--end .agenda__what{ color:var(--ink-mute); }

/* Desktop: minimalist spine diagram — entries alternate around a centre line,
   each tied to it by a short tick. Mobile keeps the plain table above. */
@media (min-width:900px){
  .agenda{ position:relative; padding-block:6px; }
  .agenda::before{
    content:""; position:absolute; left:50%; top:0; bottom:0;
    width:1px; background:var(--line); transform:translateX(-.5px);
  }
  .agenda__row{
    display:block; border:0; padding:0;
    position:relative; width:50%;
    padding-block:clamp(14px,1.6vw,22px);
  }
  .agenda__row:last-child{ border-bottom:0; }
  .agenda__row::before{
    content:""; position:absolute; top:calc(clamp(14px,1.6vw,22px) + 11px);
    width:clamp(24px,2.4vw,38px); height:1px; background:var(--line);
  }
  .agenda__row:nth-of-type(odd){
    margin-left:50%; text-align:left;
    padding-left:calc(clamp(24px,2.4vw,38px) + 18px);
  }
  .agenda__row:nth-of-type(odd)::before{ left:0; }
  .agenda__row:nth-of-type(even){
    margin-left:0; text-align:right;
    padding-right:calc(clamp(24px,2.4vw,38px) + 18px);
  }
  .agenda__row:nth-of-type(even)::before{ right:0; }
  .agenda__time,.agenda__what{ display:block; padding-top:0; }
  .agenda__time{ margin-bottom:3px; }
}

/* dresscode swatches */
.swatches{ display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.sw{
  width:26px; height:26px; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(31,33,27,.14), 0 1px 3px rgba(31,33,27,.06);
  transition:transform .5s var(--ease);
}
.sw:hover{ transform:translateY(-3px) scale(1.06); }
/* event heading: line 1 = what, line 2 = where (a touch quieter) */
.ev__where{ font-size:.72em; letter-spacing:.06em; color:var(--ink-soft); }

.dress{ display:block; margin-block:18px 4px; }
.dress .swatches{ margin-top:12px; }
.dress__label{
  font-family:var(--display); font-style:italic; font-size:17px; letter-spacing:.02em; color:var(--ink-soft);
}

/* info chip / note */
.note{
  display:flex; gap:14px; align-items:flex-start;
  padding:18px 20px; background:var(--paper-warm);
  border-left:1px solid var(--sand);
  font-size:14.5px; line-height:1.75; color:var(--ink-soft);
}
.note svg{ flex:0 0 auto; margin-top:3px; }

/* =========================================================
   Buttons / links
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  padding:17px 40px; text-decoration:none;
  font-family:var(--display); font-size:13px; letter-spacing:.26em; text-transform:uppercase;
  color:#fff; background:var(--olive);
  position:relative; overflow:hidden;
  border:1px solid var(--olive);
  cursor:pointer;
  transition:color .6s var(--ease), border-color .6s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; background:var(--olive-deep);
  transform:translateY(101%); transition:transform .65s var(--ease); z-index:0;
}
.btn:hover::after{ transform:translateY(0); }
.btn > *{ position:relative; z-index:1; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn--ghost:hover{ color:#fff; }
.btn--ghost::after{ background:var(--ink); }
.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.btn--light::after{ background:#fff; }
.btn--light:hover{ color:var(--ink); border-color:#fff; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.btn-line{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; padding-bottom:5px;
  font-family:var(--display); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); position:relative; width:fit-content;
}
.btn-line::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform-origin:right; transition:transform .6s var(--ease);
}
.btn-line:hover::after{ transform:scaleX(0); transform-origin:left; }
.btn-line svg{ transition:transform .6s var(--ease); }
.btn-line:hover svg{ transform:translateX(5px); }

/* =========================================================
   Page header (inner pages)
   ========================================================= */
.phead{
  position:relative; padding-top:calc(var(--nav-h) + clamp(60px,9vw,130px));
  padding-bottom:clamp(46px,6vw,90px);
  overflow:hidden;
}
/* Every sub-page header is the SAME 16:9 band — slightly wider than the
   full-screen home hero. The min-height only takes over on narrow screens,
   where 16:9 would be too short to carry a title. */
.phead--media{
  padding-top:0;
  display:grid; align-items:end;
  min-height:0;
  aspect-ratio:16/9;
}
@media (max-width:900px){
  .phead--media{ aspect-ratio:auto; min-height:clamp(340px,52svh,520px); }
}
.phead--media .phead__bg{ position:absolute; inset:0; z-index:0; }
.phead--media .phead__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(31,33,27,.40) 0%, rgba(31,33,27,.06) 34%, rgba(31,33,27,.50) 78%, rgba(31,33,27,.80) 100%),
    linear-gradient(90deg, rgba(31,33,27,.46) 0%, rgba(31,33,27,.10) 46%, rgba(31,33,27,0) 68%);
}
.phead--media .phead__inner{ position:relative; z-index:2; color:#fff; padding-bottom:clamp(44px,6vw,84px); }
.phead__title{
  font-family:var(--display); font-size:clamp(44px,7.2vw,100px); line-height:1;
  /* --lsb is the initial letter's left side bearing, set per page; without it
     a big "I" sits ~15px inside the small caps that frame it */
  margin-left:calc(var(--lsb, 0em) * -1);
}
.phead__sub{
  margin-top:20px; font-size:11px; letter-spacing:.38em; text-transform:uppercase;
  color:var(--ink-mute);
}
.phead--media .phead__sub{ color:rgba(255,255,255,.9); }
/* small letterspaced lines need help over a sunlit photograph */
.phead--media .phead__inner > *{ text-shadow:0 1px 18px rgba(31,33,27,.55); }
.phead--media .phead__title{ text-shadow:none; }

/* anchor sub-nav */
.subnav{
  position:sticky; top:var(--nav-h); z-index:600;
  background:rgba(251,249,245,.9);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-block:1px solid var(--line-soft);
}
.subnav__inner{ display:flex; gap:clamp(18px,3vw,48px); justify-content:center; flex-wrap:wrap; padding-block:16px; }
.subnav a{
  text-decoration:none; font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute); padding-bottom:4px; position:relative;
  transition:color .5s var(--ease);
}
.subnav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--ink);
  transform:scaleX(0); transition:transform .5s var(--ease);
}
.subnav a:hover,.subnav a.is-active{ color:var(--ink); }
.subnav a:hover::after,.subnav a.is-active::after{ transform:scaleX(1); }

/* =========================================================
   Cards (travel / hotels / tips)
   ========================================================= */
.icard{
  display:grid; grid-template-columns:56px 1fr; gap:22px; align-items:start;
  padding-block:26px; border-top:1px solid var(--line-soft);
}
.icard:last-child{ border-bottom:1px solid var(--line-soft); }
.icard__ico{
  width:56px;height:56px;border-radius:50%;
  background:var(--paper-warm);
  display:grid;place-items:center;
  color:var(--olive);
}
.icard__t{
  font-family:var(--display); font-size:14px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:7px;
}
.icard__d{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; }
.icard__d b{ font-weight:400; color:var(--olive); }

.stay{
  display:grid; gap:6px;
  padding:26px 0; border-top:1px solid var(--line-soft);
  grid-template-columns:1fr auto; align-items:center;
  transition:padding-inline .6s var(--ease), background .6s var(--ease);
}
.stay:last-child{ border-bottom:1px solid var(--line-soft); }
.stay:hover{ background:var(--paper-warm); padding-inline:18px; }
.stay__name{
  font-family:var(--display); font-size:clamp(18px,1.6vw,23px); letter-spacing:.01em;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.stay__name a{ text-decoration:none; border-bottom:1px solid var(--sand); padding-bottom:2px; }
.stay__meta{
  grid-column:1; display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.stay__meta span{ display:inline-flex; align-items:center; gap:7px; }
.stay__price{
  grid-column:2; grid-row:1 / span 2;
  font-family:var(--display); font-size:17px; letter-spacing:.14em; color:var(--olive);
  padding-left:20px;
}
.tag{
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--line); color:var(--ink-mute);
}
.tag--accent{ border-color:var(--sand); color:var(--olive); }

.cluster__head{
  display:flex; align-items:baseline; gap:18px; flex-wrap:wrap;
  margin-bottom:6px;
}
.cluster__head h3{ font-family:var(--display); font-size:clamp(20px,2vw,28px); }
.cluster__head span{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-mute); }

/* tips grid */
/* 2-up: the travel photos are all landscape, so wide cards suit them
   far better than a cramped four-across row of portrait crops */
.tips{ display:grid; gap:clamp(30px,3.4vw,56px); }
@media (min-width:760px){ .tips{ grid-template-columns:repeat(2,1fr); } }
.tip__n{
  font-family:var(--display); font-size:12px; letter-spacing:.24em; color:var(--sand);
  display:block; margin-bottom:12px;
}
.tip__t{ font-family:var(--display); font-size:clamp(19px,1.6vw,23px); margin-top:18px; line-height:1.25; }
.tip__d{ font-size:14.5px; color:var(--ink-soft); margin-top:8px; line-height:1.7; }

/* =========================================================
   RSVP form
   ========================================================= */
.form{ display:grid; gap:clamp(30px,4vw,52px); }
.field{ display:grid; gap:12px; }
.field__label{
  font-family:var(--display); font-size:12.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink);
}
.field__hint{ font-size:13.5px; color:var(--ink-mute); margin-top:-4px; line-height:1.65; }
.field__opt{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }

.row2{ display:grid; gap:clamp(18px,2.4vw,32px); }
@media (min-width:720px){ .row2{ grid-template-columns:1fr 1fr; } }

.input{
  width:100%; border:0; border-bottom:1px solid var(--line);
  background:transparent; padding:12px 2px; font-family:var(--sans);
  font-size:16px; font-weight:400; letter-spacing:.01em; color:var(--ink);
  transition:border-color .5s var(--ease);
  border-radius:0;
}
.input::placeholder{ color:var(--ink-mute); opacity:.6; }
.input:focus{ outline:none; border-color:var(--olive); }
textarea.input{ resize:vertical; min-height:96px; line-height:1.7; }
input[type="date"].input{ color:var(--ink-soft); }

/* choice buttons */
.choices{ display:grid; gap:12px; }
.choices--inline{ grid-auto-flow:row; }
@media (min-width:720px){
  .choices--inline{ grid-auto-flow:column; grid-auto-columns:1fr; }
}
.choice{ position:relative; }
.choice input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.choice span{
  display:flex; align-items:center; gap:12px; height:100%;
  padding:16px 20px; border:1px solid var(--line);
  font-size:15px; letter-spacing:.01em; color:var(--ink-soft);
  cursor:pointer;
  transition:border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.choice span::before{
  content:""; width:7px; height:7px; flex:0 0 auto; transform:rotate(45deg);
  border:1px solid var(--ink-mute);
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
.choice input:hover + span{ border-color:var(--olive-mist); }
.choice input:checked + span{
  border-color:var(--olive); background:var(--paper-warm); color:var(--ink);
}
.choice input:checked + span::before{ background:var(--olive); border-color:var(--olive); }
.choice input:focus-visible + span{ outline:2px solid var(--olive); outline-offset:3px; }

/* chips (multi select) */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
.chip span{
  display:inline-flex; align-items:center; gap:9px;
  padding:11px 20px; border:1px solid var(--line); cursor:pointer;
  font-size:14px; letter-spacing:.02em; color:var(--ink-soft);
  transition:all .45s var(--ease);
}
.chip input:checked + span{ border-color:var(--olive); background:var(--olive); color:#fff; }
.chip input:focus-visible + span{ outline:2px solid var(--olive); outline-offset:3px; }

/* conditional block */
.reveal-block{
  display:grid; gap:clamp(30px,4vw,52px);
  overflow:hidden;
  max-height:0; opacity:0;
  transition:max-height .9s var(--ease), opacity .7s var(--ease), margin .9s var(--ease);
}
.reveal-block.is-open{ max-height:4000px; opacity:1; }

.form__foot{ display:flex; flex-direction:column; align-items:center; gap:18px; text-align:center; }

.formcard{
  background:var(--paper);
  padding:clamp(28px,5vw,72px);
  border:1px solid var(--line-soft);
  box-shadow:0 1px 2px rgba(31,33,27,.03), 0 24px 60px -40px rgba(31,33,27,.28);
}

/* =========================================================
   Footer — slim band: witnesses left, RSVP call right
   ========================================================= */
.foot{
  background:var(--olive); color:#fff;
  padding-block:clamp(22px,2.6vw,34px);
  position:relative;
}
.foot__inner{ display:flex; align-items:center; justify-content:center; }
.foot__left{ text-align:center; }
.foot__right{
  display:flex; align-items:center; gap:clamp(14px,2vw,24px);
  flex-wrap:wrap; justify-content:flex-end; text-align:right;
}
.foot__t{
  font-size:9.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.6);
  margin:0 0 7px;
}
.foot__w{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.foot__w a{
  text-decoration:none; font-family:var(--display); font-weight:700;
  font-size:15.5px; letter-spacing:.03em;
  display:inline-flex; gap:9px; align-items:baseline;
  border-bottom:1px solid rgba(255,255,255,.2); padding-bottom:2px;
  transition:border-color .5s var(--ease);
}
.foot__w a:hover{ border-color:#fff; }
.foot__w a em{
  font-style:normal; font-family:var(--sans); font-weight:400;
  font-size:13px; color:rgba(255,255,255,.7);
}
.foot__cta-d{ margin:0; font-size:14px; color:rgba(255,255,255,.8); }
.foot__right .btn{ padding:12px 26px; font-size:12px; letter-spacing:.2em; }

@media (max-width:700px){
  .foot__inner{ flex-direction:column; align-items:flex-start; }
  .foot__right{ justify-content:flex-start; text-align:left; }
}

/* =========================================================
   Full-bleed message band
   ========================================================= */
.band{ position:relative; overflow:hidden; }
.band__bg{ position:absolute; inset:0; z-index:0; }
.band__veil{ position:absolute; inset:0; z-index:1; background:rgba(31,33,27,.56); }
.band__inner{
  position:relative; z-index:2; color:#fff; text-align:center;
  padding-block:clamp(80px,12vw,180px);
}
.band__msg{
  font-family:var(--display);
  font-size:clamp(20px,2.6vw,36px);
  line-height:1.5; letter-spacing:.06em; text-transform:uppercase;
  max-width:22ch; margin-inline:auto;
}
.band__msg b{ font-weight:400; border-bottom:1px solid rgba(255,255,255,.5); }

/* plain variant — no photograph behind it, so the type carries the section */
.band--plain{ background:var(--paper-warm); overflow:visible; }
.band--plain .band__inner{ color:var(--ink); padding-block:0; text-align:center; }
.band--plain .band__msg{ color:var(--ink); max-width:26ch; }
.band--plain .band__msg b{ border-bottom-color:var(--sand); }
.band--plain .eyebrow{ color:var(--ink-mute); }

/* =========================================================
   Reveal-on-scroll
   ========================================================= */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay:var(--d,0s);
  will-change:opacity,transform;
}
[data-reveal].is-in{ opacity:1; transform:none; }

[data-reveal="mask"]{
  opacity:1; transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.35s var(--ease);
  transition-delay:var(--d,0s);
}
[data-reveal="mask"].is-in{ clip-path:inset(0 0 0 0); }

[data-reveal="lines"] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal="lines"].is-in > *{ opacity:1; transform:none; }
[data-reveal="lines"].is-in > *:nth-child(1){ transition-delay:.05s; }
[data-reveal="lines"].is-in > *:nth-child(2){ transition-delay:.14s; }
[data-reveal="lines"].is-in > *:nth-child(3){ transition-delay:.23s; }
[data-reveal="lines"].is-in > *:nth-child(4){ transition-delay:.32s; }
[data-reveal="lines"].is-in > *:nth-child(5){ transition-delay:.41s; }
[data-reveal="lines"].is-in > *:nth-child(6){ transition-delay:.50s; }

/* hero intro animation */
.hero__names,.hero__meta,.scrollcue{
  opacity:0; transform:translateY(24px);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
body.is-ready .hero__names{ opacity:1; transform:none; transition-delay:.15s; }
body.is-ready .hero__meta{ opacity:1; transform:none; transition-delay:.42s; }
body.is-ready .scrollcue{ opacity:1; transform:none; transition-delay:.85s; }
body.is-ready .hero__media{ animation:heroDrift 26s ease-out forwards; }
@keyframes heroDrift{ from{ transform:scale(1.06) } to{ transform:scale(1) } }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  [data-reveal="lines"] > *{ opacity:1 !important; transform:none !important; }
  .hero__names,.hero__meta,.scrollcue{ opacity:1; transform:none; }
}

/* =========================================================
   Small-screen tracking corrections
   ========================================================= */
@media (max-width:620px){
  .phead__sub{ letter-spacing:.2em; font-size:10px; }
  .hero__place{ letter-spacing:.28em; }
  .eyebrow{ letter-spacing:.26em; }
  .band__msg{ letter-spacing:.04em; max-width:100%; }
  .subnav a{ letter-spacing:.18em; }
}

/* =========================================================
   Utilities
   ========================================================= */
.center{ text-align:center; }
.mx-auto{ margin-inline:auto; }
.mt-s{ margin-top:clamp(16px,2vw,26px); }
.mt-m{ margin-top:clamp(26px,3.4vw,46px); }
.mt-l{ margin-top:clamp(40px,5.4vw,78px); }
.stack-s > * + *{ margin-top:clamp(12px,1.6vw,20px); }
.stack-m > * + *{ margin-top:clamp(22px,3vw,38px); }
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.legend{
  display:flex; gap:clamp(16px,3vw,38px); flex-wrap:wrap;
  font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute);
}
.legend span{ display:inline-flex; align-items:center; gap:9px; }
.legend b{ font-family:var(--display); font-weight:400; color:var(--olive); letter-spacing:.1em; }

/* =========================================================
   Schedule over a photograph  (home page — "Der Ablauf")
   ========================================================= */
.sched{ position:relative; overflow:hidden; }
.sched__bg{ position:absolute; inset:0; z-index:0; }
.sched__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(31,33,27,.62) 0%, rgba(31,33,27,.50) 40%, rgba(31,33,27,.62) 100%);
}
.sched__inner{
  position:relative; z-index:2; color:#fff;
  padding-block:clamp(70px,10vw,140px);
  text-shadow:0 1px 20px rgba(31,33,27,.5);
}
.sched__title{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4.2vw,58px); line-height:1.1;
  text-align:center; letter-spacing:.01em;
}

.sched__list{
  position:relative; margin:clamp(38px,5vw,64px) auto 0;
  max-width:820px;
}
.sched__list::before{
  content:""; position:absolute; left:50%; top:6px; bottom:6px;
  width:1px; background:rgba(255,255,255,.4); transform:translateX(-.5px);
}
.sched__item{
  position:relative; width:50%;
  padding-block:clamp(16px,2vw,26px);
}
.sched__item::before{
  content:""; position:absolute; top:calc(clamp(16px,2vw,26px) + 13px);
  width:clamp(22px,2.2vw,34px); height:1px; background:rgba(255,255,255,.4);
}
.sched__item:nth-of-type(odd){
  margin-left:50%; text-align:left;
  padding-left:calc(clamp(22px,2.2vw,34px) + 18px);
}
.sched__item:nth-of-type(odd)::before{ left:0; }
.sched__item:nth-of-type(even){
  margin-left:0; text-align:right;
  padding-right:calc(clamp(22px,2.2vw,34px) + 18px);
}
.sched__item:nth-of-type(even)::before{ right:0; }

.sched__what{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,2vw,27px); line-height:1.2; display:block;
}
.sched__where{
  display:block; margin-top:5px;
  font-size:14px; color:rgba(255,255,255,.84);
}
.sched__when{
  display:block; margin-top:7px;
  font-size:10.5px; letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.66);
}
.sched__opt{
  display:inline-block; margin-top:9px;
  font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
  border:1px solid rgba(255,255,255,.45); padding:4px 10px 3px;
}

@media (max-width:680px){
  .sched__list{ max-width:none; }
  .sched__list::before{ left:0; }
  .sched__item{
    width:100%; margin-left:0 !important; text-align:left !important;
    padding-left:30px !important; padding-right:0 !important;
  }
  .sched__item::before{ left:0 !important; right:auto !important; width:18px; }
}

/* =========================================================
   Accommodation tables  (Anreise)
   ========================================================= */
.stayblock + .stayblock{ margin-top:clamp(44px,5vw,72px); }
.stayblock__t{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,1.9vw,25px); letter-spacing:.02em;
  margin-bottom:16px;
}
.stbl{ width:100%; border-collapse:collapse; text-align:left; }
.stbl thead th{
  font-family:var(--sans); font-weight:600;
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff; background:var(--olive);
  padding:13px 16px; white-space:nowrap;
}
.stbl td{
  padding:18px 16px; vertical-align:top;
  border-bottom:1px solid var(--line-soft);
  font-size:15px; line-height:1.55; color:var(--ink-soft);
}
.stbl tbody tr:hover td{ background:rgba(196,177,140,.09); }
.stbl .stbl__name{
  font-family:var(--display); font-weight:700;
  font-size:17.5px; color:var(--ink); letter-spacing:.01em;
}
.stbl .stbl__name a{
  text-decoration:none; border-bottom:1px solid var(--sand); padding-bottom:2px;
  transition:border-color .45s var(--ease);
}
.stbl .stbl__name a:hover{ border-color:var(--olive); }
.stbl__book{
  display:inline-block;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--olive); border:1px solid var(--sand); padding:6px 11px 5px;
  white-space:nowrap; text-decoration:none;
  transition:background .4s var(--ease), border-color .4s var(--ease);
}
a.stbl__book:hover{ background:var(--sand-light); border-color:var(--olive); }
.stbl__note{ display:block; font-size:13px; color:var(--ink-mute); margin-top:3px; }

/* stack into cards on narrow screens */
@media (max-width:860px){
  .stbl thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .stbl,.stbl tbody,.stbl tr,.stbl td{ display:block; width:100%; }
  .stbl tr{
    border:1px solid var(--line-soft); background:var(--paper);
    padding:20px; margin-bottom:16px;
  }
  .stbl td{ border:0; padding:0; }
  .stbl td + td{ margin-top:10px; }
  .stbl td[data-l]::before{
    content:attr(data-l);
    display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
    color:var(--ink-mute); margin-bottom:3px;
  }
}

/* =========================================================
   Witnesses  (Infos — photo then name, on every screen)
   ========================================================= */
.witnesses{ display:grid; gap:clamp(30px,4vw,56px); }
@media (min-width:760px){ .witnesses{ grid-template-columns:repeat(2,1fr); } }
.witness__name{
  font-family:var(--display); font-weight:700;
  font-size:clamp(19px,1.8vw,24px); margin-top:20px; letter-spacing:.01em;
}
.witness__tel{
  display:inline-block; margin-top:6px; font-size:15.5px;
  color:var(--olive); text-decoration:none;
  border-bottom:1px solid var(--sand); padding-bottom:2px;
}

/* =========================================================
   Interactive accommodation map  (Leaflet + OpenStreetMap)
   ========================================================= */
.map{
  position:relative; aspect-ratio:16/9; min-height:340px;
  background:var(--paper-deep); overflow:hidden;
  border:1px solid var(--line-soft);
}
@media (max-width:700px){ .map{ aspect-ratio:4/5; } }

/* click-to-load screen — nothing external is requested until the guest asks */
.map__cta{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:16px; text-align:center; padding:24px;
  background:
    linear-gradient(135deg, rgba(196,177,140,.10), rgba(110,114,99,.08)), var(--paper-deep);
}
.map__cta-t{
  font-family:var(--display); font-weight:700;
  font-size:clamp(18px,1.8vw,23px); margin:0;
}
.map__cta-n{ margin:0; font-size:12.5px; color:var(--ink-mute); max-width:34ch; }
.map.is-live .map__cta{ display:none; }
/* the map builds on load, so the panel is only a no-JS fallback */

.map__canvas{ position:absolute; inset:0; z-index:1; }
/* Positron is already near-monochrome — just warm it toward the paper palette */
.map__canvas .leaflet-tile-pane{ filter:sepia(.14) saturate(.92) brightness(1.02); }
.map__canvas .leaflet-container{ background:var(--paper-deep); font-family:var(--sans); }
.map__canvas .leaflet-control-zoom a{
  color:var(--ink); border-radius:0; border-color:var(--line);
  font-weight:400;
}
.map__canvas .leaflet-control-attribution{
  background:rgba(251,249,245,.86); font-size:10px; color:var(--ink-mute);
}
.map__canvas .leaflet-control-attribution a{ color:var(--olive); }

/* pins */
.pin{
  width:36px; height:36px; border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
  background:var(--olive); border:2px solid var(--paper);
  box-shadow:0 4px 12px rgba(31,33,27,.34);
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pin:hover{ transform:rotate(-45deg) scale(1.1); box-shadow:0 7px 18px rgba(31,33,27,.42); }
.pin--venue{ background:#8A6A4F; width:44px; height:44px; }   /* Locations = braun */
.pin__ico{ transform:rotate(45deg); display:block; color:#fff; }
.pin__ico svg{ width:20px; height:20px; display:block; }
.pin__n{
  transform:rotate(45deg);
  font-family:var(--sans); font-size:19px; color:var(--ink);
  line-height:1;
}
/* stays carry a plain dot — numbering would imply an order the page
   never uses, and a hidden pin behind another would look like a gap */
.pin__dot{
  width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.92);
}

/* popup */
.map__canvas .leaflet-popup-content-wrapper{
  border-radius:0; background:var(--paper);
  box-shadow:0 12px 40px -18px rgba(31,33,27,.5);
  border:1px solid var(--line-soft);
}
.map__canvas .leaflet-popup-tip{ background:var(--paper); }
.map__canvas .leaflet-popup-content{ margin:18px 20px; width:auto !important; min-width:190px; }
.mpop__k{
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-mute); display:block; margin-bottom:4px;
}
.mpop__t{
  font-family:var(--display); font-weight:700;
  font-size:17px; line-height:1.2; color:var(--ink); margin:0 0 10px;
}
.mpop__row{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0; }
.mpop__row b{ font-weight:400; color:var(--ink); }
.mpop__link{
  display:inline-block; margin-top:12px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--olive); text-decoration:none;
  border-bottom:1px solid var(--sand); padding-bottom:2px;
}
.map__legend{
  display:flex; gap:22px; flex-wrap:wrap; align-items:center;
  margin-top:16px; font-size:12px; color:var(--ink-mute);
}
.map__legend span{ display:inline-flex; align-items:center; gap:9px; }
.map__legend i{
  width:11px; height:11px; border-radius:50%; display:inline-block;
  background:var(--olive);
}
.map__legend i.is-venue{ background:#8A6A4F; }

/* the programme sections lead with a full-width landscape photo,
   so the copy below sits in a comfortable reading column */
.ev__body{ max-width:760px; }