/* ═══════════════════════════════════════════════════════════════════════
   bsc_v2.css — brazilian science communications
   Paleta: tinta #1A2B3C | azul #1E5AA8 | verde #1D7A4C | ouro #D9A422 | papel #FCFBF8

   O @import PRECISA ser a primeira regra do arquivo. Na v1 ele estava na
   linha 22, depois de :root e de tres regras de grade — e a especificacao
   manda o navegador IGNORAR todo @import que venha depois de uma regra de
   estilo. Resultado: a Fraunces nunca carregou, e o site inteiro rodou em
   Georgia desde o inicio. Nao mova esta linha daqui.
   A Source Sans 3 entrou no mesmo pedido: a v1 a declarava em 12 lugares
   sem nunca pedi-la.
   ═══════════════════════════════════════════════════════════════════════ */
/* Pesos pedidos como INTERVALO (400..700), nao como lista (400;500;600).
   As duas familias sao variaveis: com intervalo o Google devolve UM arquivo
   por familia cobrindo todos os pesos; com lista devolve um arquivo POR PESO.
   Medido no subconjunto latin: lista = 253 KB em 5 arquivos, intervalo =
   93 KB em 2. O intervalo ate 700 custa o mesmo que ate 600 e ainda cobre o
   peso das iniciais coloridas da marca. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400..700&family=Source+Sans+3:wght@400..700&display=swap');

/* ═══ A Noto Sans do tema sai do ar ═══
   O tema declara Noto Sans em quinze seletores e serve quatro pesos — 626 KB,
   35% do peso da home — e cada arquivo carrega os subconjuntos cirilico,
   devanagari, grego e vietnamita. Nenhum e usado: onde o tema pede Noto, o
   desenho pede Fraunces ou Source Sans 3. Cobrindo os quinze, a @font-face
   nunca casa com nada e o navegador nao baixa os arquivos.
   Especificidade identica a do tema; como esta folha carrega depois, vence.
   Se um dia aparecer Noto em alguma tela, e um seletor novo do tema: e so
   acrescenta-lo a lista certa aqui embaixo. */
html, body,
.pkp_site_name,
.pkp_site_name .is_text,
.obj_article_details .main_entry .item .label,
.obj_article_details .entry_details .item .label,
.obj_article_details .citation_display .citation_formats_button,
.pkp_block .title {
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.cmp_breadcrumbs .current h1,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.obj_article_summary > .title,
.obj_issue_summary .title {
  font-family: 'Fraunces', Georgia, serif;
}

/* ═══ SISTEMA ═══ escala modular (base 15, razão 1,2) e unidade de 8px.
   Antes eram 18 corpos avulsos e intervalos de 26/28/32/34 sem múltiplo comum:
   cada bloco era dimensionado olhando só para si. Agora todo corpo é um
   degrau e todo intervalo é múltiplo de 8 — e os blocos compartilham UMA
   grade de 12 colunas (coluna 68px, calha 24px, sobre os 1080px). */
:root {
  --t1: 10.5px;   /* rótulo em versalete */
  --t2: 12.5px;   /* metadado */
  --t3: 15px;     /* corpo */
  --t4: 18px;     /* prosa de abertura, título de cartão */
  --t5: 21.5px;   /* título de seção */
  --t6: 26px;     /* título de artigo */
  --t7: 31px;     /* manchete */
}
.bsc-lead-img  { grid-column: span 7; }
.bsc-lead-text { grid-column: span 5; }
.bsc-card      { grid-column: span 4; }

/* bsc_v1.css — brazilian science communications
   Paleta: tinta #1A2B3C | azul #1E5AA8 | verde #1D7A4C | ouro #D9A422 | papel #FCFBF8 */


:root {
  --bsc-tinta: #1A2B3C;
  /* A tinta dos titulos e mais azul que a do texto. Antes titulo e corpo
     usavam a MESMA cor, e uma pagina de uma cor so nao tem hierarquia: lida
     de longe, virava uma mancha cinza-carvao. Aqui o azul e explicito
     (B menos R: 72, contra 34 da tinta do texto) e o contraste sobre o papel
     creme continua alto: 11,1:1, bem acima do 7:1 do nivel AAA. */
  --bsc-titulo: #1B3A63;
  --bsc-azul: #1E5AA8;
  --bsc-verde: #1D7A4C;
  --bsc-ouro: #D9A422;
  /* O ouro da marca reprova em contraste como TEXTO sobre papel: 2,19:1,
     contra os 4,5 exigidos — e é a única das três iniciais que reprova
     (o azul dá 6,58 e o verde 5,15). Este é o mesmo ouro que o seletor de
     idioma já usava pelo mesmo motivo: mesma matiz, escurecido até passar
     (4,53:1). Vale só para LETRA; filete e ornamento seguem no #D9A422,
     onde a exigência não se aplica. */
  --bsc-ouro-texto: #936E12;
  --bsc-papel: #FCFBF8;
}

body {
  background: var(--bsc-papel);
  color: var(--bsc-tinta);
}

/* Cabeçalho: papel, logotipo contido */
.pkp_structure_head,
header.header_view,
.pkp_site_name_wrapper {
  background: var(--bsc-papel);
}

.pkp_structure_head {
  padding: 8px 0 8px;
}

/* Pacote nature: grade única e fundo unificado */
.pkp_structure_main::before,
.pkp_structure_main::after {
  display: none !important;
  content: none !important;
}

/* ordem da home, como a nature: imagem encostada na navegação,
   depois as notícias, depois o fascículo */
.page_index_journal {
  display: flex;
  flex-direction: column;
}
.page_index_journal .additional_content { order: 1; }
.page_index_journal .cmp_announcements  { order: 2; margin-top: 24px; }
.page_index_journal .current_issue      { order: 3; }
.bsc-hero2 { margin-top: 8px; }

/* intervalo menu → conteúdo apertado, padrão nature (~40px) */
.pkp_structure_body_wrapper,
.pkp_structure_content {
  padding-top: 8px !important;
}
.pkp_structure_main {
  margin-top: 0 !important;
}
.bsc-hero2 {
  margin-top: 24px;
}

/* grade com largura travada, como a nature */
.pkp_head_wrapper,
.pkp_structure_content {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.pkp_structure_page,
.pkp_structure_content {
  background: var(--bsc-papel);
}
.pkp_structure_sidebar {
  display: none;
}
.pkp_structure_main {
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 60px !important;
}

/* Páginas internas: faixa fina da imagem acima do menu (masthead editorial) */
body:not(.pkp_page_index) .pkp_site_name_wrapper::after {
  content: '';
  display: block;
  /* 88px = a proporção natural do arquivo (1600x135) na grade de 1080.
     A 74 a imagem era cortada e a madeira virava estria vertical. */
  height: 88px;
  max-width: 1080px;      /* mesma medida da grade e da barra de navegação */
  margin: 8px 0 0;       /* alinhada à ESQUERDA: o wrapper é 80px mais largo
                             que a grade, então 'auto' jogava a faixa 40px à direita */
  /* fatia do próprio herói: o arquivo já está em public/journals/<id>/,
     ao lado desta folha de estilo, e já veio no cache da home — a faixa
     não custa um único byte a mais. A posição vertical pega o miolo da
     casca, onde a madeira ainda tem cor. */
  background: url('homepageImage_en.jpg') no-repeat center 64% / cover;
}
@media (max-width: 767px) {
  body:not(.pkp_page_index) .pkp_site_name_wrapper::after {
    height: 56px;
  }
}

/* Cabeçalho: só o nome. A sigla foi removida (colide com BSc = Bachelor of Science).
   A abreviação de citação é "Braz. Sci. Commun." */
.pkp_site_name {
  position: relative;
}
/* Mobile: o tema deixa .pkp_site_name absolute e o wrapper colapsa —
   mesma armadilha do tema padrão já vista no rbciamb */
@media (max-width: 992px) {
  .pkp_site_name {
    position: static !important;
    height: auto !important;
  }
  .pkp_site_name_wrapper {
    height: auto !important;
    min-height: 0 !important;
  }
  .pkp_site_name img {
    max-height: 68px;
  }
}

.pkp_site_name .is_img img,
.pkp_site_name img,
header .is_img img {
  /* 72px, não 88: a 88 as letras do nome tinham 35,7px contra 30px da
     manchete do herói, e peso 730 contra 500 — o masthead era o maior e mais
     pesado tipo da página, competindo com a notícia que devia apresentar. */
  max-height: 72px;
  width: auto;
}

/* Títulos em Fraunces — a voz da marca */
h1, h2, h3, h4,
.page_index_journal h2,
.obj_issue_toc .title,
.obj_article_summary .title,
.obj_article_summary .title a {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--bsc-tinta);
}

/* Títulos internos também em Fraunces (o tema ganha em especificidade no h1) */
.pkp_structure_page h1,
.pkp_structure_main h1,
h1 {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 500;
  color: var(--bsc-tinta);
}

/* Dropdown do menu com a roupa da casa */
.pkp_navigation_primary .dropdown-menu {
  background: var(--bsc-papel);
  border: 1px solid #DDD9CD;
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(26, 43, 60, 0.10);
  padding: 8px 0;
}
.pkp_navigation_primary .dropdown-menu a {
  color: var(--bsc-tinta) !important;
  font-size: var(--t3);
  padding: 8px 16px;
}
.pkp_navigation_primary .dropdown-menu a:hover,
.pkp_navigation_primary .dropdown-menu a:focus {
  color: var(--bsc-verde) !important;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Links: azul da marca */
a {
  color: var(--bsc-azul);
}
a:hover, a:focus {
  color: var(--bsc-verde);
}

/* Navegação principal: tinta sólida, autoridade */
.pkp_navigation_primary_row,
.pkp_site_nav_menu,
nav.pkp_site_nav_menu {
  background: var(--bsc-tinta);
}
.pkp_navigation_primary_row a,
.pkp_site_nav_menu a {
  color: #fff;
}
.pkp_navigation_primary_row a:hover,
.pkp_site_nav_menu a:hover {
  color: var(--bsc-ouro);
}

/* Botões e destaques */
.pkp_button,
.cmp_button,
button.pkp_button {
  background: var(--bsc-tinta);
  border-color: var(--bsc-tinta);
  color: #fff;
}
.pkp_button:hover {
  background: var(--bsc-azul);
  border-color: var(--bsc-azul);
}

/* Bloco-herói da home (estilo nature: painel tinta + imagem do fascículo) */
.bsc-hero {
  display: flex;
  min-height: 340px;
  margin: 8px 0 32px;
}

/* Herói v2: imagem em sangria com texto sobre o papel da própria imagem */
.bsc-hero2 {
  position: relative;
  margin: 8px 0 32px;
}
.bsc-hero2 img {
  width: 100%;
  display: block;
  /* 360px = 1080 / 3, a proporcao exata do arquivo: a 320 o object-fit
     cortava 11% da altura. Mais alto tambem afasta a rede de linhas do
     bloco de texto, que antes cruzava a ultima linha do paragrafo. */
  height: 360px;
  object-fit: cover;
  object-position: center 45%;
}
@media (max-width: 767px) {
  /* 260, nao 210: a 210 a fotografia deixa de ser a imagem da revista e vira
     uma tarja. Nao passa de 260 porque acima disso a manchete cai abaixo da
     dobra — medido: a 260 ela nasce a 532px, dentro dos 812 do aparelho. */
  .bsc-hero2 img { height: 260px; }
}
/* ————— Página do artigo ————— */
.obj_article_details .page_title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t7);
  line-height: 1.2;
  max-width: 22em;
  margin: 8px 0 16px;
}
.obj_article_details .page_title::before {
  content: '';
  display: block;
  width: 92px;
  height: 3px;
  margin-bottom: 16px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%,
    var(--bsc-verde) 33.33% 66.66%,
    var(--bsc-ouro) 66.66% 100%);
}

