/* ============================================================================
   QFI Labs
   Uma folha para o site inteiro. Sem framework, sem build, sem CDN em runtime.

   Ordem: tokens, base, tipografia, cabecalho, hero, bandas, componentes,
   formularios, rodape, responsivo.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. fontes

   /!\ AS FONTES DO WINTON SAO PAGAS e nao estao aqui. Eles usam Madigan Medium
       no display e TT Hoves Pro no corpo, as duas licenciadas. O que esta aqui
       sao os substitutos livres mais proximos, medidos contra o site deles:
       Newsreader para o serif de alto contraste e Hanken Grotesk para o
       neo-grotesco do corpo.

       Se ele comprar as licencas, isto troca-se em dois sitios: os @font-face
       abaixo e os tokens --display / --body. Mais nada no ficheiro conhece o
       nome de uma fonte. */

@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hankengrotesk-latin.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('../fonts/hankengrotesk-latin-ext.woff2') format('woff2');
  font-weight: 200 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- 2. tokens */

:root {
  /* Cor. Uma tinta, um papel, UM acento. O acento nao passa dos ~3% da pagina,
     que e a regra do 07-checklist. */
  --ink: #071f1c;
  --ink-2: #0e302b;
  --ink-3: #0a2723;
  --accent: #1e8c78;
  --accent-soft: #7ec3b4;
  --hairline: #2a4742;
  --paper: #f4f2f1;
  --muted: #9fb3ae;

  /* Sobre papel. Nunca preto puro, tambem e regra. */
  --paper-ink: #0b2320;
  --paper-muted: #5c716c;
  --paper-hairline: #dcd8d5;

  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Geometria. A capsula do cabecalho e uma RAZAO do --page-max, nao um numero
     solto: se a pagina mudar de largura o encaixe mantem a mesma leitura. */
  --gut: clamp(20px, 5vw, 64px);
  --page-max: 1280px;
  --dock-ratio: 0.72;
  --rhythm: clamp(88px, 12vh, 152px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dock: cubic-bezier(0.22, 1.16, 0.36, 1);
}

/* ------------------------------------------------------------------ 3. base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
video { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #04120f;
  padding: 12px 18px;
  z-index: 100;
  font-family: var(--mono);
  font-size: 12px;
}
.skip:focus { left: 8px; top: 8px; }

::selection { background: var(--accent); color: #04120f; }

:focus-visible {
  outline: 2px solid var(--accent-soft);
  outline-offset: 3px;
}

/* ------------------------------------------------------------ 4. tipografia */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  /* /!\ A FRAUNCES SAIU A 2026-09-20. Ele mandou a captura de um titulo e tinha
     razao: o "f" dela tem o terminal cortado a direito e muito curto, por isso
     "flow", "effects" e "office" ficavam com os f a bater uns nos outros.
     Testei tambem com font-variant-ligatures: none e quase nao mudou nada, o
     que confirma que o problema era o desenho do glifo e nao a ligadura.

     A Newsreader tem eixo optico como a Fraunces tinha (opsz 6 a 72) e um "f"
     com terminal generoso, que era exactamente o que faltava. Licenca aberta,
     alojada aqui, sem CDN. A nota antiga dizia que o WONK a zero aproximava a
     Fraunces do Madigan do Winton; esse eixo nao existe aqui e nao faz falta.

     /!\ O opsz DELA VAI SO ATE 72, nao ate 144 como o da Fraunces. Pedir 144
         nao da erro, fica preso no maximo, mas quem ler o codigo fica a pensar
         que ha mais contraste do que ha. */
  font-variation-settings: 'opsz' 72;
  letter-spacing: -0.012em;
  margin: 0;
}

h1 { font-size: clamp(38px, 6vw, 76px); line-height: 1.06; }
h2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.14; }
h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.24; }

p { margin: 0 0 20px; max-width: 64ch; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.over {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 22px;
}

.lede {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--muted);
  max-width: 58ch;
}

.muted { color: var(--muted); }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }

/* O unico estilo de link de texto do site. Hairline, nao caixa, nao botao. */
.go {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-decoration: none;
  color: var(--paper);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 4px;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.go:hover { color: var(--accent-soft); border-color: var(--accent-soft); }
.go::after { content: ' \2192'; opacity: 0.55; }

/* ------------------------------------------------------------- 5. cabecalho

   /!\ A BARRA ENCAIXA, NAO ESCURECE. E a mesma decisao que esta escrita no
       styles.css do qfiterminal e e a que ele pediu para repetir aqui: no topo
       a barra e larga e praticamente nao existe, camuflada no video; ao sair do
       topo RECOLHE para uma capsula mais estreita, afastada das margens. O que
       se le como "estacionar" e a LARGURA a animar, nao um fundo a aparecer.
       Trocar transparente por opaco sobre um fundo escuro nao se ve: a unica
       coisa que o utilizador percebia era uma linha a nascer.

   /!\ NAO PONHAS `transition: all` AQUI. Num elemento com backdrop-filter o
       `all` poe o compositor a animar o desfoque, que e o filtro mais caro que
       ha, durante meio segundo a cada scroll. Animam geometria e cor, o blur
       entra de uma vez. */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 18px 0;
  transition: padding 0.5s var(--ease-dock);
}
.site-head.is-docked { padding: 10px 0; }

