/* =====================================================================
   Брендбук: страницы A4 альбомной ориентации (экран и печать в PDF)
   ===================================================================== */
@page { size: 297mm 210mm; margin: 0; }

body.bb { background: #8f8a83; font-size: 11pt; line-height: 1.5; }
.bb .page {
  width: 297mm; height: 210mm; margin: 10mm auto; position: relative; overflow: hidden;
  background: var(--linen); padding: 15mm 18mm 14mm; display: flex; flex-direction: column;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .25);
  page-break-after: always; break-after: page;
}
@media print {
  body.bb { background: none; }
  .bb .page { margin: 0; box-shadow: none; }
}
.bb h1 { font-size: 46pt; }
.bb h2 { font-size: 27pt; margin-bottom: 7mm; }
.bb .bb-eyebrow { font: 700 8.5pt/1.2 var(--caps); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 3mm; }
.bb .bb-eyebrow.light { color: var(--blush); }
.bb .bb-lead { font-size: 13.5pt; line-height: 1.45; max-width: 200mm; }
.bb .bb-big { font: 400 italic 15pt/1.45 var(--serif); }
.bb .muted-bb { color: var(--muted); font-size: 9pt; }
.bb p { margin: 0 0 3mm; }
.bb .pnum { position: absolute; right: 18mm; bottom: 9mm; font: 700 8pt var(--caps); letter-spacing: .1em; color: var(--muted); }
.bb .pnum.light { color: var(--blush); }

/* «вышитые» надписи в брендбуке — сразу целиком */
.bb .stitched .st { opacity: 1; transform: none; transition: none; }
.bb [data-reveal] { opacity: 1; transform: none; }

.bb .split { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; align-items: center; flex: 1; min-height: 0; }
.bb .split-6040 { grid-template-columns: 1.4fr 1fr; align-items: stretch; }
.bb .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9mm; }
.bb .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12mm; align-items: start; }
.bb .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; flex: 1; min-height: 0; }
.bb .grid3-tight { grid-template-rows: 1fr 1fr; gap: 5mm; }
.bb .small p { font-size: 9.5pt; }
.bb .center { display: flex; justify-content: center; align-items: center; }
.bb .fit { max-width: 100%; max-height: 135mm; object-fit: contain; border-radius: 4mm; }
.bb .rules p { font-size: 11pt; }
.bb .rules.light { color: var(--linen); }

/* обложки */
.bb .p-cover { background: var(--red); color: var(--linen); padding: 0; }
.bb .cover-band .band { height: 13mm; }
.bb .cover-mark { position: absolute; right: 22mm; top: 34mm; width: 105mm; }
.bb .cover-mark img { width: 100%; height: auto; display: block; }
.bb .cover-text { position: absolute; left: 20mm; bottom: 26mm; max-width: 140mm; }
.bb .cover-sub { font-size: 12pt; color: var(--blush); }
.bb .p-red { background: var(--red); color: var(--linen); }
.bb .p-ink { background: var(--ink); color: var(--linen); padding: 0; }
.bb .back { margin: auto; text-align: center; max-width: 170mm; }
.bb .back img { width: 130mm; display: block; margin: 0 auto 10mm; }
.bb .back p { font-size: 9.5pt; color: var(--blush); }
.bb .back-band .band { height: 13mm; }

/* содержание */
.bb .toc { columns: 2; column-gap: 16mm; margin: 0; padding: 0; list-style: none; counter-reset: t; }
.bb .toc li { display: flex; justify-content: space-between; gap: 6mm; border-bottom: 0.3mm solid var(--linen-3); padding: 2.6mm 0; break-inside: avoid; font-size: 12pt; counter-increment: t; }
.bb .toc li::before { content: counter(t, decimal-leading-zero); font: 700 9pt var(--caps); color: var(--red); margin-right: 4mm; padding-top: 1mm; }
.bb .toc li span { flex: 1; }
.bb .toc li i { font-style: normal; color: var(--muted); }

/* история */
.bb .tl .stitched { height: 17mm; width: auto; color: var(--red); margin-bottom: 5mm; }
.bb .tl p { font-size: 10.5pt; }
.bb .p-red .idea-big .stitched { height: 120mm; width: auto; color: var(--linen); }
.bb .idea-big { display: flex; justify-content: center; }

/* смыслы */
.bb .anatomy-mark { max-height: 140mm; width: auto; }
.bb .anatomy-mark .an-part { opacity: 1; }
.bb .meanings { display: grid; gap: 6mm; }
.bb .meanings b { display: flex; align-items: center; gap: 3mm; font: 700 13pt var(--serif); margin-bottom: 1.5mm; }
.bb .meanings p { font-size: 10.5pt; margin: 0; }

/* размеры */
.bb .minsizes { display: grid; gap: 5mm; margin-top: 6mm; }
.bb .minsizes div { display: flex; align-items: center; gap: 6mm; font-size: 10pt; }
.bb .minsizes img { width: auto; }

