/* [ skip ] */

.cb-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: var(--cb-s2) var(--cb-s3);
  background: var(--cb-sheet);
  z-index: 10;
}

.cb-skip:focus { left: var(--cb-gutter); }

/* [ head ] */

.cb-head {
  max-width: var(--cb-page);
  margin: 0 auto;
  padding: var(--cb-s5) var(--cb-gutter) 0;
}

.cb-head__mark {
  margin: 0;
  font-family: var(--cb-display);
  font-size: var(--cb-t-5);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.cb-head__mark a {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-s3);
  color: inherit;
  text-decoration: none;
}

/* El nombre sigue siendo texto vivo (regla D1); el signo va al lado y es
   decorativo, así que no tiene texto alternativo: leerlo en voz alta
   diría «Charterbend» dos veces. */
.cb-head__sign {
  width: 1.15em;
  height: 1.15em;
  flex: none;
}

.cb-head__strap {
  margin: var(--cb-s1) 0 var(--cb-s4);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ nav ] */

.cb-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-s2) var(--cb-s5);
  border-top: 1px solid var(--cb-rule);
  padding-top: var(--cb-s3);
}

.cb-nav__link {
  display: inline-block;
  min-height: 24px;
  padding: var(--cb-s1) 0;
  color: var(--cb-ink);
  font-size: var(--cb-t-2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

@media (hover: hover) {
  .cb-nav__link:hover { border-bottom-color: var(--cb-rule); }
}

body[data-section='record'] .cb-nav__link[href='/record'],
body[data-section='analysis'] .cb-nav__link[href='/analysis'],
body[data-section='sources'] .cb-nav__link[href='/sources'],
body[data-section='glossary'] .cb-nav__link[href='/glossary'],
body[data-section='about'] .cb-nav__link[href='/masthead'] {
  border-bottom-color: var(--cb-accent);
}

/* [ band ] */

.cb-band {
  max-width: var(--cb-page);
  margin: 0 auto var(--cb-s6);
  padding: var(--cb-s3) var(--cb-gutter);
  border-top: 1px solid var(--cb-rule);
  border-bottom: 1px solid var(--cb-rule);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  line-height: 1.7;
}

.cb-band dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--cb-s4);
  margin: 0;
}

@media (min-width: 560px) {
  .cb-band dl { grid-template-columns: 8.5rem minmax(0, 1fr); }
}

.cb-band dt {
  color: var(--cb-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cb-band dd { margin: 0 0 var(--cb-s1); }

/* [ lead ] */

.cb-lead { margin: 0 0 var(--cb-s6); }

.cb-lead p {
  max-width: var(--cb-measure);
  font-size: var(--cb-t-4);
}

.cb-label {
  margin: 0 0 var(--cb-s2);
  font-family: var(--cb-text);
  font-size: var(--cb-t-1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cb-accent);
}

.cb-trail {
  margin: 0 0 var(--cb-s4);
  font-size: var(--cb-t-2);
  color: var(--cb-muted);
}

/* [ columns ] */

.cb-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cb-s6) var(--cb-gap);
  margin: 0 0 var(--cb-s6);
}

@media (min-width: 900px) {
  .cb-columns {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

/* [ contents ] */

.cb-contents,
.cb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--cb-t-2);
}

.cb-contents caption,
.cb-table__caption {
  margin-bottom: var(--cb-s3);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
  text-align: left;
}

.cb-contents th,
.cb-table th {
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
  text-align: left;
  padding: var(--cb-s2) var(--cb-s3) var(--cb-s2) 0;
  border-bottom: 2px solid var(--cb-accent);
}

.cb-contents td,
.cb-table td {
  padding: var(--cb-s3) var(--cb-s3) var(--cb-s3) 0;
  border-bottom: 1px solid var(--cb-rule);
  vertical-align: top;
}

.cb-contents__num {
  font-family: var(--cb-mono);
  color: var(--cb-accent);
  white-space: nowrap;
}

.cb-table .cb-figure-cell { text-align: right; }

.cb-table__row--subject { background: var(--cb-accent-weak); }

.cb-table__wrap {
  max-width: 100%;
  overflow-x: auto;
}

.cb-table__source {
  margin: var(--cb-s2) 0 0;
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ prose ] */

/* La portada cuelga de la izquierda y la pieza va centrada, y cada una lo
   hace entera. En la portada mandan dos bloques que ocupan el marco completo
   —el titular y la rejilla de contenidos—, así que un sumario centrado a 232
   y una rejilla que empieza en 36 se pelearían por el borde. */
body[data-section="home"] .cb-figure,
body[data-section="home"] .cb-prose {
  margin-left: 0;
  margin-right: auto;
}