/* autores: linha só, sem coluna de rótulos repetidos */
.obj_article_details .item.authors {
  border-top: 1px solid #DDD9CD;
  border-bottom: 1px solid #DDD9CD;
  padding: 16px 0;
  margin-bottom: 24px;
}
.obj_article_details .item.authors ul.authors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}
.obj_article_details .item.authors li {
  margin: 0;
}
.obj_article_details .item.authors .name {
  font-weight: 500;
  font-size: var(--t3);
  color: var(--bsc-tinta);
}
.obj_article_details .item.authors .affiliation {
  display: block;
  font-size: var(--t2);
  color: #6B675C;
}
/* "Author" sob cada nome é ruído: o papel se deduz do contexto */
.obj_article_details .item.authors .userGroup {
  display: none;
}

/* resumo em corpo de leitura */
.obj_article_details .item.abstract h2 {
  font-size: var(--t2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bsc-verde);
  border: none !important;
  padding: 0 !important;
  margin: 0 0 8px;
}
.obj_article_details .item.abstract h2::before { display: none; }
.obj_article_details .item.abstract p {
  font-size: var(--t4);
  line-height: 1.62;
  max-width: 34em;
}

/* coluna lateral: metadados discretos */
.obj_article_details .entry_details .item {
  border-top: 1px solid #DDD9CD;
  padding-top: 8px;
  margin-bottom: 24px;
}
.obj_article_details .entry_details .label {
  font-size: var(--t1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A867B;
  margin-bottom: 4px;
}
.obj_article_details .entry_details .value {
  font-size: var(--t2);
  line-height: 1.45;
}

/* galés (PDF/XML) como botões da casa */
.obj_article_details .galleys_links .obj_galley_link {
  display: inline-block;
  border: 1.5px solid var(--bsc-tinta);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: var(--t2);
  color: var(--bsc-tinta);
  background: none;
  text-decoration: none;
  margin: 0 8px 8px 0;
}
.obj_article_details .galleys_links .obj_galley_link:hover {
  background: var(--bsc-tinta);
  color: #fff;
}

/* chamada do editorial ao lado dos anúncios */
.bsc-editorial-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-left: 3px solid var(--bsc-tinta);
  padding: 2px 0 4px 16px;
  margin-bottom: 8px;
}
.bsc-editorial-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t4);
  line-height: 1.25;
  margin: 2px 0 8px;
  color: var(--bsc-tinta);
}
.bsc-editorial-card p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t3);
  line-height: 1.5;
  color: #55534C;
  margin: 0 0 8px;
}
.bsc-editorial-card .bsc-editorial-by {
  font-size: var(--t2);
  color: #6B675C;
}
.bsc-editorial-card:hover h3 { color: var(--bsc-azul); }
/* o bloco de anúncios usava a divisão própria do OJS, com a divisória num
   ponto que não era borda de coluna. Agora repete o 7/5 do destaque: as duas
   divisórias da página caem na mesma vertical. */
.cmp_announcements {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0 24px;
  align-items: start;
}
.cmp_announcements > a[id],
.cmp_announcements > h2 { grid-column: 1 / -1; }
.cmp_announcements .obj_announcement_summary { grid-column: span 7; }
.cmp_announcements .more { grid-column: span 5; }
/* o tema posiciona este bloco com float + width 65%/35% + padding triplo, e
   desenha DUAS divisórias (um ::before em cada coluna, a 24px uma da outra).
   Zeramos: quem posiciona é a grade, e sobra uma divisória, na calha. */
.cmp_announcements > .obj_announcement_summary,
.cmp_announcements .more {
  float: none !important;
  width: auto !important;
  padding: 24px 0 !important;
}
.cmp_announcements > .obj_announcement_summary::before { display: none !important; }
.cmp_announcements .more::before { left: -12px !important; }
/* o tema ainda sangra o bloco para fora da grade com margens negativas
   (.cmp_announcements.cmp_announcements, -1.43rem de cada lado) */
.cmp_announcements.cmp_announcements {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* legenda da imagem do herói: identifica o pau-brasil */
.bsc-credito {
  position: absolute;
  left: 18px;
  bottom: 14px;
  margin: 0;
  z-index: 2;
  font-size: var(--t2);
  letter-spacing: 0.06em;
  color: #FCFBF8;
  text-shadow: 0 1px 6px rgba(26, 43, 60, 0.75);
}
.bsc-credito em { font-style: italic; }

/* exemplos ilustrativos no modelo de síntese */
.bsc-ex {
  border-left: 3px solid var(--bsc-ouro);
  padding: 2px 0 2px 16px;
  margin: 16px 0 16px;
  font-size: var(--t3);
  line-height: 1.55;
  color: #55534C;
}

/* editorial: linha de abertura e assinatura */
.bsc-standfirst {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t5);
  line-height: 1.4;
  color: var(--bsc-tinta);
  margin: 0 0 24px;
}
.bsc-assinatura {
  border-top: 3px solid var(--bsc-tinta);
  padding-top: 16px;
  margin-top: 32px;
  font-size: var(--t2);
  line-height: 1.6;
}

.bsc-hero2-text {
  position: absolute;
  left: 51.11%;   /* início exato da coluna 7 de 12 */
  /* a rede de linhas comeca a 190px do topo da imagem; o bloco tem de caber
     acima disso. 4% de 360 = 14px de topo, e o paragrafo desce para 17px. */
  top: 4%;
  width: 40.37%;  /* 5 colunas + 4 calhas */
}
.bsc-hero2-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  /* 34, nao 31: numa tela de 1440 a afirmacao central da pagina saia menor
     que o nome da revista logo acima. Nao passa de 34 porque acima disso o
     titulo vira tres linhas e encosta na rede. */
  font-size: 34px;
  line-height: 1.15;
  color: var(--bsc-tinta);
  margin: 0 0 8px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
.bsc-hero2-text p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: var(--t4);
  line-height: 1.45;
  color: #4A4A44;
  margin: 0;
}
/* chapéu do herói: onde entra o estado da revista, para que a manchete possa
   dizer o que a bsc é em vez de anunciar o que ela ainda não tem. */
.bsc-hero2-text .bsc-kicker {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t1);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8E2C1E;
  font-weight: 600;
  margin: 0 0 10px;
}
@media (max-width: 767px) {
  .bsc-hero2-text { position: static; width: auto; padding: 16px 4px 0; }
  .bsc-credito {
    position: static;
    color: #6B675C;
    text-shadow: none;
    padding: 8px 4px 0;
    order: 2;
  }
  .bsc-hero2 { display: flex; flex-direction: column; }
  .bsc-hero2 img { order: 1; }
  /* o texto vem antes do credito: no telefone a legenda da foto estava entre
     a fotografia e a manchete, e empurrava a manchete para fora da tela */
  .bsc-hero2-text { order: 2; padding-top: 14px; }
  .bsc-credito { order: 3; padding-top: 10px; }
}
.bsc-hero-text {
  background: var(--bsc-tinta);
  color: #fff;
  flex: 0 0 40%;
  padding: 44px 40px;
  box-sizing: border-box;
}
.bsc-hero-text h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t7);
  line-height: 1.15;
  color: #fff;
  margin: 0 0 16px;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}
.bsc-hero-text p {
  font-size: var(--t3);
  line-height: 1.55;
  color: #E5E9EE;
  margin: 0;
}
.bsc-hero-img {
  flex: 1;
  background: var(--bsc-verde);
  position: relative;
  overflow: hidden;
}
.bsc-hero-img img,
.bsc-hero-img svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
}
@media (max-width: 767px) {
  .bsc-hero { flex-direction: column; }
  .bsc-hero-text { flex: none; }
  .bsc-hero-img { min-height: 200px; }
}

/* Linhas editoriais — a gramática nature */

/* sem fio órfão nem recuo extra no bloco do herói */
.pkp_structure_main .additional_content {
  border-top: none;
  margin: 0 !important;
  padding: 0 !important;
}

/* filete de cor sob a navegação (o "teal" da nature, aqui em verde) */
.pkp_navigation_primary_row,
nav.pkp_site_nav_menu {
  border-bottom: 4px solid var(--bsc-verde);
}

/* CTAs no menu, padrão Science/nature */
.pkp_navigation_primary a[href*="about/submissions"] {
  border: 1.5px solid #fff;
  border-radius: 999px;
  padding: 8px 16px !important;
  margin: 0 8px;
  line-height: 1;
}
.pkp_navigation_primary a[href*="about/submissions"]:hover {
  background: #fff;
  color: var(--bsc-tinta) !important;
}
.pkp_navigation_primary a[href*="user/register"] {
  color: var(--bsc-ouro) !important;
  letter-spacing: 0.04em;
}

/* respiro interno da barra: nada colado nas bordas */
.pkp_navigation_primary_row .pkp_navigation_primary > li:first-child > a,
.pkp_site_nav_menu .pkp_navigation_primary > li:first-child > a {
  padding-left: 24px;
}
.pkp_navigation_primary_row .pkp_navigation_search_wrapper,
.pkp_navigation_primary_row .pkp_navigation_user_wrapper {
  padding-right: 16px;
}

/* ═══ Cadastre-se, ao lado da busca ═══
   Mesmo tratamento do Search — texto claro sobre a tinta, sem moldura: as
   duas são ferramentas do leitor, na ponta direita da barra. A pílula
   continua sendo só do "Submit manuscript"; duas pílulas na mesma faixa
   competiriam, e a submissão é a ação de maior peso.
   O ouro fica no hover, como em todo link desta barra. */
/* o bloco da busca passa a alinhar os dois em linha: ele era block e
   empilharia o botão sobre o Search */
.pkp_navigation_primary_row .pkp_navigation_search_wrapper {
  display: flex;
  align-items: center;
}
.pkp_navigation_primary_row .bsc-cadastro {
  display: inline-block;
  color: #fff;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 14px;
  margin-right: 4px;
  line-height: 1;
  white-space: nowrap;
}
.pkp_navigation_primary_row .bsc-cadastro:hover,
.pkp_navigation_primary_row .bsc-cadastro:focus {
  color: var(--bsc-ouro);
}
/* no celular a barra vira coluna e o botão acompanha, sem recuo lateral */
@media (max-width: 992px) {
  .pkp_navigation_primary_row .bsc-cadastro {
    display: block;
    padding-left: 24px;
    margin-right: 0;
  }
}

