/* ==========================================================================
   BAIRRADA.ONLINE — brand.css  v1.0
   Camada de identidade. Não é um framework: não define layout, grelha,
   botões nem componentes. Só cores, tipografia e os sinais da marca.

   Requer as fontes (Google Fonts):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&display=swap">
   ========================================================================== */

:root {
  /* Cores */
  --bo-cal: #F3F0EA;
  --bo-tinta: #1B1A17;
  --bo-barro: #B04E27;
  --bo-barro-light: #CC6A40;
  --bo-pedra: #DDD6C8;
  --bo-carvao: #5A554D;

  /* Famílias */
  --bo-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bo-serif: "Newsreader", Georgia, "Times New Roman", serif;

  /* Escala orientadora (digital) */
  --bo-size-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem); /* 44–72 */
  --bo-size-h1: clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);      /* 36–56 */
  --bo-size-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);   /* 26–34 */
  --bo-size-h3: 1.375rem;                                     /* 22 */
  --bo-size-lead: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem); /* 19–22 */
  --bo-size-body: 1.0625rem;                                  /* 17 */
  --bo-size-caption: .8125rem;                                /* 13 */
  --bo-size-meta: .8125rem;                                   /* 13 */
  --bo-size-index: .75rem;                                    /* 12 */

  /* Tracking */
  --bo-track-index: .08em;
}

/* --------------------------------------------------------------------------
   Wordmark  BAIRRADA●ONLINE
   <a class="bo-brand" href="/" aria-label="BAIRRADA.ONLINE">
     <span class="bo-brand-main">BAIRRADA</span><span class="bo-brand-dot" aria-hidden="true"></span><span class="bo-brand-online">ONLINE</span>
   </a>
   Sem espaços/quebras de linha entre os três spans.
   O tamanho define-se com font-size no .bo-brand. Abaixo de 32 px: .bo-brand--small
   Valores calculados a partir do ficheiro mestre 01_LOGOS/logo-primary.svg.
   -------------------------------------------------------------------------- */
.bo-brand {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bo-sans);
  line-height: 1;
  color: var(--bo-tinta);
  text-decoration: none;
  white-space: nowrap;
  font-kerning: normal;
  --bo-dot: var(--bo-barro);
}
.bo-brand-main { font-weight: 800; letter-spacing: -.012em; }
.bo-brand-dot {
  flex: none;
  display: inline-block;
  width: .19em;
  height: .19em;
  border-radius: 50%;
  background: var(--bo-dot);
  margin: 0 -.006em 0 .082em;
  transform: translateY(.012em); /* overshoot: base do ponto = base do O */
}
.bo-brand-online { font-weight: 400; letter-spacing: .018em; margin-right: -.018em; }

/* Versão de texto — usar quando font-size < 32px */
.bo-brand--small .bo-brand-main { letter-spacing: .02em; }
.bo-brand--small .bo-brand-dot { width: .23em; height: .23em; margin: 0 .044em 0 .081em; }
.bo-brand--small .bo-brand-online { font-weight: 500; letter-spacing: .06em; margin-right: -.06em; }

/* Sobre fundos escuros / fotografia escura */
.bo-brand--inverse { color: var(--bo-cal); --bo-dot: var(--bo-barro-light); }
/* Uma cor (herda a cor do texto) */
.bo-brand--mono { --bo-dot: currentColor; }

/* --------------------------------------------------------------------------
   Marca reduzida  B●
   <span class="bo-mark" role="img" aria-label="BAIRRADA.ONLINE"><span class="bo-mark-b">B</span><span class="bo-mark-dot"></span></span>
   -------------------------------------------------------------------------- */
.bo-mark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--bo-sans);
  font-weight: 800;
  line-height: 1;
  color: var(--bo-tinta);
  --bo-dot: var(--bo-barro);
}
.bo-mark-dot {
  flex: none;
  display: inline-block;
  width: .24em;
  height: .24em;
  border-radius: 50%;
  background: var(--bo-dot);
  margin-left: .071em;
  transform: translateY(.012em);
}
.bo-mark--inverse { color: var(--bo-cal); --bo-dot: var(--bo-barro-light); }

