@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 200;
    font-display: swap;
    src: url("assets/fonts/inter-200.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url("assets/fonts/inter-300.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/inter-400.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("assets/fonts/inter-500.ttf") format("truetype");
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/inter-600.ttf") format("truetype");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-400.ttf") format("truetype");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-600.ttf") format("truetype");
}

@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("assets/fonts/cormorant-garamond-700.ttf") format("truetype");
}

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

:root {
    --lab-white: #ffffff;
    --lab-black: #111111;
    --lab-layout-mode: mobile-portrait;
    --lab-nav-shell-height: 52px;
    --lab-nav-divider-height: 2.5px;
    /* Header band = visible fixed top shell that must stay outside the landing canvas. */
    --lab-nav-total-height: calc(var(--lab-nav-shell-height) + var(--lab-nav-divider-height));
    --lab-inline-padding: clamp(14px, 4.5vw, 22px);
    --lab-stable-vh: 100svh;
    --lab-dynamic-vh: 100dvh;
    --lab-header-height: var(--lab-nav-total-height);
    /* Effective area = real visible canvas under the header. */
    --lab-effective-height: calc(var(--lab-stable-vh) - var(--lab-header-height));
    --lab-total-height: calc(var(--lab-header-height) + var(--lab-effective-height));
    --lab-footer-test-height: clamp(79px, calc(var(--lab-effective-height) * 0.16 - 13px), 127px);
    --lab-shell-padding-x: clamp(16px, 4vw, 80px);
    --lab-shell-safe-top: var(--lab-header-height);
    --lab-shell-safe-bottom: var(--lab-footer-test-height);
    /* Typography scale — mobile portrait base values.
       Change these in :root[data-layout="tablet|desktop"] to scale all text.
       Every font-size in the file references one of these variables. */
    --lab-fs-display: 34px;    /* countdown numbers */
    --lab-fs-nav-menu: 22px;   /* overlay menu links */
    --lab-fs-nav: 20px;        /* nav logo, back button label */
    --lab-fs-heading: 18px;    /* section headings, arrows */
    --lab-fs-body-lg: 17px;    /* bio, longer body text */
    --lab-fs-body: 16px;       /* contact email, medium body */
    --lab-fs-body-sm: 15px;    /* brand bio, tagline */
    --lab-fs-sm: 13px;         /* kicker, CTA, release IDs */
    --lab-fs-caption: 12px;    /* subline, role, captions */
    --lab-fs-label: 11px;      /* countdown labels, dates, counts */
    --lab-fs-meta: 10px;       /* disco labels, social labels */
    --lab-fs-legal: 9px;       /* footer legal text */
    --lab-fs-micro: 8px;       /* gate labels, micro text */
    --lab-z-canvas-base: 1;
    --lab-z-canvas-overlay: 10;
    --lab-z-shell-header: 20;
    --lab-z-shell-menu: 19;
    --lab-z-shell-modal: 300;
}

:root[data-layout="mobile-landscape"] {
    --lab-layout-mode: mobile-landscape;
}

:root[data-layout="tablet"] {
    --lab-layout-mode: tablet;
}

:root[data-layout="desktop"] {
    --lab-layout-mode: desktop;
}

@supports not (height: 100svh) {
    :root {
        --lab-stable-vh: 100vh;
    }
}

@supports not (height: 100dvh) {
    :root {
        --lab-dynamic-vh: 100vh;
    }
}

html,
body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    min-height: var(--lab-total-height);
    height: auto;
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
    background: #ffffff;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    color: var(--lab-black);
}

.lab-probe,
.lab-safe-probe {
    position: fixed;
    left: -9999px;
    top: -9999px;
    pointer-events: none;
    visibility: hidden;
}

.lab-probe {
    width: 1px;
}

.lab-probe--vh {
    height: 100vh;
}

.lab-probe--lvh {
    height: 100lvh;
}

.lab-probe--svh {
    height: 100svh;
}

.lab-probe--dvh {
    height: 100dvh;
}

.lab-safe-probe {
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.lab-app {
    min-height: var(--lab-total-height);
    height: auto;
    max-height: none;
    overflow: visible;
    background: #ffffff;
}

.lab-nav-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: var(--lab-z-shell-header);
    min-height: var(--lab-nav-total-height);
    overflow: hidden;
    isolation: isolate;
    background: var(--lab-white);
    box-shadow:
        0 1px 0 rgba(17, 17, 17, 0.05),
        0 10px 26px rgba(17, 17, 17, 0.035),
        0 22px 44px rgba(17, 17, 17, 0.045);
}

.lab-nav-wrapper::before,
.lab-nav-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lab-nav-wrapper::before {
    opacity: 1;
    background:
        radial-gradient(140% 160% at 6% -44%, rgba(255, 255, 255, 0.18) 0%, transparent 48%),
        radial-gradient(120% 140% at 94% -38%, rgba(245, 245, 245, 0.12) 0%, transparent 44%),
        linear-gradient(102deg, transparent 20%, rgba(200, 200, 200, 0.14) 49%, transparent 78%),
        linear-gradient(180deg, rgba(248, 248, 248, 1) 0%, rgba(230, 230, 230, 0.97) 100%);
}

.lab-nav-wrapper::after {
    inset: -14% -22%;
    opacity: 1;
    background:
        linear-gradient(
            105deg,
            transparent 0%,
            transparent 38%,
            rgba(255, 255, 255, 0.06) 42%,
            rgba(255, 255, 255, 0.28) 48%,
            rgba(255, 255, 255, 0.18) 52%,
            rgba(255, 255, 255, 0.06) 58%,
            transparent 62%,
            transparent 100%
        );
    animation: labNavHeaderSheen 20s cubic-bezier(0.4, 0, 0.15, 1) infinite;
}

.lab-nav-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    display: block;
}

.lab-nav-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    height: var(--lab-nav-shell-height);
    padding: 0 var(--lab-inline-padding);
    position: relative;
    z-index: 1;
    min-width: 0;
    overflow-x: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.lab-nav-shell > * {
    align-self: center;
}

.lab-nav-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.5;
    background:
        radial-gradient(120% 120% at 50% -36%, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0) 50%),
        linear-gradient(90deg, rgba(210, 210, 210, 0) 0%, rgba(210, 210, 210, 0.08) 50%, rgba(210, 210, 210, 0) 100%),
        linear-gradient(180deg, rgba(244, 244, 244, 0.28) 0%, rgba(255, 255, 255, 0) 72%);
}

.lab-nav-logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    align-self: center;
    width: max-content;
    height: auto;
    min-height: 1em;
    min-width: 0;
    max-width: 100%;
}

.lab-nav-logo {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #000;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: var(--lab-fs-nav);
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0.105em;
    text-transform: uppercase;
    line-height: 1;
    position: relative;
    display: inline-block;
    top: -1px;
    text-rendering: geometricPrecision;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}

.lab-nav-glitch {
    position: relative;
    display: inline-block;
    isolation: isolate;
    transform-origin: center;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.lab-nav-glitch::before,
.lab-nav-glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    background: transparent;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    mix-blend-mode: multiply;
}

.lab-nav-glitch::before {
    color: rgba(238, 238, 238, 0.7);
}

.lab-nav-glitch::after {
    color: rgba(96, 96, 96, 0.62);
}

@media (hover: hover) and (pointer: fine) {
    .lab-nav-glitch:hover,
    .lab-nav-glitch:focus-visible {
        animation: labNavGlitchBase 0.86s steps(2, end) infinite;
    }

    .lab-nav-glitch:hover::before,
    .lab-nav-glitch:focus-visible::before {
        opacity: 1;
        animation: labGlitchIntroRgbA 0.82s steps(2, end) infinite;
    }

    .lab-nav-glitch:hover::after,
    .lab-nav-glitch:focus-visible::after {
        opacity: 1;
        animation: labGlitchIntroRgbB 0.78s steps(2, end) infinite;
    }
}