/* «Una columna, sin raíl» (DESIGN.md §3.4) quiere decir un solo borde
   izquierdo. Sin esto el rastro, el rótulo y el titular ocupaban los 1208px
   del marco mientras el texto ocupaba 817 centrados: dos alineaciones en la
   página que presume de tener una. En la portada el h1 vive dentro de
   `.cb-lead`, que ya lleva la medida, y por eso la regla es de hijo directo. */
main > h1,
main > .cb-trail,
main > .cb-label {
  max-width: var(--cb-measure);
  margin-left: auto;
  margin-right: auto;
}

.cb-prose {
  max-width: var(--cb-measure);
  margin: 0 auto var(--cb-s6);
}

.cb-prose h2,
.cb-prose h3 { max-width: var(--cb-measure); }

.cb-standfirst {
  max-width: var(--cb-measure);
  margin: 0 auto var(--cb-s4);
  font-size: var(--cb-t-4);
  color: var(--cb-muted);
}

.cb-byline {
  max-width: var(--cb-measure);
  margin: 0 auto var(--cb-s6);
  padding-bottom: var(--cb-s3);
  border-bottom: 1px solid var(--cb-rule);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ stamp ] */

.cb-stamp {
  margin: calc(var(--cb-s4) * -1) 0 var(--cb-s4) var(--cb-s3);
  padding: var(--cb-s1) 0 var(--cb-s1) var(--cb-s3);
  border-left: 1px solid var(--cb-rule);
  border-bottom: 1px solid var(--cb-rule);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

.cb-stamp__id { color: var(--cb-ink); }

.cb-ref {
  font-family: var(--cb-mono);
  font-size: 0.85em;
  color: var(--cb-accent);
  text-decoration: none;
}

/* [ sources ] */

.cb-sources {
  max-width: var(--cb-measure);
  margin: 0 auto var(--cb-s6);
  padding-top: var(--cb-s4);
  border-top: 2px solid var(--cb-accent);
}

.cb-sources ol {
  margin: 0;
  padding-left: var(--cb-s4);
  font-size: var(--cb-t-2);
}

.cb-sources__item { margin-bottom: var(--cb-s3); }

.cb-sources__item .cb-mono { display: block; color: var(--cb-muted); }

/* [ rubric ] */

.cb-rubric {
  margin: 0 0 var(--cb-s7);
  padding-top: var(--cb-s3);
  border-top: 2px solid var(--cb-accent);
}

.cb-rubric__note { max-width: var(--cb-measure); color: var(--cb-muted); }

.cb-piece {
  max-width: var(--cb-measure);
  margin: 0 0 var(--cb-s5);
}

.cb-piece h3 { margin-top: 0; }

.cb-piece__built {
  margin: var(--cb-s2) 0 0;
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ record ] */

.cb-record { margin: 0 0 var(--cb-s6); }

.cb-record__year {
  display: flex;
  align-items: center;
  gap: var(--cb-s3);
  margin: var(--cb-s6) 0 var(--cb-s4);
  font-family: var(--cb-display);
  font-size: var(--cb-t-5);
}

.cb-record__year::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--cb-rule);
}

.cb-record__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cb-s1) var(--cb-s4);
  margin: 0 0 var(--cb-s4);
  padding-bottom: var(--cb-s4);
  border-bottom: 1px solid var(--cb-rule);
}

@media (min-width: 560px) {
  .cb-record__entry { grid-template-columns: 6.5rem minmax(0, 1fr); }
}

.cb-record__date {
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

.cb-record__doc {
  margin: var(--cb-s2) 0 0;
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ register ] */

.cb-filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-s2);
  margin: 0 0 var(--cb-s4);
  padding: 0;
}

.cb-filter__toggle {
  min-height: 32px;
  padding: var(--cb-s1) var(--cb-s3);
  background: var(--cb-sheet);
  border: 1px solid var(--cb-edge);
  border-radius: 0;
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  cursor: pointer;
}

.cb-filter__toggle[aria-pressed='true'] {
  background: var(--cb-accent);
  color: #fff;
  border-color: var(--cb-accent);
}

/* [ terms ] */

.cb-terms__term {
  font-family: var(--cb-mono);
  font-size: var(--cb-t-2);
  white-space: nowrap;
}

/* [ figure ] */

.cb-figure {
  max-width: var(--cb-measure);
  margin: 0 auto var(--cb-s5);
}

/* Un diagrama encogido a 328px deja los rótulos en cuatro píxeles: legible
   para nadie. Se trata como una tabla ancha — el dibujo conserva su tamaño y
   el visor estrecho lo recorre — y por eso el marco toma el foco y lleva
   nombre, igual que `.cb-table__wrap`. */
.cb-figure__frame {
  max-width: 100%;
  overflow-x: auto;
}

