@layer page {
/* Bridged from the old static-named webfonts to the Gimlet variable font.
 * The old names encoded a cut: width + optical size + weight. We reproduce the
 * cut by pinning font-stretch (width) and font-weight on Gimlet.woff2.
 *   width (STAT wdth -> font-stretch): Normal 100, Narrow 88, Condensed 76, Compressed 64
 * Display is the bold-narrow cut (pin 700); text cuts keep a 400–700 range so bold
 * still resolves. Gimlet.woff2 carries wght+wdth+ital (no opsz axis), so Display/
 * Text/Micro differ only by width/weight here. Italic uses the ital axis, following
 * app/assets/stylesheets/fonts.css. */

@font-face { /* GimletDisplayNarrow-Bold */
  font-family: "GimletDisplayWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 700;
  font-stretch: 88%;
  font-display: swap;
}

@font-face { /* GimletText — Normal width */
  font-family: "GimletTextWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GimletTextWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100%;
  font-style: italic;
  font-variation-settings: "ital" 1;
  font-display: swap;
}

@font-face { /* GimletTextNarrow — 88% */
  font-family: "GimletTextNarrowWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 88%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GimletTextNarrowWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 88%;
  font-style: italic;
  font-variation-settings: "ital" 1;
  font-display: swap;
}

@font-face { /* GimletTextCondensed — 76% */
  font-family: "GimletTextCondWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 76%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GimletTextCondWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 76%;
  font-style: italic;
  font-variation-settings: "ital" 1;
  font-display: swap;
}

@font-face { /* GimletTextCompressed — 64% */
  font-family: "GimletTextCompWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 64%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GimletTextCompWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 64%;
  font-style: italic;
  font-variation-settings: "ital" 1;
  font-display: swap;
}

@font-face { /* GimletMicro — Normal width, small-opsz cut */
  font-family: "GimletMicroWeb";
  src: url("Gimlet.woff2") format("woff2");
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
}

/* Input UI/mono substituted with Gimlet Sans / Gimlet Sans Mono (Input not shipped). */
@font-face {
  font-family: "InputSansNarrowWeb";
  src: url("GimletSans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "InputMonoNarrowWeb";
  src: url("GimletSansMono[opsz,slnt,wght]_BETA.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* $base-font-size * 0.875 */
/* #775180 */
/*$brand-color: #666;*/
/*
$buy-color: lighten($brand-color, 72%);
$buy-text-color: $brand-color;
*/
/**
 * Reset some basic elements
 */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
hr,
dl,
dd,
ol,
ul,
figure {
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Prevent font scaling in landscape while allowing user zoom */
}

/**
 * Basic styling
 */
body {
  font: 400 15px / 1.5 "GimletTextNarrowWeb";
  font-display: swap;
  color: #40230c;
  background-color: #FFF;
  -webkit-text-size-adjust: 100%;
  -webkit-font-feature-settings: "kern" 1;
  -moz-font-feature-settings: "kern" 1;
  -o-font-feature-settings: "kern" 1;
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/**
 * Set `margin-bottom` to maintain vertical rhythm
 */
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
ul,
ol,
dl,
figure {
  margin-bottom: 1rem;
}

/**
 * Images
 */
img {
  max-width: 100%;
  vertical-align: middle;
}

/**
 * Figures
 */
figure > img {
  display: block;
}

figcaption {
  font-size: 0.8rem;
}

/**
 * Lists
 */
ul,
ol {
  margin-left: 2rem;
}

li > ul,
li > ol {
  margin-bottom: 0;
}

/**
 * Headings
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
}

/**
 * Links
 */
a {
  color: #174B6D;
  text-decoration: none;
}
a:hover {
  color: #40230c;
}

/**
 * Blockquotes
 */
blockquote {
  color: #828282;
  border-left: 4px solid #e8e8e8;
  padding-left: 1rem;
  font-size: 18px;
  /*letter-spacing: -1px;*/
  font-style: italic;
}
blockquote > :last-child {
  margin-bottom: 0;
}

/**
 * Code formatting
 */
pre,
code {
  font-family: "InputMonoNarrowWeb";
  /*border: 1px solid $grey-color-light;*/
  /*border-radius: 3px;*/
  color: #174B6D;
  background-color: rgb(252.45, 252.45, 252.45);
  font-size: 95%;
}

code {
  padding: 0 0.25em 0.1em 0.25em;
}

pre {
  padding: 8px 12px;
  overflow-x: auto;
}
pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
}

/**
 * Wrapper
 */
.wrapper {
  position: relative;
  max-width: -webkit-calc(65rem - (2rem * 2));
  max-width: calc(65rem - 2rem * 2);
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
  /*@extend %clearfix;*/
  /*
    @include media-query($on-laptop) {
        max-width: -webkit-calc(65rem - (2rem));
        max-width:         calc(65rem - (2rem));
        padding-right: $spacing-unit / 2;
        padding-left: $spacing-unit / 2;
    }
    */
}

/*
.wrapper * {
    grid-column: auto / span 6;
}

.wrapper * * {
    grid-column: auto;
}
*/
/**
 * Clearfix
 */
/**
 * Icons
 */
.icon > svg {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.icon > svg path {
  fill: #828282;
}

/* sliders */
input[type=range] {
  -webkit-appearance: none;
  margin: 6.5px 0;
  width: 2.5in;
}
input[type=range]:focus {
  outline: 0;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #cccccc;
}
input[type=range]:focus::-ms-fill-lower {
  background: #CCC;
}
input[type=range]:focus::-ms-fill-upper {
  background: #cccccc;
}
input[type=range]::-webkit-slider-runnable-track {
  cursor: pointer;
  height: 1px;
  transition: all 0.2s ease;
  width: 2.5in;
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid transparent;
  border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid white;
  border-radius: 13px;
  cursor: pointer;
  height: 13px;
  width: 13px;
  -webkit-appearance: none;
  margin-top: -6px;
}
input[type=range]::-moz-range-track {
  cursor: pointer;
  height: 1px;
  transition: all 0.2s ease;
  width: 2.5in;
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid transparent;
  border-radius: 0;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid white;
  border-radius: 13px;
  cursor: pointer;
  height: 13px;
  width: 13px;
}
input[type=range]::-ms-track {
  cursor: pointer;
  height: 1px;
  transition: all 0.2s ease;
  width: 2.5in;
  background: transparent;
  border-color: transparent;
  border-width: 6.5px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #cccccc;
  border: 0 solid transparent;
  border-radius: 0;
}
input[type=range]::-ms-fill-upper {
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid transparent;
  border-radius: 0;
}
input[type=range]::-ms-thumb {
  box-shadow: 0 0 0 transparent, 0 0 0 rgba(12.75, 12.75, 12.75, 0);
  background: #CCC;
  border: 0 solid white;
  border-radius: 13px;
  cursor: pointer;
  height: 13px;
  width: 13px;
  margin-top: 0;
}

#logo {
  padding: 0;
  margin: 0;
  height: 5em;
  width: 5em;
  background: #FFF;
  /*padding: 1.7em .5em .5em .5em;*/
  padding: 0.5em;
}

#logo.center {
  margin-left: auto;
  margin-right: auto;
}

#logo.left {
  margin-right: auto;
  margin-left: 0;
}

#logo.right {
  margin-left: auto;
}

#logo .logo-primary {
  fill: rgb(106.9473684211, 58.4868421053, 20.0526315789);
}

