/* ════════════════════════════════════════════════════════════════
   Traço/Feito — Base
   Fontes locais, reset, texturas de superfície, grid, chrome global
   (nav + footer), primitivas tipográficas e componente de código de campo.
   ════════════════════════════════════════════════════════════════ */

/* ---------- FONTES LOCAIS ---------- */
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lora';
  src: url('../fonts/Lora-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/SourceSans3-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--papel-cru);
  color: var(--tinta-funda);
  font-size: var(--corpo-size);
  font-weight: 400;
  line-height: var(--corpo-leading);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---------- SUPERFÍCIES / TEXTURAS ----------
   Marcas do sistema (DESIGN.md §7). Nomes de continuidade (surf-*)
   com aliases do brief (tf-fibra / tf-pressao / tf-desgaste).
   Fibra = fibra de papel · Pressão = pressão de pena · Desgaste = borda.
*/
.surf-papel,
.tf-fibra {
  background-image: url('../textures/papel-grain.jpg');
  background-color: var(--papel-cru);
  background-size: 540px 700px;
  background-blend-mode: multiply;
}
.surf-papel-pauta {
  background-image:
    url('../textures/papel-grain.jpg'),
    var(--pauta-lines);
  background-color: var(--papel-cru);
  background-size: 540px 700px, 100% var(--grid-pauta-altura);
  background-blend-mode: multiply, normal;
}
.surf-areia {
  background-image: url('../textures/papel-areia.jpg');
  background-color: var(--argila-palida);
  background-size: 660px 540px;
  background-blend-mode: multiply;
}
.surf-dark {
  background-image: var(--trama-escura);
  background-color: var(--tinta-funda);
  color: var(--papel-cru);
}

/* Pressão de pena — só em Display Lora itálico */
.tf-pressao { text-shadow: 0.5px 0.5px 0 rgba(44,33,24,0.12); }

/* Borda de desgaste — máximo 1x por página; pai precisa overflow: visible */
.tf-desgaste {
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 100%,
    98.5% 99.4%, 96% 100.3%, 93% 99.5%, 90% 100.4%, 87% 99.4%,
    84% 100.3%, 81% 99.6%, 78% 100.4%, 75% 99.4%, 72% 100.3%,
    69% 99.5%, 66% 100.4%, 63% 99.5%, 60% 100.3%, 57% 99.5%,
    54% 100.4%, 51% 99.4%, 48% 100.3%, 45% 99.5%, 42% 100.4%,
    39% 99.5%, 36% 100.3%, 33% 99.5%, 30% 100.4%, 27% 99.4%,
    24% 100.3%, 21% 99.6%, 18% 100.4%, 15% 99.4%, 12% 100.3%,
    9% 99.5%, 6% 100.4%, 3% 99.5%, 0% 100.3%
  );
}

/* ---------- LAYOUT ---------- */
.wrap {
  width: 100%;
  max-width: var(--grid-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--leitura { max-width: var(--grid-max-leitura); }
.section { padding-block: clamp(64px, 8vw, 132px); position: relative; }
.bleed { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); }

/* Grid margem-nota (anatomia do caderno) para páginas de leitura longa.
   A coluna da esquerda nunca fica vazia (Regra da Margem). */
.campo-grid {
  display: grid;
  grid-template-columns: var(--grid-margem-nota) var(--grid-sarjeta) minmax(0, 1fr);
  align-items: start;
}
.campo-nota { grid-column: 1; }
.campo-corpo { grid-column: 3; max-width: var(--corpo-medida); }

/* Nota marginal — coluna de anotação */
.nota-marginal {
  font-family: var(--sans);
  font-weight: var(--peso-semi);
  font-size: 9px;
  line-height: 1.6;
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--adobe-profundo);
}
.nota-marginal .ref {
  display: block; margin-top: 8px;
  color: var(--tinta-registro); letter-spacing: var(--track-wide);
}

/* ---------- COMPONENTE: CABEÇALHO DE CÓDIGO DE CAMPO ----------
   Código (Argila, caixa alta, tracking 0.20em) → Nome → Data/Local.
   É o "entry-head" que já está no ar; reusado em todas as páginas.
*/
.entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--areia-escura);
  margin-bottom: clamp(36px, 5vw, 64px);
}
.entry-head.on-dark { border-bottom-color: rgba(232,221,213,0.18); }
.entry-head.on-areia { border-bottom-color: rgba(92,61,46,0.16); }
.entry-code {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-campo);
  text-transform: uppercase;
  color: var(--argila-escura);
}
.entry-name {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tinta-funda);
  flex: 1; min-width: 200px;
}
.entry-date {
  font-family: var(--sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-registro);
  text-align: right;
}

/* ---------- PRIMITIVAS TIPOGRÁFICAS ---------- */
.display {
  font-family: var(--lora);
  font-style: italic;
  font-weight: 600;
  letter-spacing: -.015em;
  line-height: 1.08;
  color: var(--tinta-funda);
  text-shadow: 0.5px 0.5px 0 rgba(44,33,24,0.12);
}
.eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--track-campo);
  text-transform: uppercase;
  color: var(--argila-queimada);
}
.lead {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--adobe-profundo);
  line-height: 1.78;
}
.crossref {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-registro);
}
a.crossref { text-decoration: none; transition: color .15s ease-out; }
a.crossref:hover { color: var(--argila-escura); }

