/* catalogo.css — the catalogue concept's only stylesheet.
 *
 * Architecture, and how it differs from the other four:
 *
 *   - camelCase class names, one per node. No BEM, no data-part layers, no element-selector scoping,
 *     no snake_case.
 *   - Layout is horizontal: each era is a flex row inside an `overflow-x: auto` shelf, with scroll
 *     snapping. Nothing here is a responsive card grid, at any width — the shelves stay shelves on a
 *     desktop and on a phone, which is what a catalogue looks like.
 *   - Tokens are `--cb-*` and describe printed paper: papel, cartao, selo, placa.
 *   - Two breakpoints, at 40em and 64em, in em. They change the poster width and the plate layout;
 *     they never change the number of columns, because there are no columns.
 *   - Light throughout. The site this replaces was a dark hero with a card grid; the palette and the
 *     composition both moved.
 */

.cbFolha {
  --cb-papel: #faf8f6;
  --cb-papel-fundo: #edeae4;
  --cb-cartao: #fbfcfe;
  --cb-tinta: #1f2027;
  --cb-tinta-fraca: #717174;
  --cb-cartaz: #4a63c0;
  --cb-selo: #d9a154;
  --cb-sobre-selo: #17150f;
  --cb-placa: #232633;
  --cb-placa-tinta: #f4efe4;
  --cb-placa-tinta-fraca: #aba9a6;
  --cb-risco: #c1c0c0;

  --cb-titulo: 'Arial Black', 'Helvetica Neue', Impact, 'Franklin Gothic Bold', sans-serif;
  --cb-corpo: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --cb-placa-fonte: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --cb-fita-largura: 15rem;
  --cb-vao: 0.85rem;

  /* The shared game runtime reads these. */
  --cb-primary: #4a63c0;
  --cb-secondary: #1f2027;
  --cb-accent: #d9a154;
  --cb-text: #1f2027;
  --cb-bg: #faf8f6;
  --cb-surface: #fbfcfe;
  --cb-border: #c1c0c0;
  --cb-tint: #edeae4;
  --cb-radius: 4px;
  --cb-shadow: 3px 3px 0 #c1c0c0;
  --cb-section: 1.5rem;
  --cb-gap: var(--cb-vao);
  --cb-max: 70rem;
  --cb-head-font: 'Arial Black', 'Helvetica Neue', Impact, 'Franklin Gothic Bold', sans-serif;
  --cb-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  margin: 0;
  padding: 0;
  background: var(--cb-papel-fundo);
  color: var(--cb-tinta);
  font-family: var(--cb-corpo);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}

.cbSalto {
  position: absolute;
  left: -9999px;
}
.cbSalto:focus {
  left: 0.75rem;
  top: 0.75rem;
  z-index: 3;
  background: var(--cb-selo);
  color: var(--cb-sobre-selo);
  padding: 0.6rem 1rem;
}
.cbFolha :focus-visible {
  outline: 3px solid var(--cb-selo);
  outline-offset: 2px;
}
.cbInvisivel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.cbFolha a {
  color: var(--cb-cartaz);
}

/* --------------------------------------------------------------- the poster cover */

.cbCartaz {
  background: var(--cb-papel);
  border-bottom: 4px solid var(--cb-tinta);
  padding: 1rem 1.25rem 1.25rem;
}
.cbCartazFaixa {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
  max-width: var(--cb-max);
  margin: 0 auto;
}
.cbCartazSelo {
  background: var(--cb-selo);
  color: var(--cb-sobre-selo);
  font-family: var(--cb-placa-fonte);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  margin: 0;
  /* A printed stamp sits slightly off square. */
  transform: rotate(-1.5deg);
}
.cbCartazNome {
  font-family: var(--cb-titulo);
  font-size: clamp(1.75rem, 8vw, 3.25rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--cb-cartaz);
  margin: 0;
}
.cbCartazNome a {
  color: inherit;
  text-decoration: none;
}
.cbCartazDizer {
  max-width: 46ch;
  margin: 0.6rem auto 0;
  max-width: var(--cb-max);
  color: var(--cb-tinta-fraca);
  font-size: 1.0625rem;
}
.cbCartazNumeros {
  max-width: var(--cb-max);
  margin: 0.75rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cb-tinta-fraca);
}
.cbCartazNumeros strong {
  color: var(--cb-cartaz);
  font-size: 1rem;
}

/* --------------------------------------------------------------- shelves */

