/* Everything the theme sizes, it sizes in `rem`, so the whole design scales from here: text, the
   headings above it, the code inside it and the rails either side.  130% of a browser's 16px default
   is a little over 20px of body text, which is the size this documentation is meant to be read at.

   The size follows the viewport, because the layout of the theme does not follow the size.  Furo
   lays out three columns -- sidebar 15em, text 46em inside 3em of padding either side, contents 15em
   -- which come to the 82em of its widest breakpoint.  Those columns are `em`, so this rule widens
   them; the breakpoint is also `em`, but a media query measures `em` against the 16px default of the
   browser and never against this rule.  A flat 130% therefore asks for 107em of screen while the
   theme still believes 82em is enough, and the table of contents falls off the right of a laptop.

   So each rung divides the viewport by the width its layout needs, with a couple of em spare for the
   scrollbar: 82em while the three columns show, 67em once the contents move into a drawer at 82em,
   and 48em once the sidebar follows them at 63em.  A screen wide enough still reaches the 130% the
   text is meant to be read at; a narrower one gives up size instead of giving up the contents. */
html {
    font-size: clamp(100%, calc(100vw / 84), 130%);
}

@media (max-width: 82em) {
    html {
        font-size: clamp(100%, calc(100vw / 69), 130%);
    }
}

@media (max-width: 63em) {
    html {
        font-size: clamp(100%, calc(100vw / 50), 130%);
    }
}

/* What the theme does not say, and this project has an opinion about. */

/* Fraunces is a variable face: `opsz` is what keeps a heading from reading as a blown-up body letter,
   and `SOFT`/`WONK` are the axes that make it a display type rather than a text one.  Headings ask
   for the large optical size and leave the wonky alternates off. */
h1, h2, h3, h4, h5, h6 {
    font-variation-settings: "opsz" 84, "SOFT" 0, "WONK" 0;
    letter-spacing: -0.01em;
    /* Fraunces carries weight of its own -- the theme's 700 sets it shouting.  The `wght` axis is
       left to `font-weight` rather than named above, so this is the value that reaches the face. */
    font-weight: 500;
}

/* Long-form reading, and the settings that help a reader who finds it hard work: text set flush left
   rather than justified, since justification opens rivers of white space between words; a line tall
   enough to find the next one by; and a measure the eye can return across. */
article p,
article li {
    text-align: left;
    line-height: 1.7;
}

/* A picture alone in its paragraph is a figure and not a word, so it sits centred.  Every diagram is
   drawn on white, which in dark mode would read as a hole torn in the page unless the white is framed
   as belonging to the picture.

   The width is what makes the centring show.  The theme holds an image to the full width of whatever
   holds it, which leaves the two automatic margins nothing to divide -- and a narrower box than the
   text column, a footnote's for one, then reads as a picture pushed to the left.  90% leaves every
   image a margin to sit in, wherever it is set. */
article img {
    display: block;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    border-radius: 6px;
    padding: 0.5rem;
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}

/* A footnote indents everything it holds by 2rem, to clear the gutter its own label sits in, and that
   rule is written narrowly enough to beat the automatic margins above -- so a picture inside a
   footnote takes the indent on its left and gives the whole remainder to its right.  Said here, with
   the footnote named, the two margins are automatic again and a footnote's picture lines up with
   every other one on the page. */
article aside.footnote > img {
    margin-left: auto;
    margin-right: auto;
}

/* Inconsolata runs light beside a serif at the same size; a little more weight in code holds the two
   together on the page. */
code, kbd, samp, pre {
    font-weight: 500;
}

/* A literal written into a sentence -- ``length: 1cm`` -- is part of that sentence, so it is set at
   the size of the sentence rather than at the theme's 81.25%.  Inconsolata's x-height is smaller
   than Literata's, so at a matched em it still reads as slightly quieter than the prose around it.
   A full listing keeps its own smaller size, which `code-font-size` in conf.py sets. */
code.literal {
    font-size: 1em;
}

/* The sidebar brand is the mark and the name on one line.  Furo stacks the brand in a column, for a
   logo centred above the title; this turns it on its side, which is all the arrangement needs.  The
   name keeps the vertical margins the theme gives it, so the brand still sits where it did. */
.sidebar-brand {
    flex-direction: row;
    align-items: center;
    gap: 0.45rem;
}

/* The mark is drawn 32 units square but its two lanes only reach across the middle 24, so a box
   matched to the name's cap height would leave it looking small.  1.6rem against the name's 1.5
   is what makes the two read as the same size. */
.sidebar-icon {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
}