@font-face{font-family:Host;src:url('assets/host-grotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}
    @font-face{font-family:Mono;src:url('assets/space-mono-400.woff2') format('woff2');font-weight:400;font-display:swap}
    @font-face{font-family:Inter;src:url('assets/inter-cyrillic-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
    @font-face{font-family:Inter;src:url('assets/inter-latin-400.woff2') format('woff2');font-weight:400;font-display:swap}
    @font-face{font-family:'GOST type B';src:local('GOST 2.304-81 type B'),local('GOST 2.304-81 type B (plotter)'),local('GOST type B'),local('GOSTTypeB'),url('assets/gost-type-b.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
    /* CDW coordinates: 1980 × 1080. One millimetre is one CSS pixel at reference size.
       CAD origin is bottom-left; CSS origin is top-left.
       X: 100 | 440 | 450 | 1530 | 1540 | 1880.
       Original CAD Y: 100 | 200 | 210. The text starts one viewport below
       the opening greeting on every screen size.
       The centre scrolls as one document. All peripheral controls are fixed. */
    :root{
      color-scheme:dark;
      --paper:#161616;--ink:#f2f0eb;--copy:#c1c0ba;--muted:#a3a29c;
      --accent:#febd17;--accent-rgb:254,189,23;
      /* Scale against the tighter viewport axis; cap growth on very large TVs. */
      --u:min(calc(100vw / 1980),calc(100dvh / 1080),1.6px);
      --outer:calc(100 * var(--u));--rail-left:calc(440 * var(--u));
      --content-left:calc(450 * var(--u));--content-right:calc(450 * var(--u));
      /* Keep the column width shown in the 1242px reference on wider screens. */
      --content-max-width:calc(1242px * 1080 / 1980);
      --rail-right:calc(440 * var(--u));--header-top:calc(100 * var(--u));
      --header-bottom:calc(200 * var(--u));--header-font-size:calc(26 * var(--u));--content-top:100dvh;
      
      --guide-gap:calc(10 * var(--u));--foot:calc(50 * var(--u));
      --control-size:calc(50 * var(--u));
      --side-top:calc(210 * var(--u));
      --side-width:calc(20 * var(--u));--side-height:calc(400 * var(--u));
      --header-shade:22,22,22;--control:rgba(242,240,235,.09);--control-hover:rgba(242,240,235,.2);
    }
    *{box-sizing:border-box}
    html,body{width:100%;margin:0}
    html{scrollbar-width:none;scroll-behavior:auto}
    html::-webkit-scrollbar{display:none}
    body{min-height:100dvh;background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
    button,a{-webkit-tap-highlight-color:transparent}
    button{font:inherit;cursor:pointer}
    a{color:inherit;text-decoration:none}
    button{color:inherit}
    :focus-visible{outline:0}a:focus-visible,button:focus-visible{background:var(--accent);color:#111}
    .story-background{position:fixed;inset:0 0 auto;height:100dvh;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .5s ease}
    .story-background.is-visible{opacity:1}
    .story-scene{position:absolute;inset:0}
    .story-photo{position:absolute;left:0;top:0;display:block;width:100%;height:150%;object-fit:cover;object-position:50% 50%;transform:translate3d(0,var(--story-shift,0px),0);user-select:none}
    .story-scene::after{content:"";position:absolute;inset:0;background:rgba(var(--header-shade),.76)}
    .opening-screen{position:fixed;inset:0;z-index:20;width:100%;height:100dvh;margin:0;padding:0;overflow:hidden;background:#161616;transition:transform .3s cubic-bezier(.65,0,.25,1),opacity .3s ease}
    .opening-screen[hidden]{display:none}
    .opening-screen.is-leaving{transform:translate3d(0,-100%,0);opacity:0;pointer-events:none}
    .opening-screen.is-away{transform:none;opacity:0;pointer-events:none;transition:opacity .3s ease}
    .opening-photo{display:block;width:100%;height:100%;object-fit:cover;object-position:42% 50%;user-select:none}
    .opening-scroll{position:absolute;left:0;right:0;bottom:max(32px,var(--outer));display:flex;flex-direction:column;align-items:center;gap:4px;width:max-content;margin:0 auto;padding:12px 18px;border:0;background:transparent;color:#f2f0eb;font:400 clamp(12px,var(--header-font-size),20px)/1.4 Mono,monospace;letter-spacing:.08em;text-shadow:0 1px 12px #000;animation:opening-bob 1.7s ease-in-out infinite}
    .opening-scroll-arrow{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.85;pointer-events:none}
    .opening-scroll:focus-visible{outline:1px solid currentColor;background:transparent;color:#f2f0eb}
    @keyframes opening-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
    :root.opening-active .brand-link,:root.opening-active .side-copy{z-index:30}
    :root.opening-visible .brand-link,:root.opening-visible .side-copy{color:#f2f0eb;text-shadow:0 1px 12px #0006}
    :root.opening-active .menu-button{z-index:36}
    :root.opening-visible .menu-button{--contacts-ink:#f2f0eb}
    :root.opening-active .menu-layer{z-index:35}
    :root.opening-active .menu-panel{color:#fff;--muted:#c1c0ba}
    /* This heading follows the reading pane's scroll, independently of the photo. */
    .opening-hello{position:fixed;z-index:2;left:50%;top:50dvh;transform:translate(-50%,calc(-50% - var(--reading-scroll,0px)));width:max-content;max-width:calc(100% - 80px);margin:0;font:600 clamp(56px,calc(150 * var(--u)),180px)/1 Host,Arial,sans-serif;text-align:center;color:#fff;mix-blend-mode:difference;pointer-events:none}
    .opening-hello{transition:opacity 1s ease .5s}
    :root.opening-title-pending .opening-hello{opacity:0}
    :root.opening-active .opening-hello{z-index:25}
    .header-blur{position:fixed;z-index:4}
    /* Move the same blur layers from above the opening. Parent opacity would
       isolate their backdrop until the fade finishes, making the blur pop in. */
    header>.header-blur{transform:translateY(0);transition:height .15s ease-in-out,transform .3s cubic-bezier(.2,.8,.2,1)}
    :root.opening-visible:not(.menu-open) header>.header-blur{transform:translateY(-100%)}
    :root.menu-open header>.header-blur{height:100dvh;z-index:9}
    :root.opening-active header>.header-blur{z-index:29}
    :root.opening-visible header>.header-blur{--header-shade:22,22,22}
    .header-blur::after{background:linear-gradient(to bottom,rgba(var(--header-shade),.55) 0%,rgba(var(--header-shade),.43) 30%,rgba(var(--header-shade),.15) 60%,rgba(var(--header-shade),.03) 85%,rgba(var(--header-shade),0) 100%)}
    .brand-link{position:fixed;z-index:11;left:var(--outer);top:var(--header-top);width:max-content;height:auto;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;font:600 var(--header-font-size)/1 Host,Arial,sans-serif;letter-spacing:.012em;white-space:nowrap;transition:color .3s ease,text-shadow .3s ease}
    .brand-label,.contact-text,.copy-lead-text{display:block;position:relative}
    .brand-label>span,.brand-inline span{color:var(--accent)}
    /* The vector mark follows the measured wordmark width above it. */
    .brand-logo{position:relative;left:0;top:auto;display:block;width:var(--brand-ink-width,7em);aspect-ratio:1888 / 348;overflow:hidden;pointer-events:none}
    .brand-logo img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;filter:invert(1)}
    .brand-link:hover{color:var(--muted)}
    .menu-button{position:fixed;right:var(--outer);top:var(--header-top);z-index:12;display:flex;align-items:flex-start;justify-content:flex-end;width:max-content;height:auto;padding:0;border:0;background:transparent;color:var(--contacts-ink,var(--ink));font:400 var(--header-font-size)/1 Mono,monospace;letter-spacing:.06em;transition:color .3s ease}
    .menu-button:hover,.menu-button:focus-visible,.menu-button[aria-expanded="true"]{background:transparent;color:var(--accent)}
    #projects-link{top:calc(var(--header-top) + 1.5 * var(--header-font-size));transition:color .3s ease,opacity .3s ease}
    .side-copy{position:fixed;z-index:11;left:var(--outer);top:var(--side-top);width:var(--side-width);height:var(--side-height);margin:0;font:400 clamp(8px,calc(18 * var(--u)),28px)/1 Mono,monospace;letter-spacing:.12em;color:var(--muted);white-space:nowrap;user-select:text;transition:color .3s ease,text-shadow .3s ease}
    .side-label{position:absolute;top:0;right:1em;display:block;width:max-content;line-height:1;transform:rotate(-90deg);transform-origin:top right;color:inherit;text-decoration:none;transition:color .3s ease}
    .side-label:hover,.side-label:focus-visible{color:var(--accent)}
    /* One native document scroller keeps touch momentum through the opening,
       the Hello spacer and the text, including swipes in the side margins. */
    .reading-pane{position:relative;z-index:1;width:calc(100% - var(--content-left) - var(--content-right));max-width:var(--content-max-width);margin-inline:auto;padding-top:var(--content-top);background:transparent}
    
    
    
    
    .main-copy{min-height:calc(670 * var(--u));padding:0 0 calc(100 * var(--u));font-family:'GOST type B',sans-serif;font-weight:400;font-size:clamp(16px,calc(30 * var(--u)),54px);line-height:1.65;color:var(--copy)}
    .main-copy p{margin:0 0 1.4em;text-align:justify;text-align-last:start;hyphens:auto;overflow-wrap:break-word}
    .main-copy .greeting{margin:0 0 1em;font-size:1.26em;line-height:1.4;color:var(--ink);text-align:justify}
    .brand-inline{font-family:Host,Arial,sans-serif;font-weight:600;white-space:nowrap;color:var(--ink);letter-spacing:.01em}
    .main-copy strong{font-weight:400;color:var(--ink)}
    .main-copy a{color:var(--accent);text-decoration:none;transition:color .18s}
    .main-copy a:hover{color:var(--accent)}
    .copy-signoff{display:flex;justify-content:center;text-align:center;margin-top:2.6em;padding-top:1.2em;border:0;font:400 .48em/1.7 Mono,monospace;letter-spacing:.06em;color:var(--muted)}
    .round-control{position:fixed;bottom:var(--outer);width:calc(1.5 * var(--control-size));height:calc(1.5 * var(--control-size));z-index:6;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--control);color:var(--ink);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s}
    .round-control:hover,.round-control:focus-visible{background:var(--control-hover);color:var(--ink)}
    #back-top{right:var(--outer)}
    .round-control svg{width:30%;height:30%;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
    .menu-layer{position:fixed;inset:0;z-index:10}
    .menu-layer[hidden]{display:none}
    .contact-scrim{position:absolute;inset:0;z-index:0;height:100%;background:rgba(0,0,0,.5);pointer-events:auto}
    /* Keep gestures on the document: a nested menu scroller can retain the
       first swipe even after its layer has been hidden. */
    .menu-panel{position:absolute;z-index:1;left:50%;top:var(--side-top);width:calc(100% - var(--content-left) - var(--content-right));max-width:var(--content-max-width);transform:translateX(-50%);padding:0 0 24px;border:0;background:transparent;text-align:right}
    .menu-link{display:flex;flex-direction:column;align-items:flex-end;padding:15px 0;border:0;font:400 22px/1.2 Mono,monospace}
    .contact-name{display:flex;align-items:center;gap:12px}
    .contact-telegram{width:20px;height:20px;flex:none;fill:currentColor;color:var(--accent)}
    .contact-channels{display:flex;justify-content:flex-end;gap:12px;margin:-6px -6px 12px 0}
    .contact-channel{display:grid;place-items:center;width:32px;height:32px;padding:6px;border:0;background:transparent;color:var(--muted);transition:color .2s ease}
    .contact-channel svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
    .contact-channel .channel-telegram{fill:currentColor;stroke:none}
    .contact-channel:hover{color:inherit}
    .contact-channel[aria-selected="true"]{color:var(--accent)}
    .contact-channel:focus-visible{outline:1px solid currentColor;outline-offset:2px;background:transparent;color:var(--accent)}
    .contact-content[hidden]{display:none}
    .contacts-layer:not([hidden]) .contact-channels{animation:contact-drop .3s cubic-bezier(.2,.8,.2,1) both}
    .menu-layer:not([hidden]) .menu-link{animation:contact-drop .36s cubic-bezier(.2,.8,.2,1) both}
    .menu-layer:not([hidden]) .menu-link:nth-of-type(2){animation-delay:65ms}
    .menu-layer:not([hidden]) .menu-link:nth-of-type(3){animation-delay:130ms}
    @keyframes contact-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
    .menu-link:hover{color:var(--accent)}
    .menu-link small{display:block;margin-top:7px;font:12px/1.3 Mono,monospace;color:#fff;letter-spacing:.04em}
    /* Compact screen: retain the centre, paired rails and fixed controls;
       collapse empty side fields before reducing text or touch targets. */
    @media(max-width:900px){
      :root{--outer:20px;--rail-left:40px;--rail-right:40px;--content-left:48px;--content-right:48px;--guide-gap:8px;--header-top:var(--outer);--header-bottom:82px;--header-font-size:clamp(10px,calc(26 * var(--u)),16px);--foot:20px;--control-size:clamp(22px,calc(50 * var(--u)),32px);--side-top:100px;--side-width:14px;--side-height:290px}
      .side-copy{letter-spacing:.07em;left:16px}
      
      .main-copy{padding-bottom:88px;font-size:clamp(16px,calc(55 * var(--u)),24px);line-height:1.65}
      .main-copy p{text-align:justify;hyphens:manual}
      .main-copy .greeting{font-size:1.15em}
      .copy-signoff{font-size:10px}
      .round-control svg{width:14.25px;height:14.25px}
      :root{--content-left:clamp(38px,calc(33.5185vw - 96.6667px),204.545px);--content-right:var(--content-left);--rail-left:calc(var(--content-left) - var(--guide-gap));--rail-right:var(--rail-left)}
      .reading-pane{container-type:inline-size}
      
    }
    @media(max-width:400px){
      :root{--outer:16px;--rail-left:31px;--rail-right:31px;--content-left:38px;--content-right:38px;--guide-gap:7px;--side-width:12px}
      .side-copy{left:11px}
    }
    @media(min-width:901px) and (max-height:600px){:root{--header-top:24px;--header-bottom:74px;--foot:18px;--side-top:90px;--side-height:230px}}
    @media(max-width:900px) and (max-height:500px){:root{--header-top:var(--outer);--header-bottom:66px;--side-top:90px;--side-height:170px}}
    @media(max-height:500px){.menu-panel{padding-bottom:10px}.menu-link{padding-block:8px}.contact-channels{margin-bottom:6px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
    @media print{html,body{height:auto;overflow:visible}.reading-pane{position:static;width:auto;max-width:none;height:auto;padding-top:0;overflow:visible;margin:30px}.brand-link,.menu-button,.round-control,.side-copy,.menu-layer,.opening-screen,.opening-hello,.story-background{display:none}.main-copy{font-size:12pt}}

.dremover-layout{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,88px);width:100%;align-items:center}
.project-copy,.project-demo{min-width:0}
.project-category{margin:0 0 24px;color:var(--muted);font:400 10px/1.6 Mono,monospace;letter-spacing:.1em;text-transform:uppercase}
.project-title{margin:0 0 28px;color:var(--ink);font:400 clamp(38px,4.8vw,76px)/1.05 'GOST type B',sans-serif;letter-spacing:-.04em}
.title-period{color:var(--accent)}
.project-description{max-width:25em;margin:0 0 16px;color:var(--copy);font:400 clamp(19px,1.65vw,25px)/1.55 'GOST type B',sans-serif}
.project-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:20px}
.project-actions>.project-button{flex:none;box-sizing:border-box;height:44px;margin:0;appearance:none;-webkit-appearance:none}
.project-button{display:inline-flex;align-items:center;justify-content:center;gap:12px;max-width:100%;min-height:44px;padding:10px 22px;border:1px solid rgba(255,255,255,.3);border-radius:24px;background:#1c1c1c;color:#fff;font:400 12px/1.5 Mono,monospace;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:0 0 5px rgba(255,255,255,.107),0 0 18px rgba(255,255,255,.073),0 0 34px rgba(255,255,255,.04);transition:background-color .22s ease,box-shadow .22s ease,color .22s ease}
.project-button:hover:not(:disabled){background:#292929;color:var(--accent);text-decoration:none;box-shadow:0 0 7px rgba(var(--accent-rgb),0.1391),0 0 23px rgba(var(--accent-rgb),0.1022),0 0 42px rgba(var(--accent-rgb),0.06)}
.project-button:active:not(:disabled){background:#343434;box-shadow:0 0 4px rgba(var(--accent-rgb),0.107),0 0 12px rgba(var(--accent-rgb),0.073),0 0 24px rgba(var(--accent-rgb),0.04)}
.project-button:focus-visible{background:#1c1c1c;outline:2px solid var(--accent);outline-offset:4px;color:var(--accent);box-shadow:0 0 7px rgba(var(--accent-rgb),.1391),0 0 23px rgba(var(--accent-rgb),.1022),0 0 42px rgba(var(--accent-rgb),.06)}
.project-button:disabled{cursor:default}
.back-link{flex:none;width:44px;height:44px;padding:0;border-radius:50%}
.back-link svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.project-demo{margin:0}
.project-demo .project-actions{justify-content:flex-end}
.demo-video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:#0d0d0d;object-fit:contain}
@media(min-width:1100px){
  .dremover-layout{--dremover-gap:clamp(24px,3vw,48px);grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--dremover-gap);align-items:start;container-type:inline-size}
  .project-copy{container-type:inline-size}
  .project-copy .project-title{font-size:clamp(28px,18cqw,76px)}
  .project-actions{display:grid;grid-template-columns:44px max-content max-content;column-gap:12px}
  .project-actions .project-button{padding-inline:clamp(12px,1.4vw,22px)}
  .project-actions .back-link{padding:0}
}
.video-error{margin:14px 0 0;color:var(--copy);font-size:13px;line-height:1.5}
.video-error a{color:var(--accent);text-decoration:underline}
.page-footer{padding:0 38px 28px;text-align:center;font:400 10px/1.7 Mono,monospace;letter-spacing:.06em;color:var(--muted)}

/* Project content sits one screen below the shared opening. */
.reading-pane.project-page{width:calc(100% - 4 * var(--outer));max-width:1320px}
.dremover-content{display:flex;align-items:center;min-height:calc(100dvh - 70px);padding-block:clamp(120px,18dvh,180px) 80px}
.opening-hello{font-size:clamp(40px,calc(150 * var(--u)),180px)}
.project-title{white-space:nowrap}
.page-footer{position:relative;padding:0 0 28px}
@media(max-width:1099px){.reading-pane.project-page{width:min(820px,calc(100% - 160px))}.dremover-layout{grid-template-columns:1fr;gap:40px}.project-description{max-width:31em;font-size:22px}.project-title{font-size:64px}}
@media(max-width:900px){.reading-pane.project-page{width:calc(100% - 120px)}.dremover-content{padding-top:130px}}
@media(max-width:600px){.reading-pane.project-page{width:calc(100% - 76px)}.dremover-content{padding-block:120px 58px}.project-category{font-size:9px;margin-bottom:20px}.project-title{font-size:clamp(38px,10vw,54px)}.project-description{font-size:20px}.project-actions{margin-top:10px}.dremover-layout{gap:32px}.page-footer{font-size:9px;padding-bottom:24px}}
@media print{.reading-pane.project-page{width:auto}.dremover-content{min-height:0;padding:0}}