@charset "utf-8";
/* ==================================================================
   GATÉMIA — folha de estilo única.

   Organização:
     01 · Fundações (tokens, reset, tipografia)
     02 · Papel e grafite (texturas de base)
     03 · Estrutura (grelha, capítulos, ritmo)
     04 · Cabeçalho e índice
     05 · Cursor-lápis
     06 · O fio (a linha condutora)
     07 · Capítulos, um a um
     08 · Fotografia
     09 · Formulário e rodapé
     10 · Adaptação a ecrã pequeno
     11 · Movimento reduzido e sem JavaScript

   A paleta vem do logótipo oficial (rosa envelhecido #BA796A, branco,
   neutro escuro) e foi auditada com _ferramentas/contraste.py antes de
   ser usada. Duas conclusões que condicionam tudo o resto:

     · o rosa da marca sobre papel dá 3.12:1 — chega para títulos
       grandes e traços, não chega para texto corrente. Para texto há
       --rosa-tinta (5.74:1).
     · sobre o rosa da marca, o branco dá 3.48:1 e falha. Os botões em
       rosa levam texto em tinta escura (5.16:1), nunca branco.
   ================================================================== */

/* ==================================================================
   01 · FUNDAÇÕES
   ================================================================== */

:root {
  /* papel */
  --papel: #f6f2ec;
  --papel-2: #efe8de;
  --papel-3: #e8e0d6;
  --papel-4: #ded3c5;

  /* tinta */
  --tinta: #1a1614;
  --tinta-2: #3a322c;
  --grafite: #5a5049;

  /* marca */
  --rosa: #ba796a;
  --rosa-tinta: #8c4e40; /* legível em texto corrente sobre papel */
  --rosa-claro: #ce9384; /* legível sobre fundo escuro */

  /* traços e limites */
  --linha: rgba(26, 22, 20, 0.28); /* decorativo */
  --linha-forte: rgba(26, 22, 20, 0.5);
  --linha-ui: #8c7c6e; /* 3.61:1 — bordas de campos e controlos */

  /* tipografia */
  --serif: "Bodoni Moda", "Didot", "Times New Roman", serif;
  --sans: "Jost", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --t-hero: clamp(4rem, 15vw, 15rem);
  --t-capitulo: clamp(2.75rem, 8.5vw, 8rem);
  --t-titulo: clamp(2rem, 5vw, 4.25rem);
  --t-lead: clamp(1.3rem, 2.4vw, 2.1rem);
  --t-corpo: clamp(1.0625rem, 1.05vw, 1.1875rem);
  --t-nota: 0.875rem;
  --t-etiqueta: 0.75rem;

  /* espaço */
  --margem: clamp(1.25rem, 5vw, 6rem);
  --goteira: clamp(1rem, 2.2vw, 2.5rem);
  --respiro: clamp(6rem, 16vh, 14rem);

  /* movimento — um só vocabulário para todo o site */
  --rapido: 180ms;
  --medio: 300ms;
  --lento: 620ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
  --curva-suave: cubic-bezier(0.65, 0, 0.35, 1);

  --z-fio: 1;
  --z-conteudo: 2;
  --z-cabecalho: 40;
  --z-indice: 60;
  --z-lapis: 90;

  color-scheme: light;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: var(--t-corpo);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd {
  margin: 0;
}
ul, ol { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

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

/* Sublinhado desenhado: cresce da esquerda, como um traço a lápis. */
.ligacao {
  position: relative;
  display: inline-block;
  padding-bottom: 0.12em;
}
/* A área de toque cresce sem o texto crescer: uma linha de 17 px tem
   28 px de altura e falharia o mínimo de 44 × 44. O pseudo-elemento
   estica o alvo sem mexer no ritmo do parágrafo. */
.ligacao::before {
  content: "";
  position: absolute;
  inset: -0.55rem -0.35rem;
}
.ligacao::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--traco, 1));
  transform-origin: left;
  transition: transform var(--medio) var(--curva);
}
.ligacao:hover::after,
.ligacao:focus-visible::after { --traco: 0; transform-origin: right; }

:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 4px;
  border-radius: 1px;
}

::selection {
  background: var(--rosa);
  color: var(--tinta);
}

.saltar {
  position: absolute;
  left: var(--margem);
  top: -6rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--tinta);
  color: var(--papel);
  font-size: var(--t-nota);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: top var(--rapido) var(--curva);
}
.saltar:focus { top: 1rem; }

.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- famílias tipográficas em uso ---- */

.serif {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.94;
  letter-spacing: -0.018em;
}

