/* ══════════════════════════════════════════════════════════════
   ALSIKMAARDOORDEBOCHT.COM — landing v5
   Editorial luxe, in lijn met de Alpentoer-brochure:
   warm goud op diep bruinzwart, Fraunces serif, één
   georkestreerde hero-intro en rustige scroll-reveals.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#121008;
  --bg-deep:#0c0b06;
  --card:#1b1810;
  --ivory:#f2ecdf;
  --ivory-dim:rgba(242,236,223,.86);
  --gold:#c9a56a;
  --gold-bright:#dfc286;
  --muted:#a59c8a;
  --line:rgba(201,165,106,.34);
  --line-soft:rgba(201,165,106,.18);
  --max:1240px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo",Arial,Helvetica,sans-serif;
  --ease:cubic-bezier(.19,.6,.22,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{
  margin:0;
  background:var(--bg);
  color:var(--ivory);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:#161207}

a:focus-visible{
  outline:2px solid var(--gold-bright);
  outline-offset:4px;
}

/* ---------- Typografie ---------- */

.kicker{
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.32em;
  line-height:1.5;
  text-transform:uppercase;
}
.kicker--gold{color:var(--gold)}
.kicker--light{color:var(--gold-bright)}

h1,h2,h3,blockquote{
  font-family:var(--serif);
  font-weight:340;
  font-variation-settings:"opsz" 110;
}

h1 em,h2 em,h3 em{
  font-style:italic;
  font-weight:340;
  color:var(--gold-bright);
}

/* ---------- Wordmark ---------- */

.wordmark{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
}
.wordmark__pre{
  margin:0 0 7px 2px;
  color:var(--gold-bright);
  font-size:10px;
  font-weight:600;
  letter-spacing:.4em;
  text-transform:uppercase;
}
.wordmark__main{
  font-family:var(--serif);
  font-size:26px;
  font-weight:400;
  letter-spacing:.01em;
  white-space:nowrap;
}
.wordmark__dot{
  margin-left:7px;
  color:var(--gold-bright);
  font-family:var(--sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  vertical-align:2px;
}

/* ---------- Hero ---------- */

.hero{
  position:relative;
  height:clamp(680px,100svh,900px);
  overflow:hidden;
  background:#161510;
}
.hero__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* Portret-foto in een brede hero: op desktop is maar een horizontale
     strook zichtbaar. 66% legt die strook op rotswand + dorp + brug + Durance. */
  object-position:center 72%;
  filter:saturate(.94) contrast(1.03);
}
.motion .hero__image{
  animation:heroDrift 14s var(--ease) both;
}
@keyframes heroDrift{
  from{transform:scale(1.06)}
  to{transform:scale(1)}
}
.hero__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      rgba(10,9,5,.90) 0%,
      rgba(10,9,5,.76) 22%,
      rgba(10,9,5,.50) 40%,
      rgba(10,9,5,.20) 60%,
      rgba(10,9,5,.06) 80%,
      rgba(10,9,5,.12) 100%),
    linear-gradient(180deg,
      rgba(10,9,5,.38) 0%,
      rgba(10,9,5,.04) 30%,
      rgba(10,9,5,.10) 62%,
      rgba(10,9,5,.52) 100%);
}

