/* ── Personal site chrome ─────────────────────────────────────────
   Site-wide (not homepage-only) presentation for nguyenthibichlien.com -
   loaded on every public page via templates/base.html's
   `{% elif site.key == 'personal' %}` conditional `extra_css` fill,
   the same inclusion point products/website_studio/static/website_studio/
   chrome.css uses for its own nav-brand modifier - because .nav-brand is
   shared, structural chrome rendered by every page, not just the
   homepage. See personal_website/homepage.css for the homepage-only
   composition.
*/

/* Issue: the header and the homepage hero both restated "Lien Nguyen" -
   the same duplication Website Studio's own nav once had (see
   website_studio/chrome.css's .nav-brand-label comment). Resolution here
   follows the same shape (nav carries the identity, the hero's repeat is
   removed - see home.html) but not the same treatment: Website Studio's
   mark is a red, uppercase product wordmark, which would misrepresent a
   personal name. This stays a personal, understated mono treatment -
   same font family the hero eyebrow used to use, no color/case change. */
.nav-brand--personal {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}

/* ── Typography experiment (personal-site-only, branch
   experiment/personal-site-typography) ───────────────────────────────
   A stronger technical/engineering typographic identity, in the same
   spirit as Anders & Voss's own mono-display treatment but implemented
   independently here - no shared component or CSS file between the two
   products, reusing only the font already self-hosted for this whole
   codebase (--font-mono = JetBrains Mono Variable, the same family
   .nav-brand--personal and every .eyebrow already use).

   Deliberately NOT applied to every heading level or every piece of
   text - h4-h6 (minor sub-headings: explore-panel titles, secondary
   service tiers) and all body/lede/reading copy stay on --font-sans
   unchanged, so the contrast between "technical display" and "readable
   body" reads as an intentional hierarchy rather than the whole site
   going monospace. */
h1, h2, h3 {
    font-family: var(--font-mono);
    letter-spacing: -0.01em;
}

/* Section headings (h2 - "Featured Projects", "Articles", "Work With
   Me") read as technical labels, matching the uppercase/letter-spaced
   language every .eyebrow on this site already uses - scoped to `.section`
   specifically so an article's own in-body markdown subheadings (inside
   .reading/.markdown-content, not .section) aren't force-uppercased. */
.section > h2 {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Metadata (category tags, inline dates/durations) reads as technical/
   systems detail rather than body prose - .tag/.meta are shared
   design-system primitives every product's cards use; overridden here
   only for this product, per the same "redefine here, never edit
   shared/" convention chrome.css already follows above. */
.tag, .meta {
    font-family: var(--font-mono);
    letter-spacing: 0.02em;
}