/*
                      ***               
                   ******               
             **  ********               
           *******************          
         ************************       
       ****** *********************     
      ******   *********************    
     ******      ********************   
    *******        ******    *********  
    *******           ***       ******* 
    *******                       ***** 
   ********   **                    ****
   *************    TM 27       ********
   *************          *********** **
    ************       *************** *
  **************       ***************  
****************         ************** 
***************         *************** 
    **********       ****************** 
            ********************** **** 
        ***********************       * 
            ****************            

*/

/*------------------------------------*\
  FONTS
\*------------------------------------*/

@font-face {
  font-family: "Genova RFC40";
  src: url("/fonts/tm27/GenovaRFC40.woff2") format("woff2");
  font-display: swap;
}

/*------------------------------------*\
  VARIABLES
\*------------------------------------*/

:root {
  --tm27-color-background: var(--color-text);

  --tm27-color-headline: #4d4d4d;
  --tm27-color-text-module: var(--color-background);

  --tm27-border-radius: 10px;
  --tm27-widget-height: 66cqw;
  --tm27-text-circle: 16px;
  --tm27-text-circle-m: 24px;

  --tm27-spacing-gap-xs: 10px;

  --tm27-cmt-l: 82px;

  /* VARIANT COLOR VARIABLES */
  --tm27-color-text-module: var(--color-news);
  --tm27-color-bg-image-module: var(--tm27-color-background);
  --tm27-color-bg-module: var(--tm27-color-background);
  --tm27-color-topper: #eaeaea;

  /* BORDER RADIUS */
  --tm27-radius-desktop-100: 20px;
  --tm27-radius-desktop-200: 80px;
  --tm27-radius-desktop-300: 100px;
  --tm27-radius-mobile-100: 20px;
  --tm27-radius-mobile-200: 40px;
  --tm27-radius-mobile-300: 60px;
}
@media (max-width: 739px) {
  :root {
    --tm27-text-circle-m: 16px;
  }
}

/* DEFINE PAGE BACKGROUND */
#Theming {
  background-color: var(--tm27-color-background);
}

/* DEFINE CHANNEL/DEFAULT BACKGROUND */
#Theming:has([data-level="undefined"]) {
  background-color: var(--color-background);
}

/*------------------------------------*\
  THEME VARIANTS
\*------------------------------------*/

#Theming:has(.MenuBar[data-slug="exhibition-2027"]) {
  --tm27-color-text-module: #4f4f4f;
  --tm27-color-bg-image-module: var(--color-residents);
  --tm27-color-bg-module: #eaeaea;
  --tm27-color-background: #eaeaea;
}

#Theming:has(.MenuBar[data-slug="festival-2027"]) {
  --tm27-color-text-module: #b4b4b4;
  --tm27-color-bg-image-module: var(--color-festival);
  --tm27-color-bg-module: #101010;
  --tm27-color-background: #101010;
}

/*------------------------------------*\
  FONT OVERRIDES
\*------------------------------------*/

#Theming .CirclesMedium .title * {
  font-family: "Genova RFC40";
  letter-spacing: -1px;
  line-height: 100%;
}

#Theming :is(.CirclesSmall, .CirclesMedium) .text *,
#Theming .CirclesSmall .title *,
#Theming :is(.PeopleQuery, .participantsOverview, .peopleOverview) *:not(.headlineSection, .headlineSection *, :has(.headlineSection)),
#Theming .CirclesMini * {
  font-family: "Computer Modern Transversale", serif;
  line-height: 110%;
  /* text-box-trim: trim-both;
  text-box-edge: cap alphabetic; */
  margin-top: 0;
  margin-bottom: 0;
}

/*------------------------------------*\
  TYPOGRAPHY
\*------------------------------------*/

