:root{
  --paper:#EFE9DC; --ink:#141210; --muted:#6B655C; --rule:#141210;
  --neg:#8C2B21; --pos:#2C4A32;
  --display:"Playfair Display",Georgia,serif;
  --body:"EB Garamond",Georgia,serif;
  --util:"IBM Plex Mono",ui-monospace,monospace;
  --gut:clamp(16px,2.4vw,34px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:clamp(16px,1.05vw,18px);line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* páginas com encaixe de scroll: passar de página é um gesto, não um clique */
.paper{scroll-snap-type:y mandatory;height:100dvh;overflow-y:scroll}
/* o jornal é uma coluna de largura fixa, centrada — nunca se estica pelo ecrã.
   sem isto, num monitor largo cada página abre para 2000px e os SVG incham. */
.page{scroll-snap-align:start;min-height:100dvh;padding:var(--gut);
  width:100%;max-width:1180px;margin-inline:auto;
  display:flex;flex-direction:column;border-bottom:1px solid var(--rule)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* cabeçalho */
.masthead{text-align:center;padding-bottom:6px}
.masthead h1{font-family:var(--display);font-weight:900;letter-spacing:-.02em;
  font-size:clamp(46px,11vw,132px);line-height:.86;margin:0;text-transform:uppercase}
.tagline{font-family:var(--body);font-style:italic;font-size:clamp(13px,1.3vw,19px);margin:10px 0 0}
.meta{display:flex;justify-content:space-between;font-family:var(--util);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.meta div:last-child{text-align:right}
.rules{border-top:2.5px solid var(--rule);border-bottom:1px solid var(--rule);height:5px;margin:10px 0 0}
.dateline{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;padding:7px 0;border-bottom:1.5px solid var(--rule);margin-bottom:var(--gut)}

/* grelha — os blocos empilham-se do topo; nada de esticar para preencher a
   página (dois spreads com flex:1 partiam a altura e abriam um vão enorme). */
.spread{display:grid;grid-template-columns:1fr 1fr;gap:var(--gut);align-content:start}
.spread + .spread{margin-top:var(--gut)}
.spread.lead{grid-template-columns:2.1fr 1fr}
.spread.single{grid-template-columns:1fr}
@media(max-width:820px){.spread,.spread.lead{grid-template-columns:1fr}}

/* artigo */
.kicker{font-family:var(--util);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);border-bottom:1.5px solid var(--rule);padding-bottom:5px;margin-bottom:12px}
.headline{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.02;
  margin:0 0 10px;font-size:clamp(28px,3.6vw,54px)}
.headline.sm{font-size:clamp(22px,2.2vw,32px)}
.standfirst{font-style:italic;font-size:1.08em;line-height:1.38;margin:0 0 14px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.body{columns:2;column-gap:var(--gut);column-rule:1px solid rgba(20,18,16,.22);text-align:justify;hyphens:auto}
.body.one{columns:1}
.body p{margin:0 0 .8em;text-indent:0}
.body p:first-child::first-letter{font-family:var(--display);font-size:1.15em;font-weight:700}
@media(max-width:820px){.body{columns:1}}

/* imagens */
figure{margin:0 0 14px;break-inside:avoid}
figure img{width:100%;display:block;filter:contrast(1.04)}
/* os gráficos têm viewBox ~520; deixá-los subir muito acima disso engorda o
   texto interno. o teto mantém-nos legíveis mesmo numa coluna larga. */
figure svg{width:100%;max-width:560px;height:auto;display:block}
figcaption{font-family:var(--util);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-top:5px;line-height:1.5}
figcaption a{color:inherit}

/* carteira */
.panel{border:1.5px solid var(--rule);padding:14px;margin-bottom:14px}
.panel h3{font-family:var(--util);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  text-align:center;margin:0 0 12px;font-weight:400}
.rowline{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:.5px solid rgba(20,18,16,.28);font-size:.95em}
.rowline:last-of-type{border-bottom:none}
.rowline .tk{font-family:var(--util);font-size:11px;font-weight:600;letter-spacing:.05em}
.rowline .nm{flex:1;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rowline .pc{font-variant-numeric:tabular-nums;font-family:var(--util);font-size:12px}
.neg{color:var(--neg)}.pos{color:var(--pos)}
.total{border-top:1.5px solid var(--rule);margin-top:8px;padding-top:8px;font-weight:700}
.note{font-size:.82em;font-style:italic;color:var(--muted);line-height:1.4;margin-top:10px}

/* medalhas — discos e crónicas partilham a mesma largura e alinham em 4 colunas */
.vigia{max-width:860px;margin-inline:auto}
.vigia figure{margin-bottom:6px}
.vigia figure svg{max-width:none}
.medals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px}
@media(max-width:820px){.medals{grid-template-columns:repeat(2,1fr)}}
.medal{border-top:2px solid var(--rule);padding-top:10px}
.medal .face{width:100%;height:132px;object-fit:cover;display:block;margin-bottom:8px;background:rgba(20,18,16,.06)}
.medal .tier{font-family:var(--util);font-size:11px;letter-spacing:.22em;text-transform:uppercase}
.medal .subject{font-family:var(--display);font-weight:700;font-size:1.22em;line-height:1.1;margin:5px 0}
.medal .retrato{font-size:.9em;line-height:1.3;margin-bottom:6px}
.medal.lata .retrato{font-weight:500}
.medal .citation{font-size:.85em;color:var(--muted);font-style:italic;margin-bottom:6px}
.medal .verdict{font-size:.95em;line-height:1.34}
.medal.lata{background:rgba(20,18,16,.055);padding:10px;border-top-width:3px}
.byline{font-family:var(--util);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* fontes */
.sources{font-family:var(--util);font-size:9.5px;letter-spacing:.04em;color:var(--muted);
  line-height:1.7;margin-top:12px;padding-top:8px;border-top:.5px solid rgba(20,18,16,.3)}
.sources a{color:inherit;text-decoration:none;border-bottom:.5px dotted}
.colophon{font-family:var(--util);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding-top:18px;margin-top:auto;border-top:1px solid var(--rule)}

/* navegação */
.nav{position:fixed;right:14px;top:50%;transform:translateY(-50%);display:flex;
  flex-direction:column;gap:9px;z-index:20}
.nav a{width:8px;height:8px;border:1px solid var(--ink);border-radius:50%;display:block}
.nav a:hover,.nav a.on{background:var(--ink)}
@media(max-width:820px){.nav{display:none}}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

@page{size:A3;margin:0}
@media print{
  .paper{height:auto;overflow:visible}
  .page{min-height:auto;max-width:none;margin:0;
    page-break-after:always;break-after:page;border:none}
  .page:last-child{page-break-after:auto;break-after:auto}
  figure svg{max-width:none}
  .nav{display:none}
  body{background:#fff}
}