/* RC Fotos — fotografia de autor no Algarve.
   Identidade: preto de sala escura, osso, areia. Serifa de livro para o nome,
   grotesca para o texto. Elementos da própria fotografia: diafragma, escala de
   aberturas, marcas de visor e prova de contacto. Nada de amarelo. */

:root {
  --tinta: #0b0b0c;
  --carvao: #131315;
  --carvao-2: #1b1b1e;
  --osso: #f2ece3;
  --pedra: #a9a49c;
  --areia: #c9a37a;
  --linha: rgba(242, 236, 227, 0.14);
  --serifa: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, "Times New Roman", serif;
  --grotesca: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --largura: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tinta);
  color: var(--osso);
  font-family: var(--grotesca);
  font-size: 17px;
  line-height: 1.72;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration-color: var(--areia); text-underline-offset: 3px; }
a:hover { color: var(--areia); }

:focus-visible { outline: 2px solid var(--areia); outline-offset: 3px; }

.wrap { width: min(100% - 3rem, var(--largura)); margin-inline: auto; }

.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--osso); color: var(--tinta); padding: 0.7rem 1.1rem;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ------------------------------- tipografia ------------------------------ */

.olho {
  font-family: var(--grotesca);
  font-size: 0.7rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--areia);
  margin: 0 0 1.2rem;
}

h1, h2, h3 {
  font-family: var(--serifa);
  font-weight: 400;
  margin: 0;
  text-wrap: balance;
}

/* O título grande tem duas linhas certas, não quatro. */
h1 {
  font-size: clamp(2.1rem, 4.2vw, 3.5rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  max-width: 20ch;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  max-width: 22ch;
}

h3 { font-size: 1.22rem; line-height: 1.28; letter-spacing: 0; }

strong { font-weight: 600; }

/* -------------------------------- marca ---------------------------------- */

.marca {
  display: inline-flex; align-items: center; gap: 0.75rem;
  text-decoration: none; color: var(--osso);
}
.marca svg { display: block; height: 42px; width: auto; flex: none; color: var(--osso); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; }
.marca__nome {
  font-family: var(--serifa); font-size: 1.06rem; letter-spacing: 0.3em;
  text-transform: uppercase;
}
.marca__sub {
  font-size: 0.53rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--pedra); margin-top: 0.4rem;
}
.marca:hover { color: var(--osso); }
.pe .marca__nome { font-size: 0.92rem; }
.pe .marca__sub { font-size: 0.49rem; }

/* --------------------------------- topo --------------------------------- */

.topo {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11, 11, 12, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}

.topo .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 78px;
}

.menu { display: flex; gap: 1.9rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
.menu a { color: var(--pedra); text-decoration: none; padding: 0.3rem 0; border-bottom: 1px solid transparent; }
.menu a:hover { color: var(--osso); border-bottom-color: var(--areia); }

.acoes { display: flex; align-items: center; gap: 1.2rem; }

.idiomas { display: flex; gap: 0.55rem; font-size: 0.76rem; letter-spacing: 0.16em; }
.idiomas a { color: var(--pedra); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.idiomas a[aria-current="true"] { color: var(--osso); border-bottom-color: var(--areia); }

.botao {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.85rem 1.6rem; text-decoration: none;
  border: 1px solid var(--areia); color: var(--osso);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.botao:hover { background: var(--areia); color: var(--tinta); }
.botao--cheio { background: var(--osso); border-color: var(--osso); color: var(--tinta); }
.botao--cheio:hover { background: var(--areia); border-color: var(--areia); color: var(--tinta); }

/* --------------------------------- heroi -------------------------------- */

.heroi { position: relative; border-bottom: 1px solid var(--linha); overflow: hidden; }

/* Diafragma desenhado a 5%: dá profundidade sem roubar o retrato. */
.heroi::before {
  content: "";
  position: absolute;
  right: -8vw; top: -14vw;
  width: 62vw; height: 62vw; max-width: 760px; max-height: 760px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%23c9a37a' stroke-width='1.1'%3E%3Ccircle cx='100' cy='100' r='96'/%3E%3Ccircle cx='100' cy='100' r='62'/%3E%3Cpath d='M100 38 152 68 152 132 100 162 48 132 48 68Z'/%3E%3Cpath d='M100 38 100 100 48 132M152 68 100 100 152 132M48 68 100 100'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  opacity: 0.06;
  pointer-events: none;
}

.heroi .wrap {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr 0.88fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(3rem, 5vw, 4.5rem);
}

.heroi__texto { max-width: 38ch; padding-top: 0.4rem; }
.heroi__texto .olho { white-space: nowrap; }
.heroi__texto > p:not(.olho) { color: var(--pedra); margin: 1.15rem 0 1.9rem; font-size: 1.05rem; max-width: 34ch; }

.heroi__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* marcas de visor nos cantos da fotografia */
.mira { position: relative; }
.mira img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(0.88) contrast(1.03); }
.mira__c { position: absolute; width: 22px; height: 22px; border: 1px solid rgba(242, 236, 227, 0.6); pointer-events: none; }
.mira__c--tl { top: -7px; left: -7px; border-right: 0; border-bottom: 0; }
.mira__c--tr { top: -7px; right: -7px; border-left: 0; border-bottom: 0; }
.mira__c--bl { bottom: -7px; left: -7px; border-right: 0; border-top: 0; }
.mira__c--br { bottom: -7px; right: -7px; border-left: 0; border-top: 0; }

.heroi__legenda {
  display: flex; justify-content: space-between; gap: 1rem;
  margin: 0.9rem 0 0;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pedra);
}
.heroi__legenda b { color: var(--areia); font-weight: 500; }

/* --------------------------- escala de aberturas ------------------------- */

.abertura { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.abertura::before, .abertura::after { content: ""; height: 1px; background: var(--linha); flex: 1; max-width: 220px; }
.abertura svg { width: 26px; height: 26px; color: var(--areia); flex: none; }
.abertura__escala {
  font-size: 0.66rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pedra);
  white-space: nowrap;
}

/* ------------------------------- manifesto ------------------------------ */

.manifesto { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(3rem, 6vw, 5rem); }
.manifesto .wrap { display: grid; grid-template-columns: 0.42fr 0.58fr; gap: clamp(2rem, 5vw, 4.5rem); }
.manifesto p { margin: 0 0 1.2rem; color: #ded7cd; font-size: 1.08rem; }
.manifesto p:last-child { margin-bottom: 0; color: var(--pedra); font-size: 1rem; }
.manifesto__assina { font-family: var(--serifa); font-style: italic; font-size: 1.15rem; color: var(--osso); margin-top: 1.6rem; display: block; }

/* -------------------------------- portefólio ---------------------------- */

.obra { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--linha); }
.obra__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-bottom: clamp(1.8rem, 4vw, 3rem); flex-wrap: wrap; }
.obra__cabeca p { margin: 0; max-width: 30ch; color: var(--pedra); font-size: 0.92rem; }