/* плитки */
.bb .tile { border-radius: 4mm; padding: 9mm; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6mm; min-height: 0; }
.bb .tile img { max-width: 100%; max-height: 100%; width: 100%; height: auto; min-height: 0; }
.bb .tile img.v { width: 62%; }
.bb .tile img.sq { width: 42%; }
.bb .tile img.wide { width: 100%; }
.bb .tile span { font-size: 9.5pt; color: var(--muted); text-align: center; }
.bb .tile span.l { color: var(--blush); }
.bb .tile-white { background: #fff; }
.bb .tile-photo { background: linear-gradient(135deg, rgba(30, 34, 53, .55), rgba(179, 35, 43, .35)), radial-gradient(circle at 20% 30%, #8a7b66, #3d3a40 70%); }
.bb .p-red img.wide { width: 100%; }

/* нельзя */
.bb .donts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm 8mm; flex: 1; }
.bb .dont { display: flex; flex-direction: column; gap: 3mm; }
.bb .dbox { position: relative; flex: 1; background: #fff; border-radius: 3mm; display: flex; align-items: center; justify-content: center; gap: 3mm; padding: 6mm; overflow: hidden; }
.bb .dbox img { width: 80%; }
.bb .dbox::after { content: ''; position: absolute; right: 4mm; top: 4mm; width: 7mm; height: 7mm; border-radius: 50%; background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 3l4 4M7 3l-4 4' stroke='%23F3ECDF' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center/70% no-repeat; }
.bb .dbox-busy { background: url(../patterns/diamonds-red-on-ink.svg) center/40px; }
.bb .dbox-busy img { width: 80%; }
.bb .dbox .fake { font: 700 italic 15pt Arial, sans-serif; color: #2b4fa0; }
.bb .dbox img[style*="height:60%"] { width: auto; }
.bb .dont > span { font-size: 10pt; }

/* цвета */
.bb .bb-swatches { margin: 0 0 5mm; grid-template-columns: repeat(7, 1fr); gap: 3mm; }
.bb .bb-swatches .swatch-chip { height: 30mm; }
.bb .bb-swatches .swatch-main .swatch-chip { height: 42mm; }
.bb .bb-swatches .swatch-body { padding: 3mm; font-size: 7.5pt; }
.bb .bb-swatches .swatch-body b { font-size: 11pt; }
.bb .bb-swatches .swatch-body p { font-size: 7.5pt; }
.bb .bb-swatches .swatch-body code { font-size: 8.5pt; }

/* контраст */
.bb .contrast { width: 100%; border-collapse: collapse; font-size: 10pt; }
.bb .contrast th { text-align: left; font: 700 8pt var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 0.4mm solid var(--ink); padding: 2mm 3mm; }
.bb .contrast td { border-bottom: 0.3mm solid var(--linen-3); padding: 2.4mm 3mm; vertical-align: middle; }
.bb .contrast td i { display: inline-flex; align-items: center; justify-content: center; width: 12mm; height: 8mm; border-radius: 1.5mm; font: 700 11pt var(--serif); font-style: normal; margin-right: 4mm; vertical-align: middle; box-shadow: inset 0 0 0 0.2mm rgba(0, 0, 0, .1); }

/* шрифты */
.bb .type-demo { background: #fff; border-radius: 4mm; padding: 10mm; }
.bb .type-demo .t1 { font: 700 24pt/1.1 var(--serif); margin-bottom: 4mm; }
.bb .type-demo .t2 { font: 700 13pt/1.3 var(--serif); color: var(--red); margin-bottom: 4mm; }
.bb .type-demo .t3 { font: 400 11pt/1.5 var(--sans); margin-bottom: 5mm; }
.bb .type-demo .t4 { font: 700 8.5pt var(--caps); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }

/* алфавит и орнамент */
.bb .bb-specimen { margin: 0 0 7mm; padding: 9mm; gap: 4mm; }
.bb .bb-specimen .stitched { height: 13mm; }
.bb .bb-bands { margin: 0 0 7mm; }
.bb .bb-bands .band { height: 16mm; }
.bb .bb-bands .band-stroke { height: 9mm; }
.bb .bb-bands .band-diamonds { height: 19mm; }
.bb .bb-bands .band-marks { height: 22mm; }

/* 14 библиотек */
.bb .bb-branches { grid-template-columns: repeat(3, 1fr); gap: 3mm; margin: 0; }
.bb .bb-branches .branch { padding: 4mm 5mm; border-radius: 2.5mm; }
.bb .bb-branches .branch-svg { height: 11mm; }

/* носители */
.bb .mk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7mm; flex: 1; min-height: 0; }
.bb .mk-row3 { grid-template-columns: repeat(3, 1fr); }
.bb .mk { grid-column: auto; }
.bb .mk-stage { min-height: 0; border-radius: 4mm; }
.bb .mk figcaption { font-size: 9pt; }
.bb .mk-cert .mk-stage { min-height: 0; }

/* цифровая среда */
.bb .digital { display: grid; grid-template-columns: 1.5fr 0.8fr 1fr; gap: 10mm; align-items: center; flex: 1; }
.bb .digital .device-tab { width: 100%; }
.bb .digital .phone { width: 100%; max-width: 62mm; justify-self: center; }
.bb .icons { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 5mm; }
.bb .icons p { font-size: 9.5pt; flex-basis: 100%; }

/* файлы */
.bb .files { width: 100%; border-collapse: collapse; font-size: 11pt; }
.bb .files td { border-bottom: 0.3mm solid var(--linen-3); padding: 2.6mm 2mm; }
.bb .files td:first-child { font: 700 10pt var(--caps); color: var(--red); width: 38mm; }
.bb .page:last-of-type { page-break-after: auto; break-after: auto; }

/* визуализации */
.bb .bb-photos { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "a b c" "a d e"; gap: 3.5mm; margin-bottom: 4mm; }
.bb .bb-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 3mm; min-height: 0; }
.bb .bb-photos .p1 { grid-area: a; object-position: 40% 50%; }
.bb .bb-photos .p2 { grid-area: b; object-position: 62% 45%; }
.bb .bb-photos .p3 { grid-area: c; object-position: 85% 40%; }
.bb .bb-photos .p4 { grid-area: d; object-position: 55% 65%; }
.bb .bb-photos .p5 { grid-area: e; object-position: 60% 50%; }
.bb .back .author { color: var(--linen); margin-top: 4mm; }