:root {
  color-scheme: dark;
  --ink: #09070f;
  --ink-raised: #100d19;
  --panel: rgba(24, 18, 39, .78);
  --paper: #f5f0ff;
  --muted: #aaa2bb;
  --faint: #766d88;
  --line: rgba(224, 203, 255, .15);
  --violet: #a45bff;
  --ultra: #7d37ff;
  --lilac: #d6a8ff;
  --pink: #fd61d4;
  --mono: "DM Mono", monospace;
  --sans: "Manrope", sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--paper); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body::before { position: fixed; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% -20%, rgba(87, 36, 153, .16), transparent 49%), #09070f; content: ""; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: var(--violet); color: #fff; }
.noise-layer { position: fixed; inset: 0; z-index: 12; pointer-events: none; opacity: .12; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E"); }
.skip-link { position: fixed; top: -70px; left: 14px; z-index: 25; padding: 12px 17px; background: var(--lilac); color: var(--ink); }
.skip-link:focus { top: 14px; }
.intro-curtain { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: #09070f; pointer-events: none; animation: curtain-lift 1.35s cubic-bezier(.77, 0, .18, 1) .12s forwards; }
.intro-curtain span { color: var(--lilac); font: 10px var(--mono); letter-spacing: .32em; animation: intro-label .65s ease-out .25s both; }
.intro-curtain i { position: absolute; bottom: 0; left: 50%; width: min(34vw, 260px); height: 2px; background: linear-gradient(90deg, transparent, var(--violet), var(--pink), transparent); transform: translateX(-50%); transform-origin: center; animation: intro-line .85s ease-out .1s both; }
@keyframes curtain-lift { to { clip-path: inset(0 0 100%); visibility: hidden; } }
@keyframes intro-label { from { opacity: 0; letter-spacing: .7em; } to { opacity: 1; letter-spacing: .32em; } }
@keyframes intro-line { from { transform: translateX(-50%) scaleX(0); } to { transform: translateX(-50%) scaleX(1); } }
.header-shell, .footer-inner, .social-inner { width: min(var(--max), calc(100% - 72px)); margin-inline: auto; }
.site-header { position: absolute; inset: 18px 0 auto; z-index: 10; }
.header-shell { min-height: 61px; display: flex; align-items: center; justify-content: space-between; padding: 0 9px 0 14px; border: 1px solid rgba(231, 211, 255, .13); border-radius: 3px; background: rgba(15, 11, 25, .65); box-shadow: 0 10px 40px rgba(3, 2, 8, .2); backdrop-filter: blur(22px); }
.wordmark { display: flex; align-items: center; gap: 11px; min-width: 0; font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.wordmark-icon { display: block; width: 32px; height: 32px; flex: none; border-radius: 3px; object-fit: cover; }
.primary-nav { display: flex; align-items: center; gap: clamp(16px, 3vw, 38px); }
.primary-nav > a:not(.nav-contact) { color: #c4bbd2; font: 8px var(--mono); letter-spacing: .1em; transition: color .2s ease; }
.primary-nav > a:not(.nav-contact) span { margin-right: 4px; color: var(--faint); }
.primary-nav > a:not(.nav-contact):hover, .primary-nav > a:not(.nav-contact):hover span { color: var(--lilac); }
.nav-contact { min-height: 38px; display: inline-flex; align-items: center; gap: 23px; padding: 0 13px; border: 1px solid rgba(214,168,255,.28); color: var(--lilac); font: 8px var(--mono); letter-spacing: .1em; transition: background .2s ease, border-color .2s ease; }
.nav-contact:hover { border-color: var(--violet); background: rgba(164,91,255,.14); }
.nav-contact span { color: var(--pink); font-size: 13px; }
.menu-toggle { display: none; }

.hero { --pointer-x: 0; --pointer-y: 0; position: relative; min-height: min(900px, 100svh); min-height: max(790px, 100svh); display: grid; align-items: center; overflow: hidden; isolation: isolate; padding: 125px max(36px, calc((100% - var(--max)) / 2)) 90px; }
.hero::before { position: absolute; inset: 0; z-index: -3; background: radial-gradient(ellipse at 76% 50%, rgba(94, 41, 164, .21), transparent 33%), radial-gradient(ellipse at 31% 48%, rgba(87, 32, 145, .1), transparent 43%); content: ""; }
.hero-grid-overlay { position: absolute; inset: 0; z-index: -2; opacity: .18; background-image: linear-gradient(rgba(218,191,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(218,191,255,.07) 1px, transparent 1px); background-size: 76px 76px; mask-image: linear-gradient(90deg, transparent, #000 48%, #000 100%); }
.hero-ambient { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-ambient i { position: absolute; display: block; border: 1px solid rgba(177,119,255,.12); border-radius: 50%; }
.hero-ambient i:nth-child(1) { top: 4%; right: -5%; width: min(60vw, 790px); aspect-ratio: 1; box-shadow: inset 0 0 120px rgba(116,51,228,.04); }
.hero-ambient i:nth-child(2) { top: 19%; right: 8%; width: min(39vw, 520px); aspect-ratio: 1; border-color: rgba(245,97,212,.1); }
.hero-ambient i:nth-child(3) { top: 34%; right: 22%; width: min(18vw, 240px); aspect-ratio: 1; border-color: rgba(214,168,255,.2); }
.hero-index { position: absolute; top: 112px; right: max(36px, calc((100% - var(--max)) / 2)); left: max(36px, calc((100% - var(--max)) / 2)); display: flex; justify-content: space-between; color: #776b88; font: 8px var(--mono); letter-spacing: .14em; }
.hero-index span:last-child { color: #584d68; }
.hero-inner { position: relative; display: grid; width: min(var(--max), 100%); grid-template-columns: .96fr 1.04fr; align-items: center; gap: 30px; margin: auto; }
.hero-copy { position: relative; z-index: 2; padding: 16px 0 0; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: #a99bbd; font: 8px var(--mono); letter-spacing: .13em; }
.signal { position: relative; display: inline-block; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--lilac); box-shadow: 0 0 12px var(--violet); }
.signal::after { position: absolute; inset: -4px; border: 1px solid rgba(214,168,255,.45); border-radius: 50%; content: ""; animation: signal-pulse 2.8s ease-out infinite; }
@keyframes signal-pulse { 0% { transform: scale(.65); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.hero-pretitle { margin: 0 0 12px 5px; color: #aa91c8; font: 8px var(--mono); letter-spacing: .22em; animation: rise-in .8s .7s both; }
.hero h1 { display: flex; flex-direction: column; align-items: flex-start; margin: 0; font-size: clamp(72px, 10.3vw, 145px); font-weight: 800; letter-spacing: -.025em; line-height: .82; }
.headline-line { display: block; transform-origin: left center; animation: headline-in .9s cubic-bezier(.18,.75,.2,1) both; }
.headline-line:nth-child(1) { animation-delay: .66s; }
.headline-line:nth-child(2) { animation-delay: .78s; }
.headline-line:nth-child(3) { animation-delay: .9s; }
@keyframes headline-in { from { opacity: 0; transform: translate3d(0, 70px, 0) skewY(4deg); filter: blur(9px); } to { opacity: 1; transform: translate3d(0, 0, 0) skewY(0); filter: blur(0); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.headline-period { color: var(--pink); }
.headline-outline { color: transparent; font-family: "Barlow Condensed", var(--sans); font-weight: 700; letter-spacing: .025em; -webkit-text-stroke: 1.25px rgba(237,220,255,.76); }
.headline-lilac { color: var(--lilac); text-shadow: 0 0 55px rgba(164,91,255,.18); }
.hero-intro { max-width: 385px; margin: 28px 0 21px 5px; color: #b0a8bc; font-size: 12px; line-height: 1.9; animation: rise-in .7s 1.1s both; }
.hero-editor { display: flex; align-items: center; gap: 10px; margin: 18px 0 0 5px; animation: rise-in .7s 1s both; }
.hero-editor span { color: #9888a9; font: 7px var(--mono); letter-spacing: .15em; }
.hero-editor strong { color: #f0dfff; font-size: 14px; font-weight: 600; letter-spacing: -.03em; }
.hero-editor i { color: var(--pink); font-size: 11px; font-style: normal; }
.hero-actions { display: flex; align-items: center; gap: 23px; margin-left: 5px; animation: rise-in .7s 1.2s both; }
.hero-cta { display: inline-flex; min-height: 47px; align-items: center; gap: 27px; padding: 0 16px; border: 1px solid rgba(217,186,255,.6); background: linear-gradient(110deg, rgba(126,55,255,.82), rgba(87,38,171,.4)); box-shadow: 0 0 25px rgba(125,55,255,.17), inset 0 0 18px rgba(212,177,255,.06); color: #fff; font: 8px var(--mono); letter-spacing: .09em; transition: box-shadow .25s ease, transform .25s ease; }
.hero-cta:hover { transform: translateY(-3px); box-shadow: 0 0 38px rgba(164,91,255,.38), inset 0 0 18px rgba(212,177,255,.1); }
.hero-cta b { color: #f8c0f5; font-size: 15px; font-weight: 400; }
.hero-secondary { color: #9c91aa; font: 8px var(--mono); letter-spacing: .08em; transition: color .2s ease; }
.hero-secondary span { margin-left: 7px; color: var(--pink); font-size: 13px; }
.hero-secondary:hover { color: #fff; }
.hero-stage { position: relative; width: min(100%, 625px); height: min(620px, 68vh); min-height: 490px; justify-self: end; transform: translate(calc(var(--pointer-x) * -10px), calc(var(--pointer-y) * -8px)); transition: transform .3s ease-out; }
.stage-orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(205,166,255,.2); border-radius: 50%; transform: translate(-50%,-50%) rotate(-27deg); }
.orbit-one { width: 86%; height: 57%; }
.orbit-two { width: 108%; height: 73%; border-color: rgba(245,97,212,.11); transform: translate(-50%,-50%) rotate(22deg); }
.stage-crosshair { position: absolute; top: 16%; right: 14%; color: var(--pink); font: 19px var(--mono); text-shadow: 0 0 12px var(--pink); }
.floating-frame { position: absolute; padding: 10px; border: 1px solid rgba(229,205,255,.32); background: linear-gradient(140deg, rgba(39,27,59,.88), rgba(16,12,25,.8)); box-shadow: 0 25px 80px rgba(0,0,0,.55), 0 0 70px rgba(119,55,218,.13); backdrop-filter: blur(18px); }
.frame-back { top: 10%; right: 1%; width: 53%; height: 52%; opacity: .68; transform: rotate(8deg) translate(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 7px)); animation: float-back 8s ease-in-out infinite; }
.frame-front { top: 14%; left: 12%; width: 68%; height: 57%; transform: rotate(-6deg) translate(calc(var(--pointer-x) * -10px), calc(var(--pointer-y) * -8px)); animation: float-front 7s ease-in-out infinite; }
@keyframes float-back { 0%,100% { margin-top: 0; } 50% { margin-top: -9px; } }
@keyframes float-front { 0%,100% { margin-top: 0; } 50% { margin-top: 10px; } }
.frame-meta, .frame-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; color: #bdb0cf; font: 7px var(--mono); letter-spacing: .08em; }
.frame-meta { height: 19px; }
.record-dot { color: #ff7bdc; }
.frame-art { position: relative; display: flex; height: calc(100% - 39px); flex-direction: column; justify-content: center; padding: 12px 23px; overflow: hidden; background: radial-gradient(ellipse at 70% 32%, rgba(193,97,255,.48), transparent 39%), linear-gradient(138deg, #211934, #110d19 64%, #23152f); }
.frame-art::before { position: absolute; inset: 0; background: linear-gradient(130deg, transparent 31%, rgba(228,171,255,.12) 31.2%, transparent 32%), linear-gradient(36deg, transparent 53%, rgba(255,255,255,.07) 53.2%, transparent 53.6%), repeating-linear-gradient(90deg, transparent 0 49px, rgba(219,187,255,.06) 50px 51px); content: ""; }
.frame-art::after { position: absolute; right: 9%; bottom: -32%; width: 55%; aspect-ratio: 1; border: 1px solid rgba(241,199,255,.28); border-radius: 50%; box-shadow: 0 0 35px rgba(177,78,255,.15), inset 0 0 35px rgba(177,78,255,.15); content: ""; }
.frame-art-index { position: absolute; top: 13px; left: 15px; z-index: 1; color: #d4bee9; font: 7px var(--mono); letter-spacing: .12em; }
.frame-art strong { position: relative; z-index: 1; font-size: clamp(35px, 5vw, 61px); font-weight: 800; letter-spacing: -.09em; line-height: .84; text-shadow: 0 7px 38px rgba(0,0,0,.4); }
.frame-art strong em { color: #e4a7ff; font-style: normal; }
.frame-art-cross { position: absolute; top: 39%; right: 16%; z-index: 1; color: #ff98e8; font-size: 27px; text-shadow: 0 0 15px #e853cf; }
.frame-footer { height: 20px; align-items: end; color: #9d91ab; font-size: 6px; }
.frame-sky { position: absolute; inset: 15% 9% 14%; background: radial-gradient(ellipse at 55% 50%, rgba(219,133,255,.58), transparent 8%), radial-gradient(ellipse at 60% 56%, rgba(101,53,163,.7), transparent 43%), linear-gradient(135deg, #171222 12%, #352448 45%, #13101a 80%); filter: saturate(.75); }
.frame-sky::before { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(219,184,255,.1) 30px 31px); content: ""; }
.float-tag { position: absolute; z-index: 3; padding: 10px 12px; border: 1px solid rgba(228,204,255,.25); background: rgba(19,13,30,.75); box-shadow: 0 12px 38px rgba(0,0,0,.3); color: #cbb8df; font: 7px var(--mono); letter-spacing: .08em; backdrop-filter: blur(14px); }
.tag-a { top: 25%; left: 0; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; }
.tag-a span { margin-right: 9px; color: var(--pink); }
.tag-b { top: 57%; right: -1%; display: flex; gap: 15px; align-items: center; transform: rotate(7deg); }
.tag-b b { color: var(--pink); font-size: 14px; font-weight: 400; }
.timeline-float { position: absolute; right: 2%; bottom: 12%; z-index: 4; width: 61%; height: 93px; padding: 12px 13px; border: 1px solid rgba(223,190,255,.28); background: rgba(12,9,20,.88); box-shadow: 0 15px 55px rgba(0,0,0,.45); transform: rotate(3deg) translate(calc(var(--pointer-x) * 13px), calc(var(--pointer-y) * 9px)); backdrop-filter: blur(16px); }
.timeline-label, .timeline-ruler { display: flex; align-items: center; justify-content: space-between; color: #a89ab9; font: 6px var(--mono); letter-spacing: .09em; }
.timeline-ruler { height: 21px; margin-top: 4px; border-bottom: 1px solid rgba(224,203,255,.14); color: #6b5d7b; font-size: 6px; }
.timeline-row { position: relative; display: flex; height: 13px; align-items: center; gap: 3px; margin-top: 3px; overflow: hidden; }
.timeline-clip { height: 9px; border: 1px solid rgba(207,170,255,.32); background: linear-gradient(90deg, #703cc0, #291a42); }
.clip-v1 { width: 29%; }.clip-v2 { width: 23%; }.clip-v3 { width: 34%; }
.audio-wave { width: 70%; height: 6px; background: repeating-linear-gradient(90deg, #cb61cf 0 2px, transparent 2px 5px); opacity: .68; }
.timeline-playhead { position: absolute; top: 27px; left: 57%; width: 1px; height: 59px; background: #ffa0e6; box-shadow: 0 0 8px #f16bd9; }
.stage-stamp { position: absolute; right: 13%; bottom: 5%; z-index: 5; display: grid; width: 69px; height: 69px; place-content: center; border: 1px solid rgba(241,184,255,.46); border-radius: 50%; background: rgba(119,54,177,.24); color: #ecd9ff; font: 8px var(--mono); letter-spacing: .08em; line-height: 1.25; text-align: center; transform: rotate(11deg); backdrop-filter: blur(12px); }
.stage-stamp span { color: #c0add4; font-size: 6px; }
.stage-stamp i { position: absolute; right: 3px; bottom: 4px; color: var(--pink); font-size: 12px; font-style: normal; }
.hero-bottom { position: absolute; right: max(36px, calc((100% - var(--max)) / 2)); bottom: 37px; left: max(36px, calc((100% - var(--max)) / 2)); display: flex; align-items: center; justify-content: space-between; color: #786b88; font: 7px var(--mono); letter-spacing: .12em; }
.hero-bottom a { display: grid; width: 28px; height: 38px; place-items: center; border: 1px solid rgba(214,168,255,.24); border-radius: 20px; }
.hero-bottom a i { width: 3px; height: 9px; border-radius: 3px; background: var(--lilac); animation: scroll-indicator 1.7s ease-in-out infinite; }
@keyframes scroll-indicator { 0%,100% { transform: translateY(-4px); opacity: .4; } 55% { transform: translateY(5px); opacity: 1; } }
.marquee { height: 48px; display: flex; align-items: center; overflow: hidden; border-top: 1px solid rgba(207,175,246,.14); border-bottom: 1px solid rgba(207,175,246,.14); background: #100b18; transform: rotate(-1deg) scale(1.02); }
.marquee-track { display: flex; width: max-content; white-space: nowrap; animation: marquee 20s linear infinite; }
.marquee-track span { display: block; flex: none; color: #c5a6e8; font: 8px var(--mono); letter-spacing: .22em; }
.marquee-track b { padding: 0 30px; color: var(--pink); font-weight: 400; }
@keyframes marquee { to { transform: translateX(-50%); } }
.section-pad { padding: 142px max(36px, calc((100% - var(--max)) / 2)); }
.portfolio { position: relative; overflow: hidden; background: radial-gradient(ellipse at 80% 50%, rgba(74,33,117,.15), transparent 54%); }
.section-heading { width: min(var(--max), 100%); display: flex; align-items: end; justify-content: space-between; gap: 25px; margin: 0 auto 48px; }
.section-id { color: #e59df2; }
.section-heading .eyebrow, .about-side .eyebrow, .creators-heading .eyebrow { margin-bottom: 22px; }
.section-heading h2, .about-main h2, .creators-heading h2, .contact-copy h2 { margin: 0; font-size: clamp(56px, 8vw, 100px); font-weight: 700; letter-spacing: -.09em; line-height: .89; }
.type-italic { color: var(--lilac); font-family: Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -.08em; }
.portfolio-heading-note { position: relative; display: grid; grid-template-columns: 43px auto; align-items: center; gap: 0 11px; padding-bottom: 7px; }
.note-orbit { grid-row: span 2; color: var(--pink); font-size: 29px; animation: slow-spin 16s linear infinite; }
@keyframes slow-spin { to { transform: rotate(360deg); } }
.portfolio-heading-note p { margin: 0; color: #b3a8c1; font-size: 10px; line-height: 1.7; }
.scroll-hint { grid-column: 2; margin-top: 12px; color: #756987; font: 7px var(--mono); letter-spacing: .1em; }
.scroll-hint b { padding-left: 8px; color: var(--pink); font-size: 12px; }
.reel-track { display: flex; width: calc(100% + max(36px, (100vw - var(--max)) / 2)); gap: 20px; overflow-x: auto; overflow-y: hidden; padding: 20px max(36px, calc((100% - var(--max)) / 2)) 37px; scroll-snap-type: x mandatory; scrollbar-color: #8d4bc2 rgba(214,168,255,.1); scrollbar-width: thin; }
.reel-card { position: relative; flex: 0 0 min(71vw, 760px); min-width: 0; overflow: hidden; scroll-snap-align: center; }
.reel-card:first-child { margin-left: max(0px, calc((var(--max) - 100vw) / 2)); }
.reel-card-link, .reel-card-content { display: block; }
.project-artwork { position: relative; height: clamp(270px, 39vw, 440px); overflow: hidden; border: 1px solid rgba(230,205,255,.2); background: radial-gradient(ellipse at 67% 35%, rgba(168,75,255,.42), transparent 34%), linear-gradient(133deg, #291b39, #130e1c 58%, #241332); transition: border-color .3s ease, box-shadow .3s ease; }
.reel-card:hover .project-artwork, .reel-card:focus-within .project-artwork { border-color: rgba(230,184,255,.62); box-shadow: 0 0 45px rgba(142,65,222,.22); }
.project-artwork::before { position: absolute; inset: 0; z-index: 1; background: linear-gradient(125deg, transparent 32%, rgba(247,174,255,.2) 32.2%, transparent 32.6%), linear-gradient(0deg, rgba(9,7,15,.4), transparent 80%), repeating-linear-gradient(90deg, transparent 0 70px, rgba(233,213,255,.045) 71px 72px); content: ""; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.reel-card:nth-child(2) .project-artwork { background: radial-gradient(ellipse at 35% 39%, rgba(249,100,207,.35), transparent 36%), linear-gradient(145deg, #35203c, #150e1e 61%, #271638); }
.reel-card:nth-child(3) .project-artwork { background: radial-gradient(ellipse at 71% 45%, rgba(109,118,255,.36), transparent 35%), linear-gradient(140deg, #252344, #110f1d 63%, #231b3a); }
.reel-card:nth-child(4n) .project-artwork { background: radial-gradient(ellipse at 35% 39%, rgba(115,223,255,.24), transparent 36%), linear-gradient(145deg, #1b2936, #100e1c 61%, #2a1d43); }
.reel-card:hover .project-artwork::before { transform: scale(1.06); }
.project-poster, .project-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.project-poster { z-index: 0; }
.project-preview { z-index: 1; opacity: 0; transition: opacity .3s ease; }
.reel-card:hover .project-preview, .reel-card:focus-within .project-preview { opacity: 1; }
.project-frame { position: absolute; inset: 10% 9%; z-index: 2; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(230,201,255,.26); background: linear-gradient(140deg, rgba(35,21,54,.38), rgba(13,10,19,.14)); transition: transform .6s cubic-bezier(.2,.7,.2,1), inset .6s ease; }
.project-frame::before, .project-frame::after { position: absolute; width: 31vw; max-width: 390px; aspect-ratio: 1; border: 1px solid rgba(218,169,255,.25); border-radius: 50%; box-shadow: 0 0 50px rgba(146,61,232,.15), inset 0 0 40px rgba(146,61,232,.12); content: ""; }
.project-frame::after { width: 22vw; max-width: 270px; border-color: rgba(252,112,220,.23); transform: translate(22%, 12%); }
.reel-card:hover .project-frame, .reel-card:focus-within .project-frame { inset: 7% 6%; transform: rotate(-1deg); }
.art-title { position: relative; z-index: 1; max-width: 80%; color: #f8efff; font-size: clamp(39px, 7.5vw, 92px); font-weight: 800; letter-spacing: -.095em; line-height: .86; text-align: center; text-wrap: balance; text-shadow: 0 6px 55px rgba(4,2,8,.45); }
.art-signal { position: absolute; top: 13%; right: 15%; z-index: 1; color: #ff9eea; font-size: clamp(30px, 5vw, 60px); text-shadow: 0 0 30px rgba(252,97,212,.75); animation: signal-float 4s ease-in-out infinite; }
@keyframes signal-float { 50% { transform: translateY(-8px) rotate(22deg); } }
.art-index { position: absolute; bottom: 13%; left: 7%; z-index: 1; color: #e2ccef; font: 7px var(--mono); letter-spacing: .17em; }
.art-scanline { position: absolute; top: 0; right: 0; left: 0; z-index: 3; height: 1px; background: rgba(238,177,255,.65); box-shadow: 0 0 15px rgba(198,103,255,.8); opacity: 0; }
.reel-card:hover .art-scanline, .reel-card:focus-within .art-scanline { opacity: .8; animation: scan-reel 2s linear infinite; }
@keyframes scan-reel { to { transform: translateY(440px); } }
.reel-card:nth-child(even) { margin-top: 57px; }
.reel-card-info { display: flex; min-height: 105px; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 3px 9px; }
.project-index { color: #b78cda; font: 7px var(--mono); letter-spacing: .1em; }
.reel-card-heading h3 { margin: 7px 0 4px; font-size: clamp(14px, 2vw, 20px); font-weight: 600; letter-spacing: -.04em; }
.reel-card-heading p { margin: 0; color: #9c91aa; font-size: 9px; }
.project-action { display: flex; align-items: center; gap: 9px; flex: none; color: #d7b4ff; font: 7px var(--mono); letter-spacing: .08em; }
.project-action b { display: grid; width: 29px; height: 29px; place-items: center; border: 1px solid rgba(210,169,255,.3); border-radius: 50%; color: var(--pink); font-size: 14px; font-weight: 400; transition: background .2s ease, transform .2s ease; }
.reel-card:hover .project-action b { transform: rotate(45deg); background: rgba(164,91,255,.24); }
.project-action-pending { color: #776d81; }
.project-action-pending b { color: #9e8caf; }
.reel-bottom { display: flex; width: min(var(--max), 100%); align-items: end; justify-content: space-between; margin: 22px auto 0; color: #857895; font: 7px var(--mono); letter-spacing: .1em; line-height: 1.7; }
.reel-bottom span:nth-child(2) { color: #a99bb6; }
.reel-bottom b { padding-left: 7px; color: var(--pink); font-size: 12px; }

.about { position: relative; overflow: hidden; background: linear-gradient(110deg, #110d19, #0b0811 65%); }
.about::before { position: absolute; top: 0; right: 0; width: 55%; height: 100%; background: radial-gradient(ellipse at 75% 55%, rgba(129,57,196,.16), transparent 54%); pointer-events: none; content: ""; }
.about-bg-mark { position: absolute; top: 2%; left: -4%; color: rgba(226,195,255,.025); font-size: min(67vw, 850px); font-weight: 800; letter-spacing: -.15em; line-height: 1; pointer-events: none; }
.about-layout { position: relative; display: grid; width: min(var(--max), 100%); grid-template-columns: .78fr 1.22fr; gap: 80px; margin: auto; }
.about-side .eyebrow { line-height: 1.7; }
.editor-panel { position: relative; width: min(100%, 405px); height: 374px; margin-top: 37px; padding: 12px; overflow: hidden; border: 1px solid rgba(224,194,255,.29); background: linear-gradient(145deg, rgba(37,26,54,.94), rgba(14,10,22,.96) 70%); box-shadow: 0 28px 80px rgba(0,0,0,.34), 0 0 45px rgba(128,58,197,.12); transform: rotate(-2deg); }
.editor-panel::before { position: absolute; inset: 0; background-image: linear-gradient(rgba(223,200,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(223,200,255,.07) 1px, transparent 1px); background-size: 27px 27px; opacity: .45; content: ""; pointer-events: none; }
.editor-panel-top, .editor-panel-foot { position: relative; z-index: 1; display: flex; height: 27px; align-items: center; justify-content: space-between; color: #a998ba; font: 6px var(--mono); letter-spacing: .09em; }
.editor-panel-top > span:first-child { display: flex; gap: 4px; }
.editor-panel-top i { width: 5px; height: 5px; border-radius: 50%; background: #b478ed; }
.editor-panel-top i:nth-child(2) { background: #e68acb; }
.editor-panel-top i:nth-child(3) { background: #8e7da1; }
.editor-panel-art { position: relative; height: 218px; margin-top: 3px; overflow: hidden; border: 1px solid rgba(224,194,255,.16); background: radial-gradient(ellipse at 54% 42%, rgba(174,92,231,.42), transparent 37%), linear-gradient(135deg, #21172f, #120d1b 70%); }
.editor-panel-art::before { position: absolute; inset: 0; background: linear-gradient(138deg, transparent 44%, rgba(249,151,229,.38) 44.2%, transparent 44.7%), linear-gradient(35deg, transparent 60%, rgba(220,181,255,.18) 60.3%, transparent 60.8%); content: ""; }
.editor-panel-index { position: absolute; top: 13px; left: 14px; z-index: 2; color: #c7b6d9; font: 6px var(--mono); letter-spacing: .14em; }
.editor-monogram { position: absolute; top: 50%; left: 50%; color: rgba(229,202,255,.86); font-size: 181px; font-weight: 800; letter-spacing: -.12em; line-height: 1; text-shadow: 0 0 55px rgba(176,100,234,.45); transform: translate(-56%,-54%); }
.editor-panel-cross { position: absolute; top: 34%; right: 24%; z-index: 2; color: #ff9ce9; font: 20px var(--mono); text-shadow: 0 0 16px var(--pink); }
.editor-panel-caption { position: absolute; right: 14px; bottom: 14px; z-index: 2; color: #e3d3f2; font: 6px/1.6 var(--mono); letter-spacing: .15em; text-align: right; }
.editor-panel-caption strong { color: #ed9feb; font-size: 12px; font-weight: 500; }
.editor-panel-tools { position: relative; z-index: 1; display: flex; height: 34px; align-items: center; justify-content: center; gap: 10px; border-bottom: 1px solid rgba(224,203,255,.14); color: #d0bfdc; font: 6px var(--mono); letter-spacing: .07em; }
.editor-panel-tools b { color: var(--pink); font-size: 11px; font-weight: 400; }
.editor-mini-timeline { position: relative; display: flex; height: 34px; align-items: center; gap: 4px; margin-top: 5px; padding: 0 4px; overflow: hidden; border: 1px solid rgba(224,203,255,.12); background: rgba(7,5,12,.56); }
.editor-mini-timeline i { height: 11px; flex: 1; border: 1px solid rgba(223,170,255,.3); background: linear-gradient(90deg, #8853ae, #34203e); }
.editor-mini-timeline i:nth-child(even) { flex: .63; background: linear-gradient(90deg, #a65da2, #462448); }
.editor-mini-timeline span { position: absolute; top: 0; bottom: 0; left: 58%; width: 1px; background: #ff9ce9; box-shadow: 0 0 9px var(--pink); }
.editor-panel-foot { height: 23px; color: #877992; font-size: 5px; }
.editor-panel-foot span:last-child { color: var(--lilac); font-size: 9px; }
.about-kicker { margin: 0 0 20px; color: #d899eb; font: 8px var(--mono); letter-spacing: .16em; }
.name-highlight { display: inline-block; padding: 2px 8px 3px; border: 1px solid rgba(226,167,255,.42); background: linear-gradient(100deg, rgba(131,56,190,.34), rgba(240,116,213,.12)); box-shadow: 0 0 22px rgba(175,77,203,.16); color: #f1d5ff; font-family: var(--sans); font-size: 1.2em; font-weight: 800; letter-spacing: -.055em; }
.about-main h2 { font-size: clamp(53px, 7vw, 86px); }
.about-text { max-width: 580px; margin: 28px 0 33px; color: #b7adbf; font-size: 12px; line-height: 2; }
.about-specs { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.about-specs > div { min-height: 72px; display: flex; flex-direction: column; justify-content: center; gap: 9px; border-bottom: 1px solid var(--line); }
.about-specs span { color: #927fa6; font: 7px var(--mono); letter-spacing: .12em; }
.about-specs strong { color: #e5d9f2; font-size: 10px; font-weight: 500; }
.about-socials { display: flex; align-items: flex-start; flex-direction: column; gap: 13px; padding-top: 22px; }
.about-social-label { color: #aa91c8; font: 7px var(--mono); letter-spacing: .13em; }
.about-social-links { display: flex; flex-wrap: wrap; gap: 10px; }
.about-social-link, .about-social-pending { min-height: 31px; display: inline-flex; align-items: center; gap: 14px; padding: 0 10px; border: 1px solid rgba(224,203,255,.16); color: #d9c8e8; font: 7px var(--mono); letter-spacing: .04em; transition: border-color .2s ease, background .2s ease; }
.about-social-link:hover { border-color: rgba(214,168,255,.52); background: rgba(164,91,255,.1); }
.about-social-link span { color: #f09de8; }
.about-social-pending { color: #93869f; }

.creators { padding-top: 129px; padding-bottom: 143px; background: transparent; }
.creators-layout { display: grid; width: min(var(--max), 100%); grid-template-columns: .8fr 1.2fr; align-items: center; gap: 90px; margin: auto; }
.creators-heading h2 { font-size: clamp(53px, 7vw, 82px); }
.creators-heading > p:last-child { max-width: 310px; margin: 23px 0 0; color: #a99eb3; font-size: 11px; line-height: 1.8; }
.client-list { border-top: 1px solid var(--line); }
.client-featured { position: relative; display: flex; min-height: 230px; flex-direction: column; justify-content: space-between; overflow: hidden; margin-top: 18px; padding: 19px 22px 17px; border: 1px solid rgba(220,174,255,.3); background: radial-gradient(ellipse at 81% 42%, rgba(182,74,237,.28), transparent 34%), linear-gradient(115deg, rgba(36,23,52,.96), rgba(19,12,29,.9)); box-shadow: inset 0 0 38px rgba(161,82,222,.07); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.client-featured::before { position: absolute; top: -112%; right: -2%; width: 54%; aspect-ratio: 1; border: 1px solid rgba(229,170,255,.19); border-radius: 50%; box-shadow: 0 0 55px rgba(172,77,226,.11), inset 0 0 45px rgba(172,77,226,.1); content: ""; pointer-events: none; }
.client-featured::after { position: absolute; top: 4%; right: 11%; width: 27%; aspect-ratio: 1; border: 1px solid rgba(252,110,217,.24); border-radius: 50%; content: ""; pointer-events: none; }
.client-featured:hover { transform: translateY(-4px); border-color: rgba(238,197,255,.68); box-shadow: inset 0 0 40px rgba(161,82,222,.12); }
.client-featured-top, .client-featured-footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #c4a9d6; font: 7px var(--mono); letter-spacing: .12em; }
.client-featured-platform { color: #f1a3e2; }
.client-featured-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 16px 0 19px; }
.client-featured-index { color: #b68ed0; font: 6px var(--mono); letter-spacing: .11em; }
.client-featured-name { color: #f4eaff; font-size: clamp(27px, 3vw, 40px); font-weight: 700; letter-spacing: -.075em; line-height: 1; text-shadow: 0 0 30px rgba(195,127,255,.2); }
.client-featured-role { color: #c2b3d0; font-size: 9px; }
.client-featured-followers { display: inline-flex; align-items: baseline; gap: 5px; margin-top: 7px; color: #cdb9dc; font: 8px var(--mono); letter-spacing: .03em; }
.client-featured-followers strong { color: #f4b7f0; font-size: 12px; font-weight: 500; text-shadow: 0 0 18px rgba(241,126,223,.22); }
.client-featured-footer { padding-top: 13px; border-top: 1px solid rgba(224,203,255,.14); color: #b0a3bc; font: 7px var(--sans); letter-spacing: 0; }
.client-featured-cta { flex: none; color: #f1b3e9; font: 7px var(--mono); letter-spacing: .07em; }
.client-empty, .client-item { display: flex; min-height: 105px; align-items: center; gap: 19px; border-bottom: 1px solid var(--line); }
.client-empty-index, .client-index { color: #bf8ce2; font: 8px var(--mono); }
.client-empty-copy, .client-name { flex: 1; }
.client-empty strong { color: #e8dff1; font-size: 13px; font-weight: 600; }
.client-empty p { margin: 7px 0 0; color: #94899e; font-size: 9px; line-height: 1.7; }
.client-empty-mark { color: var(--pink); font-size: 18px; }
.client-item { transition: padding .25s ease, background .25s ease; }
.client-item:hover { padding-inline: 12px; background: rgba(168,91,223,.08); }
.client-name { color: #e9def5; font-size: 15px; font-weight: 600; }
.client-name small { display: block; margin-top: 5px; color: #968aa0; font-size: 8px; font-weight: 400; }
.client-platform { color: #9484a5; font: 7px var(--mono); letter-spacing: .1em; }
.client-arrow { color: var(--pink); }

.contact-section { position: relative; overflow: hidden; padding: 120px max(36px, calc((100% - var(--max)) / 2)) 26px; border-top: 1px solid rgba(225,193,255,.12); background: #100a18; isolation: isolate; }
.contact-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 12% 54%, rgba(143,65,255,.27), transparent 42%), radial-gradient(ellipse at 89% 40%, rgba(221,67,190,.14), transparent 40%); }
.contact-section::before { position: absolute; inset: 0; z-index: -1; opacity: .23; background-image: linear-gradient(rgba(215,175,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(215,175,255,.08) 1px, transparent 1px); background-size: 87px 87px; mask-image: linear-gradient(90deg, #000, transparent 68%); content: ""; }
.contact-layout { display: grid; width: min(var(--max), 100%); grid-template-columns: .92fr 1.08fr; align-items: center; gap: 64px; margin: 0 auto 106px; }
.contact-overline { margin: 43px 0 12px; color: #cf9de8; font: 8px var(--mono); letter-spacing: .13em; }
.contact-copy h2 { font-size: clamp(66px, 9vw, 110px); }
.contact-copy > p:not(.eyebrow):not(.contact-overline) { max-width: 400px; margin: 25px 0 23px; color: #b7aabe; font-size: 11px; line-height: 1.9; }
.contact-copy > .contact-channel { display: flex; align-items: center; gap: 9px; margin: 20px 0 12px; color: #e3cef3; font: 7px var(--mono); letter-spacing: .09em; }
.contact-channel span { color: #f09de8; }
.contact-actions { display: flex; align-items: flex-start; flex-direction: column; gap: 11px; }
.contact-discord { display: inline-flex; min-height: 48px; align-items: center; gap: 36px; padding: 0 17px; border: 1px solid rgba(231,197,255,.56); background: linear-gradient(115deg, rgba(138,58,215,.83), rgba(68,37,112,.6)); box-shadow: 0 0 30px rgba(137,63,209,.17); color: #fff; font: 8px var(--mono); letter-spacing: .1em; transition: box-shadow .25s ease, transform .25s ease; }
.contact-discord:hover { transform: translateY(-3px); box-shadow: 0 0 39px rgba(169,83,255,.39); }
.contact-discord > span { color: #ffadea; font-size: 15px; }
.contact-discord-copy { cursor: pointer; }
.contact-feedback { color: #bba8ca; font: 8px var(--mono); }
.contact-discord-disabled { border-color: rgba(220,196,244,.17); background: rgba(255,255,255,.035); box-shadow: none; color: #a399af; cursor: default; }
.contact-handle { color: #8f839c; font: 8px var(--mono); }
.email-link { margin-top: 3px; color: #dbb0f9; font-size: 10px; }
.brief-card { position: relative; padding: 25px; border: 1px solid rgba(224,194,255,.22); background: linear-gradient(145deg, rgba(41,26,58,.7), rgba(17,12,25,.86)); box-shadow: 0 30px 90px rgba(0,0,0,.28), inset 0 0 50px rgba(174,101,244,.045); backdrop-filter: blur(15px); }
.brief-card::before { position: absolute; top: 0; left: 26px; width: 44px; height: 1px; background: linear-gradient(90deg, var(--violet), var(--pink)); content: ""; }
.brief-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: #b398c8; font: 8px var(--mono); letter-spacing: .1em; }
.brief-header i { color: #8b7b98; font-size: 7px; font-style: normal; }
.brief-header i::first-letter { color: #d797ff; }
.brief-card h3 { margin: 23px 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.05em; }
.brief-caption { margin-bottom: 14px; color: #a99eb4; font-size: 10px; line-height: 1.75; }
.brief-card ol { display: grid; margin: 0; padding: 0; list-style: none; }
.brief-card li { min-height: 39px; display: flex; align-items: center; gap: 13px; border-bottom: 1px solid rgba(224,203,255,.09); color: #c5b8d0; font-size: 10px; }
.brief-card li span { color: #ed95e9; font: 8px var(--mono); }
.brief-template { margin-top: 18px; padding: 16px; border: 1px solid rgba(224,203,255,.14); background: rgba(8,6,14,.4); }
.copy-template { display: inline-flex; align-items: center; gap: 14px; padding: 0 0 10px; border: 0; background: none; color: var(--lilac); font: 8px var(--mono); letter-spacing: .09em; cursor: pointer; }
.copy-template:hover { color: #fff; }
.copy-template span { color: var(--pink); font-size: 12px; }
.brief-template pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: #c9bdcf; font: 10px/1.8 var(--mono); user-select: text; }
.copy-status { margin: 10px 0 0; color: #93869f; font-size: 9px; line-height: 1.6; }
.brief-footer { display: flex; align-items: center; gap: 9px; margin-top: 19px; color: #9586a1; font: 6px var(--mono); letter-spacing: .09em; }
.brief-footer .signal { width: 5px; height: 5px; }
.contact-bottom-line { display: flex; width: min(var(--max), 100%); align-items: center; justify-content: space-between; margin: auto; padding-top: 20px; border-top: 1px solid rgba(224,203,255,.13); color: #83758f; font: 7px var(--mono); letter-spacing: .12em; }
.contact-bottom-line b { margin-left: 6px; color: var(--pink); font-size: 12px; font-weight: 400; }
.social-strip { border-top: 1px solid rgba(225,193,255,.1); border-bottom: 1px solid rgba(225,193,255,.1); background: #0c0911; }
.social-inner { min-height: 83px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.social-inner > p { margin: 0; color: #a598b0; font: 7px var(--mono); letter-spacing: .12em; }
.social-inner > p span { margin-left: 8px; color: var(--pink); }
.social-links { display: flex; flex-wrap: wrap; gap: 27px; }
.social-link { color: #d4c5e0; font-size: 10px; transition: color .2s ease; }
.social-link:hover { color: #f29be9; }
.social-pending { color: #7c7087; font: 7px var(--mono); letter-spacing: .1em; }
.site-footer { background: #09070f; }
.footer-inner { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.footer-inner .wordmark { font-size: 9px; }
.footer-inner .wordmark-icon { width: 28px; height: 28px; }
.footer-inner p, .footer-top { margin: 0; color: #82778d; font-size: 8px; }
.footer-top { font: 7px var(--mono); letter-spacing: .1em; }
.footer-top span { margin-left: 7px; color: #eb95e3; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reel-card.reveal { transform: translateY(22px) rotate(var(--reel-angle, 0deg)); }
.reel-card.reveal.is-visible { transform: translateY(0) rotate(var(--reel-angle, 0deg)); }

@media (min-width: 1450px) {
  .hero { min-height: 940px; }
}

@media (max-width: 980px) {
  .hero { min-height: 830px; padding-inline: 34px; }
  .hero-index { right: 34px; left: 34px; }
  .hero-inner { grid-template-columns: .95fr 1.05fr; gap: 10px; }
  .hero h1 { font-size: clamp(72px, 10vw, 108px); }
  .hero-stage { min-height: 460px; }
  .frame-front { left: 8%; width: 73%; }
  .frame-art strong { font-size: clamp(38px, 6vw, 55px); }
  .hero-bottom { right: 34px; left: 34px; }
  .section-pad { padding-right: 34px; padding-left: 34px; }
  .about-layout, .creators-layout, .contact-layout { gap: 48px; }
  .reel-track { width: calc(100% + 34px); padding-left: 34px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 79px; }
  .header-shell, .footer-inner, .social-inner { width: calc(100% - 34px); }
  .site-header { top: 10px; }
  .header-shell { min-height: 53px; padding-left: 9px; }
  .wordmark { max-width: calc(100% - 58px); font-size: 8px; }
  .wordmark-icon { width: 30px; height: 30px; }
  .menu-toggle { display: flex; width: 37px; height: 37px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(224,203,255,.22); background: rgba(255,255,255,.02); }
  .menu-toggle span { width: 15px; height: 1px; background: #ead9ff; transition: transform .2s ease; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .primary-nav { position: absolute; top: 59px; right: 0; left: 0; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 8px 15px 14px; border: 1px solid rgba(224,203,255,.18); background: rgba(16,11,26,.97); box-shadow: 0 22px 50px rgba(0,0,0,.4); backdrop-filter: blur(18px); }
  .primary-nav.is-open { display: flex; }
  .primary-nav > a:not(.nav-contact) { padding: 14px 3px; border-bottom: 1px solid rgba(224,203,255,.1); font-size: 8px; }
  .nav-contact { justify-content: space-between; margin-top: 12px; }
  .hero { min-height: 900px; min-height: max(900px, 100svh); align-items: start; padding: 150px 23px 85px; }
  .hero::before { background: radial-gradient(ellipse at 72% 65%, rgba(94,41,164,.25), transparent 45%), radial-gradient(ellipse at 30% 32%, rgba(87,32,145,.12), transparent 44%); }
  .hero-grid-overlay { background-size: 48px 48px; }
  .hero-index { top: 89px; right: 23px; left: 23px; font-size: 6px; }
  .hero-index span:last-child { display: none; }
  .hero-inner { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { padding-top: 0; }
  .eyebrow { margin-bottom: 19px; font-size: 7px; }
  .hero-pretitle { margin-bottom: 13px; font-size: 7px; }
  .hero h1 { font-size: clamp(72px, 16.8vw, 112px); }
  .hero-intro { max-width: 390px; margin: 22px 0 18px 3px; font-size: 10px; line-height: 1.85; }
  .hero-actions { gap: 16px; margin-left: 3px; }
  .hero-cta { min-height: 43px; gap: 17px; padding-inline: 12px; font-size: 7px; }
  .hero-secondary { font-size: 7px; }
  .hero-stage { width: 100%; height: 390px; min-height: 390px; margin-top: 3px; transform: none; }
  .orbit-one { width: 88%; height: 57%; }
  .orbit-two { width: 110%; height: 73%; }
  .frame-back { top: 8%; right: 1%; width: 54%; height: 50%; }
  .frame-front { top: 13%; left: 7%; width: 70%; height: 54%; }
  .frame-art { padding-inline: 17px; }
  .frame-art strong { font-size: clamp(38px, 10vw, 53px); }
  .timeline-float { right: 0; bottom: 11%; width: 66%; height: 82px; padding: 10px; }
  .timeline-playhead { height: 50px; }
  .tag-a { top: 22%; left: -3%; font-size: 6px; }
  .tag-b { top: 55%; right: -3%; padding: 8px; font-size: 6px; }
  .stage-stamp { right: 10%; bottom: 1%; width: 57px; height: 57px; font-size: 7px; }
  .stage-crosshair { top: 13%; right: 12%; }
  .hero-bottom { right: 23px; bottom: 19px; left: 23px; font-size: 6px; }
  .hero-bottom a { width: 23px; height: 31px; }
  .marquee { height: 39px; }
  .marquee-track { animation-duration: 16s; }
  .marquee-track span { font-size: 7px; }
  .marquee-track b { padding-inline: 16px; }
  .section-pad { padding: 94px 22px; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 22px; margin-bottom: 25px; }
  .section-heading .eyebrow, .about-side .eyebrow, .creators-heading .eyebrow { margin-bottom: 18px; }
  .section-heading h2, .about-main h2, .creators-heading h2 { font-size: clamp(52px, 13vw, 76px); }
  .portfolio-heading-note { grid-template-columns: 36px auto; }
  .note-orbit { font-size: 25px; }
  .portfolio-heading-note p { font-size: 9px; }
  .scroll-hint { margin-top: 8px; }
  .reel-track { width: calc(100% + 22px); gap: 13px; padding: 13px 22px 25px 22px; scroll-padding-left: 22px; }
  .reel-card { flex-basis: 84vw; }
  .reel-card:first-child { margin-left: 0; }
  .reel-card:nth-child(even) { margin-top: 29px; }
  .project-artwork { height: clamp(250px, 75vw, 340px); }
  .project-frame { inset: 9% 7%; }
  .reel-card:hover .project-frame, .reel-card:focus-within .project-frame { inset: 7% 5%; }
  .project-frame::before { width: 66vw; }
  .project-frame::after { width: 48vw; }
  .art-title { max-width: 90%; font-size: clamp(42px, 12vw, 62px); }
  .art-signal { top: 13%; right: 13%; font-size: 36px; }
  .art-index { bottom: 11%; font-size: 6px; }
  .reel-card-info { min-height: 91px; padding-top: 11px; }
  .reel-card-heading h3 { font-size: 14px; }
  .reel-card-heading p { font-size: 8px; }
  .project-action { gap: 6px; font-size: 6px; }
  .project-action b { width: 25px; height: 25px; }
  .reel-bottom { margin-top: 8px; font-size: 6px; }
  .reel-bottom span:nth-child(2) { display: none; }
  .about { padding-top: 84px; padding-bottom: 88px; }
  .about-layout { grid-template-columns: 1fr; gap: 32px; }
  .about-side .eyebrow { font-size: 6px; }
  .editor-panel { width: min(100%, 370px); height: 326px; margin: 5px 0 0; }
  .editor-panel-art { height: 177px; }
  .editor-monogram { font-size: 149px; }
  .editor-panel-tools { height: 31px; font-size: 5px; }
  .editor-mini-timeline { height: 29px; }
  .editor-panel-foot { height: 21px; }
  .about-kicker { margin-bottom: 15px; font-size: 7px; }
  .about-main h2 { font-size: clamp(47px, 11.8vw, 67px); }
  .about-text { margin: 22px 0 24px; font-size: 10px; }
  .about-specs > div { min-height: 63px; gap: 7px; }
  .about-specs span { font-size: 6px; }
  .about-specs strong { font-size: 8px; }
  .about-socials { gap: 10px; padding-top: 18px; }
  .about-social-links { gap: 7px; }
  .about-social-link, .about-social-pending { min-height: 29px; padding-inline: 8px; font-size: 6px; }
  .creators { padding-top: 88px; padding-bottom: 92px; }
  .creators-layout { grid-template-columns: 1fr; gap: 30px; }
  .creators-heading h2 { font-size: clamp(53px, 13vw, 73px); }
  .creators-heading > p:last-child { max-width: 280px; margin-top: 17px; font-size: 9px; }
  .client-featured { min-height: 205px; margin-top: 10px; padding: 15px; }
  .client-featured-top, .client-featured-footer { font-size: 6px; }
  .client-featured-name { font-size: clamp(26px, 8vw, 34px); }
  .client-featured-followers { font-size: 7px; }
  .client-featured-followers strong { font-size: 11px; }
  .client-featured-footer { align-items: flex-start; flex-direction: column; gap: 9px; }
  .client-empty, .client-item { min-height: 89px; gap: 12px; }
  .client-empty-index, .client-index { font-size: 7px; }
  .client-empty strong { font-size: 11px; }
  .client-empty p { font-size: 8px; }
  .client-empty-mark { font-size: 15px; }
  .client-name { font-size: 12px; }
  .client-platform { font-size: 6px; }
  .contact-section { padding: 90px 22px 19px; }
  .contact-layout { grid-template-columns: 1fr; gap: 37px; margin-bottom: 66px; }
  .contact-overline { margin: 32px 0 10px; font-size: 7px; }
  .contact-copy h2 { font-size: clamp(66px, 17vw, 94px); }
  .contact-copy > p:not(.eyebrow):not(.contact-overline) { max-width: 350px; margin: 21px 0 19px; font-size: 10px; }
  .contact-copy > .contact-channel { margin: 18px 0 11px; font-size: 6px; }
  .contact-discord { min-height: 45px; font-size: 7px; }
  .brief-card { padding: 19px; }
  .brief-header { font-size: 7px; }
  .brief-header i { font-size: 6px; }
  .brief-card h3 { margin-top: 19px; font-size: 18px; }
  .brief-caption { font-size: 9px; }
  .brief-card li { min-height: 37px; font-size: 9px; }
  .brief-template { padding: 13px; }
  .brief-template pre { font-size: 9px; }
  .copy-status { font-size: 8px; }
  .brief-footer { font-size: 6px; }
  .contact-bottom-line { font-size: 5px; letter-spacing: .08em; }
  .contact-bottom-line b { font-size: 10px; }
  .social-inner { min-height: 77px; align-items: flex-start; flex-direction: column; justify-content: center; gap: 13px; }
  .social-inner > p { font-size: 6px; }
  .social-links { gap: 17px; }
  .social-link { font-size: 9px; }
  .social-pending { font-size: 6px; }
  .footer-inner { min-height: 96px; flex-wrap: wrap; justify-content: space-between; gap: 11px; padding-block: 15px; }
  .footer-inner p { order: 3; width: 100%; font-size: 7px; }
  .footer-top { margin-left: auto; font-size: 6px; }
}

@media (max-width: 360px) {
  .hero { padding-inline: 18px; }
  .hero-index { right: 18px; left: 18px; }
  .hero h1 { font-size: 67px; }
  .hero-stage { height: 355px; min-height: 355px; }
  .frame-art strong { font-size: 36px; }
  .hero-bottom { right: 18px; left: 18px; }
  .section-pad { padding-right: 18px; padding-left: 18px; }
  .reel-track { width: calc(100% + 18px); padding-left: 18px; }
  .contact-section { padding-right: 18px; padding-left: 18px; }
}

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