.nav{
  position:absolute;
  z-index:3;
  top:36px;
  left:max(38px,5vw);
  right:max(38px,5vw);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.nav__link{
  margin-top:9px;
  padding:0 0 8px;
  border-bottom:1px solid rgba(223,194,134,.72);
  font-size:11px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
  transition:color .35s var(--ease),border-color .35s var(--ease);
}
.nav__link:hover{
  color:var(--gold-bright);
  border-color:var(--gold-bright);
}

.hero__copy{
  position:absolute;
  z-index:3;
  left:max(48px,8vw);
  top:46%;
  transform:translateY(-50%);
  width:min(680px,calc(100% - 96px));
}
.hero__copy .kicker{
  margin-bottom:26px;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.hero h1{
  margin:0;
  font-size:clamp(64px,8.6vw,126px);
  line-height:.88;
  letter-spacing:-.03em;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero h1 span,
.hero h1 em{display:block}
.hero__intro{
  max-width:520px;
  margin:30px 0 0;
  color:var(--ivory-dim);
  font-family:var(--serif);
  font-size:18px;
  font-style:italic;
  font-weight:340;
  line-height:1.65;
  text-shadow:0 1px 14px rgba(0,0,0,.4);
}

/* De haarspeldbocht — het signatuur van de site */
.hero__bend{
  width:190px;
  margin-top:34px;
  color:var(--gold-bright);
  overflow:visible;
}
.motion .bend-path{
  stroke-dasharray:340;
  stroke-dashoffset:340;
  animation:drawBend 1.6s var(--ease) 1s forwards;
}
.motion .bend-dot{
  opacity:0;
  animation:dotIn .5s var(--ease) 2.35s forwards;
}
@keyframes drawBend{to{stroke-dashoffset:0}}
@keyframes dotIn{to{opacity:1}}

.hero__facts{
  position:absolute;
  z-index:3;
  left:max(38px,5vw);
  right:max(38px,5vw);
  bottom:30px;
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:42px;
  align-items:end;
  padding-top:20px;
  border-top:1px solid rgba(223,194,134,.5);
}
.hero__facts>div{display:grid;gap:7px}
.hero__facts span{
  color:var(--gold-bright);
  font-size:10px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
}
.hero__facts strong{
  font-family:var(--serif);
  font-size:17px;
  font-style:italic;
  font-weight:340;
  text-shadow:0 1px 10px rgba(0,0,0,.35);
}
.hero__scroll{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:3px;
  white-space:nowrap;
  font-size:11px;
  font-weight:600;
  letter-spacing:.24em;
  text-transform:uppercase;
  transition:color .35s var(--ease);
}
.hero__scroll:hover{color:var(--gold-bright)}
.hero__scroll i{
  color:var(--gold-bright);
  font-family:var(--serif);
  font-size:17px;
  font-style:normal;
}
.motion .hero__scroll i{
  animation:nudge 2.6s ease-in-out 2.2s infinite;
}
@keyframes nudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(5px)}
}

/* Hero intro-choreografie */
.motion .rise{
  opacity:0;
  transform:translateY(26px);
  animation:riseIn 1s var(--ease) var(--d,0s) forwards;
}
@keyframes riseIn{
  to{opacity:1;transform:translateY(0)}
}

/* ---------- Collectie ---------- */

.collection{
  max-width:var(--max);
  margin:0 auto;
  padding:104px 38px 88px;
}
.collection__head{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:80px;
  align-items:end;
  margin-bottom:56px;
}
.collection__head h2{
  margin:14px 0 0;
  font-size:clamp(52px,5.4vw,84px);
  line-height:.92;
  letter-spacing:-.03em;
}
.collection__intro{
  max-width:420px;
  margin:0 0 9px auto;
  color:var(--muted);
  font-family:var(--serif);
  font-size:17px;
  font-weight:340;
  line-height:1.7;
}

.tour-grid{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:24px;
}
.tour{
  position:relative;
  min-height:530px;
  overflow:hidden;
  border:1px solid var(--line);
  transition:border-color .5s var(--ease);
}
.tour--photo{background:#23211a}
.tour--photo:hover{border-color:rgba(223,194,134,.65)}
.tour--photo>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  transition:transform 1s var(--ease);
}
.tour--photo:hover>img{transform:scale(1.03)}
.tour__veil{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(10,9,5,.20) 0%,rgba(10,9,5,.04) 32%,rgba(10,9,5,.84) 100%),
    linear-gradient(90deg,rgba(10,9,5,.28),transparent 55%);
}
.tour__top{
  position:absolute;
  z-index:2;
  top:26px;
  left:30px;
  right:30px;
  display:flex;
  justify-content:space-between;
  color:var(--gold-bright);
  font-size:10px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.tour__copy{
  position:absolute;
  z-index:2;
  left:32px;
  right:32px;
  bottom:52px;
}
.tour__copy>p{
  margin:0 0 12px;
  color:var(--gold-bright);
  font-size:10px;
  font-weight:600;
  letter-spacing:.28em;
  text-transform:uppercase;
}
.tour h3{
  margin:0;
  font-size:clamp(46px,4.8vw,72px);
  line-height:.88;
  letter-spacing:-.02em;
}
.tour__meta{
  display:flex;
  flex-wrap:wrap;
  margin-top:26px;
}
.tour__meta span{
  position:relative;
  padding-right:18px;
  margin-right:18px;
  color:rgba(242,236,223,.80);
  font-family:var(--serif);
  font-size:15px;
  font-style:italic;
  font-weight:340;
}
.tour__meta span:not(:last-child)::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:1px;
  height:12px;
  background:rgba(201,165,106,.5);
  transform:translateY(-50%);
}
.tour__open{
  position:absolute;
  z-index:2;
  left:32px;
  bottom:23px;
  display:flex;
  gap:11px;
  align-items:center;
  color:var(--gold-bright);
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.tour__open span{
  font-family:var(--serif);
  font-size:16px;
  transition:transform .5s var(--ease);
}
.tour--photo:hover .tour__open span{
  transform:translate(3px,-3px);
}
.tour__open--muted{color:rgba(223,194,134,.55)}

/* Volgende-editie kaart: de route die nog getekend wordt */
.tour--next{
  background:
    radial-gradient(circle at 80% 16%,rgba(122,88,50,.30),transparent 42%),
    linear-gradient(150deg,#231f16,#141209 72%);
}
.tour--next::after{
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid var(--line-soft);
  pointer-events:none;
}
.tour__road{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--gold);
  opacity:.22;
}
.motion .tour--next.visible .road-solid{
  stroke-dasharray:900;
  stroke-dashoffset:900;
  animation:drawBend 2.4s var(--ease) .3s forwards;
}

/* ---------- Statement ---------- */

.statement{
  max-width:var(--max);
  margin:0 auto;
  padding:40px 38px 116px;
  display:grid;
  grid-template-columns:170px 1fr;
  gap:36px;
  align-items:start;
  border-top:1px solid rgba(201,165,106,.24);
}
.statement blockquote{
  margin:0;
  color:#ded8cc;
  font-size:clamp(32px,4vw,58px);
  font-style:italic;
  line-height:1.1;
  letter-spacing:-.02em;
}

/* ---------- Scroll-reveals ---------- */

.motion .reveal{
  opacity:0;
  transform:translateY(30px);
  transition:opacity 1s var(--ease) var(--d,0s),
             transform 1s var(--ease) var(--d,0s);
}
.motion .reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ---------- Footer ---------- */

footer{
  padding:0 max(38px,5vw) 50px;
  background:var(--bg-deep);
}
.footer__rule{
  height:1px;
  background:rgba(201,165,106,.28);
  margin-bottom:44px;
}
.footer__row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
}
.wordmark--footer .wordmark__main{font-size:21px}
.footer__note{
  color:#7b756a;
  font-size:10px;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
}

