/* /brand/ — the logo, the colours it is drawn in, and what you may do with it.
   Everything here is sourced: the colours come out of the logo SVG, the formats out of the kit,
   the rules off the guidelines sheet. Nothing is a plausible-sounding invention — there is no
   clear-space diagram on this page because nobody has written that spec down. */

/* ───── The logo on its two grounds ───── */
/* Three horizontal lockups across, so the only difference between them — the mark — lands side
   by side and needs no caption to explain it. The stacked one is a different shape and gets its
   own full-width row below. */
.br-grounds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 20px;
}

.br-ground {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-a, #0d0d0e);
}

/* The stage is the point of the page: the logo, large, on the ground it is meant for. Generous
   padding so it is never crowded — which is also the one spacing rule we can demonstrate. */
.br-stage {
  display: grid;
  place-items: center;
  padding: 72px 40px;
  min-height: 210px;
}
.br-stage.is-dark { background: #050807; }
.br-stage.is-light { background: #FCFCFC; }
.br-stage img { width: min(260px, 80%); height: auto; }

.br-ground figcaption {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 22px 24px 24px;
  border-top: 1px solid var(--line);
}
.br-ground figcaption b { font-size: 16px; font-weight: 600; }
.br-ground figcaption span { color: var(--fg-2); font-size: 14.5px; line-height: 1.6; }

/* Where to find that exact file in the kit. Mono, quiet, the same register as the site's eyebrows. */
.br-file {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-3) !important;
}

/* Second row: the stacked lockup and the one-colour version, side by side. Both stages keep the
   first row's height so all four panels line up, and the stacked logo is sized by height because
   it is the only one that is taller than it is wide. */
.br-grounds-2 { margin-top: 20px; }

.br-ground-stack .br-stage img { width: auto; height: 96px; }

/* ───── Colour ───── */
.br-swatches {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 16px;
}

/* A swatch is a button because it copies its own value — site.js already wires [data-copy] and
   the toast. Reset the button, then build the card. */
.br-swatch {
  width: 100%;
  height: 100%;          /* every card the same height, so the rules under them line up */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 0 0 22px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.br-swatch:hover { border-bottom-color: var(--line-2); }

.br-chip {
  width: 100%;
  height: 104px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--c);
  transition: transform .18s ease;
}
/* Pure black against a near-black page needs an edge, or it reads as a hole. */
.br-chip.is-dark { box-shadow: inset 0 0 0 1px var(--line-2); }

.br-swatch b { font-size: 15.5px; font-weight: 600; }
.br-swatch code {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--mint);
}
.br-sub { margin-top: 4px; color: var(--fg-3); font-size: 13.5px; line-height: 1.55; }
/* push the rule to the bottom of the tallest card rather than to the end of this card's text */
.br-swatch .br-sub { margin-bottom: auto; }

/* ───── Using it ───── */
.br-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: 0;
}

/* Hairline-separated columns, not two cards with a big tick and a big cross in them. The old
   guidelines sheet did the circled Yay!/Nay! thing; this says the same with type. */
.br-rule { padding: 0 44px; border-left: 1px solid var(--line); }
.br-rule:first-child { padding-left: 0; border-left: 0; }
.br-rule:last-child { padding-right: 0; }

.br-rule h3 {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--accent);
}
.br-rule-no h3 { color: var(--fg-3); }

.br-rule ul { list-style: none; margin: 0; padding: 0; }
.br-rule li {
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 15.5px;
  line-height: 1.6;
  position: relative;
}
.br-rule li:first-child { border-top: 0; padding-top: 0; }
/* A short rule instead of a bullet: the same hairline language as the dividers. */
.br-rule li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  width: 10px;
  height: 1px;
  background: var(--accent);
}
.br-rule li:first-child::before { top: 11px; }
.br-rule-no li::before { background: var(--fg-3); }

/* ───── The kit ───── */
.br-kit { border-top: 1px solid var(--line); }
.br-kit-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.br-kit-k {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
}
.br-kit-row p { margin: 0; color: var(--fg-2); font-size: 16px; line-height: 1.65; }

.br-ask { margin: 40px 0 0; color: var(--fg-3); font-size: 15px; }
.br-ask a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-2); }
.br-ask a:hover { text-decoration-color: var(--accent); }

/* ───── Narrower ───── */
@media (max-width: 960px) {
  .br-rule { padding: 0; border-left: 0; }
  .br-rule + .br-rule { margin-top: 44px; padding-top: 44px; border-top: 1px solid var(--line); }
  .br-stage { padding: 56px 32px; min-height: 0; }
}

@media (max-width: 560px) {
  .br-stage { padding: 44px 24px; }
  .br-stage img { width: min(240px, 84%); }
  .br-ground-stack .br-stage img { height: 62px; }
  .br-chip { height: 84px; }
  .br-kit-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .br-chip { transition: none; }
  .br-swatch:hover .br-chip { transform: none; }
}

/* Light skin: small green text uses --mint (≥4.5:1 on the light surfaces); --accent stays for dots, fills,
   borders and large numbers. Light only, so the dark skin is unchanged. */
:root[data-theme="light"] .br-rule h3 { color: var(--mint); }