/* De stijl van /par en /par/methode.
 *
 * Overgenomen uit de aangeleverde documenten, waar hij twee keer in stond -
 * byte voor byte hetzelfde blok, dezelfde sha256. Hier een keer, want een
 * kopie met "houd deze gelijk" erboven blijft niet gelijk.
 *
 * De tokens staan hier als hexwaarde en niet als verwijzing naar
 * /assets/ikag/tokens/. Dat is bewust: dit is de vormgeving zoals ze
 * aangeleverd is, en de waarden komen overeen met de huisstijl (rood #FC3D39,
 * bordeaux #8D0402, creme #F5F2EC, violet #B499FF). Wil je ze ooit
 * gelijktrekken, doe dat dan als een eigen ronde en meet wat er verschuift.
 *
 * De lettertypes komen uit /assets/fonts/fonts.css, dat alle drie de families
 * zelf host. Laad ze hier nooit bij een externe aanbieder; zie CLAUDE.md,
 * Huisstijl.
 *
 * Die zin noemt met opzet geen hostnaam. check-conventies.sh grept op de ruwe
 * inhoud van een .css-bestand: $STRIP_ALL haalt PHP-commentaar en
 * HTML-commentaar weg, maar CSS-commentaar niet. Een bestand dat de afspraak
 * DOCUMENTEERT en NALEEFT werd daardoor als overtreding geteld. Dat is de
 * proza-val uit CLAUDE.md, en ze sloeg hier voor de zesde keer toe. */

:root{
  --ikag-red:#FC3D39; --ikag-red-ink:#C9211D; --ikag-bordeaux:#8D0402; --ikag-bordeaux-deep:#6E0301;
  --ikag-black:#140100; --ikag-purple:#B499FF; --ikag-purple-ink:#4b3a86; --ikag-violet:#ECE5FF;
  --ikag-cream:#F5F2EC; --ikag-cream-2:#EFEAE0; --ikag-white:#fff;
  --ikag-sage:#DEE8DA; --ikag-lavender:#ECE5FF; --ikag-pink:#FAE5E9; --ikag-sand:#F1E7D6;
  --surface-page:var(--ikag-cream); --surface-page-alt:var(--ikag-cream-2); --surface-card:#fff;
  --text-body:#3a2422; --text-heading:var(--ikag-black); --text-muted:#7a5e5c; --text-on-dark:#fdeceb;
  --text-eyebrow:var(--ikag-red-ink);
  --action-primary:var(--ikag-red); --action-primary-hover:var(--ikag-red-ink); --action-secondary:var(--ikag-purple);
  --border-hairline:rgba(20,1,0,.08); --accent-underline:var(--ikag-purple);
  --font-display:'Libre Caslon Display',Georgia,'Times New Roman',serif;
  --font-accent:'Instrument Serif',Georgia,serif;
  --font-body:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --text-hero:clamp(2.7rem,6.2vw,5.4rem); --text-h2:clamp(2rem,4.4vw,3.5rem);
  --text-h3:clamp(1.6rem,2.6vw,2.1rem); --text-h4:1.4rem;
  --text-lead:clamp(1.1rem,1.7vw,1.4rem); --text-base:1.02rem; --text-sm:.95rem; --text-eyebrow-size:.82rem;
  --leading-tight:1.04; --leading-body:1.5; --tracking-eyebrow:.16em; --tracking-tight:-0.01em;
  --radius-input:14px; --radius-card:22px; --radius-panel:30px; --radius-pill:999px;
  --shadow-header:0 6px 26px rgba(20,1,0,.09); --shadow-chip:0 8px 22px rgba(141,4,2,.10);
  --shadow-card-hover:0 18px 40px rgba(141,4,2,.12); --shadow-cta:0 22px 48px rgba(141,4,2,.28);
  --ease-out:cubic-bezier(.2,.7,.3,1); --lift:translateY(-5px); --dur-hover:.2s;
  --container-max:1240px; --gutter:clamp(20px,6%,96px); --section-y:clamp(3.5rem,7vw,6rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--surface-page);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:820px}
section{padding:var(--section-y) 0}
.alt{background:var(--surface-page-alt)}
.dark{background:var(--ikag-bordeaux);color:var(--text-on-dark)}
.dark h2,.dark h3{color:#fff}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);color:var(--text-heading);margin:0 0 1rem}
h1{font-size:var(--text-hero)} h2{font-size:var(--text-h2);margin-bottom:1.2rem}
h3{font-size:var(--text-h3);margin:2.4rem 0 .8rem} h4{font-size:var(--text-h4);margin:1.8rem 0 .5rem}
p{margin:0 0 1.1rem;max-width:68ch}
.lead{font-size:var(--text-lead);line-height:1.45;color:var(--text-body)}
.eyebrow{font-weight:600;font-size:var(--text-eyebrow-size);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-eyebrow);display:block;margin-bottom:1rem}
.dark .eyebrow{color:var(--ikag-purple)}
em.accent{font-family:var(--font-accent);font-style:italic;font-size:1.1em}
a{color:var(--ikag-red-ink)}
.u{position:relative;white-space:nowrap}
.u svg{position:absolute;left:-1%;bottom:-.14em;width:102%;height:.24em;overflow:visible;pointer-events:none}
.ikag-underline{stroke-dasharray:300;animation:ikag-draw 1s cubic-bezier(.3,.7,.3,1) .35s both}
@keyframes ikag-draw{from{stroke-dashoffset:300}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ikag-underline{animation:none!important;stroke-dashoffset:0!important}}
.masthead{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;
  padding:1.1rem 1.6rem;margin:1.4rem auto 0;max-width:var(--container-max);
  background:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-header)}
.masthead img{height:26px;display:block}
/* margin-left:auto duwt het opschrift en de taalwissel samen naar rechts, met
   het woordmerk links. Zonder dat zet space-between het opschrift in het midden. */
.masthead .meta{font-size:var(--text-sm);color:var(--text-muted);margin-left:auto}
/* Drie links en geen uitklapper zoals op de factsheets. Die werd daar een
   uitklapper omdat de balk vol stond met vier navigatielinks, een zoekveld en
   een actieknop; hier staan alleen een woordmerk en een datumregel, dus is
   openstaan zowel eenvoudiger als vindbaarder - en vindbaarheid was precies
   wat er ontbrak. Kopieer die component dus niet hierheen. */
.taalwissel{display:flex;align-items:center;gap:.15rem}
.taalwissel a,.taalwissel span{font-size:var(--text-sm);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
  padding:.45rem .55rem;border-radius:8px;line-height:1;
  min-height:38px;display:inline-flex;align-items:center}
.taalwissel a{color:var(--text-muted)}
.taalwissel a:hover{color:var(--ikag-red);background:var(--ikag-violet)}
.taalwissel .actief{color:var(--ikag-red)}
/* Op een telefoon past het opschrift niet naast de taalwissel: samen zijn ze
   breder dan 375px minus de padding, en dan wikkelen ze allebei en is de
   masthead drie rijen hoog. Het opschrift zakt daarom als geheel naar rij twee
   en de wissel blijft bij het woordmerk staan - rechtsboven, waar je hem zoekt. */
@media (max-width:560px){
  .masthead{padding:.9rem 1.2rem;gap:.3rem}
  .masthead .meta{order:3;width:100%;margin-left:0}
  .taalwissel{margin-left:auto}
}
.btn{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;line-height:1;
  padding:.85rem 1.5rem;border-radius:var(--radius-pill);border:none;text-decoration:none;cursor:pointer;
  transition:background var(--dur-hover) var(--ease-out)}
