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

html,
body {
  min-height: 100%;
  background: #d9d9d9;

  overflow-x: hidden;
  overflow-y: auto;
}

/* ===================== */
/* VARIÁVEIS */
/* ===================== */

:root {
  --gap: clamp(0.3rem, 0.3vw, 0.6rem);
  --page-padding: clamp(0.3rem, 0.3vw, 0.6rem);
  --background: #d9d9d9;
}

/* MARGEM TOP SEMPRE VISÍVEL */

body::before {
  content: "";

  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  height: var(--page-padding);

  background: var(--background);

  z-index: 90;
  pointer-events: none;
}

/* ===================== */
/* GRID BASE */
/* ===================== */

.layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);

  gap: var(--gap);
  padding: var(--page-padding);

  min-height: 100vh;
}

/* ===================== */
/* FONTS */
/* ===================== */

.text,
.body p {
  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;
}

.h2,
.place-title,
.immigration-box,
.invisible-box {
  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 400;
}

/* ===================== */
/* COLUNAS 1–2 FIXAS */
/* ===================== */

.title-column {
  grid-column: 1 / 3;
  grid-row: 1 / 3;

  position: fixed;
  top: var(--page-padding);
  left: var(--page-padding);

  width: calc(
    ((100vw - (var(--page-padding) * 2) - (var(--gap) * 11)) / 12 * 2)
    + var(--gap)
  );

  height: calc(100vh - (var(--page-padding) * 2));
  overflow: hidden;

  z-index: 100;

  display: grid;
  grid-template-columns: 0.38fr 1.62fr;
  gap: var(--gap);

  align-items: start;
}

/* ESTILOS COMUNS DOS TEXTOS VERTICAIS */

.immigration-box,
.invisible-box {
  background: #fff;

  margin: 0;

  width: 100%;
  height: fit-content;

  writing-mode: vertical-rl;

  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}

/* BOX 1 — IMMIGRATION IN PORTUGAL */

.immigration-box {
  grid-column: 1 / 2;

  padding: 0.3rem 0.02rem 0.3rem 0.12rem;

  font-size: clamp(2.6rem, 2.4vw, 4.8rem);
  line-height: 1;

  transform: rotate(180deg);
}

/* BOX 2 — INVISIBLE LABOUR ATLAS */

.invisible-box {
  grid-column: 2 / 3;

  padding: 0 0 0 0.12rem;

 font-size: clamp(6.15rem, 5.7vw, 11rem);
 line-height: 0.878em;

  transform: rotate(180deg);

  text-align: right;
}

/* ===================== */
/* COLUNAS 3–5 */
/* ===================== */

.text-column {
  grid-column: 3 / 6;
  grid-row: 1;

  height: calc(100vh - (var(--page-padding) * 2));
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* BASE BOX */

.box {
  background: #fff;
  width: 100%;
}

/* TÍTULOS PROJECT / INTERVIEWS */

.h2 {
  margin: 0;
  padding: 0;

  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 400;

  font-size: clamp(1.4rem, 1.3vw, 2.4rem);
  line-height: 1;

  transform: translateY(0.03rem);
}

/* BODY */

.body p {
  margin: 0;

  font-size: clamp(1.05rem, 0.95vw, 1.8rem);
  line-height: 1.238em;
}

/* ESPAÇO ENTRE PARÁGRAFOS */

.body p + p {
  margin-top: 0.3rem;
}

/* PARÁGRAFO INDENTADO */

.indent-paragraph {
  text-indent: 2rem;
}

/* CAIXAS DE TEXTO CORRIDO */

#project-text,
#interviews-text {
  padding-bottom: 0;
}

/* ESPAÇO ENTRE PROJECT E INTERVIEWS */

#project-text {
  margin-bottom: 0.75rem;
}

/* CAIXAS DOS TÍTULOS */

#project-box,
#interviews-box {
  padding-bottom: 0;
}

/* ===================== */
/* AUDIO */
/* ===================== */

.audio-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap);

  margin-top: 0;
}

.interview-item {
  background: #fff;
  width: 100%;
}

.interview-info {
  padding: 0;

  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;

  font-size: clamp(1.05rem, 0.95vw, 1.8rem);
  line-height: 1.238em;

  margin-bottom: 0.3rem;
}