.lab-nav-logo-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: scaleX(0);
    width: 100%;
    height: 1px;
    background: var(--lab-black);
    transform-origin: center;
    pointer-events: none;
}

.lab-nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: center;
    gap: 6px;
    min-height: 100%;
    padding: 0 0 0 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    -webkit-tap-highlight-color: transparent;
}

.lab-nav-hamburger span {
    display: block;
    width: 25px;
    height: 1.2px;
    background: var(--lab-black);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.lab-mobile-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--lab-z-shell-menu);
    background: var(--lab-white);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(var(--lab-nav-total-height) + 48px) 28px 56px;
    -webkit-user-select: none;
    user-select: none;
}

.lab-mobile-overlay.is-open {
    display: flex;
}

.lab-mobile-overlay-shell {
    width: min(100%, 320px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
}

.lab-nav-link-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-self: start;
    align-self: center;
    width: max-content;
    height: auto;
    min-height: 1em;
}

.lab-nav-link-line {
    position: absolute;
    top: 50%;
    left: 0;
    transform: scaleX(0);
    width: 100%;
    height: 1px;
    background: var(--lab-black);
    transform-origin: center;
    pointer-events: none;
}

.lab-mobile-overlay a {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: var(--lab-fs-nav-menu);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--lab-black);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    text-rendering: geometricPrecision;
}

.lab-mobile-nav-link-wrap {
    height: auto;
    min-height: 1em;
}

/* Desktop: hide outline on mouse click, keep it for keyboard tab */
.lab-nav-logo:focus:not(:focus-visible),
.lab-nav-logo-wrap:focus:not(:focus-visible),
.lab-nav-hamburger:focus:not(:focus-visible),
.lab-nav-shell:focus:not(:focus-visible),
.lab-nav-wrapper:focus:not(:focus-visible),
.lab-mobile-overlay a:focus:not(:focus-visible) {
    outline: none;
}

/* Touch devices: no outline on any focus (no keyboard nav possible) */
@media (hover: none) and (pointer: coarse) {
    .lab-nav-logo:focus,
    .lab-nav-logo-wrap:focus,
    .lab-nav-hamburger:focus,
    .lab-nav-shell:focus,
    .lab-nav-wrapper:focus,
    .lab-mobile-overlay a:focus {
        outline: none;
    }
}

.lab-mobile-overlay .lab-nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible) {
    animation: labNavActiveGlitchBase 2.6s steps(2, end) infinite;
}

.lab-mobile-overlay .lab-nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::before {
    animation: labNavActiveGlitchRgbA 2.6s steps(2, end) infinite;
}

.lab-mobile-overlay .lab-nav-glitch.active:not(.imploding):not(.restoring):not(:hover):not(:focus-visible)::after {
    animation: labNavActiveGlitchRgbB 2.6s steps(2, end) infinite;
}

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible) {
    animation: labNavActiveGlitchBase 2.6s steps(2, end) infinite;
}

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible)::before {
    animation: labNavActiveGlitchRgbA 2.6s steps(2, end) infinite;
}

.lab-nav-logo.active:not(.imploding):not(.restoring):not(:focus-visible)::after {
    animation: labNavActiveGlitchRgbB 2.6s steps(2, end) infinite;
}

@media (hover: hover) and (pointer: fine) {
    .lab-mobile-overlay .lab-nav-glitch:hover,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible {
        animation: labNavGlitchBase 0.86s steps(2, end) infinite;
    }

    .lab-mobile-overlay .lab-nav-glitch:hover::before,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible::before {
        opacity: 1;
        animation: labGlitchIntroRgbA 0.82s steps(2, end) infinite;
    }

    .lab-mobile-overlay .lab-nav-glitch:hover::after,
    .lab-mobile-overlay .lab-nav-glitch:focus-visible::after {
        opacity: 1;
        animation: labGlitchIntroRgbB 0.78s steps(2, end) infinite;
    }
}

body.lab-menu-open {
    overflow-x: hidden;
    overflow-y: hidden;
}

.lab-nav-logo.imploding,
.lab-nav-link-wrap a.imploding {
    animation: labNavImplode 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
    transform-origin: center;
}

.lab-nav-logo.imploding ~ .lab-nav-logo-line,
.lab-nav-link-wrap a.imploding ~ .lab-nav-link-line {
    animation: labNavImplodeLine 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

.lab-nav-logo.restoring,
.lab-nav-link-wrap a.restoring {
    animation: labNavImplodeRestore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    transform-origin: center;
}

#labMobileMenu .lab-nav-link-line {
    transform-origin: center;
}

#labMobileMenu .lab-nav-link-wrap a.imploding {
    animation: labNavImplode 0.45s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;
}

#labMobileMenu .lab-nav-link-wrap a.imploding ~ .lab-nav-link-line {
    animation: labNavImplodeLine 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}

#labMobileMenu .lab-nav-link-wrap a.restoring {
    animation: labNavImplodeRestore 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.lab-nav-link-wrap:has(a.active:not(.imploding):not(.restoring)) .lab-nav-link-line {
    transform: scaleX(0);
    opacity: 0;
    animation: none;
}

.lab-nav-logo-wrap:has(.lab-nav-logo.active:not(.imploding):not(.restoring)) .lab-nav-logo-line {
    transform: scaleX(0);
    opacity: 0;
    animation: none;
}

