/* ============================================================
   edmundji.com — stylesheet
   ------------------------------------------------------------
   Sections, so it's obvious where to look:
     0.  FONTS      self-hosted @font-face, latin subset only
     1.  TOKENS     shared colors, fonts, spacing variables
     2.  INDEX      homepage — direction C, Institut / tabellarischer Lebenslauf
     3.  NOTES      essay pages — direction B, Buchtypografie
     3b. APPARATUS  back matter: colophon, reading, errata, marginalia
     3c. TAFELN     the plate index
     3d. 404
     3e. LEAVING    the doorstep between this site and everywhere else
     --  Responsive
     4.  PRINT      the same document on A4, as a Lebenslauf
   ============================================================ */


/* ============================================================
   0. FONTS
   Self-hosted, served from the same origin — no third-party CDN
   in the request path. Latin subset only; CJK falls back to the
   system font stack (--cjk in TOKENS) without an extra download.
   ============================================================ */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/archivo-narrow-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'Archivo Narrow';
  src: url('fonts/archivo-narrow-600.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}
@font-face {
  font-family: 'EB Garamond';
  src: url('fonts/eb-garamond-400italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2074, U+20AC, U+2122, U+2212;
}


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
  color-scheme: light dark;   /* scrollbars and form controls follow the theme */
  --rail:    92px;   /* date column width, matches .row's grid */
  --gutter:  20px;   /* .row's column gap */
  --ink:     #16161a;   /* body text */
  --ink-2:   #3a3833;   /* secondary text */
  --mute:    #83807a;   /* tags, dates, meta */
  --rule:    #d6d3cd;   /* hairline rule */
  --rule-2:  #16161a;   /* heavy section rule */
  --paper:   #fbfaf8;
  /* The one accent color. Sampled from the sky in img/clouds-plate.jpg:
     raw sample #4a73ab (4.65:1 contrast — not enough for 10px text),
     darkened to #375a88 for 6.75:1 against paper, safe at small sizes too. */
  --signal:  #375a88;
  --sky:     #4a73ab;   /* the undarkened raw sample, for large color blocks */

  --sans:    'Archivo', system-ui, -apple-system, sans-serif;
  --narrow:  'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --serif:   'EB Garamond', Georgia, 'Times New Roman', serif;

  /* CJK gets its own stack. Chinese glyphs read larger than Latin ones,
     so it's scaled to 92% to look the same size. */
  --cjk:     'PingFang SC', 'Hiragino Sans GB', 'Noto Sans SC',
             'Microsoft YaHei', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:    #eae8e2;
    --ink-2:  #c8c5be;
    --mute:   #99958d;
    --rule:   #3b3833;
    --rule-2: #eae8e2;
    /* Dark paper, not a black screen — keeps the warm paper feel of light mode. */
    --paper:  #1b1a17;
    --signal: #9dbbe0;   /* same blue, brightened — 8.7:1 on the dark background */
    --sky:    #4a73ab;
  }
}

* { box-sizing: border-box; }

html {
  font-size: 110%;              /* relative, so the user's default still scales; the 1.1 factor
                                   compensates the small x-height of Garamond/Archivo */
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;      /* for the section links in the running head */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }

