/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-Italic-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(assets/fonts/Fraunces/Fraunces-VariableFont_SOFT\,WONK\,opsz\,wght.ttf) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --accent-color: oklch(0.53 0.14 130.83);
    --surface-color: light-dark(oklch(from var(--accent-color) 0.95 0.002 h), oklch(from var(--accent-color) 0.2 0.002 h));
    --text-color: light-dark(oklch(from var(--accent-color) 0.2 0.002 h), oklch(from var(--accent-color) 0.95 0.002 h));

    --header-max-inline-size: 140ch;
    --page-max-inline-size: 96rem;

    --_header-auto-margin-size: max(2rem, calc((100dvi - var(--header-max-inline-size)) / 2));
    --_page-auto-margin-size: max(2rem, calc((100dvi - var(--page-max-inline-size)) / 2));

    --_color-scheme-operation-sign: 1;

    background-color: var(--surface-color);
    box-sizing: border-box;
    color: var(--text-color);
    color-scheme: dark only;
    font-family: 'Fraunces', serif;
    font-optical-sizing: auto;
    font-size: 1rem;
    font-style: normal;
    font-weight: normal;
    font-variant-numeric: tabular-nums;
    font-variation-settings:
        'SOFT' 100,
        'TNUM' 1,
        'WONK' 1;
    overflow-inline: clip;
    scroll-behavior: smooth;
    scrollbar-color: oklch(from var(--accent-color) 0.5 0.1 h) transparent;
    scrollbar-gutter: stable;
}

:root:has(dialog:open),
:root:has(project-section::part(root):open),
:root:has(.story:open) {
    overflow: hidden;
}

/*
@media (prefers-color-scheme: light) {
    :root {
        --_color-scheme-operation-sign: -1;
    }
}
*/

*,
*::before,
*::after {
    box-sizing: inherit;
    font: inherit;
}

::-webkit-selection {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h / 0.5);
    color: var(--surface-color);
}

::-moz-selection {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h / 0.5);
    color: var(--surface-color);
}

::-ms-selection {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h / 0.5);
    color: var(--surface-color);
}

::selection {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h / 0.5);
    color: var(--surface-color);
}

body {
    margin: 0;
}

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

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* RESET */

a {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    text-decoration: underline;
}

a[href^="tel:"]::after,
a[href^="mailto:"]::after {
    background-color: currentColor;
    block-size: 1em;
    content: '';
    display: inline flex;
    inline-size: 1em;
    margin-inline-start: 0.25em;
    mask-mode: alpha;
    mask-position: center;
    mask-size: contain;
    vertical-align: text-bottom;
}

a[href^="tel:"]::after {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M757.23-160q-101.15 0-207.38-50.65-106.23-50.66-197.39-142.2-91.15-91.53-141.81-197.38Q160-656.08 160-757.23q0-18.33 12-30.55Q184-800 202-800h98.92q16.31 0 28.46 10.27 12.16 10.27 16.47 26.35L365.69-668q2.77 16.77-1 29.31t-13.31 20.54l-87.76 81.84q24.61 44.69 54.42 83.04 29.81 38.35 63.58 72.65 34.84 34.85 75 64.81 40.15 29.96 88.15 56.58l85.54-87.08q9.77-10.54 21.96-13.88 12.19-3.35 26.96-1.35l84.15 17.23q16.31 4 26.47 16.43Q800-315.46 800-299.38V-202q0 18-12.22 30t-30.55 12ZM244.85-573.85l76.77-70.61q3.84-3.08 5-8.46 1.15-5.39-.39-10l-17.77-84.77q-1.54-6.16-5.38-9.23-3.85-3.08-10-3.08H211q-4.62 0-7.69 3.08-3.08 3.07-3.08 7.69 1.15 41 12.85 85.61 11.69 44.62 31.77 89.77Zm338 333.39q40.53 20.08 86.42 29.69 45.88 9.62 79.96 10.31 4.62 0 7.69-3.08 3.08-3.08 3.08-7.69v-80.31q0-6.15-3.08-10-3.07-3.84-9.23-5.38l-74-15.16q-4.61-1.54-8.07-.38-3.47 1.15-7.31 5l-75.46 77Zm-338-333.39Zm338 333.39Z"/></svg>');
}