@keyframes labNavImplode {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes labNavImplodeLine {
    0%   { transform: scaleX(0); opacity: 0.7; }
    50%  { transform: scaleX(1); opacity: 0.6; }
    100% { transform: scaleX(1); opacity: 0; }
}

@keyframes labNavImplodeRestore {
    0%   { transform: scale(0.001); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes labNavHeaderSheen {
    0%, 100% {
        transform: translate3d(-30%, 0, 0);
        opacity: 0.35;
    }
    38% {
        opacity: 0.85;
    }
    55% {
        transform: translate3d(10%, 0, 0);
        opacity: 0.5;
    }
    76% {
        opacity: 0.25;
    }
}


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

@keyframes labPrismSpecular {
    0%, 5% {
        transform: translateX(0);
        opacity: 0;
    }
    15% {
        opacity: 0.45;
    }
    50% {
        transform: translateX(250%);
        opacity: 0.55;
    }
    85% {
        opacity: 0.45;
    }
    95%, 100% {
        transform: translateX(500%);
        opacity: 0;
    }
}

@keyframes labPrismHalo {
    0%, 100% {
        background-position: 100% 50%;
        opacity: 0.45;
    }
    50% {
        background-position: 0% 50%;
        opacity: 0.65;
    }
}

@keyframes labNavGlitchBase {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        filter: none;
    }
    20% {
        transform: translate3d(0.35px, -0.2px, 0);
    }
    40% {
        transform: translate3d(-0.45px, 0.25px, 0);
    }
    60% {
        transform: translate3d(0.55px, 0.1px, 0);
    }
    80% {
        transform: translate3d(-0.35px, -0.15px, 0);
    }
}

@keyframes labNavActiveGlitchBase {
    0%, 72%, 100% {
        transform: translate(0, 0);
        text-shadow: none;
    }
    76% {
        transform: translate(-0.7px, 0);
        text-shadow:
            2px 0 rgba(232, 232, 232, 0.24),
            -2px 0 rgba(96, 96, 96, 0.2);
    }
    80% {
        transform: translate(0.9px, -0.1px);
        text-shadow:
            -2px 0 rgba(240, 240, 240, 0.26),
            2px 0 rgba(108, 108, 108, 0.22);
    }
    84% {
        transform: translate(-0.5px, 0.1px);
        text-shadow:
            1.5px 0 rgba(250, 250, 250, 0.2),
            -1.5px 0 rgba(124, 124, 124, 0.2);
    }
    88% {
        transform: translate(0, 0);
        text-shadow: none;
    }
}

@keyframes labNavActiveGlitchRgbA {
    0%, 72%, 100% {
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
    76% {
        opacity: 0.95;
        transform: translate(5px, -0.4px);
        clip-path: inset(10% 0 58% 0);
    }
    80% {
        opacity: 0.92;
        transform: translate(-4px, 0.3px);
        clip-path: inset(58% 0 12% 0);
    }
    84% {
        opacity: 0.82;
        transform: translate(2px, 0);
        clip-path: inset(28% 0 34% 0);
    }
    88% {
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes labNavActiveGlitchRgbB {
    0%, 72%, 100% {
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
    77% {
        opacity: 0.92;
        transform: translate(-5px, 0.4px);
        clip-path: inset(55% 0 16% 0);
    }
    81% {
        opacity: 0.88;
        transform: translate(4px, -0.3px);
        clip-path: inset(12% 0 60% 0);
    }
    85% {
        opacity: 0.78;
        transform: translate(-2px, 0);
        clip-path: inset(36% 0 28% 0);
    }
    89% {
        opacity: 0;
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
    }
}

@keyframes labGlitchIntroRgbA {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
    25% {
        transform: translate3d(-0.8px, -0.2px, 0);
        clip-path: inset(0 0 42% 0);
    }
    50% {
        transform: translate3d(0.7px, 0.3px, 0);
        clip-path: inset(58% 0 0 0);
    }
    75% {
        transform: translate3d(-0.4px, 0.1px, 0);
        clip-path: inset(20% 0 26% 0);
    }
}

@keyframes labGlitchIntroRgbB {
    0%, 100% {
        transform: translate3d(0, 0, 0);
        clip-path: inset(0 0 0 0);
    }
    25% {
        transform: translate3d(0.9px, 0.2px, 0);
        clip-path: inset(62% 0 0 0);
    }
    50% {
        transform: translate3d(-0.65px, -0.3px, 0);
        clip-path: inset(0 0 48% 0);
    }
    75% {
        transform: translate3d(0.5px, -0.12px, 0);
        clip-path: inset(24% 0 18% 0);
    }
}

/* ===================================================================
   Prism Line — reusable prismatic glass-edge divider
   Usage: <div class="lab-prism-line"> for light backgrounds
          <div class="lab-prism-line lab-prism-line--dark"> for dark backgrounds
   =================================================================== */

.lab-prism-line {
    --prism-height: 2.5px;
    width: 100%;
    height: var(--prism-height);
    position: relative;
    z-index: 1;
    overflow-x: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(255, 50, 50, 0.22) 0%,
            rgba(255, 140, 30, 0.16) 13%,
            rgba(230, 215, 45, 0.14) 26%,
            rgba(50, 205, 95, 0.16) 40%,
            rgba(45, 135, 255, 0.24) 54%,
            rgba(120, 45, 235, 0.20) 68%,
            rgba(230, 40, 105, 0.17) 82%,
            rgba(255, 50, 50, 0.22) 100%
        ),
        linear-gradient(
            90deg,
            rgba(170, 170, 170, 0.10) 0%,
            rgba(110, 110, 110, 0.28) 20%,
            rgba(150, 150, 150, 0.22) 50%,
            rgba(115, 115, 115, 0.26) 80%,
            rgba(175, 175, 175, 0.12) 100%
        );
    background-size: 300% 100%, 180% 100%;
    animation: labPrismSpectrum 18s ease-in-out infinite;
    box-shadow:
        0 0 4px 0.5px rgba(100, 150, 255, 0.16),
        0 0 9px 1.5px rgba(150, 90, 240, 0.10),
        0 0 3px 0px rgba(255, 70, 70, 0.08);
    filter: saturate(1.35);
}

.lab-prism-line::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -25%;
    width: 25%;
    height: 7px;
    pointer-events: none;
    background:
        radial-gradient(
            ellipse 45% 50% at 50% 50%,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.18) 45%,
            transparent 100%
        );
    filter: blur(0.6px);
    animation: labPrismSpecular 16s cubic-bezier(0.4, 0, 0.15, 1) infinite;
}

.lab-prism-line::after {
    content: "";
    position: absolute;
    left: -15%;
    right: -15%;
    top: -3px;
    height: 9px;
    pointer-events: none;
    background:
        linear-gradient(
            90deg,
            rgba(255, 50, 50, 0.10) 0%,
            rgba(255, 140, 30, 0.08) 13%,
            rgba(230, 215, 45, 0.07) 26%,
            rgba(50, 205, 95, 0.08) 40%,
            rgba(45, 135, 255, 0.10) 54%,
            rgba(120, 45, 235, 0.09) 68%,
            rgba(230, 40, 105, 0.08) 82%,
            rgba(255, 50, 50, 0.10) 100%
        );
    background-size: 300% 100%;
    filter: blur(3px);
    opacity: 0.7;
    animation: labPrismHalo 20s ease-in-out infinite;
}

/* --- Dark variant — for dark backgrounds (footer, etc.) ---
   White base layer replaces gray for visibility on black.
   Box-shadow more prominent (contrast does the work).
   Specular toned down (white already pops on dark).
   --------------------------------------------------------- */

.lab-prism-line--dark {
    background:
        linear-gradient(
            90deg,
            rgba(255, 50, 50, 0.22) 0%,
            rgba(255, 140, 30, 0.16) 13%,
            rgba(230, 215, 45, 0.14) 26%,
            rgba(50, 205, 95, 0.16) 40%,
            rgba(45, 135, 255, 0.24) 54%,
            rgba(120, 45, 235, 0.20) 68%,
            rgba(230, 40, 105, 0.17) 82%,
            rgba(255, 50, 50, 0.22) 100%
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0.22) 20%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(255, 255, 255, 0.20) 80%,
            rgba(255, 255, 255, 0.10) 100%
        );
    background-size: 300% 100%, 180% 100%;
    box-shadow:
        0 0 5px 1px rgba(100, 160, 255, 0.22),
        0 0 11px 2px rgba(150, 90, 240, 0.14),
        0 0 4px 0.5px rgba(255, 70, 70, 0.10);
    filter: saturate(1.15);
}

.lab-prism-line--dark::before {
    filter: blur(0.6px) brightness(0.55);
}

.lab-prism-line--dark::after {
    opacity: 0.55;
}

/* Footer prism line positioning */
.lab-footer-band > .lab-prism-line {
    position: absolute;
    top: 0;
    left: 0;
}

.lab-stage {
    margin-top: var(--lab-header-height);
    width: 100%;
    min-height: var(--lab-effective-height);
    height: auto;
    overflow-x: hidden;
    background: #ffffff;
    display: block;
    flex: 0 0 auto;
    position: relative;
}

.lab-page {
    display: none;
    width: 100%;
    min-height: var(--lab-effective-height);
    height: auto;
}

.lab-page.active {
    display: block;
}

.lab-page-canvas {
    width: 100%;
    height: auto;
    min-height: var(--lab-effective-height);
    position: relative;
    overflow-x: hidden;
}

.lab-brand-canvas {
    background: #ffffff;
}

.lab-brand-shell {
    min-height: 100%;
    padding: clamp(28px, 5vh, 52px) clamp(20px, 6vw, 48px) clamp(44px, 8vh, 88px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-top: 60px;
}

:root[data-layout="mobile-landscape"] .lab-brand-shell {
    margin-top: 0;
}

.lab-brand-logo-shell {
    position: relative;
    display: inline-block;
    width: min(100%, clamp(308px, 74.8vw, 594px));
    margin: 0;
    isolation: isolate;
    z-index: 2;
}

.lab-brand-logo-big,
.lab-brand-band {
    width: 100%;
    height: auto;
    display: block;
    margin: 0;
    will-change: transform, opacity, filter, clip-path;
    transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

.lab-brand-logo-base {
    position: relative;
    z-index: 2;
}

.lab-brand-band {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    clip-path: inset(0 0 0 0);
    mix-blend-mode: multiply;
    z-index: 1;
}

.lab-brand-band-r {
    filter: brightness(0) saturate(100%) invert(18%);
    clip-path: inset(0 0 66% 0);
}

.lab-brand-band-g {
    filter: brightness(0) saturate(100%) invert(42%);
    clip-path: inset(33% 0 33% 0);
}

.lab-brand-band-b {
    filter: brightness(0) saturate(100%) invert(68%);
    clip-path: inset(66% 0 0 0);
}

.lab-brand-message-block {
    width: min(100%, 860px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: clamp(28px, 4vh, 40px);
    text-align: center;
}

.lab-brand-bio {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body-sm);
    font-weight: 400;
    line-height: 1.42;
    color: #000000;
    max-width: 660px;
    margin: 0;
    text-align: center;
    position: relative;
    z-index: 2;
    align-self: center;
}

.lab-brand-tagline {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(22px, 4.1vw, 38px);
    font-weight: 200;
    color: #0a0a0a;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    top: 10px;
    z-index: 2;
    text-shadow:
        0 0 7px rgba(201, 168, 76, 0.5),
        0 0 20px rgba(201, 168, 76, 0.25),
        0 0 42px rgba(201, 168, 76, 0.15),
        0 0 82px rgba(201, 168, 76, 0.08);
    max-width: min(100%, 840px);
    align-self: center;
    margin-top: clamp(32px, 5vh, 48px);
}

.lab-artists-canvas {
    background: #ffffff;
}

.lab-artist-canvas {
    background: #ffffff;
}

.lab-artist-page-shell {
    min-height: 100%;
    height: auto;
    position: relative;
    padding: 18px clamp(18px, 5vw, 36px) 18px;
    overflow: visible;
    overflow-x: hidden;
}

.lab-artist-back-link {
    position: absolute;
    top: 18px;
    left: 22px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #111111;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-caption);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lab-artist-back-link-arrow {
    font-size: var(--lab-fs-heading);
    line-height: 1;
}

.lab-ali-page {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 26px;
    width: 100%;
    height: 100%;
    align-items: start;
    align-content: center;
    min-height: 0;
}

.lab-ali-left {
    position: relative;
    overflow: hidden;
    --ali-photo-scan-start-offset: 0px;
    --ali-photo-scan-end-offset: 0px;
    --ali-photo-scan-speed-ratio: 0.4;
}

.lab-ali-hero-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.lab-ali-right {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    min-height: 0;
    min-width: 0;
    width: 100%;
    padding-top: 4px;
}

.lab-ali-copy {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 0;
    min-width: 0;
    justify-content: flex-start;
}

.lab-ali-logo-glitch-wrap {
    position: relative;
    display: inline-block;
    width: fit-content;
    margin-bottom: 14px;
}

.lab-ali-hero-logo {
    height: clamp(70px, 12vw, 120px);
    width: auto;
    display: block;
}

.lab-ali-logo-band {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: multiply;
}

.lab-ali-band-r {
    filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
    clip-path: inset(0 0 66% 0);
}

.lab-ali-band-g {
    filter: brightness(0) saturate(100%) invert(50%) sepia(95%) saturate(3000%) hue-rotate(85deg);
    clip-path: inset(33% 0 33% 0);
}

.lab-ali-band-b {
    filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
    clip-path: inset(66% 0 0 0);
}

.lab-ali-bio {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body-lg);
    font-weight: 400;
    line-height: 1.7;
    color: #000000;
    max-width: 100%;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
}

.lab-ali-socials {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 42px 0 10px;
    padding-top: 8px;
}

.lab-ali-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    color: #111111;
    text-decoration: none;
}

.lab-ali-social-icon {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lab-ali-social-tier {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    text-align: center;
    margin-top: 16px;
}

.lab-ali-social-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(24px, 9vw, 92px);
    right: clamp(24px, 9vw, 92px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.08) 82%, transparent 100%);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.08), 0 0 24px rgba(0, 229, 255, 0.04);
    pointer-events: none;
}

