:root {

--bg:#000;
--bg-soft:#0b0b0b;

--card:#111;
--card-strong:#1a1a1a;

--text:#f5f5f5;
--muted:#a9a9a9;

--accent:#ffffff;

--line:rgba(255,255,255,.12);

--shadow:0 20px 45px rgba(0,0,0,.65);

}

/* BASE */

*{
box-sizing:border-box;
}

html,body{
min-height:100%;
}

body{

margin:0;
font-family:"Inter","Segoe UI",Roboto,Arial,sans-serif;
color:var(--text);
line-height:1.6;

background:
radial-gradient(circle at 20% 10%,rgba(255,255,255,.06),transparent 40%),
radial-gradient(circle at 80% 0%,rgba(255,255,255,.04),transparent 35%),
linear-gradient(180deg,#000 0%,#0b0b0b 50%,#000 100%);

}

.container{
width:min(1120px,92vw);
margin:0 auto;
}

/* HEADER */

.site-header{

position:sticky;
top:0;
z-index:50;

background:rgba(0,0,0,.85);
backdrop-filter:blur(10px);

border-bottom:1px solid var(--line);

}

.nav-wrap{

display:flex;
justify-content:space-between;
align-items:center;
padding:.95rem 0;

}

.brand{

color:#fff;
text-decoration:none;
font-weight:800;

}

.nav-links{

list-style:none;
display:flex;
gap:.35rem;
margin:0;
padding:0;

}

.nav-links a{

color:var(--muted);
text-decoration:none;
font-weight:600;

padding:.45rem .8rem;
border-radius:999px;

transition:.2s;

}

.nav-links a:hover,
.nav-links a[aria-current="page"]{

color:#fff;
background:rgba(255,255,255,.08);

}

/* HERO */

.hero{
padding:6rem 0 3.5rem;
}

.hero p{
color:var(--muted);
max-width:70ch;
}

h1{
font-size:clamp(2.1rem,4.6vw,3.4rem);
margin:.2rem 0 1rem;
}

h2{
margin:0;
line-height:1.2;
}

.lead{
color:var(--muted);
max-width:70ch;
}

/* BUTTONS */

.button{

display:inline-block;
text-decoration:none;

background:linear-gradient(135deg,#fff,#d9d9d9);
color:#000;

padding:.65rem 1.1rem;
border-radius:999px;

font-weight:700;

box-shadow:0 10px 25px rgba(255,255,255,.15);

transition:.2s;

}

.button:hover{

transform:translateY(-2px);
box-shadow:0 12px 30px rgba(255,255,255,.25);

}

.button.small{
padding:6px 12px;
font-size:.85rem;
border-radius:8px;
margin-top:10px;
}

.button-secondary{
background:#ffffff;
border:1px solid rgba(255,255,255,.3);
color:#000;
box-shadow:none;
}

.button-secondary:hover{
background:#d9d9d9;
color:#000;
}

/* SECTIONS */

.section{
padding:2.5rem 0 4rem;
}

/* GRID */

.grid-cards,
.members-grid,
.timeline{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:1.2rem;

}

/* CARDS */

.card{

background:linear-gradient(160deg,var(--card),var(--card-strong));
border:1px solid var(--line);

border-radius:16px;
padding:1.2rem;

box-shadow:var(--shadow);

transition:.25s;

}

.card:hover{

transform:translateY(-4px);
border-color:rgba(255,255,255,.35);

}

.card h2{
margin-top:0;
}

/* LINKS IN CARDS (maar NIET knoppen) */

.card a:not(.button){
color:#fff;
font-weight:600;
text-decoration:none;
}

.card a:not(.button):hover{
text-decoration:underline;
}

/* EVENT LAYOUT */

.event-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:.5rem;

}

.event-location{

font-weight:600;
color:#ddd;
margin-top:.4rem;

}

.event-date{

color:var(--muted);
font-size:.9rem;
margin:.3rem 0 1rem;

}

/* TAGS */

.tag{

font-size:.65rem;
font-weight:700;

padding:4px 7px;
border-radius:5px;

letter-spacing:.02em;

}

/* TOUR TAGS */

.tag.verwacht{
background:#f3e5ab;
color:#544400;
}

.tag.tickets{
background:#c8f7c5;
color:#084b12;
}

.tag.canceled{
background:#f5bcbc;
color:#5a0000;
}

/* NEWS TAGS */

.tag.comeback{
background:#3a2f4d;
color:#d8c6ff;
}

.tag.content{
background:#2f3a4d;
color:#c6dcff;
}

.tag.fanproject{
background:#3a4d2f;
color:#d8ffc6;
}

/* NEWS SOURCE BUTTON */

.news-source{

display:inline-block;
margin-top:10px;

padding:6px 12px;

background:#fff;
color:#000;

font-size:.85rem;
font-weight:700;

border-radius:6px;

text-decoration:none;

transition:.2s;

}

.news-source:hover{
background:#d9d9d9;
}

/* HOMEPAGE HIGHLIGHTS */

.highlight-strip{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1rem;
margin-bottom:3rem;

}

.highlight-strip article{

border:1px solid rgba(255,255,255,.2);

background:linear-gradient(
135deg,
rgba(255,255,255,.08),
rgba(255,255,255,.04)
);

border-radius:14px;
padding:1rem;

}

/* DISCOGRAPHY TABLE */

.discography-table{

width:100%;
border-collapse:collapse;

margin-top:1rem;

background:#141414;

border-radius:14px;
overflow:hidden;

box-shadow:var(--shadow);

}

.discography-table th,
.discography-table td{

border-bottom:1px solid var(--line);
padding:.75rem;

}

.discography-table th{
background:rgba(255,255,255,.08);
}

.discography-table tbody tr:nth-child(even){
background:rgba(255,255,255,.03);
}

/* ALBUM GRID */

.album-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:1.5rem;
margin-top:2rem;

}

.album-card{

text-align:center;

background:linear-gradient(160deg,#111,#1b1b1b);

border-radius:14px;
overflow:hidden;

border:1px solid rgba(255,255,255,.08);

transition:.2s;

}

.album-card:hover{
transform:translateY(-5px);
}

.album-card img{
width:100%;
display:block;
}

.album-card h2{

margin:.6rem 0 .2rem;
font-size:1rem;

}

.album-card p{

color:#aaa;
margin-bottom:1rem;
font-size:.85rem;

}

.album-card a{
text-decoration:none;
color:white;
display:block;
}

/* FOOTER */

.site-footer{

border-top:1px solid var(--line);

padding:1.2rem 0;

color:var(--muted);
background:rgba(0,0,0,.7);

}

.site-footer a{

color:#fff;
font-weight:700;
text-decoration:none;

}

.site-footer a:hover{
text-decoration:underline;
}

/* MOBILE */

@media (max-width:760px){

.nav-wrap{
flex-direction:column;
align-items:flex-start;
}

.nav-links{
flex-wrap:wrap;
}

.hero{
padding-top:4.8rem;
}

.timeline{
grid-template-columns:1fr;
}

}