@import url('https://fonts.googleapis.com/css2?family=Xanh+Mono:ital@0;1&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

@font-face {
  font-family: 'Macaulay';
  src: url('assets/Macaulays.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* Improves performance */
}

:root{

    color-scheme: light dark;

    --light-primary-color: #151515;
    --dark-primary-color: #e6e8e0;

    --light-primary-opacity: rgba(255, 255, 255, 0.128);
    --dark-primary-opacity: #04040417;


    --light-secondary-color: #747474;
    --dark-secondary-color: #838880;

    --light-bg-color: #f7f6f6;
    --dark-bg-color: rgb(28, 28, 28);

    --light-bg-opacity: rgba(0, 0, 0, 0.04);
    --dark-bg-opacity: rgba(255, 255, 255, 0.04);

    --dark-grad: linear-gradient(0deg, #c4c4c4 0%, #ffffff 35%, #fbfbfb 100%);
    --light-grad: linear-gradient(0deg, #111111 90%, #111111 100%, #111111 100%);


    --sans: "Macaulay", monospace;
    --mono: "DM Mono", monospace;

    --card-height: 1rem;
    --card-width: auto;

    --body-copy: 1rem;
    --caption-copy: calc(var(--body-copy) * 0.7);
    --heading-copy: calc(var(--body-copy) * 1.2);

    --space-bar-0: 0.4rem;
    --space-bar-1: 0.6rem;
    --space-bar-2: calc(var(--space-bar-1) * 1.8);
    --space-bar-3: 4rem;
    --space-page-margin: 2rem;

    --blur: 0.08rem;

    --button-corner: 0.1rem;
    --button-style: solid 0.03rem light-dark(
            var(--light-secondary-color),
            var(--dark-secondary-color)
        );
    }

body::selection {
  color: light-dark(
        var(--light-bg-color),
        var(--dark-bg-color)
    );
  background-color: light-dark(
        var(--light-primary-color),
        var(--dark-primary-color)
    );
}
/* change selection color mdn https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::selection */

body{
    cursor: none;
    color: light-dark(
        var(--light-primary-color),
        var(--dark-primary-color)
    );
    background-color: light-dark(
        var(--light-bg-color),
        var(--dark-bg-color)
    );
    font-family: var(--sans);
    font-size: var(--body-copy);
    display: grid;
    
    grid-template-rows: 1fr min-content;
    align-items: block-start;
    text-wrap: pretty;
}

main, footer{
    margin: var(--space-page-margin);
}

header{
    position: fixed;
    inset-block-start: var(--space-page-margin);
    inset-inline-end: var(--space-page-margin);
    font-size: var(--caption-copy);
    font-family: var(--mono);
    color: light-dark(
        var(--light-primary-color),
        var(--dark-primary-color)
    );
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-bar-2);
}

#theme-toggle {
    all: unset;
    cursor: none;
    font-family: var(--mono);
    font-size: var(--caption-copy);
    padding-block: 0.15rem;
    padding-inline: 0.4rem;
    border: var(--button-style);
    background-color: light-dark(var(--light-primary-color), var(--dark-primary-color));
    color: light-dark(var(--light-bg-color), var(--dark-bg-color));

    transition: filter 400ms ease, background-color 400ms ease, color 400ms ease;

    &:hover {
        filter: blur(0);
        background-color: transparent;
        color: light-dark(var(--light-primary-color), var(--dark-primary-color));
    }
}

#ink-toggle {
    all: unset;
    cursor: none;
    font-family: var(--mono);
    font-size: var(--caption-copy);

    @media (width < 700px) {
        display: none;
    }
}

.ink-ring {
    position: fixed;
    inset: 0;
    pointer-events: none;
    user-select: none;
}

footer{
    margin-block-start:0;
    font-size: var(--caption-copy);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    p{
        padding-block: 0.2rem;
    }
    @media(width<500px){
        display: block;
    }
}

main{
    display: flex;
    flex-direction: column;
    row-gap: var(--space-bar-3);

    #main-content{
        max-width: 50ch;
        display: flex;
        flex-direction: column;
        row-gap: var(--space-bar-2);
        line-height: 140%;

        time{
            font-family: var(--mono);
            font-size: smaller;
        }

    }

    #buttons{
        display: flex;
        flex-direction: column;
        gap: calc(var(--space-bar-0)*0.4);
    }

    .text-links{
        color: light-dark(
            var(--light-primary-color),
            var(--dark-primary-color)
        );
        transition: color 1200ms cubic-bezier(0.165, 0.84, 0.44, 1);
        filter: blur(var(--blur));
    }

    .text-links:hover{
        filter: blur(0);
    }

    #project-section {
        display: flex;
        flex-direction: column;
        gap: var(--space-bar-2);
    }

    #view-toggle {
        display: flex;
        gap: var(--space-bar-1);
        font-family: var(--mono);
        font-size: var(--caption-copy);

        @media(width < 700px) { display: none; }

        .view-btn {
            all: unset;
            cursor: none;
            padding-block: 0.15rem;
            padding-inline: 0.4rem;
            border: var(--button-style);
            color: light-dark(var(--light-secondary-color), var(--dark-secondary-color));
            transition: background-color 300ms ease, color 300ms ease;

            &.active {
                background-color: light-dark(var(--light-primary-color), var(--dark-primary-color));
                color: light-dark(var(--light-bg-color), var(--dark-bg-color));
            }

            &:not(.active):hover {
                color: light-dark(var(--light-primary-color), var(--dark-primary-color));
            }
        }
    }

    #project{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        /* column-gap: var(--space-bar-1); */

        .card {
            padding-block: var(--space-bar-2);
            padding-inline: var(--space-bar-2);
            display: flex;
            color: var(--secondary-color);
            position: relative;
            --_cc: light-dark(var(--light-secondary-color), var(--dark-secondary-color));
            --_cs: 3vh;

            /* top + left strokes only — right/bottom added per outer edge below */
            &::before {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to right,  var(--_cc) var(--_cs), transparent var(--_cs)) top    left  / 100% 1px no-repeat,
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    left  / 1px 100% no-repeat,
                    linear-gradient(to left,   var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 100% 1px no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 1px 100% no-repeat;
            }

            transition: background-color 400ms cubic-bezier(0.165, 0.84, 0.44, 1);

            .cardinfo{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                width: 100%;

                .card-text {
                    display: flex;
                    flex-direction: column;
                    gap: var(--space-bar-0);
                }

                p, .tags{
                    transition: color 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
                    tag{
                        transition: color 400ms cubic-bezier(0.165, 0.84, 0.44, 1),
                                    background-color 400ms cubic-bezier(0.165, 0.84, 0.44, 1),
                                    border-radius 1200ms ease;
                    }
                }

                .img-cursor{
                    pointer-events: none;
                    border-radius: var(--button-corner);
                    opacity: 0;
                    position: fixed;
                    width: 20rem;
                    aspect-ratio: 8 / 5;
                    object-fit: cover;
                    scale: 0.9;
                    translate: -50% -50%;
                    transition: opacity 300ms ease-in-out, scale 300ms ease-in-out;
                    z-index: 10;
                }

                .img-static{
                    pointer-events: none;
                    border-radius: var(--button-corner);
                    overflow: hidden;
                    opacity: 1;
                    width: 100%;
                    aspect-ratio: 8 / 5;
                    margin-block-start: var(--space-bar-2);
                    transition: opacity 300ms ease-in-out;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        display: block;
                    }
                }

                @media(width<700px){
                    .img-cursor{
                        display: none;
                    }
                }

                .cardtitle{
                    display: flex;
                    gap: var(--space-bar-1);

                    .arrow{
                        opacity: 0;
                        transition: opacity 1200ms ease;
                    }
                }

                .tags{
                    font-family: var(--mono);
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--space-bar-2);

                    tag{
                        text-transform: uppercase;
                        font-size: var(--caption-copy);
                        display: inline-flex;
                        align-items: center;
                        gap: 0.3em;

                        &::before {
                            content: "";
                            display: block;
                            width: calc(var(--space-bar-0)*0.8);
                            height: calc(var(--space-bar-0)*0.8);
                            background-color: currentColor;
                            flex-shrink: 0;
                        }
                    }
                }
            }
        }

        .card:hover{
            background-color: light-dark(
                var(--light-primary-color),
                var(--dark-primary-color)
            );
            .text-links, p, tag {
                color: light-dark(
                    var(--light-bg-color),
                    var(--dark-bg-color)
                );
                filter: blur(0);
            }

            
            .img-cursor {
                opacity: 1;
                scale: 1;
            }
            .img-static {
                opacity: 0;
            }
            .arrow {
                opacity: 1;
            }
        }

        /* 3-col: right verticals + bottom strokes on outer edges only */
        @media(width >= 1100px) {
            .card:nth-child(3n)::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat;
            }
            .card:nth-last-child(-n+3)::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to right, var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 100% 1px no-repeat,
                    linear-gradient(to left,  var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 100% 1px no-repeat;
            }
            .card:nth-child(3n):nth-last-child(-n+3)::after {
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat,
                    linear-gradient(to right,  var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 100% 1px no-repeat,
                    linear-gradient(to left,   var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 100% 1px no-repeat;
            }
        }

        @media(width<700px){
            grid-template-columns: 1fr;

            /* 1-col: every card needs right verticals; only last needs bottom */
            .card::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat;
            }
            .card:nth-last-child(1)::after {
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat,
                    linear-gradient(to right,  var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 100% 1px no-repeat,
                    linear-gradient(to left,   var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 100% 1px no-repeat;
            }

            &[data-view="list"] {
                grid-template-columns: 1fr;

                .card {
                    flex-direction: column;
                    align-items: unset;
                    padding-block: var(--space-bar-2);

                    .cardinfo {
                        flex-direction: column;

                        .card-text {
                            flex-direction: column;
                            justify-content: unset;
                            width: auto;
                        }

                        .tags { margin-block-start: var(--space-bar-1); }

                        .img-static { display: block; }
                    }
                }
            }

            .card{
                color: light-dark(
                    var(--light-primary-color),
                    var(--dark-primary-color)
                );
            }
        }

        @media(700px <= width < 1100px){
            grid-template-columns: repeat(2, 1fr);

            /* 2-col: right verticals + bottom strokes on outer edges only */
            .card:nth-child(2n)::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat;
            }
            .card:nth-last-child(-n+2)::after {
                content: '';
                position: absolute;
                inset: 0;
                pointer-events: none;
                background:
                    linear-gradient(to right, var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 100% 1px no-repeat,
                    linear-gradient(to left,  var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 100% 1px no-repeat;
            }
            .card:nth-child(2n):nth-last-child(-n+2)::after {
                background:
                    linear-gradient(to bottom, var(--_cc) var(--_cs), transparent var(--_cs)) top    right / 1px 100% no-repeat,
                    linear-gradient(to top,    var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 1px 100% no-repeat,
                    linear-gradient(to right,  var(--_cc) var(--_cs), transparent var(--_cs)) bottom left  / 100% 1px no-repeat,
                    linear-gradient(to left,   var(--_cc) var(--_cs), transparent var(--_cs)) bottom right / 100% 1px no-repeat;
            }
        }

        &[data-view="list"] {
            grid-template-columns: 1fr;

            .card {
                flex-direction: row;
                align-items: center;
                background-image: none;
                border: var(--button-style);
                &::before, &::after { display: none; }
                justify-content: space-between;
                padding-block: var(--space-bar-1);

                .cardinfo {
                    flex-direction: row;
                    align-items: center;
                    justify-content: space-between;
                    gap: var(--space-bar-2);

                    .card-text {
                        flex-direction: row;
                        align-items: baseline;
                        justify-content: space-between;
                        width: 100%;
                    }

                    .tags {
                        margin-block-start: 0;
                        flex-wrap: nowrap;
                    }

                    .img-static {
                        display: none;
                    }
                }

                .arrow { opacity: 1; }
            }
        }
    }
}



h1:hover, #course:hover{
    color: light-dark(
        var(--light-secondary-color),
        var(--dark-secondary-color)
    );
    font-style: italic;
}

/* i want to have a cool hover efffect */
/* i found this gradient border example on codepen:https://codepen.io/gayane-gasparyan/pen/jOmaBQK */
/* i reversed the interaction so my border animated when on hover */

/* i learned that:
    this example uses pseudo element for the border.
    the border is an illusion made by offsetting the color block
    */

.cta{
    width: max-content;
    position: relative;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    font-size: var(--body-copy);

    background-color: light-dark(
        var(--light-primary-color),
        var(--dark-primary-color)
    );
    color: light-dark(
        var(--light-bg-color),
        var(--dark-bg-color)
    );
    border-radius: var(--button-corner);
    border: var(--button-style);
    transition: background-color 1000ms ease-in-out;
    transition: color 100ms ease-in-out;
}

.cta:before, .cta:after {
    content: "";
    position: absolute;
    border-radius: var(--button-corner);
    background-image: linear-gradient(
    var(--rotate)
    , #83858a, #636060 43%, #e6e6e6);
    z-index: -1;
    animation: none;
    opacity: 0;
    transition: border-radius 1000ms ease-in-out;
}

.cta:hover {
    background-color: transparent;
    color: light-dark(
        var(--light-primary-color),
        var(--dark-primary-color)
    );
    font-style: italic;
}
.cta:hover:before, .cta:hover:after {
    animation: spin 2.5s linear infinite;
    opacity: 1;
}

#bg{
    position: absolute;
    inset: 0;
    z-index: 2;    
    touch-action: none;
    pointer-events: none;
    mix-blend-mode: difference;
    div{
        position: fixed;
        left: 0;
        top: 0;
        translate: -50% -50%;
    }
    #h-line, #v-line{
        background-color: #ffffff;
        opacity: 0.2;
    }

    #h-line{
                width: 200vw;
                height:  calc(var(--space-bar-0)/15);
    }

    #v-line{
        width: calc(var(--space-bar-0)/10);
        height: 200vh;
    }

    #sq{
        width: 1rem;
        height: 1rem;
        background-color: #ffffff;
    }
}



    


