/* Hallmark · pre-emit critique: P5 H5 E5 S5 R5 V4 */
/* Hallmark · macrostructure: newsroom split-cover + project ledger · variation: layered document desk + linked visual covers
 * theme: studied-DNA (source: referência de portfólio escuro enviada pelo cliente em 29/08/2026)
 * paleta: chumbo (grafite) + escala de cinza + branco · sem acento cromático (o ciano saiu a pedido do cliente)
 * fios: --rule divide seções · --rule-strong contorna controles (≥3:1, WCAG 1.4.11)
 * forma: mídia e cartões 20px · botões e chips 12px · pílulas 999px (regra única, aplicada em toda a página)
 * nav: N5 · footer: Ft1 · contrast: pass · mobile: pass (320–1920)
 */
/* U+2197 nao existe em Anybody nem em Hanken: sem esta fonte o iOS entrega o emoji colorido */
@font-face{font-family:AMSetas;src:url('assets/fonts/am-setas.woff2') format('woff2');unicode-range:U+2190-21FF;font-display:swap}
@font-face{font-family:Anybody;src:url('assets/fonts/anybody-var.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:Hanken;src:url('assets/fonts/hanken-grotesk-var.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap}
:root{
  --paper:#17181a;--paper-2:#1f2124;--paper-3:#282a2e;
  --ink:#f4f5f6;--silver:#c8c9cd;--muted:#a9abb0;--rule:#383a3f;--rule-soft:#2c2e32;--rule-strong:#6a6e74;
  --accent:#f4f5f6;--accent-ink:#17181a;--focus:#ffffff;
  --radius:12px;--radius-lg:20px;--radius-pill:999px;
  --font-display:AMSetas,Anybody,sans-serif;--font-body:AMSetas,Hanken,sans-serif;
}
body{min-width:0;background:var(--paper);color:var(--ink);font-family:var(--font-body)}
body{line-height:1.58;-webkit-font-smoothing:antialiased}
h1,h2{min-width:0;overflow-wrap:anywhere;font-family:var(--font-display);font-stretch:condensed;font-weight:760;letter-spacing:-.035em;line-height:1;text-wrap:balance}
.topbar{position:sticky;inset-block-start:0;border-bottom:1px solid var(--rule-soft);background:rgb(23 24 26 / .92);backdrop-filter:blur(14px)}
.monogram{font:800 1.35rem/1 var(--font-display);font-stretch:expanded;letter-spacing:-.04em}
.menu-toggle{font-size:.76rem;font-weight:750;text-transform:uppercase;letter-spacing:.1em}
.menu{background:var(--paper-2);border-bottom:1px solid var(--rule)}
.menu a{border-bottom:1px solid var(--rule-soft);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.menu a b,.menu a i{color:var(--muted);font-size:.65rem}
.menu a.active{background:var(--accent);color:var(--accent-ink)}
.menu a.active b,.menu a.active i{color:var(--accent-ink)}
@media (min-width:64rem){
  .menu{background:transparent;border-bottom:0}
  .menu a{border-bottom:0;border-radius:var(--radius-pill);font-size:.72rem;letter-spacing:.08em;color:var(--muted);transition:color .18s,background-color .18s}
  .menu a.active{color:var(--accent-ink)}
}
/* as setas usam o glifo proprio da AMSetas; font-variant-emoji fecha o caso em quem ignora a fonte */
*{font-variant-emoji:text}
.eyebrow,.section-no{color:var(--muted);font-size:.7rem;font-weight:760;text-transform:uppercase;letter-spacing:.13em}
.cover{position:relative;display:grid;min-height:calc(100svh - 72px);padding-block:clamp(2rem,6vw,6rem);gap:2rem;border-bottom:1px solid var(--rule-soft)}
/* luz fria e discreta atrás do retrato, no lugar do antigo bloco de cor */
.cover::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(60% 55% at 78% 34%,rgb(255 255 255 / .07),transparent 70%);pointer-events:none}
.cover>*{position:relative;z-index:1}
.cover-media{position:relative;order:-1;min-height:48svh;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2)}
.cover-media img{object-position:center 18%;filter:grayscale(1) contrast(1.06)}
.cover-grain{display:none}
.cover-copy{align-self:end;max-width:48rem}
.cover h1{margin-block:.8rem 1.2rem;font-size:clamp(4rem,17vw,8rem);text-transform:uppercase;background:linear-gradient(180deg,#ffffff 6%,#d5d6d9 40%,#9b9ea4 74%,#74777d 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
@supports not (background-clip:text){.cover h1{color:var(--ink);background:none}}
.cover h1 span{display:block}
.cover h1 span:last-child{font-stretch:expanded}
.cover .lead{max-width:34ch;color:var(--muted);font-size:clamp(1.05rem,3.3vw,1.5rem)}
.cover-actions{margin-block-start:2rem}
.button{border:1px solid var(--rule-strong);border-radius:var(--radius);background:var(--paper-2);color:var(--ink);font-size:.75rem;font-weight:750;text-transform:uppercase;letter-spacing:.06em;transition:background-color .18s,border-color .18s,color .18s,transform .18s}
.button.hot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}
.quiet{display:inline-flex;align-items:center;gap:.6rem;min-height:48px;padding-inline:.2rem;border-bottom:1px solid var(--rule-strong);font-size:.78rem;text-decoration:none;transition:border-color .18s,color .18s}
.cover-meta{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;align-self:end;padding-block-start:1rem;border-top:1px solid var(--rule-soft);color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.intro{display:grid;gap:2rem;padding-block:clamp(5rem,10vw,9rem);border-bottom:1px solid var(--rule-soft)}
.intro-body h2{font-size:clamp(2.2rem,6vw,4.2rem)}
.intro-body p{max-width:62ch;margin-block-start:1.2rem;color:var(--muted)}
.intro-portraits{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.72fr);align-items:end;gap:clamp(.75rem,2vw,1.5rem)}
.intro-portrait{aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2)}
.intro-portrait img{object-position:center 15%}
.intro-portrait-close{aspect-ratio:4/5;margin-block-end:-2rem}
.page-head,.case-head{padding-block:clamp(4rem,10vw,8rem);border-bottom:1px solid var(--rule-soft)}
.page-head h1,.case-head h1{margin-block:.8rem 1.4rem;font-size:clamp(3.4rem,13vw,6.8rem);text-transform:uppercase}
.page-head>p:last-child,.case-head .lead{max-width:62ch;color:var(--muted);font-size:1.05rem}
.actions{margin-block-start:2rem}
.project-list,.index-list{padding-block:clamp(2rem,5vw,5rem)}
.project-row{display:grid;gap:1.5rem;border-bottom:1px solid var(--rule-soft);padding-block-end:clamp(3rem,7vw,6rem)}
.project-image{position:relative;display:block;overflow:hidden;border-radius:var(--radius-lg);background:var(--paper-2)}
.project-image span,.photo-open>span,.kit-grid .photo-open span{position:absolute;inset:auto .7rem .7rem auto;padding:.55rem .7rem;border:1px solid var(--rule-strong);border-radius:var(--radius);background:rgb(23 24 26 / .82);color:var(--ink);font-size:.62rem;font-weight:760;text-transform:uppercase;letter-spacing:.06em;backdrop-filter:blur(8px)}
.project-copy{align-self:center}
.project-copy>p:first-child{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em}
.project-copy h2{margin-block:1rem;font-size:clamp(2.2rem,5.6vw,4.4rem)}
.project-copy h2 a{display:inline-block;padding-block:.3rem;text-decoration:none}
.project-copy>p:not(:first-child){max-width:54ch;color:var(--muted)}
.project-copy .button{margin-block-start:1.5rem}
.index-row{display:grid;border-bottom:1px solid var(--rule-soft)}
.index-open{display:grid;grid-template-columns:2rem 3rem minmax(0,1fr) auto;gap:1rem;align-items:center;min-height:92px;padding-block:1rem;text-decoration:none}
.index-open b,.index-open em{color:var(--muted);font-size:.65rem;font-style:normal;text-transform:uppercase}
.index-open img{width:3rem;height:3rem;object-fit:contain;border-radius:var(--radius);background:var(--ink);padding:.25rem}
.index-name{display:grid;gap:.25rem;font:750 clamp(1.1rem,4vw,1.65rem)/1.1 var(--font-display);font-stretch:semi-condensed}
.index-name i{color:var(--muted);font:600 .7rem/1.35 var(--font-body);font-style:normal;text-transform:uppercase;letter-spacing:.05em}
.index-profile{display:flex;align-items:center;min-height:44px;padding-block-end:1rem;color:var(--muted);font-size:.68rem;text-decoration:none;text-transform:uppercase}
.index-profile.ghost{display:none}
.back{display:inline-flex;align-items:center;min-height:44px;margin-block-end:2rem;color:var(--muted);font-size:.72rem;text-transform:uppercase}
.case-role{display:inline-block;margin-block:1rem;padding:.4rem .75rem;border:1px solid var(--rule-strong);border-radius:var(--radius-pill);background:var(--paper-2);font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.case-nav{display:flex;gap:.5rem;overflow:auto;position:sticky;inset-block-start:72px;z-index:3;padding-block:.75rem;border-block:1px solid var(--rule-soft);background:rgb(23 24 26 / .92);backdrop-filter:blur(14px);scrollbar-width:none}
.case-nav button{flex:0 0 auto;padding:.5rem .9rem;border:1px solid var(--rule-strong);border-radius:var(--radius-pill);background:var(--paper-2);color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;transition:color .18s,border-color .18s}
.case-cover{display:flex;justify-content:center;padding-block:clamp(2rem,6vw,5rem);border-bottom:1px solid var(--rule-soft)}
.case-cover picture{width:min(100%,680px);overflow:hidden;border-radius:var(--radius-lg)}
.case-cover img{aspect-ratio:auto;border-radius:var(--radius-lg)}
.case-facts{display:grid;gap:2rem;padding-block:clamp(4rem,8vw,7rem);border-bottom:1px solid var(--rule-soft)}
.case-facts h2,.media-block h2,.reels-block h2{font-size:clamp(2.6rem,8vw,5rem)}
.case-facts ul{margin:0;padding:0;list-style:none}
.case-facts li{padding-block:1rem;border-bottom:1px solid var(--rule-soft)}
.note,.numbers,.media-block,.reels-block{padding-block:clamp(3.5rem,7vw,6rem);border-bottom:1px solid var(--rule-soft)}
.note small{color:var(--muted);font-size:.68rem;text-transform:uppercase}
.note p,.block-lead{max-width:62ch;margin-block-start:1rem;color:var(--muted)}
/* faixa de números: um cartão só, dividido por fios, como na referência */
.numbers>div{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));gap:1px;margin-block-start:1.5rem;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--rule)}
.numbers>div>div{padding:clamp(1.5rem,4vw,2.25rem);background:var(--paper-2);text-align:center}
.numbers strong{display:block;margin-block-end:.4rem;font:800 clamp(2.3rem,8vw,4rem)/1 var(--font-display);font-stretch:condensed;color:var(--ink)}
.numbers small{color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em}
.video-grid,.reels,.kit-grid,.ba{display:grid;gap:1rem;margin-block-start:2rem}
.video-grid video{width:100%;aspect-ratio:16/9;border-radius:var(--radius-lg);background:#000}
.video-grid figcaption,.kit-grid figcaption,.ba figcaption{padding-block:.6rem;color:var(--muted);font-size:.72rem;text-transform:uppercase}
.reel{display:grid;grid-template-columns:2rem 1fr auto;gap:1rem;align-items:center;min-height:58px;padding-block:1rem;border-bottom:1px solid var(--rule-soft);text-decoration:none}
.reel b,.reel i{color:var(--muted);font-style:normal}
.kit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.kit-grid.one{grid-template-columns:minmax(0,28rem)}
.kit-grid .photo-open{position:relative}
.kit-grid img{width:100%;aspect-ratio:1/1.414;object-fit:cover;object-position:top;border-radius:var(--radius-lg)}
.ba img{width:100%;aspect-ratio:1;object-fit:contain;border-radius:var(--radius-lg);background:var(--ink)}
.case-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-block:1rem}
.case-gallery figure{margin:0;min-width:0}
.case-gallery img{aspect-ratio:4/5;border-radius:var(--radius-lg);background:var(--paper-2)}
.visual-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.75rem,2vw,1.25rem);margin-block-start:2rem}
.visual-card{display:grid;align-content:start;min-width:0;overflow:hidden;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-2);text-decoration:none;transition:border-color .25s ease-out,transform .25s ease-out}
.visual-card img{width:100%;height:auto;background:var(--paper-3)}
.visual-card>span{display:grid;gap:.2rem;padding:1rem}
.visual-card b{font:750 clamp(1rem,3vw,1.25rem)/1.15 var(--font-display);font-stretch:semi-condensed}
.visual-card small{color:var(--muted);font-size:.68rem;text-transform:uppercase;letter-spacing:.07em}
.editorial-kit{gap:0;padding:2rem .35rem 3rem}
.editorial-kit figure{position:relative;z-index:calc(20 - var(--page));margin:0 -.2rem -1.5rem;transform:rotate(-1.2deg);transition:transform .25s ease-out}
.editorial-kit figure:nth-child(even){transform:translateY(.7rem) rotate(1.2deg)}
.editorial-kit figure:focus-within{z-index:30;transform:translateY(-.35rem) rotate(0)}
.editorial-kit .photo-open{border-radius:var(--radius-lg)}
.editorial-kit .photo-open:focus-visible{outline-offset:5px}
.case-end{padding-block:2rem 6rem}
.photo-lead{padding-block:0 2rem}
.photo-lead img{aspect-ratio:16/10;object-position:center 35%;border-radius:var(--radius-lg)}
.photo-lead figcaption,.photo-wall figcaption{padding-block-start:.55rem;color:var(--muted);font-size:.7rem;text-transform:uppercase}
.photo-wall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding-block-end:6rem}
.photo-wall figure{margin:0;min-width:0}
.photo-wall img{aspect-ratio:4/5;border-radius:var(--radius-lg)}
.photo-open{position:relative}
.film{display:grid;gap:2.5rem;padding-block:clamp(4rem,8vw,7rem);border-bottom:1px solid var(--rule-soft)}
.film h1{margin-block:.8rem 1.5rem;font-size:clamp(2.6rem,5.8vw,4.6rem)}
.film-copy>p:not(.eyebrow){max-width:55ch;color:var(--muted)}
.film-copy .button{margin-block-start:1.5rem}
.film-frame{padding:.6rem;border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--paper-2)}
.film-frame iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:calc(var(--radius-lg) - .6rem)}
.film-notes{display:grid;align-items:start;gap:2rem;padding-block:clamp(4rem,8vw,7rem);border-bottom:1px solid var(--rule-soft)}
.film-notes h2{font-size:clamp(2.4rem,8vw,5rem)}
.film-notes>p:last-child{max-width:55ch;color:var(--muted)}
.timeline{margin:0;padding-block:0 6rem;list-style:none}
.timeline li{display:grid;gap:.45rem;padding-block:1.5rem;border-bottom:1px solid var(--rule-soft)}
.timeline b{color:var(--muted);font-size:.68rem;text-transform:uppercase}
.timeline h2{font-size:clamp(1.7rem,5vw,2.8rem)}
.timeline p{max-width:60ch;color:var(--muted)}
.contact{display:flex;min-height:75svh;flex-direction:column;justify-content:center;padding-block:clamp(5rem,12vw,10rem)}
.contact h1{margin-block:.8rem 2rem;font-size:clamp(3.6rem,13vw,8rem)}
.contact h1 span{color:var(--silver)}
.contact>p:last-child{margin-block-start:3rem;color:var(--muted)}
.footer{border-top:1px solid var(--rule-soft);color:var(--muted);font-size:.68rem;text-transform:uppercase}
@media (hover:hover) and (pointer:fine){
  .button:hover{transform:translateY(-1px);border-color:var(--ink);background:var(--paper-3)}
  .button.hot:hover{background:var(--silver);color:var(--accent-ink)}
  .menu a:hover{color:var(--ink)}
  .index-open:hover em{color:var(--ink)}
  .quiet:hover{border-color:var(--ink)}
  .case-nav button:hover{border-color:var(--ink);color:var(--ink)}
  .project-image:hover img,.photo-open:hover img{transform:scale(1.015)}
  .project-image img,.photo-open img{transition:transform .35s ease-out}
  .visual-card:hover{border-color:var(--rule-strong);transform:translateY(-2px)}
  .editorial-kit figure:hover{z-index:30;transform:translateY(-.35rem) rotate(0)}
}
@media (min-width:40rem){.kit-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.ba,.video-grid,.reels{grid-template-columns:repeat(2,minmax(0,1fr))}.visual-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.timeline li{grid-template-columns:.5fr 1fr 1.3fr;gap:2rem}.photo-wall{grid-template-columns:repeat(3,minmax(0,1fr))}.case-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:68rem){.cover{grid-template-columns:minmax(0,1.05fr) minmax(28rem,.95fr);grid-template-rows:1fr auto;gap:clamp(2rem,5vw,6rem)}.cover-media{order:0;grid-column:2;grid-row:1/-1;min-height:0}.cover-copy{grid-column:1;grid-row:1;align-self:center}.cover-meta{grid-column:1;grid-row:2}.cover h1{font-size:clamp(5rem,9vw,8rem)}.intro{grid-template-columns:minmax(7rem,.26fr) minmax(22rem,.88fr) minmax(29rem,1.05fr);align-items:start;gap:clamp(1.5rem,3vw,4rem)}.intro-portraits{min-width:29rem}.intro-portrait-close{margin-inline-start:-2rem}.project-row{grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr);gap:clamp(3rem,6vw,7rem)}.index-row{grid-template-columns:minmax(0,1fr) 9rem;align-items:center}.index-profile{justify-content:flex-end;padding-block:0}.case-facts,.film-notes{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:5rem}.film{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center}.case-gallery{padding-inline:clamp(1rem,4vw,4.5rem)}.page-head h1,.case-head h1{font-size:clamp(5rem,9vw,8rem)}}
@media (prefers-reduced-transparency:reduce){.topbar,.case-nav{backdrop-filter:none;background:var(--paper)}.project-image span,.photo-open>span,.kit-grid .photo-open span{backdrop-filter:none;background:var(--paper)}}

