@layer reset {

  *,
  :before,
  :after {
    box-sizing: border-box
  }

  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    text-size-adjust: none;
    scroll-behavior: smooth;
    --lightningcss-light: initial;
    --lightningcss-dark: ;
    color-scheme: light dark;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility
  }

  @media (prefers-color-scheme:dark) {
    html {
      --lightningcss-light: ;
      --lightningcss-dark: initial
    }
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin-block-end: 0
  }

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

  body {
    min-height: 100svh;
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
    line-height: 1.5
  }

  h1,
  h2,
  h3,
  h4,
  button,
  input,
  label {
    line-height: 1.1
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    text-wrap: balance;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic
  }

  p {
    text-wrap: pretty
  }

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

  img,
  picture,
  video,
  canvas,
  svg {
    max-width: 100%;
    display: block
  }

  input,
  button,
  textarea,
  select {
    font-family: inherit;
    font-size: inherit
  }

  button {
    min-width: 44px;
    min-height: 44px
  }

  input[type=checkbox] {
    min-width: 44px;
    min-height: 44px
  }

  input[type=radio] {
    min-width: 44px;
    min-height: 44px
  }

  textarea:not([rows]) {
    min-height: 10em
  }

  :target {
    scroll-margin-block: 5ex
  }

  @media (prefers-reduced-motion:reduce) {

    *,
    :before,
    :after,
    .hero-blobs__svg path {
      scroll-behavior: auto !important;
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important
    }
  }
}

@layer utilities {
  :is(.visually-hidden, .sr-only) {
    clip: rect(0 0 0 0);
    border: 0;
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
  }

  .border-between-inline>*+* {
    border-inline-start-width: var(--border)
  }

  .border-between-block>*+* {
    border-block-start-width: var(--border)
  }

  .gradient-border {
    border-width: var(--size-3);
    border-image-slice: 1;
    border-image-source: var(--conic-gradient-3)
  }

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

  .fade-up-and-in {
    opacity: 0;
    animation: var(--animation-fade-in) forwards, var(--animation-slide-in-up) forwards;
    animation-duration: .7s, 1s;
    animation-delay: .3s, 0s;
    animation-fill-mode: forwards, forwards
  }

  @media (prefers-reduced-data:reduce) {

    img,
    video {
      display: none
    }
  }

  @media (prefers-reduced-motion:no-preference) {
    :focus {
      outline-offset: 5px;
      transition: outline-offset .25s
    }
  }

  [id] {
    scroll-margin-top: 2em
  }

  main img {
    content-visibility: auto
  }

  :not(.card) img {
    vertical-align: middle;
    shape-margin: .75rem;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: auto;
    font-style: italic
  }

  a,
  button {
    touch-action: manipulation
  }

  input {
    font-size: max(var(--step-0), 1rem)
  }

  iframe[src^="https://www.youtube.com/embed/"] {
    aspect-ratio: 16/9;
    block-size: auto;
    inline-size: 100%
  }

  .toolbar-menu {
    z-index: var(--max-z-index)
  }

  @media (prefers-reduced-motion:no-preference) {
    :focus {
      outline-offset: 5px;
      transition: outline-offset .25s
    }
  }

  :is(.button, a).disabled {
    opacity: .5;
    cursor: not-allowed
  }

  .skip-link {
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden
  }

  .skip-link:focus {
    clip: auto;
    width: auto;
    height: auto;
    padding: var(--component-padding);
    background: var(--white);
    z-index: var(--max-z-index);
    color: var(--black);
    margin-block-start: 2vh;
    margin-inline-start: 1vw;
    position: absolute;
    overflow: auto
  }

  blockquote {
    quotes: "„" "“" "‚" "‘"
  }

  a[href^=http]:not([href*=writersunlimited\.nl]):not([href*="writersunlimited.twokings.eu"]):after {
    content: "";
    background-color: currentColor;
    block-size: .7em;
    inline-size: .7em;
    margin-inline-start: .25em;
    display: inline-block;
    -webkit-mask: url(../img/external_link.svg) 50%/contain no-repeat;
    mask: url(../img/external_link.svg) 50%/contain no-repeat
  }

  a[target=_blank]:not([href*=writersunlimited\.nl]):not([href*="writersunlimited.twokings.eu"]):after {
    content: "";
    background-color: currentColor;
    block-size: .7em;
    inline-size: .7em;
    margin-inline-start: .25em;
    display: inline-block;
    -webkit-mask: url(../img/external_link.svg) 50%/contain no-repeat;
    mask: url(../img/external_link.svg) 50%/contain no-repeat
  }
}

@layer colors {
  :where(html) {
    --color-theme__groen-1: #8cffc8;
    --color-theme__groen-2: #990090;
    --color-theme__groen-3: #6bfff3;
    --color-theme__peach-1: #ff8a8f;
    --color-theme__peach-2: #990090;
    --color-theme__peach-3: #ff71cc;
    --color-theme__geel-1: #fb0;
    --color-theme__geel-2: #ff370b;
    --color-theme__geel-3: #ffe503;
    --color-theme__rood-1: #b20058;
    --color-theme__rood-2: #ffbad8;
    --color-theme__rood-3: #1f2a8a;
    --white: #fff;
    --black: #1a1a1a;
    --grey: #f6f4f0;
    --type-young: #00ea7a;
    --type-kids: #fb0;
    --type-events: #ffbad8;
    --type-engels: #8a38f5
  }

  @supports (color:lab(0% 0 0)) {
    :where(html) {
      --color-theme__groen-1: lab(92.1452% -43.5575 15.7324);
      --color-theme__groen-2: lab(35.5535% 62.9091 -36.5582);
      --color-theme__groen-3: lab(91.8619% -43.4609 -6.8331);
      --color-theme__peach-1: lab(70.9634% 45.5781 18.4);
      --color-theme__peach-2: lab(35.5535% 62.9091 -36.5582);
      --color-theme__peach-3: lab(67.8397% 62.1624 -20.1965);
      --color-theme__geel-1: lab(80.6686% 16.5984 82.1975);
      --color-theme__geel-2: lab(57.0833% 73.16 68.0975);
      --color-theme__geel-3: lab(90.9759% -3.7494 88.6336);
      --color-theme__rood-1: lab(38.7201% 64.0475 4.06706);
      --color-theme__rood-2: lab(82.707% 28.8632 -4.7309);
      --color-theme__rood-3: lab(21.9603% 24.3474 -55.7978);
      --white: lab(100% 0 0);
      --black: lab(9.2648% -.00000745058 0);
      --grey: lab(96.2643% .170559 2.16745)
    }
  }
}

