* {
  box-sizing: border-box;

  --z-background: -10;
  --z-graphic: -1;
  --z-graphic-overlay: 1;
}

:root {
  overflow: auto;

  --icon-size: 2rem;
  --title-graphic-top: 4rem;
  --title-graphic-right: -2rem;
  --title-graphic-size: 10rem;
  --frame-size: 16rem;
  --transition-fast: 0.1s;
  --transition-ease: ease-in-out;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100vw;
  margin: 0;
  overflow: hidden;
  background-color: var(--bg-colour, #fff);
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

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

.optional {
  display: none;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: var(--layout-spacing, 0);
  width: 100%;
}

.grid > * {
  min-width: 200px;
  width: 100%;
  max-width: var(--grid-item-width, 100%);
  flex-grow: 1;
  flex-shrink: 1;
}

.stack {
  margin: calc(1.5 * var(--layout-spacing, 0)) 0;
}

.split-stack {
  --split-stack-direction: row;

  display: flex;
  flex-direction: var(--split-stack-direction);
  justify-content: center;
  align-items: center;
  gap: var(--layout-spacing, 0);
  min-width: fit-content;
}

.split-stack.align-start {
  align-items: flex-start;
}

.split-stack.align-centre {
  align-items: center;
}

.split-stack.align-end {
  align-items: flex-end;
}

.split-stack.reversed {
  --split-stack-reversed: column-reverse;
}

.split-stack.divided {
  gap: 0;
}

.split-stack.divided > * {
  flex-grow: 0;
  flex-shrink: 0;
  border:
    var(--border-width, 0)
    none
    var(--border-colour, transparent);
}

.split-stack.divided > * {
  --split-stack-h-divider: none;
  --split-stack-v-divider: solid;
  --split-stack-h-padding: 1;
  --split-stack-v-padding: 0;
}

.split-stack.divided > *:not(:last-child) {
  padding-right: calc(var(--layout-spacing) * var(--split-stack-h-padding, 0));
  border-right-style: var(--split-stack-v-divider, none);
}

.split-stack.divided > *:not(:first-child) {
  padding-left: calc(var(--layout-spacing) * var(--split-stack-h-padding, 0));
}

.split-stack.divided:not(.reversed) > *:not(:last-child) {
  padding-bottom: calc(var(--layout-spacing) * var(--split-stack-v-padding, 0));
  border-bottom-style: var(--split-stack-h-divider, solid);
}

.split-stack.divided:not(.reversed) > *:not(:first-child) {
  padding-top: calc(var(--layout-spacing) * var(--split-stack-v-padding, 0));
}

.split-stack.reversed.divided > *:not(:first-child) {
  padding-bottom: calc(var(--layout-spacing) * var(--split-stack-v-padding, 0));
  border-bottom-style: var(--split-stack-h-divider, solid);
}

.split-stack.reversed.divided > *:not(:last-child) {
  padding-top: calc(var(--layout-spacing) * var(--split-stack-v-padding, 0));
}

.list-item {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: calc(var(--padding-inset) / 2);
  width: fit-content;
  padding-top: calc(var(--padding-inset) / 4);
  padding-bottom: calc(var(--padding-inset) / 4);
  padding-left: var(--padding-inset);
}

.graphic {
  position: relative;
  z-index: var(--z-graphic);
  width: 100%;
  height: 100%;
}

.icon {
  width: var(--icon-size, 2rem);
  height: var(--icon-size, 2rem);
}

.frame {
  --frame-factor: calc(abs(sin(var(--frame-rotation, 0deg)))
    + abs(cos(var(--frame-rotation, 0deg))));

  position: relative;
  flex-shrink: 0;
  width: calc(var(--frame-size) * var(--frame-factor));
  height: calc(var(--frame-size) * var(--frame-factor));
  padding: calc(var(--frame-size) * (1 - var(--frame-factor)) / 2);
  transform: rotate(var(--frame-rotation, 0deg));
  transition-property: width, height, top, right;
  transition-duration: var(--transition-fast);
  transition-timing-function: var(--transition-ease);
}

.overlay {
  position: absolute;
  left: calc(50% * (1 - 1 / var(--frame-factor)));
  top: calc(50% * (1 - 1 / var(--frame-factor)));
  width: var(--frame-size);
  height: var(--frame-size);
  z-index: var(--z-graphic-overlay);
  transition-property: width, height, top, right;
  transition-duration: var(--transition-fast);
  transition-timing-function: var(--transition-ease);
}

.frame-content {
  position: relative;
  top: calc(50% * (1 - 1 / var(--frame-factor)));
  left: calc(50% * (1 - 1 / var(--frame-factor)));
  width: var(--frame-size);
  height: var(--frame-size);
  border: var(--border-width, 0) solid var(--border-colour, transparent);
  border-radius: var(--border-radius, 0);
  z-index: var(--z-graphic);
  transition-property: width, height, top, right;
  transition-duration: var(--transition-fast);
  transition-timing-function: var(--transition-ease);
}

.frame-content.has-frame {
  overflow: hidden;
}

.frame-content > * {
  position: absolute;
  left: calc(50% * (1 - var(--frame-factor)));
  top: calc(50% * (1 - var(--frame-factor)));
  width: calc(100% * var(--frame-factor));
  height: calc(100% * var(--frame-factor));
  z-index: var(--z-graphic);
  transform: rotate(calc(-1 * var(--frame-rotation, 0deg)));
  transition-property: width, height, top, right;
  transition-duration: var(--transition-fast);
  transition-timing-function: var(--transition-ease);
}

svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.text {
  font-family: var(--font-family);
  font-size: var(--font-size);
  font-weight: var(--font-weight);
  font-style: var(--font-style);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  text-decoration: var(--text-decoration);
  white-space: pre-wrap;
  color: var(--text-colour);
  text-shadow: var(--text-shadow);
}

.scrim {
  background-color: var(--scrim-colour);
  box-shadow: 0 0
    calc(var(--font-size) / 2)
    calc(var(--font-size) / 2)
    var(--scrim-colour, transparent);
}

.article {
  width: 100%;
  max-width: calc(1024px - (2 * var(--layout-spacing, 0)));
  margin: 0 auto;
  white-space: wrap;
}

.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  margin-top: var(--font-size, 1rem);
}

.article p {
  margin-top: var(--font-size, 1rem);
  margin-bottom: var(--font-size, 1rem);
}

blockquote.text {
  margin: var(--font-size, 0) 0 0 0;
  padding: calc(var(--padding-inset, 0) / 2);
  background-color: var(--text-bg-colour, transparent);
  border-left: calc(var(--border-width, 0) * 2) solid
    var(--text-colour, transparent);
  border-radius: var(--border-radius, 0);
  white-space: normal;
}

blockquote.text > p {
  white-space: normal;
  margin-bottom: 0;
}

.text.alert {
  margin: 0;
}

.text.code {
  background-color: var(--text-bg-colour, transparent);
  border-radius: var(--border-radius, 0);
}

.text.code-block {
  display: block;
  padding: calc(var(--padding-inset, 0) / 2);
  background-color: var(--text-bg-colour, transparent);
  border-radius: var(--border-radius, 0);
  white-space: pre;
  overflow-x: auto;
}

.code-block .text {
  white-space: inherit;
}

.text-centred {
  text-align: var(--text-centred, center);
}

.text-inset {
  padding-left: var(--padding-inset);
  padding-right: var(--padding-inset);
}

.text-flex {
  width: var(--text-flex-width, fit-content);
}

@media (width < 768px) {
  :root {
    --layout-scale: 0.5;
    --text-centred: left;
    --text-flex-width: min-content;
    --title-graphic-top: 4rem;
    --title-graphic-right: -2rem;
    --title-graphic-size: 6rem;
    --title-graphic-shift: 1;
    --frame-size: 12rem;
  }

  .optional.display-mobile {
    display: block;
  }

  .split-stack.stack-mobile {
    --split-stack-direction: var(--split-stack-reversed, column);
  }

  .split-stack.stack-mobile > * {
    --split-stack-h-divider: solid;
    --split-stack-v-divider: none;
    --split-stack-h-padding: 0;
    --split-stack-v-padding: 1;
  }
}

@media (768px <= width < 1024px) {
  .optional.display-tablet {
    display: block;
  }

  .grid > * {
    --grid-item-width: calc((100% - var(--layout-spacing, 0)) / 2);
  }

  .split-stack.stack-tablet {
    --split-stack-direction: var(--split-stack-reversed, column);
  }

  .split-stack.stack-tablet > * {
    --split-stack-h-divider: solid;
    --split-stack-v-divider: none;
    --split-stack-h-padding: 0;
    --split-stack-v-padding: 1;
  }
}

@media (1024px <= width < 1440px) {
  .optional.display-desktop {
    display: block;
  }

  .grid > * {
    --grid-item-width: calc((100% - var(--layout-spacing, 0)) / 2);
  }

  .split-stack.stack-desktop {
    --split-stack-direction: var(--split-stack-reversed, column);
  }

  .split-stack.stack-desktop > * {
    --split-stack-h-divider: solid;
    --split-stack-v-divider: none;
    --split-stack-h-padding: 0;
    --split-stack-v-padding: 1;
  }
}

@media (1440px <= width) {
  :root {
    --is-wide: 1;
  }

  .optional.display-wide {
    display: block;
  }

  .grid > * {
    --grid-item-width: calc((100% - (var(--layout-spacing, 0) * 2)) / 3);
  }

  .split-stack.stack-wide {
    --split-stack-direction: var(--split-stack-reversed, column);
  }

  .split-stack.stack-wide > * {
    --split-stack-h-divider: solid;
    --split-stack-v-divider: none;
    --split-stack-h-padding: 0;
    --split-stack-v-padding: 1;
  }
}