/* blog e cases de alexmerovic.com.br · gerado junto com build.py e cases.py
   Identidade "Expressão" (30/09/2026), a mesma da home: explosão / comedido / explosão.
   O teto de Tiepolo só nos momentos de expressão (o masthead do índice e o rodapé com o nome);
   o resto é cinza liso, fios finos e muito ar. Antonio 200/300 condensada nos grandes gestos,
   Brygada 1918 nos títulos (o <i>/<b> do título vira itálico, sem cor), Geist no texto.
   Serifa só em texto de até 2 linhas (medidor no build.py: .serif-longo volta para a Geist).
   Tema: claro por padrão (data-tema="claro" no <html>); escuro só por clique, com a mesma chave localStorage "tema" da home. */
:root{
  --bg:#1e1e20; --fg:#f2f1ee; --fg-2:#b4b3af; --fg-3:#95948f; --linha:#3a3a3d;
  --texto:#d6d5d1; --painel:#242426; --fio-forte:#56565a;
  --vidro:rgba(24,24,26,.6); --vidro-fio:rgba(255,255,255,.16); --nav-vidro:rgba(30,30,32,.62);
  --arte-tinta:#f6f4ef;
  /* nomes antigos, lidos pelos scripts de figura (SVG), pelos posts e pelos cases: todos apontam para os novos.
     Cor de DADO (nunca de interface): --ambar é a série em destaque, --azul a série neutra, --verm o alerta
     (o único tom frio da página; zero vermelho). Link e interação são a própria tinta (--acento = --fg). */
  --ink:var(--fg); --dim:var(--fg-2); --dim-2:var(--fg-3);
  --line:var(--linha); --line-2:var(--linha); --line-3:var(--fio-forte);
  --panel:var(--painel); --card:var(--linha); --hover:rgba(242,241,238,.05);
  --ambar:var(--fg); --acento:var(--fg); --acento-esc:var(--fg-3); --realce:var(--fg);
  --azul:#7c7b77; --azul-esc:#4a4a4e; --verm:#86A3BF;
  --sombra-luz:rgba(14,14,16,.92);
  --condensada:"Antonio","League Gothic","Arial Narrow",sans-serif;
  --serifa:"Brygada 1918",Georgia,serif;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--serifa);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
  --col:680px; --larga:1200px; --gut:clamp(16px,3.4vw,48px);
  --ease:cubic-bezier(.2,.62,.18,1); --ease-nevoa:cubic-bezier(.33,0,.1,1);
  color-scheme:dark;
}
:root[data-tema="claro"]{
  --bg:#f4f3ef; --fg:#18181a; --fg-2:#4f4f53; --fg-3:#66666b; --linha:#d9d7d1;
  --texto:#2b2b2e; --painel:#ecebe6; --fio-forte:#b3b1ab;
  --vidro:rgba(246,245,241,.55); --vidro-fio:rgba(255,255,255,.55); --nav-vidro:rgba(244,243,239,.66);
  --hover:rgba(24,24,26,.04);
  --azul:#a3a29c; --azul-esc:#c9c7c1; --verm:#3F5F7F;
  --sombra-luz:rgba(24,24,26,.86);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;
  transition:background-color .5s var(--ease),color .5s var(--ease)}
a{color:inherit;text-decoration:none}
a:hover,a:focus{text-decoration:none}
img{max-width:100%}
ul,ol{list-style:none}
::selection{background:color-mix(in srgb,var(--fg) 22%,transparent);color:var(--fg)}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* contra órfã e viúva: pretty no texto corrido, balance em título e rótulo */
p,li,figcaption,dd,blockquote,.sub,.post-sub{text-wrap:pretty}
h1,h2,h3,.rot,.rubrica,.tit{text-wrap:balance}

/* ---------- navegação: fixa, vira vidro ao rolar (a mesma da home) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;height:64px;border-bottom:1px solid transparent;
  transition:background-color .6s var(--ease),border-color .6s var(--ease),-webkit-backdrop-filter .6s var(--ease),backdrop-filter .6s var(--ease)}
.nav.rolou{background:var(--nav-vidro);border-bottom-color:var(--vidro-fio);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5)}
.nav-in{height:100%;padding:0 var(--gut);display:flex;align-items:center;gap:26px;--ng:26px;--ng-m:4px}
.marca{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;margin-right:auto}
.marca span{font-weight:400;opacity:.7}
.links{display:flex;align-items:center;gap:26px}
.links a{font-size:13px;letter-spacing:.005em;opacity:.78;white-space:nowrap;transition:opacity .3s var(--ease)}
.links a:hover,.links a.ativo{opacity:1}
.ico{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;background:transparent;
  color:var(--fg);cursor:pointer;opacity:.82;transition:opacity .3s var(--ease)}
.ico:hover{opacity:1}
.ico svg{width:18px;height:18px}
.tema .sol{display:none}
:root[data-tema="claro"] .tema .sol{display:block}
:root[data-tema="claro"] .tema .lua{display:none}
.vs-curto{display:none}

/* pílulas de contorno fino (as da home) */
.pilula,.acao{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 22px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--fg) 46%,transparent);background:transparent;color:var(--fg);
  font:500 14px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.pilula:hover,.acao:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pilula.cheia,.acao[href^="mailto"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.pilula.cheia:hover,.acao[href^="mailto"]:hover{opacity:.86}
.nav .pilula{height:36px;padding:0 16px;font-size:13px}

/* ---------- rótulos e metadados ---------- */
.rot{display:block;font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--fg-3)}
.rot-n,.rubrica{display:block;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.meta{font-size:13px;color:var(--fg-3);display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;font-variant-numeric:tabular-nums}
.meta .autor{color:var(--fg-2)}
.sep{opacity:.6}
.vazio{color:var(--fg-3);padding:40px 0 64px;font-size:16px}

/* =====================================================================
   ÍNDICE DO BLOG: o masthead é o momento de expressão; o resto, comedido
   ===================================================================== */
.home{padding-bottom:24px}
.mast{position:relative;min-height:min(86svh,920px);display:flex;flex-direction:column;justify-content:flex-end;
  overflow:clip;isolation:isolate}
.mast-arte{position:absolute;inset:0;z-index:-3;overflow:hidden}
.mast-respira,.mast-arte picture,.mast-arte img{position:absolute;inset:0;width:100%;height:100%}
.mast-mov{position:absolute;inset:-5%}  /* camada do ponteiro (a mesma .arte-mov da home) */
.mast-mov .mast-respira{inset:0}
.mast-arte img{object-fit:cover;object-position:42% 46%;filter:saturate(var(--sat,1.32)) contrast(1.08)}  /* --sat por obra (carrossel) */
.mast-veu{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 80%,transparent) 0,color-mix(in srgb,var(--bg) 30%,transparent) 110px,transparent 220px),
    linear-gradient(0deg,var(--bg) 0,color-mix(in srgb,var(--bg) 94%,transparent) 14%,color-mix(in srgb,var(--bg) 70%,transparent) 30%,color-mix(in srgb,var(--bg) 26%,transparent) 50%,transparent 66%)}