a[href^="mailto:"]::after {
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M178.46-200q-24.58 0-41.52-16.94Q120-233.88 120-258.46v-443.08q0-24.58 16.94-41.52Q153.88-760 178.46-760h603.08q24.58 0 41.52 16.94Q840-726.12 840-701.54v443.08q0 24.58-16.94 41.52Q806.12-200 781.54-200H178.46ZM480-482.36 153.85-698.72v440.26q0 10.77 6.92 17.69 6.92 6.92 17.69 6.92h603.08q10.77 0 17.69-6.92 6.92-6.92 6.92-17.69v-440.26L480-482.36Zm0-38.46 312.72-205.33H167.95L480-520.82Zm-326.15-177.9v-27.43 467.69q0 10.77 6.92 17.69 6.92 6.92 17.69 6.92h-24.61v-464.87Z"/></svg>');
}

a[target="_blank"]::after {
    background-color: currentColor;
    block-size: 1em;
    content: '';
    display: inline flex;
    inline-size: 1em;
    margin-inline-start: 0.25em;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M218.46-160q-24.58 0-41.52-16.94Q160-193.88 160-218.46v-523.08q0-24.58 16.94-41.52Q193.88-800 218.46-800h224.46v33.85H218.46q-9.23 0-16.92 7.69-7.69 7.69-7.69 16.92v523.08q0 9.23 7.69 16.92 7.69 7.69 16.92 7.69h523.08q9.23 0 16.92-7.69 7.69-7.69 7.69-16.92v-224.46H800v224.46q0 24.58-16.94 41.52Q766.12-160 741.54-160H218.46Zm169.13-203.33-24.1-24.26 378.56-378.56H547.54V-800H800v252.46h-33.85V-741.9L387.59-363.33Z"/></svg>');
    mask-mode: alpha;
    mask-position: center;
    mask-size: contain;
    vertical-align: text-bottom;
}

a:focus-visible,
a:hover {
    text-decoration: none;
}

:visited {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.5) 0.1 h);
}

strong {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    font-weight: 700;
}

em {
    font-style: italic;
}

h3 {
    font-size: 1.5rem;
    font-weight: bold;
}

h4 {
    font-weight: bold;
    margin: 0.25em 0;
}

ul {
    list-style-type: circle;
    margin: 0.5em;
    padding: 0 0 0 0.875em;
}

ul > li {
    padding: 0.5em 0 0.5em 1em;
}

ul > li::marker {
    font-size: 1.5em;
    line-height: 1;
}

dl {
    margin: 0;
    padding-block: 2em;
    position: relative;
}

dl::before {
    background-image: linear-gradient(
        to top,
        transparent,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.5) 2em,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.5) calc(100% - 2em),
        transparent
    );
    content: '';
    inline-size: calc(1rem / 16);
    inset-block: 0;
    inset-inline-start: 0.5rem;
    position: absolute;
    z-index: -1;
}

dt {
    align-items: center;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    display: flex;
    font-size: 87.5%;
    gap: 2rem;
    margin-block-end: 0.5rem;
}

dt::before {
    aspect-ratio: 1;
    background-color: var(--surface-color);
    border: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.5);
    content: '';
    display: flex;
    inline-size: 1rem;
    translate: calc(0.5rem / 16);

    @supports (corner-shape: bevel) {
        border-radius: calc(Infinity * 1em);
        corner-shape: bevel;
    }

    @supports not (corner-shape: bevel) {
        rotate: 45deg;
    }
}

dd {
    margin-block-end: 2em;
    margin-inline-start: 3rem;
}

:root:has(.dialog-open),
:root:has(dialog:open) {
    overflow: clip;
}

:target {
    scroll-margin-block: 4rem;
}

:focus-visible {
    outline: medium solid oklch(from var(--text-color) l c h / 0.8);
    outline-offset: 0.125rem;
}

/* HEADER */

.header {
    block-size: 30rem;
    border-block-end: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: flex;
    flex-direction: column;
    position: relative;
    
    @media screen and (min-width: 60rem) {
        block-size: 42rem;
    }

    @media screen and (min-width: 120rem) {
        block-size: 52rem;
    }
}

.header::after {
    background-image: 
        radial-gradient(
            ellipse at 50% 100%,
            oklch(from var(--accent-color) l c h / 0.3) 0%,
            transparent 80%
        );
    block-size: 100%;
    content: '';
    inline-size: 100%;
    inset-block-end: 0;
    position: absolute;
    z-index: -1;
}

.header::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: contain;
    content: '';
    inset: 0;
    mix-blend-mode: overlay;
    opacity: 0.2;
    position: absolute;
    z-index: 0;
}

