

@font-face {
font-family: "Special Elite";
src: url("/_src/fonts/special-elite-400-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;  } 
    
html, body {
    margin: 0;   /* paper fills the whole canvas — kills the default body-margin border */
    font-family: "Special Elite", "Courier New", monospace;  /* fallback typewriter se a fonte falhar */
    font-optical-sizing: auto;
    font-size: clamp(24px, 3.65vw, 28px);   /* +3px on tablet/desktop; mobile floor stays 24 */
    color: black;
    line-height: normal;
    background-color: #ffffff;
    background-image: url("/_src/img/templates/paper.png");
    overflow-x: clip;   /* the lean's corner-drift must never spawn a horizontal scroll — clip, NOT
                           hidden: hidden nests html+body as scrollers and eats the first swipe at
                           the top/bottom scroll boundary. */
    }
/* Firefox paints the overscroll (rubber-band) gap with the ROOT's background-COLOR, not the tiled
   image — so it flashed white. Give <html> the paper's visible tone so the gap blends. */
html { background-color: #dddddd; }

.frame-center { margin: 0; }   /* base.css sets 5px — its top margin collapsed out as a strip at the top */

/* #3 — whole-sheet lean: the title, body, and footer nav all tilt the same way, like a page fed in
   crooked. Off on mobile (see the media query at the foot). */
header, main, footer { transform: rotate(-.5deg); }

main {
  /* min-width:0 — sem isto o <main> herda min-width:auto e recusa-se a encolher abaixo do seu
     conteúdo indivisível mais largo, saindo 2-4px para fora do ecrã. Só se nota abaixo dos
     320px, ou seja com zoom acima de ~125% num telemóvel pequeno. (2026-08-08) */
  min-width: 0;
    max-width: 800px;    /* crónica reading column — LOCKED 2026-07-23 (matches Prosa) */
    margin: 0 auto;
    /* ALINHADO À ESQUERDA — 2026-08-09, decisão do dono (#33). ⚠️ REVERTE o justificado fixado a
       2026-07-23 como parte do tratamento de máquina de escrever. A HIFENIZAÇÃO FICA: ele foi
       expresso ("i def want to keep hyphenization"), embora partir palavras ao fim da linha exista
       sobretudo ao serviço do justificado. */
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;   /* PT hyphenation via the page's lang="pt-PT" */
    }


p {
    line-height: 1.4;
    /* #2 — ink-bleed + key-press shadow (toned down): dark halo wicking into the paper fibres,
       a down-right deboss (key struck in), an up-left paper lift. */
    text-shadow:
      0 0 .5px         rgba(43,38,32,.35),
       .3px .3px .3px  rgba(0,0,0,.15),
      -.3px -.4px .4px rgba(255,255,255,.20);
    }


header {
  font-style: normal;
  text-align: center;
  flex-direction: column;   /* stack the title + dateline */
  padding: 100px 0 60px 0;
  overflow-wrap: break-word;  /* nunca sai do ecrã */
  /* AS MESMAS FRONTEIRAS DO TEXTO — 2026-08-10, pedido do dono: «the cronica header should align
     with the body of the text's boundaries».
     O <header> não tinha largura nenhuma, por isso ocupava a janela toda enquanto o <main> travava
     nos 800px e se centrava. Abaixo dos ~900px isso não se via (a coluna ocupa o ecrã todo e as
     duas coincidem), e foi por isso que passou despercebido na passagem do tablet. Medido a 1280:
     o título e a data corriam de 0 a 1280 e a primeira linha da carta começava a 210 — 210px de
     desencontro entre o cabeçalho e o texto da mesma página. Com estes dois valores, iguais aos
     do <main>, o título, a data e o corpo passam a partilhar as mesmas duas margens.
     Nada muda no telemóvel nem no tablet: abaixo dos 800px o max-width não morde. */
  max-width: 800px;
  margin: 0 auto;
  }
/* ⚠️ E ESTA LINHA É PRECISA. O `header` traz a classe `.frame-center`, e este ficheiro põe-lhe
   `margin: 0` lá em cima (para matar a tira de 5px do base.css no topo). `.frame-center` vale mais
   do que `header` na conta da especificidade — 0,1,0 contra 0,0,1 — por isso ganha esteja onde
   estiver no ficheiro, e o `auto` acima era ignorado em silêncio: o cabeçalho ficava com os 800px
   certos mas encostado à esquerda, em [0..800] contra um texto em [240..1040]. Medido.
   O topo continua a 0, que é o que aquela regra existia para garantir. */
header.frame-center { margin: 0 auto; }

/* typewriter dateline — "local, dia de mês de ano", centered under the title */
.dateline {
  text-align: center;
  margin: 15px 0 0 0;   /* gap below the title */
  }


::-moz-selection {
    background: #757575;
    text-shadow: none;
    color: #FFF;
  }

::selection {
    background: #757575;
    text-shadow: none;
    color: #FFF;
    }


.strikethrough {
    position: relative;
    display: inline-block; /* so the pseudo-elements can size to the text */
    }

.strikethrough::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    transform: translateY(-50%); /* slight imperfection */
    height: 3px; /* red line thickness */

    /* red dashes + subtle dark noise on top */
    background:
        /* noisy ink variation */
        repeating-linear-gradient(
            to right,
            rgba(0, 0, 0, 0.25) 0,
            rgba(0, 0, 0, 0.25) 2px,
            transparent 2px,
            transparent 4px
        ),
        /* main red dashes */
        repeating-linear-gradient(
            to right,
            #9b4848 0,
            #9b4848 9px,
            transparent 9px,
            transparent 11px
        );

    filter: blur(0.35px);           /* soften edges */
    box-shadow: 0 0 1px rgba(0,0,0,.4); /* slight bleed */
    pointer-events: none;
    }

.strikethrough::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 45%;
    margin-top: 1px;  /* pushes the black strip to the bottom edge of the red */
    height: 1px;      /* black “tint” thickness */

    /* black dashes aligned with the red ones */
    background: repeating-linear-gradient(
        to right,
        rgba(0, 0, 0, 0.9) 0,
        rgba(0, 0, 0, 0.9) 9px,
        transparent 9px,
        transparent 11px
    );

    filter: blur(0.2px); /* slightly soft, not razor sharp */
    pointer-events: none;
    }


a.strike-link {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-style: dashed;
    text-decoration-color: black;
    text-decoration-thickness: 4px;  /* thick = long dash */
    text-underline-offset: -2px;      /* low offset = tighter visual gap */
    text-decoration-skip-ink: none;
    }
    
.bold {
    font-weight: normal;
    text-shadow: 0.1px 0.5px 0 black, -0.7px -1.5px 0 black;
    }    

footer {
    max-width: 800px;   /* align with the body column */
    margin: 0 auto;
    padding: 115px 0 120px 0;
   /* #39 (2026-08-09): +15px de distância ao texto, pedido do dono para TODO o sítio. */
    /* CENTRADA — 2026-08-09, decisão do dono para todo o blog. ⚠️ REVERTE a forma fixada a
       2026-07-25 ("alinhada à direita"). Riscada e reescrita em RULES.md e no README. */
    text-align: center;
    text-decoration: none;
    color: black;
    }
footer p { margin: 0; }

/* nav do rodapé — só a ORDEM da notação partilhada (caderno em cima, próximo por baixo).
   Nada mais dela entra aqui: SEM setas (nunca as houve nesta página), sem caixa alta, sem
   tracking, sem override de tamanho — o tamanho vem do clamp de html,body (ver a nota acima:
   sem overrides por elemento). Links com o `strike-link` (sublinhado tracejado grosso), tudo
   a preto e inclinado com a folha. As linhas são <span class="art-nav-line"> em bloco, no lugar do <br>. */
/* MOBILE #31 (2026-08-09) — a nav VOLTA ao tamanho do corpo. O dono: «tem de ser do mesmo
   tamanho do texto». Isto REVERTE a decisão de 2026-08-07, que a pôs a 15px para igualar as
   outras três navs; a regra fica reescrita em RULES.md, não silenciosamente contrariada.
   Sem font-size aqui, herda o clamp(24px,3.65vw,28px) de html,body — logo acompanha o corpo
   em qualquer largura, que é exactamente o que ele pediu. Só as Crónicas mudam. */

/* MOBILE #32 (2026-08-09) — a seta, mas em `^`. Esta página nunca teve setas (regra registada,
   agora revertida) e o dono não quer o glifo ↑ das outras: quer um `^` literal.
   Fica em CSS e não na marcação porque a zona <nav id="art-nav"> é escrita pelo build a partir
   do que lá encontra, e o glifo está fixo no render_nav (&#8593;) — pôr um `^` no ficheiro só
   duraria até ao build seguinte, que o trocaria pela seta. Assim: o build não muda, nenhuma peça
   é aberta, e uma crónica nova recebe o `^` sozinha. Sendo decorativo, também não vai no copiar. */
.art-nav a::after { content: "^"; margin-left: .18em; }
.art-nav .art-nav-line { display: block; }
.art-nav a { color: inherit; }          /* sem text-decoration aqui — deixa passar o a.strike-link */


/* Font size is uniform + fluid on html,body (clamp) — every element (title, dateline, body, footer)
   inherits the same size. No per-element or per-breakpoint overrides. */

/* Ecrãs estreitos — respiro nas margens (corpo + rodapé alinhados) e SEM inclinação.
   O limite subiu de 640px para 900px em 2026-08-02. Porquê: a coluna do texto tem
   max-width:800px, por isso abaixo dos 800px ela ocupa o ecrã TODO e não sobra folga
   nenhuma de cada lado. Meio grau de inclinação numa página alta empurra o topo ~30px
   para um lado e o fundo ~30px para o outro — e como o html tem overflow-x:clip, o que
   sai do ecrã não se alcança nem com scroll: desaparece.
   Media-se numa página real a 768px (iPad ao alto): a linha "Minha querida," começava
   em -31px, ou seja o primeiro caracter e meio ficavam fora do ecrã, e a metade de baixo
   perdia o fim das linhas do outro lado. A regra já estava escrita aqui em baixo — "uma
   página alta a toda a largura não tem folga lateral para o desvio" — só que o limite
   parava cedo de mais: isso é verdade até aos ~860px, não até aos 640px.
   Conta: é preciso viewport > 800 + 2x desvio. O desvio cresce com a ALTURA da página —
   é (altura / 2) x sen(0,5°), ou seja altura x 0,00436 para cada lado.
   ⚠️ O NÚMERO QUE AQUI ESTAVA — «os 900px cobrem páginas até ~5700px» — ESTAVA ERRADO, por ter
   contado o desvio inteiro em vez de metade. Medido a 2026-08-10, aos 901px (o pior caso, logo
   acima do limite): a coluna de 800px deixa 50,5px de cada lado, o desvio desta crónica (7501px
   de altura) é de 33px, e sobram 20px reais. Ou seja a guarda aguenta até cerca de 11500px de
   altura de página, o dobro do que este comentário prometia — e esta crónica, com 7501px, já
   passava do limite antigo sem cortar nada, o que mostra que a conta velha não batia certo.
   Se algum dia uma crónica passar dos ~11500px, subir este número (ou tirar a inclinação de vez).
   O que sai do ecrã não se alcança nem com scroll: o html tem overflow-x: clip. */
@media only screen and (max-width: 900px) {
    main, footer { padding-left: 16px; padding-right: 16px; }   /* MOBILE #30: era 5px — o dono
                       pediu mais respiro lateral para o texto E para a folha. (2026-08-09) */
    /* O CABEÇALHO leva as MESMAS margens (2026-08-09). Não tinha nenhuma, por isso «Castelo Branco,
       10 de Outubro» corria de ponta a ponta enquanto o texto estava recolhido 16px — duas partes
       da mesma página desalinhadas. Medido: a data passa de [0..375] para [16..359]. */
    header { padding-left: 16px; padding-right: 16px; }

    header, main, footer { transform: none; }   /* sem folga lateral, a inclinação come texto */
  }

/* MOBILE #29 — a sombra da tinta SAI, e SÓ NO TELEMÓVEL (2026-08-09).
   O dono mediu no telefone dele, ligando e desligando cada camada uma a uma: das quatro suspeitas
   — letras decoradas, sombra do texto, papel de fundo, overflow clip —, é ESTA que faz o Firefox
   engasgar-se no scroll. Safari e Chrome nunca tiveram problema.
   Porquê ela: são TRÊS sombras, todas com desfoque, em TODOS os <p>, numa página de ~13000px. Uma
   sombra desfocada obriga a redesenhar o texto a cada passagem, e o Firefox não a guarda em cache
   como os outros motores.
   Não é de graça, e foi medido antes de decidir: com a sombra desligada mudam 8-13% dos pixels da
   página, com picos de meio-tom — não é invisível. Mas a esta dimensão o efeito quase não se lê,
   que é precisamente porque sai só aqui.

   ⚠️ 640px, NÃO os 900px do bloco acima. Instrução expressa do dono (2026-08-09): «só no
   telemóvel, NÃO nos tablets». A primeira versão desta regra reaproveitou o limite dos 900px que
   desliga a inclinação, e isso levava a sombra também nos tablets grandes — mais do que ele
   autorizou. Os 640px são o limite de telemóvel do resto do sítio (ver home.css: telemóvel ≤640 ·
   tablet 641-1023 · desktop ≥1024). Os dois limites existem por razões diferentes e não se
   juntam: a inclinação sai aos 900 porque abaixo disso não há folga lateral e ela come texto; a
   sombra sai aos 640 porque é aí que está o custo e onde o efeito não se lê.

   Considerado e recusado: apanhar só o Firefox com `@supports (-moz-appearance:none)`. Funciona,
   mas é farejar o browser — se a Mozilla largar a propriedade, a regra deixa de casar, a sombra
   volta sem aviso e o engasgo com ela — e o custo não é forçosamente só do Firefox: o mesmo
   trabalho num telefone mais fraco apanha os outros motores. (Decisão do dono.) */
@media only screen and (max-width: 640px) {
    main p { text-shadow: none; }
}