@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  --editorial-ink: #171614;
  --editorial-coral: #c8483d;
  --editorial-rule: rgba(23, 22, 20, .18);
}

body {
  background: #fff;
  color: var(--editorial-ink);
  font-family: 'Jost', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
}

nav {
  height: 100px;
  padding: 0 50px;
  background: #fff;
  border-bottom: 1px solid var(--editorial-rule);
}

.nav-logo {
  position: absolute;
  left: 50%;
  align-items: center;
  transform: translateX(-50%);
}

.nav-logo-name {
  color: var(--editorial-ink);
  font-family: 'Jost', Arial, sans-serif;
  font-size: 29px;
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: lowercase;
}

.nav-logo-subtitle { display: none; }
.nav-links { gap: 36px; }
.nav-links a {
  color: var(--editorial-ink);
  font-family: 'Jost', Arial, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .1em;
}
.nav-links--left { margin-right: auto; }
.nav-right { margin-left: auto; gap: 24px; }
.nav-right > .nav-mail-btn { display: none; }
.nav-hamburger span { background: var(--editorial-ink); }
.mobile-menu { top: 100px; }

.nav-links a:focus-visible,
.nav-hamburger:focus-visible,
.nav-logo:focus-visible,
.mobile-menu a:focus-visible {
  outline: 2px solid var(--editorial-coral);
  outline-offset: 5px;
}

.page { max-width: 920px; }
.nav-project.nav-project-top {
  padding-top: 140px;
  padding-bottom: 22px;
  border-bottom-color: var(--editorial-rule);
}
.nav-project { border-color: var(--editorial-rule); }
.nav-project a,
.case-tag,
.meta-label {
  color: var(--editorial-coral);
  font-family: 'Jost', Arial, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-underline-offset: 3px;
}
.nav-project a:hover { color: #d84b3c; }

.case-hero { border-bottom-color: var(--editorial-rule); }
.case-title,
.case-section-title {
  color: var(--editorial-ink);
  font-family: 'Jost', Arial, sans-serif;
  letter-spacing: -.04em;
}
.case-title {
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 400;
  line-height: 1.12;
}
.case-subtitle {
  color: #55514d;
  font-family: 'Jost', Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
}
.case-meta { gap: 28px 40px; }
.meta-value,
.case-text,
.action-step-body,
.impact-notes-text {
  color: #55514d;
  font-family: 'Jost', Arial, sans-serif;
  font-weight: 400;
}
.case-text,
.action-step-body,
.impact-notes-text { font-size: 14px; line-height: 1.7; }
.case-section-title {
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 500;
  line-height: 1.15;
}
.section-rule,
.impact-grid,
.impact-item { border-color: var(--editorial-rule); }
.action-step-num {
  color: var(--editorial-coral);
  border-color: var(--editorial-coral);
  font-family: 'Jost', Arial, sans-serif;
  font-size: 12px;
}
.action-step-lead,
.impact-num { font-family: 'Jost', Arial, sans-serif; font-weight: 500; }
.impact-label { font-family: 'Jost', Arial, sans-serif; font-weight: 500; }

@media (max-width: 1360px) and (min-width: 821px) {
  nav { height: 76px; padding: 0 28px; }
  .nav-logo-name { font-size: 22px; letter-spacing: .055em; }
  .nav-links { gap: 22px; }
  .mobile-menu { top: 76px; }
  .nav-project.nav-project-top { padding-top: 112px; }
}

@media (max-width: 820px) {
  nav { height: 64px; padding: 0 20px; }
  .nav-links { display: none; }
  .nav-right > .nav-mail-btn { display: none; }
  .nav-hamburger { display: flex; }
  .nav-logo-name { font-size: 18px; letter-spacing: .035em; }
  .mobile-menu { top: 64px; }
  .nav-project.nav-project-top { padding-top: 92px; }
}

@media (max-width: 700px) {
  .page { padding: 0 20px; }
  .case-title { font-size: 28px; }
  .case-section-title { font-size: 23px; }
  .case-subtitle { font-size: 14px; }
}