/* assets/css/reset.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  :where(body, h1, h2, h3, h4, h5, h6, p, blockquote, figure, pre, dl, dd, ul, ol, menu, hr, fieldset, dialog, [popover]) {
    margin: 0;
  }
  :where(ul, ol, menu, fieldset, legend, input, textarea, td, th, dialog, [popover]) {
    padding: 0;
  }
  :where(dialog, fieldset, [popover]) {
    border: none;
  }
  :where(dialog, [popover]) {
    max-inline-size: none;
    max-block-size: none;
  }
  :root {
    text-size-adjust: none;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
  }
  button {
    all: unset;
    cursor: pointer;
    box-sizing: border-box;
    &:focus-visible {
      outline: revert;
    }
  }
  a {
    color: inherit;
    text-decoration: none;
  }
  ul,
  ol {
    list-style-type: none;
  }
}

/* assets/css/base/breakpoints.css */

/* assets/css/base/document.css */
@layer base {
  :root {
    font: 100% var(--font-family-base);
    height: 100%;
    scrollbar-color: var(--color-brown) var(--color-brown-subtle);
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }
  @view-transition { navigation: auto; }
  body {
    background-color: var(--color-background);
    color: var(--color-text);
    font-size: var(--font-size-base);
    display: flex;
    flex-direction: column;
    min-height: 100%;
    min-height: 400vh;
  }
}

