/* Isolated photographic story. Semantic/native content is the failure fallback. */
html.spatial-prototype {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  color: #242523;
  background: #f3f0e8;
}
html.spatial-prototype * { box-sizing: border-box; }
html.spatial-prototype body { margin: 0; }
html.spatial-prototype a { color: inherit; text-decoration: none; }
html.spatial-prototype button { font: inherit; color: inherit; }
.spatial-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spatial-tools { position: fixed; inset: 0 0 auto; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px clamp(24px, 4vw, 64px); font-size: 12px; color: var(--spatial-ui-ink, #242523); }
.spatial-tools__name { font-size: 10px; letter-spacing: .13em; }
.spatial-tools button { border: 0; padding: 8px; background: transparent; cursor: pointer; }
.spatial-tools a:hover, .spatial-tools button:hover { text-decoration: underline; }
.spatial-tools :focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.spatial-journey {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  padding: 110px clamp(24px, 6vw, 88px) 70px;
}
.spatial-scene { margin: 0 auto; max-width: 1120px; }
.spatial-memory { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 48px; margin-bottom: 100px; }
.spatial-photo { margin: 0; min-width: 0; }
.spatial-photo img { display: block; width: 100%; height: auto; }
.spatial-caption { min-width: 0; text-align: left; text-wrap: pretty; }
.spatial-caption h2, .spatial-caption p {
  margin: 0;
  font-size: var(--spatial-copy-size, clamp(28px, 3vw, 38px));
  font-weight: 450;
  line-height: 1.28;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
  word-break: normal;
}
.spatial-caption strong { font-weight: 650; }
.spatial-copy-line { display: block; }
.spatial-caption > * + * { margin-top: .7em; }
.spatial-caption .spatial-date { font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: .12em; margin-bottom: 14px; }
.spatial-cue { display: none; }
/* Reserve the final scroll geometry from the first CSS paint. Pending never
   publishes incomplete perspective variables, temporary text measurement or poses. */
.spatial-pending .spatial-world, .spatial-pending .spatial-world * { visibility: hidden !important; }
.spatial-pending .spatial-journey, .spatial-active .spatial-journey { height: var(--spatial-journey-height, 800svh); padding: 0; }
.spatial-pending .spatial-viewport, .spatial-active .spatial-viewport { position: sticky; top: 0; width: 100%; height: 100svh; overflow: hidden; background: var(--spatial-background, #f3f0e8); }
/* No grouping property on lens/world/scene/rig: keep Safari's true 3D context. */
.spatial-active .spatial-lens { position: absolute; inset: 0; perspective: var(--spatial-focal); perspective-origin: 50% 50%; }
.spatial-active .spatial-world { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.spatial-active .spatial-scene { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; max-width: none; margin: 0; transform-style: preserve-3d; }
.spatial-active .spatial-memory { display: block; position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; transform-style: preserve-3d; }
.spatial-active .spatial-photo, .spatial-active .spatial-caption { position: absolute; left: 0; top: 0; max-width: none; margin: 0; transform-origin: 50% 50%; backface-visibility: hidden; }
.spatial-active .spatial-photo img { height: 100%; object-fit: contain; }
.spatial-active .spatial-caption { color: var(--spatial-caption-ink, #242523); }
.spatial-active .spatial-cue { display: block; position: absolute; bottom: 32px; left: clamp(24px, 4vw, 64px); margin: 0; font-size: 12px; color: var(--spatial-ui-ink, #242523); pointer-events: none; }
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .spatial-tools__name { display: none; }
  .spatial-memory { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 72px; }
  .spatial-caption h2, .spatial-caption p { font-size: clamp(26px, 5vw, 36px); }
}