/* ==========================================================================
   Initiative Strukturelle Vernunft
   Visual direction: "Pruefbericht" — the page reads as a test report, not a
   magazine. Two registers only: Literata carries prose and headings across
   the weight axis, IBM Plex Mono carries everything structural (labels,
   figures, states, table headers).

   Colour discipline: --signal has exactly two jobs. It marks the Delta — the
   measured gap an analysis is built on — and it marks the un-hardened draft
   state on the Prüfstand. Beyond that it appears only in transient
   interaction states (hover, focus), never as static decoration: no coloured
   headings, no tinted panels, no accent rules. If you find yourself reaching
   for --signal to make something "pop", that is the moment to stop.
   ========================================================================== */

/* --- Fonts (self-hosted; CSP font-src 'self' forbids external loading) ---- */

@font-face {
    font-family: 'Literata';
    src: url('../fonts/literata-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Literata';
    src: url('../fonts/literata-latin-ext.woff2') format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-600-latin.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plexmono-600-latin-ext.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens --------------------------------------------------------------- */

:root {
    --paper:        #F2F1EC;
    --paper-raised: #FBFAF7;
    --ink:          #17171A;
    --ink-muted:    #63636B;
    --rule:         #D9D6CC;
    --rule-strong:  #B8B4A8;
    --signal:       #C1391B;

    /* Semantic roles — the only two sanctioned static uses of --signal.
       Author against these; a rule that reaches for --signal directly is
       either an interaction state or a mistake. */
    --delta:        var(--signal);
    --state-draft:  var(--signal);

    --font-body: 'Literata', Georgia, Cambria, 'Times New Roman', serif;
    --font-mono: 'Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

    --t-xs:   0.75rem;
    --t-sm:   0.8125rem;
    --t-meta: 0.875rem;
    --t-base: 1.1875rem;
    --t-lg:   1.375rem;
    --t-xl:   1.5rem;
    --t-2xl:  2rem;
    --t-3xl:  2.75rem;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-24: 6rem;

    --col:       42rem;
    --col-wide:  60rem;
    --col-frame: 66rem;
    --gutter:    1.5rem;
}

/* Dark palette, declared twice on purpose.

   The media query serves readers without JavaScript, where no data-theme
   attribute is ever set. The attribute rule serves the explicit switch. The
   :not() guard keeps the OS preference from overriding a reader who has
   deliberately chosen light while their system runs dark.

   `light-dark()` would remove the duplication, but the switch is a feature
   the reader asked for, not a progressive nicety — it should not depend on a
   comparatively recent CSS function. Eight duplicated lines buy that. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:        #16161A;
        --paper-raised: #1E1E23;
        --ink:          #E8E6E0;
        --ink-muted:    #9A9891;
        --rule:         #33333A;
        --rule-strong:  #4A4A52;
        --signal:       #E2694C;
    }
}

:root[data-theme="dark"] {
    --paper:        #16161A;
    --paper-raised: #1E1E23;
    --ink:          #E8E6E0;
    --ink-muted:    #9A9891;
    --rule:         #33333A;
    --rule-strong:  #4A4A52;
    --signal:       #E2694C;
}

/* Lets the browser theme scrollbars and form controls to match. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* --- Base ----------------------------------------------------------------- */

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

/* overflow-x: clip (not hidden): full-bleed rules are drawn at 100vw, which
   overhangs the scrollbar gutter — clip cuts that off WITHOUT creating a
   scroll container, so position:sticky on the masthead keeps working. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--t-base);
    font-optical-sizing: auto;
    line-height: 1.65;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* --- Page shells ----------------------------------------------------------
   Chrome (masthead, footer) and content manage their own width; structural
   rules live on the full-width elements so they span the whole viewport,
   the content inside is framed. Two frames exist: --col-frame for the page
   (home, chrome) and --col for reading columns (essays). */

article.essay,
main > article:not([class]) {
    max-width: calc(var(--col) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.home-content {
    max-width: calc(var(--col-frame) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Skip link — first focusable element, invisible until focused. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    padding: var(--s-2) var(--s-4);
    z-index: 10;
}
.skip-link:focus { left: var(--s-4); top: var(--s-4); }

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

/* --- Masthead ------------------------------------------------------------- */
/* Sticky and full-width: the hairline spans the viewport, the content sits
   in the page frame. The brand is mark + wordmark — the mark's strokes run
   on currentColor so it follows the palette; the filled core stays signal,
   because it is the brand mark, not decoration. */

.masthead {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-16);
}

.masthead__inner {
    max-width: calc(var(--col-frame) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--s-3) var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2) var(--s-6);
}

.masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink);
    border: 0;
}
.masthead__brand:hover { color: var(--signal); }

.masthead__mark { width: 34px; height: 34px; display: block; flex: none; }
.masthead__core { fill: var(--signal); }

.masthead__wordmark {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: var(--t-base);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.masthead__nav {
    display: flex;
    align-items: center;
    gap: var(--s-6);
}

.masthead__nav a {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    text-decoration: none;
    border: 0;
}
.masthead__nav a:hover,
.masthead__nav a[aria-current="page"] { color: var(--ink); }

/* Light/dark switch. A half-filled circle: the glyph for contrast itself,
   not a sun or moon — those name a mode and are ambiguous about whether
   they mean the current one or the target. The words HELL/DUNKEL said the
   same thing more verbosely; the aria-label still says it for readers who
   cannot see the glyph. */
.theme-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    color: var(--ink-muted);
    transition: color 120ms ease;
}
.theme-toggle[hidden] { display: none; }

.theme-toggle__icon { width: 16px; height: 16px; display: block; }

.theme-toggle:hover { color: var(--signal); }

/* --- Typography ----------------------------------------------------------- */

h1, h2, h3, h4 {
    color: var(--ink);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin-top: var(--s-12);
    margin-bottom: var(--s-4);
    text-wrap: balance;
}

h1 { font-size: var(--t-3xl); margin-top: 0; }
h2 { font-size: var(--t-2xl); font-weight: 600; }
h3 { font-size: var(--t-xl); font-weight: 600; }
h4 { font-size: var(--t-base); font-weight: 600; }

/* --- Optical size, driven rather than inferred ---------------------------- */
/*
   Literata carries an optical-size axis from 7 to 72. `font-optical-sizing:
   auto` (set on body) maps it to the pixel size, which is a good default:
   at 34px it asks for opsz 34. Overriding it only pays where the axis is
   steep, and measurement on this build says that is the two ends:

     body 17px, auto(17) vs opsz 14   ->   0.00 %   (flat — no rule here)
     small 13px, auto(13) vs opsz 10  ->  +4.41 %   wider, more open
     h1 34px, auto(34) vs opsz 72     ->  -2.14 %   tighter
     h1 44px, auto(44) vs opsz 72     ->  -2.14 %   tighter

   Middle tiers measured at or near zero and were removed rather than kept as
   decoration. Set width is only the measurable proxy: the axis mainly shifts
   stroke contrast and serif sharpness, which this test cannot see.

   Only the opsz axis is named, so font-weight keeps driving wght (verified:
   the h1 still computes to 700).
*/
h1, .home-content > h1 { font-variation-settings: 'opsz' 72; }
h2, .board__title      { font-variation-settings: 'opsz' 48; }

.board__quote,
.pruefstand__note,
.pruefstand__delta p,
.foot__tagline,
.essay-meta,
blockquote { font-variation-settings: 'opsz' 10; }

p { margin-block: 0 var(--s-6); }

strong { font-weight: 700; }

ul, ol { padding-left: 1.25rem; margin-block: 0 var(--s-6); }
li { margin-bottom: var(--s-2); }

a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-strong);
    transition: border-color 120ms ease, color 120ms ease;
}
a:hover { border-bottom-color: var(--signal); color: var(--signal); }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin-block: var(--s-16);
}

