/* ============================================================================
   VINEIN · FOLHA DE ESTILO
   Direção visual: "Ficha Técnica"
   editorial / brutalismo contemporâneo / minimalismo
   Tinta · Papel · Vermelho. Mais nada.
   ============================================================================ */

/* ─────────────────────────── 00 · TOKENS ────────────────────────────────── */

@property --p { syntax: '<number>'; initial-value: 0; inherits: true; }

:root{
  /* cor */
  --ink:        #0B0B0B;
  --ink-2:      #151515;
  --paper:      #F2EFE9;
  --paper-2:    #E6E2D9;
  --red:        #E11C0F;
  /* Um só cinzento não serve as duas metades do site: o que tem contraste
     suficiente sobre papel falha sobre tinta, e vice-versa. Dois, trocados
     por secção mais abaixo. */
  --grey:       #67635B;
  --grey-paper: #67635B;
  --grey-ink:   #9A958C;

  --on-ink:     #F2EFE9;
  --on-paper:   #0B0B0B;
  --hair-ink:   rgba(242,239,233,.16);
  --hair-paper: rgba(11,11,11,.16);

  /* tipografia */
  --sans:  'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* medidas */
  --gut:  clamp(18px, 4.2vw, 64px);
  --rule: 1px;

  /* tempos */
  --e-out: cubic-bezier(.22,1,.36,1);
  --e-io:  cubic-bezier(.76,0,.24,1);

  /* progresso do hero (0 → 1), escrito pelo JS */
  --p: 0;
}

/* ─────────────────────────── 01 · RESET ─────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  background:var(--ink);
}
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  font-family:var(--sans);
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.5;
  color:var(--on-ink);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  font-synthesis-weight:none;
}
body.is-locked{ overflow:hidden; }

img,svg{ display:block; max-width:100%; height:auto; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }

::selection{ background:var(--red); color:var(--paper); }

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

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.skip-link{
  position:fixed; top:8px; left:8px; z-index:9999;
  padding:.7em 1.1em; background:var(--red); color:var(--paper);
  font-family:var(--mono); font-size:12px; text-transform:uppercase;
  letter-spacing:.08em; transform:translateY(-160%);
  transition:transform .25s var(--e-out);
}
.skip-link:focus{ transform:none; }

/* ─────────────────────────── 02 · UTILITÁRIOS ───────────────────────────── */

.tag{
  font-family:var(--mono);
  font-size:clamp(9.5px,.72vw,11.5px);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  line-height:1.35;
  display:inline-block;
}
.tag--muted{ color:var(--grey); letter-spacing:.12em; }

/* grão de impressão */
.grain{
  position:fixed; inset:0; z-index:400; pointer-events:none;
  opacity:.32; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (max-width:760px){ .grain{ display:none; } }

/* Grelha visível, hairlines de registo.
   No hero não aparecem: lá o fundo é a fotografia. Entram à medida que a
   primeira secção sobe (--p vai de 0 a 1), como se a folha de registo
   só começasse depois da capa. */
.rules{
  position:fixed; inset:0; z-index:3; pointer-events:none;
  opacity:var(--p);
}
/* #1E1E1E em "difference" resolve para uma linha ligeiramente mais clara
   sobre tinta e ligeiramente mais escura sobre papel: a mesma regra serve
   as duas metades do site. */
.rules i{
  position:absolute; top:0; bottom:0; width:1px;
  background:#1E1E1E; mix-blend-mode:difference; opacity:.85;
}
.rules i:nth-child(1){ left:16.666%; }
.rules i:nth-child(2){ left:33.333%; }
.rules i:nth-child(3){ left:50%; }
.rules i:nth-child(4){ left:66.666%; }
.rules i:nth-child(5){ left:83.333%; }
/* No telemóvel não há colunas para exprimir, e a grelha só distrai. */
@media (max-width:760px){ .rules{ display:none; } }
@media (min-width:761px) and (max-width:1000px){
  .rules i:nth-child(1),.rules i:nth-child(5){ display:none; }
}

/* revelação ao entrar no viewport */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .8s var(--e-out) var(--d,0s),
             transform .9s var(--e-out) var(--d,0s);
  will-change:transform,opacity;
}
[data-reveal].in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ─────────────────────────── 03 · CURSOR ────────────────────────────────── */

.cursor{
  position:fixed; top:0; left:0; z-index:600; pointer-events:none;
  display:none; mix-blend-mode:difference;
  transform:translate3d(-50%,-50%,0);
}
@media (pointer:fine) and (prefers-reduced-motion: no-preference){
  .cursor{ display:block; }
  body{ cursor:none; }
  a,button,[data-cursor]{ cursor:none; }
}
.cursor__dot{
  display:block; width:9px; height:9px; border-radius:50%;
  background:var(--paper);
  transition:width .35s var(--e-out), height .35s var(--e-out), opacity .3s;
}
.cursor__label{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) scale(.7);
  font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--paper);
  opacity:0; transition:opacity .25s, transform .35s var(--e-out);
  white-space:nowrap;
}
.cursor.is-link .cursor__dot{ width:26px; height:26px; }
.cursor.is-view .cursor__dot{ width:76px; height:76px; }
.cursor.is-view .cursor__label{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ─────────────────────────── 04 · NAVEGAÇÃO ─────────────────────────────── */

.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem;
  padding:clamp(14px,1.5vw,22px) var(--gut);
  color:var(--on-paper);
  border-bottom:1px solid transparent;
  transition:transform .5s var(--e-io), background-color .45s var(--e-out),
             color .45s var(--e-out), border-color .45s var(--e-out),
             padding .45s var(--e-out);
}
.nav--solid{
  background:var(--ink);
  color:var(--on-ink);
  border-bottom-color:var(--hair-ink);
  padding-top:clamp(10px,1vw,14px);
  padding-bottom:clamp(10px,1vw,14px);
}
.nav--hidden{ transform:translate3d(0,-105%,0); }

/* Com o menu aberto a barra fica sobre fundo escuro: sem isto o texto
   preto do estado transparente desaparecia. */
body.menu-open .nav{
  color:var(--on-ink);
  background:transparent;
  border-bottom-color:transparent;
}

