/* ════════════════════════════════════════════════════════
   basboudewijn.nl — licht, fotografisch, persoonlijk (v2)
════════════════════════════════════════════════════════ */
:root{
  --paper:#faf7f1; --paper2:#f3eee4;
  --ink:#23201b; --ink2:#6e655a; --ink3:#a39885;
  --rust:#b4532a; --gum:#5f7a5c; --sea:#5e8fa3;
  --line:rgba(35,32,27,.14);
  --f-d:'Fraunces',serif; --f-b:'Inter',sans-serif;
  /* materiaalsysteem — de reistafel (atlas-site-spec §1) */
  --vel:#fffdf6;            /* het witste vel */
  --vel2:#fbf6ea;           /* crème vel: hoezen, labels */
  --atlas:#f6f0e1;          /* het atlasblad */
  --velrand:rgba(120,100,70,.28);
  --velschaduw:0 1px 2px rgba(96,74,40,.10), 0 12px 28px rgba(96,74,40,.14);
  --velschaduw-zwaar:0 2px 4px rgba(96,74,40,.12), 0 22px 48px rgba(96,74,40,.20);
  --papertile:none;         /* main.js vult dit met paperTileURL() uit globe.js */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-b);background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* de tafel zelf: één statische papierlaag over de hele site, geen parallax */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:var(--papertile);opacity:.5}
::selection{background:var(--rust);color:#fff}
img{display:block;max-width:100%}

.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:26px;
  padding:18px clamp(20px,4.5vw,52px);background:linear-gradient(var(--paper) 55%, rgba(250,247,241,0))}
.nav-name{position:relative;font-family:var(--f-d);font-weight:600;font-size:17px;color:var(--ink);text-decoration:none}
/* potlood-onderkras, alleen op hover/focus */
.nav-name::after{content:'';position:absolute;left:1px;bottom:-4px;width:14px;height:5px;
  border-bottom:1.6px solid var(--ink3);border-radius:0 0 60% 40%/0 0 5px 3px;
  opacity:0;transform:rotate(-2deg);transition:opacity .25s,width .25s}
.nav-name:hover::after,.nav-name:focus-visible::after{opacity:1;width:34px}
.nav-links{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--ink2);text-decoration:none;font-size:13.5px;font-weight:500}
.nav-links a:hover{color:var(--rust)}
.nav-cta{color:var(--rust) !important;border:1px solid rgba(180,83,42,.4);border-radius:100px;padding:7px 17px}
.lang{font-size:11.5px;font-weight:600;letter-spacing:.12em;color:var(--ink2);border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;background:none;font-family:inherit;cursor:pointer}
.lang:hover{color:var(--rust);border-color:rgba(180,83,42,.4)}

main{position:relative;z-index:2}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4.5vw,52px)}

/* ── hero ── */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:center;min-height:100svh;padding-top:84px}
.kicker{font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--rust);margin-bottom:24px;display:flex;align-items:center;gap:12px}
.kicker::before{content:'';width:34px;height:1px;background:var(--rust)}
h1{font-family:var(--f-d);font-weight:300;font-size:clamp(38px,4.7vw,70px);line-height:1.07;letter-spacing:-.015em}
h1 em{font-style:italic;font-weight:400;color:var(--rust)}
.hero-sub{margin-top:26px;max-width:46ch;color:var(--ink2);font-weight:300;font-size:clamp(14.5px,1.35vw,17px)}
.hero-ctas{display:flex;gap:13px;margin-top:34px;flex-wrap:wrap}
.b-solid{background:var(--rust);color:#fff;text-decoration:none;font-weight:600;font-size:14px;border-radius:100px;padding:14px 28px;transition:all .25s;border:none;cursor:pointer;font-family:inherit}
.b-solid:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(180,83,42,.3)}
.b-line{color:var(--ink);text-decoration:none;font-weight:500;font-size:14px;border:1px solid var(--line);border-radius:100px;padding:14px 28px;transition:all .25s;background:none;cursor:pointer;font-family:inherit}
.b-line:hover{border-color:var(--rust);color:var(--rust)}
.hero-fig{position:relative}
/* de hero-foto is een afdruk op tafel: print + tape, schaduw op de print */
.hero-print{display:block;transform:rotate(1.2deg);box-shadow:var(--velschaduw-zwaar)}
.hero-print img{border-radius:0;box-shadow:none}
.hero-cap{margin-top:16px;font-size:11.5px;color:var(--ink3);letter-spacing:.06em}
/* het 'Nu'-badge als bagagelabel: gaatje + touwtje naar de printhoek */
.now{position:absolute;top:6px;left:-10px;z-index:3;background:var(--vel2);border:1px solid var(--velrand);
  border-radius:3px 14px 14px 3px;padding:8px 16px 8px 22px;font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:8px;
  transform:rotate(-2deg);box-shadow:var(--velschaduw)}
.now::before{content:'';position:absolute;left:7px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--paper) 0 2.6px, rgba(120,100,70,.5) 2.7px 3.6px, var(--vel2) 3.7px)}
.now-string{position:absolute;left:-14px;top:calc(100% - 4px);width:24px;height:16px;color:rgba(120,100,70,.55)}
.now i{width:7px;height:7px;border-radius:50%;background:var(--gum);box-shadow:0 0 0 3px rgba(95,122,92,.25)}
/* CTA-voorproefje: het kronkeltje waar de routelijn ontspringt */
.cta-squiggle{display:block;width:28px;height:34px;margin:10px 0 0 26px}
.cta-squiggle path{stroke:var(--rust);stroke-width:1.8;stroke-linecap:round;opacity:.8;
  stroke-dasharray:72 100;transition:stroke-dasharray .45s ease}
.hero-ctas:hover + .cta-squiggle path{stroke-dasharray:100 100}

/* ── secties ── */
.sec{padding:clamp(70px,11vh,130px) 0}
.sh{display:flex;align-items:center;gap:18px;margin-bottom:14px}
.sh h2{font-family:var(--f-d);font-weight:400;font-size:clamp(30px,3.6vw,50px);letter-spacing:-.015em}
.sh .all{margin-left:auto;font-size:13px;color:var(--ink3);white-space:nowrap}
.sec-lead{color:var(--ink2);font-weight:300;max-width:62ch;margin-bottom:44px}

/* ════ materiaalsysteem — de gereedschapskist (spec §1) ════ */
.vel{background-color:var(--vel);background-image:var(--papertile);
  border:1px solid var(--velrand);border-radius:3px;box-shadow:var(--velschaduw)}
