/* =========================================================
   Páginas interiores: Writing e About
   ========================================================= */

/* Índice de poemas, como o sumário de um livro.
   Sem filetes, sem setas, sem caixas: só os títulos, em degrau. --- */
.indice {
  list-style: none;
  /* o conjunto assenta no meio da página, mantendo o degrau */
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
.indice li { margin: 0; padding-left: calc(var(--n, 0) * 2.4ch); }
.indice li + li { margin-top: clamp(0.75rem, 1.8vw, 1.5rem); }

.indice a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7ch;
  text-decoration: none;
  padding: 0.12em 0;
}

/* o número em algarismo romano, pequeno, como nas folhas de rosto */
.indice__num {
  font-family: var(--serifa);
  font-style: italic;
  font-size: clamp(0.8125rem, 1.1vw, 1rem);
  color: var(--taupe-texto);
  align-self: flex-start;
  padding-top: 0.45em;
  min-width: 2.2ch;
}

.indice__titulo {
  /* o sumário em Inter, a segunda fonte da identidade: contrasta com
     os poemas, que ficam todos em Cormorant */
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(1.0625rem, 2vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--medio), color var(--medio);
}
.indice a:hover .indice__titulo,
.indice a:focus-visible .indice__titulo {
  text-decoration-line: underline;
  text-decoration-color: var(--mushroom);
}
.indice a:hover .indice__num,
.indice a:focus-visible .indice__num { color: var(--espresso); }

@media (max-width: 30rem) {
  .indice li { padding-left: calc(var(--n, 0) * 1ch); }
}

/* Cartões dos textos publicados ------------------------------------ */
.cartoes { display: grid; gap: clamp(1.5rem, 3vw, 2rem); }
.cartao {
  background: var(--ivory);
  padding: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
  text-decoration: none;
  min-height: 15rem;
  transition: transform var(--medio), background-color var(--medio);
}
.cartao:hover, .cartao:focus-visible { transform: translateY(-6px); background: #FBFAF6; }
.cartao__numero {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--mushroom);
  font-variant-numeric: tabular-nums;
}
.cartao__titulo {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  line-height: 1.2;
  margin: 0;
}
.cartao__sub {
  font-size: 0.875rem;
  line-height: 1.7;
  color: var(--corpo);
  margin: 0;
  flex: 1;
}
.cartao__pe {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: calc(var(--u) * 2);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe-forte);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 48rem) {
  .cartoes { grid-template-columns: repeat(2, 1fr); }
}

/* About ------------------------------------------------------------ */
.perfil {
  background: var(--areia);
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
  padding-bottom: clamp(3rem, 8vw, 6rem);
}
.perfil__foto { overflow: hidden; }
.perfil__foto img { width: 100%; }
.perfil__texto { padding: clamp(3rem, 8vw, 6rem) var(--margem) 0; }
.perfil__rotulo {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--taupe-forte);
  margin: 0 0 calc(var(--u) * 3);
}
.perfil__titulo {
  font-size: clamp(2.25rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  margin: 0;
  max-width: 16ch;
}

@media (min-width: 48rem) {
  .perfil { grid-template-columns: 5fr 7fr; padding-bottom: 0; }
  .perfil__foto { height: 100%; }
  .perfil__foto img { height: 100%; object-fit: cover; }
  .perfil__texto { padding: clamp(5rem, 10vw, 9rem) var(--margem); }
}

/* Citação em banda escura ------------------------------------------ */
.citacao {
  background: var(--espresso);
  color: var(--ivory);
  padding: clamp(4.5rem, 12vw, 9rem) var(--margem);
  text-align: center;
}
.citacao blockquote {
  font-family: var(--serifa);
  font-weight: 300;
  font-size: clamp(1.625rem, 4vw, 2.75rem);
  line-height: 1.34;
  margin: 0 auto;
  max-width: 26ch;
}
.citacao__fonte {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mushroom);
  margin: clamp(2rem, 5vw, 3rem) 0 0;
}

/* Texto corrido em duas colunas ------------------------------------- */
.texto-duplo { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.texto-duplo p {
  margin: 0 0 calc(var(--u) * 3);
  font-size: 0.9375rem;
  line-height: 1.9;
  color: var(--corpo);
  max-width: 46ch;
}
.texto-duplo p:last-child { margin-bottom: 0; }
.texto-duplo p:first-child::first-letter {
  font-family: var(--serifa);
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  margin: 0.06em 0.09em 0 0;
  color: var(--espresso);
}

@media (min-width: 48rem) {
  /* O bloco cabe na sua própria medida e assenta ao centro da página. Antes
     as colunas iam de margem a margem e o texto, mais estreito do que elas,
     deixava um vazio ao meio e outro à direita. */
  .texto-duplo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 6vw, 5rem);
    max-width: 58rem;
    margin-inline: auto;
  }
  .texto-duplo p { max-width: none; }
}

/* Áreas de trabalho, com imagem -------------------------------------- */
.areas { display: grid; gap: clamp(2.5rem, 5vw, 3.5rem); }
.area figure { margin: 0 0 calc(var(--u) * 3); overflow: hidden; }
.area img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

/* A Escrita mostra a capa do livro, na mesma moldura das outras duas.
   Encostada ao topo: assim o desenho do rosto fica inteiro e o que se
   perde é só a margem de baixo. */