/* PLAYER PRETO */

.interview-item .custom-audio {
  display: block;
  width: 100%;
  margin: 0;
}

.custom-audio {
  width: 100%;
  height: 32px;

  background: #000;

  border: none;
  border-radius: 0;
}

/* PAINEL INTERNO */

.custom-audio::-webkit-media-controls-panel {
  background-color: #000 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* BOTÃO PLAY */

.custom-audio::-webkit-media-controls-play-button {
  filter: invert(1);
  margin-left: -0.5rem;
}

/* OUTROS BOTÕES */

.custom-audio::-webkit-media-controls-mute-button,
.custom-audio::-webkit-media-controls-volume-slider {
  filter: invert(1);
}

/* TIMELINE */

.custom-audio::-webkit-media-controls-timeline {
  filter: invert(1);

  margin-left: 0.6rem;
  margin-right: 0.3rem;
}

/* NÚMEROS */

.custom-audio::-webkit-media-controls-current-time-display,
.custom-audio::-webkit-media-controls-time-remaining-display {
  color: #fff !important;
}

/* FOCO */

.custom-audio:focus {
  outline: none;
}

/* REMOVER SOMBRA/CAMADA INTERNA */

.custom-audio::-webkit-media-controls-enclosure {
  box-shadow: none !important;
  background: transparent !important;
}

/* ===================== */
/* COLUNAS 6–12 */
/* ===================== */

.media-column {
  grid-column: 6 / 13;
  grid-row: 1;

  height: calc(100vh - (var(--page-padding) * 2));
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* SECÇÕES */

.media-section {
  background: #000;
  color: #fff;

  padding-top: 0.3rem;
  padding-right: 0.3rem;
  padding-bottom: 0.5rem;
  padding-left: 0.3rem;

  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* CADA GRUPO = DESCRIÇÃO + IMAGEM */

.media-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--gap);

  align-items: start;

  padding-bottom: 0;
}

/* COLUNA ESQUERDA */

.media-info {
  grid-column: 1 / 3;

  display: flex;
  flex-direction: column;

  height: 100%;
}

/* TÍTULO DAS IMAGENS */

.place-title {
  margin: 0;
  padding: 0;

 font-size: clamp(2.2rem, 2vw, 4rem);
 line-height: 1em;

  align-self: start;

  transform: translateY(-0.35rem);
}

/* DESCRIÇÃO DAS IMAGENS */

.image-desc {
  margin-top: auto;

  color: #fff;

  font-family: "nimbus-sans", sans-serif;
  font-weight: 400;

  font-size: clamp(0.9rem, 0.8vw, 1.5rem);
  line-height: 1em;

  transform: translateY(0.1rem);
}

/* IMAGEM */

.image-column {
  grid-column: 3 / 8;
}

.image-column img {
  width: 100%;
  display: block;
}

/* ===================== */
/* VÍDEO FINAL */
/* ===================== */

.video-section {
  grid-column: 3 / 13;
  grid-row: 2;

  background: #000;
  padding: 0.3rem;

  margin-top: 0.05rem;
  margin-bottom: 0;
}

.video-box {
  width: 100%;
  background: #000;
}

.video-box video {
  width: 100%;
  display: block;
}

/* ===================== */
/* CRÉDITOS */
/* ===================== */

.credits-section {
  grid-column: 3 / 13;
  grid-row: 3;

  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--gap);

  margin-top: 0.3rem;

  transform: translateY(-0.1rem);
}

.credit-box {
  background: #fff;

  font-family: "nimbus-sans-extended", sans-serif;
  font-weight: 400;

  font-size: 1rem;
  line-height: 1;

  padding: 0 0.3rem 0.15rem 0.3rem;
}

.credit-rafael {
  grid-column: 1 / 4;
}

.credit-project {
  grid-column: 4 / 8;
}

.credit-university {
  grid-column: 8 / 11;
}


/* ===================== */
/* ===================== */
/* ===================== */

/* ===================================================== */
/* MOBILE — até 768px */
/* ===================================================== */

