:root {
    color: #18233b;
    background: #dce7ec;
    font-family: ui-sans-serif, system-ui, sans-serif;
}

body {
    margin: 0;
}

main {
    width: min(68rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0;
}

.eyebrow {
    color: #9b3f35;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    font-family: Georgia, serif;
    font-size: clamp(2.5rem, 8vw, 5.5rem);
    font-weight: 400;
}

.stage {
    height: 25rem;
    overflow: hidden;
    border: 1px solid #18233b;
    background: #aac2cc;
    perspective: 800px;
}

.room {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateZ(0) rotateY(0);
    transform-style: preserve-3d;
    transition: transform 500ms ease;
}

.room[data-viewpoint="gallery"] {
    transform: translateZ(120px) rotateX(2deg) rotateY(-18deg);
}

.surface {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
}

.back {
    background: #f1e6d0;
    transform: translateZ(-200px);
}

.left {
    left: -50%;
    background: #d2a874;
    transform: rotateY(90deg) translateZ(50vw);
}

.right {
    right: -50%;
    background: #7b9ca7;
    transform: rotateY(-90deg) translateZ(50vw);
}

.floor {
    top: 50%;
    background: repeating-linear-gradient(90deg, #765741 0 2rem, #89664b 2rem 4rem);
    transform: rotateX(90deg) translateZ(-12.5rem);
}

figure {
    position: absolute;
    top: 15%;
    left: 35%;
    width: min(18rem, 30vw);
    margin: 0;
    padding: 0.8rem;
    border: 0.5rem solid #18233b;
    background: #f6f0e4;
    transform: translateZ(-190px);
}

figure img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
}

figcaption {
    padding-top: 0.5rem;
    font-size: 0.8rem;
}

nav,
.checkpoints {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

button {
    min-height: 2.75rem;
    padding: 0.6rem 1rem;
    border: 1px solid #18233b;
    background: #18233b;
    color: white;
    font: inherit;
    cursor: pointer;
}

button:focus-visible {
    outline: 3px solid #9b3f35;
    outline-offset: 3px;
}

output {
    padding: 0.35rem 0.55rem;
    border: 1px solid currentColor;
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
}

#semantic-state {
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

@media (prefers-reduced-motion: reduce) {
    .room {
        transition-duration: 0s;
    }
}