/* F/Still — prévia v4. Comum à landing, ao portfólio e às páginas de trabalho.
   Fonte da marca: Manifold CF (arquivos do estúdio). Logo limpo em branco e preto. */
@font-face{font-family:Manifold;src:url(marca/fontes/ManifoldCF-Regular-webfont.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Manifold;src:url(marca/fontes/ManifoldCF-DemiBold-webfont.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Manifold;src:url(marca/fontes/ManifoldCF-Bold-webfont.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Manifold;src:url(marca/fontes/ManifoldCF-ExtraBold-webfont.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --bg:#ededea; --surface:#e1e1dd; --ink:#111111; --muted:#4a4a45;
  --accent:#cf3134; --accent-strong:#b5272a; --accent-ink:#ffffff;
  --field-1:#0d0d0d; --field-1-ink:#ededea; --field-1-muted:#a9a9a3;
  --step-small:clamp(0.875rem,0.84rem + 0.12vw,0.9375rem);
  --step-body:clamp(1.0625rem,1rem + 0.3vw,1.25rem);
  --step-lead:clamp(1.5rem,1.15rem + 1.2vw,2.375rem);
  --step-head:clamp(3.5rem,1.5rem + 7vw,9.5rem);
  /* margem lateral: em tela grande cresce até o conteúdo ficar em 1480px (fundos continuam de ponta a ponta) */
  --m:max(clamp(16px,2vw,32px),calc((100vw - 1480px) / 2)); --gap:clamp(12px,1.6vw,24px);
  --ease-out:cubic-bezier(0.22,1,0.36,1); --ease-in-out:cubic-bezier(0.76,0,0.24,1); --ease-soft:cubic-bezier(0.33,1,0.68,1);
  --t-press:140ms; --t-hover:180ms; --t-ui:240ms;
}
*,*::before,*::after{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;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:Manifold,"Archivo Narrow",system-ui,sans-serif;font-size:var(--step-body);line-height:1.5}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
.grade{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);padding-inline:var(--m)}

/* tipo */
.gigante{font-size:var(--step-head);font-weight:800;text-transform:uppercase;letter-spacing:-.01em;line-height:.94;padding-top:.08em}
.gigante span{display:block}
.titulo{font-size:var(--step-lead);font-weight:700;letter-spacing:-.005em;line-height:1.08}

/* botões e links */
.botao{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;background:var(--accent);color:var(--accent-ink);font:inherit;font-weight:700;text-decoration:none;border:0;border-radius:0;cursor:pointer;transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease}
.botao:active{transform:scale(.97)}
.botao--escuro{background:var(--ink);color:var(--bg)}
.botao--claro{background:var(--field-1-ink);color:var(--field-1)}
.link{text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:.07em;transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.botao:hover{background:var(--accent-strong)}.botao--escuro:hover{background:#333}.botao--claro:hover{background:#fff}.link:hover{color:var(--accent)}}

/* cabeçalho compacto: logo, links juntos, um botão */
.cabeca{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px var(--m);color:#f3f2ee;transition:background-color 300ms ease,color 300ms ease,transform 420ms var(--ease-out)}
.cabeca.recolhida{transform:translateY(-100%)}
.cabeca__logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
/* o ícone da marca (câmera + lâmpada) pinta com a cor do cabeçalho: branco sobre as capas, preto no fundo claro */
.cabeca__icone{width:34px;height:38px;flex:none;background:currentColor;-webkit-mask:url(marca/icone-192.webp) center/contain no-repeat;mask:url(marca/icone-192.webp) center/contain no-repeat;transition:background-color 300ms ease}
.cabeca__palavra{display:block;width:118px;height:28px;position:relative}
.cabeca__logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:left center;transition:opacity 300ms ease}
.cabeca__logo .preto{opacity:0}
.cabeca nav{display:flex;align-items:center;gap:28px;font-size:var(--step-small);font-weight:600}
.cabeca nav a:not(.botao){text-decoration:none;position:relative;padding:6px 0}
.cabeca nav a:not(.botao)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.cabeca nav a:not(.botao):hover::after{transform:none}}
.cabeca nav a[aria-current="page"]::after{transform:none}
.cabeca .botao{min-height:44px;padding:0 18px}
.cabeca__busca{display:inline-flex;align-items:center;font-size:1.375rem;padding:8px 2px}
.cabeca nav a.cabeca__busca::after{display:none}
.cabeca__busca span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.menu-cel .cabeca__busca{font-size:clamp(2.25rem,11vw,3.5rem);gap:14px}
.menu-cel .cabeca__busca span{position:static;width:auto;height:auto;clip:auto}
.cabeca.solido{background:var(--bg);color:var(--ink)}
.cabeca__menu{display:none;align-items:center;gap:8px;font:inherit;font-weight:700;font-size:1rem;background:none;border:0;color:inherit;padding:10px 4px;cursor:pointer}
.cabeca__menu .ic{font-size:1.5rem}
.menu-cel{position:fixed;inset:0;z-index:40;background:var(--field-1);color:var(--field-1-ink);padding:22px var(--m);display:flex;flex-direction:column;gap:6px}
.menu-cel[hidden]{display:none}
.menu-cel__fechar{align-self:flex-end;font:inherit;font-weight:700;background:none;border:0;color:inherit;padding:10px 4px;cursor:pointer;margin-bottom:24px}
.menu-cel a{font-size:clamp(2.25rem,11vw,3.5rem);font-weight:800;text-transform:uppercase;line-height:1.05;text-decoration:none}
.menu-cel a.botao{font-size:1rem;margin-top:28px;align-self:flex-start;text-transform:none}
.cabeca.solido .branco{opacity:0}.cabeca.solido .preto{opacity:1}

/* grade de trabalhos: quadrados colados, nome sobre a foto */
.mosaico{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));list-style:none;margin:0;padding:0}
.mosaico li[hidden]{display:none}
.quadro{position:relative;display:block;aspect-ratio:1;overflow:hidden;color:#fff;text-decoration:none;background:#1b1b1b}
.quadro img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-soft)}
.quadro::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:0;pointer-events:none;background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0))} /* taste-skill-ignore: scrim neutro sob o texto */
.quadro__texto{position:absolute;left:20px;right:20px;bottom:16px;z-index:1;display:flex;flex-direction:column;gap:2px}
.quadro__nome{font-weight:800;text-transform:uppercase;font-size:clamp(1.25rem,.9rem + .8vw,1.75rem);line-height:1.08;padding-top:.12em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quadro__cat{font-size:1rem;font-weight:400;opacity:.92}
@media (hover:hover) and (pointer:fine){.quadro:hover img{transform:scale(1.05)}}


/* ícones (Phosphor, peso regular, licença MIT): um tamanho por papel */
.ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-0.14em;fill:currentColor}
.botao .ic{font-size:1.25em;margin-right:10px;vertical-align:middle}
.botao--seta .ic{margin:0 0 0 10px;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.botao--seta:hover .ic{transform:translateX(4px)}}
.link-ic{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none}
.link-ic .ic{font-size:1.25em;transition:transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.link-ic:hover .ic{transform:translate(3px,-3px)}}

