/* Space branch, homepage only. Everything here applies to both levels of the one design: the world (html.space-on, the
   WebGL canvas) and the airy page (html.airy, stills of the same world; css/airy.css adds its layer). The head gate
   (js/3d/space-gate.js) sets one of them; ?space=off and narrow screens get the airy page. */

/* The world canvas takes page-field's place: fixed, full viewport, behind the page. */
.space-world,.space-fade{position:fixed;inset:0;width:100%;height:100lvh;z-index:-1;display:block;pointer-events:none}
.space-world{opacity:0;transition:opacity .9s cubic-bezier(.16,1,.3,1)}
.space-world.is-ready{opacity:1}
.space-fade{opacity:0}

/* The hero is part of the world: no inverted card, the copy follows the page palette. */
html:is(.space-on,.airy),html:is(.space-on,.airy)[data-theme]{--hero-ink:var(--ink);--hero-muted:var(--muted)}
html:is(.space-on,.airy) .hero-frame,html:is(.space-on,.airy) body[data-intro] .hero-frame{background:transparent!important}
/* Story v3: the hero is in orbit, dark in both themes (space-orbit.js), so its copy is light in both. */
html:is(.space-on,.airy) .hero-frame,html:is(.space-on,.airy)[data-theme] .hero-frame{--hero-ink:#f4f7fd;--hero-muted:rgba(225,228,234,.8)}

/* Stop 1, cardless: the hero is one viewport of the world. The title sits bottom left over at most seven columns with
   the lede under it; "Dmytro Dintsen / Senior product designer" keeps the top left; the portrait owns the right. */
html:is(.space-on,.airy) body .hero-frame{margin:0!important;border-radius:0!important;height:100svh!important;min-height:620px!important;max-height:none!important}
html:is(.space-on,.airy) body .hero-frame .hero-copy{top:auto!important;bottom:clamp(44px,8svh,92px)!important;left:var(--gutter,58px)!important;right:auto!important;transform:none!important;
 width:calc((100vw - 2*var(--gutter,58px))*7/12)!important;max-width:none!important;text-align:left!important}
html:is(.space-on,.airy) body .hero-frame .hero-copy h1{font-size:clamp(52px,6.7vw,112px)!important;line-height:1!important;letter-spacing:-.06em!important;max-width:none!important}
html:is(.space-on,.airy) .hero-frame .hero-phrases{justify-items:start}
html:is(.space-on,.airy) .hero-frame .hero-note{margin:clamp(18px,2.6svh,28px) 0 0!important;text-align:left!important;max-width:24em!important}
/* No scroll prompt (the owner's rule): the "scroll to work" ring and the orb seat go. */
html:is(.space-on,.airy) .hero-frame .hero-explore,html:is(.space-on,.airy) .hero-frame .hero-lens{display:none!important}

/* Eyebrows stand down; the section headings carry the meaning ("Year by year." stays as the chapter's big title). */
html:is(.space-on,.airy) .years-kicker,html:is(.space-on,.airy) .process-stage-top>span{visibility:hidden!important}

/* Grain lives in the world (the 3D post), fine and clean; the page overlay is off so the copy stays sharp. */
html:is(.space-on,.airy).has-field body::after{opacity:0!important}

/* The four homepage scenes are drawn by the world: their own canvases are never created and their posters stand down. */
html:is(.space-on,.airy) [data-scene]:not([data-service-preview])>.scene-fallback,
html:is(.space-on,.airy) [data-scene]:not([data-service-preview]):not(.os-live)>canvas{display:none!important}   /* the OS's wallpaper is its own live print (21 Oct: hidden here, the OS showed a smooth photo) */

/* The nav over the hero follows the page palette too (it used to answer an inverted card). */
html:is(.space-on,.airy)[data-theme=dark] body:has(.hero-frame) .site-header:not(.is-scrolled) .brand img{filter:brightness(0) invert(1)}
html:is(.space-on,.airy):not([data-theme=dark]) body:has(.hero-frame) .site-header:not(.is-scrolled) .brand img{filter:none}
html:is(.space-on,.airy):not([data-theme=dark]) body:has(.hero-frame) .site-header:not(.is-scrolled) .glass-nav{--nav-ink:#1c1f25;color:var(--nav-ink)}

@media (prefers-reduced-motion:reduce){.space-world{transition:none}}

/* The display face, 'Archivo Lens': Instrument Serif since 21 Oct 2026, declared in css/type-2026.css (its @font-face
   for fonts/archivo-vf.woff2 stood here: Archivo, a variable grotesk whose axes js/space-type.js moved under the cursor;
   both are at rest). Basel stays for every other text. */
html:is(.space-on,.airy) :is(#hero-title,#work-title,#approach-title,#principles-title,#services-title,#pass-title,.process-panel h3,#footer .footer-top h2){font-family:'Archivo Lens',Basel,Arial,sans-serif;font-variation-settings:normal;font-kerning:normal}
html.type-lens .tl-word{white-space:nowrap}
html.type-lens .tl-char{display:inline-block}
html.type-lens :is(#hero-title .phrase-line,.process-panel h3>span,#footer .footer-top h2){white-space:nowrap}

/* The design thinking room is ultramarine in both themes (the site's own process stage colour): its copy is light. */
html:is(.space-on,.airy) #design-bottom .process-sticky,html:is(.space-on,.airy) #design-bottom .process-sticky :is(h3,p){color:#f4f7fd!important}
html:is(.space-on,.airy) #design-bottom .process-sticky p{color:rgba(244,247,253,.86)!important}

/* The pass is read while the camera rises through the water: glass, not an opaque card, so the ascent is seen. */
html:is(.space-on,.airy) .pass-feature{background:color-mix(in srgb,#12151b 30%,transparent)!important;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
/* the pass is the ascent's runway: the world rises to the light behind and after it (art direction, 15 Oct) */
html:is(.space-on,.airy) .pass-feature{margin-bottom:50svh}
html:is(.space-on,.airy) .pass-feature:before{opacity:.5}
/* Principles: the industry panels are deep glass over the room in both themes (white copy, one ink), not opaque cards. */
html:is(.space-on,.airy) .design-principles .industry-panel,html:is(.space-on,.airy) .design-principles .industry-panel:nth-child(n){background:color-mix(in srgb,#12151b 26%,transparent)!important;-webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
html:is(.space-on,.airy)[data-theme=dark] .design-principles .industry-panel,html:is(.space-on,.airy)[data-theme=dark] .design-principles .industry-panel:nth-child(n){background:color-mix(in srgb,#12151b 30%,transparent)!important}
/* the dive gets the principles heading alone over the waterline (Convex Seascape Survey's one title over the split):
   air before the heading and between it and the panels */
html:is(.space-on,.airy) #principles{padding-top:40svh}
/* the plunge through the deck gets its own air (21 Oct; review-frames.md fix 10 and motion-feel.md §4): «And the rest.»
   leaves before «Good design starts with understanding.» comes in, never two chapter titles in one screen; the camera's
   plunge window (js/3d/space-camera.js SEGMENTS) grows with it */
html:is(.space-on,.airy) #design-bottom{padding-top:45svh}
html:is(.space-on,.airy) #principles .industry-stack{margin-top:70svh}

/* Selected work: the pinned ring stage (js/3d/space-works.js) between the heading and the grid. */
html:is(.space-on,.airy) .work-orbit{position:relative;height:calc(var(--wo-count,8)*80svh + 100svh)}   /* each project gets its push and its turn (about 490 and 230 px at 900) */
html:is(.space-on,.airy) .work-orbit-sticky{position:sticky;top:0;height:100svh}
/* (22 Oct, review R01: «Selected work.» left the frame before the ring condensed, so the heading and its work never
   shared a frame) the heading holds 12svh under the frame's top, where the lens's «Complex products.» hangs, until the
   stage takes the camera (s 1, the stage's top at the window's top): the ring condenses under it and it leaves as the
   camera turns in to the first station. Its box reaches over the stage's first screen (::after: the gap, the hold and
   its own two lines) and the negative margin gives the stage its place back, so no ScrollTrigger or camera segment
   moves; the stage paints over it */
html.space-on body[data-page=home] #projects>.section-heading{--wo-gap:44px;display:block;margin-bottom:calc(-12svh - 2*var(--t-l,96px)*var(--t-lh-l,1))!important}
html.space-on body[data-page=home] #projects>.section-heading::after{content:"";display:block;height:calc(var(--wo-gap) + 12svh + 2*var(--t-l,96px)*var(--t-lh-l,1))}
html.space-on body[data-page=home] #projects>.section-heading>h2{position:sticky;top:12svh}
@media (max-width:640px){html.space-on body[data-page=home] #projects>.section-heading{--wo-gap:27px}}
html:is(.space-on,.airy) .work-orbit-info{position:absolute;left:0;bottom:clamp(40px,8svh,88px);max-width:min(40em,46vw);transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s}   /* the sticky already sits inside the section's gutter */
/* the caption and the steps belong to the ring: away while it does not hold the camera (the overview from above, the
   grid after it), so they never print over a device or meet the filters */
html:is(.space-on,.airy) .work-orbit-sticky.is-away .work-orbit-info{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
html:is(.space-on,.airy) .wo-title{font-family:'Archivo Lens',Basel,Arial,sans-serif;font-variation-settings:normal;font-size:clamp(56px,7vw,124px);line-height:1;letter-spacing:var(--t-track,-.02em);text-wrap:balance}
html:is(.space-on,.airy) .wo-line{margin-top:16px;color:var(--muted);font-size:17px;line-height:1.45}
/* the round button rides with the devices (placed each frame by the world). Same material as the nav's "Let's talk"
   (portfolio-v41.css): the pearl gradient, the blur, the sheen that sweeps across on hover, dark ink. */
html:is(.space-on,.airy) .wo-open,html:is(.space-on,.airy) .wo-step{border-radius:50%;display:grid;place-items:center;overflow:hidden;isolation:isolate;border:0;padding:0;cursor:pointer;
 background:linear-gradient(125deg,#ffffffed,#f1f1f1bd 55%,#fafafade);color:#15181e;-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2)}
html:is(.space-on,.airy) .wo-open{position:absolute;left:0;top:0;width:92px;height:92px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s linear .25s}
html:is(.space-on,.airy) .wo-open::before,html:is(.space-on,.airy) .wo-step::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:linear-gradient(130deg,transparent 26%,#ffffffb8 45%,transparent 65%);transform:translateX(-110%);transition:transform 650ms cubic-bezier(.16,1,.3,1)}
html:is(.space-on,.airy) .wo-open.is-shown{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .25s cubic-bezier(.16,1,.3,1),visibility 0s}
html:is(.space-on,.airy) .wo-open svg,html:is(.space-on,.airy) .wo-step svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;transition:transform .25s cubic-bezier(.16,1,.3,1)}
/* two round steps under the caption: the previous and the next project (Adobe Taking Shape's round controls) */
html:is(.space-on,.airy) .wo-steps{display:flex;gap:12px;margin-top:28px}
/* the year cards stand bare in the world (17 Oct): no plate behind the cover, no hairline outline, no lit sheen;
   the title, the product's screen and its tag stand on the clouds like the ring's screens */
html:is(.space-on,.airy) body .year-card{background:none!important;outline:0}
html:is(.space-on,.airy) body .year-card::before{display:none}
/* without the plate the card's own title sat on the year's numerals; the year's names below already say it */
html:is(.space-on,.airy) body .year-card .year-card-brand{display:none}
html:is(.space-on,.airy) .wo-step{position:relative;width:56px;height:56px;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
html:is(.space-on,.airy) .wo-step svg{width:22px;height:22px}
html:is(.space-on,.airy) .wo-step[aria-disabled=true]{opacity:.32;cursor:default}
/* by day the pearl needs an edge against the pale rooms */
/* no frames, no shadows (the owner, 17 Oct: "мы так не делаем стиль без рамок"). By day the deck is white, so a white
   button without a rim vanishes into it: the ring's buttons take the light rooms' ink, a solid deep navy with a white
   icon (the site's own button rule, css/space-ui.css); at night they stay white glass */
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step{box-shadow:none;background:#15181e;color:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open::before,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step::before{background:linear-gradient(130deg,transparent 26%,#ffffff40 45%,transparent 65%)}
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open:focus-visible,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step:focus-visible{outline-color:#15181e}
@media (hover:hover) and (pointer:fine){html:is(.space-on,.airy) .wo-open:hover::before,html:is(.space-on,.airy) .wo-step:not([aria-disabled=true]):hover::before{transform:translateX(110%)}html:is(.space-on,.airy) .wo-open:hover svg{transform:translate(2px,-2px)}
 html:is(.space-on,.airy) .wo-step[data-step="1"]:not([aria-disabled=true]):hover svg{transform:translateX(2px)}html:is(.space-on,.airy) .wo-step[data-step="-1"]:not([aria-disabled=true]):hover svg{transform:translateX(-2px)}}
html:is(.space-on,.airy) .wo-open:focus-visible,html:is(.space-on,.airy) .wo-step:focus-visible{outline:2px solid #fff;outline-offset:4px}
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open:focus-visible,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step:focus-visible{outline-color:#15181e}
@media (prefers-reduced-motion:reduce){html:is(.space-on,.airy) .wo-open::before,html:is(.space-on,.airy) .wo-step::before{transition:none;transform:none;background:none}}
/* (22 Oct, jury F15) the ring's buttons in the print's two inks: a flat ink disc by day, a flat paper disc by night. The
   silver glass (gradient, blur, a sheen on hover) and the day's navy were the old colour world's */
html:is(.space-on,.airy) .wo-open,html:is(.space-on,.airy) .wo-step{background:#ffffff;color:#000000;-webkit-backdrop-filter:none;backdrop-filter:none}
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step{background:#000000;color:#ffffff}
html:is(.space-on,.airy) .wo-open::before,html:is(.space-on,.airy) .wo-step::before{content:none}
html:is(.space-on,.airy):not([data-theme=dark]) .wo-open:focus-visible,html:is(.space-on,.airy):not([data-theme=dark]) .wo-step:focus-visible{outline-color:#000000}
html:is(.space-on,.airy) .work-orbit-caption.is-in>*{animation:wo-in .7s cubic-bezier(.16,1,.3,1) both}
html:is(.space-on,.airy) .work-orbit-caption.is-in>:nth-child(2){animation-delay:.06s}
html:is(.space-on,.airy) .work-orbit-caption.is-in>:nth-child(3){animation-delay:.12s}
@keyframes wo-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* the dive into a project (js/3d/space-works.js): the caption's line and the steps step aside; the title stays for its
   flight into the case heading */
html:is(.space-on,.airy) .work-orbit-sticky.is-diving .work-orbit-caption>.wo-line{animation:none;opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
html:is(.space-on,.airy) .work-orbit-sticky.is-diving .wo-steps{opacity:0;pointer-events:none;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
/* a far project opened: the caption (another project's) steps aside whole */
html:is(.space-on,.airy) .work-orbit-sticky.is-diving-elsewhere .work-orbit-caption>*{animation:none;opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
/* leaving through a phone: the world dissolves into the page colour around the portal (the case page opens on it) */
html.space-leaving .space-world{opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){html:is(.space-on,.airy) .work-orbit-caption.is-in>*{animation:none}}

/* Art direction, 15 Oct.
   The top-left label keeps only the name: the role is the headline's. */
html:is(.space-on,.airy) .hero-person p span{display:none}
/* About: the torso keeps the left half of the frame; the bio, its tabs and its logos take the right half, in two columns */
html:is(.space-on,.airy) #about :is(.bio-tabs,.bio-panels){margin-left:45%}
html:is(.space-on,.airy) #about .bio-panels{width:auto;max-width:none}
html:is(.space-on,.airy) #about .auto-tab-01-logo{grid-template-columns:1fr 1fr}
/* Light theme legibility. The design room is ultramarine in both themes: its copy takes light ink. */
html:is(.space-on,.airy):not([data-theme=dark]) #design-bottom .approach-intro h2{color:#f3f6fc}
html:is(.space-on,.airy):not([data-theme=dark]) #design-bottom .approach-intro p{color:rgba(243,246,252,.82)}
html:is(.space-on,.airy):not([data-theme=dark]) #about .about-intro>p[data-scroll-fill]{--ink:#ffffff;--muted:rgba(255,255,255,.48)}   /* white over the dimmed azure (16 Oct, one ink per section) */

/* Legibility over the world's frames (measured on the stills, 16 Oct; the same frames stand behind the live world).
   Dark theme: the sea sections are mid blue, so the muted copy there takes a brighter ink; the ring's caption sits over
   mid-bright cloud tops, so the stage carries a soft shade in its lower left corner, under the copy only (never over
   the screens). */
html:is(.space-on,.airy)[data-theme=dark] :is(#principles,#services,#about,.pass-feature){--muted:#e0e3e9}
html:is(.space-on,.airy)[data-theme=dark] .pass-feature :is(p,.text-button){color:#e7eaf0}
html:is(.space-on,.airy)[data-theme=dark] #years .years-lede{color:#d7dae0}
html:is(.space-on,.airy) .work-orbit-info,html:is(.space-on,.airy) .wo-open{z-index:1}
/* Light theme: the day sea is mid azure, so the muted copy over it takes near-ink; the pass glass goes deeper so its
   light copy holds over the bright water; the ring's line and the years' lede over the pale cloud tops take ink. */
/* One ink per section (the owner, 16 Oct): under the water and at the station the light theme reads white over a
   frame the veil (.space-dim) has dimmed a little; over the cloud tops it keeps ink. Never white and ink in one section. */
html:is(.space-on,.airy):not([data-theme=dark]) :is(#design-bottom,#principles,#services,#about){--ink:#ffffff;--muted:#e2e5eb;--hero-ink:#ffffff;color:#fff}
html:is(.space-on,.airy):not([data-theme=dark]) :is(#design-bottom,#principles,#services,#about) :is(h2,h3,p,li,.experience-caption,.experience-ten,.experience-digit,.about-support,.experience-footnote,.industry-panel,.service-panel){color:#fff}
html:is(.space-on,.airy):not([data-theme=dark]) #about .bio-tabs button{color:#fff}
html:is(.space-on,.airy):not([data-theme=dark]) #about .bio-tabs button[aria-pressed=true]{color:#12151b}
html:is(.space-on,.airy):not([data-theme=dark]) :is(.wo-line,#years .years-lede){color:#25282e}
html:is(.space-on,.airy):not([data-theme=dark]) .pass-feature{background:color-mix(in srgb,#12151b 64%,transparent)!important}

/* The journey index (js/space-index.js): a hairline of stops at the right edge, the current one lit, the name beside it
   on hover or focus. Both levels; hidden on narrow screens (the phone scrolls). */
.space-index{position:fixed;right:clamp(18px,2.2vw,34px);top:50%;transform:translateY(-50%);z-index:40;pointer-events:none}
.space-index ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.space-index button{pointer-events:auto;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:28px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;font:400 13px/1 Basel,Arial,sans-serif;letter-spacing:0}
.space-index .si-dot{width:5px;height:5px;border-radius:50%;background:#f2f5fb;box-shadow:0 0 0 1px rgba(6,9,15,.45);opacity:.42;transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1)}
.space-index button.is-current .si-dot{opacity:1;transform:scale(1.5)}
.space-index .si-name{opacity:0;transform:translateX(6px);transition:opacity .25s cubic-bezier(.16,1,.3,1),transform .25s cubic-bezier(.16,1,.3,1);white-space:nowrap;color:#f2f5fb;padding:7px 11px;border-radius:999px;background:rgba(6,9,15,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.space-index button:hover .si-name,.space-index button:focus-visible .si-name{opacity:1;transform:none}
.space-index button:hover .si-dot{opacity:.8}
.space-index button:focus-visible{outline:none}
.space-index button:focus-visible .si-dot{box-shadow:0 0 0 3px color-mix(in srgb,var(--ink) 35%,transparent)}
html.pt-leaving .space-index,html.space-leaving .space-index{opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1)}
@media (max-width:1023px),(orientation:portrait){.space-index{display:none}}
@media (prefers-reduced-motion:reduce){.space-index .si-dot,.space-index .si-name{transition:none}}
/* the cursor label over a device in the ring (js/3d/space-world.js): the action, in a quiet pill, beside the hand; a solid
   pill in the page's ink (21 Oct: it was a blurred glass plate, which DESIGN.md rules out) */
.space-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;padding:8px 12px;border-radius:999px;background:#000;color:#fff;font:400 13px/1 Basel,Arial,sans-serif;opacity:0;transition:opacity .25s cubic-bezier(.16,1,.3,1);will-change:transform}
html[data-theme=dark] .space-cursor{background:#fff;color:#000}
.space-cursor.is-on{opacity:1}
@media (prefers-reduced-motion:reduce){.space-cursor{transition:none}}

/* Type under water: the two deep headings carry the surface's light, a slow sheet of caustic light moving through the
   letters (the type never flies; it is only lit by the world). Both themes, both levels; still under reduced motion. */
html:is(.space-on,.airy) :is(#principles-title,#services-title){color:#fff}
html:is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html:is(.space-on,.airy) :is(#principles-title,#services-title):not(:has(.mt-char)){color:transparent;-webkit-background-clip:text;background-clip:text;
 background-image:linear-gradient(104deg,#f4f7fd 0%,#dfe2e8 18%,#ffffff 30%,#cfd2d8 44%,#f6f9ff 56%,#e3e6ec 70%,#ffffff 84%,#eef1f7 100%);background-attachment:fixed;background-size:160vw 100vh;background-position:0vw 0;
 animation:space-caustic 9s linear infinite alternate}
@keyframes space-caustic{from{background-position:0vw 0}to{background-position:-60vw 0}}
@media (prefers-reduced-motion:reduce){html:is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html:is(.space-on,.airy) :is(#principles-title,#services-title){animation:none}}
/* iOS has no fixed attachment: plain white there (-webkit-touch-callout exists only in WebKit on iOS) */
@supports (-webkit-touch-callout:none){html:is(.space-on,.airy) :is(#principles-title,#services-title) .mt-char,html:is(.space-on,.airy) :is(#principles-title,#services-title){color:#fff;background:none;animation:none}}


/* The veil (16 Oct, the owner: "фон чуть глушить, чтобы шрифт был белый"): a fixed sheet over the world or the stills,
   under the page, whose opacity follows the scene (js/space-dim.js, driven by both levels). Nothing milky: a deep
   blue, 10-20 % at most, only where white copy sits over a bright frame. */
.space-dim{position:fixed;inset:0;width:100%;height:100lvh;z-index:-1;pointer-events:none;background:#0c0f15;opacity:var(--space-dim,0);transition:opacity 1.2s cubic-bezier(.65,0,.35,1)}
@media (prefers-reduced-motion:reduce){.space-dim{transition:none}}

/* The work grid on the space homepage (16 Oct): the product screens themselves (images/space-hero, the same files the
   case openers use) over the dusk sky, no cover backdrop,
   no device frame, no card frame; a two-column collage with air, six cards until "View all projects". The heading's
   lede was white over the bright sky and said less than the heading. */
html:is(.space-on,.airy) #projects .section-heading p{display:none}
html:is(.space-on,.airy) #cardContainer{display:block!important;columns:2;column-gap:clamp(40px,5vw,88px);padding-top:clamp(32px,6svh,72px);min-height:0}
html:is(.space-on,.airy) #cardContainer .work-card{display:block!important;break-inside:avoid;position:static!important;width:auto!important;max-width:none!important;margin:0 0 clamp(56px,7vw,112px)!important;padding:0!important;transform:none!important}
html:is(.space-on,.airy) #cardContainer .work-card[hidden]{display:none!important}
html:is(.space-on,.airy) #cardContainer .work-image{position:relative;height:auto!important;aspect-ratio:auto!important;border-radius:20px;overflow:hidden;background:none!important;perspective:none;margin:0!important}
html:is(.space-on,.airy) #cardContainer .work-image>img{position:static!important;display:block;width:100%!important;height:auto!important;max-width:none!important;object-fit:cover;transform:none!important}
html:is(.space-on,.airy) #cardContainer .work-caption{position:static!important;inset:auto!important;width:auto!important;display:flex;flex-direction:row!important;align-items:baseline!important;gap:12px!important;margin:20px 0 6px!important;color:var(--ink)!important}
html:is(.space-on,.airy) #cardContainer .work-caption h3{font-size:clamp(21px,1.7vw,27px)!important;letter-spacing:-.025em;font-weight:400;margin:0}
html:is(.space-on,.airy) #cardContainer .work-caption span{color:var(--muted);font-size:15px}
html:is(.space-on,.airy) #cardContainer .work-card>p{position:static!important;width:auto!important;margin:0!important;font-size:15px;line-height:1.45;color:var(--muted)}
html:is(.space-on,.airy) #cardContainer .work-indicator{inset:auto 16px 16px auto}
html:is(.space-on,.airy) .work-more{padding-top:clamp(8px,2svh,24px)}
@media (max-width:760px){html:is(.space-on,.airy) #cardContainer{columns:1;padding-top:24px}html:is(.space-on,.airy) #cardContainer .work-card{margin-bottom:48px!important}}
/* the industry panels show the screens themselves too (index.html points them at images/space-hero): one screen per
   panel, the related covers (framed, over their aura, overlapping it, cut by the panel) step aside */
html:is(.space-on,.airy) .industry-panel .chapter-media .work-image{background:none!important;border-radius:16px;overflow:hidden}
html:is(.space-on,.airy) .industry-panel .chapter-related{display:none!important}
html:is(.space-on,.airy) .industry-panel .industry-copy p{font-size:clamp(19px,1.5vw,24px);line-height:1.4}
/* the industry panels show a studio object each (Fintech, Web3, Platforms), not a project screen: the owner, 16 Oct:
   "просто скрин проекта скучно, можно там 3д сцены показывать" */
/* the object is bigger than the card it sits in and spills into the free right of the column (it has no backdrop to cut) */
html:is(.space-on,.airy) .industry-panel :is(.chapter-media,.work-image):has(.industry-form){overflow:visible!important;border-radius:0!important}
html:is(.space-on,.airy) .industry-panel .work-image .industry-form{position:relative;display:block;width:138%;max-width:none;aspect-ratio:8/5;margin:-7% 0 0 -17%}
html:is(.space-on,.airy) .industry-panel .industry-form>:is(img,canvas){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
/* the live form (js/3d/industry-forms.js, 21 Oct) draws on a canvas 8 % past the box on each side, so its drift, turns and
   arrival never meet the canvas's edge (the stills keep only 5-7 % to it); its window widens to match, so the form stands
   where the still stood. The bleed takes no clicks: the box under it still opens the case */
html:is(.space-on,.airy) .industry-panel .industry-form>canvas.industry-live{left:-20%;top:-20%;width:140%;height:140%;pointer-events:none}
/* on a phone the form takes the column and a little more: never a thumbnail (owner: "чтобы мелкими не были, особенно на мобе") */
@media (max-width:700px){html:is(.space-on,.airy) .design-principles .industry-panel .chapter-cluster .chapter-card:has(.industry-form){width:100%!important}
 html:is(.space-on,.airy) .industry-panel .work-image .industry-form{width:124%;margin:-8% 0 0 -12%}}