/* ============================================================
   Portfólio — índice de obras
   Duas laminas lado a lado: a ESQUERDA e o indice (uma coluna de
   nomes, nao uma escada de tamanhos), a DIREITA e a prancha onde a
   obra apontada aparece. Percorrer a lista pinta a prancha; clicar
   na obra ja apontada abre o estudo de caso.
   No estreito a prancha desce para baixo do indice e o dominio de
   cada obra sai — a linha nao tem largura para ele.

   O sistema (tokens, chrome, pauta, acao, tag) vem de
   shared/pages-light.css.
   ============================================================ */

.portfolio-main{
  position:relative;z-index:1;min-height:100svh;
  width:100%;max-width:var(--medida-larga);margin-inline:auto;
  padding:calc(var(--nav-h) + clamp(30px,5vh,70px)) var(--respiro-largo) clamp(44px,6vh,72px);
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(24px,3.8vh,50px);
}

/* ---------- cabeca ---------- */
.pf-cabeca{display:grid;gap:clamp(14px,2vh,24px)}
.pf-cabeca-topo{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(18px,3vw,52px);align-items:end;
}
.pf-cabeca-topo .pauta-regua{margin-bottom:9px}
.pf-cabeca-topo .pauta-rotulo{margin-top:0;margin-bottom:clamp(8px,1.2vh,14px)}
.pf-h1{
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(34px,4.3vw,72px);line-height:.92;letter-spacing:-.006em;
  text-transform:uppercase;color:var(--fg);
}
.pf-lead{
  max-width:46ch;justify-self:end;
  font-weight:400;font-size:clamp(14px,.96vw,18px);line-height:1.5;
  text-wrap:pretty;color:color-mix(in srgb,var(--fg) 80%,transparent);
}

/* a contagem e o unico numero do cabecalho: tres obras, todas no ar.
   sem taxonomia de dominio — as tres sao autorais, e etiquetar uma de
   "autoral" faria as outras parecerem que nao sao. */
.pf-conta{
  display:block;font-weight:300;font-size:11px;letter-spacing:.14em;
  color:color-mix(in srgb,var(--fg) 50%,transparent);
}

/* ---------- lamina ---------- */
.pf-lamina{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,5vw,88px);align-items:start;min-height:0;
}

/* ---------- indice ---------- */
.pf-indice{list-style:none;display:grid;align-content:start;border-top:1px solid var(--line);min-width:0}
.pf-obra{
  position:relative;display:grid;grid-template-columns:12px auto minmax(0,1fr);
  align-items:baseline;gap:clamp(10px,1.4vw,20px);
  padding:clamp(15px,2.1vh,28px) 0;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .18s ease;
}
.pf-obra:hover{background:color-mix(in srgb,var(--fg) 6%,transparent)}
.pf-obra-marca{display:block;width:12px;align-self:center}
.pf-obra-marca::before{
  content:"";display:block;width:7px;height:7px;background:var(--accent);
  opacity:0;transition:opacity .18s ease;
}
.pf-obra.is-ativa .pf-obra-marca::before{opacity:1}
.pf-obra-num{font-weight:900;font-size:11px;letter-spacing:.12em;color:var(--fg)}
/* o corpo do nome e escrito pelo JS: nenhuma formula acerta a largura
   de uma display autoral, e os tres precisam do MESMO corpo para o
   indice continuar sendo uma coluna, nao uma escada. */
.pf-obra-nome{
  font-family:var(--synapsis);font-weight:900;line-height:.96;letter-spacing:-.004em;
  text-transform:uppercase;min-width:0;white-space:nowrap;color:var(--fg);
}

/* ---------- prancha ---------- */
.pf-lado{display:grid;gap:clamp(14px,2.2vh,26px);min-width:0}
.pf-prancha{
  position:relative;width:100%;aspect-ratio:16/10;overflow:hidden;
  background:color-mix(in srgb,var(--fg) 7%,var(--bg));
  outline:1px solid var(--line);outline-offset:-1px;
}
.pf-prancha-slot{position:absolute;inset:0;z-index:0}
.pf-prancha-slot img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;filter:saturate(.96);
  transition:opacity .28s var(--ease);
}
.pf-video-slot{position:absolute;inset:0;z-index:1;pointer-events:none}
.pf-video-slot video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:top center;
  opacity:0;transition:opacity .34s var(--ease);
}
.pf-video-slot video.is-tocando{opacity:1}
/* marcas de registro sobre a imagem: difference garante contraste seja
   qual for o quadro por baixo — a marca nunca some no claro. */