.tape{position:absolute;top:-9px;left:14px;width:62px;height:20px;z-index:2;pointer-events:none;
  background:linear-gradient(rgba(232,219,189,.55),rgba(232,219,189,.4));
  border-left:1px solid rgba(255,255,255,.4);border-right:1px solid rgba(255,255,255,.4);
  transform:rotate(-3deg)}
.tape--r{left:auto;right:14px;transform:rotate(4deg)}
.seal{width:34px;height:34px;display:block;flex:0 0 auto;transition:transform .25s}
.seal-sm{width:22px;height:22px}
a:hover .seal,button:hover .seal,a:focus-visible .seal,button:focus-visible .seal,
.card:hover .seal,.card:focus-within .seal{transform:scale(1.08) rotate(-4deg)}
.postmark{width:54px;height:54px;flex:0 0 auto;color:rgba(35,32,27,.5);transform:rotate(-8deg);align-self:center}
.postmark svg{width:100%;height:100%;display:block}
.postmark .pm-n{font-family:var(--f-d);font-style:italic;font-size:19px;fill:currentColor}
.pm-arc{font-family:var(--f-b);font-size:6.5px;letter-spacing:2.2px;fill:currentColor;text-transform:uppercase}
.print{position:relative;display:block;background:var(--vel);background-image:var(--papertile);
  padding:10px 10px 14px;border-radius:2px;box-shadow:var(--velschaduw)}
.print img{border-radius:0}
.ruled{background-image:repeating-linear-gradient(transparent 0 calc(1.85em - 1px), rgba(120,100,70,.12) 0 1.85em);
  line-height:1.85em}
.stamp-ink{display:inline-block;font-family:var(--f-b);font-weight:600;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:#a34b26;border:1.5px solid currentColor;border-radius:3px;
  padding:3px 8px;transform:rotate(-2deg)} /* vol dekkend stempelrood: ≥4,5:1 (AA) op --vel én --vel2 */

/* ════ DE REIS — het grote atlasblad (concept A) ════
   De papierkorrel komt uit globe.js (paperTileURL) en wordt door main.js als
   background gezet — procedureel canvas-papier, geen externe afbeeldingen. */
.sec-tight{padding-bottom:clamp(20px,3vh,34px)}
.atlas-sheet{position:relative;width:100vw;margin-left:calc(50% - 50vw);
  background-color:#f6f0e1;border-top:1px solid rgba(120,100,70,.18);border-bottom:1px solid rgba(120,100,70,.18);
  box-shadow:inset 0 16px 36px -24px rgba(96,74,40,.4), inset 0 -16px 36px -24px rgba(96,74,40,.32)}
.atlas-sheet::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, rgba(255,252,243,.55), rgba(231,217,186,0) 55%, rgba(186,158,112,.22) 100%)}
.atlas-grid{position:relative;max-width:1680px;margin:0 auto;
  padding:clamp(26px,4vh,54px) clamp(20px,4vw,56px) clamp(34px,5vh,62px);
  display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,23vw,330px);
  grid-template-areas:'stage margin' 'playback margin';
  column-gap:clamp(24px,3.5vw,58px);row-gap:16px;align-items:start}

/* het blad zelf */
.atlas-stage{grid-area:stage;min-width:0}
.atl-frame{position:relative;width:min(100%,84svh);margin:0 auto}
#globe{width:100%;aspect-ratio:1;display:block;touch-action:pan-y;cursor:grab;border-radius:50%}
#globe:focus-visible{outline:2px dashed var(--ink3);outline-offset:8px} /* focusring als potloodcirkel */

/* kompasnaald = altijd terug naar het wereldoverzicht */
.atl-compass{position:absolute;top:2px;left:2px;z-index:4;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);
  background:rgba(250,246,234,.88);border:1px solid rgba(120,100,70,.3);
  box-shadow:0 3px 10px rgba(96,74,40,.14);transition:color .25s}
.atl-compass svg{width:30px;height:30px}
.atl-compass .needle{transform-origin:18px 18px;transition:transform .6s cubic-bezier(.3,1.6,.4,1)}
.atl-compass:hover{color:var(--ink)}
.atl-compass:hover .needle{transform:rotate(-42deg)}
.atl-zoom{position:absolute;top:2px;right:2px;z-index:4;display:flex;flex-direction:column;gap:7px}
.atl-zoom button{width:40px;height:40px;border-radius:50%;cursor:pointer;font-family:var(--f-d);font-size:20px;line-height:1;
  color:var(--ink2);background:rgba(250,246,234,.88);border:1px solid rgba(120,100,70,.3);
  box-shadow:0 3px 10px rgba(96,74,40,.14);transition:color .2s,border-color .2s}
.atl-zoom button:hover{color:var(--rust);border-color:rgba(180,83,42,.5)}
.atl-hint{position:absolute;left:0;right:0;bottom:-6px;text-align:center;font-size:11px;font-style:italic;
  color:var(--ink3);pointer-events:none}
.atl-hint .h-coarse{display:none}
@media (pointer:coarse){ .atl-hint .h-fine{display:none} .atl-hint .h-coarse{display:inline} }

/* het tentje — 'hier ben ik nú' (vertraagd, regio-niveau) */
.atl-tent{position:absolute;top:0;left:0;z-index:3;will-change:transform}
.atl-tent.atl-hidden{display:none}
#tentBtn{position:absolute;transform:translate(-50%,-82%);background:none;border:none;cursor:pointer;padding:6px}
#tentBtn svg{width:26px;height:21px;display:block;filter:drop-shadow(0 2px 3px rgba(96,74,40,.35))}
#tentBtn .ring{position:absolute;left:50%;top:62%;width:30px;height:30px;margin:-15px 0 0 -15px;
  border-radius:50%;pointer-events:none;animation:tentbreathe 3.2s ease-out infinite}
@keyframes tentbreathe{0%{box-shadow:0 0 0 0 rgba(180,83,42,.32)}70%{box-shadow:0 0 0 13px rgba(180,83,42,0)}100%{box-shadow:0 0 0 0 rgba(180,83,42,0)}}
.atl-tent.toot #tentBtn svg{animation:toot .55s ease}
@keyframes toot{0%,100%{transform:none}20%{transform:rotate(-7deg) translateX(-2px)}45%{transform:rotate(6deg) translateX(2px)}70%{transform:rotate(-4deg)}}
.tent-note{position:absolute;bottom:34px;left:0;transform:translateX(-50%);width:max-content;max-width:230px;
  background:#fffdf6;border:1px solid rgba(120,100,70,.3);border-radius:3px 14px 12px 3px;
  padding:12px 16px;box-shadow:0 10px 26px rgba(96,74,40,.22);rotate:-2deg}