.mast-in{width:100%;max-width:1440px;margin:0 auto;padding:120px var(--gut) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:28px 48px;align-items:end}
.mast-t{grid-column:1;grid-row:1;font-family:var(--condensada);font-weight:300;text-transform:uppercase;
  font-size:min(30vh,26vw,300px);line-height:.84;letter-spacing:-.005em;margin:0 0 -.04em -.03em;white-space:nowrap}
.mast-vidro{grid-column:2;grid-row:1;padding:24px 26px 26px;background:var(--vidro);border:1px solid var(--vidro-fio);border-radius:3px;
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);
  transition:background-color .5s var(--ease),border-color .5s var(--ease)}
.mast-cab{display:flex;align-items:center;gap:14px}
.mast-av{display:block;width:44px;height:44px;object-fit:cover;background:var(--linha);filter:grayscale(1) contrast(1.06)}
.mast-nome{font-family:var(--serifa);font-size:24px;line-height:1.1;letter-spacing:-.01em}
.mast-nome i{font-style:italic}
.mast-desc{margin-top:16px;font-size:16px;line-height:1.55;letter-spacing:-.006em}
.mast-base{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap;
  margin-top:18px;padding:12px 0 clamp(36px,5vw,64px);border-top:1px solid var(--linha);font-size:12px;line-height:1.5;color:var(--fg-3)}
.mast-base i{font-family:var(--serifa);font-size:13px}
/* carrossel de obras do masthead (o mesmo da home): legendas empilhadas na mesma célula, só a da obra à vista aparece */
.obra-ts{display:grid;flex:1;min-width:0}
.obra-t{grid-area:1 / 1;visibility:hidden;opacity:0;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.obra-t.on{visibility:visible;opacity:1;transition:opacity 1.2s var(--ease) .7s,visibility 0s}
.obra-n{display:none;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.06em}
.carrossel .obra-n{display:inline}
.mast-troca{opacity:0;filter:blur(18px);transition:opacity 2.5s var(--ease-nevoa),filter 2.5s var(--ease-nevoa)}
.mast-troca.on{opacity:1;filter:blur(0)}
.mast-form,.assinar form{display:flex;gap:8px;margin-top:20px}
.mast-form input,.assinar input{flex:1;min-width:0;height:44px;padding:0 20px;border-radius:999px;background:transparent;
  border:1px solid color-mix(in srgb,var(--fg) 34%,transparent);color:var(--fg);font:400 14.5px/1 var(--sans);outline:none;
  transition:border-color .3s var(--ease)}
.mast-form input:focus,.assinar input:focus{border-color:var(--fg)}
.mast-form input::placeholder,.assinar input::placeholder{color:var(--fg-3)}
.mast-form button,.assinar button{flex:none;height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--fg);
  background:var(--fg);color:var(--bg);font:500 14px/1 var(--sans);cursor:pointer;transition:opacity .3s var(--ease)}
.mast-form button:hover,.assinar button:hover{opacity:.86}

/* o miolo do índice: abas e painéis, no cinza */
.home-in{max-width:var(--larga);margin:0 auto;padding:clamp(24px,3vw,40px) var(--gut) 0}

/* ---------- abas: 01 02 03 em condensada; o fio desliza ---------- */
.abas{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--linha);margin-bottom:clamp(48px,6vw,80px);counter-reset:aba}
.abas button{font:500 14px/1 var(--sans);letter-spacing:.005em;color:var(--fg-3);background:none;border:0;cursor:pointer;
  display:inline-flex;align-items:baseline;gap:10px;padding:16px 18px 16px 0;margin-right:22px;margin-bottom:-1px;
  border-bottom:1px solid transparent;transition:color .4s var(--ease);counter-increment:aba}
.abas button::before{content:counter(aba,decimal-leading-zero);font-family:var(--condensada);font-weight:300;font-size:18px;
  font-variant-numeric:tabular-nums}
