/* Sit Down Club · ronde 7 · de kast.
   Van boven naar beneden: de versterker (vaste kop, messing frontplaat tussen notenhouten wangen),
   daaronder het luidsprekerdoek met alles wat erop geprikt, gespeld of genaaid is, en onderaan de plint.
   Drie letters: Bagel Fat One (koppen, knipsels), Michroma (gravure, labels), Newsreader (lopende tekst). */

:root{
  --zwart:#0b0908; --muur:#0c0907; --creme:#e6d8bb; --gedempt:#b5a383; --messing:#b89a5e; --amber:#d9a441;
  --rood2:#9b2c22; --groen:#1e3a2a; --groen2:#4a7a55;
  --papier:#ece6d6; --inkt:#1d1712; --inkt2:#4b4034; --lijn:rgba(88,120,150,.34); --kantlijn:rgba(196,80,66,.72);
  --lamp:#ffae42;
  /* het doek is licht (Marshall-achtig), dus wat er los op staat is donkere inkt; in de stand Loud is het doek donker
     en wordt dit licht (zie de standen hieronder). Sinds ronde 5 staat er bijna geen losse tekst meer op het doek:
     koppen zijn opgezette letters, de rest staat op papier of op een label. */
  --doek-inkt:#120c08; --doek-inkt2:#120c08; --doek-zacht:#1a1109;
  --f-script:"Script","Brush Script MT",cursive;
  --f-marker:"Marker","Comic Sans MS",cursive;
  --f-hand:"Hand","Segoe Print",cursive;
  --f-kop:"Bagel","Arial Rounded MT Bold",sans-serif;
  --f-gravure:"Michroma","Eurostile",sans-serif;
  --f-tekst:"Newsreader",Georgia,serif;
  --uit:cubic-bezier(.22,1,.36,1);
  --rand:7px;               /* dikte van het notenhout */
  --kop-hoogte:124px;       /* de hoogte van de versterker; kop.js meet de echte maat en zet hem op <html> */
  --doek-pad:18px;
  color-scheme:dark;
}
@media (min-width:900px){
  :root{--rand:28px;--kop-hoogte:240px;--doek-pad:56px}
}

/* ---------- kleurstanden (zelfde rollen als ronde 2, dus het contrast blijft kloppen) ----------
   --i-vlak  vlak met donkere tekst   --i-diep  vlak met lichte tekst   --i-tekst accent op licht papier
   --i-licht accent op donker doek    --i-tweede tweede vlak, lichte tekst   --i-gloed lampjes, nooit tekst */
