/* leitura.css — the journal concept's only stylesheet.
 *
 * Architecture, and how it differs from every other concept here:
 *
 *   - Everything is scoped under `.caderno` and selected by ELEMENT, not by class. There are
 *     six named parts in the whole file. A journal page is a document, so it is styled as one.
 *   - Tokens are `--cd-*` and describe a reading page: measure, leading, rhythm, ink. No `--g-*`
 *     grid or card tokens, because there is no grid and there are no cards.
 *   - One breakpoint, at 46rem, and it only widens the measure and adds the hanging family label.
 *     No 3-column grid ever appears, at any width. Other concepts here break at 640/900/1200px;
 *     this one breaks once, in rem, because the trigger is line length rather than device class.
 *   - Vertical rhythm is a single spacing scale multiplied by the leading, so paragraphs, headings
 *     and list items all land on the same baseline grid.
 */

.caderno {
  /* Ink and paper. Restrained by instruction: two greys, one accent, and a paper that is not pure
     white because a reading page rarely is. */
  --cd-papel: #fafbfd;
  --cd-tinta: #1b2028;
  --cd-tinta-fraca: #717378;
  --cd-marca: #2a5db0;
  --cd-marca-fraca: #7491c0;
  --cd-regua: #d2d4d7;
  --cd-realce: #ba8425;

  /* Reading measure and rhythm. */
  --cd-medida: 34rem;
  --cd-entrelinha: 1.72;
  --cd-passo: 0.75rem;
  --cd-respiro: calc(var(--cd-passo) * 4);

  --cd-serif: Iowan Old Style, 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --cd-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* The shared game runtime reads these. Mapped onto the journal palette so a board looks like it
     belongs on this page rather than on a generated one. */
  --cd-primary: #2a5db0;
  --cd-secondary: #7491c0;
  --cd-accent: #ba8425;
  --cd-text: #1b2028;
  --cd-bg: #fafbfd;
  --cd-surface: #f4f7fb;
  --cd-border: #d2d4d7;
  --cd-tint: #ebf0f8;
  --cd-radius: 2px;
  --cd-shadow: none;
  --cd-section: var(--cd-respiro);
  --cd-gap: var(--cd-passo);
  --cd-max: var(--cd-medida);
  --cd-head-font: Iowan Old Style, 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --cd-font: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  background: var(--cd-papel);
  color: var(--cd-tinta);
  font-family: var(--cd-serif);
  font-size: 1.0625rem;
  line-height: var(--cd-entrelinha);
  margin: 0;
  padding: 0 1.25rem;
  /* -webkit-text-size-adjust stops iOS Safari inflating the measure in landscape. */
  -webkit-text-size-adjust: 100%;
}

/* Skip link: visible the moment it takes focus, which is the only time it needs to be. */
.caderno .pular {
  position: absolute;
  left: -9999px;
}
.caderno .pular:focus {
  left: 1rem;
  top: 1rem;
  z-index: 2;
  background: var(--cd-marca);
  color: var(--cd-papel);
  padding: 0.5rem 0.75rem;
}

/* Focus is never removed, only restyled. A reading page navigated by keyboard has to show where
   it is. */
