:root { color-scheme: light; font-family: Arial, Helvetica, sans-serif; background: #ded5c9; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
.room { --photo-width: max(100vw, 177.778svh); --photo-height: max(56.25vw, 100svh); --photo-left: calc(50vw - var(--photo-width) * .5); --photo-top: calc(50svh - var(--photo-height) * .5); position: relative; width: 100%; height: 100%; height: 100svh; overflow: hidden; }
#scene { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.room.is-ready #scene { opacity: 1; }
.room.is-ready .fallback { visibility: hidden; }
.fallback { position: absolute; width: max(100vw, 177.778svh); height: max(56.25vw, 100svh); left: 50%; top: 50%; transform: translate(-50%, -50%); }
.fallback-photo { width: 100%; height: 100%; object-fit: cover; }
.fallback-art { position: absolute; left: 11.667%; top: 32.315%; width: 22.917%; transform: rotate(.4deg); opacity: .95; }
.wall-link { position: absolute; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: transparent; font: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.works { left: 15.6%; top: 39.2%; width: 17.5%; height: 4.8%; cursor: pointer; }
.works:disabled { cursor: default; }
.contact { left: 15.6%; top: 60%; width: 10.8%; height: 4.8%; cursor: pointer; }
.wall-link:focus { outline: none; }
.wall-link:focus-visible { outline: 2px solid #863500; outline-offset: 6px; }
.room.is-zooming nav { visibility: hidden; }
.back-button { position: absolute; z-index: 2; top: 28px; left: 28px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 0; background: transparent; color: #63300d; font: 28px Arial, sans-serif; cursor: pointer; animation: back-fade-in 700ms ease-out both; }
@keyframes back-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .back-button { animation: none; } }
.back-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.works-gallery { --ink: #63300d; --gutter: clamp(24px, 5vw, 88px); position: absolute; z-index: 1; inset: 0; color: var(--ink); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 180ms ease, visibility 0s linear 180ms; }
.works-gallery.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 1000ms ease 120ms, visibility 0s; }
.gallery-header, .gallery-footer { position: absolute; z-index: 1; left: var(--gutter); right: var(--gutter); display: flex; justify-content: space-between; align-items: center; font-size: 11px; letter-spacing: .025em; pointer-events: none; }
.gallery-header { top: 43px; left: max(96px, var(--gutter)); }
.gallery-footer { bottom: 24px; }
.gallery-count { font-variant-numeric: tabular-nums; }
.works-pages { height: 100%; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; scroll-snap-type: y mandatory; scrollbar-width: none; }
.works-pages::-webkit-scrollbar { display: none; }
.works-pages:focus { outline: none; }
.project-page { height: 100%; min-height: 100%; padding: 90px var(--gutter) 62px; scroll-snap-align: start; scroll-snap-stop: always; }
.project-grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); width: 100%; height: 100%; }
.project-title, .project-description { position: relative; padding: clamp(12px, 1.5vw, 25px); align-self: start; }
.project-number, .project-label, .project-meta { font-size: 10px; line-height: 1.5; letter-spacing: .025em; }
.project-number, .project-label { display: block; }
.project-title h1, .project-title h2 { margin: 16px 0 0; font-size: clamp(34px, 4.8vw, 78px); font-weight: 400; line-height: .98; letter-spacing: -.055em; }
.project-description p { max-width: 38ch; margin: 14px 0 0; font-size: clamp(12px, 1.05vw, 16px); line-height: 1.5; letter-spacing: -.015em; }
.project-description .project-meta { margin-top: 24px; font-size: 10px; }
.project-image { display: flex; justify-content: space-between; align-items: flex-end; min-height: 0; padding: 16px; margin: 0; background: rgb(99 48 13 / 13%); color: rgb(99 48 13 / 65%); font-size: 10px; letter-spacing: .02em; }
.layout-one .project-title { grid-column: 1 / 3; grid-row: 1 / 3; }
.layout-one .project-description { grid-column: 3 / 5; grid-row: 1 / 3; }
.layout-one .image-main { grid-column: 2 / 5; grid-row: 3 / 5; }
.layout-two .project-title { grid-column: 1 / 3; grid-row: 1 / 3; }
.layout-two .project-description { grid-column: 1 / 3; grid-row: 3 / 5; }
.layout-two .image-main { grid-column: 3 / 5; grid-row: 1 / 5; }
.layout-three .project-title { grid-column: 1 / 3; grid-row: 1 / 2; }
.layout-three .project-description { grid-column: 3 / 5; grid-row: 1 / 3; }
.layout-three .image-main { grid-column: 1 / 3; grid-row: 2 / 5; }
.layout-three .image-detail { grid-column: 3 / 5; grid-row: 3 / 5; }
.layout-four .project-title { grid-column: 1 / 5; grid-row: 1 / 2; }
.layout-four .project-description { grid-column: 1 / 2; grid-row: 2 / 5; }
.layout-four .image-main { grid-column: 2 / 5; grid-row: 2 / 5; }
@media (max-width: 700px) {
  .back-button { left: 16px; top: 19px; }
  .gallery-header { top: 35px; left: 74px; }
  .gallery-footer { bottom: 18px; font-size: 10px; }
  .project-page { padding-top: 76px; padding-bottom: 48px; }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto minmax(100px, 1fr); }
  .project-grid .project-title { grid-column: 1 / 3; grid-row: 1; padding: 14px; }
  .project-title h1, .project-title h2 { margin-top: 9px; font-size: clamp(32px, 8vw, 48px); }
  .project-title br { display: none; }
  .project-grid .project-description { grid-column: 1 / 3; grid-row: 2; padding: 10px 14px 20px; }
  .project-description .project-label { display: none; }
  .project-description p { max-width: 44ch; margin: 0; font-size: 12px; }
  .project-description .project-meta { margin-top: 10px; }
  .project-grid .image-main { grid-column: 1 / 3; grid-row: 3; }
  .layout-three .image-main { grid-column: 1 / 2; }
  .layout-three .image-detail { grid-column: 2 / 3; grid-row: 3; }
  .project-image { padding: 12px; font-size: 9px; }
}
@media (max-height: 620px) and (min-width: 701px) {
  .project-page { padding-top: 76px; padding-bottom: 44px; }
  .project-title h1, .project-title h2 { font-size: 36px; margin-top: 8px; }
  .project-description p { font-size: 11px; margin-top: 8px; }
  .project-description .project-meta { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .works-gallery, .works-gallery.is-visible { transition: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.room:not(.is-ready) .works { left: calc(var(--photo-left) + var(--photo-width) * .154); top: calc(var(--photo-top) + var(--photo-height) * .391); width: calc(var(--photo-width) * .176); height: calc(var(--photo-height) * .049); }
.room:not(.is-ready) .contact { left: calc(var(--photo-left) + var(--photo-width) * .154); top: calc(var(--photo-top) + var(--photo-height) * .597); width: calc(var(--photo-width) * .112); height: calc(var(--photo-height) * .053); }
@media (max-aspect-ratio: 1/1) {
  .room { --photo-left: calc(50vw - var(--photo-width) * .23); }
  .fallback { left: 50%; transform: translate(-23%, -50%); }
}