/* blog.css — de blog van De 3D Tuin: hetzelfde schrijfblok (ruitjes, nachtblauw, handschrift) */
:root { --papier: #ece3cf; --nacht: #1b2a6b; --inkt: #26262e; --rooster: rgba(27, 42, 107, .075); --hand: 'Architects Daughter', cursive; --grotesk: 'Inter Tight', 'Inter', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 400 17px/1.75 'Inter', system-ui, sans-serif; color: #33354a; background-color: var(--papier);
  background-image: linear-gradient(var(--rooster) 1px, transparent 1px), linear-gradient(90deg, var(--rooster) 1px, transparent 1px); background-size: 16px 16px; }
body::before { content: ''; position: fixed; top: 0; bottom: 0; left: clamp(10px, 3vw, 40px); width: 1px; background: rgba(179, 64, 42, .28); pointer-events: none; }
a { color: var(--nacht); }
.hand { font-family: var(--hand); color: var(--nacht); }
.bkop { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px clamp(16px, 5vw, 64px); }
.blogo img { width: 64px; height: auto; display: block; }
.bkop nav { display: flex; align-items: center; gap: 18px; }
.bkop nav a { font: 600 15px var(--grotesk); text-decoration: none; }
.bknop { display: inline-block; padding: 12px 18px; min-height: 44px; background: var(--nacht); color: var(--papier) !important; text-decoration: none; font: 600 15px var(--grotesk); }
.bpost, .bindex { max-width: 760px; margin: 0 auto; padding: 28px 16px 80px; }
.terug { display: inline-block; text-decoration: none; margin-bottom: 26px; }
.kicker { font-size: 15px; letter-spacing: .05em; text-transform: uppercase; }
.kicker::after { content: ''; display: block; width: 180px; height: 2px; margin-top: 4px; background: rgba(27, 42, 107, .45); transform: rotate(-1deg); }
h1 { font: 600 clamp(34px, 6vw, 60px)/1.02 var(--grotesk); letter-spacing: -.04em; color: var(--inkt); margin: 14px 0 16px; }
.intro { font-size: 19px; color: #4a4d62; margin: 0 0 30px; }
figure { position: relative; margin: 0 0 36px; }
figure img { width: 100%; height: auto; display: block; outline: 1px solid rgba(27, 42, 107, .3); }
figcaption { font-size: 14px; color: #6b6e80; margin-top: 8px; }
.noot { position: absolute; right: 12px; top: -26px; font-size: 19px; transform: rotate(-4deg); }
article h2 { font: 600 clamp(22px, 3vw, 28px)/1.2 var(--grotesk); letter-spacing: -.03em; color: var(--inkt); margin: 38px 0 8px; }
article ul { padding-left: 1.2em; }
article li { margin: 6px 0; }
article li::marker { color: var(--nacht); }
article strong { color: var(--inkt); }
.cta { margin-top: 56px; padding: 30px; background: var(--nacht); color: var(--papier); }
.cta .kicker { color: #c9cfe8; } .cta .kicker::after { background: rgba(236, 227, 207, .5); }
.cta h2 { font: 600 clamp(26px, 4vw, 36px)/1.1 var(--grotesk); letter-spacing: -.035em; margin: 10px 0; color: #fffaf0; }
.cta .bknop { background: var(--papier); color: var(--nacht) !important; margin-top: 10px; }
.lijst { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 22px; }
.lijst a { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; text-decoration: none; color: inherit; padding: 16px; background: rgba(250, 246, 236, .85); outline: 1px solid rgba(27, 42, 107, .25); }
.lijst a:hover { outline-color: var(--nacht); }
.lijst img { width: 100%; height: auto; display: block; }
.lijst h2 { font: 600 22px/1.2 var(--grotesk); letter-spacing: -.03em; color: var(--inkt); margin: 4px 0 6px; }
.lijst p { margin: 0; font-size: 15px; line-height: 1.6; }
@media (max-width: 640px) { .lijst a { grid-template-columns: 1fr; } .bkop nav a:not(.bknop) { display: none; } }
.bvoet { display: flex; align-items: center; gap: 18px; padding: 30px clamp(16px, 5vw, 64px); background: var(--nacht); color: var(--papier); font-size: 14px; }
.bvoet img { width: 56px; display: block; } .bvoet a { color: var(--papier); }