/* =================================================================
   phamdanh.com — engineering portfolio
   Dark-first, minimal, editorial. Mango accent used sparingly.
   ================================================================= */

/* Light theme is the default. Dark theme is opt-in via [data-theme="dark"]. */
:root,
[data-theme="light"] {
    --bg: #F0F0F6;
    --bg-raised: #FFFFFF;
    --bg-hover: #F7F8FC;
    --bg-sunken: #F4F5FA;
    --header-bg: rgba(240, 240, 246, 0.85);
    --border: #E3E6EF;
    --border-strong: #CDD3E1;

    --text: #1B2430;
    /* Both meet WCAG AA (4.5:1) on every surface in this theme, and stay one
       clear step apart from each other so the hierarchy still reads. */
    --text-muted: #4E5A6B;
    --text-dim: #656E7B;

    --accent: #304CFD;
    --accent-hover: #1F38D8;
    --on-accent: #FFFFFF;
    --accent-dim: rgba(48, 76, 253, 0.09);
    --accent-border: rgba(48, 76, 253, 0.28);

    /* Darkened from #17A34A (2.95:1) so the LIVE badge label clears AA on its
       own tinted background. */
    --live: #127837;
    --live-dim: rgba(23, 163, 74, 0.10);
    --live-border: rgba(23, 163, 74, 0.30);

    --shadow-card: 0 1px 2px rgba(27, 36, 48, 0.04), 0 8px 24px rgba(27, 36, 48, 0.05);

    --container: 1120px;
    --radius: 12px;
    --radius-lg: 16px;
}

[data-theme="dark"] {
    --bg: #0B0D10;
    --bg-raised: #111418;
    --bg-hover: #15191E;
    --bg-sunken: #0F1317;
    --header-bg: rgba(11, 13, 16, 0.85);
    --border: #22272E;
    --border-strong: #2E353D;

    --text: #F2F4F7;
    --text-muted: #9AA4B2;
    /* Lifted from #6B7480 (3.73:1) to clear WCAG AA on --bg-hover, the
       lightest surface dim text sits on. */
    --text-dim: #7A828D;

    --accent: #F5A524;
    --accent-hover: #FFB93E;
    --on-accent: #0B0D10;
    --accent-dim: rgba(245, 165, 36, 0.12);
    --accent-border: rgba(245, 165, 36, 0.32);

    --live: #3FB950;
    --live-dim: rgba(63, 185, 80, 0.12);
    --live-border: rgba(63, 185, 80, 0.3);

    --shadow-card: none;
}

html {
    color-scheme: light;
}

[data-theme="dark"] {
    color-scheme: dark;
}

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* offset for the sticky header when jumping to an anchor */
    scroll-padding-top: 88px;
    -webkit-text-size-adjust: 100%;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: inherit;
    text-decoration: none;
}

p {
    margin: 0 0 1rem;
}

p:last-child {
    margin-bottom: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

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

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem;
}

.skip-link {
    position: absolute;
    top: -60px;
    left: 1rem;
    background-color: var(--accent);
    color: var(--on-accent);
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    z-index: 200;
    transition: top .2s ease;
}

.skip-link:focus {
    top: 1rem;
}

/* -----------------------------------------------------------------
   Header
----------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--header-bg);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, padding .25s ease;
}

.site-header.is-scrolled {
    border-bottom-color: var(--border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    height: 72px;
    transition: height .25s ease;
}

.site-header.is-scrolled .site-header__inner {
    height: 60px;
}

.brand {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.brand__dot {
    color: var(--accent);
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.75rem;
}

.site-nav a {
    color: var(--text-muted);
    font-size: 0.875rem;
    transition: color .18s ease;
    position: relative;
}

.site-nav a:hover,
.site-nav a.is-active {
    color: var(--text);
}

.site-nav a.is-active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 1.5px;
    background-color: var(--accent);
    border-radius: 2px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* -----------------------------------------------------------------
   Theme + language switches
----------------------------------------------------------------- */
.switches {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    height: 34px;
    width: 34px;
    font-size: 0.875rem;
    padding: 0;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.icon-btn:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-dim);
    color: var(--text);
}

