/*
 * brand-book.css, the reader facing brand book's own sheet.
 * Unforged house identity, tokens 3.1.1 Broadside. Owner: Andreas.
 *
 * The book is a surface under 01_IDENTITY/06_COMPONENTS/CONTRACT.md. Every value here is a token
 * (var(--u-*)) or a literal the contract permits: 0, 100%, auto, currentColor, transparent, a
 * layout percentage, a unitless number where no token applies. No hex, no rgb, no px, no rem
 * size, no duration, no radius other than var(--u-radius-none), no shadow, no gradient.
 *
 * It composes base.css, the type, link, label, frame, wordmark, swatch, tag, band, action,
 * hairline, number, icon-u and flood atoms, the nav-item, table, quote, notice, figure,
 * explainer-object, method-step and proof-tile molecules and the nav, section, plate, statement,
 * method-index and colophon organisms. This sheet carries only what the book itself needs: the
 * shell, the page head, the contents list, the spec blocks, the do and do not pair, the
 * specimen frames.
 *
 * The one length literal is 48rem, the house breakpoint the shared layer already sets
 * (00_SHARED/flush.css, README "Open"). No breakpoint token exists yet.
 */

/* ------------------------------------------------------------------- 1 shell */
/* measure.document inside the two space.page margins: the geometry of the nav and the section
   organism, so a block written here lines up with a block composed from the library. */
.bb-shell {
  box-sizing: content-box;
  max-width: var(--u-measure-document);
  margin-inline: auto;
  padding-inline: var(--u-space-page);
  padding-block: var(--u-space-block) var(--u-space-section);
}
/* The full bleed wrapper: a plate, a statement or a colophon lays out its own container, so the
   book's own main is not the shell on the pages that carry one. */
.bb-page { display: block; }
/* A long token name or a path is set in the text voice and may be longer than a phone column.
   Let it break anywhere, so a 280px column at 320 never scrolls the page. */
.bb-shell code, .bb-page code { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- 2 page head */
/* The chrome hairline frame (the frame atom) carries the page head, which is also this page's
   carrier of --u-chrome-frame. Eyebrow, title, lede. */
.bb-plate__title { margin-block-start: var(--u-space-row); }
.bb-plate__lede {
  margin-block-start: var(--u-space-para);
  max-width: var(--u-measure-prose-body);
  color: var(--u-ground-ink-secondary);
}

/* -------------------------------------------------------- 3 sections, blocks */
.bb-section { margin-block-start: var(--u-space-section); }
.bb-section > * + * { margin-block-start: var(--u-space-para); }
.bb-section__head + .bb-lede { margin-block-start: var(--u-space-row); }
.bb-lede { max-width: var(--u-measure-prose-body); }
.bb-block {
  margin-block-start: var(--u-space-block);
  padding-block-start: var(--u-space-para);
  border-block-start: var(--u-line-hairline) solid var(--u-ground-rule);
}
.bb-block > * + * { margin-block-start: var(--u-space-para); }
.bb-block__head + * { margin-block-start: var(--u-space-row); }
/* Prose inside a block stays on the reading measure; a table and a specimen row do not. */
.bb-block p, .bb-block ul, .bb-block ol { max-width: var(--u-measure-prose-body); }
.bb-meta {
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
  max-width: var(--u-measure-prose-body);
}
.bb-foot {
  margin-block-start: var(--u-space-section);
  padding-block-start: var(--u-space-para);
  border-block-start: var(--u-line-hairline) solid var(--u-ground-rule);
  color: var(--u-ground-ink-faint);
}

/* --------------------------------------------------------------- 4 the lists */
/* A plain list in the book: one item per line on the reading measure, markers outside. */
.bb-list { padding-inline-start: var(--u-space-para); }
.bb-list > li + li { margin-block-start: var(--u-space-row); }
/* The rule list: one numbered or unnumbered rule per row, separated by a hairline, no marker.
   The pattern of a document's rule sheet, so a rule reads as a row and not as prose. */
.bb-rules { list-style: none; margin: 0; padding: 0; }
.bb-rules > li {
  padding-block: var(--u-space-para);
  border-block-start: var(--u-line-hairline) solid var(--u-ground-rule);
  display: grid;
  gap: var(--u-space-row);
  align-items: start;
}
.bb-rules > li:last-child { border-block-end: var(--u-line-hairline) solid var(--u-ground-rule); }
.bb-rules__name { display: block; }
.bb-rules__text { display: block; max-width: var(--u-measure-prose-body); }
.bb-rules__why {
  display: block;
  max-width: var(--u-measure-prose-body);
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
}
@media (min-width: 48rem) {
  .bb-rules > li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--u-space-para); }
  .bb-rules__why { grid-column: 2; }
}

