/* ===========================================================================
   GOLD POINT RESORT - Breckenridge, Colorado
   Alpine night palette, a gold ridgeline that keeps returning, and one
   continuous dark-to-snow-to-dark composition.
   =========================================================================== */

:root {
  /* alpine night */
  --nacht: #0A121C;
  --nacht-2: #0E1A26;
  --nacht-3: #142532;
  --nacht-diep: #060C13;

  /* snow */
  --sneeuw: #F2EFE8;
  --sneeuw-2: #E7E2D7;
  --inkt: #141C25;
  --inkt-zacht: #46535F;

  /* gold */
  --goud: #D8A74A;
  --goud-licht: #ECC87E;
  --goud-diep: #8A5E18;

  /* text on dark */
  --licht: #EDF1F5;
  --licht-2: #B8C6D3;
  --lijn-licht: rgba(216, 167, 74, .28);
  --lijn-donker: rgba(20, 28, 37, .16);

  /* opening */
  --opening-achtergrond: #0A121C;
  --opening-demping: .72;

  /* maat en ritme */
  --kantlijn: clamp(1.25rem, 5vw, 4rem);
  --breed: 1260px;
  --vakpad: clamp(4rem, 7.5vw, 6.5rem);

  /* Geen webfont van een CDN: dat stuurt het IP van elke bezoeker naar Google
     voordat hij iets gevraagd heeft. Dit zijn lettertypen die op het apparaat
     zelf staan, zodat er geen enkel extern verzoek nodig is. */
  --kop: "Palatino Linotype", "Book Antiqua", Palatino, "Iowan Old Style", "Hoefler Text", Georgia, serif;
  --tekst: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--nacht);
  color: var(--licht);
  font-family: var(--tekst);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--goud);
  outline-offset: 3px;
}

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .85rem 1.3rem;
  background: var(--goud);
  color: var(--nacht);
  font-weight: 600;
  text-decoration: none;
}
.overslaan:focus { left: 1rem; top: 1rem; }

/* ---- bouwstenen -------------------------------------------------------- */

.binnen {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kantlijn);
}

.vak {
  position: relative;
  padding-block: var(--vakpad);
  scroll-margin-top: 4.5rem;
}

.vak--donker { background: var(--nacht); }
.vak--nacht2 { background: var(--nacht-2); }
.vak--licht { background: var(--sneeuw); color: var(--inkt); }
.vak--goudnacht {
  background:
    radial-gradient(120% 90% at 85% 0%, rgba(216, 167, 74, .16) 0%, rgba(216, 167, 74, 0) 62%),
    var(--nacht-2);
}

/* Elke kop in het smalle tekstkolommetje liet een los woord achter op de
   laatste regel ("Space for the Entire / Family", "Any Time Is Mountain /
   Time"). Die wees is het enige wat van deze typografie nog amateuristisch
   oogt, dus balanceren de koppen hun regels zelf uit. */
.titel,
.band__titel,
.weg__titel,
.plan__titel,
.paneel__titel,
.partners__titel,
.voorziening__titel,
.vacatia__titel,
.kaartje__titel,
.breedbeeld__woord {
  text-wrap: balance;
}

.titel {
  margin: 0 0 .5em;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -.008em;
}

.titel--groot {
  font-size: clamp(2.3rem, 1.3rem + 3.9vw, 4.1rem);
}

.lead {
  font-size: clamp(1.09rem, 1.02rem + .38vw, 1.3rem);
  line-height: 1.58;
  color: var(--licht);
  /* hetzelfde, maar dan alleen de laatste regel: lopende tekst hoort niet op
     één woord te eindigen */
  text-wrap: pretty;
}
.vak--licht .lead { color: var(--inkt); }
.lead--kort { max-width: 56ch; }

.vak--donker p, .vak--nacht2 p, .vak--goudnacht p { color: var(--licht-2); }
.vak--donker .lead, .vak--nacht2 .lead, .vak--goudnacht .lead { color: var(--licht); }

.kicker {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin: 0 0 1.1rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--goud);
}
.kicker--donker { color: var(--goud-diep); }
.kicker--licht { color: var(--goud-licht); }

.kicker__kam {
  flex: 0 0 auto;
  width: 46px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
  opacity: .9;
}