/* Corpo de leitura longa */
.prosa {
  font-family: var(--sans);
  font-size: 16px; font-weight: 400;
  line-height: var(--corpo-leading);
  color: var(--tinta-funda);
  max-width: var(--corpo-medida);
}
.prosa + .prosa { margin-top: 20px; }
.prosa b, .prosa strong { font-weight: 600; }

/* ---------- CITAÇÃO EM BLOCO ---------- */
.quote-bloco {
  margin-top: clamp(20px, 2.6vw, 36px);
  padding-top: clamp(26px, 3.4vw, 44px);
  border-top: 1px solid var(--areia-escura);
}
.quote-bloco.on-areia { border-top-color: rgba(92,61,46,0.16); }
.quote-texto {
  font-family: var(--lora); font-style: italic; font-weight: 400;
  font-size: clamp(22px, 2.7vw, 40px); line-height: 1.26;
  color: var(--tinta-funda); text-wrap: pretty; letter-spacing: -.005em;
}
.quote-fonte {
  margin-top: 18px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-registro);
}
.quote-fonte em {
  font-style: italic; text-transform: none; letter-spacing: .03em;
  font-weight: 400; color: var(--adobe-profundo);
}

/* ---------- BOTÕES ---------- */
.cta {
  display: inline-block;
  background: var(--argila-queimada);
  color: var(--papel-cru);
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: 11px 24px; border-radius: var(--raio-funcional);
  transition: background .15s ease-out;
  white-space: nowrap;
  cursor: pointer; border: none;
}
.cta:hover { background: var(--argila-escura); }
.cta:focus-visible { outline: 2px solid var(--argila-queimada); outline-offset: 3px; }
.cta--lg { padding: 14px 34px; font-size: 12px; }

.btn-sec {
  display: inline-block;
  background: transparent;
  color: var(--tinta-funda);
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: 11px 24px; border-radius: var(--raio-funcional);
  border: 1px solid var(--areia-escura);
  transition: background .15s ease-out, color .15s ease-out;
}
.btn-sec:hover { background: var(--tinta-funda); color: var(--papel-cru); }

/* Link "seta" de navegação em contexto de leitura (Tinta de Registro) */
.link-seta {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tinta-registro); text-decoration: none;
  transition: color .15s ease-out;
}
.link-seta:hover { color: var(--argila-escura); }

/* ---------- NAV GLOBAL (6 itens) ---------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--areia-escura);
  backdrop-filter: saturate(1.1);
}
.nav-inner {
  display: flex; align-items: center; gap: 28px;
  height: 64px;
  max-width: var(--grid-max); margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav-logo { height: 34px; width: auto; display: block; }
.nav-menu {
  display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px);
  flex: 1; list-style: none;
  margin-left: clamp(12px, 2vw, 32px);
}
.nav-menu a {
  font-family: var(--sans);
  font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--tinta-funda); text-decoration: none;
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease-out, border-color .15s ease-out;
}
.nav-menu a:hover { color: var(--argila-escura); }
.nav-menu a.is-active { border-bottom-color: var(--argila-queimada); color: var(--argila-escura); }
.nav-cta { margin-left: auto; }

/* Botão hambúrguer (mobile) */
.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-funda);
}

/* ---------- FOOTER GLOBAL ---------- */
.footer { padding-block: clamp(48px, 6vw, 72px); }
.footer-inner {
  max-width: var(--grid-max); margin-inline: auto; padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.footer-logo { height: 28px; width: auto; opacity: .95; margin-bottom: 14px; }
.footer-tag {
  font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(245,240,234,0.82);
}
.footer-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.footer-nav a {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(245,240,234,0.9); text-decoration: none;
  transition: color .15s ease-out;
}
.footer-nav a:hover { color: var(--argila-clara); }
.footer-meta {
  font-family: var(--sans); font-size: 11px; font-weight: 400;
  letter-spacing: .08em; color: rgba(245,240,234,0.7); line-height: 1.9;
}
.footer-meta a { color: var(--argila-clara); text-decoration: none; }

/* ---------- RESPONSIVO (chrome) ---------- */
@media (max-width: 860px) {
  .nav-menu {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--papel-cru); border-bottom: 1px solid var(--areia-escura);
    padding: 8px var(--gutter) 20px; margin: 0;
    display: none;
  }
  .nav-menu.is-open { display: flex; }
  .nav-menu a { width: 100%; padding: 12px 0; border-bottom: 1px solid var(--areia-escura); }
  .nav-toggle { display: inline-block; }
  .nav-cta { display: none; }
  .campo-grid { grid-template-columns: 1fr; }
  .campo-nota { grid-column: 1; margin-bottom: 16px; }
  .campo-corpo { grid-column: 1; }
  .footer-inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}