/* Source anchors: [[n]](#q-n) renders as a superscript reference. Excluded
   from the general link treatment so the reading line stays quiet. */
.essay-content a[href^="#q-"] {
    color: var(--ink-muted);
    border: 0;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    vertical-align: super;
    line-height: 0;
    padding-inline: 1px;
}
.essay-content a[href^="#q-"]:hover { color: var(--signal); }

/* Source list targets */
.essay-content [id^="q-"] {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-muted);
}

blockquote {
    margin: var(--s-8) 0;
    padding-left: var(--s-6);
    border-left: 2px solid var(--rule-strong);
    color: var(--ink);
    font-style: normal;
}
blockquote p:last-child { margin-bottom: 0; }

/* --- Instrument: tables --------------------------------------------------- */
/* The Messkriterien tables are the load-bearing evidence of the method, not
   an appendix. They get mono figures, a ruled head, and room to breathe. */

table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--s-8);
    font-size: var(--t-meta);
    font-variant-numeric: tabular-nums;
    background: var(--paper-raised);
}

th, td {
    text-align: left;
    padding: var(--s-3);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}

th {
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    background: transparent;
    border-bottom: 1px solid var(--rule-strong);
    white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* Wide tables break out of the reading column. display:block + overflow-x
   gives horizontal scroll without wrapper markup. Both selectors are needed:
   section pages render via list.html (bare <article>), archive pages via
   single.html (.essay-content). */
article table,
.essay-content table {
    display: block;
    width: max-content;
    max-width: 100%;
    margin-inline: auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

article th, article td,
.essay-content th, .essay-content td { overflow-wrap: break-word; }

/* Long raw URLs in the source list must wrap instead of blowing out the
   column — only affects overlong tokens, normal prose is untouched. */
article, .essay-content { overflow-wrap: break-word; }

/* --- Signature: der Pruefstand -------------------------------------------- */
/* Every analysis exists in at least two versions. That is the initiative's
   one structural promise, so it gets the one piece of real visual weight on
   the page. The rail shows where the reader currently stands and always
   offers the other end. */

.pruefstand {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule-strong);
    background: var(--paper-raised);
    padding: var(--s-4) var(--s-6) var(--s-6);
    margin-block: var(--s-8) var(--s-12);
}

.pruefstand[data-state="draft"] { border-left-color: var(--state-draft); }

.pruefstand__label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-4);
}