/* assets/css/base/easings.css */
@layer base {
  :root {
    --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
    --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
    --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
    --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
    --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
    --ease-in-1: cubic-bezier(0.25, 0, 1, 1);
    --ease-in-2: cubic-bezier(0.5, 0, 1, 1);
    --ease-in-3: cubic-bezier(0.7, 0, 1, 1);
    --ease-in-4: cubic-bezier(0.9, 0, 1, 1);
    --ease-in-5: cubic-bezier(1, 0, 1, 1);
    --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
    --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
    --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
    --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
    --ease-out-5: cubic-bezier(0, 0, 0, 1);
    --ease-in-out-1: cubic-bezier(0.1, 0, 0.9, 1);
    --ease-in-out-2: cubic-bezier(0.3, 0, 0.7, 1);
    --ease-in-out-3: cubic-bezier(0.5, 0, 0.5, 1);
    --ease-in-out-4: cubic-bezier(0.7, 0, 0.3, 1);
    --ease-in-out-5: cubic-bezier(0.9, 0, 0.1, 1);
    --ease-elastic-out-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
    --ease-elastic-out-2: cubic-bezier(0.5, 1, 0.75, 1.25);
    --ease-elastic-out-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
    --ease-elastic-out-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
    --ease-elastic-out-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
    --ease-elastic-in-1: cubic-bezier(0.5, -0.25, 0.75, 1);
    --ease-elastic-in-2: cubic-bezier(0.5, -0.5, 0.75, 1);
    --ease-elastic-in-3: cubic-bezier(0.5, -0.75, 0.75, 1);
    --ease-elastic-in-4: cubic-bezier(0.5, -1, 0.75, 1);
    --ease-elastic-in-5: cubic-bezier(0.5, -1.25, 0.75, 1);
    --ease-elastic-in-out-1: cubic-bezier(0.5, -0.1, 0.1, 1.5);
    --ease-elastic-in-out-2: cubic-bezier(0.5, -0.3, 0.1, 1.5);
    --ease-elastic-in-out-3: cubic-bezier(0.5, -0.5, 0.1, 1.5);
    --ease-elastic-in-out-4: cubic-bezier(0.5, -0.7, 0.1, 1.5);
    --ease-elastic-in-out-5: cubic-bezier(0.5, -0.9, 0.1, 1.5);
    --ease-step-1: steps(2);
    --ease-step-2: steps(3);
    --ease-step-3: steps(4);
    --ease-step-4: steps(7);
    --ease-step-5: steps(10);
    --ease-elastic-1: var(--ease-elastic-out-1);
    --ease-elastic-2: var(--ease-elastic-out-2);
    --ease-elastic-3: var(--ease-elastic-out-3);
    --ease-elastic-4: var(--ease-elastic-out-4);
    --ease-elastic-5: var(--ease-elastic-out-5);
    --ease-squish-1: var(--ease-elastic-in-out-1);
    --ease-squish-2: var(--ease-elastic-in-out-2);
    --ease-squish-3: var(--ease-elastic-in-out-3);
    --ease-squish-4: var(--ease-elastic-in-out-4);
    --ease-squish-5: var(--ease-elastic-in-out-5);
    --ease-spring-1: linear( 0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%, 0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 );
    --ease-spring-2: linear( 0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1 );
    --ease-spring-3: linear( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 );
    --ease-spring-4: linear( 0, 0.009, 0.037 1.7%, 0.153 3.6%, 0.776 10.3%, 1.001, 1.142 16%, 1.185, 1.209 19%, 1.215 19.9% 20.8%, 1.199, 1.165 25%, 1.056 30.3%, 1.008 33%, 0.973, 0.955 39.2%, 0.953 41.1%, 0.957 43.3%, 0.998 53.3%, 1.009 59.1% 63.7%, 0.998 78.9%, 1 );
    --ease-spring-5: linear( 0, 0.01, 0.04 1.6%, 0.161 3.3%, 0.816 9.4%, 1.046, 1.189 14.4%, 1.231, 1.254 17%, 1.259, 1.257 18.6%, 1.236, 1.194 22.3%, 1.057 27%, 0.999 29.4%, 0.955 32.1%, 0.942, 0.935 34.9%, 0.933, 0.939 38.4%, 1 47.3%, 1.011, 1.017 52.6%, 1.016 56.4%, 1 65.2%, 0.996 70.2%, 1.001 87.2%, 1 );
    --ease-bounce-1: linear( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141, 0.191, 0.25, 0.316, 0.391 36.8%, 0.563, 0.766, 1 58.8%, 0.946, 0.908 69.1%, 0.895, 0.885, 0.879, 0.878, 0.879, 0.885, 0.895, 0.908 89.7%, 0.946, 1 );
    --ease-bounce-2: linear( 0, 0.004, 0.016, 0.035, 0.063, 0.098, 0.141 15.1%, 0.25, 0.391, 0.562, 0.765, 1, 0.892 45.2%, 0.849, 0.815, 0.788, 0.769, 0.757, 0.753, 0.757, 0.769, 0.788, 0.815, 0.85, 0.892 75.2%, 1 80.2%, 0.973, 0.954, 0.943, 0.939, 0.943, 0.954, 0.973, 1 );
    --ease-bounce-3: linear( 0, 0.004, 0.016, 0.035, 0.062, 0.098, 0.141 11.4%, 0.25, 0.39, 0.562, 0.764, 1 30.3%, 0.847 34.8%, 0.787, 0.737, 0.699, 0.672, 0.655, 0.65, 0.656, 0.672, 0.699, 0.738, 0.787, 0.847 61.7%, 1 66.2%, 0.946, 0.908, 0.885 74.2%, 0.879, 0.878, 0.879, 0.885 79.5%, 0.908, 0.946, 1 87.4%, 0.981, 0.968, 0.96, 0.957, 0.96, 0.968, 0.981, 1 );
    --ease-bounce-4: linear( 0, 0.004, 0.016 3%, 0.062, 0.141, 0.25, 0.391, 0.562 18.2%, 1 24.3%, 0.81, 0.676 32.3%, 0.629, 0.595, 0.575, 0.568, 0.575, 0.595, 0.629, 0.676 48.2%, 0.811, 1 56.2%, 0.918, 0.86, 0.825, 0.814, 0.825, 0.86, 0.918, 1 77.2%, 0.94 80.6%, 0.925, 0.92, 0.925, 0.94 87.5%, 1 90.9%, 0.974, 0.965, 0.974, 1 );
    --ease-bounce-5: linear( 0, 0.004, 0.016 2.5%, 0.063, 0.141, 0.25 10.1%, 0.562, 1 20.2%, 0.783, 0.627, 0.534 30.9%, 0.511, 0.503, 0.511, 0.534 38%, 0.627, 0.782, 1 48.7%, 0.892, 0.815, 0.769 56.3%, 0.757, 0.753, 0.757, 0.769 61.3%, 0.815, 0.892, 1 68.8%, 0.908 72.4%, 0.885, 0.878, 0.885, 0.908 79.4%, 1 83%, 0.954 85.5%, 0.943, 0.939, 0.943, 0.954 90.5%, 1 93%, 0.977, 0.97, 0.977, 1 );
  }
}

