:root {
  --site-home-max-width: 1440px;
  --site-article-max-width: 1440px;
  --site-mobile-gutter: 1rem;
  --site-desktop-gutter: 3rem;
  --article-reading-max: 780px;
}

html,
body {
  overflow-x: hidden;
}

.site-shell {
  max-width: var(--site-home-max-width);
  margin: 0 auto;
  padding-left: var(--site-mobile-gutter);
  padding-right: var(--site-mobile-gutter);
}

.site-main {
  margin: 0 auto;
  padding-left: var(--site-mobile-gutter);
  padding-right: var(--site-mobile-gutter);
}

.site-main--home {
  max-width: var(--site-home-max-width);
}

.site-main--article {
  max-width: var(--site-article-max-width);
}

.site-main section {
  margin-bottom: 3rem;
}

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
}

.site-header__inner {
  max-width: var(--site-home-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem var(--site-mobile-gutter);
}

.site-header__brand img {
  height: 2.75rem;
  width: auto;
}

.site-nav {
  display: none;
  align-items: center;
  gap: 2rem;
}

.site-nav__link {
  font-family: "skns", cursive;
  font-size: 1.75rem;
  color: #57534e;
  text-decoration: none;
  transition: color 180ms ease;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: #970013;
}

.site-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid rgba(143, 112, 109, 0.35);
  background: transparent;
  color: #1c1b1b;
}

.site-menu {
  display: none;
  border-top: 1px solid rgba(143, 112, 109, 0.24);
  max-width: var(--site-home-max-width);
  margin: 0 auto;
  padding: 0.75rem var(--site-mobile-gutter) 1rem;
}

.site-menu.is-open {
  display: block;
}

.site-menu__link {
  display: block;
  padding: 0.55rem 0;
  font-family: "skns", cursive;
  font-size: 1.3rem;
  color: #57534e;
  text-decoration: none;
}

.site-menu__link[aria-current="page"] {
  color: #970013;
}

.site-page-title {
  margin-top: 0.5rem;
}

.page-article .site-header__inner,
.page-article .site-menu,
.page-article .site-footer .site-shell {
  max-width: var(--site-article-max-width);
}

/* Keep article pages on shared outer shell, but constrain reading measure inside. */
.page-article .site-main--article > .grid {
  align-items: start;
}

.page-article .site-main--article > .grid > article {
  max-width: var(--article-reading-max);
}

.page-article article .font-body.text-lg {
  font-size: 1.125rem;
  line-height: 1.85;
}

.page-article article ul {
  font-size: 1.06rem;
  line-height: 1.75;
}

.page-article article h2 {
  line-height: 1.12;
}

@media (min-width: 1024px) {
  .page-article .site-main--article > .grid {
    grid-template-columns: minmax(0, var(--article-reading-max)) minmax(280px, 320px);
    justify-content: space-between;
    column-gap: 4rem;
  }
}

@media (max-width: 767px) {
  h1 {
    font-size: 2rem !important;
    line-height: 1.06 !important;
  }

  p {
    font-size: 1rem !important;
  }

  main {
    padding-top: 6rem !important;
    padding-bottom: 3rem !important;
  }

  section {
    margin-bottom: 2rem !important;
  }

  .grid {
    gap: 1.25rem !important;
  }
}

@media (min-width: 768px) {
  .site-shell,
  .site-main {
    padding-left: var(--site-desktop-gutter);
    padding-right: var(--site-desktop-gutter);
  }

  .site-header__inner {
    padding-left: var(--site-desktop-gutter);
    padding-right: var(--site-desktop-gutter);
  }

  .site-nav {
    display: flex;
  }

  .site-menu-toggle,
  .site-menu {
    display: none !important;
  }
}