:root {
  --color-bg: #eb2019;
  --color-panel: #d9d9d9;
  --color-text: #2b0000;
  --color-text-inverse: #ffffff;
  --gap: 20px;
  --margin-top: 11.11vh;
  --margin-left: 14.17vw;
  --margin-right: 11.6vw;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
}

body {
  font-family: 'Arimo', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* Grid de 3 colunas: logo | capas | sidebar.
   fr = "fração do espaço restante" — é uma unidade responsiva por natureza.
   A coluna do meio (1fr) cresce e encolhe conforme a tela; as laterais
   têm um mínimo (minmax) pra nunca ficarem pequenas demais.
   As margens (top/left/right) vêm direto das proporções do novo frame
   do Figma — margens simétricas em cima/embaixo (~100px num frame de
   900px), e um pouco mais de respiro à esquerda do que à direita. */
.grid {
  display: grid;
  grid-template-columns: max-content 1fr minmax(150px, 17.77%);
  grid-template-rows: 1fr;
  column-gap: var(--gap);
  align-items: stretch;
  height: 100vh;
  padding: var(--margin-top) var(--margin-right) var(--margin-top) var(--margin-left);
}

/* Logo (SVG único) */
.branding {
  height: 100%;
  min-height: 0; /* sem isso, o grid deixa a altura "natural" da imagem
                    (bem alta, por causa da proporção estreita do logo)
                    vazar e empurrar a coluna — e a página — pra além de 100vh */
  overflow: hidden;
}

.branding img {
  display: block;
  width: auto;
  height: 100%;
  aspect-ratio: 127 / 700; /* proporção real do SVG (do Figma) — a largura
                              passa a ser sempre "altura × essa proporção",
                              então a coluna (max-content) nunca sobra espaço */
  object-fit: contain;
}

/* Capas das edições */
.issues {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.issues__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--gap);
}

.issues__item {
  background: var(--color-panel);
  overflow: hidden;
}

.issues__item a {
  display: block;
  width: 100%;
  height: 100%;
}

.issues__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bio + info de publicação */
.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  overflow: hidden;
  font-size: 16px;
  line-height: 20px;
}

.sidebar__bio p {
  margin: 0;
}

.sidebar__bio p:last-child {
  margin-top: 20px;
}

.sidebar__bio strong {
  font-weight: 700;
}

.sidebar__bio em {
  font-style: italic;
}

.sidebar__meta p {
  margin: 0;
  font-size: 14px;
}

.sidebar__toggle {
  display: block;
  margin-top: 12px;
  padding: 0;
  border: none;
  background: none;
  font-family: 'Arimo', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text);
  cursor: pointer;
  text-align: left;
}