.galeria { columns: 3; column-gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.galeria figure { margin: 0 0 clamp(0.8rem, 1.6vw, 1.4rem); break-inside: avoid; }
.galeria .moldura { padding: 6px; border: 1px solid var(--linha); transition: border-color 0.3s ease; }
.galeria figure:hover .moldura { border-color: var(--areia); }
.galeria img { width: 100%; filter: saturate(0.9); transition: opacity 0.35s ease; }
.galeria figure:hover img { opacity: 0.86; }
.galeria figcaption {
  display: flex; justify-content: space-between; gap: 1rem;
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pedra); padding: 0.6rem 0.15rem 0;
}
.galeria figcaption span:last-child { color: var(--areia); font-variant-numeric: tabular-nums; }

/* ---------------------------- prova de contacto ------------------------- */

.tira { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--linha); background: var(--carvao); }
.tira__rolo {
  position: relative;
  margin-top: 1.8rem;
  padding: 26px 0;
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--areia) transparent;
}
/* perfurações de película, desenhadas (sem imagem) */
.tira__rolo::before, .tira__rolo::after {
  content: ""; position: absolute; left: 0; right: 0; height: 14px;
  background-image: repeating-linear-gradient(90deg, rgba(242,236,227,.22) 0 10px, transparent 10px 26px);
}
.tira__rolo::before { top: 4px; }
.tira__rolo::after { bottom: 4px; }
.tira figure { margin: 0; flex: 0 0 clamp(180px, 22vw, 260px); scroll-snap-align: center; }
.tira img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.05); border: 1px solid rgba(242,236,227,.16); }
.tira figcaption {
  margin-top: 0.5rem; font-size: 0.64rem; letter-spacing: 0.22em;
  color: var(--pedra); font-variant-numeric: tabular-nums;
}
.tira__nota { margin: 1.4rem 0 0; font-size: 0.85rem; color: var(--pedra); }

/* -------------------------------- sessões ------------------------------- */

.sessoes { padding: clamp(3rem, 6vw, 5.5rem) 0; border-top: 1px solid var(--linha); }
.sessoes__lista { list-style: none; margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; padding: 0; border-top: 1px solid var(--linha); }
.sessoes__lista li {
  display: grid; grid-template-columns: 4.2rem 1fr 1.15fr; gap: 1.5rem;
  padding: 1.45rem 0; border-bottom: 1px solid var(--linha); align-items: baseline;
}
.sessoes__lista .num { font-family: var(--serifa); font-size: 0.9rem; color: var(--areia); letter-spacing: 0.1em; }
.sessoes__lista .nome { font-family: var(--serifa); font-size: 1.42rem; }
.sessoes__lista p { margin: 0; color: var(--pedra); font-size: 0.93rem; }
.sessoes__nota { margin: 1.6rem 0 0; color: var(--pedra); font-size: 0.9rem; }

/* --------------------------------- citação ------------------------------ */