/* --------------------------------------------------------------------------
   Índices editoriais
   <p class="bo-index"><span>História 001</span><span class="bo-kicker">Lugares</span></p>
   -------------------------------------------------------------------------- */
.bo-index {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1.25em;
  margin: 0;
  font-family: var(--bo-sans);
  font-size: var(--bo-size-index);
  font-weight: 600;
  letter-spacing: var(--bo-track-index);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
  color: inherit;
}

/* CONVERSA. 001
   <p class="bo-conversa"><span>Conversa</span><span class="bo-conversa-dot" aria-hidden="true"></span><span>001</span></p>
   Pode coexistir com o wordmark. .bo-conversa--ink (ponto na cor do texto) é opcional, para composições que peçam menos ênfase. */
.bo-conversa {
  display: inline-flex;
  align-items: baseline;
  margin: 0;
  font-family: var(--bo-sans);
  font-size: var(--bo-size-index);
  font-weight: 600;
  letter-spacing: var(--bo-track-index);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.3;
  color: inherit;
  --bo-dot: var(--bo-barro);
}
.bo-conversa-dot {
  flex: none;
  display: inline-block;
  width: .26em;
  height: .26em;
  border-radius: 50%;
  background: var(--bo-dot);
  margin: 0 .5em 0 -.04em;
  transform: translateY(.012em);
}
.bo-conversa--inverse { --bo-dot: var(--bo-barro-light); }
.bo-conversa--ink { --bo-dot: currentColor; }

/* Categoria (iniciais: Pessoas · Lugares · Ofícios · Mesa · Memória — podem evoluir) */
.bo-kicker {
  font-family: var(--bo-sans);
  font-size: var(--bo-size-index);
  font-weight: 600;
  letter-spacing: var(--bo-track-index);
  text-transform: uppercase;
  color: var(--bo-carvao);
}

/* --------------------------------------------------------------------------
   Voz narrativa
   -------------------------------------------------------------------------- */
.bo-display, .bo-title {
  font-family: var(--bo-serif);
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.03;
  text-wrap: balance;
  font-optical-sizing: auto;
}
.bo-display { font-size: var(--bo-size-display); }
.bo-title { font-size: var(--bo-size-h1); }
.bo-lead {
  font-family: var(--bo-serif);
  font-size: var(--bo-size-lead);
  line-height: 1.45;
  font-weight: 400;
}
.bo-prose {
  font-family: var(--bo-serif);
  font-size: var(--bo-size-body);
  line-height: 1.62;
  font-weight: 400;
  text-wrap: pretty;
}
.bo-quote {
  font-family: var(--bo-serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}

/* Assinatura e descritor */
.bo-tagline {
  font-family: var(--bo-serif);
  font-style: italic;
  font-weight: 400;
}
.bo-descriptor {
  font-family: var(--bo-sans);
  font-size: var(--bo-size-index);
  font-weight: 600;
  letter-spacing: var(--bo-track-index);
  text-transform: uppercase;
}

/* Metadados, legendas, créditos */
.bo-meta {
  font-family: var(--bo-sans);
  font-size: var(--bo-size-meta);
  font-weight: 400;
  line-height: 1.45;
  color: var(--bo-carvao);
}
.bo-caption {
  font-family: var(--bo-sans);
  font-size: var(--bo-size-caption);
  font-weight: 400;
  line-height: 1.45;
  color: var(--bo-carvao);
  text-wrap: pretty;
}
.bo-credits {
  font-family: var(--bo-sans);
  font-size: var(--bo-size-meta);
  line-height: 1.6;
  color: var(--bo-carvao);
}
.bo-credits strong { font-weight: 600; color: var(--bo-tinta); }