/* The two doors' first windows (designers.html, business.html; Brody, 13 Oct 2026): as rich as the landing page's
   cards they open from. The side's dunes fill the whole window at full strength (no fog, no fading), its colour is
   washed in from the left so the words sit on it, and the words, figures, header and footer in the window turn
   white, as on the cards. At night the same picture is multiplied into a deep version of the colour, as the cards
   are, so it keeps its grain and the words stay white. Each page gives its colours (designers.css, business.css:
   --side-wash, --side-deep, --side-wash-night); everything below the window is unchanged. */

/* the picture: the whole window, a little over its edges so the pointer and scroll drift (narrative.js) never shows one */
:is(body.designers,body.business) .nf-hero .nf-land{left:-3%;top:-3%;width:106%;height:106%;--nf-land-mask:none}
:is(body.designers,body.business) .nf-side-land{position:absolute;inset:0;isolation:isolate;
  transition:background-color var(--nf-theme-dur) ease}
:is(body.designers,body.business) .nf-side-land .nf-land-img{opacity:1;object-position:70% 60%}
/* the wash: the side's colour from the left, clearing towards the dunes on the right; a little at the foot too */
:is(body.designers,body.business) .nf-side-land:after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,var(--side-wash) 0%,color-mix(in oklab,var(--side-wash) 78%,transparent) 30%,
      color-mix(in oklab,var(--side-wash) 25%,transparent) 58%,transparent 78%),
    linear-gradient(0deg,color-mix(in oklab,var(--side-wash) 55%,transparent) 0%,transparent 28%)}
:root[data-theme="dark"] :is(body.designers,body.business) .nf-side-land{background:var(--side-deep)}
:root[data-theme="dark"] :is(body.designers,body.business) .nf-side-land .nf-land-img{mix-blend-mode:multiply}
:root[data-theme="dark"] :is(body.designers,body.business) .nf-side-land:after{--side-wash:var(--side-wash-night)}

/* white in the window, as on the cards: the site's own tokens, set for this window only */
:is(body.designers,body.business) .nf-hero{
  --nf-text:#fff; --nf-text-strong:#fff; --nf-text-secondary:rgba(255,255,255,.92); --nf-text-soft:rgba(255,255,255,.9);
  --nf-text-muted:rgba(255,255,255,.8); --nf-text-faint:rgba(255,255,255,.74); --nf-text-ghost:rgba(255,255,255,.45);
  --nf-leader:rgba(255,255,255,.4); --nf-hair:rgba(255,255,255,.2);
  --nf-glass:rgba(255,255,255,.16); --nf-glass-edge:rgba(255,255,255,.3); --nf-glass-lit:rgba(255,255,255,.26);
  --nf-control:#fff; --nf-control-hover:#fff; --nf-on-control:#3B3530;
  border-color:rgba(255,255,255,.3)}
:root[data-theme="dark"] :is(body.designers,body.business) .nf-hero{border-color:rgba(255,255,255,.12)}
/* the words and lines hazed into the window's colour, as the rest of the site's are into its surface (style.css
   --nf-haze; Brody 13 Oct 2026: "the same haze from engine and pricing"): white, washed by the same amounts */
