:root {
  color-scheme: dark;
  --bg: #102a25;
  --ink: #f3eed7;
  --muted: #bbc8bd;
  --line: #456057;
  --amber: #efb768;
  font: 16px/1.6 Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid var(--amber); outline-offset: 5px; }
h1, h2, p { margin: 0; }
h1, h2 { font: 400 1rem/1.12 Georgia, serif; }
.wrap { width: min(62rem, 88%); margin-inline: auto; }

.skip {
  position: absolute;
  top: .75rem;
  left: .75rem;
  padding: .5rem .75rem;
  background: var(--bg);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .85rem;
  border-bottom: 1px solid var(--line);
}
.brand { flex: none; }
.brand img { display: block; max-width: 100%; height: auto; }
header > a:last-child { padding: .55rem 0; text-align: right; }

main { padding-bottom: 3rem; }
.intro { padding-block: clamp(2.25rem, 6vw, 4rem) 1.8rem; }
.eyebrow {
  color: var(--amber);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
h1 { margin: .4rem 0 .7rem; font-size: clamp(3rem, 8vw, 5rem); }
.lede { color: var(--muted); font-size: clamp(1.12rem, 2vw, 1.4rem); }
section { padding-block: 1.4rem; border-top: 1px solid var(--line); }
h2 { margin-bottom: .45rem; font-size: clamp(1.35rem, 3vw, 1.85rem); }
section p { max-width: 69ch; color: var(--muted); }
section a { color: var(--amber); }

@media (max-width: 480px) {
  .brand img { width: 85px; }
  header { font-size: .875rem; }
}