@import url("https://fonts.googleapis.com/css2?family=Oxanium:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap");

/** =========================================================
   SARAH MULU PORTFOLIO
   Y2K CYBERPUNK SYSTEM
========================================================= */

:root {
    --black: #030305;
    --black-2: #08090d;
    --black-3: #101117;

    --chrome: #dce3e8;
    --chrome-dark: #6c747c;
    --chrome-mid: #aeb7be;

    --yellow: #fff000;
    --pink: #ff20c8;
    --blue: #00d9ff;
    --purple: #8c45ff;

    --white: #ffffff;

    --display: "Oxanium", sans-serif;
    --body: "Space Grotesk", sans-serif;
    --pixel: "Oxanium", sans-serif;

    --progress-height: 38px;
    --header-height: 96px;
}


/* =========================================================
   RESET
========================================================= */

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

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(0, 217, 255, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(255, 32, 200, 0.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 90%,
            rgba(140, 69, 255, 0.07),
            transparent 35%
        ),
        #05050a;

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

    overflow-x: hidden;

    cursor:
        url("img/cursor.png") 2 2,
        auto;
}

button,
input,
textarea,
select {
    font: inherit;
}

a,
button {
    cursor:
        url("img/cursor.png") 2 2,
        pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    border: 0;
}

[hidden] {
    display: none !important;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 4px;
}


/* =========================================================
   SCANLINE
========================================================= */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 9997;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, 0.025) 4px
        );
}


/* =========================================================
   LOADING SCREEN
========================================================= */

.loading-screen {
    position: fixed;
    inset: 0;

    z-index: 10000;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: var(--black);

    transition:
        opacity 0.7s ease,
        visibility 0.7s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-logo {
    width: 180px;
    margin-bottom: 20px;

    animation:
        loadingFloat 3s ease-in-out infinite;
}

.loading-name {
    font-family: var(--display);
    font-size: 25px;
    letter-spacing: 3px;
}

.loading-status {
    margin-top: 10px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
}

.loading-bar {
    width: min(450px, 80vw);
    height: 7px;

    margin-top: 30px;

    border: 1px solid var(--chrome-dark);

    background: #111217;
}

.loading-bar-fill {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--purple),
            var(--blue),
            var(--pink),
            var(--yellow)
        );

    box-shadow:
        0 0 15px var(--blue);
}

.loading-percent {
    width: min(450px, 80vw);

    margin-top: 7px;

    text-align: right;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 18px;
}

@keyframes loadingFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}


/* =========================================================
   SCROLL PROGRESS
========================================================= */

.progress-system {
    position: fixed;
    top: 0;
    left: 0;

    z-index: 9000;

    width: 100%;
    min-height: var(--progress-height);

    padding: 5px 15px;

    background: rgba(3, 3, 5, 0.92);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}

.progress-info {
    display: flex;
    justify-content: space-between;

    color: var(--chrome-mid);

    font-family: var(--pixel);
    font-size: 17px;
}

.progress-info span:last-child {
    color: var(--yellow);
}

.progress-track {
    height: 3px;
    margin-top: 3px;

    background: #16181e;
}

.progress-fill {
    width: 0%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--pink),
            var(--purple),
            var(--blue)
        );

    box-shadow:
        0 0 10px var(--blue);
}


/* =========================================================
   HEADER / NAVIGATION
========================================================= */

.site-header {
    position: relative;
    z-index: 8000;

    width: 100%;
    height: var(--header-height);

    margin-top: var(--progress-height);

    display: flex;
    align-items: center;

    padding: 8px 30px;

    background:
        linear-gradient(
            180deg,
            #090909 0%,
            #111111 75%,
            #050505 100%
        );

    border-bottom: 2px solid var(--white);

    box-shadow:
        0 2px 0 var(--pink),
        0 4px 0 var(--blue),
        0 8px 20px rgba(0, 0, 0, 0.55);
}


/* =========================================================
   LOGO + TAGLINE
========================================================= */

.site-brand {
    width: 200px;
    height: 80px;

    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

.brand-logo {
    width: 135px;
    height: auto;
}

.brand-tagline {
    width: 150px;
    height: auto;

    margin-top: -20px;
}


/* =========================================================
   NAVIGATION LINKS
========================================================= */

.desktop-nav {
    flex: 1 1 auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: clamp(4px, 0.8vw, 10px);

    min-width: 0;
}

.desktop-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        7px
        clamp(7px, 1vw, 11px);

    color: var(--white);

    font-family: var(--pixel);

    font-size:
        clamp(14px, 1.45vw, 18px);

    letter-spacing: 1px;

    border: 1px solid transparent;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.desktop-nav a:hover {
    color: var(--yellow);

    border-color: var(--yellow);

    background:
        rgba(255, 240, 0, 0.06);

    transform: translateY(-2px);
}

.desktop-nav a.active {
    color: var(--pink);

    border-color: var(--pink);

    background:
        rgba(255, 32, 200, 0.05);

    box-shadow:
        0 0 8px rgba(255, 32, 200, 0.45);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-button {
    display: none;

    margin-left: auto;

    padding: 8px 13px;

    background: #000;

    color: var(--white);

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

    font-family: var(--pixel);
    font-size: 18px;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.mobile-menu-button:hover {
    color: var(--yellow);
    border-color: var(--yellow);

    background:
        rgba(255, 240, 0, 0.06);
}


/* =========================================================
   MOBILE HEADER
========================================================= */

@media (max-width: 750px) {

    :root {
        --header-height: 100px;
    }

    .site-header {
        height: var(--header-height);
        padding: 6px 16px;
    }

    .site-brand {
        width: 150px;
        height: 76px;

        flex-shrink: 1;

        overflow: visible;
    }

    .brand-logo {
        width: 110px;
        max-width: 100%;
    }

    .brand-tagline {
        width: 125px;
        max-width: 100%;

        margin-top: -17px;
    }

    .mobile-menu-button {
        display: block;
    }

    .desktop-nav {
        display: none;

        position: absolute;
        top: 100%;
        left: 0;

        width: 100%;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        padding: 8px 16px 16px;

        background: #050505;

        border-bottom: 2px solid var(--pink);

        box-shadow:
            0 2px 0 var(--blue),
            0 12px 25px rgba(0, 0, 0, 0.65);
    }

    .desktop-nav.open {
        display: flex;
    }

    .desktop-nav a {
        width: 100%;

        justify-content: flex-start;

        padding: 12px 6px;

        border: 0;

        border-bottom:
            1px solid rgba(255, 255, 255, 0.12);
    }

    .desktop-nav a.active {
        border-bottom-color: var(--pink);
        box-shadow: none;
    }
}


/* =========================================================
   HOME HERO
========================================================= */

.hero-section {
    position: relative;

    min-height: 100vh;

    display: grid;

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

    align-items: center;

    gap: 40px;

    padding: 100px 7% 100px;

    overflow: visible;
}

.hero-background-grid {
    display: none;
}

.hero-glow {
    position: absolute;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    filter: blur(110px);

    opacity: 0.15;

    pointer-events: none;
}

.glow-purple {
    top: 10%;
    right: 5%;

    background: var(--purple);
}

.glow-pink {
    bottom: -10%;
    left: 20%;

    background: var(--pink);
}

.hero-content {
    position: relative;
    z-index: 5;

    min-width: 0;
}

.system-chip {
    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding: 7px 12px;

    border:
        1px solid rgba(255, 255, 255, 0.35);

    color: var(--chrome);

    background:
        rgba(255, 255, 255, 0.04);

    font-family: var(--pixel);
    font-size: 18px;
}

.online-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 10px var(--yellow);

    animation:
        pulse 1.7s ease-in-out infinite;
}

.system-chip span:last-child {
    margin-left: 8px;

    color: var(--blue);
}

@keyframes pulse {
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

.hero-eyebrow {
    margin-top: 28px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 21px;

    letter-spacing: 2px;
}

.hero-title {
    margin-top: 10px;

    font-family: var(--display);

    font-size:
        clamp(48px, 8vw, 100px);

    line-height: 0.9;

    letter-spacing: -3px;
}

.hero-title span {
    display: block;

    background:
        linear-gradient(
            120deg,
            #fff,
            #6f777e,
            #fff,
            #4e565d,
            #fff
        );

    background-size: 250%;

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    animation:
        chromeShift 5s ease-in-out infinite;
}

@keyframes chromeShift {
    0%,
    100% {
        background-position: 0%;
    }

    50% {
        background-position: 100%;
    }
}

.hero-divider {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;
}

.hero-divider span {
    width: 75px;
    height: 2px;

    flex: 0 0 auto;

    background: var(--yellow);

    box-shadow:
        0 0 10px var(--yellow);
}

.hero-divider p {
    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 19px;
}

.hero-introduction {
    max-width: 650px;

    margin-top: 25px;
}

.hero-introduction p {
    color: #d9dcdf;

    font-size: 20px;
    line-height: 1.7;
}


/* =========================================================
   BUTTONS
========================================================= */

.hero-buttons,
.about-buttons {
    display: flex;

    flex-wrap: wrap;

    gap: 15px;

    margin-top: 32px;
}

.chrome-button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 13px 18px;

    overflow: hidden;

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

    font-family: var(--display);
    font-size: 10px;

    letter-spacing: 1px;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.chrome-button::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: -100%;

    width: 55%;

    transform: skewX(-20deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.8),
            transparent
        );

    transition:
        left 0.5s ease;
}

.chrome-button:hover::before {
    left: 150%;
}

.chrome-button:hover {
    transform: translateY(-4px);
}

.yellow-button {
    background:
        linear-gradient(
            135deg,
            #fff600,
            #b9a800
        );

    color: var(--black);

    box-shadow:
        0 5px 0 #746a00,
        0 0 25px rgba(255, 240, 0, 0.18);
}

.chrome-button-dark {
    background:
        linear-gradient(
            135deg,
            #f5f8fa,
            #737c84,
            #e6eaed
        );

    color: var(--black);

    box-shadow:
        0 5px 0 #30343a;
}

.large-button {
    padding: 17px 25px;
}

.social-row {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 30px;

    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 18px;
}

.linkedin-button {
    display: flex;

    align-items: center;

    gap: 8px;

    padding: 7px 13px;

    border: 1px solid var(--white);
    border-radius: 999px;

    background:
        linear-gradient(
            135deg,
            #fff,
            #737c84,
            #fff
        );

    color: var(--black);

    font-family: var(--display);
    font-size: 9px;

    box-shadow:
        0 3px 0 #30343a;

    transition:
        transform 0.2s ease;
}

.linkedin-button:hover {
    transform: translateY(-3px);
}

.linkedin-button img {
    width: 22px;
    height: 22px;

    object-fit: contain;
}


/* =========================================================
   HERO OBJECT
========================================================= */

.hero-object {
    position: relative;

    min-height: 600px;

    display: grid;
    place-items: center;
}

.identity-card {
    position: relative;
    z-index: 5;

    width: min(460px, 90%);

    padding: 0;

    border:
        1px solid rgba(255, 255, 255, 0.65);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.025)
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.5);

    animation:
        cardFloat 5s ease-in-out infinite;
}

@keyframes cardFloat {
    0%,
    100% {
        transform:
            rotate(2deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(1deg)
            translateY(-12px);
    }
}

.identity-card-top,
.identity-card-bottom {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    padding: 10px 14px;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 18px;
}

.identity-card-top {
    border-bottom:
        1px solid rgba(255, 255, 255, 0.15);
}

.identity-card-top span:last-child {
    color: var(--pink);
}

.identity-photo {
    padding: 25px;
}


/* =========================================================
   GENERIC PHOTO PLACEHOLDER
========================================================= */

.photo-placeholder {
    aspect-ratio: 1;

    display: grid;
    place-items: center;

    border:
        1px solid rgba(255, 255, 255, 0.3);

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--pink),
            var(--blue)
        );

    color: var(--white);

    font-family: var(--pixel);
    font-size: 22px;

    text-align: center;

    box-shadow:
        inset 0 0 50px rgba(0, 0, 0, 0.25);
}

.photo-placeholder span {
    font-family: var(--pixel);
    font-size: 25px;
}

.photo-placeholder strong {
    font-family: var(--display);
    font-size: 22px;
}

.identity-card-info {
    padding: 0 25px 25px;
}

.identity-card-info > span {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 18px;
}

.identity-card-info h2 {
    margin-top: 8px;

    font-family: var(--display);
    font-size: 25px;
}

.tiny-gradient-line {
    width: 100%;
    height: 2px;

    margin: 15px 0;

    background:
        linear-gradient(
            90deg,
            var(--yellow),
            var(--pink),
            transparent
        );
}

.identity-card-info p {
    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 20px;
}

.identity-card-bottom {
    border-top:
        1px solid rgba(255, 255, 255, 0.15);
}

.identity-card-bottom strong {
    color: var(--yellow);
}


/* =========================================================
   HERO ORBITS
========================================================= */

.orbit {
    position: absolute;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    border-radius: 50%;

    pointer-events: none;
}

.orbit-one {
    width: 580px;
    height: 580px;

    border-color:
        rgba(255, 240, 0, 0.2);

    animation:
        rotateOrbit 18s linear infinite;
}

.orbit-two {
    width: 470px;
    height: 470px;

    border-color:
        rgba(0, 217, 255, 0.2);

    animation:
        rotateOrbit 14s linear infinite reverse;
}

.orbit-three {
    width: 650px;
    height: 260px;

    border-color:
        rgba(255, 32, 200, 0.25);

    transform: rotate(55deg);

    animation:
        rotateOrbitThree 20s linear infinite;
}

@keyframes rotateOrbit {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rotateOrbitThree {
    from {
        transform: rotate(55deg);
    }

    to {
        transform: rotate(415deg);
    }
}


/* =========================================================
   FLOATING LABELS
========================================================= */

.floating-label {
    position: absolute;
    z-index: 10;

    padding: 10px 15px;

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

    font-family: var(--display);
    font-size: 9px;
}

.label-yellow {
    top: 70px;
    right: 4%;

    background: var(--yellow);

    color: var(--black);

    animation:
        gentleFloat 4s ease-in-out infinite;
}

.label-pink {
    left: 3%;
    bottom: 120px;

    background: var(--pink);

    animation:
        gentleFloat 5s ease-in-out infinite reverse;
}

.label-blue {
    right: 3%;
    bottom: 50px;

    background: var(--blue);

    color: var(--black);

    animation:
        gentleFloat 4.5s ease-in-out infinite;
}

@keyframes gentleFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}


/* =========================================================
   SCROLL DOWN
========================================================= */

.scroll-down {
    position: absolute;

    left: 7%;
    bottom: 25px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 19px;
}

.scroll-down b {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

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

    color: var(--yellow);

    animation:
        bounceArrow 1.5s ease-in-out infinite;
}

@keyframes bounceArrow {
    50% {
        transform: translateY(8px);
    }
}


/* =========================================================
   ABOUT
========================================================= */

.about-section {
    position: relative;

    padding: 140px 7% 120px;

    overflow: hidden;

    background: transparent;
}

.section-background {
    display: none;
}

.section-heading {
    position: relative;

    display: flex;

    gap: 25px;
}

.section-number {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 30px;
}

.section-label {
    color: var(--blue);

    font-family: var(--pixel);
    font-size: 20px;
}

.section-heading h2 {
    margin-top: 8px;

    font-family: var(--display);

    font-size:
        clamp(40px, 7vw, 85px);

    line-height: 0.9;
}

.section-heading h2 span {
    display: block;

    color: var(--yellow);
}

.about-layout {
    position: relative;

    display: grid;

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

    gap: 80px;

    margin-top: 80px;
}

.about-copy {
    max-width: 700px;
}

.file-label {
    display: inline-block;

    padding: 6px 10px;

    background:
        linear-gradient(
            120deg,
            #fff,
            #777f86,
            #fff
        );

    color: var(--black);

    font-family: var(--pixel);
    font-size: 18px;
}

.about-copy h3 {
    margin-top: 30px;

    color: var(--pink);

    font-family: var(--display);

    font-size:
        clamp(28px, 4vw, 48px);
}

.about-copy p {
    margin-top: 22px;

    color: #d8dadd;

    font-size: 19px;
    line-height: 1.7;
}

.about-copy .large-text {
    color: var(--white);

    font-size: 25px;
}

.outline-button {
    display: inline-block;

    padding: 12px 16px;

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

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 19px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}

.outline-button:hover {
    color: var(--yellow);

    border-color: var(--yellow);

    transform: translateY(-4px);
}


/* =========================================================
   DIGITAL ID
========================================================= */

.digital-id {
    padding: 25px;

    border:
        1px solid rgba(255, 255, 255, 0.4);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.08),
            rgba(255, 255, 255, 0.02)
        );

    box-shadow:
        15px 15px 0 rgba(255, 240, 0, 0.06);

    animation:
        gentleFloat 6s ease-in-out infinite;
}

.digital-id-header {
    display: flex;

    justify-content: space-between;

    gap: 15px;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 18px;
}

.digital-id-header span:first-child {
    color: var(--yellow);
}

.digital-id-symbol {
    height: 250px;

    display: grid;
    place-items: center;
}

.digital-id-symbol div {
    width: 170px;
    height: 170px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    border: 2px solid var(--white);

    background:
        linear-gradient(
            135deg,
            #fff,
            #717980,
            #fff,
            #4b535a
        );

    color: var(--black);

    font-family: var(--display);
    font-size: 32px;

    box-shadow:
        0 0 35px rgba(255, 255, 255, 0.15);
}

.id-row {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    padding: 14px 0;

    border-top:
        1px solid rgba(255, 255, 255, 0.12);

    font-family: var(--pixel);
    font-size: 18px;
}

.id-row span {
    color: var(--chrome-dark);
}

.id-row strong {
    text-align: right;
}

.yellow-text {
    color: var(--yellow);
}


/* =========================================================
   VALUES
========================================================= */

.values-section {
    position: relative;

    margin-top: 150px;
}

.values-title {
    display: flex;

    align-items: baseline;

    gap: 20px;
}

.values-title > span {
    color: var(--pink);

    font-family: var(--pixel);
    font-size: 30px;
}

.values-title h3 {
    font-family: var(--display);

    font-size:
        clamp(35px, 6vw, 70px);
}

.values-title strong {
    color: var(--yellow);
}

.values-grid {
    display: grid;

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

    gap: 15px;

    margin-top: 50px;
}

.value-card {
    position: relative;

    min-height: 300px;

    padding: 25px;

    overflow: hidden;

    transition:
        transform 0.3s ease;
}

.value-card:hover {
    transform:
        translateY(-10px)
        rotate(-1deg);
}

.value-card small {
    font-family: var(--pixel);
    font-size: 22px;
}

.value-card h4 {
    margin-top: 65px;

    font-family: var(--display);
    font-size: 20px;

    line-height: 1.15;
}

.value-card p {
    margin-top: 18px;

    font-size: 15px;
    line-height: 1.5;
}

.value-card b {
    position: absolute;

    right: -15px;
    bottom: -45px;

    font-family: var(--display);
    font-size: 150px;

    opacity: 0.13;
}

.yellow-card {
    background: var(--yellow);
    color: var(--black);
}

.pink-card {
    background: var(--pink);
    color: var(--black);
}

.blue-card {
    background: var(--blue);
    color: var(--black);
}

.purple-card {
    background: var(--purple);
}


/* =========================================================
   CURRENTLY
========================================================= */

.currently-section {
    position: relative;

    margin-top: 150px;
}

.currently-heading {
    display: flex;

    gap: 20px;
}

.currently-heading > span {
    color: var(--blue);

    font-family: var(--pixel);
    font-size: 30px;
}

.currently-heading small {
    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 18px;
}

.currently-heading h3 {
    margin-top: 5px;

    font-family: var(--display);

    font-size:
        clamp(35px, 5vw, 65px);
}

.currently-heading h3 span {
    color: var(--pink);
}

.currently-feed {
    margin-top: 40px;

    border-top:
        1px solid var(--chrome-dark);
}

.currently-feed > div {
    display: grid;

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

    gap: 20px;

    padding: 22px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.12);

    font-family: var(--pixel);
    font-size: 21px;
}

.currently-feed span {
    color: var(--yellow);
}

.currently-feed p {
    color: var(--chrome);
}

.currently-feed strong {
    color: var(--white);
}


/* =========================================================
   PAGE HEROES
========================================================= */

.page-hero,
.contact-hero,
.alter-hero {
    position: relative;

    min-height: 75vh;

    display: grid;
    place-items: center;

    overflow: hidden;

    padding: 120px 7% 100px;

    text-align: center;
}

.page-hero-content,
.contact-content,
.alter-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 900px;
}

.page-hero h1,
.contact-content h1,
.alter-content h1 {
    margin-top: 15px;

    font-family: var(--display);

    font-size:
        clamp(50px, 9vw, 110px);

    line-height: 0.9;
}

.page-hero h1 strong,
.contact-content h1 strong,
.alter-content h1 strong {
    display: block;

    color: var(--yellow);
}

.page-hero p,
.contact-content p,
.alter-content p {
    max-width: 650px;

    margin: 30px auto 0;

    color: var(--chrome);

    font-size: 20px;
    line-height: 1.6;
}


/* =========================================================
   WORK
========================================================= */

.work-section {
    padding: 100px 7%;
}

.work-category {
    margin-bottom: 130px;
}

.category-heading {
    display: flex;

    align-items: baseline;

    gap: 20px;

    margin-bottom: 40px;
}

.category-heading span {
    color: var(--pink);

    font-family: var(--pixel);
    font-size: 28px;
}

.category-heading h2 {
    font-family: var(--display);

    font-size:
        clamp(35px, 5vw, 65px);
}

.work-grid {
    display: grid;

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

    gap: 20px;
}

.work-card {
    min-width: 0;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    background: #0a0b10;

    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
}

.work-card:hover {
    transform: translateY(-8px);

    border-color: var(--yellow);
}

.work-card.featured {
    grid-column: span 2;
}

.work-image {
    min-height: 300px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--pink),
            var(--blue)
        );

    color: var(--white);

    font-family: var(--pixel);
    font-size: 25px;
}

.work-card-info {
    padding: 25px;
}

.work-card-info small {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 18px;
}

.work-card-info h3 {
    margin-top: 10px;

    font-family: var(--display);
    font-size: 27px;
}

.work-card-info p {
    margin-top: 15px;

    color: var(--chrome);

    line-height: 1.6;
}

.work-card-info a {
    display: inline-block;

    margin-top: 20px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
}

.creative-banner,
.modeling-card {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 40px;

    padding: 50px;

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

    background:
        linear-gradient(
            135deg,
            #111217,
            #252a30
        );
}

.creative-banner h3,
.modeling-card h3 {
    margin-top: 10px;

    font-family: var(--display);
    font-size: 50px;
}

.creative-banner p,
.modeling-card p {
    max-width: 650px;

    margin-top: 15px;

    color: var(--chrome);

    line-height: 1.7;
}

.banner-symbol,
.modeling-symbol {
    color: var(--pink);

    font-family: var(--display);
    font-size: 100px;
}

.photo-grid {
    display: grid;

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

    gap: 15px;
}


/* =========================================================
   BLOG
========================================================= */

.blog-section {
    width: 100%;

    padding: 100px 7%;
}

.blog-intro {
    max-width: 750px;

    margin-bottom: 70px;
}

.blog-intro span {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 22px;
}

.blog-intro p {
    margin-top: 12px;

    color: var(--chrome);

    font-size: 20px;
    line-height: 1.6;
}


/* =========================================================
   BLOG ARTICLE CARDS
========================================================= */

