/* Sit Down Club · ronde 6 · wat er op het doek zit: homepage en albumpagina. */

.doek > * + *{margin-top:34px}
@media (min-width:900px){.doek > * + *{margin-top:56px}}
/* ronde 6: "Over de club" is één blok (kernzin, week en club) met dezelfde afstanden; de losse stickers tellen niet mee */
.over > * + *{margin-top:34px}
@media (min-width:900px){.over > * + *{margin-top:56px}}
.over > section{position:relative}
.doek > .sticker + *{margin-top:0}

/* ---------- de kernzin: woorden uit tijdschriften en kranten geknipt (ronde 4) ----------
   Elk woord komt uit een ander drukwerk: krantenkop, tijdschrifttitel, advertentie, rubriekkop. Rechte,
   strakke knipranden, een smal randje papier om het woord, de woorden los van elkaar en netjes op een
   regel gezet. Geen losse letters. Dezelfde opmaak staat als drukklare SVG in merch/kernzin.svg. */
.kernzin h1{display:flex;flex-direction:column;gap:14px;max-width:1100px;padding-top:6px}
.knipregel{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 13px}
.knip{position:relative;display:inline-block;line-height:1;padding:.14em .32em .17em;
  font-size:clamp(23px,6vw,42px);
  background:var(--papier-knip,#f7f4ed);color:var(--inkt-knip,#1d1712);
  /* het smalle randje papier om een gekleurd vlak */
  box-shadow:0 0 0 var(--rand-knip,0px) var(--papier-rand,#f6f2e8);
  transform:translateY(var(--ty,0px)) rotate(var(--r,0deg));
  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.28)) drop-shadow(2px 5px 5px rgba(0,0,0,.4))}
.knipregel.groot .knip{font-size:clamp(30px,8.2vw,56px)}
/* regel 1: Een luisterclub op Instagram. */
/* ronde 5: bijna elk woord op gekleurd papier of met gekleurde inkt, zoals in een stapel verschillende bladen;
   alleen "op" blijft een stukje kraftpapier. Drie woorden volgen de kleurstand (diep, vlak, tweede). */
