/* ============================================================
   Atelier Luquet — base (v3)
   Fontes self-hosted, reset, tipografia e primitivas.
   ============================================================ */

/* --- fontes (assets/fonts, subset latin) --------------------- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/playfair-display-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/playfair-display-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("../assets/fonts/playfair-display-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 300; font-display: swap;
  src: url("../assets/fonts/jost-latin-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Jost";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("../assets/fonts/jost-latin-400-normal.woff2") format("woff2");
}

/* --- reset ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--bg);
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
  /* a página é um app de painéis: a rolagem acontece dentro de cada painel */
  overflow: hidden;
  overscroll-behavior: none;
}

h1, h2, h3, h4, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; background: var(--al-ink-08); }

a { color: inherit; text-decoration: none; }
address { font-style: normal; }

button {
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0;
  cursor: pointer;
}

input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--al-oxblood); color: var(--al-paper); }

/* --- foco ----------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
  border-radius: 1px;
}
/* sobre a fotografia o oxblood some: o foco fica branco */
html:not(.is-panel) :focus-visible { outline-color: var(--on-photo); }

/* --- utilitários ---------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.skip {
  position: fixed; top: -100px; left: var(--gutter);
  z-index: 200;
  padding: 10px 16px;
  background: var(--fg); color: var(--bg);
  font-size: var(--fs-xs); letter-spacing: var(--tr-wide); text-transform: uppercase;
  transition: top var(--d-1) var(--e-out);
}
.skip:focus-visible { top: 12px; }

/* --- primitivas de tipo --------------------------------------- */

/* microtexto em caixa alta — numeração, veículo, ano, rótulos */
.label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg-mute);
}

/* título de bloco dentro da coluna — serifada, pequena */
.title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-title);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
}
.title--lg { font-size: var(--fs-xl); }

/* título curto em caixa alta — os cabeçalhos que o cliente escreveu */
.kicker {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tr-widest);
  text-transform: uppercase;
  color: var(--fg);
}

/* frase de abertura de bloco */
.lede {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-lede);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  max-width: var(--measure);
}

/* corpo */
.body {
  font-size: var(--fs-base);
  font-weight: 300;
  line-height: var(--lh-body);
  color: var(--fg-soft);
  max-width: var(--measure);
}

/* frase-manifesto, serifada itálica */
.statement {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: var(--lh-lede);
  color: var(--fg);
  max-width: var(--measure);
}

/* sublinhado que cresce da esquerda */
.ln {
  position: relative;
  display: inline-block;
  padding-bottom: 1px;
}
.ln::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-2) var(--e-out), opacity var(--d-2) var(--e-out);
}
.ln:hover::after,
.ln:focus-visible::after { transform: scaleX(1); opacity: .9; }

/* CTA entre colchetes — o gesto veio do próprio briefing do cliente.
   Layout em linha (não flex) para que o "]" acompanhe a última palavra
   quando o rótulo quebra em duas linhas no celular. */
.cta {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--fg);
  padding: 13px 0;                 /* alvo de toque de 44px com uma linha */
  transition: color var(--d-2) var(--e-out);
}
.cta__b {
  display: inline-block;
  color: var(--fg-mute);
  transition: transform var(--d-3) var(--e-out), color var(--d-2) var(--e-out);
}
.cta__b:first-child { margin-right: .34em; letter-spacing: 0; }
.cta__b:last-child  { margin-left: .34em; letter-spacing: 0; }
.cta:hover, .cta:focus-visible { color: var(--accent); }
.cta:hover .cta__b, .cta:focus-visible .cta__b { color: var(--accent); }
.cta:hover .cta__b:first-child,
.cta:focus-visible .cta__b:first-child { transform: translateX(-5px); }
.cta:hover .cta__b:last-child,
.cta:focus-visible .cta__b:last-child { transform: translateX(5px); }

/* --- marca ---------------------------------------------------- */
.wordmark { width: 100%; height: auto; fill: currentColor; }
.mono { fill: currentColor; }

/* --- movimento reduzido --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}