.abas button:hover,.abas button[aria-selected="true"]{color:var(--fg)}
.abas:not(.pronto) button[aria-selected="true"]{border-bottom-color:var(--fg)}
.abas-ind{position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--fg);
  transition:transform .6s var(--ease),width .6s var(--ease)}
.abas:not(.anima) .abas-ind{transition:none}
.painel{animation:entra .6s var(--ease)}
.painel[hidden]{display:none}
@keyframes entra{from{opacity:0;filter:blur(8px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}

/* ---------- destaque ---------- */
.destaque{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:end}
.destaque .zoom{aspect-ratio:16/10;background:var(--linha)}
.destaque .zoom img{width:100%;height:100%;object-fit:cover}
.destaque .rubrica{margin-bottom:16px}
.destaque h2{font-family:var(--serifa);font-weight:400;font-size:clamp(36px,4.2vw,60px);line-height:1.03;letter-spacing:-.018em;
  transition:opacity .4s var(--ease)}
.destaque h2 i,.destaque h2 b{font-style:italic;font-weight:400}
.destaque:hover h2{opacity:.72}
.destaque .sub{margin:18px 0 20px;font-size:17px;line-height:1.55;color:var(--fg-2)}
.destaque.sem-capa{grid-template-columns:1fr;max-width:var(--col)}

/* ---------- listas: fio fino entre itens, número em condensada ---------- */
.lista,.ano,.mais{margin-top:clamp(80px,9vw,128px);border-top:1px solid var(--linha);padding-top:clamp(24px,3vw,36px);counter-reset:item;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);column-gap:48px;align-items:start}
.lista > .rot,.ano > .rot,.mais > .rot{grid-column:1;padding-top:.3em}
.lista > .linha,.ano > .linha,.mais > .linha{grid-column:2}
.ano + .ano{margin-top:clamp(56px,6vw,88px)}
.linha{display:grid;grid-template-columns:56px minmax(0,1fr) auto;column-gap:20px;align-items:start;padding:26px 0 28px;counter-increment:item}
.linha + .linha{border-top:1px solid var(--linha)}
.linha::before{content:counter(item,decimal-leading-zero);font-family:var(--condensada);font-weight:200;font-size:34px;line-height:.9;
  color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .4s var(--ease)}
.linha:hover::before{color:var(--fg)}
.linha-txt{min-width:0}
.linha h3{font-family:var(--serifa);font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.12;letter-spacing:-.012em;transition:opacity .4s var(--ease)}
.linha:hover h3{opacity:.72}
.linha .sub{margin:10px 0 12px;font-size:15.5px;line-height:1.55;color:var(--fg-2);max-width:40em}
.linha .meta{margin-top:12px}
.linha .sub + .meta{margin-top:0}
.linha .zoom{width:136px;aspect-ratio:3/2;background:var(--linha)}
.thumb{display:block;width:100%;height:100%;object-fit:cover}
.tag-rasc{display:table;margin-bottom:10px;padding:3px 10px;border:1px solid currentColor;border-radius:999px;
  font:500 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-2)}

/* ---------- aba Sobre ---------- */
.sobre{max-width:var(--col);margin:0 auto}
.sobre > p{font-size:18px;line-height:1.65;color:var(--texto)}
.sobre > p + p{margin-top:1.1em}
.sobre-acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:64px}