.vak__kop { max-width: 62ch; margin-bottom: clamp(2.2rem, 4vw, 3.4rem); }

/* ---- het volle-breedte beeldmoment -------------------------------------
   Eén keer per hoofdstuk loopt het beeld van rand tot rand door, met het
   bijschrift erin in plaats van eronder. Dat breekt de kolommenstructuur en
   houdt de pagina één doorlopende compositie in plaats van een stapel
   kaarten. */

.breedbeeld {
  position: relative;
  display: block;
  margin: clamp(2.6rem, 5vw, 4.4rem) 0;
  overflow: hidden;
  background: var(--nacht-diep);
}

.breedbeeld img {
  display: block;
  width: 100%;
  height: clamp(300px, 46vw, 620px);
  object-fit: cover;
}

.breedbeeld--avond img { object-position: 50% 56%; }
.breedbeeld--zomer img { object-position: 50% 62%; }
/* Lager dan de twee andere banden: #own is een navigatiedoel, dus de kop
   eronder moet meekomen zodra je erheen springt, en drie even hoge banden
   zouden alsnog een rij worden. */
.breedbeeld--ochtend img { height: clamp(250px, 33vw, 450px); object-position: 50% 42%; }

.breedbeeld__bijschrift {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: .35rem;
  padding: clamp(5rem, 14vw, 9rem) var(--kantlijn) clamp(1.5rem, 3.2vw, 2.6rem);
  background: linear-gradient(180deg, rgba(6, 12, 19, 0) 0%, rgba(6, 12, 19, .66) 58%, rgba(6, 12, 19, .9) 100%);
}

.breedbeeld__woord {
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.7rem);
  line-height: 1.1;
  letter-spacing: -.008em;
  color: #fff;
}

.breedbeeld__regel {
  max-width: 48ch;
  font-size: clamp(.92rem, .88rem + .18vw, 1.02rem);
  line-height: 1.5;
  color: #D4DDE6;
}

/* Op de volle breedte blijft de tekst wel in het stramien staan. */
@media (min-width: 1300px) {
  .breedbeeld__bijschrift {
    padding-inline: max(var(--kantlijn), calc((100% - var(--breed)) / 2 + var(--kantlijn)));
  }
}

/* het terugkerende motief: een gouden kamlijn */
.kam {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: clamp(40px, 5vw, 70px);
  fill: none;
  stroke: var(--goud);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .4;
  pointer-events: none;
}

/* ---- knoppen ----------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .82rem 1.45rem;
  border: 1px solid transparent;
  font-family: var(--tekst);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.knop--goud {
  background: var(--goud);
  color: var(--nacht);
}
.knop--goud:hover { background: var(--goud-licht); transform: translateY(-2px); }

.knop--rand {
  border-color: rgba(237, 241, 245, .45);
  color: var(--licht);
}
.knop--rand:hover { border-color: var(--goud); color: var(--goud-licht); transform: translateY(-2px); }

.vak--licht .knop--rand { border-color: rgba(20, 28, 37, .35); color: var(--inkt); }
.vak--licht .knop--rand:hover { border-color: var(--goud-diep); color: var(--goud-diep); }

.knop--groot { padding: 1rem 1.8rem; font-size: 1rem; }

.icoon {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.05em;
  fill: currentColor;
}

.tekstlink {
  display: inline-block;
  margin-top: .3rem;
  padding-bottom: .22rem;
  border-bottom: 1px solid var(--goud);
  color: var(--goud);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease, letter-spacing .25s ease;
}
.tekstlink:hover { color: var(--goud-licht); letter-spacing: .07em; }
.vak--licht .tekstlink { color: var(--goud-diep); border-color: var(--goud-diep); }
.vak--licht .tekstlink:hover { color: var(--inkt); border-color: var(--inkt); }

/* =========================================================================
   KOPBALK
   ========================================================================= */

.balk {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}

.balk.is-vast {
  background: rgba(10, 18, 28, .94);
  box-shadow: 0 1px 0 rgba(216, 167, 74, .22);
}

.balk__binnen {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: .9rem var(--kantlijn);
}

.merk {
  flex: 0 0 auto;
  display: block;
  line-height: 0;
  text-decoration: none;
}