.k1{font-family:"Blad",Georgia,serif;--papier-knip:#1e3f8c;--inkt-knip:#f6f1e4;--rand-knip:3px;--papier-rand:#f4efe3;--r:-.7deg}
.k2{font-family:"Krant",Arial,sans-serif;--papier-knip:var(--i-diep);--inkt-knip:#fdf6e6;--rand-knip:3px;--papier-rand:#f4efe3;--r:.4deg;letter-spacing:-.01em}
.k3{font-family:"Rubriek","Courier New",monospace;font-size:.66em;--papier-knip:#d9c79a;--inkt-knip:#2a2118;--r:.3deg;padding:.36em .5em .38em}
.k4{font-family:var(--f-kop);--papier-knip:var(--i-vlak);--inkt-knip:#1a0e12;--rand-knip:3px;--papier-rand:#f8f4ea;--r:-.5deg}
/* regel 2: Elke week één heel album. */
.k5{font-family:"Krant",Arial,sans-serif;text-transform:uppercase;font-size:.86em;--papier-knip:#e9c33a;--inkt-knip:#1d1712;--rand-knip:3px;--papier-rand:#f6f2e8;--r:-.6deg;padding:.2em .32em .22em}
.k6{font-family:"Blad",Georgia,serif;--papier-knip:#b8322a;--inkt-knip:#fbf3e4;--rand-knip:3px;--papier-rand:#f4efe3;--r:.5deg}
.k7{font-family:var(--f-kop);--papier-knip:#141110;--inkt-knip:#f2e7cf;--rand-knip:3px;--papier-rand:#f4efe3;--r:-.4deg}
.k8{font-family:var(--f-gravure);font-size:.74em;letter-spacing:.04em;--papier-knip:var(--i-tweede);--inkt-knip:#f6f1e4;--rand-knip:3px;--papier-rand:#f4efe3;--ty:-2px;--r:.8deg;padding:.3em .42em .32em}
.k9{font-family:"Krant",Arial,sans-serif;text-transform:uppercase;font-size:.86em;--papier-knip:#d9522c;--inkt-knip:#fbf3e4;--rand-knip:3px;--papier-rand:#f6f2e8;--r:-.8deg;padding:.2em .32em .22em}
.knip .punaise{--py:-9px;--px:92%}
.k9 .punaise{--px:10%}

/* ---------- twee kolommen: de week en de club ---------- */
.twee{display:grid;gap:44px}
@media (min-width:900px){.twee{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}}

.dagen{list-style:none;margin:0;padding:0}
.dagen li{position:relative}
.dagen li + li{margin-top:var(--rg)}
.dag{position:absolute;left:-52px;top:0;width:40px;text-align:center;font-family:var(--f-kop);font-size:19px;color:var(--i-tekst)}
.dagen b{font-weight:600}
/* ronde 5: elke regel op het blocnotevel wijkt een klein beetje af van de lijntjes, zoals echt geschreven,
   maar nooit een halve regel (dat gaf in ronde 4 lijntjes dwars door de tekst) */
.blocnote li,.blocnote .opdracht li{transform:translateY(var(--j,0px)) rotate(var(--jr,0deg))}
.blocnote li:nth-child(4n+1){--j:-1px;--jr:.15deg}
.blocnote li:nth-child(4n+2){--j:1px;--jr:-.1deg}
.blocnote li:nth-child(4n+3){--j:0px;--jr:.2deg}
.blocnote li:nth-child(4n+4){--j:-1.5px;--jr:-.15deg}
.blocnote h2{transform:translateY(-1px) rotate(-.2deg)}
/* het weekend: daar draait het om (ronde 4, punt 7). Groot op hetzelfde vel. Tot ronde 10 met een rode pen omcirkeld;
   vanaf ronde 11 zijn de vier regels van de opdracht met een ouderwetse markeerstift aangestreept (Stabilo), in een
   kleur per stand (--marker, zie kast.css: Cover trekt naar de hoes, Club groen, Loud zuurgeel). */
.weekend{position:relative;margin-top:calc(var(--rg) * 2);padding:0 8px 0 0}
.weekend .dag{top:4px;font-size:16px;line-height:1.05;width:56px;left:-62px}
.weekend .dag small{display:block;font-family:var(--f-tekst);font-style:italic;font-size:12px;line-height:1.2;margin-top:4px;color:var(--inkt2);letter-spacing:0}
.weekend h3{font-family:var(--f-kop);font-size:clamp(24px,7vw,30px);line-height:var(--rg);margin:0 0 5px;color:var(--inkt);transform:translateY(-1px) rotate(-.3deg)} /* eindbeoordelaar ronde 6, punt 6: de p van luisteropdracht raakte "Ga zitten." */
.weekend .opdracht{margin:0;padding:0;list-style:none;font-family:var(--f-tekst);font-weight:600;font-size:21px;line-height:var(--rg);color:var(--inkt)}
.weekend .opdracht li b{color:var(--i-tekst);font-weight:600}
/* de markeerstreep: één haal per regel (een span .streep om de tekst), zo lang als de tekst, met schuine uiteinden zoals
   de brede punt van een Stabilo, en vermenigvuldigd met het papier zodat de lijntjes en de inkt erdoorheen blijven
   staan. Breekt een regel af op een smalle telefoon, dan krijgt elk stuk zijn eigen haal (box-decoration-break). Elke
   regel net iets anders (hoogte, overloop, richting), anders ziet het eruit als een tekstmarkering uit Word. */
.weekend{--marker:#ffe14d}
.weekend .opdracht .streep{padding:.06em .36em .02em .28em;margin-left:-.28em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone; /* breekt een regel af, dan krijgt elk stuk zijn eigen haal */
  background-image:linear-gradient(104deg,transparent .4%,var(--marker) 1.6%,color-mix(in srgb,var(--marker) 90%,#fff) 40%,var(--marker) 60%,var(--marker) 97.6%,transparent 99.2%);
  background-size:100% 78%;background-position:0 58%;background-repeat:no-repeat;
  background-blend-mode:multiply;mix-blend-mode:multiply;transition:background-image .4s}
/* elke regel een iets andere haal: de volgende net iets lager en breder, de derde van rechts naar links gezet */
.weekend .opdracht li:nth-child(2) .streep{background-size:100% 82%;background-position:0 64%;padding-right:.5em}
.weekend .opdracht li:nth-child(3) .streep{background-image:linear-gradient(-104deg,transparent .4%,var(--marker) 1.8%,var(--marker) 97.8%,transparent 99.4%);background-size:100% 74%;background-position:0 52%}
.weekend .opdracht li:nth-child(4) .streep{background-size:100% 80%;background-position:0 62%;padding-right:.6em}
/* ronde 6: een svg krijgt zijn hoogte niet uit top+bottom (hij houdt zijn eigen verhouding), dus de maat staat er expliciet;
   daardoor liep de rode omlijning in ronde 5 onder het vel uit */
/* de rode pen (.pen) is in ronde 11 vervangen door de markeerstift hierboven */

.club h2{margin-bottom:26px;margin-left:4px}
.club .rolodex .stamp.los{right:22px;bottom:58px;--sr:-7deg;--stamp:#8f2a20}
.club .rolodex .blad-vel{padding-bottom:92px}
@media (max-width:480px){.club .rolodex .stamp.los{font-size:10px;letter-spacing:.14em;--sr:-3deg}}
.club .letterbord{margin:0 0 34px 6px}
.club .knipzin,.club .dymozin,.club .plaatje{margin:0 0 34px 6px} /* nog te kiezen: de andere merkzinnen op dezelfde plek (zie kast.css) */
.club .rolodex{max-width:36em}
.club .rolodex .blad-vel p + p{margin-top:.8em}
.club .rolodex .blad-vel{padding-top:28px}

/* ---------- deze week: de hoes als voorwerp ---------- */
.deze{display:grid;gap:26px;align-items:center}
@media (min-width:900px){.deze{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.hoesfoto{margin:0;position:relative;transform:rotate(-1.8deg);max-width:520px}
.hoesfoto a{display:block;text-decoration:none}
.hoesfoto a:focus-visible{outline:3px solid #e2c585;outline-offset:6px}
.hoesfoto a:hover img,.hoesfoto a:focus-visible img{box-shadow:0 1px 0 rgba(255,255,255,.08),2px 3px 2px rgba(0,0,0,.35),8px 24px 30px -6px rgba(0,0,0,.75)}
.hoesfoto img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  box-shadow:0 1px 0 rgba(255,255,255,.08),2px 3px 2px rgba(0,0,0,.35),6px 18px 26px -6px rgba(0,0,0,.7)}
/* de buitenhoes van plastic: een schuine glans en een kreukel */
.hoesfoto::after{content:"";position:absolute;inset:-6px;pointer-events:none;border-radius:2px;
  background:linear-gradient(118deg,rgba(255,255,255,0) 18%,rgba(255,255,255,.14) 24%,rgba(255,255,255,.03) 31%,rgba(255,255,255,0) 36%,rgba(255,255,255,0) 70%,rgba(255,255,255,.07) 76%,rgba(255,255,255,0) 82%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hoesfoto .punaise{--px:50%;--py:-14px;z-index:4}
.titelblok{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
/* ronde 5: de artiest is een Dymo-label in de kleur van de stand, de albumtitel staat in opgezette letters op het
   doek (zoals het logo op een versterker). Allebei met schaduw (ronde 4, punt 8). */
.artiest.dymo-kop{font-size:clamp(14px,3vw,20px);letter-spacing:.24em;--r:-1.4deg;margin:0 0 2px 6px;align-self:flex-start}
.album.opgezet{--r:-3deg;margin:clamp(10px,2vw,20px) 0 6px 0;align-self:flex-start}
/* ronde 11: in Club zijn artiest en album allebei een geëmailleerd plaatje (kop D, badge) met een messing ring van 4 px
   eromheen; die stonden met 2 px tussen de dozen tegen elkaar aan (de ring erbij: over elkaar heen). Nu 16 px ertussen. */
.titelblok .album.badge{margin-top:16px} /* ronde 11: was 2 px; de titel draait -3° om zijn linkeronderhoek, dus zijn rechterbovenhoek komt tot 18 px omhoog en liep over het artiestlabel heen */
.titelblok .haak-kaart{margin-top:10px}
.deze h2,.album-kop h1{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.feiten{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.feiten li .dymo{background-color:#141110}
/* ronde 6: de kleuren van deze labels per stand staan in kast.css (RONDE 6, punt 2 en 3) */
.haak{font-family:var(--f-tekst);font-style:italic;font-size:clamp(20px,4.2vw,27px);line-height:1.3;color:var(--inkt);display:block}
.nieuw{font-size:15px;color:var(--doek-inkt2);max-width:34em}
.nieuw a{color:var(--doek-inkt)}

/* ---------- alle volumes: hoezen op een plank, horizontaal scrollen zodra ze niet meer passen ---------- */
.volumes h2{margin-bottom:14px}
/* ronde 11: een tweede messing lat boven de hoezen, zodat ze tussen twee latten staan (zoals in een platenbak) */
.plank.boven{margin:0 -6px 2px}
.bak{list-style:none;margin:0;padding:10px 4px 22px;display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-color:#3e2a18 transparent;scrollbar-width:thin;overscroll-behavior-x:contain;position:relative}
.bak li{flex:0 0 auto;width:clamp(96px,27vw,196px);scroll-snap-align:start}
.bak a{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-decoration:none}
.bak-hoes{display:block;width:100%;aspect-ratio:1;position:relative;transform:rotate(var(--kant,-1deg));
  box-shadow:2px 3px 2px rgba(0,0,0,.35),4px 12px 16px -4px rgba(0,0,0,.7);transition:transform .3s var(--uit)}
.bak li:nth-child(even) .bak-hoes{--kant:1.2deg}
.bak a:hover .bak-hoes,.bak a:focus-visible .bak-hoes{transform:rotate(0) translateY(-6px)}
.bak-hoes img{display:block;width:100%;height:100%;object-fit:cover}
.leeg-hoes{display:grid;place-items:center;width:100%;height:100%;background:#6f675a;
  background-image:linear-gradient(135deg,rgba(255,255,255,.1),transparent 60%);
  font-family:var(--f-gravure);font-size:13px;letter-spacing:.3em;color:#f0e9da}
.bak a[aria-current] .dymo{background-color:var(--i-diep)}
@media (min-width:700px){.bak a[aria-current] .dymo::after{content:" · hier";letter-spacing:.14em}}
.bak .dymo{white-space:nowrap}
/* ronde 9: de plank is een messing lat, in dezelfde afwerking als de frontplaat (geborsteld, doffe plekken, korrel),
   met een schroefje aan elk eind; in alle drie de standen hetzelfde */
.plank{position:relative;height:16px;margin:-14px -6px 0;border-radius:2px;
  background:
    radial-gradient(circle at 14px 50%,#f0dcae 0 .8px,#b89a5e 2px,#5a4526 3.4px,rgba(0,0,0,.35) 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 14px) 50%,#f0dcae 0 .8px,#b89a5e 2px,#5a4526 3.4px,rgba(0,0,0,.35) 4px,transparent 5px),
    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 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:0 0 0 1px #5d482a,0 1px 0 1px rgba(255,244,212,.25),0 8px 12px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,246,214,.55),inset 0 -2px 0 rgba(40,26,8,.5)}
.plank::after{content:"";position:absolute;inset:0;border-radius:2px;pointer-events:none;background:var(--korrel) 0 0/180px 180px;opacity:.18;mix-blend-mode:multiply}
.bak-hint{margin-top:12px} /* als Dymo-label: kleine tekst los op het doek haalt het contrast niet */

/* ---------- de naden: stroken doek waar de stickers zitten ---------- */
.naad{position:relative;height:84px}
.naad .sticker{left:var(--x,10%);top:var(--y,0)}
.naad .schade{left:var(--sx,70%);top:var(--sy,-10px)}
@media (min-width:900px){
  .naad{height:40px}
  .naad .sticker{left:var(--xd,var(--x,10%));top:var(--yd,var(--y,0))}
  .naad .schade{left:var(--sxd,var(--sx,70%));top:var(--syd,var(--sy,-10px))}
}

/* ---------- stickervel ---------- */
.vel-sectie{display:flex;flex-direction:column;align-items:center}
.stickervel{position:relative;width:100%;max-width:780px;padding:40px 18px 22px;transform:rotate(.8deg);
  background:linear-gradient(125deg,rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 60%,rgba(255,255,255,.2) 72%,rgba(255,255,255,0) 80%),#efece4;
  box-shadow:1px 2px 0 rgba(0,0,0,.2),3px 14px 18px -4px rgba(0,0,0,.6);color:#3b342b}
.vel-kop{position:absolute;left:18px;top:12px;font-family:var(--f-gravure);font-size:11px;letter-spacing:.16em;text-transform:uppercase}
.vel-kop b{font-weight:400;color:#6a5f50}
.vel-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 14px;align-items:center;justify-items:center}
@media (min-width:700px){.vel-raster{grid-template-columns:repeat(5,minmax(0,1fr))}}
.vak{position:relative;width:100%;display:grid;place-items:center;min-height:70px}
.vak.breed{grid-column:span 2}
@media (min-width:700px){.vak.breed{grid-column:span 3}}
.vak.heel{grid-column:1/-1}
/* de snijlijn blijft achter als je de sticker eraf haalt */
.vak::before{content:"";position:absolute;inset:6px;border:1px solid rgba(60,50,40,.16);border-radius:10px}
.vak.rond::before{inset:auto;width:min(84%,110px);aspect-ratio:1;border-radius:50%}
.stickervel .sticker{position:relative;inset:auto;width:100%;max-width:var(--w,120px)}
.stickervel .punaise{--py:-8px}

/* ======================================================================
   ALBUMPAGINA
   ====================================================================== */
.album-kop{display:grid;gap:24px;align-items:center}
@media (min-width:900px){.album-kop{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px}}
.album-kop h1{display:flex;flex-direction:column;gap:6px}
.album-kop .titelblok{gap:14px}

.stempelkop{max-width:12em}

/* Rolodexkaarten met links */
.kaarten{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:30px}
@media (min-width:760px){.kaarten{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px}}
.kaarten .rolodex:nth-child(odd){--r:-.9deg}.kaarten .rolodex:nth-child(even){--r:.8deg}
.kaarten h3{font-family:var(--f-kop);font-size:23px;line-height:1.15;margin:2px 0 10px}
.kaarten h3 i{font-family:var(--f-tekst);font-weight:600}
.kaarten .blad-vel p{font-size:16.5px;line-height:24px}
.uit-post{margin-top:8px;font-style:italic;color:var(--inkt2)}
/* ronde 5: niet elke kaart hetzelfde. Een getypte kaart, een handgeschreven aantekening, een stempel, een markeerstreep. */
.kaarten .getypt{display:block;margin-top:2px}
.kaarten .stamp.los{right:18px;bottom:36px}
.kaarten .rolodex .blad-vel{padding-bottom:64px}
.kaarten .hand-noot{position:absolute;right:20px;bottom:56px;max-width:9em;text-align:right;transform:rotate(-4deg)}
.kaarten .rolodex.met-noot .blad-vel{padding-right:120px}
@media (max-width:480px){.kaarten .rolodex.met-noot .blad-vel{padding-right:20px}.kaarten .hand-noot{position:static;display:block;margin-top:10px;text-align:left;transform:rotate(-2deg)}}
.kaart-links .hand{font-size:21px;margin-left:2px}
.kaart-links{display:flex;flex-wrap:wrap;gap:12px 14px;margin-top:18px}
.link-volgt{display:inline-block;padding:6px 12px 5px;transform:rotate(-4deg);
  font-family:var(--f-gravure);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:#a63a2f;
  border:2px solid #a63a2f;box-shadow:inset 0 0 0 2px var(--kaart,#f4efe3),inset 0 0 0 3.5px #a63a2f;
  -webkit-mask:var(--spikkel) 0 0/220px 220px;mask:var(--spikkel) 0 0/220px 220px}
.rolodex .punaise{--py:30px;--px:86%}

/* Zet hem op: een kassabon en de grote knop */
.zet{display:grid;gap:30px;align-items:start}
@media (min-width:900px){.zet{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}.zet-knop{padding-top:34px}}
.bon{max-width:360px;--r:-1.4deg}
.bon h2{font-family:var(--f-gravure);font-size:15px;letter-spacing:.2em;text-align:center;margin-bottom:4px}
.bon .kop-regel{text-align:center;border-bottom:1.5px dashed #6d655b;padding-bottom:10px;margin-bottom:10px}
.bon ol{list-style:none;margin:0;padding:0 0 10px;border-bottom:1.5px dashed #6d655b}
.bon ol li::before{content:"1 × ";opacity:.7}
.bon dl{margin:10px 0 0;display:grid;grid-template-columns:1fr auto;gap:0 12px}
.bon dt,.bon dd{margin:0}
.bon .slot{margin-top:14px;padding-top:10px;border-top:1.5px dashed #6d655b;text-align:center;font-size:14px;letter-spacing:.3em}
.bon .speld{--px:auto;--pr:-18px;--py:4px;--pr-hoek:38deg}
.zet-knop{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.zet-knop .toets{min-height:60px;font-size:13.5px;padding:0 26px 0 20px}
.lossless{font-size:16px;color:var(--doek-inkt2);max-width:30em}
.lossless b{color:var(--doek-inkt);font-weight:600}

/* Doe mee (ronde 6: onder de Spotify-knop, waar lege ruimte was) */
.mee{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:30px;width:100%}
.mee .opgezet{--r:-3deg;margin-left:6px} /* tot ronde 10: de titel als opgezette letters los boven de kaart */
/* ronde 11: de opdracht staat óp de kaart, als kop in de koppenletter, met "Doe mee" als ruiter: één kaartje dat
   zegt wat je moet doen, in plaats van een losse titel die bij niets leek te horen */
.mee .mee-titel{font-family:var(--f-kop);font-size:clamp(28px,5vw,40px);line-height:1.04;margin:0 0 12px;color:var(--inkt);transform:rotate(-.7deg);transform-origin:0 100%;max-width:7em}
.mee .rolodex p{font-size:18px}
.mee .rolodex.kaartje-los .punaise{--px:92%;--py:26px}
@media (min-width:900px){.mee{margin-top:44px}}

/* Bronnen op een lang blocnotevel */
.bronnen{max-width:880px;--r:.5deg}
.bronnen ol{margin:0;padding:0 0 0 1.2em}
.bronnen li{padding-left:.3em}
.bronnen li::marker{font-family:var(--f-gravure);font-size:12px;color:var(--i-tekst)}
.bronnen a{color:var(--inkt);text-decoration-color:rgba(29,23,18,.45)}
.bronnen a:hover{text-decoration-color:var(--inkt)}
.bronnen .punaise:first-of-type{--px:12%}
.bronnen .punaise:last-of-type{--px:88%}

/* korte teksten op een los kaartje */
.kaartje-los{max-width:30em;--r:-1deg}
.kaartje-los .blad-vel{padding:22px 22px 20px}
.kaartje-los p + p,.kaartje-los p + a,.kaartje-los a + p{margin-top:12px}
.kaartje-los .nieuw{color:var(--inkt2);font-size:15.5px}
.kaartje-los .nieuw a{color:var(--inkt)}
.rolodex.kaartje-los .blad-vel{padding:30px 22px 36px}
.kaartje-los .hand.schuin{display:block;margin:12px 0 12px;line-height:1.4;transform:rotate(-2deg)}
.rolodex.kaartje-los .punaise{--px:88%;--py:32px}
.mee .kaartje-los{--r:1.2deg}
.bon .lossless-regel{margin-top:12px;padding-top:10px;border-top:1.5px dashed #6d655b;text-transform:none;letter-spacing:.02em;font-family:var(--f-tekst);font-size:14px;line-height:1.45}
.bon .lossless-regel b{font-weight:600}
.pad{display:inline-block;width:8px;height:8px;margin:0 3px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ronde 5, eindbeoordelaar punt 7: op een smalle telefoon past "het weekend" niet naast de kop */
@media (max-width:480px){.weekend .dag small{display:none}}

/* 06-10-2026 (Arjan): de albumtitel altijd op één regel, op de telefoon en op de laptop. De server rekent uit hoe
   breed de titel is in em (--titel-em, uit de letterbreedtes van Damion); de letter wordt zo groot als in de kolom
   past, nooit groter dan de oude maat. 94cqi laat ruimte voor de schaduw en het kantelen (-3°). */
.album-kop .titelblok{container-type:inline-size;width:100%}
.album-kop .album.opgezet.groot{white-space:nowrap;font-size:min(clamp(96px,20vw,190px),calc(94cqi / var(--titel-em,4)))}

/* 06-10-2026 (Arjan): op de telefoon paste het bonnetje en de Spotify-knop niet. Het bonnetje is nooit breder dan de
   kolom (min 10 px voor het kantelen), en een lange knoptekst mag naar een tweede regel in plaats van uit beeld. */
.bon{max-width:min(360px,calc(100% - 10px))}
.zet-knop .toets{max-width:100%}
@media (max-width:430px){.zet-knop .toets.spotify{white-space:normal;line-height:1.35;padding-top:10px;padding-bottom:10px}}
.bon .kop-regel .heel{white-space:nowrap}