@layer reset, tokens, layout, prose, components, utilities;

/* ============================================================
   FONTS (self-hosted Inter, OFL — Latin variable subset)
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/static/fonts/InterVariable.woff2") format("woff2");
}

/* ============================================================
   VIEW TRANSITIONS (top-level — outside @layer to beat browser defaults)
   ============================================================ */

@view-transition { navigation: auto; }

/* Calibrate the default root cross-fade (browser default is 250ms ease). */
::view-transition-group(root) { animation-duration: var(--motion-enter); }
::view-transition-old(root),
::view-transition-new(root) { animation-timing-function: var(--ease-out); }

/* ============================================================
   TOKENS
   ============================================================ */

@layer tokens {
    :root,
    :host {
        color-scheme: light dark;

        /* Palette — WCAG-verified (light value, dark value) */
        --color-canvas: light-dark(oklch(0.99 0.002 250), oklch(0.15 0.006 260));
        --color-surface: light-dark(oklch(0.965 0.004 250), oklch(0.21 0.007 260));
        --color-text: light-dark(oklch(0.25 0.01 250), oklch(0.96 0.003 250));
        --color-text-secondary: light-dark(oklch(0.5 0.012 250), oklch(0.72 0.012 250));
        --color-accent: light-dark(oklch(0.52 0.16 250), oklch(0.7 0.15 250));
        --color-accent-solid: light-dark(oklch(0.5 0.17 253), oklch(0.52 0.17 253));
        --color-accent-solid-hover: light-dark(oklch(0.44 0.17 253), oklch(0.46 0.17 253));
        --color-on-accent: #fff;
        --color-border: light-dark(oklch(0.88 0.004 250), oklch(0.3 0.008 260));

        /* Status colors (light-dark — readable on both themes) */
        --color-green: light-dark(oklch(50% 0.16 145), oklch(72% 0.18 145));
        --color-yellow: light-dark(oklch(58% 0.15 70), oklch(78% 0.15 80));
        --color-red: light-dark(oklch(55% 0.22 25), oklch(70% 0.22 25));

        /* Derived surfaces */
        --color-header-bg: color-mix(in oklab, var(--color-canvas) 72%, transparent);
        --color-legal-bg: color-mix(in oklab, var(--color-surface) 82%, transparent);
        --color-diploma-bg: color-mix(in oklab, var(--color-canvas) 90%, transparent);

        /* Typography — Inter first on every platform; system stack is the fallback */
        --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
        --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

        --text-xs: 0.75rem;
        --text-xs-lh: calc(1 / 0.75);
        --text-sm: 0.875rem;
        --text-sm-lh: calc(1.25 / 0.875);
        --text-base: 1rem;
        --text-base-lh: 1.5;
        --text-lg: 1.125rem;
        --text-lg-lh: calc(1.75 / 1.125);
        --text-2xl: 1.5rem;
        --text-2xl-lh: calc(2 / 1.5);
        --text-3xl: 1.875rem;
        --text-3xl-lh: 1.2;
        --text-4xl: 2.25rem;
        --text-4xl-lh: calc(2.5 / 2.25);

        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

        /* Spacing */
        --spacing: 0.25rem;

        /* Breakpoints */
        --breakpoint-xl: 80rem;

        /* Containers */
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-xl: 36rem;
        --container-2xl: 42rem;
        --container-4xl: 56rem;

        /* Border radii */
        --radius-sm: 0.25rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-full: 3.40282e38px;

        /* Shadows */
        --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
        --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
        --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

        /* Transitions */
        --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
        --transition-duration: 0.15s;

        /* Motion scale — duration steps by travel distance + directional easing */
        --ease-out:        cubic-bezier(0.2, 0, 0, 1);        /* entries: fast start, soft land (M3 standard) */
        --ease-in:         cubic-bezier(0.4, 0, 1, 1);        /* exits: accelerate away */
        --ease-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);   /* long travel (M3 emphasized-decelerate) */
        --motion-hover:  150ms;   /* micro-interaction: hover lift */
        --motion-enter:  250ms;   /* modal/popover in, page cross-fade */
        --motion-exit:   180ms;   /* modal/popover out (shorter than in) */
        --motion-morph:  400ms;   /* shared-element title morph (long travel) */
    }

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

/* ============================================================
   RESET
   ============================================================ */