.header__nav {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    inset-block-start: 0;
    inset-inline: 0;
    justify-content: space-between;
    z-index: 2;

    @media screen and (min-width: 50rem) {
        flex-wrap: nowrap;
        padding-inline-start: 2rem;
    }
}

.header__title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02ch;
    line-height: 1;
    margin: 0;
    padding-block: 1rem;
    padding-inline: 2rem;
    text-wrap: pretty;

    @media screen and (min-width: 50rem) {
        font-size: 2rem;
        padding-inline: 0;
    }
}

.header__title span {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    font-weight: 400;
    white-space: nowrap;
}

.header__menu {
    align-self: stretch;
    border-block-end: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: flex;
    font-size: 1.25rem;
    font-weight: 500;
    flex-shrink: 0;
    list-style-type: none;
    max-inline-size: 100%;
    overflow-block: hidden;
    overflow-inline: auto;
    margin: 0 0 0 auto;
    mask-mode: luminance;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
    
    @media screen and (min-width: 60rem) {
        font-size: 1.5rem;
        gap: 0;
        mask-image: linear-gradient(to right, black, white 4rem);
        padding: 0 2rem 0 4rem;
    }
}

.header__menu li {
    padding: 0;
}

.header__menu a {
    align-items: center;
    block-size: 100%;
    color: var(--text-color);
    display: flex;
    padding: 1rem;
    text-decoration: none;
    transition: 0.15s all ease;
    white-space: nowrap;
}

@media screen and (min-width: 50rem) {
    .header__menu a {
        padding: 2rem 1rem;
        white-space: nowrap;
    }
}

.header__menu::before {
    background-image: linear-gradient(to right, transparent, var(--accent-color), transparent);
    block-size: 0.0625rem;
    inset-block-end: 0;
    content: '';
    inset-inline-start: anchor(--active-menu-link start);
    inset-inline-end: anchor(--active-menu-link end);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: inset-inline-start 0.15s ease, inset-inline-end 0.15s ease, opacity 0.15s ease;
    z-index: 0;
}

.header__menu::after {
    background-image: radial-gradient(
        ellipse at 50% 100%,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h / 0.3) 0%,
        transparent 50%
    );
    block-size: 100%;
    inset-block-end: 0;
    content: '';
    inset-inline-start: anchor(--active-menu-link start);
    inset-inline-end: anchor(--active-menu-link end);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: inset-inline-start 0.15s ease, inset-inline-end 0.15s ease, opacity 0.15s ease;
    z-index: 0;
}

.header__menu:has(a:focus-visible)::before,
.header__menu:has(a:focus-visible)::after,
.header__menu:has(a:hover)::before,
.header__menu:has(a:hover)::after {
    opacity: 1;
}

.header__menu a:focus-visible,
.header__menu a:hover {
    anchor-name: --active-menu-link;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
}

.header__hero {
    block-size: 100%;
    display: flex;
    min-block-size: 0;
    overflow: hidden;
    position: relative;
}

.header__catch {
    align-content: end;
    flex-grow: 1;
    filter:
        drop-shadow(0 0 1rem var(--surface-color)),
        drop-shadow(0 0 2rem var(--surface-color)),
        drop-shadow(0 0 4rem var(--surface-color)),
        drop-shadow(0 0 8rem var(--surface-color)),
        drop-shadow(0 0 16rem var(--surface-color))
    ;
    font-size: 1.6rem;
    letter-spacing: 0.03rem;
    white-space: nowrap;
    z-index: 2;

    @media screen and (min-width: 120rem) {
        font-size: 2.1rem;
    }
}

.header__catch::after {
    background-image: linear-gradient(to top, rgb(0 0 0 / 80%) 10%, transparent);
    block-size: 14rem;
    content: '';
    inset-block-end: 0;
    inset-inline: 0;
    position: absolute;
    z-index: -1;
}

.header__catch p {
    text-align: center;
}

.header__photo {
    --_scale-adjust: 4rem;

    block-size: calc(100% + var(--_scale-adjust));
    inline-size: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    z-index: 1;

    @media screen and (min-width: 20rem) {
        --_scale-adjust: 10rem;
    }

    @media screen and (min-width: 60rem) {
        --_scale-adjust: 16rem;

        margin-block-start: -2rem;
    }
    
    @media screen and (min-width: 90rem) {
        object-fit: contain;
    }

    @media screen and (min-width: 120rem) {
        --_scale-adjust: 22rem;

        margin-block-start: -4rem;
    }
}

/* PAGE */

.content-wrapper {
    font-size: 1.25rem;
    line-height: 1.5;
}

