:root {

  /* Palette */
  --color-black:                      #000000;
  --color-green:                      #117744;
  --color-yellow:                     #eecc44;
  --color-red:                        #d42c24;
  
  /* Utility */
  --color-focus-ring:                 var(--color-black);

  /* Light */
  --color-base-light:                 #000;
  --color-background-light:           #ddd;
  --color-foreground-light:           #111;
  --color-background-neutral-light:   #eee;
  --color-text-on-light:              #222;
  --color-link-on-light:              #a00;
  --color-border-on-light:            #ccc;

  /* Dark */
  --color-base-dark:                  #000;
  --color-background-dark:            #111;
  --color-foreground-dark:            #ddd;
  --color-background-neutral-dark:    #333;
  --color-text-on-dark:               #ddd;
  --color-link-on-dark:               #0aa;
  --color-border-on-dark:             #666;

  /* Defaults */
  --color-base:                       var(--color-base-light);
  --color-background:                 var(--color-background-light);
  --color-foreground:                 var(--color-foreground-light);
  --color-background-neutral:         var(--color-background-neutral-light);
  --color-text:                       var(--color-text-on-light);
  --color-link:                       var(--color-link-on-light);
  --color-border:                     var(--color-border-on-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background:               var(--color-background-dark);
    --color-foreground:               var(--color-foreground-dark);
    --color-background-neutral:       var(--color-background-neutral-dark);
    --color-text:                     var(--color-text-on-dark);
    --color-link:                     var(--color-link-on-dark);
    --color-border:                   var(--color-border-on-dark);
  }
}
@font-face {
  font-family:           'JP Grotesk by Jonas Petersson';
  src:                    url("/assets/fonts/PeterssonGrotesk-0.009-Regular.woff2") format("woff2");
  font-display:           swap;
  font-weight:            400;
  font-style:             normal;
  font-stretch:           normal;
  font-variant:           normal;
}

:root {
  --font-family-default:  "JP Grotesk by Jonas Petersson", sans-serif;
  --font-family-mono:     monospace, monospace;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-size-default:    112.5%;  
  --font-size-default:    125%;
  --font-headline:        normal normal var(--font-weight-regular) 1em/1.5 var(--font-family-default);
  --font-subhead:         normal normal var(--font-weight-regular) 1em/1.5 var(--font-family-default);
  --font-body:            normal normal var(--font-weight-regular) 1em/1.5 var(--font-family-default);
  --font-code:            normal normal var(--font-weight-regular) 0.875em/1.5 var(--font-family-mono);
}

@media (min-width: 640px) {
  :root {
    --font-headline:      normal normal var(--font-weight-regular) 1em/1.5 var(--font-family-default);
  }
}
:root {
  --size-site-max-width: 1400px;
  --size-site-margin: 6.4vw;
  --size-grid-gap-width: 1.5em;
  --size-text-max-width: 28em;
  --size-measure: 60ch;
}
/*
 * Utility class to hide content visually while keeping it screen reader-accessible.
 * Source: https://www.scottohara.me/blog/2017/04/14/inclusively-hidden.html
 */

.u-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.u-flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}
h1,
h2,
h3,
h4,
h5,
h6,
b,
strong {
  font-weight: 400;
}

i,
em {
  font-style: normal;
  font-weight: 400;
}

h1 {
  font: var(--font-headline);
}

h2, h3 {
  font: var(--font-subhead);
}

blockquote {
  padding-left: 1.5em;
  border-left: 1px solid var(--color-foreground);
}

figcaption {
  font-size: 80%;
}

ul:not([class]):not([role='list']),
ol:not([class]):not([role='list']) {
  list-style: none;
  padding: 0;
}

ul:not([class]):not([role='list']) ul,
ul:not([class]):not([role='list']) ol,
ol:not([class]):not([role='list']) ol,
ol:not([class]):not([role='list']) ul {
  margin: 0;
}

ul:not([class]):not([role='list']) li,
ol:not([class]):not([role='list']) li {
  position: relative;
  padding-left: 1.5em;
}

ul:not([class]):not([role='list']) li:before,
ol:not([class]):not([role='list']) li:before {
  position: absolute;
  left: 0px;
}

ul:not([class]):not([role='list']) li:before {
  content: "—";
}

