:root{
  --paper:#faf6ef; --ink:#2b2620; --ink-soft:#6b6259; --line:#d8cfc2;
  --d70:#b4552d; --d80:#a4731a; --d90:#3f6b4f; --d00:#3d5a80; --d10:#7d4a6f; --d20:#8a6d3b;
}
*{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;display:flex;flex-direction:column;justify-content:center;padding:8vw 7vw;border-bottom:1px solid var(--line)}
.hero .eyebrow{font-size:clamp(15px,1.8vw,19px);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:1.2em}
.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{margin-top:2.5em;font-size:clamp(16px,1.9vw,20px);letter-spacing:.22em;color:var(--d70)}
.hero .dica{margin-top:4em;font-size:16px;color:var(--ink-soft)}
.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:color-mix(in srgb, var(--paper) 92%, transparent);backdrop-filter:blur(6px);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:18px;color:var(--ink-soft);text-decoration:none;letter-spacing:.06em}
nav a strong{color:var(--ink)}
nav a:active{background:var(--line)}

/* ---------- capítulos ---------- */
.cap{padding:10vw 7vw 4vw;scroll-margin-top:64px}
.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-anos70 .decada,.cap-anos70 .ano{color:var(--d70)} .cap-anos80 .decada,.cap-anos80 .ano{color:var(--d80)}
.cap-anos90 .decada,.cap-anos90 .ano{color:var(--d90)} .cap-anos2000 .decada,.cap-anos2000 .ano{color:var(--d00)}
.cap-hoje .decada,.cap-hoje .ano{color:var(--d20)}

/* ---------- eventos ---------- */
.evento{position:relative;padding:2.2em 0 2.2em 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}
.cap-anos70 .evento::before{color:var(--d70)} .cap-anos80 .evento::before{color:var(--d80)}
.cap-anos90 .evento::before{color:var(--d90)} .cap-anos2000 .evento::before{color:var(--d00)} .cap-hoje .evento::before{color:var(--d20)}
.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:34em;color:#453e35}
.evento .cat{color:var(--ink-soft)}
.foto{margin-top:1.2em;max-width:30em}
.foto .ph{aspect-ratio:4/3;background:linear-gradient(135deg,#e9e1d4,#d8cfc2);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:15px;color:var(--ink-soft);margin-top:.5em;font-style:italic}

/* ---------- arquivo ---------- */
.arquivo{margin:10vw 7vw;padding:3em;border:1px solid var(--line);background:#f3ecdf;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:30em;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:17px;border-top:1px solid var(--line)}
footer .coracao{color:var(--d70)}

/* vídeo clique-para-carregar */
.video-lazy{position:relative;margin-top:1.2em;max-width:34em;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)}
.cap-anos2010 .decada,.cap-anos2010 .ano{color:var(--d10)} .cap-anos2010 .evento::before{color:var(--d10)}
.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)}