/* Лист альбома: бумага на столе с полем подшивки слева, заглавная графа «NN | Раздел» над рамкой,
   рамка 2px тушью, малый штамп «Раздел · Лист N из M» в правом нижнем углу (N и M считает /js/main.js
   по data-sheet / data-sheet-n / data-total). Любой раздел — лист; вне листов только лента и подвал. */

.sheet {
  --sheet: var(--paper);                 /* бумага листа: калька — .sheet--tracing */

  position: relative;
  max-width: var(--sheet-max);
  margin: 0 auto var(--sheet-gap);
  padding: 10px 10px 10px var(--bind);
  background: var(--sheet);
  box-shadow: var(--shadow-sheet);
}
/* калька — только целым листом */
.sheet--tracing { --sheet: var(--tracing); }

/* первый лист занимает экран; на странице, где он ниже экрана, --hero-min: 0 */
.sheet--hero {
  --hero-min: clamp(600px, calc(100vh - 74px), 880px);
  min-height: var(--hero-min);
  display: flex; flex-direction: column;
}
.sheet--hero > .frame { flex: 1; }

/* ---------- Заглавная графа ---------- */

.band {
  display: flex; align-items: center; gap: 16px;
  margin: 0 0 8px; padding: 4px 16px;
  background: var(--ink); color: var(--paper);
  font-size: var(--fs-small);
}
.band__n {
  padding-right: 16px;
  border-right: 1px solid rgb(251 252 253 / .35);
  font: 400 var(--fs-figure)/1 var(--mono); letter-spacing: -.02em;
}

/* ---------- Рамка ---------- */

/* поля рамки жидкие: при 1440 — 44 / 40 / 84 (снизу место под малый штамп) */
.frame {
  --frame-t: calc(var(--pad) + 4px);
  --frame-x: var(--pad);
  --frame-b: calc(2 * var(--pad) + 4px);

  position: relative;
  padding: var(--frame-t) var(--frame-x) var(--frame-b);
  border: var(--frame) solid var(--ink);
}

/* заголовок листа — Headline */
:where(.sheet) h2 { font-size: var(--fs-headline); line-height: 1.04; }

/* ---------- Малый штамп ---------- */

/* тихая основная надпись: первая графа (раздел) — тушью, «Лист N из M» — графитом */
.mini-stamp {
  --mini-fs: var(--fs-caption);
  --mini-first: 170px;

  position: absolute; right: 0; bottom: 0;
  display: flex; margin: 0;
  border: solid var(--ink); border-width: 1.5px 0 0 1.5px;
  background: var(--sheet, var(--paper));
  font-size: var(--mini-fs); line-height: 1.4; color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.mini-stamp > * { padding: 7px 16px; font-weight: 400; }
.mini-stamp > :first-child { min-width: var(--mini-first); color: var(--ink); }
.mini-stamp > * + * { border-left: 1px solid var(--hair); }

/* ---------- Узкие экраны ---------- */

@media (max-width: 1179px) {
  .sheet { margin-left: var(--edge); margin-right: var(--edge); }
  /* первый лист больше не занимает экран: высота — по содержимому */
  .sheet--hero { --hero-min: 0; }
}
@media (max-width: 719px) {
  .sheet { padding: 6px 6px 6px var(--bind); margin-bottom: 16px; }
  .band { gap: 12px; padding: 4px 12px; }
  .band__n { padding-right: 12px; }
  /* малый штамп (~32px) не ложится на последнюю строку */
  .frame { --frame-b: 64px; }
  .mini-stamp { --mini-first: 0; }
  .mini-stamp > * { padding: 6px 12px; }
}