/* Cassia & Leonardo — base comum das aberturas de teste */
:root{
  --maroon:#380001; --jam:#5F0F08; --blush:#985657;
  --pistache:#8D8A45; --pear:#ADAF80;
  --veil:#FFF9E9; --butter:#FFE89F; --ouro:#C9A24A;
  --serif:"Cormorant Garamond", Georgia, serif;
  --script:"Pinyon Script", cursive;
  --sans:"Jost", system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;background:var(--veil)}
body{font-family:var(--serif);color:var(--maroon);background:var(--veil);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
svg{display:block}

/* papel com granulado leve */
.papel{position:absolute;inset:0;pointer-events:none;opacity:.35;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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .35 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* controles finos */
.progresso{position:fixed;left:0;top:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--ouro);z-index:60}
.pular,.voltar{position:fixed;top:16px;z-index:50;font:500 10.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;
  background:rgba(255,249,233,.86);color:var(--maroon);border:1px solid rgba(56,0,1,.35);border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none}
.pular{right:16px}.voltar{left:16px}
.pular:hover,.voltar:hover{background:var(--veil);border-color:var(--maroon)}
.dica{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;
  font:500 10.5px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;z-index:20;pointer-events:none;white-space:nowrap}
.dica i{width:1px;height:30px;background:currentColor;transform-origin:top;animation:dica 1.8s ease-in-out infinite}
@media (max-width:760px){.dica{letter-spacing:.16em;font-size:9.5px}}
@keyframes dica{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* bloco de nomes (logo vetorial + data) */
.nomes{position:absolute;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;text-align:center;color:var(--maroon)}
.nomes .mono{color:var(--jam)}
.nomes .mono svg,.nomes .logo svg{width:100%;height:100%}
.data{font:300 clamp(20px,3.4vh,34px)/1 var(--sans);letter-spacing:.14em;color:var(--pistache)}
.cidade{font:500 clamp(10px,1.45vh,13px)/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--maroon);margin-top:1.3vh}

/* continuação do site (só para mostrar a passagem) */
.depois{position:relative;min-height:100vh;background:var(--veil);display:grid;place-items:center;text-align:center;padding:90px 24px;overflow:hidden}
.depois .kicker{font:500 11px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--pistache)}
.depois h2{font:400 clamp(44px,6vw,86px)/1 var(--serif);max-width:14ch;margin:16px auto 20px}
.depois h2 em{font:400 1.1em/1 var(--script);color:var(--jam);font-style:normal}
.depois p{max-width:50ch;margin:0 auto 22px;font-size:20px;line-height:1.55}
.depois .nota{font:500 11px/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;opacity:.6}
.rodape{background:var(--maroon);color:var(--veil);text-align:center;padding:20px;font:400 12px/1.4 var(--sans);letter-spacing:.06em}
.rodape a{color:var(--butter);text-decoration:none}