/* ==========================================================================
   tahahusain.net
   Direction C2: high-contrast index. Switzer display, IBM Plex Mono data,
   rose on bone. Shape rule: interactive pills are fully round, everything
   else is square.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset)
   Switzer: Indian Type Foundry, free for commercial use via Fontshare.
   IBM Plex Mono: SIL Open Font License 1.1.
   -------------------------------------------------------------------------- */
@font-face { font-family: Switzer; src: url(/fonts/switzer-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(/fonts/switzer-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(/fonts/switzer-600.woff2) format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Switzer; src: url(/fonts/switzer-800.woff2) format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/plex-mono-400.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/plex-mono-500.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* --------------------------------------------------------------------------
   2. Tokens
   Declared once. The dark palette is redefined in exactly two places below:
   a prefers-color-scheme block for the un-stamped default, and a
   [data-theme="dark"] block so the manual toggle wins in both directions.
   -------------------------------------------------------------------------- */
:root {
    --paper:        #f7f5f0;
    --ink:          #0a0a0a;
    --body:         #403d38;
    --muted:        #66625b;
    --line:         #dcd8d0;
    --accent:       #be123c;
    --accent-soft:  #f7e7ec;
    --code-bg:      #efece5;
    --selection:    rgb(190 18 60 / .16);

    --f-sans:  Switzer, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --w-page:  1100px;
    --w-prose: 68ch;
    /* Resume body text. 68ch is a prose measure and left the profile wrapping at
       58% of the container while the timeline bullets below ran the full 114
       characters. 92ch (~820px) balances the two. */
    --w-read:  92ch;
    --gutter:  clamp(20px, 5vw, 40px);

    /* Built-in CSS easings are too weak to read as intentional. */
    --ease-out: cubic-bezier(.23, 1, .32, 1);
    --ease:     cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper:       #0a0a0a;
        --ink:         #ededed;
        --body:        #c7c2bb;
        --muted:       #9d978f;
        --line:        #262626;
        --accent:      #fb7185;
        --accent-soft: #2c1119;
        --code-bg:     #141414;
        --selection:   rgb(251 113 133 / .22);
    }
}

:root[data-theme="dark"] {
    --paper:       #0a0a0a;
    --ink:         #ededed;
    --body:        #c7c2bb;
    --muted:       #9d978f;
    --line:        #262626;
    --accent:      #fb7185;
    --accent-soft: #2c1119;
    --code-bg:     #141414;
    --selection:   rgb(251 113 133 / .22);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-sans);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--selection); }

img, svg, iframe { max-width: 100%; }
img { height: auto; }

a { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.container {
    width: 100%;
    max-width: var(--w-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

main { flex: 1 0 auto; padding-block: 0 88px; }

.prose-col { max-width: var(--w-prose); }

/* Counterpart to .no-print: shown only by the print block in section 19. */
.print-only { display: none; }

/* --------------------------------------------------------------------------
   4. Navigation
   -------------------------------------------------------------------------- */
.site-nav {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
}

.nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    height: 64px;
}

.nav-logo {
    font-family: var(--f-sans);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -.03em;
    color: var(--ink);
    text-decoration: none;
}

.nav-right { display: flex; align-items: center; gap: 22px; }

.nav-links {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links a {
    display: block;
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding-block: 2px;
    border-bottom: 1.5px solid transparent;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); border-bottom-color: var(--accent); }

.theme-toggle {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.theme-toggle:hover { color: var(--ink); border-color: var(--ink); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display: none; }
    :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
}

/* --------------------------------------------------------------------------
   5. Home hero
   -------------------------------------------------------------------------- */
.hero { padding-block: 64px 56px; }

.hero-name {
    font-size: clamp(48px, 11vw, 104px);
    font-weight: 800;
    letter-spacing: -.042em;
    line-height: .9;
    margin: 0;
}

.hero-name span { display: block; }
.hero-name span + span { margin-left: .42em; }

.hero-meta {
    font-family: var(--f-mono);
    font-size: 12.5px;
    letter-spacing: .02em;
    color: var(--muted);
    margin: 30px 0 8px;
}

.hero-meta strong { color: var(--accent); font-weight: 500; }

.hero-bio {
    max-width: 56ch;
    margin: 0 0 24px;
    color: var(--body);
    font-size: 15.5px;
    line-height: 1.68;
    white-space: pre-line;
}

/* --------------------------------------------------------------------------
   6. Pills (the one rounded shape in the system)
   -------------------------------------------------------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    /* Buttons do not inherit type styles, and .pill is used on one. */
    font-family: inherit;
    cursor: pointer;
}

.pill:hover { border-color: var(--ink); }
.pill svg { width: 15px; height: 15px; flex: none; }

.pill-icon { padding: 9px; }
.pill-icon svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   7. Sections and section headings
   The heavy rule is the signature of this direction. Row hairlines are light.
   -------------------------------------------------------------------------- */
.section {
    padding-block: 40px;
    border-top: 1.5px solid var(--ink);
}

.section-title {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 22px;
}

.page-title {
    font-size: clamp(34px, 6vw, 58px);
    font-weight: 800;
    letter-spacing: -.038em;
    line-height: 1;
    margin: 56px 0 28px;
    text-wrap: balance;
}

/* Pill row acting as the actions bar directly under a page title. */
.page-actions { margin-bottom: 34px; }

.view-all {
    display: inline-block;
    margin-top: 22px;
    color: var(--accent);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.view-all:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --------------------------------------------------------------------------
   8. Post rows
   -------------------------------------------------------------------------- */
.post-list { margin: 0; padding: 0; list-style: none; }

.post-list-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: baseline;
    padding: 13px 2px;
    text-decoration: none;
    color: inherit;
}

.post-list-item + .post-list-item .post-list-link { border-top: 1px solid var(--line); }

.post-list-title {
    color: var(--ink);
    font-size: 15.5px;
    font-weight: 500;
    letter-spacing: -.011em;
    line-height: 1.45;
}

.post-list-date {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
    white-space: nowrap;
}

.post-list-external { color: var(--accent); }

/* --------------------------------------------------------------------------
   9. Work index
   -------------------------------------------------------------------------- */
.work-index { margin: 0; padding: 0; list-style: none; }

.work-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 18px 2px;
}

.work-item + .work-item .work-row { border-top: 1px solid var(--line); }

.work-num {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--accent);
    padding-top: 5px;
}

.work-name {
    font-size: 17.5px;
    font-weight: 600;
    letter-spacing: -.024em;
    color: var(--ink);
}

.work-role { color: var(--body); font-size: 14px; margin-top: 1px; }

.work-desc {
    max-width: 62ch;
    margin: 9px 0 0;
    color: var(--body);
    font-size: 14px;
    line-height: 1.6;
}

.work-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    padding-top: 5px;
}

.work-link:hover { color: var(--accent); }

.stack {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 12px;
}

.stack-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--muted);
}

.tech-icon { width: 13px; height: 13px; flex: none; opacity: .85; }

/* --------------------------------------------------------------------------
   10. Single post
   -------------------------------------------------------------------------- */
.post-header { margin: 56px 0 36px; }

.post-title {
    font-size: clamp(29px, 4.6vw, 44px);
    font-weight: 700;
    letter-spacing: -.033em;
    line-height: 1.08;
    margin: 0 0 16px;
    text-wrap: balance;
}

.post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
}

.post-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }

.post-tag {
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    text-decoration: none;
}

.post-tag:hover { filter: brightness(.96); }

.post-footer { margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line); }

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--body);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.back-link:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   11. Prose
   -------------------------------------------------------------------------- */
.post-body { font-size: 16.5px; line-height: 1.78; }

.post-body > :first-child { margin-top: 0; }

.post-body h2,
.post-body h3,
.post-body h4 {
    letter-spacing: -.024em;
    line-height: 1.25;
    margin: 2.2em 0 .6em;
    text-wrap: balance;
}

.post-body h2 { font-size: 25px; font-weight: 600; }
.post-body h3 { font-size: 20px; font-weight: 600; }
.post-body h4 { font-size: 17px; font-weight: 600; }

.post-body p { margin: 0 0 1.25em; }

.post-body a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.post-body ul, .post-body ol { margin: 0 0 1.25em; padding-left: 1.35em; }
.post-body li { margin-bottom: .4em; }

