/* Australian Culture · BiblioVerse
   Uma viagem em 13 paradas. Cada parada tem a sua cor (--c) e a cor do texto sobre ela (--fg),
   definidas no script. Paleta base: areia, tinta, terra vermelha, wattle, eucalipto, mar. */
@view-transition{navigation:auto}
:root{
  --bg:#f4ead8;
  --paper:#fbf4e6;
  --paper-2:#eadcc2;
  --ink:#1b120c;
  --ink-2:#4a3b2f;
  --muted:#7d6b5a;
  --line:rgba(27,18,12,.14);
  --ochre:#c2410c;
  --wattle:#f5b700;
  --gum:#1f6f4a;
  --sea:#0b5d8c;
  --chip:#e8d9bd;
  --night:#120e0b;
  --hero-a:#ffd27a;
  --hero-b:#f28c3a;
  --hero-c:#c2410c;
  --rock:#7c2d12;
  --c:#c2410c;
  --fg:#fff8ea;
  --bar:0px; /* a superbar do BiblioVerse rola junto com a página; só o cabeçalho do site fica preso */
  --sb:44px; /* altura da superbar, usada para a capa caber na primeira tela */
  --head:62px;
  --display:'Jaro',Impact,'Arial Narrow',sans-serif;
  --body:'Google Sans Flex',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Google Sans Flex',system-ui,sans-serif;
  --lacquer:'Lacquer','Comic Sans MS',cursive;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#120e0b;--paper:#1c1612;--paper-2:#2a211a;--ink:#f6ecdc;--ink-2:#d9c9b4;--muted:#a2907c;
    --line:rgba(246,236,220,.14);--chip:#2a211a;--hero-a:#1b2340;--hero-b:#3b2a4a;--hero-c:#6b2c1c;--rock:#2e1208;color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#120e0b;--paper:#1c1612;--paper-2:#2a211a;--ink:#f6ecdc;--ink-2:#d9c9b4;--muted:#a2907c;
  --line:rgba(246,236,220,.14);--chip:#2a211a;--hero-a:#1b2340;--hero-b:#3b2a4a;--hero-c:#6b2c1c;--rock:#2e1208;color-scheme:dark;
}

*{box-sizing:border-box}
#bvbar{position:absolute!important}
html{scroll-padding-top:calc(var(--bar) + var(--head) + 14px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--body);overflow-x:hidden}
body.gated,body.menu-open{overflow:hidden}
a{color:inherit}
img,svg{display:block}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--wattle);outline-offset:3px;border-radius:6px}
.wrap{width:min(1240px,100% - 40px);margin-inline:auto}
@media (max-width:600px){.wrap{width:calc(100% - 32px)}}
.mono{font:500 12px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
h1,h2,h3{font-family:var(--display);font-optical-sizing:auto;font-weight:400;font-synthesis:none}

/* retícula (textura de impressão) */
.phead::after,.gate::after,.nextstop::after,.act-time .time-stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle,rgba(0,0,0,.16) 1px,transparent 1.4px) 0 0/7px 7px;mix-blend-mode:multiply;opacity:.35}

