/* Portfólio de estampas · BOUT / dnn. DoninDesign */

@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Anton;src:url(../fonts/anton-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Plex;src:url(../fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --fundo:#202020;
  --fundo-2:#2a2a2a;
  --osso:#f1ebdf;
  --texto:#ece8e1;
  --apagado:#77736d;
  --linha:rgba(241,235,223,.14);
  --vermelho:#e3262a;
  --borda:16px;
  --topo:64px;
}
@media (min-width:900px){:root{--borda:28px}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--fundo);color:var(--texto);
  font:500 13px/1.5 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr{position:absolute;left:0;top:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:1px solid var(--osso);outline-offset:3px}
sup{font:400 9px Plex,monospace;vertical-align:top;margin-left:2px;color:var(--apagado)}

/* ---------- topo ---------- */
.topo{
  position:fixed;inset:0 0 auto 0;z-index:50;height:var(--topo);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--borda);
  background:linear-gradient(var(--fundo) 0%,rgba(32,32,32,.75) 60%,rgba(32,32,32,0));
  font-size:11px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
}
.topo-canto{display:flex;flex-direction:column;line-height:1.35}
.topo-logo{color:var(--osso);width:78px;justify-self:center}
.topo-logo svg{width:100%;height:auto;display:block}
.topo-logo.bout{width:66px}
.topo-nav{justify-self:end;display:flex;gap:18px;margin-right:64px}
.topo-nav a{opacity:.62;transition:opacity .2s}
.topo-nav a:hover,.topo-nav a[aria-current]{opacity:1}
.topo-lang{position:absolute;right:var(--borda);opacity:.62}

/* ---------- fixos de canto ---------- */
.fixo-siga{
  position:fixed;left:var(--borda);bottom:22px;z-index:40;
  display:flex;gap:10px;align-items:center;
  font-size:11px;font-weight:700;text-transform:uppercase;
}
.fixo-contato{
  position:fixed;right:var(--borda);bottom:18px;z-index:40;
  background:var(--osso);color:#111;padding:9px 14px 8px;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  transition:background .2s,color .2s;
}
.fixo-contato:hover{background:var(--vermelho);color:#fff}

/* ---------- início: índice sobre os quadros ---------- */
.vitrine{position:relative;padding-top:0}
.indice-trilho{
  position:sticky;top:0;z-index:5;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;
  display:flex;align-items:center;pointer-events:none;
  padding:var(--topo) var(--borda) 60px;
}
.indice{list-style:none;margin:0;padding:0;width:100%;pointer-events:auto}
.indice a{
  display:grid;grid-template-columns:44px minmax(0,4fr) minmax(0,1.6fr) minmax(0,.9fr) 48px;gap:16px;
  padding:3px 0 3px 14px;position:relative;
  font-size:12px;text-transform:uppercase;letter-spacing:.01em;
  color:var(--apagado);transition:color .25s;
}
.indice a > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.indice .i-n,.indice .i-ano{font-family:Plex,monospace;font-size:11px;padding-top:1px}
.indice .i-ano{text-align:right}
.indice a.ativo,.indice a:hover{color:#fff}
.indice a.ativo .i-titulo,.indice a.ativo .i-cliente{font-weight:700}
.indice a.ativo::before{content:"▸";position:absolute;left:0;top:3px;font-size:9px;color:#fff}

.quadros{padding:calc(50vh - 18vw) 0 22vh}
.quadro{
  display:block;position:relative;margin:0 auto 18vh;
  width:min(58vw,1040px);aspect-ratio:16/10;background:var(--fundo-2);overflow:hidden;
}
.quadro img{width:100%;height:100%;object-fit:cover;filter:brightness(.32) saturate(.85);transition:filter .5s,transform 1.2s cubic-bezier(.2,.7,.2,1);transform:scale(1.02)}
.quadro.visivel img{filter:brightness(.46) saturate(1);transform:scale(1)}
.quadro-legenda{display:none}

/* faixa "todos os trabalhos" */
.todos-gigante{
  display:block;position:relative;overflow:hidden;white-space:nowrap;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);
  padding:3vw 0 2.4vw;margin:0 0 120px;color:var(--osso);
}
.tg-linha{display:inline-flex;animation:corre 38s linear infinite}
.tg-linha span{font:400 clamp(56px,11vw,190px)/.9 Anton,Impact,sans-serif;text-transform:uppercase;letter-spacing:.005em;padding-right:.25em}
.todos-gigante:hover .tg-linha{animation-play-state:paused}
.todos-gigante:hover{color:var(--vermelho)}
@keyframes corre{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tg-linha{animation:none}}

/* ---------- páginas internas ---------- */
.pagina{padding:calc(var(--topo) + 64px) var(--borda) 120px;min-height:100vh}
.rotulo{
  font:700 11px/1 Inter,sans-serif;text-transform:uppercase;letter-spacing:.06em;
  margin:0 0 22px;padding-top:12px;border-top:1px solid var(--linha);color:var(--osso);
}

/* filtros */
.filtros{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:34px;font-size:11px;font-weight:700;text-transform:uppercase}
.filtros a{color:var(--apagado);padding-bottom:6px;border-bottom:1px solid transparent;transition:color .2s}
.filtros a:hover{color:var(--texto)}
.filtros a.ativo{color:var(--texto);border-bottom-color:var(--texto)}

/* grade de cards */
.grade{list-style:none;margin:0;padding:0;display:grid;gap:44px 18px;grid-template-columns:repeat(4,minmax(0,1fr))}
.card[hidden]{display:none}
.card a{display:block}
.card-img{display:block;aspect-ratio:16/10;background:var(--fundo-2);overflow:hidden;margin-bottom:12px}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s;filter:brightness(.92)}
.card a:hover .card-img img{transform:scale(1.04);filter:brightness(1)}
.card-titulo{display:block;font-size:13px;font-weight:700;line-height:1.3;margin-bottom:6px}
.card-meta{display:block;font-size:11px;color:var(--apagado)}

/* ---------- detalhe ---------- */
.heroi{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;background:#111}
.heroi-img{width:100%;height:100%;object-fit:cover}
.heroi::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.72))}
.heroi-texto{
  position:absolute;inset:auto 0 0 0;z-index:2;padding:0 var(--borda) 84px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;
}
.heroi-n,.heroi-ano{font:400 12px Plex,monospace;padding-bottom:12px}
.heroi-ano{justify-self:end}
.heroi-centro{text-align:center}
.heroi h1{
  font:400 clamp(40px,6.4vw,104px)/.92 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;color:#fff;
  text-wrap:balance;max-width:16ch;margin-inline:auto;
}
.heroi-centro p{margin:12px 0 0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--osso)}

