@layer page {
@font-face {
  font-family: "FormaDJRVariable-VF";
  src: url("FormaDJR.woff2") format("woff2");
  font-weight: 1 900;
  font-stretch: 50% 100%;
  font-style: oblique 0deg -13deg;
  font-display: swap;
}

@font-face {
  font-family: "FormaDJRVariableWeb";
  src: url("FormaDJR.woff2") format("woff2");
  font-weight: 1 900;
  font-stretch: 50% 100%;
  font-style: oblique 0deg -13deg;
  font-display: swap;
}

@font-face {
  font-family: "FormaDJRWeb";
  src: url("FormaDJR.woff2") format("woff2");
  font-weight: 1 900;
  font-stretch: 50% 100%;
  font-style: oblique 0deg -13deg;
  font-display: swap;
}

@font-face {
  font-family: "FormaDJRMonoVariable";
  src: url("FormaDJRMono.woff2") format("woff2");
  font-weight: 1 900;
  font-style: oblique 0deg -13deg;
  font-display: swap;
}

/* $base-font-size * 0.875 */
/* #775180 */
/*$brand-color: #666;*/
body {
  font-synthesis: none;
}

em {
  font-style: italic;
}

.reverse {
  background: #ec008b;
  color: #fff;
}
.reverse a {
  color: #fff;
}
.reverse a:hover {
  color: rgb(229.5, 229.5, 229.5);
}

h2 {
  font-variation-settings: "opsz" 72;
}

.forma.isSafari16 h2 {
  font-variation-settings: "opsz" 45;
}
@media (min-width: 640px) {
  .forma.isSafari16 h2 {
    font-variation-settings: "opsz" 52;
  }
}
@media (min-width: 800px) {
  .forma.isSafari16 h2 {
    font-variation-settings: "opsz" 62;
  }
}
@media (min-width: 960px) {
  .forma.isSafari16 h2 {
    font-variation-settings: "opsz" 72;
  }
}
.forma.isSafari16 .big {
  font-variation-settings: "opsz" 40;
}
.forma.isSafari16 main h3,
.forma.isSafari16 main .read-more,
.forma.isSafari16 main p {
  font-variation-settings: "opsz" 20;
}
.forma.isSafari16 a.button,
.forma.isSafari16 input.button {
  font-variation-settings: "opsz" 14;
}

h2 {
  font-family: FormaDJRVariableWeb, FormaDJRBanner-Regular, FormaDJRBan-RegularX, FormaDJRBan-Regular;
  font-size: 6.5em;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  line-height: 0.9em;
  font-weight: 450;
  font-style: normal;
  color: #000;
}

h2 em {
  font-family: FormaDJRVariableWeb;
}

.site-header nav,
.site-header #man-nav,
.site-header #main-nav li ul {
  background: #fff;
  color: #00adef;
}
.site-header nav a,
.site-header #man-nav a,
.site-header #main-nav li ul a {
  color: #00adef;
  background: #fff;
}
.site-header nav a:hover,
.site-header #man-nav a:hover,
.site-header #main-nav li ul a:hover {
  color: rgb(0, 136.0836820084, 188);
}

.site-header li li.fotmc {
  border-bottom-color: rgba(0, 173, 239, 0.5);
}

.registration-nw {
  background-image: url("registration-nw.png");
  top: 1em;
  left: 1em;
}

.registration-ne {
  background-image: url("registration-ne.png");
  top: 1em;
  right: 1em;
}

.registration-sw {
  background-image: url("registration-sw.png");
  bottom: 1em;
  left: 1em;
}

.registration-se {
  background-image: url("registration-se.png");
  bottom: 1em;
  right: 1em;
}

.registration-nw,
.registration-ne,
.registration-sw,
.registration-se {
  position: absolute;
  width: 4em;
  height: 4em;
  background-size: 4em;
  background-repeat: no-repeat;
  transform: rotate(-1deg);
}

.page-top,
.page-bottom {
  width: 100%;
  position: absolute;
}

.page-top {
  top: 0;
  margin-bottom: -0.5em;
  border: 1px;
  display: none;
}

.page-bottom {
  bottom: 0;
  margin-top: -0.5em;
  display: none;
}

section {
  border: none;
  position: relative;
  padding: 8em 0;
  border-radius: 1.5em 1.5em 0 0;
}

