/* austinwagner.org — the styles shared by more than one page.
 *
 * Page-specific rules stay in that page's own <style> block. What lives here is
 * only what two or more pages need identically: the palette, the reset, the
 * content column, the section heading, and the one panel treatment.
 *
 * The panel in particular is why this file exists. It was defined twice before
 * this file did — once for the dashboard list and once for the work list — and
 * the two near-identical copies are how those sections drifted apart. One
 * definition, used by everything.
 *
 * NOT here: the .page gradient. Each page carries its own, because the index
 * fades to black behind the ASCII forest and an article fades only behind its
 * footer. A shared gradient would have to be overridden by both.
 */

/* The palette lives in tokens.css, which every page on the site links whether
   or not it adopts these components. Imported here so a themed page needs one
   link rather than two, and so the two layers cannot be linked out of order. */
@import url("/assets/tokens.css");

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Only a backstop behind .page, which carries the real gradient. */
html, body { background: #0a0a0a; }

/* THE TYPE SCALE'S ONE DIAL.
 *
 * Until 2026-09-11 nothing set a base size, so every `rem` on the site
 * resolved against the browser default of 16px and the reading text landed at
 * about 18px inside a 1140px column. Too small, reported by the operator
 * looking at it rather than by any check.
 *
 * 112.5% makes 1rem = 18px, so every size declared in rem here, in
 * article.css and in each page's own block moves together: body copy, the
 * section headings, the facts grid, the table headers, the footer. That is
 * the reason to turn one dial instead of editing twenty declarations, which
 * is how a type scale stops being a scale.
 *
 * Px sizes are deliberately NOT swept along: .hero-bird's width, the forest
 * band's height and .container's max-width are layout, and growing the raven
 * because the prose grew would be a different change wearing this one's
 * clothes.
 *
 * `.header h1` is compensated below so the masthead does not move. */
html { font-size: 112.5%; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--gray-800);
    min-width: 1200px;
}

.container { max-width: 1140px; margin: 0 auto; padding: 1rem 2rem 0; }

/* ---- the masthead, shared by the index and every article ----
   Full-bleed so the raven can sit against the left edge; only the text column
   is held to the content width. An article puts its own title in the h1 and a
   back-link in the role line, but the metrics are the same on both, which is
   what makes an article read as the same site rather than a separate one. */
.header {
    padding: 1.5rem 0 0;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.hero-bird {
    width: 200px;
    height: auto;
    flex: none;
    margin-left: -14px;
    /* The keyed WebP has real alpha, so it sits on the page gradient without a
       plate behind it. */
}
/* On an article the raven is the way home, which is what a site mark is for
   everywhere else on the web. The anchor becomes the flex child, so it takes
   the sizing the image had and the image stops applying its own offset twice.
   line-height: 0 removes the descender gap under an inline image, which would
   otherwise shift the whole masthead down by a few pixels on articles only.
   The index does NOT wrap its raven: linking a page to itself is noise. */
a.hero-home {
    display: block;
    flex: none;
    margin-left: -14px;
    line-height: 0;
}
a.hero-home .hero-bird { margin-left: 0; }

.hero-text { flex: 1; max-width: 760px; }
/* Byte-for-byte the index's original rule. A line-height was added here once
   while lifting this block, for an article title long enough to wrap, and it
   silently retightened the homepage's own name as well. A shared rule inherits
   no licence to change the page it was lifted from. */
.header h1 {
    /* 3.2rem x 18px = 57.6px, byte-for-byte the pixel size 3.6rem x 16px
       rendered before the root scale above. The masthead is deliberately the
       one thing the type bump does NOT move: it was already the size the
       operator wanted, and a shared rule inherits no licence to change the
       page it was lifted from -- the note on this rule's line-height, added
       once and silently retightening the homepage name, is the same lesson. */
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--gray-800);
}
.header p.role { color: var(--gray-600); margin-top: 0.4rem; font-size: 1.15rem; }
/* An article's role line is its way home, so the link reads as part of the
   line rather than as a breadcrumb pinned in front of it: no arrow, no chip,
   the underline only on hover. */
.header p.role a {
    color: var(--primary-dark);
    text-decoration: none;
    border-bottom: 1px solid var(--gray-400);
    padding-bottom: 1px;
    transition: color 0.2s, border-color 0.2s;
}
.header p.role a:hover { color: var(--primary); border-bottom-color: var(--primary); }

h2.section {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gray-800);
    margin: 0 0 1rem;
}
h2.section.light { color: #fff; }
h2.section + * { margin-top: 0; }

.block { margin-bottom: 2.25rem; }

/* One panel style, used by every section on every page. A white rule across the
   top, and a fill that fades to fully transparent at the bottom so the page
   gradient comes through. Square corners. */
.panel {
    border-top: 1px solid rgba(255, 255, 255, 0.85);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.88) 0%,
        rgba(255, 255, 255, 0.68) 40%,
        rgba(255, 255, 255, 0.45) 72%,
        rgba(255, 255, 255, 0.26) 100%
    );
    padding: 0.95rem 1.75rem 1.05rem;
}

.badge {
    display: inline-block;
    background: var(--primary-light);
    color: var(--primary-dark);
    padding: 0.18rem 0.5rem;
    font-size: 0.88rem;
    margin-top: 0.7rem;
}

/* The bordered-button treatment, used by the index's profile links and by an
   article's back-link. */
.chip {
    display: inline-block;
    color: var(--primary-dark);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--gray-200);
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    transition: background 0.2s, border-color 0.2s;
}
.chip:hover { background: #fff; border-color: var(--primary); }

/* Top padding is deliberately NOT set here. The index wants its footer tight
   under the forest caption and an article wants air above it, so that one
   property belongs to the page layer. Writing the `padding` shorthand here
   would set padding-top to 0 and force article.css to override it -- the same
   fact stated in two files, which is the shape that drifts. */
footer {
    text-align: center;
    color: #6f6f6f;
    font-size: 0.8rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2.5rem;
}
footer a { color: #8b9aa8; }