/* La crónica de la portada es ancha por naturaleza y se le da el marco
   entero. No es una imagen de cabecera: lleva pie, sale del registro y no
   hay texto encima de ella.

   El dibujo se estira hasta llenar el marco y no pasa de 1120, donde sus
   rótulos igualan el cuerpo del pie; y no baja de su tamaño natural, para
   que en un teléfono se recorra —dos pantallas, como los demás— en vez de
   encogerse hasta ser ilegible. */
.cb-figure--wide { max-width: none; }

.cb-figure--wide .cb-figure__frame img {
  width: 100%;
  min-width: 720px;
  max-width: 1120px;
}

/* Una lámina fotográfica se reduce sin perderse, así que no lleva marco de
   desplazamiento ni suelo de ancho: lo que no se puede encoger es un rótulo
   de ocho píxeles, no un grabado. */
.cb-figure--plate img {
  display: block;
  width: 100%;
  max-width: 1120px;
  border: 1px solid var(--cb-rule);
}

/* La figura que acompaña a una columna de texto: manda la celda de la
   rejilla, no la medida del texto. */
/* El pie se ciñe a la imagen y no a la celda: una leyenda más ancha que la
   fotografía que explica se lee como un párrafo suelto. */
.cb-figure--aside {
  max-width: 320px;
  margin-bottom: 0;
}

.cb-figure--aside img {
  display: block;
  width: 100%;
  border: 1px solid var(--cb-rule);
}

.cb-columns--method { align-items: start; }

/* [ people ] */

/* Un monograma, no un retrato. La regla I9 prohíbe ponerle cara a un nombre
   inventado, y dos letras dibujadas por el propio sitio no fingen ninguna.
   El cuadrado y la banda repiten la forma del signo de cabecera. */
.cb-person {
  display: flex;
  align-items: center;
  gap: var(--cb-s3);
}

.cb-monogram {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border: 2px solid var(--cb-ink);
  background:
    linear-gradient(to bottom right, transparent calc(50% - 3px),
      var(--cb-accent-weak) calc(50% - 3px), var(--cb-accent-weak) calc(50% + 3px),
      transparent calc(50% + 3px)),
    var(--cb-sheet);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--cb-ink);
}

.cb-figure__frame img { max-width: none; }

.cb-figure__caption {
  margin: var(--cb-s2) 0 0;
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  color: var(--cb-muted);
}

/* [ form ] */

.cb-form {
  max-width: var(--cb-page);
  margin: 0 auto var(--cb-s7);
  padding: var(--cb-s5) var(--cb-gutter);
  background: var(--cb-sheet);
  border-top: 1px solid var(--cb-rule);
  border-bottom: 1px solid var(--cb-rule);
}

.cb-form__title { margin-top: 0; font-size: var(--cb-t-4); }

.cb-form__note {
  max-width: var(--cb-measure);
  font-size: var(--cb-t-2);
  color: var(--cb-muted);
}

.cb-form__row { max-width: 32rem; margin: 0 0 var(--cb-s4); }

.cb-form__label {
  display: block;
  margin-bottom: var(--cb-s1);
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

.cb-form__field {
  width: 100%;
  min-height: 44px;
  padding: var(--cb-s2) var(--cb-s3);
  background: #fff;
  border: 1px solid var(--cb-edge);
  border-radius: 0;
}

.cb-form__field[aria-invalid='true'] { border-width: 2px; }

.cb-form__consent {
  display: flex;
  gap: var(--cb-s2);
  align-items: flex-start;
  max-width: var(--cb-measure);
  margin: 0 0 var(--cb-s4);
  font-size: var(--cb-t-2);
}

.cb-form__consent input {
  width: 24px;
  height: 24px;
  margin: 0;
  flex: 0 0 auto;
}

.cb-form__submit {
  min-height: 44px;
  padding: var(--cb-s2) var(--cb-s5);
  background: var(--cb-accent);
  color: #fff;
  border: 1px solid var(--cb-accent);
  border-radius: 0;
  font-weight: 600;
  cursor: pointer;
}

/* [ colophon ] */

.cb-colophon {
  max-width: var(--cb-page);
  margin: 0 auto;
  padding: var(--cb-s6) var(--cb-gutter) var(--cb-s7);
  border-top: 1px solid var(--cb-rule);
  font-size: var(--cb-t-2);
}

.cb-colophon dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--cb-s4);
}

@media (min-width: 560px) {
  .cb-colophon dl { grid-template-columns: 9.5rem minmax(0, 1fr); }
}

.cb-colophon__label {
  font-family: var(--cb-mono);
  font-size: var(--cb-t-1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cb-muted);
}

.cb-colophon__body { margin: 0 0 var(--cb-s3); }

.cb-colophon__body a {
  display: inline-block;
  min-height: 24px;
}