#logo .logo-secondary {
  fill: #174B6D;
}

#logo .logo-primary:hover {
  fill: rgb(149.8947368421, 81.9736842105, 28.1052631579);
}

#logo .logo-secondary:hover {
  fill: rgb(31.8863636364, 103.9772727273, 151.1136363636);
}

.border {
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
}

section {
  padding-bottom: 2.5em;
  padding-top: 2.5em;
  clear: both;
  border-top: 0.5px solid #e8e8e8;
  border-bottom: 0.5px solid #e8e8e8;
}

section:first-child {
  border-top: none;
}

section:last-child {
  border-bottom: none;
}

section.infobar + section.font-entry {
  border: none;
}

.pagination {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-weight: normal;
}

.brand {
  background: #174B6D;
  color: #FFF;
}
.brand a {
  color: #FFF !important;
}

.reverse {
  background: #40230c;
  color: #FFF;
}
.reverse a {
  color: #FFF !important;
}

.infobar #logo {
  float: left;
  margin-right: 2em;
}

#logo {
  position: absolute;
  top: 3.7em;
  right: 1.4em;
  background: none;
}

.infobar {
  padding-top: 2em;
  padding-bottom: 2em;
}

.wrapper {
  padding-left: calc(env(safe-area-inset-left));
  padding-right: calc(env(safe-area-inset-right));
}

.wrapper section:first-child {
  padding-top: 0;
  border-top: none;
}
.wrapper section:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.infobar {
  background: #174B6D;
  color: #FFF;
  border: 0;
  padding-bottom: 1.5em;
}
.infobar a {
  color: rgb(36.3295454545, 118.4659090909, 172.1704545455);
  text-decoration: none !important;
}
.infobar a:hover {
  color: rgb(69.2045454545, 157.8409090909, 215.7954545455);
}

.infobar h1 {
  margin: 0;
  margin-top: 0.05em;
  line-height: 1em;
  font-size: 6em;
  text-align: left;
  padding: 0 0 0.03em 0;
  overflow: visible;
  font-weight: normal;
}
.infobar h1 a {
  color: #FFF !important;
}
.infobar h1 a:hover {
  color: rgb(229.5, 229.5, 229.5) !important;
}

h2 {
  font-family: "GimletDisplayWeb";
  font-size: 2.5em;
  font-weight: bold;
  margin: 2rem 0;
  line-height: 1.2em;
}
h2 a {
  text-decoration: none !important;
}

h2:first-child {
  margin-top: 0.25em;
}

h2.subtitle {
  margin: 0;
  padding: 0;
  font-size: 0.75em;
}

main h3,
main .subhead {
  font-family: "GimletTextNarrowWeb";
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.9em;
  font-weight: 600;
  font-weight: bold;
}
main h3 a,
main .subhead a {
  text-decoration: none;
}

.video-wrapper {
  position: relative;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 */
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

article {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 2.5rem;
}

.post-header {
  grid-column: auto/span 2;
  min-width: 9rem;
}

.post-content {
  grid-column: 3/span 4;
}

.big .post-header {
  grid-column: auto/span 1;
}

.big .post-content {
  grid-column: 2/span 5;
}

.sc {
  font-feature-settings: "smcp" 1;
}

h3 {
  margin: 2rem 0 1rem 0;
}

h4 {
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  padding: 0;
  margin-top: 3em;
}

.buy {
  display: inline-block;
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.buy,
.subnav {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: inherit;
  min-width: 20em;
}
.buy li,
.subnav li {
  display: inline-block;
  margin: 0 0 0 1em;
}
.buy a,
.subnav a {
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.65rem;
  padding: 0;
}

.subnav {
  text-align: right;
}

#post-list-link {
  position: absolute;
  right: 1rem;
  top: 0;
}

a.button,
button,
input[type=submit],
input[type=reset],
input[type=button],
#post-list-link a,
.video-button {
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
  padding: 0.75em 1.25em;
  text-decoration: none;
  display: inline-block;
  margin-right: 2em;
}
a.button[disabled], a.button.disabled,
button[disabled],
button.disabled,
input[type=submit][disabled],
input[type=submit].disabled,
input[type=reset][disabled],
input[type=reset].disabled,
input[type=button][disabled],
input[type=button].disabled,
#post-list-link a[disabled],
#post-list-link a.disabled,
.video-button[disabled],
.video-button.disabled {
  opacity: 0.4;
}

h2 + .post-fotmc-links {
  margin-top: -2rem;
  margin-bottom: 2rem;
}

a.note-button {
  font-family: "InputSansNarrowWeb";
  font-size: 1rem;
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: normal;
  text-decoration: none;
  text-align: center;
  color: #fff;
  vertical-align: middle;
  background-color: #8a9611;
  border: 1px solid #8a9611;
  border-radius: 0.15em;
  display: inline-block;
  width: auto;
  cursor: pointer;
  padding: 0.5rem 1rem;
  margin: 0.75rem 0.25rem 0 0;
}
a.note-button:hover {
  color: #fff;
  background-color: #757f0e;
  border-color: #757f0e;
}
a.note-button--outline {
  color: #8a9611;
  background-color: #fff;
  border: 1px solid #8a9611;
}

a.video-button {
  margin: 0 0.25rem;
  background: #FFF;
  color: #174B6D;
  display: inline;
  padding: 0.2rem 0.4rem;
  border: 1px solid #174B6D;
  vertical-align: top;
}
a.video-button:hover {
  color: rgb(14.1136363636, 46.0227272727, 66.8863636364);
  background-color: #FFF;
}

#post-list-link a {
  border: 1px solid;
}

main p,
main ul,
main ol {
  margin: 0.8em 0;
  padding: 0;
  max-width: 65rem;
  font-size: 17px;
  line-height: 1.5em;
  font-family: "GimletTextNarrowWeb";
}

main ul {
  list-style: square;
  margin: 0 1.25em;
}
main a {
  text-decoration: none;
  color: rgb(27.4431818182, 89.4886363636, 130.0568181818);
}
main a:hover {
  /*text-decoration: underline;*/
  color: rgb(18.5568181818, 60.5113636364, 87.9431818182);
}

.leftcol {
  margin-top: 1rem;
  grid-column: auto/span 2;
}
.leftcol img {
  width: 100%;
  max-width: 25rem;
  object-fit: contain;
}