.post-body blockquote {
    margin: 1.6em 0;
    padding-left: 20px;
    border-left: 2px solid var(--accent);
    color: var(--body);
}

.post-body hr { margin: 2.4em 0; border: 0; border-top: 1px solid var(--line); }

.post-body img { display: block; margin: 1.8em 0; border: 1px solid var(--line); }

.post-body iframe { display: block; margin: 1.8em 0; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 1px solid var(--line); }

.post-body table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: 14.5px; }
.post-body th, .post-body td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.post-body th { font-weight: 600; }

/* wide content scrolls inside itself, never the page */
.table-scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   12. Code
   -------------------------------------------------------------------------- */
.post-body code {
    font-family: var(--f-mono);
    font-size: .875em;
    background: var(--code-bg);
    padding: .15em .4em;
}

.post-body pre {
    position: relative;
    margin: 1.6em 0;
    padding: 18px 20px;
    background: var(--code-bg);
    border: 1px solid var(--line);
    overflow-x: auto;
    font-size: 13.5px;
    line-height: 1.7;
}

.post-body pre code {
    background: none;
    padding: 0;
    font-size: inherit;
}

.copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--muted);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: .04em;
    cursor: pointer;
    opacity: 0;
}

.post-body pre:hover .copy-btn,
.copy-btn:focus-visible { opacity: 1; }
.copy-btn:hover { color: var(--ink); border-color: var(--ink); }

/* Chroma syntax classes, driven by the theme tokens so dark comes free.
   ponytail: 14 rules instead of two generated ~200-line stylesheets. Covers
   Ruby, JS/JSX, CSS, shell. Run `hugo gen chromastyles` only if a post shows
   up in a language these render flat. */
.post-body .c, .post-body .c1, .post-body .cm, .post-body .cs { color: var(--muted); font-style: italic; }
.post-body .k, .post-body .kd, .post-body .kn, .post-body .kr, .post-body .kc, .post-body .kt, .post-body .kp { color: var(--accent); font-weight: 500; }
.post-body .o, .post-body .ow { color: var(--accent); }
.post-body .s, .post-body .s1, .post-body .s2, .post-body .sb, .post-body .sd, .post-body .se, .post-body .si, .post-body .sr, .post-body .ss { color: #0f766e; }
.post-body .m, .post-body .mi, .post-body .mf, .post-body .mh { color: #0f766e; }
.post-body .nf, .post-body .nd { color: var(--ink); font-weight: 500; }
.post-body .nc, .post-body .nn, .post-body .no { color: var(--ink); font-weight: 500; }
.post-body .nt { color: var(--accent); }
.post-body .na, .post-body .nv, .post-body .vi { color: var(--muted); }
.post-body .nb, .post-body .bp { color: var(--ink); }
.post-body .p, .post-body .punctuation { color: var(--muted); }
.post-body .err { color: var(--accent); }
.post-body .gd { color: var(--accent); }
.post-body .gi { color: #0f766e; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .post-body .s,
    :root:not([data-theme="light"]) .post-body .s1,
    :root:not([data-theme="light"]) .post-body .s2,
    :root:not([data-theme="light"]) .post-body .sb,
    :root:not([data-theme="light"]) .post-body .sd,
    :root:not([data-theme="light"]) .post-body .se,
    :root:not([data-theme="light"]) .post-body .si,
    :root:not([data-theme="light"]) .post-body .sr,
:root:not([data-theme="light"]) .post-body .ss,
    :root:not([data-theme="light"]) .post-body .m,
    :root:not([data-theme="light"]) .post-body .mi,
    :root:not([data-theme="light"]) .post-body .mf,
    :root:not([data-theme="light"]) .post-body .mh,
    :root:not([data-theme="light"]) .post-body .gi { color: #5eead4; }
}

:root[data-theme="dark"] .post-body .s,
:root[data-theme="dark"] .post-body .s1,
:root[data-theme="dark"] .post-body .s2,
:root[data-theme="dark"] .post-body .sb,
:root[data-theme="dark"] .post-body .sd,
:root[data-theme="dark"] .post-body .se,
:root[data-theme="dark"] .post-body .si,
:root[data-theme="dark"] .post-body .sr,
:root[data-theme="dark"] .post-body .ss,
:root[data-theme="dark"] .post-body .m,
:root[data-theme="dark"] .post-body .mi,
:root[data-theme="dark"] .post-body .mf,
:root[data-theme="dark"] .post-body .mh,
:root[data-theme="dark"] .post-body .gi { color: #5eead4; }

/* --------------------------------------------------------------------------
   13. Resume
   -------------------------------------------------------------------------- */
.resume-lede {
    max-width: var(--w-read);
    margin: 0 0 6px;
    color: var(--body);
    font-size: 15.5px;
    line-height: 1.72;
}

.resume-lede + .resume-lede { margin-top: 1em; }

.resume-group { margin-bottom: 30px; }
.resume-group:last-child { margin-bottom: 0; }

.resume-group-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.015em;
    margin: 0 0 10px;
}

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--body);
}

/* timeline */
.timeline { margin: 0; padding: 0; list-style: none; }

.tl-item {
    position: relative;
    padding-left: 26px;
    padding-bottom: 34px;
}

.tl-item:last-child { padding-bottom: 0; }

.tl-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--accent);
}