#Theming .markdown .headline2,
#Theming .markdown .block_headlineBlock {
  --stroke-color: currentColor;
  --stroke-width: 0.015em;
  /* faux text stroke, circular stroke */
  text-shadow:
    var(--stroke-width) 0 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.92) calc(var(--stroke-width) * 0.38) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.71) calc(var(--stroke-width) * 0.71) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.38) calc(var(--stroke-width) * 0.92) 0 var(--stroke-color),
    0 var(--stroke-width) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.38) calc(var(--stroke-width) * 0.92) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.71) calc(var(--stroke-width) * 0.71) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.92) calc(var(--stroke-width) * 0.38) 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) 0 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.92) calc(var(--stroke-width) * -0.38) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.71) calc(var(--stroke-width) * -0.71) 0 var(--stroke-color),
    calc(var(--stroke-width) * -0.38) calc(var(--stroke-width) * -0.92) 0 var(--stroke-color),
    0 calc(var(--stroke-width) * -1) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.38) calc(var(--stroke-width) * -0.92) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.71) calc(var(--stroke-width) * -0.71) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.92) calc(var(--stroke-width) * -0.38) 0 var(--stroke-color);
}
@media (max-width: 739px) {
  #Theming .markdown .headline2,
  #Theming .markdown .block_headlineBlock {
    --stroke-width: 0.2px;
    letter-spacing: 0.005em;
  }
}
#Theming .markdown .headline2 *,
#Theming .markdown .block_headlineBlock * {
  -webkit-text-stroke-width: 0px;
  -webkit-text-stroke-color: currentColor;
}
#Theming .markdown .headline2 a:before {
  font-family: "tm Genova", GenevaRegular, "Geneva", Genova, Arial, sans-serif;
  font-weight: 1000;
}
#Theming .markdown .headline2 a span {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.065em;
}

/*------------------------------------*\
  MODULES
\*------------------------------------*/

/* TM27 DESCRIPTION ELEMENT */
#Theming .CirclesSmall .text,
#Theming .CirclesSmall .title > *,
#Theming .CirclesMedium .text,
#Theming .PeopleQuery .content,
#Theming .participantsOverview .content,
#Theming .peopleOverview .content,
#Theming .CirclesMini .content {
  border: 1px solid var(--tm27-color-text-module);
  border-bottom: none;
  background-color: var(--tm27-color-bg-module);
  color: var(--tm27-color-text-module);
  font-size: var(--tm27-text-circle);
  padding: calc(5px + 0.07em) var(--tm27-spacing-gap-xs, 10px);
}
#Theming .CirclesMedium .title * {
  color: var(--tm27-color-text-module);
}

#Theming :is(.PeopleQuery, .participantsOverview, .peopleOverview) *:not(.headlineSection, .headlineSection *, :has(.headlineSection)),
#Theming .CirclesMini * {
  font-size: var(--tm27-text-circle);
  color: var(--tm27-color-text-module);
}

/* TM27 DESCRIPTION HOVER */
#Theming .CirclesMedium a:hover .title * {
  color: var(--color-akzent1);
}
#Theming .CirclesMedium a:hover .title * {
  color: var(--color-akzent1);
}
#Theming .CirclesSmall a:hover .title > *,
#Theming .CirclesMedium a:hover .text,
#Theming .PeopleQuery a:hover .content,
#Theming .CirclesMini a:hover .content,
#Theming .participantsOverview a:hover .content,
#Theming .peopleOverview a:hover .content,
#Theming .CirclesMini a:hover .content {
  background-color: var(--color-text-mouseover);
  border-color: var(--color-text);
}
#Theming .CirclesSmall a:hover .title > *,
#Theming .CirclesMedium a:hover .text *,
#Theming .PeopleQuery a:hover *,
#Theming .participantsOverview a:hover *,
#Theming .peopleOverview a:hover *,
#Theming .CirclesMini a:hover * {
  color: var(--color-text);
}

/*------------------------------------*\
  NAVIGATION
\*------------------------------------*/

#Theming .transversale path {
  stroke: var(--color-button-background) !important;
}

#Theming nav.quickmenu:hover path {
  stroke: var(--color-button-background) !important;
}

.MenuBar {
  backdrop-filter: blur(25px);
}

#Theming *::-webkit-scrollbar-thumb,
:root::-webkit-scrollbar-thumb {
  background-color: var(--color-text-mouseover) !important;
}

#Theming a.egg {
  border-color: var(--color-button-background);
  color: var(--color-button-background);
}

/*------------------------------------*\
  CONTAINER
\*------------------------------------*/

