/* ==========================================================================
   IK SPEEL JE NAT
   Zeefdruk-affiche: vlakke kleuren, dikke inktlijnen, verschoven drukgang.
   ========================================================================== */

@font-face { font-family: "Bowlby One"; src: url("../fonts/bowlby-one.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat Brush"; src: url("../fonts/caveat-brush.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

:root {
	--isjn-navy: #101b5c;
	--isjn-ink: #101b5c;
	--isjn-line: #0a1140;
	--isjn-aqua: #19d3c5;
	--isjn-pink: #ff3d8b;
	--isjn-paper: #fff6e0;
	--isjn-sun: #ffd23f;
	--isjn-royal: #2536a8;

	--font-display: "Bowlby One", Impact, "Arial Black", sans-serif;
	--font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-hand: "Caveat Brush", "Comic Sans MS", cursive;

	--header-h: 80px;
	--wave-h: clamp(28px, 5vw, 70px);
	--gutter: clamp(1.125rem, 4vw, 2.5rem);
	--section-y: clamp(3.5rem, 8vw, 6.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); -webkit-text-size-adjust: 100%; }
body {
	margin: 0; font-family: var(--font-body); font-size: 1.125rem; line-height: 1.6;
	color: var(--isjn-navy); background: var(--isjn-line); overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.05; margin: 0 0 .6em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 5.2vw, 3.75rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); line-height: 1.15; }
p { margin: 0 0 1.1em; max-width: 68ch; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--isjn-pink); color: var(--isjn-navy); }

.on-dark { --focus: var(--isjn-sun); }
.on-light { --focus: var(--isjn-navy); }
:focus-visible { outline: 3px solid var(--focus, var(--isjn-sun)); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }
.lead { font-size: clamp(1.2rem, 2vw, 1.4rem); line-height: 1.45; font-weight: 500; }
.scribble { font-family: var(--font-hand); font-size: clamp(1.5rem, 2.6vw, 2rem); line-height: 1.1; transform: rotate(-3deg); transform-origin: left center; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; left: 1rem; top: -5rem; z-index: 100; background: var(--isjn-sun); color: var(--isjn-navy); font-weight: 800; padding: .75rem 1.25rem; border: 3px solid var(--isjn-line); border-radius: 999px; }
.skip-link:focus { top: 1rem; }

/* Kaartsymbolen */
.suit { width: 1em; height: 1em; fill: currentColor; flex: none; }
.suit--heart, .suit--diamond { color: var(--isjn-pink); }

/* Knoppen ----------------------------------------------------------------- */
.btn {
	--shadow: var(--isjn-line);
	display: inline-flex; align-items: center; justify-content: center; text-align: center;
	font-family: var(--font-body); font-weight: 800; font-size: 1.125rem; line-height: 1.2; text-decoration: none;
	padding: .8rem 1.6rem; min-height: 3rem; border: 3px solid var(--isjn-line); border-radius: 999px;
	box-shadow: 5px 5px 0 var(--shadow); cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--shadow); }
.btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--shadow); }
.btn--sun { background: var(--isjn-sun); color: var(--isjn-navy); }
.btn--ink { background: var(--isjn-navy); color: var(--isjn-paper); --shadow: var(--isjn-pink); }
.btn--small { font-size: 1rem; padding: .5rem 1.1rem; min-height: 2.75rem; box-shadow: 3px 3px 0 var(--shadow); }
.btn--big { font-size: clamp(1.25rem, 2.2vw, 1.5rem); padding: 1rem 2.2rem; min-height: 4rem; box-shadow: 7px 7px 0 var(--shadow); }
.on-dark .btn--sun { --shadow: var(--isjn-pink); }

