html {
  font-size: var(--font-size-normal);
}

body {
  font-family: var(--font-stack-primary);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background: var(--color-background);
}

/* Components */

.site-logo {
  height: 3em;
  fill: var(--color-text-highlighted);
}

.site-header {
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.site-footer > * {
  font-size: var(--font-size-small);
}

.link {
  color: inherit;
  text-decoration: none;
}

.invert .link {
  color: var(--color-link-inverted);
}

.link--buttonize {
  border: var(--border-width-normal) solid var(--color-link-border);
  border-radius: 2px;
  padding: 0.2em 0.3em;
}

.link--buttonize:hover {
  border-color: var(--color-link-border-hover);
}

.link--buttonize:active {
  color: var(--color-link-active);
  border-color: var(--color-link-active);
  transition: border-color 70ms ease;
}

.link--decoration {
  text-decoration: underline;
}

.link--highlighted {
  color: var(--color-link);
}

.link--internalIndicator::after {
  /* content: "\25BA"; */
  content: "→";
  font-size: 0.9em;
  vertical-align: top;
}

.link--externalIndicator::after {
  content: "↗";
}

.heading--visualLevel-1 {
  font-size: var(--font-size-large-4);
  line-height: var(--line-height-small);
  font-weight: 400;
  max-width: 34ch;
}

.heading--visualLevel-2 {
  font-size: var(--font-size-large-2);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.heading--visualLevel-3 {
  font-size: var(--font-size);
  font-weight: bold;
}

.heading--visualLevel-4,
.heading--visualLevel-5,
.heading--visualLevel-6 {
  font-size: var(--font-size);
  font-weight: normal;
}

.heading--muted {
  color: var(--color-text-muted);
}

.heading--highlighted {
  color: var(--color-text-highlighted);
}

.hero {
  text-align: center;
  background: var(--color-hero-background);
  color: var(--color-white);
}

.text--strong {
  /* Handled by reset? */
  /*font-weight: bold;*/
}

.text--emphasis {
  /* Handled by reset? */
  /*font-style: italic;*/
}

.text--antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.text--left {
  text-align: left;
}

.text--center {
  text-align: center;
}

.text--right {
  text-align: right;
}

.text--small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
}

.text--smaller {
  font-size: var(--font-size-small-2);
  line-height: var(--line-height-large);
}

.text--muted {
  color: var(--color-text-muted);
}

.text--highlighted {
  color: var(--color-text-highlighted);
}

.text--striked {
  /* color: var(--color-text-highlighted); */
  text-decoration: line-through;
}

.text--tabular-numbers {
  font-variant-numeric: tabular-nums;
}

.text--lining-numbers {
  font-variant-numeric: lining-nums;
}

.divider--visual {
  border-right: var(--border-width-normal) solid var(--color-border-muted);
  border-bottom: var(--border-width-normal) solid var(--color-border-muted);
}

.picture {
  display: block;
}

.picture--background {
  background: var(--color-background-inverted);
}

.picture__image--circle {
  border-radius: 50%;
}


.picture--centered {
  text-align: center;
}

.picture__image--gray {
  filter: grayscale(1);
  opacity: 0.7;
}

.picture__image--rounded {
  border-radius: var(--border-radius-small-2);
}

.picture__image--inline {
  display: inline-block;
}

.checkboxPill__input {
  display: none;
}

.checkboxPill__label {
  display: inline-block;
  color: var(--color-link);
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
  border: var(--border-width-normal) var(--color-link-border) solid;
  padding: var(--spacing-vertical-small-3) var(--spacing-horizontal-small-2);
  border-radius: var(--border-radius-large);
  cursor: pointer;
  user-select: none;
  display: inline-block;

  /* Should it have a margin? Should this be solved by a layout component?  */
  margin: 0.2em 0;
}

.checkboxPill__label:hover {
  color: var(--color-link-hover);
}

.checkboxPill__label:active {
  color: var(--color-link-active);
}

.checkboxPill__input:checked + .checkboxPill__label {
  background: var(--color-link-inverted-background);
  border-color: var(--color-link-inverted-border);
  color: var(--color-link-inverted);
}

.checkboxPill__input:checked + .checkboxPill__label:hover {
  color: var(--color-link-inverted-hover);
}

.checkboxPill__input:checked + .checkboxPill__label:active {
  color: var(--color-link-inverted-active);
}

.checkboxPill--favorite .checkboxPill__label:after {
  content: "☆";
}

.checkboxPill--favorite .checkboxPill__input:checked + .checkboxPill__label:after {
  content: "★";
}

.blockDetails {
  border: var(--border-width-normal) solid var(--color-border);
  transition: border-color 70ms ease, margin 70ms ease-in-out;
}

.blockDetails[open] {
  border-color: var(--color-border-muted);
  /* margin: 0 calc(var(--spacing-horizontal-small-2) * -2); */
  /* transition: margin 100ms ease-out; */
}

.blockDetails[open]:active {
  /* border-color: var(--color-background); */
}

.blockDetails:not([open]):active {
  border-color: var(--color-border-muted);
  /* margin: 0 calc(var(--spacing-horizontal-small-2) * -2); */
}

.blockDetails__content {
  padding: var(--spacing-vertical-small-2) var(--spacing-horizontal-small) var(--spacing-vertical-large) var(--spacing-horizontal-small);
}

.blockDetails__summary {
  padding: var(--spacing-vertical) var(--spacing-horizontal-large) var(--spacing-vertical) var(--spacing-horizontal-small);
  font-size: var(--font-size-large-2);
  position: sticky;
  top:  0;
  display: block;
  cursor: pointer;
  color: var(--color-text);
  background: var(--color-background);
  outline: none;
  user-select: none;
}

.blockDetails__summary::after {
  content: "+";
  position: absolute;
  top: var(--spacing-vertical);
  right: var(--spacing-horizontal-small);
  line-height: var(--line-height-small);
}

.blockDetails[open] .blockDetails__summary::after {
  content: "–";
}

.blockDetails__summary:active {
  /* color: var(--color-link-active); */
}

.blockDetails__summary::-webkit-details-marker {
  display: none;
}

.blockDetails__summary::marker {
  color: transparent;
}

.blockList {
  display: grid;
  gap: var(--spacing-vertical-small);
}

.blockLink {
  display: block;
}

.blockLink--small {
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
}

.invert .blockLink {
  background: var(--color-link-inverted-background);
  color: var(--color-link-inverted);
}

.invert .blockLink:hover {
  color: var(--color-link-inverted-hover);
}

.invert .blockLink:active {
  color: var(--color-link-inverted-active);
}

.blockLink__button {
  position: relative;
  border: var(--border-width-normal) var(--color-border) solid;
  padding: var(--spacing-vertical) var(--spacing-horizontal-small);
  user-select: none;
  font-size: var(--font-size-large-2);
}

.blockLink__button:active {
  border-color: var(--color-border-muted);
}

.blockLink__button::after {
  content: "→";
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--spacing-vertical) var(--spacing-horizontal-small);
}