@media(width<1100px){
    body{
        height: max-content;
    }
}

@media(width >= 700px) {
    #main-content p {
        opacity: 0.4;
        transform: scale(0.97);
        transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1),
                    transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    #main-content p.in-view {
        opacity: 1;
        transform: none;
    }
    main #project .card {
        opacity: 0.4;
        transition: opacity 600ms cubic-bezier(0.165, 0.84, 0.44, 1),
                    background-color 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    main #project .card .cardinfo {
        transform: scale(0.97);
        transition: transform 600ms cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    main #project .card.in-view {
        opacity: 1;
    }
    main #project .card.in-view .cardinfo {
        transform: none;
    }
}

@media(width<700px){
    #bg { display: none; }
    body, button, a { cursor: auto; }
    .text-links { filter: blur(var(--blur)); transition: filter 500ms ease; }
    .text-links.in-view { filter: blur(0); }
    .card .text-links { filter: unset; transition: none; }
    .card .cardinfo { filter: blur(var(--blur)); transition: filter 500ms ease; }
    .card.in-view .cardinfo { filter: blur(0); }
    #main-content p { filter: blur(var(--blur)); transition: filter 500ms ease; }
    #main-content p.in-view { filter: blur(0); }
    .win-link { transition: filter 500ms ease; }
    .win-link.in-view { filter: blur(0); }
    .ink-ring { display: none; }

    header {
        position: static;
        margin: var(--space-page-margin);
        margin-block-end: 0;
    }

    :root{
        --space-page-margin: 1.4rem;
        --space-bar-1: 0.5rem; 

        --heading-copy: calc(var(--body-copy) * 1.3);
    }
    #project{
        li{
            padding-block: var(--space-bar-2);
        }
        .card{
             padding-inline: 0;
             padding-block: calc(var(--space-bar-3)*0.6);
            .cardinfo{
                flex-direction: column;
                row-gap: var(--space-bar-2);
                align-items: left;
               
                
                .cardtitle{
                    .arrow{
                    opacity: 1;
                }
            }
            
        }
        }   
    } 
}