.pruefstand__rail {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
}

.stop {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    padding-top: var(--s-4);
    margin-bottom: 0;
}

/* The rail itself: a hairline through the row of stops. */
.stop::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--rule-strong);
}
.stop:first-child::before { left: 5px; }
.stop:last-child::before  { right: calc(100% - 5px); }

/* The marker. Hollow for passed stages, filled for where you are. */
.stop::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    border: 1px solid var(--rule-strong);
    background: var(--paper-raised);
}
.stop[aria-current="true"]::after {
    background: var(--ink);
    border-color: var(--ink);
}
.pruefstand[data-state="draft"] .stop[aria-current="true"]::after {
    background: var(--state-draft);
    border-color: var(--state-draft);
}

.stop__version {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}

.stop__stage {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-muted);
    line-height: 1.4;
}

.stop a {
    border: 0;
    color: var(--ink);
}
.stop a:hover .stop__version { color: var(--signal); }

.stop[aria-current="true"] .stop__version { color: var(--ink); }
.pruefstand[data-state="draft"] .stop[aria-current="true"] .stop__version { color: var(--state-draft); }

.pruefstand__note {
    font-size: var(--t-sm);
    color: var(--ink-muted);
    margin: 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
    line-height: 1.55;
}
.pruefstand__note a { color: inherit; border-bottom-color: var(--rule-strong); }
.pruefstand__note a:hover { color: var(--signal); }

.pruefstand__delta {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
}
.pruefstand__delta p:last-child {
    font-size: var(--t-sm);
    color: var(--ink-muted);
    line-height: 1.55;
    margin: 0;
}
.pruefstand__deltalabel {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-2);
}

/* --- Statusboard (home + /essays/) ---------------------------------------- */
/* The index is a status board, not a teaser wall: each analysis shows its
   subject, its test state, and the one sentence it stands on. */

