/* =============================================================
   THE RIVERLAND — reset e elementos base
   Depende de tokens.css. Sem framework: tudo o que aqui está é usado.
   ============================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* O corte de movimento aplica-se em dois casos: quando o sistema o pede e a
   pessoa não disse explicitamente o contrário, e quando a pessoa o desligou à
   mão. O `:not([data-motion="on"])` é o que deixa alguém com a preferência
   ligada no sistema optar por ver o movimento neste site — sem JS o atributo
   não existe e a preferência do sistema manda, como deve ser. */
html[data-motion="off"] :is(*, *::before, *::after) {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html[data-motion="off"] { scroll-behavior: auto; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) { scroll-behavior: auto; }
  html:not([data-motion="on"]) :is(*, *::before, *::after) {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Exceção deliberada aos dois blocos acima: o encadeado entre as fotografias
   do hero é só opacidade — nada se desloca, nada roda, nada faz zoom. É
   justamente o tipo de transição que se recomenda MANTER quando se pede
   movimento reduzido, em vez de deslizes e paralaxes. Cortá-la era exagero meu.
   Precisa de !important para vencer os !important de cima; fica fora do @media
   para valer também para quem desliga o movimento à mão.
   O deslize e o fluido continuam desligados: esses são movimento a sério. */
.hero__media picture { transition-duration: 1.4s !important; }

/* O atributo `hidden` é `display: none` na folha do browser, e QUALQUER regra
   de autor com `display` o vence. Sem isto, esconder por JS falha em silêncio
   em tudo o que seja flex ou grid — foi o que aconteceu na pesquisa das
   regras: as secções (.stack, flex) e os links do índice (inline-flex)
   continuavam à vista com zero resultados dentro. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;          /* 17px — Lora tem olho pequeno */
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- ritmo vertical: espaçamento vem do layout, não de margens soltas --- */
h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

input, button, textarea, select { font: inherit; color: inherit; }

/* --- títulos --- */
h1, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: .005em;
  text-wrap: balance;
  color: var(--ink);
}
/* Cinzel Decorative é ornamentada de mais para títulos pequenos.
   Do h3 para baixo passamos a Lora 600. */
h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: var(--leading-snug);
  text-wrap: balance;
  color: var(--ink);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
h5, h6 { font-size: var(--text-base); }

p { text-wrap: pretty; }

/* --- ligações: azul-rio, e só aqui --- */
a { color: var(--river); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--river-bright); }

/* Ligações que são blocos inteiros (cartões, itens de navegação) não levam
   a cor de link — herdam, e o estado mostra-se de outra maneira. */
a.plain, a:has(> article), nav a { color: inherit; text-decoration: none; }

strong, b { font-weight: 600; color: var(--ink); }
em, i { font-style: italic; }

small { font-size: var(--text-sm); }

hr {
  border: 0;
  border-top: 1px solid var(--edge);
  margin-block: var(--sp-7);
}

blockquote {
  border-left: 2px solid var(--gold);
  padding-left: var(--sp-4);
  font-style: italic;
  color: var(--ink-dim);
}

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9em;
}

/* --- foco visível: obrigatório, e sempre o ouro --- */
:focus-visible {
  outline: var(--ring);
  outline-offset: 3px;
  border-radius: var(--radius);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--gold); color: var(--ground); }

/* --- saltar para o conteúdo (teclado e leitores de ecrã) --- */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -4rem;
  z-index: 100;
  background: var(--gold);
  color: var(--on-accent);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-util);
  text-transform: uppercase;
  letter-spacing: .1em;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-4); }

/* --- só para leitores de ecrã --- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =============================================================
   Primitivas de layout
   ============================================================= */

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* NÃO encolhe o contentor: encolhe a COLUNA lá dentro, encostada à esquerda.
   Encolher o contentor obrigava a recentrar, e a aresta esquerda deixava de
   alinhar com o logo e a navegação — que vivem num .wrap de 1180px. Assim o
   texto tem largura de leitura confortável e a página mantém uma só grelha. */
.wrap--mid > * { max-width: var(--maxw-mid); }
.wrap--prose { max-width: var(--maxw-prose); }

/* Empilhamento com espaçamento consistente — evita margens que colapsam. */
.stack { display: flex; flex-direction: column; }
.stack > * { margin: 0; }
.stack--2 { gap: var(--sp-2); }
.stack--3 { gap: var(--sp-3); }
.stack--4 { gap: var(--sp-4); }
.stack--5 { gap: var(--sp-5); }
.stack--6 { gap: var(--sp-6); }
.stack--7 { gap: var(--sp-7); }

.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }

/* Colunas explícitas, não `auto-fit`. Com auto-fit as colunas vazias colapsam
   e um cartão sozinho estica-se pela largura toda, o que parece um erro.
   Assim, um item ocupa uma coluna e o resto fica vazio, como deve ser. */
.grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 42rem) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* Secção: o espaçamento vertical do site vive aqui e em mais lado nenhum,
   para não haver margens de secções a lutar umas com as outras. */
.section { padding-block: var(--sp-8); }
.section--tight { padding-block: var(--sp-7); }
.section--loose { padding-block: var(--sp-9); }
.section + .section { padding-top: 0; }

/* Texto corrido: largura de leitura e ritmo entre parágrafos. */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose > * + h2 { margin-top: var(--sp-7); }
.prose > * + h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--gold); }

/* Conteúdo largo (tabelas, mapas) nunca faz a página deslizar de lado. */
.scroll-x { overflow-x: auto; }

/* --- estado inicial das revelações ---
   Só se esconde quando o JS de movimento está mesmo a correr (`js-motion` é
   posta pelo site.js). Sem JS, ou com prefers-reduced-motion, a página aparece
   inteira — os motores de busca também. */
.js-motion [data-reveal]:not([data-reveal-children]):not(.is-revealed) { opacity: 0; }
/* Nas grelhas o estado é de cada filho, não do contentor: cada um é observado
   e revelado por si (ver revelarFilhos em site.js). */
.js-motion [data-reveal-children] > :not(.is-revealed) { opacity: 0; }

/* --- utilitários de tipo --- */
.label {
  font-family: var(--font-util);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-dim);
}
.label--gold { color: var(--gold); }
.label--river { color: var(--river); }

.lede { font-size: var(--text-md); color: var(--ink-dim); max-width: var(--measure); }
.dim { color: var(--ink-dim); }
.nums { font-variant-numeric: tabular-nums; }

/* --- tabelas -------------------------------------------------------------
   Aparecem no código penal e noutros guias de referência. Nunca tinham
   estilo: saíam sem molduras, apertadas e desalinhadas.

   `display: block` com `overflow-x: auto` em ecrã estreito: uma tabela de três
   colunas com nomes de crimes longos não cabe em 390px, e sem isto empurrava a
   página inteira para o lado. Assim rola dentro de si própria — que é a regra
   deste projeto para conteúdo largo. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-5);
  font-size: var(--text-sm);
}
.prose thead th {
  text-align: left;
  font-family: var(--font-util);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--gold);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--edge-strong);
  white-space: nowrap;
}
.prose tbody td {
  padding: var(--sp-3);
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
  color: var(--ink-dim);
}
/* A primeira coluna é o nome da coisa: fica no tom principal. */
.prose tbody td:first-child { color: var(--ink); }
/* Números alinhados e com a mesma largura de dígito, para as colunas de penas
   e coimas se poderem comparar de relance. */
.prose tbody td:not(:first-child) {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover td { background: var(--surface); }

@media (max-width: 40rem) {
  .prose table { display: block; overflow-x: auto; }
}