/* Hallmark · macrostructure: Bento Grid · nav: N7 (brutal slab) · footer: Ft8 (marquee)
 * theme: studied-DNA (source: url · blocks.cloud + motherduck.com), palette rebuilt
 * voice: Der Zauberberg, gelesen und nicht erinnert. Projekt Gutenberg 65661.
 *
 * Die Geometrie stammt von den beiden genannten Seiten: harte Umrisse von zwei
 * Pixeln, ein Radius von vieren, und vor allem jener flache Schlagschatten ohne
 * jede Weichzeichnung, der das Ganze zu einem Stein macht, den man drücken kann.
 * Die Farben sind neu, in OKLCH bei einer Helligkeit und einer Sättigung über
 * sechs Tonwinkel gesetzt, damit sie ein System bilden; keine von ihnen kommt
 * auf einer der beiden Vorlagen vor.
 *
 * Der Farbton trägt hier eine Bedeutung und keinen Schmuck: Schriften sind
 * immer blau, Werkzeuge grün, Bibliotheken violett.
 *
 * Bewegung, dreierlei: das Drücken eines Steines, das Einrasten der Fläche beim
 * Laden, und das Laufband im Fuß. prefers-reduced-motion hebt alle drei auf.
 */

:root{
  --color-paper:   oklch(96.2% 0.016 88);
  --color-paper-2: oklch(99% 0.006 88);
  --color-ink:     oklch(18% 0.010 70);
  --color-ink-2:   oklch(33% 0.010 70);

  --c-self:    oklch(87% 0.170 95);
  --c-writing: oklch(80% 0.130 218);
  --c-tool:    oklch(81% 0.185 145);
  --c-lib:     oklch(76% 0.150 288);
  --c-live:    oklch(76% 0.170 5);
  --c-else:    oklch(78% 0.175 48);
  --c-mercury: oklch(58% 0.190 32);

  --font-display:'Archivo', ui-sans-serif, system-ui, sans-serif;
  --font-body:   'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-2xs:0.6875rem; --text-xs:0.75rem; --text-sm:0.875rem;
  --text-base:1rem; --text-md:1.125rem; --text-lg:1.375rem;
  --text-xl:1.75rem;
  --text-slab:clamp(1.6rem, 3.2vw, 2.85rem);

  --space-3xs:4px; --space-2xs:8px; --space-xs:12px; --space-sm:16px;
  --space-md:24px; --space-lg:32px; --space-xl:48px; --space-2xl:64px;
  --space-3xl:96px;

  --brick-border:2px solid var(--color-ink);
  --brick-radius:4px;
  --brick-pad:var(--space-md);
  --brick-shadow:5px 5px 0 0 var(--color-ink);
  --brick-shadow-hover:3px 3px 0 0 var(--color-ink);
  --brick-bg:var(--color-paper-2);
  --brick-fg:var(--color-ink);

  --page-gutter:clamp(16px, 4vw, 48px);
  --measure:64ch;
  --ease:cubic-bezier(0.2,0.9,0.3,1);
  --dur-micro:110ms; --dur-short:240ms;
  color-scheme:light;
}

@font-face { font-family:'Archivo'; src:url(/fonts/archivo.woff2) format('woff2');
  font-weight:100 900; font-stretch:62% 125%; font-style:normal; font-display:swap; }
@font-face { font-family:'Geist'; src:url(/fonts/geist.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:'JetBrains Mono'; src:url(/fonts/jetbrains-mono.woff2) format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap; }

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
/* Ohne dies steht der Fuß bei einem kurzen Beitrag mitten auf der Seite und
   darunter liegt handbreit totes Papier. */
body{margin:0; min-height:100svh; display:flex; flex-direction:column;
  background:var(--color-paper); color:var(--color-ink);
  font-family:var(--font-body); font-size:var(--text-base); line-height:1.65;
  -webkit-font-smoothing:antialiased}
body > main{flex:1 0 auto}
body > .foot{flex-shrink:0}
h1,h2,h3{font-family:var(--font-display); font-style:normal; font-weight:800;
  font-stretch:110%; line-height:1.04; letter-spacing:-0.02em; margin:0;
  overflow-wrap:anywhere; min-width:0}
p{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--color-ink); outline-offset:3px}
.wrap{max-width:1240px; margin:0 auto; padding-inline:var(--page-gutter)}
.mono{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.11em; text-transform:uppercase}
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:var(--space-sm); top:var(--space-sm); z-index:60;
  background:var(--color-paper-2); padding:var(--space-2xs) var(--space-sm);
  border:var(--brick-border)}