.article-card {
    width: 100%;

    display: grid;

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

    gap: 30px;

    align-items: center;

    margin-bottom: 80px;

    padding: 30px;

    border:
        1px solid rgba(255, 255, 255, 0.25);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.07),
            rgba(255, 255, 255, 0.015)
        );
}

.article-card.reverse {
    grid-template-columns:
        60px
        minmax(0, 1fr)
        minmax(0, 1fr);
}

.article-number {
    align-self: start;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 30px;
}

.article-image {
    position: relative;

    min-width: 0;
    min-height: 350px;

    display: grid;
    place-items: center;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--blue)
        );

    font-family: var(--pixel);
    font-size: 24px;
}

.article-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.pink-article {
    background:
        linear-gradient(
            135deg,
            var(--pink),
            var(--purple)
        );
}

.article-content {
    min-width: 0;
}

.article-content small {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 18px;
}

.article-content h2 {
    margin-top: 15px;

    font-family: var(--display);

    font-size:
        clamp(30px, 4vw, 50px);

    line-height: 1.05;

    overflow-wrap: break-word;
}

.article-dek {
    margin-top: 20px;

    color: var(--chrome);

    font-size: 19px;
    line-height: 1.6;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 20px;

    margin: 25px 0;

    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 18px;
}


/* =========================================================
   BLOG TOGGLE BUTTON
========================================================= */

.article-toggle {
    min-width: 150px;
}

.article-toggle.is-story-open {
    border-color: var(--pink);

    box-shadow:
        0 5px 0 #746a00,
        0 0 18px rgba(255, 32, 200, 0.25);
}


/* =========================================================
   EXPANDED BLOG STORIES
========================================================= */

.expanded-story {
    width: 100%;

    margin:
        -30px 0
        100px;

    scroll-margin-top:
        calc(
            var(--progress-height) +
            var(--header-height) +
            24px
        );
}

.story-header {
    width: min(100%, 1100px);

    margin: 0 auto 50px;

    padding: 40px;

    border:
        1px solid rgba(255, 255, 255, 0.2);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.015)
        );
}

.story-topline {
    display: flex;

    justify-content: space-between;

    gap: 20px;

    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 18px;
}

.story-kicker {
    color: var(--yellow);
}

.story-header h1,
.story-header h2 {
    margin-top: 18px;

    font-family: var(--display);

    font-size:
        clamp(38px, 6vw, 72px);

    line-height: 1;
}

.story-subtitle {
    max-width: 760px;

    margin-top: 20px;

    color: var(--chrome);

    font-size: 20px;
    line-height: 1.6;
}

.story-byline {
    margin-top: 24px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 19px;
}

.story-hero {
    width: min(100%, 1200px);

    margin: 0 auto 60px;

    overflow: hidden;

    border:
        1px solid rgba(255, 255, 255, 0.2);
}

.story-hero img {
    width: 100%;
    height: auto;

    object-fit: cover;
}

.story-section,
.story-section-continuation {
    width: min(100%, 1100px);

    margin: 0 auto;

    padding: 45px 0;
}

.story-section-number {
    margin-bottom: 12px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 20px;
}

.story-copy {
    width: min(100%, 760px);

    margin-inline: auto;
}

.story-copy h3 {
    margin-bottom: 25px;

    font-family: var(--display);

    font-size:
        clamp(28px, 4vw, 45px);

    line-height: 1.1;
}

.story-copy p {
    margin-bottom: 22px;

    color: #e1e3e6;

    font-size: 18px;
    line-height: 1.8;
}

.story-copy blockquote {
    margin: 40px 0;

    padding:
        20px
        0
        20px
        25px;

    border-left:
        3px solid var(--yellow);

    color: var(--white);

    font-size:
        clamp(22px, 3vw, 30px);

    line-height: 1.5;
}

.story-feature-image,
.story-wide-image,
.story-portrait,
.story-photo-duo {
    width: min(100%, 1000px);

    margin: 45px auto;
}

.story-feature-image img,
.story-wide-image img,
.story-portrait img,
.story-photo-duo img {
    width: 100%;
    height: auto;

    object-fit: cover;
}

.story-photo-duo {
    display: grid;

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

    gap: 20px;
}


/* =========================================================
   BEE STORY
   Keeps Story 3 longform centered and independent from
   any Story 1-specific grid layouts.
========================================================= */

.bee-story .story-section,
.bee-story .story-section-continuation {
    display: block;
}

.bee-story .story-section .story-copy,
.bee-story .story-section-continuation .story-copy {
    display: block;

    width: min(100% - 40px, 760px);
    max-width: 760px;

    margin-inline: auto !important;

    padding: 0 !important;

    grid-column: auto !important;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .hero-section {
        grid-template-columns: 1fr;

        gap: 70px;

        padding-top: 90px;
    }

    .hero-object {
        min-height: 520px;
    }

    .about-layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .photo-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .article-card,
    .article-card.reverse {
        grid-template-columns:
            50px
            minmax(0, 1fr);
    }

    .article-image {
        grid-column: 2;
    }

    .article-content {
        grid-column: 2;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .hero-section,
    .about-section,
    .work-section,
    .blog-section {
        padding-left: 20px;
        padding-right: 20px;
    }

    .hero-section {
        min-height: auto;

        padding-top: 75px;
        padding-bottom: 90px;
    }

    .hero-title {
        font-size:
            clamp(44px, 16vw, 72px);

        letter-spacing: -2px;
    }

    .hero-introduction p {
        font-size: 18px;
    }

    .hero-object {
        min-height: 460px;
    }

    .identity-card {
        width: 100%;
    }

    .orbit-one {
        width: 430px;
        height: 430px;
    }

    .orbit-two {
        width: 350px;
        height: 350px;
    }

    .orbit-three {
        width: 450px;
        height: 200px;
    }

    .floating-label {
        display: none;
    }

    .scroll-down {
        display: none;
    }

    .section-heading,
    .values-title,
    .currently-heading,
    .category-heading {
        gap: 12px;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .currently-feed > div {
        grid-template-columns:
            45px minmax(0, 1fr);

        gap: 12px;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-card.featured {
        grid-column: auto;
    }

    .creative-banner,
    .modeling-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 30px;
    }

    .creative-banner h3,
    .modeling-card h3 {
        font-size:
            clamp(30px, 10vw, 45px);
    }

    .banner-symbol,
    .modeling-symbol {
        font-size: 70px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .article-card,
    .article-card.reverse {
        display: block;

        padding: 22px;
    }

    .article-number {
        margin-bottom: 15px;
    }

    .article-image {
        min-height: 250px;

        margin-bottom: 25px;
    }

    .article-content h2 {
        font-size:
            clamp(28px, 9vw, 42px);
    }

    .article-meta {
        flex-direction: column;

        gap: 4px;
    }

    .expanded-story {
        margin-top: -30px;

        scroll-margin-top:
            calc(
                var(--progress-height) +
                var(--header-height) +
                15px
            );
    }

    .story-header {
        padding: 25px 20px;
    }

    .story-topline {
        flex-direction: column;

        gap: 5px;
    }

    .story-section,
    .story-section-continuation {
        padding: 35px 0;
    }

    .story-copy {
        width: 100%;
    }

    .story-copy p {
        font-size: 17px;
        line-height: 1.75;
    }

    .story-photo-duo {
        grid-template-columns: 1fr;
    }

    .bee-story .story-section .story-copy,
    .bee-story .story-section-continuation .story-copy {
        width: 100%;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

}

/* =========================================================
   ALTER EGO
========================================================= */

.alter-builder {
    padding: 100px 7%;
}

.builder-panel {
    max-width: 1100px;
    margin: auto;

    border: 1px solid rgba(255, 255, 255, .4);
    background: rgba(255, 255, 255, .04);
}

.builder-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding: 12px 18px;

    border-bottom: 1px solid rgba(255, 255, 255, .2);

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 20px;
}

.builder-header span:last-child {
    color: var(--pink);
}

.builder-content {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 50px;

    padding: 50px;
}

.builder-preview {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;
}

.alter-avatar {
    width: min(350px, 80vw);
    aspect-ratio: 1;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    border: 2px solid white;

    background:
        linear-gradient(
            135deg,
            var(--purple),
            var(--pink),
            var(--blue)
        );

    box-shadow:
        0 0 50px rgba(255, 32, 200, .15);

    text-align: center;
}

.alter-avatar span {
    font-family: var(--pixel);
    font-size: 25px;
}

.alter-avatar strong {
    font-family: var(--display);
    font-size: 25px;
}

.alter-name-display {
    margin-top: 25px;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 20px;
}

.alter-name-display strong {
    color: var(--yellow);
}

.builder-controls {
    display: flex;
    flex-direction: column;

    gap: 25px;
}

.builder-controls label {
    display: flex;
    flex-direction: column;

    gap: 8px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
}

.builder-controls input,
.builder-controls select {
    padding: 13px;

    border: 1px solid var(--chrome);
    outline: none;

    background: #0b0c11;

    color: white;

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

.builder-controls input:focus,
.builder-controls select:focus {
    border-color: var(--pink);

    box-shadow:
        0 0 15px rgba(255, 32, 200, .15);
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {
    padding: 100px 7%;
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 80px;
}

.contact-copy > span {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
}

.contact-copy h2 {
    margin-top: 15px;

    font-family: var(--display);

    font-size: clamp(40px, 6vw, 75px);
    line-height: .95;
}

.contact-copy h2 strong {
    display: block;

    color: var(--pink);
}

.contact-copy > p {
    margin-top: 25px;

    color: var(--chrome);

    font-size: 19px;
    line-height: 1.7;
}

.contact-links {
    margin-top: 35px;
}

.contact-links a {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, .15);
}

.contact-links span {
    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 18px;
}

.contact-links strong {
    color: var(--yellow);
}

.contact-form {
    padding: 30px;

    border: 1px solid rgba(255, 255, 255, .35);

    background: rgba(255, 255, 255, .04);
}

.contact-form label {
    display: block;

    margin-bottom: 25px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;

    margin-top: 8px;
    padding: 14px;

    border: 1px solid var(--chrome-dark);
    outline: none;

    background: #07080b;

    color: white;

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

.contact-form textarea {
    min-height: 180px;

    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 15px rgba(0, 217, 255, .12);
}

.form-message {
    margin-top: 15px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 18px;
}


/* =========================================================
   PAGE TRANSITION
========================================================= */

.page-transition {
    position: relative;

    min-height: 65vh;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    text-align: center;
}

.page-transition > span {
    color: var(--blue);

    font-family: var(--pixel);
    font-size: 20px;
}

.page-transition h2 {
    margin: 20px 0 40px;

    font-family: var(--display);

    font-size: clamp(40px, 7vw, 85px);
    line-height: .95;
}

.page-transition h2 strong {
    display: block;

    color: var(--yellow);
}

.transition-orbit {
    position: absolute;

    width: 600px;
    height: 600px;

    border:
        1px solid rgba(0, 217, 255, .15);

    border-radius: 50%;

    animation:
        rotateOrbit 20s linear infinite;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    z-index: 1;

    width: 100%;

    padding: 38px 30px 18px;

    background:
        linear-gradient(
            0deg,
            #050505 0%,
            #111111 75%,
            #090909 100%
        );

    border-top: 2px solid #ffffff;

    box-shadow:
        0 -2px 0 var(--pink),
        0 -4px 0 var(--blue),
        0 -6px 18px rgba(0, 0, 0, .8);
}


/* =========================================================
   FOOTER MAIN
========================================================= */

.footer-main {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;

    align-items: center;

    gap: 50px;
}


/* =========================================================
   FOOTER BRAND
========================================================= */

.footer-brand {
    width: 180px;

    display: flex;
    flex-direction: column;

    align-items: center;

    overflow: visible;
}

.footer-logo {
    display: block;

    width: 140px;
    height: auto;
}

.footer-tagline {
    display: block;

    width: 180px;
    height: auto;

    margin-top: -2px;
}


/* =========================================================
   FOOTER LINKS
========================================================= */

.footer-nav {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.footer-nav a,
.footer-professional a {
    width: fit-content;

    color: var(--white);

    font-family: var(--pixel);
    font-size: 17px;

    letter-spacing: 1px;

    transition:
        color .2s ease,
        transform .2s ease,
        text-shadow .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.footer-nav a:hover {
    color: var(--yellow);

    transform: translateX(4px);

    text-shadow:
        0 0 8px rgba(255, 240, 0, .5);
}

.footer-professional {
    display: flex;
    flex-direction: column;

    gap: 10px;
}

.footer-professional a {
    padding: 6px 10px;

    border:
        1px solid rgba(255, 255, 255, .35);
}

.footer-professional a:hover {
    color: var(--pink);

    border-color: var(--pink);

    transform: translateX(4px);

    box-shadow:
        0 0 8px rgba(255, 32, 200, .35);
}


/* =========================================================
   FOOTER BOTTOM
========================================================= */

.footer-bottom {
    width: 100%;
    max-width: 1400px;

    margin: 30px auto 0;
    padding-top: 14px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    border-top:
        1px solid rgba(255, 255, 255, .15);

    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 15px;

    letter-spacing: 1px;
}

.footer-status {
    color: var(--yellow);
}


/* =========================================================
   DECORATIONS
========================================================= */

.decor {
    position: fixed;

    z-index: 3;

    pointer-events: none;

    font-family: var(--pixel);
}

.yellow {
    color: var(--yellow);
}

.pink {
    color: var(--pink);
}

.blue {
    color: var(--blue);
}

.purple {
    color: var(--purple);
}

.decor-star:nth-of-type(1) {
    top: 30%;
    left: 2%;
}

.decor-star:nth-of-type(2) {
    top: 50%;
    right: 3%;
}

.decor-star:nth-of-type(3) {
    bottom: 15%;
    left: 4%;
}


/* =========================================================
   RESPONSIVE — GENERAL
========================================================= */

@media (max-width: 1100px) {

    .hero-section {
        grid-template-columns: 1fr;

        padding: 160px 6% 90px;
    }

    .hero-title {
        font-size: clamp(42px, 13vw, 75px);
    }

    .hero-object {
        min-height: 470px;
    }

    .orbit-one {
        width: 450px;
        height: 450px;
    }

    .orbit-two {
        width: 350px;
        height: 350px;
    }

    .about-layout,
    .contact-layout,
    .builder-content {
        grid-template-columns: 1fr;
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .work-grid {
        grid-template-columns: 1fr;
    }

    .work-card.featured {
        grid-column: auto;
    }

    .photo-grid {
        grid-template-columns: 1fr 1fr;
    }

    .article-card,
    .article-card.reverse {
        grid-template-columns: 1fr;
    }

    .article-number {
        display: none;
    }
}


@media (max-width: 800px) {

    .site-footer {
        padding: 30px 20px 16px;
    }

    .footer-main {
        grid-template-columns: 1fr;

        align-items: start;

        gap: 25px;
    }

    .footer-brand {
        width: 150px;

        align-items: flex-start;
    }

    .footer-logo {
        width: 120px;
    }

    .footer-tagline {
        width: 155px;
    }

    .footer-nav {
        flex-direction: row;
        flex-wrap: wrap;

        gap: 10px 18px;
    }

    .footer-professional {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 7px;

        font-size: 14px;
    }
}


@media (max-width: 500px) {

    .progress-info span:nth-child(2) {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;
    }

    .hero-buttons .chrome-button {
        width: 100%;
    }

    .floating-label {
        display: none;
    }

    .identity-card {
        width: 95%;
    }

    .creative-banner,
    .modeling-card {
        flex-direction: column;

        align-items: flex-start;

        padding: 30px;
    }

    .photo-grid {
        grid-template-columns: 1fr;
    }

    .builder-content {
        padding: 25px;
    }

    .contact-section,
    .work-section,
    .blog-section {
        padding-left: 6%;
        padding-right: 6%;
    }
}


/* =========================================================
   CONTINUOUS SITE BACKGROUND
========================================================= */

html {
    background: #080b18;
}

body {
    position: relative;

    min-height: 100vh;

    overflow-x: hidden;

    background:
        radial-gradient(
            ellipse 55% 35% at 25% 12%,
            rgba(180, 40, 255, .24),
            transparent 70%
        ),
        radial-gradient(
            ellipse 50% 40% at 72% 20%,
            rgba(0, 150, 255, .18),
            transparent 70%
        ),
        radial-gradient(
            ellipse 55% 45% at 45% 48%,
            rgba(125, 30, 210, .18),
            transparent 72%
        ),
        radial-gradient(
            ellipse 50% 40% at 80% 65%,
            rgba(0, 210, 255, .13),
            transparent 72%
        ),
        radial-gradient(
            ellipse 55% 45% at 20% 82%,
            rgba(255, 40, 180, .12),
            transparent 72%
        ),
        #080b18;

    background-attachment: fixed;
}


/* =========================================================
   GLOBAL ATMOSPHERE
========================================================= */

body::before {
    content: "";

    position: fixed;
    inset: -20%;

    z-index: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 30% 18%,
            rgba(190, 40, 255, .13),
            transparent 25%
        ),
        radial-gradient(
            circle at 75% 32%,
            rgba(0, 190, 255, .10),
            transparent 28%
        ),
        radial-gradient(
            circle at 45% 72%,
            rgba(255, 40, 180, .08),
            transparent 25%
        );

    filter: blur(70px);
}


/*
Keep the original scanline effect.
This uses ::after rather than replacing it with
another background system.
*/

body::after {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 9997;

    pointer-events: none;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 3px,
            rgba(255, 255, 255, .025) 4px
        );
}


/* =========================================================
   TRANSPARENT PAGE SECTIONS
========================================================= */

main,
section,
.hero-section,
.about-section,
.work-section,
.contact-section,
.builder-section,
.blog-section {
    background-color: transparent;
}

.site-header,
main,
.site-footer {
    position: relative;
    z-index: 1;
}


/* =========================================================
   ABOUT AMBIENT GLOW
========================================================= */

.about-section {
    position: relative;

    overflow: visible;
}

.about-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 500px;

    left: -180px;
    top: 5%;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(170, 45, 255, .18),
            transparent 68%
        );

    filter: blur(80px);
}


/* =========================================================
   WORK AMBIENT GLOW
========================================================= */

.work-section {
    position: relative;

    overflow: visible;
}

.work-section::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 550px;

    right: -220px;
    top: 5%;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(0, 145, 255, .16),
            transparent 68%
        );

    filter: blur(90px);
}


/* =========================================================
   BLOG AMBIENT GLOW
========================================================= */

.blog-section {
    position: relative;

    overflow: visible;
}

.blog-section::before {
    content: "";

    position: absolute;

    width: 650px;
    height: 500px;

    left: -200px;
    top: 10%;

    z-index: -1;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(255, 35, 180, .13),
            transparent 68%
        );

    filter: blur(90px);
}


/* =========================================================
   ALTER EGO PAGE
========================================================= */

.alter-ego-page {
    min-height: 100vh;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 15% 30%,
            rgba(170, 40, 255, .30),
            transparent 32%
        ),
        radial-gradient(
            circle at 85% 20%,
            rgba(0, 210, 255, .25),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 80%,
            rgba(255, 20, 180, .20),
            transparent 35%
        ),
        #090b25;
}


/* =========================================================
   ALTER EGO INTRO
========================================================= */

.alter-ego-intro {
    max-width: 1200px;

    margin: 0 auto;

    padding: 150px 40px 60px;

    text-align: center;
}

.alter-ego-intro .section-kicker {
    color: #00eaff;

    font-family: var(--display);

    letter-spacing: 2px;
}

.alter-ego-intro h1 {
    margin: 12px 0;

    font-family: var(--display);

    font-size: clamp(48px, 8vw, 110px);
    line-height: .85;
}

.alter-ego-intro h1 span {
    display: block;

    color: #fff044;
}

.alter-ego-intro p {
    max-width: 500px;

    margin: 25px auto 0;

    font-family: var(--body);

    opacity: .75;
}


/* =========================================================
   ALTER EGO CUSTOMIZER
========================================================= */

.doll-customizer {
    width: min(1400px, 92%);

    margin: 0 auto 120px;

    display: grid;
    grid-template-columns: .9fr 1.1fr;

    gap: 30px;
}

.doll-side,
.customize-side {
    border:
        1px solid rgba(150, 190, 255, .4);

    background:
        linear-gradient(
            135deg,
            rgba(42, 35, 100, .72),
            rgba(8, 19, 58, .82)
        );

    box-shadow:
        0 0 50px rgba(0, 110, 255, .10),
        inset 0 0 50px rgba(180, 0, 255, .06);

    backdrop-filter: blur(12px);
}

.doll-side {
    padding: 25px;
}

.customize-side {
    padding: 30px;
}

.doll-header,
.customize-heading {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 20px;

    padding-bottom: 20px;

    border-bottom:
        1px solid rgba(255, 255, 255, .2);

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

.doll-header span:first-child,
.customize-heading > div > span {
    color: #fff044;

    letter-spacing: 2px;
}

.doll-header span:last-child,
.selection-status {
    color: #00eaff;

    font-size: 12px;

    letter-spacing: 1px;
}

.customize-heading h2 {
    margin: 6px 0 0;

    font-family: var(--display);

    font-size: 28px;
}


/* =========================================================
   DOLL STAGE
========================================================= */

.doll-stage {
    position: relative;

    min-height: 700px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(255, 0, 220, .25),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #3b146d,
            #10164c 65%,
            #071936
        );

    border:
        1px solid rgba(255, 255, 255, .15);
}

.doll-glow {
    position: absolute;

    width: 70%;

    aspect-ratio: 1;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 0, 210, .35),
            transparent 65%
        );

    filter: blur(20px);

    pointer-events: none;
}


/* =========================================================
   DOLL
========================================================= */

.doll {
    position: relative;

    z-index: 2;

    width: min(100%, 520px);

    aspect-ratio: 1 / 1.7;
}

.doll-layer {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    pointer-events: none;
    user-select: none;
}

.doll-layer[hidden] {
    display: none !important;
}


/* =========================================================
   DOLL LAYER ORDER

   BACK HAIR
   BODY
   FRONT HAIR
   BOTTOM
   SHOES
   TOP / DRESS
========================================================= */

#dollHairBack {
    z-index: 1;
}

.doll-body {
    z-index: 2;
}

#dollHair {
    z-index: 3;
}

#dollBottom {
    z-index: 4;
}

#dollShoes {
    z-index: 5;
}

#dollTop,
#dollDress {
    z-index: 6;
}


/* =========================================================
   PANTS ABOVE SHOES
========================================================= */

.doll.pants-over-shoes #dollShoes {
    z-index: 4;
}

.doll.pants-over-shoes #dollBottom {
    z-index: 5;
}


/* =========================================================
   HAIR FRAME

   The complete copy stays behind the body through
   #dollHairBack.

   The front copy is clipped so the hair can frame
   the head without covering the arms/body.
========================================================= */

#dollHair.split-hair-frame {
    clip-path: polygon(
        0% 0%,
        100% 0%,

        100% 35%,
        72% 35%,
        66% 32%,
        60% 29%,
        55% 27%,

        50% 26%,

        45% 27%,
        40% 29%,
        34% 32%,
        28% 35%,

        0% 35%
    );
}


/* =========================================================
   INDIVIDUAL HAIR POSITIONING
========================================================= */

/* Afro */

#dollHair.hair-afro {
    transform: translate(-4px, -60px);
}


/* Medium straight */

#dollHair.hair-medium,
#dollHairBack.hair-medium {
    transform: translateX(4px);
}


/* =========================================================
   HAIR COLORS
========================================================= */

#dollHair.hair-brown,
#dollHairBack.hair-brown {
    filter: none;
}