/* The one accent color appears when text is selected — same blue in both themes. */
::selection { background: var(--sky); color: #fbfaf8; }

.cjk {
  font-family: var(--cjk);
  font-size: 0.92em;   /* visual size compensation */
}

/* Visible to screen readers, hidden visually */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Present only on paper. Declared here, before the PRINT section turns it
   back on — a media query adds no specificity, so a later `display: none`
   would win even while printing. */
.print-only { display: none; }

/* Cross-page transitions: native API, one line. Unsupported browsers just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation-duration: 140ms; }

/* The running head and the plate are the same object on every page that
   has them, so the browser carries them across navigations instead of
   destroying and repainting. Each name must be unique within a page. */
.runhead { view-transition-name: runhead; }
.plate   { view-transition-name: plate; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   2. INDEX  —— direction C
   Two-column table, date on the left, content on the right —
   the German tabellarischer Lebenslauf.
   ============================================================ */

.doc {
  font-family: var(--sans);
  width: min(100%, 880px);
  margin: 0 auto;
  font-size: 1rem;    /* follows the user's default font size */
}

/* ---- Running head (Kolumnentitel) ----
   One line, one rule, doing both of a running head's jobs. The name on
   the left is the book-title half — by the time this bar pins, the h1
   has scrolled away, so this is where the name lives mid-document. On
   the index the right half is the section nav, which doubles as the
   you-are-here mark: a small script in index.html sets aria-current on
   the link whose section sits under the reading line. Without JS the
   links are plain anchors and only the mark is missing. Notes pages put
   a static chapter label in the right slot instead.

   Sticky at top:0 so it's absent from the clean photo/name/intro
   opening screen, then catches and holds as the page scrolls into the
   body. The rule is drawn by ::after and inset to the same edge as the
   text, so it shares the 44px page frame with the plate and the name
   block instead of adding a third left-alignment edge of its own. */
.runhead {
  --edge-l: 44px;
  --edge-r: 44px;
  max-width: 880px;
  margin: 0 auto;
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 11px var(--edge-r) 11px var(--edge-l);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 26px;
  font-family: var(--mono);
  font-size: 0.6875rem;   /* 10px in the original spec, bumped to the site's 11px floor */
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  background: var(--paper);
}
.runhead::after {
  content: '';
  position: absolute;
  left: var(--edge-l);
  right: var(--edge-r);
  bottom: 0;
  border-bottom: 1px solid var(--rule);
}

.runhead .rh-name { color: var(--ink); font-weight: 500; transition: opacity 0.25s; }

/* A running head doesn't appear on the title page: while the h1 is still
   on screen the bar's name is redundant, so it fades in only once the bar
   pins (the index script adds .stuck). Notes pages have no nav in the bar
   and no name in their h1, so the name always shows there. */
.runhead:has(nav):not(.stuck) .rh-name { opacity: 0; }

.runhead nav { display: flex; gap: 26px; }
.runhead nav a { color: var(--mute); text-decoration: none; }
.runhead nav a:hover { color: var(--ink); }
.runhead nav a[aria-current] { color: var(--ink); }

/* Long project names and URLs shouldn't force horizontal scroll on narrow screens. */
.row .t,
.doc-foot { overflow-wrap: anywhere; }

/* ---- Plate (Bildtafel) ----
   Aspect ratio changes with screen width — tighter on desktop, more frame
   kept on phone — so it stays a technical-report plate, not a hero image. */

.plate {
  margin: 0;
  padding: 18px 44px 0;
}

.plate img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  object-position: center;
  border: 1px solid var(--rule);   /* keyline, as a plate in print gets */
  /* The frame is reserved by aspect-ratio, so on a slow connection there is
     an empty plate sitting there before the photograph arrives. Fill it with
     the colour the accent was sampled from, washed into the paper — an empty
     keyline reads as a broken image; a tinted one reads as a plate. */
  background: color-mix(in srgb, var(--sky) 16%, var(--paper));
  transition: border-color 0.2s;
}

/* The plate is the door to the plate index (3c). Nothing announces it:
   a document doesn't put a button on a photograph, and a reader who
   never clicks loses nothing on this page. The affordance is the cursor
   and the keyline going to full ink under the pointer — the quietest
   mark this stylesheet has, and the one a plate already carries. */
.plate a { display: block; }
.plate a:hover img { border-color: var(--ink); }
.plate a:focus-visible { outline-offset: 4px; }

.plate figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

/* Photos read too bright in dark mode; dim slightly. */
@media (prefers-color-scheme: dark) {
  .plate img { filter: brightness(0.88) saturate(0.97); }
}

/* Pull in the header's top margin when a plate is present. */
.plate + .doc-band { padding-top: 30px; }

/* ---- Header ---- */

.doc-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  padding: 56px 44px 16px;
}

