/* ═══════════════════════════════════════════════════════════════════════════
   RCAG brand B — navy, gold and cream
   ───────────────────────────────────────────────────────────────────────────
   A/B variant drawn from the client's logo sheet. VISUAL ONLY: colours,
   typefaces and the RCAG lockup. None of the copy on that sheet is used, and
   none of the contact details on it are used, because they contradict what
   Roland put in writing on 14 September.

   Loaded after style.css and scoped to :root[data-brand="b"], so it overrides
   tokens without touching the base theme. Removing this file and the toggle
   returns the site to brand A exactly.

   CONTRAST. The logo gold is #B68F4B, which is 2.82:1 on cream and therefore
   fails AA for text at any size. It is used here for rules, arcs, markers and
   fills, never for words. Text accents use #8A6A28 (4.75:1). The brand sheet
   works the same way: every word on it is navy, and the gold is a graphic
   device.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-brand="b"]{
  /* Gold that can legally carry text, plus the decorative gold beside it. */
  --brand:#8A6A28;              /* 4.75:1 on cream — links, eyebrows, accents */
  --brand-dark:#6E5320;
  --brand-light:#A17E35;
  --brand-soft:#F3EDE0;
  --brand-hair:rgba(138,106,40,.26);
  --gold:#B68F4B;               /* decoration only — rules, arcs, dots */
  --gold-lift:#D2B778;

  --accent:#1F3A5F; --accent-soft:#E7EBF1;

  --bg:#FAF8F5; --surface:#FFFDF9; --surface-alt:#F1EDE4; --raise:#E7E1D4;
  --ink:#0C1924; --ink-mid:#2D3E4E; --muted:#5A6875;
  --border:rgba(12,25,36,.16); --border-soft:rgba(12,25,36,.09);
  --hair:rgba(12,25,36,.28);
  --ink-on-brand:#FAF8F5;

  --font-display:'Playfair Display', 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body:'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'Montserrat', system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme:dark){
  :root[data-brand="b"]:not([data-theme="light"]){
    --brand:#C9A96A; --brand-dark:#B08F4E; --brand-light:#DCC48F;
    --brand-soft:#1B2836; --brand-hair:rgba(201,169,106,.30);
    --gold:#C9A96A; --gold-lift:#E0CA97;
    --accent:#8FB0D8; --accent-soft:#16212C;
    --bg:#0B151E; --surface:#111E2A; --surface-alt:#152332; --raise:#1B2C3C;
    --ink:#F2EEE6; --ink-mid:#C5CBD2; --muted:#8B97A3;
    --border:rgba(242,238,230,.18); --border-soft:rgba(242,238,230,.10);
    --hair:rgba(242,238,230,.30);
    --ink-on-brand:#0C1924;
  }
}
:root[data-brand="b"][data-theme="dark"]{
  --brand:#C9A96A; --brand-dark:#B08F4E; --brand-light:#DCC48F;
  --brand-soft:#1B2836; --brand-hair:rgba(201,169,106,.30);
  --gold:#C9A96A; --gold-lift:#E0CA97;
  --accent:#8FB0D8; --accent-soft:#16212C;
  --bg:#0B151E; --surface:#111E2A; --surface-alt:#152332; --raise:#1B2C3C;
  --ink:#F2EEE6; --ink-mid:#C5CBD2; --muted:#8B97A3;
  --border:rgba(242,238,230,.18); --border-soft:rgba(242,238,230,.10);
  --hair:rgba(242,238,230,.30);
  --ink-on-brand:#0C1924;
}