/* borda serrilhada de ingresso (em cima e embaixo) */
.ticket{-webkit-mask:radial-gradient(circle at 50% 0,#0000 6px,#000 6.5px) top/18px 51% repeat-x,radial-gradient(circle at 50% 100%,#0000 6px,#000 6.5px) bottom/18px 51% repeat-x;
  mask:radial-gradient(circle at 50% 0,#0000 6px,#000 6.5px) top/18px 51% repeat-x,radial-gradient(circle at 50% 100%,#0000 6px,#000 6.5px) bottom/18px 51% repeat-x}

/* ============ TOPO ============ */
.top{position:sticky;top:var(--bar);z-index:70;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:10px;height:var(--head)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo svg{width:32px;height:32px}
.logo b{font:400 19px/1 var(--display);letter-spacing:0;white-space:nowrap}
.spacer{flex:1}
.tbtn{flex:none;height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;background:var(--chip);border-radius:999px;padding:0 14px;cursor:pointer;font-size:14px;font-weight:600}
.tbtn:hover{background:var(--ink);color:var(--bg)}
.tbtn svg,.search .in svg,.totop svg,.levels svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tbtn kbd{font:500 11px var(--mono);opacity:.6}
#menuBtn[aria-expanded="true"]{background:var(--ink);color:var(--bg)}
.tbtn.lang{text-decoration:none;font-weight:700;letter-spacing:.06em;font-size:13px}
@media (max-width:760px){.tbtn .lbl,.tbtn kbd{display:none}.tbtn{padding:0}}
@media (max-width:480px){.top .wrap{gap:6px}.logo{gap:8px}.logo svg{width:28px;height:28px}.logo b{font-size:16px}.tbtn{height:36px;min-width:36px}}
@media (max-width:350px){.logo b{font-size:14px}.tbtn{height:32px;min-width:32px}}

/* menu de paradas: 16 blocos (início, 14 paradas, sobre) numa grade sem sobras:
   4 colunas na tela grande, 2 no tablet e no celular */
.menu{position:fixed;inset:var(--head) 0 0;z-index:69;background:var(--bg);overflow:auto;padding:20px 0 40px}
.menu ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:1fr;gap:10px}
.menu li{display:flex;opacity:0;transform:translateY(-14px);animation:menuIn .5s var(--e-out) forwards;animation-delay:calc(var(--k,0) * 28ms)}
@keyframes menuIn{to{opacity:1;transform:none}}
.menu li a{position:relative;overflow:hidden;flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:10px;min-height:118px;text-decoration:none;padding:16px 84px 16px 18px;border-radius:16px;background:var(--c);color:var(--fg);transition:transform .35s var(--spring),box-shadow .25s}
.menu li a .mono,.menu li a .lq,.menu li a small{color:inherit;opacity:.78}
.menu li a b{display:block;font:400 26px/1 var(--display)}
.menu li a small{display:block;font-size:13.5px;line-height:1.3;margin-top:4px}
.menu li a .art{position:absolute;right:10px;top:50%;width:64px;height:64px;margin-top:-32px;transform-origin:50% 100%}
.menu li a:hover .art{animation:jump .85s var(--e-out)}
.menu li a[aria-current]{box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--ink)}
.menu li:last-child{grid-column:span 3}
.menu li:last-child a{min-height:84px;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}
@media (max-width:1023px){.menu ol{grid-template-columns:repeat(2,minmax(0,1fr))}.menu li:last-child{grid-column:span 1}.menu li:last-child a{flex-direction:column;align-items:stretch;justify-content:space-between;gap:10px}}
@media (max-width:420px){.menu li a{min-height:104px;padding:14px}.menu li a b{font-size:22px}.menu li a .art{width:34px;height:34px;top:16px;right:12px;margin-top:0}}

/* ============ ABERTURA: Acknowledgement of Country ============ */
.gate{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;background:#2a1209;color:#fbeedd;padding:24px;overflow:auto}
.gate.out{opacity:0;transform:translateY(-100%)}
.gate[hidden],.menu[hidden]{display:none}
.gate-in{position:relative;z-index:1;max-width:860px}
.gate .lq{color:var(--wattle);font-size:20px}
.gate h2{font-weight:400;font-size:clamp(26px,4vw,48px);line-height:1.12;letter-spacing:0;margin:18px 0 18px}
.gate p{font-size:clamp(17px,1.8vw,20px);max-width:720px;margin:0 0 14px;opacity:.92}
.gate .gate-note{font-size:15px;opacity:.7;border-top:1px solid rgba(251,238,221,.2);padding-top:16px;margin-top:24px}
.gate .btn{margin-top:20px}
.gate-in>*{animation:up .9s cubic-bezier(.2,.7,.2,1) both}
.gate-in>*:nth-child(2){animation-delay:.12s}.gate-in>*:nth-child(3){animation-delay:.3s}.gate-in>*:nth-child(4){animation-delay:.45s}.gate-in>*:nth-child(5){animation-delay:.6s}
@keyframes up{from{opacity:0;transform:translateY(26px)}}

/* botões */
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;background:var(--ink);color:var(--bg);transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn.light{background:#fbeedd;color:#2a1209}
.btn.light:hover{background:var(--wattle)}

/* ============ CAPA: pôr do sol no Uluru ============
   Três arranjos: tela grande (texto à esquerda, Uluru à direita), tablet (texto em cima,
   Uluru ocupando a largura) e celular (título menor, Uluru recortado pela direita). */
.hero{--dusk:0;position:relative;height:calc(100svh - var(--sb) - var(--head));min-height:560px;overflow:hidden;color:#2a130a;background:linear-gradient(180deg,var(--hero-a) 0%,var(--hero-b) 52%,var(--hero-c) 100%);isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#1b2340,#3b2a4a 60%,#6b2c1c);opacity:calc(var(--dusk) * .7);pointer-events:none}
.sky{position:absolute;inset:0;z-index:-2}
.sun{position:absolute;width:clamp(260px,38vw,560px);aspect-ratio:1;border-radius:50%;right:12%;top:14%;background:radial-gradient(circle,#fff6d6 0 36%,#ffd36b 37% 55%,transparent 56%);will-change:transform,translate}
.stars{position:absolute;inset:0;width:100%;height:100%;opacity:calc(var(--dusk) * 1.2);transition:opacity .6s}
.hero-in{position:relative;z-index:1;padding-top:clamp(22px,5.5vh,72px)}
.hero h1{font-size:clamp(60px,min(13vw,17vh),220px);line-height:.84;letter-spacing:0;margin:12px 0 0}
.hero h1 .ln{display:block;padding-bottom:.04em}
.hero h1 .ch{display:inline-block;transform-origin:50% 100%;will-change:transform}
.hero h1 em{display:block;font:400 .78em/1 var(--lacquer);text-transform:lowercase;color:#fff8ea;margin-top:.06em;text-shadow:0 3px 0 rgba(124,45,18,.35)}
.hero .lede{font-size:clamp(17px,2vw,23px);line-height:1.4;max-width:560px;margin:22px 0 0;font-weight:500}
.scrollcue{display:inline-flex;align-items:center;gap:12px;margin-top:28px;text-decoration:none;font:600 13px var(--body);letter-spacing:.14em;text-transform:uppercase}
.scrollcue i{width:2px;height:44px;background:currentColor;position:relative;overflow:hidden;opacity:.5}
.scrollcue i::after{content:"";position:absolute;left:0;right:0;top:-40%;height:40%;background:#fff8ea;animation:drip 1.8s cubic-bezier(.65,0,.35,1) infinite}
@keyframes drip{to{top:100%}}
.hero{--ul-h:clamp(190px,36vh,380px)}
.uluru{position:absolute;left:0;right:0;bottom:-1px;display:block;width:100%;height:var(--ul-h)}
.uluru .ul-a{stop-color:var(--ul-a,#f0782f)}
.uluru .ul-b{stop-color:var(--ul-b,#c2410c)}
.uluru .ul-c{stop-color:var(--ul-c,#7c2d12)}
.uluru .far{fill:var(--far,#d9895a);opacity:.75}
.uluru .groove path{fill:none;stroke:rgba(80,20,6,.38);stroke-width:5;stroke-linecap:round}
.uluru .ground{fill:var(--ground,#b4451a)}
.uluru .tufts ellipse{fill:var(--tuft,#7e6a2a);opacity:.7}
.uluru .base{fill:var(--base,#1b120c)}
/* tela grande: o texto à esquerda equilibra o Uluru à direita */
@media (min-width:1024px){
  .hero-in{width:min(1240px,100% - 80px);margin-inline:auto}
  .hero h1,.hero .lede{max-width:56%}
}
/* tablet: texto ocupa a largura, Uluru um pouco mais alto */
@media (min-width:600px) and (max-width:1023px){
  .hero-in{width:calc(100% - 64px);margin-inline:auto;padding-top:7vh}
  .hero h1{font-size:clamp(84px,min(20vw,15vh),180px)}
  .sun{width:48vw;right:6%;top:34%}
  .hero{--ul-h:clamp(240px,34vh,360px)}
}
/* celular: título grande mas contido, sol menor no canto */
@media (max-width:599px){
  .hero-in{width:calc(100% - 32px);margin-inline:auto;padding-top:5vh}
  .hero h1{font-size:clamp(58px,min(21vw,13vh),104px)}
  .hero .lede{font-size:17px}
  .sun{width:230px;right:8%;top:auto;bottom:calc(clamp(170px,27vh,230px) * .62)}
  .hero{--ul-h:clamp(170px,27vh,230px)}
}
:root[data-theme="dark"] .hero{color:#fbeedd;--ul-a:#8a3a1a;--ul-b:#5a2410;--ul-c:#2e1208;--far:#3b2a4a;--ground:#3a1a0c;--tuft:#24301c;--base:#f5b700}
:root[data-theme="dark"] .sun{background:radial-gradient(circle,#fdf6e3 0 22%,rgba(253,246,227,.16) 23% 34%,transparent 35%)}
:root[data-theme="dark"] .stars{opacity:1}
:root[data-theme="dark"] .scrollcue i::after{background:var(--wattle)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hero{color:#fbeedd;--ul-a:#8a3a1a;--ul-b:#5a2410;--ul-c:#2e1208;--far:#3b2a4a;--ground:#3a1a0c;--tuft:#24301c;--base:#f5b700}
  :root:not([data-theme="light"]) .sun{background:radial-gradient(circle,#fdf6e3 0 22%,rgba(253,246,227,.16) 23% 34%,transparent 35%)}
  :root:not([data-theme="light"]) .stars{opacity:1}
}

/* o canguru: atravessa a cena (tempo linear) enquanto salta. Cada parte gira na sua junta:
   agacha no contato, estende a perna no impulso, voa com a cauda de contrapeso e recolhe para pousar */
.roo{position:absolute;left:0;bottom:calc(var(--ul-h) * .12);width:clamp(76px,8.4vw,124px);z-index:2;pointer-events:none;
  transform:translateX(-140%);animation:rooRun 12s linear 3s infinite}
.roo svg{display:block;width:100%;height:auto;overflow:visible}
.roo path{fill:#3a1608}
.roo svg *{transform-box:view-box}
.roo-hop,.roo g{animation-duration:.72s;animation-iteration-count:infinite}
.roo-hop{transform-origin:36% 60%;animation-name:rooHop}
.roo .r-tail{transform-origin:44px 60px;animation-name:rooTail}
.roo .r-thigh{transform-origin:50px 60px;animation-name:rooThigh}
.roo .r-shin{transform-origin:62px 78px;animation-name:rooShin}
.roo .r-foot{transform-origin:47px 92px;animation-name:rooFoot}
.roo .r-arm{transform-origin:78px 43px;animation-name:rooArm}
.roo .r-head{transform-origin:84px 26px;animation-name:rooHead}
/* atravessa a cena em 62% do ciclo e espera fora da tela até a próxima passagem */
@keyframes rooRun{0%{transform:translateX(-140%)}62%{transform:translateX(calc(100vw + 40%))}100%{transform:translateX(calc(100vw + 40%))}}
/* 0 contato/agachado · 22 impulso · 50 voo · 78 pernas à frente para pousar */
@keyframes rooHop{
  0%{transform:translateY(4%) rotate(0);animation-timing-function:var(--e-out)}
  22%{transform:translateY(-17%) rotate(-6deg);animation-timing-function:cubic-bezier(.3,.6,.5,1)}
  50%{transform:translateY(-46%) rotate(6deg);animation-timing-function:cubic-bezier(.5,0,.75,.4)}
  78%{transform:translateY(-14%) rotate(2deg);animation-timing-function:var(--e-in)}
  100%{transform:translateY(4%) rotate(0)}}
@keyframes rooThigh{0%{transform:rotate(-14deg)}10%{transform:rotate(6deg)}22%{transform:rotate(34deg)}50%{transform:rotate(44deg)}78%{transform:rotate(-22deg)}100%{transform:rotate(-14deg)}}
@keyframes rooShin{0%{transform:rotate(24deg)}10%{transform:rotate(8deg)}22%{transform:rotate(-14deg)}50%{transform:rotate(-24deg)}78%{transform:rotate(14deg)}100%{transform:rotate(24deg)}}
@keyframes rooFoot{0%{transform:rotate(-10deg)}10%{transform:rotate(-12deg)}22%{transform:rotate(14deg)}50%{transform:rotate(4deg)}78%{transform:rotate(-4deg)}100%{transform:rotate(-10deg)}}
@keyframes rooTail{0%{transform:rotate(-4deg)}22%{transform:rotate(-8deg)}50%{transform:rotate(14deg)}78%{transform:rotate(6deg)}100%{transform:rotate(-4deg)}}
@keyframes rooArm{0%{transform:rotate(14deg)}50%{transform:rotate(-16deg)}100%{transform:rotate(14deg)}}
@keyframes rooHead{0%{transform:rotate(4deg)}22%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}78%{transform:rotate(-2deg)}100%{transform:rotate(4deg)}}
/* à noite a silhueta escura sumiria no chão: ganha um contorno de luz dourada */
:root[data-theme="dark"] .roo path{fill:#120a06}
:root[data-theme="dark"] .roo svg{filter:drop-shadow(0 0 1.2px #ffd36b) drop-shadow(0 0 7px rgba(255,190,90,.4))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .roo path{fill:#120a06}:root:not([data-theme="light"]) .roo svg{filter:drop-shadow(0 0 1.2px #ffd36b) drop-shadow(0 0 7px rgba(255,190,90,.4))}}
@media (max-width:599px){.roo{width:88px;bottom:calc(var(--ul-h) * .16)}}
@media (prefers-reduced-motion:reduce){.roo{display:none}}

/* faixa de gírias */
.marquee{background:var(--ink);color:var(--wattle);overflow:hidden;padding:18px 0;white-space:nowrap}
.mq-track{display:inline-flex;align-items:center;gap:28px;animation:mq 50s linear infinite;padding-left:28px}
.mq-track span{font:400 clamp(26px,3.2vw,40px)/1.1 var(--lacquer);text-transform:lowercase}
.mq-track i{font-style:normal;color:var(--bg);opacity:.5;font-size:20px}
@keyframes mq{to{transform:translateX(-50%)}}
:root[data-theme="dark"] .marquee{background:var(--wattle);color:#1b120c}
:root[data-theme="dark"] .mq-track i{color:#1b120c}

/* ============ ATOS ============ */
.act{position:relative;padding:110px 0 60px}
.act-head{margin-bottom:48px}
.act-head>p{max-width:640px}
.act-head .lq{color:var(--ochre)}
.act-head h2{font-weight:400;font-size:clamp(42px,5.4vw,82px);line-height:.95;letter-spacing:0;margin:14px 0 0}
.act-head p{font-size:clamp(17px,1.8vw,20px);color:var(--ink-2);margin:18px 0 0;max-width:640px}
.big{font:400 clamp(28px,3.4vw,46px)/1.08 var(--display);letter-spacing:0;margin:0 0 14px}
.big b,.hl{color:var(--ochre)}

/* Ato I · mapa guiado pela rolagem */
.scrolly{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
.scrolly-fig{position:sticky;top:calc(var(--bar) + var(--head) + 4vh);margin:0;height:calc(100vh - var(--bar) - var(--head) - 8vh);display:grid;place-items:center}
.scrolly-fig svg,.citymap svg{width:100%;height:100%;max-height:100%;overflow:visible}
.steps{padding:4vh 0 16vh}
.step{min-height:56vh;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;opacity:.25;transition:opacity .6s var(--e-inout)}
.step p{font-size:18px;color:var(--ink-2);max-width:460px;margin:0}
.au{fill:var(--ochre);transition:fill .6s,opacity .6s}
.bra{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1),opacity .4s}
.lbl-out{font:400 26px var(--display);fill:#fff8ea;text-anchor:middle;opacity:0;transition:opacity .6s;letter-spacing:.02em}
.pop text{font:400 50px var(--display);text-anchor:middle;opacity:0;transition:opacity .6s;paint-order:stroke;stroke-linejoin:round}
.pop .pl{font:500 15px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pop-br{fill:var(--ink);stroke:var(--bg);stroke-width:6}
.pop-au{fill:#fff8ea;font-size:36px!important;stroke:#7c2d12;stroke-width:6}
.dot circle{fill:var(--wattle);stroke:#1b120c;stroke-width:1.5;transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1) calc(var(--i)*40ms),opacity .3s}
.dot.dim circle{opacity:.2}
.scrolly-fig[data-step="1"] .bra,.scrolly-fig[data-step="2"] .bra{opacity:1;stroke-dashoffset:0}
.scrolly-fig[data-step="2"] .pop text{opacity:1}
.scrolly-fig[data-step="2"] .au{opacity:.75}
.scrolly-fig[data-step="3"] .lbl-out{opacity:.85}
.scrolly-fig[data-step="3"] .dot circle{transform:scale(1)}
.scrolly-fig[data-step="3"] .au{fill:color-mix(in srgb,var(--ochre) 85%,var(--bg))}
.scrolly-fig[data-step="0"]~.steps .step[data-step="0"],.scrolly-fig[data-step="1"]~.steps .step[data-step="1"],
.scrolly-fig[data-step="2"]~.steps .step[data-step="2"],.scrolly-fig[data-step="3"]~.steps .step[data-step="3"]{opacity:1}
@media (max-width:860px){
  .scrolly{grid-template-columns:1fr;gap:0}
  .scrolly-fig{top:calc(var(--bar) + var(--head));height:44vh;z-index:1;background:var(--bg);padding:10px 0}
  .steps{padding:4vh 0 20vh;position:relative;z-index:2}
  .step{min-height:58vh;justify-content:flex-end;opacity:1}
  .step>*{background:var(--paper);padding:0 18px}
  .step>*:first-child{padding-top:18px;border-radius:18px 18px 0 0}
  .step>*:last-child{padding-bottom:18px;border-radius:0 0 18px 18px}
}

/* Ato II · contador de anos */
.act-time{padding:0;background:var(--night);color:#f6ecdc}
.time-track{height:320vh;position:relative}
.time-stage{position:sticky;top:calc(var(--bar) + var(--head));height:calc(100vh - var(--bar) - var(--head));display:flex;align-items:center;overflow:hidden}
.act-time .act-head{margin-bottom:10px}
.act-time .act-head .mono{color:var(--wattle)}
.act-time .act-head h2{font-size:clamp(34px,4.6vw,64px)}
.yr{font:400 clamp(60px,12.5vw,200px)/.9 var(--display);letter-spacing:0;margin:24px 0 8px;font-variant-numeric:tabular-nums;color:var(--wattle);white-space:nowrap}
.yr-label{font:400 clamp(22px,2.8vw,36px)/1.15 var(--display);margin:0 0 30px;min-height:2.3em;max-width:900px;transition:opacity .25s}
.yr-label.moving{opacity:.25}
.yr-bar{height:4px;background:rgba(246,236,220,.15);border-radius:4px;overflow:hidden}
.yr-bar i{display:block;height:100%;width:0;background:var(--wattle)}
.yr-ticks{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.yr-ticks li{font:500 11px var(--mono);opacity:.35;transition:opacity .3s,color .3s}
.yr-ticks li span{display:none}
.yr-ticks li.on{opacity:.8}
.yr-ticks li.now{opacity:1;color:var(--wattle)}
@media (max-width:760px){.yr-ticks{display:none}}
.static-time .time-track{height:auto}
.static-time .time-stage{position:relative;height:auto;padding:90px 0}
.static-time .yr,.static-time .yr-label,.static-time .yr-bar{display:none}
.static-time .yr-ticks{display:grid;grid-template-columns:1fr;gap:12px}
.static-time .yr-ticks li{opacity:1;font:600 17px var(--body)}
.static-time .yr-ticks li b{font:500 13px var(--mono);color:var(--wattle);display:block}
.static-time .yr-ticks li span{display:inline}
.clock{padding:100px 0 110px}
.clock .mono{color:var(--wattle)}
.clock-big{font:400 clamp(30px,4.4vw,64px)/1.08 var(--display);letter-spacing:0;margin:16px 0 22px;max-width:1050px}
.clock-big b{color:var(--wattle)}
.clock p:last-child{font-size:19px;max-width:720px;opacity:.85}
.inline{color:var(--wattle);font-weight:700;text-decoration:none;border-bottom:2px solid currentColor}

/* Ato III · pontos */
.people{display:grid;grid-template-columns:auto 1fr;gap:70px;align-items:center}
.waffle{display:grid;grid-template-columns:repeat(10,1fr);gap:9px;width:min(380px,80vw)}
.waffle i{aspect-ratio:1;border-radius:50%;background:var(--chip);transition:background .4s calc(var(--i)*22ms),transform .4s calc(var(--i)*22ms)}
.waffle.go i.f{background:var(--ochre);transform:scale(1.08)}
.people-text>p:not(.big){font-size:18px;color:var(--ink-2);max-width:620px}
.people-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px;margin-top:34px}
.people-stats b{display:block;font:400 clamp(34px,4vw,52px)/1 var(--display);letter-spacing:0;color:var(--gum)}
.people-stats span{font-size:14.5px;color:var(--ink-2)}
@media (max-width:860px){.people{grid-template-columns:1fr;gap:36px}.people-stats{grid-template-columns:1fr 1fr}}

/* Ato IV · cartões que andam para o lado */
.act-way{padding:72px 0 0;background:var(--paper)}
.way-stage{position:sticky;top:calc(var(--bar) + var(--head));height:calc(100vh - var(--bar) - var(--head));display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding:56px 0 24px}
.act-way .act-head{margin-bottom:28px}
.act-way .act-head h2{font-size:clamp(40px,5.2vw,80px)}
.way-row{display:flex;gap:22px;padding:0 max(20px,calc(50vw - 620px));will-change:transform}
.way-card{flex:none;width:clamp(280px,30vw,380px);min-height:min(400px,48vh);background:var(--c);color:var(--fg);padding:44px 30px 36px;display:flex;flex-direction:column}
.way-card{transform:rotate(calc(var(--r,0deg) + var(--tilt,0deg)));transform-origin:50% 100%}
.way-card:nth-child(even){translate:0 18px}
.way-card .mono{opacity:.7}
.way-card h3{font-weight:400;font-size:clamp(34px,3.4vw,46px);line-height:.95;letter-spacing:0;margin:auto 0 16px}
.way-card p{margin:0;font-size:16.5px;line-height:1.45}
@media (max-width:760px),(prefers-reduced-motion:reduce){
  .way-stage{position:relative;min-height:0}
  .way-row{overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 20px 30px}
  .way-card{scroll-snap-align:center;min-height:340px}
}

/* Ato V · selos das paradas */
.stamps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:22px}
.stamp{display:flex;flex-direction:column;min-height:330px;text-decoration:none;background:var(--c);color:var(--fg);padding:30px 24px 30px;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.stamp .art{width:120px;height:120px;margin:18px 0 auto;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.stamp b{font:400 28px/1 var(--display);letter-spacing:0;margin-top:18px}
.stamp small{font-size:14.5px;opacity:.8;margin-top:6px}
.stamp .mono{opacity:.7}
.stamps li:nth-child(odd) .stamp{transform:rotate(-.8deg)}
.stamps li:nth-child(even) .stamp{transform:rotate(.8deg)}
.stamps .rv{transition-delay:calc(var(--i)*70ms)}
.act-src{padding-top:40px}

/* ============ ILUSTRAÇÕES ============ */
.art .o{stroke:#1b120c;stroke-width:5;stroke-linejoin:round;stroke-linecap:round}
.art .k{fill:#1b120c}
.art .w{fill:#fff8ea}
.art .y{fill:#f5b700}
.art .r{fill:#e0452b}
.art .c{fill:var(--c)}
.art .e{fill:#d8b9a4}
.art .g{fill:none;stroke:rgba(255,248,234,.16);stroke-width:2}
.art .s{fill:none;stroke:#1b120c;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.art .sw{fill:none;stroke:#fff8ea;stroke-width:5;stroke-linecap:round}
.art .sy{fill:none;stroke:#f5b700;stroke-width:4;stroke-dasharray:4 6;stroke-linecap:round}
.art .t{font:400 46px var(--display);text-anchor:middle}

/* ============ CABEÇALHO DAS PARADAS ============ */
.phead{position:relative;overflow:hidden;background:var(--c);color:var(--fg);isolation:isolate}
.phead .wrap{position:relative;z-index:1;padding:30px 0 70px}
.crumb{margin:0 0 30px;font:500 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.crumb a{text-decoration:none;border-bottom:1px solid currentColor}
.ph{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.ph .no{display:flex;align-items:baseline;gap:8px;font:600 15px var(--body);letter-spacing:.08em;opacity:.85}
.ph .no .lq{font-size:22px;letter-spacing:0}
.ph h1{font-weight:400;font-size:clamp(56px,10vw,150px);line-height:.86;letter-spacing:0;margin:14px 0 0}
.ph .lede{margin:24px 0 0;font-size:clamp(17px,1.9vw,21px);max-width:680px;font-weight:500;line-height:1.45}
.ph-art{width:clamp(150px,22vw,290px)}
@media (max-width:700px){.ph{grid-template-columns:1fr}.ph-art{position:absolute;right:-20px;top:-10px;width:130px;opacity:.9}.phead .wrap{padding-bottom:48px}}
.page{padding:44px 0 40px}
.block{margin-top:90px}
.block.first{margin-top:0}
.sub{font-weight:400;font-size:clamp(30px,4vw,52px);line-height:1;letter-spacing:0;margin:0 0 10px}
.subp{color:var(--muted);margin:0 0 24px;font-size:16px}

/* filtros */
.bar-ctl{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:26px}
.chip{border:0;background:var(--chip);border-radius:999px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink-2);transition:background .15s,color .15s}
.chip:hover{background:var(--paper-2)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.chip small{font:500 11px var(--mono);opacity:.65;margin-left:6px}
.find{margin-left:auto;flex:0 1 260px;min-width:160px;height:40px;border:0;background:var(--chip);border-radius:999px;padding:0 16px;color:var(--ink);font:inherit;font-size:14.5px}
.find::placeholder{color:var(--muted)}
@media (max-width:600px){.find{margin-left:0;flex:1 1 100%}}
.count{font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:-8px 0 28px}

/* cards: só tipografia e espaço */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:48px 44px}
.card{display:flex;flex-direction:column;gap:6px;scroll-margin-top:140px}
.meta{display:flex;align-items:center;gap:8px;font:500 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.card .meta::before,.rec .meta::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c);flex:none;box-shadow:0 0 0 1.5px var(--ink)}
.meta .ano{color:var(--muted)}
.card h3{font-weight:400;font-size:25px;line-height:1.08;letter-spacing:0;margin:4px 0 2px}
.card p{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.55}
.card .org{font-weight:600;color:var(--ink);font-size:14.5px}
.more{margin-top:6px;font-size:14px;font-weight:700;text-decoration:none;align-self:flex-start;border-bottom:2px solid var(--c);padding-bottom:1px}
.more::after{content:" ↗"}
.more:hover{background:var(--c);color:var(--fg)}
.flash{animation:flash 2s ease}
@keyframes flash{0%,45%{background:color-mix(in srgb,var(--wattle) 30%,transparent);box-shadow:0 0 0 14px color-mix(in srgb,var(--wattle) 30%,transparent);border-radius:6px}}
.empty{padding:30px 0;color:var(--muted)}

/* barras horizontais */
.br{display:grid;grid-template-columns:28px minmax(120px,240px) 1fr auto;align-items:center;gap:12px;padding:7px 0;font-size:15px}
.br .rk{font:500 12px var(--mono);color:var(--muted);text-align:right}
.br .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.br .nm small{font:500 10.5px var(--mono);color:var(--muted);margin-left:8px;letter-spacing:.06em;text-transform:uppercase}
.br .nm .ind,.prof .ind{display:block;font:italic 500 13px/1.3 var(--body);color:var(--ochre);overflow:hidden;text-overflow:ellipsis}
.prof .ind{margin:-4px 0 8px}
.br .tr{height:12px;background:var(--chip);border-radius:6px;overflow:hidden}
.br .tr i{display:block;height:100%;width:0;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1.5px rgba(27,18,12,.25);transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.br .vl{font:500 13px var(--mono);min-width:84px;text-align:right}
.br.dim{opacity:.25}
@media (max-width:600px){.br{grid-template-columns:22px 1fr auto}.br .tr{grid-column:2/4;grid-row:2}.br .vl{min-width:0}}
.note{font-size:13px;color:var(--muted);margin:16px 0 0}


/* gêmeas */
.twins .hd,.tw{display:grid;grid-template-columns:1fr 40px 1fr 110px;align-items:center;gap:8px;padding:13px 2px}
.twins .hd{font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tw{border-top:1px solid var(--line);font-size:17px}
.tw .br-n{font-weight:600}
.tw .au-n{font:400 20px var(--display)}
.tw .ar{text-align:center;color:var(--muted)}
.tw .cat{font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:right}
.twins .list{max-height:540px;overflow:auto}
@media (max-width:600px){.twins .hd,.tw{grid-template-columns:1fr 24px 1fr}.tw .cat,.twins .hd .cat{display:none}}

/* comida do dia a dia */
.staples{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 40px}
.staples .mono{display:block;color:var(--c);filter:brightness(.8);margin-bottom:8px}
.staples b{display:block;font:400 23px var(--display);margin-bottom:4px}
.staples span:last-child{font-size:15.5px;color:var(--ink-2)}

/* recordes */
.recs{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:56px 44px}
.rec{display:flex;flex-direction:column;scroll-margin-top:140px}
.rec .k{font:400 clamp(40px,4.6vw,60px)/.95 var(--display);letter-spacing:0;color:var(--ochre)}
.rec:nth-child(3n+2) .k{color:var(--gum)}
.rec:nth-child(3n) .k{color:var(--sea)}
.rec h3{font-size:22px;margin:14px 0 6px}
.rec p{margin:0;font-size:15.5px;color:var(--ink-2)}
.rec .meta{margin-top:12px}
.rec .meta .more{font:700 13px var(--body);letter-spacing:0;text-transform:none;margin:0}
:root[data-theme="dark"] .rec .k{filter:brightness(1.5)}

/* curiosidades */
.spot{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:34px;align-items:center;background:var(--c);color:var(--fg);padding:44px 40px;margin-bottom:64px;min-height:200px}
.spot .big{font:400 120px/.8 var(--display);letter-spacing:0;margin:0;opacity:.9}
.spot h2{font-weight:400;font-size:clamp(28px,3.4vw,44px);line-height:1.02;margin:0 0 10px;letter-spacing:0}
.spot p{margin:0;font-size:18px;max-width:640px}
.spot button{border:0;border-radius:999px;padding:14px 20px;font-weight:700;cursor:pointer;background:var(--ink);color:var(--bg);white-space:nowrap}
.spot.swap>*{animation:up .5s cubic-bezier(.2,.8,.2,1) both}
@media (max-width:640px){.spot{grid-template-columns:1fr;gap:12px;padding:36px 24px}.spot .big{font-size:72px}.spot button{justify-self:start}}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:36px 44px;counter-reset:f}
.facts li{counter-increment:f}
.fact{display:block;width:100%;text-align:left;border:0;background:none;padding:0;cursor:pointer;scroll-margin-top:140px}
.fact::before{content:counter(f,decimal-leading-zero);display:block;font:500 12px var(--mono);letter-spacing:.12em;color:var(--muted);margin-bottom:8px}
.fact b{display:block;font:400 22px/1.12 var(--display);margin-bottom:6px;transition:color .15s}
.fact span{font-size:15.5px;color:var(--ink-2)}
.fact:hover b{text-decoration:underline;text-decoration-color:var(--c);text-decoration-thickness:3px;text-underline-offset:4px}

/* cidades */
.cities{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.citymap{margin:0;position:sticky;top:calc(var(--bar) + var(--head) + 20px)}
.citymap .au{fill:var(--c)}
.citymap .dot circle{transform:scale(1);cursor:pointer}
.citymap .dot:hover circle{fill:#fff8ea}
.citymap .dot-n{font:700 9px var(--body);fill:var(--ink);paint-order:stroke;stroke:var(--bg);stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.citymap .dot-n.in{text-anchor:middle;fill:#1b120c;stroke:none;font-size:8.5px}
.citymap .dot-n.dim{opacity:.25}
:root[data-theme="dark"] .citymap .au{fill:#2b3a66}
@media (max-width:900px){.cities{grid-template-columns:1fr}.citymap{position:relative;top:0}}
.profiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 44px}
.prof{scroll-margin-top:140px}
.prof .a{font:500 11.5px var(--mono);color:var(--muted);text-transform:uppercase;letter-spacing:.12em}
.prof h3{font-size:30px;margin:4px 0 0;letter-spacing:0}
.prof h3 small{font:500 12px var(--mono);color:var(--muted);margin-left:10px}
.prof p{margin:6px 0 0;font-size:15.5px;color:var(--ink-2)}

/* história */
.tl{position:relative;padding-left:30px}
.tl::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:3px;border-radius:3px;background:var(--c)}
.ev{position:relative;padding:0 0 34px;scroll-margin-top:140px}
.ev::before{content:"";position:absolute;left:-28px;top:9px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 3px var(--c)}
.ev .y{font:500 13px var(--mono);letter-spacing:.08em;color:var(--muted)}
.ev h3{font-size:25px;line-height:1.1;margin:4px 0 6px}
.ev p{margin:0;color:var(--ink-2);max-width:720px;font-size:16px}
.ev .meta{margin-top:8px}
:root[data-theme="dark"] .tl::before{background:#c2410c}
@media (min-width:900px){
  .tl{padding-left:0}
  .tl::before{left:50%;margin-left:-1.5px}
  .ev{width:50%;padding-right:44px;text-align:right}
  .ev:nth-child(even){margin-left:50%;padding:0 0 34px 44px;text-align:left}
  .ev::before{left:auto;right:-7px}
  .ev:nth-child(even)::before{right:auto;left:-7px}
  .ev p{margin-left:auto}
  .ev:nth-child(even) p{margin-left:0}
  .ev .meta{justify-content:flex-end}
  .ev:nth-child(even) .meta{justify-content:flex-start}
}

/* quiz */
.quiz{background:var(--ink);color:var(--bg);border-radius:28px;padding:clamp(26px,4vw,48px);max-width:900px}
.quiz .qtop{display:flex;justify-content:space-between;opacity:.7;margin-bottom:12px}
.quiz .prog{height:6px;border-radius:6px;background:color-mix(in srgb,var(--bg) 18%,transparent);overflow:hidden;margin-bottom:26px}
.quiz .prog i{display:block;height:100%;background:var(--c);transition:width .4s}
.quiz h2{font-weight:400;font-size:clamp(26px,3.6vw,42px);line-height:1.08;letter-spacing:0;margin:0 0 24px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.opts{grid-template-columns:1fr}}
.opt{display:flex;gap:14px;align-items:center;text-align:left;padding:16px 18px;border-radius:16px;border:0;background:color-mix(in srgb,var(--bg) 10%,transparent);color:inherit;font-weight:600;cursor:pointer;font-size:16px;transition:background .15s,transform .15s}
.opt .mono{opacity:.6}
.opt:hover:not([disabled]){background:color-mix(in srgb,var(--bg) 20%,transparent);transform:translateX(4px)}
.opt.ok{background:#1f6f4a;color:#fff}
.opt.no{background:#b42318;color:#fff}
.opt[disabled]{cursor:default}
.quiz .btn{margin-top:22px;background:var(--c);color:#1b120c}
.quiz .res{text-align:center;padding:10px 0}
.quiz .res .sc{font:400 clamp(80px,12vw,150px)/1 var(--display);color:var(--c);letter-spacing:0}
.quiz .res p{font-size:20px;margin:10px auto 24px;max-width:520px}

/* próxima parada */
.nextstop{position:relative;display:block;overflow:hidden;background:var(--c);color:var(--fg);text-decoration:none;margin-top:60px;isolation:isolate}
.nextstop .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;padding:90px 0 110px}
.nextstop .mono{opacity:.75}
.nextstop b{display:block;font:400 clamp(56px,10vw,150px)/.86 var(--display);letter-spacing:0;margin:16px 0 12px}
.nextstop .d{display:block;font-size:19px;opacity:.85}
.nextstop .go{display:inline-block;margin-top:26px;font-weight:700;border-bottom:2px solid currentColor;transition:letter-spacing .3s}
.nextstop .art{width:clamp(140px,20vw,260px);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.nextstop:hover .go{letter-spacing:.04em}
@media (max-width:700px){.nextstop .wrap{grid-template-columns:1fr;padding:64px 0 120px}.nextstop .art{width:120px;order:-1}}

/* barra de paradas: colada embaixo do cabeçalho, mostra onde a pessoa está */
:root{--lv:52px}
html:has(.levels){scroll-padding-top:calc(var(--bar) + var(--head) + var(--lv) + 14px)}
.levels{position:sticky;top:calc(var(--bar) + var(--head));z-index:68;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.levels .wrap{display:flex;align-items:center;gap:8px;height:var(--lv)}
.lv-arr{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;text-decoration:none;background:var(--chip);transition:background .2s,color .2s,transform .45s var(--spring)}
.lv-arr:hover{background:var(--ink);color:var(--bg)}
.lv-list{position:relative;flex:1;min-width:0;list-style:none;margin:0;padding:0 2px;display:flex;align-items:center;justify-content:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.lv-list::-webkit-scrollbar{display:none}
.lv-list li{flex:none}
.lv-list a{display:flex;align-items:center;justify-content:center;gap:8px;height:32px;min-width:32px;padding:0 6px;border-radius:999px;text-decoration:none;font:600 12px var(--body);color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .25s,color .25s,box-shadow .25s,transform .45s var(--spring)}
.lv-list a.done{color:var(--ink);box-shadow:inset 0 0 0 2px var(--c)}
.lv-list a:hover{background:var(--c);color:var(--fg);box-shadow:none}
.lv-list a.now{background:var(--c);color:var(--fg);box-shadow:none;padding:0 14px 0 10px}
.lv-list a.now .n{opacity:.75}
.lv-list .nm{font:700 13.5px var(--body);white-space:nowrap}
.lv-list .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){.lv-list{justify-content:flex-start;mask-image:linear-gradient(90deg,transparent,#000 10px,#000 calc(100% - 10px),transparent)}}
body:has(.levels) .citymap{top:calc(var(--bar) + var(--head) + var(--lv) + 20px)}

/* fontes e rodapé */
.src{columns:2 320px;gap:28px;padding:0;margin:0;list-style:none;font-size:15px}
.src li{break-inside:avoid;padding:9px 0;border-bottom:1px solid var(--line)}
.src a{text-decoration:none}
.src a:hover{text-decoration:underline;text-decoration-color:var(--ochre);text-decoration-thickness:2px}
.foot{background:var(--night);color:#f6ecdc;padding:80px 0 100px;text-align:center}
.foot-big{font:400 clamp(60px,11vw,160px)/.85 var(--display);letter-spacing:0;margin:0 0 30px}
.foot-big em{color:var(--wattle)}
.foot .lead{max-width:none;margin:0 auto 10px;font-size:16px;opacity:.85}
.foot .lead strong{color:var(--wattle)}
.foot .small{font-size:13px;opacity:.6;margin:8px auto;max-width:none}
.foot .ack{font-style:italic}
.foot .acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:26px 0}
.foot .acts a,.foot .acts button{border:0;background:rgba(246,236,220,.1);color:inherit;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;cursor:pointer}
.foot .acts a:hover,.foot .acts button:hover{background:var(--wattle);color:#1b120c}

/* busca global */
dialog.search{width:min(700px,100% - 24px);max-height:min(640px,80vh);padding:0;border:0;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 30px 80px -20px rgba(0,0,0,.5)}
dialog.search::backdrop{background:rgba(20,10,4,.5);backdrop-filter:blur(4px)}
.search .in{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);color:var(--muted)}
.search input{flex:1;border:0;background:transparent;font:500 19px var(--body);color:var(--ink);outline:none;min-width:0}
.search .x{border:0;background:var(--chip);border-radius:8px;padding:5px 10px;font:500 11px var(--mono);cursor:pointer}
.search ul{list-style:none;margin:0;padding:8px;overflow:auto;max-height:calc(min(640px,80vh) - 74px)}
.search li a{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;text-decoration:none;padding:11px 14px;border-radius:14px}
.search li a:hover,.search li a.act{background:var(--chip)}
.search li b{display:block;font-weight:700;font-size:15.5px}
.search li span{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search li small{display:flex;align-items:center;gap:6px;font:500 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.search li small::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.search .hint{padding:24px;text-align:center;color:var(--muted);font-size:14.5px}
.search .hint b{color:var(--ink)}

.toast{position:fixed;left:50%;bottom:76px;transform:translate(-50%,30px);opacity:0;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:600;z-index:9999;transition:.3s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}
.totop{position:fixed;right:16px;bottom:16px;z-index:40;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;border:0;background:var(--ink);color:var(--bg);cursor:pointer;opacity:0;pointer-events:none;transition:.25s}
.totop.on{opacity:1;pointer-events:auto}

/* revelar ao rolar */

/* transição entre páginas */

/* ============ DETALHES: Lacquer em caixa baixa ============ */
.lq{font:400 18px/1.1 var(--lacquer);text-transform:lowercase;letter-spacing:.01em}
.act-head .lq{font-size:clamp(20px,2vw,26px)}
.foot-big em{font:400 .8em/1 var(--lacquer);text-transform:lowercase;color:var(--wattle)}

/* seta "próximo" para quem não usa a rolagem */
.nextbtn{display:inline-flex;align-items:center;gap:10px;margin-top:22px;border:2px solid currentColor;background:transparent;color:var(--ink);border-radius:999px;padding:10px 18px;font:600 14px var(--body);cursor:pointer;transition:background .25s,color .25s,transform .45s var(--spring)}
.nextbtn:hover{background:var(--ink);color:var(--bg);transform:translateY(-2px)}
.nextbtn.light{color:#f6ecdc}
.nextbtn.light:hover{background:var(--wattle);border-color:var(--wattle);color:#1b120c}
.nextbtn span{display:inline-block;animation:nudge 1.8s var(--e-inout) infinite}
#wayNext span{animation-name:nudgeX}
@keyframes nudge{0%,55%,100%{transform:none}25%{transform:translateY(5px) scale(1,.8)}40%{transform:translateY(-2px)}}
@keyframes nudgeX{0%,55%,100%{transform:none}25%{transform:translateX(6px) scale(.8,1)}40%{transform:translateX(-2px)}}
.way-nav{margin-top:8px}
.act-time .nextbtn{margin-top:26px}

/* fontes no próprio texto */
.cite{font-size:13px;color:var(--muted);margin:22px 0 0;max-width:720px;line-height:1.5}
.cite a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.cite a:hover{color:var(--ink);text-decoration-color:var(--ochre)}
.page>.cite{margin-top:64px;padding-top:18px;border-top:1px solid var(--line)}
.act-time .cite{color:rgba(246,236,220,.6)}
.act-time .cite a:hover{color:#f6ecdc}


/* página Sobre */
.about-cols{max-width:820px}
.about-cols p:not(.big){font-size:18px;color:var(--ink-2);max-width:640px}
.inline-ink{color:inherit;text-decoration:underline;text-decoration-color:var(--ochre);text-decoration-thickness:3px;text-underline-offset:4px}
.projects{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.project{display:flex;flex-direction:column;height:100%;min-height:260px;text-decoration:none;background:var(--c);color:var(--fg);padding:30px 24px;transition:transform .5s var(--spring)}
.project b{font:400 30px/1 var(--display);margin:auto 0 8px}
.project small{font-size:15px;opacity:.85}
.project .go{margin-top:16px;font-weight:600;font-size:13.5px;opacity:.8}
.project:hover{transform:translateY(-8px) rotate(-.6deg)}
@media (max-width:860px){.about-cols{grid-template-columns:1fr;gap:28px}}

/* =====================================================================
   MOVIMENTO
   Os 12 princípios da animação, aplicados ao tema (sol, terra vermelha, bichos do bush):
   · comprimir e esticar: letras do título, pontos, troféu e a ilustração que pula
   · antecipação: botão que afunda, claquete que abre antes de bater, ampulheta que recua
   · encenação: uma coisa de cada vez (sol, depois título, depois texto)
   · direto x pose a pose: a flecha do quiz vai de pose em pose; a fumaça da torta é contínua
   · continuidade e sobreposição: linhas que saem em cascata, folhas que balançam em atraso
   · aceleração e desaceleração: curvas --e-in, --e-out e --e-inout em tudo
   · arcos: o sol nasce em arco, a lupa varre em arco, o pêndulo da etiqueta
   · ação secundária: estrelas piscando, ondas, vapor, brilho do troféu
   · tempo: pausas longas e golpes rápidos (a claquete fecha em 80 ms)
   · exagero: o "não" do quiz, o salto da ilustração
   · desenho sólido e apelo: tudo gira em torno de pontos reais de cada desenho
   ===================================================================== */
:root{--e-out:cubic-bezier(.16,1,.3,1);--e-in:cubic-bezier(.7,0,.84,0);--e-inout:cubic-bezier(.65,0,.35,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* revelar ao rolar: o bloco chega desacelerando e se endireita; o conteúdo vem em cascata */
.rv{opacity:0;transform:translateY(38px) rotate(1deg);transform-origin:0 100%;transition:opacity .8s var(--e-out),transform 1s var(--e-out)}
.rv.in{opacity:1;transform:none}
.card.rv>*{opacity:0;translate:0 12px;transition:opacity .7s var(--e-out),translate .8s var(--e-out)}
.card.rv.in>*{opacity:1;translate:0 0}
.card.rv.in>:nth-child(2){transition-delay:.06s}.card.rv.in>:nth-child(3){transition-delay:.12s}.card.rv.in>:nth-child(4){transition-delay:.18s}.card.rv.in>:nth-child(5){transition-delay:.24s}

/* botões e chips: afundam ao apertar (comprimir) e voltam com sobra (mola) */
.btn,.chip,.tbtn,.opt{transition:transform .45s var(--spring),background .25s,color .25s}
.btn:active,.chip:active,.tbtn:active,.nextbtn:active,.opt:active:not([disabled]){transform:scale(.95,.88);transition-duration:.08s}

/* cabeçalho das paradas: entra em camadas, uma depois da outra */
.phead .crumb{animation:rise .7s var(--e-out) .05s both}
.ph .no{animation:rise .7s var(--e-out) .12s both}
.ph h1{transform-origin:0 100%;animation:headIn 1s var(--e-out) .18s both}
.ph .lede{animation:rise .8s var(--e-out) .34s both}
.ph-art{transform-origin:50% 100%;animation:artIn 1.1s var(--e-out) .28s both}
.ph-art .art,.nextstop .art{animation:float 6s var(--e-inout) 1.4s infinite}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes headIn{0%{opacity:0;transform:translateY(60px) scaleY(1.12)}60%{opacity:1;transform:translateY(-4px) scaleY(.97)}100%{transform:none}}
@keyframes artIn{
  0%{opacity:0;transform:translateY(70px) scale(.5,.6) rotate(-12deg)}
  45%{opacity:1;transform:translateY(-18px) scale(.92,1.12) rotate(4deg)}
  65%{transform:translateY(0) scale(1.12,.88) rotate(0)}
  82%{transform:scale(.97,1.04)}
  100%{transform:none}}
@keyframes float{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(4px,-10px) rotate(2deg)}50%{transform:translate(0,-14px) rotate(0)}75%{transform:translate(-4px,-10px) rotate(-2deg)}}

/* selos e "próxima parada": a ilustração antecipa, salta e aterrissa */
.stamp{transition:transform .55s var(--spring)}
.stamps li .stamp:hover,.stamps li .stamp:focus-visible{transform:rotate(0) translateY(-10px) scale(1.02)}
.stamp .art{transform-origin:50% 100%}
.stamp:hover .art,.stamp:focus-visible .art,.nextstop:hover .art{animation:jump .85s var(--e-out)}
@keyframes jump{
  0%{transform:none}
  18%{transform:translateY(5px) scale(1.12,.84)}
  45%{transform:translateY(-22px) scale(.9,1.12) rotate(-6deg)}
  70%{transform:translateY(0) scale(1.1,.88) rotate(0)}
  86%{transform:scale(.97,1.04)}
  100%{transform:none}}
.nextstop .go{transition:letter-spacing .5s var(--e-out),transform .5s var(--spring)}
.nextstop:hover .go{transform:translateX(8px)}

/* ATUAÇÃO DAS ILUSTRAÇÕES: só no cabeçalho, na próxima parada e ao passar o mouse nos selos */
.art g,.art path,.art circle,.art rect,.art ellipse,.art text{transform-box:view-box}
:is(.ph-art,.nextstop,.stamp:hover,.stamp:focus-visible) .art{--play:running}
.art [class*="a-"]{animation-play-state:var(--play,paused)}
.stamp:not(:hover):not(:focus-visible) .art [class*="a-"]{animation:none}

.art .a-star{transform-origin:100px 96px;animation:starBob 3.2s var(--e-inout) infinite}
@keyframes starBob{0%,100%{transform:none}50%{transform:translateY(-6px) rotate(-4deg)}}
.art .a-tw1{transform-origin:168px 41px;animation:twinkle 2.4s var(--e-inout) infinite}
.art .a-tw2{transform-origin:30px 157px;animation:twinkle 2.4s var(--e-inout) 1.2s infinite}
@keyframes twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}45%{transform:scale(1.15) rotate(45deg);opacity:1}60%{transform:scale(1) rotate(45deg)}}

.art .a-spin{transform-origin:100px 104px;animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.art .a-note{transform-origin:160px 50px;animation:noteArc 3s var(--e-out) infinite}
@keyframes noteArc{0%{transform:translate(-8px,10px) rotate(-10deg);opacity:0}25%{opacity:1}60%{transform:translate(6px,-12px) rotate(8deg);opacity:1}100%{transform:translate(14px,-26px) rotate(14deg);opacity:0}}

.art .a-clap{transform-origin:40px 78px;animation:clap 3.4s linear infinite}
@keyframes clap{
  0%,46%{transform:rotate(0);animation-timing-function:var(--e-inout)}
  56%{transform:rotate(-12deg);animation-timing-function:var(--e-in)}
  59%{transform:rotate(16deg);animation-timing-function:var(--e-out)}
  63%{transform:rotate(11deg)}
  67%,84%{transform:rotate(16deg);animation-timing-function:var(--e-inout)}
  100%{transform:rotate(0)}}
.art .a-board{transform-origin:100px 170px;animation:boardHit 3.4s linear infinite}
@keyframes boardHit{0%,58%,80%,100%{transform:none}61%{transform:scale(1.05,.93)}67%{transform:scale(.98,1.02)}}

.art .a-swing{transform-origin:142px 62px;animation:swing 4.2s var(--e-inout) infinite}
@keyframes swing{0%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}24%{transform:rotate(-11deg)}38%{transform:rotate(7deg)}52%{transform:rotate(-4deg)}66%{transform:rotate(2deg)}78%{transform:rotate(-.6deg)}}

.art .a-pie{transform-origin:100px 150px;animation:breathe 2.6s var(--e-inout) infinite}
@keyframes breathe{0%,100%{transform:none}50%{transform:scale(1.03,.96)}}
.art .a-steam,.art .a-steam2{animation:steam 2.6s var(--e-out) infinite}
.art .a-steam2{animation-delay:1.3s}
@keyframes steam{0%{transform:translateY(14px);opacity:0}30%{opacity:1}100%{transform:translateY(-16px) scaleY(1.15);opacity:0}}

.art .a-bulb{transform-origin:100px 150px;animation:bulb 3s var(--e-inout) infinite}
@keyframes bulb{0%,100%{transform:none}50%{transform:translateY(-4px) rotate(-2deg)}}
.art .a-rays{transform-origin:100px 70px;animation:rays 1.5s var(--e-out) infinite}
@keyframes rays{0%{transform:scale(.85);opacity:.2}40%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:.4}}
.art .a-wifi path:last-child{animation:wifi 1.5s steps(1) infinite}
.art .a-wifi path:first-child{animation:wifi 1.5s steps(1) .3s infinite}
@keyframes wifi{0%{opacity:.25}35%,100%{opacity:1}}

.art .a-blink{transform-origin:100px 106px;animation:blink 4s linear infinite}
@keyframes blink{0%,88%,100%{transform:none}91%{transform:scaleY(.1)}94%{transform:none}}
.art .a-earl{transform-origin:66px 92px;animation:earL 3s var(--e-inout) infinite}
.art .a-earr{transform-origin:134px 92px;animation:earR 3s var(--e-inout) .12s infinite}
@keyframes earL{0%,60%,100%{transform:none}70%{transform:rotate(-10deg)}80%{transform:rotate(5deg)}88%{transform:rotate(-2deg)}}
@keyframes earR{0%,60%,100%{transform:none}70%{transform:rotate(10deg)}80%{transform:rotate(-5deg)}88%{transform:rotate(2deg)}}

.art .a-hop{transform-origin:100px 136px;animation:hop 2.8s linear infinite}
@keyframes hop{
  0%,38%{transform:none;animation-timing-function:var(--e-inout)}
  48%{transform:scale(1.1,.86);animation-timing-function:var(--e-out)}
  62%{transform:translateY(-24px) scale(.93,1.1);animation-timing-function:var(--e-in)}
  74%{transform:scale(1.12,.85);animation-timing-function:var(--e-out)}
  84%{transform:scale(.97,1.04)}
  92%,100%{transform:none}}
.art .a-shine{animation:shine 2.8s var(--e-out) infinite}
@keyframes shine{0%,62%{opacity:0}70%{opacity:1}100%{opacity:0}}

.art .a-scan{transform-origin:110px 110px;animation:scan 4.4s var(--e-inout) infinite}
@keyframes scan{0%,100%{transform:none}25%{transform:translate(14px,-8px) rotate(7deg)}50%{transform:translate(0,-14px)}75%{transform:translate(-14px,-8px) rotate(-7deg)}}

.art .a-sun{transform-origin:150px 46px;animation:citySun 6s var(--e-inout) infinite}
@keyframes citySun{0%,100%{transform:none}50%{transform:translateY(12px) scale(1.06)}}
.art .a-wave{animation:wave 2.4s linear infinite}
@keyframes wave{to{transform:translateX(60px)}}

.art .a-flip{transform-origin:100px 100px;animation:flip 7s linear infinite}
@keyframes flip{
  0%,36%{transform:rotate(0);animation-timing-function:var(--e-inout)}
  42%{transform:rotate(-14deg);animation-timing-function:var(--e-inout)}
  50%{transform:rotate(192deg);animation-timing-function:var(--e-out)}
  54%{transform:rotate(176deg)}
  57%,86%{transform:rotate(180deg);animation-timing-function:var(--e-inout)}
  91%{transform:rotate(166deg);animation-timing-function:var(--e-inout)}
  98%{transform:rotate(372deg);animation-timing-function:var(--e-out)}
  100%{transform:rotate(360deg)}}
.art .a-sand{animation:sand .6s linear infinite}
@keyframes sand{to{stroke-dashoffset:-10}}

.art .a-needle{transform-origin:100px 104px;animation:needle 4.5s var(--e-out) infinite}
@keyframes needle{0%{transform:rotate(0)}8%{transform:rotate(40deg)}18%{transform:rotate(-26deg)}28%{transform:rotate(16deg)}38%{transform:rotate(-9deg)}48%{transform:rotate(4deg)}58%,100%{transform:rotate(0)}}

.art .a-leaf{transform-box:fill-box;transform-origin:100% 100%;animation:leaf 3.2s var(--e-inout) var(--d) infinite}
@keyframes leaf{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
.art .a-wattle{transform-origin:136px 146px;animation:breathe 2.2s var(--e-inout) .4s infinite}

.art .a-sunrise{transform-origin:132px 66px;animation:sunrise 5s var(--e-inout) infinite}
@keyframes sunrise{0%,100%{transform:translateY(8px)}50%{transform:translateY(-4px) scale(1.05)}}

.art .a-flag{transform-origin:100px 45px;animation:flag 2.2s var(--e-inout) infinite}
@keyframes flag{0%,100%{transform:skewY(0) scaleX(1)}30%{transform:skewY(-7deg) scaleX(.94)}60%{transform:skewY(4deg) scaleX(1.03)}}
.art .a-arrow{animation:arrow 3.6s linear infinite}
@keyframes arrow{
  0%{transform:translate(70px,-70px);opacity:0;animation-timing-function:var(--e-in)}
  8%{opacity:1}
  20%{transform:translate(-5px,5px);animation-timing-function:var(--e-out)}
  26%,80%{transform:none;opacity:1;animation-timing-function:var(--e-in)}
  92%,100%{transform:translate(0,30px);opacity:0}}
.art .a-target{transform-origin:92px 180px;animation:target 3.6s linear infinite}
@keyframes target{0%,19%,60%,100%{transform:none}22%{transform:rotate(-5deg) scale(.96,1.04)}30%{transform:rotate(3.5deg)}38%{transform:rotate(-1.8deg)}46%{transform:rotate(.6deg)}}

/* mapa: cada cidade aparece e solta uma onda (ação secundária) */
.dot .ring{fill:none;stroke:var(--wattle);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.scrolly-fig[data-step="3"] .dot .ring{animation:ripple 1.6s var(--e-out) calc(var(--i) * 40ms + .35s) both}
.citymap .dot:hover .ring{animation:ripple 1.2s var(--e-out) infinite}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(3.2)}}
.yr{transform-origin:0 100%}

/* trilha de paradas: o ponto atual estica até o tamanho certo */
.lv-list a.now{animation:nowIn .7s var(--spring) .2s both}
@keyframes nowIn{from{transform:scale(.7);opacity:.4}}

/* transição entre páginas: a antiga sai acelerando, a nova chega desacelerando */
.top{view-transition-name:topo}
::view-transition-old(root){animation:vtOut .4s var(--e-in) both}
::view-transition-new(root){animation:vtIn .75s var(--e-out) .05s both}
@keyframes vtOut{to{opacity:0;transform:translateY(-2%) scale(.985)}}
@keyframes vtIn{from{opacity:0;transform:translateY(5%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.menu li{opacity:1;transform:none}
  .card.rv>*{opacity:1;translate:0 0}
  .mq-track{transform:none}
  .dot circle{transform:scale(1)}
}

/* pular para o conteúdo: só aparece com o foco do teclado */
.skip{position:fixed;left:16px;top:-80px;z-index:9500;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--bg);font:600 14px var(--body);text-decoration:none;transition:top .3s var(--e-out)}
.skip:focus{top:12px}
main:focus{outline:none}


/* celular: menos ar entre os atos, paradas em duas colunas e passos do scrollytelling mais curtos */
@media (max-width:599px){
  .act{padding:64px 0 36px}
  .act-head{margin-bottom:28px}
  .act-way{padding-top:48px}
  .stamps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .stamp{min-height:196px;padding:20px 14px}
  .stamp .art{width:64px;height:64px;margin:10px 0 auto}
  .stamp b{font-size:21px;margin-top:12px}
  .stamp small{font-size:13px}
  .step{min-height:46vh}
  .steps{padding-bottom:12vh}
}