.tent-note b{display:block;font-family:var(--f-d);font-style:italic;font-weight:400;font-size:14.5px;color:var(--ink);margin-bottom:4px}
.tent-note span{font-size:10.5px;color:var(--ink3);font-style:italic;line-height:1.45;display:block}

/* de tijdlijn: 'speel de reis af', gestileerd als liniaal */
.atl-playback{grid-area:playback;position:relative;display:flex;align-items:center;gap:14px;
  width:min(100%,84svh);margin:0 auto;padding-top:10px}
.pb-play{flex:0 0 46px;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--rust);color:var(--rust);
  background:rgba(250,246,234,.7);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s}
.pb-play svg{width:21px;height:21px}
.pb-play .ic-pause{display:none}
.pb-play.playing .ic-play{display:none}
.pb-play.playing .ic-pause{display:block}
.pb-play:hover{background:var(--rust);color:#fff;box-shadow:0 6px 18px rgba(180,83,42,.3)}
.pb-line{flex:1;min-width:0}
#pbScrub{appearance:none;-webkit-appearance:none;width:100%;height:24px;background:transparent;cursor:pointer;display:block;margin:0}
#pbScrub::-webkit-slider-runnable-track{height:11px;border-radius:2px;background:
  repeating-linear-gradient(90deg, rgba(110,101,90,.4) 0 1px, transparent 1px 14px) center/100% 8px no-repeat,
  linear-gradient(rgba(110,101,90,.65),rgba(110,101,90,.65)) center/100% 1.5px no-repeat}
#pbScrub::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;background:var(--rust);
  border:2.5px solid #fffdf6;box-shadow:0 1px 5px rgba(96,74,40,.4);margin-top:-2px}
#pbScrub::-moz-range-track{height:11px;border-radius:2px;background:
  repeating-linear-gradient(90deg, rgba(110,101,90,.4) 0 1px, transparent 1px 14px) center/100% 8px no-repeat,
  linear-gradient(rgba(110,101,90,.65),rgba(110,101,90,.65)) center/100% 1.5px no-repeat}
#pbScrub::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--rust);
  border:2.5px solid #fffdf6;box-shadow:0 1px 5px rgba(96,74,40,.4)}
#pbScrub:focus-visible{outline:2px dashed var(--ink3);outline-offset:4px}
.pb-read{display:flex;gap:12px;align-items:baseline;font-size:11.5px;color:var(--ink3);margin-top:2px;min-height:18px}
.pb-read b{font-family:var(--f-d);font-style:italic;font-weight:600;font-size:14px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.pb-km{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--ink2)}
.pb-sound{flex:0 0 36px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(120,100,70,.3);
  background:rgba(250,246,234,.7);color:var(--ink3);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.pb-sound svg{width:18px;height:18px}
.pb-sound .mute{transition:opacity .2s}
.pb-sound.on{color:var(--rust);border-color:rgba(180,83,42,.5)}
.pb-sound.on .mute{opacity:0}
.pb-card{position:absolute;left:60px;bottom:calc(100% + 8px);z-index:5;background:#fffdf6;border:1px solid rgba(120,100,70,.3);
  border-radius:4px;padding:10px 16px;box-shadow:0 12px 30px rgba(96,74,40,.22);rotate:-1.2deg;max-width:300px;
  display:flex;align-items:center;gap:10px;
  animation:cardIn .35s cubic-bezier(.2,1.4,.4,1)}
.pb-card[hidden]{display:none}
.pbc-tx{display:block;min-width:0}
@keyframes cardIn{from{opacity:0;transform:translateY(8px) scale(.96)}}
.pb-card em{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--rust)}
.pb-card b{font-family:var(--f-d);font-weight:600;font-size:15px;color:var(--ink)}

/* titelkaartje óp het blad: tik een lakzegeltje en het verhaal stelt zich voor */
.stop-card-wrap{position:absolute;top:0;left:0;z-index:6;will-change:transform}
.stop-card-wrap.atl-hidden{display:none}
.stop-card{position:absolute;left:0;bottom:18px;transform:translateX(-50%);width:max-content;max-width:min(250px,74vw);
  background:#fffdf6;border:1px solid rgba(120,100,70,.3);border-radius:3px 12px 10px 3px;
  padding:10px 15px 11px;box-shadow:0 12px 30px rgba(96,74,40,.22);rotate:-1.4deg;
  animation:stopCardIn .35s cubic-bezier(.2,1.4,.4,1)}
/* eigen keyframes met losse translate/scale — cardIn zou de centrering
   (transform:translateX(-50%)) tijdens de animatie overschrijven */
@keyframes stopCardIn{from{opacity:0;translate:0 8px;scale:.96}}
.stop-card[hidden]{display:none}
.stop-card em{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.stop-card b{display:block;font-family:var(--f-d);font-style:italic;font-weight:600;font-size:15px;line-height:1.3;color:var(--ink)}
.stop-card .sc-read{margin-top:8px;display:inline-block;background:none;border:none;border-bottom:1px solid rgba(180,83,42,.5);
  padding:0 0 2px;font-family:inherit;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--rust);cursor:pointer;transition:border-color .2s}
.stop-card .sc-read:hover{border-color:var(--rust)}

/* de marge-legenda: reizen als hoofdstuktitels, stops als aantekeningen */
.atlas-margin{grid-area:margin;border-left:1px solid rgba(120,100,70,.25);padding-left:clamp(16px,1.8vw,28px);min-width:0}
.am-cap{font-size:10px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--ink3);margin-bottom:10px}
.trips{display:flex;flex-direction:column;margin-bottom:18px}
.trip{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;font-family:var(--f-d);font-style:italic;
  font-size:15px;color:var(--ink2);background:none;border:none;border-bottom:1px dashed rgba(120,100,70,.28);
  padding:8px 2px;cursor:pointer;transition:color .2s}