/* Header ------------------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--isjn-navy); color: var(--isjn-paper); border-bottom: 3px solid var(--isjn-line); --focus: var(--isjn-sun); }
.site-header.is-scrolled { box-shadow: 0 6px 0 rgba(10, 17, 64, .35); }
.announcement { margin: 0; max-width: none; padding: .45rem var(--gutter); background: var(--isjn-sun); color: var(--isjn-navy); font-weight: 800; font-size: 1rem; text-align: center; }
.site-header__bar { display: flex; align-items: center; gap: 1.25rem; min-height: var(--header-h); max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); position: relative; }
.site-header__logo a { display: block; line-height: 0; }
.site-header__logo img { display: block; height: 64px; width: auto; }
.nav { margin-left: auto; }
.nav__list { display: flex; gap: clamp(1rem, 2.2vw, 2rem); }
.nav__list a { display: inline-block; padding: .5rem 0; font-weight: 700; font-size: 1.0625rem; text-decoration: none; background: linear-gradient(var(--isjn-aqua), var(--isjn-aqua)) left bottom / 0 3px no-repeat; transition: background-size .2s ease; }
.nav__list a:hover, .nav__list a:focus-visible { background-size: 100% 3px; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
	:root { --header-h: 66px; }
	.site-header__logo img { height: 50px; }
	.site-header__cta { margin-left: auto; order: 2; }
	.nav-toggle { order: 3; }
	.nav { order: 4; flex-basis: 100%; margin: 0; }
	.site-header__bar { flex-wrap: wrap; gap: .75rem; row-gap: 0; }
	.nav__list { flex-wrap: wrap; gap: 0 1.25rem; padding-bottom: .5rem; }
	.site-header[data-ready] .nav-toggle {
		display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .4rem .9rem;
		font: inherit; font-weight: 800; font-size: 1rem; color: var(--isjn-paper); background: transparent;
		border: 3px solid var(--isjn-paper); border-radius: 999px; cursor: pointer;
	}
	.nav-toggle__bars { width: 18px; height: 12px; border-block: 3px solid currentColor; position: relative; }
	.nav-toggle__bars::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: currentColor; }
	.site-header[data-ready] .nav { display: none; }
	.site-header[data-ready][data-open] .nav { display: block; }
	.site-header[data-ready] .nav__list { flex-direction: column; padding: .25rem 0 1rem; }
	.site-header[data-ready] .nav__list a { display: block; padding: .8rem 0; font-size: 1.25rem; border-top: 2px dashed rgba(255, 246, 224, .3); }
}
@media (max-width: 400px) {
	.nav-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
	.site-header__cta { padding-inline: .9rem; }
}

/* Hero -------------------------------------------------------------------- */
.hero {
	position: relative; overflow: hidden; color: var(--isjn-paper);
	background: var(--isjn-navy) radial-gradient(#1a2878 2.2px, transparent 2.6px) 0 0 / 22px 22px;
}
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: end; }
.hero__text { position: relative; z-index: 2; padding-block: clamp(2rem, 3.5vw, 3rem) clamp(8.5rem, 12vw, 10.5rem); }
.hero__kicker {
	display: inline-block; margin: 0 0 1.1rem; padding: .35rem 1.1rem; transform: rotate(-3deg);
	font-family: var(--font-hand); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.2;
	color: var(--isjn-navy); background: var(--isjn-sun); border: 3px solid var(--isjn-line); border-radius: 999px; box-shadow: 4px 4px 0 var(--isjn-line);
}
.hero__title {
	--title: min(8.5vw, 7.9rem);
	margin: 0 0 .46em; font-size: var(--title); line-height: .9; text-transform: uppercase; letter-spacing: .005em;
	text-shadow: .05em .05em 0 var(--isjn-pink);
}
.hero__line { display: block; white-space: nowrap; }
.hero__nat { position: relative; display: inline-block; color: var(--isjn-aqua); }
.drip, .drip-drop { position: absolute; background: var(--isjn-aqua); box-shadow: .05em .05em 0 var(--isjn-pink); }
.drip { top: .78em; width: .12em; border-radius: 0 0 99px 99px; transform-origin: top center; animation: drip 1.1s cubic-bezier(.3, 0, .2, 1) 1.1s backwards; }
.drip--1 { left: .1em; height: .3em; }
.drip--2 { left: 1.47em; height: .17em; animation-delay: 1.35s; }
.drip--3 { left: 2.02em; height: .44em; width: .14em; animation-delay: 1.2s; }
.drip-drop { top: 1.36em; left: 2.02em; width: .14em; height: .14em; border-radius: 0 50% 50% 50%; transform: rotate(45deg); animation: drip-drop .7s ease-in 2.1s backwards; }
.hero__subtitle { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.15; margin: 0 0 .6em; max-width: 22ch; }
.hero__lede { font-size: clamp(1.125rem, 1.6vw, 1.3rem); max-width: 34ch; margin-bottom: 1.6em; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-bottom: .9rem; }
.hero__more { font-weight: 700; }
.hero__note { font-size: 1rem; margin: 0; opacity: .85; }
.hero__art { position: relative; z-index: 1; align-self: end; line-height: 0; }
.hero-art { display: block; width: 100%; height: auto; overflow: visible; }