.etiqueta {
  font-family: var(--sans);
  font-size: var(--t-etiqueta);
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grafite);
  line-height: 1.4;
}

.lead {
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.4;
  letter-spacing: -0.005em;
  max-width: 22ch;
}

.corpo {
  max-width: 62ch;
  color: var(--tinta-2);
}
.corpo + .corpo { margin-top: 1.1em; }

.destaque {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--rosa-tinta);
}

/* ==================================================================
   02 · PAPEL E GRAFITE
   ================================================================== */

/* Grão do papel. Uma folha de ruído gerada pelo próprio browser: não
   pesa um único pedido de rede e não pisca ao carregar. */
.grao {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)' opacity='.42'/%3E%3C/svg%3E");
}

/* Vinheta de papel: as margens da folha são sempre um pouco mais
   quentes do que o centro. */
.vinheta {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 12%, transparent 40%, rgba(154, 130, 104, 0.13) 100%);
}

/* ==================================================================
   03 · ESTRUTURA
   ================================================================== */

.capitulo {
  position: relative;
  z-index: var(--z-conteudo);
  padding-block: var(--respiro);
  padding-inline: var(--margem);
}

.grelha {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--goteira);
  max-width: 1680px;
  margin-inline: auto;
}

/* Cabeçalho de capítulo: número, título e o traço que os liga. */
.cabecalho-capitulo {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 3rem);
  margin-bottom: clamp(2.5rem, 6vh, 5rem);
}
.cabecalho-capitulo .numero {
  font-family: var(--serif);
  font-size: var(--t-nota);
  letter-spacing: 0.1em;
  color: var(--rosa-tinta);
  flex: none;
  padding-top: 0.35em;
}
.cabecalho-capitulo .titulo {
  font-family: var(--serif);
  font-size: var(--t-capitulo);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.025em;
}
.cabecalho-capitulo .risco {
  flex: 1;
  height: 1px;
  background: var(--linha);
  transform: scaleX(var(--risco, 0));
  transform-origin: left;
  transition: transform var(--lento) var(--curva);
  align-self: center;
}

/* Nota de margem — como quem escreve ao lado do desenho. */
.nota-margem {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--grafite);
  max-width: 34ch;
  position: relative;
  padding-left: 1.4rem;
}
.nota-margem::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.85rem;
  height: 1px;
  background: var(--rosa);
}

/* Número de página, canto inferior. */
.folio {
  position: absolute;
  right: var(--margem);
  bottom: calc(var(--respiro) / 3);
  font-family: var(--serif);
  font-size: var(--t-nota);
  color: var(--grafite);
  letter-spacing: 0.1em;
}

/* Entradas escalonadas. O JS troca `data-entrada` para "dentro". */
[data-entrada] > * {
  opacity: 0;
  transform: translateY(1.1rem);
  transition:
    opacity var(--lento) var(--curva),
    transform var(--lento) var(--curva);
  transition-delay: calc(var(--i, 0) * 40ms);
}
[data-entrada="dentro"] > * {
  opacity: 1;
  transform: none;
}

/* ==================================================================
   04 · CABEÇALHO E ÍNDICE
   ================================================================== */

.cabecalho {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-cabecalho);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(0.9rem, 2vh, 1.6rem) var(--margem);
  /* Sem `mix-blend-mode`: em cima das secções de fundo escuro o cabeçalho
     ficava tinta sobre tinta. A cor é trocada pelo principal.js, ao mesmo
     tempo que a do fio. */
  color: var(--tinta);
  transition:
    transform var(--lento) var(--curva),
    opacity var(--medio) var(--curva),
    color var(--medio) var(--curva);
}
.cabecalho[data-recolhido="sim"] {
  transform: translateY(-110%);
  opacity: 0;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  color: inherit;
}
.marca .monograma { width: auto; height: clamp(1.6rem, 3.4vh, 2.3rem); }
.marca .palavra { width: auto; height: clamp(0.85rem, 1.8vh, 1.15rem); }
.marca .registado {
  font-size: 0.5rem;
  align-self: flex-start;
  margin-top: 0.15rem;
  color: var(--grafite);
}

.controlos { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); }

/* Todos os botões do cabeçalho partilham a mesma caixa de toque. */
.botao-cabecalho {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding-inline: 0.35rem;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: inherit;
}
.botao-cabecalho .traco-botao {
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--e, 1));
  transform-origin: right;
  transition: transform var(--medio) var(--curva);
}
.botao-cabecalho:hover .traco-botao,
.botao-cabecalho:focus-visible .traco-botao { --e: 0.45; }

