/* Shared styles for the bike ride site.
   Mobile first: the base rules are the phone layout, and the media query
   widens things once there's room.

   body is itself the readable column, so pages need no wrapper element
   and no structural edits. */

:root {
    --ink: #1a1a1a;
    --ink-soft: #555;
    --rule: #d8d8d8;
    --link: #16548c;
}

html {
    background-attachment: fixed;
    background-image: url('Hopf_colour.png');
    /* Stop iOS bumping up font sizes in landscape. */
    -webkit-text-size-adjust: 100%;
}

body {
    background: #fff;
    border-radius: 4px;
    box-sizing: border-box;
    color: var(--ink);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    /* Overrides the old inline margin-left:5cm / margin: 3% 10% rules. */
    margin: 0.75rem auto;
    max-width: 44rem;
    padding: 1.25rem;
}

h1, h2, h3, h4 {
    line-height: 1.25;
    margin: 1.5em 0 0.5em;
    text-wrap: balance;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

a { color: var(--link); }

/* Day lists: generous tap targets. */
ul { padding-left: 1.25rem; }
li { margin: 0.4em 0; }
li a { display: inline-block; padding: 0.15em 0; }

/* Images keep their real aspect ratio and never exceed the column.
   The old pages forced every photo to 900x400, which both overflowed
   phones and distorted anything that wasn't 2.25:1. */
img, video {
    height: auto;
    max-width: 100%;
}

/* Embeds scale to the column instead of a fixed pixel size. Each iframe
   carries its own aspect-ratio inline, derived from the width/height it
   was published with, so portrait Vimeo clips stay portrait. */
iframe {
    border: 0;
    display: block;
    height: auto;
    margin: 1rem auto;
    max-width: 100%;
    width: 100%;
}

/* Leaflet route maps ship no intrinsic size; the old inline height:50%
   collapsed to zero on a phone. */
iframe.map {
    aspect-ratio: 4 / 3;
}

@media (max-width: 30rem) {
    /* Portrait video is unusable at full width on a narrow screen. */
    iframe.portrait {
        margin-inline: auto;
        max-width: 17rem;
    }
}

/* <center> is all over these pages; keep it from forcing overflow. */
center { max-width: 100%; }

/* Wide tables scroll inside themselves rather than the page. */
table {
    border-collapse: collapse;
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2rem 0;
}

/* Editorial asides added during the revival. The indent and the sans face
   mark them as later additions, so they read as notes about the blog rather
   than as part of it - which is why they are in the past tense while the
   posts themselves stay in the present tense they were written in. */
.note {
    border-left: 3px solid var(--rule);
    color: var(--ink-soft);
    font-family: system-ui, sans-serif;
    font-size: 0.9375rem;
    margin: 1.5rem 0;
    padding: 0.25rem 0 0.25rem 1rem;
}

.note-title {
    color: var(--ink);
    display: block;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    margin-bottom: 0.15em;
    text-transform: uppercase;
}

/* Previous / Index / Next, repeated at the head and foot of every day page.
   The three cells keep equal width so Index stays centred even on the first
   and last day, where one of the neighbours is missing. */
.daynav {
    align-items: baseline;
    display: flex;
    font-family: system-ui, sans-serif;
    font-size: 0.9375rem;
    gap: 0.5rem;
    justify-content: space-between;
}

.daynav > span {
    flex: 1 1 0;
    min-width: 0;
}

.daynav .idx { text-align: center; }
.daynav .next { text-align: right; }

/* Comfortable to hit with a thumb. */
.daynav a {
    display: inline-block;
    padding: 0.5em 0;
    text-decoration: none;
}

.daynav a:hover { text-decoration: underline; }

.daynav-top {
    border-bottom: 1px solid var(--rule);
    margin-bottom: 1.5rem;
}

.daynav-bottom {
    border-top: 1px solid var(--rule);
    margin-top: 2rem;
}

@media (min-width: 46rem) {
    body {
        margin: 2.5rem auto;
        padding: 2.5rem 3rem;
    }
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.625rem; }
}