/*
Theme Name: Klankkoepel
Description: Eigen theme voor kbgeluid.nl (Klankkoepel): niveaumeter-hero, geluidsdosis-rekenaar, golfbeeld per pagina.
Version: 1.0.3
Author: Klankkoepel
Text Domain: klankkoepel
*/

@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlowc-600-latin.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlowc-800-latin.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";src:url(assets/fonts/publicsans-400-700-latin.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Red Hat Mono";src:url(assets/fonts/redhatmono-400-latin.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlowc-600-latin-ext.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Barlow Condensed";src:url(assets/fonts/barlowc-800-latin-ext.woff2) format("woff2");font-weight:800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";src:url(assets/fonts/publicsans-400-700-latin-ext.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Red Hat Mono";src:url(assets/fonts/redhatmono-400-latin-ext.woff2) format("woff2");font-weight:400 500;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --paper:#f4f1ea; --paper-2:#ece7dc; --ink:#141414; --ink-2:#454340; --mute:#6b675f; --signal:#ff5a1f; --signal-d:#b0390b; --hair:rgba(20,20,20,.14); --hair-d:rgba(244,241,234,.18);
  --head:"Barlow Condensed","Arial Narrow",system-ui,sans-serif; --body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Red Hat Mono",ui-monospace,Menlo,monospace;
  --out:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 18px/1.68 var(--body)}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--signal-d);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--head);font-weight:800;line-height:1.02;letter-spacing:-.005em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);text-transform:uppercase}
h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
h3{font-size:1.5rem;font-weight:600}
p{margin:0 0 1.1em}
.wrap{width:min(1180px,100% - 2*clamp(16px,4vw,48px));margin-inline:auto}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:99;background:var(--ink);color:var(--paper);padding:.6em 1em}
.cue{font:500 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mute);margin-bottom:1rem}
.cue a{color:inherit}
.lead{font-size:clamp(1.08rem,1.6vw,1.26rem);color:var(--ink-2);max-width:60ch}
.hot{color:var(--signal-d)}

/* top */
.top{position:sticky;top:0;z-index:20;background:rgba(244,241,234,.92);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--hair)}
.top-row{display:flex;align-items:center;justify-content:space-between;min-height:66px}
.brand{display:flex;align-items:center;gap:.55rem;color:var(--ink);text-decoration:none;font:800 1.55rem/1 var(--head);text-transform:uppercase;letter-spacing:.02em}
.menu ul{display:flex;gap:1.6rem;list-style:none;margin:0;padding:0}
.menu a{color:var(--ink);text-decoration:none;font:600 1.08rem/1 var(--head);text-transform:uppercase;letter-spacing:.04em}
.menu a:hover{color:var(--signal-d)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;position:relative;cursor:pointer}
.menu-btn span{position:absolute;left:10px;right:10px;height:2.5px;background:var(--ink);transition:transform .25s var(--out)}
.menu-btn span:first-child{top:17px}.menu-btn span:last-child{top:25px}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:30;background:var(--signal);transform-origin:0 50%;transform:scaleX(var(--read,0))}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:.7em 1.3em;background:var(--ink);color:var(--paper);text-decoration:none;font:600 1.12rem/1 var(--head);text-transform:uppercase;letter-spacing:.05em;border-radius:2px;transition:background .2s,color .2s}
.btn:hover{background:var(--signal);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem}

/* hero */
.hero{padding:clamp(40px,7vw,96px) 0 clamp(40px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,5vw,72px);align-items:center}
.hero-grid>*{min-width:0}
.kk-meter{width:100%}
.kk-meter-dB{font:500 15px var(--mono);fill:var(--mute)}
.kk-meter-lbl{font:500 13px var(--mono);fill:var(--signal-d);letter-spacing:.04em}
.kk-bar{transform-box:fill-box;transform-origin:50% 100%}
.js .hero .kk-bar{animation:level 2.4s var(--out) calc(var(--i)*-.37s) infinite alternate}
@keyframes level{0%{transform:scaleY(.55)}40%{transform:scaleY(1)}70%{transform:scaleY(.72)}100%{transform:scaleY(.9)}}

/* banden */
.band{padding:clamp(56px,8vw,112px) 0}
.band-paper{background:var(--paper-2)}
.band-ink{background:var(--ink);color:var(--paper)}
.band-ink .cue{color:#a8a39a}
.band-ink a{color:var(--signal)}
.duo{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,5vw,80px);align-items:start}
.duo>*{min-width:0}
.steps{list-style:none;counter-reset:s;padding:0;margin:1.6rem 0 0}
.steps li{counter-increment:s;position:relative;padding:0 0 1.1rem 3.2rem}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.1rem;font:500 .95rem var(--mono);color:var(--signal)}
.band:not(.band-ink) .steps li::before{color:var(--signal-d)}