/* het logo staat altijd in zijn geheel in beeld */
.merk__logo {
  display: block;
  width: auto;
  height: clamp(30px, 3.2vw, 40px);
  object-fit: contain;
}

.hoofdnav { margin-left: auto; }

.hoofdnav__lijst {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 1.9vw, 1.8rem);
}

.hoofdnav__lijst a {
  position: relative;
  display: block;
  padding: .35rem 0;
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--licht);
  text-decoration: none;
  transition: color .25s ease;
}

.hoofdnav__lijst a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--goud);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s ease;
}
.hoofdnav__lijst a:hover { color: var(--goud-licht); }
.hoofdnav__lijst a:hover::after { transform: scaleX(1); }

.balk__bel { flex: 0 0 auto; padding: .62rem 1.1rem; font-size: .88rem; }

.menuknop {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .5rem .2rem;
  border: 0;
  background: none;
  color: var(--licht);
  font-family: var(--tekst);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.menuknop__streep {
  position: relative;
  display: block;
  width: 24px;
  height: 1px;
  background: currentColor;
}
.menuknop__streep::before,
.menuknop__streep::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: transform .3s ease;
}
.menuknop__streep::before { top: -7px; }
.menuknop__streep::after { top: 7px; }

.menuknop[aria-expanded="true"] .menuknop__streep { background: transparent; }
.menuknop[aria-expanded="true"] .menuknop__streep::before { transform: translateY(7px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop__streep::after { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================================
   DE OPENING: kop, knoppen, slotregel, wenk
   ========================================================================= */

/* Op een smal scherm snijdt de hero verticaal uit een breedbeeld; iets naar
   rechts houdt de verlichte gevels en de rug erachter in beeld. */
.opening__foto { object-position: 56% 50%; }

/* het letterraam: de kopletter, zo vet als die gaat, met een lage optische
   maat zodat de schreven dik blijven en er veel foto doorheen komt */
.opening__raam [data-raam] {
  font-family: var(--kop);
  font-weight: 700;
  letter-spacing: .01em;
}

.opening__kop {
  padding-bottom: clamp(3.5rem, 8svh, 6rem);
  background: linear-gradient(180deg, rgba(10, 18, 28, 0) 0%, rgba(10, 18, 28, .62) 28%, rgba(10, 18, 28, .9) 58%, rgba(10, 18, 28, .97) 100%);
}

.opening__kop-binnen {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kantlijn);
  padding-top: clamp(3rem, 9svh, 6rem);
}

.opening__titel {
  max-width: 17ch;
  margin: 0 0 1rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.1rem + 5.3vw, 4.9rem);
  line-height: 1.06;
  letter-spacing: -.012em;
  color: #fff;
  text-wrap: balance;
}

.opening__zin-vast {
  max-width: 48ch;
  margin: 0 0 1.9rem;
  font-size: clamp(1.02rem, .97rem + .3vw, 1.2rem);
  color: #DCE4EC;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 0;
}

.opening__slot {
  padding: 0 0 clamp(3.5rem, 8svh, 6rem);
}

.opening__slotregel {
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kantlijn);
  font-family: var(--kop);
  font-weight: 400;
  font-size: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  line-height: 1.15;
  color: #fff;
}

.opening__wenk {
  align-items: center;
  gap: .6rem;
  flex-direction: column;
  color: rgba(255, 255, 255, .8);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.opening__wenk-lijn {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--goud));
}

/* =========================================================================
   THE RESORT
   ========================================================================= */

.resort { padding-top: clamp(3.5rem, 6vw, 5.5rem); }

.resort__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}

.resort__tekst p { max-width: 62ch; }

.afstanden {
  display: grid;
  gap: 1.35rem;
  padding-left: clamp(1.2rem, 2.5vw, 2rem);
  border-left: 1px solid var(--lijn-licht);
}

.afstanden li { display: flex; align-items: baseline; gap: 1rem; }

.afstanden__getal {
  flex: 0 0 auto;
  min-width: 2.6ch;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.3rem + 2.2vw, 3.1rem);
  line-height: .95;
  color: var(--goud);
  font-variant-numeric: lining-nums;
}

.afstanden__label {
  font-size: .9rem;
  line-height: 1.4;
  color: var(--licht-2);
}

/* =========================================================================
   THREE WAYS TO STAY
   ========================================================================= */

