:root{--gold:#c9a45f;--cream:#f0e4ca;--ink:#16120d;--line:#d7b96f}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#080807;color:var(--cream);font-family:Georgia,'Times New Roman',serif}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;background:radial-gradient(circle at 50% 20%,transparent 60%,rgba(0,0,0,.26));mix-blend-mode:multiply}
.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:82px;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(#080807ee,rgba(8,8,7,.2));backdrop-filter:blur(4px)}
.brand{display:flex;align-items:center;gap:14px}.sigil{width:42px;height:42px;border:1px solid #c9a45f99;border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:24px}.wordmark{font-size:25px;letter-spacing:5px}.tagline{display:block;margin-top:2px;font-size:9px;letter-spacing:2px;color:#cdbf9f}
.status{border:1px solid #c9a45f88;background:#0a0908cc;padding:10px 15px;border-radius:999px;font-size:12px;letter-spacing:1.2px;white-space:nowrap}
.scenes{padding-top:82px}.scene{position:relative;overflow:hidden;border-top:1px solid #c9a45f55;scroll-margin-top:82px}.scene.albion,.scene.descida,.scene.entrada{aspect-ratio:16/9}.scene.mercado,.scene.forum{aspect-ratio:3/2}
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;animation:drift 18s ease-in-out infinite alternate;transform-origin:center}
.scene:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,4,.5),rgba(5,5,4,.07) 46%,rgba(5,5,4,.07) 74%,rgba(5,5,4,.24));pointer-events:none;transition:opacity .6s ease}
.scene:hover img{animation-duration:28s}@keyframes drift{from{transform:translateX(-.25%)}to{transform:translateX(.25%)}}
/* ATMOSFERA — andaime temporário sobre as imagens diurnas. A luz da cena deriva de
   time.period (o Renderer escreve data-period em .scenes). NENHUMA palavra de tempo
   aparece: a cena só clareia/escurece. Para trocar por imagens dedicadas de cada
   momento, basta dar a .scene-atmo um background-image por período (ou trocar o <img>);
   a lógica JS não muda. A luz é um tom sólido em mix-blend-mode:multiply — tarde é
   branco (multiply neutro = imagem crua); os demais períodos tingem/escurecem. A
   transição suave usa background-color (animável em todos os motores). */
.scene-atmo{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;background-color:#ffffff;transition:background-color 1200ms ease}
.scenes[data-period="madrugada"] .scene-atmo{background-color:#2a3550}
.scenes[data-period="manhã"] .scene-atmo{background-color:#edeadd}
.scenes[data-period="tarde"] .scene-atmo{background-color:#ffffff}
.scenes[data-period="entardecer"] .scene-atmo{background-color:#e9b57a}
.scenes[data-period="noite"] .scene-atmo{background-color:#141b30}
/* ATMOSFERA VIVA — ambiente sutil (fumaça, brasa, névoa) sobre as imagens paradas.
   Só ELEMENTOS, nunca figuras. Fica acima do andaime de luz por período (z-index 3),
   então aparece em qualquer hora. Puro CSS (transform/opacity); reduced-motion desliga.
   Posições dos pontos de fumaça são provisórias (inline no HTML), reajustáveis. */
.ambient{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ambient__smoke{position:absolute;width:clamp(34px,5vw,76px);height:clamp(34px,5vw,76px);border-radius:50%;background:radial-gradient(circle,rgba(222,219,210,.95),rgba(205,203,196,0) 70%);filter:blur(8px);opacity:0;transform:translate(-50%,12px) scale(.45);animation:ambient-smoke var(--dur,12s) ease-out var(--delay,0s) infinite;will-change:transform,opacity}
@keyframes ambient-smoke{0%{opacity:0;transform:translate(-50%,12px) scale(.45)}22%{opacity:var(--peak,.3)}65%{opacity:calc(var(--peak,.3)*.55)}100%{opacity:0;transform:translate(calc(-50% + var(--sway,14px)),-132px) scale(2)}}
/* Glow da forja: só um calor de fundo bem fraco (a fagulha é o que se vê, não o
   halo). Cor de brasa, não amarelo-luz. */
.ambient__glow{position:absolute;width:clamp(56px,8vw,120px);height:clamp(56px,8vw,120px);border-radius:50%;background:radial-gradient(circle,rgba(255,118,44,.5),rgba(255,86,30,0) 66%);mix-blend-mode:screen;filter:blur(6px);transform:translate(-50%,-50%);animation:ambient-ember 5.2s ease-in-out infinite;will-change:opacity}
@keyframes ambient-ember{0%,100%{opacity:.09}50%{opacity:.17}}
.ambient__haze{position:absolute;left:-10%;right:-10%;top:12%;height:26%;background:radial-gradient(ellipse at 50% 50%,rgba(214,218,218,.2),rgba(214,218,218,0) 70%);filter:blur(10px);animation:ambient-drift 40s ease-in-out infinite}
.ambient__mist{position:absolute;left:-18%;right:-18%;top:50%;height:38%;background:linear-gradient(0deg,rgba(204,210,210,.22),rgba(204,210,210,.07) 60%,rgba(204,210,210,0));filter:blur(12px);animation:ambient-drift 52s ease-in-out infinite}
@keyframes ambient-drift{0%{transform:translateX(-7%)}50%{transform:translateX(7%)}100%{transform:translateX(-7%)}}
/* CÂMERA VIVA (Ken Burns): a moldura empurra e respira devagar — transforma a foto
   parada em plano vivo. É o maior antídoto contra a sensação de estático. Só nas
   todas as cenas (substitui o micro-drift antigo). */
@keyframes ambient-cam{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.13) translate(-1.6%,-1.1%)}}
.scene>img{animation:ambient-cam 30s ease-in-out infinite alternate}
/* PARALLAX DE ROLAGEM (a "descida do falcão") — nas cenas da descida, a imagem de
   fundo desliza num ritmo diferente do conteúdo conforme a cena cruza a viewport,
   dando profundidade de câmera descendo. Usa scroll-driven animation
   (animation-timeline:view()): roda no COMPOSITOR — sem listener de scroll, sem
   reflow — então não trava a rolagem (inclusive mobile). A escala constante dá a
   folga para o deslocamento sem revelar bordas. Só onde há suporte (Chrome/Edge/
   Android); Safari/Firefox seguem no camera-loop, sem parallax e sem jank. O
   parallax move só a IMAGEM (o conteúdo, overlays e hotspots ficam no lugar).
   reduced-motion desliga tudo (bloco no fim). */
@keyframes scene-parallax{from{transform:translateY(-6%) scale(1.16)}to{transform:translateY(6%) scale(1.16)}}
/* Camada de parallax das cenas COM hotspots (mercado, fórum): imagem + overlays +
   marcadores vivem juntos aqui e são transformados em bloco, então os hotspots
   acompanham a imagem (não clicam no vazio). O conteúdo/texto fica FORA, rolando na
   velocidade da cena — o diferencial é a profundidade. Sem suporte a view(),
   o bloco cai no camera-loop; a imagem interna não anima sozinha. */
.parallax{position:absolute;inset:0;will-change:transform}
/* .cine-cam: a camada de câmera das cenas cinematográficas — imagem + overlays +
   waypoints movem-se JUNTOS (fumaça fica nos telhados, waypoint no portão).
   Fallback (sem view()): respira no camera-loop, como o .parallax. */
.cine-cam{position:absolute;inset:0;will-change:transform;animation:ambient-cam 30s ease-in-out infinite alternate}
.scene .parallax>img,.scene .cine-cam>img{animation:none}
.scene.mercado>.parallax,.scene.forum>.parallax,.scene.entrada>.parallax{animation:ambient-cam 30s ease-in-out infinite alternate}
@supports (animation-timeline: view()){
  .scene.entrada>.parallax,.scene.mercado>.parallax,.scene.forum>.parallax{animation-name:scene-parallax;animation-timeline:view();animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;will-change:transform}
}
/* MODO CINEMATOGRÁFICO (Albion e descida) — seção alta + quadro sticky. A imagem
   fica FIXA na viewport enquanto a rolagem atravessa a seção; a rolagem (nunca
   interceptada) guia um mergulho lento da câmera (zoom/pan) e o ritmo do texto;
   a cena seguinte emerge por baixo quando a seção termina.
   REVERTER: remover a classe "cine" das duas <section> no index.html — tudo aqui
   é escopado em .scene.cine; sem a classe, volta ao empilhado normal.
   Fora do gate (@supports + reduced-motion), .cine-frame é só um contêiner
   transparente e as cenas ficam exatamente como hoje. */
.cine-frame{position:absolute;inset:0}
@media (prefers-reduced-motion: no-preference){
@supports (animation-timeline: view()){
  /* overflow:visible é OBRIGATÓRIO: o overflow:hidden herdado de .scene mataria o
     sticky (ancestral com overflow ≠ visible vira o "scroller" do sticky e ele
     nunca gruda → vão preto). O recorte do zoom passa a ser do quadro. */
  .scene.cine{aspect-ratio:auto;height:200vh;height:200svh;view-timeline:--cine block;overflow:visible}
  /* inset:auto limpa o inset:0 da regra-base (o bottom:0 residual sobre-restringe
     o sticky); só top:0 fica como âncora. */
  .scene.cine .cine-frame{position:sticky;inset:auto;top:0;height:100vh;height:100svh;overflow:hidden}
  /* A câmera anima a CAMADA (imagem + overlays + waypoints juntos). */
  .scene.cine .cine-frame>.cine-cam{animation:cine-cam linear both;animation-timeline:--cine;will-change:transform}
  .scene.cine .scene-content{animation:cine-text linear both;animation-timeline:--cine}
}}
@keyframes cine-cam{0%{transform:scale(1.06) translateY(2.5%)}100%{transform:scale(1.22) translateY(-2.5%)}}
@keyframes cine-text{0%{opacity:0;transform:translateY(calc(-50% + 30px))}20%{opacity:1;transform:translateY(-50%)}75%{opacity:1;transform:translateY(-50%)}100%{opacity:0;transform:translateY(calc(-50% - 26px))}}
/* VIDA AMBIENTE — elementos vetoriais que se movem SOBRE a cena (z acima da
   fumaça, abaixo do conteúdo/hotspots). Pássaros e detritos são injetados pelo JS;
   fagulhas, água e estandartes vivem aqui em CSS. Posições provisórias (inline). */
.life{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.life-bird{position:absolute;left:0;will-change:transform,opacity}
.life-bird svg{display:block;width:100%;height:100%;overflow:visible}
.life-debris{position:absolute;left:0;width:6px;height:3px;border-radius:40% 40% 50% 50%;background:rgba(122,98,62,.55);will-change:transform,opacity}
/* Fagulhas da forja (injetadas pelo JS): pontos de brasa que sobem, ESFRIAM de cor
   — laranja-brasa → vermelho → vermelho-escuro — e apagam. Densas mas contidas. */
.life-spark{position:absolute;width:3.5px;height:3.5px;border-radius:50%;background:#ff8a2e;box-shadow:0 0 4px 1px rgba(255,88,24,.7);mix-blend-mode:screen;opacity:0;transform:translate(-50%,0) scale(1);animation:spark-rise var(--d,2.2s) ease-out forwards;will-change:transform,opacity,background-color}
@keyframes spark-rise{0%{opacity:0;background:#ff9a3c;transform:translate(-50%,0) scale(1)}10%{opacity:1}50%{background:#ff5a1e}82%{opacity:.65;background:#e12b12}100%{opacity:0;background:#7c1206;transform:translate(calc(-50% + var(--x,8px)),calc(-1 * var(--rise,52px))) scale(.35)}}
/* Água: um brilho que percorre a superfície devagar. */
.water{position:absolute;border-radius:50%;background:linear-gradient(90deg,transparent,rgba(220,235,240,.3),transparent);filter:blur(3px);mix-blend-mode:screen;animation:water-shimmer 7.5s ease-in-out infinite}
@keyframes water-shimmer{0%,100%{opacity:.22;transform:translateX(-9%)}50%{opacity:.5;transform:translateX(9%)}}
/* Estandarte: um brilho quente que corre pelo tecido, com um leve skew — a luz do
   pano ao vento, não a forma balançando (a forma está na foto). */
.banner{position:absolute;width:2.8%;height:10%;transform-origin:top center;background:linear-gradient(180deg,rgba(150,24,24,0),rgba(186,38,38,.24) 26%,rgba(150,22,22,.22) 70%,rgba(120,16,16,0));mix-blend-mode:overlay;filter:blur(.5px);animation:banner-wave 3.6s ease-in-out var(--delay,0s) infinite;will-change:transform}
@keyframes banner-wave{0%,100%{transform:skewX(calc(var(--amp,5deg) * -1)) scaleY(1)}25%{transform:skewX(calc(var(--amp,5deg) * .6)) scaleY(1.02)}50%{transform:skewX(var(--amp,5deg)) scaleY(1)}75%{transform:skewX(calc(var(--amp,5deg) * -.6)) scaleY(.98)}}
.scene-content{position:absolute;z-index:5;left:5%;top:50%;transform:translateY(-50%);width:min(360px,34%)}.num{font-size:34px;color:var(--gold);float:left;margin-right:20px;line-height:1}.kicker{font-size:12px;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:6px}.scene h1{font-size:clamp(34px,4vw,62px);line-height:.95;margin:0 0 12px;font-weight:700}.scene p{font-size:15px;line-height:1.45;margin:0;color:#eee3cf}.cta{display:inline-block;margin-top:15px;padding:9px 15px;border:1px solid var(--gold);border-radius:999px;color:var(--cream);text-decoration:none;font-size:12px;letter-spacing:1px;background:#0b0a08aa}
.live-note{margin-top:10px;color:#d4c4a3;font-size:11px;letter-spacing:.5px}
/* HOTSPOTS DO MERCADO — marcadores clicáveis sobre a cena. Ficam ocultos até o
   CTA "Explorar o Mercado" revelá-los (.mercado.is-exploring). Posição relativa
   (%), reajustável quando a arte definitiva entrar. */
.market-hotspot{position:absolute;z-index:6;width:20px;height:20px;margin:0;padding:0;transform:translate(-50%,-50%);border-radius:50%;border:1px solid var(--gold);background:#0b0a08cc;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .2s ease}
.market-hotspot:before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--gold);opacity:.85}
.market-hotspot:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #c9a45f88;opacity:0;animation:hotspot-pulse 2.6s ease-out infinite}
.scene.is-exploring .market-hotspot{opacity:1;pointer-events:auto}
.scene.is-exploring .market-hotspot:after{opacity:1}
/* Ao explorar (mercado ou fórum), o texto de abertura recua para liberar os
   marcadores da esquerda e mostrar a cena inteira. */
.scene .scene-content{transition:opacity .6s ease}
.scene.is-exploring .scene-content{opacity:0;pointer-events:none}
/* Ao explorar, o véu de legibilidade recua também — a cena clareia e o lugar
   (a forja, na borda esquerda) aparece para ser clicado. */
.scene.is-exploring:after{opacity:.35}
.market-hotspot:hover{transform:translate(-50%,-50%) scale(1.18)}
.market-hotspot:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
@keyframes hotspot-pulse{0%{transform:scale(.55);opacity:.7}100%{transform:scale(1.5);opacity:0}}
/* WAYPOINTS — pontos de NAVEGAÇÃO nas cenas da descida (âncoras, não painéis):
   sempre visíveis (discretos), rótulo genérico no hover, clicar rola até a cena. */
.market-hotspot.waypoint{opacity:.7;pointer-events:auto;display:block}
.market-hotspot.waypoint:after{content:"";animation:none;opacity:0}
.market-hotspot.waypoint:before{opacity:.6}
.market-hotspot.waypoint:hover{opacity:1}
.market-hotspot.waypoint[data-label]:hover:after,.market-hotspot.waypoint[data-label]:focus-visible:after{content:attr(data-label);position:absolute;inset:auto;left:24px;top:50%;transform:translateY(-50%);width:max-content;height:auto;border:1px solid #c9a45f66;border-radius:999px;background:#0b0a08d9;color:#e2d3b6;font-size:11px;letter-spacing:1px;padding:4px 10px;opacity:1;animation:none}
/* CLIMA — o Renderer publica data-weather em .scenes; o CSS reage. A chuva é um
   tile SVG repetido animado por background-position em múltiplo exato da altura
   do tile (loop perfeito); a névoa é um véu que sobe de opacidade. Ambos vivem
   nos pseudo-elementos da camada .ambient (dentro da câmera/parallax — a chuva
   acompanha o quadro). reduced-motion esconde .ambient inteiro, como sempre. */
.ambient:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 2.5s ease;background:linear-gradient(180deg,rgba(206,212,212,.16),rgba(206,212,212,.34))}
.scenes[data-weather="neblina"] .ambient:before{opacity:1}
.scenes[data-weather="nublado"] .ambient:before{opacity:.35}
/* CHUVA EM PROFUNDIDADE — duas camadas de fios: LONGE (finos, densos, fracos) e
   PERTO (grossos, esparsos, mais fortes, levemente borrados), caindo em ritmos
   diferentes; mais um véu frio que escurece e resfria a cena. A chuva se SENTE,
   não é só risco. As camadas usam TRANSFORM (compositor, suave); loop perfeito
   (translada exatamente uma altura de tile). Só animam sob [data-weather=chuva].
   .rainfx é injetado em cada .ambient pelo Renderer; reduced-motion esconde .ambient. */
.rainfx{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.4s ease;background:linear-gradient(rgba(30,42,60,.12),rgba(16,26,40,.24))}
.scenes[data-weather="chuva"] .rainfx{opacity:1}
.rainfx:before,.rainfx:after{content:"";position:absolute;inset:-150px;background-repeat:repeat;will-change:transform}
.scenes[data-weather="chuva"] .rainfx:before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='100'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cline%20x1='9'%20y1='4'%20x2='9'%20y2='12'%20stroke='rgba(190,206,218,.28)'%20stroke-width='.8'/%3E%3Cline%20x1='24'%20y1='2'%20x2='24'%20y2='24'%20stroke='rgba(190,206,218,.20)'%20stroke-width='.7'/%3E%3Cline%20x1='41'%20y1='8'%20x2='41'%20y2='16'%20stroke='rgba(196,210,222,.32)'%20stroke-width='1'/%3E%3Cline%20x1='58'%20y1='3'%20x2='58'%20y2='30'%20stroke='rgba(190,206,218,.15)'%20stroke-width='.6'/%3E%3Cline%20x1='66'%20y1='20'%20x2='66'%20y2='28'%20stroke='rgba(190,206,218,.26)'%20stroke-width='.8'/%3E%3Cline%20x1='15'%20y1='34'%20x2='15'%20y2='40'%20stroke='rgba(190,206,218,.18)'%20stroke-width='.7'/%3E%3Cline%20x1='33'%20y1='30'%20x2='33'%20y2='52'%20stroke='rgba(194,208,220,.30)'%20stroke-width='.8'/%3E%3Cline%20x1='49'%20y1='42'%20x2='49'%20y2='50'%20stroke='rgba(190,206,218,.30)'%20stroke-width='1'/%3E%3Cline%20x1='62'%20y1='46'%20x2='62'%20y2='66'%20stroke='rgba(190,206,218,.15)'%20stroke-width='.6'/%3E%3Cline%20x1='7'%20y1='54'%20x2='7'%20y2='62'%20stroke='rgba(190,206,218,.24)'%20stroke-width='.8'/%3E%3Cline%20x1='27'%20y1='62'%20x2='27'%20y2='72'%20stroke='rgba(190,206,218,.20)'%20stroke-width='.7'/%3E%3Cline%20x1='45'%20y1='70'%20x2='45'%20y2='84'%20stroke='rgba(194,208,220,.30)'%20stroke-width='.9'/%3E%3Cline%20x1='56'%20y1='78'%20x2='56'%20y2='86'%20stroke='rgba(190,206,218,.22)'%20stroke-width='.7'/%3E%3Cline%20x1='20'%20y1='84'%20x2='20'%20y2='96'%20stroke='rgba(190,206,218,.26)'%20stroke-width='.8'/%3E%3C/g%3E%3C/svg%3E");animation:rain-far 1s linear infinite}
.scenes[data-weather="chuva"] .rainfx:after{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='100'%20height='140'%3E%3Cg%20fill='none'%20stroke-linecap='round'%3E%3Cline%20x1='14'%20y1='6'%20x2='14'%20y2='34'%20stroke='rgba(208,224,234,.55)'%20stroke-width='1.8'/%3E%3Cline%20x1='30'%20y1='2'%20x2='30'%20y2='14'%20stroke='rgba(204,220,230,.38)'%20stroke-width='1.2'/%3E%3Cline%20x1='52'%20y1='10'%20x2='52'%20y2='46'%20stroke='rgba(208,224,234,.48)'%20stroke-width='1.5'/%3E%3Cline%20x1='70'%20y1='4'%20x2='70'%20y2='20'%20stroke='rgba(204,220,230,.34)'%20stroke-width='1.1'/%3E%3Cline%20x1='86'%20y1='24'%20x2='86'%20y2='60'%20stroke='rgba(208,224,234,.52)'%20stroke-width='1.7'/%3E%3Cline%20x1='24'%20y1='54'%20x2='24'%20y2='70'%20stroke='rgba(204,220,230,.40)'%20stroke-width='1.2'/%3E%3Cline%20x1='44'%20y1='62'%20x2='44'%20y2='96'%20stroke='rgba(208,224,234,.50)'%20stroke-width='1.6'/%3E%3Cline%20x1='64'%20y1='78'%20x2='64'%20y2='92'%20stroke='rgba(204,220,230,.38)'%20stroke-width='1.2'/%3E%3Cline%20x1='90'%20y1='96'%20x2='90'%20y2='128'%20stroke='rgba(208,224,234,.48)'%20stroke-width='1.6'/%3E%3Cline%20x1='10'%20y1='100'%20x2='10'%20y2='120'%20stroke='rgba(206,222,232,.44)'%20stroke-width='1.4'/%3E%3Cline%20x1='34'%20y1='110'%20x2='34'%20y2='138'%20stroke='rgba(206,222,232,.40)'%20stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E");filter:blur(.3px);animation:rain-near .62s linear infinite}
@keyframes rain-far{from{transform:translateY(-100px)}to{transform:translateY(0)}}
@keyframes rain-near{from{transform:translateY(-140px)}to{transform:translateY(0)}}

/* PAINEL DE INSPEÇÃO — um só componente, aberto no clique de qualquer hotspot. */
.inspect[hidden]{display:none}
.inspect{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.inspect__scrim{position:absolute;inset:0;background:rgba(6,6,5,.74);backdrop-filter:blur(2px)}
.inspect__panel{position:relative;z-index:1;width:min(460px,92vw);max-height:86vh;overflow:auto;background:linear-gradient(#141009,#0d0a06);border:1px solid var(--line);border-radius:10px;padding:26px 26px 30px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.inspect__close{position:absolute;top:10px;right:12px;width:32px;height:32px;display:grid;place-items:center;border:1px solid #c9a45f66;background:#0a0908;color:var(--gold);border-radius:50%;font-size:20px;line-height:1;cursor:pointer}
.inspect__close:hover{background:#141009}
.inspect__name{font-size:26px;letter-spacing:1px;color:var(--cream);margin:2px 0 18px;padding-bottom:12px;border-bottom:1px solid #c9a45f44}
.inspect__layers{margin:0}
.inspect__layers>div{margin-bottom:14px}
.inspect__layers dt{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.inspect__layers dd{margin:0;font-size:14px;line-height:1.5;color:#eee3cf}
.inspect__atmo{margin:16px 0 0;padding-top:14px;border-top:1px solid #c9a45f33;font-style:italic;font-size:13.5px;line-height:1.5;color:#d4c4a3}
.inspect__person{margin:16px 0 0;padding-top:14px;border-top:1px solid #c9a45f33}
.inspect__person[hidden]{display:none}
.inspect__person-name{margin:0 0 6px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.inspect__person-text{margin:0;font-size:14px;line-height:1.5;color:#eee3cf}
/* Face CANTO (Fórum): descrição + peça atual do acervo + botão de rotação. */
.inspect__desc{margin:2px 0 16px;font-style:italic;font-size:12px;letter-spacing:1px;color:var(--gold)}
.inspect__piece{margin:0;font-size:14px;line-height:1.6;color:#eee3cf;white-space:pre-line;min-height:1.6em}
.inspect__next{margin-top:18px;padding:8px 14px;border:1px solid var(--gold);background:#0b0a08aa;color:var(--cream);border-radius:999px;font-family:inherit;font-size:11px;letter-spacing:1px;cursor:pointer}
.inspect__next[hidden]{display:none}
.inspect__next:hover{background:#141009}
.side-nav{position:fixed;z-index:40;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:18px}.side-nav a{width:12px;height:12px;border:1px solid var(--gold);border-radius:50%;background:#17130d;position:relative}.side-nav a:after{content:attr(data-label);position:absolute;right:20px;top:-4px;color:#e2d3b6;font-size:10px;letter-spacing:1px;opacity:0;transition:.2s}.side-nav a:hover:after,.side-nav a.active:after{opacity:1}
.bottom{position:fixed;z-index:50;left:50%;bottom:0;transform:translateX(-50%);display:flex;gap:25px;padding:10px 25px;background:linear-gradient(transparent,#070706ee);width:100%;justify-content:center}.bottom a{color:#d9c7a3;text-decoration:none;font-size:10px;letter-spacing:2px}
.weather-state{display:inline-block}.live-dot{display:inline-block;width:6px;height:6px;background:#d7b96f;border-radius:50%;margin-right:6px;box-shadow:0 0 0 0 #d7b96f;animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 7px transparent}}
@media(max-width:800px){.topbar{height:68px;padding:12px 15px}.scenes{padding-top:68px}.scene{min-height:clamp(230px,46vw,330px);aspect-ratio:auto;scroll-margin-top:68px}.wordmark{font-size:20px}.tagline{font-size:7px}.sigil{width:34px;height:34px}.status{font-size:9px;padding:7px 10px}.scene-content{left:5%;width:55%}.scene h1{font-size:32px}.scene p{font-size:12px}.bottom{gap:12px;padding:8px 10px}.bottom a{font-size:8px}.side-nav{right:9px}}
@media(max-width:520px){.status{display:none}.scene-content{width:68%}.scene h1{font-size:27px}.scene p{font-size:11px}.cta{font-size:10px}.bottom a:nth-child(n+5){display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.scene img,.live-dot{animation:none}.scene-atmo{transition:none}.market-hotspot,.market-hotspot:after{animation:none;transition:none}.scene .parallax,.scene .cine-cam{animation:none}.ambient{display:none}.life{display:none}}

/* BLOCO DE INSCRIÇÃO — fim da jornada, depois do Fórum. Paleta e tipografia de
   Albion (papel #E8DCC0, nanquim #2A2018, areia #6B5A42, vermelho #7A2E22,
   Caladea). Envia para /subscribe (Cloudflare Pages Function); a chave fica no
   servidor. O +34px no padding-bottom livra a barra fixa do rodapé. */
.subscribe{position:relative;z-index:1;background:#2A2018;color:#E8DCC0;font-family:'Caladea',Georgia,'Times New Roman',serif;padding:clamp(52px,9vw,120px) 20px calc(clamp(52px,9vw,120px) + 34px);border-top:1px solid #6B5A42}
.subscribe__inner{max-width:560px;margin:0 auto;text-align:center}
.subscribe__sigil{width:46px;height:46px;margin:0 auto 22px;border:1px solid #6B5A42;border-radius:50%;display:grid;place-items:center;color:#7A2E22;font-size:24px}
.subscribe__title,.subscribe__welcome-title{font-size:clamp(26px,3.4vw,40px);line-height:1.12;margin:0 0 12px;font-weight:700;letter-spacing:.4px;color:#E8DCC0}
.subscribe__lede{font-size:15px;line-height:1.6;margin:0 0 26px;color:rgba(232,220,192,.74)}
.subscribe__form{margin:0}
.subscribe__lang{display:inline-flex;gap:4px;margin:0 0 18px;padding:4px;border:1px solid #6B5A42;border-radius:999px;background:rgba(232,220,192,.04)}
.subscribe__opt{position:relative;cursor:pointer}
.subscribe__opt input{position:absolute;opacity:0;width:0;height:0}
.subscribe__opt span{display:block;font-size:13px;letter-spacing:.5px;padding:7px 16px;border-radius:999px;color:rgba(232,220,192,.7);transition:background .2s,color .2s}
.subscribe__opt input:checked + span{background:#7A2E22;color:#E8DCC0}
.subscribe__opt input:focus-visible + span{outline:2px solid #E8DCC0;outline-offset:2px}
.subscribe__row{display:flex;gap:10px;max-width:440px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.subscribe__email{flex:1 1 220px;min-width:0;background:#E8DCC0;color:#2A2018;border:1px solid #6B5A42;border-radius:6px;padding:13px 15px;font-family:inherit;font-size:15px}
.subscribe__email::placeholder{color:#6B5A42;opacity:.85}
.subscribe__email:focus{outline:2px solid #7A2E22;outline-offset:1px}
.subscribe__btn{flex:0 0 auto;background:#7A2E22;color:#E8DCC0;border:1px solid #7A2E22;border-radius:6px;padding:13px 24px;font-family:inherit;font-size:15px;letter-spacing:.5px;cursor:pointer;transition:background .2s}
.subscribe__btn:hover{background:#8f382a}
.subscribe__btn:disabled{opacity:.6;cursor:default}
.subscribe__msg{min-height:1.2em;margin:16px 0 0;font-size:13.5px;line-height:1.5;color:rgba(232,220,192,.72)}
.subscribe__msg.is-error{color:#e39b8f}
.subscribe__welcome{display:none}
[data-subscribe].is-subscribed .subscribe__form-wrap{display:none}
[data-subscribe].is-subscribed .subscribe__welcome{display:block}
.subscribe__welcome-sub{font-size:14px;line-height:1.55;color:rgba(232,220,192,.72);margin:0}