#Theming .Body.body-container-dark,
#Theming .ModuleContainer.container-dark {
  background: var(--Color-Background, #dedede);

  /* dark container */
  box-shadow:
    0 0 var(--Container-Effects-DS, 25px) 0 var(--color-button-clear-mouseover, rgba(255, 255, 255, 0.33)),
    0 0 var(--Container-Effects-IS, 0) 0 var(--color-button-clear-mouseover, rgba(255, 255, 255, 0.33)) inset;
  backdrop-filter: blur(calc(var(--Container-Effects-BB, 0) / 2));
}
#Theming .Body,
#Theming .ModuleContainer.container,
#Theming .module.news > .container {
  background: var(--color-background, #dedede);

  /* light container */
  box-shadow:
    0 0 var(--Container-Effects-DS, 25px) 0 var(--Color-Akzent1, #b4b4b4),
    0 0 var(--Container-Effects-IS, 0) 0 var(--Color-Akzent1, #b4b4b4) inset;
  backdrop-filter: blur(calc(var(--Container-Effects-BB, 0) / 2));
}

#Theming .module.news > .container,
#Theming .module.pressRelease > .layoutBlock > .container,
#Theming .module.pressRelease > .container {
  box-shadow:
    0 0 var(--Container-Effects-DS, 25px) 0 var(--Color-Akzent-1, #b4b4b4),
    0 0 var(--Container-Effects-IS, 0) 0 var(--Color-Akzent-1, #b4b4b4) inset;
}

/*------------------------------------*\
  TOPPER
\*------------------------------------*/

#Theming .topper * {
  color: var(--color-text);
}

#Theming .topper {
  background: var(--tm27-color-topper) !important;
  box-shadow: none;
}

#Theming .topper.festival,
#Theming .Body.body-top-festival {
  background: var(--color-festival);
}
#Theming .topper.festival,
#Theming .Body.body-top-festival,
#Theming .topper.festival .HeadlineBlock,
#Theming .Body.body-top-festival .HeadlineBlock,
#Theming .topper.about *,
#Theming .Body.body-top-about *,
#Theming .topper.pressRelease *,
#Theming .Body.body-top-publications *,
#Theming .Body.body-top-artwork *,
#Theming .topper.artwork * {
  color: var(--color-akzent1);
}

#Theming .topper.person,
#Theming .Body.body-top-residents {
  border-radius: 0 0 var(--radius-desktop-300, 100px) var(--radius-desktop-300, 100px);
  background: var(--color-residents, #0f6);

  /* residents */
  box-shadow:
    0 0 var(--Container-Effects-DS, 25px) 0 var(--color-akzent-2, #4d4d4d),
    0 0 var(--Container-Effects-IS, 0) 0 var(--color-akzent-1, #b4b4b4) inset;
  backdrop-filter: blur(calc(var(--BB, 0) / 2));
}

#Theming .topper.event,
#Theming .Body.body-top-event {
  background: var(--color-studio);
}
#Theming .topper.artwork,
#Theming .Body.body-top-artwork {
  background: var(--color-publications);
}

#Theming .topper.pressRelease,
#Theming .Body.body-top-publications {
  background: var(--color-publications);
}

#Theming .topper.news,
#Theming .Body.body-top-news {
  background: var(--color-news);
}
#Theming .topper.about,
#Theming .Body.body-top-about {
  background: var(--color-about);
}

/*------------------------------------*\
  HEADLINE
\*------------------------------------*/

#Theming .headlineSection {
  /* color: var(--color-akzent1); */
}

#Theming .banner {
  font-family: "Computer Modern Transversale", serif;
  leading-trim: both;
  text-edge: cap;
  line-height: 124.5%;
}
#Theming .banner:not(.media-smallfont) {
  font-size: var(--tm27-cmt-l);
}

#Theming .HeadlineBlock,
#Theming .headlineLarge,
#Theming .headline2 {
  /* color: var(--tm27-color-headline); */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: currentColor;
  font-family: "Genova RFC40";
  line-height: 100%;
  letter-spacing: -1px;
}
@media (max-width: 739px) {
  #Theming .HeadlineBlock,
  #Theming .headlineLarge,
  #Theming .headline2 {
    -webkit-text-stroke-width: 1px;
  }
}

/*------------------------------------*\
  CIRCLES
\*------------------------------------*/

/* CIRCLE CONTAINER */
#Theming .CirclesMedium {
  grid-gap: var(--spacing-l) var(--spacing-s);
}
@media (max-width: 739px) {
  #Theming .CirclesSmall {
    padding: 0 10px;
  }
}

/* CIRCLE POSITION & SIZING */
#Theming .CirclesSmall .circle,
#Theming .CirclesMedium .circle {
  background-image: none;
  top: 0;
  height: var(--tm27-widget-height);
  width: 100%;
  z-index: 0;
}
#Theming .CirclesSmall .circle {
  height: 100cqw;
  left: 0;
}
#Theming .CirclesSmall .circle img,
#Theming .CirclesMedium .circle img {
  mask-image: none;
  opacity: 1;
  box-shadow: none;
}
#Theming .CirclesMedium .circle img {
  background-color: var(--tm27-color-bg-image-module);
}
#Theming .CirclesMedium .circle,
#Theming .CirclesMedium .circle img {
  border-radius: var(--tm27-border-radius);
}
#Theming .CirclesSmall .circle img {
  left: 0;
}

#Theming .circle::after {
  content: none;
}

#Theming .CirclesSmall .item,
#Theming .CirclesMedium .item {
  display: flex;
  flex-direction: column;
  container-type: inline-size;
  min-height: auto !important;
}

