@font-face{font-family:"NewBlack";font-weight:200;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-UltraLight.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:300;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-Light.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:400;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-Regular.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:500;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-Medium.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:600;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-SemiBold.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:700;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-Bold.woff2") format("woff2")}
@font-face{font-family:"NewBlack";font-weight:800;font-style:normal;font-display:swap;
  src:url("../fonts/NewBlackTypeface-ExtraBold.woff2") format("woff2")}

:root{
  --papel:#f2f2f0;
  --branco:#ffffff;
  --tinta:#121212;
  --suave:#8c8c8c;

  /* Tratamento da foto em cada seção. Mexa nos números para calibrar:
     brightness menor = mais escuro | sepia maior = mais amarronzado */
  --foto-home:    grayscale(1);
  --foto-about:   grayscale(1) brightness(.60) contrast(1.05);
  --foto-contact: grayscale(1) sepia(.55) brightness(.55) contrast(1.02);

  /* ---------------------------------------------------------------
     TIPOGRAFIA — mexa só nestes números para mudar tamanhos
     --------------------------------------------------------------- */
  --t-nome:        158px;  /* VIANA, na capa */
  --t-cargo:        30px;  /* art director, ao lado do nome */
  --t-menu:         15px;  /* itens do menu */
  --t-sobre:      12.5px;  /* texto da tela about */

  --t-legenda:      11px;  /* título e cliente no rollover da grade */
  --legenda-larg:   95px;  /* largura da legenda antes de quebrar linha */

  --t-gal-titulo:   15px;  /* título dentro da galeria aberta */
  --t-gal-cliente:  12px;  /* cliente dentro da galeria aberta */
  --t-gal-texto:     9px;  /* descrição do job */

  --t-logo:         42px;  /* VIANA pequeno no rodapé */
  --t-logo-cargo:    9px;  /* art director no rodapé */
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--branco);
  color:var(--tinta);
  font-family:"NewBlack",Avenir,"Century Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.palco-area{display:flex;justify-content:center}
.palco-escala{transform-origin:top center}

.tela{position:relative;width:1140px;height:768px;overflow:hidden;background:var(--branco)}
.tela[hidden]{display:none}

.menu{position:absolute;left:21px;top:44px;font-size:var(--t-menu);font-weight:300;line-height:1.85;z-index:10}
.capa .menu{left:107px;top:522px}
#tela-about .menu,#tela-contact .menu{left:12px;top:522px;width:171px;text-align:right}
.menu a{display:block;color:var(--tinta);text-decoration:none}
.menu a.on{font-weight:500;text-decoration:underline;text-underline-offset:3px}
.menu a:hover{text-decoration:underline;text-underline-offset:3px}
.menu a:focus-visible{outline:1px solid var(--tinta);outline-offset:3px}

.traco-v{position:absolute;left:958px;top:0;width:1px;height:97px;background:var(--tinta)}
.traco-h{position:absolute;left:1044px;top:755px;width:100px;height:2px;background:var(--tinta)}

.lockup{position:absolute;left:280px;top:62px;display:flex;align-items:flex-start;gap:14px}
.wordmark{font-size:var(--t-nome);font-weight:200;letter-spacing:.055em;line-height:.98}
.role{margin-top:6px;font-size:var(--t-cargo);font-weight:300;line-height:1.25}
.role span{display:block}
.role span.u{text-decoration:underline;text-underline-offset:4px}

.retrato{position:absolute;left:285px;top:240px;width:855px;height:455px;background:#d7d7d5;overflow:hidden}
.retrato img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-home)}
#tela-about .retrato img{filter:var(--foto-about)}
#tela-contact .retrato img{filter:var(--foto-contact)}

.logo{position:absolute;left:40px;top:672px;display:flex;align-items:flex-end;gap:5px;color:var(--suave);z-index:10}
.logo .n{font-size:var(--t-logo);font-weight:200;letter-spacing:.055em;line-height:1.15}
.logo .r{font-size:var(--t-logo-cargo);font-weight:700;line-height:1.25;margin-bottom:4px}
.logo .r i{display:block;font-style:normal}
.logo .r i.u{text-decoration:underline;text-underline-offset:2px}

