@charset "UTF-8";
@font-face {
  font-family: "DotGothic16";
  src: url("assets/fonts/dotgothic16.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --night: #101d30;
  --white: #f4f6ef;
  --light: #bceef1;
  --muted: #adc0c8;
  --rule: #7e9aa16b;
  --pixel-grid: linear-gradient(90deg, #030a1238 1px, transparent 1px), linear-gradient(#030a1238 1px, transparent 1px);
  --rail-height: 80px;
  --scene-brightness: 1.14;
  font-family: "DotGothic16", "Hiragino Kaku Gothic ProN", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; }
body { background: var(--night); color: var(--white); font-size: 16px; line-height: 1.75; }
button, input { font: inherit; color: inherit; }
button { border: 0; border-radius: 0; background: none; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--light); outline-offset: 4px; }
.pixel-icon { flex: none; width: 16px; height: 16px; fill: currentColor; stroke: none; shape-rendering: crispEdges; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.street { position: relative; width: 100%; height: 100svh; isolation: isolate; overflow: hidden; }
.scene { position: absolute; inset: 0 0 var(--footer-height, 104px); overflow: hidden; }
.scene-surface { position: absolute; width: 100%; aspect-ratio: 738 / 299; filter: brightness(var(--scene-brightness)); }
.scene-poster { position: relative; display: block; width: 100%; height: 100%; }
.scene img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#scene-frame { position: absolute; top: 0; left: 0; filter: brightness(var(--scene-brightness)); pointer-events: none; }
/* Keep the decoding video in the viewport underneath the opaque poster and
   screen-resolution canvas; no hidden or transparent video element. */
.motion-source { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.motion-toggle { position: absolute; z-index: 2; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); background: #071321ad; border: 1px solid #7e9aa16b; }
.motion-toggle:hover { background: #071321; }
.motion-toggle .play-icon, .motion-toggle[data-paused=true] .pause-icon { display: none; }
.motion-toggle[data-paused=true] .play-icon { display: block; }
.street-footer { position: absolute; z-index: 2; inset: auto 0 0; padding-bottom: env(safe-area-inset-bottom); background: #000; border-top: 1px solid var(--rule); }
.street-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--rail-height); }
.site-credit { display: block; padding: 0 max(24px, env(safe-area-inset-right)) 8px max(24px, env(safe-area-inset-left)); color: var(--muted); font-size: 16px; line-height: 16px; text-align: center; }
.street-control { position: relative; min-width: 0; min-height: var(--rail-height); padding: 12px 24px; color: var(--white); }
.street-control + .street-control { border-left: 1px solid var(--rule); }
.nav-label { display: inline-block; font-size: clamp(20px, 2.3vw, 32px); font-weight: 400; line-height: 1.5; letter-spacing: .04em; white-space: nowrap; }
.street-control::after { content: ""; position: absolute; bottom: 12px; left: calc(50% - 2px); width: 4px; height: 4px; background: currentColor; opacity: 0; }
.street-control:hover, .street-control:focus-visible { color: var(--light); background: #bceef10a; }
.street-control:hover::after, .street-control:focus-visible::after { opacity: 1; }
.street-control:focus-visible { outline-offset: -6px; }
.street-control:active .nav-label { transform: translateY(2px); }
dialog { color: var(--white); border: 1px solid var(--rule); padding: 0; max-width: none; max-height: none; background-color: #101d30f5; background-image: var(--pixel-grid); background-size: 4px 4px; box-shadow: 8px 8px 0 #030a1266; scrollbar-color: #758f9a #101d30; }
dialog::backdrop { background: #07132199; }
dialog[open] { animation: reveal .1s steps(2, end); }
.overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 32px; position: sticky; top: 0; z-index: 3; background: var(--night); border-bottom: 1px solid var(--rule); }
.overlay-header h2 { font-size: 32px; font-weight: 400; letter-spacing: .04em; line-height: 1.5; margin: 0; }
.close-control { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 8px; font-size: 16px; white-space: nowrap; }
.close-control:hover { color: var(--light); }
.close-control:active { transform: translateY(2px); }
.contact { width: min(1100px, calc(100vw - 80px)); height: fit-content; max-height: calc(100svh - 64px); margin: auto; overflow: auto; overscroll-behavior: contain; }
.contact-content { padding: 24px 32px 24px; }
.contact-statement { font-size: 24px; font-weight: 400; line-height: 1.8; margin: 0 0 24px; letter-spacing: .02em; }
.keep-phrase { white-space: nowrap; }
.map-frame { position: relative; z-index: 0; width: 100%; height: clamp(270px, 44svh, 440px); background: #dbe3e6; border: 1px solid #7e9aa1; color: #162432; }
.map-frame .leaflet-control-zoom { border: 1px solid #162432; border-radius: 0; box-shadow: none; }
.map-frame .leaflet-control-zoom a { border-radius: 0; width: 40px; height: 40px; line-height: 40px; }
.map-frame .leaflet-control-attribution { font: 11px/1.5 sans-serif; }
.map-frame .leaflet-control-attribution a { text-decoration: underline; }
.map-frame .leaflet-tooltip { border-radius: 0; font-family: "DotGothic16", sans-serif; }
.contact-pin { display: grid; place-items: center; }
.contact-pin-core { display: block; width: 16px; height: 16px; border: 3px solid #fff; background: #e3483c; box-shadow: 0 0 0 2px #162432; animation: location-blink 1.8s steps(1, end) infinite; }
.contact-pin:focus-visible { outline: 2px solid #162432; outline-offset: 4px; }
@keyframes location-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
.map-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; }
.map-footer p { font-size: 16px; margin: 0; max-width: 620px; line-height: 1.7; }
#midpoint-note { margin-top: 8px; color: var(--muted); }
.about { width: 100%; height: 100svh; max-width: 100%; max-height: 100svh; margin: 0; padding: max(80px, env(safe-area-inset-top)) clamp(24px, 8vw, 160px) max(64px, env(safe-area-inset-bottom)); border: 0; box-shadow: none; background-color: #071321e8; background-image: none; overflow-y: auto; }
.about::backdrop { background: #07132155; }
.about[open] { display: grid; align-items: center; }
.about-close { position: absolute; top: max(20px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); width: 48px; height: 48px; display: grid; place-items: center; color: var(--white); }
.about-close .pixel-icon { width: 24px; height: 24px; }
.about-close:hover { color: var(--light); }
.about-letter { width: min(100%, 1040px); margin-inline: auto; padding-block: 24px; }
.about-letter p { margin: 0; font-weight: 400; }
.about-greeting { font-size: clamp(24px, 3.2vw, 48px); line-height: 1.9; letter-spacing: .02em; }
.about-greeting > span { display: block; }
.about-letter .about-meeting { margin-top: clamp(40px, 7vh, 88px); font-size: clamp(20px, 2.1vw, 32px); line-height: 1.9; }
.about-letter .about-signature { margin-top: clamp(36px, 6vh, 72px); padding-right: .1em; font-size: 24px; letter-spacing: .14em; text-align: right; }
.about[open] .about-letter { animation: letter-appear .32s steps(4, end); }
@keyframes letter-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 640px) {
  :root { --rail-height: 72px; }
  .street-control { padding-inline: 4px; }
  .nav-label { font-size: 16px; letter-spacing: 0; }
  .street-control::after { bottom: 8px; }
  .contact { width: calc(100vw - 24px); height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); max-height: none; margin: auto; }
  .contact { height: fit-content; max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .overlay-header { padding: 12px 16px; gap: 8px; }
  .overlay-header h2 { font-size: 24px; letter-spacing: 0; }
  .close-control { gap: 8px; padding-inline: 4px; }
  .contact-content { padding: 20px 16px 16px; }
  .contact-statement { font-size: 16px; line-height: 2; letter-spacing: 0; margin-bottom: 20px; }
  .map-frame { height: 40svh; min-height: 240px; }
  .map-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (max-height: 540px) and (orientation: landscape) {
  :root { --rail-height: 56px; }
  .nav-label { font-size: clamp(16px, 2.8vw, 24px); }
  .street-control::after { bottom: 4px; }
  .overlay-header { padding-block: 8px; }
  .contact-statement { font-size: 16px; margin-bottom: 16px; }
  .map-frame { height: 56svh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}