/* Shared type contract used across moritzblattner.ch and its companion sites. */
:root {
  --type-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
  --sans: var(--type-family);
  --mono: var(--type-family);

  --type-display: clamp(2.625rem, 5.6vw, 4rem);
  --type-page-title: clamp(2.25rem, 4.6vw, 3.25rem);
  --type-section: clamp(1.75rem, 3.2vw, 2.5rem);
  --type-subheading: 1.25rem;
  --type-lead: clamp(1.0625rem, 1.6vw, 1.25rem);
  --type-body: 1rem;
  --type-support: .875rem;
  --type-label: .75rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --tracking-heading: -.02em;
  --tracking-label: .06em;
}

body,
button,
input,
textarea,
select {
  font-family: var(--type-family);
}

body {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  line-height: 1.6;
}

.brand,
.name,
.about em,
.eyebrow,
.role,
.qualify,
.profile-pill figcaption,
.status,
.footer,
.brand-desc {
  font-family: var(--type-family);
}

.brand {
  font-size: 1.375rem;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-heading);
}

.brand-desc,
.eyebrow,
.role,
.profile-pill figcaption {
  font-size: var(--type-label);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.nav-links > a:not(.btn) {
  font-size: var(--type-body);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.name {
  max-width: none;
  font-size: var(--type-display);
  font-weight: var(--weight-medium);
  line-height: 1.04;
  letter-spacing: var(--tracking-heading);
  white-space: nowrap;
}

.about {
  font-size: var(--type-body);
  line-height: 1.65;
}

.about em {
  font-style: normal;
  font-weight: var(--weight-medium);
}

.btn,
.nav-links .btn {
  font-size: var(--type-body);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}

.qualify,
.footer {
  font-size: var(--type-support);
  line-height: 1.55;
  letter-spacing: 0;
}

.status {
  font-size: var(--type-label);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
}

.status b {
  font-weight: var(--weight-medium);
}

@media (max-width: 980px) {
  .nav-links > a:not(.btn) {
    font-size: var(--type-body);
  }
}