ol:not([class]):not([role='list']) li {
  counter-increment: step-counter;
}

ol:not([class]):not([role='list']) li:before {
  content: counter(step-counter) ".";
}

/* Code */

pre {
  display: block;
}

code {
  aspect-ratio: 3/2;
  display: block;
  border: 1px solid var(--color-foreground);
  background-color: var(--color-foreground);
  color: var(--color-background);
  padding: 1em;
  width: 100%;
  overflow: auto;
  font: var(--font-code);
}

/* Horizontal rule */

hr {
  border: none;
  border-top: 1px solid var(--color-foreground);
}

/* Tables */

table {
  table-layout: auto;
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--color-foreground);
  word-break: normal;
}

th,
td {
  border: 1px solid var(--color-foreground);
  padding: .5em 1em;
  vertical-align: top;
  font-weight: normal;
  text-align: left;
}

th {
  text-transform: uppercase;
}

a:not([class]) {
  text-decoration:underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .4ex;
  text-decoration-color: var(--color-link);
}

a:hover:not([class]) {
  text-underline-offset: .1ex;
}
img,
video {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
}

svg {
  display: block;
  position: relative;
}

.multiply {
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .multiply {
    mix-blend-mode: screen;
    -webkit-filter: invert(1);
    filter: invert(1);
  }   
}

picture {
  display: block;
}

figure,
svg {
  margin: 0;
}

figure picture {
  margin-top: 0;
  margin-bottom: 0;
}

figcaption {
  margin-top: 0.5em;
}
/*
https://andy-bell.co.uk/a-more-modern-css-reset/
*/

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

:root {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  cursor: default;
  /*
  overflow: hidden;
  */
  background-color: var(--color-base);
  font: var(--font-body);
  color: var(--color-text);
  font-size: var(--font-size-default);
  max-width: 1280px;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  /*
  text-rendering: optimizeSpeed;
  */
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  background-color: var(--color-background);
  min-height: 100vh;
}

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
}

input,
textarea,
select {
  font: inherit;
  /*
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  */
}

button {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  cursor: default;
}

pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

img,
picture {
  /*
  display: block;
  */
  width: 100%;
  height: auto;
  /*
  max-width: 100%;
  */
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  padding: 0;
  border: 0;
  margin: 0;
  background-color: currentColor;
}