.trip:hover{color:var(--rust)}
.trip.on{color:var(--ink);font-weight:600}
.trip i{width:7px;height:7px;border-radius:50%;flex:0 0 auto;align-self:center;opacity:.85}
.trip.on i{box-shadow:0 0 0 3px rgba(180,83,42,.16)}
.trip .c{margin-left:auto;font-family:var(--f-b);font-style:normal;font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
.trip.on .c{color:var(--rust)}
.trip-head{display:flex;align-items:baseline;gap:10px;margin:0 2px 12px;flex-wrap:wrap}
.trip-head b{font-family:var(--f-d);font-size:18px;font-weight:600;color:var(--ink)}
.trip-head span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}

/* land-chips: binnen een reis op één land inzoomen */
.landchips{display:flex;flex-wrap:wrap;gap:7px;margin:0 2px 14px}
.landchips:empty{display:none}
.lchip{display:inline-flex;align-items:center;gap:7px;font-family:inherit;font-size:11.5px;font-weight:500;color:var(--ink2);
  background:rgba(255,253,246,.75);border:1px solid rgba(120,100,70,.28);border-radius:100px;padding:5px 11px;cursor:pointer;transition:all .2s}
.lchip:hover{border-color:var(--ink3)}
.lchip.on{border-color:var(--sea);background:rgba(94,143,163,.12);color:var(--ink)}
.lchip span{font-size:10px;color:var(--ink3);font-variant-numeric:tabular-nums}
.lchip.on span{color:var(--sea)}

.stops{display:flex;flex-direction:column;max-height:44vh;overflow-y:auto;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:var(--ink3) transparent}
.stop{display:flex;align-items:center;gap:14px;text-align:left;font-family:inherit;background:none;border:none;
  border-bottom:1px solid rgba(120,100,70,.18);padding:12px 8px;cursor:pointer;transition:background .2s;border-radius:8px}
.stop:hover{background:rgba(180,83,42,.06)}
.stop.on{background:rgba(180,83,42,.1)}
.stop .s-i{flex:0 0 26px;height:26px;border-radius:50%;border:1.5px solid var(--ink3);color:var(--ink2);
  font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center}
.stop.on .s-i{border-color:var(--rust);background:var(--rust);color:#fff}
.stop .s-b{flex:1;display:flex;flex-direction:column;line-height:1.35;min-width:0}
.stop .s-b b{font-size:14px;font-weight:600;color:var(--ink)}
.stop .s-b i{font-style:normal;font-size:11.5px;color:var(--ink3)}
.stop .s-r{color:var(--rust);font-size:9px}
.stop-story{display:none;align-items:center;gap:12px;margin-top:14px;background:#fffdf6;border:1px solid rgba(120,100,70,.28);width:100%;
  border-radius:3px;padding:14px 16px;cursor:pointer;font-family:inherit;text-align:left;transition:all .25s;box-shadow:var(--velschaduw)}
.stop-story:hover{background:rgba(180,83,42,.12)}
.stop-story em{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--rust)}
.stop-story b{display:block;font-family:var(--f-d);font-size:15px;font-weight:600;color:var(--ink)}
.stop-story span{margin-left:auto;color:var(--rust)}

/* ── verhalen: ansichtkaarten op de kaart ── */
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:30px}
.fsel{position:relative;display:inline-flex}
.fsel select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--ink2);
  background:var(--vel);border:1px solid var(--velrand);border-radius:3px;padding:8px 32px 8px 15px;cursor:pointer;transition:all .2s}
.fsel select:hover{border-color:var(--ink3)}
.fsel::after{content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:10px;color:var(--ink3)}
.fcount{font-size:12px;color:var(--ink3);font-style:italic;margin-left:auto}

#verhalen{position:relative}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;row-gap:42px}
.card{text-decoration:none;color:var(--ink);display:block;cursor:pointer;
  background-color:var(--vel);background-image:var(--papertile);border:1px solid var(--velrand);
  border-radius:3px;box-shadow:var(--velschaduw);padding-bottom:18px;
  transition:transform .35s ease}
/* wisselende rotaties via de losse rotate-property (botst niet met .reveal-transform);
   de kaart die je oppakt ligt recht in je hand */
