:root {
  color-scheme: light;
  --navy: #143052;
  --teal: #087569;
  --ink: #21374b;
  --muted: #4b605e;
  --line: #d6e2de;
  --paper: #f5faf8;
  font-family: "Instrument Sans", system-ui, sans-serif;
  color: var(--ink);
}
* { box-sizing: border-box; }
body { margin: 0; line-height: 1.6; }
.wrap { width: min(68rem, calc(100% - 2rem)); margin-inline: auto; }
header { border-bottom: 1px solid var(--line); }
.masthead, footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; }
.masthead { min-height: 4.5rem; padding-block: .65rem; color: var(--muted); }
.masthead img { width: 13.5rem; height: auto; }
.hero { background: var(--navy); color: white; padding-block: clamp(3rem, 9vw, 7rem); }
.eyebrow { color: var(--teal); font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 .65rem; }
.hero .eyebrow, .hero a { color: #a5eee0; }
h1, h2 { font-family: Georgia, serif; font-weight: 500; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { max-width: 16ch; font-size: clamp(2.65rem, 6vw, 5.35rem); }
h2 { font-size: clamp(2rem, 4vw, 3.15rem); color: var(--navy); }
h3 { line-height: 1.3; margin: 0; color: var(--navy); }
p { margin: .6rem 0; }
.lede { max-width: 52ch; font-size: clamp(1.1rem, 2vw, 1.35rem); color: #e3efef; margin-block: 1.1rem 1.7rem; }
nav { display: flex; flex-wrap: wrap; gap: .6rem; }
nav a { border: 1px solid #6b9297; padding: .45rem .85rem; border-radius: .3rem; }
a { color: var(--teal); font-weight: 650; text-underline-offset: .2em; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.content section { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.timeline { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.timeline li { display: grid; grid-template-columns: minmax(9rem, 1fr) 3fr; gap: .35rem 1.5rem; padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.timeline li:last-child { border: 0; padding-bottom: 0; }
time { color: var(--muted); font-weight: 700; }
.cards, .funding { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.5rem; }
.card, .funding, details { background: var(--paper); border: 1px solid var(--line); border-radius: .5rem; padding: clamp(1rem, 3vw, 2rem); }
.funding { grid-template-columns: 1fr 2fr; }
.amount { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--navy); font-weight: 750; line-height: 1.15; }
details { margin-top: 1rem; background: white; }
summary { cursor: pointer; color: var(--navy); font-weight: 750; }
footer { padding-block: 1.5rem; color: var(--muted); }
@media (max-width: 42rem) {
  .timeline li, .cards, .funding { grid-template-columns: 1fr; }
}

#location-form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.25rem; }
#location-form input, #location-form button { font: inherit; padding: .45rem .7rem; border: 1px solid var(--teal); border-radius: .3rem; }
#location-form input { width: 7rem; }
#location-form button { background: var(--teal); color: white; cursor: pointer; }
.comparisons { padding-block: 2.5rem; }

#process-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: end; margin-top: 1.25rem; }
#process-form label { display: grid; gap: .2rem; }
#process-form select, #process-form button { font: inherit; padding: .45rem .7rem; }