main #title {
  text-align: center;
  background-size: 3em;
  background-color: #fff100;
  background-size: 100%;
  display: block;
  position: relative;
  z-index: 1;
  overflow: visible;
  padding: 2em 0;
}
main #title .try-buy-pdf {
  position: absolute;
  right: 0;
  bottom: -1rem;
  left: 0;
  overflow: visible;
}
main #title .try-buy-pdf a.button,
main #title .try-buy-pdf input.button {
  font-family: "FormaDJRVariableWeb";
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  border: none;
  border-radius: 0.2rem;
  background-color: #ec008b;
  display: inline-block;
  cursor: pointer;
  padding: 0.5em 1em;
  margin: 0 0.5em;
  -moz-appearance: none;
  -webkit-appearance: none;
}
main #title .try-buy-pdf a.button:hover, main #title .try-buy-pdf a.button:focus,
main #title .try-buy-pdf input.button:hover,
main #title .try-buy-pdf input.button:focus {
  color: #fff;
  background-color: #00adef;
}

.big {
  font-size: 2.5rem;
  line-height: 1.2em;
  font-weight: 150;
}
.big strong {
  font-weight: 400;
}

main #alphabet::before,
main #roman-specimen::before,
main #uc-specimen::before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  /* background: lighten($cyan-color, 10%) url('/assets/forma/cyan.png'); */
  background: #00ADEF;
}

main #font-shopping {
  background: url("forma-light.02.png");
  height: 30em;
}

main #sizes-sample {
  background: url("hktatler.jpg");
  background-size: 100% auto;
  height: 30em;
}

main #history {
  border-left: none;
  /*border-right: $border-weight solid $background-color;*/
}

main #aaa-specimen:before, main #ulc-specimen:before {
  content: "";
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  z-index: -1;
  /*background: lighten($magenta-color, 10%) url('/assets/forma/magenta.png');*/
  background: #EC008B;
}

main .bg-letter {
  position: absolute;
  top: 0;
  width: 100%;
  left: 0;
  z-index: -10;
}
main .bg-letter img {
  width: 40em;
}
main .bg-letter.left img {
  margin-left: -5em;
}
main .bg-letter.right {
  text-align: right;
  margin-left: 0;
}
main .bg-letter.right img {
  margin-right: -5em;
}

.site-footer {
  background: #000;
  color: #fff;
}

main figcaption.fancy {
  font-style: normal;
  background: #ec008b;
  background-size: 3em;
  color: #fff;
  padding: 0.25em 1.5em;
  /* border-radius: .5em; */
  margin: 0;
  margin-top: -1.5em;
  z-index: 5;
}
main figcaption.fancy p {
  font-size: 1rem;
  line-height: 1.3rem;
  letter-spacing: 0.02em;
}
main figcaption.fancy a {
  color: #fff100;
}
main figcaption.fancy a:hover {
  color: rgb(255, 243.8, 51);
}

cite {
  font-style: italic;
}

.fitimg {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  max-height: 47.5em;
  width: 100%;
}

main h3,
main .read-more {
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: 0.075em;
}

main figure {
  margin: 2rem 0;
}

main .read-more {
  text-align: right;
}

main .read-more a::after {
  content: " »";
}

.brochure {
  width: 100%;
  max-width: 50em;
}
.brochure img {
  display: block;
  margin: auto;
  max-width: 50em;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.brochure:hover img {
  opacity: 0.8;
}

main #charset-title {
  background: #ec008b;
  border-radius: 0;
  padding: 2em 0 1em 0;
}
main #charset-title h2 {
  color: #fff;
  font-weight: bold;
}

main #charset-page-title {
  padding: 2em;
}

main #charset {
  background: #00adef;
}
main #charset .case {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  display: block;
  color: #fff100;
}
main #charset p {
  font-family: FormaDJRWeb;
  letter-spacing: -0.025em;
  font-size: 40px;
  margin: 0;
  padding: 0;
  color: #fff;
}
main #charset h4 {
  margin: 0;
  margin-top: 1em;
  padding: 0;
  color: #fff100;
}
main #charset h3 {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  color: #fff100;
}

main .scripts {
  list-style: none !important;
  margin: 0;
  padding: 0;
}
main .scripts li {
  margin: 0;
  padding: 0;
  text-align: center;
}