.content-wrapper h2 {
    anchor-name: --title;
    border-block-end: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.02ch;
    line-height: 2;
    margin-block-start: 2em;
    margin-block-end: 1em;
    position: relative;
}

.content-wrapper h2::before {
    background-image: linear-gradient(to right, transparent, var(--accent-color), transparent);
    block-size: 0.0625rem;
    content: '';
    inline-size: 16ch;
    inset-block-end: 0;
    inset-inline-start: var(--_page-auto-margin-size);
    pointer-events: none;
    position: absolute;
    translate: -25% 0;
    z-index: 0;
}

.content-wrapper h2::after {
    background-image: radial-gradient(
        ellipse at 50% 100%,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h / 0.3) 0%,
        transparent 50%
    );
    block-size: 100%;
    content: '';
    inline-size: 16ch;
    inset-block-end: 0;
    inset-inline-start: var(--_page-auto-margin-size);
    pointer-events: none;
    position: absolute;
    translate: -25% 0;
    z-index: 0;
}


.content-wrapper h2.full-page {
    padding-inline: 1rem;
    
    @media screen and (min-width: 60rem) {
        padding-inline: 4rem;
    }
}

.content-wrapper h2.full-page::before,
.content-wrapper h2.full-page::after {
    inset-inline-start: 4rem;
}

.content-wrapper h2 svg {
    block-size: 1.25em;
    fill: currentColor;
    inline-size: 1.25em;
    margin-inline-end: 0.25em;
    vertical-align: text-bottom;
}

.page-auto-margin {
    padding-inline: var(--_page-auto-margin-size);
}

.full-page {
    padding-inline: 2rem;
}

/* FOOTER */

footer {
    align-items: center;
    background-color: oklch(from var(--surface-color) calc(l - 0.05) c h);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;;
    justify-content: space-between;
    line-height: 1.5;
    margin-block-start: 5rem;
    padding: 2rem;
}

footer details {
    inline-size: fit-content;
}

footer p {
    max-inline-size: 60ch;
}

footer summary {
    cursor: pointer;
    inline-size: 100%;
    padding: 1rem 0;
}

footer h2 {
    display: inline;
    font-weight: bold;
    text-decoration: underline;
}

/* UTILITIES */

@keyframes catch-phrase-animation {
    0% {
        filter: blur(4rem);
        inset-block-start: -4rem;
        opacity: 0;
    }

    100% {
        filter: blur(0);
        inset-block-start: 0;
        opacity: 1;
    }
}

.catch-phrase-animation__chunk {
    animation: catch-phrase-animation 0.8s ease-out forwards;
    animation-delay: calc(sibling-index() * 0.3s);
    filter: blur(4rem);
    inset-block-start: -4rem;
    opacity: 0;
    position: relative;
}

@media (prefers-reduced-motion: reduce) {
    .catch-phrase-animation__chunk {
        filter: none;
        inset-block-start: 0;
        opacity: 1;
    }
}

.catch-phrase-animation {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media screen and (min-width: 60rem) {
    .catch-phrase-animation {
        display: block;
        position: relative;
    }
    
    .catch-phrase-animation__part {
        position: absolute;
    }

    .catch-phrase-animation__part--left {
        inset-block-end: 18rem;
        inset-inline-start: 50%;
        margin-inline-start: -17rem;
        transform: translate(-50%) perspective(21.1rem) rotate3d(1.7, 2.3, -0.5, 50.1deg);
        transform-origin: center;
    }

    .catch-phrase-animation__part--right {
        inset-block-end: 20.5rem;
        inset-inline-start: 50%;
        margin-inline-start: 20.9rem;
        transform: translate(-50%) perspective(20.6rem) rotate3d(-14.4, 15.4, -5.6, -49.4deg);
        transform-origin: center;
    }
}

@media screen and (min-width: 120rem) {
    .catch-phrase-animation__part--left {
        inset-block-end: 23.9rem;
        margin-inline-start: -21.7rem;
    }

    .catch-phrase-animation__part--right {
        inset-block-end: 27.2rem;
        margin-inline-start: 26.9rem;
    }
}

.who-am-i {
    column-gap: 2rem;
}

@media screen and (min-width: 60rem) {
    .who-am-i {
        display: grid;
        grid-template-areas:
            "photo      details"
            "more-infos details"
        ;
        grid-template-columns: 20% 1fr;
        grid-template-rows: auto 1fr;
    }
}

.who-am-i__photo {
    border-radius: 1rem;
    inline-size: 100%;
    margin-block-end: 1rem;
    min-inline-size: 0;
    overflow: hidden;
}

@media screen and (min-width: 30rem) {
    .who-am-i__photo {
        border-radius: 2rem;
        float: inline-start;
        inline-size: 30%;
        margin: 0 2rem 2rem 0;
    }
}

@media screen and (min-width: 60rem) {
    .who-am-i__photo {
        float: none;
        inline-size: 100%;
        grid-area: photo;
        margin: 0;
    }
}

.who-am-i__details {
    grid-area: details;
}

.who-am-i__details h3 {
    clear: both;
}

.who-am-i__more-infos {
    grid-area: more-infos;
}

#projets h2 {
    margin-block-end: 0;
}

