/* Guides (03-SEO §6.11, "Biblioteca de guias"). 31/10/2026. Each guide page passes 'class' => 'guide-page' and
   'css' => ['guide.css']; its own page CSS (by slug) loads after this one and holds only what is particular to it.
   A document like /privacy: H1 and standfirst in the body column, the index on a gold margin rule (as on /faq),
   then the sections as prose, a numbered list for reference (.asks), and the end: one sentence, the door, two links.
   Moved here from brazilian-vs-european-portuguese.css with the second guide; the selectors keep the same weight.
   Composition only; mobile first: md 56.25em · xl 75em. */

/* ---------------------------------------------------------------- opening */
.guide-page .doc-open .standfirst { margin-top: var(--s-5); padding-top: 0; }

/* the index, on a gold margin rule (as on /faq): above the sections on phones, in the margin beside them from md */
.guide-page .toc { position: relative; padding-left: var(--s-4); }
.guide-page .toc::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px;
  background: var(--margin-line); opacity: .55;
}
.guide-page .toc-h { color: var(--ink-soft); }
.guide-page .toc ul { list-style: none; margin-top: var(--s-1); }
.guide-page .toc a {
  display: inline-block; padding: 11px 0; font-size: var(--fs-ui); line-height: 1.35;
  color: var(--ink); text-decoration: none;
}
.guide-page .toc a:hover {
  text-decoration: underline; text-decoration-color: var(--pen-stroke);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* ---------------------------------------------------------------- the sections */
.guide-page .guide { margin-top: var(--s-6); overflow-wrap: break-word; }
.guide-page .guide > .body { margin-top: var(--s-7); }
.guide-page .guide section { scroll-margin-top: var(--s-5); }
.guide-page .guide section + section { margin-top: var(--s-8); }
.guide-page .guide section > * + * { margin-top: var(--s-4); }
.guide-page .guide :is(p, .asks) { max-width: var(--measure); }
.guide-page .guide h2 { margin-bottom: var(--s-5); }
.guide-page .guide h2 i { font-weight: 400; }
.guide-page .guide .fn { margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* a numbered list for reference: what the request should say, what to have ready */
.guide-page .asks { list-style: decimal; padding-left: 1.4em; }
.guide-page .asks li { padding-left: .3em; }
.guide-page .asks li + li { margin-top: var(--s-4); }
.guide-page .asks li::marker { font-family: var(--mono); font-size: .875em; color: var(--navy-light); }
.guide-page .asks b { color: var(--navy); }
.guide-page .asks .mono { font-size: .875em; }

/* ---------------------------------------------------------------- the end: one sentence, the door, two links */
.guide-page .guide-end { margin-top: var(--s-8); }
.guide-page .guide-end-say { font: 400 var(--fs-voice)/1.45 var(--serif); color: var(--navy); max-width: var(--measure-voice); }
.guide-page .guide-end-go { margin-top: var(--s-4); }
.guide-page .guide-end-go .door { padding-block: 6px 10px; }
.guide-page .guide-end-more { display: flex; flex-wrap: wrap; gap: 0 var(--s-6); margin-top: var(--s-3); }

@media (min-width: 56.25em) {
  .guide-page .guide { margin-top: var(--s-8); align-items: start; }
  .guide-page .guide > .body { grid-row: 1; margin-top: 0; }
  .guide-page .guide > .toc { grid-row: 1; }
  .guide-page .guide section + section { margin-top: var(--s-9); }
  .guide-page .guide-end { margin-top: var(--s-9); }
}
/* the index travels with the reader when the screen is tall enough to hold it */
@media (min-width: 75em) and (min-height: 40em) {
  .guide-page .toc { position: sticky; top: var(--s-5); }
}

@media print {
  .guide-page .toc, .guide-page .guide-end { display: none !important; }
  .guide-page .guide { margin-top: 12pt; }
  .guide-page .guide section + section { margin-top: 14pt; }
}