/* rodapé: redes com ícone, sem caixa, na cor do texto */
.rodape__redes{display:flex;flex-wrap:wrap;gap:2px 6px;margin:26px 0 0 -10px;max-width:520px}
.rodape__lugares .rodape__redes a{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;font-size:1.75rem;color:var(--ink);transform:none;transition:color var(--t-hover) ease,transform var(--t-press) var(--ease-out)}
.rodape__lugares .rodape__redes a:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){.rodape__lugares .rodape__redes a:hover{color:var(--accent);transform:translateY(-3px)}}

/* quadro: seta no canto quando o mouse passa */
.quadro__seta{position:absolute;top:14px;right:14px;z-index:1;width:44px;height:44px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:1.375rem;opacity:0;transform:translate(-8px,8px);transition:opacity var(--t-ui) ease,transform var(--t-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.quadro:hover .quadro__seta,.quadro:focus-visible .quadro__seta{opacity:1;transform:none}}

/* rodapé: o logotipo primeiro */
.rodape{background:var(--bg);color:var(--ink);overflow:hidden;padding:clamp(56px,7vw,110px) 0 var(--m)}
.rodape__nome{padding-inline:var(--m)}
.rodape__nome img{width:min(100%,62vw)}
.rodape__linha{margin-top:72px;align-items:start}
.rodape__lugares{grid-column:1/8;display:flex;flex-direction:column;gap:6px}
.rodape__sobre{font-size:var(--step-lead);font-weight:700;line-height:1.08;max-width:24ch;margin:0}
.rodape__autor{color:var(--muted);font-weight:600;margin:6px 0 18px}
.rodape__lugares a{font-size:var(--step-lead);font-weight:700;color:var(--accent);text-decoration:none;width:fit-content;transition:transform var(--t-hover) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.rodape__lugares a:hover{transform:translateX(8px)}}
.rodape__links{grid-column:8/13;display:grid;grid-template-columns:repeat(2,1fr);gap:32px 24px;font-size:var(--step-body)}
.rodape__links p{margin:0}
.rodape__links b{display:block;font-weight:700;margin-bottom:8px}
.rodape__links a{display:block;text-decoration:none;padding:3px 0;color:var(--muted);transition:color var(--t-hover) ease}
@media (hover:hover) and (pointer:fine){.rodape__links a:hover{color:var(--ink)}}
.rodape__fim{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:96px;padding-inline:var(--m);color:var(--muted)}
.rodape__fim p{max-width:72ch;margin:0 0 6px}

/* movimento */
@media (prefers-reduced-motion:no-preference){
  .js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:var(--d,0ms)}
  .js [data-reveal].is-in{opacity:1;transform:none}
  .js .mosaico li{opacity:0;transform:translateY(30px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:var(--d,0ms)}
  .js .mosaico li.is-in{opacity:1;transform:none}
  .js .foto-entra img{transform:scale(1.07);transition:transform 1600ms var(--ease-soft)}
  .js .foto-entra.is-in img{transform:none}
}

@media (max-width:1000px){.mosaico{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1180px){
  .cabeca nav a:not(.botao):not(.cabeca__busca){display:none}
  .cabeca__menu{display:inline-flex}
  .cabeca nav{gap:14px}
}
@media (max-width:1320px) and (min-width:1181px){.cabeca nav{gap:20px}}
@media (max-width:560px){
  .cabeca .botao{display:none}
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quadro__texto{left:12px;right:12px;bottom:10px}
  .quadro__nome{font-size:1.125rem}
  .rodape__lugares,.rodape__links{grid-column:1/-1}
  .rodape__links{grid-template-columns:1fr 1fr}
}


/* títulos grandes com acento: entrelinha que não deixa o acento encostar na linha de cima */
.com-acento{line-height:1.22 !important}

/* ---------- aviso de cookies (cookies.js) ---------- */
.cookies{position:fixed;left:var(--m);bottom:var(--m);z-index:60;max-width:460px;padding:20px 22px;background:var(--field-1);color:var(--field-1-ink);display:flex;flex-direction:column;gap:16px;font-size:var(--step-small);line-height:1.45}
.cookies p{margin:0}
.cookies b{display:block;font-size:var(--step-body);margin-bottom:4px}
.cookies .link{color:var(--field-1-ink)}
.cookies__acoes{display:flex;gap:10px;flex-wrap:wrap}
.cookies .botao{min-height:48px;padding:0 20px}
@media (max-width:560px){.cookies{left:0;right:0;bottom:0;max-width:none;padding:18px 16px calc(18px + env(safe-area-inset-bottom))}.cookies__acoes .botao{flex:1 1 auto}}
@media (prefers-reduced-motion:no-preference){.cookies{animation:cookies-sobe 500ms var(--ease-out) both}@keyframes cookies-sobe{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}}

/* ---------- o ícone da F/Still gigante e bem suave ao fundo (rodapé, "O que fotografamos", "Como funciona") ---------- */
.com-marca{position:relative;isolation:isolate;overflow:hidden;overflow:clip} /* hidden primeiro: Safari antigo não conhece clip e o ícone vazaria pela borda */
.marca-fundo{position:absolute;z-index:-1;width:min(62vw,860px);aspect-ratio:1162/1295;background:currentColor;opacity:.028;pointer-events:none;
  -webkit-mask:url(marca/icone.webp) center/contain no-repeat;mask:url(marca/icone.webp) center/contain no-repeat}
/* como em "O que fotografamos": grande, à esquerda, atrás do F/STILL, cortado pela borda quando falta espaço */
.rodape .marca-fundo{left:calc(var(--m) - clamp(140px,16vw,340px));top:clamp(-20px,1vw,40px);width:clamp(440px,48vw,860px)}
@media (max-width:820px){.rodape .marca-fundo{left:-90px;top:10px;width:340px}}