.projects:has(project-section) {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

project-section,
other-project-card {
    --main-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
}

project-section::part(root) {
    background-color: transparent;
    border: none;
    border-block-end: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: block;
    inline-size: 100%;
    padding: 0 0 2rem;
    position: static;
}

project-section::part(root):open {
    background-color: transparent;
    block-size: 100dvb;
    inset: 0;
    margin: 0;
    max-block-size: none;
    max-inline-size: none;
    overflow: hidden;
    position: fixed;
}

project-section::part(root):open::backdrop {
    background-color: rgb(0 0 0 / 0.7);
}

project-section::part(page-embed) {
    aspect-ratio: 16 / 9;
}

project-section:nth-child(odd)::part(page-embed) {
    --direction: right;
    --embed-order: 0;
}

project-section:nth-child(even)::part(page-embed) {
    --direction: left;
    --embed-order: 1;
}

project-section::part(page-embed),
project-section::part(page-content) {
    min-inline-size: 0;
}

project-section::part(page-media) {
    block-size: 100%;
    inline-size: 100%;
    mask-mode: luminance;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: cover;
    object-fit: cover;
    object-position: var(--object-position, center);
    vertical-align: top;
}

project-section::part(page-content) {
    align-self: start;
    backdrop-filter: blur(2rem) brightness(0.8);
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.1);
    background-image: radial-gradient(ellipse at 50% 100%, oklch(from var(--accent-color) l c h / 0.3) 0%, transparent 80%);
    border: none;
    margin: 0;
}

project-section::part(discover) {
    align-items: center;
    background-color: transparent;
    border: thin solid;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    gap: 0.5rem;
    inline-size: fit-content;
    margin-inline: 2rem;
    padding: 0.5rem 1rem;
    position: relative;
    text-decoration: none;
    transition: 0.15s all ease;
    z-index: 1;
    
    @supports (corner-shape: bevel) {
        border-end-end-radius: 0.75rem;
        corner-shape: bevel;
    }

    @supports not (corner-shape: bevel) {
        position: relative;

        &::before {
            background-image:
                linear-gradient(
                    to top left,
                    var(--surface-color) calc(50% - 0.5rem / 16),
                    oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h) calc(50% - 0.5rem / 16)
                );
            clip-path: polygon(100% calc(-1rem / 16), 100% 100%, calc(-1rem / 16) 100%);
            block-size: 1rem;
            content: '';
            inline-size: 1rem;
            inset-block-end: calc(-1.5rem / 16);
            inset-inline-end: calc(-1.5rem / 16);
            position: absolute;
            z-index: 1;
        }
    }

    @media screen and (min-width: 60rem) {
        display: none;
    }
}

project-section::part(discover):hover,
project-section::part(discover):focus-visible,
.card__cta:hover,
.card__cta:focus-visible {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    border-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    color: var(--surface-color);
    text-decoration: none;
}