.btn-primary{background:var(--action-primary);color:#fff}
.btn-primary:hover{background:var(--action-primary-hover)}
.btn-secondary{background:var(--action-secondary);color:#241a4d}
.btn-onDark{background:#fff;color:var(--ikag-bordeaux)}
.statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.6rem;
  margin-top:2.6rem;padding-top:2.2rem;border-top:1px solid var(--border-hairline)}
.stat .num{font-family:var(--font-display);line-height:1;font-size:clamp(2.2rem,3.6vw,3rem);color:var(--ikag-red)}
.stat .lab{margin-top:.4rem;font-size:var(--text-sm);color:var(--text-body)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;margin:2rem 0}
.card{background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-card);
  padding:1.8rem;transition:transform var(--dur-hover) var(--ease-out),box-shadow var(--dur-hover) var(--ease-out)}
.card:hover{transform:var(--lift);box-shadow:var(--shadow-card-hover)}
.card h4{margin-top:0}
.card p{margin-bottom:0;font-size:var(--text-sm)}
.bg-sage{background:var(--ikag-sage)} .bg-lav{background:var(--ikag-lavender)}
.bg-pink{background:var(--ikag-pink)} .bg-sand{background:var(--ikag-sand)}
.medallion{width:46px;height:46px;border-radius:999px;background:#fff;box-shadow:var(--shadow-chip);
  display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.3rem;color:var(--ikag-bordeaux)}
table{width:100%;border-collapse:collapse;margin:1.6rem 0;font-size:var(--text-sm);background:#fff;
  border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--border-hairline)}
.dark table{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)}
th,td{text-align:left;padding:.72rem 1rem;border-bottom:1px solid var(--border-hairline)}
.dark th,.dark td{border-bottom-color:rgba(255,255,255,.14)}
th{font-weight:600;background:var(--ikag-black);color:#fff;font-size:.86rem;letter-spacing:.02em}
.dark th{background:var(--ikag-bordeaux-deep)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
tbody tr.total td{font-weight:700;background:var(--ikag-violet)}
.dark tbody tr.total td{background:rgba(180,153,255,.22)}
.pull{border-left:3px solid var(--ikag-purple);padding:.2rem 0 .2rem 1.4rem;margin:2rem 0;
  font-family:var(--font-accent);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.75rem);
  line-height:1.25;color:var(--ikag-black);max-width:44ch}
.dark .pull{color:#fff;border-left-color:var(--ikag-purple)}
.tag{display:inline-block;background:var(--ikag-violet);color:var(--ikag-purple-ink);font-weight:600;
  font-size:.78rem;letter-spacing:.04em;padding:.3rem .8rem;border-radius:var(--radius-pill);margin-right:.4rem}
.tag.k1{background:var(--ikag-sage);color:#2c4030}
.tag.k2{background:var(--ikag-sand);color:#5a4620}
.tag.k3{background:#e6e2da;color:#4a4238}
ul.checks{list-style:none;padding:0;margin:1.2rem 0}
ul.checks li{position:relative;padding-left:1.9rem;margin-bottom:.7rem;max-width:68ch}
ul.checks li i{position:absolute;left:0;top:.18rem;color:var(--ikag-red)}
.dark ul.checks li i{color:var(--ikag-purple)}
.toc{background:var(--ikag-violet);border-radius:var(--radius-panel);padding:2rem 2.2rem;margin:2.6rem 0 0}
.toc ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2.4rem}
.toc li{margin-bottom:.45rem;break-inside:avoid}
.toc a{color:var(--ikag-purple-ink);text-decoration:none;font-weight:500}
.toc a:hover{color:var(--ikag-red)}
.panel{background:#fff;border:1px solid var(--border-hairline);border-radius:var(--radius-panel);
  padding:clamp(1.6rem,3vw,2.6rem);margin:2rem 0}
.panel.violet{background:var(--ikag-violet);border-color:transparent}
.note{font-size:var(--text-sm);color:var(--text-muted);max-width:68ch}
.dark .note{color:rgba(253,236,235,.75)}
footer{background:var(--ikag-black);color:#cfbfbd;padding:3rem 0;font-size:var(--text-sm)}
footer img{height:22px;margin-bottom:1.2rem}
footer a{color:var(--ikag-purple)}
.cta{background:var(--ikag-red);color:#fff;border-radius:var(--radius-panel);
  padding:clamp(2rem,4vw,3.2rem);box-shadow:var(--shadow-cta)}
.cta h2{color:#fff;margin-bottom:.8rem}
.cta p{color:#ffe9e8}
.rev{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none}}
@media (max-width:640px){.toc ol{columns:1} .masthead{border-radius:var(--radius-card)}
  table{font-size:.86rem} th,td{padding:.55rem .7rem}}