/*
 * base.css — Nous · Lab
 * Layer 3 tokens, universal reset, typographic foundation
 *
 * Baseline rhythm: --baseline = 24px
 * Text role line-heights (anchored to baseline multiples):
 *   body         17px / 28px  — baseline + 4px shim
 *   heading      26px / 28px  — baseline + 4px
 *   display      38px / 40px  — baseline × 1 + 16px
 *   smcp / key   13–12px / 24px — 1 × baseline
 *   footnote     14px / 24px  — 1 × baseline
 *   marginalia   14px / 24px  — 1 × baseline
 */

:root {
    /* — Lab paper grounds — */
    --lab-paper:        #fbf9f2;   /* working surface, barely-warm near-white */
    --lab-paper-deep:   #f3f0e4;   /* panel ground */
    --lab-paper-stamp:  #e8e3d1;   /* marginalia rail ground */

    /* — Ink scale (iron-gall, brown-shifted) — */
    --ink:        #1c1812;
    --ink-soft:   #443d33;
    --ink-mute:   #605947;
    --hairline:   rgba(28, 24, 18, 0.14);
    --line:       #d4cab2;
    --line-soft:  #e2dac4;

    /* — Editorial marks — */
    --warm-mark:        #7a2f1f;   /* sienna */
    --warm-mark-soft:   #9a4530;
    --cool-mark:        #1f3a5a;   /* antiquarian blue */
    --cool-mark-soft:   #355a82;
    --brass:            #a8842c;   /* leader lines / strokes only */
    --brass-text:       #6e5928;   /* type-safe brass — rare */

    /* — Type — */
    --serif: 'EB Garamond', 'Cardo', Georgia, serif;

    /* — Baseline rhythm (locked at Layer 5) — */
    --baseline: 24px;

    /* — Pragmatic spacing scale — */
    --sp-1:  4px;
    --sp-2:  8px;
    --sp-3:  12px;
    --sp-4:  16px;
    --sp-5:  20px;
    --sp-6:  24px;
    --sp-7:  32px;
    --sp-8:  40px;
    --sp-9:  48px;

    /* — Layout — */
    --sidebar-w:      220px;
    --marginalia-w:   200px;
    --topstrip-h:     28px;
    --bottomstrip-h:  26px;
}

/* ── Universal box model ─────────────────────────────────────────────── */

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

/* ── Body shell (CSS grid) ───────────────────────────────────────────── */

body {
    font: 500 17px/28px var(--serif);
    font-feature-settings: "onum", "kern", "liga";
    background: var(--lab-paper);
    color: var(--ink);
    height: 100dvh;
    overflow: hidden;
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topstrip-h) 1fr var(--bottomstrip-h);
    grid-template-areas:
        "sidebar topstrip"
        "sidebar main"
        "sidebar bottomstrip";
}

/* ── Type utility classes ────────────────────────────────────────────── */

/* Small caps — navigation, strip text, section labels */
.smcp {
    font-variant: small-caps;
    letter-spacing: 0.14em;
    font-size: 13px;
    font-weight: 600;
    line-height: 24px;
}

/* Marginalia key — tighter size, muted colour */
.smcp-key {
    font-size: 12px;
    letter-spacing: 0.14em;
    font-weight: 600;
    color: var(--ink-mute);
    line-height: 24px;
}

/* Tabular / lining numerics */
.tnum {
    font-variant-numeric: tabular-nums lining-nums;
}

/* Document heading — 26px / 28px */
.heading {
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: var(--sp-4);
}

/* Display heading — 38px / 40px */
.heading-display {
    font-size: 38px;
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 40px;
}

/* Section marker — § prefix on h2.section */
h2.section::before {
    content: '§ ';
    color: var(--warm-mark);
}

/* Footnote / marginalia text — 14px / 24px */
.footnote {
    font-size: 14px;
    line-height: 24px;
}

.footnote sup {
    color: var(--warm-mark);
}

/* Italic emphasis (maintains 500 weight per ink-density spec) */
.italic {
    font-style: italic;
    font-weight: 500;
}