/* NEBO. Looks: B warm serif (Literata + Onest), A quiet logotype (Onest), C calmer Unbounded (Unbounded + Onest); all OFL, all with Cyrillic.
   Motion: plain CSS. Entrances are keyframe animations; scroll effects use scroll-driven animations
   (animation-timeline), and browsers without them get the finished, still layout. No JavaScript.
   Photos: the host's own. Icons: Solar (CC BY 4.0) via Iconify. */
html{scroll-padding-top:104px;background:#F7F4EF}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#F7F4EF}
a{color:#1B1A17}a:hover{color:#6E4A2B}

/* ---------- looks ---------- */
.n{
--paper:#F7F4EF;--ink:#1B1A17;--mute:#4F4A43;--line:rgba(27,26,23,.16);--card:#FFFFFF;--kick:#6E4A2B;--warm:#EDE5D9;
--field:#E8DFD2;--field-ink:#1B1A17;--field-mute:#45413B;--field-kick:#6E4A2B;--field-card:rgba(255,255,255,.6);--field-line:rgba(27,26,23,.18);--field-btn:#1B1A17;--field-btn-fg:#F7F4EF;
--deep:#1F2A33;--deep-2:#2B3B48;--on-deep:#F7F4EF;--on-deep-mute:#C3CBD2;--accent:#E9B58A;--deep-line:rgba(247,244,239,.16);
--disp:'Literata',Georgia,'Times New Roman',serif;--disp-w:400;--disp-track:-.02em;--disp-lh:1.06;
--mid:'Literata',Georgia,serif;--mid-w:400;--mid-track:-.01em;
--giant-w:300;--giant-style:italic;--giant-track:-.035em;
--mark:'Literata',Georgia,serif;--mark-w:800;--mark-track:.01em;--mark-wide:30.5vw;--mark-stack:58vw;
--text:'Onest',system-ui,-apple-system,'Segoe UI',sans-serif;
--btn:var(--ink);--btn-fg:var(--paper);--btn-hover:var(--kick);--btn-hover-fg:var(--paper);--focus:var(--ink);
--gut:clamp(20px,4.6vw,72px);--hdr:76px;--ease:cubic-bezier(.22,.8,.16,1)}
.n.look-a{
--paper:#F6F4F0;--ink:#14202B;--mute:#46525D;--line:rgba(20,32,43,.15);--kick:#5A6772;--warm:#ECE6DD;
--field:#C9DCEC;--field-ink:#14202B;--field-mute:#33414D;--field-kick:#2F3D49;--field-card:rgba(255,255,255,.55);--field-line:rgba(20,32,43,.18);--field-btn:#14202B;--field-btn-fg:#F6F4F0;
--deep:#14202B;--deep-2:#1E3A52;--on-deep:#F6F4F0;--on-deep-mute:#B9C6D2;--accent:#F2C9A0;--deep-line:rgba(246,244,240,.16);
--disp:'Onest',system-ui,sans-serif;--disp-w:600;--disp-track:-.035em;--disp-lh:1.04;
--mid:'Onest',system-ui,sans-serif;--mid-w:500;--mid-track:-.01em;
--giant-w:700;--giant-style:normal;--giant-track:-.05em;
--mark:'Onest',system-ui,sans-serif;--mark-w:800;--mark-track:-.01em;--mark-wide:32.9vw;--mark-stack:61vw}
.n.look-c{
--paper:#F5F7F9;--ink:#16314C;--mute:#44566A;--line:rgba(22,49,76,.15);--kick:#36628D;--warm:#E7EEF4;
--field:#3F6F9E;--field-ink:#FFFFFF;--field-mute:#F0F5FA;--field-kick:#FFFFFF;--field-card:rgba(10,30,55,.3);--field-line:rgba(255,255,255,.32);--field-btn:#FFFFFF;--field-btn-fg:#16314C;
--deep:#16314C;--deep-2:#173B5C;--on-deep:#FFFFFF;--on-deep-mute:#C9D8E6;--accent:#F3B37A;--deep-line:rgba(255,255,255,.16);
--disp:'Unbounded','Arial Black',sans-serif;--disp-w:300;--disp-track:-.04em;--disp-lh:1.1;
--mid:'Onest',system-ui,sans-serif;--mid-w:500;--mid-track:-.01em;
--giant-w:300;--giant-style:normal;--giant-track:-.05em;
--mark:'Unbounded','Arial Black',sans-serif;--mark-w:800;--mark-track:.04em;--mark-wide:24.6vw;--mark-stack:46vw}

/* ---------- surfaces ---------- */
.n{position:relative;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:17px;line-height:1.6;font-weight:400;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.n-field{background:var(--field);color:var(--field-ink);--kick:var(--field-kick);--mute:var(--field-mute);--line:var(--field-line);--card:var(--field-card);--btn:var(--field-btn);--btn-fg:var(--field-btn-fg);--btn-hover:var(--field-ink);--btn-hover-fg:var(--field);--focus:var(--field-ink)}
.n-on-dark{background:var(--deep);color:var(--on-deep);--kick:var(--accent);--mute:var(--on-deep-mute);--line:var(--deep-line);--card:rgba(255,255,255,.07);--btn:var(--accent);--btn-fg:var(--deep);--btn-hover:var(--on-deep);--btn-hover-fg:var(--deep);--focus:var(--accent)}
.n-deep-2{background:var(--deep-2)}
.n-warm{background:var(--warm)}

.n *,.n *::before,.n *::after{box-sizing:border-box}
.n img{display:block;max-width:100%}
.n a{color:inherit;text-decoration:none}
.n :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:6px}
.n ::selection{background:var(--ink);color:var(--paper)}
.n section[id],.n main{scroll-margin-top:var(--hdr)}
.n main:focus{outline:none}
.n-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.n .n-skip{position:absolute;left:12px;top:-80px;z-index:90;padding:12px 16px;background:var(--ink);color:var(--paper);border-radius:8px;font-size:15px}
.n .n-skip:focus{top:12px}
.n-wrap{width:100%;max-width:1360px;margin:0 auto;padding-inline:var(--gut)}
.n-ic{flex:none;display:block}
.tbd{background:#F1DFC2;color:#5C3D20;border-radius:4px;padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.n-wm{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em;margin-right:.24em}
.n-w{display:inline-block}

/* ---------- type ---------- */
.n-kick{margin:0;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--kick)}
.n-h2{margin:0;font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(34px,4.8vw,76px);line-height:var(--disp-lh);letter-spacing:var(--disp-track);text-wrap:balance}
.n-h3{margin:0;font-family:var(--disp);font-weight:var(--disp-w);font-size:clamp(28px,3vw,46px);line-height:var(--disp-lh);letter-spacing:var(--disp-track);text-wrap:balance}
.n-p{margin:0;max-width:36em;font-size:clamp(16px,1.2vw,18px);line-height:1.7;color:var(--mute);text-wrap:pretty}

/* ---------- controls ---------- */
.n .n-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:1.5px solid var(--btn);border-radius:999px;background:var(--btn);color:var(--btn-fg);font-family:var(--text);font-size:16px;font-weight:500;white-space:nowrap;cursor:pointer;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease)}
.n .n-btn:hover{background:var(--btn-hover);border-color:var(--btn-hover);color:var(--btn-hover-fg)}
.n .n-btn:active{transform:scale(.97)}
.n .n-btn .n-ic{transition:transform .45s var(--ease)}
.n .n-btn:hover .n-go{transform:translateX(4px)}
.n .n-btn-q{background:transparent;color:inherit;border-color:currentColor}
.n .n-btn-q:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.n-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;background-image:linear-gradient(currentColor,currentColor);background-size:100% 1.5px;background-position:0 calc(100% - 9px);background-repeat:no-repeat;transition:background-size .5s var(--ease)}
.n .n-link:hover{background-size:0 1.5px;background-position:100% calc(100% - 9px)}
.n-inline{text-decoration:underline!important;text-decoration-thickness:1.5px!important;text-underline-offset:3px;font-weight:500}
.n-pill{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border:1.5px solid var(--line);border-radius:999px;font-size:15px;font-weight:450}
.n-pill .n-ic{color:var(--kick)}

