/* kroon-prins.nl, proef S212 (T059). Gebaseerd op de ontwerpen B en C van S204. Alleen op de eigen computer; er staat niets online. */
@font-face { font-family: 'Lora'; src: url('assets/Lora.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lora'; src: url('assets/Lora-Italic.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('assets/Nunito.ttf') format('truetype'); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  --creme: #fbf7f1; --papier: #ffffff; --inkt: #2a2420; --zacht: #5f574f; --rand: #e3dccd;
  --goud: #bf8c2e; --blik: #1A4B6B; --hart: #C0392B; --weg: #0F4C3A; --kerst: #a3222a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--inkt); font-family: 'Nunito', Arial, sans-serif;
       font-size: 18px; line-height: 1.6; overflow-wrap: break-word; }
h1, h2, h3 { font-family: 'Lora', Georgia, serif; line-height: 1.2; text-wrap: balance; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Zichtbare focus bij gebruik van het toetsenbord */
:focus-visible { outline: 3px solid var(--inkt); outline-offset: 3px; border-radius: 4px; }
.deur :focus-visible { outline-color: #fff; }

.breed { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.smal { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.knop { display: inline-block; background: var(--inkt); color: #fff; text-decoration: none; padding: 12px 22px;
        border-radius: 999px; font-weight: 700; }
.knop:hover, .knop:focus-visible { background: var(--goud); color: var(--inkt); }
.knop.licht { background: transparent; color: var(--inkt); border: 2px solid var(--inkt); }
.knop.licht:hover, .knop.licht:focus-visible { background: var(--goud); border-color: var(--goud); }

/* Kop */
.merk { display: flex; align-items: center; gap: 10px; font-family: 'Lora', serif; font-weight: 700; font-size: 1.15rem;
        text-decoration: none; }
.merk img { width: 40px; height: auto; }
.merk small { display: block; font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .7rem; letter-spacing: .25em;
              text-transform: uppercase; color: #8a6420; }
.kop { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; max-width: 1120px;
       margin: 0 auto; gap: 16px; flex-wrap: wrap; }
.kop nav { display: flex; gap: 22px; flex-wrap: wrap; font-weight: 600; }
.kop nav a { text-decoration: none; border-bottom: 2px solid transparent; }
.kop nav a:hover, .kop nav a:focus-visible, .kop nav a[aria-current="page"] { border-bottom-color: var(--goud); }

/* Gedeelde onderdelen */
.label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
         padding: 3px 10px; border-radius: 999px; background: #f1e9d8; color: #6d4f14; margin-bottom: 8px; }
.kanten { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin: 1.2em 0; }
.kant { display: flex; gap: 12px; align-items: flex-start; }
.kant img { width: 46px; flex: 0 0 46px; }
.kant b { display: block; font-family: 'Lora', serif; }
/* Helder: BlikHelder als hoofdkant, HartHelder en WegHelder kleiner en ingesprongen eronder (ronde 4) */
.boom { margin: .4em 0 .2em; }
.boom .kant.hoofd { align-items: center; gap: 14px; }
.boom .kant.hoofd img { width: 64px; flex: 0 0 64px; }
.boom .kant.hoofd b { font-size: 1.45rem; line-height: 1.2; }
.boom .onder { margin: 10px 0 0 31px; padding: 4px 0 2px 22px; border-left: 2px solid var(--rand);
               display: flex; flex-direction: column; gap: 10px; }
.deur .boom .onder { border-left-color: rgba(255, 255, 255, .55); }
.boom .kant.klein { gap: 10px; font-size: .92rem; line-height: 1.4; }
.boom .kant.klein img { width: 36px; flex: 0 0 36px; }
.boom .kant.klein b { font-size: 1rem; }
.vak .boom { margin: 1em 0 1.2em; }
.vak .boom .kant.klein { align-items: center; }
.quote { display: flex; gap: 22px; align-items: center; margin: 2em 0; }
.quote figure { margin: 0; flex: 0 0 96px; }
.quote img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.quote figcaption { display: block; text-align: center; font-size: .85rem; margin-top: 4px; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-family: 'Lora', serif; font-style: italic; margin: 0; }
.voet { border-top: 1px solid var(--rand); margin-top: 72px; padding: 28px 24px 40px; color: var(--zacht); font-size: .9rem; }
.voet .breed { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 0; }

/* Startpagina: ontwerp B, twee deuren */
.welkom { text-align: center; padding: 40px 24px 26px; }
.welkom h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.welkom p { color: var(--zacht); max-width: 50ch; margin: 0 auto; }
.deuren { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.deur { border-radius: 22px; padding: 34px 32px 36px; color: #fff; display: flex; flex-direction: column; gap: 14px;
        min-height: 520px; position: relative; overflow: hidden; }
.deur h2 { font-size: 2rem; margin: 0; }
.deur p { margin: 0; max-width: 40ch; }
.deur .knop { align-self: flex-start; background: #fff; color: var(--inkt); margin-top: auto; }
.deur .knop:hover, .deur .knop:focus-visible { background: var(--goud); color: var(--inkt); }
.deur.atlas { background: var(--kerst); }
.deur.helder { background: var(--blik); }
.deur .beeld { display: flex; gap: 12px; margin-top: 8px; }
.deur .beeld img { width: 48%; border-radius: 10px; border: 3px solid rgba(255, 255, 255, .85); }
.deur .kant b { color: #fff; }
.deur .kant img { background: #fff; border-radius: 50%; padding: 3px; }
.deur .label { background: rgba(255, 255, 255, .18); color: #fff; align-self: flex-start; }
/* S212: het logo van StillnessAtlas naast de naam (Wendy 02-10-2026: "ik mis alleen het logo van stillnessatlas op de site") */
.merkkop { display: flex; align-items: center; gap: 14px; }
.merkkop img { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 50%; background: #fff; }
.merkkop h2 { margin: 0; }
.merkkop img.icoon { padding: 4px; }
.deur .merkkop + p { margin-top: 0; }
.vak .merkkop { margin: .5em 0 .2em; }
.vak .merkkop img { width: 52px; height: 52px; flex-basis: 52px; }
/* De hele deur StillnessAtlas is klikbaar via de knop (geen link in een link) */
.deur.atlas .knop::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.deur.atlas:hover { box-shadow: 0 0 0 4px var(--goud) inset; }
.deur .ook { position: relative; z-index: 1; font-size: .9rem; margin-top: -4px; }
.deur .ook a { color: #fff; text-underline-offset: 3px; }
.deur .ook a:hover { color: #f1d9a5; }
section.over { padding: 56px 0 0; }

/* Pagina over mij: middendeel van ontwerp C */
.foto { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.foto img { width: 100%; border-radius: 18px; aspect-ratio: 20 / 9; object-fit: cover; }
.brief { padding: 44px 24px 0; }
.brief h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.brief .groot { font-family: 'Lora', serif; font-size: 1.3rem; }
.brief h2 { font-size: 1.5rem; margin-top: 1.8em; }
.lijn { border: 0; border-top: 1px solid var(--rand); margin: 48px 0 0; }
.maakt { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; max-width: 1120px; margin: 0 auto; padding: 40px 24px 0; }
.vak { background: var(--papier); border: 1px solid var(--rand); border-radius: 16px; padding: 26px 26px 28px; }
.vak h2.h3 { font-size: 1.35rem; }
.vak .rijtje { display: flex; gap: 10px; margin: 14px 0 18px; }
.vak .rijtje img { width: 31%; border-radius: 8px; border: 1px solid var(--rand); }
.vak .ook { font-size: .9rem; color: var(--zacht); }

@media (max-width: 860px) {
  .deuren, .maakt { grid-template-columns: 1fr; }
  .deur { min-height: 0; padding: 28px 22px 30px; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .quote { flex-direction: column; text-align: center; }
  .deur .beeld { flex-direction: column; }
  .deur .beeld img { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }