@font-face {
  font-family: RobotoFlex;
  src: url("./RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2")
    format("woff2");
  font-weight: 100 900;
}

@font-face {
  font-family: RobotoFlex;
  src: url("./RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2")
    format("woff2");
  font-style: italic;
  font-weight: 100 900;
}

:root {
  background: #fff;
  font-family: RobotoFlex, sans-serif;

  --greenyellow: #fff;
  --hotpink: #000;

  /* use as specific override only --text-opsz: 12; /* 12 pt equals 16 px */
  --text-wdth: 100;
  --text-wght: 400;
  --text-grad: 0;
  --text-slnt: 0;
  --text-xtra: 468;

  /* use this instead of em */
  --font-size: 1;

  /* only used for opsz. We don't yet get the actual document fs */
  --document-font-size-pt: 12;
}

*,
header nav::before,
header nav.ui_collapsible_mixin-open::after {
  /* if --document-font-size-pt would be dynamic according to the document
     * something like this:
     * font-size: calc(var(--font-size, 1) * var(--document-font-size-pt, 12) * 1pt);
     */
  font-size: calc(var(--font-size, 1) * 1rem);

  --text-opsz: calc(var(--font-size, 1) * var(--document-font-size-pt, 12));

  font-variation-settings:
    "opsz" var(--text-opsz, 12),
    "wdth" var(--text-wdth, 100),
    "wght" var(--text-wght, 400),
    "GRAD" var(--text-grad, 0),
    "slnt" var(--text-slnt, 0),
    "XTRA" var(--text-xtra, 468);
}

h1 {
  --font-size: 2;
}

h2 {
  --font-size: 1.5;
}

h3 {
  --font-size: 1.333;
}

h4 {
  --font-size: 1.2;
}

h5 {
  --font-size: 1;
}

b,
strong {
  --text-wght: 600;
}

i,
em {
  --text-slnt: -7;
}

s {
  text-decoration: line-through 0.2em;
}

hr {
  color: black;
  border-width: 0.2em;
  border-style: solid;
  border-color: black;
}

body {
  max-width: 72em;
  margin: 0 auto;

  --background: #fff;

  background: var(--background);
}

/* move out of view as we use SVG to dispaly the information visually */
header :is(h1, h2) {
  position: absolute;
  top: -1000vh;
}

.wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0 1em;
  container: wrapper / inline-size;
}

.content {
  background: white;
  flex: max-content;
}

header {
  display: grid;
  background: white;

  --nav-full-height: 2.6em;

  grid-template-columns: 17em auto;
  grid-template-rows: auto auto 1fr var(--nav-full-height);
  grid-template-areas:
    "logo-boxes reimagination"
    "logo-text reimagination"
    "logo-text reimagination"
    "nav nav";
}

.filler {
  background: white;
}

header .filler-1 {
  grid-area: filler-1;
}

footer {
  background: black;
  outline-color: black;
  color: white;
  text-align: center;
}

footer a {
  text-decoration: none;
  color: white;
}

header .filler-2 {
  grid-area: filler-2;
}

.identity-logo-container {
  grid-area: logo;
}

:is(
  .identity-logo-boxes,
  .identity-logo-text,
  .identiy-reimagination,
  .identity-logo-compact
) {
  width: 100%;
  box-sizing: border-box;
  display: block;
  border-style: solid;
  border-color: white;
  border-bottom: none;
  border-width: 0;
}

.identity-logo-boxes {
  grid-area: logo-boxes;
  border-width: 1.5em 0.2em 0;
}

.identity-logo-text {
  grid-area: logo-text;
  border-width: 0 0.5em;
}

.identiy-reimagination {
  grid-area: reimagination;
  border-width: 0 0.5em 0 0;
  align-self: end;
}

.identity-logo-compact {
  grid-area: logo-compact;
}

nav {
  grid-area: nav;
  display: flex;
  overflow: visible;

  --nav-gap-size: 0.35em;

  /*
    height: 2.5em;
    */

  z-index: 500;
  white-space: nowrap;
  border-top: 0.3em solid white;
}

nav > ul > li,
.past_editions {
  position: relative;
}

nav > ul {
  display: flex;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.past_editions > span,
nav > ul > li {
  display: inline-block;
}

.past_editions ul a,
nav li > ul a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: var(--nav-gap-size);
  height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
}

