/* hold that — the same top and bottom bar on every page (lifted from index.html; keep the two in step) */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); }
:root { --green: #3a6a4f; --green-deep: #2d5640; --ink: #222221; --muted: #5f5e5a; --label: #6b6b68; --page: #f4f4f3; --card: #ffffff; --line: #e2e2df; --tint: #e7efe9; --frame: #1a1a19; --gutter: 48px; }
body > header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(244,244,243,.86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.brand { display: flex; align-items: center; gap: .39em; font-weight: 700; font-size: var(--brand, 21px); white-space: nowrap; text-decoration: none; color: inherit; }
.brand .ht { color: var(--green); font-weight: 800; letter-spacing: -.011em; }
.brand .ht i { font-style: normal; display: inline-block; transform: translateY(.1025em); }
.brand .wm { display: inline-block; letter-spacing: -.022em; transform: translateY(.1845em); }
.headleft { --brand: 21px; display: flex; align-items: baseline; gap: 40px; transform: translateY(-2px); }
.menu { display: flex; gap: 26px; font-size: 15px; font-weight: 600; color: var(--muted); transform: translateY(calc(var(--brand) * .1845)); }
.menu a { padding: 10px 0; color: inherit; text-decoration: none; }
.menu a:hover, .menu a.on { color: var(--green); }
.headright { display: flex; align-items: center; gap: 24px; font-size: 15px; transform: translateY(2px); }
.headright .where { color: var(--label); white-space: nowrap; }
.headright .signin { font-weight: 700; white-space: nowrap; padding: 10px 0; color: inherit; text-decoration: none; }
.headright .signin:hover { color: var(--green); }
.pillbtn { display: inline-block; background: var(--ink); color: #fff; font-weight: 700; border-radius: 999px; padding: 10px 18px; white-space: nowrap; text-decoration: none; }
body > footer {
  position: relative; background: #fff; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter); font-size: 14px; color: var(--label);
}
body > footer .links { display: flex; gap: 22px; }
body > footer a { color: inherit; text-decoration: none; }
body > footer a:hover { color: var(--ink); }
.peter-foot { position: absolute; right: 64px; bottom: 100%; width: 110px; overflow: hidden; display: block; }
.peter-foot img { width: 100%; display: block; transition: translate .32s cubic-bezier(.4,1.6,.5,1); }
.peter-foot.duck img { translate: 0 105%; transition: translate .14s ease-in; }
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  body > header { padding: 14px var(--gutter); }
  .headright { gap: 16px; }
  .headright .where { display: none; }
  .headright .pillbtn { padding: 8px 14px; font-size: 14px; }
  .headleft { gap: 18px; --brand: 18px; }
  .menu { gap: 14px; font-size: 14px; }
  .peter-foot { right: 24px; width: 88px; }
}
@media (max-width: 600px) {
  body > header { align-items: flex-start; }
  .headleft { flex-wrap: wrap; row-gap: 0; }
  .menu { width: 100%; }
  .menu a { padding: 6px 0 2px; }
}
@media (max-width: 420px) { .headright .pillbtn { display: none; } }