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

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

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

        /* Colors */
        --color-orange-100: oklch(95.4% 0.038 75.164);
        --color-orange-400: oklch(75% 0.183 55.934);
        --color-orange-600: oklch(64.6% 0.222 41.116);
        --color-orange-700: oklch(55.3% 0.195 38.402);
        --color-orange-900: oklch(40.8% 0.123 38.172);
        --color-gray-50: oklch(98.5% 0.002 247.839);
        --color-gray-100: oklch(96.7% 0.003 264.542);
        --color-gray-150: oklch(95.5% 0.004 264);
        --color-gray-300: oklch(87.2% 0.01 258.338);
        --color-gray-800: oklch(27.8% 0.033 256.848);
        --color-gray-900: oklch(21% 0.034 264.665);
        --color-gray-950: oklch(13% 0.028 261.692);
        --color-white: #fff;

        /* Semantic colors (light-dark) */
        --color-body-bg: light-dark(var(--color-gray-100), var(--color-gray-900));
        --color-body-text: light-dark(var(--color-gray-800), var(--color-gray-300));
        --color-surface: light-dark(var(--color-gray-150), var(--color-gray-950));
        --color-surface-alt: light-dark(var(--color-white), var(--color-gray-900));
        --color-header-bg: light-dark(
            color-mix(in oklab, var(--color-gray-50) 75%, transparent),
            color-mix(in oklab, var(--color-gray-950) 75%, transparent)
        );
        --color-badge-text: light-dark(var(--color-gray-800), var(--color-gray-300));
        --color-badge-bg: light-dark(var(--color-orange-100), var(--color-orange-900));
        --color-tag-bg: light-dark(var(--color-gray-50), var(--color-gray-950));
        --color-legal-bg: light-dark(
            color-mix(in oklab, var(--color-white) 80%, transparent),
            color-mix(in oklab, var(--color-gray-950) 80%, transparent)
        );
        --color-diploma-bg: light-dark(var(--color-gray-100), var(--color-gray-950));

        /* Typography */
        --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color 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-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --font-weight-extrabold: 800;

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

        /* Breakpoints */
        --breakpoint-sm: 40rem;
        --breakpoint-md: 48rem;
        --breakpoint-lg: 64rem;
        --breakpoint-xl: 80rem;

        /* Containers */
        --container-xs: 20rem;
        --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-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px 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;
    }

    [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 {
        background-color: var(--color-body-bg);
        color: var(--color-body-text);
    }

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

    .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(oklch(92.2% 0 0), oklch(87% 0 0));
        --tw-prose-pre-bg: light-dark(oklch(26.9% 0 0), #00000080);
        --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;
    }

    /* Lead text */
    .prose :where([class~="lead"]):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
        color: var(--tw-prose-lead);
        margin-top: 1.2em;
        margin-bottom: 1.2em;
        font-size: 1.25em;
        line-height: 1.6;
    }

    /* 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);
        quotes: "\201C" "\201D" "\2018" "\2019";
        margin-top: 1.6em;
        margin-bottom: 1.6em;
        padding-inline-start: 1em;
        font-style: italic;
        font-weight: 500;
    }

    .prose :where(blockquote p:first-of-type)::before { content: open-quote; }
    .prose :where(blockquote p:last-of-type)::after { content: close-quote; }

    /* 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"] *)) {
        color: var(--tw-prose-pre-code);
        background-color: var(--tw-prose-pre-bg);
        padding: 0.857143em 1.14286em;
        border-radius: 0.375rem;
        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;
    }

    /* Force dark pre blocks */
    .prose pre {
        background-color: #030712 !important;
    }

    /* Syntax highlighting — Xcode Default (Dark) */
    .prose .token.comment,
    .prose .token.prolog,
    .prose .token.cdata {
        color: #7f8c99;
        font-style: italic;
    }

    .prose .token.keyword,
    .prose .token.important {
        color: #ff7ab2;
    }

    .prose .token.string,
    .prose .token.char,
    .prose .token.attr-value,
    .prose .token.regex {
        color: #fc6a5d;
    }

    .prose .token.function,
    .prose .token.property,
    .prose .token.tag {
        color: #ff816f;
    }

    .prose .token.class-name,
    .prose .token.builtin {
        color: #8ad1c3;
    }

    .prose .token.number,
    .prose .token.boolean,
    .prose .token.constant {
        color: #a79df8;
    }

    .prose .token.variable,
    .prose .token.selector,
    .prose .token.inserted {
        color: #91d462;
    }

    .prose .token.symbol,
    .prose .token.deleted {
        color: #fc6a5d;
    }

    .prose .token.operator,
    .prose .token.punctuation {
        color: #ffffff;
    }

    .prose .token.attr-name,
    .prose .token.atrule {
        color: #ffc799;
    }

    .prose .token.decorator {
        color: #fd8f3f;
    }

    /* Heading scroll margin */
    .prose :where(h1, h2, h3, h4, h5, h6)[id] {
        scroll-margin-top: 5rem;
    }

    .proseArticle {
        max-width: none;
    }
}

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

