@font-face {
        font-family: "Amoria";
        src: url("../fonts/AMORIA.otf") format("opentype");
        font-display: swap;
      }



      :root {
        color-scheme: light;
        --gold: #ffcF77;
        --line: #f1af3b;
        --ink: #3b2919;
        --circle-size: clamp(104px, 13vw, 158px);
      }

      * {
        box-sizing: border-box;
      }

      html,
      body {
        width: 100%;
        min-width: 320px;
        min-height: 100%;
        margin: 0;
      }

      body {
        overflow-x: hidden;
        overflow-y: auto;
        background: #fff;
        color: var(--ink);
      }

      .scene {
        position: relative;
        display: grid;
        width: 100%;
        min-height: 100svh;
        overflow: visible;
        isolation: isolate;
        place-items: center;
      }

      .scene::before {
        position: absolute;
        z-index: -2;
        inset: 0 0 -120px;
        background:
          radial-gradient(ellipse at 50% 54%, rgba(255, 207, 119, 0.94), transparent 68%),
          linear-gradient(145deg, #fff9ed 0%, #ffcf77 100%);
        content: "";
        opacity: 0;
        transition: opacity 3s ease;
      }

      .scene.is-warm::before {
        opacity: 1;
      }

      .welcome {
        position: absolute;
        z-index: 4;
        top: clamp(30px, 8vh, 82px);
        left: 50%;
        width: min(92vw, 900px);
        margin: 0;
        transform: translateX(-50%);
        color: #4a3018;
        font-family: "Amoria", Georgia, serif;
        font-size: clamp(2rem, 4.4vw, 4.5rem);
        font-weight: 400;
        line-height: 1.15;
        text-align: center;
        text-wrap: balance;
      }

      .welcome::after {
        display: inline-block;
        width: 0.06em;
        height: 0.86em;
        margin-left: 0.11em;
        transform: translateY(0.08em);
        background: currentColor;
        content: "";
        animation: blink 0.9s step-end infinite;
      }

      .cheese {
        position: absolute;
        z-index: 2;
        top: 53%;
        left: 50%;
        display: block;
        width: min(58vw, 66vh, 680px);
        height: auto;
        max-height: 70vh;
        object-fit: contain;
        opacity: 0;
        transform: translate(-50%, -46%) scale(0.96);
        filter: drop-shadow(0 24px 20px rgba(92, 57, 14, 0.13));
        transition: opacity 2.5s ease, transform 2.5s cubic-bezier(0.2, 0.7, 0.25, 1);
        pointer-events: auto;
      }

      .cheese.is-visible {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        animation: float 5.5s ease-in-out 2.5s infinite;
      }

      .start-screen {
        position: fixed;
        z-index: 10;
        inset: 0;
        display: grid;
        place-items: center;
        background: #fff;
        opacity: 1;
        transition: opacity 600ms ease, visibility 0s;
      }

      .start-screen.is-dismissed {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 600ms ease, visibility 0s linear 600ms;
      }

      .start-screen p {
        margin: 0;
        color: #3b2919;
        font-family: "Amoria", Georgia, serif;
        font-size: clamp(2rem, 5vw, 3.5rem);
        text-align: center;
      }

      .connectors {
        position: absolute;
        z-index: 1;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
      }

      .connector {
        fill: none;
        stroke: var(--line);
        stroke-linecap: round;
        stroke-width: 3;
        stroke-dasharray: var(--length, 1000);
        stroke-dashoffset: var(--length, 1000);
        transition: stroke-dashoffset 650ms cubic-bezier(0.2, 0.7, 0.25, 1) 180ms;
      }

      .connector.is-active {
        stroke-dashoffset: 0;
      }

      .destinations {
        position: absolute;
        z-index: 3;
        inset: 0;
        opacity: 0;
        transition: opacity 1s ease;
        pointer-events: none;
      }

      .destinations.is-visible {
        opacity: 1;
        pointer-events: auto;
      }

      .destination {
        position: absolute;
        display: grid;
        justify-items: center;
        gap: 10px;
        width: var(--circle-size);
        color: var(--ink);
        text-decoration: none;
        transform: translate(-50%, -50%);
        outline: none;
        animation: circle-float 5s ease-in-out var(--float-delay, 0s) infinite;
      }

      .destination--history {
        top: 50%;
        left: 13%;
        --float-delay: -0.5s;
      }

      .destination--extras {
        top: 95%;
        left: 50%;
        --float-delay: -2.1s;
      }

      .destination--bio {
        top: 50%;
        left: 87%;
        --float-delay: -3.7s;
      }

      .destination--extras .destination-label {
        position: absolute;
        bottom: calc(100% + 8px);
      }

      .portrait {
        position: relative;
        display: block;
        width: var(--circle-size);
        aspect-ratio: 1;
        overflow: hidden;
        border: 2px solid rgba(92, 57, 14, 0.12);
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.68);
        box-shadow: 0 9px 24px rgba(92, 57, 14, 0.13);
        transition: transform 420ms cubic-bezier(0.2, 0.7, 0.25, 1), border-color 300ms ease, box-shadow 300ms ease;
      }

      .portrait::after {
        position: absolute;
        inset: -10px;
        border: 4px solid transparent;
        border-radius: 50%;
        content: "";
        transform: scale(0.88);
        transition: transform 320ms ease, border-color 320ms ease;
      }

      .portrait img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .destination-label {
        font-family: "Amoria", Georgia, serif;
        font-size: clamp(1rem, 1.55vw, 1.35rem);
        line-height: 1.1;
        text-align: center;
        text-shadow: 0 1px 8px rgba(255, 250, 240, 0.9);
        white-space: nowrap;
      }

      .destination:hover .portrait,
      .destination:focus-visible .portrait {
        border-color: var(--line);
        box-shadow: 0 12px 30px rgba(92, 57, 14, 0.2);
        transform: scale(1.12);
      }

      .destination:hover .portrait::after,
      .destination:focus-visible .portrait::after {
        border-color: var(--line);
        transform: scale(1);
      }

      .destination:focus-visible .destination-label {
        text-decoration: underline;
        text-decoration-color: var(--line);
        text-underline-offset: 4px;
      }

      #cheese-link:focus-visible .cheese {
        outline: 3px solid var(--line);
        outline-offset: 5px;
        border-radius: 8px;
      }

      @keyframes float {
        0%,
        100% {
          transform: translate(-50%, -50%);
        }
        50% {
          transform: translate(-50%, calc(-50% - 11px));
        }
      }

      @keyframes circle-float {
        0%,
        100% {
          transform: translate(-50%, -50%);
        }
        50% {
          transform: translate(-50%, calc(-50% - 9px));
        }
      }

      @keyframes blink {
        50% {
          opacity: 0;
        }
      }

      @media (max-width: 700px) {
        :root {
          --circle-size: clamp(82px, 24vw, 116px);
        }

        .scene {
          min-height: 100svh;
        }

        .welcome {
          top: max(32px, env(safe-area-inset-top));
          font-size: clamp(1.8rem, 8vw, 3rem);
        }

        .cheese {
          top: 46%;
          width: min(92vw, 54vh, 520px);
          max-height: 55vh;
        }

        .destination--history {
          top: 79%;
          left: 19%;
        }

        .destination--extras {
          top: 96%;
          left: 50%;
        }

        .destination--bio {
          top: 79%;
          left: 81%;
        }

        .destinations {
          height: 100svh;
        }

        .destination {
          gap: 8px;
        }

        .destination-label {
          font-size: clamp(0.82rem, 3.8vw, 1.05rem);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          scroll-behavior: auto !important;
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
          transition-delay: 0ms !important;
        }
      }