@font-face {
  font-family: "Suisse Intl";
  src:
    url("../fonts/SuisseIntl-Regular.woff2") format("woff2"),
    url("../fonts/SuisseIntl-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Suisse Intl";
  src:
    url("../fonts/SuisseIntl-RegularItalic.woff2") format("woff2"),
    url("../fonts/SuisseIntl-RegularItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Suisse Intl";
  src:
    url("../fonts/SuisseIntl-SemiBold.woff2") format("woff2"),
    url("../fonts/SuisseIntl-SemiBold.otf") format("opentype");
  font-style: normal;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Suisse Intl";
  src:
    url("../fonts/SuisseIntl-SemiBoldItalic.woff2") format("woff2"),
    url("../fonts/SuisseIntl-SemiBoldItalic.otf") format("opentype");
  font-style: italic;
  font-weight: 600;
  font-display: block;
}

@font-face {
  font-family: "Suisse Intl";
  src:
    url("../fonts/SuisseIntl-Light.woff2") format("woff2"),
    url("../fonts/SuisseIntl-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: block;
}

:root {
  --blue: #0000ff;
  --black: #000000;
  --white: #ffffff;
  --rule: #000000;
  --pale-rule: #e2e2e2;
  --no: #ff2e00;
  --page-gutter: 40px;
  --gap: 20px;
  --content-max: 1520px;
  --content-width: min(calc(100vw - (var(--page-gutter) * 2)), var(--content-max));
  --column-width: calc((var(--content-width) - (var(--gap) * 3)) / 4);
  --half-width: calc((var(--content-width) - var(--gap)) / 2);
  --twelve-column-width: calc((var(--content-width) - (var(--gap) * 11)) / 12);
  --two-track-width: calc((var(--twelve-column-width) * 2) + var(--gap));
}

* {
  box-sizing: border-box;
}

html {
  background: var(--white);
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--black);
  font-family: "Suisse Intl", Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 19px;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
dl,
dd {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  width: var(--content-width);
  margin-inline: auto;
}

.site-header {
  height: 142px;
  background: var(--blue);
  color: var(--white);
}

.site-header .page-grid {
  height: 100%;
  align-items: start;
  padding-top: 40px;
}

.header-logo {
  width: 140px;
  height: 62px;
  color: var(--white);
}

.logo-img {
  width: 100%;
  height: auto;
}

.header-title,
.header-version {
  align-self: start;
  padding-top: 21px;
  font-weight: 600;
}

.header-title {
  grid-column: 2;
}

.header-version {
  grid-column: 4;
  text-align: right;
}

.section {
  position: relative;
  margin-top: 199px;
}

.section::before {
  display: block;
  width: var(--content-width);
  margin-inline: auto;
  border-top: 1px solid var(--rule);
  content: "";
}

.section:first-of-type {
  margin-top: 100px;
}

.section-typography {
  margin-top: 229px;
}

.section-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  width: var(--content-width);
  margin-inline: auto;
  padding-top: 20px;
}

.section-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.section-copy {
  grid-column: 2;
}

.section-copy.secondary {
  grid-column: 3;
}

.section-copy p + p {
  margin-top: 19px;
}

.section-action {
  grid-column: 4;
}

.download-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding-inline: 10px;
  border: 1px solid var(--blue);
  border-radius: 3px;
  color: var(--blue);
  font-weight: 600;
  line-height: 19px;
  text-align: center;
}

.download-button:hover {
  background: var(--blue);
  color: var(--white);
}

.two-col,
.three-col,
.four-col,
.six-col {
  display: grid;
  gap: var(--gap);
  width: var(--content-width);
  margin-inline: auto;
}

.two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four-col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.six-col {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.logo-examples {
  margin-top: 51px;
}

.logo-tile {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
}

.logo-tile.white {
  border: 1px solid var(--pale-rule);
  color: var(--blue);
}

.logo-tile.blue {
  background: var(--blue);
  color: var(--white);
}

.logo-tile .logo-img {
  width: 56%;
}

.note-row {
  width: var(--content-width);
  margin-top: 56px;
  margin-inline: auto;
}

.note-row .section-copy {
  width: var(--column-width);
  margin-left: calc(var(--column-width) + var(--gap));
}

.clearspace {
  width: var(--content-width);
  margin: 56px auto 0;
  border: 1px solid var(--pale-rule);
}

.clearspace img {
  width: 100%;
}

.avatar-grid {
  margin-top: 51px;
}

.avatar-card {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--pale-rule);
  overflow: hidden;
}

.avatar-card .avatar-img {
  width: 50%;
  height: auto;
  color: var(--blue);
}

.avatar-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.misuse-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  align-items: start;
  margin-top: 84px;
}

.misuse-card {
  min-width: 0;
  margin: 0;
}

.misuse-art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--pale-rule);
  overflow: hidden;
  background: var(--white);
}

.misuse-art::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.8px),
    var(--no) 50%,
    transparent calc(50% + 0.8px)
  );
  content: "";
}

.misuse-art .logo-img {
  position: relative;
  grid-area: 1 / 1;
  z-index: 1;
  width: 65%;
  height: auto;
}

.misuse-card figcaption {
  padding-top: 20px;
  font-size: 14px;
  line-height: 19px;
}

.misuse-stretch .logo-img {
  transform: scaleY(0.65);
}

.misuse-outline .logo-img {
  filter:
    drop-shadow(1px 0 0 var(--black))
    drop-shadow(-1px 0 0 var(--black))
    drop-shadow(0 1px 0 var(--black))
    drop-shadow(0 -1px 0 var(--black));
}

