/* ===== Палитра: чтобы сменить акцент, поменяйте --sig, --sig-dark и --mark ===== */
:root{
  --paper:#F1EEE7;
  --ink:#121212;
  --crowd:#B9B6AE;
  --sig:#2E3BEA;        /* ультрамарин: акцент на светлом */
  --sig-dark:#9AA4FF;   /* тот же акцент для тёмных блоков */
  --mark:#CFDAFF;       /* «маркер» под словами и цифрами */
  --line:#3a3a3a;
  --pad:clamp(20px,4vw,56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:'Inter Tight',system-ui,sans-serif;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
p,h1,h2,h3,ul,figure{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--sig);outline-offset:3px}

/* ---------- type ---------- */
.mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.03em;text-transform:uppercase;line-height:1.5}
.muted{color:var(--crowd)}
.accent{color:var(--sig)}
.dark .accent{color:var(--sig-dark)}
mark{background:var(--mark);color:var(--ink);padding:0 .15em}
.label{margin-bottom:18px}
.lead{font-size:clamp(22px,2.6vw,38px);line-height:1.15;font-weight:500;max-width:30ch}
.body{font-size:15px;line-height:1.55;margin-top:14px;max-width:56ch}
.num{font-weight:700;font-size:clamp(40px,5vw,72px);letter-spacing:-.04em;line-height:1;margin-bottom:8px}
.num--xl{font-size:clamp(52px,6.5vw,100px)}
.giant{font-weight:800;text-transform:uppercase;letter-spacing:-.045em;line-height:.86;font-size:clamp(64px,15vw,240px)}
.giant--md{font-size:clamp(48px,8vw,128px);margin:4px 0 36px}
.giant--bleed{margin:clamp(32px,6vw,90px) -6vw clamp(32px,4vw,56px) 0}
.h3{font-weight:700;font-size:clamp(22px,2.4vw,32px);line-height:1.1;margin:18px 0 6px}

