/* =====================================================================
BOHO LAYER - "Clay & Sage" design for Steven Taylor Photography (Oct 29, 2026)
---------------------------------------------------------------------
Approved look (full-width hero, straight-edged photos, NO arches and NO
leaf/foliage decoration anywhere). First built as a mockup in
design-preview/boho-2026-10/, now carried across the FULL site preview in
design-preview/full-2026-10/ (section B10 at the end is the site-wide part).
Loaded AFTER css/style.css (see includes/header.php), so every rule
here only OVERRIDES the live design. Remove the to boho.css and
the site is back to "Ember & Espresso".
WHY: Steven finds the near-black espresso + burnt orange "a little on
the edge". He likes the brown and the boho look couples are pinning.
So: cream/sand paper, terracotta clay accent, sage second accent, a
warm mid-brown (walnut) for the few dark areas, softer shapes.
HOW THIS FILE IS ORGANISED
B1. Palette tokens (re-maps the old token names + adds new ones)
B2. Type (Cormorant Garamond + Jost + a tiny Caveat accent)
B3. Paper grain + base
B4. Buttons (soft rounded, sentence case)
B5. Logo lockup (signature fully visible, one solid colour)
B6. Photo frames (v2: straight edges, no arches, no botanical lines)
B7. Home hero (v2: live full-bleed hero, warm re-colour)
B8. Places line, intro, grid, quotes, night, steps, pricing, CTA
B9. Site-wide fixes found in the review (drop cap, footer, sticky CTA)
B10. Full-site preview: every page + template (hero H1 split, footer
4 columns, contact form, portfolio, pricing, venues, new pages)
CONTRAST (WCAG 2.1, checked with a script, ratio : 1):
ink #3E2C22 on cream #F7F1E8 11.78 | on sand #EADFCF 10.05
muted #6B5A4E on cream 5.85 | on sand 4.99 (AA body text)
clay-deep #9A4F2E on cream 5.30 | on sand 4.52 (AA small text)
white on clay-deep 5.95 | cream on clay-deep 5.30 (buttons, AA)
sage-deep #56664B on cream 5.50 | on sand 4.70 (AA small text)
cream on walnut #5B4334 8.14 | honey #E9CF9F on walnut 6.05
cream on ink 11.78 | honey on ink 8.75 (night band)
clay #B4673F on cream 3.78 -> decorative / large text (>=24px) only
sage #9AA88A on cream 2.24 -> decorative lines/shapes only, never text
===================================================================== */
/* ---------- B1. Palette tokens ---------- */
:root {
/* New names (use these in new code) */
--cream: #F7F1E8; /* main background, warm natural cream */
--sand: #EADFCF; /* alternate section background */
--linen: #FCF9F4; /* cards, form fields */
--ink: #3E2C22; /* main text: deep warm brown, softer than near-black */
--walnut: #5B4334; /* warm mid-brown: footer, "most popular" card */
--clay: #B4673F; /* terracotta accent: decorative + large text only */
--clay-deep: #9A4F2E; /* terracotta for small text, links, buttons */
--sage: #9AA88A; /* second accent: hairlines, step circles (decor only) */
--sage-deep: #56664B; /* sage dark enough for small text */
--sage-mist: #DDE3D3; /* pale sage tint for tags / highlights */
--honey: #E9CF9F; /* soft gold on walnut / ink */
/* Old token names re-mapped, so every page in style.css shifts at once */
--paper: var(--cream);
--paper-2: var(--sand);
--espresso: var(--ink); /* was #1C1410 */
--cocoa: var(--walnut);
--ember: var(--clay); /* was #C4552B */
--ember-deep: var(--clay-deep); /* was #A2431F */
--ember-glow: var(--honey); /* accents on dark now honey, not orange */
--butter: var(--honey);
--muted: #6B5A4E;
--muted-dark: #E3D6C6; /* secondary text on walnut (6.4) / ink */
--line: rgba(62, 44, 34, 0.14);
--line-dark: rgba(247, 241, 232, 0.18);
/* Fonts */
--font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
--font-text: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-script: "Caveat", "Segoe Print", cursive; /* tiny touches only */
/* Softer shapes */
--radius: 14px; /* cards, inputs (was 4px) */
--radius-lg: 22px; /* cards only (photos use --radius-photo, 4px, like live) */
--header-h: 78px;
}
/* ---------- B2. Type ---------- */
body { font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.14rem); line-height: 1.7; } /* a touch bigger + airier for phones */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.04; letter-spacing: -0.005em; }
h2 em, h1 em, h3 em, .display em { color: var(--clay-deep); }
/* Eyebrow: sage hairline instead of an orange one, clay-deep text (5.3:1) */
.eyebrow { font-weight: 500; letter-spacing: 0.2em; color: var(--clay-deep); }
.eyebrow::before { background: var(--sage); height: 1.5px; }
/* The handwritten accent. Kept small on purpose: a hint, never a headline. */
.script-accent { font-family: var(--font-script); font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem); line-height: 1; color: var(--clay-deep); margin: 0 0 0.4rem; transform: rotate(-3deg); transform-origin: left; }
/* ---------- B3. Paper grain + base ---------- */
/* Faint paper texture: same tiny inline SVG noise, warmer and lighter (0.045 vs 0.06),
multiplied so it tints the cream instead of greying it. */
body::after { opacity: 0.045; mix-blend-mode: multiply; }
::selection { background: var(--sage-mist); color: var(--ink); }
:focus-visible { outline-color: var(--clay-deep); }
/* ---------- B4. Buttons ---------- */
/* Soft rounded rectangle (not a hard pill), sentence case instead of SHOUTY caps:
reads friendlier and calmer, which is the whole point of the boho shift. */
.btn, button[type="submit"] {
border-radius: var(--radius);
text-transform: none; letter-spacing: 0.01em;
font: 500 1.02rem/1 var(--font-text);
background: var(--clay-deep); border-color: var(--clay-deep); color: #fff;
box-shadow: 0 8px 20px -12px rgba(154, 79, 46, 0.7);
}
.btn:hover, button[type="submit"]:hover { background: var(--ink); border-color: var(--ink); }
.btn--small { font-size: 0.92rem; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(62,44,34,0.55); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--light { background: var(--cream); color: var(--ink); border-color: var(--cream); box-shadow: none; }
.btn--light:hover { background: var(--honey); border-color: var(--honey); }
/* Text links: underline in sage, and a real 44px tap height without changing the look
(review: "See the work", "How it works" links were 29-32px tall). */
.link { display: inline-block; background-image: linear-gradient(var(--sage), var(--sage)); background-size: 100% 2px;
padding-block: 0.7rem 0.35rem; background-position: 0 calc(100% - 0.3rem); }
/* ---------- B5. Logo lockup ---------- */
/* Signature on its own row, FULL opacity, nothing on top of it, nothing clipping it.
One solid colour: "color" feeds fill="currentColor" in signature.svg. */
.brand--stacked { display: grid; justify-items: center; gap: 0.15rem; padding: 0.35rem 0; overflow: visible; }
.brand--stacked .brand__signature {
position: static; transform: none; z-index: auto; /* no longer layered behind text */
width: 128px; opacity: 1; /* fully visible */
color: var(--ink); /* ONE solid colour, no gradient */
}
@media (min-width: 1081px) { .brand--stacked .brand__signature { width: 150px; } }
.brand--stacked .brand__sub { margin-top: 0; font-size: 0.58rem; font-weight: 500; letter-spacing: 0.38em; color: var(--clay-deep); opacity: 1; }
/* Override the old per-state tints so the signature is never faded */
.page--home .site-header:not(.is-solid) .brand__signature,
body.menu-open .brand__signature { opacity: 1; }
body.menu-open .brand--stacked .brand__signature { color: var(--cream); }
body.menu-open .brand--stacked .brand__sub { color: var(--honey); }
@media (max-width: 480px) { .brand--stacked .brand__signature { width: 112px; } .brand--stacked .brand__sub { font-size: 0.52rem; letter-spacing: 0.32em; } }
/* Header bar: cream */
.site-header::before { background: rgba(247, 241, 232, 0.92); }
.site-nav a:not(.btn) { font-weight: 500; letter-spacing: 0.14em; }
/* Mobile menu overlay: warm walnut, not near-black */
@media (max-width: 1080px) { .site-nav { background: var(--walnut); } .site-nav .btn { background: var(--cream); border-color: var(--cream); color: var(--ink); } }
/* ---------- B6. Photo frames (v2: straight edges, NO arches) ----------
v2, Oct 29 8 PM: Steven ruled out arch-topped frames and every leaf / sprig /
botanical line decoration. Photos are plain rectangles again with the same
small 4px corner as the live site (--radius-photo). Nothing else is drawn
around them: no outlines, no SVG plants. */
:root { --radius-photo: 4px; } /* live site's photo corner */
.bh-photo, .bh-portrait { position: relative; overflow: hidden; border-radius: var(--radius-photo); background: var(--sand); }
.bh-photo img, .bh-photo picture, .bh-portrait img, .bh-portrait picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.bh-portrait { width: min(46vw, 220px); aspect-ratio: 4 / 5; margin-bottom: 1.5rem; }
.bh-portrait img { object-position: 50% 20%; }
.bh-photo--portrait { aspect-ratio: 4 / 5; }
/* ---------- B7. Home hero (v2: the LIVE full-bleed hero, re-coloured) ----------
Steven preferred the old design with the large image at the top, so the
layout is style.css section 7 untouched (full-width photo, 100svh tall,
text over the bottom-left). Only colours change here:
- the near-black gradient becomes a soft WARM BROWN one (ink #3E2C22),
strong at the bottom-left where the text sits, clear over the faces;
- text cream, kicker + accent words + stars in honey.
Contrast where the text sits (gradient ~0.85 ink over a bright photo is
at least as dark as walnut): cream on walnut 8.14, honey on walnut 6.05. */
.bh-hero2 { background: var(--ink); color: var(--cream); }
.bh-hero2::before {
background:
/* top band: this photo is bright at the top (sunset), so the cream logo
and menu need a soft warm shade behind them to stay readable */
linear-gradient(to bottom, rgba(62,44,34,0.62) 0%, rgba(62,44,34,0.25) 14%, transparent 26%),
/* bottom: strong where the headline, buttons and trust line sit */
linear-gradient(to top, rgba(62,44,34,0.94) 0%, rgba(62,44,34,0.7) 32%, rgba(62,44,34,0.18) 58%, rgba(62,44,34,0) 74%),
/* left: extra shade behind the text column */
linear-gradient(to right, rgba(62,44,34,0.6) 0%, rgba(62,44,34,0.2) 42%, transparent 62%);
}
/* Cormorant is wider than the live Instrument Serif, so the live size (step-5,
max 14ch) wrapped to 4 lines and pushed the trust line off the first screen.
Slightly smaller display size + wider measure = 2 lines on desktop, 3 on phones. */
.bh-hero2 h1 { max-width: 22ch; margin-bottom: 1.1rem; }
.bh-hero2 .hero__display { font-size: clamp(2.7rem, 1.6rem + 3.6vw, 5.2rem); line-height: 0.98; }
/* "Unforgettable light." always on its own line (no orphaned "light." and the
italic stays left, clear of the couple's faces on wide screens) */
.bh-hero2 .hero__display em { display: block; }
.bh-hero2 .hero__text { margin-bottom: 1.5rem; }
.bh-hero2 .hero__trust { margin-top: 1.1rem; }
@media (max-width: 700px) {
/* Phones: keep the text block compact so the couple's faces stay clear above it */
.bh-hero2 .hero__content { padding-bottom: 1.75rem; }
.bh-hero2 .hero__kicker { margin-bottom: 0.8rem; }
.bh-hero2 .hero__text { font-size: 1.02rem; line-height: 1.55; }
.bh-hero2 .btn-row { flex-wrap: nowrap; gap: 0.6rem; }
.bh-hero2 .btn-row .btn { flex: 1 1 0; padding-inline: 0.8rem; justify-content: center; white-space: nowrap; }
.bh-hero2 .hero__trust { font-size: 0.82rem; }
}
/* Faces are centre-right in this photo: keep them in frame on narrow phones. */
.bh-hero2 .hero__media img { object-position: 52% 38%; }
.bh-hero2 .hero__kicker { color: var(--honey); font-weight: 500; }
.bh-hero2 .hero__display em, .bh-hero2 em { color: var(--honey); }
.bh-hero2 .hero__text { color: rgba(247,241,232,0.94); text-shadow: 0 1px 12px rgba(62,44,34,0.45); }
.bh-hero2 .hero__trust { color: rgba(247,241,232,0.92); font-weight: 500; }
.bh-hero2 .hero__trust .stars { color: var(--honey); }
/* Buttons over the photo: cream solid (ink text 11.78) + cream outline */
.bh-hero2 .btn--light { background: var(--cream); border-color: var(--cream); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.5); }
.bh-hero2 .btn--light:hover { background: var(--honey); border-color: var(--honey); }
.bh-hero2 .btn--ghost-light { background: transparent; box-shadow: none; border-radius: var(--radius); color: var(--cream); border-color: rgba(247,241,232,0.75); }
.bh-hero2 .btn--ghost-light:hover { background: var(--cream); color: var(--ink); }
/* Header while transparent over the hero: signature + menu in cream, sub-line honey.
Still ONE solid colour, full opacity, never cropped (logo rule). */
.page--home .site-header:not(.is-solid) .brand--stacked .brand__signature { color: var(--cream); opacity: 1; }
.page--home .site-header:not(.is-solid) .brand--stacked .brand__sub { color: var(--honey); }
/* The hero's own buttons stay visible, so main.js shows the sticky phone CTA only after it (live behaviour). */
/* ---------- B8. Home sections ---------- */
/* Places: one calm static line with sage diamonds (replaces the moving marquee) */
.bh-places { margin: 0; padding: 1.1rem var(--gutter); border-block: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.1rem;
font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem); font-style: italic; color: var(--ink); background: var(--cream); }
.bh-places span + span::before { content: "\25C6"; font-size: 0.45em; color: var(--sage); margin-right: 1.1rem; vertical-align: 0.35em; font-style: normal; }
/* Intro: small straight-edged portrait of Steven above the statement */
.bh-intro__left .intro__statement { font-size: clamp(2.6rem, 1.8rem + 3.6vw, 5rem); }
.reasons li::before { color: var(--sage-deep); }
/* Featured work grid: straight-edged photos with the live 4px corner (v2: no arches) */
.bh-grid .eg-media { border-radius: var(--radius-photo); }
.bh-sample-tag, .bh-sample-note { display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; background: var(--sage-mist); color: var(--sage-deep); padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: 0.3rem; }
.bh-sample-note { margin: 1.4rem 0 0; }
/* Quotes: first one featured across the full width, others in two columns */
@media (min-width: 900px) { .bh-quotes .quote:first-child { grid-column: 1 / -1; max-width: 62rem; } .bh-quotes .quote:first-child p { font-size: var(--step-3); line-height: 1.12; } }
.quote::before { color: var(--sage); }
.quote p { font-weight: 500; }
/* Night band: the ONE dark section, in deep warm ink (not black); clay badge */
.night.on-dark { background: var(--ink); }
.night__badge { background: var(--clay-deep); box-shadow: 0 16px 30px rgba(0,0,0,0.25); }
.night__strip img { border-radius: var(--radius-photo); }
/* Booking in 3 steps: cards become an open strip joined by a dashed sage line */
.bh-steps li { background: transparent; border: 0; padding: 0 0 0 4.4rem; }
.bh-steps li::before {
position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem; border-radius: 50%;
display: grid; place-items: center; font-size: 1.6rem; font-style: normal; margin: 0;
background: var(--sage-mist); color: var(--sage-deep); border: 1.5px solid var(--sage);
}
@media (min-width: 760px) {
.bh-steps { position: relative; }
.bh-steps::before { content: ""; position: absolute; left: 1.55rem; right: 12%; top: 1.55rem; border-top: 1.5px dashed var(--sage); }
.bh-steps li { padding: 4.6rem 1.5rem 0 0; }
}
/* Pricing teaser */
.bh-chooser { margin: -1.5rem 0 2.2rem; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--linen); border: 1px dashed var(--sage); max-width: 60rem; }
.bh-chooser__label { font-family: var(--font-script); font-size: 1.45rem; color: var(--clay-deep); margin-right: 0.5rem; } /* 2nd (and last) script use */
.package { background: var(--linen); border-radius: var(--radius-lg); }
.package li::before { background: var(--sage); height: 1.5px; }
/* Signature = warm walnut card with a clay ring: the anchor the eye goes to first */
.package.popular { background: var(--walnut); border-color: var(--walnut); box-shadow: 0 0 0 2px var(--sand), 0 0 0 4px var(--clay), 0 30px 60px -30px rgba(62,44,34,0.6); }
.package.popular li::before { background: var(--honey); }
.package__tag { background: var(--honey); color: var(--ink); } /* 8.75:1 (white on orange was 4.49) */
.bh-pullquote { margin: 3rem auto 0; max-width: 46rem; text-align: center; }
.bh-pullquote blockquote { margin: 0; }
.bh-pullquote p { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.25; margin: 0 0 0.6rem; }
.bh-pullquote figcaption { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.package-note { margin-top: 1.6rem; }
/* Final CTA: sand band + straight-edged photo, no dark overlay */
.bh-cta { background: var(--sand); }
.bh-cta__grid { display: grid; gap: 2.5rem; align-items: center; }
.bh-cta__media { width: min(80%, 380px); justify-self: center; }
.bh-cta h2 { font-size: var(--step-4); max-width: 12ch; }
.bh-cta .cta-band__small { margin-top: 1.4rem; font-size: var(--step--1); color: var(--muted); }
.bh-cta .cta-band__small a { color: var(--clay-deep); }
@media (min-width: 960px) { .bh-cta__grid { grid-template-columns: 0.8fr 1fr; gap: 6rem; } }
/* ---------- B9. Site-wide fixes found in the review ---------- */
/* Drop cap bug: on About, "11+ years" became a giant "1" next to "1+ years".
Drop caps are switched off with .prose--plain (About, 404); blog posts keep them. */
.prose--plain > p:first-of-type::first-letter { float: none; font: inherit; color: inherit; padding: 0; line-height: inherit; }
/* Footer: warm walnut instead of near-black. The signature sits whole, in one solid colour. */
.site-footer { background: var(--walnut); }
.site-footer__sig { display: block; width: min(240px, 60vw); color: var(--honey); margin-bottom: 0.9rem; }
.site-footer__sig svg { width: 100%; height: auto; }
.site-footer__label { color: var(--honey); }
.site-footer a.btn--light { color: var(--ink); }
/* Footer links were 22px tall on phones: pad them to a comfortable ~44px row */
.site-footer ul a { display: inline-block; padding: 0.55rem 0; }
.site-footer ul { gap: 0; }
@media (max-width: 700px) {
/* The cream strip under the footer on phones (body padding for the sticky button)
becomes the footer's own colour, so the page doesn't end in a stray stripe. */
body { padding-bottom: 0; }
.site-footer { padding-bottom: calc(2rem + 5.25rem); }
/* Sticky "Check My Date": calmer, softer shadow, same clay button */
.mobile-cta { box-shadow: 0 10px 24px -10px rgba(62,44,34,0.45); border-radius: var(--radius); }
}
/* Forms + misc inherit the softer radius automatically via --radius. */
.form-card { background: var(--linen); border-radius: var(--radius-lg); }
.path-option input:checked + span { background: #FBF1EA; }
.inquiry-form input:focus, .inquiry-form textarea:focus { box-shadow: 0 0 0 3px rgba(154,79,46,0.18); }
.cta-band::before { background: rgba(62, 44, 34, 0.58); } /* other pages' photo CTA bands: warm brown overlay, not black */
.timeline__icon { color: var(--sage-deep); }
/* Pricing and the final CTA are both sand: without this they read as one huge
gap. A thin sage rule + less top padding makes the CTA its own calm "chapter". */
.section--oat + .bh-cta { padding-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid rgba(154, 168, 138, 0.45); }
/* =====================================================================
B10. FULL-SITE PREVIEW (Oct 29, 2026, Website & SEO)
Everything below styles markup added for the full-site build. Tap
targets are 44px+ (WCAG 2.5.5 / Apple HIG) and every text colour pair
is from the contrast table at the top of this file.
===================================================================== */
/* ---- Home hero: the SEO H1 is now the small kicker line, the big words a ----
(SEO audit: the H1 used to merge keyword + tagline). Undo style.css's
".hero h1 { max-width: 14ch }" for the kicker and give the
the display look. */
.hero h1.hero__kicker { max-width: none; margin: 0 0 0.9rem; font-family: var(--font-text); font-size: clamp(0.78rem, 0.74rem + 0.2vw, 0.9rem); line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; }
.hero p.hero__display { font-family: var(--font-display); font-weight: 500; margin: 0 0 1.1rem; max-width: 22ch; color: var(--cream); }
.bh-trust-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; }
.bh-trust-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bh-stars { color: var(--clay-deep); letter-spacing: 0.15em; } /* aria-hidden, still 5.3:1 on cream */
.on-dark .bh-stars { color: var(--honey); }
/* ---- Places line: items are now links to the new pages (44px tall tap rows) ---- */
.bh-places > * + *::before { content: "\25C6"; font-size: 0.45em; color: var(--sage); margin-right: 1.1rem; vertical-align: 0.35em; font-style: normal; }
.bh-places span + span::before { content: none; } /* replaced by the rule above */
.bh-places a { color: var(--ink); text-decoration: none; display: inline-block; padding-block: 0.45rem; }
.bh-places a:hover { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 4px; }
/* ---- Home "why couples book me": 7 reasons, 2 columns on wide screens ---- */
@media (min-width: 760px) { .bh-reasons { grid-template-columns: 1fr 1fr; column-gap: 2.5rem; } .bh-reasons li:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line); } }
/* ---- Footer: 4 columns now (brand, Explore, Where I shoot, contact) ---- */
@media (min-width: 860px) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.site-footer__reply { color: var(--muted-dark); font-size: var(--step--1); margin-top: 0.6rem; }
.site-footer p a, .site-footer address a { display: inline-block; padding-block: 0.6rem; } /* phone/email rows 44px */
.site-footer__legal a { display: inline-block; padding-block: 0.7rem; }
/* ---- Sticky phone button: softer, and never hides the last lines of a page ---- */
@media (max-width: 700px) {
.mobile-cta { box-shadow: 0 6px 18px -8px rgba(62,44,34,0.35); }
main { scroll-padding-bottom: 6rem; }
}
/* ---- Text links + small headings ---- */
.bh-small-h2 { font-size: var(--step-2); margin-bottom: 0.6rem; }
.field-help { display: block; margin-top: 0.35rem; font-size: 0.82rem; font-weight: 400; letter-spacing: 0; color: var(--muted); }
/* ---- Contact form: compact "Want to chat first?" ----
The chat options only show once "Chat first" is picked. style.css only hid
them for "book"; now nothing is pre-picked (data-path=""), so hide unless "chat". */
.js .inquiry-form:not([data-path="chat"]) [data-chat-only] { display: none; }
.bh-path-compact .path-options { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.bh-path-compact .path-option span { min-height: 48px; padding: 0.6rem 0.9rem; align-content: center; justify-items: center; background: var(--linen); border-color: rgba(62,44,34,0.28); }
.bh-path-compact .path-option strong { font-family: var(--font-text); font-size: 1rem; font-weight: 500; }
.bh-path-compact .path-option input:checked + span { border-color: var(--clay-deep); background: #FBF1EA; box-shadow: inset 0 0 0 1px var(--clay-deep); }
.chat-via span { min-height: 44px; display: inline-flex; align-items: center; padding: 0.55rem 1.1rem; background: var(--linen); border-color: rgba(62,44,34,0.28); }
.chat-via input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.chat-via input:focus-visible + span, .bh-path-compact .path-option input:focus-visible + span { outline: 2px solid var(--clay-deep); outline-offset: 2px; }
.inquiry-form input, .inquiry-form textarea, .inquiry-form select { background: var(--linen); border-radius: var(--radius); min-height: 48px; }
.inquiry-form select:focus { box-shadow: 0 0 0 3px rgba(154,79,46,0.18); outline-color: var(--clay-deep); }
/* ---- Portfolio ---- */
.bh-chapter-nav a { min-height: 44px; display: inline-flex; align-items: center; border-radius: 999px; padding: 0.5rem 1.1rem; background: var(--linen); color: var(--ink); border: 1px solid rgba(62,44,34,0.28); text-decoration: none; }
.bh-chapter-nav a:hover, .bh-chapter-nav a:focus-visible, .bh-chapter-nav a[aria-current="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.bh-lead-photo { margin-block: 0 clamp(2rem, 5vw, 4rem); }
.bh-lead-photo .bh-photo { aspect-ratio: 16 / 9; }
.bh-anchor { display: block; position: relative; top: calc(-1 * var(--header-h)); visibility: hidden; height: 0; }
.bh-inline-cta { margin: 2.5rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; font-family: var(--font-display); font-size: var(--step-2); }
.bh-chapter { scroll-margin-top: var(--header-h); }
/* ---- Pricing: plain-words terms, photo pair, planning guides ---- */
.bh-terms { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--linen); border-radius: var(--radius-lg); border: 1px solid var(--line); max-width: 52rem; }
.bh-terms ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.bh-terms li { position: relative; padding-left: 1.6rem; }
.bh-terms li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.8rem; height: 1.5px; background: var(--sage); }
.bh-photo-pair { display: grid; gap: 1rem; margin-block: clamp(2rem, 5vw, 4rem); }
.bh-photo-pair .bh-photo { aspect-ratio: 3 / 2; }
@media (min-width: 760px) { .bh-photo-pair { grid-template-columns: 1fr 1fr; } }
.bh-pullquote--left { margin: 1.8rem 0 0; text-align: left; max-width: 40rem; padding-left: 1.2rem; border-left: 2px solid var(--sage); }
.bh-guide-links, .bh-step-list { list-style: none; margin: 0.8rem 0 0; padding: 0; display: grid; gap: 0; }
.bh-guide-links li { border-top: 1px solid var(--line); }
.bh-guide-links li:last-child { border-bottom: 1px solid var(--line); }
.bh-guide-links a { display: block; padding: 0.8rem 0; min-height: 44px; color: var(--ink); text-decoration: none; }
.bh-guide-links a:hover { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 3px; }
.bh-step-list li { padding: 0.35rem 0 0.35rem 1.4rem; position: relative; }
.bh-step-list li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 0.7rem; height: 1.5px; background: var(--sage); }
.bh-pricing { padding-bottom: clamp(2rem, 5vw, 4rem); }
/* ---- FAQ, testimonials, posts: small link blocks ---- */
.bh-ask-card { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.4rem, 3vw, 2rem); background: var(--sand); border-radius: var(--radius-lg); }
.bh-guides-inline, .bh-local-links { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.bh-guides-inline a, .bh-local-links a { display: inline-block; padding-block: 0.6rem; margin-right: 1rem; color: var(--clay-deep); }
/* ---- Venues: one card per venue ---- */
.bh-venue-cards { display: grid; gap: 1.2rem; margin-top: 2rem; }
@media (min-width: 760px) { .bh-venue-cards { grid-template-columns: 1fr 1fr; } }
.bh-venue { background: var(--linen); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.2rem, 2.5vw, 1.8rem); }
.bh-venue h2 { font-size: var(--step-2); margin: 0 0 0.5rem; }
.bh-venue p { margin: 0 0 0.4rem; }
/* ---- 404 photo ---- */
.bh-404-photo { margin-block: 0 clamp(2rem, 5vw, 4rem); }
.bh-404-photo .bh-photo { aspect-ratio: 21 / 9; }
/* ---- Blog posts keep their drop cap, in clay-deep Cormorant (About/404 use .prose--plain) ---- */
.prose:not(.prose--plain) > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 500; color: var(--clay-deep); }
/* ---- NEW location + engagement pages (/windsor-, /chatham-kent-, /engagement-photos/) ---- */
.bh-local-head { padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem)); }
.bh-local-head__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: center; }
@media (min-width: 960px) { .bh-local-head__grid { grid-template-columns: 1.05fr 1fr; } }
.bh-local-head h1 { font-size: clamp(2.5rem, 1.7rem + 3.2vw, 4.6rem); max-width: 14ch; margin-bottom: 0.6rem; }
.bh-local-head .bh-photo { aspect-ratio: 4 / 3; }
.bh-local-sub { font-family: var(--font-display); font-style: italic; font-size: var(--step-2); line-height: 1.25; color: var(--clay-deep); margin: 0 0 1.2rem; }
.bh-local-packages { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: 0; }
.bh-local-packages li { padding: 0.7rem 0; border-top: 1px solid var(--line); }
.bh-local-packages li:last-child { border-bottom: 1px solid var(--line); }
.bh-local-packages .link { margin-left: 0.4rem; }
.bh-local-photos .masonry__item img { border-radius: var(--radius-photo); }
.bh-cta[aria-labelledby] h2 { margin-inline: auto; } /* centred CTA titles on the new pages */
/* Desktop menu links + post breadcrumb: 44px tall hit areas (audit: 32px / 19px) */
@media (min-width: 1081px) { .site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; } }
.post-crumbs a { display: inline-block; padding-block: 0.7rem; }
/* "Leave a review" card (Home + Kind Words): linen card, text left, button right */
.bh-review-card { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--linen); border: 1px solid var(--line); border-radius: var(--radius-lg); display: grid; gap: 1.1rem; align-items: center; }
.bh-review-card p { margin: 0; color: var(--muted); max-width: 52ch; }
@media (min-width: 760px) { .bh-review-card { grid-template-columns: 1fr auto; gap: 2rem; } }
/* Hero trust line (Lead, Oct 29): flow as normal inline text instead of the old
flex-wrap row, so the before each middle dot glues the dot to the text
before it and a dot can never sit alone at a line end on mobile. */
.bh-hero2 .hero__trust { display: block; line-height: 1.9; }
.bh-hero2 .hero__trust .bh-trust-link { vertical-align: middle; }