/* OHHOUSE · v14 (28 Oct 2026), preview polishing pass. Nothing here changes the design; it settles the last details. */

/* ---------- A little more: one even rhythm between the photographs ----------
   Each photograph's column was as wide as its caption when the caption was wider than the picture,
   which opened uneven white gaps. The caption now wraps to the photograph's own width. */
.row13 figcaption { max-width: none; }   /* v14.js sets each figure to its photograph's width */
@media (max-width: 720px) { .row13 { gap: 6px; } .row13 figcaption { padding-right: 4px; } }

/* ---------- The plan: clean photographs ----------
   No fade at the edges of the strip and no dimming of the photographs that aren't the current place.
   The current place is still marked by the line from the plan. */
.plan-strip { -webkit-mask-image: none; mask-image: none; }
.ps-fig, .ps-fig.on { opacity: 1; }
.ps-fig .pf-frame { aspect-ratio: 5 / 4; background: var(--paper); border: 0; cursor: zoom-in; }
.ps-fig .pf-frame:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* a photograph of another shape than its frame sits whole inside it, never cropped */
.ps-fig .pf-frame.pf-whole img { object-fit: contain; }
.ps-fig .pf-frame img { transition: opacity .3s var(--out); }
.ps-fig .pf-frame:hover img { opacity: .92; }
/* the viewer for the plan photographs uses the gallery's own viewer styles */
.plbx .pl-place { margin-left: 4px; color: var(--ink); }
.plbx .lbx-nav[hidden] { display: flex; visibility: hidden; }

/* ---------- Up at treetop level: on phones the drawing stands on its own ----------
   No numbered marks on the drawing and no key underneath. The height scale stays; the four steps below still explain it. */
@media (max-width: 720px) {
  .sd-lbls .lb.cap, .sd-lbls .lb.cap.hide-s { display: none; }
  .sd-key { display: none; }
}

/* ---------- Icons instead of the arrow characters (phones drew them as blue emoji) ---------- */
.ic { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; vertical-align: middle; }
.ic-ig { width: 16px; height: 16px; stroke-width: 1.6; }
.ic-ig .dot { fill: currentColor; stroke: none; }
.rf-ig { display: inline-flex; align-items: center; gap: 8px; border-bottom: 0; padding-bottom: 0; min-height: 32px; }
.rf-ig span { border-bottom: 1px solid var(--rule); padding-bottom: 1px; transition: border-color .3s var(--out); }
.rf-ig:hover span, .rf-ig:focus-visible span { border-bottom-color: var(--ink); }

/* Design credit: a small signature on its own line at the very bottom of the footer */
.rf-sign { flex: 0 0 100%; display: flex; justify-content: flex-end; margin: 18px 0 0; }
.rf-credit { display: inline-flex; align-items: center; gap: 9px; min-height: 32px; color: var(--mute); text-decoration: none; font-size: 11px; letter-spacing: .02em; }
.rf-credit img { display: block; width: 34px; height: auto; opacity: .9; transition: opacity .3s var(--out), transform .5s var(--out); }
.rf-credit:hover img, .rf-credit:focus-visible img { opacity: 1; transform: rotate(-4deg); }
.rf-credit:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
@media (max-width: 560px) { .rf-sign { justify-content: flex-start; margin-top: 14px; } }
@media (prefers-reduced-motion: reduce) { .rf-credit img { transition: none; } .rf-credit:hover img { transform: none; } }