/* mean-projects 1.0.4 (1.0.3 plus OP-516/OP-520: Back To Projects mirrors the menu button, Know More stands on its left edge, arrows on both, Know More's hover fill repaired)  ·  1.0.3 (1.0.2 plus, site review of 6 Oct: the Back To Projects button is black with an off-white line over a photograph, L29; phone arrows and count keep inside a photograph shown whole; 1.0.2 = 1.0.1 plus, Riyad, 6 Oct: portrait and square photographs shown whole with words beside them, OP-502 and OP-504; the Back To Projects button, OP-501; 1.0.1 = 1.0.0 plus four repairs of 6 Oct: filter counts readable, view text 26/26, Next Project 44 px on a phone held sideways, unused blue removed): the Projects page and the project views (rows OP-482 to OP-488). The menu is mean-menu 1.0.0.
   Tokens are the site's own. Selectors never end on a catch-all (AU-57). */
:root { --np-black: var(--base-color-neutral--black, #181818); --np-white: var(--base-color-neutral--white, #f7f7f5); --np-quiet: #878786; --np-line: 3px; --np-ease: cubic-bezier(.16, 1, .3, 1); }
@media (max-width: 767px) { :root { --np-line: 2px; } }


/* ============ 2. Projects index (OP-483, OP-484) ============ */
html[data-np] body { background: var(--np-white); }
.np-index { background: var(--np-white); color: var(--np-black); padding: 0 var(--np-g, 50px) 96px; min-height: 100vh; }
.np-top { padding-top: 256px; }
html[data-np]:not(.mm-open) body .header.w-nav .hero-logo.hero-logo.hero-logo, html[data-np]:not(.mm-open) body .header.w-nav .hero-logo.hero-logo.hero-logo > div { color: var(--np-logo, var(--np-black)) !important; }
html[data-np]:not(.mm-open) body .header.w-nav .menu-btn .menu-line.menu-line { background-color: var(--np-lines, var(--np-black)) !important; }
.np-title { margin: 0; font: 400 var(--slg-fs, min(calc(100vw / 15 * .95), 121.6px))/1 Fugue, "Fugue Fallback", sans-serif; letter-spacing: normal; color: var(--np-black); font-synthesis: none; }
.np-filter { position: relative; margin-top: 44px; padding-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-items: baseline; }
.np-filter::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--np-line); background: rgba(24, 24, 24, .16); }
.np-filter-mark { position: absolute; left: 0; top: 0; height: var(--np-line); width: var(--np-mw, 25%); background: var(--np-black); transform: translateX(var(--np-mx, 0px)); transition: transform .7s var(--np-ease), width .7s var(--np-ease); }
.np-filter a { justify-self: start; white-space: nowrap; font: 400 clamp(34px, 3vw, 58px)/1 Fugue, "Fugue Fallback", sans-serif; color: var(--np-quiet); text-decoration: none; padding: 6px 0 8px; transition: color .3s ease; font-synthesis: none; }
.np-filter a:hover, .np-filter a[aria-current] { color: var(--np-black); }
.np-filter a:focus-visible, .np-tile:focus-visible, .np-rest a:focus-visible, .np-work a:focus-visible, .np-work button:focus-visible { outline: var(--np-line) solid var(--np-black); outline-offset: 4px; }
.np-filter a sup { color: color-mix(in srgb, currentColor 60%, var(--np-black)); font: 400 15px/1 "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; vertical-align: top; position: relative; top: .5em; margin-left: .45em; font-variant-numeric: tabular-nums; }
.np-count, .np-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.np-grid { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; position: relative; }
.np-grid.is-laid { display: block; }
.np-grid.is-laid > li { position: absolute; left: 0; top: 0; transition: transform .8s var(--np-ease), opacity .45s ease; }
.np-grid > li.is-out { opacity: 0; pointer-events: none; transform: var(--np-t) scale(.96); visibility: hidden; transition: transform .45s ease, opacity .3s ease, visibility 0s .45s; }
.np-tile { position: relative; display: block; overflow: hidden; color: var(--np-white); text-decoration: none; background: #e9e9e6; }
.np-tile img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; transition: transform .6s cubic-bezier(.165, .84, .44, 1); }
.np-blur { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; -webkit-mask-image: linear-gradient(to bottom, transparent 54%, #000 90%); mask-image: linear-gradient(to bottom, transparent 54%, #000 90%); }
.np-tile .np-blur img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; filter: blur(18px); transform: scale(1.14); transition: none; }
.np-cap { position: absolute; left: 16px; right: 16px; bottom: 14px; display: block; }
.np-name { display: block; font: 400 32px/1.02 Fugue, "Fugue Fallback", sans-serif; text-wrap: balance; font-synthesis: none; opacity: 0; transform: translateY(26px); transition: opacity .3s ease, transform .5s var(--np-ease); }
.np-loc { display: block; margin-top: 8px; font: 400 12px/16px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; opacity: 0; transform: translateY(26px); transition: opacity .3s ease .06s, transform .5s var(--np-ease) .06s; }
@media (hover: hover) and (min-width: 768px) {
  .np-tile:hover > img, .np-tile:focus-visible > img { transform: scale(1.02); }
  .np-tile:hover .np-blur, .np-tile:focus-visible .np-blur { opacity: 1; visibility: visible; transition: opacity .6s ease, visibility 0s; }
  .np-tile:hover .np-name, .np-tile:hover .np-loc, .np-tile:focus-visible .np-name, .np-tile:focus-visible .np-loc { opacity: 1; transform: none; }
}
html.np-ink .np-tile[data-ink=dark] { color: var(--np-black); }
/* tile walk-through (proposal, ?walk=1 and the review page) */
.np-walk-track { position: absolute; inset: 0; display: flex; opacity: 0; will-change: transform; }
.np-tile.is-walking .np-walk-track { opacity: 1; }
.np-walk-track > img, .np-walk-card { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto !important; transform: none !important; }
.np-walk-card { position: relative; background: var(--np-black); color: var(--np-white); }   /* black, so it reads as a card on the off-white page */
.np-walk-name { position: absolute; left: 16px; right: 16px; bottom: 40px; font: 400 32px/1.02 Fugue, "Fugue Fallback", sans-serif; text-wrap: balance; font-synthesis: none; }
.np-walk-loc { position: absolute; left: 16px; right: 16px; bottom: 14px; font: 400 12px/18px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; }
html.np-walk .np-tile.is-walking .np-blur, html.np-walk .np-tile.is-walking .np-cap { opacity: 0 !important; visibility: hidden !important; }
html.np-walk .np-tile.is-walking > img { transform: none !important; }
.np-index.np-review { padding-top: 236px; }
.np-review h1 { margin: 0 0 8px; font: 400 40px/1.1 Fugue, "Fugue Fallback", sans-serif; font-synthesis: none; }
.np-review p { margin: 0 0 28px; max-width: 60em; font: 400 17px/26px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; }
/* no hover (phones, tablets held by hand): the name always shows over the blurred foot of the photo */
@media (hover: none), (max-width: 767px) {
  .np-blur { opacity: 1; visibility: visible; -webkit-mask-image: linear-gradient(to bottom, transparent 58%, #000 80%); mask-image: linear-gradient(to bottom, transparent 58%, #000 80%); }
  .np-loc { font-size: 13px; }
  .np-name, .np-loc { opacity: 1; transform: none; }
  .np-name { font-size: 24px; }
  /* Riyad, 5 Oct: "Dark Foot Behind The Names, Phones Only". Where the name always shows, a dark fade stands behind it at the photo's foot,
     strong enough for the small place line on a white photograph (4.5 to 1). Desktop hover keeps its unshaded blur. */
  .np-tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: min(170px, 100%); z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(24, 24, 24, .74) 0, rgba(24, 24, 24, .66) 110px, rgba(24, 24, 24, 0) 170px); }   /* a fixed depth, so a two-line name on a low photograph is covered too */
  .np-cap { z-index: 2; }
}
.np-rest { margin-top: 96px; padding-top: 20px; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; }
.np-rest::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--np-line); background: var(--np-black); }
.np-rest h2 { margin: 0; font: 700 17px/26px "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--np-black); }
.np-rest ul { grid-column: 2 / 5; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.np-rest li { break-inside: avoid; padding: 0 0 12px; font: 400 15px/23px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; }
.np-rest a { color: var(--np-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.np-rest a:hover { text-decoration-thickness: 2px; }
.np-rest span { display: block; color: #5c5c5a; }
@media (max-width: 1099px) {
  .np-grid, .np-filter, .np-rest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-filter { display: flex; gap: 28px; }
  .np-rest ul { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 20px; }
}
@media (max-width: 767px) {
  .np-index { padding: 0 var(--np-g, 20px) 72px; }
  .np-top { padding-top: 176px; }
  .np-title { font-size: 36px; }
  .np-filter { margin-top: 28px; gap: 18px; padding-top: 14px; }
  .np-filter a { font-size: 22px; min-height: 44px; display: inline-flex; align-items: center; padding: 0; color: #5c5c5a; }   /* small type: the grey that passes 4.5 to 1 on the off-white */
  .np-filter a sup { font-size: 12px; top: -.5em; margin-left: .3em; }
  .np-rest a { display: inline-block; padding: 10px 0 0; } .np-rest li { padding-bottom: 10px; }   /* 44 px to tap */
  .np-grid { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  .np-rest { margin-top: 72px; }
  .np-rest ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 360px) { .np-filter { gap: 12px; } .np-filter a { font-size: 19px; } .np-filter a sup { font-size: 12px; margin-left: .2em; } }

/* ============ 3. Project view (OP-485 to OP-487). No blue on this page: black and off-white only. ============ */
html[data-np=work], html[data-np=work] body { height: 100%; overflow: hidden; overscroll-behavior: none; }
html[data-np=work] .m-footer { display: none !important; }
/* Riyad, 5 Oct, on the white logo over pale photographs in the views: "remove the logo". The views carry no logo; the menu button stays, and the open menu shows MEAN* as on every page. */
html[data-np=work]:not(.mm-open) body .header.w-nav .hero-logo.hero-logo.hero-logo { visibility: hidden !important; }
html[data-np=work] .header.w-nav { position: absolute !important; left: 0; right: 0; top: 0; z-index: 20; }
html[data-np=work] .header.w-nav, html[data-np=work] .header-container { background: transparent !important; }
html[data-np=work]:not(.mm-open) body .header.w-nav .hero-logo.hero-logo.hero-logo, html[data-np=work]:not(.mm-open) body .header.w-nav .menu-btn .menu-line.menu-line { transition: color .4s ease, background-color .4s ease; }
.np-work { position: relative; height: 100vh; height: 100svh; background: var(--np-white); color: var(--np-black); }
.np-track { display: flex; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.np-track:focus-visible { outline: var(--np-line) solid var(--np-black); outline-offset: calc(-1 * var(--np-line)); box-shadow: inset 0 0 0 calc(2 * var(--np-line)) var(--np-white); }   /* a black line with an off-white line inside it: seen on any photograph */
.np-track::-webkit-scrollbar { display: none; }
.np-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); overflow: hidden; }
.np-slide.has-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.np-photo { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #e9e9e6; }
.np-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) var(--fy, 50%); }
/* text beside the photograph: the project pages' own title and body settings, in MEAN black */
.np-text { position: relative; display: flex; flex-direction: column; justify-content: flex-start; padding: var(--np-tt, 262px) 48px 44px var(--np-g, 50px); min-width: 0; min-height: 0; overflow: hidden; }
.np-h1, .np-end-name { margin: 0; font-family: Fugue, "Fugue Fallback", sans-serif; font-weight: 400; font-size: var(--np-ts, 90px); line-height: var(--np-tl, 94px); text-transform: none; letter-spacing: normal; color: var(--np-black); font-synthesis: none; }
.np-h1 span, .np-end-name span { display: block; white-space: nowrap; }
.np-p { text-wrap: pretty; margin: 45px 0 0; max-width: 40em; font: 400 26px/26px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--np-black); }
.np-slide.is-body .np-p { margin-top: 0; }
.np-end { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin-top: auto; }
.np-more { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; background: #fff; color: var(--np-black); border: var(--np-line) solid var(--np-black); font: 700 20px/28px "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; transition: background-color .8s ease, color .8s ease; }
.np-more:hover, .np-more:focus-visible { background: var(--np-black); color: #fff; }
.np-next { font: 400 17px/26px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--np-black); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.np-next { padding: 9px 0; }
.np-next:hover { text-decoration-thickness: 2px; }
/* 1.0.2, OP-502 (Riyad, 6 Oct: "Whenever an image is a portrait, always have it as a portrait in the slide deck. Don't crop it"): a photograph that is not
   wider than tall is shown whole, at the window's full height, flush right; the text panel takes the width that is left (OP-504: words from the project page). */
.np-slide.is-portrait .np-photo { background: var(--np-white); }
.np-slide.is-portrait .np-photo img { object-fit: contain; object-position: 50% 50%; }
@media (min-width: 992px) { .np-slide.is-portrait { grid-template-columns: minmax(0, 1fr) min(calc(100svh * var(--par, .75)), 62vw); } .np-slide.is-portrait .np-p { max-width: calc(50vw - var(--np-g, 50px) - 48px); } }   /* the same measure as beside a landscape photograph */
/* 1.0.2, OP-501 (Riyad, 6 Oct: "There should be a \"Back to Projects\" button in all the projects"): where the lockup stands on other pages, level with the menu
   button, in Know More's setting, so it reads on the off-white panel and on any photograph. It gives way to the open menu. */
.np-backp { position: absolute; left: var(--np-bl, calc(var(--mbr, 50px) + 12.5px)); top: var(--np-bt, calc(var(--mbt, 1px) + 19px)); z-index: 21; display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 26px; background: #fff; color: var(--np-black); border: var(--np-line) solid var(--np-black); font: 700 20px/28px "Helvetica Neue LT Std", "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none; white-space: nowrap; transition: background-color .8s ease, color .8s ease, opacity .3s ease, border-color .8s ease; }
.np-backp { transition-delay: 0s, 0s, .35s, 0s; }   /* it returns after the closing menu has left */
/* a site script writes the off-white on the element itself wherever it finds pure white, so each ground is stated with !important or the fills below would never show */
.np-backp { background-color: #fff !important; }
.np-backp:hover, .np-backp:focus-visible, .np-backp:active { background-color: var(--np-black) !important; color: #fff; }
/* over a photograph a button is black with an off-white line and fills off-white (L29; Riyad, 5 Oct: "Buttons on video or image can be black") */
.np-backp.is-on-photo { background-color: var(--np-black) !important; color: var(--np-white); border-color: var(--np-white); }
.np-backp.is-on-photo:hover, .np-backp.is-on-photo:focus-visible, .np-backp.is-on-photo:active { background-color: var(--np-white) !important; color: var(--np-black); }
html.mm-open .np-backp { opacity: 0; visibility: hidden; transition-delay: 0s; }
/* arrows: the site's carousel arrows (the same glyph, 40 px, 20 px inside the photograph's own edge, centred on its height); off-white, black where the photograph is light, never blue */
.np-arrow { position: absolute; top: 50%; z-index: 3; width: 44px; height: 44px; margin: -22px -2px 0; display: grid; place-items: center; background: none; border: 0; padding: 0; font-size: 40px; line-height: 1; color: var(--np-white); cursor: pointer; transition: color .4s ease, opacity .3s ease; -webkit-tap-highlight-color: transparent; }
.np-arrow.is-prev { left: calc(var(--np-pl, 0px) + 20px); color: var(--np-al, var(--np-white)); }
.np-arrow.is-next { right: 20px; color: var(--np-ar, var(--np-white)); }
.np-arrow [class^=w-icon-] { position: static; width: 1em; height: 1em; margin: 0; }
.np-arrow[aria-disabled=true] { opacity: 0; pointer-events: none; }
.np-work .np-arrow:focus-visible { outline-color: currentColor; outline-offset: 0; }
.np-count2 { position: absolute; right: 24px; bottom: 22px; z-index: 3; font: 400 15px/15px "Helvetica Neue Roman", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--np-ac, var(--np-white)); font-variant-numeric: tabular-nums; transition: color .4s ease; }
/* short windows: the body takes the site's smaller body setting so the paragraph still fits under the title */
@media (min-width: 992px) and (max-height: 700px) { .np-text { padding-bottom: 28px; } .np-p { margin-top: 28px; font-size: 16px; line-height: 25px; } }
@media (max-width: 991px) {
  .np-slide.has-text { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(30%, 1fr) auto; }
  .np-slide.has-text .np-photo { order: -1; }
  .np-text { padding: 22px var(--np-g, 20px) 26px; max-height: 70svh; overflow: visible; }
  .np-h1, .np-end-name { font-size: 30px; line-height: 32px; }
  .np-h1 span, .np-end-name span { display: inline; white-space: normal; }
  .np-p { margin-top: 14px; font-size: 16px; line-height: 25px; }
  .np-end { margin-top: auto; padding-top: 18px; gap: 14px 22px; }
  .np-more { height: 48px; font-size: 17px; }
  /* a photograph shown whole starts at the top like every other slide, its words follow straight under it, and the spare height falls under the words */
  .np-slide.is-portrait.has-text { display: flex; flex-direction: column; }
  .np-slide.is-portrait .np-photo { order: -1; flex: 0 1 auto; width: 100%; aspect-ratio: var(--par, .75); min-height: 30%; }
  .np-slide.is-portrait .np-text { flex: 0 0 auto; }
  .np-backp { height: 48px; padding: 0 20px; font-size: 17px; }
  .np-arrow { top: calc(var(--np-photo, 54svh) / 2); font-size: 32px; }
  .np-arrow.is-prev { left: calc(var(--np-il, 0px) + 12px); } .np-arrow.is-next { right: calc(var(--np-ir, 0px) + 12px); }   /* inside the photograph as it is drawn */
  .np-count2 { right: calc(var(--np-ir, 0px) + var(--np-g, 20px)); bottom: auto; top: calc(var(--np-photo, 54svh) - 30px); font-size: 13px; }
}
@media (max-width: 767px) { .np-h1, .np-end-name { font-size: 24px; line-height: 26px; } .np-p { line-height: 24px; } .np-backp { height: 44px; padding: 0 16px; font-size: 15px; line-height: 22px; left: var(--np-bl, 20px); } }
@media (max-width: 400px) { .np-p { font-size: 15px; line-height: 22px; } .np-text { padding-top: 16px; padding-bottom: 18px; } }
@media (max-width: 340px) { .np-p { font-size: 14px; line-height: 20px; } }
/* phones held sideways: text beside the photograph again, set small enough to fit */
@media (max-width: 991px) and (orientation: landscape) and (max-height: 500px) {
  .np-slide.has-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .np-slide.has-text .np-photo { order: 0; }
  .np-text { max-height: none; padding: 212px 18px 12px var(--np-g, 20px); justify-content: flex-end; }
  .np-h1, .np-end-name { font-size: 20px; line-height: 22px; margin: 0 0 auto; } .np-p { margin-top: 8px; font-size: 12.5px; line-height: 17px; }
  .np-more { height: 44px; font-size: 15px; } .np-next { font-size: 13px; line-height: 19px; padding: 12.5px 0; }
  .np-slide.is-portrait.has-text { display: grid; grid-template-columns: minmax(0, 1fr) min(calc(100svh * var(--par, .75)), 62vw); }
  .np-slide.is-portrait .np-photo { order: 0; aspect-ratio: auto; min-height: 0; }
  .np-arrow { top: 50%; } .np-count2 { top: auto; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root body .header.w-nav .header-nav.w-nav-menu .nav-link { transition: none !important; }
  .np-track { scroll-behavior: auto; }
  .np-grid.is-laid > li, .np-tile img, .np-blur, .np-name, .np-loc, .np-filter-mark, .np-more, .np-backp, .np-arrow { transition: none !important; }
  html:root body .header.w-nav .header-nav.w-nav-menu .np-swap { animation: none; }
}

/* 1.0.4, OP-516 and OP-520 (Riyad, 6 Oct): Back To Projects is the mirror of the menu button (its left edge and top come from the menu's lines, set by the script as --np-bl and --np-bt);
   Know More stands on the same left edge; "<- Back To Projects" and "Know More ->", the arrow in the label's colour. */
.np-ar { display: inline-block; flex: none; width: 1.1em; height: .6em; }
.np-ar svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: butt; stroke-linejoin: miter; }
.np-ar.is-l { margin-right: .5em; } .np-ar.is-r { margin-left: .5em; }
.np-more { margin-left: calc(var(--np-bl, calc(var(--mbr, 50px) + 12.5px)) - var(--np-g, 50px)); }
/* Know More's fills: a site script writes the off-white inline wherever it finds pure white, so the hover fill never showed (found 6 Oct) */
.np-more { background-color: #fff !important; }
.np-more:hover, .np-more:focus-visible, .np-more:active { background-color: var(--np-black) !important; color: #fff; }