.past_editions > span,
nav > ul > li > a,
nav button {
  margin: var(--nav-gap-size);
  display: inline-block;
  height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
}

.past_editions > span {
  padding-right: 0;
}

.past_editions > span,
nav > ul > li > a {
  margin-right: 0;
}

:is(.past_editions > span, nav li:has(> ul))::after,
:is(.past_editions > span, nav li:has(> ul))::before {
  content: "▽\FE0E";
  text-align: center;
  display: inline-block;
  width: 2em;
  height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
}

:is(.past_editions > span, nav li:has(> ul))::before {
  display: none;
}

.past_editions > span,
.past_editions > span::after,
.past_editions > span::before,
nav li:has(> ul)::after,
nav li:has(> ul)::before {
  color: white;
  background: black;
  cursor: pointer;
}

nav .past_editions > ul,
nav ul > li > ul {
  position: absolute;
  top: calc(var(--nav-full-height) - var(--nav-gap-size));
  left: var(--nav-gap-size);
  background: linear-gradient(
    var(--greenyellow, greenyellow),
    var(--hotpink, hotpink)
  );
  white-space: nowrap;
}

nav .past_editions > ul {
  display: none;
}

@media (hover: hover) {
  /*
     * in IOS the hover style interferes with being able to
     * collapse the sub-menu again, so this style is only
     * added when hover is truly available.
     */
  nav .past_editions:hover > ul,
  nav li:has(> ul):hover > ul {
    display: block;
  }

  .past_editions:hover > span::after,
  nav li:has(> ul):hover::after,
  .past_editions:hover > span::before,
  nav li:has(> ul):hover::before {
    content: "▼\FE0E";
  }
}

:is(.past_editions, li).ui_collapsible_mixin-open > ul {
  display: block;
}

:is(
  .past_editions.ui_collapsible_mixin-open > span,
  li.ui_collapsible_mixin-open
)::after,
:is(
  .past_editions.ui_collapsible_mixin-open > span,
  li.ui_collapsible_mixin-open
)::before {
  content: "▼\FE0E";
}

nav a {
  color: black;
  background: white;
  text-decoration: none;
}

nav a,
.past_editions > span,
nav button span {
  --text-wdth: 60;
  --text-wght: 700;

  text-transform: uppercase;
}

nav a,
.past_editions > span {
  padding: 0 0.3em;
}

.past_editions > span {
  padding-right: 0;
}

nav a:hover {
  color: var(--hotpink, hotpink);
  text-decoration: dotted;
  text-decoration-line: underline;
  text-decoration-thickness: 0.2em;
  text-decoration-color: initial;
}

nav li:has(li.active) > a {
  background: var(--greenyellow, greenyellow);
  text-decoration-thickness: 0.2em;
  text-decoration-color: initial;
  text-decoration-line: underline;
}

nav li:has(li.active) > a:hover {
  --text-grad: 70;

  text-decoration-color: initial;
}

nav li.active > a {
  background: var(--hotpink, hotpink);
  color: #fff;
  text-decoration: 0.2em underline;
}

nav li.active > a:hover {
  color:  var(--greenyellow, greenyellow);
}

.play_pause,
.play_pause::before,
.play_pause::after {
  --symbol-url-is-pausing: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 12 12 24'><path d='M10,31.4v-14.8l11,7.4'></path></svg>");
  --symbol-url-is-playing: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='10 12 12 24'><path d='M10,32v-16h4v16zm6,0v-16h4v16z'></path></svg>");
  --symbol-size: 2.5em;
  --icon-width: calc(var(--symbol-size) * 0.4);
}

.play_pause {
  font: unset;
  border: none;
  cursor: pointer;
  background: none;
  white-space: nowrap;
  color: white;
  position: relative;
  padding-left: var(--icon-width);
  padding-right: 0;
  margin-left: var(--nav-gap-size);
  margin-right: 0;
}

.play_pause::before {
  content: "";
  mask-image: var(--symbol-url-is-pausing);
  mask-repeat: no-repeat;
  mask-position: left center;
  width: var(--icon-width);
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background-color: white;
}

.play_pause {
  /* no javascript generated classes: we don't need this */
  display: none;
}

