/* The business door (business.html, Brody, 13 Oct 2026). It is the designer page part for part (style.css's
   body.home), in the same monochrome: the same stone, the same landscape, light and dark. Sage marks only a few
   things as the business side's (Brody, 13 Oct 2026: colour on certain elements, not the whole page): the logo and
   the cards' icons, as on the landing page's business door (landing.css). Dark mode follows the site's switch
   (theme.js). */

body.business{--b-sage:#66755F}
:root[data-theme="dark"] body.business{--b-sage:#8E9C88}

/* the logo in sage (the square mark, 25 Oct 2026): the back square sage, the overlap the cream with a tenth of
   sage, as Brody's front square lets a tenth of the back one through */
body.business .nf-logo .nf-m1{fill:var(--b-sage)}
body.business .nf-logo .nf-m3{fill:color-mix(in oklab,var(--b-sage) 10%,#D9C5B4)}

/* the first window in sage, as rich as the landing page's business card (sides.css draws it; these are its colours,
   the card's own: the wash over the dunes, and the deep colour they're multiplied into at night) */
body.business{--side-wash:#99A28F;--side-deep:#7D8C74;--side-wash-night:#45503F;--side-accent:var(--b-sage)}

/* the cards' icons, as on the landing page's business door */
body.business .nfc-ico{background:color-mix(in oklab,var(--b-sage) 14%,var(--nf-surface-light))}
body.business .nfc-ico svg{stroke:color-mix(in oklab,var(--b-sage) 85%,var(--nf-ink))}

/* the whole page in deep sage (Brody, 13 Oct 2026: instead of black, the dark sage of the cards). The page is always
   dark (layout.html), so these are its colours everywhere: the page, every surface below the window, the words, the
   lines. The page sits a little deeper than the window, so the window still stands out from it */
:root[data-theme="dark"] body.business{
  --nf-page:#2D3629; --nf-page-hi:#333D2E; --nf-page-lo:#283024;
  --nf-surface:#343F30; --nf-surface-soft:#3A4636; --nf-surface-muted:#43503E; --nf-surface-light:#4C5A47;
  --nf-ink:#EEF2EA; --nf-ink-strong:#F8FAF5; --nf-ink-secondary:#D3DCCC; --nf-ink-soft:#BFCAB7;
  --nf-ink-muted:#ADB9A5; --nf-ink-faint:#93A08B; --nf-ink-control:#EEF2EA; --nf-ink-control-hover:#F8FAF5;
  --nf-text-ghost:#66735F; --nf-on-control:#2D3629;
  --nf-divider:#48553F;
  --nf-glass:rgba(235,245,230,.07); --nf-glass-edge:rgba(235,245,230,.1); --nf-glass-lit:rgba(235,245,230,.12);
  --nf-hair:rgba(235,245,230,.12); --nf-leader:rgba(235,245,230,.2);
  --nf-shadow:rgba(5,12,5,.35); --nf-inner:rgba(235,245,230,.05)}
/* style.css washes the words into the surface once, on :root; the sage surface needs it done again here */
@supports (color:color-mix(in oklab,red,blue)){
  :root[data-theme="dark"] body.business{
    --nf-text:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-text)),var(--nf-ink));
    --nf-text-strong:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-text)),var(--nf-ink-strong));
    --nf-text-secondary:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-secondary)),var(--nf-ink-secondary));
    --nf-text-soft:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-soft)),var(--nf-ink-soft));
    --nf-text-muted:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-muted)),var(--nf-ink-muted));
    --nf-text-faint:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-faint)),var(--nf-ink-faint));
    --nf-control:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-control)),var(--nf-ink-control));
    --nf-control-hover:color-mix(in oklab,var(--nf-surface) calc(var(--nf-haze)*var(--nf-haze-control)*.5),var(--nf-ink-control-hover));
  }
}
/* the two parts style.css draws in fixed greys at night: the cards' icons and the scenes' panes */
:root[data-theme="dark"] body.business .nfc-ico{background:color-mix(in oklab,var(--b-sage) 18%,var(--nf-surface-muted))}
:root[data-theme="dark"] body.business .nfw-pane{background:var(--nf-surface-muted)}
/* the scenes' small pictures: the page's own dunes, deepened as the cards are, not the grey night picture */
:root[data-theme="dark"] body.business .nfw-shot{background-image:url(/img/landscape-sage.webp);
  background-color:var(--side-deep);background-blend-mode:multiply}