/* Beach Cities Living — site stylesheet
* ---------------------------------------------------------------------------
* Replaces site-base.min.css, assembly.min.css, polish.min.css and the two
* per-page sheets. Does NOT touch market-scoped.css or market-v7-canonical.css
* — those are hash-locked; the module's dark skin is a separate overlay in
* market-skin.css that only sets colors on a scoping class.
*
* Every colour here already existed in the old :root. The consolidation is
* thirteen section backgrounds down to four, and four golds down to one.
* One typeface joins: Source Serif 4, for reading.
*/
/* ---------------------------------------------------------------- fonts -- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/playfair-display-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/playfair-display-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/playfair-display-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-sans-3-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
/* --------------------------------------------------------------- tokens -- */
:root{
--night:#031A2C; --navy:#082A43; --ink:#07182F; --deep:#0B1B2A;
--sand:#F3EEE5; --foam:#FFFDFA; --shell:#FAF7F1; --linen:#F9F6F0;
--copy:#344454; --copy-2:#2C3846; --mute:#6B7A85; --mute-2:#8A96A0;
--gold:#C4952A; --gold-lt:#E0C374;--gold-pale:#E7CE86;
--ocean:#08788B; --ocean-dk:#065A69;
--good:#3C6B4E; --bad:#A33322; --bad-lt:#E8A88E;
--display:'Playfair Display',Georgia,serif;
--read:'Source Serif 4',Georgia,serif;
--ui:'Source Sans 3',system-ui,-apple-system,sans-serif;
--wrap:1180px; --measure:640px;
--line:rgba(7,24,47,.10);
--line-2:rgba(7,24,47,.14);
--line-dk:rgba(255,253,250,.13);
}
/* ---------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--sand);color:var(--copy);
font-family:var(--read);font-size:17px;line-height:1.68;-webkit-font-smoothing:antialiased}
/* height:auto matters: every carries width/height attributes for CLS,
and max-width alone lets the height attribute win, so a 1200x1500 portrait
renders 445px wide and still 1500px tall. */
img,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;color:var(--ink);text-wrap:balance}
p{margin:0}
a{color:var(--ocean);text-decoration:none}
a:hover{color:var(--ocean-dk);text-decoration:underline}
:focus-visible{outline:2px solid var(--ocean);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--foam);color:var(--ink);padding:12px 18px;border-radius:3px}
/* --------------------------------------------------------------- layout -- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
.read{max-width:var(--measure)}
.section{padding:74px 0}
.section--tight{padding:56px 0}
.section--foam{background:var(--foam);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--night{background:var(--night);color:rgba(255,253,250,.84)}
.section--night h1,.section--night h2,.section--night h3{color:var(--foam)}
.stack{display:flex;flex-direction:column;gap:19px}
.eyebrow{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;
text-transform:uppercase;color:var(--gold);margin:0}
.section--night .eyebrow{color:var(--gold-lt)}
.micro{font-family:var(--ui);font-size:11px;letter-spacing:.09em;text-transform:uppercase}
.note{font-family:var(--ui);font-size:12.5px;line-height:1.6;color:var(--mute-2);margin-top:13px}
.sechead{margin-bottom:26px}
.sechead h2{font-size:40px;line-height:1.14}
.lede{font-size:20px;line-height:1.5}
/* --------------------------------------------------------------- header -- */
/* 2026-09-12 Steve: the logo goes back to its own colors at a readable size.
The blue-and-olive lockup disappears against a bright hero, so the header is
a solid navy bar on every page instead of floating transparent over the
photo. 86px clears a 56px logo with breathing room. */
.site-header{background:var(--night);height:94px;display:flex;align-items:center}
/* 2026-09-12 Steve: "just a slight shade and not a solid color — just enough to
help with visibility but not be too obvious." A tint alone was not enough:
over the bright Lifestyle aerial the white rooftops read straight through the
wordmark even at 82%. Softening what is BEHIND the header is what fixes it,
so the photograph stays visible but stops competing with the logo. */
.site-header--overlay{position:absolute;top:0;left:0;right:0;z-index:3;
background:rgba(3,26,44,.50);
-webkit-backdrop-filter:blur(7px) saturate(.95);backdrop-filter:blur(7px) saturate(.95)}
/* Without backdrop-filter there is nothing softening the photograph, so the
tint has to carry it alone. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
.site-header--overlay{background:rgba(3,26,44,.74)}
}
/* A dark halo on the logo itself, so the mark separates from whatever is under
it rather than relying on the tint. */
.site-header--overlay .brand img{
filter:drop-shadow(0 0 9px rgba(3,26,44,.9)) drop-shadow(0 2px 5px rgba(3,26,44,.75))}
.site-header .wrap{width:100%;display:flex;align-items:center;justify-content:space-between}
.brand img{height:64px;width:auto;filter:drop-shadow(0 2px 10px rgba(0,10,25,.45))}
.nav{display:flex;gap:20px;align-items:center;font-family:var(--ui);font-size:14px}
.nav a{color:rgba(255,253,250,.86)}
.site-header--overlay .nav a{color:rgba(255,253,250,.92);text-shadow:0 1px 3px rgba(3,26,44,.5)}
.nav a[aria-current]{color:var(--gold-lt)}
.nav .contact{border:1px solid rgba(224,195,116,.5);color:var(--gold-lt);padding:9px 18px;
border-radius:2px;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.nav-toggle{display:none;width:44px;height:44px;background:none;border:0;padding:0;
flex-direction:column;justify-content:center;align-items:flex-end;gap:5px;cursor:pointer}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--gold-lt)}
.nav-toggle span:last-child{width:15px}
/* ----------------------------------------------------------------- hero -- */
.hero{position:relative;overflow:hidden;background:var(--night)}
.hero--full{height:100vh;min-height:640px}
.hero--band{height:min(62vh,560px);min-height:380px}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%}
/* Two scrims, not one: a light wash keeps the nav legible at the top, a
stronger one sits only under the copy. A single full-height gradient either
muddies the footage or leaves the eyebrow unreadable over bright sand. */
.hero__scrim-top{position:absolute;inset:0;
background:linear-gradient(180deg,rgba(3,26,44,.58) 0%,rgba(3,26,44,.16) 14%,rgba(3,26,44,0) 30%)}
.hero__scrim-btm{position:absolute;inset:0;
background:linear-gradient(0deg,rgba(3,26,44,.95) 0%,rgba(3,26,44,.90) 12%,rgba(3,26,44,.78) 28%,
rgba(3,26,44,.60) 44%,rgba(3,26,44,.42) 58%,rgba(3,26,44,.18) 72%,rgba(3,26,44,0) 86%)}
.hero__body{position:absolute;left:0;right:0;bottom:118px;z-index:2}
/* 2026-09-12 Steve: "the text is white and fades against the background — make
a slight transparent shading around the text." A soft pool of shade travels
with the copy, so the headline holds up over a busy hero (the El Segundo
sign sits directly behind it) without putting a visible box on the picture.
The ellipse is far wider than the text block on purpose: a tight one showed
its own edge as a band across the photograph. */
.hero__body::before{content:"";position:absolute;
inset:-190px -22% -90px -14%;z-index:-1;pointer-events:none;
/* The gradient must reach zero WELL inside the box. At 76% it was still at
about 20% opacity where the element ends, which drew a visible seam across
the homepage hero, where the band is tall enough to show it. */
background:radial-gradient(150% 125% at 20% 62%,rgba(3,26,44,.58) 0%,
rgba(3,26,44,.34) 22%,rgba(3,26,44,.14) 36%,rgba(3,26,44,.03) 48%,
rgba(3,26,44,0) 56%)}
.hero__body .eyebrow{color:var(--gold-pale);text-shadow:0 1px 8px rgba(3,26,44,.8);margin-bottom:20px}
.hero h1{color:var(--foam);font-size:clamp(42px,5.7vw,82px);line-height:1.0;
margin-bottom:24px;max-width:1000px;
text-shadow:0 1px 2px rgba(3,26,44,.5),0 3px 22px rgba(3,26,44,.7)}
.hero__deck{font-size:20px;line-height:1.5;color:rgba(255,253,250,.92);max-width:620px;
margin-bottom:34px;text-shadow:0 1px 12px rgba(3,26,44,.5)}
.hero__actions{display:flex;gap:14px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:0;right:0;bottom:34px;z-index:2;
display:flex;flex-direction:column;align-items:center;gap:9px}
.hero__scroll .micro{color:rgba(255,253,250,.6);letter-spacing:.2em}
.hero__scroll i{display:block;width:1px;height:30px;
background:linear-gradient(180deg,rgba(255,253,250,.55),rgba(255,253,250,0))}
.hero--band .hero__body{bottom:52px}
.hero--band h1{font-size:clamp(34px,4.6vw,66px)}
/* --------------------------------------------------------------- buttons -- */
.btn,.btn2,.btn-ghost{display:inline-block;font-family:var(--ui);font-size:12px;font-weight:600;
letter-spacing:.11em;text-transform:uppercase;padding:14px 26px;border-radius:2px;
text-decoration:none;min-height:44px;line-height:1.35}
.btn{background:var(--gold);color:#1B1405}
.btn:hover{background:#B0851F;color:#1B1405;text-decoration:none}
.btn2{border:1px solid rgba(7,24,47,.3);color:var(--ink)}
.btn2:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}
.btn-ghost{border:1px solid rgba(255,253,250,.55);color:var(--foam)}
.btn-ghost:hover{border-color:var(--foam);color:var(--foam);text-decoration:none}
/* ------------------------------------------------------------ navigator -- */
.navigator{background:var(--navy);border-bottom:1px solid rgba(224,195,116,.22);
position:sticky;top:0;z-index:5}
.navigator .wrap{display:flex;align-items:baseline;gap:26px;min-height:58px;
padding-top:10px;padding-bottom:10px}
.navigator .label{color:rgba(255,253,250,.5);letter-spacing:.14em;flex:none}
/* 2026-09-12. This was a horizontal scroller, so on a page with nine sections
the last label was sliced through mid-word with nothing to say there was
more. It wraps now, and the bar grows to fit. */
.navigator ul{display:flex;flex-wrap:wrap;gap:10px 22px;list-style:none;margin:0;padding:0;
font-family:var(--ui);font-size:13.5px;overflow-x:auto;scrollbar-width:none}
.navigator ul::-webkit-scrollbar{display:none}
.navigator a{color:rgba(255,253,250,.88);white-space:nowrap;padding-bottom:3px}
.navigator a[aria-current]{color:var(--gold-lt);border-bottom:1px solid var(--gold-lt)}
.navigator .meta{color:rgba(255,253,250,.42);margin-left:auto;flex:none}
/* ---------------------------------------------------------------- table -- */
/* Tables sit ABOVE parallel records — neighborhoods, schools, parks — never in
place of an argument. On a phone each row becomes its own labelled card. */
.tbl{border:1px solid var(--line-2);border-radius:3px;overflow:hidden;font-family:var(--ui);
width:100%;border-collapse:collapse}
.tbl thead{background:var(--night)}
.tbl th{padding:12px 16px;color:var(--gold-lt);font-size:11px;letter-spacing:.12em;
text-transform:uppercase;text-align:left;font-weight:600}
.tbl td{padding:14px 16px;font-size:13.5px;color:var(--copy);vertical-align:top;
border-bottom:1px solid rgba(7,24,47,.09)}
.tbl tbody tr:nth-child(odd){background:var(--foam)}
.tbl tbody tr:nth-child(even){background:var(--shell)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink);font-weight:600}
.nowrap{white-space:nowrap}
/* ----------------------------------------------------------------- card -- */
.cards{display:grid;gap:20px;align-items:stretch}
/* Bare figures in a photo grid had no height rule at all, so each picture kept
its own shape and the row came out ragged. */
.cards figure{margin:0}
.cards figure img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;display:block}
.cards figure figcaption{font-family:var(--ui);font-size:12.5px;color:var(--mute-2);
margin-top:9px;line-height:1.45}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--shell);border:1px solid rgba(7,24,47,.12);border-radius:3px;
padding:20px 21px;display:flex;flex-direction:column;gap:9px}
.card--photo{padding:0;overflow:hidden}
.card--photo img{width:100%;height:190px;object-fit:cover}
.card--photo .card__body{padding:20px 21px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.card h3{font-size:20px}
.card p{font-size:14.5px;line-height:1.6}
.card .more{margin-top:auto;padding-top:8px}
.section--night .card{background:rgba(255,253,250,.05);border-color:rgba(255,253,250,.16)}
.section--night .card p{color:rgba(255,253,250,.8)}
/* ------------------------------------------------------------------ faq -- */
.faq{max-width:900px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-dk);padding:19px 0}
.faq summary{display:flex;justify-content:space-between;gap:18px;align-items:center;
min-height:44px;cursor:pointer;list-style:none;font-family:var(--ui);font-size:15px;
font-weight:600;line-height:1.45;color:var(--gold-lt)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:rgba(224,195,116,.7);flex:none;font-family:var(--ui)}
.faq details[open] summary::after{content:'\2212'}
.faq details[open] summary{margin-bottom:14px}
.faq .answer{font-size:16px;line-height:1.68;color:rgba(255,253,250,.84);display:flex;
flex-direction:column;gap:14px}
.faq .n{opacity:.55;margin-right:9px}
/* -------------------------------------------------------------- callout -- */
.callout{max-width:820px;background:var(--foam);border-left:3px solid var(--gold);
border-radius:0 3px 3px 0;padding:22px 26px;font-family:var(--ui);font-size:15.5px;
line-height:1.68;color:var(--copy-2)}
.pull{font-family:var(--display);font-size:24px;line-height:1.36;color:var(--ink)}
/* ------------------------------------------------------------------ cta -- */
.cta{background:var(--foam);border-top:1px solid var(--line);padding:56px 0 58px}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:48px}
.cta__actions{display:flex;flex-direction:column;gap:12px;flex:none}
/* --------------------------------------------------------------- footer -- */
.site-footer{background:var(--navy);padding:58px 0 32px;color:rgba(255,253,250,.82)}
.site-footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:44px;
padding-bottom:36px;border-bottom:1px solid var(--line-dk)}
.site-footer img{height:44px;width:auto;filter:brightness(0) invert(1);opacity:.94;margin-bottom:16px}
.site-footer h2{font-family:var(--ui);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--gold-lt);margin-bottom:15px;font-weight:600}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
font-family:var(--ui);font-size:14px}
.site-footer a{color:rgba(255,253,250,.82)}
.site-footer .tagline{font-size:14.5px;line-height:1.6;color:rgba(255,253,250,.62)}
.site-footer .legal{display:flex;justify-content:space-between;gap:24px;padding-top:22px;
font-family:var(--ui);font-size:12.5px;color:rgba(255,253,250,.5);flex-wrap:wrap}
/* ---------------------------------------------------------- breakpoints -- */
@media (max-width:1080px){
.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
.site-footer .cols{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:760px){
body{font-size:16.5px}
.wrap{padding:0 20px}
.section{padding:38px 0}
.section--tight{padding:32px 0}
.sechead h2{font-size:26px;line-height:1.18}
.lede{font-size:16.5px}
.nav{display:none}
.nav-toggle{display:flex}
.site-header{height:70px}
.brand img{height:44px}
/* PHONE HERO SIZE.
The video is 1280x720. A full-height hero on a 390pt phone at 3x asks for
1170x2532 device px, which is a 3.5x upscale -- worse than any desktop.
560 CSS px asks for 1170x1680, a 2.33x upscale, which is slightly better
than the desktop retina case. The sand section below then shows about
280px above the fold, which signals "there is more" better than the scroll
cue did, so the cue is dropped here rather than crowding the buttons. */
.hero--full{height:560px;min-height:0}
.hero__body{bottom:30px}
.hero__scroll{display:none}
.hero h1{font-size:38px;line-height:1.06;margin-bottom:0}
.hero__body .eyebrow{margin-bottom:10px;font-size:11px;letter-spacing:.12em}
.hero__actions{gap:8px;margin-top:16px}
.hero__actions .btn,.hero__actions .btn-ghost{padding:13px 16px;font-size:11.5px}
/* a shorter hero puts the copy over brighter footage, so the scrim works harder */
.hero__scrim-btm{background:linear-gradient(0deg,rgba(3,26,44,.97) 0%,rgba(3,26,44,.93) 16%,
rgba(3,26,44,.82) 34%,rgba(3,26,44,.66) 50%,rgba(3,26,44,.44) 64%,rgba(3,26,44,.18) 78%,
rgba(3,26,44,0) 92%)}
.hero__deck{font-size:17px;margin-bottom:26px}
.hero__actions{flex-direction:column;align-items:stretch}
.hero__actions .btn,.hero__actions .btn-ghost{text-align:center}
.cards--2,.cards--3{grid-template-columns:1fr}
.card--photo img{height:160px}
.cta .wrap{flex-direction:column;align-items:stretch;gap:20px}
.cta__actions .btn,.cta__actions .btn2{text-align:center}
.site-footer .cols{grid-template-columns:1fr;gap:26px}
.navigator{position:static}
.navigator .wrap{height:auto;flex-direction:column;align-items:flex-start;gap:11px;padding-top:14px;padding-bottom:15px}
.navigator .meta{margin-left:0}
.navigator ul{flex-wrap:wrap;gap:8px}
/* Torrance and Beyond head their sections with full sentences. nowrap kept
them on one line and pushed the page 170px wider than the phone. */
.navigator a{display:block;border:1px solid rgba(224,195,116,.22);border-radius:999px;
padding:9px 14px;min-height:22px;white-space:normal;max-width:100%}
.navigator a[aria-current]{background:rgba(224,195,116,.12);border-color:rgba(224,195,116,.55)}
/* a five-column table is unreadable at 390px; each row becomes a card */
.tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
.tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl{border:0}
.tbl tbody tr{background:var(--foam)!important;border:1px solid rgba(7,24,47,.12);
border-radius:3px;padding:16px 18px 6px;margin-bottom:12px}
.tbl td{border-bottom:1px solid var(--line);padding:12px 0;font-size:15px}
.tbl td:last-child{border-bottom:0}
.tbl td:first-child{font-family:var(--display);font-weight:500;font-size:20px;
line-height:1.24;padding-top:0;padding-bottom:6px;border-bottom:0}
.tbl td[data-label]::before{content:attr(data-label);display:block;font-family:var(--ui);
font-size:10.5px;letter-spacing:.10em;text-transform:uppercase;color:var(--mute-2);margin-bottom:5px}
.tbl td:first-child[data-label]::before{display:none}
}
@media (max-width:420px){
.wrap{padding:0 16px}
}
/* -------------------------------------------------------------- utility -- */
.split{display:grid;gap:52px;align-items:start}
.split--media-right{grid-template-columns:1fr 460px}
.split--media-left{grid-template-columns:460px 1fr}
@media (max-width:900px){.split--media-right,.split--media-left{grid-template-columns:1fr}
.split--media-left>img{order:-1}}
.rounded{border-radius:3px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ------------------------------------------------- pieces the pages need -- */
/* ui.min.js injects its own and
toggles body.nav-open on .nav. The panel is styled here rather than shipping
a second toggle in the markup. */
.nav-toggle{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold-lt);background:none;border:1px solid rgba(224,195,116,.45);
border-radius:2px;padding:11px 16px;min-height:44px;cursor:pointer;display:none}
@media (max-width:1080px){
.nav-toggle{display:inline-block}
.site-header .nav{display:none;position:absolute;top:100%;left:0;right:0;
background:var(--night);border-top:1px solid rgba(255,253,250,.10);
flex-direction:column;align-items:stretch;gap:0;padding:6px 24px 16px}
.site-header{position:relative}
.site-header--overlay{position:absolute}
body.nav-open .site-header .nav{display:flex}
.site-header .nav a{padding:14px 0;border-bottom:1px solid rgba(255,253,250,.07);
color:rgba(255,253,250,.88);text-shadow:none}
.site-header .nav a:last-child{border-bottom:0}
.site-header .nav .contact{border:0;padding:14px 0;color:var(--gold-lt)}
}
/* A table earns a caption when its cells are sourced rather than self-evident. */
.tbl-wrap{margin:0}
.tbl-wrap figcaption{font-family:var(--ui);font-size:12.5px;line-height:1.6;
color:var(--muted);margin-top:14px;max-width:900px}
/* Reviews: a card that leads with the quotation, not with a portrait. */
.quote{background:var(--shell);border:1px solid rgba(7,24,47,.12);border-radius:3px;
padding:26px 26px 22px;display:flex;flex-direction:column;gap:14px;margin:0}
.quote blockquote{margin:0}
.quote p{font-family:var(--serif);font-size:15.5px;line-height:1.68;color:var(--copy)}
.quote p::before{content:'\201C';font-family:var(--display);font-size:38px;line-height:0;
color:rgba(196,149,42,.5);margin-right:5px;vertical-align:-6px}
.quote figcaption{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--gold);margin-top:auto}
/* The FAQ answer colour is set for a night section; on a light one it inverts. */
.section:not(.section--night) .faq .answer{color:var(--copy)}
.section:not(.section--night) .faq summary{color:var(--ink)}
/* ------------------------------------------------------------------ flow -- */
/* The mockup carried spacing inline on every element. A real page needs the
rhythm in one place -- but not everywhere: the market module ships with its
own scoped stylesheet and must not inherit a page rule. So flow is opt-in,
applied to the containers the page templates emit and to nothing else. */
.flow > * + *{margin-top:19px}
.flow > .eyebrow + *{margin-top:11px}
.flow > h2 + *,.flow > h3 + *{margin-top:15px}
.flow > * + h2,.flow > * + h3{margin-top:34px}
.flow > .lede + *{margin-top:30px}
.flow > .cards,.flow > .tbl-wrap,.flow > .faq{margin-top:38px}
.flow > .note{margin-top:22px}
.flow > .callout{margin-top:26px}
.band-head{text-align:center;max-width:660px;margin:0 auto 34px}
.band-head > * + *{margin-top:12px}
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center}
.split--media-left figure{margin:0}
.split img{border-radius:3px}
@media (max-width:1080px){ .split{grid-template-columns:1fr;gap:32px} }
/* A card's exit link is a label, not a sentence: small, letterspaced, and it
never breaks between the words and the arrow. */
.more{font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--ocean);text-wrap:nowrap}
.more a{color:inherit}
.more:hover,.more a:hover{color:var(--ocean-dk)}
/* .tbl th is styled for the column head, which sits on the night strip. A row
header sits in the body and has to read as the row's name instead. */
.tbl tbody th{text-align:left;padding:14px 16px;font-family:var(--ui);font-size:13.5px;
font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
vertical-align:top;border-bottom:1px solid var(--line-2);width:15%}
.tbl tbody tr:last-child th{border-bottom:0}
/* A portrait is a supporting element in the split, not the subject of the page. */
.split figure img{width:100%;max-height:600px;object-fit:cover;object-position:center 25%}
/* The FAQ reads wider than a paragraph measure: two columns of text either
side of a plus sign, not prose. */
.faq{width:100%}
/* The FAQ list was centring inside the content column while its heading sat at
the column edge, so the two started on different vertical lines. */
.flow > .faq{margin-left:0}
@media (max-width:760px){
/* The row-card rule listed td but not th, so the row's name kept its 15%
column width and sat indented inside its own card. */
.tbl tbody th{display:block;width:100%;padding:16px 16px 12px;font-size:15px;
font-family:var(--display);font-weight:500;border-bottom:1px solid var(--line-2)}
}
/* ===========================================================================
LIFESTYLE — the components the second page needs.
Added 2026-09-10 while porting lifestyle.html. Nothing above this line was
changed except the two token typos noted at the end, which were already
silently doing nothing.
=========================================================================== */
/* A numbered label. The number and the words are two separate elements on
purpose: the baseline keeps them in separate blocks, and content-diff
compares sentences per block, so fusing them would invent a sentence that
exists in neither document. */
.slabel{display:flex;align-items:baseline;gap:11px;margin:0}
.slabel .num{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;
color:var(--gold);opacity:.75;margin:0}
.slabel .eyebrow:empty{display:none}
.section--night .slabel .num,.panel--night .slabel .num{color:var(--gold-lt);opacity:.7}
/* Two columns of prose. Not .split — that one is for a column of text beside a
picture and centres them against each other. These are two peers, top-aligned. */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px;align-items:start}
.cards--2.duo{gap:44px}
/* A dark panel inside a light section. .section--night sets the ground for a
whole band; this is the same treatment for one block within one. */
.panel{border-radius:3px;padding:38px 40px 40px}
.panel--night{background:var(--night);color:rgba(255,253,250,.84)}
.panel--night h3{color:var(--foam);font-size:26px;margin-top:13px}
.panel--night .duo{margin-top:22px}
/* .callout is a single styled paragraph. This is the same rule for a block that
carries a heading and more than one paragraph. */
.callout--block{display:flex;flex-direction:column;gap:13px;max-width:880px}
.callout--block h3{font-size:21px;line-height:1.3}
.callout--block .slabel{margin-bottom:-4px}
/* The three coastline cards each carry one approved sentence of the form
"Manhattan Beach: Integrates upscale…". The city name is emphasised inline
rather than lifted into a heading, which would split the sentence in two. */
.lead-in{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);
display:block;margin-bottom:5px}
.section--night .lead-in{color:var(--foam)}
/* A picture that spans the content column rather than sitting beside it. */
/* Reserved for genuinely panoramic source images. Everything else keeps its
own proportions — cropping a portrait headshot to a 420px band produced a
nose-to-nose close-up, and stretching a 1024px map across 1180px made it
both blurry and cut off. */
.figure--wide{margin:34px 0 0}
.figure--wide img{width:100%;max-height:460px;object-fit:cover;border-radius:3px}
.figure--inline{margin:30px 0 0}
.figure--inline img{display:block;width:100%;height:auto;border-radius:3px}
.figure--inline figcaption,.figure--wide figcaption{font-family:var(--ui);
font-size:12.5px;color:var(--mute-2);margin-top:10px;line-height:1.45}
/* Vertical separation between the numbered subsections inside one section. */
.sub{margin-top:52px}
.section--night .sub,.section--foam .sub{margin-top:52px}
/* .split--media-left/right are declared earlier in this file but a later bare
.split rule resets grid-template-columns, so the modifiers never applied.
Restated here, after it, so they do — and INSIDE a min-width query, because
the collapse to one column at 1080 is itself a bare .split rule that an
unscoped modifier would override. Left unscoped, the parks section kept two
columns on a phone and squeezed the farmers-market photo to 59px wide. */
@media (min-width:1081px){
.split--media-right{grid-template-columns:1.15fr .85fr}
.split--media-left{grid-template-columns:.85fr 1.15fr}
}
.split.sub{align-items:start}
/* The FAQ number sits inside with the question, because that is how
the approved page has it. It is decoration, so it is dimmed and aria-hidden. */
.faq summary{gap:0}
.faq .qa-num{font-family:var(--ui);font-size:11.5px;letter-spacing:.12em;opacity:.55;
margin-right:13px;flex:none}
.faq .qa-q{flex:1;margin-right:16px}
/* The CTA band carries a heading and an eyebrow, not just a line of text. */
.cta .eyebrow{margin-bottom:11px}
.cta h2{font-size:34px;line-height:1.15}
.cta .flow > * + *{margin-top:13px}
.cta__actions .btn,.cta__actions .btn2{text-align:center}
@media (max-width:1080px){
.duo,.cards--2.duo{grid-template-columns:1fr;gap:34px}
.panel{padding:28px 24px 30px}
}
@media (max-width:760px){
.sub{margin-top:38px}
.figure--wide{margin-top:26px}
.figure--wide img{max-height:240px}
.panel--night h3{font-size:22px}
.cta h2{font-size:26px}
.navigator .label{display:none}
}
/* Two tokens that were never defined: --muted (the token is --mute-2) and
--serif (the token is --read). Both were silently falling back to inherit,
so the table caption took the body colour and the review quotation took the
body face instead of the reading face. */
.tbl-wrap figcaption{color:var(--mute-2)}
.quote p{font-family:var(--read)}
/* A reading column is a MEASURE, not a narrower page.
.wrap sets the 1180 container and its 40px gutter; .read sets the 640 measure.
Put both on one element and .read wins the max-width, so the container itself
shrinks to 640 and `margin:0 auto` then centres it — the copy drifts into the
middle of the page and no longer lines up with the section above or below it.
Both approved boards (Lifestyle 1 of 7, Homepage 1 of 4) show that column
flush left, against the same gutter as everything else. Constrain the
CHILDREN to the measure and leave the container alone.
This corrects index.html as well, where the centring shipped unnoticed. */
.wrap.read{max-width:var(--wrap)}
.wrap.read > *{max-width:var(--measure)}
/* ---- corrections from the 2026-09-10 lifestyle inspection -------------- */
/* The browser's own stylesheet gives a 40px left and right margin.
.split--media-left figure had margin:0; nothing else did, so every other
picture on the page was inset 40px on each side and rendered 278px wide in a
358px column instead of filling it. The harness reported the box and called
it clean, because a small picture is not a broken one. */
.split figure,.duo figure,.card figure,.panel figure{margin:0}
/* Blocks that are direct children of .wrap get no rhythm from .flow, so the
dark panel, the callout and the tables were butting straight into the last
line of the paragraph above them. */
.panel,.callout--block{margin-top:52px}
.tbl-wrap.sub{margin-top:22px}
/* The two harbour pictures are 1400x930 and 1024x699, so at equal column
widths they ended a few pixels apart and the labels beneath them sat on
different lines. One ratio for both. */
.duo figure img{aspect-ratio:16/10;object-fit:cover;width:100%}
/* A number beside a heading rather than above it, for the callout. */
.slabel--head{align-items:baseline;gap:14px}
.slabel--head h3{margin:0;font-size:21px;line-height:1.3}
/* The row name is the card's title on a phone. It was keeping the cell padding
the stacked layout removes from every other cell, so it sat indented inside
its own card. */
@media (max-width:760px){
.tbl tbody th{padding-left:0;padding-right:0}
/* the band hero's h1 sits directly on its deck: the 0 bottom margin is there
for the homepage, whose h1 is followed by buttons with their own gap */
.hero--band h1{margin-bottom:14px}
}
/* A three-column table in a half-width column wraps its first cell onto two
lines. Let that table's row names set their own width — ON DESKTOP ONLY.
Below 760 the row name becomes the card's title, and a nowrap title cannot
wrap: "Will the site make construction more difficult or expensive?" ran
straight off the side of its card and was cut off. The harness reported no
overflow and no clipped text, because the overflow was inside the card. */
@media (min-width:761px){
.tbl--auto tbody th{width:auto;white-space:nowrap}
}
/* The Strand's opening line is prose, so it takes the reading measure rather
than the full 1100px content width. */
.measure{max-width:var(--measure)}
/* A card's number stands alone above its name. */
.card > .num{font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:.14em;
color:var(--gold);opacity:.75;margin:0 0 4px}
/* ---- new construction ------------------------------------------------- */
/* The list of everything a fair cost comparison has to include. Nine short
items; a bulleted column would run longer than the prose beside it. */
/* 2026-09-12. This styled li, and every .chips in the site emits . The
result was a run of unstyled links with the number welded to the name:
"01Sand Section 02Tree Section". */
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:baseline;gap:9px;
font-family:var(--ui);font-size:13.5px;line-height:1.3;padding:11px 16px;
border:1px solid rgba(7,24,47,.16);border-radius:3px;background:var(--foam);
color:var(--ink);text-decoration:none}
.chips a:hover{border-color:var(--gold);color:var(--ocean)}
.chips a b{font-size:11px;font-weight:600;letter-spacing:.11em;color:var(--gold);
font-variant-numeric:tabular-nums}
.chips a span{font-family:var(--read);font-size:15.5px}
.section--night .chips a{background:rgba(255,253,250,.05);
border-color:rgba(255,253,250,.2);color:rgba(255,253,250,.9)}
.chips li{font-family:var(--ui);font-size:12.5px;line-height:1.3;padding:8px 13px;
border:1px solid var(--line-2);border-radius:999px;color:var(--copy)}
.section--night .chips li{border-color:rgba(255,253,250,.22);color:rgba(255,253,250,.86)}
/* The buyer questions arrive in three named groups on this page, so each group
needs a heading between the lists rather than one run of eighteen. */
.group-label{margin-top:38px;margin-bottom:14px}
.flow > .group-label:first-of-type{margin-top:30px}
.section--night .group-label{color:var(--gold-lt);opacity:.85}
/* A four-up card whose body is one sentence under a label. */
.cards--4 .card .eyebrow{margin-bottom:7px}
.cards--4 .card p{font-size:14.5px;line-height:1.6}
/* The pull quote under the new-construction intro is a direct child of .wrap,
so it gets no rhythm from .flow and sat on the paragraph above it. */
.section > .wrap > .callout{margin-top:30px}
/* ---- about, privacy, 404 ---------------------------------------------- */
/* The introduction video. A fixed ratio box so the page does not jump when the
iframe loads, and the same rounded corner as every other picture. */
.video-frame{margin:0;position:relative;aspect-ratio:16/9;border-radius:3px;overflow:hidden;
background:var(--night)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* A privacy policy is a long run of short headings over short paragraphs. It
needs tighter rhythm and smaller headings than an editorial page, or it reads
as forty separate sections. */
.legal-copy h2{font-family:var(--ui);font-size:15px;font-weight:600;letter-spacing:.01em;
color:var(--ink);margin-top:34px}
.legal-copy > .wrap > *:first-child{margin-top:0}
.legal-copy p,.legal-copy li{font-size:15.5px;line-height:1.66}
.legal-copy ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.legal-copy .flow > h2 + p{margin-top:9px}
/* The about hero is a portrait beside a name on the night ground. */
.page-about .section--night .split figure img{max-height:520px}
/* A short fact list beside a portrait: label left, value right, one rule
between each. Not a table — there is only one record. */
.facts{margin:26px 0 0;display:grid;grid-template-columns:130px 1fr;
column-gap:24px;row-gap:0;font-family:var(--ui);font-size:13.5px;line-height:1.5}
.facts dt{grid-column:1;padding:13px 0;letter-spacing:.1em;text-transform:uppercase;
font-size:10.5px;font-weight:600;color:var(--mute-2);border-top:1px solid var(--line-dk)}
.facts dd{grid-column:2;margin:0;padding:13px 0;border-top:1px solid var(--line-dk)}
.facts dt:first-of-type,.facts dd:first-of-type{border-top:0}
.section--night .facts dd{color:rgba(255,253,250,.9)}
.section--night .facts dt{color:rgba(255,253,250,.5)}
@media (max-width:760px){
.facts{grid-template-columns:1fr;row-gap:0}
.facts dt{grid-column:1;padding-bottom:2px;border-top:1px solid var(--line-dk)}
.facts dd{grid-column:1;padding-top:0;border-top:0}
}
/* The dark panel's heading needs air before its paragraph, and its prose still
takes a reading measure rather than the full content width. */
.panel--night h3{margin-bottom:14px}
.panel--night > p{max-width:var(--measure)}
/* The video sits under its heading at a readable width rather than beside an
empty column. */
.video-frame{max-width:840px}
/* An ocean-blue link is unreadable on the night ground — the phone number in
the About fact list was rendering in the body link colour against navy. */
.section--night a,.panel--night a{color:var(--gold-lt)}
.section--night a:hover,.panel--night a:hover{color:var(--gold-pale)}
/* A title section immediately followed by its own body stacked two lots of
section padding and left a dead gap under the heading. */
.section--tight + .section--tight{padding-top:0}
/* A page whose title is not in a hero band — the thirteen neighborhood pages.
Without this h1 inherited the h2 scale and the page title read smaller than
the section heading below it. */
.section h1{font-size:46px;line-height:1.1;margin:0 0 6px}
.section h1 + .lede{font-size:19px;color:var(--copy)}
.split > .flow{align-self:center}
@media (max-width:760px){ .section h1{font-size:32px} }
/* The contact line under the two buttons. Unstyled it inherited .micro's
uppercase letter-spacing and sat jammed against the buttons looking like
debris left behind by the build. */
.cta__actions .micro{display:block;margin-top:14px;text-transform:none;
letter-spacing:0;font-size:13.5px;color:var(--mute-2);line-height:1.6}
.cta__actions .micro a{color:var(--mute-2);text-decoration:none}
.cta__actions .micro a + a{margin-left:14px}
.cta__actions .micro a:hover{color:var(--ocean)}
/* The browser's own figure{margin:1em 40px} was still reaching figures that sit
in the reading flow, so photographs and maps started 40px right of the text
above them. Only the ones inside specific layout wrappers had been zeroed. */
.read figure,.flow > figure,.section figure{margin:26px 0}
.read figure img,.flow > figure img{display:block;width:100%;height:auto;border-radius:3px}
.read figure figcaption,.flow > figure figcaption{font-family:var(--ui);font-size:12.5px;
color:var(--mute-2);margin-top:10px;line-height:1.45}
.cards figure,.split figure,.duo figure,.card figure,.panel figure{margin:0}
/* The fourth city card's link ran past the card edge because the grid column
was narrower than the link text. */
.cards--4 .card a{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* Table footnotes were 11px at .42 opacity — effectively invisible. */
.tbl-wrap + .note,.note{font-family:var(--ui);font-size:13px;line-height:1.6;
color:var(--mute-2);margin-top:14px}
/* A tall photograph in the reading column, capped so a headshot reads as a
portrait beside the copy rather than a poster-sized face. */
.figure--portrait{max-width:330px}
/* ...but not inside a photo grid, where the cap made one cell narrower than
the other two and broke the row. */
.cards .figure--portrait{max-width:none}
.figure--portrait img{width:100%;height:auto}
@media (max-width:560px){ .figure--portrait{max-width:100%} }
/* 2026-09-17 — full-size read, fix pass.
A card's exit label is set text-wrap:nowrap so the arrow stays with the
words. In the four-up city grid the longest label ("Explore Beyond the
Beach") is wider than the card, so there it has to be allowed to wrap. */
.cards--4 .more{text-wrap:wrap}
/* A photo row that follows the reading column inside the same band was
butting straight up against the last line of text. */
.read + .wrap > .cards{margin-top:32px}
/* 2026-09-17 — Steve. Six photographs are smaller than the box the layout was
giving them, so the browser was enlarging them and they read as blurry. No
better originals exist, so the boxes are capped to what each picture can
actually fill. */
/* The four city cards are made from 512px squares. Two-up holds to 560px so a
card photo is never asked to be wider than about 518px. */
@media (max-width:560px){
.cards--4{grid-template-columns:1fr}
}
/* The paddler is a 500px picture. Above the 1080 breakpoint it sits in a
445px column and is fine; below it the column goes full width and the
picture was being stretched to 920px. */
img[src*="sup-paddle"]{max-width:500px;margin-inline:auto}
/* Headings were breaking mid-phrase ("West Torrance: close to the / Beach
Cities without living in one"). Balancing the lines splits them where the
sense does. */
h1,h2,h3,.hero__deck,.lede{text-wrap:balance}
/* A heading does not need the reading measure — that limit exists so a line of
body text stays short enough to scan. Holding headings to 640px was forcing
two lines and breaking them after small words ("close to the / Beach Cities",
"Beach, Parks & / Recreation"). They get their own, wider measure; balance
above then tidies whatever still has to wrap. */
:root{--measure-head:900px}
.read > h1,.read > h2,.read > h3,
.wrap.read > h1,.wrap.read > h2,.wrap.read > h3,
.section > h1,.section > h2,.flow > h2,.flow > h3{max-width:var(--measure-head)}
/* Below 1080 the two-column bands stack and a figure inherits the full column,
which was enlarging several photographs past their own pixel width (the
headshot, the surfing and construction shots). Capping the figure at 720px
— the narrowest of those originals — keeps every one of them at or below
1:1, and only slightly reduces the larger pictures. */
@media (max-width:1080px){
.read figure img,.flow > figure img,.section figure img{max-width:720px;margin-inline:auto}
}
/* This 512px square also fills a two-up card on the Hermosa page. */
.cards img[src*="02_Hermosa_Beach"]{max-width:512px;margin-inline:auto}
/* 2026-09-17 — phone-width read.
The demand chart's legend is pinned to the top-right of its panel, which put
it on top of the panel heading once the heading needed the full width. Below
640px it drops into the flow under the chart, where a legend reads fine. */
@media (max-width:640px){
/* market-scoped.css loads after this file and pins the key with the same
specificity, so this rule is written through the widget's id to win. */
#bcl-wgs .chart-key{position:static;justify-content:flex-end;
margin-top:8px;font-size:9px}
}
/* 2026-09-17 — Steve. An anchor landed its heading underneath the sticky
navigator, so a jump link showed the middle of a paragraph. The bar runs to
about 142px on the page with the longest labels, so the offset clears that.
Below 760px the navigator is static and only a little breathing room is
wanted. */
section[id],h1[id],h2[id],h3[id]{scroll-margin-top:90px}
@media (max-width:760px){
section[id],h1[id],h2[id],h3[id]{scroll-margin-top:24px}
}
/* 2026-09-17 — with full-length labels the phone navigator ran to 563px on the
longest page, which is most of a screen before any content. It is capped and
scrolls within itself instead. */
@media (max-width:760px){
.navigator ul{max-height:232px;overflow-y:auto;-webkit-overflow-scrolling:touch}
}
/* A school's grade range and address sat in the reading size and read as a
stray sentence under the name. It is a detail line. */
.school-meta{font-family:var(--ui);font-size:13px;line-height:1.55;color:var(--muted,#6b7785);margin-top:-4px}