/* harrybuining.nl — ontwerp sinds 31-10-2026: licht papier met een rand, reuzenwoord met inbreker.
   Koppen in Anton, tekst in Atkinson Hyperlegible (leesbaar voor 70+). Alles zelf gehost;
   Anton komt uit @fontsource/anton 5.3.0, OFL in fonts/. De oude stijl.css blijft even staan voor gecachte pagina's. */
@font-face {
  font-family: "Anton";
  src: url("../fonts/anton.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/atkinson-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --rand: #e3dfc0;      /* lichte rand om de pagina, als een passe-partout */
  --bg: #fffdf8;
  --bg-deep: #f4efe6;
  --line: #e0d7c9;
  --fg: #1f1a1b;
  --muted: #3d3537;
  --faint: #b5aaa6;     /* alleen voor sier: cijfers, verticale tekst */
  --red-1: #8f3128;
  --red-2: #c84a36;
  --red: #a8382a;       /* rood als tekst */
  --red-vlak: #a83c2e;  /* rood als vlak met witte tekst */
  --btn: #ebe3d6;
  --btn-hover: #ddd2c2;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; padding: clamp(8px, 3vw, 40px); background: var(--rand); color: var(--fg); font-family: var(--body); font-size: 19px; line-height: 1.6; }
.vel { background: var(--bg); overflow: hidden; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
img { max-width: 100%; height: auto; }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; line-height: .95; text-wrap: balance; }

/* ---------- topbalk ---------- */
.top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-block: 20px; border-bottom: 1px solid var(--line); }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; }
.logo span { border-left: 1px solid var(--line); padding-left: 12px; font-size: 15px; line-height: 1.3; color: var(--muted); }
.top nav { margin-left: auto; }
.top ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 17px; }
.top nav a { text-decoration: none; color: var(--muted); }
.top nav a:hover { color: var(--fg); text-decoration: underline; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 200px minmax(0, 1fr) 84px; gap: 24px; padding-top: 40px; align-items: center; }
.chapters h2 { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0 0 14px; text-transform: uppercase; }
.chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 17px; }
.chapters a { text-decoration: none; color: var(--muted); }
.chapters a::before { content: "– "; }
.chapters a:hover { color: var(--fg); text-decoration: underline; }

