/* ==========================================================
   Studio feature
   ========================================================== */

.studio-page {
    overflow: hidden;
}

.studio-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(34rem, 72vh, 48rem);
    align-items: end;
    padding: calc(var(--header-height) + var(--space-9)) 0 var(--space-9);
    border-bottom: 1px solid var(--color-border);
}

.studio-hero::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 45%, var(--color-background) 100%),
        radial-gradient(circle at 72% 35%, rgb(214 183 122 / 12%), transparent 26rem),
        radial-gradient(circle at 20% 12%, rgb(84 94 126 / 20%), transparent 30rem);
}

.studio-hero__sky {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.36;
    background-image:
        radial-gradient(circle, rgb(242 238 229 / 60%) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgb(214 183 122 / 38%) 0 1px, transparent 1.4px);
    background-position: 0 0, 2.8rem 4.6rem;
    background-size: 7rem 7rem, 11rem 11rem;
    mask-image: linear-gradient(to bottom, black 0%, transparent 86%);
}

.studio-hero__inner {
    display: grid;
    max-width: 68rem;
    margin-inline: auto;
    animation: studio-arrival 1s var(--transition-slow) both;
}

.studio-hero__eyebrow,
.studio-journey__eyebrow {
    margin-bottom: var(--space-5);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    letter-spacing: 0.3em;
    text-transform: uppercase;
}

.studio-hero__title {
    max-width: 13ch;
    font-size: clamp(3.2rem, 7vw, 7.4rem);
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.studio-hero__intro {
    max-width: 43rem;
    margin-top: var(--space-7);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    text-wrap: pretty;
}

.studio-section {
    position: relative;
    padding-block: clamp(5rem, 10vw, 9rem);
    border-bottom: 1px solid var(--color-border);
}

.studio-section::after,
.studio-principles::after {
    content: "";
    position: absolute;
    bottom: -0.2rem;
    left: 50%;
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--color-accent-soft);
    border-radius: 50%;
    background: var(--color-background);
    box-shadow:
        -1.25rem 0 0 -0.13rem var(--color-background),
        -1.25rem 0 0 -0.05rem var(--color-border),
        1.25rem 0 0 -0.13rem var(--color-background),
        1.25rem 0 0 -0.05rem var(--color-border);
    transform: translateX(-50%);
}

.studio-section--manifesto,
.studio-section--players {
    background: linear-gradient(135deg, rgb(29 35 48 / 72%), rgb(16 19 26 / 24%));
}

.studio-section__grid {
    display: grid;
    grid-template-columns: minmax(15rem, 0.72fr) minmax(18rem, 1.28fr);
    gap: clamp(3rem, 8vw, 8rem);
    align-items: start;
}

.studio-section__heading {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
}

.studio-section__index {
    margin-bottom: var(--space-4);
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
}

.studio-section__title {
    max-width: 12ch;
    font-size: clamp(2.25rem, 4.2vw, 4.6rem);
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.studio-section__content {
    display: grid;
    gap: var(--space-6);
    max-width: 46rem;
    color: var(--color-text-muted);
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.35rem);
    line-height: 1.8;
}

.studio-section__content p:first-child {
    color: var(--color-text);
    font-size: clamp(1.25rem, 1.1rem + 0.55vw, 1.65rem);
}

.studio-section__statement {
    position: relative;
    margin-block: var(--space-2);
    padding-left: clamp(1.5rem, 3vw, 2.25rem);
    color: var(--color-text);
    font-family: var(--font-family-heading);
    font-size: clamp(1.35rem, 1.15rem + 0.75vw, 1.9rem);
    line-height: 1.45;
}

.studio-section__statement::before {
    content: "";
    position: absolute;
    top: 0.2em;
    bottom: 0.2em;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, var(--color-accent), transparent);
}

.studio-principles {
    position: relative;
    padding-block: clamp(5rem, 10vw, 9rem);
    border-bottom: 1px solid var(--color-border);
}

.studio-principles__heading {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) clamp(3rem, 8vw, 8rem);
    align-items: end;
    margin-bottom: clamp(3rem, 7vw, 6rem);
}

.studio-principles__heading .studio-section__index {
    grid-column: 1 / -1;
    margin-bottom: 0;
}

.studio-principles__intro {
    max-width: 38rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.studio-principles__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
    border-left: 1px solid var(--color-border);
}

.studio-card {
    min-height: 19rem;
    padding: clamp(2rem, 5vw, 4rem);
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: rgb(23 27 36 / 42%);
    transition:
        background var(--transition),
        transform var(--transition);
}

.studio-card:hover {
    background: var(--color-surface);
    transform: translateY(-0.2rem);
}

.studio-card__number {
    margin-bottom: var(--space-7);
    color: var(--color-accent-soft);
    font-size: var(--font-size-xs);
    letter-spacing: 0.2em;
}

.studio-card__title {
    margin-bottom: var(--space-4);
    font-size: clamp(1.7rem, 2.8vw, 2.65rem);
}

.studio-card__text {
    max-width: 31rem;
    color: var(--color-text-muted);
}

.studio-journey {
    position: relative;
    isolation: isolate;
    padding-block: clamp(6rem, 14vw, 12rem);
    text-align: center;
}

.studio-journey::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgb(214 183 122 / 12%), transparent 27rem),
        linear-gradient(to top, rgb(29 35 48 / 45%), transparent 70%);
}

.studio-journey__inner {
    display: grid;
    justify-items: center;
}

.studio-journey__mark {
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-7);
    object-fit: contain;
    opacity: 0.85;
    filter: drop-shadow(0 0 1.8rem rgb(214 183 122 / 18%));
}

.studio-journey__title {
    max-width: 14ch;
    font-size: clamp(2.6rem, 6vw, 6rem);
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.studio-journey__text {
    max-width: 45rem;
    margin-top: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.studio-journey__link {
    display: inline-flex;
    margin-top: var(--space-7);
    border-bottom: 1px solid var(--color-accent-soft);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.studio-journey__link:hover {
    border-color: var(--color-text);
    color: var(--color-text);
}

@keyframes studio-arrival {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 820px) {
    .studio-section__grid,
    .studio-principles__heading {
        grid-template-columns: 1fr;
        gap: var(--space-7);
    }

    .studio-section__heading {
        position: static;
    }

    .studio-principles__heading .studio-section__index {
        grid-column: auto;
    }

    .studio-principles__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .studio-hero {
        min-height: 40rem;
        padding-bottom: var(--space-8);
    }

    .studio-hero__title {
        font-size: clamp(2.9rem, 15vw, 4.6rem);
    }

    .studio-section,
    .studio-principles {
        padding-block: var(--space-9);
    }

    .studio-card {
        min-height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .studio-hero__inner {
        animation: none;
    }

    .studio-card {
        transition: none;
    }
}