/* dosis-rekenaar */
.dosis{background:#1f1e1c;padding:clamp(20px,3vw,34px);border-radius:4px}
.dosis-invoer{display:grid;gap:1.4rem}
.dosis-veld{display:grid;grid-template-columns:1fr auto;gap:.4rem 1rem;align-items:baseline}
.dosis-label{font:600 1.1rem var(--head);text-transform:uppercase;letter-spacing:.05em}
.dosis-waarde{font:500 1.05rem var(--mono);color:var(--signal)}
.dosis-veld input{grid-column:1/-1;width:100%;accent-color:var(--signal);height:32px}
.dosis-uitkomst{margin-top:1.8rem}
.dosis-schaal{position:relative;height:40px;background:linear-gradient(90deg,#3a3936 0 33.3%,#6b4a2c 33.3% 50%,#9a3d17 50% 56.7%,#c4431a 56.7%);border-radius:2px;margin-bottom:1.6rem}
.dosis-streep{position:absolute;left:var(--p);top:0;bottom:0;width:2px;background:var(--paper)}
.dosis-streep b{position:absolute;top:100%;left:50%;transform:translateX(-50%);font:500 .78rem var(--mono);color:#a8a39a;padding-top:4px}
.dosis-naald{position:absolute;top:-8px;bottom:-8px;width:4px;left:calc(var(--x,30%) - 2px);background:var(--paper);border-radius:2px;transition:left .45s var(--out);box-shadow:0 0 0 2px #1f1e1c}
.dosis-getal{font:800 clamp(3rem,6vw,4.4rem)/1 var(--head);margin:.4rem 0 .6rem}
.dosis-getal small{font:500 .9rem var(--mono);color:#a8a39a;letter-spacing:.06em}
.dosis-zin{font-size:1.05rem;min-height:3.4em}
.dosis-tijd{font:500 .95rem var(--mono);color:#d8d3c8}
.dosis-noot{font-size:.86rem;color:#a8a39a;margin:1.2rem 0 0}
@media (prefers-reduced-motion:reduce){.dosis-naald{transition:none}}

/* tabellen */
.table-wrap{overflow-x:auto;margin:1.4rem 0}
table{border-collapse:collapse;width:100%;font-size:1rem}
th,td{text-align:left;padding:.85rem 1rem .85rem 0;border-bottom:1px solid var(--hair);vertical-align:top}
thead th{font:500 .78rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mute)}
.spec tbody th{font:800 1.3rem/1.1 var(--head);white-space:nowrap;padding-right:2rem}
.source{font-size:.92rem;color:var(--mute);max-width:70ch}

/* tracklijst */
.tracks{list-style:none;margin:1.6rem 0 0;padding:0;border-top:2px solid var(--ink)}
.track a{display:grid;grid-template-columns:3rem 150px 1fr auto;gap:1.2rem;align-items:center;padding:1.1rem 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.track a>*{min-width:0}
.track-nr{font:500 .95rem var(--mono);color:var(--mute)}
.track-wave{display:block;aspect-ratio:5/2;overflow:hidden;border-radius:2px}
.track-wave svg{width:100%;height:100%}
.track-body{display:grid;gap:.2rem}
.track-cat{font:500 .74rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--signal-d)}
.track-title{font:800 1.45rem/1.08 var(--head)}
.track-sum{font-size:.95rem;color:var(--ink-2);max-width:68ch}
.track-len{font:500 .9rem var(--mono);color:var(--mute)}
.track a:hover .track-title{color:var(--signal-d)}
.more{margin-top:2rem}
.topics{list-style:none;padding:0;margin:1rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem 2rem}
.topics a{font:600 1.35rem var(--head);text-transform:uppercase;color:var(--ink);text-decoration:none}
.topics a:hover{color:var(--signal-d)}
.topics small{font:500 .8rem var(--mono);color:var(--mute);vertical-align:super}

/* overzicht en pagina's */
.masthead{padding:clamp(40px,6vw,80px) 0 clamp(20px,3vw,32px)}
.masthead.empty{padding-bottom:clamp(64px,10vw,140px)}
.chips{list-style:none;padding:0;margin:1.4rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem 1.4rem}
.chips a{font:600 1.05rem var(--head);text-transform:uppercase;letter-spacing:.04em;color:var(--mute);text-decoration:none;padding-bottom:3px}
.chips .on a{color:var(--ink);border-bottom:3px solid var(--signal)}
.listing{padding-bottom:clamp(56px,8vw,112px)}
.paging{display:flex;justify-content:space-between;margin-top:2rem;font:600 1.1rem var(--head);text-transform:uppercase}
.page-body{padding-bottom:clamp(56px,8vw,112px)}

/* artikel */
.post-head{padding-top:clamp(36px,5vw,72px)}
.post-head h1{font-size:clamp(2.3rem,5vw,4.2rem);text-transform:none}
.byline{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;font:500 .85rem var(--mono);color:var(--mute);margin-top:1.4rem}
.post-wave{margin:clamp(24px,4vw,48px) 0 0}
.post-wave .kk-wave{width:100%;aspect-ratio:5/2;border-radius:2px}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(28px,5vw,80px);padding:clamp(36px,5vw,64px) 0 clamp(56px,8vw,96px)}
.post-grid>*{min-width:0}
.prose{max-width:72ch}
.prose.narrow{margin-inline:0}
.prose h2{margin-top:1.8em}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-bottom:.45em}
.prose ul li::marker{color:var(--signal-d)}
.prose blockquote{margin:1.6em 0;padding-left:1.2rem;border-left:4px solid var(--signal);font-size:1.12rem}
.keypoints{list-style:none;padding:0 0 1.2rem!important;margin:0 0 2rem;border-bottom:2px solid var(--ink)}
.keypoints li{position:relative;padding-left:1.6rem;font-weight:600}
.keypoints li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:3px;background:var(--signal)}
.side{font-size:.95rem}
.stick{position:sticky;top:96px}
.side-head{font:500 .76rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--mute);margin:0 0 .6rem}
.side ol{padding-left:1.2em;margin:0 0 2rem}
.side li{margin-bottom:.4rem}
.side a{color:var(--ink)}
.side a:hover{color:var(--signal-d)}
.note,.kanttekening{margin:1.6em 0;padding:1rem 0 1rem 1.2rem;border-left:4px solid var(--signal);background:transparent}
.kanttekening-kop{display:block;font:600 1.1rem var(--head);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.3rem}
.kanttekening p{margin:0}
.genummerd{padding-left:1.4em}
.voorentegen{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:1.6em 0}
.voorentegen h4{font-size:1.2rem;text-transform:uppercase}
.tabelvak{overflow-x:auto;margin:1.6em 0}
.faq-lijst{margin-top:2.4em}
details{border-bottom:1px solid var(--hair);padding:.9rem 0}
summary{cursor:pointer;font:600 1.25rem/1.2 var(--head);list-style:none;display:flex;justify-content:space-between;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--signal-d);transition:transform .2s var(--out)}
details[open] summary::after{transform:rotate(45deg)}
details .a{padding-top:.6rem}
.next{background:var(--paper-2);padding:clamp(48px,7vw,96px) 0}
.partner-list{list-style:none;padding:0!important;border-top:2px solid var(--ink)}
.partner-list li{margin:0!important}
.partner-list a{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none}
.partner-list a{flex-wrap:wrap}
.partner-list span{font:500 .88rem var(--mono);color:var(--mute);overflow-wrap:anywhere}
.partner-list a:hover strong{color:var(--signal-d)}

/* footer */
.foot{background:var(--ink);color:var(--paper);padding:clamp(48px,7vw,88px) 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.foot-brand{font:800 1.8rem var(--head);text-transform:uppercase;margin-bottom:.4rem}
.foot-line{color:#a8a39a;max-width:34ch}
.foot h2{font:500 .76rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:#a8a39a;margin-bottom:.9rem}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:.45rem}
.foot a{color:var(--paper);text-decoration:none}
.foot a:hover{color:var(--signal)}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;border-top:1px solid var(--hair-d);margin-top:2.6rem;padding-top:1.2rem;font:500 .82rem var(--mono);color:#a8a39a}
.foot-base a{text-decoration:underline;text-decoration-color:var(--signal)}

/* verschijnen */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s var(--out),transform .6s var(--out)}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .hero-grid,.duo,.post-grid{grid-template-columns:1fr}
  .hero-meter{max-width:460px}
  .side{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .track a{grid-template-columns:2.2rem 96px 1fr}
  .track-len{display:none}
}
@media (max-width:760px){
  .menu-btn{display:block}
  .menu{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--hair);display:none}
  .menu.open{display:block}
  .menu ul{flex-direction:column;gap:0;padding:.5rem clamp(16px,4vw,48px) 1rem}
  .menu a{display:block;padding:.8rem 0;font-size:1.3rem}
}
@media (max-width:520px){
  body{font-size:17px}
  .track a{grid-template-columns:2rem 1fr;gap:.9rem}
  .track-wave{display:none}
  .foot-grid{grid-template-columns:1fr}
  .voorentegen{grid-template-columns:1fr}
  .spec tbody th{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none;transition:none}
  .js .hero .kk-bar{animation:none}
  .menu-btn span,.btn{transition:none}
}