.area--livro img { object-position: center top; }
.area h3 {
  font-family: var(--serifa);
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  font-weight: 400;
  margin: 0 0 calc(var(--u) * 1.5);
}
.area p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.8;
  color: var(--corpo);
  max-width: 34ch;
}

@media (min-width: 48rem) {
  .areas { grid-template-columns: repeat(3, 1fr); }
}

/* Chamada final ----------------------------------------------------- */
.chamada {
  background: var(--ivory);
  padding: clamp(4rem, 10vw, 7rem) var(--margem);
  text-align: center;
}
.chamada p {
  font-family: var(--serifa);
  font-weight: 300;
  font-size: clamp(1.75rem, 4.2vw, 2.75rem);
  line-height: 1.3;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  max-width: 22ch;
}
.chamada .ligacao { color: var(--taupe-texto); }
.chamada .ligacao:hover { color: var(--espresso); }

/* Páginas em dois tons: a areia e o Espresso, e mais nada. O Warm Ivory
   entrava como terceira cor e partia a página ao meio, com um degrau visível
   onde uma secção acabava e a outra começava. Põe-se a classe no <body>. */
body.dois-tons { background: var(--areia); }
.dois-tons .chamada { background: var(--areia); }
.dois-tons .topo--fundo { background: rgba(226, 222, 213, 0.94); }

/* =========================================================
   Abertura em duas metades: fotografia de um lado,
   painel de cor do outro, com o livro dela ao centro.
   No telemóvel o painel fica por cima e a fotografia por baixo.
   ========================================================= */

.dupla {
  display: flex;
  flex-direction: column-reverse;
}

.dupla__imagem {
  position: relative;
  overflow: hidden;
  background: var(--espresso);
  height: 78vw;
  max-height: 34rem;
}
.dupla__imagem img {
  /* fora do fluxo, para a fotografia não mandar na altura da secção */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  animation: dupla-respira 22s ease-in-out infinite alternate;
}
@keyframes dupla-respira {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(0, -1.4%, 0); }
}

/* variante: em vez de fotografia, a capa do livro em grande */
.dupla__imagem--capa {
  background: var(--areia);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 5rem);
  height: auto;
  max-height: none;
}
.dupla__imagem--capa img {
  position: static;
  width: min(20rem, 62%);
  height: auto;
  object-fit: contain;
  animation: none;
  transform: none;
}

.painel__verso {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.375rem, 2.8vw, 2.125rem);
  line-height: 1.44;
  margin: 0;
  max-width: 22ch;
  text-align: center;
}

/* O painel ------------------------------------------------------- */
.painel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--espresso);
  color: var(--ivory);
  /* o cabeçalho é fixo: o painel começa por baixo dele */
  padding: clamp(2.25rem, 6vw, 3.25rem) var(--margem) clamp(2.25rem, 6vw, 3.5rem);
}

.painel__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 3);
  margin-bottom: auto;
}
.painel__titulo,
.painel__lado {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0;
}
.painel__lado { text-align: right; opacity: 0.75; }

.painel__meio {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0;
}
.painel__capa {
  margin: 0;
  width: clamp(8rem, 34%, 11.5rem);
  flex-shrink: 0;
}
.painel__capa img { width: 100%; height: auto; display: block; }

.painel__legenda { text-align: center; margin-top: calc(var(--u) * 3); }
.painel__nome {
  font-family: var(--serifa);
  font-size: clamp(1.125rem, 2vw, 1.375rem);
  font-weight: 400;
  margin: 0;
}
.painel__sub {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  margin: calc(var(--u) * 0.75) 0 0;
  opacity: 0.8;
}

.painel__fundo {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
}
.painel__fichas { margin: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 1.5); }
.painel__fichas dt {
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.35;
}
.painel__fichas dd {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.35;
  margin: 0;
}

/* o botão: o preenchimento entra da esquerda */
.botao {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-block;
  padding: calc(var(--u) * 2) calc(var(--u) * 4);
  border: 1px solid currentColor;
  color: inherit;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
}
.botao::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ivory);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms ease-out;
}
.botao span { position: relative; z-index: 1; transition: color 500ms ease-out; }
.botao:hover span,
.botao:focus-visible span { color: var(--espresso); }
.botao:hover::before,
.botao:focus-visible::before { transform: scaleX(1); }

@media (min-width: 48rem) {
  .dupla {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100svh - var(--topo-altura));
  }
  .dupla__imagem { height: auto; max-height: none; }
  .painel {
    padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 4vw, 3.5rem) clamp(2.25rem, 4vw, 3.25rem);
  }
}

/* As entradas, uma a uma, quando a secção aparece ------------------- */
[data-surge] {
  opacity: 0;
  transform: translateY(var(--desvio, 20px));
  transition:
    opacity var(--duracao, 1600ms) var(--suave) var(--atraso, 0ms),
    transform var(--duracao, 1600ms) var(--suave) var(--atraso, 0ms);
}
.surgiu [data-surge] { opacity: 1; transform: none; }
html:not(.js) [data-surge] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-surge] { opacity: 1; transform: none; transition: none; }
  .dupla__imagem img { animation: none; transform: none; }
}

/* No telemóvel a capa da abertura e a capa que abre o livro ficavam uma
   debaixo da outra, iguais. Fica só a que se pode abrir. */
@media (max-width: 47.99rem) {
  .dupla__imagem--capa { display: none; }
}