/* ---------- trajetória: thread no formato do X, fotos de altura fixa e largura natural ---------- */
.trajetoria-rot{margin-top:clamp(64px,7vw,96px);padding-top:26px;border-top:1px solid var(--linha)}
.trajetoria{margin-top:36px}
.marco{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:16px}
.marco-lado{display:flex;flex-direction:column;align-items:center}
.marco-av{display:block;width:36px;height:36px;object-fit:cover;background:var(--linha);filter:grayscale(1) contrast(1.06)}
.marco-lado::after{content:"";flex:1;width:1px;margin:10px 0;background:var(--linha)}
.marco:last-child .marco-lado::after{display:none}
.marco-corpo{padding-bottom:60px;min-width:0}
.marco:last-child .marco-corpo{padding-bottom:0}
.marco-cab{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13.5px;line-height:1.3;white-space:nowrap;overflow:hidden}
.marco-cab b{font-weight:600}
.marco-onde{color:var(--fg-3);overflow:hidden;text-overflow:ellipsis}
.marco-onde::before{content:"·";margin-right:8px}
.marco-n{margin-left:auto;flex:none;font-family:var(--condensada);font-weight:300;font-size:17px;color:var(--fg-3);font-variant-numeric:tabular-nums}
.marco-corpo h3{margin-top:8px;font-family:var(--serifa);font-weight:400;font-size:28px;line-height:1.12;letter-spacing:-.012em}
.sobre .marco-corpo p{margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--fg-2)}
.midia{display:flex;gap:8px;margin-top:20px;overflow-x:auto;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.midia::-webkit-scrollbar{display:none}
.foto{display:block;flex:none;margin:0;padding:0;border:0;background:var(--linha);overflow:hidden;cursor:zoom-in;isolation:isolate;scroll-snap-align:start}
.foto img{display:block;height:400px;width:auto;max-width:none;transform:scale(1);transition:transform 1.1s var(--ease)}
.foto:hover img,.foto:focus-visible img{transform:scale(1.03)}
.foto:focus-visible{outline:1px solid var(--fg);outline-offset:3px}

/* ---------- luz (ampliação) ---------- */
.luz{margin:auto;padding:0;border:0;background:transparent;max-width:min(92vw,1400px);max-height:92dvh;overflow:visible}
.luz::backdrop{background:var(--sombra-luz);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.luz[open]{animation:luzEntra .6s var(--ease)}
@keyframes luzEntra{from{opacity:0;filter:blur(10px);transform:translateY(10px)}to{opacity:1;filter:none;transform:none}}
.luz figure{margin:0}
.luz img{display:block;max-width:min(92vw,1400px);max-height:calc(92dvh - 38px);width:auto;height:auto}
.luz figcaption{margin-top:12px;font-size:12.5px;line-height:1.5;color:#c9c8c4;text-align:center;letter-spacing:.01em}
.luz-fecha{position:fixed;top:16px;right:16px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(242,241,238,.3);
  background:rgba(24,24,26,.6);color:#f2f1ee;font-size:22px;line-height:1;cursor:pointer;transition:background-color .3s var(--ease),color .3s var(--ease)}
.luz-fecha:hover{background:#f2f1ee;color:#1e1e20}

/* =====================================================================
   POST: leitura em primeiro lugar. Cinza liso, coluna confortável, nada competindo com o texto.
   ===================================================================== */
.faixa-rasc{position:relative;z-index:1;margin-top:64px;padding:9px 16px;text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-2);border-bottom:1px solid var(--linha)}
.post{max-width:calc(var(--col) + 2 * var(--gut));margin:0 auto;padding:calc(64px + clamp(56px,8vw,112px)) var(--gut) 40px}
.faixa-rasc + .post{padding-top:clamp(56px,8vw,112px)}
.voltar{display:inline-flex;align-items:center;gap:8px;margin-bottom:40px;font-size:13px;color:var(--fg-3);transition:color .3s var(--ease)}
.voltar:hover{color:var(--fg)}
.post-cab .rubrica{margin-bottom:18px}
.post-cab h1{font-family:var(--serifa);font-weight:400;font-size:clamp(44px,6.6vw,76px);line-height:1.02;letter-spacing:-.02em}
.post-cab h1 i,.post-cab h1 b{font-style:italic;font-weight:400}
.post-sub{margin-top:22px;font-size:19px;line-height:1.55;color:var(--fg-2);letter-spacing:-.008em}
.byline{display:flex;align-items:center;gap:14px;margin-top:34px}
.byline .zoom{width:40px;height:40px}
.byline img{display:block;width:40px;height:40px;object-fit:cover;background:var(--linha);filter:grayscale(1) contrast(1.06)}
.byline .autor{font-size:14.5px;font-weight:500;transition:opacity .3s var(--ease)}
.byline .autor:hover{opacity:.7}
.byline .meta{margin-top:2px}
.partilha{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 20px;
  margin-top:30px;padding:14px 0;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha)}

/* ---------- corpo do texto ---------- */
.corpo{margin-top:52px;font-size:18px;line-height:1.72;letter-spacing:-.003em;color:var(--texto);overflow-wrap:break-word}
.corpo > * + *{margin-top:1.15em}
.corpo h2,.corpo h3,.corpo h4{color:var(--fg);line-height:1.25;margin-top:2em}
.corpo h2{font-family:var(--serifa);font-weight:400;font-size:36px;line-height:1.1;letter-spacing:-.015em;margin-top:2.3em}
.corpo h3{font-size:20px;font-weight:600;letter-spacing:-.015em}
.corpo h4{font-size:17px;font-weight:600}
.corpo h2 + *,.corpo h3 + *,.corpo h4 + *{margin-top:.7em}
.corpo a{color:var(--fg);border-bottom:1px solid var(--fg-3);transition:border-color .3s var(--ease)}
.corpo a:hover{border-bottom-color:var(--fg)}
.corpo strong{color:var(--fg);font-weight:600}
.corpo ul,.corpo ol{padding-left:1.4em}
.corpo ul{list-style:disc}
.corpo ol{list-style:decimal}
.corpo li + li{margin-top:.4em}
.corpo li::marker{color:var(--fg-3)}
.corpo blockquote{border-left:1px solid var(--fg-3);padding:2px 0 2px 24px;color:var(--fg)}
.corpo blockquote p + p{margin-top:.8em}
.corpo hr{border:0;width:48px;height:1px;margin:3em auto;background:var(--fg-3)}
.corpo figure{margin-left:0;margin-right:0}
.corpo figure img,.corpo > p img{display:block;height:auto;background:var(--linha)}
/* REGRA DURA (Alex, 29/09): toda imagem de post tem teto de altura, o mesmo da Trajetória (400 px; 180 no celular).
   Largura natural, sem corte nem distorção, centralizada; clique abre inteira na luz. */
.corpo figure img,.corpo > p img{width:auto;max-width:100%;max-height:400px;margin-left:auto;margin-right:auto;cursor:zoom-in}
@media (max-width:560px){.corpo figure img,.corpo > p img{max-height:180px}}
.corpo figure img:focus-visible,.corpo > p img:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
/* legenda de museu: fio fino em cima, texto pequeno, título da obra em serifa */
.corpo figcaption{margin-top:14px;padding-top:10px;border-top:1px solid var(--linha);font-size:12.5px;line-height:1.55;color:var(--fg-3);text-align:left}
.corpo figcaption i{font-family:var(--serifa);font-size:13.5px}
.corpo code{font-family:var(--mono);font-size:.82em;background:var(--painel);border:1px solid var(--linha);padding:.1em .35em;color:var(--fg)}
.corpo pre{background:var(--painel);padding:16px 18px;overflow-x:auto;line-height:1.55}
.corpo pre code{background:none;border:0;padding:0;font-size:14px}
.corpo table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45;display:block;overflow-x:auto}
.corpo th,.corpo td{text-align:left;padding:11px 14px 11px 0;border-top:1px solid var(--linha);vertical-align:top}
.corpo tr:last-child td{border-bottom:1px solid var(--linha)}
.corpo th{color:var(--fg-3);font-weight:500;font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-top:0;padding-top:0}
.corpo td:first-child{color:var(--fg-2)}
.corpo .embed{position:relative;aspect-ratio:16/9}
.corpo .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.corpo .footnote{font-size:14.5px;line-height:1.6;color:var(--fg-2);border-top:1px solid var(--linha);padding-top:1.4em;margin-top:3em}
.corpo .footnote hr{display:none}
.corpo .footnote ol{padding-left:1.4em}
.corpo .footnote li::marker{color:var(--fg-3);font-variant-numeric:tabular-nums}
.corpo .footnote a{border-bottom:0}
.corpo sup{line-height:0;vertical-align:super;font-size:.72em}  /* nota não empurra a linha */
.corpo sup a{border-bottom:0;color:var(--fg);font-size:.8em;font-weight:500}
.corpo h2,.corpo h3{scroll-margin-top:96px}

/* ---------- assinar (fim do post) ---------- */
.assinar{margin-top:clamp(80px,9vw,120px);border-top:1px solid var(--linha);padding-top:32px}
.assinar h2{font-family:var(--serifa);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.015em;max-width:18em}
.assinar p{margin-top:12px;font-size:15.5px;line-height:1.55;color:var(--fg-2);max-width:40em}
.assinar form{max-width:480px;margin-top:26px}
.mais{margin-top:clamp(72px,8vw,112px);grid-template-columns:1fr;row-gap:8px}
.mais > .rot,.mais > .linha{grid-column:1}

/* ---------- barra de progresso ---------- */
.progresso{position:fixed;top:0;left:0;right:0;height:2px;z-index:50;pointer-events:none}
.progresso i{display:block;height:100%;background:var(--fg);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- sumário lateral (só em tela larga) ---------- */
.sumario{display:none}
@media (min-width:1240px){
  .sumario{display:block;position:fixed;top:140px;width:200px;max-height:calc(100dvh - 200px);overflow-y:auto;
    left:calc(50% - var(--col) / 2 - var(--gut) - 232px);scrollbar-width:none}
  .sumario .rot{margin-bottom:14px;font-size:12px}
  .sumario ol{counter-reset:cap}
  .sumario-lista{position:relative}
  .sumario li{border-left:1px solid var(--linha)}
  .sumario a{display:block;margin-left:-1px;padding:6px 0 6px 14px;border-left:1px solid transparent;font-size:13px;line-height:1.4;
    color:var(--fg-3);transition:color .4s var(--ease);text-wrap:balance}
  /* no ensaio, o mesmo numeral romano dos capítulos */
  .post:has(article.ensaio) .sumario li.n2{counter-increment:cap}
  .post:has(article.ensaio) .sumario li.n2 a::before{content:counter(cap,lower-roman) ".";margin-right:8px;font-family:var(--serifa);font-style:italic;font-size:14px}
  .sumario li.n3 a{padding-left:26px;font-size:12.5px}
  .sumario a:hover,.sumario a.on{color:var(--fg)}
  .sumario{transition:opacity .6s var(--ease),filter .6s var(--ease)}
  .pe-perto .sumario{opacity:0;filter:blur(8px);pointer-events:none}  /* o rodapé chegou: o índice sai, sem cobrir o contato */
  .sumario-ind{position:absolute;left:0;top:0;width:1px;height:0;background:var(--fg);opacity:0;pointer-events:none;
    transition:transform .6s var(--ease),height .6s var(--ease),opacity .3s var(--ease)}
}

/* ---------- fileira do post: compartilhar (ícones redondos) + ler com IA (pílula segmentada) ---------- */
.compartilhar{display:flex;gap:8px}
.ic{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);background:transparent;color:var(--fg-2);cursor:pointer;
  transition:color .35s var(--ease),border-color .35s var(--ease),background-color .35s var(--ease)}
.ic:hover,.ic:focus-visible{color:var(--bg);background:var(--fg);border-color:var(--fg);outline:none}
.ic.ok{color:var(--bg);background:var(--fg);border-color:var(--fg)}
.ic::after{content:attr(data-dica);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,4px);white-space:nowrap;
  padding:7px 10px;border-radius:999px;background:var(--fg);color:var(--bg);font-size:11.5px;font-weight:500;line-height:1;
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)}
.ic:hover::after,.ic:focus-visible::after,.ic.ok::after{opacity:1;transform:translate(-50%,0)}
.ler-ia{display:flex;align-items:center;gap:14px}
.ler-ia-rot{white-space:nowrap;font-size:13px;color:var(--fg-3)}
.seg{display:inline-flex;border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);border-radius:999px;overflow:hidden}
.seg > *{font:500 13px/1.2 var(--sans);color:var(--fg-2);background:transparent;border:0;cursor:pointer;padding:10px 15px;
  transition:color .3s var(--ease),background-color .3s var(--ease)}
