@layer portfolio {
/* Alena Koptsik — unified product portfolio design system. */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/b29632b9bc2d/fonts/golos-cyrillic.woff2') format('woff2');unicode-range:U+0400-052F,U+2DE0-2DFF,U+A640-A69F}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400 900;font-display:swap;src:url('/assets/b29632b9bc2d/fonts/golos-latin.woff2') format('woff2')}
:root{
 --sc-font-display:'Golos Text',sans-serif;--sc-font-text:'Golos Text',sans-serif;--sc-font-mono:'Golos Text',sans-serif;
 --sc-canvas:#0b0d10;--sc-surface:#191e26;--sc-ink:#f7f7f4;--sc-ink-soft:#c0c5cf;--sc-accent:#f7f7f4;--sc-accent-ink:#0b0d10;
 --page-width:1280px;--page-inset:40px;--grid-columns:12;--grid-gap:24px;
 --sc-gutter:max(var(--page-inset),calc((100vw - var(--page-width))/2));
 --content-width:min(calc(100vw - var(--page-inset)*2),var(--page-width));
 --grid-track:calc((var(--content-width) - (var(--grid-columns) - 1)*var(--grid-gap))/var(--grid-columns));
 --space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--space-5:40px;--space-6:48px;--space-8:64px;--space-10:80px;--space-12:96px;
 --line:#d6d7d5;--button-primary:#171c27;--sc-r-sm:4px;--sc-r-md:8px;--sc-r-lg:12px;
}
html{scroll-behavior:auto}body{font-size:16px;font-weight:400;line-height:1.6;letter-spacing:0}
body,button,input{font-feature-settings:'zero' 0}h1,h2,h3,h4,p,figure{margin:0}
h1,h2,h3,h4{font-family:var(--sc-font-text);font-weight:500;letter-spacing:-.035em;line-height:1.12;text-wrap:balance}
h1{font-size:clamp(48px,5.4vw,80px)}h2{font-size:clamp(36px,3.7vw,56px)}h3{font-size:clamp(28px,2.5vw,40px)}h4{font-size:28px}
p{max-width:60ch;text-wrap:pretty}em{font-style:normal;font-weight:inherit}img{height:auto}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}
a{color:inherit;transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease}button{transition:color 160ms ease,background-color 160ms ease,border-color 160ms ease}
a:not([data-slot]):focus-visible,summary:focus-visible,[tabindex]:not([data-slot]):focus-visible{outline:3px solid var(--sc-accent);outline-offset:4px}
section{scroll-margin-top:24px}[hidden]{display:none!important}.dark{background:#0b0d10;color:#f7f7f4}
.paper{--sc-canvas:#f2efe8;--sc-surface:#fff;--sc-ink:#171c27;--sc-ink-soft:#565d69;--sc-accent:#171c27;--sc-accent-ink:#fff;background:#f2efe8;color:var(--sc-ink)}
.sc-label{font-size:12px;font-weight:500;line-height:1.5;letter-spacing:.06em}.case-meta{margin-top:16px;font-size:13px;line-height:1.65;color:var(--sc-ink-soft)}

/* Actions: filled, outlined, segmented. */
.role-switch,.comparison-switch{}

/* Shared page rails run through header, chapters and footer. */
.skip-link{position:fixed;top:16px;left:16px;z-index:1000;padding:12px 20px;border-radius:8px;background:#fff;color:#171c27;transform:translateY(-180%)}.skip-link:focus{transform:none}
body:not(.full-case-page) .masthead::before{content:"";position:absolute;inset:0 0 auto;height:120px;z-index:-1;background:linear-gradient(180deg,#00000099 0%,#00000066 45%,transparent 100%);pointer-events:none}
.masthead{position:fixed;top:0;left:0;z-index:60;width:100%;padding:24px var(--sc-gutter);display:flex;align-items:center;justify-content:space-between;gap:24px;color:#f7f7f4}
.identity{display:inline-flex;align-items:center;gap:12px;text-decoration:none}.identity>.headshot{flex:none;width:48px;height:48px;object-fit:cover;border-radius:50%}
.identity-text{font-size:16px;font-weight:500;line-height:1.5}.identity-text>span{display:block;font-size:12px;font-weight:400;color:#c0c5cf}
.masthead nav{display:flex;gap:8px;padding:4px;border:1px solid #ffffff20;border-radius:10px;background:#0b0d10e8}

/* Burger: a native <details>, so the menu opens with JavaScript switched off too. */
.masthead-menu{display:none;position:relative}
/* The sheet is a descendant of the masthead, so it stacks inside it: the header own
   controls must sit above the panel to stay usable while the menu is open. */
.masthead .identity,.masthead .masthead-menu>summary,.masthead .language-switch{position:relative;z-index:60}
.masthead-menu>summary{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--sc-r-md);list-style:none;cursor:pointer}
.masthead-menu>summary::-webkit-details-marker{display:none}
.masthead-menu>summary:focus-visible{outline:3px solid var(--sc-accent);outline-offset:2px}
.burger,.burger::before,.burger::after{display:block;width:20px;height:2px;border-radius:2px;background:#f7f7f4;transition:transform 180ms ease,opacity 180ms ease}
.burger{position:relative}
.burger::before,.burger::after{content:"";position:absolute;left:0}
.burger::before{top:-6px}.burger::after{top:6px}
.masthead-menu[open] .burger{background:transparent}
.masthead-menu[open] .burger::before{transform:translateY(6px) rotate(45deg)}
.masthead-menu[open] .burger::after{transform:translateY(-6px) rotate(-45deg)}
/* The open menu is a full screen with everything centred, the way a phone menu reads. */
.masthead .masthead-menu-panel{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:0;padding:calc(var(--masthead-h,94px) + 10px) 20px 32px;background:#0b0d10;overflow-y:auto}
.masthead .masthead-menu-panel a{justify-content:center!important;width:auto;height:auto!important;min-height:52px;padding:8px 20px!important;border-radius:0!important;font-size:28px;letter-spacing:-.02em}
/* Resume is a document, not a chapter, so it sits below a rule. */
.masthead .masthead-menu-panel .masthead-menu-cv{margin-top:24px;min-height:48px;padding:0 22px!important;border:1px solid #ffffff5c;border-radius:999px!important;font-size:16px;font-weight:500;letter-spacing:0}
.masthead-menu[open]::before{content:"";position:fixed;inset:0;z-index:50;background:#00000080;backdrop-filter:blur(3px)}
html:has(.masthead-menu[open]),body:has(.masthead-menu[open]){overflow:hidden}
/* The masthead is absolute, so a page scrolled even slightly would carry the close
   button off-screen while the fixed sheet stayed — the menu became a trap on touch,
   where there is no Escape. Pin the header for as long as the sheet is open. */
html:has(.masthead-menu[open]) .masthead{position:fixed;top:0}
.hero-copy{bottom:16%;max-width:600px}.hero-copy p{margin-top:24px;max-width:36ch;font-size:18px;line-height:1.65}
/* Proof line: the numbers a scanning recruiter needs before the manifesto convinces anyone. */
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 28px;margin:28px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.5;color:#c0c5cf}
.hero-proof li{display:flex;align-items:baseline;gap:8px}
.hero-proof strong{font-size:19px;font-weight:500;letter-spacing:-.02em;color:#f7f7f4;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'zero' 0}
.hero-margin{position:absolute;right:var(--sc-gutter);bottom:32px;z-index:25;font-size:13px;line-height:1.5;color:#f7f7f4;opacity:.65;text-shadow:0 1px 8px #0b0d10cc;cursor:default;pointer-events:none}
.hero-scrim{background:linear-gradient(90deg,#0b0d10f5 0%,#0b0d10e8 30%,#0b0d10c9 43%,transparent 76%)}.hero .sc-stage__poster{object-position:58% center}
.turn [data-sc-stage]{display:grid;place-items:center;padding:48px var(--sc-gutter)}.turn-grid{position:absolute;inset:0 var(--sc-gutter);background:repeating-linear-gradient(90deg,#b8bdc233 0 1px,transparent 1px calc(var(--grid-track) + var(--grid-gap)));border-right:1px solid #b8bdc233}
.turn-copy{position:relative;max-width:800px;padding-block:40px;text-align:center}.turn-copy h2{font-size:clamp(40px,4.4vw,64px)}.turn-copy p{margin:24px auto 0;font-size:18px}.model-line{margin:40px auto 0;display:flex;justify-content:center;align-items:center;gap:24px;font-size:14px;font-weight:500}.model-line i{width:64px;height:1px;background:#8f98ae}.model-line span{color:var(--sc-ink-soft)}.model-line span:last-child{color:var(--sc-ink)}

/* Flow sections: twelve explicit columns on a 1280px content area. */
.case-materials,.solo{padding:80px var(--sc-gutter) 96px;border-top:1px solid var(--line)}
.uni-overview,.redesign-comparison,.section-heading,.solo-list,.video-material{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap)}
.uni-overview{align-items:center;margin-bottom:96px}.uni-overview>div{grid-column:span 5}.uni-overview>figure{grid-column:7/-1}.uni-overview h3{margin-top:32px;font-size:clamp(28px,2.7vw,40px)}.case-path{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.redesign-comparison{align-items:start;margin-bottom:48px}.comparison-intro{grid-column:span 5}.comparison-panels{grid-column:7/-1;min-width:0}.comparison-intro h3{margin:16px 0 24px;font-size:clamp(36px,3.6vw,56px)}.comparison-purpose{margin-bottom:32px;font-size:16px;line-height:1.7}.comparison-intro>p:last-child{margin-top:24px;color:#565d69;font-size:14px;max-width:37ch}
.comparison-switch{}.comparison-panel+.comparison-panel{margin-top:32px}.comparison-panel[hidden]+.comparison-panel{margin-top:0}
.wipe{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;border-radius:8px;box-shadow:0 0 0 1px #17233b1a}.wipe img{display:block;width:100%;height:100%;object-fit:contain}.wipe .wipe-after{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wipe)) 0 0)}
.wipe-line{position:absolute;top:0;bottom:0;left:var(--wipe);width:2px;background:#171c27;transform:translateX(-1px);pointer-events:none}.wipe-line i{position:absolute;left:50%;top:50%;width:40px;height:40px;display:grid;place-items:center;transform:translate(-50%,-50%);border:2px solid #fff;border-radius:50%;background:#171c27;color:#fff;font-size:20px;font-style:normal}
.redesign-results{display:flex;justify-content:space-between;align-items:center;gap:40px;padding-top:32px;border-top:1px solid var(--line)}.metrics{display:flex;gap:40px;margin-top:24px}.redesign-results .metrics{margin-top:0}.metric{max-width:200px}.metric strong{display:block;font-size:40px;font-weight:500;line-height:1.1;letter-spacing:-.045em;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:'zero' 0}.metric-label{display:block;margin-top:8px;font-size:14px}.metric small{display:block;margin-top:8px;font-size:11px;line-height:1.5;color:#565d69}

/* The asset defines its ratio, never a generic fixed-height frame. */
.image-link{display:block;width:100%;border-radius:8px}.image-link img{display:block;width:100%;height:auto;border-radius:8px}.image-link:hover{outline:2px solid #171c2759;outline-offset:4px}
.material-group{margin:0 0 80px}.material-group>h3{margin-bottom:24px}.material-explanation{margin-bottom:32px;max-width:68ch;font-size:16px;color:#565d69}
.material-gallery{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--grid-gap);align-items:start}.material-gallery>figure{grid-column:span 6;min-width:0}.material-gallery img{width:100%;height:auto}.material-gallery figcaption,.rail-spread figcaption,.solo-case figcaption{margin-top:16px;font-size:13px;line-height:1.5;color:#565d69}
.material-gallery--team>figure:first-child,.material-gallery--team>figure:nth-child(2){grid-column:1/-1}.material-gallery--team>figure:last-child{grid-column:4/10}
.material-gallery--welcome-agent>figure,.material-gallery--welcome-manager>figure{grid-column:1/-1}
.material-gallery--welcome-shared>figure:nth-child(-n+3),.material-gallery--welcome-shared>figure:nth-last-child(-n+2){grid-column:1/-1}.material-gallery--welcome-shared>.material-figure--portrait{grid-column:span 4}
.material-gallery--context>figure{grid-column:1/-1}.material-gallery--context>.material-figure--portrait{grid-column:4/10}
/* The link after the accordion inherited no spacing: every other "полный кейс"
   button gets its air from the block above it, and the accordion has none to give.
   The island's JSON props tag sits between them, so this needs ~ and not +. */
.material-details ~ .full-case-link{margin-top:var(--space-4)}
.material-details{margin-top:64px;border-top:1px solid #c5c9cf;border-bottom:1px solid #c5c9cf}.material-details summary{display:flex;justify-content:space-between;align-items:center;gap:24px;min-height:72px;padding:20px 0;cursor:pointer;list-style:none;font-size:16px;font-weight:500}.material-details summary::-webkit-details-marker{display:none}.material-details summary::after{content:'+';flex:none;display:grid;place-items:center;width:40px;height:40px;border:1px solid #a9adb4;border-radius:8px;background:#fff;font-size:24px;font-weight:400}.material-details[open] summary::after{content:'−'}.material-details summary:hover{text-decoration:underline;text-underline-offset:5px}.material-details>.material-gallery{padding:24px 0 48px}
.video-material{align-items:center;margin-bottom:32px}.video-material>div{grid-column:span 4}.video-material video{grid-column:5/-1;display:block;width:100%;height:auto;border-radius:8px}.video-material h3{margin:16px 0 24px}

/* UniPrompt horizontal chapter. */
.case-heading{position:absolute;top:8%;left:var(--sc-gutter);right:var(--sc-gutter);z-index:2}.uniprompt [data-sc-stage]{border-top:1px solid var(--line)}.uniprompt .case-heading h2{font-size:clamp(32px,3.5vw,52px)}.uniprompt .case-heading>p:not(.case-meta){margin-top:16px;max-width:72ch;font-size:16px}
.rail{position:absolute;top:40%;left:0;gap:64px;width:max-content;padding-inline:var(--sc-gutter);align-items:start}.rail-spread{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);width:var(--content-width);flex:none;align-items:center}.rail-spread>figure{grid-column:span 8;min-width:0}.rail-spread img{width:100%;height:auto}.rail-notes{grid-column:10/-1}.rail-notes h3{margin-bottom:16px;color:var(--sc-ink-soft);font-size:13px;font-weight:500;letter-spacing:.03em}.rail-notes h4{margin-bottom:24px;font-size:28px}.rail-notes p{font-size:14px;line-height:1.65}.silence{height:40vh;display:grid;place-items:center}.silence>span{width:1px;height:48px;background:#a9adb4}

/* Role copy and product occupy separate grid cells. */
.peak [data-sc-stage]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;gap:48px var(--grid-gap);align-items:center;padding:48px var(--sc-gutter) 64px;border-top:1px solid var(--line)}
.peak .case-heading{position:relative;inset:auto;grid-column:1/7;grid-row:1}.peak .case-heading h2{font-size:28px}.peak .case-meta{margin-top:8px}
.role-switch{position:relative;grid-column:8/-1;grid-row:1;justify-self:end}
.role-visual{position:relative;grid-column:6/-1;grid-row:2;width:100%;min-width:0}.role-visual img{width:100%;height:auto}
.peak .role-copy{position:relative;inset:auto;grid-column:1/5;grid-row:2;width:auto;max-width:none;text-align:left}.role-copy h3{font-size:clamp(32px,3.2vw,48px)}.role-copy>p{margin-top:24px;font-size:16px;line-height:1.6}.role-copy .role-outcome{font-size:14px;color:#565d69}.role-copy .metric{max-width:280px}.role-copy .metric strong{font-size:48px;color:#171c27}
.peak[data-role=manager] .role-visual{grid-column:1/8}.peak[data-role=manager] .role-copy{grid-column:9/-1}.peak-scrim{display:none}.welcome-materials{padding-top:48px}.case-logic{max-width:34ch;margin-bottom:64px;font-size:clamp(26px,2.7vw,40px);font-weight:500;line-height:1.25;letter-spacing:-.025em}

/* Independent projects and system materials. */
.section-heading{margin-bottom:48px;align-items:end}.section-heading .sc-label{grid-column:1/-1}.section-heading h2{grid-column:span 7}.section-heading>p:last-child{grid-column:9/-1;font-size:16px}.solo-case{grid-column:span 6;min-width:0}.solo-case h3{margin:24px 0 16px;font-size:28px}.solo-case h3 a{display:inline-flex;align-items:center;gap:16px;min-height:44px;text-decoration:none}.solo-case h3 a::after{content:'↗';font-size:24px;color:#171c27}.solo-case h3 a:hover{text-decoration:underline;text-underline-offset:6px}.solo-case .solo-description{font-size:16px}.solo-case .case-meta{font-size:13px}
.range [data-sc-stage]{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:center;padding:48px var(--sc-gutter);border-top:1px solid var(--line)}.system-visual{grid-column:span 7;min-width:0}.range-copy{position:relative;grid-column:9/-1;min-width:0}.range-copy h2{font-size:clamp(30px,3vw,44px)}.range-copy p{margin:24px 0;font-size:15px}.system-gallery{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.system-gallery>figure{grid-column:span 3}.system-gallery>figure:first-child{grid-column:1/-1}.system-gallery>figure:nth-child(2){grid-column:span 2}.system-gallery>figure:nth-child(3){grid-column:span 3}.system-gallery figcaption{font-size:12px;margin-top:12px}.craft-list{list-style:none;margin:0;padding:0;font-size:13px}.craft-list li{padding:12px 0;border-bottom:1px solid var(--line)}

/* Dated chronology: recruiters look for it on the page, not only in the CV.
   Lamp mechanic after uxui.pw's v-timeline-lamp: a dashed track, an accent line
   that fills with scroll, markers that light as they are reached, and a bulb that
   comes on at "now". Native scroll-driven CSS, so the engine stays the only clock
   in JS. Where scroll-driven animation is unsupported the track renders fully lit,
   which is the honest static state, not a broken one. */
.experience{padding:80px var(--sc-gutter) 96px;border-top:1px solid var(--line)}
.experience-track{position:relative;padding-left:36px}
.experience-rail,.experience-fill{position:absolute;left:4px;top:11px;width:2px}
.experience-rail{bottom:12px;background-image:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 4px,transparent 4px,transparent 8px)}
.experience-fill{height:calc(100% - 23px);background:var(--sc-accent);transform-origin:top}
.experience-list{margin:0;padding:0;list-style:none}
.experience-item{position:relative;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,4fr) minmax(0,6fr);gap:var(--grid-gap);align-items:baseline;padding-bottom:40px}
.experience-item::before{content:'';position:absolute;left:-36px;top:6px;width:10px;height:10px;border-radius:50%;background:var(--sc-accent);box-shadow:0 0 16px 6px #171c271f}
.experience-period{font-size:13px;line-height:1.65;color:var(--sc-accent);font-variant-numeric:lining-nums tabular-nums}
.experience-role{font-size:15px;line-height:1.5;color:var(--sc-ink-soft)}
.experience-role strong{display:block;font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--sc-ink)}
.experience-note{font-size:15px;line-height:1.65;color:var(--sc-ink-soft)}
.experience-now{position:relative;display:flex;align-items:center;min-height:24px;font-size:13px;color:var(--sc-ink-soft)}
.experience-now span{margin-left:4px}
.experience-lamp{position:absolute;left:-43px;top:50%;translate:0 -50%;width:24px;height:24px;color:var(--sc-ink-soft)}
.experience-lamp-core{fill:var(--sc-accent);filter:drop-shadow(0 0 5px #171c2799)}
@supports (animation-timeline:view()){
 .experience-track{view-timeline:--experience-track block}
 .experience-fill{animation:experience-fill linear both;animation-timeline:--experience-track;animation-range:entry 85% exit 45%}
 @keyframes experience-fill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
 /* Each marker runs on its own view timeline, so it lights where it actually sits
    rather than at a percentage guessed from the row count. */
 .experience-item::before{animation:experience-dot linear both;animation-timeline:view(block auto 56%);animation-range:entry 0% entry 100%}
 @keyframes experience-dot{from{background:var(--line);box-shadow:0 0 0 0 #171c2700}to{background:var(--sc-accent);box-shadow:0 0 16px 6px #171c271f}}
 .experience-period{animation:experience-period linear both;animation-timeline:view(block auto 56%);animation-range:entry 0% entry 100%}
 @keyframes experience-period{from{color:var(--sc-ink-soft)}to{color:var(--sc-accent)}}
 .experience-lamp-core{animation:experience-lamp linear both;animation-timeline:--experience-track;animation-range:entry 85% exit 45%}
 @keyframes experience-lamp{0%,72%{opacity:0}100%{opacity:1}}
 .experience-now span{animation:experience-now linear both;animation-timeline:--experience-track;animation-range:entry 85% exit 45%}
 @keyframes experience-now{0%,82%{opacity:.55}100%{opacity:1}}
}
@media(prefers-reduced-motion:reduce){.experience-fill,.experience-item::before,.experience-period,.experience-lamp-core,.experience-now span{animation:none}}

/* Closing chapter: the dark bookend that answers the dark hero. Content-sized, not
   pinned, so the photo crops to the section and leaves no empty tail after it. */
.commitment{padding:clamp(96px,9vw,120px) var(--sc-gutter) 0;border-top:1px solid #222834}
.closing-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--grid-gap);align-items:stretch}
.closing-copy{grid-column:1/7;display:flex;flex-direction:column;justify-content:center}
.closing-intro{margin-bottom:24px;font-size:16px;color:var(--sc-ink-soft)}
.closing-copy h2{font-size:clamp(44px,5vw,72px)}
.closing-links{margin:40px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px}
/* Brand marks carry their own meaning, so they need no underline; the email stays a
   text link because a recruiter copies it rather than clicks it. */
.closing-icon{position:relative;display:inline-flex;width:28px;height:28px;color:var(--sc-ink);opacity:.7;transition:opacity 200ms ease}
.closing-icon svg{display:block;width:100%;height:100%}
.closing-icon::after{content:"";position:absolute;inset:-8px}
.closing-icon:hover,.closing-icon:focus-visible{opacity:1}
.closing-email a{display:inline-flex;align-items:center;min-height:44px;font-size:clamp(20px,1.7vw,24px);line-height:1.35;color:var(--sc-ink);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;text-decoration-color:#5c6472}
.closing-email a:hover{text-decoration-color:currentColor}
.contact-portrait{grid-column:8/-1;position:relative;min-height:clamp(320px,34vw,460px)}
.contact-portrait .headshot{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;border-radius:10px}
.commitment footer{margin-top:clamp(64px,7vw,96px);display:flex;align-items:center;gap:32px;padding:24px 0 clamp(40px,4vw,56px);border-top:1px solid #222834;font-size:13px;color:var(--sc-ink-soft)}
.commitment footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--sc-ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.commitment .footer-links{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-left:auto}
.image-viewer{width:min(96vw,1600px);max-width:96vw;max-height:94svh;padding:0;border:1px solid #c5c9cf;border-radius:12px;background:#f2efe8;color:#171c27}.image-viewer::backdrop{background:#0b0d10d9}.viewer-scroll{max-height:calc(94svh - 82px);padding:24px;overflow:auto}.viewer-scroll img{display:block;max-width:none;width:auto;height:auto;margin:auto}body:has(.image-viewer[open]){overflow:hidden}

/* Tablet: eight columns. */
@media(min-width:861px) and (max-width:1100px){
 :root{--page-inset:32px;--grid-columns:8}
 .uni-overview,.redesign-comparison,.section-heading,.solo-list,.video-material,.rail-spread,.peak [data-sc-stage],.range [data-sc-stage],.material-gallery{grid-template-columns:repeat(8,minmax(0,1fr))}
 .uni-overview>div,.comparison-intro,.section-heading h2,.solo-case{grid-column:span 4}.uni-overview>figure,.comparison-panels,.section-heading>p:last-child{grid-column:5/-1}
 .rail-spread>figure{grid-column:span 5}.rail-notes{grid-column:6/-1}.rail-notes h4{font-size:24px}
 .peak .case-heading{grid-column:1/5}.role-switch{grid-column:5/-1}.peak .role-copy,.peak[data-role=manager] .role-visual{grid-column:1/5}.role-visual,.peak[data-role=manager] .role-copy{grid-column:5/-1}.role-copy h3{font-size:36px}.role-copy>p{font-size:14px}
 .material-gallery>figure{grid-column:span 4}.material-gallery--team>figure:first-child,.material-gallery--team>figure:nth-child(2),.material-gallery--welcome-agent>figure,.material-gallery--welcome-manager>figure,.material-gallery--context>figure,.material-gallery--welcome-shared>figure:nth-child(-n+3),.material-gallery--welcome-shared>figure:nth-last-child(-n+2){grid-column:1/-1}
 .material-gallery--team>figure:last-child,.material-gallery--context>.material-figure--portrait{grid-column:3/7}.video-material>div{grid-column:span 3}.video-material video{grid-column:4/-1}
 .system-visual{grid-column:span 4}.range-copy{grid-column:5/-1}.system-gallery{grid-template-columns:repeat(5,minmax(0,1fr))}.system-gallery>figure:first-child{grid-column:1/-1}.system-gallery>figure:nth-child(2){grid-column:span 2}.system-gallery>figure:nth-child(3){grid-column:span 3}
 .closing-copy{max-width:calc(var(--grid-track)*5 + var(--grid-gap)*4)}.contact-portrait{width:calc(var(--grid-track)*2 + var(--grid-gap))}
}

/* Mobile: four columns. Screens remain full-width, not thumbnail grids. */
@media(max-width:860px){
 :root{--page-inset:24px;--grid-columns:4;--grid-gap:16px}
 h1{font-size:clamp(44px,8.8vw,68px)}h2{font-size:clamp(32px,6vw,44px)}h3{font-size:28px}
 .masthead{padding-top:16px;gap:16px}.identity{gap:8px}.identity>.headshot{width:40px;height:40px}.identity-text{font-size:13px}.identity-text>span{font-size:10px}.masthead nav{gap:0;padding:0;border:0}
 .hero-copy{bottom:16%;max-width:540px}.hero-copy p{font-size:16px;margin-top:24px}.hero-proof{margin-top:20px;gap:6px 20px;font-size:13px}.hero-proof strong{font-size:17px}.hero-margin{right:auto;left:var(--sc-gutter);bottom:24px;font-size:11px}.hero-scrim{background:linear-gradient(0deg,#0b0d10fc 0%,#0b0d10e8 40%,#0b0d1099 58%,transparent 88%)}.hero .sc-stage__poster{object-position:62% center}
 .turn [data-sc-stage]{padding-block:32px}.turn-copy h2{font-size:clamp(36px,7.5vw,52px)}.turn-copy p{font-size:16px}.desktop-break{display:none}.model-line{gap:16px;font-size:12px}.model-line i{width:24px}
 .case-materials,.solo{padding-block:56px 64px}.uni-overview,.redesign-comparison,.section-heading,.solo-list,.video-material{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--grid-gap)}
 .uni-overview>div,.uni-overview>figure,.comparison-intro,.comparison-panels,.section-heading h2,.section-heading>p:last-child,.solo-case,.video-material>div,.video-material video{grid-column:1/-1}
 .uni-overview{margin-bottom:64px}.uni-overview h3{margin-top:24px;font-size:30px}.case-path{margin-top:24px;gap:12px}.comparison-intro h3{font-size:40px}.comparison-purpose{margin-bottom:24px;font-size:15px}.comparison-intro>p:last-child{max-width:none;margin-top:16px;font-size:13px}.comparison-switch{}.comparison-panels{max-width:600px;width:100%;justify-self:center}
 .redesign-results{align-items:start;flex-direction:column;gap:32px}.metrics{gap:32px}.metric strong{font-size:36px}.metric-label{font-size:13px}.metric small{font-size:11px}
 .material-group{margin-bottom:56px}.material-group>h3{margin-bottom:16px}.material-explanation{font-size:15px;margin-bottom:24px}.material-gallery{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px var(--grid-gap)}
 .material-gallery>figure,.material-gallery--team>figure:last-child,.material-gallery--context>.material-figure--portrait,.material-gallery--welcome-shared>.material-figure--portrait{grid-column:1/-1}.material-gallery figcaption{font-size:12px;margin-top:12px}.material-details{margin-top:40px}.material-details summary{min-height:72px;font-size:14px;gap:16px}.material-details>.material-gallery{padding:16px 0 32px}.video-material h3{font-size:28px}
 .case-heading{top:6%}.uniprompt .case-heading h2{font-size:32px}.uniprompt .case-heading>p:not(.case-meta){margin-top:12px;max-width:50ch;font-size:14px}.uniprompt .case-meta{margin-top:12px;font-size:12px}.rail{top:39%;gap:32px}.rail-spread{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px var(--grid-gap)}.rail-spread>figure,.rail-notes{grid-column:1/-1}.rail-notes h3{margin-bottom:8px;font-size:12px}.rail-notes h4{margin-bottom:12px;font-size:26px}.rail-notes p{font-size:14px;max-width:54ch}
 .closing-grid{grid-template-columns:1fr;gap:32px}.closing-copy{grid-column:1/-1;order:2}.contact-portrait{grid-column:1/-1;order:1;min-height:clamp(240px,58vw,340px)}.closing-email a{font-size:19px}.closing-icon{width:26px;height:26px}.closing-icon::after{inset:-9px}.commitment{padding-top:clamp(64px,12vw,96px)}
 .peak [data-sc-stage]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto minmax(0,1fr) auto;gap:16px;padding:24px var(--sc-gutter) 32px}
 .peak .case-heading{grid-column:1/-1;grid-row:1}.peak .case-heading h2{font-size:24px}.peak .case-meta{font-size:11px;margin-top:8px}.role-switch{grid-column:1/-1;grid-row:2;justify-self:start}
 .role-visual,.peak[data-role=manager] .role-visual{grid-column:1/-1;grid-row:3;align-self:center;width:100%;max-width:min(100%,640px,calc((100svh - 470px)*1.65));justify-self:center}.peak .role-copy,.peak[data-role=manager] .role-copy{grid-column:1/-1;grid-row:4;position:relative;inset:auto;align-self:end;max-width:none}.role-copy h3{font-size:32px}.role-copy>p{margin-top:12px;font-size:14px;max-width:58ch}.role-copy .role-outcome{font-size:13px}.role-copy .metrics{margin-top:16px}.role-copy .metric{max-width:none;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}.role-copy .metric strong{grid-row:1/3;font-size:36px}.role-copy .metric-label{margin-top:0;font-size:12px}.role-copy .metric small{margin-top:4px;font-size:10px}
 .case-logic{margin-bottom:40px;font-size:28px}.section-heading{margin-bottom:40px;gap:24px}.section-heading>p:last-child{font-size:15px}.solo-list{gap:48px}.solo-case h3{font-size:28px;margin-top:16px}.solo-case .solo-description{font-size:15px}
 .range [data-sc-stage]{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;align-content:center;gap:32px;padding:24px var(--sc-gutter)}.system-visual,.range-copy{grid-column:1/-1}
 .system-gallery{display:flex;gap:16px;overflow-x:auto;padding:4px 4px 16px;margin-inline:-4px;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-color:#9097a5 transparent}.system-gallery>figure{flex:0 0 88%;scroll-snap-align:start}.system-gallery .image-link{width:fit-content;max-width:100%}.system-gallery img{height:176px;width:auto;max-width:100%;object-fit:contain;object-position:left center}.system-gallery figcaption{font-size:11px;margin-top:8px}
 .range-copy h2{font-size:32px}.range-copy p{font-size:14px;margin:16px 0}.craft-list{font-size:12px}.craft-list li{padding-block:8px}
 .commitment footer{flex-wrap:wrap;gap:4px 16px;padding-top:16px;font-size:12px}.commitment footer span:nth-child(2){display:none}.commitment .footer-links{gap:0 4px;margin-left:0}.viewer-scroll{padding:16px}
 .experience{padding:48px var(--sc-gutter) 56px}.experience-track{padding-left:28px}.experience-item{grid-template-columns:1fr;gap:4px;padding-bottom:32px}.experience-item::before{left:-28px}.experience-lamp{left:-35px}.experience-role strong{font-size:18px}.experience-role,.experience-note{font-size:14px}
}
@media(max-width:600px){.masthead{flex-wrap:wrap;row-gap:12px}.masthead .masthead-nav{margin-left:-8px}}
@media(max-width:400px){:root{--masthead-h:124px}}
@media(max-width:390px){:root{--page-inset:20px}.role-copy h3{font-size:30px}}
@media(max-height:700px) and (max-width:860px){
 .hero-copy{bottom:13%}.hero-copy h1{font-size:44px}.hero-copy p{font-size:14px;margin-top:16px}.hero-proof{margin-top:14px;gap:4px 16px;font-size:12px}.hero-proof strong{font-size:15px}.hero-margin{bottom:12px;font-size:10px}.turn-copy{padding-block:16px}.turn-copy h2{font-size:36px}.turn-copy p{font-size:14px}
 .case-heading{top:4%}.uniprompt .case-heading h2{font-size:28px}.uniprompt .case-heading>p:not(.case-meta){font-size:12px;line-height:1.5;margin-top:8px}.uniprompt .case-meta{font-size:10px;margin-top:8px}.rail{top:40%}.rail-spread{gap:16px}.rail-notes h4{font-size:22px;margin-bottom:8px}.rail-notes p{font-size:12px;line-height:1.5}
 .peak [data-sc-stage]{padding-block:16px;gap:12px}.peak .case-heading h2{font-size:22px}.peak .case-meta{font-size:10px;margin-top:4px}.role-copy h3{font-size:28px}.role-copy>p{font-size:12px;line-height:1.5;margin-top:8px}.role-copy .role-outcome{font-size:11px}.role-copy .metrics{margin-top:12px}.role-copy .metric strong{font-size:32px}.role-copy .metric-label{font-size:11px}.role-copy .metric small{font-size:9px}
 .range [data-sc-stage]{gap:16px;padding-block:16px}.system-gallery img{height:128px}.system-gallery figcaption{font-size:10px}.range-copy h2{font-size:28px}.range-copy p{font-size:12px;margin-block:12px}.craft-list{font-size:11px}.craft-list li{padding-block:6px}
}

/* Reduced motion preserves reading and full access to the pan rail. */
@media(prefers-reduced-motion:reduce){
 .chapter{height:auto!important;min-height:0!important}.chapter [data-sc-stage]{min-height:100svh}.sc-split__i{opacity:1!important;transform:none!important}
 .hero .hero-copy{position:relative;inset:auto;padding:36vh var(--sc-gutter) 96px;max-width:calc(680px + var(--sc-gutter))}.hero [data-sc-stage]{padding:0!important;height:auto}.hero-margin{display:none}
 .uniprompt [data-sc-stage]{min-height:0;height:auto;display:block;padding:64px 0;overflow-x:auto}.uniprompt .case-heading{position:relative;inset:auto;margin:0 var(--sc-gutter) 40px}.rail{position:relative;inset:auto;transform:none!important}.silence{height:16vh}.role-copy,.closing-copy{opacity:1!important;transform:none!important}.peak [data-sc-stage],.range [data-sc-stage]{height:auto;min-height:100svh}.comparison-panel{scroll-margin-top:24px}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){.peak [data-sc-stage]{grid-template-rows:auto auto auto auto;gap:24px;padding-block:32px}.role-visual,.peak[data-role=manager] .role-visual{max-width:640px}}

@media(min-width:861px){.comparison-intro{position:sticky;top:32px}}
.material-gallery--team .material-figure--architecture-newpages{grid-column:1/-1}
.masthead-actions{display:flex;align-items:center;gap:16px}.language-switch{}
@media(max-width:860px){.masthead-actions{gap:8px}.language-switch{}}
@media(max-width:640px){:root{--masthead-h:94px}.masthead{flex-wrap:nowrap;gap:12px}.masthead-actions{width:auto;justify-content:flex-end;gap:8px}.masthead .masthead-nav,.masthead .masthead-cv{display:none!important}.masthead .masthead-menu{display:block}.masthead-actions>.language-switch{display:none}.hero-proof{flex-direction:column;align-items:flex-start;gap:6px}}
@media(max-width:600px){/* Tailwind utilities sit in a later layer, and a layer beats specificity, so these need !important from here — same trick the noscript block already uses. */ .masthead-actions [data-slot=button]{padding-inline:6px!important}.full-case-link{white-space:normal!important;height:auto!important;min-height:44px;padding-block:10px!important;text-align:left}.masthead .masthead-actions .masthead-nav{margin-left:-8px}.masthead-actions .language-switch{flex-shrink:0}}

/* Case entry and comparison: context first, controls next to the material. */
.turn[data-sc-act=flow] [data-sc-stage]{position:relative;height:auto;min-height:0;padding:48px var(--sc-gutter)}
.turn .turn-copy{padding:0}.turn .turn-grid{pointer-events:none}
.uni-intro{padding-top:64px}.uni-overview{align-items:center;row-gap:32px;margin-bottom:40px}
.uni-overview>.uni-summary{grid-column:1/8}.uni-overview>figure{grid-column:8/-1}
.uni-summary .product-context{margin-top:20px;max-width:61ch;font-size:16px;line-height:1.65}
.intro-results{margin-top:24px}.intro-results>.sc-label{color:#565d69}.intro-results .metrics{margin-top:12px;gap:40px}.intro-results .metric{max-width:230px}.intro-results .metric strong{color:#171c27;font-size:44px}
.uni-overview>.uni-stages{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px}.uni-stages h3{margin:0;font-size:28px}
.uni-stages .case-path{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.redesign-comparison{grid-template-columns:repeat(12,minmax(0,1fr));padding-top:32px;border-top:1px solid var(--line);gap:32px var(--grid-gap)}
.comparison-intro{grid-column:1/5;position:static}.comparison-intro h3{font-size:clamp(32px,3vw,44px);margin:12px 0 20px}
.comparison-intro>.comparison-purpose:last-child{margin:0;max-width:none;font-size:16px;line-height:1.65;color:#565d69}
.comparison-workspace{grid-column:5/-1;min-width:0}.comparison-panels{width:100%;max-width:none}.comparison-switch{width:100%}
.wipe-legend{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:10px}
.wipe{height:min(64svh,720px);aspect-ratio:auto;cursor:ew-resize;touch-action:pan-y;user-select:none;border:1px solid #a9adb4;background:#fff;box-shadow:none;isolation:isolate}
.wipe img{width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none;filter:none;opacity:1}
.wipe .wipe-after{position:absolute;inset:0;clip-path:none}.wipe .wipe-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--wipe)) 0 0)}
.wipe-line{z-index:2;width:2px;background:#171c27}.wipe-line i{width:48px;height:48px;font-size:26px;border:3px solid #fff;box-shadow:0 2px 10px #15255240}.wipe-note{font-size:12px;line-height:1.5;color:#565d69;max-width:none}.redesign-results{padding-top:24px}
/* Two stacked creation screens on the left, the resulting Teams list on the right. */
.team-flow-grid{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);align-items:start}.team-flow-forms{display:grid;gap:32px;min-width:0}.team-flow-grid>figure{min-width:0}.team-flow-grid figcaption{margin-top:8px}
@media(min-width:861px) and (max-width:1100px){.uni-overview>.uni-summary{grid-column:1/6}.uni-overview>figure{grid-column:6/-1}}
@media(max-width:860px){
 .turn[data-sc-act=flow] [data-sc-stage]{padding-block:40px}.uni-intro{padding-top:40px}.uni-overview{row-gap:24px;margin-bottom:32px}.uni-overview>.uni-summary,.uni-overview>figure{grid-column:1/-1}.uni-overview>figure{max-width:560px;justify-self:center}
 .uni-summary .product-context{font-size:15px;margin-top:16px}.intro-results{margin-top:20px}.intro-results .metrics{gap:24px}.intro-results .metric{flex:1;min-width:0}.intro-results .metric strong{font-size:40px}.intro-results .metric-label{font-size:13px}.intro-results .metric small{font-size:10px}
 .uni-stages h3{font-size:26px}.uni-stages .case-path{gap:12px}
 .redesign-comparison{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:24px;gap:24px}.comparison-intro,.comparison-workspace{grid-column:1/-1}.comparison-intro>.comparison-purpose:last-child{font-size:15px}.comparison-intro h3{margin:8px 0 16px;font-size:36px}.wipe{height:min(112vw,60svh)}.wipe-line i{width:44px;height:44px;font-size:24px}
}
@media(max-width:600px){.uni-stages .case-path{grid-template-columns:1fr}.team-flow-grid{grid-template-columns:1fr;gap:24px}.team-flow-forms{gap:24px}}



/* Fixed shortcut back to the top. Hidden over the closing chapter, which carries its
   own "К началу" link — a floating circle there would only cover the footer. Without
   scroll-driven animation support the arrow simply stays visible. */
.to-top{position:fixed;right:max(16px,calc(var(--sc-gutter) - 60px));bottom:24px;z-index:70;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--border,var(--line));border-radius:999px;background:var(--background,#fdfdfc);color:var(--foreground,#0b0d10);box-shadow:0 2px 10px #0b0d101f;transition:opacity 220ms ease,visibility 220ms ease}
.to-top svg{width:18px;height:18px}
.to-top:hover{border-color:var(--button-primary);color:var(--button-primary)}
.to-top:focus-visible{outline:2px solid var(--ring,var(--button-primary));outline-offset:3px}
.at-finish .to-top{opacity:0;visibility:hidden;pointer-events:none}
@supports (animation-timeline:scroll()){
 .to-top{animation:to-top-reveal linear both;animation-timeline:scroll();animation-range:55vh 85vh}
 @keyframes to-top-reveal{from{opacity:0;visibility:hidden;transform:translateY(8px)}to{opacity:1;visibility:visible;transform:none}}
 .at-finish .to-top{animation:none}
}
@media print{.to-top{display:none}}

/* ─────────────────────────────────────────────────────────────────────────────
   Three acts, one header, two clickable styles.

   Everything a visitor can click is either a button (filled or outlined, radius
   8–12px, rendered by shadcn) or a text link: underlined, with an arrow that
   appears on hover. There is no third style, and nothing that is not clickable
   borrows either one — captions have no plate, no hover and no pointer.
   ───────────────────────────────────────────────────────────────────────────── */

/* The one text-link style. The arrow is part of the link, so it never shifts
   the line: it is reserved with opacity, not inserted on hover. */
.text-link{display:inline-flex;align-items:baseline;gap:8px;min-height:44px;align-content:center;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:currentColor;color:inherit}
.text-link>span[aria-hidden]{opacity:.35;transition:opacity 160ms ease,translate 160ms ease}
.text-link:hover>span[aria-hidden]{opacity:1}
.text-link:hover>span[aria-hidden]:last-child{translate:3px 0}
.text-link:hover>span[aria-hidden]:first-child{translate:-3px 0}
.text-link:hover{text-decoration-thickness:2px}

/* Act label: the section number and its name, as a caption. Not a control. */
.act-label{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--sc-ink-soft);cursor:default}
.act-label>i{font-style:normal;font-variant-numeric:lining-nums tabular-nums;font-size:11px;letter-spacing:.08em;padding:3px 7px;border:1px solid currentColor;border-radius:var(--sc-r-sm);opacity:.8}

/* Header. Fixed over the hero, solid once the hero is behind you. */
.masthead{transition:background-color 220ms ease,color 220ms ease,border-color 220ms ease}
html.past-hero .masthead{background:#f2efe8f5;color:var(--sc-ink);border-bottom:1px solid var(--line);backdrop-filter:blur(10px)}
html.past-hero .masthead::before{opacity:0}
html.past-hero .identity-text>span{color:var(--sc-ink-soft)}
body:not(.full-case-page):not(.flow-page) .masthead::before{transition:opacity 220ms ease}
.full-case-page .masthead,.flow-page .masthead{position:sticky;top:0;background:var(--background,#f2efe8);color:var(--foreground,#171c27);border-bottom:1px solid var(--border,var(--line))}

/* Header navigation is links, not a pill of pseudo-buttons. */
.masthead nav{display:flex;align-items:center;gap:24px;padding:0;border:0;background:none}
.masthead .masthead-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;text-decoration:none;color:inherit;opacity:.72}
.masthead .masthead-nav a>i{font-style:normal;font-size:11px;letter-spacing:.08em;font-variant-numeric:lining-nums tabular-nums;opacity:.65}
.masthead .masthead-nav a:hover{opacity:1}
.masthead .masthead-nav a.is-current{opacity:1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.masthead .masthead-menu-panel a>i{display:none}
.language-switch{display:inline-flex;align-items:center;gap:4px;font-size:13px}
.language-switch a{display:inline-grid;place-items:center;min-width:34px;min-height:44px;text-decoration:none;color:inherit;opacity:.6}
.language-switch a:hover{opacity:1;text-decoration:underline;text-underline-offset:5px}
.language-switch a[aria-current]{opacity:1;font-weight:500;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* Act 02. An index, then a teaser card per case. Bodies live on their own routes. */
.work{padding:96px var(--sc-gutter) 64px;border-top:1px solid var(--line)}
.work--tail{padding-top:64px;border-top:0}
.work-heading{display:block;margin-bottom:40px}
.work-heading h2{font-size:clamp(36px,3.7vw,56px)}
.work-heading>p:last-child{margin-top:24px;max-width:56ch;font-size:16px;color:var(--sc-ink-soft)}
.work-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0 0 64px;padding:0;list-style:none;border-top:1px solid var(--line)}
.work-index li{border-bottom:1px solid var(--line)}
.work-index a{display:flex;align-items:baseline;gap:16px;padding-block:20px;min-height:64px;font-size:20px;text-decoration:none}
.work-index a>i{font-style:normal;font-size:12px;letter-spacing:.08em;color:var(--sc-ink-soft);font-variant-numeric:lining-nums tabular-nums}
.work-index a:hover>span{text-decoration:underline;text-underline-offset:6px}
.work-index a::after{content:'↓';margin-left:auto;opacity:.3;transition:opacity 160ms ease,translate 160ms ease}
.work-index a:hover::after{opacity:1;translate:0 3px}

.case-card{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px var(--grid-gap);align-items:center}
.case-card-media{grid-column:1/7;margin:0;min-width:0}
.case-card-media img{display:block;width:100%;height:auto;border-radius:var(--sc-r-lg);border:1px solid var(--line)}
.case-card-body{grid-column:8/-1;min-width:0}
.case-card-index{margin:0 0 16px;font-size:12px;letter-spacing:.08em;color:var(--sc-ink-soft);cursor:default}
.case-card-index>i{font-style:normal;font-variant-numeric:lining-nums tabular-nums}
.case-card h3{font-size:clamp(32px,3.2vw,48px)}
.case-card-meta{margin-top:16px;font-size:14px;color:var(--sc-ink-soft)}
.case-card-period{margin-top:4px;font-size:13px;color:var(--sc-ink-soft);font-variant-numeric:lining-nums tabular-nums}
.case-card-summary{margin-top:20px;max-width:44ch;font-size:17px;line-height:1.6}
.metrics--card{gap:40px;margin-top:28px}
.metrics--card .metric strong{font-size:36px}
.case-card [data-slot=button]{margin-top:32px}

.work-more{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);font-size:15px}
.solo-link{margin-top:16px;font-size:15px}

/* Solo cards: the title is a heading again, the product opens from a text link. */
.solo-case h3 a{display:inline;min-height:0}
.solo-case h3 a::after{content:none}

/* About: the chronology moved off the home page and keeps its own way back. */
.flow-page .experience{border-top:0;padding-top:56px}
.page-back{margin-bottom:24px;font-size:15px}

/* Every control shows focus, including the ones the engine owns. */
.text-link:focus-visible,.work-index a:focus-visible,.masthead-nav a:focus-visible,.language-switch a:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:var(--sc-r-sm)}
input[type=range]:focus-visible{outline:3px solid var(--sc-accent);outline-offset:4px}

@media(max-width:1100px){
  .case-card{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px var(--grid-gap)}
  .case-card-media,.case-card-body{grid-column:1/-1}
}
@media(max-width:860px){
  .work{padding:64px var(--sc-gutter) 48px}
  .work-index{grid-template-columns:1fr;margin-bottom:48px}
  .work-index a{font-size:18px}
  .masthead nav{gap:16px}
  .metrics--card{gap:28px}
  .metrics--card .metric strong{font-size:30px}
}
@media(max-width:640px){
  .work-heading h2{font-size:34px}
  .case-card h3{font-size:30px}
  .case-card-summary{font-size:16px}
  .hero-margin{cursor:default}
}

/* ── Header contrast and anchor offsets ──────────────────────────────────── */
:root{--header-h:96px}
@media(max-width:860px){:root{--header-h:88px}}
@media(max-width:640px){:root{--header-h:80px}}

/* A fixed header would otherwise cover the top of whatever an anchor points at. */
section[id],[id].case-section,[id].case-stage{scroll-margin-top:calc(var(--header-h) + 16px)}

html.past-hero .masthead{color:#171c27}
html.past-hero .identity-text>span{color:#565d69}
/* Over the dark hero the outlined action has to draw itself in light, or it is a
   white pill on a white pill. */

/* Work index: one row per case, the marker on the right where the eye ends. */
.work-index{grid-template-columns:1fr}
.work-index a{justify-content:flex-start;gap:20px}
.work-index a>span{flex:1}
.work-index a::after{margin-left:0}

/* The floating shortcut and the fixed header must not overlap the sheet. */
.masthead-menu[open]::before{top:0}

/* The burger follows the header's own colour instead of always being light. */
.burger,.burger::before,.burger::after{background:currentColor}
.masthead-menu[open] .burger{background:transparent}
/* Inside the open sheet the header is dark again, whatever the page behind it is. */
/* The open menu is always dark, so the header and the panel switch to light text on every page. */
html:has(.masthead-menu[open]) .masthead,html:has(.masthead-menu[open]) .masthead .masthead-menu>summary,.masthead .masthead-menu-panel{color:#f7f7f4}

/* The header floats above the pinned chapters, so their top rows step out from
   under it instead of starting at the very top of the stage. */
body:not(.full-case-page):not(.flow-page) .peak [data-sc-stage]{padding-top:calc(48px + var(--header-h))}
body:not(.full-case-page):not(.flow-page) .uniprompt .case-heading{top:calc(var(--header-h) + 24px)}
@media(max-width:860px){
  body:not(.full-case-page):not(.flow-page) .peak [data-sc-stage]{padding-top:calc(24px + var(--header-h))}
}

/* The about page is paper from the first pixel: no hero gradient under its header. */
.flow-page .masthead::before{display:none}
.section-heading .act-label{grid-column:1/-1}
.masthead .masthead-cv{font-size:14px}
html:not(.past-hero) body:not(.full-case-page):not(.flow-page) .masthead .masthead-cv{color:#f7f7f4}

/* Over a dark chapter the solid header is dark too, not a light band on top of it. */
html.past-hero.on-dark .masthead{background:#0b0d10f2;color:#f7f7f4;border-bottom-color:#ffffff1f}
html.past-hero.on-dark .identity-text>span{color:#c0c5cf}

/* ── Act 03: Обо мне. One screen: who, when, what it adds up to. ─────────── */
.about{padding:88px var(--sc-gutter) 80px;border-top:1px solid var(--line)}
.about-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px var(--grid-gap);align-items:start;padding-top:32px;border-top:1px solid var(--line)}
.about-intro{grid-column:span 6;min-width:0}
.about-intro h2{font-size:clamp(28px,2.8vw,42px)}
.about-bio{margin-top:24px;max-width:54ch;font-size:16px;line-height:1.7;color:var(--sc-ink)}
.about-links{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:20px;max-width:none;font-size:15px}
.about-timeline{grid-column:8/-1;margin:0;padding:0;list-style:none;min-width:0}
.about-step{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:4px var(--grid-gap);padding:16px 0;border-bottom:1px solid var(--line)}
.about-steps:first-child>.about-step:first-child{padding-top:0}
.about-step-period{font-size:13px;line-height:1.6;color:var(--sc-ink-soft);font-variant-numeric:lining-nums tabular-nums}
.about-step-role{font-size:14px;line-height:1.5;color:var(--sc-ink-soft)}
.about-step-role strong{display:block;margin-bottom:2px;font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--sc-ink)}
.about-facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px var(--grid-gap);margin:56px 0 0;padding:32px 0 0;list-style:none;border-top:1px solid var(--line)}
.about-fact strong{display:block;font-size:clamp(26px,2.4vw,34px);font-weight:500;line-height:1.1;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}
.about-fact span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--sc-ink-soft)}

/* Resume leaves the numbered anchors and becomes an outlined action of its own. */
.masthead .masthead-cv{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:1px solid #ffffff5c;border-radius:10px;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;text-decoration:none;color:#f7f7f4}
.masthead .masthead-cv svg{flex:none;width:16px;height:16px}
.masthead .masthead-cv:hover{background:#ffffff1f;border-color:#f7f7f4;text-decoration:none}
.masthead .masthead-cv:focus-visible{outline:3px solid currentColor;outline-offset:3px}
html.past-hero:not(.on-dark) .masthead .masthead-cv,.full-case-page .masthead .masthead-cv,.flow-page .masthead .masthead-cv{border-color:#171c2740;color:#171c27}
html.past-hero:not(.on-dark) .masthead .masthead-cv:hover,.full-case-page .masthead .masthead-cv:hover,.flow-page .masthead .masthead-cv:hover{background:#171c270d;border-color:#171c27}
.masthead .masthead-menu-panel .masthead-menu-cv{display:flex;align-items:center;gap:10px}
.masthead .masthead-menu-panel .masthead-menu-cv svg{width:16px;height:16px}
/* On a phone the language switch lives in the menu, as one segmented control. */
.masthead .masthead-menu-panel .language-switch--menu{align-self:center;gap:0;margin:20px 0 0;padding:3px;border:1px solid #ffffff3d;border-radius:999px;font-size:14px}
.masthead .masthead-menu-panel .language-switch--menu a{width:auto;min-width:64px;min-height:44px;font-size:14px;font-weight:500;letter-spacing:0;padding:0 18px!important;border-radius:999px!important;justify-content:center!important;color:#f7f7f4;opacity:.72;text-decoration:none}
.masthead .masthead-menu-panel .language-switch--menu a:hover{opacity:1;text-decoration:none}
.masthead .masthead-menu-panel .language-switch--menu a[aria-current]{background:#f7f7f4;color:#0b0d10;opacity:1;font-weight:600;text-decoration:none}

@media(max-width:1100px){
  .about-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:40px var(--grid-gap)}
  .about-intro,.about-timeline{grid-column:1/-1}
  .about-facts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:860px){
  .about{padding:64px var(--sc-gutter) 56px}
  .about-facts{margin-top:40px;padding-top:24px}
}
@media(max-width:640px){
  .about-intro h2{font-size:28px}
  .about-bio{font-size:15px;margin-top:20px}
  .about-links{gap:4px 24px}
  .about-step{grid-template-columns:1fr;gap:2px}
  .about-step-period{order:-1;font-size:12px}
  .about-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--grid-gap)}
  .about-fact strong{font-size:24px}
}

/* ── Vertical rhythm ─────────────────────────────────────────────────────────
   Three tokens and nothing else between sections: 96 / 128 / 160 on desktop,
   scaled down in step at narrow widths so the same three steps still read. */
:root{--rhythm-s:96px;--rhythm-m:128px;--rhythm-l:160px}
@media(max-width:1100px){:root{--rhythm-s:72px;--rhythm-m:96px;--rhythm-l:120px}}
@media(max-width:640px){:root{--rhythm-s:56px;--rhythm-m:72px;--rhythm-l:88px}}

.work{padding:var(--rhythm-m) var(--sc-gutter) var(--rhythm-s)}
.work--tail{padding:var(--rhythm-s) var(--sc-gutter);border-top:0}
.about{padding:var(--rhythm-m) var(--sc-gutter) var(--rhythm-s)}
.solo{padding:var(--rhythm-s) var(--sc-gutter)}
.flow-page .experience{padding:var(--rhythm-s) var(--sc-gutter)}

/* A compressed case moment: one screen, one visual, one paragraph, one way on. */
.case-strip{padding:var(--rhythm-s) var(--sc-gutter);border-top:1px solid var(--line)}
.case-strip-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:40px var(--grid-gap);align-items:center}
.case-strip-media{grid-column:1/8;margin:0;min-width:0}
.case-strip-media img{display:block;width:100%;height:auto;border-radius:var(--sc-r-lg);border:1px solid var(--line)}
.case-strip-body{grid-column:9/-1;min-width:0}
.case-strip-body h2{font-size:clamp(26px,2.4vw,36px)}
.case-strip-body p{margin-top:20px;max-width:44ch;font-size:16px;line-height:1.7;color:var(--sc-ink-soft)}
.case-strip-link{margin-top:20px;font-size:15px}
@media(max-width:1100px){
  .case-strip-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:32px var(--grid-gap)}
  .case-strip-media,.case-strip-body{grid-column:1/-1}
}
@media(max-width:640px){.case-strip-body h2{font-size:26px}.case-strip-body p{font-size:15px;margin-top:16px}}

/* Solo practice reads as one block; the heading does not need a full step of air. */
.solo .section-heading{margin-bottom:32px}
.solo-case h3{margin:20px 0 12px}

/* Chronology disclosure: invisible on wide screens, a chevron row on a phone. */
.about-steps{margin:0;padding:0;list-style:none}
.about-more>summary{display:none}
.about-more-chevron{flex:none;width:18px;height:18px;transition:transform 180ms ease}
.about-more[open] .about-more-chevron{transform:rotate(180deg)}
.about-more-label--close{display:none}
.about-more[open] .about-more-label--open{display:none}
.about-more[open] .about-more-label--close{display:inline}
@media(max-width:640px){
  .about-more>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;border-bottom:1px solid var(--line);list-style:none;cursor:pointer;font-size:14px;font-weight:500;color:var(--sc-ink)}
  .about-more>summary::-webkit-details-marker{display:none}
  .about-more>summary:focus-visible{outline:3px solid currentColor;outline-offset:3px;border-radius:var(--sc-r-sm)}
}

/* Narrow screens: tighten the inner gaps of act 03 without hiding anything. */
@media(max-width:640px){
  .about-grid{gap:28px var(--grid-gap)}
  .about-bio{margin-top:16px}
  .about-links{margin-top:12px}
  .about-facts{margin-top:28px;padding-top:20px;gap:16px var(--grid-gap)}
  .about-fact strong{font-size:22px}
  .about-fact span{margin-top:6px;font-size:12px}
  .about-step{padding:12px 0}
}

/* ── Solo practice: each mock-up sits on its own card, inside a browser frame ──
   Both source covers are 1400×900, so a fixed 3/2 canvas keeps the two cards the
   same height and the same scale whatever ships next. */
.solo-shot{margin:0;padding:28px;background:#fff;border:1px solid var(--line);border-radius:16px}
.solo-browser{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:#fff}
.solo-browser-bar{display:flex;align-items:center;gap:7px;height:34px;padding-inline:14px;background:#f2efe8;border-bottom:1px solid var(--line)}
.solo-browser-bar i{width:9px;height:9px;border-radius:50%;background:#c5c9cf}
.solo-browser-canvas{box-sizing:border-box;aspect-ratio:3/2;display:grid;place-items:center;padding:20px;background:#fff}
.solo-browser-canvas img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;border-radius:4px}
.solo-case h3{margin-top:24px}

@media(max-width:860px){
  .solo-shot{padding:24px;border-radius:14px}
  .solo-browser-canvas{padding:18px}
}
@media(max-width:640px){
  .solo-shot{padding:16px}
  .solo-browser-bar{height:30px;gap:6px;padding-inline:12px}
  .solo-browser-bar i{width:8px;height:8px}
  .solo-browser-canvas{padding:16px}
}

/* The opening rule of act 03 belongs to the grid, so both columns start on it. */
@media(max-width:1100px){.about-grid{padding-top:28px}}
@media(max-width:640px){.about-grid{padding-top:24px}}

}