.indicador-som {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 0.75rem;
}
.indicador-som i {
  display: block;
  width: 2px;
  height: 30%;
  background: currentColor;
  transition: height var(--medio) var(--curva);
}
[aria-pressed="true"] .indicador-som i:nth-child(1) { height: 55%; }
[aria-pressed="true"] .indicador-som i:nth-child(2) { height: 100%; }
[aria-pressed="true"] .indicador-som i:nth-child(3) { height: 70%; }

/* ---- índice: a página do caderno que se abre ---- */

.indice {
  position: fixed;
  inset: 0;
  z-index: var(--z-indice);
  background: var(--papel-2);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: clamp(1rem, 3vh, 2rem) var(--margem) var(--margem);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--lento) var(--curva-suave);
  visibility: hidden;
}
.indice[data-aberto="sim"] {
  clip-path: inset(0 0 0 0);
  visibility: visible;
}
.indice-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.4rem;
}
/* A lista tem de caber num ecrã só. Se não couber — telemóvel deitado,
   janela baixa — passa a rolar dentro dela própria em vez de sair pela
   parte de baixo do índice. */
.indice-lista {
  align-self: center;
  display: grid;
  gap: 0;
  max-width: 1680px;
  width: 100%;
  margin-inline: auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.indice-item {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: clamp(0.4rem, 1vh, 0.8rem);
  border-top: 1px solid var(--linha);
  min-height: 44px;
  opacity: 0;
  transform: translateY(0.8rem);
}
.indice[data-aberto="sim"] .indice-item {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--lento) var(--curva) calc(120ms + var(--i) * 45ms),
    transform var(--lento) var(--curva) calc(120ms + var(--i) * 45ms);
}
.indice-item:last-child { border-bottom: 1px solid var(--linha); }
.indice-item .numero {
  font-family: var(--serif);
  font-size: var(--t-nota);
  color: var(--rosa-tinta);
}
.indice-item .nome {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  transition: color var(--medio) var(--curva), transform var(--medio) var(--curva);
}
.indice-item .miniatura {
  width: clamp(2rem, 4vw, 3.25rem);
  color: var(--rosa);
  opacity: 0;
  transition: opacity var(--medio) var(--curva);
}
.indice-item:hover .nome,
.indice-item:focus-visible .nome {
  color: var(--rosa-tinta);
  transform: translateX(0.6rem);
}
.indice-item:hover .miniatura,
.indice-item:focus-visible .miniatura { opacity: 1; }

.indice-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  justify-content: space-between;
  align-items: end;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-nota);
  color: var(--grafite);
}

/* ==================================================================
   05 · CURSOR-LÁPIS
   ================================================================== */

.rasto {
  position: fixed;
  inset: 0;
  z-index: var(--z-lapis);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--lento) var(--curva);
}
.rasto[data-pronto="sim"] { opacity: 1; }

.lapis {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-lapis) + 1);
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--medio) var(--curva);
  will-change: transform;
}
.lapis[data-pronto="sim"] { opacity: 1; }
.lapis .ponta {
  position: absolute;
  inset: 0;
  color: var(--tinta);
  transition: transform var(--medio) var(--curva), opacity var(--rapido) var(--curva);
}
.lapis .palavra-estado {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.7);
  white-space: nowrap;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--papel);
  background: var(--tinta);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  opacity: 0;
  transition:
    opacity var(--rapido) var(--curva),
    transform var(--medio) var(--curva);
}
/* Sobre papel escuro o lápis inverte-se — e a etiqueta com ele, senão
   ficava uma pastilha escura em cima de um fundo escuro. */
.lapis[data-fundo="escuro"] .ponta { color: var(--papel); }
.lapis[data-fundo="escuro"] .palavra-estado {
  background: var(--papel);
  color: var(--tinta);
}
.lapis[data-estado="acao"] .ponta { transform: scale(0.55); opacity: 0.4; }
.lapis[data-estado="acao"] .palavra-estado {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* Com o lápis ligado, o cursor do sistema sai de cena. */
body.com-lapis,
body.com-lapis a,
body.com-lapis button,
body.com-lapis [role="button"] { cursor: none; }

/* ==================================================================
   06 · O FIO
   ================================================================== */

.fio {
  position: fixed;
  inset: 0;
  z-index: var(--z-fio);
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--tinta);
}
.fio .traco-mestre {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--fio-espessura, 1.6);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: var(--fio-opacidade, 0.55);
  vector-effect: non-scaling-stroke;
}
/* O segundo traço, ligeiramente desalinhado e mais fino, é o que dá o
   ar de grafite: nenhuma linha desenhada à mão passa duas vezes
   exatamente no mesmo sítio. */