.icon-btn:focus-visible,
.lang-switch button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Show the icon matching the *target* theme, hide the other. */
.theme-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: inline;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: none;
}

.lang-switch {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    overflow: hidden;
    height: 34px;
}

.lang-switch button {
    background: none;
    border: 0;
    color: var(--text-dim);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0 0.625rem;
    height: 100%;
    text-transform: uppercase;
    transition: background-color .18s ease, color .18s ease;
}

.lang-switch button:hover {
    color: var(--text);
}

.lang-switch button.is-active {
    background-color: var(--accent);
    color: var(--on-accent);
}

.nav-toggle {
    display: none;
    background: none;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    height: 38px;
    width: 38px;
    align-items: center;
    justify-content: center;
}

/* -----------------------------------------------------------------
   Buttons
----------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.625rem 1.125rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
    white-space: nowrap;
}

.btn--primary {
    background-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.btn--primary:hover {
    background-color: var(--accent-hover);
}

.btn--ghost {
    border-color: var(--border-strong);
    color: var(--text);
}

.btn--ghost:hover {
    background-color: var(--bg-hover);
    border-color: var(--text-dim);
}

.btn--sm {
    font-size: 0.8125rem;
    padding: 0.5rem 0.875rem;
}

/* -----------------------------------------------------------------
   Sections
----------------------------------------------------------------- */
.section {
    padding: 5.5rem 0;
    border-top: 1px solid var(--border);
}

.section--flush {
    border-top: 0;
}

.section__eyebrow {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.875rem;
}

.section__title {
    font-size: 1.875rem;
    margin-bottom: 0.875rem;
}

.section__lead {
    color: var(--text-muted);
    font-size: 1rem;
    max-width: 60ch;
    margin-bottom: 2.5rem;
}

.section__head {
    margin-bottom: 2.5rem;
}

.section__head .section__lead {
    margin-bottom: 0;
}

/* -----------------------------------------------------------------
   Hero
----------------------------------------------------------------- */
.hero {
    padding: 5rem 0 4rem;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 4rem;
    align-items: center;
}

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 0.3125rem 0.875rem;
    margin-bottom: 1.5rem;
}

.hero__status-dot {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--live);
    box-shadow: 0 0 0 3px var(--live-dim);
}

.hero__name {
    font-size: clamp(2.5rem, 6vw, 3.75rem);
    letter-spacing: -0.035em;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.hero__role {
    font-size: clamp(1.125rem, 2.2vw, 1.375rem);
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.hero__role span {
    color: var(--accent);
}

.hero__keywords {
    color: var(--text-dim);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    margin-bottom: 1.75rem;
}

.hero__intro {
    color: var(--text-muted);
    font-size: 1.0625rem;
    max-width: 54ch;
    margin-bottom: 2rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2.5rem;
}

.hero__social {
    display: flex;
    gap: 0.625rem;
}

.hero__social a {
    align-items: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    display: inline-flex;
    height: 38px;
    width: 38px;
    justify-content: center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.hero__social a:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background-color: var(--bg-hover);
}

/* Abstract architecture visual */
.hero__visual {
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
}

.arch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.arch__node {
    background-color: var(--bg-sunken);
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.5rem 0.875rem;
    text-align: center;
    width: 100%;
    font-weight: 500;
}

.arch__node--accent {
    border-color: var(--accent-border);
    color: var(--accent);
    background-color: var(--accent-dim);
}

.arch__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 100%;
}

.arch__connector {
    height: 18px;
    width: 1px;
    background: linear-gradient(180deg, var(--border-strong), transparent);
}

.arch__caption {
    color: var(--text-dim);
    font-size: 0.6875rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 0.75rem;
}

/* -----------------------------------------------------------------
   Identity strip
----------------------------------------------------------------- */
.strip {
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background-color: var(--bg-raised);
}

.strip__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.strip__item {
    padding: 1.5rem 1rem;
    text-align: center;
    border-right: 1px solid var(--border);
}

.strip__item:last-child {
    border-right: 0;
}

.strip__value {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 0.25rem;
}

.strip__label {
    color: var(--text-dim);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------
   About
----------------------------------------------------------------- */
.about__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 4rem;
}

.about__body p {
    color: var(--text-muted);
    font-size: 1rem;
}

.focus-list li {
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9375rem;
    padding: 0.75rem 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.focus-list li:last-child {
    border-bottom: 0;
}

.focus-list li::before {
    content: '';
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: var(--accent);
    flex-shrink: 0;
}

/* -----------------------------------------------------------------
   Cards (Engineering Focus)
----------------------------------------------------------------- */
.card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.card {
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color .2s ease, background-color .2s ease;
}

.card:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-hover);
}

