/* brand.css — page-specific layout for /brand.
   Tokens and primitives come from site.css (loaded first).
   All rules scope under .brand-page or #<section-id> / .brand-* prefixes. */

/* ===== Nav additions (scoped to the brand page via the toggle + actions wrapper) ===== */

.nav__actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
}

.brand-nav__toggle {
  min-height: 36px;
  padding: 0 var(--space-md);
}

.nav__links a[aria-current='location'] {
  color: var(--text-primary);
}

/* ===== Section-intro helper (mirrors index.html convention) ===== */

.brand-page .section__intro {
  max-width: 720px;
  margin-bottom: 40px;
}
.brand-page .section__intro .overline { display: block; margin-bottom: var(--space-md); }
.brand-page .section__intro h2 { margin: 0 0 var(--space-lg); }
.brand-page .section__intro p { margin: 0; }

/* ===== Hero ===== */

.brand-hero {
  padding-top: 24px;
}
.brand-hero__card {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
@media (min-width: 768px) {
  .brand-hero { padding-top: 32px; }
  .brand-hero__card { padding: 40px; gap: var(--space-2xl); }
}
.brand-hero__mark img { height: 48px; width: auto; }
@media (min-width: 768px) {
  .brand-hero__mark img { height: 64px; }
}
.brand-hero__headline { margin: 0; overflow-wrap: break-word; }
.brand-hero__lede { margin: 0; color: var(--text-secondary); max-width: 62ch; overflow-wrap: break-word; }
.brand-hero__lede code {
  font: var(--font-overline);
  text-transform: none;
  letter-spacing: 0;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--raised);
  color: var(--text-primary);
}

/* ===== Voice · Do / Don't cards ===== */

.brand-voice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .brand-voice { grid-template-columns: 1fr 1fr; }
}
.brand-voice__card {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
@media (min-width: 768px) {
  .brand-voice__card { padding: var(--space-2xl); }
}
.brand-voice__header .chip {
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
}
.brand-voice__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.brand-voice__list li {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--hairline);
}
.brand-voice__list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.brand-voice__list p {
  margin: 0;
  color: var(--text-secondary);
}

/* ===== Logo tiles ===== */

.brand-logos {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 40px;
}
@media (min-width: 768px) {
  .brand-logos { grid-template-columns: 1fr 1fr; }
}

.brand-logo { display: flex; flex-direction: column; gap: var(--space-md); }
.brand-logo__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}
.brand-logo__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  border: 1px solid var(--hairline);
}
@media (min-width: 768px) {
  .brand-logo__tile { padding: var(--space-2xl); }
}
.brand-logo__tile--light { background: var(--brand-gray);  color: var(--brand-purple); }
.brand-logo__tile--dark  { background: var(--brand-purple); color: var(--brand-gray); }
.brand-logo__tile img { height: clamp(56px, 18vw, 96px); width: auto; max-width: 100%; }
.brand-logo__tile .btn--ghost {
  font-size: 12px;
  min-height: 32px;
  padding: 0 var(--space-md);
  color: inherit;
}
.brand-logo__tile--light .btn--ghost {
  border-color: rgba(46, 19, 50, 0.30);
  background: rgba(46, 19, 50, 0.04);
}
.brand-logo__tile--light .btn--ghost:hover {
  border-color: rgba(46, 19, 50, 0.55);
  color: var(--brand-purple);
  background: rgba(46, 19, 50, 0.08);
}
.brand-logo__tile--dark .btn--ghost {
  border-color: rgba(232, 230, 237, 0.30);
  background: rgba(232, 230, 237, 0.06);
}
.brand-logo__tile--dark .btn--ghost:hover {
  border-color: rgba(232, 230, 237, 0.55);
  color: var(--brand-gray);
  background: rgba(232, 230, 237, 0.10);
}

/* Dot vocabulary callout */
.brand-dot-note { padding: var(--space-2xl); margin-bottom: 32px; }
.brand-dot-note h3 { margin: 0 0 var(--space-sm); }
.brand-dot-note p { margin: 0; color: var(--text-secondary); }
.brand-dot-note code {
  font-family: var(--font-mono);
  padding: 0 4px;
  border-radius: 4px;
  background: var(--raised);
}

.brand-clearspace { color: var(--text-secondary); }

/* ===== Color swatches ===== */

.brand-swatch-group__title {
  margin: 32px 0 var(--space-lg);
}

.brand-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.brand-swatch {
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  cursor: pointer;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  color: var(--text-primary);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}
.brand-swatch:hover { border-color: var(--hairline-strong); }
.brand-swatch:active { transform: translateY(1px); }
.brand-swatch.is-copied { border-color: var(--brand-orange); }

.brand-swatch__chip {
  position: relative;
  display: block;
  height: 56px;
  border-radius: var(--radius-chip);
  border: 1px solid var(--hairline);
}
.brand-swatch__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  color: var(--brand-purple);
}
@media (prefers-color-scheme: light) {
  .brand-swatch__icon { color: var(--brand-gray); }
}
[data-theme='light'] .brand-swatch__icon { color: var(--brand-gray); }
[data-theme='dark']  .brand-swatch__icon { color: var(--brand-purple); }
.brand-swatch__name { font: var(--font-body-sm); color: var(--text-primary); }
.brand-swatch__hex { font-size: 14px; color: var(--text-primary); }
.brand-swatch__hex-alt { color: var(--text-tertiary); }

/* Toast */
.brand-toast {
  position: fixed;
  bottom: var(--space-2xl);
  left: 50%;
  transform: translateX(-50%) translateY(0);
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-md) var(--space-xl);
  font: var(--font-body-sm);
  box-shadow: var(--shadow-md);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.brand-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .brand-toast { transition: opacity 0.01ms linear; transform: translateX(-50%); }
  .brand-toast.is-visible { transform: translateX(-50%); }
}

/* ===== Type samples ===== */

.brand-type-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--hairline);
}
.brand-type-group:first-of-type { border-top: none; padding-top: 0; }
.brand-type-group > .overline { display: block; margin-bottom: var(--space-sm); }

.brand-type-sample { display: flex; flex-direction: column; gap: var(--space-sm); }
.brand-type-sample__token { color: var(--text-tertiary); }
.brand-type-sample p { margin: 0; }

.brand-type-sample__mono-hero {
  font-size: clamp(36px, 12vw, 56px);
  line-height: 1.08;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.brand-type-sample__mono-time {
  font-size: clamp(20px, 6vw, 24px);
  line-height: 1.2;
  font-weight: 500;
}

.brand-type-rule {
  padding: var(--space-2xl);
  margin-top: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.brand-type-rule h3 { margin: 0; }
.brand-type-rule__row { display: flex; align-items: center; gap: var(--space-lg); }

/* ===== Resources ===== */

.brand-resources__cta { margin-bottom: var(--space-2xl); }

.brand-resources__list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font: var(--font-body-sm);
  color: var(--text-secondary);
}
.brand-resources__list a { color: var(--text-primary); }
.brand-resources__list a:hover { color: var(--brand-orange); }

.brand-resources__reset {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-primary);
  cursor: pointer;
  font: inherit;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: var(--hairline-strong);
  text-underline-offset: 3px;
}
.brand-resources__reset:hover { color: var(--brand-orange); }

.brand-resources__stamp {
  margin: 0;
  color: var(--text-tertiary);
}