/* ---------- N7 · brutal slab ------------------------------------------- */
.slab{display:flex; align-items:center; gap:var(--space-md); flex-wrap:wrap;
  padding:var(--space-sm) var(--page-gutter);
  border-bottom:2px solid var(--color-ink); background:var(--color-paper);
  position:sticky; top:0; z-index:40}
.slab__mark{display:flex; align-items:center; gap:var(--space-2xs);
  font-family:var(--font-display); font-weight:800; font-stretch:118%;
  letter-spacing:0.01em; font-size:var(--text-md); text-decoration:none}
.slab__nav{margin-left:auto}
.slab__nav ul{display:flex; gap:var(--space-2xs); list-style:none; margin:0; padding:0; flex-wrap:wrap}
.slab__nav a{display:block; text-decoration:none; font-size:var(--text-xs); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; padding:var(--space-2xs) var(--space-xs);
  border:2px solid transparent; border-radius:var(--brick-radius);
  transition:background-color var(--dur-micro) var(--ease), border-color var(--dur-micro) var(--ease)}
.slab__nav a:hover{border-color:var(--color-ink); background:var(--color-paper-2)}
.slab__nav a:active{transform:translate(1px,1px)}
.slab__nav a[aria-current="page"]{border-color:var(--color-ink); background:var(--c-self)}

/* ---------- das Raster: Grundmaße zuerst, Ausnahmen danach ------------- */
/* Eine Medienabfrage erhöht die Spezifität nicht. Stünde .s4x1 hinter der
   Abfrage, gewönne es bei jeder Breite, und ein Stein über vier Spalten
   zwänge in einem Raster von zweien zwei stillschweigende Spalten hinzu. */
.bento{display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  grid-auto-rows:minmax(9rem, auto); gap:var(--space-md);
  padding-block:var(--space-xl) var(--space-2xl)}
.s2x1{grid-column:span 2}
.s2x2{grid-column:span 2; grid-row:span 2}
.s4x1{grid-column:span 4}
@media (max-width:64rem){
  .bento{grid-template-columns:repeat(2, minmax(0,1fr))}
  .s4x1{grid-column:span 2}
}
@media (max-width:34rem){
  .bento{grid-template-columns:minmax(0,1fr)}
  .s2x1,.s2x2,.s4x1{grid-column:span 1}
  .s2x2{grid-row:auto}
}

/* ---------- der Stein ---------------------------------------------------
   Der Schattenwurf wird von außen durch ::part gesetzt, damit im Schatten-DOM
   kein <style> steht und die Richtlinie mit 'self' auskommt. */
/* Die Hoehe muss am Wirt stehen: ::part(brick) rechnet mit 100% gegen ihn,
   und ein Wirt ohne Hoehe laesst den Stein auf null zusammenfallen. */
kv-brick{display:block; min-width:0; height:100%}
kv-brick::part(brick){
  container-type:inline-size; height:100%; box-sizing:border-box;
  border:var(--brick-border); border-radius:var(--brick-radius);
  box-shadow:var(--brick-shadow); background:var(--brick-bg); color:var(--brick-fg);
  padding:var(--brick-pad);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
}
kv-brick:not([still]):hover::part(brick){transform:translate(2px,2px); box-shadow:var(--brick-shadow-hover)}
kv-brick:not([still]):active::part(brick){transform:translate(4px,4px); box-shadow:none}
kv-brick[still]::part(brick){box-shadow:none; transition:none}