/* régua grossa de tinta abrindo cada seção de conteúdo */
.pkp_structure_main h2:not(.bsc-hero2-text h2),
.page_index_journal .current_issue_title,
.cmp_notification + h2 {
  border-top: 3px solid var(--bsc-tinta);
  padding-top: 8px;
  margin-top: 24px;
}
.bsc-hero2-text h2 {
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* fios finos entre itens de sumário */
.obj_article_summary {
  border-bottom: 1px solid #DDD9CD;
  padding: 16px 0;
  margin: 0;
}
.obj_article_summary:last-child {
  border-bottom: none;
}

/* títulos de artigo sublinhados, como manchete da nature */
.obj_article_summary .title a,
.obj_issue_summary .title a {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.obj_article_summary .title a:hover {
  color: var(--bsc-azul);
}

/* ————— A cor no lugar da maiúscula —————
   nome e sigla em texto corrido: iniciais coloridas, resto na tinta */
.bsc-marca em {
  font-style: inherit;
  font-weight: 700; /* a inicial carrega o peso que a maiúscula carregaria */
}
.bsc-marca em.is-b { color: var(--bsc-azul); }
.bsc-marca em.is-s { color: var(--bsc-verde); }
.bsc-marca em.is-c { color: var(--bsc-ouro-texto); }

/* dentro de link ou título, a cor da inicial prevalece sobre a do contexto */
a .bsc-marca em.is-b,
h1 .bsc-marca em.is-b,
h2 .bsc-marca em.is-b,
h3 .bsc-marca em.is-b { color: var(--bsc-azul); }
a .bsc-marca em.is-s,
h1 .bsc-marca em.is-s,
h2 .bsc-marca em.is-s,
h3 .bsc-marca em.is-s { color: var(--bsc-verde); }
a .bsc-marca em.is-c,
h1 .bsc-marca em.is-c,
h2 .bsc-marca em.is-c,
h3 .bsc-marca em.is-c { color: var(--bsc-ouro-texto); }

/* no rodapé escuro, o ouro e o verde precisam clarear */
.pkp_structure_footer_wrapper .bsc-marca em.is-s { color: #57c295; }
.pkp_structure_footer_wrapper .bsc-marca em.is-b { color: #6ea8e8; }
.pkp_structure_footer_wrapper .bsc-marca em.is-c { color: #f0c04a; }

/* o nome no rodapé é link, e link no rodapé é ouro — mas aqui a palavra
   inteira em ouro apaga o efeito: quem carrega a cor são as iniciais.
   O corpo do nome volta ao branco e o contraste passa a ser das três letras. */
.pkp_structure_footer_wrapper a .bsc-marca,
.pkp_structure_footer_wrapper .bsc-marca { color: #fff; }

/* o corpo do rodapé vinha em 14px, degrau que a escala não tem */
.pkp_structure_footer_wrapper .pkp_footer_content { font-size: var(--t3); }

/* o nome está cadastrado no OJS em caixa alta (e assim deve continuar nos
   metadados); no rodapé ele volta à caixa baixa da marca só na exibição */
.pkp_structure_footer_wrapper .bsc-marca { text-transform: lowercase; }

/* o tema dá 30px de padding ao bloco do rodapé e mais 14px de margem ao
   parágrafo: 108px de caixa para uma linha de texto. Com o rodapé enxuto
   (só o nome e a assinatura do OJS), isso vira um vão. */
.pkp_footer_content { padding: 0; }
.pkp_footer_content p { margin: 0; }
.pkp_brand_footer { margin-top: 8px; }

/* ————— Medida de leitura nas páginas de texto —————
   A grade de 1080 serve para o herói, as listas e as fichas de artigo, mas
   não para prosa: a 14px o parágrafo saía com 146 caracteres por linha, mais
   que o dobro do confortável, e o olho perde o retorno da linha. Aqui o texto
   das páginas institucionais volta a 68 caracteres. Vale só para .pkp_page_about
   — a home, os sumários e as páginas de artigo continuam usando a grade cheia. */
.pkp_page_about .pkp_structure_main p,
.pkp_page_about .pkp_structure_main ul,
.pkp_page_about .pkp_structure_main ol,
.pkp_page_about .pkp_structure_main h2,
.pkp_page_about .pkp_structure_main h3 {
  max-width: 68ch;
}
.pkp_page_about .pkp_structure_main p,
.pkp_page_about .pkp_structure_main li {
  font-size: 15.5px;
  line-height: 1.62;
}

/* Com a home ainda sem artigos, a página termina antes do fim da janela e o
   rodapé ficava suspenso no meio, com branco embaixo. A coluna flexível empurra
   o rodapé para a base sem precisar de altura fixa — e volta ao fluxo normal
   assim que houver conteúdo suficiente. */
.pkp_structure_page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.pkp_structure_content { flex: 1 0 auto; }
.pkp_structure_footer_wrapper { margin-top: auto; padding: 22px 0 18px; }

/* e o vão entre o banner e o rodapé: eram 32 de margem do herói mais 60 de
   fundo do miolo, 92px de nada */
.pkp_structure_main { padding-bottom: 28px; }
.bsc-hero2 { margin-bottom: 16px; }

/* o tema alinha o rodapé por margem fixa de 60px — 1160 de largura, contra os
   1080 da grade. O nome e a assinatura do OJS ficavam para fora dos limites do
   banner e do texto. Aqui o rodapé passa a usar a mesma grade do resto. */
.pkp_structure_footer {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
}

/* ————— Assinatura BSC: o fio tricolor —————
   substitui as réguas monocromáticas; eco das iniciais e das linhas do herói */
.bsc-thread,
.pkp_structure_main h2::before,
.bsc-mapa::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%,
    var(--bsc-verde) 33.33% 66.66%,
    var(--bsc-ouro) 66.66% 100%);
}
.pkp_structure_main h2 {
  border-top: none !important;
  padding-top: 0 !important;
}
.pkp_structure_main h2::before {
  width: 92px;
  margin-bottom: 8px;
}
/* mesma abertura de seção do "Current Issue": fio tricolor, título, linha
   grossa. Antes o fio fechava o destaque e o mapa abria com outra régua
   grossa — dois separadores empilhados, em ordem trocada entre as seções. */
.bsc-mapa::before {
  width: 92px;
  margin-bottom: 8px;
}

/* manchetes sem sublinhado — a marca deles fica com eles */
.bsc-lead h3,
.bsc-card h4,
.obj_article_summary .title a,
.bsc-hero2-text h2 {
  text-decoration: none !important;
}
.bsc-lead h3,
.bsc-card h4 {
  position: relative;
}

/* rótulo de gênero com cor por formato */
.bsc-kind {
  position: relative;
  padding-left: 24px;
}
.bsc-kind::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.bsc-card .bsc-kind,
.bsc-lead .bsc-kind {
  color: var(--bsc-verde);
}
.bsc-kind.is-snapshot {
  color: var(--bsc-ouro);
}

/* Vitrine editorial do fascículo (destaque + cartões) */
.bsc-showcase {
  margin: 8px 0 40px;
}
.bsc-kind {
  display: inline-block;
  font-size: var(--t1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bsc-verde);
  margin-bottom: 8px;
}
.bsc-lead,
.bsc-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.bsc-lead {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  /* topo, não centro: o resto da página inteira pendura o texto a partir de
     uma linha de topo (cartões, territórios do mapa). Centrado, o destaque
     era o único bloco em que o rótulo não alinhava com nada. */
  align-items: start;
  padding-bottom: 24px;
  margin-bottom: 8px;
}
.bsc-lead-img img,
.bsc-card-img img {
  width: 100%;
  display: block;
}
.bsc-lead-img img {
  height: 260px;
  object-fit: cover;
}
.bsc-card-img img {
  height: 130px;
  object-fit: cover;
}
.obj_issue_toc .sections {
  margin-top: 24px !important;
}
.current_issue .heading .published {
  font-size: var(--t2);
  color: #6B675C;
}
.bsc-lead h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t6);
  line-height: 1.22;
  margin: 0 0 8px;
  color: var(--bsc-tinta);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.bsc-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
}
.bsc-card h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t4);
  line-height: 1.28;
  margin: 0 0 8px;
  color: var(--bsc-tinta);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.bsc-card-img {
  margin-bottom: 8px;
}
.bsc-authors {
  font-size: var(--t2);
  line-height: 1.45;
  color: #6B675C;
  margin: 0;
}
.bsc-lead:hover h3,
.bsc-card:hover h4 {
  color: var(--bsc-azul);
}
@media (max-width: 767px) {
  .bsc-lead {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .bsc-lead h3 { font-size: var(--t5); }
}

/* Rodapé */
.pkp_structure_footer_wrapper {
  background: var(--bsc-tinta);
  color: #fff;
  padding: 16px 0;
}
.pkp_structure_footer_wrapper a {
  color: var(--bsc-ouro);
}
/* nota de fomento no rodapé */
.bsc-fomento {
  font-size: var(--t2);
  line-height: 1.55;
  color: #C9CFD6;
  max-width: 760px;
  margin: 0;
}
.bsc-fomento em { font-style: italic; }

.pkp_brand_footer {
  padding: 0;
  height: auto;
  text-align: right;
}
.pkp_brand_footer img {
  height: 34px !important;
  width: auto !important;
  filter: brightness(0) invert(1); /* letras brancas sobre a tinta */
  opacity: 0.7;
  transition: opacity 0.2s;
}
.pkp_brand_footer a:hover img {
  opacity: 1;
}

/* texto completo embutido na página do artigo */
.bsc-inline {
  margin-top: 32px;
  border-top: 3px solid var(--bsc-tinta);
  padding-top: 24px;
}
.bsc-inline .bsc-corpo {
  max-width: 34em;
  grid-column: auto !important;
  grid-row: auto !important;
}
.bsc-inline .bsc-refs {
  border-top: 1px solid #DDD9CD;
  margin-top: 24px;
  padding-top: 16px;
}

/* formulários (busca, submissão): botão e avisos na paleta da casa */
button.submit,
input[type="submit"],
.pkp_form button[type="submit"] {
  background: var(--bsc-tinta) !important;
  border-color: var(--bsc-tinta) !important;
  color: #fff !important;
}
button.submit:hover,
input[type="submit"]:hover {
  background: var(--bsc-azul) !important;
  border-color: var(--bsc-azul) !important;
}
.cmp_notification,
.pkp_notification {
  background: #F7F3EA;
  border-left: 3px solid var(--bsc-ouro);
  border-radius: 0;
  color: #55534C;
}
/* campos de texto com a mesma linha dos filetes */
.pkp_search input[type="text"],
.pkp_form input[type="text"],
.pkp_form select {
  border-color: #DDD9CD;
}

/* ————— O mapa de campos —————
   fundo branco; a distinção vem de UM campo contínuo de linhas e pontos
   atravessando a seção — o mesmo sistema do banner, não um ornamento por cartão. */
.bsc-mapa {
  margin-top: 32px;
}
.bsc-mapa-topo {
  display: flex; align-items: baseline; gap: 24px; flex-wrap: wrap;
  border-bottom: 3px solid var(--bsc-tinta);
  padding: 0 0 16px;
  margin-bottom: 24px;
}
.bsc-mapa-topo h3 {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: var(--t5);
  margin: 0; color: var(--bsc-tinta);
}
.bsc-mapa-topo p { font-size: var(--t2); color: #9C9787; margin: 0; }

.bsc-mapa-territorios {
  position: relative;
  /* a MESMA grade de 12 colunas do destaque e dos cartões: 3 territórios por
     fileira, e as bordas se repetem descendo a página */
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px 24px;
  align-items: start;
  padding-top: 4px;
}
.bsc-tile {
  grid-column: span 4;
  min-width: 0;
  display: flex; flex-direction: column; gap: 8px;
  background: transparent;
}

/* cada território marcado por um ponto, como um nó na linha */
a.bsc-tile-campo {
  font-size: var(--t1); letter-spacing: 0.14em; text-transform: uppercase;
  color: #8E2C1E; text-decoration: none;
  display: flex; align-items: center; gap: 8px;
}
a.bsc-tile-campo::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #8E2C1E; flex: none;
}
a.bsc-tile-campo:hover { color: var(--bsc-tinta); }
a.bsc-tile-campo:hover::before { background: var(--bsc-tinta); }
.bsc-tile-art {
  font-family: 'Fraunces', Georgia, serif; font-size: var(--t3); line-height: 1.26;
  color: var(--bsc-tinta); text-decoration: none;
}
.bsc-tile-art:hover { color: var(--bsc-azul); }

/* territórios abertos: pontos vazados na mesma linha de raciocínio */
.bsc-mapa-abertos {
  margin: 32px 0 0; padding-top: 16px; border-top: 1px solid #EDE9DF;
  font-size: var(--t2); line-height: 2.2; color: #9C9787;
}
.bsc-mapa-abertos .rot {
  font-size: var(--t1); letter-spacing: 0.14em; text-transform: uppercase;
  color: #9C9787; margin-right: 8px;
}
a.bsc-aberto {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 16px 4px 0; color: #8A867B; font-size: var(--t2); text-decoration: none;
}
a.bsc-aberto::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid #C0562F; opacity: .55; flex: none;
}
a.bsc-aberto:hover { color: #8E2C1E; }
a.bsc-aberto:hover::before { background: #C0562F; opacity: 1; }
.bsc-aberto-cta { font-size: var(--t2); color: var(--bsc-azul); margin-left: 4px; }

/* faixa de serviço ao leitor, no espaço em branco à direita do logotipo.
   Fio fino acima e separadores verticais: gramática editorial, não caixa. */
.bsc-util {
  position: absolute;
  right: 0;
  top: 44px;
  display: flex;
  align-items: center;
  font-size: var(--t2);
  letter-spacing: 0.02em;
  padding-top: 8px;
  border-top: 1px solid #DDD9CD;
}
.bsc-util > * { padding: 0 16px; }
.bsc-util > * + * { border-left: 1px solid #E4E0D5; }
.bsc-util > :last-child { padding-right: 0; }
.bsc-util a {
  color: #6B675C;
  text-decoration: none;
}
.bsc-util a:hover { color: var(--bsc-azul); }
.bsc-util .bsc-util-oa {
  color: var(--bsc-verde);
  font-size: var(--t1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* ═══ A faixa de servico no telefone ═══
   Ela era escondida inteira abaixo de 900px. Com isso sumiam as duas unicas
   coisas que o leitor de celular precisa achar sem abrir menu: trocar de
   idioma e submeter. Um leitor brasileiro que caisse na versao em ingles
   ficava sem saida — e o telefone e a maioria do trafego.
   No telefone a faixa desce para baixo da marca, deixa de ser absoluta e
   guarda so idioma e submissao; alertas, RSS, contato e login continuam no
   menu, onde ja estavam. */
@media (max-width: 900px) {
  .bsc-util {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 16px 10px;
    padding-top: 10px;
    border-top: 1px solid #DDD9CD;
  }
  .bsc-util > * { padding: 0; }
  .bsc-util > * + * { border-left: none; }
  .bsc-util > a:not(.bsc-util-submeter),
  .bsc-util > .bsc-util-oa,
  .bsc-util > .bsc-util-login { display: none; }
  .bsc-util .bsc-idioma { font-size: 12px; letter-spacing: 0.1em; }
  .bsc-util .bsc-util-submeter {
    display: inline-block;
    margin-left: 0;
    padding: 7px 18px;
    border: 1px solid var(--bsc-tinta);
    border-radius: 999px;
    font-size: 13px;
    color: var(--bsc-tinta);
    white-space: nowrap;
  }
}
/* no desktop o menu ja tem "Submit manuscript" — nao repetir */
@media (min-width: 901px) { .bsc-util .bsc-util-submeter { display: none; } }

/* ═══ O botao do menu estava desenhado em cima da marca ═══
   O toggle do tema ocupa x:0-40 / y:8-48 e o logotipo comeca em x:20 — os
   dois se sobrepunham exatamente sobre o "b" de brazilian. */
@media (max-width: 992px) {
  .pkp_site_nav_toggle { position: relative; z-index: 3; }
  .pkp_site_name_wrapper { padding-left: 44px; }
}

/* seletor de idioma: duas siglas, o corrente marcado.
   Fica à esquerda da faixa porque é escolha de leitura, não serviço. */
.bsc-util .bsc-idioma {
  display: inline-flex;
  gap: 6px;
  /* --t2, nao --t1: os vizinhos da faixa estao em 12,5 e este vinha um
     degrau abaixo deles sendo o unico CONTROLE da barra. */
  font-size: var(--t2);
  letter-spacing: 0.09em;
}
.bsc-util .bsc-idioma b { font-weight: 500; }
/* #787266, nao #A8A296: o cinza anterior dava 2,45:1 sobre o papel, contra
   os 4,5 exigidos. Este e o primeiro cinza da mesma familia que passa
   (4,61:1). E o unico jeito de voltar ao ingles para quem caiu no
   portugues — precisa ser visto por quem enxerga mal, nao apesar disso. */
.bsc-util .bsc-idioma a { color: #787266; }

/* o idioma corrente sai nas cores da sua bandeira, letra a letra — mesmo
   gesto das iniciais da marca. O outro fica cinza e só se colore ao passar
   o cursor, para que a diferença entre "onde estou" e "para onde vou"
   continue visível. As matizes do Brasil vêm escurecidas: o amarelo da
   bandeira dá 1,3:1 sobre papel creme, e o verde 3,7:1. */
.bsc-util .bsc-idioma .bsc-en span:first-child,
.bsc-util .bsc-idioma .bsc-en:hover span:first-child { color: var(--bsc-azul); }
.bsc-util .bsc-idioma .bsc-en span:last-child,
.bsc-util .bsc-idioma .bsc-en:hover span:last-child  { color: #C8102E; }
.bsc-util .bsc-idioma .bsc-pt span:first-child,
.bsc-util .bsc-idioma .bsc-pt:hover span:first-child { color: var(--bsc-verde); }
.bsc-util .bsc-idioma .bsc-pt span:last-child,
.bsc-util .bsc-idioma .bsc-pt:hover span:last-child  { color: #936E12; }
.bsc-util .bsc-idioma a span { color: inherit; }
.bsc-util .bsc-idioma b + a::before,
.bsc-util .bsc-idioma a + b::before {
  content: '·';
  color: #D5D0C2;
  margin-right: 6px;
}

/* botão de login na faixa de serviço */
.bsc-util .bsc-util-login {
  border: 1px solid #C9C3B2;
  border-radius: 999px;
  padding: 5px 16px;
  color: var(--bsc-tinta);
  margin-left: 16px;
}
.bsc-util .bsc-util-login:hover {
  background: var(--bsc-tinta);
  border-color: var(--bsc-tinta);
  color: #fff;
}
.bsc-util > .bsc-util-login { border-left: 1px solid #C9C3B2; }
/* a navegação de usuário do tema sai do caminho */
.pkp_navigation_user_wrapper { display: none !important; }

/* campos e áreas abertas são navegáveis */
a.bsc-tile-campo { text-decoration: none; }
a.bsc-tile-campo:hover { color: var(--bsc-azul); }
a.bsc-aberto { text-decoration: none; transition: none; }
a.bsc-aberto:hover {
  border-color: var(--bsc-azul);
  color: var(--bsc-azul);
}

/* a rede que liga os campos: atrás do texto, fina e discreta */
.bsc-mapa-territorios { position: relative; }
.bsc-rede {
  position: absolute;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 0;
}
.bsc-mapa-territorios .bsc-tile { position: relative; z-index: 1; }


/* ═══ a grade nos tamanhos menores ═══
   os span de 12 colunas precisam ser desfeitos, senão vazam da coluna única */
@media (max-width: 1023px) {
  .bsc-tile { grid-column: span 6; }
}
@media (max-width: 767px) {
  .bsc-lead,
  .bsc-grid,
  .bsc-mapa-territorios,
  .cmp_announcements { grid-template-columns: 1fr !important; }
  .bsc-lead-img,
  .bsc-lead-text,
  .bsc-card,
  .bsc-tile,
  .cmp_announcements > .obj_announcement_summary,
  .cmp_announcements .more { grid-column: 1 / -1 !important; }
  .cmp_announcements .more::before { display: none !important; }
  .cmp_announcements .more { border-top: 1px solid #E4E0D5; }
}


/* ═══ Corpo editorial ═══
   a página vinha como lista corrida à esquerda, ocupando 3 das 12 colunas e
   deixando o resto vazio. Passa a usar a MESMA grade do resto do site: três
   pessoas por fileira, cada uma em 4 colunas. */
.user_listing {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0 0 40px;
  padding: 0;
}
.user_listing > li {
  /* dois por fileira: com 4 pessoas por grupo a fileira fecha, sem órfão —
     e o nome continua sendo o objeto principal, com o retrato no papel de
     reconhecimento e não de vitrine */
  grid-column: span 6;
  min-width: 0;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 16px;
  align-items: start;
  padding-top: 16px;
  border-top: 1px solid #E4E0D5;
}
.user_listing > li > img,
.user_listing .bsc-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 88px;
}
.user_listing > li > img { object-fit: cover; }
.user_listing .bsc-avatar {
  background: #EEF2F8;
  border: 1px solid #DDE4EE;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 25px;
  letter-spacing: 0.02em;
  color: var(--bsc-azul);
}
.user_listing .bsc-pessoa { min-width: 0; }
.user_listing .name {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  /* um degrau abaixo: com o nome em 15px o contraste com a afiliação passa a
     vir do TIPO (serifa x sans) e não do corpo — mais denso, padrão nature */
  font-size: var(--t3);
  line-height: 1.25;
  color: var(--bsc-tinta);
  margin-bottom: 4px;
}
.user_listing .bsc-campo-membro {
  display: block;
  margin-top: 3px;
  font-size: var(--t1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8E2C1E;
}
.user_listing .affiliation {
  display: block;
  font-size: var(--t2);
  line-height: 1.4;
  color: #6B675C;
}
.user_listing .bsc-papel {
  display: block;
  font-size: var(--t1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8E2C1E;
  margin-bottom: 4px;
}
.user_listing .date_start {
  display: block;
  font-size: var(--t1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9C9787;
  margin-bottom: 4px;
}
/* ═══ Especificidade: quatro classes, não três ═══
   As regras acima liberavam o expediente da medida de leitura com a MESMA
   especificidade da regra que a impõe (.pkp_page_about .pkp_structure_main
   > .page, 530px) — e ficam ANTES dela no arquivo. Em empate vence a
   última, entao a liberacao nao valia: o seletor casava e o max-width
   computava 530px assim mesmo, deixando uns 550px de papel em branco a
   direita da lista.
   Acrescentar .page ao seletor sobe para quatro classes e a ordem deixa de
   importar. Repetido para a propria lista, pelo mesmo motivo. */
.pkp_page_about .pkp_structure_main > .page.page_masthead { max-width: none; }
.pkp_page_about .pkp_structure_main .user_listing.bsc-conselho { max-width: none; }

/* A chefia sao duas pessoas numa grade de tres: a terceira celula ficava
   vazia e a fileira parecia interrompida. Meia largura para cada uma fecha
   a linha. As demais secoes seguem em tres, que e onde a afiliacao cabe. */
@media (min-width: 1024px) {
  .pkp_page_about .user_listing.bsc-conselho:first-of-type > li {
    grid-column: span 6;
  }
}

/* ═══ O expediente não é prosa ═══
   A página do conselho é uma .page, e .page carrega a medida de leitura:
   530px no contêiner e 68ch (≈473px) em cada bloco. Isso é certo para texto
   corrido e errado para uma listagem — espremia catorze pessoas numa coluna
   de 473px, em duas por fileira, com a página em 2820px de altura.
   Soltas as duas travas, cabem TRÊS por fileira com o item e o texto do
   mesmo tamanho de antes (224px e 120px), e a página cai para 1919px.
   A especificidade precisa empatar com as regras da medida de leitura
   (.pkp_page_about .pkp_structure_main …); escrito com menos, perde. */
.pkp_page_about .pkp_structure_main > .page_masthead { max-width: none; }
.pkp_page_about .pkp_structure_main .user_listing { max-width: none; }
@media (min-width: 1024px) {
  .pkp_page_about .user_listing > li { grid-column: span 4; }
}

/* ═══ O retrato em cima, e não ao lado ═══
   Com tres por fileira o item tem 224px. Lado a lado, o avatar come 88 mais
   a calha e sobram 120px para o texto — largura em que nenhum nome de
   universidade brasileira cabe: "Federal University of Technology – Paraná"
   descia em seis linhas e a entrada virava uma tira vertical.
   Empilhado, o texto recebe os 224px inteiros e a afiliacao fecha em duas
   linhas. O item fica mais alto (156 -> 219px) e a pagina tambem; e troca
   que vale, porque o que se ganha e a leitura do nome.
   Abaixo de 1024px volta a ser um por fileira, e ai o lado a lado cabe. */
@media (min-width: 1024px) {
  .pkp_page_about .user_listing > li { display: block; }
  .pkp_page_about .user_listing .bsc-avatar { margin: 0 0 12px; }
}

@media (max-width: 1023px) {
  .user_listing > li { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .user_listing { grid-template-columns: 1fr; }
  .user_listing > li { grid-column: 1 / -1; }
}


/* ═══ Página do artigo: uma grade explícita ═══
   O tema monta esta página com a grade antiga de porcentagem e margens
   NEGATIVAS: o main_entry começava 30px à esquerda da mancha, o resumo
   alinhava em outro ponto e a placa em um terceiro — três margens
   esquerdas na mesma página, e 250px de vão morto à direita. */
.obj_article_details .row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  gap:0 46px;
  align-items:start;
  margin:0 !important;    /* a grade antiga puxava a linha 30px para fora */
  padding:0 !important;
}
.obj_article_details .main_entry,
.obj_article_details .entry_details{
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
}
/* no DOM a lateral vem ANTES do corpo: sem posição explícita a grade
   inverteria as colunas */
.obj_article_details .main_entry{grid-column:1;grid-row:1}
.obj_article_details .entry_details{grid-column:2;grid-row:1}
/* tudo do corpo passa a nascer na MESMA vertical */
.obj_article_details .item.abstract,
.obj_article_details .item.abstract p,
.obj_article_details .item.abstract h2,
.bsc-inline,
.bsc-inline .bsc-corpo,
.bsc-inline .bsc-placa,
.bsc-inline section{
  margin-left:0 !important;
  padding-left:0 !important;
}
.bsc-inline .bsc-corpo{max-width:none !important}
@media(max-width:900px){
  .obj_article_details .row{grid-template-columns:1fr;gap:26px}
  .obj_article_details .main_entry,
  .obj_article_details .entry_details{grid-column:1 !important;grid-row:auto !important}
}

/* O campo "Homepage Image" do OJS serve aqui só como canal de upload: é o
   único jeito de pôr um arquivo em public/journals/<id>/ sem gerenciador de
   arquivos. O tema desenharia a imagem sozinho, solta no topo da home; quem
   a exibe é o nosso bloco do herói, com crédito e chamada. */
.homepage_image { display: none; }

/* ————— Ficha de essenciais nas páginas de texto —————
   A medida de 68 caracteres deixa metade da largura vazia. Em vez de esticar
   o texto (que é o que torna 2.000 palavras ilegíveis), a coluna da direita
   recebe o que o autor procura antes de decidir submeter: extensão, prazo,
   custo, licença. É a mesma solução da npj — e o painel acompanha a rolagem,
   porque a pergunta "quanto custa?" surge no meio da leitura, não no fim. */
.pkp_page_about .pkp_structure_main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 0 64px;
  align-items: start;
}
.pkp_page_about .pkp_structure_main > .page {
  grid-column: 1;
  /* O primeiro filho da grade é o <a> invisível de "pular para o conteúdo",
     que o OJS insere e que ocupa a linha 1. Sem declarar a linha aqui, o
     texto ia para a linha 2 e nascia 736px abaixo da lateral — o branco no
     alto da coluna esquerda. */
  grid-row: 1;
  min-width: 0;
  /* Em px, e nao em ch, de proposito: `ch` se resolve pelo corpo do proprio
     .page — 15px — enquanto os paragrafos dentro dele tem 18. A coluna ficava
     dimensionada para um tamanho de letra que ela nao usa: 473px, que a 18px
     davam menos de 60 caracteres. 530px devolvem a medida certa. */
  max-width: 530px;
}

/* A grade acima está presa a .pkp_page_about, mas o script injeta a coluna
   lateral também em páginas estáticas — ética hoje, revisão por pares depois —
   cuja classe é pkp_page_<caminho>. Em vez de listar cada uma, a grade se liga
   onde a lateral existir. */
.pkp_structure_main:has(> .bsc-lado) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 296px;
  gap: 0 64px;
  align-items: start;
}
.pkp_structure_main:has(> .bsc-lado) > .page {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  max-width: 530px;
}
.pkp_structure_main:has(> .bsc-lado) > .page p,
.pkp_structure_main:has(> .bsc-lado) > .page li {
  font-size: 15.5px;
  line-height: 1.62;
}
@media (max-width: 1023px) {
  .pkp_structure_main:has(> .bsc-lado) { display: block; }
}

.bsc-ficha::before {
  content: '';
  display: block;
  width: 92px;
  height: 3px;
  margin-bottom: 18px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%, var(--bsc-verde) 33.33% 66.66%, var(--bsc-ouro) 66.66% 100%);
}
.bsc-ficha h2 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E2C1E;
  font-weight: 600;
  margin: 0 0 14px;
}
.bsc-ficha dl { margin: 0; }
.bsc-ficha dl > div {
  padding: 11px 0;
  border-top: 1px solid #E4E0D5;
}
.bsc-ficha dl > div:first-child { border-top: none; padding-top: 0; }
.bsc-ficha dt {
  font-size: var(--t1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8E8878;
  margin-bottom: 3px;
}
.bsc-ficha dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  line-height: 1.25;
  color: var(--bsc-tinta);
}
.bsc-ficha dd small {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t2);
  letter-spacing: 0;
  color: #6B675C;
  margin-top: 2px;
}
.bsc-ficha .bsc-ir {
  display: inline-block;
  margin-top: 22px;
  border: 1.5px solid var(--bsc-tinta);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  color: var(--bsc-tinta);
  text-decoration: none;
}
.bsc-ficha .bsc-ir:hover { background: var(--bsc-tinta); color: #fff; }

/* abaixo de 1023px a ficha desce para o fim do texto, em linha */
@media (max-width: 1023px) {
  .pkp_page_about .pkp_structure_main { display: block; }
  .pkp_page_about .pkp_structure_main > .page { max-width: 530px; }
  .bsc-ficha { position: static; margin: 40px 0 0; max-width: 68ch; }
}

/* o CSS já desenha o filete tricolor em todo h2 do miolo — dentro da ficha
   isso duplicava a régua que ela mesma traz */
.bsc-ficha h2::before { display: none !important; content: none !important; }

/* ————— Figura da página About —————
   Aqui o leitor não tem tarefa: está decidindo se a revista lhe interessa.
   O espaço da direita recebe a árvore que dá nome ao país e à marca, com a
   legenda científica que a página inteira justifica. Mesma imagem do banner,
   já em cache, recortada na vertical para mostrar a casca. */
.bsc-figura {
  grid-column: 2;
  position: sticky;
  top: 24px;
  margin-top: 64px;
}
.bsc-figura img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: 22% center;
  display: block;
}
.bsc-figura figcaption {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: var(--t2);
  line-height: 1.5;
  color: #6B675C;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #E4E0D5;
}
.bsc-figura figcaption b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: var(--t4);
  color: var(--bsc-tinta);
  margin-bottom: 4px;
}
@media (max-width: 1023px) {
  .bsc-figura { position: static; margin: 40px 0 0; max-width: 68ch; }
  .bsc-figura img { height: 220px; }
}

/* ————— Coluna lateral das páginas de texto ————— */
.bsc-lado {
  grid-column: 2;
  /* A linha precisa ser declarada. Sem isto a grade empurra a lateral para
     uma linha DEPOIS do texto — e em página longa ela só aparecia inteira
     ao rolar até o fim. Fixar a linha 1 a põe ao lado do texto, e só então
     o sticky tem onde agir.
     Não usar `1 / -1`: sem grid-template-rows declarado, o -1 aponta para a
     última linha explícita, que não existe, e o texto vai parar embaixo. */
  grid-row: 1;
  align-self: start;
  position: sticky;
  top: 24px;
  margin-top: 64px;
  /* ═══ Barra mais alta que a janela ═══
     Isto e o que fazia a lateral "travar". O sticky prende o TOPO da barra
     a 24px da borda; se a barra e mais alta que a janela, tudo o que passa
     da altura da janela fica inalcancavel — ela so termina de aparecer
     quando a pagina acaba e a barra rola junto com o texto. Era o sintoma
     exato: "so da para ve-la inteira rolando ate o fim".
     Medido em /about a 1280x720: barra de 1201px numa janela de 720 —
     529px presos. E nao era o grid-row (esse ja estava certo, a barra
     nascia na linha 1, ao lado do texto).
     Limitar a altura a janela e deixar a propria barra rolar por dentro
     resolve em qualquer altura de tela e em qualquer pagina — e o conteudo
     dela muda de pagina para pagina. Onde couber, nao aparece rolagem
     nenhuma. */
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #D5D0C2 transparent;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
}
.bsc-lado section + section,
.bsc-lado .bsc-figura + section { margin-top: 36px; }
.bsc-lado h3 {
  font-family: 'Source Sans 3', sans-serif !important;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E2C1E;
  font-weight: 600;
  margin: 0 0 12px;
}
.bsc-lado h3::before {
  content: '';
  display: block;
  width: 92px;
  height: 3px;
  margin-bottom: 14px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%, var(--bsc-verde) 33.33% 66.66%, var(--bsc-ouro) 66.66% 100%);
}
.bsc-lado ul { list-style: none; margin: 0; padding: 0; }
.bsc-lado li { border-top: 1px solid #E4E0D5; }
.bsc-lado li:first-child { border-top: none; }
.bsc-lado li a {
  display: block;
  padding: 10px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 16px;
  line-height: 1.3;
  color: var(--bsc-tinta);
  text-decoration: none;
}
.bsc-lado li a:hover { color: var(--bsc-azul); }
.bsc-lado li.aqui a { color: #8E8878; }
.bsc-lado li.aqui a::after { content: ' \00B7'; color: var(--bsc-ouro); }
.bsc-lado dl { margin: 0; }
.bsc-lado dl > div { padding: 10px 0; border-top: 1px solid #E4E0D5; }
.bsc-lado dl > div:first-child { border-top: none; padding-top: 0; }
.bsc-lado dt {
  font-size: var(--t1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8E8878;
  margin-bottom: 3px;
}
.bsc-lado dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  line-height: 1.25;
  color: var(--bsc-tinta);
}
.bsc-lado dd small {
  display: block;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t2);
  letter-spacing: 0;
  color: #6B675C;
  margin-top: 2px;
}
.bsc-lado .bsc-ir {
  display: inline-block;
  margin-top: 20px;
  border: 1.5px solid var(--bsc-tinta);
  border-radius: 999px;
  padding: 9px 20px;
  font-size: 13.5px;
  color: var(--bsc-tinta);
  text-decoration: none;
}
.bsc-lado .bsc-ir:hover { background: var(--bsc-tinta); color: #fff; }
.bsc-lado .bsc-figura { position: static; margin: 0; }
@media (max-width: 1023px) {
  /* abaixo de 1023px a lateral desce para o fim do texto e volta a ser um
     bloco comum: sem sticky, o limite de altura viraria uma caixinha rolante
     no meio da pagina — tem de ser desfeito aqui. */
  .bsc-lado { position: static; margin: 40px 0 0; max-width: 68ch;
              max-height: none; overflow: visible; }
}

/* ————— Abertura editorial da home —————
   O editorial de lançamento entra como item principal, não como página inteira:
   manchete, entrada e dois parágrafos, com o texto completo em /editorial.
   Mesma medida de leitura das páginas de texto — 68 caracteres — e a assinatura
   na coluna da direita, onde a ficha e a figura vivem nas outras páginas. */
.bsc-abertura {
  max-width: 1080px;
  margin: 8px auto 40px;
  display: grid;
  grid-template-columns: minmax(0, 68ch) 1fr;
  gap: 0 64px;
  align-items: start;
}
.bsc-abertura .txt { grid-column: 1; min-width: 0; }
.bsc-abertura .rot {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E2C1E;
  font-weight: 600;
  margin: 0 0 10px;
}
.bsc-abertura .rot::before {
  content: '';
  display: block;
  width: 92px;
  height: 3px;
  margin-bottom: 14px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%, var(--bsc-verde) 33.33% 66.66%, var(--bsc-ouro) 66.66% 100%);
}
.bsc-abertura h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t7);
  line-height: 1.15;
  margin: 0 0 14px;
  max-width: 20em;
}
.bsc-abertura h2::before { display: none !important; content: none !important; }
.bsc-abertura p { font-size: 16px; line-height: 1.62; margin: 0 0 14px; }
.bsc-abertura p.lead { font-size: 18.5px; line-height: 1.5; }
.bsc-abertura .mais {
  font-family: 'Source Sans 3', sans-serif;
  font-size: 14px;
  color: var(--bsc-azul);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.bsc-abertura .assina {
  grid-column: 2;
  margin-top: 64px;
  padding-top: 12px;
  border-top: 1px solid #E4E0D5;
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t2);
  color: #6B675C;
}
/* o editor do OJS troca <b> por <strong> ao salvar — a regra precisa dos dois.
   E os nomes viram bloco, para caírem em linhas separadas mesmo sem <br>. */
.bsc-abertura .assina b,
.bsc-abertura .assina strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--bsc-tinta);
}
.bsc-abertura .assina span { display: block; margin-top: 4px; }
@media (max-width: 1023px) {
  .bsc-abertura { display: block; }
  .bsc-abertura .assina { margin-top: 28px; max-width: 68ch; }
}

/* ————— Faixa de campos da home —————
   O que o texto afirma — "uma gama excepcional de assuntos" — a faixa mostra.
   Duas fileiras de quatro na grade de 1080; abaixo de 1023px vira duas colunas. */
.bsc-campos {
  max-width: 1080px;
  margin: 8px auto 44px;
}
.bsc-campos h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t5);
  margin: 0 0 18px;
}
.bsc-campos h2::before {
  content: '';
  display: block;
  width: 92px;
  height: 3px;
  margin-bottom: 14px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 33.33%, var(--bsc-verde) 33.33% 66.66%, var(--bsc-ouro) 66.66% 100%);
}
.bsc-campos ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 20px;
}
.bsc-campos li { margin: 0; min-width: 0; }
/* Os oito campos eram oito fotografias sem link: 335 KB e a pagina inteira
   com dois links. Agora cada um abre a busca daquele termo — hoje vazia,
   correta a partir da primeira sintese publicada. */
