:root {
    /* Design tokens (small site, still worth making it systematic). */
    --hue: 340;
    --primary-color: hsl(var(--hue) 64% 36%);
    --primary-color-hover: hsl(var(--hue) 64% 28%);
    --bg-color: #f4f0ea;
    --bg-panel: rgba(255, 252, 247, 0.78);
    --bg-panel-strong: rgba(255, 251, 245, 0.92);
    --text-primary: #171717;
    --text-secondary: #53514d;
    --text-tertiary: #7a746b;
    --line-color: rgba(23, 23, 23, 0.08);
    --shadow-color: rgba(45, 28, 33, 0.12);
    --grid-line-color: rgba(23, 23, 23, 0.03);
    --panel-border-color: rgba(255, 255, 255, 0.5);
    --panel-highlight: rgba(255, 255, 255, 0.9);
    --card-border-color: rgba(23, 23, 23, 0.08);
    --card-shadow: rgba(23, 23, 23, 0.04);
    --accent-glow: rgba(160, 63, 88, 0.14);
    --hero-orb-shadow: rgba(30, 30, 30, 0.12);
    --ambient-tint-soft: hsl(var(--hue) 46% 46% / 0.12);
    --ambient-tint-strong: hsl(var(--hue) 54% 46% / 0.28);
    --panel-tint-soft: hsl(var(--hue) 48% 46% / 0.10);
    --body-bg:
        radial-gradient(circle at top left, var(--ambient-tint-soft), transparent 32%),
        radial-gradient(circle at 85% 15%, rgba(197, 176, 140, 0.18), transparent 28%),
        linear-gradient(135deg, #f7f4ef 0%, #efe8df 52%, #f8f4ed 100%);
    --orb-bg:
        radial-gradient(circle at 30% 30%, var(--ambient-tint-strong), transparent 36%),
        radial-gradient(circle at 70% 70%, var(--hero-orb-shadow), transparent 40%);
    --panel-bg:
        linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 250, 243, 0.82)),
        var(--bg-panel);
    --panel-overlay:
        linear-gradient(120deg, rgba(255, 255, 255, 0.6), transparent 34%),
        linear-gradient(90deg, transparent 0, transparent calc(100% - 168px), rgba(23, 23, 23, 0.06) calc(100% - 168px), rgba(23, 23, 23, 0.06) calc(100% - 167px), transparent calc(100% - 167px)),
        radial-gradient(circle at 18% 26%, var(--panel-tint-soft), transparent 42%);
    --panel-corner-bg:
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 244, 236, 0.35)),
        repeating-linear-gradient(90deg, rgba(23, 23, 23, 0.05) 0 1px, transparent 1px 10px),
        repeating-linear-gradient(0deg, rgba(23, 23, 23, 0.04) 0 1px, transparent 1px 12px);

    --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: ui-serif, Iowan Old Style, Palatino Linotype, Book Antiqua, Georgia, Times New Roman, serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Animate hue as a progressive enhancement (static fallback if unsupported). */
@property --hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 340;
}

html,
body {
    color-scheme: light;
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    background: var(--body-bg);
    color: var(--text-primary);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    position: relative;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: no-preference) {
    :root {
        animation: hueDrift 56s linear infinite;
    }

    .content::before {
        animation: sheenShift 10s ease-in-out infinite alternate;
    }
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body::before {
    background-image:
        linear-gradient(var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 85%);
}

body::after {
    inset: auto -8vw -18vh auto;
    width: 42vw;
    height: 42vw;
    min-width: 320px;
    min-height: 320px;
    border-radius: 999px;
    background: var(--orb-bg);
    filter: blur(34px);
    opacity: 0.9;
    animation: ambientFloat 14s ease-in-out infinite alternate;
}

.container {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    box-sizing: border-box;
}

.content {
    position: relative;
    width: min(920px, calc(100vw - 96px));
    padding: clamp(32px, 4vw, 54px);
    border: 1px solid var(--panel-border-color);
    border-radius: 30px;
    background: var(--panel-bg);
    box-shadow:
        0 24px 80px var(--shadow-color),
        inset 0 1px 0 var(--panel-highlight);
    backdrop-filter: blur(18px);
    overflow: hidden;
    animation: panelDrift 9s ease-in-out infinite;
}

.content::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--panel-overlay);
    pointer-events: none;
}

.content::after {
    content: "";
    position: absolute;
    top: 22px;
    right: 22px;
    width: 92px;
    height: 92px;
    border-radius: 24px;
    border: 1px solid var(--card-border-color);
    background: var(--panel-corner-bg);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--panel-highlight) 90%, transparent);
    opacity: 0.9;
    pointer-events: none;
}

.name,
.subtitle,
.description,
.achievements,
.resume-link {
    position: relative;
    z-index: 1;
}

.name {
    margin: 0;
    max-width: 10ch;
    font-family: var(--font-serif);
    font-size: clamp(64px, 9vw, 124px);
    line-height: 0.88;
    font-weight: 400;
    letter-spacing: -0.05em;
    color: var(--text-primary);
}

.subtitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 18px;
    padding: 8px 12px;
    border: 1px solid var(--card-border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-panel-strong) 68%, transparent);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: clamp(11px, 1vw, 13px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.subtitle::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 0 5px var(--accent-glow);
    flex: 0 0 auto;
}

.description {
    max-width: 32ch;
    margin: 0 0 28px;
    font-size: clamp(20px, 2.3vw, 31px);
    line-height: 1.3;
    font-weight: 400;
    color: var(--text-secondary);
}

.achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0;
    max-width: 660px;
}

.achievement-item {
    display: flex;
}

.achievement-item:not(:last-child)::after {
    content: none;
}

.achievement-item a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border: 1px solid var(--card-border-color);
    border-radius: 14px;
    background: var(--bg-panel-strong);
    box-shadow:
        0 12px 30px var(--card-shadow),
        inset 0 1px 0 color-mix(in srgb, var(--panel-highlight) 100%, transparent);
    font-family: var(--font-mono);
    font-size: clamp(13px, 1.25vw, 15px);
    letter-spacing: 0.02em;
}

.achievement-item a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.45;
    flex: 0 0 auto;
}

a {
    color: var(--text-primary);
    text-decoration: none;
    transition:
        color 0.22s ease,
        border-color 0.22s ease,
        background-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

a:visited {
    color: var(--text-primary);
}

.description a {
    position: relative;
    color: var(--primary-color);
    font-weight: 500;
}

.description a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.08em;
    height: 0.08em;
    background: linear-gradient(90deg, currentColor, rgba(160, 63, 88, 0.35));
    transform-origin: left center;
    transition: transform 0.22s ease;
}

.description a:hover::after,
.description a:focus-visible::after {
    transform: scaleX(0.35);
}

.achievement-item a:hover,
.achievement-item a:focus-visible {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
    box-shadow:
        0 18px 38px color-mix(in srgb, var(--primary-color) 12%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--panel-highlight) 100%, transparent);
    color: var(--primary-color);
}

.resume-link {
    margin: 0;
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid var(--card-border-color);
    border-radius: 14px;
    background: var(--bg-panel-strong);
}

.button:hover,
.button:focus-visible {
    color: var(--primary-color);
    border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
}

a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primary-color) 35%, transparent);
    outline-offset: 3px;
}

@keyframes ambientFloat {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.82;
    }
    100% {
        transform: translate3d(-3vw, -2vh, 0) scale(1.08);
        opacity: 1;
    }
}

@keyframes hueDrift {
    from {
        --hue: 340;
    }
    to {
        --hue: 700;
    }
}