.tl-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 22px;
    bottom: 4px;
    width: 1px;
    background: var(--line);
}

.tl-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 20px;
}

.tl-role {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.022em;
}

.tl-date {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
    white-space: nowrap;
}

.tl-org { font-size: 15px; color: var(--body); margin-top: 1px; }
.tl-org a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.tl-org a:hover { color: var(--accent); }

.tl-context {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .02em;
    color: var(--muted);
    margin-top: 8px;
}

.tl-points {
    max-width: var(--w-read);
    margin: 12px 0 0;
    padding-left: 1.15em;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--body);
}

.tl-points li { margin-bottom: .35em; }

/* Certifications. Same row grammar as the work index, so the resume reuses a
   pattern the rest of the site already establishes. Prominence comes from
   position, type scale and the accent rail, not from a filled panel. The left
   rail is the date because that encodes something real; an 01/02 counter here
   would just be decoration. */
.cert-list { margin: 0; padding: 0; list-style: none; }

.cert-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: start;
    padding: 18px 2px;
}

.cert-item + .cert-item .cert-row { border-top: 1px solid var(--line); }

.cert-date {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--accent);
    padding-top: 7px;
}

.cert-name {
    font-size: 18.5px;
    font-weight: 600;
    letter-spacing: -.026em;
    line-height: 1.28;
    text-wrap: balance;
}

.cert-issuer {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: var(--body);
    margin-top: 3px;
}

.cert-issuer .tech-icon { opacity: 1; }

.cert-verify {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
    text-decoration: none;
    white-space: nowrap;
    padding-top: 7px;
}

.cert-verify:hover { color: var(--accent); }

/* Older credentials stay in the list but should not compete with current ones:
   muted rail instead of the accent, and a smaller name. The date range already
   tells the reader these are historical, so no extra label. */
.cert-item--past .cert-date { color: var(--muted); }
.cert-item--past .cert-name { font-size: 15.5px; font-weight: 500; letter-spacing: -.018em; }

/* A row can carry several credentials earned from the same issuer over the
   same period; they stack rather than running together as one comma list. */
.cert-name + .cert-name { margin-top: 3px; }

.resume-entry + .resume-entry { margin-top: 26px; }
.resume-entry .chip-row { margin-top: 10px; }
.resume-entry-sub { font-size: 14.5px; color: var(--body); margin-top: 2px; }
.resume-entry .chip-row + .resume-entry-sub { margin-top: 10px; }
.resume-entry-sub a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   14. Tag index
   -------------------------------------------------------------------------- */
.terms-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.terms-list a {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-size: 13.5px;
    text-decoration: none;
}

.terms-list a:hover { border-color: var(--ink); }

.term-count {
    font-family: var(--f-mono);
    font-size: 10.5px;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   15. 404
   -------------------------------------------------------------------------- */
.notfound { padding-block: 90px 60px; }

.notfound-code {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .14em;
    color: var(--accent);
    margin: 0 0 14px;
}

.notfound h1 {
    font-size: clamp(34px, 7vw, 62px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1;
    margin: 0 0 16px;
}

.notfound p { max-width: 46ch; margin: 0 0 26px; color: var(--body); }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--line);
    padding-block: 26px;
}

.footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.footer-copy {
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    color: var(--muted);
}

.footer-socials { display: flex; gap: 16px; }

.footer-socials a { color: var(--muted); display: grid; place-items: center; }
.footer-socials a:hover { color: var(--accent); }
.footer-socials svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   17. Motion
   Transform and opacity only. Hover is gated so it never fires on a tap.
   The theme toggle deliberately has no transition: it is a repeated action,
   and animating it just makes the page feel slower.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .post-list-link,
    .work-row,
    .pill,
    .terms-list a { transition: transform .15s var(--ease-out); }

    .post-list-title,
    .work-name,
    .nav-links a,
    .back-link,
    .work-link,
    .cert-verify,
    .footer-socials a,
    .theme-toggle { transition: color .15s var(--ease-out); }

    .pill,
    .terms-list a,
    .theme-toggle { transition: transform .14s var(--ease-out), color .15s var(--ease-out), border-color .15s var(--ease); }

    .post-list-link:hover,
    .work-row:hover { transform: translateX(3px); }

    .post-list-link:hover .post-list-title,
    .work-row:hover .work-name { color: var(--accent); }

    .pill:active,
    .terms-list a:active,
    .theme-toggle:active,
    .copy-btn:active { transform: scale(.97); }
}

/* Entry stagger on the home page only, once, on first paint. */
@media (prefers-reduced-motion: no-preference) {
    .stagger > * {
        opacity: 0;
        animation: rise .5s var(--ease-out) forwards;
    }
    .stagger > :nth-child(2) { animation-delay:  40ms; }
    .stagger > :nth-child(3) { animation-delay:  80ms; }
    .stagger > :nth-child(4) { animation-delay: 120ms; }
    .stagger > :nth-child(5) { animation-delay: 160ms; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
    .post-list-link:hover,
    .work-row:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   18. Small screens
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    main { padding-bottom: 60px; }

    .hero { padding-block: 44px 40px; }
    .hero-name span + span { margin-left: .28em; }

    .page-title { margin-top: 40px; }

    .nav-right { gap: 14px; }
    .nav-links { gap: 16px; }
    .nav-links a { font-size: 13.5px; }

    .post-list-link {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .work-row {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 12px;
    }
    .work-link { grid-column: 2; padding-top: 0; margin-top: 10px; }

    .tl-head { flex-direction: column; }

    .cert-row { grid-template-columns: 60px minmax(0, 1fr); gap: 12px; }
    .cert-verify { grid-column: 2; padding-top: 0; margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   19. Print (resume)

   This block IS the PDF. The "PDF" button on /resume/ just calls window.print(),
   so the HTML is the single source of truth for content and everything below is
   purely presentation: formal, denser, and deliberately unlike the screen design.

   Rule: restyle, never remove content. Anything hidden here must be screen
   chrome (nav, buttons, hover affordances), never a fact about the resume.
   -------------------------------------------------------------------------- */
@media print {
    @page { margin: 15mm 16mm; }

    .site-nav,
    .site-footer,
    .no-print,
    .copy-btn,
    .theme-toggle { display: none !important; }

    /* The [data-theme] selectors are load-bearing, not belt-and-braces: the
       toggle writes :root[data-theme="dark"], which at (0,1,1) outranks a bare
       :root here no matter that this block comes later. Without them, anyone
       who had switched to dark mode printed #ededed text onto white paper. */
    :root,
    :root[data-theme="dark"],
    :root[data-theme="light"] {
        --paper: #ffffff;
        --ink: #000000;
        --body: #1f1f1f;
        --muted: #3d3d3d;
        --line: #cccccc;
        --accent: #000000;
    }

    /* min-height/flex exist only to pin the footer to the bottom of a short
       screen. Left in place they overflow the last sheet and emit a blank page. */
    body {
        display: block;
        min-height: 0;
        font-size: 10.5pt;
        line-height: 1.3;
    }
    main { padding: 0; flex: none; }
    .container { max-width: none; padding: 0; }
    a { text-decoration: none; color: inherit; }

    /* Screen title is "Resume"; on paper the heading has to be the name. */
    .page-title { display: none; }
    .print-only { display: block; }
    .print-name {
        font-size: 21pt;
        font-weight: 800;
        letter-spacing: -.03em;
        margin: 0 0 5pt;
    }

    /* Mono is a screen affectation; on paper it reads as a code listing. */
    .section-title,
    .tl-context,
    .tl-date,
    .cert-date { font-family: var(--f-sans); }

    /* The accent dot and its connecting rail are timeline chrome, and the org
       underline implies a link the reader cannot follow on paper. */
    .tl-item::before,
    .tl-item::after { display: none; }
    .tl-item { padding-left: 0; }
    .tl-org a { text-decoration: none; }
    .tl-points { list-style: disc; }

    /* Brand logos are decorative; on paper they read as clip art. They are
       <img class="tech-icon"> from a CDN, not inline SVG, so they need their
       own rule -- hiding svg alone leaves them rendering. */
    .tech-icon { display: none !important; }

    /* No break-inside on .section: a section is far larger than the remainder
       of a page, so avoiding breaks inside one bumps the whole thing to a fresh
       sheet and wastes most of the previous one. Breaks are avoided on the
       individual items below instead, which is the granularity that matters. */
    .section { padding-block: 5pt; border-top-width: .5pt; }
    /* Education is a two-line entry; without this its sub-line orphans onto a
       page of its own. Same granularity as .tl-item below. */
    .resume-entry { break-inside: avoid; }
    /* Trailing space after the last section overflows the bottom margin and
       Chrome emits an extra blank sheet for it. */
    .section:last-child { padding-bottom: 0; }
    .section:last-child .resume-entry:last-child { margin-bottom: 0; }
    .section-title { font-size: 8pt; letter-spacing: .1em; margin-bottom: 6pt; break-after: avoid; }

    /* Contact line, built from the on-screen pill row rather than a duplicate
       block. The icon-only pills carry no text, so their href is printed
       instead; the separator sits on ::before so it lands ahead of that href
       and each pill keeps one free pseudo-element. */
    .page-actions { display: block; margin: 0 0 12pt; font-size: 9.5pt; }
    .page-actions .pill {
        display: inline;
        border: 0;
        padding: 0;
        border-radius: 0;
        font-size: inherit;
        font-weight: 400;
    }
    .page-actions .pill svg { display: none; }
    /* The icon-only pills have no text of their own, so print their label and
       let the anchor's href stay a live hyperlink in the saved PDF. */
    .page-actions .pill-icon::after { content: attr(aria-label); }
    .page-actions .pill + .pill::before { content: " · "; }
    /* The print button itself, and internal nav that is not contact info. */
    #printResume,
    .page-actions .pill[href^="/"] { display: none !important; }

    .resume-lede { max-width: none; font-size: 10pt; }
    .resume-lede + .resume-lede { margin-top: .45em; }

    /* Chip grids are the single biggest waste of paper on this page: collapse
       each group to "Label: a, b, c" running text. */
    .resume-group { margin-bottom: 5pt; }
    .resume-group-title { display: inline; font-size: 10pt; }
    .resume-group-title::after { content: ": "; }
    .chip-row { display: inline; }
    .chip {
        display: inline;
        border: 0;
        padding: 0;
        border-radius: 0;
        font-size: 10pt;
    }
    .chip svg { display: none; }
    .chip:not(:last-child)::after { content: ", "; }

    .cert-row { padding: 4pt 0; break-inside: avoid; }
    .cert-name { font-size: 10.5pt; }
    /* Kept as a live hyperlink in the saved PDF. The ↗ is screen decoration. */
    .cert-verify {
        display: inline;
        font-family: var(--f-sans);
        font-size: 9pt;
        padding-top: 0;
    }
    .cert-verify span { display: none; }

    .tl-item { padding-bottom: 7pt; break-inside: avoid; }
    .tl-role { font-size: 11.5pt; }
    .tl-context { font-size: 9pt; margin-top: 3pt; }
    .tl-points { max-width: none; margin-top: 5pt; font-size: 10pt; line-height: 1.38; }
    .tl-points li { margin-bottom: .05em; }
}