:root {
  --papel: #f3efe6;
  --papel-2: #e9e3d5;
  --branco: #fffdf8;
  --tinta: #1c1f26;
  --tinta-2: #535864;
  --linha: #d5cdbb;
  --volta: #b23a14;
  --volta-barra: #d24c1f;
  --ano1: #9a9c90;
  --texto: "Host Grotesk", "Segoe UI", system-ui, sans-serif;
  --num: "Ubuntu Sans Mono", ui-monospace, "Cascadia Mono", monospace;
  --larg: 72rem;
  --ler: 42rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #15171c; --papel-2: #20232b; --branco: #1b1e24; --tinta: #ece7dc; --tinta-2: #a7abb3;
    --linha: #353944; --volta: #ff8a5c; --volta-barra: #ff6a3a; --ano1: #6c717b; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #15171c; --papel-2: #20232b; --branco: #1b1e24; --tinta: #ece7dc; --tinta-2: #a7abb3;
  --linha: #353944; --volta: #ff8a5c; --volta-barra: #ff6a3a; --ano1: #6c717b; color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papel); color: var(--tinta);
  font: 400 1.0625rem/1.62 var(--texto); font-stretch: 100%;
  text-rendering: optimizeLegibility; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--volta); }
:focus-visible { outline: 2px solid var(--volta); outline-offset: 3px; border-radius: 2px; }
.pular { position: absolute; left: -999px; top: 8px; background: var(--tinta); color: var(--papel); padding: 8px 12px; z-index: 9; }
.pular:focus { left: 16px; }

