/* ==========================================================
   ADRIAN STAHL
   Stitched through time

   Global stylesheet
========================================================== */


/* ==========================================================
   01 — DESIGN TOKENS
========================================================== */

:root {

    /* ------------------------------------------------------
       Brand colours
    ------------------------------------------------------ */

    --black: #0d0d0d;

    --violet: #8a35c0;
    --violet-light: #b587d4;

    --petrol: #008b94;
    --petrol-light: #6bbdc6;


    /* ------------------------------------------------------
       Functional greys
    ------------------------------------------------------ */

    --grey-dark: #181818;
    --grey-medium: #2a2a2a;
    --grey-muted: #707070;
    --grey-text: #d4d4d4;


    /* ------------------------------------------------------
       Typography
       
       Dharma Gothic:
       Adobe Fonts / display use

       Body font:
       PLACEHOLDER — final selection later
    ------------------------------------------------------ */

 --font-body: "IBM Plex Sans", sans-serif;
    --font-display: "dharma-gothic-c", sans-serif;


    /* ------------------------------------------------------
       Layout
    ------------------------------------------------------ */

    --content-width: 1400px;
    --content-width-wide: 1600px;

    --page-padding: 5vw;

    --section-space: clamp(6rem, 12vw, 12rem);


    /* ------------------------------------------------------
       UI
    ------------------------------------------------------ */

    --border: rgba(212, 212, 212, 0.18);

    --transition-fast: 180ms ease;
    --transition-standard: 300ms ease;

}


/* ==========================================================
   02 — RESET
========================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    min-height: 100vh;

    overflow-x: hidden;

    background: var(--black);

    color: var(--grey-text);

    font-family: var(--font-body);

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

}


img,
video {

    display: block;

    max-width: 100%;

}


img {

    height: auto;

}


a {

    color: inherit;

}


button,
input,
textarea,
select {

    font: inherit;

}


/* ==========================================================
   03 — BACKGROUND
========================================================== */

.background-layer {

    position: fixed;

    inset: 0;

    z-index: -2;

    background:

        radial-gradient(
            circle at 50% 30%,
            rgba(138, 53, 192, 0.08) 0%,
            rgba(0, 139, 148, 0.025) 45%,
            var(--black) 100%
        );

}


.noise-layer {

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image: url("../images/noise.png");

    background-repeat: repeat;

    opacity: 0.05;

}


/* ==========================================================
   04 — GLOBAL LAYOUT
========================================================== */

.container {

    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--content-width)
    );

    margin-inline: auto;

}


.container-wide {

    width: min(
        calc(100% - (var(--page-padding) * 2)),
        var(--content-width-wide)
    );

    margin-inline: auto;

}


section {

    position: relative;

    padding-block: var(--section-space);

}


/* ==========================================================
   05 — TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4 {

    font-family: var(--font-display);

    font-weight: normal;

    line-height: 0.95;

    letter-spacing: 0.02em;

}


h1 {
    font-size: clamp(6rem, 14vw, 13rem);
}

h2 {
    font-size: clamp(4.5rem, 10vw, 9rem);
}

h3 {
    font-size: clamp(3rem, 6vw, 5rem);
}


p {

    max-width: 70ch;

}


.display-label {

    font-family: var(--font-display);

    font-size: clamp(1.5rem, 3vw, 3rem);

    line-height: 0.95;

    letter-spacing: 0.04em;

}


.eyebrow {

    color: var(--grey-muted);

    font-size: 0.8rem;

    letter-spacing: 0.15em;

    text-transform: uppercase;

}


/* ==========================================================
   06 — LINKS
========================================================== */

a {

    text-decoration: none;

}


.text-link {

    position: relative;

    color: var(--grey-text);

    transition:
        color var(--transition-fast);

}


.text-link:hover {

    color: var(--violet-light);

}


/* ==========================================================
   07 — HEADER
========================================================== */

.site-header {

    position: fixed;

    top: 1rem;
    left: 0;

    width: 100%;

    z-index: 100;

    padding-block: 0.6rem;
    
    background: rgba(13, 13, 13, 0.60);
    display: flex;
    align-items: center;

}


.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 2rem;

}


.wordmark {

    color: var(--grey-text);

    font-family: var(--font-display);

    font-size: 1.5rem;

    line-height: 1;

    letter-spacing: 0.04em;

    transition:
        color var(--transition-fast);

}


.wordmark:hover {

    color: var(--violet-light);

}


.main-nav {

    display: flex;

    align-items: center;

    gap: clamp(1rem, 2.5vw, 2.5rem);

}


.main-nav a {

    color: var(--grey-text);

    font-size: 0.85rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition:
        color var(--transition-fast);

}


.main-nav a:hover,
.main-nav a.active {

    color: var(--violet-light);

}

.nav-shop {
    position: relative;
}

.shop-toggle {
    display: block;
}

.shop-dropdown {

    position: absolute;

    top: calc(100% + 0.6rem);
    right: 0;

    min-width: 150px;

    padding: 0.45rem 0;

    background: rgba(13, 13, 13, 0.92);

    border: 1px solid rgba(181, 135, 212, 0.25);

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}

