:root {
    --18pt: 0.8rem;    /* 18pt */
    --21pt: 0.933rem;  /* 21pt */
    --26pt: 1.155rem;  /* 26pt */
    --30pt: 1.333rem;  /* 30pt */
    --48pt: 2.132rem;  /* 48pt */
}

body {
    font-family: 'Manrope';
    font-size: var(--26pt);
}

h1,h2 {
    font-family: 'Manrope';
    font-weight: 800;
    font-size: var(--26pt);
}
h3 {
    font-size: var(--26pt);
    font-weight: 700;
}

/* A caption: the emphasis right after an image. */
img + em {font-size: var(--21pt);}

a {text-decoration: none;}

/* A red link in the text has no underline; on hover one grows in
   from the left, as on usecue.com. Links in a coloured section are
   not red and keep their own look, as do the bar buttons. The red
   button of a {{< sample >}} form and the links of the posts carousel
   get the same underline, and so do the menu items but the active one,
   in their own colour, and the text of a bar button or of the bar of
   a folded form, in white, when the bar is hovered. */
section:not(.red, .blue, .green, .gray) :is(.content, .project-text) a:not(.bar-button),
.bar-button-label,
.sample button[type=submit],
.post-more a,
#menu li:not(.active) a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 calc(50% + .6em);
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size .3s;
}
section:not(.red, .blue, .green, .gray) :is(.content, .project-text) a:not(.bar-button):hover,
.bar-button:hover .bar-button-label,
button.sample-title:hover .bar-button-label,
.sample button[type=submit]:hover,
.post-more a:hover,
#menu li:not(.active) a:hover {
    background-size: 100% 1px;
}
/* An arrow at the end of such a link or button hangs just after it,
   outside its box, so the underline stops at the text. */
:is(a, button):has(> .link-arrow) {
    position: relative;
}
.link-arrow {
    position: absolute;
    left: 100%;
    padding-left: .25em;
    white-space: nowrap;
}

blockquote {
    font-weight: 300;
    font-size: var(--48pt);
    line-height: 1.3;
}
blockquote:not(:first-child):not(:last-child) {margin-block: 1em;}

aside {
    font-size: var(--18pt);
}


nav a {color: var(--gray);}
nav .active a {color: var(--red);}
footer .footer-3,
footer .footer-4 {font-size: var(--48pt); font-weight: 300;}