/*
Theme Name: RuimteGeit
Theme URI: https://ruimtegeit.nl/
Author: Jeronimus van Rooij
Description: Krijtbord-thema voor ruimtegeit.nl. Handschrift op het bord, schrijfmachine voor Het I.N.S.T.I.T.U.U.T., monospace voor de boordcomputer.
Version: 1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ruimtegeit
Tags: blog, one-column, custom-menu, custom-logo, dark
*/

/* ---------- letters, vanaf deze server ---------- */
/* Caveat en IBM Plex Mono: SIL Open Font License 1.1
   Special Elite: Apache License 2.0
   De licentieteksten staan in assets/fonts/. */

@font-face{
  font-family:'Caveat';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('assets/fonts/caveat-var.woff2') format('woff2');
}
@font-face{
  font-family:'Special Elite';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/specialelite-regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibmplexmono-regular.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/ibmplexmono-italic.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibmplexmono-medium.woff2') format('woff2');
}
@font-face{
  font-family:'IBM Plex Mono';
  font-style:italic;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/ibmplexmono-mediumitalic.woff2') format('woff2');
}

:root{
  --bord:#0a0910;
  --bord-op:#14111d;
  --krijt:#eae5da;
  --krijt-dof:#9a948a;
  --paars:#b06cf0;
  --paars-diep:#7b3fb8;
  --papier:#f4efe2;
  --inkt:#241f18;
  --carbon:#e2ded1;
  --carbon-inkt:#413d36;

  --hand:'Caveat', cursive;
  --machine:'Special Elite', 'Courier New', monospace;
  --terminal:'IBM Plex Mono', ui-monospace, monospace;
  --lees:Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --breed:1100px;
  --smal:700px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bord);
  color:var(--krijt);
  font-family:var(--hand);
  font-size:20px;
  line-height:1.5;
  overflow-x:hidden;
}

/* krijtstof over het hele bord */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(60% 45% at 50% 18%, rgba(255,255,255,.055), transparent 70%),
    radial-gradient(40% 30% at 12% 70%, rgba(255,255,255,.03), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.5;
  mix-blend-mode:screen;
}

.site{position:relative; z-index:1}
.wrap{max-width:var(--breed); margin:0 auto; padding:0 24px}
.wrap-smal{max-width:var(--smal); margin:0 auto; padding:0 24px}

img{max-width:100%; height:auto}
a{color:inherit}

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--paars); color:#150e1e; padding:10px 18px; z-index:100;
}
.skip-link:focus{left:12px; top:12px}

.screen-reader-text{
  position:absolute !important; width:1px; height:1px;
  overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* ---------- kop ---------- */
.kop{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
  padding:22px 0 18px;
  border-bottom:1px solid rgba(234,229,218,.13);
}
.merk{display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--krijt)}
.merk svg{width:34px; height:auto; flex:none}
.merk img{width:auto; max-height:44px}
.merk b{font-weight:700; font-size:27px; letter-spacing:.01em}

