.shell {
  width: min(var(--shell), calc(100% - 88px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 12px;
  z-index: 80;
  width: min(1350px, calc(100% - 48px));
  margin: 12px auto -100px;
  color: #203a29;
  background: rgba(234, 220, 167, .96);
  border: 1px solid rgba(31, 55, 36, .28);
  border-radius: 4px;
  box-shadow: 0 7px 23px rgba(17, 31, 20, .14);
  backdrop-filter: blur(12px);
}

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
  min-height: 79px;
  padding-inline: 25px;
}

.site-nav,
.nav-right,
.hero-links,
.filters {
  display: flex;
  align-items: center;
}

.site-nav { gap: 29px; }
.nav-right { gap: 12px; }
.hero-links { flex-wrap: wrap; gap: 25px; margin-top: 32px; }
.filters { flex-wrap: wrap; gap: 20px; }

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 37px;
  border-top: 1px solid var(--color-border);
  font-size: .74rem;
  line-height: 1.5;
}

.footer .small { max-width: 590px; color: var(--color-muted); }

@media (max-width: 1040px) {
  .shell { width: min(var(--shell), calc(100% - 48px)); }
  .site-nav { gap: 18px; }
}

@media (max-width: 720px) {
  :root { --header-offset: 92px; }
  .shell { width: calc(100% - 36px); }
  .site-header { top: 8px; width: calc(100% - 20px); margin: 8px auto -85px; }
  .site-header .shell { min-height: 67px; padding-inline: 12px; }
  .site-nav {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 14px 20px 22px;
    background: var(--color-paper);
    border: 1px solid var(--color-border);
    box-shadow: 0 14px 24px rgba(20, 36, 21, .17);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 15px 4px; border-bottom: 1px solid var(--color-border); }
  .footer { align-items: flex-start; flex-direction: column; padding-bottom: 94px; }
}