/* ── Dark bands ──────────────────────────────────────────────────────────── */
:root[data-brand="b"] .dark-band{
  --d-ink:#F4F1EA; --d-mid:rgba(244,241,234,.70); --d-soft:rgba(244,241,234,.40);
  --d-line:rgba(201,169,106,.22); --d-rose:#C9A96A;   /* 7.94:1 on navy */
  background:#0C1924;
}
:root[data-brand="b"] .dark-band .subhead{color:#D9C08A}

/* ── Typography ──────────────────────────────────────────────────────────── */
/* Playfair runs larger on the body than Spectral and its hairlines thin out
   quickly, so headings come down a touch and tracking opens up. */
:root[data-brand="b"] .display{letter-spacing:-.024em; font-weight:700}
:root[data-brand="b"] h1,:root[data-brand="b"] h2,
:root[data-brand="b"] h3{letter-spacing:-.018em}
:root[data-brand="b"] body{font-size:15.5px; letter-spacing:.002em}

/* The sheet has no monospace anywhere. Every small label on it is a wide-tracked
   sans cap, so the eyebrow treatment changes with the typeface. */
:root[data-brand="b"] .badge,
:root[data-brand="b"] .sec-head .sh-r,
:root[data-brand="b"] .statrow .cap,
:root[data-brand="b"] .crumbs,
:root[data-brand="b"] .legal .upd,
:root[data-brand="b"] .wz-count,
:root[data-brand="b"] .form legend,
:root[data-brand="b"] .disc .dn,
:root[data-brand="b"] .cx-k,
:root[data-brand="b"] .ts-k{font-weight:500; letter-spacing:.20em}
:root[data-brand="b"] .badge{border-radius:2px; text-transform:uppercase; font-size:9.5px}
:root[data-brand="b"] .disc .dn{font-family:var(--font-display); letter-spacing:-.01em; font-weight:600}

/* ── Gold as a graphic device, never as words ────────────────────────────── */
:root[data-brand="b"] .badge .bdot{background:var(--gold)}
:root[data-brand="b"] .rules{border-top:1px solid var(--gold)}
:root[data-brand="b"] .disc,
:root[data-brand="b"] .qlist,
:root[data-brand="b"] .faq,
:root[data-brand="b"] .defs,
:root[data-brand="b"] .ledger,
:root[data-brand="b"] .stat{border-top-color:var(--gold)}
:root[data-brand="b"] .sec-head{border-bottom-color:var(--brand-hair)}
:root[data-brand="b"] .pullquote{color:var(--ink)}
:root[data-brand="b"] .dark-band .pullquote{color:#D9C08A}
:root[data-brand="b"] .form-done{border-left-color:var(--gold)}
:root[data-brand="b"] .draft-flag{border-color:var(--brand-hair); background:var(--brand-soft); color:var(--brand-dark)}
:root[data-brand="b"] .wz-bar{background:linear-gradient(90deg,var(--brand-light),var(--gold))}
:root[data-brand="b"] .wz-dots .dot.now,
:root[data-brand="b"] .wz-dots .dot.done{background:var(--gold); border-color:var(--gold)}
:root[data-brand="b"] .qlist .qi::before{color:var(--brand)}
:root[data-brand="b"] .faq-q::after,
:root[data-brand="b"] .faq-q::before{background:var(--brand)}

/* Solid buttons go navy with cream text. Gold behind cream is 2.4:1 and
   unreadable; gold behind navy is fine but reads as a warning in a row of them. */
:root[data-brand="b"] .btn-solid{background:var(--ink); color:#FAF8F5; border-color:var(--ink)}
:root[data-brand="b"] .btn-solid:hover{background:#16293A; border-color:#16293A}
:root[data-brand="b"] .dark-band .btn-solid{background:var(--gold); color:#0C1924; border-color:var(--gold)}
:root[data-brand="b"] .cta-band{background:#0C1924}
:root[data-brand="b"] .cta-band .btn-solid{background:#FAF8F5; color:#0C1924; border-color:#FAF8F5}
:root[data-brand="b"] .cta-band .cta-note{color:rgba(244,241,234,.62)}
:root[data-brand="b"] .btn-step:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}

/* ── The lockup ──────────────────────────────────────────────────────────── */
/* Brand A ships a keystone glyph plus a text wordmark. Brand B ships the drawn
   RCAG lockup, so one is swapped out for the other rather than restyled. */
.rcag-lockup{display:none}
:root[data-brand="b"] .brand .mark-svg,
:root[data-brand="b"] .brand .mark{display:none}
:root[data-brand="b"] .brand .rcag-lockup.on-light{display:block; width:auto; height:30px}
:root[data-brand="b"] .site-header.over-dark .brand .rcag-lockup.on-light,
:root[data-brand="b"][data-theme="dark"] .brand .rcag-lockup.on-light{display:none}
:root[data-brand="b"] .site-header.over-dark .brand .rcag-lockup.on-dark,
:root[data-brand="b"][data-theme="dark"] .brand .rcag-lockup.on-dark{display:block; width:auto; height:30px}
@media (prefers-color-scheme:dark){
  :root[data-brand="b"]:not([data-theme="light"]) .brand .rcag-lockup.on-light{display:none}
  :root[data-brand="b"]:not([data-theme="light"]) .brand .rcag-lockup.on-dark{display:block; width:auto; height:30px}
}
:root[data-brand="b"] .brand .full{color:var(--muted); letter-spacing:.16em}
@media (max-width:520px){
  :root[data-brand="b"] .brand .rcag-lockup{height:25px !important}
}
:root[data-brand="b"] .site-footer .mark-svg,
:root[data-brand="b"] .site-footer .fb-lock .mark{display:none}
:root[data-brand="b"] .site-footer .fb-lock .rcag-lockup{display:block; height:26px}

/* ── Photography ─────────────────────────────────────────────────────────── */
/* The portraits were matted against the oxblood palette. On navy the red
   channel in the skin reads warm against a cool ground, so it gets nudged. */
:root[data-brand="b"] .ph-photo img,
:root[data-brand="b"] .dark-band.has-portrait img{filter:saturate(.92) hue-rotate(-4deg)}

/* ── Dark band ground ────────────────────────────────────────────────────── */
/* The base band paints a plum ground plus two oxblood radial washes. Brand B
   repaints all three; overriding only `background` leaves the washes behind and
   the band still reads maroon. */
:root[data-brand="b"] .dark-band::before{
  background:
    radial-gradient(120% 78% at 76% 12%, rgba(30,68,104,.46) 0%, rgba(12,25,36,0) 62%),
    radial-gradient(80% 60% at 8% 96%, rgba(138,106,40,.26) 0%, rgba(12,25,36,0) 60%);
}
:root[data-brand="b"] .marquee{background:#0C1924}
:root[data-brand="b"] .marquee-track span::after{background:var(--gold)}
:root[data-brand="b"] .dark-band .btn-solid{color:#0C1924}
:root[data-brand="b"] .dark-band .subhead,
:root[data-brand="b"] body.dark-hero .crumbs a:hover{color:#D9C08A}
:root[data-brand="b"] .dark-band .field input:focus,
:root[data-brand="b"] .dark-band .field select:focus,
:root[data-brand="b"] .dark-band .field textarea:focus{box-shadow:0 0 0 3px rgba(201,169,106,.30)}
:root[data-brand="b"] .dark-band .form-msg.err{background:rgba(201,169,106,.13); color:#F0E2C4; border-color:rgba(201,169,106,.36)}
:root[data-brand="b"] .dark-band .wz-dots .dot.done{background:rgba(201,169,106,.38); border-color:rgba(201,169,106,.38)}

/* ── Header over a dark hero ─────────────────────────────────────────────── */
:root[data-brand="b"] .site-header.over-dark .mark-svg path{fill:var(--gold)}
:root[data-brand="b"] .site-header.over-dark .nav-links .btn-solid{background:var(--gold); color:#0C1924; border-color:var(--gold)}
@media (max-width:900px){
  :root[data-brand="b"] .site-header.over-dark .nav-links{background:#0C1924}
}

/* ── The arch ────────────────────────────────────────────────────────────── */
:root[data-brand="b"] .hero-arch .stone{fill:rgba(201,169,106,.18); stroke:rgba(201,169,106,.55)}
:root[data-brand="b"] .hero-arch .key{fill:rgba(201,169,106,.44); stroke:rgba(201,169,106,.95)}
:root[data-brand="b"] .hero-arch .load{stroke:rgba(201,169,106,.60)}
:root[data-brand="b"] .hero-arch .ring{stroke:rgba(201,169,106,.20)}

/* ── Capability map ──────────────────────────────────────────────────────── */
:root[data-brand="b"] .cm-node,
:root[data-brand="b"] .cm-hub{fill:#0C1924}
:root[data-brand="b"] .cm-node{stroke:rgba(201,169,106,.62)}
:root[data-brand="b"] .cm-hub{stroke:rgba(201,169,106,.44)}
:root[data-brand="b"] .cm-g:hover .cm-spoke,
:root[data-brand="b"] .cm-g:focus-visible .cm-spoke{stroke:rgba(201,169,106,.85)}
:root[data-brand="b"] .cm-g:hover .cm-node,
:root[data-brand="b"] .cm-g:focus-visible .cm-node{fill:var(--gold-lift); stroke:var(--gold-lift)}
:root[data-brand="b"] .cm-key{fill:var(--gold-lift)}
:root[data-brand="b"] .cm-list li::before{border-color:rgba(201,169,106,.7)}

/* ── Cycle ring ──────────────────────────────────────────────────────────── */
:root[data-brand="b"] .cy-node.pub{fill:var(--gold); stroke:var(--gold)}
:root[data-brand="b"] .cy-lab.pub{fill:var(--brand)}
:root[data-brand="b"] .dark-band .cy-lab.pub{fill:var(--gold-lift)}

/* ── Sequence chart ──────────────────────────────────────────────────────── */
/* Two series, so both hues have to stay separable. The base pair was validated
   against the plum band; this pair was re-run through the same validator on the
   navy ground: #B5852F / #3E9DC2 passes all six checks, worst adjacent CVD
   deltaE 19.3 (protan), normal-vision 21.2, both inside L 0.48-0.67. */
:root[data-brand="b"] .seqchart{--u:#B5852F; --c:#3E9DC2}
:root[data-brand="b"] .seqchart .dot{stroke:#0C1924}
:root[data-brand="b"] .sc-tip{background:#132434; border-color:rgba(244,241,234,.20)}

/* ── The A/B control ─────────────────────────────────────────────────────── */
/* Review-only. To retire: delete this block, the button in src/header.html,
   the brand branch in shared.js, the no-flash script's brand branch, and the
   theme-b.css + brandBFonts links in every head. */
.brand-toggle{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--border);
  background:transparent; cursor:pointer; padding:0; line-height:1;
  font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); transition:border-color .16s, color .16s;
}
.brand-toggle:hover{border-color:var(--brand); color:var(--brand)}
.brand-toggle:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.brand-toggle .bt-b{display:none}
:root[data-brand="b"] .brand-toggle .bt-a{display:none}
:root[data-brand="b"] .brand-toggle .bt-b{display:inline}
:root[data-brand="b"] .brand-toggle{border-color:var(--brand-hair); color:var(--brand)}
.site-header.over-dark .brand-toggle{border-color:rgba(246,241,230,.28); color:rgba(246,241,230,.72)}
:root[data-brand="b"] .site-header.over-dark .brand-toggle{border-color:rgba(201,169,106,.45); color:#D9C08A}
.nav-cta{display:flex; align-items:center; gap:8px}

/* The arch stones read muddy at 18% gold on navy; lift them so the graphic
   holds its shape the way it does on the plum ground. */
:root[data-brand="b"] .hero-arch .stone{fill:rgba(201,169,106,.26); stroke:rgba(201,169,106,.68)}
:root[data-brand="b"] .hero-arch .key{fill:rgba(201,169,106,.56); stroke:#D9C08A}