/* ========================================================
   TEMPLATE-ARTICLE1 — Secular One títulos + Merriweather texto
   Tudo fluido (sem breakpoints): texto e título escalam com a
   janela e travam nos máximos. Qualquer página pode sobrepor
   qualquer regra no seu próprio <style>. (rollout 2026-06-07)
   ======================================================== */

@font-face {
    font-family: "Secular One";
    src: url("/_src/fonts/secular-one-400-latin.woff2") format("woff2");
    font-weight: 100 900;   /* era uma lista com vírgulas — sintaxe inválida, o descritor caía
                               e o browser sintetizava o bold em vez de usar os glifos reais */
    font-style: normal;
    font-display: swap;
}

/* Fundo e margem — 2026-08-09. Este ficheiro nunca declarou `html, body`, por isso as peças de
   Prosa eram as ÚNICAS do sítio sobre branco puro em vez do #fafaf8 de todas as outras páginas,
   e o <body> ficava com a margem de 8px por omissão do browser. Essa margem é o que punha a nav
   do rodapé 5px FORA da coluna do texto (o texto começava a 31px e a nav a 26px). */
html, body { margin: 0; background: #fafaf8; }

@font-face {
    font-family: "Merriweather";
    src: url("/_src/fonts/merriweather-400-latin.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- Título ---------------------------------------------
   Tamanho: fórmula auto-fill — a página declara --title-em
   (largura exacta da linha mais longa, em em) ou --chars
   (nº de letras, estimativa). Sem nada: default sensato.
   Floor 18vw (títulos longos quebram linha), tecto 30vw.   */
header h1 {
    font-family: "Secular One", "Arial Black", sans-serif;  /* fallback se a fonte falhar */
    text-transform: uppercase;
    font-style: normal;
    font-weight: 900;
    line-height: 0.95em;   /* era 0.7em — 2026-08-09.
       Medido a pixel, a 360px: com 0.7em as linhas de um título partido ficavam a 1-5px umas das
       outras — «PRAQUÊ» e «ESCREVER?» a tocar-se. Não era um caso isolado: 5 dos 7 títulos de
       Prosa partem linha a esta largura, porque o piso do clamp (18vw) impõe um corpo maior do
       que a linha comporta. 0.95em dá ~19px de ar entre linhas e não mexe nos títulos de uma
       linha só. */
    padding: 8rem 0 4rem 0;
    font-size: clamp(18vw, calc(92vw / var(--title-em, calc(var(--chars, 10) * 0.62))), 30vw);
    max-width: 100%;
    overflow-wrap: break-word;  /* nº errado → a palavra quebra, nunca sai do ecrã */
    /* O TRAÇO GROSSO — 2026-08-09, escolha do dono, a TODAS as larguras.
       Nasceu na passagem do telemóvel e estava fechado dentro do bloco dos 640px; aprovado depois
       em fork a 768 e a 1280, e confirmado a 375 como não mexendo no telemóvel. São 2px, não 3. */
    -webkit-text-stroke: 2px currentColor;
}

/* ---- Corpo ----------------------------------------------
   Cresce com a janela (2.9vw), trava nos 28.8px (= 992px de
   largura). Coluna 800px — largura global 2026-07-23 (era 43ch/~56 letras). */
main {
    font-family: "Merriweather", Georgia, serif;  /* fallback digno se a fonte falhar */
    font-size: clamp(24px, 2.9vw, 28.8px);
    max-width: 800px;
    margin: 0 18px;  /* respiro nas margens do telemóvel */
}


p {
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0.035em;  /* = 1px no desktop, proporcional em todos os tamanhos */
}

footer {
    font-family: "Merriweather", Georgia, serif;
    font-weight: 400;
    padding: 115px 0 120px 0;
   /* #39 (2026-08-09): +15px de distância ao texto, pedido do dono para TODO o sítio. */
    color: #202020;
    text-decoration: none;
}

/* ---- Nav do rodapé -------------------------------------
   Notação partilhada (2026-07-25) — igual à dos Ensaios/Poesia: alinhada à direita,
   CADERNO ↑ por cima do TÍTULO do próximo →, maiúsculas, tracking .18em, seta sem tracking.
   Diferença: fica na FACE do artigo (Merriweather) e na sua tinta (#202020), não no mono.
   Alinhada à COLUNA do texto (800px), não à margem da página.        */
/* O <main> vive dentro de um `.frame-left`, que o base.css dá 5px de margem; o <footer> não vive
   em frame nenhum. Era essa a diferença que desalinhava a nav da coluna do texto. Os mesmos 5px,
   e as duas passam a começar no mesmo sítio. (2026-08-09) */
footer { display: flex; justify-content: center; margin: 0 5px; }   /* centra a coluna, como .frame-center faz ao main */
/* NAV DO RODAPÉ CENTRADA — 2026-08-09, decisão do dono, para TODO o blog ("crossing all articles").
   ⚠️ REVERTE a FORMA fixada a 2026-07-25 pelo mockup dele: "alinhada à direita, duas linhas
   empilhadas". A regra fica reescrita em RULES.md e no README, riscada com a decisão nova por
   baixo — não contrariada em silêncio. */
.art-nav {
    max-width: 800px; width: 100%; margin: 0 18px;   /* MESMA largura do main */
    text-align: center;
    font-family: "Merriweather", Georgia, serif;
    font-weight: 400;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 2.05;
    color: #202020;
}
.art-nav .art-nav-line { display: block; }
.art-nav a { color: inherit; text-decoration: none; }
.art-nav .art-arrow { margin-left: 0.15em; letter-spacing: 0; display: inline-block; }

/* MOBILE #10 — margens laterais mais curtas no telemóvel (2026-08-09, pedido do dono).
   18px → 12px abaixo dos 640px. Só no telemóvel: acima disso a coluna trava nos 800px e as
   margens deixam de contar. Dá 12px de largura ao texto e ao título, o que também alivia as
   quebras de linha do título.
   ⚠️ FICA NO FIM DO FICHEIRO DE PROPÓSITO. Escrito mais acima, o `.art-nav { margin: 0 18px }`
   da regra base vinha DEPOIS e ganhava — tem a mesma especificidade, decide a ordem. O texto
   passava a 12px e a nav ficava nos 18px, ou seja a nav 6px DENTRO da coluna: a mesma
   desalinhamento que este ficheiro acabou de corrigir, ao contrário. Medido antes de dar por isso. */
@media (max-width: 640px) {
    main     { margin: 0 12px; }
    .art-nav { margin: 0 12px; }
}

/* TÍTULO A ENCHER CADA LINHA — 2026-08-09, decisão do dono.
   O trabalho é do /_src/js/prosa-title.js; isto é só o chão que ele precisa. O corpo de 16px é um
   ponto de partida que o script substitui linha a linha; o `width:100%` e o `display:block` no
   header existem porque, dentro do flex, o <h1> encolhia para o seu conteúdo e o script media
   144px em vez dos 341 da coluna.
   A INCONSISTÊNCIA ESTÁ RESOLVIDA (2026-08-09). Este bloco era só de telemóvel enquanto o script
   corria a todas as larguras sem guarda — as duas metades do mesmo tratamento discordavam acima
   dos 640px. A decisão da passagem do tablet foi LEVAR O TRATAMENTO A TODAS AS LARGURAS: o piso do
   script passou a fracção da coluna e o traço subiu para a regra base do <h1>. O que fica aqui
   dentro é só o que É mesmo de telemóvel — as margens de 12px, que acima dos 640px não contam
   porque a coluna trava nos 800.
   SEM JAVASCRIPT nada disto acontece e o título fica com o clamp acima. */
@media (max-width: 640px) {
    header.frame-left { display: block; }
    header h1 {
        text-align: left;
        font-size: 16px;
        /* AS MESMAS margens do <main>, e é isso que alinha o título com o texto.
           Antes tinha `width:100%` e o script punha-lhe a largura da coluna à força: dava a
           largura certa no sítio errado — o título ficava em [5..346] e o texto em [17..358],
           12px desencontrados, e ainda sobravam 24px do header por usar. Com a mesma margem, a
           caixa do título É a coluna do texto, sem o script lhe tocar. (2026-08-09) */
        margin: 0 12px;
    }
}

/* #44 — A NAV DO RODAPÉ, DO TABLET PARA CIMA (2026-08-09, pedido do dono).
   Duas coisas na mesma frase dele: «more distance from nav in the bottom to the body» e «on that
   nav both links need 5/7px distance between them both too, they're too together».
     · distância ao texto: 115px → 140px. O #39 já lhe tinha dado +15px em todo o sítio, e ele
       diz que no tablet continua a não chegar — daí mais 25px, e só aqui.
     · entre os dois links: line-height 2.05 → 2.45. A 15px de corpo são 30,75px de linha a
       passarem a 36,75px, ou seja +6px, no meio dos 5–7 que ele pediu.
   ⚠️ FECHADO NOS ≥641px DE PROPÓSITO. É a regra do RULES.md ao contrário: isto foi julgado num
   tablet, e o telemóvel já foi visto e aprovado com os valores de baixo. Alargar seria mexer no
   que ele deu por fechado. Se um dia o quiser também no telemóvel, tira-se a media query. */
@media (min-width: 641px) {
    footer   { padding-top: 140px; }
    .art-nav { line-height: 2.45; }
}
