:root {
    --base-size: 14px;
    --line-height-ratio: 1.55;
    --unit: 21px;

    --text-body: 1rem;
    --text-small: 0.875rem;
    --text-meta: 0.75rem;
    --text-h3: 1.25rem;
    --text-h2: 1.75rem;
    --text-h1: 2.5rem;
    --text-display: 3.5rem;

    --color-ink: #1a1a1a;
    --color-paper: #fafaf8;
    --color-muted: #999999; /* neutral gray — was accidentally accent-blue, bleeding into every meta/footer/table-header element sitewide */
    --color-rule: #d8d8d2;
    --color-accent: rgb(50, 100, 200);
		--color-success: rgb(53, 141, 132);
    --color-accent-faint: rgba(50, 100, 200, 0.12);

    /* doc-comment color (the // line annotations) is intentionally
       accent-tinted to read as a code comment — its own token now,
       rather than overloading --color-muted, which other elements
       (footer, table headers, post-meta) need to stay neutral gray */
    --color-comment: rgba(50, 100, 200, 0.7);

    /* desaturated syntax palette for the jsdoc/rustdoc signature line,
       matched to the accent's own saturation/lightness (60%/49%) so
       nothing competes harder for attention than the brand color */
    --syntax-keyword: var(--color-accent); /* fn, let */
    --syntax-type: rgb(53, 141, 132); /* return types, struct names */
    --syntax-literal: rgb(178, 111, 52); /* years, string/numeric literals */

    --font-body:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
        "DejaVu Sans Mono", monospace;
    --font-mono:
        ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
        "DejaVu Sans Mono", monospace; /* was referenced sitewide but never defined — fell back to inherited --font-body by coincidence */

    --measure: 36em;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-size: var(--base-size); }
body {
    position: relative;
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--line-height-ratio);
    color: var(--color-ink);
    background: var(--color-paper);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}
h1 {
    font-size: var(--text-h1);
    line-height: calc(var(--unit) * 2);
    margin-top: calc(var(--unit) * 2);
    margin-bottom: var(--unit);
}
h2 {
    font-size: var(--text-h2);
    line-height: calc(var(--unit) * 2);
    margin-top: calc(var(--unit) * 2);
    margin-bottom: var(--unit);
}
h3 {
    font-size: var(--text-h3);
    line-height: var(--unit);
    margin-top: var(--unit);
    margin-bottom: var(--unit);
}
h1.wordmark-title {
    font-size: 2.5rem;
    line-height: calc(var(--unit) * 3);
    font-weight: 300;
    margin-top: calc(var(--unit) * 5);
    margin-bottom: calc(var(--unit) * 2);
}
.page > h1:first-child, .page > h2:first-child, .page > h3:first-child { margin-top: 0; }
p, ul, ol, blockquote, pre, figure, table { margin-top: 0; margin-bottom: var(--unit); }
ul, ol { padding-left: var(--unit); }
li { margin-bottom: 0; }
strong { font-weight: 700; }
em { font-style: italic; }
a { color: var(--color-accent); text-decoration: none; border-bottom: 1.5px solid var(--color-accent); }
a:hover { border-bottom-width: 2.5px; }
.accent-text { color: var(--color-accent); }
.comment { color: var(--color-muted); font-size: var(--text-body); }
.content { margin-left: var(--unit); }
.api > .method { color: var(--color-accent); font-weight: 500; }
.api { color: var(--color-success); padding-bottom: var(--unit); }
small, .meta {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    color: var(--color-muted);
    line-height: var(--unit);
}
blockquote {
    border-left: 2px solid var(--color-accent);
    padding-left: calc(var(--unit) - 2px);
    font-style: italic;
    color: var(--color-muted);
}
blockquote p:last-child { margin-bottom: 0; }
code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-rule);
    padding: 0.1em 0.35em;
    border-radius: 3px;
}
pre {
    font-family: var(--font-mono);
    font-size: var(--text-small);
    line-height: var(--unit);
    background: #1a1a1a;
    color: #f0f0ec;
    padding: var(--unit) var(--unit);
    overflow-x: auto;
    border-radius: 4px;
}
pre code { background: none; padding: 0; font-size: 1em; }
hr { border: none; border-top: 1px solid var(--color-rule); margin: var(--unit) 0; }
figure { margin: 0 0 var(--unit); }
figure img { display: block; width: 100%; height: auto; }
figcaption {
    font-family: var(--font-mono);
    font-size: var(--text-meta);
    line-height: var(--unit);
    color: var(--color-muted);
    margin-top: 0;
}
table { border-collapse: collapse; width: 100%; table-layout: fixed; }
th, td {
    padding: 0 var(--unit) 0 0;
    text-align: left;
    vertical-align: top;
    font-size: var(--text-small);
    line-height: var(--unit);
    box-shadow: 0 1px 0 0 var(--color-rule);
}
th {
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    font-size: var(--text-meta);
}