.doc-band h1 {
  font-family: var(--narrow);
  font-size: 2.25rem;
  text-wrap: balance;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
  line-height: 1.05;
}

.doc-band h1 small {
  display: block;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  color: var(--mute);
  margin-top: 7px;
  text-transform: none;
}

/* The field belongs next to the name, not lumped in with location/timestamp. */
.doc-field {
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 10px 0 0;
}

.doc-stamp {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: right;
  line-height: 1.9;
  white-space: nowrap;
}

/* The version number is the way into the colophon — a stamp that can be
   read, the way a Fassung line on a form points at the imprint. */
.doc-stamp a {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.doc-stamp a:hover { color: var(--ink); }

/* ---- Intro ---- */

.doc-intro {
  padding: 26px 44px 6px;
  margin-left: calc(var(--rail) + var(--gutter));   /* aligns with the content column, not the date rail */
  max-width: 40em;
  font-size: 1.125rem;    /* a clear step above body — after the plate, this is where the eye lands */
  line-height: 1.62;
  color: var(--ink);
}

.doc-intro p { margin: 0 0 12px; text-wrap: pretty; }

/* ---- Sections ---- */

.doc-body { padding: 0 44px 64px; counter-reset: sec; }

.doc-h {
  font-family: var(--narrow);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 42px 0 0 calc(var(--rail) + var(--gutter));   /* starts at the content column, not the date rail */
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
  scroll-margin-top: 60px;   /* clears the pinned running head, plus a little air */
}

/* Section number, as in a technical report's table of contents. The mono
   face ties it to the date rail; the counter keeps the HTML clean. */
.doc-h::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero);
  font-family: var(--mono);
  font-weight: 400;
  color: var(--mute);
  margin-right: 14px;
}


/* ---- Entries ---- */

.row {
  display: grid;
  grid-template-columns: var(--rail) 1fr auto;
  gap: var(--gutter);
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  align-items: baseline;
}
.row.lead { padding: 18px 0; }   /* the two or three entries that should be seen first, not just read first */

.row .d {                       /* date column */
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--mute);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.row .t { font-size: 1rem; }    /* content column */

.row .t b {                     /* entry title */
  font-weight: 500;
  display: inline;
}
.row .t b.lead {                /* the handful of results that actually carry the page:
                                   weight alone is invisible at this size, so add a size step */
  font-weight: 600;
  font-size: 1.0625em;
}

.row .t i {                     /* annotation, status, stack */
  font-style: normal;
  color: var(--mute);
  font-size: 0.9375rem;
}

.row .t .desc {                 /* for when a line needs more */
  display: block;
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-top: 3px;
  max-width: 38em;
  text-wrap: pretty;
}

