/*---------------------------------------------------------------------*/
/*------------------------- LAYER DEFINITION --------------------------*/
/*---------------------------------------------------------------------*/
@layer reset, layout, variables, base, single, main;



/*---------------------------------------------------------------------*/
/*--------------------------- Layer - Reset ---------------------------*/
/*---------------------------------------------------------------------*/
@layer reset {

    /* Reset from https://piccalil.li/blog/a-more-modern-css-reset/ */
    /* Box sizing rules */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* Tabulation navigation */
    *:focus-visible {
        padding: .4rem !important;
        outline: .2rem solid currentColor;
        border-radius: .2rem;
    }

    /* Prevent font size inflation */
    html {
        -moz-text-size-adjust: none;
        -webkit-text-size-adjust: none;
        text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd {
        margin-block: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role="list"],
    ol[role="list"] {
        list-style: none;
    }

    /* Set core body defaults */
    body {
        min-height: 100vh;
        text-wrap: pretty;
        margin: 0;
    }

    /* Set shorter line heights on headings and interactive elements */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    button,
    input,
    label {
        line-height: var(--line-height__title);
    }

    /* Balance text wrapping on headings */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: pretty;
    }

    /* Apply parent style to child spans */
    :is(h1, h2, h3, h4, h5, h6)>span {
        font-size: inherit;
        line-height: inherit;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
        text-decoration-skip-ink: auto;
        text-decoration: underline solid var(--interact) 2px;
        text-underline-offset: 2px;
        color: currentColor;

        &:hover {
            text-decoration: underline dashed;
            text-decoration-color: var(--interact);
        }
    }

    /* Make images easier to work with */
    img,
    picture {
        max-width: 100%;
        display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
        font-family: inherit;
        font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
        min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
        scroll-margin-block: 5ex;
    }
}



/*---------------------------------------------------------------------*/
/*------------------------ Layer - Variables --------------------------*/
/*---------------------------------------------------------------------*/
@layer variables {
    :root {
        /* fonts */
        --font-size__body: clamp(1rem, -0.875rem + 4cqi, 1.2rem);
        --font-size_h1: clamp(3.5rem, -0.875rem + 6cqi, 6rem);
        --font-size_h2: clamp(2.75rem, -0.875rem + 6cqi, 3.5rem);
        --font-size_h3: clamp(2rem, -0.875rem + 6cqi, 2.25rem);
        --font-size__small: clamp(.7rem, -0.875rem + 3cqi, .9rem);
        --line-height__body: 1.7;
        --line-height__title: 1;
        --max-text-width: 55ch;

        /* colors */
        --white: #f3f3f3;
        --black: #181818;
        --gray-01: #d3d3d3;
        --gray-02: #3d3d3d;
        --blue: #4242fa;
        --yellow: #ffd800;

        /* transitions */
        --bezier-33: 0.33s cubic-bezier(0.48, 0, 0.3, 1);
        --bezier-25: 0.25s cubic-bezier(0.48, 0, 0.3, 1);

        /* breakpoint */
        --main-bp: 60rem;
    }

    /* THEME */
    [data-theme="light"] {
        --titles-color: var(--black);
        --texts-color: var(--gray-02);
        --captions-color: var(--gray-02);
        --background-color: var(--white);
        --midground-color: var(--gray-01);
        --foreground-color: var(--black);
        --border-color-light: var(--gray-01);
        --border-color-dark: var(--gray-02);
        --interact: var(--blue);
    }

    [data-theme="dark"] {
        --titles-color: var(--white);
        --texts-color: var(--gray-01);
        --captions-color: var(--gray-01);
        --background-color: var(--black);
        --midground-color: var(--gray-02);
        --foreground-color: var(--white);
        --border-color-light: var(--gray-02);
        --border-color-dark: var(--gray-01);
        --interact: var(--yellow);
    }
}



