@font-face {
  font-family: 'ABC ROM Mono';
  src: url('../fonts/ABCROMMono-Regular-Trial.otf') format('opentype');
}

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Bold.ttf') format('truetype');
  font-weight: bold;
}

@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Oblique.ttf') format('truetype');
  font-style: italic;
}

:root {
  --font-mono: 'ABC ROM Mono', monospace;
  --font-body: 'Helvetica', Arial, sans-serif;
}

body {
  font-family: var(--font-body);
  font-size: 14px;
  color: #515151;
  line-height: 1.5;
  background: linear-gradient(to bottom, #ffffff 0%, #585858 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

header {
  color: #B0B0B0;
}

/* Quando a secção Work está ativa (ou é a página default), o link "Work" fica verde */
html:not(:has(:target)) header nav a,
body:has(#work:target) header nav a {
  color: #00FF62;
}

/* Quando a secção About está ativa, o nome fica verde */
body:has(#about:target) header .about a.name,
body:has(#about:target) header .about p {
  color: #00FF62;
}

.project-credits a {
  color: #00FF62;
}

/* color: #00FF62; */

.mono, header nav, header .contact, .year, .divider, .date, .categories, .label {
  font-family: var(--font-mono);
  font-size: 12px;
}


/* Reset básico — remove espaçamentos por defeito do browser */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


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

/* Sistema de grid de 12 colunas */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  padding: 0 30px;
}

/* Posicionamento dos blocos dentro do cabeçalho */
header .about {
  grid-column: 1 / 3;
}

header nav {
  grid-column: 3 / 6;
}

header .contact {
  grid-column: 10 / 13;
  text-align: right;
}

header.grid {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: transparent;
  z-index: 10;
  padding-top: 30px;
  padding-bottom: 20px;
}

main {
  padding-top: 0; /* remove o padding genérico daqui */
}


/* Esconde todas as secções por defeito */
section {
  display: none;
}

/* Mostra a secção que corresponde ao link clicado (#work, #about, #project-...) */
section:target {
  display: block;
}


#about:target {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  padding: 130px 30px 0;
}

.about-photo-block {
    grid-column: 3 / 6;
  grid-row: 1;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 10px;
}


.about-photo-block img {
  grid-column: 1 / 4;
}

.about-photo-block .about-caption {
  grid-column: 1 / 4;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

.cv-block {
  grid-column: 7 / 11;
  grid-row: 1;
}

.involvement-block {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Nome — Helvetica Bold */
header .about a.name {
  font-size: 14px; /* Helvetica Bold — ajusta o valor */
  font-family: var(--font-body);
  font-weight: bold;
  text-decoration: underline;
}

/* Descrição por baixo do nome — ABC ROM Mono */
header .about p {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

/* Work — sem sublinhado */
header nav a {
  font-size: 12px; /* ajusta consoante a fonte que aplicaste ao Work */
  text-decoration: none;
}

/* Find me + links — Helvetica Regular */
header .contact {
  font-size: 14px; /* Helvetica Regular */
  font-family: var(--font-body);
  font-weight: normal;
  line-height: 1.3;
}

header a {
  color: #B0B0B0;
}

header .contact p:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
}

.cv-section h2,
.cv-entry .date,
.involvement-block h2,
.involvement-item .caption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

.cv-section {
  margin-bottom: 60px; /* equivalente a ~3 linhas de espaço, ajusta conforme o resultado visual */
}

.cv-entry {
  margin-bottom: 20px; /* equivalente a ~1 linha de espaço */
}

.cv-section h2 {
  margin-bottom: 23px;
}
.cv-section h2 {
  font-size: 12px; /* já deve estar, se aplicaste a fonte mono antes */
  line-height: 1.3;
}

.cv-entry .date {
  font-size: 12px; /* mono */
}

.cv-entry p {
  font-size: 14px; /* Helvetica — o texto normal de cada entrada */
  line-height: 1.3;
}

.involvement-item img {
  margin-bottom: 10px;
  aspect-ratio: 3 / 2; /* ajusta consoante a proporção real da about-1.webp */
  object-fit: cover;
  width: 100%;
}

.involvement-item {
  margin-bottom: 24px;
}

.involvement-block h2 {
  grid-column: 1 / 3;
  margin-bottom: 10px;
}

a {
  color: inherit;
  text-decoration: underline;
}

/*
a:hover {
 background: linear-gradient(to right, #00bbff, #d0e92d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-decoration: underline;
}
*/

footer {
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 30px 30px;
   font-family: var(--font-mono);
  font-size: 12px;
   color: #9d9d9d;
}





/* Páginas dos projetos */

/* Container principal de cada página de projeto — grid de 12 colunas */
main section[id^="project-"] {
  grid-template-columns: repeat(12, 1fr);
  gap: 10px;
  padding: 0 30px;
  
}



main section[id^="project-"]:target {
  display: grid;
}


/* Texto: título + sinopse */
.project-body {
  grid-column: 3 / 7;
  line-height: 1.2;
  padding-bottom: 30px;
}


/* Título do projeto — garantir tamanho maior e peso bold */
.project-body h1 {
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.project-body p {
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 14px;
  text-indent: 2em;
}

.project-meta-credits-wrapper {
  grid-column: 8 / 13;
  display: grid;
  grid-template-columns: subgrid;
}

/* Metadata: ano, categorias, objects */
.project-meta {
  grid-column: 1 / 3;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

/* Créditos */
.project-credits {
  grid-column: 4 / 6;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}

/* Galeria — 3 imagens por linha, ocupando colunas 3 a 12 */
.project-gallery {
  grid-column: 3 / 13;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}


/* Metadata — todos os elementos no mesmo tamanho (13px) */
.project-meta,
.project-meta p {
  font-family: var(--font-mono);
  font-size: 12px;
}

/* Espaço entre categorias e "Objects:" */
.project-meta .categories {
  margin-bottom: 24px;
}

.project-meta .label {
  margin-bottom: 5px;
}

/* Créditos — espaço entre cada linha */
.project-credits p {
  margin-bottom: 16px;
}

.project-credits p:last-child {
  margin-bottom: 0;
}


.project-gallery {
  grid-column: 3 / 13;
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 10 colunas dentro da galeria, para teres mais controlo fino */
  gap: 10px;
}

.gallery-full { grid-column: span 10; }
.gallery-eight { grid-column: span 8; }
.gallery-seven { grid-column: span 7; }
.gallery-large { grid-column: span 6; }
.gallery-medium { grid-column: span 5; }
.gallery-small { grid-column: span 4; }
.gallery-third { grid-column: span 3; }
.gallery-two { grid-column: span 2; }






/* Landing Page */



.project {
  display: grid;
  grid-column: 1 / 13;
  grid-template-columns: subgrid;
  margin-bottom: 150px; /* espaço entre cada projeto — ajusta conforme o resultado visual */
}



.project-info {
  grid-column: 11 / 13;
}

.project-info .year {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
  margin-bottom: 10px;
  margin-top: 15px;
}

.project-info h2 {
  font-family: var(--font-body);
  font-weight: bold;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 10px;
}

.project-info .synopsis {
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.project-info .divider {
  font-family: var(--font-mono);
  font-weight: bold;
  color: #515151;
  margin-bottom: 5px;
  margin-top: 25px;
}

.project-info .categories {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.3;
}


.project {
  display: grid;
  grid-column: 1 / 13;
  grid-template-columns: subgrid;
  margin-bottom: 80px;
}



.project-info {
  grid-column: 11 / 13;
}

#about:target,
main section[id^="project-"]:target {
  padding-top: 130px;
}

/* ===== CORREÇÃO FINAL — LANDING PAGE ===== */



.project {
  display: grid !important;
  grid-column: 1 / 13 !important;
  grid-template-columns: subgrid !important;
  margin-bottom: 80px !important;
}



.project-info {
  grid-column: 11 / 13 !important;
  min-width: 0 !important;
  overflow-wrap: break-word !important;
}

.project-info .synopsis {
  max-width: 100% !important;
}

html:not(:has(:target)) #work,
#work:target {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 10px !important;
  padding: 130px 30px 60px !important;
}


.project {
  display: grid;
  grid-column: 1 / 13;
  grid-template-columns: subgrid;
  margin-bottom: 80px;
}

.project-images {
  grid-column: 1 / 10; /* as 9 colunas que pediste */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
}

.landing-img-3 { grid-column: span 3; }
.landing-img-2 { grid-column: span 2; }

.project-info {
  grid-column: 11 / 13;
}

.project-images {
  grid-column: 3 / 10;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
}

.landing-img-5 { grid-column: span 5; } 
.landing-img-4 { grid-column: span 4; } 
.landing-img-3 { grid-column: span 3; }
.landing-img-2 { grid-column: span 2; }

.project-images {
  grid-column: 1 / 10;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 10px;
}

.landing-img-5 { grid-column: span 5; } 
.landing-img-4 { grid-column: span 4; } 
.landing-img-3 { grid-column: span 3; }
.landing-img-2 { grid-column: span 2; } 


.about-photo-block .full-cv-link {
  grid-column: 1 / 3; /* mesma posição que já tens em .about-caption */
  font-family: var(--font-mono);
  font-size: 12px;
  color: #00FF62;
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {

  header.grid {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
  }

  header .about,
  header nav,
  header .contact {
    grid-column: unset;
    text-align: left;
  }

  /* Landing page mobile */
  html:not(:has(:target)) #work,
  #work:target {
    display: block;
    padding: 30px;
  }

  .project {
    display: block;
    margin-bottom: 60px;
  }

  .project img,
  .project video,
  .project-info {
    grid-column: unset;
    width: 100%;
  }

  .project-info {
    margin-top: 20px;
  }

  .project {
    display: block !important;
    grid-template-columns: none !important;
    margin-bottom: 60px;
  }

  .project img,
  .project video,
  .project-info {
    grid-column: unset !important;
    display: block;
    width: 100%;
  }

  .project-info h2,
  .project-info p {
    width: 100%;
  }


  /* Página de projeto mobile */
  main section[id^="project-"]:target {
    display: block !important;
    padding: 30px;
  }

  .project-body,
  .project-meta,
  .project-credits,
  .project-gallery {
    grid-column: unset !important;
    width: 100%;
  }

  .project-meta {
    margin-bottom: 5px; /* espaço entre a sinopse e a metadata */
  }

  .project-credits {
    margin-top: 45px; /* espaço entre a metadata e os créditos */
  }

  .project-gallery {
    grid-template-columns: 1fr !important;
  }

  .project-gallery [class^="gallery-"] {
    grid-column: unset !important;
  }

  .project-gallery {
    margin-top: 30px;
  }

 .project-meta-credits-wrapper {
    display: block !important;
    grid-template-columns: none !important;
  }

  .project-credits {
    margin-top: 30px;
  }

  header.grid {
    padding: 15px; /* era 30px */
  }

  html:not(:has(:target)) #work,
  #work:target {
    padding: 15px; /* era 30px */
  }

  main section[id^="project-"]:target {
    padding: 15px; /* era 30px */
  }

  .project-body {
    margin-top: 20px; /* ajusta este valor conforme o espaço que queres */
  }

  main section[id^="project-"]:target {
    display: block !important;
    padding: 10px;
  }

  .project-meta-credits-wrapper {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px;
    margin-top: 30px;
  }

   #about:target {
    padding: 15px !important;
  }

  header.grid,
  html:not(:has(:target)) #work,
  #work:target,
  #about:target,
  main section[id^="project-"]:target {
    padding: 15px !important;
  }

  #about:target {
    display: block !important;
  }

  .about-photo-block,
  .cv-block,
  .involvement-block {
    grid-column: unset !important;
    display: block !important;
    width: 100%;
  }

  .about-photo-block img,
  .about-photo-block .about-caption {
    grid-column: unset !important;
  }

  .involvement-block {
    grid-template-columns: 1fr !important;
  }

  .about-photo-block img {
    margin-bottom: 15px; /* ajusta o valor conforme preferires */
  }

  .about-photo-block {
    margin-bottom: 80px; /* ajusta o valor conforme preferires */
  }

 .project-info h2 a {
    display: block;
    text-align: center;
    border: 1px solid #515151;
    border-radius: 20px;
    padding: 10px 16px;
    text-decoration: none;
  }

  .project-images img,
  .project-images video {
    display: none;
  }

  .project-images img:first-child,
  .project-images video:first-child {
    display: block;
  }

  .project-images {
    grid-template-columns: 1fr !important;
  }

  .project-images img:first-child,
  .project-images video:first-child {
    display: block;
    width: 100%;
    grid-column: unset !important;
  }
}