:root { --paper: #f3f0e9; --ink-color: #1a1814; --ink: 1; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink-color); }
body { font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; }
#view { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }

#scroll { position: relative; z-index: 1; pointer-events: none; }
#scroll section { height: 100vh; padding: 9vh 16px 0; }
.caption {
  max-width: 340px; margin-left: max(16px, 4vw);
  padding: 14px 18px; background: rgba(243, 240, 233, 0.86);
  border-left: 2px solid var(--ink-color); backdrop-filter: blur(6px);
}
.caption h1 { margin: 0 0 4px; font-size: 22px; font-weight: 500; letter-spacing: 0.02em; }
.caption p { margin: 0; }

.titleblock {
  position: fixed; right: 16px; bottom: 16px; z-index: 2;
  display: grid; gap: 2px; padding: 10px 14px; min-width: 180px;
  border: 1px solid var(--ink-color); background: var(--paper);
  font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase;
  opacity: var(--ink); pointer-events: none;
}
.titleblock strong { font-weight: 600; font-size: 13px; }

.walk-button {
  position: fixed; left: 16px; bottom: 16px; z-index: 3;
  padding: 10px 14px; border: 1px solid var(--ink-color); border-radius: 0;
  background: var(--paper); color: var(--ink-color); font: inherit; font-size: 13px;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
}
.walk-button:hover { background: var(--ink-color); color: var(--paper); }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 4px; margin: 0 1px;
  border: 1px solid currentColor; border-radius: 3px; font: 11px/1.5 inherit; text-align: center;
}
.walk-help {
  position: fixed; left: 16px; bottom: 16px; z-index: 3; display: none;
  gap: 4px; padding: 10px 14px; background: rgba(243, 240, 233, 0.9);
  border: 1px solid var(--ink-color); font-size: 12px;
}
body.walking .walk-help { display: grid; }
body.walking .walk-button, body.walking #scroll, body.walking .titleblock { display: none; }
body.walking #view { cursor: crosshair; }
@media (pointer: coarse) { .walk-button { display: none; } }