/* De Omweg, digitale editie.
   Eén scherm, geen scrollbalk. Navigeren gebeurt met de camera over het doek. */

@font-face{
  font-family:"Playfair Display";
  src:url("fonts/playfair.woff2") format("woff2-variations");
  font-weight:400 900;
  font-display:swap;
}

:root{
  --paper:#f5f1e6;
  --paper-2:#efe9d9;
  --ink:#17160f;
  --soft:#4b4739;
  --faint:#8a8471;
  --accent:#8c2b1f;
  --accent-licht:#d97b64;   /* het accent, maar dan leesbaar op inkt */
  --sea:#dcd8c8;
  --land:#e9e3d2;
  --line:rgba(23,22,15,.32);

  --display:"Playfair Display",Georgia,serif;
  --serif:Georgia,"Bitstream Charter","Times New Roman",serif;
  --cond:"Arial Narrow","Liberation Sans Narrow","Helvetica Neue",sans-serif;

  --fly:900ms cubic-bezier(.62,.02,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box;}

html,body{height:100%;overflow:hidden;}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* ---------------- doek en camera ---------------- */

#stage{
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(90,80,50,.03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 22% 12%, rgba(140,120,70,.09), transparent 60%),
    var(--paper);
  cursor:grab;
  touch-action:none;
  /* anders sleep je de halve krant blauw in plaats van hem te verschuiven */
  user-select:none;
  -webkit-user-select:none;
}
#stage.grabbing{cursor:grabbing;}

#canvas{
  position:absolute; top:0; left:0;
  width:2800px; height:1800px;
  transform-origin:0 0;
  will-change:transform;
}
#canvas.animating{transition:transform var(--fly);}

/* ---------------- de kaart ---------------- */

#map{
  position:absolute;
  left:862px; top:50px;
  width:1076px; height:1700px;
  overflow:hidden;   /* niets steekt buiten het kaartkader */
}
/* de kaart heeft een eigen camera binnen dit kader */
#binnen{transform-box:view-box;transform-origin:0 0;}
#binnen.animating{transition:transform var(--fly);}

#map .zee{fill:var(--sea);}
#map .land{fill:var(--land);stroke:#b8b09a;stroke-width:calc(1.1px * var(--k));stroke-linejoin:round;}
#map .kader{fill:none;stroke:var(--ink);stroke-width:2.4;}

/* lijndikte en streepjes blijven op het scherm even fijn, hoever je ook
   inzoomt; anders worden het rode bakstenen */
#map .route{
  fill:none;stroke:var(--accent);stroke-width:calc(1.6px * var(--k));opacity:.42;
  stroke-dasharray:calc(5px * var(--k)) calc(7px * var(--k));
  animation:rijden 2.4s linear infinite;
}
@keyframes rijden{to{stroke-dashoffset:calc(-24px * var(--k));}}

/* --k compenseert de camerazoom, zodat stippen en labels op het scherm
   altijd even groot blijven. Wordt per frame gezet in app.js. */
#map{--k:1;}

.halte{cursor:pointer;}
.halte .raak{r:min(calc(21px * var(--k)), var(--max, 999px));fill:transparent;}
.halte .ring{
  r:calc(8px * var(--k));fill:none;stroke:var(--accent);stroke-width:calc(2px * var(--k));
  opacity:0;transform-box:fill-box;transform-origin:center;
  pointer-events:none;   /* anders vangt deze onzichtbare ring de klik van de buurman */
}
.halte .stip{
  r:calc(6.5px * var(--k));fill:var(--accent);
  stroke:var(--paper);stroke-width:calc(2.4px * var(--k));
  pointer-events:none;   /* alleen .raak vangt kliks, zodat de maat klopt */
}
.halte.thuisbasis .stip{r:calc(8px * var(--k));fill:var(--ink);}
.halte:hover .stip,.halte:focus-visible .stip,.halte.aangewezen .stip{r:calc(9.5px * var(--k));}
.halte:hover .ring,.halte:focus-visible .ring,.halte.aangewezen .ring{opacity:.7;animation:puls 1.5s ease-out infinite;}
@keyframes puls{from{transform:scale(.7);opacity:.75;}to{transform:scale(3.2);opacity:0;}}
.halte:focus{outline:none;}