.frac {
  -moz-font-feature-settings: "frac" 1;
  -ms-font-feature-settings: "frac" 1;
  -o-font-feature-settings: "frac" 1;
  -webkit-font-feature-settings: "frac" 1;
  font-feature-settings: "frac" 1;
}

.dnom {
  -moz-font-feature-settings: "dnom" 1;
  -ms-font-feature-settings: "dnom" 1;
  -o-font-feature-settings: "dnom" 1;
  -webkit-font-feature-settings: "dnom" 1;
  font-feature-settings: "dnom" 1;
}

.salt {
  -moz-font-feature-settings: "salt" 1;
  -ms-font-feature-settings: "salt" 1;
  -o-font-feature-settings: "salt" 1;
  -webkit-font-feature-settings: "salt" 1;
  font-feature-settings: "salt" 1;
}

.tnum {
  -moz-font-feature-settings: "tnum" 1;
  -ms-font-feature-settings: "tnum" 1;
  -o-font-feature-settings: "tnum" 1;
  -webkit-font-feature-settings: "tnum" 1;
  font-feature-settings: "tnum" 1;
}

.onum {
  -moz-font-feature-settings: "onum" 1;
  -ms-font-feature-settings: "onum" 1;
  -o-font-feature-settings: "onum" 1;
  -webkit-font-feature-settings: "onum" 1;
  font-feature-settings: "onum" 1;
}

.ss01 {
  -moz-font-feature-settings: "ss01" 1;
  -ms-font-feature-settings: "ss01" 1;
  -o-font-feature-settings: "ss01" 1;
  -webkit-font-feature-settings: "ss01" 1;
  font-feature-settings: "ss01" 1;
}

.ss02 {
  -moz-font-feature-settings: "ss02" 1;
  -ms-font-feature-settings: "ss02" 1;
  -o-font-feature-settings: "ss02" 1;
  -webkit-font-feature-settings: "ss02" 1;
  font-feature-settings: "ss02" 1;
}

.ss03 {
  -moz-font-feature-settings: "ss03" 1;
  -ms-font-feature-settings: "ss03" 1;
  -o-font-feature-settings: "ss03" 1;
  -webkit-font-feature-settings: "ss03" 1;
  font-feature-settings: "ss03" 1;
}

.ss04 {
  -moz-font-feature-settings: "ss04" 1;
  -ms-font-feature-settings: "ss04" 1;
  -o-font-feature-settings: "ss04" 1;
  -webkit-font-feature-settings: "ss04" 1;
  font-feature-settings: "ss04" 1;
}

.ss05 {
  font-feature-settings: "ss05" 1;
}

.magenta-color, .cyan-color {
  color: #fff;
}
.magenta-color a, .cyan-color a {
  color: #fff100;
}
.magenta-color a:hover, .cyan-color a:hover {
  color: rgb(255, 243.8, 51);
}

.magenta-color {
  background: #ec008b;
}

.cyan-color {
  background: #00adef;
}

.yellow-color {
  background: #fff100;
  color: #000;
}
.yellow-color a {
  color: #ec008b;
}
.yellow-color a:hover {
  color: rgb(185, 0, 108.9618644068);
}

@media screen and (max-width: 60em) {
  h2 {
    font-size: 5em;
  }
  section {
    padding: 5em 0;
    border-radius: 1em 1em 0 0;
  }
  .registration-nw,
  .registration-sw,
  .registration-ne,
  .registration-se {
    display: none;
  }
}
@media screen and (max-width: 50rem) {
  main #title {
    background-size: 150%;
  }
  .page-top,
  .page-bottom {
    display: none;
  }
  h2 {
    font-size: 4em;
  }
  section {
    padding: 4em 0;
    border-radius: 0.5em 0.5em 0 0;
  }
  main .bg-letter img {
    width: 25em;
  }
}
@media screen and (max-width: 40rem) {
  .opsz-specimens {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  main #title {
    background-size: 200%;
  }
  h2 {
    font-size: 3em;
  }
  section {
    padding: 3em 0;
  }
  .pdf-preview {
    float: none;
  }
}
.typeface-info a.social-link::after {
  content: none;
}

.js .package.minimized {
  max-height: 30em;
}

