/*
Theme Name: Hollands Diep
Theme URI: https://hollandsdiep.live
Author: Hollands Diep
Description: Modern, donker thema voor de band Hollands Diep — 40 jaar nederpop historie. Eenpagina-opzet met secties voor de band, repertoire, video, optredens, foto's en contact.
Version: 2.7.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: hollandsdiep
*/

:root{
  --hd-bg:#100d0b;
  --hd-bg-2:#161210;
  --hd-ink:#f4efe9;
  --hd-ink-2:#d8cfc5;
  --hd-ink-3:#a99e93;
  --hd-ink-4:#9a9086;
  --hd-accent:#f9954a;
  --hd-accent-2:#ffb184;
  --hd-line:rgba(244,239,233,.14);
  --hd-line-accent:rgba(249,149,74,.24);
  /* Typografie. Terug naar het vorige lettertype? Zet in de Customizer
     "Klassieke typografie" aan, of wissel deze twee regels handmatig. */
  --hd-display:Anton,Helvetica,Arial,sans-serif;
  --hd-display-weight:400;
  --hd-body:Barlow,Helvetica,Arial,sans-serif;
}

body.hd-typo-klassiek{--hd-display:Antonio,Helvetica,Arial,sans-serif;--hd-display-weight:700;--hd-body:Chivo,Helvetica,Arial,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{
  overflow-x:hidden;max-width:100%;
  margin:0;background:var(--hd-bg);color:var(--hd-ink);
  font-family:var(--hd-body);font-size:17px;line-height:1.6;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
.hd-header img,.hd-hero img{object-fit:contain}
a{color:var(--hd-accent);text-decoration:none}
a:hover{color:var(--hd-accent-2)}
::selection{background:var(--hd-accent);color:var(--hd-bg)}
h1,h2,h3{font-family:var(--hd-display);font-weight:var(--hd-display-weight);letter-spacing:.015em;line-height:1.02;text-transform:uppercase;margin:0}
.hd-wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.hd-section{padding:clamp(64px,8vw,120px) 0}
.hd-eyebrow{margin:0 0 18px;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:var(--hd-accent);font-weight:700}
.hd-h2{font-size:clamp(33px,4.8vw,64px)}
.hd-btn{display:inline-block;padding:16px 30px;border-radius:999px;background:var(--hd-accent);color:var(--hd-bg);font-weight:600;font-size:16px;letter-spacing:.04em}
.hd-btn:hover{background:var(--hd-accent-2);color:var(--hd-bg)}
.hd-btn--ghost{background:transparent;border:1px solid rgba(244,239,233,.28);color:var(--hd-ink)}
.hd-btn--ghost:hover{background:rgba(244,239,233,.08);color:var(--hd-ink)}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}

/* Header */
.hd-header{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(16,13,11,.82);border-bottom:1px solid rgba(249,149,74,.18)}
.hd-header__inner{max-width:1240px;margin:0 auto;padding:14px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap;min-width:0}
.hd-nav,.hd-nav ul{min-width:0}
.hd-brand{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.hd-brand__name{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:18px;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-ink)}
.hd-brand__tag{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hd-accent);font-weight:600}
.hd-nav{display:flex;gap:22px;flex-wrap:wrap;margin-left:auto;align-items:center}
.hd-nav ul{display:flex;gap:22px;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0}
.hd-nav a{font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:var(--hd-ink-2)}
.hd-nav a:hover{color:var(--hd-ink)}
.hd-nav .hd-btn{padding:10px 18px;font-size:14px;text-transform:uppercase}

