<!-- Try adding these classes to the DIV to toggle features on and off:  -->
<!-- screen-s  -->
<!-- screen-m  -->
<!-- screen-w  -->
<!-- no-wdth  -->
<!-- no-opsz  -->
<!-- with-GRAD -->
<div id="demo__container" class="container screen-l">

  <div id='demo-controls'>
    <div class="controls screen-width">
      <h3>Screen:</h3>
      <input type="radio" name="screen-width" value="screen-s" id="controls__small" class="controls--small"> <label for="controls__small">Narrow</label>
      <input type="radio" name="screen-width" value="screen-m" id="controls__medium" class="controls--medium"> <label for="controls__medium">Medium</label>
      <input type="radio" name="screen-width" value="screen-l" id="controls__large" class="controls--large" checked> <label for="controls__large">Wide</label>
    </div>
    <div class="controls features">
      <h3>Features:</h3>
      <input type="checkbox" name="feature" value="GRAD" id="controls__GRAD" class="controls--GRAD"> <label for="controls__GRAD">Grade</label>
    </div>
  </div>

  <div class="paragraph">

    <h2>Variations</h2>
    <h1>Metamorphosis in Type Design</h1>
    <p>Variable font design is a biological process by which a typeface physically develops after birth or hatching, involving a conspicuous and relatively abrupt change in the structure of the glyphs through cell growth and differentiation. Some historical
      styles can undergo metamorphosis, which is often accompanied by a change of nutrition source or behavior. Glyphs that go through metamorphosis are called variable. Typefaces can be divided into styles that undergo complete metamorphosis, incomplete
      metamorphosis, or no metamorphosis.
    </p>
  </div>
</div>

/* Amstelvar Variable Font */
@font-face {
  font-family: "Amstelvar VF";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/AmstelvarAlpha-VF_v1.1.ttf")
    format("truetype");
  font-display: swap;
}