.head-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--gut);
  border-radius: 0;
  position: relative;
  transition: max-width 0.55s var(--ease-dock), padding 0.55s var(--ease-dock),
    border-radius 0.4s var(--ease), background-color 0.4s ease,
    box-shadow 0.4s ease, border-color 0.4s ease;
  border: 1px solid transparent;
}

.site-head.is-docked .head-inner {
  max-width: calc(var(--page-max) * var(--dock-ratio));
  padding: 8px 10px 8px 22px;
  border-radius: 14px;
  background-color: rgba(7, 31, 28, 0.72);
  border-color: var(--hairline);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, 0.9);
}

@media (prefers-reduced-motion: reduce) {
  .site-head,
  .head-inner { transition: none; }
}

/* O simbolo e um disco de meio-tom com trama hexagonal, gerado por
   tools/mark.mjs e metido inline por {{include:mark.svg}}. Vai inline, e nao
   como <img>, precisamente para poder herdar a cor: o `fill` dele e
   currentColor, por isso a marca fica branca no cabecalho e ficaria verde
   sobre papel sem ser preciso um segundo ficheiro.

   /!\ O TAMANHO E QUE FAZ A MARCA LER-SE, E ISTO FOI MEDIDO.

       A marca tem 163 pontos com passo 6,4. Rasterizada no ecra dele, que tem
       uma razao de pixeis de 1,25, o resultado por tamanho e este:

         22px  (28 pixeis reais)   os pontos colam-se, fica um disco esbatido
         26px  (33)                ainda pastoso
         30px  (38)                comeca a ver-se a trama
         38px  (48)                os pontos separam-se todos

       Ou seja, o desenho dele so mostra o que tem acima dos 30px, e isso e uma
       propriedade do desenho e nao um defeito do CSS. Ficou nos 30, que e o
       maior que a barra encaixada aguenta sem crescer. Quem quiser a textura
       toda tem de aceitar uma barra mais alta.

   /!\ NAO RESOLVER ISTO ENGROSSANDO A TRAMA. Ja foi tentado e ele reparou
       logo: a lineatura e parte do desenho que ele escolheu. Mexe-se no
       tamanho, nunca no passo. Para os 16px existe o site/favicon.svg, que e a
       unica excepcao, e e por impossibilidade fisica. */
.mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--paper);
  white-space: nowrap;
}
.mark .mk {
  flex: 0 0 auto;
  display: block;
  width: 30px;
  height: 30px;
}
.mark .mark-w { display: inline-block; }
.mark .dot { color: var(--accent); margin-left: -0.2em; }

/* Sobre o video o simbolo precisa da mesma ajuda que os links da barra. */
.site-head:not(.is-docked) .mark .mk {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}

.nav { display: flex; align-items: center; gap: 30px; }
.nav ul {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a:not(.btn-login) {
  font-size: 14px;
  text-decoration: none;
  color: var(--paper);
  opacity: 0.72;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.nav a:not(.btn-login):hover,
.nav a[aria-current='page'] { opacity: 1; }
.nav a[aria-current='page'] { color: var(--accent-soft); }

/* No topo, sobre video, os links precisam de se descolar da imagem sem ganhar
   uma caixa. Uma sombra de 1px chega. Encaixada a barra tem plano proprio e a
   sombra sai. */
.site-head:not(.is-docked) .nav a:not(.btn-login) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
}

/* O botao do Winton, medido no site deles a 2026-09-20 com getComputedStyle:
   pastilha branca cheia, raio 9999px, texto #214842 a 14px, peso normal, SEM caixa
   alta e SEM tracking, padding 6px 32px, zero borda. Ele pediu igual.

   /!\ A CAIXA ALTA E O MONO SAIRAM DAQUI DE PROPOSITO. Era o que eu tinha posto e
       era o que fazia o botao ler-se como uma etiqueta de terminal em vez de uma
       porta. Num cabecalho com cinco links calados, uma pastilha branca e o unico
       elemento claro da pagina inteira: nao precisa de gritar por cima disso.

   /!\ O SELECTOR E `.nav a.btn-login` E TEM DE CONTINUAR A SER. Isto ja saiu
       errado uma vez, a 20-09-2026: estava so `.btn-login`, que tem
       especificidade (0,1,0), e perdia para o `.nav a` la em cima, que tem
       (0,1,1). O botao ficava com a cor do texto do menu, quase branco, por
       cima do fundo branco da propria pastilha: uma pastilha vazia. E a
       opacidade de 0.72 dos links do menu ainda a acinzentava por cima.
       Ele apanhou-o com uma captura de ecra. */
.nav a.btn-login {
  opacity: 1;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  color: #17443d;
  background: var(--paper);
  border: 1px solid var(--paper);
  border-radius: 9999px;
  padding: 7px 28px;
  white-space: nowrap;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}
.nav a.btn-login:hover {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

.burger {
  display: none;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  width: 42px;
  height: 38px;
  padding: 0;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 16px;
  height: 1px;
  margin: 3px auto;
  background: var(--paper);
  transition: transform 0.3s var(--ease), opacity 0.3s ease;
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------------------------------------------ 6. hero */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 140px 0 88px;
}

/* /!\ O FUNDO REAL DA SECCAO E O VERDE. O video e uma camada por cima e nunca
       o fundo, para a pagina nunca ficar em branco se ele falhar, se o
       utilizador tiver dados poupados, ou se o codec nao passar. */
.plate {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 80% at 18% 12%, #16413a 0%, transparent 62%),
    radial-gradient(90% 70% at 82% 88%, #0b2723 0%, transparent 58%), var(--ink);
}
.plate video,
.plate img.plate-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* /!\ O VEU TEM DE AGUENTAR O PLANO MAIS CLARO DO VIDEO, nao a media dos
       sete. O primeiro plano da montagem e uma aerea de Manhattan com ceu
       azul, e foi ai que o texto secundario desapareceu na primeira prova. Sao
       duas camadas: um gradiente vertical, que assenta o topo e o fundo, e uma
       mancha radial centrada no texto, que e a que faz o trabalho a serio sem
       apagar os cantos da imagem. */
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      64% 52% at 50% 46%,
      rgba(7, 31, 28, 0.66) 0%,
      rgba(7, 31, 28, 0.34) 62%,
      rgba(7, 31, 28, 0) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(7, 31, 28, 0.72) 0%,
      rgba(7, 31, 28, 0.5) 42%,
      rgba(7, 31, 28, 0.86) 100%
    );
}
@media (prefers-reduced-motion: reduce) {
  .plate video { display: none; }
}

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.09;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.hero-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
}
.hero-inner h1 { margin: 0 0 36px; }
/* O hairline do site e verde escuro e some-se sobre imagem clara. Aqui a
   linha e de papel a 28%, que e o mesmo valor que ja estava na prova de
   planos e o unico que se ve nos sete planos da montagem. */