.seg > * + *{border-left:1px solid color-mix(in srgb,var(--fg) 30%,transparent)}
.seg > *:hover,.seg > *:focus-visible{color:var(--bg);background:var(--fg);outline:none}
@media (max-width:560px){.ler-ia{width:100%;justify-content:space-between}}

/* ---------- regra do Alex: serifa só em texto de até 2 linhas ----------
   O medidor (no build, em toda página) conta as linhas reais; passou de duas, ganha .serif-longo e vira Geist. */
.serif-longo{font-family:var(--sans)!important;font-style:normal!important;letter-spacing:-.025em!important;font-weight:500;line-height:1.2}
.serif-longo i,.serif-longo b{font-style:normal!important}
.mast-nome.serif-longo{font-size:20px}
.post-cab h1.serif-longo{font-size:clamp(30px,4.6vw,44px);line-height:1.12}
.destaque h2.serif-longo{font-size:clamp(24px,2.6vw,30px);line-height:1.2}
.linha h3.serif-longo{font-size:19px;line-height:1.3}
.corpo h2.serif-longo{font-size:24px;line-height:1.25}
.marco-corpo h3.serif-longo{font-size:19px;line-height:1.3}
.assinar h2.serif-longo{font-size:21px;line-height:1.3}

/* =====================================================================
   RODAPÉ: a explosão volta. "MËROVIĆ" 100vw sobre o teto, afundado, na cor do fundo.
   Versão mais baixa que a da home, para caber no fim de uma página de leitura.
   ===================================================================== */