/* het hele label schaalt rond zijn eigen stip mee met de zoom */
.label{
  pointer-events:none;
  transform-box:view-box;
  transform-origin:var(--ox) var(--oy);
  transform:scale(var(--k));
}
.label .naam{
  font-family:var(--cond);font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:3.6px;stroke-linejoin:round;
}
.label .jaar{
  font-family:var(--display);font-weight:800;font-size:13px;fill:var(--accent);
  paint-order:stroke;stroke:var(--paper);stroke-width:3.6px;
}
.label .leider{stroke:var(--accent);stroke-width:1;opacity:.5;fill:none;}

/* de plaatsnaam is zelf ook aan te klikken, een stip is een klein doel */
.naamvlak{fill:transparent;pointer-events:fill;cursor:pointer;}

/* een naam waar geen plek voor is verdwijnt, en komt terug zodra je de
   bijbehorende stip aanwijst */
.label{transition:opacity .25s ease;}
.label.verborgen{opacity:0;}
.label.verborgen.actief{opacity:1;}
.label.verborgen .naamvlak{pointer-events:none;}
.label.actief .naam{fill:var(--accent);}

/* ---------------- knipsels ---------------- */

.knipsel{
  position:absolute;
  background:var(--paper);
  border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(23,22,15,.13);
  padding:34px 38px;
  cursor:pointer;
  transition:box-shadow .25s ease, transform .25s ease;
}
.knipsel:hover{box-shadow:0 18px 46px rgba(23,22,15,.2);transform:translateY(-3px);}
.knipsel:focus-visible{outline:3px solid var(--accent);outline-offset:4px;}

.knipsel .label{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--cond);font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  padding:3px 10px;margin-bottom:18px;
}
.knipsel h2{
  font-family:var(--display);font-weight:900;font-size:48px;line-height:.98;
  letter-spacing:-.015em;text-wrap:balance;margin-bottom:14px;
}
.knipsel h3{
  font-family:var(--display);font-weight:900;font-size:34px;line-height:1.02;
  text-wrap:balance;margin-bottom:12px;
}
.knipsel p{font-size:19px;line-height:1.45;color:var(--soft);}
.knipsel p+p{margin-top:12px;}
.knipsel .cite{font-style:italic;color:var(--accent);}
.knipsel .sign{
  margin-top:20px;padding-top:12px;border-top:1px solid var(--line);
  font-family:var(--cond);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}

/* de kop van de krant */
#kop{text-align:center;border:none;box-shadow:none;background:none;cursor:default;}
#kop:hover{transform:none;box-shadow:none;}
#kop .over{font-family:var(--cond);font-size:16px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);}
#kop .titel{font-family:var(--display);font-weight:900;font-size:132px;line-height:.84;letter-spacing:-.02em;margin:10px 0 6px;}
#kop .tag{font-style:italic;font-size:22px;color:var(--soft);}
#kop .datum{
  margin-top:16px;padding-top:12px;border-top:2px solid var(--ink);border-bottom:1px solid var(--ink);
  font-family:var(--cond);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);
  padding-bottom:8px;
}

/* Advertentie, in omgekeerde druk. Het enige donkere vlak op het hele doek,
   zodat je hem er ook uitgezoomd meteen uit pikt, zoals een paginagrote
   advertentie in een echte krant. */
#advertentie{
  background:var(--ink);border:1px solid var(--ink);color:var(--paper);
  text-align:center;
  box-shadow:0 14px 40px rgba(23,22,15,.34);
  /* de inhoud is korter dan het kader; midden zetten leest als lucht in de
     advertentie in plaats van als een gat eronder */
  display:flex;flex-direction:column;justify-content:center;
}
#advertentie:hover{box-shadow:0 22px 56px rgba(23,22,15,.46);}
/* dubbele haarlijn net binnen de rand, zoals bij een ingekaderde advertentie */
#advertentie::after{
  content:"";position:absolute;inset:11px;pointer-events:none;
  border:3px double rgba(245,241,230,.5);
}
#advertentie .eyebrow{font-family:var(--cond);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,241,230,.5);}
#advertentie h3{font-size:52px;margin:12px 0 4px;color:var(--paper);}
#advertentie .sub{font-family:var(--cond);font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-licht);margin-bottom:22px;}
#advertentie ul{list-style:none;text-align:left;font-size:19px;line-height:1.5;color:rgba(245,241,230,.9);}
#advertentie li{padding-left:22px;position:relative;}
#advertentie li::before{content:"›";position:absolute;left:0;color:var(--accent-licht);font-weight:700;}
#advertentie .fijn{
  margin-top:20px;padding-top:14px;border-top:1px solid rgba(245,241,230,.24);
  text-align:left;font-size:14px;line-height:1.4;color:rgba(245,241,230,.5);
}

