/*
 * Страницы разделов (Ганон, гаммы, арпеджио) — обычные статические страницы,
 * которые видно без JavaScript. Опираются на палитру лендинга (landing.css):
 * здесь только то, чего там нет, — типографика статьи, таблица аппликатуры,
 * нотный стан и печать.
 */

.pg { padding: 28px 0 56px; }

.pg-crumbs {
  font-family: var(--lp-mono);
  font-size: 12.5px;
  color: var(--lp-dim);
  margin-bottom: 18px;
}
.pg-crumbs a { color: var(--lp-muted); }
.landing .pg-crumbs a { text-decoration: underline; }

.pg-h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.pg-lead {
  margin: 0 0 26px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--lp-muted);
  max-width: 46em;
}

.pg-block { margin: 0 0 32px; max-width: 52em; }
.pg-block h2 {
  margin: 0 0 12px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.pg-block p { margin: 0 0 12px; line-height: 1.6; }
.pg-note { color: var(--lp-muted); font-size: 14.5px; }

.pg-list { margin: 0; padding-left: 1.1em; line-height: 1.7; }
.pg-list b { font-weight: 600; }

/* Нотный стан приезжает готовым SVG из тренажёра: на странице он статичен,
   поэтому просто вписываем его в ширину и даём светлую «бумагу». */
.pg-staff {
  background: var(--staff-bg, #f4f1ea);
  border: 1px solid var(--lp-line-soft);
  border-radius: 10px;
  padding: 12px;
  overflow-x: auto;
  margin-bottom: 12px;
}
/* SVG приезжает из тренажёра без width/height — только с viewBox и
   aspect-ratio (он рисовался в контейнере нулевой ширины). Без явной
   ширины браузер даёт ему 0 и блок схлопывается. */
.pg-staff svg { width: 100%; height: auto; display: block; }

.pg-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 15px;
}
.pg-table caption {
  text-align: left;
  color: var(--lp-muted);
  font-size: 13.5px;
  padding-bottom: 8px;
}
.pg-table th, .pg-table td {
  border: 1px solid var(--lp-line-soft);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.pg-table th { font-weight: 600; background: var(--lp-panel); }
.pg-table--list td:first-child { white-space: nowrap; }
.landing .pg-table a { color: var(--lp-accent); text-decoration: underline; }

/* Пальцы — моноширинно и крупно: это то, ради чего страницу и открывают. */
.pg-fingers {
  font-family: var(--lp-mono);
  font-size: 17px;
  letter-spacing: 0.22em;
}

.pg-cta { margin: 22px 0 0; }

.pg-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 32px 0 18px;
  padding-top: 18px;
  border-top: 1px solid var(--lp-line);
}
.landing .pg-nav__link { color: var(--lp-accent); text-decoration: underline; }

.pg-source {
  color: var(--lp-dim);
  font-size: 13px;
  margin-top: 8px;
}

/*
 * Печать. Отдельного PDF не делаем: аппликатуру удобнее отправить на принтер
 * прямо из браузера, а PDF-генератор пришлось бы тащить зависимостью.
 * На бумаге оставляем главное — ноты и таблицу пальцев.
 */
@media print {
  .lp-top, .lp-foot, .pg-nav, .pg-cta, .pg-crumbs { display: none !important; }
  body.landing { background: #fff; color: #000; }
  .pg { padding: 0; }
  .pg-h1 { font-size: 22pt; }
  .pg-lead { font-size: 12pt; color: #333; }
  .pg-block { page-break-inside: avoid; max-width: none; }
  .pg-staff { border: none; padding: 0; background: #fff; }
  .pg-table th { background: #f2f2f2; }
  .pg-table, .pg-table th, .pg-table td { border-color: #999; }
  .pg-fingers { font-size: 14pt; }
  a[href]::after { content: ''; }
}