/* Hero */
.hd-hero{position:relative;isolation:isolate;max-width:100%;padding:clamp(56px,9vw,120px) 24px clamp(48px,7vw,96px);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.hd-hero__video{z-index:-3;transition:opacity .9s linear}
.hd-hero__video--tweede{z-index:-3}
.hd-hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,rgba(16,13,11,.82) 0%,rgba(16,13,11,.62) 45%,rgba(16,13,11,.88) 100%)}
.hd-hero__glow{position:absolute;top:-18%;left:50%;transform:translateX(-50%);width:min(1100px,140vw);height:min(1100px,140vw);background:radial-gradient(circle,rgba(249,149,74,.22) 0%,rgba(249,149,74,.06) 42%,rgba(16,13,11,0) 70%);animation:hd-glow 9s ease-in-out infinite;pointer-events:none}
@keyframes hd-glow{0%,100%{opacity:.55}50%{opacity:.9}}
/* Neonbuis: trage ademhaling van de gloed, met af en toe een kort haperen. */
@keyframes hd-neon{
  0%,100%{filter:drop-shadow(0 0 10px rgba(249,149,74,.55)) drop-shadow(0 0 34px rgba(249,149,74,.3)) brightness(1)}
  47%{filter:drop-shadow(0 0 16px rgba(249,149,74,.8)) drop-shadow(0 0 58px rgba(249,149,74,.5)) brightness(1.07)}
  62%{filter:drop-shadow(0 0 13px rgba(249,149,74,.7)) drop-shadow(0 0 46px rgba(249,149,74,.42)) brightness(1.04)}
}
  42%{opacity:.58}
  44.5%{opacity:.82}
  51%{opacity:.46}
  77.8%{opacity:.66}
}
.hd-hero__neon{position:relative;display:block;width:clamp(280px,72vw,1020px);max-width:90vw}
.hd-hero__neon .hd-hero__logo{width:100%;animation:hd-neon 5.5s ease-in-out infinite}
.hd-hero__neon--uit,.hd-hero__neon--uit .hd-hero__logo{animation:none}
@media (prefers-reduced-motion:reduce){.hd-hero__neon,.hd-hero__neon .hd-hero__logo,.hd-marquee__track,.hd-hero__glow{animation:none}}
.hd-hero__logo{position:relative;width:min(560px,80vw);height:auto;max-width:88vw;object-fit:contain;aspect-ratio:auto;filter:drop-shadow(0 0 10px rgba(249,149,74,.55)) drop-shadow(0 0 34px rgba(249,149,74,.3))}
.hd-hero img,.hd-hero .custom-logo,.hd-hero__neon img{width:min(560px,80vw) !important;max-width:80vw !important;height:auto !important;margin-inline:auto}
.hd-hero__neon{width:min(560px,80vw) !important;max-width:80vw}
.hd-hero__lead{position:relative;max-width:640px;margin:8px 0 0;font-size:clamp(17px,1.7vw,21px);line-height:1.55;color:var(--hd-ink-2);text-wrap:pretty}
.hd-hero__cta{position:relative;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px}

/* Marquee */
.hd-marquee{border-top:1px solid rgba(249,149,74,.18);border-bottom:1px solid rgba(249,149,74,.18);padding:18px 0;overflow:hidden;background:rgba(249,149,74,.05)}
.hd-marquee__track{display:flex;width:max-content;animation:hd-marquee 38s linear infinite}
.hd-marquee__row{display:flex;align-items:center;font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:clamp(18px,2.4vw,28px);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.hd-marquee__row span{padding:0 26px}
.hd-marquee__row i{color:var(--hd-accent);font-style:normal}
@keyframes hd-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.hd-marquee__track,.hd-hero__glow{animation:none}}

/* Band */
.hd-grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:clamp(32px,5vw,64px);align-items:stretch}
.hd-prose p{margin:0 0 18px;color:var(--hd-ink-2);line-height:1.7;text-wrap:pretty}
.hd-prose p:last-child{margin-bottom:0}
.hd-photo{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--hd-line-accent);min-height:320px;background:var(--hd-bg-2)}
.hd-photo img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hd-photo__empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--hd-ink-4);background:repeating-linear-gradient(135deg,rgba(244,239,233,.04) 0 8px,transparent 8px 16px)}
.hd-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--hd-line);padding-top:32px}
.hd-stats__n{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:52px;color:var(--hd-accent);line-height:1.02;letter-spacing:.01em}
.hd-stats__l{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--hd-ink-3);margin-top:6px}

/* Achtergrondvideo */
.hd-section--video{position:relative;overflow:hidden;isolation:isolate}
.hd-bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;pointer-events:none}
.hd-bgvideo--embed{overflow:hidden}
.hd-bgvideo--embed iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:max(100%,177.78vh);height:max(56.25vw,100%);border:0;pointer-events:none}
.hd-bgvideo__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(16,13,11,.94) 0%,rgba(16,13,11,.62) 30%,rgba(16,13,11,.62) 70%,rgba(16,13,11,.94) 100%)}
@media (prefers-reduced-motion:reduce){.hd-bgvideo{display:none}}