/* ---------- sections ---------- */
.sec{padding:clamp(56px,8vw,120px) var(--pad);position:relative}
.dark{background:var(--ink);color:var(--paper);overflow:clip}
.bordered{border-top:1px solid var(--ink)}
.meta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.dark .meta,.dark .label{color:var(--crowd)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{border:1px solid currentColor;border-radius:40px;padding:12px 20px;transition:background .2s,color .2s}
.pill:hover{background:var(--ink);color:var(--paper)}
.pill--light:hover{background:var(--paper);color:var(--ink)}
figcaption{margin-top:8px}

/* ---------- media slots ---------- */
.media{position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:10px;background:repeating-linear-gradient(45deg,#dcd8cf 0 8px,#d2cec4 8px 16px)}
.dark .media{background:repeating-linear-gradient(45deg,#242424 0 8px,#1c1c1c 8px 16px);color:var(--crowd)}
.media img,.media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media.loaded{background:none}
.media.loaded>.mono{display:none}
.media--portrait{aspect-ratio:3/4}
.media--portrait img{filter:grayscale(1);transition:filter .5s}
.media--portrait:hover img{filter:none}
.media--wide{aspect-ratio:16/10}
.media--video{aspect-ratio:16/9}
.media--tall{aspect-ratio:4/5}
.media--sq{aspect-ratio:1}
.media--framed{outline:1px solid var(--ink)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:var(--paper)}
.crowd{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:4px 12px;padding:64px var(--pad) 0;font-family:'JetBrains Mono',monospace;font-size:clamp(11px,.9vw,13px);line-height:1.45;overflow:hidden;user-select:none}
.crowd span{white-space:nowrap}
.crowd--back{color:var(--ink)}
.crowd--back .hl{background:var(--mark);font-weight:500;padding:0 3px}
.crowd--front{background:var(--paper);color:var(--crowd);
  -webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,30%),transparent 110px,#000 150px);
          mask-image:radial-gradient(circle at var(--x,50%) var(--y,30%),transparent 110px,#000 150px)}
.crowd--front .hl{background:none;font-weight:400;padding:0 3px}
.topbar{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;justify-content:space-between;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad) 16px;background:var(--paper);border-bottom:1px solid var(--ink)}
.topbar a:hover{color:var(--sig)}
.hero__hint{position:absolute;z-index:5;top:72px;right:var(--pad);background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:40px;pointer-events:none}
.hero__content{position:absolute;left:0;right:0;bottom:0;z-index:4;background:var(--paper);border-top:1px solid var(--ink);padding:clamp(20px,3vw,40px) var(--pad) clamp(24px,3vw,40px);display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px 48px;align-items:end}
.hero__name{grid-column:1/-1;font-weight:800;text-transform:uppercase;letter-spacing:-.05em;line-height:.85;font-size:clamp(56px,11.5vw,200px)}
.hero__claim{font-size:clamp(20px,2.2vw,34px);line-height:1.15;font-weight:500;max-width:24ch}
.circled{position:relative;display:inline-block}
.circled svg{position:absolute;left:-8%;top:-22%;width:116%;height:144%;overflow:visible;pointer-events:none}
.draw{fill:none;stroke:var(--sig);stroke-width:3;stroke-linecap:round;stroke-dasharray:900;stroke-dashoffset:900;animation:draw 1.2s .5s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.proof{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.proof b{display:block;font-size:clamp(28px,3vw,48px);letter-spacing:-.04em;line-height:1;margin-bottom:6px}
.proof span{font-size:13px;line-height:1.3;display:block}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,80px);align-items:start}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:40px}
.stats .num{font-size:clamp(36px,4.2vw,64px)}
.stats--3{grid-template-columns:repeat(3,minmax(0,1fr));margin:28px 0 8px}
.ring{position:relative;display:inline-block}
.ring svg{position:absolute;left:-7%;top:-22%;width:114%;height:144%;overflow:visible}
.ring ellipse{fill:none;stroke:var(--sig);stroke-width:2;vector-effect:non-scaling-stroke}

/* ---------- parkovkin ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.cols3 p:last-child{font-size:15px;line-height:1.5;margin-top:8px;max-width:36ch}
.park__main{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.park__stats{display:flex;flex-direction:column;gap:26px}
.row4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(32px,4vw,56px)}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:clamp(32px,4vw,56px) 0 10px}

/* ---------- vibrate higher ---------- */
.vibe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,80px);margin-top:28px;align-items:start}
.vibe__wins{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.vibe__wins .win-a,.vibe__wins .win-d{grid-column:1/-1}

/* ---------- experience ---------- */
.jobs{border-bottom:1px solid var(--line)}
.job{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1.5fr);gap:24px;padding:24px 0;border-top:1px solid var(--line)}
.job h3{font-size:clamp(20px,2vw,28px);font-weight:700;margin-bottom:4px}
.job>p:last-child{font-size:15px;line-height:1.55}
.work-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-top:clamp(48px,6vw,80px)}

/* ---------- more work ---------- */
.grid-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px) 18px}
.w--big{grid-column:span 2}
.w h3{font-size:clamp(18px,1.8vw,24px);font-weight:700;margin:14px 0 2px}
.grid-work .media--tall{aspect-ratio:auto;height:100%;min-height:240px}
.w{display:flex;flex-direction:column}
.w .media{flex:1}
.w--big .media,.w .media--sq{flex:none}

/* ---------- impact ---------- */
.impact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px)}
.impact .mono{margin-top:16px}
.impact .h3{margin-top:6px}

/* ---------- research ---------- */
.research{border-bottom:1px solid var(--line)}
.r{display:grid;grid-template-columns:170px minmax(0,1fr) minmax(0,1.5fr);gap:24px;padding:28px 0;border-top:1px solid var(--line)}
.r h3{font-size:clamp(24px,3vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.r>p:last-child{font-size:15px;line-height:1.55}

/* ---------- teaching ---------- */
.teach{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,80px)}
.teach .h3:first-child{margin-top:0}
.teach__side .mono{margin-top:8px}
.coddy{margin-top:40px;padding-top:4px;border-top:1px solid var(--ink)}

/* ---------- recognition ---------- */
.awards li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;padding:16px 0;border-top:1px solid var(--ink);font-size:clamp(17px,1.6vw,22px);font-weight:500;line-height:1.25}
.awards li:last-child{border-bottom:1px solid var(--ink)}
.awards .mono{align-self:center}

/* ---------- contact ---------- */
.contact{background:var(--sig);color:var(--paper)}
.contact .giant{margin:48px 0 28px}
.contact__row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.contact__row a{text-decoration:underline;text-underline-offset:4px}