/* verkeersbericht */
#verkeer dl{font-size:18px;line-height:1.42;color:var(--soft);}
#verkeer dt{
  font-family:var(--cond);font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-top:16px;
}
#verkeer dt:first-child{margin-top:0;}

/* legenda */
#legenda ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;font-size:17px;color:var(--soft);}
#legenda li{display:flex;align-items:center;gap:10px;}
#legenda .swatch{width:14px;height:14px;border-radius:50%;background:var(--accent);flex:none;}
#legenda .swatch.thuis{background:var(--ink);}

/* ---------------- navigatie ---------------- */

#rail{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  transition:transform .5s cubic-bezier(.62,.02,.2,1), opacity .3s ease;
  display:flex; align-items:center; gap:4px;
  background:rgba(245,241,230,.93);
  backdrop-filter:blur(8px);
  border:1px solid var(--line);
  padding:6px;
  box-shadow:0 8px 28px rgba(23,22,15,.16);
  z-index:40;
  max-width:calc(100vw - 24px);
  overflow-x:auto;
  scrollbar-width:none;
}
#rail::-webkit-scrollbar{display:none;}
#rail button{
  font-family:var(--cond);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  background:none;border:none;color:var(--soft);
  padding:9px 14px;cursor:pointer;white-space:nowrap;
  transition:background .18s ease,color .18s ease;
}
#rail button:hover{background:rgba(23,22,15,.07);color:var(--ink);}
#rail button[aria-current="true"]{background:var(--ink);color:var(--paper);}
#rail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

#zoom{
  position:fixed; right:20px; bottom:20px; z-index:40;
  display:flex; flex-direction:column;
  background:rgba(245,241,230,.93); backdrop-filter:blur(8px);
  border:1px solid var(--line); box-shadow:0 8px 28px rgba(23,22,15,.16);
  transition:opacity .3s ease;
}
#zoom button{
  width:44px;height:44px;border:none;background:none;cursor:pointer;
  font-family:var(--serif);font-size:22px;line-height:1;color:var(--soft);
}
#zoom button+button{border-top:1px solid var(--line);}
#zoom button:hover{background:rgba(23,22,15,.07);color:var(--ink);}
#zoom button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
body.venster-open #zoom{opacity:0;pointer-events:none;}

#hulp{
  position:fixed; left:20px; bottom:20px; z-index:40;
  background:rgba(245,241,230,.93); backdrop-filter:blur(8px);
  border:1px solid var(--line); padding:9px 13px;
  font-family:var(--cond);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint); line-height:1.75; pointer-events:none;
  transition:opacity .5s ease;
}
#hulp kbd{
  font-family:var(--cond);border:1px solid var(--line);padding:1px 5px;
  color:var(--soft);
}

/* ---------------- mediavenster ---------------- */

#venster{
  position:fixed;inset:0;z-index:60;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,40px);
}
#venster[hidden]{display:none;}

#waas{
  position:absolute;inset:0;
  background:rgba(23,22,15,.62);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .35s ease;
}
#venster.open #waas{opacity:1;}

#paneel{
  position:relative;
  width:min(940px,100%);
  max-height:min(92vh,880px);
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity .35s ease, transform .35s cubic-bezier(.62,.02,.2,1);
}
#venster.open #paneel{opacity:1;transform:none;}

#paneel header{
  padding:22px 74px 16px 28px;border-bottom:1px solid var(--line);
  position:relative;flex:none;
}
#paneel .plaats-label{font-family:var(--cond);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);}
#paneel h2{font-family:var(--display);font-weight:900;font-size:clamp(26px,4vw,38px);line-height:1;margin:5px 0 3px;text-wrap:balance;}
#paneel .onder{font-style:italic;color:var(--soft);font-size:15px;}

#sluit{
  position:absolute;top:18px;right:20px;
  width:40px;height:40px;border:1px solid var(--line);background:var(--paper);
  color:var(--soft);font-size:22px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
}
#sluit:hover{background:var(--ink);color:var(--paper);border-color:var(--ink);}
#sluit:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

#lijf{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;}

/* de speler houdt 16:9 en krijgt hoogstens de helft van het venster,
   zodat de strook eronder altijd zichtbaar blijft */
