@charset "UTF-8";
/* Set custom properties for layout and sizing */
:root {
  --content-width: 88vw;
  --margin-left: auto;
  --margin-right: auto;
}
@media screen and (min-width: 60em) {
  :root {
    --content-width: 58rem;
    --margin-left: calc(((100vw - var(--content-width)) / 2) * 1);
    --margin-right: calc(((100vw - var(--content-width)) / 2) * 1);
  }
}
@media screen and (min-width: 75em) {
  :root {
    --content-width: 70rem;
  }
}

/* Colors */
:root {
  --color-white: #ffffff;
  --color-gray: #4d4d4d;
  --color-dark-gray: #333333;
  --color-light-gray: #e6e6e6;
  --color-blue: #14218c;
  --color-purple: #5407a2;
  --color-red: #ff0000;
  --color-green: #00ff7b;
  --color-background: var(--color-white);
  --color-background-accent: var(--color-light-gray);
  --color-text: var(--color-dark-gray);
  --color-a-link: var(--color-red);
  --color-a-visited: var(--color-red);
  --color-a-hover: #ff0000;
  --color-a-focus: #ff0000;
  --color-a-active: #ff0000;
  --color-text-accent: #594747;
  --window-topper-background: #00ff7b;
  --footer-background: #ff0000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Fonts */
/* No web fonts specified for Serif */
:root {
  --fonts-base-serif: Georgia, Times New Roman, Times, serif;
  --fonts-base-sans: Helvetica, Arial, sans-serif;
  --fonts-serif-static: Georgia, Times New Roman, Times, serif;
  --fonts-sans-static: Proxima Nova, Helvetica, Arial, sans-serif;
  --fonts-serif: Georgia, Times New Roman, Times, serif;
  --fonts-sans: Proxima Vara, Helvetica, Arial, sans-serif;
}

:root {
  /* Font ranges */
  --font-wght-low: 100;
  --font-wght-mid: 400;
  --font-wght-high: 900;
  --font-wdth-low: 50;
  --font-wdth-mid: 85;
  --font-wdth-high: 100;
  --font-ital-low: 0;
  --font-ital-mid: 0;
  --font-ital-high: 125;
}

/* Text sizing */
/* Set base text size for all calcs */
/* Preprocessed for fallbacks */
/* Change px values here for all font sizing */
/* Font size rem values (needed for dynamic sizing) */
/* Font sizes in rems */
/* Line-height */
/* Custom props for modern browsers */
:root {
  --p-size-s-value: 1;
  --p-size-m-value: 1.125;
  --p-size-l-value: 1.25;
  --h1-size-s-value: 2.25;
  --h1-size-m-value: 3.5;
  --h1-size-l-value: 4.5;
  --h2-size-s-value: 1.5;
  --h2-size-m-value: 1.625;
  --h2-size-l-value: 1.75;
  --h3-size-s-value: 1.25;
  --h3-size-m-value: 1.375;
  --h3-size-l-value: 1.5;
  --bq-size-s-value: 1.25;
  --bq-size-m-value: 1.375;
  --bq-size-l-value: 1.5;
  --p-size-s: 1rem;
  --p-size-m: 1.125rem;
  --p-size-l: 1.25rem;
  --h1-size-s: 2.25rem;
  --h1-size-m: 3.5rem;
  --h1-size-l: 4.5rem;
  --h2-size-s: 1.5rem;
  --h2-size-m: 1.625rem;
  --h2-size-l: 1.75rem;
  --h3-size-s: 1.25rem;
  --h3-size-m: 1.375rem;
  --h3-size-l: 1.5rem;
  --bq-size-s: 1.25rem;
  --bq-size-m: 1.375rem;
  --bq-size-l: 1.5rem;
  --p-lh-s: 1.1;
  --p-lh-m: 1.125;
  --p-lh-l: 1.2;
  --h1-lh-s: 1.05;
  --h1-lh-m: 1.1;
  --h1-lh-l: 1.15;
  --h2-lh-s: 1;
  --h2-lh-m: 1.04;
  --h2-lh-l: 1.07;
  --h3-lh-s: 1.1;
  --h3-lh-m: 1.15;
  --h3-lh-l: 1.2;
}

/* Responsive text-size spacer */
:root {
  --body-text-spacer: 1rem;
}
@media screen and (min-width: 42em) {
  :root {
    --body-text-spacer: 1.125rem;
  }
}
@media screen and (min-width: 60em) {
  :root {
    --body-text-spacer: 1.25rem;
  }
}

:root {
  --p-font-wght: 385;
  --h2-font-wght: 825;
}

:root {
  --osLightMode: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --osLightMode: dark;
  }
}

/* Proxima Nova Static Fonts */
/* Standard Regular, Semibold */
@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: normal;
  src:
    url('../fonts/proxima_nova/Proxima_Nova_Regular.woff2') format('woff2'),
    url('../fonts/proxima_nova/Proxima_Nova_Regular.woff') format('woff');
}

