/*
 * What a plain prose page looks like: Privacy, the Quick Start guide, anything that is mostly
 * text under the site header.
 *
 * These were the last two pages still rendering as raw Bootstrap — black on white, under a dark
 * header, on a site whose every other surface is dark. Nothing was broken; it just read as a page
 * belonging to a different product, which is the kind of thing a visitor notices on a legal page
 * and cannot say why.
 *
 * The colours are literals rather than the `--bg-page` family, for the same reason gallery.css
 * uses literals: that palette is declared in landing.css's own `:root` and landing.css is loaded
 * by the landing page alone. Referencing tokens that resolve on one page out of twenty is how a
 * stylesheet ends up looking correct in exactly the place it is not needed.
 */

/*
 * The page under everything.
 *
 * Every surface on this site paints itself dark, so the white left over from the Bootstrap
 * scaffold was only ever visible in the gaps — under a short page, under the footer, and in the
 * overscroll. That is precisely where a white flash is most obviously a mistake.
 */
html,
body {
    background: #0A0E14;
}

/*
 * The scaffold also left `body { margin-bottom: 60px }`, from a template whose footer was fixed.
 * This one is in normal flow inside a `min-vh-100` flex column, so the margin is added to a box
 * that is already a full viewport tall: every page on the site scrolls 60px past its own footer
 * into blank space. Scoped to the layout's own body rather than edited in site.css, which
 * Bootstrap's scaffold owns.
 */
body.min-vh-100 {
    margin-bottom: 0;
}

.content-page {
    background: #0A0E14;
    color: #C9D1D9;
    /* Fills the viewport under the header, so a short page does not end in a band of white. */
    min-height: calc(100vh - 64px);
}

.content-page-inner {
    max-width: 820px;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
    font-size: 1rem;
    line-height: 1.7;
}

.content-page h1 {
    color: #F0F6FC;
    font-size: 2.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.content-page h2 {
    color: #F0F6FC;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 2.5rem 0 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #21262D;
}

/* The first section sits right under the title, where a divider reads as a stray line. */
.content-page section:first-of-type h2 {
    border-top: none;
    padding-top: 0;
    margin-top: 1.5rem;
}

.content-page h3,
.content-page h4,
.content-page h5 {
    color: #E6EDF3;
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
}

.content-page p,
.content-page li {
    color: #C9D1D9;
}

.content-page ul {
    padding-left: 1.25rem;
}

.content-page li {
    margin-bottom: 0.35rem;
}

.content-page strong {
    color: #F0F6FC;
    font-weight: 600;
}

.content-page a {
    color: #60a5fa;
    text-decoration: none;
}

.content-page a:hover,
.content-page a:focus {
    text-decoration: underline;
}

.content-page code {
    background: #151A21;
    border: 1px solid #21262D;
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.9em;
    color: #E6EDF3;
}

/* Bootstrap's .text-muted is tuned for a white body and disappears against this one. */
.content-page .text-muted {
    color: #8B949E !important;
}

.content-page-updated {
    color: #8B949E;
    font-size: 0.9rem;
    margin-bottom: 2rem;
}

/*
 * The chrome underneath.
 *
 * The shared footer is Bootstrap's white, and every page that still shows it — Privacy, the guide,
 * the gallery listing, the account pages — paints itself dark. So it was a white band under a dark
 * page on all of them, not only on the two this file was written for. Scoped to the footer's own
 * class so a page that wants something else can still say so.
 */
body > footer.footer {
    background: #0A0E14;
    border-top: 1px solid #21262D !important;
    color: #8B949E;
}

body > footer.footer a {
    color: #8B949E !important;
}

body > footer.footer a:hover,
body > footer.footer a:focus {
    color: #C9D1D9 !important;
}