/* Terracon onderhoudspagina, versie 2: "Vijf bladen". Keuzes staan in DESIGN.md. */
@font-face { font-family: "Saira"; src: url("/fonts/Saira.woff2") format("woff2"); font-weight: 100 900; font-stretch: 50% 125%; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  --grond: #0f0f0f; --inkt: #f3efe8; --inkt-2: #cfc9bf; --gedempt: #a39d92; --lijn: #302d29;
  --blad: #1a1816; --blad-rand: #34302b;
  --accent: #fa6219; --accent-licht: #ff7d3c; --accent-diep: #7d3310; --accent-inkt: #170a03;
  --letter: "Saira", ui-sans-serif, system-ui, sans-serif;
  --zacht: cubic-bezier(0.22, 1, 0.36, 1);
  --rustig: cubic-bezier(0.45, 0, 0.2, 1);       /* rustig op gang komen, rustig uitlopen */
  --goot: clamp(16px, 4.5vw, 112px);
  --balk: clamp(56px, 7.5svh, 84px);          /* hoogte van de balk bovenaan */
  --d: min(150svh, 96vw);                      /* doorsnee van de schijf; nooit breder dan het venster, zodat hij de tekst niet raakt */
  --actief: 180;                               /* richting van het actieve blad in graden: 180 = naar links */
}
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; font-size: clamp(100%, 0.42vw + 0.62svh + 4px, 150%); scrollbar-color: var(--blad-rand) var(--grond); }
body { margin: 0; overflow-x: clip; background: var(--grond); color: var(--inkt); font-family: var(--letter); font-size: 1rem; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p, h1, h2, h3, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent-licht); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-inkt); }
.sla-over { position: fixed; left: 0; top: 0; z-index: 20; height: var(--balk); min-width: min(100vw, 22rem); display: flex; align-items: center; padding: 0 var(--goot); outline-offset: -4px; background: var(--accent); color: var(--accent-inkt); font-weight: 600; text-decoration: none; translate: 0 -130%; }
.sla-over:focus-visible { translate: 0 0; }

/* ---------- balk bovenaan: altijd in beeld, met de belknop ---------- */
.balk { position: fixed; inset: 0 0 auto 0; z-index: 10; height: var(--balk); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-inline: var(--goot); background: var(--grond); border-bottom: 1px solid var(--lijn); }
.balk__merk { display: flex; align-items: center; min-height: 2.75rem; transition: translate 0.4s var(--zacht), scale 0.4s var(--zacht); transform-origin: 0 50%; }
.balk__merk img { width: clamp(124px, 11.5rem, 240px); height: auto; }
@media (hover: hover) { .balk__merk:hover { translate: 0 -2px; scale: 1.03; } }
.balk__merk:active { scale: 0.97; }
.balk__rechts { display: flex; align-items: center; gap: 0.75rem; }
.balk__groep { color: var(--gedempt); font-size: 0.875rem; margin-right: 0.5rem; }

/* ---------- knoppen: de vulling stroomt in vanaf de kant waar de muis binnenkomt ---------- */
.knop { position: relative; isolation: isolate; overflow: clip; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75em; padding: 0.6em 1.2em; border: 1px solid var(--inkt); color: var(--inkt); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: color 0.3s var(--zacht), scale 0.2s var(--zacht); }
.knop__vul { position: absolute; inset: 0; z-index: -1; background: var(--inkt); clip-path: circle(0% at 50% 50%); }
.knop.is-vol, .knop:active { color: var(--grond); }
.knop:active { scale: 0.97; }
.knop:active .knop__vul { clip-path: circle(150% at 50% 50%); }
.knop--klein { min-height: 2.5em; padding: 0.45em 0.95em; font-size: 0.875rem; border-color: var(--blad-rand); }
.knop--eerst { background: var(--accent); border-color: var(--accent); color: var(--accent-inkt); }
.knop--eerst.is-vol, .knop--eerst:active { color: var(--accent-inkt); }
.knop--eerst .knop__vul { background: var(--inkt); }
.post { color: var(--inkt); text-decoration: underline; text-decoration-color: var(--gedempt); text-decoration-thickness: 1px; text-underline-offset: 0.22em; overflow-wrap: anywhere; transition: text-decoration-color 0.25s var(--zacht), text-underline-offset 0.25s var(--zacht), color 0.25s var(--zacht); }
@media (hover: hover) { .post:hover { color: var(--accent-licht); text-decoration-color: var(--accent); text-underline-offset: 0.34em; } }
.post:focus-visible { color: var(--accent-licht); text-decoration-color: var(--accent); }