/* ——— 30/08/2026 · revisão de conteúdo do cliente ———
 * vidro: uma receita só (véu de 4% + desfoque + fio superior de luz), aplicada apenas
 * ao que já flutua sobre outra camada. Nada ganha vidro por enfeite.
 * ferramentas: bloco novo no currículo, no mesmo ledger de fios do resto da página.
 */
:root{--glass:rgb(255 255 255 / .045);--glass-edge:rgb(255 255 255 / .14)}
.glass,.note,.case-role,.numbers>div,.project-image span,.photo-open>span,.kit-grid .photo-open span,.cover-badge{
  background-image:linear-gradient(180deg,var(--glass-edge),transparent 1px),linear-gradient(180deg,var(--glass),transparent);
}
.note{border:1px solid var(--rule);border-radius:var(--radius-lg);background-color:var(--paper-2);backdrop-filter:blur(10px)}
.note{padding:clamp(1.25rem,4vw,2rem)}
.project-image span,.photo-open>span,.kit-grid .photo-open span{backdrop-filter:blur(10px) saturate(.9)}

/* balão flutuante da capa: carrega o estado real, não decoração */
.cover-badge{position:absolute;z-index:2;inset-block-end:1rem;inset-inline-end:1rem;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem .9rem;border:1px solid var(--glass-edge);border-radius:var(--radius-pill);background-color:rgb(23 24 26 / .62);backdrop-filter:blur(12px);color:var(--ink);font-size:.64rem;font-weight:760;text-transform:uppercase;letter-spacing:.1em}
.cover-badge::before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--ink)}

