:root {
  color-scheme: light;
  font: 100%/1.55 system-ui, sans-serif;
  --site-ink: #172f29;
  --site-pine: #183c33;
  --site-moss: #36564a;
  --site-mint: #e7eee9;
  --site-paper: #f7f8f2;
  --site-line: #c9d7cb;
  color: var(--site-ink);
  background: var(--site-paper);
}
* { box-sizing: border-box; }
body { margin: 0; }
.site-width, main {
  width: min(100% - 2rem, 74rem);
  margin-inline: auto;
}
.site-header { background: white; border-bottom: 1px solid var(--site-line); }
.site-nav { display: flex; align-items: center; gap: clamp(.75rem, 2.3vw, 2rem); min-height: 5rem; }
.site-brand { display: inline-flex; align-items: center; gap: .65rem; flex: none; font-weight: 750; line-height: 1.2; }
.site-brand span { word-break: keep-all; }
.site-brand img { flex: none; border-radius: .25rem; }
.site-brand, .site-links a, .site-footer a { text-decoration: none; }
.site-menu {
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 2vw, 1.5rem);
  min-width: 0;
  margin-inline-start: auto;
  padding: .35rem;
  overflow-x: auto;
  scroll-padding-inline: .35rem;
}
.site-links { display: flex; flex: none; gap: clamp(.75rem, 2vw, 1.5rem); }
.site-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: .2em; }
.site-links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .9rem; font-weight: 600; }
.site-links a:hover, .site-footer a:hover, .site-brand:hover { text-decoration: underline; text-underline-offset: .2em; }
.site-book { flex: none; font-size: .9rem; white-space: nowrap; }
.site-footer { background: var(--site-pine); color: white; }
.site-footer .site-width { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem 1.5rem; padding-block: 1.5rem; }
.site-footer a { color: inherit; }
.site-footer :focus-visible { outline-color: #f1d4a1; }
.site-footer-brand { font-weight: 750; }
.skip-link {
  position: absolute;
  z-index: 2;
  inset: .5rem auto auto .5rem;
  background: white;
  padding: .65rem 1rem;
}
.skip-link:not(:focus) { clip-path: inset(50%); }
a { color: var(--site-pine); }
h1, h2, h3 { line-height: 1.15; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
.field { margin-block: 1rem; }
label, dt { font-weight: 650; }
small { color: #4b6355; margin-inline-start: .5rem; }
input, select, textarea, button { font: inherit; }
input:not([type="checkbox"]), select, textarea { display: block; width: 100%; min-height: 2.75rem; padding: .5rem; border: 1px solid #637b6c; border-radius: .25rem; }
.button, button { display: inline-block; background: var(--site-pine); color: white; padding: .65rem 1rem; border: 0; border-radius: .35rem; text-decoration: none; cursor: pointer; }
a.button:hover { background: #285749; }
:focus-visible { outline: .2rem solid #a05a18; outline-offset: .2rem; }
.errorlist { color: #9b2525; }
dd { margin-inline-start: 0; margin-block-end: 1rem; overflow-wrap: anywhere; }

@media (max-width: 56rem) {
  .site-nav { display: grid; gap: 0; min-height: auto; }
  .site-brand { justify-self: start; padding-block: .65rem; font-size: .9rem; gap: .45rem; }
  .site-brand img { width: 2.25rem; height: 2.25rem; }
  .site-menu { margin: 0; border-top: 1px solid var(--site-line); }
  .site-book { padding-inline: .75rem; }
}
@media (max-width: 24rem) {
  .site-brand { font-size: .85rem; }
  .site-book { font-size: .8rem; }
}

.site-language { display: inline-flex; flex: none; gap: .2rem; }
.site-language button {
  min-height: 2.75rem;
  padding: .3rem .45rem;
  background: transparent;
  color: var(--site-pine);
  font-size: .8rem;
  white-space: nowrap;
}
.site-language button[aria-pressed="true"] { background: var(--site-mint); font-weight: 750; }