.board {
    margin-block: var(--s-8);
    border-top: 1px solid var(--rule-strong);
}

.board__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--s-2) var(--s-6);
    align-items: baseline;
    padding-block: var(--s-6);
    border-bottom: 1px solid var(--rule);
}

.board__subject {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
}

.board__state {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    white-space: nowrap;
    margin: 0;
    text-align: right;
}

.board__title {
    grid-column: 1 / -1;
    font-size: var(--t-lg);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0;
}
.board__title a { border: 0; }
.board__title a:hover { color: var(--signal); }

.board__quote {
    grid-column: 1 / -1;
    margin: 0;
    padding-left: var(--s-4);
    border-left: 2px solid var(--rule);
    color: var(--ink-muted);
    font-size: var(--t-base);
    line-height: 1.55;
    max-width: var(--col);
}

.board__count {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0;
}

/* --- Home ----------------------------------------------------------------- */

.home-content > h1 {
    font-size: var(--t-3xl);
    letter-spacing: -0.025em;
    margin-top: 0;
    margin-bottom: var(--s-6);
}

/* Home sections: the markdown `---` before each `## Abschnitt` is the
   section rule, drawn across the full viewport; the mono kicker follows
   beneath it. The prose is constrained to the reading column but sits
   left in the page frame, like a report with a wide margin. */
.home-content > hr {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    margin-block: var(--s-16) 0;
}

.home-content > p,
.home-content > blockquote,
.home-content > ul,
.home-content > ol {
    max-width: var(--col);
}

/* Section markers on the home page read as report headings, not article
   titles — the sections are stations, and mono sets them apart from the
   prose without shouting. */
.home-content > h2 {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: var(--s-6);
    margin-bottom: var(--s-6);
}

/* The lede: the first paragraph directly under the opening thesis. */
.home-content > h1 + p {
    font-size: var(--t-lg);
    color: var(--ink-muted);
    line-height: 1.45;
    margin-bottom: var(--s-12);
}

/* --- Essay page furniture ------------------------------------------------- */

.essay-header { margin-bottom: var(--s-8); }

.essay-meta {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: var(--s-4);
}

/* --- Section markers: the seven steps as apparatus ------------------------ */
/* The essay format is invariant — seven steps, always the same seven. The
   heading render hook (layouts/_default/_markup/render-heading.html)
   recognizes the step headings by name and emits a numbered marker, so a
   reader sees the test protocol instead of having to know it. Divider
   grammar: 2px strong rule for the numbered steps, 1px soft rule for every
   other heading in the report.

   The Delta step carries --delta on rule and numeral — the one place where
   signal marks content rather than interaction. The heading TEXT stays ink
   on purpose: the mark identifies the section, it does not colour prose. */

.essay-content h2 {
    border-top: 1px solid var(--rule);
    padding-top: var(--s-3);
}

.essay-content h2.step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--s-4);
    align-items: baseline;
    border-top: 2px solid var(--rule-strong);
}

.step__num {
    font-family: var(--font-mono);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--ink);
}

.essay-content h2.step--signal { border-top-color: var(--delta); }
.step--signal .step__num { color: var(--delta); }

/* The Stammtisch sentence is the one quotable unit in each essay. It is
   matched by heading id (Hugo auto-generates these), so no markup in the
   essay text has to change. */
.essay-content h2[id*="stammtisch"] + p {
    font-size: var(--t-lg);
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -0.01em;
    border-left: 3px solid var(--ink);
    padding-left: var(--s-6);
    margin-block: var(--s-8);
}

/* --- Schnittstellen: the hand-off at the end of an analysis --------------- */

.schnitt {
    margin-top: var(--s-16);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule-strong);
}

.schnitt__title {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0;
    margin-bottom: var(--s-6);
}

.schnitt__list { list-style: none; padding: 0; margin: 0; }

