.story-19{--bg:#0b1732;--ink:#f3f6ff;--accent:#a9adff;--panel:#1b2846}

.story{background:var(--bg);color:var(--ink);overflow:clip;font-family:"Yu Gothic UI",Meiryo,sans-serif;line-height:1.85}.story *{box-sizing:border-box}.story .wrap{width:min(1280px,90%);margin-inline:auto}.story h2,.story h3,.story p,.story figure{margin:0}.story .hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:center;gap:clamp(24px,4vw,72px);min-height:min(780px,86svh);padding-block:clamp(46px,7vw,108px)}.story .pitch{position:relative;z-index:1}.story h1{font-size:clamp(.9rem,1.22vw,1.1rem);font-weight:650;line-height:1.7;margin:.9rem 0 1.5rem}.story .display{font-size:clamp(2.35rem,4.1vw,4.6rem);font-weight:730;line-height:1.33;letter-spacing:-.055em;line-break:strict;word-break:auto-phrase}.story .lead{margin:1.35rem 0;max-width:36em}.story .word{font:italic 400 clamp(1.25rem,2.2vw,2.3rem)/1.15 Georgia,serif;color:var(--accent)}.story .visual{min-width:0}.story .visual svg{display:block;width:100%;height:auto}.story figcaption{display:flex;justify-content:space-between;gap:10px;border-top:1px solid currentColor;padding-top:.55rem;margin-top:.7rem;color:var(--accent);font:500 .76rem/1.5 monospace}.story .cta{display:inline-flex;align-items:center;justify-content:space-between;gap:1.5em;background:var(--ink);color:var(--bg);font-weight:700;padding:.65em 1.25em;text-decoration:none;min-height:46px}.story .cta::after{content:'↗';font-family:Arial}.story .cta:hover{box-shadow:inset 0 -3px var(--accent)}.story .intro,.story .demo,.story .service,.story .closing{padding-block:clamp(52px,7vw,110px)}.story .intro{border-top:1px solid color-mix(in srgb,var(--ink) 32%,transparent)}.story .kicker{font:600 .79rem/1.4 monospace;letter-spacing:.1em;color:var(--accent);margin-bottom:1rem}.story h2{font-size:clamp(1.75rem,3.3vw,3.4rem);line-height:1.4;letter-spacing:-.04em;word-break:auto-phrase}.story h3{font-size:clamp(1.18rem,1.85vw,1.6rem);line-height:1.5}.story .intro .inner,.story .service .inner,.story .closing .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(25px,5vw,80px);align-items:start}.story .demo{background:var(--panel)}.story .demo .note{margin:1rem 0 1.75rem;max-width:58em}.story .instrument{display:grid;grid-template-columns:minmax(225px,.72fr) minmax(0,1.28fr);gap:clamp(14px,3vw,44px);border-top:2px solid var(--accent);padding-top:1.5rem}.story .keys{display:flex;align-content:flex-start;align-items:flex-start;gap:9px;flex-wrap:wrap}.story .keys label{display:flex;align-items:center;gap:.4em;flex-wrap:wrap;font-weight:650}.story select,.story button{color:var(--ink);background:var(--bg);border:1px solid currentColor;padding:.55em .85em;min-height:44px;border-radius:3px;font-size:1rem;max-width:100%}.story option{background:var(--bg);color:var(--ink)}.story button:active{transform:translateY(1px)}.story button:hover,.story button[aria-pressed=true]{background:var(--ink);color:var(--bg)}.story .keys select{width:100%}.story .keys input{width:20px;height:20px}.story [data-reset]{background:transparent;text-decoration:underline}.story .output{padding:clamp(20px,3vw,46px);background:var(--bg);min-height:12rem;overflow-wrap:anywhere;border-left:3px solid var(--accent)}.story .output h3,.story .output h4{margin:.4em 0}.story .output article,.story .output aside{padding:.8em 0;border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent)}.story .output article p{margin:.25em 0}.story .output small{font-weight:650;color:var(--accent)}.story .demo .cta{margin-top:1.7rem}.story .service article+article{border-top:1px solid var(--accent);margin-top:1.4em;padding-top:1.4em}.story .service h3,.story .closing h3{margin-bottom:.6rem}.story .closing{background:var(--panel)}.story details{border-block-start:1px solid currentColor;padding:.6em 0}.story summary{font-weight:700;padding:.65em 0;min-height:44px}.story details p{padding:.5em 0}.story .closing .cta{margin-top:1.2em}
@media(min-width:801px){.story .hero{position:relative}}
@media(max-width:800px){.story .hero,.story .instrument,.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:1fr}.story .hero{min-height:0;gap:26px;padding-block:36px}.story .display{font-size:clamp(2.05rem,6vw,3.2rem)}.story .visual{width:min(100%,560px);margin:auto}.story .kicker{margin-bottom:.6rem}.story .intro,.story .demo,.story .service,.story .closing{padding-block:46px}.story .keys{align-items:center}.story .keys label{min-height:44px}.story h1{margin:.5rem 0 .9rem}.story .lead{margin:1em 0}}