#dollHair.hair-blonde,
#dollHairBack.hair-blonde {
    filter:
        sepia(.8)
        saturate(1.5)
        hue-rotate(350deg)
        brightness(1.4)
        contrast(.9);
}

#dollHair.hair-black,
#dollHairBack.hair-black {
    filter:
        grayscale(1)
        brightness(.28)
        contrast(1.25);
}

#dollHair.hair-red,
#dollHairBack.hair-red {
    filter:
        sepia(.7)
        saturate(3.5)
        hue-rotate(325deg)
        brightness(.9)
        contrast(1.05);
}

#dollHair.hair-pink,
#dollHairBack.hair-pink {
    filter:
        sepia(.45)
        saturate(5)
        hue-rotate(285deg)
        brightness(1.08)
        contrast(.95);
}

#dollHair.hair-purple,
#dollHairBack.hair-purple {
    filter:
        sepia(.35)
        saturate(5)
        hue-rotate(235deg)
        brightness(.88)
        contrast(1.05);
}

#dollHair.hair-blue,
#dollHairBack.hair-blue {
    filter:
        sepia(.65)
        saturate(4.8)
        hue-rotate(205deg)
        brightness(.92)
        contrast(1.08);
}


/* =========================================================
   DOLL SPARKLES
========================================================= */

.doll-sparkle {
    position: absolute;

    z-index: 10;

    color: #fff044;

    font-size: 30px;

    text-shadow:
        0 0 15px #fff044;

    pointer-events: none;
}

.sparkle-one {
    top: 20%;
    left: 10%;
}

.sparkle-two {
    top: 35%;
    right: 10%;
}

.sparkle-three {
    bottom: 15%;
    left: 15%;
}


/* =========================================================
   DOLL NAME
========================================================= */

.doll-name {
    padding: 18px 5px;

    font-family: var(--display);

    letter-spacing: 1px;
}

.doll-name span {
    color: #00eaff;
}

.doll-name strong {
    color: #fff044;
}

#dollNameInput {
    width: 100%;

    padding: 12px 14px;

    background:
        rgba(0, 0, 0, .4);

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, .35);

    outline: none;

    font-family: var(--pixel);
    font-size: 17px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

#dollNameInput:focus {
    border-color: var(--pink);

    box-shadow:
        0 0 10px rgba(255, 32, 200, .3);
}

#dollNameInput::placeholder {
    color:
        rgba(255, 255, 255, .45);
}


/* =========================================================
   DOLL ACTIONS
========================================================= */

.doll-actions {
    display: flex;

    gap: 10px;
}

.doll-actions button {
    flex: 1;

    padding: 13px;

    border: 1px solid #00eaff;

    background:
        rgba(0, 20, 70, .7);

    color: white;

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

    cursor: pointer;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.doll-actions button:hover {
    background: #00eaff;

    color: #07112d;

    transform: translateY(-2px);

    box-shadow:
        0 0 20px rgba(0, 234, 255, .5);
}


/* =========================================================
   CUSTOMIZER CONTROLS
========================================================= */

.custom-control {
    padding: 25px 0;

    border-bottom:
        1px solid rgba(255, 255, 255, .12);
}

.custom-control > label,
.control-title label {
    display: block;

    margin-bottom: 14px;

    font-family: var(--display);

    letter-spacing: 1px;
}

.custom-control input {
    width: 100%;

    padding: 16px 18px;

    box-sizing: border-box;

    background:
        rgba(5, 15, 50, .8);

    border:
        1px solid rgba(255, 255, 255, .35);

    color: white;

    font-family: var(--body);

    outline: none;
}

.custom-control input:focus {
    border-color: #ff2ecb;

    box-shadow:
        0 0 20px rgba(255, 46, 203, .2);
}

.control-title {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 15px;

    margin-bottom: 10px;
}

.control-title > span {
    color:
        rgba(255, 255, 255, .45);

    font-family: var(--pixel);
    font-size: 12px;

    text-align: right;
}

.selection-status {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 14px;
}


/* =========================================================
   OPTION GRID — NON-CAROUSEL FALLBACK
========================================================= */

.option-grid {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(105px, 1fr)
        );

    gap: 12px;
}


/* =========================================================
   OPTION CAROUSEL
========================================================= */

.option-carousel {
    position: relative;

    width: 100%;

    display: grid;

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

    align-items: center;

    gap: 10px;
}

.option-carousel .option-grid {
    display: flex;

    flex-wrap: nowrap;

    gap: 12px;

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type: x proximity;

    padding: 6px 2px 12px;

    scrollbar-width: none;
}

.option-carousel .option-grid::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   OPTION CARDS
========================================================= */

.style-option {
    position: relative;

    min-width: 0;
    min-height: 130px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: space-between;

    padding: 8px;

    background:
        rgba(255, 255, 255, .035);

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, .22);

    font-family: var(--body);
    font-size: 10px;
    font-weight: 900;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.option-carousel .style-option {
    flex: 0 0 125px;

    width: 125px;
    min-width: 125px;

    scroll-snap-align: start;
}

.style-option:hover {
    transform: translateY(-3px);

    border-color: var(--pink);

    box-shadow:
        0 0 18px rgba(255, 46, 203, .25);
}

.style-option.selected {
    border-color: var(--yellow);

    background:
        rgba(255, 240, 0, .07);

    box-shadow:
        0 0 18px rgba(255, 240, 68, .25);
}


/* =========================================================
   OPTION IMAGE
========================================================= */

.style-option .option-image {
    width: 100%;
    height: 115px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-bottom: 7px;

    overflow: hidden;

    background:
        rgba(255, 255, 255, .025);
}

.style-option .option-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
    object-position: center;
}

.style-option > span:last-child {
    display: block;

    text-align: center;

    font-family: var(--pixel);
    font-size: 14px;

    line-height: 1.15;
}


/* =========================================================
   SKIN OPTIONS
========================================================= */

.skin-grid {
    grid-template-columns:
        repeat(
            6,
            minmax(0, 1fr)
        );
}

.option-carousel .skin-asset-option {
    flex: 0 0 110px;

    width: 110px;
    min-width: 110px;
}

.skin-asset-option .option-image {
    height: 125px;
}

.skin-asset-option.selected {
    border-color: var(--yellow);

    background:
        rgba(255, 240, 0, .07);

    box-shadow:
        0 0 18px rgba(255, 240, 68, .25);
}


/* =========================================================
   HAIR COLOR CONTROL
========================================================= */

.hair-color-control {
    margin-top: 20px;
}

.hair-color-control > span {
    display: block;

    margin-bottom: 12px;

    color: var(--yellow);

    font-family: var(--display);
    font-size: 11px;

    letter-spacing: 1px;
}

.hair-color-options {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}

.hair-color-option {
    width: 34px;
    height: 34px;

    padding: 0;

    border-radius: 50%;

    border:
        2px solid rgba(255, 255, 255, .4);

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.hair-color-option:hover {
    transform: scale(1.12);
}

.hair-color-option.selected {
    border-color: #ffffff;

    transform: scale(1.08);

    box-shadow:
        0 0 0 2px var(--pink),
        0 0 13px rgba(255, 32, 200, .55);
}


/* =========================================================
   HAIR COLOR SWATCHES
========================================================= */

.hair-color-option[data-hair-color="brown"] {
    background: #5a3326;
}

.hair-color-option[data-hair-color="blonde"] {
    background: #e5c36b;
}

.hair-color-option[data-hair-color="black"] {
    background: #101010;
}

.hair-color-option[data-hair-color="red"] {
    background: #a43a2b;
}

.hair-color-option[data-hair-color="pink"] {
    background: #ff4fc3;
}

.hair-color-option[data-hair-color="purple"] {
    background: #8548d8;
}

.hair-color-option[data-hair-color="blue"] {
    background: #338fdc;
}


/* =========================================================
   CAROUSEL ARROWS
========================================================= */

.carousel-arrow {
    width: 40px;
    height: 70px;

    display: grid;

    place-items: center;

    padding: 0;

    background:
        rgba(5, 10, 35, .9);

    color: #ffffff;

    border:
        1px solid rgba(255, 255, 255, .35);

    font-family: var(--pixel);
    font-size: 28px;

    line-height: 1;

    cursor: pointer;

    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .2s ease,
        opacity .2s ease;
}

.carousel-arrow:hover:not(:disabled) {
    color: var(--yellow);

    border-color: var(--yellow);

    background:
        rgba(255, 240, 0, .08);

    transform: scale(1.05);
}

.carousel-arrow:disabled {
    opacity: .25;

    cursor: default;

    transform: none;
}

.carousel-arrow.previous {
    justify-self: start;
}

.carousel-arrow.next {
    justify-self: end;
}


/* =========================================================
   REMOVE OLD ACCESSORY UI
========================================================= */

.accessory-tabs,
.accessory-panel {
    display: none !important;
}


/* =========================================================
   ALTER EGO RESPONSIVE
========================================================= */

@media (max-width: 950px) {

    .doll-customizer {
        grid-template-columns: 1fr;
    }

    .doll-stage {
        min-height: 600px;
    }
}


@media (max-width: 600px) {

    .alter-ego-intro {
        padding: 130px 20px 40px;
    }

    .doll-customizer {
        width: 94%;
    }

    .doll-side,
    .customize-side {
        padding: 18px;
    }

    .doll-stage {
        min-height: 540px;
    }

    .option-carousel {
        grid-template-columns:
            34px
            minmax(0, 1fr)
            34px;

        gap: 6px;
    }

    .carousel-arrow {
        width: 32px;
        height: 60px;

        font-size: 23px;
    }

    .option-carousel .style-option {
        flex-basis: 105px;

        width: 105px;
        min-width: 105px;
    }

    .option-carousel .skin-asset-option {
        flex-basis: 95px;

        width: 95px;
        min-width: 95px;
    }

    .style-option .option-image {
        height: 90px;
    }

    .skin-asset-option .option-image {
        height: 100px;
    }

    .doll-actions {
        flex-direction: column;
    }
}

/* =========================================================
   MOBILE NAV FIX
========================================================= */

@media (max-width: 750px) {

    .site-header {
        position: relative;
        z-index: 9000;
        height: 105px;
        padding: 8px 22px;
        overflow: visible;
    }

    .site-brand {
        width: 180px;
        height: 88px;
        flex-shrink: 1;

        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;

        overflow: hidden;
    }

    .brand-logo {
        width: 135px;
        max-width: 100%;
        height: auto;
    }

    .brand-tagline {
        width: 150px;
        max-width: 100%;
        height: auto;
        margin-top: -15px;
    }

    .mobile-menu-button {
        display: block;

        position: relative;
        z-index: 9100;

        margin-left: auto;
        padding: 10px 14px;

        background: #050505;
        color: var(--white);

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

        cursor: pointer;
    }

    .desktop-nav {
        display: none;
    }

    .desktop-nav.open {
        display: flex !important;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        width: 100%;

        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;

        padding: 8px 22px 16px;

        background: #050505;

        border-top: 1px solid rgba(255, 255, 255, .12);
        border-bottom: 2px solid var(--pink);

        box-shadow:
            0 2px 0 var(--blue),
            0 12px 25px rgba(0, 0, 0, .75);

        z-index: 9050;
    }

    .desktop-nav.open a {
        position: relative;
        z-index: 9060;

        display: flex;

        width: 100%;
        min-height: 48px;

        align-items: center;
        justify-content: flex-start;

        margin: 0;
        padding: 12px 10px;

        color: var(--white);
        background: transparent;

        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .14);

        font-size: 16px;

        cursor: pointer;
        pointer-events: auto;
    }

    .desktop-nav.open a:hover {
        color: var(--yellow);
        background: rgba(255, 255, 255, .04);
        transform: none;
    }

    .desktop-nav.open a.active {
        color: var(--pink);
        background: rgba(255, 32, 200, .06);
        border-color: var(--pink);
        box-shadow: none;
    }

    .desktop-nav.open a.resume-nav-link {
        margin-top: 8px;

        color: #030305;
        background: var(--yellow);

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

        justify-content: center;
    }
}


/* =========================================================
   RESUME PAGE
========================================================= */

.resume-page {
    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(92, 35, 140, .25),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(0, 217, 255, .12),
            transparent 30%
        ),
        #070914;

    color: #ffffff;
}

.resume-main {
    width: min(1180px, 92%);
    margin: 0 auto;
    padding: 90px 0 120px;
}


/* =========================================================
   RESUME HERO
========================================================= */

.resume-hero {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(280px, .75fr);

    gap: 50px;
    align-items: center;

    padding: 70px 0 90px;

    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.resume-kicker {
    color: var(--pink);

    font-family: var(--pixel);
    font-size: 20px;
    letter-spacing: 2px;
}

.resume-hero h1 {
    margin: 12px 0 24px;

    font-family: var(--display);
    font-size: clamp(60px, 9vw, 120px);
    line-height: .88;
}

.resume-hero h1 span {
    display: block;
    color: var(--yellow);
}

.resume-summary {
    max-width: 720px;

    color: #d3d7df;

    font-size: 19px;
    line-height: 1.75;
}

.resume-contact-line {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 25px;

    color: var(--chrome);

    font-family: var(--pixel);
    font-size: 16px;
}

.resume-contact-line a {
    color: var(--blue);
}

.resume-page-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 32px;
}


/* =========================================================
   TERMINAL CARD
========================================================= */

.resume-terminal-card {
    border: 1px solid rgba(255, 255, 255, .35);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, .09),
            rgba(255, 255, 255, .025)
        );

    box-shadow: 0 25px 60px rgba(0, 0, 0, .4);

    backdrop-filter: blur(14px);
}

.resume-terminal-top {
    display: flex;
    justify-content: space-between;

    padding: 13px 16px;

    border-bottom: 1px solid rgba(255, 255, 255, .15);

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 18px;
}

.resume-terminal-body {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px 20px;

    padding: 25px;

    font-family: var(--pixel);
}

.resume-terminal-body span {
    color: var(--chrome-dark);
}

.resume-terminal-body strong {
    color: var(--yellow);
    text-align: right;
}


/* =========================================================
   RESUME SECTIONS
========================================================= */

.resume-section {
    padding: 80px 0;

    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.resume-section-heading {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 38px;
}

.resume-section-heading > span {
    color: var(--pink);

    font-family: var(--pixel);
    font-size: 26px;
}

.resume-section-heading h2 {
    margin: 0;

    font-family: var(--display);
    font-size: clamp(30px, 4vw, 52px);
}


/* =========================================================
   RESUME ENTRIES
========================================================= */

.resume-entry {
    position: relative;

    margin-bottom: 24px;
    padding: 28px 30px;

    border: 1px solid rgba(255, 255, 255, .15);

    background: rgba(255, 255, 255, .025);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.resume-entry:hover {
    transform: translateY(-3px);

    border-color: rgba(0, 217, 255, .45);

    box-shadow: 0 16px 35px rgba(0, 0, 0, .25);
}

.resume-entry-top {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    align-items: flex-start;
}

.resume-entry h3 {
    margin: 0;

    color: #ffffff;

    font-family: var(--display);
    font-size: 17px;
}

.resume-entry-top span {
    display: block;

    margin-top: 6px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 17px;
}

.resume-entry time {
    flex-shrink: 0;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 17px;
}

.resume-location {
    margin: 12px 0 18px;

    color: var(--chrome-dark);

    font-family: var(--pixel);
    font-size: 16px;
}

.resume-entry ul {
    margin: 18px 0 0;
    padding-left: 20px;
}

.resume-entry li {
    margin-bottom: 9px;

    color: #d1d5dd;

    line-height: 1.65;
}

.resume-entry li::marker {
    color: var(--yellow);
}


/* =========================================================
   EDUCATION META
========================================================= */

.resume-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    margin-top: 18px;
}

.resume-meta-row span {
    padding: 7px 10px;

    border: 1px solid rgba(255, 240, 0, .25);

    background: rgba(255, 240, 0, .05);
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 14px;
}


/* =========================================================
   SKILLS
========================================================= */

.resume-skills-group {
    margin-bottom: 34px;
}

.resume-skills-group h3 {
    margin-bottom: 14px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 19px;
}

.resume-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.resume-skills span {
    padding: 9px 12px;

    border: 1px solid rgba(255, 255, 255, .2);

    background: rgba(255, 255, 255, .04);
    color: #ffffff;

    font-family: var(--pixel);
    font-size: 15px;

    transition:
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.resume-skills span:hover {
    color: var(--yellow);
    border-color: var(--yellow);

    transform: translateY(-2px);
}


/* =========================================================
   RESUME RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .resume-main {
        padding-top: 50px;
    }

    .resume-hero {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 45px;
    }

    .resume-terminal-card {
        max-width: 520px;
    }

    .resume-entry-top {
        flex-direction: column;
        gap: 12px;
    }

    .resume-entry time {
        align-self: flex-start;
    }
}

@media (max-width: 520px) {

    .resume-main {
        width: min(94%, 1180px);
    }

    .resume-section {
        padding: 55px 0;
    }

    .resume-entry {
        padding: 22px 18px;
    }

    .resume-page-buttons {
        flex-direction: column;
    }

    .resume-page-buttons a {
        width: 100%;
    }

    .resume-contact-line {
        flex-direction: column;
        gap: 5px;
    }
}


/* =========================================================
   CURSOR SPARKLES
========================================================= */

.cursor-sparkle {
    position: fixed;
    left: 0;
    top: 0;

    z-index: 99999;

    pointer-events: none;

    color: var(--yellow);

    font-size: 15px;

    text-shadow:
        0 0 7px var(--yellow),
        0 0 12px var(--pink);

    transform: translate(-50%, -50%);

    animation: cursorSparkleFade .7s ease-out forwards;
}

@keyframes cursorSparkleFade {

    0% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(.7)
            rotate(0deg);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -90%)
            scale(1.35)
            rotate(45deg);
    }
}


/* =========================================================
   HOMEPAGE REDESIGN
========================================================= */

.home-redesign {
    overflow: hidden;

    background: #070812;
    color: #ffffff;
}


/* =========================================================
   EDITORIAL HERO
========================================================= */

.editorial-hero {
    position: relative;

    min-height: calc(100vh - 130px);

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(390px, .92fr);

    align-items: center;

    gap: clamp(40px, 5vw, 78px);

    padding:
        80px
        clamp(36px, 6vw, 105px)
        88px;

    background:
        radial-gradient(
            circle at 14% 30%,
            rgba(255, 33, 200, .2),
            transparent 30%
        ),
        radial-gradient(
            circle at 75% 25%,
            rgba(0, 190, 255, .15),
            transparent 30%
        ),
        #070812;
}

.hero-meta-line {
    display: flex;
    justify-content: space-between;
    gap: 25px;

    margin-bottom: 26px;

    color: rgba(255, 255, 255, .52);

    font-family: var(--pixel);
    font-size: 14px;
    letter-spacing: 1px;
}

.editorial-eyebrow {
    margin: 0 0 16px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: clamp(16px, 1.7vw, 21px);
    letter-spacing: 2px;
}

.editorial-name {
    position: relative;
    z-index: 4;

    margin: 0;

    font-family: var(--display);
    font-size: clamp(72px, 10vw, 155px);
    line-height: .78;
    letter-spacing: -4px;
}

.editorial-name > span {
    display: block;
}

.editorial-name-second {
    color: var(--yellow);

    margin-left: clamp(20px, 5vw, 75px);
}

.editorial-statement {
    max-width: 670px;

    margin: 40px 0 18px;

    font-size: clamp(23px, 2.2vw, 34px);
    line-height: 1.18;
    font-weight: 700;
}

.editorial-intro {
    max-width: 640px;

    color: rgba(255, 255, 255, .72);

    font-size: 17px;
    line-height: 1.75;
}

.editorial-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;

    margin-top: 35px;
}

.editorial-primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 18px;

    background: var(--yellow);
    color: #070812;

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

    font-family: var(--pixel);
    font-size: 17px;

    box-shadow: 5px 5px 0 var(--pink);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.editorial-primary-button:hover {
    transform: translate(-2px, -2px);

    box-shadow: 8px 8px 0 var(--blue);
}

.editorial-text-link {
    color: #ffffff;

    font-family: var(--pixel);
    font-size: 17px;

    border-bottom: 1px solid rgba(255, 255, 255, .45);

    padding-bottom: 4px;
}

.editorial-text-link:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

.editorial-hero-image {
    position: relative;

    min-height: 630px;
    max-height: 760px;

    align-self: center;

    transform: rotate(1.3deg);
}

.editorial-hero-image img {
    display: block;

    width: 100%;
    height: 100%;
    max-height: 760px;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, .65);

    box-shadow:
        16px 16px 0 rgba(255, 33, 200, .78),
        22px 22px 0 rgba(0, 213, 255, .22);
}

.image-file-label {
    position: absolute;
    z-index: 3;

    top: -17px;
    left: 22px;

    padding: 7px 11px;

    background: #070812;
    color: var(--blue);

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

    font-family: var(--pixel);
    font-size: 14px;
}

.image-corner-label {
    position: absolute;

    bottom: 15px;
    right: 15px;

    padding: 6px 9px;

    background: rgba(0, 0, 0, .8);
    color: #ffffff;

    font-family: var(--pixel);
    font-size: 12px;
}

.hero-star {
    position: absolute;
    z-index: 5;

    pointer-events: none;

    animation: homeStarFloat 6s ease-in-out infinite;
}

.hero-star-one {
    top: 12%;
    left: 48%;

    color: var(--yellow);

    font-size: 40px;
}

.hero-star-two {
    bottom: 9%;
    left: 4%;

    color: var(--pink);

    font-size: 62px;

    animation-delay: -2s;
}

.hero-star-three {
    top: 24%;
    right: 2%;

    color: var(--blue);

    font-size: 44px;

    animation-delay: -4s;
}

@keyframes homeStarFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-12px)
            rotate(8deg);
    }
}


/* =========================================================
   Y2K MARQUEE / TICKER
========================================================= */

.home-ticker {
    position: relative;
    overflow: hidden;

    width: 100%;

    background:
        linear-gradient(
            90deg,
            #080912 0%,
            #171044 50%,
            #080912 100%
        );

    color: var(--yellow);

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--blue);

    box-shadow:
        0 3px 0 rgba(255, 32, 200, .35),
        0 6px 0 rgba(0, 213, 255, .18);

    z-index: 5;
}

.ticker-track {
    display: flex;
    align-items: center;

    width: max-content;

    will-change: transform;

    animation: homeTicker 32s linear infinite;
}

.ticker-group {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    white-space: nowrap;

    padding: 0;
    margin: 0;
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    gap: 18px;

    padding: 13px 28px;
    margin: 0;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: clamp(16px, 1.45vw, 20px);
    font-weight: normal;
    letter-spacing: 1.5px;
    line-height: 1;

    white-space: nowrap;

    text-shadow: 0 0 5px rgba(255, 240, 0, .35);
}

.ticker-word {
    display: inline-block;
    transform: translateX(-12px);
}

.ticker-item b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    min-width: 18px;

    margin: 0;

    color: var(--pink);

    font-size: 18px;
    font-weight: normal;
    line-height: 1;
    text-align: center;

    text-shadow: 0 0 7px rgba(255, 32, 200, .45);
}

.ticker-item:nth-child(3n + 2) b {
    color: var(--blue);

    text-shadow: 0 0 7px rgba(0, 213, 255, .45);
}

.ticker-item:nth-child(3n + 3) b {
    color: #ff4fa3;

    text-shadow: 0 0 7px rgba(255, 79, 163, .45);
}

.home-ticker::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--blue),
            var(--pink)
        );

    opacity: .85;

    pointer-events: none;

    z-index: 2;
}