.stay { padding-bottom: clamp(6rem, 11vw, 9.5rem); }

/* De kop staat naast het beeld in plaats van erboven: drie kolommen tekst op
   een vlakke kleur was het meest document-achtige moment van de pagina. */
.stay__boven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: end;
  margin-bottom: clamp(2.4rem, 4.5vw, 3.6rem);
}

.stay__boven .vak__kop { max-width: none; margin-bottom: 0; }

.stay__beeld { position: relative; margin: 0; }

.stay__beeld img {
  display: block;
  width: 100%;
  height: clamp(220px, 29vw, 380px);
  object-fit: cover;
  object-position: 50% 44%;
}

.stay__beeld figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--goud);
}

.wegen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--lijn-licht);
}

.weg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  padding: clamp(1.8rem, 3vw, 2.6rem) clamp(1.2rem, 2.4vw, 2.2rem);
  border-right: 1px solid var(--lijn-licht);
  transition: background-color .35s ease;
}
.weg:first-child { padding-left: 0; }
.weg:last-child { border-right: 0; padding-right: 0; }
.weg:hover { background: rgba(216, 167, 74, .05); }

/* het middelste paneel staat hoger en is iets lichter: de rij is geen rij
   gelijke kaartjes */
.weg--twee {
  margin-top: clamp(-3.2rem, -3vw, -1.6rem);
  padding-top: clamp(2.4rem, 4vw, 3.4rem);
  background: linear-gradient(180deg, rgba(216, 167, 74, .11), rgba(216, 167, 74, 0) 70%);
}
.weg--drie { margin-top: clamp(1rem, 2.4vw, 2.4rem); }

.weg__nr {
  margin: 0;
  font-family: var(--kop);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .1em;
  color: var(--goud);
}

.weg__titel {
  margin: 0;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem);
  line-height: 1.15;
  color: var(--licht);
}

.weg__tekst { margin: .3rem 0 .4rem; font-size: .97rem; }

.merkjes {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .9rem;
}

.merkjes li {
  padding: .3rem .72rem;
  border: 1px solid var(--lijn-licht);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--licht-2);
}

.weg .tekstlink { margin-top: auto; }

/* =========================================================================
   ACCOMMODATIONS  (de kam klimt uit de sneeuw de nacht in)
   ========================================================================= */

.condos::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: clamp(54px, 7vw, 108px);
  background: var(--sneeuw);
  transform: translateY(-100%);
  clip-path: polygon(0 100%, 0 52%, 11% 70%, 21% 34%, 33% 58%, 44% 16%, 55% 50%, 66% 24%, 78% 60%, 89% 38%, 100% 62%, 100% 100%);
}

.condos__kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: end;
  /* De breedbeeldband hieronder brengt zijn eigen bovenmarge mee; stapelen we
     daar een volle sectiemarge op, dan valt er een gat van acht regels. */
  margin-bottom: clamp(.4rem, 1vw, 1rem);
}

.condos__kop-tekst .lead { max-width: 54ch; }

.indexfoto { margin: 0; }

.indexfoto img {
  display: block;
  width: 100%;
  filter: contrast(1.04) saturate(1.02);
}

.indexfoto figcaption {
  margin-top: .6rem;
  font-size: .76rem;
  line-height: 1.45;
  letter-spacing: .03em;
  color: var(--inkt-zacht);
}

.indexfoto--kop {
  flex: 0 0 auto;
  width: 290px;
  max-width: 100%;
  padding: .65rem .65rem .95rem;
  background: #fff;
  box-shadow: 0 14px 34px rgba(20, 28, 37, .14);
}

/* Zeven plattegronden onder elkaar leest als een document. In twee kolommen
   leest hetzelfde als een specificatieblad: de maat voorop, de omschrijving
   ernaast, en de hele reeks past in één blik. */
.plattegronden {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.8rem, 4vw, 3.4rem);
  border-top: 1px solid var(--lijn-donker);
}