.lab-ali-social-icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lab-ali-discovery-links {
    display: none;
}

.lab-ali-discography {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.lab-ali-disco-label {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-meta);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(17, 17, 17, 0.72);
}

.lab-ali-disco-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.lab-ali-disco-scroll {
    overflow-x: auto;
    display: flex;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.lab-ali-disco-scroll::-webkit-scrollbar {
    display: none;
}

.lab-ali-disco-item {
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    flex: 0 0 min(100%, 220px);
    scroll-snap-align: start;
}

.lab-ali-disco-cover {
    width: 100%;
    height: auto;
    display: block;
}

.lab-ali-disco-nav {
    border: 0;
    background: transparent;
    color: #111111;
    font-size: var(--lab-fs-nav);
    cursor: pointer;
}

@media (orientation: portrait) {
    .lab-artist-page-shell {
        padding: 18px 22px 18px;
    }

    .lab-ali-page {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: auto;
        min-height: max-content;
        align-items: flex-start;
    }

    .lab-ali-left {
        width: min(100%, 223px);
        height: auto;
        align-self: flex-start;
        margin-left: 0;
        top: 35px;
    }

    .lab-ali-right {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        padding-top: 0;
    }

    .lab-ali-copy {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        margin-top: -25px;
    }

    .lab-ali-logo-glitch-wrap {
        position: absolute;
        left: calc(223px + 14px);
        top: 35px;
        transform: translateY(-21.9%);
        margin-bottom: 0;
    }

    .lab-ali-hero-logo {
        height: clamp(75px, 22vw, 102px);
    }

    .lab-ali-hero-photo {
        width: min(100%, 223px);
        height: auto;
        max-width: 223px;
    }

    .lab-ali-bio {
        font-size: var(--lab-fs-body-sm);
        line-height: 1.42;
        text-align: justify;
        text-align-last: left;
        margin-top: 71px;
    }

    .lab-ali-discovery-links {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-content: flex-start;
        gap: 8px 10px;
        margin: 0 0 8px;
    }

    .lab-ali-discovery-links .release-platform-link {
        --platform-link-icon-slot: 30px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        display: grid;
        grid-template-columns: var(--platform-link-icon-slot) 1fr;
        align-items: center;
        justify-content: center;
        justify-items: center;
        column-gap: 5px;
        min-width: 0;
        max-width: 100%;
        height: 34px;
        min-height: 34px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.52);
        text-decoration: none;
        opacity: 0.88;
        box-sizing: border-box;
    }

    .lab-ali-discovery-links .platform-icon {
        position: static;
        width: 18px;
        height: 18px;
        transform: none;
        display: block;
        object-fit: contain;
        opacity: 0.68;
    }

    .lab-ali-discovery-links .platform-icon--youtube {
        width: 20px;
        height: 20px;
    }

    .lab-ali-discovery-links .release-platform-link span {
        display: block;
        max-width: 100%;
        text-align: center;
        font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
        font-size: var(--lab-fs-micro);
        line-height: 1;
        font-weight: 500;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        color: rgba(5, 5, 5, 0.62);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .lab-ali-socials {
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
        gap: 10px;
        margin: 16px 0 0;
        padding-top: 0;
    }

    .lab-ali-social-link {
        width: 52px;
        height: 52px;
        flex: 0 0 52px;
    }

    .lab-ali-social-tier {
        margin-top: 21px;
    }

    .lab-ali-discography {
        display: none;
    }
}

@media (orientation: landscape) {
    .lab-artist-page-shell {
        padding-top: 53px;
    }

    .lab-artist-back-link {
        left: clamp(18px, 5vw, 36px);
    }


    .lab-ali-right {
        padding-top: 0;
    }

    .lab-ali-logo-glitch-wrap {
        /* Pull up by SVG transparent top (~21.9% of logo height).
           Logo height = clamp(70px, 12vw, 120px) → transparent offset = clamp(15px, 2.628vw, 26px). */
        margin-top: clamp(-21px, calc(-2.628vw + 6px), -9px);
    }

    .lab-ali-bio {
        font-size: var(--lab-fs-body-sm);
        line-height: 1.42;
    }

    .lab-ali-social-tier {
        margin-top: 26px;
    }
}

.lab-roster-hero {
    min-height: 100%;
    position: relative;
    padding: clamp(28px, 5vh, 56px) clamp(20px, 6vw, 48px);
}

.lab-roster-logo-glitch-wrap {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    left: 50%;
    top: 50%;
    transform: translate(-50%, calc(-50% + 275px));
}

.lab-roster-artist-logo {
    height: clamp(112px, 24vw, 260px);
    width: auto;
    display: block;
}

.lab-roster-band {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;
    pointer-events: none;
    opacity: 0;
    mix-blend-mode: multiply;
}

.lab-roster-band-r {
    filter: brightness(0) saturate(100%) invert(12%) sepia(95%) saturate(6000%) hue-rotate(355deg);
    clip-path: inset(0 0 66% 0);
}

.lab-roster-band-g {
    filter: brightness(0) saturate(100%) invert(50%) sepia(95%) saturate(3000%) hue-rotate(85deg);
    clip-path: inset(33% 0 33% 0);
}

.lab-roster-band-b {
    filter: brightness(0) saturate(100%) invert(60%) sepia(95%) saturate(4000%) hue-rotate(175deg);
    clip-path: inset(66% 0 0 0);
}

.lab-roster-explore {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(88, 88, 88, 0.8);
    margin-top: 32px;
    cursor: pointer;
    transition: color 0.4s ease;
    text-decoration: none;
    position: absolute;
    left: 50%;
    top: calc(50% + 316px);
    transform: translateX(-50%);
}

.lab-roster-explore:hover {
    color: #111111;
}

.lab-releases-canvas {
    background: #ffffff;
}

.lab-releases-canvas .release-timeline-row,
.lab-releases-canvas .release-tl-dot,
.lab-releases-canvas .release-tl-id,
.lab-releases-canvas .release-tl-circle,
.lab-releases-canvas .release-tl-date,
.lab-releases-canvas .vinyl-gate,
.lab-releases-canvas .gate-vinyl,
.lab-releases-canvas .gate-door,
.lab-releases-canvas .gate-left,
.lab-releases-canvas .gate-right,
.lab-releases-canvas .gate-scanline,
.lab-releases-canvas .release-links-shell,
.lab-releases-canvas .release-links-kicker,
.lab-releases-canvas .release-links-row,
.lab-releases-canvas .release-platform-link,
.lab-releases-canvas .platform-icon,
.lab-releases-canvas .release-platform-link span {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font: inherit;
    color: inherit;
    text-decoration: none;
    background: none;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: baseline;
}

.lab-releases-canvas {
    position: relative;
    min-height: var(--lab-effective-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0 24px;
    overflow-x: hidden;
}

.lab-releases-canvas .release-timeline-row {
    --release-timeline-id-line-height: 16px;
    --release-timeline-circle-size: 10px;
    --release-timeline-dot-gap: 8px;
    --release-timeline-top-offset: 8px;
    position: relative;
    top: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    padding: var(--release-timeline-top-offset) 0 0;
    width: 100%;
    z-index: 10;
}

.lab-releases-canvas .release-timeline-row::before {
    content: '';
    position: absolute;
    top: calc(var(--release-timeline-top-offset) + var(--release-timeline-id-line-height) + var(--release-timeline-dot-gap) + (var(--release-timeline-circle-size) / 2));
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(229, 229, 229, 1);
    transform: translateY(-50%);
    box-shadow:
        0 0 4px rgba(201, 168, 76, 0.25),
        0 0 12px rgba(201, 168, 76, 0.15),
        0 0 24px rgba(201, 168, 76, 0.06);
}

.lab-releases-canvas .release-tl-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--release-timeline-dot-gap);
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 0 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.lab-releases-canvas .release-tl-id {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);
    font-weight: 500;
    line-height: var(--release-timeline-id-line-height);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #111111;
    position: relative;
    text-shadow:
        0 0 7px rgba(201, 168, 76, 0.5),
        0 0 20px rgba(201, 168, 76, 0.25),
        0 0 42px rgba(201, 168, 76, 0.15),
        0 0 82px rgba(201, 168, 76, 0.08);
}