.home-ticker::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 240, 0, .95) 0%,
            transparent 3%,
            transparent 97%,
            rgba(255, 240, 0, .95) 100%
        );

    z-index: 3;
}

@keyframes homeTicker {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.home-ticker:hover .ticker-track {
    animation-play-state: paused;
}

@media (max-width: 650px) {

    .ticker-track {
        animation-duration: 25s;
    }

    .ticker-item {
        gap: 16px;

        padding: 11px 20px;

        font-size: 15px;
        letter-spacing: 1px;
    }

    .ticker-item b {
        width: 15px;
        min-width: 15px;

        font-size: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .ticker-track {
        animation: none;
    }
}


/* =========================================================
   HEARST FEATURE
========================================================= */

.hearst-feature {
    position: relative;

    padding:
        95px
        clamp(36px, 6vw, 105px)
        110px;

    background:
        radial-gradient(
            circle at 18% 25%,
            rgba(255, 32, 200, .18),
            transparent 32%
        ),
        radial-gradient(
            circle at 86% 75%,
            rgba(0, 213, 255, .14),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #090916 0%,
            #171044 48%,
            #07192a 100%
        );

    color: #ffffff;

    overflow: hidden;

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--blue);
}

.hearst-feature::before {
    content: "★";

    position: absolute;

    top: -105px;
    right: -35px;

    color: rgba(255, 240, 0, .08);

    font-size: 390px;
    line-height: 1;

    transform: rotate(12deg);

    pointer-events: none;
}

.hearst-feature::after {
    content: "AWARD_2026 // FEATURE_WRITING";

    position: absolute;

    bottom: 15px;
    right: 28px;

    color: rgba(255, 255, 255, .32);

    font-family: var(--pixel);
    font-size: 13px;
    letter-spacing: 2px;

    pointer-events: none;
}

.hearst-topline {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 14px;

    color: rgba(255, 255, 255, .68);

    border-bottom: 1px solid rgba(255, 255, 255, .24);

    font-family: var(--pixel);
    font-size: 15px;
}

.hearst-layout {
    position: relative;
    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(380px, 1.1fr);

    gap: 62px;

    align-items: center;

    margin-top: 58px;
}

.hearst-copy {
    position: relative;
    z-index: 2;
}

.hearst-star {
    display: block;

    margin-bottom: 12px;

    color: var(--yellow);

    font-size: 58px;

    text-shadow:
        0 0 12px rgba(255, 240, 0, .5),
        4px 4px 0 rgba(255, 32, 200, .5);
}

.hearst-label {
    margin: 0 0 12px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 20px;
    letter-spacing: 2px;
}

.hearst-copy h2 {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #ffffff;

    font-family: var(--display);
    font-size: clamp(54px, 6.4vw, 100px);
    line-height: .86;
    letter-spacing: -2px;
}

.hearst-copy h2 span {
    display: block;

    color: var(--yellow);

    -webkit-text-stroke: 1px var(--yellow);

    text-shadow:
        4px 4px 0 var(--pink),
        7px 7px 0 rgba(0, 213, 255, .45);
}

.hearst-rule {
    width: 100%;
    height: 3px;

    margin: 30px 0;

    background:
        linear-gradient(
            90deg,
            var(--pink),
            var(--yellow),
            var(--blue)
        );
}

.hearst-copy h3 {
    margin: 0 0 15px;

    color: #ffffff;

    font-size: clamp(23px, 2.5vw, 36px);
    line-height: 1.15;
}

.hearst-copy p {
    max-width: 570px;

    color: rgba(255, 255, 255, .76);

    font-size: 17px;
    line-height: 1.65;
}

.hearst-copy .editorial-primary-button {
    margin-top: 22px;
}

.hearst-image {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    min-width: 0;

    margin: 0;

    transform: rotate(-1deg);
}

.hearst-image img {
    display: block;

    width: 100%;
    height: auto;
    max-width: 620px;

    margin: 0 auto;

    object-fit: contain;

    border: 4px solid rgba(255, 255, 255, .92);

    box-shadow:
        13px 13px 0 var(--pink),
        18px 18px 0 rgba(0, 213, 255, .4);

    image-rendering: auto;
}

.hearst-image figcaption {
    width: 100%;
    max-width: 620px;

    margin-top: 17px;

    color: rgba(255, 255, 255, .55);

    font-family: var(--pixel);
    font-size: 15px;
    letter-spacing: 1px;
}

@media (max-width: 1000px) {

    .hearst-layout {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .hearst-image {
        max-width: 700px;
    }

    .hearst-image img,
    .hearst-image figcaption {
        max-width: 100%;
    }
}

@media (max-width: 650px) {

    .hearst-feature {
        padding: 75px 22px 90px;
    }

    .hearst-topline {
        flex-direction: column;
        gap: 6px;
    }

    .hearst-copy h2 {
        font-size: clamp(48px, 16vw, 80px);
    }

    .hearst-feature::before {
        top: -40px;
        right: -60px;

        font-size: 230px;
    }

    .hearst-feature::after {
        right: 18px;
        bottom: 10px;

        font-size: 10px;
    }

    .hearst-image {
        transform: none;
    }
}


/* =========================================================
   SELECTED WORK
========================================================= */

.selected-work {
    position: relative;

    padding:
        95px
        clamp(36px, 6vw, 105px)
        110px;

    background: #080912;

    overflow: hidden;
}

.selected-work-heading {
    display: block;
    position: relative;

    margin-bottom: 70px;
    padding-top: 15px;
}

.selected-work-heading p,
.section-index {
    font-family: var(--pixel);
}

.section-index {
    display: block;

    margin-bottom: 10px;

    color: var(--pink);

    font-size: 18px;
    line-height: 1;
    letter-spacing: 2px;
}

.selected-work-heading > div {
    margin-bottom: 12px;
}

.selected-work-heading > div p {
    margin: 4px 0 0;

    color: rgba(255, 255, 255, .48);

    font-size: 13px;
    letter-spacing: 1px;
}

.selected-work-heading p {
    color: rgba(255, 255, 255, .6);
    font-size: 15px;
}

.selected-work-heading h2 {
    max-width: 1200px;

    margin: 0;

    font-family: var(--display);
    font-size: clamp(46px, 6.7vw, 94px);
    line-height: .9;
    letter-spacing: -2px;
}

.selected-work-heading h2 span {
    display: block;
    color: var(--blue);
}


/* =========================================================
   IS GOD IS FEATURE
========================================================= */

.work-feature {
    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(320px, .75fr);

    gap: 55px;

    align-items: center;

    margin-bottom: 150px;
}

.work-image-wrap {
    position: relative;

    padding: 8px;

    border: 1px solid rgba(0, 213, 255, .35);

    background:
        linear-gradient(
            135deg,
            rgba(0, 213, 255, .08),
            rgba(255, 32, 200, .08)
        );

    box-shadow: 12px 12px 0 rgba(255, 32, 200, .18);
}

.work-image-wrap img {
    display: block;

    width: 100%;

    aspect-ratio: 16 / 9;

    object-fit: cover;

    border: 1px solid rgba(255, 255, 255, .35);

    filter: saturate(.87);

    transition:
        filter .3s ease,
        transform .3s ease;
}

.work-image-wrap:hover img {
    filter: saturate(1.15);
    transform: scale(1.01);
}

.work-number {
    position: absolute;
    z-index: 2;

    top: -32px;
    left: -15px;

    color: var(--yellow);

    font-family: var(--display);
    font-size: 80px;
}

.work-type {
    margin-bottom: 14px;

    color: var(--pink);

    font-family: var(--pixel);
    font-size: 16px;
    letter-spacing: 1px;
}

.work-feature-copy h3,
.proposal-copy h3 {
    margin: 0 0 24px;

    font-family: var(--display);
    font-size: clamp(42px, 5vw, 72px);
    line-height: .88;
}

.work-feature-copy h3 span,
.proposal-copy h3 span {
    display: block;
    color: var(--yellow);
}

.work-feature-copy p,
.proposal-copy p {
    color: rgba(255, 255, 255, .72);

    font-size: 17px;
    line-height: 1.7;
}

.work-feature-copy a,
.proposal-copy a {
    display: inline-block;

    margin-top: 18px;

    color: var(--blue);

    font-family: var(--pixel);
    font-size: 17px;

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


/* =========================================================
   THE QUESTION / PHOTO ESSAY
========================================================= */

.home-page .proposal-feature {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 100px clamp(24px, 6vw, 100px);
    box-sizing: border-box;
    display: block;
    overflow: visible;
}

/* INTRODUCTION */

.home-page .proposal-intro {
    width: 100%;
    max-width: 100%;
    margin-bottom: 56px;
}

.home-page .proposal-star {
    display: block;
    color: #00f5ed;
    font-size: 38px;
    line-height: 1;
    margin-bottom: 24px;
}

.home-page .proposal-eyebrow {
    color: #ff30d5;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0 0 22px;
}

/* HEADLINE */

.home-page .proposal-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    margin: 0 0 28px;
    font-family: var(--body);
    font-size: clamp(60px, 9vw, 140px);
    font-weight: 900;
    line-height: 0.88;
    letter-spacing: -0.065em;
    text-transform: uppercase;
}

.home-page .proposal-title span {
    display: block;
    max-width: 100%;
}

.home-page .proposal-title span:first-child {
    color: #ffffff;
    text-shadow: 3px 3px 0 #ff30d5,
                -3px -1px 0 #00f5ed;
}

.home-page .proposal-title span:last-child {
    color: #ffff00;
    font-size: 0.88em;
    text-shadow: 3px 3px 0 #ff30d5,
                -3px -1px 0 #00f5ed;
}

/* DESCRIPTION */

.home-page .proposal-description {
    max-width: 660px;
    margin: 0 0 28px;
    color: #b9bac8;
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.65;
}

.home-page .proposal-link {
    display: inline-block;
    color: #00f5ed;
    font-family: monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 5px;
}

.home-page .proposal-link:hover {
    color: #ffff00;
}

/* NINE-PHOTO GRID */

.home-page .proposal-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
    width: 100%;
    min-width: 0;
    scroll-margin-top: 80px;
}

/* INDIVIDUAL FRAMES */

.home-page .proposal-frame {
    min-width: 0;
    margin: 0;
    padding: 10px;
    background: #292638;
    box-sizing: border-box;
}

.home-page .proposal-frame a {
    display: block;
    width: 100%;
    overflow: hidden;
    background: #1b1b29;
}

.home-page .proposal-frame img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
}

.home-page .proposal-frame a:hover img {
    transform: scale(1.025);
}

.home-page .proposal-frame figcaption {
    padding: 12px 4px 4px;
    color: #ffffff;
    font-family: monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* TABLET */

@media (max-width: 900px) {
    .home-page .proposal-feature {
        padding: 72px 28px;
    }

    .home-page .proposal-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .home-page .proposal-title {
        font-size: clamp(54px, 10vw, 95px);
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .home-page .proposal-feature {
        padding: 64px 18px;
    }

    .home-page .proposal-intro {
        margin-bottom: 36px;
    }

    .home-page .proposal-title {
        font-size: clamp(43px, 11vw, 66px);
    }

    .home-page .proposal-gallery {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .home-page .proposal-description {
        font-size: 16px;
    }
}


/* =========================================================
   CREATIVE PRACTICE
========================================================= */

.creative-practice {
    position: relative;

    display: grid;

    grid-template-columns:
        .28fr
        1fr
        .38fr;

    gap: 42px;

    align-items: center;

    padding:
        90px
        clamp(36px, 7vw, 120px);

    background:
        linear-gradient(
            120deg,
            #271557,
            #34206f 55%,
            #10194d
        );

    border-top: 2px solid var(--pink);
    border-bottom: 2px solid var(--blue);

    overflow: hidden;
}

.creative-practice-number {
    color: rgba(255, 255, 255, .13);

    font-family: var(--display);
    font-size: clamp(90px, 14vw, 210px);
    line-height: 1;
}

.creative-practice-label {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 17px;
}

.creative-practice h2 {
    margin: 16px 0 25px;

    font-family: var(--display);
    font-size: clamp(40px, 5vw, 72px);
    line-height: .95;
}

.creative-practice h2 span {
    color: var(--pink);
}

.creative-practice-copy > p:not(.creative-practice-label) {
    max-width: 720px;

    color: rgba(255, 255, 255, .77);

    font-size: 17px;
    line-height: 1.7;
}

.creative-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    justify-items: center;
    align-items: center;
}

.creative-icons span {
    display: grid;
    place-items: center;

    width: 72px;
    height: 72px;

    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;

    color: var(--yellow);

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, .2),
            rgba(255, 255, 255, .03) 55%,
            rgba(0, 0, 0, .15)
        );

    font-size: 31px;

    box-shadow:
        inset 0 0 14px rgba(255, 255, 255, .08),
        0 0 12px rgba(0, 213, 255, .15);

    backdrop-filter: blur(6px);

    animation: iconFloat 4s ease-in-out infinite;

    transition:
        color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.creative-icons span:hover {
    color: var(--pink);
    border-color: var(--pink);

    box-shadow: 0 0 18px rgba(255, 32, 200, .55);
}

.creative-icons span:nth-child(2) {
    animation-delay: -.8s;
}

.creative-icons span:nth-child(3) {
    animation-delay: -1.6s;
}

.creative-icons span:nth-child(4) {
    animation-delay: -2.4s;
}

@keyframes iconFloat {

    50% {
        transform:
            translateY(-8px)
            rotate(5deg);
    }
}


/* =========================================================
   CONTACT CTA
========================================================= */

.home-contact-cta {
    position: relative;

    padding:
        105px
        clamp(36px, 7vw, 120px)
        115px;

    background:
        radial-gradient(
            circle at 14% 38%,
            rgba(255, 32, 200, .22),
            transparent 32%
        ),
        radial-gradient(
            circle at 80% 70%,
            rgba(0, 213, 255, .15),
            transparent 38%
        ),
        linear-gradient(
            120deg,
            #130b28,
            #081725
        );

    color: #ffffff;

    overflow: hidden;

    border-top: 2px solid var(--yellow);
}

.home-contact-cta > span {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 16px;
}

.home-contact-cta h2 {
    max-width: 1000px;

    margin: 22px 0 42px;

    color: #ffffff;

    font-family: var(--display);
    font-size: clamp(64px, 9vw, 140px);
    line-height: .83;
    letter-spacing: -3px;
}

.home-contact-cta h2 strong {
    display: block;

    color: var(--pink);

    -webkit-text-stroke: 1px var(--pink);

    text-shadow: 4px 4px 0 rgba(0, 213, 255, .45);
}

.home-contact-links a {
    padding-bottom: 4px;

    color: var(--blue);

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

    font-family: var(--pixel);
    font-size: 18px;
}

.home-contact-links a:hover {
    color: var(--yellow);
    border-color: var(--yellow);
}

.home-contact-star {
    position: absolute;

    top: 45px;
    right: 8%;

    color: var(--yellow);

    font-size: 100px;

    animation: homeStarFloat 5s ease-in-out infinite;
}


/* =========================================================
   HOMEPAGE RESPONSIVE
========================================================= */

@media (max-width: 1000px) {

    .editorial-hero {
        grid-template-columns: 1fr;
        padding-top: 65px;
    }

    .editorial-hero-image {
        min-height: auto;
        height: min(900px, 110vw);
    }

    .work-feature,
    .proposal-feature,
    .creative-practice {
        grid-template-columns: 1fr;
    }

    .hearst-image {
        max-width: 650px;
    }

    .proposal-collage {
        min-height: 720px;
    }

    .creative-practice-number {
        position: absolute;

        top: 30px;
        right: 30px;

        color: rgba(255, 255, 255, .075);
    }

    .creative-icons {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 650px) {

    .editorial-hero {
        padding: 55px 22px 65px;
    }

    .editorial-name {
        font-size: clamp(68px, 22vw, 110px);
    }

    .editorial-name-second {
        margin-left: 0;
    }

    .editorial-hero-image {
        height: 125vw;
        transform: rotate(0);
    }

    .hero-star-two,
    .hero-star-three {
        display: none;
    }

    .hearst-feature,
    .selected-work,
    .creative-practice,
    .home-contact-cta {
        padding-left: 22px;
        padding-right: 22px;
    }

    .proposal-collage {
        position: static;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;

        min-height: 0;

        margin-top: 25px;
    }

    .proposal-photo {
        position: relative;

        width: 100%;
        height: 240px;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        transform: none;
    }

    .proposal-main {
        grid-column: 1 / -1;
        height: 350px;
    }

    .home-contact-star {
        font-size: 72px;
    }

    .home-contact-cta h2 {
        font-size: clamp(58px, 18vw, 100px);
    }
}


/* =========================================================
   HOMEPAGE CYBER-Y2K DECORATION
========================================================= */

.editorial-hero-copy {
    position: relative;
}

.editorial-hero-copy::before {
    content: "✦";

    position: absolute;

    margin-left: -38px;
    margin-top: 120px;

    color: var(--yellow);

    font-size: 28px;

    text-shadow: 0 0 10px rgba(255, 240, 0, .7);

    animation: editorialTwinkle 3.5s ease-in-out infinite;
}

.hearst-copy::before {
    content: "✧";

    position: absolute;

    transform: translate(-40px, -20px);

    color: #131071;

    font-size: 30px;
}

.proposal-copy::before {
    content: "★";

    display: block;

    margin-bottom: 16px;

    color: var(--blue);

    font-size: 32px;
}

.creative-practice-copy::before {
    content: "SIGNAL_004 // CREATIVE_MODE";

    display: inline-block;

    margin-bottom: 12px;
    padding: 5px 8px;

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

    color: var(--blue);
    background: rgba(0, 0, 0, .25);

    font-family: var(--pixel);
    font-size: 11px;
    letter-spacing: 1px;
}

@keyframes editorialTwinkle {

    0%,
    100% {
        opacity: .45;

        transform:
            scale(.85)
            rotate(0deg);
    }

    50% {
        opacity: 1;

        transform:
            scale(1.2)
            rotate(8deg);
    }
}

.home-redesign::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: 7000;

    opacity: .035;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, .05) 0,
            rgba(255, 255, 255, .05) 1px,
            transparent 1px,
            transparent 4px
        );
}

.selected-work h3,
.hearst-copy h2,
.creative-practice h2 {
    transition:
        text-shadow .2s ease,
        transform .2s ease;
}

.work-feature:hover h3,
.proposal-feature:hover h3 {
    text-shadow:
        2px 0 var(--pink),
        -2px 0 var(--blue);

    transform: translateX(2px);
}


/* =========================================================
   BLOG PAGE — EDITORIAL ARCHIVE
========================================================= */

.blog-page {
    --blog-bg: #050505;
    --blog-panel: #0b0b0b;
    --blog-panel-2: #101010;
    --blog-text: #f4f1e8;
    --blog-muted: #aaa79f;
    --blog-line: rgba(255, 255, 255, .18);

    background:
        radial-gradient(
            circle at 15% 15%,
            rgba(255, 32, 200, .08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 30%,
            rgba(0, 210, 255, .06),
            transparent 30%
        ),
        #050505;

    color: var(--blog-text);
}


/* =========================================================
   BLOG INTRO
========================================================= */

.blog-section {
    width: min(1440px, calc(100% - 70px));

    margin: 0 auto;
    padding: 90px 0 130px;
}

.blog-intro {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 50px;
    align-items: start;

    margin-bottom: 55px;
    padding-bottom: 24px;

    border-bottom: 1px solid var(--blog-line);
}

.blog-intro > span {
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 19px;
    letter-spacing: 2px;
}

.blog-intro p {
    max-width: 700px;

    margin: 0;

    color: #d8d8d8;

    font-family: var(--display);
    font-size: clamp(20px, 2vw, 31px);
    line-height: 1.25;
    letter-spacing: .5px;
}


/* =========================================================
   COLLAPSED ARTICLE CARDS
========================================================= */

.article-card {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(380px, .75fr);

    min-height: 590px;

    margin: 0 0 55px;

    overflow: hidden;

    background: #090909;

    border: 1px solid rgba(255, 255, 255, .22);

    box-shadow:
        8px 8px 0 rgba(255, 240, 0, .9),
        16px 16px 0 rgba(255, 32, 200, .35);
}

.article-card.reverse {
    grid-template-columns:
        minmax(380px, .75fr)
        minmax(0, 1.25fr);
}

.article-card.reverse .article-image {
    order: 2;
}

.article-card.reverse .article-content {
    order: 1;
}

.article-number {
    position: absolute;

    top: 18px;
    left: 22px;

    z-index: 8;

    color: #fff;

    font-family: var(--pixel);
    font-size: 25px;
    letter-spacing: 2px;

    text-shadow:
        2px 2px 0 #000,
        0 0 12px rgba(0, 0, 0, .9);
}


/* =========================================================
   CARD IMAGE
========================================================= */

.article-image {
    position: relative;

    min-height: 590px;

    overflow: hidden;

    background: #151515;
}

.article-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 590px;

    object-fit: cover;
    object-position: center;

    transition:
        transform .8s cubic-bezier(.2, .7, .2, 1),
        filter .5s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.025);
}

.article-image::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(0, 0, 0, .62) 100%
        );
}

.article-image-label {
    position: absolute;

    left: 20px;
    bottom: 18px;

    z-index: 3;

    padding: 6px 10px;

    background: rgba(0, 0, 0, .82);

    border: 1px solid rgba(255, 255, 255, .45);

    color: #fff;

    font-family: var(--pixel);
    font-size: 16px;
    letter-spacing: 1.2px;
}


/* =========================================================
   CARD TEXT
========================================================= */

.article-content {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 70px 55px;

    background:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        ),
        #090909;

    background-size: 30px 30px;
}

.article-content small {
    display: inline-block;

    margin-bottom: 22px;
    padding: 6px 9px;

    color: var(--yellow);

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

    font-family: var(--pixel);
    font-size: 16px;
    letter-spacing: 1.5px;
}

.article-content h2 {
    max-width: 620px;

    margin: 0 0 20px;

    color: #fff;

    font-family: var(--display);
    font-size: clamp(38px, 4.4vw, 70px);
    line-height: .98;
    letter-spacing: -2px;
}

.article-card-lucky .article-content h2::first-line {
    color: var(--yellow);
}

.article-dek {
    max-width: 520px;

    margin: 0 0 30px;

    color: #c9c9c9;

    font-family: var(--body);
    font-size: 19px;
    line-height: 1.55;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 25px;

    width: 100%;

    margin-bottom: 32px;
    padding-top: 17px;

    border-top: 1px solid rgba(255, 255, 255, .18);

    color: #aaa;

    font-family: var(--pixel);
    font-size: 16px;
    letter-spacing: 1px;
}

.article-toggle {
    cursor: pointer;
    border: none;
}

.article-toggle.is-story-open {
    background: var(--pink);
    border-color: var(--pink);
    color: #050505;
}

.article-toggle:disabled {
    opacity: .45;
    cursor: default;
}


/* =========================================================
   EXPANDED ARTICLE
========================================================= */

.expanded-story {
    position: relative;

    width: calc(100% + 20px);

    margin: 80px 0 130px -10px;

    background: #070707;

    border-top: 2px solid var(--yellow);
    border-bottom: 2px solid var(--pink);

    box-shadow:
        0 0 45px rgba(255, 240, 0, .06),
        0 0 70px rgba(255, 32, 200, .04);
}

.expanded-story[hidden] {
    display: none !important;
}


/* =========================================================
   STORY HEADER
========================================================= */

.story-header {
    position: relative;

    max-width: 1160px;

    margin: 0 auto;
    padding: 100px 50px 75px;

    text-align: center;
}