@layer reset {
    *,
    ::after,
    ::before,
    ::backdrop {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }

    ::file-selector-button {
        box-sizing: border-box;
        border: 0 solid;
        margin: 0;
        padding: 0;
    }

    html, :host {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--font-sans);
        -webkit-tap-highlight-color: transparent;
    }

    hr {
        height: 0;
        color: inherit;
        border-top-width: 1px;
    }

    abbr:where([title]) {
        -webkit-text-decoration: underline dotted;
        text-decoration: underline dotted;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: inherit;
        font-weight: inherit;
    }

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

    b, strong { font-weight: bolder; }

    code, kbd, samp, pre {
        font-family: var(--font-mono);
        font-size: 1em;
    }

    small { font-size: 80%; }

    sub, sup {
        vertical-align: baseline;
        font-size: 75%;
        line-height: 0;
        position: relative;
    }

    sub { bottom: -0.25em; }
    sup { top: -0.5em; }

    table {
        text-indent: 0;
        border-color: inherit;
        border-collapse: collapse;
    }

    :-moz-focusring { outline: auto; }
    progress { vertical-align: baseline; }
    summary { display: list-item; }

    ol, ul, menu { list-style: none; }

    img, svg, video, canvas, audio, iframe, embed, object {
        vertical-align: middle;
        display: block;
    }

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

    button, input, select, optgroup, textarea {
        font: inherit;
        font-feature-settings: inherit;
        font-variation-settings: inherit;
        letter-spacing: inherit;
        color: inherit;
        opacity: 1;
        background-color: transparent;
        border-radius: 0;
    }

    ::placeholder {
        opacity: 1;
        color: color-mix(in oklab, currentcolor 50%, transparent);
    }

    textarea { resize: vertical; }
    ::-webkit-search-decoration { -webkit-appearance: none; }

    button,
    input:where([type=button], [type=reset], [type=submit]) {
        appearance: button;
    }

    [hidden]:where(:not([hidden=until-found])) {
        display: none !important;
    }
}

/* ============================================================
   LAYOUT
   ============================================================ */

@layer layout {
    html {
        scroll-behavior: smooth;
    }

    html, body {
        transition:
            background-color 0.3s ease,
            color 0.3s ease;
    }

    .bodyLayout {
        min-height: 100dvh;
        display: flex;
        flex-direction: column;
        background-color: var(--color-canvas);
        color: var(--color-text);
    }

    .mainLayout {
        width: 100%;
        max-width: var(--breakpoint-xl);
        padding-inline: calc(var(--spacing) * 4);
        grid-template-columns: repeat(12, minmax(0, 1fr));
        margin-inline: auto;
        display: grid;
        flex: 1;
    }

    .contentLayout {
        grid-column: 1 / span 12;

        @media (width >= 64rem) {
            grid-column: 2 / span 10;
        }
    }
}

/* ============================================================
   PROSE
   ============================================================ */

