/* austinwagner.org — the article layer.
 *
 * Everything an article page needs beyond site.css, declared once. Extracted
 * when the second article was written and before a line of it was copied,
 * because a copied treatment is invisible until two pages sit side by side and
 * by then both have drifted. The index's own .panel had already been forked
 * once for exactly that reason.
 *
 * site.css is still required and is linked separately: this file styles prose,
 * tables and the source block, and site.css carries the palette, the masthead,
 * the column and the panel. Two links, not an @import, because an article needs
 * both layers and neither is a subset of the other.
 *
 * Sizes here deliberately match the index's card copy — .prose p is the
 * 1.12rem / 1.6 that .work p and .dashboards p use — so a paragraph is the
 * same paragraph wherever it appears.
 */

/* The article title, one size down from the site name.
 *
 * site.css sets `.header h1` at 3.2rem for the index, where the h1 is a
 * two-word name and 57.6px is the masthead the operator chose. On an article
 * the same element holds a full sentence ("How many compartments fit in one
 * model") and at that size it reads as a banner rather than a title. The
 * operator said so, looking at it.
 *
 * Overridden HERE and not in site.css, for two reasons: the index masthead
 * must not move, and site.css is hash-pinned by the guard and mirrored into
 * mcp-proxy, so a change there costs two re-pins for something only articles
 * want. `.header h1` is (0,1,1); this is (0,2,1) and wins on specificity
 * rather than on source order, so it survives either file being reordered.
 * A tighter line-height because a wrapped title at 3.2rem was carrying the
 * index's looser leading, which is sized for one line. */
.page .header h1 {
    font-size: 2.3rem;
    line-height: 1.15;
}

/* One continuous ground, same construction as the index: a block element
   carrying the gradient, everything above it transparent.
 *
 * LIGHT THE WHOLE WAY DOWN, which it was not at first. The original faded to
 * #0a0a0a at the bottom, copying the index -- but the index goes dark to hand
 * off to the ASCII forest, and an article has no forest. What it has there is
 * the Record block and the footer, both of which then had to be restyled in
 * light-on-dark to survive the ground they had been given.
 *
 * That treatment failed on the page, not in principle: a gradient stop is a
 * percentage of the ELEMENT, so where the dark end lands depends on how long
 * the article is. On a long one the Record block sits well above the fade and
 * its #c9ced6 prose rendered on near-white. Illegible, and illegible in a way
 * that gets worse the more an article has to say.
 *
 * So the dark end is gone rather than the stops retuned. Retuning would make
 * legibility a function of word count and leave the next article to rediscover
 * it. */
.page {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--gray-100) 0%,
        var(--gray-100) 62%,
        #eef0f3 100%
    );
    min-height: 100vh;
}

/* .standfirst and .dateline were defined here and are gone: no page on the
   site carries either class. They were the first draft's grey intro lines,
   replaced by .result -- a black one-sentence outcome -- when the article
   format was cut to a 30-second read, and the rules outlived the markup. Left
   in place they are what the next article gets styled against by whoever greps
   this file for something to use. */

/* The 30-second read. A reader deciding whether to keep going needs the
   outcome, the scale and the stack before any prose, so these sit above it as
   a scannable grid rather than as sentences they have to extract them from. */
