/* José Guilherme Marques — estilos do site
   Medidas copiadas do site Squarespace (novembro 2026). */

@font-face { font-family: "Young Serif"; src: url(/assets/fonts/young-serif.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url(/assets/fonts/bitter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bitter"; src: url(/assets/fonts/bitter-italic.woff2) format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
  --branco: #fff;
  --preto: #000;
  --cinza: #797979;
  --letra-titulos: "Young Serif", Georgia, serif;
  --letra-texto: "Bitter", Georgia, serif;
  --margem: 3vw;            /* margem lateral no computador */
  --margem-tm: 6vw;         /* margem lateral no telemóvel */
  --largura-max: 1400px;
  --espaco: 11px;           /* espaço entre células da grelha */
  --largura-util: min(var(--largura-max), calc(100vw - 2 * var(--margem)));
  --escala: min(1.2vmax, 16.8px);   /* como o Squarespace escala os títulos */
  /* altura do cabeçalho = linha do nome + 1.6vw em cima e em baixo (como no Squarespace) */
  --altura-cabecalho: calc((.5 * var(--escala) + 1rem) * 1.2 + 3.2vw);
}
@media (max-width: 799px) { :root { --altura-cabecalho: calc(16.8px + 17.4vw); } }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--altura-cabecalho); }
body {
  margin: 0; background: var(--branco); color: var(--preto);
  font-family: var(--letra-texto); font-size: 1rem; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }

.saltar { position: absolute; left: -9999px; top: 0; background: var(--branco); padding: .5em 1em; z-index: 200; }
.saltar:focus { left: var(--margem); }

