:root {
  --page-gutter: 16px;
  --header-pad: 13px;

  --header-title-size: 19px;
  --nav-gap: 15px;
  --nav-font: 12px;
  --hero-top: 22px;
  --hero-bottom: 22px;
  --hero-title-size: clamp(29px, 8.6vw, 52px);
  --hero-description-font: 13px;
  --section-pad: 26px;
  --section-title-size: clamp(25px, 6.5vw, 35px);
  --posts-columns: minmax(0, 1fr);
  --content-gap: 26px;
  --post-padding: 15px 6px 15px;
  --post-title-size: clamp(20px, 5.2vw, 26px);
  --projects-columns: minmax(0, 1fr);
  --project-card-height: 124px;
  --project-top-space: 16px;
  --footer-symbol-width: clamp(92px, 27vw, 207px);
  --footer-feature-gap: clamp(14px, 4vw, 27px);
  --footer-feature-padding: 32px;
  --footer-title-size: clamp(17px, 3.8vw, 26px);
  --footer-description-size: clamp(11px, 2vw, 13px);
  --footer-meta-size: 9px;
  --footer-details-gap: clamp(9px, 1.8vw, 12px);
  --contact-title-size: clamp(27px, 7vw, 38px);
}

.site-header > kmna-row {
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
}

.site-title .kmna-button-text {
  gap: 6px;
}

.navigation {
  margin-left: auto;
  gap: 12px;
}

.navigation kmna-button:nth-child(3),
.header-index,
.section-aside,
.hero-edition,
.hero-secondary,
.desktop-break {
  display: none;
}

.hero-topline {
  font-size: 9px;
}

.hero-main {
  display: block;
  margin-top: 12px;
}

.hero h1 {
  letter-spacing: -.078em;
}

.hero-description {
  margin-top: 9px;
  line-height: 1.55;
}

.section-heading {
  margin-bottom: 12px;
}

.section-heading > kmna-row {
  gap: 9px;
}

.section-number {
  font-size: 10px;
  margin-top: 5px;
}

.post-toolbar {
  gap: 9px;
  margin-bottom: 12px;
}

kmna-input.post-search {
  min-height: 42px;
  font-size: 13px;
}

.post-header {
  margin-bottom: 8px;
}

.post-kicker,
.post-date {
  font-size: 10px;
}

.post-title {
  margin-bottom: 7px;
  line-height: 1.3;
}

.post-excerpt {
  display: none;
}

.post-footer {
  margin-top: 9px;
}

.post-tags {
  font-size: 9px;
}

.post-arrow {
  font-size: 20px;
}

.sidebar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sidebar .sidebar-card:first-child {
  grid-column: 1 / -1;
}

kmna-rectangle.sidebar-card {
  padding: 16px !important;
}

kmna-rectangle.category-card,
kmna-rectangle.working-card {
  min-width: 0;
  padding: 15px !important;
}

.sidebar-title {
  margin-bottom: 9px;
}

.profile-heading {
  margin-bottom: 6px;
  font-size: 21px;
}

.profile-copy {
  font-size: 12px;
  line-height: 1.55;
}

.profile-rule {
  margin: 12px 0;
}

.profile-row {
  margin-top: 8px;
  font-size: 11px;
}

.category-item {
  padding: 9px 0;
  font-size: 12px;
}

.category-count {
  font-size: 10px;
}

.working-title {
  font-size: 10px;
}

.working-name {
  padding-top: 20px;
  font-size: 17px;
}

.working-foot {
  margin-top: 18px;
  padding-top: 12px;
  font-size: 9px;
}

.projects-grid {
  max-height: calc(var(--project-card-height) * 3 + 32px);
}

kmna-rectangle.project-card {
  padding: 17px !important;
}

.project-name {
  font-size: 22px;
}

.contact-strip {
  padding-block: 28px;
}

.contact-strip > kmna-row {
  align-items: stretch;
}

.contact-placeholder {
  width: 100%;
  text-align: center;
}

.contact-placeholder > a {
  width: 100%;
}

.site-footer .footer-bottom {
  align-items: flex-start;
}

@media (max-width: 359px) {
  .site-title-wordmark {
    font-size: 16px;
  }

  .navigation kmna-button > a {
    font-size: 11px;
  }

  .navigation {
    gap: 9px;
  }

}

@media (min-width: 768px) {
  .projects-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: calc(var(--project-card-height) * 2 + 16px);
  }
}

@media (max-width: 480px) {
  :root {
    --post-title-size: 18px;
    --section-title-size: 24px;
    --hero-title-size: 30px;
    --contact-title-size: 26px;
  }

  .project-name {
    font-size: 18px;
  }

  .project-index,
  .project-type {
    font-size: 10px;
  }

  .post-kicker,
  .post-date,
  .post-tags {
    font-size: 9px;
  }

  .hero-description {
    font-size: 12px;
  }

  .contact-copy {
    font-size: 12px;
  }
}

.site-title-tag {
  display: none;
}

@media (max-width: 480px) {
  .footer-details-meta {
    display: none;
  }

  .site-footer .footer-bottom {
    flex-wrap: wrap;
    gap: 7px;
    padding-block: 17px 21px;
  }

  .footer-text {
    font-size: 9px;
  }
}