per line,
nowrap — rather than by capping the width.
It used to be `max-width:8.5ch`, a measured window between "Welcome to"
(7.41ch) and "Welcome to On" (9.69ch). That only holds while the font
is the one it was measured in: on a real phone it broke as "Welcome /
to On The / Bay", because ch is the width of a "0" and the ratio of "0"
to letters shifts with the font actually used (fallback while Fraunces
loads, different optical-size handling, Safari). A width window that
narrow is a bet on font metrics; two explicit lines are not. Each line
is ~175px at the smallest size against a ~320px column, so nowrap has
~2x headroom before anything could overflow. Keep the wording in the
spans in step with what this comment says if it is ever changed. */
.split-text .h-sec{
/* Scaled up from the sitewide .h-sec clamp (1.9/4.2vw/3rem) so the
heading's lines come out the same width as the .welcome-sub line
below it, which the owner asked for. At the top of the clamp
"On The Bay" measures ~253px against the subtitle's 252px.
Note the two can only match at desktop: .welcome-sub is a fixed rem
size with fixed letter-spacing, so it is 252px at EVERY viewport,
while the heading scales. At 390px the heading lines are ~153px and
the subtitle is still 252px. Matching there too would mean either a
~57px heading on a 350px column or a subtitle too small to read.
The two-line break comes from the markup, not from a width — see
the note above. */
font-size:clamp(2.15rem, 4.95vw, 3.55rem);
}
.split-text .h-sec span{ display:block; white-space:nowrap; }
/* Four feature callouts, replacing the that was here.
minmax(0,1fr) rather than a bare 1fr for the reason documented on
.roomlayout and .cb-cols: a grid item's default min-width is auto, so a
bare 1fr lets a long word push the track — and the page — wider than the
viewport instead of wrapping. */
.welcome-facts{
list-style:none; margin:2.5em 0 0; padding:0;
display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.welcome-facts li{
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:0 12px; border-left:1px solid var(--line);
}
.welcome-facts li:first-child{ border-left:0; padding-left:0; }
/* Explicit margins rather than a flex `gap`: the icon needs more air below
it than the two text lines need between them, and one gap can't do both. */
.welcome-fact-icon{
display:grid; place-items:center; width:44px; height:44px; margin-bottom:13px;
/* the same circle badge as .dist-icon, .bookbox-icon and .cb-fact-icon */
border-radius:50%; background:rgba(28,58,49,.08); color:var(--ink);
}
.welcome-fact-icon svg{ width:21px; height:21px; }
.welcome-facts b{
margin-bottom:5px;
font:700 .72rem/1.2 var(--sans); letter-spacing:.12em; text-transform:uppercase;
color:var(--ink);
}
.welcome-facts small{ font-size:var(--t--1); line-height:1.35; color:var(--ink-mute); }
/* Two per row once four would be ~85px each. This query MUST stay below the
:first-child rule above — the two selectors are equally specific, so at
equal specificity the later one wins no matter which sits in a media
query. That exact trap already bit .cb-gk once; see CLAUDE.md. */
@media (max-width:620px){
.welcome-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:28px; }
/* With two columns the border has to clear on the first cell of EVERY
row, not just the very first — nth-child(odd) is the left column. */
.welcome-facts li:nth-child(odd){ border-left:0; padding-left:0; }
}
/* Same construction as .dist-more (script line, rule trailing off right) and
.cb-signoff (same, but centred and rule-flanked on both sides). Three
near-identical rules now; kept separate rather than folded into a shared
utility because each is tuned to its own section's size and spacing.
max-width:none is load-bearing — it's a , and the base `p` rule caps
every paragraph at 66ch, which would stop the rule short of the column. */
.welcome-signoff{
display:flex; align-items:center; gap:clamp(14px,2.2vw,22px);
margin:2.6em 0 0; max-width:none;
font-family:var(--script); font-size:clamp(1.3rem,2vw,1.6rem);
color:var(--ink-soft);
}
.welcome-signoff::after{ content:""; flex:1 1 auto; height:1px; background:var(--line); }
.facts{ margin:2.2em 0 0; display:grid; gap:0; border-top:1px solid var(--line); }
.facts > div{
display:flex; justify-content:space-between; gap:20px;
padding:.78em 0; border-bottom:1px solid var(--line);
}
.facts dt{ font-size:var(--t--1); color:var(--ink-mute); }
.facts dd{ margin:0; font-weight:500; text-align:right; }
.facts dd a{ text-decoration:none; border-bottom:1px solid var(--line); }
.facts dd a:hover{ border-color:var(--rose); color:var(--rose); }
.facts-tight{ margin-top:1.4em; }
/* ---------- rooms ---------- */
/* cards float with their own border/shadow, rather than the flat hairline-
tile grid this used before — a deliberate departure from the site's
otherwise sharp-cornered, shadowless language, asked for specifically to
match a reference room-card layout (relaxedcityliving.co.za/rooms) */
.rooms{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,28px); }
/* Sept 2026 redesign, modelled on a mockup the owner supplied: a badge +
working photo carousel over the image and a "Room type" eyebrow. The
card briefly stopped being a single `` over this (a `