/* =========================================================
   JUDE ANDREI — PORTFOLIO
   Premium editorial / creative direction
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&display=swap');


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

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

html {
    scroll-behavior: smooth;
}

body {
    background: #0d0d0c;
    color: #f1efe9;
    font-family: "Manrope", sans-serif;
    line-height: 1.5;
    overflow-x: hidden;
}

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

button,
a {
    -webkit-tap-highlight-color: transparent;
}


/* =========================
   VARIABLES
   ========================= */

:root {
    --bg: #0d0d0c;
    --surface: #151513;
    --surface-light: #1c1c19;

    --text: #f1efe9;
    --muted: #92928b;

    --line: rgba(241, 239, 233, 0.13);

    --accent: #d6ff4b;

    --mono: "DM Mono", monospace;

    --max-width: 1380px;
}


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

section {
    width: min(var(--max-width), calc(100% - 80px));
    margin: 0 auto;
}

.section-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}


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

.nav {
    width: min(var(--max-width), calc(100% - 80px));
    margin: 0 auto;

    height: 100px;

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

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

.logo {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.05em;
}

.logo span,
.footer-logo span {
    color: var(--accent);
}

.nav nav {
    display: flex;
    gap: 34px;
}

.nav nav a {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    color: var(--muted);

    transition: color 0.25s ease;
}

.nav nav a:hover {
    color: var(--text);
}

.nav-cta {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;

    border-bottom: 1px solid var(--text);
    padding-bottom: 4px;

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

.nav-cta:hover {
    color: var(--accent);
    border-color: var(--accent);
}


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

.hero {
    min-height: calc(100vh - 100px);

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

    padding: 120px 0;
}

.hero-label {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.13em;

    color: var(--accent);

    margin-bottom: 38px;
}

.hero h1 {
    max-width: 1100px;

    font-size: clamp(70px, 10vw, 150px);

    line-height: 0.9;
    letter-spacing: -0.075em;
    font-weight: 600;
}

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

.hero-description {
    max-width: 570px;

    margin-top: 50px;

    font-size: 18px;
    line-height: 1.7;

    color: #b7b6af;
}

.hero-actions {
    display: flex;
    gap: 14px;

    margin-top: 40px;
}

.button {
    padding: 15px 22px;

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

    text-transform: uppercase;
    letter-spacing: 0.08em;

    transition: all 0.25s ease;
}

.button-primary {
    background: var(--text);
    color: var(--bg);
}

.button-primary:hover {
    background: var(--accent);
    transform: translateY(-2px);
}

.button-secondary {
    border: 1px solid var(--line);
    color: var(--muted);
}

.button-secondary:hover {
    border-color: var(--text);
    color: var(--text);
}

.hero-note {
    margin-top: 70px;

    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    color: #666660;
}


/* =========================
   INTRO
   ========================= */

.intro {
    padding: 180px 0;

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

.intro-content {
    margin-top: 70px;

    display: grid;
    grid-template-columns: 1.2fr 0.8fr;

    gap: 100px;
}

.intro h2 {
    max-width: 800px;

    font-size: clamp(42px, 5vw, 76px);

    line-height: 1;
    letter-spacing: -0.06em;
    font-weight: 500;
}

.intro h2 em {
    color: var(--accent);
    font-style: normal;
}

.intro-content p {
    align-self: end;

    color: var(--muted);

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


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

.work {
    padding: 150px 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: end;

    margin-bottom: 70px;
}

.section-header p {
    max-width: 320px;

    font-size: 13px;
    color: var(--muted);
}

.work-grid {
    display: grid;

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

    gap: 70px 30px;
}

.work-card {
    cursor: pointer;
}

.work-media {
    aspect-ratio: 16 / 10;

    background: var(--surface);

    overflow: hidden;

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

    transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}

.work-card:hover .work-media {
    transform: translateY(-6px);
}

.media-placeholder {
    width: 100%;
    height: 100%;

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

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

    color: #55554f;

    letter-spacing: 0.12em;
}

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

    padding-top: 18px;

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

    margin-top: 18px;
}

.work-info h3 {
    font-size: 17px;
    font-weight: 500;
}

.work-info p {
    margin-top: 4px;

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

    color: var(--muted);

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.work-info > span {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
}


/* =========================
   WORK CASE STUDIES
   ========================= */

.work-case-study .work-story {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
}

.work-story > p {
    max-width: 620px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}

.work-story h4 {
    max-width: 620px;
    margin: 32px 0 14px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 500;
}

.work-role {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.work-role > span {
    display: block;
    margin-bottom: 9px;
    font-family: var(--mono);
    font-size: 9px;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.work-role strong {
    display: block;
    font-size: 14px;
    font-weight: 500;
}

.work-role p {
    max-width: 620px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.7;
}

.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 22px;
}

.work-tags span {
    padding: 6px 9px;
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 9px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.work-link {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-bottom: 1px solid var(--text);
    padding-bottom: 4px;
}

.work-link:hover {
    color: var(--accent);
    border-color: var(--accent);
}


/* =========================
   SERVICES
   ========================= */

.services {
    padding: 170px 0;

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

.services-intro {
    max-width: 900px;

    margin: 70px 0 100px;
}

.services-intro h2 {
    font-size: clamp(48px, 6vw, 86px);

    line-height: 0.95;
    letter-spacing: -0.06em;

    font-weight: 500;
}

.services-intro h2 span {
    color: var(--muted);
}

.services-intro p {
    max-width: 520px;

    margin-top: 45px;

    color: var(--muted);

    line-height: 1.8;
}

.service {
    display: grid;

    grid-template-columns: 80px 1fr 50px;

    gap: 40px;

    padding: 45px 0;

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

    transition: padding 0.3s ease;
}

.service:last-child {
    border-bottom: 1px solid var(--line);
}

.service:hover {
    padding-left: 15px;
}

.service-number {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
}

.service-main h3 {
    font-size: 32px;
    font-weight: 500;

    letter-spacing: -0.04em;
}

.service-main > p {
    max-width: 560px;

    margin-top: 12px;

    color: var(--muted);
}

.service-main ul {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 28px;

    list-style: none;
}

.service-main li {
    border: 1px solid var(--line);

    padding: 7px 11px;

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

    text-transform: uppercase;

    color: #a8a79f;
}

.service-arrow {
    font-size: 22px;

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

.service:hover .service-arrow {
    transform: translate(4px, -4px);
    color: var(--accent);
}


/* =========================
   PROCESS
   ========================= */

.process {
    padding: 160px 0;

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

.process-grid {
    display: grid;

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

    gap: 30px;

    margin-top: 80px;
}

.process-grid > div {
    padding-top: 20px;

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

.process-grid span {
    font-family: var(--mono);
    font-size: 10px;

    color: var(--accent);
}

.process-grid h3 {
    margin-top: 60px;

    font-size: 28px;
    font-weight: 500;

    letter-spacing: -0.04em;
}

.process-grid p {
    margin-top: 18px;

    max-width: 330px;

    color: var(--muted);

    line-height: 1.7;
}


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

.about {
    padding: 170px 0;

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

.about-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    margin-top: 80px;
}

.about-heading h2 {
    font-size: clamp(52px, 6vw, 90px);

    line-height: 0.92;

    letter-spacing: -0.07em;

    font-weight: 500;
}

.about-heading em {
    color: var(--accent);
    font-style: normal;
}

.about-text {
    padding-top: 10px;
}

.about-text > p {
    max-width: 550px;

    font-size: 17px;

    line-height: 1.8;

    color: #b6b5ae;

    margin-bottom: 25px;
}

.about-details {
    display: grid;

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

    gap: 20px;

    margin-top: 70px;

    padding-top: 25px;

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

.about-details strong,
.about-details span {
    display: block;
}

.about-details strong {
    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    color: var(--muted);

    letter-spacing: 0.1em;
}

.about-details span {
    margin-top: 9px;

    font-size: 13px;
}


/* =========================
   INTRO VIDEO
   ========================= */

.intro-video {
    padding: 150px 0;
}

.video-container {
    margin-top: 60px;

    aspect-ratio: 16 / 9;

    background: var(--surface);

    border: 1px solid var(--line);
}

.video-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    flex-direction: column;

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

    color: var(--muted);
}

.play-button {
    width: 70px;
    height: 70px;

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

    border-radius: 50%;

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

    margin-bottom: 20px;

    color: var(--accent);

    transition: transform 0.3s ease;
}

.video-container:hover .play-button {
    transform: scale(1.08);
}

.video-placeholder p {
    font-size: 18px;
}

.video-placeholder span {
    margin-top: 6px;

    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    color: #55554f;
}


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

.contact {
    padding: 180px 0;

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

.contact h2 {
    max-width: 1000px;

    margin-top: 70px;

    font-size: clamp(65px, 9vw, 130px);

    line-height: 0.9;

    letter-spacing: -0.075em;

    font-weight: 500;
}

.contact h2 span {
    display: block;

    color: var(--muted);
}

.contact > p {
    max-width: 470px;

    margin-top: 45px;

    color: var(--muted);

    line-height: 1.8;
}

.contact-button {
    display: inline-block;

    margin-top: 45px;

    padding: 17px 25px;

    background: var(--accent);

    color: var(--bg);

    font-family: var(--mono);

    font-size: 11px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    transition: transform 0.25s ease;
}

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


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

footer {
    width: min(var(--max-width), calc(100% - 80px));

    margin: 0 auto;

    padding: 35px 0;

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

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.footer-logo {
    font-size: 20px;
    font-weight: 700;
}

footer p {
    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    letter-spacing: 0.08em;

    color: var(--muted);
}

.footer-links {
    display: flex;

    gap: 20px;
}

.footer-links a {
    font-family: var(--mono);

    font-size: 9px;

    text-transform: uppercase;

    color: var(--muted);
}


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

@media (max-width: 800px) {

    section,
    .nav,
    footer {
        width: min(100% - 40px, var(--max-width));
    }

    .nav {
        height: 80px;
    }

    .nav nav {
        display: none;
    }

    .hero {
        min-height: auto;

        padding: 110px 0;
    }

    .hero h1 {
        font-size: clamp(58px, 16vw, 100px);
    }

    .hero-description {
        font-size: 16px;
    }

    .intro,
    .work,
    .services,
    .process,
    .about,
    .intro-video,
    .contact {
        padding: 100px 0;
    }

    .intro-content,
    .about-grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }

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

        gap: 50px;
    }

    .section-header {
        display: block;
    }

    .section-header p {
        margin-top: 20px;
    }

    .service {
        grid-template-columns: 40px 1fr 20px;

        gap: 15px;
    }

    .service-main h3 {
        font-size: 25px;
    }

    .process-grid {
        grid-template-columns: 1fr;

        gap: 60px;
    }

    .about-details {
        grid-template-columns: 1fr;
    }

    .contact h2 {
        font-size: clamp(58px, 15vw, 100px);
    }

    footer {
        flex-wrap: wrap;

        gap: 20px;
    }

    footer p {
        order: 3;

        width: 100%;
    }

}

/* =========================
   NOW.HERE CASE STUDY V2
   Instagram-style presentation system
   ========================= */

.nowhere-card {
    cursor: default;
}

.nowhere-identity {
    min-height: 170px;
    padding: 28px;
    border: 1px solid var(--line);
    background:
        radial-gradient(circle at 90% 10%, rgba(214,255,75,.05), transparent 32%),
        var(--surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.nowhere-identity-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nowhere-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 1px solid rgba(241,239,233,.17);
}

.nowhere-eyebrow,
.nowhere-index {
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent);
}

.nowhere-identity h3 {
    margin-top: 8px;
    font-size: clamp(30px, 3.2vw, 48px);
    line-height: .95;
    letter-spacing: -.055em;
    font-weight: 500;
}

.nowhere-identity p {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.nowhere-index {
    color: var(--muted);
    align-self: flex-start;
}

.nowhere-showcase {
    margin-top: 48px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
}

.showcase-piece + .showcase-piece {
    margin-top: 74px;
    padding-top: 46px;
    border-top: 1px solid var(--line);
}

.showcase-heading {
    margin-bottom: 24px;
}

.showcase-heading > span,
.artist-series-ready > span {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--accent);
    text-transform: uppercase;
}

.showcase-heading h5 {
    margin-top: 10px;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 500;
    letter-spacing: -.05em;
    line-height: 1;
}

.showcase-heading p {
    margin-top: 8px;
    font-family: var(--mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--muted);
}

/* ---------- shared phone frame ---------- */
.social-phone {
    position: relative;
    width: min(100%, 430px);
    margin: 0 auto;
    background: #050505;
    border: 1px solid rgba(241,239,233,.18);
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.phone-hardware {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
}

.phone-hardware span {
    display: block;
    width: 72px;
    height: 5px;
    border-radius: 999px;
    background: #1c1c1b;
}

.social-post-topbar {
    height: 58px;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #070707;
    border-top: 1px solid rgba(255,255,255,.025);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.social-user {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 9px;
}

.social-user img {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.18);
}

.social-user div {
    min-width: 0;
}

.social-user strong,
.social-user small {
    display: block;
}

.social-user strong {
    font-size: 10px;
    font-weight: 600;
    color: #f5f5f3;
}

.social-user small {
    margin-top: 1px;
    font-family: var(--mono);
    font-size: 7px;
    color: #787873;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.social-more {
    font-family: var(--mono);
    font-size: 14px;
    color: #c9c8c2;
    letter-spacing: .1em;
}

.social-post-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000;
}

.static-media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.social-post-actions {
    min-height: 48px;
    padding: 9px 14px 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f4f3ef;
}

.social-post-actions > div {
    display: flex;
    align-items: center;
    gap: 16px;
}

.social-post-actions span {
    font-size: 20px;
    line-height: 1;
}

.social-post-proof,
.social-post-caption {
    padding: 0 14px;
    color: #d8d7d1;
    font-size: 10px;
    line-height: 1.5;
}

.social-post-proof {
    margin-bottom: 6px;
}

.social-post-caption {
    padding-bottom: 16px;
}

.social-post-caption strong,
.social-post-proof strong {
    font-weight: 600;
    color: #f3f2ee;
}

.social-swipe-note {
    padding: 0 14px 18px;
    font-family: var(--mono);
    font-size: 7px;
    color: #666660;
    letter-spacing: .09em;
}

/* ---------- carousel inside social phone ---------- */
.social-phone-carousel {
    outline: none;
}

.carousel-viewport {
    touch-action: pan-y;
    cursor: grab;
}

.carousel-viewport:active {
    cursor: grabbing;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform .42s cubic-bezier(.2,.7,.2,1);
    will-change: transform;
}

.carousel-slide {
    min-width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

.carousel-slide img,
.carousel-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: rgba(8,8,8,.68);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(8px);
    z-index: 3;
    opacity: 0;
    transition: opacity .2s ease, border-color .2s ease, color .2s ease;
}

.social-phone-carousel:hover .carousel-arrow,
.social-phone-carousel:focus-within .carousel-arrow {
    opacity: 1;
}

.carousel-arrow:hover {
    color: var(--accent);
    border-color: var(--accent);
}

.carousel-prev { left: 10px; }
.carousel-next { right: 10px; }

.carousel-count {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(0,0,0,.7);
    color: #fff;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .06em;
    z-index: 3;
}

.carousel-dots {
    min-height: 18px;
    padding: 3px 14px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.carousel-dot {
    width: 5px;
    height: 5px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: #4b4b47;
    cursor: pointer;
}

.carousel-dot.is-active {
    background: var(--accent);
}

/* ---------- Reel / video phone ---------- */
.social-phone-reel {
    background: #000;
}

.reel-media-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.reel-media-stage video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

.reel-top-overlay,
.reel-bottom-overlay,
.reel-action-rail {
    position: absolute;
    z-index: 2;
    pointer-events: none;
}

.reel-top-overlay {
    left: 13px;
    right: 13px;
    top: 13px;
}

.reel-top-overlay .social-user {
    width: fit-content;
    padding: 6px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.46);
    backdrop-filter: blur(6px);
}

.reel-action-rail {
    right: 12px;
    bottom: 88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    color: #fff;
    text-shadow: 0 1px 7px rgba(0,0,0,.85);
}

.reel-action-rail span {
    font-size: 22px;
    line-height: 1;
}

.reel-bottom-overlay {
    left: 14px;
    right: 58px;
    bottom: 18px;
    color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.92);
}

.reel-bottom-overlay strong,
.reel-bottom-overlay span {
    display: block;
}

.reel-bottom-overlay strong {
    font-size: 10px;
    font-weight: 600;
}

.reel-bottom-overlay span {
    margin-top: 5px;
    font-size: 9px;
    color: rgba(255,255,255,.82);
}

.format-note {
    max-width: 430px;
    margin: 14px auto 0;
    font-size: 10px;
    line-height: 1.7;
    color: #696963;
}

.artist-series-ready {
    margin-top: 58px;
    padding: 24px 0 0;
    border-top: 1px solid var(--line);
}

.artist-series-ready p {
    max-width: 560px;
    margin-top: 10px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 800px) {
    .nowhere-identity {
        min-height: 140px;
        padding: 20px;
    }

    .nowhere-avatar {
        width: 54px;
        height: 54px;
    }

    .nowhere-identity-main {
        gap: 14px;
    }

    .social-phone {
        width: min(100%, 390px);
        border-radius: 28px;
    }

    .carousel-arrow {
        opacity: .78;
        width: 31px;
        height: 31px;
    }

    .format-note {
        font-size: 9px;
    }
}

/* =========================================================
   NOW.HERE — VIDEO COVERFLOW PROTOTYPE
   ========================================================= */

.video-deck-piece {
    overflow: visible;
}

.video-coverflow {
    --deck-card-width: min(76vw, 430px);
    position: relative;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
    padding: 34px 0 8px;
}

.video-coverflow-stage {
    position: relative;
    min-height: 790px;
    display: grid;
    place-items: center;
    perspective: 1400px;
    overflow: visible;
}

.video-coverflow-card {
    position: absolute;
    top: 0;
    left: 50%;
    width: var(--deck-card-width);
    transform-origin: 50% 50%;
    cursor: pointer;
    outline: none;
    transform:
        translateX(var(--coverflow-x, -50%))
        translateY(var(--coverflow-y, 48px))
        scale(var(--coverflow-scale, .82))
        rotateY(var(--coverflow-rotate, 0deg));
    z-index: var(--coverflow-z, 1);
    opacity: var(--coverflow-opacity, .42);
    filter:
        blur(var(--coverflow-blur, 2.2px))
        brightness(var(--coverflow-brightness, .46))
        saturate(var(--coverflow-saturation, .7));
    transition:
        transform .56s cubic-bezier(.18,.78,.2,1),
        opacity .42s ease,
        filter .42s ease;
    will-change: transform, filter, opacity;
}

.video-coverflow-card.is-active {
    cursor: default;
}

.video-coverflow-card .social-phone {
    width: 100%;
    margin: 0;
    box-shadow: 0 34px 100px rgba(0,0,0,.72);
    transition: box-shadow .42s ease, border-color .42s ease;
}

.video-coverflow-card:not(.is-active) .social-phone {
    box-shadow: 0 22px 56px rgba(0,0,0,.56);
}

.video-coverflow-card.is-active .social-phone {
    border-color: rgba(214,255,75,.28);
    box-shadow:
        0 42px 120px rgba(0,0,0,.82),
        0 0 0 1px rgba(214,255,75,.06);
}

.video-coverflow-card:not(.is-active) .reel-media-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: rgba(0,0,0,.14);
    pointer-events: none;
}

.video-coverflow-card video {
    pointer-events: none;
}

.video-coverflow-card.is-active video {
    pointer-events: auto;
}

.video-hover-hint {
    position: absolute;
    left: 50%;
    bottom: 66px;
    z-index: 4;
    transform: translateX(-50%);
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    color: rgba(255,255,255,.72);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: opacity .2s ease;
    pointer-events: none;
}

.video-coverflow-card.is-active:hover .video-hover-hint {
    opacity: 0;
}

.video-coverflow-meta {
    width: min(100%, 620px);
    margin: 4px auto 0;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.video-coverflow-meta > div {
    min-width: 0;
}

.video-coverflow-count {
    display: block;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .12em;
    color: var(--accent);
}

.video-coverflow-title {
    display: block;
    margin-top: 7px;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -.03em;
}

.video-coverflow-meta small {
    display: block;
    margin-top: 6px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.video-coverflow-nav {
    width: 42px;
    height: 42px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: rgba(13,13,12,.88);
    color: var(--text);
    font-size: 15px;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.video-coverflow-nav:hover {
    color: var(--accent);
    border-color: var(--accent);
    transform: translateY(-2px);
}

@media (max-width: 800px) {
    .video-coverflow {
        --deck-card-width: min(79vw, 360px);
        padding-top: 24px;
    }

    .video-coverflow-stage {
        min-height: 680px;
    }

    .video-coverflow-meta {
        width: min(100%, 430px);
        grid-template-columns: 38px 1fr 38px;
        gap: 10px;
    }

    .video-coverflow-nav {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .video-coverflow-card {
        transition: opacity .2s ease, filter .2s ease;
    }
}

/* Instagram project link */
.work-link-instagram {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.instagram-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.work-link-instagram:hover .instagram-icon {
    transform: translateY(-1px) scale(1.05);
    opacity: 1;
}

.work-link-arrow {
    transition: transform 0.25s ease;
}

.work-link-instagram:hover .work-link-arrow {
    transform: translate(2px, -2px);
}


/* =========================================================
   PORTFOLIO VIDEO — CUSTOM CONTROLS
   ========================================================= */

.reel-media-stage {
    cursor: pointer;
}

.portfolio-video-controls {
    position: absolute;
    left: 50%;
    bottom: 52px;
    z-index: 8;
    transform: translate(-50%, 6px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 999px;
    background: rgba(8,8,8,.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 40px rgba(0,0,0,.38);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .2s ease,
        transform .26s cubic-bezier(.2,.7,.2,1),
        visibility .2s ease;
}

.video-coverflow-card.is-active .portfolio-video-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.video-coverflow-card.is-active .reel-media-stage.controls-hidden .portfolio-video-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 6px);
}

.video-control-button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.86);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}

.video-control-button:hover,
.video-control-button:focus-visible {
    background: rgba(255,255,255,.09);
    color: var(--accent);
    outline: none;
}

.video-control-button:active {
    transform: scale(.94);
}

.video-control-button svg {
    width: 15px;
    height: 15px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.video-control-button .icon-fill {
    fill: currentColor;
    stroke: none;
}

.video-volume-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.video-volume-panel {
    width: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    transition: width .25s ease, opacity .18s ease;
}

.video-volume-wrap.is-open .video-volume-panel {
    width: 82px;
    opacity: 1;
}

.video-volume-slider {
    width: 70px;
    height: 2px;
    margin: 0 6px 0 2px;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 99px;
    background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--volume-level, 70%),
        rgba(255,255,255,.22) var(--volume-level, 70%),
        rgba(255,255,255,.22) 100%
    );
    cursor: pointer;
}

.video-volume-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--text);
    box-shadow: 0 0 0 3px rgba(13,13,12,.45);
}

.video-volume-slider::-moz-range-thumb {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: var(--text);
}

.video-control-divider {
    width: 1px;
    height: 18px;
    margin: 0 1px;
    background: rgba(255,255,255,.12);
}

.video-control-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
    padding: 5px 7px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 6px;
    background: rgba(8,8,8,.88);
    color: rgba(255,255,255,.72);
    font-family: var(--mono);
    font-size: 7px;
    line-height: 1;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease, transform .16s ease;
}

.video-control-button:hover .video-control-tooltip,
.video-control-button:focus-visible .video-control-tooltip {
    opacity: 1;
    transform: translate(-50%, 0);
}

.video-control-button {
    position: relative;
}

.video-coverflow-card.is-active .reel-media-stage:hover .video-hover-hint,
.video-coverflow-card.is-active .reel-media-stage:focus-within .video-hover-hint {
    opacity: 0;
}

@media (max-width: 800px) {
    .portfolio-video-controls {
        bottom: 54px;
        padding: 5px;
        gap: 3px;
    }

    .video-control-button {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }

    .video-volume-wrap.is-open .video-volume-panel {
        width: 72px;
    }

    .video-volume-slider {
        width: 60px;
    }

    .video-control-tooltip {
        display: none;
    }
}


/* Video edit descriptions */
.video-coverflow-description {
    max-width: 520px;
    margin: 8px auto 0;
    color: #aaa9a2;
    font-size: 11px;
    line-height: 1.65;
}

.video-coverflow-meta small {
    display: block;
    margin-top: 8px;
}

/* Keep controls readable but discreet while paused; they auto-hide during playback. */
.video-coverflow-card.is-active .reel-media-stage:not(.controls-hidden) .portfolio-video-controls {
    opacity: 1;
}

@media (max-width: 800px) {
    .video-coverflow-description {
        max-width: 330px;
        font-size: 10px;
    }
}


/* =========================================================
   PORTFOLIO VIDEO — PLAYER UX V5
   Auto-hide controls · ±5 sec · hold +5 for 2× · sound hint
   ========================================================= */

.video-skip-label {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: -.03em;
    color: currentColor;
}

.video-speed-badge,
.video-sound-hint {
    position: absolute;
    z-index: 9;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.94);
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(7,7,7,.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: var(--text);
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .1em;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

.video-speed-badge.is-visible,
.video-sound-hint.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.video-speed-badge {
    top: 17%;
    color: var(--accent);
}

.video-sound-hint {
    top: 50%;
    color: rgba(255,255,255,.86);
}

/* The control capsule should disappear completely once playback settles. */
.video-coverflow-card.is-active .reel-media-stage.controls-hidden .portfolio-video-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 8px) scale(.985);
}

.portfolio-video-controls {
    transition:
        opacity .24s ease,
        transform .28s cubic-bezier(.2,.7,.2,1),
        visibility .24s ease;
}

/* Give the larger control set a little breathing room without overpowering the phone frame. */
.portfolio-video-controls {
    max-width: calc(100% - 22px);
}

@media (max-width: 800px) {
    .portfolio-video-controls {
        gap: 1px;
        padding: 4px;
    }

    .video-control-button {
        width: 31px;
        height: 31px;
        flex-basis: 31px;
    }

    .video-control-divider {
        margin: 0;
    }

    .video-skip-label {
        font-size: 8px;
    }

    .video-volume-wrap.is-open .video-volume-panel {
        width: 62px;
    }

    .video-volume-slider {
        width: 51px;
    }
}

/* =========================================================
   PORTFOLIO VIDEO — PLAYER UX V6
   Gesture seeking · hold sides for 2× · persistent playback
   ========================================================= */

/* ±5 sec is now a gesture, so keep the visible control pill minimal. */
.portfolio-video-controls {
    gap: 4px;
}

.video-gesture-feedback {
    position: absolute;
    z-index: 12;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.92);
    min-width: 72px;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 999px;
    background: rgba(7,7,7,.74);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    color: rgba(255,255,255,.9);
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1;
    letter-spacing: .10em;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    transition: opacity .16s ease, transform .18s cubic-bezier(.2,.7,.2,1), visibility .16s ease;
}

.video-gesture-feedback.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.video-gesture-feedback[data-kind="speed"] {
    color: var(--accent);
}

/* Side zones remain visually invisible; pointer behavior feels like Safari/iPhone video. */
.video-coverflow-card.is-active .reel-media-stage {
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
}

/* The active edit keeps playing when the pointer leaves; only the controls fade. */
.video-coverflow-card.is-active .reel-media-stage.controls-hidden {
    cursor: none;
}

@media (hover: none) {
    .video-coverflow-card.is-active .reel-media-stage.controls-hidden {
        cursor: default;
    }
}

@media (max-width: 800px) {
    .video-gesture-feedback {
        min-width: 66px;
        padding: 8px 11px;
        font-size: 8px;
    }
}

/* =========================================================
   MICRO-INTERACTIONS V7
   Restrained motion + lime feedback for interactive elements
   ========================================================= */

:root {
    --accent-glow: rgba(214,255,75,.20);
    --accent-glow-soft: rgba(214,255,75,.08);
    --ease-premium: cubic-bezier(.2,.75,.2,1);
}

/* Keep hover feedback intentional: only devices with a real hover pointer. */
@media (hover: hover) and (pointer: fine) {
    /* Navigation: quiet underline sweep instead of loud color changes. */
    .nav nav a,
    .footer-links a {
        position: relative;
    }

    .nav nav a::after,
    .footer-links a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -7px;
        width: 100%;
        height: 1px;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: right center;
        transition: transform .28s var(--ease-premium);
    }

    .nav nav a:hover::after,
    .footer-links a:hover::after {
        transform: scaleX(1);
        transform-origin: left center;
    }

    .logo {
        transition: transform .28s var(--ease-premium), letter-spacing .28s var(--ease-premium);
    }

    .logo:hover {
        transform: translateY(-2px);
        letter-spacing: -.035em;
    }

    .logo:hover span,
    .footer-logo:hover span {
        text-shadow: 0 0 18px var(--accent-glow);
    }

    /* Main CTAs: lift + restrained halo. */
    .button,
    .contact-button {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .button::before,
    .contact-button::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.18) 50%, transparent 80%);
        transform: translateX(-125%);
        transition: transform .55s var(--ease-premium);
    }

    .button:hover::before,
    .contact-button:hover::before {
        transform: translateX(125%);
    }

    .button-primary:hover,
    .contact-button:hover {
        box-shadow: 0 12px 38px var(--accent-glow);
    }

    .button-secondary:hover {
        border-color: rgba(214,255,75,.55);
        color: var(--accent);
        box-shadow: inset 0 0 0 1px rgba(214,255,75,.08), 0 10px 30px rgba(0,0,0,.22);
    }

    /* Tags read as supporting metadata, so the effect stays very subtle. */
    .work-tags span,
    .service-main li {
        transition:
            color .22s ease,
            border-color .22s ease,
            background .22s ease,
            transform .24s var(--ease-premium),
            box-shadow .22s ease;
    }

    .work-tags span:hover,
    .service-main li:hover {
        color: var(--accent);
        border-color: rgba(214,255,75,.45);
        background: rgba(214,255,75,.035);
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(0,0,0,.24);
    }

    /* Case-study identity: tiny lift + identity glow, not a big neon box. */
    .nowhere-identity {
        transition:
            transform .36s var(--ease-premium),
            border-color .3s ease,
            box-shadow .3s ease,
            background .35s ease;
    }

    .nowhere-identity:hover {
        transform: translateY(-3px);
        border-color: rgba(214,255,75,.24);
        box-shadow: 0 22px 55px rgba(0,0,0,.28), 0 0 34px rgba(214,255,75,.035);
        background:
            radial-gradient(circle at 90% 10%, rgba(214,255,75,.085), transparent 34%),
            var(--surface);
    }

    .nowhere-avatar {
        transition: transform .34s var(--ease-premium), border-color .28s ease, box-shadow .28s ease;
    }

    .nowhere-identity:hover .nowhere-avatar {
        transform: scale(1.045);
        border-color: rgba(214,255,75,.42);
        box-shadow: 0 0 0 5px rgba(214,255,75,.035), 0 0 24px rgba(214,255,75,.09);
    }

    /* Instagram-style frames: treat them like physical objects. */
    .social-phone {
        transition:
            transform .4s var(--ease-premium),
            border-color .3s ease,
            box-shadow .38s ease;
    }

    .showcase-piece > .social-phone:hover,
    .social-phone-carousel:hover,
    .social-phone-carousel:focus-within {
        transform: translateY(-5px);
        border-color: rgba(214,255,75,.30);
        box-shadow:
            0 34px 88px rgba(0,0,0,.48),
            0 0 0 1px rgba(214,255,75,.055),
            0 0 42px rgba(214,255,75,.045);
    }

    /* Carousel affordances. */
    .carousel-arrow {
        transition:
            opacity .2s ease,
            color .2s ease,
            border-color .2s ease,
            background .2s ease,
            transform .22s var(--ease-premium),
            box-shadow .2s ease;
    }

    .carousel-arrow:hover {
        background: rgba(15,15,13,.88);
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 0 22px rgba(214,255,75,.10);
    }

    .carousel-arrow:active {
        transform: translateY(-50%) scale(.94);
    }

    .carousel-dot {
        transition: transform .2s var(--ease-premium), background .2s ease, box-shadow .2s ease;
    }

    .carousel-dot:hover {
        transform: scale(1.55);
        background: #86867f;
    }

    .carousel-dot.is-active {
        box-shadow: 0 0 10px rgba(214,255,75,.42);
    }

    /* Coverflow: inactive cards hint that they can be brought forward. */
    .video-coverflow-card:not(.is-active):hover {
        opacity: .68;
        filter: blur(1.3px) brightness(.62) saturate(.82);
    }

    .video-coverflow-card.is-active .social-phone {
        transition:
            transform .35s var(--ease-premium),
            border-color .3s ease,
            box-shadow .35s ease;
    }

    .video-coverflow-card.is-active:hover .social-phone {
        transform: translateY(-3px) scale(1.006);
        border-color: rgba(214,255,75,.40);
        box-shadow:
            0 46px 128px rgba(0,0,0,.86),
            0 0 0 1px rgba(214,255,75,.09),
            0 0 44px rgba(214,255,75,.055);
    }

    .video-coverflow-nav:hover {
        background: rgba(214,255,75,.045);
        box-shadow: 0 0 0 4px rgba(214,255,75,.025), 0 10px 30px rgba(0,0,0,.3);
    }

    .video-coverflow-nav:active {
        transform: translateY(0) scale(.92);
    }

    /* Instagram links: icon and underline feel connected. */
    .work-link-instagram {
        transition: color .22s ease, border-color .22s ease, transform .24s var(--ease-premium);
    }

    .work-link-instagram:hover {
        transform: translateY(-2px);
        text-shadow: 0 0 18px rgba(214,255,75,.08);
    }

    .work-link-instagram:hover .instagram-icon {
        filter: drop-shadow(0 0 6px rgba(214,255,75,.20));
    }

    /* Service rows: a premium accent line grows across the top. */
    .service {
        position: relative;
    }

    .service::before {
        content: "";
        position: absolute;
        left: 0;
        top: -1px;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, var(--accent), rgba(214,255,75,.15), transparent 72%);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform .42s var(--ease-premium);
    }

    .service:hover::before {
        transform: scaleX(1);
    }

    .service-number,
    .service-main h3 {
        transition: color .24s ease, transform .28s var(--ease-premium);
    }

    .service:hover .service-number {
        color: var(--accent);
    }

    .service:hover .service-main h3 {
        transform: translateX(4px);
    }

    /* Process cards: just enough movement to show hierarchy. */
    .process-grid > div {
        transition: transform .32s var(--ease-premium), border-color .28s ease;
    }

    .process-grid > div:hover {
        transform: translateY(-5px);
        border-color: rgba(214,255,75,.38);
    }

    .process-grid h3 {
        transition: color .22s ease;
    }

    .process-grid > div:hover h3 {
        color: var(--accent);
    }

    /* Work placeholders get a quiet dimensional cue while still unfinished. */
    .work-card:not(.nowhere-card) .work-media {
        transition:
            transform .45s var(--ease-premium),
            border-color .28s ease,
            box-shadow .32s ease;
    }

    .work-card:not(.nowhere-card):hover .work-media {
        border-color: rgba(214,255,75,.22);
        box-shadow: 0 24px 60px rgba(0,0,0,.3);
    }
}

/* Press/tap feedback works on both desktop and touch. */
.button:active,
.contact-button:active,
.video-coverflow-nav:active,
.carousel-dot:active,
.work-link-instagram:active {
    transform: scale(.97);
}

.video-control-button:active {
    box-shadow: 0 0 0 5px rgba(214,255,75,.045);
}

/* Keyboard users receive the same accent language. */
.button:focus-visible,
.contact-button:focus-visible,
.work-link-instagram:focus-visible,
.video-coverflow-nav:focus-visible,
.carousel-arrow:focus-visible,
.carousel-dot:focus-visible,
.nav a:focus-visible,
.footer-links a:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 4px;
}