@media screen and (min-width: 60rem) {
    .projects:has(project-section) {
        gap: 0;
    }

    project-section::part(root) {
        padding: 0;
    }

    project-section::part(backdrop) {
        display: none;
    }

    project-section::part(discover) {
        display: none;
    }

    project-section:nth-child(odd)::part(content) {
        --title-justify: end;
    }

    project-section:nth-child(even)::part(content) {
        --title-justify: start;
    }
    
    project-section::part(page-embed) {
        flex-basis: 50%;
        flex-shrink: 0;
    }

    project-section::part(page-content) {
        backdrop-filter: blur(2rem) brightness(0.8);
        background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.1);
        background-image: radial-gradient(ellipse at 50% 100%, oklch(from var(--accent-color) l c h / 0.3) 0%, transparent 80%);
        line-clamp: none;
        max-inline-size: 50rem;
        padding: 2rem;
        position: relative;
        z-index: 1;
    }

    project-section:nth-child(odd)::part(page-title) {
        --title-end-align: max(6rem, 50dvi - 50rem + 2rem)
    }

    project-section:nth-child(even)::part(page-title) {
        --title-start-align: max(6rem, 50dvi - 50rem + 2rem);
    }

    project-section:nth-child(odd)::part(page-inside) {
        --content-justify: start;
    }

    project-section:nth-child(even)::part(page-inside) {
        --content-justify: end;
    }
    
    project-section:nth-child(odd)::part(page-content) {
        margin: 6rem 6rem 6rem -6rem;

        @supports (corner-shape: bevel) {
            border-start-start-radius: 2rem;
            corner-shape: bevel;
        }

        @supports not (corner-shape: bevel) {
            clip-path: polygon(2rem 0, 100% 0, 100% 100%, 0 100%, 0 2rem);
        }
    }
    
    project-section:nth-child(even)::part(page-content) {
        margin: 6rem -6rem 6rem 6rem;

        @supports (corner-shape: bevel) {
            border-start-end-radius: 2rem;
            corner-shape: bevel;
        }

        @supports not (corner-shape: bevel) {
            clip-path: polygon(0 0, calc(100% - 2rem) 0, 100% 2rem, 100% 100%, 0 100%);
        }
    }
}

.card-grid {
    display: flex;
    gap: 2rem;
    overflow-inline: auto;
    padding-block-end: 1rem;
    scroll-behavior: smooth;
    scroll-snap-type: inline mandatory;

    @media screen and (min-width: 60rem) {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        overflow: visible;
        padding-block-end: 0;
    }
}

.card-grid--other {
    @media screen and (min-width: 60rem) {
        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    }
}

h3:has(+ .card-grid--other) {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    margin-block-start: 3rem;
}

lab-card,
other-project-card {
    filter: blur(0);
    flex-shrink: 0;
    max-inline-size: calc(100dvi - 6rem);
    opacity: 1;
    scroll-snap-align: center;
    translate: 0 0;
    transition: 0.3s all ease allow-discrete;
    transition-delay: calc(sibling-index() * 0.15s);

    @media screen and (min-width: 36rem) {
        max-inline-size: calc(50dvi - 4rem);
    }

    @media screen and (min-width: 60rem) {
        max-inline-size: auto;
    }

    @starting-style {
        filter: blur(0.5rem);
        opacity: 0;
        translate: 0 -1rem;
    }

    @supports not (corner-shape: bevel) {
        position: relative;

        &::before {
            background-image:
                linear-gradient(
                    to bottom right,
                    var(--surface-color) calc(50% - 1rem / 16),
                    oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15) calc(50% - 1rem / 16)
                );
            clip-path: polygon(0 0, calc(100% - 0.5rem / 16) 0, 0 calc(100% - 0.5rem / 16));
            block-size: 1.414rem;
            content: '';
            inline-size: 1.414rem;
            inset-block-start: calc(-0.5rem / 16);
            inset-inline-start: calc(-0.5rem / 16);
            position: absolute;
            z-index: 1;
        }
    }
}

lab-card::part(root),
other-project-card::part(root),
.card {
    block-size: 100%;
    border: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow: hidden;
    
    @supports (corner-shape: bevel) {
        border-start-start-radius: 1rem;
        corner-shape: bevel;
    }
}