kv-brick[tone="self"]    { --brick-bg:var(--c-self) }
kv-brick[tone="writing"] { --brick-bg:var(--c-writing) }
kv-brick[tone="tool"]    { --brick-bg:var(--c-tool) }
kv-brick[tone="lib"]     { --brick-bg:var(--c-lib) }
kv-brick[tone="live"]    { --brick-bg:var(--c-live) }
kv-brick[tone="else"]    { --brick-bg:var(--c-else) }
kv-brick[tone="ink"]     { --brick-bg:var(--color-ink); --brick-fg:var(--color-paper) }

/* Der Auftritt beginnt bei null Deckkraft, was nur taugt, wenn ihn auch etwas
   aufdeckt. Ohne Skript bleibt die Klasse aus und die Steine sind sichtbar. */
.js kv-brick{opacity:0; transform:scale(0.98);
  transition:opacity var(--dur-short) var(--ease), transform var(--dur-short) var(--ease)}
.js kv-brick.in{opacity:1; transform:none}

.b-eyebrow{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.12em; text-transform:uppercase}
.b-title{font-family:var(--font-display); font-weight:800; font-stretch:110%;
  line-height:1.04; letter-spacing:-0.02em; font-size:var(--text-lg);
  overflow-wrap:anywhere; min-width:0}
@container (max-width:22rem){ .b-title{font-size:var(--text-md)} }
.b-say{font-family:var(--font-display); font-weight:700; font-stretch:106%;
  font-size:var(--text-slab); line-height:1.1; letter-spacing:-0.02em}
.b-note{font-size:var(--text-sm); margin-top:var(--space-2xs)}
.b-prose{font-size:var(--text-sm); margin-top:var(--space-2xs); max-width:52ch}
.stack{display:grid; gap:var(--space-2xs); align-content:start; height:100%}
.stack--end{align-content:space-between}
a.plain{text-decoration:none; display:block; height:100%}
.peek{display:grid; align-content:end; height:100%; overflow:hidden;
  margin:calc(var(--brick-pad) * -1); padding:var(--brick-pad)}
.sis{aspect-ratio:17 / 44; height:auto; display:block; color:var(--color-ink)}
.slab__mark .sis{width:20px}
.peek .sis{width:104px; margin:0 auto -118px}
.foot__end .sis{width:22px}

.cmd{font-family:var(--font-mono); font-size:var(--text-sm);
  background:var(--color-ink); color:var(--color-paper); border-radius:var(--brick-radius);
  padding:var(--space-2xs) var(--space-xs); margin-top:var(--space-2xs);
  white-space:pre-wrap; overflow-wrap:anywhere}

/* ---------- Hilfsklassen statt style-Merkmale ---------------------------
   Eine Richtlinie mit style-src ohne 'unsafe-inline' verbietet nicht nur das
   <style>-Element, sondern auch das style-Merkmal am Element, und zwar
   stillschweigend. Ausgeliefert war das: unter /zur-person/ nahm das
   Thermometer die halbe Seite ein, weil width:56px nie ankam, der neueste
   Beitrag verlor seine Schriftgröße, und der Fuß seinen rechten Rand. Was
   getragen werden soll, steht darum hier. */
.symbols{position:absolute; width:0; height:0}
.sis--sm{width:56px}
.mono--push{margin-left:auto}
.b-title--xl{font-size:var(--text-xl)}
.b-prose--flat{margin:0}
.head__say{margin-top:var(--space-2xs); max-width:30ch}
.bento--tight{padding-top:0}
.art--narrow{max-width:70ch}
.art__h1{margin-top:var(--space-md)}
.art__h1--tight{margin-top:var(--space-2xs)}
.art__meta{margin-top:var(--space-md); display:flex; gap:var(--space-sm); flex-wrap:wrap}
.sis-row{display:flex; gap:var(--space-md); align-items:flex-end; margin-top:var(--space-lg)}

/* ---------- Fließtext --------------------------------------------------- */
.head{padding-block:var(--space-2xl) var(--space-md)}
.art{padding-block:var(--space-2xl) var(--space-3xl); max-width:var(--measure);
  margin-inline:0}
