/* ============================================================================
base.css — shared component library for the Brownwood demo factory
----------------------------------------------------------------------------
This file NEVER carries theme colors, fonts, or motifs. It draws every
component from CSS custom properties (the "token contract" below). Each
site loads base.css FIRST, then its own styles.css which sets the tokens
for Theme A / B / C / D and applies 2-3 variation levers.
Load order in :
Design intents baked in here:
- Mobile-first, 375px primary target.
- Monospace = "scaffolding". Every chip, label, and unfilled slot uses
--font-mono so placeholders read as INTENTIONAL annotation, never broken.
- Placeholders get a crop-mark frame + hatch texture + label chip.
- Review SLOT cards are structurally different from real review cards.
- No gradients-on-gradients, no glass, no icon kitsch. Restraint.
============================================================================ */
/* ---------- TOKEN CONTRACT (neutral fallbacks; styles.css overrides) ------- */
:root{
/* palette */
--paper:#f5f4f2; /* page background */
--surface:#ffffff; /* card / raised panel */
--surface-2:#ecebe8; /* alternating section band */
--ink:#1b1b1d; /* primary text */
--ink-soft:#4a4a4f; /* secondary text */
--ink-faint:#7c7c82; /* meta / captions */
--line:#d7d5d0; /* hairlines & borders */
--line-strong:#b7b5ae; /* heavier borders */
--brand:#26282b; /* dark theme color */
--on-brand:#f4f3f1; /* text on brand */
--accent:#c2410c; /* signal accent */
--on-accent:#ffffff; /* text on accent */
--accent-2:#26282b; /* secondary accent (levers) */
--focus:#1d6fb8; /* focus ring */
/* placeholder / slot system (defaults derive from accent + line) */
--slot-bg:#f7f6f4;
--slot-line:var(--line-strong);
--slot-ink:var(--ink-soft);
--slot-tag-bg:var(--ink);
--slot-tag-ink:#ffffff;
/* typography */
--font-display:"Archivo", system-ui, sans-serif;
--font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
--font-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
--display-transform:none; /* A=uppercase, others vary */
--display-weight:800;
--display-tracking:0; /* A slightly negative/tight */
--display-lh:1.02;
--kicker-tracking:.14em;
/* shape & depth (per-theme personality lives here) */
--radius:4px;
--radius-lg:8px;
--radius-pill:999px;
--border-w:2px; /* A thick, C/D softer */
--rule-w:1px;
--shadow:none; /* most themes stay flat */
--shadow-lg:0 1px 0 var(--line), 0 8px 24px rgba(0,0,0,.08);
--lift:0px; /* hover translate (0 = flat theme) */
/* layout */
--maxw:1080px;
--gutter:clamp(16px,5vw,28px);
--section-y:clamp(40px,8vw,80px);
--bar-h:64px; /* mobile sticky action bar height */
/* divider */
--divider-h:26px;
--divider-color:var(--line-strong);
--divider-accent:var(--accent);
/* texture hooks (themes may set to a subtle CSS image; default none) */
--texture:none;
--hatch: repeating-linear-gradient(
-45deg, transparent 0 7px, color-mix(in srgb, var(--slot-line) 55%, transparent) 7px 8px);
}
/* ------------------------------- reset ------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--font-body);
color:var(--ink);
background:var(--paper);
background-image:var(--texture);
line-height:1.55;
font-size:16px;
-webkit-font-smoothing:antialiased;
overflow-wrap:break-word;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit}
:where(h1,h2,h3,h4){margin:0 0 .4em;line-height:var(--display-lh)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
/* --------------------------- type primitives ------------------------------ */
.display{
font-family:var(--font-display);
font-weight:var(--display-weight);
text-transform:var(--display-transform);
letter-spacing:var(--display-tracking);
line-height:var(--display-lh);
}
.kicker{ /* the mono "eyebrow" label */
font-family:var(--font-mono);
font-size:.72rem;
letter-spacing:var(--kicker-tracking);
text-transform:uppercase;
color:var(--ink-faint);
margin:0 0 .6em;
display:inline-flex;align-items:center;gap:.5em;
}
.kicker::before{ /* short accent tick, not an icon */
content:"";width:1.6em;height:2px;background:var(--accent);flex:none;
}
.lead{font-size:1.06rem;color:var(--ink-soft);max-width:56ch}
/* ------------------------------- layout ----------------------------------- */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y)}
.section--tint{background:var(--surface-2)}
.section--brand{background:var(--brand);color:var(--on-brand)}
.section--brand .kicker{color:color-mix(in srgb,var(--on-brand) 70%,transparent)}
.section--brand .lead{color:color-mix(in srgb,var(--on-brand) 82%,transparent)}
.section__head{max-width:60ch;margin-bottom:clamp(20px,4vw,36px)}
.section__head h2{font-size:clamp(1.5rem,5vw,2.2rem)}
.stack>*+*{margin-top:var(--stack-gap,16px)}
.grid{display:grid;gap:clamp(14px,3vw,22px)}
/* ------------------------------- buttons ---------------------------------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:.5em;
font-family:var(--font-display);
font-weight:700;
text-transform:var(--display-transform);
letter-spacing:calc(var(--display-tracking) + .01em);
text-decoration:none;
padding:.85em 1.3em;
min-height:48px; /* thumb target */
border:var(--border-w) solid transparent;
border-radius:var(--radius);
cursor:pointer;
transition:transform .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--primary:hover{box-shadow:var(--shadow-lg);transform:translateY(calc(var(--lift) * -1))}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--secondary:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,transparent)}
.btn--onbrand{background:transparent;color:var(--on-brand);border-color:color-mix(in srgb,var(--on-brand) 45%,transparent)}
.btn--onbrand:hover{border-color:var(--on-brand)}
.btn--block{width:100%}
/* ------------------------------- chips ------------------------------------ */
.chip{
display:inline-flex;align-items:center;gap:.45em;
font-family:var(--font-mono);
font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
color:var(--ink-soft);
background:color-mix(in srgb,var(--ink) 6%,transparent);
border:1px solid var(--line);
border-radius:var(--radius);
padding:.32em .6em;line-height:1;
}
.chip--accent{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}
/* ============================ HEADER / WORDMARK =========================== */
.site-header{
position:sticky;top:0;z-index:40;
background:var(--paper);
border-bottom:var(--rule-w) solid var(--line);
}
.site-header::after{ /* optional accent underbar (lever) */
content:"";display:block;height:var(--header-underbar,0);background:var(--accent);
}
.site-header__row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
padding-block:12px;
}
.wordmark{display:inline-flex;flex-direction:column;text-decoration:none;line-height:1}
.wordmark__name{
font-family:var(--font-display);
font-weight:var(--display-weight);
text-transform:var(--display-transform);
letter-spacing:var(--display-tracking);
font-size:clamp(1.15rem,4.4vw,1.5rem);
color:var(--ink);
}
.wordmark__sub{
font-family:var(--font-mono);
font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--ink-faint);margin-top:.35em;
}
.wordmark--plate .wordmark__name{ /* lever: bordered "plate" lockup */
border:var(--border-w) solid var(--ink);padding:.15em .5em;border-radius:var(--radius);
}
.header-actions{display:none;align-items:center;gap:10px}
.header-actions .btn{padding:.6em 1em;min-height:42px;font-size:.9rem}
/* ================================= HERO ================================== */
.hero{padding-block:clamp(36px,8vw,72px)}
.hero__inner{max-width:38rem}
.hero h1{font-size:clamp(2rem,8.5vw,3.4rem);letter-spacing:var(--display-tracking)}
.hero .lead{margin-block:.8em 1.4em}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__cta .btn{flex:1 1 auto}
.trust-strip{ /* small proof row under CTAs */
display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:22px;
padding-top:18px;border-top:var(--rule-w) solid var(--line);
}
.trust-strip li{
list-style:none;
font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-soft);
display:flex;align-items:center;gap:.5em;
}
.trust-strip li::before{content:"";width:6px;height:6px;background:var(--accent);flex:none;border-radius:1px}
.hero__cta .btn{flex:1 1 100%}
@media(min-width:420px){.hero__cta .btn{flex:1 1 auto}}
/* ===================== HERO — PHOTO BACKGROUND VARIANT =================== */
/* Layered atmospheric hero, txmulching-style. Four stacked layers inside one
stacking context (isolation:isolate):
z0 .hero__photo full-bleed licensed industry photo (LCP, eager)
z1 ::before theme-tint directional gradient (+ thin accent bar)
z2 ::after CSS-only grain (~14%)
z3 .container hero content (light text on the dark side)
Sites set ONLY 1-2 props (--hero-tint-a / --hero-tint-b; both default off
--brand) and drop the ![]()
. No per-site layout surgery.
Markup contract:
Contrast: the content (left) side of the gradient holds ~0.90-0.95 tint so
the wordmark-zone headline/lead clear WCAG at 375px even over bright photo
pixels. At >=720px, where .hero__inner is left-constrained, the gradient
opens up on the right for the directional photo reveal. */
.hero--photo{
position:relative;
isolation:isolate;
overflow:hidden;
display:flex;align-items:center;
padding-block:clamp(30px,7vw,60px);
min-height:clamp(430px,72vh,560px);
color:var(--on-brand);
/* tint tokens — derive from --brand by default; a site may override 1-2 */
--hero-tint-a:color-mix(in srgb, var(--brand) 55%, #000 45%); /* content side */
--hero-tint-b:var(--brand); /* photo side */
--hero-bar:3px; /* accent bar */
}
.hero--photo .hero__photo{
position:absolute;inset:0;z-index:0;
width:100%;height:100%;
object-fit:cover;object-position:center;
}
.hero--photo::before{ /* theme-tint gradient + thin accent bar */
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
border-bottom:var(--hero-bar) solid var(--accent);
background:linear-gradient(102deg,
color-mix(in srgb, var(--hero-tint-a) 95%, transparent) 0%,
color-mix(in srgb, var(--hero-tint-a) 90%, transparent) 44%,
color-mix(in srgb, var(--hero-tint-b) 82%, transparent) 80%,
color-mix(in srgb, var(--hero-tint-b) 78%, transparent) 100%);
}
@media(min-width:720px){ /* content left-locked → reveal photo on right */
.hero--photo::before{
background:linear-gradient(100deg,
color-mix(in srgb, var(--hero-tint-a) 95%, transparent) 0%,
color-mix(in srgb, var(--hero-tint-a) 86%, transparent) 32%,
color-mix(in srgb, var(--hero-tint-b) 55%, transparent) 64%,
color-mix(in srgb, var(--hero-tint-b) 42%, transparent) 100%);
}
}
.hero--photo::after{ /* subtle static grain */
content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.14;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
background-size:140px 140px;
}
.hero--photo .container{position:relative;z-index:3}
/* on-dark text treatment (mirrors .section--brand) */
.hero--photo h1{color:var(--on-brand)}
.hero--photo .kicker{color:color-mix(in srgb,var(--on-brand) 80%,transparent)}
.hero--photo .kicker::before{background:var(--accent)}
.hero--photo .lead{color:color-mix(in srgb,var(--on-brand) 90%,transparent)}
.hero--photo .trust-strip{border-top-color:color-mix(in srgb,var(--on-brand) 32%,transparent)}
.hero--photo .trust-strip li{color:color-mix(in srgb,var(--on-brand) 84%,transparent)}
/* secondary CTA needs a scrim + light edge to survive on the photo */
.hero--photo .btn--secondary{
color:var(--on-brand);
border-color:color-mix(in srgb,var(--on-brand) 55%,transparent);
background:color-mix(in srgb,#000 22%,transparent);
}
.hero--photo .btn--secondary:hover{
border-color:var(--on-brand);background:color-mix(in srgb,#000 32%,transparent);
}
@media(max-height:600px){ /* short / landscape phones: don't over-tall */
.hero--photo{min-height:auto}
}
/* Optional lighter use: a photo band behind a section (centerpiece/hours).
Heavier tint than the hero so body copy stays readable; same tokens.
Add .has-photo to a .section or .centerpiece and nest the same
![]()
as the first child. */
.has-photo{position:relative;isolation:isolate;overflow:hidden}
.has-photo>.hero__photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.has-photo::before{
content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,
color-mix(in srgb, var(--hero-tint-b, var(--brand)) 92%, transparent),
color-mix(in srgb, var(--hero-tint-a, var(--brand)) 96%, transparent));
}
.has-photo>.container{position:relative;z-index:2}
/* ============================== TRUST BAR ================================= */
/* 4 stat blocks. NO fabricated numerals — values are short verified phrases
or labeled slots. Use .is-slot on any block whose value isn't verified. */
.trustbar{border-block:var(--border-w) solid var(--ink)}
.trustbar__grid{display:grid;grid-template-columns:repeat(2,1fr)}
.stat{
padding:20px var(--gutter);
border-right:var(--rule-w) solid var(--line);
border-bottom:var(--rule-w) solid var(--line);
}
.stat__k{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.12em;
text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5em;display:block}
.stat__v{font-family:var(--font-display);font-weight:var(--display-weight);
text-transform:var(--display-transform);font-size:clamp(1.1rem,4.5vw,1.45rem);
line-height:1.05;color:var(--ink)}
.stat.is-slot{background:var(--slot-bg);background-image:var(--hatch)}
.stat.is-slot .stat__v{font-family:var(--font-mono);font-size:.8rem;font-weight:600;
text-transform:none;letter-spacing:0;color:var(--slot-ink)}
/* ============================= SERVICE CARDS ============================= */
.cards{grid-template-columns:1fr}
.card{
background:var(--surface);
border:var(--rule-w) solid var(--line);
border-top:var(--border-w) solid var(--accent); /* accent top-edge */
border-radius:var(--radius);
padding:clamp(18px,4vw,26px);
box-shadow:var(--shadow);
transition:transform .12s ease, box-shadow .12s ease;
}
.card:hover{transform:translateY(calc(var(--lift) * -1));box-shadow:var(--shadow-lg)}
.card h3{font-family:var(--font-display);font-weight:var(--display-weight);
text-transform:var(--display-transform);font-size:1.15rem;letter-spacing:var(--display-tracking)}
.card p{color:var(--ink-soft);margin:0}
.card p+p{margin-top:.5em}
/* =========================== CENTERPIECE SHELL =========================== */
/* Each site drops its unique strategic section here. The shell gives it a
distinct frame so it visually carries the most weight on the page. */
.centerpiece{position:relative;background:var(--brand);color:var(--on-brand)}
.centerpiece .kicker{color:color-mix(in srgb,var(--on-brand) 72%,transparent)}
.centerpiece .kicker::before{background:var(--accent)}
.centerpiece h2{font-size:clamp(1.6rem,6vw,2.5rem);color:var(--on-brand)}
.centerpiece__lead{color:color-mix(in srgb,var(--on-brand) 84%,transparent);max-width:52ch}
.centerpiece__panel{ /* the inner working surface */
background:var(--surface);color:var(--ink);
border-radius:var(--radius-lg);
padding:clamp(20px,5vw,34px);
margin-top:clamp(22px,4vw,32px);
box-shadow:0 18px 40px rgba(0,0,0,.22);
}
/* two-lane router (used by muffler, tree storm/gallery split, etc.) */
.lanes{display:grid;gap:14px;grid-template-columns:1fr}
.lane{
border:var(--border-w) solid var(--line);border-radius:var(--radius);
padding:clamp(16px,4vw,22px);background:var(--surface);
}
.lane__tag{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--ink-faint);margin-bottom:.5em;display:block}
.lane h3{font-size:1.2rem;margin-bottom:.35em}
.lane .btn{margin-top:14px}
/* =============================== REVIEWS ================================= */
/* Real review card — clean, editorial, "content is here". */
.review{
background:var(--surface);
border:var(--rule-w) solid var(--line);
border-radius:var(--radius);
padding:clamp(18px,4vw,26px);
position:relative;
}
.review__mark{font-family:var(--font-display);font-size:2.6rem;line-height:.7;
color:var(--accent);opacity:.5}
.review__quote{font-size:1.05rem;color:var(--ink);margin:.2em 0 1em}
.review__by{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--ink-faint)}
.review__src{color:var(--ink-faint)}
/* Review SLOT card — DELIBERATELY different silhouette from a real review:
corner tab, hatch texture, dotted keyline, mono instruction. At a glance a
presenter knows this is a fill-me card, not a customer quote. */
.review-slot{
position:relative;
background:var(--slot-bg);
background-image:var(--hatch);
border:2px dashed var(--slot-line);
border-radius:var(--radius);
padding:clamp(20px,4vw,26px);
padding-top:calc(clamp(20px,4vw,26px) + 14px);
}
.review-slot__tab{
position:absolute;top:-1px;left:16px;transform:translateY(-50%);
font-family:var(--font-mono);font-size:.66rem;font-weight:700;letter-spacing:.12em;
text-transform:uppercase;
background:var(--slot-tag-bg);color:var(--slot-tag-ink);
padding:.4em .7em;border-radius:2px;
}
.review-slot__body{font-family:var(--font-mono);font-size:.82rem;line-height:1.5;
color:var(--slot-ink)}
.review-slot__body strong{color:var(--ink)}
/* ========================= PHOTO / GALLERY SLOTS ========================= */
/* Placeholder frame that looks art-directed: crop-mark corners, hatch fill,
label chip stating WHAT the photo is and WHERE to pull it from. */
.ph{margin:0}
.ph__frame{
position:relative;
display:flex;align-items:flex-end;
aspect-ratio:var(--ph-ratio,4/3);
background:var(--slot-bg);
background-image:var(--hatch);
border:var(--rule-w) solid var(--slot-line);
border-radius:var(--radius);
padding:12px;
overflow:hidden;
}
.ph__frame::before,.ph__frame::after{ /* crop-mark corners = intentional */
content:"";position:absolute;width:14px;height:14px;pointer-events:none;
border:2px solid var(--slot-line);
}
.ph__frame::before{top:8px;left:8px;border-right:0;border-bottom:0}
.ph__frame::after{bottom:8px;right:8px;border-left:0;border-top:0}
.ph__chip{
font-family:var(--font-mono);font-size:.68rem;line-height:1.35;letter-spacing:.03em;
text-transform:uppercase;
background:var(--slot-tag-bg);color:var(--slot-tag-ink);
padding:.45em .6em;border-radius:2px;max-width:100%;
}
.ph__ratio{position:absolute;top:8px;right:10px;font-family:var(--font-mono);
font-size:.6rem;letter-spacing:.1em;color:var(--ink-faint)}
/* before / after pair — labeled, with a center seam */
.ph-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;
border:var(--rule-w) solid var(--slot-line);border-radius:var(--radius);overflow:hidden}
.ph-pair .ph__frame{border:0;border-radius:0;aspect-ratio:var(--ph-ratio,4/5)}
.ph-pair .ph__frame:first-child{border-right:var(--rule-w) dashed var(--slot-line)}
.ph-pair__label{position:absolute;top:8px;left:8px;font-family:var(--font-mono);
font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
background:var(--brand);color:var(--on-brand);padding:.3em .55em;border-radius:2px;z-index:1}
/* gallery grid of placeholder frames */
.gallery{grid-template-columns:repeat(2,1fr)}
/* ========================= HOURS / LOCATION BLOCK ======================== */
.info-block{display:grid;gap:22px;grid-template-columns:1fr}
.info-card{border:var(--rule-w) solid var(--line);border-radius:var(--radius);
background:var(--surface);padding:clamp(18px,4vw,26px)}
.info-card h3{font-family:var(--font-display);font-weight:var(--display-weight);
text-transform:var(--display-transform);font-size:1.15rem}
.hours{list-style:none;margin:0;padding:0}
.hours li{display:flex;justify-content:space-between;gap:16px;
padding:.5em 0;border-bottom:var(--rule-w) solid var(--line)}
.hours li:last-child{border-bottom:0}
.hours dt,.hours .day{color:var(--ink-soft)}
.hours .time{font-family:var(--font-mono);font-size:.85rem;color:var(--ink)}
.addr{font-style:normal;color:var(--ink-soft);line-height:1.6}
.addr .tel{font-family:var(--font-display);font-weight:700;font-size:1.2rem;
color:var(--ink);text-decoration:none;display:inline-block;margin-top:.3em}
.directions{margin:0;padding-left:1.1em}
.directions li{margin:.35em 0;color:var(--ink-soft)}
/* ============================== REQUEST FORM ============================= */
.form-wrap{position:relative;border:var(--border-w) solid var(--line);
border-radius:var(--radius-lg);background:var(--surface);padding:clamp(18px,4vw,28px)}
.field{margin-bottom:14px}
.field>label{display:block;font-family:var(--font-mono);font-size:.72rem;
letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.5em}
.field input,.field select,.field textarea{
width:100%;font:inherit;color:var(--ink);background:var(--paper);
border:var(--rule-w) solid var(--line-strong);border-radius:var(--radius);
padding:.75em .8em;min-height:48px;
}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.form-note{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-faint);
margin-top:10px;line-height:1.5}
.form-success{display:none;text-align:center;padding:clamp(10px,4vw,24px)}
.form-success h3{font-family:var(--font-display);font-weight:var(--display-weight);
text-transform:var(--display-transform);font-size:1.4rem}
.form-success .check{width:44px;height:44px;margin:0 auto 12px;border-radius:50%;
background:var(--accent);color:var(--on-accent);display:grid;place-items:center;
font-weight:800;font-family:var(--font-display)}
/* JS toggles .is-sent on .form-wrap */
.form-wrap.is-sent .form-fields{display:none}
.form-wrap.is-sent .form-success{display:block}
/* =============================== DIVIDERS =============================== */
/* Base rail. Add ONE modifier per site (variation lever). All CSS, no images. */
.section-divider{height:var(--divider-h);position:relative;
display:flex;align-items:center;justify-content:center;background:var(--paper)}
/* A — hazard tape (caution stripes) */
.divider-hazard{background:repeating-linear-gradient(-45deg,
var(--divider-accent) 0 14px, var(--ink) 14px 28px);height:12px}
/* A — steel blade (thick angled bar) */
.divider-blade::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;
background:var(--divider-color);
clip-path:polygon(0 0,100% 0,100% 60%,0 100%)}
.divider-blade::after{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--divider-accent)}
/* A/B — bolt rule (double line + center marks) */
.divider-bolt::before{content:"";position:absolute;left:0;right:0;top:50%;height:0;
border-top:2px solid var(--divider-color);border-bottom:2px solid var(--divider-color);
box-sizing:border-box;height:7px}
.divider-bolt::after{content:"";width:9px;height:9px;background:var(--divider-accent);
transform:rotate(45deg);position:relative;z-index:1}
/* B — double rule (thin over thick) */
.divider-double::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:50%;
height:5px;border-top:1px solid var(--divider-color);border-bottom:3px solid var(--divider-color)}
/* C — horizon rule (two hairlines, land/sky) */
.divider-horizon{height:34px}
.divider-horizon::before{content:"";position:absolute;left:0;right:0;top:44%;
border-top:1px solid var(--divider-color)}
.divider-horizon::after{content:"";position:absolute;left:0;right:0;top:60%;
border-top:2px solid var(--divider-accent);opacity:.65}
/* C — tick line (fence pickets / barbed) */
.divider-tick{background:repeating-linear-gradient(90deg,
var(--divider-color) 0 2px, transparent 2px 16px);height:10px;background-position:center;
background-size:16px 10px;background-repeat:repeat-x}
/* D — pinstripe (thin-thick-thin retro) */
.divider-pinstripe::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:50%;
height:8px;border-top:2px solid var(--divider-accent);border-bottom:2px solid var(--divider-accent);
box-shadow:0 0 0 0 transparent}
.divider-pinstripe::after{content:"";position:absolute;left:var(--gutter);right:var(--gutter);top:50%;
height:0;border-top:1px solid var(--divider-color)}
/* D — badge notch (center diamond on a rule) */
.divider-notch::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px solid var(--divider-color)}
.divider-notch::after{content:"";width:12px;height:12px;background:var(--paper);
border:2px solid var(--divider-accent);transform:rotate(45deg);position:relative;z-index:1}
/* =============================== FOOTER ================================= */
.site-footer{background:var(--brand);color:color-mix(in srgb,var(--on-brand) 88%,transparent);
padding-block:clamp(28px,6vw,44px)}
.site-footer a{color:var(--on-brand)}
.footer__grid{display:grid;gap:22px;grid-template-columns:1fr}
.footer__name{font-family:var(--font-display);font-weight:var(--display-weight);
text-transform:var(--display-transform);font-size:1.3rem;color:var(--on-brand)}
.footer__credit{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.06em;
text-transform:uppercase;color:color-mix(in srgb,var(--on-brand) 62%,transparent);
margin-top:8px}
.footer__credit a{text-decoration:underline;text-underline-offset:2px}
/* ========================= MOBILE STICKY ACTION BAR ===================== */
.action-bar{
position:fixed;left:0;right:0;bottom:0;z-index:50;
display:flex;gap:10px;
padding:10px var(--gutter);
padding-bottom:calc(10px + env(safe-area-inset-bottom,0));
background:var(--paper);
border-top:var(--border-w) solid var(--ink);
}
.action-bar .btn{flex:1;min-height:52px}
body{padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom,0))}
/* ============================= RESPONSIVE =============================== */
@media(min-width:600px){
.cards{grid-template-columns:repeat(2,1fr)}
.lanes{grid-template-columns:1fr 1fr}
.info-block{grid-template-columns:1fr 1fr}
.trustbar__grid{grid-template-columns:repeat(4,1fr)}
.header-actions{display:flex}
}
@media(min-width:860px){
.cards{grid-template-columns:repeat(3,1fr)}
.gallery{grid-template-columns:repeat(3,1fr)}
.footer__grid{grid-template-columns:2fr 1fr 1fr}
.hero__inner{max-width:42rem}
/* header CTAs replace the thumb bar on larger screens */
.action-bar{display:none}
body{padding-bottom:0}
}
@media(min-width:1080px){
.centerpiece__panel--split{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}
}
/* ============================ A11Y / PRINT ============================= */
@media(prefers-reduced-motion:reduce){*{transition:none !important;scroll-behavior:auto !important}}
@media print{
.action-bar,.site-header{position:static}
.action-bar{display:none}
body{padding-bottom:0}
.review-slot,.ph__frame,.stat.is-slot{background:#fff}
}
