/* Pin hover cards. Sizes are Heron's design px at their 1728 layout (1rem = 10px there). */
.phc {
  --phc-accent: #d6492b;       /* pins, marker, card border, label */
  --phc-pin-ink: #fff;
  --phc-ink: #26251f;
  --phc-muted: #6f6b60;
  --phc-card-bg: #fbfaf6;
  --phc-area: rgba(214, 73, 43, .16); /* highlight fill (Heron: an 8px orange stroke, multiply, .24) */
  --phc-h: 70svh;              /* the image box's height; the image is contained inside it */
  --phc-pin: 42px;             /* numbered tile */
  --phc-mark: 9px;             /* the small square left on the spot when the tile fades */
  --phc-card: 235px;           /* card width on hover */
  --phc-card-open: 304px;      /* card width when pinned open */
  --phc-desc-w: 270px;         /* description column (fixed so text doesn't reflow while the card widens) */
  --phc-pad: 12px;
  --phc-dur: .4s;              /* card fade + widen, tile fade, highlight fade */
  --phc-ease: ease;
  --phc-pin-active-opacity: 0; /* Heron fades the number out while its card is pinned, leaving the marker */
  --phc-dock-w: 331px;         /* phones: docked card width */
  --phc-dock-space: 150px;     /* phones: room under the image for the docked card */
  --phc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --phc-mono: ui-monospace, Menlo, monospace;
  position: relative; margin: 0; color: var(--phc-ink); font-family: var(--phc-font);
}
.phc *, .phc *::before, .phc *::after { box-sizing: border-box; }
.phc__img { display: block; width: 100%; height: var(--phc-h); object-fit: contain; }

/* pins: centred on their spot of the picture (--x/--y set by part.js) */
.phc__pin, .phc__mark { position: absolute; left: var(--x, -999px); top: var(--y, -999px); transform: translate(-50%, -50%); }
.phc__pin {
  z-index: 2; width: var(--phc-pin); height: var(--phc-pin); padding: 0; border: 0; border-radius: 0;
  display: grid; place-items: center; background: var(--phc-accent); color: var(--phc-pin-ink);
  font: 600 14px/1 var(--phc-mono); letter-spacing: .02em; cursor: pointer;
  transition: opacity var(--phc-dur) var(--phc-ease);
}
.phc__pin:focus-visible { outline: 2px solid var(--phc-ink); outline-offset: 3px; }
.phc__mark { z-index: 1; width: var(--phc-mark); height: var(--phc-mark); background: var(--phc-accent); box-shadow: 0 0 0 1px #fff, 0 0 0 2px var(--phc-accent); pointer-events: none; }
.phc__item.is-active .phc__pin { opacity: var(--phc-pin-active-opacity); }
.phc__area { position: absolute; z-index: 0; background: var(--phc-area); outline: 2px solid var(--phc-accent); outline-offset: -1px; opacity: 0; pointer-events: none; transition: opacity var(--phc-dur) var(--phc-ease); }
.phc__item.is-hover .phc__area, .phc__item.is-active .phc__area { opacity: 1; }

/* card */
.phc__card {
  position: absolute; z-index: 3; left: 0; top: 0; width: var(--phc-card); padding: var(--phc-pad); overflow: hidden;
  display: grid; background: var(--phc-card-bg); border: 1px solid var(--phc-accent); color: var(--phc-ink);
  opacity: 0; pointer-events: none;
  transition: width var(--phc-dur) var(--phc-ease), transform var(--phc-dur) var(--phc-ease), opacity var(--phc-dur) var(--phc-ease);
}
.phc__item.is-hover .phc__card { opacity: 1; pointer-events: auto; }
.phc__item.is-active .phc__card { opacity: 1; pointer-events: auto; width: var(--phc-card-open); z-index: 4; }
.phc__label { margin-bottom: 4px; color: var(--phc-accent); font: 500 12px/1.3 var(--phc-mono); letter-spacing: .04em; text-transform: uppercase; }
.phc__title { font: 500 16px/1.3 var(--phc-font); }
.phc__desc { display: none; width: var(--phc-desc-w); overflow: hidden; color: var(--phc-muted); }
.phc__desc-inner { padding-top: 16px; font: 400 14px/1.45 var(--phc-font); }

/* phones: no hover; a tap docks the card under the picture with its description already open */
.phc.is-docked { padding-bottom: var(--phc-dock-space); }
.phc.is-docked .phc__card { left: 50%; top: auto; bottom: 0; width: min(var(--phc-dock-w), 100%); padding: 8px; transform: translateX(-50%); }
.phc.is-docked .phc__item.is-active .phc__card { width: min(var(--phc-dock-w), 100%); }
.phc.is-docked .phc__desc { display: block; width: 100%; }
.phc.is-docked .phc__desc-inner { padding-top: 6px; font-size: 13px; }

@media (prefers-reduced-motion: reduce) { .phc { --phc-dur: 0s; } }