.blockLink--inverted .blockLink__button {
  border-color: var(--color-link-inverted-border);
}

.blockLink__preview {
  border: var(--border-width-normal) var(--color-link-border) solid;
  border-bottom: 0;
  padding: var(--spacing-vertical-small-2) var(--spacing-horizontal-small);
}

.blockLink--inverted .blockLink__preview {
  background: var(--color-link-inverted-background-dark);
}

.horizontalScroller {
  overflow-x: auto;
  overflow-y: hidden;

}

.horizontalScroller__content {
  min-width: max-content;
}

.horizontalScroller__item {
  max-width: 70vw;
}

.horizontalScroller__item:empty {
  display: none;
}

.horizontalScroller__item--fit2 {
  max-width: calc((100vw - 30vw) / 2);
}

.horizontalScroller__item--fit3 {
  max-width: calc((100vw - 30vw) / 3);
}

.invert {
  background: var(--color-background-inverted);
  color: var(--color-text-inverted);
}

.grid {
  display: grid;
}
.grid--columns2 { grid-template-columns: repeat(2, 2fr); }

.grid--gap-4 { gap: var(--spacing-vertical-small-4); }
.grid--gap-3 { gap: var(--spacing-vertical-small-3); }
.grid--gap-2 { gap: var(--spacing-vertical-small-2); }
.grid--gap-1 { gap: var(--spacing-vertical-small); }
.grid--gap0 { gap: var(--spacing-vertical); }
.grid--gap1 { gap: var(--spacing-vertical-large); }
.grid--gap2 { gap: var(--spacing-vertical-large-2); }
.grid--gap3 { gap: var(--spacing-vertical-large-3); }
.grid--gap4 { gap: var(--spacing-vertical-large-4); }