.play_pause:where(.is_pausing, .is_playing) {
  display: block;
}

.play_pause span {
  display: none;
}

.play_pause.is_pausing .is_pausing-label,
.play_pause.is_playing .is_playing-label {
  display: inline;
}

.play_pause.is_pausing::before {
  mask-image: var(--symbol-url-is-pausing);
}

.play_pause.is_playing::before {
  mask-image: var(--symbol-url-is-playing);
}

.donate {
  background: var(--background);
  position: fixed;
  width: 10em;
  aspect-ratio: 1;
  border-radius: 50%;
  left: max(3.8em, calc((100% - 72em) / 2 + 3.8em));
  top: 22em;
  border: 0.5em solid black;
  background-size: 100vw 100vh;
  background-position: -3.8em 35em;
}

.donate a {
  --font-size: 2;
  --text-wght: 900;
  --text-wdth: 54;

  text-transform: uppercase;
  display: block;
  width: 90%;
  aspect-ratio: 1;
  margin: 5%;
  border-radius: 50%;
  position: absolute;
  text-align: center;
  line-height: 4em;
  text-decoration-style: double;
  text-decoration-thickness: 0.15em;
  background: black;
  color: white;
  text-decoration-color: greenyellow;
}

.donate a:hover {
  background: white;
  color: black;
  text-decoration-color: hotpink;
}

header {
  display: block;
}

header .filler {
  display: none;
}

nav::before,
nav:where(.ui_collapsible_mixin-open)::after {
  content: "MENU";

  --text-wght: 900;

  display: block;
  text-align: center;
  height: var(--nav-full-size);
  cursor: pointer;
  background: black;
  color: white;
}

nav:where(.ui_collapsible_mixin-closed) > :is(ul, div) {
  display: none;
}

li:where(.ui_collapsible_mixin-open_in_mobile) > ul {
  display: block;
}

nav {
  padding: var(--nav-gap-size) 0;
  height: initial;
}

nav,
nav > ul {
  flex-direction: column;
}

nav .past_editions > ul,
nav ul > li > ul {
  position: initial;
}

.past_editions > span,
nav > ul > li > a,
.play_pause {
  margin: 0;
  margin-left: 0;
  margin-right: 0;
}

.play_pause {
  height: var(--nav-full-height);
}

.play_pause span {
  position: initial;
}

:is(nav .past_editions > ul, nav ul > li > ul) > li {
  padding: 0 0 var(--nav-gap-size) 2em;
}

nav ul > li > ul > li:first-child {
  padding-top: var(--nav-gap-size);
}

.past_editions ul a,
nav li > ul a {
  margin: 0;
}

.past_editions > span,
nav > ul > li > a {
  display: block;
}

.past_editions > span {
  padding-left: 0;
}

nav li:has(ul) {
  overflow: hidden;
}

nav li:has(ul) > a {
  position: absolute;
  top: 0;
  width: 100%;
  padding-left: 2.3em;
}

:is(.past_editions > span, nav li:has(> ul))::before {
  display: inline-block;
  position: relative;
  z-index: 1;
}

nav li:has(> ul)::before {
  /* hidden because in smallest/mobile view, the collapsable triangles
         * are without function, as the menu us always open.
         */
  visibility: hidden;
}

:is(.past_editions > span, nav li:has(> ul))::after {
  display: none;
}

nav .past_editions > ul,
nav ul > li > ul {
  background: transparent;
}

.play_pause {
  background-color: white;
  color: black;
  height: fit-content;
  text-align: left;
  padding-left: calc(var(--icon-width) + var(--nav-gap-size));
}

.play_pause::before {
  background-color: black;
  left: var(--nav-gap-size);
}

.play_pause .play_pause-purpose {
  display: inline;
}

.donate {
  left: unset;
  right: 1em;
  top: 10vw;
  bottom: unset;
}

.content .heading_anchor {
  text-decoration: none;

  --font-size: 1;

  color: black;
  font-weight: normal;

  --text-wght: 200;
  --text-wdth: 100;

  margin-inline-start: -0.8em;
}