.rightcol {
  margin-top: 1rem;
  grid-column: auto/span 4;
}

main h2.p-name a {
  color: #000;
}

.post-content figure,
figure.inline {
  margin: 3rem 0;
}
.post-content figure figcaption,
figure.inline figcaption {
  margin: 0.5rem 0;
}

.lightborder {
  border: 1px solid #eee;
}

.darkborder {
  border: 1px solid #111;
}

article figure {
  margin: 0.5em 0;
}

article .leftcol figure {
  margin: 0;
  margin-left: auto;
  margin-right: auto;
}

figure p {
  max-width: inherit;
}

.optical-edge,
.fill {
  max-width: 114.5%;
  width: 114.5%;
  margin-left: -7.25%;
}

/*main section div.wrapper,*/
main section,
.font-entry {
  overflow: hidden;
}

.font-entry figure > a {
  text-align: center;
  display: block;
}

figcaption {
  font-style: italic;
  font-size: 17px;
  color: #174B6D;
}

.contact-email:hover {
  opacity: 0.75;
}

.social-list {
  position: absolute;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  left: 50%;
  top: 20%;
  list-style: none;
}

.bug {
  position: absolute;
  margin: -0.2em 0.2em;
  width: 1em;
  color: #174B6D !important;
}

.brand-color {
  fill: #174B6D !important;
  background-color: #174B6D;
}

h2.sub {
  margin: 0;
  padding: 0;
}

.tags {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tags li {
  display: inline;
}

.post-meta,
.post-link,
.page-navigation {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-size: 0.8rem !important;
  text-decoration: none !important;
}

.page-navigation {
  display: block;
  width: auto;
  overflow: hidden;
}
.page-navigation a {
  display: block;
  width: 50%;
  float: left;
  margin: 1em 0;
  text-decoration: none;
}
.page-navigation .next {
  text-align: right;
}

dl {
  /*overflow: auto;*/
  font-family: "GimletMicroWeb";
}

dl:after {
  content: "";
  display: block;
  clear: left;
}

dt {
  float: left;
  clear: left;
  font-weight: bold;
  width: 30%;
  min-width: 10em;
}

dd {
  float: left;
  margin-right: 1em;
  /* Margin work */
  vertical-align: top;
  min-width: 15em;
}

dt,
dd {
  padding-bottom: 1em;
  line-height: 1.5em;
}

dt:after {
  content: ":";
}

dl ul,
dl li {
  font-size: 1rem;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

dl.post-list dt:after {
  content: none;
}
dl.post-list dt {
  font-weight: normal;
  text-align: right;
  margin-right: 1em;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  line-height: 200%;
}
dl.post-list dd {
  font-weight: normal;
}

main #product-display ul.font-list {
  margin-right: 5em;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-size: 1em;
}

#new-products-dropdown {
  /*float: right;*/
}

.remove-button,
.add-button {
  position: absolute;
  margin-left: -2em;
  margin-top: 0.25em;
  font-size: 1em;
  line-height: 0.75em;
  color: rgb(40.7727272727, 132.9545454545, 193.2272727273);
  border-radius: 1em;
  height: 1em;
  width: 1em;
  text-align: center;
  vertical-align: center;
  border: 1px solid rgb(40.7727272727, 132.9545454545, 193.2272727273);
}
.remove-button:hover,
.add-button:hover {
  border-color: #174B6D;
  color: #174B6D;
}

.checkout-promo {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  background: #174B6D;
  color: #fff;
  border-radius: 0.5em;
  padding: 1em;
  display: block;
  margin-left: auto;
  margin-right: 0;
  margin-top: 0;
  font-size: 0.78rem;
  margin-bottom: 2em;
  font-family: InputSansNarrowWeb;
  max-width: 18em;
  float: right;
}

#specs h3 {
  margin-top: 2em;
  margin-bottom: 1em;
  padding: 0.5em 0;
  font-family: "GimletMicroWeb";
}

.accordion-toggle {
  cursor: pointer;
}

.accordion-content {
  display: none;
}

.accordion-content.default {
  display: block;
}

table {
  /*border-collapse: collapse;*/
  border-spacing: 0;
  width: 100%;
  border: 1px solid #efefef;
}

table td,
table th {
  border: 1px solid #efefef;
  padding: 0.5em;
  margin: 0;
}
table td a,
table th a {
  text-decoration: none;
}

table th {
  text-align: left;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  padding: 1em;
  margin: 0;
}

table.pricing td.tier {
  font-size: 1.5em;
  line-height: 1em;
  font-weight: bold;
}

.licensing-tiers-desktop {
  display: block;
}

.licensing-tiers-mobile {
  display: none;
}

table.pricing {
  border-left: none;
  border-right: none;
  border-top: none;
}

table.pricing th {
  border-top: none;
}

table.pricing td:first-child,
table.pricing th:first-child {
  border-left: none;
}

table.pricing td:last-child,
table.pricing th:last-child {
  border-right: none;
}

.packages {
  margin: 0;
  position: relative;
  color: #174B6D;
}
.packages p {
  text-transform: none;
  letter-spacing: 0;
}
.packages h3 {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  font-size: 0.7rem;
  line-height: 1em;
  margin-top: 2em;
}
.packages .button {
  color: #FFF;
  letter-spacing: 0.1em;
  text-decoration: none;
  background-color: #174B6D;
  border: none;
  display: block;
  position: relative;
  cursor: pointer;
  padding: 0.75em 1.25em;
  margin-right: 0;
  margin-bottom: 0;
}
.packages .button:hover {
  color: #FFF;
  background-color: rgb(31.8863636364, 103.9772727273, 151.1136363636);
}
.license-info input:checked + label .license-tier,
.license-info input:checked + label.license-tier, .license-info .license-tier.selected {
  border-color: #174B6D;
  background-color: #FFF;
  position: relative;
}
.license-info input:checked + label .license-tier .license-info-title,
.license-info input:checked + label.license-tier .license-info-title, .license-info .license-tier.selected .license-info-title {
  border-bottom: 1px solid #174B6D;
}
.license-info input:checked + label .license-tier .license-info-title::after,
.license-info input:checked + label.license-tier .license-info-title::after, .license-info .license-tier.selected .license-info-title::after {
  content: " ←";
}