.card__num {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.card__title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

/* -----------------------------------------------------------------
   Tags
----------------------------------------------------------------- */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4375rem;
}

.tag {
    background-color: var(--bg-sunken);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    padding: 0.25rem 0.5625rem;
    white-space: nowrap;
}

.tag--accent {
    border-color: var(--accent-border);
    color: var(--accent);
    background-color: var(--accent-dim);
}

.tag--dashed {
    border-style: dashed;
    color: var(--text-dim);
    background-color: transparent;
}

/* -----------------------------------------------------------------
   Skills
----------------------------------------------------------------- */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.skill-block {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.375rem 1.5rem;
    background-color: var(--bg-raised);
}

.skill-block--explore {
    border-style: dashed;
    background-color: transparent;
    grid-column: 1 / -1;
}

.skill-block__title {
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.skill-block__note {
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-style: italic;
    margin-top: 0.875rem;
}

/* -----------------------------------------------------------------
   Timeline (experience + education)
----------------------------------------------------------------- */
.timeline {
    position: relative;
    /* Keep in sync with .tl-item::before left offset — the dot is pulled back
       by exactly this much to sit centred on the rail. */
    padding-left: 2.5rem;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background-color: var(--border);
}

.tl-item {
    position: relative;
    padding-bottom: 2.5rem;
}

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

.tl-item::before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 7px;
    height: 9px;
    width: 9px;
    border-radius: 50%;
    background-color: var(--bg);
    border: 1.5px solid var(--border-strong);
}

.tl-item--current::before {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-dim);
}

.tl-item__period {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
}

.tl-item__company {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
}

.tl-item--current .tl-item__company {
    font-size: 1.3125rem;
}

.tl-item__role {
    color: var(--accent);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.875rem;
}

.tl-item__summary {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: 1rem;
}

/* Progressive disclosure */
.details {
    border: 0;
    margin-bottom: 1rem;
}

.details__summary {
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8125rem;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0;
    transition: color .18s ease;
}

.details__summary:hover {
    color: var(--text);
}

.details__summary::-webkit-details-marker {
    display: none;
}

.details__summary::after {
    content: '\002B';
    font-size: 0.875rem;
}

.details[open] .details__summary::after {
    content: '\2212';
}

.details[open] .details__summary {
    margin-bottom: 0.75rem;
}

.bullets li {
    color: var(--text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    padding-left: 1.125rem;
    position: relative;
    margin-bottom: 0.5rem;
}

.bullets li:last-child {
    margin-bottom: 0;
}

.bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6875rem;
    height: 4px;
    width: 4px;
    border-radius: 50%;
    background-color: var(--text-dim);
}

/* -----------------------------------------------------------------
   Work / project cards
----------------------------------------------------------------- */
.work-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.work {
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: border-color .2s ease, background-color .2s ease;
}

.work:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-hover);
}

.work--feature {
    grid-column: 1 / -1;
    padding: 2rem;
}

