/* ==========================================================
   BOZ ANJO — stylesheet
   v4 — 2026 · creme + quase-preto, sem acento
   Logo: Graphie (SVG inline). Interface: Urbanist. Leitura: EB Garamond.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400&family=Urbanist:wght@300;400&display=swap');

:root {
  --papel: #EDE8DE;   /* creme — página de livro */
  --tinta: #141413;   /* quase-preto */
  --meta:  #66615A;   /* datas, legendas — 5,0:1 no creme */
  --fio:   rgba(20, 20, 19, .14);

  --serif: 'EB Garamond', Georgia, serif;
  --sans:  'Urbanist', system-ui, sans-serif;

  --coluna: 640px;
}

/* tema escuro: inverte os dois tokens */
.escuro {
  --papel: #141413;
  --tinta: #EDE8DE;
  --meta:  #9A958C;   /* 6,2:1 no quase-preto */
  --fio:   rgba(237, 232, 222, .16);
  background: var(--papel);
  color: var(--tinta);
}
@media (prefers-color-scheme: dark) {
  :root {
    --papel: #141413;
    --tinta: #EDE8DE;
    --meta:  #9A958C;
    --fio:   rgba(237, 232, 222, .16);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--papel);
  color: var(--tinta);
  font: 300 1.0625rem/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
svg { overflow: visible; }
em { font-style: italic; }

/* texto corrido: EB Garamond. Todo o resto: Urbanist */
.leitura__corpo, .leitura__subtitulo, .livro__sinopse, .sobre p,
.lista__item--longo p, .contato__item p, .citacao {
  font-family: var(--serif); font-weight: 400; font-size: 1.1875rem; line-height: 1.65;
}
.lista__item--longo p, .contato__item p { font-size: 1.05rem; }

.coluna { max-width: var(--coluna); margin: 0 auto; padding: 0 24px; }

/* ---- header ---- */
.header {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1040px; width: 100%; margin: 0 auto; padding: 32px 24px;
}
.header__marca { color: var(--tinta); }
/* wordmark: SVG em curvas, cor herdada (currentColor) */
.marca { display: block; height: 30px; width: auto; }
.header { position: relative; }

/* sanduíche — só no celular */
.header__menu {
  display: none;
  width: 32px; height: 32px; padding: 8px 4px;
  background: none; border: 0; cursor: pointer; color: var(--tinta);
  flex-direction: column; justify-content: space-between;
}
.header__menu span {
  display: block; height: 1px; background: currentColor;
  transition: transform .25s, opacity .2s;
}
.header.aberto .header__menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header.aberto .header__menu span:nth-child(2) { opacity: 0; }
.header.aberto .header__menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.header__nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font: 300 .95rem/1 var(--sans); letter-spacing: .02em; }
.header__nav a { color: var(--meta); transition: color .2s; }
.header__nav a:hover, .header__nav a.ativo { color: var(--tinta); }

/* ---- rótulo ---- */
.rotulo {
  font: 400 .72rem/1 var(--sans);
  letter-spacing: .18em; text-transform: lowercase;
  color: var(--meta);
}

/* ---- link sublinhado ---- */
.link {
  font: 400 .9rem/1 var(--sans); letter-spacing: .04em;
  border-bottom: 1px solid currentColor; padding-bottom: 4px;
  transition: opacity .2s;
}
.link:hover { opacity: .6; }

/* ================= HOME ================= */
.hero { text-align: center; padding: 96px 24px 128px; }
.hero .selo { height: 168px; width: auto; margin: 0 auto 64px; }
.hero__frase { font: 300 clamp(1.5rem, 3.2vw, 2.1rem)/1.35 var(--sans); letter-spacing: -.005em; }
.hero__frase span { display: block; color: var(--meta); }

.obras { padding-bottom: 128px; }
.obras .rotulo { margin-bottom: 24px; }

/* ---- lista com fios (home, contos, ensaios, bibliografia) ---- */
.lista__item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: 22px 0; border-top: 1px solid var(--fio);
}
.lista__item:last-child { border-bottom: 1px solid var(--fio); }
.lista__titulo { font-size: 1.35rem; transition: opacity .2s; }
a.lista__item:hover .lista__titulo { opacity: .6; }
.lista__meta { font: 300 .85rem/1.4 var(--sans); color: var(--meta); white-space: nowrap; }

/* item com resumo */
.lista__item--longo { display: block; padding: 32px 0; }
.lista__item--longo .lista__titulo { display: block; margin-bottom: 8px; }
.lista__item--longo p { color: var(--meta); font-size: 1.05rem; margin-bottom: 12px; }
.lista__item--longo .lista__meta { white-space: normal; }