.nav__brand{
  display:flex; align-items:center; gap:.6em;
  font-weight:800; letter-spacing:-.02em;
  font-size:clamp(15px,1.15vw,18px);
  font-variation-settings:'wdth' 92,'wght' 800;
  text-transform:uppercase;
}
/* O símbolo é uma marca, não um enfeite: não roda. Ao passar o cursor faz
   só um gesto discreto. A cor vem do CSS para acompanhar a paleta do site. */
.nav__mark{
  width:1.05em; height:1.05em;
  display:block; flex:none;
  color:var(--red);
  transform-origin:50% 60%;
  transition:transform .5s var(--e-out), opacity .4s var(--e-out);
}
.nav__brand:hover .nav__mark{ transform:scale(1.12); }

.nav__list{ display:flex; gap:clamp(18px,2.4vw,42px); }
.nav__list a{
  position:relative;
  font-family:var(--mono); font-size:12px; letter-spacing:.1em;
  text-transform:uppercase;
  display:inline-flex; align-items:baseline; gap:.55em;
  padding-block:.25em;
}
.nav__idx{ font-size:9.5px; color:var(--red); }
.nav__list a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--red);
  transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--e-out);
}
.nav__list a:hover::after,
.nav__list a.is-active::after{ transform:scaleX(1); transform-origin:left; }
.nav__list a.is-active{ color:var(--red); }

.nav__toggle{ display:none; align-items:center; gap:.6em; }
.nav__toggle-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.nav__burger{ display:block; width:22px; }
.nav__burger i{
  display:block; height:1.5px; background:currentColor;
  transition:transform .4s var(--e-io), opacity .3s;
}
.nav__burger i:first-child{ margin-bottom:5px; }
.nav__toggle[aria-expanded="true"] .nav__burger i:first-child{ transform:translateY(3.2px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger i:last-child{ transform:translateY(-3.2px) rotate(-45deg); }

@media (max-width:860px){
  .nav__list{ display:none; }
  .nav__toggle{ display:flex; }
}

/* menu mobile */
.menu{
  position:fixed; inset:0; z-index:95;
  background:var(--ink); color:var(--on-ink); --grey:var(--grey-ink);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--gut) + 40px) var(--gut) var(--gut);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--e-io);
}
.menu[hidden]{ display:none; }
.menu.is-open{ clip-path:inset(0 0 0 0); }
.menu__inner{ display:flex; flex-direction:column; gap:.34em; }
/* Número por cima da palavra: assim a palavra arranca na margem e a
   mais comprida ("COMPETÊNCIAS") cabe sem encolher a escala. */
.menu__inner a{
  display:block;
  font-size:clamp(2rem,12vw,4.6rem);
  font-weight:800; line-height:1; letter-spacing:-.04em;
  font-variation-settings:'wdth' 80,'wght' 800;
  text-transform:uppercase;
  opacity:0; transform:translateY(28px);
  transition:opacity .55s var(--e-out), transform .65s var(--e-out), color .3s;
}
.menu__word{ display:block; }
.menu.is-open .menu__inner a{ opacity:1; transform:none; }
.menu.is-open .menu__inner a:nth-child(1){ transition-delay:.14s; }
.menu.is-open .menu__inner a:nth-child(2){ transition-delay:.20s; }
.menu.is-open .menu__inner a:nth-child(3){ transition-delay:.26s; }
.menu.is-open .menu__inner a:nth-child(4){ transition-delay:.32s; }
.menu__inner a:active{ color:var(--red); }
.menu__num{
  display:block; margin-bottom:.35em;
  font-family:var(--mono); font-size:11px; color:var(--red);
  letter-spacing:.1em; font-weight:500;
}
.menu__foot{
  position:absolute; left:var(--gut); right:var(--gut); bottom:var(--gut);
  padding-top:1.2rem;
  display:flex; justify-content:space-between;
  border-top:1px solid var(--hair-ink);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey);
}

/* ─────────────────────────── 05 · HERO ──────────────────────────────────── */

.hero-wrap{ height:165svh; position:relative; z-index:0; }

.hero{
  position:sticky; top:0;
  height:100svh; min-height:560px;
  overflow:hidden;
  background:var(--paper);
  color:var(--on-paper);
  isolation:isolate;

  /* ── âncoras da composição: tudo o resto deriva daqui ── */
  --name-fs:     clamp(3.6rem, 22.6vw, 30rem);   /* "VINEIN" preenche a medida */
  --name-h:      calc(var(--name-fs) * .78);     /* = font-size × line-height  */
  --name-bottom: clamp(88px, 13svh, 140px);
  --photo-ar:    1.5;                             /* largura ÷ altura da chapa */
  /* o 64svh é o travão de altura: em janelas baixas a chapa encolhe em vez
     de subir para cima da navegação */
  --photo-w:     min(clamp(260px, 46vw, 760px), 64svh);
  --photo-h:     calc(var(--photo-w) / var(--photo-ar));
  --bite:        .30;                             /* quanto a foto morde o topo
                                                     das letras (0 → 1)        */
}

/* Fundo do hero: um pormenor ampliado da mesma fotografia, esbatido, a
   fazer de papel texturado. Fica por trás de tudo (z-index 0) e nunca
   compete com a tipografia: é textura, não é imagem. */
.hero__bg{
  position:absolute; inset:0; z-index:0;
  background-image:url("../assets/img/arquitetura-minimalista.webp");
  background-size:cover;
  background-position:38% 42%;
  filter:grayscale(1) contrast(1.04);
  opacity:var(--bg-strength, .18);
  transform:scale(1.32) translate3d(0, calc(var(--p) * -4svh), 0);
  transform-origin:50% 40%;
  will-change:transform;
}
/* véu de papel: garante que o texto assenta sempre em base clara */
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(242,239,233,.30) 0%,
    rgba(242,239,233,.10) 45%,
    rgba(242,239,233,.55) 100%);
}

.hero__meta{
  position:absolute; z-index:4;
  display:flex; flex-direction:column; gap:.35em;
  top:clamp(74px,8.5svh,110px);
  opacity:calc(1 - var(--p) * 2);
  transform:translate3d(0, calc(var(--p) * -24px), 0);
}
.hero__meta--tl{ left:var(--gut); }
.hero__meta--tr{ right:var(--gut); text-align:right; }