.content {
  --text-wdth-ratio: 0;
  --left-padding: 1.5em;
  --right-padding: 1.5em;
  --line-height: 1.2;

  padding: 1.5em 0;
  padding-left: var(--left-padding);
  padding-right: var(--right-padding);

  --text-wdth: calc(90 + 35 * var(--text-wdth-ratio, 1));
}

.content .page-nav {
  margin-bottom: 1.5em;
}

.content :is(p, li) {
  hyphens: auto;
}

.content h1 {
  --font-size: 2.5;
  --text-wdth: 50;
  --text-wght: 550;
}

.reveal h1 {
  --font-size: 4;
  --text-wdth: 54;
  --text-wght: 500;
}

:is(.content, .reveal) h1 {
  margin-block-start: 0;
  text-transform: uppercase;
}

:is(.host, .event) .content h1 {
  text-transform: initial;
}

.content .news article h1 {
  --font-size: 1.5;
  --text-wght: 600;
}

@container wrapper (width > 30em) {
  .content *:is(p, li) {
    hyphens: manual;
  }
}

@container wrapper (width > 35em) {
  .content {
    --text-wdth-ratio: 0.25;
    --line-height: 1.25;
  }
}

@container wrapper (width > 35.7813em) {
  .content {
    --text-wdth-ratio: 0.5;
    --line-height: 1.3;
  }
}

header .identity-logo-boxes {
  border-bottom: 0.5em solid white;
}

header .identity-logo-text {
  border-bottom: none;
}

header .identiy-reimagination {
  border: 0.5em solid white;
}

@container wrapper (width > 36em) /*(width <= 48em)*/ {
  header {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 1fr auto var(--nav-full-height);
    grid-template-areas:
      "logo-boxes    logo-text    "
      "filler-1      logo-text    "
      "reimagination reimagination"
      "nav           nav          ";
  }

  header .filler-2 {
    display: none;
  }

  header .identity-logo-boxes {
    border-bottom: 0.5em solid white;
  }

  header .identity-logo-text {
    border-bottom: none;
  }

  header .identiy-reimagination {
    border: 0.5em solid white;
  }

  nav {
    grid-area: nav;
    display: flex;
    overflow: visible;

    --nav-gap-size: 0.35em;

    z-index: 500;
    white-space: nowrap;
    border-top: 0.3em solid white;
  }

  nav::before,
  nav::after {
    content: none;
  }

  nav > ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  nav li:has(ul) {
    overflow: visible;
  }

  nav,
  nav > ul {
    flex-direction: row;
  }

  .past_editions > span,
  nav > ul > li {
    display: inline-block;
  }

  nav > ul > li,
  .past_editions {
    position: relative;
  }

  nav .past_editions {
    display: inline-block;
  }

  nav .past_editions > ul,
  nav ul > li > ul {
    display: none;
  }

  :is(.past_editions > span, nav li:has(> ul))::after {
    content: "▽\FE0E";
    text-align: center;
    display: inline-block;
    width: 2em;
    height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
    line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  }

  :is(.past_editions > span, nav li:has(> ul))::before,
  :is(
    .past_editions.ui_collapsible_mixin-open > span,
    li.ui_collapsible_mixin-open
  )::before {
    content: none;
  }

  :is(.past_editions, li).ui_collapsible_mixin-open {
    overflow: visible;
  }

  :is(.past_editions, li).ui_collapsible_mixin-open > ul {
    position: absolute;
  }

  nav li:has(ul) > a {
    position: initial;
    width: fit-content;
    padding-left: 0.3em;
  }

  nav ul > li > ul > li:first-child,
  :is(nav .past_editions > ul, nav ul > li > ul) > li {
    padding: 0;
  }

  .past_editions > span,
  nav > ul > li > a {
    margin-right: 0;
  }

  nav a,
  .past_editions > span {
    padding: 0 0.3em;
  }

  .past_editions > span,
  nav > ul > li > a {
    display: inline-block;
  }

  .donate {
    left: 10%;
    right: unset;
    top: 3em;
  }

  nav > ul > li,
  .past_editions {
    position: relative;
  }

  nav > ul {
    display: flex;
  }

  nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .past_editions > span,
  nav > ul > li {
    display: inline-block;
  }

  .past_editions ul a,
  nav li > ul a {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: var(--nav-gap-size);
    height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
    line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  }

  .past_editions > span {
    padding-right: 0;
  }

  .past_editions > span,
  nav > ul > li > a {
    margin-right: 0;
  }

  :is(.past_editions > span, nav li:has(> ul))::after,
  :is(.past_editions > span, nav li:has(> ul))::before {
    content: "▽\FE0E";
    text-align: center;
    display: inline-block;
    width: 2em;
    height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
    line-height: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
  }

  :is(.past_editions > span, nav li:has(> ul))::before {
    display: none;
  }

  .past_editions > span,
  .past_editions > span::after,
  .past_editions > span::before,
  nav li:has(> ul)::after,
  nav li:has(> ul)::before {
    color: white;
    background: black;
    cursor: pointer;
  }

  nav .past_editions > ul,
  nav ul > li > ul {
    position: absolute;
    top: calc(var(--nav-full-height) - 2 * var(--nav-gap-size));
    left: 0;
    background: linear-gradient(
      var(--hotpink, hotpink),
      var(--hotpink, hotpink)
    );
    white-space: nowrap;
    display: none;
  }

  @media (hover: hover) {
    /*
         * in IOS the hover style interferes with being able to
         * collapse the sub-menu again, so this style is only
         * added when hover is truly available.
         */
    nav .past_editions:hover > ul,
    nav li:has(> ul):hover > ul {
      display: block;
    }

    .past_editions:hover > span::after,
    nav li:has(> ul):hover::after,
    .past_editions:hover > span::before,
    nav li:has(> ul):hover::before {
      content: "▼\FE0E";
    }
  }

  :is(.past_editions, li).ui_collapsible_mixin-open > ul {
    display: block;
  }

  :is(
    .past_editions.ui_collapsible_mixin-open > span,
    li.ui_collapsible_mixin-open
  )::after,
  :is(
    .past_editions.ui_collapsible_mixin-open > span,
    li.ui_collapsible_mixin-open
  )::before {
    content: "▼\FE0E";
  }

  nav a {
    color: black;
    background: white;
    text-decoration: none;
  }

  nav a,
  .past_editions > span,
  nav button span {
    --text-wdth: 60;
    --text-wght: 700;

    text-transform: uppercase;
  }

  nav a,
  .past_editions > span {
    padding: 0 0.3em;
  }

  .past_editions > span {
    padding-right: 0;
  }

}

