.atlas-trill {
  --atlas-ink: #102a43;
  --atlas-link: #125ba0;
  --atlas-border: #d9e2ec;
  --atlas-surface: #f5f8fc;
  color: var(--atlas-ink);
  font-family: inherit;
  line-height: 1.6;
  text-align: left;
}
.atlas-trill-page { max-width: 980px; margin: 0 auto; padding: 48px 24px; color: #102a43; font-family: inherit; line-height: 1.75; }
body .atlas-trill-page h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
body .atlas-trill-page h2 { margin-top: 2rem; font-size: 1.5rem; line-height: 1.3; }
body .atlas-trill a { color: var(--atlas-link); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
body .atlas-trill-page a { color: #125ba0; text-decoration: underline; text-underline-offset: .2em; }
.atlas-trill a:hover { text-decoration-thickness: 2px; }
.atlas-trill a:focus-visible, .atlas-trill summary:focus-visible { outline: 3px solid var(--atlas-link); outline-offset: 4px; }
body .atlas-trill h2 { color: var(--atlas-ink); font-size: 1.25rem; line-height: 1.3; margin: 0 0 1rem; }
.atlas-trill-links { padding-left: 1.25rem; margin: 0; }
.atlas-trill-links li { padding-block: .35rem; }
.atlas-trill-menu summary { cursor: pointer; font-weight: 600; padding: .75rem 1rem; min-height: 44px; }
.atlas-trill-menu { background: white; width: 100%; }
/* In-flow panel avoids clipped popovers and hover-only nested menus. No JS dependency. */
.atlas-trill-panel { padding: clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--atlas-border); max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain; }
.atlas-trill-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.atlas-trill-menu .atlas-trill-links { font-size: .9375rem; }
.atlas-trill-menu a { display: inline-block; vertical-align: top; padding-block: .25rem; }
.atlas-trill-related { max-width: 980px; margin: 3rem auto 1.5rem; padding: clamp(1rem, 3vw, 2rem); border-left: 4px solid var(--atlas-link); background: var(--atlas-surface); }
.atlas-trill-directory { max-width: 980px; margin: 2rem auto; }
.atlas-trill-hub { padding-block: 1.5rem; }
@media (max-width: 1000px) { .atlas-trill-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .atlas-trill-columns { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .atlas-trill-menu a { padding-block: .5rem; }
}