@layer themes {
  [data-theme=groen] {
    --body-bg: var(--color-theme__groen-1);
    --header-bg: var(--color-theme__groen-3);
    --body-bg-page: var(--grey);
    --block-bg: var(--color-theme__groen-3);
    --block-bg-gradient: linear-gradient(0deg, #8cffc8 7%, var(--grey) 100%);
    --block-bg-double__gradient: linear-gradient(0deg, #8cffc8 0%, var(--grey) 10%, var(--grey) 50%, var(--grey) 90%, #8cffc8 100%);
    --block-bg-double__gradient_variant: linear-gradient(0deg, var(--grey) 0%, #8cffc8 10%, #8cffc8 50%, #8cffc8 90%, var(--grey) 100%);
    --block-bg-transparent: linear-gradient(0deg, transparent 0%, #8cffc8 20%, #8cffc8 50%, #8cffc8 80%, transparent 100%);
    --block-bg-transparent--accent: linear-gradient(0deg, transparent 0%, var(--accent) 20%, var(--accent) 50%, var(--accent) 80%, transparent 100%);
    --color-text: var(--black);
    --accent-text: var(--white);
    --color-text-button: var(--color-text);
    --svg-background: var(--color-theme__groen-2);
    --svg-text: var(--black);
    --accent: var(--svg-background);
    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--color-theme__groen-1))
  }

  [data-theme=groen] .pagina :is(header, main) {
    background-color: var(--body-bg-page)
  }

  [data-theme=groen] dialog {
    color: var(--white)
  }

  [data-theme=peach] {
    --body-bg: var(--color-theme__peach-1);
    --header-bg: var(--color-theme__peach-3);
    --body-bg-page: var(--grey);
    --block-bg: var(--color-theme__peach-3);
    --block-bg-gradient: linear-gradient(0deg, #ff8a8f 7%, var(--grey) 100%);
    --block-bg-double__gradient: linear-gradient(0deg, #ff8a8f 0%, var(--grey) 20%, var(--grey) 50%, var(--grey) 80%, #ff8a8f 100%);
    --block-bg-double__gradient_variant: linear-gradient(0deg, var(--grey) 0%, #ff8a8f20%, #ff8a8f 50%, #ff8a8f 80%, var(--grey) 100%);
    --block-bg-transparent: linear-gradient(0deg, transparent 0%, #ff8a8f 20%, #ff8a8f 50%, #ff8a8f 80%, transparent 100%);
    --block-bg-transparent--accent: linear-gradient(0deg, transparent 0%, var(--accent) 20%, var(--accent) 50%, var(--accent) 80%, transparent 100%);
    --color-text: var(--black);
    --accent-text: var(--white);
    --color-text-button: var(--color-text);
    --svg-background: var(--color-theme__peach-2);
    --svg-text: var(--black);
    --accent: var(--svg-background);
    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--color-theme__peach-1))
  }

  [data-theme=peach] .pagina :is(header, main) {
    background-color: var(--body-bg-page)
  }

  [data-theme=paars] {
    --body-bg: var(--color-theme__rood-1);
    --body-bg-page: var(--grey);
    --header-bg: var(--color-theme__rood-3);
    --block-bg: var(--color-theme__rood-3);
    --block-bg-gradient: linear-gradient(0deg, #b20058 7%, var(--grey) 100%);
    --block-bg-double__gradient: linear-gradient(0deg, transparent 0%, #b20058 10%, #b20058 50%, #b20058 90%, transparent 100%);
    --block-bg-double__gradient_variant: linear-gradient(0deg, #b20058 0%, #1f2a8a 10%, #1f2a8a 50%, #1f2a8a 90%, #b20058 100%);
    --block-bg-transparent: linear-gradient(0deg, transparent 0%, #1f2a8a 20%, #1f2a8a 50%, #1f2a8a 80%, transparent 100%);
    --block-bg-transparent--accent: linear-gradient(0deg, transparent 0%, var(--accent) 20%, var(--accent) 50%, var(--accent) 80%, transparent 100%);
    --color-text: var(--white);
    --accent-text: var(--black);
    --color-text-button: var(--color-text);
    --svg-background: var(--color-theme__rood-2);
    --svg-text: var(--white);
    --accent: var(--svg-background);
    --accent-hover: var(--color-theme__rood-1)
  }

  [data-theme=paars] .pagina :is(header, main) {
    background-color: var(--body-bg-page)
  }

  [data-theme=paars] .pagina {
    --svg-text: var(--black);
    --color-text: var(--black)
  }

  [data-theme=geel] {
    --body-bg: var(--color-theme__geel-1);
    --header-bg: var(--color-theme__geel-3);
    --body-bg-page: var(--grey);
    --block-bg: var(--color-theme__geel-3);
    --block-bg-gradient: linear-gradient(0deg, #ff370b 7%, var(--grey) 100%);
    --block-bg-double__gradient: linear-gradient(0deg, #fb0 0%, #ff370b 10%, #ff370b 50%, #ff370b 90%, #fb0 100%);
    --block-bg-double__gradient_variant: linear-gradient(0deg, #ff370b 0%, #fb0 10%, #fb0 50%, #fb0 90%, #ff370b100%);
    --block-bg-transparent: linear-gradient(0deg, transparent 0%, #ff370b 20%, #ff370b50%, #ff370b 80%, transparent 100%);
    --block-bg-transparent--accent: linear-gradient(0deg, transparent 0%, var(--accent) 20%, var(--accent) 50%, var(--accent) 80%, transparent 100%);
    --color-text: var(--black);
    --accent-text: var(--white);
    --color-text-button: var(--color-text);
    --svg-background: var(--color-theme__geel-2);
    --svg-text: var(--black);
    --accent: var(--svg-background);
    --accent-hover: color-mix(in srgb, var(--accent) 80%, var(--color-theme__geel-1))
  }

  [data-theme=geel] .pagina :is(header, main) {
    background-color: var(--body-bg-page)
  }
}

@layer typography {
  @font-face {
    font-family: Inter;
    src: url(../fonts/Inter-VariableFont_opsz,wght.ttf)format("truetype");
    font-weight: 400 900;
    font-display: swap;
    font-style: normal
  }

  @font-face {
    font-family: garamond;
    src: url(../fonts/EBGaramond-VariableFont_wght.ttf)format("truetype");
    font-weight: 100 900;
    font-display: swap;
    font-style: normal
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 700;
    font-family: var(--font-stack-header);
    word-break: break-word;
    line-height: var(--component-heading-line-height);
    max-inline-size: 100%
  }

  :is(p, li, ul, ol) {
    font-family: var(--font-stack-body);
    font-weight: 400;
    font-size: var(--step-0);
    line-height: var(--body-line-height);
    word-break: break-word
  }

  p:last-child {
    margin-block-end: 0
  }

  p>a {
    font-size: inherit
  }

  p>a:is(:hover, :focus) {
    text-underline-offset: .2em
  }

  a {
    text-underline-offset: .3em;
    transition: all .2s
  }

  a:is(:hover, :focus) {
    text-underline-offset: .3em
  }

  article :is(ul, ol) {
    margin-inline: 1.1rem;
    padding-inline: 0
  }

  figcaption {
    font-family: var(--font-stack-body)
  }
}

@layer setup {
  :root {
    --text-base-size: 1rem;
    --body-line-height: 1.5;
    --heading-line-height: 1.2;
    --step--2: clamp(.7813rem, .775rem + .0278vw, .8rem);
    --step--1: clamp(.9375rem, .9167rem + .0956vw, 1.2rem);
    --step-0: clamp(1.125rem, 1.0833rem + .1852vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2792rem + .3148vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.509rem + .4935vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.7782rem + .7369vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0931rem + 1.0651vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4609rem + 1.5042vw, 3.8147rem);
    --space-3xs: clamp(.3125rem, .3125rem + 0vw, .3125rem);
    --space-2xs: clamp(.5625rem, .5417rem + .0926vw, .625rem);
    --space-xs: clamp(.875rem, .8542rem + .0926vw, .9375rem);
    --space-s: clamp(1.125rem, 1.0833rem + .1852vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.625rem + .2778vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.1667rem + .3704vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.25rem + .5556vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3333rem + .7407vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.5rem + 1.1111vw, 7.5rem);
    --space-3xs-2xs: clamp(.3125rem, .2083rem + .463vw, .625rem);
    --space-2xs-xs: clamp(.5625rem, .4375rem + .5556vw, .9375rem);
    --space-xs-s: clamp(.875rem, .75rem + .5556vw, 1.25rem);
    --space-s-m: clamp(1.125rem, .875rem + 1.1111vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4167rem + 1.2037vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.75rem + 2.2222vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8333rem + 2.4074vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.5rem + 4.4444vw, 7.5rem);
    --space-s-l: clamp(1.125rem, .6667rem + 2.037vw, 2.5rem);
    --component-padding: var(--space-s);
    --component-body-line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
    --component-heading-line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
    --line-height-multiplier: 1;
    --text-vspace-multiplier: 1;
    --dynamic-line-height: calc(.25rem + 1rem);
    --color-bg: white;
    --color-contrast-lower: #f2f2f2;
    --color-contrast-low: #d3d3d4;
    --color-contrast-medium: #79797c;
    --color-contrast-high: #313135;
    --color-contrast-higher: black;
    --font-stack-header: "Inter", sans-serif;
    --font-stack-body: "Inter", sans-serif;
    --font-stack-serif: "garamond", serif;
    --font-optical-sizing: auto;
    --font-style: normal;
    --page-width: min(90rem, 100vw - 4rem);
    --page-width-narrow: min(75rem, 100vw - 4rem);
    --radius-s: .25rem;
    --radius-m: .5rem;
    --radius-l: 1rem;
    --radius-xl: 2rem;
    --max-z-index: calc(infinity)
  }

  @keyframes present-yourself {
    to {
      opacity: 1
    }
  }

  figure {
    margin: 0;
    padding: 0
  }

  figure img {
    object-fit: cover;
    min-width: 100%;
    height: auto
  }
}

@layer grid {
  :where(html) .grid-three-column {
    row-gap: var(--space-l);
    grid-column: 1/-1;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    display: grid
  }

  @media (width>=1024px) {
    :where(html) .grid-three-column {
      grid-template-columns: repeat(3, minmax(400px, 1fr))
    }
  }
}

@layer general {
  html {
    font-size: var(--text-base-size);
    font-optical-sizing: var(--font-optical-sizing);
    font-style: var(--font-style);
    scroll-behavior: smooth
  }

  body {
    padding: var(--component-padding) 0 var(--component-padding) var(--component-padding);
    background: var(--body-bg, #fff);
    color: var(--black);
    margin: 0;
    position: relative
  }

  .container {
    inline-size: var(--page-width);
    margin-inline: auto
  }

  .background {
    z-index: 0;
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 25%
  }

  .background:after {
    content: "";
    mix-blend-mode: screen;
    opacity: 1;
    z-index: -1;
    background-image: url(../img/bg-bottom.png);
    background-position: right 80px bottom 400px;
    background-repeat: no-repeat;
    background-size: auto;
    position: absolute;
    inset: 0
  }

  [data-theme=paars] .background {
    background-image: url(../img/WU-HEADER-3.webp)
  }

  @media (width<768px) {
    [data-theme=paars] .background {
      background-image: url(../img/WU-HEADER-TABLET-3.webp)
    }
  }

  [data-theme=groen] .background {
    background-image: url(../img/WU-HEADER-4.webp)
  }

  @media (width<768px) {
    [data-theme=groen] .background {
      background-image: url(../img/WU-HEADER-TABLET-4.webp)
    }
  }

  [data-theme=peach] .background {
    background-image: url(../img/WU-HEADER-1.webp)
  }

  @media (width<768px) {
    [data-theme=peach] .background {
      background-image: url(../img/WU-HEADER-TABLET-1.webp)
    }
  }

  [data-theme=geel] .background {
    background-image: url(../img/WU-HEADER-2.webp)
  }

  @media (width<768px) {
    [data-theme=geel] .background {
      background-image: url(../img/WU-HEADER-TABLET-2.webp)
    }
  }
}

@layer header {
  :where(html) header {
    flex-direction: row;
    justify-content: space-between;
    display: flex
  }

  :where(html) header .logo {
    background: linear-gradient(319deg, transparent 61.5%, transparent 70.5%, var(--body-bg) 61.5%, var(--body-bg));
    max-width: 200px
  }

  :where(html) header .logo svg {
    margin-inline-start: -20px;
    height: 72px !important
  }

  @media (width>=600px) {
    :where(html) header .logo {
      background: linear-gradient(319deg, transparent 65.5%, transparent 65.5%, var(--body-bg) 65.5%, var(--body-bg));
      max-width: 400px
    }

    :where(html) header .logo svg {
      margin-inline-start: 0;
      height: unset !important
    }
  }

  :where(html) .sub-header {
    padding-inline: var(--space-m);
    padding-block: var(--space-s);
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    display: grid
  }

  :where(html) .sub-header h1 {
    color: var(--color-text);
    font-size: var(--step-4);
    grid-column: 1/-1
  }

  @media (width>=600px) {
    :where(html) .sub-header h1 {
      max-inline-size: 30ch;
      font-size: var(--step-5);
      grid-column: 1/3
    }
  }

  :where(html) .sub-header .date {
    font-size: var(--step-1);
    color: var(--color-text);
    grid-area: 2/1/auto/-1;
    font-weight: 700
  }

  @media (width>=600px) {
    :where(html) .sub-header .date {
      font-size: var(--step-2);
      grid-area: 2/1/auto/3
    }
  }

  :where(html) .sub-header .intro {
    font-size: var(--step-1);
    color: var(--color-text);
    grid-area: 2/1/auto/-1
  }

  @media (width>=600px) {
    :where(html) .sub-header .intro {
      font-size: var(--step-2);
      grid-area: 2/2/auto/4;
      place-self: end;
      max-inline-size: 50ch
    }
  }

  :where(html) .sub-header:has(.date) .intro {
    text-indent: 4ch;
    grid-row: 3
  }

  @media (width>=600px) {
    :where(html) .sub-header:has(.date) .intro {
      text-indent: 8ch
    }
  }
}

@layer main {
  .arrow-link {
    color: currentColor;
    font-weight: 700;
    font-family: var(--font-stack-body);
    align-items: center;
    text-decoration-color: transparent;
    display: flex
  }

  .arrow-link:before {
    content: "";
    block-size: 20px;
    inline-size: 20px;
    background-color: var(--color-text);
    margin-inline-end: var(--space-2xs);
    display: inline-flex;
    -webkit-mask: url(../img/arrow-right.svg) 0 0/contain no-repeat;
    mask: url(../img/arrow-right.svg) 0 0/contain no-repeat
  }

  .arrow-link:is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  .section-head {
    inline-size: 100%;
    color: var(--color-text);
    padding-inline: var(--space-m);
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    display: flex
  }

  @media (width>=600px) {
    .section-head {
      flex-direction: row;
      align-items: center
    }
  }

  .tekst {
    padding: var(--space-m)
  }

  .tekst :is(.date, .meta) {
    font-size: var(--step--1);
    margin-block-start: 0
  }

  .tekst .date {
    font-weight: 700
  }

  .tekst h3 {
    font-size: var(--step-3);
    margin-block: var(--space-3xs) 0
  }

  .tekst h3 a {
    text-underline-offset: 5px;
    text-decoration-color: transparent
  }

  .tekst h3 a:is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  .tekst h3+p {
    font-size: var(--step--1);
    font-weight: 500
  }

  main {
    min-block-size: 100dvh;
    padding-block-end: calc(2 * var(--space-3xl))
  }

  body:not(.home) main {
    margin-block-end: 0;
    padding-block-end: 0
  }

  .agenda {
    padding-block: var(--space-3xl);
    background: var(--block-bg-double__gradient);
    color: var(--color-text);
    flex-direction: column;
    display: flex
  }

  .agenda header {
    gap: var(--space-3xs)
  }

  @media (width>=600px) {
    .agenda header {
      gap: unset
    }
  }

  .agenda header h2 {
    font-size: var(--step-4);
    margin-bottom: var(--space-m)
  }

  .agenda header a {
    font-size: var(--step-1)
  }

  .agenda .agenda__items {
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    display: grid
  }

  @media (width>=680px) {
    .agenda .agenda__items {
      gap: 0
    }
  }

  .agenda .agenda__items .agenda__item figure {
    margin-block-end: var(--space-s);
    position: relative
  }

  .agenda .agenda__items .agenda__item figure:after {
    content: "";
    filter: brightness(1.5);
    opacity: .5;
    background: url(/assets/img/mask.svg) 50%/cover no-repeat;
    position: absolute;
    inset: 0
  }

  @media (width>=520px) {
    .agenda .agenda__items .agenda__item:nth-child(odd) {
      margin-block-start: var(--space-l)
    }
  }

  .agenda .agenda__items:has(>.agenda__item:only-child) {
    grid-template-columns: 1fr
  }

  .agenda .agenda__items:has(>.agenda__item:only-child) .agenda__item {
    max-width: 600px
  }

  .discover {
    color: var(--color-text);
    flex-direction: column;
    display: flex
  }

  .discover header h2 {
    font-size: var(--step-3);
    margin-bottom: var(--space-m)
  }

  .discover header a {
    font-size: var(--step-1)
  }

  .discover .card-grid {
    grid-template-columns: repeat(6, 1fr);
    row-gap: 1.5rem;
    display: grid
  }

  .discover .card {
    grid-row: span 3;
    display: grid
  }

  .discover .card:is(:hover, :focus-within) a {
    text-decoration-color: currentColor
  }

  .discover .card:nth-child(-n+2) {
    grid-column: span 3
  }

  .discover .card:nth-child(n+3):nth-child(-n+5) {
    grid-column: span 2
  }

  .discover figure {
    aspect-ratio: 3/2;
    width: 100%;
    display: block;
    position: relative
  }

  .discover figure img {
    object-fit: cover;
    width: 100%;
    height: 100%
  }

  .discover .card:nth-child(-n+2) figure {
    aspect-ratio: 4/3;
    inline-size: 100%;
    overflow: hidden
  }

  @media (width<=900px) {
    .discover .card-grid {
      grid-template-columns: 1fr
    }

    .discover .card {
      grid-column: span 1
    }
  }

  .video {
    flex-direction: column;
    margin-block-start: var(--space-2xl);
    display: flex
  }

  .video header {
    inline-size: 100%;
    color: var(--color-text);
    padding-inline: var(--space-m);
    flex-direction: column;
    order: 2;
    justify-content: space-between;
    align-items: flex-start;
    display: flex
  }

  .video header h2 {
    font-size: var(--step-3)
  }

  .video header p {
    margin-bottom: var(--space-m)
  }

  .video header a {
    font-size: var(--step-0);
    font-weight: 700;
    text-decoration-color: transparent
  }

  .video header a:is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  @media (width>=1024px) {
    .video header :is(h2, p) {
      max-inline-size: 75%
    }
  }

  .video iframe {
    aspect-ratio: 16/9;
    block-size: auto;
    inline-size: 100%;
    max-inline-size: 100%
  }

  .two-column {
    background: var(--color-theme__rood-2)
  }

  .two-column * {
    font-family: var(--font-stack-body)
  }

  .two-column .two-column__content {
    grid-template-columns: 1fr;
    display: grid
  }

  @media (width>=1024px) {
    .two-column .two-column__content {
      grid-template-columns: 1fr 1fr
    }
  }

  .two-column .two-column__item {
    display: grid;
    position: relative;
    overflow: hidden
  }

  .two-column .two-column__item figure {
    aspect-ratio: 3/2;
    width: 100%;
    overflow: hidden
  }

  .two-column .two-column__item figure img {
    object-fit: cover;
    width: 100%;
    height: 100%
  }

  .two-column .two-column__item .tekst {
    color: var(--black);
    z-index: 1;
    place-self: center;
    position: relative
  }

  @media (width>=1024px) {
    .two-column .two-column__item .tekst {
      padding: var(--space-xl)
    }
  }

  .two-column .two-column__item .tekst .date {
    font-size: var(--step--1);
    margin-block-end: 0;
    font-weight: 700
  }

  .two-column .two-column__item .tekst h3 {
    font-size: var(--step-3);
    margin-block-end: var(--space-m)
  }

  .two-column .two-column__item .tekst h3+p {
    font-size: var(--step--1)
  }

  .two-column .two-column__item .tekst p {
    margin-block-start: 0
  }

  .two-column .two-column__item .tekst .btn {
    margin-top: var(--space-m);
    background-color: var(--white);
    color: var(--black);
    font-weight: 700;
    font-family: var(--font-stack-body);
    z-index: 1001;
    border-radius: 40px;
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block
  }

  .two-column .two-column__item .tekst .btn:is(:hover, :focus) {
    background-color: var(--color-theme__rood-1);
    color: var(--white)
  }

  .two-column .two-column__item:has(.tekst) {
    background: url(../img/arrow-right-45deg.svg) no-repeat calc(100% - var(--component-padding)) var(--component-padding) / 10%;
    position: relative
  }

  .deco {
    pointer-events: none;
    mix-blend-mode: color-burn;
    background-repeat: no-repeat;
    background-size: 70%;
    animation-play-state: paused;
    position: absolute;
    inset: 0
  }

  .deco--1 {
    background-image: url(../img/deco-t.png);
    animation: 30s linear infinite paused spin;
    inset: -20% 0 0
  }

  .deco--2 {
    background-image: url(../img/deco-r.png);
    background-size: 100%;
    animation: 50s linear infinite reverse paused spin;
    inset: 40% -20% -50% 50%
  }

  .deco--3 {
    background-image: url(../img/deco-e.png);
    background-position: 50%;
    animation: 40s linear infinite paused spin
  }

  .two-column:hover .deco {
    animation-play-state: running
  }

  @keyframes spin {
    to {
      transform: rotate(360deg)
    }
  }

  .home .slider:has(figure) {
    background: var(--block-bg-transparent)
  }

  .home .slider:has(figure) .gasten__info:has(.fotograaf__name) {
    margin: 0;
    padding-block: 0 !important
  }

  .home .slider:has(figure) .gasten__info:has(.fotograaf__name) p {
    font-size: var(--step--2);
    color: var(--color-text);
    margin-inline-start: var(--component-padding);
    font-weight: 700
  }

  .home .slider:has(figure) .gasten__item:has(.fotograaf__name):is(:hover, :focus-within) p {
    color: var(--accent-text)
  }

  .slider header {
    column-gap: var(--space-m);
    color: var(--color-text);
    padding-inline: var(--space-m);
    grid-template-columns: 1fr;
    margin-block-start: var(--space-2xl);
    display: grid
  }

  @media (width>=1024px) {
    .slider header {
      grid-template-rows: auto;
      grid-template-columns: 2fr 1fr
    }

    .slider header h2 {
      font-size: var(--step-3);
      grid-area: 1/1/2/-1;
      font-weight: 700
    }

    .slider header p {
      font-size: var(--step-0);
      grid-area: 2/1/3/2;
      max-inline-size: 50ch
    }

    .slider header a {
      font-size: var(--step-1);
      grid-area: 1/2/2/3;
      place-self: end
    }

    .slider header .gasten__controls {
      grid-area: 2/2/3/3
    }
  }

  .pagina .block:not(.slider) header {
    padding-inline: var(--space-m);
    padding-block-start: var(--space-l)
  }

  @media (width>=768px) {
    .pagina .block:not(.slider) header {
      padding-inline: var(--space-3xl)
    }
  }

  .pagina .block:not(.slider) header h1 {
    font-size: var(--step-5);
    margin-block-end: var(--space-m)
  }

  .pagina .block:not(.slider) header h1+p {
    max-width: 60ch
  }

  .pagina.content .block:not(.slider) header {
    padding-inline-start: var(--space-m) !important
  }

  .pagina:is(.programma, .archief, .deelnemers, .discover-page, .zoeken) .block:first-of-type {
    position: relative
  }

  .pagina:is(.programma, .archief, .deelnemers, .discover-page, .zoeken) .block:first-of-type:before {
    content: "";
    top: var(--deco-top, -12vh);
    inline-size: var(--deco-w);
    block-size: var(--deco-h);
    background-image: var(--deco-img);
    z-index: 0;
    pointer-events: none;
    background-repeat: no-repeat;
    position: absolute;
    right: 0
  }

  .pagina.programma {
    --deco-w: 509px;
    --deco-h: 851px;
    --deco-top: -5vh;
    --deco-img: url(../img/letter_r_rood.png)
  }

  .pagina.programma .two-column {
    grid-column: 1/-1
  }

  .pagina.archief {
    --deco-w: 495px;
    --deco-h: 1435px;
    --deco-img: url(../img/letter_ww_rood.png)
  }

  .pagina.deelnemers {
    --deco-w: 644px;
    --deco-h: 1085px;
    --deco-img: url(../img/letter_w_rood.png)
  }

  .pagina.zoeken {
    --deco-w: 644px;
    --deco-h: 1085px;
    --deco-img: url(../img/letter_w_rood.png)
  }

  .pagina.zoeken .block header:has(h1) {
    margin-block-end: var(--space-2xl)
  }

  .pagina.discover-page {
    --deco-w: 644px;
    --deco-h: 1085px;
    --deco-img: url(../img/letter_w_rood.png)
  }

  .pagina.discover-page .block header:has(h1) {
    margin-block-end: var(--space-xs)
  }

  .pagina.discover-page .two-column {
    margin-block: var(--space-xl)
  }

  .pagina:is(.discover-page-detail, .content, .event) main {
    background: url(../img/letter_r_rood.png) 100% 100svh no-repeat;
    background-color: var(--body-bg-page)
  }

  .pagina:is(.discover-page-detail, .content, .event):has(.grid-three-column) main:after {
    content: "";
    z-index: 0;
    background: url(../img/letter_w_rood_V2.png) no-repeat;
    width: 603px;
    height: 1042px;
    position: absolute;
    top: 0;
    right: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) {
    gap: var(--space-m);
    grid-template-columns: repeat(12, 1fr);
    display: grid
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider):has(.full-width):last-of-type div.full-width {
    margin-block-end: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider):has(.paragraph) {
    margin-block: var(--space-l)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) header {
    flex-direction: column;
    grid-column: 1/-1
  }

  @media (width>=1025px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) header {
      grid-column: 2/-1
    }

    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) header figure {
      min-width: 800px
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) header h1 {
    max-width: 40ch
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) header .meta {
    grid-column: 2/-1
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider):has(figure) {
    margin-block: var(--space-2xl)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider):has(.gasten__item) {
    margin-block: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure {
    grid-area: 1/1/auto/-1
  }

  @media (width>=1025px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure {
      grid-column: 6/-1
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure img {
    order: 2;
    inline-size: auto
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure figcaption {
    border-top: 0;
    margin-block-start: var(--space-3xs);
    margin-inline-start: var(--space-l);
    padding-block-start: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figcaption {
    border-top: 1px solid var(--black);
    max-inline-size: 200px;
    font-size: var(--step--2);
    grid-area: 2/2/auto/8;
    padding-block-start: var(--space-2xs)
  }

  @media (width>=680px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figcaption {
      grid-area: 1/4/auto/6;
      margin-block-start: var(--space-m)
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) {
    grid-area: 1/1/auto/-1
  }

  @media (width>=680px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) {
      grid-column: 4/-1
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) {
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
    overflow: hidden
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) img {
    order: 1
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) figcaption {
    order: 2
  }

  @media (width>=680px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) {
      flex-direction: row
    }

    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) img {
      max-block-size: 900px;
      min-inline-size: unset;
      order: 2;
      inline-size: calc(100% - 200px) !important
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) figcaption.side {
    min-inline-size: 200px;
    font-size: var(--step--2);
    order: 2;
    padding-block-start: var(--space-2xs)
  }

  @media (width>=680px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) figure:has(figcaption.side) figcaption.side {
      border-top: 1px solid var(--black);
      order: 1;
      margin-block-start: var(--space-m)
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover {
    background-color: var(--accent);
    margin-block-end: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover * {
    color: var(--accent-text)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover header {
    background: linear-gradient(0deg, var(--accent) 6%, var(--grey) 100%);
    grid-column: 1/-1;
    align-items: flex-start;
    padding-block-start: var(--space-m)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover .card-grid {
    grid-column: 1/-1
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover .card-grid .card {
    grid-column: span 2
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover .card-grid .card figure {
    aspect-ratio: 3/2;
    inline-size: 100%;
    position: relative;
    overflow: hidden
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).discover .card-grid .card h3 {
    font-size: var(--step-1)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show {
    border-block-start: 1px solid var(--black);
    padding-block: var(--component-padding);
    flex-direction: column;
    margin-block-start: var(--space-m);
    display: flex
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show:last-of-type {
    border-block-end: 1px solid var(--black)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show h4 {
    font-size: var(--step-2);
    margin-block-start: var(--space-s)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .meta {
    font-size: var(--step--1);
    color: var(--color-text);
    margin-block-start: 0;
    font-weight: 700;
    display: flex
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .meta span:not(:last-child):after {
    content: "|";
    margin-inline: var(--space-2xs)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .link__group {
    gap: var(--space-m);
    flex-direction: row;
    margin-inline: auto 0;
    display: flex
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .link__group a {
    color: var(--black);
    text-decoration-color: transparent
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .link__group a:not(.disabled):before {
    content: ""
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph .show .link__group a:not(.disabled):is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph blockquote p:not(.quotee) {
    font-family: var(--font-stack-serif);
    font-size: var(--step-3)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph blockquote p.quotee {
    font-size: var(--step--1);
    flex-direction: column;
    display: flex
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .paragraph blockquote p.quotee span:first-of-type {
    font-weight: 700
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) :is(h2, h3) {
    font-size: var(--step-3)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).slider header {
    grid-column: 1/-1
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).video iframe {
    grid-column: 1/-1;
    max-width: 100%
  }

  @media (width>=680px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider).video iframe {
      grid-column: 1/8
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width {
    align-items: center;
    gap: var(--space-m);
    margin-block: var(--space-2xl);
    padding-block: var(--space-l);
    padding-inline: var(--component-padding);
    background-color: var(--color-theme__rood-2);
    flex-wrap: wrap;
    grid-column: 1/-1;
    display: flex;
    position: relative;
    overflow: hidden
  }

  @media (width>=800px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width {
      padding-inline: var(--space-3xl)
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width:after {
    content: "";
    mix-blend-mode: color-dodge;
    z-index: 0;
    background: url(../img/letter_w_groen.png) 100% no-repeat;
    block-size: 1300px;
    inline-size: 1013px;
    position: absolute;
    right: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .tekst {
    z-index: 1;
    inline-size: 100%
  }

  @media (width>=800px) {
    .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .tekst {
      inline-size: min(70ch, 100%)
    }
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .tekst h4 {
    font-size: var(--step-1);
    margin-block-start: 0
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .tekst p {
    font-size: var(--step--1)
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .btn {
    padding-block: var(--space-3xs);
    padding-inline: var(--space-m);
    background-color: var(--white);
    color: var(--color-text);
    font-weight: 700;
    font-family: var(--font-stack-body);
    z-index: 1;
    border-radius: 40px;
    text-decoration-color: transparent
  }

  .pagina:is(.discover-page-detail, .content, .event) .block:not(.slider) .full-width .btn:is(:hover, :focus) {
    background-color: var(--accent-hover);
    color: var(--white)
  }

  .content h1+p {
    font-size: var(--step-1)
  }

  .block.discover .card {
    transition: all .3s ease-in;
    position: relative
  }

  .block.discover .card h3>a {
    position: static
  }

  .block.discover .card h3>a:before {
    content: "";
    z-index: 102;
    position: absolute;
    inset: 0
  }

  .block.discover .card:is(:hover, :focus-within) {
    background-color: var(--body-bg-page)
  }

  .block.discover .card:is(:hover, :focus-within) :is(h3, p) {
    color: var(--black)
  }

  .block.discover .card:is(:hover, :focus-within) {
    cursor: pointer
  }

  .block.discover .card:is(:hover, :focus-within) h3>a {
    text-decoration-color: currentColor !important
  }

  .block.discover .card:is(:hover, :focus-within) img {
    filter: blur(9.3px)
  }

  .block.discover .card:is(:hover, :focus-within) figure:before {
    content: "";
    z-index: 100;
    background: linear-gradient(0deg, var(--body-bg-page) 1%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    width: 100%;
    height: 30%;
    position: absolute;
    bottom: 0
  }

  .block.discover .card:is(:hover, :focus-within) figure:after {
    content: "";
    z-index: 101;
    pointer-events: none;
    background-image: url(../img/cards_arrow.svg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 15%;
    position: absolute;
    inset: 0
  }

  .block.discover .card:is(:hover, :focus-within):nth-child(n+3):nth-child(-n+5) figure:after {
    background-size: 10%
  }

  .block.discover .card:is(:hover, :focus-within) figure:before {
    pointer-events: none
  }

  .block.discover .card:is(:hover, :focus-within) figure:after {
    pointer-events: none
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block {
    gap: var(--space-m);
    grid-template-columns: repeat(12, 1fr);
    display: grid
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block:has(header) {
    margin-block-start: 0 !important
  }

  @media (width>=1400px) {
    :is(.pagina.event, .pagina.discover-page-detail) .block header {
      display: grid;
      grid-column: 1/-1 !important;
      grid-template-columns: 5fr 4fr !important;
      padding-inline-end: 0 !important
    }

    :is(.pagina.event, .pagina.discover-page-detail) .block header .tekst {
      min-width: 40ch;
      max-width: 100%;
      grid-column: 1/5 !important
    }

    :is(.pagina.event, .pagina.discover-page-detail) .block header figure {
      margin-block: unset;
      grid-row: 1;
      grid-column: 6/9 !important
    }

    :is(.pagina.event, .pagina.discover-page-detail) .block header figure figcaption {
      inline-size: 100%
    }
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block .btn {
    margin-top: var(--space-m);
    padding: 10px var(--space-m);
    background-color: var(--accent);
    color: var(--accent-text);
    font-weight: 700;
    font-family: var(--font-stack-body);
    z-index: 1001;
    border-radius: 40px;
    text-decoration: none;
    display: inline-block
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block .btn:is(:hover, :focus) {
    background-color: var(--accent-hover);
    color: var(--color-text-button)
  }

  :is(.pagina.event, .pagina.discover-page-detail) .video {
    position: relative
  }

  :is(.pagina.event, .pagina.discover-page-detail) .video:before {
    content: "";
    z-index: 0;
    background: url(../img/letter_w_rood_left.png) no-repeat;
    block-size: 900px;
    position: absolute;
    top: -350px;
    left: 0
  }

  :is(.pagina.event, .pagina.discover-page-detail) .video iframe {
    z-index: 1;
    grid-column: 1/-1
  }

  @media (width>=680px) {
    :is(.pagina.event, .pagina.discover-page-detail) .video iframe {
      grid-column: 1/10
    }
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block:has(iframe)+.block {
    background: linear-gradient(0deg, var(--grey) 0%, var(--accent) 30%, var(--accent) 70%, var(--grey) 100%);
    position: relative
  }

  :is(.pagina.event, .pagina.discover-page-detail) .block:has(iframe)+.block:after {
    content: "";
    background-image: url(../img/letter_group.png);
    block-size: 1168px;
    inline-size: 539px;
    position: absolute;
    top: -500px;
    right: 0
  }

  :is([data-theme=groen], [data-theme=peach]) .block:has(iframe)+.block * {
    color: var(--black)
  }

  :is([data-theme=groen], [data-theme=peach]) .block:has(iframe)+.block table {
    color: var(--white)
  }

  .block .table {
    margin-block: var(--space-xl);
    z-index: 3;
    scrollbar-color: #999 transparent;
    position: relative;
    overflow-x: scroll
  }

  .block .table .table::-webkit-scrollbar {
    height: 8px
  }

  .block .table .table::-webkit-scrollbar-track {
    background: 0 0
  }

  .block .table .table::-webkit-scrollbar-thumb {
    background: #999
  }

  .block .table table {
    border-collapse: collapse;
    inline-size: 100%;
    font-family: var(--font-stack-body);
    margin-block-start: var(--space-m)
  }

  .block .table table :is(td, th) {
    border-top: 1px solid var(--black);
    text-align: left;
    vertical-align: top;
    padding-block: var(--space-s);
    padding-inline: var(--space-m);
    line-height: 1.2lh
  }

  .block .table tr:last-of-type :is(td, th) {
    border-bottom: 1px solid var(--black)
  }

  .left {
    padding-inline: var(--space-m);
    grid-column: 1/-1
  }

  @media (width>=680px) {
    .left {
      grid-column: 2/8;
      padding-inline-start: var(--space-m)
    }
  }

  .right {
    padding-inline: var(--space-m);
    grid-column: 1/-1
  }

  @media (width>=680px) {
    .right {
      grid-column: 6/-1;
      margin-inline-end: 0;
      padding-inline-end: var(--space-m)
    }
  }

  .full {
    padding-inline: var(--space-m);
    grid-column: 1/-1
  }

  .full .filter__panel {
    inline-size: 60% !important
  }

  .full table th {
    border-top: 0 !important
  }

  .full .filter__panel {
    all: unset;
    margin-block: var(--space-m);
    padding-block-end: 0 !important
  }

  .pagination {
    grid-column: 1/-1
  }

  @media (width>768px) {
    .pagination {
      grid-column: 2/12
    }
  }

  .pagination ul {
    gap: var(--space-m);
    flex-flow: wrap;
    justify-content: center;
    margin: 0;
    padding: 0;
    display: flex
  }

  .pagination ul a {
    font-weight: 700;
    text-decoration-color: transparent
  }

  .pagination ul li :is(a, span) {
    padding-inline: var(--space-2xs);
    padding-block: var(--space-3xs)
  }

  .pagination ul li :is(a, span):is(:hover, :focus) {
    background-color: var(--accent-hover);
    color: var(--accent-text)
  }

  .pagination ul li.current-page span {
    background-color: var(--accent);
    color: var(--accent-text)
  }

  .gasten__item article {
    position: relative
  }

  .gasten__item-link {
    position: static !important
  }

  .gasten__item-link:before {
    content: "";
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0
  }

  .agenda__item {
    position: relative
  }

  .agenda__item h3 a {
    position: static
  }

  .agenda__item h3 a:before {
    content: "";
    position: absolute;
    inset: 0
  }
}

@layer tabs {
  .tabs {
    margin-block-start: var(--space-l)
  }

  .tabs__nav {
    margin-inline: var(--space-m);
    border-bottom: 1px solid;
    display: flex
  }

  @media (width>768px) {
    .tabs__nav {
      gap: var(--space-m);
      padding-inline: var(--space-m)
    }
  }

  .tabs__tab {
    cursor: pointer;
    color: var(--color-text);
    font-size: var(--step--1);
    font-family: var(--font-stack-body);
    padding-block-end: calc(var(--space-3xs) / 10);
    padding-inline: var(--space-xs);
    background: 0 0;
    border: none;
    border-bottom: 1px solid transparent;
    margin-bottom: -1px;
    transition: border-color .15s
  }

  @media (width>768px) {
    .tabs__tab {
      font-size: var(--step-0)
    }
  }

  .tabs__tab[aria-selected=true] {
    border-bottom-color: var(--black);
    color: var(--accent-text);
    background-color: var(--accent);
    border-top-left-radius: var(--space-2xs);
    border-top-right-radius: var(--space-2xs);
    font-weight: 700
  }

  .tabs__panel[hidden] {
    display: none
  }

  .filter__panel {
    padding-inline: var(--space-m);
    flex-wrap: wrap;
    grid-column: 1/-1;
    gap: 2.5rem 4rem;
    margin-block-end: var(--space-m);
    padding-block-end: var(--space-xl);
    display: flex
  }

  @media (width>=680px) {
    .filter__panel {
      grid-column: 2/3;
      margin-inline: 0
    }
  }

  .filter__panel .filter-group {
    border: 0;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    display: flex
  }

  .filter__panel .filter-label {
    font-size: var(--step-0);
    font-family: var(--font-stack-body);
    margin-block-end: var(--space-3xs);
    padding: 0
  }

  .filter__panel .filter-options {
    flex-wrap: wrap;
    gap: .75rem;
    display: flex
  }

  .filter__panel .filter-options input {
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden
  }

  .filter__panel .pill {
    padding: var(--space-3xs) var(--space-xs);
    border: 2px solid var(--accent);
    cursor: pointer;
    font-weight: 700;
    font-size: var(--step-0);
    background: 0 0;
    display: inline-block
  }

  .filter__panel .filter-options input:checked+.pill {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-text)
  }

  .filter__panel .filter-options input:focus-visible+.pill {
    outline: 2px solid var(--black);
    outline-offset: 2px
  }

  .tabs__panels {
    grid-template-columns: var(--space-2xl) 1fr var(--space-2xl);
    grid-auto-rows: auto;
    margin-block-start: var(--space-s);
    padding-block-end: var(--space-xl);
    display: grid
  }

  .tabs__panel {
    grid-column: 1/-1;
    grid-template-columns: var(--space-2xl) 1fr var(--space-2xl);
    display: grid
  }

  .date__header {
    border-bottom: 1px solid var(--white);
    grid-column: 2/3;
    margin-block-end: var(--space-s);
    padding-block-end: var(--space-s)
  }

  .date__header h3 {
    font-size: var(--step-1)
  }

  .toggle__wrapper {
    justify-content: center;
    gap: var(--space-3xs);
    font-size: var(--step--1);
    font-family: var(--font-stack-body);
    margin-block-end: var(--space-m);
    margin-inline: auto 0;
    display: inline-flex
  }

  .toggle__wrapper .toggle__label:first-of-type {
    font-weight: 700
  }

  .toggle__wrapper:has(input:checked) .toggle__label:first-of-type {
    font-weight: 400
  }

  .toggle__wrapper:has(input:checked) .toggle__label:last-of-type {
    font-weight: 700
  }

  .switch {
    width: 60px;
    height: 30px;
    display: inline-block;
    position: relative
  }

  .switch input {
    opacity: 0;
    width: 0;
    height: 0
  }

  .toggle {
    cursor: pointer;
    background-color: var(--accent);
    transition: all .4s;
    position: absolute;
    inset: 0
  }

  .toggle:before {
    content: "";
    background-color: var(--body-bg-page);
    width: 22px;
    height: 22px;
    transition: all .4s;
    position: absolute;
    bottom: 4px;
    left: 4px
  }

  input:checked+.toggle {
    background-color: var(--accent)
  }

  input:focus+.toggle {
    box-shadow: 0 0 1px var(--accent)
  }

  input:checked+.toggle:before {
    transform: translate(28px)
  }

  .toggle.round {
    border-radius: 34px
  }

  .toggle.round:before {
    border-radius: 50%
  }

  .search__wrapper {
    border-top: 1px solid var(--black);
    min-width: 100%;
    padding-block: var(--space-m);
    padding-inline: var(--space-l)
  }

  .search__wrapper p {
    font-size: var(--step--1);
    margin-block-start: var(--space-m)
  }

  .search__wrapper .card {
    border-top: 1px solid var(--white);
    padding-block: var(--space-m);
    margin-block-start: var(--space-m)
  }

  .search__wrapper .card .card__meta {
    font-size: var(--step--1);
    margin-block-start: 0
  }

  .search__wrapper .card .card__title {
    font-size: var(--step-1);
    margin-block-start: var(--space-xs)
  }
}

@layer footer {
  :where(html) footer {
    background: var(--black);
    padding-block: var(--space-xl);
    color: var(--white);
    z-index: 2;
    flex-flow: wrap;
    justify-content: space-around;
    display: flex
  }

  @media (width<=730px) {
    :where(html) footer {
      flex-direction: column
    }
  }

  :where(html) footer .footer__content {
    margin-inline: var(--space-l)
  }

  @media (width<=730px) {
    :where(html) footer .footer__content {
      margin-block-end: var(--space-m)
    }
  }

  :where(html) footer .footer__content.full-width {
    border-top: 1px solid var(--white);
    flex: 1 2 100%;
    margin-block-start: var(--space-m);
    padding-block-start: var(--space-xs);
    display: block
  }

  :where(html) footer .footer__content.full-width ul {
    gap: var(--space-m);
    flex-flow: wrap;
    display: flex
  }

  :where(html) footer h4 {
    margin-block-end: var(--space-2xs)
  }

  :where(html) footer ul {
    margin: 0;
    padding: 0
  }

  :where(html) footer ul a {
    font-size: var(--step--2);
    color: var(--white);
    text-decoration-color: transparent
  }

  :where(html) footer ul a:is(:hover, :focus, .current) {
    text-decoration-color: currentColor
  }

  :where(html) .sub-footer {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) var(--space-m);
    background: var(--grey);
    flex-flow: wrap;
    display: flex
  }

  :where(html) .sub-footer span {
    aspect-ratio: 1;
    place-items: center;
    width: 6rem;
    display: grid
  }

  [data-theme=pagina] footer {
    margin-block-start: unset
  }
}

@layer slider {
  .gasten__controls {
    align-items: flex-end;
    gap: var(--space-m, 1rem);
    flex-direction: column;
    flex-shrink: 0;
    justify-content: end;
    display: flex
  }

  .gasten__nav {
    gap: var(--space-s, .75rem);
    display: flex
  }

  .gasten__nav-btn {
    color: inherit;
    cursor: pointer;
    background: 0 0;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 1.25rem;
    transition: opacity .15s
  }

  .gasten__nav-btn:hover {
    opacity: .6
  }

  .gasten__nav-btn:focus-visible {
    outline-offset: 2px;
    outline: 2px solid
  }

  .gasten__nav-btn:disabled {
    opacity: .25;
    cursor: default
  }

  .gasten__track-wrapper {
    padding-block-end: var(--space-2xl, 2rem);
    position: relative;
    -webkit-mask-image: linear-gradient(90deg, #000 0% 85%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0% 85%, transparent 100%)
  }

  .gasten__track {
    padding-inline: var(--component-padding, 2rem);
    padding-block: var(--space-s, .5rem);
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0;
    margin: 0;
    list-style: none;
    display: flex;
    overflow-x: auto
  }

  .gasten__track::-webkit-scrollbar {
    display: none
  }

  .gasten__item {
    flex: 0 0 var(--item-width, 22vw);
    scroll-snap-align: start;
    z-index: 1;
    opacity: 1;
    min-width: 180px;
    max-width: 320px;
    transition: opacity .4s
  }

  .gasten__item article {
    flex-direction: column;
    display: flex;
    position: relative
  }

  .gasten__item article:after {
    content: "";
    background: linear-gradient(0deg, var(--accent) 30%, rgba(255, 187, 0, 0) 100%);
    opacity: 0;
    block-size: 100%;
    inline-size: 100%;
    transition: opacity .4s var(--ease-3);
    pointer-events: none;
    position: absolute
  }

  .gasten__item svg {
    margin-block-start: var(--space-xs)
  }

  .gasten__item:has(blockquote) {
    flex: 0 0 700px;
    min-width: 700px;
    max-width: 700px
  }

  .gasten__item:has(blockquote) article:after {
    display: none
  }

  .gasten__item:has(blockquote) .gasten__info {
    flex-direction: column;
    align-items: flex-start;
    display: flex
  }

  .gasten__item:has(blockquote) .gasten__info p {
    color: var(--color-text);
    flex-direction: column;
    display: flex
  }

  .gasten__item:has(blockquote) .gasten__info p span:first-of-type {
    font-weight: 700
  }

  .gasten__item:has(blockquote) .gasten__info blockquote {
    margin-block-start: 0;
    margin-inline-start: 0
  }

  .gasten__item:has(blockquote) .gasten__info blockquote p {
    font-family: var(--font-stack-serif);
    font-size: var(--step-3);
    margin-block-start: 0;
    line-height: 1.3
  }

  .gasten__item[data-peek=true] {
    opacity: .35
  }

  .gasten__figure {
    aspect-ratio: 4/5;
    width: 100%;
    margin: 0;
    overflow: hidden
  }

  .gasten__figure img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform .4s;
    display: block
  }

  .gasten__item:is(:hover, :focus-within) article:after {
    opacity: 1
  }

  .gasten__item:is(:hover, :focus-within) svg path {
    fill: var(--accent-text)
  }

  .gasten__item:is(:hover, :focus-within) .gasten__figure img {
    pointer-events: none;
    transform: scale(1.04)
  }

  .gasten__item:is(:hover, :focus-within) .gasten__info {
    z-index: 10
  }

  .gasten__item:is(:hover, :focus-within) .gasten__info .gasten__name {
    color: var(--accent-text);
    text-decoration: underline
  }

  .gasten__info {
    padding-block: var(--space-s, .75rem);
    justify-content: space-between;
    align-items: center;
    padding-inline: 0;
    display: flex
  }

  .gasten__name {
    font-size: var(--step-0, 1rem);
    font-weight: 700
  }

  .gasten__item-link {
    color: var(--color-text);
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-inline: auto;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform .2s;
    display: flex
  }

  .gasten__item-link svg {
    transition: transform .2s
  }

  .gasten__item-link svg:hover svg {
    transform: translate(4px)
  }

  .gasten__item-link:focus-visible {
    outline-offset: 2px;
    border-radius: 2px;
    outline: 2px solid
  }

  @media (prefers-reduced-motion:reduce) {
    .gasten__track {
      scroll-behavior: auto
    }

    .gasten__item,
    .gasten__figure img,
    .gasten__item-link {
      transition: none !important
    }
  }

  @media (width<=1024px) {
    .gasten__item {
      flex: 0 0 30vw
    }
  }

  @media (width<=600px) {
    .gasten__header {
      gap: var(--space-s, .75rem);
      flex-direction: column
    }

    .gasten__controls {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%
    }

    .gasten__item {
      flex: 0 0 72vw
    }
  }

  .pagina.discover-page .slider {
    background: var(--block-bg-transparent--accent);
    padding-block: var(--space-l);
    margin-block: var(--space-l)
  }

  .pagina.discover-page .slider :is(header) {
    background-color: transparent
  }

  :is(.discover-page-detail, .event) .gasten__track-wrapper {
    grid-column: 1/-1
  }

  :is(.discover-page-detail, .event) .gasten__track-wrapper .gasten__item {
    --item-width: 500px;
    min-width: 180px;
    max-width: 500px;
    flex: 0 0 var(--item-width, 22vw) !important
  }

  :is(.discover-page-detail, .event) .gasten__figure {
    aspect-ratio: 4/3;
    width: 100%;
    margin: 0
  }

  :is(.discover-page-detail, .event) .gasten__info:has(.fotograaf__name) {
    padding-block: 0;
    padding-inline: var(--space-xs);
    justify-content: space-between;
    align-items: center;
    display: flex
  }

  :is(.discover-page-detail, .event) .gasten__info:has(.fotograaf__name) .fotograaf__name {
    font-size: var(--step--2);
    font-weight: 700
  }
}

@layer cards {
  :where(html) :where(.card a, .card__archief a, .filter__letters a, .gasten__letter-overview a) {
    color: inherit;
    text-decoration-color: transparent
  }

  :where(html) :where(.card a, .card__archief a, .filter__letters a, .gasten__letter-overview a):is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  :where(html) .link__group a.ticket__link {
    --btn-text: var(--accent-text);
    --btn-bg: var(--accent);
    background-color: var(--btn-bg);
    padding: var(--space-3xs) var(--space-s);
    z-index: 10;
    border-radius: 40px;
    text-decoration-color: transparent;
    color: var(--btn-text) !important
  }

  :where(html) .link__group a.ticket__link:is(:hover, :focus) {
    background-color: var(--accent-hover);
    text-decoration-color: transparent
  }

  :where(html) .card figure {
    grid-column: 1/2;
    inline-size: 100%;
    margin: 0;
    position: relative;
    overflow: hidden
  }

  :where(html) .card figure img {
    object-fit: cover;
    min-block-size: 100%;
    inline-size: 100%;
    display: block
  }

  :where(html) .card__archief {
    padding: var(--space-s);
    border-top: 1px solid var(--white);
    grid-column: 1/-1
  }

  @media (width>=680px) {
    :where(html) .card__archief {
      grid-column: 2/3
    }
  }

  :where(html) .card__archief .card__content {
    gap: var(--space-xs);
    flex-direction: column;
    display: flex
  }

  @media (width>=1024px) {
    :where(html) .card__archief .card__content {
      margin-inline: var(--space-xl)
    }
  }

  :where(html) .card__archief .card__content .card__meta {
    font-size: var(--step--1);
    color: var(--color-text);
    flex-direction: column;
    margin-block-start: 0;
    font-weight: 700;
    display: flex
  }

  @media (width>=680px) {
    :where(html) .card__archief .card__content .card__meta {
      font-size: var(--step-0);
      flex-direction: row
    }

    :where(html) .card__archief .card__content .card__meta span:not(:last-child):after {
      content: "|";
      margin-inline: var(--space-2xs)
    }
  }

  :where(html) .card__archief .card__content .card__title {
    font-size: var(--step-2);
    color: var(--color-text);
    margin: 0;
    font-weight: 700
  }

  :where(html) .card__archief .card__content .card__description {
    font-size: var(--step--1);
    color: var(--color-text)
  }

  :where(html) :where(.filter__letters, .gasten__letter-overview) {
    grid-column: 2/3
  }

  :where(html) :where(.filter__letters, .gasten__letter-overview) ul {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex
  }

  :where(html) :where(.filter__letters, .gasten__letter-overview) li {
    font-size: var(--step-0);
    color: var(--color-text);
    font-weight: 700
  }

  :where(html) .filter__letters {
    border-top: 1px solid var(--white);
    border-bottom: 1px solid var(--white);
    padding-block: var(--space-2xs)
  }

  :where(html) .filter__letters ul {
    gap: var(--space-s);
    justify-content: flex-start
  }

  @media (width>1005px) {
    :where(html) .filter__letters ul {
      justify-content: space-between
    }
  }

  :where(html) .gasten__letter-overview {
    border-bottom: 1px solid var(--white);
    padding-block: var(--space-m)
  }

  :where(html) .gasten__letter-overview h3 {
    font-size: calc(var(--step-5) * 2);
    margin-block: 0 var(--space-m);
    font-weight: 400;
    display: block
  }

  :where(html) .gasten__letter-overview ul {
    gap: var(--space-l)
  }

  :where(html) .gasten__letter-overview ul li {
    width: 30%
  }

  :where(html) .tabs__panel .card {
    gap: var(--space-m);
    border-bottom: 1px solid var(--white);
    padding-block-end: var(--space-s);
    padding-inline: var(--space-s);
    grid-column: 1/-1;
    grid-template-columns: 1fr;
    margin-block-end: var(--space-s);
    display: grid
  }

  @media (width>=800px) {
    :where(html) .tabs__panel .card {
      padding-inline: none;
      grid-column: 2/3;
      grid-template-columns: 1fr 4fr
    }
  }

  @media (width>=1000px) {
    :where(html) .tabs__panel .card {
      grid-template-columns: auto 4fr 2fr
    }
  }

  :where(html) .tabs__panel .card:last-child {
    margin-block-end: 0
  }

  :where(html) .tabs__panel .card .card__meta {
    font-size: var(--step--1);
    color: var(--color-text);
    margin-block-start: 0;
    font-weight: 700
  }

  :where(html) .tabs__panel .card .card__meta span:not(:is(:last-child, :nth-of-type(2))):after {
    content: "|";
    margin-inline: var(--space-2xs)
  }

  :where(html) .tabs__panel .card figure {
    aspect-ratio: 1
  }

  @media (width>=800px) {
    :where(html) .tabs__panel .card figure {
      max-inline-size: 12vw
    }
  }

  :where(html) .tabs__panel .card figure img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%
  }

  :where(html) .tabs__panel .card figure .type {
    inline-size: 86%;
    padding-block: var(--space-3xs) var(--space-s);
    padding-inline: var(--space-2xs);
    font-family: var(--font-stack-serif);
    background: linear-gradient(163deg, var(--type-bg) 44%, transparent 0%);
    color: var(--type-fg, inherit);
    min-block-size: 81px;
    font-size: .9em;
    font-style: italic;
    position: absolute;
    top: 0;
    left: 0
  }

  :where(html) .tabs__panel .card figure .type.engels {
    --type-bg: var(--type-engels);
    --type-fg: var(--white)
  }

  :where(html) .tabs__panel .card figure .type.young {
    --type-bg: var(--type-young)
  }

  :where(html) .tabs__panel .card figure .type.kids {
    --type-bg: var(--type-kids)
  }

  :where(html) .tabs__panel .card figure .type.events {
    --type-bg: var(--type-events)
  }

  :where(html) .tabs__panel .card h3 {
    font-size: var(--step-1);
    color: var(--color-text);
    margin-block: 1lh 0;
    font-weight: 700
  }

  :where(html) .tabs__panel .card .card__description {
    font-size: var(--step--1)
  }

  :where(html) .tabs__panel .card .link__group {
    place-self: end;
    align-items: baseline;
    gap: var(--space-s);
    display: flex
  }

  @media (width<=1000px) {
    :where(html) .tabs__panel .card .link__group {
      grid-column: 1/-1
    }
  }

  :where(html) .tabs__panel .card .link__group a {
    color: var(--color-text)
  }

  :where(html) .tabs__panel .card.breakout {
    background: var(--block-bg-gradient);
    padding-inline: var(--space-s);
    grid-column: 1/-1;
    grid-template-columns: 1fr;
    padding-block-end: var(--space-m);
    position: relative
  }

  @media (width>=800px) {
    :where(html) .tabs__panel .card.breakout {
      padding-inline: var(--space-2xl);
      grid-template-columns: auto 4fr 2fr
    }
  }

  :where(html) .tabs__panel .card.breakout {
    --btn-text: var(--black);
    --btn-bg: var(--white)
  }

  :where(html) .tabs__panel .card.breakout:before {
    content: "";
    aspect-ratio: 483/591;
    mix-blend-mode: overlay;
    z-index: 0;
    pointer-events: none;
    background: url(../img/letter-w.png) 100% 0/60% no-repeat;
    inline-size: min(483px, 40%);
    position: absolute;
    inset: -2vh 0 auto auto
  }

  @media (width>=800px) {
    :where(html) .tabs__panel .card.breakout figure {
      max-inline-size: 16vw
    }
  }

  :where(html) .tabs__panel .card.breakout figure img {
    object-fit: cover;
    block-size: 100%;
    inline-size: 100%
  }

  :where(html) .tabs__panel .card.breakout figure .type {
    min-block-size: 80px
  }

  :where(html) .tabs__panel .card.breakout h3 {
    font-size: var(--step-3)
  }

  :where(html) .tabs__panel .card.breakout .link__group a:nth-child(2):is(:hover, :focus) {
    color: var(--white)
  }

  :where(html) .tabs__panel .card.breakout .card__description {
    font-size: var(--step-0)
  }

  :where(html) .tabs__panel .card:is(:hover, :focus-within) .card__title a {
    text-underline-offset: unset;
    text-decoration-color: currentColor
  }

  :where(html) .tabs__panels.compact .card__meta {
    font-size: var(--step--2)
  }

  :where(html) .tabs__panels.compact a:not(.card__title) {
    font-size: var(--step--2)
  }

  :where(html) .tabs__panels.compact .card__title {
    margin-block-start: var(--space-3xs)
  }

  :where(html) .tabs__panels.compact .card__title a {
    font-size: var(--step-0)
  }

  :where(html) .tabs__panels.compact .card__meta-break {
    display: none
  }

  :where(html) .tabs__panels.compact figure {
    max-inline-size: 100px
  }

  :where(html) .tabs__panels.compact figure .type {
    font-size: .7em !important
  }

  :where(html) .tabs__panels.compact .breakout figure {
    max-inline-size: 100px
  }

  :where(html) .tabs__panels.compact .breakout .card__title {
    font-size: var(--step-0)
  }

  :where(html) .tabs__panels.compact .card__description {
    display: none
  }

  :where(html) .tabs__panel:has(.card:hover) .card:not(:hover) {
    opacity: .5
  }

  :where(html) .tabs__panel:has(.card:focus-within) .card:not(:focus-within) {
    opacity: .5
  }

  :where(html) .line-up {
    grid-column: 1/-1;
    margin-block-start: var(--space-l)
  }

  :where(html) .line-up ul {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    margin: 0;
    padding: 0;
    display: grid
  }

  :where(html) .line-up .gasten__item {
    max-inline-size: 100%
  }

  :where(html) .grid-three-column {
    z-index: 2
  }

  :where(html) .grid-three-column .card figure {
    aspect-ratio: 3/2
  }

  :where(html) .grid-three-column .card figure img {
    block-size: 100%
  }

  :where(html) .grid-three-column .card .tekst {
    padding-inline: var(--component-padding)
  }

  :where(html) .grid-three-column .card .tekst h3 {
    font-size: var(--step-1)
  }

  :where(html) .grid-three-column .card:is(:hover, :focus-within) .tekst h3 a {
    text-underline-offset: unset;
    text-decoration-color: currentColor
  }

  :where(html) .card__badge {
    aspect-ratio: 1;
    background: var(--body-bg);
    block-size: 2rem;
    inline-size: 2rem;
    color: var(--white);
    place-content: center;
    padding: 5px 7px;
    display: grid;
    position: absolute;
    top: 0;
    right: 0
  }

  :where(html) .card__badge .ti {
    z-index: 2;
    background-position: 50%;
    background-repeat: no-repeat;
    block-size: 34px;
    inline-size: 26px
  }

  :where(html) .card__badge .ti.ti-headphones {
    background-image: url(../img/icon_podcast.svg);
    background-size: 50%
  }

  :where(html) .card__badge .ti.ti-book {
    background-image: url(../img/icon_book.svg);
    background-size: 80%
  }

  :where(html) .card__badge .ti.ti-player-play {
    background-image: url(../img/icon_video.svg);
    background-size: 70%
  }

  @media (width<=680px) {
    :where(html) .toggle__wrapper {
      display: none
    }
  }
}

@layer forms {
  .filter__panel {
    inline-size: 100%;
    display: flex
  }

  .filter__panel.search {
    margin-block-end: 0
  }

  .filter__panel.search form {
    background-color: var(--white);
    inline-size: fit-content;
    min-inline-size: 40%;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-xs) var(--space-xs);
    border-radius: 40px;
    justify-content: space-between;
    margin-block-start: 10px;
    display: flex
  }

  .filter__panel.search form input[type=search] {
    color: var(--black);
    background-color: transparent;
    background-image: url(../img/icon-search.svg);
    background-position: 1%;
    background-repeat: no-repeat;
    background-size: 20px;
    border: 0;
    min-inline-size: 70%;
    padding-inline-start: 40px
  }

  .filter__panel.search form input[type=submit] {
    background-color: var(--accent);
    color: var(--accent-text);
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    font-weight: 700;
    font-size: var(--step-0);
    font-family: var(--font-stack-body);
    border: 0;
    border-radius: 40px
  }

  .filter__panel.search form input[type=submit]:is(:hover, :focus) {
    background-color: var(--accent-hover);
    color: var(--color-text-button);
    cursor: pointer
  }

  .filter__panel .pill {
    --icon-pos: 96% center;
    padding-inline: var(--space-l);
    background-repeat: no-repeat;
    background-position: var(--icon-pos);
    font-family: var(--font-stack-body);
    inline-size: 100%
  }

  .filter__panel .pill.lees {
    background-image: url(../img/icon_lees.svg)
  }

  .filter__panel .pill.kijk {
    background-image: url(../img/icon_kijk.svg)
  }

  .filter__panel .pill.luister {
    background-image: url(../img/icon_luister.svg)
  }

  .filter__panel .pill:is(:hover, :focus) {
    background-color: var(--accent-hover);
    color: var(--color-text-button);
    cursor: pointer;
    border: 2px solid var(--accent-hover)
  }

  .filter__panel .filter-options input:checked+.pill {
    background-image: none
  }

  @media (width<947px) {
    .filter__panel .filter-options label {
      inline-size: 45%
    }
  }

  .filter__panel :is(select, .select-year, .location-select) {
    color: var(--black);
    font-family: var(--font-stack-body);
    font-size: var(--step-0);
    padding: 4px var(--space-xs);
    border: 2px solid var(--accent);
    background-color: transparent;
    border-radius: 8px
  }

  .filter__panel :is(select, .select-year, .location-select):focus-visible {
    outline-offset: 2px;
    outline: 2px solid #000
  }

  @media (width>=768px) {
    .discover-page .filter__panel {
      padding-inline-start: var(--space-2xl)
    }
  }

  @media (width>=680px) {
    .archief .filter__panel {
      padding-inline-start: 0
    }
  }

  .archief .select-year {
    margin-top: 26px
  }
}

@layer details {
  :where(html) .faq h3 {
    margin-block-end: var(--space-m)
  }

  :where(html) .faq details {
    border-top: 1px solid var(--black)
  }

  :where(html) .faq details:last-of-type {
    border-bottom: 1px solid var(--black)
  }

  :where(html) .faq summary {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s) var(--space-xs);
    cursor: pointer;
    font-size: var(--step--1);
    color: var(--black);
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    font-weight: 700;
    list-style: none;
    display: flex
  }

  :where(html) .faq summary:is(:hover, :focus-within) {
    background-color: var(--accent)
  }

  :where(html) .faq summary::-webkit-details-marker {
    display: none
  }

  :where(html) .faq summary::marker {
    display: none
  }

  :where(html) .faq details[open]>summary {
    border-bottom: .5px solid var(--black);
    background-color: var(--accent)
  }

  :where(html) .faq summary:focus-visible {
    outline-offset: -2px;
    outline: 2px solid #378add
  }

  :where(html) .faq summary .icon {
    color: #888;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    transition: transform .2s;
    display: flex
  }

  :where(html) .faq details[open]>summary .icon {
    transform: rotate(45deg)
  }

  :where(html) .faq .body {
    padding: var(--space-s) var(--space-xs);
    font-size: var(--step--1)
  }
}

@layer menu {
  :where(html) {
    --pill-radius: 50px;
    --pill-padding: var(--space-2xs) var(--space-l);
    --pill-bg: rgba(255, 255, 255, .85)
  }

  :where(html) header nav {
    top: calc(3 * var(--component-padding));
    right: var(--component-padding);
    z-index: 1000;
    font-family: var(--font-stack-body);
    display: flex;
    position: fixed
  }

  :where(html) header nav .navbar {
    align-items: center;
    gap: var(--space-m);
    padding: var(--pill-padding);
    border-radius: var(--pill-radius);
    -webkit-backdrop-filter: blur(9.3px);
    backdrop-filter: blur(9.3px);
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .14);
    display: flex
  }

  :where(html) .nav-link {
    font-size: var(--step-0);
    color: var(--black);
    cursor: pointer;
    white-space: nowrap;
    align-items: center;
    font-weight: 700;
    text-decoration-color: transparent;
    display: inline-flex
  }

  :where(html) .nav-link:is(.active, :hover, :focus) {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px
  }

  :where(html) .lang-link {
    color: var(--black);
    text-decoration-color: transparent
  }

  :where(html) .lang-link:is(:hover, :focus) {
    text-decoration-color: currentColor
  }

  :where(html) .lang-link.active {
    font-weight: 700
  }

  :where(html) .menu-btn {
    padding: var(--pill-padding);
    min-height: 66.5px;
    font: inherit;
    font-size: var(--step-0);
    color: var(--black);
    -webkit-backdrop-filter: blur(9.3px);
    backdrop-filter: blur(9.3px);
    border-radius: var(--pill-radius);
    cursor: pointer;
    white-space: nowrap;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .14);
    align-items: center;
    gap: 9px;
    margin-inline-start: var(--space-l);
    font-weight: 700;
    display: inline-flex
  }

  @media (width<=680px) {
    :where(html) .menu-btn {
      padding: var(--space-3xs) var(--space-s)
    }
  }

  :where(html) .menu-btn:is(:hover, :focus) {
    background-color: var(--accent);
    color: var(--accent-text)
  }

  :where(html) .menu-btn:is(:hover, :focus) .menu-btn__icon span {
    background: var(--accent-text)
  }

  :where(html) .menu-btn[aria-expanded=true] .menu-btn__icon span:first-child {
    width: 120%;
    transform: rotate(38deg)translateY(-1px)
  }

  :where(html) .menu-btn[aria-expanded=true] .menu-btn__icon span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0)
  }

  :where(html) .menu-btn[aria-expanded=true] .menu-btn__icon span:nth-child(3) {
    width: 120%;
    transform: rotate(-38deg)translateY(1px)
  }

  :where(html) .menu-btn__icon {
    flex-direction: column;
    flex-shrink: 0;
    justify-content: space-between;
    width: 18px;
    height: 14px;
    display: flex
  }

  :where(html) .menu-btn__icon span {
    background: var(--black);
    transform-origin: 0;
    border-radius: 2px;
    height: 2px;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .2s, width .25s;
    display: block
  }

  .menu-overlay {
    z-index: 1001;
    visibility: hidden;
    pointer-events: none;
    justify-content: center;
    align-items: flex-start;
    display: flex;
    position: fixed;
    inset: 0
  }

  .menu-overlay:before {
    content: "";
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    z-index: -1;
    background: rgba(15, 5, 35, .6);
    transition: opacity .25s;
    position: absolute;
    inset: 0
  }

  .menu-overlay.is-open {
    visibility: visible;
    pointer-events: auto
  }

  .menu-overlay.is-open:before {
    opacity: 1
  }

  .menu-overlay.is-open .menu-panel {
    opacity: 1;
    transform: translateY(0)scale(1)
  }

  .menu-panel {
    width: 100%;
    opacity: 0;
    z-index: 1002;
    -webkit-backdrop-filter: blur(9.3px);
    backdrop-filter: blur(9.3px);
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 24px;
    min-block-size: 80svh;
    max-inline-size: 80vw;
    margin-block-start: 80px;
    margin-inline-end: -9vw;
    padding: 4rem 2.5rem;
    transition: transform .3s cubic-bezier(.34, 1.4, .64, 1), opacity .25s;
    display: flex;
    position: relative;
    transform: translateY(-16px)scale(.98);
    box-shadow: 0 32px 80px rgba(15, 5, 35, .35)
  }

  @media (width<=680px) {
    .menu-panel {
      max-width: 90vw;
      height: fit-content;
      margin-block-start: 24px;
      padding: 2rem 1.5rem
    }
  }

  .menu-panel nav {
    position: unset;
    justify-content: space-evenly;
    gap: var(--space-l);
    inline-size: 100%;
    margin-block-start: 5vh;
    display: flex
  }

  @media (width<=1145px) {
    .menu-panel nav {
      flex-direction: column;
      justify-content: flex-start;
      gap: 0;
      margin-block-start: 3vh
    }
  }

  .menu-panel nav ul {
    margin-block-start: var(--space-2xs)
  }

  .menu-panel nav ul a {
    font-size: var(--step-0);
    color: var(--black);
    text-decoration-color: transparent
  }

  .menu-panel nav ul a:is(:hover, :focus, .active) {
    text-decoration-color: currentColor
  }

  @media (width<=680px) {
    .menu-panel nav ul {
      margin-block-start: 0;
      margin-inline-start: 0;
      padding-inline-start: 0
    }
  }

  .menu-panel nav .large {
    flex-direction: column;
    margin-block-start: unset;
    display: flex
  }

  .menu-panel nav .large a {
    font-size: var(--step-3);
    font-weight: 700
  }

  @media (width<=680px) {
    .menu-panel nav .large a {
      font-size: var(--step-2)
    }
  }

  .menu-panel nav .large a.lang-link {
    font-size: var(--step-0)
  }

  .menu-close {
    width: fit-content;
    height: 40px;
    color: var(--black);
    font-size: var(--step--1);
    cursor: pointer;
    background: 0 0;
    border: none;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    transition: background .15s;
    display: flex;
    position: absolute;
    top: 1.25rem;
    right: 1.25rem
  }

  .menu-close svg {
    width: 16px;
    height: 16px;
    stroke: var(--black);
    margin-inline-start: 8px
  }

  .menu-close:focus-visible {
    outline: 2px solid var(--black);
    outline-offset: 2px;
    border-radius: 4px
  }

  header:has(.menu-overlay.is-open) .navbar {
    display: none
  }

  @media (width<=1300px) {
    header nav .navbar {
      display: none
    }
  }

  @media (width<=1145px) {
    header nav .navbar {
      gap: 2px;
      padding: 6px 8px
    }

    .nav-link {
      padding: 8px 0;
      font-size: 14px
    }
  }

  @media (prefers-reduced-motion:reduce) {

    .menu-overlay,
    .menu-overlay:before,
    .menu-panel,
    .menu-btn .menu-btn__icon span,
    .menu-item {
      transition: none !important;
      animation: none !important
    }
  }
}

@layer overlay {
  dialog {
    block-size: 100dvh;
    inline-size: 90vw;
    max-inline-size: unset;
    max-block-size: unset;
    background-color: var(--accent);
    color: var(--accent-tekst);
    isolation: isolate;
    background-blend-mode: color-burn;
    background-image: url(../img/letter-w.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    border: 0;
    flex-direction: column;
    margin-block: 0;
    margin-inline: 10vw 0;
    padding: 0;
    overflow: hidden
  }

  dialog[open] {
    display: flex
  }

  dialog .dialog-content {
    font-family: var(--font-stack-body);
    flex: 1;
    padding-block-end: var(--space-xl);
    overflow-y: auto
  }

  dialog>[data-dialog-close] {
    align-self: flex-end;
    gap: var(--space-2xs);
    padding-block: var(--space-s);
    color: var(--accent-tekst);
    background: 0 0;
    border: 0;
    flex-shrink: 0;
    padding-inline-start: var(--space-s);
    padding-inline-end: var(--space-l);
    font-weight: 700;
    display: inline-flex
  }

  dialog>[data-dialog-close] svg {
    block-size: 16px;
    inline-size: 16px
  }

  dialog::backdrop {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background: rgba(0, 0, 0, .5)
  }

  dialog header {
    background-color: unset;
    grid-column: 1/-1
  }

  @media (width>768px) {
    dialog header {
      grid-column: 2/10
    }
  }

  dialog .photo.left {
    padding-inline-start: 0
  }
}

@layer animations {
  .fade__in {
    animation: fadeIn;
    animation-timeline: view();
    animation-range: entry entry 50%
  }

  @keyframes fadeIn {
    0% {
      opacity: 0
    }

    to {
      opacity: 1
    }
  }
}

:where(html) {
  --ease-1: cubic-bezier(.25, 0, .5, 1);
  --ease-2: cubic-bezier(.25, 0, .4, 1);
  --ease-3: cubic-bezier(.25, 0, .3, 1);
  --ease-4: cubic-bezier(.25, 0, .2, 1);
  --ease-5: cubic-bezier(.25, 0, .1, 1);
  --ease-in-1: cubic-bezier(.25, 0, 1, 1);
  --ease-in-2: cubic-bezier(.5, 0, 1, 1);
  --ease-in-3: cubic-bezier(.7, 0, 1, 1);
  --ease-in-4: cubic-bezier(.9, 0, 1, 1);
  --ease-in-5: cubic-bezier(1, 0, 1, 1);
  --ease-out-1: cubic-bezier(0, 0, .75, 1);
  --ease-out-2: cubic-bezier(0, 0, .5, 1);
  --ease-out-3: cubic-bezier(0, 0, .3, 1);
  --ease-out-4: cubic-bezier(0, 0, .1, 1);
  --ease-out-5: cubic-bezier(0, 0, 0, 1);
  --ease-in-out-1: cubic-bezier(.1, 0, .9, 1);
  --ease-in-out-2: cubic-bezier(.3, 0, .7, 1);
  --ease-in-out-3: cubic-bezier(.5, 0, .5, 1);
  --ease-in-out-4: cubic-bezier(.7, 0, .3, 1);
  --ease-in-out-5: cubic-bezier(.9, 0, .1, 1);
  --ease-elastic-out-1: cubic-bezier(.5, .75, .75, 1.25);
  --ease-elastic-out-2: cubic-bezier(.5, 1, .75, 1.25);
  --ease-elastic-out-3: cubic-bezier(.5, 1.25, .75, 1.25);
  --ease-elastic-out-4: cubic-bezier(.5, 1.5, .75, 1.25);
  --ease-elastic-out-5: cubic-bezier(.5, 1.75, .75, 1.25);
  --ease-elastic-in-1: cubic-bezier(.5, -.25, .75, 1);
  --ease-elastic-in-2: cubic-bezier(.5, -.5, .75, 1);
  --ease-elastic-in-3: cubic-bezier(.5, -.75, .75, 1);
  --ease-elastic-in-4: cubic-bezier(.5, -1, .75, 1);
  --ease-elastic-in-5: cubic-bezier(.5, -1.25, .75, 1);
  --ease-elastic-in-out-1: cubic-bezier(.5, -.1, .1, 1.5);
  --ease-elastic-in-out-2: cubic-bezier(.5, -.3, .1, 1.5);
  --ease-elastic-in-out-3: cubic-bezier(.5, -.5, .1, 1.5);
  --ease-elastic-in-out-4: cubic-bezier(.5, -.7, .1, 1.5);
  --ease-elastic-in-out-5: cubic-bezier(.5, -.9, .1, 1.5);
  --ease-step-1: steps(2);
  --ease-step-2: steps(3);
  --ease-step-3: steps(4);
  --ease-step-4: steps(7);
  --ease-step-5: steps(10);
  --ease-elastic-1: var(--ease-elastic-out-1);
  --ease-elastic-2: var(--ease-elastic-out-2);
  --ease-elastic-3: var(--ease-elastic-out-3);
  --ease-elastic-4: var(--ease-elastic-out-4);
  --ease-elastic-5: var(--ease-elastic-out-5);
  --ease-squish-1: var(--ease-elastic-in-out-1);
  --ease-squish-2: var(--ease-elastic-in-out-2);
  --ease-squish-3: var(--ease-elastic-in-out-3);
  --ease-squish-4: var(--ease-elastic-in-out-4);
  --ease-squish-5: var(--ease-elastic-in-out-5);
  --ease-spring-1: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001);
  --ease-spring-2: linear(0, .007, .029 2.2%, .118 4.7%, .625 14.4%, .826 19%, .902, .962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, .999 61.6%, .995 71.2%, 1);
  --ease-spring-3: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1);
  --ease-spring-4: linear(0, .009, .037 1.7%, .153 3.6%, .776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, .973, .955 39.2%, .953 41.1%, .957 43.3%, .998 53.3%, 1.009 59.1% 63.7%, .998 78.9%, 1);
  --ease-spring-5: linear(0, .01, .04 1.6%, .161 3.3%, .816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, .999 29.4%, .955 32.1%, .942, .935 34.9%, .933, .939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, .996 70.2%, 1.001 87.2%, 1);
  --ease-bounce-1: linear(0, .004, .016, .035, .063, .098, .141, .191, .25, .316, .391 36.8%, .563, .766, 1 58.8%, .946, .908 69.1%, .895, .885, .879, .878, .879, .885, .895, .908 89.7%, .946, 1);
  --ease-bounce-2: linear(0, .004, .016, .035, .063, .098, .141 15.1%, .25, .391, .562, .765, 1, .892 45.2%, .849, .815, .788, .769, .757, .753, .757, .769, .788, .815, .85, .892 75.2%, 1 80.2%, .973, .954, .943, .939, .943, .954, .973, 1);
  --ease-bounce-3: linear(0, .004, .016, .035, .062, .098, .141 11.4%, .25, .39, .562, .764, 1 30.3%, .847 34.8%, .787, .737, .699, .672, .655, .65, .656, .672, .699, .738, .787, .847 61.7%, 1 66.2%, .946, .908, .885 74.2%, .879, .878, .879, .885 79.5%, .908, .946, 1 87.4%, .981, .968, .96, .957, .96, .968, .981, 1);
  --ease-bounce-4: linear(0, .004, .016 3%, .062, .141, .25, .391, .562 18.2%, 1 24.3%, .81, .676 32.3%, .629, .595, .575, .568, .575, .595, .629, .676 48.2%, .811, 1 56.2%, .918, .86, .825, .814, .825, .86, .918, 1 77.2%, .94 80.6%, .925, .92, .925, .94 87.5%, 1 90.9%, .974, .965, .974, 1);
  --ease-bounce-5: linear(0, .004, .016 2.5%, .063, .141, .25 10.1%, .562, 1 20.2%, .783, .627, .534 30.9%, .511, .503, .511, .534 38%, .627, .782, 1 48.7%, .892, .815, .769 56.3%, .757, .753, .757, .769 61.3%, .815, .892, 1 68.8%, .908 72.4%, .885, .878, .885, .908 79.4%, 1 83%, .954 85.5%, .943, .939, .943, .954 90.5%, 1 93%, .977, .97, .977, 1)
}

:where(html) {
  --layer-1: 1;
  --layer-2: 2;
  --layer-3: 3;
  --layer-4: 4;
  --layer-5: 5;
  --layer-important: 2147480000
}

:where(html) {
  --shadow-color: 220 3% 15%;
  --shadow-strength: 1%;
  --inner-shadow-highlight: inset 0 -.5px 0 0 #fff, inset 0 .5px 0 0 rgba(0, 0, 0, .067);
  --shadow-1: 0 1px 2px -1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --shadow-2: 0 3px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 14px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%));
  --shadow-3: 0 -1px 3px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 2px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 5px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 4px 12px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 12px 15px -5px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-4: 0 -2px 5px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 1px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 2px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 9px 9px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 16px 16px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%));
  --shadow-5: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 2px 1px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 5px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 10px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 20px 20px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 40px 40px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --shadow-6: 0 -1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 2%)), 0 3px 2px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 7px 5px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 3%)), 0 12px 10px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 4%)), 0 22px 18px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 5%)), 0 41px 33px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 6%)), 0 100px 80px -2px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 7%));
  --inner-shadow-0: inset 0 0 0 1px hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%));
  --inner-shadow-1: inset 0 1px 2px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-2: inset 0 1px 4px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-3: inset 0 2px 8px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight);
  --inner-shadow-4: inset 0 2px 14px 0 hsl(var(--shadow-color) / calc(var(--shadow-strength) + 9%)), var(--inner-shadow-highlight)
}

:where(html) {
  --animation-fade-in: fade-in .5s var(--ease-3);
  --animation-fade-in-bloom: fade-in-bloom 2s var(--ease-3);
  --animation-fade-out: fade-out .5s var(--ease-3);
  --animation-fade-out-bloom: fade-out-bloom 2s var(--ease-3);
  --animation-scale-up: scale-up .5s var(--ease-3);
  --animation-scale-down: scale-down .5s var(--ease-3);
  --animation-slide-out-up: slide-out-up .5s var(--ease-3);
  --animation-slide-out-down: slide-out-down .5s var(--ease-3);
  --animation-slide-out-right: slide-out-right .5s var(--ease-3);
  --animation-slide-out-left: slide-out-left .5s var(--ease-3);
  --animation-slide-in-up: slide-in-up .5s var(--ease-3);
  --animation-slide-in-down: slide-in-down .5s var(--ease-3);
  --animation-slide-in-right: slide-in-right .5s var(--ease-3);
  --animation-slide-in-left: slide-in-left .5s var(--ease-3);
  --animation-shake-x: shake-x .75s var(--ease-out-5);
  --animation-shake-y: shake-y .75s var(--ease-out-5);
  --animation-shake-z: shake-z 1s var(--ease-in-out-3);
  --animation-spin: spin 2s linear infinite;
  --animation-ping: ping 5s var(--ease-out-3) infinite;
  --animation-blink: blink 1s var(--ease-out-3) infinite;
  --animation-float: float 3s var(--ease-in-out-3) infinite;
  --animation-bounce: bounce 2s var(--ease-squish-2) infinite;
  --animation-pulse: pulse 2s var(--ease-out-3) infinite
}

@keyframes fade-in {
  to {
    opacity: 1
  }
}

@keyframes fade-in-bloom {
  0% {
    opacity: 0;
    filter: brightness()blur(20px)
  }

  10% {
    opacity: 1;
    filter: brightness(2)blur(10px)
  }

  to {
    opacity: 1;
    filter: brightness()blur()
  }
}

@keyframes fade-out {
  to {
    opacity: 0
  }
}

@keyframes fade-out-bloom {
  to {
    opacity: 0;
    filter: brightness()blur(20px)
  }

  10% {
    opacity: 1;
    filter: brightness(2)blur(10px)
  }

  0% {
    opacity: 1;
    filter: brightness()blur()
  }
}

@keyframes scale-up {
  to {
    transform: scale(1.25)
  }
}

@keyframes scale-down {
  to {
    transform: scale(.75)
  }
}

@keyframes slide-out-up {
  to {
    transform: translateY(-100%)
  }
}

@keyframes slide-out-down {
  to {
    transform: translateY(100%)
  }
}

@keyframes slide-out-right {
  to {
    transform: translate(100%)
  }
}

@keyframes slide-out-left {
  to {
    transform: translate(-100%)
  }
}

@keyframes slide-in-up {
  0% {
    transform: translateY(100%)
  }

  to {
    transform: translateY(0)
  }
}

@keyframes slide-in-down {
  0% {
    transform: translateY(-100%)
  }
}

@keyframes slide-in-right {
  0% {
    transform: translate(-100%)
  }
}

@keyframes slide-in-left {
  0% {
    transform: translate(100%)
  }
}

@keyframes shake-x {

  0%,
  to {
    transform: translate(0%)
  }

  20% {
    transform: translate(-5%)
  }

  40% {
    transform: translate(5%)
  }

  60% {
    transform: translate(-5%)
  }

  80% {
    transform: translate(5%)
  }
}

@keyframes shake-y {

  0%,
  to {
    transform: translateY(0%)
  }

  20% {
    transform: translateY(-5%)
  }

  40% {
    transform: translateY(5%)
  }

  60% {
    transform: translateY(-5%)
  }

  80% {
    transform: translateY(5%)
  }
}

@keyframes shake-z {

  0%,
  to {
    transform: rotate(0)
  }

  20% {
    transform: rotate(-2deg)
  }

  40% {
    transform: rotate(2deg)
  }

  60% {
    transform: rotate(-2deg)
  }

  80% {
    transform: rotate(2deg)
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn)
  }
}

@keyframes ping {

  90%,
  to {
    opacity: 0;
    transform: scale(2)
  }
}

@keyframes blink {

  0%,
  to {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

@keyframes float {
  50% {
    transform: translateY(-25%)
  }
}

@keyframes bounce {
  25% {
    transform: translateY(-20%)
  }

  40% {
    transform: translateY(-3%)
  }

  0%,
  60%,
  to {
    transform: translateY(0)
  }
}

@keyframes pulse {
  50% {
    transform: scale(.9)
  }
}