/* Motion accessibility: the site should still feel polished without motion. */
@media (prefers-reduced-motion: reduce) {
    .button,
    .contact-button,
    .nowhere-identity,
    .nowhere-avatar,
    .social-phone,
    .service,
    .process-grid > div,
    .work-tags span,
    .service-main li,
    .carousel-arrow,
    .carousel-dot,
    .work-link-instagram,
    .logo {
        transition-duration: .01ms !important;
    }

    .button::before,
    .contact-button::before,
    .service::before,
    .nav nav a::after,
    .footer-links a::after {
        display: none;
    }
}

/* =========================================================
   PORTFOLIO VIDEO — PLAYER UX V9
   Tap/click anywhere = play/pause with centered transport feedback
   ========================================================= */
.video-gesture-feedback[data-kind="transport"] {
    border-color: rgba(214,255,75,.24);
    box-shadow:
        0 12px 40px rgba(0,0,0,.30),
        0 0 24px rgba(214,255,75,.06);
    color: rgba(255,255,255,.94);
}


/* =========================
   PUBLISHED WORK / INSTAGRAM PROOF
   ========================= */
.published-proof-piece {
    margin-top: 72px;
}

.published-proof-heading {
    margin-bottom: 24px;
}

.published-proof-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.proof-card {
    position: relative;
    min-width: 0;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border: 1px solid rgba(241, 239, 233, 0.12);
    border-radius: 22px;
    background: #080808;
    padding: 0;
    cursor: zoom-in;
    isolation: isolate;
    transition: transform 280ms cubic-bezier(.2,.8,.2,1), border-color 280ms ease, box-shadow 280ms ease;
}