.pe{position:relative;margin-top:clamp(96px,10vw,150px);overflow:clip}
.pe-in{position:relative;z-index:1;max-width:1440px;margin:0 auto;padding:0 var(--gut) clamp(40px,5vw,64px)}
.pe-links{display:flex;flex-wrap:wrap;gap:12px}
.pe-assin{margin-top:28px;font-size:12px;letter-spacing:.01em;color:var(--fg-3)}
.rodape{position:relative;min-height:62svh;display:flex;flex-direction:column;justify-content:flex-end;
  clip-path:inset(-120svh 0 0 0);isolation:isolate;overflow-x:clip}
.rod-arte{position:absolute;inset:auto 0 0 0;height:100%;z-index:-3}
.rod-arte picture,.rod-arte img{display:block;width:100%;height:100%}
.rod-arte img{object-fit:cover;object-position:50% 40%;filter:saturate(1.3) contrast(1.06)}
/* a arte mora só dentro do rodapé; a névoa começa sólida acima dela (cobre o scale da entrada) e se abre ao longo do rodapé */
.rod-nevoa{position:absolute;inset:auto 0 auto 0;top:-10%;height:74%;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 16%,color-mix(in srgb,var(--bg) 90%,transparent) 30%,color-mix(in srgb,var(--bg) 68%,transparent) 46%,color-mix(in srgb,var(--bg) 40%,transparent) 62%,color-mix(in srgb,var(--bg) 16%,transparent) 80%,transparent 100%)}
/* o véu clareia ou escurece a arte na faixa do nome, sempre ao contrário da cor das letras */
.rod-veu{position:absolute;inset:auto 0 0 0;height:82%;z-index:-2;pointer-events:none;
  background:linear-gradient(0deg,rgba(240,237,231,.9) 0%,rgba(240,237,231,.8) 34%,rgba(240,237,231,.5) 62%,rgba(240,237,231,0) 100%)}
:root[data-tema="claro"] .rod-veu{
  background:linear-gradient(0deg,rgba(12,12,14,.9) 0%,rgba(12,12,14,.72) 30%,rgba(12,12,14,.48) 60%,rgba(12,12,14,0) 100%)}
.rodape::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,color-mix(in srgb,var(--bg) 22%,transparent) 30%,color-mix(in srgb,var(--bg) 55%,transparent) 58%,color-mix(in srgb,var(--bg) 85%,transparent) 82%,var(--bg) 100%)}
/* o nome é parte do fundo: cor do fundo, fora da seleção e do ponteiro; cada letra é pintada por ::before
   a partir de data-c (moldura.js), então o DOM fica sem texto e o Ctrl+A não o alcança */
.mero{font-family:var(--condensada);font-weight:300;text-transform:uppercase;font-size:31.5vw;line-height:.94;
  letter-spacing:-.01em;white-space:nowrap;padding-top:.14em;margin:0 0 -.3em;text-align:center;
  color:var(--bg);-webkit-user-select:none;user-select:none;pointer-events:none;cursor:default}
:root[data-tema="claro"] .mero{color:var(--arte-tinta)}
.mero .l{display:inline-block}
.mero .l::before{content:attr(data-c)}
.js .mero:not(.pronto){color:transparent}  /* antes de o script partir o nome em letras, o texto cru não aparece */

/* ---------- barra flutuante (o mesmo componente da home) ---------- */
.bf{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));z-index:45;display:flex;align-items:stretch;height:44px;
  border:1px solid var(--vidro-fio);border-radius:999px;overflow:hidden;background:var(--nav-vidro);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  transform:translate(-50%,calc(100% + 28px));opacity:0;transition:transform .6s var(--ease),opacity .4s var(--ease)}
.bf.bf-on,.bf:has(:focus-visible){transform:translate(-50%,0);opacity:1}
.bf > *{display:flex;align-items:center}
.bf > * + *{border-left:1px solid var(--vidro-fio)}
.bf-topo{position:relative;width:46px;justify-content:center;padding:0;border:0;background:none;cursor:pointer;color:var(--fg)}
.bf-topo svg{position:absolute;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;
  transition:opacity .3s,transform .4s var(--ease)}