/* assets/css/base/focus.css */
@layer base {
  :root {
    --focus-outline-color: currentColor;
    --focus-outline-offset: 0.2rem;
    --focus-outline-style: solid;
    --focus-outline-width: 0.2rem;
  }
  *:focus-visible {
    outline-color: var(--focus-outline-color);
    outline-offset: var(--focus-outline-offset);
    outline-style: var(--focus-outline-style);
    outline-width: var(--focus-outline-width);
  }
}

/* assets/css/base/fonts.css */
@layer base {
  @font-face {
    font-family: "Bureau Sans";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/STKBureauSans-Book.woff2) format("woff2"), url(../fonts/STKBureauSans-Book.woff) format("woff");
  }
  @font-face {
    font-family: "Bureau Sans";
    font-weight: normal;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/STKBureauSans-BookItalic.woff2) format("woff2"), url(../fonts/STKBureauSans-BookItalic.woff) format("woff");
  }
  @font-face {
    font-family: "Bureau Sans";
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/STKBureauSans-SemiBold.woff2) format("woff2"), url(../fonts/STKBureauSans-SemiBold.woff) format("woff");
  }
  @font-face {
    font-family: "Bureau Sans";
    font-weight: bold;
    font-style: italic;
    font-display: swap;
    src: url(../fonts/STKBureauSans-SemiBoldItalic.woff2) format("woff2"), url(../fonts/STKBureauSans-SemiBoldItalic.woff) format("woff");
  }
  @font-face {
    font-family: "Earl";
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url(../fonts/STKEarl-Light.woff2) format("woff2"), url(../fonts/STKEarl-Light.woff) format("woff");
  }
}

/* assets/css/base/layout.css */
@layer base {
  .wrap {
    padding-inline: var(--spacing-inline);
  }
  .inner {
    width: 100%;
    max-width: var(--width-max);
    margin: 0 auto;
  }
  .grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: var(--spacing-grid);
    @media (max-width: 1150px) {
      grid-template-columns: repeat(9, 1fr);
    }
    @media (max-width: 900px) {
      grid-template-columns: repeat(6, 1fr);
    }
  }
  hr {
    margin-block: var(--spacing-l);
    height: 1px;
    border: none;
    background-color: currentColor;
    opacity: 0.25;
  }
}

