@layer components {

  :root {
    --footer-prelude-h: 9rem;
    --footer-prelude-pad: clamp(56px, 10vh, 96px);
  }

  /*
   * Footer reveal (https://koro.dev/components/footer-reveal):
   * #main is the curtain. Prelude is normal end-of-page content (sticky at top once
   * reached). Footer sticks to the bottom with height = viewport − prelude (--footer-prelude-h).
   */

  .footer-prelude {
    position: sticky;
    top: 0;
    z-index: 2;
    --footer-prelude-bg-to: var(--ink);
    background: var(--footer-prelude-bg-to);
    text-align: center;
    display: grid;
    place-items: center;
    width: 100%;
    height: fit-content;
    padding: var(--footer-prelude-pad) var(--pad-x);
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
  }

  .footer-prelude__surface {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--footer-surface, var(--canvas));
    transition: transform var(--motion-standard);
    will-change: transform;
  }

  .footer-prelude.footer-prelude--revealed .footer-prelude__surface {
    transform: translateY(-100%);
  }

  .footer__head {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 2vh, 16px);
    margin: 0;
    width: 100%;
    height: fit-content;
    flex: 0 0 auto;
  }

  /* Sticky reveal panel: menu + utility only. */
  .footer.footer--reveal {
    --footer-surface: var(--parchment);
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - var(--footer-prelude-h));
    height: calc(100svh - var(--footer-prelude-h));
    box-sizing: border-box;
    display: grid;
    grid-template-rows: 1fr auto;
    align-items: center;
    row-gap: clamp(24px, 4vh, 48px);
    background: var(--footer-surface);
    padding-inline: var(--pad-x);
    padding-block-start: 0;
    padding-block-end: var(--pad-x);
    z-index: 0;
  }

  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-canvas {
    --footer-surface: var(--canvas);
  }
  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-parchment {
    --footer-surface: var(--parchment);
  }
  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-sand {
    --footer-surface: var(--sand);
  }
  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-blue-mist {
    --footer-surface: var(--blue-mist);
  }
  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-blue-soft-1 {
    --footer-surface: var(--blue-soft-1);
  }
  :is(body, .footer-prelude, .footer.footer--reveal).footer--bg-blue-soft-2 {
    --footer-surface: var(--blue-soft-2);
  }

  /* Reveal panel: always ink; page footer_background only affects prelude + body. */
  #site-footer.footer.footer--reveal {
    --footer-surface: var(--ink);
    --footer-on-dark-muted: color-mix(in srgb, var(--ink) 48%, #fff);
    --footer-on-dark-sep: color-mix(in srgb, var(--ink) 78%, #fff);
    --footer-bg-x-color: color-mix(in srgb, #fff 3%, transparent);
    overflow: clip;
  }

  .footer__bg-x {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: 0;
    width: min(88vw, 1200px);
    transform: translateX(-50%) translateY(50%);
    pointer-events: none;
    color: var(--footer-bg-x-color);
    line-height: 0;
  }

  .footer__bg-x-mark {
    display: block;
    width: 100%;
    height: auto;
  }

  .footer__bg-x-mark path {
    fill: currentColor;
  }

  #site-footer .footer__menu-panel,
  #site-footer .footer__utility {
    position: relative;
    z-index: 1;
  }

  #site-footer .footer__menu-title {
    color: var(--on-dark);
  }

  #site-footer .footer__menu-desc {
    color: var(--footer-on-dark-muted);
  }

  @media (hover: hover) {
    #site-footer .footer__menu-card:hover {
      background: color-mix(in srgb, #fff 6%, var(--ink));
    }
  }

  #site-footer .footer__utility.footer__row {
    color: var(--footer-on-dark-muted);
  }

  #site-footer .footer__sep {
    color: var(--footer-on-dark-sep);
  }

  .footer__logo {
    display: flex;
    justify-content: center;
    margin: 0;
    line-height: 1;
    color: var(--ink-soft);
  }
  .footer__logo-img {
    height: clamp(33px, 4.2vw, 42px);
    width: auto;
    display: block;
  }

  .footer__tagline {
    font-family: var(--serif);
    font-size: var(--fs-heading-accent);
    line-height: 1.18;
    letter-spacing: -0.018em;
    font-weight: 400;
    color: var(--ink-muted);
    margin: 0;
    text-align: center;
  }

  body:has(#how-to-enter) .footer__tagline {
    margin-bottom: clamp(48px, 8vh, 80px);
  }

  body:has(#how-to-enter) .footer.footer--reveal {
    row-gap: clamp(32px, 5vh, 56px);
  }

  body:has(#how-to-enter) .footer__menu-panel {
    justify-content: flex-end;
    padding-bottom: clamp(20px, 3.5vh, 40px);
  }
  .footer__tagline-viewport {
    display: inline-grid;
    grid-template: 1.18em / max-content;
    justify-items: center;
    align-items: start;
    overflow: clip;
    vertical-align: middle;
  }
  .footer__tagline-line {
    grid-area: 1 / 1;
    margin: 0;
    line-height: 1.18;
    text-align: center;
    white-space: nowrap;
    will-change: clip-path, filter, opacity;
  }
  .footer__tagline-line--a {
    animation: footer-tagline-a 11s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }
  .footer__tagline-line--b {
    animation: footer-tagline-b 11s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  @keyframes footer-tagline-a {
    0%, 30% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
    42% { clip-path: inset(0 0 0 100%); filter: blur(14px); opacity: 0; }
    43%, 71% { clip-path: inset(0 100% 0 0); filter: blur(14px); opacity: 0; }
    84% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
    100% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
  }
  @keyframes footer-tagline-b {
    0%, 30% { clip-path: inset(0 100% 0 0); filter: blur(14px); opacity: 0; }
    42% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
    43%, 71% { clip-path: inset(0 0 0 0); filter: blur(0); opacity: 1; }
    84% { clip-path: inset(0 0 0 100%); filter: blur(14px); opacity: 0; }
    85%, 100% { clip-path: inset(0 100% 0 0); filter: blur(14px); opacity: 0; }
  }

  .footer__menu-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 0;
    width: 100%;
  }

  .footer__menu {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .footer__menu-layout {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: stretch;
    column-gap: clamp(20px, 3.5vw, 48px);
    width: 100%;
    max-width: max-content;
    margin-inline: auto;
  }

  .footer__menu-layout:not(:has(.footer__menu-list--stack)) {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .footer__menu-layout:not(:has(.footer__menu-list--grid)) {
    grid-template-columns: auto;
    justify-content: center;
  }

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

  .footer__menu-list--stack {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    row-gap: 0;
  }

  .footer__menu-list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(12.5rem, max-content));
    grid-auto-rows: auto;
    column-gap: clamp(20px, 3.5vw, 48px);
    row-gap: clamp(24px, 3vh, 40px);
    align-content: start;
    justify-content: start;
    justify-items: start;
  }

  .footer__menu-list > .footer__menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: max-content;
    max-width: 14em;
    margin: 0;
    padding: 0;
    text-align: left;
  }

  .footer__menu-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .footer__menu-sublist > .footer__menu-item--child {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
  }

  .footer__menu-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: min(12.5rem, 100%);
    max-width: 14em;
    padding: clamp(6px, 1vh, 10px) clamp(12px, 1.5vw, 16px);
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    text-decoration: none;
    color: inherit;
    transition: background-color var(--motion-snappy);
  }

  @media (hover: hover) {
    .footer__menu-card:hover {
      background: color-mix(in srgb, var(--ink) 3.5%, var(--footer-surface));
    }
  }

  .footer__menu-sublist .footer__menu-card {
    border-radius: 0;
  }

  .footer__menu-sublist > .footer__menu-item--child:first-child .footer__menu-card {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }

  .footer__menu-sublist > .footer__menu-item--child:last-child .footer__menu-card {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }

  .footer__menu-title {
    display: block;
    font-family: var(--sans);
    font-size: var(--fs-ui-lg);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.005em;
    color: var(--ink-muted);
    transition: color var(--motion-snappy);
  }

  .footer__menu-desc {
    display: block;
    margin-top: 0.45em;
    text-align: left;
    font-family: var(--sans);
    font-size: var(--fs-ui);
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--ink-muted);
  }

  .footer__menu-card.is-active .footer__menu-title,
  .footer__menu-item.current-menu-item > .footer__menu-card .footer__menu-title,
  .footer__menu-item.current_page_item > .footer__menu-card .footer__menu-title,
  .footer__menu-item.current-menu-ancestor > .footer__menu-card .footer__menu-title,
  .footer__menu-item.current-menu-parent > .footer__menu-card .footer__menu-title {
    color: var(--accent);
  }

  .footer__menu-card:focus-visible {
    outline: 2px solid var(--accent-bright);
    outline-offset: 3px;
  }

  .footer__utility {
    align-self: stretch;
    padding-top: 0;
  }

  .footer__sep {
    color: var(--hairline);
  }
}