@property --tsa-gradient-rotation {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

.card--tsa {
    animation: tsa-gradient 10s infinite linear;
    background:
        linear-gradient(var(--surface-color) 0 0) padding-box,
        conic-gradient(
            from var(--tsa-gradient-rotation),
            oklch(from var(--accent-color) calc(l + 0.1) c 0deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 60deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 120deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 180deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 240deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 300deg),
            oklch(from var(--accent-color) calc(l + 0.1) c 360deg)
        ) border-box;
    block-size: fit-content;
    border: thin solid transparent;
    gap: 0;
    margin: 2rem 0.5rem;
    padding: 1rem;
}

.card--tsa > :first-child {
    margin-block-start: 0;
}

.card--tsa > :last-child {
    margin-block-end: 0;
}

.card--tsa .card__title {
    @supports not (corner-shape: bevel) {
        padding-inline-start: 0;
    }
}

.card--tsa .card__title img {
    block-size: 2.5rem;
    inline-size: 2.5rem;
    margin-inline-end: 1rem;
    vertical-align: bottom;
}

.card--tsa .card__section {
    padding-inline: 0;
}

@keyframes tsa-gradient {
    to {
        --tsa-gradient-rotation: 1turn;
    }
}

lab-card::part(image),
other-project-card::part(image),
.card__image {
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: center;
}

lab-card::part(title),
.card__title {
    align-items: center;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    display: flex;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.02ch;
    line-height: 1.25;
    margin: 0;
    padding-inline: 1rem;
    position: relative;
}

lab-card::part(title)::before,
.card__title::before {
    background-image: 
        radial-gradient(
            ellipse at 50% 0%,
            oklch(from var(--accent-color) l c h / 0.3) 0%,
            transparent 80%
        );
    block-size: 2rem;
    content: '';
    inset-block-start: -1rem;
    inset-inline: 0;
    position: absolute;
    z-index: -1;
}

lab-card::part(title-icon) {
    align-self: start;
    color: currentColor;
    line-height: 1;
    margin-inline-end: 0.5em;
    vertical-align: text-bottom;
}

.card__title svg,
.card__title img {
    block-size: 1.25em;
    fill: currentColor;
    inline-size: 1.25em;
    margin-inline-end: 0.25em;
    vertical-align: text-bottom;
}

lab-card::part(description),
other-project-card::part(description),
.card__description {
    flex-grow: 1;
    margin: 0;
    padding-inline: 1rem;
    text-wrap: pretty;
}

other-project-card::part(description) {
    padding-block-end: 2rem;
}

lab-card::part(section),
.card__section {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-block-end: 1rem;
    padding-inline: 1rem;
}

lab-card::part(cta),
.button,
.card__cta {
    align-items: center;
    background-color: transparent;
    border: thin solid;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    cursor: pointer;
    display: inline flex;
    font: inherit;
    font-weight: 500;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    transition: 0.15s all ease;
    
    @supports (corner-shape: bevel) {
        border-end-end-radius: 0.75rem;
        corner-shape: bevel;
    }

    @supports not (corner-shape: bevel) {
        position: relative;

        &::before {
            background-image:
                linear-gradient(
                    to top left,
                    var(--surface-color) calc(50% - 0.5rem / 16),
                    oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h) calc(50% - 0.5rem / 16)
                );
            clip-path: polygon(100% calc(-1rem / 16), 100% 100%, calc(-1rem / 16) 100%);
            block-size: 1rem;
            content: '';
            inline-size: 1rem;
            inset-block-end: calc(-1.5rem / 16);
            inset-inline-end: calc(-1.5rem / 16);
            position: absolute;
            z-index: 1;
        }
    }
}

lab-card::part(cta):hover,
lab-card::part(cta):focus-visible,
.button:hover,
.button:focus-visible,
.card__cta:hover,
.card__cta:focus-visible {
    background-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    border-color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    color: var(--surface-color);
    text-decoration: none;
}

.profiles {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-block: 1rem;
}

.profile {
    align-items: center;
    color: var(--text-color);
    display: flex;
    gap: 1rem;
    padding-block: 0.5rem;
    padding-inline: 1rem;
    position: relative;
    text-decoration: none;
}

.profile::after {
    background-image: radial-gradient(
        ellipse at 50% 100%,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h / 0.3) 0%,
        transparent 80%
    );
    block-size: 2rem;
    content: '';
    inset-block-end: 0;
    inset-inline: 0;
    opacity: 0;
    position: absolute;
    transition: 0.15s all ease;
}

.profile:hover::after,
.profile:focus-visible::after {
    opacity: 1;
}

.profile__image {
    align-self: start;
    block-size: 2rem;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    flex-shrink: 0;
    inline-size: 2rem;
}

.profile__image svg {
    block-size: 100%;
    inline-size: 100%;
}

.profile__name {
    align-self: center;
}

lab-card::part(dialog),
.dialog {
    block-size: 100%;
    border: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.5);
    flex-direction: column;
    filter: blur(1rem);
    inline-size: 100%;
    max-block-size: calc(100dvb - 1rem);
    max-inline-size: calc(100dvi - 1rem);
    opacity: 0;
    overflow-block: auto;
    overflow-inline: clip;
    padding: 0;
    scale: 0.8;
    transition: 0.3s all ease allow-discrete;
    
    @supports (corner-shape: bevel) {
        border-start-start-radius: 2rem;
        corner-shape: bevel;
    }
    
    @media screen and (min-width: 50rem) {
        max-block-size: calc(100dvb - 8rem);
        max-inline-size: calc(100dvi - 8rem);
    }
}