.h-card, .h-wave { transform-box: view-box; transform-origin: 360px 640px; }
.h-card { transform: rotate(var(--r, 0deg)); animation: fan .9s cubic-bezier(.2, 1.25, .4, 1) .3s backwards; }
.h-card--c { animation-duration: .7s; animation-delay: .15s; }
.h-wave { animation: tide .9s cubic-bezier(.2, .8, .3, 1) backwards; }
.h-blob { transform-box: fill-box; transform-origin: center; animation: pop .7s ease-out backwards; }
.h-splash { transform-box: fill-box; transform-origin: center bottom; animation: gush .6s cubic-bezier(.2, 1.4, .4, 1) .75s backwards; }
.h-drop { transform-box: fill-box; transform-origin: center; animation: spat .5s cubic-bezier(.2, 1.6, .4, 1) calc(.9s + var(--i) * 70ms) backwards; }
.h-sticker { transform-box: fill-box; transform-origin: center; animation: stamp .45s cubic-bezier(.2, 1.7, .4, 1) 1.5s backwards; }

@keyframes fan { from { transform: translateY(160px) rotate(0deg); } }
@keyframes tide { from { transform: translateY(110px); } }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes gush { from { transform: scaleY(0); } }
@keyframes spat { from { transform: translateY(60px) scale(0); opacity: 0; } }
@keyframes stamp { from { transform: scale(2.2) rotate(-25deg); opacity: 0; } }
@keyframes drip { from { transform: scaleY(0); } }
@keyframes drip-drop { from { transform: translateY(-.5em) rotate(45deg) scale(.4); opacity: 0; } }

@media (max-width: 900px) {
	.hero__grid { grid-template-columns: 1fr; gap: 0; }
	.hero__text { padding-block: 2rem 1rem; }
	.hero__title { --title: 17.4vw; margin-bottom: .62em; }
	.hero__art { max-width: 560px; margin-inline: auto; width: 100%; }
}

/* Sloganstrook: het water uit de hero loopt hierin door. */
.strip { position: relative; background: var(--isjn-aqua); color: var(--isjn-navy); overflow: hidden; padding: .25rem 0 calc(var(--wave-h) + 1.25rem); margin-top: -1px; }
.strip__track { display: flex; align-items: center; gap: 1.5rem; width: max-content; white-space: nowrap; font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 2rem); text-transform: uppercase; will-change: transform; transform: translateX(var(--x, 0)); }
.strip .suit { font-size: .8em; }
.strip .suit--heart, .strip .suit--diamond { color: var(--isjn-navy); }