.story-19 .hero{grid-template-columns:.86fr 1.14fr}.story-19 .hero .visual{transform:rotate(-3deg);box-shadow:12px 16px 0 #182440}.story-19 .visual svg{animation:cityPan .9s ease-out}.story-19 .intro{background:#16213c}.story-19 .output{background:#202e52;border:1px solid #8983f2}.story-19 .instrument[data-view^=open] .output{background:#e8eafe;color:#19223c}.story-19 .instrument[data-view^=open] .output small{color:#4c5189}.story-19 .output.changed{animation:cityPan .45s ease-out}
@keyframes cityPan{from{transform:perspective(800px) rotateY(-13deg) scale(.93)}}
@media(max-width:800px){.story .hero,.story .instrument,.story .pitch{display:block}.story .visual{margin:20px auto 0;transform:none}.story .visual svg{height:auto;max-height:285px}.story .output{margin-top:1.2rem}.story .hero{padding-block:30px}.story .intro .inner,.story .service .inner,.story .closing .inner{grid-template-columns:minmax(0,1fr)}.story .keys select{width:100%}.story .keys label{flex:1 1 10rem}.story .visual figcaption{font-size:.73rem}}

.story-19 .city-stage{position:relative;min-width:0;background:#172744;overflow:hidden;border:1px solid #6679ac;isolation:isolate}
.story-19 .city-windows{position:relative;perspective:740px;height:clamp(155px,20vw,240px);background:repeating-linear-gradient(0deg,#a5baf51a 0 1px,transparent 1px 24px),repeating-linear-gradient(90deg,#a5baf51a 0 1px,transparent 1px 24px)}
.story-19 .city-window{position:absolute;left:34%;width:32%;top:17%;height:69%;background:var(--paper);color:#16213c;box-shadow:-6px 7px 0 #7477a2;transform:translateX(var(--x)) translateY(var(--y)) rotateY(-30deg) skewY(5deg) scale(.81);transition:transform .72s cubic-bezier(.2,.78,.17,1),opacity .5s,box-shadow .6s;display:grid;align-content:center;gap:6px;padding:8%;padding-inline:9px;font-size:clamp(.7rem,1.1vw,1rem);overflow:hidden;backface-visibility:hidden}
.story-19 .city-window i{display:block;height:2.8em;background:var(--motif)}.story-19 .city-window em{width:72%;border-block:2px solid currentColor;height:7px;opacity:.45}
.story-19 .wood{--x:-100%;--y:13%;--paper:#d5e5ce;--motif:repeating-linear-gradient(118deg,#153f3c 0 4px,#669981 4px 11px)}
.story-19 .paper{--x:0%;--y:-7%;--paper:#f4dfdf;--motif:radial-gradient(ellipse at 30% 100%,#a45670 40%,transparent 41%),#dfadb5}
.story-19 .type{--x:100%;--y:4%;--paper:#e5dff4;--motif:repeating-linear-gradient(0deg,#655986 0 2px,transparent 2px 7px)}
.story-19 [data-view=block0] .wood,.story-19 [data-view=block1] .paper,.story-19 [data-view=block2] .type{transform:translateX(var(--x)) translateY(-8%) rotateY(-8deg) scale(.97);z-index:2;box-shadow:0 7px 0 #868dcc}
.story-19 [data-view^=open] .city-window{opacity:.08;transform:translateX(var(--x)) scale(.52)}
.story-19 [data-view=open0] .wood,.story-19 [data-view=open1] .paper,.story-19 [data-view=open2] .type{opacity:1;transform:scaleX(2.45) scaleY(1.12);z-index:2;box-shadow:0 0 0 2px #fff}
.story-19 [data-view^=open] .city-window b{transform:scaleX(.48);transform-origin:left}
.story-19 .city-stage .output{margin:0;border:0;border-radius:0;min-height:5rem;padding:1rem 1.4rem}
@media(prefers-reduced-motion:reduce){.story-19 .city-window{transition:none}}html[data-motion=reduced] .story-19 .city-window{transition:none}

.hero .display { overflow-wrap: normal; line-break: strict; text-wrap: balance; }
.hero .display > [data-wrap-group] { display: inline-block; white-space: nowrap; }


/* Individual project walk-throughs */
.hp-feature, .hp-handoff {box-sizing:border-box;max-width:100%;width:min(1180px,90%);margin-inline:auto;grid-column:1/-1;overflow-wrap:break-word;}
.hp-feature {padding-block:clamp(38px,6.2vw,90px);}
.hp-feature .hp-heading,.hp-handoff h2{font-size:clamp(1.65rem,3.8vw,3.45rem);line-height:1.28;letter-spacing:-.045em;max-width:22em;text-wrap:balance}
.hp-feature p,.hp-handoff p{line-height:1.9;max-width:46em}
.hp-feature h3,.hp-handoff h3 {line-height:1.45;letter-spacing:-.02em}
.hp-feature .hp-intro,.hp-handoff .hp-intro{margin:1rem 0 2rem;}
.hp-feature details,.hp-handoff details{margin:0;border-block-end:1px solid currentColor;}
.hp-feature summary,.hp-handoff summary{padding:14px 5px;cursor:pointer;font-weight:bold;min-height:44px;}
.hp-feature details>p,.hp-handoff details>p {padding:0 5px 20px;}
.hp-feature summary:focus-visible,.hp-handoff summary:focus-visible,.hp-feature label:focus-within {outline:3px solid currentColor;outline-offset:3px;}
.hp-handoff {padding:clamp(32px,5vw,72px) 0}
.hp-handoff dl{margin:1.55rem 0 0;display:grid;grid-template-columns:minmax(10em,.43fr) minmax(0,1fr);border-top:1px solid currentColor;}
.hp-handoff dt,.hp-handoff dd{margin:0;padding:1.1rem 0;border-bottom:1px solid currentColor;}
.hp-handoff dt{font-weight:750}.hp-handoff dd{padding-inline-start:1.2rem;line-height:1.85;}
@media(max-width:620px){.hp-handoff dl{display:block}.hp-handoff dt{border:0;padding-bottom:.12rem}.hp-handoff dd{padding:.15rem 0 1rem}.hp-feature,.hp-handoff{width:90%;}}
@media (prefers-reduced-motion:reduce){.hp-feature *,.hp-feature *::before,.hp-feature *::after,.hp-handoff *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}}
html[data-motion="reduced"] :is(.hp-feature,.hp-handoff) *,html[data-motion="reduced"] .hp-feature *::before,html[data-motion="reduced"] .hp-feature *::after {animation:none!important;transition:none!important;}
.city-routes{display:grid;grid-template-columns:.83fr 1.17fr;align-items:center;gap:clamp(22px,5.5vw,75px);border-top:1px solid #6f75a7}.route-selector{margin:0;min-width:0;border:1px solid #7a80ad;background:#172447;padding:clamp(14px,2.8vw,38px)}.route-selector legend{color:#c2c6fc;padding:0 10px}.route-selector input{position:absolute;opacity:0;width:1px;height:1px}.route-selector label{display:inline-block;border:1px solid #7a82ba;border-radius:4px;padding:9px 11px;min-height:44px;margin:0 .3em .5em 0;cursor:pointer}.route-selector input:checked+label{background:#cbccff;color:#142143;font-weight:750}.route-selector input:focus-visible+label{outline:3px solid #f8e5a8;outline-offset:3px}.city-signals{border-top:1px solid #68739e;margin-top:.5rem;padding-top:1.2em}.city-signals h3{font-size:clamp(1.07rem,2.1vw,1.51rem);margin:1rem 0 .5rem}.ask-route{display:none}#visit-ask:checked~.city-signals .ask-route{display:block}#visit-ask:checked~.city-signals .look-route{display:none}
.district-map{width:100%;height:auto;display:block;max-height:245px}
.district-map .ask-track,.district-map .ask-pins{display:none}
#visit-ask:checked~.city-signals :is(.look-track,.look-pins){display:none}
#visit-ask:checked~.city-signals :is(.ask-track,.ask-pins){display:block}
.city-routes[data-seen=true] .district-map path[class$="track"]{stroke-dasharray:530;stroke-dashoffset:0;animation:trace-streets 1.2s ease-out both}
@keyframes trace-streets{from{stroke-dashoffset:530}}
.city-notes h2{color:#d6d6ff}.city-notes dt{color:#c5c5ff}.city-notes dl{border-color:#7982a5}.city-notes dd,.city-notes dt{border-color:#5e688c}
@media(max-width:710px){.city-routes{display:block}.route-selector label{font-size:.9rem}}

.city-signals { --journey: clamp(0, calc((var(--cg-progress, .75) - .12) * 1.49), 1); }
.city-routes[data-seen="true"] .city-signals .district-map path[class$="track"] { animation: none; stroke-dasharray: none; }
.district-map .city-rider {
  offset-anchor: 0px 0px; offset-rotate: 0deg; offset-distance: calc(7% + 88% * var(--journey));
  transform: scale(calc(.86 + .32 * var(--journey)));
}
.district-map .look-rider { offset-path: path("M16 142H84L151 105H223L275 77H350L429 34"); }
.district-map .ask-rider { display: none; offset-path: path("M16 142H160L202 120H266L302 100H371L449 60"); }
#visit-ask:checked ~ .city-signals .look-rider, #visit-ask:checked ~ .city-signals .look-stop { display: none; }
#visit-ask:checked ~ .city-signals .ask-rider, #visit-ask:checked ~ .city-signals .ask-stop { display: block; }
.arrival-dock {
  perspective: 680px; overflow: hidden; padding: 6px 4% 12px 11%;
  background: linear-gradient(115deg, #141e37, #202f4b); border-bottom: 1px solid #536889;
}
.arrival-page {
  display: grid; grid-template-columns: 30% 1fr; align-items: center;
  transform-origin: center bottom;
  transform: translate(calc(-12px + 12px * var(--journey)), calc(15px - 15px * var(--journey))) rotateX(calc(35deg - 35deg * var(--journey))) rotateY(calc(-23deg + 23deg * var(--journey))) scale(calc(.80 + .20 * var(--journey)));
  min-height: 67px; background: #edeffa; border: 2px solid #9dace7; box-shadow: 0 6px 0 #0c172b;
}
.arrival-thumbnail { align-self: stretch; position: relative; overflow: hidden; background: #665aaa; }
.arrival-thumbnail i { position: absolute; inset: 15%; border: 2px solid #b4c7ff; transform: skewY(-13deg); box-shadow: 6px -6px 0 #a594e4; }
#visit-ask:checked ~ .city-signals .arrival-thumbnail { background: #48715c; }
#visit-ask:checked ~ .city-signals .arrival-thumbnail i { border-color: #d6efb8; box-shadow: 6px -6px 0 #8cb29a; }
.arrival-copy { padding: .5em .8em; color: #192547; }
.arrival-copy small, .arrival-copy b { display: block; }
.arrival-copy small { font-size: .67rem; }
.arrival-copy b { font-size: clamp(.82rem, 1.6vw, 1.2rem); }
.arrival-copy .ask-stop { display: none; }
.story-19 .city-next { display: inline-block; padding-block: .6em; color: #c9ceff; text-underline-offset: .3em; }
@keyframes city-lift-room {
  0%, 100% { transform: translate(1px, 5px); }
  50% { transform: translate(-8px, -25px); }
}
@media (prefers-reduced-motion: no-preference) {
  html[data-motion="normal"] .story-19 .city-lit-room { animation: city-lift-room 5.7s ease-in-out -1.8s infinite; }
}