/* vita.css — /about.html.
 *
 * The vita is a record surface. Where Now answers "what is moving right
 * now" with a status chip per item, the vita answers "what is on file"
 * and carries no temporality beyond the dates themselves — so it borrows
 * item-card.css's card rhythm and now.css's section headings, but drops
 * the badge column entirely. Entries here have no state to report.
 *
 * The one affordance this page has that the CV PDF cannot: every artifact
 * is one click away. Link chips are therefore the only element given any
 * interaction polish; everything else stays deliberately quiet so the
 * chips read as the page's active surface.
 */

/* ============================================================
   INTRO PROSE
   Body content from about.md — the pointers and the four research
   threads — set above the generated sections. Mirrors .now-intro
   so the two data-driven pages open in the same register.
   ============================================================ */

.vita-intro {
    margin: 0 0 3rem;
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.vita-intro h2 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-variant: all-small-caps;
    font-feature-settings: "smcp" 1;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    font-weight: 400;
    margin: 2rem 0 0.6rem;
}

.vita-intro p:last-child {
    margin-bottom: 0;
}

/* ============================================================
   SECTIONS
   Identical treatment to .now-section — same size, tracking, and
   ink — because the two pages are siblings and a reader moving
   between them should not have to re-learn the hierarchy.
   ============================================================ */

.vita-section {
    margin-bottom: 2.75rem;
}

.vita-section-heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-variant: all-small-caps;
    font-feature-settings: "smcp" 1;
    letter-spacing: 0.09em;
    color: var(--text-muted);
    text-transform: none;
    font-weight: 400;
    margin: 0 0 0.85rem 0;
}

/* ============================================================
   ENTRIES
   .vita-card composes on .item-card, which is a flex row sized
   for a badge column. The vita emits no badge, so the single
   .item-card-main child simply takes the full width.
   ============================================================ */

.vita-list {
    margin: 0;
}

.vita-entry-title {
    font-family: var(--font-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    margin: 0;
}

/* Degree, role, position. Serif italic — the scholarly convention
   for a title held, and it separates the role from the institution
   above it without another weight or size step. */
.vita-role {
    font-family: var(--font-serif);
    font-size: 0.95rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 0.15rem 0 0;
    line-height: 1.4;
}

.vita-gpa {
    font-style: normal;
    color: var(--text-faint);
}

/* Author lists run long and are reference material rather than
   reading material — sans, small, muted, tight. */
.vita-authors {
    font-family: var(--font-sans);
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0.2rem 0 0;
    line-height: 1.45;
}

/* Venue: journal, conference, or publication state. Italic serif is
   the citation convention and distinguishes it from the author line
   directly above without adding a color step. */
.vita-venue {
    font-family: var(--font-serif);
    font-size: 0.92rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 0.2rem 0 0;
    line-height: 1.45;
}

/* Dates and location. Matches .item-card-date's register exactly —
   tabular numerals so date columns stay optically aligned down the
   list even though they are inline here. */
.vita-meta {
    font-family: var(--font-sans);
    font-size: 0.72rem;
    color: var(--text-faint);
    margin: 0.25rem 0 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

.vita-sep {
    user-select: none;
}

.vita-location {
    color: var(--text-faint);
}

a.vita-location {
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.2em;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

a.vita-location:hover {
    color: var(--text-muted);
    text-decoration-color: var(--border-muted);
}

/* Presentation state ("Presented", "Accepted"). Sits on the meta
   line rather than in a badge column, so it is set as small-caps
   text with a leading separator instead of a bordered chip — a
   frame here would compete with the link chips below it. */
.vita-status {
    font-family: var(--font-sans);
    font-variant: all-small-caps;
    letter-spacing: 0.07em;
    color: var(--text-muted);
}

.vita-status::before {
    content: " · ";
    color: var(--text-faint);
}

/* Preamble / note lines — the CV's connective prose. Same register
   as .item-card-abstract.is-full, unclamped. */
.vita-note {
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--text-muted);
    margin: 0.4rem 0 0;
    line-height: 1.55;
}

.vita-bullets {
    margin: 0.4rem 0 0;
    padding-left: 1.05rem;
    list-style: none;
}

.vita-bullets li {
    font-family: var(--font-sans);
    font-size: var(--text-size-small);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0.3rem 0 0;
    position: relative;
}

/* Hairline dash rather than a bullet glyph: the entries are claims,
   not an enumerated sequence, and a disc would assert more structure
   than the content has. */
.vita-bullets li::before {
    content: "";
    position: absolute;
    left: -1.05rem;
    top: 0.72em;
    width: 0.5rem;
    height: 1px;
    background: var(--border-muted);
}

/* ============================================================
   LINK CHIPS
   The page's one interactive surface, and the reason a vita on the
   web beats a vita on paper. Geometry is lifted from .now-status so
   the chip shape is already familiar from /current; the difference
   is that these are links and therefore respond.
   ============================================================ */

.vita-links {
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.vita-chip {
    display: inline-block;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-variant: all-small-caps;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.32em 0.55em 0.28em;
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-muted);
    background: transparent;
    white-space: nowrap;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

.vita-chip:hover {
    color: var(--text);
    border-color: var(--text-muted);
    background: var(--surface-raised, transparent);
}

.vita-chip:focus-visible {
    outline: 2px solid var(--text-muted);
    outline-offset: 2px;
}

/* The equal-contribution legend. Belongs to the section, not to any
   one entry, so it is set below the list in the faintest register
   the page uses. */
.vita-footnote {
    font-family: var(--font-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--text-faint);
    margin: 0.9rem 0 0;
}

/* ============================================================
   MOBILE (≤540px)
   item-card.css already stacks its header at this breakpoint. The
   vita's entries are single-column by construction, so only the
   type steps down.
   ============================================================ */

@media (max-width: 540px) {
    .vita-entry-title {
        font-size: 0.95rem;
        overflow-wrap: anywhere;
    }

    .vita-role,
    .vita-venue {
        font-size: 0.9rem;
    }

    .vita-meta {
        font-size: 0.68rem;
    }

    .vita-chip {
        font-size: 0.62rem;
        padding: 0.28em 0.45em 0.24em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vita-chip,
    a.vita-location {
        transition: none;
    }
}