/* jordibuskermolen.nl
   One stylesheet for three pages. No framework, no reset beyond what is
   needed, no accent color: links are the text color plus an underline. */

html {
    background: #EDEFF1;
}

/* The last element's bottom margin would otherwise collapse through its
   parent and out of the body, adding its height below the padding and giving
   a short page a scrollbar over nothing to scroll to. */
body > :last-child,
.home > :last-child {
    margin-bottom: 0;
}

body {
    box-sizing: border-box;
    color: #1B1E22;
    font-family: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
    font-size: 19px;
    line-height: 1.6;
    margin: 0 auto;
    /* 66ch is wider than a phone, so the measure has to yield to the viewport
       rather than push text off the edge. border-box keeps the side padding
       inside the width instead of adding to it. */
    max-width: 66ch;
    /* Both ends are capped rather than plain vh units: those grew with the
       window, so a tall screen pushed the page down by over 200px and left a
       few hundred more below the last line, which showed up as a scrollbar on
       a page that otherwise fits. The bottom keeps enough room for the fixed
       notice bar to sit clear of the final line. */
    padding: min(7vh, 64px) 24px min(12vh, 112px);
    width: 100%;
}

/* Links carry no color of their own. The offset keeps the underline clear
   of the descenders in a serif face. */
a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:visited {
    color: inherit;
}

h1 {
    font-size: 1.6em;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 0.3em;
}

h2 {
    font-size: 1.15em;
    font-weight: bold;
    line-height: 1.35;
    margin: 2.2em 0 0.9em;
}

p {
    margin: 0 0 1.2em;
    /* The email address and a few long compounds are wider than a 360px
       column; break them rather than let them widen the page. */
    overflow-wrap: break-word;
}

img {
    max-width: 100%;
}

/* -- Language switcher --------------------------------------------------- */

/* Top right, above everything. The site has no header, so this is deliberately
   not one: no bar, no border, no box. The active language is marked by weight
   and by dropping the underline, so the pair still reads as one small label
   rather than as navigation. */
.langs {
    font-size: 0.78em;
    letter-spacing: 0.04em;
    margin: 0 0 1.6em;
    text-align: right;
}

.langs span,
.langs a {
    padding: 0 0.15em;
}

/* The current language: no link, no underline, and heavier than its partner. */
.langs span[aria-current] {
    font-weight: bold;
}

/* A hairline between the two labels, in place of a slash. It is the notice's
   rule colour rather than the text colour: at full strength it reads as a
   third mark competing with the two labels. */
.langs a + span,
.langs span + a {
    border-left: 1px solid #C9CDD2;
    margin-left: 0.45em;
    padding-left: 0.6em;
}

/* -- Letter pages ------------------------------------------------------- */

/* The subtitle and the dateline sit under the h1 as plain paragraphs, so the
   heading order stays h1 -> h2 with nothing skipped. */
.subtitle {
    font-size: 1.05em;
    margin: 0 0 0.2em;
}

.dateline {
    margin: 0 0 2.4em;
}

/* The cross-language note on the English page, between the subtitle and the
   dateline. It sits with them as one block, so the space goes after the
   dateline rather than between the two. */
.origin {
    margin: 0.9em 0 0.9em;
}

.signature,
.also,
.back {
    font-size: 0.82em;
}

.signature {
    margin: 3em 0 1.6em;
}

.signature span {
    display: block;
}

.also {
    margin: 0 0 2.6em;
}

.back {
    margin: 0;
}

/* -- Voorpagina --------------------------------------------------------- */

/* The same styles with more air between paragraphs: one short page of typed
   text rather than a layout. */
.home p {
    margin: 0 0 1.9em;
}

.home .portrait {
    display: block;
    height: 140px;
    margin: 0 0 1.8em;
    width: 140px;
}

.home h1 {
    font-size: 1.45em;
    margin: 0 0 1.6em;
}

.home .contact {
    margin-top: 2.6em;
}

/* -- Cookie notice ------------------------------------------------------ */

/* One line at the foot of the window. It sits on the same ground as the page
   with a hairline above it, so it reads as a footnote rather than a dialog:
   no panel, no shadow, no accent. */
.notice {
    background: #EDEFF1;
    border-top: 1px solid #D8DCE0;
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
}

/* The text is centred across the full width of the bar rather than following
   the page's text column, so the notice reads as its own strip at the foot of
   the window. */
.notice p {
    box-sizing: border-box;
    margin: 0;
    padding: 0.7em 24px;
    text-align: center;
}

.notice span {
    font-size: 0.76em;
}

/* The button is a link in everything but element: the site has no other
   button, and a bordered control would be the loudest thing on the page. */
.notice button {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 640px) {
    body {
        font-size: 17px;
        padding: min(5vh, 40px) 22px min(10vh, 96px);
    }

    .notice p {
        padding: 0.7em 22px;
    }
}