/* Shared by every page. The font is served locally, including Cyrillic glyphs. */
@font-face {
  font-family: "Meridian Inter";
  src: url("fonts/InterVariable-4.1.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-sans: "Meridian Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --title-size: clamp(3rem, 6.3vw, 6.2rem);
  --title-weight: 420;
  --title-leading: .9;
  --title-tracking: -.058em;
  --lead-size: clamp(1rem, 1.5vw, 1.22rem);
  --lead-leading: 1.45;
  --form-title-size: clamp(1.8rem, 3vw, 2.8rem);
  --form-title-weight: 450;
  --form-title-leading: 1.1;
  --form-title-tracking: -.04em;
  --form-control-height: 46px;
  --form-control-size: .88rem;
  --form-control-padding: 10px 14px;
  --form-control-leading: 1.5;
  --form-control-radius: 2px;
  --form-control-border: #3b3b39;
  --form-label-size: .79rem;
  --form-label-gap: 9px;
  --form-field-gap: 22px;
  --form-button-height: 38px;
  --form-button-size: .66rem;
  --form-button-padding: 10px 14px;
  --form-button-tracking: .07em;
  --form-button-leading: 1.35;
  font-family: var(--font-sans);
  font-optical-sizing: auto;
}

@media (max-width: 760px) {
  :root {
    --form-control-size: 1rem;
    --form-button-height: 44px;
  }
}

body { font-family: var(--font-sans); }
button, input, select, textarea { font-family: inherit; }
h1 {
  font-size: var(--title-size);
  font-weight: var(--title-weight);
  line-height: var(--title-leading);
  letter-spacing: var(--title-tracking);
  overflow-wrap: anywhere;
}
.intro-copy, .model-hero > span, .passport-hero > span,
.directory-hero > p:last-child, .profile-hero > p:last-child,
.feature-hero-copy > p, .event-hero .event-summary, .story-summary {
  font-size: var(--lead-size);
  line-height: var(--lead-leading);
}

.identity, .brand, .feature-brand, .entity-identity, .event-identity, .story-identity {
  font-size: .95rem;
  font-weight: 400;
  letter-spacing: .22em;
}

@media (max-width: 620px) {
  .identity, .brand, .feature-brand, .entity-identity, .event-identity, .story-identity {
    font-size: .78rem;
    letter-spacing: .16em;
  }
  .reader-nav-link[href="#plans"] { display: none; }
}

@media (max-width: 420px) {
  /* Keep the brand's accessible name while making room for navigation. */
  .identity span, .brand span, .feature-brand span, .entity-identity span,
  .event-identity span, .story-identity span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