.pf-mira{position:absolute;z-index:3;width:16px;height:16px;mix-blend-mode:difference}
.pf-mira.tl{top:12px;left:12px;border-top:1px solid rgba(255,255,255,.85);border-left:1px solid rgba(255,255,255,.85)}
.pf-mira.tr{top:12px;right:12px;border-top:1px solid rgba(255,255,255,.85);border-right:1px solid rgba(255,255,255,.85)}
.pf-mira.bl{bottom:12px;left:12px;border-bottom:1px solid rgba(255,255,255,.85);border-left:1px solid rgba(255,255,255,.85)}
.pf-mira.br{bottom:12px;right:12px;border-bottom:1px solid rgba(255,255,255,.85);border-right:1px solid rgba(255,255,255,.85)}

.pf-legenda{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:clamp(14px,2vw,28px)}
.pf-legenda-texto{display:grid;gap:8px;min-width:0}
.pf-status{font-weight:900;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.pf-tese{
  font-family:var(--ivypresto);font-style:italic;
  font-size:clamp(18px,1.8vw,32px);line-height:1.1;text-wrap:pretty;color:var(--fg);
}
.pf-abrir{
  min-height:52px;padding:0 clamp(16px,1.8vw,26px);
  font-size:clamp(12px,.92vw,15px);letter-spacing:.06em;
}

/* ---------- estudo de caso ---------- */
.pf-backdrop{
  display:none;position:fixed;inset:0;z-index:90;
  background:color-mix(in srgb,var(--graphite) 46%,transparent);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
}
.pf-painel{
  display:none;position:fixed;z-index:91;
  inset:clamp(16px,4vh,56px) clamp(16px,5vw,88px);
  background:var(--bg);border:1px solid color-mix(in srgb,var(--fg) 34%,transparent);
  box-shadow:0 30px 80px rgba(32,32,37,.28);overflow:auto;
}
body.is-caso-aberto{overflow:hidden}
body.is-caso-aberto .pf-backdrop,
body.is-caso-aberto .pf-painel{display:block}
.pf-fechar{
  position:sticky;top:0;left:100%;z-index:2;
  display:flex;align-items:center;gap:10px;height:56px;padding:0 20px;
  background:var(--bg);border-bottom:1px solid var(--line);border-left:1px solid var(--line);
  font-weight:900;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg);transition:color .18s ease;
}
.pf-fechar:hover{color:var(--accent)}
.pf-caso{display:none;padding:clamp(20px,3.4vw,56px) clamp(20px,3.4vw,56px) clamp(32px,5vh,72px)}
.pf-caso.is-aberto{display:block}
.pf-caso-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(24px,3.4vw,56px);align-items:start}
.pf-caso-eyebrow{
  display:block;margin-bottom:12px;
  font-weight:300;font-size:11px;letter-spacing:.2em;
  color:color-mix(in srgb,var(--fg) 62%,transparent);
}
.pf-caso-h2{
  font-family:var(--synapsis);font-weight:900;
  font-size:clamp(32px,4.2vw,70px);line-height:.94;letter-spacing:-.008em;
  text-transform:uppercase;color:var(--fg);
}
.pf-caso-tese{
  margin-top:16px;font-family:var(--ivypresto);font-style:italic;
  font-size:clamp(20px,2.2vw,36px);line-height:1.1;color:var(--accent);
}
.pf-caso-corpo{
  display:grid;gap:.9em;margin-top:clamp(20px,3vh,32px);max-width:56ch;
  font-size:clamp(15px,1.02vw,19px);line-height:1.58;text-wrap:pretty;color:var(--fg);
}
.pf-caso-lado{display:grid;gap:clamp(20px,3vh,32px)}
.pf-decisoes{list-style:none;display:grid;border-top:1px solid var(--line)}
.pf-decisoes li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:clamp(14px,.98vw,18px);line-height:1.5;text-wrap:pretty;color:var(--fg);
}
.pf-decisoes b{font-weight:900;font-size:11px;letter-spacing:.1em;color:var(--accent)}
.pf-visitar{
  justify-self:start;min-height:64px;padding:0 clamp(20px,2.4vw,36px);
  font-size:clamp(14px,1.1vw,19px);letter-spacing:.02em;
}

/* ---------- estreito ---------- */
@media (max-width:860px){
  .pf-lamina{grid-template-columns:minmax(0,1fr);gap:clamp(26px,4.4vh,44px)}
  .pf-lado{max-width:min(100%,560px)}
}
@media (max-width:760px){
  .portfolio-main{padding-top:calc(var(--nav-h) + clamp(20px,3vh,32px))}
  .pf-lead{justify-self:start}
  .pf-legenda{grid-template-columns:1fr;align-items:start}
  .pf-painel{inset:8px}
}