.cbFolha > main {
  max-width: var(--cb-max);
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2.5rem;
}
.cbVitrine {
  margin-bottom: 2.25rem;
}
.cbVitrineTopo {
  border-bottom: 2px solid var(--cb-tinta);
  padding-bottom: 0.5rem;
  margin-bottom: var(--cb-vao);
}
.cbVitrineEra {
  font-family: var(--cb-titulo);
  font-size: 1.375rem;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0;
  color: var(--cb-cartaz);
}
.cbVitrineNota {
  margin: 0.3rem 0 0;
  color: var(--cb-tinta-fraca);
  font-size: 0.9375rem;
  max-width: 62ch;
}

/* The shelf itself. Horizontal, scrolls inside its own box, snaps to each poster, and is focusable so
   a keyboard can scroll it without a mouse. The page body never scrolls sideways. */
.cbVitrineRolo {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  padding: 0.25rem 0 0.75rem;
  /* A hint that there is more to the right, drawn rather than scripted. */
  background:
    linear-gradient(to right, var(--cb-papel-fundo) 60%, transparent) left center / 2rem 100% no-repeat,
    linear-gradient(to left, var(--cb-papel-fundo) 60%, transparent) right center / 2rem 100% no-repeat;
}
.cbVitrineFaixa {
  display: flex;
  gap: var(--cb-vao);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --------------------------------------------------------------- one poster */

.cbFita {
  flex: 0 0 var(--cb-fita-largura);
  scroll-snap-align: start;
  background: var(--cb-cartao);
  border: 2px solid var(--cb-tinta);
  box-shadow: 4px 4px 0 var(--cb-risco);
  padding: 0.85rem;
  display: flex;
  flex-direction: column;
}
.cbFitaEtiqueta {
  align-self: flex-start;
  background: var(--cb-tinta);
  color: var(--cb-papel);
  font-family: var(--cb-placa-fonte);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.2rem 0.45rem;
  margin: 0 0 0.6rem;
}
.cbFitaNome {
  font-family: var(--cb-titulo);
  font-size: 1.125rem;
  line-height: 1.1;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}
.cbFitaNome a {
  color: var(--cb-tinta);
  text-decoration: none;
}
.cbFitaNome a:hover,
.cbFitaNome a:focus-visible {
  text-decoration: underline;
}
.cbFitaDizer {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  color: var(--cb-tinta-fraca);
}
.cbFitaDados {
  margin: 0 0 0.75rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-tinta-fraca);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cbFitaBotao {
  margin: auto 0 0;
}
.cbFitaBotao a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  background: var(--cb-selo);
  color: var(--cb-sobre-selo);
  font-family: var(--cb-titulo);
  font-size: 0.9375rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border: 2px solid var(--cb-tinta);
}
.cbFitaBotao a:hover {
  background: var(--cb-tinta);
  color: var(--cb-papel);
}

/* --------------------------------------------------------------- era index, after the shelves */

.cbIndiceEras {
  border-top: 4px solid var(--cb-tinta);
  padding-top: 1rem;
}
.cbIndiceEras h2 {
  font-family: var(--cb-titulo);
  font-size: 1.125rem;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.cbIndiceEras > p {
  color: var(--cb-tinta-fraca);
  margin: 0 0 0.75rem;
}
.cbIndiceEras ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cbIndiceEra {
  border: 2px solid var(--cb-tinta);
  background: var(--cb-cartao);
}
.cbIndiceEra a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.4rem 0.7rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--cb-tinta);
}
.cbIndiceEra span {
  background: var(--cb-tinta);
  color: var(--cb-papel);
  font-family: var(--cb-placa-fonte);
  font-size: 0.75rem;
  padding: 0.4rem 0.55rem;
  display: inline-block;
}

/* --------------------------------------------------------------- a machine page */