@font-face {
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: bold;
  src:
    url('../fonts/proxima_nova/Proxima_Nova_Semibold.woff2') format('woff2'),
    url('../fonts/proxima_nova/Proxima_Nova_Semibold.woff') format('woff');
}

/* Proxima Vara */
@font-face {
  font-family: 'Proxima Vara';
  font-weight: 100 900;
  /* default 400 */
  font-stretch: 50% 100%;
  /* default 100% */
  src:
    url('../fonts/ProximaVara.woff2') format('woff2 supports variations'),
    url('../fonts/ProximaVara.woff2') format('woff2-variations');
  font-display: swap;
  /* italic: 0 125 (default 0) */
}

.visually-hidden:not(:focus):not(:active) {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  /* added line */
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Base typography */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--color-background);
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-family: var(--fonts-sans-static);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0;
  padding: 0;
}
@supports (font-variation-settings: normal) {
  body {
    font-family: var(--fonts-sans);
  }
  .wf-inactive body {
    font-family: var(--fonts-base-sans);
  }
}

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

table {
  border-collapse: collapse;
}
table td + td {
  padding-left: 1rem;
}

h1 {
  color: #333333;
  color: var(--color-text);
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-family: var(--fonts-sans-static);
  font-size: 4rem;
  font-weight: 300;
  margin: 2rem 0 0 0;
  margin-top: calc(var(--body-text-spacer) * 2);
  position: relative;
}
@supports (font-variation-settings: normal) {
  h1 {
    font-family: var(--fonts-sans);
    font-weight: 250;
  }
  .wf-inactive h1 {
    font-family: var(--fonts-base-sans);
    font-weight: normal;
    letter-spacing: 0.015em;
  }
}

h1 + p {
  margin-top: calc(var(--body-text-spacer) * 3);
}

h2 {
  color: #333333;
  color: var(--color-text);
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-family: var(--fonts-sans-static);
  font-size: 1.5rem;
  font-size: var(--h2-size-s);
  font-weight: 900;
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  line-height: 1;
  line-height: var(--h2-lh-s);
  margin: 2rem 0 0 0;
  max-width: 88vw;
  max-width: var(--content-width);
  position: relative;
}
@supports (font-variation-settings: normal) {
  h2 {
    font-family: var(--fonts-sans);
    font-weight: var(--h2-font-wght);
    font-stretch: 81%;
  }
  .wf-inactive h2 {
    font-family: var(--fonts-base-sans);
    font-weight: normal;
  }
}
@media screen and (min-width: 42em) {
  h2 {
    font-size: 1.625rem;
    font-size: var(--h2-size-m);
    line-height: 1.04;
    line-height: var(--h2-lh-m);
    max-width: 58rem;
    max-width: var(--content-width);
  }
}
@media screen and (min-width: 60em) {
  h2 {
    font-size: 1.75rem;
    font-size: var(--h2-size-l);
    line-height: 1.07;
    line-height: var(--h2-lh-l);
    max-width: 70rem;
    max-width: var(--content-width);
  }
}

h2 + p {
  margin-top: calc(var(--body-text-spacer) * 1);
}

h3 {
  color: #333333;
  color: var(--color-text);
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-family: var(--fonts-sans-static);
  font-size: 1.25rem;
  font-size: var(--h3-size-s);
  font-variant-ligatures: common-ligatures discretionary-ligatures;
  font-weight: 600;
  line-height: 1.1;
  line-height: var(--h3-lh-s);
  margin: 2rem 0 0 0;
  max-width: 88vw;
  max-width: var(--content-width);
  position: relative;
}
@supports (font-variation-settings: normal) {
  h3 {
    font-family: var(--fonts-sans);
    font-weight: 575;
  }
}
.wf-inactive h3 {
  font-family: var(--fonts-base-sans);
  font-weight: bold;
}
@media screen and (min-width: 42em) {
  h3 {
    font-size: 1.375rem;
    font-size: var(--h3-size-m);
    line-height: 1.15;
    line-height: var(--h3-lh-m);
    max-width: 58rem;
    max-width: var(--content-width);
  }
}
@media screen and (min-width: 60em) {
  h3 {
    font-size: 1.5rem;
    font-size: var(--h3-size-l);
    line-height: 1.2;
    line-height: var(--h3-lh-l);
    max-width: 70rem;
    max-width: var(--content-width);
  }
}

h3 + p {
  margin-top: calc(var(--body-text-spacer) * 1);
}

p {
  color: #333333;
  color: var(--color-text);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.1;
  line-height: var(--p-lh-s);
  margin: 0;
  max-width: 88vw;
  max-width: var(--content-width);
  position: relative;
}
@supports (font-variation-settings: normal) {
  p {
    font-weight: var(--p-font-wght);
  }
  .wf-inactive p {
    font-family: var(--fonts-base-sans);
    font-weight: normal;
    letter-spacing: 0.0275em;
  }
}
@media screen and (min-width: 42em) {
  p {
    line-height: 1.125;
    line-height: var(--p-lh-m);
    max-width: 58rem;
    max-width: var(--content-width);
  }
}
@media screen and (min-width: 60em) {
  p {
    line-height: 1.2;
    line-height: var(--p-lh-l);
    max-width: 70rem;
    max-width: var(--content-width);
  }
}
p + p {
  margin-top: calc(var(--body-text-spacer) * 1);
}

