/* ============================================
   TOKENS
   ============================================ */
        :root {
            --bg: #0a0a0b;
            --bg-elevated: #111113;
            --bg-elevated-2: #17171a;
            --text: #f2f2f0;
            --text-dim: rgba(242, 242, 240, .52);
            --text-dimmer: rgba(242, 242, 240, .30);
            --line: rgba(242, 242, 240, .12);
            --line-strong: rgba(242, 242, 240, .26);
            --teal: #5fe3d1;
            --magenta: #e8629f;
            --font-display: 'Space Grotesk', sans-serif;
            --font-mono: 'Space Mono', monospace;
            --ease: cubic-bezier(.16, 1, .3, 1);
            --nav-h: 76px;
            --hero-focus: 50% center;
        }

        html[data-theme="light"] {
            --bg: #f3f3f0;
            --bg-elevated: #ffffff;
            --bg-elevated-2: #eaeae6;
            --text: #101011;
            --text-dim: rgba(16, 16, 17, .56);
            --text-dimmer: rgba(16, 16, 17, .34);
            --line: rgba(16, 16, 17, .12);
            --line-strong: rgba(16, 16, 17, .24);
        }

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

        html {
            scroll-behavior: auto
        }

        body {
            background: var(--bg);
            color: var(--text);
            font-family: var(--font-display);
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden;
            transition: background-color .5s var(--ease), color .5s var(--ease);
        }

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

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

        button {
            font-family: inherit;
            background: none;
            border: none;
            color: inherit;
            cursor: pointer
        }

        ::selection {
            background: var(--text);
            color: var(--bg)
        }

        .eyebrow {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: var(--text-dim);
        }

        /* grain overlay */
        .grain {
            position: fixed;
            inset: 0;
            pointer-events: none;
            z-index: 9999;
            opacity: .035;
            mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        }

        /* ============================================
   NAV
   ============================================ */
        nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: var(--nav-h);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 clamp(20px, 5vw, 56px);
            z-index: 1000;
            background: transparent;
            border-bottom: 1px solid transparent;
            transition: background-color .4s var(--ease), border-color .4s var(--ease);
        }

        nav.scrolled {
            background: color-mix(in srgb, var(--bg) 78%, transparent);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            border-bottom: 1px solid var(--line);
        }

        .nav-logo {
            font-size: 15px;
            font-weight: 700;
            letter-spacing: .24em;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .nav-logo .dot {
            width: 5px;
            height: 5px;
            background: var(--text);
            border-radius: 50%;
            display: inline-block
        }

        .nav-links {
            display: flex;
            align-items: center;
            gap: clamp(18px, 3vw, 40px);
        }

        .nav-links a {
            font-size: 12px;
            font-family: var(--font-mono);
            letter-spacing: .1em;
            text-transform: uppercase;
            color: var(--text-dim);
            position: relative;
            padding: 4px 0;
            transition: color .3s var(--ease);
        }

        .nav-links a::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: 1px;
            background: var(--text);
            transition: width .35s var(--ease);
        }

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

        .nav-links a:hover::after {
            width: 100%
        }

        .theme-toggle {
            width: 40px;
            height: 40px;
            border: 1px solid var(--line-strong);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .3s var(--ease), transform .3s var(--ease);
            flex-shrink: 0;
        }

        .theme-toggle:hover {
            border-color: var(--text);
            transform: rotate(20deg)
        }

        .theme-toggle svg {
            width: 16px;
            height: 16px;
            stroke: var(--text);
            fill: none
        }

        .icon-moon {
            display: block
        }

        .icon-sun {
            display: none
        }

        html[data-theme="light"] .icon-moon {
            display: none
        }

        html[data-theme="light"] .icon-sun {
            display: block
        }

        /* ============================================
   HERO
   ============================================ */
        .hero {
            position: relative;
            height: 100svh;
            min-height: 560px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            overflow: hidden;
            isolation: isolate;
        }

        .hero-bg {
            position: absolute;
            inset: 0;
            z-index: -2;
            background:
                radial-gradient(120% 90% at 18% 8%, rgba(95, 227, 209, .28), transparent 55%),
                radial-gradient(110% 90% at 88% 92%, rgba(232, 98, 159, .24), transparent 55%),
                linear-gradient(160deg, #050506 0%, #0d0d10 55%, #050506 100%);
            transform: scale(1.15);
            will-change: transform;
        }

        .hero-bg img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: var(--hero-focus, 50% center);
            mix-blend-mode: luminosity;
            opacity: .55;
        }

        .hero::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background: linear-gradient(180deg, rgba(10, 10, 11, .15) 0%, rgba(10, 10, 11, .15) 40%, var(--bg) 96%);
        }

        .hero-coord {
            position: absolute;
            top: calc(var(--nav-h) + 28px);
            right: clamp(20px, 5vw, 56px);
            text-align: right;
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .14em;
            color: var(--text-dim);
            line-height: 1.7;
        }

        .hero-sigil {
            position: absolute;
            top: calc(var(--nav-h) + 20px);
            left: clamp(20px, 5vw, 56px);
            width: 46px;
            height: 46px;
            opacity: .85;
        }

        .hero-sigil svg {
            width: 100%;
            height: 100%
        }

        .hero-sigil path,
        .hero-sigil circle {
            stroke: var(--text);
            stroke-width: 1;
            fill: none;
            stroke-dasharray: 300;
            stroke-dashoffset: 300;
        }

        .hero-content {
            position: relative;
            padding: 0 clamp(20px, 5vw, 56px) clamp(52px, 8vw, 88px);
        }

        .hero-title {
            font-size: clamp(58px, 14vw, 180px);
            font-weight: 700;
            line-height: .86;
            letter-spacing: -.02em;
            overflow: hidden;
        }

        .hero-title span {
            display: inline-block;
            transform: translateY(110%)
        }

        .hero-sub {
            margin-top: 22px;
            max-width: 520px;
            font-size: clamp(13px, 1.6vw, 16px);
            color: var(--text-dim);
            font-weight: 400;
            line-height: 1.6;
            opacity: 0;
        }

        .hero-scroll {
            position: absolute;
            bottom: clamp(18px, 3vw, 32px);
            left: clamp(20px, 5vw, 56px);
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: .16em;
            text-transform: uppercase;
            color: var(--text-dimmer);
            opacity: 0;
        }

        .hero-scroll .line {
            width: 1px;
            height: 30px;
            background: var(--line-strong);
            position: relative;
            overflow: hidden
        }

        .hero-scroll .line::after {
            content: '';
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--text);
            animation: scrollLine 1.8s ease-in-out infinite;
        }

        @keyframes scrollLine {
            0% {
                top: -100%
            }

            50% {
                top: 0
            }

            100% {
                top: 100%
            }
        }

        /* ============================================
   NUEVO LANZAMIENTO — zona blanca fija, contraste editorial
   ============================================ */
        .release {
            position: relative;
            background: #fbfbf9;
            color: #101012;
            padding: clamp(64px, 11vw, 130px) clamp(20px, 5vw, 56px) clamp(90px, 13vw, 150px);
            overflow: hidden;
            isolation: isolate;
        }

        /* difumina desde el hero (oscuro) hacia el blanco */
        .release::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: clamp(90px, 16vw, 180px);
            background: linear-gradient(180deg, var(--bg) 0%, transparent 100%);
            z-index: 1;
            pointer-events: none;
        }

        /* difumina desde el blanco hacia la siguiente sección */
        .release::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: clamp(90px, 16vw, 180px);
            background: linear-gradient(180deg, transparent 0%, var(--bg) 100%);
            z-index: 1;
            pointer-events: none;
        }

        .release-inner {
            position: relative;
            z-index: 2;
            max-width: 480px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .release-eyebrow {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .18em;
            text-transform: uppercase;
            color: rgba(16, 16, 18, .45);
            opacity: 0;
            transform: translateY(10px);
        }

        .release-cover {
            width: min(360px, 68vw);
            aspect-ratio: 1/1;
            margin-top: 28px;
            background: #f1f1ee;
            border: 1px solid rgba(16, 16, 18, .08);
            box-shadow: 0 30px 60px -25px rgba(16, 16, 18, .25);
            overflow: hidden;
            opacity: 0;
            transform: translateY(24px) scale(.97);
        }

        .release-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .release-title {
            margin-top: 32px;
            font-size: clamp(26px, 4.5vw, 40px);
            font-weight: 600;
            letter-spacing: -.01em;
            line-height: 1.1;
            opacity: 0;
            transform: translateY(14px);
        }

        .release-artist {
            margin-top: 8px;
            font-family: var(--font-mono);
            font-size: 12px;
            letter-spacing: .1em;
            text-transform: uppercase;
            color: rgba(16, 16, 18, .45);
            opacity: 0;
            transform: translateY(14px);
        }

        .release-links {
            margin-top: 34px;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 12px;
            width: 100%;
            opacity: 0;
            transform: translateY(14px);
        }

        .release-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border: 1px solid rgba(16, 16, 18, .16);
            padding: 13px 20px;
            font-size: 13px;
            letter-spacing: .02em;
            color: #101012;
            transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
        }

        .release-link .arrow {
            font-family: var(--font-mono);
            transition: transform .3s var(--ease);
        }

        .release-link:hover .arrow {
            transform: translateX(3px);
        }

        .release-link.spotify:hover,
        .release-link.spotify:active {
            background: #4dbe89;
            border-color: #4dbe89;
            color: #0d0d0e;
        }

        .release-link.youtube:hover,
        .release-link.youtube:active {
            background: #d9635f;
            border-color: #d9635f;
            color: #fafafa;
        }

        @media (max-width:640px) {
            .release-links {
                flex-direction: column;
            }

            .release-link {
                justify-content: center;
            }
        }

        /* ============================================
   SECTION SHELL
   ============================================ */
        .section {
            padding: clamp(56px, 9vw, 110px) clamp(20px, 5vw, 56px) clamp(24px, 4vw, 48px);
            position: relative;
        }

        .section-head {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: clamp(28px, 5vw, 56px);
            flex-wrap: wrap;
        }

        .section-title {
            font-size: clamp(34px, 6vw, 64px);
            font-weight: 600;
            letter-spacing: -.01em;
            line-height: 1;
        }

        .section-count {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--text-dimmer);
        }

        /* ============================================
   TRACKS
   ============================================ */
        .tracks-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
            gap: clamp(20px, 3vw, 36px);
        }

        .track {
            cursor: pointer;
            opacity: 0;
            transform: translateY(28px);
        }

        .track-cover {
            position: relative;
            aspect-ratio: 1/1;
            width: 100%;
            border-radius: 1px;
            overflow: hidden;
            background: var(--bg-elevated-2);
        }

        .track-cover img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .8s var(--ease);
        }

        .track:nth-child(1) .track-cover {
            background: radial-gradient(120% 120% at 20% 10%, rgba(95, 227, 209, .5), transparent 60%), radial-gradient(120% 120% at 90% 95%, rgba(232, 98, 159, .35), transparent 60%), #0c0c0d;
        }

        .track:nth-child(2) .track-cover {
            background: radial-gradient(120% 120% at 85% 15%, rgba(232, 98, 159, .45), transparent 60%), radial-gradient(120% 120% at 10% 90%, rgba(95, 227, 209, .3), transparent 60%), #0c0c0d;
        }

        .track:nth-child(3) .track-cover {
            background: radial-gradient(120% 120% at 50% 0%, rgba(95, 227, 209, .35), transparent 65%), #0c0c0d;
        }

        .track:nth-child(4) .track-cover {
            background: radial-gradient(120% 120% at 15% 85%, rgba(232, 98, 159, .4), transparent 60%), radial-gradient(100% 100% at 90% 10%, rgba(95, 227, 209, .25), transparent 60%), #0c0c0d;
        }

        .track:nth-child(5) .track-cover {
            background: radial-gradient(120% 120% at 80% 80%, rgba(95, 227, 209, .4), transparent 60%), #0c0c0d;
        }

        .track-cover::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 100%);
            opacity: 0;
            transition: opacity .4s var(--ease);
        }

        .track-num {
            position: absolute;
            top: 14px;
            left: 14px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text);
            background: color-mix(in srgb, var(--bg) 60%, transparent);
            padding: 4px 8px;
            letter-spacing: .05em;
            backdrop-filter: blur(6px);
        }

        .track-play {
            position: absolute;
            bottom: 14px;
            right: 14px;
            width: 38px;
            height: 38px;
            border: 1px solid rgba(255, 255, 255, .5);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transform: translateY(8px);
            transition: opacity .35s var(--ease), transform .35s var(--ease);
            backdrop-filter: blur(6px);
        }

        .track-play svg {
            width: 12px;
            height: 12px;
            fill: #fff;
            margin-left: 2px
        }

        .track:hover .track-cover img {
            transform: scale(1.06)
        }

        .track:hover .track-cover::before {
            opacity: 1
        }

        .track:hover .track-play {
            opacity: 1;
            transform: translateY(0)
        }

        .track-meta {
            margin-top: 16px
        }

        .track-title {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: -.005em
        }

        .track-feat {
            margin-top: 4px;
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-dim);
            letter-spacing: .02em;
        }

        /* ============================================
   MODAL
   ============================================ */
        .modal-backdrop {
            position: fixed;
            inset: 0;
            background: color-mix(in srgb, var(--bg) 82%, transparent);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .4s var(--ease);
        }

        .modal-backdrop.open {
            opacity: 1;
            pointer-events: auto
        }

        .modal {
            width: 100%;
            max-width: 400px;
            background: var(--bg-elevated);
            border: 1px solid var(--line);
            padding: clamp(28px, 5vw, 44px);
            transform: translateY(24px) scale(.97);
            transition: transform .45s var(--ease);
        }

        .modal-backdrop.open .modal {
            transform: translateY(0) scale(1)
        }

        .modal-eyebrow {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-dimmer);
            letter-spacing: .12em;
            text-transform: uppercase
        }

        .modal-title {
            font-size: clamp(24px, 4vw, 30px);
            font-weight: 600;
            margin-top: 10px;
            line-height: 1.15
        }

        .modal-feat {
            font-family: var(--font-mono);
            font-size: 12px;
            color: var(--text-dim);
            margin-top: 8px
        }

        .modal-links {
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 10px
        }

        .modal-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid var(--line-strong);
            padding: 15px 18px;
            font-size: 13px;
            letter-spacing: .03em;
            transition: background-color .3s var(--ease), color .3s var(--ease);
        }

        .modal-link:hover {
            background: var(--text);
            color: var(--bg)
        }

        /* colores por plataforma — tonos suavizados, no saturados */
        .modal-link.spotify:hover,
        .modal-link.spotify:active {
            background: #4dbe89;
            border-color: #4dbe89;
            color: #0d0d0e;
        }

        .modal-link.apple:hover,
        .modal-link.apple:active {
            background: #f2ede2;
            border-color: #f2ede2;
            color: #17171a;
        }

        .modal-link.youtube:hover,
        .modal-link.youtube:active {
            background: #d9635f;
            border-color: #d9635f;
            color: #fafafa;
        }

        .modal-link span.arrow {
            font-family: var(--font-mono);
            transition: transform .3s var(--ease)
        }

        .modal-link:hover span.arrow {
            transform: translateX(3px)
        }

        .modal-close {
            position: absolute;
            top: 18px;
            right: 18px;
            width: 32px;
            height: 32px;
            border: 1px solid var(--line-strong);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        .modal {
            position: relative
        }

        .modal-close:hover {
            border-color: var(--text)
        }

        /* ============================================
   BIO
   ============================================ */
        .bio-wrap {
            display: grid;
            grid-template-columns: 1fr 1.15fr;
            gap: clamp(30px, 6vw, 80px);
            align-items: start;
        }

        .bio-visual {
            position: sticky;
            top: calc(var(--nav-h) + 24px);
            aspect-ratio: 4/5;
            background:
                radial-gradient(130% 100% at 10% 0%, rgba(95, 227, 209, .35), transparent 55%),
                radial-gradient(130% 100% at 100% 100%, rgba(232, 98, 159, .3), transparent 55%),
                #0c0c0d;
            overflow: hidden;
        }

        .bio-visual img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            mix-blend-mode: luminosity;
            opacity: .7
        }

        .bio-text {
            font-size: clamp(18px, 2.6vw, 26px);
            line-height: 1.5;
            font-weight: 400;
            letter-spacing: -.005em;
        }

        .bio-text p {
            margin-bottom: 22px;
            opacity: 0;
            transform: translateY(16px)
        }

        .bio-text .dim {
            color: var(--text-dim)
        }

        .bio-tag-list {
            margin-top: 40px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .bio-tag {
            font-family: var(--font-mono);
            font-size: 11px;
            letter-spacing: .08em;
            text-transform: uppercase;
            border: 1px solid var(--line);
            padding: 7px 12px;
            color: var(--text-dim);
        }

        /* ============================================
   GALLERY
   ============================================ */
        .gallery-track {
            display: flex;
            gap: 16px;
            overflow-x: auto;
            scroll-snap-type: x proximity;
            cursor: grab;
            padding-bottom: 8px;
            -ms-overflow-style: none;
            scrollbar-width: none;
            user-select: none;
        }

        .gallery-track::-webkit-scrollbar {
            display: none
        }

        .gallery-track.dragging {
            cursor: grabbing
        }

        .gallery-slide {
            flex: 0 0 auto;
            width: clamp(220px, 32vw, 380px);
            aspect-ratio: 3/4;
            scroll-snap-align: start;
            background: #0c0c0d;
            overflow: hidden;
            position: relative;
        }

        .gallery-slide img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none
        }

        .gallery-slide:nth-child(6n+1) {
            background: radial-gradient(120% 120% at 20% 10%, rgba(95, 227, 209, .4), transparent 60%), #0c0c0d
        }

        .gallery-slide:nth-child(6n+2) {
            background: radial-gradient(120% 120% at 85% 90%, rgba(232, 98, 159, .4), transparent 60%), #0c0c0d
        }

        .gallery-slide:nth-child(6n+3) {
            background: radial-gradient(120% 120% at 50% 100%, rgba(95, 227, 209, .3), transparent 60%), #0c0c0d
        }

        .gallery-slide:nth-child(6n+4) {
            background: radial-gradient(120% 120% at 10% 90%, rgba(232, 98, 159, .3), transparent 60%), #0c0c0d
        }

        .gallery-slide:nth-child(6n+5) {
            background: radial-gradient(120% 120% at 90% 10%, rgba(95, 227, 209, .35), transparent 60%), #0c0c0d
        }

        .gallery-slide:nth-child(6n+6) {
            background: radial-gradient(120% 120% at 50% 50%, rgba(232, 98, 159, .32), transparent 65%), #0c0c0d
        }

        .gallery-hint {
            margin-top: 18px;
            font-family: var(--font-mono);
            font-size: 10px;
            letter-spacing: .14em;
            text-transform: uppercase;
            color: var(--text-dimmer);
        }

        /* ============================================
   CONTACT
   ============================================ */
        .contact-top {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            flex-wrap: wrap;
            gap: 24px;
            margin-bottom: clamp(40px, 6vw, 70px);
        }

        .contact-title {
            font-size: clamp(38px, 7vw, 84px);
            font-weight: 700;
            letter-spacing: -.02em;
            line-height: .95;
            max-width: 720px;
        }

        .social-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1px;
            background: var(--line);
            border: 1px solid var(--line);
        }

        .social-item {
            background: var(--bg);
            padding: 24px 22px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 16px;
            transition: background-color .3s var(--ease), color .3s var(--ease), padding-left .3s var(--ease);
        }

        .social-icon {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            border: 1px solid var(--line-strong);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color .3s var(--ease);
        }

        .social-icon svg {
            width: 18px;
            height: 18px;
            stroke: currentColor;
            stroke-width: 1.5;
            fill: none;
        }

        .social-item:hover .social-icon {
            border-color: currentColor;
        }

        .social-info {
            flex: 1;
        }

        .social-arrow {
            margin-left: auto;
        }

        .social-item:hover {
            background: var(--text);
            color: var(--bg);
            padding-left: 28px
        }

        .social-name {
            font-size: 15px;
            font-weight: 600;
            letter-spacing: -.005em
        }

        .social-handle {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-dim);
            margin-top: 3px
        }

        .social-item:hover .social-handle {
            color: color-mix(in srgb, var(--bg) 55%, transparent)
        }

        .social-arrow {
            font-family: var(--font-mono);
            font-size: 16px;
            transition: transform .3s var(--ease)
        }

        .social-item:hover .social-arrow {
            transform: translate(3px, -3px)
        }

        /* ============================================
   FOOTER
   ============================================ */
        footer {
            padding: 36px clamp(20px, 5vw, 56px);
            border-top: 1px solid var(--line);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px;
        }

        .footer-left {
            display: flex;
            align-items: center;
            gap: 12px
        }

        .footer-sigil {
            width: 20px;
            height: 20px;
            opacity: .6
        }

        .footer-sigil svg {
            width: 100%;
            height: 100%;
            stroke: var(--text);
            fill: none;
            stroke-width: 1
        }

        .footer-text {
            font-family: var(--font-mono);
            font-size: 11px;
            color: var(--text-dimmer);
            letter-spacing: .06em;
        }

        /* ============================================
   RESPONSIVE
   ============================================ */
        @media (max-width:900px) {
            :root {
                --hero-focus: 30% center;
            }

            .bio-wrap {
                grid-template-columns: 1fr
            }

            .bio-visual {
                position: relative;
                top: 0;
                aspect-ratio: 16/10
            }
        }

        @media (max-width:640px) {
            :root {
                --nav-h: 64px;
                --hero-focus: 18% center;
            }

            .nav-links {
                gap: 14px
            }

            .nav-links a {
                font-size: 10.5px
            }

            .hero-coord {
                display: none
            }

            .section {
                padding: 48px 20px 24px
            }

            .contact-title {
                font-size: clamp(32px, 9vw, 48px)
            }

            .social-item {
                padding: 20px 18px
            }

            .social-icon {
                width: 34px;
                height: 34px;
            }

            .social-icon svg {
                width: 15px;
                height: 15px;
            }
        }

        @media (prefers-reduced-motion:reduce) {
            * {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
                scroll-behavior: auto !important
            }
        }

        :focus-visible {
            outline: 1px solid var(--text);
            outline-offset: 3px
        }