.bsc-campos li a {
  display: block;
  text-decoration: none;
  color: inherit;
}
.bsc-campos li a img { transition: opacity .18s ease; }
.bsc-campos li a:hover img,
.bsc-campos li a:focus-visible img { opacity: .82; }
.bsc-campos li a:hover span,
.bsc-campos li a:focus-visible span { color: var(--bsc-azul); }
.bsc-campos li a:focus-visible { outline: 2px solid var(--bsc-azul); outline-offset: 3px; }
.bsc-campos img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.bsc-campos span {
  display: block;
  margin-top: 8px;
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: var(--t1);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #8E2C1E;
}
@media (max-width: 1023px) {
  .bsc-campos ul { grid-template-columns: repeat(2, 1fr); }
}

/* ————— About + cartão do editorial —————
   O About ocupa a coluna larga: quem chega precisa saber o que a revista
   publica antes de qualquer outra coisa. O editorial vira cartão estreito,
   chamando pelo grafismo — a rede de linhas do herói, recortada. */
/* A coluna de texto media 716px mas o .bsc-resumo parava em 66ch (529px):
   sobravam 187px mortos dentro da propria coluna, mais os 60 da calha — um
   vao de 247px no meio da pagina, que era o que fazia a home parecer tres
   blocos soltos em vez de uma pagina. Agora a coluna de leitura vale o que
   o texto ocupa (560px, ~70 caracteres) e o cartao do editorial fica com o
   resto: 456px em vez de 304, e as duas colunas fecham os 1080. */
