/* ------------------------------------------------------------------
   Reis Spanje — Lisanne & Mathijs
   Kleuren komen uit de film zelf: gebleekt papier, karmijn van het
   vuurwerk en de tram, olijfgroen van de heuvels, blauw van de zee.
   ------------------------------------------------------------------ */

:root{
  --paper:      #EDE7DA;
  --paper-hi:   #FBF8F1;
  --paper-deep: #E2D9C7;
  --ink:        #23201C;
  --ink-2:      #5C564B;
  --carmine:    #A6414A;
  --sea:        #8FA6BC;
  --hill:       #5E6A55;
  --rule:       rgba(35,32,28,.22);

  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body:    "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad: clamp(20px, 5vw, 52px);
  --max: 1140px;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.5;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

::selection{ background:var(--carmine); color:var(--paper-hi); }

a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--carmine); }

img{ max-width:100%; }

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

/* papierkorrel over de achtergrond, niet over de beelden */
.grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.topbar,main,.foot{ position:relative; z-index:1; }

/* ---------------- kop ---------------- */

.topbar{
  display:flex; justify-content:space-between; align-items:baseline; gap:16px;
  max-width:var(--max); margin:0 auto; padding:22px var(--pad) 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
}
.topbar p{ margin:0; }
.topbar__right a{ text-decoration-color:var(--rule); }

/* ---------------- hero ---------------- */

.hero{
  max-width:var(--max); margin:0 auto; padding:clamp(28px,6vw,68px) var(--pad) clamp(24px,4vw,44px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(190px,240px);
  gap:clamp(20px,4vw,56px); align-items:end;
}

.hero__title{ margin:0; }

.hero__word{ display:block; font-family:var(--display); }

.hero__word--sm{
  font-size:clamp(1.6rem,3.8vw,2.9rem);
  font-style:italic; font-weight:400;
  font-variation-settings:"opsz" 40,"SOFT" 70,"WONK" 1;
  color:var(--ink);
  margin-left:.14em;
  line-height:1;
}

.hero__word--lg{
  font-size:clamp(3.9rem,15.5vw,10.5rem);
  font-weight:500;
  font-variation-settings:"opsz" 144,"SOFT" 25,"WONK" 1;
  color:var(--carmine);
  line-height:.82;
  letter-spacing:-.028em;
  margin-top:.02em;
}

.hero__side{ padding-bottom:.5rem; }

.hero__names{
  margin:0 0 18px;
  font-size:1.06rem; letter-spacing:.01em; line-height:1.3;
}
.hero__names .amp{
  font-family:var(--display); font-style:italic; color:var(--carmine);
  font-variation-settings:"opsz" 40,"SOFT" 80,"WONK" 1;
  font-size:1.15em; padding:0 .06em;
}

.facts{ margin:0; padding-top:14px; border-top:1px solid var(--rule); }
.facts dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:2px;
}
.facts dd{ margin:0 0 12px; font-size:.94rem; line-height:1.35; }
.facts dd:last-child{ margin-bottom:0; }

/* ---------------- de film ---------------- */

.film{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }

.frame{
  position:relative;
  background:var(--paper-hi);
  padding:12px;
  border:1px solid rgba(35,32,28,.16);
  box-shadow:0 26px 50px -34px rgba(58,44,30,.75);
}

.frame video{
  display:block; width:100%; height:auto; aspect-ratio:4/3;
  background:#1a1815;
}

.start{
  position:absolute; inset:12px;
  display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px;
  border:0; padding:0; cursor:pointer;
  background:linear-gradient(to bottom, rgba(30,26,22,.14), rgba(30,26,22,.34));
  color:var(--paper-hi);
}
/* De knop verschijnt alleen als app.js draait. Doet het script het niet,
   dan staat er gewoon een speler met de knoppen van de browser zelf. */
.frame.has-js:not(.is-playing) .start{ display:flex; }

.frame__error{
  display:none; position:absolute; inset:12px;
  align-items:center; justify-content:center; text-align:center;
  margin:0; padding:24px;
  background:var(--paper); color:var(--ink-2);
  font-size:.9rem; line-height:1.5;
}
.frame__error code{ font-family:var(--mono); font-size:.9em; color:var(--ink); }
.frame.has-error .frame__error{ display:flex; }

.start__disc{
  width:74px; height:74px; border-radius:50%;
  background:var(--carmine);
  display:grid; place-items:center;
  box-shadow:0 10px 30px -10px rgba(30,26,22,.8);
  transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.start__disc::after{
  content:""; width:0; height:0;
  border-left:19px solid var(--paper-hi);
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:5px;
}
.start:hover .start__disc,
.start:focus-visible .start__disc{ transform:scale(1.06); }

.start__label{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase;
  text-shadow:0 1px 10px rgba(30,26,22,.5);
}
.start__time{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  opacity:.8; margin-top:-8px;
  text-shadow:0 1px 10px rgba(30,26,22,.5);
}

.route-map{
  margin:clamp(26px,4.5vw,48px) auto 0;
  max-width:600px; padding:0;
}
.route-map img{ display:block; width:100%; height:auto; }

/* ---------------- voet ---------------- */

.foot{
  max-width:var(--max); margin:clamp(48px,8vw,96px) auto 0;
  padding:0 var(--pad) 44px;
}
.foot__inner{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px 20px;
  padding-top:18px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-2);
}
.foot p{ margin:0; }

/* ---------------- kleiner scherm ---------------- */

@media (max-width: 900px){
  .hero{ grid-template-columns:1fr; align-items:start; gap:26px; }
  .hero__side{ padding-bottom:0; }
  .facts{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 16px; }
  .facts dt{ grid-row:1; }
  .facts dd{ grid-row:2; margin-bottom:0; }
}

@media (max-width: 760px){
  .start__disc{ width:62px; height:62px; }
  .start__disc::after{ border-left-width:16px; border-top-width:10px; border-bottom-width:10px; }
}

@media (max-width: 460px){
  .facts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 16px; }
  .facts dt:nth-of-type(3){ grid-row:3; }
  .facts dd:nth-of-type(3){ grid-row:4; }
}

/* ---------------- beweging ---------------- */

@keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }

.hero__word--sm{ animation:rise .7s .04s both cubic-bezier(.2,.7,.2,1); }
.hero__word--lg{ animation:rise .8s .12s both cubic-bezier(.2,.7,.2,1); }
.hero__side{ animation:rise .8s .26s both cubic-bezier(.2,.7,.2,1); }
.film{ animation:rise .9s .34s both cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}