.hero__vertical{
  position:absolute; z-index:4;
  left:calc(var(--gut) - 2px); top:36%;   /* acima do nome, sem lhe tocar */
  writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--grey);
  opacity:calc(1 - var(--p) * 2);
}
@media (max-width:900px){ .hero__vertical{ display:none; } }

/* nome, por trás da fotografia */
.hero__name{
  position:absolute; z-index:1;
  left:var(--gut); right:var(--gut);
  bottom:var(--name-bottom);
  font-size:var(--name-fs);
  line-height:.78;
  font-weight:800;
  letter-spacing:-.035em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 112,'wght' 800;
  transform:translate3d(0, calc(var(--p) * 5svh), 0);
}
.hero__name span{ display:block; }

@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  .hero__name{
    font-variation-settings:'wdth' calc(112 - 44 * var(--p)),'wght' 800;
  }
}

/* fotografia: a aresta inferior morde o topo das letras */
.hero__figure{
  position:absolute; z-index:2;
  right:15%;
  bottom:calc(var(--name-bottom) + var(--name-h) * (1 - var(--bite)));
  width:var(--photo-w);
  /* legenda ACIMA da chapa: por baixo cairia sobre as letras */
  display:flex; flex-direction:column-reverse;
  transform:translate3d(calc(var(--p) * -3vw), calc(var(--p) * -5svh), 0)
            scale(calc(1 - var(--p) * .18));
  transform-origin:50% 100%;
}
.hero__frame{
  position:relative;
  aspect-ratio:var(--photo-ar);
  overflow:hidden;
  background:var(--paper-2);
}
.hero__frame img{
  width:100%; height:100%; object-fit:cover; object-position:center 45%;
  filter:grayscale(1) contrast(1.12) brightness(1.02);
}
.hero__tint{
  position:absolute; inset:0;
  background:var(--red); mix-blend-mode:multiply;
  opacity:calc(var(--p) * .82);
}
.hero__figure figcaption{
  margin-bottom:.7em; text-align:right; color:var(--grey);
  opacity:calc(1 - var(--p) * 2);
}

.hero__foot{
  position:absolute; z-index:4;
  left:var(--gut); right:var(--gut);
  bottom:clamp(26px,3.4svh,44px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:2rem;
  transform:translate3d(0, calc(var(--p) * 26px), 0);
  opacity:calc(1 - var(--p) * 1.7);
}
.hero__disciplines{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em;
  font-family:var(--mono); font-size:clamp(10px,.78vw,12px);
  letter-spacing:.16em; text-transform:uppercase;
}
.hero__disciplines b{ color:var(--red); font-weight:400; }
.hero__line{
  max-width:30ch; text-align:right;
  font-size:clamp(13px,1.02vw,16px); line-height:1.4;
  color:#333;
}
.hero__line em{ font-family:var(--serif); font-style:italic; font-size:1.18em; color:var(--ink); }

/* indicador de scroll: vertical na margem, a espelhar a etiqueta da esquerda */
.hero__cue{
  position:absolute; z-index:4;
  right:calc(var(--gut) - 2px); top:58%; bottom:auto;
  transform:translateY(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.9em;
  color:var(--grey);
  opacity:calc(1 - var(--p) * 3);
}
.hero__cue .tag{ writing-mode:vertical-rl; letter-spacing:.24em; }
.hero__cue-bar{ display:block; width:1px; height:46px; background:var(--hair-paper); overflow:hidden; }
.hero__cue-bar i{
  display:block; width:100%; height:40%; background:var(--red);
  animation:cue 2.2s var(--e-io) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-110%); } 55%,100%{ transform:translateY(260%); } }
@media (prefers-reduced-motion: reduce){ .hero__cue-bar i{ animation:none; } }
@media (max-width:900px){ .hero__cue{ display:none; } }

/* barra vermelha lateral que cresce com o scroll */
.hero__sweep{
  position:absolute; z-index:5; top:0; left:0;
  width:clamp(5px,.7vw,11px); height:100%;
  background:var(--red);
  transform:scaleY(var(--p)); transform-origin:top;
}

/* ─────────────────────────── 06 · ESTRUTURA ─────────────────────────────── */

.main{ position:relative; z-index:2; background:var(--ink); }
.main::before{
  content:''; display:block;
  height:clamp(10px,2.1svh,22px);
  background:var(--red);
}

.sec{ position:relative; padding:clamp(70px,9vw,150px) var(--gut) clamp(80px,10vw,170px); }
.sec--ink{ background:var(--ink); color:var(--on-ink); --grey:var(--grey-ink); }
.sec--paper{ background:var(--paper); color:var(--on-paper); --grey:var(--grey-paper); }
.sec--tight{ padding-top:0; }

.sechead{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  column-gap:clamp(16px,2vw,32px);
  padding-bottom:clamp(28px,3.4vw,54px);
  border-bottom:1px solid var(--hair-ink);
  margin-bottom:clamp(44px,5.5vw,90px);
}
.sechead--paper{ border-bottom-color:var(--hair-paper); }
.sechead__num{
  font-family:var(--mono); font-size:clamp(10px,.8vw,12px);
  letter-spacing:.14em; color:var(--red); font-weight:500;
  padding-top:.65em;
}
.sechead__title{
  font-size:clamp(2.6rem,7.4vw,7rem);
  line-height:.88; font-weight:800; letter-spacing:-.035em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 96,'wght' 800;
}
.sechead__note{
  grid-column:2; margin-top:1.4em;
  max-width:44ch; color:var(--grey);
  font-size:clamp(14px,1.05vw,17px); line-height:1.5;
}

/* ─────────────────────────── 07 · PROJETOS · DESTAQUES ──────────────────── */

.feat{ display:flex; flex-direction:column; gap:clamp(70px,9vw,150px); }

.feat__item{
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,32px);
  align-items:start;
}