.plan {
  display: grid;
  grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr);
  gap: .2rem clamp(.9rem, 1.8vw, 1.5rem);
  align-items: start;
  padding: clamp(1.2rem, 2.2vw, 1.75rem) 0;
  border-bottom: 1px solid var(--lijn-donker);
  transition: background-color .3s ease;
}
/* de laatste rij heeft maar één plattegrond: die loopt door over de breedte */
.plan:last-child { grid-column: 1 / -1; grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr) minmax(0, 1.5fr); }
.plan:last-child .plan__tekst { grid-column: auto; margin-top: 0; }
.plan:hover { background: rgba(216, 167, 74, .07); }

.plan__maat {
  margin: 0;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 1.8vw, 2.6rem);
  line-height: .95;
  letter-spacing: -.01em;
  color: var(--goud-diep);
  font-variant-numeric: lining-nums;
}

.plan__titel {
  margin: 0 0 .5rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem);
  line-height: 1.2;
  color: var(--inkt);
}

.plan__feiten {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .9rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--inkt-zacht);
}
.plan__feiten li { position: relative; }
.plan__feiten li + li::before {
  content: '';
  position: absolute;
  left: -.5rem;
  top: .55em;
  width: 3px;
  height: 3px;
  background: var(--goud-diep);
}

.plan__tekst {
  grid-column: 2;
  margin: .55rem 0 0;
  font-size: .89rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
}

.voetnoot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: clamp(1.8rem, 3.5vw, 2.8rem);
  padding: clamp(1.3rem, 2.6vw, 2rem);
  background: var(--sneeuw-2);
  border-left: 3px solid var(--goud);
}

.voetnoot__tekst { font-size: .92rem; color: var(--inkt-zacht); }

.voetnoot__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  align-content: flex-start;
}

.voetnoot__lijst li {
  padding: .28rem .7rem;
  background: #fff;
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--inkt);
}

/* Het hoofdstuk met de plattegronden sluit met een vraag en de telefoon in
   plaats van met een voetnoot: wie zeven maten heeft doorgelezen, is precies
   dan toe aan iemand die zegt welke bij hem past. */
.voetnoot__actie {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: .3rem;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid rgba(20, 28, 37, .18);
}

.voetnoot__vraag {
  margin: 0;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.05rem, .98rem + .35vw, 1.3rem);
  line-height: 1.25;
  color: var(--inkt);
}

/* =========================================================================
   RESORT FEATURES
   ========================================================================= */

.features {
  padding-top: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(6rem, 11vw, 9.5rem);
}

.vak__kop--donker .lead { color: var(--inkt-zacht); }

/* de donkere band midden in de sneeuw: een bewust reset-moment */
.band {
  display: grid;
  grid-template-columns: minmax(0, 650px) minmax(0, 1fr);
  gap: 0;
  margin-bottom: clamp(2.6rem, 5vw, 4.2rem);
  background: var(--nacht-2);
}

/* de tweede band spiegelt, zodat het geen rij gelijke blokken wordt */
.band--om {
  grid-template-columns: minmax(0, 1fr) minmax(0, 650px);
  background: var(--nacht);
}
.band--om .band__beeld { order: 2; }
.band--om .band__tekst { order: 1; }

.band__beeld { margin: 0; min-height: clamp(230px, 28vw, 380px); }
.band__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }

.band__tekst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.8rem, 4vw, 3.2rem);
  color: var(--licht-2);
}

.band__titel {
  margin: 0 0 .8rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1.15;
  color: var(--licht);
}

.band__tekst p { font-size: .95rem; }

.voorzieningen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  border-top: 1px solid var(--lijn-donker);
}

.voorziening { break-inside: avoid; }

.voorziening__titel {
  margin: 0 0 .55rem;
  padding-top: .9rem;
  border-top: 2px solid var(--goud);
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--inkt);
}

.voorziening p { font-size: .9rem; color: var(--inkt-zacht); }

/* Zelfde praktijkvel als de voetnoot onder de plattegronden: wat je moet
   regelen staat op het warme grijs, wat je moet voelen staat op de foto's.
   Zonder dat eigen vlak was dit het derde stuk kleine tekst op dezelfde
   crème achter elkaar. */
.partners {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: clamp(1.4rem, 3.5vw, 3rem);
  margin-top: clamp(2.4rem, 5vw, 3.8rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.3rem, 2.8vw, 2.1rem);
  background: var(--sneeuw-2);
  border-left: 3px solid var(--goud);
}

.partners__titel {
  margin: 0 0 .9rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  color: var(--inkt);
}

