/* =========================================================================
   zenthros.io - laag.css : de GEDEELDE paginalaag

   Geladen door elke pagina, NA base.css en VOOR de pagina-eigen <style>.
   base.css draagt de tokens en de prototype-basis; dit bestand draagt wat
   elke pagina van deze site gemeen heeft: de kopbalk, het scene-ritme, de
   voet en een paar layout-primitieven.

   WAAROM DIT BESTAAT (2026-08-22)
   Deze regels stonden inline in index.html, en een deel ervan nog een tweede
   keer in juridisch.html. Gemeten voor de splitsing: 11.805 bytes inline CSS
   in index.html, 3.406 in juridisch.html. Ze waren AL uit elkaar gelopen -
   juridisch.html had een `.sitebar nav a:hover` die index.html miste. Met
   twee laagpagina's erbij zouden dat vier kopieen worden.

   DEFINIEER HIER GEEN CUSTOM PROPERTIES. Die horen in base.css, anders zetten
   twee bestanden dezelfde variabele en kiest de cascade er stil een.
   ========================================================================= */

body{font-family:var(--display);font-size:var(--tekst);line-height:var(--regel);
       letter-spacing:.005em}

.mono,code{font-family:var(--code)}

h1,h2,h3,.kop3{font-family:var(--display);font-weight:600}

.eyebrow,.verdict,.btn,.portaal,.protobar,.stand{font-family:var(--code)}

.sitebar{gap:var(--s4);height:64px}

.merk{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}

.merk img{display:block;flex:none}

.merk .embleem{width:40px;height:38px}

.merk .woordmerk{width:251px;height:22px}

.merk .typo{display:none;font-family:var(--code);font-size:14px;letter-spacing:.14em;
              font-weight:600;color:var(--ink)}

.merk .typo i{color:var(--wire);font-style:normal}

@media (max-width:520px){
    .merk .woordmerk{display:none}
    .merk .typo{display:inline}
  }

.sitebar nav{gap:var(--s5)}

.sitebar nav a{font-family:var(--code);font-size:13px;letter-spacing:.02em;color:var(--ink-2)}
/* Gemeten 2026-08-22: index.html kreeg hier cyaan (uit base.css) en juridisch.html
   wit, en alleen juridisch.html had :focus-visible. Dat is drift, geen ontwerp.
   Bewust geunificeerd op cyaan - dat laat de voorpagina ongewijzigd - en
   :focus-visible staat er nu op beide, wat paragraaf 7 van het UX-ontwerp eist.
   juridisch.html verandert dus van wit naar cyaan bij hover. */
.sitebar nav a:hover,.sitebar nav a:focus-visible{color:var(--wire)}

.portaal{box-shadow:none;background:transparent}

.eerlijk{max-width:var(--meet);margin-top:var(--s5);text-align:left;font-family:var(--code)}

.scene{border-top:1px solid var(--edge);padding:var(--s9) 0}

.js .scene{opacity:0;transform:translateY(24px);
             transition:opacity .6s ease,transform .6s ease}

.js .scene.in{opacity:1;transform:none}

.scene .nr{font-family:var(--code);font-size:11px;letter-spacing:.2em;color:var(--wire);
             display:block;margin-bottom:var(--s3)}

.scene h2{font-size:clamp(28px,5vw,44px);letter-spacing:.005em;margin-bottom:6px}

.scene .en{font-family:var(--code);font-size:11px;letter-spacing:.16em;color:var(--ink-3);
             margin:0 0 var(--s5)}

.scene p{color:var(--ink-2);max-width:var(--meet);margin:0 0 var(--s4)}

.scene em{color:var(--ink);font-style:normal;border-bottom:1px dotted var(--edge-hot)}

.essay-luik{grid-template-columns:1fr auto;gap:var(--s8)}

.essay .lead{font-size:clamp(19px,2.2vw,23px);line-height:1.5;color:var(--ink)}

.essay .eerlijk{margin-top:var(--s6)}

.adres{font-family:var(--code);text-align:right;line-height:.95;
         color:var(--edge-hot);user-select:none;
         position:sticky;top:var(--s9);align-self:start}

