.logotext {
    white-space: nowrap;
}

.mobile-scene-controls,
.mobile-control-label {
    display: none;
}

@media (max-width: 800px) {
    .mobile-scene-controls {
        position: fixed;
        top: max(5rem, calc(env(safe-area-inset-top) + 5rem));
        right: max(1.25rem, env(safe-area-inset-right));
        z-index: 40;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.375rem;
    }

    .mobile-scene-controls button,
    #music-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        min-width: 3.75rem;
        min-height: 1.75rem;
        width: auto;
        height: auto;
        padding: 0.125rem 0.3rem;
        border: 1px solid rgb(255 255 255 / 0.55);
        border-radius: 0.65rem;
        background: rgb(0 125 168 / 0.75);
        color: #fff;
        font: 700 0.625rem/0.875rem sans-serif;
        text-transform: uppercase;
        cursor: pointer;
        touch-action: manipulation;
        box-shadow: 0 4px 12px rgb(0 0 0 / 0.16);
        transition: background-color 180ms ease;
    }

    .mobile-scene-controls svg,
    #music-toggle img {
        width: 0.75rem;
        height: 0.75rem;
    }

    .mobile-scene-controls svg {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .mobile-scene-controls [data-scene="day"],
    body.night-mode .mobile-scene-controls [data-scene="night"] {
        display: none;
    }

    body.night-mode .mobile-scene-controls [data-scene="day"] {
        display: inline-flex;
    }

    .mobile-scene-controls button[aria-pressed="true"],
    #music-toggle.is-playing {
        background: rgb(0 84 112 / 0.75);
    }

    .mobile-scene-controls button:focus-visible {
        outline: 3px solid #f2d994;
        outline-offset: 3px;
    }

    .mobile-scene-controls button:active,
    #music-toggle:active {
        background: rgb(0 62 84 / 0.8);
    }

    #music-toggle {
        top: max(7.125rem, calc(env(safe-area-inset-top) + 7.125rem));
        right: max(1.25rem, env(safe-area-inset-right));
        transform: none;
    }

    #music-toggle:hover {
        transform: none;
    }

    .mobile-control-label {
        display: inline;
    }
}

@media (max-width: 767px) {
    #experience {
        padding-bottom: 2rem;
    }

    #food {
        padding-top: 1rem;
    }

    #food .food {
        margin-top: 1.5rem;
    }

    .food-title {
        left: auto !important;
        width: calc(100% + 2.5rem) !important;
        min-height: 0;
        margin-left: -1.25rem;
        padding: 0 1.25rem;
        aspect-ratio: auto !important;
        translate: none !important;
        transform: none !important;
        background-image: none !important;
        overflow: visible;
    }

    .food-title .lobster-steam {
        display: none;
    }

    .food-title h2 {
        max-width: 100%;
        font-size: clamp(2rem, 10vw, 2.5rem);
        line-height: 1.05;
        overflow-wrap: anywhere;
    }
}

.facility-list li {
    position: relative;
    padding-left: 1.35rem;
}

.facility-list li::before {
    position: absolute;
    top: 0.3rem;
    left: 0.15rem;
    width: 0.35rem;
    height: 0.65rem;
    border-right: 1.5px solid #9d3026;
    border-bottom: 1.5px solid #9d3026;
    content: "";
    transform: rotate(45deg);
}

.facility-heading {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.facility-heading svg {
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    fill: none;
    stroke: #9d3026;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.75;
}

.content-tabs {
    display: inline-flex;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid #d8cbbb;
    border-radius: 0.85rem;
    background: #eee6da;
}

.content-tabs [role="tab"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: #5d554d;
    font-family: inherit;
    font-size: 0.925rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.content-tabs [role="tab"] svg {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.content-tabs [role="tab"][aria-selected="true"] {
    color: #fff;
    background: #241f1a;
    box-shadow: 0 5px 14px rgb(36 31 26 / 0.18);
}

.content-tabs [role="tab"]:focus-visible {
    outline: 3px solid rgb(157 48 38 / 0.3);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .content-tabs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .content-tabs [role="tab"] {
        transition: none;
    }
}

.theme-icon {
    position: fixed;
    top: calc(20% + 4.5rem);
    right: 1.25rem;
    z-index: 40;
    display: none;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 50%;
    color: #fff;
    background: rgba(27, 21, 9, 0.427);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgb(36 31 26 / 0.24);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.theme-icon svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.theme-icon-sun {
    display: none;
}

.theme-icon:hover {
    background: rgb(215 181 109 / 0.65);
    transform: translateY(-50%) scale(1.05);
}

.theme-icon:focus-visible {
    outline: 3px solid rgb(215 181 109 / 0.45);
    outline-offset: 4px;
}

body.night-mode .theme-icon-moon {
    display: none;
}

body.night-mode .theme-icon-sun {
    display: block;
}

.hero-day-image,
.hero-night-image {
    transition: opacity 3.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-day-image {
    opacity: 1;
}

.hero-night-image {
    opacity: 0;
}

body.night-mode .hero-day-image {
    opacity: 0;
}

body.night-mode .hero-night-image {
    opacity: 1;
}

.hero-bottom-fade {
    background: linear-gradient(to top, #f7f3ec, transparent);
}

@media (min-width: 801px) {
    .theme-icon {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme-icon {
        transition: none;
    }

    .theme-icon:hover {
        transform: translateY(-50%);
    }

    .hero-day-image,
    .hero-night-image {
        transition-duration: 0.01ms;
    }
}

.music-icon {
    position: fixed;
    top: 20%;
    right: 1.25rem;
    z-index: 40;
    display: none;
    width: 3.5rem;
    height: 3.5rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 50%;
    color: #fffcf9;
    background: rgba(27, 21, 9, 0.427);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 28px rgb(36 31 26 / 0.24);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.music-icon img {
    width: 1.75rem;
    height: 1.75rem;
}

.music-icon:hover {
    background: rgb(215 181 109 / 0.65);
    transform: translateY(-50%) scale(1.05);
}

.music-icon:focus-visible {
    outline: 3px solid rgb(215 181 109 / 0.45);
    outline-offset: 4px;
}

.music-icon.is-playing {
    background: rgb(157 48 38 / 0.82);
    box-shadow: 0 10px 30px rgb(157 48 38 / 0.3);
}

@media (min-width: 801px) {
    .music-icon {
        display: flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .music-icon {
        transition: none;
    }

    .music-icon:hover {
        transform: translateY(-50%);
    }
}

@media (width < 640px) {
    nav[aria-label="Primary navigation"] {
        gap: 0.375rem;
        padding: 0.625rem 0.625rem;
    }

    nav[aria-label="Primary navigation"] > a {
        flex-shrink: 0;
        font-size: 0.6875rem;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    nav[aria-label="Primary navigation"] > div:last-child {
        gap: 0.25rem;
    }

    nav[aria-label="Primary navigation"] > div:last-child > a {
        padding: 0.375rem 0.5rem;
        font-size: 0.6875rem;
        line-height: 1.25rem;
        white-space: nowrap;
    }
}