.stack {
  display: grid;
}

.stack--vertical {
  grid-auto-flow: row;
  grid-template-columns: 100%;
  max-height: max-content;
}

.stack--horizontal {
  grid-auto-flow: column;
  grid-template-rows: 100%;
  max-width: max-content;
}

.stack--vertical > .stack__item {
  max-width: 100%;
}

.stack__item:empty {
  display: none;
}

.menu-iframe {
  min-height: 70vh;
  resize: both;
}


/* Should this be generated? */
.stack--vertical.stack--gap-5 { gap: var(--spacing-vertical-small-5); }
.stack--vertical.stack--gap-4 { gap: var(--spacing-vertical-small-4); }
.stack--vertical.stack--gap-3 { gap: var(--spacing-vertical-small-3); }
.stack--vertical.stack--gap-2 { gap: var(--spacing-vertical-small-2); }
.stack--vertical.stack--gap-1 { gap: var(--spacing-vertical-small); }
.stack--vertical.stack--gap0 { gap: var(--spacing-vertical); }
.stack--vertical.stack--gap1 { gap: var(--spacing-vertical-large); }
.stack--vertical.stack--gap2 { gap: var(--spacing-vertical-large-2); }
.stack--vertical.stack--gap3 { gap: var(--spacing-vertical-large-3); }
.stack--vertical.stack--gap4 { gap: var(--spacing-vertical-large-4); }
.stack--vertical.stack--gap5 { gap: var(--spacing-vertical-large-5); }

.stack--horizontal.stack--gap-5 { gap: var(--spacing-horizontal-small-5); }
.stack--horizontal.stack--gap-4 { gap: var(--spacing-horizontal-small-4); }
.stack--horizontal.stack--gap-3 { gap: var(--spacing-horizontal-small-3); }
.stack--horizontal.stack--gap-2 { gap: var(--spacing-horizontal-small-2); }
.stack--horizontal.stack--gap-1 { gap: var(--spacing-horizontal-small); }
.stack--horizontal.stack--gap0 { gap: var(--spacing-horizontal); }
.stack--horizontal.stack--gap1 { gap: var(--spacing-horizontal-large); }
.stack--horizontal.stack--gap2 { gap: var(--spacing-horizontal-large-2); }
.stack--horizontal.stack--gap3 { gap: var(--spacing-horizontal-large-3); }
.stack--horizontal.stack--gap4 { gap: var(--spacing-horizontal-large-4); }
.stack--horizontal.stack--gap5 { gap: var(--spacing-horizontal-large-5); }

.pad--centered { margin: 0 auto; }

.pad--gap-5 { padding: var(--spacing-vertical-small-5) var(--spacing-horizontal-small-5); }
.pad--gap-4 { padding: var(--spacing-vertical-small-4) var(--spacing-horizontal-small-4); }
.pad--gap-3 { padding: var(--spacing-vertical-small-3) var(--spacing-horizontal-small-3); }
.pad--gap-2 { padding: var(--spacing-vertical-small-2) var(--spacing-horizontal-small-2); }
.pad--gap-1 { padding: var(--spacing-vertical-small) var(--spacing-horizontal-small); }
.pad--gap0 { padding: var(--spacing-vertical) var(--spacing-horizontal); }
.pad--gap1 { padding: var(--spacing-vertical-large) var(--spacing-horizontal-large); }
.pad--gap2 { padding: var(--spacing-vertical-large-2) var(--spacing-horizontal-large-2); }
.pad--gap3 { padding: var(--spacing-vertical-large-3) var(--spacing-horizontal-large-3); }
.pad--gap4 { padding: var(--spacing-vertical-large-4) var(--spacing-horizontal-large-4); }
.pad--gap5 { padding: var(--spacing-vertical-large-5) var(--spacing-horizontal-large-5); }