/* ---- livro: faixa escura, como capa ---- */
.livro { padding: 128px 0; text-align: center; }
.livro .rotulo { margin-bottom: 32px; }
.livro__titulo { font: 300 clamp(2.2rem, 5vw, 3.2rem)/1.1 var(--sans); letter-spacing: -.01em; margin-bottom: 12px; }
.livro__serie { font: 300 .9rem/1 var(--sans); color: var(--meta); letter-spacing: .04em; margin-bottom: 48px; }
.livro__sinopse { text-align: left; margin-bottom: 48px; }
.citacao {
  font-style: italic; color: var(--meta);
  border-top: 1px solid var(--fio); padding-top: 32px; margin-bottom: 48px;
}
.citacao cite { display: block; margin-top: 12px; font: 300 .8rem/1 var(--sans); font-style: normal; letter-spacing: .1em; }

/* ================= PÁGINAS INTERNAS ================= */
.pagina { padding-top: 64px; padding-bottom: 128px; }
.pagina__titulo { font: 300 clamp(2.2rem, 5vw, 3rem)/1.1 var(--sans); letter-spacing: -.01em; margin: 16px 0 64px; }

/* ---- sobre ---- */
.sobre p + p { margin-top: 1.2em; }
.sobre .citacao { margin-top: 64px; margin-bottom: 0; text-align: center; border-top: 1px solid var(--fio); }

/* ---- bibliografia ---- */
.filtros { display: flex; gap: 28px; margin-bottom: 48px; font: 300 .95rem/1 var(--sans); }
.filtros button {
  background: none; border: 0; padding: 0 0 6px; cursor: pointer;
  font: inherit; color: var(--meta); border-bottom: 1px solid transparent;
}
.filtros button.ativo { color: var(--tinta); border-bottom-color: currentColor; }
.ano { margin-bottom: 48px; }
.ano .rotulo { margin-bottom: 16px; }
.ano--proximos .lista__titulo { color: var(--meta); }

/* ---- contato ---- */
.contato__item { padding: 24px 0; border-top: 1px solid var(--fio); }
.contato__item:last-child { border-bottom: 1px solid var(--fio); }
.contato__item .rotulo { margin-bottom: 10px; }
.contato__valor { font-size: 1.35rem; }
a.contato__valor:hover { opacity: .6; }
.contato__item p { color: var(--meta); font-size: 1rem; margin-top: 4px; }

/* ---- leitura (contos e ensaios) ---- */
.leitura { padding-top: 64px; padding-bottom: 128px; }
.leitura__voltar { font: 300 .85rem/1 var(--sans); color: var(--meta); }
.leitura__voltar:hover { color: var(--tinta); }
.leitura__titulo { font: 300 clamp(2.2rem, 5vw, 3.2rem)/1.1 var(--sans); letter-spacing: -.01em; margin: 40px 0 16px; }
.leitura__meta { font: 300 .85rem/1 var(--sans); color: var(--meta); letter-spacing: .04em; margin-bottom: 64px; }
.leitura__subtitulo { font-style: italic; color: var(--meta); margin: -40px 0 48px; }
.leitura__corpo p { margin-bottom: 1.1em; hyphens: auto; }
.leitura__corpo > p:first-of-type::first-letter {
  float: left; font-size: 4.2em; line-height: .82; padding: .06em .08em 0 0;
}
.leitura__fim { margin: 64px auto 0; width: 24px; color: var(--meta); }
.leitura__fim .selo { height: 48px; width: auto; margin: 0 auto; }

/* ---- rodapé ---- */
.rodape { padding: 48px 0; border-top: 1px solid var(--fio); }
.rodape__linha {
  display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap;
  font: 300 .85rem/1.6 var(--sans); color: var(--meta);
}
.rodape__linha nav { display: flex; gap: 24px; flex-wrap: wrap; }
.rodape__linha a:hover { color: var(--tinta); }

@media (max-width: 620px) {
  .header { padding: 24px; }
  .marca { height: 27px; }
  .header__menu { display: flex; }
  .header__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    flex-direction: column; gap: 0;
    background: var(--papel); border-bottom: 1px solid var(--fio);
    padding: 0 24px 16px;
    font-size: 1.1rem;
  }
  .header.aberto .header__nav { display: flex; }
  .header__nav a { padding: 14px 0; border-top: 1px solid var(--fio); }
  .hero { padding: 64px 24px 96px; }
  .hero .selo { height: 120px; margin-bottom: 48px; }
  .livro { padding: 96px 0; }
  .lista__item { flex-direction: column; gap: 6px; }
  .pagina, .leitura { padding-top: 32px; }
  .pagina__titulo { margin-bottom: 48px; }
}