/* Carlos Bernardo — editorial typography system (Camada 3 — Tipografia v3)
   Archivo (Expanded) carries display titles and the wordmark; Fraunces italic
   carries editorial voice; Inter provides civic clarity; Roboto Flex stays
   reserved for the kinetic hero name and MUST NOT be reassigned. */

:root {
  /* Display / section titles + wordmark. Expanded look via `wdth` 125 applied
     per selector (see .cb-expanded helpers below). */
  --cb-font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Editorial / italic voice: hero slogan, book-popup title, pull quotes. */
  --cb-font-editorial: "Fraunces", Georgia, "Times New Roman", serif;
  --cb-font-interface: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Kinetic hero name only — animated by kinetic-typography.js. Do not reuse. */
  --cb-font-kinetic: "Roboto Flex", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --cb-name-tracking: -0.03em;
}

/* Expanded-display helpers: Archivo widened to 125% width for the monumental
   civic titles + wordmark. `wdth` is the only axis pinned here so the wght axis
   keeps following each element's own font-weight. */
[data-i18n="nav-name"],
.cb-name,
.cb-name-inline,
.signature-name,
.footer-tagline-name,
.font-headline-xl,
.font-headline-xl-mobile,
.font-headline-md,
.font-display-lg,
.font-display-lg-mobile {
  font-variation-settings: "wdth" 125;
}

/* The name is always the strongest typographic element in its own context. */
[data-i18n="nav-name"],
.cb-name,
.cb-name-inline {
  font-family: var(--cb-font-display);
  font-weight: 700;
  letter-spacing: var(--cb-name-tracking);
  text-wrap: balance;
  overflow-wrap: break-word;
}

header [data-i18n="nav-name"] {
  flex: 0 0 auto;
  color: rgb(var(--theme-on-surface));
  font-size: clamp(2rem, 2.65vw, 2.8rem);
  line-height: 0.88;
  white-space: nowrap;
}

footer [data-i18n="nav-name"] {
  max-width: 11ch;
  margin-block-end: 1rem;
  color: rgb(var(--theme-on-surface));
  font-size: clamp(3.75rem, 8.2vw, 7.75rem);
  line-height: 0.82;
}

.hero-title-mixed {
  width: 100%;
  max-width: 36rem;
  margin-block-end: 2rem;
  color: rgb(var(--theme-on-surface));
  line-height: 1;
  text-shadow: 0 1.4rem 3rem rgb(0 0 0 / 0.3);
}

.hero-section .hero-title-mixed,
.hero-section .hero-name,
.hero-section .hero-route {
  color: rgb(var(--theme-hero-text));
}

.hero-name {
  --font-wght: 820;
  --font-wdth: 116;
  --font-slnt: 0;
  position: relative;
  display: block;
  width: min-content;
  min-width: 6.2ch;
  max-width: 100%;
  color: rgb(var(--theme-on-surface));
  font-family: var(--cb-font-kinetic);
  font-size: clamp(3.65rem, 6.35vw, 6.6rem);
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wght" var(--font-wght),
    "wdth" var(--font-wdth),
    "slnt" var(--font-slnt);
  font-weight: 820;
  letter-spacing: -0.062em;
  line-height: 0.8;
  text-wrap: balance;
}

@supports (font-variation-settings: "wght" 700) {
  .hero-name {
    font-weight: normal;
  }
}

.hero-name::after {
  content: "";
  position: absolute;
  top: 0.03em;
  bottom: 0.01em;
  left: -0.13em;
  width: 0.035em;
  background: linear-gradient(180deg, rgb(var(--theme-hero-accent)), rgb(var(--theme-hero-muted) / 0.25), transparent 96%);
  transform-origin: top;
}