.detalhe{
  display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:64px;
  padding:96px var(--borda) 40px;max-width:1440px;margin:0 auto;
}
.enredo p{font-size:15px;line-height:1.7;max-width:64ch;margin:0 0 18px;color:#d8d3cb;font-weight:400}
.enredo p.lead{font-size:clamp(17px,1.35vw,20px);line-height:1.45;color:var(--texto);font-weight:500;letter-spacing:-.005em}
.ficha dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px}
.ficha dt{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--apagado);padding-top:2px}
.ficha dd{margin:0;font-size:13px;line-height:1.45}

.galeria{padding:56px var(--borda) 40px;max-width:1440px;margin:0 auto}
.galeria-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.g-item{display:block;background:var(--fundo-2);cursor:zoom-in;grid-column:span 2;overflow:hidden}
.g-item.retrato{grid-column:span 1}
.g-item img{width:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.g-item:hover img{transform:scale(1.015)}
.g-item.retrato img{height:100%;object-fit:contain;background:#151515}

.ant-prox{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linha);border-bottom:1px solid var(--linha);margin:80px var(--borda) 0}
.ant-prox a{padding:26px 0;display:flex;flex-direction:column;gap:6px;transition:color .2s}
.ant-prox a + a{text-align:right;border-left:1px solid var(--linha)}
.ant-prox span{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--apagado)}
.ant-prox strong{font:400 clamp(22px,2.6vw,38px)/1 Anton,Impact,sans-serif;text-transform:uppercase;padding:0 22px}
.ant-prox a:hover{color:var(--vermelho)}
.relacionados{padding:80px var(--borda) 100px}

