.entrance-page { color: var(--site-ink); background: var(--site-paper); font-family: var(--site-display); }
.entrance-canvas { position: relative; min-height: 43rem; height: 100svh; overflow: hidden; cursor: grab; user-select: none; touch-action: pan-y; }
.entrance-world { position: absolute; inset: 0; }
.entrance-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.entrance-canvas.is-dragging { cursor: grabbing; }
.entrance-canvas.is-dragging a { pointer-events: none; }
.entrance-window, .photo-window { position: absolute; margin: 0; }
.photo-window { left: calc(50% - 10.375rem); top: calc(46% - 7.5rem); width: 20.75rem; height: 15rem; border: 4px solid #111; background: #fff; }
.photo-window h1 { position: absolute; right: -4px; bottom: calc(100% - 5px); color: #111; background: #fff; font: 700 44px/1 system-ui, sans-serif; letter-spacing: -2px; padding: 0 .2rem; }
.photo-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.entrance-window { display: flex; flex-direction: column; width: max-content; border: 4px solid #111; background: #fff; will-change: transform, width, height; }
.entrance-window:not(.is-open)::before { content: ""; position: absolute; inset: 4px -4px -4px 4px; background: #fff; pointer-events: none; }
.entrance-window[data-window="writing"] { left: 27%; top: 29%; }
.entrance-window[data-window="project"] { left: 65%; top: 28%; }
.entrance-window[data-window="research"] { left: 65%; top: 62%; }
.entrance-window[data-window="about"] { left: 27%; top: 61%; }
.entrance-window[data-window="works"] { left: 47%; top: 17%; }
.entrance-window[data-window="room"] { left: 47%; top: 85%; }
.window-title { position: absolute; inset: 10%; z-index: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; background: #111; text-decoration: none; padding: 0 .2rem .1rem; line-height: 1.2; font-size: 30px; white-space: nowrap; outline-offset: 6px; }
.entrance-window.is-open { z-index: 5; background: #fff; }
.entrance-window.is-open .window-title { position: relative; inset: auto; min-height: 40px; justify-content: flex-start; padding: 0 .5rem .15rem; }
.window-preview { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; overflow: hidden; margin: 0; border: 0; padding: 0 0 2px; font: 1rem/1.5 ui-sans-serif, system-ui, sans-serif; }
.is-compact-preview .window-preview { display: grid; grid-template-columns: minmax(0, 1fr) 56px; grid-template-rows: minmax(0, 1fr); }
.window-preview[hidden] { display: none; }
.window-picture { position: relative; flex: 1; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: #fff; border: 0; }
.window-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.window-picture figcaption { display: none; }
.window-preview h2 { flex-shrink: 0; font-size: 1.125rem; font-weight: 400; margin: 0 0 .2rem; }
.window-preview p { flex: 1; margin: 0 0 .5rem; font-size: .875rem; }
.window-enter { display: grid; place-items: center; flex-shrink: 0; min-width: 0; height: 44px; min-height: 44px; padding: .25rem .5rem; color: #fff; background: #111; text-align: center; text-decoration: none; font-family: var(--site-display); }
.is-compact-preview .window-enter { height: auto; align-self: stretch; padding: .25rem; }
.window-enter:focus-visible, .window-title:focus-visible { outline: 3px solid #555; outline-offset: 6px; }
.window-enter:focus-visible { outline-color: #fff; outline-offset: -5px; }
.entrance-skip { position: absolute; left: 1rem; top: -5rem; z-index: 20; padding: .75rem; background: #fff; border: 2px solid #111; }
.entrance-skip:focus { top: 1rem; }
.entrance-noscript { position: absolute; bottom: 1rem; left: 1rem; font: .875rem/1.5 sans-serif; }
@media (max-width: 700px) {
  .entrance-canvas { min-height: 43rem; }
  .photo-window { width: 14rem; height: 10.5rem; left: calc(50% - 7rem); top: 34%; }
  .photo-window h1 { top: 0; right: 0; bottom: auto; font-size: 26px; letter-spacing: -1px; }
  .window-title { font-size: 20px; inset: 4px; }
  .entrance-window[data-window="writing"] { left: 10%; top: 14%; }
  .entrance-window[data-window="project"] { left: 59%; top: 22%; }
  .entrance-window[data-window="research"] { left: 12%; top: 78%; }
  .entrance-window[data-window="about"] { left: 61%; top: 65%; }
  .entrance-window[data-window="works"] { left: 10%; top: 64%; }
  .entrance-window[data-window="room"] { left: 59%; top: 81%; }
}
@media (prefers-reduced-motion: reduce) { .entrance-window { will-change: auto; } }