/* ==========================================================================
   brand.html — page-specific pieces.

   The brand page has to *show* the system, not describe it, so most of what is
   here is a specimen: a swatch that paints itself from its own token, a type
   row set at the real size, a gradient tile filled with the real stop list.
   Nothing here belongs in site.css — it is all specimen furniture.
   ========================================================================== */

/* ---- Editorial helpers ---------------------------------------------------- */

.b-cols {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.b-cols__aside {
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--neutral-400);
}
@media (max-width: 760px) { .b-cols { grid-template-columns: 1fr; gap: var(--space-6); } }

.b-prose { max-width: 640px; }
.b-prose p { font-size: var(--text-l); line-height: 1.6; color: var(--neutral-600); }
.b-prose p + p { margin-top: var(--space-5); }
.b-prose strong { color: var(--neutral-900); font-weight: 600; }

/* A definition list for the guideline lines that read "Term : rule". */
.b-defs { display: grid; gap: 0; margin-top: var(--space-2); }
.b-defs__row {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--neutral-200);
  align-items: baseline;
}
.b-defs__row:last-child { border-bottom: 1px solid var(--neutral-200); }
.b-defs__term { font-size: var(--text-s); font-weight: 700; letter-spacing: -0.01em; }
.b-defs__desc { font-size: var(--text-s); line-height: 1.6; color: var(--neutral-600); }
@media (max-width: 640px) {
  .b-defs__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

.b-note {
  margin-top: var(--space-4);
  font-size: var(--text-s);
  line-height: 1.6;
  color: var(--neutral-400);
}

.b-sub {
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  font-size: var(--text-s);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.b-sub__hint { font-weight: 400; color: var(--neutral-400); margin-left: var(--space-2); }

/* ---- Swatches ------------------------------------------------------------- */

.b-swatches { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
.b-swatch { display: block; }
.b-swatch__chip {
  height: 76px;
  border-radius: var(--radius-lg);
  box-shadow: var(--ring-default);
}
.b-swatch__name {
  margin-top: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--neutral-900);
  word-break: break-all;
}
.b-swatch__hex {
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--neutral-400);
  text-transform: uppercase;
}

/* Triads read as one object, so they sit in a stack rather than a loose grid. */
.b-triads { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.b-triad__name { font-size: var(--text-s); font-weight: 700; margin-bottom: var(--space-2); text-transform: capitalize; }
.b-triad__bar { display: flex; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--ring-default); }
.b-triad__step { flex: 1; height: 56px; }
.b-triad__keys { display: flex; margin-top: var(--space-2); gap: var(--space-2); }
.b-triad__key {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.5;
  color: var(--neutral-400);
  text-transform: uppercase;
}

/* ---- Type specimens ------------------------------------------------------- */

.b-type__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--space-6);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--neutral-200);
  align-items: baseline;
}
.b-type__row:last-child { border-bottom: 1px solid var(--neutral-200); }
.b-type__meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  line-height: 1.7;
  color: var(--neutral-400);
}
.b-type__meta b { display: block; color: var(--neutral-900); font-weight: 400; }
.b-type__sample { color: var(--neutral-900); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .b-type__row { grid-template-columns: 1fr; gap: var(--space-2); }
}

/* ---- Spacing scale -------------------------------------------------------- */

.b-space { display: grid; gap: var(--space-2); }
.b-space__row { display: grid; grid-template-columns: 120px 62px minmax(0, 1fr); gap: var(--space-4); align-items: center; }
.b-space__name,
.b-space__val { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.b-space__name { color: var(--neutral-900); }
.b-space__val { color: var(--neutral-400); text-align: right; }
.b-space__bar { height: 12px; border-radius: 2px; background: var(--brand-600); min-width: 1px; }

/* ---- Radii ---------------------------------------------------------------- */

.b-radii { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.b-radius__box {
  height: 88px;
  background: var(--neutral-100);
  box-shadow: var(--ring-default);
}

/* ---- Elevation ------------------------------------------------------------ */

.b-elev { display: grid; gap: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.b-elev__stage {
  height: 118px;
  display: grid;
  place-items: center;
  background: var(--neutral-50);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.b-elev__chip {
  width: 100%;
  height: 100%;
  background: var(--neutral-white);
  border-radius: var(--radius-lg);
}

/* ---- Gradients ------------------------------------------------------------ */

.b-grads { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.b-grad__tile { height: 132px; border-radius: var(--radius-2xl); box-shadow: var(--ring-default); }
/* The two washes only read against something — give them a check ground. */
.b-grad__tile--wash {
  background-color: var(--wash-blue);
  background-image: var(--fade-to-white);
}
.b-grad__stops {
  margin-top: var(--space-2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.6;
  color: var(--neutral-400);
  word-break: break-word;
}

/* ---- Glass ---------------------------------------------------------------- */

.b-glass-stage {
  border-radius: var(--radius-2xl);
  background: var(--gradient-immersive);
  padding: var(--space-10);
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.b-glass__card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  min-height: 128px;
  color: var(--neutral-white);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-1);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.b-glass__card--fill   { background: var(--glass-fill); box-shadow: var(--shadow-glass); }
.b-glass__card--solid  { background: var(--glass-solid); }
.b-glass__card--quiet  { background: var(--glass-quiet); }
.b-glass__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); }
.b-glass__desc { font-size: var(--text-xs); line-height: 1.5; color: rgba(255, 255, 255, 0.72); }

/* ---- The mark ------------------------------------------------------------- */

.b-orbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-16);
  /* The bloom sits outside the mark's own box, so the row is padded rather
     than the orbs being shrunk to fit. */
  padding: var(--space-12) var(--space-8);
  background: var(--neutral-50);
  border-radius: var(--radius-2xl);
}
.b-orb-spec { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.b-orb-spec__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--neutral-400);
  text-align: center;
}
.b-orb-spec__label b { display: block; color: var(--neutral-900); font-weight: 400; }

.b-usage { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.b-usage__stage {
  height: 168px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2xl);
  background: var(--neutral-50);
}
.b-usage__stage--dark { background: var(--gradient-panel-deep); }
.b-usage__verdict {
  margin-top: var(--space-3);
  font-size: var(--text-s);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.b-usage__verdict::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-600);
  flex: none;
}
.b-usage--no .b-usage__verdict::before { background: var(--rose-600); }
.b-usage__why { margin-top: var(--space-1); font-size: var(--text-s); line-height: 1.55; color: var(--neutral-600); }

