/* Контентные страницы. Палитра, шрифты и лента-разделитель — те же, что на главной:
   это продолжение сайта, а не отдельный раздел. Цвета голосов означают инструменты
   и нигде не используются как украшение. */
:root {
  --paper: #fdfcf9; --ink: #171a1f; --dim: #6a6f78; --line: #e3e1da;
  --bd: #2757c9; --sd: #c92742; --hh: #2596b0; --tt: #c96f27; --cy: #b8921f;
  --bd-soft: rgba(39,87,201,0.07);
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.62;
       font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
       -webkit-text-size-adjust: 100%; }
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
/* Колонка чтения уже полосы страницы: длинная строка утомляет, а таблицы и картинки
   при этом могут выходить за неё. */
article { max-width: 68ch; }
/* Шапка шире колонки чтения: такт нотации должен дышать. */
.hero { max-width: 900px; }
.hero .caption { max-width: 60ch; font-size: 15px; margin-top: 0; }
.hero h2:first-of-type { margin-top: 0; }

a { color: var(--bd); }
a:focus-visible, .button:focus-visible { outline: 2px solid var(--bd); outline-offset: 3px; }

nav { display: flex; align-items: baseline; gap: 12px; padding: 22px 0 8px; flex-wrap: wrap; }
.logo { font-family: Georgia, serif; font-weight: 700; font-size: 21px; letter-spacing: -0.3px;
        color: var(--ink); text-decoration: none; }
.logo i { font-style: normal; color: var(--bd); }
.crumbs { font-size: 13px; color: var(--dim); }
.crumbs a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line); }

.eyebrow { font-family: Consolas, "SF Mono", monospace; font-size: 12px; letter-spacing: 1.6px;
           text-transform: uppercase; color: var(--dim); margin: 40px 0 0; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 44px;
     line-height: 1.08; letter-spacing: -1.1px; margin: 10px 0 16px; max-width: 18ch; }
h1 em { font-style: italic; color: var(--bd); }
.lede { font-size: 18.5px; color: var(--dim); margin: 0 0 30px; max-width: 58ch; }

h2 { font-family: Georgia, serif; font-weight: 400; font-size: 27px; letter-spacing: -0.6px;
     margin: 46px 0 12px; }
h3 { font-size: 16.5px; font-weight: 600; margin: 28px 0 4px; }
p, li { font-size: 16px; color: var(--dim); }
li { margin-bottom: 8px; }
strong, b { color: var(--ink); font-weight: 600; }

/* Лента: цвета голосов в порядке кита, как на главной. Разделяет разделы вместо линейки. */
.ribbon { display: flex; gap: 3px; margin: 46px 0 0; }
.ribbon i { height: 9px; flex: 1; border-radius: 2px; opacity: 0.5; }

/* Ключ инструментов. Цвет — единственная связка между этим списком и нотами в SVG. */
.voices { list-style: none; padding: 0; margin: 20px 0; }
.voices li { display: flex; gap: 13px; align-items: baseline; padding: 9px 0;
             border-bottom: 1px solid var(--line); margin: 0; }
.voices .dot { width: 11px; height: 9px; border-radius: 50%; flex: none; transform: rotate(-18deg); }

/* Такт нотации — тезис страницы, поэтому он выходит за колонку текста и рисуется крупно. */
.stave { display: block; width: 100%; max-width: 860px; height: auto; margin: 6px 0 30px;
         color: var(--ink); }
/* Толщины и позиции — те же, что в рендере плеера (PlayerTemplate.html): иллюстрация
   должна выглядеть ровно как то, что человек увидит в разборе. */
.stave .staff { stroke: var(--ink); stroke-width: 1; opacity: 0.5; }
.stave .stem { stroke-width: 1.4; }
.stave .beam { stroke-width: 3.2; stroke-linecap: butt; }
.stave .xhead { stroke-width: 1.8; }
.stave .bar { stroke: var(--ink); stroke-width: 1.4; opacity: 0.8; }
.v-bd { color: var(--bd); } .v-sd { color: var(--sd); } .v-hh { color: var(--hh); }
.v-tt { color: var(--tt); } .v-cy { color: var(--cy); }
.stave .v-bd, .stave .v-sd, .stave .v-hh { stroke: currentColor; fill: currentColor; }
.stave .lane text { fill: currentColor; }

/* Клеточная сетка: пустые ячейки узором, удары — цветом своего голоса. */
.gridfig .cell-empty { fill: var(--line); }
.gridfig .c-bd { fill: var(--bd); } .gridfig .c-sd { fill: var(--sd); }
.gridfig .c-hh { fill: var(--hh); } .gridfig .c-cy { fill: var(--cy); }

figure { margin: 28px 0; }
figure img { width: 100%; display: block; border: 1px solid var(--line); border-radius: 6px; }
figcaption { font-size: 14px; color: var(--dim); margin-top: 9px; max-width: 62ch; }
/* Скриншоты партитуры читаются шире колонки текста и выходят за неё вправо. */
.bleed { width: min(900px, calc(100vw - 48px)); max-width: none; }

/* Врезка для честных оговорок — их нужно прочесть, а не пролистать.
   Знак репризы слева цитирует зону загрузки на главной. */
.caveat { position: relative; background: var(--bd-soft); padding: 16px 20px 16px 26px;
          margin: 30px 0; border-radius: 0 6px 6px 0; }
.caveat::before { content: ""; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 7px;
                  border-left: 3.5px solid var(--bd); border-right: 1.5px solid var(--bd); }
.caveat p { margin: 0; }
.caveat p + p { margin-top: 10px; }

table { border-collapse: collapse; width: 100%; margin: 18px 0; font-size: 15px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line);
         color: var(--dim); vertical-align: top; }
th { color: var(--ink); font-weight: 600; font-size: 14px; }
tbody th { font-weight: 600; }
.scroll { overflow-x: auto; margin: 18px 0; }
.scroll table { min-width: 640px; margin: 0; }

.cta { border-top: 1px solid var(--line); margin-top: 52px; padding-top: 28px; max-width: 68ch; }
.cta p { margin: 0 0 16px; }
.button { display: inline-block; background: var(--bd); color: #fff; text-decoration: none;
          padding: 12px 24px; border-radius: 8px; font-size: 15.5px; font-weight: 600; }
.button:hover { filter: brightness(1.08); }
.cta .aside { font-size: 14.5px; margin: 14px 0 0; }

footer { margin-top: 60px; padding: 20px 0 40px; border-top: 1px solid var(--line);
         color: var(--dim); font-size: 13px; display: flex; gap: 26px; flex-wrap: wrap; }
footer a { color: inherit; }

@media (max-width: 760px) {
  h1 { font-size: 33px; letter-spacing: -0.7px; }
  .lede { font-size: 17px; }
  h2 { font-size: 24px; margin-top: 38px; }
  p, li { font-size: 16.5px; }
  .scroll { margin-left: -24px; margin-right: -24px; padding: 0 24px; }
}