#speler{
  flex:none;position:relative;background:#0d0d0b;
  aspect-ratio:16/9;
  width:min(100%, calc(min(44vh, 460px) * 16 / 9));
  margin:0 auto;
}
#speler iframe{width:100%;height:100%;border:0;display:block;}
#speler .beeld{width:100%;height:100%;object-fit:contain;display:block;}

/* poster voor films die niet ingesloten mogen worden */
#speler .poster{position:absolute;inset:0;display:block;overflow:hidden;text-decoration:none;}
#speler .poster img{width:100%;height:100%;object-fit:cover;display:block;
                    filter:saturate(.75) brightness(.6);transition:filter .3s ease,transform .5s ease;}
#speler .poster:hover img{filter:saturate(.92) brightness(.72);transform:scale(1.03);}
#speler .poster .tegel{position:absolute;inset:0;display:flex;flex-direction:column;
                       align-items:center;justify-content:center;gap:10px;text-align:center;padding:16px;}
#speler .poster .knop{
  font-family:var(--cond);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  background:var(--paper);color:var(--ink);padding:12px 22px;
}
#speler .poster:hover .knop{background:var(--accent);color:var(--paper);}
#speler .poster .uitleg{font-size:13px;color:rgba(245,241,230,.85);font-style:italic;}
#speler .poster:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;}

#paneel .tekst{padding:18px 28px 0;font-size:16px;line-height:1.5;color:var(--soft);flex:none;}
#paneel{overflow:hidden;user-select:text;-webkit-user-select:text;}

#films{padding:16px 28px 22px;flex:none;}
#films .kop{
  font-family:var(--cond);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:12px;flex:none;
}
#films .strip{
  display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;
  scrollbar-width:thin;
}
.film{
  flex:0 0 152px;background:none;border:none;cursor:pointer;padding:6px;
  font:inherit;color:inherit;text-align:left;transition:background .18s ease;
}
.film:hover{background:rgba(23,22,15,.06);}
.film:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.film[aria-current="true"]{background:rgba(140,43,31,.11);}
.film .mini{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--paper-2);margin-bottom:7px;}
.film .mini img{width:100%;height:100%;object-fit:cover;display:block;}
.film .t{display:block;font-size:13.5px;line-height:1.3;}
.film .j{display:block;font-family:var(--cond);font-size:11.5px;letter-spacing:.13em;
         text-transform:uppercase;color:var(--accent);margin-top:3px;}

body.venster-open #rail,body.venster-open #hulp{opacity:0;pointer-events:none;}

/* ---------------- opening ---------------- */

#opening{
  position:fixed;inset:0;z-index:80;
  background:var(--paper);
  display:grid;place-items:center;text-align:center;padding:24px;
  transition:opacity .8s ease;
}
#opening.weg{opacity:0;pointer-events:none;}
#opening .over{font-family:var(--cond);font-size:13px;letter-spacing:.4em;text-transform:uppercase;color:var(--accent);}
#opening h1{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,16vw,10rem);line-height:.84;letter-spacing:-.02em;margin:.1em 0 .12em;}
#opening .tag{font-style:italic;color:var(--soft);font-size:clamp(.95rem,3.2vw,1.3rem);}
#opening .start{
  margin-top:2.4rem;
  font-family:var(--cond);font-size:14px;letter-spacing:.22em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border:none;
  padding:15px 30px;cursor:pointer;
}
#opening .start:hover{background:var(--accent);}
#opening .start:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}

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

@media (max-width:820px){
  #venster{padding:0;place-items:end stretch;}
  #paneel{width:100%;max-height:94vh;border:none;border-top:1px solid var(--ink);
          transform:translateY(100%);}
  #venster.open #paneel{transform:none;}
  #paneel header{padding:18px 64px 14px 20px;}
  #paneel .tekst{padding:14px 20px 0;font-size:15px;}
  #films{padding:14px 20px 18px;}
  #rail{bottom:12px;max-width:calc(100vw - 84px);left:calc(50% - 30px);}
  #zoom{bottom:12px;right:12px;}
}

/* onder deze breedte botst de sneltoetsuitleg met de knoppenbalk;
   de legenda op het doek legt de bediening toch al uit */
@media (max-width:1200px){
  #hulp{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
  #canvas.animating,#binnen.animating{transition-duration:.001ms;}
  #paneel,#waas{transition-duration:.001ms;}
}