@property --c-sobre {
  syntax: '<color>';
  inherits: true;
  initial-value: #f6f0e7;
}

:root {
  /* cores (tiradas da foto) */
  --c-papel: #f3ece2;
  --c-papel-luz: #faf6ee;
  --c-tinta: #2c1b17;
  --c-tinta-2: #6d5750;
  --c-pele: #bb9588;
  --c-pessego: #ecd0c1;
  --c-taupe: #b7a297;
  --c-estante: #1a181b;
  --c-vermelho: #d8011b;
  --c-fio: color-mix(in oklab, var(--c-tinta) 22%, transparent);

  /* fontes */
  --c-serif: "EB Garamond", "Garamond", "Times New Roman", serif;
  --c-sans: "Lexend", system-ui, sans-serif;

  /* espaços e medidas */
  --c-pad: clamp(24px, 4.4vw, 72px);
  --c-nav-h: 84px;
  --c-hero-h: max(100svh, 720px);
  --c-foto: min(var(--c-hero-h), 64vw);
  --c-corte: .095; /* quanto da foto sai pela direita */
  --c-giga: min(27vw, 40vh);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-papel);
  color: var(--c-tinta);
  font-family: var(--c-sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }

/* ================= base comum das seções (prefixo vg-) ================= */
:root {
  --c-noite: #1d1513;          /* seção escura: a estante */
  --c-noite-2: #2c1b17;
  --c-sobre-noite: #f1e7dc;    /* texto sobre a seção escura */
  --c-apoio-noite: #c9b6a8;
  --c-vinho: #9f0108;          /* vermelho de texto pequeno sobre papel (AA) */
  --vg-curva: cubic-bezier(.2, .65, .2, 1);
  --vg-sec-y: clamp(88px, 11vw, 176px);
  --vg-max: 1440px;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--c-vermelho); outline-offset: 4px; }
::selection { background: var(--c-tinta); color: var(--c-papel-luz); }
.vg-pular { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--c-tinta); color: var(--c-papel-luz); padding: 10px 16px; font: 400 14px var(--c-sans); }
.vg-pular:focus { left: 8px; }

/* granulado único, fixo, por cima da página inteira (as seções NÃO criam o próprio) */
.vg-grao {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.c-grao { display: none; }

/* seção */
.vg-sec { position: relative; padding: var(--vg-sec-y) var(--c-pad); }
/* rótulo miúdo com fio em cima (igual ao .c-meta do hero) */
.vg-rot { margin: 0; font: 500 10px/1.4 var(--c-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-tinta-2); }
/* a palavra gigante em itálico que abre cada seção */
.vg-giga { margin: 0; font-family: var(--c-serif); font-style: italic; font-weight: 400; font-size: clamp(84px, 19vw, 300px); line-height: .86; letter-spacing: -.028em; color: var(--c-tinta); }
/* linha de itálicos separados por ponto: o que a palavra guarda */
.vg-notas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; font: italic 400 clamp(17px, 1.45vw, 22px)/1.3 var(--c-serif); color: var(--c-tinta); }
.vg-notas li + li::before { content: "·"; font-style: normal; margin: 0 .7em; opacity: .6; }
/* títulos e textos */
.vg-t { margin: 0; font: 400 clamp(30px, 3.6vw, 54px)/1.06 var(--c-serif); letter-spacing: -.012em; color: var(--c-tinta); text-wrap: balance; }
.vg-t em { font-style: italic; }
.vg-voz { margin: 0; font: italic 400 clamp(22px, 2.1vw, 31px)/1.2 var(--c-serif); color: var(--c-tinta); }
.vg-txt { margin: 0; font: 300 clamp(15px, 1.12vw, 16.5px)/1.7 var(--c-sans); color: var(--c-tinta); max-width: 60ch; }
.vg-txt strong { font-weight: 500; }
.vg-fonte { font: 400 11.5px/1.5 var(--c-sans); letter-spacing: .02em; color: var(--c-tinta-2); }
/* botão e link (iguais aos do hero) */
.vg-botao { display: inline-flex; align-items: center; gap: 12px; height: 54px; padding: 0 26px 0 22px; border-radius: 2px; background: var(--c-tinta); color: var(--c-papel-luz); font: 400 14.5px var(--c-sans); letter-spacing: .01em; text-decoration: none; white-space: nowrap; box-shadow: 0 14px 30px -16px rgba(44, 27, 23, .7); transition: background-color .4s ease, transform .4s var(--vg-curva); }
.vg-botao svg { width: 18px; height: 18px; flex: none; }
.vg-botao:hover, .vg-botao:focus-visible { background: #45291f; transform: translateY(-2px); }
.vg-link { font: 400 13.5px var(--c-sans); color: inherit; text-decoration: none; padding: 8px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--vg-curva); }
.vg-link:hover { background-size: 40% 1px; }

/* entrada na rolagem: só esconde se o JS estiver ativo. Use data-vg (e style="--vg-d: .2s" para atrasar) */
.vg-js [data-vg] { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(4px); transition: opacity 1.1s var(--vg-curva) var(--vg-d, 0s), transform 1.1s var(--vg-curva) var(--vg-d, 0s), filter 1.1s var(--vg-curva) var(--vg-d, 0s); }
.vg-js [data-vg="surge"] { transform: none; filter: none; }
.vg-js [data-vg].vg-on { opacity: 1; transform: none; filter: none; }

/* botão do WhatsApp que acompanha a rolagem no celular */
.vg-zap { display: none; }
@media (max-width: 820px) {
  .vg-zap { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; display: flex; justify-content: center; transform: translateY(140%); transition: transform .6s var(--vg-curva); }
  .vg-zap.vg-on { transform: none; }
  .vg-zap .vg-botao { width: 100%; justify-content: center; height: 56px; border: 1px solid rgba(246, 240, 231, .24); box-shadow: 0 16px 34px -12px rgba(44, 27, 23, .75); }
  body { padding-bottom: 0; }
}

/* movimento reduzido: reset geral */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .vg-js [data-vg] { opacity: 1; transform: none; filter: none; }
}