/* lucida.css — V1 charte (pandoc-aligned, jr palette discipline)
 *
 * Source typography aligned to the pandoc benchmark used on the
 * BOPP dogfood (sober Engineering-Data look). The lucida identity
 * survives in the variable system + the structural classes
 * (.lucida-nav, .door-cards, .door-card) which pandoc does not own.
 *
 * Two palettes coexist on this stylesheet:
 *
 *   - Slides palette (--ink / --paper / --accent / --rule, frozen by
 *     tests/zeta_canari_slides.rs as jr §I red-on-cream identity).
 *     Inherited by the slides surface (templates/slides.html); also
 *     paints the article body/background here because the values
 *     happen to read as a sober off-white-on-near-black.
 *
 *   - Article chromatic palette (--steel-blue / --brick-red /
 *     --slate-grey / --fine-grey) — used for headings, links, code,
 *     hairlines, and structural panels. This is the BOPP dogfood
 *     pandoc port (specs/audit-bopp-2026-04-30.md).
 */

:root {
    /* Slides identity — frozen tokens (jr §I). The ζ(s)-canari parity
       gate (tests/zeta_canari_slides.rs) requires these exact values
       to appear in this file. */
    --ink:    #1a1a1a;
    --paper:  #fafaf7;
    --accent: #b8332b;
    --rule:   #d6d2c8;

    /* Article chromatic palette — pandoc benchmark port. */
    --steel-blue:   #1f3a5f;   /* heading + link accent */
    --brick-red:    #a83232;   /* link hover + inline code text */
    --slate-grey:   #4a5566;   /* secondary text */
    --light-grey:   #cccccc;
    --fine-grey:    #e0e0e0;   /* hairlines, code/table borders */

    /* Modular scale — pandoc-style flatter ratio. */
    --base-size:    1rem;       /* 16px nominal */
}

* { box-sizing: border-box; }

html { font-size: 16px; }
body {
    margin: 2.4rem auto 4rem;
    padding: 0 1.4rem;
    max-width: 860px;
    background: #ffffff;
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    font-size: var(--base-size);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* article wrapper from the projector — sized via body, no double max-width. */
article {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ── Headings — pandoc tone (steel-blue, slate-grey for h3/h4) ──── */
h1, h2, h3, h4, h5, h6 {
    color: var(--steel-blue);
    font-weight: 600;
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
}
h1 { font-size: 1.9rem;  border-bottom: 3px solid var(--steel-blue); padding-bottom: 0.4rem; }
h2 { font-size: 1.4rem;  border-bottom: 1px solid var(--fine-grey); padding-bottom: 0.25rem; }
h3 { font-size: 1.15rem; color: var(--slate-grey); }
h4 { font-size: 1.0rem;  color: var(--slate-grey); font-style: italic; }
h5 { font-size: 0.95rem; color: var(--slate-grey); }
h6 { font-size: 0.9rem;  color: var(--slate-grey); }

/* The frontmatter title gets the same treatment as a body H1. */
h1.lucida-title { margin-top: 0; }

/* ── Body text ─────────────────────────────────────────────────── */
p, ul, ol, blockquote, pre, table {
    margin: 0 0 1rem;
}

p.lucida-author {
    color: var(--slate-grey);
    font-style: italic;
    margin-top: -0.5rem;
}

a {
    color: var(--steel-blue);
    text-decoration: none;
    border-bottom: 1px dotted var(--steel-blue);
}
a:hover {
    color: var(--brick-red);
    border-bottom-color: var(--brick-red);
}

/* ── Code (inline + block) ─────────────────────────────────────── */
code {
    font-family: "SF Mono", Menlo, Monaco, "Courier New", monospace;
    font-size: 0.92em;
    color: var(--brick-red);
    background: var(--paper);
    border: 1px solid var(--fine-grey);
    border-radius: 3px;
    padding: 0.05em 0.35em;
}
pre {
    background: var(--paper);
    border: 1px solid var(--fine-grey);
    border-left: 3px solid var(--steel-blue);
    border-radius: 4px;
    padding: 0.8rem 1rem;
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.45;
}
pre code {
    border: none;
    background: transparent;
    padding: 0;
    color: var(--ink);
}

/* ── Blockquote ────────────────────────────────────────────────── */
blockquote {
    border-left: 3px solid var(--brick-red);
    background: var(--paper);
    padding: 0.6rem 1rem;
    margin: 1.2em 0;
    color: var(--slate-grey);
    font-style: italic;
}

/* ── Horizontal rule ───────────────────────────────────────────── */
hr {
    border: none;
    border-top: 1px solid var(--fine-grey);
    margin: 2.4em 0;
}

/* ── Tables ────────────────────────────────────────────────────── */
/*
 * Auto-layout (the browser default) lets columns breathe according
 * to their natural content width. The projector still emits a
 * <colgroup> with width hints — but those hints take effect ONLY
 * when a page opts in to `table-layout: fixed` via its own override.
 * Imposing `fixed` globally collapsed 8-column citation tables into
 * 12.5% slivers with letter-by-letter wrapping (BOPP dogfood, 2026-04-30).
 */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1.2em 0;
    font-size: 0.92em;
}
th {
    background: var(--paper);
    color: var(--steel-blue);
    text-align: left;
    border-bottom: 2px solid var(--steel-blue);
    padding: 0.5rem 0.75rem;
    font-weight: 600;
}
td {
    border-bottom: 1px solid var(--fine-grey);
    padding: 0.45rem 0.75rem;
    vertical-align: top;
}
tr:hover td { background: var(--paper); }

/* ── Images ────────────────────────────────────────────────────── */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.2em auto;
    border: 1px solid var(--fine-grey);
    border-radius: 4px;
    background: #ffffff;
    padding: 0.4rem;
}

/* MathJax display equations sit on their own line. */
.math-display {
    overflow-x: auto;
    margin: 1.5rem 0;
}
mjx-container[display="true"] {
    margin: 1em 0 !important;
}

/* ── lucida-nav — top bar of links injected from frontmatter. ──── */
.lucida-nav {
    max-width: 860px;
    margin: 1.25rem auto 0;
    padding: 0.5rem 0;
    color: var(--slate-grey);
    font-size: 0.92rem;
    border-bottom: 1px solid var(--fine-grey);
}
.lucida-nav a {
    color: var(--steel-blue);
    text-decoration: none;
    border-bottom: none;
    margin-right: 0.4rem;
}
.lucida-nav a:hover { text-decoration: underline; border-bottom: none; }
.lucida-nav-sep {
    color: var(--fine-grey);
    margin-right: 0.4rem;
}

/* ── door-cards — three-column grid of audience entry-points. ──── */
section.door-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
    margin: 2rem 0;
}
a.door-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--fine-grey);
    border-left: 4px solid var(--steel-blue);
    border-radius: 4px;
    padding: 1rem 1.1rem 1.2rem;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
a.door-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid var(--fine-grey);
    border-left: 4px solid var(--steel-blue);
}
a.door-card h3 {
    color: var(--ink);
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    line-height: 1.25;
    border: none;
    padding: 0;
}
a.door-card p {
    color: var(--slate-grey);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 850px) {
    section.door-cards { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    body { margin: 1.2rem auto 2rem; padding: 0 0.9rem; }
    .lucida-nav { padding: 0.5rem 0.9rem; }
}