/* ==========================================================
   Press feature
   ========================================================== */

.press-page {
    overflow: hidden;
}

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

.press-hero::before {
    content: "";
    position: absolute;
    z-index: -3;
    inset: 0;
    background:
        linear-gradient(to bottom, transparent 48%, var(--color-background) 100%),
        radial-gradient(circle at 78% 34%, rgb(214 183 122 / 11%), transparent 25rem),
        radial-gradient(circle at 18% 18%, rgb(84 94 126 / 18%), transparent 29rem);
}

.press-hero__sky {
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: 0.34;
    background-image:
        radial-gradient(circle, rgb(242 238 229 / 58%) 0 1px, transparent 1.3px),
        radial-gradient(circle, rgb(214 183 122 / 36%) 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 84%);
}

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

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

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

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

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

.press-kit::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%);
}

.press-card {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--space-6);
    max-width: 58rem;
    margin-inline: auto;
    padding: clamp(2.25rem, 6vw, 5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgb(29 35 48 / 76%), rgb(16 19 26 / 42%)),
        var(--color-surface);
    box-shadow: 0 2rem 5rem rgb(0 0 0 / 18%);
}

.press-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 1px;
    border-radius: calc(var(--radius-lg) - 1px);
    background: radial-gradient(circle at 82% 18%, rgb(214 183 122 / 12%), transparent 17rem);
}

.press-card__title {
    max-width: 12ch;
    font-size: clamp(2.4rem, 5vw, 5rem);
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.press-card__text {
    max-width: 42rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
}

.press-card__button {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    margin-top: var(--space-2);
    padding: 0.9rem 1.35rem;
    border: 1px solid var(--color-accent-soft);
    border-radius: var(--radius-full);
    color: var(--color-accent);
    font-size: var(--font-size-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition:
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.press-card__button:hover {
    border-color: var(--color-text);
    color: var(--color-text);
    transform: translateY(-0.12rem);
}

.press-closing {
    position: relative;
    isolation: isolate;
    padding-block: clamp(5rem, 11vw, 10rem);
    text-align: center;
}

.press-closing::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        radial-gradient(circle at 50% 42%, rgb(214 183 122 / 9%), transparent 25rem),
        linear-gradient(to top, rgb(29 35 48 / 34%), transparent 72%);
}

.press-closing__inner {
    display: grid;
    justify-items: center;
}

.press-closing__text {
    max-width: 42rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    text-wrap: pretty;
}

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

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

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

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

@media (prefers-reduced-motion: reduce) {
    .press-hero__inner,
    .press-card__button {
        animation: none;
        transition: none;
    }
}