/* roteapp.click — одна таблица стилей на четыре страницы.
   Единицы: px для рамок и ритма, ch для меры строки.
   Тема: color-scheme + light-dark(), без медиазапроса prefers-color-scheme.
   Первое объявление каждой переменной — запасное для старых браузеров. */

:root {
  color-scheme: light dark;
  --paper: #f4f6f1;
  --paper: light-dark(#f4f6f1, #111410);
  --shelf: #e8ece1;
  --shelf: light-dark(#e8ece1, #191d17);
  --letter: #1d2118;
  --letter: light-dark(#1d2118, #e4e8da);
  --faded: #5f6656;
  --faded: light-dark(#5f6656, #98a189);
  --hair: #d5dac9;
  --hair: light-dark(#d5dac9, #282d21);
  --moss: #2d6a4c;
  --moss: light-dark(#2d6a4c, #84c8a0);
  --stencil: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--letter);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
  font-size: 16.5px;
  line-height: 1.58;
  text-rendering: optimizeLegibility;
}

.sheet {
  display: grid;
  grid-template-columns: 196px minmax(0, 68ch);
  gap: 56px;
  max-width: 1024px;
  margin: 0 auto;
  padding: 64px 28px 96px;
}

.rail { align-self: start; padding-top: 3px }

.brand {
  margin: 0 0 5px;
  font-size: 27px;
  font-weight: 620;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--moss);
}
.brand a { color: inherit; text-decoration: none }

.tagline {
  margin: 0 0 30px;
  font-family: var(--stencil);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faded);
}

.rail nav {
  display: grid;
  gap: 9px;
  font-family: var(--stencil);
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.rail nav a {
  padding-left: 11px;
  border-left: 2px solid transparent;
  color: var(--faded);
  text-decoration: none;
}
.rail nav a:hover { color: var(--letter); border-left-color: var(--moss) }
.rail nav a[aria-current] { color: var(--letter); border-left-color: var(--moss) }

h1 { margin: 0 0 15px; font-size: 34px; font-weight: 620; line-height: 1.18 }

h2 {
  margin: 46px 0 12px;
  font-family: var(--stencil);
  font-size: 12.5px;
  font-weight: 620;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--moss);
}

h3 { margin: 26px 0 8px; font-size: 18.5px; font-weight: 620 }

p { margin: 0 0 15px }
a { color: var(--moss) }
strong { font-weight: 620 }

.stamp {
  margin: 0 0 32px;
  font-family: var(--stencil);
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--faded);
}

.note {
  margin: 26px 0;
  padding: 18px 22px;
  background: var(--shelf);
  border-left: 3px solid var(--moss);
  border-radius: 0 5px 5px 0;
}
.note > :last-child { margin-bottom: 0 }

ul, ol { margin: 0 0 15px; padding-left: 23px }
li { margin: 0 0 6.5px }

.plain { list-style: none; padding-left: 0 }
.plain li { margin: 0; padding: 11px 0; border-bottom: 1px solid var(--hair) }
.plain li:first-child { border-top: 1px solid var(--hair) }

.scroll { overflow-x: auto; margin: 22px 0 }

table { border-collapse: collapse; min-width: 520px; font-size: 14.5px }
th {
  padding: 9px 20px 9px 0;
  border-bottom: 2px solid var(--hair);
  font-family: var(--stencil);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--faded);
}
td { padding: 11px 20px 11px 0; border-bottom: 1px solid var(--hair); vertical-align: top }

.attic {
  grid-column: 1 / -1;
  margin-top: 84px;
  padding-top: 24px;
  border-top: 1px solid var(--hair);
  font-size: 13px;
  color: var(--faded);
}
.attic p { margin: 0 0 9px }
.attic a { color: var(--faded) }

@media (max-width: 860px) {
  .sheet { grid-template-columns: minmax(0, 1fr); gap: 34px; padding: 42px 22px 72px }
  .rail nav { grid-auto-flow: column; justify-content: start; gap: 20px }
  .brand { font-size: 24px }
  .tagline { margin-bottom: 20px }
  h1 { font-size: 29px }
  .attic { margin-top: 58px }
}