@container wrapper (width > 48em) /*(width <= 56em)*/ {
    header {
        grid-template-areas:
            "logo-boxes reimagination"
            "logo-text  reimagination"
            "logo-text  reimagination"
            "nav        nav          ";
        grid-template-rows: auto 1fr auto var(--nav-full-height);
        grid-template-columns: 17em auto;
    }
    header .identity-logo-boxes {
        border-bottom: none;
    }
    header .identiy-reimagination {
        border-width: 0 .5em 0 0;;
    }
}

@container wrapper (width > 56em) {
    header {
        grid-template-rows: auto auto 1fr var(--nav-full-height);
        grid-template-areas:
        "logo-boxes reimagination"
        "logo-text  reimagination"
        "logo-text  reimagination"
        "logo-text  nav          ";
    }
}


@container wrapper (width > 36.5625em) {
  .content {
    --text-wdth-ratio: 1;
    --line-height: 1.4;
  }
}

@container wrapper (width > 38.125em) {
  .content {
    --right-padding: calc(1.5em + 100cqw - 38.125em);
  }
}

@container wrapper (width > 40.625em) {
  .content {
    --right-padding: 4em;
  }
}

@container wrapper (width > 56em) {
  .content {
    --left-padding: 17em;
    --right-padding: 1.5em;
    --text-wdth-ratio: 0.25;
    --line-height: 1.25;
  }
}

@container wrapper (width > 56.7813em) {
  .content {
    --text-wdth-ratio: 0.5;
    --line-height: 1.3;
  }
}

@container wrapper (width > 57.5625em) {
  .content {
    --text-wdth-ratio: 0.75;
    --line-height: 1.35;
  }
}

@container wrapper (width > 58.3438em) {
  .content {
    --text-wdth-ratio: 1;
    --line-height: 1.4;
  }
}

@container wrapper (width > 59.125em) {
  .content {
    --right-padding: calc(1.5em + 100cqw - 59.125em);
  }
}