/* Captions
------------------------------------------------------------------------------- */
figcaption {
  font-family: "FormaDJRMonoVariable";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wght" 400, "slnt" 0;
  font-size: 1rem;
}

/* Forma UI Section (Alternates for the smallest extreme)
------------------------------------------------------------------------------- */
.forma-ui {
  margin-top: 4rem;
}

.opsz-alts {
  display: inline-flex;
  margin: 0.5rem 0.5rem 0 0;
}
@media screen and (min-width: 768px) {
  .opsz-alts {
    margin: 1rem 1rem 0 0;
  }
}

.opsz-alt {
  text-align: center;
  border: solid 1px #ccc;
  display: inline-block;
  padding: 0.25rem 1rem;
  margin: 0 -1px 0 0;
  background: #f8f8f8;
}
.opsz-alt:hover {
  background: #fff;
}
@media screen and (min-width: 640px) {
  .opsz-alt {
    padding: 0.5rem 1.5rem;
  }
}
.opsz-alt p {
  font-size: 42px;
  line-height: 1;
  color: #00adef;
  margin: 0;
}
@media screen and (min-width: 640px) {
  .opsz-alt p {
    font-size: 4rem;
  }
}
@media screen and (min-width: 768px) {
  .opsz-alt p {
    font-size: 6rem;
  }
}
.opsz-alt figcaption {
  line-height: 1.2;
  color: #ec008b;
  margin: 0.5rem 0 0;
}
.opsz-alt_20 {
  font-variation-settings: "opsz" 21 !important;
}
.opsz-alt_15 {
  font-variation-settings: "opsz" 15 !important;
}
.opsz-alt_9 {
  font-variation-settings: "opsz" 9 !important;
}

