/*
 * The frame: header, page column, footer.
 *
 * The header is fixed and stays a single row at every width. The old site
 * stacked the brand over the nav below 700px and spent about 200px of a phone
 * screen before any content began; there is room for both on one line if the
 * brand gives up a word.
 */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;

    background: var(--color-header-background);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    /* Where the header ends. In a dark theme it is nearly the same black as the
       page under it, and without this the two run together. */
    border-bottom: 1px solid var(--color-header-edge);

    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);

    max-width: 1130px;
    height: var(--header-height);
    margin: 0 auto;
    padding-left: var(--space-4);
}

/*
 * Full size until the nav is actually in the way, then only as small as it has
 * to be.
 *
 * "Unofficial Portkey Archive" measures 11.31em, and on a narrow screen the nav
 * and the header's own padding and gap take 176px, so the largest size that
 * still fits is (100vw - 176px) / 11.31. Divided by 11.8 rather than 11.31 to
 * leave the rounding somewhere to go. The two meet at about 475px, well below
 * the width at which a breakpoint would have started trimming the name, and
 * below that it shrinks by the pixel rather than dropping to a fixed size.
 */
.brand {
    font-size: clamp(0.75rem, calc((100vw - 176px) / 11.8), 1.625rem);
    font-weight: 200;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-header-foreground);
}

.brand:hover {
    text-decoration: none;
}

.site-nav ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-nav a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: var(--header-height);
    min-width: 100px;
    padding: 0 var(--space-5);

    font-size: 1.125rem;
    font-weight: 300;
    color: var(--color-header-foreground);
}

.site-nav a:hover,
.site-nav a[aria-current='page'] {
    background: var(--color-header-active-background);
    color: var(--color-header-active-foreground);
    text-decoration: none;
}

/* Page column ----------------------------------------------------------- */

/* The rule sits below the header's row rather than inside it, so what the page
   has to clear is the row and the rule. */
body {
    padding-top: calc(var(--header-height) + 1px);
}

/* Even top and bottom. The end used to be padded twice the start, which read as
   a band of nothing between the last thing on the page and the footer rule. */
.container {
    max-width: 1130px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
}

/*
 * Held to the reading view's own measure. A summary set across the full 1130px
 * runs to about 140 characters a line, which is well past what anyone reads
 * comfortably - and it made the same paragraph a different shape in the result
 * list than on the story page.
 */
.container--measure {
    max-width: calc(50rem + 2 * var(--space-4));
}

/* A page title with something sitting beside it. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* Running text: the about page, a story's summary block, a notice. */
.prose {
    max-width: 70ch;
}

/* Except where the column is already the measure, in which case that is the
   measure and a second one inside it only makes the page look misaligned. */
.container--measure .prose {
    max-width: none;
}

.prose p,
.prose ul,
.prose ol {
    margin: 1em 0;
}

.prose ul,
.prose ol {
    padding-left: var(--space-6);
}

.prose li {
    margin: 0.5em 0;
}

.prose h2 {
    margin-top: 1.5em;
}

.prose h2 + p {
    margin-top: 0.5em;
}

/* Centred, because the only place a notice appears is under a story's centred
   title block, and a box hard against the left edge reads as unrelated to it. */
/* The about page's list of places to go: one line each, a little apart. */
.prose .signposts li {
    margin-bottom: 0.4rem;
}

/* Updates: a date, then what happened, newest first. */
.prose .updates dt {
    margin-top: 1.25rem;
    color: var(--color-muted);
}

.prose .updates dd {
    margin: 0.25rem 0 0;
}

/* A plain table of files: name, size, date. */
.file-list {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1.5rem;
}

.file-list th,
.file-list td {
    text-align: left;
    padding: 0.4rem 0.75rem 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    vertical-align: top;
}

.file-list th {
    color: var(--color-muted);
    font-weight: 400;
}

/* What is in the file, under its name. */
.file-list__description {
    margin: 0.25rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-muted);
}

.notice {
    margin: var(--space-5) auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
}

/* The scrim disclosure.js puts behind the filter sheet. */
/* Dimmed and blurred: what is behind the sheet is not for reading while the
   sheet is open, and blur says that in a way a wash of black alone does not. */
.menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--color-scrim);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Footer ---------------------------------------------------------------- */

.site-footer {
    max-width: 1130px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4);
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));

    border-top: 1px solid var(--color-rule);

    font-size: 0.8125rem;
    line-height: 1.6;
    text-align: center;
    color: var(--color-muted);
}

.site-footer a {
    color: inherit;
    text-decoration: underline;
}

.site-footer p + p {
    margin-top: var(--space-2);
}

.theme-switch {
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
}

@media (max-width: 700px) {
    :root {
        --header-height: 48px;
    }

    .site-header__inner {
        padding-left: var(--space-3);
    }

    /* A last resort the clamp above should never reach. */
    .brand {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
     * Narrower padding, but the same size type: there is room for it. Ruled off
     * instead - at 12px of padding About and Search read as one run of words,
     * and a hairline says where one ends and the next begins without spending
     * any of the width that the padding would. On the first as well, which is
     * the same line between the nav and the brand.
     */
    .site-nav a {
        min-width: 0;
        padding: 0 var(--space-3);
        border-left: 1px solid var(--color-header-rule);
    }

    .container {
        padding: var(--space-5) var(--space-3);
    }
}