#Theming .CirclesSmall .title,
#Theming .CirclesMedium .title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: var(--tm27-widget-height);
  z-index: 1;
  color: var(--color-background);
  text-align: center;
  margin: 0;
  padding: 0 1rem;
}
#Theming .CirclesSmall .title {
  height: auto;
}
#Theming .CirclesSmall .title::before {
  content: "";
  width: 100%;
  height: 100cqw;
}
#Theming .CirclesSmall .title *,
#Theming .CirclesMedium .title * {
  margin: 0;
}

#Theming .CirclesSmall .title {
  padding: 0;
}
#Theming .CirclesSmall .title > * {
  font-size: var(--tm27-text-circle-m);
  width: 100%;
  padding: 10px var(--tm27-spacing-gap-xs, 10px);
}

#Theming .CirclesMedium .text * {
  font-size: var(--tm27-text-circle);
}

#Theming .CirclesSmall .arrow,
#Theming .CirclesMedium .arrow {
  display: none;
}

/* CIRCLE HOVER */
#Theming .CirclesMedium a:hover .circle img {
  opacity: 0;
}
#Theming .CirclesMedium a:hover .circle {
  background-color: var(--color-button-background-mouseover);
}

/*------------------------------------*\
  CIRCLE THEME VARIANTS
\*------------------------------------*/

#Theming .CirclesSmall .item[data-slug="fragile-currents"],
#Theming .CirclesMedium .item[data-slug="fragile-currents"] {
  --tm27-color-text-module: #4f4f4f;
  --tm27-color-bg-image-module: var(--color-residents);
  --tm27-color-bg-module: #eaeaea;
  --tm27-color-background: #eaeaea;
}

#Theming .CirclesSmall .item[data-slug="groundstates"],
#Theming .CirclesMedium .item[data-slug="groundstates"] {
  --tm27-color-text-module: #b4b4b4;
  --tm27-color-bg-image-module: var(--color-festival);
  --tm27-color-bg-module: #101010;
  --tm27-color-background: #101010;
}

/*------------------------------------*\
  PARTICIPANTS
\*------------------------------------*/

#Theming .PeopleQuery .content,
#Theming .participantsOverview .content,
#Theming .peopleOverview .content,
#Theming .CirclesMini .content {
  margin: 0;
}
#Theming .PeopleQuery *:not(.headlineSection),
#Theming .participantsOverview *:not(.headlineSection),
#Theming .peopleOverview *:not(.headlineSection),
#Theming .CirclesMini * {
  font-size: var(--tm27-text-circle-m);
}

#Theming .PeopleQuery .circle,
#Theming .participantsOverview .circle,
#Theming .peopleOverview .circle,
#Theming .CirclesMini .circle,
#Theming .PeopleQuery a:has(.circle)::before,
#Theming .participantsOverview a:has(.circle)::before,
#Theming .peopleOverview a:has(.circle)::before,
#Theming .CirclesMini a:has(.circle)::before {
  display: inline-block;
  --size: 30px;
  --gap: 15px;
  width: var(--size);
  height: var(--size);
  border-radius: var(--size);
  box-shadow: none;
  border: none;
  background-color: var(--color-residents);
  margin: 0;
}
#Theming .PeopleQuery .item .content,
#Theming .participantsOverview .item .content,
#Theming .peopleOverview .item .content,
#Theming .CirclesMini .item .content {
  margin-top: calc(var(--tm27-spacing-gap-xs) / 2);
}
#Theming .PeopleQuery a:has(.circle)::before,
#Theming .participantsOverview a:has(.circle)::before,
#Theming .peopleOverview a:has(.circle)::before,
#Theming .CirclesMini a:has(.circle)::before {
  content: "";
  position: relative;
  background-color: var(--color-festival);
  margin-right: var(--tm27-spacing-gap-xs);
}

/* #Theming .CirclesMini .paragraph{
  font-style: italic;
} */

