/* Page shell layout (owner: UI/UX). Mobile first. */
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word; }

.skip-link { position: absolute; left: -999px; top: 0; }
.skip-link:focus { left: var(--space-1); top: var(--space-1); background: var(--color-bg); color: var(--color-text); padding: var(--space-1) var(--space-2); border: 2px solid currentColor; z-index: 20; }

.site-header { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-bottom: 1px solid currentColor; }
.site-header ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); list-style: none; margin: 0; padding: 0; }
.site-header nav a { display: inline-block; padding: .6rem .5rem; min-height: 44px; text-decoration: none; border-bottom: 3px solid transparent; }
.site-header nav a:hover { border-bottom-color: var(--color-accent); }
.site-header nav a[aria-current="page"] { border-bottom-color: currentColor; }
.brand { display: inline-block; padding: .4rem 0; font-size: 1.25rem; }

main { flex: 1; width: 100%; max-width: var(--measure); margin: 0 auto; padding: var(--space-3) var(--space-2); }
main > h1 { margin-top: 0; }
main :is(ul, ol) { padding-left: 1.25rem; }
main li + li { margin-top: var(--space-1); }

.site-footer { padding: var(--space-3) var(--space-2); text-align: center; border-top: 1px solid currentColor; }

@media (min-width: 40rem) {
  .site-header { flex-direction: row; align-items: center; justify-content: space-between; padding: var(--space-1) var(--space-3); }
  main { padding: var(--space-3); }
}

/* Decorative banner image (e.g. assets/rhine.svg): scales to the column. */
main img { display: block; max-width: 100%; height: auto; }