@layer components {
    /* --- Header --- */

    .header {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 50;
        background-color: var(--color-header-bg);
    }

    .headerNav {
        display: flex;
        align-items: center;
        padding-inline: calc(var(--spacing) * 4);
        padding-block: calc(var(--spacing) * 2);
        color: var(--color-orange-600);
        border-bottom: 1px solid;
    }

    .headerBrand {
        font-weight: var(--font-weight-semibold);
        font-size: var(--text-lg);
        line-height: var(--text-lg-lh);
        cursor: pointer;
    }

    .headerLinks {
        flex: 1;
        gap: calc(var(--spacing) * 4);
        justify-content: center;
        font-weight: var(--font-weight-semibold);
        display: none;

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

    .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;
    }

    .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);

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--color-orange-400);
        }

        @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-alt);
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-xl);
        border: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);
        z-index: 50;

        &:popover-open {
            display: flex;
            flex-direction: column;
            gap: calc(var(--spacing) * 4);
        }

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

    /* --- Footer --- */

    .footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(var(--spacing) * 1);
        color: var(--color-orange-600);
        padding-block: calc(var(--spacing) * 3);
        background-color: var(--color-header-bg);
        border-top: 1px solid;
        z-index: 50;
    }

    .footerLinks {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: calc(var(--spacing) * 4);
    }

    .footerBottom {
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 2);
        margin-top: calc(var(--spacing) * 1);
        font-weight: var(--font-weight-extrabold);
    }

    .footerCookie {
        text-decoration: underline;
        border-radius: var(--radius-sm);

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--color-orange-600);
        }
    }

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

    .socialLink {
        cursor: pointer;

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

    /* --- Role --- */

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

    .roleTitle {
        text-align: center;
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-orange-600);

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

    .roleDivider {
        border-top: 1px solid var(--color-orange-700);
        margin-block: calc(var(--spacing) * 4);
        margin-inline: auto;
    }

    .roleIntro {
        margin-top: calc(var(--spacing) * 2);
        font-size: var(--text-base);
        line-height: var(--text-base-lh);
        color: var(--color-body-text);

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

    /* --- Experiences --- */

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

    .sectionTitle {
        font-size: var(--text-3xl);
        line-height: var(--text-3xl-lh);
        font-weight: var(--font-weight-bold);
        color: var(--color-orange-600);

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

    .expCard {
        border-radius: var(--radius-2xl);
        margin-block: calc(var(--spacing) * 4);
        border: 1px solid var(--color-orange-700);
    }

    .expHeader {
        display: flex;
        align-items: center;
        background-color: var(--color-surface);
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        border-bottom: 1px solid var(--color-orange-700);
        gap: calc(var(--spacing) * 2);
    }

    .expHeaderText {
        flex: 1;
        padding: calc(var(--spacing) * 4);

        & h2 { font-weight: var(--font-weight-bold); }
    }

    .expInterval { font-style: italic; }

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

        & ul {
            margin-bottom: calc(var(--spacing) * 2);
            list-style-type: disc;
            list-style-position: inside;
        }
    }

    .expFooter {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        background-color: var(--color-surface);
        border-bottom-left-radius: var(--radius-2xl);
        border-bottom-right-radius: var(--radius-2xl);
        border-top: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);
    }

    /* --- Projects --- */

    .projectsGrid {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: calc(var(--spacing) * 6);

        @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    .projCard {
        border-radius: var(--radius-2xl);
        margin-block: calc(var(--spacing) * 4);
        border: 1px solid var(--color-orange-700);
        display: flex;
        flex-direction: column;
    }

    .projHeader {
        background-color: var(--color-surface);
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        border-bottom: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);

        & h2 { font-weight: var(--font-weight-bold); }
    }

    .projBody {
        padding: calc(var(--spacing) * 4);
        flex: 1;
    }

    .projFooter {
        background-color: var(--color-surface);
        border-bottom-left-radius: var(--radius-2xl);
        border-bottom-right-radius: var(--radius-2xl);
        border-top: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* --- 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;
    }

    .diplomaModal[open] {
        display: flex;
    }

    .diplomaModal::backdrop {
        background-color: var(--color-diploma-bg);
    }

    .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;

        @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); }
    }

    /* --- Badge --- */

    .badge {
        color: var(--color-badge-text);
        border-radius: var(--radius-full);
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 2);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        font-weight: var(--font-weight-bold);
        background-color: var(--color-badge-bg);
    }

    /* --- Blog index --- */

    .tagButtons {
        display: flex;
        flex-wrap: wrap;
        gap: calc(var(--spacing) * 2);
        margin-bottom: calc(var(--spacing) * 8);
        align-items: center;
    }

    .tagButton {
        padding-inline: calc(var(--spacing) * 3);
        padding-block: calc(var(--spacing) * 1);
        border-radius: var(--radius-full);
        background-color: var(--color-tag-bg);
        font-weight: var(--font-weight-medium);
        border: 1px solid;
        cursor: pointer;

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

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

    .postList {
        display: grid;
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: calc(var(--spacing) * 6);

        @media (width >= 40rem) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (width >= 64rem) {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }
    }

    /* --- Blog card --- */

    .blogCard {
        border-radius: var(--radius-2xl);
        border: 1px solid var(--color-orange-700);
        display: flex;
        flex-direction: column;
        margin-block: calc(var(--spacing) * 4);
        outline: none;
        transition:
            color var(--transition-duration) var(--transition-timing),
            box-shadow var(--transition-duration) var(--transition-timing);

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

        &:focus {
            box-shadow: 0 0 0 2px var(--color-orange-600);
        }
    }

    .blogCardTitle {
        background-color: var(--color-surface);
        border-top-left-radius: var(--radius-2xl);
        border-top-right-radius: var(--radius-2xl);
        border-bottom: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);

        & span {
            font-weight: var(--font-weight-bold);
            font-size: var(--text-lg);
            line-height: var(--text-lg-lh);
        }
    }

    .blogCardImage {
        flex: 1;
        padding: calc(var(--spacing) * 0.5);
    }

    .blogCardBottom {
        background-color: var(--color-surface);
        border-bottom-left-radius: var(--radius-2xl);
        border-bottom-right-radius: var(--radius-2xl);
        border-top: 1px solid var(--color-orange-700);
        padding: calc(var(--spacing) * 4);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .blogCardTags {
        display: flex;
        align-items: center;
        gap: calc(var(--spacing) * 3);
    }

    .blogCardDate {
        font-size: var(--text-sm);
        line-height: var(--text-sm-lh);
        color: var(--color-body-text);
    }

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

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

    .postImage {
        margin-inline: auto;
        margin-block: calc(var(--spacing) * 6);
        max-width: var(--container-xs);
        height: auto;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-sm);
    }

    .postTitle {
        font-size: var(--text-2xl);
        line-height: var(--text-2xl-lh);
        color: var(--color-orange-600);
        font-weight: var(--font-weight-semibold);
        margin-bottom: calc(var(--spacing) * 2);
    }

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

        & li + li { margin-top: 0.375rem; }
    }

    .postIndexButton {
        scroll-margin-top: calc(var(--spacing) * 20);
        cursor: pointer;

        &:hover { color: var(--color-orange-600); }
    }

    .postIndexNumber {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: var(--color-orange-600);
        color: var(--color-white);
        font-size: var(--text-xs);
        line-height: var(--text-xs-lh);
        font-weight: var(--font-weight-bold);
        border-radius: var(--radius-full);
        width: calc(var(--spacing) * 6);
        height: calc(var(--spacing) * 6);
        aspect-ratio: 1;
        margin-right: calc(var(--spacing) * 0.5);
    }

    /* --- Blog bottom bar --- */

    .blogBottom {
        position: sticky;
        bottom: calc(var(--spacing) * 24);
        z-index: 10;
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;
        gap: calc(var(--spacing) * 4);
        pointer-events: none;
    }

    .blogBackButton {
        margin-right: auto;
    }

    /* --- Action buttons --- */

    .upButton,
    .backButton {
        pointer-events: auto;
        cursor: pointer;
        padding: calc(var(--spacing) * 1);
        border-radius: var(--radius-full);
        background-color: var(--color-orange-600);
        color: var(--color-white);
        box-shadow: var(--shadow-lg);
        transition:
            color var(--transition-duration) var(--transition-timing),
            background-color var(--transition-duration) var(--transition-timing),
            box-shadow var(--transition-duration) var(--transition-timing);

        &:hover { background-color: var(--color-orange-700); }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px var(--color-orange-400);
        }

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

    /* --- 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);

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

        &:hover { color: var(--color-orange-600); }

        &:focus { outline: none; }

        &:focus-visible {
            box-shadow: 0 0 0 2px var(--color-orange-600);
        }
    }

    .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;
        }
    }

    /* --- 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);
        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);
        margin-bottom: calc(var(--spacing) * 4);
    }

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

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

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

    .copy-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        background: oklch(13% 0.028 261.692 / 0.8);
        color: var(--color-orange-600);
        border: 1px solid var(--color-orange-600);
        border-radius: var(--radius-sm);
        padding: 0.25rem 0.5rem;
        font-size: var(--text-xs);
        cursor: pointer;
        transition: opacity var(--transition-duration) var(--transition-timing);

        &:hover { opacity: 1; }
    }

    /* --- View Transitions --- */

    @view-transition {
        navigation: auto;
    }

    .blogCardImage img,
    .postImage {
        view-transition-name: var(--vt-name);
    }

    ::view-transition-group(*) {
        animation-duration: 0.4s;
    }

    /* --- 404 --- */

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

        & h1 {
            font-size: 6rem;
            font-weight: var(--font-weight-extrabold);
            color: var(--color-orange-600);
        }

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

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

            &:hover { background-color: var(--color-orange-700); }
        }
    }
}

/* ============================================================
   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-orange-600);
    }
}