.bf-seta{opacity:0;transform:translateY(4px);stroke-width:1.5}
.bf-topo:hover .bf-marca,.bf-topo:focus-visible .bf-marca{opacity:0;transform:scale(.7)}
.bf-topo:hover .bf-seta,.bf-topo:focus-visible .bf-seta{opacity:1;transform:none}
.bf-lk{font-size:13px;font-weight:500;padding:0 18px;color:var(--fg);opacity:.82;transition:opacity .3s,background-color .3s}
.bf-lk:hover{opacity:1}
.bf-cta{background:var(--fg);color:var(--bg);opacity:1}
.bf-topo:focus-visible,.bf-lk:focus-visible{outline:1px solid currentColor;outline-offset:-5px}
@media (max-width:400px){.bf-lk{padding:0 14px}}

/* ---------- zoom interno em TODAS as imagens (pedido do Alex, 29/09) ----------
   A imagem cresce 3% dentro da moldura .zoom (gerada pelo build.py) e o overflow:hidden corta a sobra.
   Só transform anima. NUNCA clip-path: ele roda fora do compositor e a borda pula. */
.zoom{display:block;overflow:hidden;flex:none;line-height:0}
.corpo figure .zoom{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
.zoom img{transform:scale(1);transition:transform 1.1s var(--ease)}
.zoom:hover img,a:hover .zoom img,.byline:hover .zoom img,.marco:hover .marco-lado .zoom img,.autoria:hover .zoom img{transform:scale(1.03)}

/* =====================================================================
   A NÉVOA: tudo que tem .rv sai de uma névoa (IntersectionObserver em moldura.js)
   ===================================================================== */
@property --m{syntax:"<percentage>";inherits:false;initial-value:100%}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;filter:blur(14px);transform:translateY(28px);
    transition:opacity .98s var(--ease),filter 1.26s var(--ease-nevoa),transform 1.26s var(--ease);
    transition-delay:calc(var(--d,0) * 77ms)}
  .js .rv.ok{opacity:1;filter:none;transform:none}
  /* o masthead: o teto sai de dentro de uma nuvem quando decodifica, e respira devagar */
  .js .mast-arte{filter:blur(28px) saturate(.7);transform:scale(1.1)}
  .mast-pronto .mast-arte{filter:none;transform:scale(1);transition:filter 1.96s var(--ease-nevoa),transform 2.52s var(--ease)}
  .mast-respira{animation:respira 38s var(--ease) infinite alternate}
  .mast-fora .mast-respira{animation-play-state:paused}
}
@keyframes respira{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.06) translate3d(-1.2%,-.8%,0)}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mast-arte img{animation:par linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
    .js .mero .l{animation:mero-entra linear both;animation-timeline:view();animation-range:entry calc(var(--i) * 3%) entry calc(32% + var(--i) * 4%)}
    .rod-arte{animation:rod-abre linear both;animation-timeline:view();animation-range:entry 0% entry 90%}
  }
}
@keyframes par{to{transform:translate3d(0,18%,0)}}
@keyframes mero-entra{from{opacity:0;filter:blur(26px);transform:translateY(.18em) scaleY(1.12)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes rod-abre{from{transform:scale(1.14);filter:blur(10px) saturate(.8)}to{transform:scale(1);filter:none}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .mast-in{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
}
/* ---------- celular ---------- */
@media (max-width:760px){
  .nav{height:56px}
  .nav-in{gap:4px}
  .marca span{display:none}
  .links{gap:16px}
  .links .so-largo{display:none}
  .vs-longo{display:none}.vs-curto{display:inline}
  .nav .pilula{height:34px;padding:0 10px}

  /* celular (carrossel-mobile, 30/09): "BLOG" sobe para logo abaixo do menu e o vidro com a frase vem colado nele,
     os dois na primeira tela; a arte fica à vista entre o vidro e a legenda, que desce para o pé */
  .mast{min-height:100vh;min-height:100svh;justify-content:flex-start}
  .mast-in{flex:1;grid-template-columns:1fr;grid-template-rows:auto auto minmax(20svh,1fr) auto;row-gap:18px;padding-top:calc(56px + 14px)}
  .mast-t{grid-column:1;grid-row:1;font-size:40vw}
  .mast-vidro{grid-column:1;grid-row:2;padding:20px 20px 22px}
  .mast-base{grid-row:4}
  .mast-arte img{object-position:44% 40%}
  .mast-veu{background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 88%,transparent) 0,color-mix(in srgb,var(--bg) 78%,transparent) 150px,color-mix(in srgb,var(--bg) 40%,transparent) 240px,transparent 340px),
    linear-gradient(0deg,var(--bg) 0,color-mix(in srgb,var(--bg) 90%,transparent) 8%,color-mix(in srgb,var(--bg) 50%,transparent) 18%,transparent 30%)}
  .destaque{grid-template-columns:1fr;gap:24px}
  .lista,.ano,.mais{grid-template-columns:1fr;row-gap:6px}
  .lista > .rot,.ano > .rot,.mais > .rot,.lista > .linha,.ano > .linha,.mais > .linha{grid-column:1}
  .linha{grid-template-columns:40px minmax(0,1fr) auto;column-gap:14px;padding:22px 0 24px}
  .linha::before{font-size:28px}
  .linha .zoom{width:84px}
  .post{padding-top:calc(56px + 48px)}
  .corpo{font-size:17px;line-height:1.7}
  .corpo h2{font-size:30px}
  .marco{grid-template-columns:32px minmax(0,1fr);column-gap:12px}
  .marco-av{width:32px;height:32px}
  .marco-cab{min-height:32px;font-size:12.5px;gap:6px}
  .marco-corpo h3{font-size:24px}
  .marco-corpo{padding-bottom:44px}
  .midia{margin-top:16px}
  .rodape{min-height:44svh}
  .rod-arte img{object-position:50% 30%}
  .mero{font-size:30.5vw}
  /* escuro no celular: o nome é baixo, o fade sobe só até o meio das letras */
  :root:not([data-tema="claro"]) .rodape::after{height:12%}
}
@media (max-width:560px){
  .foto img{height:180px}
}
@media (max-width:420px){
  .mast-form,.assinar form{flex-direction:column}
  .mast-form input,.assinar input{flex:none;width:100%}  /* em coluna, flex:1 viraria altura zero */
  .mast-form button,.assinar button{width:100%}
}

/* ---------- linhas editoriais (01/10): rótulo nos cartões, filtro, "Análise de", páginas de linha e de tema ---------- */
.linha .rubrica{margin-bottom:10px;font-size:11.5px;letter-spacing:.09em}
.filtro{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(36px,4.5vw,56px)}
.fl{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--fg) 30%,transparent);color:var(--fg-2);font:500 13px/1 var(--sans);letter-spacing:.005em;white-space:nowrap;
  transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