.hd-band-intro{max-width:72ch}

/* Repertoire */
.hd-band-alt{border-top:1px solid rgba(244,239,233,.1);background:var(--hd-bg-2)}
.hd-repertoire{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:1px;background:rgba(244,239,233,.12);border:1px solid rgba(244,239,233,.12)}
.hd-repertoire div{background:var(--hd-bg-2);padding:22px;display:flex;align-items:baseline;gap:14px}
.hd-repertoire b{flex:0 0 auto}
.hd-song{flex:1 1 auto;min-width:0}
.hd-song__title{display:block;font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:22px;text-transform:uppercase;letter-spacing:.02em;color:var(--hd-ink);line-height:1.12}
.hd-song__artist{display:block;font-size:13px;color:var(--hd-ink-3);margin-top:4px}
.hd-repertoire div:hover{background:#1e1815}
.hd-repertoire b{font-size:12px;color:var(--hd-accent);letter-spacing:.1em}
.hd-repertoire span{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:23px;letter-spacing:.02em;text-transform:uppercase;color:var(--hd-ink);line-height:1.2}

/* Audiospeler */
.hd-player{--hd-track-h:78px;--hd-track-gap:10px;--hd-player-h:calc(4 * var(--hd-track-h) + 3 * var(--hd-track-gap));display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(24px,3vw,40px);align-items:stretch}
.hd-player__deck{border:1px solid rgba(249,149,74,.3);border-radius:20px;background:linear-gradient(160deg,rgba(249,149,74,.12),var(--hd-bg-2) 60%);padding:clamp(24px,3vw,34px);height:var(--hd-player-h);display:flex;flex-direction:column;justify-content:center}
.hd-player__label{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--hd-ink-3)}
.hd-player__title{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:clamp(28px,3.4vw,40px);text-transform:uppercase;letter-spacing:.02em;color:var(--hd-ink);line-height:1.02;margin-top:10px;min-height:1.02em}
.hd-player__artist{font-size:15px;color:var(--hd-ink-2);margin-top:6px}
.hd-player__controls{display:flex;align-items:center;gap:18px;margin-top:26px}
.hd-player__toggle{flex:0 0 auto;width:64px;height:64px;border-radius:999px;border:0;background:var(--hd-accent);color:var(--hd-bg);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-appearance:none;appearance:none}
.hd-player__toggle svg{display:block;width:22px;height:22px}
.hd-player__toggle:hover{background:var(--hd-accent-2)}
.hd-player__track{flex:1 1 auto;min-width:0}
.hd-player__bar{height:8px;border-radius:999px;background:rgba(244,239,233,.16);cursor:pointer;overflow:hidden}
.hd-player__fill{height:100%;width:0;background:var(--hd-accent);border-radius:999px}
.hd-player__times{display:flex;justify-content:space-between;margin-top:8px;font-size:12px;color:var(--hd-ink-3);font-variant-numeric:tabular-nums}
.hd-player__leeg{margin:22px 0 0;font-size:13px;color:var(--hd-ink-4);border-top:1px solid var(--hd-line);padding-top:16px}
.hd-player__list{display:flex;flex-direction:column;gap:var(--hd-track-gap);height:var(--hd-player-h);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-width:thin;scrollbar-color:var(--hd-accent) rgba(244,239,233,.12)}
.hd-player__list::-webkit-scrollbar{width:8px}
.hd-player__list::-webkit-scrollbar-track{background:rgba(244,239,233,.1);border-radius:999px}
.hd-player__list::-webkit-scrollbar-thumb{background:var(--hd-accent);border-radius:999px}
.hd-track{display:flex;align-items:center;gap:16px;padding:0 20px;flex:0 0 var(--hd-track-h);height:var(--hd-track-h);border-radius:14px;background:var(--hd-bg-2);border:1px solid var(--hd-line);cursor:pointer;text-align:left;width:100%;font-family:var(--hd-body);color:inherit;transition:border-color .2s}
.hd-track:hover{border-color:rgba(249,149,74,.5)}
.hd-track.is-actief{border-color:rgba(249,149,74,.5)}
.hd-track.is-actief .hd-track__title{color:var(--hd-accent)}
.hd-track__nr{font-size:12px;letter-spacing:.1em;color:var(--hd-accent);font-weight:700;flex:0 0 auto}
.hd-track__body{flex:1 1 auto;min-width:0}
.hd-track__title{display:block;font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1;color:var(--hd-ink)}
.hd-track__artist{display:block;font-size:13px;color:var(--hd-ink-3);margin-top:3px}