strong {
  font-weight: 600;
}
@supports (font-variation-settings: normal) {
  strong {
    font-weight: 625;
  }
}

td {
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.1;
  line-height: var(--p-lh-s);
}
@media screen and (min-width: 42em) {
  td {
    line-height: 1.125;
    line-height: var(--p-lh-m);
  }
}
@media screen and (min-width: 60em) {
  td {
    line-height: 1.2;
    line-height: var(--p-lh-l);
  }
}

ul {
  color: #333333;
  color: var(--color-text);
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.1;
  line-height: var(--p-lh-s);
  margin: 0;
  max-width: 88vw;
  max-width: var(--content-width);
  padding-left: 1.25rem;
}
@media screen and (min-width: 42em) {
  ul {
    line-height: 1.125;
    line-height: var(--p-lh-m);
    max-width: 58rem;
    max-width: var(--content-width);
  }
}
@media screen and (min-width: 60em) {
  ul {
    line-height: 1.2;
    line-height: var(--p-lh-l);
    max-width: 70rem;
    max-width: var(--content-width);
  }
}
* + ul {
  margin-top: calc(var(--body-text-spacer) * 1);
}

li {
  margin-top: calc(var(--body-text-spacer) * 1);
}

a:link {
  color: #14218c;
  color: var(--color-a-link);
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.075em;
  text-decoration-skip-ink: auto;
  transition: all 0.2s ease;
}

a:visited {
  color: #5407a2;
  color: var(--color-a-visited);
  text-decoration: underline;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.075em;
  text-decoration-skip-ink: auto;
  transition: all 0.2s ease;
}

a:hover {
  color: #ff0000;
  color: var(--color-a-hover);
  text-decoration: underline;
}

@media (pointer: coarse) {
  a:hover {
    color: unset;
    text-decoration: unset;
  }
}

a:focus {
  color: #ff0000;
  color: var(--color-a-focus);
  text-decoration: underline;
}

a:active {
  color: #ff0000;
  color: var(--color-a-active);
  text-decoration: underline;
}

.bold {
  font-weight: 750;
}

.extra-bold {
  font-weight: 825;
}

.slant {
  font-variation-settings: 'ital' 125;
}

.red {
  color: #ff0000;
}

.green {
  color: #00ff7b;
}

.wide {
  font-stretch: 100%;
}

/* Top bar */
.top-bar {
  padding: 0 2vw;
  padding-top: 2rem;
  margin-bottom: calc(var(--body-text-spacer) * 2);
  width: 100vw;
}
.top-bar h1 {
  font-size: 16.5vw;
  line-height: 1;
}
.top-bar h1 .proxima {
  font-weight: 900;
  font-stretch: 100%;
}
.top-bar h1 .vara {
  font-weight: 100;
  font-stretch: 75%;
  font-variation-settings: 'ital' 125;
}

main {
  padding: 0 2vw;
}

a.info-button {
  display: block;
  height: 7rem;
  width: 7rem;
  background-color: #ff0000;
  border-radius: 50%;
  text-decoration: none;
  position: relative;
  z-index: 10;
}
@media screen and (min-width: 60em) {
  a.info-button {
    align-self: center;
    height: 15vw;
    width: 15vw;
  }
}
a.info-button:hover {
  background-color: #e60000;
  box-shadow: -1px -1px 0.25rem rgba(0, 0, 0, 0.5);
}
a.info-button > * {
  height: 7rem;
  width: 7rem;
  margin-top: -0.25rem;
}
@media screen and (min-width: 60em) {
  a.info-button > * {
    margin-top: -0.5vw;
    height: 15vw;
    width: 15vw;
  }
}

.cta .button-area a {
  margin-right: 0;
  margin-left: auto;
}

.logo .name {
  display: none;
}

/* Navigation */
.title-link {
  font-weight: 600;
}
@supports (font-variation-settings: normal) {
  .title-link {
    font-weight: 625;
  }
  .wf-inactive .title-link {
    font-weight: bold;
  }
}
.title-link:link,
.title-link:visited {
  text-decoration: none;
}
.title-link:hover {
  text-decoration: underline;
}
.title-link:focus {
  text-decoration: underline;
}
.title-link:active {
  text-decoration: underline;
}
@media (pointer: coarse) {
  .title-link:hover {
    text-decoration: unset;
  }
}

