/* Сторінка бренду aviz.studio/brand/ — поверх site.css. Лише темна: логотип показано в його справжніх кольорах.
   Креслення — вбудований SVG, тож усі кольори ліній і підписів — тут, класами (CSP не дозволяє вбудованих стилів). */
.bk .top { position: relative; }
.bk-in { padding-top: clamp(2rem, 5vw, 3.5rem); padding-bottom: 6rem; }
.bk-n { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.bk-t { color: var(--muted); max-width: 40rem; }

/* Вступ */
.bk-hero { display: grid; gap: 0.875rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.bk-hero-logo { width: clamp(10rem, 24vw, 15rem); height: auto; margin-bottom: 1.25rem; }
.bk-hero h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); line-height: 1.08; max-width: 22ch; }
.bk-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2rem; }
.bk-hero-row .btn { flex: none; }

/* Розділи */
.bk-sec { padding-top: clamp(3.5rem, 8vw, 5.5rem); display: grid; gap: 0.75rem; }
.bk-sec h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.15; }
.bk-sec > .bk-t { margin-bottom: 1.25rem; }
.bk-note { font-size: 0.875rem; color: var(--dim); }
.bk-grid { display: grid; gap: 0.875rem; }
.bk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Картка з файлами */
.bk-card { margin: 0; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; background: var(--panel); }
.bk-prev { display: grid; place-items: center; min-height: 10rem; padding: 1.5rem; }
.bk-prev img { width: 100%; max-width: 26rem; height: auto; }
.bk-prev-sq img { width: 7.5rem; }
.bk-prev-sq img.bk-sq { border-radius: 50%; }
.bk-card figcaption { display: grid; align-content: start; gap: 0.625rem; padding: 0.875rem 1rem 1rem; border-top: 1px solid var(--line); }
.bk-card figcaption b { font-weight: 600; font-size: 0.9375rem; }
.bk-card figcaption small { color: var(--dim); font-size: 0.8125rem; line-height: 1.45; }
.bk-chips { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.bk-chip { padding: 0.25rem 0.5rem; border: 1px solid var(--line-2); border-radius: 0.375rem; font: 500 0.75rem/1.3 var(--mono); color: var(--text); text-decoration: none; white-space: nowrap; }
.bk-chip:hover { border-color: var(--accent); color: var(--accent); }

/* Тла кольорових пар */
.bk-g-night { background: #000; }
.bk-g-dark { background: #0b0b0c; }
.bk-g-cyan { background: #4fe3e8; }
.bk-g-white { background: #f2f2f2; }


/* Креслення */
.bk-fig { margin: 0.5rem 0 0; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); overflow: hidden; }
.bk-fig-svg { display: block; width: 100%; height: auto; padding: 1rem; }
.bk-fig figcaption { padding: 0.75rem 1rem 1rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--muted); }
.bk-gl { stroke: #1d2a2c; stroke-width: 0.05; }
.bk-clear { fill: none; stroke: #5a5a60; stroke-width: 0.08; stroke-dasharray: 0.4 0.3; }
.bk-letters { fill: #4fe3e8; opacity: 0.88; }
.bk-guide { stroke: #f2f2f2; stroke-width: 0.07; stroke-dasharray: 0.5 0.35; opacity: 0.75; }
.bk-guide-r { fill: none; stroke: #f2f2f2; stroke-width: 0.07; stroke-dasharray: 0.4 0.3; opacity: 0.6; }
.bk-dim { fill: none; stroke: #4fe3e8; stroke-width: 0.08; }
.bk-plate { fill: var(--panel); }
.bk-lab { font: 400 1px/1 var(--mono); fill: #a1a1a8; }
.bk-lab-c { fill: #86f0f3; }
.bk-tile { fill: #0b0b0c; stroke: #2a2a2e; stroke-width: 0.08; }
.bk-tile-a { fill: #f2f2f2; }


/* Колір */
.bk-sws { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.625rem; }
.bk-sw { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.bk-chipcol { height: 5rem; border-radius: var(--r1); border: 1px solid var(--line-2); margin-bottom: 0.375rem; }
.bk-c-000000 { background: #000; }
.bk-c-f2f2f2 { background: #f2f2f2; }
.bk-c-4fe3e8 { background: #4fe3e8; }
.bk-c-001416 { background: #001416; }
.bk-c-8d8d93 { background: #8d8d93; }
.bk-sw b { font-weight: 600; }
.bk-sw code { font: 500 0.8125rem var(--mono); color: var(--muted); }
.bk-sw p { font-size: 0.8125rem; color: var(--muted); }
.bk-sw small { font: 400 0.75rem/1.4 var(--mono); color: var(--dim); }

/* Шрифти */
.bk-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.875rem; }
.bk-type { display: grid; gap: 0.75rem; align-content: start; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r2); background: var(--panel); min-width: 0; }
.bk-type img { width: 9rem; height: auto; margin: 0.5rem 0; }
.bk-type p:last-child { font-size: 0.875rem; color: var(--muted); }
.bk-sample { font: 700 1.5rem/1.15 var(--font); letter-spacing: -0.02em; }
.bk-sample-mono { font: 500 1.375rem/1.2 var(--mono); letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }

/* Можна й не можна */
.bk-do { margin: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r2); overflow: hidden; }
.bk-do .bk-prev { min-height: 7.5rem; }
.bk-do img { width: 4rem; }
.bk-do figcaption { padding: 0.625rem 0.875rem; font-size: 0.8125rem; border-top: 1px solid var(--line); background: var(--panel); }
.bk-do.ok figcaption span { color: var(--phosphor); }
.bk-do.no figcaption span { color: var(--danger); }
.bk-word { display: block; width: 9.5rem; aspect-ratio: 38 / 8; -webkit-mask: url(/site/brand/aviz-wordmark.svg) no-repeat center / contain; mask: url(/site/brand/aviz-wordmark.svg) no-repeat center / contain; }
.bk-w-white .bk-word { background: #f2f2f2; }
.bk-w-ink .bk-word { background: #001416; }
.bk-w-cyan .bk-word { background: #4fe3e8; }
.bk-w-amber .bk-word { background: #ffa21a; }
.bk-x-stretch .bk-word { transform: scaleX(1.35) scaleY(0.8); }
.bk-x-glow .bk-wrap { filter: drop-shadow(0 0 4px #4fe3e8) drop-shadow(0 0 12px #4fe3e8); }
.bk-old { display: inline-flex; align-items: center; gap: 0.5rem; font: 750 1.375rem/1 var(--font); letter-spacing: 0.04em; }
.bk-old::before { content: ''; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #4fe3e8; box-shadow: 0 0 12px #4fe3e8; }

@media (max-width: 64rem) {
  .bk-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-sws { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bk-types { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40rem) {
  .bk-grid-2, .bk-grid-4 { grid-template-columns: minmax(0, 1fr); }
  .bk-sws { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bk-fig-svg { padding: 0.5rem; }
}
.bk-fig-sm { max-width: 36rem; margin: 0 auto; }
/* Креслення в одиницях x (сітка 0.5x, крупні лінії через штрих 3x): товщини й шрифт утричі більші. */
.bk-fig-x .bk-lab { font-size: 3px; }
.bk-fig-x .bk-gl { stroke: #142022; stroke-width: 0.05; }
.bk-fig-x .bk-gl3 { stroke: #23383b; stroke-width: 0.12; }
.bk-fig-x .bk-clear { stroke-width: 0.24; stroke-dasharray: 1.2 0.9; }
.bk-fig-x .bk-guide { stroke-width: 0.21; stroke-dasharray: 1.5 1.05; }
.bk-fig-x .bk-guide-r { stroke-width: 0.21; stroke-dasharray: 1.2 0.9; }
.bk-fig-x .bk-dim { stroke-width: 0.24; }
.bk-fig-x .bk-tile { stroke-width: 0.24; }
.bk-node { fill: #f2f2f2; }