.row .l {                       /* link column */
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.row .l a {
  color: var(--signal);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.row .l a:hover { border-bottom-color: var(--signal); }

/* Status marker: under review / in production, etc. */
.tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  margin-left: 6px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* A verifiable number/status, kept apart from narrative — texture
   (mono vs. proportional) does the separating, not weight or color. */
.fact {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}

/* ---- Reading ----
   Every other section of this page is a credential. This one is a
   list of books, so it is set in the book face — the same Garamond
   the essays use. Texture does the separating: no rule, no colour,
   no extra weight, and the date rail stays mono so the table still
   lines up. The one part of the page that can't be generated should
   not look like the parts that can. */

.row.read .t {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-variant-numeric: oldstyle-nums;
}

/* In a reading row the italic holds the title of the book, so it is a
   real italic rather than the muted annotation it is everywhere else. */
.row.read .t i {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1em;
  color: var(--ink);
}

.row.read .desc {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  margin-top: 5px;
}


/* ---- Footer ---- */

.doc-foot {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 2.1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}

.doc-foot a { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--rule); }
.doc-foot a:hover { color: var(--ink); }


/* ============================================================
   3. NOTES  —— direction B
   Serif, single column, margin-separated, no rules.
   ============================================================ */

.book {
  font-family: var(--serif);
  max-width: 100%;
  padding: 40px 44px 96px;
}

.book-inner { max-width: 36em; margin: 0 auto; }   /* ~67 characters at body size — the top of the book measure */

/* Top back-link, deliberately kept small */
.book-back {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: none;
  display: inline-block;
  margin-bottom: 54px;
}
.book-back:hover { color: var(--ink); }

.book h1 {
  font-size: 2.25rem;      /* enough mass to hold the widened measure below it */
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  text-wrap: balance;
}

.book-date {
  font-size: 0.9375rem;
  color: var(--mute);
  font-variant-numeric: oldstyle-nums;
  margin: 0 0 34px;
}

.book p {
  font-size: 1.1875rem;
  line-height: 1.68;
  margin: 0 0 22px;
  color: var(--ink-2);
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;                          /* ragged-right + hyphenation, as in a printed page */
  font-variant-numeric: oldstyle-nums;    /* years sit in the line like the dates already do */
}

/* The opening line of an essay in small caps — the quietest of the classic
   openings. Real smcp glyphs (kept in our own Garamond subset; Google's
   builds strip them); ::first-line means it adapts to the measure. */
.book-date + p::first-line {
  font-variant-caps: small-caps;
  letter-spacing: 0.03em;
}

.book h2 {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.35;
  margin: 40px 0 16px;
  color: var(--ink);
  text-wrap: balance;
}

.book blockquote {
  margin: 28px 0 28px 1.6em;
  font-style: italic;
  color: var(--mute);
  font-size: 1.125rem;
  line-height: 1.6;
}

.book a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: var(--mute);   /* the underline whispers until the link is wanted */
}
.book a:hover { text-decoration-color: var(--ink); }

.book hr {
  border: 0;
  border-top: 1px solid var(--rule);
  width: 4em;
  margin: 46px 0;
}

/* Notes list page */
.book-list { margin-top: 4px; }

.book-list a {
  display: block;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}
.book-list a:hover .bl-t { text-decoration: underline; text-underline-offset: 3px; }

.book-list .bl-t { font-size: 1.25rem; line-height: 1.35; display: block; }
.book-list .bl-m {
  font-size: 0.9375rem;
  color: var(--mute);
  font-variant-numeric: oldstyle-nums;
  display: block;
  margin-top: 3px;
}


/* ============================================================
   3b. APPARATUS  —— back matter
   ------------------------------------------------------------
   The parts a printed book keeps after the text: colophon and
   errata. They borrow the NOTES direction (serif, single column)
   because that is where a book sets its own housekeeping — with
   mono labels doing the work that small caps and leading do on
   paper. Marginalia lives here too: it belongs to the essays, but
   it is apparatus, not text.
   ============================================================ */

/* ---- Marginalia (Marginalie) ----
   The organ the essay pages were missing. Wide screens float the note
   into the blank outside the measure; narrower ones fold it back into
   the column as an indented aside, which is what a paperback does when
   the page gets too small for margins.

   The span goes at its point of reference — after the sentence it
   annotates, not at the head of the paragraph. That is what makes the
   float land beside the right line on a wide screen, and it is the
   only placement that still reads in order once the note folds back
   into the column. */

.mn {
  display: block;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--mute);
  margin: 4px 0 18px 2em;
  padding-left: 12px;
  border-left: 1px solid var(--rule);
  max-width: 30em;
}

@media (min-width: 1100px) {
  .mn {
    float: right;
    clear: right;
    width: 13em;
    margin: 0.35em -15.5em 1.4em 0;   /* 13em wide + 2.5em gutter, out past the measure */
    padding-left: 0;
    border-left: 0;
    font-size: 0.8125rem;
    text-align: left;
    text-wrap: pretty;
    hyphens: none;
  }
}

/* ---- Page number in the running head ----
   A page number, not a progress bar: the difference is that a book
   tells you where you are, a website tells you how much is left.
   Filled in by notes/book.js; absent without JS, which is fine. */