/* ---------- banner + header ---------- */
.n-banner{position:relative;z-index:31;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 18px;min-height:44px;padding:8px var(--gut);font-size:14px;text-align:center}
.n-banner strong{font-weight:600;color:var(--accent)}
.n-on-dark .tbd{background:transparent;color:var(--accent);outline:1px dashed currentColor;outline-offset:1px}
.n-hdr{position:sticky;top:0;z-index:30}
/* The bar is solid paper. Where scroll-driven animations exist it starts see-through over the hero
   and turns solid within the first 24px of scrolling (this used to be a scroll listener). */
.n-hdr-bar{color:var(--field-ink);--btn:var(--field-btn);--btn-fg:var(--field-btn-fg);--btn-hover:var(--field-ink);--btn-hover-fg:var(--field);--focus:var(--field-ink);--line:var(--field-line);display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--hdr);padding-inline:var(--gut);background:var(--paper);border-bottom:1px solid rgba(0,0,0,.14)}
@keyframes n-hdr-solid{from{background-color:transparent;border-bottom-color:transparent}to{background-color:var(--paper);border-bottom-color:rgba(0,0,0,.14)}}
@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:scroll()){
.n-hdr-bar{animation:n-hdr-solid linear both;animation-timeline:scroll(root);animation-range:0px 24px}
}
}
/* the two words share a baseline; the padding keeps the link a 44px tap target */
.n-logo{display:inline-flex;align-items:baseline;gap:12px;padding-block:11px}
.n-logo b{font-family:var(--mark);font-weight:700;font-size:22px;line-height:1;letter-spacing:.02em}
.n-logo span{font-family:var(--mark);font-size:12px;font-weight:600;line-height:1;letter-spacing:.06em}
.n-nav{display:flex;align-items:center;gap:6px}
.n-nav ul{display:flex;gap:8px;margin:0 6px 0 0;padding:0;list-style:none}
.n-nav ul a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--line);border-radius:999px;font-family:var(--mid);font-weight:var(--mid-w);font-size:16px;letter-spacing:var(--mid-track);transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease)}
.n-nav ul a:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.n-nav ul a:active{transform:scale(.97)}
.n .n-nav ul a.n-nav-guide{padding-left:14px;background:var(--accent);border-color:var(--accent);color:#1B1A17}
.n .n-nav ul a.n-nav-guide:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.n .n-nav ul a[aria-current="page"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.n-lang{display:flex;gap:2px;margin:0 6px;padding:3px;border:1.5px solid var(--line);border-radius:999px}
.n-lang a{display:inline-flex;align-items:center;justify-content:center;min-width:38px;min-height:38px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.04em}
.n-lang a[aria-current="true"]{background:var(--btn);color:var(--btn-fg)}
.n-hdr .n-btn{min-height:44px;padding:0 20px;font-size:15px}
.n-menu-btn{display:none;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:inherit;cursor:pointer}
/* Menu without a script: "open" links to #menu, an empty fixed anchor (so the page does not move), and the menu shows
   while #menu is the URL target. Any menu link changes the target, so following it closes the menu. */
.n-tgt{position:fixed;top:0;left:0;width:1px;height:1px;pointer-events:none}
.n-menu{display:none;position:absolute;top:100%;left:0;right:0;max-height:calc(100dvh - var(--hdr));overflow-y:auto;flex-direction:column;gap:20px;padding:8px var(--gut) 28px;background:var(--paper);color:var(--ink);border-bottom:1px solid rgba(0,0,0,.14);box-shadow:0 30px 50px -30px rgba(0,0,0,.35);--btn:var(--ink);--btn-fg:var(--paper);--focus:var(--ink);--line:rgba(0,0,0,.14)}
.n-menu ul{margin:0;padding:0;list-style:none}
.n-menu ul a{display:flex;align-items:center;justify-content:space-between;min-height:62px;border-top:1px solid var(--line);font-family:var(--mid);font-weight:var(--mid-w);font-size:24px;letter-spacing:var(--mid-track)}
.n-menu .n-lang{align-self:flex-start;margin:0}

.n-sec{padding-block:clamp(96px,10vw,168px)}

/* ---------- knockout wordmark: the photo shows through the letters ---------- */
.n-k{position:absolute;left:-1px;top:-1px;width:calc(100% + 2px);height:calc(100% + 2px);display:block;overflow:visible}
.n-k-cover{fill:var(--kc,var(--field))}
.n-k-t{font-family:var(--mark);font-weight:var(--mark-w);letter-spacing:var(--mark-track);text-anchor:middle;dominant-baseline:central}
.n-k-wide .n-k-t{font-size:var(--mark-wide)}
.n-k-stack .n-k-t{font-size:var(--mark-stack)}
.n-k-stack{display:none}

/* ---------- footer ---------- */
.n-foot{padding-top:clamp(72px,8vw,120px)}
.n-foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px;padding-bottom:40px;font-size:15px;color:var(--mute)}
.n-foot-top nav{display:flex;flex-wrap:wrap;gap:0 4px}
.n-foot-top nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;color:var(--on-deep)}
.n-foot-top nav a:hover{color:var(--accent)}
.n-foot-k{position:relative;height:clamp(200px,30vw,470px);overflow:hidden;--kc:var(--deep)}
.n-foot-k .n-photo{position:absolute;inset:0}
.n-foot-k .n-photo img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
.n-foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px 28px;font-size:14px;color:var(--mute)}

