/* ============================================================
   DeNode Ink — Design System  (v1.0 · 1 jul 2026)
   Drop-in stylesheet voor de DeNode Foundation website.
   Filosofie: rauwe zwart-wit inkt (het logo) op warm bone-papier,
   één spaarzaam oxide-rood accent. Kunst-eerst, scherpe rechthoeken,
   Zwitserse grotesk-ruggengraat + serif voor literaire warmte.
   ------------------------------------------------------------
   Toepassen: <link rel="stylesheet" href="denode-ink.css"> +
   koppel denode-ink.js voor de NL/EN-taalwissel.
   Fonts kunnen self-hosted worden; hieronder de Google Fonts-import.
   ============================================================ */

/* Fonts self-hosted (variable, latin) — geen Google-dependency meer (Paul-go 6 jul 2026) */
@font-face{font-family:'Oswald';src:url('fonts/oswald.woff2') format('woff2');font-weight:200 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo';src:url('fonts/archivo.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'Inter';src:url('fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap;}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond-italic.woff2') format('woff2');font-weight:400 800;font-style:italic;font-display:swap;}

/* ---------- 1. TOKENS ---------- */
:root{
  /* kleur */
  --ink:#0e0e0c;        /* bijna-zwart — tekst, banden, knoppen */
  --paper:#f4f1ea;      /* warm bone — hoofdachtergrond */
  --paper2:#eae5da;     /* iets dieper papier — secties, beeldvlakken */
  --white:#ffffff;
  --muted:#6f6a5e;      /* labels, secundaire tekst — verdiept voor leesbaarheid/contrast op bone (WCAG AA, 10 jul 2026) */
  --line:#d8d2c6;       /* hairlines, randen */
  --accent:#a23b2d;     /* oxide-rood — SPAARZAAM: eyebrows, links, tags, active, hover */
  --accent-dark:#872f23;/* hover op accent-vlakken */

  /* typografie */
  --font-display:'Oswald',sans-serif;      /* condensed, echoot de handletters van het logo */
  --font-ui:'Archivo',sans-serif;          /* labels, nav, knoppen — 600–800 */
  --font-body:'Inter',system-ui,sans-serif;/* lopende tekst */
  --font-serif:'EB Garamond',serif;        /* cursief: missie, citaten, kunstenaarsnamen */

  /* ritme */
  --wrap:1180px;
  --gutter:34px;
  --radius:0px;         /* SCHERP. Geen afgeronde hoeken (contrast met Allusion's clean tech). */
}

/* ---------- 2. BASIS ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.55;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;}
/* toetsenbord-focus zichtbaar (a11y, 10 jul 2026) — hover had wel, focus niet */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.dn-btn:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.dn-wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}

/* Dev-only lint/mockup-ribbon (weglaten in productie) */
.dn-ribbon{background:var(--ink);color:#c9c2b3;font-family:var(--font-ui);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:center;padding:7px 10px;}

/* ---------- 3. TYPOGRAFIE-SCHAAL ---------- */
.dn-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(44px,6.5vw,88px);line-height:.94;text-transform:uppercase;letter-spacing:.005em;}
.dn-h2{font-family:var(--font-display);font-weight:600;font-size:clamp(28px,4vw,46px);text-transform:uppercase;letter-spacing:.01em;}
.dn-h3{font-family:var(--font-display);font-weight:500;font-size:24px;text-transform:uppercase;line-height:1;}
.dn-lead{font-family:var(--font-serif);font-size:24px;line-height:1.5;color:#26251f;}
.dn-serif-it{font-family:var(--font-serif);font-style:italic;}
.dn-eyebrow{font-family:var(--font-ui);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent);}
.dn-kicker{font-family:var(--font-ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;}

/* ---------- 4. HEADER · NAV · TAALWISSEL ---------- */
.dn-header{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);}
.dn-navrow{display:flex;align-items:center;justify-content:space-between;padding:16px 0;}
.dn-brand img{width:132px;}
.dn-nav{display:flex;align-items:center;gap:26px;}
.dn-nav ul{list-style:none;display:flex;gap:30px;align-items:center;}
.dn-nav a{color:var(--ink);text-decoration:none;font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.13em;text-transform:uppercase;padding-bottom:3px;border-bottom:2px solid transparent;}
.dn-nav a:hover{border-bottom-color:var(--accent);color:var(--accent);}
.dn-lang{display:flex;gap:6px;align-items:center;}
.dn-lang .lg{font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.08em;background:none;border:0;color:var(--muted);cursor:pointer;padding:4px 3px;}
.dn-lang .lg.active{color:var(--accent);}
.dn-lang .lg:hover{color:var(--ink);}
@media(max-width:820px){.dn-nav ul{display:none;}}

/* Breadcrumb */
.dn-crumb{font-family:var(--font-ui);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:22px 0 0;}
.dn-crumb a{color:var(--muted);text-decoration:none;}
.dn-crumb a:hover{color:var(--accent);}

/* ---------- 5. KNOPPEN ---------- */
.dn-btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:var(--paper);font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:15px 22px;text-decoration:none;border:0;border-radius:var(--radius);cursor:pointer;width:max-content;}
.dn-btn:hover{background:var(--accent);}
.dn-btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink);}
.dn-btn--ghost:hover{background:var(--ink);color:var(--paper);}