.hero-route {
  display: block;
  max-width: 15ch;
  margin-block-start: clamp(1.15rem, 2vw, 1.75rem);
  color: rgb(var(--theme-on-surface));
  font-family: var(--cb-font-editorial);
  font-optical-sizing: auto;
  font-size: clamp(2.15rem, 4.15vw, 4.35rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.hero-route__connector {
  display: inline-block;
  color: rgb(var(--theme-on-surface-variant));
  font-family: var(--cb-font-interface);
  font-size: 0.28em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: translateY(-0.28em);
}

.hero-section .hero-route__connector {
  color: rgb(var(--theme-hero-muted));
}

.hero-route em,
.type-emphasis {
  color: rgb(var(--theme-primary));
  font-family: var(--cb-font-editorial);
  font-optical-sizing: auto;
  font-style: italic;
  font-weight: 450;
}

.hero-section .hero-route em {
  color: rgb(var(--theme-hero-accent));
}

.type-anchor {
  display: inline;
  color: rgb(var(--theme-on-surface));
  font-family: var(--cb-font-interface);
  font-size: 0.76em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.typographic-headline {
  max-width: 18ch;
  text-wrap: balance;
}

.cb-name-inline {
  display: inline-block;
  color: rgb(var(--theme-primary));
  font-size: 1.32em;
  line-height: 0.88;
  vertical-align: -0.04em;
}

.signature-name {
  display: inline;
  color: rgb(var(--theme-primary));
  font-family: var(--cb-font-display);
  font-size: 1.42em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.84;
}

.signature-section .typographic-quote {
  max-width: 18ch;
  font-family: var(--cb-font-editorial);
  font-optical-sizing: auto;
  font-size: clamp(2.25rem, 4.2vw, 4.75rem);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.04;
  text-wrap: balance;
}

.book-popup__body .cb-name-inline {
  color: rgb(var(--theme-primary));
  font-size: 1.24em;
}

.footer-tagline-name {
  display: inline-block;
  margin-inline: 0.12em;
  color: rgb(var(--theme-on-surface));
  font-family: var(--cb-font-display);
  font-size: 1.45em;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.84;
  vertical-align: -0.08em;
}

@media (min-width: 64rem) {
  .hero-section > div:nth-of-type(2) {
    width: 58%;
  }
}

@media (max-width: 63.99rem) {
  .hero-title-mixed {
    max-width: 36rem;
  }

  .hero-name {
    font-size: clamp(3.45rem, 10.5vw, 6.25rem);
  }
}

@media (max-width: 47.99rem) {
  header .nav-cta {
    display: none;
  }

  header [data-i18n="nav-name"] {
    /* Expanded Archivo is wider than the previous serif; shrink the single-line
       wordmark on phones so "Carlos Bernardo" never overflows (tested @360px). */
    font-size: clamp(1.4rem, 6.6vw, 2.35rem);
  }

  .hero-title-mixed {
    max-width: 100%;
  }

  .hero-name {
    width: min-content;
    min-width: 6.2ch;
    font-size: clamp(3.6rem, 17vw, 5.25rem);
    line-height: 0.78;
  }

  .hero-route {
    max-width: 9ch;
    font-size: clamp(2.35rem, 12vw, 3.45rem);
  }

  footer [data-i18n="nav-name"] {
    /* Wraps to two lines ("Carlos" / "Bernardo"); cap size so the longest word
       fits a 360px line at 125% width. */
    font-size: clamp(2.9rem, 15vw, 5rem);
  }

  .signature-section .typographic-quote {
    font-size: clamp(2.5rem, 12.5vw, 3.65rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-name {
    --font-wght: 760;
    --font-wdth: 104;
    --font-slnt: 0;
  }

  .hero-name::after {
    transform: none;
  }
}

/* Nome proprio SEMPRE em caixa alta em titulos: hero + wordmark (nav/rodape) */
.hero-name,
[data-i18n="nav-name"] {
  text-transform: uppercase;
}

/* Mobile: hero menos centralizado verticalmente (ancora ao topo) */
@media (max-width: 63.99rem) {
  .hero-section { justify-content: flex-start !important; }
}

/* Header: wordmark compacto (largura normal) para NAO colidir com os links do menu */
header [data-i18n="nav-name"] {
  font-variation-settings: "wdth" 100 !important;
  font-size: 1.1rem !important;
  letter-spacing: -0.01em;
  white-space: nowrap;
}