#demo__container {
  /* Breakpoint variables */
  --bp-small: 24.15;
  --bp-medium: 43.75;
  --bp-large: 60.25;
  --bp-xlarge: 75;

  --text-GRAD: 88;

  /* Paragraph variables */
  --p-line-height-min: 1.3;
  --p-line-height-mid: 1.4;
  --p-line-height-max: 1.5;
  --p-font-size-min: 1;
  --p-font-size-mid: 1.125;
  --p-font-size-max: 1.25;
  --p-vf-wght: 400;
  --p-vf-GRAD: 92;
  --p-vf-wdth-s: 80;
  --p-vf-wdth-m: 90;
  --p-vf-wdth-l: 100;
  --p-vf-opsz-s: 16;
  --p-vf-opsz-m: 18;
  --p-vf-opsz-l: 20;

  /* H1 variables */
  --h1-line-height-min: 1;
  --h1-line-height-mid: 1.125;
  --h1-line-height-max: 1.25;
  --h1-font-size-min: 2;
  --h1-font-size-mid: 2.2;
  --h1-font-size-max: 3.333;
  --h1-vf-wght-multiplier-s: 1.1;
  --h1-vf-wght-multiplier-m: 1.1;
  --h1-vf-wght-multiplier-l: 1.1;
  --h1-vf-opsz-s: 32;
  --h1-vf-opsz-m: 48;
  --h1-vf-opsz-l: 60;
  --h1-vf-wdth-s: 84;
  --h1-vf-wdth-m: 93;
  --h1-vf-wdth-l: 86;

  /* H2 variables */
  --h2-line-height-min: 1.5;
  --h2-line-height-mid: 1.5;
  --h2-line-height-max: 1.5;
  --h2-font-size-min: 1.125;
  --h2-font-size-mid: 1.375;
  --h2-font-size-max: 1.5;
  --h2-vf-wght-multiplier-s: 1.7;
  --h2-vf-wght-multiplier-m: 1.7;
  --h2-vf-wght-multiplier-l: 1.7;
  --h2-vf-opsz-s: 10;
  --h2-vf-opsz-m: 26;
  --h2-vf-opsz-l: 32;
  --h2-vf-wdth-s: 80;
  --h2-vf-wdth-m: 90;
  --h2-vf-wdth-l: 100;

  .paragraph {
    margin-left: auto;
    margin-right: auto;
    max-width: 95vw;
    width: 45em;
    &, * {
      transition: all 1s ease-in-out;
    }
  }
  &.screen-s .paragraph {
    width: 20em;
    max-width: 75vw;
  }
  &.screen-m .paragraph {
    width: 30em;
    max-width: 85vw;
  }

  .paragraph p {
    font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
    font-weight: normal;
    font-feature-settings: "liga" 1, "kern" 1;
    font-style: normal;
    margin-left: auto;
    margin-right: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }

  /* Variations for font size and line height */
  .paragraph p {
    font-size: calc(var(--p-font-size-min) * 1rem);
    font-variation-settings: "wght" var(--p-vf-wght), "wdth" var(--p-vf-wdth-s),
      "opsz" var(--p-vf-opsz-s), "GRAD" var(--text-GRAD);
    line-height: var(--p-line-height-min);
  }

  &.screen-m .paragraph p {
    font-variation-settings: "wght" var(--p-vf-wght), "wdth" var(--p-vf-wdth-m),
      "opsz" var(--p-vf-opsz-m), "GRAD" var(--text-GRAD);
    line-height: var(--p-line-height-mid);
  }
  &.screen-l .paragraph p {
    font-size: calc(var(--p-font-size-max) * 1em);
    font-variation-settings: "wght" var(--p-vf-wght), "wdth" var(--p-vf-wdth-l),
      "opsz" var(--p-vf-opsz-l), "GRAD" var(--text-GRAD);
    line-height: var(--p-line-height-max);
  }

  .paragraph h1 {
    font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
    font-feature-settings: "liga" 1, "kern" 1;
    font-size: calc(var(--h1-font-size-min) * 1em);
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h1-vf-wght-multiplier-s)),
      "wdth" var(--h1-vf-wdth-s), "YTLC" 500, "YTAS" 680, "YTDE" 190, "YTUC" 720,
      "opsz" var(--h1-vf-opsz-s), "grad" var(--text-GRAD);
    line-height: var(--h1-line-height-min);
    margin: 0 auto 0 auto;
  }
  &.screen-m .paragraph h1 {
    line-height: var(--h1-line-height-mid);
    font-size: calc(var(--h1-font-size-mid) * 1em);
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h1-vf-wght-multiplier-m)),
      "wdth" var(--h1-vf-wdth-m), "YTLC" 500, "YTAS" 715, "YTDE" 190, "YTUC" 735,
      "opsz" var(--h1-vf-opsz-m), "GRAD" var(--text-GRAD);
  }
  &.screen-l .paragraph h1 {
    font-size: calc(var(--h1-font-size-max) * 1em);
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h1-vf-wght-multiplier-l)),
      "wdth" var(--h1-vf-wdth-l), "YTLC" 500, "YTAS" 750, "YTDE" 250, "YTUC" 750,
      "opsz" var(--h1-vf-opsz-l), "GRAD" var(--text-GRAD);
    line-height: var(--h1-line-height-max);
  }

  .paragraph h2 {
    font-family: "Amstelvar VF", Georgia, "New Times Roman", serif;
    font-feature-settings: "liga" 1, "kern" 1;
    font-size: calc(var(--h2-font-size-min) * 1em);
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h2-vf-wght-multiplier-s)),
      "wdth" var(--h2-vf-wdth-s), "opsz" calc(var(--h2-font-size-min) * 16),
      "GRAD" var(--text-GRAD);
    line-height: var(--h2-line-height-min);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
    text-transform: uppercase;
  }
  &.screen-m .paragraph h2 {
    line-height: var(--h2-line-height-mid);
    font-size: calc((var(--h2-font-size-mid) * 1em));
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h2-vf-wght-multiplier-m)),
      "wdth" var(--h2-vf-wdth-m), "opsz" calc(var(--h2-font-size-mid) * 16),
      "GRAD" var(--text-GRAD);
  }
  &.screen-l .paragraph h2 {
    font-size: calc(var(--h2-font-size-max) * 1em);
    font-variation-settings: "wght"
        calc(var(--p-vf-wght) * var(--h2-vf-wght-multiplier-l)),
      "wdth" var(--h2-vf-wdth-l), "opsz" calc(var(--h2-font-size-max) * 16),
      "GRAD" var(--text-GRAD);
    line-height: var(--h2-line-height-max);
  }

  &.with-GRAD {
    --text-GRAD: 125;
  }

  /* Control buttons */
  .controls {
    margin-top: 2em;
    text-align: center;

    h3 {
      display: inline;
      font-weight: normal;
      font-family: monospace;
    }
  }
}

  var container = document.getElementById('demo__container');
  var controls = document.getElementById('demo-controls');
  
  controls.addEventListener('change', function(evt) {
    var input=evt.target;
    switch (input.name) {
      case "screen-width":
    container.classList.remove('screen-s');
    container.classList.remove('screen-m');
    container.classList.remove('screen-l');
        
container.classList.add(input.value);
        break;
        
      case "feature":
        var opposite = input.classList.contains('opposite');

  if (opposite) {
    container.classList[input.checked ? 'remove' : 'add']('no-' + input.value);
  }         else {
    container.classList[input.checked ? "add" : "remove"]('with-' + input.value);
  }
        break;

        }
  });