/* ------------------------------------------------------------ 5 the contents */
/* One chapter per row on a hairline: the number, the name as the link, the line under it. The
   link is a control in a list, so it carries the 44px target floor through space.block. */
.bb-toc { list-style: none; margin: 0; padding: 0; }
.bb-toc > li {
  padding-block: var(--u-space-row);
  border-block-start: var(--u-line-hairline) solid var(--u-ground-rule);
  display: grid;
  gap: 0 var(--u-space-para);
  align-items: baseline;
}
.bb-toc > li:last-child { border-block-end: var(--u-line-hairline) solid var(--u-ground-rule); }
.bb-toc__num { display: block; color: var(--u-ground-ink-faint); }
.bb-toc__link {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--u-space-block);
  min-block-size: var(--u-space-block);
}
.bb-toc__line { display: block; color: var(--u-ground-ink-secondary); max-width: var(--u-measure-prose-body); }
@media (min-width: 48rem) {
  .bb-toc > li { grid-template-columns: auto minmax(0, 1fr) minmax(0, 2fr); }
}

/* ------------------------------------------------- 6 specimen rows and grids */
/* A row of things shown side by side: swatches, marks, objects. Wraps, never scrolls the page. */
.bb-row { display: flex; flex-wrap: wrap; gap: var(--u-space-para); align-items: stretch; }
/* Two columns from the house breakpoint: a pair of blocks that read against each other. */
.bb-grid { display: grid; gap: var(--u-space-block); align-items: start; }
@media (min-width: 48rem) {
  .bb-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bb-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Two grids in a row are two separate pairs. Without this the space inside a pair (the grid's own
   gap, space.block) is larger than the space between pairs (the section's space.para), and the
   page reads as one long column of boxes. The hairline is the seam the rest of the book uses. */
.bb-grid + .bb-grid {
  margin-block-start: var(--u-space-block);
  padding-block-start: var(--u-space-block);
  border-block-start: var(--u-line-hairline) solid var(--u-ground-rule);
}

/* The do and do not pair: two hairline boxes, the verdict as a label at the top of each. No
   colour tells them apart, because colour never grades on any surface (colour.md section 8);
   the words carry it. */
.bb-pair__verdict { display: block; }
.bb-pair__body {
  margin-block-start: var(--u-space-row);
  padding: var(--u-space-para);
  border: var(--u-line-hairline) solid var(--u-ground-rule);
}
.bb-pair__body > * + * { margin-block-start: var(--u-space-row); }
.bb-pair__why {
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
}

/* ------------------------------------------------------------ 7 the specimen */
/* A mark or an object shown on the ground it is allowed to sit on, inside a hairline, with its
   caption under it. The paper specimen restates paper so it reads as a bounded place, the flood
   specimen is the flood atom's ground. Padding is space.block, the air a mark needs. */
.bb-specimen { display: block; margin: 0; }
.bb-specimen__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--u-space-block);
  border: var(--u-line-hairline) solid var(--u-ground-rule);
  background-color: var(--u-color-ground-paper);
}
.bb-specimen__stage--flood {
  border-color: var(--u-color-rule-flood);
  background-color: var(--u-color-ground-flood);
}
.bb-specimen__caption {
  display: block;
  margin-block-start: var(--u-space-row);
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
}
.bb-specimen__name { display: block; color: var(--u-ground-ink); }
/* The mark inside a specimen: the wordmark atom sets the width from measure.document, which is
   the page's width and not this box's, so the specimen caps it to its own stage.

   A wordmark specimen stands on the full column, never inside a grid. The reason is a rule, not a
   preference: the light version has a 240px floor and the dark version a 120px floor
   (logo-usage.md rules 2 to 4), and the padding here is space.block on both sides. In a two column
   grid at 768 the stage would leave 212px, which is under the light version's floor, and in a
   three column grid it would leave 88px, under the dark version's. On the full column the
   narrowest case is 244px at 390, which clears both. A specimen that breaks the rule it documents
   is worse than no specimen. */
.bb-specimen .u-wordmark { width: 100%; }
.bb-specimen + .bb-specimen { margin-block-start: var(--u-space-block); }
/* An icon has a 16px floor, so it may sit in a grid. Half the stage keeps it square against a
   wordmark's band without reaching the wordmark's own presence. */
.bb-specimen__icon { width: 50%; }

/* ------------------------------------------------------------- 8 type sample */
/* A step shown at its own size with its numbers beside it. The sample may be wider than the
   reading measure and shorter than the row, so it never wraps into the numbers. */