/* monograma no lugar do logo, para o cliente que não tem marca fechada */
.index-mark{display:grid;place-items:center;width:3rem;height:3rem;border:1px solid var(--rule-strong);border-radius:var(--radius);font:800 .8rem/1 var(--font-display);letter-spacing:.02em;color:var(--muted)}

/* ferramentas: as marcas em um cartão só, dividido por fios, como a faixa de números.
 * Desenho monocromático em currentColor — prata em repouso, branco no toque.
 * A entrada é a mesma da página: cada marca sobe e ganha nitidez, uma depois da outra.
 */
.tools,.skills{padding-block:clamp(3.5rem,7vw,6rem);border-top:1px solid var(--rule-soft)}
.tools h2{margin-block:.6rem 0;font-size:clamp(2.2rem,7vw,4rem)}
.tool-wall{display:flex;flex-wrap:wrap;gap:.5rem;margin:2rem 0 0;padding:0;list-style:none}
.tool-wall li{--tile:var(--paper-2);flex:0 0 calc((100% - 1.5rem) / 4);display:grid;place-items:center;aspect-ratio:1;max-height:7.5rem;padding:1rem;border:1px solid var(--rule);border-radius:var(--radius-lg);background-color:var(--tile);transition:background-color .25s ease-out,border-color .25s ease-out,transform .25s cubic-bezier(.2,.7,.3,1)}
.tool-wall li.wide{flex-basis:calc((100% - 1.5rem) / 2 + .5rem)}
.tool-wall svg{width:auto;height:clamp(1.75rem,5.5vw,2.4rem);max-width:100%;color:var(--silver);opacity:0;transform:translateY(.6rem) scale(.94);transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.3,1),color .25s ease-out;transition-delay:calc(var(--i) * 70ms)}
.tools.shown .tool-wall svg{opacity:1;transform:none}