.story-topline {
    display: flex;
    justify-content: space-between;

    gap: 25px;

    margin-bottom: 60px;
    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, .25);

    color: #aaa;

    font-family: var(--pixel);
    font-size: 16px;
    letter-spacing: 1.5px;
}

.story-kicker {
    margin: 0 0 20px;

    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 20px;
    letter-spacing: 4px;
}

.story-header h2 {
    max-width: 1000px;

    margin: 0 auto;

    color: #fff;

    font-family: var(--display);
    font-size: clamp(60px, 9vw, 130px);
    line-height: .85;
    letter-spacing: -5px;
}

.story-header h2 span {
    display: block;

    color: var(--yellow);

    text-shadow: 4px 4px 0 rgba(255, 32, 200, .7);
}

.story-subtitle {
    max-width: 750px;

    margin: 38px auto 35px;

    color: #dedede;

    font-family: var(--body);
    font-size: clamp(21px, 2vw, 29px);
    line-height: 1.45;
}

.story-byline {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #aaa;

    font-family: var(--pixel);
    font-size: 17px;
    letter-spacing: 1px;
}

.story-byline strong {
    color: var(--pink);
    font-weight: 400;
}


/* =========================================================
   STORY HERO IMAGE
========================================================= */

.story-hero {
    position: relative;

    width: min(1320px, calc(100% - 60px));
    height: min(74vw, 760px);

    margin: 0 auto 115px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .35);
}

.story-hero img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.story-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    box-shadow: inset 0 0 80px rgba(0, 0, 0, .3);
}

.story-hero figcaption {
    position: absolute;

    right: 18px;
    bottom: 18px;

    z-index: 3;

    padding: 6px 10px;

    background: #000;
    color: var(--yellow);

    font-family: var(--pixel);
    font-size: 15px;
    letter-spacing: 1px;
}


/* =========================================================
   LONG-FORM ARTICLE TEXT
========================================================= */

.story-section {
    position: relative;

    display: grid;

    grid-template-columns:
        110px
        minmax(0, 760px);

    justify-content: center;

    gap: 45px;

    width: min(1080px, calc(100% - 60px));

    margin: 0 auto;
    padding: 30px 0 55px;
}

.story-section-continuation {
    display: block;

    width: min(760px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;

    padding-top: 30px;
}

.story-section-number {
    position: sticky;
    top: 120px;

    align-self: start;

    color: transparent;

    -webkit-text-stroke: 1px rgba(255, 240, 0, .65);

    font-family: var(--display);
    font-size: 72px;
    line-height: 1;
}

.story-copy {
    min-width: 0;
}

.story-copy h3 {
    margin: 0 0 38px;

    color: #fff;

    font-family: var(--display);
    font-size: clamp(39px, 5vw, 66px);
    line-height: .98;
    letter-spacing: -2px;
}

.story-copy h3 span {
    color: var(--yellow);
}

.story-copy p {
    margin: 0 0 25px;

    color: #dedbd2;

    font-family: var(--body);
    font-size: 19px;
    line-height: 1.83;
    letter-spacing: .05px;
}

.story-copy .story-lead {
    margin-bottom: 34px;

    color: #fff;

    font-size: clamp(24px, 2.2vw, 31px);
    line-height: 1.55;
    font-weight: 700;
}

.story-copy .story-lead::first-letter {
    float: left;

    margin: 8px 10px 0 0;

    color: var(--yellow);

    font-family: var(--display);
    font-size: 75px;
    line-height: .68;
}

.story-copy blockquote {
    position: relative;

    margin: 45px -60px;
    padding: 30px 35px 30px 45px;

    color: #fff;

    border-left: 5px solid var(--pink);
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .12);

    background:
        linear-gradient(
            90deg,
            rgba(255, 32, 200, .11),
            transparent 75%
        );

    font-family: var(--body);
    font-size: clamp(23px, 2.2vw, 31px);
    font-weight: 700;
    line-height: 1.5;
}

.story-copy blockquote::before {
    content: "“";

    position: absolute;

    top: -29px;
    left: 10px;

    color: var(--pink);

    font-family: var(--body);
    font-size: 90px;
    line-height: 1;

    opacity: .45;
}

.story-copy .large-quote {
    margin-top: 65px;
    margin-bottom: 65px;

    color: var(--yellow);

    border-left-color: var(--yellow);

    background:
        linear-gradient(
            90deg,
            rgba(255, 240, 0, .10),
            transparent
        );

    font-size: clamp(30px, 4vw, 49px);
    line-height: 1.25;
}

.story-beat {
    margin: 36px 0 !important;

    color: #fff !important;

    font-size: 23px !important;
    font-weight: 900;
    line-height: 1.55 !important;
}

.story-ending-line {
    margin: 55px 0 30px !important;
    padding: 28px 0;

    color: var(--yellow) !important;

    border-top: 1px solid rgba(255, 240, 0, .55);
    border-bottom: 1px solid rgba(255, 240, 0, .55);

    font-size: clamp(23px, 2.4vw, 31px) !important;
    font-weight: 900;
    line-height: 1.5 !important;
}


/* =========================================================
   ARTICLE PHOTOGRAPHY
========================================================= */

.expanded-story figure {
    margin-top: 55px;
    margin-bottom: 100px;
}

.expanded-story figure img {
    display: block;
    width: 100%;
}

.expanded-story figcaption {
    margin-top: 10px;

    color: #999;

    font-family: var(--pixel);
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: 1px;
}

.story-photo-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 18px;

    width: min(1180px, calc(100% - 60px));

    margin: 50px auto 110px;
}

.story-photo-duo figure {
    margin: 0;
}

.story-photo-duo img {
    width: 100%;
    height: 610px;

    object-fit: cover;
}

.story-photo-duo.story-isabelle {
    grid-template-columns: .9fr 1.1fr;

    padding: 18px;

    background: #0c0c0c;

    border: 1px solid rgba(0, 210, 255, .35);

    box-shadow: 10px 10px 0 rgba(255, 32, 200, .18);
}

.story-photo-duo.story-isabelle img {
    height: 680px;
}

.story-feature-image {
    width: min(1020px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;
}

.story-feature-image img {
    max-height: 760px;

    object-fit: cover;
    object-position: center;
}

.story-wide-image {
    width: min(1240px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;
}

.story-wide-image img {
    width: 100%;
    max-height: 760px;

    object-fit: cover;
}

.story-portrait {
    width: min(570px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;
}

.story-portrait img {
    width: 100%;
    max-height: 780px;

    object-fit: cover;
}

.portrait-horizontal {
    width: min(980px, calc(100% - 60px));
}


/* =========================================================
   J BOW — QUIETER VISUAL TREATMENT
========================================================= */

.remembrance-section {
    margin-top: 60px;
}

.remembrance-section::before {
    content: "";

    position: absolute;

    top: -60px;
    left: 50%;

    width: min(900px, 90%);
    height: 1px;

    transform: translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .35),
            transparent
        );
}

.jbow-name {
    margin: 50px 0 !important;

    color: #fff !important;

    font-family: var(--display) !important;
    font-size: clamp(55px, 8vw, 105px) !important;
    line-height: .9 !important;
    letter-spacing: -3px;
}

.story-jbow {
    width: min(700px, calc(100% - 60px));

    margin-left: auto;
    margin-right: auto;

    padding: 18px;

    background: #0c0c0c;

    border: 1px solid rgba(255, 255, 255, .3);
}

.story-jbow img {
    max-height: 780px;

    object-fit: contain;

    background: #000;
}

.story-jbow figcaption {
    color: #fff;

    text-align: center;
    letter-spacing: 3px;
}

.remembrance-copy {
    padding-bottom: 90px;
}


/* =========================================================
   FINAL STORY SECTION
========================================================= */

.final-story-section {
    margin-top: 30px;
}

.final-jam-image {
    position: relative;
}

.final-jam-image::after {
    content: "AFTER THE LIST";

    position: absolute;

    right: -5px;
    bottom: -30px;

    padding: 8px 13px;

    background: var(--yellow);
    color: #000;

    font-family: var(--pixel);
    font-size: 18px;
    letter-spacing: 2px;
}

.story-final-line {
    margin: 80px 0 20px !important;

    color: #fff !important;

    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1.45 !important;
    font-weight: 700;
}

.story-final-line strong {
    display: block;

    margin-top: 16px;

    color: var(--yellow);

    font-family: var(--display);
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1;
}


/* =========================================================
   SUBTLE ARTICLE TEXTURE + OPEN ANIMATION
========================================================= */

.expanded-story::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    opacity: .13;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, .025) 1px,
            transparent 1px
        );

    background-size: 100% 5px;
}

.expanded-story > * {
    position: relative;
    z-index: 1;
}

@keyframes storyReveal {

    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.expanded-story:not([hidden]) {
    animation: storyReveal .65s ease both;
}


/* =========================================================
   BLOG TABLET
========================================================= */

@media (max-width: 1000px) {

    .blog-section {
        width: min(94%, 900px);
    }

    .blog-intro {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .article-card,
    .article-card.reverse {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .article-card.reverse .article-image,
    .article-card.reverse .article-content {
        order: initial;
    }

    .article-image,
    .article-image img {
        min-height: 480px;
        height: 480px;
    }

    .article-content {
        padding: 55px 40px;
    }

    .story-header {
        padding-left: 30px;
        padding-right: 30px;
    }

    .story-section {
        grid-template-columns: 70px minmax(0, 700px);
        gap: 25px;
    }

    .story-section-number {
        font-size: 50px;
    }

    .story-photo-duo img,
    .story-photo-duo.story-isabelle img {
        height: 520px;
    }
}


/* =========================================================
   BLOG MOBILE
========================================================= */

@media (max-width: 700px) {

    .blog-section {
        width: calc(100% - 28px);

        padding-top: 55px;
        padding-bottom: 80px;
    }

    .blog-intro {
        margin-bottom: 35px;
    }

    .blog-intro p {
        font-size: 21px;
    }

    .article-card {
        margin-bottom: 40px;

        box-shadow:
            5px 5px 0 rgba(255, 240, 0, .85),
            9px 9px 0 rgba(255, 32, 200, .3);
    }

    .article-image,
    .article-image img {
        min-height: 330px;
        height: 330px;
    }

    .article-content {
        padding: 42px 24px 45px;
    }

    .article-content h2 {
        font-size: 42px;
        letter-spacing: -1px;
    }

    .article-dek {
        font-size: 17px;
    }

    .expanded-story {
        width: calc(100% + 14px);

        margin-left: -7px;
        margin-top: 55px;
    }

    .story-header {
        padding: 65px 18px 50px;
    }

    .story-topline {
        display: grid;
        grid-template-columns: 1fr;

        gap: 5px;

        margin-bottom: 40px;

        text-align: left;
    }

    .story-kicker {
        font-size: 16px;
    }

    .story-header h2 {
        font-size: clamp(48px, 16vw, 78px);
        letter-spacing: -3px;
    }

    .story-subtitle {
        font-size: 19px;
    }

    .story-byline {
        flex-direction: column;
        gap: 3px;
    }

    .story-hero {
        width: calc(100% - 20px);
        height: 62vw;

        margin-bottom: 70px;
    }

    .story-hero figcaption {
        right: 8px;
        bottom: 8px;

        font-size: 12px;
    }

    .story-section,
    .story-section-continuation {
        display: block;

        width: calc(100% - 40px);

        padding-bottom: 35px;
    }

    .story-section-number {
        position: static;

        margin-bottom: 12px;

        font-size: 40px;
    }

    .story-copy h3 {
        margin-bottom: 30px;

        font-size: 39px;
    }

    .story-copy p {
        font-size: 17.5px;
        line-height: 1.75;
    }

    .story-copy .story-lead {
        font-size: 22px;
    }

    .story-copy .story-lead::first-letter {
        font-size: 62px;
    }

    .story-copy blockquote {
        margin: 38px -5px;
        padding: 26px 20px 26px 28px;

        font-size: 21px;
    }

    .story-copy .large-quote {
        font-size: 29px;
    }

    .story-photo-duo,
    .story-photo-duo.story-isabelle {
        grid-template-columns: 1fr;

        width: calc(100% - 20px);

        gap: 12px;

        margin-bottom: 70px;
        padding: 0;

        border: 0;

        box-shadow: none;
    }

    .story-photo-duo img,
    .story-photo-duo.story-isabelle img {
        height: auto;
        max-height: none;

        object-fit: contain;
    }

    .story-feature-image,
    .story-wide-image,
    .story-portrait,
    .story-jbow,
    .portrait-horizontal {
        width: calc(100% - 20px);

        margin-top: 35px;
        margin-bottom: 65px;
    }

    .story-feature-image img,
    .story-wide-image img,
    .story-portrait img {
        max-height: none;

        object-fit: contain;
    }

    .expanded-story figcaption {
        padding: 0 5px;

        font-size: 13px;
    }

    .jbow-name {
        font-size: 58px !important;
    }

    .final-jam-image::after {
        right: 0;
        bottom: -25px;

        font-size: 14px;
    }

    .story-final-line {
        margin-top: 55px !important;
    }
}

@media (max-width: 420px) {

    .article-image,
    .article-image img {
        height: 285px;
        min-height: 285px;
    }

    .article-content h2 {
        font-size: 36px;
    }

    .story-header h2 {
        font-size: 48px;
    }

    .story-copy h3 {
        font-size: 34px;
    }

    .story-copy p {
        font-size: 17px;
    }
}


/* =========================================================
   STORY 02 — IS GOD IS
   CENTERED STRUCTURAL LAYOUT
========================================================= */

.god-is-story .god-is-section {
    display: grid;

    grid-template-columns:
        95px
        minmax(0, 760px)
        95px;

    column-gap: 42px;

    width: min(calc(100% - 48px), 1000px);

    margin-left: auto;
    margin-right: auto;

    padding: 70px 0;
}

.god-is-story .god-is-section .story-section-number {
    grid-column: 1;

    position: static;

    width: auto;

    margin: 7px 0 0;

    text-align: right;
    line-height: 1;
}

.god-is-story .god-is-section .story-copy {
    grid-column: 2;

    width: 100%;
    max-width: 760px;
    min-width: 0;

    margin: 0;
    padding: 0;
}

.god-is-story .god-is-section .story-copy h3 {
    margin-top: 0;
    padding-left: 0;
}

.god-is-story .god-is-section .story-copy > p {
    width: 100%;
    max-width: none;

    margin-left: 0;
    margin-right: 0;
}

.god-is-story .story-section-continuation {
    width: min(calc(100% - 48px), 760px);

    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 900px) {

    .god-is-story .god-is-section {
        grid-template-columns:
            52px
            minmax(0, 680px)
            52px;

        column-gap: 20px;

        width: calc(100% - 36px);
    }
}

@media (max-width: 700px) {

    .god-is-story .god-is-section {
        display: block;

        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;

        padding: 50px 0;
    }

    .god-is-story .god-is-section .story-section-number {
        display: block;

        margin-bottom: 14px;

        text-align: left;
    }

    .god-is-story .god-is-section .story-copy {
        width: 100%;
        max-width: none;

        margin: 0;
    }
}


/* =========================================================
   STORY 03 — THE SEQUEL IN THE SCRAP
   Industrial / archival / tactile editorial system
========================================================= */

.article-card-bee {
    position: relative;
    overflow: hidden;
}

.article-card-bee {
    box-shadow:
        8px 8px 0 rgba(188, 188, 188, .85),
        16px 16px 0 rgba(255, 240, 0, .28);
}

.article-card-bee .article-content small {
    color: #d6d6d6;
    border-color: rgba(214, 214, 214, .75);
}

.article-card-bee .article-content h2 {
    color: #ffffff;
}

.bee-card-image {
    background: #111;
}

.bee-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.bee-story {
    --bee-paper: #e8e0cf;
    --bee-metal: #bcbcbc;
    --bee-charcoal: #121212;
    --bee-ink: #e8e8e8;
    --bee-muted: #aaa69b;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, .018) 1px,
            transparent 1px
        ),
        #090909;

    background-size: 28px 28px;

    border-top-color: var(--bee-metal);
    border-bottom-color: var(--yellow);
}

.bee-story::before {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    opacity: .2;

    background:
        radial-gradient(
            circle at 15% 10%,
            rgba(255, 255, 255, .12),
            transparent 20%
        ),
        radial-gradient(
            circle at 80% 45%,
            rgba(255, 255, 255, .07),
            transparent 25%
        );
}

.bee-story > * {
    position: relative;
    z-index: 1;
}


/* =========================================================
   STORY 03 HEADER
========================================================= */

.bee-story-header {
    max-width: 1100px;

    margin: 0 auto;
}

.bee-story-header .story-kicker {
    color: var(--bee-metal);
}

.bee-story-header .story-topline {
    border-bottom-color: rgba(188, 188, 188, .35);
}

.bee-story-title span {
    color: var(--yellow);

    -webkit-text-stroke: 1px rgba(0, 0, 0, .4);

    text-shadow:
        3px 3px 0 rgba(188, 188, 188, .3),
        6px 6px 0 rgba(255, 32, 200, .25);
}


/* =========================================================
   STORY 03 HERO
========================================================= */

.bee-hero {
    position: relative;

    width: min(1180px, calc(100% - 60px));
    height: auto;

    max-width: 1180px;

    margin: 0 auto 90px;

    overflow: visible;

    border: 0;
}

.bee-hero img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 760px;

    object-fit: cover;
    object-position: center;

    filter:
        contrast(1.03)
        saturate(.94);

    border: 1px solid rgba(232, 224, 207, .45);

    box-shadow:
        10px 10px 0 rgba(188, 188, 188, .18),
        18px 18px 0 rgba(255, 240, 0, .08);
}

.bee-hero::after {
    content: "ARCHIVE_03 // REUSE → FORM";

    position: absolute;

    top: -16px;
    right: 20px;

    padding: 6px 9px;

    background: #090909;

    border: 1px solid var(--bee-metal);

    color: var(--bee-metal);

    font-family: var(--pixel);
    font-size: 12px;
    letter-spacing: 1px;

    box-shadow: none;
}

.bee-hero figcaption,
.bee-photo figcaption,
.bee-process-grid figcaption,
.bee-runway-strip figcaption,
.bee-saori figcaption,
.bee-family-details figcaption,
.bee-sisyphus-final figcaption,
.bee-exhibit-graphic figcaption,
.bee-material-insert figcaption {
    margin-top: 9px;

    color: var(--bee-muted);

    font-family: var(--pixel);
    font-size: 15px;
    line-height: 1.35;
    letter-spacing: .8px;
}


/* =========================================================
   STORY 03 READING COLUMN
========================================================= */

.bee-section {
    position: relative;

    display: grid;

    grid-template-columns:
        90px
        minmax(0, 760px)
        90px;

    column-gap: 38px;

    width: min(calc(100% - 48px), 1000px);

    margin: 20px auto 0;

    padding: 70px 0 55px;
}

.bee-section .story-section-number {
    grid-column: 1;

    position: static;

    width: auto;

    margin: 7px 0 0;

    color: transparent;

    -webkit-text-stroke: 1px rgba(188, 188, 188, .7);

    text-align: right;
}

.bee-section .story-copy {
    grid-column: 2;

    display: block;

    width: 100%;
    max-width: 760px;
    min-width: 0;

    margin: 0;
    padding: 0;
}

.bee-section .story-copy h3 {
    margin-top: 0;

    color: var(--bee-paper);
}

.bee-section .story-copy h3 span {
    color: var(--yellow);
}

.bee-section .story-copy p {
    width: 100%;

    color: #ddd9d0;
}

.bee-section + .bee-section {
    border-top: 1px solid rgba(188, 188, 188, .16);
}

.bee-story .story-section-continuation {
    width: min(calc(100% - 48px), 760px);

    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   STORY 03 QUOTES
========================================================= */

.bee-story .story-copy blockquote {
    border-left-color: var(--bee-metal);

    background:
        linear-gradient(
            90deg,
            rgba(188, 188, 188, .11),
            transparent 78%
        );
}

.bee-story .story-copy blockquote::before {
    color: var(--yellow);
}

.bee-story .large-quote {
    color: var(--bee-paper);

    border-left-color: var(--yellow);

    background:
        linear-gradient(
            90deg,
            rgba(255, 240, 0, .08),
            transparent
        );
}


/* =========================================================
   STORY 03 PHOTOGRAPHY — GENERAL
========================================================= */

.bee-photo,
.bee-material-insert,
.bee-exhibit-graphic,
.bee-saori,
.bee-sisyphus-final {
    width: min(980px, calc(100% - 60px));

    margin: 55px auto 105px;
}

.bee-photo img,
.bee-material-insert img,
.bee-exhibit-graphic img,
.bee-saori img,
.bee-sisyphus-final img {
    display: block;

    width: 100%;
    height: auto;
    max-height: 820px;

    object-fit: contain;

    background: #0d0d0d;

    border: 1px solid rgba(232, 224, 207, .3);
}


/* =========================================================
   STORY 03 PROCESS GRID
========================================================= */

.bee-process-grid {
    display: grid;

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

    gap: 18px;

    width: min(1120px, calc(100% - 60px));

    margin: 50px auto 110px;
}

.bee-process-grid figure {
    margin: 0;
}

.bee-process-grid figure:first-child {
    grid-column: 1 / -1;
}

.bee-process-grid img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;

    border: 1px solid rgba(188, 188, 188, .32);

    filter: saturate(.92);
}

.bee-process-grid figure:first-child img {
    height: 560px;
}


/* =========================================================
   STORY 03 CHILDHOOD / ARCHIVE IMAGES
========================================================= */

.bee-childhood {
    display: grid;

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

    gap: 22px;

    width: min(940px, calc(100% - 60px));

    margin: 45px auto 110px;
}

.bee-childhood figure {
    margin: 0;

    padding: 10px 10px 34px;

    background: var(--bee-paper);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .38);
}

.bee-childhood figure:first-child {
    transform: rotate(-1.4deg);
}

.bee-childhood figure:last-child {
    transform: rotate(1.6deg);
}

.bee-childhood img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;
}

.bee-childhood figcaption {
    margin-top: 10px;

    color: #292929;

    font-family: var(--pixel);
    font-size: 14px;
    line-height: 1.3;
}


/* =========================================================
   STORY 03 RUNWAY STRIP
========================================================= */

.bee-runway-strip {
    display: grid;

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

    gap: 14px;

    width: min(1220px, calc(100% - 60px));

    margin: 55px auto 115px;

    padding: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(188, 188, 188, .08),
            rgba(255, 240, 0, .025)
        );

    border-top: 1px solid rgba(188, 188, 188, .35);
    border-bottom: 1px solid rgba(188, 188, 188, .35);
}

.bee-runway-strip figure {
    margin: 0;
}

.bee-runway-strip img {
    display: block;

    width: 100%;
    height: 520px;

    object-fit: cover;

    filter:
        contrast(1.03)
        saturate(.92);
}


/* =========================================================
   STORY 03 FAMILY / MATERIAL INHERITANCE
========================================================= */

.bee-family-details {
    display: grid;

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

    gap: 18px;

    width: min(1120px, calc(100% - 60px));

    margin: 55px auto 115px;
}

.bee-family-details figure {
    margin: 0;
}

.bee-family-details img {
    display: block;

    width: 100%;
    height: 390px;

    object-fit: cover;

    border: 1px solid rgba(232, 224, 207, .28);
}

.bee-saori {
    max-width: 850px;
}


/* =========================================================
   STORY 03 EXHIBIT LABEL / DOCUMENT
========================================================= */

.bee-exhibit-graphic {
    max-width: 760px;

    padding: 18px;

    background:
        linear-gradient(
            145deg,
            rgba(232, 224, 207, .07),
            rgba(255, 255, 255, .015)
        );

    border: 1px solid rgba(232, 224, 207, .35);

    box-shadow:
        12px 12px 0 rgba(188, 188, 188, .08);
}

