/* VESTIGE — teste de direção. Fundo branco, tipografia grande, fotografia primeiro. */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../assets/fonts/archivo-latin-ext-wdth-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* escala de espaço (base 4px) — todos os afastamentos saem daqui */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px;
  --bg: #ffffff; --ink: #111111; --mute: #6b6b6b; /* contraste 5,3:1 sobre branco (AA) */
  --ph: #eeeeee; --rule: #e6e6e6;
  --font: "Archivo", "Arial Black", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pad: max(clamp(14px, 1.4vw, 24px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --label: 96px;            /* coluna das etiquetas (Projeto / Tipo / Serviços…) */
  --gap: 12px;              /* espaço entre etiqueta e valor */
  /* movimento: ajusta aqui. --delay = pequena pausa antes de arrancar (dá a sensação de fluidez); --dur = duração */
  --dur: 0.65s; --fade: 0.35s; --delay: 0.04s;
  --dur-l: 0.85s; /* transição de página: a coluna das imagens fecha e o texto expande */
  --curve: cubic-bezier(0.25, 0.2, 0, 1);
  --curve-fade: cubic-bezier(0.7, 0.2, 0, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* nome */
.word { margin: 0; font-stretch: 125%; font-weight: 900; font-size: var(--wfs, 11.4vw); line-height: 0.8; letter-spacing: -0.04em; margin-left: 0; text-transform: uppercase; white-space: nowrap; }
.word a { display: inline-block; text-decoration: none; }
/* o logótipo (SVG) acompanha o tamanho da letra: 1em de largura de corpo = 0.8em de altura; largura = altura x 7.576 */
.wmk { display: block; height: 0.8em; width: 6.0606em; overflow: visible; }
/* subtítulo: sempre alinhado à esquerda, no mesmo eixo do nome */
.tag { margin: var(--s4) 0 0; max-width: 34ch; text-align: left; letter-spacing: 0; font-stretch: 100%; font-weight: 700; font-size: clamp(12px, 1.35vw, 22px); line-height: 1.12; text-transform: uppercase; }

/* menu */
nav.top { position: absolute; top: var(--pad); right: var(--pad); transition: right var(--dur-l) var(--curve); display: flex; flex-direction: column; align-items: flex-start; gap: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.4; }
nav.top a { text-decoration: none; }
nav.top a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
nav.top button { all: unset; cursor: pointer; margin-top: var(--s2); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; color: var(--mute); }
nav.top button b { color: var(--ink); font-weight: 600; }
nav.top button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
nav.top button[data-lang="en"] b { color: var(--mute); font-weight: 400; }
nav.top button[data-lang="en"] span { color: var(--ink); font-weight: 600; }

.k { font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; color: var(--mute); }

/* rolo de texto: nomes empilhados numa janela de uma linha; a pista desliza com arranque rápido e aterragem lenta */
.reel { --ts: clamp(22px, 2.6vw, 42px); --h: calc(var(--ts) * 0.9); height: var(--h); overflow: hidden; contain: layout paint; }
.track { display: flex; flex-direction: column; transform: translate3d(0, calc(var(--h) * var(--i, 0) * -1), 0); transition: transform var(--dur) var(--curve) var(--delay); will-change: transform; backface-visibility: hidden; }
.track.noanim { transition: none; }
.track span { flex: 0 0 auto; height: var(--h); display: flex; align-items: center; white-space: nowrap; font-stretch: 112%; font-weight: 800; font-size: var(--ts); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; opacity: 0; filter: blur(2px); transition: opacity var(--fade) var(--curve-fade) var(--delay), filter var(--fade) var(--curve-fade) var(--delay); }
.track span.on { opacity: 1; filter: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
@media (max-width: 800px) {
  .word { font-size: 21vw; }
  .tag { margin-top: var(--s4); font-size: 12px; }
  nav.top { position: static; order: -1; flex-direction: row; gap: var(--s4); align-items: baseline; margin-bottom: var(--s6); }
  nav.top button { margin-top: 0; }
}

/* nome: depois do primeiro ajuste passa a animar o tamanho (transição entre páginas) */
.word.anim { transition: font-size var(--dur-l) var(--curve); }
#wmeasure { position: absolute; left: -9999px; top: 0; visibility: hidden; white-space: nowrap; font-size: 100px; font-stretch: 125%; font-weight: 900; letter-spacing: -0.04em; text-transform: uppercase; }

/* acessibilidade: ligação "saltar para o conteúdo" e destaque de campos por preencher */
.skip { position: absolute; left: var(--pad); top: -60px; z-index: 50; background: var(--ink); color: var(--bg); padding: var(--s2) var(--s3); font-size: 12px; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: var(--pad); }
mark { background: #fff3a0; color: #111; padding: 0 2px; }

/* rodapé fixo: nome do estúdio e email sempre à mão */
.bar { position: fixed; z-index: 10; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--pad); background: var(--bg); font-size: 11px; line-height: 1.4; font-weight: 700; text-transform: uppercase; transition: opacity 0.25s var(--curve-fade); }
.bar a { text-decoration: none; border-bottom: 1px solid var(--ink); }
.bar { gap: var(--s4); flex-wrap: wrap; }
.bar-l { display: inline-flex; gap: var(--s4); }
/* rodapé igual em todas as páginas: ligações legais a cinzento, sem sublinhado, o "Preferências" com o mesmo aspeto */
.legal, .bar-l { color: var(--mute); }
.legal a, .bar-l a, .legal .ck-open, .bar-l .ck-open { color: inherit; text-decoration: none; border-bottom: 0; }
.legal a:hover, .bar-l a:hover, .legal .ck-open:hover, .bar-l .ck-open:hover { color: var(--ink); }
.bar-l a[aria-current="page"] { color: var(--ink); text-decoration: none; }
html.leaving .bar { opacity: 0; }
@media (max-width: 800px) { .page { padding-bottom: 72px !important; } .bar { justify-content: flex-start; } .bar > span:first-child { display: none; } }

/* saída simples entre páginas (esbatimento) */
html.out body { opacity: 0; transition: opacity 0.3s var(--curve-fade); }
@media (prefers-reduced-motion: reduce) { html.out body { transition: none; } }

/* tema escuro: o mesmo desenho com as cores invertidas; as fotografias não mudam */
html[data-theme="dark"] { --bg: #0b0b0b; --ink: #f2f2f2; --mute: #9b9b9b; --ph: #1b1b1b; --rule: #2a2a2a; color-scheme: dark; }
html[data-theme="dark"] mark { background: #5b5200; color: #fff; }
/* botão do tema: um círculo meio cheio que dá meia-volta; a página muda em onda a partir dele */
nav.top .theme, .theme { all: unset; cursor: pointer; display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin: var(--s2) 0 0 var(--s3); border: 1.5px solid var(--ink); border-radius: 50%; position: relative; overflow: hidden; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.theme i { position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
html[data-theme="dark"] .theme { transform: rotate(180deg); }
.theme:hover { transform: scale(1.25) rotate(var(--r, 0deg)); }
html[data-theme="dark"] .theme:hover { --r: 180deg; }
.theme:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 800px) { nav.top .theme, .theme { margin-top: 0; } }
html.vt-theme::view-transition-old(root), html.vt-theme::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-theme::view-transition-new(root) { z-index: 9; }
/* entre páginas (mesmo site): esbatimento curto; a fotografia escolhida cresce até ao projeto */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.22s cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: vt-in 0.5s cubic-bezier(0, 0, 0.2, 1) 0.18s both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-group(hero) { animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(hero), ::view-transition-new(hero) { height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { .theme { transition: none; } }

/* toque: áreas de toque de pelo menos 44px sem mudar o desenho; sem efeitos de rato em ecrãs tácteis */
@media (pointer: coarse) {
  nav.top a, nav.top button:not(.theme), .legal a, .bar a, .soc a, .ph-bar a, .ph-bar button, .tlink, .view { position: relative; }
  nav.top a::after, nav.top button:not(.theme)::after, .legal a::after, .bar a::after, .soc a::after, .ph-bar a::after, .ph-bar button::after { content: ""; position: absolute; inset: -14px 0; }
  nav.top .theme, .theme { width: 12px; height: 12px; overflow: visible; }
  .theme i { border-radius: 50%; }
  .theme::after { content: ""; position: absolute; inset: -14px -10px; }
  .theme:hover { transform: none; }
  html[data-theme="dark"] .theme { transform: rotate(180deg); }
  .skip { font-size: 14px; }
}
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
@media (max-width: 800px) { .bar { padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 800px) {
  nav.top .theme, .theme { vertical-align: baseline; align-self: center; margin: 0; }
  /* idioma e tema encostados ao canto superior direito, do lado oposto às ligações */
  nav.top #lang { margin-left: auto; }
  .bar a { margin-right: 2px; }
  /* ordem igual em todas as páginas: menu, nome, conteúdo */
  .page { display: flex; flex-direction: column; }
  .word { margin-bottom: 0; }
}

/* aviso de cookies: um cartão discreto; "Recusar" e "Aceitar" têm o mesmo peso */
.ck { position: fixed; z-index: 60; left: var(--pad); bottom: 56px; width: min(380px, calc(100vw - 2 * var(--pad))); padding: var(--s3) var(--s3) var(--s3); background: var(--bg); color: var(--ink); border: 1px solid var(--ink); opacity: 0; transform: translateY(12px); transition: opacity 0.35s var(--curve-fade, ease), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.ck.show { opacity: 1; transform: none; }
.ck[hidden] { display: none; }
.ck-t { margin: 0 0 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.ck-p { margin: 0 0 var(--s3); font-size: 12px; line-height: 1.45; }
.ck-b { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.ck-btn { all: unset; box-sizing: border-box; cursor: pointer; flex: 0 0 auto; min-width: 92px; min-height: 36px; padding: 0 var(--s3); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ink); border-radius: 999px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; transition: background 0.2s, color 0.2s; }
.ck-btn:hover, .ck-btn:focus-visible { background: var(--ink); color: var(--bg); }
.ck-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.ck-m { margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--mute); }
.ck-open { all: unset; cursor: pointer; font: inherit; text-transform: inherit; border-bottom: 1px solid currentColor; }
.ck-open:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (max-width: 800px) { .ck { left: var(--pad); right: var(--pad); width: auto; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .ck { transition: none; transform: none; } }

/* cursor personalizado (só com rato): ponto que inverte as cores por baixo, anel nas ligações e rótulo nas fotografias */
html.cur-on, html.cur-on * { cursor: none !important; }
html.cur-on.cur-native, html.cur-on.cur-native * { cursor: revert !important; }
.cur, .cur2 { position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; opacity: 0; transition: opacity 0.25s; will-change: transform; }
.cur { mix-blend-mode: difference; }
html.cur-on .cur, html.cur-on .cur2 { opacity: 1; }
html.cur-on.cur-native .cur, html.cur-on.cur-native .cur2, .cur.gone, .cur2.gone { opacity: 0; }
.cur-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s; }
.cur.ring .cur-dot { transform: scale(2.4); background: transparent; box-shadow: inset 0 0 0 0.7px #fff; }
.cur.lbl .cur-dot { transform: scale(0); }
.cur.press .cur-dot { transform: scale(0.8); }
.cur.ring.press .cur-dot { transform: scale(2); }
.cur-pill { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0.4); opacity: 0; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 11px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s; }
.cur2.lbl .cur-pill { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.cur2.press .cur-pill { transform: translate(-50%, -50%) scale(0.94); }
@media (hover: none), (pointer: coarse) { .cur, .cur2 { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .cur-dot, .cur-pill { transition: none; } }