/* assets/css/base/rich-text.css */
@layer base {
  .rich-text {
    line-height: 1.4;
    text-wrap: pretty;
    > *:first-child {
      margin-block-start: 0;
    }
    > *:last-child {
      margin-block-end: 0;
    }
  }
  .rich-text a,
  .link {
    --arrow-hover-transform: translateX(0.1em);
    position: relative;
    padding-inline-start: 0.9em;
    text-decoration: underline;
    text-decoration-thickness: 0.075em;
    text-underline-offset: 0.15em;
    word-break: break-word;
    &::before {
      content: "\2192" / "";
      position: absolute;
      inset-inline-start: 0;
      @media (prefers-reduced-motion: no-preference) {
        transition: transform 0.25s var(--ease-spring-2);
      }
    }
    &[data-external] {
      --arrow-hover-transform: translate(0.1em, -0.1em);
      &::before {
        content: "\2197" / "(extern) ";
      }
    }
    &:hover::before,
    &:focus-visible::before {
      transform: var(--arrow-hover-transform);
    }
  }
  .rich-text :where(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    text-wrap: pretty;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    margin-block: 2lh 1lh;
  }
  .rich-text :where(h1) {
    font-size: var(--font-size-big);
    font-family: var(--font-family-heading);
    font-weight: normal;
    line-height: 1.1;
  }
  .rich-text :where(p, ul, ol, figure) {
    margin-block: 1lh;
  }
  .rich-text figcaption {
    margin-block-start: 1lh;
    font-size: var(--font-size-base);
  }
  .rich-text ul {
    list-style-type: disc;
    padding-inline-start: 1em;
  }
  .rich-text ol {
    list-style-type: decimal;
    padding-inline-start: 1.5em;
  }
  .rich-text strong {
    font-weight: bold;
  }
  .rich-text em {
    font-style: italic;
  }
}

/* assets/css/base/selection.css */
@layer base {
  ::selection {
    background-color: var(--color-text);
    color: var(--color-background);
  }
}

