/* unified.css */
/* One environment: the original light curtain with water and a receding stage. */
:root{--retreat:0;--scene-scale:1;--scene-opacity:1;--scene-dim:0}
body{background:#040b16}
html.lezel-home,html.lezel-home body{overscroll-behavior-y:none}
body .hero{overflow:visible;isolation:auto;position:relative;height:100svh;min-height:600px;z-index:0}
.unified-stage{position:fixed;inset:0;height:100svh;min-height:600px;overflow:hidden;isolation:isolate;transform:scale(1);transform-origin:50% 47%;opacity:var(--scene-opacity);will-change:transform,opacity}
.unified-stage{mask-image:linear-gradient(transparent,#000 3% 96%,transparent),linear-gradient(90deg,transparent,#000 3% 97%,transparent);mask-composite:intersect}
.unified-stage{--hero-content-drop:20px}
.unified-stage{overflow:clip;touch-action:pan-y pinch-zoom}
.unified-stage :is(.world-title,.keyvisual,.spatial-nav,.hero-socials,.scroll-cue,.scene-words){translate:0 var(--hero-content-drop)}
.unified-stage .keyvisual,.unified-stage .keyvisual img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
@media(max-width:700px){.unified-stage{--hero-content-drop:18px}}
@media(max-width:700px) and (max-height:700px){.unified-stage{--hero-content-drop:12px}}
@media(orientation:landscape) and (max-height:550px){.unified-stage{--hero-content-drop:6px}}
.scene-shade{position:absolute;inset:0;background:#030916;opacity:0;pointer-events:none;z-index:12;will-change:opacity}
.unified-stage .world-background{transform:none!important;transition:none!important}
/* Preserve the full-resolution curtain; blend the animated pass in at the waterline. */
.unified-water{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mask-image:linear-gradient(to bottom,transparent var(--water-surface-start,60%),#000 var(--water-surface-line,64%),#000 90%,transparent 100%)}
.unified-bubbles{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.unified-stage :is(.unified-bubbles,.bubbles,.particles){-webkit-mask-image:var(--menu-effect-mask,none);mask-image:var(--menu-effect-mask,none);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.unified-stage .bubbles{z-index:4;transform:none;transition:none}
/* WebGL owns the visible bubbles; their hidden CSS fallback need not animate. */
.glass-active .bubbles i{visibility:hidden;animation-play-state:paused}
.unified-stage .water-ripples{visibility:hidden!important;opacity:0!important}
.unified-stage .bubbles i{animation-name:unified-bubble-drift;animation-duration:16s}
@keyframes unified-bubble-drift{0%,100%{translate:0 30px}50%{translate:7px -40px}}
body .depth{position:relative;z-index:2;background:transparent;padding-top:100px}
.depth:before{display:none}
.depth>.section{position:relative;margin:0 auto 80px;padding:56px 60px;background:linear-gradient(125deg,#1b304746,#080f20c9);border:1px solid #aec7e033;box-shadow:0 25px 70px #0003;backdrop-filter:blur(16px);border-radius:3px}
.depth>.section:before{content:'';position:absolute;top:0;left:12%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#e5f4ff70,transparent)}
.depth .section-heading h2{font-size:clamp(36px,4.2vw,58px);letter-spacing:.1em}
.depth .section-heading{border-bottom:1px solid #bacce72a;padding-bottom:26px;margin-bottom:32px}
.depth .eyebrow{letter-spacing:.17em}
.depth .news-item{background:none}
.depth .profile-section{padding-top:65px;padding-bottom:65px}
.scroll-cue{gap:16px!important;font-size:10px!important;letter-spacing:.18em}
.scroll-cue i{position:relative;height:40px!important;overflow:hidden;border:0!important;background:#bfdef328;width:1px!important}
.scroll-cue i:after{content:'';position:absolute;left:0;width:1px;height:17px;background:#d9f1ff;box-shadow:0 0 8px #c9e9ff;animation:explore-travel 2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes explore-travel{0%{transform:translateY(-18px)}70%,100%{transform:translateY(45px)}}
@media(max-width:700px){body .hero,.unified-stage{min-height:600px}.depth>.section{padding:30px 22px;margin-bottom:34px}.depth .section-heading h2{font-size:34px}.depth .section-heading{gap:12px}.depth .section-heading .text-link{font-size:11px}.scroll-cue{font-size:8px!important}.depth>.profile-section{padding:36px 24px}}
.motion-off .unified-stage{transform:none;will-change:auto}
.motion-off .hero .keyvisual img{opacity:1!important}
.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.motion-off .scroll-cue i:after{transform:translateY(10px)}
.unified-heading{position:relative;flex-wrap:wrap}
.unified-heading .signal-number{display:block;flex-basis:100%;font:10px var(--serif);letter-spacing:.24em;color:#b6c9df;margin-bottom:24px}
.unified-heading .world-subtitle{flex-basis:100%;font:14px/1.8 var(--jp);letter-spacing:.13em;color:#b3c3d7;margin:16px 0 0}
/* Stack English above Japanese along one unbroken vertical axis. */
.scene-words{position:absolute;right:3.7%;top:calc(50% - var(--hero-content-drop));margin:0;width:max-content;writing-mode:horizontal-tb;display:flex;flex-direction:column;gap:24px;align-items:center;transform:translateY(-50%);z-index:8;color:#bacbde;font-size:10px;letter-spacing:.19em;opacity:.68;pointer-events:none}
.scene-words>span{writing-mode:vertical-rl;text-orientation:mixed;white-space:nowrap;flex:0 0 auto;line-height:1.5}
.scene-words>span:first-child{font:9px/1.5 var(--serif);letter-spacing:.24em}
@media(min-width:701px) and (max-height:550px){.scene-words{font-size:clamp(6px,1.4svh,8px);letter-spacing:.12em;gap:18px}.scene-words>span:first-child{font-size:clamp(5px,1.2svh,7px);letter-spacing:.16em}}
.unified-media-tabs{display:flex;align-items:center;gap:32px;margin:0 0 26px;padding-bottom:0;border-bottom:1px solid #aec8e129}
.unified-media-tabs button{position:relative;font:18px var(--serif);letter-spacing:.16em;padding:15px 2px;color:#8697ac;background:none;border:0;cursor:pointer}
.unified-media-tabs button:after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;transform:scaleX(0);background:#d1e7fb;transition:transform .4s;box-shadow:0 0 10px #b7ddff99}
.unified-media-tabs button[aria-selected=true]{color:#eef6ff}
.unified-media-tabs button[aria-selected=true]:after{transform:scaleX(1)}
[role=tabpanel][hidden]{display:none!important}
.unified-media-tabs+[role=tabpanel]{min-height:240px}
[role=tabpanel].music-videos{margin-top:0;padding-top:0;border-top:0}
html.heading-entry-pending .inner-shell>.page-heading.unified-heading :is(.signal-number,.eyebrow,h1,h2,.world-subtitle),.decode-pending{opacity:0}
.text-decoding{position:relative}
.text-decoding>.decode-original,.text-decoding>.decode-overlay{font:inherit!important;letter-spacing:inherit!important;text-transform:inherit}
.text-decoding .decode-original{opacity:0}
.decode-overlay{position:absolute;inset:0;color:#d5e7ff;text-shadow:1px 0 #c4bffa88,-1px 0 #8fbadd66;overflow:hidden;pointer-events:none}
.news-window-story .decode-overlay{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis}
.inner-page .ocean-world{background:linear-gradient(#030813aa,#030813f2),var(--lezel-environment) center/cover}
/* Attenuate only the reflected floor, leaving the upper fabric/light intact. */
html body.inner-page .ocean-world{background-image:linear-gradient(to bottom,transparent var(--page-waterline,68vh),#030e1c99 calc(var(--page-waterline,68vh) + 10vh),#030e1cee 100%),linear-gradient(#030813aa,#030813f2),var(--lezel-environment);background-size:100% 100%,100% 100%,var(--menu-environment-size,cover);background-position:0 0,0 0,var(--menu-environment-position,center);background-repeat:no-repeat}
.lezel-home .header-nav .header-link{text-shadow:0 1px 3px #030e1c,0 0 6px #030e1ccc}
body.inner-page .inner-shell{width:calc(100% - 112px);max-width:1160px;margin:140px auto 90px;padding:58px 60px;background:linear-gradient(125deg,#18273f9c,#090f1bd9);backdrop-filter:blur(16px);border:1px solid #b6cbe538;box-shadow:0 25px 80px #0005;border-radius:3px}
.inner-shell .page-heading{padding-bottom:32px;margin-bottom:34px;border-bottom:1px solid #b4c4df33}
.inner-shell .page-heading h1{font-size:clamp(34px,5vw,62px);letter-spacing:.12em;font-weight:400;margin:10px 0}
.inner-shell .page-heading .signal-number{margin-bottom:18px}
.inner-shell .page-heading .world-subtitle{margin-top:18px}
/* Keep line boxes stable while fonts load; decoding only changes an overlay. */
.inner-shell .page-heading h1{line-height:1.2;min-block-size:1.2em}
.inner-shell .page-heading .signal-number{line-height:1.2;min-block-size:1.2em}
.inner-shell .page-heading .eyebrow{line-height:1.8;min-block-size:1.8em}
.inner-shell .page-heading .world-subtitle{min-block-size:1.8em}
.inner-shell .bio .profile-portrait{width:100%;height:auto;max-height:640px;object-fit:contain;object-position:top;padding:22px 12px;border:1px solid #c5d6ed26;background:#21304825}
.inner-shell .bio{align-items:start;grid-template-columns:minmax(0,1fr);gap:42px}
.profile-artwork-link{display:block;width:min(100%,620px);justify-self:center;cursor:zoom-in}
.profile-artwork-link:focus-visible{outline:1px solid #d7e9f6;outline-offset:5px}
.profile-artwork-link.music-pointer-return:focus{outline:none}
@media(min-width:701px){.inner-shell .bio .profile-portrait{max-height:none;padding:14px 8px}}
.inner-shell .full-bio{margin-top:0}
/* The portrait now sits above the biography: give the prose its own measure. */
.inner-shell .profile-biography{width:min(100%,52rem);justify-self:center;min-width:0}
.inner-shell .profile-biography .full-bio{white-space:normal}
.inner-shell .full-bio>.bio-paragraph{display:block;white-space:normal;text-wrap:balance;margin-bottom:1.6em}
.inner-shell .full-bio>.bio-paragraph:last-child{margin-bottom:0}
.inner-shell .full-bio .bio-text-unit{white-space:nowrap}
.inner-shell .catalogue{gap:35px 28px}
.inner-shell .catalogue-filters{flex-wrap:wrap}
.footer{position:relative;z-index:2}
.intro-running{overflow:hidden!important}
.unified-opening{position:fixed;inset:0;z-index:9999;background:#000000;display:grid;place-items:center;opacity:1;transition:opacity .9s ease}
.unified-opening[hidden]{display:none!important}
.unified-opening.leaving{opacity:0;pointer-events:none}
.unified-opening .opening-still{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:128px;height:auto;opacity:1;transition:opacity .25s}
/* Supplied 1080p film uses a 1.8x larger mark. Match the old visible logo bounds and center at every responsive width without re-encoding. */
.unified-opening .opening-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) translate(-0.46875%,-1.394033%) scale(.555555556);width:min(1500px,240vw);max-width:none;height:auto;mix-blend-mode:screen;filter:none;opacity:0;mask-image:radial-gradient(ellipse at center,#000 45%,transparent 72%)}
.unified-opening.video-playing .opening-video{opacity:1}
.unified-opening.video-playing .opening-still{opacity:0}
.opening-caption{position:absolute;top:calc(50% + 156px);font:10px var(--serif);letter-spacing:4px;color:#aebdd4}
.skip-intro{position:absolute;right:5%;bottom:34px;color:#c4d2e5;font:12px var(--serif);letter-spacing:2px;padding:16px 0;background:none;border:0;border-bottom:1px solid #b5d3f33a;cursor:pointer}
@media(max-width:1050px){body.inner-page .inner-shell{margin-top:140px;padding:40px;width:calc(100% - 70px)}}
@media(max-width:700px){body.inner-page .inner-shell{width:calc(100% - 28px);margin:105px auto 100px;padding:30px 22px}.inner-shell .bio{grid-template-columns:1fr;gap:28px}.inner-shell .bio .profile-portrait{height:370px;max-width:300px;margin:auto}.inner-shell .page-heading h1{font-size:36px}.scene-words{display:none}.unified-media-tabs{gap:28px}.unified-media-tabs button{font-size:16px}.unified-heading .world-subtitle{font-size:12px}.unified-heading .signal-number{font-size:9px;margin-bottom:16px}.opening-still{width:100px!important}.opening-caption{top:calc(50% + 128px);font-size:9px}.footer{padding-bottom:80px}}
@media(max-width:700px){.unified-stage .hero-socials{bottom:calc(24px + env(safe-area-inset-bottom,0px))!important}.unified-stage .spatial-nav{bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}.social-dock{bottom:calc(10px + env(safe-area-inset-bottom,0px))!important}.unified-stage .scroll-cue{display:flex!important;left:auto!important;right:15px!important;bottom:calc(32px + env(safe-area-inset-bottom,0px))!important;transform:none;height:28px!important}.unified-stage .scroll-cue span{display:none}.unified-stage .scroll-cue i{height:28px!important}}
@media(max-width:700px){body .hero,.unified-stage{min-height:0}.unified-stage .keyvisual{max-height:calc(80% - 180px - env(safe-area-inset-bottom,0px))}}
@media(max-width:700px) and (max-height:700px){.unified-stage .keyvisual{max-height:calc(79% - 180px - env(safe-area-inset-bottom,0px))}}
/* Portrait phones: use the space above the lower menu without cropping the wings.
   Menu/SNS touch areas remain separate; labels sit gently lower inside their rows. */
@media(max-width:700px) and (orientation:portrait){
 .unified-stage .keyvisual{height:60%;max-width:100%;max-height:calc(80% - 156px - env(safe-area-inset-bottom,0px))}
 .unified-stage .spatial-nav{bottom:calc(68px + env(safe-area-inset-bottom,0px))!important;padding-block:0}
 .unified-stage .spatial-nav a{height:44px;padding-top:12px;padding-bottom:0}
}
@media(max-width:700px) and (max-height:700px) and (orientation:portrait){
 .unified-stage .keyvisual{max-height:calc(79% - 156px - env(safe-area-inset-bottom,0px))}
}
/* A single, movable pane of glass. Its title bar owns dragging; the story remains a normal link. */
.news-window{position:absolute;left:0;top:0;width:200px;max-width:calc(100% - 28px);z-index:9;visibility:hidden}
.news-window.is-ready{visibility:visible}
.news-window-surface{overflow:hidden;border:1px solid #c5ddf35c;border-radius:5px;background:linear-gradient(125deg,#90b4d323,#102037a8 60%,#0b1829bd);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px #eef8ff40,inset 0 0 24px #a1c8e20a,0 12px 34px #0003;opacity:0;translate:0 8px;transition:opacity .8s ease,translate .8s cubic-bezier(.2,.8,.2,1),border-color .25s}
.news-window.is-ready .news-window-surface{opacity:1;translate:0 0}
.news-window-bar{display:flex;align-items:stretch;border-bottom:1px solid #c6dcf02e;background:linear-gradient(100deg,#d1e7fc12,#8dabc405)}
.news-window-handle{display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:32px;padding:0 2px 0 9px;border:0;background:none;color:#edf5ff;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.news-window-label{font:12px/1 var(--serif);letter-spacing:.10em}
.news-window time{margin-left:auto;font:10px/1 var(--serif);letter-spacing:.03em;color:#c1d3e7;white-space:nowrap}
.news-window-close{flex:none;width:32px;min-height:32px;border:0;background:none;color:#d5e5f6;font:19px/1 var(--serif);cursor:pointer;transition:background .25s,color .25s}
.news-window-close:hover{background:#dcf0ff12;color:#fff}
.news-window-story{display:flex;align-items:center;gap:7px;min-height:44px;padding:7px 9px;color:#edf5ff!important;transition:background .3s}
.news-window-story:hover{background:#badbff0c}
.news-window-story h2{margin:0;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 12px/1.55 var(--jp);letter-spacing:.015em}
.news-window button:focus-visible,.news-window-story:focus-visible{outline:1px solid #d0eaff;outline-offset:-4px;border-radius:3px}
.news-window.is-dragging .news-window-handle{cursor:grabbing}
.news-window.is-dragging .news-window-surface{border-color:#e0f0ffb3}
.intro-running:not(.intro-revealing) .news-window{visibility:hidden}
.intro-running:not(.intro-revealing) .news-window .news-window-surface{opacity:0;translate:0 8px}
/* The Water & Glass option uses the original beveled refraction renderer. */
.news-window-optics{position:absolute;inset:0;width:100%;height:100%;z-index:8;pointer-events:none}
.news-window-optics[hidden]{display:none}
[data-window-material=water] .news-window-surface{border-radius:16px;background:linear-gradient(120deg,#e4f7ff08,#def4ff02 61%,#d3efff0e),#0d273de6;backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);box-shadow:inset 0 1px 1px #f3fcff8a,0 32px 60px #020e2259}
.news-window.has-notice-optics[data-window-material=water] .news-window-surface{background:transparent;border-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.news-window[data-window-material=water]{color:#fff;text-shadow:0 1px 2px #020a14,0 0 5px #020a14,0 0 10px #031223a0}
[data-window-material=water] .news-window-bar{background:#d5edff08;border-bottom-color:#e6f6ff40}
[data-window-material=water] .news-window-handle{padding-left:11px}
.unified-stage .bubbles i:nth-child(1){scale:var(--bubble-scale-1,1)}
.unified-stage .bubbles i:nth-child(2){scale:var(--bubble-scale-2,1)}
.unified-stage .bubbles i:nth-child(3){scale:var(--bubble-scale-3,1)}
.unified-stage .bubbles i:nth-child(4){scale:var(--bubble-scale-4,1)}
.unified-stage .bubbles i:nth-child(5){scale:var(--bubble-scale-5,1)}
/* Review controls are present only at the comparison URL. */
.material-comparison{position:fixed;right:28px;top:118px;z-index:60;width:max-content;max-width:calc(100vw - 32px);font:12px/1.5 var(--jp);color:#e7f2ff}
.material-comparison>summary{margin-left:auto;list-style:none;width:max-content;cursor:pointer;padding:9px 14px;border:1px solid #c3dff65c;border-radius:20px;background:#11263dd9;backdrop-filter:blur(14px);box-shadow:0 4px 20px #0002;letter-spacing:.08em}
.material-comparison>summary::-webkit-details-marker{display:none}
.material-comparison>summary:after{content:'＋';margin-left:9px;opacity:.75}
.material-comparison[open]>summary:after{content:'−'}
.material-comparison-body{width:260px;margin-top:8px;padding:18px;border:1px solid #c3dff63d;border-radius:12px;background:#0b1d32ed;backdrop-filter:blur(20px);box-shadow:0 12px 34px #0005}
.material-comparison fieldset{padding:0;margin:0 0 17px;border:0}
.material-comparison legend{padding:0;margin-bottom:8px;font-size:11px;letter-spacing:.1em;color:#b6cce1}
.material-comparison fieldset>div{display:flex;gap:5px}
.material-comparison button{flex:1;min-height:36px;padding:6px 7px;color:#b8cee3;font:inherit;white-space:nowrap;border:1px solid #bdd8ee26;border-radius:5px;background:#a8d1f008;cursor:pointer}
.material-comparison button[aria-pressed=true]{color:#fff;background:#a8d1f025;border-color:#cbe8ff9c;box-shadow:inset 0 0 12px #ceeaff0a}
.material-comparison button:hover{background:#a8d1f02b}
.material-comparison :is(button,summary):focus-visible{outline:2px solid #d9efff;outline-offset:3px}
.material-comparison p{font-size:10px;color:#a7bdd2;margin:0;line-height:1.8}
@media(max-width:700px){.material-comparison{right:16px;top:86px}.material-comparison>summary{font-size:11px;padding:7px 12px}.material-comparison-body{width:248px;padding:16px}}

/* Readable silver type, without changing the reveal/hover animation layers. */
@media(min-width:701px) and (min-height:551px){
 .unified-stage .spatial-nav a{min-width:206px}
 .unified-stage .spatial-nav a>span{font-size:clamp(22px,1.74vw,28px);text-shadow:0 1px 1px #020813,0 0 3px #020813f2,0 2px 7px #020813c7,0 0 13px #02081366}
 .unified-stage .spatial-nav a>small{font-size:13px;color:#d5dfec;text-shadow:0 1px 1px #020813,0 0 3px #020813eb,0 2px 6px #020813b3}
 .unified-stage .spatial-nav a:hover>span,.unified-stage .spatial-nav a:focus-visible>span{transform:scaleX(1.1)}
}
/* Portrait tablet pairs follow the artwork's measured frame in app.js. */
@media(min-width:701px) and (max-width:1366px) and (orientation:portrait){
 .unified-stage .spatial-nav a{right:auto;width:max-content;min-width:0;padding-inline:12px}
 .unified-stage .scene-words{top:calc(112px - var(--hero-content-drop));right:3.7%;transform:none;gap:18px;font-size:min(10px,calc(1.1svh - 4.5px));text-shadow:0 1px 2px #020813cc,0 0 6px #02081380}
 .unified-stage .scene-words>span:first-child{font-size:min(9px,calc(.99svh - 4.05px));letter-spacing:.18em}
}
/* Let prose reflow at each viewport width without leaving tiny final lines. */
.full-bio,.archived-body,.reading p,.profile-copy>p,.release-detail p,.home-preview-body p,.contact-intro p,.archive-context{
 line-break:strict;word-break:normal;overflow-wrap:break-word;text-wrap:pretty;
}
.release-detail h2,.release h3,.video-card h3{word-break:normal;overflow-wrap:break-word;text-wrap:balance}
.release-detail p,.archive-context,.home-preview-body p{ text-wrap:balance }
.text-unit{white-space:nowrap}
.article-links .text-link>span:not([aria-hidden]){min-width:0;overflow-wrap:anywhere}
.text-link>span[aria-hidden],.listen-link>span[aria-hidden]{flex-shrink:0}

/* Extend the background into Safari's safe area; leave the stable 3D stage alone. */
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 .ocean-world{bottom:auto;height:100lvh;min-height:100%}
 .ocean-world:after{display:none}
 body .header{padding-top:calc(6px + env(safe-area-inset-top,0px))!important;padding-left:max(16px,env(safe-area-inset-left,0px))!important;padding-right:max(16px,env(safe-area-inset-right,0px))!important}
 .menu-dialog .close-menu{top:calc(16px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px))}
}


/* mobile-viewport.css */
/* The page paints behind browser chrome; only interactive controls avoid it.
   Keep this after home-timeline.css so the body never owns a bottom spacer.
   Do not resize the 3D scene with the address bar: its 100svh composition stays stable. */
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 /* Let Safari own the document scroller; a forced root scroll box is only
    needed for desktop's reserved scrollbar gutter. */
 html{min-height:100%;margin:0;padding:0;scrollbar-gutter:auto;overflow:visible}
 html:root{--lezel-browser-edge:#030e1c}
 body{position:relative;display:flow-root;min-height:100vh;min-height:100dvh;margin:0;padding:0}

 /* A full-screen fixed hero can make Safari fill its expanded bottom toolbar
    with a solid edge colour. At scroll origin, let the document paint it.
    Keep the same 100svh composition and only pin it during the 3D retreat. */
 body .unified-stage{position:absolute;bottom:auto}
 body .unified-stage.scene-scrolled{position:fixed}

 /* A document-sized painted layer, not a fixed rectangle at the toolbar edge.
    This also fills under the toolbar when the foreground scene has receded. */
 body .ocean-world{position:absolute;inset:0;width:auto;height:auto;min-height:100vh;min-height:100dvh;background:#030e1c;overflow:hidden}
 body .ocean-world:before{content:'';position:absolute;inset:0 0 auto;height:100vh;height:100lvh;background:var(--lezel-depth);pointer-events:none}
 /* Inner pages keep the same fixed curtain scene as desktop. Overscan only
    the backdrop; home retains its document-painted Safari toolbar fix. */
 body.inner-page .ocean-world{position:fixed;inset:0 0 auto;height:100vh;height:100lvh;min-height:0;background:linear-gradient(#030813aa,#030813f2),var(--lezel-environment) center/cover no-repeat}
 body.inner-page .ocean-world:before{display:none}
 body .ocean-world:after{display:none}
 /* Keep ambient light local to the screen instead of stretching it across a long page. */
 /* Its local origin is 30vh above the viewport. Retain the ambient light,
    but let it reach zero before Safari exposes the root below the toolbar. */
 body .ocean-world .deep-glow{inset:-30vh -30% auto;height:160vh;height:160lvh;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(65lvh + 30vh),transparent calc(100svh + 30vh - 1px));
  mask-image:linear-gradient(to bottom,#000 calc(65lvh + 30vh),transparent calc(100svh + 30vh - 1px))
 }

 :root{--mobile-control-inset:max(12px,env(safe-area-inset-bottom,0px))}
}
@media(max-width:700px){
 /* Account for the scene's existing downward translation exactly once. */
 .unified-stage .hero-socials{bottom:calc(var(--hero-content-drop,0px) + var(--mobile-control-inset))!important}
 .unified-stage .spatial-nav{bottom:calc(44px + var(--hero-content-drop,0px) + var(--mobile-control-inset))!important}
 .social-dock{bottom:var(--mobile-control-inset)!important;background:transparent}
 /* This is transparent reading clearance for the floating icons, not a fixed band. */
 .footer{padding-bottom:calc(68px + var(--mobile-control-inset))}
 html{scroll-padding-bottom:calc(68px + var(--mobile-control-inset))}
}
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 /* Keep the same document endpoint as the visible viewport grows. The
    transparent allowance is after footer content; its layout never shifts. */
 body.inner-page{--page-toolbar-travel:calc(max(0px,100lvh - 100svh) + max(0px,100dvh - 100svh))}
 body.inner-page .footer{padding-bottom:calc(68px + var(--mobile-control-inset) + var(--page-toolbar-travel));overflow-anchor:none}
 /* A fixed decoration must not leave a second, overscanned scrolling surface
    beyond the current viewport. Its image framing remains the shared svh frame. */
 html body.inner-page .ocean-world{inset:0;height:auto;overflow:clip}
 /* Blend the last painted pixels into the same colour Safari samples outside
    the document, without an extra overlay, border, or visible bottom strip. */
 html body.inner-page .ocean-world{background-image:linear-gradient(to bottom,transparent var(--page-waterline,68vh),#030e1c99 calc(var(--page-waterline,68vh) + 10vh),var(--lezel-browser-edge) calc(100svh - 1px)),linear-gradient(#030813aa,#030813f2),var(--lezel-environment)}
 .menu-dialog:before{background-color:var(--lezel-browser-edge);background-image:linear-gradient(to bottom,transparent var(--menu-waterline,65vh),#061323aa calc(var(--menu-waterline,65vh) + 8vh),var(--lezel-browser-edge) calc(100svh - 1px)),linear-gradient(110deg,#071425cc,#12243ab3 50%,#071425cc),var(--lezel-environment)}
}


/* music-window.css */
/* One local detail surface, with the catalogue left in place underneath. */
.release a.music-pointer-return:focus,.featured a.music-pointer-return:focus{outline:none}
@media(max-width:700px), (orientation:landscape) and (max-height:550px) and (max-width:1100px) and (pointer:coarse){
 .inner-shell .catalogue{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}
}
.music-window{
 width:min(1080px,calc(100% - 48px));max-width:none;
 max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
 inset:0;margin:auto;padding:0;color:#e6edf7;
 border:1px solid #c4d6e966;border-radius:4px;
 background:linear-gradient(125deg,#203148ed,#08121ff5);
 -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
 box-shadow:0 24px 90px #0008;
 overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
 scrollbar-color:#a7bfd966 transparent;
 opacity:0;transform:translateY(12px) scale(.985);
 transition:opacity .28s ease,transform .42s cubic-bezier(.2,.7,.2,1);
}
.music-window.is-open{opacity:1;transform:none}
.music-window::backdrop{background:#020a147d;opacity:0;transition:opacity .28s ease}
.music-window.is-open::backdrop{opacity:1}
.music-window-bar{
 position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;
 min-height:58px;padding:6px 20px 6px 30px;border-bottom:1px solid #b5c9e130;
 background:#111f30f2;font:12px var(--serif);letter-spacing:.18em;
}
.music-window-close{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border:0;background:transparent;color:#dce9f6;transition:color .25s,background .25s;border-radius:2px}
.music-window-close svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:.9}
.music-window-close:hover{color:#fff;background:#d3e6f310}
.music-window :focus-visible{outline:1px solid #d7e9f6;outline-offset:4px}
.music-window-content{padding:clamp(24px,3vw,40px)}
.music-window .release-detail{max-width:none;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,40px);align-items:start}
.music-window .release-detail>img{width:100%;max-width:none;height:auto;aspect-ratio:1;object-fit:contain;box-shadow:0 12px 36px #0004}
.music-window .release-detail>div{min-width:0}
.music-window .release-detail time{font:14px var(--serif);letter-spacing:.08em}
.music-window .release-detail h2{font-size:clamp(21px,2.7vw,30px);line-height:1.65;margin:14px 0 20px;overflow-wrap:anywhere}
.music-window .release-detail p{font-size:16px;line-height:2}
.music-window .actions{gap:12px;margin-top:26px}
.music-window .listen-link,.music-window .text-link{font-size:14px;min-height:44px;padding:12px 16px}
.music-window [aria-hidden=true]:not(svg):not(.cursor-atmosphere):not(.frame-cursor-light){display:none}
@media(max-width:600px){
 .music-window{width:calc(100% - 28px);max-height:calc(100dvh - 28px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .music-window-bar{padding-left:22px;padding-right:10px;min-height:54px}
 .music-window-content{padding:22px 18px 28px}
 .music-window .release-detail{grid-template-columns:minmax(0,1fr);gap:24px}
 .music-window .release-detail>img{max-width:360px;justify-self:center}
 .music-window .release-detail h2{font-size:22px;margin-bottom:16px}
 .music-window .actions{margin-top:22px}
}
.motion-off .music-window,.motion-off .music-window::backdrop{transition:none;transform:none}
.portrait-window .music-window-content{padding:24px}
.portrait-window picture{display:block}
.portrait-window img{display:block;width:100%;max-width:900px;height:auto;margin:auto}
.portrait-window-title{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}


/* site-links.css */
/* Shared service links and home page introductions. */
.home-preview-body{display:flex;align-items:center;justify-content:space-between;gap:36px}
.home-preview-body p{max-width:42em;color:#bac9db;font-size:16px;line-height:2.2;margin:0}
.home-preview-body .text-link{flex-shrink:0}
.music-services{display:flex;flex-wrap:wrap;gap:12px 18px;margin:-12px 0 36px}
.music-services .social-link{min-height:48px;padding:11px 18px;border:1px solid #c5e1ff45;background:#d3e6f308;gap:10px}
.music-services .social-link span{font-size:15px;color:#edf3fc;white-space:nowrap}
@media(max-width:700px){
 .home-preview-body{align-items:flex-start;flex-direction:column;gap:22px}
 .home-preview-body p{font-size:15px}
 .music-services{gap:10px;margin:0 0 30px}
 .music-services .social-link{padding:10px 12px}
 .music-services .social-link span{font-size:14px}
 .hero .hero-socials{width:calc(100% - 48px);gap:clamp(0px,1vw,6px)}
 .hero .hero-socials .social-link{flex:0 1 44px;min-width:40px}
 .social-dock{right:12px;gap:clamp(4px,1.5vw,9px)}
}


/* media-layout.css */
/* Text keeps a comfortable inset; artwork shares one edge/gap rhythm. */
.depth,.inner-shell{--panel-padding:60px;--media-gap:24px;--media-outset:calc(var(--panel-padding) - var(--media-gap))}
.depth>.section{width:calc(100% - 112px);max-width:1160px;padding-inline:var(--panel-padding)}
.depth>#contact{scroll-margin-top:120px}
.music-section .home-releases,
.music-section .home-videos .video-grid,.inner-shell .catalogue,.inner-shell .music-videos .video-grid{
 width:calc(100% + 2 * var(--media-outset));max-width:none;margin-inline:calc(-1 * var(--media-outset));column-gap:var(--media-gap)
}
.music-section .home-videos,.inner-shell .music-videos{width:100%;max-width:none}
.music-section .home-releases{grid-auto-columns:calc((100% - 2 * var(--media-gap))/3);gap:var(--media-gap);overflow-y:hidden;overscroll-behavior-y:auto;padding:10px 0 12px}
.music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/3);column-gap:var(--media-gap);padding-inline:0}
.music-section .home-videos{margin-top:24px}
/* MUSIC shares the VIDEOS control rhythm above its existing divider.
   Its last heading row pairs the subtitle with the arrows, without an extra
   controls row between the divider and the artwork. */
.depth>#music>.section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;padding-bottom:26px;margin-bottom:12px}
.depth>#music>.section-heading>.signal-number{grid-column:1/-1;grid-row:1}
.depth>#music>.section-heading>div:not(.release-controls){grid-column:1;grid-row:2}
.depth>#music>.section-heading>.text-link{grid-column:2;grid-row:2;justify-self:end}
.depth>#music>.section-heading>.world-subtitle{grid-column:1;grid-row:3;align-self:center}
.depth>#music>.section-heading>.release-controls{grid-column:2;grid-row:3;justify-self:end;width:auto;max-width:none;margin:0;column-gap:10px}
@media(max-width:700px){.depth>#music>.section-heading>.release-controls{column-gap:6px}}
/* Keep the top breathing room; remove duplicated gaps within the heading. */
@media(min-width:701px){
 .depth>#music{padding-top:48px}
 .depth>#music>.section-heading{row-gap:12px}
 .depth>#music>.section-heading .signal-number{margin-bottom:8px}
 .depth>#music>.section-heading .world-subtitle{margin-top:0}
}
@media(min-width:701px) and (max-height:850px){
 .depth>#music{padding-top:40px}
 .depth>#music>.section-heading{row-gap:8px}
 .depth>#music>.section-heading .signal-number{margin-bottom:2px}
}
.depth .profile-copy{padding-inline:0}
.depth .lezel-contact{width:100%;max-width:none;margin-inline:0}
.video-card h3 .video-title-hyphen{font-family:Arial,sans-serif;font-style:normal}
@media(hover:hover) and (pointer:fine){
 .home-releases .cover,.video-grid .video-start{cursor:grab}
 .media-dragging,.media-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}
 .home-releases img,.video-grid img{-webkit-user-drag:none;user-select:none}
 .media-dragging .cover,.media-dragging .cover img,.media-dragging .video-start img{transform:none!important}
}
.media-pointer-scroll{scroll-snap-type:none!important;scroll-behavior:auto!important}
@media(max-width:1050px){
 .depth,.inner-shell{--panel-padding:40px;--media-gap:20px}
 .depth>.section{width:calc(100% - 70px)}
 .music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/2.3)}
}
@media(max-width:700px){
 .depth,.inner-shell{--panel-padding:22px;--media-gap:12px}
 .depth>.section{width:calc(100% - 28px)}
 .depth>#contact{scroll-margin-top:100px}
 .music-section .home-releases{grid-auto-columns:calc((100% - var(--media-gap))/2)}
 .music-section .home-videos{margin-top:16px}
 .music-videos .video-grid{grid-auto-columns:calc((100% - var(--media-gap))/1.5)}
}
@media(orientation:landscape) and (max-height:550px) and (pointer:coarse){
 .depth,.inner-shell{--media-gap:16px}
 .music-section .home-releases{grid-auto-columns:calc((100% - var(--media-gap))/2)}
 .music-videos .video-grid{grid-auto-columns:calc((100% - 2 * var(--media-gap))/2.2)}
}

/* A single light passes over the existing jacket motion, without dimming the art. */
.release-main .cover{position:relative;isolation:isolate}
.release-main .cover:after{content:'';position:absolute;inset:-40%;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 36%,#dbeeff09 42%,#f1faff5c 49%,#fff9 50%,#dbeeff22 54%,transparent 62%);transform:translateX(-85%);opacity:0}
@media(hover:hover) and (pointer:fine){
 .release-main:hover .cover:after{animation:jacket-glint 1.25s cubic-bezier(.2,.65,.3,1) both}
}
.release-main:focus-visible .cover:after{animation:jacket-glint 1.25s cubic-bezier(.2,.65,.3,1) both}
.media-dragging .release-main .cover:after{animation:none;opacity:0}
@keyframes jacket-glint{0%{transform:translateX(-85%);opacity:0}18%{opacity:.75}80%{opacity:.6}100%{transform:translateX(85%);opacity:0}}
@media(prefers-reduced-motion:reduce){.release-main .cover:after{animation:none!important}}


/* cursor-atmosphere.css */
/* Scenery light stays above water; glass gets a separate, gently lit surface. */
.cursor-atmosphere{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;z-index:0;mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--cursor-waterline,65vh) - 100px),transparent var(--cursor-waterline,65vh));-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(var(--cursor-waterline,65vh) - 100px),transparent var(--cursor-waterline,65vh))}
.cursor-atmosphere>i{position:absolute;left:0;top:0;display:block;width:min(72vw,880px);height:min(75vh,650px);border-radius:50%;background:radial-gradient(ellipse at 48% 48%,#c5e7ff20 0%,#8acaff13 28%,#75afff08 47%,transparent 70%);will-change:transform}
.menu-dialog>.cursor-atmosphere{z-index:-1;transition:opacity .42s ease}
.inner-page .inner-shell{position:relative}
.cursor-atmosphere.cursor-atmosphere-surface{z-index:2;border-radius:inherit;mask-image:none;-webkit-mask-image:none;contain:paint}
.cursor-atmosphere-surface>i{width:min(68vw,760px);height:min(78vh,660px);background:radial-gradient(ellipse at center,#c5e7ff1c 0%,#8acaff10 30%,#75afff05 50%,transparent 72%)}
.music-window>.cursor-atmosphere{bottom:auto;width:100%}
.cursor-atmosphere.cursor-atmosphere-home-background{bottom:auto;mask-image:none;-webkit-mask-image:none;z-index:1}
@media(hover:hover) and (pointer:fine){
 .hero .tulle-foreground{transform:translate3d(var(--cursor-fabric-x,0px),var(--cursor-fabric-y,0px),0);transition:none}
}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.cursor-atmosphere{display:none}}


/* frame-light.css */
/* The approved original-plus-glow finish, shared by Home and inner pages.
   Highlights sit on the existing border; no second outline is added. */
:is(.depth>.section,.inner-page .inner-shell)::before{content:'';position:absolute;top:-1px;left:12%;right:30%;height:1px;background:linear-gradient(90deg,transparent,#e5f4ffb8,transparent);filter:drop-shadow(0 0 3px #c4e5ffa0) drop-shadow(0 0 7px #9fccff50);pointer-events:none}
:is(.depth>.section,.inner-page .inner-shell)::after{content:'';position:absolute;bottom:-1px;left:47%;right:12%;height:1px;background:linear-gradient(90deg,transparent,#dceeff85,transparent);filter:drop-shadow(0 0 3px #c4e5ff70) drop-shadow(0 0 7px #9fccff36);pointer-events:none}
.frame-cursor-light{position:absolute;inset:-1px;z-index:3;pointer-events:none}
.music-window>.frame-cursor-light{inset:0;z-index:4;overflow:hidden}
/* Clip the decorative plane to the scrollport. Its border-sized geometry must
   never enlarge the dialog's horizontal or vertical scrollable content. */
.music-window .frame-light-plane{position:absolute;inset:-1px;pointer-events:none}
/* The scrolling dialog clips child pixels on its outside border. Paint the
   bright core on that existing border itself; the child keeps its soft glow.
   These one-pixel layers do not add another outline or move with the content. */
dialog.music-window{
 background-image:
  linear-gradient(90deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-top,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-top,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-top,0)*.42)) 80%,transparent),
  linear-gradient(90deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-bottom,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-bottom,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-bottom,0)*.42)) 80%,transparent),
  linear-gradient(180deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-left,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-left,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-left,0)*.42)) 80%,transparent),
  linear-gradient(180deg,transparent,rgb(210 234 255 / calc(var(--modal-rim-right,0)*.42)) 20%,rgb(242 250 255 / calc(var(--modal-rim-right,0)*.93)) 50%,rgb(210 234 255 / calc(var(--modal-rim-right,0)*.42)) 80%,transparent),
  linear-gradient(125deg,#203148ed,#08121ff5);
 background-size:var(--modal-rim-horizontal,260px) 1px,var(--modal-rim-horizontal,260px) 1px,1px var(--modal-rim-vertical,260px),1px var(--modal-rim-vertical,260px),auto;
 background-position:calc(var(--modal-rim-x,0px) - var(--modal-rim-horizontal,260px)/2) top,calc(var(--modal-rim-x,0px) - var(--modal-rim-horizontal,260px)/2) bottom,left calc(var(--modal-rim-y,0px) - var(--modal-rim-vertical,260px)/2),right calc(var(--modal-rim-y,0px) - var(--modal-rim-vertical,260px)/2),0 0;
 background-origin:border-box,border-box,border-box,border-box,padding-box;
 background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat;
}
.music-window .frame-light-top{top:-8px}.music-window .frame-light-bottom{bottom:-8px}
.music-window .frame-light-left{left:-8px}.music-window .frame-light-right{right:-8px}
.frame-light-edge{position:absolute;display:block;overflow:hidden;pointer-events:none}
.frame-light-top,.frame-light-bottom{left:0;width:100%;height:17px}
.frame-light-top{top:-8px}.frame-light-bottom{bottom:-8px}
.frame-light-left,.frame-light-right{top:0;height:100%;width:17px}
.frame-light-left{left:-8px}.frame-light-right{right:-8px}
.frame-light-edge>i{position:absolute;display:block;opacity:0;filter:drop-shadow(0 0 3px #c4e5ffa0) drop-shadow(0 0 7px #9fccff55);pointer-events:none}
.frame-light-top>i,.frame-light-bottom>i{left:0;top:8px;height:1px;width:var(--frame-light-length,260px);background:linear-gradient(90deg,transparent,#d2eaff6b 20%,#f2faffed 50%,#d2eaff6b 80%,transparent)}
.frame-light-left>i,.frame-light-right>i{top:0;left:8px;width:1px;height:var(--frame-light-length,260px);background:linear-gradient(180deg,transparent,#d2eaff6b 20%,#f2faffed 50%,#d2eaff6b 80%,transparent)}
@media(hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){
 .frame-cursor-light{display:none}
 dialog.music-window{--modal-rim-top:0!important;--modal-rim-bottom:0!important;--modal-rim-left:0!important;--modal-rim-right:0!important}
}