svg:not([fill]) {
  fill: currentColor;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:hover,
a:active {
  background-color: transparent;
}

a:active {
  opacity: 0.6;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
}

::selection {
  background: var(--color-foreground);
  color: var(--color-background);
}

::-moz-selection {
  background: var(--color-foreground);
  color: var(--color-background);
}

/*
 * https://github.com/WICG/focus-visible
 * https://developer.paciellogroup.com/blog/2018/03/focus-visible-and-backwards-compatibility/
 */

:focus:not(:focus-visible) {
  outline: 0;
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: .25em;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
.Grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.Grid-item--span2 {
  grid-column: 1 / span 2;
}
.Player-link {
  position: relative;
  padding-left: 1.2em;
  display: flex;
  align-items: center;
}

.Player-link {
  border: 1px solid black;
  /* padding: 4px 8px 4px 24px; */
  height: 48px;
  padding: 0 12px 0 60px;
}

.Player-linkTitle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Player-link ~ .Player-link,
li:not(:first-child) .Player-link {
  border-top: none;
}

.Player-linkTime {
  margin-left: auto;
  display: flex;
}

.Player-linkCurrentTime {
  display: none;
}

.Player-linkCurrentTime:after {
  content: '\a0/\a0';
}

.Player-linkDuration:before {
  content: ' ';
}

.Player-link--selected .Player-linkCurrentTime {
  display: inline;
}

.Player-link--selected .Player-linkTitle,
.Player-link--selected .Player-linkTime {
  animation-name: playlist-selected;
  animation-duration: .5s;
  animation-iteration-count: infinite;
}

@keyframes playlist-selected {
  from  { opacity: 1; }
  to    { opacity: .5; }
}

.Player-link--play:before {
  border-right: 1px solid #000;
  position: absolute;
  left: 0px;
  content: ' ';
  width: 48px;
  height: 48px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23000000" d="M17.5,12l-9,6l0,-12l9,6Z"/></svg>');
  background-position: center;
}

.Player-link--pause:before {
  border-right: 1px solid #000;
  position: absolute;
  left: 0px;
  content: ' ';
  width: 48px;
  height: 48px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="%23000000"><rect x="7" y="6" width="4" height="11"/><rect x="13" y="6" width="4" height="11"/></g></svg>');
  background-position: center;
}

@media (prefers-color-scheme: dark) {
  .Player-link--play:before {
    background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="%23dddddd" d="M17.5,12l-9,6l0,-12l9,6Z"/></svg>');
  }
  .Player-link--pause:before {
    background: url('data:image/svg+xml;charset=UTF-8,<svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g fill="%23dddddd"><rect x="7" y="6" width="4" height="11"/><rect x="13" y="6" width="4" height="11"/></g></svg>');
  }
}
.Poster {
  --poster-background: var(--background, var(--color-foreground));
  --poster-foreground: var(--foreground, var(--color-background));
}

.Poster rect {
  fill: var(--poster-background);
}

.Poster text {
  fill: var(--poster-foreground);
}

.Poster a {
  text-decoration: none !important;
}
.Checkbox {
  position: relative;
  display: flex;
  align-items: center;
}

.Checkbox-field {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

.Checkbox-label {
  display: flex;
  align-items: center;
}

.Checkbox-label:before {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  content: ' ';
  background: transparent;
  border-radius: 10px;
  border: 1px solid var(--sample-foreground);
}

/*
.Checkbox-field + .Checkbox-label:before {
  background-repeat: no-repeat;
  background-position: -2px 50%;
}
*/

.Checkbox-field:checked + .Checkbox-label:before {
  background-color: var(--sample-foreground);
  /*
  border: 1px solid var(--sample-foreground);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.6237117,7.6707477 C17.8055527,7.46292938 18.121434,7.44187063 18.3292523,7.62371165 C18.5370706,7.80555268 18.5581294,8.12143399 18.3762883,8.3292523 L11.3762883,16.3292523 C11.1858277,16.5469216 10.8509646,16.5580713 10.6464466,16.3535534 L6.64644661,12.3535534 C6.45118446,12.1582912 6.45118446,11.8417088 6.64644661,11.6464466 C6.84170876,11.4511845 7.15829124,11.4511845 7.35355339,11.6464466 L10.975645,15.2685382 L17.6237117,7.6707477 Z' fill='#ffffff'/%3E%3C/svg%3E");
  */
}

/*
.Checkbox-field:focus + .Checkbox-label:before {
  border: 2px solid var(--color-foreground);
}
.Checkbox-field:focus + .Checkbox-label {

}
*/
.Range {
  display: block;
}

.Range-label,
.Range-output {
  white-space: nowrap;
}

.Range-label:after {
  content: ': ';
}

.Range .Range-field {
  margin-top: .25em;
}

.Range-field {
  display: block;
  width: 100%;
  height: 1em;
  padding: 0;
  border: 0;
  border-radius: 0px;
  appearance: none;
  background: transparent;
}

.Range-field::-webkit-slider-runnable-track {
  width: 100%;
  height: 1px;
  background: var(--sample-foreground);
  border: 0;
}
.Range-field::-moz-range-track {
  width: 100%;
  height: 1px;
  background: var(--sample-foreground);
  border: 0;
}

.Range-field::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  position: relative;
  transform-origin: 50% 50%;
  margin-top: -10px;
  background: var(--sample-background, var(--color-background));
  border: 1px solid var(--sample-foreground);
  box-shadow: none;
}
.Range-field::-moz-range-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 0;
  position: relative;
  transform-origin: 50% 50%;
  margin-top: -10px;
  background: var(--sample-background, var(--color-background));
  border: 1px solid var(--sample-foreground);
  box-shadow: none;
}

.Range-field:active::-webkit-slider-thumb{
  background: var(--sample-foreground);
}
.Range-field:active::-moz-range-thumb {
  background: var(--sample-foreground);
}

/*
@media not all and (hover: none) {
  .Range-field:hover::-webkit-slider-thumb {
   border-color: var(--range-thumb-border-color--withHover);
  }
}

.Range-field:focus {
   outline: 0;
   border: 0;
   background: transparent;
}

.Range-field:focus::-webkit-slider-thumb {
   border-color: var(--range-thumb-border-color--withFocus);
   box-shadow: var(--range-shadow--withFocus);
}
*/
.Sample {
  --sample-background: var(--background);
  --sample-foreground: var(--foreground, var(--color-foreground));
}

.Sample {
  width: 100%;
  background: var(--sample-background);
  border: 1px solid red;
  border-color: var(--sample-background, var(--sample-foreground));
  color: var(--sample-foreground);
  padding: 0;
  overflow: hidden;
}

/*
.Sample .Sample-controls {
  visibility: hidden;
}
.Sample:hover .Sample-controls {
  visibility: visible;
}
*/

.Sample-content {
  border: 0;
  text-align: center;
  display: block;
  padding: 3rem;
  padding: 3rem 11.4%;
  user-select: text;
  outline: none;
  overflow-wrap: anywhere;
}

.Sample-content:focus {
  outline: none;
  border: 0;
}

.Sample-content:active {
  outline: none;
  border: 0;
}

.Sample-content--layoutColumns {
  column-gap: 1.5em;
  column-count: 4;
}

.Sample-content--layoutGrid {
  display: grid;
  column-gap: 1.5em;
  row-gap: 1.5em;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.Sample-content p:not(:first-child) {
  text-indent: 3em;
}

.Sample-content h3 + p:not(:first-child) {
  text-indent: 0em;
}

.Sample-content h3 {
  margin: 1em 0 .5em 0;
}

.Sample-content h3:first-child {
  margin-top: 0;
}

.Sample-content:focus:not(:focus-visible),
.Sample-content:focus-visible {
  outline: 0 !important;
}

/* Toolbar */

.Toolbar {
  padding: 1em;
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.Toolbar-flex {
  display: flex;
  margin: 0 auto;
  margin-bottom: 0em;
  gap: 1em;
}
.Toolbar-flex .Toolbar-item {
  width: 7em;
}

.Toolbar-grid {
  --auto-grid-min-size: 8rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
  grid-gap: 24px;
}

.Sample .Range-label,
.Sample .Range-output,
.Sample .Checkbox-label,
.Sample .Select,
.Sample .StyleName {
  font-size: 0.75em;
  text-transform: uppercase;
}

.Sample .StyleName {
  height: 20px;
  display: flex;
  align-items: center;
}
.Select {
  display: flex;
  align-items: center;
  width: max-content;
  position: relative;
}

.Select-field {
  height: 20px;
  width: auto;
  display: flex;
  align-items: center;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: transparent;
  background-repeat: no-repeat;
  background-position: calc(100% - .5em) 50%;
  color: inherit;
  padding: 0;
  padding-right: 1.2em;
  white-space: nowrap;
}

.Select-icon {
  position: absolute;
  right: 0px;
  pointer-events: none;
}

.Select-iconPath {
  stroke: currentColor;
}

.Select-field:focus {
  outline: 0;
}
.Set {
  display: grid;
  grid-template-columns: repeat(8, 1fr);

}

.Set > li {
  padding-top: 100%;
  position: relative;
  box-shadow: 1px 0 0 0 var(--color-foreground),
              0 1px 0 0 var(--color-foreground),
              1px 1px 0 0 var(--color-foreground),
              1px 0 0 0 var(--color-foreground) inset,
              0 1px 0 0 var(--color-foreground) inset;
}

.Set > li > svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
}

.Set-glyph {
  fill: var(--color-text);
}
/*
.Text > * + *, 
.u-flow > * + * {
  margin-bottom: var(--flow-space, 1em);
}

.Text :first-child {
  margin-top: 0;
}

.Text :last-child {
  margin-bottom: 0;
}

.Text h1 {
  margin: 0 0 0.5rem;
}

.Text h2 {
  margin: 2em 0 0.5rem;
}

.Text h3 {
  margin: 2em 0 0.5rem;
}
*/

/*
https://andy-bell.co.uk/my-favourite-3-lines-of-css/
*/

.Text {
  --flow-space: 2em;
}

.Text :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: .5em;
}
body {
  padding: 0;
  min-height: 100%;
  position: relative;
}

main,
footer {
  padding-top: 0em;
  padding-bottom: 3em;
}

article { 
  overflow-x: hidden; 
}

article > * + * {
  margin-block-start: var(--flow-space, 1em);
  --flow-space: 1.5rem;
}

article :is(h2, h3, h4) {
  --flow-space: 3rem;
}

@media (min-width: 960px) {
  article :is(h1:first-child + *) {
    --flow-space: 3rem;
  }
}

article :is(h2 + *, h3 + *, h4 + *) {
  --flow-space: 1.5em;
}

@media (min-width: 960px) {
  article > :first-child:not(header) {
    margin-top: 1.5rem;
  }
}  

@media (max-width: 959px) {
  article header + *:not(figure) {
    margin-top: 0;
  }
}

@media (min-width: 960px) {
  article header + * {
    margin-top: 0;
  }
}

/* Grid */
body > header,
body > footer,
article,
main > nav {
  display: grid;
  column-gap: 4px;
  grid-template-columns: repeat(18, minmax(0, 1fr));
  grid-auto-flow: column;
}

@media (min-width: 960px) {
  body > header,
  article {
    column-gap: 24px;
  }

  article > header {
    display: grid;
    column-gap: 24px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}  

/* Footer */
footer {
  opacity: .4;
  pointer-events: none; 
}

footer > * {
  pointer-events: auto; 
}

/* Header & Pagiantion */

body > header,
main > nav {
  width: 100%;
  max-width: 1280px;
  padding: 1.5em 0 1.5em;
  pointer-events: none; 
}

body > header > *,
main > nav > * {
  pointer-events: auto; 
}

main > nav {
  padding: 3em 0 0em; 
}

@media (min-width: 960px) {
  body > header {
    position: fixed;
    top: 0;
    padding: 1.5em 0 3em;
  }

  main > nav {
    position: fixed;
    bottom: 0;
    padding: 0 0 3em;
  }
}

/* Article header */

article > header {
  width: 100%;
  max-width: 1280px;
  padding: 0em;
}

article > header nav {
  text-transform: capitalize;
}

article > header nav li {
  display: inline;
}

article > header nav li:not(:last-child):after {
  content: ', ';
}

@media (max-width: 960px) {
  article > header nav {
    display: inline;
  }
}

@media (min-width: 960px) {
  article > header {
    padding: 1.5em 0 3em;
   } 
}

/* Logo */
@media (min-width: 960px) {
  body > header > div {
    margin-bottom: 3em;
  }
}

/* Nav */
nav ul {
  list-style: none;
}

@media (max-width: 959px) {
  nav li {
    display: inline;
  }

  nav li:not(:last-child):after {
    content: ', ';
  }
}

body > header > * { grid-column: 2 / span 16; }
body > footer > * { grid-column: 2 / span 16; }
main > nav > * { grid-column: 2 / span 16; }
article > * { grid-column: 2 / span 16; }
article > figure {  grid-column: 2 / span 16; }
article > .inline, article > .s-inline { grid-column: 2 / span 16; }
article > .bleed, article > .s-bleed { grid-column: 2 / span 17; }
article > .fullBleed, article > .s-fullBleed { grid-column: 1 / span 18; }

@media (min-width: 960px) {
  body > header > * { grid-column: 2 / span 4; }
  body > footer > * { grid-column: 6 / span 10; }
  main > nav > * { grid-column: 2 / span 4; }
  /*  article header > * { grid-column: 1 / span 6; }
  header > date { grid-column: 7 / span 12; } */
  article > * { grid-column: 6 / span 10; }
  article > figure { grid-column: 6 / span 12; }
  article > .inline, article > .l-inline { grid-column: 6 / span 10; }
  article > .extended, article > .l-extended { grid-column: 6 / span 12; }
  article > .extraExtended, article > .l-extraExtended { grid-column: 4 / span 14; }
  article > .superExtended, article > .l-superExtended { grid-column: 2 / span 16;  }
  article > .bleed, article > .l-bleed { grid-column: 6 / span 13; }
  article > .fullBleed, article > .l-fullBleed { grid-column: 1 / span 18; }
}

/* Blog */

.dump article:not(:first-child) {
  margin-top: 3em;
}

.dump h1 {
  display: none;
}

.dump article > figure { grid-column: 2 / span 16; }
@media (min-width: 960px) {
  .dump article > figure { grid-column: 6 / span 10; }
}