.proof-card-wide {
    grid-column: span 2;
    aspect-ratio: 16 / 10;
}

.proof-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 500ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
}

.proof-card-wide img {
    object-fit: contain;
    background: #090a0b;
}

.proof-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 44px 16px 16px;
    text-align: left;
    color: var(--text);
    background: linear-gradient(to top, rgba(6,6,6,.94), rgba(6,6,6,.55) 55%, transparent);
    pointer-events: none;
}

.proof-card-overlay strong {
    font-size: 13px;
    font-weight: 600;
}

.proof-card-overlay small {
    font-family: var(--mono);
    font-size: 9px;
    line-height: 1.45;
    letter-spacing: .03em;
    color: rgba(241,239,233,.7);
}

@media (hover:hover) and (pointer:fine) {
    .proof-card:hover {
        transform: translateY(-7px);
        border-color: rgba(214,255,75,.62);
        box-shadow: 0 18px 48px rgba(0,0,0,.34), 0 0 26px rgba(214,255,75,.08);
    }
    .proof-card:hover img {
        transform: scale(1.025);
        filter: brightness(1.05);
    }
}

.proof-card:active {
    transform: translateY(-2px) scale(.992);
}

.proof-card:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 4px;
}

.published-proof-note {
    margin-top: 16px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted);
}