/* Demo-video */
.hd-demo__lead{margin:0 0 36px;max-width:56ch;color:var(--hd-ink-2);line-height:1.7}
.hd-demo{position:relative;border-radius:20px;overflow:hidden;border:1px solid rgba(249,149,74,.3);background:#0b0908;aspect-ratio:16/9;max-width:1000px}
.hd-demo video{width:100%;height:100%;display:block;object-fit:cover;background:var(--hd-bg)}
.hd-demo__dek{position:absolute;inset:0;pointer-events:none;background-color:var(--hd-bg);background-position:center;background-size:cover;background-repeat:no-repeat;opacity:1;transition:opacity 1.2s ease}
.hd-demo.is-speelt .hd-demo__dek{opacity:0}

/* Optredens */
.hd-gigs{display:flex;flex-direction:column;gap:12px}
.hd-gig{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,26px);align-items:center;padding:20px 24px;border:1px solid var(--hd-line);border-radius:16px;background:var(--hd-bg);text-decoration:none;color:inherit;transition:border-color .2s ease,transform .2s ease}
.hd-gig:hover{border-color:rgba(249,149,74,.55);transform:translateX(3px);color:inherit}
.hd-gig__date{flex:0 0 auto;text-align:center;min-width:74px;border-right:1px solid var(--hd-line);padding-right:clamp(14px,2vw,20px)}
.hd-gig__day{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:44px;color:var(--hd-accent);line-height:1}
.hd-gig__month{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--hd-ink);margin-top:5px}
.hd-gig__year{font-size:11px;letter-spacing:.14em;color:var(--hd-ink-4);margin-top:2px}
.hd-gig__body{flex:1 1 auto;min-width:min(100%,180px)}
.hd-gig__where{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:26px;text-transform:uppercase;letter-spacing:.02em;color:var(--hd-ink);line-height:1.06;text-wrap:balance}
.hd-gig__meta{margin-top:8px;font-size:14px;color:var(--hd-ink-3);text-transform:capitalize;font-variant-numeric:tabular-nums}
.hd-gig__status{flex:0 0 auto;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--hd-accent);border:1px solid rgba(249,149,74,.4);border-radius:999px;padding:7px 14px;white-space:nowrap}
.hd-gig__status{order:3}
.hd-note{margin:8px 0 0;font-size:14px;color:var(--hd-ink-4)}

/* Foto's */
.hd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.hd-gallery img{transition:transform .5s ease}
.hd-gallery a:hover img{transform:scale(1.05)}
.hd-contact__outline{color:transparent;-webkit-text-stroke:1.5px var(--hd-accent);text-shadow:0 0 34px rgba(249,149,74,.35)}
.hd-gallery a,.hd-gallery figure{margin:0;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1px solid var(--hd-line);display:block;position:relative;background:var(--hd-bg-2)}
.hd-gallery img{width:100%;height:100%;object-fit:cover}

/* Foto vergroot bekijken */
.hd-lightbox{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;gap:clamp(8px,2vw,24px);padding:clamp(16px,4vw,48px);background:rgba(11,9,8,.94);backdrop-filter:blur(8px)}
.hd-lightbox.is-open{display:flex}
.hd-lightbox__doek{margin:0;flex:1 1 auto;min-width:0;height:100%;display:flex;align-items:center;justify-content:center}
.hd-lightbox__doek img{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.hd-lightbox__nav,.hd-lightbox__sluit{flex:0 0 auto;display:flex;align-items:center;justify-content:center;border:1px solid rgba(244,239,233,.24);background:rgba(22,18,16,.85);color:var(--hd-ink);border-radius:999px;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none}
.hd-lightbox__nav{width:56px;height:56px}
.hd-lightbox__nav:hover,.hd-lightbox__sluit:hover{background:var(--hd-accent);color:var(--hd-bg);border-color:var(--hd-accent)}
.hd-lightbox__sluit{position:absolute;top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px);width:48px;height:48px;z-index:2}
.hd-lightbox__teller{position:absolute;bottom:clamp(12px,3vw,28px);left:50%;transform:translateX(-50%);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--hd-ink-3);font-variant-numeric:tabular-nums}
@media (max-width:760px){
	.hd-lightbox{padding:16px 10px 64px}
	.hd-lightbox__nav{position:absolute;bottom:14px;width:52px;height:52px}
	.hd-lightbox__nav--vorige{left:16px}
	.hd-lightbox__nav--volgende{right:16px}
	.hd-lightbox__teller{bottom:30px}
}