/* ---------- Cabeçalho ---------- */
.cabecalho {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--altura-cabecalho);
  background: var(--branco);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--margem);
}
.cabecalho .nome {
  font-family: var(--letra-titulos); font-weight: 400;
  font-size: calc(.5 * var(--escala) + 1rem); line-height: 1.2; letter-spacing: -.02em;
  text-decoration: none; white-space: nowrap;
}
.menu { display: flex; gap: .93em; list-style: none; margin: 0; padding: 0; line-height: 1.5; }
.menu > li { position: relative; }
.menu a, .menu button { text-decoration: none; padding: .1em 0; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.menu a:hover, .menu a[aria-current="page"], .menu button:hover { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.submenu {
  position: absolute; right: -14px; top: 100%;
  min-width: 200px; padding: 7px 14px; margin: 0; list-style: none;
  background: var(--branco); text-align: right; line-height: 1.3;
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.submenu li { padding: .1em 0; }
.menu > li:hover .submenu, .menu > li:focus-within .submenu { opacity: 1; visibility: visible; }

.botao-menu { display: none; }
.menu-telemovel { display: none; }

@media (max-width: 799px) {
  .cabecalho { padding: 0 var(--margem-tm); }
  .cabecalho .nome { font-size: 1rem; }
  .menu { display: none; }
  .botao-menu {
    display: block; position: relative; width: 35px; height: 35px;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--preto); z-index: 102;
  }
  .botao-menu span { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .25s cubic-bezier(.2,.6,.3,1); }
  .botao-menu span:first-child { transform: translateY(-5.5px); }
  .botao-menu span:last-child { transform: translateY(5.5px); }
  .menu-aberto .botao-menu span:first-child { transform: rotate(45deg); }
  .menu-aberto .botao-menu span:last-child { transform: rotate(-45deg); }

  .menu-telemovel {
    display: flex; position: fixed; inset: 0; z-index: 99; background: var(--branco);
    align-items: center; justify-content: center; text-align: center;
    font-size: 8.5vw; line-height: 1.6;
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
  }
  .menu-aberto .menu-telemovel { opacity: 1; visibility: visible; }
  .menu-aberto { overflow: hidden; }
  .menu-telemovel ul { list-style: none; margin: 0; padding: 0; }
  .menu-telemovel a, .menu-telemovel button { font: inherit; color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
  .menu-telemovel .painel[hidden] { display: none; }
  .menu-telemovel .seta { display: inline-block; width: .45em; height: .45em; margin: 0 .2em 0 .35em; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); vertical-align: .12em; }
  .menu-telemovel .seta.voltar { transform: rotate(-135deg); margin: 0 .3em 0 .1em; }
}

/* ---------- Secções e grelha (igual ao Squarespace) ---------- */
main { padding-top: var(--altura-cabecalho); }
.seccao { display: flex; align-items: center; min-height: 33vh; padding: 3.3vmax 0; }
.seccao.alt-medium { min-height: 66vh; padding: 6.6vmax 0; }
.seccao.alt-large { min-height: 100vh; padding: 10vmax 0; }
.grelha {
  width: 100%; display: grid; position: relative;
  column-gap: var(--espaco); row-gap: var(--espaco);
  grid-template-columns:
    minmax(calc(var(--margem-tm) - var(--espaco)), 1fr)
    repeat(8, minmax(0, calc((var(--largura-max) - 7 * var(--espaco)) / 8)))
    minmax(calc(var(--margem-tm) - var(--espaco)), 1fr);
}
@media (min-width: 768px) {
  .grelha {
    grid-template-columns:
      minmax(calc(var(--margem) - var(--espaco)), 1fr)
      repeat(24, minmax(0, calc((var(--largura-max) - 23 * var(--espaco)) / 24)))
      minmax(calc(var(--margem) - var(--espaco)), 1fr);
  }
}
.bloco { position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; }

/* Fotos: preenchem a célula, cortadas ao centro como no Squarespace */
.bloco picture, .bloco .foto { position: absolute; inset: 0; width: 100%; height: 100%; }
.bloco .foto img { width: 100%; height: 100%; object-fit: cover; }
.bloco .foto.inteira img { object-fit: contain; }
.bloco a.foto { display: block; }
.foto img { background: #f5f5f5; }
.foto img.carregada { background: none; }

/* Vídeos: caixa com proporção 0.64 (como no Squarespace). O vídeo fica com o seu tamanho
   real, centrado na caixa, e os controlos ficam por cima da imagem (não soltos em baixo). */
.bloco .video { width: 100%; aspect-ratio: .64; min-height: 0; max-height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bloco .video video { display: block; max-width: 100%; max-height: 100%; }
.bloco .video.largo video { width: 100%; height: auto; }
.bloco .video.alto video { height: 100%; width: auto; }

/* ---------- Texto ---------- */
.texto { overflow-wrap: break-word; }
.texto > :first-child { margin-top: 0; }
.texto > :last-child { margin-bottom: 0; }
.texto p { margin: 0 0 1rem; }
.texto h1, .texto h2, .texto h3, .texto h4 { font-family: var(--letra-titulos); font-weight: 400; letter-spacing: -.02em; margin: 2rem 0; }
.texto h1 { font-size: calc(3 * var(--escala) + 1rem); line-height: 1.056; }
.texto h2 { font-size: calc(1.8 * var(--escala) + 1rem); line-height: 1.1136; }
.texto h3 { font-size: calc(1.2 * var(--escala) + 1rem); line-height: 1.1424; }
.texto h4 { font-size: calc(.6 * var(--escala) + 1rem); line-height: 1.1712; }
.texto blockquote { margin: 0 40px; }
.texto blockquote > :first-child { margin-top: 0; }
.texto blockquote > :last-child { margin-bottom: 0; }
.texto a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.texto a:hover { color: var(--cinza); }

:focus-visible { outline: 1px solid var(--preto); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Tamanhos de texto "grande" e "pequeno" do Squarespace */
.texto .texto-grande { font-size: calc(.4 * var(--escala) + 1rem); }
.texto .texto-pequeno { font-size: calc(-.1 * var(--escala) + 1rem); }
.texto p:empty::before { content: "\200b"; }

/* Sequência de fotos no início: cada foto aparece inteira (sem cortes), centrada,
   por cima das anteriores, que continuam a ver-se à volta quando a nova é mais estreita ou mais baixa. */
.foto.ciclo .camada { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }
.foto.ciclo .camada.visivel { opacity: 1; }
.foto.ciclo .camada img { object-fit: contain; background: none; }