.caderno :focus-visible {
  outline: 2px solid var(--cd-marca);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead */

.caderno > header {
  max-width: var(--cd-medida);
  margin: 0 auto;
  padding: var(--cd-respiro) 0 var(--cd-passo);
  border-bottom: 1px solid var(--cd-regua);
}
.caderno > header .marca {
  font-family: var(--cd-serif);
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0;
}
.caderno > header .marca a {
  color: var(--cd-tinta);
  text-decoration: none;
}
.caderno .tinta {
  color: var(--cd-tinta-fraca);
  font-family: var(--cd-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: calc(var(--cd-passo) * 0.5) 0 0;
}

/* ---------------------------------------------------------------- reading column */

.caderno > main {
  max-width: var(--cd-medida);
  margin: 0 auto;
  padding: var(--cd-respiro) 0;
}
.caderno h1 {
  font-size: 1.875rem;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 var(--cd-passo);
  font-weight: 600;
}
.caderno h2 {
  font-size: 1.1875rem;
  line-height: 1.3;
  margin: var(--cd-respiro) 0 var(--cd-passo);
  font-weight: 600;
}
.caderno h3 {
  font-size: 1.0625rem;
  margin: 0 0 calc(var(--cd-passo) * 0.5);
  font-weight: 600;
}
.caderno p {
  margin: 0 0 var(--cd-passo);
}
.caderno .linha-fina {
  color: var(--cd-tinta-fraca);
  font-size: 1.125rem;
  font-style: italic;
  margin-bottom: var(--cd-respiro);
}
.caderno .abertura:first-of-type::first-letter {
  /* One typographic flourish, on the first paragraph only. */
  float: left;
  font-size: 3.25rem;
  line-height: 0.82;
  padding: 0.1rem 0.4rem 0 0;
  color: var(--cd-marca);
}
.caderno a {
  color: var(--cd-marca);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.caderno .oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- sumário
   Native <details>. This is also the mobile menu — there is no burger and no script. */

.caderno .sumario {
  border-top: 1px solid var(--cd-regua);
  border-bottom: 1px solid var(--cd-regua);
  margin: var(--cd-respiro) 0;
  padding: var(--cd-passo) 0;
}
.caderno .sumario > summary {
  cursor: pointer;
  font-family: var(--cd-sans);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-tinta-fraca);
  /* A 44px target from the start, so the same markup serves touch and pointer. */
  min-height: 2.75rem;
  display: flex;
  align-items: center;
}
.caderno .sumario > ol {
  list-style: none;
  margin: var(--cd-passo) 0 0;
  padding: 0;
  columns: 2;
  column-gap: var(--cd-respiro);
}
.caderno .sumario > ol > li {
  margin: 0 0 calc(var(--cd-passo) * 0.5);
  font-family: var(--cd-sans);
  font-size: 0.9375rem;
  break-inside: avoid;
}

/* ---------------------------------------------------------------- the index
   A numbered list, read top to bottom. Never a grid, at any width. */

.caderno .indice {
  list-style: none;
  counter-reset: entrada;
  margin: 0;
  padding: 0;
}
.caderno .indice > li {
  counter-increment: entrada;
  position: relative;
  padding: var(--cd-respiro) 0;
  border-bottom: 1px solid var(--cd-regua);
}
.caderno .indice > li::before {
  content: counter(entrada, decimal-leading-zero);
  font-family: var(--cd-sans);
  font-size: 0.75rem;
  color: var(--cd-marca-fraca);
  letter-spacing: 0.1em;
}
.caderno .indice .familia {
  font-family: var(--cd-sans);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cd-tinta-fraca);
  margin: calc(var(--cd-passo) * 0.25) 0;
}
.caderno .indice h3 a {
  color: var(--cd-tinta);
  text-decoration: none;
}
.caderno .indice h3 a:hover,
.caderno .indice h3 a:focus-visible {
  color: var(--cd-marca);
  text-decoration: underline;
}
.caderno .ler {
  font-family: var(--cd-sans);
  font-size: 0.875rem;
  margin: calc(var(--cd-passo) * 0.5) 0 0;
}

/* ---------------------------------------------------------------- facts and glossary
   Both are <dl>s, styled differently by their part name: the ficha is a two-column table of short
   values, the glossary is a reading list of terms and paragraphs. */

.caderno .fatos {
  font-family: var(--cd-sans);
  font-size: 0.875rem;
  margin: var(--cd-passo) 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: calc(var(--cd-passo) * 0.4) var(--cd-passo);
}
.caderno .fatos dt {
  color: var(--cd-tinta-fraca);
  letter-spacing: 0.04em;
}
.caderno .fatos dd {
  margin: 0;
}
.caderno .glossario {
  margin: var(--cd-passo) 0 var(--cd-respiro);
}
.caderno .glossario dt {
  font-weight: 600;
  margin-top: var(--cd-passo);
}
.caderno .glossario dd {
  margin: calc(var(--cd-passo) * 0.25) 0 0;
  color: var(--cd-tinta);
}

/* ---------------------------------------------------------------- an entry */

.caderno .nota {
  border-left: 3px solid var(--cd-realce);
  background: var(--cd-tinte);
  padding: var(--cd-passo) var(--cd-passo) calc(var(--cd-passo) * 0.5);
  margin: var(--cd-respiro) 0;
}
.caderno .nota h2 {
  margin-top: 0;
  font-size: 0.8125rem;
  font-family: var(--cd-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-tinta-fraca);
}
.caderno figure {
  margin: var(--cd-respiro) 0;
}
.caderno figure figcaption {
  font-family: var(--cd-sans);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-tinta-fraca);
  margin-bottom: calc(var(--cd-passo) * 0.75);
}
.caderno .regras,
.caderno .observar {
  padding-left: 1.35rem;
}
.caderno .regras > li,
.caderno .observar > li {
  margin-bottom: calc(var(--cd-passo) * 0.75);
}
.caderno .passos {
  border-top: 1px solid var(--cd-regua);
  margin-top: var(--cd-respiro);
  padding-top: var(--cd-passo);
  font-family: var(--cd-sans);
  font-size: 0.9375rem;
}
.caderno .passos p {
  margin: 0 0 calc(var(--cd-passo) * 0.5);
}