/* Size-specific Drawing Section
------------------------------------------------------------------------------- */
.opsz-specimens {
  border-top: 2px solid #fff;
  border-bottom: 2px solid #fff;
  margin: -2rem 0 -2rem 0;
}
.opsz-specimens figure {
  background: #ec008b;
  border-bottom: 2px solid #fff;
  padding: 0 0 0.25rem;
  margin: 0;
  transition-property: background;
  transition-duration: 0.1s;
  transition-timing-function: ease;
}
.opsz-specimens figure p {
  transition-property: font-size;
  transition-duration: 0.1s;
  transition-timing-function: ease;
}
.opsz-specimens figure:hover {
  transition: none;
}
.opsz-specimens figure:hover p {
  font-size: 6rem;
  outline: none;
  padding-bottom: 0;
}
.opsz-specimens figure:last-child {
  border-bottom: none;
}
.opsz-specimens figure.opsz-1 {
  background: #06adef;
}
.opsz-specimens figure.opsz-2 {
  background: #4d9dfa;
}
.opsz-specimens figure.opsz-3 {
  background: #8387f6;
}
.opsz-specimens figure.opsz-4 {
  background: #b16be2;
}
.opsz-specimens figure.opsz-5 {
  background: #d446bb;
}
.opsz-specimens figure.opsz-6 {
  background: #ec008b;
}
.opsz-specimens figure.opsz-1:hover {
  background: rgb(4.7510204082, 136.987755102, 189.2489795918);
}
.opsz-specimens figure.opsz-2:hover {
  background: rgb(27.393442623, 129.6885245902, 248.606557377);
}
.opsz-specimens figure.opsz-3:hover {
  background: rgb(83.4511278195, 88.984962406, 242.5488721805);
}
.opsz-specimens figure.opsz-4:hover {
  background: rgb(154.5254237288, 64.3559322034, 217.6440677966);
}
.opsz-specimens figure.opsz-5:hover {
  background: rgb(187.4342105263, 43.5657894737, 162.1052631579);
}
.opsz-specimens figure.opsz-6:hover {
  background: rgb(185, 0, 108.9618644068);
}
.opsz-specimens figure .wrapper {
  display: grid;
  grid-template-columns: 1fr;
  align-content: end;
  align-items: end;
  height: 6.25rem;
}
@media screen and (min-width: 756px) {
  .opsz-specimens figure .wrapper {
    grid-template-columns: 2.5rem auto;
  }
}
@media screen and (min-width: 1200px) {
  .opsz-specimens figure .wrapper {
    grid-template-columns: 4rem auto;
    gap: 1rem;
  }
}
.opsz-specimens figcaption {
  line-height: 1;
  color: #fff100;
  display: none;
  padding-bottom: 1rem;
  margin: 0;
}
@media screen and (min-width: 756px) {
  .opsz-specimens figcaption {
    display: inline-block;
  }
}
@media screen and (min-width: 1200px) {
  .opsz-specimens figcaption {
    text-align: right;
  }
}
.opsz-specimens p {
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

.opsz-specimen-regular-72 {
  font-size: 6rem;
  font-variation-settings: "opsz" 72 !important;
  padding-bottom: 0;
}
.opsz-specimen-regular-48 {
  font-size: 4rem;
  font-variation-settings: "opsz" 48 !important;
  padding-bottom: 0.4375rem;
}
.opsz-specimen-regular-36 {
  font-size: 3rem;
  font-variation-settings: "opsz" 36 !important;
  padding-bottom: 0.625rem;
}
.opsz-specimen-regular-24 {
  font-size: 2rem;
  font-variation-settings: "opsz" 24 !important;
  padding-bottom: 0.75rem;
}
.opsz-specimen-regular-15 {
  font-size: 1.25rem;
  font-variation-settings: "opsz" 15 !important;
  padding-bottom: 1rem;
}
.opsz-specimen-regular-8 {
  font-size: 0.66625rem;
  font-variation-settings: "opsz" 8 !important;
  padding-bottom: 1.125rem;
}

.wrapper-disable-1200 {
  overflow: visible;
  max-width: none;
  padding-right: 0;
  margin: 0;
}
@media screen and (min-width: 1200px) {
  .wrapper-disable-1200 {
    padding: 0;
  }
}

/* Scroll-animated sections
------------------------------------------------------------------------------- */
.js-animated-specimen,
.non-animated-specimen {
  --opsz: 72;
  --wght: 400;
  --wdth: 100;
  --slnt: 0;
  font-family: "FormaDJRVariable-VF";
  font-variation-settings: "opsz" var(--opsz), "wght" var(--wght), "wdth" var(--wdth), "slnt" var(--slnt);
}

/* Title (headline)
------------------------------------ */
#title .headline-wrap {
  position: relative;
}
#title .headline-wrap .headline {
  --opsz: 72;
  --wght: 100;
  --wdth: 100;
  --slnt: 0;
  font-size: 42.578125vw;
  font-family: "FormaDJRVariable-VF";
  font-variation-settings: "opsz" var(--opsz), "wght" var(--wght), "wdth" var(--wdth), "slnt" var(--slnt);
  color: #fff;
  line-height: 1;
  position: absolute;
  top: 0.035em;
  left: 0;
  width: 100%;
}
@media screen and (min-width: 1024px) {
  #title .headline-wrap .headline {
    font-size: 27.25rem;
  }
}
#title .headline-wrap .headline .for,
#title .headline-wrap .headline .ma {
  text-transform: lowercase;
  display: block;
  position: absolute;
}
#title .headline-wrap .headline .for {
  text-align: right;
  right: 50%;
  margin-right: -0.0975em;
}
#title .headline-wrap .headline .ma {
  top: 0.589em;
  left: 50%;
  margin-left: -0.2575em;
}
#title .headline-wrap .headline .hyphen {
  margin-left: -0.08em;
}
#title .headline-wrap .headline .djr {
  --opsz: 15;
  --wght: 600;
  --slnt: -13;
  font-size: 3.125vw;
  font-variation-settings: "opsz" var(--opsz), "wght" var(--wght), "wdth" var(--wdth), "slnt" var(--slnt);
  color: #00adef;
  text-transform: uppercase;
  display: block;
  position: absolute;
  top: 2em;
  right: 0.85em;
  z-index: 2;
  perspective: 1000px;
}
@media screen and (min-width: 1024px) {
  #title .headline-wrap .headline .djr {
    font-size: 2rem;
  }
}
#title .headline-wrap .headline .djr:before {
  content: "";
  display: block;
  background: #fff;
  border-radius: 0.175em;
  position: absolute;
  top: -0.36em;
  right: -0.85em;
  bottom: -0.29em;
  left: -0.95em;
  z-index: -1;
  transform: rotateY(-45deg);
}

