diff --git a/css/build/wmui-style-guide.css b/css/build/wmui-style-guide.css
index 469edb9..d2e0ec6 100644
--- a/css/build/wmui-style-guide.css
+++ b/css/build/wmui-style-guide.css
@@ -1,1814 +1,1820 @@
 /* ::: Vendor Imports ::: */
 /* Load files from 'node_modules' folders with postCSS-import plugin.
  * Modules specified in package.json file */
 /**
  * WikimediaUI Base v0.14.0
  * Wikimedia Foundation user interface base variables
  */
 :root {
 	/* == Breakpoints == */
 	/* The following numbers are prone to change with new information. */
 
 	/**
 	 * Minimum available screen width at which a device can be considered a mobile device
 	 * Many older feature phones have screens smaller than this value.
 	 */
 
 	/**
 	 * Minimum available screen width at which a device can be considered a tablet
 	 * The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
 	 * enough to cover iPad (768px).
 	 */
 
 	/* Minimum available screen width at which a device can be considered a desktop */
 
 	/* Wider desktop breakpoint, currently used in Flow. */
 
 	/* Extra wide desktop breakpoint */
 
 
 	/* == Colors == */
 	/**
 	 * WikimediaUI (WMUI) color palette
 	 * Don't use those variables directly, instead define your vars
 	 * referring to them as applied further below
 	 */    /* = HSB 0°, 0%, 0% */    /* = HSB 0°, 0%, 13% */ /* = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff` */ /* = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff` */ /* = HSB 212°, 8%, 69% */ /* = HSB 213°, 4%, 82% */ /* = HSB 220°, 3%, 94% */ /* = HSB 210°, 1%, 98% */    /* = HSB 0°, 0%, 100% */ /* = HSB 220°, 70%, 55% */    /* = HSB 220°, 75%, 80% */ /* = HSB 214°, 8%, 100% */ /* = HSB 360°, 80%, 70% */    /* = HSB 360°, 77%, 87% */ /* = HSB 3°, 9%, 100% */ /* = HSB 36°, 100%, 67% */    /* = HSB 45°, 80%, 100% */ /* = HSB 39°, 9%, 100% */ /* = HSB 167°, 85%, 53% */ /* = HSB 167°, 100%, 69% */ /* = HSB 166°, 16%, 99% */
 
 	/* Background Colors */
 	/* 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…) */
 	/* 'Filled' UI elements (Checkboxes, Radios, ProgressBars…) */
 	/* Toolbar and Tools */
 	/* Tabs Navigation Background Color */
 	/* User system messages (errors, warnings, successes, notices) */
 	/* Highlight Colors, RGBA Colors include hex fallback on `#fff` for IE 6/7/8 */
 
 	/* Foreground Colors */
 	/* Primary 'Progressive' Color, Background Color and states */ /* = `filter: brightness( 109% )` */
 	/* 'Destructive' Color, Background Color and states */ /* ~= `filter: brightness( 120% )` */
 	/* Secondary Color and states (links only) */
 	/* User system messages (errors, warnings, successes, notices) */
 	/* Toolbar and Tools */ /* Used here in combination with `:hover` background-color turning light grey */
 
 
 	/* Opacity */ /* = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49% */ /* = `#222` on `background-color: #fff` */ /* = `#454545` on `background-color: #fff`, closest to `#444` */
 
 
 	/* == Positioning == */
 	/* Z-Index */
 
 
 	/* == Box Model properties == */
 	/* `@*size` variables are used for `*width` & `*height` properties */ /* values used for `min-*` are defined in `px`, see T130691 */
 
 	/* Max Widths */ /* = `460px` at `16px` base, see T95367 */
 
 	/* Border */
 	/* User system messages (errors, warnings, successes, notices) */
 	/* Border Colors */ /* See T168029 */
 	/* Border Styles */
 	/* Border Widths */
 	/* Border Radius */
 
 	/* Box Shadows */
 
 
 	/* == Typography incl. print properties == */
 	/* Font Families */
 	/* To be deprecated */
 	/* Provide better operating system-specific readability, see T175877 */
 	/* `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576 */
 	/* Provide better operating system-specific monospace stack, see T209915. */ /* See T176636 */
 	/* Line Heights */
 	/* Text Shadows */ /* 'coined' effect */
 
 
 	/* == Other Properties == */
 	/* Cursors */
 
 
 	/* == Animation & Transition == */
 	/* Transitions */ /* `ease` is the initial value */
 	/* `ease-out` is preferably used on human initiated transitions, for example dialogs */
 	/* Transitions > Durations */
 }
 /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
 /**
  * 1. Correct the line height in all browsers.
  * 2. Prevent adjustments of font size after orientation changes in
  *    IE on Windows Phone and in iOS.
  */
 html {
   line-height: 1.15; /* 1 */
   -ms-text-size-adjust: 100%; /* 2 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
 /* Sections
    ========================================================================== */
 /**
  * Remove the margin in all browsers (opinionated).
  */
 body {
   margin: 0;
 }
 /**
  * Add the correct display in IE 9-.
  */
 article,
 aside,
 footer,
 header,
 nav,
 section {
   display: block;
 }
 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }
 /* Grouping content
    ========================================================================== */
 /**
  * Add the correct display in IE 9-.
  * 1. Add the correct display in IE.
  */
 figcaption,
 figure,
 main { /* 1 */
   display: block;
 }
 /**
  * Add the correct margin in IE 8.
  */
 figure {
   margin: 1em 40px;
 }
 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
 hr {
   -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
           box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 /* Text-level semantics
    ========================================================================== */
 /**
  * 1. Remove the gray background on active links in IE 10.
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
 a {
   background-color: transparent; /* 1 */
   -webkit-text-decoration-skip: objects; /* 2 */
 }
 /**
  * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   -webkit-text-decoration: underline dotted;
      -moz-text-decoration: underline dotted;
           text-decoration: underline dotted; /* 2 */
 }
 /**
  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  */
 b,
 strong {
   font-weight: inherit;
 }
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
 b,
 strong {
   font-weight: bolder;
 }
 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
 code,
 kbd,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }
 /**
  * Add the correct font style in Android 4.3-.
  */
 dfn {
   font-style: italic;
 }
 /**
  * Add the correct background and color in IE 9-.
  */
 mark {
   background-color: #ff0;
   color: #000;
 }
 /**
  * Add the correct font size in all browsers.
  */
 small {
   font-size: 80%;
 }
 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }
 sub {
   bottom: -0.25em;
 }
 sup {
   top: -0.5em;
 }
 /* Embedded content
    ========================================================================== */
 /**
  * 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 10-.
  */
 img {
   border-style: none;
 }
 /**
  * Hide the overflow in IE.
  */
 svg:not(:root) {
   overflow: hidden;
 }
 /* Forms
    ========================================================================== */
 /**
  * 1. Change the font styles in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: sans-serif; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }
 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
 button,
 input { /* 1 */
   overflow: visible;
 }
 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
 button,
 select { /* 1 */
   text-transform: none;
 }
 /**
  * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
  *    controls in Android 4.
  * 2. Correct the inability to style clickable types in iOS and Safari.
  */
 button,
 html [type="button"], /* 1 */
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button; /* 2 */
 }
 /**
  * Remove the inner border and padding in Firefox.
  */
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }
 /**
  * Restore the focus styles unset by the previous rule.
  */
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }
 /**
  * Correct the padding in Firefox.
  */
 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }
 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
 legend {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
   padding: 0; /* 3 */
   white-space: normal; /* 1 */
 }
 /**
  * 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;
 }
 /**
  * 1. Add the correct box sizing in IE 10-.
  * 2. Remove the padding in IE 10-.
  */
 [type="checkbox"],
 [type="radio"] {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }
 /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
  */
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }
 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
 /* 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;
 }
 /* ::: Local Imports ::: */
 @font-face {
 	font-family: 'Charter';
 	src: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),
 		 url( '../../fonts/Charter_regular.woff' ) format( 'woff' );
 	font-style: normal;
 	font-weight: 400;
 	text-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */
 }
 @font-face {
 	font-family: 'Charter';
 	src: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),
 		 url( '../../fonts/Charter_bold.woff' ) format( 'woff' );
 	font-style: normal;
 	font-weight: 700;
 	text-rendering: optimizeLegibility;
 }
 /*
 @font-face {
 	font-family: 'Charter';
 	src: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),
 		 url( '../fonts/Charter_italic.woff' ) format( 'woff' );
 	font-style: italic;
 	font-weight: 400;
 	text-rendering: optimizeLegibility;
 }
 @font-face {
 	font-family: 'Charter';
 	src: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),
 		 url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );
 	font-style: italic;
 	font-weight: 700;
 	text-rendering: optimizeLegibility;
 }
 */
 :root {
 	/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */ /* stylelint-disable-line value-keyword-case */
+	/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.
+	   Helvetica and Arial fallback gracefully to `700`, see T246791. */
 }
 * {
 	-webkit-box-sizing: border-box;
 	   -moz-box-sizing: border-box;
 	        box-sizing: border-box;
 }
 html {
 	font-size: 62.5%;
 }
 body {
 	background-color: #eaecf0; /* FIXME: var; */
 	color: #222;
 	margin: 0;
 	font-family: -apple-system
 ,
 'BlinkMacSystemFont'
 ,
 'Segoe UI'
 ,
 'Roboto'
 ,
 'Lato'
 ,
 'Helvetica'
 ,
 'Arial'
 ,
 sans-serif;
 	font-size: 1.6rem;
 	line-height: 1.6;
 }
 /* ::: Text Block-Level Elements ::: */
 /* ... Headings ... */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	margin: 3.2rem 0 0;
 	line-height: 1.25;
 	-webkit-transition: font-size 250ms, font-weight 250ms;
 	-moz-transition: font-size 250ms, font-weight 250ms;
 	transition: font-size 250ms, font-weight 250ms;
 }
 h2,
 h3,
 h4,
 h5 {
 	font-weight: 600;
 }
 h1,
 .page__title {
 	font-family: Georgia
 ,
 serif; /* Fallback */
 	font-size: 3.2rem;
 	font-weight: 400;
 }
 h2 {
 	border-bottom: 3px solid #eaecf0;
 	padding-bottom: 2px;
 	font-size: 2.4rem;
 }
 /* Reduce top margin when introductory headlines are following each other. */
 h2 + h3 {
 	margin-top: 1.6rem;
 }
 h3 {
 	font-size: 2rem;
 }
 h4 {
 	font-size: 1.8rem;
 }
 h5 {
 	font-size: 1.6rem;
 }
 h6 {
 	font-size: 1.6rem;
 	font-weight: normal;
 }
 /* ... Other Block-Level Elements ... */
 blockquote {
 	border-left: 3px solid #c8ccd1; /* FIXME: var */
 	margin: 1.6rem 0 0;
 	padding: 0 3.2rem;
 	font-family: Georgia
 ,
 serif; /* Fallback */
 	font-size: 2rem;
 	font-style: italic;
 	line-height: 1.5;
 }
 blockquote cite {
 	display: block;
 	margin-top: 0.8rem;
 	font-family: -apple-system
 ,
 'BlinkMacSystemFont'
 ,
 'Segoe UI'
 ,
 'Roboto'
 ,
 'Lato'
 ,
 'Helvetica'
 ,
 'Arial'
 ,
 sans-serif;
 	font-size: 1.4rem;
 	font-style: normal;
 }
 blockquote cite:before {
 		content: '— ';
 	}
 code,
 pre,
 .mw-code {
 	font-family: 'Menlo'
 ,
 'Consolas'
 ,
 'Liberation Mono'
 ,
 'Courier New'
 ,
 monospace;
 }
 hr {
 	background: #eaecf0;
 	display: block;
 	height: 0.8rem;
 	border: 0;
 	margin: 8rem 0;
 }
 p {
 	margin: 3.2rem 0 0;
 	line-height: 1.5;
 }
 h1 + p,
 	h2 + p,
 	h3 + p,
 	h4 + p,
 	h5 + p,
 	h6 + p,
 	p + p,
 	ul + p,
 	p:first-child {
 		margin: 0.8rem 0 0;
 	}
 blockquote + p {
 		margin-top: 1.6rem;
 	}
 pre,
 .mw-code {
 	background-color: #f8f9fa;
 	color: #000;
 	border: 1px
 solid
 #a2a9b1;
 	padding: 1.2rem 2rem;
 	font-size: 1.4rem;
 	white-space: pre-wrap;
 }
 /* ... Lists ... */
 ol,
 ul {
 	margin: 0.8rem 0;
 	padding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */
 }
 .content li {
 	margin-top: 0.4rem;
 }
 .content li:first-child {
 		margin-top: 0;
 	}
 /* ... Images & Figures ... */
 figure {
 	margin: 0.8rem 0 0;
 }
 img {
 	display: block;
 	max-width: 100%;
 	margin: 1.6rem 0 0;
 }
 .page--components figure {
 	margin-left: 6.4rem;
 	padding-top: 0.8rem;
 }
 .page--components figure img {
 	margin-top: 0.8rem;
 }
 /* ::: Inline Elements ::: */
 a {
 	color: #36c;
 	text-decoration: none;
 }
 a:hover {
 		text-decoration: underline;
 	}
 a:active {
 		color: #2a4b8d;
 	}