@layer prose {
    .prose {
        color: var(--tw-prose-body);
        max-width: 65ch;
        font-size: 1rem;
        line-height: 1.75;

        --tw-prose-body: light-dark(oklch(37.1% 0 0), oklch(87% 0 0));
        --tw-prose-headings: light-dark(oklch(20.5% 0 0), #fff);
        --tw-prose-lead: light-dark(oklch(43.9% 0 0), oklch(70.8% 0 0));
        --tw-prose-links: light-dark(oklch(20.5% 0 0), #fff);
        --tw-prose-bold: light-dark(oklch(20.5% 0 0), #fff);
        --tw-prose-counters: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
        --tw-prose-bullets: light-dark(oklch(87% 0 0), oklch(43.9% 0 0));
        --tw-prose-hr: light-dark(oklch(92.2% 0 0), oklch(37.1% 0 0));
        --tw-prose-quotes: light-dark(oklch(20.5% 0 0), oklch(97% 0 0));
        --tw-prose-quote-borders: light-dark(oklch(92.2% 0 0), oklch(37.1% 0 0));
        --tw-prose-captions: light-dark(oklch(55.6% 0 0), oklch(70.8% 0 0));
        --tw-prose-kbd: light-dark(oklch(20.5% 0 0), #fff);
        --tw-prose-kbd-shadows: light-dark(oklab(20.5% 0 0 / 0.1), #ffffff1a);
        --tw-prose-code: light-dark(oklch(20.5% 0 0), #fff);
        --tw-prose-pre-code: light-dark(#000000, #ffffff);
        --tw-prose-pre-bg: transparent;
        --tw-prose-th-borders: light-dark(oklch(87% 0 0), oklch(43.9% 0 0));
        --tw-prose-td-borders: light-dark(oklch(92.2% 0 0), oklch(37.1% 0 0));
    }

    /* Paragraphs */
    .prose :where(p):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }

    /* Links */
    .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-links);
        font-weight: 500;
        text-decoration: underline;
    }

    /* Bold */
    .prose :where(strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-bold);
        font-weight: 600;
    }

    .prose :where(a strong, blockquote strong, thead th strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: inherit;
    }

    /* Lists */
    .prose :where(ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
        list-style-type: decimal;
    }

    .prose :where(ul):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        padding-inline-start: 1.625em;
        list-style-type: disc;
    }

    .prose :where(ol > li)::marker { color: var(--tw-prose-counters); font-weight: 400; }
    .prose :where(ul > li)::marker { color: var(--tw-prose-bullets); }

    /* Definition terms */
    .prose :where(dt):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.25em;
        font-weight: 600;
    }

    /* Horizontal rules */
    .prose :where(hr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        border-color: var(--tw-prose-hr);
        border-top-width: 1px;
        margin-top: 3em;
        margin-bottom: 3em;
    }

    /* Blockquotes */
    .prose :where(blockquote):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-quotes);
        border-inline-start-width: 0.25rem;
        border-inline-start-color: var(--tw-prose-quote-borders);
        margin-top: 1.6em;
        margin-bottom: 1.6em;
        padding-inline-start: 1em;
        font-style: italic;
        font-weight: 500;
    }

    /* Headings */
    .prose :where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        margin-top: 0;
        margin-bottom: 0.888889em;
        font-size: 2.25em;
        font-weight: 800;
        line-height: 1.11111;
    }

    .prose :where(h2):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        margin-top: 2em;
        margin-bottom: 1em;
        font-size: 1.5em;
        font-weight: 700;
        line-height: 1.33333;
    }

    .prose :where(h3):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.6em;
        margin-bottom: 0.6em;
        font-size: 1.25em;
        font-weight: 600;
        line-height: 1.6;
    }

    .prose :where(h4):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        margin-top: 1.5em;
        margin-bottom: 0.5em;
        font-weight: 600;
        line-height: 1.5;
    }

    .prose :where(h1 strong, h2 strong, h3 strong, h4 strong):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: inherit;
    }

    /* Images & media */
    .prose :where(img, picture, video):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .prose :where(picture > img):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin: 0;
    }

    /* Keyboard */
    .prose :where(kbd):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-kbd);
        box-shadow: 0 0 0 1px var(--tw-prose-kbd-shadows), 0 3px 0 var(--tw-prose-kbd-shadows);
        padding: 0.1875em 0.375em;
        border-radius: 0.3125rem;
        font-family: inherit;
        font-size: 0.875em;
        font-weight: 500;
    }

    /* Inline code */
    .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-code);
        font-size: 0.875em;
        font-weight: 600;
    }

    .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::before,
    .prose :where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))::after {
        content: "`";
    }

    .prose :where(a code, h1 code, h2 code, h3 code, h4 code, blockquote code, thead th code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: inherit;
    }

    /* Code blocks */
    .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        position: relative;
        color: var(--tw-prose-pre-code);
        background-color: var(--tw-prose-pre-bg);
        padding: 0.857143em 1.14286em;
        margin-top: 1.71429em;
        margin-bottom: 1.71429em;
        font-size: 0.875em;
        font-weight: 400;
        line-height: 1.71429;
        overflow-x: auto;
    }

    .prose :where(pre code):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        font-weight: inherit;
        color: inherit;
        font-size: inherit;
        font-family: inherit;
        line-height: inherit;
        background-color: transparent;
        border-width: 0;
        border-radius: 0;
        padding: 0;

        &::before, &::after { content: none; }
    }

    /* Tables */
    .prose :where(table):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        table-layout: auto;
        width: 100%;
        margin-top: 2em;
        margin-bottom: 2em;
        font-size: 0.875em;
        line-height: 1.71429;
    }

    .prose :where(thead):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        border-bottom: 1px solid var(--tw-prose-th-borders);
    }

    .prose :where(thead th):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-headings);
        vertical-align: bottom;
        padding: 0 0.571429em 0.571429em;
        font-weight: 600;
    }

    .prose :where(tbody tr):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        border-bottom: 1px solid var(--tw-prose-td-borders);
    }

    .prose :where(tbody tr:last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        border-bottom-width: 0;
    }

    .prose :where(th, td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        text-align: start;
    }

    .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding: 0.571429em;
    }

    /* Figures */
    .prose :where(figure):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .prose :where(figcaption):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-captions);
        margin-top: 0.857143em;
        font-size: 0.875em;
        line-height: 1.42857;
    }

    /* List items */
    .prose :where(li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
    }

    .prose :where(ol > li, ul > li):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        padding-inline-start: 0.375em;
    }

    /* Nested lists */
    .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0.75em;
        margin-bottom: 0.75em;
    }

    /* Spacing resets */
    .prose :where(hr + *, h2 + *, h3 + *, h4 + *):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
    }

    .prose :where(.prose > :first-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-top: 0;
    }

    .prose :where(.prose > :last-child):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        margin-bottom: 0;
    }

    /* Syntax highlighting — Xcode High Contrast (Light/Dark) */
    .prose .token.comment,
    .prose .token.prolog,
    .prose .token.cdata {
        color: light-dark(#1a5301, #7cb554);
        font-style: italic;
    }

    .prose .token.keyword,
    .prose .token.important {
        color: light-dark(#88007e, #fc6baa);
    }

    .prose .token.string,
    .prose .token.char,
    .prose .token.attr-value,
    .prose .token.regex {
        color: light-dark(#9b0509, #fc7467);
    }

    .prose .token.function,
    .prose .token.property,
    .prose .token.tag {
        color: light-dark(#294b4e, #72bfae);
    }

    .prose .token.class-name,
    .prose .token.builtin {
        color: light-dark(#133235, #a4fbe6);
    }

    .prose .token.number,
    .prose .token.boolean,
    .prose .token.constant {
        color: light-dark(#1c02cf, #d0bc56);
    }

    .prose .token.variable,
    .prose .token.selector,
    .prose .token.inserted {
        color: light-dark(#294b4e, #72bfae);
    }

    .prose .token.symbol,
    .prose .token.deleted {
        color: light-dark(#9b0509, #fc7467);
    }

    .prose .token.operator,
    .prose .token.punctuation {
        color: light-dark(#000000, #ffffff);
    }

    .prose .token.attr-name,
    .prose .token.atrule {
        color: light-dark(#5a4302, #e1a779);
    }

    .prose .token.decorator {
        color: light-dark(#643820, #fd8f3f);
    }

    .proseArticle {
        max-width: none;
    }
}

/* ============================================================
   COMPONENTS
   ============================================================ */

@layer components {
    /* --- Global focus (unified accent ring) --- */

    :where(a, button, [tabindex], summary):focus-visible {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

    /* --- Skip link --- */

    .skipLink {
        position: absolute;
        left: calc(var(--spacing) * 2);
        top: calc(var(--spacing) * -16);   /* parked off-screen until focused */
        z-index: 100;                       /* above the sticky header (z-index: 50) */
        padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
        border-radius: var(--radius-lg);
        background-color: var(--color-accent-solid);
        color: var(--color-on-accent);
        font-weight: var(--font-weight-semibold);
        box-shadow: var(--shadow-md);
        transition: top var(--motion-hover) var(--ease-out);

        &:focus-visible {
            top: calc(var(--spacing) * 2);
        }
    }

    /* --- Header --- */

    .header {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: var(--color-header-bg);
        backdrop-filter: saturate(180%) blur(20px);
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        border-bottom: 1px solid var(--color-border);
        view-transition-name: site-header;   /* captured identically each nav → stays fixed while root cross-fades */
    }

    .headerNav {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        width: 100%;
        max-width: var(--breakpoint-xl);
        margin-inline: auto;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 3);
        color: var(--color-text);
    }

    .headerInner {
        grid-column: 1 / span 12;
        display: flex;
        align-items: center;

        @media (width >= 64rem) {
            grid-column: 2 / span 10;
        }
    }

    .headerBrand {
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-lg);
        line-height: var(--text-lg-lh);
        letter-spacing: -0.01em;
        cursor: pointer;
        transition: color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-accent); }
    }

    .headerLinks {
        flex: 1;
        gap: calc(var(--spacing) * 6);
        justify-content: center;
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        display: none;

        @media (width >= 48rem) {
            display: flex;
        }

        & a {
            transition: color var(--transition-duration) var(--transition-timing);

            &:hover { color: var(--color-accent); }
        }
    }

    .headerActions {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        margin-left: calc(var(--spacing) * 2);
    }

    .headerToggles {
        display: flex;
        gap: calc(var(--spacing) * 4);
        border-radius: var(--radius-sm);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
    }

    /* --- Theme toggle --- */

    .themeToggle {
        cursor: pointer;
        color: var(--color-text-secondary);
        transition: color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-accent); }
    }

    .iconSun {
        display: none;
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7);
    }

    [data-theme="dark"] .iconSun { display: block; }

    .iconMoon {
        display: block;
        width: calc(var(--spacing) * 7);
        height: calc(var(--spacing) * 7);
    }

    [data-theme="dark"] .iconMoon { display: none; }

    /* --- Flag toggle --- */

    .flagToggle {
        cursor: pointer;
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
    }

    /* --- Hamburger menu --- */

    .toggleMenu {
        margin-left: auto;
        padding: calc(var(--spacing) * 2);
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);

        @media (width >= 48rem) {
            display: none;
        }

        & svg {
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
        }
    }

    .mobileMenu {
        inset: unset;
        margin: 0;
        position: fixed;
        top: calc(var(--spacing) * 14);
        right: calc(var(--spacing) * 20);
        background-color: var(--color-surface);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--color-border);
        padding: calc(var(--spacing) * 4);
        z-index: 50;
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
        transform-origin: top right;                  /* falls from the hamburger, top-right */
        transition-property: opacity, transform, display, overlay;
        transition-duration: var(--motion-exit);      /* close: 180ms */
        transition-timing-function: var(--ease-in);
        transition-behavior: allow-discrete;

        &:popover-open {
            display: block;
            opacity: 1;
            transform: translateY(0) scale(1);
            transition-duration: var(--motion-enter);  /* open: 250ms */
            transition-timing-function: var(--ease-out);
        }

        @starting-style {
            &:popover-open { opacity: 0; transform: translateY(-8px) scale(0.96); }
        }

        & a {
            transition: color var(--transition-duration) var(--transition-timing);

            &:hover { color: var(--color-accent); }
        }

        @media (width >= 48rem) {
            display: none;
        }
    }

    .mobileMenuList {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 4);
    }

    /* --- Footer (static, at flow end) --- */

    .footer {
        width: 100%;
        display: flex;
        justify-content: center;
        color: var(--color-text-secondary);
        padding-block: calc(var(--spacing) * 8);
        margin-top: calc(var(--spacing) * 12);
        border-top: 1px solid var(--color-border);
    }

    .footerLine {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        font-weight: var(--font-weight-medium);
    }

    .footerLine > *:not(:last-child)::after {
        content: "·";
        margin-inline-start: calc(var(--spacing) * 2);
        color: var(--color-text-secondary);
    }

    .footerCookie {
        text-decoration: underline;
        border-radius: var(--radius-sm);
        transition: color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-accent); }
    }

    /* --- Social link --- */

    .socialLink {
        cursor: pointer;
        color: var(--color-text-secondary);
        transition: color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-accent); }

        & svg {
            width: calc(var(--spacing) * 8);
            height: calc(var(--spacing) * 8);
        }
    }

    /* --- Buttons --- */

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: calc(var(--spacing) * 2);
        padding-inline: calc(var(--spacing) * 5);
        padding-block: calc(var(--spacing) * 3);
        border-radius: var(--radius-full);
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-base);
        cursor: pointer;
        transition:
            background-color var(--transition-duration) var(--transition-timing),
            border-color var(--transition-duration) var(--transition-timing),
            color var(--transition-duration) var(--transition-timing),
            transform var(--motion-hover) var(--ease-out);

        &:hover { transform: translateY(-2px); }
        &:active { transform: translateY(0) scale(0.97); }
    }

    .btnPrimary {
        background-color: var(--color-accent-solid);
        color: var(--color-on-accent);

        &:hover { background-color: var(--color-accent-solid-hover); }
    }

    .btnSecondary {
        background-color: var(--color-surface);
        color: var(--color-text);
        border: 1px solid var(--color-border);

        &:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }
    }

    /* --- Hero --- */

    .hero {
        margin-block: calc(var(--spacing) * 20) calc(var(--spacing) * 16);
        max-width: 46rem;
    }

    .heroTitle {
        font-size: clamp(2.5rem, 6vw, 4rem);
        line-height: 1.05;
        letter-spacing: -0.03em;
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
    }

    .heroLead {
        margin-top: calc(var(--spacing) * 6);
        max-width: 42rem;
        font-size: var(--text-lg);
        line-height: 1.6;
        color: var(--color-text-secondary);
    }

    .heroChips {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 6);
    }

    .chip {
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
        background-color: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
    }

    .heroCtas {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 3);
        margin-top: calc(var(--spacing) * 8);
    }

    /* --- Sections --- */

    .sectionWrapper {
        margin-block: calc(var(--spacing) * 16);
        scroll-margin-top: calc(var(--spacing) * 20);
    }

    .sectionTitle {
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
        letter-spacing: -0.02em;
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        margin-bottom: calc(var(--spacing) * 6);

        @media (width >= 48rem) {
            font-size: var(--text-4xl);
            line-height: var(--text-4xl-lh);
        }
    }

    /* --- Experience --- */

    .expList {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 4);
    }

    .expCard {
        border-radius: var(--radius-2xl);
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        overflow: hidden;   /* clips children, not the card's own transform */
        transition:
            box-shadow var(--motion-hover) var(--ease-out),
            transform var(--motion-hover) var(--ease-out);

        &:hover {
            box-shadow: var(--shadow-md);
        }
    }

    .expHeader {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        padding: calc(var(--spacing) * 5);
        border-bottom: 1px solid var(--color-border);
    }

    .expHeaderText { flex: 1; }

    .expTitle {
        font-size: var(--text-lg);
        line-height: var(--text-lg-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
    }

    .expRole {
        margin-top: calc(var(--spacing) * 1);
        font-weight: var(--font-weight-semibold);
        color: var(--color-accent);
    }

    .expMeta {
        margin-top: calc(var(--spacing) * 1);
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-text-secondary);
    }

    .expInterval { font-style: italic; }

    .expBody {
        padding: calc(var(--spacing) * 5);

        & ul {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 2);
            list-style-type: disc;
            padding-inline-start: 1.25rem;
            color: var(--color-text-secondary);
        }
    }

    .expFooter {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        padding: calc(var(--spacing) * 5);
        border-top: 1px solid var(--color-border);
    }

    /* --- Education (grouped compact timeline) --- */

    .eduGroups {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 8);
    }

    .eduGroupTitle {
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: var(--font-weight-bold);
        color: var(--color-text-secondary);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .eduList {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 5);
        padding-inline-start: calc(var(--spacing) * 6);
    }

    .eduList::before {
        content: "";
        position: absolute;
        inset-inline-start: 3px;
        top: 0.5em;
        bottom: 0.5em;
        width: 2px;
        background-color: var(--color-border);
    }

    .eduItem { position: relative; }

    .eduItem::before {
        content: "";
        position: absolute;
        inset-inline-start: calc(var(--spacing) * -6);
        top: 0.4em;
        width: 8px;
        height: 8px;
        border-radius: var(--radius-full);
        background-color: var(--color-accent-solid);
    }

    .eduItemMain {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: calc(var(--spacing) * 3);
    }

    .eduRole {
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .eduYear {
        font-size: var(--text-sm);
        font-weight: var(--font-weight-normal);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .eduSummary {
        margin-top: calc(var(--spacing) * 1);
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-text-secondary);
    }

    .eduTech {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 3);
    }

    .eduItemMain .diplomaWrapper { margin-right: 0; }

    .eduItemMain .diplomaThumbImg {
        width: calc(var(--spacing) * 24);
        height: calc(var(--spacing) * 16);
    }

    /* --- Writing (latest posts, no cover) --- */

    .writingList {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 3);
    }

    .writingItem {
        display: block;
        padding: calc(var(--spacing) * 5);
        border-radius: var(--radius-xl);
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        transition:
            border-color var(--transition-duration) var(--transition-timing),
            box-shadow var(--transition-duration) var(--transition-timing),
            transform var(--motion-hover) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
    }

    .writingItemHeader {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: calc(var(--spacing) * 3);
    }

    .writingItemTitle {
        font-size: var(--text-lg);
        line-height: var(--text-lg-lh);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    .writingItemDate {
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-text-secondary);
        white-space: nowrap;
    }

    .writingItemDesc {
        margin-top: calc(var(--spacing) * 2);
        color: var(--color-text-secondary);
    }

    .writingItemRead {
        display: inline-block;
        margin-top: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        font-weight: var(--font-weight-semibold);
        color: var(--color-accent);
    }

    .writingItem:hover .writingItemRead { text-decoration: underline; }

    /* --- Contact --- */

    .contactLead {
        max-width: 42rem;
        font-size: var(--text-lg);
        line-height: 1.6;
        color: var(--color-text-secondary);
        margin-bottom: calc(var(--spacing) * 6);
    }

    .contactActions {
        margin-bottom: calc(var(--spacing) * 8);
    }

    .contactLinks {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--spacing) * 5);
    }

    /* --- Diploma --- */

    .diplomaWrapper {
        display: flex;
        flex-direction: column;
        margin-right: calc(var(--spacing) * 4);
    }

    .diplomaThumbLabel {
        cursor: zoom-in;
        background: none;
        border: none;
        padding: 0;
    }

    .diplomaThumbImg {
        width: calc(var(--spacing) * 29);
        height: calc(var(--spacing) * 20);
        object-fit: contain;
    }

    .diplomaModal {
        border: none;
        padding: 0;
        max-width: none;
        max-height: none;
        width: 100%;
        height: 100%;
        background-color: var(--color-diploma-bg);
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition-property: opacity, display, overlay;
        transition-duration: var(--motion-exit);       /* close: 180ms */
        transition-timing-function: var(--ease-in);
        transition-behavior: allow-discrete;
    }

    .diplomaModal[open] {
        display: flex;
        opacity: 1;
        transition-duration: var(--motion-enter);       /* open: 250ms */
        transition-timing-function: var(--ease-out);
    }

    @starting-style {
        .diplomaModal[open] { opacity: 0; }
    }

    .diplomaModal::backdrop {
        background-color: var(--color-diploma-bg);
        opacity: 0;
        transition-property: opacity, display, overlay;
        transition-duration: var(--motion-exit);
        transition-timing-function: var(--ease-in);
        transition-behavior: allow-discrete;
    }

    .diplomaModal[open]::backdrop {
        opacity: 1;
        transition-duration: var(--motion-enter);
        transition-timing-function: var(--ease-out);
    }

    @starting-style {
        .diplomaModal[open]::backdrop { opacity: 0; }
    }

    .diplomaModalClose {
        position: fixed;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
        background: none;
        border: none;
        padding: 0;
    }

    .diplomaModalImg {
        width: 91.6667%;
        max-width: var(--container-sm);
        max-height: 80vh;
        border-radius: var(--radius-sm);
        cursor: zoom-out;
        transform: scale(0.96);                          /* scale the image, not the fullscreen container (no letterboxing) */
        transition: transform var(--motion-exit) var(--ease-in);

        @media (width >= 40rem) { max-width: var(--container-md); }
        @media (width >= 48rem) { max-width: var(--container-lg); }
        @media (width >= 64rem) { max-width: var(--container-2xl); }
        @media (width >= 80rem) { max-width: var(--container-4xl); }
    }

    .diplomaModal[open] .diplomaModalImg {
        transform: scale(1);
        transition: transform var(--motion-enter) var(--ease-out);
    }

    @starting-style {
        .diplomaModal[open] .diplomaModalImg { transform: scale(0.96); }
    }

    /* --- Badge --- */

    .badge {
        color: var(--color-text-secondary);
        background-color: color-mix(in oklab, var(--color-text) 8%, transparent);
        border-radius: var(--radius-full);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        font-weight: var(--font-weight-medium);
    }

    /* --- Blog index + tag pages --- */

    .tagPageTitle {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        letter-spacing: -0.02em;
        margin-top: calc(var(--spacing) * 6);
    }

    .tagButtons {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 6);   /* equals post startup (56px) */
        margin-bottom: calc(var(--spacing) * 8);
        align-items: center;
    }

    /* On tag pages the visible title precedes the filter row — tighten the gap. */
    .tagPageTitle + .tagButtons {
        margin-top: calc(var(--spacing) * 4);
    }

    .tagButton {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
        border-radius: var(--radius-full);
        background-color: var(--color-surface);
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-medium);
        border: 1px solid var(--color-border);
        cursor: pointer;
        transition:
            border-color var(--transition-duration) var(--transition-timing),
            color var(--transition-duration) var(--transition-timing);

        &:hover {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }

        &.tag-active {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }
    }

    /* --- Pagination (blog index + tag pages) --- */

    .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        align-items: center;
        justify-content: center;
        margin-top: calc(var(--spacing) * 10);
    }

    .pageLink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: calc(var(--spacing) * 9);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
        border-radius: var(--radius-full);
        background-color: var(--color-surface);
        color: var(--color-text-secondary);
        font-weight: var(--font-weight-medium);
        border: 1px solid var(--color-border);
        transition:
            border-color var(--transition-duration) var(--transition-timing),
            color var(--transition-duration) var(--transition-timing);
    }

    a.pageLink:hover {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

    .pageLink.page-active {
        border-color: var(--color-accent);
        color: var(--color-accent);
        font-weight: var(--font-weight-semibold);
    }

    .writingItemTags {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 3);
    }

    /* --- Blog post --- */

    .blogMain {
        margin-block: calc(var(--spacing) * 8);
    }

    .postHeader {
        margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 8);
    }

    .postHeaderTitle {
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        letter-spacing: -0.02em;
    }

    .postMeta {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
        margin-top: calc(var(--spacing) * 3);
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-text-secondary);
    }

    .postMetaTag {
        color: var(--color-accent);
        transition: text-decoration var(--transition-duration) var(--transition-timing);

        &:hover { text-decoration: underline; }
    }

    /* --- RSS link --- */

    .rssLink {
        margin-left: auto;
        display: inline-flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-text-secondary);
        transition: color var(--transition-duration) var(--transition-timing);

        @media (width >= 40rem) {
            font-size: var(--text-base);
            line-height: var(--text-base-lh);
        }

        &:hover { color: var(--color-accent); }
    }

    .rssIcon {
        width: calc(var(--spacing) * 5);
        height: calc(var(--spacing) * 5);
        flex-shrink: 0;
        fill: currentColor;

        @media (width >= 40rem) {
            width: calc(var(--spacing) * 6);
            height: calc(var(--spacing) * 6);
        }
    }

    .rssLabel {
        display: none;

        @media (width >= 40rem) {
            display: inline;
        }
    }

    /* --- Related posts + post navigation --- */

    .relatedPosts {
        margin-top: calc(var(--spacing) * 16);
    }

    .relatedTitle {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        letter-spacing: -0.02em;
        margin-bottom: calc(var(--spacing) * 6);
    }

    .postNav {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: calc(var(--spacing) * 4);
        margin-top: calc(var(--spacing) * 12);
        padding-top: calc(var(--spacing) * 8);
        border-top: 1px solid var(--color-border);
    }

    .postNavLink {
        display: flex;
        flex-direction: column;
        gap: calc(var(--spacing) * 1);
        padding: calc(var(--spacing) * 4);
        border-radius: var(--radius-xl);
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        transition:
            border-color var(--transition-duration) var(--transition-timing),
            box-shadow var(--transition-duration) var(--transition-timing),
            transform var(--motion-hover) var(--ease-out);

        &:hover {
            border-color: var(--color-accent);
            box-shadow: var(--shadow-md);
            transform: translateY(-2px);
        }
    }

    .postNavPrev {
        grid-column: 1;
        text-align: left;
    }

    .postNavNext {
        grid-column: 2;
        text-align: right;
    }

    .postNavDirection {
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        font-weight: var(--font-weight-semibold);
        color: var(--color-accent);
    }

    .postNavTitle {
        font-size: var(--text-base);
        line-height: var(--text-base-lh);
        font-weight: var(--font-weight-semibold);
        color: var(--color-text);
    }

    @media (width < 40rem) {
        .postNav {
            grid-template-columns: 1fr;
        }

        .postNavPrev,
        .postNavNext {
            grid-column: 1;
            text-align: left;
        }
    }

    /* --- Legal --- */

    .legalSection {
        width: 100%;
        max-width: var(--container-xl);
        margin-inline: auto;
        margin-block: calc(var(--spacing) * 10);
        padding: calc(var(--spacing) * 6);
        border-radius: var(--radius-lg);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-sm);
        background-color: var(--color-legal-bg);
    }

    .legalTitle {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-text);
        margin-bottom: calc(var(--spacing) * 4);
    }

    .legalSection p + p {
        margin-top: calc(var(--spacing) * 4);
    }

    .legalSection a {
        text-decoration: underline;
        color: var(--color-accent);
    }

    /* --- Copy button --- */

    .copy-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: var(--color-surface);
        color: var(--color-text-secondary);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        padding: 0.25rem 0.5rem;
        font-family: var(--font-sans);
        font-size: var(--text-xs);
        cursor: pointer;
        transition: color var(--transition-duration) var(--transition-timing),
                    border-color var(--transition-duration) var(--transition-timing);

        &:hover { color: var(--color-accent); border-color: var(--color-accent); }
    }

    /* --- 404 --- */

    .notFound {
        text-align: center;
        margin-block: calc(var(--spacing) * 20);

        & h1 {
            font-size: 6rem;
            font-weight: var(--font-weight-extrabold);
            letter-spacing: -0.03em;
            color: var(--color-accent);
        }

        & p {
            margin-block: calc(var(--spacing) * 4);
            font-size: var(--text-lg);
            color: var(--color-text-secondary);
        }

        & .btn {
            display: inline-block;
            margin-top: calc(var(--spacing) * 4);
            padding: calc(var(--spacing) * 3) calc(var(--spacing) * 6);
            background-color: var(--color-accent-solid);
            color: var(--color-on-accent);
            border-radius: var(--radius-lg);
            font-weight: var(--font-weight-semibold);

            &:hover { background-color: var(--color-accent-solid-hover); }
        }
    }
}

