:root {
  --paper: #f3ecd9;
  --ink: #171714;
  --red: #f04b2f;
  --blue: #2948e8;
  --yellow: #f4d44e;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, summary:focus-visible { outline: 4px solid var(--blue); outline-offset: 4px; }

.site-header {
  min-height: 86px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 3vw;
  border-bottom: var(--line);
  background: var(--paper);
  position: relative;
  z-index: 10;
}
.wordmark {
  width: fit-content;
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 950;
  letter-spacing: -.08em;
}
.wordmark-dot { color: var(--red); }
nav { display: flex; gap: clamp(1.2rem, 3vw, 3.4rem); font-size: .88rem; font-weight: 700; }
nav a, .header-contact { text-decoration-thickness: 2px; text-underline-offset: 5px; }
nav a:hover, .header-contact:hover { text-decoration: underline; }
.header-contact { justify-self: end; font-size: .88rem; font-weight: 800; }

.hero {
  min-height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  border-bottom: var(--line);
}
.hero-copy {
  padding: clamp(3rem, 7vw, 7rem) 4vw clamp(3rem, 6vw, 6rem) 6vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.eyebrow { margin: 0 0 2rem; font-size: .78rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.eyebrow span { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-right: .75rem; border: var(--line); border-radius: 50%; background: var(--yellow); letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(5.6rem, 12.5vw, 12rem); font-weight: 950; letter-spacing: -.1em; line-height: .71; text-transform: uppercase; }
h1 em { color: var(--red); font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.08em; text-transform: lowercase; }
.hero-intro { max-width: 630px; margin: clamp(2.7rem, 5vw, 5rem) 0 0 18%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.42; }
.hero-actions { display: flex; align-items: center; gap: 2rem; margin: 2.2rem 0 0 18%; }
.button { display: inline-flex; gap: 1.1rem; align-items: center; padding: 1rem 1.25rem; border: var(--line); font-size: .85rem; font-weight: 850; }
.button-dark { background: var(--ink); color: var(--paper); box-shadow: 5px 5px 0 var(--red); }
.button-dark:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--red); }
.text-link { font-size: .9rem; font-weight: 800; border-bottom: 2px solid; padding-bottom: .25rem; }
.text-link span { margin-left: .4rem; }

.hero-poster {
  margin: 4vw 4vw 4vw 0;
  padding: 1.4rem;
  background-color: var(--blue);
  color: #fff9e8;
  border: var(--line);
  box-shadow: 10px 10px 0 var(--ink);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  transform: rotate(1.2deg);
}
.hero-poster::after { content: ""; position: absolute; inset: 0; opacity: .18; pointer-events: none; background-image: radial-gradient(#fff9e8 1px, transparent 1px); background-size: 6px 6px; }
.poster-top, .poster-bottom { position: relative; z-index: 1; display: flex; justify-content: space-between; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.hero-poster p { position: relative; z-index: 1; max-width: 12ch; margin: 3rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.03; }
.poster-mark { position: absolute; z-index: 0; right: -7%; bottom: -20%; color: var(--yellow); font-size: clamp(18rem, 32vw, 34rem); font-weight: 950; line-height: 1; letter-spacing: -.15em; transform: rotate(-8deg); }
.poster-bottom { margin-top: auto; padding-top: 2rem; }

.manifesto { display: grid; grid-template-columns: .5fr 1.5fr; gap: 4rem; padding: clamp(5rem, 10vw, 10rem) 6vw; border-bottom: var(--line); }
.section-tag { font-size: .75rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.section-tag::before { content: ""; display: inline-block; width: 2rem; height: 2px; margin-right: .7rem; background: var(--red); vertical-align: middle; }
.manifesto h2 { max-width: 16ch; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.6rem, 5.5vw, 5.6rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.manifesto-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; max-width: 900px; margin-top: 4rem; }
.manifesto-grid p { margin: 0; font-size: 1.05rem; line-height: 1.65; }
.manifesto-grid strong { background: var(--yellow); font-weight: 800; }

.ticker {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 1.2rem;
  overflow: hidden;
  padding: 1.05rem 2vw;
  background: var(--yellow);
  border-bottom: var(--line);
  font-size: clamp(.75rem, 1.3vw, 1rem);
  font-weight: 950;
  letter-spacing: .08em;
  white-space: nowrap;
}
.ticker b { color: var(--red); }

.actions-section { padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.actions-head { display: grid; grid-template-columns: .5fr 1fr .5fr; gap: 3rem; align-items: end; margin-bottom: 5rem; }
.actions-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 5.5vw, 5.5rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.actions-head > p { margin: 0; font-size: .95rem; line-height: 1.6; }
.actions-grid { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 0; border-top: var(--line); border-left: var(--line); list-style: none; }
.actions-grid li { min-height: 320px; padding: 1.4rem; border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; background: rgba(255,255,255,.08); }
.actions-grid li:nth-child(3n+2) { background: rgba(244,212,78,.16); }
.actions-grid li:nth-child(4n) { background: rgba(240,75,47,.08); }
.action-number { font-family: Georgia, serif; font-style: italic; font-size: 1rem; color: var(--red); }
.actions-grid h3 { margin: auto 0 1rem; font-size: clamp(1.25rem, 1.8vw, 1.8rem); line-height: 1.02; letter-spacing: -.045em; }
.actions-grid p { margin: 0; font-family: Georgia, serif; font-size: .92rem; line-height: 1.52; }

.projects-section { display: grid; grid-template-columns: .8fr 1.2fr; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.projects-intro { align-self: start; position: sticky; top: 0; padding: clamp(5rem, 8vw, 8rem) 6vw; }
.section-tag.light::before { background: var(--yellow); }
.projects-intro h2 { margin: 3rem 0 2rem; font-size: clamp(3.3rem, 6vw, 6.4rem); line-height: .84; letter-spacing: -.075em; text-transform: uppercase; }
.projects-intro > p { max-width: 550px; margin: 0; font-family: Georgia, serif; font-size: 1.08rem; line-height: 1.65; color: #d9d1bf; }
.projects-list { border-left: 2px solid var(--paper); }
.project-card { min-height: 390px; padding: 2rem 3vw; border-bottom: 2px solid var(--paper); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto; gap: 1rem 2rem; color: var(--ink); }
.project-card:last-child { border-bottom: 0; }
.project-1 { background: var(--red); }
.project-2 { background: var(--yellow); }
.project-3 { background: #f1e9d6; }
.project-4 { background: var(--blue); color: #fff9e8; }
.project-5 { background: #53bca5; }
.project-6 { background: #f4a7c0; }
.project-meta { grid-column: 1 / -1; display: flex; justify-content: space-between; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.project-card h3 { align-self: end; margin: 0; font-size: clamp(3.6rem, 7.5vw, 8rem); line-height: .74; letter-spacing: -.085em; text-transform: uppercase; }
.project-card > p { align-self: end; max-width: 36ch; margin: 0; font-family: Georgia, serif; font-size: 1rem; line-height: 1.5; }
.project-card > a { grid-column: 2; width: fit-content; align-self: end; border-bottom: 2px solid currentColor; padding-bottom: .25rem; font-size: .8rem; font-weight: 900; }

.kids-section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: var(--line); background-color: var(--red); background-image: radial-gradient(rgba(23,23,20,.18) 1px, transparent 1px); background-size: 8px 8px; }
.kids-title { padding: clamp(5rem, 8vw, 8rem) 6vw; border-right: var(--line); }
.kids-title h2 { margin: 3.5rem 0 0; color: var(--paper); font-size: clamp(3.8rem, 8vw, 8.8rem); font-weight: 950; line-height: .77; letter-spacing: -.085em; text-transform: uppercase; }
.kids-title h2 em { color: var(--yellow); font-family: Georgia, serif; font-weight: 400; text-transform: lowercase; }
.paradox-card { align-self: center; margin: clamp(3rem, 7vw, 7rem); padding: clamp(2rem, 4vw, 4rem); background: var(--paper); border: var(--line); box-shadow: 10px 10px 0 var(--ink); transform: rotate(-1deg); }
.paradox-label { font-size: .7rem; font-weight: 950; letter-spacing: .12em; }
.paradox-card blockquote { margin: 3rem 0 2rem; font-family: Georgia, serif; font-size: clamp(2.4rem, 4.5vw, 4.6rem); line-height: .98; letter-spacing: -.045em; }
.paradox-card > p { font-size: 1rem; line-height: 1.6; }
details { margin: 2rem 0; border-top: var(--line); border-bottom: var(--line); }
summary { display: flex; justify-content: space-between; padding: 1rem 0; cursor: pointer; font-weight: 900; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary span { color: var(--red); font-size: 1.3rem; }
details[open] summary span { transform: rotate(45deg); }
details div { padding: 0 0 1.2rem; font-family: Georgia, serif; line-height: 1.55; }
.button-paper { background: var(--paper); box-shadow: 5px 5px 0 var(--blue); }
.button-paper:hover { transform: translate(2px,2px); box-shadow: 3px 3px 0 var(--blue); }

.artiproof-section { display: grid; grid-template-columns: .55fr 1.45fr; gap: 5rem; align-items: center; padding: clamp(5rem, 10vw, 10rem) 10vw; border-bottom: var(--line); }
.artiproof-stamp { justify-self: center; display: grid; place-items: center; width: clamp(210px, 24vw, 340px); aspect-ratio: 1; border: 4px double var(--ink); border-radius: 50%; color: var(--blue); font-family: Georgia, serif; font-size: clamp(5rem, 11vw, 10rem); font-style: italic; transform: rotate(-8deg); box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 12px var(--ink); }
.artiproof-copy h2 { max-width: 12ch; margin: 2.5rem 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.artiproof-copy > p { max-width: 720px; margin: 0 0 2.5rem; font-size: 1.08rem; line-height: 1.7; }
.artiproof-copy .text-link { display: inline-block; }

.join-section { min-height: 80vh; display: grid; grid-template-columns: .55fr 1.45fr; align-items: center; padding: clamp(5rem, 8vw, 8rem) 8vw; overflow: hidden; background: var(--yellow); border-bottom: var(--line); }
.join-mark { font-family: Georgia, serif; font-size: clamp(18rem, 38vw, 38rem); line-height: .6; color: var(--red); transform: rotate(12deg); }
.join-section h2 { max-width: 13ch; margin: 2rem 0; font-size: clamp(3.7rem, 8vw, 8.5rem); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.join-intro { max-width: 650px; margin: 0 0 2.5rem; font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.6; }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 3rem; padding: 4rem 6vw 2rem; background: var(--ink); color: var(--paper); }
.footer-wordmark { font-size: clamp(2.8rem, 5vw, 5rem); font-weight: 950; letter-spacing: -.09em; }
.footer-wordmark span { color: var(--red); }
.site-footer p { max-width: 36ch; margin: 0 0 .7rem; font-family: Georgia, serif; line-height: 1.45; }
.site-footer p + p { font-family: inherit; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.footer-links { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2rem; font-size: .85rem; font-weight: 850; }
.footer-links a:first-child { border-bottom: 2px solid var(--red); padding-bottom: .25rem; }
.site-footer small { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid #55554d; color: #a9a396; font-size: .68rem; }

@media (max-width: 850px) {
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; }
  nav { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding: 4rem 6vw 5rem; }
  h1 { font-size: clamp(5rem, 23vw, 8rem); }
  .hero-intro, .hero-actions { margin-left: 0; }
  .hero-poster { min-height: 520px; margin: 0 6vw 5rem; transform: rotate(.5deg); }
  .manifesto { grid-template-columns: 1fr; gap: 2.5rem; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .actions-head { grid-template-columns: 1fr; gap: 2rem; }
  .actions-grid { grid-template-columns: repeat(2, 1fr); }
  .actions-grid li { min-height: 280px; }
  .projects-section { grid-template-columns: 1fr; }
  .projects-intro { position: static; }
  .projects-list { border-left: 0; border-top: 2px solid var(--paper); }
  .project-card { min-height: 350px; }
  .kids-section { grid-template-columns: 1fr; }
  .kids-title { border-right: 0; border-bottom: var(--line); }
  .artiproof-section { grid-template-columns: 1fr; gap: 3rem; }
  .join-section { grid-template-columns: 1fr; }
  .join-mark { display: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-wordmark { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .header-contact { font-size: 0; }
  .header-contact::after { content: "Contact ↗"; font-size: .82rem; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 1.4rem; }
  .ticker { justify-content: flex-start; }
  .actions-grid { grid-template-columns: 1fr; }
  .actions-grid li { min-height: 250px; }
  .project-card { min-height: 430px; grid-template-columns: 1fr; }
  .project-card h3 { font-size: 4rem; }
  .project-card > a { grid-column: 1; }
  .paradox-card { margin: 2rem 6vw 4rem; }
  .artiproof-section { padding-left: 6vw; padding-right: 6vw; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-wordmark, .site-footer small { grid-column: 1; }
  .footer-links { align-items: flex-start; }
}
@media (prefers-reduced-motion: no-preference) {
  .button, a { transition: transform .16s ease, box-shadow .16s ease, color .16s ease; }
}

/* Kopke Krab — toegangspoort tot het volledige paradoxenpakket */
.krab-page { background: var(--paper); }
.krab-hero { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 1.25fr .75fr; border-bottom: var(--line); }
.krab-hero > div:first-child { padding: clamp(4rem, 7vw, 7rem) 6vw; display: flex; flex-direction: column; justify-content: center; }
.krab-hero h1 { font-size: clamp(4.8rem, 10vw, 10rem); }
.krab-hero .hero-intro, .krab-hero .hero-actions { margin-left: 0; }
.krab-facts { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.5rem; }
.krab-facts span { padding: .55rem .75rem; border: var(--line); font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; background: #fff8e8; }
.krab-poster { margin: 4vw 4vw 4vw 0; padding: 1.6rem; border: var(--line); background: var(--yellow); box-shadow: 10px 10px 0 var(--ink); display: flex; flex-direction: column; overflow: hidden; transform: rotate(1deg); }
.krab-poster > span { font-size: .68rem; font-weight: 950; letter-spacing: .13em; }
.krab-poster p { position: relative; z-index: 1; max-width: 12ch; margin: 3rem 0 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 4.4rem); line-height: .98; }
.krab-poster strong { margin: auto -1rem -7rem auto; color: var(--red); font-size: clamp(18rem, 32vw, 34rem); line-height: .8; transform: rotate(-12deg); }
.krab-intro { display: grid; grid-template-columns: .5fr 1.5fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.krab-intro h2, .krab-section-head h2, .krab-guide h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5.6rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.krab-intro p { max-width: 700px; margin-top: 2.5rem; font-size: 1.08rem; line-height: 1.7; }
.krab-stories { padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--ink); color: var(--paper); }
.krab-section-head { display: grid; grid-template-columns: .5fr 1.5fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.krab-story-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.krab-story { min-height: 390px; padding: 1.4rem; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); display: flex; flex-direction: column; background: var(--card-color); color: var(--ink); transition: transform .18s ease; }
.krab-story:hover { transform: translateY(-7px); }
.krab-story > span, .krab-story small { font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.krab-story h3 { margin: auto 0 1rem; font-size: clamp(1.8rem, 3vw, 3.5rem); line-height: .86; letter-spacing: -.07em; text-transform: uppercase; }
.krab-story p { margin: 0 0 2rem; font-family: Georgia, serif; line-height: 1.45; }
.krab-story b { margin-top: auto; font-size: .76rem; border-bottom: 2px solid; padding-bottom: .25rem; width: fit-content; }
.krab-method { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.krab-method h2 { margin: 2rem 0 0; font-size: clamp(3rem, 6vw, 6rem); line-height: .88; letter-spacing: -.07em; text-transform: uppercase; }
.krab-method ol { margin: 0; padding: 0; border-top: var(--line); list-style: none; }
.krab-method li { display: grid; grid-template-columns: 3.5rem .7fr 1fr; gap: 1rem; align-items: baseline; padding: 1.3rem 0; border-bottom: var(--line); }
.krab-method li span { color: var(--red); font-family: Georgia, serif; font-style: italic; }
.krab-method li strong { font-size: 1.15rem; }
.krab-method li p { margin: 0; line-height: 1.5; }
.krab-guide { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--blue); color: #fff9e8; border-bottom: var(--line); }
.krab-guide > div:last-child { align-self: end; }
.krab-guide p { max-width: 560px; font-family: Georgia, serif; font-size: 1.15rem; line-height: 1.6; }
.krab-guide .button-paper { margin-top: 1.2rem; color: var(--ink); background: var(--paper); box-shadow: 6px 6px 0 var(--yellow); }

@media (max-width: 850px) {
  .krab-hero, .krab-intro, .krab-section-head, .krab-method, .krab-guide { grid-template-columns: 1fr; }
  .krab-poster { min-height: 520px; margin: 0 6vw 7vw; }
  .krab-story-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .krab-hero h1 { font-size: clamp(4rem, 21vw, 6rem); }
  .krab-story-grid { grid-template-columns: 1fr; }
  .krab-method li { grid-template-columns: 2.5rem 1fr; }
  .krab-method li p { grid-column: 2; }
}

/* Kan jij het nog zelf? — kinderonderzoek in de KopKen-huisstijl */
.project-7 { background: #53bca5; }
.project-7 h3 { max-width: 8ch; font-size: clamp(3.1rem, 6vw, 6.8rem); }
.experiment-page, .module-page { background: var(--paper); }
.experiment-hero, .module-hero { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 1.2fr .8fr; border-bottom: var(--line); }
.experiment-hero > div, .module-hero > div { padding: clamp(4rem, 7vw, 7rem) 6vw; display: flex; flex-direction: column; justify-content: center; }
.experiment-hero h1 { font-size: clamp(4.7rem, 10.5vw, 10.8rem); }
.experiment-hero .hero-intro, .experiment-hero .hero-actions,
.module-hero .hero-intro, .module-hero .hero-actions { margin-left: 0; }
.experiment-facts { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 2.5rem; }
.experiment-facts span { padding: .55rem .75rem; border: var(--line); background: #fff8e8; font-size: .7rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.experiment-poster, .module-poster { margin: 4vw 4vw 4vw 0; padding: 1.5rem; border: var(--line); box-shadow: 10px 10px 0 var(--ink); display: flex; flex-direction: column; overflow: hidden; position: relative; transform: rotate(1deg); }
.experiment-poster { background: var(--blue); color: #fff9e8; }
.experiment-poster::after, .module-poster::after { content: ""; position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: radial-gradient(currentColor 1px, transparent 1px); background-size: 7px 7px; }
.experiment-poster p, .module-poster p { position: relative; z-index: 1; max-width: 12ch; margin: 3rem 0 0; font-family: Georgia, serif; font-size: clamp(2.2rem, 4.5vw, 4.8rem); line-height: .98; }
.experiment-poster-mark { position: absolute; right: -5%; bottom: -18%; color: var(--yellow); font-family: Georgia, serif; font-size: clamp(20rem, 36vw, 38rem); line-height: .8; transform: rotate(10deg); }
.experiment-intro { display: grid; grid-template-columns: .5fr 1.5fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.experiment-intro h2 { max-width: 16ch; margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5.8rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.experiment-intro .lead { max-width: 850px; margin: 2.5rem 0; font-size: 1.2rem; line-height: 1.65; }
.experiment-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 900px; }
.experiment-principles p { margin: 0; padding-top: 1.2rem; border-top: var(--line); font-family: Georgia, serif; line-height: 1.55; }
.experiment-list-section { padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.experiment-section-head { display: grid; grid-template-columns: .5fr 1.5fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.experiment-section-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5.8rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.experiment-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.experiment-card { min-height: 460px; padding: clamp(1.5rem, 3vw, 2.6rem); border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); display: flex; flex-direction: column; background: var(--card-color); color: var(--card-ink, var(--ink)); }
.experiment-card:last-child { grid-column: 1 / -1; min-height: 390px; }
.experiment-card-meta { display: flex; justify-content: space-between; gap: 1rem; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.experiment-card h3 { max-width: 12ch; margin: auto 0 1.4rem; font-size: clamp(2.7rem, 5.5vw, 6.2rem); line-height: .86; letter-spacing: -.075em; text-transform: uppercase; }
.experiment-card p { max-width: 43ch; margin: 0 0 2rem; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.48; }
.experiment-card-actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.experiment-card-actions a { border-bottom: 2px solid currentColor; padding-bottom: .25rem; font-size: .78rem; font-weight: 900; }
.research-cycle { display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.research-cycle h2 { margin: 2rem 0 0; font-size: clamp(3rem, 6vw, 6.2rem); line-height: .87; letter-spacing: -.07em; text-transform: uppercase; }
.research-cycle ol { margin: 0; padding: 0; border-top: var(--line); list-style: none; }
.research-cycle li { display: grid; grid-template-columns: 3.5rem .6fr 1.2fr; gap: 1rem; align-items: baseline; padding: 1.2rem 0; border-bottom: var(--line); }
.research-cycle li span { color: var(--red); font-family: Georgia, serif; font-style: italic; }
.research-cycle li strong { font-size: 1.12rem; }
.research-cycle li p { margin: 0; line-height: 1.5; }
.download-lab { display: grid; grid-template-columns: .55fr 1.45fr; gap: 5rem; align-items: center; padding: clamp(5rem, 9vw, 9rem) 8vw; border-bottom: var(--line); }
.download-stamp { justify-self: center; display: grid; place-items: center; width: clamp(210px, 25vw, 360px); aspect-ratio: 1; border: 4px double var(--ink); border-radius: 50%; color: var(--red); font-family: Georgia, serif; font-size: clamp(3.5rem, 8vw, 7.5rem); font-style: italic; transform: rotate(-8deg); box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 12px var(--ink); }
.download-lab h2 { max-width: 14ch; margin: 2.5rem 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.3vw, 5.4rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.download-lab p { max-width: 760px; font-size: 1.05rem; line-height: 1.7; }
.download-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin: 2.4rem 0; }
.status-note { padding: 1rem; border: var(--line); background: rgba(244,212,78,.25); font-size: .82rem !important; }
.observation-section { min-height: 75vh; display: grid; grid-template-columns: .5fr 1.5fr; align-items: center; padding: clamp(5rem, 8vw, 8rem) 8vw; overflow: hidden; background: var(--yellow); border-bottom: var(--line); }
.observation-mark { font-family: Georgia, serif; font-size: clamp(18rem, 38vw, 38rem); line-height: .6; color: var(--red); transform: rotate(-8deg); }
.observation-section h2 { max-width: 13ch; margin: 2rem 0; font-size: clamp(3.4rem, 7.5vw, 8rem); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.observation-section p:not(.eyebrow) { max-width: 720px; margin: 0 0 2.5rem; font-family: Georgia, serif; font-size: 1.12rem; line-height: 1.6; }

/* Losse proefpagina's */
.module-hero { min-height: 760px; }
.module-hero h1 { font-size: clamp(4.2rem, 9vw, 9.2rem); }
.module-hero h1 em { color: var(--module-color); }
.module-poster { background: var(--module-color); color: var(--module-contrast, var(--ink)); }
.module-poster > span { position: relative; z-index: 1; font-size: .7rem; font-weight: 950; letter-spacing: .13em; }
.module-poster b { position: absolute; right: -3%; bottom: -15%; color: var(--module-contrast, var(--ink)); opacity: .16; font-family: Georgia, serif; font-size: clamp(18rem, 34vw, 36rem); line-height: .8; transform: rotate(-10deg); }
.module-question { display: grid; grid-template-columns: .45fr 1.55fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.module-question h2, .module-measure h2, .module-steps h2, .module-boundary h2 { margin: 0 0 2.5rem; font-family: Georgia, serif; font-size: clamp(2.7rem, 5vw, 5.2rem); font-weight: 400; line-height: .98; letter-spacing: -.045em; }
.condition-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: var(--line); border-left: var(--line); }
.condition-grid article { min-height: 260px; padding: 1.6rem; border-right: var(--line); border-bottom: var(--line); background: color-mix(in srgb, var(--module-color) 18%, var(--paper)); }
.condition-grid article > span { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: var(--line); border-radius: 50%; background: var(--module-color); font-weight: 950; }
.condition-grid h3 { margin: 3rem 0 1rem; font-size: 1.7rem; letter-spacing: -.04em; }
.condition-grid p, .fair-test { line-height: 1.6; }
.fair-test { max-width: 780px; margin: 2rem 0 0; padding-left: 1rem; border-left: 5px solid var(--module-color); }
.module-measure { display: grid; grid-template-columns: .75fr 1.25fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.module-measure ul { margin: 0; padding: 0; border-top: 2px solid var(--paper); list-style: none; }
.module-measure li { display: grid; grid-template-columns: .6fr 1.4fr; gap: 2rem; padding: 1.35rem 0; border-bottom: 2px solid var(--paper); }
.module-measure li strong { color: var(--module-color); font-size: 1.2rem; }
.module-measure li span { line-height: 1.5; }
.module-steps { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.module-steps ol { margin: 0; padding: 0; border-top: var(--line); list-style: none; }
.module-steps li { display: grid; grid-template-columns: 3.5rem 1fr; gap: 1rem; padding: 1.2rem 0; border-bottom: var(--line); }
.module-steps li span { color: var(--module-color); font-family: Georgia, serif; font-style: italic; }
.module-steps li p { margin: 0; line-height: 1.55; }
.module-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 6vw; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); background: color-mix(in srgb, var(--module-color) 16%, var(--paper)); }
.module-boundary > div > p:not(.eyebrow) { max-width: 650px; font-family: Georgia, serif; font-size: 1.08rem; line-height: 1.6; }
.module-boundary aside { align-self: center; padding: clamp(2rem, 4vw, 4rem); border: var(--line); background: var(--paper); box-shadow: 9px 9px 0 var(--module-color); transform: rotate(1deg); }
.module-boundary aside span { font-size: .72rem; font-weight: 950; letter-spacing: .12em; }
.module-boundary aside p { margin: 2rem 0 0; font-family: Georgia, serif; font-size: clamp(1.6rem, 3vw, 3rem); line-height: 1.05; }
.module-next { display: grid; grid-template-columns: 1.3fr .7fr; gap: 4rem; align-items: end; padding: clamp(5rem, 8vw, 8rem) 6vw; background: var(--module-color); color: var(--module-contrast, var(--ink)); border-bottom: var(--line); }
.module-next h2 { max-width: 14ch; margin: 2rem 0 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .84; letter-spacing: -.07em; text-transform: uppercase; }
.module-next > div:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }

@media (max-width: 850px) {
  .experiment-hero, .module-hero, .experiment-intro, .experiment-section-head, .research-cycle, .download-lab, .observation-section, .module-question, .module-measure, .module-steps, .module-boundary, .module-next { grid-template-columns: 1fr; }
  .experiment-poster, .module-poster { min-height: 520px; margin: 0 6vw 7vw; }
  .experiment-grid { grid-template-columns: 1fr; }
  .experiment-card:last-child { grid-column: 1; }
  .experiment-principles, .condition-grid { grid-template-columns: 1fr; }
  .download-stamp { justify-self: start; }
  .observation-mark { display: none; }
  .module-next { align-items: start; }
}
@media (max-width: 520px) {
  .experiment-hero h1, .module-hero h1 { font-size: clamp(4rem, 20vw, 6rem); }
  .experiment-card { min-height: 390px; }
  .research-cycle li { grid-template-columns: 2.5rem 1fr; }
  .research-cycle li p { grid-column: 2; }
  .module-measure li { grid-template-columns: 1fr; gap: .55rem; }
  .module-next h2 { font-size: clamp(3rem, 15vw, 5rem); }
}


/* ========================================================================== 
   KopKen Website v1.5 - Open Manifest baseline
   Nieuwe homepage, publicaties en rolgerichte ingangen.
   ========================================================================== */

body { overflow-wrap: anywhere; }
.site-nav { align-items: center; }
.home-hero h1 { font-size: clamp(4.7rem, 10.4vw, 10.5rem); line-height: .76; }
.home-hero h1 em { color: var(--red); }
.manifest-poster { background: var(--blue); }
.manifest-poster p { max-width: 14ch; }
.home-manifesto .manifesto-copy { min-width: 0; }
.manifesto-statement { max-width: 900px; margin: 3rem 0 0; padding: 1.35rem 1.5rem; border: var(--line); background: var(--yellow); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 900; line-height: 1.35; box-shadow: 6px 6px 0 var(--ink); }

.principles-section { padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.principles-head { display: grid; grid-template-columns: .45fr 1.1fr .55fr; gap: 3rem; align-items: end; margin-bottom: 4.5rem; }
.principles-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5.7rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.principles-head > p { margin: 0; font-size: .98rem; line-height: 1.65; }
.principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); border-left: var(--line); }
.principle-card { min-height: 330px; padding: 1.7rem; border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; }
.principle-card:nth-child(1) { background: rgba(240,75,47,.09); }
.principle-card:nth-child(2) { background: rgba(244,212,78,.22); }
.principle-card:nth-child(3) { background: rgba(41,72,232,.08); }
.principle-card > span, .work-card > span, .role-card > span, .role-detail > span { color: var(--red); font-family: Georgia, serif; font-style: italic; }
.principle-card h3 { margin: auto 0 1.2rem; font-size: clamp(1.6rem, 2.4vw, 2.5rem); line-height: 1; letter-spacing: -.055em; }
.principle-card p { margin: 0; font-family: Georgia, serif; font-size: 1rem; line-height: 1.55; }

.work-section { padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.work-head { display: grid; grid-template-columns: .45fr 1.1fr .55fr; gap: 3rem; align-items: end; margin-bottom: 4.5rem; }
.work-head .section-tag::before { background: var(--yellow); }
.work-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.4vw, 5.5rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.work-head > p { margin: 0; color: #d9d1bf; line-height: 1.65; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--paper); border-left: 2px solid var(--paper); }
.work-card { min-height: 350px; padding: 1.7rem; border-right: 2px solid var(--paper); border-bottom: 2px solid var(--paper); color: var(--ink); display: flex; flex-direction: column; }
.work-red { background: var(--red); }
.work-yellow { background: var(--yellow); }
.work-blue { background: var(--blue); color: #fff9e8; }
.work-green { background: #53bca5; }
.work-card > span { color: currentColor; opacity: .75; }
.work-card h3 { margin: auto 0 1.2rem; font-size: clamp(2rem, 3vw, 3.4rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.work-card p { margin: 0; font-family: Georgia, serif; line-height: 1.55; }

.project-7 { background: #d3c7ff; }
.project-card h3 { overflow-wrap: normal; word-break: normal; hyphens: auto; }

.publication-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(3rem, 7vw, 8rem); padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); background: #e9dfc7; }
.publication-intro { align-self: center; }
.publication-intro h2 { max-width: 13ch; margin: 2.5rem 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.2vw, 5.3rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.publication-intro > p { max-width: 580px; margin: 0 0 2.5rem; line-height: 1.65; }
.publication-card { align-self: center; display: grid; grid-template-columns: .72fr 1.28fr; border: var(--line); background: var(--paper); box-shadow: 12px 12px 0 var(--ink); transform: rotate(.35deg); }
.publication-cover { min-height: 500px; padding: 1.5rem; overflow: hidden; position: relative; display: flex; flex-direction: column; background: var(--blue); color: #fff9e8; border-right: var(--line); }
.publication-cover::after { content:""; position:absolute; inset:0; opacity:.15; background-image:radial-gradient(#fff9e8 1px, transparent 1px); background-size:7px 7px; pointer-events:none; }
.publication-cover span, .publication-cover b, .publication-cover strong { position: relative; z-index: 1; }
.publication-cover span { font-size: .72rem; font-weight: 950; letter-spacing: .15em; }
.publication-cover strong { margin: auto 0; color: var(--yellow); font-size: clamp(7rem, 13vw, 14rem); line-height: .7; letter-spacing: -.12em; }
.publication-cover b { font-size: .75rem; letter-spacing: .14em; }
.publication-copy { padding: clamp(2rem, 4vw, 4rem); display: flex; flex-direction: column; }
.publication-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; font-size: .68rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.publication-meta span { padding-bottom: .2rem; border-bottom: 2px solid currentColor; }
.publication-copy h3 { margin: auto 0 1.5rem; font-size: clamp(2.6rem, 5vw, 5.2rem); line-height: .86; letter-spacing: -.075em; text-transform: uppercase; }
.publication-copy > p { margin: 0 0 2rem; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.55; }
.publication-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; }

.roles-section { padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.roles-head { display: grid; grid-template-columns: .45fr 1.1fr .55fr; gap: 3rem; align-items: end; margin-bottom: 4.5rem; }
.roles-head h2 { margin: 0; font-size: clamp(3.6rem, 7vw, 7.5rem); line-height: .82; letter-spacing: -.075em; text-transform: uppercase; }
.roles-head > p { margin: 0; font-family: Georgia, serif; font-size: 1.05rem; line-height: 1.6; }
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--line); border-left: var(--line); }
.role-card { min-height: 310px; padding: 1.5rem; border-right: var(--line); border-bottom: var(--line); display: flex; flex-direction: column; background: rgba(255,255,255,.12); }
.role-card:nth-child(2), .role-card:nth-child(6) { background: rgba(244,212,78,.2); }
.role-card:nth-child(3) { background: rgba(240,75,47,.08); }
.role-card:nth-child(4) { background: rgba(41,72,232,.08); }
.role-card:hover { transform: translate(-3px,-3px); box-shadow: 6px 6px 0 var(--ink); }
.role-card h3 { margin: auto 0 1rem; font-size: clamp(1.65rem, 2.5vw, 2.7rem); line-height: .96; letter-spacing: -.055em; }
.role-card p { margin: 0 0 1.5rem; font-family: Georgia, serif; line-height: 1.5; }
.role-card b { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }

/* Publications overview */
.publication-hero, .participation-hero { min-height: calc(100vh - 86px); display: grid; grid-template-columns: 1.2fr .8fr; border-bottom: var(--line); }
.publication-hero > div, .participation-hero > div { padding: clamp(4rem, 7vw, 7rem) 6vw; display: flex; flex-direction: column; justify-content: center; }
.publication-hero h1, .participation-hero h1 { margin: 0; font-size: clamp(4rem, 8.5vw, 9rem); line-height: .82; }
.publication-hero h1 em, .participation-hero h1 em { color: var(--red); font-family: Georgia, serif; font-weight: 400; text-transform: lowercase; }
.publication-hero .hero-intro, .participation-hero .hero-intro { margin-left: 0; }
.publication-hero-note, .participation-note { margin: 4vw 4vw 4vw 0; padding: 2rem; position: relative; overflow: hidden; border: var(--line); box-shadow: 10px 10px 0 var(--ink); background: var(--yellow); display: flex; flex-direction: column; transform: rotate(1deg); }
.publication-hero-note > span, .participation-note > span { position: relative; z-index: 1; font-size: .7rem; font-weight: 950; letter-spacing: .13em; }
.publication-hero-note > p, .participation-note > p { position: relative; z-index: 1; max-width: 14ch; margin: auto 0; font-family: Georgia, serif; font-size: clamp(2rem, 4vw, 4.4rem); line-height: .98; }
.publication-hero-note > b, .participation-note > b { position: absolute; right: -8%; bottom: -20%; color: var(--red); opacity: .22; font-size: clamp(18rem, 34vw, 36rem); line-height: .8; transform: rotate(-10deg); }
.participation-note { background: var(--blue); color: #fff9e8; }
.participation-note > b { color: var(--yellow); opacity: .32; }

.publication-library { padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.library-head { display: grid; grid-template-columns: .45fr 1.55fr; gap: 3rem; align-items: end; margin-bottom: 4rem; }
.library-head h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5.5vw, 5.8rem); font-weight: 400; line-height: .98; }
.library-item { display: grid; grid-template-columns: 80px 1fr auto; gap: 2rem; align-items: center; padding: 2.3rem 0; border-top: var(--line); }
.library-item:last-child { border-bottom: var(--line); }
.library-number { align-self: start; color: var(--red); font-family: Georgia, serif; font-style: italic; font-size: 1.2rem; }
.library-main h3 { margin: 1.4rem 0 1rem; font-size: clamp(2rem, 4vw, 4.6rem); line-height: .9; letter-spacing: -.065em; text-transform: uppercase; }
.library-main p { max-width: 760px; margin: 0; font-family: Georgia, serif; line-height: 1.55; }
.library-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; min-width: 180px; }
.publication-principles { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5rem; padding: clamp(5rem, 9vw, 9rem) 6vw; background: var(--ink); color: var(--paper); border-bottom: var(--line); }
.publication-principles h2 { margin: 2rem 0 0; font-family: Georgia, serif; font-size: clamp(2.8rem, 5vw, 5.3rem); font-weight: 400; line-height: .98; }
.publication-principles .section-tag::before { background: var(--yellow); }
.publication-principles ol { margin: 0; padding: 0; border-top: 2px solid var(--paper); list-style: none; }
.publication-principles li { display: grid; grid-template-columns: 3.2rem .7fr 1.3fr; gap: 1.2rem; padding: 1.4rem 0; border-bottom: 2px solid var(--paper); }
.publication-principles li span { color: var(--yellow); font-family: Georgia, serif; font-style: italic; }
.publication-principles li p { margin: 0; color: #d9d1bf; line-height: 1.55; }

/* Manifest HTML publication */
.breadcrumb { margin: 0 0 2rem; font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.breadcrumb span { color: var(--red); margin: 0 .5rem; }
.manifest-hero { display: grid; grid-template-columns: 1.15fr .85fr; border-bottom: var(--line); }
.manifest-hero > div { padding: clamp(4rem, 7vw, 7rem) 6vw; }
.manifest-hero h1 { margin: 0; font-size: clamp(5rem, 10vw, 10rem); line-height: .75; }
.manifest-hero h1 em { color: var(--red); font-family: Georgia, serif; font-weight: 400; text-transform: lowercase; }
.manifest-hero .hero-intro { margin-left: 0; max-width: 680px; }
.manifest-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2rem; margin-top: 2.5rem; }
.manifest-meta-card { margin: 4vw 4vw 4vw 0; padding: clamp(2rem, 4vw, 4rem); border: var(--line); background: var(--blue); color: #fff9e8; box-shadow: 10px 10px 0 var(--ink); transform: rotate(.7deg); }
.manifest-meta-card > span { font-size: .7rem; font-weight: 950; letter-spacing: .13em; }
.manifest-meta-card dl { margin: 4rem 0 0; }
.manifest-meta-card dl div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.65); }
.manifest-meta-card dt { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.manifest-meta-card dd { margin: 0; font-family: Georgia, serif; }
.manifest-layout { display: grid; grid-template-columns: .42fr 1.58fr; gap: 5rem; max-width: 1500px; margin: 0 auto; padding: clamp(5rem, 8vw, 8rem) 6vw; border-bottom: var(--line); }
.manifest-toc { position: sticky; top: 2rem; align-self: start; padding: 1.5rem; border: var(--line); background: rgba(244,212,78,.18); }
.manifest-toc > p { margin: 0 0 1rem; font-size: .72rem; font-weight: 950; text-transform: uppercase; letter-spacing: .11em; }
.manifest-toc ol { margin: 0 0 2rem; padding: 0; list-style: none; }
.manifest-toc li { border-top: 1px solid var(--ink); }
.manifest-toc li:last-child { border-bottom: 1px solid var(--ink); }
.manifest-toc li a { display: block; padding: .72rem 0; font-size: .83rem; font-weight: 750; line-height: 1.25; }
.manifest-article { min-width: 0; }
.manifest-section { scroll-margin-top: 2rem; margin-bottom: 4.5rem; }
.manifest-section h2 { max-width: 20ch; margin: 0 0 2rem; color: #20527d; font-family: Georgia, serif; font-size: clamp(2.3rem, 4.5vw, 4.8rem); font-weight: 400; line-height: .98; letter-spacing: -.04em; }
.manifest-section p { max-width: 860px; margin: 0 0 1.25rem; font-family: Georgia, serif; font-size: clamp(1.08rem, 1.5vw, 1.27rem); line-height: 1.72; }
.manifest-section a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.manifest-emphasis { font-weight: 800; }
.manifest-section:last-of-type .manifest-emphasis { text-align: center; color: #20527d; font-size: clamp(1.5rem, 2.5vw, 2.4rem); line-height: 1.25; }
.citation-box { max-width: 860px; margin-top: 5rem; padding: 1.5rem; border: var(--line); background: rgba(41,72,232,.07); }
.citation-box p { margin: .7rem 0 0; font-family: Georgia, serif; line-height: 1.5; }

/* Participation page */
.role-detail-grid { border-bottom: var(--line); }
.role-detail { display: grid; grid-template-columns: 100px 1fr; gap: 3rem; padding: clamp(4rem, 8vw, 8rem) 8vw; border-bottom: var(--line); }
.role-detail:last-child { border-bottom: 0; }
.role-detail:nth-child(even) { background: rgba(244,212,78,.16); }
.role-detail > span { font-size: 1.25rem; }
.role-detail > div { max-width: 1000px; }
.role-kicker { margin: 0 0 1rem; font-size: .75rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.role-detail h2 { max-width: 16ch; margin: 0 0 2rem; font-family: Georgia, serif; font-size: clamp(2.6rem, 5vw, 5.3rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
.role-detail > div > p:not(.role-kicker) { max-width: 780px; font-size: 1.08rem; line-height: 1.65; }
.role-detail ul { max-width: 820px; margin: 2rem 0 2.5rem; padding: 0; border-top: var(--line); list-style: none; }
.role-detail li { padding: 1rem 0 1rem 2rem; border-bottom: var(--line); position: relative; line-height: 1.5; }
.role-detail li::before { content: "→"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
.local-callout { padding: clamp(5rem, 9vw, 9rem) 12vw; background: var(--yellow); border-bottom: var(--line); }
.local-callout h2 { max-width: 16ch; margin: 2.5rem 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .85; letter-spacing: -.07em; text-transform: uppercase; }
.local-callout p { max-width: 760px; font-family: Georgia, serif; font-size: 1.1rem; line-height: 1.65; }

/* Legal */
.legal-content { max-width: 980px; margin: 0 auto; padding: clamp(5rem, 10vw, 10rem) 6vw; min-height: 70vh; }
.legal-content h1 { margin: 2rem 0 4rem; font-size: clamp(4rem, 9vw, 9rem); line-height: .82; }
.legal-content dl { border-top: var(--line); }
.legal-content dl div { display: grid; grid-template-columns: .7fr 1.3fr; gap: 2rem; padding: 1.5rem 0; border-bottom: var(--line); }
.legal-content dt { font-weight: 900; }
.legal-content dd { margin: 0; font-family: Georgia, serif; line-height: 1.55; }

@media (max-width: 1100px) {
  .site-nav { gap: 1.2rem; }
  .publication-card { grid-template-columns: .62fr 1.38fr; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 850px) {
  .home-hero h1 { font-size: clamp(4.8rem, 20vw, 8rem); }
  .principles-head, .work-head, .roles-head, .library-head { grid-template-columns: 1fr; gap: 2rem; }
  .principles-grid, .roles-grid { grid-template-columns: 1fr 1fr; }
  .publication-section, .publication-hero, .participation-hero, .manifest-hero, .publication-principles, .manifest-layout { grid-template-columns: 1fr; }
  .publication-card { grid-template-columns: .7fr 1.3fr; }
  .publication-hero-note, .participation-note, .manifest-meta-card { min-height: 500px; margin: 0 6vw 6vw; }
  .manifest-layout { gap: 3rem; }
  .manifest-toc { position: static; }
  .library-item { grid-template-columns: 55px 1fr; }
  .library-actions { grid-column: 2; flex-direction: row; flex-wrap: wrap; }
  .publication-principles { gap: 3rem; }
  .role-detail { grid-template-columns: 55px 1fr; padding-left: 6vw; padding-right: 6vw; }
}
@media (max-width: 620px) {
  .principles-grid, .roles-grid, .work-grid { grid-template-columns: 1fr; }
  .publication-card { grid-template-columns: 1fr; transform: none; }
  .publication-cover { min-height: 330px; border-right: 0; border-bottom: var(--line); }
  .publication-cover strong { font-size: 9rem; }
  .library-item { grid-template-columns: 1fr; gap: 1rem; }
  .library-number, .library-actions { grid-column: 1; }
  .publication-principles li { grid-template-columns: 2.5rem 1fr; }
  .publication-principles li p { grid-column: 2; }
  .manifest-hero h1, .participation-hero h1, .publication-hero h1 { font-size: clamp(3.7rem, 18vw, 6.2rem); }
  .manifest-meta-card dl div, .legal-content dl div { grid-template-columns: 1fr; gap: .4rem; }
  .role-detail { grid-template-columns: 1fr; gap: 1rem; }
}

/* Finale typografische correctie v1.5: lange werkwoorden blijven intact. */
.work-card h3 {
  font-size: clamp(1.7rem, 2.3vw, 2.85rem);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.local-callout h1 { max-width: 16ch; margin: 2.5rem 0; font-size: clamp(3rem, 6vw, 6.5rem); line-height: .85; letter-spacing: -.07em; text-transform: uppercase; }


/* v1.9 consolidated */
/* ==========================================================
   KopKen website v1.8 — Manifest + illustraties
   ========================================================== */
:root {
  --teal: #53bca5;
  --sky: #55a9e8;
  --soft-paper: #fbf6ea;
}
.skip-link { position: absolute; left: 1rem; top: -100px; z-index: 100; padding: .75rem 1rem; background: var(--ink); color: var(--paper); font-weight: 800; }
.skip-link:focus { top: 1rem; }
.home-v18 img { display: block; max-width: 100%; height: auto; }
.visual-frame { margin: 0; overflow: hidden; border: var(--line); background: var(--soft-paper); box-shadow: 8px 8px 0 var(--ink); }
.visual-frame img { width: 100%; height: 100%; object-fit: cover; }
.soft-frame { box-shadow: 8px 8px 0 var(--yellow); }

.hero-v18 { grid-template-columns: 1.08fr .92fr; }
.hero-v18 .hero-copy { padding-right: 5vw; }
.hero-illustration { align-self: center; margin: 4vw 5vw 4vw 0; transform: rotate(1deg); }
.hero-illustration figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border-top: var(--line); font-size: .7rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.hero-illustration figcaption strong { color: var(--red); }

.manifest-open { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.manifest-open-head h2 { max-width: 16ch; margin: 2.5rem 0; font-family: Georgia, serif; font-size: clamp(3.1rem, 6vw, 6.4rem); font-weight: 400; line-height: .96; letter-spacing: -.05em; }
.manifest-open-head > p { max-width: 720px; margin: 0 0 2rem; font-family: Georgia, serif; font-size: 1.17rem; line-height: 1.65; }
.manifest-open-image { transform: rotate(-1deg); }

.manifest-path { border-bottom: var(--line); }
.manifest-step { min-height: 72vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(3rem, 7vw, 8rem); padding: clamp(4.5rem, 8vw, 8rem) 6vw; border-bottom: var(--line); }
.manifest-step:last-child { border-bottom: 0; }
.manifest-step.reverse .manifest-step-copy { order: 2; }
.manifest-step.reverse figure { order: 1; transform: rotate(-1deg); }
.manifest-step:not(.reverse) figure { transform: rotate(1deg); }
.manifest-step-copy { max-width: 760px; }
.manifest-step-no { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border: var(--line); border-radius: 50%; background: var(--yellow); font-family: Georgia, serif; font-style: italic; color: var(--red); }
.manifest-step h2 { max-width: 13ch; margin: 2rem 0; font-family: Georgia, serif; font-size: clamp(3rem, 5.8vw, 6rem); font-weight: 400; line-height: .96; letter-spacing: -.05em; }
.manifest-step p { max-width: 670px; font-size: 1.05rem; line-height: 1.7; }
.manifest-step .manifest-question { margin-top: 2rem; padding: 1rem 0 1rem 1.25rem; border-left: 5px solid var(--red); font-family: Georgia, serif; font-size: 1.15rem; }
.manifest-step blockquote { max-width: 650px; margin: 2.2rem 0 0; padding: 1.4rem 1.5rem; background: var(--yellow); border: var(--line); font-family: Georgia, serif; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.3; }

.knowledge-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: var(--line); }
.knowledge-strip figure { margin: 0; border-right: var(--line); background: var(--soft-paper); }
.knowledge-strip figure:last-child { border-right: 0; }
.knowledge-strip img { aspect-ratio: 4/3; object-fit: cover; }
.knowledge-strip figcaption { padding: 1.1rem 1.3rem 1.25rem; border-top: var(--line); font-family: Georgia, serif; font-size: clamp(1.35rem, 2vw, 2rem); font-style: italic; }

.projects-v18 .projects-list { overflow: hidden; }
.project-with-image { min-height: 430px; grid-template-columns: 1fr .72fr; grid-template-rows: auto 1fr; gap: 1.5rem 2rem; }
.project-with-image .project-meta { grid-column: 1 / -1; }
.project-with-image > div:nth-child(2) { align-self: end; }
.project-with-image h3 { margin: 0 0 1.2rem; font-size: clamp(3rem, 6.3vw, 7rem); }
.project-with-image p { max-width: 38ch; margin: 0 0 1.7rem; font-family: Georgia, serif; line-height: 1.5; }
.project-with-image a { display: inline-block; border-bottom: 2px solid currentColor; padding-bottom: .2rem; font-size: .8rem; font-weight: 900; }
.project-with-image > img { align-self: end; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: var(--line); background: var(--soft-paper); }

.kids-inline-illustration { width: min(480px, 84%); margin: 3rem auto 0; border: var(--line); background: var(--soft-paper); box-shadow: 8px 8px 0 var(--ink); transform: rotate(-1deg); }

.open-network { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 7vw, 8rem); align-items: center; padding: clamp(5rem, 9vw, 9rem) 6vw; border-bottom: var(--line); }
.open-network-copy h2 { max-width: 12ch; margin: 2.5rem 0; font-family: Georgia, serif; font-size: clamp(3rem, 5.6vw, 5.8rem); font-weight: 400; line-height: .96; letter-spacing: -.05em; }
.open-network-copy p { max-width: 650px; font-size: 1.04rem; line-height: 1.7; }
.open-network-images { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8rem; align-items: start; }
.open-network-images figure:first-child { grid-column: 1 / -1; }
.open-network-images figure:nth-child(2) { transform: rotate(-1deg); }
.open-network-images figure:nth-child(3) { transform: rotate(1deg); }

.artiproof-illustration { justify-self: center; width: min(480px, 100%); transform: rotate(-1deg); }
.join-v18 { grid-template-columns: .75fr 1.25fr; gap: clamp(2rem, 6vw, 7rem); }
.join-illustration { margin: 0; }
.join-illustration img { width: 100%; border: var(--line); background: var(--soft-paper); box-shadow: 8px 8px 0 var(--red); transform: rotate(-1deg); }

@media (max-width: 1000px) {
  .manifest-step { min-height: auto; }
  .project-with-image { grid-template-columns: 1fr .62fr; }
}
@media (max-width: 850px) {
  .hero-v18, .manifest-open, .manifest-step, .open-network, .join-v18 { grid-template-columns: 1fr; }
  .hero-illustration { margin: 0 6vw 5rem; }
  .manifest-open-image { max-width: 650px; }
  .manifest-step.reverse .manifest-step-copy, .manifest-step.reverse figure { order: initial; }
  .manifest-step figure { max-width: 680px; }
  .knowledge-strip { grid-template-columns: 1fr; }
  .knowledge-strip figure { display: grid; grid-template-columns: 1fr .45fr; border-right: 0; border-bottom: var(--line); }
  .knowledge-strip figure:last-child { border-bottom: 0; }
  .knowledge-strip figcaption { display: grid; place-items: center; border-top: 0; border-left: var(--line); }
  .open-network-images { max-width: 780px; }
  .project-with-image { grid-template-columns: 1fr .62fr; }
}
@media (max-width: 600px) {
  .manifest-open, .manifest-step, .open-network { padding-left: 6vw; padding-right: 6vw; }
  .manifest-step h2, .manifest-open-head h2, .open-network-copy h2 { font-size: clamp(2.6rem, 13vw, 4.5rem); }
  .knowledge-strip figure { grid-template-columns: 1fr; }
  .knowledge-strip figcaption { border-left: 0; border-top: var(--line); }
  .project-with-image { grid-template-columns: 1fr; min-height: 0; }
  .project-with-image .project-meta { grid-column: 1; }
  .project-with-image > img { margin-top: .5rem; }
  .open-network-images { grid-template-columns: 1fr; }
  .open-network-images figure:first-child { grid-column: 1; }
}

/* v1.8 illustrative breaks on program pages */
.page-visual-break { padding: clamp(2.5rem, 5vw, 5rem) 6vw; border-bottom: var(--line); background: var(--paper); }
.page-visual-break figure { margin: 0; }
.dual-visual { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); }
.dual-visual figure:first-child { transform: rotate(-.7deg); }
.dual-visual figure:last-child { transform: rotate(.7deg); }
.single-visual { display: grid; place-items: center; }
.single-visual figure { width: min(760px, 100%); transform: rotate(-.6deg); }
.page-visual-break img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 700px) { .dual-visual { grid-template-columns: 1fr; } }

.home-v19 img{display:block;max-width:100%;height:auto}.hero-illustration-v19{align-self:center}
.roles-illustration{width:min(900px,88%);margin:0 auto clamp(3rem,6vw,5rem);transform:rotate(-.5deg)}
.artiproof-illustration img{width:100%;aspect-ratio:4/3;object-fit:cover}
.join-illustration-v19{width:min(520px,92%);justify-self:center}
.note-illustration{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin:1.5rem 0 0;border:var(--line);background:var(--soft-paper);position:relative;z-index:1}
.manifest-note-illustration{margin:0 0 1.7rem}.publication-hero-note .note-illustration,.participation-note .note-illustration{max-height:260px}
.mobile-menu{display:none;margin:0;border:0;position:relative}.mobile-menu summary{min-height:44px;display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border:var(--line);background:var(--paper);font-size:.78rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.mobile-menu nav{position:absolute;right:0;top:calc(100% + .5rem);z-index:100;width:min(290px,88vw);display:grid!important;gap:0;padding:.35rem;border:var(--line);background:var(--paper);box-shadow:7px 7px 0 var(--ink)}
.mobile-menu nav a{min-height:44px;display:flex;align-items:center;padding:.65rem .8rem;border-bottom:1px solid var(--ink);font-size:.84rem}.mobile-menu nav a:last-child{border-bottom:0;background:var(--yellow)}
.header-contact,.text-link,.project-card>a,.project-card div>a,.experiment-card-actions a,.library-actions a,.footer-links a,.manifest-toc a,.role-card b{min-height:44px;display:inline-flex;align-items:center}
@media(max-width:850px){.site-header{grid-template-columns:1fr auto auto;gap:.65rem}.site-header>nav{display:none}.mobile-menu{display:block}.hero-illustration-v19{margin:0 6vw 4rem;max-width:720px}.publication-hero-note,.participation-note,.manifest-meta-card{min-height:0}}
@media(max-width:620px){.hero-copy{padding:3.4rem 6vw 3.2rem}.manifesto,.principles-section,.work-section,.actions-section,.roles-section,.publication-section,.publication-library,.publication-principles,.local-callout{padding-top:3.8rem;padding-bottom:3.8rem}.actions-head,.principles-head,.work-head,.roles-head,.library-head{margin-bottom:2.7rem}.actions-grid{grid-template-columns:1fr 1fr}.actions-grid li{min-height:210px;padding:1.1rem}.actions-grid h3{font-size:1.2rem}.actions-grid p{font-size:.86rem}.project-card{min-height:360px}.publication-hero-note,.participation-note,.manifest-meta-card{margin-bottom:3.2rem}.role-detail{padding-top:3.5rem;padding-bottom:3.5rem}.page-visual-break{padding-top:2.2rem;padding-bottom:2.2rem}.join-section{min-height:auto;padding-top:4rem;padding-bottom:4rem}.join-illustration-v19{width:80%;margin:0 auto 2.5rem}}
@media(max-width:520px){.site-header{grid-template-columns:1fr auto}.site-header>.header-contact{display:none}.home-hero h1{font-size:clamp(4.35rem,20vw,6.8rem)}.project-card h3{font-size:clamp(3.25rem,16vw,4rem)}.note-illustration{max-height:220px}}
@media(max-width:360px){.home-hero h1{font-size:clamp(3.9rem,19vw,5.7rem)}.actions-grid{grid-template-columns:1fr}.actions-grid li{min-height:180px}}


/* v1.10 — gedeeld NL/EN contactformulier */
.join-section-contact{grid-template-columns:.48fr 1.52fr;gap:clamp(2.5rem,5vw,6rem)}
.contact-area{display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(2rem,4vw,4rem);align-items:start}
.contact-copy h2{margin-top:2rem}.contact-form{position:relative;background:var(--paper);padding:clamp(1.5rem,3vw,2.5rem);border:var(--line);box-shadow:10px 10px 0 var(--ink)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.field{margin-bottom:1.15rem}.field label{display:block;margin-bottom:.45rem;font-size:.72rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.contact-form input,.contact-form textarea{width:100%;box-sizing:border-box;border:1.5px solid var(--ink);border-radius:0;background:#fffdf6;color:var(--ink);padding:.85rem .8rem;font:inherit}
.contact-form textarea{min-height:150px;resize:vertical}.contact-form input:focus,.contact-form textarea:focus{outline:3px solid var(--blue);outline-offset:2px}
.contact-submit{min-height:48px;border:0;border-radius:0;background:var(--ink);color:var(--paper);padding:.9rem 1.05rem;font:900 .84rem Arial,sans-serif;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;box-shadow:5px 5px 0 var(--red)}
.contact-submit:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red)}.privacy{max-width:60ch;margin:.9rem 0 0;font-size:.76rem;line-height:1.5}.privacy a{text-underline-offset:3px}
.contact-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}.form-status{margin:0 0 1.2rem;padding:.9rem 1rem;border:var(--line);font-weight:800}.form-sent{background:var(--mint)}.form-error{background:#ffd7ce}
.legal-privacy{border-top:var(--line)}.legal-privacy h2{max-width:15ch;margin:1.4rem 0 1.5rem;font-size:clamp(2.4rem,5vw,5rem);line-height:.88;letter-spacing:-.06em;text-transform:uppercase}.legal-privacy p{max-width:72ch;line-height:1.65}
@media(max-width:1050px){.join-section-contact{grid-template-columns:1fr}.join-section-contact>.join-illustration{width:min(520px,76%);margin:0 auto}.contact-area{grid-template-columns:1fr 1.15fr}}
@media(max-width:760px){.contact-area{grid-template-columns:1fr}.form-row{grid-template-columns:1fr;gap:0}.contact-form{box-shadow:7px 7px 0 var(--ink)}}
@media(max-width:520px){.join-section-contact>.join-illustration{width:78%}.contact-form{padding:1.2rem}.contact-submit{width:100%}}
/* v1.14 — eenvoudiger homepage */
.home-quick,.home-paths,.home-deeper{padding:clamp(4rem,8vw,8rem) clamp(1.25rem,5vw,6rem);border-top:1px solid var(--ink,#171717)}
.home-quick>h2,.home-paths h2{max-width:16ch;font-size:clamp(2rem,4vw,4rem);line-height:1.02}
.home-quick-grid,.home-deeper-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--ink,#171717);border:1px solid var(--ink,#171717);margin-top:2.5rem}
.home-quick-grid article,.home-deeper-grid a{background:var(--paper,#f3efe5);padding:clamp(1.4rem,3vw,2.5rem);color:inherit;text-decoration:none}
.home-quick-grid h3{font-size:1.5rem;margin-top:0}.home-quick-grid p{min-height:5em}
.home-paths{display:grid;grid-template-columns:1fr 1fr;gap:clamp(3rem,8vw,9rem)}
.home-deeper-grid a{display:flex;flex-direction:column;gap:.8rem}.home-deeper-grid strong{font-size:1.5rem}.home-deeper-grid span{line-height:1.4}
.language-panel{max-height:min(70vh,34rem);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:800px){.home-quick-grid,.home-deeper-grid,.home-paths{grid-template-columns:1fr}.home-quick-grid p{min-height:0}.language-switcher summary{font-size:.85rem}}
.page-hero{padding:clamp(7rem,12vw,12rem) clamp(1.25rem,8vw,9rem) clamp(4rem,8vw,7rem);border-bottom:1px solid var(--ink,#171717)}
.page-hero h1{max-width:13ch;font-size:clamp(3rem,7vw,7rem);line-height:.94;margin:.5rem 0 2rem}.page-hero>p:last-child{max-width:48rem;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.5}