.pad--top-5 { padding-top: var(--spacing-vertical-small-5) }
.pad--top-4 { padding-top: var(--spacing-vertical-small-4) }
.pad--top-3 { padding-top: var(--spacing-vertical-small-3) }
.pad--top-2 { padding-top: var(--spacing-vertical-small-2) }
.pad--top-1 { padding-top: var(--spacing-vertical-small) }
.pad--top0 { padding-top: var(--spacing-vertical) }
.pad--top1 { padding-top: var(--spacing-vertical-large) }
.pad--top2 { padding-top: var(--spacing-vertical-large-2) }
.pad--top3 { padding-top: var(--spacing-vertical-large-3) }
.pad--top4 { padding-top: var(--spacing-vertical-large-4) }
.pad--top5 { padding-top: var(--spacing-vertical-large-5) }

.pad--bottom-5 { padding-bottom: var(--spacing-vertical-small-5) }
.pad--bottom-4 { padding-bottom: var(--spacing-vertical-small-4) }
.pad--bottom-3 { padding-bottom: var(--spacing-vertical-small-3) }
.pad--bottom-2 { padding-bottom: var(--spacing-vertical-small-2) }
.pad--bottom-1 { padding-bottom: var(--spacing-vertical-small) }
.pad--bottom0 { padding-bottom: var(--spacing-vertical) }
.pad--bottom1 { padding-bottom: var(--spacing-vertical-large) }
.pad--bottom2 { padding-bottom: var(--spacing-vertical-large-2) }
.pad--bottom3 { padding-bottom: var(--spacing-vertical-large-3) }
.pad--bottom4 { padding-bottom: var(--spacing-vertical-large-4) }
.pad--bottom5 { padding-bottom: var(--spacing-vertical-large-5) }

.pad--left-5 { padding-left: var(--spacing-horizontal-small-5) }
.pad--left-4 { padding-left: var(--spacing-horizontal-small-4) }
.pad--left-3 { padding-left: var(--spacing-horizontal-small-3) }
.pad--left-2 { padding-left: var(--spacing-horizontal-small-2) }
.pad--left-1 { padding-left: var(--spacing-horizontal-small) }
.pad--left0 { padding-left: var(--spacing-horizontal) }
.pad--left1 { padding-left: var(--spacing-horizontal-large) }
.pad--left2 { padding-left: var(--spacing-horizontal-large-2) }
.pad--left3 { padding-left: var(--spacing-horizontal-large-3) }
.pad--left4 { padding-left: var(--spacing-horizontal-large-4) }
.pad--left5 { padding-left: var(--spacing-horizontal-large-5) }

.pad--right-5 { padding-right: var(--spacing-horizontal-small-5) }
.pad--right-4 { padding-right: var(--spacing-horizontal-small-4) }
.pad--right-3 { padding-right: var(--spacing-horizontal-small-3) }
.pad--right-2 { padding-right: var(--spacing-horizontal-small-2) }
.pad--right-1 { padding-right: var(--spacing-horizontal-small) }
.pad--right0 { padding-right: var(--spacing-horizontal) }
.pad--right1 { padding-right: var(--spacing-horizontal-large) }
.pad--right2 { padding-right: var(--spacing-horizontal-large-2) }
.pad--right3 { padding-right: var(--spacing-horizontal-large-3) }
.pad--right4 { padding-right: var(--spacing-horizontal-large-4) }
.pad--right5 { padding-right: var(--spacing-horizontal-large-5) }

.tabs__navigation {
  display: flex;
  margin-bottom: var(--spacing-vertical-large);
  border: var(--border-width-normal) var(--color-link-border) solid;
  width: min-content;
  user-select: none;
}

.tabs__link {
  display: block;
  color: var(--color-link);
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
  padding: var(--spacing-vertical-small-2) var(--spacing-horizontal-small);
}

.tabs__link--active {
  background: var(--color-link-inverted-background);
  border-color: var(--color-link-inverted-border);
  color: var(--color-link-inverted);
}

.tabs__link--active:hover,
.tabs__link--active:active {
  cursor: default;
  color: var(--color-link-inverted);
}

.tabs__content--inactive {
  display: none;
}

.filterable--noMatch {
  display: none;
}

.breadcrumbs__list {
  display: flex;
  padding: 0;
  list-style: none;
  overflow-x: scroll;
}

.breadcrumbs__item {
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
}

.breadcrumbs__item:not(:last-child)::after {
  content:  "/\00A0";
  margin: 0 var(--spacing-horizontal-small-5);
}

