:root{--b:#000;--w:#fff;--g:#9a9a9a;--l:#333;
--head:'Big Shoulders Display','Arial Narrow',sans-serif;--body:'Archivo','Helvetica Neue',Arial,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--b);color:var(--w);font:1.02rem/1.6 var(--body);-webkit-font-smoothing:antialiased;position:relative}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.09;background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit}
:focus-visible{outline:3px solid var(--w);outline-offset:3px}
.wrap{max-width:1200px;margin:0 auto;padding:0 1.5rem}
header{border-bottom:2px solid var(--w)}
header .wrap{display:flex;justify-content:space-between;align-items:center;padding-top:.9rem;padding-bottom:.9rem}
.logo img{height:46px;width:auto;display:block}
nav{display:flex;gap:.4rem}
nav a{text-decoration:none;font-weight:700;padding:.3rem .8rem;border:2px solid transparent}
nav a:hover{border-color:var(--w)}
nav a[aria-current]{background:var(--w);color:var(--b)}
h1,h2{font-family:var(--head);font-weight:800;line-height:.9;text-transform:uppercase}
.page-title{font-size:clamp(4rem,14vw,9rem);margin:2.5rem 0 1.5rem}
.lead{font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.3;max-width:30ch;font-weight:600}
.btn{display:inline-block;background:var(--w);color:var(--b);padding:.8rem 1.4rem;text-decoration:none;font-weight:800;border:2px solid var(--w);margin:1.5rem .75rem 0 0}
.btn:hover{background:var(--b);color:var(--w)}
.btn.alt{background:none;color:var(--w)}
.btn.alt:hover{background:var(--w);color:var(--b)}
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:3rem;align-items:center;padding:3rem 0}
.big img{width:100%;height:auto;display:block}
.big{margin-bottom:1.5rem}
.print{position:relative;background:var(--w);padding:10px;box-shadow:10px 10px 0 var(--l);transform:rotate(2deg);max-width:420px;justify-self:center}
.print.left{transform:rotate(-2.5deg)}
.print::before{content:"";position:absolute;top:-14px;left:50%;width:100px;height:28px;margin-left:-50px;background:rgba(170,170,170,.75);transform:rotate(-4deg)}
.print img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.25) brightness(.95)}
.strip{background:var(--w);color:var(--b);border-block:2px solid var(--w);overflow:hidden;white-space:nowrap}
.strip p{font:800 clamp(1.8rem,5vw,3.2rem)/1 var(--head);text-transform:uppercase;padding:.6rem 0;display:flex;gap:3rem;justify-content:center}
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:4rem;padding:4rem 0;align-items:start}
.about h2{font-size:clamp(3rem,7vw,5rem);margin-bottom:1.5rem}
.about p+p{margin-top:1rem}
.facts{list-style:none;border-top:2px solid var(--w);margin-top:2rem}
.facts li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--l)}
.facts span:first-child{color:var(--g)}
.facts span:last-child{font-weight:700;text-align:right}
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.tabs button{font:700 1rem var(--body);background:none;border:2px solid var(--w);color:var(--w);padding:.5rem 1rem;cursor:pointer}
.tabs button:hover{background:var(--l)}
.tabs button[aria-pressed=true]{background:var(--w);color:var(--b)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;padding-bottom:4rem}
.card{display:flex;flex-direction:column;text-decoration:none;border:2px solid var(--w);background:var(--b)}
a.card:hover{background:var(--w);color:var(--b)}
a.card:hover .info p{color:#444}
.frame{position:relative;aspect-ratio:16/9;display:flex;align-items:flex-end;padding:1rem;font:800 2rem/1 var(--head);text-transform:uppercase;overflow:hidden;color:var(--w);background:repeating-linear-gradient(135deg,#000 0 10px,#151515 10px 20px)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.frame.soon{color:var(--b);background:var(--w)}
.info{padding:1rem;border-top:2px solid currentColor;flex:1}
.info h3{font:700 1.1rem/1.3 var(--body)}
.info p{color:var(--g);font-size:.92rem;margin-top:.3rem}
.info .go{display:block;margin-top:.6rem;font-weight:800;font-size:.92rem}
.tt{padding:1rem 0 4rem;border-top:2px solid var(--w)}
.tt h2{font-size:3.2rem;margin:1.5rem 0 .5rem}
.tt ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem;margin-top:1.5rem}
.tt a{display:block;border:2px solid var(--w);padding:.7rem 1rem;text-decoration:none;font-weight:700}
.tt a:hover{background:var(--w);color:var(--b)}
.contact-link{display:block;font:800 clamp(2.2rem,8vw,5.5rem)/1 var(--head);text-transform:uppercase;text-decoration:none;padding:1.2rem .5rem;border-top:2px solid var(--w);overflow-wrap:anywhere}
.contact-link:last-of-type{border-bottom:2px solid var(--w)}
.contact-link small{display:block;font:600 1rem var(--body);text-transform:none;color:var(--g);margin-bottom:.4rem}
.contact-link:hover{background:var(--w);color:var(--b)}
.contact-link:hover small{color:#444}
footer{border-top:2px solid var(--w);padding:1.5rem 0;color:var(--g);font-size:.92rem;margin-top:3rem}
@media(max-width:760px){.hero,.about{grid-template-columns:1fr;gap:3rem}.print{max-width:340px}nav a{padding:.3rem .5rem;font-size:.95rem}.strip p{gap:1.2rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.jump{display:grid;grid-template-columns:repeat(3,1fr);border:2px solid var(--w);margin-bottom:3rem}
.jump a{padding:1rem 1.2rem;text-decoration:none;font:800 clamp(1.1rem,3vw,1.8rem)/1.1 var(--head);text-transform:uppercase;display:flex;gap:.7rem;align-items:baseline;border-right:2px solid var(--w)}
.jump a:last-child{border-right:0}
.jump a:hover{background:var(--w);color:var(--b)}
.jump b{font-size:2.2em;font-weight:800}
.cat{margin-bottom:3rem;scroll-margin-top:1rem}
.cat-head{display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 1.5rem;border-top:2px solid var(--w);padding:1.5rem 0}
.num{font:800 clamp(7rem,22vw,15rem)/.75 var(--head);color:transparent;-webkit-text-stroke:2px var(--w)}
.cat-head h2{font-size:clamp(2.5rem,8vw,5.5rem)}
.count{margin-left:auto;color:var(--g);font-weight:700;padding-bottom:.4rem}
.cat .grid{padding-bottom:1rem}
.badge{position:absolute;top:0;left:0;z-index:2;background:var(--w);color:var(--b);font:800 1.4rem/1 var(--head);width:2.2rem;height:2.2rem;display:grid;place-items:center}
@media(max-width:760px){.jump a{flex-direction:column;gap:0;padding:.8rem;font-size:1rem}.jump b{font-size:2rem}}

.exp{padding-bottom:3rem}
.exp h2{font-size:clamp(3rem,7vw,5rem);margin-bottom:1.5rem}
.rows{list-style:none;border-top:2px solid var(--w)}
.rows li{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--l)}
.rows .org{font:800 1.6rem/1.1 var(--head);text-transform:uppercase}
.rows .pl{color:var(--g);text-align:right}
@media(max-width:760px){.rows li{grid-template-columns:1fr;gap:.2rem}.rows .pl{text-align:left}}

.jump{grid-template-columns:repeat(4,1fr)}
.sub{color:var(--g);font-weight:600;margin-bottom:1rem}
.artist{font:800 clamp(1.6rem,4vw,2.4rem)/1 var(--head);text-transform:uppercase;margin:2rem 0 1rem;display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap}
.artist small{font:600 1rem var(--body);color:var(--g);text-transform:none}
@media(max-width:760px){.jump{grid-template-columns:repeat(2,1fr)}.jump a:nth-child(2){border-right:0}.jump a:nth-child(-n+2){border-bottom:2px solid var(--w)}}

.frame::before{content:"";position:absolute;inset:0;background:url(logo.png) center 38%/50% no-repeat;opacity:.28}
.frame.soon::before{filter:invert(1);opacity:.22}
.frame span:not(.badge){position:relative;font-size:clamp(1.4rem,3.6vw,1.9rem);line-height:.98;max-width:100%}

/* telefoon: compacte kaarten, 2 per rij */
@media(max-width:760px){
.page-title{font-size:clamp(3rem,16vw,5rem);margin:1.5rem 0 1rem}
.jump{margin-bottom:1.5rem}
.cat{margin-bottom:1.5rem}
.cat-head{padding:1rem 0;gap:0 .8rem}
.num{font-size:5rem}
.cat-head h2{font-size:2.2rem}
.count{font-size:.85rem}
.grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
.card{border-width:2px}
.frame{padding:.5rem}
.frame span:not(.badge){font-size:1rem}
.frame::before{background-size:60%}
.badge{width:1.5rem;height:1.5rem;font-size:1rem}
.info{padding:.5rem}
.info h3{font-size:.82rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.info p{font-size:.72rem;margin-top:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.info .go{display:none}
.artist{margin:1.2rem 0 .6rem;font-size:1.5rem}
.tt{padding-bottom:2rem}
.tt h2{font-size:2.4rem}
.tt ul{grid-template-columns:repeat(3,1fr);gap:.5rem}
.tt a{padding:.5rem;text-align:center;font-size:.9rem}
}

/* telefoon: kolommen mogen nooit breder worden dan het scherm */
@media(max-width:760px){
.grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.info,.frame{min-width:0}
.info h3{overflow-wrap:anywhere}
}

/* 5 categorieen in de balk */
.jump{grid-template-columns:repeat(5,1fr)}
.jump a{font-size:clamp(1rem,2vw,1.6rem)}
@media(max-width:760px){
.jump{grid-template-columns:repeat(2,1fr)}
.jump a{font-size:1rem}
.jump a:nth-child(even){border-right:0}
.jump a:nth-child(odd){border-right:2px solid var(--w)}
.jump a:nth-child(-n+4){border-bottom:2px solid var(--w)}
.jump a:nth-child(5){grid-column:1/-1;border-right:0}
}

.frame span.win{position:absolute;top:0;right:0;z-index:2;background:var(--w);color:var(--b);font:800 1rem/1 var(--head);text-transform:uppercase;padding:.5rem .7rem}
@media(max-width:760px){.frame span.win{font-size:.8rem;padding:.35rem .5rem}.info p.full{white-space:normal}}

.info p.full{white-space:normal}

/* keep side padding on the hero and about sections */
.hero,.about{padding-left:1.5rem;padding-right:1.5rem}