.hero-rule {
  width: min(520px, 76%);
  height: 1px;
  margin: 0 auto 30px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(244, 242, 241, 0.3) 22%,
    rgba(244, 242, 241, 0.3) 78%,
    transparent
  );
}
.hero-inner .lede {
  margin: 0 auto;
  color: rgba(244, 242, 241, 0.82);
  text-shadow: 0 1px 12px rgba(4, 18, 15, 0.55);
}
.hero-inner h1 { text-shadow: 0 2px 26px rgba(4, 18, 15, 0.45); }

.drop {
  width: 1px;
  height: 72px;
  margin: 54px auto 0;
  background: linear-gradient(var(--hairline), transparent);
}

.slot {
  position: absolute;
  left: var(--gut);
  bottom: 30px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0.5;
}

/* Cabeca das paginas interiores. Nao e um hero, e uma entrada. */
.page-head {
  padding: calc(112px + var(--rhythm) * 0.5) 0 calc(var(--rhythm) * 0.62);
  border-bottom: 1px solid var(--hairline);
  background: radial-gradient(90% 120% at 12% 0%, #123730 0%, transparent 58%), var(--ink);
}
.page-head h1 { font-size: clamp(34px, 4.8vw, 62px); margin: 0 0 26px; }

/* ----------------------------------------------------------- 7. bandas

   O ritmo do site e uma alternancia de bandas escuras e claras. E o que o
   Winton faz e e o que impede oito ecras de verde seguidos de se lerem todos
   como o mesmo ecra. */

.band { padding: var(--rhythm) 0; }
.band--paper {
  background: var(--paper);
  color: var(--paper-ink);
}
.band--paper .over { color: #14705f; }
.band--paper .muted,
.band--paper .lede { color: var(--paper-muted); }
.band--paper .go { color: var(--paper-ink); }
.band--paper .go:hover { color: #14705f; border-color: #14705f; }
.band--paper .rule { background: var(--paper-hairline); }
.band--tint { background: var(--ink-3); }

/* O bloco do Winton: overline, titulo, paragrafo, link, e uma foto ao lado.
   Repetido seis vezes com a foto a trocar de lado. E tudo. */
.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--flip .split-media { order: -1; }
.split-body { max-width: 52ch; }
.split-body h2 { margin-bottom: 22px; }
.split-body .go { margin-top: 12px; }

.shot {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
.shot--wide img { aspect-ratio: 16 / 7; }
.shot--tall img { aspect-ratio: 4 / 5; }
/* Um veu muito leve, so para as fotos assentarem no verde da pagina em vez de
   flutuarem por cima dele. */
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 31, 28, 0.14);
  pointer-events: none;
}
.band--paper .shot::after { background: rgba(11, 35, 32, 0.06); }

.figure-note {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 14px;
}

/* Faixa larga, a toda a largura do ecra, com uma frase por cima. Uma por
   pagina, no maximo. */
.banner {
  position: relative;
  min-height: clamp(320px, 52vh, 520px);
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  padding: var(--rhythm) var(--gut);
}
.banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(7, 31, 28, 0.66);
}
.banner-inner { position: relative; z-index: 2; max-width: 20ch; }
.banner-inner p {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(24px, 3.2vw, 40px);
  line-height: 1.2;
  color: var(--paper);
  margin: 0;
  max-width: none;
}
.banner-inner cite {
  display: block;
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--muted);
}