.nav-shop:hover .shop-dropdown {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}

.shop-dropdown a {

    display: block;

    padding: 0.55rem 1rem;

    color: #d4d4d4;

    text-decoration: none;

    white-space: nowrap;

}

.shop-dropdown a:hover {

    color: #b587d4;

    background: rgba(138, 53, 192, 0.12);

}


/* ==========================================================
   08 — HERO
========================================================== */

.hero {

    position: relative;

    min-height: 100svh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

}


.hero-media {

    position: absolute;

    inset: 0;

    z-index: 0;

}


.hero-media video,
.hero-media img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    background:

        linear-gradient(
            to bottom,
            rgba(13, 13, 13, 0.15) 0%,
            rgba(13, 13, 13, 0.05) 45%,
            rgba(13, 13, 13, 0.75) 100%
        );

}


.hero-content {

    position: absolute;

    inset: 0;

    z-index: 2;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;

    padding: 8vh 6vw;

}


.hero-title {
    max-width: 900px;

    color: var(--grey-text);

    font-size: clamp(5rem, 10vw, 10rem);

    text-align: right;
}


.hero-claim {

    margin-top: 0.75rem;

    color: var(--violet-light);

    font-family: var(--font-display);

    font-size: clamp(1.25rem, 2.5vw, 2.1rem);

    letter-spacing: 0.04em;

    text-align: right;

}

.hero-text {

    display: flex;

    flex-direction: column;

    align-items: flex-end;

}

/* ==========================================================
   09 — INTRO
========================================================== */

.intro {

    display: grid;

    grid-template-columns:
        minmax(0, 0.7fr)
        minmax(0, 2fr);

    gap: clamp(3rem, 8vw, 10rem);

    align-items: center;

}


.intro-text {

    font-size: clamp(1rem, 1.45vw, 1.35rem);

    font-weight: 300;

    line-height: 1.7;

}


.intro-accent {

    color: var(--violet-light);

}


/* ==========================================================
   10 — COLLECTIONS
========================================================== */

.collections-grid {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: clamp(1rem, 2vw, 2rem);

}


.collection {

    position: relative;

    overflow: hidden;

}


.collection:nth-child(1) {

    grid-column: span 7;

}


.collection:nth-child(2) {

    grid-column: span 5;

    margin-top: 8vw;

}


.collection:nth-child(3) {

    grid-column: span 4;

    margin-top: 3vw;

}


.collection:nth-child(4) {

    grid-column: span 8;

    margin-top: -4vw;

}


.collection-media {

    position: relative;

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--grey-dark);

}


.collection:nth-child(2) .collection-media {

    aspect-ratio: 4 / 5;

}


.collection:nth-child(3) .collection-media {

    aspect-ratio: 4 / 5;

}


.collection:nth-child(4) .collection-media {

    aspect-ratio: 16 / 10;

}


.collection-media img,
.collection-media video {

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 500ms ease;

}


.collection:hover .collection-media img,
.collection:hover .collection-media video {

    transform: scale(1.025);

}


.collection-title {

    position: absolute;

    left: 1.5rem;
    bottom: 1.5rem;

    z-index: 2;

    color: white;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, 0.5);

}


.collection-title::after {

    content: "";

    display: block;

    width: 2rem;

    height: 2px;

    margin-top: 0.6rem;

    background: var(--violet);

}


/* ==========================================================
   11 — MEDIA / PORTFOLIO
========================================================== */

.media-grid {

    display: grid;

    grid-template-columns: repeat(12, 1fr);

    gap: clamp(1rem, 2vw, 2rem);

}


.media-item {

    position: relative;

    overflow: hidden;

    background: var(--grey-dark);

}


.media-item img,
.media-item video {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.media-item--large {

    grid-column: span 7;

}


.media-item--medium {

    grid-column: span 5;

}


.media-item--small {

    grid-column: span 4;

}


.media-item--wide {

    grid-column: span 8;

}


.media-item--full {

    grid-column: 1 / -1;

}


.media-item--portrait {

    aspect-ratio: 4 / 5;

}


.media-item--landscape {

    aspect-ratio: 16 / 10;

}


.media-item--square {

    aspect-ratio: 1 / 1;

}


.media-item--reel {

    aspect-ratio: 9 / 16;

}


.media-item img,
.media-item video {

    transition:
        transform 500ms ease;

}


.media-item:hover img,
.media-item:hover video {

    transform: scale(1.02);

}


/* ==========================================================
   12 — STUDIO / WORKSHOP
========================================================== */

.studio-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(0, 1fr);

    gap: clamp(2rem, 6vw, 8rem);

    align-items: center;

}


.studio-image {

    aspect-ratio: 4 / 5;

    overflow: hidden;

    background: var(--grey-dark);

}


.studio-image img {

    width: 100%;
    height: 100%;

    object-fit: cover;

}


.studio-text {

    font-size: clamp(1rem, 1.4vw, 1.3rem);

    line-height: 1.75;

}


/* ==========================================================
   13 — SHOP TEASER
========================================================== */