.partners__inleiding { font-size: .92rem; color: var(--inkt-zacht); }

/* De gouden streep boven de naam in plaats van gouden letters: dat rijmt op
   de kop van een voorziening hierboven, en houdt het contrast hoog genoeg op
   het donkerdere vel. */
.partners__lijst dt {
  margin-top: 1.15rem;
  padding-top: .5rem;
  border-top: 1px solid var(--goud);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--inkt);
}
.partners__lijst dt:first-of-type { margin-top: .5rem; }

.partners__lijst dd {
  margin: .3rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--inkt-zacht);
}

/* =========================================================================
   BRECKENRIDGE  (de nacht klimt terug uit de sneeuw omhoog)
   ========================================================================= */

.breck { padding-top: clamp(4.5rem, 8vw, 7rem); }

.breck::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 1px;
  height: clamp(54px, 7vw, 108px);
  background: var(--nacht);
  transform: translateY(-100%);
  clip-path: polygon(0 100%, 0 44%, 10% 64%, 23% 22%, 31% 52%, 46% 10%, 58% 46%, 70% 18%, 81% 54%, 92% 30%, 100% 56%, 100% 100%);
}

.breck .kam--boven { top: auto; bottom: 0; opacity: .22; }

.breck__boven {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 650px);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: end;
  /* idem: de zomerband eronder zet zelf al ruimte */
  margin-bottom: clamp(.4rem, 1vw, 1rem);
}

.breck__tekst .lead { max-width: 58ch; }

.redenen {
  display: grid;
  gap: .7rem;
  margin-top: 1.6rem;
}

.redenen li {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  color: var(--licht-2);
}

.redenen li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  background: var(--goud);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

.breck__hoofdbeeld { margin: 0; }

.breck__hoofdbeeld img {
  display: block;
  width: 100%;
}

.breck__hoofdbeeld figcaption {
  margin-top: .7rem;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--goud);
}

/* contactvel: de kleine bronfoto's als index-afdrukken. Vier vaste kolommen,
   want met wrappende flex-items viel de vierde als wees op een eigen regel, en
   met vier eigen hoogtes stond er geen enkel bijschrift op dezelfde lijn. */
.contactvel {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 1.9rem);
  padding-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--lijn-licht);
}

.contactvel .indexfoto { overflow: hidden; }

.contactvel .indexfoto img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 45%;
  filter: saturate(.9) contrast(1.04);
  transition: transform .5s ease, filter .5s ease;
}

.contactvel .indexfoto:hover img { transform: scale(1.03); filter: saturate(1.05) contrast(1.04); }

.contactvel .indexfoto figcaption {
  color: var(--licht-2);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .68rem;
}

/* =========================================================================
   OWNERSHIP
   ========================================================================= */

/* De ochtendband is het eerste wat van dit hoofdstuk in beeld komt: hij loopt
   van rand tot rand en vervangt de bovenruimte van de sectie. */
.own { padding-top: 0; }
.own > .breedbeeld:first-child { margin-top: 0; }

.own__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap: clamp(1.6rem, 3.5vw, 3rem);
}

/* De twee panelen zijn even hoog, maar het linker had vijf regels minder: dat
   gaf een half lege doos naast een volle. Als kolom met het slot onderaan
   vullen ze allebei tot de rand en staan de twee knoppen op dezelfde lijn. */
.paneel {
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid var(--lijn-licht);
  background: rgba(10, 18, 28, .42);
}

.paneel .vinkjes { margin-bottom: 1.4rem; }

.paneel--eigendom { background: rgba(10, 18, 28, .72); }

.paneel__titel {
  margin: 0 0 .8rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem);
  line-height: 1.15;
  color: var(--licht);
}

.paneel__lead { font-size: .97rem; }

.vinkjes { display: grid; gap: .72rem; margin-top: 1.1rem; }

.vinkjes li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--licht-2);
}

.icoon--vink {
  margin-top: .32em;
  width: 1em;
  height: 1em;
  fill: none;
  stroke: var(--goud);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.paneel__slot {
  margin-top: auto;
  padding-top: 1.1rem;
  border-top: 1px solid var(--lijn-licht);
  font-size: .93rem;
}

.paneel__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 1rem 0 0;
}