.lab-releases-canvas .release-tl-id::before,
.lab-releases-canvas .release-tl-id::after,
.lab-releases-canvas .release-tl-date::before,
.lab-releases-canvas .release-tl-date::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
}

.lab-releases-canvas .release-tl-id::before {
    color: rgba(201, 168, 76, 0.6);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-id::after {
    color: rgba(201, 168, 76, 0.4);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-circle {
    width: var(--release-timeline-circle-size);
    height: var(--release-timeline-circle-size);
    border-radius: 50%;
    border: 1.5px solid #111111;
    background: #111111;
    transition: all 0.3s ease;
    box-shadow:
        0 0 6px rgba(201, 168, 76, 0.5),
        0 0 14px rgba(201, 168, 76, 0.25);
}

.lab-releases-canvas .release-tl-date {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(119, 119, 119, 1);
    position: relative;
    text-shadow:
        0 0 5px rgba(201, 168, 76, 0.4),
        0 0 15px rgba(201, 168, 76, 0.2),
        0 0 30px rgba(201, 168, 76, 0.1);
}

.lab-releases-canvas .release-tl-date::before {
    color: rgba(201, 168, 76, 0.45);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .release-tl-date::after {
    color: rgba(201, 168, 76, 0.3);
    mix-blend-mode: multiply;
}

.lab-releases-canvas .vinyl-gate {
    --vinyl-gate-progress: 0;
    --release-gate-size: clamp(270px, 74vw, 360px);
    --release-gate-live-size: var(--release-gate-size);
    --release-gate-offset-y: 26px;
    --release-gate-scan-speed-ratio: 0.514;
    --release-gate-scan-start-offset: 0px;
    --release-gate-scan-end-offset: 0px;
    --release-gate-scanline-y: -14px;
    --release-gate-scanline-opacity: 0;
    --release-gate-scanline-height: 1px;
    --release-gate-core-min-width: 8px;
    --release-gate-core-max-width: 72px;
    --release-gate-core-blur: 4px;
    --release-gate-door-closed-shift: 56%;
    --release-gate-door-open-shift: 44%;
    position: relative;
    width: var(--release-gate-size);
    height: var(--release-gate-size);
    aspect-ratio: 1 / 1;
    transform: translateY(var(--release-gate-offset-y));
    overflow: visible;
    z-index: 8;
}

.lab-releases-canvas .vinyl-gate img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: auto;
    -webkit-user-drag: none;
}

.lab-releases-canvas .gate-vinyl {
    position: absolute;
    inset: 0;
    z-index: 1;
    box-shadow: 0 calc(var(--release-gate-live-size) * 0.014) calc(var(--release-gate-live-size) * 0.07) rgba(0, 0, 0, 0.3);
    transition: none;
    filter: brightness(calc(0.84 + (var(--vinyl-gate-progress) * 0.16))) saturate(calc(0.76 + (var(--vinyl-gate-progress) * 0.24)));
}

.lab-releases-canvas .gate-vinyl img {
    filter: blur(var(--asset-gated-blur, 0px)) grayscale(calc(1 - var(--vinyl-gate-progress))) saturate(calc(0.7 + (var(--vinyl-gate-progress) * 0.3))) brightness(calc(0.9 + (var(--vinyl-gate-progress) * 0.1)));
}

.lab-releases-canvas .vinyl-gate::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 50%;
    width: calc(var(--release-gate-core-min-width) + (var(--vinyl-gate-progress) * var(--release-gate-core-max-width)));
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(180deg, transparent, rgba(255, 0, 102, 0.15) 20%, rgba(201, 168, 76, 0.25) 50%, rgba(0, 229, 255, 0.15) 80%, transparent);
    box-shadow: 0 0 20px 8px rgba(201, 168, 76, 0.05), 0 0 60px 15px rgba(255, 0, 102, 0.03), 0 0 100px 25px rgba(0, 229, 255, 0.02);
    filter: blur(var(--release-gate-core-blur));
    opacity: calc(var(--vinyl-gate-progress) * 0.96);
    transition: none;
    pointer-events: none;
}

.lab-releases-canvas .gate-door {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: hidden;
    transition: none;
    will-change: transform;
}

.lab-releases-canvas .gate-left {
    left: 0;
    transform: translateX(calc(0% - var(--release-gate-door-closed-shift) - (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
    box-shadow: calc(var(--release-gate-live-size) * 0.0105) 0 calc(var(--release-gate-live-size) * 0.045) rgba(0, 0, 0, 0.18);
}

.lab-releases-canvas .gate-right {
    right: 0;
    transform: translateX(calc(var(--release-gate-door-closed-shift) + (var(--vinyl-gate-progress) * var(--release-gate-door-open-shift))));
    box-shadow: calc(var(--release-gate-live-size) * -0.0105) 0 calc(var(--release-gate-live-size) * 0.045) rgba(0, 0, 0, 0.18);
}

.lab-releases-canvas .gate-door img {
    filter: blur(var(--asset-gated-blur, 0px)) grayscale(var(--vinyl-gate-progress)) saturate(calc(1 - (var(--vinyl-gate-progress) * 0.28))) brightness(calc(1 - (var(--vinyl-gate-progress) * 0.08)));
}

.lab-releases-canvas .gate-door::after {
    content: '';
    position: absolute;
    top: 5%;
    bottom: 5%;
    width: 1px;
    opacity: calc(var(--vinyl-gate-progress) * 0.92);
    transition: none;
    pointer-events: none;
    z-index: 3;
}

.lab-releases-canvas .gate-left::after {
    right: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(255, 0, 102, 0.6) 25%, rgba(201, 168, 76, 0.5) 50%, rgba(0, 229, 255, 0.6) 75%, transparent 100%);
    box-shadow: 0 0 6px rgba(255, 0, 102, 0.4), 0 0 16px rgba(201, 168, 76, 0.2);
}

.lab-releases-canvas .gate-right::after {
    left: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 229, 255, 0.6) 25%, rgba(201, 168, 76, 0.5) 50%, rgba(255, 0, 102, 0.6) 75%, transparent 100%);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.4), 0 0 16px rgba(201, 168, 76, 0.2);
}