.proof-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    place-items: center;
    padding: 28px;
    background: rgba(3,3,3,.9);
    backdrop-filter: blur(16px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 220ms ease, visibility 220ms ease;
}

.proof-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}

.proof-lightbox-inner {
    max-width: min(640px, 92vw);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.proof-lightbox-inner img {
    display: block;
    max-width: 100%;
    max-height: calc(88vh - 42px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid rgba(241,239,233,.14);
    box-shadow: 0 28px 90px rgba(0,0,0,.65);
}

.proof-lightbox-inner p {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.proof-lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(241,239,233,.18);
    background: rgba(15,15,14,.86);
    color: var(--text);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.proof-lightbox-close:hover {
    color: var(--accent);
    border-color: rgba(214,255,75,.7);
    transform: rotate(8deg) scale(1.05);
}

body.proof-lightbox-open {
    overflow: hidden;
}

@media (max-width: 900px) {
    .published-proof-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .proof-card-wide {
        grid-column: span 2;
        aspect-ratio: 16 / 11;
    }
}

@media (max-width: 560px) {
    .published-proof-piece { margin-top: 54px; }
    .published-proof-grid { gap: 10px; }
    .proof-card { border-radius: 16px; }
    .proof-card-wide { aspect-ratio: 4 / 3; }
    .proof-card-overlay { padding: 34px 11px 11px; }
    .proof-card-overlay strong { font-size: 11px; }
    .proof-card-overlay small { font-size: 8px; }
    .proof-lightbox { padding: 16px; }
    .proof-lightbox-close { top: 12px; right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .proof-card, .proof-card img, .proof-lightbox, .proof-lightbox-close { transition: none !important; }
}

/* =========================
   ARTIST FEATURE SERIES — THIRSTKID
   Two-part social carousel: motion poster -> performance edit
   ========================= */
.artist-feature-piece {
    margin-top: 72px;
}

.artist-feature-heading {
    margin-bottom: 28px;
}

.artist-feature-layout {
    display: grid;
    grid-template-columns: minmax(300px, 430px) minmax(0, 1fr);
    gap: clamp(34px, 5vw, 76px);
    align-items: center;
}

.artist-feature-phone {
    margin: 0;
    transition: transform 320ms cubic-bezier(.2,.8,.2,1), border-color 320ms ease, box-shadow 320ms ease;
}

.artist-feature-viewport {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: #000;
    touch-action: pan-y;
    cursor: grab;
}

.artist-feature-viewport:active {
    cursor: grabbing;
}

.artist-feature-track {
    display: flex;
    width: 100%;
    height: 100%;
    transform: translateX(0);
    transition: transform 460ms cubic-bezier(.2,.75,.2,1);
    will-change: transform;
}

.artist-feature-slide {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #000;
}

.artist-feature-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

.artist-slide-tag {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 4;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(7,7,7,.66);
    backdrop-filter: blur(10px);
    color: rgba(255,255,255,.88);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .08em;
}

.artist-feature-arrow {
    position: absolute;
    top: 50%;
    z-index: 7;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(8,8,8,.72);
    color: #fff;
    transform: translateY(-50%);
    backdrop-filter: blur(10px);
    cursor: pointer;
    opacity: .22;
    transition: opacity 220ms ease, color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.artist-feature-prev { left: 12px; }
.artist-feature-next { right: 12px; }

.artist-feature-count {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 7;
    padding: 6px 8px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(5,5,5,.68);
    backdrop-filter: blur(10px);
    color: #fff;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .07em;
}

.artist-feature-dots {
    min-height: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 5px 14px 3px;
}

.artist-feature-dot {
    width: 5px;
    height: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #4b4b47;
    cursor: pointer;
    transition: width 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.artist-feature-dot.is-active {
    width: 16px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 14px rgba(214,255,75,.16);
}

.artist-feature-copy {
    max-width: 560px;
}

.artist-feature-index {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .1em;
    color: var(--accent);
}

.artist-feature-copy h6 {
    max-width: 520px;
    margin-top: 12px;
    font-size: clamp(27px, 3vw, 44px);
    font-weight: 500;
    letter-spacing: -.045em;
    line-height: 1.05;
}

.artist-feature-copy > p {
    max-width: 540px;
    margin-top: 18px;
    color: #a4a49d;
    font-size: 12px;
    line-height: 1.8;
}

.artist-feature-role {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.artist-feature-role span {
    padding: 8px 10px;
    border: 1px solid rgba(241,239,233,.13);
    border-radius: 999px;
    color: #c7c6c0;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .04em;
    transition: transform 220ms ease, color 220ms ease, border-color 220ms ease, background 220ms ease;
}

.artist-feature-note {
    padding-top: 18px;
    border-top: 1px solid rgba(241,239,233,.1);
    font-family: var(--mono);
    font-size: 9px !important;
    line-height: 1.7 !important;
    letter-spacing: .02em;
    color: #6f6f69 !important;
}

/* performance transport */
.artist-video-controls {
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 8;
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    background: rgba(9,9,9,.72);
    backdrop-filter: blur(12px);
    transform: translate(-50%, 0);
    opacity: 1;
    transition: opacity 220ms ease, transform 220ms ease;
}

.artist-feature-slide.controls-hidden .artist-video-controls {
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
}

.artist-control {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: rgba(255,255,255,.9);
    font-size: 12px;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.artist-transport-feedback {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9;
    min-width: 70px;
    padding: 9px 12px;
    border: 1px solid rgba(214,255,75,.22);
    border-radius: 999px;
    background: rgba(8,8,8,.72);
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%) scale(.94);
    opacity: 0;
    color: #f4f3ee;
    text-align: center;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .08em;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
}

.artist-transport-feedback.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

@media (hover:hover) and (pointer:fine) {
    .artist-feature-phone:hover,
    .artist-feature-phone:focus-within {
        transform: translateY(-6px);
        border-color: rgba(214,255,75,.52);
        box-shadow: 0 32px 84px rgba(0,0,0,.42), 0 0 30px rgba(214,255,75,.06);
    }

    .artist-feature-phone:hover .artist-feature-arrow,
    .artist-feature-phone:focus-within .artist-feature-arrow {
        opacity: 1;
    }

    .artist-feature-arrow:hover {
        color: var(--accent);
        border-color: rgba(214,255,75,.7);
        transform: translateY(-50%) scale(1.08);
        box-shadow: 0 0 22px rgba(214,255,75,.08);
    }

    .artist-feature-role span:hover {
        transform: translateY(-2px);
        color: var(--accent);
        border-color: rgba(214,255,75,.36);
        background: rgba(214,255,75,.035);
    }

    .artist-control:hover {
        color: var(--accent);
        background: rgba(214,255,75,.07);
        transform: scale(1.06);
    }
}

.artist-feature-arrow:focus-visible,
.artist-feature-dot:focus-visible,
.artist-control:focus-visible,
.artist-feature-phone:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

@media (max-width: 860px) {
    .artist-feature-layout {
        grid-template-columns: 1fr;
    }

    .artist-feature-phone {
        margin: 0 auto;
    }

    .artist-feature-copy {
        max-width: 620px;
        margin: 0 auto;
        text-align: center;
    }

    .artist-feature-copy > p,
    .artist-feature-copy h6 {
        margin-left: auto;
        margin-right: auto;
    }

    .artist-feature-role {
        justify-content: center;
    }
}

@media (max-width: 560px) {
    .artist-feature-piece { margin-top: 54px; }
    .artist-feature-arrow { opacity: .78; width: 36px; height: 36px; }
    .artist-feature-copy { text-align: left; }
    .artist-feature-role { justify-content: flex-start; }
    .artist-feature-copy h6 { font-size: 29px; }
}

@media (prefers-reduced-motion: reduce) {
    .artist-feature-track,
    .artist-feature-phone,
    .artist-feature-arrow,
    .artist-feature-dot,
    .artist-video-controls,
    .artist-transport-feedback,
    .artist-feature-role span,
    .artist-control {
        transition: none !important;
    }
}

/* =========================================================
   V14 — PLAYER CONSISTENCY + VIEWPORT-SAFE PLAYBACK
   Smaller media footprint, click/tap selection, shared controls.
   ========================================================= */

/* Keep event edits prominent without letting one phone consume the viewport. */
.video-coverflow {
    --deck-card-width: min(64vw, 350px);
    max-width: 860px;
    padding-top: 24px;
}

.video-coverflow-stage {
    min-height: 665px;
}

/* Hover only hints that an inactive card is selectable; it never changes slides. */
.video-coverflow-card:not(.is-active) {
    cursor: pointer;
}

.video-coverflow-card.is-active .video-hover-hint {
    opacity: 0;
}

.video-coverflow-card:not(.is-active) .video-hover-hint {
    opacity: .78;
}

/* Artist feature: same premium phone language, but intentionally smaller than before. */
.artist-feature-layout {
    grid-template-columns: minmax(270px, 360px) minmax(0, 1fr);
    gap: clamp(30px, 4.5vw, 64px);
    align-items: center;
}

.artist-feature-phone {
    width: min(100%, 360px);
}

/* Both artist slides now use the exact same control capsule/buttons as event edits. */
.artist-feature-slide .portfolio-video-controls.artist-video-controls {
    bottom: 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 6px);
}

.artist-feature-slide.is-active .portfolio-video-controls.artist-video-controls {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.artist-feature-slide.is-active.controls-hidden .portfolio-video-controls.artist-video-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 7px) scale(.985);
}

.artist-feature-slide .video-volume-wrap {
    position: relative;
}

.artist-feature-slide .artist-transport-feedback[data-kind="speed"] {
    color: var(--accent);
}

.artist-feature-slide {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.artist-feature-slide.controls-hidden {
    cursor: none;
}

@media (hover: none) {
    .artist-feature-slide.controls-hidden {
        cursor: default;
    }
}

@media (max-width: 800px) {
    .video-coverflow {
        --deck-card-width: min(74vw, 292px);
        padding-top: 18px;
    }

    .video-coverflow-stage {
        min-height: 560px;
    }

    .video-coverflow-meta {
        width: min(100%, 390px);
    }

    .artist-feature-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .artist-feature-phone {
        width: min(76vw, 300px);
        margin-inline: auto;
    }

    .artist-feature-copy {
        max-width: 560px;
    }
}

@media (max-width: 480px) {
    .video-coverflow {
        --deck-card-width: min(76vw, 282px);
    }

    .video-coverflow-stage {
        min-height: 540px;
    }

    .artist-feature-phone {
        width: min(78vw, 286px);
    }

    .artist-feature-slide .portfolio-video-controls.artist-video-controls {
        bottom: 12px;
        max-width: calc(100% - 16px);
    }
}

/* =========================================================
   NOW.HERE identity pills — clickable Instagram profile links
   ========================================================= */
.social-user-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .22s ease,
                border-color .22s ease,
                box-shadow .22s ease,
                transform .22s ease;
}

/* Reel overlays are otherwise non-interactive; only the profile pill opts in. */
.reel-top-overlay .social-user-link {
    pointer-events: auto;
    border: 1px solid rgba(214,255,75,.10);
}

@media (hover: hover) and (pointer: fine) {
    .social-user-link:hover {
        transform: translateY(-1px);
    }

    .reel-top-overlay .social-user-link:hover {
        background: rgba(8,8,8,.72);
        border-color: rgba(214,255,75,.38);
        box-shadow: 0 0 0 1px rgba(214,255,75,.05),
                    0 8px 26px rgba(0,0,0,.34);
    }

    .social-post-header .social-user-link:hover,
    .artist-feature-card .social-user-link:hover {
        opacity: .92;
    }
}

.social-user-link:active {
    transform: translateY(0) scale(.985);
}

.social-user-link:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
    border-radius: 999px;
}

/* =========================================================
   V16 — IDLE / VIEWPORT-AWARE CAROUSEL ARROWS
   Navigation arrows behave like the media controls: they
   appear during interaction, then fade away when idle.
   ========================================================= */

/* Subsidy carousel */
.social-phone-carousel .carousel-arrow {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-50%) scale(.96);
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(.2,.7,.2,1),
        border-color 200ms ease,
        color 200ms ease,
        box-shadow 200ms ease;
}

.social-phone-carousel.arrow-ui-visible .carousel-arrow {
    opacity: 1 !important;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

/* Artist Feature carousel */
.artist-feature-phone .artist-feature-arrow {
    opacity: 0 !important;
    pointer-events: none;
    transform: translateY(-50%) scale(.96);
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(.2,.7,.2,1),
        color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.artist-feature-phone.arrow-ui-visible .artist-feature-arrow {
    opacity: .92 !important;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

/* Main Event Edit coverflow arrows */
.video-coverflow .video-coverflow-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(4px) scale(.96);
    transition:
        opacity 240ms ease,
        transform 240ms cubic-bezier(.2,.7,.2,1),
        color 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.video-coverflow.arrow-ui-visible .video-coverflow-nav {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

/* Keep keyboard focus clearly visible even after an idle fade. */
.carousel-arrow:focus-visible,
.artist-feature-arrow:focus-visible,
.video-coverflow-nav:focus-visible {
    opacity: 1 !important;
    pointer-events: auto;
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

@media (hover:hover) and (pointer:fine) {
    .social-phone-carousel.arrow-ui-visible .carousel-arrow:hover,
    .artist-feature-phone.arrow-ui-visible .artist-feature-arrow:hover,
    .video-coverflow.arrow-ui-visible .video-coverflow-nav:hover {
        opacity: 1 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .carousel-arrow,
    .artist-feature-arrow,
    .video-coverflow-nav {
        transition: opacity 120ms linear !important;
    }
}

/* =========================
   ARTIST FEATURE — PROFILE CONTEXT
   ========================= */
.artist-feature-artist-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-top: 14px;
}

.artist-feature-kicker {
    display: block;
    margin-bottom: 7px;
    color: #77776f;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.artist-feature-artist-row h6 {
    margin-top: 0;
}

.artist-profile-link {
    flex: 0 0 auto;
    margin-bottom: 4px;
    padding: 7px 10px;
    border: 1px solid rgba(241,239,233,.13);
    border-radius: 999px;
    color: #b9b8b1;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .03em;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.artist-feature-bio {
    max-width: 540px;
    margin-top: 18px;
    color: #a4a49d;
    font-size: 12px;
    line-height: 1.8;
}

.artist-feature-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(241,239,233,.1);
}

.artist-feature-block > p {
    max-width: 540px;
    color: #a4a49d;
    font-size: 12px;
    line-height: 1.8;
}

.artist-feature-block .artist-feature-role {
    margin-top: 10px;
}

@media (hover: hover) and (pointer: fine) {
    .artist-profile-link:hover {
        color: var(--accent);
        border-color: rgba(214,255,75,.42);
        background: rgba(214,255,75,.05);
        box-shadow: 0 0 18px rgba(214,255,75,.08);
        transform: translateY(-1px);
    }
}

.artist-profile-link:active {
    transform: translateY(1px) scale(.98);
}

@media (max-width: 640px) {
    .artist-feature-artist-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .artist-profile-link {
        margin-bottom: 0;
    }
}

/* =========================================================
   V18 — COMPLETE ARTIST FEATURE SERIES
   Seven artists, one reusable poster -> performance system.
   ========================================================= */
.artist-series-nav-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: end;
    margin: 2px 0 30px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(241,239,233,.11);
}

.artist-series-nav {
    display: flex;
    gap: 8px;
    min-width: 0;
    overflow-x: auto;
    padding: 4px 1px 7px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}

.artist-series-nav::-webkit-scrollbar { display: none; }

.artist-series-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid rgba(241,239,233,.12);
    border-radius: 999px;
    background: rgba(255,255,255,.018);
    color: #77776f;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .045em;
    text-transform: uppercase;
    cursor: pointer;
    scroll-snap-align: center;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.artist-series-tab span {
    color: #55554f;
    font-size: 7px;
    transition: color 220ms ease;
}

.artist-series-tab.is-active {
    color: #f1efe9;
    border-color: rgba(214,255,75,.44);
    background: rgba(214,255,75,.055);
    box-shadow: inset 0 0 0 1px rgba(214,255,75,.035), 0 0 20px rgba(214,255,75,.04);
}

.artist-series-tab.is-active span { color: var(--accent); }

.artist-series-status {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 10px;
    white-space: nowrap;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .08em;
    color: #5f5f59;
}

.artist-series-status [data-artist-series-count] {
    color: var(--accent);
}

.artist-series-panel[hidden] { display: none !important; }

.artist-series-panel.is-active {
    animation: artistPanelIn 380ms cubic-bezier(.2,.75,.2,1) both;
}

@keyframes artistPanelIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.artist-series-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
    padding-top: 16px;
    border-top: 1px solid rgba(241,239,233,.1);
}

.artist-series-controls button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: #77776f;
    font-family: var(--mono);
    font-size: 8px;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 220ms ease, transform 220ms ease;
}

.artist-series-controls button span {
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(241,239,233,.13);
    transition: border-color 220ms ease;
}

@media (hover:hover) and (pointer:fine) {
    .artist-series-tab:hover {
        color: #d5d4ce;
        border-color: rgba(214,255,75,.28);
        transform: translateY(-1px);
    }

    .artist-series-controls button:hover {
        color: var(--accent);
        transform: translateY(-1px);
    }

    .artist-series-controls button:hover span {
        border-color: rgba(214,255,75,.55);
    }
}

.artist-series-tab:focus-visible,
.artist-series-controls button:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* Keep the complete series compact enough to scan on laptops and phones. */
.artist-feature-piece .artist-feature-heading h5 {
    max-width: 720px;
}

.artist-series-panel .artist-feature-phone {
    width: min(100%, 340px);
}

.artist-series-panel .artist-feature-copy {
    max-width: 570px;
}

@media (max-width: 800px) {
    .artist-series-nav-wrap {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-bottom: 24px;
    }

    .artist-series-status {
        justify-content: space-between;
        padding: 0 2px 4px;
        order: -1;
    }

    .artist-series-panel .artist-feature-phone {
        width: min(74vw, 286px);
    }

    .artist-series-controls {
        margin-top: 24px;
    }
}

@media (max-width: 480px) {
    .artist-series-tab {
        min-height: 36px;
        padding: 8px 10px;
        font-size: 7px;
    }

    .artist-series-panel .artist-feature-phone {
        width: min(76vw, 276px);
    }

    .artist-series-controls button span {
        display: none;
    }

    .artist-series-controls button {
        width: 42px;
        height: 42px;
        justify-content: center;
        border: 1px solid rgba(241,239,233,.12);
        border-radius: 50%;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .artist-series-panel.is-active { animation: none !important; }
    .artist-series-tab,
    .artist-series-controls button,
    .artist-series-controls button span { transition: none !important; }
}

/* =========================================================
   V19 — ARTIST HERO SELECTOR
   Game-character / cover-flow style artist selection.
   Selection changes only on click/tap; hover is preview only.
   ========================================================= */
.artist-hero-nav-wrap {
    display: block;
    margin: 8px 0 34px;
    padding: 0 0 22px;
    border-bottom: 1px solid rgba(241,239,233,.11);
}

.artist-hero-nav-wrap .artist-series-status {
    justify-content: space-between;
    padding: 0 2px 12px;
}

.artist-hero-selector {
    position: relative;
    height: 250px;
    overflow: hidden;
    perspective: 1100px;
    isolation: isolate;
    touch-action: pan-y;
}

.artist-hero-card.artist-series-tab {
    --slot: 0;
    --depth: 0;
    position: absolute;
    left: 50%;
    top: 10px;
    width: 152px;
    height: 215px;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(241,239,233,.12);
    background: #0a0a09;
    color: #f1efe9;
    transform:
        translateX(calc(-50% + (var(--slot) * 128px)))
        translateY(calc(var(--depth) * 9px))
        scale(calc(1 - (var(--depth) * .075)));
    opacity: calc(1 - (var(--depth) * .18));
    filter: brightness(calc(1 - (var(--depth) * .13))) blur(calc(var(--depth) * .65px));
    box-shadow: 0 18px 48px rgba(0,0,0,.42);
    cursor: pointer;
    transition: transform 420ms cubic-bezier(.2,.8,.2,1), opacity 320ms ease, filter 320ms ease, border-color 260ms ease, box-shadow 260ms ease;
    z-index: calc(20 - var(--depth));
}

.artist-hero-card .artist-hero-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #080807;
    pointer-events: none;
}

.artist-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.08) 28%, rgba(0,0,0,.18) 58%, rgba(0,0,0,.86) 100%);
    pointer-events: none;
}

.artist-hero-number,
.artist-hero-name {
    position: absolute;
    z-index: 2;
    font-family: var(--mono);
    pointer-events: none;
}

.artist-hero-number {
    top: 12px;
    left: 12px;
    font-size: 8px;
    color: rgba(241,239,233,.58);
    letter-spacing: .08em;
}

.artist-hero-name {
    left: 13px;
    right: 13px;
    bottom: 13px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-align: left;
}

.artist-hero-card.is-active {
    border-color: rgba(214,255,75,.72);
    filter: none;
    opacity: 1;
    box-shadow: 0 22px 70px rgba(0,0,0,.66), 0 0 28px rgba(214,255,75,.08);
}

.artist-hero-card.is-active .artist-hero-number { color: var(--accent); }

.artist-hero-hint {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 2px;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .075em;
    text-transform: uppercase;
    color: #565650;
}
.artist-hero-hint span:first-child { color: var(--accent); }

@media (hover:hover) and (pointer:fine) {
    .artist-hero-card:not(.is-active):hover {
        filter: brightness(.96) blur(0);
        opacity: .92;
        border-color: rgba(214,255,75,.35);
        box-shadow: 0 24px 64px rgba(0,0,0,.62), 0 0 20px rgba(214,255,75,.05);
        transform:
            translateX(calc(-50% + (var(--slot) * 128px)))
            translateY(calc((var(--depth) * 9px) - 8px))
            scale(calc(1.025 - (var(--depth) * .055)));
        z-index: 18;
    }
}

.artist-hero-card:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 3px;
}

