.application-page {
  --application-ink: #20312c;
  color: var(--application-ink);
}

.application-page > header,
.application-page header .nav-links {
  background: var(--card-fill);
  color: var(--application-ink);
}

.application-page > header { border-color: #20312c26; }
.application-page .header-brand,
.application-page header .language,
.application-page header .menu-toggle,
.application-page header .nav-links .btn {
  color: var(--application-ink);
  border-color: #20312c66;
}
.application-page .brand-divider { background: #20312c66; }
.application-page header .nav-links a:hover,
.application-page header .language:hover { color: var(--application-ink); text-decoration: underline; }
.application-page header .nav-links .btn:hover { background: #ffffff54; }
.application-page header :focus-visible { outline-color: var(--application-ink); }

.application-preview { background: color-mix(in srgb, var(--card-fill) 23%, #f7f8f5); }
.application-preview-inner { padding-top: clamp(36px, 6vw, 84px); padding-bottom: clamp(60px, 9vw, 128px); }
.application-back { display: inline-block; font-size: 14px; text-decoration: underline; text-underline-offset: 5px; }
.application-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: end;
  margin-top: clamp(38px, 6vw, 76px);
}
.application-preview .eyebrow { margin: 0 0 22px; }
.application-preview .eyebrow::before { background: #277544; }
.application-preview h1 {
  margin: 0 0 24px;
  font: 500 clamp(36px, 5.15vw, 74px)/1.02 'IBM Plex Sans', Arial, sans-serif;
  letter-spacing: -.052em;
  overflow-wrap: break-word;
  hyphens: auto;
}
.application-preview h1 em { color: #245c40; font-family: Georgia, serif; font-weight: 400; }
.application-status {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  background: var(--card-fill);
  font: 600 12px/1.4 'IBM Plex Sans', Arial, sans-serif;
  letter-spacing: .04em;
}
.application-intro {
  max-width: 62ch;
  margin: 14px 0 0;
  font: 400 clamp(17px, 1.55vw, 21px)/1.55 'IBM Plex Sans', Arial, sans-serif;
}
.application-project {
  padding: clamp(24px, 4vw, 48px);
  background: #fff;
  border: 1px solid #20312c24;
  border-top: 4px solid var(--card-fill);
}
.application-project h2 {
  margin: 0 0 16px;
  font: 500 clamp(26px, 3vw, 39px)/1.08 'IBM Plex Sans', Arial, sans-serif;
  letter-spacing: -.035em;
}
.application-project p { margin: 0 0 24px; color: #526259; }
.application-project .btn { background: var(--application-ink); color: #fff; }
.application-project .btn:hover { background: #315446; }
.application-email { display: table; margin-top: 14px; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 800px) {
  .application-preview-grid { grid-template-columns: 1fr; }
}