.lab-releases-canvas .gate-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}

.lab-releases-canvas .gate-scanline::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: var(--release-gate-scanline-y);
    height: var(--release-gate-scanline-height);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 -1px 0 rgba(255, 0, 102, 0.3), 0 1px 0 rgba(0, 229, 255, 0.3), 0 0 12px 2px rgba(255, 255, 255, 0.04);
    opacity: var(--release-gate-scanline-opacity);
    transition: opacity 0.16s ease;
}

.lab-releases-canvas .release-links-shell {
    --release-links-offset-y: 0px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin: 44px auto 0;
    padding: 4px 0 14px;
    transform: none;
    z-index: 10;
}

.lab-releases-canvas .release-links-shell::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(24px, 9vw, 92px);
    right: clamp(24px, 9vw, 92px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.08) 82%, transparent 100%);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.08), 0 0 24px rgba(0, 229, 255, 0.04);
    pointer-events: none;
}

.lab-releases-canvas .release-links-shell::after {
    content: '';
    position: absolute;
    inset: 8px 10% -10px;
    background: radial-gradient(circle at 50% 0%, rgba(201, 168, 76, 0.08), transparent 56%), linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
    filter: blur(18px);
    opacity: 0.75;
    pointer-events: none;
    z-index: -1;
}

.lab-releases-canvas .release-links-kicker {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-micro);  /* was 8px */
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.42);
    margin-top: 2px;
}

.lab-releases-canvas .release-links-row {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 8px 10px;
    width: 100%;
    max-width: 420px;
    padding: 10px 12px 0;
    z-index: 10;
    align-items: stretch;
    isolation: isolate;
    box-sizing: border-box;
}

.lab-releases-canvas .release-platform-link {
    --platform-link-icon-slot: 52px;
    border: 1px solid rgba(0, 0, 0, 0.10);
    display: grid;
    grid-template-columns: var(--platform-link-icon-slot) 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-decoration: none;
    opacity: 0.84;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.025);
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

@media (hover: hover) and (pointer: fine) {
    .lab-releases-canvas .release-platform-link:hover,
    .lab-releases-canvas .release-platform-link:focus-visible {
        opacity: 1;
        transform: translateY(-1px);
        border-color: rgba(0, 0, 0, 0.32);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.8);
    }
}

.lab-releases-canvas .release-platform-link:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.5);
    outline-offset: 2px;
}

.lab-releases-canvas .platform-icon {
    position: static;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    transform: none;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.68;
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}

.lab-releases-canvas .release-platform-link span {
    display: block;
    max-width: 100%;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);  /* was 11px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(5, 5, 5, 0.62);
    transition: color 0.28s ease, transform 0.28s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.lab-releases-canvas .release-platform-link:hover .platform-icon,
.lab-releases-canvas .release-platform-link:focus-visible .platform-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.lab-releases-canvas .release-platform-link:hover span,
.lab-releases-canvas .release-platform-link:focus-visible span {
    color: #111111;
    transform: translateY(-1px);
}

/* ---- Shared platform-icon sizes (releases + contact DSP) ----
   Single source of truth — both sections use identical icon dimensions.
   Artist-discovery (.lab-ali-discovery-links) uses a smaller scale separately. */
.lab-releases-canvas .platform-icon,
.lab-contact-dsp-row .platform-icon {
    width: 34px;
    height: 34px;
}

.lab-releases-canvas .platform-icon--spotify,
.lab-contact-dsp-row .platform-icon--spotify {
    width: 30px;
    height: 30px;
    margin-left: 2px;
}

.lab-releases-canvas .platform-icon--apple,
.lab-contact-dsp-row .platform-icon--apple {
    width: 30px;
    height: 30px;
}

.lab-releases-canvas .platform-icon--beatport,
.lab-contact-dsp-row .platform-icon--beatport {
    width: 38px;
    height: 38px;
}

.lab-releases-canvas .platform-icon--amazon,
.lab-contact-dsp-row .platform-icon--amazon {
    width: 42px;
    height: 26px;
}

.lab-releases-canvas .platform-icon--soundcloud,
.lab-contact-dsp-row .platform-icon--soundcloud {
    width: 38px;
    height: 38px;
}

