/* ------------------------------------------------------------------
   zehl — personal site
   Text first. Two-column document layout: a narrow margin column for
   metadata, a measured column for prose. One restrained accent, used only
   for links and the current page marker. No third-party requests.
   ------------------------------------------------------------------ */

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/newsreader-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
}

:root {
  --paper: #fcfcfb;
  --ink: #191917;
  --prose: #3b3b36;
  --muted: #71716a;
  --rule: #e2e2dc;
  --accent: #2a4a66;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17171a;
    --ink: #ecece6;
    --prose: #c8c8c1;
    --muted: #8f8f88;
    --rule: #2e2e32;
    --accent: #9bbdd9;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--prose);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.shell {
  max-width: 56rem;
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  flex-direction: column;
}

.shell > main { flex: 1 0 auto; }

/* --- masthead ---------------------------------------------------- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2.5rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 2.5rem 0 1.6rem;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { text-decoration: none; }

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  font-family: var(--sans);
  font-size: 0.775rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.masthead nav a { color: var(--muted); text-decoration: none; }
.masthead nav a:hover { color: var(--ink); }
.masthead nav a[aria-current='page'] {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.35em;
  text-decoration-thickness: 1px;
}

/* --- headline ---------------------------------------------------- */

.headline { padding: 5.75rem 0 3.75rem; border-bottom: 1px solid var(--rule); }

h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(2.5rem, 5.9vw, 3.6rem);
  line-height: 1.02;
  /* Inter braucht bei Displaygrößen deutlich negatives Tracking, sonst wirkt
     sie luftig statt bestimmt. */
  letter-spacing: -0.032em;
  color: var(--ink);
  text-wrap: balance;
}

.role {
  margin: 1.15rem 0 0;
  font-family: var(--sans);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--accent);
}

.lead {
  margin: 1.9rem 0 0;
  max-width: 30em;
  font-family: var(--sans);
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--prose);
}

h1 + .lead { margin-top: 2rem; }

/* --- document rows ----------------------------------------------- */

.row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0 3.25rem;
  padding: 3.6rem 0;
  border-bottom: 1px solid var(--rule);
}
.row:last-of-type { border-bottom: 0; padding-bottom: 5rem; }

.row > h2 {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.715rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
  padding-top: 0.22rem;
}

.row > div { min-width: 0; }
.row p { margin: 0 0 1.15rem; max-width: 34em; }
.row p:last-child { margin-bottom: 0; }

@media (max-width: 46rem) {
  .row { grid-template-columns: 1fr; gap: 0.9rem; padding: 2.5rem 0; }
  .row > h2 { padding-top: 0; }
}

@media (max-width: 30rem) {
  .masthead nav { gap: 1.1rem; font-size: 0.72rem; }
  .shell { padding: 0 1.25rem; }
}

/* --- entries ------------------------------------------------------ */

.entry + .entry { margin-top: 2.25rem; }

.entry h3 {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.entry .where {
  margin: 0.3rem 0 0.7rem;
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* --- plain listing (standards, papers) ---------------------------- */

.listing { border-top: 1px solid var(--rule); }

.listing li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}
ul.listing { list-style: none; margin: 0; padding: 0; }

.listing .when {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  line-height: 1.9;
}
.listing .what { color: var(--prose); }
.listing .what cite { font-style: italic; color: var(--ink); }
.listing .what .at {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--sans);
  font-size: 0.73rem;
  letter-spacing: 0.03em;
  color: var(--muted);
}

@media (max-width: 46rem) {
  .listing li { grid-template-columns: 1fr; gap: 0.2rem; }
  .listing .when { line-height: 1.5; }
}

/* --- focus list --------------------------------------------------- */

ul.plain { list-style: none; margin: 0; padding: 0; max-width: 34em; }
ul.plain li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
}
ul.plain li:first-child { border-top: 1px solid var(--rule); }

/* --- links -------------------------------------------------------- */

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--accent) 42%, transparent);
}
a:hover { text-decoration-color: var(--accent); }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  text-decoration: none;
}

.mailto {
  font-family: var(--sans);
  font-size: 1.1rem;
  color: var(--accent);
  overflow-wrap: anywhere;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

/* --- colophon ----------------------------------------------------- */

.colophon {
  border-top: 1px solid var(--rule);
  padding: 1.6rem 0 3.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.colophon a { color: var(--muted); text-decoration-color: var(--rule); }
.colophon a:hover { color: var(--ink); }
.colophon ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- legal pages -------------------------------------------------- */

.legal p { max-width: 34em; }
.legal .fill { color: var(--muted); font-style: italic; }

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

/* --- utility ------------------------------------------------------ */

.gap, .row .gap { margin-top: 1.5rem; }

/* Wortmarke Zehl CyberConsult auf /advisory/. Kein Bild, sondern Text in der
   Schrift der Seite plus eine Haarlinien-Zeichnung. Dadurch folgt sie den
   Farbtokens von selbst, bleibt in jeder Größe scharf, ist auswählbar und
   kostet keine Datei. currentColor erledigt den Dark Mode ohne zweite Fassung.

   Auf dieser Seite führt die Marke, nicht der Seitentitel: „Advisory" steht als
   Label darunter. Es bleibt trotzdem ein <h1> — die Seite braucht eine echte
   Überschrift für Suchmaschinen und Screenreader, sie sieht nur anders aus. */
.brandmark {
  display: block;
  margin: 0 0 1.1rem;
  max-width: 24rem;
  color: var(--ink);
}

.brandmark__shield {
  display: block;
  margin-bottom: 0.85rem;
  width: clamp(2.2rem, 9vw, 3rem);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.15;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.brandmark__name {
  display: block;
  font-family: var(--serif);
  /* Fließend, sonst läuft der Name mit white-space: nowrap auf schmalen
     Displays aus der Zeile und macht die Seite horizontal scrollbar. */
  font-size: clamp(1.6rem, 7.2vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: -0.006em;
  white-space: nowrap;
}

/* Der Seitentitel tritt hinter die Marke zurück. Etwas größer und dunkler als
   die Marginalien-Labels in der linken Spalte, damit beide unterscheidbar
   bleiben. */
.headline--brand h1 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--ink);
}

/* Porträt neben der Headline, nur auf der Startseite. Rechteckig, nicht rund —
   die Regel „keine Rundungen" gilt weiter. Unter 52rem klappt es über den Text,
   damit die Zeilenlänge nicht leidet. */
.headline--portrait {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 0 3.25rem;
  align-items: start;
}

.headline--portrait > div { min-width: 0; }

.portrait { display: block; }

.portrait img {
  display: block;
  width: 230px;
  height: auto;
  border: 1px solid var(--rule);
}

@media (max-width: 52rem) {
  .headline--portrait {
    grid-template-columns: 1fr;
    gap: 2rem 0;
  }
  .portrait { order: -1; }
  .portrait img { width: 148px; }
}