tags as normal block flow, where
always
works natively, fixes it without fighting flex layout at all. */
a.story__value {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5em;
}
.story__value--email {
text-transform: lowercase;
}
.story__link-icon {
width: 1em;
height: 1em;
flex-shrink: 0;
}
@media (min-width: 1024px) {
.story {
flex-direction: row;
align-items: flex-start;
/* The base (mobile) gap is meant for the stacked column layout — in
the row layout it was also adding space between the two columns on
top of .story__intro's own padding-right and .story__details' own
padding-left, so the divider ended up sitting further from the
details text (both paddings plus this gap) than its matching
padding-right sits from the viewport edge (no gap involved there).
Zeroed here so the two paddings alone (equal values) are what put
equal space on each side of the divider. */
gap: 0;
}
.story__intro {
flex: 1 1 60%;
min-width: 0;
/* Was 58rem — a bit more room for the intro column. */
max-width: 64rem;
padding-right: var(--space-xl);
/* The divider is this column's own border, so it's only as tall as
this column's box — extra bottom padding here lets it run past the
last line of text instead of stopping flush against it. */
padding-bottom: var(--space-lg);
border-right: 1px solid var(--color-theme);
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.story__details {
/* Sized to its own content (shrink-to-fit) rather than stretched to
fill the row — a box that fills all the remaining row width gives
mathematically equal gaps on paper, but with short left-aligned
text inside it, the *visible text* still hugs the divider and
leaves a highly visible dead gap before the box's own (invisible)
right edge. Centering this snug box with auto margins on both
sides — splitting the row's leftover space evenly — keeps the
actual text equidistant from the divider and the section's edge
instead. Needs .story__value br (above) to actually force
phone/email onto separate lines first, or this box still has to
stay wide enough to fit them combined on one line. */
flex: 0 0 auto;
min-width: 0;
max-width: 24rem;
margin-left: auto;
margin-right: auto;
/* auto margins split the row's own leftover space evenly, but .story
has its own right padding (var(--space-section-x)) that the
divider side has no equivalent of — the divider sits inside the
row, not at its padded edge — so the gap to the viewport edge
still ends up bigger than the gap to the divider by exactly that
padding amount, however the leftover itself divides. Nudging the
box right by half that padding equalizes the two: it adds half to
the (smaller) divider-side gap and removes half from the (bigger)
edge-side gap, and this correction is the same regardless of the
actual leftover amount, so it holds at any viewport width and any
content width. */
position: relative;
left: calc(var(--space-section-x) / 2);
/* .story uses align-items: flex-start, so without this the "Address"
label lines up with .story__title instead of the paragraph below
it — this roughly matches the title's own rendered height plus its
gap to the body text, nudging this column's content down to align
with the first line of the paragraph instead. */
padding-top: calc(var(--space-xl) + 0.6rem);
}
}
/* ===== Cross-promo to the other location ===== */
.location-promo {
/* This section's own background is the current page's theme color (olive
on Lennan's Yard, maroon on Haddington Road) — not cream — so it reads
as a continuation of the page rather than a flat neutral strip; the
card inside then uses the OTHER location's color to contrast. */
background: var(--color-theme);
/* Top matched to the bottom (--space-xl) — was --space-sm, noticeably
thinner than the bottom strip. */
padding: var(--space-xl) var(--space-section-x);
}
.location-promo__card {
background: var(--color-theme-other);
}