/* Alternates specimen (GRaj)
------------------------------------ */
#alternates-specimen {
  background: #fff100;
  height: 48.5vw;
}
#alternates-specimen .specimen {
  --opsz: 72;
  --wght: 500;
  --wdth: 100;
  --slnt: 0;
  font-size: 52vw;
  font-family: "FormaDJRVariable-VF";
  font-variation-settings: "opsz" var(--opsz), "wght" var(--wght), "wdth" var(--wdth), "slnt" var(--slnt);
  color: #ec008b;
  line-height: 1;
  position: absolute;
  top: 3.9vw;
  left: 0.4vw;
}
#alternates-specimen .specimen .default-g {
  margin-right: -0.01em;
}
#alternates-specimen .specimen .default-r {
  margin-right: -0.015em;
}
#alternates-specimen .specimen.alt {
  color: #00adef;
  mix-blend-mode: multiply;
}
#alternates-specimen .specimen .alt-g {
  font-feature-settings: "ss01";
  margin-right: -0.004em;
}
#alternates-specimen .specimen .alt-r {
  font-feature-settings: "ss02";
  margin-right: 0.0115em;
}
#alternates-specimen .specimen .alt-a {
  font-feature-settings: "ss03";
  margin-right: 0.005em;
}
#alternates-specimen .specimen .alt-j {
  font-feature-settings: "ss04";
}
#alternates-specimen .specimen.alt-bg {
  color: #fff;
}

/* Alphabet section
------------------------------------ */
#alphabet .js-animated-specimen {
  font-size: 100px;
  color: #fff;
  line-height: 0.8;
  padding: 0;
  margin: 0;
}
#alphabet .js-animated-specimen:last-child {
  margin-top: -0.04em;
}
@media screen and (min-width: 375px) {
  #alphabet .js-animated-specimen {
    font-size: 116px;
  }
}
@media screen and (min-width: 414px) {
  #alphabet .js-animated-specimen {
    font-size: 130px;
  }
}
@media screen and (min-width: 640px) {
  #alphabet .js-animated-specimen {
    font-size: 208px;
  }
}
@media screen and (min-width: 768px) {
  #alphabet .js-animated-specimen {
    font-size: 256px;
  }
}
@media screen and (min-width: 1024px) {
  #alphabet .js-animated-specimen {
    font-size: 342px;
  }
}
@media screen and (min-width: 1040px) {
  #alphabet .js-animated-specimen {
    font-size: 350px;
  }
}

/* ULC Specimen section
------------------------------------ */
#ulc-specimen .inner {
  position: relative;
}
#ulc-specimen .inner img {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  opacity: 0;
}
#ulc-specimen .non-animated-specimen,
#ulc-specimen .js-animated-specimen {
  font-size: 40px;
  text-align: center;
  color: #fff;
  line-height: 1.075;
  position: relative;
  z-index: 1;
  padding: 0;
  margin: 0;
}
@media screen and (min-width: 375px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 46px;
  }
}
@media screen and (min-width: 390px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 49px;
  }
}
@media screen and (min-width: 414px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 52px;
  }
}
@media screen and (min-width: 640px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 84px;
  }
}
@media screen and (min-width: 768px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 102px;
  }
}
@media screen and (min-width: 1024px) {
  #ulc-specimen .non-animated-specimen,
  #ulc-specimen .js-animated-specimen {
    font-size: 136px;
  }
}
#ulc-specimen:first-child {
  margin-top: -0.19em;
}
#ulc-specimen .yellow {
  color: #fff100;
}