.citacao { padding: clamp(3.5rem, 8vw, 6.5rem) 0; text-align: center; border-top: 1px solid var(--linha); background: var(--carvao); }
.citacao blockquote { margin: 0 auto; max-width: 22ch; }
.citacao p { font-family: var(--serifa); font-size: clamp(1.6rem, 3.4vw, 2.7rem); line-height: 1.16; margin: 0 0 1.4rem; text-wrap: balance; }
.citacao footer { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pedra); }

/* --------------------------------- passos ------------------------------- */

.passos { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--linha); }
.passos__grelha { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 3rem); margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.passos article { border-top: 1px solid var(--linha); padding-top: 1.3rem; }
.passos h3 { margin-bottom: 0.65rem; }
.passos p { margin: 0; color: var(--pedra); font-size: 0.93rem; }

/* -------------------------------- contacto ------------------------------ */

.contacto { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--linha); }
.contacto .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.contacto h2 { max-width: 18ch; }
.contacto p { color: var(--pedra); }
.contacto__dados { margin: 1.8rem 0 2.2rem; padding: 0; list-style: none; }
.contacto__dados li { border-top: 1px solid var(--linha); padding: 0.9rem 0; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; }
.contacto__dados li span:first-child { color: var(--pedra); letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.68rem; align-self: center; }
.contacto__dados a { text-decoration: none; border-bottom: 1px solid var(--areia); }

.instagram {
  display: inline-flex; align-items: center; gap: 0.8rem;
  font-size: 0.76rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--osso); text-decoration: none;
  padding: 0.9rem 1.5rem; border: 1px solid var(--areia);
}
.instagram:hover { background: var(--areia); color: var(--tinta); }

/* ---------------------------------- pé ---------------------------------- */

.pe { border-top: 1px solid var(--linha); padding: 2.6rem 0 6.5rem; font-size: 0.88rem; }
.pe__grelha { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 2rem; }
.pe p { margin: 0; color: var(--pedra); }
.pe b { color: var(--osso); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.68rem; display: block; margin-bottom: 0.6rem; }
.pe a { color: var(--pedra); text-decoration: none; }
.pe a:hover { color: var(--areia); }
.pe__marca { margin-bottom: 1rem; }
.pe__fim {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 2.2rem; padding-top: 1.3rem; border-top: 1px solid var(--linha);
  font-size: 0.74rem; letter-spacing: 0.1em; color: var(--pedra);
}

/* -------------------------------- telemóvel ----------------------------- */

@media (max-width: 1000px) {
  .menu { display: none; }
  .galeria { columns: 2; }
  .heroi .wrap { grid-template-columns: 1fr; gap: 2rem; }
  .heroi__texto { order: 2; max-width: none; }
  .heroi .mira { order: 1; }
  h1 { max-width: 20ch; }
  .manifesto .wrap, .contacto .wrap { grid-template-columns: 1fr; }
  .sessoes__lista li { grid-template-columns: 3rem 1fr; }
  .sessoes__lista p { grid-column: 2; }
  .passos__grelha { grid-template-columns: 1fr; }
  .pe__grelha { grid-template-columns: 1fr 1fr; }
  .heroi::before { opacity: 0.04; right: -30vw; top: -10vw; width: 90vw; height: 90vw; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .wrap { width: min(100% - 2.2rem, var(--largura)); }
  .galeria { columns: 1; }
  .topo .wrap { min-height: 66px; }
  .marca svg { height: 34px; }
  .marca__nome { font-size: 0.92rem; letter-spacing: 0.22em; }
  .marca__sub { display: none; }
  .acoes { gap: 0.7rem; }
  .idiomas { font-size: 0.68rem; gap: 0.4rem; }
  h1 { max-width: none; }
  .botao { padding: 0.72rem 1.1rem; font-size: 0.7rem; }
  .pe__grelha { grid-template-columns: 1fr; }
  .abertura__escala { letter-spacing: 0.2em; font-size: 0.6rem; }
  .heroi__texto .olho { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

@media print {
  .topo, .tarja { display: none; }
  body { background: #fff; color: #000; }
}

/* tarja de pré-visualização — igual em todos os sites (fonte: scripts/lib/tarja.mjs) */
.tarja{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#111112;color:#f2ece3;border-top:1px solid rgba(242,236,227,.3);font:500 .84rem/1.35 ui-sans-serif,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:.01em;text-align:center;padding:.62rem 1rem;box-shadow:0 -6px 18px rgba(0,0,0,.3)}
.tarja span{display:block;margin:0 auto;max-width:94ch;text-wrap:balance}
.tarja a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.tarja a:hover,.tarja a:focus-visible{color:#e3c39a}
body{padding-bottom:3.1rem}
@media (max-width:640px){.tarja{font-size:.79rem;line-height:1.4;padding:.6rem .9rem}body{padding-bottom:3.6rem}}
@supports (padding:max(0px)){.tarja{padding-bottom:max(.62rem,calc(.36rem + env(safe-area-inset-bottom)));padding-left:max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right))}}