/* Contact */
.hd-contact{border-top:1px solid var(--hd-line-accent);background:linear-gradient(180deg,rgba(249,149,74,.09),rgba(16,13,11,0));text-align:center}
.hd-contact__inner{display:flex;flex-direction:column;align-items:center}
.hd-contact h2{font-size:clamp(38px,6.4vw,88px);line-height:1;text-transform:uppercase;margin-bottom:18px}
.hd-contact p{margin:0 0 36px;max-width:560px;font-size:18px;color:var(--hd-ink-2);text-wrap:pretty}
.hd-contact__lead{margin-bottom:32px}
.hd-bevestiging{scroll-margin-top:100px;width:100%;max-width:820px;text-align:left;margin-bottom:40px;padding:clamp(26px,3vw,36px);border:1px solid rgba(249,149,74,.45);border-radius:20px;background:linear-gradient(160deg,rgba(249,149,74,.14),var(--hd-bg-2) 60%)}
.hd-bevestiging__vink{width:52px;height:52px;border-radius:999px;background:var(--hd-accent);color:var(--hd-bg);display:flex;align-items:center;justify-content:center;font-size:26px;line-height:1}
.hd-bevestiging h3{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:clamp(24px,3vw,34px);text-transform:uppercase;letter-spacing:.02em;color:var(--hd-ink);margin:18px 0 10px}
.hd-bevestiging p{margin:0;color:var(--hd-ink-2);line-height:1.6}
.hd-bevestiging p.hd-bevestiging__acties{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 0}
.hd-form{scroll-margin-top:100px;width:100%;max-width:820px;text-align:left;display:grid;gap:14px;margin-bottom:40px}
.hd-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hd-form__rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.hd-form label{display:grid;gap:7px}
.hd-form label span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hd-ink-3)}
.hd-form label span em{font-style:normal;letter-spacing:.08em;text-transform:none;color:var(--hd-ink-4)}
.hd-form input,.hd-form select,.hd-form textarea{padding:14px 16px;border-radius:12px;border:1px solid rgba(244,239,233,.2);background:var(--hd-bg-2);color:var(--hd-ink);font-size:16px;font-family:var(--hd-body);width:100%;color-scheme:dark}
.hd-form textarea{resize:vertical}
.hd-form input:focus,.hd-form select:focus,.hd-form textarea:focus{border-color:var(--hd-accent);outline:none}
.hd-form__voet{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:4px}
.hd-form__voet .hd-btn{border:0;cursor:pointer;font-weight:600;font-size:16px;font-family:var(--hd-body);letter-spacing:.04em}
.hd-form__melding{font-size:14px;color:var(--hd-accent)}
.hd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px;width:100%;max-width:820px;text-align:left}
.hd-card{padding:26px;border-radius:16px;border:1px solid rgba(244,239,233,.16);background:var(--hd-bg-2);display:block}
.hd-card__k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--hd-ink-3)}
.hd-card__v{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:20px;color:var(--hd-ink);margin-top:8px;word-break:break-word}
.hd-card--accent{background:var(--hd-accent);border-color:var(--hd-accent)}
.hd-card--accent .hd-card__k{color:rgba(16,13,11,.7)}
.hd-card--accent .hd-card__v{color:var(--hd-bg)}

