:root {
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  --paper: #F3F0E8; --ink: #1D1C1A; --faint: #85807A; --rule: #D6D1C6; --red: #A3281E;
  --font: "Courier Prime", "Courier New", Courier, monospace;
  --col: 40rem; --gutter: clamp(1.5rem, 6vw, 4rem);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #1A1917; --ink: #E9E5DC; --faint: #8D877E; --rule: #34312C; --red: #D9695E; }
}
:root[data-theme="dark"] { --paper: #1A1917; --ink: #E9E5DC; --faint: #8D877E; --rule: #34312C; --red: #D9695E; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; margin: 0; padding: 0; }
body { background: var(--paper); color: var(--ink); font-family: var(--font); font-size: 1.125rem; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3, p, li, label { font-weight: 400; }
.wrap { max-width: calc(var(--col) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.wide { max-width: calc(66rem + 2 * var(--gutter)); }

/* Kop */
.top { padding: 2rem 0 1.5rem; border-bottom: 1px dashed var(--rule); }
.top .index .cta { margin-left: auto; }
.top .brand { display: flex; justify-content: space-between; align-items: baseline; }
.top .brand a { text-decoration: none; }
.top .brand .tag { color: var(--faint); font-size: 1rem; }
.index { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1.6rem; margin-top: 1.1rem; font-size: 1rem; }
.index a { color: var(--faint); text-decoration: none; }
.index a:hover, .index a.current { color: var(--ink); }
.index a.current::before { content: "› "; color: var(--red); }
.index .cta a { color: var(--ink); text-decoration: underline; }

/* Pagina's */
.hero { padding: 5rem 0 4rem; }
.hero.home { min-height: calc(100vh - 12rem); min-height: calc(100svh - 12rem); display: flex; flex-direction: column; justify-content: center; }
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.12; letter-spacing: -.02em; margin-bottom: 2rem; }
.hero.home h1 { font-size: clamp(2.4rem, 7vw, 4rem); }
.cursor { display: inline-block; width: .55em; height: .95em; background: var(--red); vertical-align: -.08em; margin-left: .08em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } }
.hero p { max-width: 34rem; }
.hero p + p { margin-top: 1rem; }
.sub { color: var(--faint); }

section { padding: 4.5rem 0; border-top: 1px dashed var(--rule); }
.num { color: var(--faint); font-size: 1rem; margin-bottom: 1.5rem; display: block; }
h2 { font-size: 1.55rem; line-height: 1.25; margin-bottom: 1.4rem; letter-spacing: -.01em; }
h3 { font-weight: 700; font-size: 1.125rem; margin-bottom: .6rem; }
h3::before { content: "— "; color: var(--faint); font-weight: 400; }
.topic { margin-top: 2.75rem; }
.topic:first-of-type { margin-top: 2rem; }
p + p, ul + p, p + ul { margin-top: 1.1rem; }
.muted { color: var(--faint); }
.strong { font-weight: 700; }
.btn { display: inline-block; text-decoration: none; background: var(--ink); color: var(--paper); padding: .8rem 1.4rem; margin-top: 2rem; }
.btn:hover { background: var(--red); color: #fff; }
.more { display: inline-block; margin-top: 1rem; }

.plain { list-style: none; }
.plain li { padding: .12rem 0; }
.plain li::before { content: "— "; color: var(--faint); }
.words { color: var(--faint); }

.flow { list-style: none; counter-reset: s; }
.flow li { display: grid; grid-template-columns: 3rem 1fr; padding: 1rem 0; border-bottom: 1px dashed var(--rule); }
.flow li:last-child { border-bottom: 0; }
.flow li::before { counter-increment: s; content: counter(s, decimal-leading-zero); color: var(--faint); }
.flow b { font-weight: 700; display: block; }
.flow span { color: var(--faint); }

.services { list-style: none; }
.services li { padding: 1.25rem 0; border-bottom: 1px dashed var(--rule); }
.services li:first-child { padding-top: .5rem; }
.services b { font-weight: 700; display: block; margin-bottom: .25rem; }
.services .lbl { color: var(--red); font-size: .95rem; display: block; }
.services p { margin: 0; }
.services .more { margin-top: .5rem; }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; }
@media (max-width: 560px) { .cols { grid-template-columns: 1fr; } }
.combo { margin: 1.25rem 0 0 1rem; color: var(--faint); }
.combo b { color: var(--ink); font-weight: 400; }

.profile { border: 1px solid var(--ink); padding: 1.5rem; margin-top: 2rem; }
.profile dt { font-weight: 700; margin-top: 1rem; }
.profile dt:first-child { margin-top: 0; }
.profile dd { color: var(--faint); }

/* Formulier */
.form { margin-top: 2.5rem; }
.field { display: grid; grid-template-columns: 7rem 1fr; align-items: baseline; border-bottom: 1px solid var(--ink); padding: .6rem 0; }
.field label { color: var(--faint); }
.field input, .field textarea { font: inherit; color: var(--ink); background: transparent; border: 0; padding: 0; width: 100%; }
.field input:focus, .field textarea:focus { outline: none; }
.field:focus-within { border-bottom-color: var(--red); }
.field.big { grid-template-columns: 1fr; border-bottom: 0; padding-top: 1.75rem; }
.field.big label { margin-bottom: .75rem; }
.field.big textarea { min-height: 11rem; resize: vertical; line-height: 2rem; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(2rem - 1px), var(--rule) calc(2rem - 1px), var(--rule) 2rem); background-attachment: local; }
.field .error { grid-column: 2; color: var(--red); font-size: 1rem; }
.field.big .error { grid-column: 1; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
::placeholder { color: var(--faint); opacity: .7; }
.send { margin-top: 2rem; font: inherit; background: var(--ink); color: var(--paper); border: 0; padding: .8rem 1.4rem; cursor: pointer; }
.send:hover { background: var(--red); }
.fine { color: var(--faint); font-size: 1rem; margin-top: 1rem; }
@media (max-width: 520px) { .field { grid-template-columns: 1fr; gap: .25rem; } .field .error { grid-column: 1; } }

footer { border-top: 1px dashed var(--rule); padding: 2.5rem 0 3rem; color: var(--faint); font-size: 1rem; }
footer .row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
footer .index { margin-top: 1.25rem; flex-wrap: wrap; gap: .3rem 1.4rem; }