.bsc-abertura { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 0 64px; align-items: start; }
.bsc-resumo {
  grid-column: 1;
  /* sem max-width: a largura agora e a da coluna, e a coluna ja e a medida */
  max-width: none;
  border-top: 3px solid var(--bsc-tinta);
  padding-top: 16px;
}
.bsc-resumo h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: var(--t5);
  line-height: 1.2;
  margin: 0 0 12px;
}
.bsc-resumo h2::before { display: none !important; content: none !important; }
.bsc-resumo p { font-size: 16px; line-height: 1.62; color: var(--bsc-tinta); margin: 0 0 14px; }
.bsc-resumo a,
.bsc-ed-card a {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  /* --t3: mesmo corpo da prosa em que o link vive; 13,5px era degrau
     inventado, e num link pequeno demais para o alvo do dedo */
  font-size: var(--t3);
  color: var(--bsc-azul);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.bsc-ed-card { grid-column: 2; border-top: 1px solid #E4E0D5; padding-top: 16px; }
.bsc-ed-card .rot {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E2C1E;
  font-weight: 600;
  margin: 0 0 12px;
}
.bsc-ed-card .marca {
  /* A imagem agora e feita sob medida para esta faixa — 912x256, a mesma
     proporcao do espaco (456x128 em dobro, para retina). Por isso "cover" e
     "center", e nao o 200%/70% de antes: aquele numero existia para cacar a
     rede DENTRO da fotografia do heroi, que nao fora enquadrada para ca.
     Com imagem propria, o enquadramento e o do arquivo. */
  height: 128px;
  margin: 0 0 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.bsc-ed-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  margin: 0 0 12px;
}
.bsc-ed-card h3::before { display: none !important; content: none !important; }
@media (max-width: 1023px) {
  .bsc-abertura { display: block; }
  .bsc-resumo { margin-bottom: 32px; }
  .bsc-ed-card { max-width: 66ch; }
}


/* ═══════════════════════════════════════════════════════════════════
   REGISTRO — bloco de compostura, agosto de 2026
   Escrito em bloco único e no fim do arquivo de propósito: para reverter,
   apaga-se daqui até o fim. Nada acima foi alterado.

   Três movimentos, e um princípio: autoridade tipográfica vem de espaço
   e contenção, não de cor. A identidade — caixa baixa, iniciais coloridas,
   Fraunces, papel creme — permanece intacta.
   ═══════════════════════════════════════════════════════════════════ */

/* 1 · O FILETE APARECE UMA VEZ
   Repetido a cada h2, o tricolor deixava de assinar e passava a decorar.
   Some dos títulos de seção e reaparece uma só vez, no alto da página. */
.pkp_structure_main h2::before {
  display: none !important;
  content: none !important;
}
.pkp_page_about .pkp_structure_main > .page > h1::before,
.pkp_structure_main:has(> .bsc-lado) > .page > h1::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  margin: 0 0 26px;
  background: linear-gradient(to right,
    var(--bsc-azul) 0 50%, var(--bsc-verde) 50% 100%);
}

/* No lugar do filete, um fio fino de tinta: separa sem enfeitar. */
.pkp_page_about .pkp_structure_main h2,
.pkp_structure_main:has(> .bsc-lado) h2 {
  margin-top: 44px;
  padding-top: 14px;
  border-top: 1px solid #D8D3C6;
}

/* 2 · O OURO SAI DA ESTRUTURA
   Continua na marca e no menu; some das réguas e dos rótulos, onde
   competia com o título logo abaixo. Azul e tinta leem como instituição. */
.bsc-lado h3::before,
.bsc-abertura .rot::before,
.bsc-campos h2::before {
  background: linear-gradient(to right,
    var(--bsc-azul) 0 50%, var(--bsc-verde) 50% 100%);
}
.bsc-lado h3,
.bsc-abertura .rot,
.bsc-ed-card .rot,
.bsc-campos span,
.user_listing .bsc-papel,
.user_listing .bsc-campo-membro {
  color: #6B675C;
}

/* 3 · O TIPO CRESCE E O ORNAMENTO SOME
   Título maior, corpo maior, entrelinha mais aberta, mais ar entre seções.
   É daqui que vem o peso. */
.pkp_page_about .pkp_structure_main > .page > h1,
.pkp_structure_main:has(> .bsc-lado) > .page > h1 {
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.008em;
  max-width: 16em;
  margin: 0 0 26px;
}
/* 18px, nao 17. Um editorial de duas mil palavras lido a 14 — que era o que
   saia nas paginas estaticas — nao tem autoridade nenhuma; e a 17 ainda pede
   esforco. A 18, com entrelinha de 1,72 numa coluna de 530px, sao ~63
   caracteres por linha: a medida de um impresso, nao a de um formulario. */
.pkp_page_about .pkp_structure_main > .page p,
.pkp_page_about .pkp_structure_main > .page li,
.pkp_structure_main:has(> .bsc-lado) > .page p,
.pkp_structure_main:has(> .bsc-lado) > .page li {
  font-size: 18px;
  line-height: 1.72;
}
/* A coluna ja e a medida; um segundo limite dentro dela, calculado noutro
   corpo de letra, so a estreitava mais. */
.pkp_page_about .pkp_structure_main > .page p,
.pkp_structure_main:has(> .bsc-lado) > .page p {
  max-width: none;
  margin-bottom: 18px;
}
/* O tema serve h3 a 1.143rem — 16px — e o corpo destas paginas agora tem 18:
   o SUBTITULO saia menor que o texto que ele encabeca. Era a instancia mais
   crua da falta de autoridade: numa pagina de politica, cada secao se
   anunciava com letra menor que a do proprio paragrafo.
   A escala destas paginas passa a ser 40 / 26 / 22 / 18 — cada degrau 1,2
   acima do seguinte, a mesma razao da escala do resto do site. E o peso cai
   de 700 para 500: em Fraunces o 700 e pesado demais, e quem carrega a
   hierarquia aqui e o tamanho, nao a gordura da letra. */
.pkp_page_about .pkp_structure_main > .page h2,
.pkp_structure_main:has(> .bsc-lado) > .page h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.22;
}
.pkp_page_about .pkp_structure_main h3,
.pkp_structure_main:has(> .bsc-lado) h3 {
  margin-top: 28px;
}
.pkp_page_about .pkp_structure_main > .page h3,
.pkp_structure_main:has(> .bsc-lado) > .page h3 {
  font-size: var(--t5);
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 10px;
}