@media (min-width:78rem){ .art{margin-inline:auto} }
.art h1{font-size:clamp(1.6rem,4vw,2.6rem)}
.art__body{margin-top:var(--space-lg); font-size:var(--text-md); color:var(--color-ink-2)}
.art__body > * + *{margin-top:var(--space-md)}
.art__body h2{font-size:var(--text-lg); margin-top:var(--space-xl); color:var(--color-ink)}
.art__body pre{background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--brick-radius); padding:var(--space-md); overflow-x:auto;
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.6}
.art__body blockquote{margin:0; padding:var(--space-xs) var(--space-md);
  background:var(--c-self); border:var(--brick-border); border-radius:var(--brick-radius)}
.art__body table{width:100%; border-collapse:collapse; font-size:var(--text-sm);
  display:block; overflow-x:auto}
.art__body th,.art__body td{text-align:left; padding:var(--space-2xs) var(--space-xs);
  border-bottom:1px solid var(--color-ink); vertical-align:top}
.art__body th{font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.1em; text-transform:uppercase; border-bottom-width:2px; white-space:nowrap}
.art__body code{font-family:var(--font-mono); font-size:0.92em;
  background:var(--c-self); border-radius:2px; padding:0 3px}
.art__body pre code{background:none; padding:0}
.tag{display:inline-block; font-family:var(--font-mono); font-size:var(--text-2xs);
  letter-spacing:0.1em; text-transform:uppercase; border:2px solid var(--color-ink);
  border-radius:var(--brick-radius); padding:1px var(--space-2xs); background:var(--c-self)}

/* ---------- der Katalog -------------------------------------------------- */
.sql{display:grid; gap:var(--space-2xs)}
.sql textarea{width:100%; min-height:8rem; resize:vertical;
  font-family:var(--font-mono); font-size:var(--text-sm); line-height:1.55;
  color:var(--color-ink); background:var(--color-paper-2);
  border:2px solid var(--color-ink); border-radius:var(--brick-radius);
  padding:var(--space-2xs) var(--space-xs)}
.btn{font:inherit; font-size:var(--text-xs); font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; cursor:pointer; padding:var(--space-2xs) var(--space-md);
  background:var(--color-paper-2); color:var(--color-ink);
  border:2px solid var(--color-ink); border-radius:var(--brick-radius);
  box-shadow:3px 3px 0 0 var(--color-ink);
  transition:transform var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease)}
.btn:hover{transform:translate(1px,1px); box-shadow:2px 2px 0 0 var(--color-ink)}
.btn:active{transform:translate(3px,3px); box-shadow:none}
.btn:disabled{opacity:0.55; cursor:not-allowed; transform:none; box-shadow:none}
.out{overflow:auto; max-height:22rem; background:var(--color-ink); color:var(--color-paper);
  border-radius:var(--brick-radius); padding:var(--space-sm);
  font-family:var(--font-mono); font-size:var(--text-2xs); line-height:1.65;
  min-height:8rem; white-space:pre}

/* ---------- Ft8 · Laufband ---------------------------------------------- */
.foot{border-top:2px solid var(--color-ink); overflow:hidden; background:var(--c-self)}
.foot__track{display:flex; gap:var(--space-2xl); white-space:nowrap;
  padding-block:var(--space-sm); width:max-content; animation:marquee 52s linear infinite}
.foot__track span{font-family:var(--font-display); font-weight:700; font-stretch:110%;
  letter-spacing:0.02em; font-size:clamp(0.95rem,2vw,1.2rem)}
.foot:hover .foot__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.foot__end{display:flex; flex-wrap:wrap; gap:var(--space-md); align-items:center;
  padding:var(--space-md) var(--page-gutter); border-top:2px solid var(--color-ink);
  font-size:var(--text-sm)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important; animation-iteration-count:1 !important;
    transition-duration:1ms !important}
  .js kv-brick{opacity:1; transform:none}
  .foot__track{animation:none}
}