.fio .marcas-abertura {
  opacity: var(--marcas-opacidade, 0);
  transition: opacity var(--lento) var(--curva);
}
.fio .marcas-abertura path {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--fio-espessura, 1.6) * 0.7);
  stroke-linecap: round;
  opacity: 0.5;
  vector-effect: non-scaling-stroke;
}
.fio .traco-eco {
  fill: none;
  stroke: currentColor;
  stroke-width: calc(var(--fio-espessura, 1.6) * 0.55);
  stroke-linecap: round;
  opacity: calc(var(--fio-opacidade, 0.55) * 0.45);
  vector-effect: non-scaling-stroke;
  transform: translate(1.5px, -1px);
}

/* ==================================================================
   07 · CAPÍTULOS
   ================================================================== */

/* ---- 00 · abertura ---- */

.abertura {
  position: relative;
  min-height: 100svh;
  display: grid;
  /* Três faixas: o palco onde o traço nasce, a assinatura por baixo e o
     rodapé da folha. O traço fica sozinho em cima — é ele o primeiro a
     falar, não o logótipo. */
  grid-template-rows: minmax(30svh, 1fr) auto auto;
  padding: 0 var(--margem) clamp(1.5rem, 5vh, 3rem);
  row-gap: clamp(1.5rem, 5vh, 3.5rem);
  z-index: var(--z-conteudo);
}
.abertura-centro {
  grid-row: 2;
  display: grid;
  place-items: center;
  text-align: center;
  gap: clamp(0.9rem, 2.4vh, 1.6rem);
}
.abertura .assinatura-marca {
  width: min(62vw, 27rem);
  color: var(--tinta);
}
.abertura .frase {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  color: var(--tinta-2);
  max-width: 30ch;
  line-height: 1.4;
  text-wrap: balance;
}

.abertura-pe {
  grid-row: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.desca {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 44px;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}
.desca .fio-vertical {
  display: block;
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(var(--linha-forte), transparent);
  animation: descer 2.6s var(--curva-suave) infinite;
  transform-origin: top;
}
@keyframes descer {
  0% { transform: scaleY(0); opacity: 0; }
  40% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(2.6rem); opacity: 0; }
}

/* ---- 01 · manifesto ---- */

.manifesto { text-align: center; }
.manifesto .frase-grande {
  grid-column: 2 / -2;
  font-family: var(--serif);
  font-size: var(--t-titulo);
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
.manifesto .frase-grande em {
  font-style: italic;
  color: var(--rosa-tinta);
}
.manifesto .cadeia {
  grid-column: 1 / -1;
  margin-top: clamp(3rem, 8vh, 6rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem clamp(0.75rem, 2vw, 1.75rem);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grafite);
}
.manifesto .cadeia li {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
}
.manifesto .cadeia li:not(:last-child)::after {
  content: "";
  width: clamp(1rem, 3vw, 2.5rem);
  height: 1px;
  background: var(--linha);
}
.manifesto .cadeia li[data-fim] { color: var(--rosa-tinta); }

/* ---- 02 · a pessoa ---- */

.pessoa-corpo { grid-column: 1 / span 5; }
.pessoa-figura {
  grid-column: 7 / -1;
  position: relative;
  aspect-ratio: 3 / 4;
}
.pessoa-figura svg { width: 100%; height: 100%; }
.pessoa-figura .contorno {
  fill: none;
  stroke: var(--tinta);
  stroke-width: 1.9;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pessoa-figura .construcao {
  fill: none;
  stroke: var(--rosa);
  stroke-width: 1;
  stroke-dasharray: 4 5;
  vector-effect: non-scaling-stroke;
}
.pessoa-figura .cota {
  font-family: var(--sans);
  font-size: 3.4px;
  letter-spacing: 0.24em;
  fill: var(--rosa-tinta);
  text-transform: uppercase;
}
.medidas {
  margin-top: clamp(2rem, 5vh, 3.5rem);
  display: grid;
  gap: 0;
}
.medidas li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.85rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}
.medidas li:last-child { border-bottom: 1px solid var(--linha); }
.medidas li b {
  font-family: var(--serif);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  color: var(--rosa-tinta);
  font-weight: 400;
}
.medidas li .preencher {
  flex: 1;
  height: 1px;
  background: var(--linha);
}

/* ---- 03 · a matéria ---- */

.materia { background: var(--papel-3); }
.materia .texto { grid-column: 2 / span 5; }
.materia .amostras {
  grid-column: 8 / -1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--goteira);
  align-self: center;
}
.amostra {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--papel-2);
  border: 1px solid var(--linha);
}
.amostra canvas { width: 100%; height: 100%; }
.amostra figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0.6rem 0.75rem;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tinta);
  background: linear-gradient(transparent, rgba(246, 242, 236, 0.94) 55%);
}

