:root {
 /* COLOUR */

 --hB:210; /* SAPPHIRE s85% l39% */
 --hA:60; /* SAGE */
 --hC:25; /* BRONZE */
 --hD:39; /* GOLD */

 --sHigher:92%;--sHigh:86%;--sMidHigh:78%;
 --sMid:68%;--sMidNeut:56%;--sNeut:44%;

 --snHighest:32%;--snHigher:30%;--snHigh:27%;
 --snMidHigh:24%;--snMid:20%;--snMidLow:16%;
 --snLow:13%;--snLower:10%;--snLowest:8%;

 --white:hsl(51 50% 90%);
 --lighter:hsl(53 30% 82%);
 --light:hsl(55 21% 74%);
 --midlight:hsl(58 16% 66%);
 --neutral:hsl(60 10% 58%);
 --middark:hsl(60 11% 50%);
 --dark:hsl(60 12% 42%);
 --darker:hsl(60 18% 27%);
 --black:hsl(60 15% 12%);

 --awhite:52, 50%, 90%,;
 --alighter:54, 40%, 82%,;
 --alight:55, 7%, 74%,;
 --amidlight:58, 9%, 66%,;
 --aneutral:60, 10%, 58%,;
 --amiddark:60, 11%, 50%,;
 --adark:60, 12%, 42%,;
 --adarker:62, 13%, 27%,;
 --ablack:65, 15%, 12%,;

 --COLOUR:hsl(var(hA) var(--snLower) var(--dark));
 --aCOLOUR:hsla(var(hA), var(--snLower), var(--dark),);



 /* SIZING */
 --baseFontSize:13.6px;
 --spacer:1rem;
 --maxwidth:900px;
 --s-art-w:500px;
 --s-navLeft:14.3%;

 /* border */

 --outline:3px;
 /* SHAPING */
 --bRadius-sm:12px;
 /* SHADING */
 --shadow:0px 1px 6px 0px rgba(0,0,0,1);
 --shadow-flat:0px .25px 3px 1px rgba(0,0,0,0.3);
 --shadow-top-flat:0px -1px 3px 1px rgba(0,0,0,0.3);
 /*ANIMATION*/
 --ease-in-out:ease-in-out 0.3s;
 --ease-in-out-long:ease-in-out 1s;
 /*DEV*/
 --viewOutline:1px solid teal;

}