/* Footer */
.hd-footer{border-top:1px solid rgba(244,239,233,.1);padding:36px 24px}
.hd-footer__inner{max-width:1240px;margin:0 auto;display:flex;gap:20px;flex-wrap:wrap;align-items:center;justify-content:space-between;font-size:14px;color:var(--hd-ink-4)}
.hd-footer__brand{display:flex;align-items:baseline;gap:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--hd-ink-3)}
.hd-footer__brand strong{font-family:var(--hd-display);font-weight:var(--hd-display-weight);font-size:17px;letter-spacing:.16em;color:var(--hd-ink)}

/* Losse pagina's & posts */
.hd-page{padding:clamp(48px,7vw,96px) 0}
.hd-page__title{font-size:clamp(28px,4.4vw,56px);margin-bottom:28px}
.hd-page .hd-prose{max-width:70ch}
.hd-page .hd-prose h2{font-size:clamp(22px,3vw,34px);margin:36px 0 16px}
.hd-page .hd-prose ul,.hd-page .hd-prose ol{color:var(--hd-ink-2);line-height:1.7}

/* ── Smartphones (desktoplayout blijft ongewijzigd) ───────────────── */
@media (max-width:760px){
	/* Header: merk boven, menu eronder horizontaal scrollbaar zodat
	   de items niet over drie regels vallen. */
	.hd-header__inner{padding:12px 16px;gap:10px;flex-direction:column;align-items:stretch}
	.hd-brand{justify-content:center}
	.hd-nav{margin-left:0;min-width:0;width:100%;gap:10px 16px;flex-wrap:wrap;justify-content:center;align-items:center}
	.hd-nav ul{flex-wrap:wrap;justify-content:center;gap:10px 16px;min-width:0}
	.hd-nav a{font-size:13px}
	.hd-nav .hd-btn{padding:9px 18px;flex:0 0 auto}
	.hd-header__inner{min-width:0}
	.hd-brand{min-width:0;flex-wrap:wrap;justify-content:center;gap:8px}
	.hd-brand__name{font-size:16px;letter-spacing:.12em}
	.hd-brand__tag{font-size:10px}

	/* Ruimere raakvlakken en minder zijmarge */
	.hd-wrap{padding:0 16px}
	.hd-hero{padding:40px 16px 44px}
	.hd-section{padding:56px 0}
	.hd-btn{padding:15px 26px;display:inline-block}

	/* Speler: kolommen onder elkaar, hoogtes niet meer vastzetten */
	.hd-player__deck{height:auto;padding:22px}
	.hd-player__list{height:auto;max-height:calc(4 * var(--hd-track-h) + 3 * var(--hd-track-gap));padding-right:2px}
	.hd-player__toggle{width:58px;height:58px}

	/* Agenda: datum en titel naast elkaar, status eronder */
	.hd-gig{padding:16px 18px;gap:14px}
	.hd-gig__date{min-width:58px;padding-right:14px}
	.hd-gig__day{font-size:36px;line-height:1}
	.hd-gig__where{font-size:21px}
	.hd-gig:hover{transform:none}

	/* Repertoire iets compacter */
	.hd-repertoire div{padding:18px 16px}
	.hd-song__title{font-size:20px}

	/* Formulier: volle breedte, knop over de hele regel */
	.hd-form__rij{grid-template-columns:1fr}
	.hd-form__voet{flex-direction:column;align-items:stretch}
	.hd-form__voet .hd-btn{width:100%;text-align:center}
	.hd-bevestiging__acties .hd-btn{flex:1 1 auto;text-align:center}

	/* Contact- en fotokaarten in één kolom */
	.hd-cards{grid-template-columns:1fr}
	.hd-gallery{grid-template-columns:repeat(2,1fr)}

	/* Footer gecentreerd */
	.hd-footer{padding:28px 16px}
	.hd-footer__inner{flex-direction:column;text-align:center;gap:12px}
	.hd-footer__brand{flex-direction:column;gap:6px}

	/* Lichtkrant iets kleiner zodat hij niet domineert */
	.hd-marquee{padding:14px 0}
}

@media (max-width:420px){
	.hd-gallery{grid-template-columns:1fr}
	.hd-gig{flex-direction:column;align-items:flex-start}
	.hd-gig__date{display:flex;align-items:baseline;gap:8px;border-right:0;border-bottom:1px solid var(--hd-line);padding:0 0 10px;width:100%;text-align:left}
	.hd-gig__day{font-size:30px}
	.hd-gig__month,.hd-gig__year{margin-top:0}
}