@media (max-width: 900px) {
  @layer components {
    #site-footer.footer.footer--reveal {
      --footer-mobile-content-max: min(100%, 30rem);
      grid-template-rows: 1fr auto;
      align-items: start;
      align-content: stretch;
      padding-block-start: clamp(28px, 5.5vh, 52px);
      row-gap: 0;
    }

    #site-footer .footer__utility {
      align-self: end;
      width: 100%;
      max-width: var(--footer-mobile-content-max);
      margin-inline: auto;
    }

    #site-footer .footer__bg-x {
      bottom: 38%;
      transform: translateX(-50%) translateY(56%);
    }

    .footer__menu-panel {
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      max-width: var(--footer-mobile-content-max);
      margin-inline: auto;
    }

    body:has(#how-to-enter) .footer__menu-panel {
      justify-content: flex-start;
      padding-bottom: 0;
    }

    .footer__menu-layout {
      --footer-menu-row-gap: clamp(12px, 2vh, 20px);
      --footer-menu-card-h: 44px;
      grid-template-columns: 1fr 1fr;
      column-gap: clamp(16px, 4vw, 32px);
      row-gap: 0;
      width: 100%;
      max-width: 100%;
      margin-inline: auto;
      align-items: start;
    }

    .footer__menu-list--stack,
    .footer__menu-list--grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: var(--footer-menu-card-h);
      row-gap: var(--footer-menu-row-gap);
      column-gap: 0;
      width: 100%;
    }

    .footer__menu-list--stack > .footer__menu-item--parent,
    .footer__menu-sublist,
    .footer__menu-sublist > .footer__menu-item--child,
    .footer__menu-list--grid > .footer__menu-item {
      display: contents;
    }

    .footer__menu-desc {
      display: none;
    }

    .footer__menu-card {
      min-width: 0;
      max-width: none;
      min-height: var(--footer-menu-card-h);
      height: var(--footer-menu-card-h);
      padding: 0 clamp(20px, 5vw, 32px);
      border-radius: 6px;
      justify-content: center;
      box-sizing: border-box;
    }

    .footer__menu-list--grid .footer__menu-card {
      align-items: center;
      text-align: center;
    }

    #site-footer .footer__menu-list--grid .footer__menu-title {
      text-align: center;
      width: 100%;
    }

    #site-footer .footer__menu-title {
      font-family: var(--body);
      font-size: var(--fs-body);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    .footer__menu-sublist > .footer__menu-item--child:first-child .footer__menu-card,
    .footer__menu-sublist > .footer__menu-item--child:last-child .footer__menu-card {
      border-radius: 6px;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  @layer components {
    .footer-prelude {
      position: static;
    }

    .footer-prelude__surface {
      transition: none;
    }

    .footer.footer--reveal {
      position: static;
      height: auto;
      min-height: 0;
    }

    .footer__tagline-viewport {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0.35em;
      overflow: visible;
      grid-template: none;
    }
    .footer__tagline-line {
      grid-area: auto;
      line-height: inherit;
      white-space: normal;
    }
    .footer__tagline-line--a,
    .footer__tagline-line--b {
      animation: none;
      clip-path: none;
      filter: none;
      opacity: 1;
      white-space: normal;
    }
  }
}