/* KOWICZ — personal site
   Monochrome, photo-led, mobile-first.
   Palette: graphite drench + bone. No second hue: the portraits carry the surface. */

:root{
  /* surface */
  --ink-900: oklch(0.145 0.008 250);   /* body ground */
  --ink-800: oklch(0.185 0.009 250);   /* raised ground */
  --ink-700: oklch(0.245 0.010 250);   /* hairlines, wells */
  --ink-600: oklch(0.330 0.010 250);

  /* type */
  --bone:    oklch(0.955 0.008 80);    /* primary text, warm bone */
  --bone-70: oklch(0.800 0.008 80);    /* secondary text — 8.4:1 on ink-900 */
  --bone-45: oklch(0.660 0.008 80);    /* labels — 4.9:1 on ink-900 */

  --brass:   oklch(0.70 0.10 82);      /* brand accent — brass */
  --brass-dim: oklch(0.58 0.085 80);
  --brass-hi: oklch(0.79 0.105 85);
  --brass-lo: oklch(0.55 0.08 76);
  --metal: linear-gradient(168deg, var(--brass-lo), var(--brass) 48%, var(--brass-hi));
  --brass-glow: 0 0 14px oklch(0.70 0.10 82 / 0.28);

  --line: color-mix(in oklch, var(--bone) 14%, transparent);
  --line-strong: color-mix(in oklch, var(--bone) 26%, transparent);

  /* type scale — fluid, ratio ≥1.25 */
  --t-xs: clamp(0.8rem, 0.77rem + 0.15vw, 0.86rem);
  --t-sm: clamp(0.95rem, 0.9rem + 0.2vw, 1.02rem);
  --t-base: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-md: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --t-lg: clamp(1.85rem, 1.5rem + 1.6vw, 3rem);
  --t-xl: clamp(2.6rem, 1.6rem + 5.4vw, 7.5rem);

  /* space */
  --gut: clamp(1.25rem, 5vw, 2.5rem);
  --stack: clamp(3.25rem, 8vw, 6.5rem);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-scale */
  --z-sticky: 100;
  --z-overlay: 200;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin:0;
  background: var(--ink-900);
  color: var(--bone);
  font-family: Archivo, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  font-size: var(--t-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img{ max-width:100%; height:auto; display:block; }

*{ hyphens: none; -webkit-hyphens: none; }

::selection{ background: oklch(0.70 0.10 82 / 0.35); }
img, svg, .role-engr, .band-media{ -webkit-user-select: none; user-select: none; }

h1,h2,h3{
  font-weight: 700;
  font-variation-settings: "wdth" 118;   /* expanded cut — the display voice */
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
  margin: 0;
}

p{ margin: 0; text-wrap: pretty; }

a{ color: inherit; }

.skip{
  position:absolute; left:-9999px; top:0; z-index: var(--z-overlay);
  background: var(--bone); color: var(--ink-900);
  padding: .75rem 1rem; font-size: var(--t-sm);
}
.skip:focus{ left:0; }

:focus-visible{
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

/* ── header ─────────────────────────────────────────────── */

.top{
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky);
  display:flex; align-items:center; justify-content:space-between;
  gap: 1rem;
  padding: clamp(0.8rem, 2vw, 1.2rem) var(--gut);
  background: var(--ink-900);
  border-bottom: 1px solid var(--line);
}

.mark{ display:block; color: var(--bone); }
.mark .wm{ height: clamp(20px, 2.6vw, 27px); width:auto; display:block; }
.wm-mark{ filter: drop-shadow(0 0 9px oklch(0.70 0.10 82 / 0.35)); }

.topnav{ display:flex; gap: clamp(0.9rem, 3vw, 2rem); }
.topnav a{
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: .72;
  transition: opacity .3s var(--ease);
}
.topnav a:hover{ opacity: 1; color: var(--brass); }

@media (max-width: 26rem){
  .topnav a:not(:last-child){ display:none; }
}

/* ── hero ───────────────────────────────────────────────── */

.hero{
  position: relative;
  display: grid;
  gap: clamp(1.75rem, 5vw, 2.5rem);
  padding: clamp(6rem, 14vh, 8.5rem) var(--gut) calc(var(--stack) * 0.6);
}

.hero-head{
  display: grid;
  gap: clamp(1.25rem, 3vw, 1.75rem);
  max-width: 62rem;
}
.hero-por{ margin: 0; }
.hero-por img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 22%;
  display: block;
}
.hero-meta{
  display: grid;
  gap: clamp(1.5rem, 4vw, 2rem);
}

.hero h1{
  font-size: var(--t-xl);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.045em;
}

.lede{
  font-size: var(--t-md);
  line-height: 1.25;
  max-width: 26ch;
  font-variation-settings: "wdth" 100;
  position: relative;
  padding-top: 1.1rem;
}
.lede::before{
  content:"";
  position:absolute; top:0; left:0;
  width: 3.5rem; height: 3px;
  background: var(--metal);
}

.roles{
  margin:0;
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(0.9rem, 2vw, 1.25rem);
}
.roles > div{ display:grid; gap: .15rem; }
.roles dt{
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.roles dd{
  margin:0;
  font-size: var(--t-sm);
  color: var(--bone-70);
  display:grid; gap: .1rem;
}
.roles dd span{
  color: var(--bone-45);
  font-size: var(--t-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 46rem){
  .roles{
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: auto auto;
    gap: .1rem 2.5rem;
    max-width: 46rem;
  }
  .roles > div{ display: contents; }
  .roles dt{ grid-row: 1; }
  .roles dd{ grid-row: 2; padding-top: .15rem; }
  .roles > div:nth-of-type(1) dt,
  .roles > div:nth-of-type(1) dd{ grid-column: 1; }
  .roles > div:nth-of-type(2) dt,
  .roles > div:nth-of-type(2) dd{ grid-column: 2; }
}

.hero-shot-frame{ display:block; position:relative; }

@media (min-width: 62rem){
  .hero{
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    grid-template-areas: "head por" "meta por";
    grid-template-rows: auto 1fr;
    align-items: start;
    column-gap: clamp(3rem, 6vw, 6rem);
  }
  .hero-head{ grid-area: head; align-self: end; }
  .hero-por{ grid-area: por; }
  .hero-por img{ aspect-ratio: 3 / 4; }
  .hero-meta{ grid-area: meta; align-self: end; max-width: 40rem; }
  }

.scroll-hint{
  position:absolute; right: var(--gut); bottom: clamp(2rem, 6vh, 4rem);
  color: var(--brass-dim);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
}
.scroll-hint{ display:none; }

/* ── shared section furniture ───────────────────────────── */

section{ padding-inline: var(--gut); }

.section-h{
  display:flex; align-items:center; gap:.7rem;
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.03em;
  color: var(--bone);
  line-height: 1.05;
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
}
.section-h::before{
  content:"";
  width: .58em; height: .5em;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibWsiIHZpZXdCb3g9IjMxNSA1NDcgMTcyIDE0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrYnJhc3MiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4RjZDM0MiLz48c3RvcCBvZmZzZXQ9IjAuNDUiIHN0b3AtY29sb3I9IiNCRTk0NTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNEREI4NzciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwxMjU0LjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0idXJsKCNrYnJhc3MpIiBzdHJva2U9Im5vbmUiPgogICAgPHBhdGggZD0iTTM0MjAgNzA1OSBjLTExNCAtMjIgLTIxMSAtMTAyIC0yNTAgLTIwNiAtMjAgLTU0IC0yMSAtNzEgLTE4IC01MjIKbDMgLTQ2NiAyNCAtNTAgYzM1IC03MCA5NyAtMTI4IDE2NyAtMTU2IGw1OSAtMjQgNTY1IC0zIGMzOTAgLTMgNTg1IDAgNjMxIDgKMTIzIDIxIDIwOSA5MyAyNTEgMjA4IDE1IDQyIDE3IDk5IDE4IDUwNyBsMCA0NjAgLTI4IDYwIGMtNDggMTAxIC0xMzcgMTY2Ci0yNTMgMTg1IC03OCAxMiAtMTEwNCAxMiAtMTE2OSAtMXogbTExODkgLTE5NCBjMTkgLTExIDQzIC0zMyA1NSAtNDggMjEgLTI4CjIxIC0zNyAyMSAtNDcyIDAgLTQzMyAwIC00NDQgLTIxIC00NzIgLTQ3IC02NSAtMzEgLTYzIC02NTQgLTYzIC01MzIgMCAtNTY3CjEgLTYwMCAxOSAtNzIgMzggLTcxIDI4IC03MSA1MTUgMCAzNjggMiA0MzkgMTUgNDY0IDE2IDMxIDUzIDYwIDk1IDczIDE0IDQKMjc0IDcgNTc2IDYgNTMwIC0yIDU1MSAtMyA1ODQgLTIyeiIvPgogIDwvZz48L3N2Zz4=") no-repeat center / contain;
  flex: none;
}

/* ── scale ──────────────────────────────────────────────── */

.scale{ padding-block: var(--stack); }

.facts{
  list-style:none; margin:0; padding:0;
  display:grid;
}
.facts li{
  display:grid;
  grid-template-columns: minmax(clamp(6.75rem, 19vw, 9.5rem), max-content) 1fr;
  gap: clamp(1rem, 4vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1rem, 3vw, 1.6rem) 0;
  border-bottom: 1px solid var(--line);
}
.facts li:first-child{ border-top: 1px solid var(--line); }
.section-h + .facts li:first-child{ border-top: 0; }
.facts b{
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1.18;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.facts span{
  color: var(--bone-70);
  font-size: var(--t-base);
  line-height: 1.5;
  max-width: 60ch;
}

.scale-note{
  margin-top: 1rem;
  max-width: 60ch;
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.65;
}

@media (min-width: 62rem){
  .scale{
    display:grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    column-gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .scale .pull{ grid-column: 2; position: sticky; top: 7rem; justify-self: end; text-align: right; }
  .scale .facts{ grid-column: 1; grid-row: 1 / span 2; }
  .scale .scale-note{ grid-column: 1; }
}

/* ── split (photo + statement) ──────────────────────────── */

.split{
  padding-block: calc(var(--stack) * 0.5) calc(var(--stack) * 0.7);
  display:grid;
  gap: clamp(1.75rem, 5vw, 3.5rem);
}


.split-body{ display:grid; gap: .9rem; align-content:start; }
.split-body p{
  font-size: var(--t-md);
  line-height: 1.42;
  max-width: 44ch;
  color: var(--bone);
}
.split-body h2{
  font-size: var(--t-lg);
  max-width: 18ch;
}
.split-body p{
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.65;
  max-width: 54ch;
}

.split h2{ font-size: var(--t-lg); max-width: 22ch; }
.split-media{ max-width: 34rem; }
.split-media{ margin:0; }
.split-media .hero-shot-frame{ display:block; }
.split-media img{ width:100%; aspect-ratio: 3/4; object-fit: cover; display:block; }
@media (min-width: 52rem){
  .split{ display:grid; grid-template-columns: minmax(0,0.62fr) minmax(0,1fr); column-gap: clamp(3rem,6vw,5rem); }
  .split h2{ grid-column: 1 / -1; }
  .split-media{ grid-column: 1; }
  .split-body{ grid-column: 2; align-self: start; padding-top: .4rem; }
}

/* ── track ──────────────────────────────────────────────── */

.track{ padding-block: calc(var(--stack) * 0.7); background: var(--ink-800); }
.track{ padding-inline: var(--gut); }

.timeline{
  list-style:none; margin:0; padding:0;
  display:grid;
}
.timeline li{
  position: relative;
  display:grid;
  gap: .4rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) 0 clamp(1.5rem, 4vw, 2.25rem) 1.6rem;
  border-bottom: 1px solid var(--line);
}
.timeline li::before{
  content:"";
  position:absolute;
  left: 0; top: calc(clamp(1.5rem, 4vw, 2.25rem) + .3em);
  width: .72rem; height: .62rem;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibWsiIHZpZXdCb3g9IjMxNSA1NDcgMTcyIDE0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrYnJhc3MiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4RjZDM0MiLz48c3RvcCBvZmZzZXQ9IjAuNDUiIHN0b3AtY29sb3I9IiNCRTk0NTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNEREI4NzciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwxMjU0LjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0idXJsKCNrYnJhc3MpIiBzdHJva2U9Im5vbmUiPgogICAgPHBhdGggZD0iTTM0MjAgNzA1OSBjLTExNCAtMjIgLTIxMSAtMTAyIC0yNTAgLTIwNiAtMjAgLTU0IC0yMSAtNzEgLTE4IC01MjIKbDMgLTQ2NiAyNCAtNTAgYzM1IC03MCA5NyAtMTI4IDE2NyAtMTU2IGw1OSAtMjQgNTY1IC0zIGMzOTAgLTMgNTg1IDAgNjMxIDgKMTIzIDIxIDIwOSA5MyAyNTEgMjA4IDE1IDQyIDE3IDk5IDE4IDUwNyBsMCA0NjAgLTI4IDYwIGMtNDggMTAxIC0xMzcgMTY2Ci0yNTMgMTg1IC03OCAxMiAtMTEwNCAxMiAtMTE2OSAtMXogbTExODkgLTE5NCBjMTkgLTExIDQzIC0zMyA1NSAtNDggMjEgLTI4CjIxIC0zNyAyMSAtNDcyIDAgLTQzMyAwIC00NDQgLTIxIC00NzIgLTQ3IC02NSAtMzEgLTYzIC02NTQgLTYzIC01MzIgMCAtNTY3CjEgLTYwMCAxOSAtNzIgMzggLTcxIDI4IC03MSA1MTUgMCAzNjggMiA0MzkgMTUgNDY0IDE2IDMxIDUzIDYwIDk1IDczIDE0IDQKMjc0IDcgNTc2IDYgNTMwIC0yIDU1MSAtMyA1ODQgLTIyeiIvPgogIDwvZz48L3N2Zz4=") no-repeat center / contain;
}
.timeline li:first-child{ border-top: 0; }
.timeline h3{
  font-size: var(--t-md);
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.03em;
}
.when{
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dim);
  font-variant-numeric: tabular-nums;
}
.where{
  font-size: var(--t-sm);
  color: var(--bone-70);
}
.what{
  font-size: var(--t-sm);
  color: var(--bone-70);
  line-height: 1.6;
  max-width: 56ch;
  margin-top: .35rem;
}

@media (min-width: 52rem){
  .timeline li{
    grid-template-columns: 12rem 1fr;
    column-gap: clamp(2rem, 5vw, 4rem);
    padding-left: 1.8rem;
  }
  .when{ grid-row: 1 / span 3; padding-top: .45rem; }
  .timeline h3, .where, .what{ grid-column: 2; }
}

/* ── craft ──────────────────────────────────────────────── */

.craft{ padding-block: var(--stack); }

.craft-grid{
  display:grid;
  gap: clamp(1.75rem, 4vw, 2.5rem) clamp(2rem, 6vw, 5rem);
}
.craft-grid > div{ display:grid; gap:.55rem; align-content:start; }
.craft-grid h3{
  font-size: var(--t-md);
  font-variation-settings: "wdth" 105;
}
.craft-grid p{
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 44ch;
}

@media (min-width: 46rem){
  .craft-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 62rem){
  .craft-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ── contact ────────────────────────────────────────────── */

.contact{
  padding-block: var(--stack);
  display:grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}
.contact-body{ display:grid; gap: 1.25rem; align-content:center; }
.contact-body h2{ font-size: var(--t-lg); }
.contact-body p{
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.65;
  max-width: 44ch;
}

.cta{
  justify-self:start;
  width: fit-content;
  display:inline-flex; align-items:center;
  background: var(--metal);
  color: var(--ink-900);
  box-shadow: inset 0 1px 0 oklch(0.80 0.10 58 / 0.5);
  text-decoration:none;
  font-weight: 650;
  font-size: var(--t-sm);
  letter-spacing: -0.01em;
  padding: .9rem 1.4rem;
  transition: transform .4s var(--ease), background-color .4s var(--ease);
}
.cta::after{
  content:"";
  width: .55em; height: .55em;
  margin-left: .7em;
  border-right: 2.5px solid currentColor;
  border-top: 2.5px solid currentColor;
  border-radius: 0 3px 0 0;
  transform: rotate(45deg);
  transition: transform .35s var(--ease);
}
.cta:hover{ transform: translateY(-2px); box-shadow: 0 0 22px oklch(0.70 0.10 82 / 0.45), inset 0 1px 0 oklch(0.82 0.10 58 / 0.7); }
.cta:hover::after{ transform: rotate(45deg) translate(2px, -2px); }

.elsewhere{
  list-style:none; margin:0; padding:0;
  display:flex; gap: 1.5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.elsewhere a{
  color: var(--bone-45);
  text-decoration:none;
  border-bottom: 1px solid var(--line);
  padding-bottom: .2rem;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.elsewhere a:hover{ color: var(--brass); border-color: var(--brass-dim); }

.contact-body{ max-width: 44rem; }

/* ── footer ─────────────────────────────────────────────── */

.foot{
  padding: clamp(1.5rem, 4vw, 2.5rem) var(--gut) clamp(2.5rem, 6vw, 4rem);
  border-top: 1px solid var(--line);
  display:flex; flex-wrap:wrap; gap: .5rem 2rem;
  justify-content: space-between;
  font-size: var(--t-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bone-45);
}

/* ── motion ─────────────────────────────────────────────── */
/* Content is visible by default; the reveal only refines an
   already-painted page (see .is-in in app.js). */

@media (prefers-reduced-motion: no-preference){
  .will-reveal{
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .8s var(--ease), transform .8s var(--ease);
  }
  .will-reveal.is-in{ opacity: 1; transform: none; }

  .hero h1, .hero .lede, .hero .roles{
    animation: rise .9s var(--ease) both;
  }
  .hero .lede{ animation-delay: .09s; }
  .hero .roles{ animation-delay: .16s; }

  @keyframes rise{
    from{ opacity:0; transform: translateY(18px); }
    to{ opacity:1; transform:none; }
  }
}


/* ── brand v2: pull, frames, hats, giant footer (restored) ── */

.pull{
  font-size: var(--t-lg);
  font-weight: 700;
  font-variation-settings: "wdth" 112;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 16ch;
  text-wrap: balance;
  margin-bottom: clamp(1.75rem, 5vw, 3rem);
}
.pull em, .statement-q em{
  font-style: normal;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* photo brackets: всегда ПАРА углов tl+br */
.framed{ position: relative; display: block; }
.framed img{ border-radius: clamp(0.9rem, 2.2vw, 1.35rem); }
.roll-grid img{ border-radius: clamp(0.7rem, 1.8vw, 1.1rem); }
.framed::before, .framed::after{
  content:"";
  position:absolute;
  width: clamp(2.5rem, 6vw, 3.75rem);
  height: clamp(2.5rem, 6vw, 3.75rem);
  border: 2.5px solid var(--brass);
  z-index: 1;
  pointer-events:none;
}
.framed::before{ top:-8px; left:-8px; border-right:0; border-bottom:0; border-radius: clamp(0.9rem, 2.2vw, 1.35rem) 0 0 0; }
.framed::after{ bottom:-8px; right:-8px; border-left:0; border-top:0; border-radius: 0 0 clamp(0.9rem, 2.2vw, 1.35rem) 0; }

/* ── giant footer wordmark ── */
.foot{ display:block; padding-top: clamp(3rem, 7vw, 5rem); }
.foot-brand{ margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); color: var(--bone); }
.foot-brand .wm{ height: clamp(30px, 5vw, 46px); width:auto; display:block; }
.foot-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 2rem;
  justify-content: space-between;
}

/* ── band: фото во всю ширину, текст под ним, ничего не режем ── */

.band{
  padding: 0;
  margin-block: calc(var(--stack) * 0.35);
}
.band-media{ position: static; }
.band-media img{
  width: 100%;
  height: auto;
  display: block;
}
.band-media::after{ display: none; }
.band-body{
  padding: clamp(1.1rem, 3vw, 1.75rem) var(--gut) 0;
  display: grid;
  gap: .5rem;
  max-width: 46rem;
}
.band-body::before{ display: none; }
.band-body h2{
  font-size: var(--t-md);
  font-variation-settings: "wdth" 108;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-shadow: none;
}
.band-body p{
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.55;
}

/* ── final polish (critique 22.08) ──────────────────────── */

@media (min-width: 62rem){
}

/* тумблер: металл вместо белой пилюли */

/* statement: рамка прижата к тексту */
.statement{ padding-block: calc(var(--stack) * 0.6); }
.statement-q{
  width: fit-content;
  max-width: min(46rem, 100%);
  padding: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1.5rem, 5vw, 3rem);
}

/* финал — пик, не сноска */
.contact-body h2{ font-size: var(--t-xl); }
.cta{ font-size: var(--t-base); padding: 1.05rem 1.8rem; }

/* металл ведёт себя как металл: блик на hover */
.cta{ position: relative; overflow: hidden; }
.cta::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 40%, oklch(0.93 0.06 60 / 0.5) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events:none;
}
.cta:hover::before{ transform: translateX(120%); }

/* ритм: половинные стыки после визуальных пауз */
.scale{ padding-block: calc(var(--stack) * 0.7); }
.craft{ padding-block: calc(var(--stack) * 0.7); }

/* сцены: лёгкий scroll-параллакс где поддерживается */

/* hero: вход-хореография фото */
@media (prefers-reduced-motion: no-preference){
  }

/* подписи от первого лица */
.hero-cap, .band-cap{
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-top: .15rem;
}
.hero-cap{ color: var(--brass-dim); }

/* ── camera roll gallery ────────────────────────────────── */

.roll{ padding-block: var(--stack); }
.roll-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(0.9rem, 3vw, 1.5rem);
}
.roll-grid figure{ margin: 0; display: grid; gap: .5rem; align-content: start; }
.roll-grid img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.roll-grid figcaption{
  font-size: var(--t-xs);
  line-height: 1.45;
  color: var(--bone-45);
}
@media (min-width: 52rem){
  .roll-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}

.contact-side{
  color: var(--bone-45);
  font-size: var(--t-sm);
}

/* ── built (v3) ─────────────────────────────────────────── */

.built{ padding-block: var(--stack); }
.built-list{
  list-style:none; margin:0; padding:0;
  display:grid;
}
.built-list li{
  display:grid; gap:.35rem;
  padding: clamp(1.4rem, 4vw, 2rem) 0;
  border-bottom: 1px solid var(--line);
}
.built-list li:first-child{ border-top: 1px solid var(--line); }
.b-place{
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dim);
}
.built-list h3{
  font-size: var(--t-md);
  font-variation-settings: "wdth" 108;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.built-list li > p:not(.b-place){
  color: var(--bone-70);
  font-size: var(--t-sm);
  line-height: 1.6;
  max-width: 72ch;
}
.built-list a{ color: var(--brass); font-weight: 600; }
.b-img{ margin-top: 1rem; max-width: 34rem; }
.b-img img{ width:100%; display:block; border: 1px solid var(--line); }



/* ── built v3.1: группы + иконки ────────────────────────── */

.b-group{ margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.b-group .b-place{
  display:flex; align-items:center; gap:.55rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line-strong);
}
@media (max-width: 62rem){
  .b-group .b-place{ justify-content: center; }
}
.ico{
  width: 1.15rem; height: 1.15rem;
  fill: none; stroke: var(--brass); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}
.built-list li{ position: relative; padding-left: 1.4rem; }
.built-list li::before{
  content:"";
  position:absolute; left:0; top: calc(clamp(1.4rem, 4vw, 2rem) + .4em);
  width: .72rem; height: .62rem;
  background: url("data:image/svg+xml;base64,PHN2ZyBjbGFzcz0ibWsiIHZpZXdCb3g9IjMxNSA1NDcgMTcyIDE0NCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrYnJhc3MiIHgxPSIwIiB5MT0iMCIgeDI9IjAiIHkyPSIxIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiM4RjZDM0MiLz48c3RvcCBvZmZzZXQ9IjAuNDUiIHN0b3AtY29sb3I9IiNCRTk0NTUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNEREI4NzciLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCwxMjU0LjAwMDAwMCkgc2NhbGUoMC4xMDAwMDAsLTAuMTAwMDAwKSIgZmlsbD0idXJsKCNrYnJhc3MpIiBzdHJva2U9Im5vbmUiPgogICAgPHBhdGggZD0iTTM0MjAgNzA1OSBjLTExNCAtMjIgLTIxMSAtMTAyIC0yNTAgLTIwNiAtMjAgLTU0IC0yMSAtNzEgLTE4IC01MjIKbDMgLTQ2NiAyNCAtNTAgYzM1IC03MCA5NyAtMTI4IDE2NyAtMTU2IGw1OSAtMjQgNTY1IC0zIGMzOTAgLTMgNTg1IDAgNjMxIDgKMTIzIDIxIDIwOSA5MyAyNTEgMjA4IDE1IDQyIDE3IDk5IDE4IDUwNyBsMCA0NjAgLTI4IDYwIGMtNDggMTAxIC0xMzcgMTY2Ci0yNTMgMTg1IC03OCAxMiAtMTEwNCAxMiAtMTE2OSAtMXogbTExODkgLTE5NCBjMTkgLTExIDQzIC0zMyA1NSAtNDggMjEgLTI4CjIxIC0zNyAyMSAtNDcyIDAgLTQzMyAwIC00NDQgLTIxIC00NzIgLTQ3IC02NSAtMzEgLTYzIC02NTQgLTYzIC01MzIgMCAtNTY3CjEgLTYwMCAxOSAtNzIgMzggLTcxIDI4IC03MSA1MTUgMCAzNjggMiA0MzkgMTUgNDY0IDE2IDMxIDUzIDYwIDk1IDczIDE0IDQKMjc0IDcgNTc2IDYgNTMwIC0yIDU1MSAtMyA1ODQgLTIyeiIvPgogIDwvZz48L3N2Zz4=") no-repeat center / contain;
}
.built-list li:first-child{ border-top: 0; }

@media (min-width: 62rem){
  .built .b-group{ margin-top: clamp(1.5rem, 4vw, 2.25rem); }
  .built-list li{
    grid-template-columns: 1fr;
    padding-left: 1.6rem;
  }
  .b-place{ grid-row: auto; padding-top: 0; }
}

/* ── track: свёрнутый хвост ─────────────────────────────── */

.track-more{ margin-top: .5rem; }
.sb-more{ margin-top: clamp(1.5rem, 4vw, 2.25rem); }
.sb-more summary{ border-bottom: 1px solid var(--line-strong); }
.track-more summary{
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dim);
  padding: .8rem 0;
}
.track-more summary::-webkit-details-marker{ display:none; }
.track-more summary::after{
  content:"";
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--brass-dim);
  border-bottom: 2px solid var(--brass-dim);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.track-more[open] summary::after{ transform: rotate(-135deg); }
.track-more .timeline{ opacity: .85; }
@media (min-width: 62rem){
}

/* proof-фото: подпись под кадром */
.split-media figcaption{ margin-top: .45rem; }


/* лого-метки групп и иконки навыков */
.b-place .lgo{ height: 1.3rem; width: auto; color: var(--brass); }
.b-place .lgo-img{ height: 1.15rem; }
.lgo-word{
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--brass);
  font-size: 1rem;
  line-height: 1;
}
.cico{
  width: 1.25rem; height: 1.25rem;
  fill: none; stroke: var(--brass); stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  margin-right: .55rem;
  vertical-align: -0.18em;
}
.qmark{ color: var(--brass); font-weight: 700; }