.feat__media{
  position:relative;
  overflow:hidden;
  background:var(--ink-2);
  aspect-ratio:16/10;
}
/* As imagens vivem a preto-e-branco dentro da página para não partirem a
   paleta; a cor real só aparece quando o cursor lá está, e depois inteira
   na página do projeto. */
.feat__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.001);
  filter:grayscale(1) contrast(1.06);
  transition:transform .9s var(--e-out), filter .55s var(--e-out);
}
.feat__item:hover .feat__media img,
.feat__item:focus-within .feat__media img{ filter:grayscale(0) contrast(1); }

/* Logótipo em vez de fotografia: aparece inteiro, com folga, sobre a tinta.
   Não se corta uma marca como se corta uma imagem. */
.feat__media--mark{ background:var(--ink); display:grid; place-items:center; }
.feat__media--mark::before{
  content:''; position:absolute; inset:14%;
  border:1px solid var(--hair-ink);
}
.feat__media--mark img{
  position:relative;
  width:auto; height:auto;
  max-width:min(40%, 250px); max-height:60%;   /* quase sem ampliar o original */
  object-fit:contain;
}
.feat__item:hover .feat__media--mark img{ transform:scale(1.03); }
.feat__media::after{
  content:''; position:absolute; inset:0;
  background:var(--red); mix-blend-mode:multiply;
  opacity:0; transition:opacity .55s var(--e-out);
}
.feat__item:hover .feat__media img,
.feat__item:focus-within .feat__media img{ transform:scale(1.045); }
.feat__item:hover .feat__media::after,
.feat__item:focus-within .feat__media::after{ opacity:.14; }

/* composição assimétrica alternada */
.feat__item:nth-child(odd) .feat__media{ grid-column:1 / 9; }
.feat__item:nth-child(odd) .feat__info{ grid-column:9 / 13; padding-top:clamp(20px,4vw,72px); }
.feat__item:nth-child(even) .feat__media{ grid-column:5 / 13; grid-row:1; }
.feat__item:nth-child(even) .feat__info{ grid-column:1 / 5; grid-row:1; padding-top:clamp(40px,8vw,140px); }

.feat__info{ display:flex; flex-direction:column; gap:1rem; }

.feat__num{
  font-family:var(--mono); font-size:clamp(10px,.8vw,12px);
  letter-spacing:.14em; color:var(--grey);
  transition:color .35s var(--e-out);
}
.feat__item:hover .feat__num{ color:var(--red); }

.feat__title{
  font-size:clamp(2.1rem,4.4vw,4.4rem);
  line-height:.92; font-weight:800; letter-spacing:-.035em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 92,'wght' 800;
}
.feat__link{ display:inline-block; position:relative; }
.feat__link::after{ content:''; position:absolute; inset:0; }
.feat__item .feat__link > span{
  display:inline-block;
  transition:transform .5s var(--e-out);
}
.feat__item:hover .feat__link > span{ transform:translateX(.1em); }

.feat__rule{
  display:block; height:2px; background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.feat__item:hover .feat__rule,
.feat__item:focus-within .feat__rule{ transform:scaleX(1); }

.feat__sum{ color:var(--grey); font-size:clamp(14px,1.02vw,16.5px); line-height:1.5; max-width:34ch; }
.feat__cats{ display:flex; flex-wrap:wrap; gap:.45em; }
.feat__cats li{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; padding:.42em .7em;
  border:1px solid var(--hair-ink); color:var(--on-ink);
}
.feat__meta{
  display:flex; gap:1.2em; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--grey);
}
.feat__dot{ width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; }

.feat__cta{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--red);
  opacity:0; transform:translateY(6px);
  transition:opacity .4s var(--e-out), transform .5s var(--e-out);
}
.feat__item:hover .feat__cta,
.feat__item:focus-within .feat__cta{ opacity:1; transform:none; }
.feat__cta i{ display:block; width:26px; height:1px; background:var(--red); }

/* Ligação para o projeto online.
   O cartão inteiro é clicável (o ::after de .feat__link cobre-o todo), por
   isso este link precisa de subir acima dessa camada para receber o clique. */
.feat__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:.9em 1.6em; }
.feat__ext{
  position:relative; z-index:2;
  display:inline-flex; align-items:baseline; gap:.45em;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:lowercase; color:var(--grey);
  padding-bottom:.25em;
  border-bottom:1px solid var(--hair-ink);
  transition:color .3s var(--e-out), border-color .3s var(--e-out);
}
.feat__ext i{ font-style:normal; transition:transform .4s var(--e-out); }
.feat__ext:hover{ color:var(--red); border-bottom-color:var(--red); }
.feat__ext:hover i{ transform:translate(3px,-3px); }

@media (max-width:860px){
  .feat__item,
  .feat__item:nth-child(odd),
  .feat__item:nth-child(even){ display:block; }
  .feat__item .feat__media{ aspect-ratio:5/4; }
  .feat__info{ padding-top:1.4rem !important; }
  .feat__cta{ opacity:1; transform:none; }
}

/* ─────────────────────────── 08 · PROJETOS · ARQUIVO ────────────────────── */

.arch{ margin-top:clamp(80px,11vw,180px); }
.arch__head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:1em; border-bottom:1px solid var(--hair-ink);
}
.arch__head .tag:first-child{ color:var(--red); }

.arch__row{ border-bottom:1px solid var(--hair-ink); }
.arch__link{
  position:relative;
  display:grid;
  grid-template-columns:5ch 1fr auto 7ch;
  align-items:center; gap:clamp(12px,2vw,30px);
  padding:clamp(18px,2.2vw,30px) 0;
  overflow:hidden;
}
.arch__link::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--e-out);
}
.arch__link:hover::before,
.arch__link:focus-visible::before{ transform:scaleY(1); transform-origin:top; }

.arch__n{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--grey); transition:color .35s; }
.arch__t{
  font-size:clamp(1.5rem,3.4vw,3.1rem);
  font-weight:800; line-height:1; letter-spacing:-.03em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800;
  transition:transform .5s var(--e-out), color .35s var(--e-out);
}
.arch__c{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); }
.arch__y{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-align:right; color:var(--grey); }