@media (max-width: 739px) {
  #Theming .PeopleQuery .item .content,
  #Theming .participantsOverview .item .content,
  #Theming .peopleOverview .item .content,
  #Theming .CirclesMini .item .content {
    margin-top: 0;
  }
  #Theming .PeopleQuery .item,
  #Theming .participantsOverview .item,
  #Theming .peopleOverview .item,
  #Theming .CirclesMini .item {
    text-align: center;
  }
  #Theming .PeopleQuery .item a,
  #Theming .participantsOverview .item a,
  #Theming .peopleOverview .item a,
  #Theming .CirclesMini .item a {
    flex-direction: row;
  }
  #Theming .PeopleQuery .item .content,
  #Theming .participantsOverview .item .content,
  #Theming .peopleOverview .item .content,
  #Theming .CirclesMini .item .content {
    width: 100%;
    flex: unset;
  }

  #Theming .PeopleQuery .circle,
  #Theming .participantsOverview .circle,
  #Theming .peopleOverview .circle,
  #Theming .CirclesMini .circle,
  #Theming .PeopleQuery a:has(.circle)::before,
  #Theming .participantsOverview a:has(.circle)::before,
  #Theming .peopleOverview a:has(.circle)::before,
  #Theming .CirclesMini a:has(.circle)::before {
    width: calc(var(--size) / 1.8);
    border-radius: 0 100% 100% 0 / 0 50% 50% 0;
  }

  #Theming .PeopleQuery a:has(.circle)::before,
  #Theming .participantsOverview a:has(.circle)::before,
  #Theming .peopleOverview a:has(.circle)::before,
  #Theming .CirclesMini a:has(.circle)::before {
    margin-right: calc(var(--gap) * -1);
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
  }
}

/*------------------------------------*\
  PARTICIPANTS VARIANTS
\*------------------------------------*/

#Theming .CirclesMini .item[data-related-project-slugs="groundstates"] .circle,
#Theming .CirclesMini .item[data-related-project-slugs="fragile-currents"] .circle {
  width: auto;
  aspect-ratio: 1/1;
  border-radius: var(--size);
}
#Theming .CirclesMini .item[data-related-project-slugs="groundstates"] .circle {
  background-color: var(--color-festival);
}
#Theming .CirclesMini .item[data-related-project-slugs="fragile-currents"] .circle {
  background-color: var(--color-residents);
}
#Theming .CirclesMini .item[data-related-project-slugs="groundstates"] a:has(.circle)::before,
#Theming .CirclesMini .item[data-related-project-slugs="fragile-currents"] a:has(.circle)::before {
  content: none;
}

/*------------------------------------*\
  QUOTE STYLE
\*------------------------------------*/

#Theming .container.style_quote-narrow > :not(.caption) {
  font-family: "Computer Modern Transversale";
  line-height: 130%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#Theming .container.style_quote-narrow {
  --quote-gap: 20px;
  --quote-shape: 100px;
  padding: 0;
  position: relative;
}

/* static version of tmbase grid & column function */
/*
  $column-amount: 12;
  $gap-desktop: 20px;
  $gap-mobile: 10px;
  */

@media (min-width: 740px) {
  #Theming .container.style_quote-narrow {
    width: calc((100% - 11 * 20px) / 12 * 8 + 20px * (8 - 1));
  }
}
@media (max-width: 740px) {
  #Theming .container.style_quote-narrow {
    --quote-gap: 10px;
    --quote-shape: 30px;
  }
}

#Theming .container.style_quote-narrow {
  padding-left: calc(var(--quote-shape) + var(--quote-gap)); /* gap-s */
}
#Theming .container.style_quote-narrow::before {
  content: "";
  position: absolute;
  width: var(--quote-shape);
  height: 100%;
  left: 0;
  background-image: url(/images/tm27/quote/tm27-quote-00.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
@media (max-width: 740px) {
  #Theming .container.style_quote-narrow::before {
    background-position: top;
  }
}

#Theming .Block:has(.container.style_quote-narrow):nth-of-type(odd) .container.style_quote-narrow {
  padding-left: 0;
  padding-right: calc(var(--quote-shape) + var(--quote-gap));
  text-align: right;
}
#Theming .Block:has(.container.style_quote-narrow):nth-of-type(odd) .container.style_quote-narrow::before {
  background-image: url(/images/tm27/quote/tm27-quote-01.svg);
  left: unset;
  right: 0;
}

/*------------------------------------*\
  CONVERSATION STYLE
\*------------------------------------*/

#Theming .conversation-block * {
  font-family: "Computer Modern Transversale" !important;
  font-style: normal !important;
  letter-spacing: -0.1px !important;
  line-height: 130%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

#Theming .conversation-block .content .name:has(> .paragraphBold:empty) {
  display: none;
}

/*------------------------------------*\
  GALLERY, FULL BLEED
\*------------------------------------*/

#Theming .biggallery .Block,
#Theming .bigAnnouncement .Block {
  margin: 0;
  padding: 0;
  max-width: none;
}

#Theming .biggallery .Block img,
#Theming .bigAnnouncement .Block img {
  width: 100%;
  height: auto;
}
#Theming .biggallery:has(.video) {
  margin: 0;
  padding: 0;
}
#Theming .biggallery:has(.video) + * {
  margin-top: 0;
}