.work__top {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

/* Official project logo, set inline right after the project name.

   These are the real brand assets, so their aspect ratios vary from square
   marks to wide lockups. The height is tied to the title's own font-size via
   em, so each logo scales with the heading and runs a little taller than the
   text beside it. Width follows the artwork, which keeps every mark whole.

   Alignment is middle rather than baseline: a baseline-aligned image hangs off
   the bottom of the line and pushes its top past the cap height, which is what
   made the taller marks read as cropped. Middle centres the plate on the line
   and the small top offset lifts it so it settles against the text optically
   rather than mathematically.

   Every file is transparent, so the backing comes from CSS rather than being
   baked into the artwork. Several marks carry near-black detail — AZ Fancy is
   60% dark ink, MangoRAG 54% — which would sink into the dark card without it.
   The plate is deliberately subtle: enough separation to read the mark, not a
   hard white chip. Decorative only, hence aria-hidden in the markup. */
.work__logo {
    height: 1em;
    width: auto;
    max-width: 8em;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    position: relative;
    top: -0.1em;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 0.25em;
    padding: 0.1em 0.2em;
    box-sizing: content-box;
}

/* Square marks read much smaller than a wordmark at the same height, because
   a wordmark spends its height on letters while these spend it on a symbol.
   Running them taller keeps the whole set optically even. */
.work__logo[src*="mango"],
.work__logo[src*="ha-cuc"] {
    height: 1.3em;
}

/* The Mango marks already carry their own internal spacing, so they need less
   plate around them than the wordmarks do. */
.work__logo[src*="mango"] {
    padding: 0.1em 0.1em;
}

/* On the light theme the card is already pale, so the plate only needs to be
   a faint tint rather than a panel sitting on top of the surface. */
[data-theme="light"] .work__logo {
    background-color: rgba(15, 18, 26, 0.04);
}

/* The status pill stays pinned to the right edge of the card now that the
   row is laid out from the start rather than with space-between. */
.work__top > .status {
    margin-left: auto;
}

.work__domain {
    color: var(--text-dim);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.work__title {
    font-size: 1.25rem;
    margin-bottom: 0.375rem;
}

.work--feature .work__title {
    font-size: 1.625rem;
}

.work__role {
    color: var(--accent);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-bottom: 0.875rem;
}

.work__desc {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin-bottom: 1.125rem;
}

.work__foot {
    margin-top: auto;
    padding-top: 1.125rem;
}

.work .tags {
    margin-bottom: 1.125rem;
}

.work__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
}

.work__link {
    color: var(--accent);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: gap .18s ease;
}

.work__link:hover {
    gap: 0.625rem;
}

.work__note {
    color: var(--text-dim);
    font-size: 0.8125rem;
    font-style: italic;
}

/* Status badges */
.status {
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.25rem 0.625rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.status--live {
    background-color: var(--live-dim);
    border: 1px solid var(--live-border);
    color: var(--live);
}

.status--dev {
    background-color: var(--accent-dim);
    border: 1px solid var(--accent-border);
    color: var(--accent);
}

.status--lib {
    background-color: var(--bg-sunken);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

/* -----------------------------------------------------------------
   Certifications
----------------------------------------------------------------- */
.cert-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1rem;
}

.cert-box {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    background-color: var(--bg-raised);
}

.cert-box--pending {
    border-style: dashed;
    background-color: transparent;
}

.cert-box__title {
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 0.375rem;
}

.cert-box__sub {
    color: var(--text-dim);
    font-size: 0.8125rem;
    margin-bottom: 1rem;
}

.cert-list li {
    align-items: baseline;
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    font-size: 0.875rem;
    padding: 0.5625rem 0;
}

.cert-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.cert-list__verify {
    color: var(--accent);
    font-size: 0.75rem;
}

.cert-list__verify:hover {
    text-decoration: underline;
}

.cert-tag {
    border: 1px solid var(--accent-border);
    border-radius: 100px;
    color: var(--accent);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.125rem 0.5rem;
    text-transform: uppercase;
}

/* -----------------------------------------------------------------
   Contact
----------------------------------------------------------------- */
.contact {
    text-align: center;
    padding: 6rem 0;
}

.contact__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.contact__text {
    color: var(--text-muted);
    font-size: 1.0625rem;
    max-width: 52ch;
    margin: 0 auto 2.5rem;
}

.contact__methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}

.contact__method {
    align-items: center;
    background-color: var(--bg-raised);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    display: inline-flex;
    font-size: 0.9375rem;
    gap: 0.625rem;
    padding: 0.75rem 1.25rem;
    transition: border-color .2s ease, background-color .2s ease;
}

.contact__method:hover {
    border-color: var(--accent-border);
    background-color: var(--bg-hover);
}

.contact__method i {
    color: var(--accent);
}

/* -----------------------------------------------------------------
   Footer
----------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--border);
    padding: 2.5rem 0;
}

.site-footer__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: space-between;
}

.site-footer__name {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.site-footer__role {
    color: var(--text-dim);
    font-size: 0.8125rem;
}

.site-footer__links {
    display: flex;
    gap: 1.5rem;
}

.site-footer__links a {
    color: var(--text-muted);
    font-size: 0.875rem;
    transition: color .18s ease;
}

.site-footer__links a:hover {
    color: var(--accent);
}

.site-footer__copy {
    color: var(--text-dim);
    font-size: 0.8125rem;
    width: 100%;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* -----------------------------------------------------------------
   Reveal animation
----------------------------------------------------------------- */
/* Content is revealed by script. `js-reveal` is set on <html> by an inline
   script, so the hidden state only ever applies when JS is actually running —
   without it every section stays fully visible. */
.js-reveal .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}

