/* ============================================================================
ONE GROUND (September 18, 2026)
Loaded on every page EXCEPT the homepage, after every other stylesheet.
Scoped to body.one-ground so it can never reach index.html by accident.
WHY. Joseph found the interior pages "blockish" and asked whether one colour
for the whole page would be cleaner, redesigned on what the top sites do.
A survey of Facet, Rivertree and AllStreet showed the same thing three times:
one ground colour for the whole page, structure carried by contained objects
and hairlines, dark reserved for an object or the close. His own tax-planning
page already had that shape, which is why he loved it.
THE SYSTEM, in one paragraph. Every non-home page sits on the editorial cream
#fcfcf9 from top to bottom. Text-only heroes are light, in the service-lead
scale, with the navy V mark on the right where there is no photo or object.
Sections are separated by warm hairlines (#e0d7c6) and spacing, never by a
colour band. Things that are genuinely objects stay objects: the pricing
calculator, the calculator result panels and the process calendar are navy;
media shells and post cards are white with a warm hairline. Secondary text is
the site's own navy-grey #4a5568 everywhere, replacing the green-grey the
service system introduced. The navy banner and footer close every page.
WHAT THIS FILE DOES NOT DO. It does not touch the homepage, the nav, the
footer, the fit-quiz overlay or the mobile drawer. It does not change copy or
markup. Remove the and the body class and every page is back where it
was; nothing else depends on it.
============================================================================ */
/* ---- 1. The ground ------------------------------------------------------- */
.one-ground{
--page-ground:#fcfcf9;
--frame-ground:transparent;
--frame-line:transparent;
--frame-padding:0;
--frame-gutter:96px;
--frame-width:1220px;
--reading-rule:#e0d7c6;
--og-rule:#e0d7c6;
--og-rule-strong:#d8ceba;
--og-muted:#4a5568;
background:#fcfcf9;
}
.one-ground main{background:#fcfcf9}
.one-ground main>section,
.one-ground .page-hero:not(.has-img),
.one-ground .sec-dark,
.one-ground .process-journey,
.one-ground.service-editorial main>.service-example,
.one-ground.service-editorial main>.service-explorer,
.one-ground.service-readable main>.service-questions,
.one-ground.service-readable main>.service-related,
.one-ground.service-readable main>.service-more{background:#fcfcf9!important}
/* ---- 2. Text-only heroes: light, editorial scale, V mark on the right ----- */
.one-ground .page-hero:not(.has-img){color:#0c1a2d;padding:150px 0 56px}
.one-ground .page-hero:not(.has-img) h1,.one-ground .page-hero:not(.has-img) .crumb a{color:#0c1a2d}
.one-ground .page-hero:not(.has-img) h1{font-size:clamp(44px,4.5vw,64px);line-height:1.08;letter-spacing:-.02em;max-width:620px}
.one-ground .page-hero:not(.has-img) p,.one-ground .page-hero:not(.has-img) .post-meta,.one-ground .page-hero:not(.has-img) .post-meta span{color:var(--og-muted)}
.one-ground .page-hero:not(.has-img) .wrap>p:not(.eyebrow){font-size:19px;line-height:1.7;max-width:44ch}
.one-ground .page-hero:not(.has-img) .eyebrow{color:#7d5f33}
/* The V watermark is OFF on every non-home page (Joseph, Sept 19: "get the logo
off the service page and any other page it's on, it looks weird"). It was a
light mark on a navy hero; on the cream ground it read as a second logo
competing with the one in the nav. The markup stays in place, unstyled and
hidden, so nothing else has to change. The homepage is untouched. */
.one-ground .page-hero .wm{display:none}
/* Article covers (.post-hero.has-img) are already inset photo objects on the
ground, Rivertree's inset-block pattern. They keep their navy scrim and their
light text; nothing above applies to them. The 404 page is a one-screen navy
splash and is deliberately not given the one-ground class at all. */
.one-ground .post-hero.has-img .wm{display:none}
/* ---- 3. Interior frames dissolve into the ground -------------------------- */
.one-ground.interior-framed main>section>.wrap,
.one-ground.interior-framed .pricing-frame,
.one-ground.interior-framed .calc,
.one-ground.interior-framed.utility-framed main{background:transparent;border-color:transparent;box-shadow:none}
.one-ground.interior-framed.refined main>section{padding:0 0 64px}
.one-ground.interior-framed.refined main>section:last-of-type{padding-bottom:88px}
.one-ground.interior-framed .calc,.one-ground.interior-framed .calc:last-child{padding:64px 0;border:0;border-bottom:1px solid var(--og-rule)}
.one-ground.interior-framed .calc:last-child{border-bottom:0}
.one-ground .calc input{background:#fff;border-color:var(--og-rule-strong)}
.one-ground .calc-jumps{margin-left:0;margin-right:0}
.one-ground .calc-note{padding:0}
.one-ground.interior-framed .pcard,.one-ground .pcard{background:#fff;border:1px solid var(--og-rule)}
.one-ground.interior-framed .takeaways,.one-ground .takeaways{background:#fff;border:1px solid var(--og-rule)}
/* ---- 4. Former dark sections become sections ------------------------------ */
.one-ground .sec-dark h2{color:#0c1a2d}
.one-ground .sec-dark .eyebrow{color:#7d5f33}
.one-ground .sec-dark p{color:var(--og-muted)}
.one-ground .sec-dark [class*="handle"],.one-ground .sec-dark .x-handle{color:#7d5f33}
/* insights.html sets the @josephinvests handle to raw gold in an inline style attribute,
which was fine on navy and is 1.9:1 on cream. Inline beats the sheet, hence !important. */
.one-ground .sec-dark p[style*="d7b486"]{color:#7d5f33!important}
.one-ground .sec-dark>.wrap{border-top:1px solid var(--og-rule);padding-top:64px}
/* ---- 5. Service pages: sage system becomes the one-ground system ---------- */
.one-ground.service-editorial main p,
.one-ground.service-editorial main{--ink-soft:#4a5568;--gold-text:#7d5f33}
.one-ground.service-editorial main p{color:var(--og-muted)}
.one-ground.service-editorial .service-essential p,
.one-ground.service-editorial .service-long-copy p,
.one-ground.service-editorial .service-question p,
.one-ground.service-editorial .service-example-copy>p,
.one-ground.service-editorial .service-lead-copy>p{color:var(--og-muted)}
.one-ground.service-editorial .service-scope-note{color:var(--og-muted)}
.one-ground .service-overview>.wrap,
.one-ground .reading-links,
.one-ground .service-other-links{border-top-color:var(--og-rule)!important}
.one-ground .service-example>.wrap,
.one-ground .service-explorer>.wrap,
.one-ground .service-questions>.wrap{border-top:1px solid var(--og-rule);padding-top:48px}
.one-ground.service-readable main>.service-questions{padding:0 0 42px}
.one-ground.service-editorial main>.service-example{padding:0 0 64px}
.one-ground.service-editorial main>.service-explorer{padding:0 0 64px}
.one-ground.service-editorial .service-explorer>.wrap{padding-top:64px}
.one-ground .service-expander,
.one-ground .service-expander:first-child,
.one-ground.service-editorial .service-question{border-color:var(--og-rule-strong)}
.one-ground .service-expander>summary>svg,
.one-ground .service-question>summary>svg{color:#6f695c}
.one-ground .service-text-link{border-bottom-color:#bcae93}
.one-ground .service-back{border-bottom-color:#c0b49a}
.one-ground .service-other-links>a{color:#5c584e}
.one-ground .service-lead-media figcaption,
.one-ground.service-editorial .planning-visual>figcaption,
.one-ground.service-editorial .planning-visual-placeholder>small{color:#6f695c}
.one-ground .service-demo-shell,.one-ground .planning-video{background:#fff;border-color:var(--og-rule-strong)}
.one-ground .service-demo-video,.one-ground .planning-video img{background:#fff}
.one-ground.service-editorial .planning-visual-placeholder{background:#fff;border-color:#cdbfa5}
.one-ground.service-editorial .planning-visual-placeholder>svg{color:#6f695c}
.one-ground .pe-item{border-bottom-color:var(--og-rule)}
.one-ground.service-editorial .pe-item[open]{background:#fff;box-shadow:inset 2px 0 #0c1a2d}
.one-ground .service-media-controls a:hover{border-bottom-color:#bcae93}
.one-ground.service-editorial .service-long-copy .d-list li::before{background:#ad8a58}
/* ---- 6. Process page ----------------------------------------------------- */
.one-ground .process-journey{background:#fcfcf9}
.one-ground .service-calendar{border-color:#0c1a2d}
.one-ground .planning-sample-link{border-color:var(--og-rule)}
.one-ground .planning-sample>img{border-color:var(--og-rule)}
.one-ground .planning-extra{border-color:var(--og-rule)}
/* Process page, Sept 19 2026: four steps across the page. Joseph: "keep it super simple ...
doesn't need to be visual", then "horizontal so it flows across the page". The hairline on
each step is the track; the number is the only ornament. Section 10 supplies the rhythm. */
.process-steps-head{max-width:640px;margin:0 0 44px}
.process-steps-head h2{font-family:"General Sans",Arial,sans-serif;font-size:30px;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:#0c1a2d;margin:0 0 14px;text-wrap:balance}
.process-steps-head p{font-size:17px;line-height:1.7;color:#4a5568;margin:0}
.process-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px}
.process-flow>li{border-top:2px solid var(--og-rule-strong);padding-top:20px}
.process-flow .process-num{display:block;font-family:"General Sans",Arial,sans-serif;font-size:12px;font-weight:600;letter-spacing:.18em;color:#7d5f33;margin:0 0 16px}
.process-flow h3{font-family:"General Sans",Arial,sans-serif;font-size:21px;font-weight:500;line-height:1.3;letter-spacing:-.01em;color:#0c1a2d;margin:0 0 12px}
.process-flow p{font-size:15.5px;line-height:1.75;color:#4a5568;margin:0}
@media(max-width:1100px){.process-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 40px}}
@media(max-width:640px){.process-steps-head{margin-bottom:32px}.process-steps-head h2{font-size:26px}.process-flow{grid-template-columns:1fr;gap:26px}.process-flow p{font-size:16px}}
/* ---- 7. Utility pages ---------------------------------------------------- */
.one-ground.utility-framed main{padding:0}
.one-ground.privacy-framed main{max-width:880px}
/* ---- 8. Phone ------------------------------------------------------------ */
@media(max-width:1000px){
.one-ground{--frame-gutter:48px}
.one-ground .page-hero:not(.has-img){padding:118px 0 40px}
.one-ground.interior-framed.refined main>section{padding:0 0 64px}
.one-ground.interior-framed .calc,.one-ground.interior-framed .calc:last-child{padding:44px 0 48px}
.one-ground .service-example>.wrap,
.one-ground .service-explorer>.wrap,
.one-ground .service-questions>.wrap,
.one-ground .sec-dark>.wrap{padding-top:52px}
}
@media(max-width:760px){
.one-ground .page-hero:not(.has-img) h1{font-size:43px;max-width:16ch}
.one-ground .page-hero:not(.has-img) .wrap>p{font-size:17px}
}
/* ---- 9. Articulation: how sections are told apart WITHOUT colour ----------
Joseph, Sept 18: "there's still ways to break the sections of the page up not
needing to use color blocks. What are those?" They are the devices the service
pages already use, now applied everywhere:
a. one warm hairline opens every content section (never a band)
b. the reading grid: a short label on the left, the content on the right,
which also narrows accordions to a readable measure
c. one accordion vocabulary: 19px/500 rows, CSS-drawn plus, hairlines
d. objects for tools and media; eyebrows for category; space for rhythm
The About page keeps its single centred column (owner decision, Aug 30) and
gets hairlines between its blocks only. Process keeps its own numbered rail. */
/* a. every content section opens with one hairline */
.one-ground:not(.service-editorial):not(.about-refined) main>section>.wrap{border-top:1px solid var(--og-rule);padding-top:64px}
.one-ground .page-hero:not(.has-img){padding-bottom:64px}
.one-ground .portal-help{border-top:1px solid var(--og-rule);padding-top:48px;margin-top:56px}
.one-ground .bio-block{border-top:1px solid var(--og-rule);padding-top:36px}
/* b. the reading grid, the service pages' .service-reading-grid measured exactly */
.one-ground .og-grid,
.one-ground .blog-library{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:92px;align-items:start}
.one-ground .og-grid>h2,
.one-ground .blog-library>h2{font-family:"General Sans",Arial,sans-serif;font-weight:500;font-size:28px;line-height:1.28;letter-spacing:-.015em;padding-top:17px;margin:0 0 24px;color:#0c1a2d;max-width:12ch}
.one-ground .blog-library{border-top:1px solid var(--og-rule);padding-top:64px;margin-top:64px}
.one-ground .blog-section{border-top:1px solid var(--og-rule);padding-top:64px;margin-top:64px}
/* c. one accordion vocabulary: faq.html's .faq-item joins .service-question */
.one-ground .faq-item{border-bottom:1px solid var(--og-rule-strong)}
.one-ground .og-list>.faq-item:first-child{border-top:1px solid var(--og-rule-strong)}
.one-ground .faq-item button{position:relative;font-size:19px;font-weight:500;letter-spacing:0;line-height:1.5;padding:22px 32px 22px 0;min-height:74px;color:#0c1a2d}
.one-ground .faq-item button::before,
.one-ground .faq-item button::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:1.5px;background:#0c1a2d;transform:none}
.one-ground .faq-item button::after{transform:rotate(90deg);transition:transform .2s}
.one-ground .faq-item.open button::after{transform:rotate(0)}
.one-ground .faq-body p{font-size:16px;line-height:1.85;color:var(--og-muted);max-width:66ch}
.one-ground .blog-topic,.one-ground .blog-topic:last-child,.one-ground .blog-topic li a{border-color:var(--og-rule-strong)}
@media(max-width:1100px){
.one-ground .og-grid,.one-ground .blog-library{gap:56px;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
}
@media(max-width:760px){
.one-ground:not(.service-editorial):not(.about-refined) main>section>.wrap{padding-top:44px}
.one-ground .page-hero:not(.has-img){padding-bottom:40px}
.one-ground .og-grid,.one-ground .blog-library{grid-template-columns:minmax(0,1fr);gap:0}
.one-ground .og-grid>h2,.one-ground .blog-library>h2{padding-top:0;margin-bottom:18px;font-size:27px}
.one-ground .blog-library,.one-ground .blog-section{padding-top:44px;margin-top:56px}
.one-ground .faq-item button{font-size:17px;padding:20px 30px 20px 0;min-height:66px}
.one-ground .bio-block{padding-top:28px}
}
/* ---- 10. Rhythm on one ground (Sept 19, 2026) -----------------------------
Joseph: "us switching to a single color background created a lot of areas
where things can be tightened up." On coloured bands a 132px section
padding read as a chapter break; on one ground it reads as dead air. The
rule now is one measure everywhere: content, 64px, hairline, 64px, content.
Before the navy banner, 88px. Every section padding-top is 0 because the
hairline wrap carries the 64px below the line; the section's padding-bottom
carries the 64px above the next line. */
.one-ground:not(.service-editorial) main>section{padding-top:0;padding-bottom:64px}
.one-ground:not(.service-editorial) main>section:last-of-type{padding-bottom:88px}
.one-ground.service-editorial main>.service-lead{padding-bottom:64px}
.one-ground.service-editorial main>.service-actions-section{padding-bottom:64px}
.one-ground.service-editorial main>.service-reading{padding-top:0;padding-bottom:0}
.one-ground.service-editorial .service-reading .service-reading-grid{padding-top:48px}
.one-ground.service-editorial main>.service-related,
.one-ground.service-editorial main>.service-more{padding-bottom:88px}
@media(max-width:1000px){
.one-ground:not(.service-editorial) main>section{padding-bottom:48px}
.one-ground:not(.service-editorial) main>section:last-of-type{padding-bottom:64px}
.one-ground.service-editorial main>.service-lead,
.one-ground.service-editorial main>.service-actions-section{padding-bottom:48px}
.one-ground.service-editorial .service-reading .service-reading-grid,
.one-ground .service-questions>.wrap{padding-top:36px}
.one-ground.service-editorial main>.service-related,
.one-ground.service-editorial main>.service-more{padding-bottom:64px}
}
/* ---- 11. One vocabulary across the two page families (Sept 19, 2026) ------
The interior pages (page-hero) and the service pages (service-lead) were
two systems that a visitor experiences as one site. Measured by computed
style on every page and brought to one set of values. */
/* hero */
.one-ground .page-hero:not(.has-img) .eyebrow{font-size:14px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#7d5f33;margin:0 0 18px}
.one-ground.service-editorial .service-lead-copy h1{font-size:clamp(44px,4.5vw,64px);line-height:1.08;letter-spacing:-.02em;max-width:620px}
.one-ground.service-editorial .service-lead-copy>p{font-size:19px;line-height:1.7;color:#4a5568;max-width:42ch}
/* section headings on the interior pages: one serif size everywhere */
.one-ground .login-sec h2,
.one-ground .meeting-panel h2,
.one-ground .calc h2,
.one-ground.insights-page main section h2,
.one-ground .blog-feature h2,
.one-ground .blog-section>h2{font-family:"Editor's Note",Lora,Georgia,serif;font-weight:300;font-size:clamp(32px,3vw,42px);line-height:1.15;letter-spacing:-.02em}
/* section eyebrows: one size, one colour */
.one-ground main section .eyebrow,
.one-ground main .eyebrow:not(.page-hero .eyebrow){font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#7d5f33}
/* every hairline on the ground is the warm rule; the cool greys were the old neutral */
.one-ground .calc-jumps,.one-ground .calc-support,.one-ground .chart-table,.one-ground .chart-table th,
.one-ground .vid,.one-ground .meeting-panel,.one-ground .login-sec li,
.one-ground .post-author,.one-ground .post-disc,.one-ground .post-side .toc a,.one-ground .pe-bottom{border-color:var(--og-rule)}
.one-ground .cred-more,.one-ground .cm{border-color:var(--og-rule-strong)}
/* one caption colour, one accordion weight */
.one-ground main figcaption,
.one-ground.service-editorial .planning-visual>figcaption,
.one-ground .service-lead-media figcaption{color:#4a5568}
.one-ground .cm>summary{font-weight:500}
/* eyebrows that sit inside a navy object keep their gold-on-navy */
.one-ground .service-calendar .eyebrow,.one-ground .journey-guide .eyebrow,.one-ground .fee-calc-panel .eyebrow,.one-ground .banner .eyebrow{color:#d7b486}
@media(max-width:760px){
.one-ground .page-hero:not(.has-img) .eyebrow{font-size:12px;margin-bottom:14px}
.one-ground .page-hero:not(.has-img) .wrap>p:not(.eyebrow),
.one-ground.service-editorial .service-lead-copy>p{font-size:17px}
}
/* ---- 12. The blog index without photographs (Sept 19, 2026) ---------------
Joseph: "get rid of all images on the blog page, they dont need them,
structure it so its beautiful even without the images." The index is now
one reading grid, three rows: Start here, Latest, Browse guides by topic.
A label on the left, the content on the right, one hairline between rows.
The feature keeps the page's one large serif moment; the six latest guides
are a hairline list, the same object as the topic library beneath them. */
.one-ground .blog-feature,
.one-ground .blog-recent{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:92px;align-items:start}
.one-ground .blog-feature{margin:0;color:#0c1a2d;text-decoration:none}
.one-ground .blog-label,
.one-ground .blog-recent>.blog-aside>h2{display:block;font-family:"General Sans",Arial,sans-serif;font-weight:500;font-size:28px;line-height:1.28;letter-spacing:-.015em;padding-top:17px;margin:0 0 24px;color:#0c1a2d;max-width:12ch}
.one-ground .blog-feature-body{display:block;min-width:0}
.one-ground .blog-feature .eyebrow{display:block;margin:0 0 18px}
.one-ground .blog-feature h2{font-size:clamp(34px,3.6vw,50px);line-height:1.1;letter-spacing:-.02em;margin:0 0 22px;max-width:16ch;color:#0c1a2d}
.one-ground .blog-feature p:not(.eyebrow){font-size:17px;line-height:1.75;color:#4a5568;max-width:56ch;margin:0}
.one-ground .blog-feature .feature-link{display:inline-flex;align-items:center;gap:7px;margin-top:26px;font-size:14px;font-weight:500;color:#0c1a2d;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#d8ceba;transition:text-decoration-color .2s}
.one-ground .blog-feature:hover .feature-link{text-decoration-color:#0c1a2d}
/* the latest six: a hairline list in the right column, the topic jump links in the left */
.one-ground .blog-aside{min-width:0}
/* a div with role=navigation, not