/* point-route-loop showpiece, dressed in the Heron kit: a drafting-sheet map on warm grey grainy paper, signal
   orange for the stops and routes, a square card with the hard offset shadow. Pure CSS loop on 5.25 s (twice per
   video); the dashes travel one dash + gap every .75 s so they close the 10.5 s loop too. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body {
  background-color: #f4f4ee;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .16 0 0 0 0 .14 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
  color: #282828;
  font: 500 15px/1.45 "Inter Tight", system-ui, sans-serif;
}
.sheet { position: fixed; inset: 12px; border: 1px solid #b3b3af; pointer-events: none; }
.frame { position: absolute; left: 50%; top: 50%; width: 1050px; height: 1200px; transform: translate(-50%, -50%); }

.map { position: absolute; left: 36px; top: 36px; width: 978px; height: 1128px; }
.map .art { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; }
.prl { --prl-cycle: 5.25s; --prl-pt: 2.5%; --prl-line: 2px; --prl-dash: 7px; --prl-dash-time: .75s; --prl-pt-gap: .07s; }

.plus { position: absolute; width: 13px; height: 13px; z-index: 6; }
.plus::before, .plus::after { content: ""; position: absolute; background: #626260; }
.plus::before { left: 6px; top: 0; width: 1px; height: 13px; }
.plus::after { top: 6px; left: 0; height: 1px; width: 13px; }
.plus.tl { left: -6px; top: -6px; } .plus.tr { right: -6px; top: -6px; } .plus.bl { left: -6px; bottom: -6px; } .plus.br { right: -6px; bottom: -6px; }

.card {
  position: absolute; z-index: 7; left: 40px; bottom: 44px; width: 640px; padding: 30px 34px 36px;
  background: #f4f4ee; border: 1px solid #282828; box-shadow: 0 7px 0 -2px #000;
}
.eyebrow { margin: 0 0 20px; font: 500 13px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; text-transform: uppercase; color: #626260; }
.card h1 { margin: 0; font: 600 62px/.96 "Inter Tight", system-ui, sans-serif; letter-spacing: -.025em; text-transform: uppercase; }