/* assets/css/base/typography.css */
@layer base {
  :root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  .heading {
    font-size: var(--font-size-big);
    font-family: var(--font-family-heading);
    text-wrap: pretty;
    line-height: 1.1;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

/* assets/css/base/utopia.css */
@layer base {
  :root {
    --step-0: clamp(2.1875rem, 1.9196rem + 1.3393vw, 3.125rem);
  }
  :root {
    --spacing-6xs: clamp(0.3125rem, 0.2622rem + 0.2517vw, 0.5rem);
    --spacing-5xs: clamp(0.4375rem, 0.3872rem + 0.2517vw, 0.625rem);
    --spacing-4xs: clamp(0.625rem, 0.5579rem + 0.3356vw, 0.875rem);
    --spacing-3xs: clamp(0.875rem, 0.7743rem + 0.5034vw, 1.25rem);
    --spacing-2xs: clamp(1.125rem, 1.0076rem + 0.5872vw, 1.5625rem);
    --spacing-xs: clamp(1.75rem, 1.5487rem + 1.0067vw, 2.5rem);
    --spacing-s: clamp(2.1875rem, 1.9358rem + 1.2584vw, 3.125rem);
    --spacing-m: clamp(3.5rem, 3.0973rem + 2.0134vw, 5rem);
    --spacing-l: clamp(6.125rem, 5.4203rem + 3.5235vw, 8.75rem);
    --spacing-xl: clamp(7rem, 6.1946rem + 4.0268vw, 10rem);
    --spacing-2xl: clamp(7.875rem, 6.969rem + 4.5302vw, 11.25rem);
    --spacing-6xs-5xs: clamp(0.3125rem, 0.2286rem + 0.4195vw, 0.625rem);
    --spacing-5xs-4xs: clamp(0.4375rem, 0.3201rem + 0.5872vw, 0.875rem);
    --spacing-4xs-3xs: clamp(0.625rem, 0.4572rem + 0.8389vw, 1.25rem);
    --spacing-3xs-2xs: clamp(0.875rem, 0.6904rem + 0.9228vw, 1.5625rem);
    --spacing-2xs-xs: clamp(1.125rem, 0.7559rem + 1.8456vw, 2.5rem);
    --spacing-xs-s: clamp(1.75rem, 1.3809rem + 1.8456vw, 3.125rem);
    --spacing-s-m: clamp(2.1875rem, 1.4325rem + 3.7752vw, 5rem);
    --spacing-m-l: clamp(3.5rem, 2.0906rem + 7.047vw, 8.75rem);
    --spacing-l-xl: clamp(6.125rem, 5.0847rem + 5.2013vw, 10rem);
    --spacing-xl-2xl: clamp(7rem, 5.8591rem + 5.7047vw, 11.25rem);
    --spacing-2xs-s: clamp(1.125rem, 0.5881rem + 2.6846vw, 3.125rem);
    --spacing-2xs-m: clamp(1.125rem, 0.0847rem + 5.2013vw, 5rem);
    --spacing-2xs-l: clamp(1.125rem, -0.922rem + 10.2349vw, 8.75rem);
    --spacing-2xs-xl: clamp(1.125rem, -1.2576rem + 11.9128vw, 10rem);
    --spacing-2xs-2xl: clamp(1.125rem, -1.5931rem + 13.5906vw, 11.25rem);
    --spacing-xs-m: clamp(1.75rem, 0.8775rem + 4.3624vw, 5rem);
    --spacing-xs-l: clamp(1.75rem, -0.1292rem + 9.396vw, 8.75rem);
    --spacing-xs-xl: clamp(1.75rem, -0.4648rem + 11.0738vw, 10rem);
    --spacing-xs-2xl: clamp(1.75rem, -0.8003rem + 12.7517vw, 11.25rem);
    --spacing-s-l: clamp(2.1875rem, 0.4258rem + 8.8087vw, 8.75rem);
    --spacing-s-xl: clamp(2.1875rem, 0.0902rem + 10.4866vw, 10rem);
    --spacing-s-2xl: clamp(2.1875rem, -0.2454rem + 12.1644vw, 11.25rem);
    --spacing-m-xl: clamp(3.5rem, 1.755rem + 8.7248vw, 10rem);
    --spacing-m-2xl: clamp(3.5rem, 1.4195rem + 10.4027vw, 11.25rem);
    --spacing-l-2xl: clamp(6.125rem, 4.7492rem + 6.8792vw, 11.25rem);
    --spacing-4xs-xs: clamp(0.625rem, 0.1216rem + 2.5168vw, 2.5rem);
    --spacing-3xs-xs: clamp(0.875rem, 0.4388rem + 2.1812vw, 2.5rem);
  }
}

/* assets/css/base/variables.css */
@layer base {
  :root {
    --color-brown: #43322a;
    --color-brown-darkened: #302a12;
    --color-brown-subtle: color-mix(in srgb, var(--color-brown), transparent 90%);
    --color-stone: #dfdbd2;
    --color-sun: #ff5901;
    --color-forest: #667b5a;
    --color-water: #d8eefc;
    --color-warning: #c50000;
  }
  :root {
    --color-text: var(--color-brown);
    --color-background: var(--color-stone);
  }
  :root {
    --spacing-inline: var(--spacing-4xs-xs);
    --spacing-grid: var(--spacing-6xs-5xs);
  }
  :root {
    --font-family-base:
      "Bureau Sans",
      system-ui,
      sans-serif;
    --font-family-heading: "Earl", serif;
    --font-size-base: 0.9375rem;
    --font-size-big: var(--step-0);
  }
  @media (max-width: 900px) {
    :root {
      --font-size-base: 0.8125rem;
    }
  }
  @media (max-width: 500px) {
    :root {
      --font-size-base: 0.9375rem;
    }
  }
  :root {
    --width-max: 120rem;
    --width-border: 1px;
    --border-radius: 0.1875rem;
    --height-button: calc(var(--font-size-base) * 1.5 + 2 * var(--width-border));
  }
}

/* assets/css/base/base.css */
@layer base;

/* assets/css/components/button.css */
@layer components {
  .buttons {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-xs);
    min-inline-size: 0;
  }
  .buttons__item {
    max-inline-size: 100%;
  }
  .button {
    --background-color: transparent;
    --color: var(--color-text);
    --border-color: var(--color-text);
    --focus-outline-color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    block-size: var(--height-button);
    font-weight: bold;
    line-height: 1;
    padding-inline: 0.5em;
    border: var(--width-border) solid var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.25s var(--ease-1);
      transition-property: background-color, color;
    }
    &:is(:any-link, button):not(:disabled) {
      cursor: pointer;
      &:hover,
      &:focus-visible {
        --background-color: var(--color-text);
        --color: var(--color-background);
      }
      &:active {
        filter: brightness(0.9);
      }
    }
    &:disabled,
    &[disabled] {
      text-decoration: line-through;
      text-decoration-thickness: 0.1em;
      cursor: not-allowed;
    }
  }
}

