/* dimaraspopov.com — один кегль на весь сайт: 18/21.6, трекинг −0.5px.
   Иерархия только цветом и воздухом: один вес, один размер, ни одной линейки.
   Все отступы — из шкалы --space-*; случайных чисел в файле нет. */

*{margin:0;padding:0;box-sizing:border-box}
h1,h2,h3,h4{font-size:inherit;font-weight:inherit;letter-spacing:inherit}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

@font-face{
  font-family:'Untitled Sans';
  font-weight:400;font-style:normal;font-display:swap;
  src:url(/fonts/untitled-sans-regular.woff2) format('woff2');
}
@font-face{
  font-family:'Untitled Sans';
  font-weight:500;font-style:normal;font-display:swap;
  src:url(/fonts/untitled-sans-medium.woff2)format('woff2');
}

:root{
  --ink:#131313;
  --ink-hover:#8a8a8a;
  --stroke:2px;      /* подчёркивание — в вес основного штриха */

  /* шкала отступов — пять значений на весь сайт */
  --space-1:12px;    /* изображение → подпись, строки списков */
  --space-2:24px;    /* колонки, заголовок → блок, абзац → абзац */
  --space-3:64px;    /* ряды работ */
  --space-4:80px;    /* между секциями, поля по бокам */
  --space-5:160px;   /* до шапки и до колофона */

  --pad-x:var(--space-4);
  --pad-y:64px;      /* единственная величина вне шкалы */
  --measure:48ch;    /* мера строки в текстовых блоках */
}

body{
  background:#fff;color:var(--ink);
  font-family:'Untitled Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:400;font-feature-settings:"ss01";
  font-size:18px;line-height:1.2;letter-spacing:-0.3px;
  padding:var(--pad-y) var(--pad-x);max-width:1440px;margin:0 auto;
}

/* подчёркивание: ссылки и подпись свёрнутого раздела — одно правило */
a,
.earlier>summary h2{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:var(--stroke);
  text-underline-offset:.18em;
  text-decoration-skip-ink:none;   /* линия идёт сквозь выносные */
}
a:hover,
.earlier>summary:hover h2{color:var(--ink-hover)}
.scatter:hover{color:var(--ink)}   /* имя не сереет — буквы просто разлетаются */

/* шапка */
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.masthead a{text-decoration:none}
.masthead .name{font-size:inherit;font-weight:inherit;letter-spacing:inherit;margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.masthead nav{display:flex;gap:var(--space-2)}
.masthead nav a[aria-current]{text-decoration:underline;text-decoration-thickness:var(--stroke)}

/* секции: отбивка воздухом вместо линеек */
.section{margin-top:var(--space-4)}
.masthead+.section{margin-top:var(--space-5)}
.section-title{margin-bottom:var(--space-2)}
.info .section-title{font-weight:500}
.em{font-weight:500}

/* врез на главной: название серии и пояснение — один абзац, h1 остаётся в разметке */
.lede{max-width:var(--measure)}
.lede .section-title{display:inline;margin:0}

/* проза */
.prose{max-width:var(--measure)}
.prose p+p{margin-top:var(--space-2)}

/* контакты: метка | значение */
.meta{display:grid;grid-template-columns:4.5em 1fr;column-gap:var(--space-2);row-gap:var(--space-1);max-width:var(--measure)}

/* CV: год | запись */
.rows{display:grid;grid-template-columns:4.5em 1fr;column-gap:var(--space-2);row-gap:var(--space-1);max-width:var(--measure);margin:0}
.rows dt{font-weight:inherit;font-variant-numeric:tabular-nums}
.rows dd{margin:0}

/* работы: общая сетка, число колонок задаёт каждый раздел сам */
.works{margin-top:var(--space-2);display:grid;column-gap:var(--space-2);row-gap:var(--space-3)}
/* 420px — порог, на котором ряд разваливается с двух работ на одну */
.works.series{grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr))}
figure{margin:0;align-self:start}
figure img{display:block;width:100%;height:auto}
figcaption{margin-top:var(--space-1)}

.portrait{max-width:var(--measure)}

/* earlier works — свёрнуто; раскрытие без js, знак вместо треугольника */
.earlier>summary{display:block;cursor:pointer;list-style:none}
.earlier>summary::-webkit-details-marker{display:none}
.earlier>summary h2{margin:0;display:inline}
.earlier>summary::before{content:'+ '}
.earlier[open]>summary::before{content:'− '}
.earlier .works{grid-template-columns:repeat(6,1fr)}

/* колофон — отделён только воздухом */
.colophon{
  margin-top:var(--space-5);
  display:flex;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap;
}

@media(max-width:1023px){
  .earlier .works{grid-template-columns:repeat(4,1fr)}
}

@media(max-width:639px){
  :root{--pad-x:var(--space-2);--pad-y:var(--space-2)}
  .meta{grid-template-columns:1fr;row-gap:0}
  .meta dt{padding-top:var(--space-1)}
  .rows{grid-template-columns:3.6em 1fr}
  .earlier .works{grid-template-columns:repeat(2,1fr)}
  .colophon{flex-direction:column;gap:var(--space-1)}
}

/* странность: буквы имени разлетаются по экрану на ховере (только десктоп) */
html{overflow-x:hidden;overflow-x:clip}
.scatter span{display:inline-block;transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.scatter span:nth-child(2){transition-delay:0.05s}
.scatter span:nth-child(3){transition-delay:0.02s}
.scatter span:nth-child(4){transition-delay:0.08s}
.scatter span:nth-child(5){transition-delay:0.03s}
.scatter span:nth-child(6){transition-delay:0.1s}
.scatter span:nth-child(7){transition-delay:0.01s}
.scatter span:nth-child(8){transition-delay:0.12s}
.scatter span:nth-child(9){transition-delay:0.06s}
.scatter span:nth-child(10){transition-delay:0.04s}
.scatter span:nth-child(11){transition-delay:0.09s}
.scatter span:nth-child(12){transition-delay:0.07s}
@media(min-width:640px) and (hover:hover) and (prefers-reduced-motion:no-preference){
.scatter:hover span:nth-child(1){transform:translate(-18vw,28vh) rotate(-74deg)}
.scatter:hover span:nth-child(2){transform:translate(26vw,55vh) rotate(112deg)}
.scatter:hover span:nth-child(3){transform:translate(9vw,-14vh) rotate(48deg)}
.scatter:hover span:nth-child(4){transform:translate(38vw,20vh) rotate(-32deg)}
.scatter:hover span:nth-child(5){transform:translate(-6vw,62vh) rotate(87deg)}
.scatter:hover span:nth-child(6){transform:translate(44vw,38vh) rotate(154deg)}
.scatter:hover span:nth-child(7){transform:translate(17vw,8vh) rotate(-120deg)}
.scatter:hover span:nth-child(8){transform:translate(55vw,-10vh) rotate(64deg)}
.scatter:hover span:nth-child(9){transform:translate(30vw,70vh) rotate(-95deg)}
.scatter:hover span:nth-child(10){transform:translate(62vw,30vh) rotate(139deg)}
.scatter:hover span:nth-child(11){transform:translate(48vw,58vh) rotate(-58deg)}
.scatter:hover span:nth-child(12){transform:translate(70vw,12vh) rotate(76deg)}
}