.schnitt__item {
    margin-bottom: var(--s-6);
    padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--rule);
}
.schnitt__item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.schnitt__link {
    font-size: var(--t-lg);
    font-weight: 600;
    letter-spacing: -0.01em;
    border: 0;
    display: inline-block;
    margin-bottom: var(--s-2);
}
.schnitt__link::after {
    content: " \2192";
    color: var(--ink-muted);
}
.schnitt__link:hover::after { color: var(--signal); }

.schnitt__text {
    margin: 0;
    color: var(--ink-muted);
    font-size: var(--t-sm);
    line-height: 1.55;
    font-variation-settings: 'opsz' 10;
}

.changelog {
    margin-top: var(--s-16);
    padding-top: var(--s-6);
    border-top: 1px solid var(--rule);
}
.changelog h2, .changelog h3 {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 0;
    margin-bottom: var(--s-3);
}
.changelog p { font-size: var(--t-sm); color: var(--ink-muted); margin-bottom: 0; }

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

.foot {
    margin-top: var(--s-24);
    border-top: 2px solid var(--rule-strong);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-muted);
}

.foot__inner {
    max-width: calc(var(--col-frame) + 2 * var(--gutter));
    margin-inline: auto;
    padding: var(--s-8) var(--gutter) var(--s-12);
}

.foot__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--s-8) var(--s-6);
    align-items: start;
}

.foot__name {
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--s-2);
}

.foot__tagline {
    font-family: var(--font-body);
    font-size: var(--t-sm);
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    max-width: 24em;
}

.foot__title {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    margin: 0 0 var(--s-3);
}

.foot__list { list-style: none; padding: 0; margin: 0; }
.foot__list li { margin-bottom: var(--s-2); }

.foot a { color: var(--ink-muted); border-bottom: 0; }
.foot a:hover { color: var(--signal); }

.foot__copy {
    margin: var(--s-12) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--rule);
    line-height: 1.7;
}

/* --- Responsive ----------------------------------------------------------- */

@media (min-width: 1000px) {
    article table,
    .essay-content table {
        --breakout: min(var(--col-wide), calc(100vw - 3rem));
        width: var(--breakout);
        max-width: var(--breakout);
        margin-left: calc((100% - var(--breakout)) / 2);
        margin-right: calc((100% - var(--breakout)) / 2);
    }
}

@media (max-width: 640px) {
    :root {
        --t-2xl: 1.625rem;
        --t-3xl: 2.125rem;
        --gutter: 1.125rem;
    }

    .masthead { margin-bottom: var(--s-12); }

    /* The rail goes vertical: horizontal stops get unreadable below ~3rem
       each, and the pair relationship still reads top-to-bottom. */
    .pruefstand { padding-inline: var(--s-4); }
    .pruefstand__rail { display: block; }

    .stop { padding-top: 0; padding-left: var(--s-6); padding-bottom: var(--s-4); }
    .stop:last-child { padding-bottom: 0; }
    .stop::before { top: 5px; bottom: -5px; left: 5px; right: auto; width: 1px; height: auto; }
    .stop:last-child::before { display: none; }
    .stop::after { top: 3px; }

    .board__row { grid-template-columns: 1fr; }
    .board__state { text-align: left; }

    /* Two columns rather than one: the link lists are short, and stacking
       everything makes the footer longer than some pages. */
    .foot__grid { grid-template-columns: 1fr 1fr; }
    .foot__brand { grid-column: 1 / -1; }
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Print ---------------------------------------------------------------- */
/* Essays are long-form evidence; people print them. */

@media print {
    :root {
        --paper: #FFF;
        --paper-raised: #FFF;
        --ink: #000;
        --ink-muted: #444;
        --rule: #CCC;
        --rule-strong: #999;
        --signal: #000;
    }
    body { font-size: 11pt; padding: 0; }
    .masthead__nav, .skip-link, .foot__grid { display: none; }
    .masthead { position: static; }
    article.essay, .home-content, .masthead__inner, .foot__inner {
        max-width: none;
        padding-inline: 0;
    }
    a { border-bottom: 0; }
    table, .pruefstand, .board__row { break-inside: avoid; }
    h1, h2, h3 { break-after: avoid; }
}