/* ITP Mining typography roles. Values in px; first calibrated range: 1200-1440. */
:root {
  --type-button-font-family: "Roboto", Arial, sans-serif;
  --type-button-font-size: 16px;
  --type-button-line-height: 20px;
  --type-button-font-weight: 400;
  --type-button-letter-spacing: 0.04em;
}

.type-h1,
.type-h2,
.type-h3,
.type-h3-combo,
.type-number-h3,
.type-h4,
.type-main-descriptor,
.type-running-line {
  font-family: "Mulish", Arial, sans-serif;
}

.type-text,
.type-s-link,
.type-descriptor-3,
.type-descriptor-1,
.type-descriptor-2,
.type-button {
  font-family: "Roboto", Arial, sans-serif;
}

.type-descriptor-1 {
  color: var(--color-text-secondary, #bac1d4);
  text-shadow:
    0 2px 12px rgb(15 24 46 / 30%),
    0 7px 28px rgb(15 24 46 / 16%);
}

.type-number-h3 {
  color: #33a9ff;
  background: linear-gradient(
    158deg,
    var(--Decor-liner-1, #33a9ff) 16.57%,
    var(--Decor-liner-2, #01eeff) 51.25%,
    var(--Decor-liner-3, #029eff) 85.74%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ticker .type-running-line {
  color: var(--color-text-secondary-fade, rgb(186 193 212 / 60%));
}

.hero .type-h1 {
  text-shadow:
    0 2px 12px rgb(15 24 46 / 20%),
    0 8px 32px rgb(15 24 46 / 10%);
}

/* All screens below desktop inherit the approved compact type roles. */
@media (width < 1200px) {
  :root {
    --type-button-font-size: 16px;
    --type-button-line-height: 20px;
  }

  .type-h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-h3-combo,
  .info-card .type-h3-combo {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-number-h3,
  .info-card .type-number-h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
  }

  .type-h4,
  .eyebrow.type-h4 {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.01em;
  }

  .type-text,
  .type-s-link,
  .info-card .type-text,
  .info-card .type-s-link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-descriptor-3 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-main-descriptor,
  .about-lead.type-main-descriptor {
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  .type-descriptor-1,
  .hero .type-descriptor-1 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-descriptor-2 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-running-line,
  .ticker .type-running-line {
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-button,
  .topbar .desktop-nav a,
  .topbar .nav-dropdown-toggle,
  .topbar .nav-right > a {
    font-family:var(--type-button-font-family);
    font-size:var(--type-button-font-size);
    line-height:var(--type-button-line-height);
    font-weight:var(--type-button-font-weight);
    font-style:normal;
    letter-spacing:var(--type-button-letter-spacing);
  }
}

/* Shared heading scale below desktop. Smaller ranges inherit it until adapted. */
@media (width < 1200px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding-top: 80px;
    padding-bottom: 50px;
  }

  .hero .container.hero-content {
    padding-top: 0;
  }

  .type-h1,
  .hero .type-h1 {
    max-width: none;
    margin: 0;
    font-size: 48px;
    line-height: 46px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .type-h2,
  h2.type-h2,
  .section-heading h2.type-h2 {
    font-size: 38px;
    line-height: 40px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
  }

  .hero-description {
    max-width: 840px;
    margin-top: 56px;
    margin-left: 128px;
  }

  .hero .hero-description .type-descriptor-1 {
    max-width: none;
    margin: 0;
  }

  .hero-description .hero-actions {
    margin-top: 32px;
  }

  .hero > .ticker {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
  }

  .ticker .type-running-line {
    padding: 16px 0;
    text-transform: uppercase;
  }

  #about .about-lead.type-main-descriptor {
    margin-left: 0;
    font-size: 38px;
    line-height: 40px;
    text-indent: 128px;
  }

  #about .about-grid {
    margin-left: 128px;
  }
}

@media (width < 960px) {
  :root {
    --title-content-gap: 48px;
    --descriptor-indent: 64px;
    --descriptor-min: 0px;
  }

  .type-h1,
  .hero .type-h1 {
    font-size: 42px;
    line-height: 42px;
  }

  .type-h2,
  h2.type-h2,
  .section-heading h2.type-h2 {
    font-size: 38px;
    line-height: 42px;
  }

  .section-heading > p {
    width: calc(100% - 64px);
    max-width: none;
    margin-right: 0;
    margin-left: 64px;
  }

  .section-heading-centered > p {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  #about .about-lead.type-main-descriptor {
    font-size: 38px;
    line-height: 42px;
    text-indent: 64px;
  }

  .hero-description {
    max-width: calc(100% - 64px);
    margin-top: 48px;
    margin-left: 64px;
  }

  #about .about-lead {
    margin: 0 0 48px;
  }

  #about .about-grid {
    margin-left: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #about .info-card {
    padding: 24px;
  }

  .hero .hero-description .type-descriptor-1 {
    font-size: 24px;
    line-height: 32px;
  }

  .hero-description .hero-actions {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
  }

  .hero-description .hero-actions .galaxy-button {
    width: max-content;
    flex: 0 0 auto;
  }

  .hero-description .hero-actions.is-wrapped .galaxy-button {
    width: 100%;
    flex: 1 1 100%;
  }
}

@media (width < 640px) {
  .type-h1,
  .hero .type-h1,
  .page-intro h1,
  .detail-hero h1 {
    font-size: 40px;
    line-height: 40px;
  }

  .type-main-descriptor,
  #about .about-lead.type-main-descriptor {
    font-size: 32px;
    line-height: 32px;
  }

  .type-h2,
  h2.type-h2,
  .section-heading h2.type-h2 {
    font-size: 32px;
    line-height: 32px;
  }

  .type-h3,
  .type-h3-combo,
  .info-card .type-h3-combo,
  .type-number-h3,
  .info-card .type-number-h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .section-heading > p,
  .section-heading-centered > p {
    width: 100%;
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  .hero-description {
    max-width: 100%;
    margin-left: 0;
  }

  #about .about-lead,
  #about .about-lead.type-main-descriptor {
    margin-left: 0;
    text-indent: 0;
  }

  #about .about-grid {
    margin-left: 0;
    grid-template-columns: 1fr;
  }
}

@media (min-width: 1200px) and (max-width: 1440px) {
  :root {
    --type-button-font-size: 16px;
    --type-button-line-height: 20px;
  }
  .type-descriptor-3 {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }
  .container,
  .hero .container.hero-content {
    width: calc(100% - 128px);
    max-width: none;
  }

  .type-h1,
  .hero .type-h1 {
    font-size: 52px;
    line-height: 52px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  .type-h2 {
    font-size: 48px;
    line-height: 52px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
  }

  .type-h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-h3-combo,
  .info-card .type-h3-combo {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-number-h3,
  .info-card .type-number-h3 {
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
  }

  .type-h4,
  .eyebrow.type-h4 {
    font-size: 18px;
    line-height: 22px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.01em;
  }

  .type-text,
  .type-s-link,
  .info-card .type-text,
  .info-card .type-s-link {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-main-descriptor,
  .about-lead.type-main-descriptor {
    font-size: 42px;
    line-height: 48px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  .type-descriptor-1,
  .hero .type-descriptor-1 {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-descriptor-2 {
    font-size: 22px;
    line-height: 32px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-running-line,
  .ticker .type-running-line {
    font-size: 16px;
    line-height: 16px;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-button,
  .topbar .desktop-nav a,
  .topbar .nav-dropdown-toggle,
  .topbar .nav-right > a {
    font-family: var(--type-button-font-family);
    font-size: var(--type-button-font-size);
    line-height: var(--type-button-line-height);
    font-weight: var(--type-button-font-weight);
    font-style: normal;
    letter-spacing: var(--type-button-letter-spacing);
  }

  .hero {
    display: block;
    min-height: 100vh;
    padding-top: 160px;
    padding-bottom: 62px;
  }

  .hero .container.hero-content {
    padding-top: 0;
  }

  .hero .type-h1 {
    max-width: none;
    margin: 0;
    text-wrap: balance;
  }

  .hero-description {
    max-width: 840px;
    margin-top: 56px;
    margin-left: 228px;
  }

  .hero .hero-description .type-descriptor-1 {
    max-width: none;
    margin: 0;
  }

  .hero-description .hero-actions {
    margin-top: 32px;
  }

  .hero > .ticker {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .ticker .type-running-line {
    padding: 16px 0;
    text-transform: uppercase;
  }

  #about .eyebrow {
    text-transform: uppercase;
    margin-bottom: 32px;
  }
}

/* Above 1440 the approved 1440 layout scales proportionally. */
@media (width > 1440px) {
  :root {
    --type-button-font-size: 1.111111vw;
    --type-button-line-height: 1.388889vw;
  }
  .type-descriptor-3 {
    font-size: .833333vw;
    line-height: 1.111111vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }
  .container,
  .hero .container.hero-content {
    width: calc(100% - 8.888889vw);
    max-width: none;
  }

  .type-h1,
  .hero .type-h1 {
    max-width: none;
    margin: 0;
    font-size: 3.611111vw;
    line-height: 3.611111vw;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .type-h2 {
    font-size: 3.333333vw;
    line-height: 3.611111vw;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.01em;
  }

  .type-h3 {
    font-size: 1.666667vw;
    line-height: 2.083333vw;
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-h3-combo,
  .info-card .type-h3-combo {
    font-size: 1.666667vw;
    line-height: 2.083333vw;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.04em;
  }

  .type-number-h3,
  .info-card .type-number-h3 {
    font-size: 1.666667vw;
    line-height: 2.083333vw;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.04em;
  }

  .type-main-descriptor,
  .about-lead.type-main-descriptor {
    font-size: 2.916667vw;
    line-height: 3.333333vw;
    font-weight: 300;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  .type-h4,
  .eyebrow.type-h4 {
    font-size: 1.25vw;
    line-height: 1.527778vw;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
  }

  .type-text,
  .type-s-link,
  .info-card .type-text,
  .info-card .type-s-link {
    font-size: 1.111111vw;
    line-height: 1.666667vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-descriptor-1,
  .hero .type-descriptor-1 {
    max-width: none;
    margin: 0;
    font-size: 1.666667vw;
    line-height: 2.361111vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-descriptor-2 {
    font-size: 1.527778vw;
    line-height: 2.222222vw;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
  }

  .type-running-line,
  .ticker .type-running-line {
    font-size: 1.111111vw;
    line-height: 1.111111vw;
    font-weight: 400;
    letter-spacing: 0;
  }

  .type-button,
  .topbar .desktop-nav a,
  .topbar .nav-dropdown-toggle,
  .topbar .nav-right > a {
    font-family: var(--type-button-font-family);
    font-size: var(--type-button-font-size);
    line-height: var(--type-button-line-height);
    font-weight: var(--type-button-font-weight);
    letter-spacing: var(--type-button-letter-spacing);
  }

  .hero {
    display: block;
    min-height: 100vh;
    padding-top: 12.5vw;
    padding-bottom: 4.305556vw;
  }

  .hero .container.hero-content {
    padding-top: 0;
  }

  .hero-description {
    max-width: 58.333333vw;
    margin-top: 3.888889vw;
    margin-left: 15.833333vw;
  }

  .hero-description .hero-actions {
    margin-top: 2.222222vw;
  }

  .hero > .ticker {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .ticker .type-running-line {
    padding: 1.111111vw 0;
    text-transform: uppercase;
  }
}

html:lang(ka) { --type-button-font-family: "Noto Sans Georgian", "Sylfaen", sans-serif; }
html:lang(ka) body, html:lang(ka) .type-text, html:lang(ka) .type-descriptor-2,
html:lang(ka) h1, html:lang(ka) h2, html:lang(ka) h3, html:lang(ka) h4 {
  font-family: "Noto Sans Georgian", "Sylfaen", "Arial", sans-serif;
}