.card{transition:transform .35s ease,rotate .35s ease,translate .35s ease}
.cards .card:nth-child(3n+1){rotate:-1.4deg}
.cards .card:nth-child(3n+2){rotate:.8deg}
.cards .card:nth-child(3n){rotate:-.5deg}
/* translate/rotate als losse properties: botsen niet met de reveal-transform */
.cards .card:hover,.cards .card:focus-within{rotate:0deg;translate:0 -6px}
.card .ph{overflow:visible;aspect-ratio:4/3.1;margin:10px 10px 14px;position:relative}
.card .ph img,.card .ph .tk{position:absolute;inset:0}
.card .ph img{width:100%;height:100%;object-fit:cover}
.card .card-seal{position:absolute;top:-6px;right:0;z-index:3}
/* tag: mini-poststempel-regel op de witmarge, geen pill */
.card .tag{display:flex;align-items:center;gap:7px;margin:0 14px 8px;
  font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.card .tag i{width:12px;height:12px;flex:0 0 auto;border:1.2px dashed var(--ink3);border-radius:50%}
/* tekstkaart: de achterkant van de ansichtkaart — leeg postzegelkader + scheidslijn */
.card .tk{width:100%;height:100%;background:var(--vel2);
  display:flex;align-items:center;padding:22px 20px;border:1px solid rgba(120,100,70,.16)}
.card .tk::before{content:'';position:absolute;top:10px;right:10px;width:28px;height:34px;
  border:1px dashed var(--velrand)}
.card .tk::after{content:'';position:absolute;top:12px;bottom:12px;left:62%;width:1px;background:rgba(120,100,70,.18)}
.card .tk span{font-family:var(--f-d);font-style:italic;font-weight:400;font-size:17px;line-height:1.45;
  color:var(--ink);max-width:58%;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.card h3{font-family:var(--f-d);font-weight:600;font-size:20px;line-height:1.25;margin:0 14px 8px}
.card p{font-size:13.5px;color:var(--ink2);font-weight:300;font-style:italic;margin:0 14px}
.card .meta{margin:10px 14px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}

/* de koffiekring — verrassing §4.1: til het kopje op voor een zin uit een verhaal */
.coffee{position:absolute;right:clamp(8px,3vw,30px);bottom:-26px;width:120px;height:120px;z-index:3;
  background:none;border:none;cursor:pointer;padding:0;transition:transform .4s ease;transform:rotate(-12deg)}
.coffee svg{width:100%;height:100%;display:block}
.coffee.lift{transform:rotate(-16deg) translate(-10px,-8px)}
.coffee:focus-visible{outline:2px dashed var(--ink3);outline-offset:4px;border-radius:50%}
.coffee-note{position:absolute;right:clamp(8px,3vw,30px);bottom:-8px;z-index:4;max-width:34ch;
  display:flex;align-items:flex-start;gap:10px;pointer-events:none;
  transform:translateY(-92px) rotate(-1deg);animation:noteIn .35s ease}
@keyframes noteIn{from{opacity:0}}
.coffee-note[hidden]{display:none}
.coffee-note em{font-family:var(--f-d);font-style:italic;font-size:15px;line-height:1.45;color:var(--ink);
  background:var(--vel);box-shadow:var(--velschaduw);border:1px solid var(--velrand);border-radius:3px;padding:10px 14px;max-width:32ch}
.coffee-note .coffee-read{position:absolute;right:12px;bottom:-16px;font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--rust);background:var(--vel);padding:2px 8px;
  border-radius:3px;box-shadow:var(--velschaduw)}

/* ── reader ── */
.reader{position:fixed;inset:0;z-index:100;background:rgba(35,32,27,.45);backdrop-filter:blur(6px);
  display:none;align-items:stretch;justify-content:flex-end}
.reader.open{display:flex}
.r-panel{width:min(760px,100%);background:var(--paper);display:flex;flex-direction:column;
  box-shadow:-30px 0 80px rgba(35,32,27,.3);animation:slideIn .45s cubic-bezier(.16,1,.3,1)}
@keyframes slideIn{from{transform:translateX(60px);opacity:0}to{transform:none;opacity:1}}
.r-top{display:flex;align-items:center;gap:14px;padding:18px clamp(20px,4vw,44px);border-bottom:1px solid var(--line)}
.r-top button{background:none;border:none;font-family:inherit;font-size:13px;color:var(--ink2);cursor:pointer}
.r-top button:hover{color:var(--rust)}
#r-close{margin-left:auto;font-size:20px;line-height:1}
.r-scroll{overflow-y:auto;padding:clamp(28px,5vh,52px) clamp(20px,5vw,60px) 80px}
#r-tag{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--rust);margin-bottom:14px}
#r-titel{font-family:var(--f-d);font-weight:600;font-size:clamp(26px,3.2vw,40px);line-height:1.15;letter-spacing:-.01em;margin-bottom:26px}
#r-body p{font-size:16px;line-height:1.85;color:var(--ink);font-weight:300;margin-bottom:20px;max-width:66ch}
#r-body p:first-of-type::first-letter{font-family:var(--f-d);font-size:3.2em;float:left;line-height:.85;padding:4px 10px 0 0;color:var(--rust)}

/* ── interlude ── */
.interlude{position:relative;height:80vh;min-height:480px;overflow:hidden;display:flex;align-items:flex-end}
.interlude img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.interlude .veil{position:absolute;inset:0;background:linear-gradient(rgba(20,24,26,0) 40%, rgba(20,24,26,.55))}
.interlude blockquote{position:relative;z-index:2;padding:0 clamp(20px,7vw,9vw) clamp(44px,8vh,80px);color:#fff;max-width:900px}
.interlude .q{font-family:var(--f-d);font-weight:300;font-style:italic;font-size:clamp(26px,4vw,52px);line-height:1.25}
.interlude .src{margin-top:16px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;opacity:.8}

/* ── audio ── */
.tracks{border-top:1px solid var(--line);margin-bottom:26px}
.track{display:flex;align-items:center;gap:22px;padding:22px 4px;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);transition:padding-left .3s;cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;font-family:inherit;text-align:left}
.track:hover{padding-left:18px}
.track .play{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--rust);color:var(--rust);flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .3s}
.track:hover .play{background:var(--rust);color:#fff}
.track .tn{font-family:var(--f-d);font-weight:600;font-size:21px;flex:1}
.track .te{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.track .te.gr{color:var(--gum)}
#embedHost:empty{display:none}

/* ── apps: het gestanste instrumentenlabel ── */
.appgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,4vw,60px);align-items:center}
.app-shot{background-color:var(--vel);background-image:var(--papertile);border:1px solid var(--velrand);
  border-radius:3px;box-shadow:var(--velschaduw);padding:clamp(22px,3vw,44px);display:flex;justify-content:center}
.app-shot .phone{width:min(240px,58%);border-radius:26px;box-shadow:0 26px 60px rgba(35,32,27,.22);border:6px solid #2a2622}
.app-tag{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gum);margin-bottom:14px}
.appgrid h3{font-family:var(--f-d);font-weight:600;font-size:clamp(26px,2.8vw,38px);margin-bottom:12px}
.appgrid p{color:var(--ink2);font-weight:300;max-width:46ch;margin-bottom:24px}
.applabel{position:relative;background-color:var(--vel2);background-image:var(--papertile);
  border:1px solid var(--velrand);border-radius:3px 3px 3px 28px;box-shadow:var(--velschaduw);
  padding:clamp(24px,3vw,40px) clamp(22px,3vw,36px) clamp(20px,2.5vw,30px) clamp(28px,3.4vw,44px)}
.applabel::before{content:'';position:absolute;top:14px;left:14px;width:10px;height:10px;border-radius:50%;
  background:var(--paper);border:1px solid rgba(120,100,70,.5);
  box-shadow:inset 0 1px 2px rgba(96,74,40,.25)}
.label-string{position:absolute;top:-26px;left:-22px;width:46px;height:36px;color:var(--ink3)}
.applabel-stamp{position:absolute;top:-12px;right:18px;transform:rotate(-6deg);background:var(--vel);font-size:9.5px}
.applabel p{margin-bottom:0}
/* "hier zat-ie": potlood-kruisjes waar de vlieg eerder gevangen is */
.fly-marks{position:absolute;inset:0;pointer-events:none;z-index:1}
.fly-cross{position:absolute;width:10px;height:10px;color:var(--ink3);pointer-events:auto}
.fly-cross svg{width:100%;height:100%;display:block;stroke:currentColor}
.fly-cross .fc-tip{position:absolute;left:12px;top:-4px;white-space:nowrap;font-size:10px;font-style:italic;
  font-family:var(--f-d);color:var(--ink2);opacity:0;transition:opacity .25s;pointer-events:none}
.fly-cross:hover .fc-tip{opacity:1}
.fly-egg .bp{display:none}
.fly-egg.backpack .bp{display:block}