.shop-teaser {

    border-top: 1px solid var(--border);

    border-bottom: 1px solid var(--border);

}


.shop-teaser-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 3rem;

}


.shop-link {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    color: var(--violet-light);

    font-family: var(--font-display);

    font-size: 1.5rem;

    letter-spacing: 0.04em;

}


.shop-link:hover {

    color: var(--petrol-light);

}


/* ==========================================================
   14 — DIY TEASER
========================================================== */

.diy-teaser {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap: clamp(2rem, 6vw, 8rem);

    align-items: center;

}


.diy-teaser-label {

    color: var(--petrol-light);

}


/* ==========================================================
   15 — FOOTER
========================================================== */

.site-footer {

    padding-block: 5rem 3rem;

    color: var(--grey-muted);

}


.footer-inner {

    display: grid;

    grid-template-columns:
        2fr
        1fr
        1fr
        1fr;

    gap: 3rem;

}


.footer-brand {

    color: var(--grey-text);

    font-family: var(--font-display);

    font-size: 1.5rem;

}


.footer-group {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

}


.footer-group a {

    transition:
        color var(--transition-fast);

}


.footer-group a:hover {

    color: var(--violet-light);

}


.footer-bottom {

    margin-top: 4rem;

    padding-top: 1.5rem;

    border-top: 1px solid var(--border);

    display: flex;

    justify-content: space-between;

    gap: 2rem;

    flex-wrap: wrap;

    font-size: 0.8rem;

}


/* ==========================================================
   16 — RESPONSIVE
========================================================== */

@media (max-width: 900px) {

    :root {

        --page-padding: 6vw;

    }


    .main-nav {

        gap: 1rem;

    }


    .intro,
    .studio-grid,
    .diy-teaser {

        grid-template-columns: 1fr;

    }


    .collection:nth-child(1),
    .collection:nth-child(2),
    .collection:nth-child(3),
    .collection:nth-child(4) {

        grid-column: span 6;

        margin-top: 0;

    }


    .media-item--large,
    .media-item--medium,
    .media-item--wide {

        grid-column: span 6;

    }


    .media-item--small {

        grid-column: span 4;

    }


    .footer-inner {

        grid-template-columns: 1fr 1fr;

    }

}

.mobile-menu-toggle,
.mobile-nav {
    display: none;
}

@media (max-width: 600px) {

    :root {

        --page-padding: 5vw;

        --section-space: 5rem;

    }


    .site-header {

        padding-block: 1rem;

    }


.main-nav {
    display: none;
}


.mobile-menu-toggle {

    display: flex;

    width: 2rem;
    height: 2rem;

    padding: 0;

    border: 0;

    background: transparent;

    flex-direction: column;
    justify-content: center;

    gap: 0.3rem;

    cursor: pointer;

}


.mobile-menu-toggle span {

    display: block;

    width: 100%;
    height: 1px;

    background: var(--grey-text);

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast);

}


.mobile-nav {

    position: absolute;

    top: calc(100% + 0.5rem);
    right: var(--page-padding);

    min-width: 180px;

    padding: 0.75rem 0;

    background: rgba(13, 13, 13, 0.94);

    border: 1px solid rgba(181, 135, 212, 0.25);

    display: flex;
    flex-direction: column;

    opacity: 0;
    visibility: hidden;

    transform: translateY(-5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s ease;

}


.mobile-nav.is-open {

    opacity: 1;
    visibility: visible;

    transform: translateY(0);

}


.mobile-nav > a,
.mobile-nav-shop > span,
.mobile-nav-shop > a {

    display: block;

    padding: 0.6rem 1rem;

    color: var(--grey-text);

    font-size: 0.85rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}


.mobile-nav > a:hover,
.mobile-nav-shop > a:hover {

    color: var(--violet-light);

}


.mobile-nav-shop {

    border-top: 1px solid var(--border);

    margin-top: 0.5rem;

    padding-top: 0.5rem;

}


.mobile-nav-shop > span {

    color: var(--grey-muted);

}


.mobile-nav-shop > a {

    padding-left: 1.75rem;

}


    .hero {

        min-height: 90svh;

    }


    .hero-content {

        padding-block: 8vh 6vh;

    }


    .collections-grid,
    .media-grid {

        grid-template-columns: 1fr;

    }


    .collection:nth-child(1),
    .collection:nth-child(2),
    .collection:nth-child(3),
    .collection:nth-child(4),

    .media-item--large,
    .media-item--medium,
    .media-item--small,
    .media-item--wide,
    .media-item--full {

        grid-column: 1 / -1;

        margin-top: 0;

    }
    
    .collection:nth-child(1) {
    grid-row: 1;
}

.collection:nth-child(2) {
    grid-row: 2;
}

.collection:nth-child(3) {
    grid-row: 4;
}

.collection:nth-child(4) {
    grid-row: 3;
}


    .media-item--reel {

        max-width: 80%;

        margin-inline: auto;

    }


    .shop-teaser-inner {

        flex-direction: column;

        align-items: flex-start;

    }


    .footer-inner {

        grid-template-columns: 1fr;

    }


    .footer-bottom {

        flex-direction: column;

    }

}