/* ---- 04 · o processo ---- */

.processo-lista {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: 0;
  border-top: 1px solid var(--linha);
}
.etapa {
  padding: clamp(1.5rem, 4vh, 2.75rem) clamp(0.75rem, 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--linha);
  border-right: 1px solid var(--linha);
  display: grid;
  gap: 1rem;
  align-content: start;
}
.etapa:last-child { border-right: 0; }
.etapa .risco-etapa { color: var(--tinta); width: clamp(2.75rem, 5vw, 4rem); }
.etapa .risco-etapa path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.etapa h3 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.etapa p { font-size: var(--t-nota); color: var(--grafite); line-height: 1.55; }
.etapa .ordem {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.24em;
  color: var(--rosa-tinta);
}

/* ---- 05 · as capas / revelar ---- */

.revelar {
  position: relative;
  aspect-ratio: 2 / 3;
  background: var(--papel-2);
  overflow: hidden;
  touch-action: pan-y;
}
.revelar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.revelar .foto-base { display: none; }
.revelar .desenho {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--tinta);
  pointer-events: none;
}
.revelar .desenho path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.revelar .aviso {
  position: absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  background: rgba(246, 242, 236, 0.86);
  padding: 0.5rem 0.9rem;
  transition: opacity var(--medio) var(--curva);
}
.revelar[data-tocado="sim"] .aviso { opacity: 0; }

.capas .quadro { grid-column: 1 / span 6; }
.capas .texto { grid-column: 8 / -1; align-self: center; }

/* ---- 06 · mãe e filha ---- */

/* Tudo o que muda quando o papel fica escuro. Os tons claros aqui não
   são os mesmos invertidos: --papel-3 sobre --tinta dá 11.7:1 e
   --rosa-claro dá 6.96:1, ambos acima do mínimo de texto corrente.
   O --grafite, que serve as notas sobre papel claro, daria 1.9:1 e
   está proibido nestas secções. */
[data-fundo="escuro"] {
  background: var(--tinta);
  color: var(--papel);
}
[data-fundo="escuro"] .etiqueta,
[data-fundo="escuro"] .nota-margem { color: var(--papel-3); }
[data-fundo="escuro"] .cabecalho-capitulo .titulo { color: var(--papel); }
[data-fundo="escuro"] .cabecalho-capitulo .numero { color: var(--rosa-claro); }
[data-fundo="escuro"] .cabecalho-capitulo .risco { background: rgba(246, 242, 236, 0.32); }
[data-fundo="escuro"] .corpo { color: var(--papel-3); }
[data-fundo="escuro"] .destaque { color: var(--rosa-claro); }
[data-fundo="escuro"] .nota-margem::before { background: var(--rosa-claro); }
[data-fundo="escuro"] :focus-visible { outline-color: var(--papel); }

.duas .par {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--goteira);
  align-items: end;
}
.duas .par figure:first-child { grid-column: 2 / span 4; }
.duas .par figure:last-child { grid-column: 7 / span 4; transform: translateY(clamp(2rem, 6vh, 5rem)); }
.duas .par-nota { grid-column: span 4; }
.duas .par-nota:first-child { grid-column: 2 / span 4; }
.duas .par-nota:last-child { grid-column: 7 / span 4; }
.duas .frase-par {
  grid-column: 1 / -1;
  margin-top: clamp(3rem, 9vh, 7rem);
  text-align: center;
  font-family: var(--serif);
  font-size: var(--t-titulo);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

/* ---- 07 · camisas ---- */

.camisas .intro { grid-column: 1 / span 4; }
.camisas .folha {
  grid-column: 6 / -1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linha);
  border: 1px solid var(--linha);
}
.camisas .folha figure {
  background: var(--papel);
  position: relative;
}
.camisas .folha img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.camisas .folha figcaption {
  padding: 0.7rem 0.85rem;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.camisas .folha figcaption b { color: var(--rosa-tinta); font-weight: 400; }

.especificacoes {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  gap: 0;
  font-size: var(--t-nota);
}
.especificacoes div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--linha);
}
.especificacoes dt {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
  padding-top: 0.18em;
}
.especificacoes dd { color: var(--tinta-2); }