.adres span{display:block;font-size:clamp(34px,5.4vw,64px);letter-spacing:-.02em}

.adres b{display:block;margin-top:var(--s4);font-size:11px;font-weight:400;
           letter-spacing:.2em;color:var(--wire);opacity:.72}

@media (max-width:900px){
    .essay-luik{grid-template-columns:1fr}
    .adres{display:none}
  }

.tweeluik{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}

@media (max-width:900px){.tweeluik{grid-template-columns:1fr;gap:var(--s6)}}

.slot{border-top:1px solid var(--edge);padding:var(--s9) 0 var(--s7);text-align:center}

.volledig{display:block;width:396px;max-width:82vw;height:auto;margin:0 auto var(--s5)}

.slot .jaar{font-family:var(--code);font-size:12px;letter-spacing:.18em;color:var(--ink-3)}

.slot .later{font-size:15px;color:var(--ink-3);margin:0 0 var(--s6)}

.slot .voet{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
    gap:var(--s3) var(--s5);font-family:var(--code);font-size:12px;letter-spacing:.06em}

.slot .voet a{color:var(--ink-2);text-decoration:none;
    border-bottom:1px solid var(--edge);padding-bottom:2px}

.slot .voet a:hover,.slot .voet a:focus-visible{color:var(--ink);border-bottom-color:var(--edge-hot)}

.slot .voet .jaar{border:0}


/* =========================================================================
   LAAGPAGINA'S (mnemos.html, atlas.html) - toegevoegd 2026-08-22

   Deze blokken staan hier en niet in de pagina's zelf omdat BEIDE laagpagina's
   ze gebruiken. Dat is de hele reden dat dit bestand bestaat: de kopbalk was al
   een keer uit elkaar gelopen toen hij op twee plekken stond.
   ========================================================================= */

/* "Je bent hier" in de kopbalk. Bewust GEEN link: de huidige pagina aanklikken
   doet niets, en het merk linksboven is al de weg terug naar de voorpagina.
   Zo staat ZENTHROS niet twee keer als klikbaar element in de balk. */
.hier{font-family:var(--code);font-size:13px;letter-spacing:.02em;color:var(--ink);
      border-bottom:1px solid var(--wire);padding-bottom:2px}

/* En hij verdwijnt op dezelfde breedte als de links waar hij tussen staat.
   base.css doet `.sitebar nav a{display:none}` onder 780px, maar dit is een
   <span> en geen <a>, dus die regel raakt hem niet. Gemeten op 390px: de
   kopbalk toonde "MNEMOS | PORTAAL - binnenkort", een markering zonder iets
   om tussen te staan. */
@media (max-width:780px){ .hier{display:none} }

/* ---------- laagnavigatie op een smal scherm ----------

   base.css verbergt de navigatielinks in de kopbalk onder 780px, en dat is
   terecht: daar is geen ruimte. Gemeten op 412px staat er nog 115px over in de
   kopbalk terwijl de drie namen er 155 nodig hebben.

   Gevolg was wel dat een telefoon GEEN route naar de lagen had: de enige
   uitweg was de slotscene, 5.635 px naar beneden. Deze strip vult precies dat
   gat, in de 48px tussen de kopbalk en de kop.

   Vorm gekozen uit drie gebouwde varianten (tools/nav-varianten.html), op
   meting: 44px tikvlak (de kruimelpad-variant gaf er 23 en viel daarop af) en
   de kleinste hoogtekosten. De bezoeker ziet bovendien meteen DAT er drie
   lagen zijn - dat is de boodschap van de site.

   Alleen onder 780px: daarboven staat dezelfde navigatie al in de kopbalk, en
   twee menu's naast elkaar is geen navigatie maar ruis. */
