Convert old "html5" section into the new "sections" section. #88

12 files changed, 523 insertions, 306 deletions

diff --git a/fork-versions/default/_normalize.scss b/fork-versions/default/_normalize.scss
index c2dd316..3e98e9e 100644
--- a/fork-versions/default/_normalize.scss
+++ b/fork-versions/default/_normalize.scss
@@ -44,7 +44,7 @@ html {
   -webkit-text-size-adjust: 100%; /* 3 */
 }
 
-/* HTML5 display definitions
+/* Sections
    ========================================================================== */
 
 /**
@@ -56,62 +56,63 @@ body {
 }
 
 /**
- * Add the correct display in IE <10.
- * Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
- * Add the correct display in IE for `main`.
+ * Add the correct display in IE 9-.
  */
 
 article,
 aside,
-details,
-figcaption,
-figure,
 footer,
 header,
-main,
-menu,
 nav,
-section,
-summary {
+section {
   display: block;
 }
 
 /**
- * Add the correct display in IE <10.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
  */
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display and remove excess height in iOS 4-7.
- */
+h1 {
+  @include normalize-font-size($h1-font-size);
+  @if $normalize-vertical-rhythm {
+    @include normalize-line-height($h1-font-size);
+  }
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
+  @include normalize-margin(1 0, $h1-font-size);
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
+@if $normalize-vertical-rhythm {
+  h2 {
+    @include normalize-font-size($h2-font-size);
+    @include normalize-line-height($h2-font-size);
+    @include normalize-margin(1 0, $h2-font-size);
+  }
 
-progress {
-  vertical-align: baseline;
-}
+  h3 {
+    @include normalize-font-size($h3-font-size);
+    @include normalize-line-height($h3-font-size);
+    @include normalize-margin(1 0, $h3-font-size);
+  }
 
-/**
- * Add the correct display in IE <11, Safari <8, and Firefox <22.
- * 1. Add the correct display in IE.
- */
+  h4 {
+    @include normalize-font-size($h4-font-size);
+    @include normalize-line-height($h4-font-size);
+    @include normalize-margin(1 0, $h4-font-size);
+  }
 
-template, /* 1 */
-[hidden] {
-  display: none;
+  h5 {
+    @include normalize-font-size($h5-font-size);
+    @include normalize-line-height($h5-font-size);
+    @include normalize-margin(1 0, $h5-font-size);
+  }
+
+  h6 {
+    @include normalize-font-size($h6-font-size);
+    @include normalize-line-height($h6-font-size);
+    @include normalize-margin(1 0, $h6-font-size);
+  }
 }
 
 /* Links
@@ -191,53 +192,6 @@ dfn {
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  @include normalize-font-size($h1-font-size);
-  @if $normalize-vertical-rhythm {
-    @include normalize-line-height($h1-font-size);
-  }
-
-  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
-  @include normalize-margin(1 0, $h1-font-size);
-}
-
-@if $normalize-vertical-rhythm {
-  h2 {
-    @include normalize-font-size($h2-font-size);
-    @include normalize-line-height($h2-font-size);
-    @include normalize-margin(1 0, $h2-font-size);
-  }
-
-  h3 {
-    @include normalize-font-size($h3-font-size);
-    @include normalize-line-height($h3-font-size);
-    @include normalize-margin(1 0, $h3-font-size);
-  }
-
-  h4 {
-    @include normalize-font-size($h4-font-size);
-    @include normalize-line-height($h4-font-size);
-    @include normalize-margin(1 0, $h4-font-size);
-  }
-
-  h5 {
-    @include normalize-font-size($h5-font-size);
-    @include normalize-line-height($h5-font-size);
-    @include normalize-margin(1 0, $h5-font-size);
-  }
-
-  h6 {
-    @include normalize-font-size($h6-font-size);
-    @include normalize-line-height($h6-font-size);
-    @include normalize-margin(1 0, $h6-font-size);
-  }
-}
-
-/**
  * Add the correct background and color in IE <10.
  */
 
@@ -279,6 +233,24 @@ sup {
    ========================================================================== */
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
  * Remove the border on images inside links in IE <11.
  */
 
@@ -337,6 +309,15 @@ svg:not(:root) {
 }
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+figcaption,
+figure {
+  display: block;
+}
+
+/**
  * Add the correct margin in IE 8.
  */
 
@@ -355,6 +336,14 @@ hr {
   overflow: visible; /* 2 */
 }
 
+/**
+ * Add the correct display in IE.
+ */
+
+main {
+  display: block;
+}
+
 @if $normalize-vertical-rhythm {
   /**
    * Set 1 unit of vertical rhythm on the top and bottom margin.
@@ -562,9 +551,70 @@ optgroup {
 }
 
 /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
  * Remove the default vertical scrollbar in IE.
  */
 
 textarea {
   overflow: auto;
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/fork-versions/deprecated-compass/_normalize.scss b/fork-versions/deprecated-compass/_normalize.scss
index 3dbfe88..7f89dda 100644
--- a/fork-versions/deprecated-compass/_normalize.scss
+++ b/fork-versions/deprecated-compass/_normalize.scss
@@ -47,7 +47,7 @@ html {
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 
-/* HTML5 display definitions
+/* Sections
    ========================================================================== */
 
 /**
@@ -59,62 +59,67 @@ body {
 }
 
 /**
- * Add the correct display in IE <10.
- * Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
- * Add the correct display in IE for `main`.
+ * Add the correct display in IE 9-.
  */
 
 article,
 aside,
-details,
-figcaption,
-figure,
 footer,
 header,
-main,
-menu,
 nav,
-section,
-summary {
+section {
   display: block;
 }
 
 /**
- * Add the correct display in IE <10.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
  */
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display and remove excess height in iOS 4-7.
- */
+h1 {
+  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
+  @if $normalize-vertical-rhythm {
+    @include adjust-font-size-to( $h1-font-size );
+  }
+  @else {
+    font-size: if($rhythm-unit == "px", $h1-font-size, unquote("#{$h1-font-size / $base-font-size}#{$rhythm-unit}"));
+  }
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
+  @include leader(1, $h1-font-size);
+  @include trailer(1, $h1-font-size);
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
+@if $normalize-vertical-rhythm {
+  h2 {
+    @include adjust-font-size-to( $h2-font-size );
+    @include leader(1, $h2-font-size);
+    @include trailer(1, $h2-font-size);
+  }
 
-progress {
-  vertical-align: baseline;
-}
+  h3 {
+    @include adjust-font-size-to( $h3-font-size );
+    @include leader(1, $h3-font-size);
+    @include trailer(1, $h3-font-size);
+  }
 
-/**
- * Add the correct display in IE <11, Safari <8, and Firefox <22.
- * 1. Add the correct display in IE.
- */
+  h4 {
+    @include adjust-font-size-to( $h4-font-size );
+    @include leader(1, $h4-font-size);
+    @include trailer(1, $h4-font-size);
+  }
 
-template, /* 1 */
-[hidden] {
-  display: none;
+  h5 {
+    @include adjust-font-size-to( $h5-font-size );
+    @include leader(1, $h5-font-size);
+    @include trailer(1, $h5-font-size);
+  }
+
+  h6 {
+    @include adjust-font-size-to( $h6-font-size );
+    @include leader(1, $h6-font-size);
+    @include trailer(1, $h6-font-size);
+  }
 }
 
 /* Links
@@ -194,57 +199,6 @@ dfn {
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  /* Set the font-size and line-height while keeping a proper vertical rhythm. */
-  @if $normalize-vertical-rhythm {
-    @include adjust-font-size-to( $h1-font-size );
-  }
-  @else {
-    font-size: if($rhythm-unit == "px", $h1-font-size, unquote("#{$h1-font-size / $base-font-size}#{$rhythm-unit}"));
-  }
-
-  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
-  @include leader(1, $h1-font-size);
-  @include trailer(1, $h1-font-size);
-}
-
-@if $normalize-vertical-rhythm {
-  h2 {
-    @include adjust-font-size-to( $h2-font-size );
-    @include leader(1, $h2-font-size);
-    @include trailer(1, $h2-font-size);
-  }
-
-  h3 {
-    @include adjust-font-size-to( $h3-font-size );
-    @include leader(1, $h3-font-size);
-    @include trailer(1, $h3-font-size);
-  }
-
-  h4 {
-    @include adjust-font-size-to( $h4-font-size );
-    @include leader(1, $h4-font-size);
-    @include trailer(1, $h4-font-size);
-  }
-
-  h5 {
-    @include adjust-font-size-to( $h5-font-size );
-    @include leader(1, $h5-font-size);
-    @include trailer(1, $h5-font-size);
-  }
-
-  h6 {
-    @include adjust-font-size-to( $h6-font-size );
-    @include leader(1, $h6-font-size);
-    @include trailer(1, $h6-font-size);
-  }
-}
-
-/**
  * Add the correct background and color in IE <10.
  */
 
@@ -286,6 +240,24 @@ sup {
    ========================================================================== */
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
  * Remove the border on images inside links in IE <11.
  */
 
@@ -344,6 +316,15 @@ svg:not(:root) {
 }
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+figcaption,
+figure {
+  display: block;
+}
+
+/**
  * Add the correct margin in IE 8.
  */
 
@@ -362,6 +343,14 @@ hr {
   overflow: visible; /* 2 */
 }
 
+/**
+ * Add the correct display in IE.
+ */
+
+main {
+  display: block;
+}
+
 @if $normalize-vertical-rhythm {
   /**
    * Set 1 unit of vertical rhythm on the top and bottom margin.
@@ -573,9 +562,70 @@ optgroup {
 }
 
 /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
  * Remove the default vertical scrollbar in IE.
  */
 
 textarea {
   overflow: auto;
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}
diff --git a/fork-versions/typey-chroma-kss/base/_html5.scss b/fork-versions/typey-chroma-kss/base/_html5.scss
deleted file mode 100644
index e4cecf9..0000000
--- a/fork-versions/typey-chroma-kss/base/_html5.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-// HTML5 display definitions
-// ==========================================================================
-
-
-body {
-  // Output a horizontal grid to help with debugging typography. The
-  // $typey-debug variable will toggle its output.
-  @include typey-debug-grid();
-  // Remove default margin and padding.
-  margin: 0;
-  padding: 0;
-}
-
-// Add the correct display in IE <10.
-// Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
-// Add the correct display in IE for `main`.
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block;
-}
-
-// Add the correct display in IE <10.
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-// Add the correct display and remove excess height in iOS 4-7.
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-// Add the correct vertical alignment in Chrome, Firefox, and Opera.
-progress {
-  vertical-align: baseline;
-}
-
-// Add the correct display in IE <11, Safari <8, and Firefox <22.
-template,
-[hidden] {
-  display: none;
-}
diff --git a/fork-versions/typey-chroma-kss/base/_normalize.scss b/fork-versions/typey-chroma-kss/base/_normalize.scss
index 1803466..1d4a83f 100644
--- a/fork-versions/typey-chroma-kss/base/_normalize.scss
+++ b/fork-versions/typey-chroma-kss/base/_normalize.scss
@@ -10,14 +10,16 @@
 
 // Normalize-scss is broken into modular pieces to make it easier to edit.
 @import 'document/document';
-@import 'html5';
+@import 'sections/sections';
 @import 'links/links';
-@import 'headings/headings';
 @import 'text/text';
 @import 'grouping/grouping';
 @import 'embedded/embedded';
 @import 'forms/forms';
 @import 'tables/tables';
+@import 'interactive/interactive';
+@import 'scripting/scripting';
+@import 'hidden/hidden';
 
 // Note: we allow the .button component (loaded by forms) to override :link, by
 // loading links first.
diff --git a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
index 23359d0..f98c3bf 100644
--- a/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
+++ b/fork-versions/typey-chroma-kss/base/embedded/_embedded.scss
@@ -4,6 +4,21 @@
 //
 // Style guide: base.embedded
 
+// Audio
+//
+// Style guide: base.embedded.audio
+
+audio {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}
+
+// Add the correct display and remove excess height in iOS 4-7.
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
 // Image
 //
 // An `<img>` element represents an image.
@@ -39,3 +54,12 @@ svg:not(:root) {
   // Hide the overflow in IE.
   overflow: hidden;
 }
+
+// Video
+//
+// Style guide: base.embedded.video
+
+video {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}
diff --git a/fork-versions/typey-chroma-kss/base/forms/_forms.scss b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
index c59c0ff..4d0285c 100644
--- a/fork-versions/typey-chroma-kss/base/forms/_forms.scss
+++ b/fork-versions/typey-chroma-kss/base/forms/_forms.scss
@@ -234,6 +234,19 @@ optgroup {
   font-weight: bold;
 }
 
+// Progress
+//
+// The `<progress>` HTML element.
+//
+// Style guide: forms.base.progress
+
+progress {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+  vertical-align: baseline;
+}
+
 // Text areas
 //
 // The `<textarea>` element represents a multi-line plain text form field.
diff --git a/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss b/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss
new file mode 100644
index 0000000..0b5bf13
--- /dev/null
+++ b/fork-versions/typey-chroma-kss/base/hidden/_hidden.scss
@@ -0,0 +1,10 @@
+// Hidden
+//
+// Some older browsers do not hide elements that have a `hidden` attribute.
+//
+// Style guide: base.hidden
+
+[hidden] {
+  // Add the correct display in IE 10-.
+  display: none;
+}
diff --git a/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss b/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss
new file mode 100644
index 0000000..8e0818d
--- /dev/null
+++ b/fork-versions/typey-chroma-kss/base/interactive/_interactive.scss
@@ -0,0 +1,26 @@
+// Interactive
+//
+// Style guide: base.interactive
+
+// Details
+//
+// Style guide: base.interactive.details
+
+details {
+  // Add the correct display in Edge, IE, and Firefox.
+  display: block;
+}
+
+summary {
+  // Add the correct display in all browsers.
+  display: list-item;
+}
+
+// Menu
+//
+// Style guide: base.interactive.menu
+
+menu {
+  // Add the correct display in IE 9-.
+  display: block;
+}
diff --git a/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss b/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss
new file mode 100644
index 0000000..05448d9
--- /dev/null
+++ b/fork-versions/typey-chroma-kss/base/scripting/_scripting.scss
@@ -0,0 +1,24 @@
+// Scripting
+//
+// Style guide: base.scripting
+
+// Canvas
+//
+// Style guide: base.scripting.canvas
+
+canvas {
+  // Add the correct display in IE 9-.
+  display: inline-block;
+}
+
+// Template
+//
+// Some older browsers do not hide elements the web components' `template`
+// element.
+//
+// Style guide: base.scripting.template
+
+template {
+  // Add the correct display in IE.
+  display: none;
+}
diff --git a/fork-versions/typey-chroma-kss/base/headings/_headings.scss b/fork-versions/typey-chroma-kss/base/sections/_sections.scss
index 7993211..2dd3697 100644
--- a/fork-versions/typey-chroma-kss/base/headings/_headings.scss
+++ b/fork-versions/typey-chroma-kss/base/sections/_sections.scss
@@ -1,3 +1,26 @@
+// Sections
+// ==========================================================================
+
+
+body {
+  // Output a horizontal grid to help with debugging typography. The
+  // $typey-debug variable will toggle its output.
+  @include typey-debug-grid();
+  // Remove the margin in all browsers (opinionated).
+  margin: 0;
+  padding: 0;
+}
+
+// Add the correct display in IE 9-.
+article,
+aside,
+footer,
+header,
+nav,
+section {
+  display: block;
+}
+
 // Headings
 //
 // All HTML headings, `<h1>` through `<h6>`, are available. `%h1` through `%h6`
@@ -8,8 +31,8 @@
 //
 // Style guide: base.headings
 
-// Address variable `h1` font-size and margin within `section` and `article`
-// contexts in Firefox 4+, Safari, and Chrome.
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Firefox, and Safari.
 h1,
 %h1 {
   // Set the font-size and line-height while keeping a proper vertical rhythm.
diff --git a/fork-versions/typey-chroma-kss/base/headings/headings-h.twig b/fork-versions/typey-chroma-kss/base/sections/headings-h.twig
index 4806892..4806892 100644
--- a/fork-versions/typey-chroma-kss/base/headings/headings-h.twig
+++ b/fork-versions/typey-chroma-kss/base/sections/headings-h.twig
diff --git a/fork-versions/typey/_normalize.scss b/fork-versions/typey/_normalize.scss
index 600b823..b8bd894 100644
--- a/fork-versions/typey/_normalize.scss
+++ b/fork-versions/typey/_normalize.scss
@@ -23,7 +23,7 @@ html {
   -webkit-text-size-adjust: 100%; /* 3 */
 }
 
-/* HTML5 display definitions
+/* Sections
    ========================================================================== */
 
 /**
@@ -35,62 +35,53 @@ body {
 }
 
 /**
- * Add the correct display in IE <10.
- * Add the correct display in Edge, IE, and Firefox for `details` or `summary`.
- * Add the correct display in IE for `main`.
+ * Add the correct display in IE 9-.
  */
 
 article,
 aside,
-details,
-figcaption,
-figure,
 footer,
 header,
-main,
-menu,
 nav,
-section,
-summary {
+section {
   display: block;
 }
 
 /**
- * Add the correct display in IE <10.
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
  */
 
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
+h1 {
+  @include type-layout(xxl, 2);
 
-/**
- * Add the correct display and remove excess height in iOS 4-7.
- */
+  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
+  @include margin(1 0, xxl);
+}
 
-audio:not([controls]) {
-  display: none;
-  height: 0;
+h2 {
+  @include type-layout(xl, 1.5);
+  @include margin(1 0, xl);
 }
 
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
+h3 {
+  @include type-layout(l, 1);
+  @include margin(1 0, l);
+}
 
-progress {
-  vertical-align: baseline;
+h4 {
+  @include type-layout(m, 1);
+  @include margin(1 0, m);
 }
 
-/**
- * Add the correct display in IE <11, Safari <8, and Firefox <22.
- * 1. Add the correct display in IE.
- */
+h5 {
+  @include type-layout(s, 1);
+  @include margin(1 0, s);
+}
 
-template, /* 1 */
-[hidden] {
-  display: none;
+h6 {
+  @include type-layout(xs, 1);
+  @include margin(1 0, xs);
 }
 
 /* Links
@@ -170,43 +161,6 @@ dfn {
 }
 
 /**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  @include type-layout(xxl, 2);
-
-  /* Set 1 unit of vertical rhythm on the top and bottom margins. */
-  @include margin(1 0, xxl);
-}
-
-h2 {
-  @include type-layout(xl, 1.5);
-  @include margin(1 0, xl);
-}
-
-h3 {
-  @include type-layout(l, 1);
-  @include margin(1 0, l);
-}
-
-h4 {
-  @include type-layout(m, 1);
-  @include margin(1 0, m);
-}
-
-h5 {
-  @include type-layout(s, 1);
-  @include margin(1 0, s);
-}
-
-h6 {
-  @include type-layout(xs, 1);
-  @include margin(1 0, xs);
-}
-
-/**
  * Add the correct background and color in IE <10.
  */
 
@@ -248,6 +202,24 @@ sup {
    ========================================================================== */
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
  * Remove the border on images inside links in IE <11.
  */
 
@@ -304,6 +276,15 @@ ul {
 }
 
 /**
+ * Add the correct display in IE 9-.
+ */
+
+figcaption,
+figure {
+  display: block;
+}
+
+/**
  * Add the correct margin in IE 8.
  */
 
@@ -323,6 +304,14 @@ hr {
 }
 
 /**
+ * Add the correct display in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
  * Set 1 unit of vertical rhythm on the top and bottom margin.
  */
 
@@ -528,9 +517,70 @@ optgroup {
 }
 
 /**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
  * Remove the default vertical scrollbar in IE.
  */
 
 textarea {
   overflow: auto;
 }
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Scripting
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+  display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+  display: none;
+}
+
+/* Hidden
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+  display: none;
+}