figure {
  margin: 0;
  padding: 0;
  max-width: 88vw;
  max-width: var(--content-width);
  width: 100%;
}
@media screen and (min-width: 42em) {
  figure {
    max-width: 58rem;
    max-width: var(--content-width);
  }
}
@media screen and (min-width: 60em) {
  figure {
    max-width: 70rem;
    max-width: var(--content-width);
  }
}
figure img {
  margin: 0;
  padding: 0;
}
figure.wide {
  margin-left: calc(var(--margin-left) / 2);
  margin-right: calc(var(--margin-left) / 2);
  max-width: calc(100vw - var(--margin-left));
  width: 100%;
}
figure.small {
  --figure-width: calc(var(--content-width) / 3);
  --centering-margin: calc(var(--content-width) / 3);
  width: var(--figure-width);
}
figure.medium {
  --figure-width: calc(var(--content-width) / 2);
  --centering-margin: calc(var(--content-width) / 4);
  width: var(--figure-width);
}
figure.large {
  max-width: var(--content-width);
  width: 100%;
}
figure.center {
  margin-left: calc(var(--margin-left) + var(--centering-margin));
}
figure.left {
  clear: left;
  float: left;
  margin-right: 1.5rem;
  margin-bottom: 1rem;
  margin-bottom: var(--body-text-spacer);
}
figure.right {
  clear: right;
  float: right;
  margin-left: 1.5rem;
  margin-right: var(--margin-right);
  margin-bottom: 1rem;
  margin-bottom: var(--body-text-spacer);
}
* + figure {
  margin-top: 1rem;
  margin-top: var(--body-text-spacer);
}

/* Blockquote styles */
blockquote {
  margin-bottom: var(--body-text-spacer);
}
* + blockquote {
  margin-top: var(--body-text-spacer);
}
blockquote p {
  font-size: 1.25rem;
  font-size: var(--bq-size-s);
  font-variant-ligatures: common-ligatures discretionary-ligatures;
}
.wf-inactive blockquote p {
  letter-spacing: 0;
  word-spacing: 0.05em;
}
.wf-inactive blockquote p em {
  letter-spacing: -0.0025em;
  word-spacing: -0.01em;
}
@media screen and (min-width: 42em) {
  blockquote p {
    font-size: 1.375rem;
    font-size: var(--bq-size-m);
  }
}
@media screen and (min-width: 60em) {
  blockquote p {
    font-size: 1.5rem;
    font-size: var(--bq-size-l);
  }
}
blockquote p:before {
  content: '“';
  margin-left: -0.5em;
}
blockquote p:after {
  content: '”';
}
blockquote.bq--inline p {
  display: inline;
  font-size: 1rem;
  font-size: var(--p-size-s);
  font-variant-ligatures: common-ligatures;
}
@media screen and (min-width: 42em) {
  blockquote.bq--inline p {
    font-size: 1.125rem;
    font-size: var(--p-size-m);
  }
}
@media screen and (min-width: 60em) {
  blockquote.bq--inline p {
    font-size: 1.25rem;
    font-size: var(--p-size-l);
  }
}
blockquote cite {
  font-size: 1rem;
  font-size: var(--p-size-s);
  font-style: italic;
}
@media screen and (min-width: 42em) {
  blockquote cite {
    font-size: 1.125rem;
    font-size: var(--p-size-m);
  }
}
@media screen and (min-width: 60em) {
  blockquote cite {
    font-size: 1.25rem;
    font-size: var(--p-size-l);
  }
}
blockquote cite:before {
  content: '—';
}

@media screen and (min-width: 42em) {
  article > h1 {
    margin-left: calc(var(--margin-left) / 2);
    margin-right: calc(var(--margin-left) / 2);
    max-width: calc(100vw - var(--margin-left));
  }
}

article figure + h1 {
  margin-top: 0.25rem;
  margin-top: calc(var(--body-text-spacer) * 0.25);
}

.portrait {
  margin: 0;
  padding: 0;
  text-align: center;
}
.portrait img {
  max-width: 100%;
}
.portrait figcaption {
  display: inline-block;
  font-family: var(--fonts-sans);
  font-size: 1rem;
  font-size: var(--p-size-s);
  font-stretch: 81%;
  font-weight: 815;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  text-align: center;
  text-transform: lowercase;
}
@media screen and (min-width: 42em) {
  .portrait figcaption {
    font-size: 1.125rem;
    font-size: var(--p-size-m);
  }
}
@media screen and (min-width: 60em) {
  .portrait figcaption {
    font-size: 1.25rem;
    font-size: var(--p-size-l);
  }
}

