/* Homepage. Deliberately close to browser defaults; blog posts use
   style.css + blog.css instead. */

/* Everything is sized in em, so this scales all text (headings included) */
html {
    font-size: 110%;
}

/* Banners are cropped, not scaled: the wrapper has a fixed shape and clips
   the bottom of the image rather than shortening it, which would squash the
   dithering. 700:113 is the blue banner (862x176) at the 700px column with
   its bottom ~30px hidden; the ratio keeps that crop proportional at
   narrower widths so stacked banners stay the same height. */
.banner {
    max-width: 700px;
    aspect-ratio: 700 / 113;
    overflow: hidden;
    line-height: 0;
}

.banner img {
    display: block;
    width: 100%;
    height: auto;
    transform: scaleX(-1);
    user-select: none;
}

/* Cave painting banner: already cropped to the 700:113 shape, so it fits
   the wrapper exactly; not mirrored like the blue one. */
.banner-cave {
    margin-bottom: 10px;
}

.banner-cave img {
    transform: none;
}

/* Small inline logo before a link's text, e.g. the X/twitter link */
svg.icon {
    width: 0.85em;
    height: 0.85em;
    fill: currentColor;
    vertical-align: -0.1em;
    margin-right: 0.4ch;
}

/* Space between the social links */
nav a + a {
    margin-left: 1.2ch;
}