/*---------------------------------------------------------------------*/
/*-------------------------- Layer - Layout ---------------------------*/
/*---------------------------------------------------------------------*/
@layer layout {

    /* Stack */
    .stack {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .stack>* {
        margin-block: 0;
    }

    .stack>*+* {
        margin-block-start: var(--space, 1.5em);
    }

    /* Grille principale */
    .main-grid {
        @media (width > 70rem) {
            display: grid;
            grid-template-columns: 7fr 5fr;
            grid-template-rows: none;
            gap: 1.5rem;
        }
    }

    /* Flex between */
    .flex-between {
        display: flex;
        justify-content: space-between;
        gap: var(--gap, .5em);
    }

    /* Flex end */
    .flex-end {
        display: flex;
        justify-content: end;
        gap: var(--gap, .5em);
    }

    .flex-column {
        flex-direction: column;
    }

    .flex-start {
        display: flex;
        justify-content: start;
        gap: var(--gap, .5em);
    }

    .grow-1 {
        flex-grow: 1;
    }

    .grow-2 {
        flex-grow: 2;
    }

    /* Mono */
    .monospace {
        font-family: monospace;
    }

    /* zindex */
    .z1 {
        position: relative;
        z-index: 1;
    }

    /* MODALS */
    /* enable transitions */
    [popover],
    dialog,
    ::backdrop {
        transition:
            display ease .3s allow-discrete,
            overlay ease .3s allow-discrete,
            opacity ease .3s;
        opacity: 0;
    }

    /* On Stage */
    :popover-open,
    :popover-open::backdrop,
    [open],
    [open]::backdrop {
        opacity: 1;
    }

    /* Off Stage */
    @starting-style {

        :popover-open,
        :popover-open::backdrop,
        [open],
        [open]::backdrop {
            opacity: 0;
        }
    }
}



/*---------------------------------------------------------------------*/
/*--------------------------- Layer - Base ----------------------------*/
/*---------------------------------------------------------------------*/
@layer base {
    @font-face {
        font-family: 'Instrument';
        font-weight: 700;
        src: url('/fonts/InstrumentSans-Bold.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Instrument';
        font-weight: 500;
        src: url('/fonts/InstrumentSans-Medium.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Instrument';
        font-weight: 400;
        src: url('/fonts/InstrumentSans-Regular.woff2') format('woff2');
    }

    @font-face {
        font-family: 'Instrument serif';
        font-weight: 400;
        src: url('/fonts/InstrumentSerif-Regular.woff2') format('woff2');
    }

    :is(h1, h2, h3) {
        font-family: Instrument serif;
        color: var(--titles-color);
        font-weight: 300;
        line-height: var(--line-height__title);
        max-width: calc(var(--max-text-width) / 2);
    }

    h1 {
        font-size: var(--font-size_h1);
    }

    h2 {
        font-size: var(--font-size_h2);
    }

    h3 {
        font-size: var(--font-size_h3);
    }

    body {
        font-family: Instrument;
        font-optical-sizing: auto;
        font-style: normal;
        line-height: var(--line-height__body);
        font-size: var(--font-size__body);
        background-color: var(--background-color);
        color: var(--texts-color);
        padding: 4vh 4vw;
        width: min(100vw, 1920px);
        margin: 0 auto;
        overflow-x: hidden;

        @media (width < 70rem) {
            padding: 2em;
        }
    }

    hr {
        height: .2rem;
        border-radius: .2rem;
        background-color: currentColor;
        width: 100%;
        border: none;
    }


    main {
        min-height: 100%;
        /* max-width: min(100vw, 1920px); */
    }


    /* liens */
    a[target="_blank"] {

        &::after {
            content: "↗";
            text-decoration: none;
            -webkit-font-smoothing: antialiased;
            display: inline-block;
            margin-inline-start: .2rem;
        }
    }
}



/*---------------------------------------------------------------------*/
/*----------------------------- LAYER - main --------------------------*/
/*---------------------------------------------------------------------*/
@layer main {

    /* ------------- HEADER ------------- */
    .header {

        /* logo */
        & .logo {
            font-family: Instrument;

            & a {
                text-decoration: none;
                font-size: var(--font-size_h2);
                color: var(--texts-color);
                font-weight: 500;
            }

            & div {
                --space: .25rem;
                text-box-trim: trim-both;
                text-box-edge: cap alphabetic;
            }

            & .logo__accent {
                color: var(--titles-color);
            }

            & .logo__trait {
                height: 5px;
                width: 3rem;
                display: inline-block;
                background: currentColor;
                vertical-align: super;
                margin-inline-end: .5rem;
                transition: width var(--bezier-25);
            }

            &:is(:active, :hover) .logo__trait {
                width: 2rem;
            }
        }

        /* SWITCH COLOR */
        & .theme-switch {
            color: var(--foreground-color);
            --size: 2rem;

            background: none;
            border: none;
            padding: 0;

            inline-size: var(--size);
            block-size: var(--size);
            border-radius: 50%;
            aspect-ratio: 1;

            cursor: pointer;
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
            outline-offset: 5px;

            @media (hover: none) {
                --size: 48px;
            }

            &>.sr-only {
                display: none;
            }

            /* ICON */
            & .theme-switch__icon {
                &> :is(.lune, .soleil, .rayons) {
                    transform-origin: center center;
                }

                &> :is(.lune, .soleil) {
                    fill: currentColor;
                }

                &>.rayons {
                    stroke: currentColor;
                    stroke-width: 2px;
                }
            }

            /* ANIMATIONS */
            @media (prefers-reduced-motion: no-preference) {
                & .theme-switch__icon {
                    & * {
                        transition: 0.33s cubic-bezier(0.48, 0, 0.3, 1);
                    }

                    & .lune>circle {
                        transform: translateX(0px);
                    }
                }
            }
        }

        /* CLOCK */
        & .clock {
            height: fit-content;
            width: fit-content;
            --space: .1rem;

            &>div {
                line-height: var(--line-height__title);
                font-size: var(--font-size__small);
            }

            & .clock__dot {
                position: relative;
                display: inline-block;
                height: 0.75em;
                width: 0.75em;
                align-self: center;
                margin-inline-start: .2rem;

                &>span {
                    inset: 0;
                    display: block;
                    position: absolute;
                    border-radius: 50%;
                    background-color: red;
                    animation: 1s infinite clock__dot;
                }
            }
        }

        @media (width < 70rem) {
            & :is(.flex-end, .flex-between) {
                display: block;
            }

            & .clock {
                margin-block-start: 1rem;
            }
        }
    }

    /* DARKMODE */
    [data-theme="dark"] .theme-switch .theme-switch__icon {
        &>.soleil {
            transform: scale(1.75);
        }

        &>.rayons {
            opacity: 0;
        }

        &>.lune>circle {
            transform: translateX(-7px);
        }

        /* ANIMATION DARKMODE */
        @media (prefers-reduced-motion: no-preference) {
            &>.soleil {
                transform: scale(1.75);

            }

            &>.rayons {
                transform: rotateZ(-25deg);
            }
        }
    }

    @keyframes clock__dot {

        25%,
        75% {
            display: none;
        }

        0%,
        100% {
            display: block;
        }
    }

    /* ------------- NAVIGATION ------------ */
    .nav__list {
        list-style: none;
        margin: 0;

        & .nav__item--link {
            text-decoration: none;
            font-size: var(--font-size_h3);
            color: var(--titles-color);
            font-weight: 500;
            transition: color var(--bezier-25);

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

    /* ------------ TAXONOMIES ------------ */
    .taxonomies {
        & .taxonomies__content {
            align-items: end;
        }
    }

    /* --------------- HOME --------------- */
    /* @media (width > 70rem) {
        body:has(>#home) {
            overflow: hidden;
        }
    } */

    #home {
        justify-content: space-between;
    }

    .faces {
        width: 72px;
        height: 72px;
        border: solid 1px var(--midground-color);
        background-color: var(--background-color);
        border-radius: .5rem;
        cursor: pointer;
        position: relative;
        transition: ease .3s all;

        &:hover {
            width: 48px;
            height: 48px;

            & .faces--imgs {
                transform: rotate(-15deg);
                top: -56px;
                right: -16px;
            }
        }

        &::before {
            content: "";
            position: absolute;
            inset: -1.5rem -1.5rem;
            width: calc(100% + 3rem);
            height: calc(100% + 3rem);
        }

        &::after {
            content: "";
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: .5rem;
            opacity: .75;
            background: var(--background-color);
            background-image: radial-gradient(var(--midground-color) 1px, transparent 0);
            background-size: 12px 12px;
            background-repeat: repeat;
            z-index: 0;
        }

        & .faces--eyes {
            transform: scale(-1, 1);
            display: block;
            position: relative;
            z-index: 1;
        }

        & .faces--imgs {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            border-radius: .5rem;
            overflow: clip;
            width: 64px;
            aspect-ratio: 1 / 1;
            transition: inherit;
            transform-origin: top right;

            & img {
                position: absolute;
                opacity: 0;
                padding: var(--rand);
                transition: inherit;

                &.activeImg {
                    opacity: 1;
                    transition: inherit;
                }
            }
        }

        @media (width < 70rem) {
            margin-block: 3rem;
            align-self: flex-end;
            
            &:hover {
                width: 72px;
                height: 72px;

                & .faces--imgs {
                    top: -48px;
                    right: 54px;
                } 
            }
        }
    }
}

/* --------------- BLOG --------------- */
#blog {
    /* --space: 3rem; */
    min-height: 100%;
    justify-content: space-between;

    & .content {
        &>.main-grid {
            @media (width < 70rem) {
                display: flex;
                flex-direction: column-reverse;
                gap: 1.5rem;
            }
        }
    }

    & .all-posts {
        --space: 1.5rem;
        min-width: 60%;

        display: flex;
        flex-direction: column;
        gap: 1.5rem;

        @media (width < 70rem) {
            min-width: 100%;
        }
    }
}

/* ------------- ARTICLES ------------- */
#home .stack:has(.post) {
    align-items: flex-end;
}

.post {
    border: solid 1px var(--border-color-light);
    padding: 1em;
    border-radius: .2em;
    position: relative;
    opacity: 1;

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: .75;
        background-image: radial-gradient(var(--midground-color) 1px, transparent 0);
        background-size: 12px 12px;
        background-repeat: repeat;
        z-index: 0;
    }

    &>* {
        z-index: 1;
        position: relative;
    }

    &:has(.post__tags--tag.hide) {
        opacity: 0;
        display: none;
    }

    &:has(.post__tags--tag:not(.hide)) {
        opacity: 1;
        display: block;
    }

    &:hover .post__title {
        text-decoration-skip-ink: auto;
        text-decoration: underline dashed var(--interact) 3px;
        text-underline-offset: 2px;
        color: currentColor;
    }

    & a {
        --space: .4em;
        text-decoration: none;
        color: var(--texts-color);
    }
}

.post__title {
    color: var(--titles-color);
    font-size: var(--font-size_h3);
    line-height: var(--line-height__title);
    font-family: Instrument serif;
    max-inline-size: calc(var(--max-text-width) / 2);
    transition: color var(--bezier-25);
}

.post__tags,
.post-data_tags {
    color: var(--titles-color);
    font-size: var(--font-size__small);
    line-height: var(--line-height__title);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .2rem;

    & .post-data__tags--tag,
    .post__tags--tag {
        background-color: var(--midground-color);
        padding: .2em .4em;
        border-radius: .2em;
    }
}

.post__date,
.post-data__date {
    display: inline-block;
    font-size: var(--font-size__small);

    &::first-letter {
        text-transform: uppercase;
    }
}

/* ----------- Fil d'ariane ----------- */
.ariane {
    list-style: none;
    padding-inline-start: 0;
    margin: 0;
    font-size: var(--font-size__small);

    & .ariane__item {
        display: inline;

        &:not(:first-child) {
            margin-inline-start: .5rem;
            position: relative;

            &::before {
                content: "→";
                display: inline-block;
                /* width: 1rem;
                    height: .2rem; */
                vertical-align: middle;
                /* background-color: var(--texts-color); */
                margin-inline-end: .5em;
            }
        }

        &:hover {
            color: var(--interact);
            text-decoration-color: var(--interact);
        }
    }
}

/* --------------- TAGS --------------- */
.tags {
    margin: 0;
    padding: 0;
    list-style: none;

    & .tags__tag {
        display: flex;
        font-size: var(--font-size_h2);
        cursor: pointer;

        & button {
            border: none;
            cursor: pointer;
            color: var(--titles-color);
            background-color: initial;

            &:is(:hover, :active) {
                color: var(--interact);
            }

            &.active {
                font-style: italic;
                color: var(--interact);
            }
        }

        & sup {
            font-size: var(--font-size__small);
            color: var(--texts-color);
        }
    }
}

/* ------------- Lightbox ------------- */
body:has(*:popover-open) {
    overflow: hidden;
    pointer-events: none;
}

.image {
    &>figure {
        display: grid;

        & .image__button {
            background-color: var(--midground-color);
            padding: 1rem;
            border-radius: .25rem;
            border: none;
            cursor: pointer;
            width: 100%;
        }
    }

    & .image__lightbox {
        display: none;
        opacity: 0;
        pointer-events: all;
        position: fixed;
        min-width: 60vw;
        max-width: 90vw;
        height: fit-content;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        overflow: visible;

        @media (width < 70rem) {
            min-width: 90vw;
        }

        & .image__lightbox--button {
            height: fit-content;
            width: fit-content;
            background: var(--gray-02);
            color: var(--white);
            border-radius: .2rem;
            border: none;
            padding: 0;
            cursor: pointer;
            transition: color ease .1s;
            align-self: end;

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

            & svg {
                width: 32px;
                height: 32px;
            }
        }

        & .image__lightbox--img {
            display: flex;
            overflow: auto;
            width: 100%;
            height: fit-content;
            max-height: 90vh;

            & img {
                width: 100%;
                height: auto;
                margin: auto;
                border-radius: .2rem;
                background-color: transparent;
            }

            &:has(> img.zoomed) {
                height: 100%;
            }
        }

        &:popover-open {
            display: grid;
            align-content: center;
            gap: .5rem;
            opacity: 1;
            color: var(--white);

            & img {
                cursor: zoom-in;
                color: var(--white);
            }

            @starting-style {
                display: grid;
                opacity: 0;
            }
        }

        &::backdrop {
            background-color: color-mix(in srgb, var(--gray-02) 95%, transparent);
        }
    }
}

/* ------------- PORTRAIT ------------- */
.portrait {
    display: none;
    position: relative;
    width: 275px;
    height: 350px;
    background-size: 8px 8px !important;
    background-repeat: repeat !important;
    background-image: radial-gradient(color-mix(in srgb, var(--border-color-light) 33%, transparent) 1px, transparent 0);
    background-color: var(--background-color);
    border: solid 1px color-mix(in srgb, var(--border-color-light) 33%, transparent);
    border-radius: .2em;

    & .loading {
        --space: .2em;
        line-height: var(--line-height__title);
        font-size: var(--font-size__small);
        text-align: center;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    @media (width > 70rem) {
        display: block;
    }
}

/* Elements deplacables */
*:has(>.draggable) {
    position: relative;
}

.draggable {
    position: absolute;
    z-index: 3;
    user-select: none;
    cursor: move;

    &>* {
        pointer-events: none;
    }

    & svg {
        position: absolute;
        top: 4px;
        left: 4px;
        fill: currentColor;
    }
}

/* ------------- Info ------------- */
.info {
    /* margin-block-start: 3rem; */
    line-height: calc(var(--line-height__title) * 1.25);

    @media (width < 70rem) {
        margin-block-start: 1.5rem;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 1.5rem;
    }
}

.info--intro {
    --space: 1.5rem;
    max-width: calc(var(--max-text-width) / 1.25);
    position: sticky;
    top: 3rem;
}

.info--left {
    align-items: end;
}

.info--right {
    @media (width > 70rem) {
        align-items: end;
    }
}

.info--category {
    --space: 6rem;
    width: 100%;

    @media (width > 70rem) {
        width: var(--max-text-width);
    }
}

.info--group {
    --space: 1.5rem;

    & .post__tags {
        font-size: var(--font-size__body);
    }
}

.info--group__title {
    color: var(--titles-color);
    position: relative;
    padding-block-start: .5rem;

    &::before {
        content: "";
        position: absolute;
        width: 100%;
        top: 0;
        height: .25rem;
        background-color: currentColor;
    }
}

.info--group__details {
    max-width: calc(var(--max-text-width) / 1.25);
}

.info--group__details.small {
    font-size: var(--font-size__small);
    line-height: calc(var(--line-height__title) * 1.25);
}

/* ------------- FOOTER ------------- */
main:not(#home) .footer {
    margin-block-start: 6rem;
}
.footer {
    flex-shrink: 0;

    & .coords,
    & .version {
        font-size: var(--font-size__small);
        align-self: flex-end;
    }

    & .coords,
    & .contact {
        --space: .1rem;
        line-height: var(--line-height__title);
        text-align: end;
    }

    & .contact span {
        color: var(--titles-color);
        font-weight: 500;
    }

    & .coords {
        font-size: var(--font-size__small);
    }

    @media (width < 70rem) {
        flex-direction: column-reverse;
        display: flex;
        gap: 1.5rem;
    }
}

/* --------------- 404 -------------- */
#page404 {
    &>div {
        --space: 1rem;
        align-items: end;
    }

    & h1 {
        margin-block-start: 4rem;
        text-box-trim: trim-both;
        text-box-edge: cap alphabetic;
        font-size: calc(var(--font-size_h1) * 4);
        line-height: var(--line-height__title);
    }

    & a {
        color: var(--interact);
    }
}

/* --------------- Transitions -------------- */
@view-transition {
    navigation: auto;
}



/*---------------------------------------------------------------------*/
/*---------------------------- LAYER - Single -------------------------*/
/*---------------------------------------------------------------------*/
@layer single {
    .single-content-container {
        margin-block-start: 6rem;

        @media (width < 70rem) {
            display: block;
        }
    }

    .post-data {
        --gap: 1em;
        position: relative;
        max-width: var(--max-text-width);

        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: .5rem;

        padding: 2rem;
        min-height: 20vh;

        &::before {
            content: "";
            position: absolute;
            top: calc(1rem / 2);
            left: calc(1rem / 2);
            width: calc(100% - 1rem);
            height: calc(100% - 1rem);
            opacity: .75;
            background-image: radial-gradient(var(--midground-color) 1px, transparent 0);
            background-size: 12px 12px;
            background-repeat: repeat;
            border-radius: .5rem;
            border: solid 1px var(--midground-color);
            z-index: 0;
        }

        &>* {
            z-index: 1;
        }
    }

    .single-content {
        --space: 1.5rem;
        max-width: var(--max-text-width);
        margin-block: 2rem;

        /* texts */
        & :is(p, span) {
            font-variant-numeric: oldstyle-nums;
        }

        /* Titles */
        & h2:not(:first-child) {
            margin-block-start: 6rem;
        }

        & h3 {
            margin-block-start: 4rem;
            font-style: italic;
        }

        /* Anchors */
        & :is(h2, h3) {
            position: relative;

            &>a {
                text-decoration: none;
                position: relative;
            }

            &>a::before {
                content: "⩉";
                position: absolute;
                left: -1.5ch;
                color: var(--texts-color);
                opacity: 0;
                transition: ease-in-out .1s;
            }

            &:hover>a::before {
                opacity: 1;
            }
        }

        /* Lists */
        & ol>li::marker {
            font-weight: 700;
        }

        & :is(ol, ul) {
            padding-inline-start: var(--global-list-padding, 3.5ch);

            &>li+li,
            & li>ul {
                margin-block-start: var(--global-list-flow, 0.75em);
            }
        }

        /* Quotes */
        & blockquote {
            border-radius: .2rem;
            margin-inline: 0;
            padding: 2rem;
            background-color: color-mix(in srgb, var(--midground-color) 33%, transparent);
            border-left: solid 0.2rem currentColor;
        }

        /* Imgs */
        .image {
            &:has(>figure) {
                margin-block-end: 1.5rem;
            }

            & figure {
                margin-inline: 0;

                & img {
                    width: auto;
                    margin: auto;
                    border-radius: 0.2rem;
                    border: solid 1px var(--border-color-light);
                }

                & figcaption {
                    margin-inline-start: .5rem;
                    margin-block-start: .5rem;
                    font-style: italic;
                    font-size: var(--font-size__small);
                    position: relative;

                    &::before {
                        content: "—";
                        margin-inline-end: .5rem;
                    }
                }
            }
        }

        /* Sep */
        & hr {
            margin-block: 6rem;

            &~h2[id] {
                margin-block-start: 0;
            }
        }

        /* Code blocks */
        & pre {
            display: flex;
            flex-direction: column;

            &::before {
                content: attr(data-lang);
                display: inline-block;
                padding: .5rem;
                margin-inline-start: .2em;
                font-size: var(--font-size__small);
                line-height: var(--line-height__title);
                border: solid 1px currentColor;
                width: fit-content;
                margin-bottom: -1px;
                text-transform: capitalize;
                font-style: italic;
            }

            & code {
                border: solid 1px var(--texts-color);
                border-top: solid .2em var(--texts-color);
                min-width: calc(var(--max-text-width) / 2);
                color: inherit;
                background: inherit;
                width: 100%;
                padding: 1rem;
                border-radius: .2rem;
                font-size: calc(var(--font-size__body) / 1.2);
                line-height: calc(var(--line-height__title) / .8);

                & span {
                    max-width: 100%;
                    text-wrap: wrap;
                }
            }
        }

        & code {
            font-family: monospace;
            display: inline-block;
            color: var(--titles-color);
            background-color: color-mix(in srgb, var(--midground-color) 33%, transparent);
            padding: .2em .4em;
            line-height: var(--line-height__title);
            border-radius: 0.2rem;
        }

        /* Tables */
        & table {
            border: .1em solid currentColor;
            height: 100%;
            width: 100%;
            table-layout: auto;
            border-collapse: collapse;
            border-spacing: 1px;
            text-align: left;
            font-variant-numeric: tabular-nums;

            & thead {
                background-color: var(--midground-color);
                border-bottom: solid .2em currentColor;

                & th {
                    min-width: 15ch;
                }
            }

            & :is(tbody, thead)>tr> :is(td, th)+ :is(td, th) {
                border-left: solid 1px currentColor;
            }

            & tbody>tr+tr {
                border-top: solid 1px currentColor;
            }

            & :is(tr, td, th) {
                padding: 0.5rem;
            }

            & caption {
                margin-inline-start: .5rem;
                margin-block-end: .5rem;
                font-style: italic;
                font-size: 1rem;
                position: relative;
                text-align: start;

                &::before {
                    content: "—";
                    margin-inline-end: .5rem;
                }
            }
        }
    }
}



/*---------------------------------------------------------------------*/
/*-------------------------- LAYER - utilities ------------------------*/
/*---------------------------------------------------------------------*/
@layer utilities {
    .visibility-hidden {
        visibility: hidden;
        display: none;
        overflow: hidden;
        opacity: 0;
        position: absolute;
        left: -9999px;
    }
}