@font-face {
  font-family: Onest;
  src: url('../fonts/Onest-Regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --lvh: 1vh;   /* 1% of the viewport with the browser bars retracted: constant while a mobile URL bar moves */
  color-scheme: dark;
  --ink: #040100;
  --view-height: calc(100 * var(--lvh));
  --stage-height: calc(100 * var(--lvh));
  --scroll-distance: calc(100 * var(--lvh));
  --second-scroll: calc(28 * var(--lvh));
  --art-scale: 1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
@supports (height: 1lvh) { :root { --lvh: 1lvh; } }
html { background: var(--ink); scrollbar-width: none; overflow-x: clip; }
body { overflow-x: clip; }
html::-webkit-scrollbar { display: none; }
body { margin: 0; background: var(--ink); color: #fff; font-family: Onest, sans-serif; font-weight: 400; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
p, h1, h2 { margin: 0; font-weight: 400; }
img { display: block; }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link:focus { position: fixed; top: 16px; left: 16px; z-index: 20; padding: 12px 18px; color: #fff; background: #040100; outline: 2px solid #fff; }

/* The 1886 × 1060 Figma artboard is scaled as a single composition. */
.stage { position: relative; isolation: isolate; overflow: clip; }
.scene { position: relative; height: var(--view-height); overflow: hidden; background: #170c06; }
.art-position { position: absolute; width: 1886px; height: 1060px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--art-scale)); }
.art-world { position: absolute; inset: 0; transform-origin: 943px 530px; }
.painting { position: absolute; left: -161px; top: -90px; width: 2208px; height: 1243px; max-width: none; object-fit: cover; transform-origin: 50% 50%; }
.audience { position: absolute; left: -665px; top: -450px; width: 3216px; height: 1810px; max-width: none; object-fit: cover; filter: blur(3px); transform-origin: 50% 48%; }
.vignette {
  position: absolute; left: -389px; top: -217px; width: 2663px; height: 1496px;
  background: radial-gradient(ellipse 1511.5px 849.11px at center, #fff 0%, #cbc3c1 25%, #b2a6a2 37.5%, #988883 50%, #7e6a63 62.5%, #644c44 75%, #4b2f25 87.5%, #3e2016 93.75%, #311106 100%);
  mix-blend-mode: multiply;
}
.title-correction { position: relative; display: inline-block; }
.title-correction::after { content: ''; position: absolute; left: 0.5em; right: -.08em; top: 55%; height: .09em; background: #ff254d; transform: rotate(-12deg); border-radius: 2px; }
.title-correction .replacement { position: absolute; left: .65em; bottom: .80em; color: #ff254d; font-size: .85em; font-style: italic; transform: rotate(-8deg); }
.throw-trigger { position: absolute; inset: 7% 11% 20%; z-index: 1; appearance: none; border: 0; border-radius: 0; background: transparent; cursor: pointer; }
.throw-trigger:focus-visible { outline: 1px solid rgba(255,255,255,.65); outline-offset: 8px; }

.portal { position: relative; width: 100%; min-height: var(--view-height); background: var(--ink); }
.hole-fill { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
html:not(.enhanced) .hole-fill { display: none; }
.about-content { position: relative; width: 100%; min-height: var(--view-height); }
.photo-curtain { position: absolute; left: 12.725345%; top: calc(var(--view-height) * .06981132); width: 24.284199%; aspect-ratio: 1; overflow: hidden; }
.meetup-photo { width: 100%; height: 100%; object-fit: cover; }
.about-copy { position: absolute; left: 52.81018%; top: calc(var(--view-height) * .56); width: 18.92895%; font-size: clamp(14px, 1.060445vw, 24px); line-height: 1.5; letter-spacing: -.02em; padding-bottom: 32px; }
.about-copy p + p { margin-top: 1.5em; }
.text-line { display: block; overflow: clip; }
.text-word { white-space: nowrap; }
.text-rise { display: block; }
.enhanced .text-rise { opacity: 0; transform: translate3d(0,64px,0); will-change: transform, opacity; }
.brick-canvas { position: absolute; left: 0; top: 0; width: 100%; height: var(--view-height); z-index: 4; pointer-events: none; opacity: 0; will-change: filter, opacity; }
.brick-fallback { position: absolute; left: 0; top: 0; z-index: 4; width: 629px; height: 489px; object-fit: contain; pointer-events: none; transform-origin: center; }

/* One pinned stage, two semantic sections. The last screen rejoins natural scrolling. */
.enhanced .stage { position: sticky; top: 0; height: var(--stage-height); }
.enhanced .scene { position: absolute; top: 0; left: 0; width: 100%; }
.enhanced .about-copy { opacity: 0; }
.enhanced .photo-curtain { clip-path: inset(0 0 0 100%); }
.enhanced .painting, .enhanced .audience, .enhanced .hero-copy, .enhanced .meetup-photo { will-change: transform; }
.paper-tear { position:absolute; top:0; left:0; width:100%; height:var(--view-height); z-index:3; pointer-events:none; }
.hole-fill { display:none; }
.portal > .brick-canvas, .portal > .brick-fallback { z-index: 1; }
.portal > .about-content { z-index: 2; }
.studio-backdrop { position:absolute; inset:0 0 auto; height:var(--view-height); pointer-events:none; z-index:0; opacity:var(--studio-reveal,0); background:radial-gradient(ellipse at 36% 44%,#08131e 0%,#060a10 32%,#040100 74%); }
.studio-canvas { position:absolute; left:0; top:0; width:100%; height:var(--view-height); z-index:1; pointer-events:none; opacity:0; }

@media (max-width: 700px) {
  .throw-trigger { inset: 12% 5% 20%; }
  .photo-curtain { top: 28px; left: auto; right: 24px; width: min(37vw, 185px); }
  .about-copy { top: calc(min(37vw, 185px) + 104px); left: 24px; width: calc(100% - 48px); max-width: 520px; font-size: 17px; line-height: 1.5; padding-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .painting, .audience, .hero-copy, .about-copy, .text-rise, .meetup-photo { will-change: auto !important; }
  .brick-canvas, .brick-fallback { display: none !important; }
}


/* ---------------------------------------------------------------------------------------------------------
   Unified 3D story: one canvas under both screens. The painting, the tear, the brick, the floor and the studio
   are all drawn by story-scene.js; the HTML only supplies copy, vignettes and the (no-WebGL) fallback images. */
.story-canvas { position: absolute; left: 0; top: 0; width: 100%; height: var(--view-height); z-index: 0; pointer-events: none; display: none; }
.story-vignette { position: absolute; left: 0; top: 0; width: 100%; height: var(--view-height); pointer-events: none; mix-blend-mode: multiply; display: none; }
/* the hero vignette of the supplied composition, scaled with the artboard */
.story-vignette--hero {
  background: radial-gradient(ellipse calc(1511.5px * var(--art-scale)) calc(849.11px * var(--art-scale)) at 50% 50%,
    #fff 0%, #cbc3c1 25%, #b2a6a2 37.5%, #988883 50%, #7e6a63 62.5%, #644c44 75%, #4b2f25 87.5%, #3e2016 93.75%, #311106 100%);
}
html.story-3d .story-canvas, html.story-3d .story-vignette { display: block; }
html.story-3d .painting, html.story-3d .audience, html.story-3d .vignette { visibility: hidden; }
html.story-3d .scene { background: transparent; }
html.story-3d .imported-about { background: transparent; }


/* ---------------------------------------------------------------------------------------------------------
   Hero copy: Figma "Home" (39:1248). Everything lives on the 1886 x 1060 artboard, scaled and centred exactly
   like the painting, so the type keeps its place on the picture at any viewport. The menu list is pinned to the
   viewport corner instead. */
.hero-copy { position: absolute; inset: 0; pointer-events: none; }
.hero-art { position: absolute; width: 1886px; height: 1060px; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--art-scale)); }
.hero-title { position: absolute; left: -190px; top: -128px; width: 1020px; display: flex; align-items: baseline; margin: 0; font-style: normal; }
.hero-initial {
  flex: none; box-sizing: content-box; --swash: .8em; --lift: .65em;
  width: 486.685px; padding: var(--lift) var(--swash); margin: calc(-1 * var(--lift)) calc(-41px - var(--swash)) calc(-1 * var(--lift)) calc(-1 * var(--swash));
  font-family: var(--f-script); font-size: 418.353px; line-height: normal; font-style: normal;
  color: transparent; background-image: linear-gradient(29.49deg, #ca2115 22.433%, #b56e55 93.07%);
  -webkit-background-clip: text; background-clip: text;
}
.hero-rest { flex: none; width: 472px; font-family: var(--f-display); font-style: italic; font-size: 73.37px; line-height: 1; color: #fff; }
.hero-dim { color: rgba(255, 255, 255, .2); }
.hero-dim { position: relative; }
/* the red «ки» sits on the faded «ы» as in the Figma frame (487, 231.57 on the artboard = .25em / -.23em from the «ы»); it hangs off the word, so it follows the type */
.hero-ki { position: absolute; left: 50%; top: .3em; width: .927em; height: .512em; max-width: none; transform: translateX(calc(-50% + .18em)); }
.hero-block { position: absolute; left: 356px; top: 365px; width: 479px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; }
.hero-meta { width: 100%; display: flex; flex-direction: column; gap: 16px; font-size: 30px; line-height: normal; letter-spacing: -.6px; opacity: .87; color: #fff; }
.hero-lead { margin: 0; }
.hero-sub { margin: 0; font-size: clamp(15px, 1.05vw, 20px); line-height: 1.4; letter-spacing: -.2px; opacity: .85; max-width: 30em; }
.hero-cta, .menu-cta {
  display: flex; align-items: center; justify-content: center; width: 198px; height: 48px; padding: 0 20px;
  background: #fff; color: #0a0608; text-decoration: none; text-transform: uppercase; white-space: nowrap;
  font: 600 14px/normal var(--f-body); text-align: center; transition: background .25s, color .25s;
}
.hero-cta { width: 272px; height: 68px; padding: 0 28px; font-size: 19px; pointer-events: auto; }   /* larger than the 198 x 48 of the first Figma pass; it sits under the text, wherever the text ends */
.hero-cta:hover, .menu-cta:hover { background: #f0dbd2; }
.hero-cta:focus-visible, .menu-cta:focus-visible, .hero-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.hero-nav {
  position: absolute; right: 2.12vw; bottom: 2.65vw; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(14px, 1.06vw, 22px);
  font: 600 clamp(11px, .742vw, 16px)/normal var(--f-body); text-transform: uppercase; text-align: center; white-space: nowrap; color: #fff; pointer-events: auto;
}
.hero-nav a { color: inherit; text-decoration: none; opacity: .92; transition: opacity .2s; }
.hero-nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: .3em; }
@media (max-width: 700px) {
  /* the whole script П has to fit on a phone: shifted right of the screen edge and scaled to the width that remains */
  .hero-art { left: 80px; top: 15%; transform: scale(var(--hero-m, .33)); transform-origin: 0 0; }
  /* the artboard is scaled down to about a third here: size the button in real pixels */
  .hero-cta { width: calc(200px / var(--hero-m, .34)); height: calc(56px / var(--hero-m, .34)); font-size: calc(16px / var(--hero-m, .34)); padding: 0 calc(16px / var(--hero-m, .34)); }
  .hero-nav { right: 20px; bottom: 24px; gap: 12px; font-size: 11px; }
}

/* The about layer sits on top of the hero in the DOM: let clicks reach the hero's links until the story has moved on. */
.stage[data-scene="hero"] ~ .portal { pointer-events: none; }
.stage:not([data-scene="hero"]) .scene { pointer-events: none; }

/* ---------------------------------------------------------------------------------------------------------
   The second screen's copy is a normal block that scrolls natively over the pinned 3D stage (it used to be translated by
   JavaScript on every scroll event, which is what made it lag on phones). */
/* no background of its own: the pinned stage behind it carries the wallpaper (.about-bg), so nothing shows from below while the transition plays */
.portal { position: relative; z-index: 2; width: 100%; min-height: 0; background: transparent; }
html:not(.enhanced) .portal { background: var(--ink); }

/* wallpapers: large files, so they are only requested once the page has loaded (site-nav.js sets .bg-ready) */
html.bg-ready { --bg-dark: url('../images/bg-dark-2.webp'); --bg-light: url('../images/bg-white-2.webp'); }
/* the dark wallpaper of the second screen fades in over the black the camera has flown into (main.js drives the opacity) */
.about-bg { position: absolute; inset: 0; pointer-events: none; background: #040100 var(--bg-dark, none) center / cover no-repeat; opacity: 0; will-change: opacity; }
html:not(.enhanced) .about-bg { display: none; }