.vacatia {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.2rem, 3vw, 2.6rem);
  margin-top: clamp(2.2rem, 4.5vw, 3.6rem);
  padding-top: clamp(1.6rem, 3vw, 2.2rem);
  border-top: 1px solid var(--lijn-licht);
}

.vacatia__titel {
  margin: 0;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.2;
  color: var(--goud);
}

.vacatia__lijst {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: .9rem 1.8rem;
}

.vacatia__lijst li {
  padding-left: 1.1rem;
  border-left: 1px solid var(--lijn-licht);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--licht-2);
}

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact {
  overflow: hidden;
  background: var(--nacht-diep);
  padding-block: clamp(5rem, 9vw, 8rem);
}

.contact__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 54%;
  opacity: .3;
  filter: grayscale(.5) contrast(1.05);
}

.contact__waas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 19, .92) 0%, rgba(6, 12, 19, .74) 45%, rgba(6, 12, 19, .95) 100%),
    linear-gradient(90deg, rgba(216, 167, 74, .16), rgba(216, 167, 74, 0) 60%);
}

.contact__binnen {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.contact__tekst .lead { max-width: 46ch; }

.contact__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.8rem 0 0;
}

.kaartje {
  padding: clamp(1.4rem, 2.6vw, 2rem);
  border: 1px solid var(--lijn-licht);
  background: rgba(10, 18, 28, .66);
}

.kaartje__titel {
  margin: 0 0 .7rem;
  font-family: var(--kop);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--licht);
}

.kaartje__adres {
  margin: 0 0 1rem;
  font-size: .95rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--licht-2);
}

.sociaal {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--lijn-licht);
}

.sociaal a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .85rem;
  border: 1px solid var(--lijn-licht);
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--licht-2);
  text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
}
.sociaal a:hover { color: var(--goud-licht); border-color: var(--goud); }

/* =========================================================================
   VOET
   ========================================================================= */

.voet {
  padding-top: clamp(3rem, 6vw, 4.5rem);
  padding-bottom: 2rem;
  background: var(--nacht-diep);
  border-top: 1px solid var(--lijn-licht);
}

.voet__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
}

.voet__logo {
  display: block;
  width: auto;
  height: 54px;
  object-fit: contain;
  margin-bottom: 1rem;
}

.voet__regel {
  max-width: 24ch;
  margin: 0;
  font-family: var(--kop);
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--licht-2);
}

.voet__nav ul { display: grid; gap: .5rem; }

.voet__nav a,
.voet__contact a {
  font-size: .91rem;
  color: var(--licht-2);
  text-decoration: none;
  transition: color .25s ease;
}
.voet__nav a:hover,
.voet__contact a:hover { color: var(--goud-licht); }

.voet__label {
  margin-bottom: .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--goud);
}

.voet__contact p { margin-bottom: .35rem; }

.voet__contact address {
  margin-top: .6rem;
  font-size: .91rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--licht-2);
}

.voet__onder { padding-top: 1.4rem; border-top: 1px solid rgba(216, 167, 74, .18); }

.voet__klein {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .04em;
  color: #8EA0B0;
}

/* =========================================================================
   404: iemand die de link overtypt en zich vergist, komt hier terecht
   ========================================================================= */

.verdwaald {
  position: relative;
  display: flex;
  min-height: 100svh;
  background: var(--nacht-diep);
}

.verdwaald__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  opacity: .34;
  filter: grayscale(.4) contrast(1.04);
}

.verdwaald__waas {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 12, 19, .9) 0%, rgba(6, 12, 19, .7) 45%, rgba(6, 12, 19, .96) 100%),
    linear-gradient(90deg, rgba(6, 12, 19, .82), rgba(6, 12, 19, .2) 70%);
}

.verdwaald__binnen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: clamp(3rem, 8vw, 6rem) var(--kantlijn);
}

.verdwaald__merk { display: block; margin-bottom: clamp(2rem, 5vw, 3.4rem); line-height: 0; }
.verdwaald__merk img { display: block; width: auto; height: 46px; object-fit: contain; }

.verdwaald .lead { max-width: 52ch; }

.verdwaald__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 1.8rem 0 0;
}

.verdwaald__nav {
  width: 100%;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  padding-top: clamp(1.2rem, 2.5vw, 1.8rem);
  border-top: 1px solid var(--lijn-licht);
}