.lagen{display:none}
@media (max-width:780px){
  .lagen{
    display:flex;justify-content:space-between;align-items:center;
    height:44px;padding:0 2px;border-bottom:1px solid var(--edge);
  }
  .lagen a,.lagen .nu{
    font-family:var(--code);font-size:12px;letter-spacing:.14em;
    text-decoration:none;color:var(--ink-3);padding:12px 4px;
  }
  .lagen a:hover,.lagen a:focus-visible{color:var(--ink)}
  /* De huidige laag: cyaan met een streep, en bewust GEEN link - erop tikken
     zou niets doen, en het merk linksboven is al de weg terug naar /. */
  .lagen .nu{color:var(--wire);border-bottom:1px solid var(--wire);padding-bottom:9px}
  /* Hier stonden scheidingspunten tussen de namen. Gemeten contrast: 1,88 - dus
     onzichtbaar. Decoratief en aria-hidden, dus formeel toegestaan, maar een
     decoratie die je niet ziet doet zijn werk niet. space-between scheidt de drie
     namen al. Weggehaald in plaats van opgehelderd: feller zouden ze met de namen
     zelf gaan concurreren. */
}

/* Het podium van een laagpagina: geen canvas, wel dezelfde opbouw als / */
.podium-laag{padding:var(--s9) 0 var(--s8);text-align:center}
.podium-laag h1{margin:0 0 var(--s3);font-size:clamp(40px,8vw,88px);line-height:1}
/* De laagnaam heeft GEEN vaste kleur: hij erft de betekenis uit de kern op de
   voorpagina. Groen (--ok, "toegewezen") als het over onthouden gaat, cyaan
   (--wire, de systeemlijn) als het over kiezen en doen gaat. Elke pagina zet hem
   zelf; --wire is hier alleen de terugval.

   Bewust ZONDER `.podium-laag`-voorvoegsel: de voorpagina heeft een `.podium`
   met de kern erin, geen `.podium-laag`, en die heeft sinds D61 dezelfde regel. */
.laagnaam{display:block;font-family:var(--code);font-size:13px;
     letter-spacing:.22em;color:var(--wire);margin-bottom:var(--s4)}

/* De functie achter de naam (D61). Gedempt en met minder letterspatiëring: de
   NAAM moet de nadruk houden, de rol legt hem alleen uit.

   DE ROL STAAT BEWUST IN NORMALE SCHRIJFWIJZE, niet in hoofdletters zoals de
   naam. Reden staat in D46: hoofdletterbehandelingen zijn daar verworpen omdat
   ze van `AgenticOS` het onleesbare `AGENTICOS` maken. Ik had hier eerst
   "HET AGENTICOS" staan en liep dus in precies die val. Zet dit niet terug. */
.laagnaam .rol{color:var(--ink-3);letter-spacing:.10em;font-size:11.5px}
.podium-laag .sub{max-width:var(--meet);margin:0 auto var(--s7);color:var(--ink-2)}

/* Een paneel met regels. Op mnemos is dat het geheugen, op atlas de taakstroom. */
.paneel{max-width:560px;margin:0 auto;text-align:left;background:var(--panel);
        border:1px solid var(--edge);padding:var(--s5)}
.paneel .kop{font-family:var(--code);font-size:11px;letter-spacing:.18em;
             color:var(--ink-3);margin-bottom:var(--s4)}
.item{border-top:1px solid var(--edge);padding:var(--s3) 0}
.item:first-of-type{border-top:0}
/* display:block staat er expliciet bij: in scene 2 van mnemos.html zitten deze
   twee in een <button>, en dan zijn het spans die op EEN regel belanden - met een
   margin-top die niets doet. Gemeten op 390px voor het hier stond. */
.item .zin{display:block;color:var(--ink);overflow-wrap:anywhere}
.item .bron{display:block;font-family:var(--code);font-size:12px;color:var(--ink-3);margin-top:2px}
.paneel .telling{font-family:var(--code);font-size:11.5px;color:var(--ink-3);
                 margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--edge)}

/* De uitgang onderaan elke laagpagina: door naar de andere laag, of terug. */
.uitgang{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s6)}
.kaart{flex:1 1 240px;background:var(--panel);border:1px solid var(--edge);
       padding:var(--s5);text-decoration:none;display:block}
.kaart:hover,.kaart:focus-visible{border-color:var(--wire)}
.kaart b{display:block;font-family:var(--code);font-size:12px;letter-spacing:.2em;
         color:var(--wire);margin-bottom:var(--s2)}
.kaart span{display:block;color:var(--ink-2);font-size:17px}