.topo {
  max-width: var(--larg); margin: 0 auto; padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.marca { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 1.12rem; font-stretch: 112%; letter-spacing: -0.01em; }
.marca svg { width: 26px; height: 26px; color: var(--volta-barra); }
.marca b, .pe-marca b { font-weight: 850; }
.topo nav { display: flex; gap: 18px; font-size: .94rem; }
.topo nav a { text-decoration: none; color: var(--tinta-2); }
.topo nav a:hover { color: var(--volta); text-decoration: underline; }

.abre { max-width: var(--larg); margin: 0 auto; padding: 18px 16px 8px; }
.abre h1 {
  margin: 0 0 .4em; max-width: 15ch;
  font-size: clamp(2.05rem, 7.6vw, 5rem); line-height: 1.0; font-weight: 820; font-stretch: 114%;
  letter-spacing: -0.028em; text-wrap: balance;
}
.abre-txt p { margin: 0 0 1.1em; max-width: 36rem; font-size: 1.06rem; color: var(--tinta-2); text-wrap: pretty; }

.degraus {
  list-style: none; margin: 4px -16px 0; padding: 4px 16px 12px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 46%; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: thin;
}
.degrau { scroll-snap-align: start; }
.degrau a { display: block; text-decoration: none; }
.degrau img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: left top;
  background: var(--branco); border: 1px solid var(--linha); border-radius: 3px;
}
.d-nome { display: block; margin-top: 8px; font-weight: 650; font-size: .95rem; line-height: 1.25; min-height: 2.5em; }
.degrau a:hover .d-nome { color: var(--volta); text-decoration: underline; }
.escada { display: flex; align-items: flex-end; height: 64px; margin: 6px 0 6px; border-bottom: 1px solid var(--tinta); }
.escada span { display: block; height: calc(var(--h) * 1%); }
.b1 { width: 44%; background: var(--ano1); }
.b2 { width: 56%; background: var(--volta-barra); }
.b1.vazio { background: repeating-linear-gradient(135deg, transparent 0 4px, var(--linha) 4px 6px); height: 100%; }
.d-num { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; font: 500 .8rem/1.3 var(--num); font-variant-numeric: tabular-nums; }
.d-num small, .ficha-num small { display: block; font: 400 .72rem/1.3 var(--texto); color: var(--tinta-2); }
.volta { color: var(--volta); }
.legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 4px 0 0; font-size: .82rem; color: var(--tinta-2); }
.chave { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { display: inline-block; width: 12px; height: 12px; }
.legenda .k1 { background: var(--ano1); }
.legenda .k2 { background: var(--volta-barra); }

.texto { max-width: var(--ler); margin: 0 auto; padding: 8px 16px 48px; }
.texto > p, .trecho p { text-wrap: pretty; }
.trecho h2, .fontes h2 {
  margin: 2.4em 0 .5em; font-size: clamp(1.42rem, 3.4vw, 1.95rem); line-height: 1.12;
  font-weight: 760; font-stretch: 108%; letter-spacing: -0.015em; text-wrap: balance;
}
.trecho h3 { margin: 1.8em 0 .4em; font-size: 1.1rem; }
.trecho ul { padding-left: 1.1em; }
.trecho li { margin: .35em 0; }
.trecho li::marker { color: var(--volta-barra); }

.livro, .barras { margin: 2.2em 0; }
.livro figcaption, .barras figcaption { margin-bottom: .8em; }
.livro figcaption strong, .barras figcaption strong { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.3; }
.livro figcaption span, .barras figcaption span { display: block; font-size: .88rem; color: var(--tinta-2); }
.rola { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
thead th { font-weight: 500; font-size: .8rem; color: var(--tinta-2); text-align: right; padding: 0 0 6px 10px; border-bottom: 1.5px solid var(--tinta); }
thead th:first-child { text-align: left; padding-left: 0; }
tbody th, tbody td { padding: 10px 0 10px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
tbody th { text-align: left; font-weight: 600; padding-left: 0; }
tbody th small { display: block; font-weight: 400; font-size: .78rem; color: var(--tinta-2); }
tbody td { text-align: right; font: 500 .9rem/1.4 var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.lacuna { font: italic 400 .8rem/1.3 var(--texto); color: var(--tinta-2); white-space: normal; }
.nota { font-size: .88rem; color: var(--tinta-2); margin: .7em 0 0; }

.barras ol { list-style: none; margin: 0; padding: 0; }
.barras li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--linha); }
.barras li a { font-weight: 600; }
.trilho { grid-column: 1 / -1; grid-row: 2; height: 12px; background: var(--papel-2); }
.barra { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--tinta); }
.barras li:first-child .barra, .barras li:nth-child(2) .barra { background: var(--ano1); }
.valor { font: 600 .95rem/1.4 var(--num); font-variant-numeric: tabular-nums; }
.barras small { grid-column: 1 / -1; font-size: .8rem; color: var(--tinta-2); }

.sit { list-style: none; padding: 0; margin: 1.4em 0; display: grid; gap: 12px; }
.sit a { display: block; padding: 14px 0 12px; border-top: 2px solid var(--tinta); text-decoration: none; }
.sit span { display: block; font-size: 1.22rem; font-weight: 720; font-stretch: 106%; line-height: 1.2; }
.sit small { display: block; margin-top: 4px; color: var(--tinta-2); font-size: .9rem; }
.sit a:hover span { color: var(--volta); text-decoration: underline; }

.lista-fontes { list-style: none; padding: 0 !important; }
.lista-fontes li { padding: 10px 0; border-bottom: 1px solid var(--linha); }
.lista-fontes a { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.lista-fontes small { color: var(--tinta-2); font-size: .8rem; }

.fecho { margin-top: 2.4em; font-weight: 600; }
.selo { margin-top: 1.6em; padding-top: 1em; border-top: 1px solid var(--linha); font-size: .88rem; color: var(--tinta-2); }
.selo p { margin: .45em 0; }
.selo .assina { color: var(--tinta); font-weight: 650; font-size: .95rem; }

.trilha { font-size: .85rem; color: var(--tinta-2); margin: 0 0 12px; }
.trilha a { color: var(--tinta-2); }
.ficha h1, .situacao h1 {
  margin: 0 0 .5em; font-size: clamp(1.9rem, 5.6vw, 3.1rem); line-height: 1.04;
  font-weight: 800; font-stretch: 112%; letter-spacing: -0.022em; text-wrap: balance;
}
.ficha-topo img, .escolha img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: left top; background: var(--branco); border: 1px solid var(--linha); border-radius: 3px; }
.ficha-num { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 14px 0 6px; font: 600 1.15rem/1.3 var(--num); font-variant-numeric: tabular-nums; }
.escolha { display: grid; grid-template-columns: 44% 1fr; gap: 14px; align-items: center; margin: 0 0 1.6em; text-decoration: none; }
.escolha span { font-size: 1.15rem; font-weight: 720; line-height: 1.2; }
.escolha small { display: block; font-size: .8rem; font-weight: 400; color: var(--tinta-2); }
.prova { margin: 2em 0 0; }
.prova img { border: 1px solid var(--linha); border-radius: 3px; }
.prova figcaption { font-size: .82rem; color: var(--tinta-2); margin-top: 6px; }

.pe { background: var(--tinta); color: var(--papel); margin-top: 24px; }
.pe-in { max-width: var(--larg); margin: 0 auto; padding: 32px 16px 40px; font-size: .9rem; }
.pe a { color: var(--papel); }
.pe a:hover { color: var(--volta-barra); }
.pe-marca { font-size: 1.15rem; font-weight: 600; font-stretch: 112%; margin: 0 0 6px; }
.pe ul { list-style: none; padding: 0; margin: 18px 0 0; columns: 2; column-gap: 24px; }
.pe li { margin: 0 0 8px; break-inside: avoid; }

@media (min-width: 720px) {
  .degraus { grid-auto-columns: 30%; }
  .sit { grid-template-columns: 1fr 1fr; }
  .ficha-topo { display: grid; grid-template-columns: 1fr; }
}
@media (min-width: 980px) {
  .abre { padding-top: 40px; }
  .degraus { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); overflow: visible; margin: 12px 0 0; padding: 0; gap: 20px; }
  .escada { height: 84px; }
  .texto { padding-top: 24px; }
  .pe ul { columns: 4; }
}