.verdwaald__nav ul { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }

.verdwaald__nav a {
  font-size: .89rem;
  letter-spacing: .04em;
  color: var(--licht-2);
  text-decoration: none;
  transition: color .25s ease;
}
.verdwaald__nav a:hover { color: var(--goud-licht); }

@media (max-width: 560px) {
  .verdwaald__knoppen .knop { width: 100%; justify-content: center; }
}

/* =========================================================================
   BEWEGING: korte onthullingen, geen scroll-scrub buiten de opening
   ========================================================================= */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22, .8, .3, 1), transform .7s cubic-bezier(.22, .8, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================================
   SMALLERE SCHERMEN
   ========================================================================= */

@media (max-width: 1080px) {
  .resort__raster { grid-template-columns: 1fr; }
  .stay__boven { grid-template-columns: 1fr; align-items: start; }
  .contactvel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .afstanden {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    padding-left: 0;
    padding-top: 1.6rem;
    border-left: 0;
    border-top: 1px solid var(--lijn-licht);
  }
  .breck__boven { grid-template-columns: 1fr; align-items: start; }
  .band, .band--om { grid-template-columns: 1fr; }
  .band--om .band__beeld { order: 0; }
  .band--om .band__tekst { order: 0; }
  .contact__binnen { grid-template-columns: 1fr; }
  .vacatia { grid-template-columns: 1fr; }

  .plattegronden { grid-template-columns: 1fr; }
  .plan,
  .plan:last-child { grid-template-columns: minmax(0, 6rem) minmax(0, 1fr) minmax(0, 1.4fr); }
  .plan__tekst,
  .plan:last-child .plan__tekst { grid-column: auto; margin-top: 0; }
}

@media (max-width: 900px) {
  .hoofdnav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin-left: 0;
    padding: 0 var(--kantlijn);
    background: rgba(10, 18, 28, .98);
    border-top: 1px solid var(--lijn-licht);
    display: none;
  }
  .hoofdnav.is-open { display: block; }
  .hoofdnav__lijst { flex-direction: column; align-items: stretch; gap: 0; padding: .6rem 0 1.2rem; }
  .hoofdnav__lijst a { padding: .75rem 0; font-size: 1rem; border-bottom: 1px solid rgba(216, 167, 74, .14); }
  .hoofdnav__lijst a::after { display: none; }
  .menuknop { display: inline-flex; }
  .balk__bel { order: 3; margin-left: auto; }
  .menuknop { order: 4; margin-left: 0; }
  .balk.is-menu-open { background: rgba(10, 18, 28, .98); }

  .wegen { grid-template-columns: 1fr; border-top: 0; }
  .weg {
    border-right: 0;
    border-top: 1px solid var(--lijn-licht);
    margin-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .weg--twee { padding-top: clamp(1.8rem, 3vw, 2.6rem); }
  .weg--drie { margin-top: 0; }

  .condos__kop { grid-template-columns: 1fr; align-items: start; }
  .plan,
  .plan:last-child { grid-template-columns: minmax(0, 5.5rem) minmax(0, 1fr); }
  .plan__tekst,
  .plan:last-child .plan__tekst { grid-column: 1 / -1; margin-top: .4rem; }
  .voetnoot { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .voet__binnen { grid-template-columns: 1fr; }
  /* ruimte onder de knoppen, zodat de scrollwenk er niet overheen valt */
  .opening__kop { padding-bottom: 5.75rem; }
  .opening__slot { padding-bottom: 5.75rem; }
}

@media (max-width: 560px) {
  .balk__bel span { display: none; }
  .balk__bel { padding: .6rem .75rem; }
  .afstanden { grid-template-columns: 1fr; }
  .plan,
  .plan:last-child { grid-template-columns: 1fr; gap: .5rem; }
  .plan__maat { font-size: 2rem; }
  .opening__knoppen .knop,
  .contact__knoppen .knop,
  .paneel__knoppen .knop,
  .voetnoot__actie .knop { width: 100%; justify-content: center; }
  .voetnoot__actie { gap: .9rem; }
}

/* =========================================================================
   MINDER BEWEGING
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  .contactvel .indexfoto:hover img { transform: none; }
}