.bee-exhibit-graphic img {
    max-height: none;

    background: var(--bee-paper);
}


/* =========================================================
   STORY 03 MATERIAL INSERT
========================================================= */

.bee-material-insert {
    max-width: 860px;
}

.bee-material-insert img {
    max-height: 680px;

    object-fit: cover;
}


/* =========================================================
   STORY 03 FINAL IMAGE
========================================================= */

.bee-sisyphus-final {
    position: relative;

    max-width: 1080px;

    margin-top: 75px;
    margin-bottom: 120px;
}

.bee-sisyphus-final img {
    max-height: 900px;

    object-fit: contain;

    border: 1px solid rgba(255, 240, 0, .35);

    box-shadow:
        10px 10px 0 rgba(255, 240, 0, .12),
        18px 18px 0 rgba(188, 188, 188, .07);
}

.bee-sisyphus-final::before {
    content: "FEELS LIKE A SISPHYIAN TASK";

    display: block;

    width: max-content;
    max-width: calc(100% - 30px);

    margin: 0 0 12px;

    padding: 7px 10px;

    color: var(--yellow);

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

    background: #090909;

    font-family: var(--pixel);
    font-size: 13px;
    letter-spacing: 1.2px;
}


/* =========================================================
   STORY 03 ENDING
========================================================= */

.bee-story .story-ending-line {
    color: var(--bee-paper) !important;

    border-top-color: rgba(188, 188, 188, .45);
    border-bottom-color: rgba(188, 188, 188, .45);
}

.bee-story .story-final-line strong {
    color: var(--yellow);
}


/* =========================================================
   STORY 03 TABLET
========================================================= */

@media (max-width: 900px) {

    .bee-section {
        grid-template-columns:
            55px
            minmax(0, 680px)
            55px;

        column-gap: 20px;

        width: calc(100% - 36px);
    }

    .bee-process-grid img {
        height: 380px;
    }

    .bee-process-grid figure:first-child img {
        height: 500px;
    }

    .bee-runway-strip img {
        height: 430px;
    }

    .bee-family-details {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .bee-family-details figure:last-child {
        grid-column: 1 / -1;
        width: min(50%, 520px);
        margin-left: auto;
        margin-right: auto;
    }
}


/* =========================================================
   STORY 03 MOBILE
========================================================= */

@media (max-width: 700px) {

    .article-card-bee {
        box-shadow:
            5px 5px 0 rgba(188, 188, 188, .75),
            9px 9px 0 rgba(255, 240, 0, .22);
    }

    .bee-hero {
        width: calc(100% - 20px);

        margin-bottom: 65px;
    }

    .bee-hero img {
        max-height: none;

        object-fit: contain;
    }

    .bee-hero::after {
        top: -13px;
        right: 8px;

        font-size: 10px;
    }

    .bee-section {
        display: block;

        width: calc(100% - 40px);

        margin-left: auto;
        margin-right: auto;

        padding: 50px 0 38px;
    }

    .bee-section .story-section-number {
        display: block;

        margin-bottom: 14px;

        text-align: left;
    }

    .bee-section .story-copy {
        width: 100%;
        max-width: none;

        margin: 0;
    }

    .bee-process-grid,
    .bee-childhood,
    .bee-runway-strip,
    .bee-family-details {
        grid-template-columns: 1fr;

        width: calc(100% - 20px);

        gap: 14px;

        margin-bottom: 75px;
    }

    .bee-process-grid figure:first-child,
    .bee-family-details figure:last-child {
        grid-column: auto;
    }

    .bee-family-details figure:last-child {
        width: 100%;
    }

    .bee-process-grid img,
    .bee-process-grid figure:first-child img,
    .bee-runway-strip img,
    .bee-family-details img,
    .bee-childhood img {
        height: auto;
        max-height: none;

        object-fit: contain;
    }

    .bee-childhood figure:first-child,
    .bee-childhood figure:last-child {
        transform: none;
    }

    .bee-photo,
    .bee-material-insert,
    .bee-exhibit-graphic,
    .bee-saori,
    .bee-sisyphus-final {
        width: calc(100% - 20px);

        margin-top: 40px;
        margin-bottom: 70px;
    }

    .bee-photo img,
    .bee-material-insert img,
    .bee-exhibit-graphic img,
    .bee-saori img,
    .bee-sisyphus-final img {
        max-height: none;

        object-fit: contain;
    }

    .bee-runway-strip {
        padding: 8px;
    }

    .bee-exhibit-graphic {
        padding: 10px;
    }

    .bee-sisyphus-final::before {
        font-size: 11px;
        line-height: 1.35;
    }
}


/* =========================================================
   BLOG EDITORIAL LAYOUT — CONSOLIDATED REPAIR
   Replaces the broken, unclosed final CSS block.
========================================================= */

.blog-section .blog-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: min(100%, 760px);
    max-width: 760px;
    margin: 30px auto 65px;
    text-align: center;
}
.blog-section .blog-intro > span,
.blog-section .blog-intro > p {
    display: block;
    width: 100%;
    margin: 0;
    text-align: center;
}

/* Never inherit the old 110px sidebar grid for section numbers. */
.expanded-story .story-section,
.expanded-story .story-section-continuation,
.expanded-story.bee-story .story-section {
    display: block;
    grid-template-columns: none;
    width: min(100%, 1100px);
    max-width: 1100px;
    margin: 0 auto;
    padding: 44px 0 28px;
}
.expanded-story .story-section-continuation { padding-top: 12px; }

/* Number + title are one centered horizontal heading unit. */
.expanded-story .story-section-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    justify-content: center;
    gap: clamp(10px, 2vw, 22px);
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 34px;
    padding: 0;
    text-align: center;
}
.expanded-story .story-section-heading > .story-section-number {
    position: static;
    inset: auto;
    display: block;
    flex: 0 0 auto;
    align-self: baseline;
    width: auto;
    margin: 0;
    padding: 0;
    transform: none;
    color: var(--yellow);
    -webkit-text-stroke: 0;
    font: 400 clamp(1.7rem, 3.7vw, 3.6rem)/1 var(--display);
    text-shadow: 0 0 16px rgba(255,240,0,.25);
}
.expanded-story .story-section-heading > .story-section-title {
    position: static;
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    width: auto;
    max-width: 850px;
    margin: 0;
    padding: 0;
    color: #fff;
    font: 400 clamp(1.85rem, 4.2vw, 4.2rem)/1.1 var(--display);
    letter-spacing: -.035em;
    text-align: left;
    text-transform: uppercase;
    overflow-wrap: normal;
}
.expanded-story .story-section-heading > .story-section-title span {
    color: var(--pink);
    text-shadow: 0 0 16px rgba(255,32,200,.22);
}

/* Center the actual article elements, not just the outer grid. */
.expanded-story .story-section > .story-copy,
.expanded-story .story-section-continuation > .story-copy,
.expanded-story .story-copy {
    display: block;
    grid-column: auto;
    width: min(100%, 760px);
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    text-align: center;
}
.expanded-story .story-copy p,
.expanded-story .story-copy h3,
.expanded-story .story-copy .story-emphasis,
.expanded-story .story-copy .story-lead {
    text-align: center;
}
.expanded-story .story-copy .story-lead::first-letter {
    float: none;
    margin: 0;
}
.expanded-story blockquote,
.expanded-story .story-copy blockquote {
    width: min(100%, 760px);
    max-width: 760px;
    margin: 35px auto;
    text-align: center;
}
.expanded-story figure,
.expanded-story .story-feature-image,
.expanded-story .story-wide-image,
.expanded-story .story-portrait,
.expanded-story .story-photo-duo {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.expanded-story figcaption { text-align: center; }
.expanded-story figure img { max-width: 100%; height: auto; }

/* Don't override story-specific photo arrangements unless necessary. */
@media (max-width: 700px) {
    .expanded-story .story-section,
    .expanded-story .story-section-continuation {
        width: 100%;
        padding: 32px 0 20px;
    }
    .expanded-story .story-section-heading {
        gap: 9px;
        margin-bottom: 25px;
    }
    .expanded-story .story-section-heading > .story-section-number {
        font-size: clamp(1.15rem, 5vw, 1.7rem);
    }
    .expanded-story .story-section-heading > .story-section-title {
        font-size: clamp(1.35rem, 6vw, 2.4rem);
        line-height: 1.15;
    }
    .expanded-story .story-copy { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-sparkle,
    .hero-star,
    .creative-icons span,
    .home-contact-star,
    .editorial-hero-copy::before,
    .expanded-story:not([hidden]) { animation: none !important; }
    .article-image img,
    .work-image-wrap img,
    .proposal-photo,
    .editorial-primary-button { transition: none !important; }
}
/* BEE ARTICLE — SCOPED EDITORIAL REFINEMENTS */
.article-card-bee .bee-card-image {overflow:hidden; background:#26252c; min-height:250px;}
.article-card-bee .bee-card-image img {display:block;width:100%;height:100%;min-height:250px;aspect-ratio:4/3;object-fit:cover;object-position:center 40%;}
.bee-story {overflow-x:clip;color:#f2f0eb;}
.bee-story .bee-story-header {width:min(100% - 36px,960px);margin-inline:auto;text-align:center;}
.bee-story .bee-story-title {max-width:100%;margin-inline:auto;text-wrap:balance;}
.bee-story .story-subtitle,.bee-story .story-byline {max-width:760px;margin-inline:auto;text-align:center;}
.bee-story .bee-hero {width:min(100% - 36px,980px);max-width:980px;margin:38px auto 60px;overflow:hidden;}
.bee-story .bee-hero img {display:block;width:100%;height:auto;max-height:680px;object-fit:contain;background:#18181a;}
.bee-story figure figcaption {color:#cac6c3;font-size:clamp(.7rem,1vw,.85rem);line-height:1.5;letter-spacing:.055em;text-align:center;padding:12px 8px 0;}
.bee-story .bee-section,.bee-story .story-section-continuation {display:block;width:min(100% - 36px,1020px);max-width:1020px;padding:34px 0 22px;margin:0 auto;}
.bee-story .story-section-heading {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:12px 22px;width:100%;max-width:100%;margin:0 auto 30px;text-align:center;}
.bee-story .story-section-heading > .story-section-title {flex:0 1 auto;max-width:min(100%,780px);text-align:center;text-wrap:balance;line-height:1.12;}
.bee-story .story-section-heading > .story-section-number {flex:0 0 auto;color:#f5f12b;}
.bee-story .story-copy {width:min(100%,740px);max-width:740px;margin-inline:auto;padding:0;}
.bee-story .story-copy p {max-width:100%;margin:0 auto 1.5em;line-height:1.8;color:#eeeae4;}
.bee-story .bee-photo,.bee-story .bee-material-insert,.bee-story .bee-exhibit-graphic,.bee-story .bee-saori,.bee-story .bee-sisyphus-final {width:min(100% - 36px,940px);max-width:940px;margin:28px auto 52px;text-align:center;}
.bee-story .bee-photo img,.bee-story .bee-material-insert img,.bee-story .bee-exhibit-graphic img,.bee-story .bee-saori img,.bee-story .bee-sisyphus-final img {display:block;width:100%;height:auto;max-height:760px;object-fit:contain;margin:0 auto;}
.bee-story .bee-process-grid,.bee-story .bee-childhood,.bee-story .bee-runway-strip,.bee-story .bee-family-details {width:min(100% - 36px,980px);max-width:980px;margin:30px auto 54px;gap:18px;align-items:start;}
.bee-story .bee-process-grid figure,.bee-story .bee-childhood figure,.bee-story .bee-runway-strip figure,.bee-story .bee-family-details figure {min-width:0;margin:0;}
.bee-story .bee-process-grid img,.bee-story .bee-childhood img,.bee-story .bee-runway-strip img,.bee-story .bee-family-details img {display:block;width:100%;height:auto;max-height:620px;object-fit:contain;}
@media(max-width:700px){
 .bee-story .story-section-heading{flex-direction:column;align-items:center;gap:10px;}
 .bee-story .story-section-heading > .story-section-title{width:100%;font-size:clamp(1.5rem,7vw,2.5rem);}
 .bee-story .bee-process-grid,.bee-story .bee-childhood,.bee-story .bee-runway-strip,.bee-story .bee-family-details{grid-template-columns:1fr;}
}


/* =============================================================
   BEE STORY — POSITIONING REPAIR / OCT 2026
   This is deliberately last so earlier layout experiments cannot
   shift the article into an old sidebar/grid configuration.
   ============================================================= */
.expanded-story.bee-story {
  --bee-content-width: 760px;
  --bee-media-width: 960px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: clamp(28px, 5vw, 72px) 0 80px;
  overflow-x: clip;
}
.expanded-story.bee-story *,
.expanded-story.bee-story *::before,
.expanded-story.bee-story *::after { box-sizing: border-box; }
.expanded-story.bee-story .bee-story-header,
.expanded-story.bee-story .bee-section,
.expanded-story.bee-story .story-section-continuation {
  position: relative;
  left: auto;
  right: auto;
  transform: none;
  float: none;
  display: block;
  grid-template-columns: none;
  width: min(100% - 48px, 1060px);
  max-width: 1060px;
  margin-left: auto;
  margin-right: auto;
}
.expanded-story.bee-story .bee-section {
  padding: 30px 0 18px;
}
.expanded-story.bee-story .bee-section.story-section-continuation {
  padding-top: 8px;
}
.expanded-story.bee-story .story-section-heading {
  position: relative;
  inset: auto;
  transform: none;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0 auto 32px;
  padding: 0;
  gap: 12px 20px;
  text-align: center;
}
.expanded-story.bee-story .story-section-heading > .story-section-number {
  position: static;
  inset: auto;
  transform: none;
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}
.expanded-story.bee-story .story-section-heading > .story-section-title {
  position: static;
  inset: auto;
  transform: none;
  flex: 0 1 auto;
  width: auto;
  max-width: min(100%, 800px);
  margin: 0;
  padding: 0;
  line-height: 1.12;
  text-align: center;
  text-wrap: balance;
}
.expanded-story.bee-story .story-copy {
  position: relative;
  inset: auto;
  transform: none;
  float: none;
  display: block;
  grid-column: auto;
  width: min(100%, var(--bee-content-width));
  max-width: var(--bee-content-width);
  margin: 0 auto;
  padding: 0;
  text-align: left;
}
.expanded-story.bee-story .story-copy p,
.expanded-story.bee-story .story-copy blockquote {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
.expanded-story.bee-story .bee-hero,
.expanded-story.bee-story .bee-photo,
.expanded-story.bee-story .bee-material-insert,
.expanded-story.bee-story .bee-exhibit-graphic,
.expanded-story.bee-story .bee-saori,
.expanded-story.bee-story .bee-sisyphus-final {
  position: relative;
  inset: auto;
  transform: none;
  float: none;
  display: block;
  width: min(100% - 48px, var(--bee-media-width));
  max-width: var(--bee-media-width);
  margin: 32px auto 56px;
  text-align: center;
}
.expanded-story.bee-story figure img {
  display: block;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.expanded-story.bee-story .bee-hero img,
.expanded-story.bee-story .bee-photo img,
.expanded-story.bee-story .bee-material-insert img,
.expanded-story.bee-story .bee-exhibit-graphic img,
.expanded-story.bee-story .bee-saori img,
.expanded-story.bee-story .bee-sisyphus-final img {
  width: 100%;
  height: auto;
  max-height: 780px;
  object-fit: contain;
}
.expanded-story.bee-story .bee-process-grid,
.expanded-story.bee-story .bee-childhood,
.expanded-story.bee-story .bee-runway-strip,
.expanded-story.bee-story .bee-family-details {
  position: relative;
  inset: auto;
  transform: none;
  float: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  width: min(100% - 48px, var(--bee-media-width));
  max-width: var(--bee-media-width);
  margin: 30px auto 58px;
  padding: 0;
}
.expanded-story.bee-story .bee-process-grid figure,
.expanded-story.bee-story .bee-childhood figure,
.expanded-story.bee-story .bee-runway-strip figure,
.expanded-story.bee-story .bee-family-details figure {
  grid-column: auto;
  position: static;
  transform: none;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.expanded-story.bee-story .bee-process-grid img,
.expanded-story.bee-story .bee-childhood img,
.expanded-story.bee-story .bee-runway-strip img,
.expanded-story.bee-story .bee-family-details img {
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
}
.expanded-story.bee-story figure figcaption {
  position: static;
  transform: none;
  width: 100%;
  margin: 0 auto;
  padding: 12px 6px 0;
  text-align: center;
}
@media (max-width: 700px) {
  .expanded-story.bee-story .bee-story-header,
  .expanded-story.bee-story .bee-section,
  .expanded-story.bee-story .story-section-continuation,
  .expanded-story.bee-story .bee-hero,
  .expanded-story.bee-story .bee-photo,
  .expanded-story.bee-story .bee-material-insert,
  .expanded-story.bee-story .bee-exhibit-graphic,
  .expanded-story.bee-story .bee-saori,
  .expanded-story.bee-story .bee-sisyphus-final,
  .expanded-story.bee-story .bee-process-grid,
  .expanded-story.bee-story .bee-childhood,
  .expanded-story.bee-story .bee-runway-strip,
  .expanded-story.bee-story .bee-family-details {
    width: calc(100% - 32px);
  }
  .expanded-story.bee-story .story-section-heading {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .expanded-story.bee-story .story-section-heading > .story-section-title {
    width: 100%;
    font-size: clamp(1.6rem, 7vw, 2.6rem);
  }
  .expanded-story.bee-story .bee-process-grid,
  .expanded-story.bee-story .bee-childhood,
  .expanded-story.bee-story .bee-runway-strip,
  .expanded-story.bee-story .bee-family-details {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }
}


/* BEE FEATURE — FINAL GALLERY AND PHOTO FIXES */
.expanded-story.bee-story .bee-runway-strip {
  display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  align-items: start !important; gap: clamp(10px,2vw,22px) !important;
  width: min(calc(100% - 40px),1120px) !important; max-width:1120px !important;
  margin: 36px auto 64px !important; padding: 0 !important;
}
.expanded-story.bee-story .bee-runway-strip > figure {
  display:flex !important; flex-direction:column !important; width:100% !important;
  margin:0 !important; min-width:0 !important; align-self:stretch !important;
}
.expanded-story.bee-story .bee-runway-strip > figure > img {
  display:block !important; width:100% !important; height:auto !important;
  aspect-ratio: 3 / 4 !important; object-fit:cover !important;
  object-position:center top !important; max-height:none !important;
  border:1px solid rgba(255,255,255,.18);
}
.expanded-story.bee-story .bee-runway-strip > figure > figcaption {
  display:block !important; position:static !important; width:100% !important;
  padding:14px 6px 0 !important; margin:0 !important; text-align:center !important;
  line-height:1.5 !important; letter-spacing:.06em !important;
}
.expanded-story.bee-story .bee-runway-strip > .bee-runway-credit {
  grid-column:1/-1 !important; text-align:center !important;
  margin:4px 0 0 !important; font-size:.75rem; letter-spacing:.1em;
}
.expanded-story.bee-story .bee-family-details {
  display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:22px !important; align-items:start !important;
}
.expanded-story.bee-story .bee-family-details > figure {
  display:flex !important; flex-direction:column !important; min-width:0 !important;
}
.expanded-story.bee-story .bee-family-details > figure > img {
  width:100% !important; height:auto !important; max-height:540px !important; object-fit:contain !important;
}
.expanded-story.bee-story .bee-family-details > .bee-family-credit {
  grid-column:1/-1 !important; text-align:center !important; margin:0 !important;
}
.expanded-story.bee-story .bee-hero { display:block !important; visibility:visible !important; opacity:1 !important; }
.expanded-story.bee-story .bee-hero > img { display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; height:auto !important; }
.article-card-bee .bee-card-image img {display:block !important; visibility:visible !important; opacity:1 !important;}
@media(max-width:720px){
 .expanded-story.bee-story .bee-runway-strip {grid-template-columns:minmax(0,1fr) !important; max-width:440px !important;}
 .expanded-story.bee-story .bee-runway-strip > figure > img {aspect-ratio:3/4 !important;}
 .expanded-story.bee-story .bee-family-details {grid-template-columns:minmax(0,1fr) !important;}
}

/* OCT 16: remove inherited image displacement and oversized blank hero */
.expanded-story.bee-story .bee-hero,
.expanded-story.bee-story .bee-hero img {
  transform: none !important;
  translate: none !important;
  inset: auto !important;
  float: none !important;
  clip-path: none !important;
}
.expanded-story.bee-story .bee-hero {
  display: block !important;
  position: relative !important;
  width: min(940px, calc(100% - 36px)) !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 28px auto 54px !important;
  padding: 0 !important;
  overflow: visible !important;
}
.expanded-story.bee-story .bee-hero img {
  position: static !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 720px !important;
  margin: 0 auto !important;
  object-fit: contain !important;
  object-position: center !important;
}
.expanded-story.bee-story .bee-hero figcaption {
  position: static !important;
  transform: none !important;
  margin: 14px auto 0 !important;
  text-align: center !important;
}


/* ============================================================
   BEE EDITORIAL LAYOUT — CONSOLIDATED FINAL OVERRIDES
   Applies only inside the Bee feature; other stories unchanged.
   ============================================================ */
#bee-story.expanded-story.bee-story {
  --bee-page: min(100% - 32px, 1040px);
  --bee-copy: min(100%, 740px);
  overflow-x: clip !important;
}
#bee-story.expanded-story.bee-story .bee-story-header {
  box-sizing: border-box !important;
  width: min(100% - 32px, 980px) !important;
  max-width: 980px !important;
  margin: 0 auto 32px !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  text-align: center !important;
}
#bee-story.expanded-story.bee-story .bee-story-title,
#bee-story.expanded-story.bee-story .story-subtitle,
#bee-story.expanded-story.bee-story .story-byline {
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  transform: none !important;
  text-align: center !important;
}
#bee-story.expanded-story.bee-story .story-subtitle {max-width: 850px !important;}
#bee-story.expanded-story.bee-story .bee-hero {
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  inset: auto !important;
  float: none !important;
  transform: none !important;
  width: min(100% - 32px, 960px) !important;
  max-width: 960px !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: auto !important;
  margin: 28px auto 54px !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
}
#bee-story.expanded-story.bee-story .bee-hero::before,
#bee-story.expanded-story.bee-story .bee-hero::after {content: none !important; display:none !important;}
#bee-story.expanded-story.bee-story .bee-hero > img {
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  clip-path: none !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 740px !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}
#bee-story.expanded-story.bee-story .bee-hero > figcaption,
#bee-story.expanded-story.bee-story figure > figcaption {
  display: block !important;
  position: static !important;
  inset: auto !important;
  transform: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 12px 8px 0 !important;
  background: transparent !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
#bee-story.expanded-story.bee-story .bee-section,
#bee-story.expanded-story.bee-story .story-section-continuation {
  box-sizing: border-box !important;
  position: static !important;
  transform: none !important;
  width: var(--bee-page) !important;
  max-width: 1040px !important;
  height: auto !important;
  margin: 0 auto !important;
  padding: 24px 0 !important;
}
#bee-story.expanded-story.bee-story .story-section-heading {
  display: flex !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 26px !important;
  padding: 0 !important;
  align-items: baseline !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px 20px !important;
  text-align: center !important;
}
#bee-story.expanded-story.bee-story .story-section-heading > .story-section-title {
  flex: 0 1 auto !important;
  width: auto !important;
  max-width: min(100%, 820px) !important;
  margin: 0 !important;
  transform: none !important;
  text-align: center !important;
  text-wrap: balance;
}
#bee-story.expanded-story.bee-story .story-section-heading > .story-section-number {
  position: static !important;
  transform: none !important;
  flex: 0 0 auto !important;
}
#bee-story.expanded-story.bee-story .story-copy {
  box-sizing: border-box !important;
  position: static !important;
  transform: none !important;
  width: var(--bee-copy) !important;
  max-width: 740px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
#bee-story.expanded-story.bee-story .story-copy p {max-width:100% !important;}
#bee-story.expanded-story.bee-story .bee-photo,
#bee-story.expanded-story.bee-story .bee-material-insert,
#bee-story.expanded-story.bee-story .bee-exhibit-graphic,
#bee-story.expanded-story.bee-story .bee-saori,
#bee-story.expanded-story.bee-story .bee-sisyphus-final {
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  width: min(100% - 32px, 940px) !important;
  max-width: 940px !important;
  height: auto !important;
  margin: 26px auto 52px !important;
  padding: 0 !important;
  overflow: visible !important;
}
#bee-story.expanded-story.bee-story .bee-photo > img,
#bee-story.expanded-story.bee-story .bee-material-insert > img,
#bee-story.expanded-story.bee-story .bee-exhibit-graphic > img,
#bee-story.expanded-story.bee-story .bee-saori > img,
#bee-story.expanded-story.bee-story .bee-sisyphus-final > img {
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 760px !important;
  object-fit: contain !important;
  margin: 0 auto !important;
}
#bee-story.expanded-story.bee-story .bee-process-grid,
#bee-story.expanded-story.bee-story .bee-childhood,
#bee-story.expanded-story.bee-story .bee-runway-strip,
#bee-story.expanded-story.bee-story .bee-family-details {
  box-sizing: border-box !important;
  display: grid !important;
  position: static !important;
  transform: none !important;
  float: none !important;
  width: min(100% - 32px, 1040px) !important;
  max-width: 1040px !important;
  height: auto !important;
  margin: 30px auto 56px !important;
  padding: 0 !important;
  align-items: start !important;
  gap: 20px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
#bee-story.expanded-story.bee-story .bee-runway-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}
#bee-story.expanded-story.bee-story .bee-runway-strip > .bee-runway-credit,
#bee-story.expanded-story.bee-story .bee-family-details > .bee-family-credit {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}
#bee-story.expanded-story.bee-story .bee-gallery-item {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  align-self: start !important;
  grid-column: auto !important;
}
#bee-story.expanded-story.bee-story .bee-gallery-item > img {
  box-sizing: border-box !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: contain !important;
  object-position: center top !important;
  margin: 0 auto !important;
  background: #1b1c1d !important;
}
/* Consistent portrait slots without cropping the three Reboot outfits. */
#bee-story.expanded-story.bee-story .bee-runway-strip .bee-gallery-item > img {
  height: clamp(250px, 35vw, 480px) !important;
  max-height: 480px !important;
  object-fit: contain !important;
  aspect-ratio: auto !important;
}
#bee-story.expanded-story.bee-story .bee-gallery-item > figcaption {
  position: static !important;
  margin: 0 !important;
  padding: 12px 6px 0 !important;
  text-align: center !important;
  line-height: 1.5 !important;
}
#bee-story.expanded-story.bee-story img.bee-image-unavailable {
  min-height: 100px !important;
  border: 1px dashed #ffed43 !important;
}
@media (max-width: 760px) {
  #bee-story.expanded-story.bee-story .bee-runway-strip,
  #bee-story.expanded-story.bee-story .bee-family-details,
  #bee-story.expanded-story.bee-story .bee-process-grid,
  #bee-story.expanded-story.bee-story .bee-childhood {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 520px !important;
  }
  #bee-story.expanded-story.bee-story .bee-runway-strip .bee-gallery-item > img {
    height: auto !important;
    max-height: 650px !important;
  }
  #bee-story.expanded-story.bee-story .story-section-heading {
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #bee-story.expanded-story.bee-story .story-section-heading > .story-section-title {
    width: 100% !important;
  }
}