/* competências: fio e tipografia, sem pílula */
.skills h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skills ul{display:grid;gap:0 clamp(1.5rem,4vw,4rem);margin:1.5rem 0 0;padding:0;list-style:none}
.skills li{padding-block:1.1rem;border-bottom:1px solid var(--rule-soft);font:750 clamp(1.05rem,3.4vw,1.4rem)/1.2 var(--font-display);font-stretch:semi-condensed;color:var(--ink)}
@media (min-width:40rem){.skills ul{grid-template-columns:repeat(2,minmax(0,1fr))}.tool-wall{gap:.75rem}.tool-wall li{flex:0 0 calc((100% - 5.25rem) / 8)}.tool-wall li.wide{flex-basis:calc((100% - 5.25rem) / 4 + .75rem)}}
@media (min-width:68rem){.skills ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (hover:hover) and (pointer:fine){
  .tool-wall li:hover{--tile:var(--paper-3);border-color:var(--rule-strong);transform:translateY(-2px)}
  .tool-wall li:hover svg{color:var(--ink)}
}
@media (prefers-reduced-motion:reduce){.tool-wall svg{opacity:1;transform:none;transition-delay:0s}}
@media (prefers-reduced-transparency:reduce){.note,.cover-badge{backdrop-filter:none;background-color:var(--paper-2);background-image:none}}

/* ═══ Liquid glass · 30/08/2026 · camada isolada, remover em bloco para reverter ═══
 * O fundo do site é chapado, então o desfoque sozinho não aparece: o vidro aqui se lê
 * pelas bordas — luz especular na aresta de cima, sombra interna na de baixo, e um
 * brilho que atravessa a peça no toque. Raios ficam como estavam (botão 12, cartão 20,
 * pílula 999): a mudança é de material, não de forma.
 */
:root{
  --lg-face:linear-gradient(180deg,rgb(255 255 255 / .11),rgb(255 255 255 / .035) 55%,rgb(255 255 255 / .06));
  --lg-edge:rgb(255 255 255 / .16);
  --lg-lip:inset 0 1px 0 rgb(255 255 255 / .3),inset 0 -1px 0 rgb(0 0 0 / .4);
  --lg-cast:0 2px 8px rgb(0 0 0 / .22);
  --lg-cast-float:0 10px 34px rgb(0 0 0 / .46);
  --lg-ease:cubic-bezier(.2,.7,.3,1);
}
.button,.case-nav button,.case-role,.cover-badge,.tool-wall li,.note,.numbers>div,
.project-image span,.photo-open>span,.kit-grid .photo-open span{
  position:relative;isolation:isolate;
  border-color:var(--lg-edge);
  background-color:rgb(255 255 255 / .02);
  background-image:var(--lg-face);
  box-shadow:var(--lg-lip),var(--lg-cast);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
}
/* o brilho que corre pela peça: transform e opacity só */
.button::after,.case-nav button::after,.tool-wall li::after{
  content:"";position:absolute;z-index:-1;inset:0;border-radius:inherit;
  background:linear-gradient(105deg,transparent 32%,rgb(255 255 255 / .16) 48%,transparent 64%);
  opacity:0;transform:translateX(-28%);
  transition:opacity .32s var(--lg-ease),transform .55s var(--lg-ease);
}
.button,.case-nav button,.tool-wall li{transition:background-color .28s var(--lg-ease),border-color .28s var(--lg-ease),box-shadow .28s var(--lg-ease),transform .28s var(--lg-ease),color .28s var(--lg-ease)}
/* ação principal: continua branca sólida, com o mesmo lábio de luz e uma sombra que a descola */
.button.hot{background-color:var(--accent);border-color:rgb(255 255 255 / .7);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),inset 0 -1px 0 rgb(0 0 0 / .12),0 3px 12px rgb(0 0 0 / .3)}
.menu a.active{background-color:var(--accent);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 4px 14px rgb(0 0 0 / .35)}
@media (hover:hover) and (pointer:fine){
  .button:hover,.case-nav button:hover{transform:translateY(-1px);border-color:rgb(255 255 255 / .34);background-color:rgb(255 255 255 / .07);box-shadow:var(--lg-lip),0 6px 18px rgb(0 0 0 / .34)}
  .button:hover::after,.case-nav button:hover::after,.tool-wall li:hover::after{opacity:1;transform:translateX(28%)}
  .button.hot:hover{background-color:var(--ink);box-shadow:inset 0 1px 0 rgb(255 255 255 / .9),0 8px 22px rgb(0 0 0 / .4)}
  .tool-wall li:hover{border-color:rgb(255 255 255 / .3);box-shadow:var(--lg-lip),0 6px 18px rgb(0 0 0 / .34)}
}
.button:active,.case-nav button:active,.tool-wall li:active{transform:translateY(1px) scale(.988);box-shadow:inset 0 1px 2px rgb(0 0 0 / .5)}
.button.hot:active{background-color:var(--silver)}
@media (prefers-reduced-motion:reduce){
  .button::after,.case-nav button::after,.tool-wall li::after{display:none}
}
@media (prefers-reduced-transparency:reduce){
  .button,.case-nav button,.case-role,.cover-badge,.tool-wall li,.note,.numbers>div,
  .project-image span,.photo-open>span,.kit-grid .photo-open span{
    backdrop-filter:none;-webkit-backdrop-filter:none;background-image:none;background-color:var(--paper-2);box-shadow:none;border-color:var(--rule-strong)}
  .button.hot{background-image:none;background-color:var(--accent)}
}