.license-info {
  color: #174B6D;
}
@media screen and (min-width: 50rem) {
  @supports (display: grid) {
    .license-info .license-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-column-gap: 1rem;
    }
    .license-info .license-grid--free {
      grid-template-columns: repeat(2, 1fr);
    }
  }
}
.license-info .license {
  position: relative;
  margin: 1rem 0 0;
}
.license-info .license-tier {
  box-sizing: border-box;
  font-family: "InputSansNarrowWeb";
  color: #174B6D;
  text-transform: none;
  text-decoration: none;
  letter-spacing: 0;
  border: 1px solid rgb(239.7, 239.7, 239.7);
  display: block;
  height: 100%;
  padding-bottom: 2.5em;
}
.license-info .license-tier > * {
  padding: 0 1.25rem;
}
.license-info .license-tier p, .license-info .license-tier li {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  line-height: 1.6em;
}
.license-info .license-tier .license-tier-details {
  margin-top: 1em;
}
.license-info .license-tier:hover {
  border: 1px solid #174B6D;
}
.license-info .license-tier:hover .license-info-title {
  border-bottom: 1px solid #174B6D;
}
.license-info p {
  margin: 1em 0 0;
}
.license-info p.license-info-title {
  font-size: 0.8rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: none;
  letter-spacing: -0.025em;
  border-bottom: 1px solid rgb(239.7, 239.7, 239.7);
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  margin-top: 0;
  margin-bottom: 0.5em;
}
.license-info input {
  position: absolute;
  left: -1000rem;
}
.license-info input:checked {
  background: #f00;
}
.license-info .license-info-link {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-weight: bold;
  line-height: 1.6em;
  background-color: rgba(23, 75, 109, 0.05);
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 0.5em 1.25rem;
  margin: 0;
}
.license-info .license-info-link a {
  color: inherit;
  text-decoration: underline;
}

ul.license-tier-details {
  list-style: none;
  word-spacing: -0.1em;
  margin: 1em 0 0 0;
}
ul.license-tier-details li {
  padding: 0;
  line-height: 1rem;
}
ul.license-tier-details li.share {
  float: left;
  margin-right: 2em;
}
ul.license-tier-details li strong {
  font-size: 1rem;
  font-weight: bold;
  display: block;
  word-spacing: -0.2em;
  letter-spacing: -0.025em;
  margin-bottom: 0em;
}
ul.license-tier-details li + li {
  margin-top: 0.5em;
}

#tester-input {
  width: calc(100% - 1rem - 2px);
  border: 1px solid #174B6D;
  font-family: "InputSansNarrowWeb";
  padding: 0.5rem;
  display: block;
  font-size: 2rem;
  margin-right: 1em;
  letter-spacing: -0.06em;
  word-spacing: -0.1em;
}

.style-sample,
.style-sample a,
.style-sample a:hover {
  /*color: darken($brand-color, 10%);*/
  color: #000;
}

.individual-styles-label,
.packages-label,
.license-size-label {
  margin-top: 3em !important;
  background: #174B6D;
  color: #FFF;
  padding: 1em 2em;
}