a.fl:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fl[aria-current]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.fl .n{font-family:var(--condensada);font-weight:300;font-size:15px;line-height:1;font-variant-numeric:tabular-nums;opacity:.7}
.fl.off{color:var(--fg-3);border-color:var(--linha);border-style:dashed;cursor:default}
.fl .em{font-size:11.5px;font-weight:400;letter-spacing:.02em;opacity:.85}
/* "Análise de: fonte": discreto, fio fino à esquerda, cinza, sem caixa colorida */
.analise-de,.temas{margin-top:22px;font-size:14px;line-height:1.55;color:var(--fg-3)}
.analise-de{padding:2px 0 2px 16px;border-left:1px solid var(--fio-forte)}
.analise-de a,.temas a{color:var(--fg-2);transition:color .3s var(--ease)}
.analise-de a:hover,.temas a:hover{color:var(--fg)}
.ad-rot{font-weight:500;color:var(--fg-3);letter-spacing:.01em;margin-right:2px}
.temas .sep{margin:0 6px;color:var(--fg-3)}
.analise-de + .temas{margin-top:14px}
/* página de uma linha ou de um tema */
.linha-pg{max-width:var(--larga);margin:0 auto;padding:calc(64px + clamp(56px,8vw,112px)) var(--gut) 40px}
.linha-pg .rubrica{margin-bottom:18px}
.lp-t{font-family:var(--serifa);font-weight:400;font-size:clamp(44px,6.6vw,76px);line-height:1.02;letter-spacing:-.02em}
.lp-t.serif-longo{font-size:clamp(30px,4.6vw,44px);line-height:1.12}
.lp-frase{margin:22px 0 clamp(32px,4vw,48px);max-width:36em;font-size:19px;line-height:1.55;color:var(--fg-2);letter-spacing:-.008em}
.linha-pg .lista{margin-top:clamp(28px,3.5vw,44px)}
.linha-pg .vazio{border-top:1px solid var(--linha);padding-top:clamp(24px,3vw,36px)}
.home-in > .filtro{margin-top:-8px}
@media (max-width:760px){
  .lp-frase{font-size:17px}
  .analise-de,.temas{font-size:13.5px}
}
.filtro + .ano{margin-top:0}

/* ---------- musica de fundo: botao no cabecalho ---------- */
.ico.mus{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:auto;min-width:40px;height:40px;padding:0 15px 0 13px;
  border:1px solid color-mix(in srgb,var(--fg) 42%,transparent);border-radius:999px;opacity:1;color:var(--fg);
  font:500 13px/1 var(--sans);letter-spacing:.01em;white-space:nowrap;
  transition:background-color .35s var(--ease),border-color .35s var(--ease)}
.ico.mus:hover{background:color-mix(in srgb,var(--fg) 10%,transparent);border-color:color-mix(in srgb,var(--fg) 75%,transparent)}
.ico.mus[aria-pressed="true"]{border-color:color-mix(in srgb,var(--fg) 70%,transparent)}
.mus .mus-lbl{display:inline-block;min-width:3.3em;text-align:left}
.mus .mus-barras{display:none}
.mus[aria-pressed="true"] .mus-nota{display:none}
.mus[aria-pressed="true"] .mus-barras{display:block}
.mus-barras path{transform-box:fill-box;transform-origin:50% 100%;animation:mus-b 1.15s ease-in-out infinite}
.mus-barras .b1{animation-delay:-.2s}.mus-barras .b2{animation-delay:-.75s}.mus-barras .b3{animation-delay:-.45s}.mus-barras .b4{animation-delay:-.95s}
@keyframes mus-b{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@media (max-width:760px){.ico.mus{width:40px;padding:0}.mus .mus-lbl{display:none}}
@media (prefers-reduced-motion:reduce){.mus-barras path{animation:none;transform:scaleY(.7)}.mus-barras .b2{transform:scaleY(1)}.mus-barras .b4{transform:scaleY(.45)}}
@media (max-width:360px){.abas{gap:2px}.abas button{padding-right:10px}}   /* 320 px: a aba "Sobre" passava 2 px da tela */