.arch__link:hover .arch__t,
.arch__link:focus-visible .arch__t{ transform:translateX(clamp(10px,1.4vw,26px)); }
.arch__link:hover .arch__n,
.arch__link:focus-visible .arch__n{ color:var(--red); }

/* registo por preencher: honesto e deliberado */
.arch__row--next{ border-bottom-style:dashed; opacity:.62; }
.arch__next{
  display:grid; grid-template-columns:5ch 1fr auto;
  align-items:center; gap:clamp(12px,2vw,30px);
  padding:clamp(16px,2vw,26px) 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--grey);
}
.arch__next b{ color:var(--red); font-weight:400; }

@media (max-width:700px){
  .arch__link{ grid-template-columns:4ch 1fr; row-gap:.4rem; }
  .arch__c{ grid-column:2; }
  .arch__y{ grid-column:2; text-align:left; }
  .arch__link:hover .arch__t{ transform:none; }
}

/* imagem flutuante que segue o cursor */
.floatimg{
  position:fixed; top:0; left:0; z-index:5; pointer-events:none;
  width:min(300px,22vw); aspect-ratio:4/3;
  overflow:hidden;
  opacity:0;
  clip-path:inset(0 0 100% 0);
  transition:opacity .35s var(--e-out), clip-path .55s var(--e-io);
  display:none;
}
@media (pointer:fine) and (min-width:900px) and (prefers-reduced-motion: no-preference){
  .floatimg{ display:block; }
}
.floatimg.is-on{ opacity:1; clip-path:inset(0 0 0 0); }
.floatimg img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.06); }

/* ─────────────────────────── 09 · SOBRE ─────────────────────────────────── */

.about{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,32px);
  align-items:start;
}
.about__stage{ grid-column:1 / 8; position:relative; }
.about__body{ grid-column:8 / 13; display:flex; flex-direction:column; gap:1.5rem; padding-top:clamp(10px,3vw,50px); }

.about__statement{
  font-size:clamp(1.9rem,4.6vw,4.2rem);
  line-height:1.02; font-weight:800; letter-spacing:-.035em;
  font-variation-settings:'wdth' 94,'wght' 800;
  text-transform:uppercase;
}
.about__statement s{ text-decoration-color:var(--red); text-decoration-thickness:.08em; color:var(--grey); }
.about__statement em{
  font-family:var(--serif); font-style:italic; text-transform:none;
  font-weight:400; letter-spacing:-.01em; font-size:1.1em; color:var(--red);
}

.about__figure{ margin-top:clamp(28px,4vw,60px); width:min(100%,420px); }
/* Única fotografia a cores do site. A parede do retrato (#B33932) é da
   mesma família do vermelho da marca. Em vez de a matar a preto-e-branco,
   usamo-la como o momento quente da página. */
.about__figure img{
  width:100%; aspect-ratio:3/4; object-fit:cover;
  filter:saturate(1.12) contrast(1.05);
}
.about__figure figcaption{ margin-top:.7em; }

.about__lead{ font-size:clamp(15px,1.35vw,20px); line-height:1.48; max-width:38ch; }
.about__text{ font-size:clamp(14px,1.05vw,16.5px); line-height:1.55; color:#3a3733; max-width:40ch; }
.about__text em{ font-family:var(--serif); font-style:italic; font-size:1.2em; color:var(--ink); }

.facts{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(12px,1.6vw,26px);
  margin-top:clamp(14px,2vw,30px);
  padding-top:clamp(18px,2.4vw,34px);
  border-top:1px solid var(--hair-paper);
}
.facts__n{
  display:block;
  font-size:clamp(1.8rem,3.4vw,3.2rem);
  font-weight:800; line-height:1; letter-spacing:-.04em; color:var(--red);
  font-variation-settings:'wdth' 88,'wght' 800;
}
.facts__l{
  display:block; margin-top:.55em;
  font-family:var(--mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--grey); line-height:1.45;
}

@media (max-width:900px){
  .about__stage,.about__body{ grid-column:1 / -1; }
  .about__body{ padding-top:clamp(28px,6vw,50px); }
}

/* ─────────────────────────── 10 · COMPETÊNCIAS ──────────────────────────── */

.skills{ border-top:1px solid var(--hair-paper); }
.skills__row{
  display:grid;
  grid-template-columns:minmax(180px,3fr) 8fr;
  gap:clamp(14px,2vw,40px);
  align-items:baseline;
  padding:clamp(24px,3.2vw,48px) 0;
  border-bottom:1px solid var(--hair-paper);
}
.skills__key{
  font-size:clamp(1.5rem,3.2vw,2.9rem);
  font-weight:800; line-height:.95; letter-spacing:-.035em; text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 800;
}
.skills__val{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.4em 0; }
.skills__val span{
  position:relative;
  font-family:var(--mono); font-size:clamp(11px,.92vw,13.5px);
  letter-spacing:.05em;
  transition:color .3s var(--e-out);
}
/* O separador vive DENTRO do item, não posicionado em absoluto: assim
   acompanha-o na mudança de linha em vez de ficar à cabeça da linha. */
.skills__val span:not(:last-child)::after{
  content:'·'; color:var(--red); margin:0 .55em;
}
.skills__val span:hover{ color:var(--red); }

/* Nível de língua: anotação, não parte do nome. Fica mais claro e evita
   parecer que "Alemão básico" é o nome da língua. */
.skills__val i{
  font-style:normal;
  color:var(--grey);
  font-size:.9em;
}
.skills__val span:hover i{ color:inherit; }

/* A competência que não é técnica sai da grelha mono e aparece na serifa
   itálica, a vermelho: lê-se logo como sendo de outra natureza. */
.skills__val .skills__quote{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(20px, 1.9vw, 30px);
  letter-spacing:-.01em;
  line-height:1;
  color:var(--red);
  margin-right:.2em;
}
.skills__val .skills__quote:hover{ color:var(--ink); }

/* entrada escalonada dos itens */
.skills__row .skills__val span{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--e-out), transform .55s var(--e-out), color .3s;
}
.skills__row.in .skills__val span{ opacity:1; transform:none; }
.skills__row.in .skills__val span:nth-child(1){ transition-delay:.06s; }
.skills__row.in .skills__val span:nth-child(2){ transition-delay:.11s; }
.skills__row.in .skills__val span:nth-child(3){ transition-delay:.16s; }
.skills__row.in .skills__val span:nth-child(4){ transition-delay:.21s; }
.skills__row.in .skills__val span:nth-child(5){ transition-delay:.26s; }
.skills__row.in .skills__val span:nth-child(6){ transition-delay:.31s; }
.skills__row.in .skills__val span:nth-child(7){ transition-delay:.36s; }

