/* ============================================================
   KALI THEME — paleta extraída das obras + tema claro/escuro
   Cores medidas nas pinturas (dominantes saturadas):
   cobalto #2141AB · vermelho #C53036 · laranja #EA6F22
   âmbar #DC8F01 · verde #029A25 · magenta #D94579
   Regra: neutros seguram a sofisticação; a cor das obras
   entra só na TIPOGRAFIA de destaque (olhos de seção,
   itálicos, números, trilhas da timeline) e nos fios de UI.
   ============================================================ */

/* --- Acentos das obras (versão p/ fundo ESCURO: mais luz) --- */
:root{
  --k-blue:#7E97EC;
  --k-blue-deep:#3D5FD0;
  --k-red:#E0574D;
  --k-orange:#E8863C;
  --k-amber:#E4BE4E;
  --k-green:#5FB56E;
  --k-magenta:#DE6A97;

  /* Remapeia os acentos herdados do design system p/ a paleta Kali:
     copper (acento primário de UI) vira o COBALTO das telas;
     brass (acento secundário) vira o VERMELHO. */
  --copper:#3D5FD0;
  --copper-lt:#7E97EC;
  --brass:#E0574D;

  /* Acento corrente da seção (cada <section> define o seu via --acc) */
  --acc:var(--copper-lt);

  --nav-glass:rgba(12,11,10,.82);
}

/* --- TEMA CLARO (papel quente; acentos aprofundados p/ contraste) --- */
[data-theme="light"]{
  --ink:#F5F1E8;
  --ink-2:#EBE6D9;
  --bone:#1A1712;
  --bone-dim:#575145;
  --line:rgba(26,23,18,.16);
  --oxblood:#D8D2C2;

  --k-blue:#1E3A9E;
  --k-blue-deep:#1E3A9E;
  --k-red:#B0271F;
  --k-orange:#AF5309;
  --k-amber:#8A6A08;
  --k-green:#1B7A33;
  --k-magenta:#B0295D;

  --copper:#1E3A9E;
  --copper-lt:#2C4BB8;
  --brass:#B0271F;

  --nav-glass:rgba(245,241,232,.88);
}

/* Fundo com textura de tela de pintura (trama de canvas, tile sem emenda).
   Sutil nos dois temas: fios claros/escuros em alpha baixo sobre a cor base. */
body{background-image:url('../img/site/canvas-tex.png');background-size:340px}

/* Nav com vidro conforme o tema */
.nav.scrolled{background:var(--nav-glass)}

/* Hero e bandas são "ilhas escuras" nos dois temas (texto sobre foto):
   dentro delas, restauram-se os claros e os acentos luminosos. */