.package {
  color: #174B6D;
  /*border-radius: 1em;*/
  clear: both;
  position: relative;
  overflow: hidden;
  border: 1px solid;
  padding-right: 0;
  margin: 2.5em 0;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
}
.package .buy-form {
  margin: 0;
  padding-left: 1.5rem;
  padding-top: 1rem;
  padding-bottom: 2em;
  display: block;
  text-decoration: none;
}
.package .buy-form:hover {
  /*background-color: lighten($buy-text-color, 67%);*/
  color: #174B6D;
}
.package .package-title {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}
.js .package.minimized {
  max-height: 24em;
}
.package .style-count,
.package .tier,
.package .perstyle {
  text-transform: none;
  letter-spacing: 0;
  font-size: 1.1em;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.2em;
}
.package .tier,
.package .perstyle {
  margin-top: -0.5em;
  line-height: 1.2em;
  display: block;
  text-align: left;
}
.package .perstyle {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: "InputSansNarrowWeb";
}
.package .perstyle + .tier {
  margin-top: 1em;
}
.package {
  /*
    .tier:after {
        content: " License";
    }
    */
}
.package .style-count {
  display: inline-block;
  margin-left: 1em;
}
.package .license-info {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.package .buy-checkbox {
  display: inline-block;
  position: absolute;
  height: 1em;
  padding-left: 16px;
}
.package .buy-checkbox span {
  background-color: inherit;
  border: 1px solid #000;
  position: absolute;
  width: 14px;
  height: 14px;
  top: 50%;
  left: 0;
  margin: -8px 0 0;
}
.package .buy-checkbox input[type=checkbox]:checked + span:after {
  content: "";
  background: #000;
  position: absolute;
  width: 10px;
  height: 10px;
  top: 50%;
  left: 2px;
  margin: -5px 0 0;
}
.package .buy-checkbox input[type=checkbox] {
  position: absolute;
  left: -10000px;
}

.package-font-pack .buy-checkbox {
  position: relative;
  top: 0.1em;
  margin-right: 0.25em;
}

.post-meta + .sidebar {
  padding-bottom: 2rem;
}

.post-meta .button {
  background-color: #174B6D;
  width: 100%;
  color: #FFF;
  text-decoration: none;
  display: block;
  position: relative;
  padding: 0.75em;
  letter-spacing: 0.1em;
  border: none;
  text-align: center;
}
.post-meta .button:hover {
  background-color: rgb(31.8863636364, 103.9772727273, 151.1136363636);
  color: #FFF;
}
.button-more,
.button-less {
  font-size: 1.2rem;
  line-height: 1.4rem;
  text-decoration: none;
  text-align: center;
  color: #174B6D;
  background-color: white;
  border: 1px solid #174B6D;
  border-bottom: none;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  display: block;
  cursor: pointer;
  position: absolute;
  width: 4em;
  height: 1.4rem;
  bottom: 0;
  left: calc(50% - 2em);
  padding: 0;
  margin-left: auto;
  margin-right: auto;
}
.button-more:hover,
.button-less:hover {
  color: #174B6D;
  background-color: rgb(229.5, 229.5, 229.5);
}

.buy-panel {
  line-height: 0.5rem;
  text-align: right;
  word-spacing: -0.2em;
  position: absolute;
  right: 0.75em;
  top: 0.75em;
  padding: 0;
}
.buy-panel:after {
  content: "";
  display: table;
  clear: both;
}

.price,
.per-style {
  font-size: 2.2em !important;
  font-family: "GimletTextNarrowWeb" !important;
  letter-spacing: -0.015em !important;
}

.variable-font-button {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  color: #FFF;
  background: #174B6D;
  text-transform: uppercase;
  padding: 0.2em;
  padding-left: 0.3em;
  margin-right: 0.5em;
  line-height: inherit;
  display: inline-block;
}

.italic-discount {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-size: 0.75rem;
  display: block;
  line-height: 1rem;
}

.price-block {
  padding: 0;
  position: relative;
  line-height: 2.2em;
  float: left;
  display: block;
  margin-right: 1rem;
}

.js-buy-now {
  display: inline-block;
  float: right;
}

.package .tier {
  text-align: right;
  display: block;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  line-height: 1.5em;
  margin-left: 0.2em;
  margin-right: 0.2em;
}

.package-display {
  margin: 0;
  margin-left: -0.1em;
  margin-top: 1em;
  list-style: none;
  padding: 0;
}
.package-display li {
  clear: both;
  margin: 0;
  padding: 0.25rem 0;
  line-height: 0;
  white-space: nowrap;
}
.package-display li:hover {
  background: white;
}

.individual-styles li {
  clear: both;
  position: relative;
  padding: 0.25rem 0;
  margin: 0;
  vertical-align: middle;
}
.individual-styles li + li {
  margin-top: 0.1em;
}
.individual-styles li:hover {
  background: rgb(244.8, 244.8, 244.8);
}
.individual-styles input[type=checkbox] {
  position: absolute;
  font-size: inherit;
  left: 0.1em;
  margin: 0;
  padding: 0;
  top: 30%;
  vertical-align: middle;
}
.individual-styles input[type=checkbox] + label,
.individual-styles .buy-checkbox + label {
  display: block;
  padding: 0;
  padding-left: 1.75rem;
  position: relative;
  white-space: nowrap;
  line-height: 1em;
}
.individual-styles:checked + label {
  /* background-color: darken($buy-color, 10%); */
}

.style-label {
  display: block;
  color: #bbb;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  line-height: 1em;
  margin: 0;
  padding-top: 3px;
}

ul.variable-axes {
  list-style: none;
  padding-left: 0.5rem;
  clear: both;
}
ul.variable-axes li {
  line-height: 100%;
  padding: 0;
  margin: 0;
  clear: both;
  padding: 0.1em 0;
}
ul.variable-axes label {
  position: relative;
  display: block;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  width: 50%;
  max-width: 15em;
  float: left;
  margin-right: 6em;
}
ul.variable-axes label::after {
  content: attr(data-val);
  position: absolute;
  right: 0;
  font-weight: bold;
  color: inherit;
  opacity: 1;
}
ul.variable-axes input[type=range] {
  /*border: 1px solid green;*/
  top: 0.15rem;
  position: relative;
  display: block;
  margin-left: 4em;
  margin-right: 2em;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  line-height: 100%;
}
ul.variable-axes input[type=range]::before, ul.variable-axes input[type=range]::after {
  position: absolute;
  top: -0.6em;
  /*this is relative to the track line*/
  font-size: 85%;
  line-height: inherit;
  font-weight: normal;
}
ul.variable-axes input[type=range]::before {
  content: attr(min);
  right: calc(100% + 0.5em);
}
ul.variable-axes input[type=range]::after {
  content: attr(max);
  left: calc(100% + 0.5em);
}

.licensing-options {
  font-family: "InputSansNarrowWeb";
  font-size: 0.75rem;
  line-height: 180%;
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}
.licensing-options li {
  margin: 0.25em 0;
  margin-left: 0;
  padding-left: 0;
}
.licensing-options a {
  text-decoration: none;
  color: #174B6D;
}
.licensing-options a:after {
  content: " »";
}

.typeface-info {
  font-family: "InputSansNarrowWeb";
  font-size: 0.75rem;
  line-height: 1.8;
  list-style: none;
  padding: 0;
  margin: 0 0 1em;
}
.typeface-info li {
  margin: 0.25em 0;
}
.typeface-info a {
  text-decoration: none;
  color: #174B6D;
}
.typeface-info a:after {
  content: " »";
  speak: never;
}
.typeface-info dl {
  font-family: "InputSansNarrowWeb";
  margin: 1em 0;
}
.typeface-info .type-network-link,
.typeface-info .fontstand-link,
.typeface-info .typekit-link {
  margin-top: 1em;
  margin-bottom: 1em;
}
.typeface-info .type-network-link strong:after,
.typeface-info .fontstand-link strong:after,
.typeface-info .typekit-link strong:after {
  content: " »";
  speak: never;
}
.typeface-info .type-network-link span,
.typeface-info .fontstand-link span,
.typeface-info .typekit-link span {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  display: block;
  line-height: 1em;
}
.typeface-info .type-network-link a:after,
.typeface-info .fontstand-link a:after,
.typeface-info .typekit-link a:after {
  content: none;
}
.typeface-info .type-network-link a:hover img,
.typeface-info .fontstand-link a:hover img,
.typeface-info .typekit-link a:hover img {
  opacity: 1;
}
.typeface-info .type-network-link img,
.typeface-info .fontstand-link img,
.typeface-info .typekit-link img {
  opacity: 0.8;
  height: 2em;
  float: left;
  margin-right: 0.5em;
  padding-top: 0.5em;
}

.tooltip {
  display: none;
  position: absolute;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid rgb(244.8, 244.8, 244.8);
  padding: 1em;
  font-family: "InputSansNarrowWeb";
  width: 15em;
  font-size: 0.65rem;
}

.photo-credit {
  margin: -0.5rem 0 1rem 0;
  padding: 0;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-style: normal;
}

.order-form dt.for-license,
.order-form dt.for-physical,
.order-form dt.for-discount {
  display: none;
}
.order-form dt.for-license + dd,
.order-form dt.for-physical + dd,
.order-form dt.for-discount + dd {
  display: none;
}
.order-form.has-license dt.for-license, .order-form.has-physical dt.for-physical, .order-form.has-discount dt.for-discount {
  display: block;
}
.order-form.has-license dt.for-license + dd, .order-form.has-physical dt.for-physical + dd, .order-form.has-discount dt.for-discount + dd {
  display: block;
}
.order-form dl {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
}
.order-form dd span {
  font-size: 0.75rem;
}
.order-form dt {
  display: block;
  float: left;
  clear: left;
  margin-top: 1.2em;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  line-height: 1.2rem;
  overflow: hidden;
  width: 15em;
}
.order-form dt:after {
  content: none;
}
.order-form dt.required:after {
  content: "*";
  color: #ff0000;
}
.order-form #show-discount {
  color: #ff0000;
  margin-top: 0.25em;
  line-height: 1.2em;
}
.order-form dd {
  display: block;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  font-size: 0.75rem;
  margin-top: 1em;
  line-height: 1.2rem;
  min-width: calc(320px - 3em);
}
.order-form li {
  line-height: 1rem;
}
.order-form .description,
.order-form label[for] {
  display: block;
  max-width: 30em;
  margin-top: 1em;
}
.order-form .license-description {
  display: inline-block;
  vertical-align: top;
  padding-top: 0;
  margin-top: 0;
  font-size: 0.75rem;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  margin-left: 2em;
}
.order-form .license-description p {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
}
.order-form .license-description .license-tier {
  display: none;
  border: none;
  padding: 0;
  margin: 0;
}
.order-form .license-description .license-tier > * {
  margin: 0;
  padding: 0;
}
.order-form .license-description .license-tier .license-tier-details {
  margin-top: 1em;
}
.order-form .license-description li {
  font-size: 0.75rem;
  line-height: 1.2rem;
  color: #40230c;
  white-space: nowrap;
  padding: 0.5em 0;
}
.order-form .license-description li span {
  display: inline;
  line-height: 1rem;
}
.order-form .license-description p {
  font-size: 0.75rem;
}
.order-form .license-description p:first-child {
  padding-top: 0;
  margin-top: 0;
}
.order-form .license-description .dont-make-me-come-over-there {
  font-weight: bold;
  color: #C40000;
  padding-bottom: 1em;
}
.order-form .license-description .for-use-not-exceeding {
  color: #000;
}
.order-form .fotm-back-issue-price::before {
  content: "$";
}
.order-form input,
.order-form select,
.order-form textarea {
  font-size: 0.75rem;
  padding: 0.25em;
  line-height: 1em;
  border: 1px solid rgb(31.8863636364, 103.9772727273, 151.1136363636);
  font-family: "InputSansNarrowWeb";
}
.order-form textarea {
  width: 25em;
  height: 5em;
  line-height: 1.4;
}
.order-form select {
  width: 10em;
}
.order-form input[type=text] {
  width: 20em;
}
.order-form button {
  background-color: #174B6D;
  color: #FFF;
  text-decoration: none;
  display: block;
  padding: 0.75em 1.25em;
  border: none;
  text-align: right;
  letter-spacing: 0.1em;
}
.order-form button:hover {
  background-color: rgb(31.8863636364, 103.9772727273, 151.1136363636);
  color: #FFF;
}
#activation-form #activated-products strong,
#activation-form #activated-products ul {
  display: none;
}
#activation-form #activated-products.success strong,
#activation-form #activated-products.success ul {
  display: block;
}