/* ---- 08 · a tradição ---- */

.tradicao { background: var(--papel-2); text-align: center; }
.tradicao .quadro-bordado {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 60svh;
}
.tradicao .bordado {
  width: min(70vw, 34rem);
  color: var(--rosa);
  overflow: visible;
}
.tradicao .bordado .ponto {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 13 9;
  vector-effect: non-scaling-stroke;
}
.tradicao .bordado .guia {
  fill: none;
  stroke: var(--linha);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}
.tradicao .corpo { max-width: 54ch; }
.tradicao-texto { grid-column: 4 / span 6; }
.tradicao-foto {
  grid-column: 5 / span 4;
  margin-top: clamp(3rem, 9vh, 7rem);
}
.tradicao .simbolos {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 6vh, 4rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}
.simbolo {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  width: 6rem;
  color: var(--tinta);
}
.simbolo svg { width: 2.75rem; }
.simbolo path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.simbolo span {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grafite);
}

/* ---- 09 · clássico intemporal ---- */

.classico .etiqueta { color: var(--rosa-claro); }
.classico .quadro { grid-column: 7 / -1; }
.classico .texto { grid-column: 1 / span 5; align-self: center; }
.classico .revelar { background: #100e0d; }
.classico .revelar .desenho { color: var(--papel-3); }
.classico .revelar .aviso {
  color: var(--papel-3);
  background: rgba(26, 22, 20, 0.8);
}

/* ---- 10 · galeria ---- */

.galeria-grelha {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--goteira) var(--goteira);
  align-items: start;
}
.galeria-grelha figure { position: relative; }
.galeria-grelha figcaption {
  margin-top: 0.7rem;
  font-size: var(--t-etiqueta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grafite);
}
.g-a { grid-column: 1 / span 4; }
.g-b { grid-column: 6 / span 3; margin-top: clamp(3rem, 10vh, 8rem); }
.g-c { grid-column: 10 / span 3; }
.g-d { grid-column: 2 / span 3; margin-top: clamp(2rem, 6vh, 5rem); }
.g-e { grid-column: 6 / span 5; }
.g-f { grid-column: 1 / span 3; }
.g-g { grid-column: 5 / span 3; margin-top: clamp(2rem, 7vh, 6rem); }
.g-h { grid-column: 9 / span 4; }

/* Um traço que atravessa a fotografia, como no caderno. */
.atravessado::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  top: 38%;
  height: 1px;
  background: var(--rosa);
  opacity: 0.85;
  transform: rotate(-4deg) scaleX(var(--corta, 0));
  transform-origin: left;
  transition: transform 900ms var(--curva);
}
.atravessado[data-visivel="sim"]::after { --corta: 1; }

/* ---- 11 · o final ---- */

.final { text-align: center; }
.final .cabecalho-capitulo { justify-content: center; }
.final .cena { grid-column: 1 / -1; display: grid; place-items: center; gap: clamp(2rem, 6vh, 4rem); }
.final figure { width: min(100%, 28rem); }
.final .pergunta {
  font-family: var(--serif);
  font-size: var(--t-titulo);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.final .pergunta em { font-style: italic; color: var(--rosa-claro); }
.final .antes {
  font-size: var(--t-lead);
  color: var(--papel-3);
  max-width: 26ch;
}

/* Botão principal: rosa da marca com tinta escura por cima — é a única
   combinação da paleta que passa 4.5:1 em cima do rosa. */
.botao {
  display: inline-flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 56px;
  padding: 0.95rem 1.9rem;
  background: var(--rosa);
  color: var(--tinta);
  font-size: var(--t-nota);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  transition:
    background var(--medio) var(--curva),
    transform var(--medio) var(--curva);
}
.botao svg { width: 1.1rem; flex: none; }
.botao svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.botao:hover, .botao:focus-visible { background: var(--rosa-claro); transform: translateY(-2px); }
.botao:active { transform: translateY(0); }

.botao-contorno {
  background: none;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--linha-forte);
}
.botao-contorno:hover, .botao-contorno:focus-visible {
  background: var(--tinta);
  color: var(--papel);
}
.final .botao-contorno { color: var(--papel); box-shadow: inset 0 0 0 1px rgba(246,242,236,.45); }
.final .botao-contorno:hover, .final .botao-contorno:focus-visible {
  background: var(--papel); color: var(--tinta);
}

/* ==================================================================
   08 · FOTOGRAFIA
   ================================================================== */

.foto {
  position: relative;
  overflow: hidden;
  background: var(--papel-3) center / cover;
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms var(--curva), transform 1200ms var(--curva);
}
.foto img.carregada { opacity: 1; transform: none; }

