/* Brand assets page (/branding) - ported from the Claude Design project's
   site/media.html + site/MediaKit.jsx. Buttons, wrapper and footer come from
   landing.css, so only what is unique to this page lives here. */

.bk-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 56px var(--space-6) 96px;
}

/* ---------- Header ---------- */
.bk-head { max-width: 700px; margin-bottom: 34px; }
.bk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}
.bk-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.bk-head h1 {
  font-size: 52px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 16px;
}
.bk-head h1 em { font-style: italic; color: var(--color-primary); }
.bk-head .bk-lead {
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 24px;
}
.bk-head .bk-hint {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-subtle);
  margin: 12px 0 0;
}

/* Held while a zip is being built - four canvas renders take a moment. */
.lp-btn:disabled { opacity: 0.6; cursor: progress; pointer-events: none; }

/* ---------- Controls ---------- */
.bk-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bk-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 4px;
}
.bk-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  background: transparent;
  color: var(--text-muted);
  transition: var(--transition-control);
}
.bk-toggle button:hover { color: var(--text-strong); }
.bk-toggle button.on {
  background: var(--color-primary);
  color: var(--text-on-brand);
}
.bk-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-subtle);
}
/* The swatch and the card previews share one checkerboard, so "transparent"
   reads the same in the legend as it does behind the artwork. Mid grey, so it
   holds up behind both the black and the white variant. */
.bk-note .bk-swatch,
.bk-preview {
  background-image: repeating-conic-gradient(#C9C4BC 0% 25%, #DED9D1 0% 50%);
}
.bk-note .bk-swatch {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-default);
  background-size: 8px 8px;
}

/* ---------- Asset grid ---------- */
.bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.bk-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.bk-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 34px 24px;
  background-size: 18px 18px;
  border-bottom: 1px solid var(--border-subtle);
}
.bk-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
}
.bk-card-foot .bk-label {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 15px;
  color: var(--text-strong);
}

/* The live lockup: icon plus wordmark, set in the brand webfont so the preview
   is the artwork itself rather than a picture of it. */
.bk-lockup { display: inline-flex; align-items: center; gap: 11.5px; }
.bk-lockup .bk-word {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 34px;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
}
.bk-lockup .bk-word .bk-tld { color: var(--color-primary); }

/* ---------- Usage ---------- */
.bk-usage {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
}
.bk-usage .bk-usage-ic { color: var(--color-primary); margin-top: 1px; flex: none; display: flex; }
.bk-usage p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-body); }
.bk-usage strong { color: var(--text-strong); }

@media (max-width: 640px) {
  .bk-page { padding: 36px var(--space-5) 64px; }
  .bk-head h1 { font-size: 38px; }
  .bk-grid { grid-template-columns: 1fr; }
}