.misuse-effect .logo-img {
  filter: drop-shadow(-5px 8px 6px rgba(0, 0, 0, 0.38));
}

.misuse-texture .logo-img {
  opacity: 1;
  filter: contrast(1.3) saturate(0.85);
}

.misuse-texture::before {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, rgba(0, 0, 255, 0.25) 0 4px, transparent 4px 8px);
  content: "";
  mix-blend-mode: screen;
  pointer-events: none;
}

.misuse-rotate .logo-img {
  width: 70%;
  transform: rotate(-8deg);
}

.color-grid {
  margin-top: 68px;
}

.color-card {
  display: flex;
  align-items: flex-end;
  min-width: 0;
  aspect-ratio: 16 / 9;
  padding: 30px;
}

.color-card.blue {
  background: var(--blue);
  color: var(--white);
}

.color-card.white {
  border: 1px solid var(--pale-rule);
  background: var(--white);
  color: var(--black);
}

.color-card.black {
  background: var(--black);
  color: var(--white);
}

.color-spec {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 0;
  font-size: 14px;
  line-height: 19px;
}

.color-spec dt {
  font-weight: 600;
}

.type-specimens {
  margin-top: 52px;
}

.specimen {
  min-width: 0;
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.glyph-grid span {
  display: grid;
  place-items: center;
  height: calc((var(--half-width) / 10) + 1px);
  border: 1px solid var(--pale-rule);
  margin: 0 0 -1px;
  font-size: min(36px, calc((var(--half-width) / 10) * 0.513));
  line-height: 1;
}

.specimen.semibold .glyph-grid {
  font-weight: 600;
}

.specimen-label {
  padding-top: 10px;
  height: 20px;
  overflow: visible;
}

.gallery {
  margin-top: 81px;
}

.gallery img {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.footer {
  width: var(--content-width);
  margin: 395px auto 0;
  padding-bottom: 76px;
  color: var(--blue);
}

.footer-lead {
  width: clamp(196px, calc(19px + 25.3vw), 458px);
  font-size: clamp(19px, calc(14.68px + 0.617vw), 21px);
  font-weight: 300;
  line-height: 1.19;
}

.footer-email {
  display: block;
  width: max-content;
  margin-top: 36px;
  font-size: clamp(27px, calc(-3.25px + 4.321vw), 41px);
  font-weight: 300;
  line-height: 1;
}

.footer-credit {
  display: block;
  width: 160px;
  margin-top: 219px;
}

.footer-credit img {
  width: 100%;
}

@media (min-width: 1024px) {
  .footer-lead {
    font-size: clamp(21px, calc(18.35px + 0.258vw), 22px);
  }

  .footer-email {
    font-size: clamp(41px, calc(19.84px + 2.067vw), 49px);
  }
}

@media (min-width: 1411px) {
  .footer-email {
    font-size: clamp(49px, calc(35px + 1vw), 58px);
  }
}

@media (min-width: 1024px) and (max-width: 1410px) {
  .section-typography {
    margin-top: 202px;
  }

  .section-iconography {
    margin-top: 189px;
  }
}

@media (min-width: 1600px) {
  .footer-lead {
    font-size: clamp(22px, calc(17px + 0.3125vw), 23px);
    line-height: clamp(26px, calc(21px + 0.3125vw), 27px);
  }
}

@media (max-width: 1023px) {
  body {
    font-size: 13px;
    line-height: 18px;
  }

  .site-header {
    height: 118.375px;
  }

  .header-logo {
    width: min(140px, var(--two-track-width));
    height: auto;
  }

  .header-title,
  .header-version,
  .section-title,
  .misuse-card figcaption {
    font-size: 13px;
    line-height: 18px;
  }

  .header-title {
    padding-top: 10px;
  }

  .header-version {
    justify-self: end;
    width: min(140px, var(--two-track-width));
    padding-top: 1px;
  }

  .download-button {
    font-size: 13px;
    line-height: 18px;
  }

  .color-spec {
    font-size: 13px;
    line-height: 18px;
  }
}

@media (max-width: 699px) {
  .footer-lead {
    width: clamp(90px, calc(-43.5px + 34.25vw), 196px);
    font-size: clamp(14px, calc(7.71px + 1.613vw), 19px);
    line-height: clamp(17px, calc(10.71px + 1.613vw), 22px);
  }

  .footer-email {
    font-size: clamp(16px, calc(2.16px + 3.548vw), 27px);
  }
}

@media (max-width: 479px) {
  body {
    font-size: 12px;
    line-height: 17px;
  }

  .site-header {
    height: 122.711px;
  }

  .site-header .page-grid {
    height: 100%;
  }

  .header-title,
  .header-version,
  .section-title,
  .misuse-card figcaption,
  .download-button,
  .color-spec {
    font-size: 12px;
    line-height: 17px;
  }

  .header-title {
    padding-top: 4px;
  }

  .header-version {
    overflow-wrap: anywhere;
    word-break: break-all;
    transform: translateY(-5px);
  }

  .section-title,
  .section-copy,
  .section-copy p {
    overflow-wrap: anywhere;
  }

  .misuse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .download-button {
    height: auto;
    min-height: 40px;
    padding-block: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .color-card {
    align-items: flex-end;
    aspect-ratio: auto;
    padding: 20px;
  }

  .color-spec {
    grid-template-columns: 10.6px 8px;
    column-gap: 10px;
  }

  .color-spec dt,
  .color-spec dd {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-all;
  }

  .type-specimens {
    margin-top: 90px;
  }

  .section-typography {
    margin-top: 199px;
  }
}