/* ==================================================================
   09 · FORMULÁRIO E RODAPÉ
   ================================================================== */

.contacto .intro { grid-column: 1 / span 4; }
.contacto form { grid-column: 6 / -1; display: grid; gap: clamp(1.25rem, 3vh, 2rem); }

.campo { display: grid; gap: 0.5rem; }
.campo label {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
}
.campo label .obrigatorio { color: var(--rosa-tinta); }
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1.0625rem; /* 17px — evita o zoom automático do iOS */
  color: var(--tinta);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--linha-ui);
  padding: 0.75rem 0 0.6rem;
  min-height: 48px;
  border-radius: 0;
  transition: border-color var(--medio) var(--curva);
}
.campo select { appearance: none; width: 100%; padding-right: 2rem; }
.campo .caixa-select { position: relative; display: block; }
.campo .caixa-select::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.campo textarea { resize: vertical; min-height: 7rem; line-height: 1.6; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: none; border-bottom-color: var(--tinta); }
.campo input:focus-visible,
.campo select:focus-visible,
.campo textarea:focus-visible {
  outline: 2px solid var(--tinta);
  outline-offset: 3px;
}
.campo .ajuda { font-size: var(--t-nota); color: var(--grafite); }
.campo .erro {
  font-size: var(--t-nota);
  color: var(--rosa-tinta);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.campo .erro:empty { display: none; }
.campo .erro svg { width: 0.95rem; flex: none; }
.campo[data-invalido="sim"] input,
.campo[data-invalido="sim"] select,
.campo[data-invalido="sim"] textarea { border-bottom-color: var(--rosa-tinta); border-bottom-width: 2px; }

.dupla { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }

.recado {
  font-size: var(--t-nota);
  color: var(--grafite);
  border-left: 1px solid var(--rosa);
  padding-left: 1rem;
}

.dados-contacto {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid;
  gap: 1.1rem;
  font-size: var(--t-nota);
}
.dados-contacto dt {
  font-size: var(--t-etiqueta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 0.2rem;
}
.dados-contacto dd { margin: 0; color: var(--tinta); }

/* ---- rodapé: a última página ---- */

.rodape {
  position: relative;
  z-index: var(--z-conteudo);
  padding: clamp(6rem, 18vh, 12rem) var(--margem) clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--linha);
}
.rodape-centro {
  display: grid;
  place-items: center;
  gap: clamp(1.5rem, 4vh, 2.5rem);
  text-align: center;
  margin-bottom: clamp(4rem, 12vh, 8rem);
}
.rodape .assinatura-final { width: min(60vw, 22rem); color: var(--tinta); }
.rodape .ultimo-traco {
  width: min(80vw, 30rem);
  height: 3rem;
  color: var(--rosa);
  overflow: visible;
}
.rodape .ultimo-traco path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.rodape-pe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  align-items: end;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linha);
  font-size: var(--t-nota);
  color: var(--grafite);
}
.rodape-pe nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; }
.rodape-pe a { min-height: 44px; display: inline-flex; align-items: center; }

/* ==================================================================
   10 · ECRÃ PEQUENO
   ================================================================== */

@media (max-width: 1080px) {
  .pessoa-corpo, .pessoa-figura,
  .materia .texto, .materia .amostras,
  .capas .quadro, .capas .texto,
  .camisas .intro, .camisas .folha,
  .classico .quadro, .classico .texto,
  .contacto .intro, .contacto form,
  .manifesto .frase-grande { grid-column: 1 / -1; }

  .pessoa-figura { max-width: 26rem; margin-inline: auto; }
  .materia .amostras { grid-template-columns: repeat(2, 1fr); margin-top: 2.5rem; }
  .capas .texto, .classico .texto { margin-top: clamp(2rem, 5vh, 3rem); }
  .camisas .folha { margin-top: 2.5rem; grid-template-columns: repeat(2, 1fr); }

  .duas .par { grid-template-columns: repeat(2, 1fr); gap: var(--goteira); }
  .duas .par figure:first-child,
  .duas .par figure:last-child,
  .duas .par-nota:first-child,
  .duas .par-nota:last-child { grid-column: auto; }
  .tradicao-texto { grid-column: 2 / span 10; }
  .tradicao-foto { grid-column: 3 / span 8; }
  .duas .par figure:last-child { transform: translateY(clamp(1rem, 4vh, 3rem)); }

  .galeria-grelha { grid-template-columns: repeat(6, 1fr); }
  .g-a { grid-column: 1 / span 4; }
  .g-b { grid-column: 5 / span 2; }
  .g-c { grid-column: 1 / span 2; }
  .g-d { grid-column: 3 / span 4; }
  .g-e { grid-column: 1 / span 6; }
  .g-f { grid-column: 1 / span 3; }
  .g-g { grid-column: 4 / span 3; }
  .g-h { grid-column: 2 / span 4; }
}

