/* origin.css: the map card of "From Morocco" (prefix mp-). Built from coastline data in origin.mjs.
   The section, the heading and the four coloured panels keep their rules in sections.css (prefix og-). */
.og .og-grid{align-items:start}
.mp-card{position:relative;margin:0;min-width:0;border-radius:10px;overflow:hidden;background:var(--umber-2)}
.mp-card::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(251,247,238,.14);pointer-events:none}
.mp-map{position:relative}
.mp-stage{position:relative;width:100%;aspect-ratio:600/670;overflow:hidden}
/* the frame is the full 4:5 drawing, standing on the bottom edge: on a wide card the stage crops some empty sea off the top; on a phone the stage is 4:5 and shows all of it */
.mp-frame{position:absolute;left:0;right:0;bottom:0;aspect-ratio:600/750}
.mp-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mp-deg{position:absolute;z-index:1;font-size:11px;line-height:1;font-weight:600;letter-spacing:.08em;color:rgba(251,247,238,.66);font-variant-numeric:tabular-nums;pointer-events:none}
.mp-deg-x{top:12px;translate:-50% 0}
.mp-deg-y{left:10px;translate:0 calc(-100% - 5px)}
/* the ground: the khatem star at 6 percent (the pattern is defined once by geometry.js), then a faint graticule every five degrees */
/* the card ground: the khatem at 6 percent, as an image tile that geometry.js writes into --geo-card-star (a tile, not an SVG pattern fill, so it stays cheap to paint under the pins) */
.mp-card::before{content:"";position:absolute;inset:0;background:var(--geo-card-star,none) 0 0/144px 144px;opacity:.06;pointer-events:none}
.mp-grid{fill:none;stroke:var(--off);stroke-opacity:.1;stroke-width:1;vector-effect:non-scaling-stroke}
.mp-lift{fill:var(--ink);fill-opacity:.42}
.mp-shade{fill:none;stroke:var(--umber);stroke-width:24;opacity:.25;stroke-linejoin:round}
.mp-edge{fill:none;stroke:var(--terracotta-2);stroke-width:1.5;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.mp-cap{position:absolute;z-index:3;left:20px;top:38px;margin:0;max-width:24ch;font-size:15px;line-height:1.4;color:rgba(251,247,238,.9)}
/* sea names, as on an atlas */
.mp-sea{position:absolute;z-index:1;translate:-50% -50%;white-space:nowrap;pointer-events:none;font-family:var(--font-display);font-style:italic;font-weight:320;font-size:15px;letter-spacing:.08em;color:rgba(251,247,238,.74);font-variation-settings:"opsz" 144,"SOFT" 40}
/* the pins: a round photograph on a 2 px plaster ring, a numeral in a small amber disc, the name in the label style beside it */
.mp-pin{--d:64px;position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);translate:var(--dx) var(--dy);display:block;border-radius:50%;transition:transform .25s var(--ease)}
.mp-disc{position:absolute;inset:0;border-radius:50%;background:var(--plaster-2);box-shadow:0 0 0 2px rgba(243,236,223,.7),0 10px 16px -6px rgba(0,0,0,.55)}
.mp-disc::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--plaster),0 0 0 5px rgba(243,236,223,.3);opacity:0;transition:opacity .25s var(--ease);pointer-events:none}
.mp-ph{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.mp-n{position:absolute;right:-6px;top:-6px;z-index:1;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--amber);color:var(--ink);font-size:13px;line-height:1;font-weight:800;box-shadow:0 0 0 2px var(--umber-2)}
.mp-name{position:absolute;top:50%;translate:0 -50%;white-space:nowrap;padding:6px 8px;border-radius:3px;background:var(--umber-2);color:var(--off);font-size:12px;line-height:1;font-weight:600;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 0 0 1px rgba(251,247,238,.16)}
.mp-pin[data-side=r] .mp-name{left:calc(100% + 8px)}
.mp-pin[data-side=l] .mp-name{right:calc(100% + 8px)}
.mp-pin:focus-visible{outline:2px solid var(--off);outline-offset:4px}
.mp-pin.is-on,.mp-pin:focus-visible{transform:translateY(-4px)}
.mp-pin.is-on .mp-disc::after,.mp-pin:focus-visible .mp-disc::after{opacity:1}
@media (hover:hover) and (pointer:fine){
  .mp-pin:hover{transform:translateY(-4px)}
  .mp-pin:hover .mp-disc::after{opacity:1}
}
@media (max-width:1180px){.mp-deg-y{display:none}}
@media (max-width:1000px){.mp-card{max-width:560px}.mp-stage{aspect-ratio:600/750}}
@media (max-width:560px){
  .mp-card{max-width:none}
  .mp-pin{--d:48px;translate:var(--mx) var(--my)}
  .mp-n{width:20px;height:20px;right:-6px;top:-6px;font-size:12px}
  .mp-name{font-size:11px;padding:5px 6px}
  .mp-sea{font-size:13px}
  .mp-cap{left:16px;top:34px;font-size:14px}
}
/* static and reduced motion: no transition on the pins */
html:not(.lx-live) .mp-pin,html:not(.lx-live) .mp-disc::after{transition:none}
@media (prefers-reduced-motion:reduce){.mp-pin,.mp-disc::after{transition:none}}