.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .js-reveal .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* -----------------------------------------------------------------
   Responsive
----------------------------------------------------------------- */
@media (max-width: 900px) {
    .container {
        padding: 0 1.25rem;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--bg-raised);
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 1.25rem 1rem;
        display: none;
    }

    .site-nav.is-open {
        display: flex;
    }

    .site-nav a {
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border);
    }

    .site-nav a:last-child {
        border-bottom: 0;
    }

    .site-nav a.is-active::after {
        display: none;
    }

    .hero {
        padding: 3rem 0 2.5rem;
    }

    .hero__grid,
    .about__grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hero__visual {
        order: -1;
    }

    .section {
        padding: 3.5rem 0;
    }

    .card-grid,
    .skills-grid,
    .work-grid,
    .cert-grid {
        grid-template-columns: 1fr;
    }

    .work--feature {
        padding: 1.75rem;
    }

    .strip__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .strip__item:nth-child(2n) {
        border-right: 0;
    }

    .strip__item:nth-child(-n+2) {
        border-bottom: 1px solid var(--border);
    }

    .contact {
        padding: 4rem 0;
    }
}

@media (max-width: 520px) {
    .work--feature .work__title {
        font-size: 1.375rem;
    }

    .work__top {
        flex-direction: column;
        gap: 0.625rem;
    }

    /* Stacked vertically, so the pill keeps its natural left alignment
       instead of being pushed to the far edge. The logo now sits inline
       inside the title, so it needs no repositioning here. */
    .work__top > .status {
        margin-left: 0;
    }

    .contact__methods {
        flex-direction: column;
    }

    .contact__method {
        justify-content: center;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* -----------------------------------------------------------------
   Light-theme polish
   Dark surfaces separate by contrast alone; light surfaces need a
   soft shadow so raised panels still read as raised.
----------------------------------------------------------------- */
/* Only surfaces that actually paint a background get the shadow. .tl-item and
   .site-nav are transparent, so a shadow on them renders as a stray smudge
   rather than lifting a panel. */
[data-theme="light"] .card,
[data-theme="light"] .work,
[data-theme="light"] .skill-block,
[data-theme="light"] .cert-box {
    box-shadow: var(--shadow-card);
}

[data-theme="light"] .arch__node,
[data-theme="light"] .tag,
/* Dashed "in progress" variants are deliberately transparent — a shadow under
   them reads as a smudge, not a raised panel. */
[data-theme="light"] .skill-block--explore,
[data-theme="light"] .cert-box--pending {
    box-shadow: none;
}

/* Keep the switch row usable on small screens. */
@media (max-width: 900px) {
    .switches {
        gap: 0.375rem;
    }
}

@media (max-width: 420px) {
    .header-actions {
        gap: 0.5rem;
    }

    .lang-switch button {
        padding: 0 0.5rem;
    }
}

/* Respect a user's OS preference on first visit only; an explicit
   choice is written to <html data-theme> by the inline script. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* -----------------------------------------------------------------
   Bilingual content swap
   Every translatable string is rendered twice (vi + en); the copy that
   does not match <html lang> is removed from the layout entirely.
----------------------------------------------------------------- */
html[lang="vi"] [data-i18n="en"],
html[lang="en"] [data-i18n="vi"] {
    display: none !important;
}