/* Shared by the privacy, terms and not-found pages. Colours and fonts match index.html. */
:root {
  --sky: #DCE7E6;
  --paper: #F5F8F7;
  --spruce: #173B33;
  --spruce-soft: #3D5C54;
  --door: #E9B949;
  --mist: #C9D8D4;
  --serif: "Young Serif", Georgia, serif;
  --sans: "Hanken Grotesk", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--spruce); }
body { margin: 0; background: var(--paper); color: var(--spruce); font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--spruce); outline-offset: 3px; }

.bar { display: flex; justify-content: space-between; align-items: baseline; gap: .25rem 1rem; flex-wrap: wrap; max-width: 72rem; margin: 0 auto; padding: 1.5rem 1.5rem 0; }
.wordmark { font: 400 1.375rem/1.2 var(--serif); text-decoration: none; }
.bar a:not(.wordmark) { font-weight: 600; }

main { max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.5rem 4.5rem; }
h1 { margin: 0 0 .5rem; font: 400 clamp(2.25rem, 6vw, 3.25rem)/1.1 var(--serif); letter-spacing: -.01em; }
.updated { margin: 0 0 2.5rem; color: var(--spruce-soft); }
h2 { margin: 2.5rem 0 .6rem; font: 400 1.5rem/1.25 var(--serif); }
p, li { max-width: 68ch; }
ul { padding-left: 1.25rem; }
li + li { margin-top: .35rem; }
.callout { margin: 1.25rem 0; padding: 1rem 1.25rem; background: var(--sky); border-left: 4px solid var(--spruce); }
.button { display: inline-block; margin-top: 1rem; padding: .8rem 1.25rem; background: var(--door); color: var(--spruce); font: 400 1.25rem/1.2 var(--serif); text-decoration: none; border-radius: 2px; }

footer { background: var(--spruce); color: var(--mist); }
footer .inner { display: flex; justify-content: space-between; gap: .5rem 2rem; flex-wrap: wrap; max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.5rem 2.25rem; font-size: 1rem; }
footer nav { display: flex; gap: .5rem 1.25rem; flex-wrap: wrap; align-self: flex-start; }
footer address { font-style: normal; line-height: 1.6; }
footer a { color: var(--sky); }
footer :focus-visible { outline-color: var(--door); }