/* Let the selected artist information feel like the character profile reveal. */
.artist-series-panel.is-active .artist-feature-copy {
    animation: artistCopyReveal 460ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes artistCopyReveal {
    from { opacity: 0; transform: translateX(12px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
    .artist-hero-selector { height: 224px; }
    .artist-hero-card.artist-series-tab {
        width: 136px;
        height: 192px;
        transform:
            translateX(calc(-50% + (var(--slot) * 108px)))
            translateY(calc(var(--depth) * 8px))
            scale(calc(1 - (var(--depth) * .075)));
    }
}

@media (max-width: 600px) {
    .artist-hero-nav-wrap { margin-bottom: 26px; }
    .artist-hero-nav-wrap .artist-series-status span:last-child { display: none; }
    .artist-hero-selector { height: 205px; margin-inline: -8px; }
    .artist-hero-card.artist-series-tab {
        width: 124px;
        height: 176px;
        border-radius: 15px;
        transform:
            translateX(calc(-50% + (var(--slot) * 88px)))
            translateY(calc(var(--depth) * 7px))
            scale(calc(1 - (var(--depth) * .08)));
    }
    .artist-hero-name { font-size: 8px; left: 10px; right: 10px; bottom: 10px; }
    .artist-hero-number { top: 10px; left: 10px; font-size: 7px; }
    .artist-hero-hint { gap: 8px; flex-wrap: wrap; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .artist-hero-card.artist-series-tab,
    .artist-series-panel.is-active .artist-feature-copy { transition: none !important; animation: none !important; }
}

/* =========================================================
   V20 — ARTIST SELECTOR BELOW FEATURE
   Active artist comes first; hero-selection deck follows it.
   ========================================================= */
#artist-feature-series .artist-series-stage {
    margin-top: 10px;
}

#artist-feature-series .artist-hero-nav-wrap {
    margin: 34px 0 0;
    padding: 26px 0 22px;
    border-top: 1px solid rgba(241,239,233,.11);
    border-bottom: 0;
}

#artist-feature-series .artist-series-controls {
    margin-top: 0;
}

#artist-feature-series .artist-hero-hint {
    margin-top: 8px;
}