@keyframes spin {
  0% {
    --rotate: 0deg;
  }
  100% {
    --rotate: 360deg;
  }
}

.project-window {
    position: fixed;
    width: clamp(20rem, 50vw, 44rem);
    height: 35rem;
    min-width: 18rem;
    min-height: 14rem;

    @media(width < 700px) {
        inset: 0;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        resize: none;
    }
    background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
    color: light-dark(var(--light-primary-color), var(--dark-primary-color));
    border: var(--button-style);
    display: flex;
    flex-direction: column;
    padding: 0 var(--space-bar-2) var(--space-bar-2);
    overflow: auto;
    scrollbar-width: none;
    resize: both;
    scale: 0.97;
    opacity: 0;
    transition: opacity 300ms ease, scale 400ms cubic-bezier(0.165, 0.84, 0.44, 1);

    &::-webkit-scrollbar { display: none; }

    &.open {
        scale: 1;
        opacity: 1;
    }

    &.fullscreen {
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        resize: none;

        .win-fullscreen::after {
            mask-image: url('assets/shrink.svg');
        }
    }

    .win-header {
        position: sticky;
        inset-block-start: 0;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        user-select: none;
        padding-block: var(--space-bar-2);
        border-block-end: var(--button-style);
        margin-block-end: var(--space-bar-2);
        flex-shrink: 0;
        background-color: light-dark(var(--light-bg-color), var(--dark-bg-color));
    }

    .win-controls {
        display: flex;
        align-items: center;
        gap: var(--space-bar-1);
    }

    .win-close,
    .win-fullscreen {
        all: unset;
        cursor: none;
        color: light-dark(var(--light-primary-color), var(--dark-primary-color));
        display: inline-flex;

        svg { width: 1rem; height: 1rem; display: block; }
        rect, line, polyline { stroke-width: var(--space-bar-2); }
    }

    .win-fullscreen {
        &::after {
            content: '';
            display: block;
            width: 1rem;
            height: 1rem;
            mask: url('assets/expand.svg') center / contain no-repeat;
            background-color: currentColor;
            transition: rotate 300ms ease;
        }
    }

    .win-close {
        rect {
            fill: currentColor;
            transition: fill 300ms ease;
        }

        line {
            stroke: light-dark(var(--light-bg-color), var(--dark-bg-color));
            transition: stroke 300ms ease;
        }

        &:hover {
            rect { fill: transparent; }
            line { stroke: currentColor; }
        }
    }

    .win-link {
        font-family: var(--mono);
        font-size: var(--caption-copy);
        color: light-dark(var(--light-primary-color), var(--dark-primary-color));
        filter: blur(var(--blur));
        transition: filter 400ms ease;
        &:hover { filter: blur(0); }
    }

    .win-title {
        flex-shrink: 0;
    }

    .win-info {
        flex-shrink: 0;
        margin-block-end: var(--space-bar-1);
        display: flex;
        flex-direction: column;
        gap: var(--space-bar-0);

        .tags {
            font-family: var(--mono);
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-bar-2);

            tag {
                text-transform: uppercase;
                font-size: var(--caption-copy);
                display: inline-flex;
                align-items: center;
                gap: 0.3em;

                &::before {
                    content: "";
                    display: block;
                    width: calc(var(--space-bar-0) * 0.8);
                    height: calc(var(--space-bar-0) * 0.8);
                    background-color: currentColor;
                    flex-shrink: 0;
                }
            }
        }
    }

    .win-gallery {
        display: flex;
        flex-direction: column;
        gap: var(--space-bar-3);
        padding-block-start: var(--space-bar-2);
    }

    .win-gallery-item {
        display: grid;
        gap: var(--space-bar-2);

        img, video {
            width: 100%;
            border-radius: var(--button-corner);
            display: block;
        }

        .win-caption {
            font-size: var(--caption-copy);
            color: light-dark(var(--light-secondary-color), var(--dark-secondary-color));
            line-height: 1.5;
        }
    }

    /* layout: full — image full width, caption below left */
    .win-gallery-item.layout-full {
        grid-template-rows: auto auto;
    }

    /* layout: beside-right — caption left, image right */
    .win-gallery-item.layout-beside-right {
        grid-template-columns: 1fr 1.4fr;
        align-items: start;

        .win-caption { order: 0; }
        img, video { order: 1; }
    }

    /* layout: beside-left — image left, caption right */
    .win-gallery-item.layout-beside-left {
        grid-template-columns: 1.4fr 1fr;
        align-items: start;

        img, video { order: 0; }
        .win-caption { order: 1; }
    }

    /* layout: offset — image ~65% wide, aligned right; caption top-left */
    .win-gallery-item.layout-offset {
        grid-template-columns: 1fr 1.8fr;
        align-items: start;

        .win-caption {
            order: 0;
            padding-block-start: var(--space-bar-1);
        }
        img, video {
            order: 1;
        }
    }

    /* layout: double — two images side by side, description in third column */
    .win-gallery-item.layout-double {
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
    }

    /* layout: overlay — image full width, caption overlaid at bottom */
    .win-gallery-item.layout-overlay {
        position: relative;
        display: block;

        img, video { width: 100%; }

        .win-caption {
            position: absolute;
            inset-block-end: 0;
            inset-inline: 0;
            padding: var(--space-bar-1) var(--space-bar-2);
            background: linear-gradient(transparent, light-dark(rgba(0,0,0,0.55), rgba(0,0,0,0.7)));
            color: #e6e8e0;
            border-radius: 0 0 var(--button-corner) var(--button-corner);
        }
    }

    @media(width < 700px) {
        .win-gallery-item.layout-beside-right,
        .win-gallery-item.layout-beside-left,
        .win-gallery-item.layout-offset,
        .win-gallery-item.layout-double {
            grid-template-columns: 1fr;

            img, video, .win-caption { order: unset; }
        }
    }
}

#bg {
    z-index: 1000;
}

#email-tooltip {
    position: fixed;
    pointer-events: none;
    font-family: 'DM Mono', monospace;
    font-size: 0.7rem;
    color: light-dark(var(--light-primary-color), var(--dark-primary-color));
    opacity: 0;
    transition: opacity 150ms ease;
    z-index: 9999;
    white-space: nowrap;
}

#email-tooltip.visible {
    opacity: 1;
}