/* assets/css/components/guides.css */
@layer components {
  .guides {
    position: fixed;
    inset: 0;
    inline-size: auto;
    block-size: auto;
    background: transparent;
    pointer-events: none;
    --guide-color: #84ffff;
  }
  .guides::after {
    content: attr(data-window-width);
    color: var(--guide-color);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-big);
  }
  .guides__inner {
    height: 100%;
  }
  .guides__guide {
    outline: 1px solid var(--guide-color);
    background-color: color-mix(in srgb, var(--guide-color), transparent 75%);
  }
}

/* assets/css/components/icon-button.css */
@layer components {
  .icon-button {
    --background-color: var(--color-background);
    --color: var(--color-text);
    --focus-outline-color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--height-button);
    block-size: var(--height-button);
    background-color: var(--background-color);
    color: var(--color);
    border: 0;
    @media (prefers-reduced-motion: no-preference) {
      transition: all 0.25s var(--ease-1);
      transition-property: background-color, color;
    }
    &:is(:any-link, button):not(:disabled) {
      cursor: pointer;
      &:hover,
      &:focus-visible {
        --background-color: var(--color-text);
        --color: var(--color-background);
      }
      &:active {
        filter: brightness(0.9);
      }
    }
    &:disabled,
    &[disabled] {
      cursor: not-allowed;
      opacity: 0.5;
    }
  }
  .icon-button__icon {
    inline-size: 45%;
    block-size: 45%;
    & path {
      fill: currentColor;
    }
  }
  .icon-button[aria-pressed=false] .icon-button__icon--toggle,
  .icon-button[aria-pressed=true] .icon-button__icon--default {
    display: none;
  }
}

/* assets/css/components/media.css */
@layer components {
  .media {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
    position: relative;
  }
  .media__pause {
    position: absolute;
    inset-block-start: var(--spacing-4xs);
    inset-inline-end: var(--spacing-4xs);
  }
  .media__caption {
    font-size: var(--font-size-base);
  }
  .media__image,
  .media__video {
    border-radius: var(--border-radius);
    background-color: var(--color-brown-subtle);
  }
}

/* assets/css/components/interest-menu.css */
@layer components {
  .interest-menu__wrap {
    position: absolute;
    z-index: 10;
    inset-inline: 0;
    inset-block-end: var(--spacing-3xs-xs);
    padding-block-start: var(--spacing-2xs);
    pointer-events: none;
    @media (max-width: 500px) {
      padding-block-start: calc(var(--height-button) + var(--spacing-2xs) + var(--spacing-6xs));
    }
  }
  .interest-menu__wrap[data-pinned] {
    position: fixed;
    inset-block-end: auto;
    inset-block-start: 0;
  }
  .interest-menu {
    pointer-events: all;
  }
  .interest-menu__list {
    display: flex;
  }
  .interest-menu__list-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: var(--color-background);
    &:not(:last-child) {
      margin-inline-end: calc(var(--width-border) * -1);
    }
    &:first-child {
      @media (max-width: 900px) {
        display: none;
      }
    }
    &:has(.select) {
      @media (max-width: 500px) {
        flex: 1 1 0;
        min-inline-size: 0;
      }
    }
  }
  .interest-menu__label {
  }
  .interest-menu__select {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      inset: -0.5rem 0;
    }
  }
  .interest-menu__button {
    position: relative;
    &:before {
      content: "";
      position: absolute;
      inset: -0.5rem 0;
    }
    @media (max-width: 500px) {
      width: 4.75rem;
    }
  }
  .interest-menu__button--info {
  }
  .interest-menu__button--contact {
  }
}

