/* ─────────────────────────────────────────────────────────────
   wash-theme.css · 2026-09-16
   Site-wide retheme: paper + logo ink + the four trace washes.
   Replaces the tan-on-purple-black palette.

   Deliberately head-only and token-level: this file changes NO
   markup inside <div id="root">, so every PRERENDER snapshot
   stays valid and no page needed regenerating for it.
   The <link> MUST be the LAST thing in <head>, after each page's own
   <style> block: both define :root at equal specificity, so whichever
   comes later wins. Linked before the <style> it is a silent no-op.

   Accent has two values by ground, following the palette the
   build already used (--accent on dark, --accent-dk on light):
   the ROOT value is the dark olive, so anything sitting on paper
   is safe by default, and dark containers opt into the pale
   trace yellow via the inline-style matchers below. Never make
   the pale value the root value — it is invisible on paper.
   ───────────────────────────────────────────────────────────── */
:root{
  --bg:#fcfcfb; --bg-warm:#f7f7f5; --bg-dark:#180F17; --bg-mid:#2A1F2A;
  --ink:#180F17; --ink-mid:#5c5460; --ink-light:#6b6374;
  /* The olive #6F6726 is GONE (2026-09-16). It was the one value in this file
     that came from nowhere in the palette — a survivor of the old
     tan-on-purple scheme, kept because the pale trace is invisible on paper
     (1.2:1) and something had to be legible. Client flagged it as not
     matching, correctly.
     It was also doing two OPPOSITE jobs with one value: quieting eyebrow
     labels (which are metadata and want to recede) and emphasising spans
     inside serif pull-quotes (which want to shout). Those are now split —
     --accent-dk carries the quiet job, and the two loud cases are pulled
     back to full ink by the matchers further down. */
  /* --accent is now INK on paper, not a colour of its own. Everything that
     used it as type on a light ground is a LOUD use — serif numerals ("01"),
     hairline rules, step markers, the required-field asterisk — so ink is the
     right answer for the same reason the pull-quote spans go ink.
     The dark-ground matcher below overrides both values to the pale trace, so
     this only affects paper. See the two exceptions further down for the
     places --accent was a GROUND rather than ink. */
  --accent:#180F17; --accent-dk:#6b6374;
  --border:#e8e5e5; --border-dk:#2A1F2A;
  --trace:#EFE7A4; --lime:#CFDAC4; --blueprint:#C9D6DE; --plumw:#E2D4DE;
  --clay:#E8D5C8;
  /* 🔴 --trace is NOT a sector colour. It does three GENERIC jobs — the
     [blank] highlight in the h1, ::selection, and the accent on every dark
     ground (13:1 on ink) — so it cannot also mean "residential" without the
     colour meaning two things at once. Residential moved to --clay
     (2026-09-16, client's call).
     --clay is also the only WARM wash in the set: lime, blueprint and plumw
     are all cool, so warmth reads as domestic and separates residential from
     the other three. Watch it against --plumw specifically — both are pale
     and light, and they are the closest pair in the set.
     A wash is a GROUND colour only. Never darken one to use it as type or as
     a line — a darkened wash is a different colour, not that sector's colour.
     Fill behind ink instead (see SECTOR_WASH in js/index.js). */
}
/* Dark grounds: swap the accent to the pale trace yellow (13:1 on ink).
   Matches React's serialised inline styles by value, the same way
   css/mobile-refine.css does, so it applies to the live render and to
   the PRERENDER snapshot markup identically. */
[style*="background: var(--bg-dark)"],[style*="background:var(--bg-dark)"],
[style*="background: var(--bg-mid)"],[style*="background:var(--bg-mid)"],
[style*="background: #180F17"],.site-footer,footer,.band,
.overlay,.proj-info{--accent:var(--trace);--accent-dk:var(--trace)}
/* --accent-dk is swapped here TOO, not just --accent: several case-study CTAs
   sit on ink and animate background from var(--accent) to var(--accent-dk) on
   hover. With --accent-dk as the paper grey that hover was a trace-to-grey
   jump on a dark ground. Both values being trace makes those hovers inert,
   which is correct — the pill vocabulary handles hover now.
   Trace STAYS the accent on dark: 13:1 on ink, it is the palette's own
   colour, and it is the only warmth left in the scheme. */

