:root{
  --paper:#f7f7f4; --ink:#23282c; --ink-soft:#5c646b; --line:#d9dad6; --acento:#1f5f66;
  --d70:#1f5f66; --d80:#2c4a6e; --d90:#2e5a3f; --d00:#6e2f3c; --d10:#4a5568; --d20:#8a5a2a;
  --medida-texto:560px; --medida-midia:640px;
}
*{margin:0;padding:0;box-sizing:border-box}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{background:var(--paper);color:var(--ink);font-family:Georgia,'Iowan Old Style','Times New Roman',serif;line-height:1.6}

/* ---------- abertura ---------- */
.hero{min-height:92vh;min-height:92svh;display:flex;flex-direction:column;justify-content:center;padding:8vw 7vw;border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(46px,9vw,110px);line-height:1.02;font-weight:400;letter-spacing:-.01em}
.hero .sub{margin-top:1.4em;font-size:clamp(19px,2.4vw,26px);font-style:italic;color:var(--ink-soft);max-width:22em}
.hero .anos{align-self:flex-start;margin-top:2.4em;padding-top:.9em;border-top:1px solid var(--line);font-size:clamp(19px,1.9vw,22px);letter-spacing:.2em;color:var(--acento)}
.hero .dica{margin-top:auto;padding-top:2.6em;font-size:21px;color:var(--ink)}
.hero .dica span{display:inline-block;animation:desce 2.2s ease-in-out infinite}
@keyframes desce{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
@media (prefers-reduced-motion: reduce){.hero .dica span{animation:none}}

/* ---------- navegação por década ---------- */
nav{position:sticky;top:0;background:var(--paper);border-bottom:1px solid var(--line);z-index:9;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
nav a{display:inline-block;padding:16px 22px;font-size:19px;color:var(--ink-soft);text-decoration:none;letter-spacing:.06em;white-space:nowrap}
nav a strong{color:var(--ink)}
nav a:active{background:var(--line)}
#nav-decadas .sec{color:var(--ink)}
#nav-decadas .quebra{display:none}
#nav-decadas .quebra + a.sec{border-left:1px solid var(--line);margin-left:10px;padding-left:26px}
#nav-decadas a{box-shadow:inset 0 -4px 0 transparent}
#nav-decadas a.atual{color:var(--cor,var(--ink));box-shadow:inset 0 -4px 0 var(--cor,var(--ink))}
#nav-decadas a.atual strong{color:inherit}
@media (min-width:700px){
  nav{display:flex;flex-wrap:wrap;overflow:visible;white-space:normal}
  nav a{padding:16px clamp(10px,1.6vw,22px)}
  #nav-decadas .quebra{display:block;flex-basis:100%;height:0}
  #nav-decadas .quebra + a.sec{border-left:0;margin-left:0;padding-left:clamp(10px,1.6vw,22px)}
}
@media (max-width:480px){nav.menu a{padding:16px 12px}}
@media (max-width:699px){
  nav{background-color:var(--paper);background-image:linear-gradient(to right,var(--paper),var(--paper)),linear-gradient(to left,var(--paper),var(--paper)),linear-gradient(to right,rgba(35,40,44,.20),rgba(35,40,44,0)),linear-gradient(to left,rgba(35,40,44,.20),rgba(35,40,44,0));background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:24px 100%,24px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
}
#filtros{background-color:var(--paper);background-image:linear-gradient(to right,var(--paper),var(--paper)),linear-gradient(to left,var(--paper),var(--paper)),linear-gradient(to right,rgba(35,40,44,.20),rgba(35,40,44,0)),linear-gradient(to left,rgba(35,40,44,.20),rgba(35,40,44,0));background-position:left center,right center,left center,right center;background-repeat:no-repeat;background-size:24px 100%,24px 100%,14px 100%,14px 100%;background-attachment:local,local,scroll,scroll}
footer nav{position:static;display:block;overflow:visible;white-space:normal;background:none;border-bottom:0;z-index:auto}

/* ---------- menu do site (subpáginas) ---------- */
nav.menu a{line-height:24px;padding:16px 18px}
nav.menu a[aria-current="page"]{color:var(--ink);font-weight:700}

/* ---------- motion (só com JS + sem reduced-motion: classe .anim no body) ---------- */
@media (prefers-reduced-motion: no-preference){
  .anim .evento,.anim .cap header,.anim .clip{opacity:0;transform:translateY(14px);transition:opacity .55s ease-out,transform .55s cubic-bezier(.22,1,.36,1)}
  .anim .evento.vis,.anim .cap header.vis,.anim .clip.vis{opacity:1;transform:none}
  .anim .evento::before{transform:scale(.4);transition:transform .45s .15s cubic-bezier(.34,1.56,.64,1)}
  .anim .evento.vis::before{transform:scale(1)}
}

/* ---------- capítulos ---------- */
.cap{padding:10vw 7vw 4vw;scroll-margin-top:64px}
@media (min-width:700px){.cap{scroll-margin-top:134px}}
.cap header{margin-bottom:2em}
.cap .decada{font-size:clamp(64px,14vw,150px);line-height:1;font-weight:400;letter-spacing:-.02em}
.cap .tema{font-size:clamp(19px,2.3vw,25px);font-style:italic;color:var(--ink-soft);margin-top:.4em;max-width:26em}
.cap .decada,.cap .ano{color:var(--cor,var(--ink))}
.cap .evento::before{color:var(--cor,var(--ink))}

/* ---------- eventos ---------- */
.evento{position:relative;padding:2.6em 0 2.6em 2em;border-left:2px solid var(--line);margin-left:.4em}
.evento::before{content:"";position:absolute;left:-8px;top:3.1em;width:14px;height:14px;border-radius:50%;background:var(--paper);border:3px solid currentColor}
.ano{font-size:clamp(34px,5.5vw,54px);line-height:1}
.cat{font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);margin-top:.6em}
.evento h3{font-size:clamp(22px,3vw,30px);font-weight:400;margin-top:.35em;line-height:1.25}
.evento p{margin-top:.7em;font-size:clamp(19px,2.2vw,21px);max-width:var(--medida-texto);line-height:1.72;color:#3a4046}
.evento p.cat{font-size:17px;letter-spacing:.12em;margin-top:.9em;color:var(--ink-soft)}
.evento .cat{color:var(--ink-soft)}
.evento p.toque{font-size:19px;color:var(--ink-soft);margin:0 0 .45em;max-width:none}
.foto{margin-top:1.2em;max-width:var(--medida-midia)}
.foto .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#e8eae6,#d9dad6);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-style:italic;font-size:17px;text-align:center;padding:1em}
.foto figcaption{font-size:17px;color:var(--ink-soft);margin-top:.5em;font-style:italic}

/* ---------- arquivo ---------- */
.arquivo{margin:10vw 7vw;padding:3em;border:1px solid var(--line);background:#eef0ed;text-align:center}
.arquivo h2{font-size:clamp(26px,4vw,38px);font-weight:400}
.arquivo p{margin-top:.8em;font-size:19px;color:var(--ink-soft);max-width:var(--medida-texto);margin-left:auto;margin-right:auto}
.arquivo .btn{display:inline-block;margin-top:1.6em;padding:1em 2.4em;border:2px solid var(--ink);font-size:19px;color:var(--ink);text-decoration:none;letter-spacing:.08em}

footer{padding:5em 7vw 6em;text-align:center;color:var(--ink-soft);font-size:19px;border-top:1px solid var(--line)}

/* vídeo clique-para-carregar */
.video-lazy{position:relative;margin-top:1.2em;max-width:var(--medida-midia);cursor:pointer;border:1px solid var(--line);background:#000;aspect-ratio:16/9;display:block;width:100%;padding:0}
.video-lazy img{width:100%;height:100%;object-fit:cover;opacity:.85;display:block}
.video-lazy .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:64px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.video-lazy iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-lazy:focus-visible{outline:3px solid var(--d00);outline-offset:2px}
.foto img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.carregando{padding:4em 7vw;font-style:italic;color:var(--ink-soft)}
.video-nativo video{width:100%;display:block;background:#000;aspect-ratio:16/9;border:1px solid var(--line)}
.foto.video-nativo{max-width:640px}

/* fonte externa da mídia */
.fonte-media{display:inline-block;max-width:100%;margin-top:.3em;padding:.8em 0;font-size:14px;font-style:normal;color:var(--ink-soft);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em;overflow-wrap:anywhere}

/* fonte do evento (texto da timeline) */
.fonte-evento{margin-top:.9em;font-size:14px;color:var(--ink-soft);overflow-wrap:anywhere}
.fonte-evento a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.2em}