.hoofdmenu ul{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.hoofdmenu a{
  color:var(--krijt-dof); text-decoration:none; font-size:21px;
  padding-bottom:3px; border-bottom:1.5px solid transparent;
}
.hoofdmenu a:hover, .hoofdmenu a:focus-visible{color:var(--krijt); border-bottom-color:var(--paars)}
.hoofdmenu .current-menu-item > a{color:var(--krijt); border-bottom-color:rgba(176,108,240,.45)}
.hoofdmenu ul ul{display:none}

/* ---------- hero ---------- */
.hero{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:56px; align-items:center;
  padding:66px 0 54px;
}
.boek{position:relative; transform:rotate(-2.2deg)}
.boek img{
  display:block; width:100%;
  box-shadow:0 22px 50px rgba(0,0,0,.65), 0 0 0 1px rgba(234,229,218,.09);
}
.tape{
  position:absolute; width:88px; height:26px;
  background:rgba(244,239,226,.22);
  box-shadow:0 1px 5px rgba(0,0,0,.35);
}
.tape.l{top:-13px; left:-20px; transform:rotate(-28deg)}
.tape.r{bottom:-11px; right:-22px; transform:rotate(-24deg)}

.hero h1{
  font-size:clamp(34px,5vw,54px); font-weight:700;
  line-height:1.08; margin:0 0 6px;
  text-shadow:0 0 1px rgba(234,229,218,.4);
}
.ondertitel{
  color:var(--krijt-dof); font-size:clamp(20px,2.4vw,26px);
  margin:0 0 26px; max-width:34ch;
}
.ondertitel em{font-style:normal; border-bottom:2px solid var(--paars)}
.pitch{
  font-family:var(--lees); font-size:16.5px; line-height:1.75;
  max-width:60ch; color:#cfcabf; margin:0 0 30px;
}

.knop{
  display:inline-block; text-decoration:none;
  font-family:var(--hand); font-weight:700; font-size:25px;
  color:#150e1e; background:var(--paars);
  padding:11px 30px 13px; border:0; cursor:pointer;
  border-radius:26px 22px 27px 21px / 24px 26px 22px 25px;
  box-shadow:0 6px 0 var(--paars-diep);
  transition:transform .12s, box-shadow .12s;
}
.knop:hover, .knop:focus-visible{transform:translateY(3px); box-shadow:0 3px 0 var(--paars-diep)}
.kleine-letter{margin:14px 0 0; font-size:19px; color:var(--krijt-dof)}

/* ---------- boordcomputer ---------- */
.boordcomputer{
  font-family:var(--terminal); font-style:italic; font-weight:500;
  font-size:14.5px; line-height:1.65; letter-spacing:.01em;
  color:#c8bde0;
  border-left:2px solid var(--paars-diep);
  padding:16px 0 16px 20px;
  margin:0 0 76px;
  max-width:70ch;
}
.boordcomputer .label{color:var(--paars); font-style:normal}
.caret{display:inline-block; width:8px; background:var(--paars); animation:knip 1s steps(2) infinite}
@keyframes knip{50%{opacity:0}}

/* ---------- secties ---------- */
.sectie{margin-bottom:82px}
.sectiekop{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:30px}
.sectiekop h2{font-size:34px; font-weight:700; margin:0}
.sectiekop a{color:var(--krijt-dof); text-decoration:none; font-size:19px; border-bottom:1px solid rgba(234,229,218,.25)}
.sectiekop a:hover{color:var(--paars); border-bottom-color:var(--paars)}

/* Bataaf: doorslag op carbonpapier */
.memos{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:34px}
.memo{
  display:block; text-decoration:none; color:var(--carbon-inkt);
  background:var(--carbon);
  font-family:var(--machine); font-size:14px; line-height:1.7;
  padding:30px 28px 26px;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  clip-path:polygon(0 0,100% 1%,99.4% 99%,.4% 100%);
  transition:transform .15s;
}
.memo:nth-child(odd){transform:rotate(-.7deg)}
.memo:nth-child(even){transform:rotate(.5deg)}
.memo:hover, .memo:focus-visible{transform:rotate(0deg) translateY(-4px)}
.memo .van{
  font-size:11px; letter-spacing:.13em; color:#7d776c;
  border-bottom:1px solid #c3bfb2; padding-bottom:9px; margin-bottom:16px;
}
.memo h3{font-size:18px; line-height:1.4; margin:0 0 12px; font-weight:400; color:#2c2924}
.memo p{margin:0}
.memo .stempel{
  display:inline-block; margin-top:18px;
  font-size:10.5px; letter-spacing:.16em;
  color:#a2564f; border:1.5px solid #a2564f; padding:3px 9px;
  transform:rotate(-3deg); opacity:.75;
}

/* verhalen op het bord */
.verhaal{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);
  gap:34px; align-items:center; text-decoration:none; color:inherit;
  margin-bottom:52px;
}
.verhaal .beeld{
  aspect-ratio:16/9; border:1px solid rgba(234,229,218,.16); overflow:hidden;
  background:linear-gradient(135deg,#171325,#0d0b14);
  display:grid; place-items:center; color:var(--krijt-dof); font-size:18px;
}
.verhaal .beeld img{width:100%; height:100%; object-fit:cover; display:block}
.verhaal h3{font-size:31px; font-weight:700; margin:0 0 10px; line-height:1.15}
.verhaal:hover h3{color:var(--paars)}
.verhaal p{font-family:var(--lees); font-size:16px; line-height:1.75; color:#c3beb4; margin:0; max-width:52ch}
.verhaal .datum{font-size:18px; color:var(--krijt-dof); margin:0 0 6px}

/* ---------- archief ---------- */
.archiefkop{padding:56px 0 34px}
.archiefkop h1{font-size:clamp(32px,4.4vw,46px); font-weight:700; margin:0 0 8px}
.archiefkop p{font-family:var(--lees); font-size:16px; color:#c3beb4; margin:0; max-width:60ch; line-height:1.7}

.paginering{display:flex; gap:14px; flex-wrap:wrap; margin:0 0 80px; font-size:21px}
.paginering .page-numbers{
  color:var(--krijt-dof); text-decoration:none; padding:4px 12px;
  border:1px solid rgba(234,229,218,.18);
}
.paginering .page-numbers:hover{color:var(--krijt); border-color:var(--paars)}
.paginering .current{color:#150e1e; background:var(--paars); border-color:var(--paars)}

/* ---------- leespagina: papier op het bord ---------- */
.blad{
  max-width:760px; margin:52px auto 90px;
  background:var(--papier); color:var(--inkt);
  padding:64px clamp(26px,6vw,74px) 72px;
  box-shadow:0 28px 70px rgba(0,0,0,.6);
  transform:rotate(-.35deg);
  clip-path:polygon(0 .4%,100% 0,99.7% 99.5%,.3% 100%);
}
.blad.doorslag{
  background:var(--carbon); color:var(--carbon-inkt);
  font-family:var(--machine);
  transform:rotate(.4deg);
}

.blad .meta{
  font-family:var(--machine); font-size:11.5px; letter-spacing:.13em;
  color:#8a8375; margin:0 0 22px;
}
.blad .meta a{color:inherit; text-decoration:none; border-bottom:1px solid #c7c0b0}
.blad h1.titel{
  font-family:var(--hand); font-weight:700;
  font-size:clamp(34px,5vw,50px); line-height:1.1;
  margin:0 0 30px; color:#1b1712;
}
.blad.doorslag h1.titel{font-family:var(--machine); font-size:clamp(23px,3.2vw,31px); line-height:1.35; font-weight:400}

.blad .uitgelicht{margin:0 0 36px}
.blad .uitgelicht img{display:block; width:100%}

.inhoud{font-family:var(--lees); font-size:18px; line-height:1.78}
.blad.doorslag .inhoud{font-family:var(--machine); font-size:15px; line-height:1.85}
.inhoud > *:first-child{margin-top:0}
.inhoud p{margin:0 0 1.3em}
.inhoud h2, .inhoud h3, .inhoud h4{
  font-family:var(--hand); font-weight:700; line-height:1.2;
  margin:1.9em 0 .5em; color:#1b1712;
}
.inhoud h2{font-size:34px}
.inhoud h3{font-size:28px}
.inhoud h4{font-size:24px}
.blad.doorslag .inhoud h2,
.blad.doorslag .inhoud h3,
.blad.doorslag .inhoud h4{font-family:var(--machine); font-size:17px; letter-spacing:.04em}
.inhoud a{color:#5a2d8c; text-decoration:underline; text-underline-offset:2px}
.inhoud a:hover{color:var(--paars-diep)}
.inhoud ul, .inhoud ol{margin:0 0 1.3em; padding-left:1.4em}
.inhoud li{margin-bottom:.45em}
.inhoud blockquote{
  margin:1.8em 0; padding:2px 0 2px 22px;
  border-left:3px solid var(--paars); font-style:italic; color:#3b3529;
}
.inhoud blockquote p:last-child{margin-bottom:0}
.inhoud figure{margin:2em 0}
.inhoud figcaption{
  font-family:var(--hand); font-size:19px; color:#6d6656; margin-top:8px; text-align:center;
}
.inhoud img{display:block}
.inhoud hr{border:0; border-top:1px dashed #b9b2a1; margin:2.4em 0}
.inhoud code, .inhoud pre{font-family:var(--terminal); font-size:.86em}
.inhoud .alignwide{width:min(100%,860px); margin-left:calc(50% - min(50%,430px))}
.inhoud .alignfull{width:auto; margin-left:calc(-1 * clamp(26px,6vw,74px)); margin-right:calc(-1 * clamp(26px,6vw,74px))}
.inhoud .aligncenter{margin-left:auto; margin-right:auto; text-align:center}
.inhoud .wp-block-image img{margin-left:auto; margin-right:auto}

.navvoet{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:760px; margin:0 auto 90px; padding:0 24px; font-size:21px;
}
.navvoet a{color:var(--krijt-dof); text-decoration:none; border-bottom:1px solid rgba(234,229,218,.22); max-width:44ch}
.navvoet a:hover{color:var(--paars); border-bottom-color:var(--paars)}

/* ---------- 404 ---------- */
.foutmelding{
  max-width:760px; margin:90px auto 110px; padding:0 24px;
}
.foutmelding h1{font-size:clamp(34px,5vw,50px); font-weight:700; margin:0 0 24px}
.foutmelding .boordcomputer{margin-bottom:34px}

/* ---------- voet ---------- */
.voet{
  border-top:1px solid rgba(234,229,218,.13);
  padding:28px 0 52px; display:flex; flex-wrap:wrap; gap:24px;
  justify-content:space-between; align-items:center;
  color:var(--krijt-dof); font-size:18px;
}
.voet a{color:var(--krijt-dof); text-decoration:none; border-bottom:1px solid rgba(234,229,218,.25)}
.voet a:hover{color:var(--paars)}
.voet ul{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0}

:focus-visible{outline:2px solid var(--paars); outline-offset:4px}
.blad :focus-visible{outline-color:var(--paars-diep)}

@media (max-width:820px){
  .hero{grid-template-columns:1fr; gap:38px; padding-top:44px}
  .boek{max-width:240px}
  .verhaal{grid-template-columns:1fr; gap:20px}
  .hoofdmenu ul{gap:16px}
  .hoofdmenu a{font-size:19px}
  .blad{padding-top:44px; padding-bottom:52px; margin-top:34px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}

/* ---------- zoekformulier ---------- */
.zoekformulier{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:22px 0 0}
.zoekformulier input[type="search"]{
  font-family:var(--hand); font-size:21px;
  background:transparent; color:var(--krijt);
  border:0; border-bottom:1.5px solid rgba(234,229,218,.35);
  padding:8px 4px; min-width:min(100%,280px);
}
.zoekformulier input[type="search"]::placeholder{color:var(--krijt-dof)}
.zoekformulier input[type="search"]:focus{outline:0; border-bottom-color:var(--paars)}

/* ---------- aanvraagformulier ---------- */
.formulierblad{max-width:720px}
.formulierblad .inhoud{margin-bottom:8px}

.honeypot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.aanvraag{
  font-family:var(--machine); font-size:14px; line-height:1.7;
  margin-top:34px; border-top:1px solid #c3bfb2; padding-top:30px;
}
.aanvraag .veld{margin:0 0 26px}
.aanvraag label{display:block; color:#2c2924; margin-bottom:7px}
.aanvraag input[type="text"],
.aanvraag input[type="email"],
.aanvraag select{
  font-family:var(--machine); font-size:15px; color:#2c2924;
  width:100%; max-width:420px; background:transparent;
  border:0; border-bottom:1px solid #9d978a; border-radius:0;
  padding:7px 2px;
}
.aanvraag select{max-width:100%}
.aanvraag input:focus, .aanvraag select:focus{
  outline:0; border-bottom-color:var(--paars-diep); border-bottom-width:2px;
}
.aanvraag .verplicht input{border-bottom-width:2px; border-bottom-color:#5f5850}
.aanvraag .nodig{
  font-size:10px; letter-spacing:.14em; color:#a2564f;
  border:1px solid #a2564f; padding:1px 6px; margin-left:8px;
  display:inline-block; vertical-align:2px;
}
.aanvraag .toelichting{display:block; font-size:12px; color:#7d776c; margin-top:6px; max-width:52ch}

.aanvraag .vinkje{
  display:flex; gap:11px; align-items:flex-start; margin:0 0 18px; max-width:56ch;
}
.aanvraag .vinkje input{margin-top:4px; accent-color:var(--paars-diep); flex:none}
.aanvraag .vinkje label{margin:0}

.aanvraag .privacyregel{
  font-size:12px; line-height:1.65; color:#7d776c;
  max-width:56ch; margin:24px 0 30px;
  border-top:1px dashed #b9b2a1; padding-top:18px;
}
.aanvraag .privacyregel a{color:#5a2d8c}

.foutregel{
  font-family:var(--machine); font-size:13.5px; color:#8e3f38;
  border-left:3px solid #a2564f; padding:10px 0 10px 16px; margin:0 0 24px;
}

/* ---------- tekstvak in de formulieren ---------- */
.aanvraag textarea{
  font-family:var(--machine); font-size:15px; line-height:1.75; color:#2c2924;
  width:100%; max-width:100%; background:transparent;
  border:1px solid #9d978a; border-radius:0;
  padding:12px 13px; resize:vertical;
}
.aanvraag textarea:focus{outline:0; border-color:var(--paars-diep)}
.aanvraag input::placeholder, .aanvraag textarea::placeholder{color:#a49d90}