.bb-step { margin-block-start: var(--u-space-block); }
.bb-step > * + * { margin-block-start: var(--u-space-row); }
.bb-step__sample { overflow-wrap: anywhere; }
.bb-step__facts {
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
  max-width: var(--u-measure-prose-body);
}

/* --------------------------------------------------------- 9 the flush study */
/* The worked example on the type page: the block itself at the reading measure, its solved
   numbers under it as a table. The block is the flush device from 00_SHARED/flush.css. */
.bb-flush-study {
  padding: var(--u-space-para);
  border: var(--u-line-hairline) solid var(--u-ground-rule);
}
.bb-flush-study > * + * { margin-block-start: var(--u-space-para); }

/* ------------------------------------------------------------ 10 the gallery */
/* The template gallery: one tile per template, the rendered artwork inside a hairline box on
   paper, the name as the link, one line under it. The artworks have different aspect ratios, so
   each sits inside a fixed box and is contained rather than cropped: a template is shown whole
   or it is not shown. The box is two plate steps tall, the tallest air the system has. */
.bb-gallery { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--u-space-block); }
@media (min-width: 48rem) {
  .bb-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.bb-gallery__item > * + * { margin-block-start: var(--u-space-row); }
.bb-gallery__shot {
  display: block;
  width: 100%;
  block-size: calc(2 * var(--u-space-plate));
  object-fit: contain;
  border: var(--u-line-hairline) solid var(--u-ground-rule);
  background-color: var(--u-color-ground-paper);
}
.bb-gallery__name { display: block; }
.bb-gallery__line {
  display: block;
  font-size: var(--u-size-caption);
  line-height: var(--u-leading-caption);
  color: var(--u-ground-ink-secondary);
}
/* The tile's link is a control in a list, so it carries the 44px target floor through
   space.block, the same way the contents list does. */
.bb-gallery__link {
  display: inline-flex;
  align-items: center;
  min-inline-size: var(--u-space-block);
  min-block-size: var(--u-space-block);
}

/* ------------------------------------------------------------ 11 the chapter */
/* The index page's essence block: the one line pitch on the narrow measure, set at the head
   step, with the reading under it. */
.bb-pitch { max-width: var(--u-measure-prose-body); }
.bb-pitch > * + * { margin-block-start: var(--u-space-para); }

/* ------------------------------------------------------------------- print
   The printed book, built by ../build-pdf.mjs. It lives here rather than in the
   script so the printed book and the screen book stay one artefact: a change to
   a page reaches both, and there is no second stylesheet to forget.

   What comes out. The nav is a screen affordance: in a bound document the reader
   turns pages, and a repeated horizontal menu on all 89 of them is noise that
   also pushes every page's real content down. The actions go for the same reason,
   a printed button being a lie. The colophon's own mark stays: it is the
   signature, not navigation.

   What stays. Every ground, every band, every mark, printed as ink. The identity
   is the flood and the vermilion; a brand book that prints them white is not the
   brand. build-pdf.mjs passes printBackground for exactly this. */
@media print {
  .u-nav,
  .u-action { display: none; }

  /* A page break inside a specimen or a rule row splits the thing being shown
     from the thing being said about it, which is the one thing a brand book
     cannot afford. */
  .bb-specimen,
  .bb-rules__row,
  .u-table,
  figure { break-inside: avoid; }

  /* A heading at the foot of a page is a heading on the wrong page. */
  h1, h2, h3 { break-after: avoid; }

  /* Each chapter opens a sheet, so the printed book has the same ten parts the
     site has. */
  .bb-page-head { break-before: page; }
  .bb-page-head:first-of-type { break-before: auto; }
}

/* ------------------------------------------------- the in-page contents
   Added 2026-08-28 after the cold reader test. Every chapter is one long scroll
   and the only anchor on any page was the skip link, so two of the six test
   questions could only be answered by reading a whole chapter. The list is built
   from the page's own h2 ids, so it cannot drift from the headings. Hidden in
   print: a printed page has the page itself. */
.bb-onpage {
  padding-block: var(--u-space-block);
  padding-inline: var(--u-space-page);
  border-block-end: var(--u-line-hairline) solid var(--u-color-rule-paper);
}
.bb-onpage__title {
  display: block;
  color: var(--u-color-ink-faint);
  margin-block-end: var(--u-space-row);
}
.bb-onpage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--u-space-para);
  row-gap: var(--u-space-row);
  max-width: var(--u-measure-document);
}
@media print { .bb-onpage { display: none; } }