:root{
  --navy:#102c3b;
  --deep:#0b202b;
  --cream:#f2ead8;
  --paper:#fbf7ed;
  --red:#a4473c;
  --gold:#b48a4a;
  --ink:#23343b;
  --line:#c7b998;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}

@font-face {
  font-family: 'Tempus Sans ITC';
  /* Omdat je het normale bestand gebruikt, zetten we de weight hier op 'normal' */
  src: url('TempusSansITC.woff') format('woff'),
       url('TempusSansITC.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  margin:0; color:var(--ink); background:
  radial-gradient(circle at 20% 20%,rgba(180,138,74,.07) 0 2px,transparent 3px),
  linear-gradient(90deg,rgba(16,44,59,.025) 1px,transparent 1px),
  var(--paper);
  background-size:24px 24px,24px 24px,auto;
  font-family: 'Tempus Sans ITC', Georgia, sans-serif;
  font-size: 20px; 
  /* We dwingen hier centraal af dat ALLES bold moet worden */
  font-weight: bold !important;
}

h1, h2, h3 {
  font-family: 'Tempus Sans ITC', sans-serif;
  font-weight: bold;
}

p {
  font-size: 20px; 
  font-weight: bold;
}

body:before{content:"";display:block;height:7px;background:var(--red);border-bottom:2px solid var(--gold)}
a{color:inherit}
.site{max-width:1180px;margin:auto;padding:0 24px}
header{
  background:var(--navy);color:var(--cream);
  border-bottom:5px double var(--gold);
  box-shadow:0 4px 18px rgba(0,0,0,.18)
}
.header-inner{padding:28px 0 18px;text-align:center}
.kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem;color:#d9c89e}
.logo{margin:7px 0 2px;font-size:clamp(2.4rem,6vw,5rem);letter-spacing:.08em;text-transform:uppercase;font-weight:normal}
.logo span{color:#d7bd7c}
.tagline{font-style:italic;font-size:1.05rem}
nav{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid rgba(242,234,216,.35);margin-top:20px}
nav a{padding:13px 15px;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem}
nav a:hover,nav a.active{background:var(--red);color:#fff}
main{padding:30px 0 55px}
.hero{
  min-height:225px; display:grid; place-items:center; text-align:center;
  border:1px solid var(--line);
  outline:5px solid rgba(180,138,74,.14);
  outline-offset:-12px;
  background:
    linear-gradient(rgba(16,44,59,.82),rgba(16,44,59,.82)),
    repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.04) 23px 24px),
    var(--navy);
  color:var(--cream); position:relative; overflow:hidden;
}
.hero:before,.hero:after{position:absolute;color:rgba(242,234,216,.18);font-size:7rem;line-height:1}
.hero:before{content:"⚓";left:7%;top:15%}.hero:after{content:"✦";right:9%;bottom:7%}
.hero h1{font-size:clamp(2rem,5vw,3.7rem);font-weight:normal;letter-spacing:.08em;text-transform:uppercase;margin:0}
.hero p{margin:8px 0 0;font-style:italic; font-size:1.3rem;}
.placeholder-note{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75}
.content{max-width:900px;margin:40px auto 0}
.content > p {
  text-align: justify;
  line-height: 1.7;
}
.content h2{font-size:2rem;font-weight:normal;color:var(--navy);text-align:center;letter-spacing:.05em}
.content h2:after{content:" ⚓ ";display:block;color:var(--gold);font-size:1rem;margin-top:9px}
.content p{font-size:1.08rem;line-height:1.75}
.columns{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.card{border:1px solid var(--line);background:rgba(255,255,255,.45);padding:24px;position:relative}
.card:before{content:"";position:absolute;top:8px;left:8px;right:8px;bottom:8px;border:1px solid rgba(180,138,74,.35);pointer-events:none}
.card h3{margin-top:0;color:var(--red);font-size:1.35rem}
.card {
  text-align: center;
}

.card img {
  display: block;
  width: 350px;
  height: 250px;
  object-fit: cover;
  margin: 0 auto 15px auto;
}

.bandcard img {
  display: block;
  width: 350px;
  height: 550px;
  object-fit: cover;
  margin: 0 auto 0 auto;
}

ul{line-height:1.8}
.agenda{width:100%;border-collapse:collapse;margin-top:25px}
.agenda th,.agenda td{padding:13px;border-bottom:1px solid var(--line);text-align:left}
.agenda th{background:var(--navy);color:var(--cream);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.agenda tr:nth-child(even){background:rgba(180,138,74,.06)}
.cta{text-align:center;margin:35px 0}
.button{display:inline-block;background:var(--red);color:white;padding:12px 20px;text-decoration:none;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem}
footer{background:var(--deep);color:var(--cream);text-align:center;padding:30px 20px;border-top:5px double var(--gold);font-size:.9rem}
footer p{margin:6px}
.small{font-size:.85rem;opacity:.8}
@media(max-width:700px){
  .site{padding:0 14px}
  nav a{padding:11px 9px;font-size:.7rem}
  .columns{grid-template-columns:1fr}
  .agenda{font-size:.8rem}
  .agenda th,.agenda td{padding:9px}
  .hero-image {
    width: 50%;
    height: auto;
    display: block;
}
}