/* Route map: a paper board tilted on the table, pins standing up, a Mitzvah Tank driving the route.
   Built for the paper (light) section. Without JS only the heading and the list show. */
.rm{--rm-ink:#2A0712;--rm-maroon:#891839;--rm-wine:#5C0F27;--rm-paper:#FBF3E6;--rm-board:#FFF9F0;--rm-candle:#FFC56B;--rm-flame:#F47723;--rm-muted:#5B2A36;
  --tilt:58;--rz:-6deg;--rm-top:var(--hdr,0px);color:var(--rm-ink)}
.rm-head h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(2.3rem,4vw,3.4rem);line-height:1.02;color:var(--rm-maroon);text-wrap:balance;max-width:14ch}
.rm-lede{margin-top:.9rem;max-width:30rem;color:var(--rm-muted);text-wrap:pretty}
.rm-list{list-style:none;padding:0;margin:1.6rem 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 1.4rem}
.rm-list li{border-top:1px solid rgba(137,24,57,.16);display:grid;grid-template-columns:1.6rem 1fr;column-gap:.6rem;align-items:start;padding:.42rem 0}
.rm--js .rm-list li{display:block;padding:0}
.rm-li{width:100%;display:grid;grid-template-columns:1.6rem 1fr;column-gap:.6rem;align-items:start;padding:.42rem 0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px}
.rm-n{grid-row:span 2;display:grid;place-items:center;width:1.55rem;height:1.55rem;margin-top:.05rem;border-radius:50%;font:700 .72rem/1 "Hanken Grotesk",system-ui,sans-serif;color:var(--rm-maroon);border:1.5px solid rgba(137,24,57,.45);transition:background-color .3s,color .3s,border-color .3s}
.rm-name{font-weight:700;font-size:.93rem;line-height:1.25}
.rm-meta{grid-column:2;font-size:.78rem;color:var(--rm-muted);line-height:1.3}
.rm-list li.is-visited .rm-n{background:var(--rm-candle);border-color:var(--rm-flame);color:var(--rm-ink)}
.rm-list li.is-hot .rm-name{color:var(--rm-maroon);text-decoration:underline;text-underline-offset:3px}
.rm-li:focus-visible{outline:3px solid var(--rm-maroon);outline-offset:2px}
.rm .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* stage, hidden without JS */
.rm-track{display:none}
.rm--js .rm-track{display:block;overflow-x:clip}
.rm-stage{--T:calc(var(--tilt) + var(--utx,0));--R:calc(var(--rz) + var(--urz,0) * 1deg);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.rm-hud{position:relative;z-index:6;width:100%;display:flex;flex-direction:column;align-items:flex-start}
.rm-tools{display:flex;flex-direction:column;gap:.7rem;margin-top:1.2rem}
.rm-ctrl{display:flex;gap:.4rem;flex-wrap:nowrap}
.rm-btn{min-height:44px;padding:.5rem 1.05rem;border-radius:999px;border:1.5px solid rgba(137,24,57,.45);background:#FFF9F0;color:var(--rm-maroon);font:700 .82rem/1 "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;transition:background-color .2s,color .2s}
.rm-btn:hover{background:var(--rm-maroon);color:#FFF9F0}
.rm-btn:focus-visible,.rm-stage:focus-visible{outline:3px solid var(--rm-maroon);outline-offset:4px}
.rm-stage:focus-visible{border-radius:16px}
.rm-persp{touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none}
.rm-persp.is-drag{cursor:grabbing}
.rm--zoom .rm-persp{overflow:clip}
.rm--zoom .rm-card{display:none}
.rm-pin.is-focus .rm-dot{transform:scale(1.3);background:var(--rm-candle);border-color:var(--rm-flame)}
.rm-pin.is-focus .rm-tag{opacity:1}
.rm-tank-off{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.rm-focus{position:absolute;z-index:7;left:0;bottom:3rem;display:flex;gap:.9rem;align-items:flex-end;max-width:min(30rem,94%);padding:.75rem;background:#FFF9F0;border-radius:16px;box-shadow:0 24px 50px -20px rgba(62,10,27,.55),inset 0 0 0 1px rgba(137,24,57,.14)}
.rm-focus[hidden]{display:none}
.rm-focus-ph{margin:0;flex:none;width:150px}
.rm-focus-ph[hidden]{display:none}
.rm-focus-ph img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;max-width:none}
.rm-focus-n{font:400 1.45rem/1.05 "Instrument Serif",Georgia,serif;color:var(--rm-maroon)}
.rm-focus-m{margin:.25rem 0 .7rem;font-size:.84rem;color:var(--rm-muted)}
.rm-count{font-size:.86rem;font-weight:600;color:var(--rm-muted)}
.rm-count b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:3rem;line-height:1;color:var(--rm-maroon);margin-right:.2rem;font-variant-numeric:tabular-nums}
.rm-now{margin-top:.15rem;font-size:.82rem;font-weight:700;color:var(--rm-wine);max-width:16rem;min-height:1.2em}
.rm-persp{--bw:min(calc((100svh - var(--rm-top) - 34px) * 1.08),100cqw,1000px);perspective:2400px;perspective-origin:50% 40%;width:100%;height:calc(100svh - var(--rm-top) - 8px);display:flex;align-items:center;justify-content:center}
.rm-board{position:relative;width:var(--bw);flex:none;margin-bottom:calc(var(--bw) * .26);aspect-ratio:600/841;border-radius:16px;background:var(--rm-board);
  transform:translate3d(calc(var(--zx,0) * 1px),calc(var(--zy,0) * 1px),0) scale3d(var(--zs,1),var(--zs,1),var(--zs,1)) rotateX(calc(var(--T) * 1deg)) rotateZ(var(--R));transform-origin:50% 55%;transform-style:preserve-3d;
  box-shadow:0 2px 0 #E9D6BA,0 50px 70px -30px rgba(92,15,39,.55),0 90px 120px -60px rgba(62,10,27,.45)}
.rm-edge{position:absolute;inset:0;border-radius:16px;background:#E2CBA9;transform:translateZ(-9px)}
/* paper tone lives on the svg plane, not on the 3D board element: WebKit paints a preserve-3d parent's own
   background under its translateZ(-9px) edge child, so the board read as the darker edge tan in Safari */
.rm-svg{position:absolute;inset:0;width:100%;height:100%;max-width:none;border-radius:16px;overflow:hidden;background:var(--rm-board)}
.rm-grid{stroke:rgba(137,24,57,.05);stroke-width:1}
.rm-ocean{stroke:none}
.rm-lake{fill:#CFDAD5;stroke:#B8C9C3;stroke-width:.8}
.rm-canal{fill:none;stroke:#C3D2CD;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-icw{fill:none;stroke:#BFD0CB;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.rm-dune{fill:none;stroke:#EBD7B2;stroke-width:12;stroke-linejoin:round;transform:translateX(-3px)}
.rm-shore{fill:none;stroke:rgba(255,255,255,.55);stroke-width:4;stroke-linejoin:round;transform:translateX(3px)}
.rm-vignette{position:absolute;inset:0;border-radius:16px;pointer-events:none;background:radial-gradient(120% 90% at 45% 45%,rgba(92,15,39,0) 55%,rgba(92,15,39,.10) 100%)}
/* scenery standing up off the board */
.rm-scene{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.rm-b{position:absolute;transform-style:preserve-3d;--bt:#F7EBDD;--bs:#D9BFA7;--be:#C9A88F}
.rm-b i{position:absolute;display:block}
.rm-b .t{inset:0;background:var(--bt);transform:translateZ(var(--bh));box-shadow:inset 0 0 0 .5px rgba(92,15,39,.25)}
.rm-b .s{left:0;top:100%;width:100%;height:var(--bh);background:var(--bs);transform-origin:50% 0;transform:rotateX(90deg)}
.rm-b .e{left:100%;top:0;width:var(--bh);height:100%;background:var(--be);transform-origin:0 50%;transform:rotateY(-90deg)}
.rm-b .w{right:100%;top:0;width:var(--bh);height:100%;background:var(--be);transform-origin:100% 50%;transform:rotateY(90deg)}
.rm-b::after{content:"";position:absolute;inset:-2px -3px -5px -2px;border-radius:2px;background:rgba(62,10,27,.16);filter:blur(2px)}
.rm-b-senior{--bt:#F6E0CC;--bs:#D3A58D;--be:#B9876F}
.rm-b-mall{--bt:#F2D2C9;--bs:#CF9C91;--be:#B47F74}
.rm-b-school{--bt:#F4E2CC;--bs:#C2846F;--be:#A66A56}
.rm-b-shul{--bt:#FBEBD2;--bs:#D2AA78;--be:#B98F5D}
.rm-b-homes{--bt:#F1DFC9;--bs:#CFB193;--be:#B89878}
.rm-b-block{--bt:#ECDCC9;--bs:#CDB59C;--be:#B79D83}
.rm-palm{position:absolute;width:0;height:0;transform-style:preserve-3d}
.rm-palm-s{position:absolute;display:block;left:-7px;bottom:0;width:14px;height:21px;transform:scale(var(--s,1));transform-origin:50% 100%}
.rm-palm-s svg{width:100%;height:100%;max-width:none}
.rm-waves path{fill:none;stroke:rgba(92,15,39,.16);stroke-width:1.2;stroke-linecap:round}
.rm-coast{fill:none;stroke:rgba(92,15,39,.42);stroke-width:1.6;stroke-linejoin:round}
.rm-hwy{fill:none;stroke:rgba(92,15,39,.24);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.rm-art{fill:none;stroke:rgba(92,15,39,.15);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rm-road-t{font:700 10px "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.06em;fill:rgba(92,15,39,.5);text-transform:uppercase}
.rm-city{font:italic 400 25px "Instrument Serif",Georgia,serif;fill:rgba(92,15,39,.62);text-anchor:middle}
.rm-ocean-t{font:700 11px "Hanken Grotesk",system-ui,sans-serif;letter-spacing:.42em;text-transform:uppercase;fill:rgba(92,15,39,.38);text-anchor:middle}
.rm-scale path{fill:none;stroke:rgba(92,15,39,.5);stroke-width:1.5}
.rm-scale text,.rm-north text{font:700 10px "Hanken Grotesk",system-ui,sans-serif;fill:rgba(92,15,39,.55)}
.rm-north path{fill:rgba(137,24,57,.55)}.rm-north text{text-anchor:middle}
.rm-route-plan{fill:none;stroke:var(--rc,var(--rm-maroon));opacity:.32;stroke-width:2;stroke-dasharray:var(--rd,2 7);stroke-linecap:round}
.rm-route-trail{fill:none;stroke:var(--rc,var(--rm-maroon));stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.rm--live .rm-route-trail{opacity:.5}
/* five routes: same maroon family, a slight tone and dash change each so they read apart */
.rm-route-0{--rc:#891839;--rd:2 7}.rm-route-1{--rc:#A8344F;--rd:6 6}.rm-route-2{--rc:#6A1030;--rd:1 5}.rm-route-3{--rc:#B9495C;--rd:9 5 2 5}.rm-route-4{--rc:#4E0C22;--rd:4 4}
.rm-route-head{fill:none;stroke:var(--rm-flame);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}

/* layer of things standing up off the board */
.rm-layer{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(1px);pointer-events:none}
.rm-pin{position:absolute;width:0;height:0;padding:0;border:0;background:none;transform-style:preserve-3d;pointer-events:none;cursor:pointer;color:inherit}
.rm-pin::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--rm-maroon);box-shadow:0 0 0 3px rgba(137,24,57,.18)}
.rm-up{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;
  transform:rotateZ(calc(var(--R) * -1)) rotateX(calc(var(--T) * -1deg))}
.rm-stem{position:absolute;left:-1px;bottom:0;width:2px;height:var(--h);background:linear-gradient(var(--rm-maroon),rgba(137,24,57,.35))}
.rm-dot{position:absolute;left:-12px;bottom:var(--h);width:24px;height:24px;display:grid;place-items:center;border-radius:50%;pointer-events:auto;
  font:800 11px/1 "Hanken Grotesk",system-ui,sans-serif;color:var(--rm-maroon);background:var(--rm-board);border:2px solid var(--rm-maroon);
  box-shadow:0 4px 8px -3px rgba(62,10,27,.45);transition:background-color .35s,color .35s,border-color .35s,transform .35s cubic-bezier(.34,1.56,.64,1)}
.rm-halo{position:absolute;left:-30px;bottom:calc(var(--h) - 18px);width:60px;height:60px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,197,107,.85),rgba(244,119,35,.35) 55%,rgba(244,119,35,0));opacity:0;transform:scale(.4);transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1)}
.rm-pin.is-lit .rm-dot{background:var(--rm-candle);border-color:var(--rm-flame);color:var(--rm-ink)}
.rm-pin.is-lit .rm-halo{opacity:.55;transform:scale(.8)}
.rm-pin.is-now .rm-halo{opacity:1;transform:scale(1.15)}
.rm-pin.is-hot .rm-dot,.rm-pin:focus-visible .rm-dot{transform:scale(1.25)}
.rm-pin:focus-visible{outline:none}
.rm-pin:focus-visible .rm-dot{outline:3px solid var(--rm-maroon);outline-offset:3px}
.rm-tag{position:absolute;left:0;bottom:calc(var(--h) + 32px);transform:translateX(-50%);white-space:nowrap;padding:.32rem .6rem;border-radius:8px;
  background:var(--rm-wine);color:#F6E9D7;font:700 12px/1.2 "Hanken Grotesk",system-ui,sans-serif;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 8px 18px -8px rgba(62,10,27,.6)}
.rm-tag small{display:block;font-weight:500;font-size:10.5px;color:#F2D6CF}
.rm-pin.is-hot .rm-tag,.rm-pin:focus-visible .rm-tag{opacity:1}
.rm-dot::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%);border-radius:50%}
.rm-li{min-height:44px}
.rm-fx{position:absolute;left:0;bottom:calc(var(--h) + 8px);width:0;height:0}

/* particles: transforms and opacity only */
.rm-p{position:absolute;left:-11px;top:-11px;width:22px;height:22px;opacity:0;will-change:transform,opacity}
.rm-p svg{width:100%;height:100%;max-width:none;overflow:visible}
.rm-p-flame path{fill:var(--rm-flame)}
.rm-p-spark path{fill:#E9A23B}
.rm-p-note path,.rm-p-notes path{fill:var(--rm-maroon)}
.rm-p-notes{width:24px;height:24px}

/* tank: stands up off the board like the pins, with a flat contact shadow under it */
.rm-tank{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.rm-tank-shadow{position:absolute;left:-26px;top:-7px;width:52px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(62,10,27,.42),rgba(62,10,27,0))}
.rm-tank-up{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform-origin:0 0;
  transform:rotateZ(calc(var(--R) * -1)) rotateX(calc(var(--T) * -1deg))}
.rm-tank-body{position:absolute;display:block;left:-31px;bottom:-5px;width:62px;height:50px}
.rm-tank-body svg{width:100%;height:100%;max-width:none;overflow:visible}
.rm-tank-body svg{transition:transform .35s ease}
.rm-tank.is-flip .rm-tank-body svg{transform:scaleX(-1)}
.rm-tank.is-moving .rm-tank-body{animation:rm-bob .34s ease-in-out infinite alternate}
@keyframes rm-bob{from{transform:translateY(0)}to{transform:translateY(-2px)}}
.rm-leader{fill:none;stroke:var(--rm-wine);stroke-width:1.4;stroke-dasharray:3 4;opacity:0;transition:opacity .4s}
.rm-leader.is-on{opacity:.75}

/* photo card: lies flat, rises upright off the board, settles */
.rm-card{--h:0px;position:absolute;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(calc(var(--R) * -1));--rise:0;visibility:hidden}
.rm-card.is-up{visibility:visible}
.rm-card-in{position:absolute;left:-68px;bottom:0;width:136px;margin:0;padding:6px 6px 8px;background:#fff;border-radius:6px;transform-origin:50% 100%;
  transform:rotateX(calc(var(--T) * -1deg * var(--rise))) translateY(calc((var(--h) + 34px) * -1 * var(--rise))) translateZ(calc(var(--rise) * 18px)) scale(calc(.55 + .45 * var(--rise)));
  opacity:calc(var(--rise) * 1.6);box-shadow:0 22px 34px -14px rgba(62,10,27,.6)}
.rm-card-in img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:3px;max-width:none}
.rm-card-in figcaption{margin-top:.35rem;font:700 11.5px/1.25 "Hanken Grotesk",system-ui,sans-serif;color:var(--rm-ink)}
.rm-card-in figcaption span{display:block;font-weight:500;color:var(--rm-muted)}

.rm-legend{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:.4rem 1.2rem;list-style:none;padding:0;margin:0;font-size:.78rem;color:var(--rm-muted)}
.rm-legend li{display:flex;align-items:center;gap:.4rem}
.rm-legend i{display:inline-block;width:12px;height:12px;border-radius:50%}
.k-stop{background:var(--rm-board);border:2px solid var(--rm-maroon)}
.k-lit{background:var(--rm-candle);border:2px solid var(--rm-flame);box-shadow:0 0 6px 2px rgba(255,197,107,.7)}
.k-route{width:22px!important;height:4px!important;border-radius:2px!important;background:var(--rm-maroon)}

/* desktop: list beside the map, both held in view while the tank drives */
@media (min-width:821px){
  .rm--js{display:grid;grid-template-columns:minmax(210px,250px) minmax(0,1fr);column-gap:clamp(1rem,2vw,2rem);align-items:start}
  .rm-hud{position:absolute;top:0;left:0}
  .rm-sticky{container-type:inline-size}
  .rm--js .rm-tools .rm-legend{gap:.3rem .9rem;font-size:.74rem}
  .rm--js .rm-name{font-size:.8rem!important}
  .rm--js .rm-lede{font-size:.84rem!important;line-height:1.5}
  .rm--js .rm-list{grid-template-columns:1fr!important;margin-top:1rem}
  .rm--js .rm-meta{display:none}
  .rm--js .rm-li{min-height:0;padding:.12rem 0}
  .rm--js .rm-name{font-size:.86rem}
  .rm--js .rm-head h2{font-size:clamp(1.8rem,2.3vw,2.3rem)}
  .rm--js .rm-lede{font-size:.95rem}
  .rm--js .rm-side{position:sticky;top:var(--rm-top);min-height:calc(100svh - var(--rm-top));display:flex;flex-direction:column;justify-content:center;padding:2rem 0}
  .rm--live .rm-track{height:520svh}
  .rm-sticky{height:calc(100svh - var(--rm-top));display:grid}
  .rm--live .rm-sticky{position:sticky;top:var(--rm-top)}
}
@media (min-width:821px) and (max-height:760px){
  .rm-list li,.rm-li{padding:.25rem 0}.rm--js .rm-list li{padding:0}.rm-meta{display:none}
  .rm-head h2{font-size:2.2rem}
}
/* mobile: heading, then the driving map, then the list */
@media (max-width:820px){
  .rm--js{display:flex;flex-direction:column}
  .rm--js .rm-side{display:contents}
  .rm--js .rm-tools{display:contents}
  .rm-head{order:0}.rm-ctrl{order:1;margin-top:1rem}.rm-track{order:2}.rm-legend{order:3;margin-top:.6rem}.rm-more{order:4}.rm-list{margin-top:1rem}
  .rm{--tilt:14;--rz:-4deg}
  .rm--live .rm-track{height:470svh;margin-top:1rem}
  .rm-sticky{min-height:calc(100svh - var(--rm-top));display:grid;padding:.6rem 0}
  .rm--live .rm-sticky{position:sticky;top:var(--rm-top)}
  .rm--js .rm-track{width:100vw;margin-left:calc(50% - 50vw)}
  .rm-stage{width:100%}
  .rm-hud{position:absolute;top:0;left:0}
  .rm-persp{--bw:100vw;height:calc(100svh - var(--rm-top) - 24px);overflow:clip}
  .rm-focus{left:.6rem;right:.6rem}
  .rm-now{display:none}
  .rm-board{margin-bottom:0}
  .rm-ctrl{flex-wrap:nowrap;gap:.35rem}
  .rm-count{font-size:.78rem;white-space:nowrap}
  .rm-focus{left:0;right:0;bottom:2.6rem;max-width:none;padding:.6rem;gap:.7rem}
  .rm-focus-ph{width:96px}
  .rm-focus-n{font-size:1.2rem}
  .rm-btn{white-space:nowrap}
  .rm-tank-body{left:-20px;bottom:-3px;width:40px;height:32px}
  .rm-tank-shadow{left:-17px;top:-4px;width:34px;height:8px}
  .rm-count b{font-size:2rem}
  .rm-card-in{left:-50px;width:100px;padding:4px 4px 6px}
  .rm-card-in figcaption{font-size:10px}
  .rm-head h2{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .rm-dot,.rm-halo,.rm-n,.rm-leader{transition:none}
  .rm-tank-body{animation:none!important}
  .rm-sticky{position:static}
}
.rm-chip{position:absolute;z-index:8;top:.6rem;left:50%;transform:translateX(-50%);max-width:calc(100% - 1.5rem);min-height:44px;padding:.55rem 1.1rem;border-radius:999px;border:1.5px solid rgba(137,24,57,.45);background:#FFF9F0;color:var(--rm-maroon);font:700 .84rem/1.2 "Hanken Grotesk",system-ui,sans-serif;cursor:pointer;box-shadow:0 6px 18px rgba(60,20,30,.18)}
.rm-chip:hover{background:var(--rm-maroon);color:#FFF9F0}
.rm-chip:focus-visible{outline:3px solid var(--rm-maroon);outline-offset:3px}