.big-button,
.medium-button {
  display: block;
  width: 60%;
  min-width: 10rem;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
  box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
  text-align: center;
  background: #174B6D;
  color: #FFF;
  text-decoration: none;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 1.5em;
  font-size: 1.5rem;
  border: 3px solid #efefef;
}
.big-button:hover,
.medium-button:hover {
  background: rgb(31.8863636364, 103.9772727273, 151.1136363636);
  color: #FFF;
}

.medium-button {
  font-size: 1rem;
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

#order-complete-download-button {
  background: #cc0000;
  width: 60%;
  min-width: 10rem;
}

#order-complete-download-button:hover {
  background: #aa0000;
}

#download-link {
  font-size: 1rem;
  font-family: "InputSansNarrowWeb";
}

#order-complete-message .for-physical,
#order-complete-message .for-license {
  display: none;
}
#order-complete-message.has-physical p.for-physical {
  display: block;
}
#order-complete-message.has-physical span.for-physical {
  display: inline;
}
#order-complete-message.has-license p.for-license {
  display: block;
}
#order-complete-message.has-license span.for-license {
  display: inline;
}

.pdf-preview {
  float: left;
  display: block;
  margin-right: 2em;
  margin-bottom: 1em;
  max-width: 12em;
  margin-top: 0.5em;
}
.pdf-preview img {
  border: 1px solid black;
}
.pdf-preview a {
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.pdf-preview.big {
  max-width: 16em;
}

.wrapper {
  padding-left: calc(env(safe-area-inset-left) + 2rem);
  padding-right: calc(env(safe-area-inset-right) + 2rem);
}

@media screen and (max-width: 50rem) {
  .wrapper {
    padding-left: calc(env(safe-area-inset-left) + 1.25rem);
    padding-right: calc(env(safe-area-inset-right) + 1.25rem);
  }
  .post-header {
    grid-column: auto/span 1;
  }
  .post-content {
    grid-column: 3/span 5;
  }
  .post-header.no-shrink {
    grid-column: auto/span 2;
  }
  .post-content.no-shrink {
    grid-column: 3/span 4;
  }
  ul.license-tier-details li.share {
    float: none;
    margin-right: 0;
  }
  .infobar h1 {
    font-size: 4em;
    z-index: 2;
  }
}
@media screen and (max-width: 40rem) {
  article {
    display: block;
  }
  body {
    font-family: "GimletTextNarrowWeb";
  }
  .wrapper {
    padding-left: calc(env(safe-area-inset-left) + 1.5rem);
    padding-right: calc(env(safe-area-inset-right) + 1.5rem);
  }
  h2 {
    font-family: "GimletDisplayWeb";
    font-size: 2em;
  }
  .infobar h1 {
    font-size: 3.25em;
    z-index: 2;
  }
  #logo {
    width: 4em;
    height: 4em;
    padding: 0.4em;
  }
  .buy {
    float: none;
  }
  .subnav {
    text-align: left;
  }
  .subnav li {
    margin-left: 0;
    margin-right: 2em;
    margin-top: 1em;
  }
  .title {
    display: none;
  }
  .license-info td {
    display: block;
    width: 100%;
    margin-bottom: 1em;
  }
  .license-info ul li span {
    display: inline;
  }
  .package .style-count {
    display: none;
  }
  .package .buy-panel {
    position: relative;
    top: 0;
    margin-top: 1.5em;
    padding-left: 0.5em;
    margin-bottom: 0;
  }
  .package .package-display {
    margin-top: 0em;
  }
  .package .buy-form {
    /*padding-left: 8.5em;*/
    padding-left: 1.5em;
  }
  .package .perstyle {
    display: inline;
  }
  dt {
    width: auto;
    padding-bottom: 0;
  }
  .licensing-tiers-desktop {
    display: none;
  }
  .licensing-tiers-mobile {
    display: block;
  }
  .order-form .license-description {
    float: none;
    margin: 0;
    margin-top: 1em;
  }
  .checkout-promo {
    float: none;
  }
  ul.variable-axes input[type=range] {
    clear: both;
    margin-left: 0;
  }
  ul.variable-axes input[type=range]::before {
    display: none;
  }
  ul.variable-axes input[type=range]::after {
    display: none;
  }
  ul.variable-axes label {
    width: 90%;
    display: block;
    max-width: 100%;
    float: none;
    margin-bottom: 0.5em;
  }
}
main #fotm-add-on {
  font-family: "InputSansNarrowWeb";
  font-weight: normal;
  text-transform: none;
  text-align: left !important;
  letter-spacing: -0.025em !important;
  word-spacing: -0.1em;
  position: relative;
  display: block;
  max-width: 25em;
  font-size: 102%;
  right: 0;
  border-radius: 0.3rem;
  line-height: 1.5em;
  margin-top: 1rem;
  border: 1px solid rgb(27.4431818182, 89.4886363636, 130.0568181818);
  background: linear-gradient(to bottom, rgb(240, 240, 240) 0%, rgb(250, 250, 250) 100%);
  color: #000;
}
main #fotm-add-on:hover {
  color: #000;
  background: linear-gradient(to bottom, rgb(230, 230, 230) 0%, rgb(240, 240, 240) 100%);
}

