/* Sage stone, petrol ink, and a single book face. Shared by every page. */
:root {
  color-scheme: light;
  --ground: #adbbb2;
  --header: #b9c8bf;
  --panel: #c9d3ca;
  --section: #b9c7bd;
  --ink: #213d39;
  --heading: #163d39;
  --accent: #164f50;
  --muted: #314b43;
  --line: #7b948a;
  --book: Charter, "Bitstream Charter", "Sitka Text", Georgia, serif;
}
* { box-sizing: border-box; }
html { font-family: var(--book); font-size: 19px; }
body { margin: 0; background: var(--ground); color: var(--ink); line-height: 1.65; }
h1, h2, h3, h4, h5, h6, p, figure, ul { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--book); color: var(--heading); font-weight: 700; line-height: 1.15; letter-spacing: normal; }
h1 { font-size: clamp(2.8rem, 5.1vw, 3.8rem); text-wrap: balance; }
h2 { font-size: clamp(1.65rem, 2.55vw, 2rem); text-wrap: balance; }
h3 { font-size: 1.35rem; }
a { display: inline-flex; align-items: center; gap: .3em; min-width: 44px; min-height: 44px; max-width: 100%; padding: 8px 0; border-radius: 6px; color: var(--accent); font-family: inherit; font-size: 1rem; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: var(--heading); text-decoration-thickness: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; background: var(--panel); color: var(--heading); }
a[aria-current="page"] { color: var(--heading); font-weight: 700; text-decoration-thickness: 3px; }
img { display: block; width: 100%; height: auto; border-radius: 6px; color: var(--ink); font: inherit; }
ul { padding-left: 1.2rem; }
li { padding-block: .3rem; }
::selection { background: var(--accent); color: #f4f7ef; }
header { background: var(--header); }
footer { background: var(--header); }
.u-width-frame { width: min(100% - 5rem, 1220px); }
.u-center { margin-inline: auto; }
.u-measure { max-width: 65ch; }
.u-measure-title { max-width: 21ch; }
.u-grid { display: grid; }
.u-flex { display: flex; }
.u-wrap { flex-wrap: wrap; }
.u-align-center { align-items: center; }
.u-align-start { align-items: start; }
.u-between { justify-content: space-between; }
.u-justify-end { justify-content: end; }
.u-header-cols { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.u-feature-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
.u-two-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.u-footer-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.u-gap-small { gap: .5rem 1.25rem; }
.u-gap-medium { gap: 1.25rem; }
.u-gap-large { gap: 2.6rem; }
.u-min-zero { min-width: 0; }
.u-order-brand { order: 0; padding: .4rem .8rem; }
.u-block { display: block; }
.u-no-list { list-style: none; }
.u-pad-zero { padding: 0; }
.u-pad-medium { padding: 1.7rem; }
.u-pad-header { padding-block: 1.1rem; }
.u-pad-hero { padding-block: 3.1rem 2.6rem; }
.u-pad-section { padding-block: 1.8rem; }
.u-pad-footer { padding-block: 2.4rem; }
.u-margin-small { margin-top: .6rem; }
.u-margin-medium { margin-top: 1.25rem; }
.u-margin-large { margin-top: 2.1rem; }
.u-space-stack > * + * { margin-top: 1.1rem; }
.u-rule-top { border-top: 2px solid var(--line); }
.u-rule-bottom { border-bottom: 2px solid var(--line); }
.u-rule-left { border-left: 4px solid var(--accent); border-radius: 6px; }
.u-rule-box { border: 0; }
.u-bg-panel { background: var(--panel); }
.u-sky { color: var(--accent); }
.u-white { color: var(--heading); }
.u-muted { color: var(--muted); }
.u-caps { text-transform: none; }
.u-tracking { letter-spacing: normal; }
.u-font-label { font-size: 1rem; }
.u-font-deck { font-size: 1.18rem; }
.u-weight-medium, .u-weight-bold { font-weight: 700; }
.u-font-display { font-family: var(--book); }
.u-brand-size { font-size: 1.85rem; font-weight: 700; }
.u-brand-leading { line-height: 1.15; }
.u-align-text-center { text-align: center; }
.u-no-underline { text-decoration: none; }
.u-round-small { border-radius: 6px; }
.u-source-pad { padding-top: .65rem; }
.u-source-border { border-top: 1px solid var(--line); }
.u-source-arrow::after { content: "↗"; margin-left: .15em; flex: none; }
.u-next-arrow::after { content: "→"; margin-left: .3em; flex: none; }
.u-drop-cap::first-letter { font: inherit; color: inherit; }
.u-ask-pad { padding: .8rem 1rem; background: var(--panel); }
.u-ask-pad > .u-font-label { font-weight: 700; }
aside .u-ask-pad { background: var(--section); }
.u-image-background { background: var(--section); }
.u-image-frame { overflow: hidden; }
.u-image-ratio { aspect-ratio: 16 / 5; height: 100%; object-fit: cover; object-position: center 54%; }
.u-caption-pad { padding-top: .75rem; }
/* Existing photographs become broad pauses between the opening and question pages. */
main:has(> figure) { display: grid; grid-template-columns: minmax(0, 1fr); }
main:has(> figure) > .u-pad-hero { grid-row: 1; }
main > figure { grid-row: 2; margin-top: 0; margin-bottom: 2.6rem; }
main:has(> figure) > .u-two-cols { grid-row: 3; }
main:has(> figure) > div:last-child { grid-row: 4; }
main > .u-two-cols { column-gap: 3.4rem; row-gap: 1rem; }
main > .u-two-cols > section { padding-bottom: 2rem; }
main > div:last-child.u-print-hide > a { padding: .7rem 1rem; background: var(--panel); font-weight: 700; }
.u-skip { position: absolute; left: 1rem; top: -8rem; z-index: 10; padding: .7rem 1rem; background: var(--panel); color: var(--heading); }
.u-skip:focus { top: 1rem; }
@media (max-width: 900px) {
  .u-width-frame { width: calc(100% - 3rem); }
  .u-gap-large { gap: 1.7rem; }
  .u-pad-medium { padding: 1.3rem; }
  .u-header-cols { column-gap: .8rem; }
  .u-header-cols nav { gap: .2rem .8rem; }
  main > .u-two-cols { column-gap: 2rem; }
}
@media (max-width: 780px) {
  html { font-size: 18px; }
  .u-width-frame { width: calc(100% - 2rem); }
  .u-header-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; }
  .u-order-brand { grid-column: 1 / -1; grid-row: 1; }
  .u-header-cols nav { justify-content: space-between; }
  .u-feature-cols, .u-two-cols { grid-template-columns: minmax(0, 1fr); }
  .u-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .u-gap-large { gap: 1.6rem; }
  .u-pad-hero { padding-block: 2rem; }
  .u-pad-header { padding-block: .8rem; }
  .u-pad-medium { padding: 1.3rem; }
  h1 { font-size: clamp(2.35rem, 9.5vw, 3.3rem); line-height: 1.12; }
  h2 { font-size: 1.65rem; }
  .u-font-deck { font-size: 1.1rem; }
  .u-image-ratio { aspect-ratio: 4 / 3; }
  main > figure { margin-bottom: 2rem; }
  main > .u-two-cols { row-gap: 0; }
}
@media (max-width: 430px) {
  .u-header-cols nav { gap: .15rem .25rem; }
  .u-header-cols nav a { font-size: .95rem; padding-inline: .1rem; }
  .u-footer-cols { gap: .5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  :root { color-scheme: light; --ground: white; --header: white; --ink: #213d39; --heading: #163d39; --accent: #164f50; --muted: #314b43; --panel: white; --section: white; --line: #7b948a; }
  html { font-size: 16px; }
  header, footer, .u-skip, .u-print-hide { display: none; }
  .u-width-frame { width: 100%; }
  main:has(> figure) { display: block; }
  .u-feature-cols, .u-two-cols { grid-template-columns: minmax(0, 1fr); }
  .u-pad-hero { padding-block: 0 1rem; }
  h1 { font-size: 2.4rem; }
  section, .u-ask-pad { break-inside: avoid; }
  a { min-height: 0; }
}