/* ─── A camada que flutua ───────────────────────────────────────────────────
 * Aqui existe conteúdo atrás, então o desfoque faz trabalho de verdade e a peça
 * ganha sombra projetada. O conteúdo em si — linhas, retratos, galeria, reels —
 * continua sem vidro: vidro é a camada de controle, não a de leitura.
 */
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .topbar{background:linear-gradient(180deg,rgb(23 24 26 / .74),rgb(23 24 26 / .62));backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%);border-bottom-color:transparent;box-shadow:inset 0 -1px 0 rgb(255 255 255 / .08);transition:background-color .3s var(--lg-ease),box-shadow .3s var(--lg-ease)}
  body.scrolled .topbar{background:linear-gradient(180deg,rgb(23 24 26 / .9),rgb(23 24 26 / .8));box-shadow:inset 0 -1px 0 rgb(255 255 255 / .14),0 10px 30px rgb(0 0 0 / .34)}
  .case-nav{background:linear-gradient(180deg,rgb(23 24 26 / .86),rgb(23 24 26 / .76));backdrop-filter:blur(22px) saturate(180%);-webkit-backdrop-filter:blur(22px) saturate(180%);border-block-color:transparent;box-shadow:inset 0 1px 0 rgb(255 255 255 / .07),inset 0 -1px 0 rgb(255 255 255 / .07)}
  .menu.open{background:linear-gradient(180deg,rgb(31 33 36 / .97),rgb(23 24 26 / .98));backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border-bottom:0;box-shadow:inset 0 1px 0 rgb(255 255 255 / .12),var(--lg-cast-float)}
  .photo-dialog{background:linear-gradient(180deg,rgb(31 33 36 / .94),rgb(23 24 26 / .97));backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--lg-edge);border-radius:var(--radius-lg);box-shadow:inset 0 1px 0 rgb(255 255 255 / .22),var(--lg-cast-float)}
  .photo-dialog::backdrop{background:rgb(9 10 11 / .74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(10px)}
  .project-image span,.photo-open>span,.kit-grid .photo-open span,.cover-badge{box-shadow:var(--lg-lip),var(--lg-cast-float)}
}
/* o controle que abre o índice deixa de ser texto solto e vira peça */
.menu-toggle,.photo-close,.skip-link{border:1px solid var(--lg-edge);border-radius:var(--radius-pill);background-color:rgb(255 255 255 / .02);background-image:var(--lg-face);box-shadow:var(--lg-lip),var(--lg-cast);backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);transition:background-color .28s var(--lg-ease),border-color .28s var(--lg-ease),transform .28s var(--lg-ease)}
.menu-toggle{padding-inline:1rem}
.photo-close{padding:.5rem .9rem;min-height:44px}
.skip-link{border-radius:var(--radius)}
@media (hover:hover) and (pointer:fine){
  .menu-toggle:hover,.photo-close:hover{background-color:rgb(255 255 255 / .08);border-color:rgb(255 255 255 / .34);transform:translateY(-1px)}
}
.menu-toggle:active,.photo-close:active{transform:translateY(1px) scale(.988)}
/* o quadro do documentário emoldura mídia: ganha o mesmo aro */
.film-frame{border-color:var(--lg-edge);background-image:var(--lg-face);box-shadow:var(--lg-lip),var(--lg-cast)}
/* superfícies que o navegador desenha e que também são do projeto */
:root{color-scheme:dark;scrollbar-color:var(--rule-strong) var(--paper);scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{border:2px solid var(--paper);border-radius:var(--radius-pill);background:var(--rule-strong)}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
@media (prefers-reduced-transparency:reduce){
  .topbar,body.scrolled .topbar,.case-nav,.menu.open,.photo-dialog{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--paper-2)}
  .photo-dialog::backdrop{backdrop-filter:none}
  .menu-toggle,.photo-close,.skip-link,.film-frame{backdrop-filter:none;-webkit-backdrop-filter:none;background-image:none;background-color:var(--paper-2);box-shadow:none}
}