/* One masthead for the main-page and merch drafts. */
.site-header {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  max-width: none;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 12px calc(max(0px, (100vw - 1440px) / 2) + clamp(20px, 4vw, 64px));
  border-bottom: 1px solid #d8d1c3;
  background: #f5f1e8;
  color: #17312b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.45;
}
.site-header .brand {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: 100%;
  max-width: 540px;
  min-width: 0;
  height: 230px;
  transform: none;
}
.site-header .brand img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  gap: 10px;
  margin: 24px 0 0;
  max-width: 100%;
}
.site-header nav .pill,
.site-header nav .my-rides-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  border: 1px solid #1f4335;
  border-radius: 999px;
  padding: 10px 16px;
  background: #1f4335;
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.45;
  white-space: nowrap;
  text-decoration: none;
}
.site-header nav .merch-nav-link { padding-inline: 24px; }
.site-header nav .pill:hover,
.site-header nav .my-rides-button:hover {
  background: #17312b;
  border-color: #17312b;
  transform: none;
}
.site-header nav :focus-visible { outline: 3px solid #d1833b; outline-offset: 3px; }
.site-header .back-link {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  min-height: 39.4px;
  margin-top: 24px;
  font-size: 13px;
  gap: 8px;
  color: #1f4335;
}
.site-header .back-link:hover { color: #17312b; }
.site-header .back-link:focus-visible { outline: 3px solid #d1833b; outline-offset: 3px; border-radius: 4px; }
.site-header .back-to-rides-arrow { display: block; flex: none; width: 24px; height: 24px; }
/* The SVG viewBox removes only the PNG's transparent margins. Match the 39.4px buttons. */
.site-header .back-to-rides-bike { display: block; flex: none; width: auto; height: 39.4px; aspect-ratio: 2042 / 1472; }
@media (max-width: 760px) {
  .site-header { grid-template-columns: minmax(0, 1fr); padding: 16px 20px 8px; }
  .site-header .brand { grid-column: 1; grid-row: 2; width: min(400px, 100%); height: 180px; }
  .site-header nav { grid-column: 1; grid-row: 1; margin: 0; }
  .site-header .back-link { grid-column: 1; grid-row: 1; margin-top: 0; }
}