/* 4 · O BOTÃO PERDE O RAIO
   Pílula é vocabulário de aplicativo; retângulo de fio fino é de impresso.
   O "Submit manuscript" da barra escura fica como está: ali a pílula é
   sinalização de ação, não moldura de conteúdo. */
.bsc-lado .bsc-ir,
.bsc-ficha .bsc-ir {
  border-radius: 0;
  border-width: 1px;
  padding: 10px 22px;
}

/* ═══════════════════════════════════════════════════════════════════════
   O AZUL DOS TITULOS
   Ate aqui titulo e corpo usavam a MESMA tinta, #1A2B3C. Uma pagina de uma
   cor so nao tem hierarquia: de longe ela vira uma mancha cinza-carvao, e o
   titulo nao se anuncia — so e maior. Os titulos passam para #1B3A63, que e
   visivelmente azul (B menos R: 72, contra 34) e mantem 11,1:1 de contraste
   sobre o papel creme, bem acima do 7:1 do nivel AAA.
   Este bloco fica no FIM do arquivo de proposito: por vir depois, ele vence
   as regras de cor anteriores. As tres excecoes vem logo abaixo, na ordem.
   ═══════════════════════════════════════════════════════════════════════ */
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.bsc-lead h3,
.bsc-card h4,
.bsc-ed-card h3 {
  color: var(--bsc-titulo);
}