/* Condensed specimen section
------------------------------------ */
#condensed figcaption {
  color: #fff;
  text-align: center;
  margin-top: 1.5rem;
}
@media screen and (min-width: 640px) {
  #condensed figcaption {
    margin-top: 3rem;
  }
}
@media screen and (min-width: 1024px) {
  #condensed figcaption {
    text-align: left;
  }
}
#condensed .grid {
  display: grid;
  grid-template-columns: 1.66fr 1.34fr;
}
#condensed .js-animated-specimen {
  font-size: 41px;
  line-height: 0.95;
  position: relative;
}
@media screen and (min-width: 375px) {
  #condensed .js-animated-specimen {
    font-size: 47px;
  }
}
@media screen and (min-width: 390px) {
  #condensed .js-animated-specimen {
    font-size: 49px;
  }
}
@media screen and (min-width: 414px) {
  #condensed .js-animated-specimen {
    font-size: 52px;
  }
}
@media screen and (min-width: 640px) {
  #condensed .js-animated-specimen {
    font-size: 84px;
  }
}
@media screen and (min-width: 768px) {
  #condensed .js-animated-specimen {
    font-size: 102px;
  }
}
@media screen and (min-width: 1024px) {
  #condensed .js-animated-specimen {
    font-size: 138px;
  }
}
@media screen and (min-width: 1040px) {
  #condensed .js-animated-specimen {
    font-size: 140px;
  }
}
#condensed .js-animated-specimen:before {
  content: "-";
  opacity: 0;
}
#condensed .js-animated-specimen span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 0.125em;
}
#condensed .js-animated-specimen:nth-child(even) {
  color: #fff100;
}
#condensed .col-1 {
  text-align: right;
}
#condensed .col-1 .js-animated-specimen span {
  right: 0;
  left: auto;
}
#condensed .col-1 .js-animated-specimen:nth-child(1) span {
  right: 0.02em;
}
#condensed .col-1 .js-animated-specimen:nth-child(3) span {
  right: 0.1em;
}
#condensed .col-1 .js-animated-specimen:nth-child(4) span {
  right: 0.05em;
}
#condensed .col-1 .js-animated-specimen:nth-child(5) span {
  right: 0.05em;
}
#condensed .col-1 .js-animated-specimen:nth-child(6) span {
  right: 0.05em;
}
#condensed .col-1 .js-animated-specimen:nth-child(7) span {
  right: 0.065em;
}
#condensed .col-1 .js-animated-specimen:nth-child(8) span {
  right: 0.085em;
}
#condensed .col-1 .js-animated-specimen:nth-child(9) span {
  right: 0.065em;
}

/* Mono specimen section
------------------------------------ */
#mono figcaption {
  color: #000;
  margin-top: 2em;
}
@media screen and (min-width: 640px) {
  #mono figcaption {
    margin-top: 4em;
  }
}
#mono .js-animated-specimen {
  --wght: 400;
  --slnt: 0;
  font-family: "FormaDJRMonoVariable";
  font-variation-settings: "wght" var(--wght), "slnt" var(--slnt);
  font-weight: normal;
  font-style: normal;
  font-size: 42px;
  line-height: 1;
  color: #00adef;
  position: relative;
}
@media screen and (min-width: 375px) {
  #mono .js-animated-specimen {
    font-size: 49px;
  }
}
@media screen and (min-width: 414px) {
  #mono .js-animated-specimen {
    font-size: 54px;
  }
}
@media screen and (min-width: 640px) {
  #mono .js-animated-specimen {
    font-size: 88px;
  }
}
@media screen and (min-width: 768px) {
  #mono .js-animated-specimen {
    font-size: 109px;
  }
}
@media screen and (min-width: 1024px) {
  #mono .js-animated-specimen {
    font-size: 144px;
  }
}
@media screen and (min-width: 1040px) {
  #mono .js-animated-specimen {
    font-size: 147px;
  }
}
#mono .js-animated-specimen:before {
  content: "-";
  opacity: 0;
}
#mono .js-animated-specimen span {
  position: absolute;
  top: 0;
  left: -0.0225em;
}
#mono .js-animated-specimen .js-text-fade {
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0;
}
#mono .js-animated-specimen .js-text-fade.animate {
  opacity: 0;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}
#mono .js-animated-specimen:nth-child(even) {
  color: #ec008b;
}

/* Interactive Specimen Sample
------------------------------------------------------------------------------- */
.forma.js main p.js-interactive-specimen,
.js main p.js-interactive-specimen {
  --opsz: 72;
  --wght: 100;
  --wdth: 100;
  --slnt: 0;
  font-family: "FormaDJRVariable-VF";
  font-variation-settings: "opsz" var(--opsz), "wght" var(--wght), "wdth" var(--wdth), "slnt" var(--slnt);
  font-size: 56px;
  line-height: 0.9;
  text-align: center;
  outline: none;
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
@media screen and (min-width: 375px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 64px;
  }
}
@media screen and (min-width: 414px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 72px;
  }
}
@media screen and (min-width: 640px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 116px;
  }
}
@media screen and (min-width: 768px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 144px;
  }
}
@media screen and (min-width: 1024px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 189px;
    margin: 0;
  }
}
@media screen and (min-width: 1040px) {
  .forma.js main p.js-interactive-specimen,
  .js main p.js-interactive-specimen {
    font-size: 192px;
  }
}