/* -------------------------------------------------------- 8. componentes */

/* Grelha de celulas separadas por hairlines. Sem sombras, sem cartoes
   flutuantes, sem stat-cards coloridos. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  margin-top: 56px;
}
.cell {
  background: var(--ink);
  padding: clamp(28px, 3.2vw, 44px);
  display: flex;
  flex-direction: column;
}
.band--paper .grid { background: var(--paper-hairline); border-color: var(--paper-hairline); }
.band--paper .cell { background: var(--paper); }
.band--tint .cell { background: var(--ink-3); }
.cell h3 { margin: 0 0 8px; }
.cell .tag {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 20px;
}
.cell p { font-size: 16px; color: var(--muted); margin-bottom: 24px; }
.band--paper .cell p,
.band--paper .cell .tag { color: var(--paper-muted); }
.cell .go { margin-top: auto; align-self: flex-start; }

/* Passos numerados. O contador e mono e alinhado, os numeros sao tabulares. */
ol.steps {
  list-style: none;
  counter-reset: s;
  margin: 52px 0 0;
  padding: 0;
  max-width: 820px;
}
ol.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--hairline);
}
ol.steps li:last-child { border-bottom: 1px solid var(--hairline); }
.band--paper ol.steps li { border-color: var(--paper-hairline); }
ol.steps li::before {
  content: '0' counter(s);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
/* /!\ AS DUAS COLUNAS ESTAO OCUPADAS PELO ::before, e por isso e que o
       <strong> e o <span> tem de pedir a coluna 2 a mao. Sem isto, o
       contador fica na coluna 1, o titulo na 2, e o paragrafo desce para a
       coluna 1 da linha seguinte, que tem 62px de largura: o texto sai em
       coluna de uma palavra. Apanhado no /what-we-build a 20-09-2026. */
ol.steps strong {
  grid-column: 2;
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
ol.steps span { grid-column: 2; color: var(--muted); font-size: 16px; }
.band--paper ol.steps span { color: var(--paper-muted); }

/* Lista de publicacoes, molde do "Our thinking" do CFM. */
.notes { margin-top: 52px; border-top: 1px solid var(--hairline); }
.band--paper .notes { border-color: var(--paper-hairline); }
.note-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 28px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
}
.band--paper .note-row { border-color: var(--paper-hairline); }
.note-row time,
.note-row .kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.note-row h3 { font-size: 22px; }
.empty {
  border: 1px dashed var(--hairline);
  padding: clamp(28px, 4vw, 48px);
  margin-top: 52px;
}
.band--paper .empty { border-color: var(--paper-hairline); }

/* Lista de factos. Substitui os stat-cards, que sao anti-padrao.

   /!\ ERA UMA LISTA DE DUAS COLUNAS E SAIU FEIA, e com razao. A etiqueta ficava
       sozinha numa coluna de 220px, o texto comecava muito a direita, e cada linha
       levava um hairline de ponta a ponta: quatro riscos largos com muito ar morto
       no meio. Le-se como uma tabela por preencher, nao como conteudo.

       Passa a ser o mesmo bloco de celulas que o Jane Street e o Hudson River usam
       para os valores da casa: etiqueta pequena EM CIMA, frase por baixo, celulas
       separadas por hairlines de 1px. A informacao e a mesma e ocupa metade do
       espaco. Apanhado por ele a 20-09-2026, com captura de ecra. */
.facts {
  margin: 52px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.facts li {
  background: var(--ink);
  padding: clamp(24px, 2.6vw, 34px);
}
/* Um numero impar de factos deixaria um buraco com o fundo do hairline a aparecer.
   O ultimo, se ficar sozinho na linha, ocupa a linha toda. */
.facts li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.band--paper .facts { background: var(--paper-hairline); border-color: var(--paper-hairline); }
.band--paper .facts li { background: var(--paper); }
.band--tint .facts li { background: var(--ink-3); }
.facts dt,
.facts .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.band--paper .facts .k { color: #14705f; }
.facts .v { display: block; color: var(--muted); font-size: 16px; }
.band--paper .facts .v { color: var(--paper-muted); }

.prose h2 { margin: 56px 0 20px; }
.prose h3 { margin: 40px 0 14px; }
.prose > :first-child { margin-top: 0; }
.prose { max-width: 68ch; }
.prose a { color: var(--accent-soft); }

/* ------------------------------------------------------------ 9. formulario */

.auth {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.auth-aside { position: relative; overflow: hidden; }
.auth-aside img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auth-aside::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(7, 31, 28, 0.55), rgba(7, 31, 28, 0.82));
}
.auth-aside .quote {
  position: relative;
  z-index: 2;
  align-self: end;
  padding: var(--gut);
  max-width: 34ch;
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.25;
}
.auth-aside { display: grid; align-items: end; }

.auth-main {
  display: grid;
  place-items: center;
  padding: 120px var(--gut) 64px;
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: clamp(30px, 3vw, 40px); margin: 0 0 12px; }
.auth-card > p { font-size: 15px; color: var(--muted); margin-bottom: 38px; }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.field input {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 16px;
  font-weight: 300;
  padding: 13px 15px;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.field input:focus {
  outline: none;
  border-color: var(--accent);
  background: #0c2b26;
}
.field input::placeholder { color: #55706a; }

.btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent);
  color: #04120f;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.25s ease, opacity 0.25s ease;
}
.btn:hover { background: #27a58d; }
.btn[disabled] { opacity: 0.55; cursor: progress; }

.msg {
  margin-top: 18px;
  font-size: 14px;
  min-height: 1.4em;
  color: var(--muted);
}
.msg[data-state='error'] { color: #e2907f; }
.msg[data-state='ok'] { color: var(--accent-soft); }

.auth-foot {
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 13px;
  color: var(--muted);
}
.auth-foot a { color: var(--accent-soft); }

/* --------------------------------------------------------------- 10. rodape */

.site-foot {
  padding: 72px 0 56px;
  border-top: 1px solid var(--hairline);
  background: var(--ink);
  color: var(--paper);
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 52px;
}
.foot-grid h4 {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 18px;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 11px; }
.foot-grid a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.25s ease;
}
.foot-grid a:hover { color: var(--paper); }
.foot-blurb { font-size: 14px; color: var(--muted); max-width: 34ch; }
.foot-blurb .mark { display: inline-flex; margin-bottom: 16px; }

.foot-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 30px;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
}
.fine {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------- 11. revelacao

   /!\ O CONTEUDO TEM DE SER VISIVEL SE O JS FALHAR. Por isso o estado escondido
       so e aplicado DEPOIS de o script por .js no <html>. Sem script, a regra
       nunca chega a existir e a pagina le-se toda. Ver 07-checklist. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------------------- 12. ecras */

@media (max-width: 980px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--flip .split-media { order: 0; }
  .auth { grid-template-columns: 1fr; }
  .auth-aside { display: none; }
  .note-row { grid-template-columns: 1fr; gap: 8px; }
  .facts { grid-template-columns: 1fr; }

  /* Menu em telemovel: a capsula abre para baixo. Continua a ser a mesma
     capsula, so que alta. */
  .burger { display: block; }
  .nav {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--hairline);
    border-radius: 14px;
    background: rgba(7, 31, 28, 0.96);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.95);
    display: none;
  }
  .nav[data-open='true'] { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li { border-bottom: 1px solid var(--hairline); }
  .nav li:last-child { border-bottom: 0; }
  .nav a { display: block; padding: 14px 12px; opacity: 0.9; font-size: 15px; }
  .btn-login { margin: 10px 12px 6px; text-align: center; }
  .site-head.is-docked .head-inner { padding: 8px 10px 8px 18px; }
}

@media (max-width: 520px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
  ol.steps li { grid-template-columns: 1fr; gap: 6px; }
  ol.steps li::before { padding-top: 0; }
}

@media print {
  .site-head, .plate video, .banner img, .drop { display: none; }
  body { background: #fff; color: #000; }
}

/* -------------------------------------------------------- 13. utilidades

   Quatro nomes para espacamento e dois para casos isolados. Existem porque a
   Content-Security-Policy desta casa nao deixa passar `style=` no HTML, e um
   `margin-top` solto nao justifica um componente. Se a lista passar de uma
   duzia, o problema deixou de ser este e passou a ser o componente que falta. */
.gap-xs { margin-top: 14px; }
.gap-s  { margin-top: 24px; }
.gap-m  { margin-top: 30px; }
.gap-l  { margin-top: 44px; }

figure.shot { margin: 0; }
.band--flush { padding-top: 0; }
.page-head--open { border-bottom: 0; }

/* O botao de sair da area reservada e um link a fingir. Continua a ser um
   <button> no HTML, que e o correcto para uma accao, e parece um .go. */
button.go {
  background: none;
  border: 0;
  border-bottom: 1px solid var(--accent);
  cursor: pointer;
  padding: 0 0 4px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--paper);
}

/* ---------------------------------------------------- 14. graficos e notas

   A linguagem e a do epoch.ai, medida no site deles a 2026-09-20: grelha
   horizontal quase invisivel, ZERO legendas, a etiqueta colada ao dado, e uma
   nota de fonte por baixo. A paleta e a nossa, nao a deles.

   /!\ OS GRAFICOS VIVEM EM BANDAS CLARAS. Um grafico e para ser lido, e sobre
       verde escuro toda a gente baixa o contraste da grelha ate ela desaparecer
       ou berrar. Sobre papel resolve-se sozinho. */
.figure {
  margin: 48px 0 0;
  max-width: 860px;
}
.figure figcaption {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--paper-hairline);
  font-size: 14px;
  color: var(--paper-muted);
  line-height: 1.55;
}
.figure .src {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-muted);
}
.chart { width: 100%; height: auto; display: block; }
.chart .c-grid { stroke: #e2e0de; stroke-width: 1; }
.chart .c-base { stroke: #b9b5b1; stroke-width: 1; }
.chart .c-bar { fill: #1e8c78; }
.chart .c-bar--alt { fill: #c9744f; }
.chart .c-line { fill: none; stroke: #1e8c78; stroke-width: 2.5; stroke-linejoin: round; }
.chart .c-dot { fill: #1e8c78; }
.chart text { font-family: var(--body); font-weight: 400; }
.chart .c-tick,
.chart .c-cat { font-size: 13px; fill: var(--paper-muted); }
.chart .c-cat--sub { font-size: 12px; opacity: 0.85; }
.chart .c-cat--in { fill: rgba(255, 255, 255, 0.82); }
.chart .c-value { font-size: 17px; font-weight: 600; fill: var(--paper-ink); }
.chart .c-value--in { fill: #fff; }
.chart .c-axis {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--paper-muted);
}

/* A ficha da nota: tipo, data, tempo de leitura. Molde do epoch.ai. */
.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 26px;
}
.note-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 5px 10px;
}
.note-meta time,
.note-meta .read {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.band--paper .note-kind { color: #14705f; border-color: var(--paper-hairline); }
.band--paper .note-meta time,
.band--paper .note-meta .read { color: var(--paper-muted); }

/* O titulo de uma nota E a conclusao, escrita como frase. E a assinatura do
   epoch.ai e e o que impede uma nota de se chamar "Algumas observacoes sobre". */
.note-head h1 { max-width: 20ch; }
.note-head .lede { margin-top: 26px; max-width: 62ch; }

/* A lista de notas. Uma linha por nota, data a esquerda, hairlines. */
.note-row:hover h3 { color: var(--accent-soft); }
.band--paper .note-row:hover h3 { color: #14705f; }
.note-row h3 { transition: color 0.25s ease; }

.takeaway {
  margin: 44px 0 0;
  padding: 28px 30px;
  border-left: 2px solid var(--accent);
  background: rgba(30, 140, 120, 0.06);
}
.takeaway p { margin: 0; font-size: 17px; }
.takeaway .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.band--paper .takeaway .k { color: #14705f; }

/* ============================================================================
   14. A AREA RESERVADA, com painel lateral.

   Tudo aqui vive dentro de `.inv` e nada disto toca numa pagina publica. E de
   proposito: esta area tem um problema que o site nao tem, que e navegar vinte
   e tres paginas de conteudo denso, e resolve-lo com as regras do site
   deixava-a ilegivel.

   /!\ AS PAGINAS SAO GERADAS. O painel sai de tools/library.mjs e as paginas
       dos estudos tambem. Mexer no HTML nao adianta, mexe-se no gerador.
   ========================================================================== */

.inv {
  /* --------------------------------------------------- a paleta dos vereditos

     /!\ ESTA E A UNICA VEZ EM TODO O SITE QUE HA MAIS DO QUE UM ACENTO, e a
         razao e funcional e nao decorativa. O que esta biblioteca vende e
         conseguir distinguir de relance o que sobrevive do que morreu, e oito
         dos vinte e um morreram. Pintar os vinte e um de verde obrigava a ler
         o rotulo de cada um para saber qual era qual, ou seja, a fazer o
         trabalho que a cor existe para poupar.

         Sao tons dessaturados, escolhidos ao lado do verde da casa e nao
         contra ele, e estao presos a este bloco. Nenhum sai daqui. */
  --v-works: #45ae8f;
  --v-cond: #c8a24c;
  --v-norep: #b07c52;
  --v-died: #ad6257;
  --v-inconc: #8ea5a0;

  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: stretch;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 104px var(--gut) 0;
}

/* A troca de lingua e uma regra de CSS e mais nada.

   O LEIA-ME da pasta de research pede que o par troque INTEIRO: titulo,
   horizonte, sumario e numeros de uma vez, porque o ingles foi escrito e nao
   traduzido a maquina. Com as duas versoes no HTML e um atributo no topo, e
   isso que acontece, e acontece sem pedido nenhum ao servidor.

   /!\ SEM JAVASCRIPT MOSTRA-SE O INGLES, que e a lingua do site. O data-lang
       ja vem escrito no HTML gerado, por isso a pagina nunca aparece com as
       duas linguas ao mesmo tempo enquanto o script carrega. */
.inv[data-lang='en'] [lang='pt'],
.inv[data-lang='pt'] [lang='en'] { display: none; }

/* --------------------------------------------------------------- o painel */

.inv-side {
  border-right: 1px solid var(--hairline);
  min-width: 0;
}
/* /!\ O TOPO E O RODAPE NAO ROLAM, SO A LISTA. O painel e uma coluna de tres
       pecas: o cabecalho com o seletor de lingua, a lista com scroll proprio,
       e o rodape com o botao de sair. Ver a nota no gerador: com tudo numa
       caixa so, entrar no R016 levava o seletor e o botao para fora do ecra,
       porque o script centra o estudo actual e arrastava o painel inteiro. */
.inv-side-in {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 128px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 4px 24px 12px 0;
}
.inv-side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--hairline) transparent;
}
.inv-side-scroll::-webkit-scrollbar { width: 6px; background: transparent; }
.inv-side-scroll::-webkit-scrollbar-track { background: transparent; }
.inv-side-scroll::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }

.inv-side-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.inv-side-top .over { margin: 0; }

.inv-lang {
  display: inline-flex;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  overflow: hidden;
  flex: 0 0 auto;
}
.inv-lang button {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 5px 9px;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.inv-lang button + button { border-left: 1px solid var(--hairline); }
.inv-lang button[aria-pressed='true'] {
  color: var(--ink);
  background: var(--accent-soft);
}

.inv-menu,
.inv-sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inv-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: baseline;
  padding: 8px 8px 8px 13px;
  border-left: 2px solid transparent;
  text-decoration: none;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.38;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}
.inv-menu .inv-item,
.inv-item--all { font-size: 14px; }
.inv-item:hover { color: var(--paper); background: rgba(126, 195, 180, 0.05); }
.inv-item[aria-current='page'] {
  color: var(--paper);
  border-left-color: var(--accent);
  background: rgba(30, 140, 120, 0.1);
}
.inv-item .rid {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.inv-item[aria-current='page'] .rid { color: var(--accent-soft); opacity: 1; }
.inv-item .rv {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  align-self: center;
}

/* O grupo que abre e fecha. E um <details>, nao um componente: abre sem
   JavaScript, e o teclado ja sabe usa-lo sem eu escrever uma linha. */
.inv-group { margin-top: 20px; }
.inv-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 13px 4px 12px 13px;
  border-top: 1px solid var(--hairline);
}
.inv-group > summary::-webkit-details-marker { display: none; }
.inv-group-t {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.inv-group-n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.inv-group > summary::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  transform: rotate(-45deg) translate(-1px, 1px);
  transition: transform 0.25s var(--ease);
}
.inv-group[open] > summary::after { transform: rotate(45deg) translate(-1px, -1px); }

.inv-side-foot {
  flex: 0 0 auto;
  margin-top: 20px;
  padding: 20px 0 0 13px;
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------------- o conteudo */

.inv-main {
  min-width: 0;
  padding: 0 0 var(--rhythm) 46px;
}
.inv-doc h1 {
  font-size: clamp(30px, 3.4vw, 46px);
  margin: 0 0 22px;
}
.inv-doc > .over { margin-bottom: 18px; }
.inv-block { margin-top: clamp(48px, 6vw, 76px); }
.inv-block > .over { margin-bottom: 26px; }

.inv-fine {
  margin: clamp(48px, 6vw, 72px) 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 76ch;
}

/* --------------------------------------------------------- o veredito */

.verdict {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 9px 3px;
  border: 1px solid currentColor;
  border-radius: 2px;
  white-space: nowrap;
  line-height: 1.4;
}
.verdict--works { color: var(--v-works); }
.verdict--cond { color: var(--v-cond); }
.verdict--norep { color: var(--v-norep); }
.verdict--died { color: var(--v-died); }
.verdict--inconc { color: var(--v-inconc); }
.rv--works { background: var(--v-works); }
.rv--cond { background: var(--v-cond); }
.rv--norep { background: var(--v-norep); }
.rv--died { background: var(--v-died); }
.rv--inconc { background: var(--v-inconc); }

/* -------------------------------------------------- a pagina de um estudo */

.inv-crumb {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.inv-crumb a,
.inv-crumb .rid {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.inv-crumb a { color: var(--accent-soft); }
.inv-crumb a:hover { color: var(--paper); }
.inv-crumb a::after { content: ' /'; color: var(--muted); }

.inv-split {
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  margin-top: 44px;
}
.inv-cover { margin: 0; }
.inv-cover img {
  width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
}
/* O LEIA-ME deles e explicito: sete dos vinte e um nao tem capa, e nesses nao
   se inventa uma. O lugar fica marcado e diz o que la falta. */
.inv-cover--none {
  aspect-ratio: 560 / 725;
  border: 1px dashed var(--hairline);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.inv-facts { margin: 0; }
.inv-facts > div {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--hairline);
}
.inv-facts > div:first-child { padding-top: 0; }
.inv-facts dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.9;
}
.inv-facts dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.inv-dls {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 30px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.inv-dl {
  display: grid;
  gap: 7px;
  align-content: start;
  background: var(--ink);
  padding: 17px 18px;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.inv-dl:hover { background: var(--ink-2); }
.inv-dl .k { font-size: 13px; line-height: 1.35; }
.inv-dl .v {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Um botao que nao leva a lado nenhum tem de parecer um botao que nao leva a
   lado nenhum. Desaparecer era pior: ficava a duvida se ha ou nao ha paper. */
.inv-dl.is-off { opacity: 0.4; }
.inv-dl.is-off .v { color: var(--muted); }

.inv-nums {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.inv-nums li { background: var(--ink); padding: 22px 20px; }
.inv-nums .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}
.inv-nums .n {
  display: block;
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-weight: 400;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 13px 0 9px;
}
.inv-nums .v {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

.inv-around {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: clamp(48px, 6vw, 72px);
  background: var(--hairline);
  border: 1px solid var(--hairline);
}
.inv-around a {
  background: var(--ink);
  padding: 20px 22px;
  text-decoration: none;
  display: grid;
  gap: 8px;
  align-content: start;
  transition: background-color 0.25s ease;
}
.inv-around a:hover { background: var(--ink-2); }
.inv-around--one { grid-template-columns: 1fr; }
.inv-around-r { text-align: right; }
.inv-around--one .inv-around-r { text-align: left; }
.inv-around .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.inv-around .v { font-size: 14px; color: var(--muted); line-height: 1.45; }
.inv-around a:hover .v { color: var(--paper); }

/* ----------------------------------------------------------- o indice */

.lib-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 44px;
  padding-bottom: 20px;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  padding: 7px 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { color: var(--paper); border-color: var(--accent); }
.chip[aria-pressed='true'] { color: var(--paper); border-color: var(--accent-soft); }
.chip-n { opacity: 0.55; margin-left: 4px; font-variant-numeric: tabular-nums; }

.lib-find input {
  width: 262px;
  max-width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--hairline);
  border-radius: 3px;
  color: var(--paper);
  font-family: var(--body);
  font-size: 13px;
  padding: 9px 12px;
}
.lib-find input:focus { outline: 0; border-color: var(--accent); }
.lib-find input::placeholder { color: #55706a; }

.lib-list { border-top: 1px solid var(--hairline); }
.lib-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 210px auto;
  gap: 26px;
  align-items: center;
  padding: 17px 4px;
  border-bottom: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.lib-row:hover { background: rgba(126, 195, 180, 0.05); }
.lib-row .rid {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.lib-t {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: 19px;
  line-height: 1.3;
}
.lib-h {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.5;
}
.lib-row .verdict { justify-self: end; }
.lib-row[hidden] { display: none; }
.lib-none { margin-top: 28px; color: var(--muted); font-size: 14px; }

.lib-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.lib-legend li {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 22px;
  align-items: baseline;
}
.lib-legend .v { font-size: 14px; color: var(--muted); line-height: 1.5; }

/* -------------------------------------------- o cartao da pagina de entrada */

.inv-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 28px 30px;
  border: 1px solid var(--hairline);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.inv-card:hover { background: var(--ink-2); border-color: var(--accent); }
.inv-card-n {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: clamp(40px, 5vw, 62px);
  line-height: 1;
  color: var(--accent-soft);
  font-variant-numeric: tabular-nums;
}
.inv-card-b { display: grid; gap: 10px; }
.inv-card-t {
  font-family: var(--display);
  font-variation-settings: 'opsz' 72;
  font-size: 22px;
  line-height: 1.25;
}
.inv-card-d { font-size: 14.5px; line-height: 1.55; color: var(--muted); }

/* Escondido para quem ve, presente para quem ouve. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------- 14.1 estreito

   /!\ O CORTE E AOS 1080, NAO AOS 860 COMO NO RESTO DO SITE. O painel tem 300
       de largura fixa e a coluna do conteudo precisa de uns 600 para os quatro
       numeros nao se esmagarem. Abaixo disso nao ha duas colunas que cheguem,
       por mais que a janela ainda pareca larga. */
@media (max-width: 1080px) {
  .inv {
    grid-template-columns: 1fr;
    padding-top: 92px;
  }
  .inv-side {
    border-right: 0;
    border-bottom: 1px solid var(--hairline);
  }
  .inv-side-in {
    position: static;
    max-height: none;
    display: block;
    overflow: visible;
    padding: 0 0 18px;
  }
  .inv-side-scroll { overflow: visible; }
  /* A lista dos vinte e um nao pode empurrar o conteudo para fora do ecra.
     Num telemovel passa a ser um painel com scroll proprio, nao uma coluna. */
  .inv-sub {
    max-height: 44vh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .inv-main { padding: 36px 0 var(--rhythm); }
  .inv-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lib-row { grid-template-columns: 46px minmax(0, 1fr) auto; }
  .lib-h { display: none; }
}

@media (max-width: 720px) {
  .inv-split { grid-template-columns: 1fr; gap: 30px; }
  .inv-cover { max-width: 180px; }
  .inv-dls { grid-template-columns: 1fr; }
  .inv-nums { grid-template-columns: 1fr; }
  .inv-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .inv-facts dt { line-height: 1.6; }
  .inv-around { grid-template-columns: 1fr; }
  .inv-around-r { text-align: left; }
  .lib-row { grid-template-columns: 44px minmax(0, 1fr); gap: 16px; }
  .lib-row .verdict { grid-column: 2; justify-self: start; }
  .lib-legend li { grid-template-columns: 1fr; gap: 6px; }
  .lib-find { width: 100%; }
  .lib-find input { width: 100%; }
  .inv-card { grid-template-columns: 1fr; gap: 14px; padding: 24px; }
}