/* Case study pages — shares tokens with main.css */

.case { padding-top: calc(var(--nav-h) + var(--space-5)); }

.case__hero {
    padding: 0 var(--gutter) var(--space-5);
    max-width: 1100px;
    margin-inline: auto;
}

.case__eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--steel-500);
}
.case__eyebrow::before {
    content: '';
    width: 40px;
    height: 2px;
    background: var(--yellow);
}

.case__title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(3.4rem, 11vw, 8.5rem);
    line-height: .95;
    letter-spacing: .01em;
    text-transform: uppercase;
    margin-top: var(--space-2);
}

.case__intro {
    max-width: 56ch;
    margin-top: var(--space-3);
    font-size: 1.1rem;
    color: var(--steel-100);
}

.case__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--steel-700);
}
.case__facts dt {
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--steel-500);
}
.case__facts dd {
    margin-top: .3rem;
    font-size: 1rem;
    color: var(--white);
}

.case__cover {
    height: clamp(280px, 55vh, 560px);
    margin: var(--space-4) auto 0;
    max-width: 1100px;
    border-radius: var(--radius-card);
    background:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px),
        radial-gradient(120% 100% at 70% 20%, var(--steel-700), var(--navy-800) 70%);
    background-size: 80px 80px, 80px 80px, cover;
    display: grid;
    place-content: center;
}
.case__cover span {
    font-family: var(--font-display);
    font-size: 1.2rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--steel-300);
}

.case__body {
    max-width: 760px;
    margin-inline: auto;
    padding: var(--space-6) var(--gutter);
    display: grid;
    gap: var(--space-5);
}

.case__section h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--yellow);
}
.case__section p {
    margin-top: var(--space-2);
    color: var(--steel-100);
    font-size: 1.05rem;
}

.case__next {
    display: block;
    padding: var(--space-6) var(--gutter);
    text-align: center;
    text-decoration: none;
    background: linear-gradient(180deg, transparent, rgba(5, 7, 15, .8));
    transition: background-color .4s;
}
.case__next:hover .case__next-title { color: var(--yellow); transform: translateY(-4px); }
.case__next-label {
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--steel-500);
}
.case__next-title {
    display: inline-block;
    margin-top: .5rem;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2.6rem, 7vw, 5rem);
    line-height: 1;
    text-transform: uppercase;
    color: var(--white);
    transition: color .35s, transform .35s var(--ease-out);
}

/* floating glass pill: the cup takes you home, "Works" back to the
   vortex — nothing else competes with the page */
.case__back {
    position: fixed;
    top: .9rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: clamp(1.6rem, 5vw, 3.2rem);
    padding: .45rem 1.1rem .45rem .6rem;
    border-radius: 999px;
    background: rgba(5, 7, 15, .55);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, .4);
}

.case__logo {
    display: grid;
    place-items: center;
}

.case__logo img {
    width: 40px;
    height: auto;
    transition: transform .35s var(--ease-out);
}

.case__logo:hover img {
    transform: rotate(-8deg) scale(1.08);
}

.case__works-link {
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--steel-100);
    padding: .3rem .9rem;
    border-radius: 999px;
    transition: color .3s, background-color .3s;
}

.case__works-link:hover {
    color: var(--navy-900);
    background: var(--yellow);
}