*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* The three colours the brand is drawn in, and the only place this page
       writes them down. They are paired with `freebody_assets::palette`, which
       the marks above are drawn from, by a test -- the page and the application
       are meant to be the same three colours, and nothing else compares one
       hexadecimal literal to another.

       Also as components, because a colour written as `#RRGGBB` cannot be given
       an alpha at the point of use, and the glow behind the mark is one of these
       three at a strength. */
    --freebody-ink: #16243F;
    --freebody-ink-rgb: 22 36 63;
    --freebody-ivory: #FBF7F0;
    --freebody-ivory-rgb: 251 247 240;
    --freebody-sky: #C9D9F2;
    --freebody-sky-rgb: 201 217 242;

    /* FreeBody is set on the ink wherever it appears. Declaring the scheme is
       what keeps the controls the platform paints for us -- scrollbars above
       all -- from arriving light over a dark page. */
    color-scheme: dark;
}

html {
    background-color: var(--freebody-ink);
    /* Room for a scrollbar whether or not there is one, on both edges.

       The documents scroll and the home page does not, so without this the
       viewport is narrower on one than the other by the width of a scrollbar,
       and everything centred in it -- the lockup, the notice, the column of
       prose -- steps sideways as you move between them. Reserving the space
       always means the pages agree on how wide they are.

       Both edges rather than one, because the space is reserved on the end edge
       only by default: the page would stop shifting between routes but would
       sit permanently off-centre by half a scrollbar. This site is a centred
       column, so it should be centred in the window rather than in what is left
       of it.

       It costs nothing where scrollbars float over the content, as they do on
       macOS by default -- there is no gutter to reserve. It earns its keep on
       Windows, and on any machine set to keep its scrollbars on screen. */
    scrollbar-gutter: stable both-edges;
}

body {
    background-color: var(--freebody-ink);
    color: var(--freebody-ivory);
    /* The face the platform already uses for its own interface. Named because
       the browser's default for unstyled text is a serif, and until this page
       had prose on it there was nothing to reveal that: a wordmark is a picture
       and the tagline names its own face. Nothing is downloaded for it, which
       is the other reason -- the only web font here is the one the tagline
       genuinely needs. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

::selection {
    background-color: rgb(var(--freebody-sky-rgb) / 0.3);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Every page fills the screen at least once and puts its notice at the foot.
   The viewport unit is the small one so a phone's collapsing toolbar cannot
   leave the shell taller than the screen it is measured against. */
.freebody-shell {
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

/* The home page is one column, centred on both axes, taking whatever the shell
   has left after the notice. */
.freebody-page {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    overflow: hidden;
}

/* The field is flat, and deliberately.

   There was a radial glow behind the mark. It lived inside this page, which is
   only part of the shell, so it stopped where the notice began -- and because it
   carried the grain that kept it from banding, the seam was not a step in colour
   but a step in texture: grain above, perfectly flat ink below, at the same
   average. That reads as a line drawn across the page.

   It could have been stretched over the whole shell instead. It is gone instead,
   because the glow also needed careful dithering to avoid banding into
   concentric rings on a dark field -- Safari renders gradients without any
   dithering of its own -- and a flat field cannot band, cannot seam, and needs
   nothing to defend it. If a gradient comes back here, it needs both: grain that
   crosses a whole level, and a field that reaches wherever the page does.
*/

.freebody-column {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* The mark and the wordmark scale together with the viewport, so the pair keeps
   its proportions from a phone to a desktop rather than one of them running
   away from the other. */
.freebody-mark {
    width: clamp(132px, 26vw, 268px);
    height: auto;
}

.freebody-wordmark {
    width: clamp(232px, 46vw, 470px);
    height: auto;
    margin-top: 1.5rem;
}

/* Set in the face the wordmark's own lettering was drawn from, so the line
   below the mark reads as the same hand that wrote it. Pacifico's ascenders and
   descenders are long, so the line is given room rather than the face's default
   leading. */
.freebody-tagline {
    font-family: 'Pacifico', cursive;
    font-weight: 400;
    color: var(--freebody-sky);
    font-size: clamp(1.125rem, 4.6vw, 2.125rem);
    line-height: 1.6;
    margin-top: 2rem;
}

/* The notice at the foot of every page.

   Without a rule above it. A separator would be a second way of saying what the
   end of the text has already said, and on a page that is one column of prose
   there is nothing for it to separate. The space does the work. */
.freebody-footer {
    padding: 2.5rem 1.5rem 3rem;
    text-align: center;
    font-size: 0.8125rem;
    color: rgb(var(--freebody-ivory-rgb) / 0.42);
}

/* The documents, above the notice. Laid out as a row that wraps rather than as
   two items with a separator between them, so a narrow screen stacks them
   instead of pushing one off the side. */
.freebody-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.75rem;
    margin-bottom: 1rem;
}

.freebody-footer-links a {
    color: rgb(var(--freebody-ivory-rgb) / 0.62);
    text-decoration: none;
}

.freebody-footer-links a:hover {
    color: var(--freebody-sky);
}

.freebody-notice {
    margin: 0;
}

/* A legal document: one column, measured for reading rather than for filling
   the screen. */
.freebody-legal {
    flex: 1;
    width: 100%;
    max-width: 44rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 1rem;
    color: rgb(var(--freebody-ivory-rgb) / 0.78);
    font-size: 1rem;
    line-height: 1.7;
}

/* The wordmark at the head of the document, and the way back out of it: these
   pages are reached from a store listing, where a reader arrives with no other
   route to the site. */
.freebody-legal-wordmark {
    display: block;
    margin-bottom: 3rem;
}

.freebody-legal-wordmark img {
    width: clamp(168px, 32vw, 232px);
    height: auto;
    margin: 0 auto;
}

.freebody-legal h1 {
    color: var(--freebody-ivory);
    font-size: clamp(1.75rem, 5vw, 2.25rem);
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

/* Section headings are the ink's own light rather than the ivory, so a reader
   scanning for a section finds one without the page turning into a list of
   equally loud lines. */
.freebody-legal h2 {
    color: var(--freebody-sky);
    font-size: 1.0625rem;
    letter-spacing: 0.06em;
    line-height: 1.4;
    margin-top: 3.5rem;
    margin-bottom: 1rem;
}

.freebody-legal h3 {
    color: var(--freebody-ivory);
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.freebody-legal p {
    margin-bottom: 1.25rem;
}

/* When the document was last changed, said quietly under its title. */
.freebody-updated {
    color: rgb(var(--freebody-ivory-rgb) / 0.44);
    font-size: 0.9375rem;
    margin-bottom: 2.5rem;
}

.freebody-legal ul,
.freebody-legal ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

/* The lists number themselves in the text -- (i), (ii) -- so a marker drawn
   beside them would be a second numbering disagreeing with the first. */
.freebody-legal ul {
    list-style: none;
    padding-left: 0;
}

.freebody-legal li {
    margin-bottom: 0.625rem;
}

.freebody-legal strong {
    color: var(--freebody-ivory);
    font-weight: 600;
}

.freebody-legal a {
    color: var(--freebody-sky);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.freebody-legal a:hover {
    color: var(--freebody-ivory);
}