/* Secties ------------------------------------------------------------------ */
.section { position: relative; padding-block: var(--section-y) calc(var(--section-y) + var(--wave-h)); overflow: hidden; }
.section--paper { background: var(--isjn-paper); color: var(--isjn-navy); }
.section--aqua { background: var(--isjn-aqua); color: var(--isjn-navy); }
.section--navy { background: var(--isjn-navy) radial-gradient(#1a2878 2.2px, transparent 2.6px) 0 0 / 22px 22px; color: var(--isjn-paper); }
.section--pink { background: var(--isjn-pink); color: var(--isjn-navy); }
.section--sun { background: var(--isjn-sun); color: var(--isjn-navy); }
.section__title { max-width: 18ch; }
.section__intro { font-size: clamp(1.2rem, 2vw, 1.4rem); font-weight: 500; max-width: 46ch; margin-bottom: 2.5rem; }
.section__after { margin: 2.75rem 0 0; font-size: 1.25rem; font-weight: 700; }

.wave { position: absolute; left: 0; bottom: -1px; display: block; width: 100%; max-width: none; height: var(--wave-h); }
.wave path { stroke: var(--isjn-line); stroke-width: 5; vector-effect: non-scaling-stroke; }
.wave--paper path { fill: var(--isjn-paper); }
.wave--aqua path { fill: var(--isjn-aqua); }
.wave--navy path { fill: var(--isjn-navy); }
.wave--pink path { fill: var(--isjn-pink); }
.wave--sun path { fill: var(--isjn-sun); }
.wave--ink path { fill: var(--isjn-line); }

/* Wat is ------------------------------------------------------------------- */
.wat { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.pillar { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; padding: 1.4rem 0; border-top: 3px dashed var(--isjn-navy); }
.pillar:last-child { border-bottom: 3px dashed var(--isjn-navy); }
.pillar .suit { font-size: 2.75rem; grid-row: span 2; margin-top: .1rem; }
.pillar h3 { margin: 0 0 .25rem; }
.pillar p { margin: 0; font-size: 1.0625rem; }

/* Voor iedereen ------------------------------------------------------------ */
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); align-items: stretch; }
.duo__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.5rem, 3.5vw, 2.75rem); border: 4px solid var(--isjn-line); border-radius: 28px; }
.duo__card--paper { background: var(--isjn-paper); color: var(--isjn-navy); box-shadow: 10px 10px 0 var(--isjn-line); transform: rotate(-1.2deg); }
.duo__card--navy { background: var(--isjn-navy); color: var(--isjn-paper); box-shadow: 10px 10px 0 var(--isjn-pink); transform: rotate(1.2deg); }
.duo__card h3 { font-size: clamp(1.6rem, 2.9vw, 2.25rem); padding-right: clamp(4rem, 9vw, 6.5rem); overflow-wrap: break-word; hyphens: auto; }
.duo__suit { position: absolute; top: 1.5rem; right: 1.5rem; font-size: clamp(3.5rem, 8vw, 6rem); }
.duo__card--navy .duo__suit { color: var(--isjn-aqua); }
.duo__card .btn { margin-top: auto; }
.ticks { margin: .25rem 0 1.75rem; font-weight: 700; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: .45rem; }
.ticks li::before { content: ""; position: absolute; left: .15rem; top: .42em; width: .7em; height: .7em; background: var(--isjn-pink); border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.duo__card--navy .ticks li::before { background: var(--isjn-aqua); }

/* Wat is rikken ------------------------------------------------------------ */
.rikken { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.rikken h3 { margin-top: 1.6em; }
.note { margin-top: 1.75rem; padding: 1rem 1.25rem; border-left: 6px solid var(--isjn-pink); background: #fff; font-weight: 500; }
.woorden { position: relative; margin-top: 4.5rem; padding: 2rem 1.75rem 1.25rem; background: #fff; border: 4px solid var(--isjn-line); border-radius: 24px; box-shadow: 9px 9px 0 var(--isjn-aqua); transform: rotate(1.3deg); }
.woorden__art { position: absolute; right: -1rem; top: -6.75rem; width: 150px; }
.woorden h3 { margin: 0 0 1rem; max-width: 13ch; font-size: 1.4rem; }
.woorden dl { margin: 0; }
.woorden dl > div { padding: .8rem 0; border-top: 2px dashed var(--isjn-navy); }
.woorden dt { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.woorden dd { margin: .15rem 0 0; font-size: 1.0625rem; }

.rikken__side { display: grid; gap: 2.5rem; }
.howto { counter-reset: stap; margin: 1.25rem 0 0; }
.howto li { counter-increment: stap; position: relative; padding: 0 0 1.4rem 4rem; }
.howto li::before { content: counter(stap); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; background: var(--isjn-aqua); border: 3px solid var(--isjn-line); border-radius: 50%; box-shadow: 3px 3px 0 var(--isjn-line); }
.howto li::after { content: ""; position: absolute; left: 1.3rem; top: 3rem; bottom: .25rem; border-left: 3px dashed var(--isjn-navy); }
.howto li:last-child { padding-bottom: 0; }
.howto li:last-child::after { display: none; }
.howto h4 { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; margin: 0 0 .25rem; }
.howto p { margin: 0; }
.biedingen { padding: 1.75rem 1.75rem 1.1rem; background: var(--isjn-navy); color: var(--isjn-paper); border: 4px solid var(--isjn-line); border-radius: 24px; box-shadow: 9px 9px 0 var(--isjn-pink); transform: rotate(-1deg); --focus: var(--isjn-sun); }
.biedingen h3 { margin: 0 0 .5rem; font-size: 1.4rem; }
.biedingen p { margin: 0 0 .75rem; font-size: 1.0625rem; }
.biedingen dl { margin: 0; }
.biedingen dl > div { padding: .7rem 0; border-top: 2px dashed rgba(255, 246, 224, .45); }
.biedingen dt { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.2; color: var(--isjn-aqua); }
.biedingen dd { margin: .15rem 0 0; font-size: 1.0625rem; }

/* Het toernooi ------------------------------------------------------------- */
.info-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 1.75rem 1.4rem; }
.info-card { position: relative; min-height: 15rem; padding: 1.25rem 1.25rem 2.25rem; background: var(--isjn-paper); color: var(--isjn-navy); border: 4px solid var(--isjn-line); border-radius: 20px; box-shadow: 8px 8px 0 var(--isjn-aqua); }
.info-card:nth-child(odd) { transform: rotate(-1.4deg); }
.info-card:nth-child(even) { transform: rotate(1.1deg); box-shadow: 8px 8px 0 var(--isjn-pink); }
.info-card--open { border-style: dashed; }
.info-card__suit { display: block; font-size: 2.25rem; margin-bottom: 1.1rem; }
.info-card h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.0625rem; margin: 0 0 .35rem; }
.info-card p { margin: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
.info-card__tag { position: absolute; right: -.6rem; bottom: -.9rem; padding: .1rem .9rem .2rem; transform: rotate(-6deg); font-family: var(--font-hand); font-size: 1.4rem; line-height: 1.3; background: var(--isjn-sun); border: 3px solid var(--isjn-line); border-radius: 999px; }
.section--navy .section__after a { color: var(--isjn-aqua); }

/* Hoe werkt het ------------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem clamp(1.25rem, 3vw, 2.5rem); margin-top: 2.5rem; }
.step { position: relative; }
.step::before { content: ""; position: absolute; top: 2.6rem; left: 5.75rem; right: -1.5rem; border-top: 4px dashed var(--isjn-navy); }
.step:last-child::before { display: none; }
.step__nr { display: grid; place-items: center; width: 5.25rem; height: 5.25rem; margin-bottom: 1.25rem; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; background: var(--isjn-paper); border: 4px solid var(--isjn-line); border-radius: 50%; box-shadow: 5px 5px 0 var(--isjn-line); }
.step:nth-child(even) .step__nr { background: var(--isjn-sun); transform: rotate(6deg); }
.step h3 { font-size: 1.4rem; margin-bottom: .4rem; }
.step p { margin: 0; font-weight: 500; }
.section--pink .btn--ink { --shadow: var(--isjn-paper); }

/* Aanmelden ---------------------------------------------------------------- */
.aanmelden { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.aanmelden__scribble { margin: 2rem 0 1rem; color: var(--isjn-navy); max-width: 16ch; }
.aanmelden__art { display: block; width: min(280px, 80%); }
.aanmelden__form { padding: clamp(1.25rem, 3.5vw, 2.5rem); background: #fff; border: 4px solid var(--isjn-line); border-radius: 28px; box-shadow: 10px 10px 0 var(--isjn-pink); }
.aanmelden__form .isjn-form { max-width: none; }
.form-missing { margin: 0; font-weight: 700; }

/* Veelgestelde vragen ------------------------------------------------------ */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.faq__head h2 { font-size: clamp(2rem, 3.7vw, 3rem); }
.faq__head .scribble { color: var(--isjn-aqua); }
.faq__item { background: var(--isjn-paper); color: var(--isjn-navy); border: 3px solid var(--isjn-line); border-radius: 16px; box-shadow: 5px 5px 0 var(--isjn-aqua); margin-bottom: 1rem; --focus: var(--isjn-sun); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; border-radius: 13px; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-family: var(--font-body); font-weight: 800; font-size: 1.2rem; line-height: 1.3; }
.faq__item summary::after { content: ""; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--isjn-navy) linear-gradient(var(--isjn-paper), var(--isjn-paper)) center / 12px 3px no-repeat; background-image: linear-gradient(var(--isjn-paper), var(--isjn-paper)), linear-gradient(var(--isjn-paper), var(--isjn-paper)); background-size: 12px 3px, 3px 12px; background-position: center; background-repeat: no-repeat; transition: transform .2s ease; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item[open] { box-shadow: 5px 5px 0 var(--isjn-pink); }
.faq__answer { padding: 0 1.25rem 1.1rem; }
.faq__answer p:last-child { margin-bottom: 0; }

/* Afsluitende oproep ------------------------------------------------------- */
.cta__inner { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cta h2 { font-size: clamp(2.1rem, 6vw, 4.5rem); max-width: 17ch; }
.cta .lead { max-width: 40ch; margin-bottom: 2rem; }
.cta__drop { position: absolute; width: clamp(44px, 7vw, 80px); }
.cta__drop--1 { left: 2%; top: 4%; transform: rotate(-18deg); }
.cta__drop--2 { right: 3%; bottom: 6%; transform: rotate(16deg); }
.section--extra { padding-bottom: 0; }

/* Footer ------------------------------------------------------------------- */
.site-footer { background: var(--isjn-line); color: var(--isjn-paper); padding: 3rem 0 2rem; --focus: var(--isjn-sun); }
.site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.site-footer__brand img { display: block; width: min(260px, 70%); margin-bottom: 1.25rem; }
.site-footer h2 { font-size: 1.3rem; color: var(--isjn-aqua); margin-bottom: .75rem; }
.site-footer li { margin-bottom: .4rem; }
.site-footer a { text-decoration: underline; }
.site-footer a:hover { color: var(--isjn-aqua); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 2px dashed rgba(255, 246, 224, .35); font-size: 1rem; }
.site-footer__bottom p { margin: 0; }
.site-footer__bottom .scribble { color: var(--isjn-pink); }

/* Losse pagina's en blokinhoud ------------------------------------------- */
.page-title { font-size: clamp(2.25rem, 6vw, 4rem); margin-bottom: .6em; }
.entry { margin-bottom: 3rem; }
.entry__title a { text-decoration: none; }
.entry__meta { font-size: 1rem; font-weight: 700; }
.entry-content > * { max-width: 68ch; }
.entry-content > .alignwide { max-width: 1120px; }
.entry-content > .alignfull { max-width: none; }
.entry-content h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin-top: 1.6em; }
.entry-content h3 { margin-top: 1.4em; }
.entry-content ul, .entry-content ol { margin: 0 0 1.1em; padding-left: 1.4rem; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-bottom: .35em; }
.entry-content a { font-weight: 700; }
.entry-content blockquote { margin: 1.5rem 0; padding: 1rem 1.5rem; border-left: 6px solid var(--isjn-pink); background: #fff; }
.entry-content img { border-radius: 16px; }
.entry-content table { border-collapse: collapse; width: 100%; }
.entry-content th, .entry-content td { border: 2px solid var(--isjn-navy); padding: .5rem .75rem; text-align: left; }
.page-back { margin-top: 3rem; font-weight: 700; }
.wp-block-button__link { box-shadow: 5px 5px 0 var(--isjn-line); }
.nav-links { display: flex; flex-wrap: wrap; gap: .75rem; font-weight: 700; }

/* Spetters bij een klik (zie main.js) */
.spat { position: fixed; z-index: 90; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 3px solid var(--isjn-line); border-radius: 0 50% 50% 50%; pointer-events: none; }

/* Kleinere schermen -------------------------------------------------------- */
@media (max-width: 900px) {
	.wat, .rikken, .aanmelden, .faq { grid-template-columns: 1fr; }
	.duo { grid-template-columns: 1fr; gap: 2.25rem; }
	.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.step:nth-child(2)::before { display: none; }
	.woorden { margin-top: 5.5rem; }
	.site-footer__grid { grid-template-columns: 1fr 1fr; }
	.site-footer__brand { grid-column: 1 / -1; }
	.aanmelden__art { display: none; }
	.aanmelden__scribble { margin: 1rem 0 0; }
}
@media (max-width: 560px) {
	body { font-size: 1.0625rem; }
	.steps { grid-template-columns: 1fr; }
	.step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; }
	.step::before { display: none; }
	.step__nr { grid-row: span 2; width: 4rem; height: 4rem; font-size: 2rem; margin: 0; }
	.info-cards { grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
	.info-card { min-height: 12rem; padding: 1rem 1rem 2rem; }
	.info-card p { font-size: 1.125rem; }
	.duo__card--paper, .duo__card--navy, .woorden, .biedingen, .info-card:nth-child(odd), .info-card:nth-child(even) { transform: none; }
	.duo__card { box-shadow: 6px 6px 0 var(--isjn-line); }
	.duo__card--navy { box-shadow: 6px 6px 0 var(--isjn-pink); }
	.aanmelden__form { border-radius: 20px; box-shadow: 6px 6px 0 var(--isjn-pink); }
	.site-footer__grid { grid-template-columns: 1fr; }
	.hero__actions .btn { width: 100%; }
	.cta__drop--1 { top: -2.75rem; left: 0; }
	.cta__drop--2 { bottom: -2.5rem; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.strip__track { transform: none; }
}