side by side at the bottom of the card. That only works when the card is wide enough to fit both names on one line each. On a 166 px-wide card both names get ~ 80 px and wrap to one character per line, which reads as gibberish (e.g. "Eulemur collaris" → "col / lari / s"). Switching to column direction + flex-start lets the title use the full overlay width, then the subtitle drops below it. Tighter padding + smaller fonts give the cover image more room. */ /* flex-direction flip note: the desktop overlay uses `align-items: flex-end` to push title + subtitle to the BOTTOM of the card in row mode (cross axis is vertical there). Switching to column mode reuses cross axis for horizontal alignment, so we need `justify-content: flex-end` to keep the text at the bottom and `align-items: flex-start` to left-align it. */ .card-overlay { flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0.9rem; gap: 0.2rem; } .card-overlay h3 { font-size: 1.2rem; line-height: 1.2; /* Same "no mid-word breaks" rule as the desktop overlay above — the Cyrillic / Latin long-name problem applies on phones too. */ word-break: normal; overflow-wrap: normal; hyphens: none; } /* Subtitle inside .card-overlay (the italic English / Latin pair line on species cards). Keep it just one notch smaller than the title and let it wrap at word boundaries too. */ .card-overlay p { font-size: 0.8rem !important; line-height: 1.2; word-break: normal; overflow-wrap: normal; hyphens: none; } /* Slightly taller card so two short lines of text + the cover image all breathe — 4:3 gives only ~ 124 px height at 166 px width, which is too cramped for stacked text. */ .category-card { aspect-ratio: 5 / 4; } /* Stats hero stacks. */ .stats-container { flex-direction: column; gap: 1rem; padding: 1rem; } /* Grid sizing on phones — `auto-fit` (vs the previous `auto-fill`) collapses empty column tracks, so a family with a single species fills the row width instead of stuck in column 1 with column 2 blank (Tenrecidae was the trigger case). minmax bumped to 160 px so the cards stay readable when 2 columns DO fit. */ .grid-container { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0.75rem; } /* Headings dial down so they don't dominate the viewport. */ .section-title { font-size: 1.5rem; } /* Lightbox close: thumb-sized. */ .lightbox-close { width: 48px; height: 48px; font-size: 2rem; line-height: 1; } /* Landscape 16:9 rectangle on phones — wider than tall so the entire world can fit horizontally at zoom 0. On a 375 px-wide phone the container is ~211 px tall. At zoom 0 the world tiles are 256 px square, so width is covered (with horizontal wrap filling the extra ~120 px) and height crops the top / bottom ~9 % of Mercator latitudes — which is mostly empty polar distortion anyway. End result: visitor sees the whole world at once on first paint, no gray strips, no green camouflage. */ #map-container { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 9; max-height: 50vh; } /* Map controls — keep the three filter buttons on a single row at the top, and put the "N locations · M zoo · K wild" stats on its own row below. Smaller padding + font on each pill so all three fit on a typical 360-414 px phone width without wrapping. */ .map-controls { flex-direction: row; flex-wrap: wrap; gap: 0.3rem; } .map-toggle { /* !important needed because map.html has its own inline