.lab-releases-canvas .platform-icon--youtube,
.lab-contact-dsp-row .platform-icon--youtube {
    width: 42px;
    height: 42px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas {
    min-height: var(--lab-effective-height);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-content: start;
    justify-items: center;
    justify-content: stretch;
    gap: 8px;
    padding: 8px 0 10px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-timeline-row {
    --release-timeline-id-line-height: 12px;
    --release-timeline-circle-size: 8px;
    --release-timeline-dot-gap: 5px;
    --release-timeline-top-offset: 0px;
    width: 100%;
    padding: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-tl-id {
    font-size: var(--lab-fs-label);  /* was 11px */
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-tl-date {
    font-size: var(--lab-fs-legal);  /* was 9px */
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .vinyl-gate {
    --release-gate-size: min(30vh, 168px);
    --release-gate-offset-y: 0px;
    align-self: center;
    margin: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-shell {
    width: 100%;
    margin: 0 auto;
    padding: 0 0 6px;
    gap: 4px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-kicker {
    font-size: 7px;
    letter-spacing: 0.18em;
    margin-top: 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-links-row {
    gap: 5px 7px;
    padding: 10px 10px 0;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-platform-link {
    --platform-link-icon-slot: 30px;
    --platform-link-label-slot: 52px;
    width: calc(var(--platform-link-icon-slot) + var(--platform-link-label-slot) + 18px);
    height: 30px;
    min-height: 30px;
    padding: 0 7px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .release-platform-link span {
    font-size: 5px;
    letter-spacing: 0.08em;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon {
    width: 18px;
    height: 18px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--spotify {
    width: 17px;
    height: 17px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--apple {
    width: 18px;
    height: 18px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--beatport {
    width: 24px;
    height: 24px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--amazon {
    width: 26px;
    height: 16px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--soundcloud {
    width: 24px;
    height: 24px;
}

:root[data-layout="mobile-landscape"] .lab-releases-canvas .platform-icon--youtube {
    width: 26px;
    height: 26px;
}

.lab-contact-canvas {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(30px, 8vh, 76px) clamp(20px, 6vw, 48px) 24px;
}

.lab-contact-page-shell {
    width: min(1100px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    text-align: center;
}

.lab-contact-anchor {
    margin: 0;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(42px, 8vw, 84px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.02em;
    color: #111111;
    text-transform: none;
}

.lab-contact-email-link {
    display: block;
    width: 100%;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-body);  /* was 16px */
    font-weight: 300;
    letter-spacing: 0.04em;
    color: rgba(17, 17, 17, 0.76);
    text-decoration: none;
    transition: color 0.25s ease, opacity 0.25s ease;
}

.lab-contact-email-link:hover,
.lab-contact-email-link:focus-visible {
    color: #111111;
    opacity: 1;
}

.lab-contact-tier {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 14px;
    text-align: center;
}

.lab-contact-tier:last-of-type {
    margin-top: 25px;
}

.lab-contact-tier::before {
    content: '';
    position: absolute;
    top: 0;
    left: clamp(24px, 9vw, 92px);
    right: clamp(24px, 9vw, 92px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 18%, rgba(0, 0, 0, 0.22) 50%, rgba(0, 0, 0, 0.08) 82%, transparent 100%);
    box-shadow: 0 0 10px rgba(201, 168, 76, 0.08), 0 0 24px rgba(0, 229, 255, 0.04);
    pointer-events: none;
}

.lab-contact-tier-label {
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-meta);  /* was 10px */
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.48);
}

.lab-contact-socials {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 18px;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.lab-contact-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-decoration: none;
    color: #111111;
    opacity: 0.88;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.lab-contact-social-link:hover,
.lab-contact-social-link:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
    border-color: rgba(17, 17, 17, 0.22);
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
}

.lab-contact-social-icon {
    display: block;
    width: 28px;
    height: 28px;
    max-width: none;
    object-fit: contain;
    opacity: 0.68;
    filter: none;
    transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.lab-contact-social-icon-svg {
    width: 31px;
    height: 31px;
    display: block;
    color: rgba(5, 5, 5, 0.66);
    transition: color 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

.lab-contact-social-link:hover .lab-contact-social-icon,
.lab-contact-social-link:focus-visible .lab-contact-social-icon {
    opacity: 1;
    transform: translateY(-1px);
}

.lab-contact-social-link:hover .lab-contact-social-icon-svg,
.lab-contact-social-link:focus-visible .lab-contact-social-icon-svg {
    color: #050505;
    transform: translateY(-1px);
}

.lab-contact-social-icon--facebook {
    filter: brightness(0) saturate(100%);
}

.lab-contact-social-icon--instagram,
.lab-contact-social-icon--facebook,
.lab-contact-social-icon--tiktok {
    width: 30px;
    height: 30px;
}

.lab-contact-social-icon--youtube {
    width: 48px;
    height: 48px;
}

.lab-contact-dsp-row {
    width: min(100%, 680px);
    max-width: 420px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: center;
    gap: 8px 10px;
    padding: 0 12px;
}

.lab-contact-dsp-row .release-platform-link {
    --platform-link-icon-slot: 52px;
    /* Full capsule treatment - same as Releases */
    border: 1px solid rgba(0, 0, 0, 0.10);
    display: grid;
    grid-template-columns: var(--platform-link-icon-slot) 1fr;
    align-items: center;
    justify-items: center;
    column-gap: 6px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    text-decoration: none;
    opacity: 0.84;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.025);
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.28s ease, box-shadow 0.28s ease, background 0.28s ease;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.lab-contact-dsp-row .release-platform-link .platform-icon {
    position: static;
    grid-column: 1;
    justify-self: center;
    align-self: center;
    transform: none;
    display: block;
    flex: 0 0 auto;
    object-fit: contain;
    opacity: 0.68;
    pointer-events: none;
}

.lab-contact-dsp-row .release-platform-link span {
    display: block;
    max-width: 100%;
    grid-column: 2;
    justify-self: center;
    align-self: center;
    text-align: center;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);  /* was 11px */
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: rgba(5, 5, 5, 0.62);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Platform-icon sizes inherited from shared block above (line ~2047) */

/* Layer 01 (mobile only): dynamic landing background canvas.
   This layer reuses the real landing artwork but stays isolated in the lab. */
.lab-effective-area {
    position: relative;
    width: 100%;
    min-height: var(--lab-effective-height);
    overflow-x: hidden;
    background: #000;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: clamp(13px, 7.7vw, 29px);
}

/* Footer reconstruction band: starts exactly after the effective canvas.
   This band is outside the canvas and outside the browser UI area. */
.lab-footer-band {
    position: relative;
    width: 100%;
    height: var(--lab-footer-test-height);
    min-height: var(--lab-footer-test-height);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    row-gap: 0;
    padding: 6px 22px 4px;
    background: #0b0b0b;
    overflow-x: hidden;
}

/* Footer top line now handled by .lab-prism-line--dark */

.lab-footer-legal-texts {
    grid-column: 1 / -1;
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    width: 100%;
    margin-top: -8px;
    text-align: center;
}

.lab-footer-legal-text {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-legal);  /* was 9px */
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.05;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
}

.lab-footer-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 auto;
    line-height: 0;
    opacity: 0.48;
}

.lab-footer-logo--left {
    order: 2;
    justify-self: start;
    height: 32px;
    transform: translate(-5px, -10px);
}

.lab-footer-logo--right {
    order: 3;
    justify-self: end;
    height: 38px;
    transform: translate(5px, -10px);
}

.lab-footer-logo-image {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
}

.lab-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lab-layer--bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}

.lab-layer-bg-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: brightness(0.72) saturate(1.1);
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

:root[data-layout="mobile-landscape"] .lab-layer-bg-image {
    object-position: center 38%;
}

/* Layer 02 (mobile only): top hero identity strip.
   Desktop will be handled later outside this lab pass. */
.lab-hero-top {
    position: relative;
    top: -10px;
    z-index: 2;
    width: min(100%, 520px);
    margin: 0;
    padding:
        0
        clamp(12px, 3.4vw, 20px)
        0;
    text-align: center;
}

.lab-hero-label {
    margin: 0 0 clamp(14px, 4.85vw, 24px);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(11px, 3.1vw, 13px);
    font-weight: 600;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.52),
        0 0 24px rgba(255, 248, 220, 0.28),
        0 1px 0 rgba(255, 255, 255, 0.22);
}

.lab-hero-title {
    width: min(100%, clamp(314px, 87vw, 356px));
    margin: 0 auto;
    font-size: 0;
    line-height: 0;
}

.lab-hero-title-image {
    display: block;
    width: 100%;
    height: auto;
    filter:
        brightness(0) invert(1)
        drop-shadow(0 18px 34px rgba(0, 0, 0, 0.26))
        drop-shadow(0 0 20px rgba(255, 255, 255, 0.08));
}

.lab-hero-separator {
    width: 52px;
    height: 1px;
    margin: 10px auto 9px;
    background: rgba(255, 255, 255, 0.38);
    box-shadow: 0 0 6px rgba(255, 248, 220, 0.22);
}

.lab-hero-meta {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: clamp(12px, 3.2vw, 15px);
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 1);
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.5),
        0 0 22px rgba(255, 248, 220, 0.26),
        0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Layer 03 (mobile only): release presentation block. */
.lab-release-panel-anchor {
    position: relative;
    z-index: 2;
    width: 78vw;
    max-width: 100%;
    margin-top: clamp(-35px, calc(6.8vw - 35px), -1px);
    zoom: 0.799;
}

.lab-release-panel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: clamp(26px, 6.8vw, 34px);
    text-align: center;
    overflow-x: hidden;
    isolation: isolate;
    background:
        linear-gradient(
            140deg,
            rgba(250, 252, 255, 0.04) 0%,
            rgba(242, 246, 252, 0.03) 18%,
            rgba(210, 219, 232, 0.02) 48%,
            rgba(151, 164, 182, 0.015) 78%,
            rgba(114, 126, 144, 0.01) 100%
        );
    box-shadow:
        0 42px 120px rgba(0, 0, 0, 0.34),
        0 18px 40px rgba(0, 0, 0, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.14) inset,
        0 -1px 0 rgba(255, 255, 255, 0.03) inset;
    backdrop-filter: blur(28px) saturate(130%) brightness(1.22) contrast(1.01);
    -webkit-backdrop-filter: blur(28px) saturate(130%) brightness(1.22) contrast(1.01);
}

.lab-release-panel::before,
.lab-release-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.lab-release-panel::before {
    z-index: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 14% 12%, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.07) 14%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 88% 11%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 16%, rgba(255, 255, 255, 0) 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 12%, rgba(255, 255, 255, 0) 28%),
        linear-gradient(
            112deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(255, 255, 255, 0.015) 26%,
            rgba(255, 255, 255, 0) 46%,
            rgba(255, 0, 102, 0.015) 64%,
            rgba(0, 229, 255, 0.018) 84%,
            rgba(255, 255, 255, 0.04) 100%
        );
    mix-blend-mode: screen;
}

.lab-release-panel::after {
    z-index: 0;
    inset: 1px;
    opacity: 0.14;
    border-radius: inherit;
    background:
        linear-gradient(104deg, transparent 0%, transparent 18%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0.04) 42%, transparent 58%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.015) 16%, rgba(255, 255, 255, 0) 76%, rgba(255, 255, 255, 0.06) 100%),
        linear-gradient(90deg, rgba(255, 0, 102, 0.022) 0%, transparent 28%, rgba(255, 255, 255, 0.05) 48%, transparent 72%, rgba(0, 229, 255, 0.022) 100%),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.07) inset,
        0 10px 22px rgba(255, 255, 255, 0.03) inset;
    mix-blend-mode: soft-light;
}

.lab-release-panel > * {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.lab-release-artwork {
    width: 100%;
    max-width: none;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lab-release-cover {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 0 auto;
    filter: saturate(1.03) contrast(1.02);
    box-shadow:
        0 34px 94px rgba(0, 0, 0, 0.44),
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 0 0 1px rgba(255, 255, 255, 0.05);
}

.lab-release-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.lab-release-kicker {
    margin: 0 0 14px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);  /* was 13px */
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-shadow:
        0 0 7px rgba(255, 255, 255, 0.3),
        0 0 16px rgba(255, 255, 255, 0.14),
        0 1px 0 rgba(255, 255, 255, 0.14),
        0 8px 18px rgba(0, 0, 0, 0.22);
}

.lab-release-divider {
    width: 52px;
    height: 1px;
    margin: 0 auto 16px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.18) 100%);
}

.lab-release-subline {
    margin: 0 0 14px;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-caption);  /* was 12px */
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.26),
        0 0 14px rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(255, 255, 255, 0.12),
        0 8px 18px rgba(0, 0, 0, 0.18);
}

.lab-countdown-grid {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: nowrap;
}

.lab-countdown-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 48px;
}

.lab-countdown-num {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-display);  /* was 34px */
    font-weight: 200;
    line-height: 1;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.98);
    text-shadow:
        3px 0 rgba(255, 0, 102, 0.36),
        -3px 0 rgba(0, 229, 255, 0.36),
        0 0 10px rgba(255, 255, 255, 0.12);
    font-variant-numeric: tabular-nums;
}