@container wrapper (width > 61.625em) {
  .content {
    --right-padding: 4em;
  }
}

ol.news {
  list-style: none;
  padding-inline-start: 0;
}

:is(.content, .reveal) :is(h1, h2, h3, h4, h5, h5) {
  margin-block-end: 0;
  line-height: 1.2;
}

:is(.content, .reveal) :is(h2, h3, h4, h5) {
  --text-wght: 600;
}

:is(.content, .reveal) :is(p, li, .sponsorship, time, table.schedule) {
  --text-grad: 0;
  --font-size: 1.4;

  margin: 0;
  line-height: var(--line-height, 1.4);
}

:is(.label-events, .host-events) time {
  display: inline;

  --text-wght: 600;
}

.content .news li article {
  /* reset */
  --font-size: 1;
}

.content p.lead {
  margin-bottom: 1lh;
  font-style: italic;

  --text-slnt: -7;
}

.news p.lead {
  margin-bottom: 0.5lh;
}

.content p:not(.lead) + p {
  text-indent: 1.5em;
}

:is(.content, .reveal) blockquote p {
  --font-size: 2.5;
  --text-wght: 200;
  --text-slnt: -7;
  --text-wdth: 100;

  line-height: 1.1em;
  text-align: center;
  margin: 1rem 0;
}

:is(.content, .reveal) a {
  color: black;
  text-decoration: underline;
  text-decoration-thickness: 0.2em;
  text-decoration-color: var(--hotpink, greenyellow);
}

:is(.content, .reveal) a:hover {
  --text-grad: 50;
}

.call_for_action {
  color: black;
  background: var(--greenyellow);

  --text-wght: 1000;
  --font-size: calc(2 + 1 * var(--text-wdth-ratio, 1));
  --text-wdth: 60;

  text-align: center;
  border: 0.3em double var(--hotpink);
  margin: 1rlh 0;
}

.call_for_action a {
  text-decoration-thickness: 0.1em;
  text-decoration-style: double;
  text-transform: uppercase;
  text-decoration-color: initial;
}

.call_for_action a:hover {
  --text-wght: 800;
}

.open_street_map-container {
  aspect-ratio: 16/9;
}

.block-image {
  display: block;
}

.block-image img {
    max-width: 100%;
  }

.content :is(.sponsorship, .partner) {
  display: flex;
  gap: 0.5em;
  flex-flow: row wrap;
  margin-top: 0.5lh;
}

:is(.sponsorship, .partner) :is(.sponsorship-logo, .partner-logo) {
  display: block;
  text-decoration: none;

  --min-width: min(
    100%,
    max(var(--sponsor-small-max, 13em), var(--sponsor-width, 100%))
  );

  flex: 0 0 var(--min-width);
}

:is(.sponsorship, .partner).wide :is(.sponsorship-logo, .partner-logo) {
  --min-width: 100%;
}

:is(.sponsorship, .partner) :is(.sponsorship-info, .partner-info) {
  display: block;
  text-decoration: none;
  flex: 1 1 10em;
}

:is(.sponsorship, .partner) :is(.sponsorship-logo, .partner-logo) img {
  width: 100%;
}

.partner,
.sponsorship-level_gold {
  --sponsor-width: 40%;
  --sponsor-small-max: 13em;
}

.sponsorship-level_silver {
  --sponsor-width: 33%;
  --sponsor-small-max: 11em;
}

.sponsorship-level_bronze {
  --sponsor-width: 25%;
  --sponsor-small-max: 9em;
}

.sponsorship-level_iron {
  --sponsor-width: 20%;
  --sponsor-small-max: 7em;
}

h1 .event-type {
  --text-wght: 300;

  white-space: nowrap;
}

:is(.label-events, .host-events) .event-type {
  --text-wght: 600;

  white-space: nowrap;
}

h2:has(+ .event-hosts, + .event-labels, + .media-ccc-link) {
  display: inline-block;

  --font-size: 1.4;
}

a.media-ccc-link {
  display: inline-block;
  overflow: hidden;
  position: relative;
}

a.media-ccc-link span {
    position: absolute;
    top: -1000em;
    left: -1000em;
  }

a.media-ccc-link.show-title span {
    position: initial;
  }