/* ---------- sobre ---------- */
.sobre-abre{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:64px;margin-bottom:110px}
.sobre-abre h1{font:400 clamp(48px,7.4vw,124px)/.9 Anton,Impact,sans-serif;text-transform:uppercase;margin:0;color:var(--osso)}
.sobre-abre h1 em{font-style:normal;color:var(--vermelho);display:block}
.sobre-texto p{font-size:15px;line-height:1.7;color:#d8d3cb;font-weight:400;margin:0 0 18px;max-width:58ch}
.sobre-texto p.lead{font-size:clamp(19px,1.7vw,24px);line-height:1.45;color:var(--texto);font-weight:500}
.sobre-colunas{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-bottom:110px}
.lista-linhas{list-style:none;margin:0;padding:0}
.lista-linhas li{padding:11px 0;border-bottom:1px solid var(--linha);font-size:14px}
.contato-grande{font:400 clamp(40px,6vw,96px)/.95 Anton,Impact,sans-serif;text-transform:uppercase;margin:0 0 24px;color:var(--osso)}
.contato-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:12px 32px;font-size:15px}
.contato-links a{border-bottom:1px solid var(--linha)}
.contato-links a:hover{border-color:var(--osso)}

.vazio{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px}
.vazio p{font:400 48px/1 Anton,sans-serif;text-transform:uppercase;margin:0}
.link-seta{font-size:12px;font-weight:700;text-transform:uppercase}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(16,16,16,.97);display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.lightbox-fechar{position:absolute;top:18px;right:var(--borda);font-size:11px;font-weight:700;text-transform:uppercase}
.lightbox-seta{position:absolute;top:50%;transform:translateY(-50%);font-size:44px;line-height:1;padding:12px;opacity:.6}
.lightbox-seta:hover{opacity:1}
.lightbox-seta.ant{left:8px}.lightbox-seta.prox{right:8px}
.lightbox-conta{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font:400 11px Plex,monospace;color:var(--apagado)}

/* ---------- responsivo ---------- */
@media (max-width:1100px){
  .grade{grid-template-columns:repeat(3,minmax(0,1fr))}
  .indice a{grid-template-columns:36px minmax(0,3fr) minmax(0,1.6fr) 44px}
  .indice .i-tipo{display:none}
}
@media (max-width:820px){
  :root{--topo:58px}
  .topo{grid-template-columns:auto 1fr;gap:12px}
  .topo-canto{display:none}
  .topo-logo{justify-self:start;width:64px}
  .topo-logo.bout{width:56px}
  .topo-nav{margin-right:0;gap:14px}
  .topo-lang{display:none}

  .indice-trilho{display:none}
  .quadros{padding:calc(var(--topo) + 24px) var(--borda) 60px}
  .quadro{width:100%;margin:0 0 40px;aspect-ratio:4/3}
  .quadro img,.quadro.visivel img{filter:brightness(.62);transform:none}
  .quadro-legenda{
    display:flex;flex-direction:column;gap:2px;position:absolute;left:14px;right:14px;bottom:12px;
    font-size:11px;text-transform:uppercase;color:var(--osso)
  }
  .quadro-legenda span:first-child{font-family:Plex,monospace}
  .quadro-legenda strong{font:400 26px/1 Anton,Impact,sans-serif;color:#fff}

  .grade{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 12px}
  .detalhe{grid-template-columns:1fr;gap:40px;padding-top:56px}
  .heroi{height:78svh;min-height:460px}
  .heroi-texto{grid-template-columns:1fr 1fr;padding-bottom:70px}
  .heroi-centro{grid-column:1/-1;grid-row:1}
  .heroi-n,.heroi-ano{grid-row:2;padding-bottom:0}
  .galeria-lista{grid-template-columns:1fr}
  .g-item,.g-item.retrato{grid-column:auto}
  .ant-prox strong{font-size:20px;padding:0 12px}
  .sobre-abre,.sobre-colunas{grid-template-columns:1fr;gap:40px;margin-bottom:72px}
  .lightbox{padding:48px 8px}
  .fixo-siga{display:none}
}
@media (max-width:420px){
  .grade{grid-template-columns:1fr}
}

/* capas em pé (pôsteres): imagem inteira sobre um fundo desfocado dela mesma */
.quadro .quadro-fundo,.quadro.visivel .quadro-fundo{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);max-width:none;object-fit:cover;filter:blur(36px) brightness(.35);transform:none}
.quadro.retrato img:not(.quadro-fundo){position:relative;object-fit:contain;padding:4% 0}
.heroi-fundo{display:none}
.heroi.retrato .heroi-fundo{display:block;position:absolute;inset:-60px;width:calc(100% + 120px);height:calc(100% + 120px);max-width:none;object-fit:cover;filter:blur(48px) brightness(.4)}
.heroi.retrato .heroi-img{position:relative;object-fit:contain;padding:calc(var(--topo) + 10px) 0 270px}