@media (prefers-reduced-motion: reduce){
  .skills__row .skills__val span{ opacity:1 !important; transform:none !important; }
}
@media (max-width:700px){
  .skills__row{ grid-template-columns:1fr; gap:.9rem; }
}

/* ─────────────────────────── 10B · HOBBIES (ESTILHAÇOS) ─────────────────── */

/* O espaço é partido em sete polígonos com clip-path. Como o clip-path
   também recorta os eventos do rato, cada estilhaço só responde onde se vê,
   apesar de todos ocuparem a mesma caixa. */
.shards{
  position:relative;
  aspect-ratio:16/9;
  background:var(--ink-2);
  overflow:hidden;
  isolation:isolate;
}
/* Em ecrã estreito, 16:9 daria sete faixas de 30px. A caixa passa a alta
   para cada peça ter altura que se leia. Tem de bater certo com o
   breakpoint de 820px do JS, que troca o conjunto de polígonos. */
@media (max-width:820px){
  .shards{ aspect-ratio:3/4; }
  .shard__name{ font-size:clamp(1.2rem, 5.2vw, 2rem); }
}
.shards__stage{ position:absolute; inset:0; }

.shard{
  position:absolute; inset:0;
  display:block; width:100%; height:100%;
  background:var(--ink-2);
  color:var(--on-ink);
  text-align:left;
  overflow:hidden;
  transition:filter .5s var(--e-out);
}

/* a geometria: sete peças que encaixam sem folgas */
.shard--1{ clip-path:polygon(0% 0%,   40% 0%,   36% 30%,  0% 44%); }
.shard--2{ clip-path:polygon(40% 0%,  68% 0%,   70% 46%,  36% 30%); }
.shard--3{ clip-path:polygon(68% 0%,  100% 0%,  100% 34%, 70% 46%); }
.shard--4{ clip-path:polygon(70% 46%, 100% 34%, 100% 100%, 54% 100%); }
.shard--5{ clip-path:polygon(36% 30%, 70% 46%,  54% 100%, 30% 66%); }
.shard--6{ clip-path:polygon(0% 44%,  36% 30%,  30% 66%,  0% 100%); }
.shard--7{ clip-path:polygon(30% 66%, 54% 100%, 0% 100%); }

/* Média. A posição e o tamanho vêm do JavaScript: é a caixa envolvente do
   polígono, não a secção toda. Sem isso a imagem aparecia muito ampliada. */
.shard__media{ position:absolute; overflow:hidden; }
.shard__media img,
.shard__media video{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.08) brightness(.72);
  transform:scale(1);
  transition:filter .55s var(--e-out), transform .9s var(--e-out);
}

/* Véu por cima da fotografia. Sem isto o nome desaparecia em cima de
   imagens claras, e não há como prever o que vai ser colocado em cada peça. */
.shard:not(.shard--empty) .shard__media::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(11,11,11,.66) 0%, rgba(11,11,11,.34) 62%, rgba(11,11,11,.52) 100%);
}

/* sem média ainda: tom sólido com um leve degradê, nunca uma caixa vazia */
.shard--empty .shard__media{
  background:var(--tone, #161616);
}

/* etiquetas em repouso: número e nome pequeno, para nunca parecer vazio */
.shard__tag{
  position:absolute; z-index:2;
  transform:translate(-50%,-50%);
  display:flex; flex-direction:column; gap:.3em;
  font-family:var(--mono); font-size:clamp(9px,.68vw,11px);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-ink);
  white-space:nowrap;
  text-shadow:0 1px 10px rgba(11,11,11,.8);
  transition:opacity .4s var(--e-out), transform .5s var(--e-out);
}
.shard__num{ color:var(--red); }