/* ---------- cursor: inverts whatever is under it, so it never blends in ---------- */
.cursor{position:fixed;left:0;top:0;width:10px;height:10px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:1000;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s,border-color .2s;border:1.5px solid transparent;display:none;opacity:0}
@media (hover:hover) and (pointer:fine){
  .cursor{display:block}
  .cursor.is-hero{width:250px;height:250px;background:transparent;border-color:#fff}
  .cursor.is-link{width:36px;height:36px}
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .about,.park__main,.vibe,.work-feature,.impact,.teach{grid-template-columns:1fr}
  .hero__content{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}
  .cols3{grid-template-columns:1fr}
  .job,.r{grid-template-columns:1fr;gap:6px}
  .row4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .w--big{grid-column:1/-1}
  .awards li{grid-template-columns:1fr;gap:4px}
  .media--portrait{max-width:380px}
}
@media (max-width:600px){
  .hide-sm{display:none}
  .hero__hint{top:62px;left:var(--pad);right:auto}
  .proof{grid-template-columns:1fr;gap:10px}
  .proof li{display:flex;align-items:baseline;gap:12px}
  .proof b{margin:0;min-width:96px}
  .crowd--front{-webkit-mask-image:radial-gradient(circle at var(--x,50%) var(--y,30%),transparent 75px,#000 110px);mask-image:radial-gradient(circle at var(--x,50%) var(--y,30%),transparent 75px,#000 110px)}
  .row3,.stats--3{grid-template-columns:1fr 1fr}
  .grid-work{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .draw{animation:none;stroke-dashoffset:0}
}
html.has-cursor, html.has-cursor *{cursor:none !important}

/* ===================== v3 additions ===================== */
.topbar__links{display:flex;gap:20px}
.numbers{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;padding:clamp(28px,4vw,48px) var(--pad);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.numbers .num{font-size:clamp(36px,4.5vw,68px)}
.about{padding-bottom:clamp(40px,6vw,80px)}

.pill--fill{background:var(--sig);border-color:var(--sig);color:#fff}
.pill--fill:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dark .pill--fill:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

.key__media{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.key__stats{display:flex;flex-direction:column;gap:24px}
.vibe__wins .win-wide{grid-column:1/-1}

/* experience timeline */
.co{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--line)}
.co--last{border-bottom:1px solid var(--line)}
.co__meta{position:sticky;top:24px;align-self:start;display:flex;flex-direction:column;gap:12px}
.co__name{font-size:clamp(28px,3.4vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1;text-transform:uppercase}
.co__line{font-size:clamp(17px,1.6vw,22px);line-height:1.35;margin-bottom:22px;max-width:44ch}
.facts li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.5}
.facts li:first-child{padding-top:0}
.facts b{color:var(--sig-dark);font-weight:700}
.co__work{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:28px}
.card h4{font-size:18px;font-weight:700;margin:12px 0 2px}
a.card:hover h4{color:var(--sig-dark)}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.co__body>.grid3{margin-top:28px}
.grid5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.span2{grid-column:1/-1}
.mt{margin-top:24px}

/* teaching */
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0 8px}
.teach .grid2{align-content:start}

/* volunteering */
.tint{background:#E6E2D8}
.giant--sm{font-size:clamp(40px,6vw,96px);margin:10px 0 18px}
.vol{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.vol .grid2 .media--tall{aspect-ratio:4/5}
.vol2{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);margin-top:clamp(48px,6vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--ink)}
.vol2 .h3{margin-top:8px}

/* beyond */
.beyond{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:start}
.small-list li{font-size:14px;line-height:1.45;padding:9px 0;border-top:1px solid var(--ink)}
.small-list li:last-child{border-bottom:1px solid var(--ink)}

/* case pages */
.pagebar{position:sticky;top:0;z-index:20;display:flex;justify-content:space-between;gap:16px;padding:calc(16px + env(safe-area-inset-top,0px)) var(--pad) 16px;background:var(--paper);border-bottom:1px solid var(--ink)}
.pagebar a:hover{color:var(--sig)}
.case-hero .lead{margin-top:8px}
.case-hero .giant{margin:24px 0 28px}
.case-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:clamp(36px,5vw,64px);padding-top:20px;border-top:1px solid currentColor}
.case-facts p:last-child{font-size:16px;margin-top:6px}
.case-step{display:grid;grid-template-columns:minmax(0,.5fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px)}
.step-n{position:sticky;top:80px;align-self:start}
.h2{font-size:clamp(26px,3.2vw,48px);font-weight:700;letter-spacing:-.03em;line-height:1.05;max-width:22ch}
.case-step .body{font-size:16px;max-width:62ch}
.vibe-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.contact--slim{padding-top:36px;padding-bottom:36px}

@media (max-width:900px){
  .numbers{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}
  .numbers>div:last-child{grid-column:1/-1}
  .key__media,.co,.vol,.vol2,.beyond,.case-step{grid-template-columns:1fr}
  .co__meta,.step-n{position:static}
  .case-facts{grid-template-columns:1fr}
}
@media (max-width:600px){
  .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .co__work,.vibe-gallery{grid-template-columns:1fr}
  .stats3{grid-template-columns:1fr 1fr}
  .topbar__links{gap:14px}
}

.media--contain{background:#fff}
.media--contain img{object-fit:contain}
.case-step .stats3{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:600px){.case-step .stats3{grid-template-columns:1fr 1fr}}
.case-step .stats3 .num{font-size:clamp(34px,4.2vw,64px)}

/* ===================== v4 fixes ===================== */
:root{--pad:max(clamp(20px,4vw,56px), calc((100vw - 1600px) / 2))}
p,li,h1,h2,h3,h4{text-wrap:pretty}

/* crowd: no articles, justified edges, always full width */
.crowd{display:block;text-align:justify;padding:64px clamp(20px,4vw,56px) 0;word-spacing:4px;line-height:1.6}
.crowd span{white-space:nowrap}

/* about: numbers live inside the about block */
.about{border-top:1px solid var(--ink);padding-top:clamp(36px,4.5vw,64px);padding-bottom:clamp(48px,6vw,88px);align-items:stretch}
.about>div:last-child{display:flex;flex-direction:column}
.about-nums{margin-top:auto;padding-top:clamp(32px,4vw,56px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}
.about-nums>div{border-top:1px solid var(--ink);padding-top:14px}
.about-nums .num{font-size:clamp(30px,3.2vw,56px)}
.about .lead{max-width:26ch}

/* breathing room between numbers and labels */
.num{margin-bottom:12px}
.num--xl{margin-bottom:14px}
.key__stats{gap:36px}
.key__stats .btns{margin-top:4px}

/* case pages: narrower label column so the layout is balanced */
.case-step{grid-template-columns:minmax(120px,210px) minmax(0,1fr)}
.case-step .h2{max-width:28ch}
.case-step .body{max-width:68ch}

/* captions: closer to their own picture, further from the next row */
.grid3{row-gap:clamp(32px,3.5vw,48px)}
.grid2{row-gap:clamp(24px,3vw,40px)}
.card h4{margin:12px 0 2px}
figcaption{margin-top:10px}

/* beyond work */
.beyond{grid-template-columns:1fr}
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,5vw,72px);margin-top:clamp(32px,4vw,56px)}
.small-list b{font-weight:700}

@media (max-width:1100px){
  .about-nums{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .about>div:last-child{display:block}
  .lists{grid-template-columns:1fr}
  .case-step{grid-template-columns:1fr}
}
@media (max-width:600px){
  .about-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crowd{padding:56px 16px 0;word-spacing:2px}
}
.crowd{word-spacing:normal;padding-left:var(--pad);padding-right:var(--pad)}
.crowd span{display:inline-block;margin:0 2px}
@media (max-width:600px){.crowd{padding-left:16px;padding-right:16px}}
.giant{font-size:clamp(40px,15vw,240px)}
@media (max-width:600px){
  .giant--bleed{margin-right:0}
  .giant{font-size:14.5vw}
  .giant--md,.giant--sm{font-size:12vw}
}

/* v5: modifiers must win over the base .giant size (bug: they were overridden) */
.giant--md{font-size:clamp(44px,8vw,128px)}
.giant--sm{font-size:clamp(36px,6vw,96px)}
/* headlines inside a column never grow wider than their column */
.vibe>div:first-child,.vol>div:first-child,.vibe__art{container-type:inline-size;min-width:0}
@supports (font-size:1cqi){
  .vibe .giant--md{font-size:clamp(40px,18cqi,128px)}
  .vol .giant--sm{font-size:clamp(34px,15cqi,96px)}
}
@media (max-width:600px){
  .giant--md,.giant--sm{font-size:12vw}
}

/* v6: Triglinki gallery */
.vol2{grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr)}
.trig{display:grid;grid-template-columns:1.05fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:10px;aspect-ratio:16/11}
.trig .media{aspect-ratio:auto;height:100%;min-height:0}
.trig-a{grid-column:1;grid-row:1/3}
.trig-b{grid-column:2/4;grid-row:1}
.trig-c{grid-column:2;grid-row:2}
.trig-d{grid-column:3;grid-row:2}
@media (max-width:600px){.trig{aspect-ratio:4/5;gap:6px}}

/* screenshots shown whole, never cropped */
.media--natural{display:block;padding:0}
.media--natural:not(.loaded){aspect-ratio:3/2;padding:10px;display:flex}
.media--natural img{position:static;width:100%;height:auto;object-fit:initial}
.trig-a img{object-position:15% 30%}