:root{
  --paper:#FBF8F2;--cream:#F1E7D6;--bordo:#6C1D2C;--bordo-d:#4E1420;
  --ink:#2B2325;--soft:#5E5255;--line:rgba(43,35,37,.14);
  --ease:cubic-bezier(.16,1,.3,1);
  --serif:"Fraunces","Iowan Old Style",Georgia,serif;
  --sans:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:clamp(1.25rem,5vw,4rem);--hh:4.5rem
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 1rem);-webkit-text-size-adjust:100%}
body{font:300 1.0625rem/1.7 var(--sans);color:var(--ink);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
/* grão: pseudo-elemento fixo, sem eventos, rasterizado uma vez */
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img,svg{display:block;max-width:100%}
a{color:inherit}
ul,ol{list-style:none;padding:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.1;letter-spacing:-.02em}
h1{font-size:clamp(2rem,1.2rem + 3.2vw,3.4rem);margin:1rem 0 1.5rem;max-width:20ch}
h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem)}
h3{font-size:1.5rem}
em{font-style:italic;color:var(--bordo)}
p{max-width:62ch;color:var(--soft)}
b{font-weight:500;color:var(--ink)}
.wrap{width:min(100% - 2*var(--gut),1280px);margin-inline:auto}
.eyebrow{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bordo);font-weight:500}
.lead{font-size:1.15rem;max-width:52ch}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--bordo);color:var(--paper);padding:.6rem 1rem;border-radius:.5rem;z-index:200}
.skip:focus{top:1rem}
.ico{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:none}

.btn{--mx:0px;--my:0px;--s:1;display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;border-radius:999px;
  background:var(--bordo);color:var(--paper);text-decoration:none;font-weight:500;line-height:1.2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 14px 26px -14px rgba(108,29,44,.55);
  transform:translate3d(var(--mx),var(--my),0) scale(var(--s));
  transition:transform .35s var(--ease),background-color .3s}
.btn:hover{background:var(--bordo-d)}
.btn:active{--s:.97}
.btn--light{background:var(--paper);color:var(--bordo);box-shadow:none}
.btn--light:hover{background:var(--cream)}
.link{color:var(--bordo);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.link:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--bordo);outline-offset:3px}
.dark :focus-visible,.dark:focus-visible{outline-color:var(--paper)}

/* entrada da hero (só transform/opacity; h1 fica estático p/ não atrasar o LCP) */
.hero__in{animation:rise .6s var(--ease) both;animation-delay:var(--d,0ms)}
@keyframes rise{from{opacity:0;transform:translate3d(0,1rem,0)}}

/* reveal ao rolar, títulos, flutuação e parallax: ver css/motion.css */

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__in{animation:none}
  .btn{transition:none}
}