/* ---------- de schijf: het teken uit het logo, vijf bladen ---------- */
.schijf { position: absolute; z-index: 0; width: var(--d); aspect-ratio: 1; right: calc(var(--d) / -2); top: calc(var(--balk) + (100svh - var(--balk)) / 2); translate: 0 -50%; pointer-events: none; }
.schijf__draai, .schijf svg { width: 100%; height: 100%; }
.schijf__draai { rotate: calc((var(--actief) - 173.3) * 1deg); }
.blad { fill: var(--blad); stroke: var(--blad-rand); stroke-width: 1.5; vector-effect: non-scaling-stroke; transition: fill 0.7s var(--zacht), stroke 0.7s var(--zacht); }
.blad.is-geweest { fill: var(--accent-diep); stroke: var(--accent-diep); }
.blad.is-aan, .is-compleet .blad { fill: var(--accent); stroke: var(--accent); }

/* ---------- de vijf bladen als tekst ---------- */
.reis { position: relative; }
.toneel { position: relative; padding-top: var(--balk); overflow: clip; }
.hoofdstuk { position: relative; z-index: 1; width: min(100% - 2 * var(--goot), 44rem); margin-left: var(--goot); min-height: calc(82svh - var(--balk)); display: grid; align-content: center; justify-items: start; gap: 1.1rem; padding-block: 3rem; }
.blad-nr { color: var(--accent-licht); font-size: 0.875rem; font-weight: 500; }
.titel { font-size: clamp(2.6rem, min(6.6vw, 12.5svh), 9.5rem); font-weight: 700; line-height: 0.95; letter-spacing: -0.035em; margin-left: -0.04em; text-wrap: balance; }
.titel--klein { font-size: clamp(2.4rem, min(5.8vw, 10.5svh), 8.5rem); }
.regel { display: block; overflow: clip; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.regel > span { display: block; }
.tekst { max-width: 38ch; font-size: clamp(1.0625rem, 1.25rem, 1.75rem); line-height: 1.45; color: var(--inkt-2); }

.mensen { display: grid; gap: 1.4rem; margin-top: 0.4rem; }
.mens { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1.25rem; align-items: center; }
.portret { width: 6rem; aspect-ratio: 1; display: grid; place-items: center; overflow: clip; background: var(--blad); border: 1px solid var(--blad-rand); color: var(--gedempt); font-size: 1.25rem; font-weight: 600; }
.portret img { width: 100%; height: 100%; object-fit: cover; }
h3 { font-size: 1.5rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.015em; }
.rol { color: var(--gedempt); font-size: 0.9375rem; line-height: 1.35; margin-top: 0.15em; }
.bereik { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; margin-top: 0.75rem; }
.bereik .knop { font-variant-numeric: tabular-nums; font-size: 1.1875rem; font-weight: 600; }

/* ---------- route: waar je bent in de vijf bladen ---------- */
.route { display: none; }

html:not(.js) .schijf { position: fixed; }
html:not(.js) .route { display: block; position: fixed; z-index: 3; left: 0; bottom: 0; padding: 0.6rem 1.25rem 0.9rem var(--goot); background: var(--grond); }
.hoofdstuk { scroll-margin-top: var(--balk); }

/* foutpagina: precies één scherm, de voet onderaan */
.is-fout { min-height: 100svh; display: flex; flex-direction: column; }
.is-fout main { flex: 1; display: grid; }
.is-fout .reis, .is-fout .toneel, .js .is-fout .toneel { position: relative; height: 100%; min-height: 0; }
.is-fout .hoofdstuk { min-height: 0; height: 100%; }
html:not(.js) .is-fout .schijf { position: absolute; }

/* ---------- colofon ---------- */
.colofon .post { display: inline-block; padding-block: 0.25em; }
.colofon { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 2rem; padding: 0.9rem var(--goot); border-top: 1px solid var(--lijn); background: var(--grond); color: var(--gedempt); font-size: 0.875rem; }

/* ================= met beweging: één toneel dat blijft staan terwijl je scrolt ================= */
/* bladeren gaat per pagina: de browser scrolt niet zelf door, inzoomen met twee vingers blijft werken */
html.js { overscroll-behavior: none; scrollbar-width: none; }
html.js body { touch-action: pinch-zoom; }
.js .reis[data-reis] { height: 500svh; }
.js .schijf__draai { rotate: none; }
.js .toneel { position: sticky; top: 0; height: 100svh; padding: 0; }
.js .hoofdstuk { position: absolute; left: var(--goot); margin: 0; top: var(--balk); bottom: 3.6rem; width: min(50vw - var(--goot) - 1vw, 46rem); min-height: 0; padding-block: 1rem; opacity: 0; pointer-events: none; }
.js .hoofdstuk.is-hier { opacity: 1; pointer-events: auto; }
.js .route { display: block; position: absolute; z-index: 3; left: var(--goot); bottom: 1.1rem; }
.route ol { display: flex; gap: 1.5rem; }
.route a { position: relative; display: inline-flex; align-items: baseline; gap: 0.45em; min-height: 1.75rem; padding-top: 0.5rem; color: var(--gedempt); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: color 0.3s var(--zacht), translate 0.35s var(--zacht); }
.route a::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--accent); scale: 0 1; transform-origin: 0 50%; transition: scale 0.45s var(--zacht); }
.route a.is-hier { color: var(--inkt); }
.route a.is-hier::before { scale: 1 1; }
@media (hover: hover) { .route a:hover { color: var(--inkt); translate: 0 -3px; } .route a:hover::before { scale: 1 1; } }
.route a:active { translate: 0 1px; }
.route a:focus-visible { color: var(--inkt); }
.route__nr { color: var(--accent-licht); font-variant-numeric: tabular-nums; }