.window-topper {
  background-color: var(--window-topper-background);
  display: grid;
  grid-template-columns: 1fr;
  padding: 0.35rem 1.5vw;
  position: fixed;
  width: 100%;
  z-index: 999;
}
@media screen and (min-width: 42em) {
  .window-topper {
    grid-template-columns: 1fr 1fr;
    justify-content: space-between;
  }
}
.window-topper p {
  --p-size-s: 0.65rem;
  font-stretch: 50%;
  font-weight: 650;
  letter-spacing: -0.0125em;
  line-height: 1;
  margin: 0;
  padding: 0;
}
.window-topper .light-mode-prefs {
  justify-self: end;
}
.window-topper .light-mode-prefs > * {
  font-stretch: 65%;
  --p-size-s: 0.65rem;
}
.window-topper .light-mode-prefs > *:link,
.window-topper .light-mode-prefs > *:visited {
  color: var(--color-text);
}
.window-topper .light-mode-prefs .light-mode-switch:after {
  content: ' to dark mode';
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .window-topper .light-mode-prefs .light-mode-switch:after {
    content: ' to light mode';
  }
}
.dark .window-topper .light-mode-prefs .light-mode-switch:after {
  content: ' to light mode';
}

.intro {
  margin-bottom: 0;
}
@media screen and (min-width: 42em) {
  .intro {
    display: grid;
    grid-template-columns: 3fr 5fr;
    margin-bottom: calc(var(--body-text-spacer) * 4);
  }
}
.intro .button-area {
  float: left;
  margin-right: 1rem;
  shape-outside: circle();
}
.intro p {
  font-size: clamp(1.25rem, 2vw, 3rem);
  font-stretch: 85%;
}
@media screen and (min-width: 42em) {
  .intro p {
    margin-top: 0;
  }
}

.advantages__text {
  grid-area: advantages;
  margin-bottom: calc(var(--body-text-spacer) * 2);
}
@media screen and (min-width: 60em) {
  .advantages__text {
    padding-right: 2.5vw;
  }
}

.control-group {
  color: var(--color-text);
}

.examples {
  margin-bottom: calc(var(--body-text-spacer) * 4);
  clear: both;
  display: grid;
  grid-template-areas: 'matches' 'advantages' 'vhs';
}
@media screen and (min-width: 42em) {
  .examples {
    grid-template-areas: 'matches vhs' 'advantages vhs';
    grid-template-columns: 1fr 1fr;
  }
}
.examples__one {
  grid-area: matches;
  display: grid;
  grid-template-areas: 'matchbox' 'controls';
  grid-template-columns: 1fr;
  grid-template-rows: max-content auto auto;
}
.examples .matchbox-area {
  grid-area: matchbox;
}
.examples .matchbox-area figure {
  background: url(../../assets/images/matchbox.jpg);
  background-size: 100%;
}
.examples .matchbox-area figure img {
  opacity: 0;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .examples .matchbox-area figure {
    background-image: url(../../assets/images/matchbox-dark.jpg);
  }
}
.dark .examples .matchbox-area figure {
  background-image: url(../../assets/images/matchbox-dark.jpg);
}
.examples .control-panel {
  grid-area: controls;
}
.examples__two {
  grid-area: vhs;
}
.examples .vhs-area {
  max-width: 100%;
}
.examples .tester .control-group {
  grid-template-columns: 1fr;
  width: 20rem;
}
.examples .advantages__text {
  grid-area: advantages;
  margin-bottom: calc(var(--body-text-spacer) * 2);
}
@media screen and (min-width: 60em) {
  .examples .advantages__text {
    padding-right: 2.5vw;
  }
}