.stage { position: relative; padding-top: clamp(40px, 7vw, 110px); }
.voor { display: block; font-family: var(--display); font-size: clamp(28px, 3.6vw, 48px); line-height: 1; color: var(--fg); margin-bottom: .15em; text-transform: uppercase; }
.word { position: relative; margin: 0; font-weight: 400; font-family: var(--display); text-transform: uppercase; line-height: .86; }
.word .groot { position: relative; display: flex; justify-content: center; font-size: clamp(84px, 15.5vw, 212px); letter-spacing: -.005em; }
.word .groot > span:not(.pp), .pp > span { position: relative; z-index: 1; background: linear-gradient(180deg, var(--red-1) 0%, var(--red-2) 62%, #b04a3c 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* De inbreker staat tussen de twee P's: links achter de eerste, rechts vóór de tweede.
   .pp krijgt bewust geen z-index, zodat P, inbreker en P samen gestapeld worden. */
.pp { position: relative; display: flex; }
.pp > span.front { z-index: 3; }
/* bottom: de zool van de voorste schoen (y 497 van 520 in de tekening) staat op de onderkant van de P */
.burglar { position: absolute; z-index: 2; left: 50%; transform: translateX(-46%); bottom: -.072em; height: 1.75em; width: auto; pointer-events: none;
  /* op licht papier verdwijnen de witte trui en het scherm; een dun donker randje houdt hem zichtbaar */
  filter: drop-shadow(0 0 1.2px #3d3537) drop-shadow(0 0 .5px #3d3537) drop-shadow(0 16px 20px rgba(0, 0, 0, .18)); }
.tag { position: absolute; z-index: 4; margin: 0; font-family: var(--display); text-transform: uppercase; line-height: 1.05; color: var(--fg); }
.tag.based { right: 3%; top: calc(clamp(40px, 7vw, 110px) + .25em); font-size: clamp(18px, 2.1vw, 27px); max-width: 8em; text-align: right; }
.tag.by { right: 3%; bottom: -1.6em; font-size: clamp(17px, 1.9vw, 24px); }
.vertical { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--display); text-transform: uppercase; font-size: clamp(40px, 5vw, 66px); line-height: 1; color: var(--faint); white-space: nowrap; justify-self: end; align-self: stretch; overflow: hidden; max-height: 620px; margin: 0; }

.intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; margin-top: 64px; padding-block: 28px 52px; border-top: 1px solid var(--line); }
.intro p { margin: 0; max-width: 60ch; color: var(--muted); }
.intro p strong { color: var(--fg); }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-block; background: var(--btn); color: var(--fg); text-decoration: none; font-weight: 700; font-size: 18px; padding: 14px 22px; border: 0; border-radius: 3px; cursor: pointer; font-family: inherit; }
.btn:hover { background: var(--btn-hover); }
.btn.red { background: var(--red-vlak); color: #fff; }
.btn.red:hover { background: #bb4636; }

/* ---------- gouden regel ---------- */
.rule { background: var(--bg-deep); border-block: 1px solid var(--line); }
.rule .wrap { padding-block: 64px; display: grid; gap: 14px; }
.eyebrow { font-size: 15px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0; }
.rule h2 { margin: 0; font-size: clamp(44px, 8vw, 112px); }
.rule h2 em { font-style: normal; color: var(--red); }
.rule p { margin: 0; font-size: 21px; color: var(--muted); }

/* ---------- hoofdstukken ---------- */
section.chapter { padding-block: 88px; border-bottom: 1px solid var(--line); }
.chead { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; margin-bottom: 40px; align-items: end; }
.chead .num { font-family: var(--display); font-size: clamp(64px, 9vw, 120px); line-height: .8; color: var(--faint); }
.chead h2 { margin: 0; font-size: clamp(44px, 7vw, 96px); }
.chead h2 .r { color: var(--red); }
.body { margin-left: 224px; min-width: 0; }
.lead { max-width: 62ch; margin: 0 0 24px; color: var(--muted); }

.book { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }
.cover { display: block; transform: rotate(-2deg); box-shadow: 0 30px 50px rgba(0, 0, 0, .45); }
.cover img { display: block; }
.price { font-family: var(--display); font-size: 64px; line-height: 1; margin: 6px 0 20px; }
.badge { display: inline-block; background: var(--red-vlak); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 6px 10px; margin-bottom: 16px; }

.examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
figure { margin: 0; }
figure a { display: block; text-decoration: none; }
.shot { display: block; width: 100%; background: #fff; border: 1px solid var(--line); }
figcaption { margin-top: 12px; font-size: 17px; color: var(--muted); }
figcaption b { color: var(--fg); }
.note { font-size: 17px; color: var(--muted); margin: 24px 0; }

.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 8px; }
.cards img { display: block; }
form { display: grid; gap: 14px; max-width: 520px; margin-top: 20px; }
label { font-weight: 700; }
input[type=email] { font: inherit; padding: 14px 16px; background: var(--bg-deep); color: var(--fg); border: 1px solid #8a7d7f; border-radius: 3px; }
.verstopt { position: absolute; left: -9999px; }

.help { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.help li { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.help li:nth-child(odd) { border-right: 1px solid var(--line); }
.help li:nth-child(even) { padding-left: 24px; }
.help h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1.05; margin: 0 0 10px; }
.help p { margin: 0 0 8px; color: var(--muted); }
.help .tel { font-family: var(--display); font-size: 28px; letter-spacing: .02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.help li.urgent { background: var(--red-vlak); border-color: var(--red-vlak); padding-left: 24px; }
.help li.urgent, .help li.urgent p { color: #fff; }
.help li.urgent .tel { font-size: 52px; }
.help a { overflow-wrap: anywhere; }

.about { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 48px; align-items: start; }
.photo { aspect-ratio: 4/5; background: var(--bg-deep); border: 1px dashed var(--faint); display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; color: var(--muted); font-size: 16px; }
.about p { max-width: 62ch; margin: 0 0 18px; color: var(--muted); }
.about p:first-child { color: var(--fg); font-size: 21px; }

footer { padding-block: 48px 64px; font-size: 16px; color: var(--muted); }
footer .big { font-family: var(--display); font-size: clamp(48px, 10vw, 140px); line-height: .85; color: var(--line); text-transform: uppercase; margin: 0 0 32px; }
footer p { max-width: 70ch; margin: 0 0 12px; }
footer strong { color: var(--fg); }

/* ---------- gids (/kaart/) en meldingen (wachtlijst.php): rustig, één kolom, geen reuzenwoord ---------- */
.paginakop { padding-block: clamp(40px, 7vw, 96px) 56px; display: grid; gap: 18px; }
.paginakop h1 { margin: 0; font-size: clamp(52px, 9vw, 128px); overflow-wrap: anywhere; }
/* meldingen tonen soms een e-mailadres in de kop: niet in hoofdletters, dan leest het niet als een adres */
.paginakop.klein h1 { font-size: clamp(36px, 6vw, 72px); text-transform: none; }
.paginakop .r, .gidskop .r { color: var(--red); }
.intro-tekst { margin: 0; max-width: 60ch; font-size: 21px; color: var(--muted); }
.gids { padding-block: 64px 24px; }
.gids > * { max-width: 860px; }
.gidskop { font-size: clamp(36px, 5.5vw, 64px); margin: 72px 0 24px; }
.vorm { border-top: 1px solid var(--line); padding-block: 28px; }
.vorm h3 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(26px, 3.4vw, 36px); line-height: 1.1; }
.vorm .nr { flex: none; font-size: 1.5em; line-height: .8; color: var(--red); font-variant-numeric: tabular-nums; }
.vorm p { margin: 0 0 14px; max-width: 64ch; color: var(--muted); }
.doe { background: var(--bg-deep); border-left: 6px solid var(--red-vlak); padding: 16px 20px; color: var(--fg) !important; }
.ervaring { margin: 12px 0 28px; padding: 28px; background: var(--bg-deep); border: 1px solid var(--line); }
.ervaring h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; }
.ervaring p { margin: 0 0 12px; max-width: 64ch; color: var(--muted); }
.ervaring .wie { margin: 0; font-weight: 700; color: var(--fg); }
.stappen { margin: 40px 0; padding: clamp(24px, 4vw, 40px); background: var(--red-vlak); color: #fff; }
/* #gebeurd is het doel van "Het is al gebeurd": laat het rode vlak er helemaal bij zien */
.stappen h2 { margin: 0 0 20px; font-size: clamp(32px, 5vw, 56px); scroll-margin-top: calc(clamp(24px, 4vw, 40px) + 16px); }
.stappen ol { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; }
.stappen .tel { font-weight: 700; white-space: nowrap; }
.meer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.meer h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; }
.meer p { margin: 0 0 18px; color: var(--muted); }
.melding { max-width: 760px; padding-block: 0 72px; }
.melding p { color: var(--muted); }
.melding form { margin-top: 12px; }
.linkknop { background: none; border: 0; padding: 0; font: inherit; color: var(--fg); text-decoration: underline; cursor: pointer; }

/* ---------- smal ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .chapters { order: 3; }
  .vertical { display: none; }
  .chapters ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .body { margin-left: 0; }
  .chead { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .top nav { margin-left: 0; width: 100%; }
}
@media (max-width: 720px) {
  .intro { grid-template-columns: minmax(0, 1fr); }
  .book, .about, .examples, .cards, .help, .meer { grid-template-columns: minmax(0, 1fr); }
  .help li:nth-child(odd) { border-right: 0; }
  .help li:nth-child(even) { padding-left: 0; }
  .help li.urgent { padding-left: 20px; padding-right: 20px; }
  .word .groot { font-size: clamp(64px, 19vw, 140px); }
  .voor { margin-bottom: .3em; }
  .tag.based { position: static; display: block; margin: 0 0 18px; max-width: none; text-align: right; }
  .tag.by { position: static; display: block; margin-top: 28px; text-align: right; }
  .stage { padding-top: 20px; }
  .logo span { display: none; }
}