@media (max-width:1180px){
.n-nav ul{display:none}
.n-hdr .n-lang{display:none}
.n-menu-open{display:inline-flex}
#menu:target ~ .n-hdr .n-menu{display:flex}
#menu:target ~ .n-hdr .n-menu-close{display:inline-flex}
#menu:target ~ .n-hdr .n-menu-open{display:none}
}
@media (min-width:901px) and (max-width:1180px){
.n-hdr-compact .n-nav ul{display:flex}
.n-hdr-compact .n-menu-btn,#menu:target ~ .n-hdr-compact .n-menu-btn,#menu:target ~ .n-hdr-compact .n-menu{display:none}
}
@media (max-width:700px){
.n{font-size:16px}
.n-hdr .n-btn{display:none}
.n-k-wide{display:none}
.n-k-stack{display:block}
.n-foot-k{height:118vw}
}
@media (prefers-reduced-motion:reduce){
.n *,.n *::before,.n *::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}


/* ---------- motion, shared by both pages ----------
   Everything below is progressive: without scroll-driven animations (or with reduced motion) the page is simply still.
   Scroll effects follow the scroll position (they play back if you scroll up) instead of firing once. */
@property --n-fill{syntax:'<number>';inherits:true;initial-value:1}
@keyframes n-rise{from{opacity:0;translate:0 30px}}
@keyframes n-word{from{translate:0 115%}}
[data-split] .n-wm:nth-child(2) .n-w{--wi:1}[data-split] .n-wm:nth-child(3) .n-w{--wi:2}[data-split] .n-wm:nth-child(4) .n-w{--wi:3}
[data-split] .n-wm:nth-child(5) .n-w{--wi:4}[data-split] .n-wm:nth-child(6) .n-w{--wi:5}[data-split] .n-wm:nth-child(n+7) .n-w{--wi:6}
@keyframes n-pop{from{opacity:0;scale:.4}}
@keyframes n-k-up{from{translate:0 60px}}
@keyframes n-k-fill{from{fill-opacity:0}}
@keyframes n-foot-img{from{translate:0 10%;scale:1.14}}

