@layer page {
/* Rules compiled from src/scss/fern22.scss via dart-sass (deterministic recipe).
 * Command: /opt/homebrew/bin/sass --no-source-map --style=expanded --quiet
 *          --load-path=.../site/djr.com/src/scss
 *          /tmp/fern_mini.scss /tmp/fern_rules.css
 *
 * @font-face blocks bridge the exact font-family names used in the compiled rules
 * to woff2 files colocated in this folder.
 *
 * TODO: FernVariable-Roman-VF_TRIAL.woff2 — not present locally.
 *   Obtain FernVariable-Roman-VF_TRIAL.woff2 from fulfillment server and colocate
 *   in this folder. Replace the static fallback @font-face below.
 *
 * TODO: FernVariable-Italic-VF_TRIAL.woff2 — not present locally.
 *   Obtain FernVariable-Italic-VF_TRIAL.woff2 from fulfillment server and colocate
 *   in this folder. Replace the static fallback @font-face below.
 */

/* FONT FACES
-------------------------------------------------------------- */

/* FernVariable-Roman-VF: variable font (wght 400-800, opsz axis).
 * Bridged with static FernText-Regular.woff2 until variable woff2 is available.
 * TODO: replace src with FernVariable-Roman-VF_TRIAL.woff2 and add font-weight/font-stretch ranges. */
@font-face {
  font-family: "FernVariable-Roman-VF";
  src: url("FernText-Regular.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* FernVariable-Italic-VF: variable font italic (wght 400-800, opsz axis).
 * Bridged with static FernMicro-Italic.woff2 until variable woff2 is available.
 * TODO: replace src with FernVariable-Italic-VF_TRIAL.woff2 and add font-weight/font-stretch ranges. */
@font-face {
  font-family: "FernVariable-Italic-VF";
  src: url("FernMicro-Italic.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "FernOrnaments-Regular";
  src: url("FernOrnaments-Regular_TRIAL.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "FernTitlingCaps-Regular";
  src: url("FernTitlingCaps-Regular_TRIAL.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InputMono-Regular";
  src: url("InputMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InputMono-Bold";
  src: url("InputMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InputSansNarrow";
  src: url("InputSansNarrow-Light_TRIAL.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InputSansNarrow";
  src: url("InputSansNarrow-Medium_TRIAL.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* COMPILED RULES (dart-sass output, url() asset paths rewritten to bare filenames)
-------------------------------------------------------------- */
/* $base-font-size * 0.875 */
/* #775180 */
/*$brand-color: #666;*/
/* --------------------------------------------------------------

TYPEFACE: FERN

-------------------------------------------------------------- */
/* FONT STYLES
-------------------------------------------------------------- */
.FernVariable-Roman-VF {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 600, "opsz" 12;
}

.FernVariable-Italic-VF {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 600, "opsz" 12;
}

.FernMicro-Regular {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 8;
}

.FernMicro-Italic {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 400, "opsz" 8;
}

.FernMicro-Bold {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 700, "opsz" 8;
}

.FernMicro-600 {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 600, "opsz" 8;
}

.FernMicro-500 {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 500, "opsz" 8;
}

.FernMicro-BoldItalic {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 700, "opsz" 8;
}

.FernText-Regular {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
}

.FernText-Italic {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
}

.FernText-Bold {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 700, "opsz" 12;
}

.FernText-BoldItalic {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 700, "opsz" 12;
}

.FernOrnaments-Regular {
  font-family: "FernOrnaments-Regular";
}

.FernTitlingCaps-Regular {
  font-family: "FernTitlingCaps-Regular";
}

/* FONT VARIANT STYLES:
-------------------------------------------------------------- */
.ligatures {
  font-variant-ligatures: discretionary-ligatures;
}

/* SPECIMEN (DEFUALT SECTION STYLES):
-------------------------------------------------------------- */
.fern-specimen {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
  font-synthesis: none;
}

/* SECTIONS:
-------------------------------------------------------------- */
.page {
  border-top: 1px solid #ddd;
}
.page .wrapper {
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  padding: 1rem 1rem 0;
}
@media screen and (min-width: 640px) {
  .page .wrapper {
    padding: 6rem;
  }
}

.buy-section {
  padding: 0rem 0 1rem;
}
@media screen and (min-width: 640px) {
  .buy-section {
    padding: 0rem 0 1rem;
  }
}

.page-break {
  font-family: "FernOrnaments-Regular";
  font-size: 2rem;
  line-height: 1;
  text-align: center;
  color: #a12314;
  border-top: 1px solid #ddd;
  padding: 1rem 0;
}
@media screen and (min-width: 640px) {
  .page-break {
    padding: 2rem 0;
  }
}
.page-break .extra {
  display: none;
}
@media screen and (min-width: 1024px) {
  .page-break .extra {
    display: inline;
  }
}

/* HEADER:
-------------------------------------------------------------- */
header {
  text-align: center;
}
header .heading {
  padding: 1rem;
}
@media screen and (min-width: 768px) {
  header .heading {
    padding: 6rem 1rem;
  }
}
header .h-headline {
  font-family: "FernTitlingCaps-Regular";
  font-size: 3.125rem;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  position: relative;
  margin-left: 0.15em;
}
@media screen and (min-width: 768px) {
  header .h-headline {
    font-size: 4rem;
  }
}
header .h-subheadline {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
  font-variant-ligatures: discretionary-ligatures;
  font-size: 1.25rem;
  line-height: 1.414;
  margin-bottom: 0.5rem;
}
@media screen and (min-width: 640px) {
  header .h-subheadline {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 475px) {
  header .h-subheadline span {
    white-space: nowrap;
  }
}
@media screen and (min-width: 768px) {
  header .ornaments {
    font-size: 2.75rem;
  }
}
header .try-buy-pdf {
  font-size: 1.25rem;
  border-top: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  padding: 1rem 0;
  margin-top: 0.5rem;
}
@media screen and (min-width: 640px) {
  header .try-buy-pdf {
    font-size: 1.5rem;
    padding: 2rem 1rem 1rem;
    margin-bottom: 1rem;
  }
}
header .try-buy-pdf .wrapper {
  position: relative;
}
header .try-buy-pdf .button {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
  font-variant-caps: all-small-caps;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.25rem;
}
header .try-buy-pdf .button:hover {
  color: #a12314;
  cursor: pointer;
}
header .try-buy-pdf .ornament {
  display: none;
}
@media screen and (min-width: 320px) {
  header .try-buy-pdf .ornament {
    line-height: 1;
    color: #a12314;
    display: inline;
    padding-top: 0.5rem;
  }
}

/* HEADINGS:
-------------------------------------------------------------- */
.h-heading {
  font-family: "FernTitlingCaps-Regular";
  font-size: 1.75rem;
  line-height: 1.25;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 1rem 1.5rem;
}
@media screen and (min-width: 540px) {
  .h-heading {
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
@media screen and (min-width: 768px) {
  .h-heading {
    font-size: 2.75rem;
    margin: 0 1rem 4rem;
  }
}
.h-heading.white {
  color: #fff;
}
.h-heading .bg-texture-red {
  padding: 20vh 0;
}
.bg-texture-red .h-heading {
  margin: 0;
}
.h-heading .wrap {
  display: inline-block;
  background: #fff;
  border: 1px solid #a12314;
  position: relative;
  z-index: 2;
  padding: 2rem;
}
@media screen and (min-width: 540px) {
  .h-heading .wrap {
    padding: 5rem;
  }
}
.bg-texture-red .h-heading .wrap {
  border: none;
  margin: 2rem 1rem;
}
@media screen and (min-width: 540px) {
  .bg-texture-red .h-heading .wrap {
    margin: 3.125rem 1rem;
  }
}
@media screen and (min-width: 540px) {
  .h-heading .wrap:before {
    content: "";
    display: block;
    position: absolute;
    border: 1px solid #ddd;
    top: 2.5rem;
    right: 2.5rem;
    bottom: 2.5rem;
    left: 2.5rem;
  }
  .bg-texture-red .h-heading .wrap:before {
    border-color: #ddd;
  }
}
.h-heading .ornament {
  display: none;
}
@media screen and (min-width: 540px) {
  .h-heading .ornament {
    font-family: "FernOrnaments-Regular";
    color: #a12314;
    display: inline-block;
    position: relative;
    top: -0.1em;
  }
}
.h-heading .ornament.right {
  padding-left: 1rem;
}
.h-heading .ornament.left {
  padding-right: 1rem;
}

/* ORNAMENTS:
-------------------------------------------------------------- */
.ornaments {
  font-family: "FernOrnaments-Regular";
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: #a12314;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media screen and (min-width: 320px) {
  .ornaments {
    font-size: 2rem;
  }
}
.ornaments.frame {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
.ornaments.black {
  color: #fff;
  background-color: #111;
}
.ornaments.banner {
  padding: 6rem 0;
  margin: 0;
}
.ornaments .left {
  text-align: left;
}
.ornaments .right {
  text-align: right;
}

.ornaments + .ornaments {
  margin-top: -1rem;
}

/* BG-TEXTURES:
-------------------------------------------------------------- */
.bg-texture-red {
  background-color: #a12314;
  position: relative;
  overflow: hidden;
}
.bg-texture-red:before {
  content: "";
  background-image: url("fern-bg-pattern-1-red.svg");
  background-repeat: repeat;
  background-position: 0;
  background-size: 194px 100px;
  background-attachment: fixed;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.bg-texture-red .content {
  position: relative;
  z-index: 3;
}

.bg-texture-black {
  background: #111;
  background: linear-gradient(180deg, rgb(0, 0, 0) 0%, #111111 9%, #111111 78%, rgb(0, 0, 0) 100%);
  position: relative;
  overflow: hidden;
}
.bg-texture-black:before {
  content: "";
  background-image: url("fern-bg-pattern-1-black.svg");
  background-repeat: repeat;
  background-position: 0;
  background-size: 194px 100px;
  background-attachment: fixed;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
}
.bg-texture-black .content {
  position: relative;
  z-index: 3;
}

/* INTRO:
-------------------------------------------------------------- */
.fern-intro {
  font-size: 1.25rem;
  line-height: 1.414;
  text-align: justify;
  hyphens: auto;
  padding-bottom: 2rem;
}
@media screen and (min-width: 640px) {
  .fern-intro {
    font-size: 1.5rem;
  }
}
.fern-intro p {
  display: inline;
}
.fern-intro .p-break {
  color: #a12314;
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

/* SPECIMEN AMPERSAND:
-------------------------------------------------------------- */
/* SPECIMEN TEXT + MICRO:
-------------------------------------------------------------- */
.specimen-text-micro .uppercase {
  letter-spacing: 0.05em;
}
.specimen-text-micro .FernText-Regular,
.specimen-text-micro .FernText-Italic {
  font-size: 1.25rem;
  line-height: 1.414;
  text-align: justify;
  hyphens: auto;
}
@media screen and (min-width: 640px) {
  .specimen-text-micro .FernText-Regular,
  .specimen-text-micro .FernText-Italic {
    font-size: 1.5rem;
  }
}
.specimen-text-micro .fern-micro {
  font-size: 1rem;
  line-height: 1.414;
  text-align: justify;
  hyphens: auto;
}
@media screen and (min-width: 768px) {
  .specimen-text-micro .fern-micro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.414rem;
  }
}
.specimen-text-micro .fern-micro p + p {
  text-indent: 1.414rem;
}
.specimen-text-micro figcaption {
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 10;
  font-variant: small-caps;
  font-size: 1rem;
  letter-spacing: 0.05em;
  text-align: left;
  color: #a12314;
  text-transform: lowercase;
  display: block;
  margin: 1rem 0 2rem;
}
.specimen-text-micro figcaption span {
  white-space: nowrap;
}
.specimen-text-micro .small-caps {
  font-variant: small-caps;
  letter-spacing: 0.025em;
}
.specimen-text-micro .FernText-Regular strong {
  font-variation-settings: "wght" 700, "opsz" 12;
}

/* SPECIMEN FRACTIONS:
-------------------------------------------------------------- */
/* OPENTYPE FEATURES:
-------------------------------------------------------------- */
.opentype-features {
  text-align: center;
  color: #fff;
  background: #111;
  padding-top: 2rem;
  padding-bottom: 4rem;
}
@media screen and (min-width: 640px) {
  .opentype-features {
    padding-top: 6rem;
    padding-bottom: 8rem;
  }
}
@media screen and (min-width: 768px) {
  .opentype-features figure {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.414rem;
    align-items: center;
  }
}
.opentype-features figure + figure {
  margin-top: 1.414rem;
}
.opentype-features .example {
  font-size: 1.5rem;
  line-height: 1.414;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .opentype-features .example {
    text-align: right;
  }
}
.opentype-features figcaption {
  font-family: "InputMono-Regular";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.414;
  text-align: left;
  color: #ce7c7d;
  text-align: center;
}
@media screen and (min-width: 768px) {
  .opentype-features figcaption {
    text-align: left;
  }
}
.opentype-features figcaption h4 {
  font-weight: 600;
}

/* CHARACTER SET:
-------------------------------------------------------------- */
.character-set .wrapper {
  padding: 2rem 1rem 3rem;
}
@media screen and (min-width: 640px) {
  .character-set .wrapper {
    padding: 6rem 6rem 8rem;
  }
}
.character-set p {
  font-size: 1.25rem;
  line-height: 1.414;
  text-align: justify;
  text-align-last: center;
}
@media screen and (min-width: 640px) {
  .character-set p {
    font-size: 1.5rem;
  }
}
.character-set p + p {
  margin-top: 2rem;
}
.character-set .numbers span {
  display: block;
}
@media screen and (min-width: 1024px) {
  .character-set .numbers span {
    display: inline-block;
  }
  .character-set .numbers span + span:before {
    content: " • ";
    color: #a12314;
    margin: 0 1rem;
  }
}

/* FERN ORNAMENTS:
-------------------------------------------------------------- */
.fern-ornaments {
  border-top: 1px solid #ddd;
}
.fern-ornaments .wrapper {
  border: none;
}
@media screen and (min-width: 1072px) and (max-width: 1199px) {
  .fern-ornaments .wrapper {
    padding-right: 0;
    padding-left: 0;
  }
}
@media screen and (min-width: 1200px) {
  .fern-ornaments .wrapper {
    max-width: none;
  }
}
.fern-ornaments .h-heading {
  margin-bottom: 2rem;
}
.fern-ornaments .h-subheading {
  font-size: 1.25rem;
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
  font-variant-caps: all-small-caps;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #a12314;
  margin: 1rem 0;
}
@media screen and (min-width: 640px) {
  .fern-ornaments .h-subheading {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 768px) {
  .fern-ornaments .h-subheading {
    margin-top: -1rem 0 2rem;
  }
}
.fern-ornaments .keyboard-wrap {
  margin: 0 auto 2rem;
}
@media screen and (min-width: 640px) {
  .fern-ornaments .keyboard-wrap {
    margin-bottom: 3rem;
  }
}
@media screen and (min-width: 1024px) {
  .fern-ornaments .keyboard-wrap {
    display: flex;
    justify-content: center;
  }
}
.fern-ornaments .keyboard {
  text-align: center;
  background-color: #eee;
  border: 1px solid #ddd;
  border-radius: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem;
}
@media screen and (min-width: 1024px) {
  .fern-ornaments .keyboard {
    display: grid;
    grid-template-columns: repeat(8, fit-content(9rem));
  }
}
@media screen and (min-width: 1025px) {
  .fern-ornaments .keyboard {
    gap: 0.75rem;
  }
}
.fern-ornaments .keyboard .section {
  flex-basis: 0;
}
.fern-ornaments .keyboard .line {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  white-space: nowrap;
}
.fern-ornaments .keyboard .line.center {
  justify-content: center;
}
.fern-ornaments .keyboard .line.stretch button {
  flex-grow: 1;
}
.fern-ornaments .keyboard .line + .line {
  margin-top: 0.5rem;
}
.fern-ornaments .keyboard button {
  font-family: "FernOrnaments-Regular";
  font-size: 1.5rem;
  line-height: 1;
  color: #a12314;
  display: inline-block;
  border: 1px solid #fff;
  border-radius: 0.5rem;
  background-color: #fff;
  box-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.25);
  position: relative;
  padding: 0.5rem 0.5rem 1.75rem;
}
@media screen and (min-width: 375px) and (max-width: 413px) {
  .fern-ornaments .keyboard button {
    padding: 0.5rem 1rem 1.75rem;
  }
}
@media screen and (min-width: 414px) and (max-width: 541px) {
  .fern-ornaments .keyboard button {
    padding: 0.5rem 0.59rem 1.75rem;
  }
}
.fern-ornaments .keyboard button:after {
  content: attr(data-key);
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 500, "opsz" 8;
  font-size: 1rem;
  color: #111;
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
}
.fern-ornaments .keyboard button:hover, .fern-ornaments .keyboard button:focus {
  border-color: #111;
  box-shadow: none;
}
.fern-ornaments .keyboard button.basic {
  font-family: "FernVariable-Roman-VF";
  font-size: 1rem;
  color: #111;
  display: block;
  padding: 2.5rem 1rem 0.25rem;
}
.fern-ornaments .keyboard button.basic:after {
  display: none;
}
.fern-ornaments .h-banner {
  font-size: 1.25rem;
  font-family: "FernVariable-Roman-VF";
  font-variation-settings: "wght" 400, "opsz" 12;
  font-variant-caps: all-small-caps;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  color: #a12314;
  border: 1px solid #ddd;
  border-right: none;
  border-left: none;
  padding: 0 1rem;
  margin: 0 0 2rem;
}
@media screen and (min-width: 640px) {
  .fern-ornaments .h-banner {
    font-size: 1.5rem;
    padding: 2rem 1rem;
  }
}

.fern-pattern-generator .intro {
  font-size: 1.25rem;
  line-height: 1.414;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 2rem;
}
@media screen and (min-width: 640px) {
  .fern-pattern-generator .intro {
    font-size: 1.5rem;
  }
}
.fern-pattern-generator .intro p {
  display: inline;
}
.fern-pattern-generator .intro .p-break {
  color: #a12314;
  display: inline;
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}
.fern-pattern-generator .intro code {
  font-family: "InputMono-Regular";
  font-weight: normal;
  font-size: 1rem;
  letter-spacing: 0.25em;
  display: inline-block;
  background: #efefef;
  padding: 0 0 0 0.25rem;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
@media screen and (min-width: 1024px) {
  .fern-pattern-generator .pattern-grid {
    display: grid;
    grid-template-columns: 21rem 1fr;
    column-gap: 1.414rem;
  }
}
@media screen and (min-width: 1200px) {
  .fern-pattern-generator .pattern-grid {
    column-gap: 2.414rem;
    padding-right: 1rem;
  }
}
@media screen and (min-width: 1024px) {
  .fern-pattern-generator .pattern-grid .controls {
    order: -1;
  }
}
@media screen and (min-width: 820px) and (max-width: 1023px) {
  .fern-pattern-generator .pattern-grid .input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.414rem;
  }
}
.fern-pattern-generator .pattern-grid .examples {
  font-family: "InputMono-Regular";
  font-weight: normal;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator .pattern-grid .examples span {
  flex-basis: 100%;
  display: block;
  padding: 0.25rem 0 0.5rem;
}
.fern-pattern-generator .pattern-grid .examples button {
  color: #a12314;
  background: #fff;
  border: solid 1px #ddd;
  border-radius: 0.25rem;
  min-width: 3.25rem;
  padding: 0.25rem 0.75rem 0.5rem;
}
.fern-pattern-generator .pattern-grid .examples button:hover, .fern-pattern-generator .pattern-grid .examples button:focus {
  border-color: #a12314;
}
.fern-pattern-generator .pattern-grid textarea {
  font-family: "InputMono-Regular";
  font-weight: normal;
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: 0.5em;
  background: #efefef;
  border: 1px solid #ddd;
  width: 100%;
  resize: none;
  padding: 0.5em;
  margin-bottom: 0.75rem;
}
@media screen and (min-width: 640px) {
  .fern-pattern-generator .pattern-grid textarea {
    font-size: 1.25rem;
  }
}
.fern-pattern-generator form {
  margin-bottom: 2rem;
}
.fern-pattern-generator form fieldset {
  padding-bottom: 0.5rem;
}
.fern-pattern-generator form legend {
  font-family: "InputSansNarrow";
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator form .form-number {
  display: inline-block;
  margin-right: 0.5rem;
}
.fern-pattern-generator form .form-number label {
  font-family: "InputMono-Bold";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  text-transform: uppercase;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator form .form-number input {
  font-family: "InputMono-Regular";
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.25rem 0.25rem 0.5rem;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator form .form-number input:hover {
  border-color: #a12314;
}
.fern-pattern-generator form .form-checkbox {
  display: inline-block;
}
.fern-pattern-generator form .form-checkbox label {
  font-family: "InputSansNarrow";
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator form .form-checkbox span {
  color: #a12314;
  display: inline-block;
  background-color: inherit;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.25rem 1.5rem 0.5rem;
  user-select: none;
}
.fern-pattern-generator form .form-checkbox span:hover, .fern-pattern-generator form .form-checkbox span:focus {
  border-color: #a12314;
}
.fern-pattern-generator form .form-checkbox input:checked + span {
  color: #fff;
  background-color: #a12314;
  border-color: #a12314;
}
.fern-pattern-generator form .form-checkbox input {
  overflow: hidden;
  position: absolute;
  left: 0;
  height: 0 !important;
  width: 14px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.fern-pattern-generator .js-copy-text {
  font-family: "InputSansNarrow";
  font-weight: 700;
  font-size: 1rem;
  line-height: 1;
  color: #a12314;
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  padding: 0.5rem 1.5rem 0.75rem;
  margin-top: 1rem;
}
.fern-pattern-generator .js-copy-text:hover, .fern-pattern-generator .js-copy-text:focus {
  border-color: #a12314;
}
.fern-pattern-generator .js-copy-text {
  /*@media screen and (min-width: $sm) {
    font-size: 1.25rem;
  }*/
}
.fern-pattern-generator .js-pattern {
  font-family: "FernOrnaments-Regular";
  font-size: 1rem;
  line-height: 1;
  color: #a12314;
  overflow: hidden;
  padding-bottom: 1rem;
  margin: 0 0 2rem;
}
@media screen and (min-width: 320px) {
  .fern-pattern-generator .js-pattern {
    font-size: 1.5rem;
  }
}
@media screen and (min-width: 375px) {
  .fern-pattern-generator .js-pattern {
    font-size: 1.75rem;
  }
}
@media screen and (min-width: 640px) {
  .fern-pattern-generator .js-pattern {
    font-size: 2rem;
    text-align: center;
  }
}

/* IN-USE SECTION:
-------------------------------------------------------------- */
.in-use .wrapper {
  padding: 2rem 1rem 3rem;
}
@media screen and (min-width: 640px) {
  .in-use .wrapper {
    padding: 6rem 6rem 8rem;
  }
}
.in-use .h-subheading {
  color: #fff;
  margin-bottom: 0;
}
.in-use .h-link {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 400, "opsz" 10;
  font-size: 1rem;
  line-height: 1.414;
  text-align: center;
  color: #fff;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px) {
  .in-use .h-link {
    margin-top: -4rem;
    margin-bottom: 4rem;
  }
}
.in-use .h-link a {
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.1875em;
}
.in-use .h-link a:hover, .in-use .h-link a:focus {
  color: #ce7c7d;
}
.in-use .grid {
  position: relative;
}
.in-use .grid:before, .in-use .grid:after {
  content: "";
  display: block;
  position: absolute;
}
.in-use .grid:before {
  border-top: 1px solid #1d1d1d;
  top: -1rem;
  right: -1rem;
  left: -1rem;
  height: 1px;
  z-index: 1;
}
.in-use .grid:after {
  border-left: 1px solid #1d1d1d;
  top: -1rem;
  bottom: -1rem;
  left: -1rem;
  width: 1px;
}
.in-use .grid a div {
  font-family: "FernVariable-Italic-VF";
  font-variation-settings: "wght" 400, "opsz" 10;
  font-variant-ligatures: discretionary-ligatures;
  font-size: 1rem;
  line-height: 1.414;
}
.in-use .grid > div {
  position: relative;
}
.in-use .grid > div:before, .in-use .grid > div:after {
  content: "";
  display: block;
  position: absolute;
}
.in-use .grid > div:before {
  background: #111;
  border-bottom: 1px solid #1d1d1d;
  top: -1rem;
  right: -1rem;
  bottom: -1rem;
  left: -1rem;
}
.in-use .grid > div:after {
  content: "";
  display: block;
  border-right: 1px solid #1d1d1d;
  top: -1px;
  right: -1rem;
  bottom: -1rem;
  width: 1px;
}

/* BUY SECTION: COLOR
-------------------------------------------------------------- */
.buy .h-headline {
  font-family: "FernTitlingCaps-Regular";
  color: #a12314;
  text-align: center;
}

.packages {
  color: #a12314;
}
.packages .button-more,
.packages .license-info,
.packages .licensing-options a,
.packages .typeface-info a {
  color: #a12314;
}
.packages .individual-styles-label,
.packages .packages-label,
.packages .license-size-label,
.packages .button,
.packages .button-more:hover,
.packages .variable-font-button {
  background-color: #a12314;
}
.packages .license-info .license-tier,
.packages .license-info p.license-info-title,
.packages .button-more,
.packages #tester-input {
  border-color: #a12314;
}
.packages a.button[disabled], .packages a.button.disabled, .packages a.button:hover,
.packages button[disabled],
.packages button.disabled,
.packages button:hover,
.packages input[type=submit][disabled],
.packages input[type=submit].disabled,
.packages input[type=submit]:hover,
.packages input[type=reset][disabled],
.packages input[type=reset].disabled,
.packages input[type=reset]:hover,
.packages input[type=button][disabled],
.packages input[type=button].disabled,
.packages input[type=button]:hover {
  background-color: rgba(161, 35, 20, 0.3);
}
.packages .license-info .license-info-link.selected, .packages .license-info .license-info-link:hover,
.packages .license-info .license-tier.selected,
.packages .license-info .license-tier:hover {
  background-color: rgba(161, 35, 20, 0.2);
}
.packages .license-info input:checked + label .license-tier,
.packages .license-info input:checked + label.license-tier {
  background-color: rgba(161, 35, 20, 0.2);
}
.packages .license-info .license-info-link {
  background-color: rgba(161, 35, 20, 0.1);
}

} /* @layer page */