:root {
    /* ── Spacing scale (4px base) ── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-9: 36px;
    --sp-10: 40px;
    --sp-12: 48px;
    --sp-16: 64px;
    --sp-20: 80px;
    --sp-25: 100px;

    /* ── Common layout spacing ── */
    --gutter: 5px;
    --gap-sm: 10px;
    --gap-md: 20px;
    --gap-lg: 30px;
    --gap-xl: 45px;
    --section-block: 50px;
    --section-block-lg: 100px;
    --footer-offset: 200px;

    /* ── Typography & layout ── */
    --font-body: "Montserrat", sans-serif;
    --font-ui: "Source Sans Pro", "Hiragino Sans GB", "Microsoft JhengHei", arial, helvetica, sans-serif;
    --font-reading: "Open Sans", sans-serif;
    --font-display-serif: "Instrument Serif", Georgia, serif;
    --page-inline-size: 1000px;
    --content-inline-padding: var(--gap-lg);
    --header-z-index: 99999;
    --color-page-bg: #f6f7fb;
    --color-text: #1a1d2e;
    --color-text-muted: #5c6070;
    --color-white: #fff;
    --color-surface: #fff;
    --color-surface-bright: #fafbff;
    --color-surface-soft: #f2f3f8;
    --color-surface-softest: #f7f8fc;
    --color-border-strong: #555;
    --color-border-soft: #e2e4ea;
    --color-border-muted: #c5c8d0;
    --color-dark: #343a40;
    --color-darkest: #242b31;
    --color-footer-bg: #22272d;
    --color-menu-fg: #232323;
    --color-menu-bg: #f0f1f5;
    --color-menu-track: #e8e9ee;
    --color-menu-border: #c8cad0;
    --color-link: darkorange;
    --color-brand-blue: #2498e3;
    --color-brand-blue-strong: #007bff;
    --color-brand-green: #90C404;
    --color-brand-cyan: rgba(0, 182, 195, 1);
    --color-brand-green-bright: rgba(74, 194, 63, 1);
    --color-danger: red;
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.03);
    --shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.10), 0 4px 10px rgba(0, 0, 0, 0.04);
    --transition-quick: .1s ease;
    --transition-base: .25s cubic-bezier(.4, 0, .2, 1);
    --transition-slow: .4s cubic-bezier(.4, 0, .2, 1);
    --transition-panel: .5s cubic-bezier(0.77, 0.2, 0.05, 1);
    --radius-xs: 4px;
    --radius-small: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-pill: 50px;
    --radius-round: 50%;
    --gradient-brand: linear-gradient(to right, var(--color-brand-cyan) 0%, var(--color-brand-green-bright) 100%);
    --gradient-brand-inverse: linear-gradient(to left, var(--color-brand-cyan) 0%, var(--color-brand-green-bright) 100%);
    --gradient-link: linear-gradient(to right, var(--color-brand-blue-strong) 0%, var(--color-brand-blue) 100%);
    --gradient-orange: linear-gradient(to right, orange 0%, #dd6f00 100%);
    --gradient-magenta: linear-gradient(to right, darkorchid 0%, #ff0ccd 100%);
    --gradient-purple: linear-gradient(to right, darkorchid 0%, #8330cc 100%);
    --gradient-violet: linear-gradient(to right, mediumvioletred 0%, darkorchid 100%);
    --gradient-warm: linear-gradient(to right, orangered 0%, orange 100%);
    --gradient-blue: linear-gradient(to right, dodgerblue 0%, blue 100%);
    --gradient-gray: linear-gradient(to right, dimgray 0%, lightslategray 100%);
    --gradient-red: linear-gradient(to right, #c02f2f 0%, var(--color-danger) 100%);
    --gradient-screen-dark: linear-gradient(to right, #4a5157 0%, var(--color-darkest) 100%);
    --gradient-screen-darker: linear-gradient(to right, #4a5157 0%, #1c2b31 100%);
    --gradient-tile: linear-gradient(to bottom, #4c535a 0%, #3d434a 100%);
    --gradient-tech-stack: linear-gradient(to bottom, #4c535a 0%, #4d555e 100%);
    --gradient-button: linear-gradient(to bottom, gold 0%, var(--color-link) 100%);
    --gradient-button-hover: linear-gradient(to bottom, gold 0%, orange 100%);
    --gradient-button-disabled: linear-gradient(to bottom, #eee 0%, #ddd 100%);
    --gradient-button-dark: linear-gradient(to bottom, rgb(49, 86, 89) 0%, rgb(37, 48, 49) 100%);
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

html, body {
    font-size: 1rem;
    /*overflow-x: hidden;*/
    max-inline-size: 100%;
}

body {
    /*background: #343a40;*/
    background: var(--color-page-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    animation: body 1s;
    margin: 0;
}

::selection {
    background: rgba(36, 152, 227, .22);
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--color-brand-blue);
    outline-offset: 2px;
}

@supports (scrollbar-width: thin) {
    html {
        scrollbar-width: thin;
        scrollbar-color: var(--color-border-muted) transparent;
    }
}

h1 {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 50px;
    text-align: center;
    letter-spacing: -0.02em;
}

h3 {
    font-size: 32px;
    letter-spacing: -0.01em;
}

h4 {
    font-size: 24px;
    margin-block: 1.5em 0.5em;
}

h5 {
    font-size: 18px;
    margin-block: 1.5em 0.5em;
}

a {
    text-decoration: none;
    color: var(--color-link);
    font-weight: bold;
    cursor: pointer;
    display: inline-block;
    transition: color var(--transition-base), opacity var(--transition-base);
}

hr {
    border: 0;
    border-block-end: 1px solid var(--color-border-strong);
    height: 0;
}

.main-footer hr {
    inline-size: 50%;
    margin-inline-start: 0;
}


header {
/*    background: #22272d;*/
    position: fixed;
    inline-size: 100%;
    inset-block-start: 0;
    z-index: var(--header-z-index);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    background: rgba(34, 39, 45, .88);
    border-block-end: 1px solid rgba(255, 255, 255, .06);
}

p {
    font-size: 16px;
    line-height: 1.65;
}