/* лого-метки без текста + гравюры */
.b-place .lgo-img{ height: 1.6rem; }
.b-place .lgo{ height: 1.6rem; }
.b-place .lgo-buk{ height: 1.05rem; }
.hero-engr{
  width: min(22rem, 78%);
  height: auto;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  opacity: .9;
}


/* v3.5: гравюры у ролей, сведённые лого, подпись-цитата, веса */
.role-engr{
  display:block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin-top: .8rem;
  opacity: .92;
}
.b-place .lgo, .b-place .lgo-img{ height: 2.1rem; width:auto; overflow: visible; padding-block: .1rem; }
.b-place .lgo-buk{ height: 1.45rem; }
.b-place .lgo-cif{ height: 3rem; }
.sign-quote{
  margin-top: .9rem;
  font-size: var(--t-md);
  font-weight: 500;
  font-variation-settings: "wdth" 105;
  letter-spacing: -0.01em;
  color: var(--bone-70);
}
.qmark{ font-weight: 500; }
/* веса: свести маячащие */
.built-list a{ font-weight: 500; }
.cta{ font-weight: 600; }
.roles dt{ font-weight: 600; }
.lgo-word{ font-weight: 700; }
.track-more summary{ font-weight: 500; }
.b-place .lgo-gv{ height: 2.8rem; }

/* ── стратосфера: тост, хореография, прорисовка гравюр ──── */

.cta-row{ display:flex; align-items:center; gap:.7rem; }
.copy-btn{
  appearance:none; border:1px solid var(--line-strong); background:none;
  font: inherit; font-size: var(--t-xs);
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--bone-70);
  padding:.65rem .9rem; border-radius:8px; cursor:pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.copy-btn:hover{ color: var(--brass); border-color: var(--brass-dim); }