@media (max-width: 720px) {
  :root { --t-etiqueta: 0.8125rem; }

  /* Em telemóvel nada que se leia desce abaixo de 16 px: além de ser o
     mínimo confortável, é o que impede o iOS de dar zoom sozinho. */
  .etapa p, .especificacoes dd, .campo .ajuda, .recado,
  .dados-contacto dd, .rodape-pe, .indice-pe { font-size: 1rem; }
  .nota-margem { font-size: 1rem; }

  .cabecalho-capitulo { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .cabecalho-capitulo .risco { display: none; }

  .dupla { grid-template-columns: 1fr; }
  .materia .amostras { grid-template-columns: 1fr 1fr; }
  .camisas .folha { grid-template-columns: 1fr 1fr; }

  .galeria-grelha { grid-template-columns: repeat(2, 1fr); }
  .g-a, .g-e, .g-d { grid-column: 1 / -1; }
  .g-b, .g-c, .g-f, .g-g, .g-h { grid-column: span 1; margin-top: 0; }

  .duas .par { grid-template-columns: 1fr; }
  .tradicao-texto, .tradicao-foto { grid-column: 1 / -1; }
  .indice-item { grid-template-columns: 2.5rem 1fr; }
  .indice-item .miniatura { display: none; }

  .folio { display: none; }
  .duas .par figure:last-child { transform: none; }

  /* Em coluna única, a moldura das etapas passa a ser só horizontal:
     a linha vertical solta à direita não separava nada. */
  .etapa { border-right: 0; }

  /* No pé da abertura fica só o convite a descer. As duas etiquetas
     laterais repetem o que a página conta a seguir e, empilhadas, davam
     três blocos de texto antes de a história começar. */
  .abertura-pe { justify-content: center; }
  .abertura-pe p { display: none; }
}

/* Janelas baixas — portátil com muita barra, telemóvel deitado. O traço
   e a assinatura disputam o mesmo meio do ecrã, por isso a assinatura
   encolhe e o pé da abertura sai. */
@media (max-height: 620px) {
  .abertura { row-gap: clamp(0.75rem, 2vh, 1.5rem); }
  .abertura .assinatura-marca { width: min(46vw, 18rem); }
  .abertura .frase { font-size: 1.05rem; }
  .abertura-pe p { display: none; }
  .abertura-pe { justify-content: center; }
  .desca .fio-vertical { height: 1.6rem; }
}

/* Em ecrãs sem rato o fio é mais discreto: há menos área para ele e o
   conteúdo tem prioridade. */
@media (hover: none) {
  .fio { --fio-opacidade: 0.34; }
}

/* ==================================================================
   11 · MOVIMENTO REDUZIDO E SEM JAVASCRIPT
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* A narrativa não desaparece: os desenhos ficam feitos, as entradas
     ficam visíveis, a história lê-se toda — só não se move. */
  [data-entrada] > * { opacity: 1; transform: none; }
  .cabecalho-capitulo .risco { --risco: 1; }
  .foto img { opacity: 1; transform: none; }
  .atravessado::after { --corta: 1; }
  .desca .fio-vertical { animation: none; opacity: 0.6; }
}

/* Sem JavaScript o conteúdo continua inteiro: cai apenas o que é
   camada de animação. */
/* Sem JavaScript cai a camada de animação. O croqui por cima da
   fotografia também sai: só faz sentido enquanto é ele que esconde a
   peça, e sobreposto a uma foto que já se vê seria rabisco. */
.sem-js .fio,
.sem-js .rasto,
.sem-js .lapis,
.sem-js .revelar .desenho,
.sem-js .revelar .aviso { display: none; }
.sem-js [data-entrada] > * { opacity: 1; transform: none; }
.sem-js .cabecalho-capitulo .risco { --risco: 1; }
.sem-js .foto img { opacity: 1; transform: none; }
.sem-js .revelar .foto-base {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  transform: none;
}
/* O índice e o som são camadas de JavaScript. Sem ele desaparecem — a
   navegação continua a existir no rodapé e nas âncoras da página. */
.sem-js .indice,
.sem-js #botao-indice,
.sem-js #botao-som { display: none; }