/* =============================================================
   BEE / CHILDHOOD FAMILY-ARCHIVE GALLERY — 2026-10-18
   Scoped to this passage; does not change other story entries.
   ============================================================= */
#bee-story .bee-childhood-intro,
#bee-story .bee-childhood-outro {
  display: block !important;
  width: min(100% - 32px, 800px) !important;
  max-width: 800px !important;
  margin-inline: auto !important;
  text-align: center !important;
}
#bee-story .bee-childhood-intro .story-copy,
#bee-story .bee-childhood-outro .story-copy {
  display: block !important;
  width: 100% !important;
  max-width: 800px !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
  text-align: center !important;
}
#bee-story .bee-childhood-intro .story-copy p,
#bee-story .bee-childhood-outro .story-copy p {
  text-align: center !important;
  margin-inline: auto !important;
}
#bee-story .bee-childhood-diptych {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px 22px !important;
  align-items: start !important;
  justify-content: center !important;
  width: min(calc(100% - 32px), 760px) !important;
  max-width: 760px !important;
  margin: 28px auto 36px !important;
  padding: 0 !important;
  text-align: center !important;
}
#bee-story .bee-childhood-diptych > figure {
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 360px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}
#bee-story .bee-childhood-diptych > figure > img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 350px !important;
  height: auto !important;
  max-height: 370px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto !important;
}
#bee-story .bee-childhood-diptych > .bee-diptych-caption {
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  max-width: 680px !important;
  margin: 6px auto 0 !important;
  padding: 0 8px !important;
  text-align: center !important;
  font-size: clamp(12px, 1.1vw, 15px) !important;
  line-height: 1.5 !important;
}
@media (max-width: 600px) {
  #bee-story .bee-childhood-diptych {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(calc(100% - 32px), 360px) !important;
  }
  #bee-story .bee-childhood-diptych > .bee-diptych-caption {
    grid-column: 1 !important;
  }
}

/* =========================================================
   BEE — FINAL SISYPHUS IMAGE PAIR
========================================================= */

.bee-sisyphus-final-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    width: min(100%, 1100px);
    margin: 60px auto 40px;
    align-items: start;
}

.bee-sisyphus-final-pair .bee-sisyphus-final {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.bee-sisyphus-final-pair .bee-sisyphus-final img {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: contain;
}

.bee-sisyphus-final-pair .bee-sisyphus-final figcaption {
    margin-top: 14px;
    text-align: center;
}

/* MOBILE */
@media (max-width: 650px) {
    .bee-sisyphus-final-pair {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .bee-sisyphus-final-pair .bee-sisyphus-final img {
        height: auto;
        max-height: 650px;
    }
}


/* ================================================
   HEARST FEATURE — AWARD & NORTON PUBLICATION
================================================ */

.hearst-copy .hearst-award-title {
    font-family: var(--display);
    font-size: clamp(2.2rem, 4vw, 4.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
    text-transform: uppercase;
    overflow-wrap: normal;
    word-break: normal;
    margin: 0 0 24px;
}

.hearst-copy .hearst-award-title span {
    display: block;
    color: var(--yellow);
    font-size: clamp(2.6rem, 5vw, 5.5rem);
    margin-bottom: 8px;
}

.hearst-copy .hearst-publication {
    font-family: var(--display);
    font-size: clamp(1.15rem, 2vw, 2rem);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0;
    max-width: 650px;
    margin: 0 0 30px;
}

.hearst-copy .hearst-publication em {
    display: block;
    font-style: normal;
    color: var(--yellow);
    margin-top: 8px;
}

@media (max-width: 768px) {
    .hearst-copy .hearst-award-title {
        font-size: clamp(1.8rem, 7vw, 3rem);
    }

    .hearst-copy .hearst-award-title span {
        font-size: clamp(2.2rem, 9vw, 3.6rem);
    }

    .hearst-copy .hearst-publication {
        font-size: clamp(1rem, 4vw, 1.4rem);
    }
}


/* =========================================================
   HOME 2026 — COMPLETE PHOTO ESSAY + CREATIVE PRACTICE
   Scoped overrides: leave article and other-page styles intact.
========================================================= */
.home-redesign .proposal-collage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.8vw, 24px);
    align-items: start;
    width: 100%;
    min-width: 0;
    overflow: visible;
}
.home-redesign .proposal-collage::before { content: none; }
.home-redesign .proposal-collage .proposal-photo {
    position: static;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0;
    transform: none;
    animation: none;
    box-shadow: none;
}
.home-redesign .proposal-collage .proposal-photo:hover { transform: none; }
.home-redesign .proposal-collage .proposal-photo a { display: block; overflow: hidden; background: #17131f; }
.home-redesign .proposal-collage .proposal-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: contain;
    transition: transform .25s ease;
}
.home-redesign .proposal-collage .proposal-photo a:hover img { transform: scale(1.025); }
.home-redesign .proposal-collage .proposal-photo figcaption {
    position: static;
    margin: 10px 0 0;
    padding: 0;
    background: none;
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
}
.home-redesign .creative-practice {
    display: block;
    padding: clamp(70px, 9vw, 128px) clamp(24px, 6vw, 96px);
    background: linear-gradient(120deg, #271557, #34206f 55%, #10194d);
}
.home-redesign .creative-practice-inner { width: min(100%, 1180px); margin-inline: auto; }
.home-redesign .creative-practice-kicker {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    color: var(--yellow);
    font: 12px/1.5 var(--pixel);
    letter-spacing: .04em;
}
.home-redesign .creative-practice-kicker span:last-child { color: var(--blue); }
.home-redesign .creative-practice-body {
    display: grid;
    grid-template-columns: minmax(120px, .55fr) minmax(0, 1.45fr);
    gap: clamp(20px, 5vw, 90px);
    align-items: center;
    margin: clamp(35px, 6vw, 80px) 0;
}
.home-redesign .creative-practice-number {
    font-size: clamp(80px, 14vw, 190px);
    color: rgba(255,255,255,.12);
    line-height: 1;
    white-space: nowrap;
}
.home-redesign .creative-practice-copy { min-width: 0; }
.home-redesign .creative-practice-copy::before { content: none; }
.home-redesign .creative-practice h2 {
    max-width: 780px;
    margin: 0 0 32px;
    font-size: clamp(38px, 5.2vw, 76px);
    line-height: 1.02;
    letter-spacing: -.025em;
    overflow-wrap: normal;
}
.home-redesign .creative-practice-copy > p {
    max-width: 620px;
    margin: 0 0 17px;
    font-size: clamp(15px, 1.25vw, 18px);
    line-height: 1.7;
    color: rgba(255,255,255,.85);
}
.home-redesign .creative-practice .editorial-text-link { display: inline-block; margin-top: 12px; }
.home-redesign .creative-disciplines {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,.22);
    color: var(--yellow);
    font: 12px/1.5 var(--pixel);
    letter-spacing: .06em;
}
@media (max-width: 850px) {
    .home-redesign .creative-practice-body { grid-template-columns: 1fr; gap: 20px; }
    .home-redesign .creative-practice-number { font-size: clamp(72px, 16vw, 125px); }
    .home-redesign .proposal-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .home-redesign .proposal-collage { grid-template-columns: 1fr; }
    .home-redesign .creative-practice-kicker { font-size: 10px; }
    .home-redesign .creative-practice h2 { font-size: clamp(32px, 9vw, 48px); }
}
@media (prefers-reduced-motion: reduce) {
    .home-redesign .proposal-collage .proposal-photo img { transition: none; }
}


/* =========================================================
   HOME — FINAL REFINEMENTS (004 / 005 SIDE BY SIDE)
   These rules only affect the homepage.
========================================================= */
.home-redesign .home-final-duo {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: stretch;
    width: 100%;
    background: #11101b;
}
.home-redesign .home-final-duo > section {
    min-width: 0;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}
.home-redesign .home-final-duo .creative-practice {
    padding: clamp(40px, 4vw, 76px) clamp(24px, 4vw, 68px);
}
.home-redesign .home-final-duo .creative-practice-body {
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 32px 0;
}
.home-redesign .home-final-duo .creative-practice-number {
    font-size: clamp(64px, 7vw, 110px);
    line-height: .85;
}
.home-redesign .home-final-duo .creative-practice h2 {
    font-size: clamp(30px, 3.2vw, 54px);
    line-height: 1.12;
    margin-bottom: 24px;
}
.home-redesign .home-final-duo .creative-practice-kicker {
    font-size: 10px;
}
.home-redesign .home-final-duo .home-contact-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: clamp(40px, 4vw, 76px) clamp(24px, 4vw, 68px);
    border-left: 1px solid rgba(255,255,255,.16);
}
.home-redesign .home-final-duo .home-contact-cta h2 {
    font-size: clamp(36px, 4vw, 68px);
    line-height: 1.08;
    max-width: 100%;
}
.home-redesign .home-final-duo .home-contact-links {
    justify-content: flex-start;
    flex-wrap: wrap;
}
/* Present all nine photographs in order; no overlapping collage transforms. */
.home-redesign .proposal-collage {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.home-redesign .proposal-collage .proposal-photo { display: block; }
@media (max-width: 900px) {
    .home-redesign .home-final-duo { grid-template-columns: 1fr; }
    .home-redesign .home-final-duo .home-contact-cta {
        border-left: 0;
        border-top: 1px solid rgba(255,255,255,.16);
    }
}
@media (max-width: 700px) {
    .home-redesign .proposal-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
    .home-redesign .proposal-collage { grid-template-columns: 1fr; }
}


/* =========================================================
   HOMEPAGE PHOTO ESSAY — 2026-10-20 CORRECTIONS
   Natural image proportions, no unnecessary letterboxing.
========================================================= */
html:has(body.home-redesign),
body.home-redesign {
    overflow-y: auto;
    height: auto;
    max-height: none;
}
body.home-redesign .selected-work {
    overflow-x: clip;
    overflow-y: visible;
}
body.home-redesign .proposal-feature {
    grid-template-columns: minmax(240px, .55fr) minmax(0, 1.45fr);
    gap: clamp(26px, 4vw, 64px);
    align-items: start;
}
body.home-redesign .proposal-copy {
    position: sticky;
    top: 100px;
    min-width: 0;
}
body.home-redesign .proposal-collage {
    min-height: 0;
    padding: 0;
    align-items: start;
    gap: clamp(12px, 1.6vw, 22px);
}
body.home-redesign .proposal-collage .proposal-photo {
    background: #1b1b23;
    padding: 8px 8px 12px;
    border: 1px solid rgba(255,255,255,.12);
}
body.home-redesign .proposal-collage .proposal-photo a {
    background: transparent;
    overflow: visible;
}
body.home-redesign .proposal-collage .proposal-photo img {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    object-fit: contain;
    transform: none;
}
body.home-redesign .proposal-collage .proposal-photo a:hover img {
    transform: none;
}
body.home-redesign .proposal-collage .proposal-photo figcaption {
    margin-top: 9px;
    padding: 0 3px;
}
@media (max-width: 1000px) {
    body.home-redesign .proposal-feature { grid-template-columns: 1fr; }
    body.home-redesign .proposal-copy { position: static; }
}
@media (max-width: 560px) {
    body.home-redesign .proposal-collage { grid-template-columns: 1fr; }
}

/* Final homepage scroll safety rules */
html:has(body.home-page) { overflow-x: clip; overflow-y: auto !important; height: auto !important; }
body.home-page { overflow-x: clip; overflow-y: visible !important; height: auto !important; max-height: none !important; }
body.home-page .selected-work { overflow: visible !important; }
body.home-page .loading-screen.hidden { pointer-events: none !important; }


/* ==========================================
   MANGINE STORY — BLOCKQUOTE FIX
========================================== */

.bee-story .story-copy blockquote,
.bee-story .story-copy blockquote.large-quote {
    position: relative;
    display: block;
    max-width: 760px;
    margin: 2.5rem auto;
    padding: 1rem 0 1rem 1.5rem;

    background: transparent;
    border: none;
    border-left: 2px solid #e7ed3c;
    border-radius: 0;
    box-shadow: none;

    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.45rem);
    font-weight: 500;
    font-style: normal;
    line-height: 1.65;
    letter-spacing: -0.01em;
    color: #f5f5f5;
    text-align: left;
    text-transform: none;
}

/* Remove oversized decorative quotation marks */

.bee-story .story-copy blockquote::before,
.bee-story .story-copy blockquote::after,
.bee-story .story-copy blockquote.large-quote::before,
.bee-story .story-copy blockquote.large-quote::after {
    content: none !important;
    display: none !important;
}

/* Prevent nested text from inheriting oversized styling */

.bee-story .story-copy blockquote p {
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: inherit;
}

/* Mobile adjustments */

@media (max-width: 600px) {
    .bee-story .story-copy blockquote {
        margin: 2rem auto;
        padding: 0.75rem 0 0.75rem 1rem;
        font-size: 1.1rem;
    }
}


/* ============================================================
   SARAH.EXE / WORK ARCHIVE
   Page-specific stylesheet — load AFTER styles.css.
   All selectors are scoped to .work-redesign.
   ============================================================ */

.work-redesign {
  --wa-bg: #080a16;
  --wa-panel: #101429;
  --wa-border: rgba(255,255,255,.22);
  --wa-yellow: #fff000;
  --wa-pink: #ff20c8;
  --wa-cyan: #00d9ff;
  --wa-body: 'Space Grotesk',sans-serif;
  --wa-head: 'Oxanium',sans-serif;
  --wa-mono: 'Space Grotesk',sans-serif;
  background: var(--wa-bg);
  color: #f7f7fb;
  font-family: var(--wa-body);
}
.work-redesign .wa-page { width:100%; overflow:hidden; }
.work-redesign .wa-page :is(h1,h2) {font-family:var(--wa-head); font-weight:800; text-transform:uppercase;}
.work-redesign .wa-page :is(h3,p,figcaption) {font-family:var(--wa-body);}
.work-redesign .wa-page a:focus-visible,
.work-redesign .wa-page button:focus-visible {outline:2px solid var(--wa-yellow);outline-offset:4px;}
.work-redesign .wa-page img {display:block;width:100%;height:auto;}
.work-redesign .wa-page section[id] {scroll-margin-top:45px;}

/* Hero */
.work-redesign .wa-hero {position:relative; isolation:isolate; padding:clamp(75px,9vw,145px) clamp(22px,6.5vw,110px) 65px;
  background:radial-gradient(ellipse at 81% 18%,rgba(255,32,200,.23),transparent 46%),
             radial-gradient(ellipse at 15% 90%,rgba(0,217,255,.18),transparent 46%),#0a0b1b;
  border-bottom:2px solid var(--wa-pink);}
.work-redesign .wa-micro {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-bottom:17px;
  border-bottom:1px solid var(--wa-border);color:var(--wa-cyan);font:600 12px var(--wa-mono);letter-spacing:.12em;}