.lab-countdown-label {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-label);  /* was 11px */
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
}

.lab-home-cta {
    width: auto;
    padding: 13px 28px;
    white-space: nowrap;
    margin-top: -5px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.11) 48%, rgba(255, 255, 255, 0.05) 100%);
    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 1px 0 rgba(255, 255, 255, 0.24) inset;
    backdrop-filter: blur(18px) saturate(142%);
    -webkit-backdrop-filter: blur(18px) saturate(142%);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
    font-size: var(--lab-fs-sm);  /* was 13px */
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.96);
    text-align: center;
    text-shadow:
        0 0 10px rgba(255, 255, 255, 0.12),
        0 1px 0 rgba(0, 0, 0, 0.28);
}

/* ==========================================
   LANDSCAPE HOME: vertical stack layout
   Uses @media orientation so it applies to all
   phones in landscape regardless of pixel width.
   Hero at top, compact horizontal panel below.
   Background (abs inset:0) fills exact content height.
   ========================================== */

@media (orientation: landscape) and (max-height: 520px) {
    /* Let the effective area grow to contain all content.
       Background (absolute inset:0) then covers the full height naturally.
       No height caps — page scrolls like any other page. */
    .lab-page--home .lab-effective-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        height: auto;
        min-height: var(--lab-effective-height);
        padding: 16px 20px;
        gap: 14px;
    }

    /* Hero: into flow so effective-area height accounts for it */
    .lab-page--home .lab-hero-top {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        padding: 0;
        z-index: 2;
    }

    /* Panel: into flow, auto-width driven by content, reset absolute offsets */
    .lab-page--home .lab-release-panel-anchor {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        z-index: 2;
        width: auto;
        max-width: none;
        zoom: 1;
    }

    /* Panel: horizontal row — artwork left, copy right — saves height */
    .lab-page--home .lab-release-panel {
        flex-direction: row;
        align-items: center;
        gap: 16px;
        padding: 14px 16px;
        text-align: left;
    }

    /* Artwork drives panel height — sized to give the panel vertical presence */
    .lab-page--home .lab-release-artwork {
        flex: 0 0 clamp(180px, 36vw, 260px);
        width: clamp(180px, 36vw, 260px);
        min-width: 0;
        max-width: none;
    }

    .lab-page--home .lab-release-copy {
        flex: 0 0 auto;
        width: 248px;
        min-width: 0;
        align-items: flex-start;
        text-align: left;
    }

    /* Divider sits flush under kicker — remove auto centering */
    .lab-page--home .lab-release-divider {
        margin: 0 0 10px;
    }

    .lab-page--home .lab-release-kicker {
        font-size: var(--lab-fs-caption);  /* was 12px */
        margin: 0 0 8px;
    }

    .lab-page--home .lab-release-subline {
        font-size: var(--lab-fs-label);  /* was 11px */
    }

    .lab-page--home .lab-countdown-grid {
        justify-content: flex-start;
    }

    /* ---- ARTISTS PAGE: landscape — reduce vertical offsets, remove padding ---- */
    .lab-roster-hero {
        padding: 0;
    }

    .lab-roster-logo-glitch-wrap {
        transform: translate(-50%, calc(-50% + 110px));
    }

    .lab-roster-explore {
        top: calc(50% + 170px);
    }

    /* ---- BRAND PAGE: landscape — fix vertical centering ---- */
    .lab-brand-shell {
        margin-top: 0;
        padding: clamp(24px, 4vh, 40px) clamp(20px, 6vw, 48px);
        justify-content: center;
        min-height: var(--lab-effective-height);
    }

    .lab-brand-logo-shell {
        width: min(100%, clamp(180px, 38vw, 300px));
    }

    .lab-brand-message-block {
        margin-top: clamp(10px, 1.8vh, 18px);
    }

    .lab-brand-bio {
        font-size: var(--lab-fs-caption);  /* was 12px */
        line-height: 1.42;
    }

    .lab-brand-tagline {
        font-size: clamp(14px, 2.6vw, 22px);
        margin-top: clamp(20px, 3.2vh, 28px);
        margin-bottom: 20px;
    }
}

/* --- Accessibility: respect reduced motion preference --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}