/* ============================================================
   UTILITIES
   ============================================================ */

@layer utilities {
    .sr-only {
        clip-path: inset(50%);
        white-space: nowrap;
        border-width: 0;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        position: absolute;
        overflow: hidden;
    }

    .high {
        font-weight: var(--font-weight-bold);
        color: var(--color-accent);
    }

    .high-green {
        font-weight: var(--font-weight-bold);
        color: var(--color-green);
    }

    .high-yellow {
        font-weight: var(--font-weight-bold);
        color: var(--color-yellow);
    }

    .high-red {
        font-weight: var(--font-weight-bold);
        color: var(--color-red);
    }
}

/* ============================================================
   ACCESSIBILITY (unlayered — overrides layered tokens/rules)
   ============================================================ */

@media (prefers-contrast: more) {
    :root,
    :host {
        --color-accent: light-dark(oklch(0.45 0.17 253), oklch(0.78 0.14 250));
        --color-text-secondary: light-dark(oklch(0.4 0.012 250), oklch(0.82 0.012 250));
        --color-border: light-dark(oklch(0.78 0.006 250), oklch(0.42 0.01 260));
    }
}

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

    html, body {
        transition: none;
    }

    *,
    ::before,
    ::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* The universal rule above does not reach the top-layer view-transition pseudos. */
    ::view-transition-group(*), ::view-transition-image-pair(*),
    ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }

    .writingItem:hover, .expCard:hover, .btn:hover, .btn:active, .postNavLink:hover { transform: none !important; }
}

@media (forced-colors: active) {
    .btnPrimary,
    .btnSecondary,
    .chip,
    .badge,
    .expCard,
    .writingItem {
        border: 1px solid currentColor;
    }

    .eduItem::before,
    .eduList::before {
        forced-color-adjust: none;
    }
}