/* article.css. The reading pages (About, Terms, Privacy now, the guides next).
   One column about 68 characters wide, a flat title block, sections separated by space and a thin line.
   Used with <main class="sg-article" id="main">. Loaded only on pages that ask for it. */

.sg-article {
    display: block;
    width: min(100% - 2 * var(--space-4), 1080px);
    margin: var(--space-6) auto 0;
    padding: 0;
}

.sg-article-body {
    max-width: 720px;
}

.sg-article:not(.has-toc) .sg-article-body {
    margin: 0 auto;
}

.sg-article.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 720px) 240px;
    gap: var(--space-7);
    justify-content: center;
}

.sg-article-hero {
    margin-bottom: var(--space-5);
}

.sg-article-hero .eyebrow {
    display: inline-block;
    margin-bottom: var(--space-3);
    color: var(--accent-text);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sg-article-hero h1 {
    margin: 0 0 var(--space-3);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.12;
}

.sg-article-hero p {
    margin: 0;
    color: var(--muted);
    font-size: var(--text-lg);
    line-height: 1.65;
}

.sg-article-section {
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}

.sg-article-hero + .sg-article-section {
    margin-top: var(--space-6);
}

.sg-article-section h2 {
    margin: 0 0 var(--space-3);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.sg-article-section h3 {
    margin: var(--space-5) 0 var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
}

.sg-article p,
.sg-article li {
    color: var(--text);
    font-size: 1.0625rem;
    line-height: 1.7;
}

.sg-article p {
    margin: 0 0 var(--space-4);
}

.sg-article ul,
.sg-article ol {
    margin: 0 0 var(--space-4);
    padding-left: 1.4em;
}

.sg-article li {
    margin-bottom: var(--space-2);
}

.sg-article li::marker {
    color: var(--accent-text);
}

.sg-article a {
    color: var(--accent-text);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.sg-article a:hover {
    text-decoration-thickness: 2px;
}

/* On this page, a sticky column of the headings, built by /assets/article-toc.js from the existing H2 headings. */
.sg-toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-5));
    align-self: start;
    display: none;
    padding-left: var(--space-4);
    border-left: 1px solid var(--line);
}

.sg-toc-title {
    margin: 0 0 var(--space-3);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sg-toc ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sg-toc li {
    margin: 0;
}

.sg-toc a {
    display: block;
    padding: 5px 0;
    color: var(--muted);
    font-size: var(--text-sm);
    line-height: 1.4;
    text-decoration: none;
}

.sg-toc a:hover,
.sg-toc a[aria-current="true"] {
    color: var(--accent-text);
}

@media (min-width: 1100px) {
    .sg-article.has-toc .sg-toc {
        display: block;
    }
}

@media (max-width: 1099px) {
    .sg-article.has-toc {
        display: block;
    }
}

@media print {
    .sg-toc {
        display: none;
    }

    .sg-article {
        width: 100%;
        margin: 0;
    }

    .sg-article p,
    .sg-article li {
        color: #000;
    }
}