/* KANN placeholder styles (v3: sans-serif, improved readability) */
@font-face {
  font-family: 'Mono2';
  src: url('fonts/Mono.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Color tokens */
:root{
  --text: #11100d;             /* Ink on light background (persbericht) */
  --text-on-dark: #f6efe7;     /* Text on hero */
  --muted: #5a4a3f;            /* Warm umber for secondary text */
  --accent: #a35c2a;           /* Terracotta link/button */
  --accent-strong: #7b431d;
  --chip-bg: rgba(33,22,16,.52);
  --hero-overlay: rgba(52, 40, 31, 0.55);
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }

/* HERO */
.hero{
  min-height:100vh;
  background-image:url('bg.jpg');
  background-size:cover; background-position:center; background-attachment:fixed;
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  color:var(--text-on-dark);
}
.overlay{position:absolute; inset:0; background:linear-gradient(to bottom, var(--hero-overlay), var(--hero-overlay));}
.content{position:relative; padding:10vh 6vw 4vh; text-align:center;}
.content-inner{max-width:1100px; margin:0 auto;}

h1.kann{ font-family:'Mono2', ui-sans-serif, system-ui, sans-serif; letter-spacing:.08em;
  font-size:clamp(56px, 14vw, 240px); margin:0 0 .15em; line-height:.95; text-transform:uppercase;
  text-shadow: none;
}
h2{ font-weight:800; letter-spacing:.01em; font-size:clamp(22px, 2.8vw, 42px); margin:.1em 0 .25em;
  text-shadow: none;
}
p.subtitle{ margin:.25em 0 0; opacity:.96; font-size:clamp(14px,1.5vw,18px); color:#e9dfd2; }

.bottom{ position:relative; padding:4vh 6vw 6vh; text-align:center; }
p.notice{ display:inline-block; background:var(--chip-bg); backdrop-filter:blur(2px); padding:14px 18px;
  border-radius:10px; font-size:clamp(14px,1.4vw,18px); line-height:1.5; border:1px solid rgba(255,255,255,.18);}
a.cta{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
a.cta:hover{ color:#fff; text-decoration-thickness: 2px; }

.links{ margin-top:16px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap; }
.links a{ display:inline-block; padding:10px 18px; border-radius:10px;
  background:linear-gradient(to bottom, rgba(44,30,22,.65), rgba(33,22,16,.65));
  border:1px solid rgba(255,255,255,.22); color:#fff; text-decoration:none; font-weight:800; }
.links a:hover{ background:linear-gradient(to bottom, rgba(44,30,22,.82), rgba(33,22,16,.82)); border-color:#fff; }

footer{ position:relative; text-align:center; padding:10px 0 24px; font-size:12px; opacity:.75; color:#e9dfd2; }
.small{ font-size:13px; }

/* PERSBERICHT (neutral, no photo background) */
.wrapper{ min-height:100vh; background:#f3eee6 url('paper_bg.jpg'); color:var(--text); }
.article-overlay{ min-height:100vh; padding-bottom:48px; }
.container{ max-width:980px; margin:0 auto; padding:28px 6vw; }
.article-header{ text-align:center; margin:6px 0 18px; }
.article-header .kann-mini{ font-family:'Mono2', ui-sans-serif, system-ui, sans-serif; font-size:clamp(28px,4vw,42px); letter-spacing:.06em; margin:0 0 6px; color:#2c2018; }
.hero-photo{ width:100%; border-radius:14px; display:block; margin:10px 0 18px; border:1px solid rgba(0,0,0,.08); box-shadow:0 10px 30px rgba(0,0,0,.10); }

.article h1{ font-weight:900; letter-spacing:.005em; font-size:clamp(28px,4vw,46px); margin:.2em 0 .4em; }
.article h2{ font-size:18px; margin-top:0; font-weight:700; color:#3a2e26; opacity:.95; }
.article p{ line-height:1.85; font-size:18px; margin:0 0 1em; color:#2a241f; }

.breadcrumb{ margin:8px 0 18px; }
.breadcrumb a{ color:#4b3325; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.breadcrumb a:hover{ color:#2b1c12; text-decoration-color:var(--accent-strong); }

/* Highly legible links in body */
.article a{ color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.article a:hover{ color:var(--accent-strong); }

@media (max-width: 600px) {
  h1.kann {
    font-size: 22vw; /* groeit mee met breedte, vaak beter leesbaar */
  }
}