@media (max-width: 800px) {
    #artist-feature-series .artist-hero-nav-wrap {
        margin-top: 26px;
        padding-top: 22px;
    }
}

/* =========================================================
   V21 — ARTIST COVER-FLOW
   The full artist feature cards now act as the selector.
   Inactive artists sit behind the active artist like the Event Edit stack.
   The active card keeps its own 01/02 Motion Poster ↔ Performance carousel.
   ========================================================= */
#artist-feature-series .artist-selector-hidden {
    display: none !important;
}

#artist-feature-series .artist-series-stage {
    position: relative;
    min-height: 690px;
    margin-top: 20px;
    isolation: isolate;
    perspective: 1400px;
}

#artist-feature-series .artist-series-panel {
    --artist-slot: 0;
    --artist-depth: 0;
    position: absolute;
    inset: 0;
    display: block !important;
    pointer-events: none;
    opacity: 1;
    transform: none;
}

#artist-feature-series .artist-series-panel .artist-feature-layout {
    min-height: 650px;
    align-items: start;
}

#artist-feature-series .artist-series-panel .artist-feature-phone {
    position: relative;
    z-index: calc(30 - var(--artist-depth));
    pointer-events: auto;
    cursor: pointer;
    transform-origin: 50% 52%;
    transition:
        transform 440ms cubic-bezier(.2,.82,.2,1),
        opacity 320ms ease,
        filter 320ms ease,
        box-shadow 320ms ease,
        border-color 260ms ease;
}

#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    position: absolute;
    left: 34%;
    top: 22px;
    width: min(100%, 330px);
    transform:
        translateX(calc(-50% + (var(--artist-slot) * 82px)))
        translateY(calc(var(--artist-depth) * 12px))
        scale(calc(.90 - (var(--artist-depth) * .055)));
    opacity: calc(.72 - (var(--artist-depth) * .13));
    filter:
        brightness(calc(.72 - (var(--artist-depth) * .08)))
        blur(calc(var(--artist-depth) * .85px));
    box-shadow: 0 24px 70px rgba(0,0,0,.58);
}

#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-copy {
    display: none !important;
}

#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone::after {
    content: "SELECT ARTIST";
    position: absolute;
    left: 50%;
    bottom: 18px;
    z-index: 60;
    transform: translateX(-50%);
    padding: 7px 11px;
    border: 1px solid rgba(241,239,233,.15);
    border-radius: 999px;
    background: rgba(5,5,5,.72);
    backdrop-filter: blur(10px);
    color: rgba(241,239,233,.62);
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .075em;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 220ms ease, color 220ms ease, border-color 220ms ease;
}

#artist-feature-series .artist-series-panel.is-active {
    z-index: 40;
    pointer-events: none;
    animation: none;
}

#artist-feature-series .artist-series-panel.is-active .artist-feature-layout {
    pointer-events: none;
}

#artist-feature-series .artist-series-panel.is-active .artist-feature-phone,
#artist-feature-series .artist-series-panel.is-active .artist-feature-copy {
    pointer-events: auto;
}

#artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    cursor: default;
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    filter: none;
    box-shadow: 0 28px 90px rgba(0,0,0,.56), 0 0 34px rgba(214,255,75,.055);
}

@media (hover:hover) and (pointer:fine) {
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover {
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 82px)))
            translateY(calc((var(--artist-depth) * 12px) - 10px))
            scale(calc(.955 - (var(--artist-depth) * .045)));
        opacity: .94;
        filter: brightness(.93) blur(0);
        border-color: rgba(214,255,75,.43);
        box-shadow: 0 30px 88px rgba(0,0,0,.72), 0 0 28px rgba(214,255,75,.07);
        z-index: 38;
    }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover::after {
        opacity: 1;
        color: var(--accent);
        border-color: rgba(214,255,75,.34);
    }
}

.artist-coverflow-hint {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(241,239,233,.08);
    color: #5d5d56;
    font-family: var(--mono);
    font-size: 7px;
    letter-spacing: .075em;
    text-transform: uppercase;
}
.artist-coverflow-hint span:first-child { color: var(--accent); }

@media (max-width: 1000px) {
    #artist-feature-series .artist-series-stage { min-height: 710px; }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        left: 50%;
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 62px)))
            translateY(calc(var(--artist-depth) * 10px))
            scale(calc(.87 - (var(--artist-depth) * .05)));
    }
    @media (hover:hover) and (pointer:fine) {
        #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover {
            transform:
                translateX(calc(-50% + (var(--artist-slot) * 62px)))
                translateY(calc((var(--artist-depth) * 10px) - 8px))
                scale(calc(.92 - (var(--artist-depth) * .04)));
        }
    }
}

@media (max-width: 800px) {
    #artist-feature-series .artist-series-stage {
        min-height: 770px;
    }
    #artist-feature-series .artist-series-panel .artist-feature-layout {
        min-height: 735px;
    }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        top: 10px;
        width: min(70vw, 276px);
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 45px)))
            translateY(calc(var(--artist-depth) * 8px))
            scale(calc(.82 - (var(--artist-depth) * .045)));
        opacity: calc(.58 - (var(--artist-depth) * .08));
    }
    #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
        position: relative;
        z-index: 50;
    }
    #artist-feature-series .artist-series-panel.is-active .artist-feature-copy {
        position: relative;
        z-index: 52;
    }
    .artist-coverflow-hint {
        gap: 7px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

@media (max-width: 480px) {
    #artist-feature-series .artist-series-stage { min-height: 735px; }
    #artist-feature-series .artist-series-panel .artist-feature-layout { min-height: 700px; }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        width: min(68vw, 246px);
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 34px)))
            translateY(calc(var(--artist-depth) * 7px))
            scale(calc(.78 - (var(--artist-depth) * .04)));
    }
}

@media (prefers-reduced-motion: reduce) {
    #artist-feature-series .artist-series-panel .artist-feature-phone,
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone::after {
        transition: none !important;
    }
}

/* =========================================================
   V22 — ARTIST COVER-FLOW CLICK + SPACING FIX
   Wider peeks, reliable card selection, clean copy wrapping.
   ========================================================= */
#artist-feature-series .artist-series-stage {
    min-height: 705px;
    overflow: visible;
    padding-inline: clamp(18px, 3vw, 42px);
}

#artist-feature-series .artist-series-panel {
    z-index: var(--artist-z, 10);
}

#artist-feature-series .artist-series-panel .artist-feature-layout {
    width: min(100%, 1080px);
    margin-inline: auto;
    grid-template-columns: minmax(300px, 370px) minmax(280px, 1fr);
    gap: clamp(46px, 6vw, 82px);
    min-height: 660px;
    align-items: start;
}

#artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
    width: min(100%, 350px);
}

/* Expose enough of the neighbouring artists to make them obviously clickable. */
#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
    left: 31.5%;
    top: 30px;
    width: 314px;
    transform:
        translateX(calc(-50% + (var(--artist-slot) * 176px)))
        translateY(calc(var(--artist-depth) * 10px))
        scale(calc(.89 - (var(--artist-depth) * .045)));
    opacity: calc(.74 - (var(--artist-depth) * .11));
    filter:
        brightness(calc(.70 - (var(--artist-depth) * .055)))
        blur(calc(var(--artist-depth) * .7px));
    pointer-events: auto !important;
    cursor: pointer;
    touch-action: manipulation;
}

/* Keep nearest cards above farther cards, while the active artist remains highest. */
#artist-feature-series .artist-series-panel.is-active { --artist-z: 50; }
#artist-feature-series .artist-series-panel:not(.is-active) { pointer-events: none; }
#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone { pointer-events: auto; }

@media (hover:hover) and (pointer:fine) {
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover {
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 176px)))
            translateY(calc((var(--artist-depth) * 10px) - 12px))
            scale(calc(.95 - (var(--artist-depth) * .035)));
        opacity: .98;
        filter: brightness(.98) blur(0);
        border-color: rgba(214,255,75,.58);
        box-shadow: 0 34px 92px rgba(0,0,0,.72), 0 0 34px rgba(214,255,75,.08);
    }
}

/* Copy-column collision fixes. */
#artist-feature-series .artist-feature-copy {
    width: 100%;
    min-width: 0;
    max-width: 520px;
    overflow: visible;
}

#artist-feature-series .artist-feature-artist-row {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px 18px;
}

#artist-feature-series .artist-feature-artist-row > div {
    flex: 1 1 220px;
    min-width: 0;
}

#artist-feature-series .artist-feature-artist-row h6 {
    max-width: 100%;
    overflow-wrap: anywhere;
}

#artist-feature-series .artist-profile-link {
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
    text-align: center;
}

#artist-feature-series .artist-feature-bio,
#artist-feature-series .artist-feature-block > p,
#artist-feature-series .artist-feature-note {
    max-width: 100%;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    #artist-feature-series .artist-series-panel .artist-feature-layout {
        grid-template-columns: minmax(270px, 340px) minmax(250px, 1fr);
        gap: 42px;
    }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        left: 29%;
        width: 292px;
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 148px)))
            translateY(calc(var(--artist-depth) * 9px))
            scale(calc(.87 - (var(--artist-depth) * .045)));
    }
    @media (hover:hover) and (pointer:fine) {
        #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover {
            transform:
                translateX(calc(-50% + (var(--artist-slot) * 148px)))
                translateY(calc((var(--artist-depth) * 9px) - 10px))
                scale(calc(.93 - (var(--artist-depth) * .035)));
        }
    }
}

@media (max-width: 800px) {
    #artist-feature-series .artist-series-stage {
        min-height: 920px;
        overflow: hidden;
        padding-inline: 0;
    }
    #artist-feature-series .artist-series-panel .artist-feature-layout {
        grid-template-columns: 1fr;
        gap: 34px;
        min-height: 880px;
    }
    #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
        width: min(72vw, 286px);
        margin-inline: auto;
    }
    /* Mobile: show generous left/right peeks around the centered active card. */
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        left: 50%;
        top: 20px;
        width: min(66vw, 252px);
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 108px)))
            translateY(calc(var(--artist-depth) * 8px))
            scale(calc(.84 - (var(--artist-depth) * .04)));
        opacity: calc(.68 - (var(--artist-depth) * .08));
    }
    #artist-feature-series .artist-feature-copy {
        width: min(100%, 560px);
        margin-inline: auto;
        padding-inline: 6px;
    }
    @media (hover:hover) and (pointer:fine) {
        #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover {
            transform:
                translateX(calc(-50% + (var(--artist-slot) * 108px)))
                translateY(calc((var(--artist-depth) * 8px) - 8px))
                scale(calc(.9 - (var(--artist-depth) * .03)));
        }
    }
}

