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

html{scroll-behavior:smooth;color-scheme:light}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--text-body);
  font-weight:400;
  line-height:var(--leading-body);
  -webkit-font-smoothing:auto;
  text-rendering:optimizeLegibility;
}

::selection{background:var(--vanilla)}

a{color:inherit;text-decoration:none}

img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

button,
input,
textarea,
select{font:inherit}

h1,h2,h3,h4,h5,h6,p{margin-top:0}

/* Heading leading must never inherit the body paragraph rhythm.
   .display selects the typeface; the semantic level selects leading. */
h1{--heading-leading:var(--leading-display)}
h2{--heading-leading:var(--leading-section)}
h3{--heading-leading:var(--leading-card)}
h4,h5,h6{--heading-leading:var(--leading-subheading)}
h1,h2,h3,h4,h5,h6{
  line-height:var(--heading-leading);
  text-wrap:balance;
  overflow-wrap:break-word;
  hyphens:manual;
}

/* DS STANDARD — «если заголовок, то заголовок».
   Семантический уровень всегда разрешается в роль типографической шкалы,
   даже если у блока нет собственного правила. Компоненты и страницы вправе
   переопределить размер (их селекторы классов специфичнее), но заголовок
   не должен падать на браузерный default (1.17em) и оказываться мельче
   основного текста рядом. Именно так «Что это даёт ребёнку» (method.html)
   и заголовки внутри .ds-two (ds.html) проваливались до 19.89 px при body 17 px.
   Utility-лейблы (eyebrow, подписи колонок футера) заголовками не размечаются:
   для них есть .eyebrow/span, а .footer h3 и .ds-section>h3 явно
   переопределены как исключения. */
h1{font-size:var(--type-display-page)}
h2{font-size:var(--type-display-section)}
h3{font-size:var(--type-display-card)}

.display{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.025em;
  line-height:var(--heading-leading,var(--leading-display));
}

.muted{color:var(--muted)}

.container{
  width:min(calc(100% - (var(--gutter) * 2)),var(--container));
  margin-inline:auto;
}