.rh-page {
  font-variant-numeric: tabular-nums;
  color: var(--mute);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s;
}
.rh-page:not(:empty) { opacity: 1; }

/* ---- Specification list (colophon) ---- */

.spec { margin: 0; }

.spec dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 26px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.spec dd {
  margin: 12px 0 0;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}

.book pre {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.75;
  color: var(--ink-2);
  border-left: 1px solid var(--rule);
  padding: 2px 0 2px 14px;
  margin: 14px 0;
  overflow-x: auto;         /* long commands scroll inside the block, never the page */
}

.book code {
  font-family: var(--mono);
  font-size: 0.8125em;
  color: var(--ink);
}

/* ---- Dated entry list ----
   A source line, a date, and a note under them. Errata uses it; an
   annotated reading list would use the same skeleton if it ever earns
   its own page. */

.entries { list-style: none; margin: 4px 0 0; padding: 0; }

.entries li {
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.entries .e-t {
  display: block;
  font-size: 1.1875rem;
  line-height: 1.35;
  text-wrap: pretty;
}

.entries .e-m {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 5px;
}

.entries .e-n {                      /* the annotation — the reason the list exists */
  display: block;
  margin-top: 9px;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* Version history inside the colophon — two lines, not a page. The
   document has editions, and saying so is part of what it claims to be. */
.spec .ver {
  display: block;
  margin-top: 10px;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--mute);
  font-variant-numeric: oldstyle-nums;
}
.spec .ver b { font-weight: 500; color: var(--ink); }

/* An empty apparatus page says so rather than showing nothing. */
.nil {
  font-size: 1.0625rem;
  color: var(--mute);
  font-style: italic;
  margin: 22px 0 0;
}

/* ============================================================
   3c. TAFELN  —— the plate index
   ------------------------------------------------------------
   The Tafelteil: the gathering of plates a book binds by itself,
   each under a roman number it keeps for good. Two things follow
   from that, and they are the whole section.

   One: this page keeps the index's 880px frame rather than the
   book's 36em measure, so a plate here is exactly as wide as the
   plate on the front page. Same object, same keyline, under a
   number.

   Two: the plates are shown whole. The front page crops — 16/7 on
   a desktop, loosening to 4/3 on a phone — because a figure in a
   report is cut to its point. A Tafel is the photograph, so it
   keeps its own proportions; that is what the width and height
   attributes on each <img> are for, and why nothing here sets an
   aspect-ratio.

   Prose in the book's serif, captions in mono. Not a compromise:
   a plate section sets its captions in a different face from the
   body, and the front page already has that face on this caption.
   ============================================================ */

.tafeln {
  width: min(100%, 880px);
  margin: 0 auto;
  padding: 40px 44px 96px;
  font-family: var(--serif);
}

/* The words take the book measure; the plates below break it. On this
   page the plate is the wider object, so it sets the left edge and the
   measure sits against it rather than centred under it. */
.tafeln-lead { max-width: 34em; }

.tafeln h1 {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  text-wrap: balance;
}

/* :not() keeps this off .book-date, which sets the line under the title. */
.tafeln-lead p:not(.book-date) {
  font-size: 1.1875rem;
  line-height: 1.68;
  margin: 0 0 22px;
  color: var(--ink-2);
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}

/* ---- The plates ---- */

.tafel-list { list-style: none; margin: 46px 0 0; padding: 0; }

.tafel { margin-top: 56px; }
.tafel:first-child { margin-top: 0; }

.tafel figure { margin: 0; }

.tafel img {
  display: block;
  width: 100%;
  height: auto;                    /* the file's own proportions, uncropped */
  border: 1px solid var(--rule);
  background: color-mix(in srgb, var(--sky) 16%, var(--paper));
}

.tafel figcaption {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 6px;
  display: flex;
  gap: 16px;
}

.tafel .tf-no { color: var(--ink); }
.tafel .tf-no::after { content: ' ·'; color: var(--rule); }
.tafel .tf-d  { margin-left: auto; }   /* the date holds the right edge, as on the front page */

.tafel .tf-n {
  margin: 14px 0 0;
  max-width: 34em;
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-variant-numeric: oldstyle-nums;
}

/* The plate the index is currently printing with. It carries the front
   page's transition name, so the browser morphs the crop open into the
   whole photograph across the navigation instead of cutting to it.
   Unique per page: exactly one .tf-current in the list. */
.tafel.tf-current { view-transition-name: plate; }

/* Same correction the front-page plate gets. */
@media (prefers-color-scheme: dark) {
  .tafel img { filter: brightness(0.88) saturate(0.97); }
}


/* ============================================================
   3d. 404
   A plate that isn't there, framed the way a plate would be.
   ============================================================ */

.gone { padding: 60px 44px 90px; }

.gone .frame {
  aspect-ratio: 16 / 7;
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
  text-align: center;
  padding: 20px;
}

.gone p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-2);
  margin: 20px 0 0;
  max-width: 34em;
  line-height: 1.6;
}

