@layer base, layouts, views, utilities;
@layer base {
  :root {
    --opacity-50: 0.5;
    --opacity-70: 0.7;
    --opacity-90: 0.9;
    --radius-xs: 0.125rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-max: 9rem;
    --z-100: 100;
    --z-200: 200;
    --z-300: 300;
    --z-400: 400;
    --z-500: 500;
    --z-max: 900;
    --color-white: hsl(0, 0%, 100%);
    --color-black: #282828;
    --color-semitrans: rgba(120, 120, 120, 0.1);
    --color-darktrans: rgba(40, 40, 40, 0.7);
    --color-off-white: #fdfdf8;
    --color-light-yellow: #FFFBE0;
    --color-yellow: #F5D068;
    --color-light-blue: #D1E6E6;
    --color-dark-yellow: #F5C642;
    --color-splash-yellow: #FCD500;
    --color-blue: #008AB5;
    --color-pink: #FFBFA9;
    --focus-ring-width: 0.125rem;
    --focus-ring-color: currentColor;
    --focus-ring-offset: 0.125rem;
    --focus-ring-style: solid;
    --font-sans: satoshi, system-ui, sans-serif;
    --font-serif: serif;
    --font-mono: monospace;
    --font-headline: julkalendern, system-ui, sans-serif;
    --text-2xs: 0.75rem;
    --text-2xs-xs: clamp(0.75rem, 0.0961538462vw + 0.7211538462rem, 0.875rem);
    --text-2xs-sm: clamp(0.75rem, 0.1923076923vw + 0.6923076923rem, 1rem);
    --text-2xs-md: clamp(0.75rem, 0.2884615385vw + 0.6634615385rem, 1.125rem);
    --text-2xs-lg: clamp(0.75rem, 0.3846153846vw + 0.6346153846rem, 1.25rem);
    --text-2xs-xl: clamp(0.75rem, 0.5769230769vw + 0.5769230769rem, 1.5rem);
    --text-2xs-2xl: clamp(0.75rem, 1.1538461538vw + 0.4038461538rem, 2.25rem);
    --text-2xs-3xl: clamp(0.75rem, 1.7307692308vw + 0.2307692308rem, 3rem);
    --text-2xs-4xl: clamp(0.75rem, 2.5vw + 0rem, 4rem);
    --text-2xs-5xl: clamp(0.75rem, 2.8846153846vw + -0.1153846154rem, 4.5rem);
    --text-2xs-6xl: clamp(0.75rem, 3.6538461538vw + -0.3461538462rem, 5.5rem);
    --text-xs: 0.875rem;
    --text-xs-sm: clamp(0.875rem, 0.0961538462vw + 0.8461538462rem, 1rem);
    --text-xs-md: clamp(0.875rem, 0.1923076923vw + 0.8173076923rem, 1.125rem);
    --text-xs-lg: clamp(0.875rem, 0.2884615385vw + 0.7884615385rem, 1.25rem);
    --text-xs-xl: clamp(0.875rem, 0.4807692308vw + 0.7307692308rem, 1.5rem);
    --text-xs-2xl: clamp(0.875rem, 1.0576923077vw + 0.5576923077rem, 2.25rem);
    --text-xs-3xl: clamp(0.875rem, 1.6346153846vw + 0.3846153846rem, 3rem);
    --text-xs-4xl: clamp(0.875rem, 2.4038461538vw + 0.1538461538rem, 4rem);
    --text-xs-5xl: clamp(0.875rem, 2.7884615385vw + 0.0384615385rem, 4.5rem);
    --text-xs-6xl: clamp(0.875rem, 3.5576923077vw + -0.1923076923rem, 5.5rem);
    --text-sm: 1rem;
    --text-sm-md: clamp(1rem, 0.0961538462vw + 0.9711538462rem, 1.125rem);
    --text-sm-lg: clamp(1rem, 0.1923076923vw + 0.9423076923rem, 1.25rem);
    --text-sm-xl: clamp(1rem, 0.3846153846vw + 0.8846153846rem, 1.5rem);
    --text-sm-2xl: clamp(1rem, 0.9615384615vw + 0.7115384615rem, 2.25rem);
    --text-sm-3xl: clamp(1rem, 1.5384615385vw + 0.5384615385rem, 3rem);
    --text-sm-4xl: clamp(1rem, 2.3076923077vw + 0.3076923077rem, 4rem);
    --text-sm-5xl: clamp(1rem, 2.6923076923vw + 0.1923076923rem, 4.5rem);
    --text-sm-6xl: clamp(1rem, 3.4615384615vw + -0.0384615385rem, 5.5rem);
    --text-md: 1.125rem;
    --text-md-lg: clamp(1.125rem, 0.0961538462vw + 1.0961538462rem, 1.25rem);
    --text-md-xl: clamp(1.125rem, 0.2884615385vw + 1.0384615385rem, 1.5rem);
    --text-md-2xl: clamp(1.125rem, 0.8653846154vw + 0.8653846154rem, 2.25rem);
    --text-md-3xl: clamp(1.125rem, 1.4423076923vw + 0.6923076923rem, 3rem);
    --text-md-4xl: clamp(1.125rem, 2.2115384615vw + 0.4615384615rem, 4rem);
    --text-md-5xl: clamp(1.125rem, 2.5961538462vw + 0.3461538462rem, 4.5rem);
    --text-md-6xl: clamp(1.125rem, 3.3653846154vw + 0.1153846154rem, 5.5rem);
    --text-lg: 1.25rem;
    --text-lg-xl: clamp(1.25rem, 0.1923076923vw + 1.1923076923rem, 1.5rem);
    --text-lg-2xl: clamp(1.25rem, 0.7692307692vw + 1.0192307692rem, 2.25rem);
    --text-lg-3xl: clamp(1.25rem, 1.3461538462vw + 0.8461538462rem, 3rem);
    --text-lg-4xl: clamp(1.25rem, 2.1153846154vw + 0.6153846154rem, 4rem);
    --text-lg-5xl: clamp(1.25rem, 2.5vw + 0.5rem, 4.5rem);
    --text-lg-6xl: clamp(1.25rem, 3.2692307692vw + 0.2692307692rem, 5.5rem);
    --text-xl: 1.5rem;
    --text-xl-2xl: clamp(1.5rem, 0.5769230769vw + 1.3269230769rem, 2.25rem);
    --text-xl-3xl: clamp(1.5rem, 1.1538461538vw + 1.1538461538rem, 3rem);
    --text-xl-4xl: clamp(1.5rem, 1.9230769231vw + 0.9230769231rem, 4rem);
    --text-xl-5xl: clamp(1.5rem, 2.3076923077vw + 0.8076923077rem, 4.5rem);
    --text-xl-6xl: clamp(1.5rem, 3.0769230769vw + 0.5769230769rem, 5.5rem);
    --text-2xl: 2.25rem;
    --text-2xl-3xl: clamp(2.25rem, 0.5769230769vw + 2.0769230769rem, 3rem);
    --text-2xl-4xl: clamp(2.25rem, 1.3461538462vw + 1.8461538462rem, 4rem);
    --text-2xl-5xl: clamp(2.25rem, 1.7307692308vw + 1.7307692308rem, 4.5rem);
    --text-2xl-6xl: clamp(2.25rem, 2.5vw + 1.5rem, 5.5rem);
    --text-3xl: 3rem;
    --text-3xl-4xl: clamp(3rem, 0.7692307692vw + 2.7692307692rem, 4rem);
    --text-3xl-5xl: clamp(3rem, 1.1538461538vw + 2.6538461538rem, 4.5rem);
    --text-3xl-6xl: clamp(3rem, 1.9230769231vw + 2.4230769231rem, 5.5rem);
    --text-4xl: 4rem;
    --text-4xl-5xl: clamp(4rem, 0.3846153846vw + 3.8846153846rem, 4.5rem);
    --text-4xl-6xl: clamp(4rem, 1.1538461538vw + 3.6538461538rem, 5.5rem);
    --text-5xl: 4.5rem;
    --text-5xl-6xl: clamp(4.5rem, 0.7692307692vw + 4.2692307692rem, 5.5rem);
    --text-6xl: 5.5rem;
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --tracking-xs: -0.04em;
    --tracking-sm: -0.02em;
    --tracking-lg: 0.02em;
    --tracking-xl: 0.04em;
    --leading-xs: 1.1;
    --leading-sm: 1.3;
    --leading-md: 1.4;
    --leading-lg: 1.6;
    --space-2xs: 0.75rem;
    --space-2xs-xs: clamp(0.75rem, 0.1923076923vw + 0.6923076923rem, 1rem);
    --space-2xs-sm: clamp(0.75rem, 0.5769230769vw + 0.5769230769rem, 1.5rem);
    --space-2xs-md: clamp(0.75rem, 0.9615384615vw + 0.4615384615rem, 2rem);
    --space-2xs-lg: clamp(0.75rem, 1.7307692308vw + 0.2307692308rem, 3rem);
    --space-2xs-xl: clamp(0.75rem, 2.5vw + 0rem, 4rem);
    --space-2xs-2xl: clamp(0.75rem, 4.0384615385vw + -0.4615384615rem, 6rem);
    --space-2xs-3xl: clamp(0.75rem, 5.5769230769vw + -0.9230769231rem, 8rem);
    --space-2xs-4xl: clamp(0.75rem, 8.6538461538vw + -1.8461538462rem, 12rem);
    --space-2xs-5xl: clamp(0.75rem, 11.7307692308vw + -2.7692307692rem, 16rem);
    --space-xs: 1rem;
    --space-xs-sm: clamp(1rem, 0.3846153846vw + 0.8846153846rem, 1.5rem);
    --space-xs-md: clamp(1rem, 0.7692307692vw + 0.7692307692rem, 2rem);
    --space-xs-lg: clamp(1rem, 1.5384615385vw + 0.5384615385rem, 3rem);
    --space-xs-xl: clamp(1rem, 2.3076923077vw + 0.3076923077rem, 4rem);
    --space-xs-2xl: clamp(1rem, 3.8461538462vw + -0.1538461538rem, 6rem);
    --space-xs-3xl: clamp(1rem, 5.3846153846vw + -0.6153846154rem, 8rem);
    --space-xs-4xl: clamp(1rem, 8.4615384615vw + -1.5384615385rem, 12rem);
    --space-xs-5xl: clamp(1rem, 11.5384615385vw + -2.4615384615rem, 16rem);
    --space-sm: 1.5rem;
    --space-sm-md: clamp(1.5rem, 0.3846153846vw + 1.3846153846rem, 2rem);
    --space-sm-lg: clamp(1.5rem, 1.1538461538vw + 1.1538461538rem, 3rem);
    --space-sm-xl: clamp(1.5rem, 1.9230769231vw + 0.9230769231rem, 4rem);
    --space-sm-2xl: clamp(1.5rem, 3.4615384615vw + 0.4615384615rem, 6rem);
    --space-sm-3xl: clamp(1.5rem, 5vw + 0rem, 8rem);
    --space-sm-4xl: clamp(1.5rem, 8.0769230769vw + -0.9230769231rem, 12rem);
    --space-sm-5xl: clamp(1.5rem, 11.1538461538vw + -1.8461538462rem, 16rem);
    --space-md: 2rem;
    --space-md-lg: clamp(2rem, 0.7692307692vw + 1.7692307692rem, 3rem);
    --space-md-xl: clamp(2rem, 1.5384615385vw + 1.5384615385rem, 4rem);
    --space-md-2xl: clamp(2rem, 3.0769230769vw + 1.0769230769rem, 6rem);
    --space-md-3xl: clamp(2rem, 4.6153846154vw + 0.6153846154rem, 8rem);
    --space-md-4xl: clamp(2rem, 7.6923076923vw + -0.3076923077rem, 12rem);
    --space-md-5xl: clamp(2rem, 10.7692307692vw + -1.2307692308rem, 16rem);
    --space-lg: 3rem;
    --space-lg-xl: clamp(3rem, 0.7692307692vw + 2.7692307692rem, 4rem);
    --space-lg-2xl: clamp(3rem, 2.3076923077vw + 2.3076923077rem, 6rem);
    --space-lg-3xl: clamp(3rem, 3.8461538462vw + 1.8461538462rem, 8rem);
    --space-lg-4xl: clamp(3rem, 6.9230769231vw + 0.9230769231rem, 12rem);
    --space-lg-5xl: clamp(3rem, 10vw + 0rem, 16rem);
    --space-xl: 4rem;
    --space-xl-2xl: clamp(4rem, 1.5384615385vw + 3.5384615385rem, 6rem);
    --space-xl-3xl: clamp(4rem, 3.0769230769vw + 3.0769230769rem, 8rem);
    --space-xl-4xl: clamp(4rem, 6.1538461538vw + 2.1538461538rem, 12rem);
    --space-xl-5xl: clamp(4rem, 9.2307692308vw + 1.2307692308rem, 16rem);
    --space-2xl: 6rem;
    --space-2xl-3xl: clamp(6rem, 1.5384615385vw + 5.5384615385rem, 8rem);
    --space-2xl-4xl: clamp(6rem, 4.6153846154vw + 4.6153846154rem, 12rem);
    --space-2xl-5xl: clamp(6rem, 7.6923076923vw + 3.6923076923rem, 16rem);
    --space-3xl: 8rem;
    --space-3xl-4xl: clamp(8rem, 3.0769230769vw + 7.0769230769rem, 12rem);
    --space-3xl-5xl: clamp(8rem, 6.1538461538vw + 6.1538461538rem, 16rem);
    --space-4xl: 12rem;
    --space-4xl-5xl: clamp(12rem, 3.0769230769vw + 11.0769230769rem, 16rem);
    --space-5xl: 16rem;
    --space-4xs: 0.25rem;
    --space-4xs-2xs: clamp(0.25rem, 0.3846153846vw + 0.1346153846rem, 0.75rem);
    --space-4xs-xs: clamp(0.25rem, 0.5769230769vw + 0.0769230769rem, 1rem);
    --space-4xs-sm: clamp(0.25rem, 0.9615384615vw + -0.0384615385rem, 1.5rem);
    --space-4xs-md: clamp(0.25rem, 1.3461538462vw + -0.1538461538rem, 2rem);
    --space-4xs-lg: clamp(0.25rem, 2.1153846154vw + -0.3846153846rem, 3rem);
    --space-4xs-xl: clamp(0.25rem, 2.8846153846vw + -0.6153846154rem, 4rem);
    --space-4xs-2xl: clamp(0.25rem, 4.4230769231vw + -1.0769230769rem, 6rem);
    --space-4xs-3xl: clamp(0.25rem, 5.9615384615vw + -1.5384615385rem, 8rem);
    --space-4xs-4xl: clamp(0.25rem, 9.0384615385vw + -2.4615384615rem, 12rem);
    --space-4xs-5xl: clamp(0.25rem, 12.1153846154vw + -3.3846153846rem, 16rem);
    --space-4xs-3xs: clamp(0.25rem, 0.1923076923vw + 0.1923076923rem, 0.5rem);
    --space-3xs: 0.5rem;
    --space-3xs-2xs: clamp(0.5rem, 0.1923076923vw + 0.4423076923rem, 0.75rem);
    --space-3xs-xs: clamp(0.5rem, 0.3846153846vw + 0.3846153846rem, 1rem);
    --space-3xs-sm: clamp(0.5rem, 0.7692307692vw + 0.2692307692rem, 1.5rem);
    --space-3xs-md: clamp(0.5rem, 1.1538461538vw + 0.1538461538rem, 2rem);
    --space-3xs-lg: clamp(0.5rem, 1.9230769231vw + -0.0769230769rem, 3rem);
    --space-3xs-xl: clamp(0.5rem, 2.6923076923vw + -0.3076923077rem, 4rem);
    --space-3xs-2xl: clamp(0.5rem, 4.2307692308vw + -0.7692307692rem, 6rem);
    --space-3xs-3xl: clamp(0.5rem, 5.7692307692vw + -1.2307692308rem, 8rem);
    --space-3xs-4xl: clamp(0.5rem, 8.8461538462vw + -2.1538461538rem, 12rem);
    --space-3xs-5xl: clamp(0.5rem, 11.9230769231vw + -3.0769230769rem, 16rem);
  }
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  html {
    scroll-behavior: smooth;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }
  body {
    min-height: 100dvh;
    font-family: var(--font-sans);
    line-height: var(--leading-md);
    text-rendering: optimizeSpeed;
  }
  a,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
  a {
    color: currentcolor;
    text-decoration: none;
    text-decoration-skip-ink: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  ol[role=list],
  ul[role=list] {
    list-style: none;
  }
  ol:not([role=list]),
  ul:not([role=list]) {
    padding-inline-start: 1.25rem;
  }
  img,
  picture,
  canvas,
  video {
    max-width: 100%;
    height: auto;
  }
  iframe {
    border: 0;
  }
  table {
    border-collapse: collapse;
    caption-side: bottom;
  }
  thead,
  tbody,
  tfoot,
  th,
  tr,
  td {
    border-color: inherit;
    border-style: solid;
    border-width: 0;
  }
  th {
    text-align: inherit;
    text-align: -webkit-match-parent;
  }
  button,
  [type=button],
  [type=reset],
  [type=submit] {
    appearance: button;
    -webkit-appearance: button;
  }
  fieldset {
    border: none;
  }
  dialog {
    border: 0;
    max-width: none;
    max-height: none;
  }
  :focus {
    outline-color: var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    outline-style: var(--focus-ring-style);
    outline-width: var(--focus-ring-width);
  }
  @supports selector(:focus-visible) {
    :focus {
      outline: none;
    }
    :focus-visible {
      outline-color: var(--focus-ring-color);
      outline-offset: var(--focus-ring-offset);
      outline-style: var(--focus-ring-style);
      outline-width: var(--focus-ring-width);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto !important;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer layouts {
  .l-auto-grid {
    --auto-grid-columns: auto-fill;
    --auto-grid-basis: 20rem;
    --auto-grid-gap: 0;
    display: grid;
    grid-template-columns: repeat(var(--auto-grid-columns), minmax(min(100%, var(--auto-grid-basis)), 1fr));
    gap: var(--auto-grid-gap);
  }
  .l-auto-grid > * {
    max-width: 100%;
    min-width: 0;
    min-height: 0;
  }
  @media (min-width: 22em) {
    .l-auto-grid {
      --xs-auto-grid-columns: var(--auto-grid-columns);
      --xs-auto-grid-basis: var(--auto-grid-basis);
      --xs-auto-grid-gap: var(--auto-grid-gap);
      grid-template-columns: repeat(var(--xs-auto-grid-columns), minmax(min(100%, var(--xs-auto-grid-basis)), 1fr));
      gap: var(--xs-auto-grid-gap);
    }
  }
  @media (min-width: 30em) {
    .l-auto-grid {
      --sm-auto-grid-columns: var(--xs-auto-grid-columns);
      --sm-auto-grid-basis: var(--xs-auto-grid-basis);
      --sm-auto-grid-gap: var(--xs-auto-grid-gap);
      grid-template-columns: repeat(var(--sm-auto-grid-columns), minmax(min(100%, var(--sm-auto-grid-basis)), 1fr));
      gap: var(--sm-auto-grid-gap);
    }
  }
  @media (min-width: 60em) {
    .l-auto-grid {
      --md-auto-grid-columns: var(--sm-auto-grid-columns);
      --md-auto-grid-basis: var(--sm-auto-grid-basis);
      --md-auto-grid-gap: var(--sm-auto-grid-gap);
      grid-template-columns: repeat(var(--md-auto-grid-columns), minmax(min(100%, var(--md-auto-grid-basis)), 1fr));
      gap: var(--md-auto-grid-gap);
    }
  }
  @media (min-width: 80em) {
    .l-auto-grid {
      --lg-auto-grid-columns: var(--md-auto-grid-columns);
      --lg-auto-grid-basis: var(--md-auto-grid-basis);
      --lg-auto-grid-gap: var(--md-auto-grid-gap);
      grid-template-columns: repeat(var(--lg-auto-grid-columns), minmax(min(100%, var(--lg-auto-grid-basis)), 1fr));
      gap: var(--lg-auto-grid-gap);
    }
  }
  @media (min-width: 90em) {
    .l-auto-grid {
      --xl-auto-grid-columns: var(--lg-auto-grid-columns);
      --xl-auto-grid-basis: var(--lg-auto-grid-basis);
      --xl-auto-grid-gap: var(--lg-auto-grid-gap);
      grid-template-columns: repeat(var(--xl-auto-grid-columns), minmax(min(100%, var(--xl-auto-grid-basis)), 1fr));
      gap: var(--xl-auto-grid-gap);
    }
  }
}
@layer layouts {
  .l-flex {
    --flex-direction: row;
    --flex-wrap: nowrap;
    --flex-gap: 0;
    --flex-items: normal;
    --flex-content: normal;
    display: flex;
    flex-direction: var(--flex-direction);
    flex-wrap: var(--flex-wrap);
    gap: var(--flex-gap);
    place-items: var(--flex-items);
    place-content: var(--flex-content);
  }
  .l-flex > * {
    --flex-basis: auto;
    --flex-grow: 0;
    --flex-shrink: 1;
    --flex-order: 0;
    --flex-self: auto;
    flex-basis: var(--flex-basis);
    flex-grow: var(--flex-grow);
    flex-shrink: var(--flex-shrink);
    order: var(--flex-order);
    place-self: var(--flex-self);
  }
  @media (min-width: 22em) {
    .l-flex {
      --xs-flex-direction: var(--flex-direction);
      --xs-flex-wrap: var(--flex-wrap);
      --xs-flex-gap: var(--flex-gap);
      --xs-flex-items: var(--flex-items);
      --xs-flex-content: var(--flex-content);
      flex-direction: var(--xs-flex-direction);
      flex-wrap: var(--xs-flex-wrap);
      gap: var(--xs-flex-gap);
      place-items: var(--xs-flex-items);
      place-content: var(--xs-flex-content);
    }
    .l-flex > * {
      --xs-flex-basis: var(--flex-basis);
      --xs-flex-grow: var(--flex-grow);
      --xs-flex-shrink: var(--flex-shrink);
      --xs-flex-order: var(--flex-order);
      --xs-flex-self: var(--flex-self);
      flex-basis: var(--xs-flex-basis);
      flex-grow: var(--xs-flex-grow);
      flex-shrink: var(--xs-flex-shrink);
      order: var(--xs-flex-order);
      place-self: var(--xs-flex-self);
    }
  }
  @media (min-width: 30em) {
    .l-flex {
      --sm-flex-direction: var(--xs-flex-direction);
      --sm-flex-wrap: var(--xs-flex-wrap);
      --sm-flex-gap: var(--xs-flex-gap);
      --sm-flex-items: var(--xs-flex-items);
      --sm-flex-content: var(--xs-flex-content);
      flex-direction: var(--sm-flex-direction);
      flex-wrap: var(--sm-flex-wrap);
      gap: var(--sm-flex-gap);
      place-items: var(--sm-flex-items);
      place-content: var(--sm-flex-content);
    }
    .l-flex > * {
      --sm-flex-basis: var(--xs-flex-basis);
      --sm-flex-grow: var(--xs-flex-grow);
      --sm-flex-shrink: var(--xs-flex-shrink);
      --sm-flex-order: var(--xs-flex-order);
      --sm-flex-self: var(--xs-flex-self);
      flex-basis: var(--sm-flex-basis);
      flex-grow: var(--sm-flex-grow);
      flex-shrink: var(--sm-flex-shrink);
      order: var(--sm-flex-order);
      place-self: var(--sm-flex-self);
    }
  }
  @media (min-width: 60em) {
    .l-flex {
      --md-flex-direction: var(--sm-flex-direction);
      --md-flex-wrap: var(--sm-flex-wrap);
      --md-flex-gap: var(--sm-flex-gap);
      --md-flex-items: var(--sm-flex-items);
      --md-flex-content: var(--sm-flex-content);
      flex-direction: var(--md-flex-direction);
      flex-wrap: var(--md-flex-wrap);
      gap: var(--md-flex-gap);
      place-items: var(--md-flex-items);
      place-content: var(--md-flex-content);
    }
    .l-flex > * {
      --md-flex-basis: var(--sm-flex-basis);
      --md-flex-grow: var(--sm-flex-grow);
      --md-flex-shrink: var(--sm-flex-shrink);
      --md-flex-order: var(--sm-flex-order);
      --md-flex-self: var(--sm-flex-self);
      flex-basis: var(--md-flex-basis);
      flex-grow: var(--md-flex-grow);
      flex-shrink: var(--md-flex-shrink);
      order: var(--md-flex-order);
      place-self: var(--md-flex-self);
    }
  }
  @media (min-width: 80em) {
    .l-flex {
      --lg-flex-direction: var(--md-flex-direction);
      --lg-flex-wrap: var(--md-flex-wrap);
      --lg-flex-gap: var(--md-flex-gap);
      --lg-flex-items: var(--md-flex-items);
      --lg-flex-content: var(--md-flex-content);
      flex-direction: var(--lg-flex-direction);
      flex-wrap: var(--lg-flex-wrap);
      gap: var(--lg-flex-gap);
      place-items: var(--lg-flex-items);
      place-content: var(--lg-flex-content);
    }
    .l-flex > * {
      --lg-flex-basis: var(--md-flex-basis);
      --lg-flex-grow: var(--md-flex-grow);
      --lg-flex-shrink: var(--md-flex-shrink);
      --lg-flex-order: var(--md-flex-order);
      --lg-flex-self: var(--md-flex-self);
      flex-basis: var(--lg-flex-basis);
      flex-grow: var(--lg-flex-grow);
      flex-shrink: var(--lg-flex-shrink);
      order: var(--lg-flex-order);
      place-self: var(--lg-flex-self);
    }
  }
  @media (min-width: 90em) {
    .l-flex {
      --xl-flex-direction: var(--lg-flex-direction);
      --xl-flex-wrap: var(--lg-flex-wrap);
      --xl-flex-gap: var(--lg-flex-gap);
      --xl-flex-items: var(--lg-flex-items);
      --xl-flex-content: var(--lg-flex-content);
      flex-direction: var(--xl-flex-direction);
      flex-wrap: var(--xl-flex-wrap);
      gap: var(--xl-flex-gap);
      place-items: var(--xl-flex-items);
      place-content: var(--xl-flex-content);
    }
    .l-flex > * {
      --xl-flex-basis: var(--lg-flex-basis);
      --xl-flex-grow: var(--lg-flex-grow);
      --xl-flex-shrink: var(--lg-flex-shrink);
      --xl-flex-order: var(--lg-flex-order);
      --xl-flex-self: var(--lg-flex-self);
      flex-basis: var(--xl-flex-basis);
      flex-grow: var(--xl-flex-grow);
      flex-shrink: var(--xl-flex-shrink);
      order: var(--xl-flex-order);
      place-self: var(--xl-flex-self);
    }
  }
}
@layer layouts {
  .l-frame {
    --frame-focus: 50% 50%;
    --frame-fit: cover;
    --frame-ratio: 1/1;
    position: relative;
    width: 100%;
    aspect-ratio: var(--frame-ratio);
    overflow: hidden;
  }
  .l-frame > * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--frame-fit);
    object-position: var(--frame-focus);
  }
  @media (min-width: 22em) {
    .l-frame {
      --xs-frame-focus: var(--frame-focus);
      --xs-frame-fit: var(--frame-fit);
      --xs-frame-ratio: var(--frame-ratio);
      aspect-ratio: var(--xs-frame-ratio);
    }
    .l-frame > * {
      object-fit: var(--xs-frame-fit);
      object-position: var(--xs-frame-focus);
    }
  }
  @media (min-width: 30em) {
    .l-frame {
      --sm-frame-focus: var(--xs-frame-focus);
      --sm-frame-fit: var(--xs-frame-fit);
      --sm-frame-ratio: var(--xs-frame-ratio);
      aspect-ratio: var(--sm-frame-ratio);
    }
    .l-frame > * {
      object-fit: var(--sm-frame-fit);
      object-position: var(--sm-frame-focus);
    }
  }
  @media (min-width: 60em) {
    .l-frame {
      --md-frame-focus: var(--sm-frame-focus);
      --md-frame-fit: var(--sm-frame-fit);
      --md-frame-ratio: var(--sm-frame-ratio);
      aspect-ratio: var(--md-frame-ratio);
    }
    .l-frame > * {
      object-fit: var(--md-frame-fit);
      object-position: var(--md-frame-focus);
    }
  }
  @media (min-width: 80em) {
    .l-frame {
      --lg-frame-focus: var(--md-frame-focus);
      --lg-frame-fit: var(--md-frame-fit);
      --lg-frame-ratio: var(--md-frame-ratio);
      aspect-ratio: var(--lg-frame-ratio);
    }
    .l-frame > * {
      object-fit: var(--lg-frame-fit);
      object-position: var(--lg-frame-focus);
    }
  }
  @media (min-width: 90em) {
    .l-frame {
      --xl-frame-focus: var(--lg-frame-focus);
      --xl-frame-fit: var(--lg-frame-fit);
      --xl-frame-ratio: var(--lg-frame-ratio);
      aspect-ratio: var(--xl-frame-ratio);
    }
    .l-frame > * {
      object-fit: var(--xl-frame-fit);
      object-position: var(--xl-frame-focus);
    }
  }
}
@layer layouts {
  .l-grid {
    --grid-columns: 1;
    --grid-column-size: 1fr;
    --grid-rows: 1;
    --grid-row-size: auto;
    --grid-auto-columns: auto;
    --grid-flow: row;
    --grid-gap: 0;
    --grid-items: normal;
    --grid-content: normal;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), var(--grid-column-size));
    grid-template-rows: repeat(var(--grid-rows), var(--grid-row-size));
    grid-auto-columns: var(--grid-auto-columns);
    grid-auto-flow: var(--grid-flow);
    gap: var(--grid-gap);
    place-items: var(--grid-items);
    place-content: var(--grid-content);
  }
  .l-grid > * {
    --grid-column: auto;
    --grid-row: auto;
    --grid-self: auto;
    grid-column: var(--grid-column);
    grid-row: var(--grid-row);
    place-self: var(--grid-self);
    max-width: 100%;
    min-width: 0;
    min-height: 0;
  }
  @media (min-width: 22em) {
    .l-grid {
      --xs-grid-columns: var(--grid-columns);
      --xs-grid-column-size: var(--grid-column-size);
      --xs-grid-rows: var(--grid-rows);
      --xs-grid-row-size: var(--grid-row-size);
      --xs-grid-auto-columns: var(--grid-auto-columns);
      --xs-grid-flow: var(--grid-flow);
      --xs-grid-gap: var(--grid-gap);
      --xs-grid-items: var(--grid-items);
      --xs-grid-content: var(--grid-content);
      grid-template-columns: repeat(var(--xs-grid-columns), var(--xs-grid-column-size));
      grid-template-rows: repeat(var(--xs-grid-rows), var(--xs-grid-row-size));
      grid-auto-columns: var(--xs-grid-auto-columns);
      grid-auto-flow: var(--xs-grid-flow);
      gap: var(--xs-grid-gap);
      place-items: var(--xs-grid-items);
      place-content: var(--xs-grid-content);
    }
    .l-grid > * {
      --xs-grid-column: var(--grid-column);
      --xs-grid-row: var(--grid-row);
      --xs-grid-self: var(--grid-self);
      grid-column: var(--xs-grid-column);
      grid-row: var(--xs-grid-row);
      place-self: var(--xs-grid-self);
    }
  }
  @media (min-width: 30em) {
    .l-grid {
      --sm-grid-columns: var(--xs-grid-columns);
      --sm-grid-column-size: var(--xs-grid-column-size);
      --sm-grid-rows: var(--xs-grid-rows);
      --sm-grid-row-size: var(--xs-grid-row-size);
      --sm-grid-auto-columns: var(--xs-grid-auto-columns);
      --sm-grid-flow: var(--xs-grid-flow);
      --sm-grid-gap: var(--xs-grid-gap);
      --sm-grid-items: var(--xs-grid-items);
      --sm-grid-content: var(--xs-grid-content);
      grid-template-columns: repeat(var(--sm-grid-columns), var(--sm-grid-column-size));
      grid-template-rows: repeat(var(--sm-grid-rows), var(--sm-grid-row-size));
      grid-auto-columns: var(--sm-grid-auto-columns);
      grid-auto-flow: var(--sm-grid-flow);
      gap: var(--sm-grid-gap);
      place-items: var(--sm-grid-items);
      place-content: var(--sm-grid-content);
    }
    .l-grid > * {
      --sm-grid-column: var(--xs-grid-column);
      --sm-grid-row: var(--xs-grid-row);
      --sm-grid-self: var(--xs-grid-self);
      grid-column: var(--sm-grid-column);
      grid-row: var(--sm-grid-row);
      place-self: var(--sm-grid-self);
    }
  }
  @media (min-width: 60em) {
    .l-grid {
      --md-grid-columns: var(--sm-grid-columns);
      --md-grid-column-size: var(--sm-grid-column-size);
      --md-grid-rows: var(--sm-grid-rows);
      --md-grid-row-size: var(--sm-grid-row-size);
      --md-grid-auto-columns: var(--sm-grid-auto-columns);
      --md-grid-flow: var(--sm-grid-flow);
      --md-grid-gap: var(--sm-grid-gap);
      --md-grid-items: var(--sm-grid-items);
      --md-grid-content: var(--sm-grid-content);
      grid-template-columns: repeat(var(--md-grid-columns), var(--md-grid-column-size));
      grid-template-rows: repeat(var(--md-grid-rows), var(--md-grid-row-size));
      grid-auto-columns: var(--md-grid-auto-columns);
      grid-auto-flow: var(--md-grid-flow);
      gap: var(--md-grid-gap);
      place-items: var(--md-grid-items);
      place-content: var(--md-grid-content);
    }
    .l-grid > * {
      --md-grid-column: var(--sm-grid-column);
      --md-grid-row: var(--sm-grid-row);
      --md-grid-self: var(--sm-grid-self);
      grid-column: var(--md-grid-column);
      grid-row: var(--md-grid-row);
      place-self: var(--md-grid-self);
    }
  }
  @media (min-width: 80em) {
    .l-grid {
      --lg-grid-columns: var(--md-grid-columns);
      --lg-grid-column-size: var(--md-grid-column-size);
      --lg-grid-rows: var(--md-grid-rows);
      --lg-grid-row-size: var(--md-grid-row-size);
      --lg-grid-auto-columns: var(--md-grid-auto-columns);
      --lg-grid-flow: var(--md-grid-flow);
      --lg-grid-gap: var(--md-grid-gap);
      --lg-grid-items: var(--md-grid-items);
      --lg-grid-content: var(--md-grid-content);
      grid-template-columns: repeat(var(--lg-grid-columns), var(--lg-grid-column-size));
      grid-template-rows: repeat(var(--lg-grid-rows), var(--lg-grid-row-size));
      grid-auto-columns: var(--lg-grid-auto-columns);
      grid-auto-flow: var(--lg-grid-flow);
      gap: var(--lg-grid-gap);
      place-items: var(--lg-grid-items);
      place-content: var(--lg-grid-content);
    }
    .l-grid > * {
      --lg-grid-column: var(--md-grid-column);
      --lg-grid-row: var(--md-grid-row);
      --lg-grid-self: var(--md-grid-self);
      grid-column: var(--lg-grid-column);
      grid-row: var(--lg-grid-row);
      place-self: var(--lg-grid-self);
    }
  }
  @media (min-width: 90em) {
    .l-grid {
      --xl-grid-columns: var(--lg-grid-columns);
      --xl-grid-column-size: var(--lg-grid-column-size);
      --xl-grid-rows: var(--lg-grid-rows);
      --xl-grid-row-size: var(--lg-grid-row-size);
      --xl-grid-auto-columns: var(--lg-grid-auto-columns);
      --xl-grid-flow: var(--lg-grid-flow);
      --xl-grid-gap: var(--lg-grid-gap);
      --xl-grid-items: var(--lg-grid-items);
      --xl-grid-content: var(--lg-grid-content);
      grid-template-columns: repeat(var(--xl-grid-columns), var(--xl-grid-column-size));
      grid-template-rows: repeat(var(--xl-grid-rows), var(--xl-grid-row-size));
      grid-auto-columns: var(--xl-grid-auto-columns);
      grid-auto-flow: var(--xl-grid-flow);
      gap: var(--xl-grid-gap);
      place-items: var(--xl-grid-items);
      place-content: var(--xl-grid-content);
    }
    .l-grid > * {
      --xl-grid-column: var(--lg-grid-column);
      --xl-grid-row: var(--lg-grid-row);
      --xl-grid-self: var(--lg-grid-self);
      grid-column: var(--xl-grid-column);
      grid-row: var(--xl-grid-row);
      place-self: var(--xl-grid-self);
    }
  }
}
@layer layouts {
  .l-spacer {
    --spacer-margin: 0;
    --spacer-padding: 0;
    margin-block: var(--spacer-margin);
    padding-block: var(--spacer-padding);
  }
}
@layer layouts {
  .l-stack {
    --stack-space: 1em;
  }
  .l-stack > * + * {
    margin-block-start: var(--stack-space);
  }
}
@layer layouts {
  .l-switch {
    --switch-breakpoint: 0;
    --switch-gap: 0;
    --switch-items: normal;
    --switch-content: normal;
    display: flex;
    flex-wrap: wrap;
    gap: var(--switch-gap);
    place-items: var(--switch-items);
    place-content: var(--switch-content);
  }
  .l-switch > * {
    --switch-grow: 1;
    --switch-order: 0;
    --switch-self: auto;
    flex-basis: max((var(--switch-breakpoint) - 100%) * 999, 0px);
    flex-grow: calc(var(--switch-grow));
    place-self: var(--switch-self);
  }
}
@layer layouts {
  .l-wrap {
    --wrap-width: 100%;
    --wrap-max-width: 120rem;
    --wrap-margin: auto;
    --wrap-padding: var(--base-margin);
    width: var(--wrap-width);
    max-width: var(--wrap-max-width);
    margin-inline: var(--wrap-margin);
    padding-inline: var(--wrap-padding);
  }
  @media (min-width: 22em) {
    .l-wrap {
      --xs-wrap-width: var(--wrap-width);
      --xs-wrap-max-width: var(--wrap-max-width);
      --xs-wrap-margin: var(--wrap-margin);
      --xs-wrap-padding: var(--wrap-padding);
      width: var(--xs-wrap-width);
      max-width: var(--xs-wrap-max-width);
      margin-inline: var(--xs-wrap-margin);
      padding-inline: var(--xs-wrap-padding);
    }
  }
  @media (min-width: 30em) {
    .l-wrap {
      --sm-wrap-width: var(--xs-wrap-width);
      --sm-wrap-max-width: var(--xs-wrap-max-width);
      --sm-wrap-margin: var(--xs-wrap-margin);
      --sm-wrap-padding: var(--xs-wrap-padding);
      width: var(--sm-wrap-width);
      max-width: var(--sm-wrap-max-width);
      margin-inline: var(--sm-wrap-margin);
      padding-inline: var(--sm-wrap-padding);
    }
  }
  @media (min-width: 60em) {
    .l-wrap {
      --md-wrap-width: var(--sm-wrap-width);
      --md-wrap-max-width: var(--sm-wrap-max-width);
      --md-wrap-margin: var(--sm-wrap-margin);
      --md-wrap-padding: var(--sm-wrap-padding);
      width: var(--md-wrap-width);
      max-width: var(--md-wrap-max-width);
      margin-inline: var(--md-wrap-margin);
      padding-inline: var(--md-wrap-padding);
    }
  }
  @media (min-width: 80em) {
    .l-wrap {
      --lg-wrap-width: var(--md-wrap-width);
      --lg-wrap-max-width: var(--md-wrap-max-width);
      --lg-wrap-margin: var(--md-wrap-margin);
      --lg-wrap-padding: var(--md-wrap-padding);
      width: var(--lg-wrap-width);
      max-width: var(--lg-wrap-max-width);
      margin-inline: var(--lg-wrap-margin);
      padding-inline: var(--lg-wrap-padding);
    }
  }
  @media (min-width: 90em) {
    .l-wrap {
      --xl-wrap-width: var(--lg-wrap-width);
      --xl-wrap-max-width: var(--lg-wrap-max-width);
      --xl-wrap-margin: var(--lg-wrap-margin);
      --xl-wrap-padding: var(--lg-wrap-padding);
      width: var(--xl-wrap-width);
      max-width: var(--xl-wrap-max-width);
      margin-inline: var(--xl-wrap-margin);
      padding-inline: var(--xl-wrap-padding);
    }
  }
}
@layer layouts {
  .l-display {
    --display: block;
    display: var(--display);
  }
  @media (min-width: 22em) {
    .l-display {
      --xs-display: var(--display);
      display: var(--xs-display);
    }
  }
  @media (min-width: 30em) {
    .l-display {
      --sm-display: var(--xs-display);
      display: var(--sm-display);
    }
  }
  @media (min-width: 60em) {
    .l-display {
      --md-display: var(--sm-display);
      display: var(--md-display);
    }
  }
  @media (min-width: 80em) {
    .l-display {
      --lg-display: var(--md-display);
      display: var(--lg-display);
    }
  }
  @media (min-width: 90em) {
    .l-display {
      --xl-display: var(--lg-display);
      display: var(--xl-display);
    }
  }
}
@layer utilities {
  .u-line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: var(--line-clamp, 1);
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@layer utilities {
  .u-link-stretch {
    position: static;
  }
  .u-link-stretch::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: var(--link-stretch-z-index, 1);
    width: 100%;
    height: 100%;
    border-radius: var(--link-stretch-border-radius, 0);
    cursor: pointer;
  }
  .u-link-stretch:focus-visible {
    outline: none;
  }
  .u-link-stretch:focus-visible::before {
    outline: var(--link-stretch-outline-width, 0.125rem) var(--link-stretch-outline-type, solid) var(--link-stretch-outline-color, currentColor);
  }
}
@layer utilities {
  .u-visually-hidden {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;
    white-space: nowrap;
  }
}
@layer utilities {
  .u-z-100 {
    z-index: var(--z-100);
  }
  .u-z-200 {
    z-index: var(--z-200);
  }
  .u-z-300 {
    z-index: var(--z-300);
  }
  .u-z-400 {
    z-index: var(--z-400);
  }
  .u-z-500 {
    z-index: var(--z-500);
  }
  .u-z-max {
    z-index: var(--z-max);
  }
  .u-text-display {
    font-size: var(--text-2xl-6xl);
    font-family: var(--font-headline);
    letter-spacing: var(--tracking-xs);
    font-weight: var(--font-regular);
    line-height: var(--leading-xs);
  }
  .u-text-headline {
    font-size: var(--text-2xl-4xl);
    font-weight: var(--font-medium);
    font-family: var(--font-headline);
    letter-spacing: var(--tracking-xs);
    line-height: var(--leading-xs);
  }
  .u-text-subhead {
    font-size: var(--text-lg-xl);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-xs);
    line-height: var(--leading-xs);
  }
  .u-text-body {
    font-size: var(--text-sm-md);
    font-weight: var(--font-regular);
    font-family: var(--font-sans);
    line-height: var(--leading-md);
  }
  .u-text-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-sm);
    line-height: var(--leading-sm);
  }
  .u-text-balance {
    text-wrap: balance;
  }
  .u-bg-white {
    background-color: var(--color-white);
  }
  .u-bg-black {
    background-color: var(--color-black);
  }
  .u-bg-semitrans {
    background-color: var(--color-semitrans);
  }
  .u-bg-darktrans {
    background-color: var(--color-darktrans);
  }
  .u-bg-off-white {
    background-color: var(--color-off-white);
  }
  .u-bg-light-yellow {
    background-color: var(--color-light-yellow);
  }
  .u-bg-yellow {
    background-color: var(--color-yellow);
  }
  .u-bg-light-blue {
    background-color: var(--color-light-blue);
  }
  .u-bg-dark-yellow {
    background-color: var(--color-dark-yellow);
  }
  .u-bg-splash-yellow {
    background-color: var(--color-splash-yellow);
  }
  .u-bg-blue {
    background-color: var(--color-blue);
  }
  .u-bg-pink {
    background-color: var(--color-pink);
  }
  .u-text-white {
    color: var(--color-white);
  }
  .u-text-black {
    color: var(--color-black);
  }
  .u-text-semitrans {
    color: var(--color-semitrans);
  }
  .u-text-darktrans {
    color: var(--color-darktrans);
  }
  .u-text-off-white {
    color: var(--color-off-white);
  }
  .u-text-light-yellow {
    color: var(--color-light-yellow);
  }
  .u-text-yellow {
    color: var(--color-yellow);
  }
  .u-text-light-blue {
    color: var(--color-light-blue);
  }
  .u-text-dark-yellow {
    color: var(--color-dark-yellow);
  }
  .u-text-splash-yellow {
    color: var(--color-splash-yellow);
  }
  .u-text-blue {
    color: var(--color-blue);
  }
  .u-text-pink {
    color: var(--color-pink);
  }
  .u-font-sans {
    font-family: var(--font-sans);
  }
  .u-font-serif {
    font-family: var(--font-serif);
  }
  .u-font-mono {
    font-family: var(--font-mono);
  }
  .u-font-headline {
    font-family: var(--font-headline);
  }
  .u-text-2xs {
    font-size: var(--text-2xs);
  }
  .u-text-2xs-xs {
    font-size: var(--text-2xs-xs);
  }
  .u-text-2xs-sm {
    font-size: var(--text-2xs-sm);
  }
  .u-text-2xs-md {
    font-size: var(--text-2xs-md);
  }
  .u-text-2xs-lg {
    font-size: var(--text-2xs-lg);
  }
  .u-text-2xs-xl {
    font-size: var(--text-2xs-xl);
  }
  .u-text-2xs-2xl {
    font-size: var(--text-2xs-2xl);
  }
  .u-text-2xs-3xl {
    font-size: var(--text-2xs-3xl);
  }
  .u-text-2xs-4xl {
    font-size: var(--text-2xs-4xl);
  }
  .u-text-2xs-5xl {
    font-size: var(--text-2xs-5xl);
  }
  .u-text-2xs-6xl {
    font-size: var(--text-2xs-6xl);
  }
  .u-text-xs {
    font-size: var(--text-xs);
  }
  .u-text-xs-sm {
    font-size: var(--text-xs-sm);
  }
  .u-text-xs-md {
    font-size: var(--text-xs-md);
  }
  .u-text-xs-lg {
    font-size: var(--text-xs-lg);
  }
  .u-text-xs-xl {
    font-size: var(--text-xs-xl);
  }
  .u-text-xs-2xl {
    font-size: var(--text-xs-2xl);
  }
  .u-text-xs-3xl {
    font-size: var(--text-xs-3xl);
  }
  .u-text-xs-4xl {
    font-size: var(--text-xs-4xl);
  }
  .u-text-xs-5xl {
    font-size: var(--text-xs-5xl);
  }
  .u-text-xs-6xl {
    font-size: var(--text-xs-6xl);
  }
  .u-text-sm {
    font-size: var(--text-sm);
  }
  .u-text-sm-md {
    font-size: var(--text-sm-md);
  }
  .u-text-sm-lg {
    font-size: var(--text-sm-lg);
  }
  .u-text-sm-xl {
    font-size: var(--text-sm-xl);
  }
  .u-text-sm-2xl {
    font-size: var(--text-sm-2xl);
  }
  .u-text-sm-3xl {
    font-size: var(--text-sm-3xl);
  }
  .u-text-sm-4xl {
    font-size: var(--text-sm-4xl);
  }
  .u-text-sm-5xl {
    font-size: var(--text-sm-5xl);
  }
  .u-text-sm-6xl {
    font-size: var(--text-sm-6xl);
  }
  .u-text-md {
    font-size: var(--text-md);
  }
  .u-text-md-lg {
    font-size: var(--text-md-lg);
  }
  .u-text-md-xl {
    font-size: var(--text-md-xl);
  }
  .u-text-md-2xl {
    font-size: var(--text-md-2xl);
  }
  .u-text-md-3xl {
    font-size: var(--text-md-3xl);
  }
  .u-text-md-4xl {
    font-size: var(--text-md-4xl);
  }
  .u-text-md-5xl {
    font-size: var(--text-md-5xl);
  }
  .u-text-md-6xl {
    font-size: var(--text-md-6xl);
  }
  .u-text-lg {
    font-size: var(--text-lg);
  }
  .u-text-lg-xl {
    font-size: var(--text-lg-xl);
  }
  .u-text-lg-2xl {
    font-size: var(--text-lg-2xl);
  }
  .u-text-lg-3xl {
    font-size: var(--text-lg-3xl);
  }
  .u-text-lg-4xl {
    font-size: var(--text-lg-4xl);
  }
  .u-text-lg-5xl {
    font-size: var(--text-lg-5xl);
  }
  .u-text-lg-6xl {
    font-size: var(--text-lg-6xl);
  }
  .u-text-xl {
    font-size: var(--text-xl);
  }
  .u-text-xl-2xl {
    font-size: var(--text-xl-2xl);
  }
  .u-text-xl-3xl {
    font-size: var(--text-xl-3xl);
  }
  .u-text-xl-4xl {
    font-size: var(--text-xl-4xl);
  }
  .u-text-xl-5xl {
    font-size: var(--text-xl-5xl);
  }
  .u-text-xl-6xl {
    font-size: var(--text-xl-6xl);
  }
  .u-text-2xl {
    font-size: var(--text-2xl);
  }
  .u-text-2xl-3xl {
    font-size: var(--text-2xl-3xl);
  }
  .u-text-2xl-4xl {
    font-size: var(--text-2xl-4xl);
  }
  .u-text-2xl-5xl {
    font-size: var(--text-2xl-5xl);
  }
  .u-text-2xl-6xl {
    font-size: var(--text-2xl-6xl);
  }
  .u-text-3xl {
    font-size: var(--text-3xl);
  }
  .u-text-3xl-4xl {
    font-size: var(--text-3xl-4xl);
  }
  .u-text-3xl-5xl {
    font-size: var(--text-3xl-5xl);
  }
  .u-text-3xl-6xl {
    font-size: var(--text-3xl-6xl);
  }
  .u-text-4xl {
    font-size: var(--text-4xl);
  }
  .u-text-4xl-5xl {
    font-size: var(--text-4xl-5xl);
  }
  .u-text-4xl-6xl {
    font-size: var(--text-4xl-6xl);
  }
  .u-text-5xl {
    font-size: var(--text-5xl);
  }
  .u-text-5xl-6xl {
    font-size: var(--text-5xl-6xl);
  }
  .u-text-6xl {
    font-size: var(--text-6xl);
  }
  .u-font-light {
    font-weight: var(--font-light);
  }
  .u-font-regular {
    font-weight: var(--font-regular);
  }
  .u-font-medium {
    font-weight: var(--font-medium);
  }
  .u-font-semibold {
    font-weight: var(--font-semibold);
  }
  .u-font-bold {
    font-weight: var(--font-bold);
  }
  .u-tracking-xs {
    letter-spacing: var(--tracking-xs);
  }
  .u-tracking-sm {
    letter-spacing: var(--tracking-sm);
  }
  .u-tracking-lg {
    letter-spacing: var(--tracking-lg);
  }
  .u-tracking-xl {
    letter-spacing: var(--tracking-xl);
  }
  .u-leading-xs {
    line-height: var(--leading-xs);
  }
  .u-leading-sm {
    line-height: var(--leading-sm);
  }
  .u-leading-md {
    line-height: var(--leading-md);
  }
  .u-leading-lg {
    line-height: var(--leading-lg);
  }
  .u-text-left {
    text-align: left;
  }
  .u-text-center {
    text-align: center;
  }
  .u-text-right {
    text-align: right;
  }
  .u-text-upper {
    text-transform: uppercase;
  }
  .u-text-lower {
    text-transform: lowercase;
  }
  .u-text-caps {
    text-transform: capitalize;
  }
}
@layer base {
  @font-face {
    font-family: "Julkalendern";
    src: url("/assets/fonts/Julkalendern.woff2");
    font-weight: 400;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/fonts/Satoshi-Light.woff2");
    font-weight: 300;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/fonts/Satoshi-Regular.woff2");
    font-weight: 400;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/fonts/Satoshi-Medium.woff2");
    font-weight: 500;
  }
  @font-face {
    font-family: "Satoshi";
    src: url("/assets/fonts/Satoshi-Bold.woff2");
    font-weight: 700;
  }
  :root {
    --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
    --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
    --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
    --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
    --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
    --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
    --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
    --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
    --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
    --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
    --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
    --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
    --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animation-ease: var(--ease-out-cubic);
    --animation-duration: 200ms;
    --animation-delay: 0ms;
    --base-grid: 12;
    --base-gap: var(--space-2xs-md);
    --base-margin: var(--space-xs-2xl);
    --base-content-max-width: 60rem;
    --base-border-radius: var(--radius-md);
    --transition-transform: transform 0.2s var(--ease-in-out-sine);
    --base-border: 1px solid var(--color-semitrans);
    --base-border-yellow: 1px solid var(--color-dark-yellow);
    --root-adminbar-height: 2.5rem;
  }
  html[data-overlay=true] {
    overflow: hidden;
  }
  html {
    background-color: var(--color-off-white);
  }
  [id] {
    scroll-margin-top: var(--space-xl-3xl);
  }
  body {
    display: flex;
    flex-direction: column;
  }
  body {
    font-size: var(--text-sm);
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-sm);
    line-height: var(--leading-md);
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-xs);
  }
  h1 {
    font-size: var(--text-xl-2xl);
    line-height: var(--leading-xs);
  }
  h2 {
    font-size: var(--text-lg-xl);
    line-height: var(--leading-xs);
  }
  h3 {
    font-size: var(--text-md-lg);
    line-height: var(--leading-sm);
  }
  h4 {
    font-size: var(--text-sm-md);
    line-height: var(--leading-sm);
  }
  h5 {
    font-size: var(--text-xs-sm);
    line-height: var(--leading-md);
  }
  h6 {
    font-size: var(--text-xs);
    line-height: var(--leading-md);
  }
  strong {
    font-weight: var(--font-medium);
  }
  html[data-js=true] img[loading=lazy],
  html[data-js=true] video {
    opacity: 0;
  }
  img[loading=lazy][data-animation=loaded],
  video[data-animation=loaded] {
    --animation-delay: 0ms;
    --animation-duration: 400ms;
    animation: fadeIn var(--animation-ease) var(--animation-duration) var(--animation-delay) forwards;
  }
  figure,
  img {
    display: block;
    width: 100%;
  }
  .animation-zoom-in {
    --animation-delay: 100ms;
    --animation-duration: 600ms;
  }
  html[data-js=true] .animation-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--animation-ease) var(--animation-duration) var(--animation-delay), transform var(--animation-ease) var(--animation-duration) var(--animation-delay);
  }
  html[data-js=true] .animation-zoom-in[data-animation=loaded] {
    opacity: 1;
    transform: scale(1);
  }
  @keyframes slideUp {
    from {
      transform: translateY(clamp(2rem, 50%, 4rem));
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes slideDown {
    from {
      transform: translateY(clamp(-4rem, -50%, -2rem));
    }
    to {
      transform: translateY(0);
    }
  }
  @keyframes fadeIn {
    from {
      opacity: var(--from-opacity, 0);
    }
    to {
      opacity: var(--to-opacity, 1);
    }
  }
}
@layer layouts {
  .l-grid {
    --grid-gap: var(--base-gap);
  }
}
@layer utilities {
  .u-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    line-height: var(--leading-sm);
  }
  .u-arrow-link {
    display: flex;
    align-items: center;
  }
  .u-arrow-link > *:first-child {
    padding-inline-end: var(--space-3xs-2xs);
    transition: padding var(--animation-ease) 200ms;
  }
  .u-arrow-link:hover > *:first-child {
    padding-inline-end: var(--space-2xs-xs);
  }
  .u-arrow-link svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .u-padding-page-top {
    padding-top: var(--space-3xl-5xl);
  }
  .u-card-heading {
    font-size: var(--text-md-xl);
    font-weight: var(--font-medium);
  }
  .u-link-ball {
    background-color: var(--color-yellow);
    display: flex;
    width: 2rem;
    height: 2rem;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-max);
  }
  .u-link-ball svg {
    width: 0.875rem;
    height: 0.875rem;
  }
  .u-block-heading {
    font-family: var(--font-headline);
    font-weight: var(--font-regular);
    font-size: var(--text-xl-2xl);
    margin-bottom: var(--space-sm-md);
  }
  .u-link-stretch {
    --link-stretch-border-radius: var(--base-border-radius);
  }
  .u-margin-inline-center {
    margin-inline: auto;
  }
  .u-illustration {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
  }
  .u-illustration > svg,
  .u-illustration > lottie-player {
    width: auto;
    height: 100%;
    max-width: 100%;
    max-height: 20rem;
  }
}
@layer views {
  .block-stack > *:not([data-page-block=poster]) {
    padding-block: var(--space-xl-3xl);
  }
  .block-stack > * + * {
    --stack-space: 0;
  }
  .block-stack [data-block-bg=striped] {
    background: repeating-linear-gradient(90deg, #F5C642 0px, #F5C642 80px, #F5D068 80px, #F5D068 160px);
  }
  .block-stack [data-block-bg=striped] + [data-block-bg=striped] {
    padding-top: 0;
  }
  .block-stack [data-block-bg=plain] + [data-block-bg=plain] {
    padding-top: 0;
  }
  .block-stack[data-hero=hero-cover] [data-block-bg=striped]:first-child {
    padding-block: 0 var(--space-xl-3xl);
  }
  .block-stack[data-hero=hero-cover] [data-block-bg=striped]:first-child > * {
    z-index: var(--z-400);
    position: relative;
    transform: translateY(calc(var(--space-lg-2xl) * -1));
    margin-bottom: calc(var(--space-lg-2xl) * -1);
  }
}
@layer views {
  .button {
    --button-align-items: center;
    --button-justify-content: center;
    --button-gap: 0.5em;
    --button-padding: var(--space-2xs-xs) var(--space-xs-md);
    --button-background-color: var(--color-blue);
    --button-background-color-hover: color(from var(--color-blue) srgb r g b / 0.9);
    --button-background-color-active: var(--button-background-color-hover);
    --button-color: var(--color-white);
    --button-color-hover: var(--color-white);
    --button-color-active: var(--button-color-hover);
    --button-backdrop-filter: 0px;
    --button-border-width: 0.0625em;
    --button-border-style: solid;
    --button-border-color: var(--button-background-color);
    --button-border-color-hover: var(--button-background-color-hover);
    --button-radius: var(--radius-md);
    --button-font-family: var(--font-sans);
    --button-font-size: var(--text-sm-md);
    --button-font-weight: var(--font-medium);
    --button-leading: var(--leading-sm);
    --button-tracking: var(--tracking-md);
    --button-text-decoration: none;
    --button-icon-size: 1.5cap;
    --focus-ring-color: var(--button-background-color);
    display: inline-flex;
    align-items: var(--button-align-items);
    justify-content: var(--button-justify-content);
    gap: var(--button-gap);
    padding: var(--button-padding);
    background-color: var(--button-background-color);
    color: var(--button-color);
    backdrop-filter: blur(var(--button-backdrop-filter));
    border-width: var(--button-border-width);
    border-style: var(--button-border-style);
    border-color: var(--button-border-color);
    border-radius: var(--button-radius);
    font-family: var(--button-font-family);
    font-size: var(--button-font-size);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-tracking);
    line-height: var(--button-leading);
    text-decoration: var(--button-text-decoration);
    text-align: center;
  }
  .navbar .button {
    white-space: nowrap;
  }
  .button {
    cursor: pointer;
    transition: background-color var(--animation-ease) 200ms, border-color var(--animation-ease) 200ms, transform var(--animation-ease) 100ms;
  }
  .button:hover {
    background-color: var(--button-background-color-hover);
    color: var(--button-color-hover);
    border-color: var(--button-border-color-hover);
  }
  .button:active {
    transform: scale(98%);
    color: var(--button-color-active);
    background-color: var(--button-background-color-active);
  }
  .button > svg {
    flex: none;
    width: auto;
    height: var(--button-icon-size);
  }
  .button > svg:first-child {
    margin-inline-start: -0.125em;
  }
  .button > svg:last-child {
    margin-inline-end: -0.125em;
  }
  .button[data-variant=secondary] {
    --button-background-color: var(--color-off-white);
    --button-background-color-hover: var(--color-white);
    --button-color: var(--color-black);
    --button-color-hover: var(--color-black);
    --button-border-color: var(--button-background-color);
    --button-border-color-hover: var(--button-background-color-hover);
  }
  .button[data-variant=accent] {
    --button-background-color: var(--color-yellow);
    --button-background-color-hover: color(from var(--color-yellow) srgb r g b / 0.9);
    --button-color: var(--color-black);
    --button-color-hover: var(--color-black);
    --button-border-color: var(--button-background-color);
    --button-border-color-hover: var(--button-background-color-hover);
  }
  .button[data-variant=text] {
    --button-padding: 0;
    --button-background-color: transparent;
    --button-background-color-hover: transparent;
    --button-color: var(--color-black);
    --button-color-hover: var(--color-black);
    --button-border-width: 0;
    --focus-ring-color: currentColor;
  }
  .button[data-size=small] {
    --button-font-size: var(--text-sm);
    --button-padding: var(--space-4xs-3xs) var(--space-3xs-2xs);
  }
}
@layer views {
  .cta-card {
    --switch-breakpoint: 18rem;
    background-color: color(from var(--color-pink) srgb r g b/0.75);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all var(--animation-ease) 200ms;
  }
  .cta-card:hover {
    background-color: var(--color-pink);
  }
  .cta-card-image {
    --switch-grow: 1;
    --frame-ratio: 5/4;
  }
  .cta-card-content {
    --switch-grow: 1.5;
    --grid-content: space-between;
    --grid-gap: var(--space-sm);
    padding: var(--space-xs);
  }
  .cta-card-heading {
    font-size: var(--text-md-lg);
  }
}
@layer views {
  .center-text-wrap {
    --center-text-wrap-max-width: 60ch;
    max-width: var(--center-text-wrap-max-width);
  }
}
@layer views {
  .collage-wrap {
    --collage-wrap-border-radius: var(--base-border-radius);
    overflow: hidden;
  }
  @media (min-width: 60em) {
    .collage-wrap {
      border-radius: var(--collage-wrap-border-radius);
    }
  }
  .collage-grid {
    --grid-gap: var(--base-gap);
    --md-grid-gap: 0;
  }
  .collage[data-items-count="2"] .collage-grid {
    --md-grid-columns: 2;
  }
  .collage[data-items-count="3"] .collage-grid {
    --md-grid-columns: 3;
  }
  .collage[data-items-count="4"] .collage-grid {
    --md-grid-columns: 4;
  }
  .collage[data-items-count="5"] .collage-grid {
    --md-grid-columns: 4;
  }
  .collage-item {
    --collage-item-border-radius: var(--base-border-radius);
    position: relative;
    overflow: hidden;
    border-radius: var(--collage-wrap-border-radius);
  }
  @media (min-width: 60em) {
    .collage-item {
      border-radius: 0;
    }
  }
  .collage[data-items-count="3"] .collage-item {
    --md-grid-column: span 1;
  }
  .collage[data-items-count="4"] .collage-item {
    --md-grid-column: span 2;
  }
  .collage[data-items-count="5"] .collage-item {
    --md-grid-column: span 2;
  }
  .collage[data-items-count="5"] .collage-item:nth-child(-n+3) {
    --md-grid-columns: 2;
  }
  .collage[data-items-count="5"] .collage-item:nth-child(-n+3) .collage-item-overlay,
  .collage[data-items-count="5"] .collage-item:nth-child(-n+3) .collage-item-media {
    --md-grid-column: 1/-1;
  }
  .collage[data-items-count="5"] .collage-item:nth-child(4) {
    --md-grid-column: span 1;
  }
  .collage[data-items-count="5"] .collage-item:nth-child(5) {
    --md-grid-column: span 1;
  }
  .collage-item-overlay {
    --grid-column: 1;
    --grid-row: 1/3;
    z-index: var(--z-200);
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
  }
  .collage-item-media {
    --frame-ratio: 1/1;
    --md-frame-ratio: 16/9;
    --grid-column: 1;
    --grid-row: 1/3;
    z-index: var(--z-100);
    height: 100%;
  }
  .collage[data-items-count="3"] .collage-item-media {
    --frame-ratio: 1/1;
    --md-frame-ratio: 5/7;
  }
  .collage[data-items-count="2"] .collage-item-media, .collage[data-items-count="4"] .collage-item-media, .collage[data-items-count="5"] .collage-item-media {
    --frame-ratio: 1/1;
    --md-frame-ratio: 7/5;
  }
  .collage-item-content {
    --collage-item-content-border-radius: calc(var(--base-border-radius) / 2);
    --collage-item-content-margin: var(--space-2xs-md);
    --collage-item-content-padding: var(--space-xs-sm);
    --grid-column: 1;
    --grid-self: end normal;
    --grid-row: 2;
    z-index: var(--z-300);
    min-height: fit-content;
    margin: var(--collage-item-content-margin);
    padding: var(--collage-item-content-padding);
    background-color: var(--color-white);
    border-radius: var(--collage-item-content-border-radius);
    overflow: hidden;
  }
}
@layer views {
  .contact-form {
    --contact-form-entity-grid-gap: var(--base-gap);
    --md-contact-form-entity-grid-columns: var(--base-grid);
    --contact-form-intro-margin-block-start: 0.5rem;
    --md-contact-form-intro-grid-column: 1 / 5;
    --md-contact-form-data-grid-column: 5 / -1;
    --contact-form-heading-font-size: var(--text-xl-2xl);
    --contact-form-heading-font-weight: var(--font-semibold);
    --contact-form-heading-font-family: var(--font-sans);
    --contact-form-heading-opacity: 1;
    --contact-form-text-font-size: var(--text-sm-md);
    --contact-form-text-font-weight: var(--font-regular);
    --contact-form-text-font-family: var(--font-sans);
    --contact-form-text-opacity: var(--opacity-70);
  }
  .contact-form-entity {
    --grid-gap: var(--contact-form-entity-grid-gap);
    --md-grid-columns: var(--md-contact-form-entity-grid-columns);
  }
  .contact-form-intro {
    --stack-space: var(--contact-form-intro-margin-block-start);
    --md-grid-column: var(--md-contact-form-intro-grid-column);
  }
  .contact-form-heading {
    font-size: var(--contact-form-heading-font-size);
    font-weight: var(--contact-form-heading-font-weight);
    font-family: var(--contact-form-heading-font-family);
    opacity: var(--contact-form-heading-opacity);
  }
  .contact-form-text {
    font-size: var(--contact-form-text-font-size);
    font-weight: var(--contact-form-text-font-weight);
    font-family: var(--contact-form-text-font-family);
    opacity: var(--contact-form-text-opacity);
  }
  .contact-form-data {
    --md-grid-column: var(--md-contact-form-data-grid-column);
  }
  .form {
    --form-fields-grid-gap: var(--base-gap);
    --form-fields-margin-block-end: var(--base-gap);
    --md-form-fields-grid-columns: 8;
    --form-field-padding: var(--space-2xs);
    --form-field-margin-block-start: var(--space-2xs);
    --form-field-border: 1px solid var(--color-black-alpha-10);
    --form-field-border-block-end: var(--form-field-border);
    --form-field-border-radius: var(--radius-sm);
    --md-form-field-grid-column: span 4;
    --form-field-label-font-size: var(--text-sm);
    --form-field-label-font-weight: var(--font-regular);
    --form-field-label-font-family: var(--font-sans);
    --form-field-label-opacity: 1;
  }
  .form-fields {
    --grid-gap: var(--form-fields-grid-gap);
    --md-grid-columns: var(--md-form-fields-grid-columns);
    margin-block-end: var(--form-fields-margin-block-end);
  }
  .form-field {
    --stack-space: var(--form-field-margin-block-start);
    --md-grid-column: var(--md-form-field-grid-column);
    display: flex;
    flex-direction: column;
  }
  .form-field > input,
  .form-field > textarea {
    padding: var(--form-field-padding);
    border: var(--form-field-border);
    border-block-end: var(--form-field-border-block-end);
    border-radius: var(--form-field-border-radius);
  }
  .form-field > textarea {
    resize: vertical;
  }
  .form-field:last-child {
    --md-form-field-grid-column: 1 / -1;
  }
  .form-field-label {
    font-size: var(--form-field-label-font-size);
    font-weight: var(--form-field-label-font-weight);
    font-family: var(--form-field-label-font-family);
    opacity: var(--form-field-label-opacity);
  }
}
@layer views {
  .featured-card {
    padding: var(--space-3xs-xs);
    padding-top: var(--space-2xs-sm);
    position: relative;
    background-color: var(--color-light-yellow);
    border-radius: var(--base-border-radius);
  }
  .featured-card:hover figure > * {
    transform: scale(1.1);
  }
  .featured-card-figure {
    overflow: visible;
    border-radius: var(--radius-sm);
    background-color: var(--color-light-blue);
    overflow: hidden;
  }
  .featured-card-figure > * {
    transition: transform var(--animation-ease) 600ms;
  }
  [data-type=graphic] .graphic-container {
    --grid-items: center;
    position: relative;
  }
  [data-type=graphic] .graphic-container > img {
    margin-inline: auto;
    transition: opacity var(--animation-ease) 200ms;
  }
  [data-type=graphic] .graphic-container > img:last-child {
    opacity: 0 !important;
    transition: opacity var(--animation-ease) 600ms;
  }
  [data-type=graphic] .graphic-container > img {
    position: absolute;
    padding-inline: var(--space-3xs);
    transform: scale(1) translateY(0);
  }
  [data-type=graphic]:hover .graphic-container > img:first-child {
    opacity: 0 !important;
  }
  [data-type=graphic]:hover .graphic-container > img:last-child {
    opacity: 1 !important;
  }
  .featured-card-heading {
    text-align: center;
    padding-bottom: var(--space-2xs-xs);
  }
}
@layer views {
  .footer {
    --footer-menu-spacing: var(--space-4xs-3xs);
    position: relative;
    background-color: var(--color-pink);
    margin-top: auto;
  }
  .footer .footer-nav .column {
    padding-block: var(--space-md-lg);
    border-bottom: var(--base-border);
  }
  @media (min-width: 60em) {
    .footer .footer-nav .column {
      padding-inline: var(--base-gap);
    }
    .footer .footer-nav .column:first-of-type {
      padding-inline-start: 0;
    }
    .footer .footer-nav .column:not(:last-of-type) {
      border-right: var(--base-border);
    }
  }
  .footer .u-label {
    margin-bottom: var(--space-xs);
  }
  .footer ul {
    --stack-space: var(--footer-menu-spacing);
  }
  .footer-divider {
    --divider-height: 0.625rem;
    position: absolute;
    z-index: var(--z-300);
    top: calc(var(--divider-height) * -0.5);
    width: 100%;
    height: var(--divider-height);
    color: var(--color-black);
    background-image: url("/assets/public/images/slim-divider.svg");
  }
  .footer-nav {
    position: relative;
  }
  .footer-nav-link {
    font-size: var(--text-sm);
  }
  .footer-nav-link:hover {
    text-decoration: underline;
  }
  .footer-meta {
    padding-block: var(--space-sm-md);
  }
  .footer-honors {
    --flex-gap: var(--space-sm-md);
    --flex-wrap: wrap;
    --flex-items: center;
  }
  .footer-honors img {
    width: auto;
    height: 4rem;
  }
  .footer-list {
    --flex-gap: var(--base-gap);
    --flex-wrap: wrap;
    --md-flex-content: start end;
    width: 100%;
  }
  .footer-logo svg {
    width: auto;
    height: 4rem;
  }
  .footer-animation {
    position: absolute;
    top: 0;
    right: 0;
    z-index: var(--z-100);
    width: min(80%, 20rem);
    height: auto;
    pointer-events: none;
  }
  @media (min-width: 60em) {
    .footer-animation {
      top: auto;
      bottom: -3rem;
    }
  }
}
@layer views {
  .hb-faq-item {
    border-top: var(--base-border);
    padding-block: var(--space-sm);
  }
  .hb-faq-item[open] .hb-faq-question-icon {
    transform: rotate(45deg);
  }
  .hb-faq-question {
    display: flex;
    font-size: var(--text-md-xl);
    font-weight: var(--font-medium);
    cursor: pointer;
  }
  .hb-faq-question::marker {
    content: "";
  }
  .hb-faq-answer {
    padding-block-start: var(--space-sm);
  }
  .hb-faq-question-icon {
    display: flex;
    height: 0.75em;
    margin-right: 0.5em;
    margin-block-start: 0.375em;
    transition: transform 0.2s var(--animation-ease);
  }
  .hb-faq-question-icon svg {
    width: 0.75em;
    height: 0.75em;
  }
}
@layer views {
  .hb-gallery figure {
    border-radius: var(--base-border-radius);
    overflow: hidden;
  }
}
@layer views {
  .hb-points dt {
    font-size: var(--text-sm);
    color: var(--color-darktrans);
    padding-bottom: var(--space-2xs);
  }
  .hb-points dd {
    border-bottom: var(--base-border);
    padding-bottom: var(--space-sm-md);
    margin-bottom: var(--space-sm-md);
  }
  .hb-points dd:last-of-type {
    margin-bottom: 0;
  }
}
@layer views {
  .hero-content {
    --flex-direction: column;
    position: relative;
  }
  @media (min-width: 60em) {
    .hero-content {
      --flex-direction: row;
    }
  }
  .hero-content-media {
    height: 80vh;
    height: 80svh;
  }
  .hero-content-media .figcaption {
    text-wrap: balance;
    flex-grow: 0;
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    color: var(--color-white);
    font-family: var(--font-headline);
    font-size: var(--text-xl-2xl);
    width: min(90%, 30rem);
  }
  @media (min-width: 60em) {
    .hero-content-media {
      position: sticky;
      height: 100vh;
      height: 100svh;
      top: 0;
    }
  }
  .hero-content-splash {
    position: absolute;
    top: calc(6rem + 2vmin);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(100%, 6rem + 15vmax);
    height: auto;
    padding: var(--space-3xs-sm);
    padding-inline-end: calc(var(--space-3xs-sm) + 3vmin);
  }
  .hero-content-splash svg {
    width: 100%;
    height: auto;
  }
  .hero-content-overlay {
    background-color: rgba(0, 0, 0, var(--hero-content-overlay-opacity));
  }
  .hero-content-content {
    width: min(100%, var(--base-content-max-width));
    padding-block: var(--space-xl-2xl);
  }
  @media (min-width: 60em) {
    .hero-content-content {
      margin-inline: 0 auto;
      padding-block: var(--space-3xl-5xl) var(--space-xl-2xl);
    }
  }
  @media (min-width: 80em) {
    .hero-content-content {
      width: min(90%, var(--base-content-max-width));
      margin-inline: 0 auto;
      padding-block: var(--space-3xl-5xl) var(--space-xl-2xl);
    }
  }
  .hero-content-prices-table {
    width: 100%;
  }
  .hero-content-prices-table tr:not(:last-child) {
    border-bottom: var(--base-border);
  }
  .hero-content-prices-table th, .hero-content-prices-table td {
    padding-block: var(--space-2xs);
  }
  .hero-content-prices-table th {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
  }
  .hero-content-prices-table td {
    font-size: var(--text-xs-sm);
  }
}
@layer views {
  .hero-cover {
    --hero-cover-padding-block-start: var(--space-3xl-4xl);
    --hero-cover-padding-block-end: var(--space-3xl-4xl);
    --flex-direction: column;
    position: relative;
    width: 100%;
    padding-block-start: var(--hero-cover-padding-block-start);
    padding-block-end: var(--hero-cover-padding-block-end);
    overflow: hidden;
  }
  @media (min-width: 60em) {
    .hero-cover[data-navbar=fixed] {
      --hero-cover-padding-block-start: var(--space-3xl-5xl);
    }
  }
  .hero-cover-media {
    --hero-cover-media-z-index: var(--z-100);
    --hero-cover-media-background-color: var(--color-black);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--hero-cover-media-z-index);
    background-color: var(--hero-cover-media-background-color);
  }
  .hero-cover-media > *:is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .hero-cover-media img[loading=lazy][data-animation=loaded],
  .hero-cover-media video[data-animation=loaded] {
    --animation-delay: 500ms;
    --animation-duration: 600ms;
  }
  .hero-cover-overlay {
    --hero-cover-overlay-opacity: 0;
    --hero-cover-overlay-background-color: var(--color-black);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-200);
    opacity: var(--hero-cover-overlay-opacity);
    background-color: var(--hero-cover-overlay-background-color);
  }
  .hero-cover-wrap {
    --hero-cover-wrap-min-height: 60svh;
    --hero-cover-wrap-min-height-fallback: 60vh;
    --hero-cover-wrap-color: var(--color-white);
    --hero-cover-wrap-text-align: center;
    --sm-grid-columns: var(--base-grid);
    --grid-gap: var(--space-lg);
    --grid-content: center;
    position: relative;
    z-index: var(--z-300);
    min-height: var(--hero-cover-wrap-min-height-fallback);
    min-height: var(--hero-cover-wrap-min-height);
    color: var(--hero-cover-wrap-color);
    text-align: var(--hero-cover-wrap-text-align);
  }
}
@layer views {
  .image-card {
    background-color: var(--color-light-yellow);
    border-radius: var(--base-border-radius);
    padding: var(--space-3xs-xs);
    position: relative;
    transition: color var(--animation-ease) 200ms, background-color var(--animation-ease) 600ms;
  }
  .image-card .u-link-ball {
    transform: translate3d(var(--space-3xs-xs), var(--space-3xs-xs), 0);
  }
  .image-card:hover figure > * {
    transform: scale(1.1);
  }
  .image-card figure {
    --frame-ratio: 5/4;
    --image-card-figure-border-radius: var(--radius-sm);
    border-radius: var(--image-card-figure-border-radius);
    overflow: hidden;
  }
  .image-card figure > * {
    transition: transform var(--animation-ease) 600ms;
  }
  .image-card-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: var(--space-3xs-xs);
  }
  .image-card-content .u-link-ball {
    transition: var(--transition-transform);
    margin-top: auto;
    margin-left: auto;
  }
  .image-card-prices-table tr {
    border-bottom: var(--base-border);
  }
  .image-card-prices-table td, .image-card-prices-table th {
    padding-block: var(--space-2xs);
  }
}
@layer views {
  [data-page-block=news-list][data-block-bg=plain-with-border] {
    border-top: var(--base-border);
  }
}
@layer views {
  .navbar {
    --navbar-wrap-padding-block: var(--space-3xs-2xs);
    --navbar-wrap-background-color: var(--color-yellow);
    --navbar-wrap-background-color: var(--color-light-yellow);
    --navbar-wrap-color: var(--color-black);
    position: relative;
    max-width: none;
    transform: translateY(0);
    transition: transform var(--animation-ease) 200ms;
    will-change: transform;
  }
  .navbar[data-variant=sticky] {
    position: sticky;
    z-index: var(--z-500);
    top: 0;
  }
  .navbar[data-variant=fixed] {
    position: fixed;
    z-index: var(--z-500);
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    bottom: auto;
  }
  .navbar[data-variant=fixed][data-background=transparent] {
    --navbar-wrap-background-color: transparent;
    --navbar-wrap-color: var(--color-white);
  }
  .navbar[data-variant=fixed][data-background=transparent] .navbar-brand-link > svg {
    transform: scale(1.25) translate3d(0.5rem, 0.5rem, 0);
  }
  .navbar[data-variant=fixed][data-background=transparent] .navbar-wrap {
    background-color: transparent;
  }
  .navbar[data-variant=fixed][data-background=transparent] .navbar-divider {
    background-image: none;
  }
  .navbar[data-variant=fixed][data-scroll-state=is-scrolling-up] .navbar-brand-link > svg {
    transform: scale(1) translateX(0);
  }
  .navbar[data-variant=fixed][data-scroll-state=is-scrolling-down] {
    --navbar-wrap-background-color: var(--color-light-yellow);
    --navbar-wrap-color: var(--color-black);
  }
  .navbar[data-variant=fixed][data-scroll-state=is-scrolling-down] .navbar-wrap {
    background-color: var(--navbar-wrap-background-color);
    background-color: color(from var(--navbar-wrap-background-color) srgb r g b/0.95);
    backdrop-filter: blur(4px);
  }
  .navbar[data-variant=fixed][data-scroll-state=is-scrolling-down] .navbar-divider {
    background-image: url("/assets/public/images/slim-divider.svg");
  }
  .navbar[data-variant=fixed][data-scroll-state=is-scrolling-down] .navbar-brand-link > svg {
    transform: scale(1) translateX(0);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scrolling-up] {
    --navbar-wrap-background-color: var(--color-light-yellow);
    --navbar-wrap-color: var(--color-black);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scrolling-up] .navbar-wrap {
    background-color: var(--navbar-wrap-background-color);
    background-color: color(from var(--navbar-wrap-background-color) srgb r g b/0.95);
    backdrop-filter: blur(4px);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scrolling-up] .navbar-divider {
    background-image: url("/assets/public/images/slim-divider.svg");
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scrolling-up] .navbar-brand-link > svg {
    transform: scale(1) translateX(0);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scroll-end] {
    --navbar-wrap-background-color: var(--color-light-yellow);
    --navbar-wrap-color: var(--color-black);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scroll-end] .navbar-wrap {
    background-color: var(--navbar-wrap-background-color);
    background-color: color(from var(--navbar-wrap-background-color) srgb r g b/0.95);
    backdrop-filter: blur(4px);
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scroll-end] .navbar-divider {
    background-image: url("/assets/public/images/slim-divider.svg");
  }
  .navbar[data-variant=fixed][data-background=transparent][data-scroll-state=is-scroll-end] .navbar-brand-link > svg {
    transform: scale(1) translateX(0);
  }
  .navbar-divider {
    --divider-height: 0.625rem;
    position: absolute;
    bottom: calc(var(--divider-height) * -0.5);
    width: 100%;
    height: var(--divider-height);
    background-image: url("/assets/public/images/slim-divider.svg");
  }
  .navbar-wrap {
    --wrap-max-width: none;
    --flex-gap: var(--base-gap);
    --flex-items: center;
    width: 100%;
    padding: var(--navbar-wrap-padding-block);
    padding-block-end: var(--space-2xs-xs);
    background-color: var(--navbar-wrap-background-color);
    background-color: color(from var(--navbar-wrap-background-color) srgb r g b/0.95);
    color: var(--navbar-wrap-color);
    transition: color var(--animation-ease) 200ms, background-color var(--animation-ease) 400ms, padding var(--animation-ease) 600ms;
  }
  .navbar-brand {
    --flex-basis: auto;
    --flex-grow: auto;
    --flex-order: 0;
    --flex-items: center;
  }
  .navbar-brand-link {
    display: flex;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border-radius: var(--base-border-radius);
  }
  .navbar-brand-link > svg {
    width: auto;
    height: var(--space-lg-xl);
    max-height: 3.25rem;
    color: currentColor;
    transform: scale(1) translateX(0);
    transition: all var(--animation-ease) 200ms;
  }
  .navbar-brand-link:hover {
    color: currentColor;
  }
  .navbar-primary-group {
    --flex-basis: auto;
    --flex-grow: 1;
    --flex-order: 0;
    --flex-items: center;
  }
  .navbar-nav {
    --flex-basis: auto;
    --flex-grow: 1;
    --flex-order: 0;
  }
  .navbar-list {
    --flex-wrap: wrap;
    --flex-gap: var(--space-3xs);
    --flex-items: center;
  }
  .navbar-link {
    padding: var(--space-2xs-xs) var(--space-xs-md);
    font-size: var(--text-sm-md);
    font-weight: var(--font-medium);
    color: currentColor;
    transition: background-color var(--animation-ease) 200ms;
    border-radius: var(--radius-md);
  }
  .navbar-link:hover {
    background-color: var(--color-yellow);
    color: var(--color-black);
  }
  .navbar-secondary-group {
    --flex-gap: var(--base-gap);
    --flex-basis: auto;
    --flex-grow: auto;
    --flex-order: 0;
    --flex-items: center;
  }
  .navbar-button {
    display: flex;
    align-items: center;
    padding: var(--space-2xs-xs) var(--space-xs-md);
    font-size: var(--text-sm-md);
    font-weight: var(--font-medium);
    background-color: transparent;
    color: currentColor;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: background-color var(--animation-ease) 200ms;
  }
  .navbar-button:hover {
    background-color: var(--color-yellow);
    color: var(--color-black);
  }
  .navbar-button > svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5em;
  }
}
@layer views {
  .openhours-header {
    padding-top: var(--space-md-xl);
    padding-bottom: var(--space-md-3xl);
  }
  .openhours-container > * {
    border-radius: var(--base-border-radius);
    overflow: hidden;
  }
  .openhours-container table {
    width: 100%;
  }
  .openhours-container table td {
    padding-block-end: var(--space-4xs-3xs);
  }
  .openhours-regular {
    --switch-breakpoint: 36rem;
    --md-grid-column: 1 / span 2;
    --lg-grid-column: 1 / span 3;
    background-color: var(--color-pink);
  }
  .openhours-regular .l-frame {
    --switch-grow: 2;
  }
  .openhours-regular-copy {
    --stack-space: var(--space-sm);
    padding-inline: var(--space-xs-sm);
    padding-block: var(--space-sm-md);
  }
  .openhours-special {
    background-color: var(--color-light-yellow);
  }
  .openhours-special-copy {
    --stack-space: var(--space-sm);
    padding-inline: var(--space-xs-sm);
    padding-block: var(--space-sm-md);
  }
}
@layer views {
  wc-toggle-overlay {
    display: block;
  }
  .overlay wc-toggle-overlay {
    position: absolute;
    top: 0;
    right: 0;
  }
  .overlay wc-toggle-overlay button {
    display: flex;
    background: none;
    border: none;
    padding: var(--space-2xs-xs);
    cursor: pointer;
  }
  .overlay wc-toggle-overlay button svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-black);
  }
  .overlay {
    --overlay-backdrop-opacity: 0;
    --overlay-box-bg-color: var(--color-white);
    --overlay-box-padding: var(--space-sm) 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-500);
    display: flex;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    background: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity var(--animation-ease, ease-in) 200ms;
    pointer-events: none;
    opacity: 0;
    outline: 0;
    -webkit-overflow-scrolling: touch;
  }
  .overlay[open] {
    pointer-events: auto;
    opacity: 1;
  }
  .overlay[data-type=drawer], .overlay[data-type=fullscreen] {
    overflow-x: hidden;
  }
  .overlay-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--z-100);
    background-color: var(--overlay-backdrop-background-color, var(--color-black));
    opacity: var(--overlay-backdrop-opacity);
    transition: opacity var(--animation-ease, ease-in) 400ms;
  }
  .overlay[open] > .overlay-backdrop {
    --overlay-backdrop-opacity: 0.25;
    transition: opacity var(--animation-ease, ease-in) 400ms;
  }
  .overlay[open]:has(.overlay[open]) > .overlay-backdrop {
    --overlay-backdrop-opacity: 0;
  }
  .overlay-wrap {
    position: relative;
    z-index: var(--z-200);
    width: var(--overlay-wrap-width, 100%);
    height: var(--overlay-wrap-height, auto);
    margin: auto;
    padding: var(--overlay-wrap-padding, 0);
  }
  .overlay[data-type=drawer] > .overlay-wrap {
    --overlay-wrap-width: 90%;
    --overlay-box-bg-color: var(--color-off-white);
    min-height: 100%;
    margin-inline-start: 0;
    transform: translate3d(-30%, 0, 0);
    transition: transform var(--animation-ease, ease-in) 200ms;
  }
  @media (min-width: 60em) {
    .overlay[data-type=drawer] > .overlay-wrap {
      --overlay-wrap-width: 50%;
    }
  }
  .overlay[data-type=drawer] > .overlay-wrap .overlay-box {
    min-height: 100vh;
  }
  .overlay[data-type=drawer][data-enter-from=inline-end] > .overlay-wrap {
    margin-inline-start: auto;
    margin-inline-end: 0;
    transform: translate3d(30%, 0, 0);
  }
  .overlay[data-type=drawer][data-enter-from=block-start] > .overlay-wrap {
    --overlay-wrap-width: 100%;
    min-height: auto;
    margin-block-start: 0;
    margin-inline: 0;
    transform: translate3d(0, -100%, 0);
  }
  .overlay[data-type=drawer][data-enter-from=block-start] > .overlay-wrap .overlay-box {
    min-height: auto;
  }
  .overlay[data-type=drawer][data-enter-from=block-end] > .overlay-wrap {
    --overlay-wrap-width: 100%;
    min-height: auto;
    margin-block-end: 0;
    margin-inline: 0;
    transform: translate3d(0, 100%, 0);
  }
  .overlay[data-type=drawer][data-enter-from=block-end] > .overlay-wrap .overlay-box {
    min-height: auto;
  }
  .overlay[data-type=drawer][open] .overlay-wrap {
    transform: translate3d(0, 0, 0);
  }
  .overlay[data-type=popover] > .overlay-wrap {
    --overlay-wrap-width: min(100%, 40rem);
    --overlay-wrap-padding: var(--space-lg) var(--space-xs-sm);
    --overlay-box-padding: var(--space-sm) var(--space-3xs-xs) var(--space-3xs-xs);
    --overlay-box-radius: var(--base-border-radius);
    --overlay-box-bg-color: var(--color-off-white);
    transform: translate3d(0, 4rem, 0);
    transition: transform var(--animation-ease, ease-in) 400ms;
  }
  .overlay[data-type=popover] > .overlay-wrap .overlay-box {
    border-radius: var(--overlay-box-radius, var(--radius-md));
  }
  .overlay[data-type=popover][data-variant=preview-share] > .overlay-wrap {
    --overlay-wrap-width: 30rem;
    --overlay-wrap-padding: 1rem;
  }
  html[data-adminbar=true] .overlay[data-type=popover][data-variant=preview-share] > .overlay-wrap {
    --overlay-wrap-padding: 1rem 1rem calc(1rem + var(--root-adminbar-height)) 1rem;
  }
  .overlay[data-type=popover][data-enter-from=inline-start] > .overlay-wrap {
    transform: translate3d(-4rem, 0, 0);
  }
  .overlay[data-type=popover][data-enter-from=inline-end] > .overlay-wrap {
    transform: translate3d(4rem, 0, 0);
  }
  .overlay[data-type=popover][data-enter-from=block-start] > .overlay-wrap {
    transform: translate3d(0, -4rem, 0);
  }
  .overlay[data-type=popover][open] > .overlay-wrap {
    transform: translate3d(0, 0, 0);
  }
  .overlay[data-type=fullscreen] > .overlay-wrap {
    --overlay-wrap-width: 100%;
    --overlay-wrap-height: 100%;
    transform: translate3d(0, 4rem, 0);
    transition: transform var(--animation-ease, ease-in) 400ms;
  }
  .overlay[data-type=fullscreen] > .overlay-wrap .overlay-box {
    min-height: 100vh;
  }
  .overlay[data-type=fullscreen][data-enter-from=inline-start] > .overlay-wrap {
    transform: translate3d(-4rem, 0, 0);
  }
  .overlay[data-type=fullscreen][data-enter-from=inline-end] > .overlay-wrap {
    transform: translate3d(4rem, 0, 0);
  }
  .overlay[data-type=fullscreen][data-enter-from=block-start] > .overlay-wrap {
    transform: translate3d(0, -4rem, 0);
  }
  .overlay[data-type=fullscreen][open] > .overlay-wrap {
    transform: translate3d(0, 0, 0);
  }
  .overlay-box {
    position: relative;
    line-height: var(--leading-xs);
    padding: var(--overlay-box-padding, var(--space-sm));
    background-color: var(--overlay-box-bg-color, var(--color-white));
  }
  .overlay[data-type=popover][data-variant=preview-share] > .overlay-box {
    --overlay-box-padding: 1rem;
  }
  .overlay-navbar-index {
    --stack-space: 1rem;
    font-size: var(--text-lg-2xl);
  }
  .overlay-index-link:hover {
    text-decoration: underline;
  }
  .overlay-menu {
    padding-inline: var(--space-xs-lg);
    padding-block: var(--space-sm-lg);
  }
  .overlay-menu:not(:last-child) {
    border-bottom: var(--base-border);
  }
}
@layer views {
  .post-card {
    position: relative;
  }
  .post-card:hover figure > * {
    transform: scale(1.1);
  }
  .post-card-figure {
    --frame-ratio: 5/4;
    border-radius: var(--base-border-radius);
    overflow: hidden;
  }
  .post-card-figure > * {
    transition: transform var(--animation-ease) 600ms;
  }
  .post-card-copy {
    padding-block: var(--space-xs) 0;
    padding-inline: var(--space-4xs) var(--space-xs-lg);
  }
  .post-card-date {
    font-size: var(--text-2xs);
    opacity: var(--opacity-70);
  }
}
@layer views {
  .poster {
    --poster-padding-block-start: var(--space-lg-3xl);
    --poster-padding-block-end: var(--space-lg-3xl);
    position: relative;
    width: 100%;
    min-height: 80vh;
    min-height: 80svh;
    padding-block-start: var(--poster-padding-block-start);
    padding-block-end: var(--poster-padding-block-end);
    overflow: hidden;
  }
  .poster:has(a:hover) .poster-media > * {
    transform: scale(1.05);
  }
  .poster-media {
    --poster-media-z-index: var(--z-100);
    --poster-media-background-color: transparent;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: var(--poster-media-z-index);
    background-color: var(--poster-media-background-color);
  }
  .poster-media > *:is(img, video) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--animation-ease) 1200ms;
  }
  .poster-grid {
    --sm-grid-columns: 4;
    position: relative;
    z-index: var(--z-200);
  }
  .poster-content {
    --grid-self: start start;
    --grid-gap: var(--space-2xs-xs);
    --sm-grid-column: span 3;
    --md-grid-column: span 2;
    position: relative;
    padding: var(--space-sm-lg) var(--space-xs-md) var(--space-xs-md) var(--space-xs-md);
    background-color: var(--color-off-white);
    border-radius: var(--base-border-radius);
  }
  .poster-content > *:not(.poster-link) {
    width: min(90%, 35rem);
  }
  .poster-heading {
    font-family: var(--font-headline);
    font-size: var(--text-xl-2xl);
    font-weight: var(--font-regular);
  }
  .poster-link {
    --grid-self: end;
  }
  .poster-link .u-link-ball {
    transform: translate3d(var(--space-3xs-xs), var(--space-3xs-xs), 0);
  }
}
@layer views {
  .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4, .rich-text h5, .rich-text h6 {
    font-weight: var(--font-medium);
  }
  .rich-text > * + * {
    --stack-space: 1em;
  }
  .rich-text > * + :where(h1, h2, h3, h4, h5, h6,
  ul, ol,
  img, video, iframe, figure) {
    --stack-space: calc(var(--leading-md) * 1em);
  }
  .rich-text a {
    text-decoration: underline;
    transition: all var(--animation-ease) 200ms;
  }
  .rich-text a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }
  .rich-text[data-text-color=muted] p {
    opacity: var(--opacity-70);
  }
}
@layer views {
  .skip-to-content {
    position: absolute;
    top: var(--base-margin);
    left: var(--base-margin);
    z-index: var(--z-max);
    display: block;
    padding: var(--space-2xs);
    font-size: var(--text-sm);
    text-align: center;
    white-space: nowrap;
    background-color: var(--color-white);
    color: var(--color-black);
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
  }
  .skip-to-content:focus {
    opacity: 1;
    pointer-events: auto;
  }
}
@layer views {
  .small-card {
    --grid-content: start;
    border-radius: var(--base-border-radius);
    background-color: var(--color-pink);
    padding: var(--space-xs-sm);
    position: relative;
    width: 100%;
    transition: all var(--animation-ease) 200ms;
  }
  .small-card:hover {
    background-color: color(from var(--color-pink) srgb r g b/0.75);
  }
}
@layer views {
  .splash {
    width: min(100%, 30rem);
    height: 100%;
    margin-inline: auto;
    transform: translate3d(0, 0, 0) rotate(-5deg) scale(0.7);
    transition: transform var(--animation-ease) 200ms;
  }
  .splash > * {
    --grid-column: 1;
    --grid-row: 1;
  }
  @media (min-width: 30em) {
    .splash {
      transform: translate3d(0, -10%, 0) rotate(-5deg) scale(0.8);
    }
  }
  @media (min-width: 60em) {
    .splash {
      transform: translate3d(15%, -10%, 0) rotate(5deg) scale(0.9);
    }
  }
  @media (min-width: 140em) {
    .splash {
      transform: translate3d(calc(15% + 10vw), -10%, 0) rotate(5deg) scale(0.9);
    }
  }
  .splash:hover {
    transform: translate3d(15%, -10%, 0) rotate(5deg) scale(1);
  }
  @media (min-width: 140em) {
    .splash:hover {
      transform: translate3d(calc(15% + 10vw), -10%, 0) rotate(5deg) scale(1);
    }
  }
  .splash-image svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .splash-wrap {
    position: relative;
    width: min(90%, 30rem);
    margin-inline: auto;
    padding: var(--space-2xl) var(--space-lg-2xl) var(--space-2xl) var(--space-md-lg);
    color: var(--color-black);
    font-family: var(--font-headline);
  }
  .splash-text {
    text-align: center;
  }
  .splash-arrow svg {
    position: absolute;
    top: 5%;
    left: 5%;
  }
}
@layer views {
  wc-swiper {
    --swiper-gap: var(--base-gap);
    --swiper-width: 120rem;
    --swiper-margin: var(--base-margin);
    --swiper-padding: max(var(--swiper-margin), calc((100vw - var(--swiper-width)) / 2 + var(--swiper-margin)));
    position: relative;
    display: block;
  }
  .swiper {
    --grid-gap: calc(var(--space-md-xl) - var(--space-sm));
    padding-block: var(--space-xl-3xl) calc(var(--space-xl-3xl) - var(--space-sm));
    background-color: var(--color-primary-dark);
    color: var(--color-white);
  }
  .swiper--grid {
    --md-grid-columns: 3;
  }
  .swiper--wrap {
    width: 100%;
  }
  .swiper--slider {
    display: flex;
    gap: var(--swiper-gap);
    height: 100%;
    padding: 0 var(--swiper-padding);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .swiper--slider::-webkit-scrollbar {
    display: none;
  }
  .swiper--item {
    --swiper-item-offset: var(--swiper-padding);
    --swiper-item-columns: 1.125;
    --swiper-item-gap: calc(var(--swiper-item-columns) - 1);
    position: relative;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    width: calc(100% / var(--swiper-item-columns) - var(--swiper-item-gap) * var(--swiper-gap) / var(--swiper-item-columns));
  }
  @media (min-width: 30em) {
    .swiper--item {
      --swiper-item-columns: 2.125;
    }
  }
  @media (min-width: 60em) {
    .swiper--item {
      --swiper-item-columns: 3;
    }
  }
  @media (min-width: 70em) {
    .swiper--item {
      --swiper-item-columns: 4;
    }
  }
  .swiper--media {
    align-self: start;
    border-radius: 1rem;
  }
  .swiper--nav {
    display: flex;
    gap: var(--space-3xs);
  }
  .swiper--nav.swiper--nav-bar {
    width: 100%;
  }
  wc-swiper:not(:defined) .swiper--nav {
    display: none;
  }
  .swiper--nav[data-hidden=true] {
    display: none;
  }
  .swiper--prev,
  .swiper--next {
    display: flex;
    width: 2rem;
    height: 2rem;
    background-color: var(--color-yellow);
    color: var(--color-black);
    border: 1px solid var(--color-white);
    border-radius: 2rem;
    opacity: 1;
  }
  .swiper--prev[disabled],
  .swiper--next[disabled] {
    opacity: 0.4;
  }
  .swiper--prev:not([disabled]):hover,
  .swiper--next:not([disabled]):hover {
    opacity: 1;
    cursor: pointer;
  }
  .swiper--prev svg,
  .swiper--next svg {
    width: 0.875rem;
    height: 0.875rem;
    margin: auto;
  }
  .swiper--scrollbar {
    position: relative;
    display: flex;
    width: 100%;
    height: var(--space-md);
    cursor: pointer;
  }
  wc-swiper:not(:defined) .swiper--scrollbar {
    display: none;
  }
  .swiper--scrollbar[data-hidden=true] {
    display: none;
  }
  .swiper--track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
    opacity: 0.125;
    border-radius: var(--radius-sm);
    transform: translateY(50%);
  }
  .swiper--track:after {
    content: "";
    position: absolute;
    top: -0.5rem;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    display: block;
  }
  .swiper--thumb {
    position: absolute;
    bottom: 0;
    width: 4rem;
    height: 1px;
    background-color: var(--color-black);
    will-change: left;
    transform: translateY(50%);
  }
  .swiper--thumb:after {
    content: "";
    position: absolute;
    top: -0.5rem;
    right: 0;
    bottom: -0.5rem;
    left: 0;
    display: block;
  }
}
@layer views {
  .bws-adminbar {
    --bws-adminbar-bg-color: black;
    --bws-adminbar-text-color: white;
    --bws-adminbar-padding-block: 0.5rem;
    --bws-adminbar-height: var(--root-adminbar-height);
    position: fixed;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--bws-adminbar-height);
    padding-block: var(--bws-adminbar-padding-block);
    background-color: var(--bws-adminbar-bg-color);
    color: var(--bws-adminbar-text-color);
    font-size: 0.875rem;
  }
  .bws-adminbar-wrap {
    --wrap-max-width: none;
    --wrap-padding: 1rem;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
  }
  .bws-adminbar-tools {
    display: flex;
    gap: 2rem;
  }
  .bws-adminbar-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: transparent;
    border: none;
    color: var(--bws-adminbar-text-color);
    cursor: pointer;
  }
  .bws-adminbar-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
  }
}