:root {
  --ink: #171923;
  --ink-2: #24283a;
  --slate: #494d5f;
  --violet: #845bb3;
  --lilac: #d0bdf4;
  --sky: #a0d2eb;
  --cream: #e5eaf5;
  --soft: #cbd1df;
  --line: rgba(229, 234, 245, .18);
  --glass: rgba(229, 234, 245, .07);
  --shadow: rgba(4, 5, 11, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: #0c1018; }
body { margin: 0; color: var(--cream); background: radial-gradient(circle at 12% 15%, rgba(130,104,165,.14), transparent 28%), radial-gradient(circle at 88% 80%, rgba(88,131,157,.13), transparent 34%), #0c1018; font-family: "DM Sans", Arial, sans-serif; overflow-x: hidden; }
body::before { backdrop-filter: blur(0) saturate(1); background: rgba(20, 24, 39, 0); content: ""; inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity .34s, backdrop-filter .34s, background .34s; z-index: 30; }
body.is-disc-hovering::before { backdrop-filter: blur(14px) saturate(.66); background: rgba(12, 15, 26, .34); opacity: 1; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

.site-loader { align-items: center; background: #0c1018; display: grid; inset: 0; justify-items: center; opacity: 1; position: fixed; transition: opacity .48s ease, visibility .48s ease; visibility: visible; z-index: 200; }
.site-loader::before { background: radial-gradient(circle, rgba(160,210,235,.13), transparent 53%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.site-loader.is-complete { opacity: 0; visibility: hidden; }
.loader-brand { display: grid; gap: 20px; justify-items: center; position: relative; width: min(58vw, 480px); }
.loader-mark { aspect-ratio: 2 / 1; background: rgba(229,234,245,.11); -webkit-mask: url("assets/infynite-logo-transparent.png") center / contain no-repeat; mask: url("assets/infynite-logo-transparent.png") center / contain no-repeat; overflow: hidden; position: relative; width: 100%; }
.loader-mark span { animation: logo-loader-fill 1.5s cubic-bezier(.2,.82,.22,1) forwards; background: linear-gradient(90deg, #e5eaf5, #a0d2eb 47%, #d0bdf4); inset: 0; position: absolute; transform: scaleX(0); transform-origin: left center; }
.loader-brand p { color: var(--soft); font: 500 10px "DM Mono", monospace; letter-spacing: .26em; margin: 0; }
.loader-brand .loader-credit { color: var(--cream); font: 500 clamp(14px, 1.55vw, 20px) "DM Mono", monospace; letter-spacing: .14em; margin-top: -8px; text-shadow: 0 0 18px rgba(229,234,245,.2); }
@keyframes logo-loader-fill { 0% { transform: scaleX(0); } 76% { transform: scaleX(.92); } 100% { transform: scaleX(1); } }

.cursor-glow { --cursor-shape: polygon(50% 0%, 59% 38%, 100% 50%, 59% 62%, 50% 100%, 41% 62%, 0 50%, 41% 38%); filter: drop-shadow(0 1px 2px rgba(0,0,0,.36)); height: 26px; left: 0; opacity: 0; pointer-events: none; position: fixed; top: 0; transform: translate(-50%, -50%); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.85,.2,1), filter .2s ease; width: 26px; z-index: 100; }
.cursor-glow::before, .cursor-glow::after { clip-path: var(--cursor-shape); content: ""; inset: 0; position: absolute; transition: filter .2s ease, opacity .2s ease; }
.cursor-glow::before { background: linear-gradient(135deg, #fff 0%, #f3f3f5 27%, #bdbec4 53%, #fafafd 76%, #a6a7ad 100%); box-shadow: inset 2px 2px 3px rgba(255,255,255,.96), inset -2px -2px 3px rgba(57,56,66,.24); }
.cursor-glow::after { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(255,255,255,.12) 40%, transparent 62%); inset: 3px; opacity: .82; }
.cursor-glow span { display: none; }
.cursor-glow.active { animation: cursor-star-spin 1.05s linear infinite; filter: drop-shadow(0 0 4px rgba(255,255,255,.96)) drop-shadow(0 0 13px rgba(255,218,240,.45)); transform: translate(-50%, -50%) scale(1.42); }
.cursor-glow.active::before { background: linear-gradient(135deg, #fff 0%, #fff 29%, #d9d8e1 56%, #fff 78%, #c7c5d1 100%); }
.cursor-glow.active::after { opacity: 1; }
.cursor-glow.clicking { animation: none; filter: drop-shadow(0 0 7px rgba(255,255,255,.78)); transform: translate(-50%, -50%) scale(.82); }
@keyframes cursor-star-spin { from { transform: translate(-50%, -50%) scale(1.42) rotate(0deg); } to { transform: translate(-50%, -50%) scale(1.42) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cursor-glow.active { animation: none; } }
@media (hover: hover) and (pointer: fine) { body, body * { cursor: none !important; } }
.cursor-trail { animation: star-fade .75s ease-out forwards; color: var(--lilac); font-size: 13px; left: 0; pointer-events: none; position: fixed; top: 0; transform: translate(-50%, -50%); z-index: 99; }
.cursor-trail::before { content: "✦"; }
.cursor-trail-click { color: var(--sky); font-size: 25px; }
@keyframes star-fade { to { opacity: 0; transform: translate(-50%, -110%) scale(.35) rotate(80deg); } }

.minimal-nav { align-items: flex-start; display: flex; justify-content: space-between; left: 0; padding: 26px 4.5vw; pointer-events: none; position: absolute; right: 0; top: 0; z-index: 20; }
.minimal-nav::after { backdrop-filter: blur(13px) saturate(130%); background: linear-gradient(90deg, transparent, rgba(229,234,245,.1), transparent); border-radius: 99px; content: ""; height: 1px; left: 4.5vw; position: absolute; right: 4.5vw; top: 67px; }
.studio-brand, .nav-links { pointer-events: auto; position: relative; z-index: 1; }
.studio-brand { color: var(--cream); font: 500 12px/1.05 "DM Mono", monospace; letter-spacing: .1em; }
.studio-brand small { color: var(--lilac); display: block; font-size: 8px; letter-spacing: .17em; margin-top: 6px; }
.nav-links { display: flex; gap: clamp(14px, 2.2vw, 38px); font: 500 10px "DM Mono", monospace; letter-spacing: .12em; padding-top: 4px; text-transform: uppercase; }
.nav-links a { color: var(--soft); transition: color .2s, text-shadow .2s; }
.nav-links a:hover { color: var(--cream); text-shadow: 0 0 14px var(--sky); }

.hero { background: radial-gradient(ellipse 55% 70% at 52% 58%, rgba(130, 144, 177, .15), transparent 62%), radial-gradient(circle at 16% 80%, rgba(92, 72, 124, .18), transparent 36%), linear-gradient(130deg, #0b0e16 4%, #151827 48%, #090c13 100%); isolation: isolate; min-height: 100svh; overflow: hidden; position: relative; }
.hero::before { background: radial-gradient(circle at 50% 42%, transparent 0 16%, rgba(183, 199, 232, .06) 17%, transparent 35%), linear-gradient(110deg, transparent 20%, rgba(255,255,255,.045) 49%, transparent 67%); content: ""; inset: 0; opacity: .9; pointer-events: none; position: absolute; z-index: 0; }
.availability { color: var(--soft); font: 500 11px "DM Mono", monospace; left: 4.5vw; letter-spacing: .13em; position: absolute; top: 112px; z-index: 5; }
.availability i { animation: availability-pulse 1.35s ease-in-out infinite; background: #ff4e58; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,78,88,.1), 0 0 18px rgba(255,78,88,.92); display: inline-block; height: 7px; margin-right: 11px; vertical-align: -1px; width: 7px; }
@keyframes availability-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(255,78,88,.12), 0 0 8px rgba(255,78,88,.72); opacity: .7; transform: scale(.86); } 50% { box-shadow: 0 0 0 9px rgba(255,78,88,.05), 0 0 24px rgba(255,78,88,1); opacity: 1; transform: scale(1.18); } }
.hero-avatar-stage { bottom: 0; filter: drop-shadow(0 22px 30px rgba(80, 132, 185, .2)); height: min(82vh, 780px); left: 50%; pointer-events: none; position: absolute; transform: translateX(-50%); width: min(55vw, 620px); z-index: 3; }
.scene-avatar-rig, .scene-avatar { bottom: 0; height: 100%; left: 0; position: absolute; width: 100%; }
.scene-avatar { filter: grayscale(1) contrast(1.08) brightness(.98); mask-image: linear-gradient(to bottom, #000 0 68%, rgba(0,0,0,.95) 76%, transparent 96%); object-fit: contain; object-position: bottom center; opacity: 0; transition: opacity .11s linear; }
.scene-avatar.is-active { opacity: 1; }
.hero-copy { bottom: clamp(62px, 10vh, 105px); left: 5vw; max-width: 470px; position: absolute; z-index: 6; }
.hero-overline, .section-kicker { color: var(--sky); font: 500 10px "DM Mono", monospace; letter-spacing: .18em; margin: 0 0 15px; }
.hero h1 { color: var(--cream); font: 500 clamp(52px, 7.5vw, 112px)/.72 "Cormorant Garamond", Georgia, serif; letter-spacing: -.07em; margin: 0; max-width: 480px; }
.hero h1 em { color: var(--lilac); display: block; font-weight: 500; margin-left: .36em; }
.founder-line { align-items: center; color: var(--soft); display: flex; font: 500 9px "DM Mono", monospace; gap: 7px; letter-spacing: .1em; margin: 26px 0 0 4px; }
.founder-line b { color: var(--cream); font-weight: 500; }
.studio-logo-icon { animation: logo-pulse 3s ease-in-out infinite; background: var(--cream); display: inline-block; height: 13px; mask: url("assets/infynite-logo-transparent.png") center / contain no-repeat; transform-origin: center; width: 22px; }
.connect-orb { align-items: center; animation: connect-orb-float 8s ease-in-out infinite; backdrop-filter: blur(13px); background: rgba(160,210,235,.1); border: 1px solid rgba(229,234,245,.45); border-radius: 50%; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 18px 45px rgba(0,0,0,.18); display: flex; height: 124px; justify-content: center; margin: 35px 0 0 5px; overflow: hidden; position: relative; transition: background .3s, transform .3s; width: 124px; }
.connect-orb::after { border: 1px solid rgba(160,210,235,.35); border-radius: 50%; content: ""; inset: 9px; position: absolute; }
.connect-orb span { font: 500 10px/1.35 "DM Mono", monospace; letter-spacing: .07em; position: relative; z-index: 1; }
.connect-orb b { bottom: 15px; font: 400 24px/1 "Cormorant Garamond", serif; position: absolute; right: 18px; z-index: 1; }
.connect-orb:hover { animation-play-state: paused; background: rgba(180, 78, 255, .68); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 38px rgba(185, 77, 255, .62), 0 18px 45px rgba(0,0,0,.18); transform: rotate(-9deg) scale(1.07); }
.hero-linkedin-orb { align-items: center; animation: hero-linkedin-float 6.5s ease-in-out infinite; backdrop-filter: blur(14px) saturate(145%); background: linear-gradient(135deg, rgba(229,234,245,.23), rgba(160,210,235,.06) 48%, rgba(132,91,179,.25)); border: 1px solid rgba(229,234,245,.48); border-radius: 50%; box-shadow: inset 0 1px rgba(255,255,255,.35), inset 0 -10px 18px rgba(28,24,63,.22), 0 0 24px rgba(161,210,235,.36), 0 18px 38px rgba(0,0,0,.25); display: flex; height: 56px; justify-content: center; position: absolute; right: clamp(7vw, 15vw, 20vw); top: 59%; transition: background .3s, box-shadow .3s, transform .3s; width: 56px; z-index: 7; }
.hero-linkedin-orb::after { border: 1px solid rgba(208,189,244,.52); border-radius: 50%; content: ""; inset: 6px; position: absolute; }
.hero-linkedin-orb .linkedin-icon { fill: var(--cream); height: 17px; position: relative; width: 17px; z-index: 2; }
.linkedin-orbit-text { animation: linkedin-orbit-spin 11s linear infinite; height: 100%; inset: 0; overflow: visible; pointer-events: none; position: absolute; width: 100%; z-index: 1; }
.linkedin-orbit-text text { fill: var(--cream); font: 500 11.5px "DM Mono", monospace; letter-spacing: .07em; }
.linkedin-hover-label { backdrop-filter: blur(12px); background: rgba(13, 37, 62, .84); border: 1px solid rgba(160,210,235,.76); border-radius: 99px; box-shadow: 0 0 18px rgba(112,202,255,.35); color: var(--cream); font: 500 7px "DM Mono", monospace; left: 50%; letter-spacing: .11em; opacity: 0; padding: 7px 9px; pointer-events: none; position: absolute; top: -31px; transform: translate(-50%, 5px) scale(.9); transition: opacity .22s, transform .22s; white-space: nowrap; z-index: 5; }
.hero-linkedin-orb:hover, .hero-linkedin-orb:focus-visible { animation-play-state: paused; background: rgba(36, 129, 192, .58); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 0 35px rgba(100,202,255,.85), 0 18px 38px rgba(0,0,0,.3); outline: 0; transform: scale(1.16) rotate(10deg); }
.hero-linkedin-orb:hover .linkedin-hover-label, .hero-linkedin-orb:focus-visible .linkedin-hover-label { animation: linkedin-label-blink .85s ease-in-out infinite; opacity: 1; transform: translate(-50%, 0) scale(1); }
.hero-scroll { align-items: center; backdrop-filter: blur(11px); background: rgba(229,234,245,.06); border: 1px solid rgba(229,234,245,.26); border-radius: 99px; bottom: 28px; display: inline-flex; gap: 10px; left: 50%; padding: 8px 12px 8px 15px; position: absolute; transform: translateX(-50%); transition: background .25s, box-shadow .25s, transform .25s; z-index: 8; }
.hero-scroll span { color: var(--soft); font: 500 8px "DM Mono", monospace; letter-spacing: .16em; }.hero-scroll b { color: var(--cream); font: 400 19px/1 "Cormorant Garamond", Georgia, serif; }
.hero-scroll:hover, .hero-scroll:focus-visible { background: rgba(132,91,179,.35); box-shadow: 0 0 23px rgba(185,77,255,.5); outline: 0; transform: translateX(-50%) translateY(-4px); }
.hero-foot { bottom: 34px; color: rgba(229,234,245,.55); font: 500 9px "DM Mono", monospace; letter-spacing: .2em; margin: 0; position: absolute; right: 4.5vw; writing-mode: vertical-rl; z-index: 6; }
.hero-shape { color: var(--lilac); pointer-events: none; position: absolute; z-index: 2; }
.hero-ring { border: 1px solid rgba(160,210,235,.45); border-radius: 50%; height: clamp(170px, 23vw, 350px); right: 11vw; top: 22vh; width: clamp(170px, 23vw, 350px); animation: orbit-float 8s ease-in-out infinite; }
.hero-ring::after { border: 1px dashed rgba(208,189,244,.5); border-radius: 50%; content: ""; inset: 20%; position: absolute; }
.hero-diamond { border: 1px solid rgba(229,234,245,.42); height: 68px; right: 20%; top: 18%; transform: rotate(45deg); width: 68px; animation: diamond-float 6s ease-in-out infinite; }
.hero-star { bottom: 28%; font-size: clamp(38px, 4vw, 70px); right: 8vw; text-shadow: 0 0 30px rgba(208,189,244,.75); animation: star-breathe 4s ease-in-out infinite; }
@keyframes orbit-float { 50% { transform: translate(-18px, 20px) rotate(25deg); } }
@keyframes diamond-float { 50% { transform: translate(16px, 22px) rotate(140deg); } }
@keyframes star-breathe { 50% { opacity: .45; transform: translateY(-16px) rotate(25deg) scale(1.15); } }
@keyframes logo-pulse { 50% { filter: drop-shadow(0 0 8px var(--sky)); transform: translateY(-1px) scale(1.1); } }
@keyframes connect-orb-float { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-11px) rotate(6deg); } }
@keyframes hero-linkedin-float { 0%, 100% { filter: brightness(1); transform: translateY(0) rotate(-7deg); } 50% { filter: brightness(1.18); transform: translateY(-13px) rotate(8deg) scale(1.04); } }
@keyframes linkedin-orbit-spin { to { transform: rotate(360deg); } }
@keyframes linkedin-label-blink { 0%, 100% { filter: brightness(1); opacity: .68; } 50% { filter: brightness(1.55); opacity: 1; } }

.content-flow { background: radial-gradient(ellipse 88% 22% at 10% 5%, rgba(132,91,179,.2), transparent 72%), radial-gradient(ellipse 74% 25% at 88% 28%, rgba(91,157,191,.18), transparent 74%), radial-gradient(ellipse 92% 29% at 12% 62%, rgba(118,91,171,.16), transparent 74%), radial-gradient(ellipse 78% 24% at 86% 89%, rgba(107,166,190,.16), transparent 73%), linear-gradient(180deg, #121622 0%, #171c2b 25%, #20273a 52%, #1b2233 76%, #292e3c 100%); isolation: isolate; position: relative; }
.section-pad { padding: clamp(95px, 12vw, 180px) 5vw; position: relative; }
.section-pad > :not(.celestial-field) { position: relative; z-index: 1; }
.celestial-field { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 0; }
.celestial-field span { animation: celestial-drift var(--drift-speed, 8s) ease-in-out infinite; color: rgba(208, 189, 244, .33); font: 400 clamp(13px, 1.7vw, 25px)/1 "Cormorant Garamond", Georgia, serif; position: absolute; text-shadow: 0 0 18px rgba(160, 210, 235, .42); }
.celestial-field span:nth-child(1) { --drift-speed: 7s; left: 7%; top: 11%; }.celestial-field span:nth-child(2) { --drift-speed: 10s; left: 18%; top: 63%; }.celestial-field span:nth-child(3) { --drift-speed: 12s; left: 31%; top: 22%; }.celestial-field span:nth-child(4) { --drift-speed: 8s; left: 43%; top: 79%; }.celestial-field span:nth-child(5) { --drift-speed: 11s; left: 56%; top: 12%; }.celestial-field span:nth-child(6) { --drift-speed: 9s; left: 68%; top: 57%; }.celestial-field span:nth-child(7) { --drift-speed: 13s; left: 79%; top: 26%; }.celestial-field span:nth-child(8) { --drift-speed: 7.5s; left: 89%; top: 73%; }.celestial-field span:nth-child(9) { --drift-speed: 12s; left: 13%; top: 88%; }.celestial-field span:nth-child(10) { --drift-speed: 9s; left: 93%; top: 15%; }.celestial-field span:nth-child(11) { --drift-speed: 10s; left: 51%; top: 42%; }.celestial-field span:nth-child(12) { --drift-speed: 8.5s; left: 72%; top: 89%; }
@keyframes celestial-drift { 50% { opacity: .52; transform: translate(10px, -18px) rotate(18deg) scale(1.22); } }
.intro { background: transparent; }
.intro-grid { align-items: end; display: grid; gap: clamp(30px, 8vw, 150px); grid-template-columns: 1.3fr .7fr; }
h2 { color: var(--cream); font: 500 clamp(54px, 7.2vw, 118px)/.77 "Cormorant Garamond", Georgia, serif; letter-spacing: -.065em; margin: 0; }
h2 em { color: var(--lilac); font-style: italic; }
.intro-body { color: var(--soft); font-size: clamp(16px, 1.45vw, 21px); line-height: 1.45; max-width: 450px; }
.intro-body p { margin: 0 0 25px; }
.intro-note { border-left: 1px solid var(--violet); color: var(--cream); font-size: 15px; padding-left: 17px; }
.proof-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); margin-top: clamp(60px, 9vw, 130px); }
.proof-card { align-items: center; background: linear-gradient(120deg, rgba(229,234,245,.1), rgba(229,234,245,.025)); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 25px 65px -35px var(--shadow), inset 0 1px rgba(255,255,255,.12); display: flex; flex-direction: column; min-height: 190px; padding: 25px; text-align: center; transition: border-color .3s, transform .3s; }
.proof-card:hover { border-color: rgba(160,210,235,.7); transform: translateY(-7px); }
.proof-card strong { align-items: center; animation: proof-title-float 5.6s ease-in-out infinite; color: var(--sky); display: flex; flex-direction: column; font: 600 clamp(50px, 5vw, 78px)/.75 "Cormorant Garamond", Georgia, serif; gap: 13px; letter-spacing: -.06em; }
.proof-card:nth-child(2) strong { animation-delay: -1.8s; }.proof-card:nth-child(3) strong { animation-delay: -3.5s; }
.proof-card strong b { color: var(--sky); font-weight: 600; text-shadow: 0 0 20px rgba(160,210,235,.28); }
.proof-card.proof-total { border-color: rgba(160,210,235,.38); }
.proof-card.proof-total strong b { font-size: 1.22em; }
.proof-card small { color: var(--lilac); font: 600 10px "DM Mono", monospace; letter-spacing: .12em; }
.proof-card span { color: var(--soft); font-size: 13px; line-height: 1.5; margin-top: auto; }
@keyframes proof-title-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.disc-library { background: transparent; overflow: hidden; position: relative; z-index: 31; }
.disc-library::before { background: radial-gradient(ellipse 70% 24% at 22% 13%, rgba(130, 96, 184, .18), transparent 71%), radial-gradient(ellipse 62% 25% at 77% 39%, rgba(82, 151, 187, .14), transparent 72%), radial-gradient(ellipse 68% 24% at 30% 67%, rgba(104, 74, 159, .15), transparent 72%), radial-gradient(ellipse 61% 24% at 75% 89%, rgba(85, 151, 186, .12), transparent 72%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 0; }
.disc-library::after, .about::after, .fashion::after { color: rgba(160,210,235,.42); content: "✦"; font-size: clamp(32px, 4vw, 64px); pointer-events: none; position: absolute; text-shadow: 0 0 30px rgba(160,210,235,.3); }
.disc-library::after { animation: star-breathe 6s ease-in-out infinite; bottom: 7%; right: 7%; }
.about::after { animation: star-breathe 7s ease-in-out infinite reverse; bottom: 9%; right: 8%; }
.fashion::after { animation: star-breathe 5s ease-in-out infinite; right: 8%; top: 9%; }
.library-intro { align-items: end; display: flex; justify-content: space-between; margin-bottom: 42px; }
.library-intro p { color: var(--soft); font-size: 15px; line-height: 1.55; margin: 0; max-width: 370px; }
.disc-group { background: transparent; isolation: isolate; margin: 0 -5vw clamp(96px, 13vw, 165px); overflow: visible; padding: clamp(32px, 4vw, 54px) 0 0; position: relative; }
.disc-group:nth-child(2), .disc-group:nth-child(3), .disc-group:nth-child(4) { background: transparent; }
.disc-group::before, .disc-group:nth-child(even)::before { content: none; }
.disc-group-head { align-items: baseline; display: flex; justify-content: space-between; margin: 0 5vw 25px; position: relative; z-index: 1; }
.disc-group-head h3, .disc-group-head h3 .reveal-word { color: #fff !important; font-family: "Cormorant Garamond", Georgia, serif !important; font-size: clamp(42px, 4.7vw, 76px); font-style: normal; font-weight: 500; letter-spacing: -.055em; line-height: .84; margin: 0; }
.disc-group-head span { color: var(--lilac); font: 600 clamp(12px, 1.15vw, 18px) "DM Mono", monospace; letter-spacing: .15em; }
.disc-collage { display: grid; gap: clamp(19px, 2.8vw, 44px); grid-template-columns: repeat(3, minmax(0, 1fr)); padding: clamp(48px, 6vw, 86px) 5vw clamp(64px, 8vw, 110px); position: relative; z-index: 1; }
.disc-card { background: transparent; border: 0; color: var(--cream); cursor: pointer; min-width: 0; padding: 0; position: relative; text-align: left; transition: filter .3s, opacity .3s; }
.disc-card:nth-child(3n + 1) .record-package { transform: rotate(-2deg) translateY(7px); }
.disc-card:nth-child(3n + 2) .record-package { transform: rotate(1.5deg) translateY(-9px); }
.disc-card:nth-child(3n) .record-package { transform: rotate(-.8deg) translateY(3px); }
.record-package { aspect-ratio: 1 / .82; display: block; position: relative; transform-origin: center; transition: transform .46s cubic-bezier(.2,.82,.2,1); width: 100%; }
.record-sleeve { background: #1a2030; box-shadow: 0 22px 45px -22px rgba(0,0,0,.86), 0 0 0 1px rgba(255,255,255,.16); display: block; height: 86%; left: 5%; overflow: hidden; position: absolute; top: 7%; transition: box-shadow .4s, transform .45s cubic-bezier(.2,.8,.2,1); width: 76%; z-index: 2; }
.record-cover { background-image: linear-gradient(180deg, rgba(5,7,14,.02) 15%, rgba(5,7,14,.2) 56%, rgba(4,6,13,.82) 100%), var(--cover-art); background-position: center; background-size: cover; display: flex; flex-direction: column; height: 100%; justify-content: flex-end; overflow: hidden; padding: clamp(15px, 2vw, 27px); position: relative; width: 100%; }
.record-cover::before { border: 1px solid rgba(255,255,255,.38); content: ""; inset: 8px; mix-blend-mode: screen; pointer-events: none; position: absolute; }
.record-cover::after { background: linear-gradient(135deg, rgba(255,255,255,.28), transparent 25%, transparent 76%, rgba(255,255,255,.13)); content: ""; inset: 0; pointer-events: none; position: absolute; }
.record-cover-type, .record-cover-play { color: rgba(229,234,245,.86); font: 500 clamp(8px, .82vw, 11px) "DM Mono", monospace; letter-spacing: .13em; position: relative; z-index: 1; }
.record-cover-type { margin-bottom: auto; }
.record-cover strong { color: #fff; font: 500 clamp(26px, 2.65vw, 43px)/.87 "Cormorant Garamond", Georgia, serif; letter-spacing: -.045em; max-width: 95%; position: relative; text-shadow: 0 3px 12px rgba(0,0,0,.65); z-index: 1; }
.record-cover-play { margin-top: 15px; }
.record-disc { display: block; height: 78%; position: absolute; right: -2%; top: 11%; transform: translateX(0); transition: right .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); width: 78%; z-index: 1; }
.disc { aspect-ratio: 1; border-radius: 50%; display: block; height: 100%; isolation: isolate; overflow: hidden; position: relative; transform: perspective(1040px) rotateX(2deg) rotateY(0deg) rotateZ(-1deg); transform-origin: center; transition: box-shadow .35s, filter .45s; width: 100%; }
.disc-art { background-image: linear-gradient(rgba(9,11,18,.14), rgba(9,11,18,.48)), var(--disc-art); background-position: center; background-size: cover; border-radius: 50%; clip-path: circle(47.6% at 50% 50%); inset: 2%; position: absolute; z-index: 1; }
.disc-texture { height: 100%; inset: 0; mix-blend-mode: screen; object-fit: contain; opacity: .78; pointer-events: none; position: absolute; width: 100%; z-index: 3; }
.disc-hub { background: var(--ink); border: 3px solid rgba(229,234,245,.45); border-radius: 50%; box-shadow: 0 0 0 5px rgba(15,17,25,.64), inset 0 3px 8px rgba(0,0,0,.7); height: 15%; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15%; z-index: 5; }
.disc-card:hover, .disc-card:focus-visible { z-index: 5; }
.disc-card:hover .record-package, .disc-card:focus-visible .record-package { transform: scale(1.38) rotate(0); }
.disc-card:hover .record-disc, .disc-card:focus-visible .record-disc { right: -35%; transform: translateX(5%); }
.disc-card:hover .record-sleeve, .disc-card:focus-visible .record-sleeve { box-shadow: 0 28px 54px -20px rgba(0,0,0,.96), 0 0 0 1px rgba(255,255,255,.27); transform: translateX(-2%) scale(.99); }
.disc-card:hover .disc, .disc-card:focus-visible .disc { animation: disc-spin 4.4s linear infinite; box-shadow: 0 0 0 2px rgba(211, 132, 255, .62), 0 0 20px rgba(179, 79, 255, .38), inset 0 0 18px rgba(226, 179, 255, .2); filter: none; }
.disc-group:has(.disc-card:hover) .disc-card:not(:hover) { filter: blur(2px) brightness(.65); opacity: .48; }
.disc-card:focus-visible { outline: 1px solid var(--sky); outline-offset: 7px; }
@keyframes disc-spin { from { transform: perspective(1200px) rotate(0) scale(1.04); } to { transform: perspective(1200px) rotate(360deg) scale(1.04); } }

.about { background: transparent; }
.about-top { align-items: end; display: flex; justify-content: space-between; margin-bottom: clamp(55px, 8vw, 115px); }
.about-top .section-kicker { align-self: flex-start; }
.about-grid { display: grid; gap: clamp(45px, 9vw, 150px); grid-template-columns: .7fr 1.3fr; }
.about-copy { color: var(--soft); font-size: clamp(17px, 1.65vw, 24px); line-height: 1.46; }
.about-copy p { margin: 0 0 28px; }
.about-copy b { color: var(--lilac); font-weight: 500; }
.experience-panel { backdrop-filter: blur(16px) saturate(125%); background: linear-gradient(122deg, rgba(160,210,235,.1), rgba(132,91,179,.08)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 28px 65px -42px var(--shadow), inset 0 1px 1px rgba(255,255,255,.15); margin-top: 38px; padding: 23px; }
.experience-kicker { color: var(--sky); display: block; font: 500 10px "DM Mono", monospace; letter-spacing: .17em; margin-bottom: 13px; }
.experience-panel > p { color: var(--cream); font-size: 15px; line-height: 1.45; margin-bottom: 18px; }
.experience-list { display: grid; gap: 12px; list-style: none; margin: 0; padding: 0; }
.experience-list li { border-top: 1px solid rgba(229,234,245,.15); display: grid; gap: 4px; padding-top: 12px; }
.experience-meta { align-items: baseline; display: flex; gap: 9px 14px; justify-content: space-between; }
.experience-list strong { color: var(--cream); font: 600 13px/1.25 "DM Sans", Arial, sans-serif; letter-spacing: .025em; }
.experience-list strong small { color: var(--sky); font: inherit; }
.experience-list time { color: var(--lilac); flex: 0 0 auto; font: 600 11px/1.25 "DM Mono", monospace; }
.experience-list span { color: var(--soft); font: 500 13px/1.42 "DM Sans", Arial, sans-serif; }
.skills-stack { display: grid; gap: 14px; }
.skill-card { backdrop-filter: blur(14px); background: linear-gradient(112deg, rgba(160,210,235,.1), rgba(132,91,179,.08)); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 28px 65px -42px var(--shadow), inset 0 1px 1px rgba(255,255,255,.15); padding: 24px 26px; }
.skill-card > span { color: var(--sky); display: block; font: 500 9px "DM Mono", monospace; letter-spacing: .17em; }
.skill-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; }
.skill-tags span { backdrop-filter: blur(10px) saturate(140%); background: linear-gradient(125deg, rgba(229,234,245,.16), rgba(160,210,235,.06)); border: 1px solid rgba(229,234,245,.24); border-radius: 8px; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 8px 18px -13px rgba(0,0,0,.85); color: var(--cream); font: 500 12px/1.15 "DM Sans", Arial, sans-serif; padding: 8px 10px; transition: background .25s, border-color .25s, transform .25s; }
.skill-tags span:hover { background: rgba(132,91,179,.26); border-color: rgba(208,189,244,.62); transform: translateY(-2px); }

.fashion { background: transparent; }
.fashion-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 55px; }
.fashion-shelf { align-items: end; border-bottom: 18px solid #30364a; box-shadow: 0 17px 18px -12px rgba(0,0,0,.72), inset 0 -4px rgba(229,234,245,.08); display: flex; gap: 14px; min-height: 465px; padding: 0 28px 18px; position: relative; }
.fashion-shelf::before { background: linear-gradient(90deg, #30364a, #535a70, #30364a); box-shadow: 0 -1px rgba(229,234,245,.28); content: ""; height: 16px; left: 0; position: absolute; right: 0; top: 100%; }
.shelf-book { background: #293043; border: 1px solid rgba(229,234,245,.3); border-bottom: 0; border-radius: 6px 7px 0 0; box-shadow: 9px 13px 21px -13px rgba(0,0,0,.95), inset 3px 0 rgba(255,255,255,.19), inset -4px 0 rgba(0,0,0,.4); color: var(--cream); cursor: pointer; display: flex; flex: 0 0 clamp(155px, 15vw, 210px); height: 390px; overflow: hidden; padding: 0; position: relative; text-align: left; transform: perspective(900px) rotateY(-7deg) rotateZ(-1.5deg); transform-origin: bottom left; transition: flex-basis .65s cubic-bezier(.2,.8,.2,1), transform .5s, box-shadow .4s; }
.shelf-book-1 { background: #5a405d; transform: perspective(900px) rotateY(6deg) rotateZ(1.5deg); }
.shelf-book-2 { background: #3f5361; transform: perspective(900px) rotateY(-4deg) rotateZ(-2deg); }
.shelf-book:hover, .shelf-book:focus-visible { box-shadow: 25px 28px 45px -22px rgba(0,0,0,.98), inset 3px 0 rgba(255,255,255,.3); flex-basis: min(45vw, 540px); outline: 0; transform: perspective(1200px) translateY(-18px) rotateY(0) rotateZ(0); z-index: 5; }
.book-cover { background: #1b2130; inset: 8px 9px 8px 42px; opacity: .94; overflow: hidden; position: absolute; transform: scale(1.08); transition: opacity .35s, transform .6s; z-index: 1; }
.book-cover img { filter: blur(.75px) saturate(1.25) brightness(1.12); height: 100%; object-fit: cover; transform: scale(1.09); width: 100%; }
.book-cover::after { border: 1px solid rgba(234,235,242,.45); content: ""; inset: 0; position: absolute; }
.shelf-book:hover .book-cover, .shelf-book:focus-visible .book-cover { opacity: 0; transform: translateX(25px) scale(1.08); }
.book-spine { background: linear-gradient(90deg, rgba(255,255,255,.14), transparent 15%, rgba(0,0,0,.28)); box-shadow: 3px 0 6px rgba(0,0,0,.3), inset 1px 0 rgba(255,255,255,.22); display: flex; inset: 0 auto 0 0; justify-content: center; padding: 14px 7px; position: absolute; width: 39px; z-index: 4; }
.book-spine::after { border: 1px solid rgba(229,234,245,.26); content: ""; inset: 7px 5px; position: absolute; }
.book-spine strong { color: var(--cream); font: 600 18px/.9 "Caveat", cursive; letter-spacing: .01em; position: relative; text-align: center; text-shadow: 0 2px 6px rgba(0,0,0,.7); writing-mode: vertical-rl; z-index: 1; }
.book-pages { inset: 10px 12px 10px 50px; min-width: 0; opacity: 0; position: absolute; transition: opacity .35s; z-index: 2; }
.book-page { border: 5px solid #e5dfd1; border-radius: 3px; bottom: 0; box-shadow: -8px 12px 20px -12px rgba(0,0,0,.85); height: 100%; left: clamp(4px, 4%, 22px); object-fit: cover; pointer-events: none; position: absolute; transform: translateX(0) rotate(-1deg) scale(.96); transition: opacity .4s, transform .45s, filter .35s; width: min(80%, 300px); }
.shelf-book:hover .book-pages, .shelf-book:focus-visible .book-pages { opacity: 1; }
.shelf-book:hover .book-page, .shelf-book:focus-visible .book-page { pointer-events: auto; transform: translateX(calc(var(--page-index, 0) * 11px)) rotate(calc(var(--page-index, 0) * .4deg)); }
.book-page.is-front { filter: brightness(1.06); transform: translateX(38px) rotate(0deg) scale(1.02) !important; }

.contact { background: transparent; min-height: 78vh; overflow: hidden; }
.contact h2 { margin: 20px 0 clamp(55px, 8vw, 120px); max-width: 1000px; position: relative; z-index: 1; }
.contact h2 em { color: var(--sky); }
.contact-links { display: grid; gap: 16px; max-width: 650px; position: relative; z-index: 1; }
.contact-links a { backdrop-filter: blur(14px); background: rgba(23,25,35,.16); border: 1px solid rgba(229,234,245,.36); border-radius: 14px; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 25px 55px -32px rgba(0,0,0,.68); color: var(--cream); font: 500 clamp(16px, 2vw, 25px) "Cormorant Garamond", Georgia, serif; padding: 17px 21px; transition: background .3s, transform .3s; }
.contact-links a:hover { background: rgba(132,91,179,.32); transform: translateX(8px); }
.contact-links small { color: var(--sky); display: block; font: 500 8px "DM Mono", monospace; letter-spacing: .16em; margin-bottom: 7px; }
.contact-socials { margin-top: clamp(38px, 5vw, 68px); position: relative; z-index: 1; }
.contact-socials p { color: var(--cream); font: 500 clamp(17px, 2vw, 29px)/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .13em; margin: 0 0 20px; }
.contact-socials p i { color: var(--lilac); font-style: normal; margin: 0 .2em; }
.social-icon-links { display: flex; gap: 12px; }
.social-icon { align-items: center; backdrop-filter: blur(16px) saturate(145%); background: linear-gradient(135deg, rgba(229,234,245,.2), rgba(160,210,235,.06) 44%, rgba(132,91,179,.2)); border: 1px solid rgba(229,234,245,.38); border-radius: 15px; box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -10px 20px rgba(21,20,42,.13), 0 15px 35px -22px rgba(0,0,0,.85); display: inline-flex; height: 52px; justify-content: center; transition: background .3s, border-color .3s, box-shadow .3s, transform .3s; width: 52px; }
.social-icon svg { fill: var(--cream); height: 22px; transition: filter .3s, transform .3s; width: 22px; }
.social-icon:hover, .social-icon:focus-visible { background: linear-gradient(135deg, rgba(202,160,255,.47), rgba(150,104,240,.26)); border-color: rgba(224,196,255,.93); box-shadow: inset 0 1px rgba(255,255,255,.4), 0 0 26px rgba(186,89,255,.66), 0 17px 35px -20px rgba(0,0,0,.82); outline: 0; transform: translateY(-5px) scale(1.14); }
.social-icon:hover svg, .social-icon:focus-visible svg { filter: drop-shadow(0 0 7px rgba(255,255,255,.9)); transform: scale(1.05); }
.contact-shape { pointer-events: none; position: absolute; }
.contact-orbit { border: 1px solid rgba(229,234,245,.25); border-radius: 50%; height: min(55vw, 630px); right: -8vw; top: 10%; width: min(55vw, 630px); animation: orbit-float 10s ease-in-out infinite; }
.contact-orbit::after { border: 1px dashed rgba(160,210,235,.4); border-radius: 50%; content: ""; inset: 15%; position: absolute; }
.contact-cube { background: rgba(160,210,235,.25); border: 1px solid rgba(229,234,245,.4); height: 85px; right: 15%; top: 20%; transform: rotate(22deg); width: 85px; animation: diamond-float 7s ease-in-out infinite; }

.video-modal, .fashion-modal { background: rgba(10,11,17,.84); border: 0; height: 100%; max-height: none; max-width: none; padding: 5vh 5vw; width: 100%; }
.video-modal::backdrop, .fashion-modal::backdrop { backdrop-filter: blur(13px); background: rgba(5,6,10,.7); }
.modal-inner, .fashion-modal-inner { margin: auto; max-width: 1260px; }
.modal-bar, .fashion-modal-head { align-items: end; display: flex; justify-content: space-between; margin-bottom: 18px; }
.modal-actions { align-items: center; display: flex; gap: 14px; }
.modal-actions a { border-bottom: 1px solid rgba(160,210,235,.7); color: var(--sky); font: 500 9px "DM Mono", monospace; letter-spacing: .11em; padding-bottom: 5px; transition: color .2s, border-color .2s; }
.modal-actions a:hover, .modal-actions a:focus-visible { border-color: var(--cream); color: var(--cream); outline: 0; }
.modal-bar small, .fashion-modal-head small { color: var(--sky); font: 500 9px "DM Mono", monospace; letter-spacing: .16em; }
.modal-bar h3, .fashion-modal-head h3 { color: var(--cream); font: 500 clamp(30px, 4vw, 60px)/.85 "Cormorant Garamond", Georgia, serif; margin: 11px 0 0; }
.modal-close, .fashion-modal-close { background: rgba(229,234,245,.12); border: 1px solid rgba(229,234,245,.42); border-radius: 50%; color: var(--cream); cursor: pointer; font-size: 30px; height: 46px; line-height: 1; width: 46px; }
.modal-video { aspect-ratio: 16 / 9; background: #08090e; border: 1px solid rgba(229,234,245,.24); border-radius: 16px; box-shadow: 0 45px 100px -38px rgba(0,0,0,.95); overflow: hidden; position: relative; }
.modal-video iframe { border: 0; height: 100%; width: 100%; }
.modal-loading { align-items: center; background: #08090e; color: var(--soft); display: flex; flex-direction: column; font: 500 10px "DM Mono", monospace; gap: 13px; inset: 0; justify-content: center; letter-spacing: .18em; opacity: 1; pointer-events: none; position: absolute; transition: opacity .28s ease, visibility .28s ease; z-index: 2; }
.modal-loading span { animation: modal-loader-rotate 1s linear infinite; border: 1px solid rgba(160,210,235,.25); border-radius: 50%; border-top-color: var(--sky); height: 30px; width: 30px; }
.modal-loading.is-hidden { opacity: 0; visibility: hidden; }
@keyframes modal-loader-rotate { to { transform: rotate(360deg); } }
.fashion-modal-inner { position: relative; }
.fashion-modal-close { position: absolute; right: 0; top: 0; z-index: 3; }
.fashion-modal-head { padding-right: 65px; }
.fashion-modal-head span { color: var(--lilac); font: 500 10px "DM Mono", monospace; }
.fashion-modal-stage { align-items: center; display: flex; gap: 16px; justify-content: center; }
.fashion-modal-stage img { border-radius: 14px; max-height: 67vh; max-width: calc(100% - 120px); object-fit: contain; }
.fashion-modal-stage button { background: rgba(229,234,245,.1); border: 1px solid var(--line); border-radius: 50%; color: var(--cream); cursor: pointer; font-size: 21px; height: 45px; width: 45px; }
.fashion-modal-strip { display: flex; gap: 8px; margin-top: 16px; overflow-x: auto; }
.fashion-modal-strip button { background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; flex: 0 0 68px; height: 68px; overflow: hidden; padding: 0; }
.fashion-modal-strip button.is-active { border-color: var(--sky); }
.fashion-modal-strip img { height: 100%; object-fit: cover; width: 100%; }

/* Neon-noise art direction: colourful, animated, but kept behind the work. */
html { background: #05050a; }
body { background: radial-gradient(ellipse 64% 38% at 8% 14%, rgba(23, 213, 240, .18), transparent 64%), radial-gradient(ellipse 52% 42% at 91% 26%, rgba(255, 64, 170, .14), transparent 66%), radial-gradient(ellipse 74% 42% at 50% 96%, rgba(146, 76, 255, .18), transparent 72%), #05050a; }
body::before, body.is-disc-hovering::before { backdrop-filter: none; background: transparent; content: none; opacity: 0; }

.hero { background: radial-gradient(ellipse 34% 57% at 14% 72%, rgba(255, 189, 46, .25), transparent 66%), radial-gradient(ellipse 36% 48% at 79% 20%, rgba(43, 223, 255, .25), transparent 67%), radial-gradient(ellipse 48% 44% at 56% 76%, rgba(184, 51, 255, .24), transparent 68%), linear-gradient(130deg, #05050a 4%, #111124 48%, #070713 100%); }
.hero::before { animation: neon-atmosphere 18s ease-in-out infinite alternate; background: conic-gradient(from 225deg at 31% 67%, transparent 0 16%, rgba(72, 240, 255, .26) 18% 22%, transparent 25% 48%, rgba(255, 67, 172, .2) 51% 55%, transparent 59% 100%), radial-gradient(ellipse 47% 72% at 54% 50%, rgba(155, 78, 255, .15), transparent 71%); filter: blur(1px) saturate(1.25); opacity: .9; }
.hero::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); content: ""; inset: 0; mix-blend-mode: soft-light; opacity: .16; pointer-events: none; position: absolute; z-index: 1; }
.hero > :not(.hero-avatar-stage):not(.hero-shape), .hero-avatar-stage, .hero-shape { z-index: 2; }
.hero-avatar-stage { z-index: 3; }
.hero-linkedin-orb, .hero-scroll { border-color: rgba(255,255,255,.45); box-shadow: 0 0 0 1px rgba(56, 219, 255, .12), 0 12px 34px rgba(0,0,0,.32); }
.minimal-nav::after { background: linear-gradient(90deg, transparent, rgba(49, 231, 255, .78), rgba(255, 84, 184, .58), transparent); box-shadow: 0 0 18px rgba(89, 219, 255, .42); }
.nav-links a { color: rgba(230, 238, 255, .82); }
.nav-links a:hover { color: #fff; text-shadow: 0 0 12px #35dbff, 0 0 24px rgba(255,84,184,.55); }

.content-flow { background: radial-gradient(ellipse 46% 20% at 12% 6%, rgba(40, 222, 255, .22), transparent 72%), radial-gradient(ellipse 45% 24% at 91% 17%, rgba(255, 65, 163, .22), transparent 74%), radial-gradient(ellipse 52% 21% at 20% 45%, rgba(191, 92, 255, .19), transparent 73%), radial-gradient(ellipse 50% 20% at 82% 67%, rgba(83, 255, 173, .16), transparent 74%), radial-gradient(ellipse 58% 20% at 35% 92%, rgba(255, 175, 53, .15), transparent 74%), linear-gradient(180deg, #0a0a16 0%, #101229 25%, #16152e 52%, #0d1530 76%, #141021 100%); overflow: hidden; }
.content-flow::before { animation: spectrum-drift 22s ease-in-out infinite alternate; background: conic-gradient(from 190deg at 13% 12%, transparent 0 18%, rgba(42, 230, 255, .2) 21% 25%, transparent 29% 52%, rgba(255, 62, 171, .17) 55% 59%, transparent 63% 100%), conic-gradient(from 18deg at 83% 55%, transparent 0 21%, rgba(178, 86, 255, .2) 25% 29%, transparent 32% 66%, rgba(255, 204, 68, .13) 70% 74%, transparent 77% 100%); content: ""; filter: blur(14px) saturate(1.2); inset: -10%; opacity: .9; pointer-events: none; position: absolute; z-index: 0; }
.content-flow::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E"); content: ""; inset: 0; mix-blend-mode: soft-light; opacity: .13; pointer-events: none; position: absolute; z-index: 0; }
.content-flow > .section-pad { position: relative; z-index: 1; }
.disc-library::before { animation: spectrum-drift 16s ease-in-out infinite alternate-reverse; background: radial-gradient(ellipse 48% 18% at 8% 13%, rgba(35, 230, 255, .22), transparent 73%), radial-gradient(ellipse 44% 22% at 89% 39%, rgba(255, 69, 181, .22), transparent 75%), radial-gradient(ellipse 53% 20% at 28% 73%, rgba(155, 94, 255, .2), transparent 75%), radial-gradient(ellipse 44% 18% at 80% 92%, rgba(98, 255, 179, .14), transparent 74%); }
@keyframes neon-atmosphere { 0% { background-position: 0% 10%, 50% 50%; transform: scale(1); } 100% { background-position: 100% 80%, 44% 40%; transform: scale(1.06) rotate(2deg); } }
@keyframes spectrum-drift { 0% { filter: blur(12px) hue-rotate(0deg); transform: translate3d(-1%, -1%, 0) scale(1); } 100% { filter: blur(20px) hue-rotate(18deg); transform: translate3d(2%, 1%, 0) scale(1.05); } }

.disc-group { border-top: 1px solid rgba(207, 226, 255, .15); }
.disc-group-head span { color: #8df6ff; text-shadow: 0 0 18px rgba(51, 224, 255, .55); }
.disc-card { filter: none; opacity: 1; }
.record-package { filter: drop-shadow(0 22px 20px rgba(0,0,0,.42)); }
.record-sleeve { aspect-ratio: 1; background: linear-gradient(135deg, rgba(255,255,255,.42), rgba(255,255,255,.08) 14%, rgba(13,20,34,.12) 52%, rgba(255,255,255,.2)); border: 1px solid rgba(235,248,255,.56); border-radius: 3px; box-shadow: 0 18px 34px -22px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.12), inset 0 0 17px rgba(202,230,255,.1); height: auto; overflow: hidden; padding: clamp(4px, .38vw, 7px) clamp(4px, .38vw, 7px) clamp(4px, .38vw, 7px) clamp(12px, 1.12vw, 19px); top: 4%; width: 76%; }
.record-sleeve::before { background: linear-gradient(90deg, rgba(0,0,0,.34), rgba(255,255,255,.32) 19%, rgba(255,255,255,.08) 47%, rgba(0,0,0,.14)); border-right: 1px solid rgba(255,255,255,.32); bottom: 3px; content: ""; left: 3px; pointer-events: none; position: absolute; top: 3px; width: clamp(8px, .72vw, 13px); z-index: 5; }
.record-sleeve::after { border: 1px solid rgba(255,255,255,.25); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); content: ""; inset: 1px; pointer-events: none; position: absolute; z-index: 6; }
.record-cover { background-image: var(--cover-art); background-position: center; background-size: cover; padding: 0; }
.record-cover::before { background: linear-gradient(128deg, rgba(255,255,255,.27), transparent 21%, transparent 66%, rgba(255,255,255,.18)), linear-gradient(0deg, rgba(3,7,14,.52), transparent 34%); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 1; }
.record-cover::after { border: 1px solid rgba(255,255,255,.17); content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 2; }
.cover-title { bottom: clamp(5px, .55vw, 9px); color: rgba(255,255,255,.94); font: 600 clamp(7px, .62vw, 10px)/1.08 "DM Mono", monospace; left: clamp(6px, .6vw, 10px); letter-spacing: .075em; max-width: calc(100% - 16px); overflow-wrap: anywhere; position: absolute; right: 7px; text-shadow: 0 1px 4px rgba(0,0,0,.94); text-transform: uppercase; z-index: 4; }
.album-cover-art, .cover-label { display: none; }
.record-cover-type, .record-cover-play { display: none; }
.cover-hover-title { bottom: -27px; color: #fff; font: 500 clamp(11px, 1.12vw, 16px)/1.05 "DM Sans", Arial, sans-serif; left: 5%; letter-spacing: -.015em; max-width: 76%; opacity: 0; overflow-wrap: anywhere; pointer-events: none; position: absolute; text-shadow: 0 3px 12px rgba(0,0,0,.9); transform: translateY(-10px); transition: opacity .25s ease, transform .3s cubic-bezier(.2,.8,.2,1); z-index: 4; }
.disc-card:hover .cover-hover-title, .disc-card:focus-visible .cover-hover-title, .hover-card-focus .cover-hover-title { opacity: 1; transform: translateY(0); }

.record-disc { aspect-ratio: 1; height: auto; right: -14%; top: 14%; width: 70%; }
.disc { aspect-ratio: 1; height: 100%; width: 100%; }
.disc-card:hover .record-package, .disc-card:focus-visible .record-package { transform: scale(1.15) rotate(0); }
.disc-card:hover .record-disc, .disc-card:focus-visible .record-disc { right: -14%; transform: none; }
.disc-group:has(.disc-card:hover) .disc-card:not(:hover) { filter: none; opacity: 1; }
.disc-card:hover .record-sleeve, .disc-card:focus-visible .record-sleeve { box-shadow: 0 21px 39px -22px rgba(0,0,0,.94), 0 0 0 1px rgba(204,246,255,.48), inset 0 0 0 2px rgba(255,255,255,.17), inset 0 0 19px rgba(202,230,255,.14); }
.disc-card:hover .disc, .disc-card:focus-visible .disc { animation: disc-spin 3.5s linear infinite; box-shadow: 0 0 0 2px rgba(115, 238, 255, .68), 0 0 24px rgba(255, 79, 187, .32), inset 0 0 18px rgba(226, 179, 255, .2); }

@media (max-width: 800px) {
  .record-disc { right: -14%; top: 16%; width: 72%; }
  .disc-card:hover .record-package, .disc-card:focus-visible .record-package { transform: scale(1.08) rotate(0); }
  .disc-card:hover .record-disc, .disc-card:focus-visible .record-disc { right: -14%; }
  .cover-hover-title { bottom: -23px; font-size: 11px; }
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .72s ease, transform .72s cubic-bezier(.2,.7,.2,1); transition-delay: var(--reveal-delay, 0ms); }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-word { display: inline-block; filter: blur(5px); opacity: 0; transform: translateY(.68em); }
.reveal.is-visible .reveal-word { animation: word-reveal .48s cubic-bezier(.2,.78,.2,1) forwards; animation-delay: calc(var(--reveal-delay, 0ms) + var(--word-delay, 0ms)); }
@keyframes word-reveal { to { filter: blur(0); opacity: 1; transform: translateY(0); } }

@media (max-width: 800px) {
  .cursor-glow, .cursor-trail { display: none; }
  .minimal-nav { padding: 20px 5vw; }
  .minimal-nav::after { left: 5vw; right: 5vw; top: 58px; }
  .studio-brand { font-size: 10px; }
  .studio-brand small { font-size: 7px; }
  .nav-links { gap: 12px; font-size: 8px; }
  .nav-links a:nth-child(2) { display: none; }
  .availability { left: 5vw; top: 89px; }
  .hero { min-height: 720px; }
  .hero-avatar-stage { height: 70vh; max-height: 570px; width: 92vw; }
  .hero-copy { bottom: 46px; left: 6vw; }
  .hero h1 { font-size: clamp(50px, 16vw, 80px); }
  .founder-line { margin-top: 18px; }
  .connect-orb { height: 92px; margin-top: 20px; width: 92px; }
  .connect-orb span { font-size: 8px; }
  .connect-orb b { bottom: 10px; font-size: 18px; right: 13px; }
  .hero-ring { right: -18vw; top: 21%; }
  .hero-diamond { right: 12%; top: 18%; }
  .hero-star { bottom: 40%; right: 8%; }
  .hero-foot { bottom: 18px; right: 4vw; }
  .hero-linkedin-orb { height: 45px; right: 7vw; top: 54%; width: 45px; }
  .hero-linkedin-orb .linkedin-icon { height: 14px; width: 14px; }
  .linkedin-orbit-text text { font-size: 9px; }
  .linkedin-hover-label { font-size: 6px; top: -29px; }
  .hero-scroll { bottom: 19px; }
  .intro-grid, .about-grid { grid-template-columns: 1fr; }
  .intro-body { max-width: 560px; }
  .experience-meta { align-items: flex-start; flex-direction: column; gap: 5px; }
  .experience-list time { font-size: 10px; }
  .proof-grid { grid-template-columns: 1fr; }
  .proof-card { min-height: 150px; }
  .library-intro, .about-top, .fashion-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .library-intro { margin-bottom: 55px; }
  .disc-group-head h3, .disc-group-head h3 .reveal-word { font-size: clamp(40px, 9vw, 56px); max-width: 74%; }
  .disc-group-head span { font-size: 11px; }
  .disc-collage { gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 44px 5vw 68px; }
  .disc-card:hover .record-package, .disc-card:focus-visible .record-package { transform: scale(1.14) rotate(0); }
  .fashion-shelf { min-height: 380px; overflow-x: auto; padding: 0 15px 18px; }
  .shelf-book { flex-basis: 132px; height: 318px; }
  .shelf-book:hover, .shelf-book:focus-visible { flex-basis: min(75vw, 420px); }
  .book-spine { padding: 12px 6px; width: 34px; }
  .book-spine strong { font-size: 16px; }
  .book-cover { inset: 7px 7px 7px 37px; }
  .book-pages { inset: 9px 8px 9px 44px; }
  .contact { min-height: 620px; }
  .contact-orbit { height: 470px; right: -48%; top: 33%; width: 470px; }
  .contact-cube { right: 9%; }
  .video-modal, .fashion-modal { padding: 12vh 4vw 4vh; }
  .fashion-modal-stage { gap: 8px; }
  .fashion-modal-stage img { max-width: calc(100% - 90px); }
  .fashion-modal-stage button { height: 36px; width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Reel interaction: covers float in place; hover keeps the disc spinning and click opens playback. */
.disc-card { --package-tilt: 0deg; --package-y: 0px; --float-delay: 0s; animation: cover-float 6.8s ease-in-out var(--float-delay) infinite; will-change: transform; }
.disc-card:nth-child(3n + 1) { --package-tilt: -2deg; --package-y: 7px; --float-delay: -.8s; }
.disc-card:nth-child(3n + 2) { --package-tilt: 1.5deg; --package-y: -9px; --float-delay: -3.2s; }
.disc-card:nth-child(3n) { --package-tilt: -.8deg; --package-y: 3px; --float-delay: -5.1s; }
.disc-card:nth-child(3n + 1) .record-package, .disc-card:nth-child(3n + 2) .record-package, .disc-card:nth-child(3n) .record-package { transform: rotate(var(--package-tilt)) translateY(var(--package-y)); }
.record-package::before { animation: cover-aura 3.9s ease-in-out var(--float-delay) infinite; background: radial-gradient(circle at 43% 52%, rgba(91, 232, 255, .56), transparent 33%), radial-gradient(circle at 66% 34%, rgba(255, 78, 184, .42), transparent 42%); content: ""; filter: blur(19px); inset: -9%; opacity: .28; pointer-events: none; position: absolute; z-index: 0; }
.disc-card:hover .record-package, .disc-card:focus-visible .record-package { transform: rotate(var(--package-tilt)) translateY(var(--package-y)); }
.disc-card:hover .record-disc, .disc-card:focus-visible .record-disc { right: -14%; transform: none; }
.disc-card:hover .record-sleeve, .disc-card:focus-visible .record-sleeve { transform: none; }
.disc-card:hover .disc, .disc-card:focus-visible .disc { animation: disc-spin 3.5s linear infinite; box-shadow: 0 0 0 2px rgba(115, 238, 255, .68), 0 0 24px rgba(255, 79, 187, .32), inset 0 0 18px rgba(226, 179, 255, .2); }
.disc-card.is-card-hovered { opacity: 0; transition: opacity .12s ease; }

@keyframes cover-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
@keyframes cover-aura {
  0%, 100% { filter: blur(19px) brightness(.75); opacity: .16; }
  47% { filter: blur(24px) brightness(1.35); opacity: .46; }
  55% { filter: blur(20px) brightness(.85); opacity: .24; }
}

body.is-card-hovering::before { backdrop-filter: blur(14px) saturate(.58) brightness(.7); background: rgba(3, 4, 12, .36); content: ""; opacity: 1; z-index: 30; }
.hover-card-focus { height: var(--focus-height); left: var(--focus-left); pointer-events: none; position: fixed; top: var(--focus-top); transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1); width: var(--focus-width); z-index: 42; }
.hover-card-focus { animation: hover-card-arrive .24s cubic-bezier(.2,.8,.2,1) both; transform: scale(1.075); transform-origin: center; }
.hover-card-focus .record-package { height: 100%; width: 100%; }
.hover-card-focus .record-package::before { opacity: .58; }
.hover-card-focus .record-sleeve { box-shadow: 0 21px 39px -22px rgba(0,0,0,.94), 0 0 0 1px rgba(204,246,255,.48), inset 0 0 0 2px rgba(255,255,255,.17), inset 0 0 19px rgba(202,230,255,.14); }
.hover-card-focus .record-disc { right: -14%; transform: none; }
.hover-card-focus .disc { animation: disc-spin 3.1s linear infinite; box-shadow: 0 0 0 2px rgba(115, 238, 255, .62), 0 0 24px rgba(255, 79, 187, .32), inset 0 0 18px rgba(226, 179, 255, .2); }
@keyframes hover-card-arrive { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: scale(1.075); } }

.about-reel-wall { display: grid; gap: clamp(8px, .8vw, 12px); margin-left: -5vw; margin-right: -5vw; margin-top: clamp(68px, 9vw, 130px); max-width: none; overflow: hidden; position: relative; width: 100vw; }
.about-reel-row { overflow: hidden; padding: 2px 0; }
.about-reel-track { align-items: center; animation: about-reel-left 58s linear infinite; display: flex; gap: 0; width: max-content; will-change: transform; }
.about-reel-wall:not(.is-reel-playing) .about-reel-track { animation-play-state: paused; }
.about-reel-row.is-reversed .about-reel-track { animation-direction: reverse; animation-name: about-reel-left; }
.about-reel-sequence { --reel-gap: clamp(8px, .8vw, 12px); display: flex; flex: 0 0 auto; gap: var(--reel-gap); padding-right: var(--reel-gap); }
.about-reel-clip { background: #0a0b12; border: 0; border-radius: 9px; display: block; flex: 0 0 auto; height: clamp(42px, 3vw, 54px); object-fit: cover; width: clamp(168px, 12vw, 216px); }
@keyframes about-reel-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.hero-reel-bar { left: 0; overflow: hidden; pointer-events: none; position: absolute; right: 0; top: 75px; z-index: 2; }
.hero-reel-track { align-items: center; animation: hero-reel-right 54s linear infinite; display: flex; gap: 0; transform: translateX(-50%); width: max-content; will-change: transform; }
.hero-reel-bar:not(.is-reel-playing) .hero-reel-track { animation-play-state: paused; }
.hero-reel-sequence { --reel-gap: clamp(7px, .7vw, 11px); display: flex; flex: 0 0 auto; gap: var(--reel-gap); padding-right: var(--reel-gap); }
.hero-reel-clip { background: #0a0b12; border: 0; border-radius: 8px; box-shadow: 0 5px 16px rgba(0,0,0,.22); display: block; flex: 0 0 auto; height: clamp(36px, 2.55vw, 46px); object-fit: cover; width: clamp(142px, 10vw, 180px); }
@keyframes hero-reel-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }

@media (max-width: 800px) {
  .hero-reel-bar { top: 66px; }
  .hero-reel-clip { height: 32px; width: 128px; }
  .availability { top: 112px; }
}

.video-modal { background: #05050a; padding: 0; }
.video-modal::backdrop { backdrop-filter: blur(17px) saturate(.75); background: rgba(2, 3, 8, .74); }
.video-modal .modal-inner { height: 100%; margin: 0; max-width: none; position: relative; width: 100%; }
.video-modal .modal-video { border: 0; border-radius: 0; box-shadow: none; height: 100%; inset: 0; position: absolute; width: 100%; }
.video-modal .modal-bar { align-items: flex-start; left: 0; margin: 0; padding: clamp(18px, 3vw, 36px); pointer-events: none; position: absolute; right: 0; top: 0; z-index: 3; }
.video-modal .modal-bar > div { pointer-events: auto; }
.video-modal .modal-bar h3 { max-width: min(70vw, 780px); text-shadow: 0 2px 18px rgba(0,0,0,.76); }
.video-modal .modal-actions { align-items: center; }
.video-modal .modal-close { backdrop-filter: blur(12px); background: rgba(6, 8, 16, .6); }

@media (max-width: 700px) {
  .disc-card { animation-duration: 7.8s; }
  .video-modal .modal-bar { padding: 17px; }
  .video-modal .modal-bar h3 { font-size: clamp(24px, 8vw, 40px); max-width: 55vw; }
  .video-modal .modal-actions a { display: none; }
}

/* Scroll-cued gramophone library ------------------------------------------------ */
.disc-library {
  overflow: clip;
  padding-bottom: clamp(5.5rem, 11vw, 10rem);
}

.disc-library .library-intro {
  margin-bottom: clamp(2.75rem, 5vw, 5.5rem);
}

.turntable-chapter {
  isolation: isolate;
  min-height: min(56rem, calc(100svh + 9rem));
  position: relative;
  margin: 0 -5vw;
  padding: clamp(3.75rem, 7vw, 7.5rem) 5vw clamp(4rem, 8vw, 8rem);
}

.turntable-chapter + .turntable-chapter {
  margin-top: -1px;
}

.turntable-chapter::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(circle at 82% 42%, rgba(172, 112, 255, .15), transparent 27%),
    radial-gradient(circle at 12% 78%, rgba(55, 202, 255, .10), transparent 31%);
  pointer-events: none;
}

.turntable-chapter:nth-child(even)::before {
  background:
    radial-gradient(circle at 17% 34%, rgba(255, 113, 180, .14), transparent 29%),
    radial-gradient(circle at 88% 75%, rgba(93, 228, 183, .09), transparent 34%);
}

.turntable-chapter-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(23rem, .94fr);
  align-items: start;
  gap: clamp(2rem, 7vw, 9rem);
}

.turntable-program {
  position: relative;
  z-index: 2;
  padding-top: clamp(.5rem, 3vw, 3.5rem);
}

.is-deck-left .turntable-program {
  grid-column: 2;
  grid-row: 1;
}

.is-deck-left .turntable-deck {
  grid-column: 1;
  grid-row: 1;
}

.turntable-program-head {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: rgba(244, 241, 232, .62);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.turntable-chapter-number {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(246, 241, 231, .28);
  border-radius: 50%;
  color: rgba(255, 249, 236, .95);
  font-family: var(--font-mono);
  font-size: .68rem;
}

.turntable-kicker {
  margin: clamp(1.8rem, 3vw, 3rem) 0 .65rem;
  color: rgba(213, 192, 255, .82);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .2em;
}

.turntable-program h3 {
  max-width: 12ch;
  margin: 0;
  color: #f7f1e5;
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 6rem);
  font-weight: 500;
  letter-spacing: -.065em;
  line-height: .87;
}

.turntable-intro {
  max-width: 31rem;
  margin: 1.4rem 0 2.25rem;
  color: rgba(238, 234, 223, .67);
  font-size: clamp(.83rem, 1.05vw, .98rem);
  line-height: 1.65;
}

.turntable-cue-list {
  display: grid;
  gap: 0;
  max-width: 42rem;
  border-bottom: 1px solid rgba(239, 235, 222, .2);
}

.turntable-video {
  display: grid;
  grid-template-columns: clamp(5.5rem, 10vw, 8.2rem) 2rem minmax(0, 1fr) 1.25rem;
  align-items: center;
  gap: clamp(.7rem, 1.2vw, 1.25rem);
  width: 100%;
  min-height: clamp(5.8rem, 8vw, 7.4rem);
  padding: .55rem 0;
  border: 0;
  border-top: 1px solid rgba(239, 235, 222, .2);
  border-radius: 0;
  background: transparent;
  color: #f6f0e4;
  cursor: pointer;
  text-align: left;
  transition: transform .42s var(--ease-out), background-color .42s ease, padding .42s var(--ease-out), border-color .42s ease;
}

.turntable-video:hover,
.turntable-video:focus-visible,
.turntable-video.is-current {
  z-index: 1;
  margin-inline: -.85rem;
  width: calc(100% + 1.7rem);
  padding-inline: .85rem;
  border-radius: .8rem;
  border-top-color: transparent;
  background: rgba(236, 226, 255, .1);
  outline: none;
  transform: translateX(.25rem);
}

.turntable-video-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: .55rem;
  background-color: #242234;
  background-image:
    linear-gradient(115deg, rgba(255,255,255,.12), transparent 36%),
    var(--cue-art);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 .45rem 1.4rem rgba(0,0,0,.22);
  transition: transform .55s var(--ease-out), box-shadow .55s ease;
}

.turntable-video:hover .turntable-video-thumb,
.turntable-video:focus-visible .turntable-video-thumb,
.turntable-video.is-current .turntable-video-thumb {
  transform: scale(1.045);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3), 0 .7rem 1.65rem rgba(0,0,0,.34);
}

.turntable-video-index {
  color: rgba(240, 235, 222, .48);
  font-family: var(--font-mono);
  font-size: .65rem;
  font-variant-numeric: tabular-nums;
}

.turntable-video-copy {
  display: grid;
  min-width: 0;
  gap: .35rem;
}

.turntable-video-copy strong {
  overflow: hidden;
  color: inherit;
  font-size: clamp(.75rem, 1vw, .95rem);
  font-weight: 550;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.turntable-video-copy small {
  color: rgba(225, 211, 255, .6);
  font-family: var(--font-mono);
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.turntable-video-arrow {
  color: rgba(248, 242, 232, .66);
  font-size: 1.1rem;
  transition: transform .35s var(--ease-out);
}

.turntable-video:hover .turntable-video-arrow,
.turntable-video:focus-visible .turntable-video-arrow,
.turntable-video.is-current .turntable-video-arrow {
  transform: translate(.15rem, -.15rem);
}

.turntable-deck {
  --disc-turn: 0deg;
  --arm-angle: 0deg;
  position: sticky;
  top: clamp(5.25rem, 11vh, 8rem);
  isolation: isolate;
  aspect-ratio: 1;
  width: min(100%, 43rem);
  margin-top: clamp(0rem, 2vw, 2.5rem);
}

.turntable-deck::before {
  content: '';
  position: absolute;
  inset: 7% 5% 6%;
  z-index: -2;
  border: 1px solid rgba(241, 234, 214, .18);
  border-radius: 1.5rem;
  background:
    linear-gradient(135deg, rgba(255,255,255,.13), transparent 24%),
    linear-gradient(145deg, #292b39, #151522 52%, #22202d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.13), inset 0 0 0 .5rem rgba(0,0,0,.08), 0 2rem 5rem rgba(0,0,0,.34);
}

.turntable-deck::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 127, 210, .17), transparent 62%);
  filter: blur(1.5rem);
}

.turntable-deck-glow {
  position: absolute;
  inset: 21% 16% 15% 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(134, 127, 255, .18), transparent 67%);
  filter: blur(1rem);
}

.turntable-disc {
  position: absolute;
  top: 16%;
  left: 10%;
  width: 71%;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 1.8px 4px),
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.28), transparent 4%, transparent 14%),
    radial-gradient(circle at 50% 50%, #15151a 0 11%, #24252c 11.4% 12%, #08090d 12.4% 39%, #1e2028 40%, #07080b 42% 100%);
  box-shadow: inset -.85rem -.85rem 1.3rem rgba(0,0,0,.72), inset .55rem .55rem 1.3rem rgba(255,255,255,.08), 0 1.8rem 3rem rgba(0,0,0,.55);
  transform: rotate(var(--disc-turn));
  transition: transform .1s linear;
}

.turntable-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(from 45deg, transparent, rgba(209, 194, 255, .18), transparent 9% 32%, rgba(255,255,255,.14) 40%, transparent 51% 76%, rgba(127, 235, 255, .13));
  mix-blend-mode: screen;
}

.turntable-disc-label {
  position: absolute;
  inset: 33%;
  border: 1px solid rgba(255, 246, 226, .34);
  border-radius: 50%;
  background: var(--cue-art) center / cover;
  box-shadow: inset 0 0 0 .4rem rgba(28, 24, 42, .4);
}

.turntable-disc-hub {
  position: absolute;
  z-index: 1;
  top: 47%;
  left: 47%;
  width: 6%;
  aspect-ratio: 1;
  border: 2px solid rgba(255,255,255,.38);
  border-radius: 50%;
  background: #0b0b0f;
  box-shadow: 0 0 0 .25rem rgba(20,20,26,.68);
}

.turntable-tonearm {
  position: absolute;
  z-index: 3;
  top: -9%;
  right: -32%;
  width: 138%;
  height: auto;
  max-width: none;
  filter: drop-shadow(.4rem .8rem .7rem rgba(0,0,0,.46));
  pointer-events: none;
  transform: rotate(var(--arm-angle));
  transform-origin: 71% 25%;
  transition: transform .7s var(--ease-out);
}

.turntable-now-playing {
  position: absolute;
  z-index: 4;
  right: 11%;
  bottom: 11%;
  display: grid;
  max-width: 47%;
  gap: .28rem;
  margin: 0;
  color: rgba(242, 237, 226, .82);
  text-align: right;
}

.turntable-now-playing span {
  color: rgba(228, 207, 255, .62);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .15em;
}

.turntable-now-playing strong {
  overflow: hidden;
  font-size: clamp(.67rem, .9vw, .88rem);
  font-weight: 550;
  letter-spacing: -.02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .turntable-chapter {
    min-height: auto;
  }

  .turntable-chapter-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .turntable-program,
  .is-deck-left .turntable-program,
  .is-deck-left .turntable-deck {
    grid-column: 1;
    grid-row: auto;
  }

  .turntable-deck,
  .is-deck-left .turntable-deck {
    width: min(100%, 34rem);
    margin-inline: auto;
    position: relative;
    top: auto;
    order: 2;
  }

  .turntable-program {
    order: 1;
  }
}

@media (max-width: 520px) {
  .turntable-chapter {
    margin-inline: -1.15rem;
    padding-inline: 1.15rem;
  }

  .turntable-program h3 {
    font-size: clamp(2.65rem, 15vw, 4.3rem);
  }

  .turntable-video {
    grid-template-columns: 5.6rem 1.6rem minmax(0, 1fr) .8rem;
    gap: .55rem;
  }

  .turntable-video:hover,
  .turntable-video:focus-visible,
  .turntable-video.is-current {
    margin-inline: -.4rem;
    width: calc(100% + .8rem);
    padding-inline: .4rem;
  }

  .turntable-video-copy strong {
    white-space: normal;
  }

  .turntable-tonearm {
    top: -11%;
    right: -37%;
    width: 147%;
  }
}

/* Editorial turntable sequence — mirrors the supplied split-panel reference. */
.disc-library {
  --paper: #e4dfd4;
  --ink: #151515;
  --gold: #d8b27b;
  padding-top: clamp(3.5rem, 8vw, 8rem);
  padding-bottom: 0;
  background: var(--paper);
}

.disc-library::before {
  display: none;
}

.disc-library .library-intro {
  margin: 0 -5vw;
  padding: 0 5vw clamp(2rem, 4vw, 4.25rem);
  background: var(--paper);
}

.disc-library .section-kicker {
  color: #746c5d;
}

.turntable-chapter {
  min-height: 0;
  margin: 0 -5vw;
  padding: 0;
  background: var(--paper);
}

.turntable-chapter + .turntable-chapter {
  margin-top: 0;
}

.turntable-chapter::before {
  display: none;
}

.turntable-stage {
  display: grid;
  grid-template-columns: minmax(13.5rem, 27%) minmax(0, 73%);
  position: relative;
  top: auto;
  z-index: 1;
  min-height: 96.8vh;
  overflow: hidden;
  box-shadow: 0 1.6rem 4rem rgba(29, 26, 22, .21);
}

.turntable-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(2rem, 4vw, 4.7rem) clamp(1.35rem, 3.3vw, 4.1rem);
  background:
    linear-gradient(160deg, rgba(255,255,255,.42), transparent 38%),
    var(--paper);
  color: #736b5d;
}

.turntable-wordmark {
  margin: 0;
  color: #423f37;
  font-family: var(--font-mono);
  font-size: clamp(.63rem, .74vw, .76rem);
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.05;
}

.turntable-wordmark small {
  font-size: .69em;
  letter-spacing: .22em;
}

.turntable-side-nav {
  display: grid;
  gap: clamp(1.1rem, 3.4vh, 2.4rem);
  margin: auto 0;
}

.turntable-side-nav-item {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  color: rgba(93, 86, 76, .43);
  font-family: var(--font-mono);
  font-size: clamp(.5rem, .66vw, .64rem);
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.5;
  text-transform: uppercase;
  transition: color .35s ease, transform .35s var(--ease-out);
}

.turntable-side-nav-item i {
  color: currentColor;
  font-style: normal;
}

.turntable-side-nav-item.is-active {
  color: #8d6840;
  transform: translateX(.25rem);
}

.turntable-side-caption {
  margin: 0;
  color: rgba(72, 67, 60, .48);
  font-family: var(--font-mono);
  font-size: .51rem;
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.6;
}

.turntable-canvas {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  min-height: 96.8vh;
  padding: clamp(2.2rem, 5vw, 5.25rem);
  background:
    linear-gradient(115deg, rgba(255,255,255,.035), transparent 28%),
    #191919;
  color: var(--gold);
}

.turntable-canvas::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .8;
  background:
    radial-gradient(circle at 49% 59%, rgba(232, 187, 117, .10), transparent 27%),
    linear-gradient(90deg, transparent 49.85%, rgba(255,255,255,.045) 50%, transparent 50.15%);
  pointer-events: none;
}

.turntable-kicker {
  position: relative;
  z-index: 4;
  margin: 0 0 clamp(1.1rem, 2.2vw, 2rem);
  color: rgba(237, 221, 189, .58);
  font-family: var(--font-mono);
  font-size: clamp(.53rem, .68vw, .7rem);
  font-weight: 700;
  letter-spacing: .17em;
}

.turntable-canvas h3 {
  position: relative;
  z-index: 4;
  max-width: 7.1ch;
  margin: 0;
  color: #d6ae76;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(3.1rem, 6.1vw, 8rem);
  font-weight: 400;
  letter-spacing: -.065em;
  line-height: .78;
}

.turntable-instruction {
  position: absolute;
  z-index: 5;
  top: 49%;
  left: clamp(2.2rem, 5vw, 5.25rem);
  margin: 0;
  color: rgba(238, 225, 202, .58);
  font-family: var(--font-mono);
  font-size: .54rem;
  font-weight: 700;
  letter-spacing: .19em;
  writing-mode: vertical-rl;
}

.turntable-deck {
  --disc-turn: 0deg;
  --arm-angle: 0deg;
  position: absolute;
  z-index: 1;
  top: -22%;
  right: -42%;
  width: min(74rem, 103%);
  margin: 0;
  aspect-ratio: 1;
  isolation: isolate;
  cursor: ns-resize;
  touch-action: none;
}

.turntable-deck::before {
  content: none;
}

.turntable-deck::after {
  z-index: -2;
  inset: 12%;
  background: radial-gradient(circle, rgba(255,255,255,.055), transparent 67%);
  filter: blur(2.4rem);
}

.turntable-deck-glow {
  inset: 12%;
  background: radial-gradient(circle, rgba(218, 177, 121, .13), transparent 62%);
  filter: blur(1.8rem);
}

.turntable-disc {
  top: 0;
  left: 0;
  width: 100%;
  background:
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 1px, transparent 1.8px 4px),
    radial-gradient(circle at 34% 27%, rgba(255,255,255,.26), transparent 3.8%, transparent 13%),
    radial-gradient(circle at 50% 50%, #0b0c0e 0 11%, #313239 11.35% 12.4%, #050506 12.8% 45%, #18191d 45.5%, #030303 48% 100%);
  box-shadow: inset -1.7rem -1.7rem 3rem rgba(0,0,0,.78), inset 1.1rem 1.1rem 2.5rem rgba(255,255,255,.07), 0 2rem 5rem rgba(0,0,0,.68);
  pointer-events: none;
  transition: transform .65s cubic-bezier(.22, 1, .36, 1);
}

.turntable-disc-label {
  inset: 34%;
  box-shadow: inset 0 0 0 .5rem rgba(23, 20, 18, .43);
  filter: saturate(.75) contrast(.92);
}

.turntable-tonearm {
  position: absolute;
  z-index: 8;
  top: -14%;
  right: -5%;
  width: 100%;
  filter: drop-shadow(.55rem 1rem .9rem rgba(0,0,0,.66));
  transform: rotate(var(--arm-angle));
  transform-origin: 70% 25%;
  pointer-events: none;
  transition: transform .65s var(--ease-out);
}

.turntable-deck.is-dragging .turntable-disc {
  cursor: grabbing;
  transition-duration: .16s;
}

.turntable-deck:focus-visible {
  outline: 1px solid rgba(236, 211, 169, .82);
  outline-offset: .55rem;
}

.turntable-feature-card {
  --pointer-offset: 0px;
  position: absolute;
  z-index: 7;
  top: 40%;
  left: 29%;
  display: block;
  width: clamp(13rem, 26vw, 25rem);
  aspect-ratio: 1.38 / 1;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(231, 216, 188, .45);
  border-radius: .2rem;
  background: #151515;
  box-shadow: 0 1.8rem 2.7rem rgba(0,0,0,.36), -.75rem .9rem 0 rgba(224, 208, 178, .08);
  color: #f1e5d0;
  cursor: pointer;
  text-align: left;
  transform: translateZ(0);
  transition: transform .55s var(--ease-out), box-shadow .55s ease;
}

.turntable-feature-card:hover,
.turntable-feature-card:focus-visible {
  outline: none;
  box-shadow: 0 2.4rem 3.5rem rgba(0,0,0,.5), -.75rem .9rem 0 rgba(224, 208, 178, .15);
  transform: translateY(-.5rem) scale(1.018);
}

.turntable-feature-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.04) brightness(.83);
  transform: scale(1.02);
  transition: filter .5s ease, transform .7s var(--ease-out);
}

.turntable-feature-card:hover .turntable-feature-image,
.turntable-feature-card:focus-visible .turntable-feature-image {
  filter: saturate(1) contrast(1.05) brightness(.94);
  transform: scale(1.07);
}

.turntable-feature-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255,255,255,.18), transparent 27% 66%, rgba(0,0,0,.35));
  pointer-events: none;
}

.turntable-feature-pointer {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 1.9rem;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 243, 217, .92);
  border-radius: 50%;
  background: rgba(20, 18, 17, .18);
  box-shadow: 0 0 0 .45rem rgba(245, 225, 188, .08), 0 .1rem .7rem rgba(0,0,0,.45);
  pointer-events: none;
  transform: translate(-50%, calc(-50% + var(--pointer-offset, 0px)));
  transition: transform .52s var(--ease-out), box-shadow .35s ease;
}

.turntable-feature-pointer::before {
  content: '';
  position: absolute;
  bottom: 50%;
  left: 50%;
  width: 1px;
  height: clamp(4rem, 8vw, 7rem);
  background: linear-gradient(to top, rgba(246,229,197,.94), rgba(246,229,197,.06));
  box-shadow: 0 0 .6rem rgba(246,229,197,.35);
  transform: rotate(47deg);
  transform-origin: bottom;
}

.turntable-feature-pointer::after {
  content: '';
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: #f9e6c2;
  box-shadow: 0 0 .55rem rgba(255,237,202,.82);
}

.turntable-feature-card.is-pointer-dragging .turntable-feature-pointer {
  box-shadow: 0 0 0 .7rem rgba(245, 225, 188, .12), 0 .1rem .7rem rgba(0,0,0,.45);
  transition-duration: .08s;
}

.turntable-feature-play {
  position: absolute;
  right: .95rem;
  top: .85rem;
  display: grid;
  width: 2.7rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(255,244,222,.66);
  border-radius: 50%;
  background: rgba(20, 18, 17, .28);
  color: #fff5e5;
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .06em;
  backdrop-filter: blur(.3rem);
}

.turntable-feature-title {
  position: absolute;
  right: .95rem;
  bottom: .85rem;
  left: .95rem;
  overflow: hidden;
  color: #fff7e9;
  font-family: var(--font-mono);
  font-size: clamp(.56rem, .68vw, .7rem);
  font-weight: 800;
  letter-spacing: .06em;
  text-overflow: ellipsis;
  text-shadow: 0 .1rem .8rem #000;
  white-space: nowrap;
}

.turntable-now-playing {
  z-index: 6;
  right: clamp(2.2rem, 5vw, 5.25rem);
  bottom: clamp(4.2rem, 9vw, 8rem);
  max-width: 28%;
  color: rgba(235, 221, 196, .85);
}

.turntable-now-playing span {
  color: rgba(216, 178, 124, .62);
}

.turntable-count {
  position: absolute;
  z-index: 6;
  right: clamp(2.2rem, 5vw, 5.25rem);
  bottom: clamp(1.4rem, 3vw, 3rem);
  margin: 0;
  color: #d9b37b;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(2.7rem, 4.2vw, 5.3rem);
  letter-spacing: -.075em;
  line-height: .8;
}

.turntable-count i {
  margin-inline: .12em;
  color: rgba(217, 179, 123, .42);
  font-size: .42em;
  font-style: normal;
  vertical-align: middle;
}

.turntable-scroll-prompt {
  position: absolute;
  z-index: 8;
  top: 48%;
  right: clamp(2.2rem, 5vw, 5.25rem);
  display: grid;
  justify-items: center;
  gap: .5rem;
  margin: 0;
  color: rgba(245, 231, 207, .65);
  font-family: var(--font-mono);
  font-size: .5rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.turntable-scroll-prompt b {
  font-size: 1.2rem;
  font-weight: 400;
  animation: deck-scroll-prompt 1.6s ease-in-out infinite;
}

.turntable-cue-list {
  display: none;
}

.is-deck-left .turntable-stage {
  grid-template-columns: minmax(0, 73%) minmax(13.5rem, 27%);
}

.is-deck-left .turntable-sidebar {
  grid-column: 2;
  grid-row: 1;
}

.is-deck-left .turntable-canvas {
  grid-column: 1;
  grid-row: 1;
}

.is-deck-left .turntable-canvas h3,
.is-deck-left .turntable-kicker {
  margin-left: auto;
  text-align: right;
}

.is-deck-left .turntable-instruction {
  right: clamp(2.2rem, 5vw, 5.25rem);
  left: auto;
  transform: rotate(180deg);
}

.is-deck-left .turntable-deck {
  right: auto;
  left: -42%;
}

.is-deck-left .turntable-tonearm {
  right: auto;
  left: -5%;
  transform: scaleX(-1) rotate(var(--arm-angle));
  transform-origin: 30% 25%;
}

.is-deck-left .turntable-feature-card {
  right: 29%;
  left: auto;
}

.is-deck-left .turntable-now-playing,
.is-deck-left .turntable-count,
.is-deck-left .turntable-scroll-prompt {
  right: auto;
  left: clamp(2.2rem, 5vw, 5.25rem);
  text-align: left;
}

@keyframes deck-scroll-prompt {
  0%, 100% { transform: translateY(0); opacity: .5; }
  50% { transform: translateY(.35rem); opacity: 1; }
}

@media (max-width: 640px) {
  .turntable-stage,
  .is-deck-left .turntable-stage {
    display: block;
    top: auto;
    min-height: 100svh;
  }

  .turntable-sidebar,
  .is-deck-left .turntable-sidebar {
    display: flex;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    grid-column: auto;
    height: 4.9rem;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.15rem 1.25rem;
    background: linear-gradient(180deg, rgba(228,223,212,.99), rgba(228,223,212,.86), transparent);
  }

  .turntable-side-nav,
  .turntable-side-caption {
    display: none;
  }

  .turntable-canvas,
  .is-deck-left .turntable-canvas {
    display: block;
    min-height: 100svh;
    padding: 7rem 1.25rem 1.5rem;
  }

  .turntable-canvas h3,
  .is-deck-left .turntable-canvas h3 {
    max-width: 7.6ch;
    margin: 0;
    font-size: clamp(3.5rem, 16vw, 6rem);
    text-align: left;
  }

  .turntable-kicker,
  .is-deck-left .turntable-kicker {
    text-align: left;
  }

  .turntable-deck,
  .is-deck-left .turntable-deck {
    top: 22%;
    right: -48%;
    left: auto;
    width: 112%;
  }

  .turntable-tonearm,
  .is-deck-left .turntable-tonearm {
    top: -3%;
    right: -6%;
    left: auto;
    width: 108%;
    transform: rotate(var(--arm-angle));
    transform-origin: 70% 25%;
  }

  .turntable-feature-card,
  .is-deck-left .turntable-feature-card {
    top: auto;
    right: auto;
    bottom: 17%;
    left: 1.25rem;
    width: min(72vw, 23rem);
  }

  .turntable-instruction,
  .is-deck-left .turntable-instruction {
    top: auto;
    right: 1.2rem;
    bottom: 15%;
    left: auto;
    transform: none;
    writing-mode: vertical-rl;
  }

  .turntable-now-playing,
  .is-deck-left .turntable-now-playing {
    right: auto;
    bottom: 7%;
    left: 1.25rem;
    max-width: 57%;
    text-align: left;
  }

  .turntable-count,
  .is-deck-left .turntable-count {
    right: 1.25rem;
    bottom: 7%;
    left: auto;
    text-align: right;
  }

  .turntable-scroll-prompt,
  .is-deck-left .turntable-scroll-prompt {
    display: none;
  }

}

/* One continuous atmosphere from the landing frame into the portfolio. */
main { background: #101229; }
.hero {
  background:
    radial-gradient(ellipse 34% 57% at 14% 72%, rgba(255, 189, 46, .25), transparent 66%),
    radial-gradient(ellipse 36% 48% at 79% 20%, rgba(43, 223, 255, .25), transparent 67%),
    radial-gradient(ellipse 48% 44% at 56% 76%, rgba(184, 51, 255, .24), transparent 68%),
    linear-gradient(180deg, #05050a 0%, #0d1020 72%, #101229 100%);
  margin-bottom: -1px;
}
.content-flow {
  background:
    radial-gradient(ellipse 46% 20% at 12% 6%, rgba(40, 222, 255, .22), transparent 72%),
    radial-gradient(ellipse 45% 24% at 91% 17%, rgba(255, 65, 163, .22), transparent 74%),
    radial-gradient(ellipse 52% 21% at 20% 45%, rgba(191, 92, 255, .19), transparent 73%),
    radial-gradient(ellipse 50% 20% at 82% 67%, rgba(83, 255, 173, .16), transparent 74%),
    radial-gradient(ellipse 58% 20% at 35% 92%, rgba(255, 175, 53, .15), transparent 74%),
    linear-gradient(180deg, #101229 0%, #16152e 48%, #0d1530 76%, #141021 100%);
}

/* Availability is deliberately lower and immediately legible on first load. */
.availability { top: 132px; }
.availability i {
  animation: availability-green-pulse 1.25s ease-in-out infinite;
  background: #58ef83;
  box-shadow: 0 0 0 7px rgba(88,239,131,.13), 0 0 20px rgba(88,239,131,.98);
  height: 10px;
  margin-right: 12px;
  vertical-align: -2px;
  width: 10px;
}
@keyframes availability-green-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(88,239,131,.14), 0 0 11px rgba(88,239,131,.8); opacity: .72; transform: scale(.88); }
  50% { box-shadow: 0 0 0 11px rgba(88,239,131,.045), 0 0 28px rgba(88,239,131,1); opacity: 1; transform: scale(1.18); }
}
@media (max-width: 800px) { .availability { top: 121px; } }

/* A single full-viewport field keeps the moving stars continuous between every section. */
body::before,
body.is-disc-hovering::before {
  animation: sitewide-star-drift 28s linear infinite;
  backdrop-filter: none;
  background-color: transparent;
  background-image:
    radial-gradient(circle, rgba(151, 239, 255, .9) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 183, 226, .78) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 232, 157, .72) 0 .9px, transparent 1.6px);
  background-position: 0 0, 4rem 6rem, 10rem 2rem;
  background-size: 12rem 12rem, 18rem 16rem, 23rem 20rem;
  content: "";
  inset: 0;
  opacity: .48;
  pointer-events: none;
  position: fixed;
  z-index: 0;
}

.content-flow { overflow: visible; }

@keyframes sitewide-star-drift {
  to { background-position: 12rem 9rem, -14rem 16rem, 7rem -15rem; }
}

/* Warm editorial palette — same site structure, new art-direction. */
:root {
  --ink: #16070d;
  --ink-2: #2b1019;
  --slate: #6e404b;
  --violet: #b65e62;
  --lilac: #ee9e91;
  --sky: #f2b1a2;
  --cream: #f7ddd0;
  --soft: #d9aaa0;
  --line: rgba(247, 221, 208, .2);
  --glass: rgba(247, 221, 208, .07);
  --shadow: rgba(14, 3, 7, .62);
}

html { background: #16070d; }
body {
  background:
    radial-gradient(ellipse 48% 42% at 8% 12%, rgba(204, 91, 97, .22), transparent 67%),
    radial-gradient(ellipse 45% 40% at 93% 84%, rgba(131, 48, 66, .22), transparent 69%),
    #16070d;
}

main { background: #210c14; }
.hero {
  background:
    radial-gradient(ellipse 35% 58% at 13% 73%, rgba(214, 119, 102, .25), transparent 67%),
    radial-gradient(ellipse 38% 49% at 80% 18%, rgba(127, 46, 66, .31), transparent 68%),
    radial-gradient(ellipse 48% 45% at 56% 76%, rgba(174, 72, 83, .22), transparent 69%),
    linear-gradient(180deg, #17070d 0%, #240a13 72%, #2a1018 100%);
}
.hero::before {
  background:
    conic-gradient(from 225deg at 31% 67%, transparent 0 16%, rgba(238, 150, 132, .24) 18% 22%, transparent 25% 48%, rgba(129, 47, 68, .32) 51% 55%, transparent 59% 100%),
    radial-gradient(ellipse 47% 72% at 54% 50%, rgba(203, 92, 94, .14), transparent 71%);
}
.minimal-nav::after {
  background: linear-gradient(90deg, transparent, rgba(242, 177, 162, .78), rgba(189, 81, 91, .62), transparent);
  box-shadow: 0 0 18px rgba(229, 123, 111, .38);
}
.nav-links a:hover { color: #ffe7dc; text-shadow: 0 0 12px #ee9e91, 0 0 24px rgba(151, 55, 74, .55); }
.content-flow {
  background:
    radial-gradient(ellipse 46% 20% at 12% 6%, rgba(209, 109, 104, .22), transparent 72%),
    radial-gradient(ellipse 45% 24% at 91% 17%, rgba(126, 42, 63, .27), transparent 74%),
    radial-gradient(ellipse 52% 21% at 20% 45%, rgba(177, 75, 85, .21), transparent 73%),
    radial-gradient(ellipse 50% 20% at 82% 67%, rgba(211, 132, 109, .16), transparent 74%),
    radial-gradient(ellipse 58% 20% at 35% 92%, rgba(113, 39, 56, .22), transparent 74%),
    linear-gradient(180deg, #2a1018 0%, #311019 48%, #210b14 76%, #18070d 100%);
}
.content-flow::before {
  background:
    conic-gradient(from 190deg at 13% 12%, transparent 0 18%, rgba(230, 133, 117, .19) 21% 25%, transparent 29% 52%, rgba(141, 49, 67, .25) 55% 59%, transparent 63% 100%),
    conic-gradient(from 18deg at 83% 55%, transparent 0 21%, rgba(202, 87, 91, .2) 25% 29%, transparent 32% 66%, rgba(242, 174, 137, .15) 70% 74%, transparent 77% 100%);
}
body::before,
body.is-disc-hovering::before {
  background-image:
    radial-gradient(circle, rgba(255, 211, 190, .86) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(238, 142, 137, .74) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(242, 181, 133, .68) 0 .9px, transparent 1.6px);
}

/* Keep the landing portrait in its natural tones rather than monochrome. */
.scene-avatar { filter: contrast(1.03) saturate(1.08) brightness(1.02); }

/* A single continuous atmosphere — carried from the fashion wall through every section. */
html,
body {
  background: #210c14;
}

body {
  background:
    radial-gradient(circle at 11% 13%, rgba(230, 123, 119, 0.2), transparent 24rem),
    radial-gradient(circle at 87% 34%, rgba(245, 189, 145, 0.14), transparent 29rem),
    radial-gradient(circle at 42% 82%, rgba(151, 62, 84, 0.18), transparent 28rem),
    linear-gradient(156deg, #19070e 0%, #2b0e18 44%, #16060c 100%);
  background-attachment: fixed;
}

main,
.hero,
.content-flow {
  background-color: transparent;
}

.hero,
.content-flow {
  background-image: none;
}

body::before,
body.is-disc-hovering::before {
  background-image:
    radial-gradient(circle, rgba(255, 224, 203, 0.88) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(242, 144, 141, 0.76) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(247, 196, 148, 0.78) 0 0.9px, transparent 1.7px),
    radial-gradient(circle, rgba(255, 255, 255, 0.26) 0 2px, transparent 2.8px);
  background-position: 0 0, 37px 72px, 103px 22px, 164px 138px;
  background-size: 190px 190px, 247px 247px, 311px 311px, 389px 389px;
  opacity: 0.66;
}

/* Clear the empty pale panel after the Fashion image deck. */
.fashion-handoff,
.fashion-folder-deck,
.fashion-bunch {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.fashion-head {
  grid-template-columns: minmax(0, 1fr);
}

.film-strip-topic-head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.connect-orb {
  width: 132px;
  height: 132px;
}

.connect-orb span {
  font-size: 0.76rem;
  letter-spacing: 0.1em;
}

.hero-scroll {
  animation: hero-scroll-pulse 1.35s ease-in-out infinite;
  box-shadow: 0 0 0 1px rgba(255, 204, 177, 0.36), 0 0 18px rgba(244, 151, 135, 0.46), 0 0 34px rgba(237, 113, 146, 0.24);
}

.hero-scroll:hover,
.hero-scroll:focus-visible {
  animation-play-state: paused;
}

.site-end {
  margin: 0.5in 0 0;
  color: rgba(255, 220, 205, 0.7);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-align: center;
}

@keyframes hero-scroll-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    filter: brightness(1);
  }
  50% {
    transform: translateX(-50%) scale(1.07);
    filter: brightness(1.25);
  }
}