.infinite-spinner {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  background-color: #333;
  margin: 60px auto;
  -webkit-animation: scaleout 1s infinite ease-in-out;
  animation: scaleout 1s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
  0% {
    -webkit-transform: scale(0);
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@keyframes scaleout {
  0% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }
  100% {
    transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0;
  }
}
@media screen and (max-width: 20em) {
  .infobar h1 {
    font-size: 3em;
    z-index: 2;
  }
  .wrapper {
    padding-left: calc(env(safe-area-inset-left) + 1rem);
    padding-right: calc(env(safe-area-inset-right) + 1rem);
  }
  body {
    font-family: "GimletTextCondWeb";
  }
  .rightcol {
    min-width: 1em;
  }
  #fotm-add-on {
    position: relative;
    margin: 1em 0;
  }
}
.use-grid {
  display: grid;
  width: 100%;
  margin-top: 2em;
  position: relative;
  text-align: left;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1em;
}
.use-grid .use-case {
  display: block-block;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0;
}

#in-use h2 {
  margin-bottom: 0.25rem;
}

#in-use h2 + h4 {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  font-family: "InputSansNarrowWeb" !important;
  padding-left: 0.2em;
}

main #in-use .use-case {
  position: relative;
}
main #in-use .use-case .use-name {
  text-transform: none;
  font-weight: normal;
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  letter-spacing: 0;
  font-style: normal;
  position: absolute;
  color: #FFF;
  background: #40230c;
  display: none;
  left: 0;
  bottom: 0;
  padding: 0.5em 1em;
  text-align: left;
}
main #in-use .use-case .use-name cite {
  font-style: normal;
}
main #in-use .use-case a:hover .use-name {
  display: block;
}
main #in-use .use-case a:hover img {
  opacity: 0.8;
}

@media screen and (max-width: 50rem) {
  .use-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media screen and (max-width: 40rem) {
  .use-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* -------------------------------------------------------------- 

HEADER STYLES

-------------------------------------------------------------- */
.site-header {
  font-family: "InputSansNarrowWeb";
  font-size: 0.65rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  word-spacing: -0.1em;
  color: #FFF;
  background: #174B6D;
  position: relative;
  z-index: 100;
}

.site-header .site-title {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

.site-header nav {
  position: relative;
  padding: 0.5rem 0;
}

.site-header #nav-container {
  padding-top: 0.1rem;
}
@media (min-width: 800px) {
  .site-header #nav-container {
    display: flex;
    justify-content: space-between;
  }
}

.site-header ul {
  list-style: none;
  margin: 2em 0;
}
@media (min-width: 800px) {
  .site-header ul {
    margin: 0;
  }
}
.site-header ul ul {
  margin: 0 0 2em;
}

@media (min-width: 800px) {
  .js .site-header ul ul {
    background-color: #174B6D;
    position: absolute;
    min-width: 12rem;
    left: -0.75rem;
    padding: 0 0.75rem 0.75rem;
    margin: 0;
  }
}

.site-header ul li ul.indent {
  position: static;
  padding: 0;
  padding-left: 0.75em;
}

.js .site-header ul ul.hidden {
  position: absolute;
  left: -1000rem;
}

.site-header #main-nav {
  list-style-type: none;
  padding: 0;
}
.js .site-header #main-nav {
  position: absolute;
  left: -10000px;
}
.js.main-nav-open .site-header #main-nav {
  position: relative;
  left: 0;
}

@media (min-width: 800px) {
  .site-header #main-nav,
  .js .site-header #main-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    left: 0;
    margin-top: 0;
  }
}

.site-header #main-nav > li {
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  margin: 1.5em 0;
}
@media (min-width: 800px) {
  .site-header #main-nav > li {
    padding-left: 1em;
    margin: 0 0 0 1em;
  }
}
.site-header #main-nav > li.account, .site-header #main-nav > li.cart {
  text-transform: none;
  letter-spacing: normal;
}

.site-header li li {
  word-spacing: -0.15em;
  line-height: 1.2em;
  letter-spacing: 0;
  text-transform: none;
  padding: 0;
  margin: 0.9em 1em;
}
.site-header li li.fotmc {
  display: inline-block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 0.5em;
  margin-bottom: 0;
}
@media (min-width: 800px) {
  .site-header li li.fotmc {
    display: block;
  }
}

.site-header nav a {
  color: #fff;
}
@media (min-width: 800px) {
  .site-header nav a {
    display: block;
  }
}
.site-header nav a:hover {
  opacity: 0.6;
}

.js .js-main-nav-toggle {
  position: absolute;
  left: -10000px;
}
@media (max-width: 799px) {
  .js .js-main-nav-toggle {
    cursor: pointer;
    top: 0;
    right: 0;
    left: auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0.625rem calc(env(safe-area-inset-right) + 1.5rem) 0 0;
  }
  .js .js-main-nav-toggle:hover {
    opacity: 0.6;
  }
}

.js .js-nav-sub-list.js-closed ul {
  position: absolute;
  left: -10000px;
}

.js .js-nav-sub-list-toggle {
  cursor: pointer;
}
.js .js-nav-sub-list-toggle:after {
  content: " ×";
  speak: none;
  opacity: 0.6;
}
.js .js-nav-sub-list-toggle:hover {
  opacity: 0.6;
}
.js .js-nav-sub-list-toggle:hover:after {
  opacity: 1;
}

.js .js-closed .js-nav-sub-list-toggle:after {
  content: " +";
}

footer {
  padding: 2rem 0;
  font-family: "InputSansNarrowWeb";
  background: #174B6D;
  color: #FFF;
  border-bottom: 1.7em solid #174B6D;
}

.site-footer a {
  color: rgb(31.8863636364, 103.9772727273, 151.1136363636);
}
.site-footer a:hover {
  color: rgb(40.7727272727, 132.9545454545, 193.2272727273);
}

.footer-heading {
  margin-bottom: 1em;
}

.footer-col-wrapper {
  font-size: 12px;
  line-height: 160%;
  padding: 1rem;
}

.footer-col {
  margin-top: 1rem;
  min-width: 10rem;
  margin-right: 1rem;
  min-width: 10rem;
}

.footer-col-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  min-width: 10rem;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer #footer-name a,
.site-footer .footer-col h3 a {
  color: inherit;
}

.footer-col-wrapper h3 {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0;
  margin: 0;
}

@media screen and (max-width: 40rem) {
  .footer-col-wrapper {
    display: block;
  }
}
/* IMAGE FITTING */
figure {
  overflow: hidden;
}

.fitimg, .cropimg {
  padding: 0 !important;
  position: relative;
}

.fitimg figure {
  padding: 0;
}

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

.cropimg figure {
  max-height: 30em;
  height: inherit;
}

.cropimg img {
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  min-width: 100em;
  width: 100%;
}

figcaption {
  color: #00a79d;
  font-size: 0.85em;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-style: normal;
}

#title {
  max-height: 25em;
  height: 25em;
}

#title figure,
#title img {
  max-height: 25em;
  height: 25em;
}

#dingbats {
  max-height: 10em;
  height: 10em;
}

#dingbats figure,
#dingbats img {
  max-height: 10em;
  height: 10em;
}