/* assets/css/components/logo.css */
@layer components {
  .logo {
    display: block;
  }
  .logo__graphic {
    width: 100%;
    height: auto;
    overflow: visible;
  }
}

/* assets/css/components/menu.css */
@layer components {
  .menu {
  }
  .menu__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: var(--spacing-grid);
    row-gap: var(--spacing-m);
    @media (max-width: 900px) {
      grid-template-columns: 1fr;
    }
  }
  .menu__list-item--has-children {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: var(--spacing-4xs);
    grid-column: span 2;
    &:first-child {
      grid-column: 1 / -1;
    }
    @media (max-width: 900px) {
      grid-column: 1 / -1;
    }
  }
  .menu__sublist {
    display: flex;
    flex-direction: column;
  }
  .menu__chunks {
    display: grid;
    gap: var(--spacing-xs);
    column-gap: var(--spacing-grid);
    @media (max-width: 900px) {
      grid-template-columns: 1fr 1fr;
    }
  }
  .menu__chunk-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4xs);
  }
  .menu__item {
    line-height: 1;
    &[aria-current=page] {
      text-decoration: underline;
      text-decoration-thickness: var(--width-border);
      text-underline-offset: 0.075em;
    }
  }
  .menu__item--level-1 {
    font-weight: bold;
    &[aria-current=page] {
      text-underline-offset: 0.2em;
    }
  }
}

/* assets/css/components/menu-dialog.css */
@layer components {
  .menu-dialog {
    --color-text: var(--color-stone);
    --color-background: var(--color-brown);
    block-size: 100%;
    inline-size: 100%;
    color: var(--color-text);
    background: transparent;
    &::backdrop {
      background: transparent;
    }
    &[open] {
      display: flex;
    }
  }
  .menu-dialog__bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--color-background);
    opacity: 0;
    will-change: opacity;
  }
  .menu-dialog__content {
    flex: 1;
    overflow-y: auto;
    scrollbar-color: var(--color-stone) transparent;
    scrollbar-width: thin;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    &:before,
    &:after {
      content: "";
      height: var(--spacing-xs);
      flex-shrink: 0;
    }
  }
  .menu-dialog__inner {
    opacity: 0;
    will-change: opacity;
    flex-grow: 1;
  }
  .menu-dialog__media-wrap {
    grid-column: span 4;
    margin-inline-end: var(--spacing-s);
    @media (max-width: 1150px) {
      display: none;
    }
  }
  .menu-dialog__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
  }
  .menu-dialog__menu {
    transform: translateY(-2rem);
    will-change: transform;
    grid-column: span 6;
    @media (max-width: 1150px) {
      grid-column: 1 / -1;
    }
  }
  .menu-dialog__close-wrap {
    position: fixed;
    z-index: 10;
    inset-inline: 0;
    inset-block-start: 0;
    padding-block-start: var(--spacing-2xs);
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
  }
  .menu-dialog__close-inner {
    display: flex;
    justify-content: end;
  }
  .menu-dialog__close {
    pointer-events: all;
    --background-color: var(--color-background);
    &:before {
      content: "";
      position: absolute;
      inset: -0.5rem;
    }
  }
}

