@font-face{font-family:"Cormorant";src:url("fonts/cormorant-garamond.woff2") format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:"Cormorant";src:url("fonts/cormorant-garamond-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{--papier:#f5f1e9;--inkt:#181914;--zacht:#6f6d66;--terra:#b4552d;--terra-tekst:#a84e29;--kader:rgba(180,85,45,.28);
  --marge:clamp(12px,2.2vw,26px);--strook:46px;
  --schreef:"Cormorant",Georgia,"Times New Roman",serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace}
/* night: charcoal, close to black, never brown; the terra lifts so it still reads */
@media(prefers-color-scheme:dark){:root:not([data-stand="licht"]){--papier:#0e0e0d;--inkt:#ece7db;--zacht:#a3a09a;--terra:#e08a5c;--terra-tekst:#e08a5c;--kader:rgba(224,138,92,.32)}}
:root[data-stand="donker"]{--papier:#0e0e0d;--inkt:#ece7db;--zacht:#a3a09a;--terra:#e08a5c;--terra-tekst:#e08a5c;--kader:rgba(224,138,92,.32)}
*{box-sizing:border-box}
@media(prefers-reduced-motion:reduce){body,.licht span{transition:none}}
[hidden]{display:none!important}
html{height:100%}
body{position:relative;min-height:100%;min-height:100dvh;margin:0;display:flex;flex-direction:column;background:var(--papier);color:var(--inkt);transition:background .5s ease,color .5s ease}
/* a calling card: one hairline frame, everything that matters in the middle of it, and one quiet word beneath it */
body::before{content:"";position:absolute;inset:var(--marge) var(--marge) calc(var(--marge) + var(--strook)) var(--marge);border:1px solid var(--kader);pointer-events:none}
a{color:inherit}
a:focus-visible,.licht:focus-visible{outline:2px solid var(--terra);outline-offset:6px}

header{display:flex;justify-content:flex-end;padding:clamp(28px,4.4vw,52px) clamp(30px,4.6vw,56px) 0}
.licht{display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid var(--kader);border-radius:50%;background:none;cursor:pointer}
.licht span{width:13px;height:13px;border-radius:50%;background:var(--terra);box-shadow:inset -5px -1px 0 0 var(--papier);transition:box-shadow .4s ease}
.licht[aria-pressed="true"] span{box-shadow:inset 0 0 0 0 var(--papier)}

main{flex:1;display:flex;padding:clamp(40px,7vh,90px) clamp(32px,8vw,96px)}
.kaart,.colofon{flex:1;flex-direction:column;align-items:center;justify-content:center;gap:clamp(26px,4vh,44px);text-align:center}
/* two faces of one card: the colophon takes the middle when it is asked for, and gives it back */
.kaart{display:flex}
.colofon{display:none}
.colofon:target{display:flex}
.colofon:target~.kaart{display:none}
/* the word under the frame turns the card over, and turns it back */
.wissel{position:absolute;left:0;right:0;bottom:var(--marge);height:var(--strook);display:grid;place-items:center;
  font:400 .62rem/1 var(--mono);letter-spacing:.24em;text-transform:uppercase}
.wissel a{padding:10px 14px;color:var(--zacht);text-decoration:none}
.wissel a:hover,.wissel a:focus-visible{color:var(--terra)}
.naar-kaart,.colofon:target~.wissel .naar-colofon{display:none}
.colofon:target~.wissel .naar-kaart{display:inline}

h1{margin:0;font:500 clamp(2.6rem,7vw,5.4rem)/1 var(--schreef);letter-spacing:.02em}
h1 span{color:var(--terra)}
.wat{margin:0;max-width:30ch;font:400 clamp(1.25rem,2.2vw,1.6rem)/1.4 var(--schreef)}
.post{margin:0;font:400 .72rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--terra-tekst)}
.post i{font-style:normal;color:var(--zacht)}
.post a{text-decoration:none;padding-bottom:6px;border-bottom:1px solid var(--kader)}
.post a:hover,.post a:focus-visible{border-bottom-color:var(--terra)}

h2{margin:0;font:500 clamp(1.9rem,4vw,2.8rem)/1 var(--schreef);letter-spacing:.02em}
dl{margin:0;display:grid;gap:18px}
dt{margin-bottom:6px;font:400 .6rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;color:var(--zacht)}
dd{margin:0;font:400 1.25rem/1.35 var(--schreef)}
dd.post{font:400 .72rem/1.6 var(--mono)}
dd em{color:var(--terra-tekst)}

footer{padding:0 24px calc(var(--marge) + var(--strook) + clamp(18px,3vh,30px));text-align:center;
  font:400 .6rem/1.5 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--zacht)}
footer p{margin:0}
footer a{text-underline-offset:4px}