/* ============================================================ *
 *  Photo Plates: reusable contact-sheet gallery with optional   *
 *  map panel (templates/partials/photo-plates.html, behaviour   *
 *  in photo-plates.js). Expedition Ledger tokens from apj.css   *
 *  (:root). Nothing in here is page-specific: per-page map      *
 *  SVGs reuse the pp-map-* cartographic classes below.          *
 * ============================================================ */

.pp{margin:2.4em 0 0}

/* ---- map panel --------------------------------------------- */
.pp-map{margin:0 0 2.8em}
.pp-map-frame{position:relative;background:var(--white);border:1px solid var(--hair);
    padding:clamp(10px,1.8vw,18px);box-shadow:8px 8px 0 var(--hair)}
.pp-map-frame svg{display:block;width:100%;height:auto}
.pp-map-cap{margin:12px 2px 0;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--mute);line-height:1.8}

/* the house cartographic idiom, shared by every photo-plates map SVG */
.pp-map-svg .pp-sea{fill:var(--paper)}
.pp-map-svg .pp-coast{fill:var(--white);stroke:var(--contour);stroke-width:2.5}
.pp-map-svg .pp-contour{fill:none;stroke:var(--contour);stroke-width:1.3;opacity:.38}
.pp-map-svg .pp-crater{fill:var(--blue);opacity:.22}
.pp-map-svg .pp-grid line{stroke:var(--blue);stroke-width:1;opacity:.16}
.pp-map-svg .pp-map-label{font-family:var(--mono);font-size:19px;letter-spacing:.2em;fill:var(--ink-soft)}
.pp-map-svg .pp-map-label.small{font-size:15px;fill:var(--mute)}
.pp-map-svg .pp-map-coord{font-family:var(--mono);font-size:13px;letter-spacing:.12em;fill:var(--blue);opacity:.55}
.pp-map-svg .pp-map-rule line,.pp-map-svg .pp-map-rule path{stroke:var(--ink-soft);stroke-width:1.5;opacity:.6}

/* waypoint markers: numbered magenta circles, positioned by the partial
   as percentages of the map frame (matching the SVG's geographic frame) */
.pp-marker{position:absolute;transform:translate(-50%,-50%);width:26px;height:26px;
    display:flex;align-items:center;justify-content:center;border-radius:50%;
    background:var(--magenta);color:var(--paper);text-decoration:none;
    font-family:var(--mono);font-size:11.5px;line-height:1;
    border:1px solid var(--white);box-shadow:0 0 0 1px var(--hair-2),3px 3px 0 var(--hair);
    transition:transform .18s ease,box-shadow .18s ease}
.pp-marker:hover,.pp-marker:focus-visible,.pp-marker.is-hot{
    transform:translate(-50%,-50%) scale(1.22);z-index:2;
    box-shadow:0 0 0 3px rgba(200,30,110,.28),3px 3px 0 var(--hair)}
.pp-marker:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---- contact sheet ------------------------------------------ */
.pp-sheet{list-style:none;margin:0;padding:0;display:grid;
    grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,22px)}
.pp-plate{margin:0}

/* a mounted plate: white mat, hairline border, soft shadow. The whole
   plate is the lightbox trigger, so it stays keyboard accessible. */
.pp-frame{display:block;background:var(--white);border:1px solid var(--hair);
    padding:8px;box-shadow:6px 6px 0 var(--hair);cursor:zoom-in;
    text-decoration:none;color:inherit;transition:border-color .25s ease}
.pp-frame img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
    filter:sepia(.16) contrast(1.03);transition:filter .4s ease}
.pp-frame:hover img,.pp-frame:focus-visible img{filter:none}
.pp-frame:hover,.pp-plate.is-hot .pp-frame{border-color:var(--magenta)}
.pp-frame:focus-visible{outline:2px solid var(--magenta);outline-offset:3px}

/* mono caption bar: "PLATE NN — CAPTION" */
.pp-cap{display:block;padding:8px 2px 1px;font-family:var(--mono);font-size:10px;
    letter-spacing:.13em;text-transform:uppercase;color:var(--mute);line-height:1.7}
.pp-frame:hover .pp-cap,.pp-plate.is-hot .pp-cap{color:var(--magenta)}

@media(max-width:880px){
    .pp-sheet{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:560px){
    .pp-sheet{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
    .pp-marker,.pp-frame,.pp-frame img{transition:none}
    .pp-marker:hover,.pp-marker:focus-visible,.pp-marker.is-hot{
        transform:translate(-50%,-50%)}
}