.interactive-specimen-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding: 0;
  margin: 0;
  margin-top: 3rem;
}
@media screen and (min-width: 640px) {
  .interactive-specimen-axes {
    gap: 2rem;
  }
}
.interactive-specimen-axes li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.interactive-specimen-axes label {
  font-family: "FormaDJRMonoVariable";
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "wght" 400, "slnt" 0;
  font-size: 16px;
  line-height: 1;
  color: #ec008b;
  display: block;
  padding: 0;
  margin: 0;
}
.interactive-specimen-axes label::after {
  content: ": " attr(data-val);
}

.interactive-specimen-axes input[type=range] {
  -webkit-appearance: none;
  background: transparent;
  margin: 12px 0;
  width: 100%;
}
.interactive-specimen-axes input[type=range]::-webkit-slider-runnable-track {
  background: #00adef;
  border: 3px solid #00adef;
}
.interactive-specimen-axes input[type=range]::-moz-focus-outer {
  border: 0;
}
.interactive-specimen-axes input[type=range]:focus {
  outline: 0;
}
.interactive-specimen-axes input[type=range]:focus::-webkit-slider-runnable-track {
  background: rgb(255, 6.5, 152.8622881356);
}
.interactive-specimen-axes input[type=range]:focus::-ms-fill-lower {
  background: #ec008b;
}
.interactive-specimen-axes input[type=range]:focus::-ms-fill-upper {
  background: rgb(255, 6.5, 152.8622881356);
}
.interactive-specimen-axes input[type=range]::-webkit-slider-runnable-track {
  cursor: default;
  height: 1px;
  transition: all 0.2s ease;
  width: 100%;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(12.75, 12.75, 12.75, 0);
  background: #ec008b;
  border: 0px solid transparent;
  border-radius: 0px;
}
.interactive-specimen-axes input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #fff;
  border: 1px solid #ec008b;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: default;
  height: 24px;
  width: 24px;
  -webkit-appearance: none;
  margin-top: -11.5px;
}
.interactive-specimen-axes input[type=range]::-moz-range-track {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(12.75, 12.75, 12.75, 0);
  cursor: default;
  height: 1px;
  transition: all 0.2s ease;
  width: 100%;
  background: #ec008b;
  border: 0px solid transparent;
  border-radius: 0px;
  height: 0.5px;
}
.interactive-specimen-axes input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #fff;
  border: 1px solid #ec008b;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: default;
  height: 24px;
  width: 24px;
}
.interactive-specimen-axes input[type=range]::-ms-track {
  cursor: default;
  height: 1px;
  transition: all 0.2s ease;
  width: 100%;
  background: transparent;
  border-color: transparent;
  border-width: 12px 0;
  color: transparent;
}
.interactive-specimen-axes input[type=range]::-ms-fill-lower {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(12.75, 12.75, 12.75, 0);
  background: rgb(210.5, 0, 123.9809322034);
  border: 0px solid transparent;
  border-radius: 0px;
}
.interactive-specimen-axes input[type=range]::-ms-fill-upper {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 0 0 0px rgba(12.75, 12.75, 12.75, 0);
  background: #ec008b;
  border: 0px solid transparent;
  border-radius: 0px;
}
.interactive-specimen-axes input[type=range]::-ms-thumb {
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #fff;
  border: 1px solid #ec008b;
  border-radius: 12px;
  box-sizing: border-box;
  cursor: default;
  height: 24px;
  width: 24px;
  margin-top: 0.25px;
}
.interactive-specimen-axes input[type=range]:disabled::-webkit-slider-thumb, .interactive-specimen-axes input[type=range]:disabled::-moz-range-thumb, .interactive-specimen-axes input[type=range]:disabled::-ms-thumb, .interactive-specimen-axes input[type=range]:disabled::-webkit-slider-runnable-track, .interactive-specimen-axes input[type=range]:disabled::-ms-fill-lower, .interactive-specimen-axes input[type=range]:disabled::-ms-fill-upper {
  cursor: not-allowed;
}

} /* @layer page */