@media (prefers-reduced-motion:no-preference){
@supports (animation-timeline:view()){
/* fade-and-rise as each block enters the screen */
[data-reveal]{animation:n-rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
/* headings rise word by word out of their line boxes */
[data-split]{view-timeline:--split block}
[data-split] .n-w{animation:n-word linear both;animation-timeline:--split;animation-range:cover calc(var(--wi,0) * 1.5%) cover calc(18% + var(--wi,0) * 1.5%)}
/* footer: НЕБО letters rise and fill in one by one, and the photo settles behind them */
.n-foot-k{view-timeline:--foot block}
.n-foot-k .n-k-t{animation:n-k-up linear both;animation-timeline:--foot;animation-range:entry 0% entry 80%}
.n-foot-k tspan{animation:n-k-fill linear both;animation-timeline:--foot;animation-range:entry calc(var(--ti,0) * 12%) entry calc(40% + var(--ti,0) * 12%)}
.n-foot-k tspan:nth-child(2){--ti:1}.n-foot-k tspan:nth-child(3){--ti:2}.n-foot-k tspan:nth-child(4){--ti:3}
.n-foot-k .n-k-stack .n-k-t + .n-k-t tspan:nth-child(1){--ti:2}.n-foot-k .n-k-stack .n-k-t + .n-k-t tspan:nth-child(2){--ti:3}
.n-foot-k .n-photo img{animation:n-foot-img linear both;animation-timeline:--foot;animation-range:entry 0% entry 100%}
}
}