@media (max-width: 480px) {
    #artist-feature-series .artist-series-stage { min-height: 900px; }
    #artist-feature-series .artist-series-panel .artist-feature-layout { min-height: 860px; }
    #artist-feature-series .artist-series-panel.is-active .artist-feature-phone {
        width: min(70vw, 262px);
    }
    #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone {
        width: min(61vw, 226px);
        transform:
            translateX(calc(-50% + (var(--artist-slot) * 86px)))
            translateY(calc(var(--artist-depth) * 7px))
            scale(calc(.82 - (var(--artist-depth) * .04)));
    }
}

/* =========================
   V23 — COMPACT CAMPAIGN HOVER PROOF
   ========================= */
.campaign-hover-piece { overflow: visible; }
.campaign-hover-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  max-width:760px;
}
.campaign-hover-card {
  min-width:0;
  cursor:pointer;
  outline:none;
}
.campaign-hover-media {
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid rgba(214,255,75,.28);
  border-radius:24px;
  background:#090909;
  box-shadow:0 18px 50px rgba(0,0,0,.32);
  transition:transform .38s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.campaign-hover-media img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity .42s ease, transform .55s cubic-bezier(.2,.8,.2,1), filter .42s ease;
}
.campaign-hover-media .campaign-art { opacity:1; transform:scale(1.001); }
.campaign-hover-media .campaign-proof { opacity:0; transform:scale(1.035); object-position:top center; }
.campaign-hover-card:is(:hover,:focus-visible,.is-proof) .campaign-art { opacity:0; transform:scale(.985); filter:blur(2px); }
.campaign-hover-card:is(:hover,:focus-visible,.is-proof) .campaign-proof { opacity:1; transform:scale(1); }
.campaign-hover-card:is(:hover,:focus-visible,.is-proof) .campaign-hover-media {
  transform:translateY(-7px);
  border-color:rgba(214,255,75,.76);
  box-shadow:0 24px 66px rgba(0,0,0,.46),0 0 0 1px rgba(214,255,75,.10),0 0 34px rgba(214,255,75,.07);
}
.campaign-hover-hint {
  position:absolute;
  left:14px; bottom:14px;
  z-index:4;
  display:flex; flex-direction:column; gap:2px;
  padding:9px 11px;
  background:rgba(8,8,8,.78);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  backdrop-filter:blur(12px);
  pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.campaign-hover-hint span,.campaign-hover-hint strong { font-family:var(--mono); font-size:8px; letter-spacing:.11em; }
.campaign-hover-hint span { color:var(--muted); }
.campaign-hover-hint strong { color:var(--accent); font-weight:500; }
.campaign-hover-card:is(:hover,:focus-visible,.is-proof) .campaign-hover-hint { opacity:0; transform:translateY(5px); }
.campaign-hover-meta { display:flex; justify-content:space-between; gap:14px; align-items:flex-end; padding:13px 3px 0; }
.campaign-hover-meta > div { display:flex; flex-direction:column; gap:3px; }
.campaign-hover-meta span { font-family:var(--mono); font-size:8px; letter-spacing:.12em; color:var(--accent); }
.campaign-hover-meta strong { font-size:13px; font-weight:500; }
.campaign-hover-meta p { max-width:190px; text-align:right; font-family:var(--mono); font-size:8px; line-height:1.55; color:var(--muted); }
.campaign-hover-meta p b { color:var(--text); font-weight:500; }
.campaign-hover-note { max-width:620px; margin-top:16px; font-family:var(--mono); font-size:8px!important; letter-spacing:.06em; color:var(--muted)!important; }
@media (max-width:800px){
  .campaign-hover-grid{grid-template-columns:1fr;max-width:330px;margin-inline:auto;gap:26px}
  .campaign-hover-media{border-radius:20px;aspect-ratio:4/5}
  .campaign-hover-meta{align-items:flex-start;flex-direction:column;gap:7px}
  .campaign-hover-meta p{text-align:left;max-width:none}
  .campaign-hover-note{text-align:center;margin-inline:auto}
}
@media (hover:none){
  .campaign-hover-card:hover .campaign-art{opacity:1;transform:scale(1.001);filter:none}
  .campaign-hover-card:hover .campaign-proof{opacity:0;transform:scale(1.035)}
  .campaign-hover-card:hover .campaign-hover-media{transform:none;border-color:rgba(214,255,75,.28);box-shadow:0 18px 50px rgba(0,0,0,.32)}
  .campaign-hover-card.is-proof .campaign-art{opacity:0;transform:scale(.985);filter:blur(2px)}
  .campaign-hover-card.is-proof .campaign-proof{opacity:1;transform:scale(1)}
  .campaign-hover-card.is-proof .campaign-hover-media{transform:translateY(-4px);border-color:rgba(214,255,75,.76)}
}

/* =========================================================
   V24 — CAMPAIGN GRAPHIC COVERFLOW + CLEAN ARTIST COVERFLOW
   Original campaign artwork only; published metrics remain text proof.
   ========================================================= */
.campaign-hover-piece{display:none!important}
.campaign-coverflow-piece{overflow:visible}
.campaign-coverflow-stage{
  position:relative;
  width:min(100%,760px);
  height:520px;
  margin:22px auto 0;
  perspective:1200px;
  isolation:isolate;
}
.campaign-coverflow-card{
  --cslot:0;
  position:absolute;
  left:50%;top:0;
  width:min(72vw,330px);
  transform:translateX(calc(-50% + (var(--cslot) * 190px))) scale(.9);
  opacity:.42;
  filter:brightness(.56) blur(2px);
  z-index:2;
  cursor:pointer;
  transition:transform .42s cubic-bezier(.2,.82,.2,1),opacity .3s ease,filter .3s ease,z-index 0s,border-color .25s ease;
}
.campaign-coverflow-card.is-active{
  transform:translateX(-50%) scale(1);
  opacity:1;filter:none;z-index:10;cursor:default;
}
.campaign-coverflow-frame{
  aspect-ratio:4/5;
  overflow:hidden;
  border:1px solid rgba(214,255,75,.28);
  border-radius:28px;
  background:#060606;
  box-shadow:0 28px 78px rgba(0,0,0,.55);
}
.campaign-coverflow-frame img{width:100%;height:100%;object-fit:cover;display:block}
.campaign-coverflow-card-meta{padding:12px 4px 0;display:flex;justify-content:space-between;gap:12px;align-items:flex-end}
.campaign-coverflow-card-meta span{font-family:var(--mono);font-size:8px;letter-spacing:.1em;color:var(--accent)}
.campaign-coverflow-card-meta strong{font-size:12px;font-weight:500;text-align:right}
@media (hover:hover) and (pointer:fine){
 .campaign-coverflow-card:not(.is-active):hover{opacity:.88;filter:brightness(.92) blur(0);transform:translateX(calc(-50% + (var(--cslot) * 205px))) translateY(-8px) scale(.94);z-index:8}
}
.campaign-coverflow-nav{
 position:absolute;top:44%;z-index:30;width:46px;height:46px;border-radius:50%;border:1px solid rgba(241,239,233,.14);background:rgba(9,9,9,.72);backdrop-filter:blur(10px);color:var(--text);cursor:pointer;transition:opacity .25s ease,transform .25s ease,border-color .25s ease
}
.campaign-coverflow-prev{left:3%}.campaign-coverflow-next{right:3%}
.campaign-coverflow-nav:hover{border-color:var(--accent);transform:scale(1.06)}
.campaign-coverflow-info{width:min(100%,680px);margin:8px auto 0;text-align:center}
.campaign-coverflow-info>span{font-family:var(--mono);font-size:8px;letter-spacing:.12em;color:var(--accent)}
.campaign-coverflow-info h6{font-size:18px;margin:6px 0 5px;font-weight:500}
.campaign-coverflow-info p{font-family:var(--mono);font-size:9px;color:var(--muted)}
.campaign-coverflow-info p b{color:var(--text);font-weight:500}
.campaign-coverflow-info small{display:block;margin-top:6px;font-family:var(--mono);font-size:7px;color:#5f5f58}

/* Artist section: same visual language as the Event Edit stack. */
#artist-feature-series .artist-series-stage{
  min-height:900px;
  width:min(100%,980px);
  margin:18px auto 0;
  padding:0;
  overflow:visible;
}
#artist-feature-series .artist-series-panel .artist-feature-layout{
  width:100%;
  min-height:880px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:24px;
}
#artist-feature-series .artist-series-panel.is-active .artist-feature-phone{
  width:min(100%,330px);
  margin-inline:auto;
}
#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{
  left:50%;
  top:12px;
  width:300px;
  transform:translateX(calc(-50% + (var(--artist-slot) * 235px))) translateY(calc(var(--artist-depth) * 8px)) scale(calc(.91 - (var(--artist-depth) * .055)));
  opacity:calc(.58 - (var(--artist-depth) * .09));
  filter:brightness(calc(.58 - (var(--artist-depth) * .05))) blur(calc(var(--artist-depth) * 1px));
}
@media (hover:hover) and (pointer:fine){
 #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover{
   transform:translateX(calc(-50% + (var(--artist-slot) * 245px))) translateY(-6px) scale(calc(.96 - (var(--artist-depth) * .04)));
   opacity:.92;filter:brightness(.9) blur(0);z-index:45;
 }
}
#artist-feature-series .artist-feature-copy{
  width:min(100%,760px);
  max-width:760px;
  margin-inline:auto;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:24px 34px;
  padding:22px 0 0;
  border-top:1px solid rgba(241,239,233,.1);
}
#artist-feature-series .artist-feature-index,
#artist-feature-series .artist-feature-artist-row,
#artist-feature-series .artist-feature-bio{grid-column:1}
#artist-feature-series .artist-feature-block{grid-column:2}
#artist-feature-series .artist-feature-block + .artist-feature-block{grid-column:2}
#artist-feature-series .artist-feature-note{grid-column:1 / -1;margin-top:0}
#artist-feature-series .artist-feature-artist-row h6{font-size:clamp(30px,4vw,46px);line-height:.95}
#artist-feature-series .artist-feature-bio{margin-top:-8px}

@media (max-width:800px){
 .campaign-coverflow-stage{height:440px;width:100%}
 .campaign-coverflow-card{width:min(66vw,260px);transform:translateX(calc(-50% + (var(--cslot) * 130px))) scale(.88)}
 .campaign-coverflow-card.is-active{transform:translateX(-50%) scale(1)}
 .campaign-coverflow-prev{left:4px}.campaign-coverflow-next{right:4px}
 #artist-feature-series .artist-series-stage{min-height:940px;overflow:hidden}
 #artist-feature-series .artist-series-panel .artist-feature-layout{min-height:920px}
 #artist-feature-series .artist-series-panel.is-active .artist-feature-phone{width:min(74vw,284px)}
 #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{
   width:min(66vw,246px);
   transform:translateX(calc(-50% + (var(--artist-slot) * 118px))) translateY(calc(var(--artist-depth) * 7px)) scale(calc(.86 - (var(--artist-depth) * .045)));
 }
 #artist-feature-series .artist-feature-copy{width:min(100% - 16px,620px);grid-template-columns:1fr;gap:18px;padding-top:18px}
 #artist-feature-series .artist-feature-index,#artist-feature-series .artist-feature-artist-row,#artist-feature-series .artist-feature-bio,#artist-feature-series .artist-feature-block,#artist-feature-series .artist-feature-block + .artist-feature-block,#artist-feature-series .artist-feature-note{grid-column:1}
}
@media (max-width:480px){
 .campaign-coverflow-stage{height:405px}
 .campaign-coverflow-card{width:min(68vw,235px);transform:translateX(calc(-50% + (var(--cslot) * 104px))) scale(.86)}
 #artist-feature-series .artist-series-stage{min-height:900px}
 #artist-feature-series .artist-series-panel .artist-feature-layout{min-height:880px}
 #artist-feature-series .artist-series-panel.is-active .artist-feature-phone{width:min(76vw,270px)}
 #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{width:min(62vw,220px);transform:translateX(calc(-50% + (var(--artist-slot) * 95px))) translateY(calc(var(--artist-depth) * 6px)) scale(calc(.83 - (var(--artist-depth) * .04)))}
}

/* =========================================================
   V25 — MERGED CAMPAIGN DECK + COMPACT ARTIST COVERFLOW
   Keep both interactions on the same visual scale as Event Edits.
   ========================================================= */