+b,
+strong {
+	font-weight: 600;
+}
 code {
 	background-color: #f8f9fa;
 	display: inline-block;
 	padding: 0.2rem 0.4rem;
 	font-size: 1.4rem;
 }
 small {
 	font-size: 1.3rem;
 }
 sub,
 sup {
 	font-size: 1.1rem;
 }
 /* ::: General Classes ::: */
 /* ::: Text for Screen Readers only ::: */
 .is-aural {
 	display: block;
 	position: absolute;
 	clip: rect( 1px, 1px, 1px, 1px );
 	width: 1px;
 	height: 1px;
 	margin: -1px;
 	border: 0;
 	padding: 0;
 	overflow: hidden;
 }
 .is-aural.is-focusable:active,
 	.is-aural.is-focusable:focus {
 		position: static;
 		clip: auto;
 		width: auto;
 		height: auto;
 		margin: 0;
 		text-decoration: underline;
 		overflow: visible;
 	}
 .clearfix:before,
 .clearfix:after,
 .page:before,
 .page:after,
 .content-box:before,
 .content-box:after,
 .color-palette:before,
 .color-palette:after,
 .figures-do-dont:before,
 .figures-do-dont:after,
 .content__illustration-style .figure--full:before,
 .content__illustration-style .figure--full:after {
 	content: ' ';
 	display: table;
 }
 .clearfix:after,
 .page:after,
 .content-box:after,
 .color-palette:after,
 .figures-do-dont:after,
 .content__illustration-style .figure--full:after {
 	clear: both;
 }
 /* ::: Text-formatting ::: */
 .is-subtle {
 	color: #72777d;
 }
 .content-box {
 	position: relative;
 	margin-right: auto;
 	margin-left: auto;
 	padding-left: 1.6rem; /* FIXME: var( --grid-padding ); */
 	padding-right: 1.6rem;
 }
 /* ::: Structure ::: */
 .header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	min-height: 6.4rem;
 	line-height: 6.4rem;
 }
 .site__title {
 		color: #222;
 		margin-top: 0;
 		height: 6.4rem;
 		font-family: -apple-system
 ,
 'BlinkMacSystemFont'
 ,
 'Segoe UI'
 ,
 'Roboto'
 ,
 'Lato'
 ,
 'Helvetica'
 ,
 'Arial'
 ,
 sans-serif;
 		font-size: 1.6rem;
 		font-weight: 400;
 		letter-spacing: 0.5px;
 	}
 .site__title a {
 			color: inherit;
 			display: inline-block;
 			padding: 1.2rem 3.2rem 0;
 			-webkit-transition: color 250ms;
 			-moz-transition: color 250ms;
 			transition: color 250ms;
 		}
 .site__title a:hover {
 			color: #000; /* --color-base-emphasized */
 			text-decoration: none;
 		}
 .site__org {
 			display: block;
 		}
 .site__project {
-			font-weight: 700;
+			font-weight: 600;
 		}
 /* ... Navigation button ... */
 .btn--nav-main {
 		position: absolute;
 		top: 1.2rem;
 		width: 4.2rem;
 		height: 4.2rem;
 		cursor: pointer;
 	}
 /* Fake hamburger icon */
 .btn--nav-main i {
 		display: block;
 		height: 4.2rem;
 		-webkit-transition: color 250ms, -webkit-box-shadow 250ms;
 		transition: color 250ms, -webkit-box-shadow 250ms;
 		-moz-transition: color 250ms, box-shadow 250ms, -moz-box-shadow 250ms;
 		transition: color 250ms, box-shadow 250ms;
 		transition: color 250ms, box-shadow 250ms, -webkit-box-shadow 250ms, -moz-box-shadow 250ms;
 	}
 .btn--nav-main i:before,
 	.btn--nav-main i:after {
 		content: '';
 		background-color: #54595d;
 		width: 2rem;
 		height: 2px;
 		position: absolute;
 		top: 0.4rem;
 		left: 0;
 	}
 .btn--nav-main i:after {
 		top: 1.1rem;
 		-webkit-box-shadow: 0 0.7rem 0 #54595d;
 		   -moz-box-shadow: 0 0.7rem 0 #54595d;
 		        box-shadow: 0 0.7rem 0 #54595d;
 	}
 .btn--nav-main i:hover:before,
 	.btn--nav-main i:hover:after {
 		background-color: #000; /* --color-base-emphasized */
 	}
 .btn--nav-main i:hover:after {
 		-webkit-box-shadow: 0 0.7rem 0 #000;
 		   -moz-box-shadow: 0 0.7rem 0 #000;
 		        box-shadow: 0 0.7rem 0 #000;
 	}
 .btn--nav-main span {
 		display: block;
 		position: absolute;
 		clip: rect( 1px, 1px, 1px, 1px );
 		width: 1px;
 		height: 1px;
 		margin: -1px;
 		overflow: hidden;
 	}
 /* ... GitHub Contribute Link ... */
 .lnk--contribute {
 		font-size: 1.4rem;
 		line-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */
 	}
 /* ... Content ... */
 .page {
 	background-color: #fff;
 	position: relative;
 	margin-top: 6.4rem;
 	padding: 6.4rem 0;
 	-webkit-box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
 	   -moz-box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
 	        box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
 	overflow-y: hidden;
 }
 .content {
 	float: left;
 }
 .col {
 	float: left;
 	position: relative;
 	min-height: 1px;
 }
 .col--start {
 		padding: 0;
 	}
 .col--end {
 		padding: 0;
 	}
 /* ... Main Navigation ... */
 .nav--main {
 	background-color: #fff; /* needed for menu appearance on mobile below */
 	/* margin-top: 6.4rem; */
 }
 .nav--main li:not( .is-on ) ul,
 .trigger--nav-main {
 	display: none;
 }
 .nav--main ol,
 .nav--main ul {
 	padding: 0;
 }
 .nav--main ol:first-child {
 	margin: 0;
 }
 .nav--main li {
 	padding: 0;
 	list-style: none none;
 }
 .nav--main > ol > li {
 	margin-bottom: 0.4rem;
 }
 .nav--main a {
 	color: #222;
 	display: block;
 	padding: 0.8rem 1.2rem;
 	font-size: 1.6rem;
 	text-decoration: none;
 	-webkit-transition: background-color 250ms, color 250ms, padding 250ms;
 	-moz-transition: background-color 250ms, color 250ms, padding 250ms;
 	transition: background-color 250ms, color 250ms, padding 250ms;
 }
 .nav--main a:hover,
 .nav--main a:focus {
 	background-color: #f8f9fa;
 	color: #000;
 }
 .nav--main .is-on > a {
 	background-color: #eaf3ff;
 	color: #36c;
 	/* border-left: 2px solid var( --color-primary ); */
 	-moz-border-radius: 2px;
 	     border-radius: 2px;
-	font-weight: 700;
+	font-weight: 600;
 	cursor: default;
 }
 .nav__sub-items {
 	margin-top: 1.2rem;
 	margin-bottom: 1em; /* FIXME: replace with rem and mt */
 }
 .nav__sub-items > .nav__sub-item {
 	margin-left: 3.6rem;
 }
 .nav--main .nav__sub-items ul {
 	margin: 0;
 }
 .nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */
 	color: #54595d;
 	border-left: 1px solid #eaecf0;
     -moz-border-radius: 0 2px 2px 0;
          border-radius: 0 2px 2px 0;
 	padding-left: 1.6rem;
 	font-size: 1.4rem;
 	-webkit-transition: background-color 250ms, color 250ms;
 	-moz-transition: background-color 250ms, color 250ms;
 	transition: background-color 250ms, color 250ms;
 }
 .nav--main .nav__sub-item.is-on > a {
 	background-color: #fff;
 	color: #000;
 	border-left-color: #000;
-	font-weight: 700;
+	font-weight: 600;
 }
 .nav--main .nav__sub-item .nav__sub-item a {
 	padding-left: 3.6rem;
 }
 /* ::: Content ::: */
 .page__parent-title {
 	color: #72777d;
 	margin-top: -2.8rem;
 }
 .page__title {
 	margin-top: -0.8rem;
 }
 .page__parent-title + .page__title {
 	margin-top: -0.4rem;
 }
 .page__tagline {
 	margin-top: 1.2rem;
 	font-size: 2rem;
 	font-style: italic;
 	font-weight: 100;
 }
 /* Remove, doesn't provide good styling
 .page__lead {
 	font-size: 1.8rem;
 }
 */
 .figures--full {
 	background-color: #f8f9fa;
 }
 .figure__caption,
 .heading__description {
 	color: #72777d;
 	clear: both;
 	display: block;
 	font-size: 1.3rem;
 }
 .figure__caption {
 	padding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */
 	font-style: italic;
 }
 .figure__caption:empty {
 		display: none;
 	}
 .heading__description {
 	float: right;
 	margin-top: -1.9rem;
 }
 .heading__description + * {
 		clear: both;
 	}
 /* ... “Do” & “Don't” figures ... */
 .figures-do-dont {
 	margin-top: 1.6rem;
 }
 .figures-do-dont .figure {
 	background-color: #eaecf0;
 	-moz-border-radius-topleft: 2px;
 	     border-top-left-radius: 2px;
 	-moz-border-radius-topright: 2px;
 	     border-top-right-radius: 2px;
 }
 .figures-do-dont .figure--dont {
 	border-left: 1px solid #fff;
 }
 .figures-do-dont .figure__caption {
 	background-color: #fff;
 	display: block;
 	border-top-width: 0.8rem;
 	border-top-style: solid;
 	padding-right: 0.8em;
 }
 .figure--do .figure__caption,
 .do {
 	border-top-color: #00af89;
 }
 .figure--dont .figure__caption,
 .dont {
 	border-top-color: #d33;
 }
 .do,
 .dont {
 	font-style: normal;
-	font-weight: 700;
+	font-weight: 600;
 }
 .do:before,
 	.dont:before {
 		display: inline-block;
 		margin-right: 0.4rem;
 		padding-top: 0.4rem;
 		font-size: 2.1rem;
 		line-height: 1rem;
 		vertical-align: top;
 	}
 .do {
 	color: #00af89;
 }
 .do:before {
 		content: '✓';
 	}
 .dont {
 	color: #d33;
 }
 .dont:before {
 		content: '×';
 	}
 /* ... Color ... */
 .color-palette {
 	margin: 2.4rem 0 0;
 	padding: 0;
 }
 .color-palette + .color-palette {
 	margin-top: 0;
 }
 .color {
 	color: #000;
 	list-style: none none;
 	display: block;
 	float: left;
 	position: relative;
 	width: 61.8%;
 	height: 16rem;
 	margin-bottom: 3.2rem;
 	padding: 1.2rem;
 	border: 1px solid #fff;
 	-moz-border-radius: 2px;
 	     border-radius: 2px;
 	font-size: 1.4rem;
 }
 .color--dark,
 	.color__wcag-level span {
 		color: #fff;
 	}
 .color--dark .color__wcag-level span {
 		color: #000;
 	}
 .color-palette .color:first-child {
 		margin-top: 0.4rem;
 	}
 .color-palette--overview .color {
 		width: 6.4rem;
 		height: 6.2rem;
 		margin-top: 0.8rem;
 		margin-right: 1.2rem;
 		margin-bottom: 2.4rem;
 		-moz-border-radius: 3.2rem;
 		     border-radius: 3.2rem;
 		cursor: default;
 	}
 .color-palette--overview .color:first-child {
 		margin-top: 0.8rem;
 	}
 .color-palette--overview .color--emphasized {
 		width: 7.2rem;
 		height: 7rem;
 		margin-top: 0;
 		-moz-border-radius: 7.2rem;
 		     border-radius: 7.2rem;
 		padding-top: 2rem;
 	}
 .color-palette--base .color {
 		margin-right: 1.35rem;
 	}
 .color-section .color .color-code--hsb {
 		-webkit-transition: opacity 250ms;
 		-moz-transition: opacity 250ms;
 		transition: opacity 250ms;
 	}
 .color-section .color:hover .color-code--hsb {
 			opacity: 1;
 		}
 .color__name {
 		display: block;
 		position: absolute;
 		bottom: 1.2rem;
 		left: 1.2rem;
 		font-size: 3.2rem;
 		font-weight: 100;
 	}
 .color-palette--overview .color__name {
 			position: relative;
 			bottom: auto;
 			left: auto;
 			padding-top: 1.2rem;
 			font-size: 2.4rem;
 			line-height: 1;
 		}
 .color__type,
 		.color-code.color-code--rgb,
 		.color-palette--overview .color__name,
 		.color-palette--overview .color-code {
 			display: none;
 		}
 .color-code {
 		background-color: inherit;
 		display: block;
 		padding: 0;
 		font-family: -apple-system
 ,
 'BlinkMacSystemFont'
 ,
 'Segoe UI'
 ,
 'Roboto'
 ,
 'Lato'
 ,
 'Helvetica'
 ,
 'Arial'
 ,
 sans-serif;
 	}
 .color-code--hsb {
 			opacity: 0;
 		}
 @supports ( --css: variables ) {
 	.color-hint {
 		white-space: nowrap;
 	}
 
 	.color-hint:before {
 		content: '';
 		background-color: var( --color-hint );
 		display: inline-block;
 		width: 1.2rem;
 		height: 1.2rem;
 		margin: 0 0.4rem 0.3rem 0.2rem;
 		-moz-border-radius: 50%;
 		     border-radius: 50%;
 		vertical-align: text-bottom;
 		cursor: help;
 	}
 
 	.color-hint--base100:before {
 		border: 1px
 solid
 #a2a9b1;
 	}
 }
 /* ... Icon ... */
 .icon {
 	display: inline-block;
 	width: 2rem;
 	height: 2rem;
 	margin: 0 0.2rem;
 	vertical-align: text-bottom;
 }
 .icon--indicator {
 		width: 1.2rem;
 		height: 1.2rem;
 		margin-bottom: 0.2rem;
 	}
 .icon--intermediate {
 		width: 1.6rem;
 		height: 1.6rem;
 		margin-bottom: 0.2rem;
 	}
 /* ... Components ... */
 /*
 .page--components h2 {
 	border-bottom: 0;
 	padding-bottom: 0;
 }
 */
 .components__designing {
 	position: relative;
 }
 .components__designing:after {
 	content: '';
 	background: url( ../../img/components/legend_16-8.svg ) no-repeat;
 	position: absolute;
 	bottom: 0;
 	right: 6.4rem;
 	width: 13.2rem;
 	height: 6.4rem;
 }
 .page--components-messages .components__intro {
 	max-width: 700px;
 	margin-left: auto;
 	margin-right: auto;
 }
 /* ... Resources ... */
 .resources-table {
 	display: table;
 	width: 100%;
 	margin-top: 2.4rem;
 	border-collapse: collapse;
 }
 .resources-table__head,
 .resources-table__body {
 	display: table-row;
 	border-bottom: 1px solid #a2a9b1;
 }
 .resources-table__head {
 	background-color: #eaecf0;
 }
 .resources-table__head h2 {
 		margin-top: 0;
 		border-bottom: 0;
 		padding-bottom: 0;
 		font-size: 2.1rem;
 		font-weight: 400;
 	}
 .resources-table__cell {
 	display: table-cell;
 	padding: 1.6rem 1.6rem 1.6rem 0;
 }
 .resources-table__head .resources-table__cell:first-child {
 		padding-left: 1.6rem;
 	}
 .lnk-resource {
 	white-space: nowrap;
 }
 /* ::: Footer ::: */
 .footer {
 	color: #222;
 	padding: 2.4rem 0;
 	font-size: 1.3rem;
 }
 .footer__list {
 	padding: 0;
 }
 .footer__list:first-child {
 		margin: 0;
 	}
 .footer__list:after {
 		content: ' ';
 		display: block;
 		clear: both;
 	}
 .footer__list li {
 		list-style: none none;
 		display: block;
 		padding: 0.8rem 0 0;
 	}
 .footer__list li:first-child {
 		padding-top: 0;
 	}
 .footer__list + p {
 		margin-top: 1.2rem;
 	}
 .footer__list--connect a {
-		font-weight: 700;
+		font-weight: 600;
 	}
 .lnk--wikimedia-project {
 	display: inline-block;
 	padding: 0.4rem 0;
 	text-transform: uppercase;
 }
 /* ::: Page-specific Styles ::: */
 /* ... Homepage ... */
 .page--home .page__title {
 	border: 0;
 	padding: 0;
 }
 /* ... “Design principles – Accessibility” ... */
 .page--design-principles-accessibility .nav--main .is-on > a {
 	cursor: pointer;
 }
 .page--design-principles-accessibility h3 {
 	padding-right: 15%;
 }
 /* ... “Typography” ... */
 .page--visual-style-typography .figures-do-dont .figure__contents {
 	padding: 4.2rem 3.6rem;
 }
 .figures-do-dont--contrast .figure--dont {
 	color: #a2a9b1;
 }
 /* ... Typography Styles ... */
 .typography-styles dt {
 	display: inline-block;
 	color: #72777d;
 	min-width: 10rem;
 	margin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */
 	font-size: 1.3rem;
-	font-weight: 700;
+	font-weight: 600;
 	vertical-align: top;
 }
 .typography-styles .typography-styles__code {
 	margin-bottom: 0;
 }
 .typography-styles dd {
 	display: inline;
 }
 .typography-styles dd > * {
 	display: inline-block;
 	margin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */
 }
 .typography-styles .figure__caption {
 	padding-top: 0; /* Remove `padding` from elements like figure caption */
 }
 .typography-styles dd:after {
      content: '\A';
      white-space: pre;
 }
 .typography-styles + hr {
 	margin-top: 4rem;
 	margin-bottom: 4rem;
 }
 /* ... “Icons” ... */
 .page--visual-style-icons img { /* FIXME: generalize image styles */
 	background-color: #eaecf0; /* FIXME: var; */
 	padding: 2.4rem;
 }
 /* ::: Dynamic content ::: */
 .fonts-loaded cite,
 .fonts-loaded .site__title,
 .fonts-loaded .color-code {
 	font-family: -apple-system
 ,
 'BlinkMacSystemFont'
 ,
 'Segoe UI'
 ,
 'Roboto'
 ,
 'Lato'
 ,
 'Helvetica'
 ,
 'Arial'
 ,
 sans-serif;
 }
 /* ::: Text Block-Level Elements ::: */
 .fonts-loaded .page__title,
 .fonts-loaded blockquote,
 .fonts-loaded .typography-styles h1 {
 	font-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */
 }
 /* ::: Media Queries ::: */
 /* ... Smartphone only ... */
 @media ( max-width: 767px ) {
 	.nav--main {
 		position: absolute;
 		top: -3.2rem;
 		left: -1.6rem;
 		right: -1.6rem;
 		padding-bottom: 1.6rem;
 		-webkit-box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
 		   -moz-box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
 		        box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */
 		z-index: 1;
 		-webkit-transform: translateY( -200% );
 		   -moz-transform: translateY( -200% );
 		    -ms-transform: translateY( -200% );
 		        transform: translateY( -200% );
 		-webkit-transition: left 250ms, right 250ms, -webkit-transform 250ms;
 		transition: left 250ms, right 250ms, -webkit-transform 250ms;
 		-moz-transition: left 250ms, right 250ms, transform 250ms, -moz-transform 250ms;
 		transition: left 250ms, right 250ms, transform 250ms;
 		transition: left 250ms, right 250ms, transform 250ms, -webkit-transform 250ms, -moz-transform 250ms;
 	}
 
 	.trigger--nav-main:checked + .nav--main {
 		-webkit-transform: translateY( 0 );
 		   -moz-transform: translateY( 0 );
 		    -ms-transform: translateY( 0 );
 		        transform: translateY( 0 );
 	}
 
 	.page__title {
 		margin-top: -0.4rem;
 		font-size: 2.8rem;
 	}
 
 	.typography-styles dt {
 		display: block;
 		margin-left: 0;
 	}
 
 	/* ... Components ... */
 	.page--components .components__states {
 		margin-left: 0;
 	}
 
 	/* ... Resources ... */
 	.resources-table,
 	.resources-table__head,
 	.resources-table__body,
 	.resources-table__cell {
 		display: block;
 	}
 
 	.resources-table__head {
 		margin-left: -1.6rem;
 		margin-right: -1.6rem;
 	}
 
 	.resources-table__head .resources-table__cell:empty {
 		display: none;
 	}
 
 	.resources-table__body {
 		padding-left: 0;
 	}
 
 	.resources-table__cell {
 		padding-top: 0.8rem;
 		padding-bottom: 0.8rem;
 	}
 }
 /* ... Smartphone portrait ... */
 @media ( min-width: 240px ) {
 	.content-box,
 	.site__title a,
 	.nav--main a {
 		-webkit-transition-property: background-color, padding;
 		-moz-transition-property: background-color, padding;
 		transition-property: background-color, padding;
 		-webkit-transition-duration: 250ms;
 		   -moz-transition-duration: 250ms;
 		        transition-duration: 250ms;
 	}
 
 	.site__title {
 		margin-left: 4.2rem;
 	}
 
 		.site__title a {
 			padding-left: 0;
 		}
 
 	.lnk--contribute span {
 		display: none;
 	}
 
 	.nav--main a {
 		padding-left: 1.6rem;
 		padding-right: 1.6rem;
 	}
 
 	.col--start,
 	.col--end {
 		width: 100%;
 	}
 
 	.figure--full,
 	.resources-table__head {
 		margin-left: -1.6rem;
 		margin-right: -1.6rem;
 	}
 
 	.figure--full .figure__caption {
 		margin-left: 1.6rem;
 		margin-right: 1.6rem;
 	}
 
 	.figure--this-is-for-everyone img,
 	.figure--trustworthy-yet-joyful img {
 		width: 100%;
 		max-width: 568px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	.figure--illustrations-header img {
 		width: 100%;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header,
 	.figure--illustrations-header + .figure--illustrations-header img {
 		margin-top: 0;
 	}
 
 	.color {
 		width: 61.8%;
 	}
 
 	.color-palette--base .color:nth-child( 3n+4 ) {
 		clear: both;
 	}
 
 	.color-palette--base .color {
 		margin-right: 1.6rem;
 	}
 
 	.color-palette--overview.color-palette--base .color--emphasized {
 		margin-right: 1.1rem;
 		margin-left: -0.2rem;
 	}
 
 	.page--components figure {
 		margin-left: 4.2rem;
 	}
 }
 /* ... Smartphone+ portrait ... */
 @media ( min-width: 414px ) {
 	.content-box {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.nav--main {
 		left: -3.2rem;
 		right: -3.2rem;
 	}
 
 		.nav--main a {
 			padding-left: 3.2rem;
 			padding-right: 3.2rem;
 		}
 
 	.figure--full,
 	.resources-table__head {
 		margin-left: -3.2rem;
 		margin-right: -3.2rem;
 	}
 
 	.figure--full .figure__caption {
 		margin-left: 3.2rem;
 		margin-right: 3.2rem;
 	}
 
 	.resources-table__head .resources-table__cell:first-child {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.footer__list li {
 		display: list-item;
 		float: left;
 		padding: 0 0.8rem 0 0;
 	}
 
 	.footer__list li:after {
 		content: '\2022'; /* bullet dot: '•' */
 		color: #72777d;
 		padding: 0 0 0 0.8rem;
 		font-weight: 100;
 	}
 
 	.footer__list li:last-child:after {
 		content: '';
 		padding: 0;
 	}
 
 	.color {
 		width: 16rem;
 		margin-right: 2.4rem;
 	}
 }
 /* ... Smartphone landscape ... */
 @media ( min-width: 568px ) {
 	.lnk--contribute {
 		display: block;
 		position: absolute;
 		bottom: 1.5rem; /* Not on 8px base due to `line-height` setting */
 		right: 3.2rem;
 		text-align: right;
 	}
 
 	.lnk--contribute span {
 		display: inline;
 		opacity: 0;
 		-webkit-transition: opacity 250ms;
 		-moz-transition: opacity 250ms;
 		transition: opacity 250ms;
 	}
 
 	.figures-do-dont .figure {
 		max-width: 61.8%;
 	}
 
 	.figure--this-is-for-everyone img,
 	.figure--trustworthy-yet-joyful img {
 		max-width: none;
 	}
 
 	.figure--illustrations-header {
 		float: left;
 		width: 44.4%;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header {
 		width: 55.55%;
 		margin-top: 0.8rem;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header img {
 		margin-top: 1.6rem;
 	}
 }
 /* ... Tablet ... */
 @media ( min-width: 768px ) {
 	img {
 		-moz-border-radius: 2px;
 		     border-radius: 2px;
 	}
 
 	.content-box {
 		width: 100%;
 		max-width: 960px;
 	}
 
 	.btn--nav-main {
 		display: none;
 	}
 
 	.site__title {
 		float: left;
 		margin-left: 0;
 	}
 
 		.site__title a,
 		.nav--main a {
 			padding-left: 1.6rem;
 			padding-right: 1.6rem;
 		}
 
 	.lnk--contribute span {
 		display: inline;
 		opacity: 1;
 	}
 
 	.col--start {
 		width: 20.8rem;
 		z-index: 1;
 		-webkit-transition: width 250ms;
 		-moz-transition: width 250ms;
 		transition: width 250ms;
 	}
 
 	.col--end {
 		margin-left: -20.8rem;
 		padding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */
 	}
 
 	.nav--main {
 		left: auto;
 		right: auto;
 	}
 
 	.figure--full,
 	.figure--full .figure__caption {
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	.figures-do-dont .figure {
 		float: left;
 		width: 50%;
 	}
 
 	.color-palette--base .color:nth-child( 3n+4 ) {
 		clear: unset;
 	}
 
 	/* ... “Illustrations” ... */
 	.illustrations-case-study img {
 		float: left;
 		width: 33.33%;
 	}
 
 	.page--components figure {
 		margin-left: 6.4rem;
 	}
 }
 /* ... Tablet+ / Netbook ... */
 @media ( min-width: 992px ) {
 	.content-box {
 		width: 100%;
 		max-width: 1140px;
 	}
 
 	.site__title a,
 	.nav--main a {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.col--start {
 		width: 24rem;
 	}
 
 	.col--end {
 		margin-left: -24rem;
 		padding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */
 	}
 
 	.color-palette--overview:first-child {
 		margin-top: 2.4rem;
 	}
 
 	.color {
 		margin-right: 2.4rem;
 	}
 
 		.color-palette--base .color {
 			margin-right: 1.35rem;
 		}
 
 		.color-palette--overview.color-palette--base .color--emphasized {
 			margin-right: 1.35rem;
 			margin-left: 0;
 		}
 
 	.color-palette--overview.color-palette--red:before,
 	.color-palette--overview.color-palette--red:after,
 	.color-palette--overview.color-palette--green:before,
 	.color-palette--overview.color-palette--green:after {
 		content: '';
 		display: none;
 	}
 
 	.color-palette--overview.color-palette--red:after,
 	.color-palette--overview.color-palette--green:after,
 	.color-section .color:nth-child( 3n+4 ) {
 		clear: both;
 	}
 
 	/* ... Resources ... */
 	.resources-table__body .resources-table__cell {
 		-webkit-transition: background-color 250ms;
 		-moz-transition: background-color 250ms;
 		transition: background-color 250ms;
 	}
 
 		.resources-table__body:hover .resources-table__cell {
 			background-color: #f8f9fa;
 		}
 
 		.resources-table__head .resources-table__cell:first-child,
 		.resources-table__body .resources-table__cell:first-child {
 			padding-left: 1.6rem;
 		}
 }
 @media ( min-width: 1200px ) {
 	.content-box {
 		width: 1140px;
 	}
 
 	.col--start {
 		width: 25.6rem;
 	}
 
 	.col--end {
 		margin-left: -25.6rem;
 		padding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */
 	}
 }
diff --git a/css/build/wmui-style-guide.min.css b/css/build/wmui-style-guide.min.css
index 3d04bb0..62b2ce4 100644
--- a/css/build/wmui-style-guide.min.css
+++ b/css/build/wmui-style-guide.min.css
@@ -1,2 +1,2 @@
-/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#222;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic;line-height:1.5}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0;line-height:1.5}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}.is-subtle{color:#72777d}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#222;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:700}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,-webkit-box-shadow .25s;transition:color .25s,-webkit-box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-webkit-box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-webkit-box-shadow:0 .7rem 0 #54595d;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-webkit-box-shadow:0 .7rem 0 #000;-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#222;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:700;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:700}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:700}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#00af89}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#222;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:700}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:700;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}}
+/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:rgba(0,0,0,0);-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;-moz-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}@font-face{font-family:Charter;src:url(../../fonts/Charter_regular.woff2) format("woff2"),url(../../fonts/Charter_regular.woff) format("woff");font-style:normal;font-weight:400;text-rendering:optimizeLegibility}@font-face{font-family:Charter;src:url(../../fonts/Charter_bold.woff2) format("woff2"),url(../../fonts/Charter_bold.woff) format("woff");font-style:normal;font-weight:700;text-rendering:optimizeLegibility}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:62.5%}body{background-color:#eaecf0;color:#222;margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;line-height:1.6}h1,h2,h3,h4,h5,h6{margin:3.2rem 0 0;line-height:1.25;-webkit-transition:font-size .25s,font-weight .25s;-moz-transition:font-size .25s,font-weight .25s;transition:font-size .25s,font-weight .25s}h2,h3,h4,h5{font-weight:600}.page__title,h1{font-family:Georgia,serif;font-size:3.2rem;font-weight:400}h2{border-bottom:3px solid #eaecf0;padding-bottom:2px;font-size:2.4rem}h2+h3{margin-top:1.6rem}h3{font-size:2rem}h4{font-size:1.8rem}h5,h6{font-size:1.6rem}h6{font-weight:400}blockquote{border-left:3px solid #c8ccd1;margin:1.6rem 0 0;padding:0 3.2rem;font-family:Georgia,serif;font-size:2rem;font-style:italic;line-height:1.5}blockquote cite{display:block;margin-top:.8rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.4rem;font-style:normal}blockquote cite:before{content:"— "}.mw-code,code,pre{font-family:Menlo,Consolas,Liberation Mono,Courier New,monospace}hr{background:#eaecf0;display:block;height:.8rem;border:0;margin:8rem 0}p{margin:3.2rem 0 0;line-height:1.5}h1+p,h2+p,h3+p,h4+p,h5+p,h6+p,p+p,p:first-child,ul+p{margin:.8rem 0 0}blockquote+p{margin-top:1.6rem}.mw-code,pre{background-color:#f8f9fa;color:#000;border:1px solid #a2a9b1;padding:1.2rem 2rem;font-size:1.4rem;white-space:pre-wrap}ol,ul{margin:.8rem 0;padding:0 0 0 1.8rem}.content li{margin-top:.4rem}.content li:first-child{margin-top:0}figure{margin:.8rem 0 0}img{display:block;max-width:100%;margin:1.6rem 0 0}.page--components figure{margin-left:6.4rem;padding-top:.8rem}.page--components figure img{margin-top:.8rem}a{color:#36c;text-decoration:none}a:hover{text-decoration:underline}a:active{color:#2a4b8d}b,strong{font-weight:600}code{background-color:#f8f9fa;display:inline-block;padding:.2rem .4rem;font-size:1.4rem}small{font-size:1.3rem}sub,sup{font-size:1.1rem}.is-aural{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;border:0;padding:0;overflow:hidden}.is-aural.is-focusable:active,.is-aural.is-focusable:focus{position:static;clip:auto;width:auto;height:auto;margin:0;text-decoration:underline;overflow:visible}.clearfix:after,.clearfix:before,.color-palette:after,.color-palette:before,.content-box:after,.content-box:before,.content__illustration-style .figure--full:after,.content__illustration-style .figure--full:before,.figures-do-dont:after,.figures-do-dont:before,.page:after,.page:before{content:" ";display:table}.clearfix:after,.color-palette:after,.content-box:after,.content__illustration-style .figure--full:after,.figures-do-dont:after,.page:after{clear:both}.is-subtle{color:#72777d}.content-box{position:relative;margin-right:auto;margin-left:auto;padding-left:1.6rem;padding-right:1.6rem}.header{position:fixed;top:0;left:0;right:0;min-height:6.4rem;line-height:6.4rem}.site__title{color:#222;margin-top:0;height:6.4rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif;font-size:1.6rem;font-weight:400;letter-spacing:.5px}.site__title a{color:inherit;display:inline-block;padding:1.2rem 3.2rem 0;-webkit-transition:color .25s;-moz-transition:color .25s;transition:color .25s}.site__title a:hover{color:#000;text-decoration:none}.site__org{display:block}.site__project{font-weight:600}.btn--nav-main{position:absolute;top:1.2rem;width:4.2rem;height:4.2rem;cursor:pointer}.btn--nav-main i{display:block;height:4.2rem;-webkit-transition:color .25s,-webkit-box-shadow .25s;transition:color .25s,-webkit-box-shadow .25s;-moz-transition:color .25s,box-shadow .25s,-moz-box-shadow .25s;transition:color .25s,box-shadow .25s;transition:color .25s,box-shadow .25s,-webkit-box-shadow .25s,-moz-box-shadow .25s}.btn--nav-main i:after,.btn--nav-main i:before{content:"";background-color:#54595d;width:2rem;height:2px;position:absolute;top:.4rem;left:0}.btn--nav-main i:after{top:1.1rem;-webkit-box-shadow:0 .7rem 0 #54595d;-moz-box-shadow:0 .7rem 0 #54595d;box-shadow:0 .7rem 0 #54595d}.btn--nav-main i:hover:after,.btn--nav-main i:hover:before{background-color:#000}.btn--nav-main i:hover:after{-webkit-box-shadow:0 .7rem 0 #000;-moz-box-shadow:0 .7rem 0 #000;box-shadow:0 .7rem 0 #000}.btn--nav-main span{display:block;position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;margin:-1px;overflow:hidden}.lnk--contribute{font-size:1.4rem;line-height:1.4rem}.page{background-color:#fff;position:relative;margin-top:6.4rem;padding:6.4rem 0;-webkit-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);-moz-box-shadow:0 1px 4px 0 rgba(0,0,0,.25);box-shadow:0 1px 4px 0 rgba(0,0,0,.25);overflow-y:hidden}.col,.content{float:left}.col{position:relative;min-height:1px}.col--end,.col--start{padding:0}.nav--main{background-color:#fff}.nav--main li:not(.is-on) ul,.trigger--nav-main{display:none}.nav--main ol,.nav--main ul{padding:0}.nav--main ol:first-child{margin:0}.nav--main li{padding:0;list-style:none none}.nav--main>ol>li{margin-bottom:.4rem}.nav--main a{color:#222;display:block;padding:.8rem 1.2rem;font-size:1.6rem;text-decoration:none;-webkit-transition:background-color .25s,color .25s,padding .25s;-moz-transition:background-color .25s,color .25s,padding .25s;transition:background-color .25s,color .25s,padding .25s}.nav--main a:focus,.nav--main a:hover{background-color:#f8f9fa;color:#000}.nav--main .is-on>a{background-color:#eaf3ff;color:#36c;-moz-border-radius:2px;border-radius:2px;font-weight:600;cursor:default}.nav__sub-items{margin-top:1.2rem;margin-bottom:1em}.nav__sub-items>.nav__sub-item{margin-left:3.6rem}.nav--main .nav__sub-items ul{margin:0}.nav--main .nav__sub-items a{color:#54595d;border-left:1px solid #eaecf0;-moz-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;padding-left:1.6rem;font-size:1.4rem;-webkit-transition:background-color .25s,color .25s;-moz-transition:background-color .25s,color .25s;transition:background-color .25s,color .25s}.nav--main .nav__sub-item.is-on>a{background-color:#fff;color:#000;border-left-color:#000;font-weight:600}.nav--main .nav__sub-item .nav__sub-item a{padding-left:3.6rem}.page__parent-title{color:#72777d;margin-top:-2.8rem}.page__title{margin-top:-.8rem}.page__parent-title+.page__title{margin-top:-.4rem}.page__tagline{margin-top:1.2rem;font-size:2rem;font-style:italic;font-weight:100}.figures--full{background-color:#f8f9fa}.figure__caption,.heading__description{color:#72777d;clear:both;display:block;font-size:1.3rem}.figure__caption{padding-top:.8rem;font-style:italic}.figure__caption:empty{display:none}.heading__description{float:right;margin-top:-1.9rem}.heading__description+*{clear:both}.figures-do-dont{margin-top:1.6rem}.figures-do-dont .figure{background-color:#eaecf0;-moz-border-radius-topleft:2px;border-top-left-radius:2px;-moz-border-radius-topright:2px;border-top-right-radius:2px}.figures-do-dont .figure--dont{border-left:1px solid #fff}.figures-do-dont .figure__caption{background-color:#fff;display:block;border-top-width:.8rem;border-top-style:solid;padding-right:.8em}.do,.figure--do .figure__caption{border-top-color:#00af89}.dont,.figure--dont .figure__caption{border-top-color:#d33}.do,.dont{font-style:normal;font-weight:600}.do:before,.dont:before{display:inline-block;margin-right:.4rem;padding-top:.4rem;font-size:2.1rem;line-height:1rem;vertical-align:top}.do{color:#00af89}.do:before{content:"✓"}.dont{color:#d33}.dont:before{content:"×"}.color-palette{margin:2.4rem 0 0;padding:0}.color-palette+.color-palette{margin-top:0}.color{color:#000;list-style:none none;display:block;float:left;position:relative;width:61.8%;height:16rem;margin-bottom:3.2rem;padding:1.2rem;border:1px solid #fff;-moz-border-radius:2px;border-radius:2px;font-size:1.4rem}.color--dark,.color__wcag-level span{color:#fff}.color--dark .color__wcag-level span{color:#000}.color-palette .color:first-child{margin-top:.4rem}.color-palette--overview .color{width:6.4rem;height:6.2rem;margin-top:.8rem;margin-right:1.2rem;margin-bottom:2.4rem;-moz-border-radius:3.2rem;border-radius:3.2rem;cursor:default}.color-palette--overview .color:first-child{margin-top:.8rem}.color-palette--overview .color--emphasized{width:7.2rem;height:7rem;margin-top:0;-moz-border-radius:7.2rem;border-radius:7.2rem;padding-top:2rem}.color-palette--base .color{margin-right:1.35rem}.color-section .color .color-code--hsb{-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.color-section .color:hover .color-code--hsb{opacity:1}.color__name{display:block;position:absolute;bottom:1.2rem;left:1.2rem;font-size:3.2rem;font-weight:100}.color-palette--overview .color__name{position:relative;bottom:auto;left:auto;padding-top:1.2rem;font-size:2.4rem;line-height:1}.color-code.color-code--rgb,.color-palette--overview .color-code,.color-palette--overview .color__name,.color__type{display:none}.color-code{background-color:inherit;display:block;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.color-code--hsb{opacity:0}@supports (--css:variables){.color-hint{white-space:nowrap}.color-hint:before{content:"";background-color:var(--color-hint);display:inline-block;width:1.2rem;height:1.2rem;margin:0 .4rem .3rem .2rem;-moz-border-radius:50%;border-radius:50%;vertical-align:text-bottom;cursor:help}.color-hint--base100:before{border:1px solid #a2a9b1}}.icon{display:inline-block;width:2rem;height:2rem;margin:0 .2rem;vertical-align:text-bottom}.icon--indicator{width:1.2rem;height:1.2rem;margin-bottom:.2rem}.icon--intermediate{width:1.6rem;height:1.6rem;margin-bottom:.2rem}.components__designing{position:relative}.components__designing:after{content:"";background:url(../../img/components/legend_16-8.svg) no-repeat;position:absolute;bottom:0;right:6.4rem;width:13.2rem;height:6.4rem}.page--components-messages .components__intro{max-width:700px;margin-left:auto;margin-right:auto}.resources-table{display:table;width:100%;margin-top:2.4rem;border-collapse:collapse}.resources-table__body,.resources-table__head{display:table-row;border-bottom:1px solid #a2a9b1}.resources-table__head{background-color:#eaecf0}.resources-table__head h2{margin-top:0;border-bottom:0;padding-bottom:0;font-size:2.1rem;font-weight:400}.resources-table__cell{display:table-cell;padding:1.6rem 1.6rem 1.6rem 0}.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}.lnk-resource{white-space:nowrap}.footer{color:#222;padding:2.4rem 0;font-size:1.3rem}.footer__list{padding:0}.footer__list:first-child{margin:0}.footer__list:after{content:" ";display:block;clear:both}.footer__list li{list-style:none none;display:block;padding:.8rem 0 0}.footer__list li:first-child{padding-top:0}.footer__list+p{margin-top:1.2rem}.footer__list--connect a{font-weight:600}.lnk--wikimedia-project{display:inline-block;padding:.4rem 0;text-transform:uppercase}.page--home .page__title{border:0;padding:0}.page--design-principles-accessibility .nav--main .is-on>a{cursor:pointer}.page--design-principles-accessibility h3{padding-right:15%}.page--visual-style-typography .figures-do-dont .figure__contents{padding:4.2rem 3.6rem}.figures-do-dont--contrast .figure--dont{color:#a2a9b1}.typography-styles dt{display:inline-block;color:#72777d;min-width:10rem;margin:0 0 3.2rem 1.6rem;font-size:1.3rem;font-weight:600;vertical-align:top}.typography-styles .typography-styles__code{margin-bottom:0}.typography-styles dd{display:inline}.typography-styles dd>*{display:inline-block;margin-top:0}.typography-styles .figure__caption{padding-top:0}.typography-styles dd:after{content:"\A";white-space:pre}.typography-styles+hr{margin-top:4rem;margin-bottom:4rem}.page--visual-style-icons img{background-color:#eaecf0;padding:2.4rem}.fonts-loaded .color-code,.fonts-loaded .site__title,.fonts-loaded cite{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Lato,Helvetica,Arial,sans-serif}.fonts-loaded .page__title,.fonts-loaded .typography-styles h1,.fonts-loaded blockquote{font-family:Charter,Georgia,serif}@media (max-width:767px){.nav--main{position:absolute;top:-3.2rem;left:-1.6rem;right:-1.6rem;padding-bottom:1.6rem;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);-moz-box-shadow:0 2px 2px 0 rgba(0,0,0,.25);box-shadow:0 2px 2px 0 rgba(0,0,0,.25);z-index:1;-webkit-transform:translateY(-200%);-moz-transform:translateY(-200%);-ms-transform:translateY(-200%);transform:translateY(-200%);-webkit-transition:left .25s,right .25s,-webkit-transform .25s;transition:left .25s,right .25s,-webkit-transform .25s;-moz-transition:left .25s,right .25s,transform .25s,-moz-transform .25s;transition:left .25s,right .25s,transform .25s;transition:left .25s,right .25s,transform .25s,-webkit-transform .25s,-moz-transform .25s}.trigger--nav-main:checked+.nav--main{-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}.page__title{margin-top:-.4rem;font-size:2.8rem}.typography-styles dt{display:block;margin-left:0}.page--components .components__states{margin-left:0}.resources-table,.resources-table__body,.resources-table__cell,.resources-table__head{display:block}.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.resources-table__head .resources-table__cell:empty{display:none}.resources-table__body{padding-left:0}.resources-table__cell{padding-top:.8rem;padding-bottom:.8rem}}@media (min-width:240px){.content-box,.nav--main a,.site__title a{-webkit-transition-property:background-color,padding;-moz-transition-property:background-color,padding;transition-property:background-color,padding;-webkit-transition-duration:.25s;-moz-transition-duration:.25s;transition-duration:.25s}.site__title{margin-left:4.2rem}.site__title a{padding-left:0}.lnk--contribute span{display:none}.nav--main a{padding-left:1.6rem;padding-right:1.6rem}.col--end,.col--start{width:100%}.figure--full,.resources-table__head{margin-left:-1.6rem;margin-right:-1.6rem}.figure--full .figure__caption{margin-left:1.6rem;margin-right:1.6rem}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{width:100%;max-width:568px;margin-left:auto;margin-right:auto}.figure--illustrations-header img{width:100%}.figure--illustrations-header+.figure--illustrations-header,.figure--illustrations-header+.figure--illustrations-header img{margin-top:0}.color{width:61.8%}.color-palette--base .color:nth-child(3n+4){clear:both}.color-palette--base .color{margin-right:1.6rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.1rem;margin-left:-.2rem}.page--components figure{margin-left:4.2rem}}@media (min-width:414px){.content-box{padding-left:3.2rem;padding-right:3.2rem}.nav--main{left:-3.2rem;right:-3.2rem}.nav--main a{padding-left:3.2rem;padding-right:3.2rem}.figure--full,.resources-table__head{margin-left:-3.2rem;margin-right:-3.2rem}.figure--full .figure__caption{margin-left:3.2rem;margin-right:3.2rem}.resources-table__head .resources-table__cell:first-child{padding-left:3.2rem;padding-right:3.2rem}.footer__list li{display:list-item;float:left;padding:0 .8rem 0 0}.footer__list li:after{content:"\2022";color:#72777d;padding:0 0 0 .8rem;font-weight:100}.footer__list li:last-child:after{content:"";padding:0}.color{width:16rem;margin-right:2.4rem}}@media (min-width:568px){.lnk--contribute{display:block;position:absolute;bottom:1.5rem;right:3.2rem;text-align:right}.lnk--contribute span{display:inline;opacity:0;-webkit-transition:opacity .25s;-moz-transition:opacity .25s;transition:opacity .25s}.figures-do-dont .figure{max-width:61.8%}.figure--this-is-for-everyone img,.figure--trustworthy-yet-joyful img{max-width:none}.figure--illustrations-header{float:left;width:44.4%}.figure--illustrations-header+.figure--illustrations-header{width:55.55%;margin-top:.8rem}.figure--illustrations-header+.figure--illustrations-header img{margin-top:1.6rem}}@media (min-width:768px){img{-moz-border-radius:2px;border-radius:2px}.content-box{width:100%;max-width:960px}.btn--nav-main{display:none}.site__title{float:left;margin-left:0}.nav--main a,.site__title a{padding-left:1.6rem;padding-right:1.6rem}.lnk--contribute span{display:inline;opacity:1}.col--start{width:20.8rem;z-index:1;-webkit-transition:width .25s;-moz-transition:width .25s;transition:width .25s}.col--end{margin-left:-20.8rem;padding-left:24rem}.nav--main{left:auto;right:auto}.figure--full,.figure--full .figure__caption{margin-left:0;margin-right:0}.figures-do-dont .figure{float:left;width:50%}.color-palette--base .color:nth-child(3n+4){clear:unset}.illustrations-case-study img{float:left;width:33.33%}.page--components figure{margin-left:6.4rem}}@media (min-width:992px){.content-box{width:100%;max-width:1140px}.nav--main a,.site__title a{padding-left:3.2rem;padding-right:3.2rem}.col--start{width:24rem}.col--end{margin-left:-24rem;padding-left:27.2rem}.color-palette--overview:first-child{margin-top:2.4rem}.color{margin-right:2.4rem}.color-palette--base .color{margin-right:1.35rem}.color-palette--overview.color-palette--base .color--emphasized{margin-right:1.35rem;margin-left:0}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--green:before,.color-palette--overview.color-palette--red:after,.color-palette--overview.color-palette--red:before{content:"";display:none}.color-palette--overview.color-palette--green:after,.color-palette--overview.color-palette--red:after,.color-section .color:nth-child(3n+4){clear:both}.resources-table__body .resources-table__cell{-webkit-transition:background-color .25s;-moz-transition:background-color .25s;transition:background-color .25s}.resources-table__body:hover .resources-table__cell{background-color:#f8f9fa}.resources-table__body .resources-table__cell:first-child,.resources-table__head .resources-table__cell:first-child{padding-left:1.6rem}}@media (min-width:1200px){.content-box{width:1140px}.col--start{width:25.6rem}.col--end{margin-left:-25.6rem;padding-left:28.8rem}}
 /*# sourceMappingURL=wmui-style-guide.min.css.map */
\ No newline at end of file
diff --git a/css/build/wmui-style-guide.min.css.map b/css/build/wmui-style-guide.min.css.map
index 0ea9b22..e19cbf5 100644
--- a/css/build/wmui-style-guide.min.css.map
+++ b/css/build/wmui-style-guide.min.css.map
@@ -1 +1 @@
-{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"AAAA,4EAA4E,AAW5E,KACE,iBAAkB,AAClB,0BAA2B,AAC3B,6BAA+B,CAChC,AAiBD,wCAME,aAAe,CAChB,AAOD,GACE,cAAe,AACf,cAAiB,CAClB,AAUD,uBAGE,aAAe,CAChB,AAMD,OACE,eAAiB,CAClB,AAOD,GACE,+BAAwB,AAAxB,4BAAwB,AAAxB,uBAAwB,AACxB,SAAU,AACV,gBAAkB,CACnB,AAOD,IACE,gCAAkC,AAClC,aAAe,CAChB,AAUD,EACE,+BAA8B,AAC9B,oCAAsC,CACvC,AAOD,YACE,mBAAoB,AACpB,0BAA2B,AAC3B,yCAAkC,AAAlC,sCAAkC,AAAlC,gCAAkC,CACnC,AAMD,SAEE,oBAAqB,AASrB,kBAAoB,CARrB,AAgBD,cAGE,gCAAkC,AAClC,aAAe,CAChB,AAMD,IACE,iBAAmB,CACpB,AAMD,KACE,sBAAuB,AACvB,UAAY,CACb,AAMD,MACE,aAAe,CAChB,AAOD,QAEE,cAAe,AACf,cAAe,AACf,kBAAmB,AACnB,uBAAyB,CAC1B,AAED,IACE,aAAgB,CACjB,AAED,IACE,SAAY,CACb,AASD,YAEE,oBAAsB,CACvB,AAMD,sBACE,aAAc,AACd,QAAU,CACX,AAMD,IACE,iBAAmB,CACpB,AAMD,eACE,eAAiB,CAClB,AAUD,sCAKE,uBAAwB,AACxB,eAAgB,AAChB,iBAAkB,AAClB,QAAU,CACX,AAOD,aAEE,gBAAkB,CACnB,AAOD,cAEE,mBAAqB,CACtB,AAQD,qDAIE,yBAA2B,CAC5B,AAMD,wHAIE,kBAAmB,AACnB,SAAW,CACZ,AAMD,4GAIE,6BAA+B,CAChC,AAMD,SACE,0BAA+B,CAChC,AASD,OACE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,cAAe,AACf,cAAe,AACf,eAAgB,AAChB,UAAW,AACX,kBAAoB,CACrB,AAOD,SACE,qBAAsB,AACtB,uBAAyB,CAC1B,AAMD,SACE,aAAe,CAChB,AAOD,6BAEE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,SAAW,CACZ,AAMD,kFAEE,WAAa,CACd,AAOD,cACE,6BAA8B,AAC9B,mBAAqB,CACtB,AAMD,qFAEE,uBAAyB,CAC1B,AAOD,6BACE,0BAA2B,AAC3B,YAAc,CACf,AAUD,aAEE,aAAe,CAChB,AAMD,QACE,iBAAmB,CACpB,AASD,OACE,oBAAsB,CACvB,AAiBD,kBACE,YAAc,CACf,AC9bD,WACC,oBAAuB,AACvB,gHAC6D,AAC7D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,AAED,WACC,oBAAuB,AACvB,0GAC0D,AAC1D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,ACOD,EACC,8BAAuB,AAAvB,2BAAuB,AAAvB,qBAAuB,CACvB,AAED,KACC,eAAiB,CACjB,AAED,KACC,yBAA6C,AAC7C,WAA2B,AAC3B,SAAU,AACV,6FAA8C,AAC9C,iBAAkB,AAClB,eAAuC,CACvC,AAID,kBAMC,kBAAmB,AACnB,iBAAkB,AAClB,mDAAmG,AAAnG,gDAAmG,AAAnG,0CAAmG,CACnG,AAED,YAIC,eAA0C,CAC1C,AAED,gBAEC,0BAAkD,AAClD,iBAAkB,AAClB,eAAuC,CACvC,AAED,GACC,gCAAsG,AACtG,mBAAoB,AACpB,gBAAkB,CAClB,AAGD,MACC,iBAAmB,CACnB,AAED,GACC,cAAgB,CAChB,AAED,GACC,gBAAkB,CAClB,AAMD,MAHC,gBAAkB,CAMlB,AAHD,GAEC,eAAoB,CACpB,AAGD,WACC,8BAAkD,AAClD,kBAAmB,AACnB,iBAAkB,AAClB,0BAAkD,AAClD,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAED,gBACC,cAAe,AACf,iBAAmB,AACnB,6FAA8C,AAC9C,iBAAkB,AAClB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,kBAGC,gEAA4C,CAC5C,AAED,GACC,mBAAyC,AACzC,cAAe,AACf,aAAe,AACf,SAAU,AACV,aAAe,CACf,AAED,EACC,kBAAmB,AACnB,eAAiB,CACjB,AAEA,qDASC,gBAAmB,CACnB,AAED,aACC,iBAAmB,CACnB,AAEF,aAEC,yBAAiD,AACjD,WAAuC,AACvC,yBAA6B,AAC7B,oBAAqB,AACrB,iBAAkB,AAClB,oBAAsB,CACtB,AAGD,MAEC,eAAiB,AACjB,oBAAsB,CACtB,AAED,YACC,gBAAmB,CACnB,AAEA,wBACC,YAAc,CACd,AAGF,OACC,gBAAmB,CACnB,AAED,IACC,cAAe,AACf,eAAgB,AAChB,iBAAmB,CACnB,AAED,yBACC,mBAAoB,AACpB,iBAAoB,CACpB,AAED,6BACC,gBAAmB,CACnB,AAGD,EACC,WAA8B,AAC9B,oBAAsB,CACtB,AAEA,QACC,yBAA2B,CAC3B,AAED,SACC,aAAsC,CACtC,AAEF,KACC,yBAAiD,AACjD,qBAAsB,AACtB,oBAAuB,AACvB,gBAAkB,CAClB,AAED,MACC,gBAAkB,CAClB,AAED,QAEC,gBAAkB,CAClB,AAID,UACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,UAAW,AACX,eAAiB,CACjB,AAEA,2DAEC,gBAAiB,AACjB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,0BAA2B,AAC3B,gBAAkB,CAClB,AAEF,8RAYC,YAAa,AACb,aAAe,CACf,AAED,4IAMC,UAAY,CACZ,AAGD,WACC,aAAmC,CACnC,AAED,aACC,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,oBAAqB,AACrB,oBAAsB,CACtB,AAID,QACC,eAAgB,AAChB,MAAO,AACP,OAAQ,AACR,QAAS,AACT,kBAAmB,AACnB,kBAAoB,CACpB,AAEA,aACC,WAAkC,AAClC,aAAc,AACd,cAAe,AACf,6FAA8C,AAC9C,iBAAkB,AAClB,gBAAuC,AACvC,mBAAsB,CACtB,AAEA,eACC,cAAe,AACf,qBAAsB,AACtB,wBAAyB,AACzB,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,qBACC,WAAiC,AACjC,oBAAsB,CACtB,AAED,WACC,aAAe,CACf,AAED,eACC,eAAuC,CACvC,AAGF,eACC,kBAAmB,AACnB,WAAY,AACZ,aAAc,AACd,cAAe,AACf,cAAgB,CAChB,AAGD,iBACC,cAAe,AACf,cAAe,AACf,sDAA8F,AAA9F,8CAA8F,AAA9F,gEAA8F,AAA9F,sCAA8F,AAA9F,kFAA8F,CAC9F,AAED,+CAEC,WAAY,AACZ,yBAA6C,AAC7C,WAAY,AACZ,WAAY,AACZ,kBAAmB,AACnB,UAAY,AACZ,MAAQ,CACR,AAED,uBACC,WAAY,AACZ,qCAAkD,AAAlD,kCAAkD,AAAlD,4BAAkD,CAClD,AAED,2DAEC,qBAA4C,CAC5C,AAED,6BACC,kCAAiD,AAAjD,+BAAiD,AAAjD,yBAAiD,CACjD,AAED,oBACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,eAAiB,CACjB,AAGD,iBACC,iBAAkB,AAClB,kBAAoB,CACpB,AAIF,MACC,sBAAiD,AACjD,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,iBAAmB,CACnB,AAMD,cAHC,UAAY,CAOZ,AAJD,KAEC,kBAAmB,AACnB,cAAgB,CAChB,AAMA,sBACC,SAAW,CACX,AAGF,WACC,qBAAiD,CAEjD,AAED,gDAEC,YAAc,CACd,AAED,4BAEC,SAAW,CACX,AAED,0BACC,QAAU,CACV,AAED,cACC,UAAW,AACX,oBAAsB,CACtB,AAED,iBACC,mBAAsB,CACtB,AAED,aACC,WAA2B,AAC3B,cAAe,AACf,qBAAuB,AACvB,iBAAkB,AAClB,qBAAsB,AACtB,iEAA6I,AAA7I,8DAA6I,AAA7I,wDAA6I,CAC7I,AAED,sCAEC,yBAAiD,AACjD,UAAuC,CACvC,AAED,oBACC,yBAAoD,AACpD,WAA8B,AAE9B,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAuC,AACvC,cAAgB,CAChB,AAED,gBACC,kBAAmB,AACnB,iBAAmB,CACnB,AAED,+BACC,kBAAoB,CACpB,AAED,8BACC,QAAU,CACV,AAED,6BACC,cAAkC,AAClC,8BAAyE,AACtE,+BAA2E,AAA3E,0BAA2E,AAC9E,oBAAqB,AACrB,iBAAkB,AAClB,oDAAoG,AAApG,iDAAoG,AAApG,2CAAoG,CACpG,AAED,kCACC,sBAAiD,AACjD,WAAmC,AACnC,uBAA6C,AAC7C,eAAuC,CACvC,AAED,2CACC,mBAAqB,CACrB,AAID,oBACC,cAAmC,AACnC,kBAAoB,CACpB,AAED,aACC,iBAAoB,CACpB,AAED,iCACC,iBAAoB,CACpB,AAED,eACC,kBAAmB,AACnB,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAQD,eACC,wBAA6C,CAC7C,AAED,uCAEC,cAAmC,AACnC,WAAY,AACZ,cAAe,AACf,gBAAkB,CAClB,AAED,iBACC,kBAAoB,AACpB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,sBACC,YAAa,AACb,kBAAoB,CACpB,AAEA,wBACC,UAAY,CACZ,AAGF,iBACC,iBAAmB,CACnB,AAED,yBACC,yBAA6C,AAC7C,+BAAoD,AAApD,2BAAoD,AACpD,gCAAqD,AAArD,2BAAqD,CACrD,AAED,+BACC,0BAA4E,CAC5E,AAED,kCACC,sBAAgD,AAChD,cAAe,AACf,uBAAyB,AACzB,uBAAwB,AACxB,kBAAqB,CACrB,AAED,iCAEC,wBAA2C,CAC3C,AAED,qCAEC,qBAA6C,CAC7C,AAED,UAEC,kBAAmB,AACnB,eAAuC,CACvC,AAEA,wBAEC,qBAAsB,AACtB,mBAAqB,AACrB,kBAAoB,AACpB,iBAAkB,AAClB,iBAAkB,AAClB,kBAAoB,CACpB,AAEF,IACC,aAAgC,CAChC,AAEA,WACC,WAAa,CACb,AAEF,MACC,UAAkC,CAClC,AAEA,aACC,WAAa,CACb,AAIF,eACC,kBAAmB,AACnB,SAAW,CACX,AAED,8BACC,YAAc,CACd,AAED,OACC,WAAuC,AACvC,qBAAsB,AACtB,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,qBAAsB,AACtB,eAAgB,AAChB,sBAAiG,AACjG,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAkB,CAClB,AAEA,qCAEC,UAAqC,CACrC,AAED,qCACC,UAAuC,CACvC,AAED,kCACC,gBAAmB,CACnB,AAED,gCACC,aAAc,AACd,cAAe,AACf,iBAAmB,AACnB,oBAAqB,AACrB,qBAAsB,AACtB,0BAAsB,AAAtB,qBAAsB,AACtB,cAAgB,CAChB,AAED,4CACC,gBAAmB,CACnB,AAED,4CACC,aAAc,AACd,YAAa,AACb,aAAc,AACd,0BAAsB,AAAtB,qBAAsB,AACtB,gBAAkB,CAClB,AAED,4BACC,oBAAsB,CACtB,AAED,uCACC,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAEA,6CACC,SAAW,CACX,AAEF,aACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,YAAa,AACb,iBAAkB,AAClB,eAA6C,CAC7C,AAEA,sCACC,kBAAmB,AACnB,YAAa,AACb,UAAW,AACX,mBAAoB,AACpB,iBAAkB,AAClB,aAAe,CACf,AAED,oHAIC,YAAc,CACd,AAEF,YACC,yBAA0B,AAC1B,cAAe,AACf,UAAW,AACX,4FAA8C,CAC9C,AAEA,iBACC,SAAW,CACX,AAEH,4BACC,YACC,kBAAoB,CACpB,AAED,mBACC,WAAY,AACZ,mCAAsC,AACtC,qBAAsB,AACtB,aAAc,AACd,cAAe,AACf,2BAA+B,AAC/B,uBAAmB,AAAnB,kBAAmB,AACnB,2BAA4B,AAC5B,WAAa,CACb,AAED,4BACC,wBAA6B,CAC7B,CACD,AAID,MACC,qBAAsB,AACtB,WAAY,AACZ,YAAa,AACb,eAAiB,AACjB,0BAA4B,CAC5B,AAEA,iBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAED,oBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAUF,uBACC,iBAAmB,CACnB,AAED,6BACC,WAAY,AACZ,+DAAkE,AAClE,kBAAmB,AACnB,SAAU,AACV,aAAc,AACd,cAAe,AACf,aAAe,CACf,AAED,8CACC,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAGD,iBACC,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,wBAA0B,CAC1B,AAED,8CAEC,kBAAmB,AACnB,+BAAiC,CACjC,AAED,uBACC,wBAA0B,CAC1B,AAEA,0BACC,aAAc,AACd,gBAAiB,AACjB,iBAAkB,AAClB,iBAAkB,AAClB,eAAuC,CACvC,AAEF,uBACC,mBAAoB,AACpB,8BAAgC,CAChC,AAEA,0DACC,mBAAqB,CACrB,AAEF,cACC,kBAAoB,CACpB,AAGD,QACC,WAA2B,AAC3B,iBAAkB,AAClB,gBAAkB,CAClB,AAED,cACC,SAAW,CACX,AAEA,0BACC,QAAU,CACV,AAED,oBACC,YAAa,AACb,cAAe,AACf,UAAY,CACZ,AAED,iBACC,qBAAsB,AACtB,cAAe,AACf,iBAAoB,CACpB,AAED,6BACC,aAAe,CACf,AAED,gBACC,iBAAmB,CACnB,AAED,yBACC,eAAuC,CACvC,AAEF,wBACC,qBAAsB,AACtB,gBAAkB,AAClB,wBAA0B,CAC1B,AAKD,yBACC,SAAU,AACV,SAAW,CACX,AAGD,2DACC,cAAgB,CAChB,AAED,0CACC,iBAAmB,CACnB,AAGD,kEACC,qBAAuB,CACvB,AAED,yCACC,aAAkC,CAClC,AAID,sBACC,qBAAsB,AACtB,cAAmC,AACnC,gBAAiB,AACjB,yBAA0B,AAC1B,iBAAkB,AAClB,gBAAuC,AACvC,kBAAoB,CACpB,AAED,4CACC,eAAiB,CACjB,AAED,sBACC,cAAgB,CAChB,AAED,wBACC,qBAAsB,AACtB,YAAc,CACd,AAED,oCACC,aAAe,CACf,AAED,4BACK,aAAc,AACd,eAAiB,CACrB,AAED,sBACC,gBAAiB,AACjB,kBAAoB,CACpB,AAGD,8BACC,yBAA6C,AAC7C,cAAgB,CAChB,AAID,wEAGC,4FAA8C,CAC9C,AAGD,wFAGC,iCAAuC,CACvC,AAKD,yBACC,WACC,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,cAAe,AACf,sBAAuB,AACvB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,UAAW,AACX,oCAA+B,AAA/B,iCAA+B,AAA/B,gCAA+B,AAA/B,4BAA+B,AAC/B,+DAAmI,AAAnI,uDAAmI,AAAnI,wEAAmI,AAAnI,+CAAmI,AAAnI,yFAAmI,CACnI,AAED,sCACC,gCAA2B,AAA3B,6BAA2B,AAA3B,4BAA2B,AAA3B,uBAA2B,CAC3B,AAED,aACC,kBAAoB,AACpB,gBAAkB,CAClB,AAED,sBACC,cAAe,AACf,aAAe,CACf,AAGD,sCACC,aAAe,CACf,AAGD,sFAIC,aAAe,CACf,AAED,uBACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,oDACC,YAAc,CACd,AAED,uBACC,cAAgB,CAChB,AAED,uBACC,kBAAoB,AACpB,oBAAuB,CACvB,CACD,AAGD,yBACC,yCAGC,qDAA+C,AAA/C,kDAA+C,AAA/C,6CAA+C,AAC/C,iCAAqD,AAArD,8BAAqD,AAArD,wBAAqD,CACrD,AAED,aACC,kBAAoB,CACpB,AAEA,eACC,cAAgB,CAChB,AAEF,sBACC,YAAc,CACd,AAED,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,sBAEC,UAAY,CACZ,AAED,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,sEAEC,WAAY,AACZ,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAED,kCACC,UAAY,CACZ,AAED,4HAEC,YAAc,CACd,AAED,OACC,WAAa,CACb,AAED,4CACC,UAAY,CACZ,AAED,4BACC,mBAAqB,CACrB,AAED,gEACC,oBAAqB,AACrB,kBAAqB,CACrB,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,WACC,aAAc,AACd,aAAe,CACf,AAEA,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,0DACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,iBACC,kBAAmB,AACnB,WAAY,AACZ,mBAAsB,CACtB,AAED,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n *    IE on Windows Phone and in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -ms-text-size-adjust: 100%; /* 2 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n  margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n  display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n  margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n  background-color: transparent; /* 1 */\n  -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n  font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n  font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n  background-color: #ff0;\n  color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n  display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n  border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* Forms\n   ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: sans-serif; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n *    controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n  display: inline-block; /* 1 */\n  vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n  display: list-item;\n}\n\n/* Scripting\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n  display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n  display: none;\n}\n\n/* Hidden\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n  display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t--font-weight-bold: 700;\n\t--font-weight-heading: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-heading );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tline-height: 1.5;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.5;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n    border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-secondary );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n     content: '\\A';\n     white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]}
\ No newline at end of file
+{"version":3,"sources":["../../node_modules/normalize.css/normalize.css","../partials/fonts.css","../wmui-style-guide.dev.css"],"names":[],"mappings":"AAAA,4EAA4E,AAW5E,KACE,iBAAkB,AAClB,0BAA2B,AAC3B,6BAA+B,CAChC,AAiBD,wCAME,aAAe,CAChB,AAOD,GACE,cAAe,AACf,cAAiB,CAClB,AAUD,uBAGE,aAAe,CAChB,AAMD,OACE,eAAiB,CAClB,AAOD,GACE,+BAAwB,AAAxB,4BAAwB,AAAxB,uBAAwB,AACxB,SAAU,AACV,gBAAkB,CACnB,AAOD,IACE,gCAAkC,AAClC,aAAe,CAChB,AAUD,EACE,+BAA8B,AAC9B,oCAAsC,CACvC,AAOD,YACE,mBAAoB,AACpB,0BAA2B,AAC3B,yCAAkC,AAAlC,sCAAkC,AAAlC,gCAAkC,CACnC,AAMD,SAEE,oBAAqB,AASrB,kBAAoB,CARrB,AAgBD,cAGE,gCAAkC,AAClC,aAAe,CAChB,AAMD,IACE,iBAAmB,CACpB,AAMD,KACE,sBAAuB,AACvB,UAAY,CACb,AAMD,MACE,aAAe,CAChB,AAOD,QAEE,cAAe,AACf,cAAe,AACf,kBAAmB,AACnB,uBAAyB,CAC1B,AAED,IACE,aAAgB,CACjB,AAED,IACE,SAAY,CACb,AASD,YAEE,oBAAsB,CACvB,AAMD,sBACE,aAAc,AACd,QAAU,CACX,AAMD,IACE,iBAAmB,CACpB,AAMD,eACE,eAAiB,CAClB,AAUD,sCAKE,uBAAwB,AACxB,eAAgB,AAChB,iBAAkB,AAClB,QAAU,CACX,AAOD,aAEE,gBAAkB,CACnB,AAOD,cAEE,mBAAqB,CACtB,AAQD,qDAIE,yBAA2B,CAC5B,AAMD,wHAIE,kBAAmB,AACnB,SAAW,CACZ,AAMD,4GAIE,6BAA+B,CAChC,AAMD,SACE,0BAA+B,CAChC,AASD,OACE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,cAAe,AACf,cAAe,AACf,eAAgB,AAChB,UAAW,AACX,kBAAoB,CACrB,AAOD,SACE,qBAAsB,AACtB,uBAAyB,CAC1B,AAMD,SACE,aAAe,CAChB,AAOD,6BAEE,8BAAuB,AAAvB,2BAAuB,AAAvB,sBAAuB,AACvB,SAAW,CACZ,AAMD,kFAEE,WAAa,CACd,AAOD,cACE,6BAA8B,AAC9B,mBAAqB,CACtB,AAMD,qFAEE,uBAAyB,CAC1B,AAOD,6BACE,0BAA2B,AAC3B,YAAc,CACf,AAUD,aAEE,aAAe,CAChB,AAMD,QACE,iBAAmB,CACpB,AASD,OACE,oBAAsB,CACvB,AAiBD,kBACE,YAAc,CACf,AC9bD,WACC,oBAAuB,AACvB,gHAC6D,AAC7D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,AAED,WACC,oBAAuB,AACvB,0GAC0D,AAC1D,kBAAmB,AACnB,gBAAiB,AACjB,iCAAmC,CACnC,ACQD,EACC,8BAAuB,AAAvB,2BAAuB,AAAvB,qBAAuB,CACvB,AAED,KACC,eAAiB,CACjB,AAED,KACC,yBAA6C,AAC7C,WAA2B,AAC3B,SAAU,AACV,6FAA8C,AAC9C,iBAAkB,AAClB,eAAuC,CACvC,AAID,kBAMC,kBAAmB,AACnB,iBAAkB,AAClB,mDAAmG,AAAnG,gDAAmG,AAAnG,0CAAmG,CACnG,AAED,YAIC,eAAuC,CACvC,AAED,gBAEC,0BAAkD,AAClD,iBAAkB,AAClB,eAAuC,CACvC,AAED,GACC,gCAAsG,AACtG,mBAAoB,AACpB,gBAAkB,CAClB,AAGD,MACC,iBAAmB,CACnB,AAED,GACC,cAAgB,CAChB,AAED,GACC,gBAAkB,CAClB,AAMD,MAHC,gBAAkB,CAMlB,AAHD,GAEC,eAAoB,CACpB,AAGD,WACC,8BAAkD,AAClD,kBAAmB,AACnB,iBAAkB,AAClB,0BAAkD,AAClD,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAED,gBACC,cAAe,AACf,iBAAmB,AACnB,6FAA8C,AAC9C,iBAAkB,AAClB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,kBAGC,gEAA4C,CAC5C,AAED,GACC,mBAAyC,AACzC,cAAe,AACf,aAAe,AACf,SAAU,AACV,aAAe,CACf,AAED,EACC,kBAAmB,AACnB,eAAiB,CACjB,AAEA,qDASC,gBAAmB,CACnB,AAED,aACC,iBAAmB,CACnB,AAEF,aAEC,yBAAiD,AACjD,WAAuC,AACvC,yBAA6B,AAC7B,oBAAqB,AACrB,iBAAkB,AAClB,oBAAsB,CACtB,AAGD,MAEC,eAAiB,AACjB,oBAAsB,CACtB,AAED,YACC,gBAAmB,CACnB,AAEA,wBACC,YAAc,CACd,AAGF,OACC,gBAAmB,CACnB,AAED,IACC,cAAe,AACf,eAAgB,AAChB,iBAAmB,CACnB,AAED,yBACC,mBAAoB,AACpB,iBAAoB,CACpB,AAED,6BACC,gBAAmB,CACnB,AAGD,EACC,WAA8B,AAC9B,oBAAsB,CACtB,AAEA,QACC,yBAA2B,CAC3B,AAED,SACC,aAAsC,CACtC,AAEF,SAEC,eAAuC,CACvC,AAED,KACC,yBAAiD,AACjD,qBAAsB,AACtB,oBAAuB,AACvB,gBAAkB,CAClB,AAED,MACC,gBAAkB,CAClB,AAED,QAEC,gBAAkB,CAClB,AAID,UACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,UAAW,AACX,eAAiB,CACjB,AAEA,2DAEC,gBAAiB,AACjB,UAAW,AACX,WAAY,AACZ,YAAa,AACb,SAAU,AACV,0BAA2B,AAC3B,gBAAkB,CAClB,AAEF,8RAYC,YAAa,AACb,aAAe,CACf,AAED,4IAMC,UAAY,CACZ,AAGD,WACC,aAAmC,CACnC,AAED,aACC,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,oBAAqB,AACrB,oBAAsB,CACtB,AAID,QACC,eAAgB,AAChB,MAAO,AACP,OAAQ,AACR,QAAS,AACT,kBAAmB,AACnB,kBAAoB,CACpB,AAEA,aACC,WAAkC,AAClC,aAAc,AACd,cAAe,AACf,6FAA8C,AAC9C,iBAAkB,AAClB,gBAAuC,AACvC,mBAAsB,CACtB,AAEA,eACC,cAAe,AACf,qBAAsB,AACtB,wBAAyB,AACzB,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,qBACC,WAAiC,AACjC,oBAAsB,CACtB,AAED,WACC,aAAe,CACf,AAED,eACC,eAAuC,CACvC,AAGF,eACC,kBAAmB,AACnB,WAAY,AACZ,aAAc,AACd,cAAe,AACf,cAAgB,CAChB,AAGD,iBACC,cAAe,AACf,cAAe,AACf,sDAA8F,AAA9F,8CAA8F,AAA9F,gEAA8F,AAA9F,sCAA8F,AAA9F,kFAA8F,CAC9F,AAED,+CAEC,WAAY,AACZ,yBAA6C,AAC7C,WAAY,AACZ,WAAY,AACZ,kBAAmB,AACnB,UAAY,AACZ,MAAQ,CACR,AAED,uBACC,WAAY,AACZ,qCAAkD,AAAlD,kCAAkD,AAAlD,4BAAkD,CAClD,AAED,2DAEC,qBAA4C,CAC5C,AAED,6BACC,kCAAiD,AAAjD,+BAAiD,AAAjD,yBAAiD,CACjD,AAED,oBACC,cAAe,AACf,kBAAmB,AACnB,2BAAiC,AACjC,UAAW,AACX,WAAY,AACZ,YAAa,AACb,eAAiB,CACjB,AAGD,iBACC,iBAAkB,AAClB,kBAAoB,CACpB,AAIF,MACC,sBAAiD,AACjD,kBAAmB,AACnB,kBAAmB,AACnB,iBAAkB,AAClB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,iBAAmB,CACnB,AAMD,cAHC,UAAY,CAOZ,AAJD,KAEC,kBAAmB,AACnB,cAAgB,CAChB,AAMA,sBACC,SAAW,CACX,AAGF,WACC,qBAAiD,CAEjD,AAED,gDAEC,YAAc,CACd,AAED,4BAEC,SAAW,CACX,AAED,0BACC,QAAU,CACV,AAED,cACC,UAAW,AACX,oBAAsB,CACtB,AAED,iBACC,mBAAsB,CACtB,AAED,aACC,WAA2B,AAC3B,cAAe,AACf,qBAAuB,AACvB,iBAAkB,AAClB,qBAAsB,AACtB,iEAA6I,AAA7I,8DAA6I,AAA7I,wDAA6I,CAC7I,AAED,sCAEC,yBAAiD,AACjD,UAAuC,CACvC,AAED,oBACC,yBAAoD,AACpD,WAA8B,AAE9B,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAuC,AACvC,cAAgB,CAChB,AAED,gBACC,kBAAmB,AACnB,iBAAmB,CACnB,AAED,+BACC,kBAAoB,CACpB,AAED,8BACC,QAAU,CACV,AAED,6BACC,cAAkC,AAClC,8BAAyE,AACtE,+BAA2E,AAA3E,0BAA2E,AAC9E,oBAAqB,AACrB,iBAAkB,AAClB,oDAAoG,AAApG,iDAAoG,AAApG,2CAAoG,CACpG,AAED,kCACC,sBAAiD,AACjD,WAAmC,AACnC,uBAA6C,AAC7C,eAAuC,CACvC,AAED,2CACC,mBAAqB,CACrB,AAID,oBACC,cAAmC,AACnC,kBAAoB,CACpB,AAED,aACC,iBAAoB,CACpB,AAED,iCACC,iBAAoB,CACpB,AAED,eACC,kBAAmB,AACnB,eAAgB,AAChB,kBAAmB,AACnB,eAAiB,CACjB,AAQD,eACC,wBAA6C,CAC7C,AAED,uCAEC,cAAmC,AACnC,WAAY,AACZ,cAAe,AACf,gBAAkB,CAClB,AAED,iBACC,kBAAoB,AACpB,iBAAmB,CACnB,AAEA,uBACC,YAAc,CACd,AAEF,sBACC,YAAa,AACb,kBAAoB,CACpB,AAEA,wBACC,UAAY,CACZ,AAGF,iBACC,iBAAmB,CACnB,AAED,yBACC,yBAA6C,AAC7C,+BAAoD,AAApD,2BAAoD,AACpD,gCAAqD,AAArD,2BAAqD,CACrD,AAED,+BACC,0BAA4E,CAC5E,AAED,kCACC,sBAAgD,AAChD,cAAe,AACf,uBAAyB,AACzB,uBAAwB,AACxB,kBAAqB,CACrB,AAED,iCAEC,wBAA2C,CAC3C,AAED,qCAEC,qBAA6C,CAC7C,AAED,UAEC,kBAAmB,AACnB,eAAuC,CACvC,AAEA,wBAEC,qBAAsB,AACtB,mBAAqB,AACrB,kBAAoB,AACpB,iBAAkB,AAClB,iBAAkB,AAClB,kBAAoB,CACpB,AAEF,IACC,aAAgC,CAChC,AAEA,WACC,WAAa,CACb,AAEF,MACC,UAAkC,CAClC,AAEA,aACC,WAAa,CACb,AAIF,eACC,kBAAmB,AACnB,SAAW,CACX,AAED,8BACC,YAAc,CACd,AAED,OACC,WAAuC,AACvC,qBAAsB,AACtB,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,qBAAsB,AACtB,eAAgB,AAChB,sBAAiG,AACjG,uBAA2C,AAA3C,kBAA2C,AAC3C,gBAAkB,CAClB,AAEA,qCAEC,UAAqC,CACrC,AAED,qCACC,UAAuC,CACvC,AAED,kCACC,gBAAmB,CACnB,AAED,gCACC,aAAc,AACd,cAAe,AACf,iBAAmB,AACnB,oBAAqB,AACrB,qBAAsB,AACtB,0BAAsB,AAAtB,qBAAsB,AACtB,cAAgB,CAChB,AAED,4CACC,gBAAmB,CACnB,AAED,4CACC,aAAc,AACd,YAAa,AACb,aAAc,AACd,0BAAsB,AAAtB,qBAAsB,AACtB,gBAAkB,CAClB,AAED,4BACC,oBAAsB,CACtB,AAED,uCACC,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAEA,6CACC,SAAW,CACX,AAEF,aACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,YAAa,AACb,iBAAkB,AAClB,eAA6C,CAC7C,AAEA,sCACC,kBAAmB,AACnB,YAAa,AACb,UAAW,AACX,mBAAoB,AACpB,iBAAkB,AAClB,aAAe,CACf,AAED,oHAIC,YAAc,CACd,AAEF,YACC,yBAA0B,AAC1B,cAAe,AACf,UAAW,AACX,4FAA8C,CAC9C,AAEA,iBACC,SAAW,CACX,AAEH,4BACC,YACC,kBAAoB,CACpB,AAED,mBACC,WAAY,AACZ,mCAAsC,AACtC,qBAAsB,AACtB,aAAc,AACd,cAAe,AACf,2BAA+B,AAC/B,uBAAmB,AAAnB,kBAAmB,AACnB,2BAA4B,AAC5B,WAAa,CACb,AAED,4BACC,wBAA6B,CAC7B,CACD,AAID,MACC,qBAAsB,AACtB,WAAY,AACZ,YAAa,AACb,eAAiB,AACjB,0BAA4B,CAC5B,AAEA,iBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAED,oBACC,aAAc,AACd,cAAe,AACf,mBAAsB,CACtB,AAUF,uBACC,iBAAmB,CACnB,AAED,6BACC,WAAY,AACZ,+DAAkE,AAClE,kBAAmB,AACnB,SAAU,AACV,aAAc,AACd,cAAe,AACf,aAAe,CACf,AAED,8CACC,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAGD,iBACC,cAAe,AACf,WAAY,AACZ,kBAAmB,AACnB,wBAA0B,CAC1B,AAED,8CAEC,kBAAmB,AACnB,+BAAiC,CACjC,AAED,uBACC,wBAA0B,CAC1B,AAEA,0BACC,aAAc,AACd,gBAAiB,AACjB,iBAAkB,AAClB,iBAAkB,AAClB,eAAuC,CACvC,AAEF,uBACC,mBAAoB,AACpB,8BAAgC,CAChC,AAEA,0DACC,mBAAqB,CACrB,AAEF,cACC,kBAAoB,CACpB,AAGD,QACC,WAA2B,AAC3B,iBAAkB,AAClB,gBAAkB,CAClB,AAED,cACC,SAAW,CACX,AAEA,0BACC,QAAU,CACV,AAED,oBACC,YAAa,AACb,cAAe,AACf,UAAY,CACZ,AAED,iBACC,qBAAsB,AACtB,cAAe,AACf,iBAAoB,CACpB,AAED,6BACC,aAAe,CACf,AAED,gBACC,iBAAmB,CACnB,AAED,yBACC,eAAuC,CACvC,AAEF,wBACC,qBAAsB,AACtB,gBAAkB,AAClB,wBAA0B,CAC1B,AAKD,yBACC,SAAU,AACV,SAAW,CACX,AAGD,2DACC,cAAgB,CAChB,AAED,0CACC,iBAAmB,CACnB,AAGD,kEACC,qBAAuB,CACvB,AAED,yCACC,aAAkC,CAClC,AAID,sBACC,qBAAsB,AACtB,cAAmC,AACnC,gBAAiB,AACjB,yBAA0B,AAC1B,iBAAkB,AAClB,gBAAuC,AACvC,kBAAoB,CACpB,AAED,4CACC,eAAiB,CACjB,AAED,sBACC,cAAgB,CAChB,AAED,wBACC,qBAAsB,AACtB,YAAc,CACd,AAED,oCACC,aAAe,CACf,AAED,4BACK,aAAc,AACd,eAAiB,CACrB,AAED,sBACC,gBAAiB,AACjB,kBAAoB,CACpB,AAGD,8BACC,yBAA6C,AAC7C,cAAgB,CAChB,AAID,wEAGC,4FAA8C,CAC9C,AAGD,wFAGC,iCAAuC,CACvC,AAKD,yBACC,WACC,kBAAmB,AACnB,YAAa,AACb,aAAc,AACd,cAAe,AACf,sBAAuB,AACvB,+CAA8C,AAA9C,4CAA8C,AAA9C,uCAA8C,AAC9C,UAAW,AACX,oCAA+B,AAA/B,iCAA+B,AAA/B,gCAA+B,AAA/B,4BAA+B,AAC/B,+DAAmI,AAAnI,uDAAmI,AAAnI,wEAAmI,AAAnI,+CAAmI,AAAnI,yFAAmI,CACnI,AAED,sCACC,gCAA2B,AAA3B,6BAA2B,AAA3B,4BAA2B,AAA3B,uBAA2B,CAC3B,AAED,aACC,kBAAoB,AACpB,gBAAkB,CAClB,AAED,sBACC,cAAe,AACf,aAAe,CACf,AAGD,sCACC,aAAe,CACf,AAGD,sFAIC,aAAe,CACf,AAED,uBACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,oDACC,YAAc,CACd,AAED,uBACC,cAAgB,CAChB,AAED,uBACC,kBAAoB,AACpB,oBAAuB,CACvB,CACD,AAGD,yBACC,yCAGC,qDAA+C,AAA/C,kDAA+C,AAA/C,6CAA+C,AAC/C,iCAAqD,AAArD,8BAAqD,AAArD,wBAAqD,CACrD,AAED,aACC,kBAAoB,CACpB,AAEA,eACC,cAAgB,CAChB,AAEF,sBACC,YAAc,CACd,AAED,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,sBAEC,UAAY,CACZ,AAED,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,sEAEC,WAAY,AACZ,gBAAiB,AACjB,iBAAkB,AAClB,iBAAmB,CACnB,AAED,kCACC,UAAY,CACZ,AAED,4HAEC,YAAc,CACd,AAED,OACC,WAAa,CACb,AAED,4CACC,UAAY,CACZ,AAED,4BACC,mBAAqB,CACrB,AAED,gEACC,oBAAqB,AACrB,kBAAqB,CACrB,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,WACC,aAAc,AACd,aAAe,CACf,AAEA,aACC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,qCAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,+BACC,mBAAoB,AACpB,mBAAqB,CACrB,AAED,0DACC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,iBACC,kBAAmB,AACnB,WAAY,AACZ,mBAAsB,CACtB,AAED,uBACC,gBAAiB,AACjB,cAAmC,AACnC,oBAAsB,AACtB,eAAiB,CACjB,AAED,kCACC,WAAY,AACZ,SAAW,CACX,AAED,OACC,YAAa,AACb,mBAAqB,CACrB,CACD,AAGD,yBACC,iBACC,cAAe,AACf,kBAAmB,AACnB,cAAe,AACf,aAAc,AACd,gBAAkB,CAClB,AAED,sBACC,eAAgB,AAChB,UAAW,AACX,gCAAoD,AAApD,6BAAoD,AAApD,uBAAoD,CACpD,AAED,yBACC,eAAiB,CACjB,AAED,sEAEC,cAAgB,CAChB,AAED,8BACC,WAAY,AACZ,WAAa,CACb,AAED,4DACC,aAAc,AACd,gBAAmB,CACnB,AAED,gEACC,iBAAmB,CACnB,CACD,AAGD,yBACC,IACC,uBAAmB,AAAnB,iBAAmB,CACnB,AAED,aACC,WAAY,AACZ,eAAiB,CACjB,AAED,eACC,YAAc,CACd,AAED,aACC,WAAY,AACZ,aAAe,CACf,AAEA,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAEF,sBACC,eAAgB,AAChB,SAAW,CACX,AAED,YACC,cAAe,AACf,UAAW,AACX,8BAAkD,AAAlD,2BAAkD,AAAlD,qBAAkD,CAClD,AAED,UACC,qBAAsB,AACtB,kBAAoB,CACpB,AAED,WACC,UAAW,AACX,UAAY,CACZ,AAED,6CAEC,cAAe,AACf,cAAgB,CAChB,AAED,yBACC,WAAY,AACZ,SAAW,CACX,AAED,4CACC,WAAa,CACb,AAGD,8BACC,WAAY,AACZ,YAAc,CACd,AAED,yBACC,kBAAoB,CACpB,CACD,AAGD,yBACC,aACC,WAAY,AACZ,gBAA4C,CAC5C,AAED,4BAEC,oBAAqB,AACrB,oBAAsB,CACtB,AAED,YACC,WAAa,CACb,AAED,UACC,mBAAoB,AACpB,oBAAsB,CACtB,AAED,qCACC,iBAAmB,CACnB,AAED,OACC,mBAAqB,CACrB,AAEA,4BACC,oBAAsB,CACtB,AAED,gEACC,qBAAsB,AACtB,aAAe,CACf,AAEF,8MAIC,WAAY,AACZ,YAAc,CACd,AAED,4IAGC,UAAY,CACZ,AAGD,8CACC,yCAA6D,AAA7D,sCAA6D,AAA7D,gCAA6D,CAC7D,AAEA,oDACC,wBAA0B,CAC1B,AAED,oHAEC,mBAAqB,CACrB,CACF,AAED,0BACC,aACC,YAAwC,CACxC,AAED,YACC,aAAe,CACf,AAED,UACC,qBAAsB,AACtB,oBAAsB,CACtB,CACD","file":"wmui-style-guide.min.css","sourcesContent":["/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n   ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n *    IE on Windows Phone and in iOS.\n */\n\nhtml {\n  line-height: 1.15; /* 1 */\n  -ms-text-size-adjust: 100%; /* 2 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n   ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n  margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n  display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n  font-size: 2em;\n  margin: 0.67em 0;\n}\n\n/* Grouping content\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n  display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n  margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n  box-sizing: content-box; /* 1 */\n  height: 0; /* 1 */\n  overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n   ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n  background-color: transparent; /* 1 */\n  -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n  border-bottom: none; /* 1 */\n  text-decoration: underline; /* 2 */\n  text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n  font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n  font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n  font-family: monospace, monospace; /* 1 */\n  font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n  font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n  background-color: #ff0;\n  color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n  font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsub {\n  bottom: -0.25em;\n}\n\nsup {\n  top: -0.5em;\n}\n\n/* Embedded content\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n  display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n  border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\n/* Forms\n   ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: sans-serif; /* 1 */\n  font-size: 100%; /* 1 */\n  line-height: 1.15; /* 1 */\n  margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n  overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n  text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n *    controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n  -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n  border-style: none;\n  padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n  outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n  padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n *    `fieldset` elements in all browsers.\n */\n\nlegend {\n  box-sizing: border-box; /* 1 */\n  color: inherit; /* 2 */\n  display: table; /* 1 */\n  max-width: 100%; /* 1 */\n  padding: 0; /* 3 */\n  white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n  display: inline-block; /* 1 */\n  vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n  overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n  box-sizing: border-box; /* 1 */\n  padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n  height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n\n/* Interactive\n   ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n  display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n  display: list-item;\n}\n\n/* Scripting\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n  display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n  display: none;\n}\n\n/* Hidden\n   ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n  display: none;\n}\n","@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_regular.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_regular.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility; /* Attention: Android Stock Browser <= 4.3 doesn't show web font with this setting, but it also doesn't support WOFF :) */\n}\n\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../../fonts/Charter_bold.woff2' ) format( 'woff2' ),\n\t\t url( '../../fonts/Charter_bold.woff' ) format( 'woff' );\n\tfont-style: normal;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n\n/*\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 400;\n\ttext-rendering: optimizeLegibility;\n}\n@font-face {\n\tfont-family: 'Charter';\n\tsrc: url( '../fonts/Charter_bold-italic.woff2' ) format( 'woff2' ),\n\t\t url( '../fonts/Charter_bold-italic.woff' ) format( 'woff' );\n\tfont-style: italic;\n\tfont-weight: 700;\n\ttext-rendering: optimizeLegibility;\n}\n*/\n","/* ::: Vendor Imports ::: */\n/* Load files from 'node_modules' folders with postCSS-import plugin.\n * Modules specified in package.json file */\n@import 'wikimedia-ui-base/wikimedia-ui-base.css';\n@import 'normalize.css';\n\n/* ::: Local Imports ::: */\n@import 'partials/fonts.css';\n\n:root {\n\t--background-color-hr: var( --wmui-color-base80 );\n\t--width-site: 960px;\n\t--width-site-desktop-wide: 1140px;\n\t--border-color-heading: var( --wmui-color-base80 );\n\t--border-width-heading: 3px;\n\t/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */\n\t--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */\n\t--font-weight-base: 400;\n\t/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.\n\t   Helvetica and Arial fallback gracefully to `700`, see T246791. */\n\t--font-weight-bold: 600;\n\t--font-weight-ultralight: 100;\n}\n\n* {\n\tbox-sizing: border-box;\n}\n\nhtml {\n\tfont-size: 62.5%;\n}\n\nbody {\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tcolor: var( --color-base );\n\tmargin: 0;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.6rem;\n\tline-height: var( --line-height-base );\n}\n\n/* ::: Text Block-Level Elements ::: */\n/* ... Headings ... */\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.25;\n\ttransition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );\n}\n\nh2,\nh3,\nh4,\nh5 {\n\tfont-weight: var( --font-weight-bold );\n}\n\nh1,\n.page__title {\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 3.2rem;\n\tfont-weight: var( --font-weight-base );\n}\n\nh2 {\n\tborder-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );\n\tpadding-bottom: 2px;\n\tfont-size: 2.4rem;\n}\n\n/* Reduce top margin when introductory headlines are following each other. */\nh2 + h3 {\n\tmargin-top: 1.6rem;\n}\n\nh3 {\n\tfont-size: 2rem;\n}\n\nh4 {\n\tfont-size: 1.8rem;\n}\n\nh5 {\n\tfont-size: 1.6rem;\n}\n\nh6 {\n\tfont-size: 1.6rem;\n\tfont-weight: normal;\n}\n\n/* ... Other Block-Level Elements ... */\nblockquote {\n\tborder-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */\n\tmargin: 1.6rem 0 0;\n\tpadding: 0 3.2rem;\n\tfont-family: var( --font-family-serif--fallback ); /* Fallback */\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tline-height: 1.5;\n}\n\nblockquote cite {\n\tdisplay: block;\n\tmargin-top: 0.8rem;\n\tfont-family: var( --font-family-system-sans );\n\tfont-size: 1.4rem;\n\tfont-style: normal;\n}\n\n\tblockquote cite:before {\n\t\tcontent: '— ';\n\t}\n\ncode,\npre,\n.mw-code {\n\tfont-family: var( --font-family-monospace );\n}\n\nhr {\n\tbackground: var( --background-color-hr );\n\tdisplay: block;\n\theight: 0.8rem;\n\tborder: 0;\n\tmargin: 8rem 0;\n}\n\np {\n\tmargin: 3.2rem 0 0;\n\tline-height: 1.5;\n}\n\n\th1 + p,\n\th2 + p,\n\th3 + p,\n\th4 + p,\n\th5 + p,\n\th6 + p,\n\tp + p,\n\tul + p,\n\tp:first-child {\n\t\tmargin: 0.8rem 0 0;\n\t}\n\n\tblockquote + p {\n\t\tmargin-top: 1.6rem;\n\t}\n\npre,\n.mw-code {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n\tborder: var( --border-base );\n\tpadding: 1.2rem 2rem;\n\tfont-size: 1.4rem;\n\twhite-space: pre-wrap;\n}\n\n/* ... Lists ... */\nol,\nul {\n\tmargin: 0.8rem 0;\n\tpadding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */\n}\n\n.content li {\n\tmargin-top: 0.4rem;\n}\n\n\t.content li:first-child {\n\t\tmargin-top: 0;\n\t}\n\n/* ... Images & Figures ... */\nfigure {\n\tmargin: 0.8rem 0 0;\n}\n\nimg {\n\tdisplay: block;\n\tmax-width: 100%;\n\tmargin: 1.6rem 0 0;\n}\n\n.page--components figure {\n\tmargin-left: 6.4rem;\n\tpadding-top: 0.8rem;\n}\n\n.page--components figure img {\n\tmargin-top: 0.8rem;\n}\n\n/* ::: Inline Elements ::: */\na {\n\tcolor: var( --color-primary );\n\ttext-decoration: none;\n}\n\n\ta:hover {\n\t\ttext-decoration: underline;\n\t}\n\n\ta:active {\n\t\tcolor: var( --color-primary--active );\n\t}\n\nb,\nstrong {\n\tfont-weight: var( --font-weight-bold );\n}\n\ncode {\n\tbackground-color: var( --background-color-code );\n\tdisplay: inline-block;\n\tpadding: 0.2rem 0.4rem;\n\tfont-size: 1.4rem;\n}\n\nsmall {\n\tfont-size: 1.3rem;\n}\n\nsub,\nsup {\n\tfont-size: 1.1rem;\n}\n\n/* ::: General Classes ::: */\n/* ::: Text for Screen Readers only ::: */\n.is-aural {\n\tdisplay: block;\n\tposition: absolute;\n\tclip: rect( 1px, 1px, 1px, 1px );\n\twidth: 1px;\n\theight: 1px;\n\tmargin: -1px;\n\tborder: 0;\n\tpadding: 0;\n\toverflow: hidden;\n}\n\n\t.is-aural.is-focusable:active,\n\t.is-aural.is-focusable:focus {\n\t\tposition: static;\n\t\tclip: auto;\n\t\twidth: auto;\n\t\theight: auto;\n\t\tmargin: 0;\n\t\ttext-decoration: underline;\n\t\toverflow: visible;\n\t}\n\n.clearfix:before,\n.clearfix:after,\n.page:before,\n.page:after,\n.content-box:before,\n.content-box:after,\n.color-palette:before,\n.color-palette:after,\n.figures-do-dont:before,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:before,\n.content__illustration-style .figure--full:after {\n\tcontent: ' ';\n\tdisplay: table;\n}\n\n.clearfix:after,\n.page:after,\n.content-box:after,\n.color-palette:after,\n.figures-do-dont:after,\n.content__illustration-style .figure--full:after {\n\tclear: both;\n}\n\n/* ::: Text-formatting ::: */\n.is-subtle {\n\tcolor: var( --color-base--subtle );\n}\n\n.content-box {\n\tposition: relative;\n\tmargin-right: auto;\n\tmargin-left: auto;\n\tpadding-left: 1.6rem; /* FIXME: var( --grid-padding ); */\n\tpadding-right: 1.6rem;\n}\n\n\n/* ::: Structure ::: */\n.header {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tmin-height: 6.4rem;\n\tline-height: 6.4rem;\n}\n\n\t.site__title {\n\t\tcolor: var( --wmui-color-base10 );\n\t\tmargin-top: 0;\n\t\theight: 6.4rem;\n\t\tfont-family: var( --font-family-system-sans );\n\t\tfont-size: 1.6rem;\n\t\tfont-weight: var( --font-weight-base );\n\t\tletter-spacing: 0.5px;\n\t}\n\n\t\t.site__title a {\n\t\t\tcolor: inherit;\n\t\t\tdisplay: inline-block;\n\t\t\tpadding: 1.2rem 3.2rem 0;\n\t\t\ttransition: color var( --transition-ease-medium );\n\t\t}\n\n\t\t.site__title a:hover {\n\t\t\tcolor: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t.site__org {\n\t\t\tdisplay: block;\n\t\t}\n\n\t\t.site__project {\n\t\t\tfont-weight: var( --font-weight-bold );\n\t\t}\n\n\t/* ... Navigation button ... */\n\t.btn--nav-main {\n\t\tposition: absolute;\n\t\ttop: 1.2rem;\n\t\twidth: 4.2rem;\n\t\theight: 4.2rem;\n\t\tcursor: pointer;\n\t}\n\n\t/* Fake hamburger icon */\n\t.btn--nav-main i {\n\t\tdisplay: block;\n\t\theight: 4.2rem;\n\t\ttransition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );\n\t}\n\n\t.btn--nav-main i:before,\n\t.btn--nav-main i:after {\n\t\tcontent: '';\n\t\tbackground-color: var( --wmui-color-base20 );\n\t\twidth: 2rem;\n\t\theight: 2px;\n\t\tposition: absolute;\n\t\ttop: 0.4rem;\n\t\tleft: 0;\n\t}\n\n\t.btn--nav-main i:after {\n\t\ttop: 1.1rem;\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base20 );\n\t}\n\n\t.btn--nav-main i:hover:before,\n\t.btn--nav-main i:hover:after {\n\t\tbackground-color: var( --wmui-color-base0 ); /* --color-base-emphasized */\n\t}\n\n\t.btn--nav-main i:hover:after {\n\t\tbox-shadow: 0 0.7rem 0 var( --wmui-color-base0 );\n\t}\n\n\t.btn--nav-main span {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tclip: rect( 1px, 1px, 1px, 1px );\n\t\twidth: 1px;\n\t\theight: 1px;\n\t\tmargin: -1px;\n\t\toverflow: hidden;\n\t}\n\n\t/* ... GitHub Contribute Link ... */\n\t.lnk--contribute {\n\t\tfont-size: 1.4rem;\n\t\tline-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */\n\t}\n\n\n/* ... Content ... */\n.page {\n\tbackground-color: var( --background-color-base );\n\tposition: relative;\n\tmargin-top: 6.4rem;\n\tpadding: 6.4rem 0;\n\tbox-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );\n\toverflow-y: hidden;\n}\n\n.content {\n\tfloat: left;\n}\n\n.col {\n\tfloat: left;\n\tposition: relative;\n\tmin-height: 1px;\n}\n\n\t.col--start {\n\t\tpadding: 0;\n\t}\n\n\t.col--end {\n\t\tpadding: 0;\n\t}\n\n/* ... Main Navigation ... */\n.nav--main {\n\tbackground-color: var( --background-color-base ); /* needed for menu appearance on mobile below */\n\t/* margin-top: 6.4rem; */\n}\n\n.nav--main li:not( .is-on ) ul,\n.trigger--nav-main {\n\tdisplay: none;\n}\n\n.nav--main ol,\n.nav--main ul {\n\tpadding: 0;\n}\n\n.nav--main ol:first-child {\n\tmargin: 0;\n}\n\n.nav--main li {\n\tpadding: 0;\n\tlist-style: none none;\n}\n\n.nav--main > ol > li {\n\tmargin-bottom: 0.4rem;\n}\n\n.nav--main a {\n\tcolor: var( --color-base );\n\tdisplay: block;\n\tpadding: 0.8rem 1.2rem;\n\tfont-size: 1.6rem;\n\ttext-decoration: none;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );\n}\n\n.nav--main a:hover,\n.nav--main a:focus {\n\tbackground-color: var( --background-color-code );\n\tcolor: var( --color-base--emphasized );\n}\n\n.nav--main .is-on > a {\n\tbackground-color: var( --background-color-primary );\n\tcolor: var( --color-primary );\n\t/* border-left: 2px solid var( --color-primary ); */\n\tborder-radius: var( --border-radius-base );\n\tfont-weight: var( --font-weight-bold );\n\tcursor: default;\n}\n\n.nav__sub-items {\n\tmargin-top: 1.2rem;\n\tmargin-bottom: 1em; /* FIXME: replace with rem and mt */\n}\n\n.nav__sub-items > .nav__sub-item {\n\tmargin-left: 3.6rem;\n}\n\n.nav--main .nav__sub-items ul {\n\tmargin: 0;\n}\n\n.nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */\n\tcolor: var( --wmui-color-base20 );\n\tborder-left: var( --border-width-base ) solid var( --wmui-color-base80 );\n    border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;\n\tpadding-left: 1.6rem;\n\tfont-size: 1.4rem;\n\ttransition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );\n}\n\n.nav--main .nav__sub-item.is-on > a {\n\tbackground-color: var( --background-color-base );\n\tcolor: var( --color-base--active );\n\tborder-left-color: var( --wmui-color-base0 );\n\tfont-weight: var( --font-weight-bold );\n}\n\n.nav--main .nav__sub-item .nav__sub-item a {\n\tpadding-left: 3.6rem;\n}\n\n\n/* ::: Content ::: */\n.page__parent-title {\n\tcolor: var( --color-base--subtle );\n\tmargin-top: -2.8rem;\n}\n\n.page__title {\n\tmargin-top: -0.8rem;\n}\n\n.page__parent-title + .page__title {\n\tmargin-top: -0.4rem;\n}\n\n.page__tagline {\n\tmargin-top: 1.2rem;\n\tfont-size: 2rem;\n\tfont-style: italic;\n\tfont-weight: 100;\n}\n\n/* Remove, doesn't provide good styling\n.page__lead {\n\tfont-size: 1.8rem;\n}\n*/\n\n.figures--full {\n\tbackground-color: var( --wmui-color-base90 );\n}\n\n.figure__caption,\n.heading__description {\n\tcolor: var( --color-base--subtle );\n\tclear: both;\n\tdisplay: block;\n\tfont-size: 1.3rem;\n}\n\n.figure__caption {\n\tpadding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */\n\tfont-style: italic;\n}\n\n\t.figure__caption:empty {\n\t\tdisplay: none;\n\t}\n\n.heading__description {\n\tfloat: right;\n\tmargin-top: -1.9rem;\n}\n\n\t.heading__description + * {\n\t\tclear: both;\n\t}\n\n/* ... “Do” & “Don't” figures ... */\n.figures-do-dont {\n\tmargin-top: 1.6rem;\n}\n\n.figures-do-dont .figure {\n\tbackground-color: var( --wmui-color-base80 );\n\tborder-top-left-radius: var( --border-radius-base );\n\tborder-top-right-radius: var( --border-radius-base );\n}\n\n.figures-do-dont .figure--dont {\n\tborder-left: var( --border-width-base ) solid var( --color-base--inverted );\n}\n\n.figures-do-dont .figure__caption {\n\tbackground-color: var( --color-base--inverted );\n\tdisplay: block;\n\tborder-top-width: 0.8rem;\n\tborder-top-style: solid;\n\tpadding-right: 0.8em;\n}\n\n.figure--do .figure__caption,\n.do {\n\tborder-top-color: var( --color-secondary );\n}\n\n.figure--dont .figure__caption,\n.dont {\n\tborder-top-color: var( --color-destructive );\n}\n\n.do,\n.dont {\n\tfont-style: normal;\n\tfont-weight: var( --font-weight-bold );\n}\n\n\t.do:before,\n\t.dont:before {\n\t\tdisplay: inline-block;\n\t\tmargin-right: 0.4rem;\n\t\tpadding-top: 0.4rem;\n\t\tfont-size: 2.1rem;\n\t\tline-height: 1rem;\n\t\tvertical-align: top;\n\t}\n\n.do {\n\tcolor: var( --color-secondary );\n}\n\n\t.do:before {\n\t\tcontent: '✓';\n\t}\n\n.dont {\n\tcolor: var( --color-destructive );\n}\n\n\t.dont:before {\n\t\tcontent: '×';\n\t}\n\n\n/* ... Color ... */\n.color-palette {\n\tmargin: 2.4rem 0 0;\n\tpadding: 0;\n}\n\n.color-palette + .color-palette {\n\tmargin-top: 0;\n}\n\n.color {\n\tcolor: var( --color-base--emphasized );\n\tlist-style: none none;\n\tdisplay: block;\n\tfloat: left;\n\tposition: relative;\n\twidth: 61.8%;\n\theight: 16rem;\n\tmargin-bottom: 3.2rem;\n\tpadding: 1.2rem;\n\tborder: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );\n\tborder-radius: var( --border-radius-base );\n\tfont-size: 1.4rem;\n}\n\n\t.color--dark,\n\t.color__wcag-level span {\n\t\tcolor: var( --color-base--inverted );\n\t}\n\n\t.color--dark .color__wcag-level span {\n\t\tcolor: var( --color-base--emphasized );\n\t}\n\n\t.color-palette .color:first-child {\n\t\tmargin-top: 0.4rem;\n\t}\n\n\t.color-palette--overview .color {\n\t\twidth: 6.4rem;\n\t\theight: 6.2rem;\n\t\tmargin-top: 0.8rem;\n\t\tmargin-right: 1.2rem;\n\t\tmargin-bottom: 2.4rem;\n\t\tborder-radius: 3.2rem;\n\t\tcursor: default;\n\t}\n\n\t.color-palette--overview .color:first-child {\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.color-palette--overview .color--emphasized {\n\t\twidth: 7.2rem;\n\t\theight: 7rem;\n\t\tmargin-top: 0;\n\t\tborder-radius: 7.2rem;\n\t\tpadding-top: 2rem;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.35rem;\n\t}\n\n\t.color-section .color .color-code--hsb {\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t\t.color-section .color:hover .color-code--hsb {\n\t\t\topacity: 1;\n\t\t}\n\n\t.color__name {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.2rem;\n\t\tleft: 1.2rem;\n\t\tfont-size: 3.2rem;\n\t\tfont-weight: var( --font-weight-ultralight );\n\t}\n\n\t\t.color-palette--overview .color__name {\n\t\t\tposition: relative;\n\t\t\tbottom: auto;\n\t\t\tleft: auto;\n\t\t\tpadding-top: 1.2rem;\n\t\t\tfont-size: 2.4rem;\n\t\t\tline-height: 1;\n\t\t}\n\n\t\t.color__type,\n\t\t.color-code.color-code--rgb,\n\t\t.color-palette--overview .color__name,\n\t\t.color-palette--overview .color-code {\n\t\t\tdisplay: none;\n\t\t}\n\n\t.color-code {\n\t\tbackground-color: inherit;\n\t\tdisplay: block;\n\t\tpadding: 0;\n\t\tfont-family: var( --font-family-system-sans );\n\t}\n\n\t\t.color-code--hsb {\n\t\t\topacity: 0;\n\t\t}\n\n@supports ( --css: variables ) {\n\t.color-hint {\n\t\twhite-space: nowrap;\n\t}\n\n\t.color-hint:before {\n\t\tcontent: '';\n\t\tbackground-color: var( --color-hint );\n\t\tdisplay: inline-block;\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin: 0 0.4rem 0.3rem 0.2rem;\n\t\tborder-radius: 50%;\n\t\tvertical-align: text-bottom;\n\t\tcursor: help;\n\t}\n\n\t.color-hint--base100:before {\n\t\tborder: var( --border-base );\n\t}\n}\n\n\n/* ... Icon ... */\n.icon {\n\tdisplay: inline-block;\n\twidth: 2rem;\n\theight: 2rem;\n\tmargin: 0 0.2rem;\n\tvertical-align: text-bottom;\n}\n\n\t.icon--indicator {\n\t\twidth: 1.2rem;\n\t\theight: 1.2rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\t.icon--intermediate {\n\t\twidth: 1.6rem;\n\t\theight: 1.6rem;\n\t\tmargin-bottom: 0.2rem;\n\t}\n\n\n/* ... Components ... */\n/*\n.page--components h2 {\n\tborder-bottom: 0;\n\tpadding-bottom: 0;\n}\n*/\n.components__designing {\n\tposition: relative;\n}\n\n.components__designing:after {\n\tcontent: '';\n\tbackground: url( ../../img/components/legend_16-8.svg ) no-repeat;\n\tposition: absolute;\n\tbottom: 0;\n\tright: 6.4rem;\n\twidth: 13.2rem;\n\theight: 6.4rem;\n}\n\n.page--components-messages .components__intro {\n\tmax-width: 700px;\n\tmargin-left: auto;\n\tmargin-right: auto;\n}\n\n/* ... Resources ... */\n.resources-table {\n\tdisplay: table;\n\twidth: 100%;\n\tmargin-top: 2.4rem;\n\tborder-collapse: collapse;\n}\n\n.resources-table__head,\n.resources-table__body {\n\tdisplay: table-row;\n\tborder-bottom: 1px solid #a2a9b1;\n}\n\n.resources-table__head {\n\tbackground-color: #eaecf0;\n}\n\n\t.resources-table__head h2 {\n\t\tmargin-top: 0;\n\t\tborder-bottom: 0;\n\t\tpadding-bottom: 0;\n\t\tfont-size: 2.1rem;\n\t\tfont-weight: var( --font-weight-base );\n\t}\n\n.resources-table__cell {\n\tdisplay: table-cell;\n\tpadding: 1.6rem 1.6rem 1.6rem 0;\n}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 1.6rem;\n\t}\n\n.lnk-resource {\n\twhite-space: nowrap;\n}\n\n/* ::: Footer ::: */\n.footer {\n\tcolor: var( --color-base );\n\tpadding: 2.4rem 0;\n\tfont-size: 1.3rem;\n}\n\n.footer__list {\n\tpadding: 0;\n}\n\n\t.footer__list:first-child {\n\t\tmargin: 0;\n\t}\n\n\t.footer__list:after {\n\t\tcontent: ' ';\n\t\tdisplay: block;\n\t\tclear: both;\n\t}\n\n\t.footer__list li {\n\t\tlist-style: none none;\n\t\tdisplay: block;\n\t\tpadding: 0.8rem 0 0;\n\t}\n\n\t.footer__list li:first-child {\n\t\tpadding-top: 0;\n\t}\n\n\t.footer__list + p {\n\t\tmargin-top: 1.2rem;\n\t}\n\n\t.footer__list--connect a {\n\t\tfont-weight: var( --font-weight-bold );\n\t}\n\n.lnk--wikimedia-project {\n\tdisplay: inline-block;\n\tpadding: 0.4rem 0;\n\ttext-transform: uppercase;\n}\n\n\n/* ::: Page-specific Styles ::: */\n/* ... Homepage ... */\n.page--home .page__title {\n\tborder: 0;\n\tpadding: 0;\n}\n\n/* ... “Design principles – Accessibility” ... */\n.page--design-principles-accessibility .nav--main .is-on > a {\n\tcursor: pointer;\n}\n\n.page--design-principles-accessibility h3 {\n\tpadding-right: 15%;\n}\n\n/* ... “Typography” ... */\n.page--visual-style-typography .figures-do-dont .figure__contents {\n\tpadding: 4.2rem 3.6rem;\n}\n\n.figures-do-dont--contrast .figure--dont {\n\tcolor: var( --wmui-color-base50 );\n}\n\n/* ... Typography Styles ... */\n\n.typography-styles dt {\n\tdisplay: inline-block;\n\tcolor: var( --color-base--subtle );\n\tmin-width: 10rem;\n\tmargin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */\n\tfont-size: 1.3rem;\n\tfont-weight: var( --font-weight-bold );\n\tvertical-align: top;\n}\n\n.typography-styles .typography-styles__code {\n\tmargin-bottom: 0;\n}\n\n.typography-styles dd {\n\tdisplay: inline;\n}\n\n.typography-styles dd > * {\n\tdisplay: inline-block;\n\tmargin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */\n}\n\n.typography-styles .figure__caption {\n\tpadding-top: 0; /* Remove `padding` from elements like figure caption */\n}\n\n.typography-styles dd:after {\n     content: '\\A';\n     white-space: pre;\n}\n\n.typography-styles + hr {\n\tmargin-top: 4rem;\n\tmargin-bottom: 4rem;\n}\n\n/* ... “Icons” ... */\n.page--visual-style-icons img { /* FIXME: generalize image styles */\n\tbackground-color: var( --wmui-color-base80 ); /* FIXME: var; */\n\tpadding: 2.4rem;\n}\n\n\n/* ::: Dynamic content ::: */\n.fonts-loaded cite,\n.fonts-loaded .site__title,\n.fonts-loaded .color-code {\n\tfont-family: var( --font-family-system-sans );\n}\n\n/* ::: Text Block-Level Elements ::: */\n.fonts-loaded .page__title,\n.fonts-loaded blockquote,\n.fonts-loaded .typography-styles h1 {\n\tfont-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */\n}\n\n\n/* ::: Media Queries ::: */\n/* ... Smartphone only ... */\n@media ( max-width: 767px ) {\n\t.nav--main {\n\t\tposition: absolute;\n\t\ttop: -3.2rem;\n\t\tleft: -1.6rem;\n\t\tright: -1.6rem;\n\t\tpadding-bottom: 1.6rem;\n\t\tbox-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */\n\t\tz-index: 1;\n\t\ttransform: translateY( -200% );\n\t\ttransition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );\n\t}\n\n\t.trigger--nav-main:checked + .nav--main {\n\t\ttransform: translateY( 0 );\n\t}\n\n\t.page__title {\n\t\tmargin-top: -0.4rem;\n\t\tfont-size: 2.8rem;\n\t}\n\n\t.typography-styles dt {\n\t\tdisplay: block;\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Components ... */\n\t.page--components .components__states {\n\t\tmargin-left: 0;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table,\n\t.resources-table__head,\n\t.resources-table__body,\n\t.resources-table__cell {\n\t\tdisplay: block;\n\t}\n\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:empty {\n\t\tdisplay: none;\n\t}\n\n\t.resources-table__body {\n\t\tpadding-left: 0;\n\t}\n\n\t.resources-table__cell {\n\t\tpadding-top: 0.8rem;\n\t\tpadding-bottom: 0.8rem;\n\t}\n}\n\n/* ... Smartphone portrait ... */\n@media ( min-width: 240px ) {\n\t.content-box,\n\t.site__title a,\n\t.nav--main a {\n\t\ttransition-property: background-color, padding;\n\t\ttransition-duration: var( --transition-ease-medium );\n\t}\n\n\t.site__title {\n\t\tmargin-left: 4.2rem;\n\t}\n\n\t\t.site__title a {\n\t\t\tpadding-left: 0;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: none;\n\t}\n\n\t.nav--main a {\n\t\tpadding-left: 1.6rem;\n\t\tpadding-right: 1.6rem;\n\t}\n\n\t.col--start,\n\t.col--end {\n\t\twidth: 100%;\n\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -1.6rem;\n\t\tmargin-right: -1.6rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 1.6rem;\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\twidth: 100%;\n\t\tmax-width: 568px;\n\t\tmargin-left: auto;\n\t\tmargin-right: auto;\n\t}\n\n\t.figure--illustrations-header img {\n\t\twidth: 100%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header,\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 0;\n\t}\n\n\t.color {\n\t\twidth: 61.8%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t.color-palette--base .color {\n\t\tmargin-right: 1.6rem;\n\t}\n\n\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\tmargin-right: 1.1rem;\n\t\tmargin-left: -0.2rem;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 4.2rem;\n\t}\n}\n\n/* ... Smartphone+ portrait ... */\n@media ( min-width: 414px ) {\n\t.content-box {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.nav--main {\n\t\tleft: -3.2rem;\n\t\tright: -3.2rem;\n\t}\n\n\t\t.nav--main a {\n\t\t\tpadding-left: 3.2rem;\n\t\t\tpadding-right: 3.2rem;\n\t\t}\n\n\t.figure--full,\n\t.resources-table__head {\n\t\tmargin-left: -3.2rem;\n\t\tmargin-right: -3.2rem;\n\t}\n\n\t.figure--full .figure__caption {\n\t\tmargin-left: 3.2rem;\n\t\tmargin-right: 3.2rem;\n\t}\n\n\t.resources-table__head .resources-table__cell:first-child {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.footer__list li {\n\t\tdisplay: list-item;\n\t\tfloat: left;\n\t\tpadding: 0 0.8rem 0 0;\n\t}\n\n\t.footer__list li:after {\n\t\tcontent: '\\2022'; /* bullet dot: '•' */\n\t\tcolor: var( --color-base--subtle );\n\t\tpadding: 0 0 0 0.8rem;\n\t\tfont-weight: 100;\n\t}\n\n\t.footer__list li:last-child:after {\n\t\tcontent: '';\n\t\tpadding: 0;\n\t}\n\n\t.color {\n\t\twidth: 16rem;\n\t\tmargin-right: 2.4rem;\n\t}\n}\n\n/* ... Smartphone landscape ... */\n@media ( min-width: 568px ) {\n\t.lnk--contribute {\n\t\tdisplay: block;\n\t\tposition: absolute;\n\t\tbottom: 1.5rem; /* Not on 8px base due to `line-height` setting */\n\t\tright: 3.2rem;\n\t\ttext-align: right;\n\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 0;\n\t\ttransition: opacity var( --transition-ease-medium );\n\t}\n\n\t.figures-do-dont .figure {\n\t\tmax-width: 61.8%;\n\t}\n\n\t.figure--this-is-for-everyone img,\n\t.figure--trustworthy-yet-joyful img {\n\t\tmax-width: none;\n\t}\n\n\t.figure--illustrations-header {\n\t\tfloat: left;\n\t\twidth: 44.4%;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header {\n\t\twidth: 55.55%;\n\t\tmargin-top: 0.8rem;\n\t}\n\n\t.figure--illustrations-header + .figure--illustrations-header img {\n\t\tmargin-top: 1.6rem;\n\t}\n}\n\n/* ... Tablet ... */\n@media ( min-width: 768px ) {\n\timg {\n\t\tborder-radius: 2px;\n\t}\n\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: 960px;\n\t}\n\n\t.btn--nav-main {\n\t\tdisplay: none;\n\t}\n\n\t.site__title {\n\t\tfloat: left;\n\t\tmargin-left: 0;\n\t}\n\n\t\t.site__title a,\n\t\t.nav--main a {\n\t\t\tpadding-left: 1.6rem;\n\t\t\tpadding-right: 1.6rem;\n\t\t}\n\n\t.lnk--contribute span {\n\t\tdisplay: inline;\n\t\topacity: 1;\n\t}\n\n\t.col--start {\n\t\twidth: 20.8rem;\n\t\tz-index: 1;\n\t\ttransition: width var( --transition-ease-medium );\n\t}\n\n\t.col--end {\n\t\tmargin-left: -20.8rem;\n\t\tpadding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */\n\t}\n\n\t.nav--main {\n\t\tleft: auto;\n\t\tright: auto;\n\t}\n\n\t.figure--full,\n\t.figure--full .figure__caption {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t.figures-do-dont .figure {\n\t\tfloat: left;\n\t\twidth: 50%;\n\t}\n\n\t.color-palette--base .color:nth-child( 3n+4 ) {\n\t\tclear: unset;\n\t}\n\n\t/* ... “Illustrations” ... */\n\t.illustrations-case-study img {\n\t\tfloat: left;\n\t\twidth: 33.33%;\n\t}\n\n\t.page--components figure {\n\t\tmargin-left: 6.4rem;\n\t}\n}\n\n/* ... Tablet+ / Netbook ... */\n@media ( min-width: 992px ) {\n\t.content-box {\n\t\twidth: 100%;\n\t\tmax-width: var( --width-site-desktop-wide );\n\t}\n\n\t.site__title a,\n\t.nav--main a {\n\t\tpadding-left: 3.2rem;\n\t\tpadding-right: 3.2rem;\n\t}\n\n\t.col--start {\n\t\twidth: 24rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -24rem;\n\t\tpadding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */\n\t}\n\n\t.color-palette--overview:first-child {\n\t\tmargin-top: 2.4rem;\n\t}\n\n\t.color {\n\t\tmargin-right: 2.4rem;\n\t}\n\n\t\t.color-palette--base .color {\n\t\t\tmargin-right: 1.35rem;\n\t\t}\n\n\t\t.color-palette--overview.color-palette--base .color--emphasized {\n\t\t\tmargin-right: 1.35rem;\n\t\t\tmargin-left: 0;\n\t\t}\n\n\t.color-palette--overview.color-palette--red:before,\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:before,\n\t.color-palette--overview.color-palette--green:after {\n\t\tcontent: '';\n\t\tdisplay: none;\n\t}\n\n\t.color-palette--overview.color-palette--red:after,\n\t.color-palette--overview.color-palette--green:after,\n\t.color-section .color:nth-child( 3n+4 ) {\n\t\tclear: both;\n\t}\n\n\t/* ... Resources ... */\n\t.resources-table__body .resources-table__cell {\n\t\ttransition: background-color var( --transition-ease-medium );\n\t}\n\n\t\t.resources-table__body:hover .resources-table__cell {\n\t\t\tbackground-color: #f8f9fa;\n\t\t}\n\n\t\t.resources-table__head .resources-table__cell:first-child,\n\t\t.resources-table__body .resources-table__cell:first-child {\n\t\t\tpadding-left: 1.6rem;\n\t\t}\n}\n\n@media ( min-width: 1200px ) {\n\t.content-box {\n\t\twidth: var( --width-site-desktop-wide );\n\t}\n\n\t.col--start {\n\t\twidth: 25.6rem;\n\t}\n\n\t.col--end {\n\t\tmargin-left: -25.6rem;\n\t\tpadding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */\n\t}\n}\n"]}
\ No newline at end of file
diff --git a/css/wmui-style-guide.dev.css b/css/wmui-style-guide.dev.css
index 476eedd..3ef2174 100644
--- a/css/wmui-style-guide.dev.css
+++ b/css/wmui-style-guide.dev.css
@@ -1,1373 +1,1379 @@
 /* ::: Vendor Imports ::: */
 /* Load files from 'node_modules' folders with postCSS-import plugin.
  * Modules specified in package.json file */
 @import 'wikimedia-ui-base/wikimedia-ui-base.css';
 @import 'normalize.css';
 
 /* ::: Local Imports ::: */
 @import 'partials/fonts.css';
 
 :root {
 	--background-color-hr: var( --wmui-color-base80 );
 	--width-site: 960px;
 	--width-site-desktop-wide: 1140px;
 	--border-color-heading: var( --wmui-color-base80 );
 	--border-width-heading: 3px;
 	/* HACK; Add Georgia to serif fallback as long as WikimediaUI Base isn't updated */
 	--font-family-serif--fallback: Georgia, serif; /* stylelint-disable-line value-keyword-case */
 	--font-weight-base: 400;
-	--font-weight-bold: 700;
-	--font-weight-heading: 600;
+	/* Setting bold to `600` as our stack works better with it, only Lato is on the edge.
+	   Helvetica and Arial fallback gracefully to `700`, see T246791. */
+	--font-weight-bold: 600;
 	--font-weight-ultralight: 100;
 }
 
 * {
 	box-sizing: border-box;
 }
 
 html {
 	font-size: 62.5%;
 }
 
 body {
 	background-color: var( --wmui-color-base80 ); /* FIXME: var; */
 	color: var( --color-base );
 	margin: 0;
 	font-family: var( --font-family-system-sans );
 	font-size: 1.6rem;
 	line-height: var( --line-height-base );
 }
 
 /* ::: Text Block-Level Elements ::: */
 /* ... Headings ... */
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
 	margin: 3.2rem 0 0;
 	line-height: 1.25;
 	transition: font-size var( --transition-ease-medium ), font-weight var( --transition-ease-medium );
 }
 
 h2,
 h3,
 h4,
 h5 {
-	font-weight: var( --font-weight-heading );
+	font-weight: var( --font-weight-bold );
 }
 
 h1,
 .page__title {
 	font-family: var( --font-family-serif--fallback ); /* Fallback */
 	font-size: 3.2rem;
 	font-weight: var( --font-weight-base );
 }
 
 h2 {
 	border-bottom: var( --border-width-heading ) var( --border-style-base ) var( --border-color-heading );
 	padding-bottom: 2px;
 	font-size: 2.4rem;
 }
 
 /* Reduce top margin when introductory headlines are following each other. */
 h2 + h3 {
 	margin-top: 1.6rem;
 }
 
 h3 {
 	font-size: 2rem;
 }
 
 h4 {
 	font-size: 1.8rem;
 }
 
 h5 {
 	font-size: 1.6rem;
 }
 
 h6 {
 	font-size: 1.6rem;
 	font-weight: normal;
 }
 
 /* ... Other Block-Level Elements ... */
 blockquote {
 	border-left: 3px solid var( --wmui-color-base70 ); /* FIXME: var */
 	margin: 1.6rem 0 0;
 	padding: 0 3.2rem;
 	font-family: var( --font-family-serif--fallback ); /* Fallback */
 	font-size: 2rem;
 	font-style: italic;
 	line-height: 1.5;
 }
 
 blockquote cite {
 	display: block;
 	margin-top: 0.8rem;
 	font-family: var( --font-family-system-sans );
 	font-size: 1.4rem;
 	font-style: normal;
 }
 
 	blockquote cite:before {
 		content: '— ';
 	}
 
 code,
 pre,
 .mw-code {
 	font-family: var( --font-family-monospace );
 }
 
 hr {
 	background: var( --background-color-hr );
 	display: block;
 	height: 0.8rem;
 	border: 0;
 	margin: 8rem 0;
 }
 
 p {
 	margin: 3.2rem 0 0;
 	line-height: 1.5;
 }
 
 	h1 + p,
 	h2 + p,
 	h3 + p,
 	h4 + p,
 	h5 + p,
 	h6 + p,
 	p + p,
 	ul + p,
 	p:first-child {
 		margin: 0.8rem 0 0;
 	}
 
 	blockquote + p {
 		margin-top: 1.6rem;
 	}
 
 pre,
 .mw-code {
 	background-color: var( --background-color-code );
 	color: var( --color-base--emphasized );
 	border: var( --border-base );
 	padding: 1.2rem 2rem;
 	font-size: 1.4rem;
 	white-space: pre-wrap;
 }
 
 /* ... Lists ... */
 ol,
 ul {
 	margin: 0.8rem 0;
 	padding: 0 0 0 1.8rem; /* Can't remain within our 8px based sizing due to browser defaults */
 }
 
 .content li {
 	margin-top: 0.4rem;
 }
 
 	.content li:first-child {
 		margin-top: 0;
 	}
 
 /* ... Images & Figures ... */
 figure {
 	margin: 0.8rem 0 0;
 }
 
 img {
 	display: block;
 	max-width: 100%;
 	margin: 1.6rem 0 0;
 }
 
 .page--components figure {
 	margin-left: 6.4rem;
 	padding-top: 0.8rem;
 }
 
 .page--components figure img {
 	margin-top: 0.8rem;
 }
 
 /* ::: Inline Elements ::: */
 a {
 	color: var( --color-primary );
 	text-decoration: none;
 }
 
 	a:hover {
 		text-decoration: underline;
 	}
 
 	a:active {
 		color: var( --color-primary--active );
 	}
 
+b,
+strong {
+	font-weight: var( --font-weight-bold );
+}
+
 code {
 	background-color: var( --background-color-code );
 	display: inline-block;
 	padding: 0.2rem 0.4rem;
 	font-size: 1.4rem;
 }
 
 small {
 	font-size: 1.3rem;
 }
 
 sub,
 sup {
 	font-size: 1.1rem;
 }
 
 /* ::: General Classes ::: */
 /* ::: Text for Screen Readers only ::: */
 .is-aural {
 	display: block;
 	position: absolute;
 	clip: rect( 1px, 1px, 1px, 1px );
 	width: 1px;
 	height: 1px;
 	margin: -1px;
 	border: 0;
 	padding: 0;
 	overflow: hidden;
 }
 
 	.is-aural.is-focusable:active,
 	.is-aural.is-focusable:focus {
 		position: static;
 		clip: auto;
 		width: auto;
 		height: auto;
 		margin: 0;
 		text-decoration: underline;
 		overflow: visible;
 	}
 
 .clearfix:before,
 .clearfix:after,
 .page:before,
 .page:after,
 .content-box:before,
 .content-box:after,
 .color-palette:before,
 .color-palette:after,
 .figures-do-dont:before,
 .figures-do-dont:after,
 .content__illustration-style .figure--full:before,
 .content__illustration-style .figure--full:after {
 	content: ' ';
 	display: table;
 }
 
 .clearfix:after,
 .page:after,
 .content-box:after,
 .color-palette:after,
 .figures-do-dont:after,
 .content__illustration-style .figure--full:after {
 	clear: both;
 }
 
 /* ::: Text-formatting ::: */
 .is-subtle {
 	color: var( --color-base--subtle );
 }
 
 .content-box {
 	position: relative;
 	margin-right: auto;
 	margin-left: auto;
 	padding-left: 1.6rem; /* FIXME: var( --grid-padding ); */
 	padding-right: 1.6rem;
 }
 
 
 /* ::: Structure ::: */
 .header {
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	min-height: 6.4rem;
 	line-height: 6.4rem;
 }
 
 	.site__title {
 		color: var( --wmui-color-base10 );
 		margin-top: 0;
 		height: 6.4rem;
 		font-family: var( --font-family-system-sans );
 		font-size: 1.6rem;
 		font-weight: var( --font-weight-base );
 		letter-spacing: 0.5px;
 	}
 
 		.site__title a {
 			color: inherit;
 			display: inline-block;
 			padding: 1.2rem 3.2rem 0;
 			transition: color var( --transition-ease-medium );
 		}
 
 		.site__title a:hover {
 			color: var( --wmui-color-base0 ); /* --color-base-emphasized */
 			text-decoration: none;
 		}
 
 		.site__org {
 			display: block;
 		}
 
 		.site__project {
 			font-weight: var( --font-weight-bold );
 		}
 
 	/* ... Navigation button ... */
 	.btn--nav-main {
 		position: absolute;
 		top: 1.2rem;
 		width: 4.2rem;
 		height: 4.2rem;
 		cursor: pointer;
 	}
 
 	/* Fake hamburger icon */
 	.btn--nav-main i {
 		display: block;
 		height: 4.2rem;
 		transition: color var( --transition-ease-medium ), box-shadow var( --transition-ease-medium );
 	}
 
 	.btn--nav-main i:before,
 	.btn--nav-main i:after {
 		content: '';
 		background-color: var( --wmui-color-base20 );
 		width: 2rem;
 		height: 2px;
 		position: absolute;
 		top: 0.4rem;
 		left: 0;
 	}
 
 	.btn--nav-main i:after {
 		top: 1.1rem;
 		box-shadow: 0 0.7rem 0 var( --wmui-color-base20 );
 	}
 
 	.btn--nav-main i:hover:before,
 	.btn--nav-main i:hover:after {
 		background-color: var( --wmui-color-base0 ); /* --color-base-emphasized */
 	}
 
 	.btn--nav-main i:hover:after {
 		box-shadow: 0 0.7rem 0 var( --wmui-color-base0 );
 	}
 
 	.btn--nav-main span {
 		display: block;
 		position: absolute;
 		clip: rect( 1px, 1px, 1px, 1px );
 		width: 1px;
 		height: 1px;
 		margin: -1px;
 		overflow: hidden;
 	}
 
 	/* ... GitHub Contribute Link ... */
 	.lnk--contribute {
 		font-size: 1.4rem;
 		line-height: 1.4rem; /* Derive slightly from template for cross-browser compliance */
 	}
 
 
 /* ... Content ... */
 .page {
 	background-color: var( --background-color-base );
 	position: relative;
 	margin-top: 6.4rem;
 	padding: 6.4rem 0;
 	box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
 	overflow-y: hidden;
 }
 
 .content {
 	float: left;
 }
 
 .col {
 	float: left;
 	position: relative;
 	min-height: 1px;
 }
 
 	.col--start {
 		padding: 0;
 	}
 
 	.col--end {
 		padding: 0;
 	}
 
 /* ... Main Navigation ... */
 .nav--main {
 	background-color: var( --background-color-base ); /* needed for menu appearance on mobile below */
 	/* margin-top: 6.4rem; */
 }
 
 .nav--main li:not( .is-on ) ul,
 .trigger--nav-main {
 	display: none;
 }
 
 .nav--main ol,
 .nav--main ul {
 	padding: 0;
 }
 
 .nav--main ol:first-child {
 	margin: 0;
 }
 
 .nav--main li {
 	padding: 0;
 	list-style: none none;
 }
 
 .nav--main > ol > li {
 	margin-bottom: 0.4rem;
 }
 
 .nav--main a {
 	color: var( --color-base );
 	display: block;
 	padding: 0.8rem 1.2rem;
 	font-size: 1.6rem;
 	text-decoration: none;
 	transition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium ), padding var( --transition-ease-medium );
 }
 
 .nav--main a:hover,
 .nav--main a:focus {
 	background-color: var( --background-color-code );
 	color: var( --color-base--emphasized );
 }
 
 .nav--main .is-on > a {
 	background-color: var( --background-color-primary );
 	color: var( --color-primary );
 	/* border-left: 2px solid var( --color-primary ); */
 	border-radius: var( --border-radius-base );
 	font-weight: var( --font-weight-bold );
 	cursor: default;
 }
 
 .nav__sub-items {
 	margin-top: 1.2rem;
 	margin-bottom: 1em; /* FIXME: replace with rem and mt */
 }
 
 .nav__sub-items > .nav__sub-item {
 	margin-left: 3.6rem;
 }
 
 .nav--main .nav__sub-items ul {
 	margin: 0;
 }
 
 .nav--main .nav__sub-items a { /* stylelint-disable-line no-descending-specificity */
 	color: var( --wmui-color-base20 );
 	border-left: var( --border-width-base ) solid var( --wmui-color-base80 );
     border-radius: 0 var( --border-radius-base ) var( --border-radius-base ) 0;
 	padding-left: 1.6rem;
 	font-size: 1.4rem;
 	transition: background-color var( --transition-ease-medium ), color var( --transition-ease-medium );
 }
 
 .nav--main .nav__sub-item.is-on > a {
 	background-color: var( --background-color-base );
 	color: var( --color-base--active );
 	border-left-color: var( --wmui-color-base0 );
 	font-weight: var( --font-weight-bold );
 }
 
 .nav--main .nav__sub-item .nav__sub-item a {
 	padding-left: 3.6rem;
 }
 
 
 /* ::: Content ::: */
 .page__parent-title {
 	color: var( --color-base--subtle );
 	margin-top: -2.8rem;
 }
 
 .page__title {
 	margin-top: -0.8rem;
 }
 
 .page__parent-title + .page__title {
 	margin-top: -0.4rem;
 }
 
 .page__tagline {
 	margin-top: 1.2rem;
 	font-size: 2rem;
 	font-style: italic;
 	font-weight: 100;
 }
 
 /* Remove, doesn't provide good styling
 .page__lead {
 	font-size: 1.8rem;
 }
 */
 
 .figures--full {
 	background-color: var( --wmui-color-base90 );
 }
 
 .figure__caption,
 .heading__description {
 	color: var( --color-base--subtle );
 	clear: both;
 	display: block;
 	font-size: 1.3rem;
 }
 
 .figure__caption {
 	padding-top: 0.8rem; /* `padding-top` due to usage with floated images in figure above */
 	font-style: italic;
 }
 
 	.figure__caption:empty {
 		display: none;
 	}
 
 .heading__description {
 	float: right;
 	margin-top: -1.9rem;
 }
 
 	.heading__description + * {
 		clear: both;
 	}
 
 /* ... “Do” & “Don't” figures ... */
 .figures-do-dont {
 	margin-top: 1.6rem;
 }
 
 .figures-do-dont .figure {
 	background-color: var( --wmui-color-base80 );
 	border-top-left-radius: var( --border-radius-base );
 	border-top-right-radius: var( --border-radius-base );
 }
 
 .figures-do-dont .figure--dont {
 	border-left: var( --border-width-base ) solid var( --color-base--inverted );
 }
 
 .figures-do-dont .figure__caption {
 	background-color: var( --color-base--inverted );
 	display: block;
 	border-top-width: 0.8rem;
 	border-top-style: solid;
 	padding-right: 0.8em;
 }
 
 .figure--do .figure__caption,
 .do {
 	border-top-color: var( --color-secondary );
 }
 
 .figure--dont .figure__caption,
 .dont {
 	border-top-color: var( --color-destructive );
 }
 
 .do,
 .dont {
 	font-style: normal;
 	font-weight: var( --font-weight-bold );
 }
 
 	.do:before,
 	.dont:before {
 		display: inline-block;
 		margin-right: 0.4rem;
 		padding-top: 0.4rem;
 		font-size: 2.1rem;
 		line-height: 1rem;
 		vertical-align: top;
 	}
 
 .do {
 	color: var( --color-secondary );
 }
 
 	.do:before {
 		content: '✓';
 	}
 
 .dont {
 	color: var( --color-destructive );
 }
 
 	.dont:before {
 		content: '×';
 	}
 
 
 /* ... Color ... */
 .color-palette {
 	margin: 2.4rem 0 0;
 	padding: 0;
 }
 
 .color-palette + .color-palette {
 	margin-top: 0;
 }
 
 .color {
 	color: var( --color-base--emphasized );
 	list-style: none none;
 	display: block;
 	float: left;
 	position: relative;
 	width: 61.8%;
 	height: 16rem;
 	margin-bottom: 3.2rem;
 	padding: 1.2rem;
 	border: var( --border-width-base ) var( --border-style-base ) var( --border-color-inset--focus );
 	border-radius: var( --border-radius-base );
 	font-size: 1.4rem;
 }
 
 	.color--dark,
 	.color__wcag-level span {
 		color: var( --color-base--inverted );
 	}
 
 	.color--dark .color__wcag-level span {
 		color: var( --color-base--emphasized );
 	}
 
 	.color-palette .color:first-child {
 		margin-top: 0.4rem;
 	}
 
 	.color-palette--overview .color {
 		width: 6.4rem;
 		height: 6.2rem;
 		margin-top: 0.8rem;
 		margin-right: 1.2rem;
 		margin-bottom: 2.4rem;
 		border-radius: 3.2rem;
 		cursor: default;
 	}
 
 	.color-palette--overview .color:first-child {
 		margin-top: 0.8rem;
 	}
 
 	.color-palette--overview .color--emphasized {
 		width: 7.2rem;
 		height: 7rem;
 		margin-top: 0;
 		border-radius: 7.2rem;
 		padding-top: 2rem;
 	}
 
 	.color-palette--base .color {
 		margin-right: 1.35rem;
 	}
 
 	.color-section .color .color-code--hsb {
 		transition: opacity var( --transition-ease-medium );
 	}
 
 		.color-section .color:hover .color-code--hsb {
 			opacity: 1;
 		}
 
 	.color__name {
 		display: block;
 		position: absolute;
 		bottom: 1.2rem;
 		left: 1.2rem;
 		font-size: 3.2rem;
 		font-weight: var( --font-weight-ultralight );
 	}
 
 		.color-palette--overview .color__name {
 			position: relative;
 			bottom: auto;
 			left: auto;
 			padding-top: 1.2rem;
 			font-size: 2.4rem;
 			line-height: 1;
 		}
 
 		.color__type,
 		.color-code.color-code--rgb,
 		.color-palette--overview .color__name,
 		.color-palette--overview .color-code {
 			display: none;
 		}
 
 	.color-code {
 		background-color: inherit;
 		display: block;
 		padding: 0;
 		font-family: var( --font-family-system-sans );
 	}
 
 		.color-code--hsb {
 			opacity: 0;
 		}
 
 @supports ( --css: variables ) {
 	.color-hint {
 		white-space: nowrap;
 	}
 
 	.color-hint:before {
 		content: '';
 		background-color: var( --color-hint );
 		display: inline-block;
 		width: 1.2rem;
 		height: 1.2rem;
 		margin: 0 0.4rem 0.3rem 0.2rem;
 		border-radius: 50%;
 		vertical-align: text-bottom;
 		cursor: help;
 	}
 
 	.color-hint--base100:before {
 		border: var( --border-base );
 	}
 }
 
 
 /* ... Icon ... */
 .icon {
 	display: inline-block;
 	width: 2rem;
 	height: 2rem;
 	margin: 0 0.2rem;
 	vertical-align: text-bottom;
 }
 
 	.icon--indicator {
 		width: 1.2rem;
 		height: 1.2rem;
 		margin-bottom: 0.2rem;
 	}
 
 	.icon--intermediate {
 		width: 1.6rem;
 		height: 1.6rem;
 		margin-bottom: 0.2rem;
 	}
 
 
 /* ... Components ... */
 /*
 .page--components h2 {
 	border-bottom: 0;
 	padding-bottom: 0;
 }
 */
 .components__designing {
 	position: relative;
 }
 
 .components__designing:after {
 	content: '';
 	background: url( ../../img/components/legend_16-8.svg ) no-repeat;
 	position: absolute;
 	bottom: 0;
 	right: 6.4rem;
 	width: 13.2rem;
 	height: 6.4rem;
 }
 
 .page--components-messages .components__intro {
 	max-width: 700px;
 	margin-left: auto;
 	margin-right: auto;
 }
 
 /* ... Resources ... */
 .resources-table {
 	display: table;
 	width: 100%;
 	margin-top: 2.4rem;
 	border-collapse: collapse;
 }
 
 .resources-table__head,
 .resources-table__body {
 	display: table-row;
 	border-bottom: 1px solid #a2a9b1;
 }
 
 .resources-table__head {
 	background-color: #eaecf0;
 }
 
 	.resources-table__head h2 {
 		margin-top: 0;
 		border-bottom: 0;
 		padding-bottom: 0;
 		font-size: 2.1rem;
 		font-weight: var( --font-weight-base );
 	}
 
 .resources-table__cell {
 	display: table-cell;
 	padding: 1.6rem 1.6rem 1.6rem 0;
 }
 
 	.resources-table__head .resources-table__cell:first-child {
 		padding-left: 1.6rem;
 	}
 
 .lnk-resource {
 	white-space: nowrap;
 }
 
 /* ::: Footer ::: */
 .footer {
 	color: var( --color-base );
 	padding: 2.4rem 0;
 	font-size: 1.3rem;
 }
 
 .footer__list {
 	padding: 0;
 }
 
 	.footer__list:first-child {
 		margin: 0;
 	}
 
 	.footer__list:after {
 		content: ' ';
 		display: block;
 		clear: both;
 	}
 
 	.footer__list li {
 		list-style: none none;
 		display: block;
 		padding: 0.8rem 0 0;
 	}
 
 	.footer__list li:first-child {
 		padding-top: 0;
 	}
 
 	.footer__list + p {
 		margin-top: 1.2rem;
 	}
 
 	.footer__list--connect a {
 		font-weight: var( --font-weight-bold );
 	}
 
 .lnk--wikimedia-project {
 	display: inline-block;
 	padding: 0.4rem 0;
 	text-transform: uppercase;
 }
 
 
 /* ::: Page-specific Styles ::: */
 /* ... Homepage ... */
 .page--home .page__title {
 	border: 0;
 	padding: 0;
 }
 
 /* ... “Design principles – Accessibility” ... */
 .page--design-principles-accessibility .nav--main .is-on > a {
 	cursor: pointer;
 }
 
 .page--design-principles-accessibility h3 {
 	padding-right: 15%;
 }
 
 /* ... “Typography” ... */
 .page--visual-style-typography .figures-do-dont .figure__contents {
 	padding: 4.2rem 3.6rem;
 }
 
 .figures-do-dont--contrast .figure--dont {
 	color: var( --wmui-color-base50 );
 }
 
 /* ... Typography Styles ... */
 
 .typography-styles dt {
 	display: inline-block;
 	color: var( --color-base--subtle );
 	min-width: 10rem;
 	margin: 0 0 3.2rem 1.6rem; /* Need to rely on `margin-bottom` here for vertical alignment */
 	font-size: 1.3rem;
 	font-weight: var( --font-weight-bold );
 	vertical-align: top;
 }
 
 .typography-styles .typography-styles__code {
 	margin-bottom: 0;
 }
 
 .typography-styles dd {
 	display: inline;
 }
 
 .typography-styles dd > * {
 	display: inline-block;
 	margin-top: 0; /* Remove `margin` from elements like paragraphs and list elements */
 }
 
 .typography-styles .figure__caption {
 	padding-top: 0; /* Remove `padding` from elements like figure caption */
 }
 
 .typography-styles dd:after {
      content: '\A';
      white-space: pre;
 }
 
 .typography-styles + hr {
 	margin-top: 4rem;
 	margin-bottom: 4rem;
 }
 
 /* ... “Icons” ... */
 .page--visual-style-icons img { /* FIXME: generalize image styles */
 	background-color: var( --wmui-color-base80 ); /* FIXME: var; */
 	padding: 2.4rem;
 }
 
 
 /* ::: Dynamic content ::: */
 .fonts-loaded cite,
 .fonts-loaded .site__title,
 .fonts-loaded .color-code {
 	font-family: var( --font-family-system-sans );
 }
 
 /* ::: Text Block-Level Elements ::: */
 .fonts-loaded .page__title,
 .fonts-loaded blockquote,
 .fonts-loaded .typography-styles h1 {
 	font-family: 'Charter', Georgia, serif; /* stylelint-disable-line font-family-name-quotes */
 }
 
 
 /* ::: Media Queries ::: */
 /* ... Smartphone only ... */
 @media ( max-width: 767px ) {
 	.nav--main {
 		position: absolute;
 		top: -3.2rem;
 		left: -1.6rem;
 		right: -1.6rem;
 		padding-bottom: 1.6rem;
 		box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 ); /* FIXME: Update wmui-base */
 		z-index: 1;
 		transform: translateY( -200% );
 		transition: left var( --transition-ease-medium ), right var( --transition-ease-medium ), transform var( --transition-ease-medium );
 	}
 
 	.trigger--nav-main:checked + .nav--main {
 		transform: translateY( 0 );
 	}
 
 	.page__title {
 		margin-top: -0.4rem;
 		font-size: 2.8rem;
 	}
 
 	.typography-styles dt {
 		display: block;
 		margin-left: 0;
 	}
 
 	/* ... Components ... */
 	.page--components .components__states {
 		margin-left: 0;
 	}
 
 	/* ... Resources ... */
 	.resources-table,
 	.resources-table__head,
 	.resources-table__body,
 	.resources-table__cell {
 		display: block;
 	}
 
 	.resources-table__head {
 		margin-left: -1.6rem;
 		margin-right: -1.6rem;
 	}
 
 	.resources-table__head .resources-table__cell:empty {
 		display: none;
 	}
 
 	.resources-table__body {
 		padding-left: 0;
 	}
 
 	.resources-table__cell {
 		padding-top: 0.8rem;
 		padding-bottom: 0.8rem;
 	}
 }
 
 /* ... Smartphone portrait ... */
 @media ( min-width: 240px ) {
 	.content-box,
 	.site__title a,
 	.nav--main a {
 		transition-property: background-color, padding;
 		transition-duration: var( --transition-ease-medium );
 	}
 
 	.site__title {
 		margin-left: 4.2rem;
 	}
 
 		.site__title a {
 			padding-left: 0;
 		}
 
 	.lnk--contribute span {
 		display: none;
 	}
 
 	.nav--main a {
 		padding-left: 1.6rem;
 		padding-right: 1.6rem;
 	}
 
 	.col--start,
 	.col--end {
 		width: 100%;
 	}
 
 	.figure--full,
 	.resources-table__head {
 		margin-left: -1.6rem;
 		margin-right: -1.6rem;
 	}
 
 	.figure--full .figure__caption {
 		margin-left: 1.6rem;
 		margin-right: 1.6rem;
 	}
 
 	.figure--this-is-for-everyone img,
 	.figure--trustworthy-yet-joyful img {
 		width: 100%;
 		max-width: 568px;
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	.figure--illustrations-header img {
 		width: 100%;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header,
 	.figure--illustrations-header + .figure--illustrations-header img {
 		margin-top: 0;
 	}
 
 	.color {
 		width: 61.8%;
 	}
 
 	.color-palette--base .color:nth-child( 3n+4 ) {
 		clear: both;
 	}
 
 	.color-palette--base .color {
 		margin-right: 1.6rem;
 	}
 
 	.color-palette--overview.color-palette--base .color--emphasized {
 		margin-right: 1.1rem;
 		margin-left: -0.2rem;
 	}
 
 	.page--components figure {
 		margin-left: 4.2rem;
 	}
 }
 
 /* ... Smartphone+ portrait ... */
 @media ( min-width: 414px ) {
 	.content-box {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.nav--main {
 		left: -3.2rem;
 		right: -3.2rem;
 	}
 
 		.nav--main a {
 			padding-left: 3.2rem;
 			padding-right: 3.2rem;
 		}
 
 	.figure--full,
 	.resources-table__head {
 		margin-left: -3.2rem;
 		margin-right: -3.2rem;
 	}
 
 	.figure--full .figure__caption {
 		margin-left: 3.2rem;
 		margin-right: 3.2rem;
 	}
 
 	.resources-table__head .resources-table__cell:first-child {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.footer__list li {
 		display: list-item;
 		float: left;
 		padding: 0 0.8rem 0 0;
 	}
 
 	.footer__list li:after {
 		content: '\2022'; /* bullet dot: '•' */
 		color: var( --color-base--subtle );
 		padding: 0 0 0 0.8rem;
 		font-weight: 100;
 	}
 
 	.footer__list li:last-child:after {
 		content: '';
 		padding: 0;
 	}
 
 	.color {
 		width: 16rem;
 		margin-right: 2.4rem;
 	}
 }
 
 /* ... Smartphone landscape ... */
 @media ( min-width: 568px ) {
 	.lnk--contribute {
 		display: block;
 		position: absolute;
 		bottom: 1.5rem; /* Not on 8px base due to `line-height` setting */
 		right: 3.2rem;
 		text-align: right;
 	}
 
 	.lnk--contribute span {
 		display: inline;
 		opacity: 0;
 		transition: opacity var( --transition-ease-medium );
 	}
 
 	.figures-do-dont .figure {
 		max-width: 61.8%;
 	}
 
 	.figure--this-is-for-everyone img,
 	.figure--trustworthy-yet-joyful img {
 		max-width: none;
 	}
 
 	.figure--illustrations-header {
 		float: left;
 		width: 44.4%;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header {
 		width: 55.55%;
 		margin-top: 0.8rem;
 	}
 
 	.figure--illustrations-header + .figure--illustrations-header img {
 		margin-top: 1.6rem;
 	}
 }
 
 /* ... Tablet ... */
 @media ( min-width: 768px ) {
 	img {
 		border-radius: 2px;
 	}
 
 	.content-box {
 		width: 100%;
 		max-width: 960px;
 	}
 
 	.btn--nav-main {
 		display: none;
 	}
 
 	.site__title {
 		float: left;
 		margin-left: 0;
 	}
 
 		.site__title a,
 		.nav--main a {
 			padding-left: 1.6rem;
 			padding-right: 1.6rem;
 		}
 
 	.lnk--contribute span {
 		display: inline;
 		opacity: 1;
 	}
 
 	.col--start {
 		width: 20.8rem;
 		z-index: 1;
 		transition: width var( --transition-ease-medium );
 	}
 
 	.col--end {
 		margin-left: -20.8rem;
 		padding-left: 24rem; /* = 22.4 + (2 * 1.6 padding) */
 	}
 
 	.nav--main {
 		left: auto;
 		right: auto;
 	}
 
 	.figure--full,
 	.figure--full .figure__caption {
 		margin-left: 0;
 		margin-right: 0;
 	}
 
 	.figures-do-dont .figure {
 		float: left;
 		width: 50%;
 	}
 
 	.color-palette--base .color:nth-child( 3n+4 ) {
 		clear: unset;
 	}
 
 	/* ... “Illustrations” ... */
 	.illustrations-case-study img {
 		float: left;
 		width: 33.33%;
 	}
 
 	.page--components figure {
 		margin-left: 6.4rem;
 	}
 }
 
 /* ... Tablet+ / Netbook ... */
 @media ( min-width: 992px ) {
 	.content-box {
 		width: 100%;
 		max-width: var( --width-site-desktop-wide );
 	}
 
 	.site__title a,
 	.nav--main a {
 		padding-left: 3.2rem;
 		padding-right: 3.2rem;
 	}
 
 	.col--start {
 		width: 24rem;
 	}
 
 	.col--end {
 		margin-left: -24rem;
 		padding-left: 27.2rem; /* = 24 + (2 * 1.6 padding) */
 	}
 
 	.color-palette--overview:first-child {
 		margin-top: 2.4rem;
 	}
 
 	.color {
 		margin-right: 2.4rem;
 	}
 
 		.color-palette--base .color {
 			margin-right: 1.35rem;
 		}
 
 		.color-palette--overview.color-palette--base .color--emphasized {
 			margin-right: 1.35rem;
 			margin-left: 0;
 		}
 
 	.color-palette--overview.color-palette--red:before,
 	.color-palette--overview.color-palette--red:after,
 	.color-palette--overview.color-palette--green:before,
 	.color-palette--overview.color-palette--green:after {
 		content: '';
 		display: none;
 	}
 
 	.color-palette--overview.color-palette--red:after,
 	.color-palette--overview.color-palette--green:after,
 	.color-section .color:nth-child( 3n+4 ) {
 		clear: both;
 	}
 
 	/* ... Resources ... */
 	.resources-table__body .resources-table__cell {
 		transition: background-color var( --transition-ease-medium );
 	}
 
 		.resources-table__body:hover .resources-table__cell {
 			background-color: #f8f9fa;
 		}
 
 		.resources-table__head .resources-table__cell:first-child,
 		.resources-table__body .resources-table__cell:first-child {
 			padding-left: 1.6rem;
 		}
 }
 
 @media ( min-width: 1200px ) {
 	.content-box {
 		width: var( --width-site-desktop-wide );
 	}
 
 	.col--start {
 		width: 25.6rem;
 	}
 
 	.col--end {
 		margin-left: -25.6rem;
 		padding-left: 28.8rem; /* = 25.6 + (2 * 1.6 padding) */
 	}
 }