:is(body.designers,body.business) .nf-hero{--side-mist:var(--side-wash)}
:root[data-theme="dark"] :is(body.designers,body.business) .nf-hero{--side-mist:var(--side-wash-night)}
@supports (color:color-mix(in oklab,red,blue)){
  :is(body.designers,body.business) .nf-hero{
    --nf-text:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-text)),#fff);
    --nf-text-strong:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-text)),#fff);
    --nf-text-secondary:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-secondary)),#fff);
    --nf-text-soft:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-soft)),#fff);
    --nf-text-muted:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-muted)),#fff);
    --nf-text-faint:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-faint)),#fff);
    --nf-control:color-mix(in oklab,var(--side-mist) calc(var(--nf-haze)*var(--nf-haze-control)),#fff);
    --nf-leader:color-mix(in oklab,color-mix(in oklab,var(--side-mist) 30%,#fff) 40%,transparent);
  }
}
/* going back to the landing page (doors.js), the window goes blank just before it shrinks into its card: its dunes and
   wash alone, so what shrinks is the background and not its words squashed */
:is(body.designers,body.business) .nf-hero.nf-door-blank{box-shadow:none;transition:none}
:is(body.designers,body.business) .nf-hero.nf-door-blank>:not(.nf-land){visibility:hidden}
/* the logo in whites: its colour would vanish into the window's */
:is(body.designers,body.business) .nf-hero .nf-logo circle:nth-of-type(1){fill:rgba(255,255,255,.55)}
:is(body.designers,body.business) .nf-hero .nf-logo circle:nth-of-type(2){fill:rgba(255,255,255,.8)}
:is(body.designers,body.business) .nf-hero .nf-logo circle:nth-of-type(3){fill:#fff}

/* the first window's words (Brody, 13 Oct 2026; on the business page too, 14 Oct): in the middle of the dunes the
   page's line ("Find your next Project", "Find the right Designer"), and under it, small, the kind of work typed,
   deleted and retyped (narrative.js [data-type]). The window's white, hazed words */
:is(body.designers,body.business) .nf-hero .nf-hero-body.nfd-find{align-self:center;text-align:center;padding:0 6%}
:is(body.designers,body.business) .nfd-find-h{margin:0;font:400 clamp(26px,2.3vw,34px)/1.1 "Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:-.02em;color:var(--nf-text)}
:is(body.designers,body.business) .nfd-find-kind{margin:10px 0 0;font:400 clamp(14px,1.05vw,16px)/1.3 "Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.01em;color:var(--nf-text-soft)}

/* the four in the window, as icons with their titles (Brody, 13 Oct 2026): low in the window, small and quiet, so the
   words in the middle lead; in the flow under them on phones */
:is(body.designers,body.business) .nfd-icons{position:absolute;left:50%;bottom:clamp(64px,calc(10*var(--vh,1svh)),104px);translate:-50% 0;z-index:1;
  display:flex;justify-content:center;gap:clamp(18px,2.6vw,36px);margin:0;padding:0;list-style:none;white-space:nowrap}
:is(body.designers,body.business) .nfd-icons a{display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;font-weight:500;
  letter-spacing:.01em;color:var(--nf-text-faint);text-decoration:none;opacity:.85;transition:color .3s var(--nf-ease),opacity .3s var(--nf-ease)}
:is(body.designers,body.business) .nfd-icons a:hover{color:var(--nf-text);opacity:1}
:is(body.designers,body.business) .nfd-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);transition:background-color .3s var(--nf-ease)}
:is(body.designers,body.business) .nfd-icons a:hover .nfd-icon{background:rgba(255,255,255,.16)}
:is(body.designers,body.business) .nfd-icon svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  :is(body.designers,body.business) .nfd-icons{position:static;translate:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;margin:36px 20px 32px;white-space:normal}
}

/* the four under the window, in the old cards' look (style.css .nfc), three in a row and the fourth full width under
   them (Qualified introductions for designers, a free look for businesses), with its mark and where it leads, in the
   page's accent (Brody, 13-14 Oct 2026) */
:is(body.designers,body.business) .nfd-panel .nfc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
:is(body.designers,body.business) .nfd-panel .nfd-wide{grid-column:1/-1}
:is(body.designers,body.business) .nfd-panel .nfd-wide .nfc-card>div{flex:1}
:is(body.designers,body.business) .nfd-head{display:flex;align-items:center;gap:12px}
:is(body.designers,body.business) .nfd-badge{margin-left:auto;padding:3px 10px;border-radius:99px;background:var(--nf-surface-light);
  font-size:11.5px;font-weight:500;color:var(--nf-text);white-space:nowrap}
:is(body.designers,body.business) .nfd-panel .nfd-wide .nfc-p{max-width:640px}
:is(body.designers,body.business) .nfd-go{display:inline-flex;align-items:center;gap:7px;margin:12px 0 0;font-size:13px;font-weight:500;
  color:color-mix(in oklab,var(--side-accent) 70%,var(--nf-ink))}
:is(body.designers,body.business) .nfd-go svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  transition:translate .3s var(--nf-ease)}
:is(body.designers,body.business) .nfd-wide a:hover .nfd-go svg{translate:2px -2px}
@media (max-width:900px){:is(body.designers,body.business) .nfd-panel .nfc-grid{grid-template-columns:1fr}}