/* ============================================================
   Marathon des Sables — handboek site (v3)
   Slides are reconstructed as real HTML/CSS (text stays text,
   images keep their exact PowerPoint crop) instead of flattened
   images. Font sizes, positions and paddings are expressed in
   cqw (container query width units) so the whole slide scales
   fluidly with the viewport while preserving every proportion
   from the original deck.
   ============================================================ */

:root{
  --charcoal:   #17130f;
  --cream:      #fbf7ee;
  --nav-h: 72px;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:#0c0a08;
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:none; }

.skip-link{
  position:absolute; left:-999px; top:0;
  background:#c1613a; color:#fff; padding:10px 16px; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------------------------------- Nav ---------------------------------- */
.site-nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center;
  background:rgba(13,10,8,.5);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:background .25s ease;
}
.site-nav.is-scrolled{ background:rgba(10,8,6,.88); }
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:1400px; margin:0 auto; padding:0 24px;
}
.brand{
  font-family:var(--font-display);
  color:#fbf7ee;
  font-size:1.02rem;
  font-weight:600;
  display:flex; flex-direction:column; line-height:1.05;
}
.brand small{
  font-family:var(--font-body);
  font-size:.58rem;
  letter-spacing:.16em;
  font-weight:600;
  text-transform:uppercase;
  color:#c9a06f;
  margin-top:3px;
}

.nav-menu{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav-menu > li{ position:relative; }
.nav-link{
  display:flex; align-items:center; gap:6px;
  padding:11px 15px;
  color:#f1e9da;
  font-size:.88rem;
  font-weight:500;
  cursor:pointer;
  border-radius:3px;
}
.nav-menu > li > .nav-link:hover,
.nav-menu > li.is-open > .nav-link{ color:#fff; background:rgba(255,255,255,.08); }
.nav-link .caret{
  width:7px; height:7px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px; opacity:.75;
  transition:transform .15s ease;
}
.nav-menu > li.is-open .caret{ transform:rotate(225deg); margin-top:3px; }

.submenu{
  list-style:none; margin:0; padding:8px;
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,6px);
  min-width:230px;
  background:rgba(13,10,8,.97);
  border:1px solid rgba(255,255,255,.1);
  border-radius:8px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  opacity:0; visibility:hidden;
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
@media (hover:hover){
  .nav-menu > li:hover .submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
  .nav-menu > li:hover > .nav-link{ color:#fff; background:rgba(255,255,255,.08); }
}
.nav-menu > li.is-open .submenu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.submenu li a{
  display:block; padding:9px 13px; border-radius:5px;
  color:#e7ddc9; font-size:.85rem;
}
.submenu li a:hover{ background:rgba(255,255,255,.08); color:#fff; }

.nav-toggle{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:22px; height:2px; background:#fbf7ee;
  position:relative; transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before{ position:absolute; top:-7px; }
.nav-toggle span::after{ position:absolute; top:7px; }

@media (max-width:860px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:rgba(10,8,6,.98);
    padding:10px 18px 40px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .25s ease;
  }
  body.nav-open .nav-menu{ transform:translateX(0); }
  .nav-menu > li{ border-bottom:1px solid rgba(255,255,255,.08); }
  .nav-link{ padding:16px 6px; justify-content:space-between; font-size:1rem; }
  .submenu{
    position:static; transform:none; opacity:1; visibility:visible;
    max-height:0; overflow:hidden; border:0; box-shadow:none; background:transparent;
    padding:0; margin:0 0 0 6px;
    transition:max-height .22s ease;
  }
  .nav-menu > li.is-open .submenu{ max-height:600px; padding:4px 0 10px; }
  .nav-menu > li.is-open > .nav-link{ background:transparent; }
}

/* ---------------------------------- Slide stack ---------------------------------- */
/* Font sizes and paddings on the slide content use vw units so every slide
   scales fluidly and in lockstep with the full-bleed viewport width. */
.slide-stack{
  margin-top:var(--nav-h);
}
.slide{
  position:relative;
  width:100%;
  height:0;
  padding-top:56.2623%; /* 6858000 / 12192000, the deck's native 16:9 ratio */
  overflow:hidden;
  background:#fff;
}
.slide + .slide{ margin-top:0; }
.shp{ box-sizing:border-box; }
.shp p{ white-space:pre-wrap; word-wrap:break-word; }

/* ---------------------------------- Footer ---------------------------------- */
.site-footer{
  background:var(--charcoal); color:#cbbfa9;
  padding:52px 0 28px;
}
.site-footer .container{
  max-width:1400px; margin:0 auto; padding:0 24px;
  display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap;
}
.site-footer .brand{ color:#fbf7ee; }
.footer-links{ display:flex; gap:34px; flex-wrap:wrap; }
.footer-links div h5{
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:#a68f6a;
  margin:0 0 12px;
}
.footer-links ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-links a{ font-size:.86rem; color:#e7ddc9; }
.footer-links a:hover{ color:#fff; }
.footer-bottom{
  max-width:1400px; margin:40px auto 0; padding:20px 24px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:.78rem; color:#8a7a5f;
}