/* ============================================================
   DOC-BLOCK & SIGNATURE — the jsdoc/rustdoc header conceit
   A two-line // comment, then a fake function signature acting
   as the page's h1 equivalent. Spacing pinned to the unit like
   everything else: each .comment line is exactly --unit tall,
   so this block is indistinguishable from prose rhythm-wise.
   ============================================================ */

.doc-block {
    margin-top: calc(var(--unit) * 2);
    margin-bottom: 0;
}
.doc-block .comment {
    display: block;
    line-height: var(--unit);
}

.sig {
    font-size: var(--text-body);
    font-weight: 600;
    line-height: calc(var(--unit) * 2);
    margin-top: 0;
    margin-bottom: calc(var(--unit) * 2);
}
.sig .kw { color: var(--syntax-keyword); }
.sig .fn { color: var(--color-ink); font-weight: 700; }
.sig .punct { color: var(--color-muted); }
.sig .ret { color: var(--syntax-type); }
.sig .nowrap { white-space: nowrap; } /* keeps "+ Philosopher" together so a narrow viewport can't strand it alone on its own line */

/* section comment headers — "// who", "// what i do" etc. act as h2 */
section > .comment:first-child {
    display: block;
    line-height: var(--unit);
    margin-bottom: var(--unit);
}
section { margin-bottom: calc(var(--unit) * 2); }
.what:not(:first-child) { margin-top: var(--unit); }
.what > .yr { margin-right: 10px; }

/* ============================================================
   PHILOSOPHY — short standalone lines, each its own "comment"
   ============================================================ */

.philosophy-line {
    font-style: italic;
    color: var(--color-ink);
    line-height: var(--unit);
    margin-bottom: var(--unit);
    padding-left: var(--unit);
    border-left: 2px solid var(--color-rule);
}

/* ============================================================
   CONTACT GRID — label/value pairs, label styled like an
   object key (k: v), matching the doc-comment idiom
   ============================================================ */

.contact-grid {
    display: grid;
    gap: var(--unit);
}
.contact-grid > div {
    display: flex;
    gap: var(--unit);
    align-items: flex-end; /* baseline alignment let .k's smaller font-size shift it 1px relative to the link, growing the row past --unit; flex-end aligns bottoms exactly regardless of font metrics */
}
.contact-grid .k {
    font-size: var(--text-small);
    line-height: var(--unit); /* same fix as .stack-line .yr — was missing, inherited the unitless ratio instead of the fixed unit */
    color: var(--color-muted);
    min-width: 5em;
}
.contact-grid .k::after { content: ":"; }

a.plain {
    color: var(--color-ink);
    border-bottom-color: var(--color-rule);
}
a.plain:hover { border-bottom-color: var(--color-ink); }

/* unlike .stack links (decorative overflow inside a taller shared row),
   a.plain inside .contact-grid is the row's only content-bearing child
   in a baseline-aligned flex row, so its own border DOES become the
   row's real height. box-shadow keeps the same visual underline
   without adding to layout, consistent with the table/footer fix. */
.contact-grid a.plain {
    border-bottom: none;
    box-shadow: 0 1px 0 0 var(--color-rule);
}
.contact-grid a.plain:hover {
    box-shadow: 0 1px 0 0 var(--color-ink);
}

footer {
    margin-top: calc(var(--unit) * 2);
    padding-top: var(--unit);
    box-shadow: inset 0 1px 0 0 var(--color-rule); /* rule line that adds zero layout height, same fix as the table rows */
    font-size: var(--text-meta);
    color: var(--color-muted);
    line-height: var(--unit);
}