*,
*::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-wordmark-width: clamp(288px, 80vw, 740px);

    /* 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);
    /* Inter, which is the face the application sets its words in, so a member
       who reads the site and then opens the app is reading one face throughout.
       The file and the @font-face that loads it both come from the assets
       crate, put in the head there, because the file's address is only settled
       when the bundle is built.

       The stack behind it is each platform's own interface face. It is named
       because the browser's default for unstyled text is a serif, and it is
       what a reader sees for the moment before Inter arrives -- the wordmark
       and the tagline are pictures with their letters drawn in, so they are
       never waiting on it. */
    font-family: 'Inter', -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 wordmark and the tagline are the lockup the assets crate draws, and
   its style comes from that crate: this sheet only says how wide the
   wordmark stands here, through --freebody-wordmark-width above, and the
   pair scales together with the viewport from a phone to a desktop. */

/* 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(200px, 44vw, 320px);
    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);
}