/* tijdschrijven.nl */
@font-face { font-family: 'Fraunces Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src:url(fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations'); }
@font-face { font-family: 'Fraunces Variable'; font-style: italic; font-display: swap; font-weight: 100 900; src:url(fonts/fraunces-latin-wght-italic.woff2) format('woff2-variations'); }
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
body{margin:0;overflow-x:clip}
a{transition:color .2s,background-color .2s,border-color .2s,transform .2s,box-shadow .2s}
h1,h2,strong{overflow-wrap:break-word;hyphens:auto}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Magazine — warme editorial, Fraunces, terracotta */
:root{--ink:#2a1c13;--paper:#f6efe4;--card:#fffaf2;--terra:#c0532a;--olive:#5e6a3a;--muted:#7b6a5c;--serif:'Fraunces Variable',Georgia,serif}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:18.5px;line-height:1.7;font-variation-settings:"opsz" 14}
a{color:var(--terra);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--ink)}
nav{display:flex;justify-content:center;align-items:center;gap:34px;flex-wrap:wrap;padding:30px 20px 22px;border-bottom:1px solid rgba(42,28,19,.18);margin:0 max(20px,calc((100% - 1160px)/2))}
nav a{color:var(--ink);text-decoration:none;font-size:.95rem;font-style:italic}
nav a:hover{color:var(--terra)}
nav a:first-child{flex-basis:100%;text-align:center;font-style:normal;font-size:1.9rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px}
nav a:first-child::after{content:".";color:var(--terra)}
main{max-width:1160px;margin:0 auto;padding:0 20px}
.kicker{font-size:.78rem;text-transform:uppercase;letter-spacing:.22em;font-weight:600;color:var(--terra);display:flex;align-items:center;gap:14px}
h1,h2{font-weight:600;letter-spacing:-.02em;font-variation-settings:"opsz" 144}
.hero{text-align:center;padding:84px 0 64px;max-width:900px;margin:0 auto}
.hero .kicker{justify-content:center}
.hero .kicker::before,.hero .kicker::after{content:"";width:48px;height:1px;background:currentColor}
.hero h1{font-size:clamp(3.4rem,10vw,7.6rem);line-height:.95;margin:.25em 0 .3em;font-style:italic;font-weight:400}
.hero p{font-size:1.35rem;line-height:1.55;color:var(--muted);max-width:680px;margin:0 auto}
.cards{counter-reset:c;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:3px double var(--ink);border-bottom:1px solid rgba(42,28,19,.2)}
.card{counter-increment:c;display:flex;flex-direction:column;padding:34px 30px 38px;text-decoration:none;color:var(--ink)}
.card+.card{border-left:1px solid rgba(42,28,19,.2)}
.card::before{content:counter(c,upper-roman);font-size:3.4rem;font-style:italic;font-weight:300;color:var(--terra);line-height:1;margin-bottom:18px}
.card strong{font-size:1.6rem;line-height:1.15;font-weight:600;font-variation-settings:"opsz" 72}
.card span{margin-top:14px;color:var(--muted);font-size:1rem}
.card::after{content:"Lees verder →";margin-top:22px;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;font-weight:600;color:var(--terra)}
.card:hover{background:var(--card)}
.card:hover strong{color:var(--terra)}
.linkbox{margin:64px auto 0;max-width:900px;display:grid;grid-template-columns:1fr 1fr;gap:10px 48px}
.linkbox h2{grid-row:1;font-size:1.5rem;margin:0;font-style:italic;font-weight:400}
.linkbox p{grid-row:2;margin:0;font-size:1.02rem;color:var(--muted)}
article{max-width:760px;margin:72px auto 0}
article .kicker::before{content:"";width:48px;height:1px;background:currentColor}
article h1{font-size:clamp(2.6rem,6.5vw,4.8rem);line-height:1.02;margin:.3em 0 .45em;font-weight:500}
.lead{font-size:1.45rem;line-height:1.5;font-style:italic;color:#4a3526;font-weight:350}
.lead::first-letter{float:left;font-size:5.6rem;line-height:.82;font-style:normal;font-weight:700;color:var(--terra);margin:.06em .1em 0 0;font-variation-settings:"opsz" 144}
article h2{font-size:2rem;margin:2.1em 0 .5em;line-height:1.1}
article h2::before{content:"";display:block;width:40px;height:3px;background:var(--terra);margin-bottom:18px}
article ul{padding-left:0;list-style:none}
article li{padding-left:34px;position:relative;margin:.7em 0}
article li::before{content:"❧";position:absolute;left:0;color:var(--olive)}
aside{margin-top:56px;padding:34px 36px;background:var(--terra);color:#fff6ec;font-size:1rem;line-height:2}
aside strong{font-style:italic;font-size:1.4rem;font-weight:400;display:inline-block;margin-bottom:6px}
aside a{color:#fff;text-decoration-color:rgba(255,255,255,.5)}
aside a:hover{color:var(--ink)}
footer{max-width:1160px;margin:80px auto 0;padding:28px 20px 60px;border-top:3px double var(--ink);display:flex;justify-content:space-between;gap:20px;font-size:.95rem;color:var(--muted);font-style:italic}
footer span:first-child{font-style:normal;font-weight:700;color:var(--ink)}
@media(max-width:820px){nav{gap:22px}.cards{grid-template-columns:1fr}.card+.card{border-left:0;border-top:1px solid rgba(42,28,19,.2)}.linkbox{grid-template-columns:1fr}.linkbox h2,.linkbox p{grid-row:auto}.linkbox p{margin-bottom:24px}footer{flex-direction:column}.hero{padding:56px 0 44px}article{margin-top:44px}}