lab-card::part(dialog)::backdrop,
.dialog::backdrop {
    background-color: transparent;
    backdrop-filter: blur(0);
    transition: 0.3s all ease allow-discrete;
}

lab-card::part(dialog):open::backdrop,
.dialog:open::backdrop {
    background-color: oklch(from var(--surface-color) l c h / 0.5);
    backdrop-filter: blur(1rem);

    @starting-style {
        background-color: transparent;
        backdrop-filter: blur(0);
    }
}

lab-card::part(dialog):open,
.dialog:open {
    display: flex;
    filter: blur(0);
    opacity: 1;
    scale: 1;

    @starting-style {
        filter: blur(1rem);
        opacity: 0;
        scale: 0.8;
    }
}

lab-card::part(dialog-header),
.dialog__header {
    align-items: center;
    border-block-end: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1rem;
}

lab-card::part(dialog-title-text),
.dialog__title {
    align-items: center;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    display: flex;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 0;
    padding-inline-start: 1rem;
}

lab-card::part(dialog-close),
.dialog__close {
    align-items: center;
    background-color: transparent;
    border: none;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    position: relative;
    transition: 0.15s all ease;
}

lab-card::part(dialog-close-icon),
.dialog__close svg {
    block-size: 1.5rem;
    fill: currentColor;
    inline-size: 1.5rem;
}

lab-card::part(dialog-close)::after,
.dialog__close::after {
    background-image: radial-gradient(
        circle at 50% 50%,
        oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h / 0.3) 0%,
        transparent 80%
    );
    content: '';
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: 0.15s all ease;
}

lab-card::part(dialog-close):hover,
lab-card::part(dialog-close):focus-visible,
.dialog__close:hover,
.dialog__close:focus-visible {
    color: var(--text-color);
}

lab-card::part(dialog-close):hover::after,
lab-card::part(dialog-close):focus-visible::after,
.dialog__close:hover::after,
.dialog__close:focus-visible::after {
    opacity: 1;
}

lab-card::part(dialog-body),
.dialog__body {
    padding: 1rem 2rem;
}

lab-card::part(dialog-demo),
.demo {
    border: none;
    block-size: 100%;
    inline-size: 100%;
    margin: 0;
}

lab-card::part(demo-title),
.demo-title {
    align-items: center;
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
    margin-inline-end: 0.25em;
}

lab-card::part(demo-title-icon),
.demo-title__icon {
    block-size: 1.25em;
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h);
    display: contents;
    fill: currentColor;
    inline-size: 1.25em;
    vertical-align: text-bottom;
}

lab-card::part(demo-title-category),
.demo-title__category {
    color: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.1) c h);
    font-size: 1.125rem;
    font-weight: normal;
}

.loader {
    align-items: center;
    display: flex;
    gap: 1rem;
    grid-column: 1 / -1;
    inline-size: 100%;
    justify-content: center;
}

.location {
    align-items: center;
    display: flex;
    font-size: 75%;
    gap: 0.5em;
    padding: 0.5em 0;
    opacity: 0.8;
}

.alert {
    border: thin solid oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15);
    display: flex;
    gap: 0.5rem;
    inline-size: fit-content;
    margin-block: 2rem;
    max-inline-size: 80ch;
    overflow: hidden;
    padding: 1rem;
    text-wrap: pretty;
    
    @supports (corner-shape: bevel) {
        border-start-start-radius: 1rem;
        corner-shape: bevel;
    }

    @supports not (corner-shape: bevel) {
        position: relative;

        &::before {
            background-image:
                linear-gradient(
                    to bottom right,
                    var(--surface-color) calc(50% - 0.5rem / 16),
                    oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.3) c h / 0.15) calc(50% - 0.5rem / 16)
                );
            clip-path: polygon(0 0, calc(100% - 1.414rem / 16) 0, 0 calc(100% - 1.414rem / 16));
            block-size: 1.414rem;
            content: '';
            inline-size: 1.414rem;
            inset-block-start: 0;
            inset-inline-start: 0;
            position: absolute;
            z-index: 1;
        }
    }
}

.alert p {
    margin-block: 0;
}

.alert svg {
    align-self: start;
    fill: oklch(from var(--accent-color) calc(l + var(--_color-scheme-operation-sign) * 0.4) c h);
    flex-shrink: 0;
    margin: 0.125rem 0;
}

.content-center {
    font-size: 125%;
    padding: 2rem;
    text-align: center;
}