/* This page sits in the index direction, which has no prose link style
   of its own — every other link there lives in the mono columns. */
.gone a {
  color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}


/* ============================================================
   3e. LEAVING
   The doorstep an outbound link passes through. Index direction,
   not book: the URL is the content of this page, and mono is the
   face the columns already use for anything a machine wrote.
   ============================================================ */

.exit { padding: 60px 44px 90px; max-width: 640px; }

/* The destination framed the way the plate on the index is framed —
   keyline, kicker, caption — because that is what it is: the one
   object this page exists to show you. */
.exit-plate {
  display: grid;
  gap: 7px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sky);
  padding: 20px 22px 22px;
}

.exit-kicker {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mute);
}

.exit-host {
  font-family: var(--narrow);
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--ink);
}

/* The full address, unshortened and unelided: a doorstep that hides
   half the destination is a worse door than none. */
.exit-url {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.exit p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 20px 0 0;
}

/* The states the script switches between. Belt and braces: the UA rule
   already hides [hidden], and nothing above declares display on these —
   but a later display in this file would silently unhide them, and the
   one thing this page must never do is show the wrong paragraph. */
.exit p[hidden], .exit-go[hidden] { display: none; }

/* No second accent for the warning — a heavy rule in the text colour,
   which is how this stylesheet marks a heading, marks this too. */
.exit-warn {
  border-left: 2px solid var(--rule-2);
  padding-left: 14px;
  font-style: italic;
}

/* Scoped through .exit so it outweighs the `.exit p` margin above —
   both are one class, but that one also carries a type selector. */
.exit .exit-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 30px;
}

/* Not a button — the site has none. A stamp: mono, letterspaced,
   keylined, and it inverts on hover the way a stamp inks. */
.exit-go {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--signal);
  text-decoration: none;
  border: 1px solid currentColor;
  padding: 11px 16px;
}
.exit-go:hover { background: var(--signal); color: var(--paper); }