/* The two LOUD uses of the old olive, pulled to full ink.
   Matched on React's serialised inline styles by value, the same technique
   the glow/grid killers below use, so no js/<page>.js is touched and every
   PRERENDER snapshot stays valid.
     1. exact style="color: var(--accent-dk)" — the emphasised span inside the
        serif pull-quotes ("…a new way to live in the house", "this is the
        studio."). Nothing else serialises to colour ALONE; labels always
        carry a font-size and letter-spacing, so they keep the quiet grey.
     2. the underlined mailto/tel links on start-a-project, where grey would
        have weakened the link affordance.
   !important is required: these are inline styles. */
[style="color: var(--accent-dk)"],[style="color: var(--accent-dk);"],
[style*="border-bottom: 1px solid var(--accent-dk)"]{color:var(--ink)!important}
[style*="border-bottom: 1px solid var(--accent-dk)"]{border-bottom-color:var(--ink)!important}
/* NOTE the trailing semicolon variant above — React serialises inline styles
   WITH a trailing ";" (style="color: var(--accent-dk);"), so the bare exact
   selector alone silently matched nothing. Verified on our-studio.html. */

/* The logo underscore is part of the mark: it takes the colour of the
   text around it, never an accent. (Client's designer, 2026-09-16.)
   !important is REQUIRED, not defensive — React writes
   style="color: var(--accent)" inline on this span in every
   js/<page>.js, and an inline style beats a plain stylesheet rule.
   Without it this declaration is a silent no-op and the mark goes
   olive-on-ink (3.25:1) in the nav of the 19 non-homepage pages.
   Doing it here rather than in the JS keeps their PRERENDER
   snapshots valid. Do NOT instead add nav/.site-nav to the
   dark-ground list above: the bar turns paper-backed on scroll,
   and trace on #fcfcfb is 1.2:1. */
.wm-us{color:inherit!important}
/* Same rule, the unclassed case: the bare "_" marks in body copy and list
   items are the mark too, and serialise to exactly
   style="color: var(--accent); font-weight: 500;" — the only thing on the site
   that does. They were the last 3 olive elements on our-studio after the token
   change. inherit puts them back in the colour of their surrounding text,
   which is what the designer asked for. */
[style="color: var(--accent); font-weight: 500;"]{color:inherit!important}

/* --accent was also used as a GROUND in two places on paper. With the token
   now ink, both would have failed: */
/* 1. the flat "start a project" / "order" rectangles on merch and the case
      studies — background:var(--accent) with color:var(--bg-dark) would have
      been ink-on-ink, i.e. invisible. Both serialisation orders appear
      (the merch badge writes colour first), so both are listed. These are the
      buttons still awaiting the .pill sweep; this only fixes their colour. */