.work-redesign .wa-hero-pre {margin:65px 0 15px;color:var(--wa-pink);font-size:clamp(13px,1.4vw,17px);font-weight:700;letter-spacing:.15em;}
.work-redesign .wa-hero h1 {margin:0;max-width:1300px;font-size:clamp(62px,12.5vw,185px);line-height:.79;letter-spacing:-.08em;overflow-wrap:normal;}
.work-redesign .wa-hero h1 span {color:var(--wa-yellow);text-shadow:4px 4px 0 rgba(255,32,200,.55);}
.work-redesign .wa-hero h1 em {display:block;font-style:normal;color:#fff;}
.work-redesign .wa-hero-foot {display:flex;align-items:end;justify-content:space-between;gap:30px;flex-wrap:wrap;margin-top:58px;}
.work-redesign .wa-hero-foot p {max-width:610px;color:#d3d5e6;font-size:clamp(18px,2.3vw,27px);line-height:1.4;}
.work-redesign .wa-hero-foot a {padding:15px 19px;background:var(--wa-yellow);color:#070812;font-weight:800;letter-spacing:.05em;box-shadow:5px 5px 0 var(--wa-pink);}
.work-redesign .wa-hero-foot a:hover {transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--wa-cyan);}
.work-redesign .wa-ticker {margin-top:70px;padding:14px 0 0;border-top:1px solid var(--wa-border);color:rgba(255,255,255,.65);
  font:600 clamp(12px,1.5vw,17px) var(--wa-head);letter-spacing:.06em;line-height:1.9;}
.work-redesign .wa-ticker b {margin:0 .7em;color:var(--wa-pink);}

/* Sticky category index */
.work-redesign .wa-index {position:relative;z-index:3;display:flex;justify-content:center;flex-wrap:wrap;gap:0;
  background:#11132b;border-bottom:1px solid rgba(0,217,255,.55);}
.work-redesign .wa-index a {padding:18px clamp(11px,1.75vw,25px);font:700 12px var(--wa-head);letter-spacing:.075em;
  border-right:1px solid var(--wa-border);white-space:nowrap;}
.work-redesign .wa-index a:hover {color:#080a16;background:var(--wa-cyan);}

/* Section framework */
.work-redesign .wa-section {padding:clamp(80px,9vw,140px) clamp(22px,6.5vw,110px);
  background:radial-gradient(circle at 100% 0,rgba(125,47,225,.09),transparent 45%);border-bottom:1px solid var(--wa-border);}
.work-redesign .wa-section:nth-of-type(even) {background-color:#0c1023;}
.work-redesign .wa-section-head {max-width:1120px;margin-bottom:50px;}
.work-redesign .wa-section-head > span {display:block;margin-bottom:18px;color:var(--wa-cyan);font:700 13px var(--wa-head);letter-spacing:.13em;}
.work-redesign .wa-section-head h2 {margin:0 0 23px;font-size:clamp(46px,7.2vw,105px);line-height:.88;letter-spacing:-.055em;}
.work-redesign .wa-section-head h2 i {font-style:normal;color:var(--wa-pink);}
.work-redesign .wa-section-head > p {max-width:720px;color:#c6c9da;font-size:clamp(17px,1.7vw,21px);line-height:1.6;}
.work-redesign .wa-section-note {margin-top:24px;color:#aeb5d0;font-size:14px;}
.work-redesign .wa-section-note a {color:var(--wa-yellow);text-decoration:underline;text-underline-offset:4px;}

/* Journalism */
.work-redesign .wa-journal-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch;}
.work-redesign .wa-feature-card {min-width:0;display:flex;flex-direction:column;align-items:start;padding:clamp(25px,3vw,45px);
  border:1px solid var(--wa-border);background:linear-gradient(145deg,#181630,#0d1123);box-shadow:8px 8px 0 rgba(255,32,200,.11);}
.work-redesign .wa-card-top {display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;width:100%;padding-bottom:25px;
  color:var(--wa-cyan);font:700 12px var(--wa-head);letter-spacing:.065em;}
.work-redesign .wa-card-top span {color:var(--wa-yellow);}
.work-redesign .wa-feature-card h3 {margin:18px 0;font-size:clamp(30px,3vw,46px);line-height:1.1;font-weight:700;}
.work-redesign .wa-feature-card p {font-size:17px;line-height:1.7;color:#cdd0e0;}
.work-redesign .wa-feature-card > a {display:inline-block;margin-top:auto;padding-top:30px;color:var(--wa-yellow);font:700 14px var(--wa-head);letter-spacing:.06em;}
.work-redesign .wa-dare > img {width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--wa-border);}

/* Photography */
.work-redesign .wa-subhead {display:flex;align-items:end;justify-content:space-between;gap:25px;margin:5px 0 30px;}
.work-redesign .wa-subhead span {color:var(--wa-yellow);font:700 12px var(--wa-head);letter-spacing:.08em;}
.work-redesign .wa-subhead h3 {margin-top:10px;font-size:clamp(24px,3vw,40px);font-weight:700;}
.work-redesign .wa-subhead p {max-width:530px;color:#c3c9d7;font-size:15px;line-height:1.55;}
.work-redesign .wa-street-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:17px;align-items:start;}
.work-redesign .wa-photo {grid-column:span 2;min-width:0;margin:0;background:#141728;border:1px solid var(--wa-border);}
.work-redesign .wa-photo:nth-child(1), .work-redesign .wa-photo:nth-child(5) {grid-column:span 3;}
.work-redesign .wa-photo a {display:block;overflow:hidden;cursor:zoom-in;}
.work-redesign .wa-photo img {height:clamp(220px,29vw,420px);object-fit:cover;transition:transform .35s ease;}
.work-redesign .wa-photo a:hover img {transform:scale(1.035);}
.work-redesign .wa-photo figcaption {padding:13px 15px;color:#e8e7ef;font-size:13px;letter-spacing:.04em;}

/* Video */
.work-redesign .wa-video-grid {display:grid;grid-template-columns:1fr 1fr;gap:25px;}
.work-redesign .wa-video-card {min-width:0;background:#13162a;border:1px solid var(--wa-border);}
.work-redesign .wa-video-media {aspect-ratio:16/9;position:relative;background:#060710;overflow:hidden;}
.work-redesign .wa-video-media video,.work-redesign .wa-video-poster > a,.work-redesign .wa-video-poster img {display:block;width:100%;height:100%;object-fit:cover;}
.work-redesign .wa-video-poster > a {position:relative;}
.work-redesign .wa-video-poster a span {position:absolute;bottom:20px;left:20px;padding:12px 15px;background:var(--wa-yellow);color:#080a16;font-weight:800;}
.work-redesign .wa-video-copy {padding:28px 30px 35px;}
.work-redesign .wa-video-copy > span {color:var(--wa-cyan);font:700 12px var(--wa-head);letter-spacing:.08em;}
.work-redesign .wa-video-copy h3 {margin:15px 0;font-size:clamp(26px,3vw,41px);line-height:1.1;}
.work-redesign .wa-video-copy p {color:#cdd0df;font-size:16px;line-height:1.7;}
.work-redesign .wa-video-copy strong {display:block;margin-top:24px;color:var(--wa-yellow);font:700 12px var(--wa-head);letter-spacing:.075em;}
.work-redesign .wa-video-copy > a {display:inline-block;margin-top:17px;color:var(--wa-cyan);font-weight:700;}

/* Music */
.work-redesign .wa-music-grid {display:grid;grid-template-columns:1fr 1fr;gap:24px;}
.work-redesign .wa-music-card {min-width:0;padding:clamp(25px,3vw,43px);border:1px solid var(--wa-border);
  background:linear-gradient(135deg,#1b1640,#0d142a);}
.work-redesign .wa-track-num {margin-bottom:23px;color:var(--wa-cyan);font:700 12px var(--wa-head);letter-spacing:.1em;}
.work-redesign .wa-music-card h3 {font-size:clamp(31px,3.5vw,49px);margin-bottom:14px;font-weight:700;}
.work-redesign .wa-music-card p {color:#e0e0eb;line-height:1.6;font-size:17px;}
.work-redesign .wa-music-card small {display:block;margin-top:16px;color:#a9b0c6;line-height:1.55;}
.work-redesign .wa-audio-note {margin-top:28px;padding:20px 15px;border:1px dashed var(--wa-cyan);color:var(--wa-yellow);
  font:700 13px var(--wa-head);letter-spacing:.04em;}
.work-redesign .wa-music-card video {display:block;width:100%;max-height:430px;margin-top:25px;background:#04050b;}

/* Modeling */
.work-redesign .wa-model-grid {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:15px;}
.work-redesign .wa-model-frame {grid-column:span 2;min-width:0;margin:0;background:#17162a;border:1px solid var(--wa-border);}
.work-redesign .wa-model-frame:nth-child(4),.work-redesign .wa-model-frame:nth-child(5) {grid-column:span 3;}
.work-redesign .wa-model-frame img {height:clamp(280px,38vw,540px);object-fit:cover;object-position:center top;}
.work-redesign .wa-model-frame figcaption {padding:12px 15px;color:var(--wa-pink);font:700 12px var(--wa-head);letter-spacing:.08em;}

/* Digital / outro */
.work-redesign .wa-browser {max-width:1000px;border:1px solid rgba(0,217,255,.6);background:#0c0f20;box-shadow:12px 12px 0 rgba(255,32,200,.3);}
.work-redesign .wa-browser-bar {display:flex;justify-content:space-between;gap:16px;padding:13px 20px;border-bottom:1px solid var(--wa-border);
  background:#18203b;color:var(--wa-cyan);font:700 12px var(--wa-head);letter-spacing:.08em;}
.work-redesign .wa-browser-bar span:first-child {color:var(--wa-pink);letter-spacing:.3em;}
.work-redesign .wa-browser-inner {padding:clamp(30px,6vw,75px);background:radial-gradient(circle at 90% 5%,rgba(0,217,255,.1),transparent 55%);}
.work-redesign .wa-browser-inner > span {color:var(--wa-yellow);font:700 12px var(--wa-head);letter-spacing:.1em;}
.work-redesign .wa-browser-inner h3 {margin:20px 0;font-size:clamp(32px,5vw,70px);font-weight:700;line-height:1;}
.work-redesign .wa-browser-inner p {max-width:580px;font-size:18px;line-height:1.6;color:#d2d7e7;}
.work-redesign .wa-browser-inner a {display:inline-block;margin-top:30px;padding-bottom:5px;border-bottom:2px solid var(--wa-cyan);color:var(--wa-cyan);font-weight:700;}
.work-redesign .wa-outro {text-align:center;padding:clamp(90px,10vw,160px) 25px;background:linear-gradient(135deg,#211248,#061628);}
.work-redesign .wa-outro > span {color:var(--wa-cyan);font:700 12px var(--wa-head);letter-spacing:.1em;}
.work-redesign .wa-outro h2 {margin:20px 0;font-size:clamp(48px,9vw,120px);line-height:.9;}
.work-redesign .wa-outro h2 i {font-style:normal;color:var(--wa-yellow);}
.work-redesign .wa-outro p {font-size:18px;color:#d5d7df;}
.work-redesign .wa-outro a {display:inline-block;margin-top:30px;padding:15px 25px;background:var(--wa-pink);color:#05050c;font-weight:800;}

/* Optional accessible photo lightbox (work-redesign.js) */
.work-redesign .wa-lightbox[hidden] {display:none!important;}
.work-redesign .wa-lightbox {position:fixed;inset:0;z-index:11000;display:flex;align-items:center;justify-content:center;padding:70px 28px 45px;
  background:rgba(3,4,13,.95);}
.work-redesign .wa-lightbox figure {width:min(92vw,1100px);max-height:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:13px;}
.work-redesign .wa-lightbox img {width:auto;max-width:100%;max-height:76vh;object-fit:contain;}
.work-redesign .wa-lightbox figcaption {font-size:15px;color:#fff;text-align:center;}
.work-redesign .wa-lightbox-close {position:absolute;top:20px;right:24px;padding:9px 14px;border:1px solid var(--wa-yellow);
  background:#0d1024;color:var(--wa-yellow);font:700 16px var(--wa-head);cursor:pointer;}

@media(max-width:1000px) {
 .work-redesign .wa-journal-grid,.work-redesign .wa-video-grid,.work-redesign .wa-music-grid {grid-template-columns:1fr;}
 .work-redesign .wa-subhead {display:block;}
 .work-redesign .wa-subhead p {margin-top:15px;}
 .work-redesign .wa-photo,.work-redesign .wa-photo:nth-child(1),.work-redesign .wa-photo:nth-child(5) {grid-column:span 3;}
 .work-redesign .wa-model-frame,.work-redesign .wa-model-frame:nth-child(4),.work-redesign .wa-model-frame:nth-child(5) {grid-column:span 3;}
}
@media(max-width:600px) {
 .work-redesign .wa-hero h1 {font-size:clamp(53px,15vw,85px);letter-spacing:-.07em;}
 .work-redesign .wa-hero-pre {margin-top:42px;}
 .work-redesign .wa-hero-foot {margin-top:35px;}
 .work-redesign .wa-ticker {margin-top:40px;}
 .work-redesign .wa-section-head h2 {font-size:clamp(42px,12vw,65px);}
 .work-redesign .wa-index {justify-content:flex-start;}
 .work-redesign .wa-index a {font-size:11px;padding:13px 12px;}
 .work-redesign .wa-street-grid,.work-redesign .wa-model-grid {display:grid;grid-template-columns:1fr;}
 .work-redesign .wa-photo,.work-redesign .wa-photo:nth-child(1),.work-redesign .wa-photo:nth-child(5),
 .work-redesign .wa-model-frame,.work-redesign .wa-model-frame:nth-child(4),.work-redesign .wa-model-frame:nth-child(5) {grid-column:auto;}
 .work-redesign .wa-photo img {height:auto;max-height:520px;object-fit:contain;background:#080b16;}
 .work-redesign .wa-model-frame img {height:auto;max-height:640px;object-fit:contain;background:#080b16;}
 .work-redesign .wa-feature-card,.work-redesign .wa-video-copy,.work-redesign .wa-music-card {padding:23px;}
 .work-redesign .wa-browser-bar {font-size:9px;}
}


/* ============================================================
   WORK MOSAIC REVISION / NO EMPTY GAPS OR OUTSIDE CAPTIONS
   Override previous gallery tile rules at all viewport sizes.
   ============================================================ */
.work-redesign .wa-boots-thumbnail {
  display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;
  border:1px solid var(--wa-border);margin:12px 0 6px;
}
.work-redesign .wa-street-grid,
.work-redesign .wa-model-grid {
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,clamp(220px,28vw,410px));
  gap:0;width:100%;overflow:hidden;
  border:1px solid rgba(255,255,255,.35);background:#080a16;
}
.work-redesign .wa-street-grid .wa-photo,
.work-redesign .wa-model-grid .wa-model-frame {
  position:relative;grid-column:span 2;display:block;
  width:100%;height:100%;min-width:0;min-height:0;
  margin:0;padding:0;border:0;background:#080a16;overflow:hidden;
}
.work-redesign .wa-street-grid .wa-photo:nth-child(4),
.work-redesign .wa-street-grid .wa-photo:nth-child(5),
.work-redesign .wa-model-grid .wa-model-frame:nth-child(4),
.work-redesign .wa-model-grid .wa-model-frame:nth-child(5) {grid-column:span 3;}
.work-redesign .wa-photo a {display:block;width:100%;height:100%;overflow:hidden;}
.work-redesign .wa-street-grid .wa-photo img,
.work-redesign .wa-model-grid .wa-model-frame img {
  display:block;width:100%;height:100%;max-height:none;
  aspect-ratio:auto;object-fit:cover;object-position:center center;
  background:transparent;transition:transform .35s ease;
}
.work-redesign .wa-model-grid .wa-model-frame img {object-position:center 25%;}
.work-redesign .wa-street-grid .wa-photo:hover img,
.work-redesign .wa-model-grid .wa-model-frame:hover img {transform:scale(1.025);}
.work-redesign .wa-street-grid .wa-photo figcaption,
.work-redesign .wa-model-grid .wa-model-frame figcaption {
  position:absolute;bottom:0;left:0;right:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:4px;
  padding:30px clamp(10px,2vw,21px) 15px;
  color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.86));
  font-family:var(--wa-body);font-size:clamp(12px,1.15vw,15px);
  font-weight:700;line-height:1.35;letter-spacing:0;
}
.work-redesign .wa-street-grid figcaption small,
.work-redesign .wa-model-grid figcaption small {
  color:#fff000;font-family:var(--wa-head);font-size:clamp(10px,.85vw,12px);
  font-weight:700;line-height:1.3;letter-spacing:.035em;
}
@media(max-width:850px) {
  .work-redesign .wa-street-grid,
  .work-redesign .wa-model-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(3,clamp(200px,42vw,340px));
  }
  .work-redesign .wa-street-grid .wa-photo,
  .work-redesign .wa-model-grid .wa-model-frame,
  .work-redesign .wa-street-grid .wa-photo:nth-child(4),
  .work-redesign .wa-street-grid .wa-photo:nth-child(5),
  .work-redesign .wa-model-grid .wa-model-frame:nth-child(4),
  .work-redesign .wa-model-grid .wa-model-frame:nth-child(5) {grid-column:span 1;}
  .work-redesign .wa-street-grid .wa-photo:first-child,
  .work-redesign .wa-model-grid .wa-model-frame:first-child {grid-column:span 2;}
}
@media(max-width:520px) {
  .work-redesign .wa-street-grid,
  .work-redesign .wa-model-grid {
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:repeat(5,clamp(260px,95vw,480px));
  }
  .work-redesign .wa-street-grid .wa-photo,
  .work-redesign .wa-model-grid .wa-model-frame,
  .work-redesign .wa-street-grid .wa-photo:first-child,
  .work-redesign .wa-model-grid .wa-model-frame:first-child,
  .work-redesign .wa-street-grid .wa-photo:nth-child(4),
  .work-redesign .wa-street-grid .wa-photo:nth-child(5),
  .work-redesign .wa-model-grid .wa-model-frame:nth-child(4),
  .work-redesign .wa-model-grid .wa-model-frame:nth-child(5) {grid-column:1 / -1;}
}


/* HIDE AND SEEK / COVER ART */

.wa-album-cover {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 1 / 1;
  margin: 1.5rem auto 1rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.wa-album-cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wa-music-card audio {
  display: block;
  width: 100%;
  margin-top: 1rem;
}

/* SARAH.EXE / SUBTLE FINISHING TOUCHES
   Add AFTER styles.css and any page-specific stylesheets.
   No structural layouts, typography or brand colors are replaced. */

/* Accessible, consistent keyboard focus across the whole site */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid #e8ed43;
  outline-offset: 4px;
}

/* Tiny editorial sparkle, attached to existing section labels only */
:where(.section-label, .editorial-eyebrow, .wa-hero-pre,
       .proposal-eyebrow, .alter-kicker, .story-kicker) {
  position: relative;
}
:where(.section-label, .editorial-eyebrow, .wa-hero-pre,
       .proposal-eyebrow, .alter-kicker, .story-kicker)::after {
  content: '✧';
  display: inline-block;
  margin-inline-start: .55em;
  color: #f78fc5;
  font-size: .9em;
  vertical-align: .08em;
  opacity: .85;
}

/* Hover affordances without card movement or layout shift */
:where(.article-card, .wa-feature-card, .wa-video-card, .wa-music-card,
       .work-feature, .wa-browser) {
  transition: box-shadow .26s ease, border-color .26s ease;
}
@media (hover: hover) {
  :where(.article-card, .wa-feature-card, .wa-video-card,
         .wa-music-card, .work-feature, .wa-browser):hover {
    box-shadow: 0 0 0 1px rgba(247,143,197,.22),
                0 14px 40px rgba(10,8,24,.15);
  }
  /* A little brightness, no scaling/cropping changes */
  :where(.proposal-frame, .wa-photo, .wa-model-frame) img {
    transition: filter .3s ease;
  }
  :where(.proposal-frame, .wa-photo, .wa-model-frame):hover img {
    filter: brightness(1.065);
  }
}

/* Navigation retains its original placement and dimensions */
:where(.desktop-nav, .footer-nav) a {
  text-underline-offset: .35em;
  transition: color .2s ease, text-shadow .2s ease;
}
@media (hover: hover) {
  :where(.desktop-nav, .footer-nav) a:hover {
    text-shadow: 0 0 12px rgba(247,143,197,.32);
  }
}

/* Soft cue for links without changing existing button designs */
:where(.editorial-text-link, .proposal-link, .wa-section-note a,
       .footer-professional a) {
  transition: text-shadow .2s ease;
}
@media (hover: hover) {
  :where(.editorial-text-link, .proposal-link, .wa-section-note a,
         .footer-professional a):hover {
    text-shadow: 0 0 12px rgba(111,225,238,.38);
  }
}

/* Contact: refined field interaction, same sizing and spacing */
.contact-page .contact-form :is(input, textarea) {
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-page .contact-form :is(input, textarea):focus {
  box-shadow: 0 0 0 2px rgba(111,225,238,.12);
}

/* Alter Ego: restrained shine for a chosen look, no doll-layer changes */
@media (hover: hover) {
  .alter-ego-page .style-option:hover,
  body:has(.doll-customizer) .style-option:hover {
    box-shadow: 0 0 0 1px rgba(247,143,197,.25);
  }
}

/* Keep motion optional for visitors who prefer fewer effects */
@media (prefers-reduced-motion: reduce) {
  :where(.article-card, .wa-feature-card, .wa-video-card,
         .wa-music-card, .work-feature, .wa-browser,
         .desktop-nav a, .footer-nav a,
         .proposal-frame img, .wa-photo img, .wa-model-frame img,
         .contact-form input, .contact-form textarea) {
    transition: none !important;
  }
}


/* ==========================================================
   V2 / LITTLE INTERNET CHARMS
   Decorative CSS icons only: no external icons/fonts or JS.
   Every symbol is non-interactive and leaves layout unchanged.
   ========================================================== */

/* Work directory: six separate icons, paired with each subject */
.work-redesign .wa-index a::before {
  display: inline-block;
  margin-right: .48em;
  font-size: .94em;
  line-height: 1;
  color: #f78fc5;
  opacity: .9;
}
.work-redesign .wa-index a:nth-child(1)::before { content: '✎'; }
.work-redesign .wa-index a:nth-child(2)::before { content: '✧'; }
.work-redesign .wa-index a:nth-child(3)::before { content: '▷'; }
.work-redesign .wa-index a:nth-child(4)::before { content: '♫'; }
.work-redesign .wa-index a:nth-child(5)::before { content: '♡'; }
.work-redesign .wa-index a:nth-child(6)::before { content: '⌘'; }
.work-redesign .wa-index a:nth-child(even)::before { color: #6fe1ee; }

/* Work section headings: a different accent per medium */
.work-redesign .wa-section-head > span::after {
  display: inline-block;
  margin-left: .65em;
  font-size: 1.05em;
  color: #f78fc5;
  vertical-align: .02em;
}
.work-redesign #journalism .wa-section-head > span::after { content: '✎'; }
.work-redesign #photography .wa-section-head > span::after { content: '✦'; color: #6fe1ee; }
.work-redesign #film .wa-section-head > span::after { content: '▷'; }
.work-redesign #music .wa-section-head > span::after { content: '♫'; color: #6fe1ee; }
.work-redesign #modeling .wa-section-head > span::after { content: '♡'; }
.work-redesign #design .wa-section-head > span::after { content: '✳'; color: #6fe1ee; }

/* Tiny audio/video label charms; content and media stay put */
.work-redesign .wa-track-num::before {
  content: '♫';
  display: inline-block;
  margin-right: .5em;
  color: #f78fc5;
}
.work-redesign .wa-video-copy > span::before {
  content: '✦';
  display: inline-block;
  margin-right: .45em;
  color: #6fe1ee;
}

/* Home: complement the existing star decorations, not duplicate them */
.home-page .hearst-label::after {
  content: ' ✷';
  color: #f78fc5;
}
.home-page .work-type::before {
  content: '✧ ';
  color: #6fe1ee;
}
.home-page .creative-practice-kicker > span:first-child::after {
  content: ' ♡';
  color: #f78fc5;
}

/* Blog: a playful chapter marker outside the actual story copy */
.blog-page .blog-intro > span::after {
  content: ' ✧';
  color: #f78fc5;
}
.blog-page .article-content > small::before {
  content: '✦ ';
  color: #6fe1ee;
}
/* Exclude article paragraphs and quotations from decorative symbols. */

/* Alter Ego: closet-style accents without touching the doll layers */
body:has(.doll-customizer) .alter-kicker::before {
  content: '♡ ';
  color: #f78fc5;
}
body:has(.doll-customizer) .customize-heading h2::after {
  content: ' ✧';
  color: #f78fc5;
  font-size: .68em;
  vertical-align: .1em;
}
body:has(.doll-customizer) .doll-header > span:first-child::before {
  content: '✿ ';
  color: #6fe1ee;
}
body:has(.doll-customizer) .doll-name > span::before {
  content: '♡ ';
  color: #f78fc5;
}

/* Contact: small personal flourish, no form geometry changes */
.contact-page .contact-copy > span::after {
  content: ' ✳';
  color: #f78fc5;
}
.contact-page .contact-links a > span::before {
  content: '↗ ';
  color: #6fe1ee;
}

/* These marks are decorative, static and free of extra animations. */


/* ALTER EGO — SHARED SITE CHROME
   Load AFTER alter-ego-customizer.css and site-polish.css.
   Only shared shell components are targeted; the doll customizer is untouched. */

body.alter-ego-page .loading-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--black);
  transition: opacity .7s ease, visibility .7s ease;
}
body.alter-ego-page .loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
body.alter-ego-page .loading-screen .loading-logo {
  width: 180px;
  margin-bottom: 20px;
  animation: loadingFloat 3s ease-in-out infinite;
}
body.alter-ego-page .loading-screen .loading-logo img {
  display: block;
  width: 100%;
  height: auto;
}
body.alter-ego-page .loading-screen .loading-name {
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: 3px;
}
body.alter-ego-page .loading-screen .loading-status {
  margin-top: 10px;
  color: var(--yellow);
  font-family: var(--pixel);
  font-size: 20px;
}
body.alter-ego-page .loading-screen .loading-bar {
  width: min(450px, 80vw);
  height: 7px;
  margin-top: 30px;
  border: 1px solid var(--chrome-dark);
  background: #111217;
  overflow: hidden;
}
body.alter-ego-page .loading-screen .loading-bar-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--pink), var(--yellow));
  box-shadow: 0 0 15px var(--blue);
}
body.alter-ego-page .loading-screen .loading-percent {
  width: min(450px, 80vw);
  margin-top: 7px;
  text-align: right;
  color: var(--chrome);
  font-family: var(--pixel);
  font-size: 18px;
}

/* The shared HTML now uses .progress-system and .footer-main,
   so their original site-wide rules in styles.css apply naturally. */
@media (prefers-reduced-motion: reduce) {
  body.alter-ego-page .loading-screen .loading-logo { animation: none; }
}

/* ==========================================================
   FOOTER / CONSISTENT FULL-WIDTH BOTTOM ROW
   Replace earlier footer alignment patches with this block.
   Keeps both items at opposite edges of the footer, even
   when another page stylesheet sizes the bottom row.
   ========================================================== */
.site-footer {
    width: 100% !important;
    max-width: none !important;
}

.site-footer > .footer-bottom {
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;

    /* Center a viewport-wide strip even if an older page
       stylesheet constrains the element or its parent. */
    width: calc(100vw - 60px) !important;
    max-width: none !important;
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 30px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

.site-footer > .footer-bottom > :first-child {
    grid-column: 1 !important;
    justify-self: start !important;
    text-align: left !important;
    margin: 0 !important;
    min-width: 0;
}

.site-footer > .footer-bottom > :last-child {
    grid-column: 2 !important;
    justify-self: end !important;
    text-align: right !important;
    margin: 0 !important;
    min-width: 0;
}

@media (max-width: 800px) {
    .site-footer > .footer-bottom {
        width: calc(100vw - 40px) !important;
    }
}

@media (max-width: 420px) {
    .site-footer > .footer-bottom {
        gap: 10px !important;
        font-size: 12px;
    }
    .site-footer > .footer-bottom > :last-child {
        overflow-wrap: anywhere;
    }
}