.exit-back {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.exit-back:hover { color: var(--ink-2); }


/* ============================================================
   Responsive: wide desktop / tablet / phone
   The plate and text keep the same document rhythm at every size,
   never relying on horizontal overflow to make room.
   ============================================================ */

/* Small tablet: wrap the caption first so the two ends don't collide. */
@media (min-width: 701px) and (max-width: 820px) {
  :root { --rail: 82px; --gutter: 16px; }
  .runhead { --edge-l: 32px; --edge-r: 32px; }
  .plate { padding: 14px 32px 0; }
  .plate img { aspect-ratio: 5 / 2; }
  .plate figcaption { flex-direction: column; gap: 3px; }
  .plate + .doc-band { padding: 28px 32px 16px; }
  .doc-intro { padding-left: 32px; padding-right: 32px; }
  .doc-body { padding-left: 32px; padding-right: 32px; }
  .row { grid-template-columns: var(--rail) 1fr auto; gap: var(--gutter); }
  .book { padding-left: 32px; padding-right: 32px; }
  .tafeln { padding-left: 32px; padding-right: 32px; }
  .gone { padding-left: 32px; padding-right: 32px; }
  .exit { padding-left: 32px; padding-right: 32px; }
}

/* Phone: more forgiving crop, single-column header; entries keep the
   date / content / link reading order. */
@media (max-width: 700px) {
  :root { --rail: 0px; --gutter: 0px; }   /* the date rail stacks full-width here — nothing to align to */
  .runhead {
    --edge-l: max(18px, env(safe-area-inset-left));
    --edge-r: max(18px, env(safe-area-inset-right));
    letter-spacing: 0.06em;
  }
  /* Where the nav shares the bar, the name yields — the h1 is one flick
     of the thumb away. Notes pages (no nav in the bar) keep the name. */
  .runhead:has(nav) .rh-name { display: none; }
  .runhead nav {
    gap: 16px;
    overflow-x: auto;              /* safety valve for very narrow screens */
    scrollbar-width: none;
    padding: 6px 0; margin: -6px 0;   /* room for focus outlines inside the scroll box */
  }
  .runhead nav::-webkit-scrollbar { display: none; }
  .plate { padding: 10px max(18px, env(safe-area-inset-right)) 0 max(18px, env(safe-area-inset-left)); }
  .plate img { aspect-ratio: 3 / 2; }
  .plate figcaption {
    flex-direction: column;
    gap: 2px;
  }

  .plate + .doc-band { padding-top: 26px; }
  .doc-band {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-right: max(22px, env(safe-area-inset-right));
    padding-bottom: 14px;
    padding-left: max(22px, env(safe-area-inset-left));
  }
  .doc-band h1 { font-size: clamp(1.5625rem, 8vw, 1.6875rem); }
  .doc-stamp { text-align: left; }
  .doc-intro {
    padding-right: max(22px, env(safe-area-inset-right));
    padding-left: max(22px, env(safe-area-inset-left));
  }
  .doc-body {
    padding-right: max(22px, env(safe-area-inset-right));
    padding-bottom: 48px;
    padding-left: max(22px, env(safe-area-inset-left));
  }

  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; }
  .row .d { grid-column: 1 / -1; }
  .row .t { grid-column: 1; }
  .row .l { grid-column: 2; }

  .book {
    padding: 24px max(22px, env(safe-area-inset-right)) 64px max(22px, env(safe-area-inset-left));
  }
  .book h1 { font-size: 1.625rem; }
  .book p  { font-size: 1.09375rem; }

  .tafeln {
    padding: 24px max(22px, env(safe-area-inset-right)) 64px max(22px, env(safe-area-inset-left));
  }
  .tafeln h1 { font-size: 1.625rem; }
  .tafeln-lead p:not(.book-date) { font-size: 1.09375rem; }
  .tafel { margin-top: 40px; }
  /* Three fields don't fit one line here; stack them and let the date
     fall in under the place, as the front-page caption already does. */
  .tafel figcaption { flex-direction: column; gap: 2px; }
  .tafel .tf-d { margin-left: 0; }

  .gone { padding: 40px max(22px, env(safe-area-inset-right)) 64px max(22px, env(safe-area-inset-left)); }
  .exit { padding: 40px max(22px, env(safe-area-inset-right)) 64px max(22px, env(safe-area-inset-left)); }
  .exit-host { font-size: 1.375rem; }

  /* Three items don't fit the bar on a phone; the page number is the
     one that can go — the thumb already knows how far down it is. */
  .rh-page { display: none; }
  .spec dd { font-size: 1rem; }
}

/* Very narrow phones: ease the horizontal pressure on titles and entries. */
@media (max-width: 380px) {
  .plate img { aspect-ratio: 4 / 3; }
  .plate figcaption { letter-spacing: 0.07em; }
  .doc-band h1 small { letter-spacing: 0.08em; }
  .row { gap: 7px 10px; }
  .tag { margin-left: 3px; }
}