.sobre-texto{
  position:absolute;left:380px;top:302px;width:178px;z-index:5;
  font-size:var(--t-sobre);font-weight:300;line-height:1.5;color:#dededa;
}
.sobre-texto .forte{color:#fff;font-weight:500;text-decoration:none;border-bottom:1px solid currentColor}
.sobre-texto .forte:hover{opacity:.75}

.icones{position:absolute;left:351px;top:445px;display:flex;gap:49px;z-index:5}
.icones a{display:block;width:44px;height:44px;transition:opacity .18s ease}
.icones a:hover{opacity:.7}
.icones img{width:100%;height:100%;object-fit:contain;display:block}
.icones a:focus-visible{outline:2px solid #fff;outline-offset:4px}

.texto-corrido{position:absolute;left:300px;top:150px;width:560px;font-size:15px;font-weight:300;line-height:1.7}
.texto-corrido a{color:var(--tinta)}

.grade{position:absolute;inset:0;pointer-events:none}
.card{position:absolute;width:184px;height:189px;padding:0;border:0;background:#ededeb;
  cursor:pointer;overflow:visible;display:block;pointer-events:auto}
.card img,.card video{display:block;width:184px;height:189px;object-fit:cover}
.card video.previa{position:absolute;left:0;top:0;opacity:0;transition:opacity .25s ease}
.card.tocando video.previa{opacity:1}
.card .selo-video{display:none}
.card .cap{
  position:absolute;width:var(--legenda-larg);text-align:left;line-height:1.3;
  opacity:0;transition:opacity .18s ease;pointer-events:none;
}
.card .cap b{display:block;font-size:var(--t-legenda);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.card .cap i{display:block;font-style:normal;font-size:var(--t-legenda);font-weight:300;color:var(--tinta)}
.card:hover .cap,.card:focus-visible .cap{opacity:1}
.card:focus-visible{outline:1px solid var(--tinta);outline-offset:4px}

.lightbox{position:absolute;inset:0;background:rgba(255,255,255,.72);z-index:20}
.lightbox[hidden]{display:none}

/* Moldura e conteúdo com as coordenadas do Figma: moldura em 95,15, 1025 x 725, borda 7 */
.moldura{position:absolute;left:95px;top:15px;width:1025px;height:725px;background:var(--branco);
  border:7px solid #111;padding:0}
.palco-arte{position:absolute;left:17px;top:15px;width:977px;height:553px;
  background:#ececeb;display:flex;align-items:center;justify-content:center;overflow:hidden}
.palco-arte img,.palco-arte video{max-width:100%;max-height:100%;display:block}

.info{position:absolute;left:81px;top:584px;width:300px}
.info h2{margin:0;font-size:var(--t-gal-titulo);font-weight:700;line-height:21px;
  text-decoration:underline;text-underline-offset:3px}
.info .cliente{margin:0;font-size:var(--t-gal-cliente);font-weight:400;line-height:21px}
.info .descricao{margin:7px 0 0;width:285px;font-size:var(--t-gal-texto);font-weight:300;
  line-height:1.6;color:#3d3d3d;white-space:pre-line}

.miniaturas{position:absolute;left:501px;top:584px;display:flex;gap:10px;align-items:flex-start}
.miniaturas button{width:82px;height:76px;padding:0;border:1px solid #e4e4e2;background:#efefed;
  cursor:pointer;overflow:hidden}
.miniaturas img{width:100%;height:100%;object-fit:cover;display:block}
.miniaturas button[aria-current="true"]{border-color:var(--tinta)}
.miniaturas button.e-video{position:relative;background:#2a2a2a}
.miniaturas button.e-video::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:0;height:0;border-style:solid;
  border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 0 3px rgba(0,0,0,.6))}

/* o X monta sobre o canto inferior direito, meio para fora da moldura */
.fechar{position:absolute;left:981px;top:681px;width:44px;height:44px;background:var(--branco);
  border:4px solid #111;font-size:18px;font-weight:300;line-height:1;cursor:pointer;
  font-family:inherit;padding:0}
.fechar:focus-visible,.miniaturas button:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}


.soon{position:absolute;left:300px;top:330px;font-size:15px;font-weight:300;color:var(--suave)}

@media (max-width:820px){
  .palco-escala{transform:none!important;height:auto!important;width:100%}
  .tela{width:auto;height:auto;min-height:0;padding:28px 18px 46px;display:flex;flex-direction:column;overflow:visible}
  .menu{position:static!important;display:flex;flex-wrap:wrap;gap:16px;margin:0 0 28px;order:1}
  .traco-v,.traco-h{display:none}
  .lockup{position:static!important;gap:8px;margin-bottom:20px;order:0}
  .wordmark{font-size:54px}
  .role{margin-top:2px;font-size:15px}
  .retrato{position:static!important;width:100%!important;height:300px!important;order:2}
  .texto-corrido{position:static!important;width:auto;order:2}
  .icones{position:static!important;order:3;margin-top:26px;gap:26px}
  .icones a{width:40px;height:40px}
  .icones img{filter:invert(1)}
  .sobre-texto{position:static!important;width:auto;order:3;margin-top:22px;color:var(--tinta);font-size:15px;line-height:1.6}
  .sobre-texto .forte{color:var(--tinta)}
  .grade{position:static;order:2;display:flex;flex-direction:column;gap:26px}
  .card{position:static!important;width:100%!important;height:auto!important}
  .card img,.card video{width:100%;height:auto;aspect-ratio:184/189}
  .card .cap{position:static!important;opacity:1;width:auto;margin-top:7px;left:auto!important;top:auto!important}
  .card .selo-video{display:block;position:absolute;right:10px;top:10px;width:0;height:0;
    border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent #fff;
    filter:drop-shadow(0 0 2px rgba(0,0,0,.5))}
  .card{position:relative!important}
  .logo{position:static!important;margin-top:36px;order:3}
  .lightbox{position:fixed}
  .moldura{position:fixed;left:8px;right:8px;top:8px;bottom:8px;width:auto;height:auto;padding:14px;overflow:auto}
  .palco-arte{position:static!important;width:100%;height:46vh}
  .info,.miniaturas{position:static!important;width:auto!important}
  .info .descricao{width:auto}
  .fechar{position:sticky!important;left:auto!important;top:auto!important;float:right}
  .rodape{flex-direction:column;gap:18px}
  .info{width:auto}
  .miniaturas{margin-left:0;max-width:none}
  .fechar{position:sticky;float:right;right:0;bottom:0}
}