[style*="background: var(--accent); color: var(--bg-dark)"],
[style*="color: var(--bg-dark); background: var(--accent)"]{background:var(--ink)!important;color:#fff!important}
/* 2. the merch product-card outline. A 1px ink border reads as a heavy box at
      card scale, so it takes the hairline token instead. The 16px step-marker
      circles on our-process share the "1px solid var(--accent)" string but not
      the "background: var(--bg)" that follows it, so they keep ink. */
[style*="border: 1px solid var(--accent); background: var(--bg)"]{border-color:var(--border)!important}

/* The tan corner glow and the faint grid overlay both go — a flat
   single colour was the brief. Both are inline-styled decorative divs,
   and their serialisation DIFFERS PER PAGE, so match on the one part
   that is stable rather than on the whole gradient string:
     glow — authored as "at right top" (sector pages), "at 70% 40%"
       (our-process) and "ellipse at top right" (homepage); the tan
       rgba is the only constant.
     grid — alpha is 0.025 / 0.024 / 0.03 and the tile is 60px or
       72px depending on the page, and React emits spaces after
       commas; the 90deg second layer is the one constant.
   Verified on residential.html and our-process.html, not just here. */
[style*="rgba(200, 168, 130"],[style*="rgba(200,168,130"],
[style*="linear-gradient(90deg, rgba(255, 255, 255, 0.0"],
[style*="linear-gradient(90deg,rgba(255,255,255,0.0"]{background-image:none!important}

/* Footer contact links were rgba(255,255,255,0.35) on the ink ground
   = 3.2:1 at 11.5px. Raised in js/index.js for the homepage; this
   covers the other 19 pages without touching their snapshots.
   Their <footer> carries NO class — only index.html has .site-footer —
   so match the element. */
footer{color:rgba(255,255,255,0.62)!important}

::selection{background:var(--trace);color:var(--ink)}

/* 🔴 Mobile nav CTA. 10 pages (merch, our-process and the 8 case studies)
   carry their own rule:
     .nav-links > a[style*="background"]{background:var(--accent)!important;
                                         color:var(--bg-dark)!important}
   With --accent as the paper olive that was ~3.2:1 — poor but visible. Once
   --accent became ink it was ink-on-ink, 1.0:1, a completely INVISIBLE button
   inside the open mobile panel.
   The panel's dark ground comes from a CLASS rule in each page's own
   stylesheet, not an inline background, so wash-theme's dark-ground matcher
   never fired and never will.
   Fixed the way index.html already solves it — its .nav-pill carries an
   explicit white ground — rather than by adding .nav-links to the dark-ground
   list: .nav-links also exists on DESKTOP inside a bar that turns paper on
   scroll, where trace is 1.2:1. Same trap as the .wm-us note above.
   Scoped to the panel's own breakpoint. This file is last in <head>, so it
   wins the specificity tie against the pages' identical selector.
   VERIFY AT 390px WITH THE PANEL OPEN — a desktop-width audit cannot see it. */
@media (max-width:760px){
  .nav-links > a[style*="background"]{background:#fff!important;color:var(--ink)!important}
}

/* 🔴 Option A block CTA (2026-09-21) — the client liked the nav CTA rendered
   raw, before CSS applied: an ink block that starts and stops exactly at the
   letters, like a highlighter stroke, not a rounded pill. Ported here as the
   ONE shared rule so .nav-pill / .pill-d / .pill-w (already identical across
   index, our-studio, our-process, start-a-project) change from one file.
   wash-theme.css is last in <head>, so these equal-specificity class rules
   win the tie against each page's own copy — same trick as the trace-accent
   swap above. .nav-pill also carries an INLINE style (background:var(--ink))
   on all four pages, which beats any class on specificity alone, so those
   three properties need !important here to actually win.
   No padding, no radius, display:inline (not inline-flex) so the box hugs
   the text on all sides — the arrow icons were dropped project-wide in the
   markup, this rule also just hides one if a future edit reintroduces it.
   A transparent ::after grows the tap target to 44px VERTICALLY ONLY, so the
   ink stays this thin without shrinking the touchable area on a phone —
   never widen it, a neighbouring nav item or link would start intercepting
   taps. Hover fills with --trace (the same band as every h1) and flips ink
   text to sit on it; --trace is never used as a page background so 13:1
   ink-on-trace always holds. Do not add gap/icon children back without also
   removing this display:inline — inline-flex reintroduces the rounded-pill
   proportions this is replacing. */
.nav-pill,.pill-d,.pill-w{position:relative;display:inline;border-radius:0!important;padding:0!important;margin:0!important;align-self:auto!important;gap:0!important;letter-spacing:0.01em!important;transition:background 0.26s,color 0.26s,letter-spacing 0.26s!important}
.nav-pill::after,.pill-d::after,.pill-w::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.nav-pill svg,.pill-d svg,.pill-w svg{display:none}
.nav-pill{background:var(--ink)!important;color:#fff!important}
.nav-pill:hover,.pill-d:hover{background:var(--trace)!important;color:var(--ink)!important;letter-spacing:0.05em!important}
.pill-w{background:#fff!important;color:var(--ink)!important}
.pill-w:hover{background:var(--trace)!important;letter-spacing:0.05em!important}

/* 🔴 Secondary button → "the quiet block" (2026-09-21, client's call: idea 4
   on Button Options.html — square, no border, pale trace tint AT REST (not
   just hover), same shape as the primary block. Replaces .pill's rounded
   border + separate circular arrow icon on all 4 pages that carry it. The
   arrow markup (.pill-ic + its svg) is deleted from each page's JS, not just
   hidden — same reasoning as the primary block above. No colour introduced
   that wasn't already on the page: the tint is exactly the pill's own old
   hover colour, just always on; hover now deepens to the full --trace token.
   Pairs with one .tlink, same rule as before — never two blocks. */
.pill{position:relative;display:inline;border-radius:0!important;border:none!important;padding:1px 4px!important;gap:0!important;background:rgba(239,231,164,0.45)!important;letter-spacing:0.01em!important;transition:background 0.3s!important}
.pill::after{content:'';position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.pill:hover{background:var(--trace)!important}
.pill-ic{display:none!important}

/* The wordmark is now 182px of artwork where it used to be ~95px of text,
   so the inline bar has less room than when it was fitted (at 1280px).
   Tighten the tablet band rather than change the desktop bar. */
@media (min-width:761px) and (max-width:1199px){
  nav img.wordmark{height:24px!important}
  nav .nav-links{gap:1rem!important}
}