/* Past een pagina op een heel klein of vreemd gevormd venster toch niet, dan krimpt de inhoud van die pagina net genoeg (app.js rekent --pas uit). */
.js .hoofdstuk > * { zoom: var(--pas, 1); }

/* ================= smalle vensters: de balk bovenaan wordt compacter ================= */
@media (max-width: 52rem) { .balk__groep { display: none; } }
@media (max-width: 34rem) {
  .balk .knop[href^='http'] { display: none; }
  .balk__merk img { width: clamp(104px, 30vw, 150px); }
}

/* ================= lage liggende vensters: kleinere letters, zodat tekst en paginanummers elkaar niet raken ================= */
@media (min-aspect-ratio: 1001/1000) and (max-height: 620px) {
  html { font-size: clamp(11px, 2.7svh, 16px); }
  .js .hoofdstuk { bottom: 3rem; gap: 0.7rem; padding-block: 0.5rem; }
  .titel { font-size: clamp(1.9rem, min(5.7vw, 12.5svh), 9.5rem); }
  .titel--klein { font-size: clamp(1.7rem, min(5vw, 10svh), 8.5rem); }
  .route ol { gap: 1.1rem; }
  .mensen { gap: 0.9rem; }
}

/* smalle liggende vensters: bij de paginanummers alleen de naam van de huidige pagina, zodat de rij niet over de schijf loopt */
@media (min-aspect-ratio: 1001/1000) and (max-width: 46rem) {
  .route ol { gap: 0.9rem; }
  .route a:not(.is-hier) .route__naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ================= staand of vierkant scherm (telefoon, tablet): de schijf hangt bovenaan, het actieve blad wijst omlaag ================= */
@media (max-aspect-ratio: 1/1) {
  :root { --d: min(132vw, 64svh); --actief: 90; --balk: 60px; }
  html { font-size: 100%; }
  .balk__groep, .balk .knop[href^='http'] { display: none; }
  .balk__rechts { gap: 0.4rem; }
  .balk__merk img { width: clamp(104px, 30vw, 150px); }
  .balk .knop--klein { padding-inline: 0.7em; }
  .schijf { right: auto; left: 50%; top: var(--balk); translate: -50% -50%; transition: translate 1.5s var(--rustig), rotate 1.5s var(--rustig), scale 1.5s var(--rustig), opacity 1.2s ease-in-out 0.15s; }
  .is-fout { --d: 78vw; }
  .js .is-fout .hoofdstuk { bottom: 0.75rem; align-content: start; }
  /* contactblad: de schijf draait omhoog het beeld uit en maakt de hele pagina vrij voor de mensen; terug bladeren draait hem weer in */
  .js.bij-contact .schijf { translate: -50% -125%; rotate: -120deg; scale: 0.7; opacity: 0; }
  .js .hoofdstuk[data-hoofdstuk='4'] { top: calc(var(--balk) + 0.5rem); gap: 0.9rem; }
  .js .hoofdstuk[data-hoofdstuk='4'] .mens { grid-template-columns: 5rem minmax(0, 1fr); }
  .js .hoofdstuk[data-hoofdstuk='4'] .portret { width: 5rem; }
  .hoofdstuk { width: auto; margin-inline: var(--goot); min-height: 0; padding-block: 2.5rem; }
  .hoofdstuk:first-of-type { padding-top: calc(var(--d) / 2 + 1.5rem); }
  .titel { font-size: clamp(2.3rem, 10.4vw, 5.5rem); }
  .titel--klein { font-size: clamp(2rem, 8.4vw, 4.2rem); }
  .tekst { font-size: 1.0625rem; max-width: 38ch; }
  .js .hoofdstuk { left: var(--goot); right: var(--goot); width: auto; top: calc(var(--balk) + var(--d) / 2 + 0.75rem); bottom: 3.6rem; align-content: center; padding-block: 0; gap: 0.8rem; }
  .route ol { gap: 0.25rem; }
  .route a { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; align-items: center; padding-top: 0; }
  .route a { gap: 0.4em; padding-inline: 0.5rem; }
  .route__naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .route a.is-hier .route__naam, .route li:last-child .route__naam { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  html:not(.js) .schijf { position: absolute; }
  html:not(.js) .route { display: none; }
  .mensen { gap: 1rem; }
  .mens { grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.9rem; }
  .portret { width: 4.25rem; }
  h3 { font-size: 1.25rem; }
  .colofon { padding-block: 1rem; }
}

@media (max-aspect-ratio: 1/1) and (max-height: 640px) {
  :root { --d: min(100vw, 60svh); }
  .titel { font-size: clamp(2rem, 9vw, 3rem); }
  .tekst { font-size: 1rem; line-height: 1.4; }
  .js .hoofdstuk[data-hoofdstuk='4'] .mens { grid-template-columns: 4rem minmax(0, 1fr); }
  .js .hoofdstuk[data-hoofdstuk='4'] .portret { width: 4rem; }
  .js .hoofdstuk[data-hoofdstuk='4'] .blad-nr { display: none; }
  .mens { grid-template-columns: 3.25rem minmax(0, 1fr); }
  .portret { width: 3.25rem; }
  .mensen { gap: 0.7rem; }
}

/* de smalste telefoons: paginanummers dichter op elkaar, het woord Contact alleen op pagina 5 */
@media (max-width: 22.5rem) {
  .route a { min-width: 2.4rem; padding-inline: 0.3rem; }
  .route li:last-child a:not(.is-hier) .route__naam { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ================= minder beweging: alles staat stil en volledig in beeld ================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .knop:focus-visible { color: var(--grond); } .knop:focus-visible .knop__vul { clip-path: none; }
  .knop--eerst:focus-visible { color: var(--accent-inkt); }
}
@media (prefers-reduced-motion: reduce) and (hover: hover) {
  .knop:hover { color: var(--grond); } .knop:hover .knop__vul { clip-path: none; }
  .knop--eerst:hover { color: var(--accent-inkt); }
}