Patternflow

.viewer {
  position: relative;
  width: 100%;
  height: 100%;

  /* The one horizontal line everything in the overlay hangs off: the counter
     sits on it, the arrows are centred on it, the name goes above and the
     links below. Measured up from the bottom edge. */
  --pin-row: 33%;
  --arrow-size: 84px;
}

/* Offscreen image preloader — rendered (so eager <Image> actually fetches the
   thumbnail variants) but kept out of view and out of the layout/interaction. */
.preload {
  position: absolute;
  left: -99999px;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.preloadBox {
  position: relative;
  display: block;
  width: 280px;
  height: 210px;
}

/* When open, the whole viewer becomes a click-to-close surface. */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.overlayOpen {
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Top-center prompt, matching the product preview's hint style. */
.hint {
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
  pointer-events: none;
  color: var(--pf-ink-muted);
  font-family: var(--pf-mono);
  font-weight: 500;
  font-size: var(--pf-fs-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 1.2s ease;
}
.hintHidden {
  opacity: 0;
}

/* One wording per input method — the mobile card says "tap" too, and having
   the map say "click" beside it read as a leftover. */
.hintTouch {
  display: none;
}

/* The counter's row, centred in the upper part of the frame. Everything in the
   upper column hangs off this one line — arrows centred on it, name above,
   links below — so no piece of variable content can shift the name. */
.nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--pin-row);
  transform: translateY(50%);
  text-align: center;
  pointer-events: none;
}

/* Name and place, stacked directly above the counter. */
.info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 10px);
  display: grid;
  justify-items: center;
  gap: 9px;
}

/* Links hang below the counter, where growing downward disturbs nothing. */
.links {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bare glyph arrows to flip between builds. Anchored to the counter's line
   rather than nested inside it, so mobile can move the text group up without
   dragging the arrows along. */
.arrow {
  position: absolute;
  bottom: var(--pin-row);
  transform: translateY(50%);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pf-led);
  cursor: pointer;
  pointer-events: auto;
  opacity: 1;
  transition: transform 0.18s ease;
}
.arrow svg {
  width: var(--arrow-size);
  height: var(--arrow-size);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.arrow:hover {
  transform: translateY(50%) scale(1.08);
}
.arrowPrev {
  left: 12px;
}
.arrowNext {
  right: 12px;
}

/* Description, centred in the band left between the arrows and the bottom edge
   — not pinned to the floor, so a one-line description and a five-line one both
   sit in the middle of the same space. The band's top is the arrows' lower
   edge: they hang half their height below --pin-row.
   Switching builds swaps the text in place, with no fade or slide, so nothing
   blinks on every click. (The overlay's own opacity transition still handles
   opening and closing.) */
.detail {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--pin-row) - var(--arrow-size) / 2);
  display: grid;
  place-items: center;
  padding: 0 30px;
  box-sizing: border-box;
  text-align: center;
  pointer-events: none;
}

/* Highlight backgrounds that hug the text itself, line by line. Translucent,
   so the globe reads through — which means each wrapped line's padded box must
   stay shorter than the line advance, or the fills stack where they overlap
   and draw a seam across every line break. Hence the roomy line-height and
   modest vertical padding on .desc below, the only block that ever wraps. */
.kicker,
.maker,
.meta,
.desc {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(13, 13, 13, 0.72);
  color: var(--cream);
}

.kicker {
  padding: 4px 12px;
  font-family: var(--pf-mono);
  font-size: 22px;
  letter-spacing: 0.14em;
  color: var(--pf-led);
}

.maker {
  padding: 3px 11px;
  font-size: 44px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.28;
}

.meta {
  padding: 4px 10px;
  font-family: var(--pf-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
}

.desc {
  padding: 3px 10px;
  font-size: 19px;
  line-height: 1.9;
  text-align: center;
}

.link {
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(13, 13, 13, 0.72);
  color: var(--pf-led);
  padding: 4px 10px;
  font-family: var(--pf-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  pointer-events: auto;
}
.link:hover {
  text-decoration: underline;
}

/* Pinned to the top edge and centred, so the slack left over once the tiles
   hit their width cap splits evenly instead of all landing on one side. Spans
   the full width but stays click-through itself, so the space beside the strip
   still closes the card. */
.thumbs {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px;
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 0 30px;
  box-sizing: border-box;
  pointer-events: none;
}
.thumb {
  position: relative;
  flex: 0 1 270px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(244, 239, 230, 0.45);
  background: #000;
  cursor: pointer;
  pointer-events: auto;
  /* Let the globe read faintly through the strip, like the text highlights.
     Full strength on hover, so the one you're about to open is clear. */
  opacity: 0.82;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.thumb:hover {
  border-color: var(--cream);
  opacity: 1;
}
.thumb img {
  object-fit: cover;
}

@media (max-width: 900px) {
  /* The viewer is only 44vh here, so the photos, description and links move
     out of the overlay entirely and are rendered as a card in the Inside panel
     below (see BuildCard). What stays on the map is just enough to say which
     pin is open and to step between them. */
  .thumbs,
  .detail,
  .links {
    display: none;
  }

  /* The name/counter group moves up near the top edge, clear of the globe,
     while the arrows go back to the middle of the frame where they are
     easiest to reach with a thumb. */
  .nav {
    /* Enough that the name clears the top edge rather than hugging it. */
    top: 78px;
    bottom: auto;
    transform: none;
  }
  .info {
    bottom: calc(100% + 6px);
    gap: 4px;
  }
  .arrow {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .arrow:hover {
    transform: translateY(-50%) scale(1.08);
  }
  .arrow svg {
    width: 44px;
    height: 44px;
  }
  .hintPointer {
    display: none;
  }
  .hintTouch {
    display: inline;
  }
  .kicker {
    padding: 2px 8px;
    font-size: 13px;
  }
  /* Never wrap: a two-line name or place would push the row out of place and
     read as a jump when stepping between builds. */
  .maker,
  .meta {
    white-space: nowrap;
  }
  .maker {
    padding: 2px 7px;
    font-size: 21px;
    line-height: 1.24;
  }
  .meta {
    padding: 2px 7px;
    font-size: 10.5px;
  }
}