main .try-buy-pdf-wrapper {
  text-align: center;
  background: #174B6D;
  width: 100%;
  padding: 0.75rem 0;
}

.try-buy-pdf a.button,
.try-buy-pdf input.button {
  font-family: "GimletMicroWeb";
  font-size: 14px;
  font-style: normal;
  font-weight: bold;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  border: none;
  background: #df6e36;
  display: inline-block;
  outline: 0;
  cursor: pointer;
  padding: 0.6em 1em 0.4em;
  margin: 0 0.25em;
  -moz-appearance: none;
  -webkit-appearance: none;
}
.try-buy-pdf a.button:hover, .try-buy-pdf a.button:focus,
.try-buy-pdf input.button:hover,
.try-buy-pdf input.button:focus {
  color: #fff;
  background: #4fa49d;
}

#schadow-specimen figure, #schadow-italics-specimen figure {
  border-top: 1px solid #edead8;
  border-bottom: 1px solid #edead8;
}

#display-widths-specimen img {
  height: none;
  min-height: none;
  max-height: 30em;
  width: auto !important;
  min-width: 50em;
  max-width: none;
}

#widths-specimen figure {
  background: #DCBC25;
  max-height: 30em;
}
#widths-specimen img {
  width: 100%;
  min-width: 50em;
  height: none;
  max-height: none;
  min-height: none;
}

.caption {
  background: #FFD939;
  font-style: italic;
}
.caption p {
  padding: 0.5em 2em;
}

.factoid .caption {
  margin-top: -4em;
}

.caption .subhead {
  color: #174B6D !important;
  font-style: normal;
}

main p {
  max-width: 48rem;
}

#intro p {
  font-size: 1.8rem !important;
  line-height: 1.4em !important;
  font-family: "GimletTextNarrowWeb";
  letter-spacing: -0.02em;
  max-width: 65rem;
}

h2 {
  font-size: 3.5em;
  font-family: "GimletDisplayWeb";
  font-weight: normal;
  color: #174B6D;
  margin-bottom: 1rem;
  margin-top: 1rem;
}

section {
  border: 0;
}

#buy-link {
  padding: 0.4em 0;
  background: #174B6D;
  display: block !important;
  float: none;
  color: #FFF;
}
#buy-link a {
  color: #FFF;
  text-decoration: none;
}
#buy-link a:hover {
  color: rgb(153.4318181818, 201.8863636364, 233.5681818182);
}

.border {
  border-top: 1px solid #174B6D;
  border-bottom: 1px solid #174B6D;
}

.site-footer a {
  color: rgb(90.2613636364, 168.8522727273, 220.2386363636);
}
.site-footer a:hover {
  color: rgb(132.375, 190.875, 229.125);
}

.site-footer #footer-name a, .site-footer #footer-name a:hover {
  color: #background-color !important;
}

#charset .case {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
  display: block;
}
#charset p {
  font-family: GimletTextWeb;
  letter-spacing: -0.025em;
  font-size: 30px;
  margin: 0;
  padding: 0;
}
#charset h4 {
  margin: 0;
  margin-top: 1em;
  padding: 0;
}
#charset h3 {
  font-size: 0.65rem;
  font-family: "InputSansNarrowWeb";
  word-spacing: -0.15em;
}
#charset .c2sc {
  -moz-font-feature-settings: "c2sc" 1;
  -ms-font-feature-settings: "c2sc" 1;
  -o-font-feature-settings: "c2sc" 1;
  -webkit-font-feature-settings: "c2sc" 1;
  font-feature-settings: "c2sc" 1;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .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;
}
#charset .ss05 {
  -moz-font-feature-settings: "ss05" 1;
  -ms-font-feature-settings: "ss05" 1;
  -o-font-feature-settings: "ss05" 1;
  -webkit-font-feature-settings: "ss05" 1;
  font-feature-settings: "ss05" 1;
}
#charset .ss06 {
  -moz-font-feature-settings: "ss06" 1;
  -ms-font-feature-settings: "ss06" 1;
  -o-font-feature-settings: "ss06" 1;
  -webkit-font-feature-settings: "ss06" 1;
  font-feature-settings: "ss06" 1;
}
#charset .ss07 {
  -moz-font-feature-settings: "ss07" 1;
  -ms-font-feature-settings: "ss07" 1;
  -o-font-feature-settings: "ss07" 1;
  -webkit-font-feature-settings: "ss07" 1;
  font-feature-settings: "ss07" 1;
}
#charset .ss08 {
  -moz-font-feature-settings: "ss08" 1;
  -ms-font-feature-settings: "ss08" 1;
  -o-font-feature-settings: "ss08" 1;
  -webkit-font-feature-settings: "ss08" 1;
  font-feature-settings: "ss08" 1;
}
#charset .ss09 {
  -moz-font-feature-settings: "ss09" 1;
  -ms-font-feature-settings: "ss09" 1;
  -o-font-feature-settings: "ss09" 1;
  -webkit-font-feature-settings: "ss09" 1;
  font-feature-settings: "ss09" 1;
}
#charset .ss10 {
  -moz-font-feature-settings: "ss10" 1;
  -ms-font-feature-settings: "ss10" 1;
  -o-font-feature-settings: "ss10" 1;
  -webkit-font-feature-settings: "ss10" 1;
  font-feature-settings: "ss10" 1;
}
#charset .c2sc.ss07 {
  -moz-font-feature-settings: "c2sc" 1, "ss07" 1;
  -ms-font-feature-settings: "c2sc" 1, "ss07" 1;
  -o-font-feature-settings: "c2sc" 1, "ss07" 1;
  -webkit-font-feature-settings: "c2sc" 1, "ss07" 1;
  font-feature-settings: "c2sc" 1, "ss07" 1;
}
#charset .c2sc.ss08 {
  -moz-font-feature-settings: "c2sc" 1, "ss08" 1;
  -ms-font-feature-settings: "c2sc" 1, "ss08" 1;
  -o-font-feature-settings: "c2sc" 1, "ss08" 1;
  -webkit-font-feature-settings: "c2sc" 1, "ss08" 1;
  font-feature-settings: "c2sc" 1, "ss08" 1;
}

@media screen and (max-width: 40rem) {
  #intro p {
    font-size: 1.2rem !important;
    line-height: 1.5em;
    letter-spacing: none;
    word-spacing: none;
    margin: 1em 0;
  }
  h2 {
    font-size: 2rem !important;
    font-family: "GimletTextCompWeb";
    margin-top: 0em;
  }
  main section {
    padding: 1em 0;
  }
  .intro {
    padding: 3em 0;
  }
  #title {
    max-height: 15em;
    height: 15em;
  }
  #title figure,
  #title img {
    max-height: 15em;
    height: 15em;
  }
}
@media screen and (max-width: 20em) {
  #intro p {
    font-size: 1rem !important;
  }
}

} /* @layer page */