/* fontes, base tipográfica e uns utilitários que uso em vários lugares */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/Montserrat-Variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/Montserrat-Italic-Variable.woff2') format('woff2-variations'),
       url('../assets/fonts/Montserrat-Italic-Variable.woff2') format('woff2');
}

html {
  scroll-behavior: auto; /* o smooth scroll é o Lenis quem cuida, em js/scroll.js */
  background: var(--color-navy-950);
}

body {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--color-fog);
  background: var(--color-navy-950);
  overflow-x: hidden;
}

body.is-loading {
  overflow: hidden;
}

/* ritmo tipográfico base */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

p {
  max-width: 62ch;
}

a {
  transition: color var(--dur-fast) var(--ease-out-quart);
}

/* utilitários de layout */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.section {
  position: relative;
  padding-block: clamp(5rem, 4rem + 6vw, 10rem);
}

.section--tight {
  padding-block: clamp(3.5rem, 3rem + 4vw, 6rem);
}

.section--dark {
  background: radial-gradient(ellipse 60% 55% at 88% 0%, rgba(173, 142, 68, 0.16), transparent 62%),
              radial-gradient(ellipse 50% 45% at 4% 100%, rgba(173, 142, 68, 0.09), transparent 60%),
              var(--color-navy-950);
  color: var(--color-fog);
}

.section--paper {
  background: var(--color-paper);
  color: var(--color-ink);
}

.section--paper-deep {
  background: var(--color-paper-deep);
  color: var(--color-ink);
}

.section-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: var(--z-base);
}

/* grade editorial de 12 colunas, assimétrica de propósito */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

/* tipografia utilitária */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-gold);
}

.eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

.eyebrow--plain::before {
  display: none;
}

/* o --color-gold só fecha contraste AA no fundo escuro. no fundo claro
   precisa do dourado mais escuro pra dar pra ler direito */
.section--paper .eyebrow {
  color: var(--color-gold-dark);
}

/* --color-paper-deep é o champagne oficial, e dourado em cima de dourado
   não fecha contraste em texto pequeno. então aqui vai navy mesmo */
.section--paper-deep .eyebrow {
  color: var(--color-ink);
}

.display-xl {
  font-size: var(--text-display-xl);
  font-weight: 800;
  letter-spacing: var(--tracking-tightest);
  line-height: var(--leading-tight);
}

.display-l {
  font-size: var(--text-display-l);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.display-m {
  font-size: var(--text-display-m);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.heading-l {
  font-size: var(--text-heading-l);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

.heading-m {
  font-size: var(--text-heading-m);
  font-weight: 600;
}

.body-l {
  font-size: var(--text-body-l);
  line-height: var(--leading-relaxed);
  font-weight: 400;
}

.text-muted {
  color: var(--color-fog-dim);
}

.text-slate {
  color: var(--color-slate);
}

.text-gold {
  color: var(--color-gold);
}

.on-dark {
  color: var(--color-white);
}

.accent {
  font-style: italic;
  font-weight: inherit;
  color: var(--color-gold);
}

.section--dark .accent {
  color: var(--color-gold-light);
}

.section--paper .accent,
.section--paper-deep .accent {
  color: var(--color-gold-dark);
}

.numeral {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* divisores de marca */
.hairline {
  height: 1px;
  width: 100%;
  background: var(--color-hairline-dark);
}

.section--paper .hairline,
.section--paper-deep .hairline {
  background: var(--color-hairline-light);
}

.hairline-vertical {
  width: 1px;
  align-self: stretch;
  background: var(--color-hairline-dark);
}

/* scrollbar mais discreta, só pra não ficar aquela barra cinza padrão do Windows */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-navy-950);
}

::-webkit-scrollbar-thumb {
  background: var(--color-navy-700);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-navy-950);
}

/* lazy-load de imagem com fade suave em vez de aparecer de repente */
img[loading='lazy'] {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out-quart);
}

img[loading='lazy'].is-loaded {
  opacity: 1;
}