@keyframes panelDrift {
    0%,
    100% {
        box-shadow:
            0 24px 80px var(--shadow-color),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    50% {
        box-shadow:
            0 28px 92px rgba(45, 28, 33, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.94);
    }
}

@keyframes sheenShift {
    0% {
        opacity: 0.72;
        transform: translateX(0);
    }
    100% {
        opacity: 0.96;
        transform: translateX(8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        animation: none;
    }

    body::after,
    .content,
    .content::before {
        animation: none;
    }

    a,
    .achievement-item a {
        transition: none;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --primary-color: hsl(var(--hue) 70% 72%);
        --primary-color-hover: hsl(var(--hue) 72% 78%);
        --bg-color: #0f1012;
        --bg-panel: rgba(20, 22, 26, 0.78);
        --bg-panel-strong: rgba(24, 26, 31, 0.92);
        --text-primary: #f5f1ea;
        --text-secondary: #c7c0b5;
        --text-tertiary: #988f83;
        --line-color: rgba(255, 255, 255, 0.1);
        --shadow-color: rgba(0, 0, 0, 0.34);
        --grid-line-color: rgba(255, 255, 255, 0.04);
        --panel-border-color: rgba(255, 255, 255, 0.08);
        --panel-highlight: rgba(255, 255, 255, 0.09);
        --card-border-color: rgba(255, 255, 255, 0.08);
        --card-shadow: rgba(0, 0, 0, 0.22);
        --accent-glow: rgba(233, 138, 169, 0.18);
        --hero-orb-shadow: rgba(0, 0, 0, 0.26);
        --ambient-tint-soft: hsl(var(--hue) 52% 56% / 0.24);
        --ambient-tint-strong: hsl(var(--hue) 58% 60% / 0.22);
        --panel-tint-soft: hsl(var(--hue) 56% 60% / 0.16);
        --body-bg:
            radial-gradient(circle at top left, var(--ambient-tint-soft), transparent 32%),
            radial-gradient(circle at 85% 15%, rgba(128, 100, 67, 0.18), transparent 28%),
            linear-gradient(135deg, #111216 0%, #16181d 48%, #0d0e11 100%);
        --orb-bg:
            radial-gradient(circle at 30% 30%, var(--ambient-tint-strong), transparent 34%),
            radial-gradient(circle at 70% 70%, var(--hero-orb-shadow), transparent 40%);
        --panel-bg:
            linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
            var(--bg-panel);
        --panel-overlay:
            linear-gradient(120deg, rgba(255, 255, 255, 0.04), transparent 36%),
            linear-gradient(90deg, transparent 0, transparent calc(100% - 168px), rgba(255, 255, 255, 0.06) calc(100% - 168px), rgba(255, 255, 255, 0.06) calc(100% - 167px), transparent calc(100% - 167px)),
            radial-gradient(circle at 18% 26%, var(--panel-tint-soft), transparent 42%);
        --panel-corner-bg:
            linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 10px),
            repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 12px);
    }

    .description a::after {
        background: linear-gradient(90deg, currentColor, rgba(233, 138, 169, 0.45));
    }

    body::after {
        width: 36vw;
        height: 36vw;
        opacity: 0.58;
        filter: blur(46px);
        animation-duration: 20s;
    }

    .content::before {
        animation: none;
    }
}

/* 404 page (keeps HTML untouched, adds missing styles). */
.align-content-center {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.title1 {
    font-family: var(--font-serif);
    font-size: clamp(40px, 7vw, 64px);
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.info a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
    border: 1px solid rgba(23, 23, 23, 0.1);
    border-radius: 14px;
    background: var(--bg-panel-strong);
}

.info a:hover,
.info a:focus-visible {
    color: var(--primary-color);
    border-color: rgba(160, 63, 88, 0.24);
}

/* Override 404 inline transform so content is visible. */
#main {
    transform: none !important;
}

@supports (background: color-mix(in srgb, #000 50%, transparent)) {
    html,
    body {
        background:
            radial-gradient(circle at top left, color-mix(in srgb, var(--primary-color) 18%, transparent), transparent 32%),
            var(--body-bg);
    }

    body::after {
        background:
            radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary-color) 42%, transparent), transparent 36%),
            radial-gradient(circle at 70% 70%, var(--hero-orb-shadow), transparent 40%);
    }

    .content::before {
        background:
            linear-gradient(120deg, color-mix(in srgb, var(--panel-highlight) 66%, transparent), transparent 34%),
            linear-gradient(90deg, transparent 0, transparent calc(100% - 168px), var(--card-border-color) calc(100% - 168px), var(--card-border-color) calc(100% - 167px), transparent calc(100% - 167px)),
            radial-gradient(circle at 18% 26%, color-mix(in srgb, var(--primary-color) 12%, transparent), transparent 42%);
    }

    .info a:hover,
    .info a:focus-visible {
        border-color: color-mix(in srgb, var(--primary-color) 28%, rgba(23, 23, 23, 0.1));
    }

    /* Keep hover accents in sync with animated --primary-color. */
    .achievement-item a:hover,
    .achievement-item a:focus-visible {
        border-color: color-mix(in srgb, var(--primary-color) 24%, transparent);
        box-shadow:
            0 18px 38px color-mix(in srgb, var(--primary-color) 12%, transparent),
            inset 0 1px 0 color-mix(in srgb, var(--panel-highlight) 100%, transparent);
    }
}

@media (max-width: 900px) {
    .container {
        padding: 28px;
    }

    .content {
        width: min(100%, 760px);
    }

    .content::before {
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.55), transparent 32%);
    }

    .content::after {
        width: 76px;
        height: 76px;
    }

    .description {
        max-width: 28ch;
    }
}

@media (max-width: 640px) {
    html,
    body {
        min-height: 100%;
    }

    .container {
        /* Mobile: fill the viewport so the panel can be vertically centered. */
        min-height: 100vh;
        min-height: 100svh;
        align-items: center;
        padding: clamp(14px, 5vw, 24px);
    }

    .content {
        /* Mobile: avoid edge-to-edge card; keep some breathing room. */
        width: min(520px, calc(100vw - 48px));
        max-width: 100%;
        /* A bit of height so it doesn't feel cramped, but not always full-viewport. */
        min-height: clamp(420px, 62svh, 560px);
        padding: 32px 24px;
        border-radius: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .content::after {
        top: 18px;
        right: 18px;
        width: 58px;
        height: 58px;
        border-radius: 18px;
    }

    .name {
        max-width: none;
        font-size: clamp(56px, 18vw, 88px);
        line-height: 0.9;
    }

    .subtitle {
        margin: 18px 0 16px;
        letter-spacing: 0.16em;
    }

    .description {
        max-width: none;
        margin-bottom: 24px;
        font-size: clamp(20px, 6.8vw, 28px);
    }

    .achievements {
        flex-direction: column;
        align-items: stretch;
    }

    .achievement-item,
    .achievement-item a {
        width: 100%;
        box-sizing: border-box;
    }

    .achievement-item a {
        justify-content: flex-start;
        padding: 14px 16px;
    }
}

@media (prefers-color-scheme: dark) and (max-width: 640px) {
    .content::before {
        background:
            linear-gradient(120deg, rgba(255, 255, 255, 0.02), transparent 28%),
            radial-gradient(circle at 16% 20%, rgba(190, 87, 121, 0.10), transparent 34%);
    }
}