a.media-ccc-link::after {
    display: inline-block;
    content: "";
    background: url("../img/partners/media-ccc-de_logo.svg");

    --aspect-ratio: calc(44/42);
    --height: calc(1em * var(--line-height));

    height: var(--height);
    width: calc(var(--height) * var(--aspect-ratio));
    background-size: cover;
    vertical-align: bottom;
  }

a.media-ccc-link.show-title::after {
    margin-left: 0.3em;
  }

.event-hosts,
.event-labels {
  display: inline;
  margin: 0;
  padding: 0 0 0 0.5em;
}

:is(.event-hosts,.event-labels) li {
    display: inline;
  }

:is(.event-hosts,.event-labels) li:not(:last-child)::after {
    content: ", ";
  }

:is(.event-hosts,.event-labels)::after {
    content: "";
    display: block;
  }

.event-times {
  margin: 0;
  padding: 0;
  list-style: none;
}

.schedule :is(td, th) {
  vertical-align: top;
}

.schedule .page-link,
.closing-night strong {
  --text-wght: 600;
  --text-wdth: 54;
}

.schedule .page-link:hover {
  --text-grad: -100;
}

.content .schedule h3 {
  margin-block: 0;
  line-height: unset;

  --font-size: inherit;
}

.schedule_item-type-sessions ul {
  margin: 0;
  padding: 0;
}

.schedule {
  border-collapse: collapse;
}

.schedule :is(th) {
  padding-inline-start: 0.1em;
  padding-inline-end: 0.6em;
  padding-block: 0;
}

.schedule td,
.schedule_item-type-sessions li:not(:last-child) {
  padding-block-end: 0.4em;
}

.content .schedule a {
  text-decoration-thickness: 0.1em;
}

.legend-general,
.schedule :is(.schedule_item-type-general, .schedule_item-type-community) {
  --mark-color: #fb7cae;
}

.legend-talk,
.schedule
  :is(
    .schedule_item-type-talk,
    .schedule_item-type-lightning,
    .schedule_item-type-keynote
  ) {
  --mark-color: #b9f54a;
}

.legend-sessions,
.schedule .schedule_item-type-sessions {
  --mark-color: #ddc982;
}