.matchbox {
  --tester-wght: 500;
  --tester-wdth: 85;
  --tester-ital: 0;
  margin-bottom: calc(var(--body-text-spacer) * 1);
  max-width: 30vw;
}
.matchbox-area {
  margin-left: 5vw;
  margin-right: 2.5vw;
  margin-top: calc(var(--body-text-spacer) * 4);
  position: relative;
}
.matchbox .big-three {
  align-items: center;
  color: #ff0000;
  display: flex;
  font-size: 16rem;
  font-stretch: calc(var(--tester-wdth) * 0.85 * 1%);
  font-weight: calc(min((var(--tester-wght) * 1.25), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  height: 62%;
  justify-content: center;
  left: 4%;
  line-height: 1;
  position: absolute;
  text-align: center;
  top: 2%;
  width: 78%;
}
@media screen and (min-width: 42em) {
  .matchbox .big-three {
    font-size: clamp(15rem, 25vw, 45rem);
    top: 1rem;
  }
}
.matchbox .on-a-match {
  align-items: center;
  display: flex;
  font-size: 1.5rem;
  font-stretch: calc(var(--tester-wdth) * 1%);
  font-weight: calc(min((var(--tester-wght) * 1.15), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  height: 66%;
  justify-content: center;
  left: 4%;
  letter-spacing: -0.175em;
  line-height: 1;
  position: absolute;
  text-align: center;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-transform: uppercase;
  top: 2%;
  width: 78%;
}
@media screen and (min-width: 42em) {
  .matchbox .on-a-match {
    font-size: clamp(1.25rem, 2.5vw, 4.5rem);
  }
}
.matchbox .control-group {
  padding-top: 1rem;
}

.vhs-tapes {
  --tester-wght: 500;
  --tester-wdth: 75;
  --tester-ital: 0;
  max-width: 100%;
}
.vhs-tapes-area {
  margin-bottom: calc(var(--body-text-spacer) * 1);
  position: relative;
}
.vhs-tapes figure {
  max-width: none;
}
.vhs-tapes .control-panel .control-group {
  margin-left: 2%;
}
.vhs-tapes .dubs {
  position: absolute;
  top: 65%;
  left: 22%;
  height: 20%;
  width: 56%;
  text-align: center;
  transform: rotate(180deg);
  writing-mode: vertical-rl;
  overflow: hidden;
}
.vhs-tapes .dubs > * {
  font-stretch: calc(var(--tester-wdth) * 0.75%);
  font-size: 16.75vw;
  font-weight: calc(min((var(--tester-wght) * 1.15), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  letter-spacing: -0.04em;
  line-height: 0.8;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .dubs > * {
    font-size: 8.25vw;
  }
}
.vhs-tapes .friends-tape {
  position: absolute;
  top: 24.75%;
  left: 38%;
  text-align: center;
  width: 23%;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .friends-tape {
    top: 25%;
  }
}
.vhs-tapes .friends-tape .friends {
  font-stretch: calc(var(--tester-wdth) * 1.25%);
  font-size: 3.15vw;
  font-weight: calc(min((var(--tester-wght) * 1.75), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 0.9;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .friends-tape .friends {
    font-size: 1.35vw;
  }
}
.vhs-tapes .friends-tape .seasons {
  font-stretch: calc(var(--tester-wdth) * 0.85%);
  font-size: 3.05vw;
  font-weight: calc(min((var(--tester-wght) * 1.5), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 0.9;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .friends-tape .seasons {
    font-size: 1.25vw;
  }
}
.vhs-tapes .friends-tape .numbers {
  font-stretch: calc(var(--tester-wdth) * 1%);
  font-size: 2.95vw;
  font-weight: calc(min((var(--tester-wght) * 1.15), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 1.5;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .friends-tape .numbers {
    font-size: 1.15vw;
  }
}
.vhs-tapes .cosmos-tape {
  position: absolute;
  top: 54.25%;
  left: 38%;
  text-align: center;
  width: 23%;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .cosmos-tape {
    top: 54.75%;
  }
}
.vhs-tapes .cosmos-tape .bh90210 {
  font-stretch: calc(var(--tester-wdth) * 1.25%);
  font-size: 3.15vw;
  font-weight: calc(min((var(--tester-wght) * 2), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 0.9;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .cosmos-tape .bh90210 {
    font-size: 1.35vw;
  }
}
.vhs-tapes .cosmos-tape .cosmos {
  font-stretch: calc(var(--tester-wdth) * 1.25%);
  font-size: 3.05vw;
  font-weight: calc(min((var(--tester-wght) * 1.85), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 0.9;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .cosmos-tape .cosmos {
    font-size: 1.25vw;
  }
}
.vhs-tapes .cosmos-tape .vh1 {
  font-stretch: calc(var(--tester-wdth) * 0.66%);
  font-size: 2.95vw;
  font-weight: calc(min((var(--tester-wght) * 1.85), var(--font-wght-high)));
  font-variation-settings: 'ital' var(--tester-ital);
  line-height: 01.5;
  text-transform: uppercase;
}
@media screen and (min-width: 42em) {
  .vhs-tapes .cosmos-tape .vh1 {
    font-size: 1.15vw;
  }
}

.tester .control-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  row-gap: 1rem;
  margin: 0 auto;
}
@media screen and (min-width: 60em) {
  .tester .control-group {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
  }
}
.tester .control-group .slider {
  display: grid;
  grid-template-columns: 6rem 1fr;
}
.tester .control-group .slider input[type='range'] {
  background-color: transparent;
}
.tester .control-group .slider input[type='range']::-moz-range-track {
  background-color: var(--color-text);
}
.tester .control-group .bold {
  font-stretch: 50%;
  font-weight: 850;
}
.tester .control-group .wide {
  font-stretch: 100%;
  font-weight: 425;
}
.tester .control-group .slant {
  font-variation-settings: 'ital' 125;
  font-weight: 750;
}

.word-testers {
  margin-top: 5rem;
  margin-left: calc(var(--margin-left) / 2);
  margin-right: calc(var(--margin-left) / 2);
  max-width: calc(100vw - var(--margin-left));
}

.word-tester-grid {
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 60em) {
  .word-tester-grid {
    grid-template-columns: repeat(9, [col-start] 1fr);
  }
}

.word-tester {
  --tester-wght: 450;
  --tester-wdth: 85;
  --tester-ital: 0;
  --tester-color: #000000;
  display: flex;
  flex-direction: column;
  position: relative;
}
.word-tester.human {
  --tester-wght: 625;
  --tester-color: var(--color-green);
  z-index: 10;
}
@media screen and (min-width: 60em) {
  .word-tester.human {
    grid-column: col-start / span 5;
    grid-row: 1 / span 5;
  }
}
.word-tester.comfort {
  --tester-color: #000000;
  --tester-wght: 250;
  --tester-wdth: 100;
  z-index: 5;
}
@media screen and (min-width: 60em) {
  .word-tester.comfort {
    flex-direction: column-reverse;
    grid-column: 5 / span 5;
    grid-row: 1 / span 5;
  }
}
.word-tester.comfort.tester .control-group {
  margin-bottom: 1rem;
}
@media screen and (min-width: 60em) {
  .word-tester.comfort.tester .control-group {
    margin-left: 50%;
    margin-top: 1rem;
  }
}
.word-tester.smart {
  --tester-color: var(--color-red);
  --tester-wdth: 65;
  z-index: 1;
}
@media screen and (min-width: 60em) {
  .word-tester.smart {
    grid-column: 4 / span 4;
    grid-row: 5 / span 5;
  }
}
.word-tester .widest {
  font-stretch: calc(var(--tester-wdth) * 2%);
}
.word-tester .wider {
  font-stretch: calc(var(--tester-wdth) * 1.5%);
}
.word-tester .narrower {
  font-stretch: calc(var(--tester-wdth) * 0.75%);
}
.word-tester .narrowest {
  font-stretch: calc(var(--tester-wdth) * 0.5%);
}
.word-tester .content {
  background-color: #ffffff;
  border: solid 1px #000000;
  border-bottom-width: 0.5rem;
  margin-bottom: 2rem;
}
.word-tester .content p {
  color: var(--tester-color);
  line-height: 1;
  margin: 1rem auto;
  max-width: calc(var(--tester-max-width) * 1em);
  font-weight: var(--tester-wght);
  font-stretch: calc(var(--tester-wdth) * 1%);
  font-variation-settings: 'ital' var(--tester-ital);
  font-size: 5rem;
  text-align: center;
}
@media screen and (min-width: 60em) {
  .word-tester .content p {
    font-size: 7rem;
  }
}
.word-tester.tester .control-group {
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
  margin-left: 2%;
  max-width: 50%;
  width: 20rem;
}

.type-tester {
  background-color: var(--device-background);
  flex-direction: column;
  justify-content: end;
  margin-top: 5rem;
  margin-left: calc(var(--margin-left) / 2);
  margin-right: calc(var(--margin-left) / 2);
  max-width: calc(100vw - var(--margin-left));
  --tester-wght: 400;
  --tester-wdth: 85;
  --tester-ital: 0;
  --tester-hdr-wght: 400;
  --tester-hdr-wdth: 85;
  --tester-hdr-ital: 0;
  --tester-byline-wght: 400;
  --tester-byline-wdth: 85;
  --tester-byline-ital: 0;
  --tester-max-width: 50;
  --tester-font-size: 1.5;
  --tester-line-height: 1.5;
}
.type-tester .content {
  background-color: var(--color-light-gray);
  border: solid 1px var(--color-text);
  height: 45rem;
  max-height: 70vh;
  margin-bottom: calc(var(--body-text-spacer) * 2);
  overflow: scroll;
  padding: 0 0.25rem 0.5rem 0.5rem;
}
.type-tester .content h2 {
  font-size: 2.65rem;
  font-stretch: calc(var(--tester-hdr-wdth) * 0.85%);
  font-weight: calc(
    min((var(--tester-hdr-wght) * 1.85), var(--font-wght-high))
  );
  font-variation-settings: 'ital' var(--tester-hdr-ital);
  margin: 1rem auto;
  max-width: calc(var(--tester-max-width) * 1rem);
}
.type-tester .content h3 {
  color: #ff0000;
  float: right;
  font-stretch: calc(var(--tester-byline-wdth) * 0.66%);
  font-weight: calc(
    min((var(--tester-byline-wght) * 1.5), var(--font-wght-high))
  );
  font-variation-settings: 'ital' var(--tester-byline-ital);
  max-width: calc(var(--tester-max-width) * 1rem);
  writing-mode: vertical-lr;
}
.type-tester .content p {
  line-height: var(--tester-line-height);
  margin: 2rem auto;
  max-width: calc(var(--tester-max-width) * 1rem);
  font-weight: var(--tester-body-wght);
  font-stretch: calc(var(--tester-body-wdth) * 1%);
  font-variation-settings: 'ital' var(--tester-body-ital);
  font-size: calc(var(--tester-font-size) * 1rem);
}
.type-tester .control-group {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
  column-gap: 4rem;
  row-gap: 1rem;
  margin: 0 auto;
  max-width: 96%;
}
@media screen and (min-width: 60em) {
  .type-tester .control-group {
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
  }
}
.type-tester .control-group > p {
  font-size: 1.5rem;
}
.type-tester .control-group .slider {
  display: grid;
  grid-template-columns: 6rem 1fr;
}
.type-tester .control-group .slider input[type='range'] {
  background-color: transparent;
}
.type-tester .control-group .slider input[type='range']::-moz-range-track {
  background-color: var(--color-text);
}

.about {
  align-items: end;
  margin-top: 5rem;
  margin-left: calc(var(--margin-left) / 2);
  margin-right: calc(var(--margin-left) / 2);
  max-width: calc(100vw - var(--margin-left));
  display: grid;
  grid-template-columns: 1fr;
}
@media screen and (min-width: 60em) {
  .about {
    grid-template-columns: 1fr;
  }
}
.about .photo {
  margin: 0 0 calc(var(--body-text-spacer) * 2) 0;
  max-width: 100%;
  padding: 0;
}
@media screen and (min-width: 60em) {
  .about .photo {
    margin-bottom: 0;
  }
}
.about .founder {
  display: grid;
  grid-template-columns: 8rem 1fr;
  align-items: bottom;
}
@media screen and (min-width: 60em) {
  .about .founder {
    padding-left: 5vw;
    grid-template-columns: 12rem 1fr;
  }
}
.about .headshot {
  height: 100%;
  max-height: 15rem;
  width: 100%;
}
.about .headshot figure {
  background-image: url(../../assets/images/MarkSimonson.png);
  background-size: 100%;
}
@media (prefers-color-scheme: dark) {
  html:not(.light) .about .headshot figure {
    background-image: url(../../assets/images/MarkSimonson-dark.png);
  }
}
.dark .about .headshot figure {
  background-image: url(../../assets/images/MarkSimonson-dark.png);
}
.about .headshot figure img {
  opacity: 0;
}
.about .bio {
  align-self: end;
  max-width: 35rem;
  padding-left: 1rem;
  padding-bottom: 1rem;
}
.about .bio h3 {
  font-stretch: 75%;
  font-weight: 625;
  margin-top: 0;
}
.about .bio p {
  --p-size-s: 1rem;
  --p-size-m: 1.125rem;
  --p-size-l: 1.25rem;
}

/* Footer */
body > footer {
  background-color: var(--footer-background);
  color: #ffffff;
  color: var(--color-white);
  display: grid;
  grid-template-columns: 12rem 1fr;
  margin-top: 0;
  padding: 3rem 2vw 4rem 2vw;
  padding-left: calc(var(--margin-left) / 2);
  padding-right: calc(var(--margin-left) / 2);
  text-align: center;
}
@media screen and (min-width: 28em) {
  body > footer {
    padding-left: calc(var(--margin-left) / 2);
    text-align: left;
  }
}
@media screen and (min-width: 42em) {
  body > footer {
    padding-left: calc(var(--margin-left) / 1);
  }
}
body > footer a:link,
body > footer a:visited {
  color: #ffffff;
  color: var(--color-white);
  font-family: 'Proxima Nova', Helvetica, Arial, sans-serif;
  font-family: var(--fonts-sans-static);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
}
@media screen and (min-width: 28em) {
  body > footer a:link,
  body > footer a:visited {
    font-size: 1rem;
  }
}
@supports (font-variation-settings: normal) {
  body > footer a:link,
  body > footer a:visited {
    font-family: var(--fonts-sans);
  }
  .wf-inactive body > footer a:link,
  .wf-inactive body > footer a:visited {
    font-family: var(--fonts-base-sans);
    font-weight: normal;
    font-size: 1rem;
  }
}
body > footer a:hover,
body > footer a:focus,
body > footer a:active {
  text-decoration: underline;
}
body > footer p {
  color: #ffffff;
  font-size: 1rem;
  text-align: right;
}

@media (prefers-color-scheme: dark) {
  html:not(.light) {
    --color-background: var(--color-dark-gray);
    --color-background-accent: var(--color-light-gray);
    --color-text: var(--color-white);
    /* --color-a-link: #14218c; */
    /* --color-a-visited: #5407a2; */
    --color-a-hover: #ff0000;
    --color-a-focus: #ff0000;
    --color-a-active: #ff0000;
    --color-text-accent: #e6e6e6;
    --window-topper-background: rgba(0, 255, 123, 0.15);
    --footer-background: rgba(255, 0, 0, 0.15);
    --p-font-wght: 360;
    --h2-font-wght: 790;
    --light-switch-text: ' to light mode';
  }

  html:not(.light) .type-tester .content {
    background-color: var(--color-gray);
  }
}

.dark {
  --color-background: var(--color-dark-gray);
  --color-background-accent: var(--color-light-gray);
  --color-text: var(--color-white);
  /* --color-a-link: #14218c; */
  /* --color-a-visited: #5407a2; */
  --color-a-hover: #ff0000;
  --color-a-focus: #ff0000;
  --color-a-active: #ff0000;
  --color-text-accent: #e6e6e6;
  --window-topper-background: rgba(0, 255, 123, 0.25);
  --footer-background: rgba(255, 0, 0, 0.25);
  --p-font-wght: 360;
  --h2-font-wght: 790;
  --light-switch-text: ' to light mode';
}

.dark .type-tester .content {
  background-color: var(--color-gray);
}

/*# sourceMappingURL=pv_styles.css.map */