/* Coastal Ridge Construction - Lompoc - spec build #48
---------------------------------------------------------------------------
BLACK AND ORANGE, BECAUSE THAT IS HIS MARK. His shirt carries a black
diamond with COASTAL in white caps, RIDGE in big orange, CONSTRUCTION in
white caps. The masthead reproduces that STRUCTURE in type, and the page is
dark-led where #47 (sent the same day) was silver.
Structure, unlike the last eleven:
#46 type-led paper, reviews by room #47 split hero, silver
#48 A REVIEWER'S SENTENCE AS THE HERO, then a full-bleed four-photo
strip with no gutters, an asymmetric work grid, the one long review
printed in full, and the licence next to a crop of his own shirt,
which already prints the number. No eyebrows.
⭐⭐ THE ORANGE IS SAMPLED OFF THE LOGO ON HIS WORK SHIRT (photo p06).
The RIDGE letters only (crop 100x30 at 550,1008), after the first, wider
crop was contaminated by the oak cabinets behind him. White-balanced
against the white COASTAL letters of the same mark (ref 223,215,222):
#B45A41 as photographed under indoor light -> #CD6A4A balanced. Hue 15.
⚠ COLLISION, ACCEPTED: hue 15 is #39's stain (14.7). #39 was a desaturated
brown on light grounds; this is a saturated orange on black. The brand wins.
⚠ THE SAMPLED ORANGE FAILS ON WHITE: 3.65. It is 5.09 on the black, so it
is published as-is ONLY on dark grounds and large display; a darkened
sibling carries every small text and button on light grounds.
⚠ EVERY RATIO BELOW WAS COMPUTED, NOT ESTIMATED.
#141312 black on white 18.56 | on paper 16.47
#CD6A4A orange on black 5.09 | on white 3.65 (LARGE/DARK ONLY)
#E08466 orange2 on black 6.77 -> small text on dark
#A4462A orangeD on white 6.02 | on paper 5.34 | white on it 6.02
#8A3920 orangeH white on it 7.82
#57524C muted on white 7.73 | on paper 6.86
#D9D3CC body-d on black 12.50
#9A938B dim-d on black 6.12
--------------------------------------------------------------------------- */
:root {
--ground: #FFFFFF;
--paper: #F4F1EC;
--black: #141312; /* the diamond */
--orange: #CD6A4A; /* SAMPLED off RIDGE. DARK GROUNDS / LARGE ONLY */
--orange2: #E08466;
--orangeD: #A4462A;
--orangeH: #8A3920;
--muted: #57524C;
--rule: #E3DDD5;
--rule-d: #2E2B28;
--body-d: #D9D3CC;
--dim-d: #9A938B;
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
"Liberation Mono", monospace;
--wide: 1180px;
--s-md: 16px; --s-lg: 26px; --s-xl: 36px; --s-2xl: 60px;
--sect: clamp(64px, 9vw, 108px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--ground); color: var(--black);
font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
/* Browser surfaces. The parts you did not draw still carry the design, and
this is the cheapest signal that a page was built rather than assembled. */
::selection { background: var(--orange); color: var(--black); }
:root { caret-color: var(--orangeD); accent-color: var(--orangeD); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
a { color: var(--orangeD); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.tabular, time, dd { font-variant-numeric: tabular-nums; }
@supports (scrollbar-color: auto) {
html { scrollbar-color: var(--orangeD) var(--paper); scrollbar-width: thin; }
}
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: var(--wide); margin-inline: auto; padding-inline: 24px; }
.muted { color: var(--muted); }
/* ── Masthead: the shirt mark's structure, set in type ────────────────── */
.mast { background: var(--black); border-bottom: 1px solid var(--rule-d); }
.mast .wrap {
display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
justify-content: space-between; padding-block: 14px;
}
.mark { margin: 0; display: inline-flex; flex-direction: column; line-height: 1; color: #fff; }
.mark .m1, .mark .m3 {
font-size: 11px; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
}
.mark .m1 { padding-left: 3px; }
.mark .m2 {
font-size: 30px; font-weight: 900; font-style: italic; text-transform: uppercase;
letter-spacing: -0.02em; color: var(--orange); margin: 2px 0 3px; /* 5.09 on black */
}
.mast .tel {
color: #fff; font-weight: 700; font-size: 17px; text-decoration: none; white-space: nowrap;
border: 1px solid var(--orange); border-radius: 6px; padding: 9px 16px;
}
.mast .tel:hover { background: var(--orangeH); border-color: var(--orangeH); }
/* ── Hero: his customer's sentence ────────────────────────────────────── */
section { padding-block: var(--sect); }
.hero { background: var(--black); color: var(--body-d); padding-block: clamp(60px, 9vw, 116px) clamp(48px, 6vw, 76px); }
/* max-width in ch must sit on the