/* Quimeras — filter homepage.
   Adapted from the V2 mockup. Self-hosted fonts (no external calls). Article-view CSS and
   the preview zoom control from the mockup are intentionally absent — articles are their own
   sovereign files; only Bitter (titles) + JetBrains Mono (labels) are used here. */

@font-face {
  font-family: 'Bitter';
  src: url('/_src/fonts/bitter-variable-latin.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/_src/fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
  font-weight: 400 800; font-style: normal; font-display: swap;
}

:root {
  --bg: #fafaf8; --ink: #1b1a17;   /* --ink-soft (#2a2925) retirado 2026-07-30: todos os títulos e o hover das opções passaram a --ink */
  --mono-label: #75736f; --mono-meta: #75736f; --sub-cat: #75736f;   /* unified grey — WCAG AA (~4.5:1) on --bg */
  --desc-gray: #75736f; --rule: #d9d7d1; --col: 598px;
  --lido: #75736f;   /* estado de leitura — próprio token para se poder afinar num só sítio */
}

* { box-sizing: border-box; }
/* -webkit-text-size-adjust — iOS only; nothing else honours it, so this changes nothing on
   Android or desktop. Added 2026-08-08 as a candidate cause of mobile #3 — it was NOT the cause
   (the culprit was `text-wrap: balance`, see below). Kept anyway: iOS does inflate text on pages
   it judges "not mobile-friendly", and pinning it to 100% is standard practice. Verified on the
   owner's iPhone XS: 23.5px asked, 23.5px painted. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: var(--ink); }

.page { max-width: var(--col); margin: 0 auto; padding: 54.5px 23.5px 208px; --readcol: 520px; }   /* topo: era 109px (2026-08-02) */

/* masthead */
.title { text-align: center; font-family: 'Bitter', serif; font-weight: 800; font-size: clamp(40px, 14vw, 68px);
  letter-spacing: 0.01em; color: var(--ink); line-height: .95; margin: 0; }
/* Só o masthead que REALMENTE faz alguma coisa se comporta como clicável: a homepage com JS
   (o home.js põe-lhe role=button) ou um masthead que contenha um link (o 404). Nas 4 páginas de
   género e nas 8 de caderno não há link nem JS — davam mão de cursor e hover a mentir. */
.title:has(a) { cursor: pointer; }              /* o 404, cujo masthead É um link */
@media (hover: hover) { .title:has(a):hover { color: #000; } }
/* a homepage já não usa [role=button] no h1 — o botão está DENTRO dele (.title-button, abaixo),
   e é ele que traz o cursor e o hover. Nas 4 páginas de género e nas 8 de caderno continua
   a não haver link nem JS: masthead inerte, sem mão de cursor. */
.title a { color: inherit; text-decoration: none; }   /* 404: era o único masthead sublinhado do site */

/* filter — written as a sentence */
.sentence { margin: 0 auto; max-width: calc(var(--readcol) + 52px);   /* o topo vem do --band-gap */
  min-height: 62px; display: flex; flex-direction: column; justify-content: center; }   /* reserve height so the no-JS género nav → filter sentence swap never shifts the list */
/* no-JS floor: horizontal género nav (home.js replaces it with the filter sentence) */
.gen-menu { text-align: center; margin: 0; font-family: 'JetBrains Mono', monospace;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.gen-menu a { color: var(--ink); text-decoration: none;
  padding: 13px 0; }   /* alvo de toque: 17 → 43px. Padding VERTICAL num elemento inline aumenta a
                          área tocável sem mexer na altura da linha nem empurrar os vizinhos, que
                          estão ao lado e não por cima. (2026-08-09) */
@media (hover: hover) { .gen-menu a:hover { color: #000; } }
.gen-menu .gen-menu-sep { color: var(--mono-meta); margin: 0 0.55em; }
.sentence-text { position: relative; text-align: center; font-family: 'Bitter', serif; font-weight: 400;
  font-style: italic; font-size: 23.5px; line-height: 1.2; color: var(--desc-gray); margin: 0; }
/* `text-wrap: balance` REMOVED 2026-08-09 — it was the cause of mobile #3.
   It was here "so it never leaves a 1-word orphan". Balancing exists to OVERRULE the natural
   break points and even the line lengths, and engines disagree about when to apply it. WebKit
   applied it where Blink and Gecko do not, and split «A apresentar uma LISTA» across two lines
   although it needs 259px and had 343px — while the WIDER line below it (285px) stayed whole.
   Confirmed on the owner's iPhone XS: 3 lines on Safari AND on Firefox (both WebKit), 2 lines on
   Firefox/Android (Gecko) and in Chromium (Blink); switching balance off alone fixed it.
   It survived white-space:nowrap over the whole line and a forced reflow — nothing can hold a
   break that balancing re-decides afterwards.
   Nothing is lost: `.sentence-chunk { white-space: nowrap }` already keeps each phrase whole.
   Measured with balance off across 10 género states × 320/360/375px — NOT ONE single-word line.
   ⚠️ Do not reinstate it. This is engine behaviour, not width, so it is not phone-only. */
.sentence-text .sentence-link-words { color: var(--desc-gray); }
.sentence-text .sentence-chunk { white-space: nowrap; }   /* keep each chunk ("a lista" / "das crónicas" / "mais recentes") unbreakable */
.sentence-text .sentence-period, .sentence-text .sentence-comma { margin-left: -4px; }   /* period / comma hug the preceding pick (cancel its 4px right margin) */
.pick { position: relative; display: inline-block; vertical-align: baseline; font-style: normal;
  font-weight: 700; font-size: 18px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1.5px solid var(--ink); padding: 9px 0; line-height: 1; cursor: pointer; transition: color .12s ease; }   /* padding+line-height in the base → underline identical on every breakpoint (the mobile measurements) */
@media (hover: hover) { .pick:hover { color: #000; } }
/* Numa multi-selecção só a PRIMEIRA palavra abre o menu; as outras são texto simples. Tinham o
   mesmo aspecto da interactiva — mão de cursor e hover — e clicá-las não fazia nada. */
/* .pick-inert existiu para as palavras de uma multi-selecção que NÃO abriam o menu. Desde
   2026-08-08 (#20) todas abrem, e a classe deixou de ser emitida — regras removidas. */
/* breathing room around the bold, underlined picks (both sides); the final period hugs via .sentence-period's negative margin */
.pick.pick-gen, .pick.pick-time, .pick.pick-structure, .pick.pick-abece { margin: 0 4px; }

/* O menu passou a ser IRMÃO da pick (2026-07-31) em vez de filho — dentro dela, o nome
   acessível do role=button virava "TEXTOS Prosa Poesia…". Por isso o contexto de posicionamento
   passa para este invólucro; a .pick mantém o seu position:relative sem mal nenhum. */
.pick-wrap { position: relative; display: inline-block; }
.filtermenu { position: absolute; left: 50%; transform: translateX(-50%); top: 39px; background: var(--bg);
  border: 1px solid var(--rule); box-shadow: 0 21px 47px rgba(0,0,0,.13); z-index: 6; min-width: 195px;
  padding: 10.5px 0; display: flex; flex-direction: column; text-align: center; }
.menu-option { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 13.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--mono-meta); background: none; border: 0; cursor: pointer;
  padding: 8px 26px; text-align: center; width: 100%; transition: color .12s ease; }
@media (hover: hover) { .menu-option:hover { color: var(--ink); } }   /* mesmo preto que o resto; o estado .menu-option-on distingue-se por peso + sublinhado */
.menu-option.menu-option-on { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }   /* selected in the multi-pick */

/* chronological list (also the no-JS floor) */
.list { max-width: var(--readcol); margin: 0 auto; padding: 0; }
/* "Ver a lista completa" — reveals the rest of the list (native <details>; works no-JS) */
.more > summary { display: block; list-style: none; cursor: pointer; text-align: center;
  font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mono-meta); padding: 30px 0 4px; transition: color .12s ease; }
.more > summary::-webkit-details-marker { display: none; }   /* strip the disclosure triangle (WebKit) */
.more > summary::marker { content: ""; }
@media (hover: hover) { .more > summary:hover { color: var(--ink); } }
.more[open] > summary { display: none; }                     /* once revealed, the link disappears */
/* o botão vive DENTRO do <h1> (2026-07-31): o h1 continua a ser cabeçalho e isto é um <button>
   a sério. Herda tudo do .title para ficar visualmente idêntico ao que era. */
.title-button { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; display: block;
  width: 100%; text-align: center; }
@media (hover: hover) { .title-button:hover { color: #000; } }
.row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 18px;
  text-decoration: none; color: inherit; padding: 17px 0; border-bottom: 1px solid #e7e5e0;
  cursor: pointer; transition: transform .15s ease; }
@media (hover: hover) { .row:hover { transform: translateX(2px); } }
/* (aqui havia um `.row:hover .row-title { color: #000 }` — LETRA MORTA, removido 2026-08-01: tinha a
   mesma especificidade que o `.row:link .row-title` mais abaixo mas vinha ANTES dele, por isso nunca
   ganhava. O hover a sério é o que está no fim do bloco do estado de leitura.) */
.row .row-title { font-family: 'Bitter', serif; font-weight: 700; font-size: 21px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); }   /* títulos de lista = PRETO do masthead */
.row .row-gen { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--sub-cat); display: block; margin-top: 5px; }
.row .row-blurb { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.1em;
  color: var(--mono-label); display: block; margin-top: 4px; }
.row .row-blurb { display: none; }   /* descritivos NUNCA aparecem (dono, 2026-07-31): o campo é opcional e só
                                 existe como nota interna, tal como o data-escrito. Apagar esta linha
                                 volta a mostrá-los nas linhas da lista. */
.row .row-date { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em;
  color: var(--mono-meta); white-space: nowrap; }

/* ---- estado de leitura — duas camadas (2026-07-29) --------------------------
   camada 1 · SEM JS: :visited dá o cinzento. Só cor: os browsers não deixam o
     :visited desenhar riscos, bordas, fundos nem contornos (privacidade —
     senão uma página podia medir a diferença e aspirar o histórico). O risco
     sem JS é impossível, e isso está aceite.
   camada 2 · COM JS: a classe .lido (posta pelo home.js a partir do QLidos,
     que lê a lista do PRÓPRIO site) acrescenta o risco. Classe normal → sem
     restrições nenhumas.
   ORDEM OBRIGATÓRIA: :link → :visited → .lido → :hover → :active. Todas estas regras
   empatam em especificidade, por isso é a ORDEM que decide — o hover/active TEM de
   ficar por último, ou uma linha lida ficava cinzenta debaixo do rato (e, no
   telemóvel, ao ser premida). Nunca reordena nada: isto é só cor e decoração.

   HOVER SÓ COM RATO (2026-08-01): o :hover está fechado num @media (hover: hover).
   Um telemóvel não tem ponteiro — tem um dedo — e o browser finge um :hover quando
   se toca em alguma coisa, para os sites que só mostram o que interessa ao passar
   por cima não ficarem inutilizáveis. Só que esse hover fingido não se limpa: o dedo
   não se afasta, levanta-se. Resultado: tocava-se numa linha, lia-se o texto,
   voltava-se atrás — e a linha ficava preta e 2px à direita das outras, com ar de
   estar escolhida sem nada estar escolhido. O :active FICA DE FORA da guarda de
   propósito: esse é o estado de "está a ser premida", funciona bem no toque e
   desaparece sozinho ao levantar o dedo. */
.row:link .row-title    { color: var(--ink); }                       /* por ler = preto */
.row:visited .row-title { color: var(--lido); }                       /* camada 1 */
.row.lido .row-title    { color: var(--lido); text-decoration: line-through;
                   text-decoration-thickness: 1.5px; text-decoration-color: var(--ink); }
@media (hover: hover) {   /* só com rato — ver a nota do hover pegado, acima */
  .row:hover .row-title, .row.lido:hover .row-title { color: #000; }
}
.row:active .row-title, .row.lido:active .row-title { color: #000; }         /* por último, de propósito */
.list-empty { max-width: var(--readcol); margin: 0 auto; font-family: 'Bitter', serif; font-style: italic;
  color: var(--desc-gray); font-size: 19.5px; text-align: center; }

/* cadernos grouping */
.caderno-grid { max-width: var(--readcol); margin: 0 auto; }
.caderno-heading { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mono-label); border-bottom: 1px solid #e7e5e0;
  padding-bottom: 11.5px; margin: 44px 0 8px; }
.caderno-heading:first-child { margin-top: 0; }
.serie { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 18px;
  text-decoration: none; color: inherit; padding: 14px 0; margin-left: 24px;   /* inset under the género header */
  border-bottom: 1px solid #efeeea; cursor: pointer; }   /* name | count-right (tablet+); count drops below on mobile */
@media (hover: hover) { .serie:hover .serie-name { color: #000; } }
.serie .serie-name { display: block; font-family: 'Bitter', serif; font-weight: 700; font-size: 21px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); }   /* mesmo preto que .row .row-title e .art-title (2026-07-29) */
.serie .serie-count { display: block; margin-top: 0; font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mono-meta); white-space: nowrap; }   /* count on the right (tablet+), drops below on mobile */
.serie .serie-blurb { display: block; margin-top: 4px; font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px; letter-spacing: 0.1em; color: var(--mono-label); }   /* matches List's descritivo (.row-blurb) */
/* Avulsos is a real caderno — no special de-emphasis; it renders like any other. */

/* caderno detail */
.caderno { max-width: var(--readcol); margin: 0 auto; }
.return { display: block; width: 100%; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 15px;
  letter-spacing: 0.18em; line-height: 2.05; text-transform: uppercase; color: var(--mono-meta); background: none;
  border: 0; text-decoration: none; cursor: pointer; padding: 30px 0 4px; transition: color .12s ease; }
/* #40 (2026-08-09) — A SETA VAI COLADA À ÚLTIMA PALAVRA.
   A frase quebra onde precisar; a seta nunca fica sozinha, porque vive dentro de um span que não
   quebra, agarrada à palavra a que pertence. O build escreve esse span (`_com_seta`).
   SUBSTITUI o `flex-wrap: wrap-reverse` posto aqui para o #37, que levantava a seta para uma linha
   própria só quando a frase não cabia. Era a preferência dele na altura, mas como apenas «Outros
   cadernos em Caprichos» não cabe, ficava UMA página do sítio com um comportamento diferente de
   todas as outras — e foi isso que ele veio corrigir: «tem de haver uma consolidação».
   Medido a 360px, nas cinco páginas de caderno: quatro numa linha, Caprichos em duas, e a seta
   nunca isolada em nenhuma. A 375px cabem todas numa linha. */
  /* Shared notation's WORDING + arrow (CADERNO ↑ / INÍCIO ↑), but CENTRED like every other shell
     element — masthead, gen-menu, filter sentence and `.more > summary` are all centred, and this
     link was originally paired with that summary. Right-alignment belongs to the ARTICLE nav:
     articles are asymmetric (text left, nav right); the shell is a symmetric column. (2026-07-28) */
/* #49 (2026-08-10) — o «Ver a lista completa» da entrada ganhou uma seta PARA BAIXO e entra nas
   mesmas duas regras. O dono pediu-lhe «a similar distance as other similar links on the navs of
   articles»: essa distância é .15em, o valor que já estava aqui e que os navs dos artigos também
   usam. Uma regra só para os dois casos, para não haver duas distâncias a divergirem depois. */
.return .art-nowrap,
.notfound-exit .art-nowrap,
.more > summary .art-nowrap { white-space: nowrap; }   /* a última palavra e a seta, juntas — ver #40 */
.return .art-arrow,
.notfound-exit .art-arrow,
.more > summary .art-arrow { margin-left: .15em; letter-spacing: 0; display: inline-block; }
@media (hover: hover) { .return:hover { color: var(--ink); } }
/* #38 (2026-08-09) — «Um caderno de PROSA.» passa a ser UMA frase, toda no mesmo estilo.
   O dono: a linha «não é uniforme, o género é de um estilo diferente… tem de ser toda igual,
   itálico etc, para todo o sítio, não só no telemóvel».
   Percurso desta regra, porque é o segundo corte: nasceu a negrito, maiúsculas, tamanho próprio e
   quase preto — ou seja, exactamente o tratamento que a homepage dá às PICKS, que se clicam. Aqui
   não há nada para clicar. A 2026-08-09 saiu-lhe o negrito (#17); agora sai o resto. O <span
   class="genero-name"> FICA na marcação — não custa nada e deixa a porta aberta se algum dia se
   quiser voltar a distinguir a palavra — mas já não traz estilo nenhum consigo: herda o itálico,
   o corpo e o cinzento da frase, como qualquer outra palavra dela. */
.genero-name { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.caderno-list { margin: 0; }
.art-row { display: grid; grid-template-columns: 36.5px 1fr auto; align-items: baseline; column-gap: 15.5px;
  padding: 19.5px 0; border-bottom: 1px solid #e7e5e0; text-decoration: none; color: inherit;
  cursor: pointer; transition: transform .15s ease; }
.art-row:first-of-type { border-top: 1px solid #e7e5e0; }
@media (hover: hover) { .art-row:hover { transform: translateX(2px); } }
@media (hover: hover) { .art-row:hover .art-title { color: #000; } }
.art-number { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; letter-spacing: 0.06em; color: var(--mono-label); }
.art-title { display: block; font-family: 'Bitter', serif; font-weight: 700; font-size: 21px; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); }   /* mesmo preto que .row .row-title e .serie .serie-name (2026-07-29) */

/* estado de leitura nas páginas de CADERNO — mesmas duas camadas da homepage.
   Scoped a .caderno-list-art de propósito: a página de género usa o mesmo .caderno-list mas as
   suas linhas apontam para CADERNOS, que não se leem — sem isto, um caderno visitado
   aparecia riscado. Mesma ordem obrigatória: :visited → .lido → :hover → :active,
   e o :hover igualmente fechado no @media (hover: hover) — ver a nota da homepage. */
.caderno-list-art .art-row:visited .art-title { color: var(--lido); }                    /* camada 1, sem JS */
.caderno-list-art .art-row.lido    .art-title { color: var(--lido); text-decoration: line-through;
    text-decoration-thickness: 1.5px; text-decoration-color: var(--ink); }    /* camada 2, com JS */
@media (hover: hover) {   /* só com rato — ver a nota do hover pegado */
  .caderno-list-art .art-row:hover .art-title,
  .caderno-list-art .art-row.lido:hover .art-title { color: #000; }
}
.caderno-list-art .art-row:active .art-title,
.caderno-list-art .art-row.lido:active .art-title { color: #000; }                       /* por último */
.art-blurb { display: block; font-family: 'Bitter', serif; font-style: italic; font-size: 17px; line-height: 1.45;
  color: var(--desc-gray); margin-top: 6.5px; max-width: 42ch; }
.art-date { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0.04em;
  color: var(--mono-meta); white-space: nowrap; }

/* caderno index page (static /Género/<slug>.html): reduced site link · caderno-name masthead · list variants */
.wordmark { display: block; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--mono-meta); text-decoration: none;
  margin: 0 0 30px; transition: color .12s ease; }
@media (hover: hover) { .wordmark:hover { color: var(--ink); } }
/* ALVO DE TOQUE (2026-08-09) — o «quimeras» tem 17px de altura e é o primeiro link da página.
   O alvo cresce para 44px com um pseudo-elemento, NÃO com padding: a altura desta linha está
   somada no `--mini-h: 47px` (17 + 30 de margem) que reserva a faixa do masthead. Mexer-lhe na
   caixa desalinharia a grelha vertical das 12 páginas-índice — exactamente o que o trabalho de
   2026-08-02 arrumou. Assim a caixa não muda um pixel e só a área tocável cresce. */
.wordmark { position: relative; }
.wordmark::after { content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 44px; transform: translateY(-50%); }
.title-caderno { text-transform: uppercase; }                        /* caderno name, uppercased like the género masthead */
.art-row.art-row-no-number { grid-template-columns: 1fr auto; }             /* collection row — no number column */
.serie-note { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--mono-meta); margin-top: 6px; }                  /* série · <nome> — i/iii (inline, no cluster) */
.caderno-empty { text-align: center; font-family: 'Bitter', serif; font-style: italic; font-size: 22px;
  color: var(--desc-gray); margin: 40px 0; }

/* Índice — flat A→Z title list; letter anchors + género note. Search field folds into the sentence. */
.index { max-width: var(--readcol); margin: 0 auto; }
.index-letter { font-family: 'Bitter', serif; font-weight: 700; font-size: 14px; color: var(--ink);   /* já era 700; o que a fazia parecer fraca era o cinzento --mono-meta contra títulos quase pretos */
  text-transform: uppercase; letter-spacing: 0.1em; margin: 30px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--rule); }
.index-letter:first-child { margin-top: 4px; }
.index-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  text-decoration: none; color: var(--ink); padding: 17px 0;
  border-bottom: 1px solid #e7e5e0; }   /* mesmo ritmo das linhas da lista */
.index-title { font-family: 'Bitter', serif; font-weight: 700; font-size: 21px; line-height: 1.3;
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink);
  padding-left: 18px; }   /* 21px = o mesmo .row-title da lista, das páginas de género e das de
                             caderno: é o tamanho de um título de peça em TODAS as listagens.
                             O recuo de 18px é o column-gap da lista, e só afecta o título — o
                             género·caderno continua encostado à direita.
                             PESO e CAIXA acrescentados 2026-08-09: só o tamanho tinha sido
                             igualado quando o índice foi promovido. Ficava a 400 e em caixa
                             baixa, sozinho contra o .row-title, o .art-title e o .serie-name,
                             todos 700 e maiúsculas — o mesmo título com duas aparências
                             conforme a listagem onde aparecia. */
/* hover igual ao das linhas da lista: a linha desliza 2px. Sublinhar SÓ o título dizia que o
   título era o link e o género não — e a linha inteira é que é o link. (fork, 2026-08-07) */
@media (hover: hover) { .index-row:hover { transform: translateX(2px); } }
.index-cad { color: var(--mono-meta); }
/* estado de leitura no ÍNDICE — as mesmas duas camadas da lista (2026-08-09). Sem isto a mesma
   peça aparecia lida na lista e por ler no índice. ORDEM OBRIGATÓRIA: :visited → .lido → :hover
   → :active, igual à da homepage; trocá-la faz o riscado desaparecer sob o hover. */
.index-row:visited .index-title { color: var(--lido); }                        /* camada 1, sem JS */
.index-row.lido    .index-title { color: var(--lido); text-decoration: line-through;
  text-decoration-thickness: 1px; text-underline-offset: 2px; }                /* camada 2, com JS */
@media (hover: hover) {
  .index-row:hover .index-title, .index-row.lido:hover .index-title { color: #000; }
}
.index-row:active .index-title, .index-row.lido:active .index-title { color: #000; }
.index-count { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--mono-meta);
  white-space: nowrap; flex: none; letter-spacing: 0.02em; }
.index-empty { font-family: 'Bitter', serif; font-style: italic; color: var(--mono-meta); text-align: center; padding: 24px 0; }
.index-search { font-family: 'Bitter', serif; font-style: italic; font-weight: 400; font-size: 19px; color: var(--ink);
  background: none; border: 0; border-bottom: 1.5px solid var(--ink); outline: none; text-align: center;
  /* o `outline: none` acima mata o anel por omissão; o anel DO SÍTIO volta no bloco :focus-visible
     mais abaixo. Antes ficava só uma mudança de cor da borda de 1px — 1,21:1 entre os dois
     estados, ou seja invisível a quem não estivesse à espera dela. (2026-08-09) */
  width: 7em; max-width: 70%; padding: 1px 0 3px; vertical-align: baseline;
  /* as MESMAS margens laterais das picks: o campo ocupa o lugar de uma palavra da frase e tem
     de respirar como ela. Tinha padding lateral de 4px em vez de margem, o que punha o ponto
     final 4px DENTRO da borda do campo em vez de encostado a ela. (fork, 2026-08-07) */
  margin: 0 4px; }
.index-search::placeholder { color: var(--mono-meta); font-style: italic; }
.index-search:focus::placeholder { color: transparent; }   /* hint clears on click/focus */
.index-search:focus { border-bottom-color: #000; }

/* no-JS fallback: the static floor list shows; JS-only controls hide until enhanced */
.sentence:empty { display: none; }

/* copyright — a single © at the foot, like the V1 pages */
/* O © passou de #c3c0b9 (1,74:1 — chumbava) para o cinzento que o resto do sítio já usa nas datas
   e nos rótulos: 4,53:1, passa AA com folga. Decisão do dono (2026-08-09), escolhida em vez de o
   deixar esbatido de propósito: o sítio deixa de levar uma falha de contraste conhecida. Fica
   visivelmente mais escuro — foi aceite ao decidir. */
.copyright { text-align: center; margin-top: 125px; font-size: 23.5px; color: var(--mono-meta); }

/* 404 */
/* ══════════════════════════════════════════════════════════════════════════
   A PÁGINA 404 — refeita a 2026-08-10 a partir da maqueta dele.
   «404 needs to be closer to this» · «build it with the text that's already there».

   A ideia é dele: a página deixa de pedir desculpa e passa a ser o VERBETE da palavra
   «quimera», cuja última acepção é «7. Esta página.». O 404 é a deixa da piada, não o assunto.

   O texto é dele e vem do Dicionário Priberam, creditado no fim; a acepção 7 é acrescento dele.
   Aqui só se escreve o desenho.

   O que esta folha herda do resto do sítio, e é quase tudo: a Bitter no texto corrido e na
   palavra-entrada, a JetBrains Mono no «quimeras», nos rótulos de domínio, na ETIMOLOGIA e na
   citação — exactamente os papéis que as duas faces já têm em todo o lado. E o «Página inicial ↑»
   é a notação dos links de regresso, seta incluída.

   DUAS ESCOLHAS QUE NÃO SÃO DELE E ESTÃO À ESPERA DE RESPOSTA (ver DOCS/404-REDESIGN.md):
     · a face dos algarismos. A maqueta mostra uma grotesca preta, que a Bitter não é (é slab).
       Usa-se a SECULAR ONE, que já está alojada aqui e é a mais próxima — para não acrescentar
       um ficheiro de fonte a um sítio que aloja tudo o que serve. Não é igual à maqueta.
     · a cor de destaque dos números das acepções e dos sinais = e ≠. Foi AMOSTRADA da imagem
       dele (#b23e32), não inventada, mas a captura tem suavização por subpixel e a leitura exacta
       não é de fiar. Vive numa variável só, `--verbete-tinta`: trocar é uma linha.
       ⚠️ É a PRIMEIRA cor do sítio fora dos cinzentos e da tinta preta.
   ══════════════════════════════════════════════════════════════════════════ */
:root { --verbete-tinta: #b23e32; }

/* A COLUNA É A DO SÍTIO, não uma nova. A maqueta mede ~610px de coluna e aqui são 551 (os 598
   do --col menos o padding) — 10% mais estreita. Não se inventa uma largura de página só para
   esta: a diferença é pequena e a captura dele pode estar a outro zoom. Se quiser os 610,
   é uma linha. */
.notfound { max-width: 100%; margin: 92px auto 0; text-align: left; }
/* Os algarismos. A largura pedida é ~metade da coluna, como na maqueta (304px em 610). */
/* BITTER — dono, 2026-08-10: «404 needs to be bitter». Fecha a única escolha que era minha e
   não dele nesta página: a maqueta mostrava uma grotesca preta, o sítio não tem nenhuma, e eu
   tinha usado a Secular One por ser a mais parecida entre as já alojadas. Ele prefere a face da
   casa, e assim a página não carrega mais nenhum ficheiro de fonte.
   Peso 800: é o mesmo dos títulos e do masthead, e era o que este «404» já tinha antes do
   redesenho — não é um peso novo.
   O CORPO DESCEU DE 168 PARA 149px porque a Bitter é mais larga do que a Secular One: aos 168 os
   algarismos ocupavam 0,562 da coluna, e a proporção da maqueta dele é 0,498 (304px em 610).
   Medidos cinco corpos: 140 → 0,468 · 148 → 0,495 · 152 → 0,508 · 156 → 0,522 · 168 → 0,562.
   149 dá 0,498. O que se mantém é a medida DELE — a largura relativa —, não o número de pixels. */
.notfound-code { font-family: 'Bitter', serif; font-weight: 800;
  font-size: 149px; line-height: .84; color: var(--ink); margin: 0;   /* zero: a wordmark já traz
     30px por baixo, e é essa soma (131 + 19 + 30) que põe os algarismos nos 180 — exactamente
     onde começa o título de todas as outras páginas. Uma margem aqui desalinhava-os. */
  text-align: center; letter-spacing: -.01em; }
.notfound-digits { display: inline-block; }
/* A frase, em maiúsculas, por baixo dos algarismos (2026-08-10, pedido dele).
   Fica na voz das maiúsculas do sítio — JetBrains Mono, caixa alta, o mesmo tracking dos outros
   rótulos —, que é a única voz de caixa alta que o sítio tem; inventar-lhe outra seria inventar.
   ⚠️ O QUE ESCOLHI E ELE NÃO DISSE: a tinta. Fica em --ink (a escura) e não no cinzento, para não
   sair uma gémea do «PÁGINA INICIAL ↑» logo por baixo, que é mono, caixa alta e do mesmo tamanho.
   Assim a frase é a afirmação e o link é a saída, e distinguem-se pela cor. Se preferir as duas
   iguais, ou esta em cinzento, é uma linha. */
/* AS MÉTRICAS DO TOPO — dono, 2026-08-10, depois de mudar a frase para cima do 404 e de ela
   passar a substituir a wordmark: «adjust the sentence in terms of metrics from the top».
   A frase ocupa agora o lugar que o «quimeras» ocupa em todas as outras páginas, por isso leva
   exactamente as mesmas medidas dele — 12,5px (14,5 acima dos 640), e `margin: 0 0 30px`.
   É essa soma que põe a linha pequena nos 131 e o elemento grande nos 180, como nas onze
   páginas-índice; e nos 46/93 no telemóvel.
   Medido antes: a frase começava aos 161, porque ainda tinha os 30px de margem POR CIMA de quando
   vinha depois dos algarismos, e essa margem passou a cair no topo da página. E os algarismos
   davam 95 no telemóvel contra 93 nas outras, porque a frase ficava a 14,5px onde a wordmark está
   a 12,5 — dois pixels de altura de linha, dois pixels de desalinhamento. */
.notfound-titulo { font-family: 'JetBrains Mono', monospace; font-size: 12.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  margin: 0 0 30px; text-align: center; }
.notfound-exit { margin: 34px 0 0; text-align: center; }
.notfound-exit a { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--mono-meta); text-decoration: none;
  padding: 13px 0; }   /* alvo de toque: 19 → 45px. É a ÚNICA saída da página de erro. */
@media (hover: hover) { .notfound-exit a:hover { color: var(--ink); } }

/* ---- o verbete ---------------------------------------------------------- */
.verbete { font-family: 'Bitter', serif; font-size: 22px; line-height: 1.78;
  color: var(--ink); margin: 96px 0 0; }
.verbete-palavra { font-weight: 700; }
.verbete-classe { font-style: italic; font-weight: 400; }
/* Os números e os sinais de sinónimo/antónimo são METADADOS, não texto corrido — por isso vão
   na mono, como todos os metadados do sítio, e não na Bitter. */
.verbete-num { font-family: 'JetBrains Mono', monospace; font-size: 15px;
  color: var(--verbete-tinta); letter-spacing: .02em; }
.verbete-rel { font-family: 'JetBrains Mono', monospace; font-size: 14px;
  color: var(--verbete-tinta); letter-spacing: .1em; text-transform: uppercase; }
/* O rótulo de domínio — MITOLOGIA, GENÉTICA, ICTIOLOGIA — na voz das etiquetas do sítio. */
.verbete-dominio { font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--mono-meta); }

.verbete-regra { border: 0; border-top: 1px solid var(--rule); margin: 60px 0 0; }

.verbete-rotulo { font-family: 'JetBrains Mono', monospace; font-size: 14px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--mono-meta); margin: 34px 0 0; }
.verbete-origem { font-family: 'Bitter', serif; font-style: italic; font-size: 20px;
  line-height: 1.6; color: var(--ink); margin: 16px 0 0; }
/* A citação da fonte. Fica em texto simples, como na maqueta — transformar o endereço em
   ligação seria a PRIMEIRA ligação para fora deste sítio, e isso pergunta-se antes de se fazer. */
.verbete-fonte { font-family: 'JetBrains Mono', monospace; font-size: 13.5px; line-height: 1.85;
  color: var(--mono-meta); margin: 24px 0 0; overflow-wrap: break-word; }

/* accessibility + robustness */
.screen-reader-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* TODOS os elementos focáveis do shell levam o MESMO anel. Faltavam aqui o .art-row
   — que é a linha das páginas de género e de caderno, ou seja o link principal de 11
   das 13 páginas — e o .index-row do índice. Não ficavam sem anel: ficavam com o anel
   POR OMISSÃO do browser (outline:auto 1px), diferente do resto do site e diferente
   de browser para browser. Medido com Tab a sério, não com element.focus(), que não
   dispara o :focus-visible. (2026-08-02) */
.pick:focus-visible, .serie:focus-visible, .menu-option:focus-visible, .row:focus-visible,
.art-row:focus-visible, .index-row:focus-visible,
.return:focus-visible, .title-button:focus-visible, .more > summary:focus-visible,
/* Acrescentados 2026-08-09. O comentário acima dizia "TODOS os elementos focáveis" e não era
   verdade: faltavam estes quatro, e o `.wordmark` é o PRIMEIRO stop de Tab em 12 das 13 páginas
   do shell — quem navega por teclado começava com o anel por omissão do browser, diferente do
   resto do sítio. O `.gen-menu a` é o piso SEM JS, o único caminho de quem não tem JavaScript. */
.wordmark:focus-visible, .gen-menu a:focus-visible,
.notfound-exit a:focus-visible, .title a:focus-visible,
.index-search:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2.5px; }
.filtermenu { max-width: calc(100vw - 31px); }   /* never clip past the viewport edge */

/* ---- breakpoints: phone ≤640 · tablet = base (641–1023) · desktop ≥1024 ---- */
@media (min-width: 1024px) {              /* desktop — masthead grows a little (68 → 72–82) */
  .title { font-size: clamp(72px, 5vw, 82px); }
}
@media (max-width: 640px) {               /* phone — trim the vertical rhythm + side padding */
  .page { padding: 28px 16px 110px; }   /* topo: era 56px (2026-08-02) */
  /* (o #listing tinha aqui 44px e o .sentence 36px; ambos passaram para as variáveis
      --view-gap/--band-gap no bloco da grelha, no fim do ficheiro. O 44px estava a
      ser sobreposto por 50px sem que ninguém desse por isso.) */
  .row { padding: 14px 0; }
  .more > summary, .return { padding: 24px 0 4px; }
  .menu-option { padding-top: 9px; padding-bottom: 9px; }   /* larger touch targets (.pick carries its padding in the base rule now) */
  .index-row { flex-direction: column; gap: 2px; }      /* índice: género note drops below the title so it never collides */
  /* MOBILE #5 (2026-08-09): ao cair para baixo, a linha género·caderno ficava encostada à
     margem enquanto o título tem 18px de recuo — as duas partes da MESMA linha desalinhadas.
     Só no telemóvel: acima de 640px o género·caderno continua à direita, onde não há recuo. */
  .index-count { align-self: flex-start; padding-left: 18px; }
  .serie { grid-template-columns: 1fr; }              /* cadernos view: count drops below the title */
  .serie .serie-count { margin-top: 5px; }
  .art-row.art-row-no-number { grid-template-columns: 1fr; }        /* static caderno rows: count drops below the title */
  .art-row.art-row-no-number .art-date { margin-top: 6px; }
  .art-row:not(.art-row-no-number) { grid-template-columns: 36.5px 1fr; }        /* numbered (por-ordem) rows: date drops below the title */
  .art-row:not(.art-row-no-number) .art-date { grid-column: 2; margin-top: 6px; }
}


/* ══════════════════════════════════════════════════════════════════════════════
   GRELHA VERTICAL DAS PÁGINAS-ÍNDICE  (homepage · género · caderno) — 2026-08-02
   ══════════════════════════════════════════════════════════════════════════════
   As três páginas-índice são a mesma página com conteúdos diferentes, e passam a
   ter a mesma grelha: o que muda é o que ENCHE cada degrau, nunca ONDE ele está.

     1. «quimeras» (o link pequeno lá em cima)
     2. título
     3. frase
     4. lista

   Antes, a lista começava em quatro alturas diferentes (313 / 397 / 432 / 500 a
   1200px) porque três coisas variavam: a homepage não tem o link «quimeras», a
   faixa da frase tinha três alturas, e um título comprido empurrava tudo para
   baixo. Agora a frase e a lista ficam quietas em todas as páginas e em todas as
   larguras — medido nas 12 páginas-índice a 375, 768, 1200 e 1400px.

   O TÍTULO é a única coisa de altura variável, e está ACIMA da frase, por isso é
   ele que decide se a grelha se aguenta. Reserva-se altura que nenhum título
   ultrapassa (2 linhas; 3 no telemóvel, medido: «Que a Terra Lhe Seja Leve» com 25
   caracteres quebra em três a 375px).

   E a reserva está no BLOCO .masthead (= «quimeras» + título), encostado ao FUNDO:
     · o fundo do título fica pregado → a frase e a lista não se mexem;
     · o «quimeras» fica sempre à mesma distância curta do título;
     · um título comprido cresce PARA CIMA e leva o «quimeras» com ele.
   Tem de ser um bloco só: o fluxo normal corre para baixo, por isso o «quimeras»
   sozinho — que vem ANTES do título — nunca poderia reagir à altura dele.

   Com o título encostado ao fundo, o vazio da reserva fica POR CIMA do título, onde
   se lê como ar de início de página. Por baixo lia-se como se faltasse ali algo. */

:root{
  --band-gap: 57px;    /* ar por cima da faixa da frase */
  --band-h:   74px;    /* altura FIXA da faixa (= a frase de 2 linhas da homepage) */
  --view-gap: 50px;    /* ar entre a frase e a lista */
  --mini-h:   47px;    /* 17px do «quimeras» + 30px de margem */
  --mh-fs: clamp(40px, 14vw, 68px);
}
@media (max-width: 640px){ :root{ --band-gap: 36px; } }

/* Ecrãs abaixo dos 320px — o piso convencional do telemóvel. Aí a frase-filtro já não
   cabe em duas linhas: passa a três, a faixa vai de 74px para 111px e a lista da
   homepage fica 37px abaixo da das outras páginas. Medido: 320px cabe, 315px não.
   A 20px volta a caber até aos ~300px. Só se mexe abaixo dos 320 — os telemóveis
   normais (360, 375, 390, 414) ficam exactamente como estavam.
   Abaixo dos ~300px (um Galaxy Fold fechado, 280px) continua a não alinhar: aí já
   não há largura nenhuma para dar, e é largura que falta, não tamanho de letra. */
@media (max-width: 319px){ .sentence-text { font-size: 20px; } }
/* O tamanho do masthead vive AQUI e em mais lado nenhum: era definido em dois
   sítios e a reserva copiou só um, ficando 7,6px curta — os títulos de 2 linhas
   empurravam a frase para baixo. Agora a regra e a reserva lêem a mesma variável. */
/* O tecto era 82px. A COLUNA, essa, não cresce: são 551px em qualquer largura. Ou
   seja, acima dos 1024px a letra crescia dentro de uma caixa do mesmo tamanho — e a
   partir dos ~77,5px o nome mais comprido («Que a Terra Lhe Seja Leve», 25 caracteres)
   passava a quebrar em TRÊS linhas contra uma reserva de duas, e a grelha ia abaixo:
   74px de desalinhamento a 1558px, 77,9px a 1920px, ou seja em qualquer monitor de
   1600/1920/2560. Medido: 1550px → 77,5px → 2 linhas; 1558px → 77,9px → 3 linhas.
   O tecto passa a 77px, que é o maior que cabe. O masthead continua a crescer no
   desktop (72 → 77), só deixa de crescer para além do que a coluna aguenta.
   Isto está afinado ao nome mais comprido de HOJE — é por isso que o lint dos nomes
   compridos (B7b) tem de existir: sem ele, um nome novo parte a grelha em silêncio. */
@media (min-width: 1024px){ :root{ --mh-fs: clamp(72px, 5vw, 77px); } }
.title{ font-size: var(--mh-fs); }

/* TABLET E DESKTOP — mais corpo e mais ar no shell. #43 + #46, escolhido pelo dono a 2026-08-09
   depois de comparar quatro graus no tablet («+ masthead e frase»).
   Ele levantou duas queixas que são a mesma vista de dois lados: no tablet o shell lia-se pequeno
   E apertado. Por isso isto mexe nas duas coisas ao mesmo tempo — corpo e espaço.
   ⚠️ SÓ DOS 641px PARA CIMA. O telemóvel fica exactamente como ele o aprovou na ronda anterior.
   ⚠️ TEM DE FICAR DEPOIS do bloco dos 1024px acima. As duas regras têm a mesma especificidade, por
   isso decide a ORDEM: escrito antes, o --mh-fs dos 1024 ganhava no desktop e o masthead só crescia
   no tablet — que não é o que ele viu nem o que aprovou.
   O --mini-h sobe de 47 para 49 porque o «quimeras» passa de 12,5 para 14,5px: esse número é a
   altura dele mais a margem, e alimenta a reserva do masthead. Sem o acompanhar, a grelha vertical
   das páginas-índice fica curta.
   Só o SHELL. As peças têm o seu próprio corpo e não foram tocadas. */
@media (min-width: 641px) {
  /* --band-h sobe de 74 para 80: a faixa da frase é uma reserva de altura fixa, dimensionada
     para a frase de 2 linhas a 23,5px. A 28px essas duas linhas passam a 78px e TRANSBORDAM — o
     que empurrava a lista da homepage 4px abaixo das outras 11 páginas-índice, desfazendo o
     alinhamento de 2026-08-02 sem nada a falhar. Medido: homepage 472px contra 468px. */
  :root { --mh-fs: clamp(48px, 17vw, 80px); --band-gap: 74px; --view-gap: 64px;
          --band-h: 80px; --mini-h: 49px; }
  .sentence-text { font-size: 28px; }
  .row .row-title, .art-title, .index-title { font-size: 23px; }
  .row .row-gen { font-size: 14.5px; }
  .row .row-date, .art-date { font-size: 15px; }
  .return { font-size: 17px; }
  .wordmark, .notfound-titulo { font-size: 14.5px; }   /* a frase do 404 está no lugar da wordmark: cresce com ela */
  .row { padding: 24px 0; }
  .art-row { padding: 26px 0; }
  .index-row { padding: 24px 0; }
}

/* A homepage não tem o link «quimeras» (é a casa) — reserva-lhe o espaço, para o
   título começar à mesma altura em toda a parte. Clone invisível com as métricas
   do .wordmark, para se reajustar sozinho se a tipografia mudar. */
.masthead:not(:has(> .wordmark))::before{
  content: "quimeras";
  display: block;
  visibility: hidden;                 /* ocupa espaço, não se vê, não é lido em voz alta */
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 400; font-style: normal;
  letter-spacing: 0.24em; text-transform: uppercase; line-height: normal;
  margin: 0 0 30px;
}
/* O sósia acompanha a wordmark quando ela cresce, aos 641px (12,5 → 14,5px).
   ⚠️ ESTA REGRA JÁ EXISTIA E NUNCA PEGOU. Estava escrita LÁ ATRÁS, dentro do bloco dos 641px, e
   a regra base logo acima vinha DEPOIS dela no ficheiro: mesma especificidade, ganha a última.
   Medido a 2026-08-10: o sósia da entrada a 12,5px (17px de altura) contra uma wordmark a 14,5px
   (19px) nas outras páginas. Não se via porque o `min-height` do masthead dominava a altura e o
   título estava encostado ao FUNDO — o comentário antigo dizia isso mesmo e concluía que a regra
   não mudava nada, quando na verdade a regra nem sequer corria.
   Assim que o masthead deixar de ter min-height (é o que a variante «preso ao topo» faz), estes
   2px passam a ser 2px a menos de altura na entrada, e o título dela começa mais acima do que o
   das outras — que é exactamente a uniformidade que se está a tentar obter. (2026-08-10) */
@media (min-width: 641px) {
  .masthead:not(:has(> .wordmark))::before { font-size: 14.5px; }
}

/* :has(> #listing) exclui o 404 — também abre com masthead, mas não tem lista e não
   deve herdar linhas vazias. 0.95 é o line-height do .title.

   MASTHEAD PRESO AO TOPO EM TODA A PARTE — 2026-08-10, decisão do dono, depois de ver as duas
   hipóteses lado a lado: «I want it pinned to the top, same across the board except texts».
   Foi ele quem deu pelo problema: «the index and Genero seem to be aligned, but not the
   cadernos». Medido: era uma linha de corpo, 76px, e não dependia de a página ser caderno —
   dependia só de o título ter uma ou duas linhas. Numa palavra começava aos 180, em duas aos 104.

   ⚠️ ISTO REVERTE A GRELHA DE 2026-08-02, e é a segunda metade de uma reversão que já tinha
   começado: o telemóvel saiu dela a 2026-08-09, com estas duas mesmas declarações. Agora saem as
   outras larguras. A regra fica reescrita em RULES.md, riscada, não contrariada em silêncio.
   O QUE SE PERDE, e foi-lhe mostrado em números antes de decidir: a lista deixa de começar à
   mesma altura nas onze páginas — passa dos 474 fixos para 398 / 474 / 550, conforme o título
   tenha uma, duas ou três linhas. Não se pode pregar um título pelas duas pontas quando o número
   de linhas varia; ele escolheu pregar o topo.
   O QUE SE GANHA: o título começa aos 104 em todas as onze, de «Prosa» a «Que a Terra Lhe Seja
   Leve», e o telemóvel e o computador passam a fazer a mesma coisa.

   Os ARTIGOS não entram nisto — não têm masthead nenhum, ficam de fora sozinhos, e a instrução
   dele foi explícita: «DO NOT TOUCH ARTICLES». */
.page:has(> #listing) .masthead{
  min-height: 0;
  display: block;
}
/* O AR POR CIMA, que ele pediu na mesma frase: «BUT I still want blank space on top so I don't
   [see] it so close to the top».
   Sem isto o título subia dos 180 para os 104 e ficava encostado ao cimo da página — a reserva
   vazia do masthead era o que fazia esse ar, e acabou de desaparecer com ela.
   131px = 180 − 49, sendo 49 a altura do «quimeras» mais a sua margem (19 + 30). O título fica
   nos 180: EXACTAMENTE onde já estava nas sete páginas de título curto. Não é um valor escolhido
   por gosto — é o ar que o sítio já tinha, reposto agora como espaço em vez de como reserva.
   ⚠️ SÓ ≥641px. O telemóvel tem o seu próprio padding-top (46px) no bloco dos 640, e a instrução
   foi para não lhe tocar: «respect the custom nature of the mobile sheet — whatever is already
   there must stay». Medido depois: 375px continua igual ao que era, ao pixel. */
@media (min-width: 641px) {
  .page:has(> #listing) { padding-top: 131px; }

  /* O 404 ENTRA NA MESMA LINHA — 2026-08-10, a pedido dele: «bring it in line for now, I'm redoing
     404 anyway». Provisório por vontade dele, não por desleixo.
     Sai por 180 e não por 131 porque esta página não tem masthead nenhum: o `<h1>` está solto
     dentro do `.page`, e é ele próprio o link para casa, por isso não há linha de «quimeras» por
     cima nem sósia dela a somar os 49px. O alvo é a posição do TÍTULO, e o título é o que se vê.
     Escolhido `:has(> .notfound)` porque só esta página tem esse bloco — nenhuma outra pode
     apanhar a regra por acidente. (Também não é apanhada pela regra de cima: não tem #listing.)
     Só ≥641px: no telemóvel esta página fica como está, como todas as outras. */
  /* 131px, os mesmos das outras — e já não 180. Os 180 foram postos de manhã, quando esta
     página NÃO TINHA wordmark: o «QUIMERAS» grande era o masthead, e 180 punha-o à altura dos
     títulos das outras. O desenho novo trouxe-lhe uma `.wordmark` a sério, por isso a página
     passou a ter as mesmas duas peças de todas as outras — a linha pequena e o elemento grande —
     e alinha-se pela primeira, como elas. Medido antes de mudar: a wordmark do 404 estava aos
     180 e a das onze páginas-índice aos 131. (2026-08-10) */
  .page:has(> .notfound) { padding-top: 131px; }
}
/* MOBILE — decidido 2026-08-09 (feedback #1, #2, #12), depois de o dono comparar no telemóvel.
   O masthead deixa de estar preso pelo FUNDO a crescer para CIMA e passa a estar fixo no topo a
   crescer para baixo; a reserva vazia desaparece; o QUIMERAS cresce ~14%; e há ar por cima E por
   baixo, que foi o que ele pediu ao ver a primeira versão.
   Isto REVERTE, NO TELEMÓVEL, a grelha de 2026-08-02 que prendia o fundo do masthead para as 12
   páginas-índice começarem a lista à mesma altura. Custo aceite e medido: uma página de título
   longo passa a começar a lista mais abaixo do que uma de título curto. Num telemóvel nunca se
   vêem duas páginas lado a lado — que é a razão de isto ficar só aqui. Acima dos 640px a grelha
   de 08-02 continua intacta. */
@media (max-width: 640px){
  .page:has(> #listing) .masthead{ min-height: 0; display: block; }
  .masthead::before{ margin-bottom: 22px; }
  .page{ padding-top: 46px; }
  :root{ --mh-fs: clamp(46px, 16vw, 78px); --band-gap: 58px; }
  .title{ font-size: clamp(46px, 16vw, 78px); }
  /* A DATA SAI das linhas da lista no telemóvel (dono, 2026-08-09: "no date on mobile"). A lista
     já está por ordem do mais recente e a frase di-lo, por isso a data repetia o que a ordem
     dizia, e custava uma linha inteira num ecrã estreito. Continua na peça, no índice e no feed. */
  .row .row-date{ display: none; }
}

.sentence{ margin-top: var(--band-gap); min-height: var(--band-h); }
#listing{ margin-top: var(--view-gap); }
/* Rede de segurança, ADORMECIDA de propósito: hoje as três páginas-índice têm frase,
   por isso o .sentence está sempre entre o .masthead e o #listing e esta regra nunca pega. Fica
   porque é exactamente o que deve acontecer se alguma vez existir uma página-índice
   SEM frase: reservar a faixa na margem para a lista não subir. Não é código morto —
   é código à espera. (verificado 2026-08-02: 0 elementos correspondem hoje) */
.masthead + #listing{ margin-top: calc(var(--band-gap) + var(--band-h) + var(--view-gap)); }

/* ══════════════════════════════════════════════════════════════════════════
   MOVIMENTO REDUZIDO e IMPRESSÃO — 2026-08-03
   ══════════════════════════════════════════════════════════════════════════ */

/* Quem pediu ao sistema para reduzir o movimento (Definições → Acessibilidade)
   deixa de ter transições. No shell não há animações a sério — só transições de
   cor de 0,12s e o deslize de 2px das linhas ao passar o rato —, mas a
   preferência é do visitante e respeita-se: para quem tem enxaqueca vestibular
   ou perturbações de foco, mesmo um deslize pequeno incomoda. Nada muda de
   posição nem de cor final: só deixa de haver o percurso entre uma e outra. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .row:hover, .art-row:hover { transform: none !important; }
}

/* Impressão. Sem isto sai a página tal como está no ecrã: a reserva vazia por
   cima do título (que no papel não serve para nada, porque nada vai mexer), o
   «quimeras» invisível do ::before, e as ligações sem se perceber para onde vão.
   O que se imprime de uma página-índice é uma LISTA — o que lá está e as datas. */
@media print {
  :root { --band-gap: 12pt; --view-gap: 12pt; --mini-h: 0px; }
  .page { padding: 0; max-width: 100%; }
  .page:has(> #listing) .masthead { min-height: 0; display: block; }   /* no papel não há nada para reservar */
  .masthead::before { content: none; }                             /* o clone invisível do «quimeras» */
  .sentence { min-height: 0; }
  .more, .return, .wordmark { display: none; }             /* controlos não se imprimem */
  .more[open] > summary { display: none; }
  #listing .list, #listing .caderno-list { max-width: 100%; }
  .row, .art-row, .serie { break-inside: avoid; }               /* uma entrada não parte entre páginas */
  /* o endereço a seguir ao título, senão a lista impressa não leva a lado nenhum */
  #listing a[href]::after { content: " (quimeras.pt" attr(href) ")"; font-size: 8pt; font-weight: 400;
                         letter-spacing: 0; text-transform: none; color: #555; }
}