.inlineButton,
.inlineButtonLink {
  color: var(--color-link);
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
  border: var(--border-width-normal) var(--color-link-border) solid;
  padding: var(--spacing-vertical-small-3) var(--spacing-horizontal-small);
  border-radius: var(--border-radius-small);
  user-select: none;
  display: inline-block;
}

.inlineButton {
  background: transparent;
  cursor:  pointer;
}

.inlineButton:hover,
.inlineButtonLink:hover {
  color: var(--color-link-hover);
}

.inlineButton:active,
.inlineButtonLink:active {
  color: var(--color-link-active);
}

.inlineButton--disabled,
.inlineButtonLink--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.inlineButton--expand::after {
  content:  "+";
}

.inlineButton--contract::after {
  content:  "–";
}

.inlineButtonLink::after {
  content:  "→";
}


.inlineButtonLink--external::after {
  content:  "↗";
}

.toggleMore {
  display: grid;
  gap: var(--spacing-vertical);
}

.toggleMore--active .toggleMore__content {
  display: none;
}

.toggleMore--expanded .toggleMore__content {
  display: block;
}

.toggleMore--active .toggleMore__contractButton {
  display: none;
}

.toggleMore--expanded .toggleMore__contractButton {
  display: block;
}

.toggleMore--expanded .toggleMore__expandButton {
  display: none;
}

.notice {
  font-size: var(--font-size-small);
  line-height: var(--line-height-large);
  display: flex;
  /* background: var(--color-notice-background); */
  background: var(--color-notice-background);
  padding: var(--spacing-vertical) var(--spacing-horizontal);
}

.notice__content {
  flex-grow: 1;
}

.notice::before {
  flex-grow: 0;
  flex-shrink: 0;
  content: "i";
  margin-right: var(--spacing-horizontal-small-2);
  width: 1.3em;
  height: 1.3em;
  line-height: 1.2em;
  text-align: center;
  border: var(--border-width-normal) solid;
  border-radius: 50%;
}

.notice--warning::before {
  content:  "!";
}

.notice--error::before {
  content:  "🛑";
}

.notice__content {
  flex-grow: 1;
}

.mediaPreview {
  position: relative;
  --size: 8em;
  --aspect: 10 / 16;
  min-width: calc(var(--size));
  min-height: calc(var(--size) * var(--aspect));
  background: rgba(0, 0, 0, 0.1);
}

.invert .mediaPreview {
  background: rgba(255, 255, 255, 0.1);
}

.mediaPreview__label {
  content: "▶";
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%);
  user-select: none;
  background: var(--color-background);
  padding: var(--spacing-vertical-small-4) var(--spacing-horizontal-small-2);
  border-radius: var(--border-radius-small);
  white-space: nowrap;
  line-height: 1;
}

.invert .mediaPreview__label {
  background: var(--color-background-inverted);
}

.mediaPreview--zoom .mediaPreview__label::before {
  content: "+";
}

.mediaPreview--play .mediaPreview__label::before {
  content: "▶";
}

.credits {
  display:  grid;
  grid-gap: var(--spacing-vertical);
}

.credits__toList {
  list-style: none;
  padding: 0;
}

.credits__toList-item {
  padding: var(--spacing-vertical-small-3) 0;
}

.credits__link--withLogo {
  opacity: 0.5;
}

.credits__link--withLogo:hover {
  opacity: 0.6;
}

.credits__logo {
  display: inline-block;
  filter: grayscale(100%);
  max-width: 10em;
  max-height: 2em;
}

.figure {

}

.figure__caption {
  margin-top: var(--spacing-vertical-small-2);
}

.aspectRatio {
  position: relative;
}

.aspectRatio__content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portableText--centered {
  text-align: center;
}

.portableText--muted {
  color: var(--color-text-muted);
}

.portableText__introduction {
  font-size: var(--font-size-large-3);
}

.portableText__paragraph:not(:last-child) {
  margin-bottom: var(--spacing-vertical);
}

.portableText__link {
  /* Remove this? */
  text-decoration: underline;
}

.favoriteDisplay {
  display: none;
}

.favoriteDisplay__favorited {
  display: inline;
  color: var(--color-text-highlighted);
}

.favoriteDisplay__favorited::before {
  content: "★ ";
}

@media (min-width: 30em) {
  .pad--centered {
    max-width: 30em;
  }
}