.hero,.band{color:#E9E4D8}
[data-theme="light"] .hero,[data-theme="light"] .band{
  --bone:#E9E4D8;--bone-dim:#C7C0B2;
  --copper-lt:#7E97EC;--brass:#E0574D;
  --k-amber:#E4BE4E;--k-blue:#7E97EC;--k-red:#E0574D;
}

/* --- Tipografia colorida pelas obras (por seção, via --acc) --- */
.kicker-row .eyebrow,.kicker-row .ix{color:var(--acc)}
.h-sec em{color:var(--acc)}
.stat .v em{color:var(--acc)}
.card .dist{color:var(--acc)}
.topic .n{color:var(--acc)}
.media-card .outlet{color:var(--acc)}
.cta-band h3 em{color:var(--acc)}

/* Hero: itálico em âmbar das telas */
.hero h1 .it{color:var(--k-amber)}

/* Barra de progresso do topo: o espectro das obras, em fio de 2px */
.progress{background:linear-gradient(90deg,var(--k-blue-deep),var(--k-magenta),var(--k-red),var(--k-orange),var(--k-green))}

/* Timeline paralela: caminho = cobalto · obra = vermelho
   (copper/brass já remapeados; reforça a linha de progresso) */
.ptl-progress{background:linear-gradient(var(--copper),var(--brass));box-shadow:0 0 12px rgba(61,95,208,.45)}
.ptl-row.in .ptl-year .dot{box-shadow:0 0 0 4px rgba(61,95,208,.16),0 0 16px rgba(61,95,208,.45)}

/* Seleção de texto e foco */
::selection{background:var(--copper);color:#fff}

/* --- Botão de tema (nav + gaveta) --- */
.theme-btn{background:none;border:1px solid var(--line);color:var(--bone-dim);cursor:pointer;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;
  padding:.5rem .8rem;margin-left:1.1rem;line-height:1;transition:color .25s,border-color .25s;border-radius:var(--radius-pill)}
.theme-btn:hover{color:var(--bone);border-color:var(--bone-dim)}
.nav-drawer .theme-btn{margin-left:0;font-size:.72rem;padding:.7rem 1.1rem}

/* ============================================================
   ESCALA TIPOGRÁFICA AMPLIADA (pedido do cliente: fontes maiores)
   Base rem sobe p/ 18px; etiquetas monospace ganham piso de leitura.
   ============================================================ */
html{font-size:112.5%}

/* Piso para os micro-rótulos em monospace (fontes, datas, legendas) */
p.mono{font-size:.72rem!important}
.srcline{font-size:.72rem!important}
.eyebrow{font-size:.78rem}
.kicker-row .ix{font-size:.76rem}
/* Rótulo (dist) alinhado à esquerda, empilhado abaixo do título:
   evita o alinhamento à direita que ficava estranho quando quebra em 3 linhas. */
.card .top{flex-direction:column;align-items:flex-start;gap:.45rem}
.card .dist{font-size:.72rem;white-space:normal;text-align:left;line-height:1.6;max-width:none}

/* Foto da exposição preenche o quadrado inteiro (a obra continua "contain"). */
#exposicoes .art-grid img{object-fit:cover;object-position:center}
.card p{font-size:1.02rem}
.media-card .outlet{font-size:.7rem}
.media-card .date{font-size:.74rem}
.media-card .go{font-size:.7rem}
.stat .l{font-size:.74rem;letter-spacing:.06em}
.band-cap{font-size:.8rem}
.hero-meta{font-size:.78rem}
.ptl-card .k{font-size:.66rem}
.ptl-card p{font-size:.96rem}
.ptl-head .s{font-size:.66rem}
.ptl-year .yr{font-size:.9rem}
.art-grid figcaption{font-size:.68rem}
.chip{font-size:.66rem}
.topic .n{font-size:.78rem}
.ph-box{font-size:.8rem}
.footer h5{font-size:.7rem}
.footer-bottom{font-size:.7rem}
.footer .fcol a{font-size:.96rem}
.nav .links{font-size:.68rem;gap:1.3rem}
.lang-sw{font-size:.7rem}
.theme-btn{font-size:.64rem}
.img-ph::before{font-size:.7rem}

/* Com fontes maiores, o menu completo precisa de mais largura */
@media(max-width:1120px){
  .nav .links{display:none}
  .nav .burger{display:flex}
}

/* Telas baixas (iPhone SE etc.): o bloco do hero (eyebrow+título+meta),
   maior com as fontes ampliadas, pode encostar no nav fixo. Reduz o
   ritmo vertical só nesse caso, sem mudar tamanho de fonte. */
@media(max-height:700px){
  .hero{padding-top:4.4rem}
  .hero .eyebrow{margin-bottom:.9rem!important}
  .hero-sub{margin-top:1.1rem!important}
  .hero-meta{margin-top:1.2rem!important}
}

/* ============================================================
   TÍTULOS "PINTADOS" — filtro SVG (turbulência + deslocamento)
   deforma sutilmente o contorno vetorial das letras grandes,
   como se a tinta tivesse sido aplicada à mão sobre a tela.
   Só em títulos grandes: o corpo de texto fica intacto/legível.
   ============================================================ */
/* Efeito drybrush: a borda ganha um leve tremor orgânico (displacement fino)
   e o preenchimento é sutilmente erodido pela trama da tela (feComposite "in"
   com máscara de turbulência) — como tinta assentada sobre o linho, não vetor. */
.hero h1,.h-sec,.pagehead h1,.post-head h1,.cta-band h3{
  filter:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="paint" x="-6%" y="-6%" width="112%" height="112%"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.1" result="shape"/><feTurbulence type="turbulence" baseFrequency="0.5 0.55" numOctaves="2" seed="9" result="weave"/><feColorMatrix in="weave" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.6 1.0" result="wmask"/><feComposite in="shape" in2="wmask" operator="in"/></filter></svg>#paint');
}
.nav .brand,.footer .fbrand{
  filter:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="paintsoft" x="-6%" y="-6%" width="112%" height="112%"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="0.8" result="shape"/><feTurbulence type="turbulence" baseFrequency="0.6 0.62" numOctaves="2" seed="9" result="weave"/><feColorMatrix in="weave" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -0.35 1.0" result="wmask"/><feComposite in="shape" in2="wmask" operator="in"/></filter></svg>#paintsoft');
}

/* Corpo de texto JUSTIFICADO, sem hífen quebrando palavras (pedido do cliente) */
.prose p,.lead,.card p,.ptl-card p,.post-body p{
  text-align:justify;
  hyphens:none;-webkit-hyphens:none;
  overflow-wrap:normal;word-break:normal;
}

/* Ajustes finos do tema claro */
[data-theme="light"] .art-grid .frame{background:var(--ink);border-color:var(--line)}
[data-theme="light"] .ph-box{border-color:rgba(30,58,158,.4);background:rgba(30,58,158,.05)}
[data-theme="light"] .ph-box b{color:var(--copper-lt)}
[data-theme="light"] .band{background:linear-gradient(135deg,var(--ink-2),var(--ink) 60%)}