/* ---------- Reduced motion ---------- */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,.reveal{opacity:1;transform:none;animation:none;transition:none}
  .hero__image,.hero__scroll i,.bend-path,.bend-dot,.road-solid{animation:none}
  .bend-path,.road-solid{stroke-dasharray:none;stroke-dashoffset:0}
  .bend-dot{opacity:1}
}

/* ---------- Responsive ---------- */

@media(max-width:850px){
  .hero{height:clamp(640px,100svh,760px)}
  .hero__image{object-position:center 62%}
  .hero__copy{
    left:32px;
    width:calc(100% - 64px);
  }
  .hero h1{font-size:clamp(58px,11vw,96px)}
  .hero__facts{
    left:32px;
    right:32px;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
  }
  .hero__scroll{display:none}
  .collection__head{
    grid-template-columns:1fr;
    gap:26px;
  }
  .collection__intro{margin-left:0}
  .tour-grid{grid-template-columns:1fr}
  .tour{min-height:500px}
  .statement{grid-template-columns:1fr;gap:22px}
}

@media(max-width:560px){
  .nav{left:22px;right:22px;top:24px}
  .wordmark__main{font-size:21px}
  .wordmark__dot{font-size:9px}
  .nav__link{display:none}
  .hero{height:clamp(600px,100svh,700px)}
  .hero__image{object-position:center 55%}
  .hero__copy{
    left:23px;
    width:calc(100% - 46px);
    top:44%;
  }
  .hero h1{font-size:clamp(50px,15vw,72px)}
  .hero__intro{font-size:16px}
  .hero__bend{width:150px;margin-top:26px}
  .hero__facts{
    left:23px;
    right:23px;
    grid-template-columns:1fr 1fr;
    gap:14px 22px;
  }
  .hero__facts>div:nth-child(2){display:none}
  .collection{padding:76px 22px 64px}
  .tour{min-height:460px}
  .tour__top{left:24px;right:24px}
  .tour__copy{left:24px;right:24px}
  .tour__open{left:24px}
  .statement{padding:30px 22px 78px}
  footer{padding-left:22px;padding-right:22px}
  .footer__row{
    flex-direction:column;
    align-items:flex-start;
    gap:26px;
  }
}