[hidden]{display:none !important}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:72px}
body{
  margin:0;background:var(--bg);color:var(--fg);overflow-x:clip;
  font-family:var(--f-body);font-size:var(--t-base);line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"kern" 1;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0;text-align:inherit}
input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:300;font-optical-sizing:auto;line-height:1;letter-spacing:-.02em;margin:0;color:var(--fg);text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
figure{margin:0}
::selection{background:var(--metal);color:var(--char-0)}
:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:1px}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.sec{position:relative;padding-top:var(--section);padding-bottom:var(--section)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nw{white-space:nowrap}
.tnum{font-variant-numeric:tabular-nums}
.skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--char-1);color:var(--ivory-1);padding:.7rem 1rem}
.skip:focus{top:1rem}

/* Rótulo de seção: número + nome, como o fólio de uma revista */
.folio{display:flex;align-items:baseline;gap:.7rem;font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-2)}
.folio b{font-family:var(--f-display);font-weight:400;font-size:1.05rem;letter-spacing:0;color:var(--accent)}

/* ==========================================================================
   Movimento — todo estado inicial vive sob .anim, que só o JS mantém.
   Sem JS (ou se o JS não subir em 2,5 s), nada aqui se aplica.
   ========================================================================== */
.anim .rev{opacity:0;transform:translate3d(0,28px,0);transition:opacity .9s var(--ease-out) var(--d,0s),transform 1.1s var(--ease-out) var(--d,0s)}
.anim .rev.vis{opacity:1;transform:none}

/* títulos: cada palavra numa máscara; o atraso é por LINHA, então a linha sobe inteira */
.anim .split .word{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .04em .16em 0;margin:-.16em -.04em -.16em 0}
.anim .split .word__inner{display:inline-block;transform:translate3d(0,135%,0);transition:transform 1.15s var(--ease-out) var(--d,0s)}
.anim .split.vis .word__inner{transform:none}

/* fotos: recorte que sobe + escala que assenta */
.anim .ph{clip-path:inset(100% 0 0 0);transition:clip-path 1.25s var(--ease-io) var(--d,0s)}
.anim .ph img{transform:scale(1.18);transition:transform 1.9s var(--ease-out) var(--d,0s)}
.anim .ph.vis{clip-path:inset(0 0 0 0)}
.anim .ph.vis img{transform:scale(1)}

/* entrada do cabeçalho */
.anim .hd .intro{opacity:0;transform:translate3d(0,-14px,0);transition:opacity .7s var(--ease-out) var(--d,0s),transform .9s var(--ease-out) var(--d,0s)}
.is-in .hd .intro{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .anim .rev,.anim .rev.vis{opacity:1 !important;transform:none !important;transition:none !important}
  .anim .split .word__inner{transform:none !important;transition:none !important}
  .anim .ph,.anim .ph.vis{clip-path:none !important;transition:none !important}
  .anim .ph img,.anim .ph.vis img{transform:none !important;transition:none !important}
  .anim .hd .intro{opacity:1 !important;transform:none !important;transition:none !important}
  .js .adv__stack img{transition:none !important}
  .adv__poses button::before{display:none}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;animation-delay:0s !important}
}