/* Orli v3 site · "On this page"
   ---------------------------------------------------------------------------
   One calm contents row for the long reference pages (schools, what's new,
   evidence, inclusion, safety, the accessibility statement, about): a quiet
   label and the sections as plain underlined links, on a hairline at the
   foot of the hero. Never sticky, never floating (RULES: no floating index
   that's always on). System tokens only; link after shell/shell.css.

     <nav class="o-container o-contents" aria-label="On this page">
       <p class="o-contents__label" aria-hidden="true">On this page</p>
       <ul role="list">
         <li><a href="#session">A session</a></li>
         …
       </ul>
       <button class="o-btn o-btn--tertiary o-btn--sm o-contents__aside" …>Print this page</button>   (optional)
     </nav>

   Inside a hero's own .o-container, leave out o-container on the nav.
   ------------------------------------------------------------------------- */
.o-contents {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--o-space-2) var(--o-space-5);
  margin-block-start: var(--o-space-8); padding-block-start: var(--o-space-5);
  border-block-start: 1px solid var(--o-line);
}
.o-contents__label { margin: 0; font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); }
.o-contents ul { display: flex; flex-wrap: wrap; gap: 0 var(--o-space-5); min-width: 0; margin: 0; padding: 0; list-style: none; }
.o-contents li { min-width: 0; max-inline-size: 100%; }
.o-contents a {
  display: inline-flex; align-items: center; min-height: var(--o-target); max-inline-size: 100%;
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui); letter-spacing: -.005em;
  color: var(--o-ink); text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 4px; overflow-wrap: anywhere;
  transition: text-decoration-color var(--o-t-interact) var(--o-ease);
}
.o-contents a:hover { text-decoration-color: currentColor; }
.o-contents__aside { margin-inline-start: auto; align-self: center; }
@media (max-width: 599.98px) {
  .o-contents { margin-block-start: var(--o-space-7); }
  .o-contents__label { flex-basis: 100%; }
  .o-contents ul { gap: 0 var(--o-space-4); }
  .o-contents__aside { display: none !important; }
}
html[data-motion="still"] .o-contents a { transition: none; }
@media (prefers-reduced-motion: reduce) { .o-contents a { transition: none; } }
@media (forced-colors: active) { .o-contents { border-color: CanvasText; } }
@media print { .o-contents { display: none !important; } }