/* ── over: de journaalpagina ── */
.over{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4vw,64px);align-items:start}
.over .proza{background-color:var(--vel);border:1px solid var(--velrand);border-radius:3px;
  box-shadow:var(--velschaduw);padding:clamp(22px,3vw,38px) clamp(20px,3vw,36px);
  background-image:var(--papertile),
    repeating-linear-gradient(transparent 0 calc(1.85em - 1px), rgba(120,100,70,.12) 0 1.85em);
  background-origin:padding-box, content-box;background-clip:padding-box, content-box;
  font-size:16px;line-height:1.85em}
.over .proza p{font-size:16px;line-height:1.85em;font-weight:300;color:var(--ink);margin-bottom:1.85em;max-width:62ch}
.over .proza p b{font-weight:600}
.journal-date{font-family:var(--f-d);font-style:italic;font-size:14px !important;color:var(--ink2) !important;position:relative}
.pijlers{display:flex;flex-direction:column;gap:14px}
/* marge-notities: licht gedraaide vellen met doodle-iconen */
.pijler{background-color:var(--vel);background-image:var(--papertile);border:1px solid var(--velrand);
  border-radius:3px;box-shadow:var(--velschaduw);padding:20px 22px}
.pijler:nth-child(1){transform:rotate(-.8deg)}
.pijler:nth-child(2){transform:rotate(.6deg)}
.pijler:nth-child(3){transform:rotate(-.4deg)}
.pijler h4{font-family:var(--f-d);font-weight:600;font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pdoodle{width:16px;height:16px;flex:0 0 auto}
.pijler p{font-size:13.5px;color:var(--ink2);font-weight:300}
/* snapshot: fotoafdruk met vier plakboek-hoekjes — het enige plakboek-element van de site */
.snapshot{margin-top:18px;transform:rotate(.6deg)}
.snap-frame{position:relative;display:block}
.snapshot img{border-radius:0}
.pc{position:absolute;width:0;height:0;border-style:solid;z-index:2}
.pc1{top:-1px;left:-1px;border-width:14px 14px 0 0;border-color:rgba(35,32,27,.75) transparent transparent transparent}
.pc2{top:-1px;right:-1px;border-width:0 14px 14px 0;border-color:transparent rgba(35,32,27,.75) transparent transparent}
.pc3{bottom:-1px;left:-1px;border-width:14px 0 0 14px;border-color:transparent transparent transparent rgba(35,32,27,.75)}
.pc4{bottom:-1px;right:-1px;border-width:0 0 14px 14px;border-color:transparent transparent rgba(35,32,27,.75) transparent}
.snapshot figcaption{font-family:var(--f-d);font-style:italic;font-size:12px;color:var(--ink3);padding:10px 2px 0;letter-spacing:.02em}

/* ── contact: de luchtpostenvelop ── */
.contact{text-align:center;padding:clamp(80px,14vh,150px) 0}
.envelope{position:relative;max-width:760px;margin:0 auto;background-color:var(--vel);background-image:var(--papertile);
  border:1px solid var(--velrand);border-radius:3px;box-shadow:var(--velschaduw-zwaar);
  transform:rotate(-.6deg);padding:clamp(54px,7vw,76px) clamp(24px,5vw,64px) clamp(40px,5vw,56px)}
/* de klassieke rood-blauwe airmail-rand: rust + sea vinden hun bestemming */
.envelope::before,.envelope::after{content:'';position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(45deg, #b4532a 0 14px, transparent 14px 28px, #5e8fa3 28px 42px, transparent 42px 56px)}
.envelope::before{top:0}
.envelope::after{bottom:0}
.env-stamp{position:absolute;top:22px;right:22px;width:58px}
.env-stamp>svg:first-child{width:58px;height:auto;display:block;transform:rotate(2deg);filter:none}
.env-postmark{position:absolute;top:-8px;right:-14px;width:100px;height:56px;color:rgba(35,32,27,.45);
  transform:rotate(-7deg)}
.env-postmark .pm-arc{font-size:7px}
.route-x{position:absolute;left:-22px;bottom:2px;width:14px;height:14px;color:var(--rust);
  opacity:0;transition:opacity .6s ease}
.route-x.on{opacity:.85}
.route-x svg{width:100%;height:100%;display:block}
.env-to{position:absolute;top:clamp(26px,4vw,40px);left:clamp(20px,4vw,46px);font-family:var(--f-d);
  font-style:italic;font-size:12px;color:var(--ink3)}
.contact h2{font-family:var(--f-d);font-weight:300;font-size:clamp(34px,4.4vw,58px);letter-spacing:-.015em;margin-bottom:14px}
.contact h2 em{font-style:italic;color:var(--rust)}
.contact p{color:var(--ink2);font-weight:300;max-width:44ch;margin:0 auto 34px}
.socials{margin-top:22px;display:flex;gap:18px;justify-content:center;align-items:baseline;font-size:13px;flex-wrap:wrap}
.env-from{font-family:var(--f-d);font-style:italic;font-size:12px;color:var(--ink3)}
.socials a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line)}
.socials a:hover{color:var(--rust);border-color:var(--rust)}
.foot{padding:30px;text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:7px;align-items:center}
.foot-pm{width:16px;height:16px;color:var(--ink3)}
.foot-pm svg{width:100%;height:100%;display:block}
.foot-colofon{font-size:10px;letter-spacing:.08em;text-transform:none;font-style:italic;opacity:.85}

/* ── routelijn: gestippeld plan + lijn die zich tekent op scroll ── */
#routeLine{position:absolute;top:0;left:0;z-index:1;pointer-events:none}
#routeLine .rl-plan{fill:none;stroke:var(--ink3);stroke-width:1.4;stroke-dasharray:1.6 7;stroke-linecap:round;opacity:.45}
#routeLine .rl-drawn{fill:none;stroke:var(--rust);stroke-width:2;stroke-linecap:round;opacity:.8}
/* doodles onderweg: faden in zodra de getekende lijn hun punt passeert */
.rl-doodle{color:var(--ink3);opacity:0;transition:opacity .6s ease}
.rl-doodle.on{opacity:.75}
.rl-doodle path,.rl-doodle circle,.rl-doodle rect,.rl-doodle ellipse{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
/* de passaatwind: een papieren vliegtuigje langs de route (verdwijnt bij scroll) */
.paper-plane{position:absolute;top:0;left:0;z-index:5;width:26px;height:26px;color:var(--ink2);
  offset-rotate:auto 45deg}
.paper-plane svg{width:100%;height:100%;display:block}
.paper-plane:hover,.paper-plane:focus-visible{color:var(--rust)}

/* ── stats-band: de liniaal van het atlasblad ── */
.stats{position:relative;background-color:var(--atlas);background-image:var(--papertile);
  border-top:1px solid rgba(120,100,70,.18);border-bottom:1px solid rgba(120,100,70,.18);
  padding:clamp(44px,8vh,80px) 0 clamp(30px,5vh,48px)}
.stats::before,.stats::after{content:'';position:absolute;left:0;right:0;height:8px;pointer-events:none;
  background:repeating-linear-gradient(90deg, rgba(110,101,90,.4) 0 1px, transparent 1px 14px)}
.stats::before{top:6px}
.stats::after{bottom:6px}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.st{text-align:center}
.st b{display:block;font-family:var(--f-d);font-weight:400;font-size:clamp(34px,4.4vw,62px);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
/* potlood-onderstreepje onder elk getal */
.st b::after{content:'';display:block;width:28px;height:6px;margin:2px auto 0;
  border-bottom:1.6px solid var(--ink3);border-radius:0 0 55% 45%/0 0 6px 4px;transform:rotate(-1.4deg)}
.st span{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.stats-note{text-align:center;margin-top:26px;font-size:12px;color:var(--ink3);font-style:italic}
@media (max-width:760px){ .stats-in{grid-template-columns:1fr 1fr;gap:30px 14px} }

/* ── fotostrip: mini-afdrukken op tafel ── */
.strip{padding:clamp(50px,8vh,90px) 0;overflow:hidden}
.strip-label{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);margin-bottom:20px}
.strip-row{display:flex;gap:18px;padding:6px clamp(20px,4.5vw,52px) 12px}
.print-mini{padding:6px 6px 10px;flex:0 0 auto;transition:transform .4s ease}
.print-mini img{height:clamp(160px,24vh,250px);width:auto;border-radius:0}
.strip-row .print-mini:nth-child(1){transform:rotate(-1deg)}
.strip-row .print-mini:nth-child(2){transform:rotate(.7deg)}
.strip-row .print-mini:nth-child(3){transform:rotate(-.4deg)}
.strip-row .print-mini:nth-child(4){transform:rotate(1.1deg)}
.strip-row .print-mini:nth-child(5){transform:rotate(-.8deg)}
.strip-row .print-mini:hover{transform:rotate(0) translateY(-6px)}
@media (max-width:760px){ .strip-row{overflow-x:auto;scrollbar-width:none} }

/* ── muziek: drie 45-toeren-singlehoezen ── */
.bands{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:24px}
.band{background-color:var(--vel);background-image:var(--papertile);border:1px solid var(--velrand);
  border-radius:3px;box-shadow:var(--velschaduw);padding:18px;display:flex;flex-direction:column;gap:12px}
.sleeve-wrap{position:relative;aspect-ratio:1/1;perspective:900px}
/* de plaat: steekt in rust 10px uit — je ziet zonder hover dat er iets in zit */
.vinyl{position:absolute;top:50%;right:0;width:88%;aspect-ratio:1/1;z-index:0;
  transform:translate(10px,-50%);transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.vinyl-disc{width:100%;height:100%}
.vinyl-disc svg{width:100%;height:100%;display:block}
.band:hover .vinyl,.band:focus-within .vinyl{transform:translate(30px,-50%)}
.band:hover .vinyl-disc,.band:focus-within .vinyl-disc{animation:vinylspin 5s linear infinite}
.vinyl-ghost,.band:hover .vinyl-ghost{transform:translate(0,-50%)}        /* er ís nog geen plaat */
.b-solo:hover .vinyl-disc{animation:none}
@keyframes vinylspin{to{transform:rotate(360deg)}}
/* de hoes, met die-cut gat waardoor het label zichtbaar is */
.sleeve{position:relative;width:100%;height:100%;z-index:1;transform-style:preserve-3d;
  user-select:none;-webkit-user-select:none;transition:transform .6s cubic-bezier(.3,1.2,.4,1)}
.sleeve.flipped{transform:rotateY(180deg)}
.sleeve-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:1px solid var(--velrand);border-radius:2px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;padding:26px 18px;text-align:center}
.sleeve-front{background:radial-gradient(circle at 58% 50%, transparent 0 35px, var(--vel2) 36px)}
.sleeve-back{background:var(--vel2);transform:rotateY(180deg);justify-content:center;gap:10px}
.sleeve-back em{font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3);font-style:normal}
.sleeve-back p{font-family:var(--f-d);font-style:italic;font-size:16px;line-height:1.6;color:var(--ink)}
.sleeve-back .tally{font-size:11px;color:var(--ink2);display:flex;flex-direction:column;align-items:center;gap:4px}
.sleeve-back .tally svg{width:56px;height:13px;color:var(--ink3)}
.band .b-head{display:flex;flex-direction:column;align-items:center;gap:10px}
.band .b-head h3{font-family:var(--f-d);font-weight:600;font-size:24px;line-height:1.15}
.band .b-era{font-size:10px}
.band .b-era.gr{color:var(--gum);border:none;transform:none;letter-spacing:.16em;padding:0;font-size:11px;text-transform:uppercase}
.flip-hint{position:absolute;bottom:8px;left:0;right:0;font-size:9.5px;font-style:italic;color:var(--ink3);
  opacity:0;transition:opacity .3s}
.band:hover .flip-hint,.band:focus-within .flip-hint{opacity:.85}
/* solowerk: hoes in potlood — de plaat bestaat nog niet, dat is de grap */
.b-solo .sleeve-face{border-style:dashed;border-width:1.4px}
/* ook de potloodhoes heeft het gat — je ziet de gestippelde plaat die er nog niet is */
.b-solo .sleeve-front{background:radial-gradient(circle at 58% 50%, transparent 0 35px, var(--vel) 36px)}
.solo-stamp{position:absolute;top:46%;left:50%;font-size:12px;padding:5px 14px;
  transform:translate(-50%,-50%) rotate(-6deg);color:#a34b26} /* vol dekkend — de rotatie draagt het stempelkarakter */
.band p{font-size:13.5px;color:var(--ink2);font-weight:300;flex:1}
.b-play{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-family:inherit;font-size:13px;font-weight:600;
  color:var(--rust);background:none;border:none;cursor:pointer;padding:4px 0}
/* naald-knop: het ▶-rondje krijgt een toonarm-streepje */
.b-play .play{position:relative;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--rust);display:flex;align-items:center;justify-content:center;font-size:10px;transition:all .3s}
.b-play .play::after{content:'';position:absolute;top:-6px;right:-7px;width:12px;height:1.5px;
  background:currentColor;transform:rotate(45deg);transform-origin:left center;transition:transform .3s}
.b-play:hover .play{background:var(--rust);color:#fff}
.b-play:hover .play::after{transform:rotate(34deg)}
.b-solo{border-style:dashed}
@media (max-width:860px){
  .bands{grid-template-columns:1fr}
  .sleeve-wrap{max-width:320px;width:100%;margin:0 auto}
  .vinyl{transform:translate(16px,-50%)}            /* mobiel: plaat steekt verder uit, geen hover nodig */
}

/* ── audioproducties: het cassette-inlegkaartje ── */
.productie{display:grid;grid-template-columns:1.4fr .6fr;gap:clamp(24px,4vw,56px);align-items:center;
  background-color:var(--vel);background-image:var(--papertile);border:1px solid var(--velrand);
  border-radius:3px;box-shadow:var(--velschaduw);padding:clamp(26px,4vw,48px);padding-top:0}
.inlay-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px;
  min-height:26px;padding:12px 0 10px;border-bottom:1px solid var(--velrand);margin-bottom:clamp(14px,2vw,22px)}
.inlay-take{font-family:var(--f-d);font-style:italic;font-size:13px;color:var(--ink3)}
.productie h3{font-family:var(--f-d);font-weight:600;font-size:clamp(24px,2.6vw,34px);margin-bottom:10px}
.productie p{color:var(--ink2);font-weight:300;max-width:56ch}
.productie audio{accent-color:var(--rust)}
.prod-note{margin-top:14px;font-size:12px;color:var(--ink3);font-style:italic}
.prod-mark{display:flex;justify-content:center}
.cassette{width:min(230px,100%);display:block;filter:none}
.reel-spokes{transform-box:fill-box;transform-origin:center}
.cassette.spinning .reel-spokes{animation:reelspin 2.4s linear infinite}
@keyframes reelspin{to{transform:rotate(360deg)}}
.cas-play{display:none}
@media (max-width:760px){
  .productie{grid-template-columns:1fr}
  .prod-mark{order:-1;margin-top:6px}                 /* cassette boven de tekst, niet meer verborgen */
  .inlay-head{order:-2}
  .cassette{width:180px}
}

/* ── de vlieg ── */
.fly-stage{position:relative;min-height:300px;overflow:hidden}
.fly-egg{position:absolute;top:0;left:0;color:var(--ink);text-decoration:none;display:block;
  transition:transform .55s cubic-bezier(.3,1.4,.4,1)}
.fly-egg .wl,.fly-egg .wr{transform-box:fill-box;animation:flap 1.6s ease-in-out infinite alternate}
.fly-egg .wl{transform-origin:85% 50%}
.fly-egg .wr{transform-origin:15% 50%;animation-name:flapR}
@keyframes flap{to{transform:rotate(-14deg) scaleY(.6)}}
@keyframes flapR{to{transform:rotate(14deg) scaleY(.6)}}
.fly-egg.buzz .wl,.fly-egg.buzz .wr{animation-duration:.12s}
.fly-egg.caught{color:var(--rust)}
.fly-egg.caught .wl,.fly-egg.caught .wr{animation-duration:.3s}
.fly-hint{position:absolute;bottom:14px;left:0;right:0;text-align:center;font-size:11.5px;color:var(--ink3);font-style:italic;pointer-events:none}

/* reveals alleen verbergen als JS draait — zonder JS blijft alles leesbaar
   (sneller dan voorheen: ±0,4s, met lichte stagger via JS — oud reviewpunt) */
html.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .4s ease,transform .45s cubic-bezier(.16,1,.3,1)}
html.js .reveal.in{opacity:1;transform:none}

@media (max-width:920px){
  .hero{grid-template-columns:1fr;padding-top:104px;gap:32px}
  /* atlas mobiel: blad volbreed (~55vh), stops als swipebare kaartjes-strook */
  .atlas-grid{grid-template-columns:1fr;grid-template-areas:'stage' 'playback' 'margin';row-gap:14px}
  .atl-frame,.atl-playback{width:min(100%,58svh)}
  .atl-compass{width:42px;height:42px}
  .atl-zoom button{width:38px;height:38px}
  .atlas-margin{border-left:none;padding-left:0;margin-top:14px}
  .trips{flex-direction:row;flex-wrap:wrap;gap:2px 18px;margin-bottom:12px}
  .trip{width:auto;border-bottom:none;padding:6px 0}
  .trip .c{margin-left:2px}
  .stops{flex-direction:row;overflow-x:auto;overflow-y:hidden;max-height:none;gap:10px;padding:4px 2px 12px}
  .stop{flex:0 0 188px;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;
    border:1px solid rgba(120,100,70,.25);border-radius:12px;background:rgba(255,253,246,.72)}
  .stop .s-b b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .pb-card{left:0;max-width:78vw}
  .pb-read b{max-width:40%}
  .cards{grid-template-columns:1fr;gap:34px}
  .appgrid,.over{grid-template-columns:1fr}
  .nav-links a:not(.nav-cta){display:none}
  /* artefacten mobiel: rust, rotaties gehalveerd */
  .hero-print{transform:rotate(.6deg)}
  .cards .card:nth-child(3n+1){rotate:-.7deg}
  .cards .card:nth-child(3n+2){rotate:.4deg}
  .cards .card:nth-child(3n){rotate:-.25deg}
  .card .tk::after{display:none}                /* scheidslijn op de achterkant weg */
  .card .tk span{max-width:100%}
  .seal{width:28px;height:28px}
  .seal-sm{width:22px;height:22px}
  .postmark{width:46px;height:46px}
  .envelope{transform:none;margin:0 2px}
  .env-stamp{width:48px}
  .env-stamp>svg:first-child{width:48px}
  .applabel{margin-top:18px}
  .label-string{display:none}
  .coffee{width:96px;height:96px;bottom:-18px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
  /* rustige statische variant: niets draait of flipt, alle inhoud blijft */
  .band:hover .vinyl-disc,.band:focus-within .vinyl-disc{animation:none !important}
  .cassette.spinning .reel-spokes{animation:none !important}
  .cassette.spinning .cas-play{display:block}   /* in plaats van draaiende spoelen: '▸ speelt' */
  .rl-doodle{transition:none}
  .paper-plane{display:none}
}