.schedule_item th,
.schedule-legend span {
  background: linear-gradient(0.75turn, #fff0, var(--mark-color));
}

.schedule-legend span {
  display: inline-block;
  padding: 0.3em;

  --font-size: 1.2;
}

.host-link,
.label-link,
.schedule_item-own_type {
  white-space: nowrap;
}

.label-link {
  --text-wght: 300;
  --font-size: 1.2;
}

.host-link:has(+ .host-link)::after {
  content: ",";
}

.clips-container {
  max-width: initial;

  /* for target 1080p/50  */
  height: 1080px;
  width: 1920px;
  overflow: hidden;
  padding: 50px;
  box-sizing: border-box;
}

.clips-container .filler-1 {
  grid-area: filler-1;
}

.clips-container .filler-1 {
  grid-area: filler-2;
}

.clips-container .presentation-payload {
  grid-area: content;
  background: white;
  font-size: 40pt;
}

.clips-container article {
  display: grid;
  grid-template-columns: 30% auto;
  grid-template-rows: auto 1fr auto auto 1fr auto;
  grid-template-areas:
    "logo-boxes content"
    "filler-1 content"
    "logo-text content"
    "logo-text content"
    "filler-2 filler-2"
    "reimagination reimagination";
  height: 100%;
  border: 25px solid white;
  box-sizing: border-box;
}

.clips-container.outro article {
  display: grid; /* ; */
  grid-template-columns: min-content auto;
  grid-template-rows: auto min-content 1fr;
  grid-template-areas:
    "logo-compact commons"
    "logo-compact thanks"
    "filler chaos";
  height: 100%;
  border: 25px solid white;
  box-sizing: border-box;
}

.outro .identity-logo-compact {
    width: 363px;
    aspect-ratio: 363/380;
  }

.outro .cc-logo-license {
    padding-left: 25px;
    padding-top: 2em;

    --width: 825px;

    grid-area: commons;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: self-start;
  }

:is(.outro .cc-logo-license) img {
      width: var(--width);
      vertical-align: top;
    }

:is(.outro .cc-logo-license) div {
      width: var(--width);
      box-sizing: border-box;

      --font-size: 2;
      --text-wght: 500;

      padding-top: 0.5em;
      padding-left: 0.2em;
    }

.outro .thanks {
    grid-area: thanks;
    padding-left: 25px;
    padding-top: 0.98em;

    --text-wght: 750;
    --text-wdth: 50;
    --font-size: calc(35/12);

    text-transform: uppercase;
    background: white;
    margin: 0;
    line-height: 1;
  }

.outro .chaos-west {
    vertical-align: middle;
    background: white;
    margin: 0 5em 0 0;
    width: 500px;
  }

.outro .c3voc {
    display: inline-block;
    white-space: nowrap;

    --font-size: 8;
    --text-wdth: 35;
    --text-wght: 650;
  }

:is(.outro .c3voc) img {
      width: 450px;
      vertical-align: top;
    }

.outro .media-ccc-de {
    --font-size: 2;
    --text-wght: 500;

    margin: -3em 0 1em;
  }

:is(.outro .media-ccc-de) img {
      width: 150px;
      vertical-align: middle;
    }

:is(.outro .media-ccc-de) strong {
      --text-wght: 700;
    }

.outro .chaos-west-thanks {
    padding-top: 1em;
    padding-left: 25px;
    background: white;
    grid-area: chaos;
  }

.outro .music-attribution {
    --font-size: 2;
    --text-wght: 500;
  }

:is(.outro .music-attribution) strong {
      --text-wght: 700;
    }

.outro .filler-1 {
    grid-area: filler;
  }

.outro .filler-2 {
    display: none;
  }

.clips-container .presentation-payload {
  padding-left: 50px;
  padding-top: 30px;

  /* bottom align content */
  display: flex;
  flex-direction: column;
  justify-content: end;

  /* this is an adjustment to bring the base-line down to the logo/title baseline */
  margin-bottom: -0.2em;
  z-index: 100;
  position: relative;

  /* end micro adjustment */
}

:is(.clips-container .presentation-payload) h1 {
    --font-size: 9.1;
    --text-wght: 650;
    --text-wdth: 70;

    text-transform: uppercase;
    margin: 0;
    line-height: 1;
    white-space: pre-wrap;
  }

.adjust-long-title:is(.clips-container .presentation-payload) h1 {
    --font-size: 7.8;
  }

.adjust-very-long-title:is(.clips-container .presentation-payload) h1 {
    --font-size: 7.1;
  }

:is(.clips-container .presentation-payload) .heading_anchor {
    display: none;
  }

:is(.clips-container .presentation-payload) ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

:is(.clips-container .presentation-payload) li {
    display: inline;

    --font-size: 3.6;
    --text-wght: 550;

    /* This way, with a long 4 line title, we hit the baseline
         * of the bottom logo text "May 28 - 31"
         * h1 font-size/line-height is important as well!
         * */
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
  }

:is(.clips-container .presentation-payload) li::after {
    content: ", ";
  }

:is(.clips-container .presentation-payload) li:last-child::after {
    content: "";
  }

@media print {
  :root,
  body {
    background: white;

    --document-font-size-pt: 8;
  }

  .wrapper {
    width: 13cm;
  }

  .donate {
    display: none;
  }

  header {
    display: block;
  }

  header
    :is(
      .identity-logo-text,
      .identiy-reimagination,
      .filler-1,
      .filler-2,
      nav
    ) {
    display: none;
  }

  .identity-logo.identity-logo-boxes {
    /* Prevent printers from removing background-images of controls. */
    background: black;
    width: 10em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  header :is(h1, h2) {
    position: initial;

    --text-wght: 800;
    --text-wdth: 70;

    text-transform: uppercase;
  }

  .content {
    --left-padding: 0;
  }

  * {
    font-size: calc(
      var(--font-size, 1) * var(--document-font-size-pt, 12) * 1pt
    );
  }
}

.presentation {
  --document-font-size-pt: 30;
}

.presentation * {
    font-size: calc(
      var(--font-size, 1) * var(--document-font-size-pt, 12) * 1pt
    );
  }

.presentation body {
    max-width: initial;
  }

.presentation .reveal section {
    background: white;
    width: 100%;
    height: 100%;
  }

.presentation .heading_anchor {
    display: none;
  }