/* The three ways the mark gets placed wrong, shown so they are recognisable. */
.b-wrong { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* 1 — boxed: a grey plate and a radius of its own. */
.b-wrong__boxed {
  width: 104px; height: 104px;
  display: grid; place-items: center;
  background: var(--neutral-200);
  border-radius: var(--radius-lg);
}
.b-wrong__boxed img { width: 68px; height: 68px; object-fit: contain; }

/* 2 — the bloom clipped square by a parent that has overflow: hidden. */
.b-wrong__clip {
  width: 68px; height: 68px;
  overflow: hidden;
  background: var(--neutral-white);
  box-shadow: var(--ring-default);
}
.b-wrong__clip .fx-orb { width: 68px; height: 68px; }

/* ---- Figure trims --------------------------------------------------------- */
/* Several board crops carry a slice of whatever sat above or below them on the
   Figma canvas. Trimmed here rather than by re-cutting the source files. */
.b-trim { object-fit: cover; }

/* ---- Icon families -------------------------------------------------------- */

.b-family { display: grid; gap: var(--space-4); }
.b-family + .b-family { margin-top: var(--space-8); }
.b-family__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.b-family__name { font-size: var(--text-m); font-weight: 700; letter-spacing: -0.01em; }
.b-family__rule { font-size: var(--text-s); color: var(--neutral-600); }
.b-family img {
  width: 100%; height: auto;
  border-radius: var(--radius-2xl);
  box-shadow: var(--ring-default);
}

/* ---- Campaign ------------------------------------------------------------- */

/* A live lockup built from the tokens, next to the photographed mockups —
   the formula is easier to copy from something that is actually set. */
.b-lockup {
  position: relative;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  padding: var(--space-12);
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-8);
  color: var(--neutral-white);
  background: var(--gradient-panel-blue);
}
.b-lockup__pill {
  align-self: flex-start;
  display: inline-flex;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--glass-solid);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.b-lockup__head {
  font-size: var(--h4-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  font-weight: 400;
}
.b-lockup__head b { font-weight: 700; }
.b-lockup__foot { display: flex; align-items: center; gap: var(--space-2); }
.b-lockup__foot img { height: 18px; width: auto; }

.b-formula { display: grid; gap: 0; }
.b-formula__step {
  display: grid;
  grid-template-columns: 28px 132px minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-4) 0;
  border-top: 1px solid var(--neutral-200);
  align-items: baseline;
}
.b-formula__step:last-child { border-bottom: 1px solid var(--neutral-200); }
.b-formula__n {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-xs);
  color: var(--brand-600);
}
.b-formula__what { font-size: var(--text-s); font-weight: 700; }
.b-formula__eg { font-size: var(--text-s); line-height: 1.6; color: var(--neutral-600); }
.b-formula__eg i { font-style: normal; color: var(--neutral-900); }

.b-icps { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.b-icp__grade { height: 64px; border-radius: var(--radius-lg); box-shadow: var(--ring-default); }
.b-icp__name { margin-top: var(--space-3); font-size: var(--text-s); font-weight: 700; }
.b-icp__desc { margin-top: 2px; font-size: var(--text-xs); line-height: 1.6; color: var(--neutral-600); }

.b-formats { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.b-format__name { font-size: var(--text-s); font-weight: 700; }
.b-format__desc { margin-top: var(--space-1); font-size: var(--text-s); line-height: 1.6; color: var(--neutral-600); }

/* ---- Figures -------------------------------------------------------------- */

/* The board crops are screenshots of a white Figma canvas — a hairline ring
   holds them without the heavier border .figure uses for photography. */
.b-shot img { border: 0; box-shadow: var(--ring-default); border-radius: var(--radius-2xl); }