/* ---------------------------------------------------------------- prose pages */

.caderno .texto h2 {
  border-bottom: 1px solid var(--cd-regua);
  padding-bottom: calc(var(--cd-passo) * 0.4);
}
.caderno .texto ul,
.caderno .texto ol {
  padding-left: 1.35rem;
}
.caderno .texto li {
  margin-bottom: calc(var(--cd-passo) * 0.5);
}
.caderno .texto strong {
  font-weight: 600;
}

/* ---------------------------------------------------------------- colophon + storage */

.caderno > footer {
  max-width: var(--cd-medida);
  margin: 0 auto;
  padding: var(--cd-respiro) 0 calc(var(--cd-respiro) * 1.5);
  border-top: 1px solid var(--cd-regua);
  font-family: var(--cd-sans);
  font-size: 0.875rem;
  color: var(--cd-tinta-fraca);
}
.caderno .colofao a {
  color: var(--cd-marca);
}
.caderno .guarda {
  margin-top: var(--cd-respiro);
  border: 1px solid var(--cd-regua);
  padding: var(--cd-passo);
}
.caderno .guarda h3 {
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cd-tinta-fraca);
  margin-bottom: calc(var(--cd-passo) * 0.5);
}
.caderno .guarda p {
  color: var(--cd-tinta);
}
.caderno .guarda .acoes {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--cd-passo) * 0.75);
  margin-bottom: 0;
}
.caderno .guarda button {
  font: inherit;
  background: none;
  border: 1px solid var(--cd-marca);
  color: var(--cd-marca);
  padding: 0.5rem 0.9rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.caderno .guarda button:hover {
  background: var(--cd-marca);
  color: var(--cd-papel);
}
.caderno .guarda .recado:empty {
  display: none;
}
.caderno .guarda .recado {
  margin: var(--cd-passo) 0 0;
  color: var(--cd-marca);
}
/* Acknowledged: the disclosure collapses to its heading, and the buttons stay reachable. */
.ciente .caderno .guarda > p:not(.acoes):not(.recado) {
  display: none;
}

/* ---------------------------------------------------------------- one breakpoint
   Widens the measure and hangs the family label in the margin. Still one column. */

@media (min-width: 46rem) {
  .caderno {
    --cd-medida: 40rem;
    font-size: 1.125rem;
  }
  .caderno .indice > li {
    padding-left: 5.5rem;
  }
  .caderno .indice > li::before {
    position: absolute;
    left: 0;
    top: var(--cd-respiro);
  }
  .caderno .indice .familia {
    position: absolute;
    left: 0;
    top: calc(var(--cd-respiro) + 1.25rem);
    width: 4.5rem;
  }
  .caderno .fatos {
    grid-template-columns: 8rem 1fr;
  }
}

/* Motion: there is none to speak of, but the disclosure marker animates in some browsers. */
@media (prefers-reduced-motion: reduce) {
  .caderno * {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}