.toast{
  display:inline-block;
  font-size: var(--t-xs);
  letter-spacing:.08em; text-transform:uppercase;
  color: var(--brass);
  opacity:0; transform: translateY(4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.on{ opacity:1; transform:none; }

@media (prefers-reduced-motion: no-preference){
  /* hero-хореография волной */
  .hero h1{ animation: rise .8s var(--ease) both; }
  .hero .lede{ animation: rise .8s var(--ease) .1s both; }
  .hero-por{ animation: rise .9s var(--ease) .2s both; }
  .hero .sign-quote{ animation: rise .8s var(--ease) .35s both; }
  .hero .roles{ animation: rise .8s var(--ease) .45s both; }
  .role-engr{ animation: engrIn 1.4s var(--ease) .6s both; }
  @keyframes engrIn{
    from{ opacity:0; clip-path: inset(0 100% 0 0); }
    to{ opacity:.92; clip-path: inset(0 0 0 0); }
  }
  /* гравюры «прорисовываются» при скролле */
  .role-engr.scroll-draw{ animation: none; }
}


/* ── desktop acceptance: единая рельса и капы ───────────── */
section, .foot{
  padding-inline: max(var(--gut), calc((100% - 72rem) / 2));
}
.band{ padding-inline: 0; }
.band-body{ padding-inline: max(var(--gut), calc((100% - 72rem) / 2)); }
.band-media img{ aspect-ratio: 21/9; max-height: 60vh; object-fit: cover; object-position: 50% 58%; width:100%; filter: contrast(1.06) brightness(.96); }
@media (min-width: 62rem){
  .band-media{ max-width: 58rem; margin-inline: auto; }
  .band-body{ max-width: 58rem; margin-inline: auto; padding-inline: 0; }
}

@media (min-width: 62rem){
  .hero{ grid-template-columns: minmax(0, 1fr) min(32rem, 42%); align-items: start; }
  .hero-head{ align-self: end; }
  .hero-meta{ align-self: end; }
  .split-media{ max-width: none; }
  .b-place .lgo, .b-place .lgo-img{ height: 2.9rem; }
  .b-place .lgo-buk{ height: 1.9rem; }
  .b-place .lgo-gv{ height: 3.5rem; }
  .b-place .lgo-cif{ height: 3.8rem; }
  .b-group .b-place{ padding-block: .4rem .8rem; }
  .contact{ grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); align-items: center; }
  .contact-mark{ display: grid; justify-items: center; align-content: center; }
}
.scroll-hint{ bottom: clamp(5rem, 12vh, 7rem); }
.contact-mark{ display: none; color: var(--brass); opacity: .9; }
.contact-mark .mk{ width: clamp(7rem, 10vw, 10rem); height: auto; filter: drop-shadow(0 0 14px oklch(0.70 0.10 82 / 0.3)); }
@media (min-width: 62rem){
  .contact-mark{ display: grid; }
}


/* desktop: плотнее и крупнее */
@media (min-width: 62rem){
  :root{
    --stack: 4.75rem;
    --t-sm: 1.02rem;
    --t-base: 1.2rem;
    --t-xs: .84rem;
  }
  .role-engr{ width: clamp(16rem, 21vw, 26rem); }
  .built-list li{ padding-block: 1.3rem; }
  .roll-grid figcaption{ font-size: .92rem; }
}


/* металл-акценты как лого */
.mtl{
  font-style: normal;
  background: var(--metal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* мобайл: центр-баланс */
@media (max-width: 62rem){
  .section-h{ justify-content: center; text-align: center; }
  .pull{ text-align: center; margin-inline: auto; }
  .split h2{ text-align: center; margin-inline: auto; }
  .contact-body{ justify-items: center; text-align: center; }
  .contact-body p{ margin-inline: auto; }
  .cta-row{ justify-content: center; }
  .elsewhere{ justify-content: center; }
  .roll-grid figcaption{ text-align: center; }
  .hero-cap, .band-cap{ text-align: center; }
  .split-media figcaption{ text-align: center; }
}

/* латунь равномернее */
.copy-btn{ border-color: var(--brass-dim); color: var(--brass-dim); }
.copy-btn:hover{ color: var(--brass); border-color: var(--brass); }


/* v3.8: волна Саши 24.08 вечер */
/* уголки концентричны фото: внешний радиус = радиус фото + вынос 8px */
.framed::before{ border-radius: calc(clamp(0.9rem, 2.2vw, 1.35rem) + 8px) 0 0 0; }
.framed::after{ border-radius: 0 0 calc(clamp(0.9rem, 2.2vw, 1.35rem) + 8px) 0; }
/* лого работ крупнее (но меньше заголовков групп) */
.b-place .lgo, .b-place .lgo-img{ height: 2.6rem; }
.b-place .lgo-buk{ height: 1.8rem; }
.b-place .lgo-cif{ height: 3.6rem; }
.b-place .lgo-gv{ height: 3.4rem; }
/* track: латунная пунктирная нить сквозь маркеры */
.timeline{ position: relative; }
.timeline::before{
  content:"";
  position:absolute;
  left: .3rem; top: 1.4rem; bottom: 1.4rem;
  border-left: 2px dotted oklch(0.70 0.10 82 / 0.45);
}
.timeline li::before{ background-color: var(--ink-900); box-shadow: 0 -6px 0 2px var(--ink-900), 0 6px 0 2px var(--ink-900); }
/* мобайл: гравюры и фото по центру, когда уже контейнера */
@media (max-width: 62rem){
  .role-engr{ margin-inline: auto; }
  .hero-engr{ margin-inline: auto; }
  .framed{ margin-inline: auto; }
  .framed img{ margin-inline: auto; }
  .roles{ text-align: center; }
  .roles dd span{ display: block; }
}
/* восстановление после битых селекторов: смысловые абзацы на ступень выше */
.split-body p, .band-body p, .scale-note{ font-size: var(--t-base); }
/* v3.9: правки Саши */
.foot-brand .wm{ height: clamp(20px, 2.6vw, 27px); } /* = шапке */
.split-media .framed{ width: fit-content; margin-inline: auto; } /* 1913 по центру колонки */
.b-place .lgo, .b-place .lgo-img{ height: 3.2rem; }
.b-place .lgo-buk{ height: 2.2rem; }
.b-place .lgo-cif{ height: 4.4rem; }
.b-place .lgo-gv{ height: 4rem; }
/* v3.10 */
.timeline li::before{ background-color: var(--ink-800); box-shadow: 0 -6px 0 2px var(--ink-800), 0 6px 0 2px var(--ink-800); }
.split-media{ display: grid; justify-items: center; }
.amp{ color: var(--brass); font-weight: 600; font-size: 1.3rem; align-self: center; margin-inline: .55rem; }
.b-place{ display: flex; align-items: center; }
.role-engr{ opacity: 1; }
@media (max-width: 62rem){ .b-place{ justify-content: center; } }
.amp{ font-family: system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; font-style: normal; font-weight: 400; font-size: 1.15rem; line-height: 1; color: var(--bone-45); }
/* знак в Talk = кнопка наверх с приколом */
html{ scroll-behavior: smooth; }
.mark-top{ position: relative; display: inline-block; transition: transform .35s var(--ease); }
.mark-top:hover{ transform: translateY(-6px); }
.mark-top::after{
  content: "\2191";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 650;
  color: var(--brass); opacity: 0; transform: translateY(10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.mark-top:hover::after{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .mark-top, .mark-top::after{ transition: none; } }
@media (max-width: 62rem){
  .split-body p{ margin-inline: auto; }
  .sign-quote{ text-align: center; }
}
.split-media{ margin-inline: auto; width: 100%; } /* узкий режим: колонка 34rem по центру */
@media (min-width: 52rem){ .split-media{ margin-inline: 0; } }
/* подпись-росчерк под цитатой */
.sign-img{ display:block; height: clamp(4.2rem, 8vw, 5.8rem); width:auto; margin-top: 1rem; opacity: .95; }
@media (max-width: 62rem){ .sign-img{ margin-inline: auto; } }
/* v3.11: металл-блик при появлении + hover в Built */
.mtl.will-shine{
  background: linear-gradient(105deg, var(--brass-lo) 0%, var(--brass) 38%, oklch(0.88 0.09 88) 50%, var(--brass) 62%, var(--brass-hi) 100%);
  background-size: 300% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text;
}
.mtl.shine{ animation: mtlshine 2.6s cubic-bezier(.3,.1,.3,1) .15s 1 both; }
@keyframes mtlshine{ from{ background-position: 100% 0; } to{ background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce){ .mtl.shine{ animation: none; } }
@media (hover: hover){
  .built-list li{ transition: background-color .25s var(--ease); border-radius: .7rem; }
  .built-list li:hover{ background-color: color-mix(in oklch, var(--bone) 5%, transparent); }
}
/* гравюры: без вплывания, стоят сразу */
.hero .roles{ animation: none; }
.sign-img{ width: auto; aspect-ratio: auto; object-fit: unset; }
figure img.sign-img, .hero-por img.sign-img{ width: auto; aspect-ratio: auto; object-fit: unset; height: clamp(5rem, 9vw, 6.8rem); }

.sign-img{ margin-inline: auto; } /* подпись всегда по центру */
/* подпись: финал — в футере, тонкая, справа (моб: центр) */
.foot .sign-img{ height: clamp(3rem, 5vw, 3.9rem); width:auto; aspect-ratio:auto; margin: 0 0 1.4rem auto; opacity:.95; }
@media (max-width: 62rem){ .foot .sign-img{ margin-inline: auto; } }
.foot .sign-img{ mix-blend-mode: multiply; filter: grayscale(1) contrast(1.15); opacity: .82; } /* без ржавого оттенка */
/* Impressum-строка: тихая, читаемая */
.foot-legal{
  margin: clamp(1.6rem, 3vw, 2.4rem) 0 0;
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--line);
  font-size: var(--t-xs);
  line-height: 1.7;
  color: var(--bone-45);
  max-width: 62ch;
}
.foot-legal a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot-legal a:hover{ color: var(--brass); }
@media (max-width: 62rem){ .foot-legal{ text-align: center; margin-inline: auto; } }
.foot-legal{ text-transform: none; letter-spacing: 0; }
/* v4.0: сдержанность — свечения долой */
.wm-mark{ filter: none; stroke: url(#kbrass); stroke-width: 35; stroke-linejoin: round; }
.facts b, .num, .mtl{ filter: none; }
.contact-mark .mk{ filter: none; }
.cta{ box-shadow: none; }
/* v4.1: плоская латунь вместо металлического градиента — тише и дороже */
.mtl, .facts b, .num, .hero-cap em{
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--brass) !important;
  -webkit-text-fill-color: var(--brass);
}
.mtl.will-shine, .mtl.shine{ animation: none !important; background: none !important; }

/* ══════════════════════════════════════════════════════
   v5 · новые секции: What I run · How I got here · Turnaround · Built · Method
   ══════════════════════════════════════════════════════ */

/* ── What I run ─────────────────────────────── */
.run{ padding-block: var(--stack); }
.run-intro{
  font-size: var(--t-base); color: var(--bone-70);
  max-width: 54ch; margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.run-grid{
  display: grid; gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 52rem){ .run-grid{ grid-template-columns: 1fr 1fr; } }
.run-card{
  display: grid; gap: .9rem; align-content: start;
  padding-top: 1.2rem; border-top: 2px solid var(--brass);
}
.run-kicker{
  margin: 0; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; color: var(--brass); font-weight: 600;
}
.run-card h3{
  margin: 0; font-size: var(--t-md); letter-spacing: -.025em;
  font-variation-settings: "wdth" 104; line-height: 1.15;
}
.run-stats{
  list-style: none; margin: .4rem 0 0; padding: 0;
  display: grid; gap: .1rem;
}
.run-stats li{
  display: grid; grid-template-columns: minmax(0, max-content) 1fr;
  gap: .85rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line);
}
.run-stats li:last-child{ border-bottom: 0; }
.run-stats b{
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem); font-weight: 700;
  color: var(--brass); letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.run-stats span{ font-size: var(--t-sm); color: var(--bone-70); line-height: 1.45; }
.run-body{ margin: .3rem 0 0; font-size: var(--t-sm); color: var(--bone-70); line-height: 1.6; }
.run-claim{
  margin: clamp(2.6rem, 5.5vw, 3.6rem) 0 0; padding-top: 0;
  font-size: var(--t-md); line-height: 1.32; letter-spacing: -.02em;
  max-width: 46ch; font-weight: 500;
}

/* ── How I got here ─────────────────────────── */
.path{ padding-block: var(--stack); }
.path-list{
  list-style: none; margin: 0; padding: 0;
  position: relative;
}
.path-list::before{
  content: ""; position: absolute;
  left: .29rem; top: .9rem; bottom: 2.2rem;
  border-left: 2px dotted oklch(0.70 0.10 82 / .4);
}
.path-step{
  position: relative; padding: 0 0 clamp(1.5rem, 3.4vw, 2.2rem) 2rem;
  display: grid; gap: .3rem;
}
.path-step::before{
  content: ""; position: absolute; left: 0; top: .55rem;
  width: .7rem; height: .6rem;
  background: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIzMTUgNTQ3IDE3MiAxNDQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJrYiIgeDE9IjAiIHkxPSIwIiB4Mj0iMCIgeTI9IjEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzhGNkMzQyIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0RCQjc3OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsMTI1NCkgc2NhbGUoMC4xLC0wLjEpIiBmaWxsPSJ1cmwoI2tiKSI+PHBhdGggZD0iTTM0MjAgNzA1OSBjLTExNCAtMjIgLTIxMSAtMTAyIC0yNTAgLTIwNiAtMjAgLTU0IC0yMSAtNzEgLTE4IC01MjIgbDMgLTQ2NiAyNCAtNTAgYzM1IC03MCA5NyAtMTI4IDE2NyAtMTU2IGw1OSAtMjQgNTY1IC0zIGMzOTAgLTMgNTg1IDAgNjMxIDggMTIzIDIxIDIwOSA5MyAyNTEgMjA4IDE1IDQyIDE3IDk5IDE4IDUwNyBsMCA0NjAgLTI4IDYwIGMtNDggMTAxIC0xMzcgMTY2IC0yNTMgMTg1IC03OCAxMiAtMTEwNCAxMiAtMTE2OSAtMXogbTExODkgLTE5NCBjMTkgLTExIDQzIC0zMyA1NSAtNDggMjEgLTI4IDIxIC0zNyAyMSAtNDcyIDAgLTQzMyAwIC00NDQgLTIxIC00NzIgLTQ3IC02NSAtMzEgLTYzIC02NTQgLTYzIC01MzIgMCAtNTY3IDEgLTYwMCAxOSAtNzIgMzggLTcxIDI4IC03MSA1MTUgMCAzNjggMiA0MzkgMTUgNDY0IDE2IDMxIDUzIDYwIDk1IDczIDE0IDQgMjc0IDcgNTc2IDYgNTMwIC0yIDU1MSAtMyA1ODQgLTIyeiIvPjwvZz48L3N2Zz4=") no-repeat center / contain;
  background-color: var(--bg, transparent);
  box-shadow: 0 -5px 0 3px var(--ink-900), 0 5px 0 3px var(--ink-900);
}
.path-step:last-child{ padding-bottom: 0; }
.path-when{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--brass-dim); font-weight: 600; font-variant-numeric: tabular-nums;
}
.path-body h3{
  margin: 0 0 .25rem; font-size: var(--t-base); font-weight: 650;
  letter-spacing: -.015em; line-height: 1.3;
}
.path-body p{ margin: 0; font-size: var(--t-sm); color: var(--bone-70); max-width: 52ch; line-height: 1.6; }
.path-step.is-peak .path-body h3{ font-size: var(--t-md); letter-spacing: -.025em; }
.path-step.is-peak::before{ transform: scale(1.35); }
.path-foot{
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 0; padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--bone-45); max-width: 62ch; line-height: 1.65;
}

/* ── Turnaround ─────────────────────────────── */
.turn{ padding-block: var(--stack); }
.turn-lead{ display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 56rem){
  .turn-lead{ grid-template-columns: 1fr minmax(0, 20rem); }
}
.turn-headline{
  margin: 0; font-size: var(--t-lg); line-height: 1.1;
  letter-spacing: -.035em; font-weight: 700;
  font-variation-settings: "wdth" 102; max-width: 20ch; text-wrap: balance;
}
.turn-fig{ margin: 0; display: grid; justify-items: center; }
.turn-fig img{ width: 100%; height: auto; display: block; aspect-ratio: 3/4; object-fit: cover; }
.turn-fig figcaption{
  margin-top: .5rem; font-size: var(--t-sm); text-transform: none;
  letter-spacing: -.01em; font-weight: 500; color: var(--bone-70); line-height: 1.45; max-width: 34ch;
}
.ba{
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  display: grid; gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
@media (min-width: 52rem){ .ba{ grid-template-columns: 1fr 1fr; } }
.ba-col{ display: grid; gap: 1rem; align-content: start; }
.ba-label{
  margin: 0; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600;
  padding-bottom: .7rem; border-bottom: 2px solid;
}
.ba-before .ba-label{ color: var(--bone-45); border-color: var(--line-strong); }
.ba-after .ba-label{ color: var(--brass); border-color: var(--brass); }
.ba-col ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; }
.ba-col li{ font-size: var(--t-sm); line-height: 1.62; color: var(--bone-70); }
.ba-col li b{ color: var(--bone); font-weight: 650; }
.ba-before li{ opacity: .82; }
.turn-out{
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0; padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--line);
  font-size: var(--t-md); line-height: 1.35; letter-spacing: -.02em;
  max-width: 44ch; font-weight: 500;
}

/* ── Built ──────────────────────────────────── */
.bgroup{ margin-top: clamp(2.6rem, 6vw, 4rem); }
.bgroup:first-of-type{ margin-top: clamp(1.2rem, 3vw, 2rem); }
.bgroup-head{
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.bico{
  width: 1.35rem; height: 1.35rem; flex: none;
  fill: none; stroke: var(--brass); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.bgroup-head h3{
  margin: 0; font-size: var(--t-md); letter-spacing: -.025em;
  font-variation-settings: "wdth" 104; line-height: 1.15; flex: 1 1 auto;
}
.bgroup-head .b-place{ margin: 0; flex: none; }
.bitems{ display: grid; gap: clamp(1.8rem, 4vw, 2.6rem); }
.bitem h4{
  margin: 0 0 .5rem; font-size: var(--t-base); font-weight: 650;
  letter-spacing: -.015em; line-height: 1.32;
}
.bitem p{ margin: 0 0 .7rem; font-size: var(--t-sm); color: var(--bone-70); line-height: 1.68; max-width: 64ch; }
.bitem p:last-child{ margin-bottom: 0; }

/* лестница бюджета */
.ladder{
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: .5rem; max-width: 34rem;
}
.ladder li{ display: grid; gap: .3rem; }
.ladder-bar{
  display: block; height: 6px; border-radius: 3px;
  background: var(--brass-dim); opacity: .38;
  width: var(--w); min-width: 8px;
  transform-origin: left center; transform: scaleX(0);
  transition: transform .9s cubic-bezier(.22,.7,.3,1);
}
.is-in .ladder-bar, .ladder.is-in .ladder-bar{ transform: scaleX(1); }
.ladder li:nth-child(2) .ladder-bar{ transition-delay: .08s; }
.ladder li:nth-child(3) .ladder-bar{ transition-delay: .16s; }
.ladder li:nth-child(4) .ladder-bar{ transition-delay: .24s; }
.ladder li:nth-child(5) .ladder-bar{ transition-delay: .32s; }
.ladder li.is-now .ladder-bar{ opacity: 1; height: 8px; }
.ladder-t{ font-size: var(--t-xs); color: var(--bone-45); letter-spacing: .01em; }
.ladder li.is-now .ladder-t{ color: var(--bone-70); }
.ladder li.is-now .ladder-t b{ color: var(--brass); font-weight: 650; }

/* сезоны */
.seasons{
  display: grid; gap: 1rem; margin: 1rem 0 1rem;
}
@media (min-width: 44rem){ .seasons{ grid-template-columns: 1fr 1fr; gap: 1.6rem; } }
.season{ padding-left: .9rem; border-left: 2px solid var(--line-strong); }
.season:first-child{ border-color: var(--brass-dim); }
.season-h{
  margin: 0 0 .3rem !important; font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .12em; font-weight: 600; color: var(--brass-dim);
}
.season p:not(.season-h){ margin: 0 !important; font-size: var(--t-sm); }

/* строка-цифры внутри кейса */
.bfig{
  margin-top: .9rem !important; font-size: var(--t-sm);
  color: var(--bone-45); display: flex; flex-wrap: wrap;
  align-items: baseline; gap: .45rem;
}
.bfig b{
  font-size: var(--t-md); color: var(--brass); font-weight: 700;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.bfig-sep{ opacity: .45; }

/* ── How I work ─────────────────────────────── */
.method{ padding-block: var(--stack); }
.mgrid{ display: grid; gap: clamp(1.5rem, 3vw, 2.2rem); }
@media (min-width: 52rem){ .mgrid{ grid-template-columns: 1fr 1fr; } }
.mcard{
  display: grid; gap: .55rem; align-content: start;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
@media (min-width: 52rem){ .mcard-wide{ grid-column: 1 / -1; } }
.mcard h3{
  margin: 0; font-size: var(--t-md); letter-spacing: -.025em;
  line-height: 1.2; font-variation-settings: "wdth" 103; max-width: 24ch;
}
.mcard p{ margin: 0; font-size: var(--t-sm); color: var(--bone-70); line-height: 1.68; max-width: 58ch; }
.mcard-wide h3{ max-width: none; }
.mcard-wide p{ max-width: 72ch; }

/* ── v5.1: использовать ширину на десктопе ── */
@media (min-width: 64rem){
  /* Built: кейсы в две колонки, широкие занимают всю строку */
  .bitems{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(2.5rem, 4vw, 4rem);
    align-items: start;
  }
  .bitem:has(.ladder), .bitem:has(.seasons){ grid-column: 1 / -1; }
  .bitem p{ max-width: 54ch; }
  .bitem:has(.ladder) p, .bitem:has(.seasons) p{ max-width: 68ch; }

  /* How I got here: дата вынесена в свою колонку, текст шире */
  .path-list::before{ left: 8.7rem; }
  .path-step{
    display: grid; grid-template-columns: 7.6rem 1fr;
    column-gap: 2.6rem; padding-left: 0; align-items: start;
  }
  .path-step::before{ left: 8.4rem; top: .5rem; }
  .path-when{ text-align: right; padding-top: .15rem; }
  .path-body{ padding-left: 1.6rem; }
  .path-body p{ max-width: 62ch; }
  .path-foot{ margin-left: 11.8rem; }

  /* Turnaround: заголовок шире, колонки before/after читаемее */
  .turn-headline{ max-width: 16ch; font-size: clamp(2.4rem, 1.4rem + 2.6vw, 3.6rem); }
  .ba-col li{ max-width: 52ch; }

  /* Method: широкая карточка не растягивает строку до края */
  .mcard-wide p{ max-width: 84ch; }
}

/* мобайл: сезоны и лестница не жмутся */
@media (max-width: 43.99rem){
  .season{ padding-left: .8rem; }
  .ladder{ max-width: none; }
}

/* v5.2: фото turnaround не разрастается на планшете */
@media (max-width: 55.99rem){
  .turn-fig{ max-width: 26rem; margin-inline: auto; }
  .turn-fig figcaption{ text-align: center; }
}

/* v5.3: Track = формальный справочник, не второй таймлайн */
.track .timeline::before{ display: none; }
.track .timeline li::before{
  width: .5rem; height: .44rem; opacity: .75;
  box-shadow: none; background-color: transparent;
  top: calc(clamp(1.5rem, 4vw, 2.25rem) + .42em);
}
.track .timeline li{ padding-left: 1.1rem; }
@media (min-width: 52rem){
  .track .timeline li{ padding-left: 1.3rem; grid-template-columns: 11rem 1fr; column-gap: 2.4rem; }
}
.track .what{ margin-top: .3rem; }

/* v5.4: kicker до AA (был 4.33) */
.run-kicker{ color: var(--brass-dim); }

/* v5.5: на узких экранах кейсам нужно больше воздуха между собой */
@media (max-width: 63.99rem){
  .bitems{ gap: clamp(2.4rem, 7vw, 3rem); }
  .bitem h4{ font-size: clamp(1.08rem, 1rem + .5vw, 1.2rem); }
  .mgrid{ gap: clamp(2rem, 6vw, 2.6rem); }
  .path-step{ padding-bottom: clamp(1.9rem, 5vw, 2.4rem); }
}

/* ══════════════════════════════════════════════════════════
   v6 · система визуальных примитивов
   KPI-бенто · сдвиг до/после · чипы · слияние · спеки ·
   сеть точек · процесс · side builds
   ══════════════════════════════════════════════════════════ */

/* ── KPI-бенто ─────────────────────────────────────────── */
.bento{
  display: grid; gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  grid-template-columns: 1fr;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (min-width: 34rem){ .bento{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem){
  /* шесть карточек, три колонки, два ровных ряда: без пустых клеток */
  .bento{ grid-template-columns: repeat(3, 1fr); }
}
/* иерархия через типографику, а не через размер ячейки */
/* v12 п.1: один кегль на все цифры бенто */
.kpi{
  background: var(--ink-900);
  padding: clamp(1.3rem, 3vw, 1.9rem);
  display: grid; gap: .35rem; align-content: start;
  position: relative;
  transition: background-color .25s var(--ease);
}
@media (hover: hover){
  .kpi:hover{ background: color-mix(in oklch, var(--bone) 3.5%, var(--ink-900)); }
}
.kpi-num{
  margin: 0; display: flex; align-items: baseline; gap: .35rem;
  font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.2rem);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
  color: var(--brass); font-variant-numeric: tabular-nums;
  font-variation-settings: "wdth" 100;
}
.kpi-num i{ font-style: normal; font-size: .38em; font-weight: 600; letter-spacing: 0; color: var(--brass-dim); }

.kpi-desc{
  margin: 0; font-size: var(--t-sm); font-weight: 600;
  color: var(--bone); letter-spacing: -.01em; line-height: 1.3; max-width: 26ch;
}
.kpi-ctx{
  margin: .2rem 0 0; font-size: var(--t-xs); color: var(--bone-45);
  line-height: 1.55; max-width: 34ch;
}
.kpi-viz{ margin-top: .8rem; }

/* точки: 95 номеров как сетка */
.dots{ display: grid; grid-template-columns: repeat(19, 6px); gap: 3px; width: max-content; }
.dots i{ display: block; width: 6px; height: 6px; background: var(--brass); border-radius: 1px; opacity: .55; }

/* рычаг: маленький вход, большой охват */
.kpi-leverage{ display: flex; align-items: center; gap: .7rem; }
.kpi-leverage span{ display: grid; gap: .3rem; justify-items: start; }
.kpi-leverage i{ display: block; height: 7px; border-radius: 4px; background: var(--brass); }
.lev-in i{ width: 1.6rem; opacity: .45; }
.lev-out i{ width: 9rem; max-width: 42vw; }
.kpi-leverage em{
  font-style: normal; font-size: var(--t-xs); color: var(--bone-45);
  text-transform: uppercase; letter-spacing: .1em;
}
.lev-arrow{
  width: 1.1rem; height: 1px; background: var(--line-strong); position: relative; flex: none;
  align-self: center; margin-top: -.55rem;
}
.lev-arrow::after{
  content: ""; position: absolute; right: 0; top: -2.5px;
  border: 3px solid transparent; border-left-color: var(--line-strong);
}
/* сегменты: 4 бизнеса */
.kpi-seg{ display: flex; gap: 4px; }
.kpi-seg i{ display: block; height: 7px; flex: 1; background: var(--brass); border-radius: 2px; opacity: .5; }
.kpi-seg i:first-child{ opacity: 1; }

/* ── Сдвиг: было → стало ───────────────────────────────── */
.shift{
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(.8rem, 2.5vw, 1.6rem); align-items: end;
  margin: clamp(1.8rem, 4vw, 2.4rem) 0 clamp(1.2rem, 3vw, 1.6rem);
  max-width: 30rem;
}
.shift-state{ display: grid; gap: .3rem; align-content: end; }
.shift-label{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: var(--bone-45);
}
.shift-now .shift-label{ color: var(--brass); }
.shift-val{ font-size: var(--t-sm); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.shift-bar{
  display: block; height: 4.5rem; width: 100%; margin-top: .5rem;
  background: var(--line-strong); border-radius: 2px;
  transform: scaleY(var(--sy, 0)); transform-origin: bottom;
  transition: transform .85s cubic-bezier(.22,.7,.3,1);
}
.shift-now .shift-bar{ background: var(--brass); }
.is-in .shift-bar, .shift.is-in .shift-bar{ --sy: 1; }
.shift-then .shift-bar{ height: calc(4.5rem * .3); }
.shift-arrow{
  width: 1.4rem; height: 1px; background: var(--line-strong);
  position: relative; margin-bottom: 2.1rem;
}
.shift-arrow::after{
  content: ""; position: absolute; right: 0; top: -3px;
  border: 3.5px solid transparent; border-left-color: var(--line-strong);
}

/* ── Чипы ──────────────────────────────────────────────── */
.chips{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .45rem;
}
.chips li{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--bone-70);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .3rem .7rem;
}
.chips-sm{ margin-top: 1rem; }
.chips-sm li{ text-transform: none; letter-spacing: .01em; font-weight: 500; color: var(--bone-45); }

/* ── Слияние двух в одно ───────────────────────────────── */
.merge{
  display: grid; gap: .5rem; margin: 1.2rem 0 0;
  grid-template-columns: 1fr 1fr; align-items: center;
  max-width: 28rem;
}
.merge-a, .merge-b, .merge-out{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  font-weight: 600; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: .55rem .5rem; color: var(--bone-70);
}
.merge-join{
  grid-column: 1 / -1; height: 1.5rem; position: relative;
}
.merge-join::before, .merge-join::after{
  content: ""; position: absolute; top: 0; width: 25%; height: 100%;
  border-bottom: 1px solid var(--line-strong);
}
.merge-join::before{ left: 25%; border-left: 1px solid var(--line-strong); border-bottom-left-radius: 6px; }
.merge-join::after{ right: 25%; border-right: 1px solid var(--line-strong); border-bottom-right-radius: 6px; }
.merge-out{
  grid-column: 1 / -1; border-color: var(--brass); color: var(--brass);
}

/* ── Спеки продукта ────────────────────────────────────── */
.specs{
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 40rem){ .specs{ grid-template-columns: repeat(4, 1fr); } }
.specs li{
  background: var(--ink-900); padding: .8rem .85rem;
  display: grid; gap: .1rem;
}
.specs b{
  font-size: var(--t-md); font-weight: 700; color: var(--brass);
  letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.specs span{ font-size: var(--t-xs); color: var(--bone-45); line-height: 1.4; }

/* ── Сеть точек (Bukovel) ──────────────────────────────── */
.net{ display: grid; gap: .7rem; margin: 1.1rem 0 0; max-width: 32rem; }
.net-row{
  display: grid; grid-template-columns: 8.5rem 1fr auto;
  gap: .9rem; align-items: center;
}
.net-k{ font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--bone-45); font-weight: 600; }
.net-nodes{ display: flex; gap: 3px; flex-wrap: wrap; }
.net-nodes i{
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brass); opacity: .6;
  transform: scale(0); transition: transform .4s var(--ease);
}
.is-in .net-nodes i, .net.is-in .net-nodes i{ transform: scale(1); }
.net-bar{
  display: block; height: 7px; border-radius: 4px; background: var(--brass); opacity: .45;
  width: var(--w); transform-origin: left; transform: scaleX(0);
  transition: transform .8s cubic-bezier(.22,.7,.3,1);
}
.is-in .net-bar, .net.is-in .net-bar{ transform: scaleX(1); }
.net-v{
  font-size: var(--t-base); font-weight: 700; color: var(--brass);
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; text-align: right; min-width: 3ch;
}
@media (max-width: 34rem){
  .net-row{ grid-template-columns: 1fr auto; }
  .net-nodes, .net-bar{ grid-column: 1 / -1; order: 3; }
}

/* ── Процесс (TOKA) ────────────────────────────────────── */
.flow{
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  counter-reset: step;
}
.flow li{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .09em;
  font-weight: 600; color: var(--bone-70);
  display: flex; align-items: center; gap: .5rem;
}
.flow li::after{
  content: ""; width: .9rem; height: 1px; background: var(--line-strong);
}
.flow li:last-child{ color: var(--brass); }
.flow li:last-child::after{ display: none; }

/* ── Side builds ───────────────────────────────────────── */
.side{ padding-block: var(--stack); }
.side-intro{ margin: 0 0 clamp(1.6rem, 3.5vw, 2.4rem); font-size: var(--t-sm); color: var(--bone-70); max-width: 52ch; }
.side-grid{ display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 56rem){ .side-grid{ grid-template-columns: 1fr 1fr; } }
.sbuild{ display: grid; gap: .7rem; align-content: start; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sbuild-head{ display: grid; gap: .2rem; }
.sbuild-head h3{ margin: 0; font-size: var(--t-md); letter-spacing: -.025em; line-height: 1.15; }
.sbuild-meta{ font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--bone-45); font-weight: 600; }
.sbuild p{ margin: 0; font-size: var(--t-sm); color: var(--bone-70); line-height: 1.68; max-width: 56ch; }

/* ── Featured-кейсы: больше веса ───────────────────────── */
.bitem-feat h4{ font-size: var(--t-md); letter-spacing: -.025em; line-height: 1.2; }
@media (min-width: 64rem){
  .bitems:has(.bitem-feat) .bitem-feat{ grid-column: 1 / -1; }
  .bitem-feat p{ max-width: 68ch; }
}

/* рельс карьеры заполняется по скроллу */
.path-list{ --fill: 0; }
.path-list::after{
  content: ""; position: absolute;
  left: .29rem; top: .9rem; width: 2px;
  height: calc((100% - 3.1rem) * var(--fill) / 100 * 1);
  max-height: calc(100% - 3.1rem);
  background: var(--brass); opacity: .8; border-radius: 2px;
  transition: height .12s linear;
}
@media (min-width: 64rem){ .path-list::after{ left: 8.7rem; } }
@media (prefers-reduced-motion: reduce){ .path-list::after{ transition: none; } }

/* ── Camera roll: editorial-сетка вместо ровного грида ── */
@media (min-width: 56rem){
  .roll-grid{
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(1rem, 2.2vw, 1.6rem) clamp(1rem, 2vw, 1.5rem);
    align-items: start;
  }
  /* крупный кадр открывает ряд, рядом два поменьше */
  .roll-grid figure:nth-child(1){ grid-column: span 3; }
  .roll-grid figure:nth-child(2){ grid-column: span 3; }
  .roll-grid figure:nth-child(3){ grid-column: span 2; }
  .roll-grid figure:nth-child(4){ grid-column: span 2; }
  .roll-grid figure:nth-child(5){ grid-column: span 2; }
  .roll-grid figure:nth-child(6){ grid-column: span 3; }
  .roll-grid figure:nth-child(7){ grid-column: span 3; }
  .roll-grid figure:nth-child(8){ grid-column: span 2; }
  .roll-grid figure:nth-child(1) img,
  .roll-grid figure:nth-child(6) img{ aspect-ratio: 4 / 3; }
  .roll-grid figure:nth-child(2) img,
  .roll-grid figure:nth-child(7) img{ aspect-ratio: 4 / 3; }
  /* подпись проявляется по наведению, но остаётся в потоке для доступности */
  .roll-grid figcaption{ transition: opacity .3s var(--ease); opacity: .62; }
  .roll-grid figure:hover figcaption{ opacity: 1; }
}
@media (min-width: 34rem) and (max-width: 55.99rem){
  .roll-grid{ grid-template-columns: 1fr 1fr; }
}
.hero-meta-line{
  margin: clamp(1rem, 2.5vw, 1.4rem) 0 0; font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .12em; font-weight: 600;
  color: var(--bone-45);
}
@media (max-width: 62rem){ .hero-meta-line{ text-align: center; } }

/* v6.1: столбики сдвига читаются как индикаторы, не как заливка */
.shift-bar{ width: 2.2rem; border-radius: 3px; }
.shift{ max-width: 26rem; }
@media (max-width: 34rem){
  .shift{ grid-template-columns: 1fr auto 1fr; gap: .7rem; }
  .shift-bar{ width: 1.7rem; height: 3.6rem; }
  .shift-then .shift-bar{ height: calc(3.6rem * .3); }
  .shift-arrow{ margin-bottom: 1.7rem; }
}

/* ── Фото-паузы между плотными секциями ── */
.pause{
  margin: 0; display: grid; gap: .7rem;
  padding-inline: max(var(--gut), calc((100% - 72rem) / 2));
  padding-block: clamp(1rem, 3vw, 2rem);
}
.pause img{
  width: 100%; height: auto; display: block;
  border-radius: clamp(0.7rem, 1.8vw, 1.1rem);
  object-fit: cover;
}
.pause figcaption{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--bone-45); font-weight: 600;
}
.pause-wide img{ aspect-ratio: 21 / 9; }
@media (max-width: 46rem){ .pause-wide img{ aspect-ratio: 4 / 3; } }
.pause-split img{ aspect-ratio: 4 / 5; }
@media (min-width: 56rem){
  .pause-split{
    grid-template-columns: minmax(0, 22rem) 1fr;
    align-items: end; gap: 1.4rem;
  }
  .pause-split figcaption{ padding-bottom: .4rem; font-size: var(--t-md); text-transform: none; letter-spacing: -.02em; color: var(--bone-70); font-weight: 500; max-width: 22ch; }
}

/* v6.2: merge-диаграмма не растягивается на широких */
.merge{ max-width: 24rem; }
@media (min-width: 64rem){ .merge{ max-width: 26rem; } }

/* v6.3: Track возвращён в общую рельсу — был единственной секцией вне сетки */
.track{ padding-inline: max(var(--gut), calc((100% - 72rem) / 2)); }

/* ══════════════════════════════════════════════════════════
   v7 · editorial-раскладка: заголовок слева, тело справа.
   Убирает дыры двухколоночной сетки; правая колонка всегда полна.
   ══════════════════════════════════════════════════════════ */

/* — отмена двухколоночной сетки кейсов из v5.1 — */
@media (min-width: 64rem){
  .bitems{ grid-template-columns: 1fr !important; column-gap: 0 !important; }
  .bitem:has(.ladder), .bitem:has(.seasons), .bitems:has(.bitem-feat) .bitem-feat{ grid-column: auto !important; }
}

/* — кейс: label | body — */
.bitems{ gap: 0; }
.bitem{
  display: grid; grid-template-columns: 1fr; gap: .45rem;
  padding-block: clamp(1.4rem, 3.2vw, 2rem);
  border-top: 1px solid var(--line);
}
.bitem:first-child{ border-top: 0; padding-top: .4rem; }
.bitem h4{ margin: 0; }
.bitem p{ max-width: 60ch !important; }
@media (min-width: 56rem){
  .bitem{
    grid-template-columns: minmax(14rem, 19rem) 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem); row-gap: .6rem;
    align-items: start;
  }
  .bitem > h4{ grid-column: 1; padding-right: 1rem; }
  .bitem > .bbody{ grid-column: 2; display: grid; gap: .6rem; align-content: start; }
  .bitem-feat h4{ font-size: var(--t-md); }
  .bitem p{ max-width: 62ch !important; }
}
.bitem .ladder, .bitem .merge, .bitem .specs, .bitem .net, .bitem .chips-sm, .bitem .bfig{ margin-top: .6rem; }

/* группы: воздух и заголовок без иконки-«эмодзи» слева — иконка остаётся, но тише */
.bgroup{ margin-top: clamp(2.8rem, 6vw, 4.4rem); }
.bgroup-head{ margin-bottom: .2rem; }
.bico{ opacity: .75; }

/* — How I work: та же раскладка — */
@media (min-width: 52rem){
  .mgrid{ grid-template-columns: 1fr !important; gap: 0 !important; }
  .mcard-wide{ grid-column: auto !important; }
  .mcard{
    grid-template-columns: minmax(14rem, 19rem) 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
    padding-block: clamp(1.4rem, 3vw, 1.9rem);
  }
  .mcard h3{ max-width: none; font-size: var(--t-base); font-weight: 650; line-height: 1.3; }
  .mcard p, .mcard-wide p{ max-width: 62ch; }
}

/* — hero: колонка текста не должна висеть над дырой — */
@media (min-width: 62rem){
  .hero-por img{ max-height: min(78vh, 46rem); width: 100%; object-fit: cover; }
}

/* — бенто: выровнять содержимое по вертикали, viz к низу — */
.kpi{ grid-template-rows: auto auto 1fr auto; }
.kpi-viz{ align-self: end; }
.kpi-ctx{ min-height: 2.6em; }

/* — фото-паузы — */
.pause-wide img{ aspect-ratio: 21 / 9; }
.pause-quote{ gap: 0; padding-block: clamp(1.5rem, 4vw, 2.6rem); }
.pause-quote img{ aspect-ratio: 21 / 9; width: 100%; height: auto; object-fit: cover; object-position: center 30%; }
@media (max-width: 46rem){ .pause-quote img{ aspect-ratio: 4 / 3; } }
.pause-quote figcaption{
  display: grid; gap: .35rem; padding-top: clamp(1.1rem, 2.6vw, 1.6rem);
  text-transform: none; letter-spacing: 0; color: var(--bone);
}
.pq-text{
  font-size: var(--t-md); font-weight: 500; line-height: 1.3; letter-spacing: -.02em;
  max-width: 30ch; text-wrap: balance;
}
.pq-src{
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--bone-45); font-weight: 600;
}
.pause-split figcaption em{ font-style: normal; }
@media (min-width: 56rem){
  .pause-split{ grid-template-columns: minmax(0, 26rem) 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: end; }
  .pause-split figcaption{ font-size: var(--t-lg); line-height: 1.15; letter-spacing: -.03em; max-width: 16ch; }
}
@media (max-width: 62rem){
  .pause-quote figcaption, .pause-split figcaption{ text-align: center; justify-items: center; }
  .pause-split figcaption{ font-size: var(--t-md); }
}

/* v7.1: тела кейсов и принципов в контейнере, без фантомных строк грида */
.bbody, .mbody{ display: grid; gap: .6rem; align-content: start; }
.bbody > p, .mbody > p{ margin: 0; }
@media (min-width: 52rem){
  .mcard > h3{ grid-column: 1; }
  .mcard > .mbody{ grid-column: 2; }
}

/* v7.2: индикатор then/now по одной верхней линии; точки 40 в два ряда */
.shift{ align-items: start; }
.shift-state{ align-content: start; grid-template-rows: auto auto 4.5rem; }
.shift-bar{ align-self: end; }
.shift-arrow{ margin-bottom: 0; margin-top: 3.4rem; }
@media (max-width: 34rem){ .shift-state{ grid-template-rows: auto auto 3.6rem; } .shift-arrow{ margin-top: 3rem; } }
.dots-40{ grid-template-columns: repeat(20, 1fr); max-width: 9.5rem; }

/* v7.3: hero — текстовая колонка собрана к верху, портрет держит высоту справа */
@media (min-width: 62rem){
  .hero{ grid-template-rows: auto 1fr; align-items: start; }
  .hero-head{ align-self: start; }
  .hero-meta{ align-self: start; margin-top: clamp(1.6rem, 3.2vw, 2.6rem); }
  .hero-por img{ max-height: none; }
}
/* v7.4: контраст капса в диаграмме слияния до AA */
.merge-out{ color: var(--brass-dim); border-color: var(--brass-dim); }

/* v7.5: свои портреты только в hero; паузы стали типографическими */
.pull-quote{
  margin: 0; padding: clamp(2.2rem, 5vw, 3.6rem) max(var(--gut), calc((100% - 72rem) / 2));
  display: grid; gap: .45rem; justify-items: start;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pull-quote .pq-text{ margin: 0; font-size: var(--t-lg); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; max-width: 22ch; text-wrap: balance; }
.pull-quote .pq-src{ margin: .2rem 0 0; }
.pull-axis .pq-text{ max-width: 18ch; }
.pull-axis .mtl{ font-weight: 600; }
@media (max-width: 62rem){ .pull-quote{ justify-items: center; text-align: center; } }

/* ══ v8 · по списку 02.09: без стрелок, без декоративных схем, всё влево на мобиле, print ══ */
/* стрелки долой */
.cta::after{ display: none; }
.flow li::after{ content: ""; width: .9rem; height: 1px; background: var(--line-strong); }
/* then/now одной строкой */
.shift-line{ margin: clamp(1.2rem, 3vw, 1.8rem) 0 clamp(1rem, 2.5vw, 1.4rem); display: flex; flex-wrap: wrap; gap: .6rem 2.2rem; font-size: var(--t-sm); color: var(--bone-70); }
.shift-line b{ display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--bone-45); margin-bottom: .15rem; }
.shift-line .shift-now b{ color: var(--brass-dim); }
.shift-line .shift-now{ color: var(--bone); font-weight: 600; }
/* KPI словами */
.kpi-num-word b{ letter-spacing: -.03em; }
/* группы без иконок */
.bgroup-head h3{ padding-left: 0; }
/* More внутри группы */
.bmore{ border-top: 1px solid var(--line); }
.bmore > summary{ list-style: none; cursor: pointer; padding: 1rem 0; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--brass-dim); display: flex; align-items: center; gap: .6rem; }
.bmore > summary::-webkit-details-marker{ display: none; }
.bmore > summary::after{ content: ""; width: .5rem; height: .5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.bmore[open] > summary::after{ transform: rotate(-135deg) translateY(-1px); }
.bmore[open] > summary{ border-bottom: 1px solid var(--line); }
.bmore > .bitem:first-of-type{ border-top: 0; }
.bmore > .bitem{ padding-top: clamp(1.4rem, 3.2vw, 2rem); }
/* PDF-кнопка рядом с Copy */
.pdf-btn{ text-decoration: none; }
/* «наверх» и на мобиле */
@media (max-width: 62rem){
  .contact-mark{ display: grid !important; justify-items: center; margin-top: 2rem; }
  .contact-mark .mk{ width: 3.2rem; }
}
/* мобайл: всё влево, единый край */
@media (max-width: 62rem){
  .section-h, .pull, .split h2, .contact-body, .contact-body p, .cta-row, .elsewhere, .roll-grid figcaption, .hero-cap, .band-cap, .split-media figcaption, .b-place, .roles, .sign-quote, .pull-quote, .turn-fig figcaption, .split-body p, .bgroup-head{ justify-content: flex-start !important; justify-items: start !important; text-align: left !important; margin-inline: 0 !important; }
  .roles dd span{ display: inline; }
  .role-engr, .hero-engr, .framed, .framed img, .turn-fig, .split-media .framed{ margin-inline: 0 !important; }
  .contact-mark{ justify-items: start; }
  .section-h{ justify-content: flex-start; }
}
/* print: компактное CV, 3–4 страницы A4 */
@media print{
  *{ animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; }
  .top, .scroll-hint, .roll, .contact-mark, .copy-btn, .toast, .pause, .pull-quote, .foot-brand, .sign-img, .role-engr, .hero-engr, .kpi-viz, .ladder, .net, .specs, .chips, .flow, .b-place, .turn-fig, .path-foot, .elsewhere, .foot-meta{ display: none !important; }
  html{ font-size: 11px; }
  body{ background: #fff !important; color: #111 !important; line-height: 1.4; }
  section, .foot{ padding: .7rem 0 !important; }
  .hero{ display: grid !important; grid-template-columns: 1fr 7rem !important; grid-template-areas: "head por" "meta por" !important; gap: .4rem 1.2rem !important; padding-top: 0 !important; }
  .hero h1{ font-size: 24pt !important; line-height: 1 !important; margin: 0 !important; }
  .hero h1 br{ display: none; }
  .lede{ font-size: 12pt !important; margin: .3rem 0 0 !important; }
  .hero-por{ grid-area: por; } .hero-por img{ width: 7rem !important; height: auto !important; aspect-ratio: 3/4 !important; }
  .sign-quote{ display: none !important; }
  .roles{ display: flex !important; gap: 2rem !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
  .roles > div{ display: block !important; }
  .roles dt, .roles dd{ font-size: 9.5pt !important; }
  .section-h{ font-size: 15pt !important; margin: .2rem 0 .5rem !important; padding: 0 !important; }
  .section-h::before{ display: none !important; }
  .run-intro, .side-intro{ margin: 0 0 .5rem !important; font-size: 9.5pt !important; }
  .bento{ grid-template-columns: repeat(6,1fr) !important; gap: 0 !important; border: 0 !important; background: none !important; }
  .kpi{ padding: .3rem .5rem .3rem 0 !important; background: none !important; }
  .kpi-num{ font-size: 15pt !important; } .kpi-num-word b{ font-size: 12pt !important; }
  .kpi-desc{ font-size: 8.5pt !important; } .kpi-ctx{ display: none !important; }
  .run-claim{ font-size: 11pt !important; margin: .5rem 0 0 !important; padding-top: .4rem !important; }
  .path-list::before, .path-list::after, .path-step::before{ display: none !important; }
  .path-step{ display: grid !important; grid-template-columns: 5.5rem 1fr !important; gap: 0 1rem !important; padding: .25rem 0 !important; }
  .path-body h3{ font-size: 10.5pt !important; margin: 0 !important; } .path-body p{ font-size: 9pt !important; }
  .turn-headline{ font-size: 14pt !important; } .shift-line{ margin: .3rem 0 !important; }
  .ba{ margin-top: .5rem !important; gap: 1.2rem !important; grid-template-columns: 1fr 1fr !important; }
  .ba-col li{ font-size: 9pt !important; } .ba-col ul{ gap: .35rem !important; }
  .turn-out{ font-size: 11pt !important; margin: .5rem 0 0 !important; padding-top: .4rem !important; }
  .bgroup{ margin-top: .7rem !important; } .bgroup-head{ margin-bottom: .1rem !important; padding-bottom: .2rem !important; }
  .bgroup-head h3{ font-size: 11.5pt !important; }
  .bitem{ display: grid !important; grid-template-columns: 11rem 1fr !important; gap: 0 1rem !important; padding: .3rem 0 !important; break-inside: avoid; }
  .bitem h4{ font-size: 9.5pt !important; } .bbody p, .bitem p{ font-size: 8.8pt !important; line-height: 1.38 !important; }
  .bfig{ font-size: 8.5pt !important; margin-top: .2rem !important; } .bfig b{ font-size: 10pt !important; }
  details{ display: block; } details > summary{ display: none !important; } details:not([open]) > *:not(summary){ display: grid !important; }
  .bmore{ border: 0 !important; }
  .mgrid{ gap: 0 !important; } .mcard{ display: grid !important; grid-template-columns: 11rem 1fr !important; gap: 0 1rem !important; padding: .3rem 0 !important; break-inside: avoid; }
  .mcard h3{ font-size: 9.5pt !important; } .mbody p{ font-size: 8.8pt !important; }
  .side-grid{ grid-template-columns: 1fr 1fr !important; gap: 1rem !important; }
  .sbuild p{ font-size: 8.8pt !important; } .sbuild-head h3{ font-size: 10.5pt !important; }
  .contact{ padding-top: .6rem !important; } .contact h2{ font-size: 14pt !important; } .contact p{ font-size: 9pt !important; }
  .cta{ background: none !important; color: #111 !important; padding: 0 !important; border: 0 !important; font-size: 10pt !important; }
  .foot-legal{ font-size: 7.5pt !important; margin-top: .6rem !important; }
  a{ color: inherit; text-decoration: none; }
  .kpi-seg i{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* v8.1: More стоит между кейсами, не внутри */
.bitems > .bmore{ grid-column: 1 / -1; }
@media print{ .bmore{ display: block !important; margin: 0 !important; } .bmore > .bitem{ margin: 0 !important; } }

/* v8.2: гравюры на одной линии; подпись 1913 дальше от уголка; гора без апскейла */
@media (min-width: 46rem){
  .roles dd{ display: grid; grid-template-rows: auto auto 1fr; align-content: start; height: 100%; }
  .roles dd .role-engr{ align-self: end; }
}
.turn-fig figcaption{ margin-top: 1.25rem; }
.pause-wide{ max-width: calc(60rem + 2 * max(var(--gut), calc((100% - 72rem) / 2))); margin-inline: auto; }
.pause-wide img{ aspect-ratio: 16 / 9; }
@media (max-width: 46rem){ .pause-wide img{ aspect-ratio: 4 / 3; } }

/* v8.3: лого групп сразу за заголовком, одна высота; фавикон светлый; PDF-портрет крупнее */
.bgroup-head{ justify-content: flex-start; gap: clamp(1.2rem, 2.6vw, 2.2rem); align-items: center; }
.bgroup-head h3{ flex: 0 0 auto; }
.bgroup-head .b-place{ margin: 0; gap: .6rem; opacity: .92; }
.bgroup-head .b-place .lgo, .bgroup-head .b-place .lgo-img{ height: 2.3rem; }
.bgroup-head .b-place .lgo-gv{ height: 2.7rem; }
.bgroup-head .b-place .lgo-buk{ height: 1.7rem; }
.bgroup-head .b-place .amp{ font-size: 1rem; margin-inline: .2rem; }
@media (max-width: 62rem){
  .bgroup-head{ flex-direction: column; align-items: flex-start; gap: .7rem; }
  .bgroup-head .b-place .lgo, .bgroup-head .b-place .lgo-img{ height: 2rem; }
  .bgroup-head .b-place .lgo-gv{ height: 2.3rem; } .bgroup-head .b-place .lgo-buk{ height: 1.5rem; }
}
@media print{
  .hero{ grid-template-columns: 1fr 11rem !important; }
  .hero-por img{ width: 11rem !important; }
}
/* v8.4: camera roll на 10 кадров */
@media (min-width: 56rem){
  .roll-grid figure:nth-child(9){ grid-column: span 2; }
  .roll-grid figure:nth-child(10){ grid-column: span 2; }
  .roll-grid figure:nth-child(8) img, .roll-grid figure:nth-child(9) img, .roll-grid figure:nth-child(10) img{ aspect-ratio: 3 / 4; }
}
.pause-wide{ max-width: none; }
.pause-wide img{ aspect-ratio: 16 / 9; }

/* ══ v9 · гармония: заполнить правую треть, ровные карточки, линии на всю ширину ══ */
/* Built и How I work: label шире, тело до 68ch — правый край доходит до сетки */
@media (min-width: 56rem){
  .bitem{ grid-template-columns: minmax(16rem, 24rem) 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); }
  .bitem p, .bbody p{ max-width: 68ch !important; }
  .bitem-feat h4{ font-size: var(--t-md); }
  .ladder, .specs, .net{ max-width: none; }
  .specs{ max-width: 44rem; } .net{ max-width: 36rem; } .ladder{ max-width: 40rem; }
}
@media (min-width: 52rem){
  .mcard{ grid-template-columns: minmax(16rem, 24rem) 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); }
  .mcard p, .mbody p{ max-width: 68ch; }
}
/* бенто: одинаковая структура строк, зона визуализации фиксированной высоты */
.kpi{ grid-template-rows: auto auto auto minmax(3.4rem, auto); }
.kpi-ctx{ min-height: 2.6em; }
.kpi-viz{ align-self: end; margin-top: 0; padding-top: .6rem; }
.dots{ grid-template-columns: repeat(24, 1fr); gap: 2.5px; max-width: 12rem; }
.dots-40{ grid-template-columns: repeat(20, 1fr); max-width: 10rem; }
/* линия под run-claim на всю ширину, текст остаётся узким */
.run-claim{ max-width: none; }
.run-claim > span{ display: block; max-width: 46ch; }
/* Talk на мобиле: email на всю ширину, две кнопки в ряд под ним */
@media (max-width: 40rem){
  .cta-row{ flex-wrap: wrap; gap: .7rem; }
  .cta-row .cta{ width: 100%; justify-content: center; }
  .cta-row .copy-btn{ flex: 1 1 45%; text-align: center; white-space: nowrap; }
}

/* v10: тиснение ролей по нижней границе цитаты под портретом */
@media (min-width: 62rem){
  .hero-meta{ align-self: end; }
  .roles{ height: 100%; grid-template-rows: auto 1fr; }
}
/* v10: фото внутри секций и между ними */
section > .pause{ padding-inline: max(0px, calc((100% - 72rem) / 2)); }
.built > .pause{ margin-top: clamp(2.6rem, 6vw, 4rem); }
.pause-fig img{ aspect-ratio: 4 / 3; }
.pause-fig figcaption{ font-size: var(--t-md); line-height: 1.3; letter-spacing: -.01em; color: var(--bone-70); font-weight: 500; max-width: 22ch; text-transform: none; }
@media (min-width: 56rem){
  /* зеркало редакционной сетки Built: подпись в колонке лейбла, фото в колонке тела */
  .pause-fig{ grid-template-columns: minmax(16rem, 24rem) 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: end; }
  .pause-fig figcaption{ order: -1; padding-bottom: .5rem; }
  .pause-fig img{ max-width: 68ch; }
}
.pause-quote .pq-text{ margin: 0; }
@media (max-width: 62rem){ .pause-fig figcaption{ text-align: left; margin-inline: 0; } }
/* v10.1: строка контактов только для PDF; Impressum в PDF не печатается */
.cv-head{ display: none; }
@media print{
  .cv-head{ display: block !important; font-size: 9.5pt !important; color: #333 !important; margin: .35rem 0 0 !important; letter-spacing: 0 !important; }
  .foot-legal{ display: none !important; }
}
@media print{
  /* заголовок не остаётся один внизу страницы */
  .section-h, .bgroup-head, .turn-headline, .ba-label{ break-after: avoid-page; page-break-after: avoid; }
  .bgroup-head + .bitems > .bitem:first-child, .section-h + *{ break-before: avoid-page; page-break-before: avoid; }
}

/* v11: по аудиту-2 (первый экран, мобайл, roll, подписи, PDF) */
html{ scroll-padding-top: 5rem; }
@media (min-width: 62rem){ .hero-por img{ max-height: min(70vh, 46rem); } }
.sign-quote{ font-size: var(--t-base); color: var(--bone-45); margin-top: .7rem; }
.lede{ font-weight: 500; }
@media (max-width: 62rem){ .hero-por img{ aspect-ratio: 1 / 1; object-position: 50% 18%; } }
@media (hover: none){ .mark-top::after{ opacity: 1; transform: none; } }
.top nav a{ padding-block: .8rem; margin-block: -.8rem; }
.elsewhere a{ display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
@media (max-width: 34rem){ .kpi{ grid-template-rows: auto; } .kpi-ctx{ min-height: 0; } }
.pause img, .roll-grid img, .turn-fig img, .path-fig img{ background: oklch(0.93 0.003 260); }
.bitem-feat h4{ font-size: calc(var(--t-md) * .86); }
.bitem h4, .bgroup-head h3, .mcard h3{ text-wrap: balance; }
.mgrid > .mcard:first-child{ border-top: 0; }
.pause figcaption{ text-transform: none; letter-spacing: -.01em; font-size: var(--t-sm); font-weight: 500; color: var(--bone-70); }
.turn-fig .framed{ width: 100%; max-width: 30rem; }
.path-fig{ margin: 0; display: grid; gap: .6rem; }
.path-fig img{ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: clamp(.7rem, 1.8vw, 1.1rem); display: block; }
.path-fig figcaption{ font-size: var(--t-sm); font-weight: 500; color: var(--bone-70); letter-spacing: -.01em; }
@media (max-width: 62rem){ .path-fig{ margin-top: clamp(1.6rem, 4vw, 2.4rem); } .path-fig img{ aspect-ratio: 4 / 3; } }
@media (min-width: 62rem){
  .path{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }
  .path > .section-h, .path > .path-foot{ grid-column: 1 / -1; }
  .path-fig{ position: sticky; top: 6rem; margin-top: .4rem; }
}
@media (max-width: 46rem){
  .roll-grid figure{ order: 0; }
  .roll-grid figure:nth-child(1), .roll-grid figure:nth-child(2){ grid-column: 1 / -1; }
  .roll-grid figure:nth-child(1) img, .roll-grid figure:nth-child(2) img{ aspect-ratio: 4 / 3; }
  .roll-grid figure:nth-child(n+3) img{ aspect-ratio: 3 / 4; }
}
@media print{
  .mtl, .kpi-num b, .kpi-num-word b, .bfig b{ background: none !important; -webkit-text-fill-color: #5f4a1f !important; color: #5f4a1f !important; }
  .mcard p, .mbody p{ line-height: 1.38 !important; max-width: 68ch !important; }
  .kpi-num-word b{ font-size: 15pt !important; }
  .hero-por img{ content: url("polo-print.webp"); }
  .path-fig{ display: none !important; } .path{ display: block !important; }
}
/* v11.1: портрет чуть выше (75vh) и прижат к низу сетки, чтобы низ цитаты = низ гравюр при любой высоте окна */
@media (min-width: 62rem){ .hero-por img{ max-height: min(75vh, 46rem); } .hero-por{ align-self: end; } }

/* ══ v12: эстетическая правка по списку 02.09 ══ */

/* п.2 мера строки: 46ch вместо 62ch (ch у Archivo шире средней буквы) */
.bitem > .bbody p, .bitem > p:not(.bfig):not(.b-place){ max-width: 46ch !important; }
.mcard p, .mbody p{ max-width: 46ch !important; }
.mcard-wide p, .mcard-wide .mbody p{ max-width: 52ch !important; }
.path-foot{ max-width: 46ch; }
.kpi-ctx{ max-width: 30ch; }

/* п.12 матрица 40 точек в целых пикселях */
.dots-40{ grid-template-columns: repeat(20, 6px); max-width: none; width: max-content; }
.dots{ grid-template-columns: repeat(19, 6px); max-width: none; width: max-content; }

/* п.4 знак наверх: стрелка всегда, размер тише, без ореола */
.contact-mark .mk{ width: clamp(3.2rem, 4.4vw, 4.6rem); filter: none; }
.mark-top::after{ opacity: 1 !important; transform: none !important; }
.mark-top:hover{ transform: translateY(-6px); }

/* п.5 кнопки Talk: одна система */
.cta-row{ align-items: stretch; }
.cta, .copy-btn, .pdf-btn{
  border-radius: 2px; padding: .85rem 1.4rem; font-size: var(--t-xs);
  letter-spacing: .1em; text-transform: uppercase; font-weight: 650; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
}
.cta{ background: none !important; color: var(--bone) !important; border: 0 !important; border-bottom: 2px solid var(--brass) !important; border-radius: 0 !important; padding-inline: 0 !important; text-transform: none; letter-spacing: -.01em; font-size: var(--t-md); font-weight: 600; }
.cta:hover{ color: var(--brass) !important; }
.copy-btn, .pdf-btn{ border: 1px solid var(--line-strong); color: var(--bone-70); background: none; }
.copy-btn:hover, .pdf-btn:hover{ border-color: var(--brass); color: var(--brass); }

/* п.11 два токена радиуса на всю страницу */
:root{ --r-frame: clamp(0.7rem, 1.8vw, 1.1rem); --r-tight: 2px; }
.pause img, .roll-grid img, .path-fig img, .turn-fig img, .framed img, .hero-por img, .split-media img{ border-radius: var(--r-frame); }
.specs, .chips li, .kpi-seg i, .ladder-bar, .net-bar, .built-list li:hover, .copy-btn, .pdf-btn, .merge-a, .merge-b, .merge-out{ border-radius: var(--r-tight); }

/* п.14 логотипы партнёров: один вес, одни чернила */
.b-place .amp{ color: var(--bone-45); font-weight: 400; }

/* п.16 закрывающие линейки на всю ширину, мера у текста внутри */
.turn-out{ max-width: none; }
.turn-out > span{ display: block; max-width: 44ch; }
.foot-legal{ max-width: none; }
.foot-legal > span{ display: block; max-width: 62ch; }

/* п.17 шапка и герой на том же рельсе, что все секции */
.top{ padding-inline: max(var(--gut), calc((100% - 72rem) / 2)); }
.hero{ padding-inline: max(var(--gut), calc((100% - 72rem) / 2)); }

/* п.19 гравюры привязаны к колонке, а не к окну */
@media (min-width: 62rem){ .role-engr{ width: 100%; max-width: none; } }

/* п.20 герой держит экран на больших окнах */
@media (min-width: 62rem) and (min-height: 900px){ .hero{ min-height: calc(100svh - 4.6rem); } }

/* п.21 футер: сетка вместо стопки */
@media (min-width: 62rem){
  .foot{ display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: clamp(1.6rem, 3vw, 2.2rem); column-gap: 2rem; }
  .foot-brand{ margin: 0; grid-column: 1; grid-row: 1; }
  .foot .sign-img{ grid-column: 2; grid-row: 1; margin: 0; align-self: end; }
  .foot-meta{ grid-column: 1 / -1; grid-row: 2; }
  .foot-legal{ grid-column: 1 / -1; grid-row: 3; }
}

/* п.22 мобильный футер: всё влево, как остальная страница */
@media (max-width: 62rem){
  .foot .sign-img{ margin-inline: 0 !important; }
  .foot-legal{ text-align: left !important; margin-inline: 0 !important; }
  .foot-meta{ justify-content: flex-start; }
}

/* п.23 рельс таймлайна на телефоне не рисуем, маркеры кроют пунктир */
.path-step::before{ background-color: var(--ink-900); }
@media (max-width: 40rem){ .path-list::after{ display: none; } }

/* п.24 цифры Буковеля: диаграмма под своей подписью */
@media (max-width: 34rem){
  .net{ gap: 1.5rem; }
  .net-row{ grid-template-columns: 1fr auto; gap: .35rem .9rem; }
  .net-nodes, .net-bar{ grid-column: 1 / -1; order: 3; }
}

/* п.26 фото-пауза: подпись держится за кадр, дыры в колонке нет */
@media (min-width: 56rem){
  .pause-fig{ align-items: start; }
  .pause-fig figcaption{ padding-bottom: 0; padding-top: .35rem; }
}

/* п.28 «How I work»: карточки вместо ещё одного лейбл|тело */
@media (min-width: 52rem){
  .mgrid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.6rem, 3vw, 2.4rem) clamp(2.4rem, 5vw, 4rem); }
  .mcard{ display: block; border-top: 1px solid var(--line); padding-top: clamp(1.1rem, 2.4vw, 1.5rem); }
  .mcard h3{ max-width: 22ch; margin-bottom: .55rem; font-size: var(--t-base); font-weight: 650; line-height: 1.25; }
  .mcard p, .mcard .mbody p{ max-width: 42ch !important; }
  .mcard-wide{ grid-column: 1 / -1; }
  .mcard-wide h3{ max-width: none; }
  .mcard-wide p, .mcard-wide .mbody p{ max-width: 68ch !important; }
  .mgrid > .mcard:first-child, .mgrid > .mcard:nth-child(2){ border-top: 0; padding-top: 0; }
}

/* п.27 бенто без выборочных диаграмм: чистые цифры, ровный ряд */
.kpi{ grid-template-rows: auto auto 1fr; }
.kpi-viz{ display: none; }
/* v12.1: доводка */
.cta{ box-shadow: none !important; }
@media (min-width: 52rem){
  .mgrid{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: clamp(1.6rem, 3vw, 2.4rem) clamp(2.4rem, 5vw, 4rem) !important; }
  .mcard{ display: block !important; grid-template-columns: none !important; }
}
@media (min-width: 52rem){ .mcard-wide{ grid-column: 1 / -1 !important; } .mcard-wide p, .mcard-wide .mbody p{ max-width: 68ch !important; } }
/* п.9 фото 1913 теперь квадрат: отпечаток заполняет кадр */
.turn-fig img{ aspect-ratio: 1 / 1; }

/* п.10 camera roll на 8 кадров: два ландшафта сверху, шесть вертикалей */
@media (min-width: 46rem){
  .roll-grid figure:nth-child(n){ grid-column: span 2; }
  .roll-grid figure:nth-child(1), .roll-grid figure:nth-child(2){ grid-column: span 3; }
  .roll-grid figure:nth-child(1) img, .roll-grid figure:nth-child(2) img{ aspect-ratio: 4 / 3; }
  .roll-grid figure:nth-child(n+3) img{ aspect-ratio: 3 / 4; }
}

/* п.11 (продолжение): два языка величины вместо девяти */
/* точки Буковеля становятся такими же полосами, как третий ряд */
/* specs без рамок: та же сетка с линейками, что в бенто */
.specs{ border: 0; border-block: 1px solid var(--line); border-radius: 0; background: var(--line); gap: 1px; }
.specs > *{ background: var(--ink-900); border: 0 !important; border-radius: 0 !important; }
/* flow без обрубленных чёрточек: разделитель точкой */
.flow li::after{ content: "\00B7"; width: auto; height: auto; background: none; color: var(--bone-45); font-weight: 400; }
.flow li:last-child::after{ display: none; }

/* ── Notes: журнальная колонка, ритм отличается от Built и How I work ── */
.notes{ padding-block: var(--stack); }
.notes-intro{ margin: 0 0 clamp(1.6rem, 4vw, 2.4rem); color: var(--bone-70); font-size: var(--t-sm); max-width: 46ch; }
.note{ border-top: 1px solid var(--line); padding-block: clamp(1.6rem, 4vw, 2.4rem); }
.note:last-child{ border-bottom: 1px solid var(--line); }
.note-date{ margin: 0 0 .5rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--brass-dim); }
.note h3{ margin: 0 0 clamp(.8rem, 2vw, 1.1rem); font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; max-width: 24ch; text-wrap: balance; }
.note-body{ display: grid; gap: .8rem; }
.note-body p{ margin: 0; font-size: var(--t-sm); line-height: 1.68; color: var(--bone-70); max-width: 46ch; }
@media (min-width: 62rem){
  .note{ display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: start; }
  .note-date{ grid-column: 1; grid-row: 1; }
  .note h3{ grid-column: 1; grid-row: 2; font-size: var(--t-lg); line-height: 1.05; margin-bottom: 0; }
  .note-body{ grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 62rem){
  .note{ align-content: start; grid-template-rows: auto 1fr; }
  .note h3{ align-self: start; margin-top: .3rem; }
}

@media print{ .notes{ display: none !important; } }

/* ══ v14: правка по замечаниям 02.09 вечер ══ */

/* 1. фото-паузы: кадр во всю ширину, подпись под ним. Никакой боковой подписи */
.pause-fig{ display: block !important; }
.pause-fig img{ width: 100%; aspect-ratio: 16 / 9; }
.pause-fig figcaption{ max-width: 46ch; padding: .65rem 0 0 !important; margin: 0; order: 0 !important; }
@media (max-width: 46rem){ .pause-fig img{ aspect-ratio: 4 / 3; } }
.pause-split{ display: block; }
.pause-split figcaption{ max-width: 46ch; padding-top: .65rem; }

/* 2. таймлайн: знак кроет линию, линия всегда пунктир */
.path-list::before{ border-left-style: dotted; border-left-width: 2px; }
.path-list::after{
  border-left: 2px dotted var(--brass); background: none !important; width: 0 !important;
  left: calc(.29rem + 0px); z-index: 0;
}
@media (min-width: 64rem){ .path-list::after{ left: 8.7rem; } }
.path-step::before{ z-index: 2; background-color: var(--ink-900); }
.path-step{ position: relative; z-index: 1; }

/* 3. стрелка в знаке не вылезает за рамку */
.mark-top::after{ font-size: clamp(1.1rem, 1.5vw, 1.5rem); font-weight: 600; line-height: 1; }

/* 4. подпись в футере снова латунная, на телефоне по центру */
.foot .sign-img{ filter: none; mix-blend-mode: multiply; opacity: .95; }
@media (max-width: 62rem){ .foot .sign-img{ margin-inline: 0 !important; } }

/* 5. логотипы работодателей читаемые */

/* 6. «How I work» на телефоне в одну строку */
@media (max-width: 46rem){
  .section-h{ text-wrap: nowrap; }
  #method-h, #built-h, #notes-h, #contact-h, #roll-h, #path-h, #turn-h, #run-h, #side-h{ white-space: nowrap; }
}

/* 7. then → now: связь между состояниями */
.shift-line{ align-items: stretch; gap: .6rem 1.4rem; }
.shift-line .shift-then{ position: relative; padding-right: 2.2rem; }
.shift-line .shift-then::after{
  content: ""; position: absolute; right: .6rem; bottom: .45rem;
  width: 1.1rem; height: 1.1rem;
  border-right: 2px solid var(--brass); border-top: 2px solid var(--brass);
  transform: rotate(45deg) scale(.62); transform-origin: center;
}
@media (max-width: 34rem){
  .shift-line{ display: grid; grid-template-columns: 1fr; gap: .35rem; }
  .shift-line .shift-then{ padding-right: 0; padding-bottom: 1.5rem; }
  .shift-line .shift-then::after{ right: auto; left: .1rem; bottom: .25rem; transform: rotate(135deg) scale(.62); }
}
.pause-fig img{ max-width: none !important; }
/* v14.1: латунь логотипов, центровка знака на телефоне */
@media (max-width: 62rem){
  .contact-mark{ justify-items: center !important; }
  .contact-body{ justify-items: start; }
}
/* v14.2: логотипы работодателей как были, только читаемее */
.b-place .lgo, .b-place .lgo-img, .b-place .lgo-gv, .b-place .lgo-buk{ filter: none; opacity: 1; }
.b-place .amp{ color: var(--bone-45); font-weight: 400; }

/* v15: заголовки секций на телефоне гарантированно в строку */
@media (max-width: 46rem){
  .section-h{ white-space: nowrap !important; font-size: clamp(1.5rem, 7.2vw, 2rem) !important; }
  .section-h::before{ flex: 0 0 auto; }
}
@media (max-width: 22rem){ .section-h{ font-size: 1.35rem !important; } }

/* v15: одна вертикаль для всего. Паузы и хвост таймлайна на общем рельсе */
.pause, .pause-wide, .pause-quote, .pause-fig{
  padding-inline: max(var(--gut), calc((100% - 72rem) / 2)) !important;
  max-width: none !important; margin-inline: 0 !important;
}
section > .pause{ padding-inline: max(0px, calc((100% - 72rem) / 2)) !important; }
.path-foot{ grid-column: 1 / -1; margin-left: 0; }
@media (min-width: 62rem){ .path{ row-gap: 0; } .path-foot{ margin-top: clamp(1.6rem, 3.5vw, 2.4rem); } }
@media print{ .pause, .pause-fig, .pause-wide, .pause-quote, .path-fig{ display: none !important; } }

/* ══ v16 05.09.2026: Turnaround и Built слиты, hero без дыры на высоких экранах ══ */
.ba-out{ margin: 0; font-size: var(--t-md); line-height: 1.35; letter-spacing: -.02em; font-weight: 500; max-width: 30ch; color: var(--bone); }
.bitem p a{ color: var(--brass); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.bitem p a:hover{ color: var(--brass-dim); }
/* п.20 переписан: герой держит экран до 54rem, дальше не растягивается */
@media (min-width: 62rem) and (min-height: 900px){ .hero{ min-height: min(calc(100svh - 4.6rem), 54rem); } }
@media print{ .ba-out{ font-size: 11pt !important; max-width: none !important; } }
@media print{ #built{ break-before: page; page-break-before: always; } .turn-headline, .ba-out{ break-inside: avoid; } }

/* ══ v17 05.09.2026: правки Саши после v16 ══ */
/* 1. имя не наезжает на портрет на широких экранах: размер h1 привязан к ширине своей колонки */
.hero-head{ container-type: inline-size; }
@media (min-width: 62rem){ .hero h1{ font-size: min(var(--t-xl), 16.4cqi); } }
/* 2. лого партнёров в группах Built плоской латунью (маска по альфе, сама картинка уведена из кадра) */
.b-place img.lgo-img, .b-place img.lgo-buk, .b-place img.lgo-gv{
  background: var(--brass); object-position: -200rem 0;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.b-place img.lgo-img{ -webkit-mask-image: url(logo-sporthotel-c.webp); mask-image: url(logo-sporthotel-c.webp); }
.b-place img.lgo-buk{ -webkit-mask-image: url(logo-bukovel.webp); mask-image: url(logo-bukovel.webp); }
.b-place img.lgo-gv{ -webkit-mask-image: url(logo-grandview.webp); mask-image: url(logo-grandview.webp); }
/* 3. Notes: тизер на главной + отдельная страница /notes/ */
.notes-list{ list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.notes-list li{ border-bottom: 1px solid var(--line); }
.notes-list a{ display: grid; gap: .3rem; padding: clamp(1rem, 2.5vw, 1.4rem) 0; color: inherit; text-decoration: none; }
.notes-list .note-date{ margin: 0; }
.notes-list .nl-title{ font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; text-wrap: balance; transition: color .25s var(--ease); }
.notes-list a:hover .nl-title{ color: var(--brass); }
@media (min-width: 56rem){ .notes-list a{ grid-template-columns: minmax(16rem, 24rem) 1fr; column-gap: clamp(2.4rem, 5vw, 4.5rem); align-items: baseline; } }
.notes-all, .notes-back{ margin: clamp(1.2rem, 3vw, 1.8rem) 0 0; font-size: var(--t-sm); }
.notes-all a, .notes-back a, .notes-intro a{ color: var(--brass); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.notes-page{ padding-top: clamp(7rem, 15vh, 9.5rem); }
.notes-page h1.section-h{ font-size: var(--t-lg); }
.notes-page .note h2{ margin: 0 0 clamp(.8rem, 2vw, 1.1rem); font-size: var(--t-md); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; max-width: 24ch; text-wrap: balance; }
@media (min-width: 56rem){ .notes-page .note h2{ grid-column: 1; grid-row: 2; font-size: var(--t-lg); line-height: 1.05; margin-bottom: 0; align-self: start; margin-top: .3rem; } }
.notes-page .note{ scroll-margin-top: 6rem; }
/* 4. стрелка в знаке наверх ровно по центру рамки: svg блочный, у ссылки нет строчного зазора под ним */
.mark-top .mk{ display: block; }

/* ══ v20 05.09.2026: правки Саши по v19 (акценты, размеры, полосы, контекст) ══ */
/* then / one year later: крупно, латунь на результате */
.shift-big{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 2rem; margin: clamp(1.4rem, 3vw, 2rem) 0 0; padding-top: clamp(1rem, 2.4vw, 1.4rem); border-top: 1px solid var(--line); }
.shift-big b{ display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--bone-45); margin-bottom: .4rem; }
.shift-big span{ display: block; font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.shift-big .shift-then span{ color: var(--bone-45); }
.shift-big .shift-now b{ color: var(--brass-dim); }
@media (max-width: 40rem){ .shift-big{ grid-template-columns: 1fr; } }
/* фото 1913 крупнее */
@media (min-width: 56rem){ .turn-lead{ grid-template-columns: 1fr minmax(0, 28rem); } }
.turn-fig .framed{ max-width: 34rem; }
/* фраза под бенто переносится позже */
.run-claim, .run-claim > span{ max-width: 64ch; }
/* «five figures» и цифры в подписи кейсов: не крупнее подзаголовка */
.bfig b{ font-size: calc(var(--t-base) * 1.2); }
/* коллаж напротив пути держит 4:5 на всех ширинах */
.path-fig.collage img{ aspect-ratio: 900 / 1122; }
/* How I work: тёмная полоса */
.method{ background: var(--bone); color: var(--ink-900); }
.method .section-h{ color: var(--ink-900); border-color: color-mix(in oklch, var(--ink-900) 22%, transparent); }
.method .mcard{ border-color: color-mix(in oklch, var(--ink-900) 18%, transparent); }
.method .mcard h3{ color: var(--ink-900); }
.method .mcard p{ color: color-mix(in oklch, var(--ink-900) 74%, transparent); }
/* Notes на главной: светло-серая полоса */
.notes-teaser{ background: var(--ink-800); }
.notes-teaser .notes-list, .notes-teaser .notes-list li{ border-color: color-mix(in oklch, var(--bone) 18%, transparent); }
/* контекст под виадуком */
.pq-note{ margin: .5rem 0 0; font-size: var(--t-sm); line-height: 1.55; color: var(--bone-70); max-width: 62ch; text-transform: none; letter-spacing: 0; font-weight: 400; }
/* подписи под фото стали длиннее: воздух и ширина */
.roll-grid figcaption{ line-height: 1.5; }
.pause-fig figcaption{ max-width: 60ch; font-size: var(--t-sm); }
@media print{
  .method, .notes-teaser{ background: #fff !important; color: #111 !important; }
  .method .section-h, .method .mcard h3, .method .mcard p{ color: #111 !important; }
  .shift-big span{ font-size: 13pt !important; } .shift-big{ margin: .4rem 0 0 !important; padding-top: .3rem !important; }
  .pq-note{ display: none !important; }
}

/* ══ v21 05.09.2026: эстетический прогон (переносы, размеры, стили, симметрия) ══ */
/* 1. переносы: абзацы и подписи без сирот, заголовки уравновешены */
.ba li, .bitem p, .mcard p, .sbuild p, .path-body p, .path-foot, .note-body p, .run-intro, .side-intro, .notes-intro, .contact-body p, .pq-note, figcaption, .kpi-desc, .kpi-ctx{ text-wrap: pretty; }
.bitem h4, .mcard h3, .sbuild h3, .path-body h3, .nl-title, .turn-headline, .shift-big span, .section-h, .lede{ text-wrap: balance; }
/* 2. Then / One year later в столбик на всех ширинах: результат не переносится и читается как лестница */
.shift-big{ grid-template-columns: 1fr; gap: 1rem; }
/* 3. одна шкала заголовков: кейсы, принципы и шаги пути одного кегля; пики пути и подзаголовки групп на ступень выше */
.bitem h4, .bitem-feat h4, .mcard h3, .path-body h3{ font-size: calc(var(--t-base) * 1.3); line-height: 1.22; letter-spacing: -.02em; }
.path-step.is-peak h3{ font-size: calc(var(--t-base) * 1.5); line-height: 1.15; }
/* 4. капс-лейблы одним трекингом и весом */
.ba-label, .shift-big b, .note-date, .sbuild-meta, .path-when, .pq-src, .bmore summary, .net-k, .roles dd span{ letter-spacing: .12em; font-weight: 600; }
/* 5. один интерлиньяж у основного текста */
.bitem p, .bbody p, .mcard p, .mbody p, .sbuild p, .path-body p, .ba li, .note-body p{ line-height: 1.65; }
/* 6. подписи под всеми фото одного стиля, всегда читаемые */
.pause-fig figcaption, .roll-grid figcaption, .path-fig figcaption, .turn-fig figcaption{ font-size: calc(var(--t-base) * .94); line-height: 1.5; font-weight: 400; color: var(--bone-70); letter-spacing: 0; text-transform: none; opacity: 1; max-width: 62ch; }
.roll-grid figure:hover figcaption{ opacity: 1; }
/* 7. подпись под виадуком на телефоне влево, как всё остальное */
@media (max-width: 56rem){ .pause-quote figcaption{ text-align: left; justify-items: start; } .pq-note{ text-align: left; } }
/* 8. телефон: нечётный последний кадр roll не остаётся один, растягивается на две колонки */
@media (max-width: 46rem){ .roll-grid figure:nth-child(n+3):nth-child(odd):last-child{ grid-column: 1 / -1; } .roll-grid figure:nth-child(n+3):nth-child(odd):last-child img{ aspect-ratio: 4 / 3; } }
@media print{ .shift-big{ grid-template-columns: 1fr 1fr !important; } }
/* v21.1: шкала уточнена (t-base = 19.2px на десктопе): кейсы/принципы/шаги 21.5px, пики пути 25px, подписи 15.5px */
.bitem h4, .bitem-feat h4, .mcard h3, .path-body h3{ font-size: calc(var(--t-base) * 1.12); }
.path-step.is-peak h3{ font-size: calc(var(--t-base) * 1.32); }
.pause-fig figcaption, .roll-grid figcaption, .path-fig figcaption, .turn-fig figcaption{ font-size: calc(var(--t-sm) * .95); }
/* v22: подпись коллажа списком, факты в подписях */
.cap-list{ list-style: none; margin: .15rem 0 0; padding: 0; display: grid; gap: .3rem; counter-reset: cap; }
.cap-list li{ position: relative; padding-left: 1.5em; }
.cap-list li::before{ counter-increment: cap; content: counter(cap); position: absolute; left: 0; top: 0; color: var(--brass); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ══ v23 05.09.2026: набор Саши (фоны 03+04+06+зерно, названия, поддерживающее движение) ══ */
/* зерно на всей странице: под контентом, фото не трогает */
body{ background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22180%22 height=%22180%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%22.85%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3CfeColorMatrix values=%220 0 0 0 0.12  0 0 0 0 0.12  0 0 0 0 0.14  0 0 0 0.07 0%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url%28%23n%29%22/%3E%3C/svg%3E"); background-size: 180px 180px; }
/* 03 латунная сетка под цифрами Now, тает книзу */
.run{ position: relative; isolation: isolate; }
.run::before{ content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, color-mix(in oklch, var(--brass) 14%, transparent) 1px, transparent 1px), linear-gradient(to bottom, color-mix(in oklch, var(--brass) 14%, transparent) 1px, transparent 1px);
  background-size: 64px 64px; background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); mask-image: linear-gradient(to bottom, #000 30%, transparent 92%); }
/* 04 водяной знак «О» в шапке Built */
#built{ position: relative; isolation: isolate; }
#built::before{ content: ""; position: absolute; z-index: -1; pointer-events: none; right: max(var(--gut), calc((100% - 72rem) / 2 - 6rem)); top: clamp(1rem, 4vw, 3rem); width: clamp(14rem, 26vw, 24rem); aspect-ratio: 172 / 144; opacity: .08;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 172 144%22%3E%3Crect x=%2214%22 y=%2210%22 width=%22144%22 height=%22124%22 rx=%2228%22 ry=%2228%22 fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%2215%22/%3E%3C/svg%3E") no-repeat center / contain; }
@media (max-width: 62rem){ #built::before{ width: 12rem; right: -2rem; opacity: .07; } }
/* 06 изолинии за группой Bukovel */
#bukovel{ position: relative; isolation: isolate; }
#bukovel::before{ content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -1.5rem -2rem auto -2rem; height: 26rem; opacity: .55;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22420%22 viewBox=%220 0 1400 420%22%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.55%22 points=%220,62.0 14,64.3 28,66.4 42,68.4 56,70.1 70,71.6 84,72.7 98,73.5 112,73.9 126,74.0 140,73.8 154,73.2 168,72.4 182,71.3 196,70.1 210,68.8 224,67.4 238,66.0 252,64.7 266,63.5 280,62.4 294,61.4 308,60.6 322,59.9 336,59.3 350,58.8 364,58.3 378,57.8 392,57.2 406,56.6 420,55.7 434,54.7 448,53.4 462,51.8 476,50.0 490,47.8 504,45.4 518,42.8 532,40.0 546,37.0 560,33.9 574,30.8 588,27.7 602,24.8 616,22.0 630,19.5 644,17.2 658,15.3 672,13.8 686,12.6 700,11.8 714,11.3 728,11.2 742,11.3 756,11.6 770,12.2 784,12.8 798,13.5 812,14.1 826,14.8 840,15.3 854,15.7 868,16.0 882,16.1 896,16.0 910,15.9 924,15.6 938,15.3 952,15.0 966,14.7 980,14.5 994,14.5 1008,14.7 1022,15.0 1036,15.7 1050,16.6 1064,17.8 1078,19.3 1092,21.0 1106,22.8 1120,24.9 1134,27.0 1148,29.2 1162,31.3 1176,33.4 1190,35.3 1204,36.9 1218,38.4 1232,39.5 1246,40.2 1260,40.7 1274,40.8 1288,40.7 1302,40.2 1316,39.6 1330,38.7 1344,37.8 1358,36.8 1372,35.8 1386,34.9 1400,34.1%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.52%22 points=%220,110.4 14,111.5 28,112.3 42,112.7 56,112.7 70,112.3 84,111.6 98,110.6 112,109.2 126,107.7 140,106.0 154,104.2 168,102.4 182,100.6 196,98.9 210,97.3 224,95.8 238,94.5 252,93.4 266,92.4 280,91.5 294,90.7 308,90.0 322,89.3 336,88.5 350,87.6 364,86.6 378,85.5 392,84.1 406,82.5 420,80.6 434,78.5 448,76.2 462,73.7 476,71.0 490,68.3 504,65.5 518,62.8 532,60.1 546,57.7 560,55.4 574,53.5 588,51.8 602,50.5 616,49.6 630,49.1 644,48.9 658,49.0 672,49.5 686,50.2 700,51.0 714,52.1 728,53.1 742,54.2 756,55.2 770,56.1 784,56.9 798,57.5 812,57.9 826,58.1 840,58.1 854,57.9 868,57.7 882,57.3 896,56.9 910,56.5 924,56.1 938,55.9 952,55.8 966,55.9 980,56.2 994,56.8 1008,57.6 1022,58.5 1036,59.7 1050,61.1 1064,62.5 1078,64.0 1092,65.5 1106,66.9 1120,68.1 1134,69.2 1148,70.0 1162,70.6 1176,70.9 1190,70.8 1204,70.5 1218,69.8 1232,68.9 1246,67.7 1260,66.4 1274,64.9 1288,63.4 1302,61.9 1316,60.5 1330,59.2 1344,58.2 1358,57.3 1372,56.8 1386,56.5 1400,56.5%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.48%22 points=%220,147.2 14,146.3 28,145.0 42,143.5 56,141.7 70,139.7 84,137.6 98,135.5 112,133.3 126,131.3 140,129.3 154,127.5 168,126.0 182,124.6 196,123.4 210,122.3 224,121.5 238,120.8 252,120.1 266,119.5 280,118.9 294,118.2 308,117.4 322,116.4 336,115.3 350,114.0 364,112.4 378,110.7 392,108.8 406,106.7 420,104.6 434,102.3 448,100.1 462,98.0 476,96.0 490,94.2 504,92.6 518,91.3 532,90.4 546,89.8 560,89.5 574,89.6 588,90.0 602,90.7 616,91.6 630,92.8 644,94.0 658,95.4 672,96.7 686,97.9 700,99.0 714,100.0 728,100.7 742,101.2 756,101.4 770,101.4 784,101.2 798,100.7 812,100.1 826,99.3 840,98.5 854,97.7 868,96.8 882,96.1 896,95.5 910,95.1 924,94.8 938,94.8 952,94.9 966,95.3 980,95.8 994,96.4 1008,97.1 1022,97.8 1036,98.5 1050,99.2 1064,99.6 1078,99.9 1092,100.0 1106,99.8 1120,99.3 1134,98.5 1148,97.5 1162,96.2 1176,94.7 1190,93.1 1204,91.3 1218,89.5 1232,87.7 1246,86.1 1260,84.5 1274,83.2 1288,82.2 1302,81.5 1316,81.1 1330,81.0 1344,81.3 1358,81.9 1372,82.8 1386,84.0 1400,85.4%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.45%22 points=%220,170.3 14,168.0 28,165.8 42,163.5 56,161.4 70,159.3 84,157.5 98,155.9 112,154.5 126,153.3 140,152.4 154,151.7 168,151.3 182,150.9 196,150.7 210,150.5 224,150.4 238,150.2 252,149.9 266,149.4 280,148.8 294,148.0 308,147.0 322,145.9 336,144.6 350,143.1 364,141.6 378,140.0 392,138.4 406,137.0 420,135.6 434,134.4 448,133.5 462,132.8 476,132.5 490,132.4 504,132.7 518,133.2 532,134.0 546,135.1 560,136.3 574,137.6 588,138.9 602,140.3 616,141.5 630,142.7 644,143.6 658,144.2 672,144.6 686,144.7 700,144.5 714,143.9 728,143.1 742,142.1 756,140.9 770,139.5 784,138.0 798,136.5 812,135.0 826,133.6 840,132.4 854,131.3 868,130.3 882,129.6 896,129.1 910,128.8 924,128.6 938,128.6 952,128.6 966,128.7 980,128.7 994,128.7 1008,128.6 1022,128.3 1036,127.7 1050,127.0 1064,126.0 1078,124.8 1092,123.4 1106,121.8 1120,120.1 1134,118.3 1148,116.4 1162,114.6 1176,112.9 1190,111.4 1204,110.0 1218,109.0 1232,108.3 1246,108.0 1260,108.0 1274,108.4 1288,109.2 1302,110.3 1316,111.8 1330,113.5 1344,115.4 1358,117.5 1372,119.7 1386,121.9 1400,124.0%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.41%22 points=%220,188.5 14,186.8 28,185.4 42,184.2 56,183.4 70,182.8 84,182.5 98,182.5 112,182.7 126,183.0 140,183.5 154,184.0 168,184.5 182,185.0 196,185.3 210,185.5 224,185.6 238,185.4 252,185.1 266,184.5 280,183.8 294,182.9 308,182.0 322,181.0 336,180.0 350,179.0 364,178.2 378,177.5 392,177.0 406,176.7 420,176.7 434,177.0 448,177.5 462,178.2 476,179.1 490,180.2 504,181.3 518,182.5 532,183.6 546,184.7 560,185.6 574,186.3 588,186.7 602,186.8 616,186.5 630,186.0 644,185.1 658,183.8 672,182.3 686,180.5 700,178.6 714,176.4 728,174.3 742,172.1 756,169.9 770,167.9 784,166.0 798,164.3 812,162.8 826,161.5 840,160.5 854,159.6 868,159.0 882,158.5 896,158.1 910,157.7 924,157.4 938,157.0 952,156.5 966,155.9 980,155.2 994,154.2 1008,153.1 1022,151.8 1036,150.4 1050,148.8 1064,147.1 1078,145.5 1092,143.8 1106,142.3 1120,140.9 1134,139.7 1148,138.9 1162,138.3 1176,138.1 1190,138.3 1204,139.0 1218,139.9 1232,141.3 1246,143.0 1260,145.0 1274,147.3 1288,149.7 1302,152.2 1316,154.8 1330,157.3 1344,159.8 1358,162.2 1372,164.3 1386,166.3 1400,168.1%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.38%22 points=%220,214.5 14,214.7 28,215.3 42,216.0 56,217.0 70,218.2 84,219.4 98,220.7 112,221.9 126,223.0 140,224.0 154,224.9 168,225.5 182,225.9 196,226.0 210,226.0 224,225.7 238,225.2 252,224.7 266,224.0 280,223.3 294,222.6 308,222.0 322,221.5 336,221.2 350,221.0 364,221.1 378,221.3 392,221.7 406,222.3 420,223.0 434,223.8 448,224.6 462,225.4 476,226.1 490,226.6 504,226.9 518,226.9 532,226.7 546,226.1 560,225.1 574,223.8 588,222.1 602,220.1 616,217.9 630,215.4 644,212.8 658,210.0 672,207.2 686,204.5 700,201.8 714,199.3 728,197.0 742,194.9 756,193.1 770,191.6 784,190.3 798,189.2 812,188.4 826,187.8 840,187.2 854,186.8 868,186.4 882,186.0 896,185.6 910,185.0 924,184.3 938,183.5 952,182.5 966,181.4 980,180.2 994,178.9 1008,177.6 1022,176.3 1036,175.0 1050,173.9 1064,173.0 1078,172.4 1092,172.1 1106,172.1 1120,172.4 1134,173.2 1148,174.3 1162,175.8 1176,177.6 1190,179.8 1204,182.1 1218,184.7 1232,187.4 1246,190.1 1260,192.9 1274,195.5 1288,198.0 1302,200.3 1316,202.4 1330,204.3 1344,205.9 1358,207.2 1372,208.3 1386,209.1 1400,209.8%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.34%22 points=%220,254.6 14,256.4 28,258.3 42,260.2 56,262.0 70,263.7 84,265.2 98,266.4 112,267.4 126,268.1 140,268.5 154,268.6 168,268.5 182,268.1 196,267.6 210,267.0 224,266.3 238,265.6 252,264.9 266,264.3 280,263.9 294,263.5 308,263.3 322,263.3 336,263.4 350,263.6 364,263.9 378,264.2 392,264.5 406,264.7 420,264.8 434,264.7 448,264.4 462,263.8 476,262.8 490,261.5 504,259.9 518,257.9 532,255.6 546,253.1 560,250.3 574,247.3 588,244.2 602,241.1 616,237.9 630,234.9 644,232.1 658,229.4 672,227.0 686,224.9 700,223.1 714,221.6 728,220.5 742,219.6 756,218.9 770,218.5 784,218.2 798,218.0 812,217.9 826,217.7 840,217.5 854,217.3 868,216.9 882,216.4 896,215.8 910,215.1 924,214.2 938,213.3 952,212.4 966,211.5 980,210.7 994,210.1 1008,209.6 1022,209.4 1036,209.5 1050,209.9 1064,210.7 1078,211.8 1092,213.2 1106,215.0 1120,217.1 1134,219.3 1148,221.8 1162,224.4 1176,227.0 1190,229.6 1204,232.2 1218,234.6 1232,236.7 1246,238.7 1260,240.3 1274,241.7 1288,242.7 1302,243.5 1316,244.0 1330,244.2 1344,244.3 1358,244.3 1372,244.2 1386,244.0 1400,243.9%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.31%22 points=%220,303.5 14,305.4 28,307.0 42,308.3 56,309.3 70,310.0 84,310.3 98,310.3 112,310.1 126,309.5 140,308.8 154,307.9 168,307.0 182,306.0 196,305.0 210,304.1 224,303.2 238,302.5 252,301.9 266,301.5 280,301.2 294,300.9 308,300.7 322,300.6 336,300.4 350,300.1 364,299.6 378,299.0 392,298.1 406,297.0 420,295.5 434,293.8 448,291.7 462,289.3 476,286.7 490,283.8 504,280.8 518,277.6 532,274.4 546,271.3 560,268.2 574,265.3 588,262.6 602,260.2 616,258.0 630,256.3 644,254.8 658,253.7 672,253.0 686,252.5 700,252.3 714,252.3 728,252.5 742,252.8 756,253.1 770,253.4 784,253.6 798,253.8 812,253.8 826,253.7 840,253.4 854,253.1 868,252.6 882,252.0 896,251.4 910,250.9 924,250.4 938,250.0 952,249.8 966,249.8 980,250.1 994,250.7 1008,251.5 1022,252.7 1036,254.1 1050,255.8 1064,257.8 1078,259.8 1092,262.1 1106,264.3 1120,266.5 1134,268.7 1148,270.7 1162,272.4 1176,274.0 1190,275.2 1204,276.1 1218,276.7 1232,277.0 1246,277.0 1260,276.7 1274,276.2 1288,275.6 1302,274.8 1316,274.0 1330,273.2 1344,272.4 1358,271.8 1372,271.3 1386,271.1 1400,271.0%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.27%22 points=%220,349.3 14,349.6 28,349.6 42,349.2 56,348.5 70,347.6 84,346.4 98,345.1 112,343.7 126,342.3 140,340.9 154,339.6 168,338.3 182,337.2 196,336.3 210,335.5 224,334.8 238,334.2 252,333.6 266,333.1 280,332.6 294,332.0 308,331.3 322,330.3 336,329.2 350,327.8 364,326.2 378,324.3 392,322.1 406,319.7 420,317.1 434,314.3 448,311.4 462,308.4 476,305.5 490,302.6 504,299.9 518,297.5 532,295.3 546,293.4 560,291.8 574,290.6 588,289.8 602,289.3 616,289.2 630,289.3 644,289.7 658,290.3 672,291.0 686,291.8 700,292.5 714,293.3 728,293.9 742,294.4 756,294.7 770,294.9 784,294.8 798,294.6 812,294.3 826,293.9 840,293.4 854,292.9 868,292.4 882,292.0 896,291.8 910,291.7 924,291.9 938,292.3 952,292.9 966,293.8 980,294.9 994,296.2 1008,297.7 1022,299.3 1036,300.9 1050,302.5 1064,304.1 1078,305.5 1092,306.7 1106,307.7 1120,308.4 1134,308.8 1148,308.8 1162,308.6 1176,308.0 1190,307.2 1204,306.1 1218,304.9 1232,303.5 1246,302.1 1260,300.7 1274,299.3 1288,298.1 1302,297.1 1316,296.2 1330,295.7 1344,295.4 1358,295.3 1372,295.5 1386,296.0 1400,296.7%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.23%22 points=%220,382.7 14,381.2 28,379.6 42,377.9 56,376.1 70,374.3 84,372.5 98,370.9 112,369.4 126,368.1 140,366.9 154,365.9 168,365.1 182,364.4 196,363.8 210,363.2 224,362.7 238,362.1 252,361.3 266,360.5 280,359.5 294,358.2 308,356.7 322,355.0 336,353.1 350,351.0 364,348.7 378,346.3 392,343.9 406,341.4 420,339.1 434,336.8 448,334.7 462,332.9 476,331.4 490,330.2 504,329.4 518,328.9 532,328.8 546,328.9 560,329.4 574,330.2 588,331.1 602,332.2 616,333.3 630,334.4 644,335.5 658,336.5 672,337.3 686,337.9 700,338.3 714,338.5 728,338.4 742,338.1 756,337.6 770,337.0 784,336.3 798,335.5 812,334.8 826,334.1 840,333.5 854,333.0 868,332.7 882,332.7 896,332.8 910,333.1 924,333.7 938,334.4 952,335.2 966,336.0 980,336.9 994,337.8 1008,338.5 1022,339.1 1036,339.5 1050,339.7 1064,339.5 1078,339.1 1092,338.4 1106,337.4 1120,336.1 1134,334.6 1148,332.9 1162,331.1 1176,329.2 1190,327.4 1204,325.6 1218,324.0 1232,322.6 1246,321.4 1260,320.5 1274,319.9 1288,319.7 1302,319.8 1316,320.2 1330,320.8 1344,321.7 1358,322.8 1372,324.1 1386,325.4 1400,326.8%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221%22 opacity=%220.20%22 points=%220,404.6 14,402.7 28,400.8 42,399.2 56,397.7 70,396.4 84,395.3 98,394.5 112,393.9 126,393.4 140,393.1 154,392.8 168,392.5 182,392.3 196,391.9 210,391.5 224,390.8 238,390.0 252,389.0 266,387.8 280,386.4 294,384.9 308,383.2 322,381.4 336,379.6 350,377.8 364,376.1 378,374.6 392,373.2 406,372.1 420,371.3 434,370.8 448,370.7 462,370.8 476,371.2 490,372.0 504,372.9 518,374.1 532,375.3 546,376.7 560,378.0 574,379.2 588,380.4 602,381.3 616,382.0 630,382.4 644,382.5 658,382.4 672,382.0 686,381.3 700,380.4 714,379.3 728,378.1 742,376.8 756,375.4 770,374.2 784,373.0 798,371.9 812,371.0 826,370.3 840,369.8 854,369.5 868,369.4 882,369.3 896,369.5 910,369.6 924,369.8 938,369.9 952,369.9 966,369.8 980,369.5 994,369.0 1008,368.2 1022,367.1 1036,365.8 1050,364.3 1064,362.5 1078,360.6 1092,358.6 1106,356.6 1120,354.5 1134,352.6 1148,350.8 1162,349.2 1176,347.9 1190,346.9 1204,346.3 1218,346.1 1232,346.2 1246,346.6 1260,347.4 1274,348.6 1288,349.9 1302,351.5 1316,353.2 1330,355.0 1344,356.9 1358,358.7 1372,360.4 1386,362.0 1400,363.5%22/%3E%3C/svg%3E") no-repeat center top / 100% auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent); mask-image: linear-gradient(to bottom, #000 30%, transparent); }
/* поддерживающее движение: только при обычном motion */
@media (prefers-reduced-motion: no-preference){
  /* Now: латунная черта под тайлом наполняется */
  .kpi{ position: relative; }
  .kpi::after{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .25s; }
  .kpi.is-in::after{ transform: scaleX(1); }
  /* Путь: знак «О» шага зажигается латунью, когда шаг в экране */
  .path-step::before{ filter: grayscale(1) opacity(.45); transition: filter .6s var(--ease) .15s; }
  .path-step.is-in::before{ filter: none; }
  /* Then перечёркивается, One year later проявляется следом */
  .shift-big .shift-then span{ position: relative; display: inline-block; }
  .shift-big .shift-then span::after{ content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 3px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease) .35s; }
  .shift-big.is-in .shift-then span::after{ transform: scaleX(1); }
  .shift-big .shift-now{ opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .95s, transform .6s var(--ease) .95s; }
  .shift-big.is-in .shift-now{ opacity: 1; transform: none; }
  /* Principles: разделитель проводится латунью при входе */
  .mcard{ position: relative; }
  .mcard::before{ content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease) .2s; }
  .mcard.is-in::before{ transform: scaleX(1); }
  /* Фото-паузы: медленный наезд, только десктоп с мышью */
  @media (hover: hover) and (min-width: 62rem){
    .pause-fig img{ transform: scale(1); transition: transform 12s linear; }
    .pause-fig.is-in img{ transform: scale(1.04); }
    .pause-fig{ overflow: hidden; }
  }
}
@media print{ body{ background-image: none !important; } .run::before, #built::before, #bukovel::before{ display: none !important; } }
/* ══ v23 первый экран: печать цитаты, штриховая прорисовка гравюр, роли после гравюры ══ */
.engr-svg{ display: block; height: auto; fill: var(--brass); overflow: visible; }
.engr-svg path{ vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference){
  /* до старта интро (только с JS): штрихи невидимы, заливка 0, роли скрыты */
  html.js:not(.intro-done) .engr-svg path{ fill-opacity: 0; stroke: var(--brass); stroke-width: .9px; }
  html.js.intro .engr-svg.drawn path{ fill-opacity: 1; stroke: none; }
  html.js:not(.intro-done) .roles > div:not(.done) dt, html.js:not(.intro-done) .roles > div:not(.done) dd > span, html.js:not(.intro-done) .roles > div:not(.done) dd{ color: transparent; }
  .roles dt, .roles dd{ transition: color .6s var(--ease); }
  .roles dd .engr-svg{ color: var(--bone); }
  html.js:not(.intro-done) .roles > div:not(.done) dd .engr-svg{ color: inherit; }
  /* на телефоне гравюра открывается маской слева направо вместо поштриховой прорисовки */
  @media (max-width: 62rem){
    html.js:not(.intro-done) .engr-svg path{ fill-opacity: 1; stroke: none; }
    html.js:not(.intro-done) .engr-svg{ -webkit-mask-image: linear-gradient(to right, #000 calc(var(--p, 0) * 100% - 8%), transparent calc(var(--p, 0) * 100% + 4%)); mask-image: linear-gradient(to right, #000 calc(var(--p, 0) * 100% - 8%), transparent calc(var(--p, 0) * 100% + 4%)); }
  }
  /* цитата: курсор во время печати, закрывающая кавычка после */
  html.js .sign-quote .qmark-end{ opacity: 0; transition: opacity .3s var(--ease); }
  html.js .sign-quote.typed .qmark-end{ opacity: 1; }
  html.js .sign-quote:not(.typed) .tw::after{ content: ""; display: inline-block; width: 2px; height: 1em; background: var(--brass); vertical-align: -.12em; margin-left: 2px; animation: kcur 1s steps(2) infinite; }
  @keyframes kcur{ 50%{ opacity: 0; } }
  /* хореография: имя и подзаголовок одним движением, портрет проявляется с 96 %, роли без своей задержки */
  .hero .lede{ animation-delay: 0s !important; }
  .hero-por{ animation: porIn .9s var(--ease) .15s both !important; }
  @keyframes porIn{ from{ opacity: 0; transform: scale(.96); } to{ opacity: 1; transform: none; } }
  .hero .sign-quote{ animation: none !important; opacity: 1; }
  .hero .roles{ animation: none !important; opacity: 1; }
  .role-engr{ animation: none !important; }
}
@media print{ .engr-svg{ display: none !important; } .sign-quote .qmark-end{ opacity: 1 !important; } }

/* ══ v24 05.09.2026: правки Саши по v23 + брендбук («рамка и воздух», без паттернов) ══ */
/* сетка и зерно сняты (брендбук: никаких паттернов), гравюры обратно растром с прежним появлением */
.run::before{ content: none; }
body{ background-image: none; }
@media (prefers-reduced-motion: no-preference){
  .hero .roles{ animation: rise .8s var(--ease) .45s both !important; }
  .role-engr{ animation: engrIn 1.4s var(--ease) .6s both !important; }
}
/* горы за шапкой Bukovel: только в зоне заголовка, справа, текст не пересекают */
#bukovel::before{ inset: -2.5rem 0 auto auto; width: min(52%, 40rem); height: 11rem; opacity: .7;
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%221400%22 height=%22300%22 viewBox=%220 0 1400 300%22%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221.1%22 opacity=%220.60%22 points=%220,150.0 10,148.7 20,146.7 30,142.6 40,135.0 50,125.0 60,115.8 70,110.5 80,108.9 90,108.4 100,106.0 110,101.5 120,96.2 130,91.8 140,88.6 150,86.5 160,84.1 170,80.6 180,77.2 190,77.1 200,82.5 210,92.4 220,103.2 230,111.5 240,116.7 250,119.9 260,121.9 270,123.0 280,122.7 290,120.0 300,114.6 310,108.1 320,104.0 330,104.3 340,107.7 350,110.6 360,110.5 370,107.1 380,102.2 390,96.7 400,91.3 410,85.7 420,78.7 430,70.4 440,63.0 450,60.1 460,63.8 470,72.6 480,82.6 490,91.3 500,98.4 510,104.8 520,111.0 530,116.6 540,120.7 550,121.7 560,119.4 570,116.1 580,115.5 590,119.4 600,126.3 610,132.8 620,136.4 630,137.1 640,136.3 650,134.5 660,131.6 670,126.9 680,119.2 690,109.0 700,99.3 710,93.7 720,94.0 730,96.3 740,98.7 750,100.0 760,100.9 770,102.5 780,105.2 790,108.7 800,111.6 810,112.1 820,110.4 830,109.0 840,110.9 850,116.7 860,124.1 870,129.4 880,131.5 890,131.3 900,130.5 910,129.5 920,127.8 930,124.0 940,116.9 950,107.0 960,97.5 970,91.5 980,89.8 990,89.8 1000,88.7 1010,85.4 1020,81.5 1030,78.4 1040,76.7 1050,76.2 1060,75.7 1070,74.0 1080,72.0 1090,72.4 1100,78.0 1110,88.3 1120,99.9 1130,109.3 1140,115.4 1150,119.1 1160,121.6 1170,123.2 1180,123.8 1190,122.3 1200,118.0 1210,112.3 1220,108.2 1230,108.2 1240,111.6 1250,115.1 1260,115.8 1270,113.3 1280,109.1 1290,104.4 1300,100.0 1310,95.6 1320,90.3 1330,83.7 1340,77.5 1350,75.3 1360,79.5 1370,89.1 1380,100.5 1390,110.5 1400,118.5%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221.1%22 opacity=%220.50%22 points=%220,140.1 10,140.1 20,137.1 30,132.0 40,126.5 50,121.7 60,117.6 70,113.6 80,108.6 90,103.1 100,99.9 110,102.2 120,110.6 130,122.1 140,133.0 150,141.3 160,147.5 170,152.7 180,157.1 190,160.3 200,161.3 210,158.9 220,154.0 230,150.0 240,150.4 250,155.2 260,161.4 270,165.4 280,166.0 290,163.9 300,160.6 310,156.7 320,151.9 330,145.5 340,136.8 350,127.2 360,120.3 370,119.2 380,124.1 390,132.0 400,139.7 410,146.0 420,152.0 430,156.8 440,161.1 450,165.0 460,166.7 470,165.2 480,161.6 490,159.1 500,160.5 510,165.4 520,170.7 530,173.7 540,174.1 550,173.0 560,171.0 570,168.3 580,164.0 590,157.0 600,146.6 610,134.5 620,124.6 630,119.7 640,119.1 650,119.8 660,119.4 670,117.9 680,116.9 690,117.2 700,118.9 710,121.3 720,122.7 730,122.3 740,121.6 750,123.9 760,130.8 770,140.7 780,149.9 790,155.9 800,158.7 810,159.8 820,160.3 830,160.4 840,159.7 850,156.5 860,150.2 870,143.0 880,138.2 890,137.5 900,139.3 910,140.2 920,138.5 930,134.5 940,130.2 950,126.6 960,124.1 970,121.8 980,118.8 990,115.0 1000,112.9 1010,115.7 1020,124.5 1030,136.9 1040,148.9 1050,158.2 1060,165.0 1070,170.5 1080,175.0 1090,178.5 1100,179.9 1110,178.1 1120,173.6 1130,169.5 1140,169.3 1150,172.7 1160,176.4 1170,178.2 1180,176.5 1190,172.1 1200,166.2 1210,159.8 1220,152.8 1230,144.6 1240,134.3 1250,123.0 1260,113.8 1270,110.3 1280,113.1 1290,119.5 1300,126.0 1310,131.2 1320,135.6 1330,140.1 1340,144.8 1350,149.1 1360,151.4 1370,150.5 1380,146.9 1390,144.0 1400,144.7%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221.1%22 opacity=%220.40%22 points=%220,158.5 10,151.9 20,149.8 30,154.3 40,163.8 50,174.6 60,184.0 70,191.6 80,198.5 90,205.1 100,211.1 110,215.5 120,216.8 130,213.3 140,207.7 150,204.7 160,206.3 170,210.9 180,215.1 190,216.4 200,214.8 210,211.6 220,207.3 230,202.1 240,195.0 250,185.1 260,172.7 270,160.8 280,153.0 290,151.2 300,153.5 310,156.5 320,158.4 330,159.9 340,162.1 350,165.5 360,169.7 370,173.1 380,174.3 390,173.2 400,172.2 410,174.5 420,180.9 430,188.8 440,194.8 450,197.6 460,198.1 470,198.1 480,197.8 490,196.8 500,193.9 510,187.5 520,178.3 530,169.4 540,164.1 550,163.1 560,164.0 570,163.9 580,161.7 590,158.8 600,156.7 610,156.0 620,156.6 630,157.3 640,156.7 650,155.6 660,156.9 670,163.2 680,174.2 690,186.5 700,196.6 710,203.3 720,207.6 730,210.6 740,212.8 750,214.0 760,213.1 770,209.4 780,204.2 790,200.4 800,200.6 810,204.3 820,208.2 830,209.2 840,207.0 850,202.3 860,195.6 870,189.0 880,182.6 890,175.3 900,166.6 910,158.3 920,154.0 930,156.1 940,163.5 950,172.8 960,180.7 970,186.5 980,191.2 990,195.4 1000,198.9 1010,200.9 1020,200.1 1030,195.7 1040,189.9 1050,186.4 1060,187.5 1070,192.3 1080,197.1 1090,199.1 1100,198.0 1110,194.9 1120,190.9 1130,186.0 1140,179.6 1150,170.7 1160,159.4 1170,148.1 1180,140.7 1190,139.5 1200,142.9 1210,147.8 1220,151.7 1230,155.0 1240,158.7 1250,163.5 1260,168.8 1270,173.6 1280,176.1 1290,175.9 1300,175.1 1310,177.1 1320,183.2 1330,191.4 1340,198.4 1350,202.3 1360,203.8 1370,204.6 1380,205.0 1390,204.6 1400,202.4%22/%3E%3Cpolyline fill=%22none%22 stroke=%22%238F6C3C%22 stroke-width=%221.1%22 opacity=%220.30%22 points=%220,215.2 10,219.8 20,224.0 30,226.2 40,225.1 50,221.8 60,219.6 70,221.3 80,226.6 90,232.5 100,236.1 110,237.2 120,236.7 130,235.3 140,233.2 150,229.6 160,223.2 170,213.5 180,202.1 190,193.0 200,188.8 210,189.0 220,190.7 230,191.4 240,191.1 250,191.1 260,192.5 270,195.3 280,198.7 290,201.2 300,201.7 310,201.9 320,204.9 330,212.5 340,223.0 350,233.0 360,239.7 370,243.2 380,245.0 390,246.2 400,247.1 410,247.1 420,244.5 430,238.9 440,232.1 450,227.7 460,227.4 470,229.7 480,231.2 490,229.9 500,226.5 510,222.8 520,219.8 530,217.7 540,216.1 550,213.3 560,207.6 570,203.4 580,204.1 590,210.7 600,220.8 610,230.6 620,237.7 630,242.2 640,245.3 650,247.4 660,248.4 670,247.5 680,243.4 690,236.7 700,230.4 710,227.9 720,229.9 730,233.8 740,236.0 750,234.6 760,230.4 770,225.0 780,219.0 790,212.5 800,205.0 810,195.5 820,184.9 830,176.5 840,173.8 850,177.4 860,184.8 870,192.3 880,198.3 890,203.6 900,209.0 910,214.5 920,219.6 930,222.7 940,222.5 950,219.7 960,217.4 970,218.8 980,224.2 990,230.8 1000,235.8 1010,238.0 1020,238.3 1030,237.5 1040,235.8 1050,232.8 1060,227.4 1070,218.6 1080,207.9 1090,198.9 1100,194.8 1110,195.7 1120,198.8 1130,201.3 1140,202.7 1150,204.3 1160,207.1 1170,211.2 1180,216.0 1190,219.8 1200,221.5 1210,222.1 1220,224.8 1230,231.7 1240,242.0 1250,252.1 1260,259.3 1270,263.1 1280,262.8 1290,261.7 1300,260.4 1310,258.3 1320,253.6 1330,245.7 1340,236.1 1350,228.2 1360,224.5 1370,223.9 1380,223.2 1390,220.1 1400,214.9%22/%3E%3C/svg%3E") no-repeat right top / 100% auto;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 45%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to left, #000 55%, transparent), linear-gradient(to bottom, #000 45%, transparent); mask-composite: intersect; }
@media (max-width: 62rem){ #bukovel::before{ width: 70%; height: 8rem; inset: -2rem -1rem auto auto; } }
/* Principles: одна линия под заголовком, карточки без линий, цитата как лид раздела */
.method .mcard{ border-top: 0; padding-top: 0; }
.method .mcard::before{ display: none; }
.method .mgrid{ gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 3.5rem); }
.principle-lead{ margin: 0 0 clamp(1.8rem, 4vw, 2.6rem); font-size: var(--t-lg); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; max-width: 22ch; text-wrap: balance; color: var(--ink-900); }
/* шапка Built: только лого, крупно; Bukovel: лого + сезон малым капсом */
.bgroup-logos .bgroup-head h3{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bgroup-logos .bgroup-head .b-place .lgo, .bgroup-logos .bgroup-head .b-place .lgo-img{ height: 3.4rem; }
.bgroup-logos .bgroup-head .b-place .lgo-gv{ height: 4.2rem; }
.bgroup-logos .bgroup-head .b-place .amp{ font-size: 1.3rem; margin-inline: .5rem; }
.bgroup-logos .bgroup-head{ padding-block: .4rem .9rem; }
#bukovel .bgroup-head .b-place .lgo-buk{ height: 2.6rem; }
#bukovel .bgroup-head{ flex-direction: row-reverse; justify-content: flex-end; gap: 1.2rem; }
.bgroup-sub{ font-size: var(--t-xs) !important; letter-spacing: .12em; text-transform: uppercase; font-weight: 600 !important; color: var(--bone-45); align-self: center; }
/* подписи на фото: полупрозрачная чернильная полоса, медный тик, текст кость. Брендбук: «линия + тик» */
.pause-fig, .roll-grid figure, .turn-fig, .path-fig.collage figure{ position: relative; }
.pause-fig figcaption, .roll-grid figcaption, .turn-fig figcaption, .path-fig.collage figcaption{
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 2;
  padding: .7rem clamp(.8rem, 2vw, 1.1rem) .8rem; color: var(--ink-900); font-size: calc(var(--t-sm) * .9); line-height: 1.35; font-weight: 500; letter-spacing: 0;
  background: color-mix(in oklch, var(--bone) 62%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-radius: 0 0 var(--r-frame) var(--r-frame); opacity: 1; max-width: none; text-wrap: balance; }
.pause-fig figcaption::before, .roll-grid figcaption::before, .turn-fig figcaption::before, .path-fig.collage figcaption::before{ content: ""; display: block; width: 1.4rem; height: 2px; background: var(--brass-hi); margin-bottom: .45rem; }
.pause-fig{ display: block; overflow: hidden; border-radius: var(--r-frame); }
.pause-fig img{ display: block; }
.turn-fig{ position: relative; } .turn-fig figcaption{ left: 0; right: 0; bottom: 0; margin: 0 !important; }
.turn-fig .framed{ display: block; }
.turn-fig figcaption{ border-radius: 0 0 var(--r-frame) var(--r-frame); }
.roll-grid figure{ display: block; overflow: hidden; border-radius: var(--r-frame); }
.roll-grid figcaption{ font-size: calc(var(--t-xs) * 1.02); padding: .55rem .8rem .65rem; }
.roll-grid figcaption::before{ width: 1.1rem; margin-bottom: .35rem; }
.path-fig.collage{ display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin: 0; }
.path-fig.collage figure{ margin: 0; overflow: hidden; border-radius: .7rem; }
.path-fig.collage img{ width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 0; }
.path-fig.collage figcaption{ font-size: calc(var(--t-xs) * .92); padding: .45rem .6rem .55rem; line-height: 1.3; border-radius: 0; }
.path-fig.collage figcaption::before{ width: .9rem; height: 2px; margin-bottom: .3rem; }
@media (max-width: 62rem){ .path-fig.collage img{ aspect-ratio: 4 / 5; } }
/* телефон: галерея свайпом, одна строка, край следующего кадра виден */
.roll-hint{ display: none; margin: -.4rem 0 1rem; font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--bone-45); }
@media (max-width: 46rem){
  .roll-hint{ display: block; }
  .roll-grid{ display: flex !important; grid-template-columns: none !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem !important; padding: 0 0 .6rem; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .roll-grid::-webkit-scrollbar{ display: none; }
  .roll-grid figure{ flex: 0 0 78vw; scroll-snap-align: start; grid-column: auto !important; }
  .roll-grid figure img{ aspect-ratio: 4 / 5 !important; }
  .roll-grid figure:nth-child(n+3):nth-child(odd):last-child{ grid-column: auto; }
}
@media print{ #bukovel::before{ display: none !important; } .principle-lead{ font-size: 13pt !important; margin: 0 0 .4rem !important; } .roll-hint{ display: none !important; } }
/* ══ v25 05.09.2026: порядок интро, скобы по радиусу, подписи без мыла и по форме кадра, даты ══ */
@media (prefers-reduced-motion: no-preference){
  /* 1 имя и подзаголовок → 2 линия, роли и гравюры вместе → 3 цитата (печать стартует из JS на 2,1 с) */
  .hero h1{ animation: rise .8s var(--ease) 0s both !important; }
  .hero .lede{ animation: rise .8s var(--ease) .08s both !important; }
  .hero-por{ animation: porIn .9s var(--ease) .15s both !important; }
  .hero .roles{ animation: rise .8s var(--ease) .95s both !important; }
  .role-engr{ animation: engrIn 1.1s var(--ease) 1.05s both !important; }
}
/* скобы повторяют радиус кадра: радиус кадра + отступ 8px */
.framed::before{ border-radius: calc(var(--r-frame) + 8px) 0 0 0 !important; }
.framed::after{ border-radius: 0 0 calc(var(--r-frame) + 8px) 0 !important; }
/* подписи: полоса ровно по кадру, без blur, скругление совпадает с кадром */
.ph{ position: relative; display: block; overflow: hidden; border-radius: var(--r-frame); }
.ph img{ display: block; width: 100%; height: auto; border-radius: 0; }
.pause-fig{ overflow: visible; border-radius: 0; }
.pause-fig figcaption, .roll-grid figcaption, .turn-fig figcaption, .path-fig.collage figcaption{
  -webkit-backdrop-filter: none; backdrop-filter: none;
  background: color-mix(in oklch, var(--bone) 76%, transparent); border-radius: 0; }
.roll-grid figure, .path-fig.collage figure{ overflow: hidden; }
.roll-grid figure img, .path-fig.collage img{ border-radius: 0; }
.turn-fig .framed{ position: relative; display: block; }
.turn-fig .framed figcaption{ position: absolute; left: 0; right: 0; bottom: 0; margin: 0 !important; border-radius: 0 0 var(--r-frame) var(--r-frame); }
.turn-fig .framed img{ display: block; }
/* v25.1: роли видны вместе с гравюрами (правило v23 про скрытие ролей снято), открывающая кавычка появляется только со стартом печати */
html.js:not(.intro-done) .roles > div:not(.done) dt{ color: var(--bone); }
html.js:not(.intro-done) .roles > div:not(.done) dd{ color: var(--bone-70); }
html.js:not(.intro-done) .roles > div:not(.done) dd > span{ color: var(--bone-45); }
html.js .sign-quote:not(.typing):not(.typed) .qmark{ opacity: 0; }
html.js .sign-quote .qmark{ transition: opacity .25s var(--ease); }
/* ══ v26 05.09.2026: линии и пропорции по замеру (1440) ══ */
/* одна ось второй колонки у всех двухколоночных сеток: зазор 3rem, вторая колонка от 744 px при 1440 */
@media (min-width: 52rem){ .ba{ column-gap: 3rem; } }
@media (min-width: 52rem){ .mgrid{ column-gap: 3rem; } .side-grid{ column-gap: 3rem; } }
/* бенто: оба ряда одной высоты */
.bento{ grid-auto-rows: 1fr; }
/* подписи одной высоты на паузах и в roll: одинаковые отступы, тик, без переносов у 1913 */
.pause.pause-split.pause-fig .ph figcaption, .roll-grid figure figcaption, .turn-fig .framed figcaption{ padding: .6rem 1rem .7rem !important; font-size: calc(var(--t-xs) * 1.02); line-height: 1.35; max-width: none; }
.pause.pause-split.pause-fig .ph figcaption::before, .roll-grid figure figcaption::before, .turn-fig .framed figcaption::before{ width: 1.1rem; margin-bottom: .35rem; }
.turn-fig .framed figcaption{ white-space: nowrap; }
/* Talk: тот же отступ после заголовка, что у остальных секций */
.contact h2{ margin-bottom: clamp(1rem, 2.5vw, 1.5rem); }
/* v26.1: Principles на ту же ось (744 при 1440), Talk: зазор после заголовка 24 px как везде */
@media (min-width: 52rem){ .method .mgrid{ column-gap: 3rem; } }
.contact h2{ margin-bottom: .25rem; }
/* v26.2: на телефоне строка лого переносится и не вылезает за экран */
@media (max-width: 62rem){
  .bgroup-logos .bgroup-head .b-place{ flex-wrap: wrap; row-gap: .7rem; }
  .bgroup-logos .bgroup-head .b-place .lgo, .bgroup-logos .bgroup-head .b-place .lgo-img{ height: 2.5rem; }
  .bgroup-logos .bgroup-head .b-place .lgo-gv{ height: 3.1rem; }
}
/* ══ v27 05.09.2026: подписи в одну тонкую строку, тик слева; лого на телефоне без «&» ══ */
.pause.pause-split.pause-fig .ph figcaption, .roll-grid figure figcaption, .turn-fig .framed figcaption, .path-fig.collage figcaption{
  display: flex; align-items: center; gap: .55rem; padding: .42rem .85rem !important; text-align: left; justify-content: flex-start;
  font-size: .78rem; line-height: 1.25; font-weight: 500; letter-spacing: .015em; color: var(--ink-900);
  background: color-mix(in oklch, var(--bone) 70%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pause.pause-split.pause-fig .ph figcaption::before, .roll-grid figure figcaption::before, .turn-fig .framed figcaption::before, .path-fig.collage figcaption::before{
  content: ""; flex: none; width: .8rem; height: 2px; margin: 0; background: var(--brass-hi); }
.path-fig.collage figcaption{ white-space: normal; font-size: .68rem; padding: .35rem .55rem !important; gap: .4rem; align-items: flex-start; }
.path-fig.collage figcaption::before{ margin-top: .45em; width: .55rem; }
@media (max-width: 46rem){ .roll-grid figure figcaption{ font-size: .74rem; } .pause.pause-split.pause-fig .ph figcaption{ font-size: .74rem; } }
/* строка лого на телефоне: без амперсандов, ровные ряды */
@media (max-width: 62rem){ .bgroup-logos .bgroup-head .b-place .amp{ display: none; } .bgroup-logos .bgroup-head .b-place{ gap: 1.1rem 1.6rem; } }
/* ══ v28 05.09.2026: прогон глазами. Брендбук: рамка «О» только маркером и скобами, остальное воздух ══ */
.kpi::after{ content: none !important; }
#built::before{ content: none !important; }
#bukovel::before{ content: none !important; }
/* ══ v29 05.09.2026: Bukovel-лого слева, Notes под один день, шапка на узких телефонах ══ */
#bukovel .bgroup-head{ flex-direction: row; justify-content: flex-start; align-items: center; gap: 1.2rem; }
@media (max-width: 62rem){ #bukovel .bgroup-head{ flex-direction: row; flex-wrap: wrap; } }
.note-date-same{ visibility: hidden; }
@media (max-width: 56rem){ .notes-list .note-date-same{ display: none; } .notes-page .note-date-same{ display: none; } }
/* шапка: безопасная зона iPhone и запас справа для CONTACT */
.top{ padding-top: env(safe-area-inset-top, 0px); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); }
@media (max-width: 62rem){ .top{ padding-right: max(var(--gut), calc((100% - 72rem) / 2), env(safe-area-inset-right, 0px)); } }
/* v29.1: шапка на телефоне выше, вордмарк не упирается в верх экрана */
@media (max-width: 62rem){ .top{ padding-block: calc(.85rem + env(safe-area-inset-top, 0px)) .85rem; min-height: 3.4rem; align-items: center; } }
/* v29.2: на телефоне полное меню второй строкой (Built · Principles · Notes · Contact), не только Contact */
@media (max-width: 62rem){
  .top{ flex-wrap: wrap; row-gap: .35rem; padding-bottom: .7rem; }
  .topnav{ flex-basis: 100%; gap: 1.15rem; justify-content: flex-start; }
  .topnav a:not(:last-child){ display: inline-block; }
  .topnav a{ font-size: .68rem; letter-spacing: .12em; }
  .hero{ padding-top: clamp(8.4rem, 18vh, 9.5rem); }
  html{ scroll-padding-top: 6rem; }
}
/* v30 05.09.2026: проявление по скроллу быстрее (0,45 с), Talk без задержки */
.will-reveal{ transition-duration: .45s !important; }
.contact-body{ opacity: 1 !important; transform: none !important; }

/* ── Гибрид 15.09.2026: оформление v32, новое наполнение ── */
.nav-cv{ color: var(--brass); opacity: 1; }
.hero-cv{ margin: clamp(1rem, 2.4vw, 1.5rem) 0 0; }
.hero-cv .pdf-btn{ display: inline-block; }
@media print{ .hero-cv, .nav-cv{ display: none !important; } }