/* Shared obsidian shell. Saturated channels are reserved for prism-scene.js. */
:root{--canvas:#101010;--surface:#495764;--ink:#fffdf9;--muted:#6f879c;--hairline:#403f3f;--ui-ease:cubic-bezier(0.32,0.72,0,1)}
body{background:var(--canvas);overflow-x:hidden}.prism-scene{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}.site-header,main,.site-footer{position:relative;z-index:1}.site-header{border-color:var(--hairline);background:linear-gradient(90deg,#101010e8,#10101099)}.site-header nav>a,.outline-button,.text-link,.service-row,.footer-bottom{transition:color .22s var(--ui-ease),border-color .22s var(--ui-ease),transform .22s var(--ui-ease)}.outline-button{border-color:var(--ink)}.outline-button:hover,.outline-button:focus-visible{background:var(--ink);color:var(--canvas)}.hero{min-height:calc(100vh - 112px);display:flex;flex-direction:column}.hero-composition{margin-top:clamp(40px,5.5vh,72px);min-height:clamp(260px,44vh,560px)}.hero h1{font-size:clamp(62px,8.2vw,136px);line-height:.96;max-width:11ch}.hero h1>span{display:block}.hero-role{min-height:1.92em;max-width:9.5ch;will-change:opacity,transform,filter;transition:opacity .22s var(--ui-ease),transform .22s var(--ui-ease),filter .22s var(--ui-ease)}.hero-role.is-changing{opacity:0;transform:translateY(10px);filter:blur(5px)}.hero-art{opacity:.72;mix-blend-mode:screen}.webgl-ready .hero-art{opacity:0}.hero-bottom{margin-top:auto;padding-top:56px}.hero-intro,.hero-disciplines{position:relative}.scene-toggle{position:fixed;right:clamp(16px,4vw,56px);bottom:20px;z-index:3;min-height:44px;padding:9px 15px;border:1px solid var(--hairline);border-radius:5px;background:#101010d9;color:var(--ink);font-size:14px;transition:background .22s var(--ui-ease),border-color .22s var(--ui-ease)}.scene-toggle:hover{border-color:var(--ink);background:#101010}.scene-toggle-play{display:none}.scene-toggle[aria-pressed="true"] .scene-toggle-pause{display:none}.scene-toggle[aria-pressed="true"] .scene-toggle-play{display:inline}.page-width{max-width:1440px}.section,.site-footer{position:relative}.section:before,.site-footer:before{content:"";position:absolute;inset:0;background:#101010cc;z-index:-1}.section{padding-block:32px}.service-row:hover h3,.service-row:focus-visible h3{transform:translateX(8px)}.site-header a:focus-visible,.site-header button:focus-visible,.scene-toggle:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media(max-width:640px){.site-header{height:80px;background:#101010f2}.hero{min-height:calc(100svh - 80px)}.hero-composition{margin-top:50px;min-height:250px}.hero h1{font-size:clamp(54px,14vw,76px);max-width:10ch}.hero-art{right:-32%;top:10%;width:105%;height:320px}.hero-bottom{padding-top:32px}.hero-disciplines{gap:18px}.hero-disciplines li{min-width:0}.scene-toggle{right:16px;bottom:16px}.site-header nav{background:var(--canvas)}}
@media(prefers-reduced-motion:reduce){.hero-role{filter:none!important;transform:none!important;transition:none!important}.prism-scene{opacity:.9}}
.prism-scene{z-index:1}.site-header,main,.site-footer{z-index:10!important}.scene-toggle{z-index:11}
.site-header .conteiner{min-height:112px;display:flex;align-items:center;justify-content:space-between;gap:32px}.site-header .menu{display:contents}.site-header .menu ul{display:flex;align-items:center;gap:28px;margin:0;padding:0;list-style:none}.site-header .head_name{margin:0;color:var(--muted);font-size:14px}.site-header .mail{color:var(--ink)}.site-footer{border-top:1px solid var(--hairline);padding:40px 0;background:#101010}.site-footer .conteiner{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:56px}.site-footer a{color:var(--ink)}.site-footer .foot_item h4,.site-footer .foot_rass h4{font-weight:400}.site-footer ul{padding:0;list-style:none}.site-footer li,.site-footer .foot_rass a{display:block;margin-top:10px}.site-footer .foot_right{color:var(--muted)}
.hero{background:transparent}
@media(max-width:640px){.hero h1{font-size:clamp(40px,10.7vw,54px);max-width:100%}.hero-role{max-width:100%}}
.hero-bottom{align-items:flex-start;padding-bottom:56px}.hero-intro{width:min(100%,440px)}.hero-intro p{font-size:22px;line-height:1.4}.hero-intro .text-link{margin-top:20px}.hero-bottom .hero-disciplines{margin-left:auto}
@media(min-width:901px){.hero-composition{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:clamp(56px,7vw,112px);align-items:start}.hero-composition h1{grid-column:1;grid-row:1;max-width:100%}.hero-composition .hero-intro{grid-column:2;grid-row:1;align-self:start;justify-self:end;margin:clamp(340px,47vh,430px) 0 0;position:relative;z-index:2;transform:translateX(-192px)}}
@media(min-width:1340px){.hero-composition{grid-template-columns:minmax(0,1fr) 440px}.hero-composition h1{grid-column:1/-1;font-size:88px;line-height:1.01;letter-spacing:-1.76px;max-width:1328px}.hero-composition h1>span{white-space:nowrap}.hero-composition .hero-role{min-height:1.01em;max-width:none}.hero-composition .hero-intro{width:440px;margin-top:clamp(286px,33.4vh,302px);transform:translateX(-72px)}}
@media(max-width:900px){.hero-composition{display:flex;flex-direction:column;min-height:0}.hero-composition .hero-art{position:relative;inset:auto;order:2;width:min(62%,520px);height:auto;aspect-ratio:1;margin:-72px 0 -44px auto}.hero-composition .hero-intro{order:3;margin:0}.hero-intro p{font-size:18px;line-height:1.45}}
@media(max-width:640px){.hero-bottom{padding-top:24px;padding-bottom:calc(44px + 16px + 32px + env(safe-area-inset-bottom))}.hero-composition .hero-art{width:calc(100% + 24px);aspect-ratio:1.2;margin:0 -12px 20px}.hero-intro{width:100%}.hero-intro .text-link{width:min(100%,196px);min-width:0;gap:20px}}
@media(max-width:640px){.site-header{z-index:12!important}.site-header nav{top:100%}}
/* R34 — commit to emptiness: the first desktop screen keeps only the headline, the glass and one narrow lead; the topline captions and the three discipline cues move to a quiet strip below the fold, and the Pause control loses its box. Mobile is untouched. */
@media(min-width:901px){.hero-topline{display:none}.hero{min-height:0}.hero-composition{min-height:calc(100vh - 140px)}.hero-bottom{margin-top:0;padding:48px 0 64px;border-top:1px solid var(--hairline)}.hero-bottom .hero-disciplines{margin-left:0}.hero-composition .hero-intro{margin-top:clamp(400px,46vh,420px)}.scene-toggle{border-color:transparent;background:transparent;color:var(--muted);padding:9px 0}.scene-toggle:hover,.scene-toggle:focus-visible{border-color:transparent;background:transparent;color:var(--ink)}}
/* R35 — one scene, not two columns: the glass cluster now crosses the ends of the display lines (shader centre moved left), the lead aligns with the glass's left edge, the hanging indent is gone, and the quiet Pause label and hidden topline apply at every width so mobile follows the same hierarchy. */
.hero-topline{display:none}.scene-toggle{border-color:transparent;background:transparent;color:var(--muted);padding:9px 0}.scene-toggle:hover,.scene-toggle:focus-visible{border-color:transparent;background:transparent;color:var(--ink)}
@media(min-width:901px){.hero-line-end{padding-left:0}}
@media(min-width:1340px){.hero-composition .hero-intro{transform:translateX(-244px)}}
@media(max-width:640px){.hero-bottom{padding-bottom:calc(44px + 16px + 34px + env(safe-area-inset-bottom))}}
/* R36 — the glass belongs to the hero, not the viewport: the canvas is document-anchored (100vh at the top) so scrolling never slides the cluster under the lead/CTA; the cluster is threaded behind the ends of the display lines in the shader. */
.prism-scene{position:absolute;inset:0 0 auto 0;height:100vh}