/* ---------- 6. HERO ---------- */
/* 6a. Split-hero (tekst | beeld) */
.dn-hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid var(--ink);}
.dn-hero__txt{padding:70px var(--gutter) 60px;display:flex;flex-direction:column;justify-content:center;}
.dn-hero__img{background:var(--paper2);position:relative;min-height:460px;overflow:hidden;}
.dn-hero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
@media(max-width:860px){.dn-hero{grid-template-columns:1fr;}}
/* 6b. Full-bleed beeld-hero met onderkap-titel (expo) */
.dn-hero-full{position:relative;height:min(74vh,640px);overflow:hidden;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);}
.dn-hero-full img{width:100%;height:100%;object-fit:cover;}
.dn-hero-full .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,12,.05) 30%,rgba(14,14,12,.82) 100%);}
.dn-hero-full .cap{position:absolute;left:0;right:0;bottom:0;padding:46px var(--gutter);color:var(--paper);}
.dn-hero-full .cap .in{max-width:var(--wrap);margin:0 auto;}
.dn-hero-full .dn-eyebrow{color:#e8a99f;}

/* ---------- 7. INKT-BAND (spiegelt het logo: wit uit zwart) ---------- */
.dn-band{background:var(--ink);color:var(--paper);padding:84px 0;}
.dn-band__q{font-family:var(--font-serif);font-style:italic;font-size:clamp(24px,3.4vw,34px);line-height:1.4;max-width:28ch;}
.dn-band__q .mk{color:var(--accent);font-style:normal;}
.dn-band__by{font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#98917f;margin-top:22px;font-weight:700;}
.dn-band .dn-h2{color:#fff;text-transform:none;font-weight:400;line-height:1.12;max-width:20ch;}

/* ---------- 8. SECTIE-KOP ---------- */
.dn-section{padding:80px 0;}
.dn-head{display:flex;align-items:baseline;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:16px;margin-bottom:40px;}
.dn-head a{font-family:var(--font-ui);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);padding-bottom:2px;white-space:nowrap;}

/* ---------- 9. KAARTEN (programma-grid) ---------- */
.dn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 24px;}
@media(max-width:860px){.dn-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.dn-grid{grid-template-columns:1fr;}}
.dn-card{text-decoration:none;color:inherit;display:block;}
.dn-card .thumb{aspect-ratio:4/3;background:var(--paper2);position:relative;overflow:hidden;margin-bottom:14px;}
.dn-card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.dn-card .dates{font-family:var(--font-ui);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.dn-card h3{font-family:var(--font-display);font-weight:500;font-size:22px;text-transform:uppercase;line-height:1;margin:7px 0 4px;}
.dn-card .who{font-family:var(--font-serif);font-style:italic;font-size:17px;color:#45433a;}
/* Uitgelicht (nu te zien) — full-width split */
.dn-card--now{grid-column:1/-1;display:grid;grid-template-columns:1.1fr 1fr;border:2px solid var(--ink);}
.dn-card--now .thumb{aspect-ratio:auto;margin:0;min-height:300px;}
.dn-card--now .meta{padding:34px 32px;display:flex;flex-direction:column;justify-content:center;}
.dn-card--now h3{font-size:38px;}
.dn-card--now .who{font-size:21px;margin-top:6px;}
@media(max-width:860px){.dn-card--now{grid-template-columns:1fr;}}

/* Tag / badge (oxide) */
.dn-tag{font-family:var(--font-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;background:var(--accent);color:var(--paper);padding:5px 10px;width:max-content;font-weight:700;}

/* ---------- 10. GALERIJ (figuren) ---------- */
.dn-gal{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:720px){.dn-gal{grid-template-columns:1fr;}}
.dn-gal figure{margin:0;}
.dn-gal figure.tall{grid-row:span 2;}
.dn-gal img{width:100%;height:100%;object-fit:cover;border:1px solid var(--line);}
.dn-gal figcaption{font-family:var(--font-ui);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:9px;}
.dn-gal figcaption b{color:var(--ink);font-weight:600;}

/* ---------- 11. DEFINITIELIJST (praktisch / meta) ---------- */
.dn-dl{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;font-size:15px;}
.dn-dl dt{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:3px;}
.dn-dl dd{color:#2a2925;}
.dn-dl dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(162,59,45,.4);}

/* ---------- 12. FOOTER ---------- */
.dn-footer{background:var(--ink);color:#b8b1a1;padding:64px 0 38px;}
.dn-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;}
@media(max-width:760px){.dn-footer .cols{grid-template-columns:1fr;gap:28px;}}
.dn-footer img{width:150px;margin-bottom:18px;}
.dn-footer h4{font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:14px;}
.dn-footer a{color:#cfc8b8;text-decoration:none;}
.dn-footer a:hover{color:var(--accent);}
.dn-footer .fnav{list-style:none;line-height:2;font-size:14px;}
.dn-footer .fine{margin-top:38px;border-top:1px solid #33322c;padding-top:20px;font-size:12px;color:#7c7566;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}

/* ---------- 13. PLACEHOLDER-BEELDVLAK (mockup-hulp) ---------- */
.dn-imgslot{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(135deg,#e4ded2 0 22px,#e9e3d8 22px 44px);}
.dn-imgslot span{font-family:var(--font-ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#a49d8d;border:1px solid #cfc8ba;padding:8px 14px;background:rgba(244,241,234,.6);}