/* assets/css/components/menu-toggle.css */
@layer components {
  .menu-toggle__wrap {
    position: absolute;
    z-index: 10;
    inset-inline: 0;
    inset-block-end: var(--spacing-3xs-xs);
    padding-block-start: var(--spacing-2xs);
    pointer-events: none;
    @media (max-width: 500px) {
      inset-block-start: 0;
      inset-block-end: auto;
    }
  }
  .menu-toggle__wrap[data-pinned] {
    position: fixed;
    inset-block-end: auto;
    inset-block-start: 0;
  }
  .menu-toggle__inner {
    display: flex;
    justify-content: end;
  }
  .menu-toggle {
    pointer-events: all;
    --background-color: var(--color-background);
    position: relative;
    &:before {
      content: "";
      position: absolute;
      inset: -0.5rem;
    }
    @media (max-width: 500px) {
      width: 4.75rem;
    }
  }
}

/* assets/css/components/select.css */
@layer components {
  .select {
    --background-color: transparent;
    --color: var(--color-text);
    --border-color: var(--color-text);
    --focus-outline-color: var(--color-text);
    display: inline-flex;
    align-items: center;
    position: relative;
    max-inline-size: 100%;
    block-size: var(--height-button);
    font-weight: bold;
    line-height: 1;
    border: var(--width-border) solid var(--border-color);
    background-color: var(--background-color);
    color: var(--color);
    cursor: pointer;
    @media (prefers-reduced-motion: no-preference) {
      transition: background-color 0.25s var(--ease-1), color 0.25s var(--ease-1);
    }
    &:has(.select__control:focus-visible) {
      outline: var(--focus-outline-width) solid var(--focus-outline-color);
      outline-offset: var(--focus-outline-offset);
    }
    &:hover:not(:has(.select__control:disabled)),
    &:has(.select__control:focus-visible) {
      --background-color: var(--color-text);
      --color: var(--color-background);
    }
    &:has(.select__control:disabled) {
      cursor: not-allowed;
      .select__value {
        text-decoration: line-through;
        text-decoration-thickness: 0.1em;
      }
    }
    &::after {
      content: "";
      position: absolute;
      inset-inline-end: 0.5em;
      inset-block-start: 50%;
      translate: 0 -50%;
      width: 0.55em;
      height: 1em;
      background-color: currentColor;
      mask-image: url(../images/dropdown-arrow.svg);
      mask-size: contain;
      mask-position: center;
      mask-repeat: no-repeat;
      pointer-events: none;
    }
  }
  .select__value {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-inline: 0.5em calc(1em + 0.55em);
  }
  .select__control {
    position: absolute;
    inset: 0;
    appearance: none;
    cursor: inherit;
    opacity: 0;
  }
}

/* assets/css/components/skip-to-content.css */
@layer components {
  .skip-to-content {
    position: fixed;
    inset-block-start: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    inset-inline-start: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    z-index: 200;
    translate: 0 calc(-100% - var(--focus-outline-offset) - var(--focus-outline-width) - 1px);
    &:focus-visible {
      translate: 0;
    }
    @media (prefers-reduced-motion: no-preference) {
      transition: translate 0.25s var(--ease-spring-1);
    }
  }
}

/* assets/css/components/components.css */
@layer components;

/* assets/css/modules/modules.css */
@layer modules;

/* assets/css/sections/hero-home.css */
@layer sections {
  .hero-home {
    height: 100vh;
    height: 100svh;
    max-height: 62rem;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-block: var(--spacing-3xs-xs);
    position: relative;
  }
  .hero-home__inner {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .hero-home__logo {
    margin-block-end: var(--spacing-2xs);
    .logo__graphic--horizontal {
      @media (max-width: 500px) {
        display: none;
      }
    }
    .logo__graphic--vertical {
      display: none;
      @media (max-width: 500px) {
        display: block;
      }
    }
    @media (max-width: 500px) {
      margin-block-start: calc(var(--height-button) + var(--spacing-3xs-xs));
    }
  }
  .hero-home__media-wrap {
    min-height: 0;
    height: 100%;
  }
  .hero-home__media {
    height: 100%;
    object-fit: cover;
  }
}

/* assets/css/sections/sections.css */
@layer sections;

/* assets/css/base/utility.css */
@layer utility {
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* assets/css/style.css */