/* Shared OluwAI typography for the 2025 archive. Article wording and diagrams stay intact. */
.archive-reading, .archive-collection {
  --archive-bg: #050b16;
  --archive-panel: #0a1424;
  --archive-ink: #eef5ff;
  --archive-text: #c3d0e3;
  --archive-muted: #a6b5cc;
  --archive-line: rgba(166,181,204,.18);
  margin: 0;
  padding: 0;
  max-width: none;
  background: var(--archive-bg);
  color: var(--archive-text);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.85;
  text-rendering: optimizeLegibility;
}
.archive-reading *, .archive-collection *,
.archive-reading *::before, .archive-reading *::after,
.archive-collection *::before, .archive-collection *::after { box-sizing: border-box; }
.archive-reading :is(h1,h2,h3,h4) {
  color: var(--archive-ink);
  font-family: inherit;
  text-align: left;
  text-shadow: none;
  border: 0;
  padding: 0;
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
}
.archive-reading h1 { font-size: clamp(2rem,4.5vw,3.6rem); line-height: 1.12; margin: 0 0 2rem; }
.archive-reading h2 { font-size: clamp(1.5rem,3vw,2.15rem); line-height: 1.25; margin: 3rem 0 1.1rem; }
.archive-reading h3 { font-size: 1.3rem; line-height: 1.4; margin: 2rem 0 1rem; }
.archive-reading p { margin: 0 0 1.4rem; text-align: left; }
.archive-reading :is(ul,ol) { padding-left: 1.4rem; margin: 1rem 0 1.7rem; }
.archive-reading li { margin-bottom: .65rem; }
.archive-reading :is(a,button):focus-visible, .archive-collection :is(a,button):focus-visible { outline: 2px solid #65e5ff; outline-offset: 4px; }
.archive-reading a { color: #65e5ff; text-decoration: underline; text-underline-offset: .22em; }
.archive-reading strong { color: var(--archive-ink); }
.archive-reading :is(img,svg,video,iframe) { max-width: 100%; }
.archive-reading img { height: auto; }
.archive-reading hr { border: 0; height: 1px; background: var(--archive-line); margin: 3rem 0; }
/* Reading never depends on a third-party scroll animation being available. */
.archive-reading :is([data-aos],.reveal,.reveal-on-scroll,.scroll-reveal,.fade-in-section,.animated-element) { opacity: 1 !important; visibility: visible !important; transform: none !important; }
.archive-reading :is(h1,h2,h3,p,li,.call-to-action) { animation: none !important; }
@media (max-width: 600px) { .archive-reading { font-size: 1rem; line-height: 1.8; } }
@media (prefers-reduced-motion: reduce) {
  .archive-reading *, .archive-reading *::before, .archive-reading *::after,
  .archive-collection *, .archive-collection *::before, .archive-collection *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}