.facts {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 0.55rem 1.5rem;
    margin-top: 1.1rem;
}
.facts dt {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
    padding-top: 0.2rem;
}
.facts dd { font-size: 1.08rem; line-height: 1.5; color: #000; }
.facts dd strong { font-weight: 600; }

.prose h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #000;
    margin-bottom: 0.5rem;
}
.prose h3 + p { margin-top: 0; }
.prose p {
    font-size: 1.12rem;
    line-height: 1.6;
    color: #000;
    margin-top: 0.9rem;
}
.prose p strong { color: #000; font-weight: 600; }
.prose ul { margin: 0.9rem 0 0 1.3rem; }
.prose li {
    font-size: 1.12rem;
    line-height: 1.6;
    color: #000;
    margin-bottom: 0.5rem;
}

/* The headline result, stated before anything explains it.
 *
 * WRITTEN `p.result` AND PLACED AFTER `.prose p` ON PURPOSE, both halves.
 * As a bare `.result` it was (0,1,0) and sat above `.prose p` at (0,1,1), so
 * the instant anyone added `prose` to the panel holding it -- the natural
 * thing to do, since it IS prose -- the headline would have dropped from
 * 1.35rem to 1.12rem with nothing failing. `p.result` ties `.prose p` at
 * (0,1,1) and wins on source order, so it now survives that edit.
 *
 * Not a bug that had fired: audited 2026-09-11 across all eight articles and
 * every `.result` sits in a plain `.panel`, so it was rendering correctly.
 * It was one sensible edit away from being wrong, silently.
 *
 * Found because mcps-04 hit the fired version of exactly this in the corvis
 * dashboard when the 18px base landed: their `.panel p` (0,1,1) had always
 * outranked a bare `.updated` (0,1,0), so the small print had never once been
 * small, and at a 16px base the wrongness looked plausible enough to survive.
 * Their point is the one worth keeping: a rule can be correct in isolation
 * and lose in the cascade, and reading the file cannot tell you which won. */
p.result {
    font-size: 1.35rem;
    line-height: 1.45;
    color: #000;
    font-weight: 600;
}

/* Tables carry the evidence, so they take the panel's own palette rather than
   a borrowed one. Wide content scrolls inside its own box so the page body
   never scrolls sideways. */
.tablewrap { overflow-x: auto; margin-top: 1.1rem; }
table {
    border-collapse: collapse;
    font-size: 1.02rem;
    min-width: 100%;
}
th, td {
    text-align: left;
    padding: 0.5rem 1.1rem 0.5rem 0;
    border-bottom: 1px solid var(--gray-200);
    color: #000;
    white-space: nowrap;
}
th {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-600);
    border-bottom: 1px solid var(--gray-400);
}
td.num { font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }

code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92em;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--gray-200);
    padding: 0.08em 0.34em;
}

/* A code excerpt copied from a public repository, never paraphrased, with its
   path and line range in the caption beneath so a reader can diff it against
   the file. The box takes the same translucent ground as inline code, so the
   two read as one kind of thing at two sizes. */
pre {
    margin-top: 1.1rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 255, 255, 0.66);
    border: 1px solid var(--gray-200);
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.92rem;
    line-height: 1.5;
    color: #000;
}
pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}
.excerpt-src {
    font-size: 0.86rem;
    color: var(--gray-600);
    margin-top: 0.45rem;
}
.excerpt-src a { color: var(--primary-dark); }

.callout {
    border-left: 3px solid var(--primary);
    padding-left: 1.1rem;
    margin-top: 1.1rem;
}
.callout p { margin-top: 0; }

/* The Record block is end matter, not a different kind of writing, so it takes
   the same black prose as the body and is set off by a rule rather than by a
   ground of its own. Every colour it used to declare -- #c9ced6 text, #fff
   headings and strongs, a translucent-white panel, inverted code -- existed
   only to survive the dark gradient end that is now gone, and each one was a
   second definition of something .prose already said. */
.sources {
    border-top: 1px solid var(--gray-400);
    padding-top: 2rem;
    margin-top: 1.25rem;
}
/* Type one step down from the body: this is the provenance record, which a
   reader consults rather than reads through. Size is the only thing separating
   it, because size does not depend on what is behind it. */
.sources .prose p { font-size: 1.02rem; }
/* The Sources list: one line per thing a reader can open, a repository file
   at a pinned commit, a paper, a captured page. Same step-down as the Record
   prose, and links in the site's dark primary so they read on light ground. */
.sources .prose li { font-size: 1.02rem; line-height: 1.5; margin-bottom: 0.4rem; }
.sources .prose a { color: var(--primary-dark); }

/* site.css opens the footer tight against the index's forest caption; an
   article needs air above it instead. Colour is set here for the same reason
   the padding is -- site.css's #6f6f6f body and #8b9aa8 link are pitched for
   the index's black footer strip, and an article's footer now sits on light
   ground, where both are far too faint to read. */
footer { padding-top: 2.5rem; color: var(--gray-600); }
footer a { color: var(--primary-dark); }