:root {
    --bg:        #FFFFFF;
    --bg-subtle: #F6F8FA;
    --border:    #D1D9E0;
    --ink:       #1F2328;
    --grey:      #59636E;
    --accent:      #0969DA;
    --accent-deep: #0550AE;
    --ring:      rgba(9,105,218,.18);
    --sans: 'Geist', -apple-system, 'SF Pro Text', system-ui, sans-serif;
    --serif: 'STIX Two Text', Georgia, 'Times New Roman', serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(180,83,9,.12); }
a { color: var(--accent-deep); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

main { max-width: 44rem; margin: 0 auto; padding: 0 1.5rem; }
main.wide { max-width: 82rem; }

.masthead {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding: 1.4rem 0 1.1rem;
    border-bottom: 1px solid var(--border);
}
.wordmark {
    font-size: var(--font-callout); font-weight: 500; letter-spacing: -.01em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.wordmark .block {
    display: inline-block; width: .42em; height: .72em;
    background: var(--accent); margin-left: .1em;
}
.masthead nav { display: flex; gap: 1.4rem; }
.masthead nav a {
    font-size: var(--font-footnote); font-weight: 500;
    color: var(--grey); text-decoration: none;
}
.masthead nav a:hover { color: var(--accent); }
.masthead nav a.here { color: var(--ink); }

h1 {
    margin: 0;
    font-weight: 700;
    font-size: var(--font-large-title);
    line-height: 1.15; letter-spacing: -.025em;
}