/* People and the Old town: this stop's own drawings (05-17 sections.oldtown). Shared looks are in living/explain.css. */
.pp-close { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.pp-ship { width: 100%; height: auto; display: block; border-radius: 16px; }
.pp-ship .pp-part, .pp-ship .pp-num { transition: opacity 0.35s ease; }
.pp-ship.focus .pp-part:not(.on), .pp-ship.focus .pp-num:not(.on) { opacity: 0.28; }
.pp-ship .pp-num { cursor: pointer; }
.pp-parts { list-style: none; counter-reset: pp; margin: 0; padding: 0; display: grid; gap: 10px; }
.pp-parts li { counter-increment: pp; position: relative; padding: 12px 14px 12px 48px; border-radius: 14px; background: rgba(255,255,255,0.72); border: 1px solid var(--rule); cursor: pointer; transition: border-color 0.3s, transform 0.3s; }
.pp-parts li::before { content: counter(pp); position: absolute; left: 14px; top: 13px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #E0825E; color: #fff; font: 700 13px/1 var(--wum-body); }
.pp-parts li.on { border-color: #E0825E; transform: translateX(4px); }
.pp-parts b { font: 700 18px/1.1 var(--wum-display); text-transform: uppercase; }
.pp-parts p { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.pp-plan, .pp-reach { width: 100%; height: auto; display: block; }
@media (max-width: 960px) {
  .pp-close { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
  .pp-wide { overflow-x: auto; max-width: calc(100vw - 58px); margin: 0 -4px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .pp-wide svg { min-width: 640px; }
}