@media (max-width: 768px) {

  /* ===================== */
  /* BASE MOBILE */
  /* ===================== */

  :root {
    --mobile-padding: 0.3rem;
    --mobile-gap: 0.5rem;

    /* controla o espaço entre o título fixo e o primeiro bloco */
    --mobile-header-height: clamp(6.4rem, 29vw, 8rem);
  }

  html,
  body {
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: #d9d9d9;
  }

  body::before {
    display: none;
  }

  /* ===================== */
  /* LAYOUT MOBILE */
  /* ===================== */

  .layout {
    display: flex;
    flex-direction: column;
    gap: 0;

    padding-top: calc(var(--mobile-header-height) + var(--mobile-padding));
    padding-right: var(--mobile-padding);
    padding-bottom: var(--mobile-padding);
    padding-left: var(--mobile-padding);

    min-height: 100vh;
  }

  /* ===================== */
  /* TÍTULO FIXO */
  /* ===================== */

  .title-column {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    width: 100%;
    height: auto !important;
    min-height: 0;
    max-height: none;

    z-index: 500;

    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    background: #d9d9d9;

    padding-top: var(--mobile-padding);
    padding-right: var(--mobile-padding);
    padding-bottom: var(--mobile-padding);
    padding-left: var(--mobile-padding);

    border: none;
    border-bottom: 0.05rem solid #d9d9d9;
    box-shadow: none;

    overflow: visible;
  }

  .immigration-box,
  .invisible-box {
    width: 100%;
    height: auto;

    writing-mode: horizontal-tb;
    transform: none;

    background: #fff;

    display: block;

    margin: 0;

    text-align: left;

    border: none;
    box-shadow: none;
    outline: none;

    white-space: nowrap;
    overflow: hidden;
  }

  .immigration-box {
    font-size: clamp(1.25rem, 6.2vw, 1.75rem);
    line-height: 0.9;

    padding-top: 0;
    padding-right: 0.2rem;
    padding-bottom: 0.18rem;
    padding-left: 0.2rem;
  }

  .invisible-box {
    font-size: clamp(2.15rem, 11.6vw, 3.9rem);
    line-height: clamp(1.72rem, 9.1vw, 2.4rem);

    padding-top: 0;
    padding-right: 0.2rem;
    padding-bottom: 0.28rem;
    padding-left: 0.2rem;

    margin-bottom: 0;
  }

  /* ===================== */
  /* ORDEM MOBILE */
  /* ===================== */

  .video-section {
    order: 1;
  }

  .text-column {
    order: 2;
  }

  .media-column {
    order: 3;
  }

  .credits-section {
    order: 4;
  }

  /* ===================== */
  /* VÍDEO MOBILE */
  /* ===================== */

  .video-section {
    grid-column: auto;
    grid-row: auto;

    background: #000;

    padding: 0.2rem;

    margin: 0;
    margin-bottom: 0.8rem;
  }

  .video-box {
    width: 100%;
    background: #000;
  }

  .video-box video {
    width: 100%;
    aspect-ratio: 16 / 9;

    display: block;

    object-fit: contain;
    background: #000;
  }

  /* ===================== */
  /* TEXTO MOBILE */
  /* ===================== */

  .text-column {
    grid-column: auto;
    grid-row: auto;

    height: auto;
    overflow: visible;

    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .box {
    width: 100%;
    background: #fff;
  }

  .h2 {
    margin: 0;
    padding: 0;

    font-size: 1.1rem;
    line-height: 1.2rem;

    transform: translateY(-0.05rem);
  }

  .body p {
    margin: 0;

    font-size: 0.8rem;
    line-height: 0.9rem;
  }

  .body p + p {
    margin-top: 0.35rem;
  }

  .indent-paragraph {
    text-indent: 1.4rem;
  }

  #project-box {
    margin-bottom: 0.2rem;
    padding-bottom: 0;
  }

  #project-text {
    margin-bottom: 0.8rem;
  }

  #interviews-box {
    margin-bottom: 0.2rem;
    padding-bottom: 0;
  }

  #interviews-text {
    margin-bottom: 0.2rem;
  }

  /* ===================== */
  /* ÁUDIOS MOBILE */
  /* ===================== */

  .audio-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    margin-top: 0;
  }

  .interview-item {
    width: 100%;
    background: #fff;
  }

  .interview-info {
    padding: 0;

    font-family: "nimbus-sans", sans-serif;
    font-weight: 400;

    font-size: 0.8rem;
    line-height: 0.9rem;

    margin-bottom: 0.25rem;
  }

  .custom-audio {
    width: 100%;
    height: 1.25rem;

    background: #000;

    border: none;
    border-radius: 0;
  }

  .custom-audio::-webkit-media-controls-panel {
    background-color: #000 !important;
    box-shadow: none !important;
    border-radius: 0 !important;

    padding-left: 0.2rem;
    padding-right: 0.2rem;
  }

  .custom-audio::-webkit-media-controls-play-button {
    filter: invert(1);
    margin-left: -0.45rem;
  }

  .custom-audio::-webkit-media-controls-mute-button,
  .custom-audio::-webkit-media-controls-volume-slider {
    filter: invert(1);
  }

  .custom-audio::-webkit-media-controls-timeline {
    filter: invert(1);

    margin-left: 0.4rem;
    margin-right: 0.2rem;
  }

  .custom-audio::-webkit-media-controls-current-time-display,
  .custom-audio::-webkit-media-controls-time-remaining-display {
    color: #fff !important;
  }

  /* ===================== */
  /* IMAGENS MOBILE */
  /* ===================== */

  .media-column {
    grid-column: auto;
    grid-row: auto;

    height: auto;
    overflow: visible;

    display: flex;
    flex-direction: column;
    gap: 0.3rem;

    margin-top: 1rem;
  }