/* nome grande: entra ao passar o cursor ou ao receber foco */
.shard__name{
  position:absolute; z-index:3;
  font-weight:800; line-height:.9; letter-spacing:-.035em;
  text-transform:uppercase;
  font-size:clamp(1.1rem, 2.6vw, 2.9rem);
  font-variation-settings:'wdth' 84,'wght' 800;
  opacity:0;
  transform:translate(-50%, calc(-50% + 14px));
  transition:opacity .42s var(--e-out), transform .5s var(--e-out);
  width:max-content; max-width:min(76%, 260px);
  text-align:center;
  pointer-events:none;
  text-shadow:0 2px 14px rgba(11,11,11,.85);
}
.shard__note{
  display:block; margin-top:.5em;
  font-family:var(--mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:400; color:var(--red);
  letter-spacing:.14em;
}

.shard:hover .shard__media img,
.shard:hover .shard__media video,
.shard:focus-visible .shard__media img,
.shard:focus-visible .shard__media video{
  filter:grayscale(0) contrast(1) brightness(1);
  transform:scale(1.05);
}
.shard:hover .shard__name,
.shard:focus-visible .shard__name{ opacity:1; transform:translate(-50%,-50%); }
.shard:hover .shard__tag,
.shard:focus-visible .shard__tag{ opacity:0; transform:translate(-50%, calc(-50% - 10px)); }

/* entrada escalonada: as peças acendem uma a uma, como um vidro a estalar */
.shard{ opacity:0; }
.shards.in .shard{
  opacity:1;
  transition:opacity .6s var(--e-out) var(--sd, 0s), filter .5s var(--e-out);
}

/* Sem hover (ecrã tátil) o nome grande nunca apareceria e a média ficava
   sempre a cinzento. Aí mostra-se tudo de uma vez. */
@media (hover: none){
  .shard__tag{ display:none; }
  .shard__name{ opacity:1; transform:translate(-50%,-50%); }
  .shard__media img, .shard__media video{
    filter:grayscale(0) contrast(1) brightness(.92);
  }
}

@media (prefers-reduced-motion: reduce){
  .shards.in .shard{ transition:none; opacity:1; }
}

.shard--empty .shard__media{ transition:background-color .5s var(--e-out); }
.shard--empty:hover .shard__media{ background:#241A19; }

/* linhas de corte por cima: é o que faz os estilhaços lerem-se separados */
.shards__cuts{
  position:absolute; inset:0; z-index:4;
  width:100%; height:100%;
  pointer-events:none;
  color:var(--ink);
}

/* contorno vermelho do estilhaço sob o cursor */
.shards__edge{
  position:absolute; inset:0; z-index:5;
  width:100%; height:100%;
  pointer-events:none;
  color:var(--red);
  opacity:0;
  transition:opacity .3s var(--e-out);
}
.shards.is-hot .shards__edge{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .shard, .shard__media img, .shard__media video,
  .shard__name, .shard__tag, .shards__edge{ transition:none; }
}

/* ─────────────────────────── 11 · CONTACTO ──────────────────────────────── */

.sec--contact{ padding-bottom:clamp(60px,7vw,110px); }

.contact__call{
  font-size:clamp(2.8rem,10.2vw,10rem);
  line-height:.86; font-weight:800; letter-spacing:-.045em;
  text-transform:uppercase;
  font-variation-settings:'wdth' 98,'wght' 800;
  margin-bottom:clamp(40px,6vw,100px);
}
.contact__call em{
  font-family:var(--serif); font-style:italic; text-transform:none;
  font-weight:400; letter-spacing:-.02em; color:var(--red); font-size:1.05em;
}

.contact__list{ border-top:1px solid var(--hair-ink); }
.contact__list li{ border-bottom:1px solid var(--hair-ink); }
.contact__list a{
  position:relative; z-index:0;
  display:grid; grid-template-columns:9ch 1fr auto;
  align-items:center; gap:clamp(12px,2vw,30px);
  padding:clamp(18px,2.4vw,34px) clamp(10px,1.4vw,22px);
  overflow:hidden;
}
.contact__list a::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--red);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--e-io);
}
.contact__list a:hover::before,
.contact__list a:focus-visible::before{ transform:scaleX(1); }

.contact__k{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--grey); transition:color .35s; }
.contact__v{
  font-size:clamp(1.3rem,3.2vw,2.8rem);
  font-weight:800; line-height:1; letter-spacing:-.03em;
  font-variation-settings:'wdth' 88,'wght' 800;
  transition:transform .5s var(--e-out);
}
.contact__ar{ font-size:clamp(1rem,1.8vw,1.7rem); transition:transform .5s var(--e-out); }

.contact__list a:hover .contact__k,
.contact__list a:focus-visible .contact__k{ color:var(--paper); }
.contact__list a:hover .contact__v,
.contact__list a:focus-visible .contact__v{ transform:translateX(clamp(8px,1.2vw,20px)); }
.contact__list a:hover .contact__ar,
.contact__list a:focus-visible .contact__ar{ transform:translate(6px,-6px); }

@media (max-width:640px){
  .contact__list a{ grid-template-columns:1fr auto; row-gap:.3rem; }
  .contact__k{ grid-column:1 / -1; }
}

/* ─────────────────────────── 12 · RODAPÉ ────────────────────────────────── */

.foot{
  position:relative; z-index:2;
  background:var(--ink); color:var(--on-ink); --grey:var(--grey-ink);
  border-top:1px solid var(--hair-ink);
  padding:clamp(22px,2.6vw,38px) var(--gut);
  display:flex; align-items:center; justify-content:space-between; gap:1.4rem;
  flex-wrap:wrap;
}
.foot__name{
  font-weight:800; text-transform:uppercase; letter-spacing:-.02em;
  font-size:clamp(14px,1.1vw,17px);
  font-variation-settings:'wdth' 92,'wght' 800;
}
.foot__top{
  font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .3s;
}
.foot__top:hover{ color:var(--red); }

/* ─────────────────────────── 13 · DETALHE DE PROJETO ────────────────────── */

.pd{ position:fixed; inset:0; z-index:200; }
.pd[hidden]{ display:none; }

.pd__sheet{
  position:absolute; inset:0;
  background:var(--ink); color:var(--on-ink); --grey:var(--grey-ink);
  clip-path:inset(0 0 100% 0);
  transition:clip-path .72s var(--e-io);
}
.pd.is-open .pd__sheet{ clip-path:inset(0 0 0 0); }

.pd__scroll{
  height:100%; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(70px,9vh,120px) var(--gut) clamp(50px,7vw,110px);
  -webkit-overflow-scrolling:touch;
}

.pd__close{
  position:absolute; z-index:3;
  top:clamp(18px,2.4vw,34px); right:var(--gut);
  display:flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.pd__close i{
  position:relative; display:block; width:16px; height:16px;
  transition:transform .5s var(--e-io);
}
.pd__close i::before,.pd__close i::after{
  content:''; position:absolute; top:50%; left:0; width:100%; height:1.5px;
  background:var(--red);
}
.pd__close i::before{ transform:rotate(45deg); }
.pd__close i::after{ transform:rotate(-45deg); }
.pd__close:hover i{ transform:rotate(90deg); }

/* entrada escalonada do conteúdo */
.pd__head,.pd__figure,.pd__grid,.pd__tech,.pd__next{
  opacity:0; transform:translateY(26px);
  transition:opacity .6s var(--e-out), transform .7s var(--e-out);
}
.pd.is-open .pd__head { opacity:1; transform:none; transition-delay:.30s; }
.pd.is-open .pd__figure{ opacity:1; transform:none; transition-delay:.38s; }
.pd.is-open .pd__grid { opacity:1; transform:none; transition-delay:.46s; }
.pd.is-open .pd__tech { opacity:1; transform:none; transition-delay:.54s; }
.pd.is-open .pd__next { opacity:1; transform:none; transition-delay:.62s; }

@media (prefers-reduced-motion: reduce){
  .pd__sheet{ transition:none; }
  .pd__head,.pd__figure,.pd__grid,.pd__tech,.pd__next{ opacity:1; transform:none; transition:none; }
}

.pd__head{ border-bottom:1px solid var(--hair-ink); padding-bottom:clamp(22px,3vw,44px); }
.pd__num{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--red); display:block; margin-bottom:.9em; }
.pd__title{
  font-size:clamp(2.6rem,8.6vw,8rem);
  line-height:.86; font-weight:800; letter-spacing:-.04em; text-transform:uppercase;
  font-variation-settings:'wdth' 94,'wght' 800;
}
.pd__tagline{
  margin-top:.7em; max-width:34ch;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(18px,2.2vw,32px); line-height:1.25; color:var(--paper-2);
}

