/* ARTIST only. Existing homepage and DEV styles stay in styles.css.
   Design dials: variance 9 / motion 9 / density 3. Native CSS cinematic fallback. */
@font-face { font-family: 'Brang Display'; src: url('./Assets/artist/fonts/BarlowCondensed-Black.ttf') format('truetype'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Brang Ink'; src: url('./Assets/artist/fonts/UnifrakturCook-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('./Assets/artist/fonts/Bangers-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
.manga-chapter-list { padding:50px 0 80px; }
.manga-chapter-list h2 { font:400 38px 'Bangers',Impact,sans-serif; letter-spacing:.04em; }
.chapter-entry { display:block; padding:28px 0; border-top:1px solid #536047; border-bottom:1px solid #536047; color:#e0f5c1; text-decoration:none; font-size:22px; }
.chapter-entry:hover { color:#fff; background:#a3cb7410; }
.artist-subpage.webtoon-reader { padding:0; background:#080909; }
.webtoon-reader .subpage-nav { position:sticky; top:0; z-index:2; padding:10px clamp(16px,4vw,60px); background:#090c0ef5; }
.reader-progress { position:absolute; left:0; bottom:0; width:100%; height:3px; border:0; appearance:none; }
.reader-progress::-webkit-progress-bar { background:#263029; }.reader-progress::-webkit-progress-value { background:#b5e582; }.reader-progress::-moz-progress-bar { background:#b5e582; }
.webtoon-reader .reader-title { max-width:800px; margin:0 auto; padding:40px 20px; font:400 clamp(32px,6vw,54px) 'Bangers',Impact,sans-serif; color:#e2ebd9; }
.webtoon-reader .reader-pages { max-width:800px; background:#000; }
.webtoon-reader .reader-pages img { margin:0; border:0; }
.reader-ending { padding:70px 24px; text-align:center; }
.reader-ending h2 { font:400 clamp(40px,7vw,70px) 'Bangers',Impact,sans-serif; margin:0 0 20px; }
.reader-ending p { color:#b6c1ac; margin-bottom:30px; line-height:1.6; }
.webtoon-reader .reader-nav:empty { display:none; }
.reader-music { position:fixed; z-index:40; right:18px; bottom:18px; width:min(318px,calc(100vw - 24px)); padding:12px 14px; background:#101713f5; border:1px solid #728b5e; border-radius:12px; color:#e9f4dd; box-shadow:0 12px 36px #0009; pointer-events:none; }
.reader-music :is(button,summary,iframe,a) { pointer-events:auto; }
.reader-music[hidden],.reader-music details[hidden] { display:none; }
.reader-music-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.reader-music-identity { display:grid; gap:3px; min-width:0; }
.reader-music-identity strong { font:400 22px/1 'Bangers',Impact,sans-serif; letter-spacing:.04em; }
.reader-music-identity span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:#b9c9ae; font:11px/1.3 'Courier New',monospace; }
.reader-music .reader-music-toggle { flex:none; min-height:40px; padding:8px 11px; border:1px solid #a9cc8c; border-radius:6px; background:#c4e59c; color:#14210c; cursor:pointer; font:700 11px/1 'Courier New',monospace; }
.reader-music .reader-music-toggle:hover { background:#e3f4c5; }
.reader-music :focus-visible { outline:2px solid #e3f4c5; outline-offset:3px; }
.reader-music summary { cursor:pointer; width:max-content; padding:10px 0 1px; color:#d0e7b8; font:10px/1.3 'Courier New',monospace; letter-spacing:.05em; }
.reader-music details[open] summary { padding-bottom:10px; }.reader-music iframe { border:0; display:block; }
.reader-music p,.reader-music a { font-size:12px; line-height:1.5; color:#c7d1bd; }
@media(max-width:900px) { .reader-music { right:10px; bottom:10px; width:min(280px,calc(100vw - 20px)); }.webtoon-reader .reader-ending { padding-bottom:250px; } }
.contact-footer { position:relative; padding:70px clamp(24px,6vw,96px); border-top:1px solid #62778a55; background:#060a0e; display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.contact-title { color:#e7eef5; text-decoration:none; font:900 clamp(54px,9vw,112px)/1 'Brang Display',Impact,sans-serif; }
.contact-title span { color:#9ccaff; display:inline-block; transition:transform .2s; }
.contact-title:hover span { transform:translate(5px,-5px); }
.contact-email { color:#bdcddd; font-size:clamp(14px,2vw,20px); text-underline-offset:6px; overflow-wrap:anywhere; }
.contact-footer .social-destinations { margin-top:5px; }
.contact-footer a:focus-visible { outline:2px solid #9ccaff; outline-offset:6px; }
#world-panel .contact-footer { margin-top:60px; padding-left:0; padding-right:0; background:transparent; }
@media(prefers-reduced-motion:reduce) { .contact-title span { transition:none; }.contact-title:hover span { transform:none; } }
.artist-story { overscroll-behavior: contain; scroll-behavior: auto; }
.artist-story, .artist-subpage { -webkit-overflow-scrolling:touch; touch-action:pan-y; }
.artist-fields { gap:12px; padding-top:24px; }
.artist-fields a { display:inline-flex; align-items:center; min-height:52px; color:#fff0e9; background:#291813; border:1px solid #bd7964; text-decoration:none; padding:14px 18px; font-size:clamp(16px,1.5vw,20px); font-weight:700; line-height:1.25; transition:background .18s,color .18s,border-color .18s; }
.artist-fields a:hover { color:#140a07; background:#f3a38a; border-color:#f3a38a; }
.artist-fields a:focus-visible { outline:3px solid #ffd3b5; outline-offset:4px; background:#4b2920; }
@media(max-width:600px) { .artist-fields { gap:10px; }.artist-fields a { flex:1 1 auto; justify-content:center; padding:14px; } }
.artist-story-inner { min-height: calc(100dvh - 68px); }
.artist-journey { position: relative; background: #030405; }
.chapter-nav { position: sticky; top: 0; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 68px; padding: 0 clamp(20px,4vw,64px); background: #050608f2; border-bottom: 1px solid #ffffff25; }
.chapter-nav a { color: #92999e; text-decoration: none; font: 11px/1.3 'Courier New',monospace; letter-spacing: .06em; padding: 16px 0; }
.chapter-nav > a { color: white; font: 900 18px/1 Arial,sans-serif; letter-spacing: -.04em; }
.chapter-nav > a span { color: #b7bcc0; font: 10px 'Courier New',monospace; letter-spacing: .1em; }
.chapter-nav > div { display: flex; gap: clamp(22px,4vw,60px); }
.chapter-nav button { color:#b7c3ad; background:transparent; border:0; padding:14px 0; cursor:pointer; font:10px 'Courier New',monospace; }
.chapter-nav a:hover, .chapter-nav a[aria-current] { color: #e1fcad; }
.chapter-meter { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; overflow: hidden; }
.chapter-meter i { display: block; height: 100%; background: #d8ff86; transform: scaleX(var(--journey-progress,0)); transform-origin: left; }
.cinematic-section { position: relative; height: 310dvh; --accent: #94d7ff; --reveal: 0; --heading-opacity: 1; --object-scale: 1; --object-turn: 0deg; --object-opacity: 1; --tunnel-scale: .3; --tunnel-opacity: 0; --panel-spread: 0px; --eye-open: .05; --phone-turn: -65deg; --canvas-spread: 1; }
.cinematic-stage { position: sticky; top: 68px; height: calc(100dvh - 68px); min-height: 600px; overflow: hidden; isolation: isolate; background: #030405; perspective: 1100px; }
.cinematic-stage::after { content: ''; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(0deg,#020304 0%,transparent 24%,transparent 70%,#020304 100%); }
.chapter-label { font: 11px/1.6 'Courier New',monospace; letter-spacing: .14em; color: var(--accent,#c4ff81); margin: 0 0 18px; }
.chapter-heading { position: absolute; z-index: 3; top: 8%; left: 5%; right: 5%; opacity: var(--heading-opacity); transform: translate3d(0,var(--heading-y,0px),0); pointer-events: auto; }
.chapter-heading h2 { margin: 0; font: 900 clamp(100px,20vw,320px)/.78 'Brang Display',Impact,sans-serif; letter-spacing: -.035em; }
.chapter-heading h2 a { text-decoration: none; color: inherit; display: inline-block; }
.chapter-heading h2 a:hover { filter: brightness(1.35); }
.music-chapter h2 { color: #d9e2ec; text-shadow: 0 3px 0 #404751, 0 6px 0 #121821, 0 15px 45px #000; }
@supports (background-clip:text) { .music-chapter h2 a { background: linear-gradient(178deg,#fff 4%,#d5e4ee 21%,#4e5964 39%,#f1faff 45%,#9ba7b1 49%,#37424d 70%,#dbe8ee 98%); background-clip: text; color: transparent; text-shadow: none; } }
.chapter-tagline { margin: 26px 0 0 5px; font-size: 13px; font-weight: 700; letter-spacing: .3em; }
.scene-direction { position: absolute; z-index: 3; bottom: 5%; left: 5%; right: 5%; display: flex; justify-content: space-between; font: 10px 'Courier New',monospace; letter-spacing: .15em; color: #a7b0b9; opacity: var(--heading-opacity); pointer-events: none; }
.scene-direction span { font: 32px Arial,sans-serif; }
.scene-visual { position: absolute; z-index: 0; inset: 0; perspective: 1100px; transform-style: preserve-3d; pointer-events: none; }
.music-world { transform-style:flat; background: radial-gradient(ellipse at 70% 55%,#122b4359,transparent 48%),radial-gradient(ellipse at 18% 90%,#59132544,transparent 40%); }
.headset { position:absolute; width:min(48vw,640px); aspect-ratio:1; top:54%; left:62%; transform:translate(-50%,-50%) translateX(var(--headset-shift,0px)) rotateX(var(--headset-tilt,0deg)) rotateY(var(--object-turn)) rotateZ(var(--headset-roll,-18deg)) scale(var(--object-scale)); opacity:var(--object-opacity); }
.headset-art { display:block; width:100%; height:100%; overflow:visible; filter:drop-shadow(14px 28px 20px #0009) drop-shadow(-5px -2px 9px #4a8eb322); }
.sound-tunnel { position:absolute; inset:0; opacity:var(--tunnel-opacity); transform:scale(var(--tunnel-scale)); }
.sound-tunnel i { position:absolute; left:50%; top:52%; width:60%; aspect-ratio:1.8; border:2px solid #528fff; border-radius:50%; transform:translate(-50%,-50%); box-shadow:0 0 45px #2878ff55,inset 0 0 40px #528fff22; }
.sound-tunnel i:nth-child(2) { width:90%; border-color:#e8335b; }.sound-tunnel i:nth-child(3) { width:130%; }.sound-tunnel i:nth-child(4) { width:180%; border-color:#77263e; }.sound-tunnel i:nth-child(5) { width:240%; }
.sound-grid { position:absolute; bottom:-30%; left:-25%; width:150%; height:75%; background:repeating-linear-gradient(90deg,transparent 0 7%,#75baff12 7.1% 7.2%),repeating-linear-gradient(0deg,transparent 0 14%,#75baff17 14.1% 14.3%); transform:rotateX(65deg); }
.chapter-destination { position:absolute; z-index:5; left:7%; right:7%; top:50%; transform:translateY(calc(-50% + (1 - var(--reveal)) * 35px)); opacity:var(--reveal); visibility:hidden; pointer-events:none; }
.chapter-destination:focus { outline:none; }
.artist-subpage:focus { outline:none; }
.cinematic-section.is-destination .chapter-destination { visibility:visible; pointer-events:auto; }
.music-destination { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:center; }
.music-follow { display:grid; grid-template-columns:1.2fr 1fr; gap:8vw; padding:80px 7% 100px; background:#060a0e; color:#e7eef5; border-top:1px solid #62778a44; }
.music-follow h2 { font:900 clamp(42px,6vw,84px)/1 'Brang Display',Impact,sans-serif; margin:0 0 20px; }
.music-follow p { max-width:46ch; color:#b0bbc5; line-height:1.7; margin:0 0 26px; }
.music-genres h3 { font:12px 'Courier New',monospace; letter-spacing:.16em; color:#9ccaff; margin:0 0 25px; }
.music-genres ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; column-gap:28px; row-gap:8px; }
.music-genres li { font:900 clamp(32px,4vw,58px)/1.15 'Brang Display',Impact,sans-serif; }
@media(max-width:600px) { .music-follow { grid-template-columns:1fr; gap:40px; padding:55px 6%; }.music-follow p { font-size:14px; }.music-follow .social-destinations { margin-top:22px; } }
.release-copy h3 { font:900 clamp(70px,9vw,155px)/.85 'Brang Display',Impact,sans-serif; letter-spacing:-.035em; margin:0 0 28px; }
.release-copy h3 span { color:#b6ed8a; }.release-copy > p:not(.chapter-label) { color:#b0bbc5; font-size:16px; }
.chapter-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:35px; }
.artist-cta { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:48px; padding:15px 21px; border:1px solid #d9f8b3; background:#d9f8b3; color:#10150c; font:700 11px/1.4 'Courier New',monospace; letter-spacing:.04em; text-decoration:none; cursor:pointer; transition:transform .2s,background .2s,color .2s; }
.artist-cta:hover { background:#f0ffde; transform:translateY(-3px); }.artist-cta:active { transform:translateY(0); }
.artist-cta.secondary { background:#080c11; color:#d5dfe6; border-color:#54616b; flex-direction:column; gap:4px; }.artist-cta small { font-size:8px; letter-spacing:.12em; color:#929fa9; }
.spotify-shell { padding:16px; background:#11191ee6; border:1px solid #476274; box-shadow:-20px 25px 100px #000; transform:perspective(1000px) rotateY(-7deg); }
.spotify-shell iframe { display:block; border:0; background:#151c21; border-radius:12px; }
.embed-fallback { display:block; margin:14px 0 0; color:#cad8df; font-size:11px; line-height:1.5; }
.manga-chapter { --accent:#d3fa8b; }.manga-world { transform-style:flat; background:radial-gradient(ellipse at 55% 50%,#28242c 0%,#0a0a0c 43%,#020203 77%); }
.pen-motion-video, .pen-scroll-image { position:absolute; width:100%; height:100%; inset:0; object-fit:contain; pointer-events:none; filter:grayscale(1) invert(1) contrast(1.15); mix-blend-mode:screen; opacity:var(--pen-opacity,1); mask-image:radial-gradient(ellipse at 55% 52%,#000 38%,transparent 73%); }
.pen-scroll-image, .phone-scroll-canvas { display:none; }
@media(max-width:600px) {
  .pen-motion-video, .pen-scroll-image { top:18%; height:75%; width:140%; left:-20%; }
  .pen-frames-ready .pen-motion-video { visibility:hidden; }
  .pen-frames-ready .pen-scroll-image { display:block; }
}
.manga-chapter h2 { font-family:'Bangers',Impact,sans-serif; font-size:clamp(100px,20vw,290px); font-weight:400; letter-spacing:.02em; color:#d9d9cc; text-shadow:5px 7px 0 #000; }
.graphite-pencil { position:absolute; width:65%; height:44px; top:56%; left:24%; transform:rotate(-35deg) translateX(calc(var(--panel-spread) * -1)) scale(var(--object-scale)); opacity:var(--object-opacity); background:linear-gradient(#383636,#b3aca0 18%,#181819 35%,#373638 63%,#121213 65%); box-shadow:0 14px 50px #000; }
.graphite-pencil::before { content:''; position:absolute; right:100%; border-top:22px solid transparent; border-bottom:22px solid transparent; border-right:100px solid #a49882; }.graphite-pencil i { position:absolute; right:calc(100% + 71px); top:15px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-right:30px solid #151515; z-index:1; }
.ink-slash { position:absolute; inset:34% -20%; height:35%; background:repeating-linear-gradient(176deg,transparent 0 6px,#050506 7px 17px); transform:rotate(-14deg) scaleX(var(--tunnel-scale)); opacity:var(--tunnel-opacity); }
.manga-panels { position:absolute; inset:0; perspective:800px; opacity:var(--tunnel-opacity); }
.manga-panels i { position:absolute; width:24%; height:51%; left:16%; top:29%; border:4px solid #b3b3a0; background:repeating-linear-gradient(122deg,#0a0b0c 0 4px,#62625a 5px 6px,#151617 7px 21px); transform:translateX(calc(var(--panel-spread) * -1)) rotateY(30deg) rotateZ(-12deg); box-shadow:15px 25px 0 #000; }
.manga-panels i:nth-child(2) { left:44%; top:12%; width:21%; height:42%; transform:translateY(calc(var(--panel-spread) * -.5)) rotateY(-30deg) rotateZ(9deg); background:repeating-radial-gradient(ellipse at 20% 80%,#090a0b 0 18px,#555950 20px 21px,#161817 23px 31px); }
.manga-panels i:nth-child(3) { left:67%; top:47%; width:28%; height:31%; transform:translateX(var(--panel-spread)) rotateY(-28deg) rotateZ(-9deg); background:repeating-linear-gradient(4deg,#070909 0 7px,#3b443b 9px 10px); }
.third-eye { position:absolute; width:min(37vw,520px); aspect-ratio:2; top:38%; left:50%; border-radius:80% 0 80% 0; border:2px solid #c2cdad; background:radial-gradient(ellipse at center,#bded74 0 8%,#424937 15%,#161b15 32%,#090b09 48%); transform:translate(-50%,-50%) rotate(45deg) scaleY(var(--eye-open)); opacity:var(--tunnel-opacity); box-shadow:0 0 90px #b4ff6525; }
.third-eye i { position:absolute; width:18%; height:60%; left:41%; top:20%; border-radius:50%; background:#020400; transform:rotate(-45deg); box-shadow:0 0 15px #dbff8b; }
.manga-destination { top:62%; text-align:center; }.manga-destination h3 { font:700 clamp(74px,11vw,155px)/.78 'Brang Ink',Georgia,serif; margin:0 0 22px; color:#dfdfcd; letter-spacing:-.05em; }.manga-destination h3 em { color:#c8f980; font-style:normal; }
.coming-label { font:11px 'Courier New',monospace; letter-spacing:.45em; margin:25px 0; color:#dfd8ce; }.concept-note { color:#9da69d; font-size:12px; line-height:1.6; max-width:40ch; margin:22px auto 0; }
.content-chapter { --accent:#9ccaff; }.content-world { transform-style:flat; background:radial-gradient(ellipse at 75% 48%,#132f4a 0%,#09111c 31%,#030406 65%); }
.content-chapter .chapter-heading { top:13%; }.content-chapter h2 { font-size:clamp(88px,14vw,225px); letter-spacing:-.025em; line-height:.87; }.content-chapter h2 em { display:block; font-style:italic; padding-bottom:.12em; margin-left:6vw; color:#94caff; }
.creator-canvases { position:absolute; inset:0; transform-style:preserve-3d; }
.creator-canvases i { position:absolute; left:55%; top:25%; width:24%; height:31%; border:1px solid #879dbb; background:repeating-linear-gradient(30deg,#182546 0 35px,#8cb5e6 36px 37px,#090e21 39px 66px); transform:translate(calc(-32vw * var(--canvas-spread)),calc(-10vh * var(--canvas-spread))) rotateY(28deg) rotateZ(-15deg); opacity:var(--object-opacity); box-shadow:0 20px 60px #000; }
.creator-canvases i:nth-child(2) { top:49%; background:repeating-linear-gradient(90deg,#111322 0 12px,#913043 13px 16px,#351526 17px 28px); transform:translate(calc(15vw * var(--canvas-spread)),calc(15vh * var(--canvas-spread))) rotateY(-22deg) rotateZ(18deg); }
.creator-canvases i:nth-child(3) { top:57%; background:repeating-linear-gradient(0deg,#293f59 0 10px,#071019 11px 20px); transform:translate(calc(-29vw * var(--canvas-spread)),calc(19vh * var(--canvas-spread))) rotateY(20deg) rotateZ(12deg); }
.creator-canvases i:nth-child(4) { top:14%; background:repeating-radial-gradient(ellipse at 40% 40%,#16283b 0 13px,#a0d4ed 15px 16px,#080e17 18px 35px); transform:translate(calc(12vw * var(--canvas-spread)),calc(-9vh * var(--canvas-spread))) rotateY(-30deg) rotateZ(-12deg); }
.creator-phone { position:absolute; left:70%; top:51%; width:clamp(180px,20vw,310px); aspect-ratio:.49; border-radius:42px; padding:9px; border:2px solid #aab7c5; background:linear-gradient(110deg,#6d839b,#040710 16%,#09141c 90%,#bfd4e5); box-shadow:13px 9px 0 #1e2a36,15px 11px 0 #647c94,30px 30px 65px #000; transform:translate(-50%,-50%) rotateY(var(--phone-turn)) rotateZ(-8deg) scale(var(--phone-scale,.8)); opacity:var(--phone-opacity,0); }
.phone-display { position:relative; width:100%; height:100%; overflow:hidden; border-radius:32px; background:radial-gradient(ellipse at 30% 35%,#aec9f0 0%,#4c668a 20%,#0b1120 49%,#401221 80%); }
.phone-display i { position:absolute; inset:15% -35%; border:16px solid #81b9e5; border-radius:50%; transform:rotate(-28deg); box-shadow:0 0 30px #5092f7,inset 0 0 30px #ff355a33; }.phone-display i:nth-child(2) { inset:25% -24%; border-width:5px; border-color:#bd334c; transform:rotate(25deg); }.phone-display i:nth-child(3) { inset:37% -15%; border-width:2px; border-color:#c5e8fd; }
.phone-lens { position:absolute; top:20px; left:35%; width:30%; height:15px; border-radius:20px; background:#030507; }
/* The stills from phone.mp4 preserve the reveal when mobile video frames cannot be decoded while paused. */
.phone-motion-video, .phone-fallback, .phone-scroll-canvas { position:absolute; left:70%; top:50%; width:min(48vw,680px); height:90%; object-fit:contain; transform:translate(-50%,-50%); mix-blend-mode:screen; pointer-events:none; }
.phone-motion-video { z-index:1; }
.phone-scroll-canvas { z-index:2; }
.phone-fallback { opacity:0; }
.content-chapter:not(.phone-video-ready) .phone-fallback-exploded { opacity:calc(1 - var(--phone-resolve,0)); }
.content-chapter:not(.phone-video-ready) .phone-fallback-assembled { opacity:var(--phone-resolve,0); }
@media(max-width:600px) {
  .phone-motion-video, .phone-fallback, .phone-scroll-canvas { left:68%; top:34%; width:66vw; height:53%; }
  .phone-frames-ready .phone-motion-video, .phone-frames-ready .phone-fallback { visibility:hidden; }
  .phone-frames-ready .phone-scroll-canvas { display:block; }
}
@supports (-webkit-touch-callout: none) {
  @media(max-width:600px) {
    .content-chapter .phone-fallback-exploded { opacity:calc(1 - var(--phone-resolve,0)); }
    .content-chapter .phone-fallback-assembled { opacity:var(--phone-resolve,0); }
    .content-chapter .phone-motion-video { opacity:.2; }
  }
}
.creator-phone.phone-reference { width:clamp(260px,31vw,450px); aspect-ratio:415/535; border:0; border-radius:0; padding:0; background:none; box-shadow:none; transform:translate(-50%,-50%); opacity:1; }
.phone-exploded-art { position:absolute; inset:0; opacity:calc(1 - var(--phone-resolve,0)); transform:scaleX(calc(1 - var(--phone-gather,0)*.42)) scaleY(calc(1 - var(--phone-gather,0)*.08)); mask-image:radial-gradient(ellipse at center,#000 48%,transparent 73%); }
.phone-fragment { position:absolute; inset:0; width:100%; height:100%; overflow:visible; transform:translate(calc(var(--piece-x)*var(--scatter,1)),calc(var(--piece-y)*var(--scatter,1))) rotate(calc(var(--piece-turn)*var(--scatter,1))); }
.phone-final-art { position:absolute; height:100%; width:100%; inset:0; overflow:visible; opacity:var(--phone-resolve,0); transform:perspective(1100px) rotateY(var(--phone-art-turn,-12deg)) rotateZ(var(--phone-art-roll,-5deg)) scale(calc(.91 + var(--phone-resolve,0)*.09)); filter:drop-shadow(15px 25px 24px #0008); }
@media(max-width:600px) { .creator-phone.phone-reference { width:53vw; left:66%; top:37%; } }
@media(prefers-reduced-motion:reduce), (max-height:620px) { .phone-final-art { transform:none; } }
.creator-phone.phone-assembly { border:0; padding:0; background:none; box-shadow:none; perspective:1000px; }
.phone-part { --scatter:1; position:absolute; inset:0; border-radius:inherit; transform:translate(calc(var(--dx,0px)*var(--scatter)),calc(var(--dy,0px)*var(--scatter))) rotateX(calc(var(--rx,0deg)*var(--scatter))) rotateY(calc(var(--ry,0deg)*var(--scatter))) rotateZ(calc(var(--rz,0deg)*var(--scatter))); }
.phone-back { --dx:-100px; --dy:90px; --ry:-30deg; --rz:-24deg; border:2px solid #73899c; background:linear-gradient(125deg,#8094a6,#172332 30%,#36495b 80%,#acbed0); box-shadow:8px 8px 0 #101c29,10px 10px 0 #6d8195; }
.phone-board { --dx:110px; --dy:-85px; --rz:28deg; --rx:22deg; inset:10% 12% 12%; border-radius:14px; border:2px solid #637869; background:repeating-linear-gradient(90deg,transparent 0 17px,#a49b5a55 18px 19px),repeating-linear-gradient(0deg,#133c35 0 23px,#5c837044 24px 25px); }
.phone-board i { position:absolute; width:30%; height:16%; top:12%; left:12%; background:#111a22; border:3px ridge #9fabb2; box-shadow:0 0 0 4px #a7a07566; }.phone-board i:nth-child(2) { top:38%; left:55%; width:22%; }.phone-board i:nth-child(3) { top:74%; width:60%; height:9%; }
.phone-battery { --dx:-150px; --dy:35px; --rz:-32deg; --ry:28deg; inset:34% 22% 17%; border-radius:8px; border:2px solid #7b8591; background:linear-gradient(100deg,#59636e,#131a24 12%,#25313c 90%,#717f8b); display:flex; flex-direction:column; justify-content:space-between; padding:15px; color:#a0adba; font:18px monospace; box-shadow:4px 6px 0 #080e15; }
.phone-camera { --dx:130px; --dy:-150px; --rz:42deg; --ry:-28deg; inset:7% auto auto 13%; width:40%; aspect-ratio:1; border-radius:20%; background:linear-gradient(135deg,#6b7888,#17212c); border:2px solid #a2aeb8; box-shadow:4px 5px 0 #0e1720; }
.phone-camera i { position:absolute; width:34%; aspect-ratio:1; top:9%; left:9%; border-radius:50%; border:4px solid #070c12; background:radial-gradient(circle at 40% 35%,#95c5e6,#25466b 20%,#050a13 45%,#47718e 65%,#080e17 70%); box-shadow:0 0 0 2px #81919e; }.phone-camera i:nth-child(2) { top:54%; }.phone-camera i:nth-child(3) { left:55%; top:30%; }
.phone-frame { --dx:90px; --dy:100px; --rz:22deg; --rx:-20deg; border:7px ridge #a9bac8; background:transparent; box-shadow:5px 5px 0 #253544; }
.phone-screen { --dx:-65px; --dy:-95px; --rz:-18deg; --ry:25deg; padding:9px; border:2px solid #b7c9d7; background:#050910; box-shadow:inset 0 0 0 3px #172330; }
.phone-screen .phone-display { opacity:calc(.12 + var(--screen-on,0)*.88); border-radius:inherit; }
@media(max-width:600px) {
  .creator-phone.phone-assembly { left:66%; top:37%; width:34vw; }
  .phone-part { transform:translate(calc(var(--dx,0px)*var(--scatter)*.4),calc(var(--dy,0px)*var(--scatter)*.55)) rotateX(calc(var(--rx,0deg)*var(--scatter))) rotateY(calc(var(--ry,0deg)*var(--scatter))) rotateZ(calc(var(--rz,0deg)*var(--scatter))); }
  .phone-screen { padding:5px; }.phone-frame { border-width:4px; }.phone-battery { padding:6px; }.phone-camera i { border-width:2px; }
}
.content-destination { left:8%; right:50%; }.content-destination h3 { font:900 clamp(65px,8vw,128px)/.88 'Brang Display',Impact,sans-serif; margin:0 0 32px; letter-spacing:-.025em; }.content-destination h3 em { display:block; font-style:italic; color:#92c5fa; padding-bottom:.1em; }.content-destination .concept-note { margin-left:0; }
.social-destinations { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }.social-link { display:flex; flex-direction:column; align-items:center; gap:9px; border:0; border-bottom:1px solid #62778a; padding:13px 8px; min-width:76px; color:#c6d6e4; background:transparent; cursor:pointer; text-decoration:none; font:9px 'Courier New',monospace; letter-spacing:.05em; }.social-link img { width:22px; height:22px; filter:invert(1); }.social-link:hover { color:white; border-color:#e0f5ff; background:#182c4044; }.social-link small { font-size:7px; color:#8f9eac; }
.artist-colophon { min-height:55dvh; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:80px 24px; text-align:center; background:#080b0b; }.artist-colophon p { font:900 clamp(40px,7vw,100px)/.9 'Brang Display',Impact,sans-serif; margin:0 0 35px; }.artist-colophon em { color:#c7fb85; font-style:normal; }.artist-colophon a { color:#cad8bf; font:11px 'Courier New',monospace; padding:15px; }.artist-colophon > span { color:#7f897a; font:10px 'Courier New',monospace; margin-top:48px; }
.sequence-canvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; opacity:0; pointer-events:none; }.has-sequence .sequence-canvas { opacity:1; }.has-sequence .scene-visual { visibility:hidden; }
.artist-subpage { position:fixed; z-index:30; inset:0; overflow:auto; background:#060808; color:#e7e9df; padding:35px clamp(22px,6vw,96px) 70px; }.artist-subpage[hidden] { display:none; }.subpage-nav { display:flex; justify-content:space-between; gap:20px; align-items:center; border-bottom:1px solid #79837544; padding-bottom:20px; }.subpage-nav a { color:#d9dfd1; text-decoration:none; font:11px 'Courier New',monospace; padding:10px 0; }.subpage-hero { min-height:76dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; position:relative; isolation:isolate; }.subpage-hero::before { content:''; position:absolute; z-index:-1; width:min(80vw,650px); aspect-ratio:1; border:1px solid #9cc66924; border-radius:50%; background:repeating-radial-gradient(ellipse,#98aa6e09 0 2px,transparent 3px 34px); transform:rotateX(36deg); }.subpage-hero h1 { font:700 clamp(85px,18vw,240px)/.83 'Brang Ink',Georgia,serif; margin:12px 0 30px; letter-spacing:-.04em; }.subpage-hero p { max-width:46ch; color:#aeb8a3; line-height:1.7; }.subpage-hero .chapter-label { color:#cbfb8b; }.content-page .subpage-hero h1 { font-family:'Brang Display',Impact,sans-serif; font-size:clamp(64px,14vw,180px); font-style:italic; line-height:1; color:#a5cfff; }.content-page .subpage-hero::before { border-radius:0; transform:rotate(-13deg); border-color:#aacbff3b; background:repeating-linear-gradient(0deg,transparent 0 40px,#bedcff0d 41px 42px); }
.reader-pages { max-width:850px; margin:auto; }.reader-pages img { display:block; width:100%; height:auto; }.reader-nav { display:flex; gap:30px; justify-content:center; padding:30px; }.reader-nav a { color:#ddf5c1; }.project-list { max-width:1000px; margin:0 auto; }.project-list article { border-top:1px solid #64788c; padding:35px 0; }.project-list a { color:#b8daff; }.project-list img { max-width:100%; max-height:70dvh; object-fit:contain; }.manga-cover { max-height:55dvh; max-width:90%; object-fit:contain; margin:20px auto; }
.artist-notice { position:fixed; z-index:40; bottom:24px; left:50%; transform:translate(-50%,20px); max-width:calc(100vw - 40px); width:max-content; padding:14px 20px; background:#d9efbf; color:#141b0b; font-size:13px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }.artist-notice.is-visible { opacity:1; transform:translate(-50%,0); }
.artist-story a:focus-visible,.artist-story button:focus-visible,.artist-subpage a:focus-visible,.artist-subpage button:focus-visible { outline:2px solid #d0ff91; outline-offset:5px; }
.manga-destination h3 { line-height:.95; padding-bottom:.18em; margin-bottom:8px; }
.manga-destination h3, .manga-page .subpage-hero h1 { font-family:'Bangers',Impact,sans-serif; font-weight:400; letter-spacing:.02em; }
.manga-destination .coming-label { margin-top:10px; }
.manga-cover-link[hidden] { display:none; }
.manga-destination.has-cover { display:grid; grid-template-columns:.8fr 1fr; gap:8%; left:13%; right:13%; top:51%; align-items:center; text-align:left; }
.manga-cover-link { display:block; transform:perspective(1200px) rotateY(-12deg) rotateZ(-3deg); transition:transform .35s ease; }
.manga-cover-link:hover { transform:perspective(1200px) rotateY(0) rotateZ(0); }
.manga-cover-link img { display:block; width:100%; height:auto; max-height:65dvh; object-fit:contain; box-shadow:18px 25px 55px #000b; }
.manga-destination.has-cover h3 { font-size:clamp(75px,9vw,135px); }
.manga-destination.has-cover .concept-note { margin-left:0; }
.manga-page .subpage-hero.has-cover { display:grid; grid-template-columns:.85fr 1fr; gap:8%; align-items:center; text-align:left; padding:45px 0; }
.manga-page .subpage-hero.has-cover h1 { font-size:clamp(88px,12vw,175px); line-height:1; }
.manga-page .subpage-hero.has-cover .manga-cover { display:block; width:100%; height:auto; max-height:72dvh; max-width:100%; margin:0; object-fit:contain; }
@media(max-width:900px) {
  .cinematic-stage { min-height:560px; }.chapter-nav > a span { display:none; }.chapter-nav > div { gap:22px; }
  .headset { width:67vw; top:54%; left:58%; }.music-destination { gap:25px; left:5%; right:5%; }.release-copy h3 { font-size:80px; }.spotify-shell { padding:9px; transform:none; }.chapter-actions { gap:8px; }.artist-cta { padding:13px; }
  .content-destination { right:44%; }.creator-phone { left:76%; width:24vw; }.social-link { min-width:62px; }
}
@media(max-width:600px) {
  .manga-destination.has-cover { display:flex; flex-direction:column; gap:16px; top:50%; left:6%; right:6%; text-align:center; }
  .manga-cover-link img { width:auto; height:30dvh; max-height:260px; max-width:80vw; }
  .manga-destination.has-cover h3 { font-size:12vw; line-height:1; margin:0; padding-bottom:.17em; }
  .manga-destination.has-cover h3 br { display:none; }
  .manga-destination.has-cover h3 em { display:inline-block; margin-left:.15em; }
  .manga-destination.has-cover .chapter-label { margin-bottom:8px; }
  .manga-destination.has-cover .coming-label { margin:8px 0 16px; }
  .manga-destination.has-cover .concept-note { margin:14px auto 0; }
  .manga-page .subpage-hero.has-cover { grid-template-columns:1fr; gap:24px; text-align:center; }
  .manga-page .subpage-hero.has-cover .manga-cover { height:52dvh; width:auto; max-width:100%; margin:auto; }
  .manga-page .subpage-hero.has-cover h1 { font-size:24vw; }
  .chapter-nav { height:58px; gap:8px; padding:0 18px; }.chapter-nav > a { font-size:15px; }.chapter-nav > div { gap:18px; }.chapter-nav > div a { font-size:10px; }.chapter-nav > div a span { display:none; }
  .cinematic-section { height:330dvh; }.cinematic-stage { top:58px; height:calc(100dvh - 58px); min-height:600px; }.chapter-heading { top:10%; left:6%; right:6%; }.chapter-heading h2 { font-size:30vw; }.chapter-tagline { font-size:10px; letter-spacing:.18em; margin-top:20px; }.chapter-label { font-size:9px; }
  .headset { left:52%; top:56%; width:88vw; }.scene-direction { font-size:8px; bottom:6%; }.music-destination { grid-template-columns:1fr; gap:20px; top:49%; }.release-copy h3 { font-size:60px; margin-bottom:12px; }.release-copy > p:not(.chapter-label) { font-size:13px; }.chapter-actions { margin-top:18px; }.artist-cta { min-height:44px; font-size:9px; }.spotify-shell iframe { height:152px; }.embed-fallback { font-size:10px; }
  .spotify-shell { padding:10px; }
  .graphite-pencil { width:100%; left:20%; height:30px; }.graphite-pencil::before { border-top-width:15px; border-bottom-width:15px; border-right-width:70px; }.graphite-pencil i { right:calc(100% + 49px); top:10px; border-top-width:5px; border-bottom-width:5px; border-right-width:22px; }
  .manga-panels i { width:42%; left:3%; }.manga-panels i:nth-child(2) { width:35%; left:42%; }.manga-panels i:nth-child(3) { width:38%; left:69%; }.third-eye { width:62vw; top:30%; }.manga-destination { top:61%; }.manga-destination h3 { font-size:24vw; }
  .content-chapter h2 { font-size:20vw; }.content-chapter .chapter-heading { top:12%; }.creator-phone { top:31%; left:70%; width:34vw; border-radius:26px; padding:6px; }.phone-display { border-radius:20px; }.phone-lens { top:13px; height:10px; }.creator-canvases i { width:38%; }.content-destination { left:6%; right:6%; top:65%; }.content-destination h3 { font-size:17vw; margin-bottom:18px; }.content-destination .chapter-label { max-width:23ch; }.social-destinations { gap:14px; margin-top:17px; }.social-link { min-width:68px; }.concept-note { font-size:11px; }.artist-colophon p { font-size:12vw; }
}
@media(prefers-reduced-motion:reduce), (max-height:620px) {
  .manga-destination.has-cover { top:auto; left:auto; right:auto; }
  .cinematic-section { height:auto; }.cinematic-stage { position:relative; top:auto; min-height:960px; height:auto; padding-top:250px; padding-bottom:70px; }.chapter-heading { top:65px; opacity:1; transform:none; }.chapter-heading h2 { font-size:clamp(80px,16vw,200px); }.chapter-tagline { margin-top:20px; }.chapter-destination { position:relative; left:auto; right:auto; top:auto; margin:80px 7% 0; opacity:1; visibility:visible; transform:none; pointer-events:auto; }.scene-visual { opacity:.22; }.headset { transform:translate(-50%,-30%) rotate(-15deg); }.sound-tunnel { opacity:.15; }.manga-destination h3 { font-size:100px; }.content-destination { margin-top:130px; }.content-destination h3 { font-size:90px; }.creator-phone { opacity:1; transform:translate(-50%,-50%) rotate(-8deg); }.scene-direction { display:none; }.sequence-canvas { opacity:.25; }
}