/* OneRouter — Article Page Styles */
/* Text-focused single-column layout for legal, help, changelog, pricing, and status pages. */

body { background: #fff; }

.page-article { max-width: 48rem; margin: 0 auto; padding: 6rem 1.5rem 4rem; }
.page-article__header { margin-bottom: 4rem; padding-bottom: 2.5rem; border-bottom: 1px solid color-mix(in oklab,#e8e8e8 40%,transparent); }
.page-article__label { display: inline-block; font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #606060; margin-bottom: .75rem; }
.page-article__header h1 { margin: 0 0 .75rem; font-size: clamp(1.75rem,4vw,2.5rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.page-article__date { font-size: .8125rem; color: color-mix(in oklab,#606060 70%,transparent); }

.page-article__content h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.0125em; margin: 3rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid color-mix(in oklab,#e8e8e8 30%,transparent); }
.page-article__content h2:first-child { border-top: none; padding-top: 0; }
.page-article__content h3 { font-size: 1rem; font-weight: 500; letter-spacing: -.0125em; margin: 1.75rem 0 .75rem; color: color-mix(in oklab,#0a0a0a 85%,transparent); }
.page-article__content p { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.75; color: color-mix(in oklab,#0a0a0a 78%,transparent); }
.page-article__content strong { color: #0a0a0a; font-weight: 500; }
.page-article__content a { color: #3b82f6; text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.page-article__content a:hover { color: #2563eb; }
.page-article__content ul { margin: 0 0 1.5rem; padding-left: 1.5rem; }
.page-article__content ul li { font-size: .9375rem; line-height: 1.75; color: color-mix(in oklab,#0a0a0a 78%,transparent); margin-bottom: .375rem; }

.page-article__callout { background: color-mix(in oklab,#f5f5f5 30%,transparent); border: 1px solid color-mix(in oklab,#e8e8e8 40%,transparent); border-radius: .75rem; padding: 1.5rem 1.75rem; margin: 2rem 0; }
.page-article__callout p { font-size: .875rem; margin: 0; color: color-mix(in oklab,#0a0a0a 75%,transparent); }

.page-article__footer { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid color-mix(in oklab,#e8e8e8 40%,transparent); }
.page-article__footer p { font-size: .8125rem; color: #606060; margin: 0 0 .5rem; }
.page-article__footer a { color: color-mix(in oklab,#0a0a0a 70%,transparent); text-decoration: underline; text-underline-offset: 2px; transition: color .15s; }
.page-article__footer a:hover { color: #0a0a0a; }

/* Dark mode */
.dark body { background: #1e1e1e; color: #f3f3f3; }
.dark .page-article__label,.dark .page-article__date,.dark .page-article__footer p { color: #7a7a72; }
.dark .page-article__content p,.dark .page-article__content ul li { color: #9b9b94; }
.dark .page-article__content strong,.dark .page-article__content h3 { color: #e5e5e0; }
.dark .page-article__content h2,.dark .page-article__header,.dark .page-article__footer { border-color: rgba(255,255,255,.08); }
.dark .page-article__callout { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.06); }
.dark .page-article__content a { color: #60a5fa; }
.dark .page-article__footer a { color: #9b9b94; }
.dark .page-article__footer a:hover { color: #e5e5e0; }

@media (min-width: 1024px) { .page-article { padding: 8rem 2rem 4rem; } }