/* ============================================================
   Company Dossier — brand kit page (scoped, .bk-* prefix)
   New file. styles.css is owned elsewhere; this only adds.
   Uses the shared design tokens (--ink, --paper-*, --smudge,
   --flag, --faint, --f-* fonts).
   ============================================================ */

/* ---------- logo display ---------- */
.bk-logo-row{display:grid;grid-template-columns:1fr 1.6fr;gap:22px;margin-top:8px}
.bk-logo-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:40px 24px;min-height:200px;position:relative}
.bk-logo-cell .ic{width:96px;height:96px;color:var(--ink)}
.bk-lockup .bk-lockup-svg{width:100%;max-width:360px;height:auto;color:var(--ink)}
.bk-cap{font-family:var(--f-type);text-transform:uppercase;letter-spacing:.16em;font-size:.7rem;color:var(--smudge)}

.bk-note{font-family:var(--f-type);font-size:.88rem;color:var(--smudge);margin:22px 0 0;line-height:1.65}
.bk-note b{color:var(--ink);font-weight:700}

.bk-do-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}
.bk-do{padding:22px 24px}
.bk-do .tab{margin-bottom:12px}
.bk-dont .tab{background:var(--flag);color:var(--paper);border-color:var(--flag)}
.bk-do ul{margin:0;padding-left:20px;font-family:var(--f-type);font-size:.92rem;line-height:1.7}
.bk-do li{margin-bottom:6px}

/* ---------- color swatches ---------- */
.bk-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.bk-swatch{overflow:hidden;display:flex;flex-direction:column}
.bk-chip{display:flex;align-items:flex-end;justify-content:flex-end;height:120px;padding:12px 14px;font-family:var(--f-type);font-weight:700;font-size:.86rem;letter-spacing:.04em;border-bottom:2.5px solid var(--ink)}
.bk-chip-meta{padding:14px 16px 16px;display:flex;flex-direction:column;gap:3px}
.bk-chip-meta b{font-family:var(--f-draft);font-size:1.15rem}
.bk-chip-meta code{font-family:var(--f-type);font-size:.78rem;color:var(--smudge)}
.bk-chip-meta span{font-family:var(--f-type);font-size:.82rem;color:var(--smudge);line-height:1.5}

/* ---------- type specimens ---------- */
.bk-types{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.bk-type{padding:22px 24px 24px}
.bk-type-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.bk-type-head code{font-family:var(--f-type);font-size:.76rem;color:var(--smudge)}
.bk-specimen{font-size:1.9rem;line-height:1.15;color:var(--ink);padding:10px 0;border-bottom:2px dashed var(--faint);min-height:80px}
.bk-specimen.marker{font-family:var(--f-marker)}
.bk-specimen.draft{font-family:var(--f-draft)}
.bk-specimen.hand{font-family:var(--f-hand);font-size:2.4rem}
.bk-specimen.type{font-family:var(--f-type);font-size:1.2rem}
.bk-type-meta{margin-top:14px;display:flex;flex-direction:column;gap:4px}
.bk-type-meta b{font-family:var(--f-draft);font-size:1.2rem}
.bk-type-meta span{font-family:var(--f-type);font-size:.86rem;color:var(--smudge);line-height:1.55}

/* ---------- downloads ---------- */
.bk-downloads{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:8px}
.bk-ext{font-family:var(--f-type);font-size:.68rem;font-weight:700;letter-spacing:.1em;border:1.5px solid var(--ink);border-radius:5px;padding:2px 6px;margin-left:4px}

/* ---------- responsive ---------- */
@media (max-width:820px){
  .bk-logo-row{grid-template-columns:1fr}
  .bk-swatches{grid-template-columns:1fr 1fr}
  .bk-types{grid-template-columns:1fr}
  .bk-do-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .bk-swatches{grid-template-columns:1fr}
  .bk-logo-cell .ic{width:80px;height:80px}
}