/* ============================================================
   4. PRINT  —— the same document, on A4
   ------------------------------------------------------------
   Not a stripped-down "résumé mode": the design survives, it just
   moves onto paper. The page is a real tabellarischer Lebenslauf —
   A4, German margins, Ort/Datum at the foot — because that is the
   form a German application actually wants, and because the whole
   site claims to be that document already.

   Page numbers are the browser's job: no engine implements the
   @page margin boxes (@bottom-center) that would let CSS set
   "Seite 1 von 2", so leave the browser's own footer on when the
   count matters.
   ============================================================ */

@media print {
  @page { size: A4; margin: 18mm 16mm 20mm; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Real paper is white, and 110% of a screen default is far too big
     at this size — set type in points, the way the printer thinks. */
  :root {
    --paper:  #fff;
    --ink:    #000;
    --ink-2:  #23231f;
    --mute:   #56544f;
    --rule:   #bdbab4;
    --rule-2: #000;
    --signal: #24456f;
    --rail:   72px;
    --gutter: 16px;
  }
  html { font-size: 10.5pt; scroll-behavior: auto; }
  body { background: #fff; }

  /* Screen furniture. The plate goes: a cumulus photograph is not a
     Bewerbungsfoto, and pretending otherwise reads worse than no photo. */
  .plate, .runhead, .doc-foot, .book-back { display: none; }
  /* On paper the address is the whole point and the buttons are not.
     Two classes, because the screen rule has two and @media adds none. */
  .exit .exit-act { display: none; }

  .print-only { display: block; }

  .doc { width: 100%; max-width: none; }
  .doc-band  { padding: 0 0 12px; break-after: avoid; }
  .doc-band h1 { font-size: 20pt; }
  .doc-intro { padding: 14px 0 2px; font-size: 1.05rem; }
  .doc-body  { padding: 0 0 8px; }

  /* Nothing should break across a page in the middle of a thought. */
  .doc-h { break-after: avoid; break-inside: avoid; margin-top: 26px; }
  .row   { break-inside: avoid; padding: 9px 0; }
  .doc-intro p, .book p, .book h1, .book h2, .entries li { break-inside: avoid; }
  .book h2 { break-after: avoid; }

  /* A link is not clickable on paper, so print where it goes. The link
     column drops under the entry rather than stretching the grid with
     a full URL. */
  .row { grid-template-columns: var(--rail) 1fr; }
  .row .l { grid-column: 2; font-size: 7.5pt; margin-top: 3px; white-space: normal; }
  .row .l a { border-bottom: 0; }
  .row .l a::after {
    content: ' — ' attr(href);
    text-transform: none;
    letter-spacing: 0;
    color: var(--mute);
  }

  .book { padding: 0; }
  .book-inner { max-width: none; }

  /* The plate index is the one page whose photographs are the content,
     so they survive onto paper — but never split across a sheet. */
  .tafeln { width: 100%; padding: 0; }
  .tafel { break-inside: avoid; margin-top: 30px; }
  .book p { font-size: 1.05rem; line-height: 1.55; }
  .mn { float: none; width: auto; margin: 12px 0 12px 2em; }

  /* Ort und Datum, then room for a signature — how the form ends. */
  .signature {
    margin-top: 34px;
    font-family: var(--sans);
    font-size: 0.9rem;
    color: var(--ink);
  }
}


/* ============================================================
   Appendix: frosted full-bleed background (off by default)
   ------------------------------------------------------------
   If you still want the full-bleed background, uncomment this and
   remove the <figure class="plate"> from index.html. Not recommended,
   but your call.

   After switching: the 1px hairlines and 10px mono tags read noticeably
   worse, mobile scrolling drops frames, and it'll date badly in a few years.
   ============================================================ */

/*
body {
  background:
    linear-gradient(rgba(251,250,248,0.86), rgba(251,250,248,0.86)),
    url('img/plate-a.jpg') center / cover fixed no-repeat;
}
.doc {
  background: rgba(251,250,248,0.72);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
*/