.media-section {
  background: #000;
  color: #fff;

  padding-top: var(--mobile-padding);
  padding-right: var(--mobile-padding);
  padding-bottom: 0.5rem;
  padding-left: var(--mobile-padding);

  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

  .media-row {
    position: relative;

    display: grid;

    /* Mobile: 20 colunas / gutter 3px */
    grid-template-columns: repeat(20, 1fr);
    column-gap: 0.1875rem;
    row-gap: 0;

    align-items: start;

    padding-bottom: 0.7rem;
  }

  /* título lateral ocupa só 1 coluna */
  .media-info {
    grid-column: 1 / 2;

    height: 100%;

    display: flex;
    flex-direction: column;
  }

.place-title {
  margin: 0;
  padding: 0;

  writing-mode: vertical-rl;
  transform: rotate(180deg);

  font-size: 0.9rem;
  line-height: 1rem;

  align-self: start;

  white-space: nowrap;

  margin-left: -0.25rem;
}

  /* no mobile fica CAIS DO SODRÉ numa só linha */
  .place-title br {
    display: none;
  }

  /* imagem começa na coluna 2 e ocupa até ao fim */
  .image-column {
    grid-column: 2 / 21;
  }

  .image-column img {
    width: 100%;
    display: block;
  }

  .image-desc {
    position: absolute;

    /* alinhado com o início da imagem */
    left: calc((100% / 20) * 1);
    bottom: -0.15rem;

    margin: 0;

    color: #fff;

    font-family: "nimbus-sans", sans-serif;
    font-weight: 400;

    font-size: 0.6rem;
    line-height: 0.55rem;

    transform: none;
  }

  /* ===================== */
  /* CRÉDITOS MOBILE */
  /* ===================== */

  .credits-section {
    grid-column: auto;
    grid-row: auto;

    display: grid;

    /* Mobile: 20 colunas / gutter 3px */
    grid-template-columns: repeat(20, 1fr);
    gap: 0.1875rem;

    margin-top: 0.6rem; /* espaço entre o credito o bloco preto */
    transform: none;
  }

  .credit-box {
    background: #fff;

    font-family: "nimbus-sans-extended", sans-serif;
    font-weight: 400;

    font-size: 0.45rem;
    line-height: 0.55rem;

    padding: 0 0.15rem 0.1rem 0.15rem;

    white-space: nowrap;
    overflow: hidden;
  }

  /* créditos numa só linha */
  .credit-rafael {
    grid-column: 1 / 7;
  }

  .credit-project {
    grid-column: 7 / 14;
  }

  .credit-university {
    grid-column: 14 / 21;
  } 
}