/* 4:3 e largura limitada: os desenhos técnicos entram inteiros e a imagem
   fica alinhada à esquerda, como uma prancha, não como um banner. */
.pd__figure{
  margin:clamp(30px,4vw,64px) 0;
  background:var(--ink-2); overflow:hidden;
  max-width:min(100%, 920px);
}
.pd__figure img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
/* Chapa de marca: sem imagem a preencher, a figura precisa de altura própria
   senão colapsa numa tira. */
.pd__figure{ display:grid; place-items:center; }
.pd__figure--mark{ position:relative; aspect-ratio:16/10; background:var(--ink); }
.pd__figure--mark::before{
  content:''; position:absolute; inset:14%;
  border:1px solid var(--hair-ink);
}
.pd__figure img.is-mark{
  position:relative;
  width:auto; height:auto; aspect-ratio:auto;
  max-width:min(34%, 250px); max-height:56%;
  object-fit:contain; background:transparent;
}

.pd__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2vw,32px);
}
.pd__spec{ grid-column:1 / 4; display:flex; flex-direction:column; gap:1.1rem; }
.pd__specrow{ display:flex; flex-direction:column; gap:.35em; padding-bottom:.9rem; border-bottom:1px solid var(--hair-ink); }
.pd__specrow > span:last-child{
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
}
.pd__specrow[hidden]{ display:none; }

/* ligação para o projeto que está online */
.pd__specrow--link a{
  display:inline-flex; align-items:baseline; gap:.5em;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.04em;
  color:var(--red);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--e-out);
}
.pd__specrow--link a i{
  font-style:normal; display:inline-block;
  transition:transform .4s var(--e-out);
}
.pd__specrow--link a:hover{ border-bottom-color:var(--red); }
.pd__specrow--link a:hover i{ transform:translate(3px,-3px); }
.pd__body{ grid-column:5 / 12; display:flex; flex-direction:column; gap:1.15em; }
.pd__body p{ font-size:clamp(15px,1.2vw,18px); line-height:1.6; color:var(--paper-2); }
.pd__body p:first-child{
  font-size:clamp(17px,1.5vw,22px); color:var(--paper);
}

.pd__tech{ margin-top:clamp(36px,4.6vw,80px); padding-top:clamp(20px,2.4vw,34px); border-top:1px solid var(--hair-ink); }
.pd__tech .tag{ color:var(--red); }
.pd__tech ul{ display:flex; flex-wrap:wrap; gap:.5em; margin-top:1.1em; }
.pd__tech li{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  padding:.55em .85em; border:1px solid var(--hair-ink);
  transition:border-color .3s, color .3s;
}
.pd__tech li:hover{ border-color:var(--red); color:var(--red); }

.pd__next{ margin-top:clamp(44px,5.4vw,90px); border-top:1px solid var(--hair-ink); padding-top:clamp(20px,2.4vw,34px); }
.pd__next button{ display:flex; flex-direction:column; gap:.5em; text-align:left; }
.pd__nextname{
  font-size:clamp(1.8rem,4.4vw,3.6rem);
  font-weight:800; line-height:1; letter-spacing:-.035em; text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 800;
  transition:color .35s var(--e-out), transform .5s var(--e-out);
}
.pd__next button:hover .pd__nextname{ color:var(--red); transform:translateX(.12em); }

@media (max-width:860px){
  .pd__spec{ grid-column:1 / -1; }
  .pd__body{ grid-column:1 / -1; }
}

.noscript{ padding:2rem 0; color:var(--grey); font-family:var(--mono); font-size:13px; }

/* ─────────────────────────── 14 · HERO / MOBILE ─────────────────────────── */

@media (max-width:860px){
  .hero-wrap{ height:142svh; }
  .hero{
    min-height:520px;
    --name-fs:     clamp(2.6rem, 24vw, 13rem);
    /* no telemóvel a mesma imagem entra em corte vertical: um ecrã alto
       pede uma chapa alta */
    --photo-ar:    .8;
    --photo-w:     min(72vw, 380px, 36svh);
    /* o nome ancora-se à base, como no desktop: assim nunca cai em cima do
       rodapé quando a janela é larga mas baixa */
    --name-bottom: clamp(150px, 20svh, 210px);
  }

  .hero__meta{ top:calc(56px + 2svh); gap:.25em; }
  .hero__meta--tr{ display:none; }

  .hero__figure{
    right:var(--gut); left:auto;
    width:var(--photo-w);
    transform:translate3d(0, calc(var(--p) * -3svh), 0)
              scale(calc(1 - var(--p) * .12));
  }
  .hero__figure figcaption{ display:none; }

  .hero__name{
    letter-spacing:-.045em;
    font-variation-settings:'wdth' 104,'wght' 800;
    transform:translate3d(0, calc(var(--p) * 3svh), 0);
  }

  .hero__foot{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .hero__line{ text-align:left; max-width:28ch; }
  .hero__sweep{ width:4px; }
}

/* telemóveis baixos */
@media (max-width:860px) and (max-height:700px){
  .hero{
    --photo-ar:.9;
    --photo-w:min(56vw,270px,34svh);
    --name-fs:clamp(2.4rem,16vw,5rem);
    --name-bottom:clamp(128px,18svh,170px);
  }
}

/* desktop com pouca altura */
@media (min-width:861px) and (max-height:780px){
  .hero{
    --name-fs:clamp(3.2rem, 18vw, 16rem);
    --name-bottom:clamp(74px, 11svh, 110px);
    --photo-w:min(clamp(220px, 34vw, 520px), 58svh);
  }
}