/* excecao 1 — o heroi. Ali o texto esta sobre a fotografia e vale o
   contraste maximo, nao a cor. */
.bsc-hero2-text h2 { color: var(--bsc-tinta); }

/* excecao 2 — v22: os rotulos em versalete falam na COR-SINAL, o vermelho
   que ja e a voz das outras nove rubricas do site (chapeu do heroi, campos
   abertos, fichas). Havia duas vozes — vermelha aqui, cinza ali — e rubrica
   com duas cores deixa de ser sistema. O cinza saiu; o azul continua fora,
   pela razao original: competiria com o titulo ao lado. */
.bsc-lado h3,
.bsc-abertura .rot,
.bsc-ed-card .rot { color: #8E2C1E; }

/* excecao 3 — a linha de entrada do editorial. Ela perdia o tamanho para a
   regra generica de paragrafo das paginas de texto (que tem especificidade
   maior) e caia de 21,5px para o corpo comum: a entrada do texto ficava do
   tamanho do texto. Aqui ela e devolvida, e em azul, junto do titulo. */
.pkp_page_about .pkp_structure_main > .page p.bsc-standfirst,
.pkp_structure_main:has(> .bsc-lado) > .page p.bsc-standfirst {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  line-height: 1.45;
  color: var(--bsc-titulo);
  margin: 0 0 26px;
  max-width: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   A HOME E O MENU ENTRAM NA MESMA ESCALA
   Depois que as paginas de texto subiram para 40/26/22/18, a home e o menu
   ficaram um degrau inteiro abaixo: o titulo de secao da home tinha 21,5px,
   MENOS que o subtitulo (22px) de uma pagina de politica, e o corpo tinha 16
   contra 18. Uma revista nao pode ter duas escalas tipograficas.
   O heroi fica em 34px por ora — a manchete que esta no ar tem 36 caracteres
   e a 40px passaria a tres linhas, encostando na rede de linhas da
   fotografia. Quando a manchete curta entrar (home_en_v5), sobe para 40.
   ═══════════════════════════════════════════════════════════════════════ */
.bsc-resumo h2,
.bsc-campos h2 {
  /* v22: --t5, o degrau de titulo de secao da propria escala. 26px era o
     degrau de titulo de ARTIGO usado em secao — com a rubrica vermelha
     acima fazendo o anuncio, o titulo nao precisa gritar. E o compasso
     nature: etiqueta pequena forte, titulo um degrau abaixo. */
  font-size: var(--t5);
  line-height: 1.22;
}
.bsc-ed-card h3 {
  font-size: var(--t5);
  line-height: 1.25;
}
.bsc-resumo p {
  font-size: 18px;
  line-height: 1.7;
}

/* ═══ O MENU ═══
   14px em peso 400, branco sobre a barra escura: a 14px o traco fino da
   Source Sans some contra o azul-noite, e o menu — que e a navegacao inteira
   do site — lia menos que a legenda da fotografia. Medido: o menu ocupa
   502px de uma barra de 1080, sobram 477px. Nao falta espaco; faltava corpo.
   A 16px em peso 500 o menu passa a ocupar 571px e ainda sobram 408. */
.pkp_navigation_primary_row a,
.pkp_navigation_primary > li > a {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.pkp_navigation_search_wrapper a,
.pkp_search {
  font-size: 16px;
  font-weight: 500;
}
/* a pilha de submissao fica um degrau abaixo do menu: ela ja se distingue
   pela moldura, e igualada ao menu virava dois destaques na mesma barra */
.pkp_navigation_primary a[href*="about/submissions"] {
  font-size: 15px;
  font-weight: 500;
  padding: 9px 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   O TITULO DE PAGINA VALE PARA TODAS AS INTERNAS
   O tratamento de titulo — filete de duas cores + 40px de Fraunces — estava
   presa a .pkp_page_about. As paginas que o OJS gera sozinho (Archives,
   Current Issue, Busca) tem classe .pkp_page_issue, .pkp_page_search etc., e
   por isso caiam no h1 do tema: 24px, sem filete. Medido em /issue/archive e
   /issue/current: 23,996px contra os 40 de qualquer pagina institucional.
   Aqui a regra passa a valer para o h1 de qualquer pagina interna. A
   especificidade e menor que a das regras de .pkp_page_about, que continuam
   valendo onde ja valiam — mesmos valores, sem conflito.
   O QUE NAO se universaliza: a medida de leitura de 530px. Archives e
   Current Issue sao listas, nao prosa, e lista quer a largura toda.
   ═══════════════════════════════════════════════════════════════════════ */
.pkp_structure_main > .page > h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  letter-spacing: -0.008em;
  max-width: 16em;
  margin: 0 0 26px;
  color: var(--bsc-titulo);
}
.pkp_structure_main > .page > h1::before {
  content: '';
  display: block;
  width: 100%;
  max-width: 530px;   /* nas listas o .page tem 1080px; sem o limite o filete
                         viraria uma barra atravessando a pagina inteira */
  height: 3px;
  margin: 0 0 26px;   /* o mesmo das paginas de texto, para o titulo nascer
                         na mesma altura em qualquer interna */
  background: linear-gradient(to right,
    var(--bsc-azul) 0 50%, var(--bsc-verde) 50% 100%);
}

/* A prosa dessas paginas — o aviso "This journal has not published any
   issues", a linha que abre o arquivo — vinha do tema a 14px, debaixo de um
   titulo de 40. Nao chega aos 18 das paginas de texto porque aqui ela e
   legenda de uma lista, nao o texto principal; mas 14 sob 40 e desproporcao,
   nao hierarquia. */
.pkp_page_issue .pkp_structure_main > .page > p,
.pkp_page_search .pkp_structure_main > .page > p {
  font-size: 17px;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════════════════
   AS MARCAS DE ABERTURA DA HOME
   A home nao e um documento, e uma capa — e nao deve usar a marca que abre
   um documento. O filete de duas cores diz, nas internas, "comeca aqui um
   texto": e assinatura, e assinatura repetida deixa de assinar. Por isso ele
   NAO e trazido para ca. Fica sendo propriedade exclusiva das internas, e
   por nao aparecer na home significa mais quando o leitor chega numa
   politica ou no editorial.
   O que a home precisa e de coerencia de POSTO, e ela tinha quatro
   tratamentos numa tela so: regua de 3px sobre o bloco de texto, fio de 1px
   no cartao, filete de 92px sobre o rotulo EDITORIAL, e nada sobre "The
   range of Brazilian research".
   Fica assim: regua de 3px = movimento novo (sao dois, o bloco de texto e a
   faixa de campos); fio de 1px = limite de cartao, que e outra funcao.
   Duas marcas, dois postos.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1 · a faixa de campos e PAR do bloco de texto, nao subsecao dele — e era a
   unica secao maior sem marca alguma, o que a fazia ler como continuacao do
   assunto anterior em vez de assunto novo. Mesma regua, mesmo respiro. */
.bsc-campos {
  border-top: 3px solid var(--bsc-tinta);
  padding-top: 16px;
}

/* 2 · o filete sai do rotulo EDITORIAL. Era a assinatura da casa aplicada ao
   MENOR elemento da pagina — um rotulo de 10,5px dentro de um cartao — e
   isso inverte a hierarquia: a coisa mais miuda carregava a marca mais
   emblematica. O cartao ja tem o fio de 1px que o delimita; a segunda marca
   era excesso, e era justamente a que contrariava a regra de o filete
   aparecer uma vez, no alto da pagina. */
.bsc-abertura .rot::before {
  display: none !important;
  content: none !important;
}

/* ═══ A pilula nao entra no menu suspenso ═══
   A regra do botao "Submit manuscript" casa por href — a[href*="about/submissions"]
   — e o item "Submissions" do menu suspenso aponta para o MESMO endereco.
   Resultado: dentro do menu branco, um item ficava desenhado como pilula, com
   moldura arredondada, no meio de uma lista de links simples.
   Botao e link para a mesma pagina e a diferenca certa: um convida a agir na
   barra, o outro so lista. O que nao pode e o segundo herdar a roupa do
   primeiro. */
.pkp_navigation_primary .dropdown-menu a[href*="about/submissions"] {
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  font-size: var(--t3);
  font-weight: 400;
  line-height: inherit;
}

/* ═══ O heroi cresce quando a manchete curta entrar ═══
   Ficou em 34px enquanto a manchete no ar era "Our inaugural issue is in
   preparation": a 40px ela vira tres linhas e encosta na rede de linhas da
   fotografia — medido, sobravam 3px.
   Com a manchete curta e o chapeu (home_en_v5), a 38px o bloco termina a
   180px e a rede comeca a 192: 12px de folga.
   A regra e condicionada ao :has(.bsc-kicker) de proposito. O chapeu so
   existe no texto novo, entao esta folha pode subir ANTES ou DEPOIS do texto
   sem quebrar nada: com o texto velho o heroi continua em 34, e no instante
   em que o texto novo entrar ele passa a 38 sozinho. */
.bsc-hero2-text:has(.bsc-kicker) h2 {
  font-size: 38px;
}
.bsc-hero2-text .bsc-kicker {
  margin: 0 0 6px;
}

/* ═══════════════════════════════════════════════════════════════════════
   UMA MARCA SO, EM TINTA, EM TODAS AS PAGINAS
   O filete de duas cores era assinatura, e assinatura repetida deixa de
   assinar. Ele aparecia em nove lugares do site — titulo de pagina, titulo
   de artigo, ficha, rotulo da coluna lateral, faixa de campos — e em duas
   cores que ja tem trabalho: sao as do proprio nome da revista, letra a
   letra, no alto de toda pagina. Um segundo uso das mesmas cores numa barra
   de 3px nao reforca a marca: concorre com ela.
   Passa tudo para a tinta. Nao e empobrecimento — e devolver a cor ao unico
   lugar onde ela assina. A paleta continua inteira no logotipo, nas iniciais
   coloridas do texto corrido, na borda verde do menu e no chapeu do heroi.
   O QUE FICA NO LUGAR DELA e a hierarquia por PESO, que e como impresso faz:
       3px de tinta  = abre uma pagina, ou abre um movimento
       1px de #D8D3C6 = separa secoes dentro do texto, delimita cartao
   Duas espessuras da mesma tinta dizem "isto e mais importante que aquilo".
   Duas cores diziam so "isto e especial".
   Para reverter: apagar deste comentario ate o fim do arquivo.
   ═══════════════════════════════════════════════════════════════════════ */
.pkp_structure_main > .page > h1::before,
.pkp_page_about .pkp_structure_main > .page > h1::before,
.pkp_structure_main:has(> .bsc-lado) > .page > h1::before,
.obj_article_details .page_title::before,
.bsc-ficha::before,
.bsc-mapa::before,
.bsc-campos h2::before {
  background: var(--bsc-tinta);
}

/* A coluna lateral perde o filete. Nao pela repeticao em si: e que ela nao
   precisa dele para se anunciar — ja e uma coluna, a direita, com fios entre
   os itens. O filete ali nao dizia nada que a posicao nao dissesse, e era a
   segunda vez que a marca aparecia na mesma tela. Mesmo caso do rotulo
   EDITORIAL da home, que saiu na v6. */
.bsc-lado h3::before {
  display: none !important;
  content: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   A CHAMADA DE SINTESES
   A faixa de oito fotografias virou uma lista de encomendas. O desenho e o
   de um SUMARIO — rotulo de area a esquerda, pergunta a direita, fio fino
   entre as linhas — e a escolha e deliberada: um sumario e a forma que esta
   secao vai tomar de verdade quando os artigos existirem. Enquanto nao
   existem, ela mostra a mesma forma com o conteudo que falta.
   Sem imagem nenhuma, o que resolve de uma vez o licenciamento das oito
   fotos de banco e tira 335 KB da pagina.
   ═══════════════════════════════════════════════════════════════════════ */
.bsc-chamada .bsc-chamada-lede {
  font-size: var(--t3);
  line-height: 1.6;
  color: #55534C;
  max-width: 60ch;
  margin: 0 0 28px;
}
.bsc-chamada ul {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bsc-chamada li {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 0 32px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid #E4E0D5;
  margin: 0;
}
.bsc-chamada li:first-child { border-top: none; padding-top: 4px; }
.bsc-chamada .area {
  font-family: 'Source Sans 3', sans-serif;
  font-size: var(--t1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8E8878;
  line-height: 1.6;
}
.bsc-chamada .pergunta {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.34;
  color: var(--bsc-titulo);
  max-width: 46ch;
  /* .bsc-campos span era o rotulo das fotos: versalete, espacado e vermelho.
     A pergunta e um <span> dentro da mesma secao e herdava tudo isso — saia
     em CAIXA ALTA. Estas tres linhas desfazem o que sobrou daquele desenho. */
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
}
/* no telefone o rotulo sobe para cima da pergunta: 220px de coluna fixa nao
   cabem em 375, e a pergunta e o que importa */
@media (max-width: 767px) {
  .bsc-chamada li { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .bsc-chamada .pergunta { font-size: 18px; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   O MAPA DAS GRANDES AREAS
   Nove cartoes numa grade 3x3, uma fileira por colegio. A grade nao e
   arbitraria: as nove grandes areas da CAPES se distribuem exatamente tres
   por colegio, e a forma so esta obedecendo ao fato.
   Sem fotografia. As oito imagens que estavam aqui eram banco generico
   fingindo taxonomia; o que da beleza a este bloco e a estrutura — regua de
   tinta abrindo cada fileira, nome em Fraunces, contagem em versalete.
   ═══════════════════════════════════════════════════════════════════════ */
.bsc-mapa-areas .bsc-mapa-lede {
  /* o corpo da home tem 18 e esta linha e prosa: --t4 e esse degrau.
     Vinha em 17px, meio caminho fora da escala. */
  font-size: var(--t4);
  line-height: 1.6;
  color: #4A4A44;
  max-width: 68ch;
  margin: 0 0 32px;
}
/* As fileiras por colegio sairam junto com a estrutura da CAPES: a
   classificacao FORD tem seis campos e nenhum agrupamento intermediario. */
.bsc-mapa-areas ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.bsc-mapa-areas li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  /* sem padding no topo: a rede vai de borda a borda do cartao */
  padding: 0 0 22px;
  /* ═══ v22: sem caixa ═══
     O cartao tinha fundo branco e moldura de quatro lados. Revista de
     referencia nao encaixota: separa por FIO e deixa o papel continuo —
     caixa e vocabulario de site institucional, fio e de jornal. Fica so o
     fio de tinta no alto, agora em 1px: ele segue dizendo "isto e uma
     unidade", mas como pauta, nao como tampa. Fundo transparente: o papel
     da pagina atravessa. */
  background: transparent;
  border: none;
  border-top: 1px solid var(--bsc-tinta);
  overflow: hidden;
}

/* ═══ A rede sai dos cartoes ═══
   Ela continua sendo gerada pelo header, mas nao aparece. O motivo e a
   regra que ja valia para o filete de duas cores: a rede e a ASSINATURA da
   revista, e assinatura repetida deixa de assinar. Seis miniaturas na mesma
   tela paravam de significar e passavam a enfeitar — e ainda diluiam a do
   heroi, que e a de verdade, grande e motivada, saindo do tronco.
   A justificativa que eu tinha dado — "o numero de pontos e o numero de
   disciplinas" — nao se sustenta: ninguem conta dez pontos de relance, e a
   diferenca entre quatro e seis e ilegivel. Era racionalizacao.
   O que da textura ao cartao e a lista de disciplinas, que o cartao nao
   tinha quando o desenho entrou.
   Para trazer de volta: apagar o display:none daqui. */
.bsc-mapa-areas .bsc-ga-rede {
  display: none;
}
.bsc-mapa-areas .ga {
  /* 20px de topo: sem a faixa da rede, o titulo precisa do respiro que ela
     dava */
  /* sem caixa nao ha parede para respeitar: o texto alinha na grade */
  padding: 16px 0 0;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  /* --t5, o mesmo degrau do titulo do cartao ao lado na mesma pagina.
     A 19 os dois cartoes tinham postos diferentes sem razao. Era 22px na
     mao, meio ponto fora do token. */
  font-size: var(--t5);
  line-height: 1.22;
  color: var(--bsc-titulo);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
}
.bsc-mapa-areas .qt {
  padding: 0;
  font-family: 'Source Sans 3', sans-serif;
  font-size: 15px;
  /* Isto e texto para LER, nao metadado. Estava em 12,5px — o tamanho da
     faixa de servico, o menor do site — e em #6B675C, que da 5,65:1 sobre o
     branco do cartao: pequeno e apagado ao mesmo tempo.
     A 15px em #4A4A44 sao 8,92:1, e a lista passa a ser legivel de fato. */
  line-height: 1.6;
  color: #4A4A44;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 0;
}
@media (max-width: 1023px) {
  .bsc-mapa-areas ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bsc-mapa-areas ul { grid-template-columns: 1fr; gap: 12px; }
  .bsc-mapa-areas li { padding: 0 0 16px; }
  .bsc-mapa-areas .ga { padding: 12px 0 0; }
  .bsc-mapa-areas .qt { padding: 0 18px; }
}

/* ═══ O cartão do editorial ganha link na imagem e frase-síntese ═══ */

/* A imagem virou link. Sem display:block o <a> em linha deixaria um filete
   de fundo abaixo da figura, e o cursor precisa dizer que ali se clica. */
.bsc-ed-card .marca-link {
  display: block;
  text-decoration: none;
  border: none;
}
.bsc-ed-card .marca-link .marca { transition: opacity .18s ease; }
.bsc-ed-card .marca-link:hover .marca { opacity: .88; }

/* A frase-sintese entre o titulo e o link. Corpo de leitura, nao de
   metadado: e a unica prosa do cartao e precisa ser lida. */
.bsc-ed-card .lede {
  font-family: 'Source Sans 3', -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #4A4A44;
  margin: 8px 0 14px;
  text-transform: none;
  letter-spacing: 0;
}