/* One three-piece campaign bracket instead of a separate NOW.HERE 11 block. */
.campaign-coverflow-stage{
  width:min(100%,700px);
  height:500px;
}
.campaign-coverflow-card{
  width:min(66vw,300px);
  transform:translateX(calc(-50% + (var(--cslot) * 155px))) scale(.88);
}
.campaign-coverflow-card.is-active{
  transform:translateX(-50%) scale(1);
}
@media (hover:hover) and (pointer:fine){
  .campaign-coverflow-card:not(.is-active):hover{
    transform:translateX(calc(-50% + (var(--cslot) * 165px))) translateY(-7px) scale(.93);
  }
}

/* Artist deck: same footprint as the Event Edit coverflow, not a full-width fan. */
#artist-feature-series .artist-series-stage{
  width:min(100%,760px);
  min-height:920px;
  overflow:hidden;
  margin-inline:auto;
}
#artist-feature-series .artist-series-panel .artist-feature-layout{
  min-height:900px;
}
#artist-feature-series .artist-series-panel.is-active .artist-feature-phone{
  width:min(64vw,350px);
}
#artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{
  left:50%;
  top:18px;
  width:300px;
  transform:
    translateX(calc(-50% + (var(--artist-slot) * 145px)))
    translateY(calc(var(--artist-depth) * 8px))
    scale(calc(.88 - (var(--artist-depth) * .045)));
  opacity:calc(.52 - (var(--artist-depth) * .08));
  filter:brightness(calc(.58 - (var(--artist-depth) * .05))) blur(calc(var(--artist-depth) * .85px));
}
@media (hover:hover) and (pointer:fine){
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone:hover{
    transform:
      translateX(calc(-50% + (var(--artist-slot) * 153px)))
      translateY(-7px)
      scale(calc(.93 - (var(--artist-depth) * .035)));
    opacity:.88;
    filter:brightness(.9) blur(0);
  }
}
/* Keep the description stationary under the compact media deck. */
#artist-feature-series .artist-feature-copy{
  width:min(100%,700px);
  max-width:700px;
  background:transparent;
  margin-top:0;
}

@media (max-width:800px){
  .campaign-coverflow-stage{height:430px;width:100%;overflow:hidden}
  .campaign-coverflow-card{width:min(64vw,250px);transform:translateX(calc(-50% + (var(--cslot) * 112px))) scale(.86)}
  .campaign-coverflow-card.is-active{transform:translateX(-50%) scale(1)}
  #artist-feature-series .artist-series-stage{width:100%;min-height:900px;overflow:hidden}
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone{width:min(74vw,292px)}
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{
    width:min(62vw,238px);
    transform:translateX(calc(-50% + (var(--artist-slot) * 105px))) translateY(calc(var(--artist-depth) * 6px)) scale(calc(.84 - (var(--artist-depth) * .035)));
  }
}
@media (max-width:480px){
  .campaign-coverflow-stage{height:395px}
  .campaign-coverflow-card{width:min(68vw,228px);transform:translateX(calc(-50% + (var(--cslot) * 92px))) scale(.84)}
  #artist-feature-series .artist-series-stage{min-height:860px}
  #artist-feature-series .artist-series-panel.is-active .artist-feature-phone{width:min(76vw,280px)}
  #artist-feature-series .artist-series-panel:not(.is-active) .artist-feature-phone{
    width:min(58vw,210px);
    transform:translateX(calc(-50% + (var(--artist-slot) * 86px))) translateY(calc(var(--artist-depth) * 5px)) scale(calc(.82 - (var(--artist-depth) * .03)));
  }
}


/* V26 — Subsidy Program batch coverflow: outer batch selector + inner slide carousel */
.subsidy-series-piece{overflow:visible}
.subsidy-series-heading{margin-bottom:22px}
.subsidy-coverflow-stage{
  position:relative;
  width:min(100%,760px);
  height:650px;
  margin:0 auto;
  overflow:visible;
  perspective:1200px;
}
.subsidy-coverflow-card{
  --sub-slot:0;
  --sub-depth:0;
  position:absolute;
  left:50%;
  top:0;
  width:min(88vw,365px);
  transform:translateX(calc(-50% + (var(--sub-slot) * 185px))) translateY(calc(var(--sub-depth) * 16px)) scale(calc(1 - (var(--sub-depth) * .075)));
  transform-origin:center top;
  z-index:calc(30 - var(--sub-depth));
  opacity:calc(1 - (var(--sub-depth) * .30));
  filter:brightness(calc(1 - (var(--sub-depth) * .22))) blur(calc(var(--sub-depth) * 1.4px));
  transition:transform .5s cubic-bezier(.2,.8,.2,1),opacity .35s ease,filter .35s ease;
  cursor:pointer;
}
.subsidy-coverflow-card.is-active{
  z-index:50;
  opacity:1;
  filter:none;
  transform:translateX(-50%) translateY(0) scale(1);
  cursor:default;
}
.subsidy-coverflow-card:not(.is-active):hover{
  opacity:.82;
  filter:brightness(.86) blur(.3px);
  transform:translateX(calc(-50% + (var(--sub-slot) * 195px))) translateY(5px) scale(.95);
}
.subsidy-coverflow-card:not(.is-active) .carousel-arrow,
.subsidy-coverflow-card:not(.is-active) .carousel-dots,
.subsidy-coverflow-card:not(.is-active) .social-post-actions,
.subsidy-coverflow-card:not(.is-active) .social-post-caption,
.subsidy-coverflow-card:not(.is-active) .social-swipe-note{pointer-events:none}
.subsidy-phone{width:100%;max-width:none}
.subsidy-phone .social-post-media{aspect-ratio:4/5}
.subsidy-phone .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block}
.subsidy-series-nav{
  position:absolute;top:47%;z-index:70;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(241,239,233,.18);background:rgba(13,13,12,.76);color:var(--text);
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(12px);
  transition:opacity .25s ease,transform .25s ease,border-color .25s ease,color .25s ease;
}
.subsidy-series-prev{left:4%}.subsidy-series-next{right:4%}
.subsidy-series-nav:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.06)}
.subsidy-series-info{width:min(100%,680px);margin:8px auto 0;text-align:center}
.subsidy-series-info>span{font-family:var(--mono);font-size:8px;letter-spacing:.13em;color:var(--accent)}
.subsidy-series-info h6{font-size:19px;font-weight:500;margin:7px 0 6px}
.subsidy-series-info p{font-size:12px;line-height:1.7;color:var(--muted);max-width:580px;margin:0 auto}
.subsidy-series-info small{display:block;margin-top:9px;font-family:var(--mono);font-size:7px;letter-spacing:.05em;color:#62625c}
@media(max-width:800px){
  .subsidy-coverflow-stage{height:585px;width:100%;overflow:hidden}
  .subsidy-coverflow-card{width:min(78vw,310px);transform:translateX(calc(-50% + (var(--sub-slot) * 118px))) translateY(calc(var(--sub-depth) * 12px)) scale(calc(1 - (var(--sub-depth) * .085)))}
  .subsidy-coverflow-card:not(.is-active):hover{transform:translateX(calc(-50% + (var(--sub-slot) * 118px))) translateY(8px) scale(.91)}
  .subsidy-series-prev{left:2px}.subsidy-series-next{right:2px}
  .subsidy-series-info{padding:0 10px}
}
@media(max-width:480px){
  .subsidy-coverflow-stage{height:530px}
  .subsidy-coverflow-card{width:min(80vw,275px);transform:translateX(calc(-50% + (var(--sub-slot) * 92px))) translateY(calc(var(--sub-depth) * 10px)) scale(calc(1 - (var(--sub-depth) * .09)))}
  .subsidy-series-nav{width:40px;height:40px}
  .subsidy-series-info h6{font-size:17px}
  .subsidy-series-info p{font-size:11px}
}

/* V26 arrow idle behavior for subsidy outer selector */
.subsidy-series-piece .subsidy-series-nav{opacity:0;pointer-events:none;transform:scale(.96);}
.subsidy-series-piece.arrow-ui-visible .subsidy-series-nav{opacity:1;pointer-events:auto;transform:scale(1);}
@media (hover:hover) and (pointer:fine){
  .subsidy-series-piece.arrow-ui-visible .subsidy-series-nav:hover{transform:scale(1.06);}
}

/* V28 — Subsidy carousel cleanup */
.subsidy-series-nav{display:none !important;}
.subsidy-video-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  background:#000;
}

/* V29 — Subsidy Batch 03 slide 08: clean looping visual only */
.subsidy-video-slide video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
.subsidy-video-slide video::-webkit-media-controls,
.subsidy-video-slide video::-webkit-media-controls-enclosure,
.subsidy-video-slide video::-webkit-media-controls-panel,
.subsidy-video-slide video::-webkit-media-controls-play-button,
.subsidy-video-slide video::-webkit-media-controls-timeline,
.subsidy-video-slide video::-webkit-media-controls-current-time-display,
.subsidy-video-slide video::-webkit-media-controls-time-remaining-display,
.subsidy-video-slide video::-webkit-media-controls-mute-button,
.subsidy-video-slide video::-webkit-media-controls-volume-slider,
.subsidy-video-slide video::-webkit-media-controls-fullscreen-button,
.subsidy-video-slide video::-webkit-media-controls-overflow-button {
  display: none !important;
  -webkit-appearance: none !important;
}

/* =========================================================
   V30 — COMPLETE ARTIST CONTEXT + CONSISTENT PROFILE LAYOUT
   Keep every bio, feature explanation, role and handle visible.
   ========================================================= */
#artist-feature-series .artist-series-stage{
  min-height: 0 !important;
  height: auto;
  overflow: hidden;
  padding-bottom: 26px;
}
#artist-feature-series .artist-series-panel{
  position: absolute;
  inset: 0;
}
#artist-feature-series .artist-series-panel.is-active{
  position: relative;
  inset: auto;
}
#artist-feature-series .artist-series-panel .artist-feature-layout,
#artist-feature-series .artist-series-panel.is-active .artist-feature-layout{
  min-height: 0 !important;
  height: auto;
  gap: 28px;
}
#artist-feature-series .artist-feature-copy{
  width: min(100% - 12px, 700px) !important;
  max-width: 700px !important;
  display: block !important;
  padding: 24px 0 4px !important;
  margin: 0 auto !important;
  border-top: 1px solid rgba(241,239,233,.11);
  text-align: left;
}
#artist-feature-series .artist-feature-index{
  display:block;
  margin-bottom:22px;
  color:var(--accent);
}
#artist-feature-series .artist-feature-artist-row{
  display:block !important;
  margin:0 !important;
}
#artist-feature-series .artist-feature-artist-row > div{
  width:100%;
}
#artist-feature-series .artist-feature-artist-row h6{
  margin:0 !important;
  font-size:clamp(34px,5vw,52px) !important;
  line-height:.96 !important;
  max-width:100%;
  overflow-wrap:anywhere;
}
#artist-feature-series .artist-profile-link{
  display:inline-flex !important;
  align-items:center;
  width:max-content;
  max-width:100%;
  margin:12px 0 0 !important;
  position:static !important;
  white-space:normal;
  overflow-wrap:anywhere;
}
#artist-feature-series .artist-feature-bio{
  max-width:650px !important;
  margin:22px 0 0 !important;
  color:#aaa9a2;
  font-size:13px !important;
  line-height:1.82 !important;
}
#artist-feature-series .artist-feature-block{
  display:block !important;
  width:100%;
  margin:26px 0 0 !important;
  padding:22px 0 0 !important;
  border-top:1px solid rgba(241,239,233,.1);
}
#artist-feature-series .artist-feature-block > p{
  max-width:650px !important;
  margin:0;
  color:#aaa9a2;
  font-size:13px !important;
  line-height:1.82 !important;
}
#artist-feature-series .artist-feature-role{
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-start !important;
  gap:8px !important;
  margin-top:12px !important;
}
#artist-feature-series .artist-feature-note{
  display:block !important;
  margin:24px 0 0 !important;
  padding-top:18px;
  border-top:1px solid rgba(241,239,233,.08);
  max-width:650px;
  color:#62625c;
  font-family:var(--mono);
  font-size:8px;
  line-height:1.7;
  letter-spacing:.045em;
}
@media (max-width:800px){
  #artist-feature-series .artist-series-stage{padding-bottom:18px}
  #artist-feature-series .artist-feature-copy{width:min(100% - 24px,620px) !important;padding-top:20px !important}
  #artist-feature-series .artist-feature-artist-row h6{font-size:clamp(31px,10vw,44px) !important}
  #artist-feature-series .artist-feature-bio,
  #artist-feature-series .artist-feature-block > p{font-size:12px !important;line-height:1.72 !important}
}