.cbMaquina h1 {
  font-family: var(--cb-titulo);
  font-size: clamp(1.625rem, 6vw, 2.5rem);
  line-height: 1;
  text-transform: uppercase;
  margin: 0.25rem 0 0.5rem;
  color: var(--cb-cartaz);
}
.cbMaquinaEra {
  font-family: var(--cb-placa-fonte);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cb-tinta);
  color: var(--cb-papel);
  display: inline-block;
  padding: 0.2rem 0.5rem;
  margin: 0;
}
.cbMaquinaPlaca {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.85rem;
  border: 2px solid var(--cb-tinta);
  background: var(--cb-cartao);
  padding: 0.75rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.8125rem;
  margin: 1rem 0 1.5rem;
}
.cbMaquinaPlaca dt {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--cb-tinta-fraca);
}
.cbMaquinaPlaca dd {
  margin: 0;
}
.cbMaquinaMesa {
  background: var(--cb-papel);
  border: 2px solid var(--cb-tinta);
  box-shadow: 4px 4px 0 var(--cb-risco);
  padding: 1rem;
  margin-bottom: 1.75rem;
}
.cbMaquina h2 {
  font-family: var(--cb-titulo);
  font-size: 1.25rem;
  text-transform: uppercase;
  margin: 1.75rem 0 0.6rem;
  color: var(--cb-cartaz);
}
.cbMaquinaComo,
.cbMaquinaHistoria,
.cbMaquinaDicas {
  max-width: 64ch;
}
.cbMaquinaComo ol,
.cbMaquinaDicas ul {
  padding-left: 1.35rem;
}
.cbMaquinaComo li,
.cbMaquinaDicas li {
  margin-bottom: 0.5rem;
}
.cbMaquinaNota {
  color: var(--cb-tinta-fraca);
  font-size: 0.9375rem;
}
.cbMaquinaAndar {
  border-top: 2px solid var(--cb-tinta);
  margin-top: 2rem;
  padding-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------- spec sheet + prose */

.cbFichaTecnica h1 {
  font-family: var(--cb-titulo);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  text-transform: uppercase;
  margin: 0 0 0.4rem;
  color: var(--cb-cartaz);
}
.cbFichaItem {
  border-top: 1px solid var(--cb-risco);
  padding: 0.85rem 0;
  max-width: 66ch;
}
.cbFichaItem h2,
.cbFichaItem h3 {
  font-family: var(--cb-titulo);
  font-size: 1.0625rem;
  text-transform: uppercase;
  margin: 0 0 0.3rem;
}
.cbFichaItem p {
  margin: 0 0 0.4rem;
  color: var(--cb-tinta-fraca);
}
.cbCorrido {
  max-width: 66ch;
}
.cbCorrido h1 {
  font-family: var(--cb-titulo);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  text-transform: uppercase;
  color: var(--cb-cartaz);
  margin: 0 0 0.75rem;
}
.cbCorrido h2 {
  font-family: var(--cb-titulo);
  font-size: 1.125rem;
  text-transform: uppercase;
  margin: 1.5rem 0 0.4rem;
}
.cbCorrido ul,
.cbCorrido ol {
  padding-left: 1.35rem;
}
.cbCorrido li {
  margin-bottom: 0.35rem;
}

/* --------------------------------------------------------------- the information plate */

.cbPlaca {
  background: var(--cb-placa);
  color: var(--cb-placa-tinta-fraca);
  border-top: 6px double var(--cb-selo);
  padding: 1.25rem;
  font-family: var(--cb-placa-fonte);
  font-size: 0.8125rem;
}
.cbPlacaLinha {
  max-width: var(--cb-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cbPlacaRotulo {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.6875rem;
  color: var(--cb-placa-tinta-fraca);
}
.cbPlacaValor {
  color: var(--cb-placa-tinta);
}
.cbPlacaLigacoes {
  max-width: var(--cb-max);
  margin: 0.85rem auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1rem;
}
.cbPlacaLigacoes a {
  color: var(--cb-placa-tinta);
  text-decoration: none;
  min-height: 2.25rem;
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
}
.cbPlacaLigacoes a:hover {
  text-decoration: underline;
}

/* The storage inventory: a plate row that opens on demand. */
.cbMemoria {
  max-width: var(--cb-max);
  margin: 0.85rem auto 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 0.6rem;
}
.cbMemoriaBotao {
  font: inherit;
  background: none;
  border: 1px solid var(--cb-selo);
  color: var(--cb-placa-tinta);
  padding: 0.4rem 0.75rem;
  min-height: 2.25rem;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.cbMemoriaBotao:hover {
  background: var(--cb-selo);
  color: var(--cb-sobre-selo);
}
.cbMemoriaPainel {
  margin-top: 0.6rem;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  padding: 0.6rem;
}
.cbMemoriaItem {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  margin: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cbMemoriaVazia {
  margin: 0;
}
.cbMemoriaRecado:empty {
  display: none;
}
.cbMemoriaRecado {
  color: var(--cb-selo);
  margin-left: 0.5rem;
}

/* --------------------------------------------------------------- two breakpoints
   Wider posters and a two-column plate. The shelves stay shelves. */

@media (min-width: 40em) {
  .cbFolha {
    --cb-fita-largura: 17rem;
  }
  .cbPlacaLinha {
    grid-template-columns: 12rem 1fr;
    gap: 0.85rem;
    align-items: baseline;
  }
}

@media (min-width: 64em) {
  .cbFolha {
    --cb-fita-largura: 19rem;
  }
  .cbFolha > main {
    padding: 2rem 1.5rem 3rem;
  }
}

/* The stamp's rotation and the scroll snapping are the only motion-adjacent things here; the rotation
   is static, so what goes is the snap and any transition. */
@media (prefers-reduced-motion: reduce) {
  .cbFolha *,
  .cbFolha *::before,
  .cbFolha *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .cbVitrineRolo {
    scroll-snap-type: none;
  }
}