@font-face {
  font-family: "Alcyone";
  src: url("/fonts/Alcyone-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alcyone";
  src: url("/fonts/Alcyone-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Alcyone";
  src: url("/fonts/Alcyone-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
    /* --color-bg: hsl(3, 74%, 62%); */
    --color-bg: hsl(0, 0%, 98%);
    --color-fg: hsl(0, 0%, 20%);
    --color-accent: hsl(358, 87%, 46%);

    --fw-regular: 400;
    --fw-medium: 500;
    /* 
    --fw-semibold: 600; */
    --fw-bold: 700;
    /* --fw-extrabold: 800; */

    --fs-caption: 0.8745rem;
    --fs-body: 1rem;
    --fs-body-m: 1.125rem;
    --fs-body-l: 1.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--color-bg);
    color: var(--color-fg);
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Alcyone', sans-serif;
    /* font-weight: var(--fw-medium); */
    /* scroll-behavior: smooth; */
}

main {
}

.header {
    /* background-color: var(--color-accent); */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    /* flex-direction: column;
    justify-content: center;
    align-items: center; */
    padding: 1rem;
    /* min-height: 50vh; */
    .logo {
        flex-shrink: 0;
        width: 3rem;
        height: auto;
    }
    a {
        text-decoration: none;
        color: currentColor;
        font-weight: var(--fw-bold);
    }
}

.tagline {
    /* display: flex; */
    /* flex-wrap: wrap; */
    /* flex-grow: 1; */
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-weight: var(--fw-medium);
    /* abbr,
    span {
        display: flex;
    } */
    abbr {
        text-decoration: none;
    }
    span + span::before {
        content: " • " / "";
        /* margin-inline: .5rem; */
    }
    abbr::after {
        content: " — " / "";
        /* margin-inline: .5rem; */
    }
    /* &::before {
        display: inline-block;
        content: "";
        height: 5px;
        width: 100%;
        background-color: var(--color-fg);
        margin-right: 1rem;
    } */
}

/* .nav  {
    display: flex;
    flex-flow: column;
    row-gap: 1rem;
    ul {
        list-style-type: "";
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        column-gap: 1.5rem;
    }
    ul {
        li:has(a[aria-current="page"]) {
            display: none;
        }

    }
} */

.intro {
    /* background-color: var(--color-accent); */
    min-height: 60vh;
    display: flex;
    position: relative;
    overflow: hidden;
    h1 {
        writing-mode: vertical-rl;
        rotate: 180deg;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-block: 1rem;
        margin: 0;
        font-size: var(--fs-caption);
        font-weight: var(--fw-medium);
        text-transform: uppercase;
        text-align: center;
        & span {
            font-weight: var(--fw-regular);
        }
    }

    img {
        position: absolute;
        --img-w: 380px;
        width: 100%;
        max-width: var(--img-w);
        left: calc(50% - var(--img-w)/2);
        top: calc(50% - var(--img-w)/2);
        /* top: 50%;
        left: 50%;
        translate: -50% -50%; */
        aspect-ratio: 1;
        object-fit: cover;
        mix-blend-mode: multiply;
    }
}

/* h1 {
    font-size: clamp(1.5rem, calc(6vw + .25rem), 3rem);
    line-height: 100%;
    letter-spacing: calc(-0.1rem + 0.1vw);
    margin: 0;
    span {
        font-weight: var(--fw-regular);
        font-size: clamp(1rem, calc(6vw + .25rem), 1.84rem);
        letter-spacing: calc(-0.12rem + 0.1vw);
        margin-top: .25rem;
        display: block;
         &::before {
            content: "— ";
            display: block;
        } 
    }
} */

.coleccion {
    padding: 1rem;
}

.espazos {
    list-style-type: "";
    padding: 0;
    margin: 0;
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    grid-template-rows: auto;
    column-gap: 2rem;
    row-gap: 6rem;
    align-items: start;
    h3 {
        font-size: var(--fs-body-m);
        font-weight: var(--fw-bold);
        margin: 0;
        /* color: var(--color-accent);*/
        padding-bottom: .5rem;
        border-bottom: 3px solid var(--color-fg);
        em {
            margin-top: .25rem;
            font-size: var(--fs-body);
            line-height:130%;
            display: block;
            color: var(--color-fg);
            font-weight: var(--fw-medium);
        }
    }
    p {
        margin: 0;
        line-height:140%;
        /* text-align: center; */
    }
    > li {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        row-gap: 1rem;
        &:hover {
            img {
                filter: grayscale(0);
            }
        }
    }
    .espazos-img {
        list-style-type: "";
        padding: 0;
        margin: 0;
        position: relative;
        li {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.6s ease;
            &.is-active {
                opacity: 1;
                position: relative;
            }
        }
    }
    img {
        width: 100%;
        height: auto;
        vertical-align: middle;
        margin-top: auto;
        filter: grayscale(1);
        /* mix-blend-mode: overlay; */
        transition: filter 0.3s ease;
    }
}

.footer {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto;
}

main,
.footer {
    display: none;
}

.header {
    --color-fg: black;
    background-color: var(--color-accent);
    height: 100dvh;
    color: var(--color-fg);
    display: grid;
    place-content: center;
    .logo {
        width: 5rem;
        height: auto;
        * {
            fill: var(--color-fg);
        }
    }
    h1 {
        margin: 0;
        span {
            display:block;
            font-weight: var(--fw-regular);
            font-size: var(--fs-body-l);
        }
    }
}