:root,[data-stand="cover"]{
  --i-vlak:var(--hoes-vlak,#d29a4a);--i-diep:var(--hoes-diep,#5a3a1c);--i-tekst:var(--hoes-tekst,#7a4a1e);
  --i-licht:var(--hoes-licht,#e6bf86);--i-tweede:var(--hoes-tweede,#4d5e3c);--i-gloed:var(--hoes-gloed,#e6bf86);
}
[data-stand="club"]{
  --i-vlak:#e6d8bb;--i-diep:#9b2c22;--i-tekst:#8a2a1f;--i-licht:#e9c98a;--i-tweede:#1e3a2a;--i-gloed:#ffb347;
  --i-label:#1e3a2a; /* het Dymo-label van een kop is in Club groen */
}
/* Loud (ronde 5, heette Zine): hard en fel. Zuurgeel, magenta en een elektrisch blauw, en het doek zelf gaat op donker
   (zie .geweven), zodat de opgezette letters zuurgeel oplichten in plaats van wit. Club blijft de rustige stand.
   Ronde 6: een vierde kleur erbij, fluor-oranje (#ff6a1a, met donkere tekst), omdat vier knoppen naast elkaar vier
   kleuren nodig hebben. Aanname van ronde 6, niet door Arjan gekozen. */
[data-stand="loud"]{
  --i-vlak:#f2ff3a;--i-diep:#c8004f;--i-tekst:#b3004a;--i-licht:#f2ff3a;--i-tweede:#1a3cff;--i-gloed:#ff2d95;
  --loud-geel:#f2ff3a;--loud-magenta:#c8004f;--loud-blauw:#1a3cff;--loud-oranje:#ff6a1a;--loud-inkt:#14100c;
  --i-label:#c8004f;
  --doek-inkt:#fbf3e4;--doek-inkt2:#e9dcc4;--doek-zacht:#f2e6cc;
  --opgezet:#f2ff3a;--opgezet-rand:#6b7200;--opgezet-zij1:#c9d42a;--opgezet-zij2:#8d9410;
}
/* standaardwaarden op html (lagere specificiteit), zodat de stand ze kan overschrijven */
html{--i-label:var(--hoes-diep,#5a3a1c);--opgezet:#fdfcf7;--opgezet-rand:#8f887b;--opgezet-zij1:#d9d3c7;--opgezet-zij2:#a39c8f}

/* ---------- materialen als herbruikbare lagen ---------- */
:root{
  /* notenhout, nerf van boven naar beneden (wangen) en van links naar rechts (bovenrand, plint) */
  --nerf-staand:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='520'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.35 .006' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .01 0 0 0 2.2 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --nerf-liggend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .35' numOctaves='4' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .06 0 0 0 0 .03 0 0 0 0 .01 0 0 0 2.2 -.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --noten:linear-gradient(90deg,#3a2314,#5b3a21 22%,#4a2d18 48%,#62402a 74%,#3b2415);
  --noten-liggend:linear-gradient(180deg,#5f3e27,#4a2d19 45%,#3a2314);
  /* stof en verkleuring op het doek, grootschalig: één groot vel ruis (1400 × 4400), dus binnen de kast geen naad van
     links naar rechts meer (die vouwlijn op 75 % in ronde 4 was de naad van een tegel van 900 px) */
  --sleet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='4400'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .0016' numOctaves='4' seed='19' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .1 0 0 0 .55 -.22'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  /* papiervezel voor kaarten en vellen */
  --vezel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .22 0 0 0 0 .1 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* korrel over het geheel (vast, niet meescrollend) */
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* verfrommeld papier dat weer is gladgestreken: reliëf uit ruis, van links boven belicht */
  --kreuk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='k' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='5' seed='21' stitchTiles='stitch'/%3E%3CfeDiffuseLighting surfaceScale='3.2' diffuseConstant='1' lighting-color='%23fff'%3E%3CfeDistantLight azimuth='225' elevation='52'/%3E%3C/feDiffuseLighting%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='.36' intercept='.68'/%3E%3CfeFuncG type='linear' slope='.36' intercept='.68'/%3E%3CfeFuncB type='linear' slope='.36' intercept='.68'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  /* spikkels voor gestempelde of gespoten letters */
  --spikkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.7 1.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(var(--kop-hoogte) + 10px);-webkit-text-size-adjust:100%;background:var(--muur)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;color:var(--creme);font-family:var(--f-tekst);font-size:17px;line-height:1.5;
  background:radial-gradient(ellipse 80% 50% at 50% 0,#1a120d,transparent 70%),var(--muur);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;background-image:var(--korrel);opacity:.035;mix-blend-mode:overlay}
::selection{background:var(--i-diep);color:#fff4df}
img{max-width:100%;height:auto}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
:focus-visible{outline:3px solid #e2c585;outline-offset:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.overslaan{position:absolute;left:12px;top:-60px;z-index:100;background:var(--creme);color:var(--inkt);padding:10px 14px;font-family:var(--f-gravure);font-size:12px}
.overslaan:focus{top:12px}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}

/* ======================================================================
   DE KOP (ronde 7; onderdelen ronde 8; Mode-knop, diepte en indeling ronde 9): de versterker, een vaste kop
   Van links naar rechts: het naamplaatje met de Tune-knop eronder, de twee VU-meters met de band eronder, en rechts
   LIGHTS en MENU met de Mode-knop eronder. De onderdelen zelf zijn SVG (onderdelen.js, ontworpen in het
   Remotion-project naar een Pioneer SA-8100); hier staan hun maten, hun plek en hun beweging. De kop meet zichzelf
   (kop.js) en zet --kop-hoogte op <html>; de pagina eronder gebruikt die maat.
   Telefoon: 124 px hoog, meters 2 × 108 (was 112: de Mode-knop is breder dan de gleuf), Tune en Mode 38 (was 44:
   de streepjes van Tune botsten met het naamplaatje), doppen 24, band 24. Mode staat op de plek van de tuimel, in
   het midden van de meterhoogte, met MODE eronder; geen namen.
   Laptop (vanaf 900 px): 240 px hoog, meters 250 × 167, Tune en Mode 80 (was 74), doppen 36, band 28. Tune staat
   links van de meters (onderkant gelijk met de band, 40 px van de band), Mode gespiegeld rechts ervan, met de namen
   Cover, Club en Loud bij de streepjes. LIGHTS en MENU staan naast elkaar boven de Mode-knop, rechts uitgelijnd,
   precies zo hoog als het naamplaatje (bovenkant knop = bovenkant plaatje, onderkant gravure = onderkant plaatje).
   RONDE 10 (bevindingen van Arjan, 1 oktober): de twee zijkolommen zijn op elk scherm even breed, zodat de meters en de
   band precies in het midden van de frontplaat staan. Laptop: het naamplaatje staat links tegen de rand van de plaat
   (zoals op de Pioneer), LIGHTS en MENU zijn de rechthoekige drukknoppen en staan gespiegeld rechts tegen de rand; het
   midden van de Tune-knop en van de Mode-knop staat even ver van de meters (--knop-afstand, 104 px), ver genoeg dat het
   woord Cover vrij blijft van de rechter meter. Telefoon: LIGHTS en MENU naast elkaar rechtsboven, de Mode-knop eronder
   in het midden van de kolom, het spiegelbeeld van naamplaatje en Tune links.
   RONDE 11 (bevindingen van Arjan, 1 oktober, op zijn iPhone): het naamplaatje linksboven en de MENU-knop rechtsboven
   zaten onder de schroeven in de hoeken van de plaat. Op de telefoon is het naamplaatje nu een rond medaillon (48 px,
   zwart email in een messing ring, de drie woorden onder elkaar) in het midden van de kolom, zodat de hoek met de schroef
   vrij blijft; LIGHTS en MENU staan 8 px lager, onder de schroef, met de tikvlakken 4 px omhoog zodat ze de Mode-knop niet
   raken. De laptop is niet veranderd (de zijpadding is daar 26 px, dus daar zat niets onder een schroef).
   ====================================================================== */
.kop{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:60;
  width:100%;max-width:1280px;
  padding:calc(5px + env(safe-area-inset-top,0px)) var(--rand) 0;
  background:var(--nerf-liggend) 0 0/520px 240px,var(--noten-liggend);
  /* ronde 9: een strook massief notenhout boven de kop (de eerste schaduw, zonder vervaging): op de telefoon kon vlak
     boven de versterker een strookje van een paar pixels ontstaan waar de inhoud doorheen schoof; nu zit daar hout */
  box-shadow:0 -60px 0 0 #4a2d19,0 14px 26px -12px rgba(0,0,0,.85)}
/* notenhouten wangen: de nerf staat hier rechtop */
.kop::before,.kop::after{content:"";position:absolute;top:-60px;bottom:0;width:var(--rand);
  background:var(--nerf-staand) 0 0/240px 520px,var(--noten);box-shadow:inset -2px 0 3px rgba(0,0,0,.45)}
.kop::before{left:0}.kop::after{right:0;box-shadow:inset 2px 0 3px rgba(0,0,0,.45)}

/* de frontplaat: een raster van twee rijen. Rij 1 is zo hoog als de meters; de knoppen rekken mee. */
.plaat{position:relative;display:grid;align-items:start;column-gap:5px;row-gap:4px;padding:7px 7px 8px; /* ronde 10: 7 px zijpadding (was 9) en kolomruimte 5 (was 6), zodat de meters zo min mogelijk inleveren */
  --zij:72px; /* ronde 10: de twee zijkolommen even breed, dan staan de meters en de band in het midden van de plaat */
  grid-template-columns:var(--zij) minmax(0,1fr) var(--zij);
  grid-template-rows:auto auto;
  grid-template-areas:"links meters rechts" "links band rechts";
  color:#2a1f11}
/* OPEN PUNT (Arjan, telefoon): de band even breed als de meters (nu), of doorlopen tot onder de Mode-knop.
   Doorlopen = de regel hieronder aanzetten (één regel; op de laptop staat de eigen regel in het mediablok). */
/* .plaat{grid-template-areas:"links meters rechts" "links band band"} */
.messing{color:#2a1f11;
  /* geborsteld messing, met plekken waar vingers en jaren het dof hebben gemaakt */
  background:
    radial-gradient(ellipse 22% 70% at 8% 92%,rgba(58,38,12,.34),transparent 70%),
    radial-gradient(ellipse 18% 50% at 88% 12%,rgba(72,48,14,.26),transparent 70%),
    radial-gradient(ellipse 35% 90% at 55% 110%,rgba(40,70,40,.10),transparent 70%),
    radial-gradient(ellipse 60% 40% at 30% 0,rgba(255,244,210,.22),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,246,214,.07) 0 1px,rgba(60,40,10,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#d2b67c,#bd9e62 38%,#ad8e54 70%,#9d7f47);
  box-shadow:inset 0 1px 0 rgba(255,246,214,.55),inset 0 -2px 0 rgba(40,26,8,.5),inset 0 -6px 10px -6px rgba(0,0,0,.4)}
/* slijtage: krasjes en een dunne vuilrand langs de wangen */
.messing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--korrel) 0 0/180px 180px;opacity:.18;mix-blend-mode:multiply}
.messing::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 6px 0 8px -6px rgba(30,18,4,.6),inset -6px 0 8px -6px rgba(30,18,4,.6)}
.schroef{position:absolute;width:9px;height:9px;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 38% 32%,#f0dcae,#9b804f 55%,#5a4526);
  box-shadow:0 1px 0 rgba(255,244,210,.4),inset 0 0 0 .5px rgba(0,0,0,.5)}
.schroef::after{content:"";position:absolute;left:1px;right:1px;top:3.8px;height:1.4px;background:#3a2a14;transform:rotate(var(--s,30deg))}

/* gravure: donker in het messing gesneden, met een lichtrandje eronder */
.gravure{font-family:var(--f-gravure);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#1f170c;
  text-shadow:0 1px 0 rgba(255,244,212,.55)}

/* ---------- links: het naamplaatje met de Tune-knop eronder ---------- */
.links{grid-area:links;display:flex;flex-direction:column;align-items:center;gap:4px;align-self:stretch;justify-self:stretch} /* ronde 10: de kolom is 70 breed, Tune staat in het midden ervan (de 3 px voor de schroef uit ronde 8 is niet meer nodig) */
/* naamplaatje: zwart geanodiseerd met messing letters. Op de telefoon een staand plaatje, elk woord op een eigen
   regel, zo hoog als de ruimte boven de Tune-knop; op de laptop liggend met het modelnummer eronder. */
.naam{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;flex:1 1 auto;width:100%;gap:3px;padding:5px 7px;text-decoration:none;
  background:linear-gradient(180deg,#221b15,#0f0c0a);border-radius:2px;
  box-shadow:0 0 0 1px #6d5733,0 0 0 2px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,240,200,.1)}
.naam b{font-family:var(--f-gravure);font-weight:400;font-size:8px;letter-spacing:.06em;line-height:1.35;color:#dcc28a;width:min-content}
.naam small{display:none;font-family:var(--f-gravure);font-size:11px;letter-spacing:.1em;color:#a28c63;white-space:nowrap}
.naam:focus-visible{outline:2px solid #1f170c;outline-offset:3px}
/* ronde 8/9: op de telefoon is het naamplaatje 37 tot 43 px hoog (de meters zijn 70 tot 71 hoog en de Tune-knop houdt
   5 px vrij voor zijn schaal); een onzichtbaar tikvlak van 4 px boven en onder maakt er minstens 45 van */
.naam{position:relative}
.naam::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}

/* de Tune-knop: de SVG uit onderdelen.js; de groep .tune-draai draait mee met het scrollen (--draai) */
.tune{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:auto;padding-top:5px} /* ronde 9: 5 px extra boven de knop, zodat de streepjes van de schaal vrij blijven van het naamplaatje */
.afstemknop{position:relative;width:38px;height:38px;border-radius:50%;cursor:grab;touch-action:none} /* ronde 9: 38 (was 44) */
.afstemknop::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* tikvlak 44 × 44 */
.afstemknop .tune-svg{display:block;width:100%;height:100%;overflow:visible}
.tune-draai{transform-origin:50px 50px;transform:rotate(var(--draai,-120deg))}
.afstemknop:focus-visible{outline:3px solid #2a1f11;outline-offset:4px}
.afstemknop.vast{cursor:grabbing}
.tune .gravure{font-size:7px;letter-spacing:.2em;line-height:1} /* ronde 8: één maat kleiner */

/* ---------- de VU-meters (vu.js, ongewijzigd) ---------- */
.meters{grid-area:meters;display:flex;gap:5px;align-items:center;min-width:0;align-self:start}
.meters .vu{flex:1 1 0;min-width:0}
.vu{position:relative;display:block;aspect-ratio:3/2;border-radius:4px;isolation:isolate;
  box-shadow:0 0 0 1px rgba(20,12,4,.7),0 2px 0 rgba(255,244,212,.35),0 8px 14px -8px rgba(0,0,0,.8)}
.vu-laag{position:absolute;inset:0;width:100%;height:100%;display:block}
.vu-lamp,.vu-gloed,.vu-donker{inset:8.75% 5.84%;width:auto;height:auto;pointer-events:none}
/* het licht achter de plaat kleurt het papier (vermenigvuldigen) en maakt het midden helder (bleken) */
.vu-lamp{mix-blend-mode:multiply;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse 85% 100% at 50% 100%,color-mix(in srgb,var(--lamp) 55%,#fff) ,color-mix(in srgb,var(--lamp) 85%,#7a5a2a) 50%,color-mix(in srgb,var(--lamp) 45%,#1d1206) 100%);
  transition:background .6s}
.vu-gloed{mix-blend-mode:screen;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse 50% 62% at 50% 96%,color-mix(in srgb,var(--lamp) 42%,transparent),transparent 72%);
  transition:background .6s}
.vu-donker{background:#140d07;mix-blend-mode:multiply;opacity:.85;will-change:opacity}
.vu-naald{will-change:transform;transform:rotate(-49deg)}

/* ---------- de band onder de meters: donker glas (SVG), de rode naald en de uitlezing (HTML) ---------- */
.band{grid-area:band;position:relative;height:24px;min-width:0;align-self:start;border-radius:3px;overflow:hidden;
  box-shadow:0 0 0 1px #5d482a,0 0 0 3px rgba(40,26,8,.35),0 1px 0 3px rgba(255,244,212,.25)}
.band .band-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* de rode naald: een slede zo breed als de baan, die mee schuift met de scrolpositie; de baan stopt vóór de uitlezing */
.naald-baan{position:absolute;left:18px;right:50%;top:0;bottom:0;pointer-events:none;z-index:4}
.naald-slede{position:absolute;inset:0;transform:translateX(var(--p,4%));will-change:transform}
.naald{position:absolute;left:-1px;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,#ff5f40,#d2311d 60%,#9c2413);
  box-shadow:0 0 6px rgba(255,80,50,.75),0 0 1px rgba(255,200,180,.9)}
.naald::before{content:"";position:absolute;left:-3px;right:-3px;top:0;height:4px;background:#7e1c10}
/* de uitlezing: de naam van het onderdeel in beeld, op een donkere veeg. Ronde 9: de veeg is onder de letters dicht,
   zodat de streepjes van de schaal niet meer door de tekst lopen; alleen de aanloop links is doorzichtig. */
.uitlees{position:absolute;right:0;top:0;bottom:0;z-index:6;display:flex;align-items:center;max-width:60%;padding:0 10px 0 18px;pointer-events:none;
  font-family:var(--f-gravure);font-size:8px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:#fff4d8;text-shadow:0 0 8px rgba(255,180,80,.75);
  background:linear-gradient(90deg,rgba(23,38,27,0),rgba(23,38,27,.97) 14px,#101d14 20px,#0c160f)}

/* ---------- LIGHTS en MENU: twee gelijke rechthoekige drukknoppen (SVG; ronde 10, tot ronde 9 rond). Telefoon: naast elkaar
   rechtsboven in de rechterkolom, elk met de gravure eronder; de Mode-knop staat in dezelfde kolom onderaan. ---------- */
.knoppen{grid-area:rechts;display:flex;flex-direction:row;justify-content:center;align-items:flex-start;align-self:start;justify-self:center;gap:6px;width:auto}
.drukknop{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;width:33px;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;font-family:var(--f-gravure);font-size:6.5px;letter-spacing:.04em;text-transform:uppercase;line-height:1;color:#1f170c;white-space:nowrap; /* ronde 10: 6,5 px en .04em, zodat LIGHTS (35 px) maar net breder is dan zijn knop (33) en er 6 px lucht blijft tot MENU */
  text-decoration:none;text-shadow:0 1px 0 rgba(255,244,212,.55)}
.drukknop::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* tikvlak 44 × 44 */
/* telefoon: de twee tikvlakken van 44 zouden elkaar in het midden 7 px overlappen; LIGHTS schuift zijn vlak 5 px naar links,
   MENU 5 px naar rechts, dan raken ze elkaar net niet en blijft elk 44 × 44 */
.lampknop::before{transform:translate(calc(-50% - 5px),-50%)}
.menu-knop::before{transform:translate(calc(-50% + 5px),-50%)}
.drukknop .dop{display:block;width:33px;height:22px}
.dop-svg{display:block;width:100%;height:100%;overflow:visible}
.dop-recht{width:auto;aspect-ratio:3/2}
.dop-kap{transition:transform .08s}
.dop-schaduw{transition:opacity .08s}
.drukknop:active .dop-kap,.menu-knop[aria-expanded="true"] .dop-kap{transform:translateY(2px)}
.drukknop:active .dop-schaduw,.menu-knop[aria-expanded="true"] .dop-schaduw{opacity:.55}
.drukknop:focus-visible{outline:2px solid #1f170c;outline-offset:2px}

/* ---------- de Mode-knop (ronde 9): dezelfde draaiknop als Tune, met drie streepjes; op de laptop de namen ernaast ----------
   De stand draait de knop (--mdraai op .mode-draai) met dezelfde korte veerbeweging als de tuimel had. */
.mode{grid-area:rechts;position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;align-self:end;justify-self:center;width:38px} /* ronde 10: onder LIGHTS en MENU, onderkant gelijk met de band, het spiegelbeeld van Tune */
.modevak{position:relative;width:38px;height:38px}
.modeknop{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:50%;background:none;cursor:grab;touch-action:none;font:inherit}
.modeknop::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)} /* tikvlak 44 × 44 */
.modeknop .tune-svg{display:block;width:100%;height:100%;overflow:visible}
.modeknop.vast{cursor:grabbing}
.modeknop:focus-visible{outline:3px solid #2a1f11;outline-offset:4px}
.mode .gravure{font-size:7px;letter-spacing:.2em;line-height:1}
.mode-draai{transform-origin:50px 50px;transform:rotate(var(--mdraai,0deg));transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.mode[data-stand="cover"]{--mdraai:-50deg}
.mode[data-stand="club"]{--mdraai:0deg}
.mode[data-stand="loud"]{--mdraai:50deg}
/* de namen: op de telefoon niet (en niet bereikbaar), op de laptop elk bij zijn streepje */
.standen{display:none;position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.standen li{display:contents}
.stand{position:absolute;display:flex;align-items:center;min-height:20px;padding:0 2px;border:0;background:none;cursor:pointer;pointer-events:auto;
  font:inherit;font-family:var(--f-gravure);font-size:10px;letter-spacing:.2em;text-transform:uppercase;line-height:1;color:#1f170c;white-space:nowrap;
  text-shadow:0 1px 0 rgba(255,244,212,.55);opacity:.8} /* .8 en niet lager: dan haalt het woord nog AA op het messing (4,9:1) */
.stand[aria-checked="true"]{opacity:1}
.stand:hover{opacity:.9}
.stand:focus-visible{outline:2px solid #1f170c;outline-offset:1px}
.stand-cover{right:calc(100% + 1px);top:-3px}
.stand-club{bottom:calc(100% + 7px);left:50%;transform:translateX(-50%)}
.stand-loud{left:calc(100% + 1px);top:-3px}

/* ---------- kleurknop op het proefvel (materialen.html): ongewijzigd uit ronde 6 ---------- */
.kleur{display:flex;flex-direction:column;gap:2px;align-self:stretch;justify-content:center;
  padding:5px 6px;border-radius:3px;color:#f3e3bd;
  background:radial-gradient(ellipse 90% 70% at 50% 110%,rgba(255,178,80,.34),transparent 70%),linear-gradient(180deg,#221a12,#15100c);
  box-shadow:0 0 0 1px #6d5733,0 0 0 3px rgba(40,26,8,.3),inset 0 2px 5px rgba(0,0,0,.8),0 1px 0 3px rgba(255,244,212,.3)}
.kleur .gravure{font-size:11px;letter-spacing:.2em;text-align:center;padding-bottom:1px;color:#d9c28e;text-shadow:none}
.kleur button{display:flex;align-items:center;gap:8px;min-height:26px;padding:0 7px 0 4px;border:0;border-radius:2px;background:none;cursor:pointer;
  font:inherit;font-family:var(--f-gravure);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cdb98f}
.kleur .juweel{width:12px;height:12px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.5),transparent 42%),color-mix(in srgb,var(--c) 62%,#20160c);
  box-shadow:0 0 0 1.5px #6d5733,inset 0 1px 2px rgba(0,0,0,.45);transition:background .3s,box-shadow .3s}
.kleur button:hover{color:#fff0cf}
.kleur button[aria-checked="true"]{color:#fff4dc;background:rgba(255,236,200,.12);box-shadow:inset 0 0 0 1px rgba(243,227,189,.45)}
.kleur button[aria-checked="true"] .juweel{
  background:radial-gradient(circle at 38% 32%,#fff 0 14%,var(--c) 50%,color-mix(in srgb,var(--c) 60%,#000));
  box-shadow:0 0 0 1.5px #f3e6c4,0 0 8px 2px color-mix(in srgb,var(--c) 75%,transparent)}
.kleur button:focus-visible{outline:2px solid #f3e3bd;outline-offset:1px}

/* ---------- telefoon (tot 900 px; ronde 11): het medaillon en de plek van LIGHTS en MENU ----------
   De schroeven zitten op 4 px uit de hoek en zijn 9 px groot (tot 13 px); de plaat heeft 7 px padding. Een rechthoekig
   plaatje tegen de rand zat dus altijd onder de schroef linksboven, en de MENU-knop (de kolom is precies 2 × 33 + 6
   breed) onder de schroef rechtsboven. */
@media (max-width:899px){
  .links{gap:2px}
  /* het medaillon: zo hoog als er boven de Tune-knop over is (37 op een SE, 42 op een iPhone 15), en even breed als hoog */
  .naam{flex:1 1 0;min-height:34px;max-height:48px;height:auto;width:auto;aspect-ratio:1;align-self:center;margin-top:0;gap:0;padding:0;border-radius:50%;
    background:radial-gradient(circle at 50% 28%,#2a221b,#120e0b 62%,#0b0806);
    box-shadow:0 0 0 1.5px #5d482a,0 0 0 3.5px #c9ad72,0 0 0 4.5px #6d5733,0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,200,.12),inset 0 -1px 0 rgba(0,0,0,.6)}
  .naam b{font-size:clamp(6.6px,1.9vw,7.5px);line-height:1.28}
  .naam::before{top:-4px;bottom:-4px;left:-4px;right:-4px;border-radius:50%} /* tikvlak 56 × 56 */
  .knoppen{margin-top:8px;gap:6px}
  .drukknop{gap:2px}
  /* de tikvlakken 4 px omhoog: dan eindigen ze boven het tikvlak van de Mode-knop, ook op een iPhone SE */
  .lampknop::before{transform:translate(calc(-50% - 5px),calc(-50% - 4px))}
  .menu-knop::before{transform:translate(calc(-50% + 5px),calc(-50% - 4px))}
}

/* ---------- laptop (vanaf 900 px; indeling ronde 10) ----------
   Drie kolommen: twee even brede zijkolommen (minstens 212 px, verder gelijk rekkend) en in het midden de meters, hooguit
   514 breed. Omdat de zijkolommen altijd even breed zijn, staan de meters en de band in het midden van de plaat; wordt het
   scherm smaller dan ongeveer 1030 px, dan worden de meters kleiner in plaats van dat de knoppen eroverheen schuiven
   (ronde 9 liep daar vast). Links: het naamplaatje linksboven tegen de rand van de plaat, de Tune-knop rechtsonder met
   zijn midden op --knop-afstand van de meters en zijn onderkant gelijk met de band. Rechts, gespiegeld: LIGHTS en MENU
   (rechthoekig) rechtsboven tegen de rand, precies zo hoog als het naamplaatje (bovenkant knop = bovenkant plaatje,
   onderkant gravure = onderkant plaatje), de Mode-knop linksonder met zijn midden op --knop-afstand van de meters.
   --knop-afstand is 104: de knop is 80 breed en het woord Cover steekt 54 px links van de knop uit, dan blijft er 10 px
   lucht tussen Cover en de rechter meter. De namen Cover, Club en Loud staan in een boog boven de knop, elk boven zijn
   streepje (Club iets hoger dan de andere twee), zodat ze niet meer over de meter heen lopen. */
@media (min-width:900px){
  .plaat{--naam-h:54px;--knop-afstand:104px;padding:16px 26px;row-gap:8px;column-gap:0;align-items:start;
    grid-template-columns:minmax(212px,1fr) minmax(0,514px) minmax(212px,1fr);
    grid-template-rows:auto auto;
    grid-template-areas:"links meters rechts" "links band rechts"}
  .links{align-self:stretch;justify-self:stretch;align-items:stretch;gap:8px}
  .naam{flex:none;width:max-content;height:var(--naam-h);align-self:flex-start;align-items:flex-start;text-align:left;gap:2px;padding:9px 13px 8px}
  .naam b{font-size:13px;letter-spacing:.2em;line-height:normal;width:auto;white-space:nowrap}
  .naam small{display:block}
  .tune{margin-top:auto;align-self:flex-end;margin-right:calc(var(--knop-afstand) - 40px);gap:4px;padding-top:0}
  .afstemknop{width:80px;height:80px}
  .tune .gravure{font-size:9px}
  .meters{width:100%;gap:14px;align-self:start}
  .band{height:28px}
  .naald-baan{right:30%}
  .uitlees{font-size:9.5px;letter-spacing:.1em;max-width:46%}
  /* LIGHTS en MENU: naast elkaar, rechts tegen de rand, zo hoog als het naamplaatje */
  .knoppen{align-self:start;justify-self:end;flex-direction:row;align-items:stretch;justify-content:flex-end;gap:14px;width:auto;height:var(--naam-h)}
  .drukknop{width:auto;min-width:44px;height:100%;justify-content:space-between;gap:0;font-size:9px;letter-spacing:.2em}
  .drukknop .dop{width:54px;height:36px}
  .lampknop::before,.menu-knop::before{transform:translate(-50%,-50%)}
  .tune .gravure,.mode .gravure{font-size:9px}
  /* Mode: linksonder in dezelfde cel, het midden op --knop-afstand van de meters, onderkant gelijk met de band */
  .mode{align-self:end;justify-self:start;margin-left:calc(var(--knop-afstand) - 40px);width:auto;gap:4px;padding:0}
  .modevak{width:80px;height:80px}
  .mode .gravure{font-size:9px}
  .standen{display:block}
  .stand-cover{right:calc(100% - 10px);top:auto;bottom:calc(100% + 2px)}
  .stand-club{bottom:calc(100% + 12px)}
  .stand-loud{left:calc(100% - 10px);top:auto;bottom:calc(100% + 2px)}
}

/* ======================================================================
   DE KAST: notenhouten zijkanten, daarbinnen het luidsprekerdoek
   ====================================================================== */
.kast{position:relative;max-width:1280px;margin:0 auto;padding:0 var(--rand);
  /* dezelfde plank als de wangen van de versterker: het verloop loopt over de breedte van één wang,
     links en rechts apart, zodat de kast niet donkerder is dan de kop (ronde 4, punt 10) */
  background:var(--nerf-staand) 0 0/240px 520px,
    var(--noten) left top/var(--rand) 100% no-repeat,var(--noten) right top/var(--rand) 100% no-repeat,#4a2d19;
  box-shadow:0 0 0 1px #1a0f08,0 30px 60px rgba(0,0,0,.6)}
.kop-ruimte{height:var(--kop-hoogte)}
.doek{position:relative;padding:28px var(--doek-pad) 40px;overflow:clip;color:var(--doek-inkt)}

/* ---------- het luidsprekerdoek (ronde 5) ----------
   Het doek is een eigen laag (::before) onder alles wat erop zit. Van boven naar beneden: een koffiekring, een
   nicotinevlek, een geschuurde plek, het licht dat van linksboven over het doek valt en de warme gloed van de
   versterker aan de bovenrand, stof en verkleuring op grote schaal, en dan het weefsel zelf: een tegel van
   mandvlechtwerk met ronde draden in een zout-en-peperpalet (doek/doek-a.svg tot en met doek-e.svg, gemaakt met
   tools/doek5.mjs). De vijf doeken verschillen in kleur, grofheid en hoe versleten ze zijn; de mockup gebruikt A.
   In de stand Loud wordt dezelfde laag donker gedraaid (zwart doek, zoals op een Marshall met zwart grillcloth). */
.geweven{position:relative;isolation:isolate;
  --doek-tegel:url(doek/doek-a.svg);--doek-maat:24px;
  --vlek1:36% 22%;--vlek2:71% 64%;--schuur:18% 78%;--vlek-sterk:.30;--schuur-sterk:.20;--licht-sterk:.16}
.geweven::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 8% 2.6% at var(--vlek1),transparent 60%,rgba(70,40,10,calc(var(--vlek-sterk) * .7)) 66%,rgba(70,40,10,calc(var(--vlek-sterk) * .3)) 76%,transparent 86%),
    radial-gradient(ellipse 7% 2.2% at var(--vlek1),rgba(70,40,10,calc(var(--vlek-sterk) * .18)),transparent 70%),
    radial-gradient(ellipse 14% 5% at var(--vlek2),rgba(60,32,6,var(--vlek-sterk)),transparent 70%),
    radial-gradient(ellipse 12% 4% at var(--schuur),rgba(255,240,210,var(--schuur-sterk)),transparent 70%),
    linear-gradient(165deg,rgba(255,250,235,var(--licht-sterk)),rgba(255,250,235,0) 38%,rgba(0,0,0,0) 68%,rgba(0,0,0,.14)),
    radial-gradient(ellipse 70% 11% at 50% 0,rgba(255,214,150,.28),transparent 70%),
    radial-gradient(ellipse 90% 80% at 50% 50%,transparent 62%,rgba(30,18,6,.14)),
    var(--sleet) 50% 0/1400px 4400px repeat-y,
    var(--doek-tegel) 0 0/var(--doek-maat) var(--doek-maat);
  background-blend-mode:multiply,multiply,multiply,screen,normal,normal,multiply,multiply,normal;
  box-shadow:inset 0 10px 18px -8px rgba(0,0,0,.75),inset 0 -10px 18px -10px rgba(0,0,0,.6),inset 8px 0 14px -10px rgba(0,0,0,.7),inset -8px 0 14px -10px rgba(0,0,0,.7)}
[data-stand="loud"] .geweven::before{filter:brightness(.34) saturate(.45) contrast(1.15)}
/* de vier andere doeken (proefvel) */
.doek-b{--doek-tegel:url(doek/doek-b.svg);--doek-maat:21px;--vlek1:64% 30%;--vlek2:22% 70%;--schuur:80% 74%;--vlek-sterk:.22;--schuur-sterk:.16;--licht-sterk:.2}
.doek-c{--doek-tegel:url(doek/doek-c.svg);--doek-maat:38px;--vlek1:28% 60%;--vlek2:70% 26%;--schuur:52% 80%;--vlek-sterk:.36;--schuur-sterk:.28;--licht-sterk:.14}
.doek-d{--doek-tegel:url(doek/doek-d.svg);--doek-maat:26px;--vlek1:70% 68%;--vlek2:30% 24%;--schuur:14% 60%;--vlek-sterk:.26;--schuur-sterk:.14;--licht-sterk:.18}
.doek-e{--doek-tegel:url(doek/doek-e.svg);--doek-maat:24px; /* ronde 9: 24 (was 26), even fijn als doek A (Cover) */--vlek1:40% 70%;--vlek2:78% 30%;--schuur:20% 30%;--vlek-sterk:.34;--schuur-sterk:.12;--licht-sterk:.16}
.doek > section{position:relative}
/* de beschadigde plek: één keer per pagina, in een naad */
.schade{position:absolute;width:120px;height:84px;background:var(--schade) center/contain no-repeat;pointer-events:none;transform:rotate(var(--r,0deg));opacity:.95}

/* ======================================================================
   BEVESTIGINGEN: messing punaise, veiligheidsspeld
   ====================================================================== */
.punaise{position:absolute;z-index:3;width:20px;height:20px;border-radius:50%;left:var(--px,50%);top:var(--py,-6px);margin-left:-10px;
  background:radial-gradient(circle at 36% 30%,#fff5d2 0 8%,#e6c98a 20%,#b89354 46%,#7a5c2b 76%,#4d3818);
  box-shadow:3px 6px 5px -2px rgba(0,0,0,.55),inset 0 -2px 3px rgba(40,25,5,.5),inset 0 0 0 1px rgba(60,40,10,.35)}
.punaise::after{content:"";position:absolute;left:46%;top:44%;width:14px;height:3px;border-radius:2px;background:rgba(0,0,0,.28);transform:rotate(38deg);transform-origin:0 50%;filter:blur(1.2px);z-index:-1}
.speld{position:absolute;z-index:3;width:150px;height:46px;left:var(--px,auto);right:var(--pr,auto);top:var(--py,-16px);
  transform:rotate(var(--pr-hoek,-8deg));transform-origin:50% 50%;
  filter:drop-shadow(1px 2px 1px rgba(0,0,0,.35)) drop-shadow(3px 7px 6px rgba(0,0,0,.45))}
@media (max-width:899px){.speld{width:118px;height:36px}}

/* ======================================================================
   PAPIER
   ====================================================================== */
.blad{position:relative;color:var(--inkt);transform:rotate(var(--r,0deg));filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(2px 10px 12px rgba(0,0,0,.45))}
.blad-vel{position:relative}

/* blocnotevel: gelinieerd, met kantlijn en een geperforeerde bovenrand */
.blocnote .blad-vel{--rg:28px;
  padding:34px 22px 26px 60px;line-height:var(--rg);
  background-color:var(--papier);
  background-image:
    linear-gradient(90deg,transparent 44px,var(--kantlijn) 44px 45px,transparent 45px 47px,rgba(196,80,66,.45) 47px 48px,transparent 48px),
    repeating-linear-gradient(180deg,transparent 0 calc(var(--rg) - 1px),var(--lijn) calc(var(--rg) - 1px) var(--rg)),
    linear-gradient(180deg,rgba(120,90,40,.10),transparent 20%,transparent 80%,rgba(120,90,40,.12));
  /* ronde 5: de lijntjes beginnen 3px lager, zodat de tekst óp de lijn staat en de lijn niet door de x-hoogte loopt */
  background-position:0 0,0 37px,0 0;background-size:auto,100% calc(100% - 37px),auto;background-repeat:no-repeat;
  -webkit-mask:radial-gradient(circle 3.2px at 50% 0,#0000 96%,#000) 0 0/13px 100% repeat-x;mask:radial-gradient(circle 3.2px at 50% 0,#0000 96%,#000) 0 0/13px 100% repeat-x}
.blocnote h2,.blocnote h3{font-family:var(--f-kop);font-size:28px;line-height:var(--rg);padding-top:0;margin-bottom:var(--rg)}

/* Rolodexkaart (ronde 4): gekleurd karton in zachte kleuren, lijntjes, afgeronde hoeken en de twee
   inkepingen onderaan waarmee hij op de as van de Rolodex zit. De ruiter bovenop is altijd een
   opvallende, diepe kleur uit dezelfde familie als de kaart, met crème letters. */
.rolodex{padding-top:24px;--kaart:#f1ebdc;--kaart-lijn:rgba(50,60,90,.26);--ruiter:#4b3a2a;--ruiter-ink:#fbf2e0}
.rolodex.kaart-mint{--kaart:#cfe3cf;--kaart-lijn:rgba(30,80,55,.26);--ruiter:#1f6a48}
.rolodex.kaart-lila{--kaart:#dfd5ea;--kaart-lijn:rgba(70,50,110,.24);--ruiter:#5e3a8f}
.rolodex.kaart-oranje{--kaart:#f6b96a;--kaart-lijn:rgba(120,60,20,.26);--ruiter:#a9451a}
.rolodex.kaart-blauw{--kaart:#cadfe8;--kaart-lijn:rgba(30,70,100,.26);--ruiter:#1f5a7a}
.rolodex.kaart-geel{--kaart:#f3e5a2;--kaart-lijn:rgba(110,85,10,.26);--ruiter:#6f5408}
.rolodex.kaart-zalm{--kaart:#f6c9ae;--kaart-lijn:rgba(140,50,30,.24);--ruiter:#b23a2c}
.rolodex .blad-vel{padding:24px 20px 56px;min-height:100%;border-radius:10px 10px 9px 9px;
  background-color:var(--kaart);
  /* ronde 5: echter karton. Papiervezel, de gedrukte lijntjes met een zweem inktuitloop, een lichte schijn van
     boven, een vuile onderrand en een hoek die ooit omgevouwen is geweest (rechtsonder) */
  background-image:
    linear-gradient(315deg,rgba(0,0,0,.12),rgba(0,0,0,.04) 9px,rgba(0,0,0,0) 16px),
    var(--vezel),
    linear-gradient(var(--kaart-lijn),var(--kaart-lijn)) 0 44px/100% 1.5px no-repeat,
    repeating-linear-gradient(180deg,transparent 0 22.6px,color-mix(in srgb,var(--kaart-lijn) 60%,transparent) 22.6px 23px,var(--kaart-lijn) 23px 24px) 0 48px/100% calc(100% - 82px) no-repeat,
    linear-gradient(180deg,rgba(255,255,255,.34),transparent 26%,transparent 70%,rgba(60,40,10,.12)),
    radial-gradient(ellipse 60% 50% at 30% 20%,rgba(255,255,255,.18),transparent 70%);
  background-blend-mode:multiply,multiply,normal,normal,normal,normal;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 -10px 16px -14px rgba(60,40,10,.45),inset 0 1px 0 rgba(255,255,255,.45);
  /* twee gleuven onderaan: een rechthoek met een ronde bovenkant, op 40% en 60% */
  -webkit-mask:
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 40% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 40% 100%/24px 15px no-repeat,
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 60% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 60% 100%/24px 15px no-repeat,
    linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out,destination-out,destination-out,destination-out,source-over;
  mask:
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 40% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 40% 100%/24px 15px no-repeat,
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 60% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 60% 100%/24px 15px no-repeat,
    linear-gradient(#000,#000);
  mask-composite:exclude,exclude,exclude,exclude,add}
.ruiter{position:absolute;top:0;left:16px;height:32px;padding:0 14px 8px;display:flex;align-items:center;border-radius:6px 6px 0 0;white-space:nowrap;
  font-family:var(--f-gravure);font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ruiter);color:var(--ruiter-ink);text-shadow:0 1px 0 rgba(0,0,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}

/* kassabon: thermisch papier met een gekartelde scheurrand */
.bon{filter:drop-shadow(1px 2px 0 rgba(0,0,0,.2)) drop-shadow(2px 10px 12px rgba(0,0,0,.45))}
.bon .blad-vel{padding:24px 22px 34px;color:#27231f;font-family:var(--f-gravure);font-size:11.5px;letter-spacing:.06em;line-height:1.9;text-transform:uppercase;
  background:linear-gradient(180deg,#f6f4ef,#eeebe3 70%,#e6e1d4);
  -webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x;
  mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/14px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/14px 51% repeat-x}

/* gestempeld of gespoten op het doek zelf (ronde 4; in ronde 5 niet meer in de mockup, zie .opgezet) */
.stempel{font-family:var(--f-kop);color:var(--doek-inkt);line-height:1;
  -webkit-mask:var(--spikkel) 0 0/220px 220px;mask:var(--spikkel) 0 0/220px 220px;
  text-shadow:0 2px 0 rgba(0,0,0,.28),0 9px 16px rgba(0,0,0,.42)}

/* Dymo-labeltje (ingeperste letters op plastic tape) */
.dymo{display:inline-block;padding:4px 9px 3px;font-family:var(--f-gravure);font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:#fbf2e0;background:var(--i-diep);border-radius:2px;
  background-image:linear-gradient(180deg,rgba(255,255,255,.18),transparent 40%,rgba(0,0,0,.2));
  text-shadow:0 -1px 0 rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.35),1px 0 0 rgba(255,255,255,.12);
  box-shadow:1px 2px 3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.35)}
.dymo.zwart{background-color:#141110}

/* De toets (ronde 4): een Dymo-label. Letters in plastic tape geperst met een lettertang: wit reliëf op
   zwart of op de diepe accentkleur, een glans van het plastic, het uiteinde net niet recht afgeknipt en het
   label zelf net niet recht geplakt. Het blijft een knop: hij steekt 3 mm uit, zakt in als je drukt, en heeft
   links een lampje dat altijd een beetje gloeit en bij hover of aanraken fel wordt. */
.toets{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 20px 0 14px;text-decoration:none;
  font-family:var(--f-gravure);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:#f8efdc;
  --tape:#17120e;isolation:isolate;transform:rotate(var(--tr,-.7deg));
  text-shadow:0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.75);
  filter:drop-shadow(0 3px 0 #070504) drop-shadow(0 9px 12px rgba(0,0,0,.45));
  transition:transform .1s,filter .1s}
.toets::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 36%,rgba(0,0,0,.04) 50%,rgba(0,0,0,.30)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    var(--tape);
  clip-path:polygon(0 0,100% 0,calc(100% - 3px) 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.55)}
.toets:active{transform:translateY(3px) rotate(var(--tr,-.7deg));filter:drop-shadow(0 0 0 #070504) drop-shadow(0 3px 5px rgba(0,0,0,.5))}
.toets.rood{--tape:var(--i-diep)}
.toets .pijl{width:14px;height:14px}
/* het lampje: een juweeltje in een messing ringetje, altijd een beetje aan; fel bij hover, aanraken of focus */
.lampje{width:9px;height:9px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 40% 35%,#ffe0a8,#dc8f2c 55%,#6d4110);
  box-shadow:0 0 0 2px #2a221b,0 0 0 3px #7a6238,0 0 6px 2px rgba(255,170,60,.38);
  transition:background .25s,box-shadow .25s}
.toets:hover .lampje,.toets:focus-visible .lampje,.toets:active .lampje{
  background:radial-gradient(circle at 40% 35%,#fff8e6,#ffc25a 55%,#c9781d);
  box-shadow:0 0 0 2px #2a221b,0 0 0 3px #7a6238,0 0 12px 4px rgba(255,180,70,.85)}

/* kaartlink (ronde 4): een klein Dymo-label op een Rolodexkaart, ook met een lettertang gemaakt */
.kaartlink{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;text-decoration:none;
  font-family:var(--f-gravure);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#f8efdc;
  /* ronde 5: de tape heeft de kleur van de ruiter van de kaart (Kijk, Luister, Lees), zelfde letter als de ruiter */
  --tape:var(--ruiter,#17120e);isolation:isolate;transform:rotate(var(--tr,-.9deg));
  text-shadow:0 1px 0 rgba(255,255,255,.28),0 -1px 0 rgba(0,0,0,.75);
  filter:drop-shadow(0 2px 0 #070504) drop-shadow(1px 5px 5px rgba(0,0,0,.35));transition:transform .15s,filter .15s,color .15s}
.kaartlink::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.10) 36%,rgba(0,0,0,.04) 50%,rgba(0,0,0,.30)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),
    var(--tape);
  clip-path:polygon(0 0,100% 0,100% 100%,2px 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.55)}
.kaartlink:hover,.kaartlink:focus-visible{color:#fff;transform:rotate(var(--tr,-.9deg)) translateY(-1px);
  filter:drop-shadow(0 3px 0 #070504) drop-shadow(2px 8px 8px rgba(0,0,0,.4))}
.kaartlink:active{transform:rotate(var(--tr,-.9deg)) translateY(2px);filter:drop-shadow(0 0 0 #070504) drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.kaartlink .pijl{width:12px;height:12px}
.kaart-links{align-items:center}
.toelichting{font-family:var(--f-tekst);font-style:italic;font-size:14.5px;color:var(--inkt2);margin:0 4px 0 -4px}
/* op een smalle telefoon blijft een label één regel tape */
@media (max-width:430px){
  .toets{font-size:11.5px;letter-spacing:.16em;padding:0 14px 0 12px;gap:10px;white-space:nowrap}
  .zet-knop .toets{font-size:12px;padding:0 16px 0 14px}
}
.kaart-links .kaartlink:nth-child(even){--tr:.8deg}

/* letterbord (ronde 4, de merkzin): zwart vilt met gleuven, witte plastic letters erin geschoven,
   een houten lijst met een messing randje. Eén letter zit een beetje scheef. */
.letterbord{--rij:34px;display:inline-block;margin:0;padding:12px 18px 10px;color:#f4eee2;
  font-family:var(--f-gravure);font-size:clamp(17px,4.4vw,24px);letter-spacing:.24em;text-transform:uppercase;line-height:var(--rij);
  background:
    repeating-linear-gradient(180deg,transparent 0 calc(var(--rij) - 3px),rgba(0,0,0,.55) calc(var(--rij) - 3px) calc(var(--rij) - 1px),rgba(255,255,255,.07) calc(var(--rij) - 1px) var(--rij)) 0 6px,
    var(--korrel) 0 0/180px 180px,#1a1512;
  background-blend-mode:normal,soft-light,normal;
  box-shadow:0 0 0 6px #3e2a18,0 0 0 7px #6d5733,0 0 0 8px #24170c,3px 12px 18px 2px rgba(0,0,0,.55),inset 0 0 18px rgba(0,0,0,.6);
  transform:rotate(var(--r,-.8deg))}
.letterbord li{list-style:none;white-space:nowrap;text-shadow:0 1px 0 rgba(0,0,0,.7),0 2px 2px rgba(0,0,0,.6),0 -1px 0 rgba(255,255,255,.25)}
.letterbord li:nth-child(2){padding-left:.6em}
.letterbord li:nth-child(4){padding-left:.3em}
.letterbord .scheef{display:inline-block;transform:rotate(7deg) translateY(1px);font-weight:400}

/* ======================================================================
   STICKERS: verplaatsbaar, met een loslatend hoekje
   ====================================================================== */
@property --los{syntax:"<percentage>";inherits:true;initial-value:22%}
.sticker{position:absolute;z-index:30;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;
  width:var(--w,110px);--los:22%;
  transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));
  filter:drop-shadow(1px 2px 0 rgba(0,0,0,.22)) drop-shadow(0 6px 8px rgba(0,0,0,.25));
  transition:--los .35s var(--uit)}
.sticker img{display:block;width:100%;height:auto;pointer-events:none;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--los)),calc(100% - var(--los)) 100%,0 100%)}
/* het omgekrulde hoekje: de witte achterkant, gespiegeld over de vouwlijn */
.sticker .hoek{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(135deg,transparent 50%,#d9d4c8 50%,#fbf8f1 72%,#e8e3d6);
  clip-path:polygon(100% calc(100% - var(--los)),calc(100% - var(--los)) 100%,calc(100% - var(--los)) calc(100% - var(--los)))}
.sticker.rond{--los:30%}
.sticker.rond img{clip-path:polygon(0 0,100% 0,97% 67%,calc(100% - var(--los) - 3%) 97%,0 100%)}
.sticker.rond .hoek{clip-path:polygon(97% 67%,calc(100% - var(--los) - 3%) 97%,79% 79%)}
.sticker:hover,.sticker.grijp{--los:34%}
.sticker.rond:hover,.sticker.rond.grijp{--los:36%}
.sticker.grijp{cursor:grabbing;z-index:45;filter:drop-shadow(4px 14px 10px rgba(0,0,0,.4))}
/* krijgt iets onder de sticker de toetsenbordfocus, dan wijkt de sticker even */
.sticker.opzij{opacity:.28;pointer-events:none;transition:opacity .2s}
.sticker.terug{transition:transform .5s var(--uit),--los .35s}
.sticker.wiebel{animation:wiebel .7s ease-in-out}
.sticker.wiebeltje{animation:wiebeltje .9s ease-in-out}
@keyframes wiebel{
  0%,100%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg))}
  20%{transform:translate(var(--dx,0px),calc(var(--dy,0px) - 3px)) rotate(calc(var(--r,0deg) - 5deg))}
  45%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) + 4deg))}
  70%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) - 2deg))}}
@keyframes wiebeltje{
  0%,100%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg))}
  30%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) + 2.5deg))}
  65%{transform:translate(var(--dx,0px),var(--dy,0px)) rotate(calc(var(--r,0deg) - 1.5deg))}}
.spoor{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:25}

/* ======================================================================
   DE PLINT (onderkant van de kast, met het menu op een messing typeplaatje)
   ====================================================================== */
.plint{position:relative;padding:18px 12px calc(20px + var(--rand));margin:0 calc(var(--rand) * -1);
  background:var(--nerf-liggend) 0 0/520px 240px,var(--noten-liggend);box-shadow:inset 0 8px 10px -8px rgba(0,0,0,.7)}
.typeplaat{max-width:880px;margin:0 auto;padding:18px 20px 16px;position:relative;color:#2a1f11;
  background:
    radial-gradient(ellipse 30% 80% at 90% 100%,rgba(58,38,12,.3),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,246,214,.07) 0 1px,rgba(60,40,10,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#d2b67c,#bd9f63 50%,#ab8d52);
  border-radius:3px;box-shadow:0 0 0 1px #5d482a,0 4px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,246,214,.5)}
.typeplaat h2{margin-bottom:10px}
.menu-lijst{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.menu-lijst a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-gravure);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#1f170c;text-decoration:none;border-bottom:1px solid rgba(40,26,8,.45);text-shadow:0 1px 0 rgba(255,244,212,.5)}
.menu-lijst a:hover{border-bottom-color:#1f170c}
.menu-lijst a:focus-visible{outline:2px solid #1f170c;outline-offset:3px}
.typeplaat .klein{font-family:var(--f-gravure);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#1f170c;line-height:1.9;
  text-shadow:0 1px 0 rgba(255,244,212,.45)}

/* ======================================================================
   BEWEGING BEPERKEN
   ====================================================================== */
@media (prefers-reduced-motion:reduce){
  .mode-draai,.dop-kap,.dop-schaduw{transition:none}
  .sticker,.sticker.terug{transition:none}
  .sticker.wiebel,.sticker.wiebeltje{animation:none}
  .toets,.kaartlink,.lampje{transition:none}
  /* de VU-meters bewegen bewust wél door (keuze Arjan), zie vu.js */
}

/* pijlen: één getekende set, geen tekens uit het lettertype */
.pijl{display:inline-block;width:.95em;height:.95em;flex:none;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zender .pijl{width:9px;height:9px;margin-left:3px}
.menu-lijst .pijl{width:10px;height:10px;margin-left:5px}


/* ======================================================================
   RONDE 5 · KOPPEN OP HET DOEK
   Vier manieren om een kop op het doek te zetten. In de mockup: A, de opgezette schrijfletter.
   ====================================================================== */
/* A · opgezet: witte letters van gegoten kunststof, met pennetjes op het doek gezet zoals het logo op een versterker.
   De letter heeft een dun donkerder randje (de zijkant van de letter, ook het contrast met het lichte doek), een
   paar pixels dikte naar beneden, en werpt een echte schaduw op het doek. In Loud zuurgeel op het donkere doek. */
.opgezet{display:inline-block;font-family:var(--f-script);font-weight:400;line-height:1.06;color:var(--opgezet);
  padding:.02em .12em .1em .04em;transform:rotate(var(--r,-2.5deg));transform-origin:0 100%;
  text-shadow:
    -1px 0 0 var(--opgezet-rand),1px 0 0 var(--opgezet-rand),0 -1px 0 var(--opgezet-rand),
    0 1px 0 var(--opgezet-zij1),0 2px 0 var(--opgezet-zij1),0 3px 0 var(--opgezet-zij2),0 4px 0 var(--opgezet-zij2),0 5px 0 var(--opgezet-rand),
    1px 3px 3px rgba(0,0,0,.35),4px 11px 12px rgba(0,0,0,.5)}
.opgezet.sectie{font-size:clamp(38px,7.4vw,66px)}
.opgezet.groot{font-size:clamp(96px,20vw,190px);line-height:.98}
.opgezet.klein{font-size:clamp(30px,5.6vw,46px)}
@media (max-width:899px){.opgezet{text-shadow:
    -1px 0 0 var(--opgezet-rand),1px 0 0 var(--opgezet-rand),0 -1px 0 var(--opgezet-rand),
    0 1px 0 var(--opgezet-zij1),0 2px 0 var(--opgezet-zij2),0 3px 0 var(--opgezet-rand),
    1px 2px 2px rgba(0,0,0,.35),3px 8px 9px rgba(0,0,0,.5)}}

/* B · Dymo-kop: een groot label uit de lettertang in de kleur van de stand (groen in Club) */
.dymo-kop{position:relative;display:inline-block;padding:.5em .8em .44em .7em;isolation:isolate;
  font-family:var(--f-gravure);font-size:clamp(17px,3.4vw,28px);letter-spacing:.22em;text-transform:uppercase;line-height:1.1;color:#fbf2e0;
  --tape:var(--i-label);transform:rotate(var(--r,-1.2deg));
  text-shadow:0 1px 0 rgba(255,255,255,.3),0 -1px 0 rgba(0,0,0,.7);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.6)) drop-shadow(2px 7px 8px rgba(0,0,0,.45))}
.dymo-kop::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.1) 36%,rgba(0,0,0,.04) 50%,rgba(0,0,0,.3)),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 2px,transparent 2px 7px),var(--tape);
  clip-path:polygon(0 0,100% 0,calc(100% - 4px) 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.55)}
.dymo-kop.groot{font-size:clamp(26px,6vw,54px);letter-spacing:.18em}

/* C · gaffertape met stift: een reep grijze tape, gescheurd aan de uiteinden, met zwarte marker erop */
.gaffer{position:relative;display:inline-block;padding:.32em .9em .28em .8em;isolation:isolate;
  font-family:var(--f-marker);font-size:clamp(22px,4.6vw,40px);line-height:1.1;color:#16120e;transform:rotate(var(--r,-1.6deg));
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(1px 5px 6px rgba(0,0,0,.4))}
.gaffer::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#c6c3bb,#aeaba3 45%,#9a978f);
  clip-path:polygon(0 12%,2% 0,5% 8%,8% 2%,100% 0,98% 10%,100% 40%,97% 60%,100% 100%,3% 100%,0 90%,2% 70%,0 45%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.gaffer.groot{font-size:clamp(40px,9vw,88px)}
.gaffer.wit::before{background:repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),linear-gradient(180deg,#f4f1e8,#e6e2d8)}

/* D · badge: een geëmailleerd plaatje met messing rand en letters, met vier schroefjes op het doek gezet */
.badge{position:relative;display:inline-block;padding:16px 30px 14px 28px;color:#dcc28a;
  font-family:var(--f-gravure);font-size:clamp(14px,3vw,24px);letter-spacing:.26em;text-transform:uppercase;line-height:1.25;
  background:linear-gradient(180deg,#26201a,#110d0a 60%,#1a1511);border-radius:3px;transform:rotate(var(--r,-.6deg));
  text-shadow:0 1px 0 rgba(0,0,0,.8),0 0 1px rgba(255,230,170,.4);
  box-shadow:0 0 0 1px #3a2c16,0 0 0 3px #c9ad72,0 0 0 4px #6d5733,3px 9px 16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.6)}
.badge .schroef{--s:20deg}
.badge .schroef:nth-of-type(1){left:6px;top:6px}.badge .schroef:nth-of-type(2){right:6px;top:6px;--s:70deg}
.badge .schroef:nth-of-type(3){left:6px;bottom:6px;--s:-30deg}.badge .schroef:nth-of-type(4){right:6px;bottom:6px;--s:110deg}
.badge.groot{font-size:clamp(22px,5vw,44px);letter-spacing:.2em}

/* ======================================================================
   RONDE 5 · OP DE KAARTEN: getypt, met de hand geschreven, een stempel, een markeerstreep
   ====================================================================== */
.getypt{font-family:"Rubriek","Courier New",monospace;font-size:15.5px;letter-spacing:.01em;color:#2a2118;word-spacing:.05em}
.hand{font-family:var(--f-hand);font-weight:700;font-size:23px;line-height:1;color:#1f3f9a;letter-spacing:0;text-transform:none}
.hand.rood{color:#b3352a}
.hand.schuin{display:inline-block;transform:rotate(-3deg)}
.stamp{display:inline-block;padding:5px 10px 4px;border:2px solid var(--stamp,#a63a2f);color:var(--stamp,#a63a2f);
  font-family:var(--f-gravure);font-size:11px;letter-spacing:.2em;text-transform:uppercase;line-height:1.2;white-space:nowrap;
  transform:rotate(var(--sr,-6deg));opacity:.92;
  box-shadow:inset 0 0 0 2px var(--kaart,#f4efe3),inset 0 0 0 3.5px var(--stamp,#a63a2f);
  -webkit-mask:var(--spikkel) 0 0/220px 220px;mask:var(--spikkel) 0 0/220px 220px}
.stamp.blauw{--stamp:#25428a}
.stamp.paars{--stamp:#5b3a8a}
.stamp.los{position:absolute;right:18px;bottom:34px}
.markeer{background:linear-gradient(104deg,transparent 1%,rgba(255,228,64,.72) 3%,rgba(255,228,64,.72) 97%,transparent 99%);
  padding:.04em .2em;margin:0 -.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* een reep papier met de haak erop, vastgeprikt: zo blijft één zin leesbaar op het doek */
.reep{position:relative;display:inline-block;padding:16px 22px 15px 20px;color:var(--inkt);max-width:24em;
  background:var(--vezel),linear-gradient(180deg,#f6f1e4,#eee7d6);background-blend-mode:multiply,normal;
  transform:rotate(var(--r,-.7deg));
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.25)) drop-shadow(2px 8px 10px rgba(0,0,0,.45))}
.reep .punaise{--px:14px;--py:-8px}

/* de Spotify-knop: het groen en zwart van Spotify, als Dymo-label uit dezelfde lettertang; het lampje brandt groen */
.toets.spotify{--tape:#1db954;color:#0b1a10;text-shadow:0 1px 0 rgba(255,255,255,.35),0 -1px 0 rgba(0,0,0,.2)}
.toets.spotify .lampje{background:radial-gradient(circle at 40% 35%,#f0ffe9,#1ed760 55%,#0d5a28);
  box-shadow:0 0 0 2px #0f2a18,0 0 0 3px #45684f,0 0 6px 2px rgba(30,215,96,.45)}
.toets.spotify:hover .lampje,.toets.spotify:focus-visible .lampje,.toets.spotify:active .lampje{
  background:radial-gradient(circle at 40% 35%,#ffffff,#3cf07a 55%,#13802f);box-shadow:0 0 0 2px #0f2a18,0 0 0 3px #45684f,0 0 12px 4px rgba(30,215,96,.9)}

/* ======================================================================
   RONDE 5 · HET TYPEPLAATJE ONDERAAN (geen menu meer: dat zit in de kop)
   Een gegraveerd messing plaatje, zoals achterop een versterker. Twee kolommen, vier schroefjes, niet te druk.
   ====================================================================== */
.typeplaat{max-width:720px;padding:22px 26px 20px;color:#1f170c}
.typeplaat .schroef{width:11px;height:11px;--s:25deg}
.typeplaat .schroef:nth-of-type(1){left:8px;top:8px}.typeplaat .schroef:nth-of-type(2){right:8px;top:8px;--s:80deg}
.typeplaat .schroef:nth-of-type(3){left:8px;bottom:8px;--s:-40deg}.typeplaat .schroef:nth-of-type(4){right:8px;bottom:8px;--s:120deg}
.plaat-kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px 24px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:12px;
  border-bottom:1px solid rgba(40,26,8,.45);box-shadow:0 1px 0 rgba(255,244,212,.45)}
.plaat-kop b{font-family:var(--f-gravure);font-weight:400;font-size:14px;letter-spacing:.26em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,244,212,.5)}
.plaat-kop span{font-family:var(--f-gravure);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;text-shadow:0 1px 0 rgba(255,244,212,.5)}
.plaat-regels{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 16px;font-family:var(--f-gravure);font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
@media (min-width:720px){.plaat-regels{grid-template-columns:auto 1fr auto 1fr;column-gap:16px}.plaat-regels > div:nth-child(even) dt{padding-left:24px}}
.plaat-regels > div{display:contents}
.plaat-regels dt{color:#3a2c12;text-shadow:0 1px 0 rgba(255,244,212,.45)}
.plaat-regels dd{margin:0;color:#1f170c;text-shadow:0 1px 0 rgba(255,244,212,.5);white-space:nowrap}
/* ronde 6: geen onderstreping onder de Instagramlink (die zette de regel uit het lood); het pijltje is de herkenning */
.plaat-regels a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.plaat-regels a:hover{color:#3a2c12}
.plaat-regels a:focus-visible{outline:2px solid #1f170c;outline-offset:3px}
.plaat-regels .pijl{width:10px;height:10px;margin-left:4px}

/* de menuklep: de menuknop in de kop opent een messing klepje dat onder de kop hangt, met het menu erop.
   (Het menu stond in ronde 4 in de plint; Arjan wil het in de kop, en daar hangt het nu aan.) */
.menu-klep{position:fixed;left:50%;top:var(--kop-hoogte);z-index:59;width:100%;max-width:1280px;transform:translateX(-50%);
  padding:0 var(--rand);pointer-events:none}
.menu-klep .klep{margin:0 0 0 auto;width:min(100%,420px);padding:14px 18px 12px;border-radius:0 0 4px 4px;pointer-events:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;transition:transform .35s var(--uit),opacity .25s,visibility 0s .35s;
  box-shadow:0 0 0 1px #5d482a,0 14px 26px -8px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,246,214,.5)}
.menu-klep.open .klep{transform:none;opacity:1;visibility:visible;transition:transform .35s var(--uit),opacity .25s,visibility 0s}
.menu-klep .menu-lijst{flex-direction:column;gap:0}
.menu-klep .menu-lijst a{min-height:44px;width:100%;border-bottom-color:rgba(40,26,8,.25)}
.menu-klep .menu-lijst li:last-child a{border-bottom:0}
.menu-klep .gravure{font-size:10px;margin-bottom:4px}
@media (prefers-reduced-motion:reduce){.menu-klep,.menu-klep .klep{transition:none}}

/* ======================================================================
   NOG TE KIEZEN · DE MERKZIN (ronde 4/5)
   Vier manieren om "Sit down. Tune in. No phone. No skip." te zetten. In de mockup: C, het letterbord (hierboven).
   A knipselwoorden, B Dymo-labels, D gegraveerd messing. Verhuisd uit het proefvel (materialen.html), ongewijzigd,
   zodat de schakelaar ze ook op de homepage kan laten zien. Na Arjans keuze blijft er één over.
   ====================================================================== */
.knipzin{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:6px 0 0 4px}
.knipzin .knip{font-size:clamp(22px,5vw,34px)}
.knipzin .z1{font-family:"Krant",Arial,sans-serif;text-transform:uppercase;font-size:.86em;--papier-knip:var(--i-diep);--inkt-knip:#fdf6e6;--rand-knip:3px;--papier-rand:#f4efe3;--r:-.6deg;padding:.2em .32em .22em}
.knipzin .z2{font-family:"Blad",Georgia,serif;--papier-knip:#1e3f8c;--inkt-knip:#f6f1e4;--rand-knip:3px;--papier-rand:#f4efe3;--r:.6deg;margin-left:14px}
.knipzin .z3{font-family:var(--f-kop);--papier-knip:var(--i-vlak);--inkt-knip:#1a0e12;--rand-knip:3px;--papier-rand:#f8f4ea;--r:-.4deg;margin-left:4px}
.knipzin .z4{font-family:var(--f-gravure);font-size:.74em;letter-spacing:.05em;--papier-knip:#141110;--inkt-knip:#f2e7cf;--rand-knip:3px;--papier-rand:#f4efe3;--r:.9deg;margin-left:22px;padding:.3em .42em .32em}
.dymozin{display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 0 0 6px}
.dymozin .kaartlink{font-size:clamp(15px,3.8vw,20px);min-height:52px;padding:0 18px;letter-spacing:.24em;cursor:default;--tape:#17120e}
.dymozin .kaartlink:nth-child(2){--tape:var(--i-label);margin-left:18px;--tr:.7deg}
.dymozin .kaartlink:nth-child(3){margin-left:6px;--tr:-1.2deg}
.dymozin .kaartlink:nth-child(4){--tape:#1e3a2a;margin-left:26px;--tr:.5deg}
.plaatje{position:relative;display:inline-block;padding:22px 30px 20px 26px;border-radius:3px;margin:8px 0 0 6px;transform:rotate(-.6deg);
box-shadow:0 0 0 1px #5d482a,0 0 0 2px rgba(0,0,0,.4),3px 8px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,246,214,.55)}
.plaatje ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.plaatje li{font-family:var(--f-gravure);font-size:clamp(15px,3.8vw,21px);letter-spacing:.22em;text-transform:uppercase;color:#1f170c;text-shadow:0 1px 0 rgba(255,244,212,.55),0 -1px 0 rgba(0,0,0,.18)}
.plaatje .schroef{--s:20deg}
.plaatje .schroef:nth-of-type(1){left:7px;top:7px}.plaatje .schroef:nth-of-type(2){right:7px;top:7px;--s:70deg}
.plaatje .schroef:nth-of-type(3){left:7px;bottom:7px;--s:-30deg}.plaatje .schroef:nth-of-type(4){right:7px;bottom:7px;--s:110deg}


/* ======================================================================
   RONDE 6
   1. de kleurtrek van de stand Cover · 2. Loud: vier kleuren op knoppen en labels · 3. Club: rood en groen in balans
   4. de haak op een Rolodexkaart · 5. de merkzin per stand leesbaar · 6. het contactformulier · 7. de voet
   ====================================================================== */

/* ---------- 1. COVER: alle vaste accenten trekken een beetje naar de hoes van het nieuwste album ----------
   De kleur zelf blijft (blauw blijft blauw), maar met een vijfde deel van de hoeskleur erin. Komt er een nieuw
   album, dan verschuift alles vanzelf mee (--hoes-vlak komt uit site.js / het gegevensveld van het volume). */
[data-stand="cover"]{--trek:var(--hoes-vlak,#d29a4a);--trek-diep:var(--hoes-diep,#5a3a1c);--opgezet-rand:#6b655a} /* eindbeoordelaar punt 7: iets donkerder randje om de witte letter */
[data-stand="cover"] .k1{--papier-knip:color-mix(in oklab,#1e3f8c 80%,var(--trek))}
[data-stand="cover"] .k3{--papier-knip:color-mix(in oklab,#d9c79a 82%,var(--trek))}
[data-stand="cover"] .k5{--papier-knip:color-mix(in oklab,#e9c33a 80%,var(--trek))}
[data-stand="cover"] .k6{--papier-knip:color-mix(in oklab,#b8322a 80%,var(--trek))}
[data-stand="cover"] .k9{--papier-knip:color-mix(in oklab,#d9522c 80%,var(--trek))}
[data-stand="cover"] .rolodex.kaart-mint{--kaart:color-mix(in oklab,#cfe3cf 84%,var(--trek));--ruiter:color-mix(in oklab,#1f6a48 80%,var(--trek-diep))}
[data-stand="cover"] .rolodex.kaart-lila{--kaart:color-mix(in oklab,#dfd5ea 84%,var(--trek));--ruiter:color-mix(in oklab,#5e3a8f 80%,var(--trek-diep))}
[data-stand="cover"] .rolodex.kaart-oranje{--kaart:color-mix(in oklab,#f6b96a 84%,var(--trek));--ruiter:color-mix(in oklab,#a9451a 80%,var(--trek-diep))}
[data-stand="cover"] .rolodex.kaart-blauw{--kaart:color-mix(in oklab,#cadfe8 84%,var(--trek));--ruiter:color-mix(in oklab,#1f5a7a 80%,var(--trek-diep))}
[data-stand="cover"] .rolodex.kaart-geel{--kaart:color-mix(in oklab,#f3e5a2 84%,var(--trek));--ruiter:color-mix(in oklab,#6f5408 80%,var(--trek-diep))}
[data-stand="cover"] .rolodex.kaart-zalm{--kaart:color-mix(in oklab,#f6c9ae 84%,var(--trek));--ruiter:color-mix(in oklab,#b23a2c 80%,var(--trek-diep))}
[data-stand="cover"] .weekend{--marker:color-mix(in oklab,#fff 66%,var(--trek))} /* ronde 11: de markeerstift trekt naar de hoes (bij een roze hoes: lichtroze); twee derde wit erin, anders haalt de rode "Ga zitten." geen 4,5:1 op de streep */
[data-stand="cover"] .hand{color:color-mix(in oklab,#1f3f9a 80%,var(--trek-diep))}
[data-stand="cover"] .stamp{--stamp:color-mix(in oklab,#a63a2f 80%,var(--trek-diep))}
[data-stand="cover"] .stamp.blauw{--stamp:color-mix(in oklab,#25428a 80%,var(--trek-diep))}
[data-stand="cover"] .toets:not(.rood):not(.spotify):not(.tweede){--tape:color-mix(in oklab,#17120e 86%,var(--trek-diep))}
[data-stand="cover"] .dymo.zwart,[data-stand="cover"] .feiten li .dymo{background-color:color-mix(in oklab,#141110 86%,var(--trek-diep))}
[data-stand="cover"] .letterbord{background-color:color-mix(in oklab,#1a1512 88%,var(--trek-diep))}

/* ---------- 2. LOUD: vier kleuren, elke knop een andere; tekstkleur per vlak ---------- */
.dymo.donker-tekst,.dymo-donker{color:var(--loud-inkt,#14100c);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .feiten li:nth-child(1) .dymo{background-color:var(--loud-magenta)}
[data-stand="loud"] .feiten li:nth-child(2) .dymo{background-color:var(--loud-geel);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .feiten li:nth-child(3) .dymo{background-color:var(--loud-blauw)}
[data-stand="loud"] .feiten li:nth-child(4) .dymo{background-color:var(--loud-oranje);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .bak li:nth-child(3n+1) a:not([aria-current]) .dymo{background-color:var(--loud-blauw)}
[data-stand="loud"] .bak li:nth-child(3n+2) a:not([aria-current]) .dymo{background-color:var(--loud-geel);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .bak li:nth-child(3n+3) a:not([aria-current]) .dymo{background-color:var(--loud-oranje);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .bak a[aria-current] .dymo{background-color:var(--loud-magenta)}
[data-stand="loud"] .bak-hint .dymo{background-color:var(--loud-oranje);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
/* de bandnaam en de albumknop: één kleur, uit de hoes van het album (site.js: kleuren.loud) */
[data-stand="loud"] .artiest{--tape:var(--hoes-loud,var(--i-diep));--i-label:var(--hoes-loud,var(--i-diep))}
[data-stand="loud"] .artiest.dymo{background-color:var(--hoes-loud,var(--i-diep))}
[data-stand="loud"] .toets.albumknop{--tape:var(--hoes-loud,var(--i-diep))}
/* eindbeoordelaar ronde 6, punt 2: ook de kernzin, de merkzin en de dagletters houden zich aan de vier Loud-kleuren */
[data-stand="loud"] .k1{--papier-knip:var(--loud-blauw)}
[data-stand="loud"] .k5{--papier-knip:var(--loud-geel);--inkt-knip:var(--loud-inkt)}
[data-stand="loud"] .k6{--papier-knip:var(--loud-magenta);--inkt-knip:#fdf6e6}
[data-stand="loud"] .k9{--papier-knip:var(--loud-oranje);--inkt-knip:var(--loud-inkt)}
/* de titel en de merkzin (knipselwoorden) groter */
[data-stand="loud"] .club h2.opgezet{font-size:clamp(46px,9.4vw,88px)}
[data-stand="loud"] .knipzin .knip{font-size:clamp(27px,6.4vw,44px)}
/* "Zo gaat de week": veel kleuren, niet één rode */
/* op papier zijn alleen magenta, blauw en (donker) oranje leesbaar; geel niet, dus de vier kleuren worden er hier drie */
[data-stand="loud"] .dagen li:nth-child(1) .dag{color:var(--loud-magenta)}
[data-stand="loud"] .dagen li:nth-child(2) .dag{color:var(--loud-blauw)}
[data-stand="loud"] .dagen li:nth-child(3) .dag{color:#a63d08}
[data-stand="loud"] .dagen li:nth-child(4) .dag{color:var(--loud-magenta)}
[data-stand="loud"] .weekend .dag{color:var(--loud-blauw)}
[data-stand="loud"] .weekend .opdracht li b{color:#a63d08}
[data-stand="loud"] .weekend{--marker:var(--loud-geel)} /* ronde 11: zuurgele markeerstift */
[data-stand="loud"] .bronnen li::marker{color:var(--loud-blauw)}
[data-stand="loud"] .toets.tweede{--tape:var(--loud-blauw)}
[data-stand="loud"] .hand{color:var(--loud-blauw)}

/* ---------- 3. CLUB: rood en groen in balans (de tellingen staan in het verslag van ronde 6) ---------- */
[data-stand="club"] .feiten li:nth-child(1) .dymo{background-color:var(--groen)}
[data-stand="club"] .feiten li:nth-child(2) .dymo{background-color:var(--rood2)}
[data-stand="club"] .feiten li:nth-child(3) .dymo{background-color:#141110}
[data-stand="club"] .feiten li:nth-child(4) .dymo{background-color:var(--groen)}
[data-stand="club"] .bak li:nth-child(even) a:not([aria-current]) .dymo{background-color:var(--groen)}
[data-stand="club"] .bak-hint .dymo{background-color:var(--groen)}
[data-stand="club"] .toets.tweede{--tape:var(--groen)}
[data-stand="club"] .dagen li:nth-child(even) .dag{color:var(--groen)}
[data-stand="club"] .weekend .dag{color:var(--groen)}
[data-stand="club"] .bronnen li:nth-child(even)::marker{color:var(--groen)}
[data-stand="club"] .stamp{--stamp:var(--groen)}
[data-stand="club"] .weekend{--marker:#b4ea80} /* ronde 11: groene markeerstift, iets lichter dan Stabilo-groen: zo haalt de rode "Ga zitten." 4,5:1 op de streep */
[data-stand="club"] .hand{color:#1e3a2a}
/* de clubkaart: niet meer lichtblauw maar een licht groen uit dezelfde familie als de Dymo-labels, ruiter in clubgroen */
[data-stand="club"] .club .rolodex.kaart-blauw{--kaart:#d7dfc9;--kaart-lijn:rgba(30,58,42,.28);--ruiter:#1e3a2a}
/* titel iets groter en iets hoger, merkzin (letterbord) iets groter */
[data-stand="club"] .club h2{margin-top:-10px}
[data-stand="club"] .club h2.badge{font-size:clamp(17px,3.6vw,30px);padding:18px 34px 16px 32px}
[data-stand="club"] .club h2.opgezet{font-size:clamp(42px,8.2vw,74px)}
[data-stand="club"] .letterbord{font-size:clamp(19px,4.8vw,27px);--rij:38px}

/* ---------- 4. de haak op een Rolodexkaart die meekleurt met de stand ---------- */
.rolodex.kaart-haak{--kaart:color-mix(in oklab,#f1ebdc 72%,var(--i-vlak) 28%);--kaart-lijn:color-mix(in oklab,rgba(50,60,90,.26) 70%,var(--i-diep));--ruiter:var(--i-tweede)}
.haak-kaart{max-width:26em;--r:-.8deg;margin-top:8px;align-self:stretch}
.haak-kaart .blad-vel{padding:26px 22px 34px}
.haak-kaart .punaise{--px:90%;--py:30px} /* tot ronde 10; vanaf ronde 11 zit de kaart vast met een veiligheidsspeld */
.haak-kaart .speld{--px:auto;--pr:12px;--py:4px;--pr-hoek:-11deg}
.haak-kaart .haak{font-size:clamp(20px,4vw,26px)}
.tweede{--tape:var(--i-tweede)}

/* ---------- 5. de merkzin: elk van de vier labels leesbaar in elke stand ----------
   A knipselwoorden (Loud): "No skip." was zwart op zwart doek en is nu elektrisch blauw. In Club (donker oxblood-doek)
   krijgen de twee donkere knipsels een lichte kleur. B Dymo-labels (Cover): in Loud vier kleuren, in Club groen en rood. */
[data-stand="loud"] .knipzin .z2{--papier-knip:var(--loud-blauw)}
[data-stand="loud"] .knipzin .z4{--papier-knip:var(--loud-oranje);--inkt-knip:var(--loud-inkt)}
[data-stand="club"] .knipzin .z3{--papier-knip:#e6d8bb;--inkt-knip:#1a1109}
[data-stand="club"] .knipzin .z4{--papier-knip:#e9c33a;--inkt-knip:#1d1712}
[data-stand="loud"] .dymozin .kaartlink:nth-child(1){--tape:var(--loud-magenta)}
[data-stand="loud"] .dymozin .kaartlink:nth-child(2){--tape:var(--loud-geel);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="loud"] .dymozin .kaartlink:nth-child(3){--tape:var(--loud-blauw)}
[data-stand="loud"] .dymozin .kaartlink:nth-child(4){--tape:var(--loud-oranje);color:var(--loud-inkt);text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="club"] .dymozin .kaartlink:nth-child(1){--tape:var(--groen)}
[data-stand="club"] .dymozin .kaartlink:nth-child(2){--tape:var(--rood2)}
[data-stand="club"] .dymozin .kaartlink:nth-child(3){--tape:#e6d8bb;color:#1a1109;text-shadow:0 1px 0 rgba(255,255,255,.45),0 -1px 0 rgba(0,0,0,.22)}
[data-stand="club"] .dymozin .kaartlink:nth-child(4){--tape:var(--groen)}
[data-stand="cover"] .dymozin .kaartlink:nth-child(1){--tape:color-mix(in oklab,#17120e 86%,var(--trek-diep))}
[data-stand="cover"] .dymozin .kaartlink:nth-child(3){--tape:color-mix(in oklab,#17120e 86%,var(--trek-diep))}
[data-stand="cover"] .dymozin .kaartlink:nth-child(4){--tape:color-mix(in oklab,#1e3a2a 80%,var(--trek-diep))}

/* ---------- 6. CONTACT: een ledenkaart in een pop-up ---------- */
dialog.contact{border:0;padding:0;margin:auto;background:transparent;color:var(--inkt);overflow:visible;
  width:min(100% - 24px,560px);max-height:none}
.kaart-contact h2{padding-right:56px} /* ruimte voor de sluitknop */
dialog.contact::backdrop{background:rgba(8,5,3,.74);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
dialog.contact[open]{display:block}
.kaart-contact{margin:0;--kaart:color-mix(in oklab,#f1ebdc 70%,var(--i-vlak) 30%);--kaart-lijn:color-mix(in oklab,rgba(50,60,90,.3) 70%,var(--i-diep));--ruiter:var(--i-diep);--r:-.6deg}
/* eindbeoordelaar ronde 6, punt 1: het vel scrolt zelf; onderaan 70px ruimte zodat de knop en de melding altijd boven de
   gaatjes uitkomen, en de kaart blijft lager dan het scherm zodat ruiter, sluitknop en gaatjes in beeld blijven */
.kaart-contact .blad-vel{padding:30px 24px 70px;max-height:calc(100dvh - 96px);overflow:auto;overscroll-behavior:contain}
.kaart-contact .punaise{--px:76%;--py:26px}
.kaart-contact h2{font-family:var(--f-kop);font-size:30px;line-height:1.05;margin:0 0 6px}
.contact-uitleg{font-size:16px;line-height:1.4;color:var(--inkt2);max-width:32em;margin-bottom:14px}
.kaart-contact .veld{margin-top:14px;position:relative}
.kaart-contact label{display:block;font-family:var(--f-gravure);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--inkt2);margin-bottom:2px}
.kaart-contact label small{font-family:var(--f-tekst);font-style:italic;font-size:13px;letter-spacing:0;text-transform:none}
.kaart-contact input:not([type=checkbox]),.kaart-contact select,.kaart-contact textarea{display:block;width:100%;min-height:44px;padding:8px 6px 6px;border:0;border-radius:0;
  border-bottom:1.5px solid var(--kaart-lijn);background:transparent;color:var(--inkt);font-family:var(--f-tekst);font-size:17px;line-height:24px;
  transition:border-color .2s}
.kaart-contact input:focus-visible,.kaart-contact select:focus-visible,.kaart-contact textarea:focus-visible{outline:2px solid var(--inkt);outline-offset:2px;border-bottom-color:var(--inkt)}
.kaart-contact select{appearance:none;-webkit-appearance:none;padding-right:28px;cursor:pointer;
  background:linear-gradient(45deg,transparent 50%,var(--inkt) 50%) calc(100% - 14px) 55%/6px 6px no-repeat,linear-gradient(-45deg,transparent 50%,var(--inkt) 50%) calc(100% - 8px) 55%/6px 6px no-repeat}
.kaart-contact select option{color:#1d1712;background:#f4efe3}
/* het bericht: gelinieerd, zoals de regels op de kaart */
.kaart-contact textarea{resize:vertical;min-height:132px;padding:6px 8px 4px;line-height:24px;
  background:repeating-linear-gradient(180deg,transparent 0 23px,var(--kaart-lijn) 23px 24px) 0 6px/100% calc(100% - 6px) no-repeat;
  border:0;border-bottom:1.5px solid var(--kaart-lijn)}
.kaart-contact .twee-velden{display:grid;gap:0 22px}
@media (min-width:560px){.kaart-contact .twee-velden{grid-template-columns:1fr 1fr}}
.kaart-contact .vink{display:flex;align-items:center;gap:10px;margin-top:8px;min-height:32px;font-family:var(--f-tekst);font-size:15.5px;letter-spacing:0;text-transform:none;color:var(--inkt);cursor:pointer}
.kaart-contact .vink input{width:20px;height:20px;margin:0;accent-color:var(--i-diep);cursor:pointer}
.kaart-contact .vink input:focus-visible{outline:3px solid var(--inkt);outline-offset:2px}
.kaart-contact input:disabled{opacity:.45}
/* ronde 9: Instagram. De @ staat er al (en kan niet weg); het veld is alleen een dunne omlijning, zo onopvallend
   mogelijk; "Ik heb geen Instagram" is kleiner. */
.kaart-contact .ig-vak{display:flex;align-items:center;min-height:44px;padding:0 6px 0 10px;border:1px solid var(--kaart-lijn);border-radius:2px;background:transparent;transition:border-color .2s,box-shadow .2s}
.kaart-contact .ig-vak .ig-apen{font-family:var(--f-tekst);font-size:17px;line-height:24px;color:var(--inkt2);margin-right:1px;user-select:none}
.kaart-contact .ig-vak input{border:0;min-height:42px;padding:8px 4px 6px 2px;background:transparent}
.kaart-contact .ig-vak input::placeholder{color:var(--inkt2);opacity:.55}
.kaart-contact .ig-vak input:focus-visible{outline:none;border:0}
.kaart-contact .ig-vak:focus-within{border-color:var(--inkt);box-shadow:inset 0 0 0 1px var(--inkt)}
.kaart-contact .ig-vak.uit{opacity:.45}
.kaart-contact .veld.mis .ig-vak{border-color:#8f2a20;box-shadow:inset 0 0 0 1px #8f2a20}
.kaart-contact .veld.mis .ig-vak input{border:0}
.kaart-contact .veld-ig .vink{font-size:13px;min-height:28px;margin-top:6px;gap:8px}
.kaart-contact .veld-ig .vink input{width:16px;height:16px}
.kaart-contact .fout{margin:4px 0 0;font-family:var(--f-tekst);font-style:italic;font-size:14.5px;line-height:1.35;color:#8f2a20}
.kaart-contact .veld.mis input,.kaart-contact .veld.mis select,.kaart-contact .veld.mis textarea{border-bottom:2px solid #8f2a20}
.kaart-contact .veld.mis label{color:#8f2a20}
/* de honeypot: buiten beeld, niet weg (een spambot ziet hem, een mens niet) */
.kaart-contact .veld.web{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.contact-privacy{margin-top:16px;font-size:14.5px;line-height:1.4;font-style:italic;color:var(--inkt2);max-width:34em}
.contact-acties{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:18px}
.kaart-contact .toets{border:0;background:none;cursor:pointer;font:inherit;font-family:var(--f-gravure);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase}
.kaart-contact .toets:disabled{cursor:default;opacity:.55}
.contact-status{font-size:15.5px;line-height:1.35;color:var(--inkt);max-width:28em}
.kaart-contact .dicht{position:absolute;right:12px;top:32px;z-index:5;width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 40% 30%,#4c423a,#15110e 70%);color:#e6d8bb;
  box-shadow:0 2px 0 #0a0806,0 3px 5px rgba(0,0,0,.5),0 0 0 1.5px #6d5733,inset 0 1px 0 rgba(255,240,210,.2)}
.kaart-contact .dicht svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.kaart-contact .dicht:hover{color:#fff4dc}
.kaart-contact .dicht:focus-visible{outline:3px solid #e2c585;outline-offset:3px}
/* ronde 9: het stempel staat in het midden van de kaart en is iets groter (26 px, was 20) */
.kaart-contact .stamp.verstuurd{position:absolute;left:50%;top:50%;right:auto;z-index:4;font-size:26px;padding:12px 24px 10px;border-width:3px;--sr:-12deg;--stamp:#14522f;opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(1.4);pointer-events:none;
  box-shadow:inset 0 0 0 3px var(--kaart),inset 0 0 0 5px var(--stamp)}
.kaart-contact.is-verstuurd .stamp.verstuurd{opacity:.92;transform:translate(-50%,-50%) rotate(-12deg) scale(1);transition:opacity .25s,transform .35s var(--uit)}
.kaart-contact.is-verstuurd .blad-vel{opacity:.92}
@media (max-width:559px){
  dialog.contact{width:calc(100% - 16px)}
  .kaart-contact .blad-vel{padding:26px 16px 66px;max-height:calc(100dvh - 80px)}
  .kaart-contact h2{font-size:26px}
  .kaart-contact .dicht{right:8px;top:30px}
  .kaart-contact .stamp.verstuurd{font-size:22px;padding:10px 18px 8px}
}
@media (prefers-reduced-motion:reduce){.kaart-contact.is-verstuurd .stamp.verstuurd{transition:none}}

/* ---------- 7. de voet: het jaartal ---------- */
.plaat-voet{margin:12px 0 0;padding-top:10px;border-top:1px solid rgba(40,26,8,.45);box-shadow:0 -1px 0 rgba(255,244,212,.45) inset;
  font-family:var(--f-gravure);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#3a2c12;text-shadow:0 1px 0 rgba(255,244,212,.45)}

/* ---------- de stickers liggen los op het doek (stickers.js legt ze, willekeurig, buiten de inhoud) ---------- */
.doek > .sticker{left:var(--sx,0px);top:var(--sy,0px);margin:0!important} /* geen sectieafstand: hij ligt los */
.sticker[data-weg]{display:none}

/* een lange kop als badge mag breder zijn dan de opgezette letter (anders drie regels plaat) */
.badge.stempelkop{max-width:22em}

/* ledenkaart, eindbeoordelaar punt 1 (vervolg): het vel scrolt, dus de twee gaatjes mogen niet in het scrollende vel zitten
   (anders schuift de tekst erdoorheen). De gaatjes zitten nu in een vaste strook onderaan de kaart zelf. */
.kaart-contact{padding-bottom:26px;background:var(--kaart);border-radius:10px 10px 9px 9px;
  -webkit-mask:
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 40% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 40% 100%/24px 15px no-repeat,
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 60% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 60% 100%/24px 15px no-repeat,
    linear-gradient(#000,#000);
  -webkit-mask-composite:destination-out,destination-out,destination-out,destination-out,source-over;
  mask:
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 40% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 40% 100%/24px 15px no-repeat,
    radial-gradient(circle 12px at 50% 12px,#000 98%,#0000) 60% calc(100% - 14px)/24px 24px no-repeat,
    linear-gradient(#000,#000) 60% 100%/24px 15px no-repeat,
    linear-gradient(#000,#000);
  mask-composite:exclude,exclude,exclude,exclude,add}
.kaart-contact .blad-vel{-webkit-mask:none;mask:none;border-radius:10px 10px 0 0;padding-bottom:36px}
.kaart-contact .punaise{--px:68%}
@media (max-width:559px){.kaart-contact .blad-vel{padding-bottom:30px}}


/* ======================================================================
   RONDE 9 · DE FOOTER: links iconen (Instagram, contact), rechts een typeplaatje (rating plate)
   Het oude typeplaatje met titel, Web, Serienr., Instagramlink en Output is weg. Drie uitvoeringen van het plaatje en
   drie sets iconen staan op materialen.html; in de footer staat .rp-relief (zwart veld met opstaande messing letters,
   zoals het naamplaatje in de kop). RONDE 10: de iconen zijn drukknoppen (.ic-druk): dezelfde rechthoekige knop als
   LIGHTS en MENU, iets groter (66 × 44), met het icoon erin gegraveerd; de knop zakt in als je drukt. Op een telefoon
   staan de knoppen boven het typeplaatje in plaats van ernaast, want samen passen ze niet op één regel en dan werden
   de teksten van het plaatje platgedrukt. RONDE 11: op Arjans iPhone liepen de regels toch over de rand en over de
   schroefjes (het plaatje was daar 147 px breed, op mijn testschermen 235). Het plaatje is nu zo gebouwd dat dat niet
   meer kan: de rechterkolom mag afbreken in plaats van uitsteken, op een telefoon is het plaatje breder en de letters een
   maat groter (9 px), en kop.js meet na het laden van de letters of elke regel past en maakt de letters anders kleiner
   (SDCKop.typeplaat). De schroefjes staan op de rand van het kader, buiten het zwarte veld.
   ====================================================================== */
.plintbalk{max-width:1168px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px 24px}
.plint-iconen{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:6px}
.icoon{position:relative;display:grid;place-items:center;width:44px;height:44px;color:#d2b67c;text-decoration:none;border-radius:50%}
.icoon svg{display:block;width:26px;height:26px;fill:currentColor}
.icoon:focus-visible{outline:3px solid #e2c585;outline-offset:3px}
/* D · drukknop (ronde 10, in de footer): de rechthoekige drukknop uit onderdelen.js met het icoon als gravure */
.ic-druk{width:66px;height:44px;border-radius:6px}
.ic-druk .dop{display:block;width:66px;height:44px}
.ic-druk svg{width:100%;height:100%;fill:none}
.ic-druk:hover .dop-kap{transform:translateY(.6px)}
.ic-druk:active .dop-kap{transform:translateY(2px)}
.ic-druk:active .dop-schaduw{opacity:.55}
.ic-druk:focus-visible{outline-offset:1px;border-radius:7px}
@media (max-width:559px){
  .plintbalk{flex-wrap:wrap;justify-content:center;gap:16px 24px}
  .plint-iconen{flex:1 1 100%;justify-content:center;gap:14px}
  /* ronde 11: het plaatje krijgt de ruimte die er nu is (de knoppen staan erboven): breder, letters 9 px */
  .plint .rp{font-size:9px;width:min(100%,300px)} /* .plint erbij: de basisregel (.rp, 8 px) staat verderop in dit bestand en zou anders winnen */
  .rp dl{gap:4px 16px}
  .rp-relief{padding:8px 14px 7px}
}
/* A · massief: het logo zelf uit messing gezaagd, met licht op de bovenrand en een schaduw op het hout */
.ic-massief svg{fill:url(#ic-messing);
  filter:drop-shadow(0 1px 0 rgba(255,246,214,.55)) drop-shadow(0 -.6px 0 rgba(40,26,8,.9)) drop-shadow(2px 3px 2px rgba(0,0,0,.6))}
.ic-massief:hover svg,.ic-massief:focus-visible svg{filter:drop-shadow(0 1px 0 rgba(255,246,214,.8)) drop-shadow(0 -.6px 0 rgba(40,26,8,.9)) drop-shadow(2px 3px 2px rgba(0,0,0,.6)) brightness(1.08)}
/* B · knop: een ronde messing drukknop met het logo erin gegraveerd */
.ic-knop{width:44px;height:44px}
.ic-knop::before{content:"";position:absolute;inset:3px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#f3e3b8,#c9ab6c 40%,#a0824a 70%,#6d5733);
  box-shadow:0 0 0 1px #3a2a14,0 1px 0 1px rgba(255,246,214,.35),0 3px 5px rgba(0,0,0,.6),inset 0 -2px 3px rgba(40,26,8,.5),inset 0 1px 1px rgba(255,246,214,.6)}
.ic-knop svg{position:relative;width:20px;height:20px;fill:#2a1d0c;filter:drop-shadow(0 1px 0 rgba(255,246,214,.55))}
.ic-knop:active::before{box-shadow:0 0 0 1px #3a2a14,0 1px 2px rgba(0,0,0,.6),inset 0 -1px 2px rgba(40,26,8,.5)}
/* C · plaatje: een zwart geëmailleerd vierkantje met een messing rand en het logo in messing, zoals het naamplaatje */
.ic-plaatje{border-radius:3px}
.ic-plaatje::before{content:"";position:absolute;inset:4px;border-radius:3px;background:linear-gradient(180deg,#221b15,#0f0c0a);
  box-shadow:0 0 0 1px #6d5733,0 0 0 2px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,200,.1)}
.ic-plaatje svg{position:relative;width:20px;height:20px;fill:#dcc28a}
.ic-plaatje:hover svg{fill:#f3e3b8}

/* het typeplaatje: klein, kleine letters, regels netjes onder elkaar (label links, waarde rechts), vier schroefjes */
.rp{position:relative;flex:none;font-family:var(--f-gravure);font-size:8px;letter-spacing:.12em;text-transform:uppercase;line-height:1.5;
  padding:10px 18px 9px;border-radius:2px;color:#1f170c}
.rp{max-width:100%;box-sizing:border-box}
.rp dl{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 18px;align-items:baseline}
.rp dl > div{display:contents}
.rp dt{white-space:nowrap}
.rp dd{margin:0;text-align:right;overflow-wrap:anywhere} /* ronde 11: mag afbreken, steekt nooit meer uit */
.rp .rp-voet{margin-top:5px;padding-top:4px;text-align:center;white-space:nowrap}
.rp .schroef{width:7px;height:7px;--s:25deg}
.rp .schroef::after{top:2.8px;height:1.1px}
.rp .schroef:nth-of-type(1){left:5px;top:5px}.rp .schroef:nth-of-type(2){right:5px;top:5px;--s:80deg}
.rp .schroef:nth-of-type(3){left:5px;bottom:5px;--s:-40deg}.rp .schroef:nth-of-type(4){right:5px;bottom:5px;--s:120deg}
/* 1 · gegraveerd: een messing plaatje met de letters erin gesneden en zwart gevuld, een dubbele kaderlijn */
.rp-gegraveerd{background:
    radial-gradient(ellipse 30% 80% at 90% 100%,rgba(58,38,12,.3),transparent 70%),
    repeating-linear-gradient(0deg,rgba(255,246,214,.07) 0 1px,rgba(60,40,10,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#d2b67c,#bd9f63 50%,#ab8d52);
  box-shadow:0 0 0 1px #5d482a,0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,246,214,.5)}
.rp-gegraveerd::before{content:"";position:absolute;inset:11px 10px;pointer-events:none;border:1px solid rgba(40,26,8,.5);box-shadow:inset 0 0 0 1px rgba(255,244,212,.35),0 0 0 1px rgba(255,244,212,.25)}
.rp-gegraveerd dt{color:#3a2c12;text-shadow:0 1px 0 rgba(255,244,212,.45)}
.rp-gegraveerd dd,.rp-gegraveerd .rp-voet{color:#1f170c;text-shadow:0 1px 0 rgba(255,244,212,.5)}
.rp-gegraveerd .rp-voet{border-top:1px solid rgba(40,26,8,.45);box-shadow:0 -1px 0 rgba(255,244,212,.45) inset}
/* 2 · reliëf: een messing kader met daarin een zwart gestructureerd veld en opstaande messing letters (zoals de plaatjes
   op oude motoren en achterop versterkers; en zoals het naamplaatje in de kop) */
.rp-relief{color:#dcc28a;border:7px solid transparent;padding:6px 12px 5px;border-radius:3px;
  background:
    linear-gradient(180deg,#1d1713,#0f0c0a) padding-box,
    linear-gradient(180deg,#d8bd83,#bd9e62 45%,#9d7f47) border-box;
  box-shadow:0 0 0 1px #4a3920,0 3px 8px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,246,214,.35),inset 0 2px 4px rgba(0,0,0,.9)}
.rp-relief::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:1px;background:var(--korrel) 0 0/120px 120px;opacity:.14;mix-blend-mode:screen}
.rp-relief dt{color:#b89a5e}
.rp-relief dd,.rp-relief .rp-voet{color:#e6cf97;text-shadow:0 1px 0 rgba(255,246,214,.25),0 -1px 0 rgba(0,0,0,.85)}
.rp-relief dt{text-shadow:0 1px 0 rgba(255,246,214,.18),0 -1px 0 rgba(0,0,0,.85)}
.rp-relief .rp-voet{border-top:1px solid rgba(216,189,131,.35)}
.rp-relief .schroef{width:8px;height:8px}
.rp-relief .schroef:nth-of-type(1){left:-4px;top:-4px}.rp-relief .schroef:nth-of-type(2){right:-4px;top:-4px}
.rp-relief .schroef:nth-of-type(3){left:-4px;bottom:-4px}.rp-relief .schroef:nth-of-type(4){right:-4px;bottom:-4px}
/* 3 · vensters: een messing plaatje met gegraveerde labels; de waarden staan in verzonken donkere venstertjes, gestempeld */
.rp-vensters{background:
    repeating-linear-gradient(0deg,rgba(255,246,214,.07) 0 1px,rgba(60,40,10,.05) 1px 2px,transparent 2px 3px),
    linear-gradient(180deg,#d2b67c,#bd9f63 50%,#ab8d52);
  box-shadow:0 0 0 1px #5d482a,0 3px 8px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,246,214,.5)}
.rp-vensters dl{gap:4px 14px}
.rp-vensters dt{color:#3a2c12;text-shadow:0 1px 0 rgba(255,244,212,.45)}
.rp-vensters dd{color:#e9d6a4;background:linear-gradient(180deg,#0c0906,#1b140d);padding:1px 7px 0;border-radius:1px;letter-spacing:.1em;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9),0 1px 0 rgba(255,244,212,.45),inset 0 0 0 .5px rgba(0,0,0,.6)}
.rp-vensters .rp-voet{color:#1f170c;text-shadow:0 1px 0 rgba(255,244,212,.5)}
/* ronde 11: de regel uit ronde 9 die het plaatje onder 420 px op 7,5 px zette is weg; het plaatje heeft nu de volle breedte (de knoppen staan erboven) en kop.js meet of het past */